@columenlabs/lumen-ui 0.1.114 → 0.1.116

package/README.md

@@ -78,7 +78,7 @@ Every export, its props and an example are on the [docs](https://lumen.columenla
 - Numbers use tabular figures and a true minus `−`; a gain or loss always shows a sign or arrow.
 - A page's header numbers are metric cards: `TileRow` of `Tile` (or `TileToggleGroup` when they pick what the page shows), with `fill` so they share the row, each with `spark` set to its daily history where it has one. Don't build a card of your own for this.
 - Column widths: the first column (a row's name) grows only to `--lead-col-max` (18rem, theme.css); past it the cell truncates on one line and a plain text value shows in full on hover (a rendered cell brings its own hover card). Cap any other column with the field's `maxWidth` (`'12rem'`), or lift the cap with `maxWidth: false`. In a rendered name cell, put the name in a `truncate` span so the ellipsis lands on it, not on a chip after it.
-- Group, sub-group and Total rows read on one line at every width, a phone's cards included: the group's name shortens in an ellipsis (full name on hover) and its roll-up figure stays on the right. The view marks them `data-rollup` and theme.css keeps them to one line, so a `mark`, `rollRender` or `groupActions` an app passes never wraps them.
+- Rows never wrap. Every row (data, group, sub-group, Total) reads on one line at every width. On a phone each row is a one-line card: its name (ellipsis, full name on hover) and one value on the right, the sorted column, else the first number or date. The other values are in the row's drawer or panel. Pick which value a phone shows by sorting (Sort by) or by marking the others `hideOnPhone`.
 - Column alignment is the table's, not the cell's. Text left, numbers right, and a number column has one right edge for its header, values, dashes and Total. `UnitValue` puts the unit in a fixed slot after the number (`--unit-slot`, 2rem) and its status dot just left of the number. In a LumenView table the first `UnitValue` drawn in a column marks it (`data-units` on every cell of that column, through the `UnitColumns` context and the cell's `data-col`); theme.css then widens that column's right gutter by the slot and hangs each unit in it. So a plain `—`, `Free` or `$0.21` an app draws in the same column sits on the digits' edge, and the header sits over the digits. Don't hand-place units, dots or padding to line a column up; if a column is off, draw its numbers through `UnitValue`. Outside a LumenView table (a hover card, a tile) `UnitValue` keeps its slot inline.
 - A metered column (use against an allowance) shows one number per cell with `UnitValue` (right-aligned number, fixed muted unit slot, status dot), never `value [pct]`. Offer both readings through the field's `showAs` (Amount / % of allowance, picked per column in Edit view, saved as `shows`); default amounts for sizes (storage) and shares for capped counts. Put the other reading, the allowance and the cost formula in a hover card. Totals use `rollRender`: sum amounts with their unit; a share is the rows' total over their allowance, never a sum of percents.
 - A floating bulk-action bar over a table's selection: Apply clears the selection and the bar goes away; the toast's Undo restores the change, not the selection. Cancel keeps the selection.

package/dist/assistant-panel.d.ts

@@ -1,10 +1,6 @@
 import { type ReactNode } from 'react';
-/** A value kept for this browser tab (sessionStorage), read with `use` and set with `write`. */
-export declare function tabState<T>(key: string, fallback: T, parse: (raw: string) => T | null): {
-    write: (next: T) => void;
-    use: () => T;
-    get: () => T;
-};
+import { tabState } from './side-dock.js';
+export { tabState };
 /** Whether the assistant is open in this tab. */
 export declare const assistantOpen: {
     write: (next: boolean) => void;

package/dist/assistant-panel.js

@@ -6,44 +6,18 @@ 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, useSyncExternalStore } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { cn } from './lib/utils.js';
 import { LumenBoundary } from './lumen-boundary.js';
 import { LumenSelector } from './lumen-selector.js';
 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 { Sheet, SheetContent, SheetDescription, SheetTitle } from './ui/sheet.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
-/** A value kept for this browser tab (sessionStorage), read with `use` and set with `write`. */
-export function tabState(key, fallback, parse) {
-    const listeners = new Set();
-    const read = () => {
-        try {
-            const raw = sessionStorage.getItem(key);
-            return raw == null ? fallback : (parse(raw) ?? fallback);
-        }
-        catch {
-            return fallback;
-        }
-    };
-    let state = typeof sessionStorage === 'undefined' ? fallback : read();
-    const write = (next) => {
-        state = next;
-        try {
-            sessionStorage.setItem(key, String(next));
-        }
-        catch { }
-        for (const l of listeners)
-            l();
-    };
-    const use = () => useSyncExternalStore((l) => {
-        listeners.add(l);
-        return () => listeners.delete(l);
-    }, () => state, () => fallback);
-    return { write, use, get: () => state };
-}
+export { tabState };
 /** Whether the assistant is open in this tab. */
 export const assistantOpen = tabState('assistant_open', false, (raw) => raw === '1');
 /** Dragged width in px, within ASSISTANT_WIDTH; 0 is the shell's default. */
@@ -109,65 +83,11 @@ function Docked({ name, children }) {
     }, []);
     return (_jsxs("aside", { ref: ref, "aria-label": name, "data-assistant-docked": "", 
         // Its width is the dragged one (or the shell's default), within ASSISTANT_WIDTH and half the window.
-        style: width ? { width } : undefined, className: "pointer-events-auto sticky top-0 h-svh w-(--shell-assistant-width) max-w-[50vw] min-w-80 shrink-0 border-l bg-background", children: [_jsx(ResizeEdge, { name: name, width: width || 416, onWidth: (w) => {
+        style: width ? { width } : undefined, className: "pointer-events-auto sticky top-0 h-svh w-(--shell-assistant-width) max-w-[50vw] min-w-80 shrink-0 border-l bg-background", children: [_jsx(ResizeEdge, { name: name, width: width || 416, min: ASSISTANT_WIDTH.min, max: Math.min(ASSISTANT_WIDTH.max, Math.floor(window.innerWidth / 2)), slot: "assistant-resize", onWidth: (w) => {
                     setDrag(null);
                     assistantWidth.write(w);
                 }, onDrag: setDrag }), _jsx(LumenBoundary, { where: "assistant", what: "panel", children: children })] }));
 }
-/**
- * The panel's left edge: drag it, or focus it and use the arrow keys, to set the width; a double
- * click goes back to the default. While dragging only `onDrag` hears it.
- */
-function ResizeEdge({ name, width, onDrag, onWidth, }) {
-    const clamp = (w) => Math.round(Math.max(ASSISTANT_WIDTH.min, Math.min(w, ASSISTANT_WIDTH.max, Math.floor(window.innerWidth / 2))));
-    // The panel's width on screen (the default one is CSS's).
-    const now = (el) => Math.round(el.parentElement?.getBoundingClientRect().width ?? width);
-    const [dragging, setDragging] = useState(false);
-    useEffect(() => {
-        if (!dragging)
-            return;
-        document.body.style.cursor = 'col-resize';
-        document.body.style.userSelect = 'none';
-        return () => {
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-        };
-    }, [dragging]);
-    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${name}`, "aria-valuemin": ASSISTANT_WIDTH.min, "aria-valuemax": ASSISTANT_WIDTH.max, "aria-valuenow": width, tabIndex: 0, "data-slot": "assistant-resize", "data-dragging": dragging ? '' : undefined, className: "absolute inset-y-0 -left-1 z-20 w-2 cursor-col-resize outline-none after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:transition-colors hover:after:bg-ring focus-visible:after:bg-ring data-dragging:after:bg-ring", onPointerDown: (e) => {
-            if (e.button !== 0)
-                return;
-            e.preventDefault();
-            const el = e.currentTarget;
-            el.setPointerCapture(e.pointerId);
-            const x0 = e.clientX;
-            const w0 = now(el);
-            let last = w0;
-            setDragging(true);
-            const move = (m) => {
-                last = clamp(w0 + x0 - m.clientX);
-                onDrag(last);
-            };
-            const up = () => {
-                el.removeEventListener('pointermove', move);
-                el.removeEventListener('pointerup', up);
-                el.removeEventListener('pointercancel', up);
-                setDragging(false);
-                onWidth(last);
-            };
-            el.addEventListener('pointermove', move);
-            el.addEventListener('pointerup', up);
-            el.addEventListener('pointercancel', up);
-        }, onDoubleClick: () => onWidth(0), onKeyDown: (e) => {
-            const step = e.shiftKey ? 64 : 16;
-            if (e.key === 'ArrowLeft')
-                onWidth(clamp(now(e.currentTarget) + step));
-            else if (e.key === 'ArrowRight')
-                onWidth(clamp(now(e.currentTarget) - step));
-            else
-                return;
-            e.preventDefault();
-        } }));
-}
 /** The history groups, newest first. */
 const GROUPS = ['Today', 'Yesterday', 'This week', 'Last week', 'Last month'];
 /** Under this age a chat's time reads relative ("12m ago"), past it the clock, day or date. */

package/dist/lumen-drawer.d.ts

@@ -17,6 +17,12 @@ export interface LumenDrawerProps {
     defaultSize?: Size;
     minSize?: Size;
     maxSize?: Size;
+    /**
+     * Docks it beside the page on desktop instead of over it, under this name: a click on the page
+     * leaves it open (a list's next row swaps what it shows), it folds to a rail, and its width and
+     * fold are kept in this browser. A phone still gets the bottom sheet.
+     */
+    dock?: string;
 }
 /**
  * The suite's one pullout drawer (named LumenDrawer), on every app.
@@ -25,7 +31,8 @@ export interface LumenDrawerProps {
  * the handle and the drawer take the pointer, so a click beside it falls through to the overlay
  * and closes it (`!` beats the inline pointer-events Radix sets on a modal's content). Its body
  * holds DrawerSections; its footer sits at the bottom (actions on the right, Close by default; on a
- * phone it shows only when there are actions, as the sheet's X closes it).
+ * phone it shows only when there are actions, as the sheet's X closes it). With `dock` it sits beside
+ * the page on desktop instead (DockedDrawer), for a list whose rows each open it.
  */
-export declare function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize, minSize, maxSize, }: LumenDrawerProps): import("react").JSX.Element;
+export declare function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize, minSize, maxSize, dock, }: LumenDrawerProps): import("react").JSX.Element | null;
 export {};

package/dist/lumen-drawer.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { XIcon } from 'lucide-react';
-import { useEffect } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelRightCloseIcon, PanelRightOpenIcon, XIcon } from 'lucide-react';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
 import { lazyPart } from './lazy-part.js';
+import { ResizeEdge, tabState, useDockSlot } from './side-dock.js';
 import { Button } from './ui/button.js';
+import { pickerOpen } from './ui/overlay-guard.js';
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from './ui/sheet.js';
 /** The resizable panels load with the first drawer opened; until then it opens at its default width. */
 const loadPanels = () => import('./lumen-drawer-panels.js');
@@ -16,10 +19,12 @@ const DrawerPanels = lazyPart(() => loadPanels().then((m) => m.DrawerPanels));
  * the handle and the drawer take the pointer, so a click beside it falls through to the overlay
  * and closes it (`!` beats the inline pointer-events Radix sets on a modal's content). Its body
  * holds DrawerSections; its footer sits at the bottom (actions on the right, Close by default; on a
- * phone it shows only when there are actions, as the sheet's X closes it).
+ * phone it shows only when there are actions, as the sheet's X closes it). With `dock` it sits beside
+ * the page on desktop instead (DockedDrawer), for a list whose rows each open it.
  */
-export function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', }) {
+export function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', dock, }) {
     const isMobile = useIsMobile();
+    const slot = useDockSlot();
     // Fetched once the page is idle, so the first drawer opened on a desktop has its panels ready.
     useEffect(() => {
         if (isMobile)
@@ -33,9 +38,66 @@ export function LumenDrawer({ open, onClose, title, description, children, foote
     // ends on a clear edge. Without actions of its own it offers Close, except on a phone, where the
     // 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" }) })) })] }));
+    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(Button, { type: "button", size: "sm", variant: "outline", onClick: onClose, children: "Close" })) })] }));
+    if (dock && !isMobile && slot)
+        return open
+            ? createPortal(_jsx(DockedDrawer, { dock: dock, title: title, description: description, onClose: onClose, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, body: body, foot: foot }), slot)
+            : null;
     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: _jsx(DrawerPanels, { defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, 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] }) }) })) }));
 }
+/** What each docked drawer keeps, by its `dock` name: its dragged width (0: the default) and its fold. */
+const docks = new Map();
+function dockState(dock) {
+    let d = docks.get(dock);
+    if (!d) {
+        d = {
+            width: tabState(`lumen_dock_${dock}_width`, 0, (raw) => {
+                const n = Math.round(Number(raw));
+                return Number.isFinite(n) && n > 0 ? n : null;
+            }, 'local'),
+            folded: tabState(`lumen_dock_${dock}_folded`, false, (raw) => raw === 'true', 'local'),
+        };
+        docks.set(dock, d);
+    }
+    return d;
+}
+const onResize = (l) => {
+    window.addEventListener('resize', l);
+    return () => window.removeEventListener('resize', l);
+};
+/** A Size in px, a percentage being of the window's width. */
+const px = (size, vw) => size.endsWith('%') ? (vw * Number.parseFloat(size)) / 100 : Number.parseFloat(size);
+/** Room a docked drawer always leaves the page, px. */
+const PAGE_MIN = 480;
+/**
+ * A drawer docked right of the page (LumenShell's dock slot): the page narrows beside it and stays
+ * usable. Its left edge drags the width within `minSize` and `maxSize` (never leaving the page under
+ * PAGE_MIN); it folds to a rail that shows its title; Esc in it closes it, unless a picker in it is open.
+ */
+function DockedDrawer({ dock, title, description, onClose, defaultSize, minSize, maxSize, body, foot, }) {
+    const state = dockState(dock);
+    const saved = state.width.use();
+    const folded = state.folded.use();
+    const [drag, setDrag] = useState(null);
+    const vw = useSyncExternalStore(onResize, () => window.innerWidth, () => 1440);
+    const min = Math.round(px(minSize, vw));
+    const max = Math.max(min, Math.round(Math.min(px(maxSize, vw), vw - PAGE_MIN)));
+    const clamp = (w) => Math.max(min, Math.min(w, max));
+    const width = drag ?? clamp(saved || px(defaultSize, vw));
+    const name = typeof title === 'string' ? title : 'Details';
+    return (_jsx("aside", { "aria-label": name, "data-slot": "lumen-drawer", "data-docked": "", "data-folded": folded ? '' : undefined, style: folded ? undefined : { width }, className: "sticky top-0 flex h-svh shrink-0 flex-col border-l bg-background data-folded:w-11", onKeyDown: (e) => {
+            if (e.key !== 'Escape' || e.defaultPrevented || pickerOpen())
+                return;
+            // Only Esc from inside it: one from a dialog it opened (a portal) is that dialog's.
+            if (!e.currentTarget.contains(e.target))
+                return;
+            e.preventDefault();
+            onClose();
+        }, children: folded ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center gap-2 overflow-hidden py-3", children: [_jsx(IconButton, { icon: PanelRightOpenIcon, label: "Expand panel", onClick: () => state.folded.write(false) }), _jsx("span", { className: "min-h-0 truncate text-muted-foreground text-xs [writing-mode:vertical-rl]", title: name, children: title })] })) : (_jsxs(_Fragment, { children: [_jsx(ResizeEdge, { name: name, width: width, min: min, max: max, slot: "lumen-drawer-resize", onDrag: setDrag, onWidth: (w) => {
+                        setDrag(null);
+                        state.width.write(w);
+                    } }), _jsxs("header", { className: "flex shrink-0 items-center gap-1 border-b px-4 py-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("h2", { className: "cn-font-heading truncate font-medium text-base text-foreground", title: name, children: title }), description && (_jsx("p", { className: "truncate text-muted-foreground text-xs", title: typeof description === 'string' ? description : undefined, children: description }))] }), _jsx(IconButton, { icon: PanelRightCloseIcon, label: "Collapse panel", onClick: () => state.folded.write(true) }), _jsx(IconButton, { icon: XIcon, label: "Close", onClick: onClose })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] })) }));
+}

package/dist/lumen-view.js

@@ -440,12 +440,13 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     // Inline chips sit on the first column, next to the row's name, not in their own.
     const inline = visible.filter((f, i) => i > 0 && chips.some((c) => c.key === f.key && c.placement === 'inline'));
     const shown = visible.filter((f) => !inline.includes(f));
-    // On a narrow phone each row reads as a card (theme.css, `data-card`): its name and one figure
-    // (the sorted one, else the first number or date) on the first line, the rest on the second.
-    // Numbers and dates keep their width there; only text shortens.
+    // On a narrow phone each row reads as a card on ONE line (theme.css, `data-card`): its name and
+    // one value (the sorted one, else the first number or date, else the next column). The rest
+    // waits in the row's detail, never on a second line.
     const short = (f) => f.format !== 'text' || (rows[0] !== undefined && isDateText(f.value(rows[0])));
-    const meta = (shown.find((f, i) => i > 0 && f.key === sorting[0]?.id && short(f)) ??
-        shown.find((f, i) => i > 0 && short(f)))?.key;
+    const onCard = shown.filter((f, i) => i > 0 && !f.hideOnPhone);
+    const meta = (onCard.find((f) => f.key === sorting[0]?.id) ?? onCard.find(short) ?? onCard[0])
+        ?.key;
     const cardOf = (f) => f === shown[0] ? 'lead' : f.key === meta ? 'meta' : short(f) ? 'num' : 'text';
     const col = (f, ...more) => ({
         ...colProps(f, ...more),

package/dist/shell.js

@@ -13,6 +13,7 @@ import { LumenFinder } from './lumen-finder.js';
 import { usePrefs } from './prefs.js';
 import { withRefreshToken } from './refresh.js';
 import { LumenSettings, ThemeToggle, allSettings, } from './settings.js';
+import { DockSlot } from './side-dock.js';
 import { SourceHealthProvider } from './source-health.js';
 import { StatusTimeZone } from './status.js';
 import { Avatar, AvatarFallback } from './ui/avatar.js';
@@ -96,6 +97,7 @@ const settingsFromUrl = (() => {
 })();
 export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
     const [statusSlot, setStatusSlot] = useState(null);
+    const [dockSlot, setDockSlot] = useState(null);
     const [refreshing, setRefreshing] = useState(false);
     // Refresh reloads the layout too: once the data is fresh the page mounts
     // again, so every card, tab and saved layout starts from what the server holds now.
@@ -139,7 +141,7 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
             refreshing,
             hideAmounts,
             headerActions,
-        }, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel, groups: settingsGroups }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }));
+        }, children: _jsx(DockSlot.Provider, { value: dockSlot, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), _jsx("div", { ref: setDockSlot, "data-slot": "shell-dock", className: "contents" }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel, groups: settingsGroups }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }) }));
 }
 /** A status bar entry: an optional health dot, a label and its value ("Mail · Up to date"). */
 export function StatusItem({ label, value, ok, className, }) {

package/dist/side-dock.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A value kept for this browser tab (sessionStorage), or for this browser with `'local'`
+ * (localStorage), read with `use` and set with `write`.
+ */
+export declare function tabState<T>(key: string, fallback: T, parse: (raw: string) => T | null, keep?: 'tab' | 'local'): {
+    write: (next: T) => void;
+    use: () => T;
+    get: () => T;
+};
+/** Where a docked drawer renders on desktop; null outside LumenShell (it then opens over the page). */
+export declare const DockSlot: import("react").Context<HTMLElement | null>;
+export declare const useDockSlot: () => HTMLElement | null;
+/**
+ * A docked panel's left edge: drag it, or focus it and use the arrow keys, to set the width between
+ * `min` and `max`; a double click goes back to the default (0). While dragging only `onDrag` hears it.
+ */
+export declare function ResizeEdge({ name, width, min, max, onDrag, onWidth, slot, }: {
+    name: string;
+    width: number;
+    min: number;
+    max: number;
+    onDrag: (w: number | null) => void;
+    onWidth: (w: number) => void;
+    /** Its `data-slot`. */
+    slot: string;
+}): import("react").JSX.Element;

package/dist/side-dock.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// What a panel docked right of the page needs: a value it keeps (its width, folded or not), the
+// left edge that drags its width, and the shell's slot a docked drawer renders into (LumenShell puts
+// it between the page and the assistant, so the page narrows to make room instead of being covered).
+import { createContext, useContext, useEffect, useState, useSyncExternalStore } from 'react';
+/**
+ * A value kept for this browser tab (sessionStorage), or for this browser with `'local'`
+ * (localStorage), read with `use` and set with `write`.
+ */
+export function tabState(key, fallback, parse, keep = 'tab') {
+    const listeners = new Set();
+    const store = () => (keep === 'local' ? localStorage : sessionStorage);
+    const read = () => {
+        try {
+            const raw = store().getItem(key);
+            return raw == null ? fallback : (parse(raw) ?? fallback);
+        }
+        catch {
+            return fallback;
+        }
+    };
+    let state = typeof sessionStorage === 'undefined' ? fallback : read();
+    const write = (next) => {
+        state = next;
+        try {
+            store().setItem(key, String(next));
+        }
+        catch { }
+        for (const l of listeners)
+            l();
+    };
+    const use = () => useSyncExternalStore((l) => {
+        listeners.add(l);
+        return () => listeners.delete(l);
+    }, () => state, () => fallback);
+    return { write, use, get: () => state };
+}
+/** Where a docked drawer renders on desktop; null outside LumenShell (it then opens over the page). */
+export const DockSlot = createContext(null);
+export const useDockSlot = () => useContext(DockSlot);
+/**
+ * A docked panel's left edge: drag it, or focus it and use the arrow keys, to set the width between
+ * `min` and `max`; a double click goes back to the default (0). While dragging only `onDrag` hears it.
+ */
+export function ResizeEdge({ name, width, min, max, onDrag, onWidth, slot, }) {
+    const clamp = (w) => Math.round(Math.max(min, Math.min(w, max)));
+    // The panel's width on screen (the default one is CSS's).
+    const now = (el) => Math.round(el.parentElement?.getBoundingClientRect().width ?? width);
+    const [dragging, setDragging] = useState(false);
+    useEffect(() => {
+        if (!dragging)
+            return;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        return () => {
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [dragging]);
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${name}`, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": width, tabIndex: 0, "data-slot": slot, "data-dragging": dragging ? '' : undefined, className: "absolute inset-y-0 -left-1 z-20 w-2 cursor-col-resize outline-none after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:transition-colors hover:after:bg-ring focus-visible:after:bg-ring data-dragging:after:bg-ring", onPointerDown: (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            const el = e.currentTarget;
+            el.setPointerCapture(e.pointerId);
+            const x0 = e.clientX;
+            const w0 = now(el);
+            let last = w0;
+            setDragging(true);
+            const move = (m) => {
+                last = clamp(w0 + x0 - m.clientX);
+                onDrag(last);
+            };
+            const up = () => {
+                el.removeEventListener('pointermove', move);
+                el.removeEventListener('pointerup', up);
+                el.removeEventListener('pointercancel', up);
+                setDragging(false);
+                onWidth(last);
+            };
+            el.addEventListener('pointermove', move);
+            el.addEventListener('pointerup', up);
+            el.addEventListener('pointercancel', up);
+        }, onDoubleClick: () => onWidth(0), onKeyDown: (e) => {
+            const step = e.shiftKey ? 64 : 16;
+            if (e.key === 'ArrowLeft')
+                onWidth(clamp(now(e.currentTarget) + step));
+            else if (e.key === 'ArrowRight')
+                onWidth(clamp(now(e.currentTarget) - step));
+            else
+                return;
+            e.preventDefault();
+        } }));
+}

package/dist/theme.css

@@ -443,9 +443,11 @@
 }
 
 /* A LumenView table on a narrow phone (`data-cards`): each row is a card, so nothing runs off
-   the right edge. Line 1: the row's name (shortens) and one figure (`data-card="meta"`); line 2:
-   the other values, small and muted. Numbers, dates and their units keep their width; only text
-   shortens, in an ellipsis. Group, Total and More rows span the card's width. */
+   the right edge, and every row is ONE line, whatever an app draws in it: the row's name (shortens
+   in an ellipsis), then one figure (`data-card="meta"`, the sorted one, else the first number or
+   date) on the right. The other values wait in the row's detail (its drawer or panel), never on a
+   second line. Group, fold and Total rows (`data-rollup`) read the same way. More and empty rows
+   are one cell across the card. */
 @media (max-width: 639px) {
   table[data-cards],
   table[data-cards] > tbody,
@@ -462,55 +464,46 @@
   }
   table[data-cards] tr {
     display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
+    flex-wrap: nowrap;
+    align-items: center;
     column-gap: 0.75rem;
-    row-gap: 0.125rem;
     padding: 0.5rem var(--cell-x);
+    white-space: nowrap;
   }
   table[data-cards] td {
     padding: 0 !important;
     width: auto !important;
     min-width: 0;
+    white-space: nowrap;
   }
   table[data-cards] td[colspan] {
     flex: 1 1 100%;
   }
-  table[data-cards] td:not([data-card]):not([colspan]) {
+  /* A row's panel (`row-panel`) is a box of its own under the row, not a row: it keeps its lines. */
+  table[data-cards] tr[data-slot="row-panel"],
+  table[data-cards] tr[data-slot="row-panel"] > td {
+    white-space: normal;
+  }
+  table[data-cards] td:not([data-card]):not([colspan]),
+  table[data-cards] td:is([data-card="num"], [data-card="text"]) {
     display: none;
   }
   table[data-cards] td[data-card="select"] {
     order: 0;
     flex: none;
-    align-self: center;
   }
   table[data-cards] td[data-card="lead"] {
     order: 1;
     flex: 1 1 0;
     overflow: hidden;
+    text-overflow: ellipsis;
     font-weight: 500;
   }
   table[data-cards] td[data-card="meta"] {
     order: 2;
     flex: none;
-  }
-  table[data-cards] tr:has(> td[data-card="lead"])::after {
-    content: "";
-    order: 3;
-    flex-basis: 100%;
-  }
-  table[data-cards] td:is([data-card="num"], [data-card="text"]) {
-    order: 4;
-    font-size: 0.8125rem;
-    color: var(--muted-foreground);
-  }
-  table[data-cards] td[data-card="num"] {
-    flex: none;
-  }
-  table[data-cards] td[data-card="text"] {
-    flex: 0 1 auto;
+    max-width: 50%;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
   table[data-cards] [data-slot="unit-value-unit"] {
     position: static;
@@ -519,31 +512,7 @@
     margin-left: 0.25em;
     font-size: inherit;
   }
-  /* Group, fold and Total rows (`data-rollup`) are one line at every width: the name shortens
-     in an ellipsis, the row's one figure keeps its width on the right, and the rest waits in the
-     open rows. Whatever an app draws in them (a mark, a roll-up, group actions) never wraps.
-     The group band pins as a whole row here: a cell can't pin inside a one-line flex row. */
-  table[data-cards] tr[data-rollup] {
-    flex-wrap: nowrap;
-    align-items: center;
-    white-space: nowrap;
-  }
-  table[data-cards] tr[data-rollup]::after {
-    display: none;
-  }
-  table[data-cards] tr[data-rollup] > td {
-    white-space: nowrap;
-  }
-  table[data-cards] tr[data-rollup] > td[data-card="lead"] {
-    flex: 1 1 0;
-    min-width: 0;
-    overflow: hidden;
-  }
-  table[data-cards]
-    tr[data-rollup]
-    > td:is([data-card="num"], [data-card="text"], :not([data-card])) {
-    display: none;
-  }
+  /* The group band pins as a whole row here: a cell can't pin inside a one-line flex row. */
   table[data-cards] tr[data-group] {
     position: sticky;
     top: var(--pin-top, 0px);

package/dist/ui/overlay-guard.d.ts

@@ -1,2 +1,4 @@
+/** Whether a picker is open, so a panel that closes on Esc leaves this one to it. */
+export declare const pickerOpen: () => boolean;
 /** The overlay's `onEscapeKeyDown`: ignores Esc while a picker is open, else runs the caller's. */
 export declare function escapeToPicker(own?: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;

package/dist/ui/overlay-guard.js

@@ -2,6 +2,8 @@
 // document before a base-ui picker open inside it (LumenSelector, Combobox), which isn't one of
 // Radix's layers, so one Esc closed both. While such a picker is open the overlay leaves Esc to it.
 const OPEN_PICKER = '[data-slot="lumen-selector"][data-open], [data-slot="combobox-content"][data-open]';
+/** Whether a picker is open, so a panel that closes on Esc leaves this one to it. */
+export const pickerOpen = () => !!document.querySelector(OPEN_PICKER);
 /** The overlay's `onEscapeKeyDown`: ignores Esc while a picker is open, else runs the caller's. */
 export function escapeToPicker(own) {
     return (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.114",
+  "version": "0.1.116",
   "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.114",
+    "@columenlabs/lumen-ui-types": "0.1.116",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",