@columenlabs/lumen-ui 0.1.211 → 0.1.213

package/dist/assistant/chat-image.d.ts

@@ -0,0 +1,4 @@
+export declare function ChatImage({ src, alt }: {
+    src: string;
+    alt: string;
+}): import("react").JSX.Element;

package/dist/assistant/chat-image.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ChatImage: an image in a chat message. A thumbnail until clicked; then it opens full width in place,
+// where the wheel or a pinch zooms at the pointer, a drag or two fingers pan and a double-click
+// toggles fit and 2× (react-zoom-pan-pinch). Its toolbar zooms, resets, opens the image in a 90%
+// lightbox with the same controls (the kit's Dialog: Esc, × or a click outside closes it) and
+// shrinks it back to the thumbnail.
+import { Maximize2Icon, Minimize2Icon, RotateCcwIcon, XIcon, ZoomInIcon, ZoomOutIcon, } from 'lucide-react';
+import { useState } from 'react';
+import { TransformComponent, TransformWrapper, useControls, useTransformEffect, } from 'react-zoom-pan-pinch';
+import { IconButton } from '../icon-button.js';
+import { cn } from '../lib/utils.js';
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '../ui/dialog.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+const MAX_SCALE = 8;
+/** The zoom buttons and the scale between them; `children` are the buttons after a divider. */
+function ZoomBar({ children }) {
+    const { zoomIn, zoomOut, resetTransform } = useControls();
+    const [scale, setScale] = useState(1);
+    useTransformEffect(({ state }) => setScale(state.scale));
+    return (_jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-0.5 rounded-lg border bg-popover/90 p-0.5 text-popover-foreground shadow-sm backdrop-blur-sm", "data-slot": "image-zoom-bar", children: [_jsx(IconButton, { icon: ZoomOutIcon, label: "Zoom out", disabled: scale <= 1.001, onClick: () => zoomOut() }), _jsxs("span", { className: "num min-w-10 text-center text-muted-foreground text-xs", "aria-live": "polite", children: [Math.round(scale * 100), "%"] }), _jsx(IconButton, { icon: ZoomInIcon, label: "Zoom in", disabled: scale >= MAX_SCALE - 0.001, onClick: () => zoomIn() }), _jsx(IconButton, { icon: RotateCcwIcon, label: "Reset zoom", onClick: () => resetTransform() }), _jsx("span", { className: "mx-0.5 h-4 w-px bg-border", "aria-hidden": true }), children] }));
+}
+/** The image at fit (scale 1), with zoom and pan; the wrapper takes the box its parent gives it. */
+function Zoomable({ src, alt, children, }) {
+    return (_jsxs(TransformWrapper, { minScale: 1, maxScale: MAX_SCALE, centerZoomedOut: true, wheel: { step: 0.004 }, doubleClick: { mode: 'toggle', step: 1 }, children: [_jsx(ZoomBar, { children: children }), _jsx(TransformComponent, { wrapperClass: "!size-full cursor-grab active:cursor-grabbing", contentClass: "!size-full", children: _jsx("img", { src: src, alt: alt, draggable: false, className: "size-full object-contain" }) })] }));
+}
+export function ChatImage({ src, alt }) {
+    const [open, setOpen] = useState(false);
+    const [full, setFull] = useState(false);
+    const [ratio, setRatio] = useState(null);
+    if (!open) {
+        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": "View larger", onClick: () => setOpen(true), className: "group/thumb relative cursor-zoom-in overflow-hidden rounded-md border outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("img", { src: src, alt: alt, className: "max-h-32 max-w-40 object-cover", onLoad: (e) => {
+                                    const { naturalWidth: w, naturalHeight: h } = e.currentTarget;
+                                    if (w && h)
+                                        setRatio(w / h);
+                                } }), _jsx("span", { className: "absolute top-1 right-1 flex size-6 items-center justify-center rounded-md bg-background/80 opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100", children: _jsx(Maximize2Icon, { className: "size-3.5", "aria-hidden": true }) })] }) }), _jsx(TooltipContent, { children: "View larger" })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative w-full overflow-hidden rounded-md border bg-background", style: { aspectRatio: ratio ?? 4 / 3, maxHeight: '60vh' }, "data-slot": "chat-image", children: _jsxs(Zoomable, { src: src, alt: alt, children: [_jsx(IconButton, { icon: Maximize2Icon, label: "Full screen", onClick: () => setFull(true) }), _jsx(IconButton, { icon: Minimize2Icon, label: "Shrink", onClick: () => {
+                                setOpen(false);
+                                setFull(false);
+                            } })] }) }), _jsx(Dialog, { open: full, onOpenChange: setFull, children: _jsxs(DialogContent, { showCloseButton: false, "aria-describedby": undefined, 
+                    // Focus the box, not its first button: a focused button shows its tooltip, which would take
+                    // the first Esc.
+                    onOpenAutoFocus: (e) => {
+                        e.preventDefault();
+                        e.currentTarget.focus();
+                    }, className: cn('h-[90vh] w-[90vw] max-w-none overflow-hidden p-0 sm:max-w-none', 'max-md:h-full max-md:w-full'), children: [_jsx(DialogTitle, { className: "sr-only", children: alt }), _jsx("div", { className: "relative size-full", children: _jsx(Zoomable, { src: src, alt: alt, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) })] }));
+}

package/dist/assistant/lumen-assistant.d.ts

@@ -16,6 +16,17 @@ export interface LumenAssistantProps {
     onSettings?: () => void;
     /** Days chats are kept, for the Chats menu's line. */
     keepDays?: number;
+    /**
+     * Chats belong to a place in the app (a workspace, a project): the Chats menu lists the
+     * `current` one's chats (rows whose `scope` matches) and a switch named `label` shows them all,
+     * each with its place's `name`. The switch is kept on this device. A row with no `scope` shows
+     * only with the switch on.
+     */
+    chatScope?: {
+        current: string;
+        label: string;
+        name?: (scope: string) => string | undefined;
+    };
     /** Closes the panel (its ✕). */
     onClose?: () => void;
     /** An outside chat state (the dock shares one between the button and the panel). */
@@ -47,7 +58,7 @@ export interface AssistantCommand {
     run: (args: string) => string | undefined | Promise<string | undefined>;
 }
 /** The assistant's chat: header, messages and composer. */
-export declare function LumenAssistant({ client, context, onSettings, keepDays, onClose, chat: outside, commands, sources, images, }: LumenAssistantProps): import("react").JSX.Element;
+export declare function LumenAssistant({ client, context, onSettings, keepDays, chatScope, onClose, chat: outside, commands, sources, images, }: LumenAssistantProps): import("react").JSX.Element;
 /** An allowance in its unit: `$4.20`, or `350 credits`. */
 export declare const allowanceAmount: (u: AllowanceUnit, n: number) => string;
 /** What the composer sends with the text: the tier picked with `@` and the things pointed at with `#`. */

package/dist/assistant/lumen-assistant.js

@@ -26,6 +26,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet.js';
 import { Spinner } from '../ui/spinner.js';
 import { Textarea } from '../ui/textarea.js';
+import { ChatImage } from './chat-image.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
 import { UsageHistoryView, tokens, usd } from './usage-history.js';
@@ -48,11 +49,12 @@ export function useAssistantStatus(client) {
 export { usd };
 const seconds = (ms) => (ms < 1000 ? `${ms} ms` : `${(ms / 1000).toFixed(1)} s`);
 /** The assistant's chat: header, messages and composer. */
-export function LumenAssistant({ client, context, onSettings, keepDays = 30, onClose, chat: outside, commands = [], sources = [], images = false, }) {
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, }) {
     const own = useAssistantChat(client);
     const chat = outside ?? own;
     const qc = useQueryClient();
     const status = useAssistantStatus(client);
+    const [allScopes, setAllScopes] = useAllScopes(client.key);
     const chats = useQuery({
         queryKey: ['lumen-assistant', client.key, 'chats'],
         queryFn: () => client.chats(),
@@ -181,11 +183,14 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, onC
             allCommands.push(c);
     const shown = useShownAssistantSources();
     const allSources = [...shown, ...sources.filter((x) => !shown.some((y) => y.id === x.id))];
-    return (_jsxs("div", { "data-assistant": "", className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-3", children: [_jsx(SparklesIcon, { className: "size-4 text-edge" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: chat.title || s?.name || 'Assistant' }), s && s.tiers.length > 1 && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Tier", value: s.tier, options: s.tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })), onChange: (t) => void setTier(t) })), _jsx(LumenAssistantChats, { chats: chats.data?.map((c) => ({
+    return (_jsxs("div", { "data-assistant": "", className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-3", children: [_jsx(SparklesIcon, { className: "size-4 text-edge" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: chat.title || s?.name || 'Assistant' }), s && s.tiers.length > 1 && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Tier", value: s.tier, options: s.tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })), onChange: (t) => void setTier(t) })), _jsx(LumenAssistantChats, { chats: chats.data
+                            ?.filter((c) => !chatScope || allScopes || c.scope === chatScope.current)
+                            .map((c) => ({
                             id: c.id,
                             title: c.title,
                             updated_at: new Date(c.at).toISOString(),
-                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, note: `Chats are kept ${keepDays} days after their last message.`, onRefresh: () => void chats.refetch(), onOpen: (c) => void chat.open(c.id) }), _jsx(IconButton, { icon: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _jsx(IconButton, { icon: PlusIcon, label: "New chat", disabled: !chat.items.length, onClick: chat.reset }), onClose && (_jsx(IconButton, { icon: XIcon, label: `Close ${s?.name ?? 'assistant'}`, onClick: onClose }))] }), _jsx(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, onSend: (text, more) => chat.send(text, { ...extra(), ...more }), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage, client: client, spent: s?.spend.usd })] }));
+                            ...(chatScope && allScopes && c.scope ? { where: chatScope.name?.(c.scope) } : {}),
+                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, toggle: chatScope && { label: chatScope.label, on: allScopes, onChange: setAllScopes }, note: `Chats are kept ${keepDays} days after their last message.`, onRefresh: () => void chats.refetch(), onOpen: (c) => void chat.open(c.id) }), _jsx(IconButton, { icon: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _jsx(IconButton, { icon: PlusIcon, label: "New chat", disabled: !chat.items.length, onClick: chat.reset }), onClose && (_jsx(IconButton, { icon: XIcon, label: `Close ${s?.name ?? 'assistant'}`, onClick: onClose }))] }), _jsx(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, onSend: (text, more) => chat.send(text, { ...extra(), ...more }), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage, client: client, spent: s?.spend.usd })] }));
 }
 function Messages({ chat, status, onSettings, }) {
     const end = useRef(null);
@@ -259,7 +264,7 @@ function Item({ item, onSettle, busy, }) {
     const tierName = useContext(TierNames);
     switch (item.kind) {
         case 'user':
-            return (_jsxs("div", { className: "ml-8 self-end rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap", children: [(item.tier || item.refs?.length) && (_jsxs("span", { className: "mb-1 flex flex-wrap gap-1", children: [item.tier && _jsx(ComposerChip, { sign: "@", label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: "#", label: r.label }, `${r.kind}:${r.label}:${i}`)))] })), item.images?.length ? (_jsx("span", { className: "mb-1 flex flex-wrap gap-1.5", children: item.images.map((src, i) => (_jsx("img", { src: src, alt: `Pasted ${i + 1}`, className: "max-h-32 max-w-40 rounded-md border object-cover" }, `${i}:${src.length}`))) })) : null, item.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
+            return (_jsxs("div", { className: "ml-8 self-end rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap has-[[data-slot=chat-image]]:ml-0 has-[[data-slot=chat-image]]:w-full", children: [(item.tier || item.refs?.length) && (_jsxs("span", { className: "mb-1 flex flex-wrap gap-1", children: [item.tier && _jsx(ComposerChip, { sign: "@", label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: "#", label: r.label }, `${r.kind}:${r.label}:${i}`)))] })), item.images?.length ? (_jsx("span", { className: "mb-1 flex flex-wrap gap-1.5", children: item.images.map((src, i) => (_jsx(ChatImage, { src: src, alt: `Pasted ${i + 1}` }, `${i}:${src.length}`))) })) : null, item.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
         case 'text':
             return (_jsxs("div", { className: "prose-sm text-sm leading-relaxed [&_code]:font-code [&_code]:text-xs [&_li]:ml-4 [&_ol]:list-decimal [&_p]:my-1.5 [&_ul]:list-disc", children: [_jsx(ChatMarkdown, { children: item.text }), item.live && (_jsx("span", { className: "ml-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-foreground/60 align-middle" }))] }));
         case 'step':
@@ -843,3 +848,26 @@ export function useLumenAssistantDock(client, o = {
         panel: (_jsx(LumenAssistantPanel, { name: name, open: open, onOpenChange: setOpen, children: () => (_jsx(LumenAssistant, { client: client, chat: chat, onClose: () => setOpen(false), ...props })) })),
     };
 }
+/** The Chats menu's All switch (`chatScope`), kept on this device per assistant. */
+function useAllScopes(key) {
+    const name = `lumen-assistant:${key}:all-scopes`;
+    const [on, setOn] = useState(() => {
+        try {
+            return localStorage.getItem(name) === '1';
+        }
+        catch {
+            return false;
+        }
+    });
+    const set = (v) => {
+        setOn(v);
+        try {
+            if (v)
+                localStorage.setItem(name, '1');
+            else
+                localStorage.removeItem(name);
+        }
+        catch { }
+    };
+    return [on, set];
+}

package/dist/assistant-panel.d.ts

@@ -35,17 +35,25 @@ export interface AssistantChat {
     title: string;
     /** ISO time of its last message. */
     updated_at: string;
+    /** Where it was started, shown before its time (`LumenAssistant` `chatScope`, its switch on). */
+    where?: string;
 }
 /**
  * Chats, a dropdown from the panel header: chats grouped by when they were
  * last used, searched by title. A row is read ahead when highlighted, so picking it opens at once.
  */
-export declare function LumenAssistantChats<C extends AssistantChat>({ chats, value, note, disabled, onOpen, onRefresh, onHighlight, }: {
+export declare function LumenAssistantChats<C extends AssistantChat>({ chats, value, note, toggle, disabled, onOpen, onRefresh, onHighlight, }: {
     /** null while loading. */
     chats: C[] | null;
     value?: string;
     /** A line above the list: how long chats are kept. */
     note?: ReactNode;
+    /** A switch at the top of the menu, such as All workspaces (`LumenAssistant` `chatScope`). */
+    toggle?: {
+        label: string;
+        on: boolean;
+        onChange: (on: boolean) => void;
+    };
     disabled?: boolean;
     onOpen: (chat: C) => void;
     /** The menu opened: read the list again. */

package/dist/assistant-panel.js

@@ -6,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Open or closed and the width are each browser tab's own (sessionStorage). The
 // product fills the body (the product's assistant: its chat, composer, cards and spend).
 import { HistoryIcon, SparklesIcon } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { cn } from './lib/utils.js';
 import { LumenBoundary } from './lumen-boundary.js';
@@ -15,7 +15,9 @@ import { ASSISTANT_WIDTH, usePrefs } from './prefs.js';
 import { ResizeEdge, tabState } from './side-dock.js';
 import { Button } from './ui/button.js';
 import { Kbd } from './ui/kbd.js';
+import { Label } from './ui/label.js';
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from './ui/sheet.js';
+import { Switch } from './ui/switch.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
 export { tabState };
 /** Whether the assistant is open in this tab. */
@@ -138,8 +140,9 @@ function whenOf(at, now, group, timeZone) {
  * Chats, a dropdown from the panel header: chats grouped by when they were
  * last used, searched by title. A row is read ahead when highlighted, so picking it opens at once.
  */
-export function LumenAssistantChats({ chats, value, note, disabled, onOpen, onRefresh, onHighlight, }) {
+export function LumenAssistantChats({ chats, value, note, toggle, disabled, onOpen, onRefresh, onHighlight, }) {
     const { timeZone } = usePrefs();
+    const toggleId = useId();
     const now = new Date();
     const byId = new Map((chats ?? []).map((c) => [c.id, c]));
     const groups = GROUPS.map((group) => ({
@@ -148,11 +151,17 @@ export function LumenAssistantChats({ chats, value, note, disabled, onOpen, onRe
             const at = new Date(c.updated_at);
             const g = groupOf(at, now, timeZone);
             return g === group
-                ? [{ value: c.id, label: c.title, detail: whenOf(at, now, g, timeZone) }]
+                ? [
+                    {
+                        value: c.id,
+                        label: c.title,
+                        detail: [c.where, whenOf(at, now, g, timeZone)].filter(Boolean).join(' · '),
+                    },
+                ]
                 : [];
         }),
     })).filter((g) => g.options.length > 0);
-    return (_jsx(LumenSelector, { trigger: "icon", icon: HistoryIcon, label: "Chats", search: true, align: "end", groups: groups, empty: chats === null ? 'Loading…' : 'No chats yet', header: note && _jsx("p", { className: "px-2 pt-1 text-xs text-muted-foreground", children: note }), value: value, disabled: disabled, onOpenChange: (o) => o && onRefresh?.(), onHighlight: (id) => {
+    return (_jsx(LumenSelector, { trigger: "icon", icon: HistoryIcon, label: "Chats", search: true, align: "end", groups: groups, empty: chats === null ? 'Loading…' : 'No chats yet', header: (toggle || note) && (_jsxs(_Fragment, { children: [toggle && (_jsxs("div", { className: "flex items-center gap-2 px-2 pt-1.5", children: [_jsx(Label, { htmlFor: toggleId, className: "min-w-0 flex-1 truncate text-xs font-normal", children: toggle.label }), _jsx(Switch, { id: toggleId, checked: toggle.on, onCheckedChange: toggle.onChange, "aria-label": toggle.label })] })), note && _jsx("p", { className: "px-2 pt-1 text-xs text-muted-foreground", children: note })] })), value: value, disabled: disabled, onOpenChange: (o) => o && onRefresh?.(), onHighlight: (id) => {
             const c = byId.get(id);
             if (c)
                 onHighlight?.(c);

package/dist/lumen-selector.js

@@ -130,7 +130,7 @@ function useDuplicateWarning(all) {
         }
     }, [all]);
 }
-const ROW = 'relative flex w-full cursor-default items-center gap-2 rounded-md px-2 text-sm outline-hidden select-none h-8 max-md:h-11 max-md:px-4 max-md:text-[15px] data-highlighted:bg-accent data-highlighted:text-accent-foreground data-selected:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4';
+const ROW = 'relative flex w-full cursor-default items-center gap-2 rounded-md px-2 text-sm outline-hidden select-none h-8 max-md:h-11 max-md:px-4 max-md:text-[15px] data-highlighted:bg-accent data-highlighted:text-accent-foreground data-selected:bg-muted data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4';
 /** A row with a description or thumbnail grows to fit it. */
 const TALL = 'h-auto min-h-8 py-1.5 max-md:h-auto';
 const GROUP_LABEL = 'sticky top-0 z-10 bg-popover px-2 pt-2 pb-1 text-xs font-medium text-muted-foreground max-md:px-4';
@@ -138,12 +138,14 @@ const MORE = 'flex h-7 w-full items-center gap-1.5 rounded-md pr-2 pl-8 text-lef
 /** One row's inside: box or icon, label, detail, and the check when picked. */
 export function SelectorRowContent({ option, selected, multiple, trailing, }) {
     const Icon = option.icon;
-    return (_jsxs(_Fragment, { children: [option.indent && _jsx("span", { "aria-hidden": true, className: "w-4 shrink-0" }), multiple && (_jsx("span", { "aria-hidden": true, className: cn('flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input', selected && 'border-primary bg-primary text-primary-foreground'), children: selected && _jsx(CheckIcon, { className: "size-3" }) })), option.thumb ? (_jsx("span", { "aria-hidden": true, className: "shrink-0", children: option.thumb })) : (Icon && _jsx(Icon, { className: "text-muted-foreground" })), option.description ? (_jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate", children: option.content ?? option.label }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: option.description })] })) : (_jsx("span", { className: cn('min-w-0 truncate', option.detail ? 'max-w-2/3 shrink-0' : 'flex-1'), children: option.content ?? option.label })), option.detail && (_jsx("span", { className: "min-w-0 flex-1 truncate text-right text-xs text-muted-foreground", title: option.detail, children: option.detail })), trailing] }));
+    const off = !!option.disabled;
+    const reason = typeof option.disabled === 'string' ? option.disabled : null;
+    return (_jsxs(_Fragment, { children: [option.indent && _jsx("span", { "aria-hidden": true, className: "w-4 shrink-0" }), multiple && (_jsx("span", { "aria-hidden": true, className: cn('flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input', selected && 'border-primary bg-primary text-primary-foreground'), children: selected && _jsx(CheckIcon, { className: "size-3" }) })), option.thumb ? (_jsx("span", { "aria-hidden": true, className: "shrink-0", children: option.thumb })) : (Icon && _jsx(Icon, { className: cn('text-muted-foreground', off && 'opacity-60') })), option.description ? (_jsxs("span", { className: cn('flex min-w-0 flex-1 flex-col', off && 'text-muted-foreground'), children: [_jsx("span", { className: "truncate", children: option.content ?? option.label }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: option.description })] })) : (_jsx("span", { className: cn('min-w-0 truncate', option.detail || reason ? 'max-w-2/3 shrink-0' : 'flex-1', off && 'text-muted-foreground'), children: option.content ?? option.label })), reason ? (_jsxs("span", { className: "ml-auto inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-px text-xs text-foreground/80", children: [_jsx(CheckIcon, { className: "size-3! text-emerald-600 dark:text-emerald-400" }), reason] })) : (option.detail && (_jsx("span", { className: "min-w-0 flex-1 truncate text-right text-xs text-muted-foreground", title: option.detail, children: option.detail }))), trailing] }));
 }
 function Rows({ shown, picked, multiple, full, expand, }) {
     return shown.map((g) => (_jsxs(Base.Group, { items: g.rows.map((o) => o.value), children: [g.label && _jsx(Base.GroupLabel, { className: GROUP_LABEL, children: g.label }), g.rows.map((o) => {
                 const row = (_jsx(Base.Item, { value: o.value, disabled: !!o.disabled || (full && !picked.has(o.value)), className: cn(ROW, (o.description || o.thumb) && TALL), children: _jsx(SelectorRowContent, { option: o, selected: picked.has(o.value), multiple: multiple && o.value !== CREATE }) }, o.value));
-                return typeof o.disabled === 'string' ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: row }) }), _jsx(TooltipContent, { children: o.disabled })] }, o.value)) : (row);
+                return row;
             }), g.more > 0 && (_jsxs("button", { type: "button", className: MORE, onMouseDown: (e) => e.preventDefault(), onClick: () => expand(g.label), children: [_jsx(ChevronDownIcon, { className: "size-3.5" }), g.more, " more"] }))] }, g.label || '\u0000')));
 }
 const FIELD = "flex w-fit min-w-0 items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
@@ -283,12 +285,13 @@ export function LumenSelector(props) {
 export function LumenSelectorList({ options, groups, query, onPick, onClose, empty, header, className, handle, label, fuzzy, }) {
     const none = useMemo(() => new Set(), []);
     const { shown, flat, expand } = useSelectorRows(options, groups, query, none, fuzzy);
-    const [at, setAt] = useState(0);
+    const first = flat.findIndex((o) => !o.disabled);
+    const [at, setAt] = useState(first);
     const listId = useId();
-    // biome-ignore lint/correctness/useExhaustiveDependencies: a new query starts at the first row.
-    useEffect(() => setAt(0), [query]);
-    const index = Math.min(at, flat.length - 1);
-    const active = flat[index];
+    // biome-ignore lint/correctness/useExhaustiveDependencies: a new query starts at the first pickable row.
+    useEffect(() => setAt(first), [query]);
+    const index = flat[at] && !flat[at].disabled ? at : first;
+    const active = index < 0 ? undefined : flat[index];
     useEffect(() => {
         spotlight(active?.target, active?.targetName ?? active?.label);
     }, [active]);
@@ -300,7 +303,13 @@ export function LumenSelectorList({ options, groups, query, onPick, onClose, emp
             if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                 e.preventDefault();
                 const step = e.key === 'ArrowDown' ? 1 : -1;
-                setAt((i) => (Math.min(i, flat.length - 1) + step + flat.length) % flat.length);
+                if (index < 0)
+                    return true;
+                let i = index;
+                do
+                    i = (i + step + flat.length) % flat.length;
+                while (flat[i]?.disabled && i !== index);
+                setAt(i);
                 return true;
             }
             if ((e.key === 'Enter' && !e.shiftKey) || e.key === 'Tab') {
@@ -317,9 +326,9 @@ export function LumenSelectorList({ options, groups, query, onPick, onClose, emp
             }
             return false;
         },
-    }), [flat, active, onPick, onClose]);
+    }), [flat, index, active, onPick, onClose]);
     return (_jsxs("div", { "data-slot": "lumen-selector-list", className: cn('flex max-h-80 flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10', className), children: [header, _jsxs("div", { id: listId, "aria-label": label, className: "min-h-0 overflow-y-auto overscroll-contain p-1", children: [!flat.length && (_jsx("p", { className: "px-2 py-3 text-center text-sm text-muted-foreground", children: empty ?? 'Nothing matches' })), shown.map((g) => (_jsxs("section", { "aria-label": g.label || undefined, children: [g.label && _jsx("div", { className: GROUP_LABEL, children: g.label }), g.rows.map((o) => {
                                 const i = flat.indexOf(o);
-                                return (_jsx("button", { type: "button", tabIndex: -1, "aria-current": i === index || undefined, disabled: !!o.disabled, "data-highlighted": i === index ? '' : undefined, className: cn(ROW, 'text-left'), onMouseMove: () => i !== index && setAt(i), onMouseDown: (e) => e.preventDefault(), onClick: () => !o.disabled && onPick(o), children: _jsx(SelectorRowContent, { option: o, trailing: i === 0 ? (_jsx("kbd", { className: "rounded border px-1 font-mono text-[11px] text-muted-foreground", children: "Tab" })) : undefined }) }, o.value));
+                                return (_jsx("button", { type: "button", tabIndex: -1, "aria-current": i === index || undefined, disabled: !!o.disabled, "data-disabled": o.disabled ? '' : undefined, "data-highlighted": i === index ? '' : undefined, className: cn(ROW, 'text-left'), onMouseMove: () => i !== index && setAt(i), onMouseDown: (e) => e.preventDefault(), onClick: () => !o.disabled && onPick(o), children: _jsx(SelectorRowContent, { option: o, trailing: i === index ? (_jsx("kbd", { className: "rounded border px-1 font-mono text-[11px] text-muted-foreground", children: "Tab" })) : undefined }) }, o.value));
                             }), g.more > 0 && (_jsxs("button", { type: "button", className: MORE, onMouseDown: (e) => e.preventDefault(), onClick: () => expand(g.label), children: [_jsx(ChevronDownIcon, { className: "size-3.5" }), g.more, " more ", g.label.toLowerCase()] }))] }, g.label || '\u0000')))] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.211",
+  "version": "0.1.213",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.211",
+    "@columenlabs/lumen-ui-types": "0.1.213",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -75,6 +75,7 @@
     "react-intersection-observer": "9.16.0",
     "react-markdown": "10.1.0",
     "react-resizable-panels": "^4.14.3",
+    "react-zoom-pan-pinch": "4.2.0",
     "recharts": "^3.10.1",
     "remark-gfm": "4.0.1",
     "shiki": "4.5.0",