"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
const AI_LINE_WIDTHS = [
    [85, 72, 90],
    [78, 65, 88, 70],
];
/**
 * Pulse-animated skeleton that mimics the shape of a conversation
 * thread. Renders alternating human-bubble and AI-response
 * silhouettes so the loading state feels purposeful.
 *
 * Intended as an opt-in building block for consumers to show while
 * session data loads. Not auto-rendered by {@link MessageThread}.
 *
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @example
 * ```tsx
 * if (isLoading) return <ThreadSkeleton className="flex-1" />;
 * ```
 */
export function ThreadSkeleton({ className }) {
    return (_jsx("div", { className: cn("flex flex-col gap-4 pt-6 pb-4", className), "aria-busy": "true", "aria-label": "Loading conversation", children: _jsxs("div", { className: "animate-pulse space-y-4", children: [_jsx("div", { className: "ms-[20%] rounded-lg bg-muted-subtle px-4 py-3", children: _jsx("div", { className: "h-4 w-3/5 rounded bg-muted" }) }), _jsx("div", { className: "space-y-2 px-4", children: AI_LINE_WIDTHS[0].map((w, i) => (_jsx("div", { className: "h-4 rounded bg-muted", style: { width: `${w}%` } }, i))) }), _jsx("div", { className: "ms-[20%] rounded-lg bg-muted-subtle px-4 py-3", children: _jsx("div", { className: "h-4 w-2/5 rounded bg-muted" }) }), _jsx("div", { className: "space-y-2 px-4", children: AI_LINE_WIDTHS[1].map((w, i) => (_jsx("div", { className: "h-4 rounded bg-muted", style: { width: `${w}%` } }, i))) })] }) }));
}
//# sourceMappingURL=ThreadSkeleton.js.map