veryfront 0.1.997 → 0.1.998

package/esm/src/react/components/chat/ui/card.js

@@ -0,0 +1,55 @@
+/**
+ * Card — flat surface primitive, forked dependency-light from Veryfront
+ * Studio's `Card` (studio/components/Card). Solid (`bg-secondary`, no border,
+ * no shadow) for interactive content; outline (`border-outline-border`, no bg)
+ * for layout / non-interactive content. Both flat, radius baked in.
+ *
+ * Studio deps (cva/class-variance-authority, Heading/Text) are swapped for our
+ * private `cva` and plain elements. Private to the chat module.
+ *
+ * @module react/components/chat/ui/card
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { cva } from "./cva.js";
+const cardVariants = cva("w-full overflow-hidden", {
+    variants: {
+        surface: {
+            // Studio: solid = bg-secondary (interactive), outline = border only.
+            solid: "bg-[var(--secondary)]",
+            outline: "border border-[var(--outline-border)]",
+        },
+        padding: {
+            none: "",
+            sm: "p-4",
+            md: "p-5",
+            lg: "p-6",
+        },
+        // Studio radius scale: default = lg (20px), sm = md (12px). Nested cards
+        // read better at `sm` so they don't fight the outer chrome.
+        radius: {
+            default: "rounded-[var(--radius-lg)]",
+            sm: "rounded-[var(--radius-md)]",
+        },
+    },
+    defaultVariants: {
+        surface: "solid",
+        padding: "none",
+        radius: "default",
+    },
+});
+/** A flat card surface (Studio `Card`). */
+export function Card({ className, surface, padding, radius, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, className: cn(cardVariants({ surface, padding, radius }), className), ...props }));
+}
+Card.displayName = "Card";
+/** Card header row — a flex row (Studio composes these inline). */
+export function CardHeader({ className, ...props }) {
+    return (React.createElement("div", { className: cn("flex items-center gap-2", className), ...props }));
+}
+CardHeader.displayName = "Card.Header";
+/** Card body region — vertical stack. */
+export function CardContent({ className, ...props }) {
+    return React.createElement("div", { className: cn("flex flex-col", className), ...props });
+}
+CardContent.displayName = "Card.Content";

package/esm/src/react/components/chat/ui/checkbox.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Checkbox — Studio's Checkbox is built on `@radix-ui/react-checkbox`; here it's
+ * re-expressed on a native `<input type="checkbox">` (full a11y for free — focus,
+ * keyboard, form participation) with an overlaid check, keeping Studio's exact
+ * box styling. Self-contained, no radix. Accepts the native API plus an optional
+ * radix-style `onCheckedChange`. Plus `CheckboxField` + `CheckboxGroup`.
+ *
+ * @module react/components/chat/ui/checkbox
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<Checkbox>`. */
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Radix-style convenience callback fired with the next checked state. */
+    onCheckedChange?: (checked: boolean) => void;
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** A checkbox with an overlaid check indicator. */
+export declare function Checkbox({ className, onChange, onCheckedChange, ref, ...props }: CheckboxProps): React.ReactElement;
+/** Props accepted by `<CheckboxField>`. */
+export interface CheckboxFieldProps extends CheckboxProps {
+    label: React.ReactNode;
+    description?: string;
+}
+/** A checkbox paired with a clickable label and optional description. */
+export declare function CheckboxField({ label, description, id, ref, ...props }: CheckboxFieldProps): React.ReactElement;
+/** Vertical group of checkboxes. */
+export declare function CheckboxGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+//# sourceMappingURL=checkbox.d.ts.map

package/esm/src/react/components/chat/ui/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAKvD,sCAAsC;AACtC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC9F,0EAA0E;IAC1E,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,mDAAmD;AACnD,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,eAAe,EACf,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CAwBpC;AAED,2CAA2C;AAC3C,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,EAAE,EACF,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAoBzC;AAED,oCAAoC;AACpC,wBAAgB,aAAa,CAC3B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAEpB"}

package/esm/src/react/components/chat/ui/checkbox.js

@@ -0,0 +1,36 @@
+/**
+ * Checkbox — Studio's Checkbox is built on `@radix-ui/react-checkbox`; here it's
+ * re-expressed on a native `<input type="checkbox">` (full a11y for free — focus,
+ * keyboard, form participation) with an overlaid check, keeping Studio's exact
+ * box styling. Self-contained, no radix. Accepts the native API plus an optional
+ * radix-style `onCheckedChange`. Plus `CheckboxField` + `CheckboxGroup`.
+ *
+ * @module react/components/chat/ui/checkbox
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { CheckIcon } from "../icons/index.js";
+import { Label } from "./label.js";
+/** A checkbox with an overlaid check indicator. */
+export function Checkbox({ className, onChange, onCheckedChange, ref, ...props }) {
+    return (React.createElement("span", { className: "relative inline-flex shrink-0" },
+        React.createElement("input", { ref: ref, type: "checkbox", className: cn("peer size-5 shrink-0 appearance-none rounded-[var(--radius-xs)] border border-[var(--outline-border)] dark:border-[var(--background)]", "bg-[var(--input-bg)] cursor-pointer", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--edge-medium)]", "disabled:cursor-not-allowed disabled:opacity-50", "checked:bg-[var(--primary)] checked:border-[var(--primary)]", "transition-colors", className), onChange: (e) => {
+                onChange?.(e);
+                onCheckedChange?.(e.currentTarget.checked);
+            }, ...props }),
+        React.createElement(CheckIcon, { className: "pointer-events-none absolute inset-0 m-auto size-3! text-[var(--secondary)] opacity-0 peer-checked:opacity-100" })));
+}
+/** A checkbox paired with a clickable label and optional description. */
+export function CheckboxField({ label, description, id, ref, ...props }) {
+    const generatedId = React.useId();
+    const fieldId = id || generatedId;
+    return (React.createElement(Label, { htmlFor: fieldId, weight: "normal", className: "cursor-pointer flex items-center gap-2.5" },
+        React.createElement(Checkbox, { id: fieldId, ref: ref, ...props }),
+        React.createElement("span", { className: "flex flex-col" },
+            React.createElement("span", { className: cn(description && "mb-1") }, label),
+            description && (React.createElement("span", { className: "text-base font-normal text-[var(--foreground)]" }, description)))));
+}
+/** Vertical group of checkboxes. */
+export function CheckboxGroup({ className, ...props }) {
+    return React.createElement("div", { className: cn("flex flex-col gap-2", className), ...props });
+}

package/esm/src/react/components/chat/ui/code-block.d.ts

@@ -0,0 +1,89 @@
+import * as React from "../../../../../react/react.js";
+/** Light/dark, for switching the shiki + mermaid theme. */
+type CodeBlockMode = "light" | "dark";
+/** Props accepted by `<CodeBlock>`. */
+export interface CodeBlockProps {
+    /** The source code to render. */
+    code: string;
+    /** Language id for syntax highlighting (e.g. `tsx`, `json`, `mermaid`). */
+    language?: string;
+    /** Additional class names for the outer container. */
+    className?: string;
+    /** Render inside a collapsible shell (header stays, body toggles). */
+    collapsible?: boolean;
+    /** When `collapsible`, start collapsed. @default false */
+    defaultCollapsed?: boolean;
+    /**
+     * Force the highlight theme. Defaults to the `ColorModeProvider` when present,
+     * else `light` — so `CodeBlock` renders standalone (e.g. inside markdown)
+     * without requiring a provider.
+     */
+    mode?: CodeBlockMode;
+    /** Override the idle copy icon in the header copy button. */
+    copyIcon?: React.ReactNode;
+    /** Override the collapse chevron icon (only used when `collapsible`). */
+    collapseIcon?: React.ReactNode;
+    /**
+     * Intercept the built-in header copy. The caller runs first and must call
+     * `next()` to actually copy.
+     */
+    onCopy?: (e: React.MouseEvent, next: () => void) => void;
+    /**
+     * Replace the header row entirely. Receives the language label, a `copy`
+     * trigger, and (for the collapsible variant) the `collapsed` state + a
+     * `toggle`. When provided, the built-in header/trigger row is not rendered.
+     */
+    renderHeader?: (opts: {
+        language?: string;
+        copy: () => void;
+        collapsed: boolean;
+        toggle: () => void;
+    }) => React.ReactNode;
+}
+/** Result of {@link useClipboard}: the copied flag + a `copy` trigger. */
+export interface UseClipboardResult {
+    /** `true` for ~2s after a successful (or fallback) copy. */
+    copied: boolean;
+    /** Copy `text` to the clipboard (with a `execCommand` fallback). */
+    copy: () => void;
+}
+/** Clipboard copy hook: copies `text`, flips `copied` for ~2s. */
+export declare function useClipboard(text: string): UseClipboardResult;
+/** Props accepted by {@link CopyButton}. */
+export interface CopyButtonProps {
+    /** The text copied to the clipboard on click. */
+    code: string;
+    /**
+     * Override the idle copy icon (the copied/check state is unchanged). When
+     * omitted, the built-in {@link CopyIcon} is used.
+     */
+    copyIcon?: React.ReactNode;
+    /**
+     * Intercept the built-in copy. The caller runs first and must call `next()`
+     * to actually copy. When omitted, the copy happens directly.
+     */
+    onCopy?: (e: React.MouseEvent, next: () => void) => void;
+}
+export declare function CopyButton({ code, copyIcon, onCopy }: CopyButtonProps): React.ReactElement;
+/** Props accepted by {@link CodeSurface}. */
+export interface CodeSurfaceProps {
+    /** The source code to highlight. */
+    code: string;
+    /** Language id for syntax highlighting (defaults handled by the caller). */
+    language: string;
+    /** Resolved light/dark mode for the shiki theme. */
+    resolvedMode: CodeBlockMode;
+}
+/**
+ * The code surface. Plain highlighted code is ALWAYS visible immediately —
+ * shiki is progressive enhancement layered on top once it lazy-loads from
+ * esm.sh (so a stalled/blocked network never leaves an empty "no code block").
+ */
+export declare function CodeSurface({ code, language, resolvedMode, }: CodeSurfaceProps): React.ReactElement;
+/** Render a syntax-highlighted code block (or a mermaid diagram). */
+export declare function CodeBlock({ code, language, className, collapsible, defaultCollapsed, mode, copyIcon, collapseIcon, onCopy, renderHeader, }: CodeBlockProps): React.ReactElement;
+export declare namespace CodeBlock {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=code-block.d.ts.map

package/esm/src/react/components/chat/ui/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/code-block.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAOvD,2DAA2D;AAC3D,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAsMtC,uCAAuC;AACvC,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yEAAyE;IACzE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACzD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,MAAM,EAAE,MAAM,IAAI,CAAC;KACpB,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,0EAA0E;AAC1E,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,kEAAkE;AAClE,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,CAoB7D;AAED,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC9B,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1D;AAID,wBAAgB,UAAU,CACxB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,GAC1C,KAAK,CAAC,YAAY,CAqBpB;AAED,6CAA6C;AAC7C,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,QAAQ,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,YAAY,EAAE,aAAa,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,YAAY,GACb,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAyDvC;AAED,qEAAqE;AACrE,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAmB,EACnB,gBAAwB,EACxB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,YAAY,GACb,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CAqFrC;yBAhGe,SAAS"}

package/esm/src/react/components/chat/ui/code-block.js

@@ -0,0 +1,277 @@
+/**
+ * CodeBlock — the "ace" syntax-highlighted code primitive, forked
+ * dependency-light from Veryfront Studio's `ChatCodeBlock`. Structurally 1:1
+ * (shiki highlight + copy + language label + collapsible + mermaid), but:
+ *
+ * - **Themes:** shiki built-in `github-light` / `github-dark`, switched on our
+ *   `useColorMode` — NOT Studio's `veryfrontDarkTheme`.
+ * - **Dependency-light:** shiki and mermaid are lazy-loaded from esm.sh on first
+ *   render (same pattern as `markdown.tsx`), never bundled. A `Skeleton` shows
+ *   while the highlighter loads; a plain `<pre>` is the graceful fallback.
+ * - **Stripped (Studio-panel only):** `openTab`/`openPanel`/`openFilePath`/
+ *   `executeCommand`, file previews, the actions dropdown, radix
+ *   `useControllableState`, and `printReadiness`.
+ *
+ * Private to the chat module.
+ *
+ * @module react/components/chat/ui/code-block
+ */
+import * as dntShim from "../../../../../_dnt.shims.js";
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { isBrowserEnvironment } from "../../../../platform/compat/runtime.js";
+import { validateTrustedHtml } from "../../../../security/client/html-sanitizer.js";
+import { CheckIcon, ChevronDownIcon, CopyIcon } from "../icons/index.js";
+import { useColorModeOptional } from "../color-mode.js";
+import { Skeleton } from "./skeleton.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+import { IconButton } from "./icon-button.js";
+// ---------------------------------------------------------------------------
+// Lazy esm.sh loaders (dependency-light — mirrors markdown.tsx)
+// ---------------------------------------------------------------------------
+const ESM_SHIKI = "https://esm.sh/shiki@1.24.0?target=es2022&pin=v135";
+const ESM_MERMAID = "https://esm.sh/mermaid@11.4.1?pin=v135";
+async function importFromUrl(url) {
+    return await import(/* @vite-ignore */ url);
+}
+// The shiki highlighter is expensive to spin up and its grammars are loaded on
+// demand, so cache a single instance (and per-language load promises) module-wide.
+let shikiModule = null;
+let highlighterPromise = null;
+let highlighter = null;
+const loadedLangs = new Set(["text"]);
+const langLoadPromises = new Map();
+async function loadHighlighter() {
+    if (!isBrowserEnvironment())
+        return null;
+    if (highlighter)
+        return highlighter;
+    highlighterPromise ??= (async () => {
+        shikiModule ??= await importFromUrl(ESM_SHIKI);
+        return await shikiModule.createHighlighter({
+            themes: ["github-light", "github-dark"],
+            langs: ["text"],
+        });
+    })();
+    highlighter = await highlighterPromise;
+    return highlighter;
+}
+async function ensureLanguage(lang) {
+    if (!highlighter || loadedLangs.has(lang))
+        return;
+    const existing = langLoadPromises.get(lang);
+    if (existing) {
+        await existing;
+        return;
+    }
+    const load = highlighter
+        .loadLanguage(lang)
+        .then(() => {
+        loadedLangs.add(lang);
+    })
+        .catch(() => {
+        // Unknown/unsupported grammar — fall back to plain rendering.
+        loadedLangs.add(lang);
+    });
+    langLoadPromises.set(lang, load);
+    await load;
+}
+let mermaidPromise = null;
+let mermaidModule = null;
+let mermaidTheme = null;
+async function loadMermaid(theme) {
+    if (!isBrowserEnvironment())
+        return null;
+    mermaidPromise ??= importFromUrl(ESM_MERMAID);
+    mermaidModule = await mermaidPromise;
+    // Re-initialize when the theme flips so the SVG re-renders in the new palette.
+    if (mermaidTheme !== theme) {
+        mermaidModule.default.initialize({
+            startOnLoad: false,
+            theme,
+            securityLevel: "strict",
+            fontFamily: "inherit",
+        });
+        mermaidTheme = theme;
+    }
+    return mermaidModule;
+}
+// ---------------------------------------------------------------------------
+// MermaidDiagram — ported from Studio's MermaidDiagram, next-themes swapped for
+// useColorMode, Skeleton kept, printReadiness dropped.
+// ---------------------------------------------------------------------------
+function MermaidDiagram({ code, className, resolvedMode }) {
+    const [svg, setSvg] = React.useState("");
+    const [error, setError] = React.useState("");
+    React.useEffect(() => {
+        if (!isBrowserEnvironment() || !code.trim())
+            return;
+        let cancelled = false;
+        const theme = resolvedMode === "dark" ? "dark" : "default";
+        async function render() {
+            try {
+                const mermaid = await loadMermaid(theme);
+                if (!mermaid || cancelled)
+                    return;
+                const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
+                const { svg: rendered } = await mermaid.default.render(id, code.trim());
+                if (cancelled)
+                    return;
+                setSvg(validateTrustedHtml(rendered, { strict: true }));
+                setError("");
+            }
+            catch (err) {
+                if (cancelled)
+                    return;
+                setError(err instanceof Error ? err.message : "Failed to render diagram");
+                setSvg("");
+            }
+        }
+        render();
+        return () => {
+            cancelled = true;
+        };
+    }, [code, resolvedMode]);
+    if (error) {
+        return (React.createElement("div", { className: cn("rounded-[var(--radius-md)] border border-[var(--outline-border)] p-3 text-sm", className) },
+            React.createElement("p", { className: "font-medium" }, "Diagram error"),
+            React.createElement("pre", { className: "mt-1 whitespace-pre-wrap text-xs" }, error)));
+    }
+    if (!svg) {
+        return React.createElement(Skeleton, { className: cn("h-32 rounded-[var(--radius-md)]", className) });
+    }
+    return (React.createElement("div", { className: cn("overflow-x-auto rounded-[var(--radius-md)] border border-[var(--outline-border)] bg-[var(--secondary)] p-3 [&_svg]:max-w-full", className), dangerouslySetInnerHTML: { __html: svg } }));
+}
+/** Clipboard copy hook: copies `text`, flips `copied` for ~2s. */
+export function useClipboard(text) {
+    const [copied, setCopied] = React.useState(false);
+    const copy = React.useCallback(() => {
+        void (async () => {
+            try {
+                await navigator.clipboard.writeText(text);
+            }
+            catch (_) {
+                /* expected: clipboard API unavailable, using fallback */
+                const textarea = document.createElement("textarea");
+                textarea.value = text;
+                document.body.appendChild(textarea);
+                textarea.select();
+                document.execCommand("copy");
+                document.body.removeChild(textarea);
+            }
+            setCopied(true);
+            dntShim.setTimeout(() => setCopied(false), 2000);
+        })();
+    }, [text]);
+    return { copied, copy };
+}
+// Icon-only copy control (Studio's ChatCodeBlock copy = `icon-ghost`/`icon-sm`,
+// no "Copy" text). The label lives in the hover tooltip instead.
+export function CopyButton({ code, copyIcon, onCopy }) {
+    const { copied, copy } = useClipboard(code);
+    const handleClick = (e) => {
+        if (onCopy)
+            onCopy(e, copy);
+        else
+            copy();
+    };
+    return (React.createElement(IconButton, { variant: "icon-ghost", size: "icon-sm", onClick: handleClick, tooltip: copied ? "Copied" : "Copy code", "aria-label": "Copy code", className: "-mr-1 text-[var(--faint)] hover:text-[var(--foreground)]" }, copied
+        ? React.createElement(CheckIcon, { className: "size-3.5" })
+        : (copyIcon ?? React.createElement(CopyIcon, { className: "size-3.5" }))));
+}
+/**
+ * The code surface. Plain highlighted code is ALWAYS visible immediately —
+ * shiki is progressive enhancement layered on top once it lazy-loads from
+ * esm.sh (so a stalled/blocked network never leaves an empty "no code block").
+ */
+export function CodeSurface({ code, language, resolvedMode, }) {
+    const [html, setHtml] = React.useState("");
+    React.useEffect(() => {
+        if (!isBrowserEnvironment())
+            return;
+        let cancelled = false;
+        const theme = resolvedMode === "dark" ? "github-dark" : "github-light";
+        async function highlight() {
+            try {
+                const hl = await loadHighlighter();
+                if (!hl || cancelled)
+                    return;
+                await ensureLanguage(language);
+                if (cancelled)
+                    return;
+                const lang = loadedLangs.has(language) ? language : "text";
+                const rendered = hl.codeToHtml(code.trim(), { lang, theme });
+                if (cancelled)
+                    return;
+                setHtml(validateTrustedHtml(rendered, { strict: true }));
+            }
+            catch (_err) {
+                // Graceful fallback — the plain <pre> below stays.
+                if (!cancelled)
+                    setHtml("");
+            }
+        }
+        setHtml("");
+        highlight();
+        return () => {
+            cancelled = true;
+        };
+    }, [code, language, resolvedMode]);
+    // Highlighted surface, once shiki has produced HTML.
+    if (html && isBrowserEnvironment()) {
+        return (React.createElement("div", { className: cn("overflow-x-auto text-sm", 
+            // Strip shiki's own <pre> chrome so it inherits our container.
+            "[&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:!p-3 [&_.shiki]:!bg-transparent"), dangerouslySetInnerHTML: { __html: html } }));
+    }
+    // Always-visible base: plain code (SSR, pre-highlight, or fallback).
+    return (React.createElement("pre", { className: "overflow-x-auto p-3 text-sm text-[var(--foreground)]" },
+        React.createElement("code", { className: language ? `language-${language}` : undefined }, code.trim())));
+}
+/** Render a syntax-highlighted code block (or a mermaid diagram). */
+export function CodeBlock({ code, language, className, collapsible = false, defaultCollapsed = false, mode, copyIcon, collapseIcon, onCopy, renderHeader, }) {
+    const lang = language ?? "text";
+    // Hook called unconditionally; prop wins, else provider, else light. Never throws.
+    const contextMode = useColorModeOptional()?.resolvedMode;
+    const resolvedMode = mode ?? contextMode ?? "light";
+    // Control the collapsible open state locally so `renderHeader` can expose a
+    // working `collapsed`/`toggle` (DOM output is identical to the uncontrolled
+    // default). Hook is called unconditionally.
+    const [open, setOpen] = React.useState(!defaultCollapsed);
+    const toggle = React.useCallback(() => setOpen((v) => !v), []);
+    // A `copy` trigger for `renderHeader` that honours `onCopy`.
+    const clipboard = useClipboard(code);
+    const copy = React.useCallback(() => {
+        if (onCopy) {
+            onCopy({}, clipboard.copy);
+        }
+        else {
+            clipboard.copy();
+        }
+    }, [onCopy, clipboard]);
+    // Mermaid fences render as an SVG diagram, no chrome.
+    if (language === "mermaid" && code.trim()) {
+        return (React.createElement(MermaidDiagram, { code: code, className: className, resolvedMode: resolvedMode }));
+    }
+    const header = (React.createElement("div", { className: "flex items-center justify-between py-1.5 pl-3 pr-1.5 text-xs text-[var(--faint)]" },
+        React.createElement("span", { className: "font-mono font-medium" }, lang),
+        React.createElement(CopyButton, { code: code, copyIcon: copyIcon, onCopy: onCopy })));
+    const surface = React.createElement(CodeSurface, { code: code, language: lang, resolvedMode: resolvedMode });
+    if (collapsible) {
+        return (React.createElement(Collapsible, { open: open, onOpenChange: setOpen, className: cn("not-prose my-4 overflow-hidden rounded-[var(--radius-md)] border border-[var(--outline-border)] bg-[var(--secondary)]", className) },
+            renderHeader ? renderHeader({ language, copy, collapsed: !open, toggle }) : (
+            /* Trigger + copy are siblings (not nested — that would be a
+                button-in-button). The trigger is `flex-1`, so the whole row toggles
+                the body; the in-flow copy button keeps the header the same height as
+                the flat variant. */
+            React.createElement("div", { className: "flex items-center py-1.5 pl-3 pr-1.5 text-xs text-[var(--faint)]" },
+                React.createElement(CollapsibleTrigger, { className: "group flex flex-1 items-center gap-1.5 font-mono font-medium text-[var(--faint)] transition-colors hover:text-[var(--foreground)]" },
+                    collapseIcon ?? (React.createElement(ChevronDownIcon, { className: "size-3.5 shrink-0 transition-transform duration-100 group-data-[state=closed]:-rotate-90" })),
+                    React.createElement("span", null, lang)),
+                React.createElement(CopyButton, { code: code, copyIcon: copyIcon, onCopy: onCopy }))),
+            React.createElement(CollapsibleContent, { className: "border-t border-[var(--outline-border)]" }, surface)));
+    }
+    return (React.createElement("div", { className: cn("not-prose my-4 overflow-hidden rounded-[var(--radius-md)] border border-[var(--outline-border)] bg-[var(--secondary)]", className) },
+        renderHeader ? renderHeader({ language, copy, collapsed: !open, toggle }) : header,
+        React.createElement("div", { className: "border-t border-[var(--outline-border)]" }, surface)));
+}
+CodeBlock.displayName = "CodeBlock";

package/esm/src/react/components/chat/ui/collapsible.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Collapsible — BASIC fork of @radix-ui/react-collapsible with the same API
+ * (Collapsible / CollapsibleTrigger / CollapsibleContent). Controlled or
+ * uncontrolled open state; content unmounts when closed.
+ *
+ * TODO(a11y): id-wired `aria-controls`, height transition
+ * (`--radix-collapsible-content-height`), `hidden` instead of unmount for
+ * find-in-page. Private to the chat module.
+ *
+ * @module react/components/chat/ui/collapsible
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<Collapsible>`. */
+export interface CollapsibleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+}
+/** Collapsible root — owns open state. */
+export declare function Collapsible({ open, defaultOpen, onOpenChange, disabled, children, ...props }: CollapsibleProps): React.ReactElement;
+/** Props accepted by `<CollapsibleTrigger>`. */
+export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+/** Toggles the collapsible. `asChild` merges onto the child element. */
+export declare function CollapsibleTrigger({ asChild, onClick, children, ...props }: CollapsibleTriggerProps): React.ReactElement;
+/** Collapsible content — rendered only while open. */
+export declare function CollapsibleContent({ children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement | null;
+//# sourceMappingURL=collapsible.d.ts.map

package/esm/src/react/components/chat/ui/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/collapsible.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAOvD,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,0CAA0C;AAC1C,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAgBvC;AAED,gDAAgD;AAChD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wEAAwE;AACxE,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAkB9C;AAED,sDAAsD;AACtD,wBAAgB,kBAAkB,CAChC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC3D,KAAK,CAAC,YAAY,GAAG,IAAI,CAQ3B"}

package/esm/src/react/components/chat/ui/collapsible.js

@@ -0,0 +1,44 @@
+/**
+ * Collapsible — BASIC fork of @radix-ui/react-collapsible with the same API
+ * (Collapsible / CollapsibleTrigger / CollapsibleContent). Controlled or
+ * uncontrolled open state; content unmounts when closed.
+ *
+ * TODO(a11y): id-wired `aria-controls`, height transition
+ * (`--radix-collapsible-content-height`), `hidden` instead of unmount for
+ * find-in-page. Private to the chat module.
+ *
+ * @module react/components/chat/ui/collapsible
+ */
+import * as React from "../../../../../react/react.js";
+import { Slot } from "./slot.js";
+const CollapsibleContext = React.createContext(null);
+/** Collapsible root — owns open state. */
+export function Collapsible({ open, defaultOpen, onOpenChange, disabled, children, ...props }) {
+    const [internal, setInternal] = React.useState(defaultOpen ?? false);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internal;
+    const toggle = React.useCallback(() => {
+        const next = !isOpen;
+        if (!isControlled)
+            setInternal(next);
+        onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    return (React.createElement("div", { "data-state": isOpen ? "open" : "closed", ...props },
+        React.createElement(CollapsibleContext.Provider, { value: { open: isOpen, toggle, disabled } }, children)));
+}
+/** Toggles the collapsible. `asChild` merges onto the child element. */
+export function CollapsibleTrigger({ asChild, onClick, children, ...props }) {
+    const ctx = React.useContext(CollapsibleContext);
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), "aria-expanded": ctx?.open, "data-state": ctx?.open ? "open" : "closed", disabled: ctx?.disabled, onClick: (e) => {
+            onClick?.(e);
+            ctx?.toggle();
+        }, ...props }, children));
+}
+/** Collapsible content — rendered only while open. */
+export function CollapsibleContent({ children, ...props }) {
+    const ctx = React.useContext(CollapsibleContext);
+    if (!ctx?.open)
+        return null;
+    return (React.createElement("div", { "data-state": "open", ...props }, children));
+}

package/esm/src/react/components/chat/ui/command.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Command — BASIC self-contained fork of Studio's `Command` (which wraps `cmdk`).
+ * A searchable, filtered list: Input / List / Empty / Group / Item (+ Item
+ * Content/Title/Description, Shortcut, Separator). Classes ported 1:1 from
+ * Studio (tokens remapped, icons sized down a half-step). Used by the model
+ * picker (Popover + Command). No `cmdk` dependency.
+ *
+ * TODO(a11y): arrow-key navigation + `aria-activedescendant`, fuzzy ranking
+ * (this does case-insensitive substring matching), `CommandDialog`. Private to
+ * the chat module.
+ *
+ * @module react/components/chat/ui/command
+ */
+import * as React from "../../../../../react/react.js";
+/** Command root — owns the filter query and the item registry. */
+export declare function Command({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Props accepted by `<CommandDialog>`. */
+export interface CommandDialogProps {
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** A Command palette inside a modal Dialog overlay. */
+export declare function CommandDialog({ children, open, defaultOpen, onOpenChange, }: CommandDialogProps): React.ReactElement;
+/** Props accepted by `<CommandInput>`. */
+export interface CommandInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"> {
+    icon?: React.ReactNode;
+}
+/** Search input row — bound to the command's filter query. */
+export declare function CommandInput({ className, icon, placeholder, ...props }: CommandInputProps): React.ReactElement;
+/** Scrollable results list. */
+export declare function CommandList({ className, variant, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "default" | "flush";
+}): React.ReactElement;
+/** Shown when the query matches no items. */
+export declare function CommandEmpty({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement | null;
+/** A labelled group of items; auto-hides when all its items are filtered out. */
+export declare function CommandGroup({ className, heading, children, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    heading?: React.ReactNode;
+}): React.ReactElement;
+/** Divider between groups. */
+export declare function CommandSeparator({ className }: {
+    className?: string;
+}): React.ReactElement;
+/** Props accepted by `<CommandItem>`. */
+export interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Searchable text for filtering (falls back to nothing → always visible). */
+    value?: string;
+    /** Top-align the icon for two-line items. */
+    align?: "center" | "start";
+    disabled?: boolean;
+    onSelect?: (value?: string) => void;
+}
+/** A selectable, filterable result row. */
+export declare function CommandItem({ className, align, value, disabled, onSelect, children, ...props }: CommandItemProps): React.ReactElement;
+/** Flex column wrapper for an item's title + description. */
+export declare function CommandItemContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Item primary text. */
+export declare function CommandItemTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Item secondary text. */
+export declare function CommandItemDescription({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Trailing shortcut / metadata text. */
+export declare function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.ReactElement;
+//# sourceMappingURL=command.d.ts.map

package/esm/src/react/components/chat/ui/command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/command.tsx"],"names":[],"mappings":"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"}