"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { cn } from "@stigmer/theme";
import { formatArtifactSize } from "./artifact-utils.js";
/**
 * The live counterpart of {@link PlanArtifactCard} — a streaming Plan turn's
 * compact stand-in in the thread while the plan document renders live in the
 * session panel's plan tab. Same anatomy as the completed card (icon, title,
 * a `Writing… · size` meta, trailing actions) so the completion handoff reads
 * as the same card settling, not a new element appearing.
 *
 * The meta line deliberately omits a filename: the artifact's name is derived
 * from the plan's title, which is still streaming in, so a name shown here
 * would change under the user when the plan settles. The completed card
 * introduces the final `<slug>_<id>.plan.md` name once it exists.
 *
 * Deliberately action-light: "Open plan" is the only affordance. Download and
 * Build require the published artifact, which does not exist until the turn
 * completes — at which point `buildThreadItems` swaps this item for the
 * `plan-completion` item under the same list key.
 *
 * The pulsing icon is the progress affordance: a CSS animation inside `.stgm`,
 * covered by the stylesheet's global `prefers-reduced-motion` rule (DD-015),
 * and safe under virtualization (no `@starting-style`).
 *
 * All visual properties flow through `--stgm-*` tokens; the component is
 * self-contained and embeddable.
 */
export const PlanStreamingCard = memo(function PlanStreamingCard({ title, sizeBytes, onOpenPlan, className, }) {
    return (_jsxs("div", { role: "region", "aria-label": "Plan being written", "aria-busy": "true", className: cn("mx-4 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg", "border border-border-muted bg-card px-3 py-2.5", className), children: [_jsx(PlanIcon, { className: "animate-pulse" }), _jsxs("div", { className: "min-w-0 flex-1 basis-48", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: title ?? "Writing plan…" }), _jsxs("div", { className: "text-[0.65rem] text-muted-foreground-faint", children: [_jsx("span", { role: "status", children: "Writing\u2026" }), _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), _jsx("span", { className: "tabular-nums", children: formatArtifactSize(sizeBytes) })] })] }), onOpenPlan && (_jsxs("button", { type: "button", onClick: onOpenPlan, className: cn("ml-auto inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm"), children: [_jsx(EyeIcon, {}), "Open plan"] }))] }));
});
function PlanIcon({ className }) {
    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: cn("shrink-0 text-muted-foreground-faint", className), "aria-hidden": "true", children: [_jsx("path", { d: "M3 4h10M3 8h7M3 12h8" }), _jsx("path", { d: "M12.5 10.5l1.5 1.5-1.5 1.5" })] }));
}
/** An eye glyph — "view/open the plan to read it" (matches PlanArtifactCard). */
function EyeIcon() {
    return (_jsxs("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", "aria-hidden": "true", children: [_jsx("path", { d: "M1.5 8S4 3.5 8 3.5s6.5 4.5 6.5 4.5-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z" }), _jsx("circle", { cx: "8", cy: "8", r: "1.75" })] }));
}
//# sourceMappingURL=PlanStreamingCard.js.map