@columenlabs/lumen-ui 0.1.76 → 0.1.77

package/dist/hooks/use-back-close.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Phone back closes the open overlay (a Sheet, Dialog or AlertDialog), never the page under it.
+ * Opening pushes one history entry on the same URL; back pops it and closes. Closed any other way
+ * (X, a tap outside, a swipe, Esc, a pick) the entry is popped again, but only while it is still
+ * the current one, so a link followed from inside the overlay keeps its navigation.
+ */
+export declare function useBackClose(open: boolean, close: () => void): void;
+/**
+ * An overlay root's open state, controlled or not, with `close()` for its parts (the grab handle)
+ * and phone back wired in (useBackClose).
+ */
+export declare function useOverlayOpen({ open: given, defaultOpen, onOpenChange, }: {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+};

package/dist/hooks/use-back-close.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { useIsMobile } from './use-mobile.js';
+const KEY = '__lumenOverlay';
+/**
+ * Phone back closes the open overlay (a Sheet, Dialog or AlertDialog), never the page under it.
+ * Opening pushes one history entry on the same URL; back pops it and closes. Closed any other way
+ * (X, a tap outside, a swipe, Esc, a pick) the entry is popped again, but only while it is still
+ * the current one, so a link followed from inside the overlay keeps its navigation.
+ */
+export function useBackClose(open, close) {
+    const phone = useIsMobile();
+    const closeRef = React.useRef(close);
+    closeRef.current = close;
+    React.useEffect(() => {
+        if (!phone || !open || typeof window === 'undefined')
+            return;
+        const id = Math.random().toString(36).slice(2);
+        let pushed = false;
+        let popped = false;
+        const onPop = () => {
+            if (window.history.state?.[KEY] === id)
+                return;
+            popped = true;
+            closeRef.current();
+        };
+        // Pushed a tick later, so a mount that is undone at once (React's strict mode) pushes nothing.
+        const timer = window.setTimeout(() => {
+            window.history.pushState({ ...window.history.state, [KEY]: id }, '');
+            pushed = true;
+            window.addEventListener('popstate', onPop);
+        }, 0);
+        return () => {
+            window.clearTimeout(timer);
+            window.removeEventListener('popstate', onPop);
+            if (pushed && !popped && window.history.state?.[KEY] === id)
+                window.history.back();
+        };
+    }, [phone, open]);
+}
+/**
+ * An overlay root's open state, controlled or not, with `close()` for its parts (the grab handle)
+ * and phone back wired in (useBackClose).
+ */
+export function useOverlayOpen({ open: given, defaultOpen, onOpenChange, }) {
+    const [inner, setInner] = React.useState(defaultOpen ?? false);
+    const open = given ?? inner;
+    const change = React.useCallback((o) => {
+        setInner(o);
+        onOpenChange?.(o);
+    }, [onOpenChange]);
+    useBackClose(open, () => change(false));
+    return { open, onOpenChange: change };
+}

package/dist/index.d.ts

@@ -80,6 +80,7 @@ export { SourcesLine, useSourceHealth } from './source-health.js';
 export { TILE_WIDTH, Tile, TileChip, type TileOption, TileRow, TileSpark, TileToggleGroup, } from './tile.js';
 export { type FilterField, type FilterToken, LumenTokenizedFilter, type LumenFilterState, useLumenFilter, } from './lumen-filter.js';
 export { useIsMobile } from './hooks/use-mobile.js';
+export { useBackClose } from './hooks/use-back-close.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';
 export { type AppViewState, useAppView } from './app-views.js';
 export { type ScreenMap, type ScreenOutcome, type ScreenStatus, type WorkspaceOnScreen, type AssistantMove, type AssistantMoveHandlers, type AssistantPage, type AssistantPageType, AssistantScreenProvider, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';

package/dist/index.js

@@ -87,6 +87,7 @@ export { SourcesLine, useSourceHealth } from './source-health.js';
 export { TILE_WIDTH, Tile, TileChip, TileRow, TileSpark, TileToggleGroup, } from './tile.js';
 export { LumenTokenizedFilter, useLumenFilter, } from './lumen-filter.js';
 export { useIsMobile } from './hooks/use-mobile.js';
+export { useBackClose } from './hooks/use-back-close.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';
 export { useAppView } from './app-views.js';
 export { AssistantScreenProvider, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';

package/dist/lumen-drawer.js

@@ -23,7 +23,7 @@ export function LumenDrawer({ open, onClose, title, description, children, foote
     // sheet's X already closes it and a second Close only took room.
     const plain = !footer && !footerStart;
     const foot = (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsx("div", { className: "ml-auto flex items-center gap-2", children: footer ?? (_jsx(SheetClose, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", children: "Close" }) })) })] }));
-    return (_jsx(Sheet, { open: open, onOpenChange: (o) => !o && onClose(), modal: isMobile, children: isMobile ? (_jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", children: [_jsx(SheetHeader, { className: "order-first shrink-0 border-b", children: head }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), !plain && foot] })) : (_jsx(SheetContent, { side: "right", showCloseButton: false, 
+    return (_jsx(Sheet, { open: open, onOpenChange: (o) => !o && onClose(), modal: isMobile, children: isMobile ? (_jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", children: [_jsx(SheetHeader, { className: "order-first shrink-0 border-b pt-3", children: head }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), !plain && foot] })) : (_jsx(SheetContent, { side: "right", showCloseButton: false, 
             // The resize handle's grab zone is wider than the handle, so a drag can start on the
             // overlay; the panels library marks that pointerdown handled, and then it doesn't close.
             onPointerDownOutside: (e) => e.detail.originalEvent.defaultPrevented && e.preventDefault(), className: "pointer-events-none! gap-0 border-0 bg-transparent shadow-none data-[side=right]:left-0 data-[side=right]:w-auto data-[side=right]:border-l-0 data-[side=right]:sm:max-w-none", children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { minSize: "40%" }), _jsx(ResizableHandle, { withHandle: true, className: "pointer-events-auto" }), _jsx(ResizablePanel, { defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, "data-slot": "lumen-drawer", className: "pointer-events-auto bg-popover shadow-lg", children: _jsxs("section", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("header", { className: "flex shrink-0 items-center gap-2 border-b px-4 py-3", children: [head, _jsx(SheetClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close", className: "ml-auto" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] }) })] }) })) }));

package/dist/lumen-filter.js

@@ -565,7 +565,7 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
                             setField(null);
                     }, children: _jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 rounded-t-xl", 
                         // The keyboard would cover the menu: search waits for a tap.
-                        onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "flex-row items-center pb-2", children: [_jsx(SheetTitle, { children: "Filters" }), _jsx(SheetDescription, { className: "sr-only", children: "Pick values to filter the rows." }), tokens.length > 0 && (_jsx(Button, { variant: "ghost", size: "sm", className: "mr-8 ml-auto font-normal text-muted-foreground", onClick: clear, children: "Clear all" }))] }), _jsxs(CommandPrimitive, { shouldFilter: false, loop: true, className: "flex min-h-0 flex-1 flex-col gap-2 px-3 pb-[max(1rem,env(safe-area-inset-bottom))]", children: [_jsx(CommandInput, { value: field ? search : text, onValueChange: field ? setSearch : setText, onKeyDown: onKeyDown, placeholder: searchHint, "aria-label": label, className: "text-base" }), _jsx(CommandList, { className: "max-h-none min-h-0 flex-1", "aria-label": "Filter suggestions", children: menu }), footer] })] }) })] }));
+                        onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "flex-row items-center pb-2", children: [_jsx(SheetTitle, { children: "Filters" }), _jsx(SheetDescription, { className: "sr-only", children: "Pick values to filter the rows." }), tokens.length > 0 && (_jsx(Button, { variant: "ghost", size: "sm", className: "ml-auto font-normal text-muted-foreground", onClick: clear, children: "Clear all" }))] }), _jsxs(CommandPrimitive, { shouldFilter: false, loop: true, className: "flex min-h-0 flex-1 flex-col gap-2 px-3 pb-[max(1rem,env(safe-area-inset-bottom))]", children: [_jsx(CommandInput, { value: field ? search : text, onValueChange: field ? setSearch : setText, onKeyDown: onKeyDown, placeholder: searchHint, "aria-label": label, className: "text-base" }), _jsx(CommandList, { className: "max-h-none min-h-0 flex-1", "aria-label": "Filter suggestions", children: menu }), footer] })] }) })] }));
     }
     return (_jsxs(CommandPrimitive, { shouldFilter: false, className: cn('relative w-full', className), loop: true, children: [sizes, _jsxs(Popover, { open: open, onOpenChange: (o) => {
                     setOpen(o);

package/dist/lumen-selector.js

@@ -264,9 +264,9 @@ export function LumenSelector(props) {
     if (phone) {
         // The trigger opens a bottom sheet; the list is the combobox inline in it.
         const opener = trigger === 'icon' ? (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": label, disabled: disabled, className: className, onClick: () => setOpen(true), children: LeadIcon && _jsx(LeadIcon, {}) })) : (_jsx("button", { type: "button", id: id, "data-size": size, "aria-label": label, disabled: disabled, className: cn(FIELD, multiple && 'h-auto min-h-8 flex-wrap justify-start py-1', trigger === 'chip' && 'rounded-full', className), onClick: () => setOpen(true), children: multiple ? (values.length ? (_jsxs("span", { className: "flex flex-1 flex-wrap gap-1", children: [values.slice(0, CHIPS).map((v) => (_jsx("span", { className: "rounded-sm bg-muted px-1.5 text-xs leading-[calc(--spacing(5.25))] font-medium", children: labelOf(v) }, v))), values.length > CHIPS && (_jsxs("span", { className: "rounded-sm bg-muted px-1.5 text-xs leading-[calc(--spacing(5.25))]", children: ["+", values.length - CHIPS] }))] })) : (_jsx("span", { className: "flex-1 text-left text-muted-foreground", children: placeholder }))) : (fieldInside) }));
-        return (_jsxs(_Fragment, { children: [opener, _jsx(Sheet, { open: open, onOpenChange: setOpen, children: _jsxs(SheetContent, { side: "bottom", showCloseButton: false, "aria-labelledby": sheetTitle, 
+        return (_jsxs(_Fragment, { children: [opener, _jsx(Sheet, { open: open, onOpenChange: setOpen, children: _jsxs(SheetContent, { side: "bottom", "aria-labelledby": sheetTitle, 
                         // No ring on the first button: the person taps what they want.
-                        onOpenAutoFocus: (e) => e.preventDefault(), className: "group/selector flex max-h-[85dvh] flex-col gap-2 rounded-t-xl pt-2", children: [_jsx("span", { "aria-hidden": true, className: "mx-auto h-1 w-9 rounded-full bg-border" }), _jsxs("div", { className: "flex items-center justify-between px-4", children: [_jsx(SheetTitle, { id: sheetTitle, children: label ?? placeholder }), multiple && (_jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Done" }))] }), _jsx(SheetDescription, { className: "sr-only", children: multiple ? 'Pick any, then Done' : 'Pick one' }), _jsxs(Base.Root, { ...rootProps, inline: true, open: true, onOpenChange: () => undefined, multiple: multiple, value: multiple ? [...values] : (values[0] ?? null), onValueChange: (v) => pick(v), children: [multiple && values.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-4", children: values.map((v) => (_jsx("span", { className: "rounded-sm bg-muted px-2 py-1 text-[13px]", children: labelOf(v) }, v))) })), searchable && searchBox, list] }), multiple && (_jsxs("div", { className: "flex items-center justify-between border-t px-4 pt-3 pb-5", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [values.length, " picked"] }), clearAll] }))] }) })] }));
+                        onOpenAutoFocus: (e) => e.preventDefault(), className: "group/selector flex flex-col gap-2", children: [_jsxs("div", { className: "mt-2 flex min-h-8 items-center justify-between gap-2 pr-12 pl-4", children: [_jsx(SheetTitle, { id: sheetTitle, className: "truncate", children: label ?? placeholder }), multiple && (_jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Done" }))] }), _jsx(SheetDescription, { className: "sr-only", children: multiple ? 'Pick any, then Done' : 'Pick one' }), _jsxs(Base.Root, { ...rootProps, inline: true, open: true, onOpenChange: () => undefined, multiple: multiple, value: multiple ? [...values] : (values[0] ?? null), onValueChange: (v) => pick(v), children: [multiple && values.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-4", children: values.map((v) => (_jsx("span", { className: "rounded-sm bg-muted px-2 py-1 text-[13px]", children: labelOf(v) }, v))) })), searchable && searchBox, list] }), multiple && (_jsxs("div", { className: "flex items-center justify-between border-t px-4 pt-3 pb-5", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [values.length, " picked"] }), clearAll] }))] }) })] }));
     }
     const popup = (_jsx(Base.Portal, { container: host ?? undefined, children: _jsx(Base.Positioner, { side: side, sideOffset: 4, align: align, anchor: inChips ? chipsRef : undefined, className: "pointer-events-auto isolate z-[60]", children: _jsxs(Base.Popup, { "data-slot": "lumen-selector", className: "group/selector flex max-h-(--available-height) max-w-(--available-width) flex-col min-w-[max(var(--anchor-width),14rem)] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", children: [!inChips && searchBox, list, multiple && (_jsxs("div", { className: "flex shrink-0 items-center gap-3 border-t px-2 py-1.5", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [values.length, " picked", max !== undefined ? ` of ${max}` : ''] }), clearAll, _jsx(Button, { size: "xs", className: "ml-auto", onClick: () => setOpen(false), children: "Done" })] }))] }) }) }));
     return (_jsxs(Base.Root, { ...rootProps, multiple: multiple, value: multiple ? [...values] : (values[0] ?? null), onValueChange: (v) => pick(v), children: [inChips ? (_jsxs(Base.Chips, { ref: chipsRef, className: cn('flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent px-1 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', className), children: [chips, _jsx(Base.Input, { id: id, "aria-label": label, disabled: disabled, readOnly: !searchable, placeholder: values.length ? '' : placeholder, className: "min-w-16 flex-1 bg-transparent px-1 outline-none placeholder:text-muted-foreground" })] })) : trigger === 'icon' ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Base.Trigger, { ref: triggerRef, render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": label, className: className }), children: LeadIcon && _jsx(LeadIcon, {}) }) }), _jsx(TooltipContent, { children: label })] })) : (_jsx(Base.Trigger, { ref: triggerRef, id: id, "data-size": size, "aria-label": label, className: cn(FIELD, trigger === 'chip' && 'rounded-full', className), children: fieldInside })), _jsx("span", { ref: markRef, hidden: true }), popup] }));

package/dist/tasks.js

@@ -186,7 +186,7 @@ export function TasksButton() {
     const trigger = (_jsxs(Button, { variant: "ghost", size: list.active ? 'sm' : 'icon-sm', className: cn('relative shrink-0', list.active > 0 && 'gap-1.5 px-2'), "aria-label": label, "data-slot": "tasks-button", children: [list.active > 0 ? _jsx(Ring, { share: share }) : _jsx(ListChecksIcon, {}), list.active > 0 && _jsx("span", { className: "font-num text-xs tabular-nums", children: list.active }), list.unseen > 0 && (_jsx("span", { "aria-hidden": true, "data-slot": "tasks-unseen", className: "absolute top-1 right-0.5 size-1.5 rounded-full bg-edge" }))] }));
     const body = _jsx(TaskPanel, { list: list, onClose: () => setOpen(false) });
     if (mobile) {
-        return (_jsxs(Sheet, { open: open, onOpenChange: onOpen, children: [_jsx(SheetTrigger, { asChild: true, children: trigger }), _jsxs(SheetContent, { side: "bottom", className: "max-h-[75svh] gap-0 rounded-t-2xl p-0", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "flex-row items-baseline gap-2 border-b px-4 py-3", children: [_jsx(SheetTitle, { children: "Tasks" }), _jsx(SheetDescription, { children: "last 7 days" }), _jsxs("span", { className: "mr-8 ml-auto flex items-center gap-2 self-center", children: [list.active > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [list.active, " running"] })), _jsx(ClearAll, { list: list })] })] }), body] })] }));
+        return (_jsxs(Sheet, { open: open, onOpenChange: onOpen, children: [_jsx(SheetTrigger, { asChild: true, children: trigger }), _jsxs(SheetContent, { side: "bottom", className: "max-h-[75svh] gap-0 rounded-t-2xl p-0", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "flex-row items-baseline gap-2 border-b px-4 py-3", children: [_jsx(SheetTitle, { children: "Tasks" }), _jsx(SheetDescription, { children: "last 7 days" }), _jsxs("span", { className: "ml-auto flex items-center gap-2 self-center", children: [list.active > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [list.active, " running"] })), _jsx(ClearAll, { list: list })] })] }), body] })] }));
     }
     return (_jsxs(Popover, { open: open, onOpenChange: onOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: trigger }) }), _jsx(TooltipContent, { children: "Tasks" })] }), _jsxs(PopoverContent, { align: "end", className: "w-100 gap-0 p-0", "aria-label": "Tasks", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs("div", { className: "flex items-baseline gap-2 px-3.5 pt-3 pb-2", children: [_jsx("span", { className: "text-sm font-semibold", children: "Tasks" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "last 7 days" }), _jsxs("span", { className: "ml-auto flex items-center gap-2 self-center", children: [list.active > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [list.active, " running"] })), _jsx(ClearAll, { list: list })] })] }), body] })] }));
 }

package/dist/ui/alert-dialog.d.ts

@@ -1,7 +1,7 @@
 import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
 import type * as React from 'react';
 import { Button } from './button.js';
-declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialog({ open: given, defaultOpen, onOpenChange: changed, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
 declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
 declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
 declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;

package/dist/ui/alert-dialog.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils.js';
 import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+import { useOverlayOpen } from '../hooks/use-back-close.js';
 import { usePhoneScreen } from '../hooks/use-keyboard-fit.js';
 import { Button } from './button.js';
-function AlertDialog({ ...props }) {
-    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+function AlertDialog({ open: given, defaultOpen, onOpenChange: changed, ...props }) {
+    // Phone back closes it, as its Cancel does (useBackClose).
+    const state = useOverlayOpen({ open: given, defaultOpen, onOpenChange: changed });
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...state, ...props });
 }
 function AlertDialogTrigger({ ...props }) {
     return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });

package/dist/ui/dialog.d.ts

@@ -1,6 +1,6 @@
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import type * as React from 'react';
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function Dialog({ open: given, defaultOpen, onOpenChange: changed, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;

package/dist/ui/dialog.js

@@ -3,9 +3,12 @@ import { cn } from '../lib/utils.js';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import { Button } from './button.js';
 import { XIcon } from 'lucide-react';
+import { useOverlayOpen } from '../hooks/use-back-close.js';
 import { usePhoneScreen } from '../hooks/use-keyboard-fit.js';
-function Dialog({ ...props }) {
-    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+function Dialog({ open: given, defaultOpen, onOpenChange: changed, ...props }) {
+    // Phone back closes it (useBackClose).
+    const state = useOverlayOpen({ open: given, defaultOpen, onOpenChange: changed });
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...state, ...props });
 }
 function DialogTrigger({ ...props }) {
     return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
@@ -22,10 +25,12 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
     // On a phone it is a full screen pinned to the top, its footer a bar at the top (usePhoneScreen).
     const style = usePhoneScreen(props.style);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-(--dialog-pad) text-sm [--dialog-pad:--spacing(4)] text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm max-md:inset-0 max-md:h-full max-md:max-h-none max-md:w-full max-md:max-w-none max-md:translate-x-0 max-md:translate-y-0 max-md:content-start max-md:overflow-y-auto max-md:rounded-none max-md:pt-[calc(var(--dialog-pad)+env(safe-area-inset-top))] max-md:ring-0 max-md:end-fade max-md:[--end-fade:var(--dialog-pad)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, style: style, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-2 right-2 max-md:top-[calc(1.25rem+env(safe-area-inset-top))]", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", "data-close": showCloseButton || undefined, className: cn('group/dialog fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-(--dialog-pad) text-sm [--dialog-pad:--spacing(4)] text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm max-md:inset-0 max-md:h-full max-md:max-h-none max-md:w-full max-md:max-w-none max-md:translate-x-0 max-md:translate-y-0 max-md:content-start max-md:overflow-y-auto max-md:rounded-none max-md:pt-[calc(var(--dialog-pad)+env(safe-area-inset-top))] max-md:ring-0 max-md:end-fade max-md:[--end-fade:var(--dialog-pad)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, style: style, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-2 right-2 max-md:top-[calc(1.25rem+env(safe-area-inset-top))]", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2', className), ...props }));
+    return (_jsx("div", { "data-slot": "dialog-header", 
+        // Its title stops short of the dialog's X, never running under it.
+        className: cn('flex flex-col gap-2 group-data-close/dialog:pr-8', className), ...props }));
 }
 /** A dialog's scrolling part: it reaches the dialog's edges, so its scroll bar sits on the frame and
  *  the focus rings of its fields are never cut by the scroll box. It and the

package/dist/ui/sheet.d.ts

@@ -1,10 +1,11 @@
 import { Dialog as SheetPrimitive } from 'radix-ui';
-import type * as React from 'react';
-declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): React.JSX.Element;
+import * as React from 'react';
+declare function Sheet({ open: given, defaultOpen, onOpenChange: changed, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): React.JSX.Element;
 declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): React.JSX.Element;
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
 declare function SheetContent({ className, children, side, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Left out on desktop only: a phone's bottom sheet always has its X. */
     showCloseButton?: boolean;
 }): React.JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/ui/sheet.js

@@ -3,10 +3,64 @@ import { cn } from '../lib/utils.js';
 import { Dialog as SheetPrimitive } from 'radix-ui';
 import { Button } from './button.js';
 import { XIcon } from 'lucide-react';
+import * as React from 'react';
+import { useOverlayOpen } from '../hooks/use-back-close.js';
 import { useKeyboardFit } from '../hooks/use-keyboard-fit.js';
 import { useIsMobile } from '../hooks/use-mobile.js';
-function Sheet({ ...props }) {
-    return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+/** Closes the sheet from inside it (the grab handle's swipe). */
+const SheetCloseContext = React.createContext(() => undefined);
+function Sheet({ open: given, defaultOpen, onOpenChange: changed, ...props }) {
+    // Phone back closes it (useBackClose).
+    const { open, onOpenChange } = useOverlayOpen({
+        open: given,
+        defaultOpen,
+        onOpenChange: changed,
+    });
+    const close = React.useCallback(() => onOpenChange(false), [onOpenChange]);
+    return (_jsx(SheetCloseContext.Provider, { value: close, children: _jsx(SheetPrimitive.Root, { "data-slot": "sheet", open: open, onOpenChange: onOpenChange, ...props }) }));
+}
+/** How far a swipe down on the grab handle must pull the sheet before letting go closes it. */
+const SWIPE_CLOSE = 80;
+/**
+ * A bottom sheet's grab handle on a phone: a wide strip at its top that drags the sheet down, and
+ * a pull past SWIPE_CLOSE (or a quick flick) closes it; a shorter one springs back.
+ */
+function SheetGrab() {
+    const close = React.useContext(SheetCloseContext);
+    const drag = React.useRef(null);
+    const move = (dy, el) => {
+        el.style.transform = dy > 0 ? `translateY(${dy}px)` : '';
+    };
+    return (_jsx("div", { "data-slot": "sheet-grab", "aria-hidden": true, className: "absolute inset-x-0 top-0 z-10 flex h-6 cursor-grab touch-none justify-center pt-2", onPointerDown: (e) => {
+            const el = e.currentTarget.closest('[data-slot=sheet-content]');
+            if (!el)
+                return;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            el.style.transition = 'none';
+            drag.current = { y: e.clientY, t: e.timeStamp, el };
+        }, onPointerMove: (e) => {
+            if (drag.current)
+                move(e.clientY - drag.current.y, drag.current.el);
+        }, onPointerUp: (e) => {
+            const d = drag.current;
+            drag.current = null;
+            if (!d)
+                return;
+            const dy = e.clientY - d.y;
+            const flick = dy > 24 && dy / Math.max(1, e.timeStamp - d.t) > 0.5;
+            d.el.style.transition = '';
+            if (dy > SWIPE_CLOSE || flick)
+                close();
+            else
+                move(0, d.el);
+        }, onPointerCancel: () => {
+            const d = drag.current;
+            drag.current = null;
+            if (d) {
+                d.el.style.transition = '';
+                move(0, d.el);
+            }
+        }, children: _jsx("span", { className: "h-1 w-9 rounded-full bg-border" }) }));
 }
 function SheetTrigger({ ...props }) {
     return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
@@ -21,36 +75,53 @@ function SheetOverlay({ className, ...props }) {
     return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn('bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-y-0 left-0 right-(--assistant-docked,0px) z-50 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0', className), ...props }));
 }
 function SheetContent({ className, children, side = 'right', showCloseButton = true, ...props }) {
-    // On a phone a bottom sheet is a full screen pinned to the top, like a Dialog (usePhoneScreen), so
-    // the fields a person types in sit high. With the keyboard up a top or full screen sheet ends at
-    // the keyboard; a side sheet spans only the visible part.
+    // On a phone a bottom sheet rises from the bottom and stops short of the top, so the dimmed page
+    // above it shows and a tap there closes it; it carries a grab handle (swipe down to close), its
+    // X and the safe areas. With the keyboard up a sheet ends at the keyboard; a top sheet or a phone
+    // bottom sheet starts at the top of what is visible.
     const kb = useKeyboardFit();
     const phone = useIsMobile();
-    const screen = side === 'top' || (side === 'bottom' && phone);
+    const card = side === 'bottom' && phone;
+    const closable = showCloseButton || card;
     const style = !kb
         ? props.style
-        : screen
+        : side === 'top'
             ? { ...props.style, top: kb.top, maxHeight: kb.height, height: kb.height }
-            : side === 'bottom'
-                ? { ...props.style, bottom: kb.below, maxHeight: kb.height - 8 }
-                : { ...props.style, top: kb.top, height: kb.height };
-    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", "data-side": side, className: cn('group/sheet bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-(--assistant-docked,0px) data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:border-b max-md:data-[side=bottom]:top-0 max-md:data-[side=bottom]:h-full max-md:data-[side=bottom]:max-h-none max-md:data-[side=bottom]:rounded-none max-md:data-[side=bottom]:border-t-0 max-md:data-[side=bottom]:pt-[env(safe-area-inset-top)] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10', className), ...props, style: style, 
+            : card
+                ? {
+                    ...props.style,
+                    top: kb.top + CARD_GAP,
+                    bottom: 'auto',
+                    maxHeight: kb.height - CARD_GAP,
+                    height: kb.height - CARD_GAP,
+                }
+                : side === 'bottom'
+                    ? { ...props.style, bottom: kb.below, maxHeight: kb.height - 8 }
+                    : { ...props.style, top: kb.top, height: kb.height };
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", "data-side": side, "data-card": card || undefined, "data-close": closable || undefined, className: cn('group/sheet bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-(--assistant-docked,0px) data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=left]:pt-[env(safe-area-inset-top)] data-[side=right]:pt-[env(safe-area-inset-top)]', className, 
+                // After the caller's classes: a phone's bottom sheet always keeps its shape and room.
+                card &&
+                    'max-h-[calc(100dvh-env(safe-area-inset-top)-2.75rem)] rounded-t-2xl border-t-0 pt-5'), ...props, style: style, 
                 // A click or focus in the docked the assistant panel leaves the sheet open, so the person can ask
                 // about what it shows (LumenShell).
                 onInteractOutside: (e) => {
                     if (e.target?.closest?.('[data-assistant-docked]'))
                         e.preventDefault();
                     props.onInteractOutside?.(e);
-                }, children: [children, showCloseButton && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-3 right-3 max-md:group-data-[side=bottom]/sheet:top-[calc(0.75rem+env(safe-area-inset-top))]", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
+                }, children: [card && _jsx(SheetGrab, {}), children, card && (_jsx("div", { "aria-hidden": true, className: "h-[env(safe-area-inset-bottom)] shrink-0" })), closable && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-3 right-3 z-20 group-data-card/sheet:top-8 group-data-[side=left]/sheet:top-[calc(0.75rem+env(safe-area-inset-top))] group-data-[side=right]/sheet:top-[calc(0.75rem+env(safe-area-inset-top))]", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
 }
+/** Room a phone's bottom sheet leaves above it, px: the dimmed page a tap closes it on. */
+const CARD_GAP = 44;
 function SheetHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sheet-header", className: cn('gap-0.5 p-4 flex flex-col', className), ...props }));
+    return (_jsx("div", { "data-slot": "sheet-header", 
+        // Its title stops short of the sheet's X, never running under it.
+        className: cn('gap-0.5 p-4 flex flex-col group-data-close/sheet:pr-12', className), ...props }));
 }
 function SheetFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sheet-footer", className: cn('gap-2 p-4 mt-auto flex flex-col', className), ...props }));
 }
 function SheetTitle({ className, ...props }) {
-    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn('text-foreground text-base font-medium cn-font-heading', className), ...props }));
+    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn('text-foreground text-base font-medium cn-font-heading min-w-0', className), ...props }));
 }
 function SheetDescription({ className, ...props }) {
     return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-muted-foreground text-sm', className), ...props }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.76",
+  "version": "0.1.77",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -45,7 +45,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.76",
+    "@columenlabs/lumen-ui-types": "0.1.77",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",