@moldable-ai/ui 0.2.19 → 0.2.21

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

@@ -4,20 +4,54 @@ export interface ConversationMeta {
     createdAt: string;
     updatedAt: string;
     messageCount: number;
+    appId?: string | null;
+    appName?: string | null;
+    appIcon?: string | null;
+    /** Optional presentation-only grouping for chats that still use the Chats runtime. */
+    groupId?: string | null;
+    groupName?: string | null;
+    groupIcon?: string | null;
+    isActive?: boolean;
 }
-interface ConversationHistoryProps {
+export interface ConversationGroup {
+    id: string;
+    appId: string | null;
+    label: string;
+    icon?: string | null;
+    conversations: ConversationMeta[];
+}
+export declare function getConversationGroupId(appId: string | null, groupId?: string | null): string;
+export declare function isConversationIconImageSource(icon?: string | null): icon is string;
+interface ConversationListProps {
     conversations: ConversationMeta[];
     currentConversationId?: string | null;
+    currentAppId?: string | null;
     onSelect: (id: string) => void;
-    onDelete?: (id: string) => void;
-    onNewChat?: () => void;
-    newChatDisabled?: boolean;
+    onArchive?: (id: string) => void;
+    onArchiveGroup?: (group: ConversationGroup) => void;
     disabled?: boolean;
     className?: string;
+}
+interface ConversationHistoryProps extends ConversationListProps {
+    onNewChat?: () => void;
+    newChatDisabled?: boolean;
     dropdownAlign?: 'start' | 'center' | 'end';
     dropdownSide?: 'top' | 'right' | 'bottom' | 'left';
     tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
+    hasMoreConversations?: boolean;
+    isLoadingMoreConversations?: boolean;
+    onLoadMoreConversations?: () => void | Promise<unknown>;
+}
+interface ConversationSidebarProps extends ConversationListProps {
+    onNewChat?: () => void;
+    newChatDisabled?: boolean;
+    hideScrollbar?: boolean;
+    hasMoreConversations?: boolean;
+    isLoadingMoreConversations?: boolean;
+    onLoadMoreConversations?: () => void | Promise<unknown>;
 }
-export declare function ConversationHistory({ conversations, currentConversationId, onSelect, onDelete, onNewChat, newChatDisabled, disabled, className, dropdownAlign, dropdownSide, tooltipSide, }: ConversationHistoryProps): import("react/jsx-runtime").JSX.Element | null;
+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 {};
 //# 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":"AAkBA,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;CACrB;AAED,UAAU,wBAAwB;IAChC,aAAa,EAAE,gBAAgB,EAAE,CAAA;IACjC,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,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;CAClD;AAiBD,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,qBAAqB,EACrB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,QAAgB,EAChB,SAAS,EACT,aAAuB,EACvB,YAAuB,EACvB,WAAsB,GACvB,EAAE,wBAAwB,kDA6F1B"}
+{"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

@@ -1,32 +1,198 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Clock, Plus, Trash2 } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Archive, ChevronDown, Folder, LoaderCircle, MessageCircle, Plus, } from 'lucide-react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { cn } from '../../lib/utils';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../ui/alert-dialog';
 import { Button } from '../ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from '../ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip';
-function formatRelativeTime(dateStr) {
-    const date = new Date(dateStr);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-    if (diffMins < 1)
-        return 'Just now';
-    if (diffMins < 60)
-        return `${diffMins}m ago`;
-    if (diffHours < 24)
-        return `${diffHours}h ago`;
-    if (diffDays < 7)
-        return `${diffDays}d ago`;
-    return date.toLocaleDateString();
+import { getVerticalScrollMask, } from './vertical-scroll-fade';
+const CHATS_GROUP_ID = 'scope:chats';
+const CUSTOM_GROUP_PREFIX = 'scope:group:';
+const COLLAPSED_GROUP_CONVERSATION_LIMIT = 5;
+const IMAGE_ICON_URL_PATTERN = /^(?:asset|https?|blob|data):/i;
+export function getConversationGroupId(appId, groupId) {
+    if (appId !== null)
+        return `scope:app:${appId}`;
+    if (groupId === 'chats')
+        return CHATS_GROUP_ID;
+    return groupId ? `${CUSTOM_GROUP_PREFIX}${groupId}` : CHATS_GROUP_ID;
 }
-export function ConversationHistory({ conversations, currentConversationId, onSelect, onDelete, onNewChat, newChatDisabled = false, disabled = false, className, dropdownAlign = 'start', dropdownSide = 'bottom', tooltipSide = 'bottom', }) {
-    if (conversations.length === 0 && !onNewChat) {
-        return null;
+export function isConversationIconImageSource(icon) {
+    return Boolean(icon && (icon.startsWith('/') || IMAGE_ICON_URL_PATTERN.test(icon)));
+}
+export function groupConversations(conversations, currentAppId) {
+    const byScope = new Map();
+    for (const conversation of conversations) {
+        const appId = conversation.appId ?? null;
+        const id = getConversationGroupId(appId, conversation.groupId);
+        const existing = byScope.get(id);
+        if (existing) {
+            existing.conversations.push(conversation);
+            continue;
+        }
+        byScope.set(id, {
+            id,
+            appId,
+            label: appId
+                ? conversation.appName || appId
+                : conversation.groupName || conversation.groupId || 'Chats',
+            icon: id === CHATS_GROUP_ID
+                ? null
+                : appId
+                    ? conversation.appIcon
+                    : conversation.groupIcon,
+            conversations: [conversation],
+        });
+    }
+    const groups = [...byScope.values()];
+    for (const group of groups) {
+        group.conversations.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+    }
+    return groups.sort((a, b) => {
+        const aIsChats = a.id === CHATS_GROUP_ID;
+        const bIsChats = b.id === CHATS_GROUP_ID;
+        if (aIsChats !== bIsChats)
+            return aIsChats ? 1 : -1;
+        if (currentAppId != null) {
+            if (a.appId === currentAppId)
+                return -1;
+            if (b.appId === currentAppId)
+                return 1;
+        }
+        const aUpdated = a.conversations[0]?.updatedAt ?? '';
+        const bUpdated = b.conversations[0]?.updatedAt ?? '';
+        return bUpdated.localeCompare(aUpdated) || a.label.localeCompare(b.label);
+    });
+}
+function AppScopeIcon({ icon, isChats, }) {
+    if (isChats)
+        return _jsx(MessageCircle, { className: "size-4" });
+    if (isConversationIconImageSource(icon)) {
+        return _jsx("img", { src: icon, alt: "", className: "size-4 rounded object-cover" });
     }
-    return (_jsx(TooltipProvider, { children: _jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, 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', className), children: _jsx(Clock, { className: "size-4" }) }) }) }), _jsx(TooltipContent, { side: tooltipSide, children: _jsx("p", { children: "Conversation history" }) })] }), _jsxs(DropdownMenuContent, { align: dropdownAlign, side: dropdownSide, className: "w-64", children: [onNewChat && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onClick: onNewChat, disabled: newChatDisabled, title: "New conversation (Cmd+Shift+O)", className: "flex cursor-pointer items-center gap-2", children: [_jsx(Plus, { className: "size-4" }), _jsx("span", { children: "New conversation" }), _jsx(DropdownMenuShortcut, { children: "\u2318\u21E7O" })] }), conversations.length > 0 && _jsx(DropdownMenuSeparator, {})] })), conversations.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground px-2 py-1.5 text-xs font-medium", children: "Recent conversations" }), _jsx(DropdownMenuSeparator, {})] })), _jsx("div", { className: "max-h-64 overflow-y-auto", children: conversations.slice(0, 20).map((conv) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(conv.id), className: cn('group flex cursor-pointer items-start gap-2 py-2', conv.id === currentConversationId && 'bg-accent'), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm", children: conv.title }), _jsxs("p", { className: "text-muted-foreground text-xs", children: [formatRelativeTime(conv.updatedAt), " \u00B7 ", conv.messageCount, ' ', "messages"] })] }), onDelete && (_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: (e) => {
-                                            e.stopPropagation();
-                                            onDelete(conv.id);
-                                        }, className: "text-muted-foreground hover:text-destructive size-6 shrink-0 opacity-0 group-hover:opacity-100", children: _jsx(Trash2, { className: "size-3" }) }))] }, conv.id))) })] })] }) }));
+    if (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, }) {
+    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();
+    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);
+                const hasMoreConversations = group.conversations.length > COLLAPSED_GROUP_CONVERSATION_LIMIT;
+                const visibleConversations = isShowingAll
+                    ? group.conversations
+                    : group.conversations.slice(0, COLLAPSED_GROUP_CONVERSATION_LIMIT);
+                const listId = `${listIdPrefix}-${encodeURIComponent(group.id)}`;
+                return (_jsxs("section", { "data-conversation-group": group.id, children: [_jsxs("div", { className: "group/conversation-scope relative flex items-center", children: [_jsxs("button", { type: "button", "aria-expanded": !isCollapsed, "aria-controls": listId, onClick: () => setCollapsedGroups((current) => {
+                                        const next = new Set(current);
+                                        if (next.has(group.id))
+                                            next.delete(group.id);
+                                        else
+                                            next.add(group.id);
+                                        return next;
+                                    }), 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: [visibleConversations.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))), 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 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);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Archive all chats?" }), _jsxs(AlertDialogDescription, { children: ["Archive all ", groupPendingArchive?.conversations.length ?? 0, " chats in \u201C", groupPendingArchive?.label, "\u201D? You can restore them later from Settings."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { className: "cursor-pointer", children: "Cancel" }), _jsx(AlertDialogAction, { className: "cursor-pointer", onClick: () => {
+                                        if (groupPendingArchive) {
+                                            onArchiveGroup?.(groupPendingArchive);
+                                        }
+                                        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, }) {
+    const scrollContainerRef = useRef(null);
+    const [scrollFadeEdges, setScrollFadeEdges] = useState({
+        top: false,
+        bottom: false,
+    });
+    const updateScrollFadeEdges = useCallback((element) => {
+        const scrollElement = element ?? scrollContainerRef.current;
+        if (!scrollElement)
+            return;
+        const next = {
+            top: scrollElement.scrollTop > 1,
+            bottom: scrollElement.scrollTop + scrollElement.clientHeight <
+                scrollElement.scrollHeight - 1,
+        };
+        setScrollFadeEdges((current) => current.top === next.top && current.bottom === next.bottom
+            ? current
+            : next);
+    }, []);
+    useEffect(() => {
+        const scrollElement = scrollContainerRef.current;
+        if (!scrollElement)
+            return;
+        updateScrollFadeEdges(scrollElement);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            updateScrollFadeEdges(scrollElement);
+        });
+        resizeObserver.observe(scrollElement);
+        const content = scrollElement.firstElementChild;
+        if (content instanceof HTMLElement)
+            resizeObserver.observe(content);
+        return () => resizeObserver.disconnect();
+    }, [conversations, updateScrollFadeEdges]);
+    const scrollMask = getVerticalScrollMask(scrollFadeEdges);
+    const handleScroll = useCallback((element) => {
+        updateScrollFadeEdges(element);
+        if (hasMoreConversations &&
+            !isLoadingMoreConversations &&
+            element.scrollHeight - element.scrollTop - element.clientHeight < 120) {
+            void onLoadMoreConversations?.();
+        }
+    }, [
+        hasMoreConversations,
+        isLoadingMoreConversations,
+        onLoadMoreConversations,
+        updateScrollFadeEdges,
+    ]);
+    return (_jsxs("div", { className: cn('flex min-h-0 flex-col', className), children: [onNewChat && (_jsxs(Button, { variant: "ghost", onClick: onNewChat, disabled: newChatDisabled, className: "mb-3 w-full cursor-pointer justify-start gap-2", children: [_jsx(Plus, { className: "size-4" }), "New conversation"] })), _jsxs("div", { ref: scrollContainerRef, className: cn('min-h-0 flex-1 overflow-y-auto pb-8', hideScrollbar &&
+                    '[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"] }))] })] }));
+}
+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, }) {
+    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 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 &&
+                                    element.scrollHeight -
+                                        element.scrollTop -
+                                        element.clientHeight <
+                                        120) {
+                                    void onLoadMoreConversations?.();
+                                }
+                            }, children: [_jsx(ConversationList, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, 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/chat/index.d.ts

@@ -6,8 +6,8 @@ export { RestoreDialog, type CheckpointInfo, type RestoreDialogProps, } from './
 export { ModelSelector, type ModelOption } from './model-selector';
 export { ModelEffortSelector, resolveModelEffortPresetIndex, type ModelEffortPresetOption, type ModelProviderOption, } from './model-effort-selector';
 export { ReasoningEffortSelector, type ReasoningEffortOption, } from './reasoning-effort-selector';
-export { ConversationHistory, type ConversationMeta, } from './conversation-history';
-export { ChatPanel, type ChatAuthIssue, type ChatContextUsage, type ChatPanelProps, type QueuedChatMessage, type ToolProgressData, resolveChatAuthIssue, } from './chat-panel';
+export { ConversationHistory, ConversationSidebar, groupConversations, type ConversationGroup, type ConversationMeta, } from './conversation-history';
+export { ChatPanel, type ChatAuthIssue, type ChatContextUsage, type ChatPlanUsage, type ChatPlanUsageWindow, type ChatPanelProps, type QueuedChatMessage, type ToolProgressData, resolveChatAuthIssue, } from './chat-panel';
 export { ThinkingTimeline, ThinkingTimelineMarker, type ThinkingTimelineItem, type ThinkingTimelineProps, } from './thinking-timeline';
 export { getToolHandler, DEFAULT_TOOL_HANDLERS, type ToolHandler, } from './tool-handlers';
 export { ToolProgressProvider, useToolProgress, useToolCallProgress, } from './tool-progress-context';

package/dist/components/chat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,KAAK,cAAc,GACpB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC/E,OAAO,EACL,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EACL,mBAAmB,EACnB,6BAA6B,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,mBAAmB,EACnB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,SAAS,EACT,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,oBAAoB,GACrB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,KAAK,WAAW,GACjB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,KAAK,cAAc,GACpB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC/E,OAAO,EACL,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EACL,mBAAmB,EACnB,6BAA6B,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,SAAS,EACT,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,oBAAoB,GACrB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,KAAK,WAAW,GACjB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAA"}

package/dist/components/chat/index.js

@@ -6,7 +6,7 @@ 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, } from './conversation-history';
+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';

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/native-capabilities/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/native-capabilities/bluetooth-panel-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bluetooth-panel-helpers.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/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/native-capabilities/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/native-capabilities/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-capabilities';
+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/native-capabilities/bluetooth-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bluetooth-panel.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/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,+BAA+B,CAAA;AAqBtC,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"}