@moldable-ai/ui 0.2.22 → 0.2.24

package/dist/components/chat/index.js

@@ -1,15 +1,20 @@
-export { ChatInput, } from './chat-input';
-export { CompactingMessage, Message, ThinkingMessage, } from './chat-message';
-export { Messages } from './chat-messages';
-export { CheckpointBadge } from './checkpoint-badge';
-export { RestoreDialog, } from './restore-dialog';
-export { ModelSelector } from './model-selector';
-export { ModelEffortSelector, resolveModelEffortPresetIndex, } from './model-effort-selector';
-export { ReasoningEffortSelector, } from './reasoning-effort-selector';
-export { ConversationHistory, ConversationSidebar, groupConversations, } from './conversation-history';
-export { ChatPanel, resolveChatAuthIssue, } from './chat-panel';
-export { ThinkingTimeline, ThinkingTimelineMarker, } from './thinking-timeline';
-export { getToolHandler, DEFAULT_TOOL_HANDLERS, } from './tool-handlers';
-export { ToolProgressProvider, useToolProgress, useToolCallProgress, } from './tool-progress-context';
-export { ToolApprovalProvider, useToolApprovalResponse, } from './tool-approval-context';
-export { ToolApproval, ToolApprovalHeader, ToolApprovalRequest, ToolApprovalAccepted, ToolApprovalRejected, ToolApprovalActions, ToolApprovalAction, } from './tool-approval';
+export { ChatInput, } from './chat-input.js';
+export { CompactingMessage, Message, ThinkingMessage, } from './chat-message.js';
+export { Messages } from './chat-messages.js';
+export { CheckpointBadge } from './checkpoint-badge.js';
+export { RestoreDialog, } from './restore-dialog.js';
+export { ModelSelector } from './model-selector.js';
+export { ModelEffortSelector, resolveModelEffortPresetIndex, } from './model-effort-selector.js';
+export { ReasoningEffortSelector, } from './reasoning-effort-selector.js';
+export { ConversationHistory, ConversationSidebar, groupConversations, } from './conversation-history.js';
+export { ChatPanel, resolveChatAuthIssue, } from './chat-panel.js';
+export { ThinkingTimeline, ThinkingTimelineMarker, } from './thinking-timeline.js';
+export { getToolHandler, DEFAULT_TOOL_HANDLERS, } from './tool-handlers.js';
+export { ToolProgressProvider, useToolProgress, useToolCallProgress, } from './tool-progress-context.js';
+export { ToolApprovalProvider, useToolApprovalResponse, } from './tool-approval-context.js';
+export { ToolApproval, ToolApprovalHeader, ToolApprovalRequest, ToolApprovalAccepted, ToolApprovalRejected, ToolApprovalActions, ToolApprovalAction, } from './tool-approval.js';
+export { VoiceOrb } from './voice-orb.js';
+export { VoiceOrbRenderer } from './voice-orb-renderer.js';
+export { voiceOrbFragmentShader, voiceOrbVertexShader, } from './voice-orb-shaders.js';
+export { summarizeVoiceOrbSpectrum, VoiceOrbStreamAnalyser, } from './voice-orb-audio.js';
+export { getVoiceOrbStateLabel, getVoiceOrbStateTargets, normalizeVoiceOrbAudioLevels, silentVoiceOrbAudioLevels, voiceOrbSilenceHoldMs, voiceOrbSilenceThreshold, voiceOrbSpeakingThreshold, voiceOrbStateTransitionSeconds, voiceOrbStates, } from './voice-orb-types.js';

package/dist/components/chat/markdown.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 const components = {

package/dist/components/chat/model-effort-selector.js

@@ -2,11 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, Zap } from 'lucide-react';
 import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
-import { Slider } from '../ui/slider';
-import { MaxThumbBurst, ModelEffortRangeEffects, } from './model-effort-power-effects';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
+import { Slider } from '../ui/slider.js';
+import { MaxThumbBurst, ModelEffortRangeEffects, } from './model-effort-power-effects.js';
 const EXPANDED_TRIGGER_WIDTH = 252;
 const TRIGGER_MOTION_MS = 320;
 export function resolveModelEffortPresetIndex(presets, selectedModel, selectedEffort) {
@@ -144,12 +144,12 @@ export function ModelEffortSelector({ providers, presets, selectedModel, selecte
         setPreviewPresetIndex(null);
         onSelectionChange(nextPreset.modelId, nextPreset.effort);
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: triggerRef, type: "button", variant: "ghost", size: "sm", disabled: disabled || !currentPreset, "aria-label": `Model and effort: ${currentPreset?.modelName ?? 'Unavailable'}, ${currentPreset?.effortLabel ?? 'Unavailable'}`, className: cn('text-foreground hover:bg-muted h-8 min-w-0 cursor-pointer gap-1.5 overflow-hidden rounded-full px-2.5 text-xs font-medium transition-colors', open ? 'max-w-none' : 'w-auto max-w-[220px]'), style: { width: open ? EXPANDED_TRIGGER_WIDTH : undefined }, children: [_jsx(Zap, { className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 max-w-[110px] truncate", children: currentPreset?.modelName }), _jsx("span", { className: cn('shrink-0 font-normal transition-colors duration-300', isMaxPower ? 'text-model-effort-purple' : 'text-muted-foreground'), children: currentPreset?.effortLabel }), _jsx(ChevronDown, { className: "text-muted-foreground size-3 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "end", side: "top", sideOffset: 8, collisionPadding: 12, className: "model-effort-popover rounded-2xl p-2.5 shadow-xl", style: { width: EXPANDED_TRIGGER_WIDTH }, children: [showProviderToggle ? (_jsxs("div", { className: "border-border bg-muted relative mx-auto mb-2.5 flex w-fit items-center rounded-full border p-0.5", role: "group", "aria-label": "AI provider", children: [_jsx("div", { "aria-hidden": "true", className: "bg-background absolute inset-y-0.5 left-0.5 w-12 rounded-full shadow-sm transition-transform duration-200 ease-out", style: {
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: triggerRef, type: "button", variant: "ghost", size: "sm", disabled: disabled || !currentPreset, "aria-label": `Model and effort: ${currentPreset?.modelName ?? 'Unavailable'}, ${currentPreset?.effortLabel ?? 'Unavailable'}`, className: cn('text-foreground hover:bg-muted rounded-pill text-ui-caption h-8 min-w-0 cursor-pointer gap-1.5 overflow-hidden px-2.5 font-medium transition-colors', open ? 'max-w-none' : 'w-auto max-w-[220px]'), style: { width: open ? EXPANDED_TRIGGER_WIDTH : undefined }, children: [_jsx(Zap, { className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 max-w-[110px] truncate", children: currentPreset?.modelName }), _jsx("span", { className: cn('shrink-0 font-normal transition-colors duration-300', isMaxPower ? 'text-model-effort-purple' : 'text-muted-foreground'), children: currentPreset?.effortLabel }), _jsx(ChevronDown, { className: "text-muted-foreground size-3 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "end", side: "top", sideOffset: 8, collisionPadding: 12, className: "model-effort-popover rounded-container p-2.5 shadow-xl", style: { width: EXPANDED_TRIGGER_WIDTH }, children: [showProviderToggle ? (_jsxs("div", { className: "border-border bg-muted rounded-pill relative mx-auto mb-2.5 flex w-fit items-center border p-0.5", role: "group", "aria-label": "AI provider", children: [_jsx("div", { "aria-hidden": "true", className: "bg-background rounded-pill absolute inset-y-0.5 left-0.5 w-12 shadow-sm transition-transform duration-200 ease-out", style: {
                                     transform: `translateX(${activeProviderIndex * 3}rem)`,
                                 } }), providers.map((provider) => {
                                 const active = provider.id === activeProviderId;
-                                return (_jsx("button", { type: "button", onClick: () => handleProviderChange(provider.id), disabled: disabled, "aria-label": provider.name, "aria-pressed": active, className: cn('relative z-10 inline-flex h-8 w-12 cursor-pointer items-center justify-center rounded-full transition-opacity disabled:cursor-not-allowed disabled:opacity-50', active ? 'opacity-100' : 'opacity-45 hover:opacity-80'), children: _jsx("span", { className: "flex size-4 items-center justify-center [&>img]:size-4", children: provider.icon }) }, provider.id));
-                            })] })) : null, _jsxs("div", { className: "text-muted-foreground flex items-center justify-between px-1 text-[11px] font-medium", children: [_jsx("span", { children: "Faster" }), _jsx("span", { children: "Smarter" })] }), _jsxs("div", { className: "relative mt-1.5 h-8", children: [_jsx(Slider, { "aria-label": "Model intelligence", value: [visiblePresetIndex], min: 0, max: maxPresetIndex, step: 1, disabled: disabled || activePresets.length === 0, onValueChange: ([nextIndex]) => {
+                                return (_jsx("button", { type: "button", onClick: () => handleProviderChange(provider.id), disabled: disabled, "aria-label": provider.name, "aria-pressed": active, className: cn('rounded-pill relative z-10 inline-flex h-8 w-12 cursor-pointer items-center justify-center transition-opacity disabled:cursor-not-allowed disabled:opacity-50', active ? 'opacity-100' : 'opacity-45 hover:opacity-80'), children: _jsx("span", { className: "flex size-4 items-center justify-center [&>img]:size-4", children: provider.icon }) }, provider.id));
+                            })] })) : null, _jsxs("div", { className: "text-muted-foreground text-11 flex items-center justify-between px-1 font-medium", children: [_jsx("span", { children: "Faster" }), _jsx("span", { children: "Smarter" })] }), _jsxs("div", { className: "relative mt-1.5 h-8", children: [_jsx(Slider, { "aria-label": "Model intelligence", value: [visiblePresetIndex], min: 0, max: maxPresetIndex, step: 1, disabled: disabled || activePresets.length === 0, onValueChange: ([nextIndex]) => {
                                     if (typeof nextIndex === 'number') {
                                         preparePresetEffects(activePresets[nextIndex]);
                                         setPreviewPresetIndex(nextIndex);
@@ -165,13 +165,13 @@ export function ModelEffortSelector({ providers, presets, selectedModel, selecte
                                     ? '[&>span:last-child]:duration-0'
                                     : isDragging
                                         ? '[&>span:last-child]:duration-150'
-                                        : '[&>span:last-child]:duration-300') }), _jsx("div", { "aria-hidden": "true", className: cn('bg-model-effort-blue pointer-events-none absolute left-px top-[5px] z-[1] h-[22px] overflow-hidden rounded-full transition-[width] ease-[cubic-bezier(.23,1,.32,1)]', !thumbMotionReady
+                                        : '[&>span:last-child]:duration-300') }), _jsx("div", { "aria-hidden": "true", className: cn('bg-model-effort-blue rounded-pill pointer-events-none absolute left-px top-[5px] z-[1] h-[22px] overflow-hidden transition-[width] ease-[cubic-bezier(.23,1,.32,1)]', !thumbMotionReady
                                     ? 'duration-0'
                                     : isDragging
                                         ? 'duration-150'
                                         : 'duration-300'), style: { width: fillWidth(visiblePresetIndex, maxPresetIndex) }, children: powerLevel !== null ? (_jsx(ModelEffortRangeEffects, { level: powerLevel, reveal: revealMax }, powerLevel)) : null }), _jsx("div", { className: cn('pointer-events-none absolute inset-0 z-[1] transition-[opacity,transform] ease-[cubic-bezier(.23,1,.32,1)]', isMaxPower
                                     ? 'scale-75 opacity-0 delay-100 duration-[400ms]'
-                                    : 'scale-100 opacity-100 duration-300'), "aria-hidden": true, children: activePresets.map((preset, index) => (_jsx("span", { className: cn('absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full transition-[background-color,transform] duration-300 ease-[cubic-bezier(.23,1,.32,1)]', index <= visiblePresetIndex
+                                    : 'scale-100 opacity-100 duration-300'), "aria-hidden": true, children: activePresets.map((preset, index) => (_jsx("span", { className: cn('rounded-pill absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 transition-[background-color,transform] duration-300 ease-[cubic-bezier(.23,1,.32,1)]', index <= visiblePresetIndex
                                         ? powerLevel === 'light' || powerLevel === 'medium'
                                             ? 'bg-model-effort-blue/45'
                                             : 'bg-white/55'

package/dist/components/chat/model-selector.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown } from 'lucide-react';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../ui/dropdown-menu';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
 export function ModelSelector({ models, selectedModel, onModelChange, disabled = false, className, dropdownAlign = 'start', dropdownSide = 'bottom', }) {
     const currentModel = models.find((m) => m.id === selectedModel) ?? models[0];
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground h-8 min-w-0 max-w-[180px] cursor-pointer gap-1 rounded-full px-2.5 text-xs font-medium', className), children: [_jsx("span", { className: "min-w-0 truncate", children: currentModel?.name }), _jsx(ChevronDown, { className: "size-3 opacity-50" })] }) }), _jsx(DropdownMenuContent, { align: dropdownAlign, side: dropdownSide, className: "min-w-[160px]", children: models.map((model) => (_jsxs(DropdownMenuItem, { onClick: () => onModelChange(model.id), className: "flex cursor-pointer items-center gap-2", children: [_jsx("span", { children: model.icon }), _jsx("span", { className: "flex-1", children: model.name }), model.id === selectedModel && (_jsx(Check, { className: "text-primary size-4" }))] }, model.id))) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground rounded-pill text-ui-caption h-8 min-w-0 max-w-[180px] cursor-pointer gap-1 px-2.5 font-medium', className), children: [_jsx("span", { className: "min-w-0 truncate", children: currentModel?.name }), _jsx(ChevronDown, { className: "size-3 opacity-50" })] }) }), _jsx(DropdownMenuContent, { align: dropdownAlign, side: dropdownSide, className: "min-w-[160px]", children: models.map((model) => (_jsxs(DropdownMenuItem, { onClick: () => onModelChange(model.id), className: "flex cursor-pointer items-center gap-2", children: [_jsx("span", { children: model.icon }), _jsx("span", { className: "flex-1", children: model.name }), model.id === selectedModel && (_jsx(Check, { className: "text-primary size-4" }))] }, model.id))) })] }));
 }

package/dist/components/chat/reasoning-effort-selector.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Brain, Check, ChevronDown } from 'lucide-react';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from '../ui/dropdown-menu';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
 export function ReasoningEffortSelector({ options, selectedEffort, onEffortChange, disabled = false, className, showLabel = false, dropdownAlign = 'start', dropdownSide = 'bottom', }) {
     const currentOption = options.find((o) => o.value === selectedEffort) ?? options[1]; // Default to medium
     return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground cursor-pointer', showLabel &&
-                        'h-8 w-auto gap-1.5 rounded-full px-3 text-xs font-medium', className), children: showLabel ? (_jsxs(_Fragment, { children: [_jsx("span", { children: currentOption?.label }), _jsx(ChevronDown, { className: "size-3 opacity-50" })] })) : (_jsx(Brain, { className: "size-4" })) }) }), _jsxs(DropdownMenuContent, { align: dropdownAlign, side: dropdownSide, className: "min-w-[140px]", children: [_jsx(DropdownMenuLabel, { className: "text-muted-foreground font-normal", children: "Reasoning" }), options.map((option) => (_jsxs(DropdownMenuItem, { onClick: () => onEffortChange(option.value), className: "flex cursor-pointer items-center gap-2", children: [!showLabel && _jsx(Brain, { className: "text-muted-foreground size-3.5" }), _jsx("span", { className: "flex-1", children: option.label }), option.value === selectedEffort && (_jsx(Check, { className: "text-primary size-4" }))] }, option.value)))] })] }));
+                        'rounded-pill text-ui-caption h-8 w-auto gap-1.5 px-3 font-medium', className), children: showLabel ? (_jsxs(_Fragment, { children: [_jsx("span", { children: currentOption?.label }), _jsx(ChevronDown, { className: "size-3 opacity-50" })] })) : (_jsx(Brain, { className: "size-4" })) }) }), _jsxs(DropdownMenuContent, { align: dropdownAlign, side: dropdownSide, className: "min-w-[140px]", children: [_jsx(DropdownMenuLabel, { className: "text-muted-foreground font-normal", children: "Reasoning" }), options.map((option) => (_jsxs(DropdownMenuItem, { onClick: () => onEffortChange(option.value), className: "flex cursor-pointer items-center gap-2", children: [!showLabel && _jsx(Brain, { className: "text-muted-foreground size-3.5" }), _jsx("span", { className: "flex-1", children: option.label }), option.value === selectedEffort && (_jsx(Check, { className: "text-primary size-4" }))] }, option.value)))] })] }));
 }

package/dist/components/chat/restore-dialog.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, History } from 'lucide-react';
-import { Button } from '../ui/button';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../ui/dialog';
+import { Button } from '../ui/button.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../ui/dialog.js';
 import { formatDistanceToNow } from 'date-fns';
 /**
  * Dialog for confirming checkpoint restoration.
@@ -19,5 +19,5 @@ export function RestoreDialog({ open, onOpenChange, checkpoint, onConfirm, isRes
     const remainingCount = files.length - displayFiles.length;
     return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-md", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(History, { className: "text-muted-foreground size-5" }), "Restore to this point?"] }), _jsxs(DialogDescription, { children: ["This will undo all changes made from", ' ', formatDistanceToNow(new Date(checkpoint.createdAt), {
                                     addSuffix: true,
-                                }), ' ', "onwards."] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "bg-destructive/10 flex items-start gap-2 rounded-lg p-3 text-sm", children: [_jsx(AlertTriangle, { className: "text-destructive mt-0.5 size-4 shrink-0" }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-foreground", children: "All changes after this point will be reverted. Files created after this checkpoint will be deleted." }), _jsx("p", { className: "text-muted-foreground", children: "This action cannot be undone." })] })] }), files.length > 0 && (_jsxs("div", { className: "text-muted-foreground text-sm", children: [_jsx("p", { className: "text-foreground mb-2 font-medium", children: "Files in this checkpoint:" }), _jsxs("ul", { className: "bg-muted/50 space-y-1 rounded-md p-2 font-mono text-xs", children: [displayFiles.map((file) => (_jsx("li", { className: "truncate", children: file }, file))), remainingCount > 0 && (_jsxs("li", { className: "text-muted-foreground/70", children: ["...and ", remainingCount, " more"] }))] })] })), _jsxs("p", { className: "text-muted-foreground text-xs", children: [checkpoint.fileCount, " file", checkpoint.fileCount !== 1 ? 's' : '', ' ', "captured"] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: isRestoring, className: "cursor-pointer", children: "Cancel" }), _jsx(Button, { variant: "destructive", onClick: onConfirm, disabled: isRestoring, className: "cursor-pointer", children: isRestoring ? 'Restoring...' : 'Restore' })] })] }) }));
+                                }), ' ', "onwards."] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "bg-destructive/10 rounded-container text-ui-body flex items-start gap-2 p-3", children: [_jsx(AlertTriangle, { className: "text-destructive mt-0.5 size-4 shrink-0" }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-foreground", children: "All changes after this point will be reverted. Files created after this checkpoint will be deleted." }), _jsx("p", { className: "text-muted-foreground", children: "This action cannot be undone." })] })] }), files.length > 0 && (_jsxs("div", { className: "text-muted-foreground text-ui-body", children: [_jsx("p", { className: "text-foreground mb-2 font-medium", children: "Files in this checkpoint:" }), _jsxs("ul", { className: "bg-muted/50 rounded-control text-ui-caption space-y-1 p-2 font-mono", children: [displayFiles.map((file) => (_jsx("li", { className: "truncate", children: file }, file))), remainingCount > 0 && (_jsxs("li", { className: "text-muted-foreground/70", children: ["...and ", remainingCount, " more"] }))] })] })), _jsxs("p", { className: "text-muted-foreground text-ui-caption", children: [checkpoint.fileCount, " file", checkpoint.fileCount !== 1 ? 's' : '', ' ', "captured"] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: isRestoring, className: "cursor-pointer", children: "Cancel" }), _jsx(Button, { variant: "destructive", onClick: onConfirm, disabled: isRestoring, className: "cursor-pointer", children: isRestoring ? 'Restoring...' : 'Restore' })] })] }) }));
 }

package/dist/components/chat/thinking-timeline.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Eye, FileText, FolderOpen, Globe, Loader2, Terminal, } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 export var ThinkingTimelineMarker;
 (function (ThinkingTimelineMarker) {
     ThinkingTimelineMarker["Default"] = "default";
@@ -41,6 +41,6 @@ function getMarkerVisual(marker) {
             return _jsx(FolderOpen, { className: "size-4" });
         case ThinkingTimelineMarker.Default:
         default:
-            return (_jsx("span", { className: "bg-foreground/70 block h-[6px] w-[6px] rounded-full" }));
+            return (_jsx("span", { className: "bg-foreground/70 rounded-pill block h-[6px] w-[6px]" }));
     }
 }

package/dist/components/chat/tool-approval.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '../ui/button';
+import { Button } from '../ui/button.js';
 /**
  * State of the tool approval
  */

package/dist/components/chat/tool-approval.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-approval.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-approval.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,oBAAoB,GACpB,oBAAoB,GACpB,kBAAkB,GAClB,eAAe,CAAA;AAenB;;GAEG;AACH,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,oCAAoC;IACpC,KAAK,EAAE,iBAAiB,CAAA;IACxB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CAanB;AAED;;GAEG;AACH,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,GACV,EAAE,uBAAuB,2CAqBzB;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,kDAQ1B;AAED;;GAEG;AACH,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,kDAkCvB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAc5E;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,2CAaA;AAED;;GAEG;AACH,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,GACV,EAAE,yBAAyB,kDAqB3B;AAED;;GAEG;AACH,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,GACV,EAAE,yBAAyB,kDAuB3B;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,kDAkB1B;AAED;;GAEG;AACH,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAA;AAElE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,IAAW,EACX,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAIzB"}
+{"version":3,"file":"tool-approval.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-approval.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,oBAAoB,GACpB,oBAAoB,GACpB,kBAAkB,GAClB,eAAe,CAAA;AAenB;;GAEG;AACH,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,oCAAoC;IACpC,KAAK,EAAE,iBAAiB,CAAA;IACxB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CAanB;AAED;;GAEG;AACH,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,GACV,EAAE,uBAAuB,2CAqBzB;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,kDAQ1B;AAED;;GAEG;AACH,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,kDAkCvB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAc5E;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,2CAaA;AAED;;GAEG;AACH,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,GACV,EAAE,yBAAyB,kDAqB3B;AAED;;GAEG;AACH,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,GACV,EAAE,yBAAyB,kDAuB3B;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,kDAkB1B;AAED;;GAEG;AACH,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAA;AAElE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,IAAW,EACX,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB"}

package/dist/components/chat/tool-approval.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, HelpCircle, ShieldAlert, X } from 'lucide-react';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
 const ToolApprovalContext = React.createContext({
     state: 'approval-requested',
 });
@@ -11,7 +11,7 @@ function useToolApprovalContext() {
     return React.useContext(ToolApprovalContext);
 }
 export function ToolApproval({ children, state, approved, className, }) {
-    return (_jsx(ToolApprovalContext.Provider, { value: { state, approved }, children: _jsx("div", { className: cn('bg-card border-border my-2 overflow-hidden rounded-lg border', className), children: children }) }));
+    return (_jsx(ToolApprovalContext.Provider, { value: { state, approved }, children: _jsx("div", { className: cn('bg-card border-border rounded-container my-2 overflow-hidden border', className), children: children }) }));
 }
 export function ToolApprovalHeader({ children, className, }) {
     const { state, approved } = useToolApprovalContext();
@@ -24,7 +24,7 @@ export function ToolApprovalRequest({ children, className, }) {
     if (state !== 'approval-requested') {
         return null;
     }
-    return _jsx("div", { className: cn('text-xs', className), children: children });
+    return _jsx("div", { className: cn('text-ui-caption', className), children: children });
 }
 export function ToolApprovalHelp({ children, className, }) {
     const { state } = useToolApprovalContext();
@@ -33,13 +33,13 @@ export function ToolApprovalHelp({ children, className, }) {
     if (state !== 'approval-requested') {
         return null;
     }
-    return (_jsxs("div", { className: cn('', className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1 text-[10px] transition-colors", children: [_jsx(HelpCircle, { className: "size-2.5" }), _jsx("span", { children: "What does this mean?" }), _jsx(ChevronDown, { className: cn('size-2.5 transition-transform', isOpen && 'rotate-180') })] }), isOpen && (_jsx("div", { className: "bg-muted/30 mt-1.5 rounded-md px-2 py-1.5", children: _jsx("p", { className: "text-muted-foreground text-[10px] leading-relaxed", children: children }) }))] }));
+    return (_jsxs("div", { className: cn('', className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "text-muted-foreground hover:text-foreground text-11 flex cursor-pointer items-center gap-1 transition-colors", children: [_jsx(HelpCircle, { className: "size-2.5" }), _jsx("span", { children: "What does this mean?" }), _jsx(ChevronDown, { className: cn('size-2.5 transition-transform', isOpen && 'rotate-180') })] }), isOpen && (_jsx("div", { className: "bg-muted/30 rounded-control mt-1.5 px-2 py-1.5", children: _jsx("p", { className: "text-muted-foreground text-11 leading-relaxed", children: children }) }))] }));
 }
 /**
  * Pre-built help content for sandboxing explanation
  */
 export function ToolApprovalSandboxHelp({ className }) {
-    return (_jsxs(ToolApprovalHelp, { className: className, children: [_jsx("strong", { className: "text-foreground", children: "Sandboxing" }), " restricts commands from accessing the network and writing to sensitive locations. Package managers like", ' ', _jsx("code", { className: "bg-muted rounded px-1 py-0.5", children: "pnpm install" }), " need network access to download packages, so they run unsandboxed.", _jsxs("strong", { className: "text-foreground", children: [' ', "Only approve commands you trust."] })] }));
+    return (_jsxs(ToolApprovalHelp, { className: className, children: [_jsx("strong", { className: "text-foreground", children: "Sandboxing" }), " restricts commands from accessing the network and writing to sensitive locations. Package managers like", ' ', _jsx("code", { className: "bg-muted rounded-control px-1 py-0.5", children: "pnpm install" }), ' ', "need network access to download packages, so they run unsandboxed.", _jsxs("strong", { className: "text-foreground", children: [' ', "Only approve commands you trust."] })] }));
 }
 /**
  * Pre-built help content for dangerous command explanation
@@ -54,7 +54,7 @@ export function ToolApprovalAccepted({ children, className, }) {
     if (!shouldShow) {
         return null;
     }
-    return (_jsx("div", { className: cn('text-success flex items-center gap-1.5 text-xs', className), children: children ?? 'Approved' }));
+    return (_jsx("div", { className: cn('text-success text-ui-caption flex items-center gap-1.5', className), children: children ?? 'Approved' }));
 }
 export function ToolApprovalRejected({ children, className, }) {
     const { state, approved } = useToolApprovalContext();
@@ -65,7 +65,7 @@ export function ToolApprovalRejected({ children, className, }) {
     if (!shouldShow) {
         return null;
     }
-    return (_jsx("div", { className: cn('text-destructive flex items-center gap-1.5 text-xs', className), children: children ?? 'Rejected' }));
+    return (_jsx("div", { className: cn('text-destructive text-ui-caption flex items-center gap-1.5', className), children: children ?? 'Rejected' }));
 }
 export function ToolApprovalActions({ children, className, }) {
     const { state } = useToolApprovalContext();
@@ -76,5 +76,5 @@ export function ToolApprovalActions({ children, className, }) {
     return (_jsx("div", { className: cn('border-border flex items-center justify-end gap-2 border-t px-3 py-2', className), children: children }));
 }
 export function ToolApprovalAction({ className, size = 'sm', ...props }) {
-    return (_jsx(Button, { className: cn('h-7 text-xs', className), size: size, ...props }));
+    return (_jsx(Button, { className: cn('text-ui-caption h-7', className), size: size, ...props }));
 }

package/dist/components/chat/tool-handlers.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-import { ThinkingTimelineMarker } from './thinking-timeline';
-import { type ApprovalResponseHandler } from './tool-approval-context';
+import { ThinkingTimelineMarker } from './thinking-timeline.js';
+import { type ApprovalResponseHandler } from './tool-approval-context.js';
 /**
  * Progress data for streaming tool execution (e.g., command stdout/stderr)
  */