@moldable-ai/ui 0.2.18 → 0.2.20

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

@@ -0,0 +1,179 @@
+'use client';
+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';
+const EXPANDED_TRIGGER_WIDTH = 252;
+const TRIGGER_MOTION_MS = 320;
+export function resolveModelEffortPresetIndex(presets, selectedModel, selectedEffort) {
+    const exactIndex = presets.findIndex((preset) => preset.modelId === selectedModel && preset.effort === selectedEffort);
+    if (exactIndex >= 0)
+        return exactIndex;
+    const sameModelIndex = presets.findIndex((preset) => preset.modelId === selectedModel);
+    return Math.max(sameModelIndex, 0);
+}
+function tickPosition(index, maxIndex) {
+    if (maxIndex <= 0)
+        return '14px';
+    const percentage = (index / maxIndex) * 100;
+    const thumbOffset = 14 - 28 * (percentage / 100);
+    return `calc(${percentage}% + ${thumbOffset}px)`;
+}
+function fillWidth(index, maxIndex) {
+    if (maxIndex <= 0)
+        return '13px';
+    const percentage = (index / maxIndex) * 100;
+    const thumbCenterFromInset = 13 - 28 * (percentage / 100);
+    return `calc(${percentage}% + ${thumbCenterFromInset}px)`;
+}
+function getPowerLevel(effort) {
+    switch (effort) {
+        case 'low':
+            return 'light';
+        case 'medium':
+            return 'medium';
+        case 'high':
+            return 'high';
+        case 'xhigh':
+            return 'xhigh';
+        case 'max':
+        case 'ultra':
+            return 'max';
+        default:
+            return null;
+    }
+}
+export function ModelEffortSelector({ providers, presets, selectedModel, selectedReasoningEffort, onSelectionChange, disabled = false, }) {
+    const [open, setOpen] = useState(false);
+    const [thumbMotionReady, setThumbMotionReady] = useState(false);
+    const [previewPresetIndex, setPreviewPresetIndex] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [maxBurstKey, setMaxBurstKey] = useState(0);
+    const [revealMax, setRevealMax] = useState(false);
+    const triggerRef = useRef(null);
+    const triggerAnimationRef = useRef(null);
+    const triggerMotionStartWidthRef = useRef(null);
+    const matchingPreset = presets.find((preset) => preset.modelId === selectedModel &&
+        preset.effort === selectedReasoningEffort) ?? presets.find((preset) => preset.modelId === selectedModel);
+    const activeProviderId = matchingPreset?.providerId ?? providers[0]?.id;
+    const activePresets = presets.filter((preset) => preset.providerId === activeProviderId);
+    const selectedPresetIndex = resolveModelEffortPresetIndex(activePresets, selectedModel, selectedReasoningEffort);
+    const visiblePresetIndex = previewPresetIndex !== null && activePresets[previewPresetIndex]
+        ? previewPresetIndex
+        : selectedPresetIndex;
+    const currentPreset = activePresets[visiblePresetIndex];
+    const isMaxPower = currentPreset?.effort === 'ultra' || currentPreset?.effort === 'max';
+    const powerLevel = getPowerLevel(currentPreset?.effort);
+    const maxPresetIndex = Math.max(activePresets.length - 1, 0);
+    const activeProviderIndex = Math.max(providers.findIndex((provider) => provider.id === activeProviderId), 0);
+    const showProviderToggle = providers.length > 1;
+    // Codex keeps thumb position motion disabled for the first 16ms after mount.
+    // That lets the selected stop render in place instead of sliding in as the
+    // popover opens, while retaining the same motion for later interactions.
+    useEffect(() => {
+        if (!open)
+            return;
+        const timeout = window.setTimeout(() => setThumbMotionReady(true), 16);
+        return () => window.clearTimeout(timeout);
+    }, [open]);
+    useLayoutEffect(() => {
+        const trigger = triggerRef.current;
+        const startWidth = triggerMotionStartWidthRef.current;
+        triggerMotionStartWidthRef.current = null;
+        if (!trigger || startWidth === null)
+            return;
+        triggerAnimationRef.current?.cancel();
+        const endWidth = trigger.getBoundingClientRect().width;
+        if (Math.abs(endWidth - startWidth) < 0.5 ||
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+        const animation = trigger.animate([{ width: `${startWidth}px` }, { width: `${endWidth}px` }], {
+            duration: TRIGGER_MOTION_MS,
+            easing: 'cubic-bezier(.23,1,.32,1)',
+        });
+        triggerAnimationRef.current = animation;
+        animation.onfinish = () => {
+            if (triggerAnimationRef.current === animation) {
+                triggerAnimationRef.current = null;
+            }
+        };
+    }, [open]);
+    useEffect(() => () => {
+        triggerAnimationRef.current?.cancel();
+    }, []);
+    const preparePresetEffects = (nextPreset) => {
+        const nextIsMax = nextPreset?.effort === 'ultra' || nextPreset?.effort === 'max';
+        if (nextIsMax && !isMaxPower) {
+            setMaxBurstKey((key) => key + 1);
+            setRevealMax(true);
+        }
+        else if (!nextIsMax && isMaxPower) {
+            setRevealMax(false);
+        }
+    };
+    const handleOpenChange = (nextOpen) => {
+        const trigger = triggerRef.current;
+        if (trigger) {
+            triggerMotionStartWidthRef.current = trigger.getBoundingClientRect().width;
+            triggerAnimationRef.current?.cancel();
+        }
+        setThumbMotionReady(false);
+        setPreviewPresetIndex(null);
+        setIsDragging(false);
+        if (!nextOpen)
+            setRevealMax(false);
+        setOpen(nextOpen);
+    };
+    const handleProviderChange = (providerId) => {
+        if (providerId === activeProviderId)
+            return;
+        const nextPresets = presets.filter((preset) => preset.providerId === providerId);
+        if (nextPresets.length === 0)
+            return;
+        const progress = maxPresetIndex > 0 ? visiblePresetIndex / maxPresetIndex : 0;
+        const nextIndex = Math.round(progress * Math.max(nextPresets.length - 1, 0));
+        const nextPreset = nextPresets[nextIndex];
+        if (!nextPreset)
+            return;
+        preparePresetEffects(nextPreset);
+        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: {
+                                    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]) => {
+                                    if (typeof nextIndex === 'number') {
+                                        preparePresetEffects(activePresets[nextIndex]);
+                                        setPreviewPresetIndex(nextIndex);
+                                    }
+                                }, onValueCommit: ([nextIndex]) => {
+                                    const nextPreset = activePresets[nextIndex ?? -1];
+                                    preparePresetEffects(nextPreset);
+                                    setPreviewPresetIndex(null);
+                                    if (nextPreset) {
+                                        onSelectionChange(nextPreset.modelId, nextPreset.effort);
+                                    }
+                                }, onPointerDown: () => setIsDragging(true), onPointerUp: () => setIsDragging(false), onPointerCancel: () => setIsDragging(false), thumbContent: isMaxPower && revealMax && maxBurstKey > 0 ? (_jsx(MaxThumbBurst, {}, maxBurstKey)) : null, className: cn('[&_[data-slot=slider-thumb]]:border-foreground/20 [&_[data-slot=slider-track]]:border-border [&_[data-slot=slider-track]]:bg-foreground/10 h-8 [&>span:last-child]:z-20 [&>span:last-child]:transition-[left] [&>span:last-child]:ease-[cubic-bezier(.23,1,.32,1)] [&_[data-slot=slider-range]]:bg-transparent [&_[data-slot=slider-thumb]]:relative [&_[data-slot=slider-thumb]]:isolate [&_[data-slot=slider-thumb]]:z-20 [&_[data-slot=slider-thumb]]:size-7 [&_[data-slot=slider-thumb]]:border-[0.5px] [&_[data-slot=slider-thumb]]:bg-white [&_[data-slot=slider-thumb]]:shadow-[0_1px_4px_rgba(0,0,0,0.18)] [&_[data-slot=slider-thumb]]:hover:ring-0 [&_[data-slot=slider-track]]:h-6 [&_[data-slot=slider-track]]:border', !thumbMotionReady
+                                    ? '[&>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
+                                    ? '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
+                                        ? powerLevel === 'light' || powerLevel === 'medium'
+                                            ? 'bg-model-effort-blue/45'
+                                            : 'bg-white/55'
+                                        : 'bg-muted-foreground/45'), style: { left: tickPosition(index, maxPresetIndex) } }, preset.id))) })] })] })] }));
+}

package/dist/components/chat/model-effort-ultra-effects.d.ts

@@ -0,0 +1,5 @@
+export declare function UltraRangeEffects({ reveal }: {
+    reveal: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function UltraThumbBurst(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=model-effort-ultra-effects.d.ts.map

package/dist/components/chat/model-effort-ultra-effects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-effort-ultra-effects.d.ts","sourceRoot":"","sources":["../../../src/components/chat/model-effort-ultra-effects.tsx"],"names":[],"mappings":"AAwCA,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,2CAgChE;AAED,wBAAgB,eAAe,4CAuB9B"}

package/dist/components/chat/model-effort-ultra-effects.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TRACK_PARTICLES = [
+    [6, 72, 3, -4, 2.1, -0.8, 0.72],
+    [9, 35, -2, 4, 2.8, -1.9, 0.48],
+    [18, 58, 4, -3, 1.9, -0.4, 0.82],
+    [29, 26, -3, 5, 3.1, -2.4, 0.56],
+    [38, 70, 2, -5, 2.5, -1.1, 0.68],
+    [46, 43, -4, 3, 2.9, -2.2, 0.9],
+    [55, 72, 3, -4, 2.2, -1.6, 0.58],
+    [63, 31, -2, 5, 3.2, -0.7, 0.72],
+    [71, 61, 4, -3, 2.4, -1.8, 0.48],
+    [78, 27, -3, 4, 2.7, -2.5, 0.86],
+    [84, 70, 2, -5, 2, -0.6, 0.62],
+    [89, 43, -4, 3, 3, -2.1, 0.9],
+    [93, 67, 3, -4, 2.3, -1.3, 0.7],
+    [96, 32, -2, 5, 2.8, -0.2, 0.54],
+];
+const BURST_PARTICLES = [
+    [-32, -3],
+    [-28, -17],
+    [-19, -29],
+    [-5, -34],
+    [10, -32],
+    [24, -24],
+    [32, -11],
+    [35, 4],
+    [29, 19],
+    [18, 30],
+    [3, 35],
+    [-12, 32],
+    [-25, 24],
+    [-34, 11],
+    [20, -7],
+    [-16, 9],
+];
+export function UltraRangeEffects({ reveal }) {
+    return (_jsxs("span", { "aria-hidden": "true", className: "model-effort-ultra-fill", "data-reveal": reveal, children: [_jsx("span", { className: "model-effort-ultra-field" }), _jsx("span", { className: "model-effort-ultra-particles", children: TRACK_PARTICLES.map(([left, top, driftX, driftY, duration, delay, opacity], index) => (_jsx("span", { className: "model-effort-ultra-particle", style: {
+                        left: `${left}%`,
+                        top: `${top}%`,
+                        '--particle-drift-x': `${driftX}px`,
+                        '--particle-drift-y': `${driftY}px`,
+                        '--particle-opacity': opacity,
+                        animationDuration: `${duration}s`,
+                        animationDelay: `${delay}s`,
+                    } }, index))) })] }));
+}
+export function UltraThumbBurst() {
+    return (_jsx("span", { "aria-hidden": "true", className: "model-effort-ultra-burst", children: BURST_PARTICLES.map(([x, y], index) => (_jsx("span", { className: "model-effort-ultra-burst-particle", style: {
+                '--burst-x': `${x}px`,
+                '--burst-y': `${y}px`,
+                animationDelay: `${(index % 4) * 12}ms`,
+                backgroundColor: index % 3 === 0
+                    ? 'var(--model-effort-blue)'
+                    : 'var(--model-effort-purple)',
+            } }, index))) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"tool-handlers.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-handlers.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAW5D,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAEtE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,SAAS,GAAG,UAAU,CAAA;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,OAAO,CAAA;CACd;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IAExB,YAAY,EAAE,MAAM,CAAA;IAEpB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,SAAS,CAAA;IAGhE,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,SAAS,CAAA;IAG7C,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,qBAAqB,KAC5B,SAAS,CAAA;IAGd,cAAc,CAAC,EAAE,CACf,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,uBAAuB,KAC/B,SAAS,CAAA;CACf,CAAA;AAqSD;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAqvE7D,CAAA;AAoBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAmC5D"}
+{"version":3,"file":"tool-handlers.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-handlers.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAGhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAW5D,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAEtE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,SAAS,GAAG,UAAU,CAAA;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,OAAO,CAAA;CACd;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IAExB,YAAY,EAAE,MAAM,CAAA;IAEpB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,SAAS,CAAA;IAGhE,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,SAAS,CAAA;IAG7C,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,qBAAqB,KAC5B,SAAS,CAAA;IAGd,cAAc,CAAC,EAAE,CACf,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,uBAAuB,KAC/B,SAAS,CAAA;CACf,CAAA;AAqSD;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CA81E7D,CAAA;AAoBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAmC5D"}

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, BookOpen, Camera, Check, CheckCheck, Copy, Database, Download, FileCode, FileText, FolderOpen, Globe, Info, Package, Plus, Search, Sparkles, Terminal, Trash2, X, } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '../../lib/utils';
+import { ChatImageLightbox } from './chat-image-lightbox';
 import { ThinkingTimelineMarker } from './thinking-timeline';
 import { ToolApproval, ToolApprovalAction, ToolApprovalActions, ToolApprovalDangerousHelp, ToolApprovalHeader, ToolApprovalHelp, ToolApprovalRequest, ToolApprovalSandboxHelp, } from './tool-approval';
 /**
@@ -123,11 +124,48 @@ export const DEFAULT_TOOL_HANDLERS = {
             if (!result) {
                 return (_jsx(LoadingIndicator, { icon: Sparkles, children: "Viewing image..." }, toolCallId));
             }
+            const parts = Array.isArray(result.value) ? result.value : [];
+            const image = parts.find((part) => (part.type === 'image-data' || part.type === 'media') &&
+                part.data &&
+                part.mediaType?.startsWith('image/'));
+            const imageSrc = result.imageUrl ??
+                (image?.data && image.mediaType
+                    ? `data:${image.mediaType};base64,${image.data}`
+                    : undefined);
+            if (imageSrc) {
+                return (_jsxs("details", { className: "border-border bg-muted text-muted-foreground my-1 max-w-2xl overflow-hidden rounded-md border text-xs", children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-2 px-2 py-1.5", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: result.imagePath
+                                        ? `Viewed ${getFileName(result.imagePath)}`
+                                        : 'Viewed image' })] }), _jsx("div", { className: "border-border border-t p-2", children: _jsx(ChatImageLightbox, { src: imageSrc, alt: result.imagePath
+                                    ? getFileName(result.imagePath)
+                                    : 'Image viewed by Moldable', className: "bg-background block size-20 rounded-2xl border", imageClassName: "size-full object-cover" }) })] }, toolCallId));
+            }
             return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: result.imagePath
                             ? `Viewed ${getFileName(result.imagePath)}`
                             : 'Viewed image' })] }, toolCallId));
         },
     },
+    showImages: {
+        loadingLabel: 'Showing images...',
+        marker: ThinkingTimelineMarker.Default,
+        inline: true,
+        renderLoading: (args) => {
+            const { images } = (args ?? {});
+            const count = images?.length ?? 0;
+            return (_jsx(LoadingIndicator, { icon: Sparkles, children: count === 1 && images?.[0]?.imagePath
+                    ? `Showing ${getFileName(images[0].imagePath)}...`
+                    : count > 1
+                        ? `Showing ${count} images...`
+                        : 'Showing images...' }));
+        },
+        renderOutput: (output, toolCallId) => {
+            const result = output;
+            const images = result?.images?.filter((image) => Boolean(image.imageUrl));
+            if (!images?.length) {
+                return (_jsx(LoadingIndicator, { icon: Sparkles, children: "Showing images..." }, toolCallId));
+            }
+            return (_jsx("div", { className: "my-2 flex max-w-full gap-2 overflow-x-auto", children: images.map((image, index) => (_jsx(ChatImageLightbox, { src: image.imageUrl, alt: image.altText || image.filename || 'Image shown by Moldable', className: "border-border bg-muted block size-20 shrink-0 rounded-2xl border", imageClassName: "size-full object-cover" }, `${image.imageUrl}-${index}`))) }, toolCallId));
+        },
+    },
     generateImage: {
         loadingLabel: 'Generating image...',
         marker: ThinkingTimelineMarker.Default,
@@ -165,7 +203,7 @@ export const DEFAULT_TOOL_HANDLERS = {
                                 ? `Generated image saved at ${result.imagePath}.`
                                 : 'Generated image saved.' })] }, toolCallId));
             }
-            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx("div", { className: "border-border bg-muted overflow-hidden rounded-lg border", children: _jsx("img", { src: imageSrc, alt: result.prompt || 'Generated image', className: "block max-h-[420px] w-full object-contain" }) }), _jsxs("figcaption", { className: "text-muted-foreground mt-1 flex min-w-0 items-center gap-1 text-xs", children: [_jsx(Sparkles, { className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: result.imagePath
+            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx(ChatImageLightbox, { src: imageSrc, alt: result.prompt || 'Generated image', className: "border-border bg-muted block max-w-full rounded-2xl border", imageClassName: "block max-h-[420px] w-full object-contain" }), _jsxs("figcaption", { className: "text-muted-foreground mt-1 flex min-w-0 items-center gap-1 text-xs", children: [_jsx(Sparkles, { className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: result.imagePath
                                     ? `${getFileName(result.imagePath)}${result.size ? ` - ${result.size}` : ''}`
                                     : result.size || 'Generated image' })] })] }, toolCallId));
         },
@@ -193,7 +231,7 @@ export const DEFAULT_TOOL_HANDLERS = {
             if (!image?.data || !image.mediaType) {
                 return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Camera, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: text || 'Screenshot captured' }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
             }
-            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx("div", { className: "border-border bg-muted overflow-hidden rounded-lg border", children: _jsx("img", { src: `data:${image.mediaType};base64,${image.data}`, alt: "Current app screenshot", className: "block max-h-[420px] w-full object-contain" }) }), text && (_jsxs("figcaption", { className: "text-muted-foreground mt-1 flex items-center gap-1 text-xs", children: [_jsx(Camera, { className: "size-3" }), _jsx("span", { className: "truncate", children: text })] }))] }, toolCallId));
+            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx(ChatImageLightbox, { src: `data:${image.mediaType};base64,${image.data}`, alt: "Current app screenshot", className: "border-border bg-muted block max-w-full rounded-2xl border", imageClassName: "block max-h-[420px] w-full object-contain" }), text && (_jsxs("figcaption", { className: "text-muted-foreground mt-1 flex items-center gap-1 text-xs", children: [_jsx(Camera, { className: "size-3" }), _jsx("span", { className: "truncate", children: text })] }))] }, toolCallId));
         },
     },
     listMoldableAppApi: {

package/dist/components/chat/vertical-scroll-fade.d.ts

@@ -0,0 +1,6 @@
+export interface VerticalScrollFadeEdges {
+    top: boolean;
+    bottom: boolean;
+}
+export declare function getVerticalScrollMask({ top, bottom }: VerticalScrollFadeEdges, fadeSize?: string): string;
+//# sourceMappingURL=vertical-scroll-fade.d.ts.map

package/dist/components/chat/vertical-scroll-fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-scroll-fade.d.ts","sourceRoot":"","sources":["../../../src/components/chat/vertical-scroll-fade.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,OAAO,CAAA;IACZ,MAAM,EAAE,OAAO,CAAA;CAChB;AAED,wBAAgB,qBAAqB,CACnC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,uBAAuB,EACxC,QAAQ,SAAW,GAClB,MAAM,CAWR"}

package/dist/components/chat/vertical-scroll-fade.js

@@ -0,0 +1,12 @@
+export function getVerticalScrollMask({ top, bottom }, fadeSize = '2.5rem') {
+    if (top && bottom) {
+        return `linear-gradient(to bottom, transparent 0%, black ${fadeSize}, black calc(100% - ${fadeSize}), transparent 100%)`;
+    }
+    if (top) {
+        return `linear-gradient(to bottom, transparent 0%, black ${fadeSize}, black 100%)`;
+    }
+    if (bottom) {
+        return `linear-gradient(to bottom, black 0%, black calc(100% - ${fadeSize}), transparent 100%)`;
+    }
+    return 'none';
+}

package/dist/components/hardware/bluetooth-panel-helpers.d.ts

@@ -0,0 +1,9 @@
+export type BluetoothSubscriptionCleanup = () => Promise<void>;
+/**
+ * Stops every active observer before returning. Successful entries are removed,
+ * while failed entries stay registered so the caller can retry cleanup.
+ */
+export declare function cleanupBluetoothSubscriptions(subscriptions: Map<string, BluetoothSubscriptionCleanup>): Promise<void>;
+/** Parses a compact or separator-delimited hexadecimal Bluetooth value. */
+export declare function parseBluetoothHexBytes(value: string): Uint8Array<ArrayBuffer>;
+//# sourceMappingURL=bluetooth-panel-helpers.d.ts.map

package/dist/components/hardware/bluetooth-panel-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bluetooth-panel-helpers.d.ts","sourceRoot":"","sources":["../../../src/components/hardware/bluetooth-panel-helpers.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,4BAA4B,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;AAE9D;;;GAGG;AACH,wBAAsB,6BAA6B,CACjD,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,4BAA4B,CAAC,GACvD,OAAO,CAAC,IAAI,CAAC,CAef;AAED,2EAA2E;AAC3E,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC,CAqB7E"}

package/dist/components/hardware/bluetooth-panel-helpers.js

@@ -0,0 +1,37 @@
+/**
+ * Stops every active observer before returning. Successful entries are removed,
+ * while failed entries stay registered so the caller can retry cleanup.
+ */
+export async function cleanupBluetoothSubscriptions(subscriptions) {
+    const failures = [];
+    await Promise.all([...subscriptions].map(async ([key, stop]) => {
+        try {
+            await stop();
+            if (subscriptions.get(key) === stop)
+                subscriptions.delete(key);
+        }
+        catch (cause) {
+            failures.push(cause);
+        }
+    }));
+    if (failures.length > 0)
+        throw failures[0];
+}
+/** Parses a compact or separator-delimited hexadecimal Bluetooth value. */
+export function parseBluetoothHexBytes(value) {
+    const normalized = value
+        .trim()
+        .replace(/0x/gi, '')
+        .replace(/[\s,:-]+/g, '');
+    if (normalized.length === 0) {
+        throw new TypeError('Enter at least one hexadecimal byte.');
+    }
+    if (normalized.length % 2 !== 0 || !/^[0-9a-f]+$/i.test(normalized)) {
+        throw new TypeError('Use complete hexadecimal bytes, such as 01 A0 FF.');
+    }
+    const bytes = new Uint8Array(new ArrayBuffer(normalized.length / 2));
+    for (let index = 0; index < bytes.length; index++) {
+        bytes[index] = Number.parseInt(normalized.slice(index * 2, index * 2 + 2), 16);
+    }
+    return bytes;
+}

package/dist/components/hardware/bluetooth-panel.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { type MoldableBluetoothConnection, type MoldableBluetoothDevice, type MoldableBluetoothRemoteGATTCharacteristic, type MoldableNativeBluetoothDevice } from '../../lib/native-hardware';
+export type MoldableBluetoothStatus = 'idle' | 'requesting' | 'connecting' | 'connected' | 'error';
+export interface MoldableBluetoothCharacteristicInfo {
+    serviceUuid: string;
+    uuid: string;
+    /** Property names when the runtime exposes them; empty when unknown. */
+    properties: string[];
+    /** Web Bluetooth handle; null on the desktop bridge (UUIDs drive I/O). */
+    characteristic: MoldableBluetoothRemoteGATTCharacteristic | null;
+}
+export interface MoldableBluetoothServiceInfo {
+    uuid: string;
+    characteristics: MoldableBluetoothCharacteristicInfo[];
+}
+export interface UseMoldableBluetoothOptions {
+    onValue?: (characteristic: MoldableBluetoothCharacteristicInfo, value: DataView) => void;
+}
+/**
+ * Bluetooth LE state machine behind `BluetoothPanel`. Handles both transports
+ * returned by `requestMoldableBluetoothWithFallback`: Web Bluetooth (GATT
+ * connection + service discovery) and the desktop bridge (UUID-addressed I/O
+ * on an already-connected device).
+ */
+export declare function useMoldableBluetooth(options?: UseMoldableBluetoothOptions): {
+    status: MoldableBluetoothStatus;
+    device: MoldableBluetoothDevice | MoldableNativeBluetoothDevice | null;
+    connection: MoldableBluetoothConnection | null;
+    disconnecting: boolean;
+    services: MoldableBluetoothServiceInfo[];
+    subscribedUuids: string[];
+    error: Error | null;
+    entries: import("./stream-log").StreamLogEntry[];
+    request: (serviceUuid?: string) => Promise<void>;
+    connect: () => Promise<void>;
+    disconnect: () => Promise<void>;
+    read: (characteristic: MoldableBluetoothCharacteristicInfo) => Promise<void>;
+    subscribe: (characteristic: MoldableBluetoothCharacteristicInfo) => Promise<void>;
+    unsubscribe: (characteristic: MoldableBluetoothCharacteristicInfo) => Promise<void>;
+    write: (characteristic: MoldableBluetoothCharacteristicInfo, bytes: BufferSource) => Promise<void>;
+    writeHex: (characteristic: MoldableBluetoothCharacteristicInfo, value: string) => Promise<void>;
+    clearEntries: () => void;
+};
+export interface BluetoothPanelProps extends React.ComponentProps<'div'> {
+    /** Prefill and scope scanning/discovery to one GATT service UUID. */
+    serviceUuid?: string;
+    onValue?: (characteristic: MoldableBluetoothCharacteristicInfo, value: DataView) => void;
+}
+/**
+ * Bluetooth LE panel: scan (optionally scoped to a service UUID), connect,
+ * browse discovered characteristics, and read, write, or subscribe to values
+ * with a live hex log.
+ */
+declare function BluetoothPanel({ className, serviceUuid, onValue, ...props }: BluetoothPanelProps): import("react/jsx-runtime").JSX.Element;
+export { BluetoothPanel };
+//# sourceMappingURL=bluetooth-panel.d.ts.map

package/dist/components/hardware/bluetooth-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bluetooth-panel.d.ts","sourceRoot":"","sources":["../../../src/components/hardware/bluetooth-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,2BAA2B,EAChC,KAAK,uBAAuB,EAC5B,KAAK,yCAAyC,EAG9C,KAAK,6BAA6B,EAQnC,MAAM,2BAA2B,CAAA;AAqBlC,MAAM,MAAM,uBAAuB,GAC/B,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,OAAO,CAAA;AAgDX,MAAM,WAAW,mCAAmC;IAClD,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,0EAA0E;IAC1E,cAAc,EAAE,yCAAyC,GAAG,IAAI,CAAA;CACjE;AAED,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,MAAM,CAAA;IACZ,eAAe,EAAE,mCAAmC,EAAE,CAAA;CACvD;AA+ED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,CACR,cAAc,EAAE,mCAAmC,EACnD,KAAK,EAAE,QAAQ,KACZ,IAAI,CAAA;CACV;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,2BAAgC;;;;;;;;;4BAkJlB,MAAM;;;2BAiDJ,mCAAmC;gCA0BnC,mCAAmC;kCAqCnC,mCAAmC;4BAqBxC,mCAAmC,SAC5C,YAAY;+BAmCH,mCAAmC,SAC5C,MAAM;;EAsClB;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACtE,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,CACR,cAAc,EAAE,mCAAmC,EACnD,KAAK,EAAE,QAAQ,KACZ,IAAI,CAAA;CACV;AAED;;;;GAIG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,WAAW,EACX,OAAO,EACP,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiPrB;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}