@nadicodeai/ui 12.1.165 → 12.1.167

package/dist/internal/assistant-ui/thread.js

@@ -14,25 +14,26 @@ import { Alert } from "../../components/alert.js";
 import { cn } from "../../lib/utils.js";
 import { ActionBarMorePrimitive, ActionBarPrimitive, AuiIf, BranchPickerPrimitive, ComposerPrimitive, ErrorPrimitive, groupPartByType, MessagePrimitive, SuggestionPrimitive, ThreadPrimitive, useAuiState, } from "@assistant-ui/react";
 import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DownloadIcon, MicIcon, MoreHorizontalIcon, PencilIcon, RefreshCwIcon, SquareIcon, } from "lucide-react";
-import { createContext, useContext, useState, } from "react";
+import { createContext, useContext, useMemo, useState, } from "react";
 const EMPTY_COMPONENTS = {};
 const ThreadComponentsContext = createContext(EMPTY_COMPONENTS);
 // Startup exposes a loading placeholder thread; treat it as a new chat so the
 // welcome shows from the first frame. Loads after startup keep the messages.
 const isNewChatView = (s) => s.thread.messages.length === 0 && (!s.thread.isLoading || s.threads.isLoading);
 export const Thread = ({ components = EMPTY_COMPONENTS, labels, toolDetails = true, }) => {
-    return (_jsx(ThreadComponentsContext.Provider, { value: components, children: _jsx(ThreadLabelsContext.Provider, { value: { ...defaultThreadLabels, ...labels }, children: _jsx(ToolDetailsContext.Provider, { value: toolDetails, children: _jsx(ThreadRoot, {}) }) }) }));
+    const threadLabels = useMemo(() => ({ ...defaultThreadLabels, ...labels }), [labels]);
+    return (_jsx(ThreadComponentsContext.Provider, { value: components, children: _jsx(ThreadLabelsContext.Provider, { value: threadLabels, children: _jsx(ToolDetailsContext.Provider, { value: toolDetails, children: _jsx(ThreadRoot, {}) }) }) }));
 };
 const ThreadRoot = () => {
     const { Welcome = ThreadWelcome } = useContext(ThreadComponentsContext);
-    return (_jsx(ThreadPrimitive.Root, { className: "aui-root aui-thread-root bg-background @container flex h-full flex-col", 
+    return (_jsx(ThreadPrimitive.Root, { className: "bg-background @container flex h-full flex-col", 
         // SAFETY: CSSProperties lists only standard properties; widening each `--` key to string lets the literal pass as a style object, and React sets each through style.setProperty.
         style: {
             ["--thread-max-width"]: "44rem",
             ["--composer-bg"]: "var(--color-muted)",
             ["--composer-radius"]: "var(--radius-md)",
             ["--composer-padding"]: "8px",
-        }, children: _jsx(ThreadPrimitive.Viewport, { turnAnchor: "top", "data-slot": "aui_thread-viewport", className: "relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth", children: _jsxs("div", { className: "mx-auto flex w-full max-w-(--thread-max-width) flex-1 flex-col px-4 pt-4", children: [_jsx(AuiIf, { condition: isNewChatView, children: _jsx("div", { className: "flex flex-1 flex-col justify-center", children: _jsx(Welcome, {}) }) }), _jsx("div", { "data-slot": "aui_message-group", className: "mb-14 flex flex-col gap-y-6 empty:hidden", children: _jsx(ThreadPrimitive.Messages, { children: () => _jsx(ThreadMessage, {}) }) }), _jsxs(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer bg-background sticky bottom-0 mt-auto flex flex-col gap-4 overflow-visible rounded-t-(--composer-radius) pb-4 md:pb-6", children: [_jsx(ThreadScrollToBottom, {}), _jsx(ThreadFollowupSuggestions, {}), _jsx(AuiIf, { condition: isNewChatView, children: _jsx(ThreadSuggestions, {}) }), _jsx(Composer, {})] })] }) }) }));
+        }, children: _jsx(ThreadPrimitive.Viewport, { turnAnchor: "top", "data-slot": "aui_thread-viewport", className: "relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth", children: _jsxs("div", { className: "mx-auto flex w-full max-w-(--thread-max-width) flex-1 flex-col px-4 pt-4", children: [_jsx(AuiIf, { condition: isNewChatView, children: _jsx("div", { className: "flex flex-1 flex-col justify-center", children: _jsx(Welcome, {}) }) }), _jsx("div", { "data-slot": "aui_message-group", className: "mb-14 flex flex-col gap-y-6 empty:hidden", children: _jsx(ThreadPrimitive.Messages, { children: () => _jsx(ThreadMessage, {}) }) }), _jsxs(ThreadPrimitive.ViewportFooter, { className: "bg-background sticky bottom-0 mt-auto flex flex-col gap-4 overflow-visible rounded-t-(--composer-radius) pb-4 md:pb-6", children: [_jsx(ThreadScrollToBottom, {}), _jsx(ThreadFollowupSuggestions, {}), _jsx(AuiIf, { condition: isNewChatView, children: _jsx(ThreadSuggestions, {}) }), _jsx(Composer, {})] })] }) }) }));
 };
 const DefaultToolGroup = ({ group, children, }) => {
     const waiting = group.status.type === "requires-action";
@@ -57,27 +58,27 @@ const ThreadMessage = () => {
 };
 const ThreadScrollToBottom = () => {
     const labels = useThreadLabels();
-    return (_jsx(ThreadPrimitive.ScrollToBottom, { render: _jsx(TooltipIconButton, { tooltip: labels.scrollToBottom, variant: "outline", className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-md p-4 disabled:invisible" }), children: _jsx(ArrowDownIcon, {}) }));
+    return (_jsx(ThreadPrimitive.ScrollToBottom, { render: _jsx(TooltipIconButton, { tooltip: labels.scrollToBottom, variant: "outline", className: "absolute -top-12 z-10 self-center rounded-md p-4 disabled:invisible" }), children: _jsx(ArrowDownIcon, {}) }));
 };
 const ThreadWelcome = () => {
-    return (_jsx("div", { className: "aui-thread-welcome-root mb-6 flex flex-col items-center px-4 text-center", children: _jsx("h1", { className: "aui-thread-welcome-message-inner text-2xl font-semibold", children: "How can I help you today?" }) }));
+    return (_jsx("div", { className: "mb-6 flex flex-col items-center px-4 text-center", children: _jsx("h1", { className: "text-2xl font-semibold", children: "How can I help you today?" }) }));
 };
 const ThreadSuggestions = () => {
-    return (_jsx("div", { className: "aui-thread-welcome-suggestions flex w-full flex-wrap items-center justify-center gap-2 px-4", children: _jsx(ThreadPrimitive.Suggestions, { children: () => _jsx(ThreadSuggestionItem, {}) }) }));
+    return (_jsx("div", { className: "flex w-full flex-wrap items-center justify-center gap-2 px-4", children: _jsx(ThreadPrimitive.Suggestions, { children: () => _jsx(ThreadSuggestionItem, {}) }) }));
 };
 const ThreadSuggestionItem = () => {
-    return (_jsx("div", { className: "aui-thread-welcome-suggestion-display", children: _jsxs(SuggestionPrimitive.Trigger, { send: true, render: _jsx(Button, { variant: "ghost", className: "aui-thread-welcome-suggestion text-foreground hover:bg-muted border-border gap-1.5 rounded-md border py-1.5 text-sm font-normal whitespace-nowrap transition-colors" }), children: [_jsx(SuggestionPrimitive.Title, { className: "aui-thread-welcome-suggestion-text-1" }), _jsx(SuggestionPrimitive.Description, { className: "aui-thread-welcome-suggestion-text-2 empty:hidden" })] }) }));
+    return (_jsx("div", { children: _jsxs(SuggestionPrimitive.Trigger, { send: true, render: _jsx(Button, { variant: "ghost", className: "text-foreground hover:bg-muted border-border gap-1.5 rounded-md border py-1.5 text-sm font-normal whitespace-nowrap transition-colors" }), children: [_jsx(SuggestionPrimitive.Title, {}), _jsx(SuggestionPrimitive.Description, { className: "empty:hidden" })] }) }));
 };
 const Composer = () => {
     const labels = useThreadLabels();
-    return (_jsx(ComposerPrimitive.Root, { className: "aui-composer-root relative flex w-full flex-col", children: _jsxs(ComposerPrimitive.AttachmentDropzone, { render: _jsx("div", { "data-slot": "aui_composer-shell", className: "nc-transition-paint flex w-full flex-col gap-2 rounded-(--composer-radius) border border-border bg-(--composer-bg) p-(--composer-padding) focus-within:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:border-ring data-[dragging=true]:bg-accent" }), children: [_jsx(ComposerAttachments, {}), _jsx(ComposerPrimitive.Input, { placeholder: labels.composerPlaceholder, className: "aui-composer-input caret-primary placeholder:text-muted-foreground/80 max-h-32 min-h-10 w-full resize-none bg-transparent px-2.5 py-1 text-base outline-none", rows: 1, autoFocus: true, enterKeyHint: "send", "aria-label": labels.composerInput }), _jsx(ComposerAction, {})] }) }));
+    return (_jsx(ComposerPrimitive.Root, { className: "relative flex w-full flex-col", children: _jsxs(ComposerPrimitive.AttachmentDropzone, { render: _jsx("div", { "data-slot": "aui_composer-shell", className: "nc-transition-paint flex w-full flex-col gap-2 rounded-(--composer-radius) border border-border bg-(--composer-bg) p-(--composer-padding) focus-within:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:border-ring data-[dragging=true]:bg-accent" }), children: [_jsx(ComposerAttachments, {}), _jsx(ComposerPrimitive.Input, { placeholder: labels.composerPlaceholder, className: "caret-primary placeholder:text-muted-foreground/80 max-h-32 min-h-10 w-full resize-none bg-transparent px-2.5 py-1 text-base outline-none", rows: 1, autoFocus: true, enterKeyHint: "send", "aria-label": labels.composerInput }), _jsx(ComposerAction, {})] }) }));
 };
 const ComposerAction = () => {
     const labels = useThreadLabels();
-    return (_jsxs("div", { className: "aui-composer-action-wrapper relative flex items-center justify-between", children: [_jsx(ComposerAddAttachment, {}), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(AuiIf, { condition: (s) => s.thread.capabilities.dictation, children: [_jsx(AuiIf, { condition: (s) => s.composer.dictation == null, children: _jsx(ComposerPrimitive.Dictate, { render: _jsx(TooltipIconButton, { tooltip: "Voice input", side: "bottom", type: "button", variant: "ghost", size: "icon", className: "aui-composer-dictate rounded-md", "aria-label": "Start voice input" }), children: _jsx(MicIcon, { className: "aui-composer-dictate-icon size-4" }) }) }), _jsx(AuiIf, { condition: (s) => s.composer.dictation != null, children: _jsx(ComposerPrimitive.StopDictation, { render: _jsx(TooltipIconButton, { tooltip: "Stop dictation", side: "bottom", type: "button", variant: "ghost", size: "icon", className: "aui-composer-stop-dictation text-destructive rounded-md", "aria-label": "Stop voice input" }), children: _jsx(SquareIcon, { className: "aui-composer-stop-dictation-icon size-3.5 fill-current" }) }) })] }), _jsx(AuiIf, { condition: (s) => !s.thread.isRunning, children: _jsx(ComposerPrimitive.Send, { render: _jsx(TooltipIconButton, { tooltip: labels.send, side: "bottom", type: "button", variant: "default", size: "icon", className: "aui-composer-send rounded-md", "aria-label": labels.send }), children: _jsx(ArrowUpIcon, { className: "aui-composer-send-icon size-4.5" }) }) }), _jsx(AuiIf, { condition: (s) => s.thread.isRunning, children: _jsx(ComposerPrimitive.Cancel, { render: _jsx(Button, { type: "button", variant: "default", size: "icon", className: "aui-composer-cancel rounded-md", "aria-label": labels.stop }), children: _jsx(SquareIcon, { className: "aui-composer-cancel-icon size-3.5 fill-current" }) }) })] })] }));
+    return (_jsxs("div", { className: "relative flex items-center justify-between", children: [_jsx(ComposerAddAttachment, {}), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(AuiIf, { condition: (s) => s.thread.capabilities.dictation, children: [_jsx(AuiIf, { condition: (s) => s.composer.dictation === null || s.composer.dictation === undefined, children: _jsx(ComposerPrimitive.Dictate, { render: _jsx(TooltipIconButton, { tooltip: "Voice input", side: "bottom", type: "button", variant: "ghost", size: "icon", className: "rounded-md", "aria-label": "Start voice input" }), children: _jsx(MicIcon, { className: "size-4" }) }) }), _jsx(AuiIf, { condition: (s) => s.composer.dictation !== null && s.composer.dictation !== undefined, children: _jsx(ComposerPrimitive.StopDictation, { render: _jsx(TooltipIconButton, { tooltip: "Stop dictation", side: "bottom", type: "button", variant: "ghost", size: "icon", className: "text-destructive rounded-md", "aria-label": "Stop voice input" }), children: _jsx(SquareIcon, { className: "size-3.5 fill-current" }) }) })] }), _jsx(AuiIf, { condition: (s) => !s.thread.isRunning, children: _jsx(ComposerPrimitive.Send, { render: _jsx(TooltipIconButton, { tooltip: labels.send, side: "bottom", type: "button", variant: "default", size: "icon", className: "rounded-md", "aria-label": labels.send }), children: _jsx(ArrowUpIcon, { className: "size-4.5" }) }) }), _jsx(AuiIf, { condition: (s) => s.thread.isRunning, children: _jsx(ComposerPrimitive.Cancel, { render: _jsx(Button, { type: "button", variant: "default", size: "icon", className: "rounded-md", "aria-label": labels.stop }), children: _jsx(SquareIcon, { className: "size-3.5 fill-current" }) }) })] })] }));
 };
 const MessageError = () => {
-    return (_jsx(MessagePrimitive.Error, { children: _jsx(ErrorPrimitive.Root, { render: _jsx(Alert, { className: "aui-message-error-root mt-2", variant: "destructive" }), children: _jsx(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) }));
+    return (_jsx(MessagePrimitive.Error, { children: _jsx(ErrorPrimitive.Root, { render: _jsx(Alert, { className: "mt-2", variant: "destructive" }), children: _jsx(ErrorPrimitive.Message, { className: "line-clamp-2" }) }) }));
 };
 const ThreadIndicator = () => (_jsx(AgentOrb, { form: "orbit", size: 20, state: "working", label: "Assistant is working" }));
 const AssistantMessage = () => {
@@ -115,6 +116,11 @@ const AssistantMessage = () => {
                                     return part.dataRendererUI;
                                 case "indicator":
                                     return (_jsx("span", { "data-slot": "aui_assistant-message-indicator", className: "inline-flex", children: _jsx(Indicator, {}) }));
+                                case "audio":
+                                case "file":
+                                case "generative-ui":
+                                case "image":
+                                case "source":
                                 default:
                                     return null;
                             }
@@ -122,17 +128,17 @@ const AssistantMessage = () => {
 };
 const AssistantActionBar = () => {
     const labels = useThreadLabels();
-    return (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "aui-assistant-action-bar-root nc-transition-opacity col-start-3 row-start-2 -ms-1 flex gap-1 text-muted-foreground", children: [_jsxs(ActionBarPrimitive.Copy, { render: _jsx(TooltipIconButton, { tooltip: labels.copy }), children: [_jsx(AuiIf, { condition: (s) => s.message.isCopied, children: _jsx(CheckIcon, {}) }), _jsx(AuiIf, { condition: (s) => !s.message.isCopied, children: _jsx(CopyIcon, {}) })] }), _jsx(ActionBarPrimitive.Reload, { render: _jsx(TooltipIconButton, { tooltip: labels.refresh }), children: _jsx(RefreshCwIcon, {}) }), _jsxs(ActionBarMorePrimitive.Root, { children: [_jsx(ActionBarMorePrimitive.Trigger, { render: _jsx(TooltipIconButton, { tooltip: labels.more, className: "data-[state=open]:bg-accent" }), children: _jsx(MoreHorizontalIcon, {}) }), _jsx(ActionBarMorePrimitive.Content, { side: "bottom", align: "start", sideOffset: 6, className: "aui-action-bar-more-content nc-transition-opacity z-50 min-w-[8rem] overflow-hidden rounded-md border-0 bg-popover p-1.5 text-popover-foreground nc-elevation-floating data-[state=closed]:opacity-0 data-[state=open]:opacity-100", children: _jsxs(ActionBarPrimitive.ExportMarkdown, { render: _jsx(ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none select-none" }), children: [_jsx(DownloadIcon, { className: "size-4" }), labels.exportMarkdown] }) })] })] }));
+    return (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "nc-transition-opacity col-start-3 row-start-2 -ms-1 flex gap-1 text-muted-foreground", children: [_jsxs(ActionBarPrimitive.Copy, { render: _jsx(TooltipIconButton, { tooltip: labels.copy }), children: [_jsx(AuiIf, { condition: (s) => s.message.isCopied, children: _jsx(CheckIcon, {}) }), _jsx(AuiIf, { condition: (s) => !s.message.isCopied, children: _jsx(CopyIcon, {}) })] }), _jsx(ActionBarPrimitive.Reload, { render: _jsx(TooltipIconButton, { tooltip: labels.refresh }), children: _jsx(RefreshCwIcon, {}) }), _jsxs(ActionBarMorePrimitive.Root, { children: [_jsx(ActionBarMorePrimitive.Trigger, { render: _jsx(TooltipIconButton, { tooltip: labels.more, className: "data-[state=open]:bg-accent" }), children: _jsx(MoreHorizontalIcon, {}) }), _jsx(ActionBarMorePrimitive.Content, { side: "bottom", align: "start", sideOffset: 6, className: "nc-transition-opacity z-50 min-w-32 overflow-hidden rounded-md border-0 bg-popover p-1.5 text-popover-foreground nc-elevation-floating data-[state=closed]:opacity-0 data-[state=open]:opacity-100", children: _jsxs(ActionBarPrimitive.ExportMarkdown, { render: _jsx(ActionBarMorePrimitive.Item, { className: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none select-none" }), children: [_jsx(DownloadIcon, { className: "size-4" }), labels.exportMarkdown] }) })] })] }));
 };
 const UserMessage = () => {
-    return (_jsxs(MessagePrimitive.Root, { "data-slot": "aui_user-message-root", className: "grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 [contain-intrinsic-size:auto_200px] [content-visibility:auto] [&:where(>*)]:col-start-2", "data-role": "user", children: [_jsx(UserMessageAttachments, {}), _jsxs("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [_jsx("div", { className: "aui-user-message-content peer bg-muted text-foreground rounded-md px-4 py-2 wrap-break-word empty:hidden", children: _jsx(MessagePrimitive.Parts, {}) }), _jsx("div", { className: "aui-user-action-bar-wrapper absolute start-0 top-1/2 -translate-x-full -translate-y-1/2 pe-2 peer-empty:hidden rtl:translate-x-full", children: _jsx(UserActionBar, {}) })] }), _jsx(BranchPicker, { "data-slot": "aui_user-branch-picker", className: "col-span-full col-start-1 row-start-3 -me-1 justify-end" })] }));
+    return (_jsxs(MessagePrimitive.Root, { "data-slot": "aui_user-message-root", className: "grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 [contain-intrinsic-size:auto_200px] [content-visibility:auto] [&:where(>*)]:col-start-2", "data-role": "user", children: [_jsx(UserMessageAttachments, {}), _jsxs("div", { className: "relative col-start-2 min-w-0", children: [_jsx("div", { className: "peer bg-muted text-foreground rounded-md px-4 py-2 wrap-break-word empty:hidden", children: _jsx(MessagePrimitive.Parts, {}) }), _jsx("div", { className: "absolute inset-s-0 top-1/2 -translate-x-full -translate-y-1/2 pe-2 peer-empty:hidden rtl:translate-x-full", children: _jsx(UserActionBar, {}) })] }), _jsx(BranchPicker, { "data-slot": "aui_user-branch-picker", className: "col-span-full col-start-1 row-start-3 -me-1 justify-end" })] }));
 };
 const UserActionBar = () => {
-    return (_jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "aui-user-action-bar-root flex flex-col items-end", children: _jsx(ActionBarPrimitive.Edit, { render: _jsx(TooltipIconButton, { tooltip: "Edit", className: "aui-user-action-edit" }), children: _jsx(PencilIcon, {}) }) }));
+    return (_jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "flex flex-col items-end", children: _jsx(ActionBarPrimitive.Edit, { render: _jsx(TooltipIconButton, { tooltip: "Edit" }), children: _jsx(PencilIcon, {}) }) }));
 };
 const EditComposer = () => {
-    return (_jsx(MessagePrimitive.Root, { "data-slot": "aui_edit-composer-wrapper", className: "flex flex-col px-2 [contain-intrinsic-size:auto_200px] [content-visibility:auto]", children: _jsxs(ComposerPrimitive.Root, { className: "aui-edit-composer-root ms-auto flex w-full max-w-[85%] flex-col rounded-(--composer-radius) border border-border bg-(--composer-bg)", children: [_jsx(ComposerPrimitive.Input, { className: "aui-edit-composer-input text-foreground min-h-14 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-base outline-none", autoFocus: true }), _jsxs("div", { className: "aui-edit-composer-footer mx-2.5 mb-2.5 flex items-center gap-1.5 self-end", children: [_jsx(ComposerPrimitive.Cancel, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "h-8" }), children: "Cancel" }), _jsx(ComposerPrimitive.Send, { render: _jsx(Button, { size: "sm", className: "h-8" }), children: "Update" })] })] }) }));
+    return (_jsx(MessagePrimitive.Root, { "data-slot": "aui_edit-composer-wrapper", className: "flex flex-col px-2 [contain-intrinsic-size:auto_200px] [content-visibility:auto]", children: _jsxs(ComposerPrimitive.Root, { className: "ms-auto flex w-full max-w-[85%] flex-col rounded-(--composer-radius) border border-border bg-(--composer-bg)", children: [_jsx(ComposerPrimitive.Input, { className: "text-foreground min-h-14 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-base outline-none", autoFocus: true }), _jsxs("div", { className: "mx-2.5 mb-2.5 flex items-center gap-1.5 self-end", children: [_jsx(ComposerPrimitive.Cancel, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "h-8" }), children: "Cancel" }), _jsx(ComposerPrimitive.Send, { render: _jsx(Button, { size: "sm", className: "h-8" }), children: "Update" })] })] }) }));
 };
 const BranchPicker = ({ className, ...rest }) => {
-    return (_jsxs(BranchPickerPrimitive.Root, { hideWhenSingleBranch: true, className: cn("aui-branch-picker-root text-muted-foreground -ms-2 me-2 inline-flex items-center text-xs", className), ...rest, children: [_jsx(BranchPickerPrimitive.Previous, { render: _jsx(TooltipIconButton, { tooltip: "Previous" }), children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { className: "aui-branch-picker-state font-medium", children: [_jsx(BranchPickerPrimitive.Number, {}), " / ", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { render: _jsx(TooltipIconButton, { tooltip: "Next" }), children: _jsx(ChevronRightIcon, {}) })] }));
+    return (_jsxs(BranchPickerPrimitive.Root, { hideWhenSingleBranch: true, className: cn("text-muted-foreground -ms-2 me-2 inline-flex items-center text-xs", className), ...rest, children: [_jsx(BranchPickerPrimitive.Previous, { render: _jsx(TooltipIconButton, { tooltip: "Previous" }), children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { className: "font-medium", children: [_jsx(BranchPickerPrimitive.Number, {}), " / ", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { render: _jsx(TooltipIconButton, { tooltip: "Next" }), children: _jsx(ChevronRightIcon, {}) })] }));
 };

package/dist/internal/assistant-ui/tool-fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-fallback.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-fallback.tsx"],"names":[],"mappings":"AAUA,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,WAAW,EAA0C,MAAM,0BAA0B,CAAC;AAQ/F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GAAG;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA6bF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,kCAAsB,CAAC;AA+CtD,QAAA,MAAM,YAAY,EAAE,4BAAqD,CAAC;AAI1E,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"tool-fallback.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-fallback.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,WAAW,EAA0C,MAAM,0BAA0B,CAAC;AAS/F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GAAG;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAwaF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,kCAAsB,CAAC;AA+CtD,QAAA,MAAM,YAAY,EAAE,4BAAqD,CAAC;AAI1E,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/internal/assistant-ui/tool-fallback.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, memo, useCallback, useContext, useRef, useState } from "react";
+import { createContext, memo, startTransition, useCallback, useContext, useRef, useState, } from "react";
 import { AlertCircleIcon, CheckIcon, ChevronDownIcon, CircleDotIcon, XCircleIcon, } from "lucide-react";
 import { useScrollLock, useToolCallElapsed, } from "@assistant-ui/react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible.js";
 import { cn } from "../../lib/utils.js";
+import { cssVariables } from "../../lib/css-variables.js";
 import { disclosureDuration, disclosureDurationMs } from "../../lib/motion.js";
 import { Button } from "../../components/button.js";
 import { useThreadLabels } from "./thread-labels.js";
@@ -22,11 +23,9 @@ function ToolFallbackRoot({ className, open: controlledOpen, onOpenChange: contr
         }
         controlledOnOpenChange?.(open);
     }, [lockScroll, isControlled, controlledOnOpenChange]);
-    return (_jsx(Collapsible, { ref: collapsibleRef, "data-slot": "tool-fallback-root", open: isOpen, onOpenChange: handleOpenChange, className: cn("aui-tool-fallback-root group/tool-fallback-root w-full", className), 
-        // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
-        style: {
+    return (_jsx(Collapsible, { ref: collapsibleRef, "data-slot": "tool-fallback-root", open: isOpen, onOpenChange: handleOpenChange, className: cn("group/tool-fallback-root w-full", className), style: cssVariables({
             "--animation-duration": disclosureDuration,
-        }, ...props, children: children }));
+        }), ...props, children: children }));
 }
 const statusIconMap = {
     running: CircleDotIcon,
@@ -48,7 +47,7 @@ function ToolFallbackDuration({ className, ...props }) {
     const elapsedMs = useToolCallElapsed();
     if (elapsedMs === undefined)
         return null;
-    return (_jsx("span", { "data-slot": "tool-fallback-duration", className: cn("aui-tool-fallback-duration text-muted-foreground text-xs tabular-nums", className), ...props, children: formatToolDuration(elapsedMs) }));
+    return (_jsx("span", { "data-slot": "tool-fallback-duration", className: cn("text-muted-foreground text-xs tabular-nums", className), ...props, children: formatToolDuration(elapsedMs) }));
 }
 function ToolFallbackTrigger({ toolName, status, className, ...props }) {
     const statusType = status?.type ?? "complete";
@@ -64,32 +63,31 @@ function ToolFallbackTrigger({ toolName, status, className, ...props }) {
             : statusType === "requires-action"
                 ? labels.waitingTool
                 : labels.usedTool;
-    return (_jsxs(CollapsibleTrigger, { "aria-busy": isRunning || undefined, "data-slot": "tool-fallback-trigger", className: cn("aui-tool-fallback-trigger nc-transition-paint group/trigger flex w-fit origin-left items-center gap-2 py-1.5 text-sm text-muted-foreground hover:text-foreground", className), ...props, children: [_jsx(Icon, { "data-slot": "tool-fallback-trigger-icon", className: cn("aui-tool-fallback-trigger-icon size-4 shrink-0", isCancelled && "text-muted-foreground") }), _jsx("span", { "data-slot": "tool-fallback-trigger-label", className: cn("aui-tool-fallback-trigger-label-wrapper relative inline-block text-start leading-none", isCancelled && "text-muted-foreground line-through"), children: _jsxs("span", { children: [label, ": ", _jsx("b", { children: toolName })] }) }), _jsx(ToolFallbackDuration, {}), _jsx(ChevronDownIcon, { "data-slot": "tool-fallback-trigger-chevron", className: cn("aui-tool-fallback-trigger-chevron size-4 shrink-0", "transition-transform duration-(--animation-duration) ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0") })] }));
+    return (_jsxs(CollapsibleTrigger, { "aria-busy": isRunning || undefined, "data-slot": "tool-fallback-trigger", className: cn("nc-transition-paint group/trigger flex w-fit origin-left items-center gap-2 py-1.5 text-sm text-muted-foreground hover:text-foreground", className), ...props, children: [_jsx(Icon, { "data-slot": "tool-fallback-trigger-icon", className: cn("size-4 shrink-0", isCancelled && "text-muted-foreground") }), _jsx("span", { "data-slot": "tool-fallback-trigger-label", className: cn("relative inline-block text-start leading-none", isCancelled && "text-muted-foreground line-through"), children: _jsxs("span", { children: [label, ": ", _jsx("b", { children: toolName })] }) }), _jsx(ToolFallbackDuration, {}), _jsx(ChevronDownIcon, { "data-slot": "tool-fallback-trigger-chevron", className: cn("size-4 shrink-0", "transition-transform duration-(--animation-duration) ease-(--nc-ease-out-strong) motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0") })] }));
 }
 function ToolFallbackContent({ className, children, ...props }) {
-    return (_jsx(CollapsibleContent, { "data-slot": "tool-fallback-content", className: cn("aui-tool-fallback-content relative overflow-hidden text-sm outline-none", "group/collapsible-content", "data-closed:pointer-events-none", className), ...props, children: _jsx("div", { className: cn("nc-transition-opacity flex flex-col gap-2 ps-6 pt-1 pb-2"), children: children }) }));
+    return (_jsx(CollapsibleContent, { "data-slot": "tool-fallback-content", className: cn("relative overflow-hidden text-sm outline-none", "group/collapsible-content", "data-closed:pointer-events-none", className), ...props, children: _jsx("div", { className: cn("nc-transition-opacity flex flex-col gap-2 ps-6 pt-1 pb-2"), children: children }) }));
 }
 function ToolFallbackArgs({ argsText, className, ...props }) {
     if (!argsText)
         return null;
-    return (_jsx("div", { "data-slot": "tool-fallback-args", className: cn("aui-tool-fallback-args", className), ...props, children: _jsx("pre", { className: "aui-tool-fallback-args-value bg-muted/50 text-foreground/90 rounded-md p-2.5 text-xs whitespace-pre-wrap", children: argsText }) }));
+    return (_jsx("div", { "data-slot": "tool-fallback-args", className: className, ...props, children: _jsx("pre", { className: "bg-muted/50 text-foreground/90 rounded-md p-2.5 text-xs whitespace-pre-wrap", children: argsText }) }));
 }
 function ToolFallbackResult({ result, className, ...props }) {
     if (result === undefined)
         return null;
-    return (_jsxs("div", { "data-slot": "tool-fallback-result", className: cn("aui-tool-fallback-result", className), ...props, children: [_jsx("p", { className: "aui-tool-fallback-result-header text-muted-foreground text-xs font-medium", children: "Result:" }), _jsx("pre", { className: "aui-tool-fallback-result-content bg-muted/50 text-foreground/90 mt-1 rounded-md p-2.5 text-xs whitespace-pre-wrap", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })] }));
+    return (_jsxs("div", { "data-slot": "tool-fallback-result", className: className, ...props, children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: "Result:" }), _jsx("pre", { className: "bg-muted/50 text-foreground/90 mt-1 rounded-md p-2.5 text-xs whitespace-pre-wrap", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })] }));
 }
 function ToolFallbackError({ status, className, ...props }) {
     if (status?.type !== "incomplete")
         return null;
     const error = status.error;
-    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- assistant-ui types a tool error as unknown; a string shows as is and anything else as JSON.
     const errorText = error ? (typeof error === "string" ? error : JSON.stringify(error)) : null;
     if (!errorText)
         return null;
     const isCancelled = status.reason === "cancelled";
     const headerText = isCancelled ? "Cancelled reason:" : "Error:";
-    return (_jsxs("div", { "data-slot": "tool-fallback-error", className: cn("aui-tool-fallback-error", className), ...props, children: [_jsx("p", { className: "aui-tool-fallback-error-header text-muted-foreground font-semibold", children: headerText }), _jsx("p", { className: "aui-tool-fallback-error-reason text-muted-foreground", children: errorText })] }));
+    return (_jsxs("div", { "data-slot": "tool-fallback-error", className: className, ...props, children: [_jsx("p", { className: "text-muted-foreground font-semibold", children: headerText }), _jsx("p", { className: "text-muted-foreground", children: errorText })] }));
 }
 const APPROVED_RESULT = "Approved by user";
 const DENIED_RESULT = "User denied tool execution";
@@ -105,7 +103,9 @@ function ToolFallbackApproval({ className, addResult, resume, interrupt, approva
     const [submitted, setSubmitted] = useState(false);
     const [confirmingId, setConfirmingId] = useState(null);
     const labels = useThreadLabels();
-    if (approval != null && (approval.approved !== undefined || approval.resolution !== undefined))
+    if (approval !== null &&
+        approval !== undefined &&
+        (approval.approved !== undefined || approval.resolution !== undefined))
         return null;
     // Custom (`_`-prefixed) kinds cannot be resolved to a boolean by the kit;
     // hosts using custom kinds render their own bar. A declared option list is
@@ -116,8 +116,13 @@ function ToolFallbackApproval({ className, addResult, resume, interrupt, approva
     const respond = (approved) => {
         if (submitted)
             return;
-        if (approval != null && approval.approved === undefined && respondToApproval) {
-            respondToApproval({ approved });
+        if (approval !== null &&
+            approval !== undefined &&
+            approval.approved === undefined &&
+            respondToApproval) {
+            startTransition(async () => {
+                await respondToApproval({ approved });
+            });
         }
         else if (interrupt) {
             resume?.({ approved });
@@ -130,7 +135,9 @@ function ToolFallbackApproval({ className, addResult, resume, interrupt, approva
     const respondWithOption = (option) => {
         if (submitted)
             return;
-        respondToApproval?.({ optionId: option.id });
+        startTransition(async () => {
+            await respondToApproval?.({ optionId: option.id });
+        });
         setSubmitted(true);
         setConfirmingId(null);
     };
@@ -142,19 +149,20 @@ function ToolFallbackApproval({ className, addResult, resume, interrupt, approva
             respondWithOption(option);
         }
     };
-    const confirming = confirmingId != null ? options?.find((o) => o.id === confirmingId) : undefined;
+    const confirming = confirmingId !== null && confirmingId !== undefined
+        ? options?.find((o) => o.id === confirmingId)
+        : undefined;
     if (confirming) {
-        // oxlint-disable-next-line anti-slop/no-runtime-typeof -- an approval option's confirm is a boolean or a details object; only typeof tells them apart.
         const confirmMeta = typeof confirming.confirm === "object" ? confirming.confirm : undefined;
         const confirmDescription = confirmMeta?.description ?? confirming.description;
-        return (_jsxs("div", { "data-slot": "tool-fallback-approval-confirm", className: cn("aui-tool-fallback-approval-confirm flex flex-col gap-2 pt-1", className), ...props, children: [_jsx("p", { className: "aui-tool-fallback-approval-confirm-title font-semibold", children: confirmMeta?.title ?? `${approvalOptionLabel(confirming)}?` }), confirmDescription && (_jsx("p", { className: "aui-tool-fallback-approval-confirm-description text-muted-foreground", children: confirmDescription })), confirming.grants && confirming.grants.length > 0 && (_jsx("ul", { className: "aui-tool-fallback-approval-confirm-grants flex flex-col gap-1", children: confirming.grants.map((grant) => (_jsx("li", { children: _jsx("code", { className: "aui-tool-fallback-approval-confirm-grant bg-muted rounded px-1.5 py-0.5 text-xs", children: grant }) }, grant))) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "sm", className: pressable, onClick: () => respondWithOption(confirming), disabled: submitted, children: approvalOptionLabel(confirming) }), _jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => setConfirmingId(null), disabled: submitted, children: "Back" })] })] }));
+        return (_jsxs("div", { "data-slot": "tool-fallback-approval-confirm", className: cn("flex flex-col gap-2 pt-1", className), ...props, children: [_jsx("p", { className: "font-semibold", children: confirmMeta?.title ?? `${approvalOptionLabel(confirming)}?` }), confirmDescription && _jsx("p", { className: "text-muted-foreground", children: confirmDescription }), confirming.grants && confirming.grants.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1", children: confirming.grants.map((grant) => (_jsx("li", { children: _jsx("code", { className: "bg-muted rounded px-1.5 py-0.5 text-xs", children: grant }) }, grant))) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "sm", className: pressable, onClick: () => respondWithOption(confirming), disabled: submitted, children: approvalOptionLabel(confirming) }), _jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => setConfirmingId(null), disabled: submitted, children: "Back" })] })] }));
     }
     if (declaredOptions && declaredOptions.length > 0) {
         const allowOptions = options?.filter((o) => isAllowKind(o.kind)) ?? [];
         const rejectOptions = options?.filter((o) => !isAllowKind(o.kind)) ?? [];
-        return (_jsxs("div", { "data-slot": "tool-fallback-approval", className: cn("aui-tool-fallback-approval flex flex-wrap items-center gap-2 pt-1", className), ...props, children: [[...allowOptions, ...rejectOptions].map((option) => (_jsx(Button, { size: "sm", variant: option === allowOptions[0] ? "default" : "outline", className: pressable, onClick: () => handleOption(option), disabled: submitted, children: approvalOptionLabel(option) }, option.id))), rejectOptions.length === 0 && (_jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => respond(false), disabled: submitted, children: labels.deny }))] }));
+        return (_jsxs("div", { "data-slot": "tool-fallback-approval", className: cn("flex flex-wrap items-center gap-2 pt-1", className), ...props, children: [[...allowOptions, ...rejectOptions].map((option) => (_jsx(Button, { size: "sm", variant: option === allowOptions[0] ? "default" : "outline", className: pressable, onClick: () => handleOption(option), disabled: submitted, children: approvalOptionLabel(option) }, option.id))), rejectOptions.length === 0 && (_jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => respond(false), disabled: submitted, children: labels.deny }))] }));
     }
-    return (_jsxs("div", { "data-slot": "tool-fallback-approval", className: cn("aui-tool-fallback-approval flex flex-wrap items-center gap-2 pt-1", className), ...props, children: [approval?.prompt ? (_jsx("p", { "data-slot": "tool-fallback-approval-prompt", className: "min-w-0 basis-full text-sm wrap-break-word", children: approval.prompt })) : null, _jsx(Button, { size: "sm", className: pressable, onClick: () => respond(true), disabled: submitted, children: labels.allow }), _jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => respond(false), disabled: submitted, children: labels.deny })] }));
+    return (_jsxs("div", { "data-slot": "tool-fallback-approval", className: cn("flex flex-wrap items-center gap-2 pt-1", className), ...props, children: [approval?.prompt ? (_jsx("p", { "data-slot": "tool-fallback-approval-prompt", className: "min-w-0 basis-full text-sm wrap-break-word", children: approval.prompt })) : null, _jsx(Button, { size: "sm", className: pressable, onClick: () => respond(true), disabled: submitted, children: labels.allow }), _jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => respond(false), disabled: submitted, children: labels.deny })] }));
 }
 /**
  * Whether a call shows its input and its result. A thread for people who are

package/dist/internal/assistant-ui/tool-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-group.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-group.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI/F,QAAA,MAAM,iBAAiB;;8EASrB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GACC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAmB,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAsCpB;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,+BAwCA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,+BAyBjD;AAED,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"tool-group.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-group.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK/F,QAAA,MAAM,iBAAiB;;8EASrB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GACC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAmB,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAmCpB;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,+BAwCA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,+BAyBjD;AAED,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/internal/assistant-ui/tool-group.js

@@ -6,8 +6,9 @@ import { cva } from "class-variance-authority";
 import { useScrollLock } from "@assistant-ui/react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible.js";
 import { cn } from "../../lib/utils.js";
+import { cssVariables } from "../../lib/css-variables.js";
 import { disclosureDuration, disclosureDurationMs } from "../../lib/motion.js";
-const toolGroupVariants = cva("aui-tool-group-root group/tool-group w-full", {
+const toolGroupVariants = cva("group/tool-group w-full", {
     variants: {
         variant: {
             outline: "rounded-md border py-3",
@@ -30,18 +31,16 @@ function ToolGroupRoot({ className, variant, open: controlledOpen, onOpenChange:
         }
         controlledOnOpenChange?.(open);
     }, [lockScroll, isControlled, controlledOnOpenChange]);
-    return (_jsx(Collapsible, { ref: collapsibleRef, "data-slot": "tool-group-root", "data-variant": variant ?? "outline", open: isOpen, onOpenChange: handleOpenChange, className: cn(toolGroupVariants({ variant }), "group/tool-group-root", className), 
-        // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
-        style: {
+    return (_jsx(Collapsible, { ref: collapsibleRef, "data-slot": "tool-group-root", "data-variant": variant ?? "outline", open: isOpen, onOpenChange: handleOpenChange, className: cn(toolGroupVariants({ variant }), "group/tool-group-root", className), style: cssVariables({
             "--animation-duration": disclosureDuration,
-        }, ...props, children: children }));
+        }), ...props, children: children }));
 }
 function ToolGroupTrigger({ count, active = false, className, ...props }) {
     // A group still running says so in its own label; nothing spins or shimmers.
     const label = `${count} tool ${count === 1 ? "call" : "calls"}${active ? ", running" : ""}`;
-    return (_jsxs(CollapsibleTrigger, { "aria-busy": active || undefined, "data-slot": "tool-group-trigger", className: cn("aui-tool-group-trigger nc-transition-paint group/trigger flex origin-left items-center gap-2 text-sm", "group-data-[variant=ghost]/tool-group-root:text-muted-foreground group-data-[variant=ghost]/tool-group-root:hover:text-foreground group-data-[variant=ghost]/tool-group-root:py-1.5", "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4", "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4", className), ...props, children: [_jsx("span", { "data-slot": "tool-group-trigger-label", className: cn("aui-tool-group-trigger-label-wrapper relative inline-block text-start leading-none font-medium", "group-data-[variant=ghost]/tool-group-root:font-normal", "group-data-[variant=outline]/tool-group-root:grow", "group-data-[variant=muted]/tool-group-root:grow"), children: _jsx("span", { className: "text-xs", children: label }) }), _jsx(ChevronDownIcon, { "data-slot": "tool-group-trigger-chevron", className: cn("aui-tool-group-trigger-chevron size-3 shrink-0", "transition-transform duration-(--animation-duration) ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0") })] }));
+    return (_jsxs(CollapsibleTrigger, { "aria-busy": active || undefined, "data-slot": "tool-group-trigger", className: cn("nc-transition-paint group/trigger flex origin-left items-center gap-2 text-sm", "group-data-[variant=ghost]/tool-group-root:text-muted-foreground group-data-[variant=ghost]/tool-group-root:hover:text-foreground group-data-[variant=ghost]/tool-group-root:py-1.5", "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4", "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4", className), ...props, children: [_jsx("span", { "data-slot": "tool-group-trigger-label", className: cn("relative inline-block text-start leading-none font-medium", "group-data-[variant=ghost]/tool-group-root:font-normal", "group-data-[variant=outline]/tool-group-root:grow", "group-data-[variant=muted]/tool-group-root:grow"), children: _jsx("span", { className: "text-xs", children: label }) }), _jsx(ChevronDownIcon, { "data-slot": "tool-group-trigger-chevron", className: cn("size-3 shrink-0", "transition-transform duration-(--animation-duration) ease-(--nc-ease-out-strong) motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0") })] }));
 }
 function ToolGroupContent({ className, children, ...props }) {
-    return (_jsx(CollapsibleContent, { "data-slot": "tool-group-content", className: cn("aui-tool-group-content relative overflow-hidden text-sm outline-none", "group/collapsible-content", "data-closed:pointer-events-none", className), ...props, children: _jsx("div", { className: cn("mt-2 flex flex-col gap-2", "group-data-[variant=ghost]/tool-group-root:mt-1 group-data-[variant=ghost]/tool-group-root:gap-1", "group-data-[variant=outline]/tool-group-root:mt-3 group-data-[variant=outline]/tool-group-root:border-t group-data-[variant=outline]/tool-group-root:px-4 group-data-[variant=outline]/tool-group-root:pt-3", "group-data-[variant=muted]/tool-group-root:mt-3 group-data-[variant=muted]/tool-group-root:border-t group-data-[variant=muted]/tool-group-root:px-4 group-data-[variant=muted]/tool-group-root:pt-3", "[&>*]:nc-transition-opacity"), children: children }) }));
+    return (_jsx(CollapsibleContent, { "data-slot": "tool-group-content", className: cn("relative overflow-hidden text-sm outline-none", "group/collapsible-content", "data-closed:pointer-events-none", className), ...props, children: _jsx("div", { className: cn("mt-2 flex flex-col gap-2", "group-data-[variant=ghost]/tool-group-root:mt-1 group-data-[variant=ghost]/tool-group-root:gap-1", "group-data-[variant=outline]/tool-group-root:mt-3 group-data-[variant=outline]/tool-group-root:border-t group-data-[variant=outline]/tool-group-root:px-4 group-data-[variant=outline]/tool-group-root:pt-3", "group-data-[variant=muted]/tool-group-root:mt-3 group-data-[variant=muted]/tool-group-root:border-t group-data-[variant=muted]/tool-group-root:px-4 group-data-[variant=muted]/tool-group-root:pt-3", "*:nc-transition-opacity"), children: children }) }));
 }
 export { ToolGroupRoot, ToolGroupTrigger, ToolGroupContent };

package/dist/internal/assistant-ui/tooltip-icon-button.js

@@ -5,6 +5,6 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../
 import { Button } from "../../components/button.js";
 import { cn } from "../../lib/utils.js";
 export const TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon", ...rest, "aria-label": tooltip, className: cn("aui-button-icon p-1", className), ref: ref }), children: children }), _jsx(TooltipContent, { side: side, children: tooltip })] }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon", ...rest, "aria-label": tooltip, className: cn("p-1", className), ref: ref }), children: children }), _jsx(TooltipContent, { side: side, children: tooltip })] }) }));
 });
 TooltipIconButton.displayName = "TooltipIconButton";

package/dist/internal/badge-frame.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "pink" | "purple" | "teal" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeSize = NonNullable<VariantProps<typeof badgeVariants>["size"]>;
+type BadgeFrameProps = Omit<useRender.ComponentProps<"span">, "onClick" | "tabIndex" | "role" | "aria-pressed" | "onKeyDown" | "onKeyUp"> & VariantProps<typeof badgeVariants> & {
+    icon?: ReactNode;
+};
+/** The pill `Badge` and `TrendBadge` both draw; only the package passes it content other than a word. */
+declare function BadgeFrame({ className, variant, size, icon, children, render, ...props }: BadgeFrameProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { BadgeFrame, type BadgeFrameProps, type BadgeSize };
+//# sourceMappingURL=badge-frame.d.ts.map

package/dist/internal/badge-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-frame.d.ts","sourceRoot":"","sources":["../../src/internal/badge-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;;8EAuBlB,CAAC;AAEF,KAAK,SAAS,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEzE,KAAK,eAAe,GAAG,IAAI,CACzB,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,EAChC,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,WAAW,GAAG,SAAS,CAC3E,GACC,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEJ,yGAAyG;AACzG,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAmB,EACnB,IAAW,EACX,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,eAAe,8FA2BjB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,CAAC"}

package/dist/internal/badge-frame.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+const badgeVariants = cva("group/badge inline-flex w-fit max-w-full shrink-0 items-center justify-center overflow-hidden rounded-full font-medium whitespace-nowrap tabular-nums transition-[background-color,box-shadow,color,opacity] duration-(--nc-duration-confirm) ease-(--nc-ease-out-strong)", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground",
+            secondary: "bg-secondary text-secondary-foreground",
+            outline: "bg-background text-foreground ring-1 ring-inset ring-border [a]:hover:bg-accent",
+            teal: "bg-category-teal text-category-teal-foreground",
+            purple: "bg-category-purple text-category-purple-foreground",
+            pink: "bg-category-pink text-category-pink-foreground",
+        },
+        size: {
+            sm: "h-5 gap-1 px-2 text-[11px]/5  tracking-[0.2px] has-data-[icon=inline-start]:pl-1.5 [&>[data-icon]>svg]:size-3",
+            md: "h-6 gap-1.25 px-3 text-xs/6  has-data-[icon=inline-start]:pl-2 [&>[data-icon]>svg]:size-3.5",
+            lg: "h-8 gap-1.5 px-3 text-sm/5  [&>[data-icon]>svg]:size-4",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md",
+    },
+});
+/** The pill `Badge` and `TrendBadge` both draw; only the package passes it content other than a word. */
+function BadgeFrame({ className, variant = "default", size = "md", icon, children, render, ...props }) {
+    return useRender({
+        defaultTagName: "span",
+        props: mergeProps({
+            className: cn(badgeVariants({ variant, size }), className),
+            children: icon ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "pointer-events-none inline-flex shrink-0", "data-icon": "inline-start", children: icon }), children] })) : (children),
+        }, props),
+        render,
+        state: {
+            slot: "badge",
+            "nc-ui": true,
+            variant,
+            size,
+        },
+    });
+}
+export { BadgeFrame };

package/dist/internal/button-classes.d.ts

@@ -0,0 +1,20 @@
+import { type VariantProps } from "class-variance-authority";
+declare const buttonClasses: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "brandGhost" | "brandSolid" | "destructive" | "warning" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "inline" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    shape?: "square" | "rounded" | "circle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonVariant = NonNullable<VariantProps<typeof buttonClasses>["variant"]>;
+export type ButtonSize = NonNullable<VariantProps<typeof buttonClasses>["size"]>;
+export type IconSize = Extract<ButtonSize, `icon${string}`>;
+export type TextSize = Exclude<ButtonSize, IconSize>;
+/**
+ * The button classes for an element that is not a `Button`, such as a calendar's
+ * day arrows. They pass through `cn` as `Button`'s do, so a variant's border,
+ * fill or text replaces the base one instead of losing to it in the stylesheet:
+ * unmerged, the base `border-transparent` hides every outline edge. A link
+ * drawn as a button is a `ButtonLink`.
+ */
+export declare function buttonVariants(props?: Parameters<typeof buttonClasses>[0]): string;
+export {};
+//# sourceMappingURL=button-classes.d.ts.map

package/dist/internal/button-classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-classes.d.ts","sourceRoot":"","sources":["../../src/internal/button-classes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AASlE,QAAA,MAAM,aAAa;;;;8EAiElB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AACvF,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AACjF,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,UAAU,EAAE,OAAO,MAAM,EAAE,CAAC,CAAC;AAC5D,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAErD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAElF"}

package/dist/internal/button-classes.js

@@ -0,0 +1,74 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+const heldNeutral = "disabled:border-border disabled:bg-muted disabled:text-muted-foreground aria-disabled:border-border aria-disabled:bg-muted aria-disabled:text-muted-foreground";
+const heldDim = "disabled:opacity-50 aria-disabled:not-aria-busy:opacity-50";
+const buttonClasses = cva("group/button inline-flex min-h-touch-target min-w-touch-target shrink-0 items-center justify-center rounded-sm border border-transparent bg-clip-padding text-button font-medium whitespace-nowrap transition-[background-color,border-color,color] duration-(--nc-duration-confirm) ease-(--nc-ease-out-strong) select-none disabled:pointer-events-none aria-disabled:pointer-events-none aria-invalid:border-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: [
+                "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-hover aria-expanded:bg-primary-hover",
+                heldNeutral,
+            ],
+            outline: [
+                "border-border bg-(--nc-field,var(--background)) text-foreground hover:bg-muted hover:text-foreground active:bg-muted aria-expanded:bg-muted aria-expanded:text-foreground",
+                heldNeutral,
+            ],
+            secondary: [
+                "border-border bg-secondary text-secondary-foreground hover:bg-accent active:bg-accent aria-expanded:bg-accent aria-expanded:text-accent-foreground",
+                heldNeutral,
+            ],
+            ghost: [
+                "hover:bg-muted hover:text-foreground active:bg-muted aria-expanded:bg-muted aria-expanded:text-foreground",
+                heldDim,
+            ],
+            brandGhost: [
+                "text-nc-identity-white hover:bg-nc-identity-white/10 hover:text-nc-identity-white aria-expanded:bg-nc-identity-white/10 aria-expanded:text-nc-identity-white",
+                heldDim,
+            ],
+            brandSolid: [
+                "bg-nc-identity-white text-nc-identity-ink hover:bg-nc-identity-white/90 hover:text-nc-identity-ink active:bg-nc-identity-white/90 active:text-nc-identity-ink",
+                heldDim,
+            ],
+            destructive: [
+                "bg-destructive text-destructive-foreground hover:brightness-90 active:brightness-90",
+                heldNeutral,
+            ],
+            warning: [
+                "bg-warning text-warning-foreground hover:brightness-90 active:brightness-90",
+                heldNeutral,
+            ],
+            link: ["text-(--nc-link) underline-offset-4 hover:underline", heldDim],
+        },
+        size: {
+            default: "h-control-height gap-0.75 px-button-padding-inline [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height [&_[data-icon]_svg:not([class*='size-'])]:size-3.5",
+            xs: "h-nadicode-control-height-xs gap-1 px-2 text-button-xs in-data-[slot=button-group]:rounded-sm has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-nadicode-control-height-sm gap-0.75 px-button-padding-inline-sm in-data-[slot=button-group]:rounded-sm [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-nadicode-control-height-lg gap-0.75 rounded-md px-button-padding-inline-lg text-button-lg",
+            inline: "h-auto gap-0.75 p-0 [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height [&_[data-icon]_svg:not([class*='size-'])]:size-3.5",
+            icon: "size-control-height",
+            "icon-xs": "size-nadicode-control-height-xs rounded-xs-plus in-data-[slot=button-group]:rounded-sm",
+            "icon-sm": "size-nadicode-control-height-sm in-data-[slot=button-group]:rounded-sm",
+            "icon-lg": "size-nadicode-control-height-lg rounded-md",
+        },
+        shape: {
+            square: "",
+            rounded: "rounded-full px-3",
+            circle: "rounded-full",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+        shape: "square",
+    },
+});
+/**
+ * The button classes for an element that is not a `Button`, such as a calendar's
+ * day arrows. They pass through `cn` as `Button`'s do, so a variant's border,
+ * fill or text replaces the base one instead of losing to it in the stylesheet:
+ * unmerged, the base `border-transparent` hides every outline edge. A link
+ * drawn as a button is a `ButtonLink`.
+ */
+export function buttonVariants(props) {
+    return cn(buttonClasses(props));
+}

package/dist/internal/catalog-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"catalog-list.d.ts","sourceRoot":"","sources":["../../src/internal/catalog-list.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,4BAA4B,CAAC;AASpF,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,CAAC;AAqG5B,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,YAAgB,EAChB,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;CACrC,+BAqBA;AAED,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;IAAE,OAAO,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,+BAoB7F;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,cAAc,EAAE,GAAG,OAAO,CAE3E"}
+{"version":3,"file":"catalog-list.d.ts","sourceRoot":"","sources":["../../src/internal/catalog-list.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,4BAA4B,CAAC;AASpF,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,CAAC;AAqG5B,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,YAAgB,EAChB,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;CACrC,+BAsBA;AAED,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;IAAE,OAAO,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,+BAoB7F;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,cAAc,EAAE,GAAG,OAAO,CAE3E"}

package/dist/internal/catalog-list.js

@@ -19,7 +19,7 @@ function EntryName({ link, name }) {
         children: name,
         className: textLinkVariants({ kind: "plain" }),
     };
-    return link.renderLink ? link.renderLink(anchor) : _jsx("a", { ...anchor });
+    return link.renderLink ? link.renderLink(anchor) : _jsx("a", { ...anchor, children: name });
 }
 function EntryAdd({ add }) {
     const { added, ...command } = add;
@@ -41,9 +41,13 @@ function TitledSection({ columns, entries, headingLevel, title, }) {
     return (_jsxs("section", { "aria-labelledby": headingId, className: "grid min-w-0 gap-3", children: [_jsx(Heading, { className: "text-heading-sm text-foreground", id: headingId, children: title }), _jsx(EntryList, { columns: columns, entries: entries })] }));
 }
 export function CatalogList({ columns, headingLevel = 3, sections, }) {
-    return (_jsx("div", { className: "grid min-w-0 gap-8", children: sections
-            .filter((section) => section.entries.length > 0)
-            .map(({ id, title, entries }) => title ? (_jsx(TitledSection, { columns: columns, entries: entries, headingLevel: headingLevel, id: id, title: title }, id)) : (_jsx(EntryList, { columns: columns, entries: entries }, id))) }));
+    return (_jsx("div", { className: "grid min-w-0 gap-8", children: sections.flatMap(({ id, title, entries }) => {
+            if (entries.length === 0)
+                return [];
+            return [
+                title ? (_jsx(TitledSection, { columns: columns, entries: entries, headingLevel: headingLevel, id: id, title: title }, id)) : (_jsx(EntryList, { columns: columns, entries: entries }, id)),
+            ];
+        }) }));
 }
 export function CatalogSkeleton({ columns, label }) {
     return (_jsx(SkeletonRegion, { "aria-label": label, busy: true, className: cn("grid gap-3", columns === 2 && "md:grid-cols-2"), role: "status", children: Array.from({ length: columns * 3 }, (_, index) => (_jsxs("div", { "aria-hidden": "true", className: ENTRY_FRAME, children: [_jsx(Skeleton, { className: "size-10 shrink-0" }), _jsxs("div", { className: "grid flex-1 gap-1.5 pt-0.5", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3.5 w-full" })] }), _jsx(Skeleton, { className: "h-control-height w-16 shrink-0" })] }, index))) }));

package/dist/internal/collection-rail.js

@@ -8,11 +8,11 @@ import { PageCommandButton } from "../components/page-actions.js";
 import { Skeleton, SkeletonRegion } from "../components/skeleton.js";
 import { StatusBadge } from "../components/status-badge.js";
 import { cn } from "../lib/utils.js";
-function defaultLink(props) {
-    return _jsx("a", { ...props });
+function defaultLink({ children, ...props }) {
+    return _jsx("a", { ...props, children: children });
 }
 function RailItem({ item, renderLink, }) {
-    const body = (_jsxs(_Fragment, { children: [item.mark ? _jsx(IdentityMark, { ...item.mark, size: 24 }) : null, _jsxs("span", { className: "grid min-w-0 flex-1", children: [_jsx("span", { className: "truncate font-medium text-foreground", title: item.title, children: item.title }), item.detail ? (_jsx("span", { className: "line-clamp-2 text-body-sm break-words text-muted-foreground", children: item.detail })) : null] }), item.status ? _jsx(StatusBadge, { label: item.status.label, tone: item.status.tone }) : null, item.value === undefined ? null : (_jsx("span", { className: "shrink-0 text-right text-foreground tabular-nums", children: item.value }))] }));
+    const body = (_jsxs(_Fragment, { children: [item.mark ? _jsx(IdentityMark, { ...item.mark, size: 24 }) : null, _jsxs("span", { className: "grid min-w-0 flex-1", children: [_jsx("span", { className: "truncate font-medium text-foreground", title: item.title, children: item.title }), item.detail ? (_jsx("span", { className: "line-clamp-2 text-body-sm wrap-break-word text-muted-foreground", children: item.detail })) : null] }), item.status ? _jsx(StatusBadge, { label: item.status.label, tone: item.status.tone }) : null, item.value === undefined ? null : (_jsx("span", { className: "shrink-0 text-right text-foreground tabular-nums", children: item.value }))] }));
     const row = "flex min-h-9 min-w-0 items-center gap-3 px-4 py-2 text-sm";
     return (_jsx("li", { "data-slot": "collection-rail-item", children: item.href ? (renderLink({
             href: item.href,

package/dist/internal/form-drawer-frame.d.ts

@@ -0,0 +1,10 @@
+import type { FormSurfaceProps } from "../components/form-drawer.js";
+export type FormDrawerFrameProps = FormSurfaceProps & ({
+    job: "catalog";
+} | {
+    job: "steps";
+    progress: string;
+});
+/** The right-side sheet that `FormDrawer` and `CatalogDrawer` both draw. */
+export declare function FormDrawerFrame(props: FormDrawerFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=form-drawer-frame.d.ts.map

package/dist/internal/form-drawer-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-drawer-frame.d.ts","sourceRoot":"","sources":["../../src/internal/form-drawer-frame.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GACjD,CAAC;IAAE,GAAG,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE5D,4EAA4E;AAC5E,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BA0C1D"}