veryfront 0.1.997 → 0.1.999

package/esm/src/react/components/chat/chat/components/inline-citation.js

@@ -1,7 +1,7 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
 /** Render inline citation. */
-export function InlineCitation({ index, source, className, onClick, }) {
+export function InlineCitation({ index, source, className, onClick, renderCard, cardClassName, }) {
     const [showCard, setShowCard] = React.useState(false);
     const timerRef = React.useRef(undefined);
     const buttonRef = React.useRef(null);
@@ -30,30 +30,29 @@ export function InlineCitation({ index, source, className, onClick, }) {
     React.useEffect(() => () => clearTimeout(timerRef.current), []);
     return (React.createElement(React.Fragment, null,
         React.createElement("span", { className: "relative inline-block" },
-            React.createElement("button", { ref: buttonRef, type: "button", onClick: () => onClick?.(index), onMouseEnter: show, onMouseLeave: hide, className: cn("inline-flex items-center justify-center", "size-4 rounded text-[10px] font-medium leading-none", "bg-[var(--border)] text-[var(--card-foreground)]", "hover:bg-[var(--accent)] transition-colors", "align-super -translate-y-0.5 mx-0.5", className) }, index + 1)),
-        showCard && source && (React.createElement("div", { style: cardStyle, className: "w-80 animate-in fade-in duration-150", onMouseEnter: show, onMouseLeave: hide },
-            React.createElement("div", { className: "bg-[var(--card)] border border-[var(--border)] rounded-xl shadow-xl p-3.5 text-left" },
-                React.createElement("div", { className: "flex items-start gap-2" },
-                    React.createElement("span", { className: "flex-shrink-0 flex items-center justify-center size-5 rounded bg-[var(--border)] text-[10px] font-bold text-[var(--card-foreground)] mt-0.5" }, index + 1),
-                    React.createElement("div", { className: "min-w-0 flex-1" },
-                        React.createElement("p", { className: "text-sm font-medium text-[var(--foreground)] line-clamp-2" }, source.title),
-                        source.url && (React.createElement("p", { className: "text-[10px] text-[var(--muted-foreground)] truncate mt-0.5 flex items-center gap-1" },
-                            React.createElement("svg", { className: "size-2.5 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" },
-                                React.createElement("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
-                                React.createElement("polyline", { points: "15 3 21 3 21 9" }),
-                                React.createElement("line", { x1: "10", y1: "14", x2: "21", y2: "3" })),
-                            source.url)))),
-                source.snippet && (React.createElement("div", { className: "mt-2.5 pl-3 border-l-2 border-[var(--border)]" },
-                    React.createElement("p", { className: "text-xs text-[var(--card-foreground)] line-clamp-4 leading-relaxed italic" }, source.snippet))),
+            React.createElement("button", { ref: buttonRef, type: "button", onClick: () => onClick?.(index), onMouseEnter: show, onMouseLeave: hide, className: cn("inline-flex items-center justify-center", "size-[15px] rounded-full border border-[var(--outline-border)] text-[10px] font-semibold leading-none tabular-nums", "bg-[var(--secondary)] text-[var(--soft)] shadow-sm", "hover:border-[var(--faint)] hover:text-[var(--foreground)] transition-colors", "cursor-pointer align-super -translate-y-px ml-0.5", className) }, index + 1)),
+        showCard && source && (React.createElement("div", { style: cardStyle, className: cn("w-80 animate-in fade-in duration-150", cardClassName), onMouseEnter: show, onMouseLeave: hide }, renderCard
+            ? renderCard(source, index)
+            : (React.createElement("div", { className: "rounded-lg bg-[var(--popover)] p-3.5 text-left shadow-sm" },
+                React.createElement("div", { className: "min-w-0" },
+                    React.createElement("p", { className: "text-sm font-medium text-[var(--foreground)] line-clamp-2" }, source.title),
+                    source.url && (React.createElement("p", { className: "text-[10px] text-[var(--faint)] truncate mt-1 flex items-center gap-1" },
+                        React.createElement("svg", { className: "size-2.5 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" },
+                            React.createElement("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                            React.createElement("polyline", { points: "15 3 21 3 21 9" }),
+                            React.createElement("line", { x1: "10", y1: "14", x2: "21", y2: "3" })),
+                        source.url))),
+                source.snippet && (React.createElement("div", { className: "mt-2.5 border-l-2 border-[var(--outline-border)] pl-3" },
+                    React.createElement("p", { className: "text-xs text-[var(--foreground)] line-clamp-4 leading-relaxed italic" }, source.snippet))),
                 source.score != null && (React.createElement("div", { className: "mt-2.5 flex items-center gap-2" },
-                    React.createElement("span", { className: "text-[10px] text-[var(--input-placeholder)] shrink-0" }, "Relevance"),
-                    React.createElement("div", { className: "flex-1 h-1 rounded-full bg-[var(--border)] overflow-hidden" },
+                    React.createElement("span", { className: "text-[10px] text-[var(--faint)] shrink-0" }, "Relevance"),
+                    React.createElement("div", { className: "flex-1 h-1 rounded-full bg-[var(--edge-medium)] overflow-hidden" },
                         React.createElement("div", { className: cn("h-full rounded-full transition-all", source.score >= 0.7
                                 ? "bg-emerald-500"
                                 : source.score >= 0.4
                                     ? "bg-amber-500"
                                     : "bg-neutral-400"), style: { width: `${Math.round(source.score * 100)}%` } })),
-                    React.createElement("span", { className: "text-[10px] tabular-nums text-[var(--input-placeholder)]" },
+                    React.createElement("span", { className: "text-[10px] tabular-nums text-[var(--faint)]" },
                         Math.round(source.score * 100),
-                        "%"))))))));
+                        "%")))))))));
 }

package/esm/src/react/components/chat/chat/components/message-actions.d.ts

@@ -1,11 +1,34 @@
 import * as React from "../../../../../../react/react.js";
-/** Props accepted by message actions. */
-export interface MessageActionsProps {
+/**
+ * Icon overrides for {@link MessageActionBar}. Each defaults to the built-in
+ * glyph; `copied` shows briefly after a successful copy.
+ */
+export interface MessageActionBarIcons {
+    copy?: React.ReactNode;
+    copied?: React.ReactNode;
+    edit?: React.ReactNode;
+    regenerate?: React.ReactNode;
+}
+/** Props accepted by the context-free message action bar. */
+export interface MessageActionBarProps {
     content: string;
     className?: string;
-    /** When provided, renders an edit button that calls this handler */
+    /** Override any of the action icons. */
+    icons?: MessageActionBarIcons;
+    /** Wrap the built-in copy; call `next()` to run it (or skip it). */
+    onCopy?: (event: React.MouseEvent<HTMLButtonElement>, next: () => void) => void;
+    /** When provided, renders an edit button that calls this handler. */
     onEdit?: (content: string) => void;
+    /** When provided, renders a regenerate button that calls this handler. */
+    onRegenerate?: () => void;
 }
-/** Render message actions. */
-export declare const MessageActions: React.ForwardRefExoticComponent<MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * MessageActionBar — the low-level, context-free hover action bar (copy / edit /
+ * regenerate). Used where there is no `Message.Root` context (e.g. the legacy
+ * message-list row). Inside a `Message`, prefer `Message.Actions` +
+ * `Message.CopyAction`/… which read from context.
+ *
+ * Renamed from `MessageActions` to end the collision with `Message.Actions`.
+ */
+export declare const MessageActionBar: React.ForwardRefExoticComponent<MessageActionBarProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=message-actions.d.ts.map

package/esm/src/react/components/chat/chat/components/message-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-actions.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/message-actions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAO1D,yCAAyC;AACzC,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,8BAA8B;AAC9B,eAAO,MAAM,cAAc,4FAuE1B,CAAC"}
+{"version":3,"file":"message-actions.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/message-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAQ1D;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,6DAA6D;AAC7D,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAChF,qEAAqE;IACrE,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,8FAyD5B,CAAC"}

package/esm/src/react/components/chat/chat/components/message-actions.js

@@ -1,39 +1,27 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
-import { CheckIcon, CopyIcon } from "../../icons/index.js";
-const ACTION_BUTTON = "inline-flex items-center justify-center size-7 text-[var(--input-placeholder)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2";
-/** Render message actions. */
-export const MessageActions = React.forwardRef(function MessageActions({ content, className, onEdit }, ref) {
-    const [copied, setCopied] = React.useState(false);
-    const setCopiedWithTimeout = React.useCallback(() => {
-        setCopied(true);
-        globalThis.setTimeout(() => setCopied(false), 2000);
-    }, []);
-    const fallbackCopy = React.useCallback(() => {
-        const textarea = document.createElement("textarea");
-        textarea.value = content;
-        document.body.appendChild(textarea);
-        textarea.select();
-        document.execCommand("copy");
-        document.body.removeChild(textarea);
-    }, [content]);
-    const handleCopy = React.useCallback(async () => {
-        try {
-            await navigator.clipboard.writeText(content);
-        }
-        catch (_) {
-            /* expected: clipboard API unavailable in older browsers */
-            fallbackCopy();
-        }
-        finally {
-            setCopiedWithTimeout();
-        }
-    }, [content, fallbackCopy, setCopiedWithTimeout]);
-    return (React.createElement("div", { ref: ref, className: cn("flex items-center gap-0.5 mt-1.5 opacity-0 group-hover/msg:opacity-100 transition-all duration-200", className) },
-        React.createElement("button", { type: "button", onClick: handleCopy, className: ACTION_BUTTON, title: copied ? "Copied!" : "Copy to clipboard", "aria-label": copied ? "Copied!" : "Copy to clipboard" }, copied ? React.createElement(CheckIcon, { className: "size-3.5" }) : React.createElement(CopyIcon, { className: "size-3.5" })),
-        onEdit && (React.createElement("button", { type: "button", onClick: () => onEdit(content), className: ACTION_BUTTON, title: "Edit message", "aria-label": "Edit message" },
-            React.createElement("svg", { className: "size-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
-                React.createElement("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
-                React.createElement("path", { d: "m15 5 4 4" }))))));
+import { CheckIcon, CopyIcon, PencilIcon, RefreshCwIcon } from "../../icons/index.js";
+import { useClipboard } from "../hooks/use-clipboard.js";
+const ACTION_BUTTON = "inline-flex items-center justify-center size-7 rounded-full text-[var(--faint)] transition-colors hover:bg-[var(--tertiary)] hover:text-[var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]";
+/**
+ * MessageActionBar — the low-level, context-free hover action bar (copy / edit /
+ * regenerate). Used where there is no `Message.Root` context (e.g. the legacy
+ * message-list row). Inside a `Message`, prefer `Message.Actions` +
+ * `Message.CopyAction`/… which read from context.
+ *
+ * Renamed from `MessageActions` to end the collision with `Message.Actions`.
+ */
+export const MessageActionBar = React.forwardRef(function MessageActionBar({ content, className, icons, onCopy, onEdit, onRegenerate }, ref) {
+    const { copied, copy } = useClipboard();
+    const doCopy = React.useCallback(() => void copy(content), [copy, content]);
+    return (React.createElement("div", { ref: ref, className: cn(
+        // No vertical margin here — the footer row owns spacing/alignment so
+        // the buttons stay centered with the token count beside them.
+        "flex items-center gap-0.5 opacity-0 group-hover/msg:opacity-100 transition-all duration-200", className) },
+        React.createElement("button", { type: "button", onClick: (e) => (onCopy ? onCopy(e, doCopy) : doCopy()), className: ACTION_BUTTON, title: copied ? "Copied!" : "Copy to clipboard", "aria-label": copied ? "Copied!" : "Copy to clipboard" }, copied
+            ? (icons?.copied ?? React.createElement(CheckIcon, { className: "size-3.5" }))
+            : (icons?.copy ?? React.createElement(CopyIcon, { className: "size-3.5" }))),
+        onRegenerate && (React.createElement("button", { type: "button", onClick: onRegenerate, className: ACTION_BUTTON, title: "Regenerate response", "aria-label": "Regenerate response" }, icons?.regenerate ?? React.createElement(RefreshCwIcon, { className: "size-3.5" }))),
+        onEdit && (React.createElement("button", { type: "button", onClick: () => onEdit(content), className: ACTION_BUTTON, title: "Edit message", "aria-label": "Edit message" }, icons?.edit ?? React.createElement(PencilIcon, { className: "size-3.5" })))));
 });
-MessageActions.displayName = "MessageActions";
+MessageActionBar.displayName = "MessageActionBar";

package/esm/src/react/components/chat/chat/components/message-edit-form.d.ts

@@ -1,10 +1,15 @@
 import * as React from "../../../../../../react/react.js";
 /** Props accepted by message edit form. */
-export interface MessageEditFormProps {
+export interface MessageEditFormProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     initialContent: string;
     onSave: (content: string) => void;
     onCancel: () => void;
+    className?: string;
+    /** Label for the save/submit button. Defaults to "Save & Submit". */
+    saveLabel?: string;
+    /** Label for the cancel button. Defaults to "Cancel". */
+    cancelLabel?: string;
 }
 /** Render message edit form. */
-export declare function MessageEditForm({ initialContent, onSave, onCancel, }: MessageEditFormProps): React.ReactElement;
+export declare function MessageEditForm({ initialContent, onSave, onCancel, className, saveLabel, cancelLabel, ...props }: MessageEditFormProps): React.ReactElement;
 //# sourceMappingURL=message-edit-form.d.ts.map

package/esm/src/react/components/chat/chat/components/message-edit-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-edit-form.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/message-edit-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,2CAA2C;AAC3C,MAAM,WAAW,oBAAoB;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gCAAgC;AAChC,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,MAAM,EACN,QAAQ,GACT,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAiF3C"}
+{"version":3,"file":"message-edit-form.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/message-edit-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,2CAA2C;AAC3C,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC/D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,gCAAgC;AAChC,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAA2B,EAC3B,WAAsB,EACtB,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAgF3C"}

package/esm/src/react/components/chat/chat/components/message-edit-form.js

@@ -1,7 +1,7 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
 /** Render message edit form. */
-export function MessageEditForm({ initialContent, onSave, onCancel, }) {
+export function MessageEditForm({ initialContent, onSave, onCancel, className, saveLabel = "Save & Submit", cancelLabel = "Cancel", ...props }) {
     const [content, setContent] = React.useState(initialContent);
     const textareaRef = React.useRef(null);
     React.useEffect(() => {
@@ -32,16 +32,16 @@ export function MessageEditForm({ initialContent, onSave, onCancel, }) {
                 onSave(trimmed);
         }
     }, [content, onSave, onCancel]);
-    return (React.createElement("div", { className: "w-full" },
+    return (React.createElement("div", { ...props, className: cn("w-full", className) },
         React.createElement("textarea", { ref: textareaRef, value: content, onChange: (e) => {
                 setContent(e.target.value);
                 resize();
-            }, onKeyDown: handleKeyDown, rows: 1, className: cn("w-full resize-none rounded-xl px-4 py-3 text-[15px] leading-relaxed", "bg-[var(--accent)]", "border border-[var(--border)]", "focus:outline-none focus-visible:border-[var(--ring)]", "text-[var(--foreground)]") }),
+            }, onKeyDown: handleKeyDown, rows: 1, className: cn("w-full resize-none rounded-[var(--radius-lg)] px-4 py-3 text-[15px] leading-relaxed", "border border-[var(--outline-border)] bg-[var(--secondary)]", "focus:outline-none focus-visible:border-[var(--edge-medium)]", "text-[var(--foreground)]") }),
         React.createElement("div", { className: "flex items-center gap-2 mt-2" },
             React.createElement("button", { type: "button", onClick: () => {
                     const trimmed = content.trim();
                     if (trimmed)
                         onSave(trimmed);
-                }, disabled: !content.trim(), className: cn("px-3 py-1.5 text-xs font-medium rounded-full transition-all", "bg-[var(--primary)] text-[var(--primary-foreground)]", "hover:opacity-90", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2", "disabled:opacity-50 disabled:pointer-events-none") }, "Save & Submit"),
-            React.createElement("button", { type: "button", onClick: onCancel, className: "px-3 py-1.5 text-xs font-medium rounded-full text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2" }, "Cancel"))));
+                }, disabled: !content.trim(), className: cn("px-3 py-1.5 text-xs font-medium rounded-full transition-all", "bg-[var(--primary)] text-[var(--secondary)]", "hover:bg-[var(--secondary)] hover:text-[var(--foreground)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]", "disabled:opacity-50 disabled:pointer-events-none") }, saveLabel),
+            React.createElement("button", { type: "button", onClick: onCancel, className: "px-3 py-1.5 text-xs font-medium rounded-full text-[var(--faint)] hover:bg-[var(--tertiary)] hover:text-[var(--foreground)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]" }, cancelLabel))));
 }

package/esm/src/react/components/chat/chat/components/message-feedback.d.ts

@@ -1,12 +1,22 @@
 import * as React from "../../../../../../react/react.js";
 /** Public API contract for feedback value. */
 export type FeedbackValue = "positive" | "negative";
+/**
+ * Icon overrides for {@link MessageFeedback}. Each defaults to the built-in
+ * thumbs glyph.
+ */
+export interface MessageFeedbackIcons {
+    positive?: React.ReactNode;
+    negative?: React.ReactNode;
+}
 /** Props accepted by message feedback. */
-export interface MessageFeedbackProps {
+export interface MessageFeedbackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "className"> {
     messageId: string;
     feedback?: FeedbackValue | null;
     onFeedback: (messageId: string, feedback: FeedbackValue) => void;
     className?: string;
+    /** Override either of the thumbs icons. */
+    icons?: MessageFeedbackIcons;
 }
 /** Render message feedback. */
 export declare const MessageFeedback: React.ForwardRefExoticComponent<MessageFeedbackProps & React.RefAttributes<HTMLDivElement>>;

package/esm/src/react/components/chat/chat/components/message-feedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-feedback.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/message-feedback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,8CAA8C;AAC9C,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,UAAU,CAAC;AAEpD,0CAA0C;AAC1C,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,+BAA+B;AAC/B,eAAO,MAAM,eAAe,6FAuD3B,CAAC"}
+{"version":3,"file":"message-feedback.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/message-feedback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,8CAA8C;AAC9C,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,UAAU,CAAC;AAEpD;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,0CAA0C;AAC1C,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC3E,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,oBAAoB,CAAC;CAC9B;AAKD,+BAA+B;AAC/B,eAAO,MAAM,eAAe,6FAkE3B,CAAC"}

package/esm/src/react/components/chat/chat/components/message-feedback.js

@@ -1,20 +1,18 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
-const BUTTON_BASE = "inline-flex items-center justify-center size-7 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2";
+const BUTTON_BASE = "inline-flex items-center justify-center size-7 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]";
 /** Render message feedback. */
-export const MessageFeedback = React.forwardRef(function MessageFeedback({ messageId, feedback, onFeedback, className }, ref) {
-    return (React.createElement("div", { ref: ref, className: cn("flex items-center gap-1", className) },
+export const MessageFeedback = React.forwardRef(function MessageFeedback({ messageId, feedback, onFeedback, className, icons, ...props }, ref) {
+    return (React.createElement("div", { ref: ref, ...props, className: cn("flex items-center gap-1", className) },
         React.createElement("button", { type: "button", onClick: () => onFeedback(messageId, "positive"), className: cn(BUTTON_BASE, feedback === "positive"
                 ? "text-emerald-500 bg-emerald-500/10"
-                : "text-[var(--input-placeholder)] hover:text-emerald-500 hover:bg-[var(--accent)]"), title: "Helpful" },
-            React.createElement("svg", { className: "size-3.5", viewBox: "0 0 24 24", fill: feedback === "positive" ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
-                React.createElement("path", { d: "M7 10v12" }),
-                React.createElement("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" }))),
+                : "text-[var(--faint)] hover:bg-[var(--tertiary)] hover:text-emerald-500"), title: "Helpful" }, icons?.positive ?? (React.createElement("svg", { className: "size-3.5", viewBox: "0 0 24 24", fill: feedback === "positive" ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+            React.createElement("path", { d: "M7 10v12" }),
+            React.createElement("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })))),
         React.createElement("button", { type: "button", onClick: () => onFeedback(messageId, "negative"), className: cn(BUTTON_BASE, feedback === "negative"
                 ? "text-red-500 bg-red-500/10"
-                : "text-[var(--input-placeholder)] hover:text-[var(--destructive)] hover:bg-[var(--accent)]"), title: "Not helpful" },
-            React.createElement("svg", { className: "size-3.5", viewBox: "0 0 24 24", fill: feedback === "negative" ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
-                React.createElement("path", { d: "M17 14V2" }),
-                React.createElement("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" })))));
+                : "text-[var(--faint)] hover:bg-[var(--tertiary)] hover:text-[var(--destructive)]"), title: "Not helpful" }, icons?.negative ?? (React.createElement("svg", { className: "size-3.5", viewBox: "0 0 24 24", fill: feedback === "negative" ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+            React.createElement("path", { d: "M17 14V2" }),
+            React.createElement("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" }))))));
 });
 MessageFeedback.displayName = "MessageFeedback";

package/esm/src/react/components/chat/chat/components/quick-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quick-actions.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/quick-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,4CAA4C;AAC5C,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,uCAAuC;AACvC,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,4BAA4B;AAC5B,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAiB/C"}
+{"version":3,"file":"quick-actions.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/quick-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,4CAA4C;AAC5C,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,uCAAuC;AACvC,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,4BAA4B;AAC5B,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAkB/C"}

package/esm/src/react/components/chat/chat/components/quick-actions.js

@@ -4,5 +4,7 @@ import { cn } from "../../theme.js";
 export function QuickActions({ actions, onActionClick, className, }) {
     if (!actions || actions.length === 0)
         return null;
-    return (React.createElement("div", { className: cn("flex flex-wrap gap-2", className) }, actions.map((action) => (React.createElement("button", { key: action.id, type: "button", onClick: () => onActionClick?.(action), className: "rounded-full border border-[var(--border)] px-4 py-2 text-sm text-[var(--muted-foreground)] transition-colors hover:bg-[var(--foreground)]/[0.03] hover:text-[var(--foreground)] hover:border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]" }, action.label)))));
+    return (React.createElement("div", { className: cn("flex flex-wrap gap-2", className) }, actions.map((action) => (React.createElement("button", { key: action.id, type: "button", onClick: () => onActionClick?.(action), className: "rounded-full border border-[var(--outline-border)] px-4 py-2 text-sm text-[var(--faint)] transition-colors hover:border-[var(--edge-medium)] hover:bg-[var(--tertiary)] hover:text-[var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]" },
+        action.icon,
+        action.label)))));
 }

package/esm/src/react/components/chat/chat/components/reasoning.d.ts

@@ -1,10 +1,73 @@
 import * as React from "../../../../../../react/react.js";
-type ReasoningCardProps = {
+/** Per-card state shared with `Reasoning.*` sub-parts. */
+export interface ReasoningContextValue {
+    text: string;
+    isStreaming: boolean;
+    isOpen: boolean;
+    toggle: () => void;
+}
+/** Read the enclosing `Reasoning` state. Throws when used outside a `Reasoning`. */
+export declare function useReasoning(): ReasoningContextValue;
+/** Props accepted by `Reasoning` / `Reasoning.Root` (aka `ReasoningCard`). */
+export interface ReasoningProps {
     text: string;
     isStreaming?: boolean;
     className?: string;
+    /** Overrides the chevron glyph. Rotation-on-open styling is applied to the
+     *  wrapper, so a custom icon does not need to know about open state. */
+    icon?: React.ReactNode;
+    /** Override the two labels; each defaults to the current string. */
+    labels?: {
+        thinking?: string;
+        thought?: string;
+    };
+    /** Controlled open state. When provided, the component is controlled and the
+     *  auto open/collapse behaviour is disabled (the parent owns the state). */
+    open?: boolean;
+    /** Initial open value when uncontrolled. Defaults to whether the card is
+     *  streaming at mount — so a completed / reloaded reasoning starts collapsed
+     *  and never animates, while a live one opens as tokens arrive. */
+    defaultOpen?: boolean;
+    /** Called whenever the open state should change (both controlled and not). */
+    onOpenChange?: (open: boolean) => void;
+    /** Compose your own disclosure; when omitted, the default anatomy renders. */
+    children?: React.ReactNode;
+}
+/** Props for `Reasoning.Trigger` — the disclosure button. */
+export interface ReasoningTriggerProps {
+    /** Overrides the chevron glyph. */
+    icon?: React.ReactNode;
+    /** Override the two labels; each defaults to the current string. */
+    labels?: {
+        thinking?: string;
+        thought?: string;
+    };
+    className?: string;
+}
+/** The header row: a "Thinking…" / "Thought process" label + expand chevron. */
+declare function ReasoningTrigger({ icon, labels, className }: ReasoningTriggerProps): React.JSX.Element;
+declare namespace ReasoningTrigger {
+    var displayName: string;
+}
+/** The reasoning body. Renders when open; pass children to replace the markdown. */
+declare function ReasoningContent({ className, children }: {
+    className?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element | null;
+declare namespace ReasoningContent {
+    var displayName: string;
+}
+/**
+ * Reasoning — render `<Reasoning text={…} />` for the default disclosure, or
+ * compose `Reasoning.Trigger` + `Reasoning.Content` for a custom layout.
+ * Mirrors the `Message` / `ToolCall` compounds: render it, or compose it.
+ */
+export declare const Reasoning: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: typeof ReasoningTrigger;
+    Content: typeof ReasoningContent;
 };
-/** Render reasoning card. */
-export declare const ReasoningCard: React.ForwardRefExoticComponent<ReasoningCardProps & React.RefAttributes<HTMLDivElement>>;
+/** Back-compat alias — `message.tsx` and `agent-card.tsx` import `ReasoningCard`. */
+export declare const ReasoningCard: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=reasoning.d.ts.map

package/esm/src/react/components/chat/chat/components/reasoning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reasoning.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/reasoning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAM1D,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,aAAa,2FAyCzB,CAAC"}
+{"version":3,"file":"reasoning.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/reasoning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAgB1D,0DAA0D;AAC1D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAID,oFAAoF;AACpF,wBAAgB,YAAY,IAAI,qBAAqB,CAQpD;AAED,8EAA8E;AAC9E,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;4EACwE;IACxE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oEAAoE;IACpE,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD;gFAC4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;uEAEmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAqFD,6DAA6D;AAC7D,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oEAAoE;IACpE,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,gFAAgF;AAChF,iBAAS,gBAAgB,CACvB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,qBAAqB,GACjD,KAAK,CAAC,GAAG,CAAC,OAAO,CA0BnB;kBA5BQ,gBAAgB;;;AA+BzB,oFAAoF;AACpF,iBAAS,gBAAgB,CACvB,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAC1E,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAY1B;kBAdQ,gBAAgB;;;AAiBzB;;;;GAIG;AACH,eAAO,MAAM,SAAS;;;;CAIpB,CAAC;AAEH,qFAAqF;AACrF,eAAO,MAAM,aAAa,uFAAgB,CAAC"}

package/esm/src/react/components/chat/chat/components/reasoning.js

@@ -1,30 +1,104 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
 import { Markdown } from "../../markdown.js";
-import { BrainIcon, ChevronDownIcon } from "../../icons/index.js";
+import { ChevronDownIcon } from "../../icons/index.js";
+import { COMPONENT_ERROR } from "../../../../../errors/error-registry.js";
 import { Shimmer } from "./animations.js";
-/** Render reasoning card. */
-export const ReasoningCard = React.forwardRef(function ReasoningCard({ text, isStreaming = false, className }, ref) {
-    const [isOpen, setIsOpen] = React.useState(true);
+const ReasoningContext = React.createContext(null);
+/** Read the enclosing `Reasoning` state. Throws when used outside a `Reasoning`. */
+export function useReasoning() {
+    const ctx = React.useContext(ReasoningContext);
+    if (!ctx) {
+        throw COMPONENT_ERROR.create({
+            detail: "useReasoning must be used within a Reasoning",
+        });
+    }
+    return ctx;
+}
+/**
+ * `Reasoning.Root` — context provider + wrapper. No children renders the
+ * default anatomy (`Trigger` + `Content`); pass children to recompose.
+ */
+const ReasoningRoot = React.forwardRef(function Reasoning({ text, isStreaming = false, className, icon, labels, open, defaultOpen, onOpenChange, children, }, ref) {
+    const isControlled = open !== undefined;
+    // Uncontrolled default: open only if we mount mid-stream. A completed /
+    // reloaded card (isStreaming === false) starts collapsed, so it never
+    // plays the open-then-collapse animation.
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? isStreaming);
+    const isOpen = isControlled ? open : uncontrolledOpen;
     const userToggledRef = React.useRef(false);
+    // Tracks whether this card has ever streamed during its lifetime. We only
+    // auto-collapse once streaming actually ends — a card that was never
+    // streaming (history reload) has nothing to animate away from.
+    const hasStreamedRef = React.useRef(isStreaming);
     React.useEffect(() => {
-        if (isStreaming || !isOpen || userToggledRef.current)
+        // Parent owns state when controlled, and a manual toggle opts out of the
+        // stream-driven open/collapse entirely.
+        if (isControlled || userToggledRef.current)
             return;
-        const timer = globalThis.setTimeout(() => setIsOpen(false), 1000);
+        if (isStreaming) {
+            hasStreamedRef.current = true;
+            if (!isOpen) {
+                setUncontrolledOpen(true);
+                onOpenChange?.(true);
+            }
+            return;
+        }
+        // Streaming just finished in this session — collapse after a beat. If we
+        // never streamed (reloaded chat), leave the card exactly as it mounted.
+        if (!hasStreamedRef.current || !isOpen)
+            return;
+        const timer = globalThis.setTimeout(() => {
+            setUncontrolledOpen(false);
+            onOpenChange?.(false);
+        }, 1000);
         return () => clearTimeout(timer);
-    }, [isStreaming, isOpen]);
-    const label = isStreaming ? React.createElement(Shimmer, null, "Thinking...") : React.createElement("span", null, "Thought process");
-    return (React.createElement("div", { ref: ref, className: cn("not-prose mb-4", className) },
-        React.createElement("button", { type: "button", onClick: () => {
-                userToggledRef.current = true;
-                setIsOpen((open) => !open);
-            }, className: "flex w-full items-center gap-2 text-[var(--input-placeholder)] text-sm transition-colors hover:text-[var(--foreground)]" },
-            React.createElement(BrainIcon, { className: "size-4" }),
-            label,
-            React.createElement(ChevronDownIcon, { className: cn("size-4 transition-transform", isOpen && "rotate-180") })),
-        isOpen
-            ? (React.createElement("div", { className: "mt-4 text-sm text-[var(--muted-foreground)] border-l-2 border-[var(--border)] pl-4 ml-2" },
-                React.createElement(Markdown, { className: "text-sm" }, text)))
-            : null));
+    }, [isControlled, isStreaming, isOpen, onOpenChange]);
+    const toggle = React.useCallback(() => {
+        userToggledRef.current = true;
+        const next = !isOpen;
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [isControlled, isOpen, onOpenChange]);
+    const context = { text, isStreaming, isOpen, toggle };
+    return (React.createElement(ReasoningContext.Provider, { value: context },
+        React.createElement("div", { ref: ref, className: cn("not-prose mb-3", className) }, children ?? (React.createElement(React.Fragment, null,
+            React.createElement(ReasoningTrigger, { icon: icon, labels: labels }),
+            React.createElement(ReasoningContent, null))))));
+});
+ReasoningRoot.displayName = "Reasoning.Root";
+/** The header row: a "Thinking…" / "Thought process" label + expand chevron. */
+function ReasoningTrigger({ icon, labels, className }) {
+    const { isStreaming, isOpen, toggle } = useReasoning();
+    const thinkingLabel = labels?.thinking ?? "Thinking...";
+    const thoughtLabel = labels?.thought ?? "Thought process";
+    const label = isStreaming ? React.createElement(Shimmer, null, thinkingLabel) : React.createElement("span", null, thoughtLabel);
+    return (React.createElement("button", { type: "button", onClick: toggle, className: cn("flex w-full items-center gap-2 rounded-sm text-sm text-[var(--foreground)] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)] focus-visible:ring-offset-0", className) },
+        label,
+        React.createElement("span", { className: cn("flex size-3.5 shrink-0 items-center justify-center transition-transform duration-200", !isOpen && "-rotate-90") }, icon ?? React.createElement(ChevronDownIcon, { className: "size-3.5 shrink-0" }))));
+}
+ReasoningTrigger.displayName = "Reasoning.Trigger";
+/** The reasoning body. Renders when open; pass children to replace the markdown. */
+function ReasoningContent({ className, children }) {
+    const { text, isOpen } = useReasoning();
+    if (!isOpen)
+        return null;
+    return (React.createElement("div", { className: cn("mt-2 text-sm text-[var(--foreground)]", className) }, children ?? (
+    // `text-sm!` overrides Markdown's base `text-base` (cn does not tw-merge)
+    // so reasoning renders at 14px like Studio's compact variant.
+    React.createElement(Markdown, { className: "mb-0 space-y-2.5 text-sm!" }, text))));
+}
+ReasoningContent.displayName = "Reasoning.Content";
+/**
+ * Reasoning — render `<Reasoning text={…} />` for the default disclosure, or
+ * compose `Reasoning.Trigger` + `Reasoning.Content` for a custom layout.
+ * Mirrors the `Message` / `ToolCall` compounds: render it, or compose it.
+ */
+export const Reasoning = Object.assign(ReasoningRoot, {
+    Root: ReasoningRoot,
+    Trigger: ReasoningTrigger,
+    Content: ReasoningContent,
 });
-ReasoningCard.displayName = "ReasoningCard";
+/** Back-compat alias — `message.tsx` and `agent-card.tsx` import `ReasoningCard`. */
+export const ReasoningCard = ReasoningRoot;