@candor-ui/react 1.5.0 → 1.7.0

package/dist/blocks/degraded-panel.d.ts

@@ -13,13 +13,13 @@ declare function DegradedPanel({ reason, missing, onRetry, retrying, variant, cl
     /** What went wrong, in a sentence. */
     reason: React.ReactNode;
     /** What the person won't see because of it. */
-    missing?: React.ReactNode;
+    missing?: React.ReactNode | undefined;
     /** Shows a Try again button that calls this. */
-    onRetry?: () => void;
+    onRetry?: (() => void) | undefined;
     /** Shows the retry as in progress. */
-    retrying?: boolean;
+    retrying?: boolean | undefined;
     /** A boxed panel, or one line inside other content. */
-    variant?: "block" | "inline";
-    className?: string;
+    variant?: "block" | "inline" | undefined;
+    className?: string | undefined;
 }): import("react").JSX.Element;
 export { DegradedPanel };

package/dist/blocks/locale.d.ts

@@ -27,19 +27,19 @@ export type TextDirection = "ltr" | "rtl";
 export declare function directionOf(locale: string | undefined): TextDirection;
 declare function LocaleProvider({ locale, dir, timeZone, strings, children, }: {
     /** A BCP 47 tag such as "en-GB", "fr" or "ar-EG", for dates, numbers and plural forms. Left out, the browser's own is used once the page has hydrated. */
-    locale?: string;
+    locale?: string | undefined;
     /** Text direction. Left out, it follows the locale: "rtl" for Arabic, Hebrew, Persian, Urdu and the like. Set `dir` on `<html>` too, so the page's own layout flips with Candor's. */
-    dir?: TextDirection;
+    dir?: TextDirection | undefined;
     /** An IANA time zone such as "Europe/Paris". With `locale`, server and browser format dates the same way, so absolute times render on the server too. */
-    timeZone?: string;
+    timeZone?: string | undefined;
     /** Overrides by component name, e.g. `{ thread: { jumpToLatest: "…" } }`; any left out stay English. Nested providers merge. */
-    strings?: StringOverrides;
+    strings?: StringOverrides | undefined;
     children: React.ReactNode;
 }): React.JSX.Element;
 /** The locale, time zone and text direction in effect. */
 declare function useLocale(): {
-    locale?: string;
-    timeZone?: string;
+    locale?: string | undefined;
+    timeZone?: string | undefined;
     dir: TextDirection;
 };
 /**

package/dist/blocks/locked.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 type Lockable = React.ReactElement<{
-    "aria-disabled"?: boolean | "true" | "false";
-    "aria-describedby"?: string;
-    onClick?: React.MouseEventHandler;
-    onKeyDown?: React.KeyboardEventHandler;
-    "data-locked"?: string;
+    "aria-disabled"?: boolean | "true" | "false" | undefined;
+    "aria-describedby"?: string | undefined;
+    onClick?: React.MouseEventHandler | undefined;
+    onKeyDown?: React.KeyboardEventHandler | undefined;
+    "data-locked"?: string | undefined;
 }>;
 /**
  * The honest-state rule: a control that cannot be used says why.
@@ -17,10 +17,10 @@ type Lockable = React.ReactElement<{
  */
 declare function Locked({ reason, inline, children, className, }: {
     /** Why the control can't be used. Without one, the control renders as normal. */
-    reason?: string | null;
+    reason?: string | null | undefined;
     /** Print the reason under the control instead of in a tooltip. */
-    inline?: boolean;
+    inline?: boolean | undefined;
     children: Lockable;
-    className?: string;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { Locked };

package/dist/blocks/relative-time.d.ts

@@ -9,9 +9,9 @@ export declare const relativeTimeStrings: {
  * spaces: "5 minutes".
  */
 export declare function formatRelative(date: Date, now?: Date, { locale, justNow, bare }?: {
-    locale?: string;
-    justNow?: string;
-    bare?: boolean;
+    locale?: string | undefined;
+    justNow?: string | undefined;
+    bare?: boolean | undefined;
 }): string;
 /** The current time in milliseconds, updated every 30 seconds; null while rendering on the server. */
 export declare function useNow(): number | null;
@@ -23,9 +23,9 @@ declare function RelativeTime({ date, bare, format, className, }: {
     /** When it happened. Shown as "5 minutes ago", with the exact time on hover. */
     date: Date | string;
     /** Drop "ago" and "in", for tight spaces: "5 minutes". */
-    bare?: boolean;
+    bare?: boolean | undefined;
     /** "relative" (the default), or an absolute "date", "datetime" or "time" in the locale. */
-    format?: "relative" | DateStyle;
-    className?: string;
+    format?: "relative" | DateStyle | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { RelativeTime };

package/dist/blocks/status-dot.d.ts

@@ -8,9 +8,9 @@ declare function StatusDot({ status, showLabel, label, className, }: {
     /** Which status to show; running and waiting pulse. */
     status: RunStatus;
     /** Print the status name next to the dot. */
-    showLabel?: boolean;
+    showLabel?: boolean | undefined;
     /** Words to use instead of the status name. */
-    label?: string;
-    className?: string;
+    label?: string | undefined;
+    className?: string | undefined;
 }): import("react").JSX.Element;
 export { StatusDot };

package/dist/blocks/step-list.d.ts

@@ -4,8 +4,8 @@ export type Step = {
     id: string;
     title: React.ReactNode;
     status: RunStatus;
-    detail?: React.ReactNode;
-    meta?: React.ReactNode;
+    detail?: React.ReactNode | undefined;
+    meta?: React.ReactNode | undefined;
 };
 declare function StepMark({ status, }: {
     /** The step's status, which picks its mark. */
@@ -18,6 +18,6 @@ declare function StepMark({ status, }: {
 declare function StepList({ steps, className, }: {
     /** The steps in order, each with a status, and optional detail and meta. */
     steps: Step[];
-    className?: string;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { StepList, StepMark };

package/dist/blocks/streaming-text.d.ts

@@ -6,12 +6,12 @@ declare function StreamingText({ text, streaming, className, }: {
     /** The text so far. */
     text: string;
     /** Show a caret while more is arriving; announced once when it stops. */
-    streaming?: boolean;
-    className?: string;
+    streaming?: boolean | undefined;
+    className?: string | undefined;
 }): import("react").JSX.Element;
 /** A label that shimmers while an agent is working ("Thinking", "Reading the docs"). */
 declare function ShimmerLabel({ children, className, }: {
     children: React.ReactNode;
-    className?: string;
+    className?: string | undefined;
 }): import("react").JSX.Element;
 export { StreamingText, ShimmerLabel };

package/dist/chat/agent-avatar.d.ts

@@ -34,15 +34,15 @@ declare function AgentAvatar({ agent, size, className, }: {
     /** Who the agent is: id, display name and role. */
     agent: AgentIdentity;
     /** md for message headers, sm for lists and chips. */
-    size?: "sm" | "md";
-    className?: string;
+    size?: "sm" | "md" | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 /** Avatar plus name, with the role spelled out for screen readers. */
 declare function AgentBadge({ agent, size, className, }: {
     /** Who the agent is: id, display name and role. */
     agent: AgentIdentity;
     /** md for message headers, sm for lists and chips. */
-    size?: "sm" | "md";
-    className?: string;
+    size?: "sm" | "md" | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { AgentAvatar, AgentBadge, AgentRolesProvider, useAgentRoles };

package/dist/chat/ai-disclosure.d.ts

@@ -25,13 +25,13 @@ export declare const aiDisclosureStrings: {
  */
 declare function AiDisclosure({ agent, variant, details, onLearnMore, className, }: {
     /** The agent, named by the app: an AgentIdentity or a plain name. Left out, the notice says "an AI system". Never model text. */
-    agent?: AgentIdentity | string;
+    agent?: AgentIdentity | string | undefined;
     /** "line" (the default) for a first line in the thread; "badge" for a compact mark in a header, e.g. ThreadHeader's. Place each where it fits. */
-    variant?: "line" | "badge";
+    variant?: "line" | "badge" | undefined;
     /** The app's own plain text about the system: who operates it, what data it uses, how to reach a person. Shown under the line, or in the badge's explanation. */
-    details?: string;
+    details?: string | undefined;
     /** Opens the app's own page or dialog about its AI use. A callback, never a URL from the model. Shows a "Learn more" button. */
-    onLearnMore?: () => void;
-    className?: string;
+    onLearnMore?: (() => void) | undefined;
+    className?: string | undefined;
 }): import("react").JSX.Element;
 export { AiDisclosure };

package/dist/chat/ai-disclosure.js

@@ -41,7 +41,7 @@ function AiDisclosure({ agent, variant = "line", details, onLearnMore, className
         // Nothing more to say: a static mark with a name, not a button that opens nothing.
         if (!details && !onLearnMore)
             return (_jsx("span", { "data-slot": "ai-disclosure", "data-variant": "badge", role: "img", "aria-label": label, className: cn(badgeClass, className), children: mark }));
-        return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { "data-slot": "ai-disclosure", "data-variant": "badge", "aria-label": label, className: cn(badgeClass, "outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", className), children: mark }), _jsxs(PopoverContent, { align: "start", className: "flex w-72 flex-col gap-1.5 p-3 text-xs", children: [_jsx("p", { className: "text-sm font-medium", children: name ? t("about", { name }) : t("aboutUnnamed") }), _jsx("p", { children: sentence }), details && _jsx("p", { className: "text-muted-foreground", children: details }), learnMore && _jsx("div", { children: learnMore })] })] }));
+        return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { "data-slot": "ai-disclosure", "data-variant": "badge", "aria-label": label, className: cn(badgeClass, "outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80", className), children: mark }), _jsxs(PopoverContent, { align: "start", className: "flex w-72 flex-col gap-1.5 p-3 text-xs", children: [_jsx("p", { className: "text-sm font-medium", children: name ? t("about", { name }) : t("aboutUnnamed") }), _jsx("p", { children: sentence }), details && _jsx("p", { className: "text-muted-foreground", children: details }), learnMore && _jsx("div", { children: learnMore })] })] }));
     }
     return (_jsxs("div", { "data-slot": "ai-disclosure", "data-variant": "line", role: "note", className: cn("flex items-start justify-center gap-1.5 py-1 text-center text-xs text-muted-foreground", className), children: [_jsx(Bot, { "aria-hidden": true, className: "mt-0.5 size-3 shrink-0" }), _jsxs("p", { className: "flex flex-wrap items-center justify-center gap-x-1.5", children: [_jsx("span", { children: sentence }), details && _jsx("span", { children: details }), learnMore] })] }));
 }

package/dist/chat/attachment-preview.d.ts

@@ -27,8 +27,8 @@ declare function AttachmentChip({ attachment: a, onRemove, className, }: {
     /** The file, with progress (0–1) while uploading or an error if it failed. */
     attachment: Attachment;
     /** Shows a remove button. */
-    onRemove?: (id: string) => void;
-    className?: string;
+    onRemove?: ((id: string) => void) | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 /**
  * A sent file, as a tile in a message: an image preview when the app supplied one, else an icon for its type, with
@@ -39,15 +39,15 @@ declare function AttachmentPreview({ attachment: a, onOpen, className, }: {
     /** The file. `previewUrl` must be one your app serves (a thumbnail, a blob: URL); it's shown only for images. */
     attachment: Attachment;
     /** Makes the tile a button that opens the file. */
-    onOpen?: (attachment: Attachment) => void;
-    className?: string;
+    onOpen?: ((attachment: Attachment) => void) | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 /** Several sent files, as a wrapping row of tiles, announced as a list. */
 declare function AttachmentList({ attachments, onOpen, className, }: {
     /** The files. */
     attachments: Attachment[];
     /** Makes each tile a button that opens its file. */
-    onOpen?: (attachment: Attachment) => void;
-    className?: string;
+    onOpen?: ((attachment: Attachment) => void) | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { AttachmentChip, AttachmentPreview, AttachmentList };

package/dist/chat/attachment-preview.js

@@ -72,7 +72,7 @@ function AttachmentPreview({ attachment: a, onOpen, className, }) {
     const size = formatFileSize(a.size, fmt.number, t);
     const body = (_jsxs(_Fragment, { children: [thumb ? (_jsx("img", { src: thumb, alt: "", className: "h-24 w-full rounded-md bg-muted object-cover" })) : (_jsx("span", { "aria-hidden": true, className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(FileGlyph, { attachment: a }) })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm", children: a.name }), (size || a.error) && _jsx("span", { className: cn("block text-xs tabular-nums", a.error ? "text-destructive-text" : "text-faint-foreground"), children: a.error ?? size })] })] }));
     const frame = cn("flex w-56 max-w-full gap-2.5 rounded-lg border bg-card p-2 text-start", thumb ? "flex-col" : "items-center", className);
-    return onOpen ? (_jsx("button", { type: "button", "data-slot": "attachment-preview", "aria-label": t("open", { name: a.name }), onClick: () => onOpen(a), className: cn(frame, "outline-none transition-colors duration-150 hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/40"), children: body })) : (_jsx("div", { "data-slot": "attachment-preview", className: frame, children: body }));
+    return onOpen ? (_jsx("button", { type: "button", "data-slot": "attachment-preview", "aria-label": t("open", { name: a.name }), onClick: () => onOpen(a), className: cn(frame, "outline-none transition-colors duration-150 hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/80"), children: body })) : (_jsx("div", { "data-slot": "attachment-preview", className: frame, children: body }));
 }
 /** Several sent files, as a wrapping row of tiles, announced as a list. */
 function AttachmentList({ attachments, onOpen, className, }) {

package/dist/chat/card-registry.js

@@ -32,7 +32,7 @@ class CardBoundary extends React.Component {
 }
 function Summary({ text, }) {
     const t = useStrings("cardRegistry", cardRegistryStrings);
-    return (_jsxs(Collapsible, { className: "group/summary", children: [_jsxs(CollapsibleTrigger, { className: "relative after:absolute after:inset-x-0 after:-inset-y-1 inline-flex items-center gap-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-sm", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform group-data-[state=open]/summary:[transform:rotate(90deg)]" }), " ", t("showAsText")] }), _jsx(CollapsibleContent, { children: _jsx("p", { className: "mt-1.5 rounded-md bg-sunken px-3 py-2 text-sm whitespace-pre-wrap", children: text }) })] }));
+    return (_jsxs(Collapsible, { className: "group/summary", children: [_jsxs(CollapsibleTrigger, { className: "relative after:absolute after:inset-x-0 after:-inset-y-1 inline-flex items-center gap-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80 rounded-sm", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform group-data-[state=open]/summary:[transform:rotate(90deg)]" }), " ", t("showAsText")] }), _jsx(CollapsibleContent, { children: _jsx("p", { className: "mt-1.5 rounded-md bg-sunken px-3 py-2 text-sm whitespace-pre-wrap", children: text }) })] }));
 }
 /**
  * Renders one card from the registry. Three honest fallbacks, each with the

package/dist/chat/citation.d.ts

@@ -31,14 +31,14 @@ declare function SourceDetail({ source, }: {
  */
 declare function Citation({ source, marker, }: {
     /** The source this marker points to; without it the marker says it's unknown. */
-    source?: MessageSource;
+    source?: MessageSource | undefined;
     /** The number to show when there's no source. */
-    marker?: number;
+    marker?: number | undefined;
 }): import("react").JSX.Element;
 /** The sources under a reply, as chips that open the same detail. */
 declare function SourceList({ sources, className, }: {
     /** Every source the reply used, in marker order. */
     sources: MessageSource[];
-    className?: string;
+    className?: string | undefined;
 }): import("react").JSX.Element | null;
 export { Citation, SourceList, SourceDetail };

package/dist/chat/citation.js

@@ -42,7 +42,7 @@ function SourceDetail({ source, }) {
     const { Icon, noun } = kindOf(source.kind, t);
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-3" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium leading-snug", children: source.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: source.origin ?? noun })] })] }), source.snippet && (
             // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            _jsx("blockquote", { tabIndex: 0, className: "max-h-40 overflow-auto rounded-md bg-sunken outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:ring-inset px-2.5 py-2 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground", children: source.snippet })), source.provisional && (_jsx("p", { className: "text-xs text-provisional", children: t("notVerified") }))] }));
+            _jsx("blockquote", { tabIndex: 0, className: "max-h-40 overflow-auto rounded-md bg-sunken outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80 focus-visible:ring-inset px-2.5 py-2 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground", children: source.snippet })), source.provisional && (_jsx("p", { className: "text-xs text-provisional", children: t("notVerified") }))] }));
 }
 /**
  * An inline [n]. Opens the source in a popover on click or Enter, so evidence is
@@ -54,7 +54,7 @@ function Citation({ source, marker, }) {
     if (!source) {
         return _jsxs("sup", { className: "text-faint-foreground", children: ["[", marker ?? "?", "]"] });
     }
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("sourceLabel", { marker: source.marker, label: source.label }), className: cn("mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-sm px-1 align-middle text-2xs font-semibold tabular-nums transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", source.provisional
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("sourceLabel", { marker: source.marker, label: source.label }), className: cn("mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-sm px-1 align-middle text-2xs font-semibold tabular-nums transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80", source.provisional
                         ? "border border-dashed border-provisional/60 text-provisional hover:bg-muted"
                         : "bg-accent-weak text-accent-text hover:bg-primary hover:text-primary-foreground"), children: source.marker }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: source }) })] }));
 }
@@ -67,7 +67,7 @@ function SourceList({ sources, className, }) {
                 .sort((a, b) => a.marker - b.marker)
                 .map((s) => {
                 const { Icon } = kindOf(s.kind, t);
-                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pe-2 ps-1 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
+                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pe-2 ps-1 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
             })] }));
 }
 export { Citation, SourceList, SourceDetail };

package/dist/chat/composer.d.ts

@@ -22,7 +22,12 @@ export type ComposerState = "ready" | "sending" | "streaming" | {
     reason: string;
 } | {
     kind: "offline";
-    reason?: string;
+    reason?: string | undefined;
+}
+/** Typing stays open, but sending waits, and the box says why: "Your partner is still thinking". */
+ | {
+    kind: "held";
+    reason: string;
 };
 /**
  * Where a person asks. Mentions (@) attach things in the user's system as chips the agent
@@ -33,9 +38,11 @@ export type ComposerState = "ready" | "sending" | "streaming" | {
  * Enter sends, Shift+Enter breaks a line. While an agent replies the send button
  * becomes Stop. A locked composer says why; an offline one says so. With
  * `onAttach`, files can also be pasted or dropped onto it. `tools` adds your
- * own controls to the toolbar, such as a dictation button.
+ * own controls to the toolbar, such as a dictation button. A held composer
+ * (`{ kind: "held", reason }`) keeps typing open and says why sending waits.
+ * `textareaRef` focuses the box from outside, e.g. after a new project starts.
  */
-declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onScopeClick, mentions, commands, references, onReferencesChange, attachments, onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, className, }: {
+declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onScopeClick, mentions, commands, references, onReferencesChange, attachments, onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, textareaRef, sendShape, className, }: {
     /** The text in the box. */
     value: string;
     /** Called with the new text as the person types. */
@@ -43,38 +50,42 @@ declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onS
     /** Called on send with the text and the entities mentioned. */
     onSubmit: (value: string, references: EntityRef[]) => void;
     /** Shown as Stop while a reply is streaming. */
-    onStop?: () => void;
-    /** ready, sending, streaming, locked (with a reason) or offline. */
-    state?: ComposerState;
+    onStop?: (() => void) | undefined;
+    /** ready, sending, streaming, locked (with a reason), held (typing open, sending waits, with a reason) or offline. */
+    state?: ComposerState | undefined;
     /** Where the next message's work lands; production turns the pill to a warning. */
-    scope?: ComposerScope;
+    scope?: ComposerScope | undefined;
     /** Makes the scope pill a button, e.g. to change environment. */
-    onScopeClick?: () => void;
+    onScopeClick?: (() => void) | undefined;
     /** What @ can insert, grouped under their headings. */
-    mentions?: MentionOption[];
+    mentions?: MentionOption[] | undefined;
     /** What / can run, only at the start of a message. */
-    commands?: SlashCommand[];
+    commands?: SlashCommand[] | undefined;
     /** Entities already attached, shown as chips. */
-    references?: EntityRef[];
+    references?: EntityRef[] | undefined;
     /** Called when a chip is added or removed. */
-    onReferencesChange?: (references: EntityRef[]) => void;
+    onReferencesChange?: ((references: EntityRef[]) => void) | undefined;
     /** Files attached, with upload progress or an error. */
-    attachments?: Attachment[];
+    attachments?: Attachment[] | undefined;
     /** Shows an attach button; called with the chosen files. */
-    onAttach?: (files: File[]) => void;
+    onAttach?: ((files: File[]) => void) | undefined;
     /**
      * Which files the attach button's picker offers, as for `<input accept>` (e.g. "image/*,.pdf"). Files pasted or
      * dropped arrive as they are, so check types where you upload.
      */
-    accept?: string;
+    accept?: string | undefined;
     /** Called when a file is removed. */
-    onRemoveAttachment?: (id: string) => void;
+    onRemoveAttachment?: ((id: string) => void) | undefined;
     /** Shown in the empty box; "Ask a question, or describe a change" by default. */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /** The accessible name of the text box; "Message" by default. */
-    label?: string;
+    label?: string | undefined;
     /** Your own controls in the toolbar, after the attach button: a dictation button, a model picker. */
-    tools?: React.ReactNode;
-    className?: string;
+    tools?: React.ReactNode | undefined;
+    /** The text box, to focus it or read its selection from outside. */
+    textareaRef?: React.Ref<HTMLTextAreaElement> | undefined;
+    /** The send button's shape: "square" (the default, rounded corners) or "round". */
+    sendShape?: "square" | "round" | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { Composer };

package/dist/chat/composer.js

@@ -48,24 +48,28 @@ const hasFiles = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files"
  * Enter sends, Shift+Enter breaks a line. While an agent replies the send button
  * becomes Stop. A locked composer says why; an offline one says so. With
  * `onAttach`, files can also be pasted or dropped onto it. `tools` adds your
- * own controls to the toolbar, such as a dictation button.
+ * own controls to the toolbar, such as a dictation button. A held composer
+ * (`{ kind: "held", reason }`) keeps typing open and says why sending waits.
+ * `textareaRef` focuses the box from outside, e.g. after a new project starts.
  */
-function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, onScopeClick, mentions = [], commands = [], references = [], onReferencesChange, attachments = [], onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, className, }) {
+function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, onScopeClick, mentions = [], commands = [], references = [], onReferencesChange, attachments = [], onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, textareaRef, sendShape = "square", className, }) {
     const kindOf = useEntityKinds();
     const t = useStrings("composer", composerStrings);
     const placeholder = placeholderProp ?? t("placeholder");
     const label = labelProp ?? t("label");
     const id = React.useId();
     const textarea = React.useRef(null);
+    React.useImperativeHandle(textareaRef, () => textarea.current, []);
     // Files dragged over the composer: a count of enter/leave pairs, since child elements fire their own.
     const [dragDepth, setDragDepth] = React.useState(0);
     const fileInput = React.useRef(null);
     const [trigger, setTrigger] = React.useState(null);
     const [active, setActive] = React.useState(0);
-    const locked = typeof state === "object" ? state : null;
+    const held = typeof state === "object" && state.kind === "held" ? state : null;
+    const locked = typeof state === "object" && state.kind !== "held" ? state : null;
     const canAttach = Boolean(onAttach) && !locked;
     const busy = state === "sending" || state === "streaming";
-    const canSend = !locked && !busy && (value.trim().length > 0 || references.length > 0);
+    const canSend = !locked && !held && !busy && (value.trim().length > 0 || references.length > 0);
     const items = React.useMemo(() => {
         if (!trigger)
             return [];
@@ -207,11 +211,11 @@ function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, o
                             onAttach(files);
                             if (!e.clipboardData.getData("text/plain"))
                                 e.preventDefault();
-                        }, "aria-controls": menuOpen ? listId : undefined, "aria-activedescendant": menuOpen ? optionId(active) : undefined, "aria-autocomplete": "list", "aria-describedby": locked ? `${id}-locked` : undefined, className: cn("block max-h-60 min-h-12 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-prose leading-relaxed outline-none [field-sizing:content] placeholder:text-faint-foreground disabled:cursor-not-allowed", locked && !value && "min-h-0 h-3 pt-3 pb-0") }), locked && (_jsx("p", { id: `${id}-locked`, className: "flex items-center gap-1.5 px-4 pb-1 text-sm text-muted-foreground", children: locked.kind === "offline" ? locked.reason ?? t("offline") : locked.reason })), _jsxs("div", { className: "flex items-center gap-1.5 px-2 pt-1 pb-2", children: [onAttach && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInput, type: "file", multiple: true, accept: accept, tabIndex: -1, "aria-label": t("attachFiles"), className: "hidden", onChange: (e) => {
+                        }, "aria-controls": menuOpen ? listId : undefined, "aria-activedescendant": menuOpen ? optionId(active) : undefined, "aria-autocomplete": "list", "aria-describedby": locked ? `${id}-locked` : held ? `${id}-held` : undefined, className: cn("block max-h-60 min-h-12 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-prose leading-relaxed outline-none [field-sizing:content] placeholder:text-faint-foreground disabled:cursor-not-allowed", locked && !value && "min-h-0 h-3 pt-3 pb-0") }), locked && (_jsx("p", { id: `${id}-locked`, className: "flex items-center gap-1.5 px-4 pb-1 text-sm text-muted-foreground", children: locked.kind === "offline" ? locked.reason ?? t("offline") : locked.reason })), held && (_jsx("p", { id: `${id}-held`, "data-slot": "composer-held", className: "px-4 pb-1 text-sm text-muted-foreground", children: held.reason })), _jsxs("div", { className: "flex items-center gap-1.5 px-2 pt-1 pb-2", children: [onAttach && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInput, type: "file", multiple: true, accept: accept, tabIndex: -1, "aria-label": t("attachFiles"), className: "hidden", onChange: (e) => {
                                             const files = Array.from(e.target.files ?? []);
                                             if (files.length)
                                                 onAttach(files);
                                             e.target.value = "";
-                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("attachFiles"), disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: t("attachFiles") })] })] })), tools, scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors duration-150 enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? t("production") : (scope.detail ?? t("nonProduction"))] })] })), _jsxs("span", { className: "ms-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " ", t("hintSend"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " ", t("hintNewLine"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "@" }), " ", t("hintMention")] }), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": t("stop"), onClick: onStop, className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-foreground text-background transition-transform duration-150 active:scale-95 @lg:ms-1", children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": t("send"), onClick: submit, disabled: !canSend, "aria-busy": state === "sending", className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-[background-color,opacity,transform] duration-150 enabled:hover:bg-primary-hover active:scale-95 disabled:opacity-30 @lg:ms-1", children: state === "sending" ? _jsx(LoaderCircle, { className: "size-4 animate-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
+                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("attachFiles"), disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: t("attachFiles") })] })] })), tools, scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors duration-150 enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? t("production") : (scope.detail ?? t("nonProduction"))] })] })), _jsxs("span", { className: "ms-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " ", t("hintSend"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " ", t("hintNewLine"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "@" }), " ", t("hintMention")] }), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": t("stop"), onClick: onStop, className: cn("ms-auto flex size-8 items-center justify-center bg-foreground text-background transition-transform duration-150 active:scale-95 @lg:ms-1", sendShape === "round" ? "rounded-full" : "rounded-lg"), children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": t("send"), onClick: submit, disabled: !canSend, "aria-busy": state === "sending", className: cn("ms-auto flex size-8 items-center justify-center bg-primary text-primary-foreground transition-[background-color,opacity,transform] duration-150 enabled:hover:bg-primary-hover active:scale-95 disabled:opacity-30 @lg:ms-1", sendShape === "round" ? "rounded-full" : "rounded-lg"), children: state === "sending" ? _jsx(LoaderCircle, { className: "size-4 animate-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
 }
 export { Composer };

package/dist/chat/context-meter.d.ts

@@ -18,6 +18,6 @@ declare function ContextMeter({ segments, limit, className, }: {
     segments: ContextSegment[];
     /** The model's context window, in tokens. */
     limit: number;
-    className?: string;
+    className?: string | undefined;
 }): import("react").JSX.Element;
 export { ContextMeter };

package/dist/chat/context-meter.js

@@ -40,7 +40,7 @@ function ContextMeter({ segments, limit, className, }) {
     const warn = pct > 0.8;
     const r = 7;
     const c = 2 * Math.PI * r;
-    return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { "aria-label": t("label", { used: tokens(used), limit: tokens(limit) }), className: cn("inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-2xs tabular-nums outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", warn ? "text-warning-text" : "text-muted-foreground", className), children: [_jsxs("svg", { viewBox: "0 0 18 18", className: "size-4 -rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: "var(--muted)", strokeWidth: "2.5" }), _jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: warn ? "var(--warning)" : "var(--primary)", strokeWidth: "2.5", strokeDasharray: `${pct * c} ${c}`, strokeLinecap: "round" })] }), fmt.number(Math.round(pct * 100) / 100, { style: "percent" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-3", children: [_jsxs("p", { className: "flex items-baseline justify-between text-sm font-medium", children: [t("context"), " ", _jsx("span", { className: "text-xs font-normal text-muted-foreground tabular-nums", children: t("usage", { used: tokens(used), limit: tokens(limit) }) })] }), _jsx("div", { "aria-hidden": true, className: "mt-2 flex h-2 overflow-hidden rounded-full bg-muted", children: segments.map((s) => (_jsx("span", { style: { width: `${(s.tokens / limit) * 100}%`, background: kindColor[s.kind] } }, s.label))) }), _jsx("ul", { className: "mt-3 flex flex-col gap-1.5", children: [...segments]
+    return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { "aria-label": t("label", { used: tokens(used), limit: tokens(limit) }), className: cn("inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-2xs tabular-nums outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80", warn ? "text-warning-text" : "text-muted-foreground", className), children: [_jsxs("svg", { viewBox: "0 0 18 18", className: "size-4 -rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: "var(--muted)", strokeWidth: "2.5" }), _jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: warn ? "var(--warning)" : "var(--primary)", strokeWidth: "2.5", strokeDasharray: `${pct * c} ${c}`, strokeLinecap: "round" })] }), fmt.number(Math.round(pct * 100) / 100, { style: "percent" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-3", children: [_jsxs("p", { className: "flex items-baseline justify-between text-sm font-medium", children: [t("context"), " ", _jsx("span", { className: "text-xs font-normal text-muted-foreground tabular-nums", children: t("usage", { used: tokens(used), limit: tokens(limit) }) })] }), _jsx("div", { "aria-hidden": true, className: "mt-2 flex h-2 overflow-hidden rounded-full bg-muted", children: segments.map((s) => (_jsx("span", { style: { width: `${(s.tokens / limit) * 100}%`, background: kindColor[s.kind] } }, s.label))) }), _jsx("ul", { className: "mt-3 flex flex-col gap-1.5", children: [...segments]
                             .sort((a, b) => b.tokens - a.tokens)
                             .map((s) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { "aria-hidden": true, className: "size-2 rounded-xs", style: { background: kindColor[s.kind] } }), _jsx("span", { className: "flex-1", children: s.label }), _jsx("span", { className: "text-muted-foreground tabular-nums", children: tokens(s.tokens) })] }, s.label))) }), warn && _jsx("p", { className: "mt-3 text-xs text-warning-text", children: t("nearlyFull") })] })] }));
 }

package/dist/chat/entity-chip.d.ts

@@ -48,9 +48,9 @@ declare function EntityChip({ entity, onOpen, onRemove, className, }: {
     /** The thing to show: its kind, identifier and optional label. */
     entity: EntityRef;
     /** Makes the chip a button that opens the thing. */
-    onOpen?: (entity: EntityRef) => void;
+    onOpen?: ((entity: EntityRef) => void) | undefined;
     /** Adds a remove button, e.g. in the composer. */
-    onRemove?: (entity: EntityRef) => void;
-    className?: string;
+    onRemove?: ((entity: EntityRef) => void) | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { EntityChip, EntityKindsProvider, useEntityKinds };

package/dist/chat/entity-chip.js

@@ -81,6 +81,6 @@ function EntityChip({ entity, onOpen, onRemove, className, }) {
         : t("title", { noun, name: entity.name });
     const body = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: shown }), _jsxs("span", { className: "sr-only", children: [" (", title, ")"] })] }));
     const base = "inline-flex max-w-full items-center gap-1 rounded-sm border bg-card px-1.5 py-px align-baseline font-mono text-[0.92em] leading-[1.35] text-foreground";
-    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: shown }), onClick: () => onRemove(entity), className: "relative after:absolute after:-inset-1 -ms-px rounded-e-sm border border-s-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
+    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: shown }), onClick: () => onRemove(entity), className: "relative after:absolute after:-inset-1 -ms-px rounded-e-sm border border-s-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
 }
 export { EntityChip, EntityKindsProvider, useEntityKinds };

package/dist/chat/folded-turns.d.ts

@@ -15,19 +15,24 @@ export declare const foldedTurnsStrings: {
  * versions and compared them". The line says how many turns are inside and opens them in place; `summary` is yours
  * (a sentence, a count of tool calls, a cost). Folding never hides that the turns happened.
  */
-declare function FoldedTurns({ count, summary, defaultOpen, open, onOpenChange, children, className, }: {
+declare function FoldedTurns({ count, summary, defaultOpen, open, onOpenChange, header, children, className, }: {
     /** How many turns are inside, for the button ("Show 12 turns"). */
     count: number;
     /** What happened in them, shown on the folded line: text or your own small summary. */
-    summary?: React.ReactNode;
+    summary?: React.ReactNode | undefined;
     /** Start open. */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /** Controlled open state. */
-    open?: boolean;
+    open?: boolean | undefined;
     /** Called when a person opens or closes it. */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Your own folded line instead of the dashed one: a card with a title, how it ended, its cost, actions. The
+     * Show/Hide button follows it, so the turns can still be opened.
+     */
+    header?: React.ReactNode | undefined;
     /** The turns, usually Messages. */
     children: React.ReactNode;
-    className?: string;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { FoldedTurns };

package/dist/chat/folded-turns.js

@@ -15,7 +15,7 @@ export const foldedTurnsStrings = {
  * versions and compared them". The line says how many turns are inside and opens them in place; `summary` is yours
  * (a sentence, a count of tool calls, a cost). Folding never hides that the turns happened.
  */
-function FoldedTurns({ count, summary, defaultOpen = false, open, onOpenChange, children, className, }) {
+function FoldedTurns({ count, summary, defaultOpen = false, open, onOpenChange, header, children, className, }) {
     const t = useStrings("foldedTurns", foldedTurnsStrings);
     const [own, setOwn] = React.useState(defaultOpen);
     const isOpen = open ?? own;
@@ -24,6 +24,6 @@ function FoldedTurns({ count, summary, defaultOpen = false, open, onOpenChange,
             setOwn(next);
         onOpenChange?.(next);
     };
-    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: set, "data-slot": "folded-turns", className: cn("group/folded flex flex-col gap-7", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-dashed px-3 py-2 text-sm", children: [summary && _jsx("div", { className: "min-w-0 flex-1 text-muted-foreground", children: summary }), _jsxs(CollapsibleTrigger, { className: "relative after:absolute after:inset-x-0 after:-inset-y-0.5 ms-auto inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent-text outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 group-data-[state=open]/folded:[transform:rotate(90deg)]" }), t(isOpen ? "hide" : "show", { count })] })] }), _jsx(CollapsibleContent, { className: "flex flex-col gap-7", children: children })] }));
+    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: set, "data-slot": "folded-turns", className: cn("group/folded flex flex-col gap-7", className), children: [_jsxs("div", { "data-slot": "folded-turns-line", className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 text-sm", header ? "flex-col items-stretch" : "rounded-lg border border-dashed px-3 py-2"), children: [header ?? (summary && _jsx("div", { className: "min-w-0 flex-1 text-muted-foreground", children: summary })), _jsxs(CollapsibleTrigger, { className: cn("relative after:absolute after:inset-x-0 after:-inset-y-0.5 ms-auto inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent-text outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80", header && "self-end"), children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 group-data-[state=open]/folded:[transform:rotate(90deg)]" }), t(isOpen ? "hide" : "show", { count })] })] }), _jsx(CollapsibleContent, { className: "flex flex-col gap-7", children: children })] }));
 }
 export { FoldedTurns };

package/dist/chat/message-actions.d.ts

@@ -16,15 +16,15 @@ export type Rating = "up" | "down" | null;
  */
 declare function MessageActions({ text, onRetry, rating, onRate, meta, className, }: {
     /** What Copy copies; without it there's no Copy. */
-    text?: string;
+    text?: string | undefined;
     /** Shows Retry. */
-    onRetry?: () => void;
+    onRetry?: (() => void) | undefined;
     /** The current rating: up, down or none. */
-    rating?: Rating;
+    rating?: Rating | undefined;
     /** Shows thumbs up and down. */
-    onRate?: (rating: Rating) => void;
+    onRate?: ((rating: Rating) => void) | undefined;
     /** Facts after the actions, e.g. the model and cost. */
-    meta?: React.ReactNode;
-    className?: string;
+    meta?: React.ReactNode | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { MessageActions };