@moldable-ai/ui 0.2.29 → 0.2.32

package/dist/components/chat/chat-panel.js

@@ -10,6 +10,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip.js';
 import { ChatInput, } from './chat-input.js';
 import { CompactingMessage, ThinkingMessage, getChatMessageRenderKey, } from './chat-message.js';
+import { ChatImageLightboxProvider } from './chat-image-lightbox.js';
 import { MessageRow, computeIsThinking, } from './chat-messages.js';
 import { ConversationHistory, ConversationSidebar, } from './conversation-history.js';
 import { ModelEffortSelector, } from './model-effort-selector.js';
@@ -113,8 +114,11 @@ function MessageNavigationTrail({ items }) {
                                         }), "data-message-navigation-row": true, className: "flex h-2.5 w-9 shrink-0 cursor-pointer items-center outline-none", children: _jsx("span", { className: "flex h-0.5 w-[30px] items-center", children: _jsx("span", { "data-message-navigation-marker": true, className: cn('bg-muted-foreground rounded-pill h-0.5 w-[26px] origin-left opacity-40', isCurrent && 'bg-foreground opacity-60') }) }) }) }), _jsx(TooltipContent, { side: "right", className: "max-w-72", children: anchor.label })] }, anchor.id));
                     }) }) }) }) }));
 }
-function ChatMessageViewport({ items, renderItem, toolProgress, onApprovalResponse, currentConversationId, scrollToBottomSignal, isBusy, hasOlderMessages = false, isLoadingOlderMessages = false, onLoadOlderMessages, showNavigationTrail = false, scrollAreaClassName, contentClassName, scrollButtonClassName, }) {
-    const viewportRef = useRef(null);
+function ChatMessageViewport({ currentConversationId, ...props }) {
+    return (_jsx(MessageScrollerProvider, { autoScroll: true, defaultScrollPosition: "end", scrollPreviousItemPeek: 64, children: _jsx(ChatImageLightboxProvider, { children: _jsx(ChatMessageViewportBody, { ...props }) }) }, currentConversationId ?? 'new-conversation'));
+}
+function ChatMessageViewportBody({ items, renderItem, toolProgress, onApprovalResponse, scrollToBottomSignal, isBusy, hasOlderMessages = false, isLoadingOlderMessages = false, onLoadOlderMessages, showNavigationTrail = false, scrollAreaClassName, contentClassName, scrollButtonClassName, }) {
+    const { beginHistoryLoad, finishHistoryLoad } = useMessageScroller();
     const loadingOlderRef = useRef(false);
     const handleViewportScroll = useCallback((event) => {
         const viewport = event.currentTarget;
@@ -126,27 +130,27 @@ function ChatMessageViewport({ items, renderItem, toolProgress, onApprovalRespon
             return;
         }
         loadingOlderRef.current = true;
-        // A prepended page is position-preserved by the message scroller
-        // itself, synchronously in the same mutation pass — compensating here
-        // after a paint produced a visible two-step jump. Only a reset (the
-        // cursor raced a history rewrite) still needs an explicit landing.
+        beginHistoryLoad();
         void onLoadOlderMessages()
             .then((outcome) => {
-            if (outcome !== 'reset')
-                return;
-            window.requestAnimationFrame(() => {
-                if (viewportRef.current !== viewport)
-                    return;
-                viewport.scrollTop = viewport.scrollHeight;
-            });
+            finishHistoryLoad(outcome !== 'unchanged');
+        })
+            .catch(() => {
+            finishHistoryLoad(false);
         })
             .finally(() => {
             window.requestAnimationFrame(() => {
                 loadingOlderRef.current = false;
             });
         });
-    }, [hasOlderMessages, isLoadingOlderMessages, onLoadOlderMessages]);
-    return (_jsx(MessageScrollerProvider, { autoScroll: true, defaultScrollPosition: "end", scrollPreviousItemPeek: 64, children: _jsxs(MessageScroller, { className: "relative min-h-0 min-w-0 flex-1", children: [_jsx(MessageScrollerCommandSync, { signal: scrollToBottomSignal }), _jsx(MessageScrollerViewport, { ref: viewportRef, className: scrollAreaClassName, "data-message-scroll-fade": true, "data-has-older-messages": hasOlderMessages ? 'true' : 'false', onScroll: handleViewportScroll, children: _jsx(MessageScrollerContent, { "aria-busy": isBusy || isLoadingOlderMessages, className: contentClassName, children: _jsx(ToolProgressProvider, { value: toolProgress, children: _jsx(ToolApprovalProvider, { onApprovalResponse: onApprovalResponse ?? null, children: items.map((item) => (_jsx(MessageScrollerItem, { messageId: item.key, scrollAnchor: item.kind === 'message' && item.message.role === 'user', children: renderItem(item) }, item.key))) }) }) }) }), items.length > 0 && (_jsx(MessageScrollerButton, { className: scrollButtonClassName })), showNavigationTrail && _jsx(MessageNavigationTrail, { items: items })] }) }, currentConversationId ?? 'new-conversation'));
+    }, [
+        beginHistoryLoad,
+        finishHistoryLoad,
+        hasOlderMessages,
+        isLoadingOlderMessages,
+        onLoadOlderMessages,
+    ]);
+    return (_jsxs(MessageScroller, { className: "relative min-h-0 min-w-0 flex-1", children: [_jsx(MessageScrollerCommandSync, { signal: scrollToBottomSignal }), _jsx(MessageScrollerViewport, { className: scrollAreaClassName, "data-message-scroll-fade": true, "data-has-older-messages": hasOlderMessages ? 'true' : 'false', onScroll: handleViewportScroll, children: _jsx(MessageScrollerContent, { "aria-busy": isBusy || isLoadingOlderMessages, className: contentClassName, children: _jsx(ToolProgressProvider, { value: toolProgress, children: _jsx(ToolApprovalProvider, { onApprovalResponse: onApprovalResponse ?? null, children: items.map((item) => (_jsx(MessageScrollerItem, { messageId: item.key, scrollAnchor: item.kind === 'message' && item.message.role === 'user', children: renderItem(item) }, item.key))) }) }) }) }), items.length > 0 && (_jsx(MessageScrollerButton, { className: scrollButtonClassName })), showNavigationTrail && _jsx(MessageNavigationTrail, { items: items })] }));
 }
 function clampPercent(value) {
     if (!Number.isFinite(value))
@@ -181,7 +185,7 @@ function ContextWindowIndicator({ usage, planUsage, }) {
             : 'var(--muted-foreground)';
     return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-pill flex size-8 cursor-pointer items-center justify-center bg-transparent p-0 focus-visible:outline-none focus-visible:ring-1", "aria-label": `Context window ${usedPercent}% full`, children: _jsx("span", { className: "rounded-pill relative size-4", style: {
                             background: `conic-gradient(${ringColor} ${usedPercent}%, color-mix(in oklch, var(--muted-foreground) 22%, transparent) 0)`,
-                        }, children: _jsx("span", { className: "bg-background rounded-pill absolute inset-[3px]" }) }) }) }), _jsxs(PopoverContent, { align: "end", side: "top", sideOffset: 8, className: "w-80 p-3 shadow-lg", children: [_jsxs("div", { className: "text-ui-body flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-muted-foreground", children: "Context window" }), _jsxs("span", { children: [formatTokenCount(usage.usedTokens), " /", ' ', formatTokenCount(usage.maxTokens), " (", usedPercent, "%)"] })] }), _jsx("div", { className: "bg-muted rounded-pill mt-2 h-1.5 overflow-hidden", children: _jsx("div", { className: "bg-primary rounded-pill h-full", style: { width: `${usedPercent}%` } }) }), usage.compactsAutomatically && (_jsx("div", { className: "text-muted-foreground text-11 mt-2 leading-4", children: "Moldable automatically compacts its context" })), planUsage && planUsage.windows.length > 0 && (_jsxs("div", { className: "border-border mt-3 flex flex-col gap-3 border-t pt-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "text-muted-foreground text-ui-caption", children: ["Plan usage limits", planUsage.planLabel ? ` · ${planUsage.planLabel}` : ''] }), planUsage.accountLabel && (_jsx("div", { className: "text-ui-caption mt-0.5 truncate font-medium", children: planUsage.accountLabel }))] }), planUsage.windows.map((window) => {
+                        }, children: _jsx("span", { className: "bg-background rounded-pill absolute inset-[3px]" }) }) }) }), _jsxs(PopoverContent, { align: "end", side: "top", sideOffset: 8, className: "w-80 p-3 shadow-lg", children: [_jsxs("div", { className: "text-ui-body flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-muted-foreground", children: "Context window" }), _jsxs("span", { className: "text-ui-caption", children: [formatTokenCount(usage.usedTokens), " /", ' ', formatTokenCount(usage.maxTokens), " (", usedPercent, "%)"] })] }), _jsx("div", { className: "bg-muted rounded-pill mt-2 h-1.5 overflow-hidden", children: _jsx("div", { className: "bg-primary rounded-pill h-full", style: { width: `${usedPercent}%` } }) }), usage.compactsAutomatically && (_jsx("div", { className: "text-muted-foreground text-11 mt-2 leading-4", children: "Moldable automatically compacts its context" })), planUsage && planUsage.windows.length > 0 && (_jsxs("div", { className: "border-border mt-3 flex flex-col gap-3 border-t pt-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "text-muted-foreground text-ui-caption", children: ["Plan usage limits", planUsage.planLabel ? ` · ${planUsage.planLabel}` : ''] }), planUsage.accountLabel && (_jsx("div", { className: "text-ui-caption mt-0.5 truncate font-medium", children: planUsage.accountLabel }))] }), planUsage.windows.map((window) => {
                                 const reset = formatUsageReset(window.resetAt);
                                 const percent = clampPercent(window.usedPercent);
                                 return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-ui-caption flex items-center justify-between gap-3", children: [_jsx("span", { children: window.label }), _jsxs("span", { className: "text-muted-foreground", children: [reset ? `Resets ${reset} · ` : '', percent, "%"] })] }), _jsx("div", { className: "bg-muted rounded-pill h-1.5 overflow-hidden", children: _jsx("div", { className: percent >= 90
@@ -217,7 +221,7 @@ function QueuedMessageRow({ message, isResponding, onRetryQueuedMessage, onSteer
 /**
  * Floating chat panel with model selector
  */
-export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChange, onSubmit, onStop, onNewChat, modelProviders, modelEffortPresets, selectedModel, selectedReasoningEffort, onModelEffortChange, conversations, currentConversationId, currentAppId, hasMoreConversations = false, isLoadingMoreConversations = false, onLoadMoreConversations, onResolveMessageContent, scrollToBottomSignal = 0, hasOlderMessages = false, isLoadingOlderMessages = false, onLoadOlderMessages, onSelectConversation, onArchiveConversation, onArchiveConversationGroup, placeholder = 'Ask anything...', welcomeMessage, isExpanded, onExpandedChange, isFullScreen = false, onFullScreenChange, isMinimized = false, onMinimizedChange, className, error, onRetryError, missingApiKey, authIssue, onConnectChatGPT, onAdvancedSetup, toolProgress = {}, onApprovalResponse, isEditingApp = true, onEditingAppChange, showEditingAppToggle = false, checkpoints, restoringMessageId, onRestoreCheckpoint, imageAttachments = [], onRemoveImageAttachment, isImageDropActive = false, queuedMessages = [], onRemoveQueuedMessage, onRetryQueuedMessage, onSteerQueuedMessage, onReorderQueuedMessages, onEditQueuedMessage, slashCommands, onSlashCommandSelect, isCompacting = false, compactedHistoryStartIndex, contextUsage, planUsage, }) {
+export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChange, onSubmit, onStop, onNewChat, modelProviders, modelEffortPresets, selectedModel, selectedReasoningEffort, onModelEffortChange, conversations, currentConversationId, currentAppId, groupConversationHistory = false, hasMoreConversations = false, isLoadingMoreConversations = false, onLoadMoreConversations, onResolveMessageContent, scrollToBottomSignal = 0, hasOlderMessages = false, isLoadingOlderMessages = false, onLoadOlderMessages, onSelectConversation, onArchiveConversation, onArchiveConversationGroup, placeholder = 'Ask anything...', welcomeMessage, isExpanded, onExpandedChange, isFullScreen = false, onFullScreenChange, isMinimized = false, onMinimizedChange, className, error, onRetryError, missingApiKey, authIssue, onConnectChatGPT, onAdvancedSetup, toolProgress = {}, onApprovalResponse, isEditingApp = true, onEditingAppChange, showEditingAppToggle = false, checkpoints, restoringMessageId, onRestoreCheckpoint, imageAttachments = [], onRemoveImageAttachment, isImageDropActive = false, queuedMessages = [], onRemoveQueuedMessage, onRetryQueuedMessage, onSteerQueuedMessage, onReorderQueuedMessages, onEditQueuedMessage, slashCommands, onSlashCommandSelect, isCompacting = false, compactedHistoryStartIndex, contextUsage, planUsage, }) {
     const inputRef = useRef(null);
     const fullScreenTriggerRef = useRef(null);
     const [isConnectingChatGPT, setIsConnectingChatGPT] = useState(false);
@@ -317,7 +321,7 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
                             : 'Not editing app (click to enable)' }) })] }) })) : null;
     const composerStartControls = (_jsxs(_Fragment, { children: [conversations &&
                 (conversations.length > 0 || onNewChat) &&
-                onSelectConversation && (_jsx(ConversationHistory, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, onSelect: onSelectConversation, onArchive: onArchiveConversation, onArchiveGroup: onArchiveConversationGroup, onNewChat: handleNewChat, newChatDisabled: false, disabled: false, dropdownAlign: "start", dropdownSide: "top", tooltipSide: "top", hasMoreConversations: hasMoreConversations, isLoadingMoreConversations: isLoadingMoreConversations, onLoadMoreConversations: onLoadMoreConversations })), editingAppControl] }));
+                onSelectConversation && (_jsx(ConversationHistory, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, groupByScope: groupConversationHistory, onSelect: onSelectConversation, onArchive: onArchiveConversation, onArchiveGroup: onArchiveConversationGroup, onNewChat: handleNewChat, newChatDisabled: false, disabled: false, dropdownAlign: "start", dropdownSide: "top", tooltipSide: "top", hasMoreConversations: hasMoreConversations, isLoadingMoreConversations: isLoadingMoreConversations, onLoadMoreConversations: onLoadMoreConversations })), editingAppControl] }));
     // Keyboard shortcut: Cmd+Shift+O for new chat
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -439,40 +443,50 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
                     window.requestAnimationFrame(() => {
                         fullScreenTriggerRef.current?.focus();
                     });
-                }, size: "full", className: "rounded-container flex gap-0 overflow-hidden border-0 p-0", children: [_jsx("div", { "data-tauri-drag-region": true, className: "absolute inset-x-0 top-0 z-20 h-9", "aria-hidden": "true" }), isImageDropActive && (_jsxs("div", { className: "bg-background/90 border-primary/50 text-foreground absolute inset-0 z-50 flex flex-col items-center justify-center gap-2 rounded-[inherit] border-2 border-dashed backdrop-blur-sm", children: [_jsx(ImageIcon, { className: "text-primary size-7" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-ui-body font-medium", children: "Drop images to attach" }), _jsx("p", { className: "text-muted-foreground text-ui-caption", children: "They stay on disk and are read when sent" })] })] })), _jsxs("aside", { className: "border-border bg-muted/50 rounded-r-container relative z-10 flex w-[280px] shrink-0 flex-col overflow-hidden border-r px-3 pb-4 pt-11", children: [_jsxs("button", { type: "button", onClick: () => onFullScreenChange?.(false), className: "text-muted-foreground hover:text-foreground rounded-container text-ui-body mb-4 flex h-8 cursor-pointer items-center gap-2 px-2 transition-colors", children: [_jsx(Minimize2, { className: "size-4" }), "Back to app"] }), _jsx(ConversationSidebar, { conversations: conversations ?? [], currentConversationId: currentConversationId, currentAppId: currentAppId, onSelect: onSelectConversation ?? (() => undefined), onArchive: onArchiveConversation, onArchiveGroup: onArchiveConversationGroup, onNewChat: handleNewChat, newChatDisabled: false, hideScrollbar: true, disabled: false, hasMoreConversations: hasMoreConversations, isLoadingMoreConversations: isLoadingMoreConversations, onLoadMoreConversations: onLoadMoreConversations, className: "min-h-0 flex-1" })] }), _jsxs("section", { className: "relative flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "border-border flex h-14 shrink-0 items-center justify-between border-b px-5", children: [_jsx(DialogTitle, { className: "text-ui-body truncate font-medium", children: selectedConversation?.title ?? 'New conversation' }), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => onFullScreenChange?.(false), "aria-label": "Exit full screen", className: "text-muted-foreground hover:text-foreground relative z-30 cursor-pointer", children: _jsx(Minimize2, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "Exit full screen" })] }) })] }), _jsx(ChatMessageViewport, { items: listItems, renderItem: renderVirtualItem, toolProgress: toolProgress, onApprovalResponse: onApprovalResponse, currentConversationId: currentConversationId, scrollToBottomSignal: scrollToBottomSignal, isBusy: isResponding, hasOlderMessages: hasOlderMessages, isLoadingOlderMessages: isLoadingOlderMessages, onLoadOlderMessages: onLoadOlderMessages, showNavigationTrail: true, contentClassName: "mx-auto w-full min-w-0 max-w-3xl overflow-hidden px-6 py-6", scrollButtonClassName: "absolute bottom-3 left-1/2 z-20 size-8 -translate-x-1/2 cursor-pointer rounded-pill shadow-lg" }), authPromptCopy && (_jsx("div", { className: "mx-auto w-full max-w-3xl shrink-0 px-6 pb-2", children: _jsx(ChatAuthPrompt, { copy: authPromptCopy, isConnecting: isConnectingChatGPT, onConnect: onConnectChatGPT ? handleConnectChatGPT : undefined, onAdvancedSetup: onAdvancedSetup }) })), _jsxs("div", { className: "mx-auto w-full max-w-3xl shrink-0 px-6 pb-2", children: [queuedMessages.length > 0 && (_jsxs("div", { className: "border-border bg-muted/30 rounded-container mb-2 border p-3", children: [_jsxs("div", { className: "text-muted-foreground text-ui-caption mb-2 flex items-center gap-2 font-medium", children: [_jsx(ListPlus, { className: "size-3.5" }), _jsx("span", { children: "Queued follow-ups" })] }), _jsx(DndContext, { sensors: queueSensors, collisionDetection: closestCenter, onDragEnd: handleQueuedDragEnd, children: _jsx(SortableContext, { items: queuedMessageIds, strategy: verticalListSortingStrategy, children: _jsx("div", { className: "space-y-1.5", children: queuedMessages.map((message) => (_jsx(QueuedMessageRow, { message: message, isResponding: isResponding, onRetryQueuedMessage: onRetryQueuedMessage, onSteerQueuedMessage: onSteerQueuedMessage, onRemoveQueuedMessage: onRemoveQueuedMessage, onEditQueuedMessage: handleEditQueuedMessage }, message.id))) }) }) })] })), _jsx("div", { className: "bg-background overflow-hidden rounded-[24px] shadow-[0_8px_40px_-12px_rgba(0,0,0,0.2)]", children: _jsx(ChatInput, { input: input, onInputChange: onInputChange, onSubmit: handleSubmit, isResponding: isResponding, placeholder: placeholder, inputRef: inputRef, onStop: onStop, imageAttachments: imageAttachments, onRemoveImageAttachment: onRemoveImageAttachment, footerStartControls: editingAppControl, footerControls: composerControls, submitDisabled: submitDisabled, slashCommands: slashCommands, onSlashCommandSelect: onSlashCommandSelect }) })] })] })] }) }));
+                }, size: "full", className: "rounded-container flex gap-0 overflow-hidden border-0 p-0", children: [_jsx("div", { "data-tauri-drag-region": true, className: "absolute inset-x-0 top-0 z-20 h-9", "aria-hidden": "true" }), isImageDropActive && (_jsxs("div", { className: "bg-background/90 border-primary/50 text-foreground absolute inset-0 z-50 flex flex-col items-center justify-center gap-2 rounded-[inherit] border-2 border-dashed backdrop-blur-sm", children: [_jsx(ImageIcon, { className: "text-primary size-7" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-ui-body font-medium", children: "Drop images to attach" }), _jsx("p", { className: "text-muted-foreground text-ui-caption", children: "They stay on disk and are read when sent" })] })] })), _jsxs("aside", { className: "border-border bg-muted/50 rounded-r-container relative z-10 flex w-[280px] shrink-0 flex-col overflow-hidden border-r px-3 pb-4 pt-11", children: [_jsxs("button", { type: "button", onClick: () => onFullScreenChange?.(false), className: "text-muted-foreground hover:text-foreground rounded-container text-ui-body mb-4 flex h-8 cursor-pointer items-center gap-2 px-2 transition-colors", children: [_jsx(Minimize2, { className: "size-4" }), "Back to app"] }), _jsx(ConversationSidebar, { conversations: conversations ?? [], currentConversationId: currentConversationId, currentAppId: currentAppId, groupByScope: groupConversationHistory, onSelect: onSelectConversation ?? (() => undefined), onArchive: onArchiveConversation, onArchiveGroup: onArchiveConversationGroup, onNewChat: handleNewChat, newChatDisabled: false, hideScrollbar: true, disabled: false, hasMoreConversations: hasMoreConversations, isLoadingMoreConversations: isLoadingMoreConversations, onLoadMoreConversations: onLoadMoreConversations, className: "min-h-0 flex-1" })] }), _jsxs("section", { className: "relative flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "border-border flex h-14 shrink-0 items-center justify-between border-b px-5", children: [_jsx(DialogTitle, { className: "text-ui-body truncate font-medium", children: selectedConversation?.title ?? 'New conversation' }), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => onFullScreenChange?.(false), "aria-label": "Exit full screen", className: "text-muted-foreground hover:text-foreground relative z-30 cursor-pointer", children: _jsx(Minimize2, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "Exit full screen" })] }) })] }), _jsx(ChatMessageViewport, { items: listItems, renderItem: renderVirtualItem, toolProgress: toolProgress, onApprovalResponse: onApprovalResponse, currentConversationId: currentConversationId, scrollToBottomSignal: scrollToBottomSignal, isBusy: isResponding, hasOlderMessages: hasOlderMessages, isLoadingOlderMessages: isLoadingOlderMessages, onLoadOlderMessages: onLoadOlderMessages, showNavigationTrail: true, contentClassName: "mx-auto w-full min-w-0 max-w-3xl overflow-hidden px-6 py-6", scrollButtonClassName: "absolute bottom-3 left-1/2 z-20 size-8 -translate-x-1/2 cursor-pointer rounded-pill shadow-lg" }), authPromptCopy && (_jsx("div", { className: "mx-auto w-full max-w-3xl shrink-0 px-6 pb-2", children: _jsx(ChatAuthPrompt, { copy: authPromptCopy, isConnecting: isConnectingChatGPT, onConnect: onConnectChatGPT ? handleConnectChatGPT : undefined, onAdvancedSetup: onAdvancedSetup }) })), _jsxs("div", { className: "mx-auto w-full max-w-3xl shrink-0 px-6 pb-2", children: [queuedMessages.length > 0 && (_jsxs("div", { className: "border-border bg-muted/30 rounded-container mb-2 border p-3", children: [_jsxs("div", { className: "text-muted-foreground text-ui-caption mb-2 flex items-center gap-2 font-medium", children: [_jsx(ListPlus, { className: "size-3.5" }), _jsx("span", { children: "Queued follow-ups" })] }), _jsx(DndContext, { sensors: queueSensors, collisionDetection: closestCenter, onDragEnd: handleQueuedDragEnd, children: _jsx(SortableContext, { items: queuedMessageIds, strategy: verticalListSortingStrategy, children: _jsx("div", { className: "space-y-1.5", children: queuedMessages.map((message) => (_jsx(QueuedMessageRow, { message: message, isResponding: isResponding, onRetryQueuedMessage: onRetryQueuedMessage, onSteerQueuedMessage: onSteerQueuedMessage, onRemoveQueuedMessage: onRemoveQueuedMessage, onEditQueuedMessage: handleEditQueuedMessage }, message.id))) }) }) })] })), _jsx("div", { className: "bg-background overflow-hidden rounded-[24px] shadow-[0_8px_40px_-12px_rgba(0,0,0,0.2)]", children: _jsx(ChatInput, { input: input, onInputChange: onInputChange, onSubmit: handleSubmit, isResponding: isResponding, placeholder: placeholder, inputRef: inputRef, onStop: onStop, imageAttachments: imageAttachments, onRemoveImageAttachment: onRemoveImageAttachment, footerStartControls: editingAppControl, footerControls: composerControls, submitDisabled: submitDisabled, slashCommands: slashCommands, onSlashCommandSelect: onSlashCommandSelect }) })] })] })] }) }));
     }
     return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isExpanded && !isMinimized && (_jsx(motion.div, { "data-moldable-chat-backdrop": true, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: "fixed inset-0 z-40 bg-black/20", onClick: () => onExpandedChange(false) })) }), _jsx(motion.div, { "data-moldable-chat-panel": true, initial: false, animate: {
                     width: isExpanded ? 'min(90vw, 640px)' : '400px',
                     y: isMinimized ? 'calc(100% + 24px)' : 0,
                     opacity: isMinimized ? 0 : 1,
-                }, transition: { type: 'tween', duration: 0.25, ease: 'easeOut' }, className: cn('pointer-events-none fixed bottom-6 left-[calc(50%+var(--sidebar-width,0px)/2)] z-50 flex -translate-x-1/2 justify-center', isMinimized && 'pointer-events-none', className), children: _jsxs("div", { "data-chat-drop-target": true, className: cn('bg-background/80 pointer-events-auto relative w-full shadow-[0_8px_40px_-12px_rgba(0,0,0,0.15)]', isExpanded
-                        ? 'bg-background'
-                        : 'bg-background/80 supports-[backdrop-filter]:backdrop-blur-xl', 'rounded-[28px]', isExpanded ? 'overflow-hidden' : 'overflow-visible'), children: [!isExpanded && (_jsx("div", { className: "pointer-events-none absolute inset-0 z-0 rounded-[inherit]", style: {
-                                background: 'linear-gradient(134deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 50%, transparent 55%)',
-                            } })), isImageDropActive && (_jsxs("div", { className: "bg-background/90 border-primary/50 text-foreground absolute inset-0 z-[70] flex flex-col items-center justify-center gap-2 rounded-[inherit] border-2 border-dashed backdrop-blur-sm", children: [_jsx(ImageIcon, { className: "text-primary size-7" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-ui-body font-medium", children: "Drop images to attach" }), _jsx("p", { className: "text-muted-foreground text-ui-caption", children: "They stay on disk and are read when sent" })] })] })), _jsx("div", { className: "pointer-events-none absolute inset-0 z-50 rounded-[inherit]", style: {
+                }, transition: { type: 'tween', duration: 0.25, ease: 'easeOut' }, className: cn('pointer-events-none fixed bottom-6 left-[calc(50%+var(--sidebar-width,0px)/2)] z-50 flex -translate-x-1/2 justify-center', isMinimized && 'pointer-events-none', className), children: _jsxs("div", { "data-chat-drop-target": true, className: cn('bg-background/80 pointer-events-auto relative isolate w-full transition-[background-color,border-radius,box-shadow] duration-200 ease-out', isExpanded
+                        ? 'bg-background rounded-[28px] shadow-[0_8px_40px_-12px_rgba(0,0,0,0.15)]'
+                        : 'bg-background/80 rounded-[36px] supports-[backdrop-filter]:backdrop-blur-xl', isExpanded ? 'overflow-hidden' : 'overflow-visible'), children: [_jsx(motion.div, { initial: false, animate: { opacity: isExpanded ? 0 : 1 }, transition: {
+                                duration: isExpanded ? 0.08 : 0.12,
+                                delay: isExpanded ? 0 : 0.18,
+                                ease: 'easeOut',
+                            }, className: "pointer-events-none absolute inset-0 z-0 rounded-[inherit]", style: {
+                                background: 'linear-gradient(135deg, color-mix(in oklch, var(--foreground) 9%, transparent) 0%, color-mix(in oklch, var(--foreground) 2%, transparent) 42%, transparent 58%)',
+                            } }), isImageDropActive && (_jsxs("div", { className: "bg-background/90 border-primary/50 text-foreground absolute inset-0 z-[70] flex flex-col items-center justify-center gap-2 rounded-[inherit] border-2 border-dashed backdrop-blur-sm", children: [_jsx(ImageIcon, { className: "text-primary size-7" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-ui-body font-medium", children: "Drop images to attach" }), _jsx("p", { className: "text-muted-foreground text-ui-caption", children: "They stay on disk and are read when sent" })] })] })), _jsx("div", { className: "pointer-events-none absolute inset-0 z-[49] rounded-[inherit]", style: {
+                                padding: '1px',
+                                background: 'linear-gradient(135deg, color-mix(in oklch, var(--foreground) 20%, transparent), color-mix(in oklch, var(--border) 65%, transparent) 48%, color-mix(in oklch, var(--foreground) 12%, transparent))',
+                                mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                                WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                                maskComposite: 'exclude',
+                                WebkitMaskComposite: 'xor',
+                            } }), _jsx(motion.div, { "data-moldable-chat-edge-treatment": true, initial: false, animate: { opacity: isExpanded ? 0 : 1 }, transition: {
+                                duration: isExpanded ? 0.08 : 0.12,
+                                delay: isExpanded ? 0 : 0.18,
+                                ease: 'easeOut',
+                            }, className: "pointer-events-none absolute inset-0 z-50 rounded-[inherit]", style: {
                                 padding: '1px',
-                                background: 'linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.25) 100%)',
+                                background: 'conic-gradient(from 205deg at 50% 50%, color-mix(in oklch, var(--foreground) 16%, transparent) 0deg, color-mix(in oklch, var(--border) 72%, transparent) 72deg, color-mix(in oklch, var(--primary) 18%, transparent) 148deg, color-mix(in oklch, var(--foreground) 30%, transparent) 226deg, color-mix(in oklch, var(--border) 68%, transparent) 304deg, color-mix(in oklch, var(--foreground) 16%, transparent) 360deg)',
                                 mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
                                 WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
                                 maskComposite: 'exclude',
                                 WebkitMaskComposite: 'xor',
-                            } }), !isExpanded && (_jsx(motion.div, { className: "rounded-4xl pointer-events-none absolute inset-0 z-0", animate: {
-                                boxShadow: [
-                                    '0 0 0px 0px color-mix(in oklch, var(--primary) 0%, #ff8800 00%)',
-                                    '0 0 20px 0px color-mix(in oklch, var(--primary) 20%, #ff8800 30%)',
-                                    '0 0 30px 2px color-mix(in oklch, var(--primary) 0%, #ff8800 00%)',
-                                ],
-                            }, transition: {
-                                duration: 4,
-                                repeat: Infinity,
-                                repeatDelay: 5,
-                                ease: [0.4, 0, 0.2, 1],
-                            } })), _jsxs("div", { className: "relative z-10 overflow-hidden rounded-[inherit]", children: [_jsxs(motion.div, { initial: false, animate: {
+                            } }), _jsx(motion.div, { "data-moldable-chat-edge-depth": true, initial: false, animate: { opacity: isExpanded ? 0 : 1 }, transition: {
+                                duration: isExpanded ? 0.08 : 0.12,
+                                delay: isExpanded ? 0 : 0.18,
+                                ease: 'easeOut',
+                            }, className: "pointer-events-none absolute inset-0 z-40 rounded-[inherit]", style: {
+                                boxShadow: 'inset 0 1px 0 color-mix(in oklch, var(--foreground) 9%, transparent), inset 0 -1px 0 color-mix(in oklch, var(--background) 72%, transparent), 0 16px 38px -26px color-mix(in oklch, var(--foreground) 52%, transparent), 0 0 24px -17px color-mix(in oklch, var(--primary) 42%, transparent)',
+                            } }), _jsxs("div", { className: "relative z-10 overflow-hidden rounded-[inherit]", children: [_jsxs(motion.div, { initial: false, animate: {
                                         height: isExpanded ? 'min(60vh, 480px)' : '0px',
                                         opacity: isExpanded ? 1 : 0,
-                                    }, transition: { type: 'tween', duration: 0.2, ease: 'easeOut' }, className: "flex flex-col overflow-hidden", style: { pointerEvents: isExpanded ? 'auto' : 'none' }, children: [isExpanded && !isMinimized && (_jsxs("div", { className: "absolute right-2 top-2 z-20 grid grid-cols-1 gap-0.5", "data-moldable-chat-panel-controls": true, role: "toolbar", "aria-label": "Chat view controls", "aria-orientation": "vertical", children: [onFullScreenChange && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { ref: fullScreenTriggerRef, "data-moldable-chat-enter-fullscreen": true, variant: "ghost", size: "icon-sm", onClick: () => onFullScreenChange(true), "aria-label": "Enter full screen", className: "text-muted-foreground hover:text-foreground cursor-pointer", children: _jsx(Maximize2, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: "Full screen" })] }) })), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleMinimize, className: "text-muted-foreground hover:text-foreground cursor-pointer", children: _jsx(ChevronDown, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "Minimize" }) })] }) })] })), _jsx(ChatMessageViewport, { items: listItems, renderItem: renderVirtualItem, toolProgress: toolProgress, onApprovalResponse: onApprovalResponse, currentConversationId: currentConversationId, scrollToBottomSignal: scrollToBottomSignal, isBusy: isResponding, hasOlderMessages: hasOlderMessages, isLoadingOlderMessages: isLoadingOlderMessages, onLoadOlderMessages: onLoadOlderMessages, scrollAreaClassName: "px-2", contentClassName: "w-full min-w-0 max-w-full overflow-hidden py-4 pr-12", scrollButtonClassName: "absolute bottom-3 left-auto right-4 z-20 size-8 translate-x-0 cursor-pointer rounded-pill shadow-lg" }), authPromptCopy && (_jsx("div", { className: "shrink-0 px-4 pb-2", children: _jsx(ChatAuthPrompt, { copy: authPromptCopy, isConnecting: isConnectingChatGPT, onConnect: onConnectChatGPT ? handleConnectChatGPT : undefined, onAdvancedSetup: onAdvancedSetup }) }))] }), _jsxs("div", { className: "relative z-10", onClick: () => {
+                                    }, transition: { type: 'tween', duration: 0.2, ease: 'easeOut' }, className: "flex flex-col overflow-hidden", style: { pointerEvents: isExpanded ? 'auto' : 'none' }, children: [isExpanded && !isMinimized && (_jsxs("div", { className: "absolute right-4 top-3 z-20 grid grid-cols-1 gap-1", "data-moldable-chat-panel-controls": true, role: "toolbar", "aria-label": "Chat view controls", "aria-orientation": "vertical", children: [onFullScreenChange && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { ref: fullScreenTriggerRef, "data-moldable-chat-enter-fullscreen": true, variant: "ghost", size: "icon-xl", onClick: () => onFullScreenChange(true), "aria-label": "Enter full screen", className: "text-muted-foreground hover:text-foreground cursor-pointer", children: _jsx(Maximize2, { className: "size-5" }) }) }), _jsx(TooltipContent, { side: "bottom", children: "Full screen" })] }) })), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xl", onClick: handleMinimize, className: "text-muted-foreground hover:text-foreground cursor-pointer", children: _jsx(ChevronDown, { className: "size-5" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "Minimize" }) })] }) })] })), _jsx(ChatMessageViewport, { items: listItems, renderItem: renderVirtualItem, toolProgress: toolProgress, onApprovalResponse: onApprovalResponse, currentConversationId: currentConversationId, scrollToBottomSignal: scrollToBottomSignal, isBusy: isResponding, hasOlderMessages: hasOlderMessages, isLoadingOlderMessages: isLoadingOlderMessages, onLoadOlderMessages: onLoadOlderMessages, scrollAreaClassName: "px-2", contentClassName: "w-full min-w-0 max-w-full overflow-hidden py-4 pr-12", scrollButtonClassName: "absolute bottom-3 left-auto right-4 z-20 size-8 translate-x-0 cursor-pointer rounded-pill shadow-lg" }), authPromptCopy && (_jsx("div", { className: "shrink-0 px-4 pb-2", children: _jsx(ChatAuthPrompt, { copy: authPromptCopy, isConnecting: isConnectingChatGPT, onConnect: onConnectChatGPT ? handleConnectChatGPT : undefined, onAdvancedSetup: onAdvancedSetup }) }))] }), _jsxs("div", { className: "relative z-10", onClick: () => {
                                         if (!isExpanded) {
                                             onExpandedChange(true);
                                         }
-                                    }, children: [queuedMessages.length > 0 && (_jsxs("div", { className: "border-border/70 bg-background/95 border-t px-4 py-2", children: [_jsxs("div", { className: "text-muted-foreground text-ui-caption mb-2 flex items-center gap-2 font-medium", children: [_jsx(ListPlus, { className: "size-3.5" }), _jsx("span", { children: "Queued follow-ups" })] }), _jsx(DndContext, { sensors: queueSensors, collisionDetection: closestCenter, onDragEnd: handleQueuedDragEnd, children: _jsx(SortableContext, { items: queuedMessageIds, strategy: verticalListSortingStrategy, children: _jsx("div", { className: "space-y-1.5", children: queuedMessages.map((message) => (_jsx(QueuedMessageRow, { message: message, isResponding: isResponding, onRetryQueuedMessage: onRetryQueuedMessage, onSteerQueuedMessage: onSteerQueuedMessage, onRemoveQueuedMessage: onRemoveQueuedMessage, onEditQueuedMessage: handleEditQueuedMessage }, message.id))) }) }) })] })), _jsx(ChatInput, { input: input, onInputChange: onInputChange, onSubmit: handleSubmit, isResponding: isResponding, placeholder: placeholder, inputRef: inputRef, onStop: onStop, compact: !isExpanded, imageAttachments: imageAttachments, onRemoveImageAttachment: onRemoveImageAttachment, footerStartControls: isExpanded ? composerStartControls : null, footerControls: isExpanded ? composerControls : null, submitDisabled: submitDisabled, slashCommands: slashCommands, onSlashCommandSelect: onSlashCommandSelect })] })] })] }) })] }));
+                                    }, children: [queuedMessages.length > 0 && (_jsxs("div", { className: "border-border/70 bg-background/95 border-t px-4 py-2", children: [_jsxs("div", { className: "text-muted-foreground text-ui-caption mb-2 flex items-center gap-2 font-medium", children: [_jsx(ListPlus, { className: "size-3.5" }), _jsx("span", { children: "Queued follow-ups" })] }), _jsx(DndContext, { sensors: queueSensors, collisionDetection: closestCenter, onDragEnd: handleQueuedDragEnd, children: _jsx(SortableContext, { items: queuedMessageIds, strategy: verticalListSortingStrategy, children: _jsx("div", { className: "space-y-1.5", children: queuedMessages.map((message) => (_jsx(QueuedMessageRow, { message: message, isResponding: isResponding, onRetryQueuedMessage: onRetryQueuedMessage, onSteerQueuedMessage: onSteerQueuedMessage, onRemoveQueuedMessage: onRemoveQueuedMessage, onEditQueuedMessage: handleEditQueuedMessage }, message.id))) }) }) })] })), _jsx(ChatInput, { input: input, onInputChange: onInputChange, onSubmit: handleSubmit, isResponding: isResponding, placeholder: placeholder, inputRef: inputRef, onStop: onStop, compact: !isExpanded, surfaceBorderRadius: isExpanded ? 24 : undefined, imageAttachments: imageAttachments, onRemoveImageAttachment: onRemoveImageAttachment, footerStartControls: isExpanded ? composerStartControls : null, footerControls: isExpanded ? composerControls : null, submitDisabled: submitDisabled, slashCommands: slashCommands, onSlashCommandSelect: onSlashCommandSelect })] })] })] }) })] }));
 }

package/dist/components/chat/conversation-history.d.ts

@@ -26,6 +26,8 @@ interface ConversationListProps {
     conversations: ConversationMeta[];
     currentConversationId?: string | null;
     currentAppId?: string | null;
+    /** Opts into app/scope disclosure groups for unified conversation surfaces. */
+    groupByScope?: boolean;
     onSelect: (id: string) => void;
     onArchive?: (id: string) => void;
     onArchiveGroup?: (group: ConversationGroup) => void;
@@ -51,7 +53,7 @@ interface ConversationSidebarProps extends ConversationListProps {
     onLoadMoreConversations?: () => void | Promise<unknown>;
 }
 export declare function groupConversations(conversations: ConversationMeta[], currentAppId?: string | null): ConversationGroup[];
-export declare function ConversationSidebar({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled, hideScrollbar, hasMoreConversations, isLoadingMoreConversations, onLoadMoreConversations, disabled, className, }: ConversationSidebarProps): import("react/jsx-runtime").JSX.Element;
-export declare function ConversationHistory({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled, disabled, className, dropdownAlign, dropdownSide, tooltipSide, hasMoreConversations, isLoadingMoreConversations, onLoadMoreConversations, }: ConversationHistoryProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConversationSidebar({ conversations, currentConversationId, currentAppId, groupByScope, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled, hideScrollbar, hasMoreConversations, isLoadingMoreConversations, onLoadMoreConversations, disabled, className, }: ConversationSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConversationHistory({ conversations, currentConversationId, currentAppId, groupByScope, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled, disabled, className, dropdownAlign, dropdownSide, tooltipSide, hasMoreConversations, isLoadingMoreConversations, onLoadMoreConversations, }: ConversationHistoryProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=conversation-history.d.ts.map

package/dist/components/chat/conversation-history.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-history.d.ts","sourceRoot":"","sources":["../../../src/components/chat/conversation-history.tsx"],"names":[],"mappings":"AAiCA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,aAAa,EAAE,gBAAgB,EAAE,CAAA;CAClC;AAOD,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,GAAG,IAAI,EACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GACtB,MAAM,CAIR;AAED,wBAAgB,6BAA6B,CAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI,IAAI,MAAM,CAIhB;AAED,UAAU,qBAAqB;IAC7B,aAAa,EAAE,gBAAgB,EAAE,CAAA;IACjC,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,UAAU,wBAAyB,SAAQ,qBAAqB;IAC9D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAC1C,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC,uBAAuB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;CACxD;AAED,UAAU,wBAAyB,SAAQ,qBAAqB;IAC9D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC,uBAAuB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;CACxD;AAED,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,gBAAgB,EAAE,EACjC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,GAC3B,iBAAiB,EAAE,CA8CrB;AA2MD,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,qBAAqB,EACrB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,cAAc,EACd,SAAS,EACT,eAAuB,EACvB,aAAqB,EACrB,oBAA4B,EAC5B,0BAAkC,EAClC,uBAAuB,EACvB,QAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,2CAuH1B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,qBAAqB,EACrB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,cAAc,EACd,SAAS,EACT,eAAuB,EACvB,QAAgB,EAChB,SAAS,EACT,aAAuB,EACvB,YAAuB,EACvB,WAAsB,EACtB,oBAA4B,EAC5B,0BAAkC,EAClC,uBAAuB,GACxB,EAAE,wBAAwB,kDAkG1B"}
+{"version":3,"file":"conversation-history.d.ts","sourceRoot":"","sources":["../../../src/components/chat/conversation-history.tsx"],"names":[],"mappings":"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"}

package/dist/components/chat/conversation-history.js

@@ -69,18 +69,28 @@ function AppScopeIcon({ icon, isChats, }) {
     if (isChats)
         return _jsx(MessageCircle, { className: "size-4" });
     if (isConversationIconImageSource(icon)) {
-        return (_jsx("img", { src: icon, alt: "", className: "rounded-control size-4 object-cover" }));
+        return _jsx("img", { src: icon, alt: "", className: "size-4 rounded object-cover" });
     }
     if (icon)
-        return _jsx("span", { className: "text-ui-body leading-none", children: icon });
+        return _jsx("span", { className: "text-sm leading-none", children: icon });
     return _jsx(Folder, { className: "size-4" });
 }
-function ConversationList({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, disabled = false, className, }) {
+function ConversationRows({ conversations, currentConversationId, onSelect, onArchive, disabled, }) {
+    return conversations.map((conversation) => (_jsxs("li", { "data-conversation-id": conversation.id, className: cn('group/conversation relative flex min-w-0 items-center rounded-lg', conversation.id === currentConversationId && 'bg-accent'), children: [_jsx("button", { type: "button", disabled: disabled, onClick: () => onSelect(conversation.id), "aria-current": conversation.id === currentConversationId ? 'page' : undefined, className: "min-w-0 flex-1 cursor-pointer truncate rounded-lg py-1.5 pl-3 pr-8 text-left text-sm disabled:cursor-default", children: conversation.title }), conversation.isActive && (_jsx(LoaderCircle, { className: "text-muted-foreground absolute right-2 size-3.5 animate-spin", "aria-label": "Conversation is working" })), onArchive && !conversation.isActive && (_jsx("button", { type: "button", onClick: (event) => {
+                    event.stopPropagation();
+                    onArchive(conversation.id);
+                }, disabled: disabled, className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute right-1 flex size-7 cursor-pointer items-center justify-center rounded-md opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-default group-focus-within/conversation:opacity-100 group-hover/conversation:opacity-100", "aria-label": `Archive ${conversation.title}`, children: _jsx(Archive, { className: "size-3.5" }) }))] }, conversation.id)));
+}
+function ConversationList({ conversations, currentConversationId, currentAppId, groupByScope = false, onSelect, onArchive, onArchiveGroup, disabled = false, className, }) {
     const groups = useMemo(() => groupConversations(conversations, currentAppId), [conversations, currentAppId]);
     const [collapsedGroups, setCollapsedGroups] = useState(() => new Set());
     const [expandedGroups, setExpandedGroups] = useState(() => new Set());
     const [groupPendingArchive, setGroupPendingArchive] = useState(null);
     const listIdPrefix = useId();
+    const flatConversations = useMemo(() => [...conversations].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt)), [conversations]);
+    if (!groupByScope) {
+        return (_jsx("nav", { "aria-label": "Conversations", className: className, children: _jsx("ul", { className: "space-y-0.5", children: _jsx(ConversationRows, { conversations: flatConversations, currentConversationId: currentConversationId, onSelect: onSelect, onArchive: onArchive, disabled: disabled }) }) }));
+    }
     return (_jsxs("nav", { "aria-label": "Conversations", className: cn('space-y-1', className), children: [groups.map((group) => {
                 const isCollapsed = collapsedGroups.has(group.id);
                 const isShowingAll = expandedGroups.has(group.id);
@@ -96,19 +106,14 @@ function ConversationList({ conversations, currentConversationId, currentAppId,
                                         else
                                             next.add(group.id);
                                         return next;
-                                    }), className: "text-foreground hover:bg-accent/60 rounded-container text-ui-body flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-2 px-2 pr-9 text-left font-medium transition-colors", children: [_jsx(ChevronDown, { className: cn('text-muted-foreground size-3.5 shrink-0 transition-transform', isCollapsed && '-rotate-90') }), _jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center", children: _jsx(AppScopeIcon, { icon: group.icon, isChats: group.id === CHATS_GROUP_ID }) }), _jsx("span", { className: "truncate", children: group.label })] }), onArchiveGroup && (_jsx("button", { type: "button", onClick: () => setGroupPendingArchive(group), className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-control absolute right-1 flex size-7 cursor-pointer items-center justify-center opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 group-focus-within/conversation-scope:opacity-100 group-hover/conversation-scope:opacity-100", "aria-label": `Archive all chats in ${group.label}`, children: _jsx(Archive, { className: "size-3.5" }) }))] }), !isCollapsed && (_jsxs("ul", { id: listId, className: "ml-5 space-y-0.5 py-0.5", children: [visibleConversations.map((conversation) => (_jsxs("li", { "data-conversation-id": conversation.id, className: cn('group/conversation rounded-container relative flex min-w-0 items-center', conversation.id === currentConversationId && 'bg-accent'), children: [_jsx("button", { type: "button", disabled: disabled, onClick: () => onSelect(conversation.id), "aria-current": conversation.id === currentConversationId
-                                                ? 'page'
-                                                : undefined, className: "rounded-container text-ui-body min-w-0 flex-1 cursor-pointer truncate py-1.5 pl-3 pr-8 text-left disabled:cursor-default", children: conversation.title }), conversation.isActive && (_jsx(LoaderCircle, { className: "text-muted-foreground absolute right-2 size-3.5 animate-spin", "aria-label": "Conversation is working" })), onArchive && !conversation.isActive && (_jsx("button", { type: "button", onClick: (event) => {
-                                                event.stopPropagation();
-                                                onArchive(conversation.id);
-                                            }, disabled: disabled, className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-control absolute right-1 flex size-7 cursor-pointer items-center justify-center opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 disabled:cursor-default group-focus-within/conversation:opacity-100 group-hover/conversation:opacity-100", "aria-label": `Archive ${conversation.title}`, children: _jsx(Archive, { className: "size-3.5" }) }))] }, conversation.id))), hasMoreConversations && (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => setExpandedGroups((current) => {
+                                    }), className: "text-foreground hover:bg-accent/60 flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-lg px-2 pr-9 text-left text-sm font-medium transition-colors", children: [_jsx(ChevronDown, { className: cn('text-muted-foreground size-3.5 shrink-0 transition-transform', isCollapsed && '-rotate-90') }), _jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center", children: _jsx(AppScopeIcon, { icon: group.icon, isChats: group.id === CHATS_GROUP_ID }) }), _jsx("span", { className: "truncate", children: group.label })] }), onArchiveGroup && (_jsx("button", { type: "button", onClick: () => setGroupPendingArchive(group), className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute right-1 flex size-7 cursor-pointer items-center justify-center rounded-md opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 group-focus-within/conversation-scope:opacity-100 group-hover/conversation-scope:opacity-100", "aria-label": `Archive all chats in ${group.label}`, children: _jsx(Archive, { className: "size-3.5" }) }))] }), !isCollapsed && (_jsxs("ul", { id: listId, className: "ml-5 space-y-0.5 py-0.5", children: [_jsx(ConversationRows, { conversations: visibleConversations, currentConversationId: currentConversationId, onSelect: onSelect, onArchive: onArchive, disabled: disabled }), hasMoreConversations && (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => setExpandedGroups((current) => {
                                             const next = new Set(current);
                                             if (next.has(group.id))
                                                 next.delete(group.id);
                                             else
                                                 next.add(group.id);
                                             return next;
-                                        }), className: "text-muted-foreground hover:bg-accent/60 hover:text-foreground rounded-container text-ui-caption flex h-7 w-full cursor-pointer items-center px-3 text-left transition-colors", "aria-label": `${isShowingAll ? 'Show fewer' : 'Show all'} ${group.label} conversations`, children: isShowingAll ? 'Show less' : 'Show all' }) }))] }))] }, group.id));
+                                        }), className: "text-muted-foreground hover:bg-accent/60 hover:text-foreground flex h-7 w-full cursor-pointer items-center rounded-lg px-3 text-left text-xs transition-colors", "aria-label": `${isShowingAll ? 'Show fewer' : 'Show all'} ${group.label} conversations`, children: isShowingAll ? 'Show less' : 'Show all' }) }))] }))] }, group.id));
             }), _jsx(AlertDialog, { open: groupPendingArchive !== null, onOpenChange: (open) => {
                     if (!open)
                         setGroupPendingArchive(null);
@@ -119,7 +124,7 @@ function ConversationList({ conversations, currentConversationId, currentAppId,
                                         setGroupPendingArchive(null);
                                     }, children: "Archive all" })] })] }) })] }));
 }
-export function ConversationSidebar({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled = false, hideScrollbar = false, hasMoreConversations = false, isLoadingMoreConversations = false, onLoadMoreConversations, disabled = false, className, }) {
+export function ConversationSidebar({ conversations, currentConversationId, currentAppId, groupByScope = false, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled = false, hideScrollbar = false, hasMoreConversations = false, isLoadingMoreConversations = false, onLoadMoreConversations, disabled = false, className, }) {
     const scrollContainerRef = useRef(null);
     const [scrollFadeEdges, setScrollFadeEdges] = useState({
         top: false,
@@ -172,16 +177,16 @@ export function ConversationSidebar({ conversations, currentConversationId, curr
                     '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden'), "data-conversation-scroll-fade": true, "data-scroll-fade-top": scrollFadeEdges.top || undefined, "data-scroll-fade-bottom": scrollFadeEdges.bottom || undefined, onScroll: (event) => handleScroll(event.currentTarget), style: {
                     maskImage: scrollMask,
                     WebkitMaskImage: scrollMask,
-                }, children: [_jsx(ConversationList, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, onSelect: onSelect, onArchive: onArchive, onArchiveGroup: hasMoreConversations ? undefined : onArchiveGroup, disabled: disabled }), hasMoreConversations && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isLoadingMoreConversations, onClick: () => void onLoadMoreConversations?.(), className: "text-muted-foreground mt-1 w-full cursor-pointer", children: [isLoadingMoreConversations && (_jsx(LoaderCircle, { className: "size-3.5 animate-spin" })), "Load older conversations"] }))] })] }));
+                }, children: [_jsx(ConversationList, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, groupByScope: groupByScope, onSelect: onSelect, onArchive: onArchive, onArchiveGroup: hasMoreConversations ? undefined : onArchiveGroup, disabled: disabled }), hasMoreConversations && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isLoadingMoreConversations, onClick: () => void onLoadMoreConversations?.(), className: "text-muted-foreground mt-1 w-full cursor-pointer", children: [isLoadingMoreConversations && (_jsx(LoaderCircle, { className: "size-3.5 animate-spin" })), "Load older conversations"] }))] })] }));
 }
-export function ConversationHistory({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled = false, disabled = false, className, dropdownAlign = 'start', dropdownSide = 'bottom', tooltipSide = 'bottom', hasMoreConversations = false, isLoadingMoreConversations = false, onLoadMoreConversations, }) {
+export function ConversationHistory({ conversations, currentConversationId, currentAppId, groupByScope = false, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled = false, disabled = false, className, dropdownAlign = 'start', dropdownSide = 'bottom', tooltipSide = 'bottom', hasMoreConversations = false, isLoadingMoreConversations = false, onLoadMoreConversations, }) {
     const [isOpen, setIsOpen] = useState(false);
     if (conversations.length === 0 && !onNewChat)
         return null;
     return (_jsx(TooltipProvider, { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground cursor-pointer', className), "aria-label": "Conversations", children: _jsx(MessageCircle, { className: "size-4" }) }) }) }), _jsx(TooltipContent, { side: tooltipSide, children: "Conversations" })] }), _jsxs(PopoverContent, { align: dropdownAlign, side: dropdownSide, className: "w-72 p-2", children: [onNewChat && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => {
                                 onNewChat();
                                 setIsOpen(false);
-                            }, disabled: newChatDisabled, title: "New conversation (Cmd+Shift+O)", className: "mb-1 flex w-full cursor-pointer items-center justify-start gap-2", children: [_jsx(Plus, { className: "size-4" }), _jsx("span", { children: "New conversation" }), _jsx("span", { className: "text-muted-foreground text-ui-caption ml-auto", children: "\u2318\u21E7O" })] })), _jsxs("div", { className: "max-h-80 overflow-y-auto", onScroll: (event) => {
+                            }, disabled: newChatDisabled, title: "New conversation (Cmd+Shift+O)", className: "mb-1 flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg text-sm [&_[data-slot=button-content]]:w-full", children: [_jsx(Plus, { className: "size-4" }), _jsx("span", { children: "New conversation" }), _jsx("span", { className: "text-muted-foreground ml-auto text-xs", children: "\u2318\u21E7O" })] })), _jsxs("div", { className: "max-h-80 overflow-y-auto", onScroll: (event) => {
                                 const element = event.currentTarget;
                                 if (hasMoreConversations &&
                                     !isLoadingMoreConversations &&
@@ -191,7 +196,7 @@ export function ConversationHistory({ conversations, currentConversationId, curr
                                         120) {
                                     void onLoadMoreConversations?.();
                                 }
-                            }, children: [_jsx(ConversationList, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, onSelect: (id) => {
+                            }, children: [_jsx(ConversationList, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, groupByScope: groupByScope, onSelect: (id) => {
                                         onSelect(id);
                                         setIsOpen(false);
                                     }, onArchive: onArchive, onArchiveGroup: hasMoreConversations ? undefined : onArchiveGroup, disabled: disabled }), hasMoreConversations && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isLoadingMoreConversations, onClick: () => void onLoadMoreConversations?.(), className: "text-muted-foreground mt-1 w-full cursor-pointer", children: [isLoadingMoreConversations && (_jsx(LoaderCircle, { className: "size-3.5 animate-spin" })), "Load older conversations"] }))] })] })] }) }));

package/dist/components/ui/alert.d.ts

@@ -3,7 +3,7 @@ import { type IconButtonProps } from './icon-button.js';
 import { type VariantProps } from 'class-variance-authority';
 declare const alertVariants: (props?: ({
     tone?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
-    density?: "compact" | "default" | null | undefined;
+    density?: "default" | "compact" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type AlertTone = NonNullable<VariantProps<typeof alertVariants>['tone']>;
 type AlertDensity = NonNullable<VariantProps<typeof alertVariants>['density']>;

package/dist/components/ui/app-frame.d.ts

@@ -1,6 +1,18 @@
 import * as React from 'react';
 import type { MaterialVariant } from './material.js';
 export type AppFrameMode = 'auto' | 'embedded' | 'window';
+export interface AppFrameNativeMaterial {
+    /**
+     * Reveal the host-rendered frosted window background while keeping the
+     * portable canvas fill as the fallback.
+     */
+    background?: boolean;
+    /**
+     * Allow a compatible leading `Sidebar` to request host-rendered native
+     * material when the app manifest and host both advertise support.
+     */
+    sidebar?: boolean;
+}
 declare function resolveAppFrameMode(mode: AppFrameMode): Exclude<AppFrameMode, 'auto'>;
 export interface AppFrameProps extends React.ComponentProps<'div'> {
     /**
@@ -8,14 +20,21 @@ export interface AppFrameProps extends React.ComponentProps<'div'> {
      * in catalogs, previews, and tests where the runtime environment is ambiguous.
      */
     mode?: AppFrameMode;
+    /**
+     * Explicitly opts this app frame into renderer-owned native material
+     * regions. The matching region must also be enabled in `moldable.json`.
+     */
+    nativeMaterial?: AppFrameNativeMaterial;
 }
 interface AppFrameRuntimeContextValue {
     mode: Exclude<AppFrameMode, 'auto'>;
+    backgroundMaterialActive: boolean;
     sidebarMaterialAvailable: boolean;
+    sidebarMaterialEnabled: boolean;
     sidebarMaterialRegionId: string | null;
 }
 export declare function useAppFrameRuntime(): AppFrameRuntimeContextValue | null;
-declare function AppFrame({ mode, className, style, ...props }: AppFrameProps): import("react/jsx-runtime").JSX.Element;
+declare function AppFrame({ mode, nativeMaterial, className, style, ...props }: AppFrameProps): import("react/jsx-runtime").JSX.Element;
 export interface AppFrameTitlebarProps extends React.ComponentPropsWithoutRef<'header'> {
     material?: MaterialVariant | 'none';
 }

package/dist/components/ui/app-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAMjD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,iBAAS,mBAAmB,CAC1B,IAAI,EAAE,YAAY,GACjB,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAM/B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;IACnC,wBAAwB,EAAE,OAAO,CAAA;IACjC,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;CACvC;AAKD,wBAAgB,kBAAkB,IAAI,2BAA2B,GAAG,IAAI,CAEvE;AAsBD,iBAAS,QAAQ,CAAC,EAChB,IAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CAoEf;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAoB,EACpB,aAAa,EACb,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+BvB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAWvC;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAiB,EACjB,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoBtB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAoB,EACpB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,OAAO,EACL,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,CAAA"}
+{"version":3,"file":"app-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAMjD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,mBAAmB,CAC1B,IAAI,EAAE,YAAY,GACjB,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAM/B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAA;CACxC;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;IACnC,wBAAwB,EAAE,OAAO,CAAA;IACjC,wBAAwB,EAAE,OAAO,CAAA;IACjC,sBAAsB,EAAE,OAAO,CAAA;IAC/B,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;CACvC;AAKD,wBAAgB,kBAAkB,IAAI,2BAA2B,GAAG,IAAI,CAEvE;AA8BD,iBAAS,QAAQ,CAAC,EAChB,IAAa,EACb,cAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CAuGf;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAoB,EACpB,aAAa,EACb,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+BvB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAWvC;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAiB,EACjB,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoBtB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAoB,EACpB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,OAAO,EACL,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,CAAA"}

package/dist/components/ui/app-frame.js

@@ -30,13 +30,20 @@ function sidebarMaterialAvailable() {
         document.documentElement.dataset.moldableNativeMaterialSidebar ===
             'available');
 }
-function AppFrame({ mode = 'auto', className, style, ...props }) {
+function backgroundMaterialAvailable() {
+    return (typeof document !== 'undefined' &&
+        document.documentElement.dataset.moldableNativeMaterialBackground ===
+            'available');
+}
+function AppFrame({ mode = 'auto', nativeMaterial, className, style, ...props }) {
     const [resolvedMode, setResolvedMode] = React.useState(() => resolveAppFrameMode(mode));
     const [sidebarMaterialRegionId, setSidebarMaterialRegionId] = React.useState(activeSidebarMaterialRegionId);
     const [nativeSidebarMaterialAvailable, setNativeSidebarMaterialAvailable] = React.useState(sidebarMaterialAvailable);
+    const [nativeBackgroundMaterialAvailable, setNativeBackgroundMaterialAvailable,] = React.useState(backgroundMaterialAvailable);
     React.useEffect(() => {
         const updateHostState = () => {
             setResolvedMode(resolveAppFrameMode(mode));
+            setNativeBackgroundMaterialAvailable(backgroundMaterialAvailable());
             setNativeSidebarMaterialAvailable(sidebarMaterialAvailable());
             setSidebarMaterialRegionId(activeSidebarMaterialRegionId());
         };
@@ -50,19 +57,42 @@ function AppFrame({ mode = 'auto', className, style, ...props }) {
         };
     }, [mode]);
     const sidebarMaterialActive = resolvedMode === 'window' && sidebarMaterialRegionId !== null;
+    const backgroundMaterialActive = resolvedMode === 'window' &&
+        nativeMaterial?.background === true &&
+        nativeBackgroundMaterialAvailable;
+    React.useEffect(() => {
+        if (!backgroundMaterialActive)
+            return;
+        const previousBackgroundColor = document.body.style.backgroundColor;
+        document.body.style.backgroundColor = 'transparent';
+        return () => {
+            if (previousBackgroundColor) {
+                document.body.style.backgroundColor = previousBackgroundColor;
+            }
+            else {
+                document.body.style.removeProperty('background-color');
+            }
+        };
+    }, [backgroundMaterialActive]);
     return (_jsx(AppFrameRuntimeContext.Provider, { value: {
             mode: resolvedMode,
+            backgroundMaterialActive,
             sidebarMaterialAvailable: nativeSidebarMaterialAvailable,
+            sidebarMaterialEnabled: nativeMaterial?.sidebar === true,
             sidebarMaterialRegionId,
-        }, children: _jsx("div", { "data-slot": "app-frame", "data-mode": resolvedMode, "data-native-material-sidebar": sidebarMaterialActive ? 'active' : undefined, className: cn('text-foreground flex h-dvh min-h-0 min-w-0 flex-col overflow-hidden bg-[var(--surface-canvas,var(--background))]', className), style: {
+        }, children: _jsx("div", { "data-slot": "app-frame", "data-mode": resolvedMode, "data-native-material-background": backgroundMaterialActive ? 'active' : undefined, "data-native-material-sidebar": sidebarMaterialActive ? 'active' : undefined, "data-native-material-sidebar-enabled": nativeMaterial?.sidebar === true ? 'true' : undefined, className: cn('text-foreground flex h-dvh min-h-0 min-w-0 flex-col overflow-hidden', backgroundMaterialActive
+                ? 'bg-transparent'
+                : 'bg-[var(--surface-canvas,var(--background))]', className), style: {
                 paddingInlineStart: 'var(--window-safe-area-inline-start, 0px)',
                 paddingInlineEnd: 'var(--window-safe-area-inline-end, 0px)',
                 ...style,
-                ...(sidebarMaterialActive
-                    ? {
-                        background: 'linear-gradient(to right, transparent 0 var(--moldable-material-region-sidebar-width), var(--surface-canvas, var(--background)) var(--moldable-material-region-sidebar-width) 100%)',
-                    }
-                    : {}),
+                ...(backgroundMaterialActive
+                    ? { background: 'transparent' }
+                    : sidebarMaterialActive
+                        ? {
+                            background: 'linear-gradient(to right, transparent 0 var(--moldable-material-region-sidebar-width), var(--surface-canvas, var(--background)) var(--moldable-material-region-sidebar-width) 100%)',
+                        }
+                        : {}),
             }, ...props }) }));
 }
 function AppFrameTitlebar({ className, material = 'regular', onDoubleClick, onMouseDown, style, ...props }) {

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/ui/badge.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const badgeVariants = cva('text-ui-caption inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-2 py-0.5 font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3', {
+const badgeVariants = cva('inline-flex h-[var(--density-badge-height)] w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-[var(--density-badge-padding-inline)] py-0 text-[length:var(--type-badge-size)] leading-[var(--type-badge-line-height)] font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3', {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',

package/dist/components/ui/button.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import type { ControlSize } from '../../tokens/contracts.js';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "toolbar" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "toolbar" | "outline" | "default" | "prominent" | "bordered" | "borderless" | "tinted" | "destructive" | "destructive-tinted" | "secondary" | "ghost" | null | undefined;
+    size?: "small" | "sm" | "default" | "lg" | "xs" | "xl" | "mini" | "medium" | "large" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
+    controlSize?: ControlSize;
     loading?: boolean;
 };
-declare function Button({ 'aria-busy': ariaBusy, children, className, disabled, loading, onClick, onKeyDown, variant, size, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ 'aria-busy': ariaBusy, children, className, controlSize, disabled, loading, onClick, onKeyDown, variant, size, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;8EAoCnB,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA4CH,iBAAS,MAAM,CAAC,EACd,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAqDb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;8EAwDnB,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA4CH,iBAAS,MAAM,CAAC,EACd,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CA0Eb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}