@columenlabs/lumen-ui 0.1.120 → 0.1.122

package/dist/index.d.ts

@@ -76,6 +76,7 @@ export { type McpServer, McpSettings } from './mcp-settings.js';
 export { lumenToast } from './lumen-toast.js';
 export { LumenShell, type LumenShellProps, type ShellUser, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
 export { apiJson } from './api-fetch.js';
+export { savedAnswers, type SavedAnswersOptions, type SavedAnswersPersister, } from './saved-answers.js';
 export { cn } from './lib/utils.js';
 export { type HealthProbe, StatusHealth } from './status-health.js';
 export { type StatusMessage, type StatusMessageTone, StatusMessages, groupStatusMessages, } from './status-messages.js';

package/dist/index.js

@@ -83,6 +83,7 @@ export { McpSettings } from './mcp-settings.js';
 export { lumenToast } from './lumen-toast.js';
 export { LumenShell, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
 export { apiJson } from './api-fetch.js';
+export { savedAnswers, } from './saved-answers.js';
 export { cn } from './lib/utils.js';
 export { StatusHealth } from './status-health.js';
 export { StatusMessages, groupStatusMessages, } from './status-messages.js';

package/dist/lumen-tabs.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { NavIcon } from './nav.js';
 /**
  * One tab: its icon, its name and a count or mark after it. Every tab has an icon; a tab the person edits takes theirs through `iconOf` and LumenTabDrawer.

package/dist/lumen-tabs.js

@@ -1,8 +1,64 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useScrollFade } from './scroll-fade.js';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// LumenTabs: a page's
+// tabs, each tab its own LumenLayout. The tabs sit on the left of one row and what only the open tab
+// uses (its inputs, its Run or Cancel) at the right end, so the page header keeps only what acts on
+// the whole page. Tabs and actions share one row on a phone too ("it splits into 2 rows"); only
+// actions so wide that the tabs would get under 12rem wrap to a line under them. Tabs that do not
+// fit what the actions leave fold into a More menu at the row's end, never a cut-off tab.
+import { ChevronDownIcon } from 'lucide-react';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { cn } from './lib/utils.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { Tabs, TabsList, TabsTrigger } from './ui/tabs.js';
+/** The row's gap between tabs (`gap-6` in TabsList). */
+const GAP = 24;
+/** The More button, drawn like a tab. */
+const MORE = 'relative inline-flex shrink-0 items-center gap-1.5 pb-2 text-sm leading-4 font-medium whitespace-nowrap outline-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground focus-visible:rounded-sm focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0';
 export function LumenTabs({ tabs, value, onChange, actions, }) {
     const shown = tabs.filter((t) => !t.hidden);
-    const fade = useScrollFade();
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "min-w-48 max-w-full flex-1", children: shown.length ? (_jsx(Tabs, { value: value, onValueChange: (v) => onChange(v), children: _jsx(TabsList, { ref: fade.ref, onScroll: fade.update, "data-fade": fade.side, className: "max-w-full overflow-x-auto", children: shown.map(({ value: v, label, icon: Icon, after }) => (_jsxs(TabsTrigger, { value: v, children: [_jsx(Icon, {}), label, after] }, v))) }) })) : null }), actions ? _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: actions }) : null] }));
+    const box = useRef(null);
+    const ruler = useRef(null);
+    // How many tabs fit before the More menu; all of them until measured.
+    const [fit, setFit] = useState(shown.length);
+    // The More button names the open tab when it is folded, so its width moves with the open tab.
+    const sig = `${shown.map((t) => t.value).join('|')}#${value}`;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: re-measure when the tab set changes
+    useLayoutEffect(() => {
+        const el = box.current;
+        const r = ruler.current;
+        if (!el || !r)
+            return;
+        const measure = () => {
+            const widths = [...r.children].map((c) => c.offsetWidth);
+            const more = widths.pop() ?? 0;
+            // A few pixels spare for rounding, so the row never needs to scroll.
+            const room = el.clientWidth - 4;
+            const all = widths.reduce((a, w, i) => a + w + (i ? GAP : 0), 0);
+            if (all <= room)
+                return setFit(widths.length);
+            let used = more;
+            let n = 0;
+            for (const w of widths) {
+                if (used + GAP + w > room)
+                    break;
+                used += GAP + w;
+                n++;
+            }
+            setFit(Math.max(1, n));
+        };
+        measure();
+        // The row's room, and the tabs' own widths (a count that arrives after the first paint).
+        const seen = new ResizeObserver(measure);
+        seen.observe(el);
+        seen.observe(r);
+        return () => seen.disconnect();
+    }, [sig]);
+    const inRow = shown.slice(0, fit);
+    const folded = shown.slice(fit);
+    const openFolded = folded.find((t) => t.value === value);
+    const trigger = (t) => (_jsxs(_Fragment, { children: [_jsx(t.icon, {}), t.label, t.after] }));
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { ref: box, className: "relative min-w-48 max-w-full flex-1", children: [_jsx(Tabs, { "aria-hidden": true, className: "pointer-events-none invisible absolute h-0 overflow-hidden", children: _jsxs(TabsList, { ref: ruler, className: "w-max", children: [shown.map((t) => (_jsx(TabsTrigger, { value: t.value, tabIndex: -1, children: trigger(t) }, t.value))), _jsxs("span", { "data-slot": "tabs-trigger", className: MORE, children: [openFolded ? trigger(openFolded) : 'More', _jsx(ChevronDownIcon, {})] })] }) }), shown.length ? (_jsx(Tabs, { value: value, onValueChange: (v) => onChange(v), children: _jsxs(TabsList, { className: "max-w-full overflow-x-hidden", children: [inRow.map((t) => (_jsx(TabsTrigger, { value: t.value, children: trigger(t) }, t.value))), folded.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { "data-slot": "tabs-trigger", "data-state": openFolded ? 'active' : 'inactive', className: cn(MORE, openFolded &&
+                                                'text-foreground after:bg-primary [&_svg:first-child]:text-primary'), children: [openFolded ? trigger(openFolded) : 'More', _jsx(ChevronDownIcon, { className: "text-muted-foreground" })] }), _jsx(DropdownMenuContent, { align: "end", className: "w-auto min-w-44", 
+                                            // A pick from the menu moves the tab; no keyboard ring back on the button.
+                                            onCloseAutoFocus: (e) => e.preventDefault(), children: _jsx(DropdownMenuRadioGroup, { value: value, onValueChange: (v) => onChange(v), children: folded.map((t) => (_jsx(DropdownMenuRadioItem, { value: t.value, children: trigger(t) }, t.value))) }) })] }))] }) })) : null] }), actions ? _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: actions }) : null] }));
 }

package/dist/saved-answers.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Saved answers: a react-query persister that keeps an app's answers in IndexedDB, so a page
+ * paints at once from the last visit. Pass it to `PersistQueryClientProvider` as `persister`.
+ *
+ * Nothing waits on the device for good: a read that has not answered within `restoreMs` (another
+ * tab holding a write, a broken store) gives up and the app asks the server, and an aborted or
+ * blocked store fails instead of hanging. The provider shows nothing until the restore settles,
+ * so a hung read would otherwise leave the app blank. Writes go out at most once a second, as one
+ * record kept as an object (no JSON round trip).
+ */
+/** The shape `@tanstack/react-query-persist-client` expects; kept structural so the kit needs no extra package. */
+export interface SavedAnswersPersister<C = unknown> {
+    persistClient: (client: C) => void;
+    restoreClient: () => Promise<C | undefined>;
+    removeClient: () => Promise<void> | void;
+}
+export interface SavedAnswersOptions {
+    /** The IndexedDB database name; one per app. */
+    name: string;
+    /** How long the first paint waits for the saved answers before asking the server (ms). Default 1500. */
+    restoreMs?: number;
+    /** How long writes wait to batch (ms). Default 1000. */
+    writeMs?: number;
+}
+export declare function savedAnswers<C = unknown>({ name, restoreMs, writeMs, }: SavedAnswersOptions): SavedAnswersPersister<C>;

package/dist/saved-answers.js

@@ -0,0 +1,60 @@
+/**
+ * Saved answers: a react-query persister that keeps an app's answers in IndexedDB, so a page
+ * paints at once from the last visit. Pass it to `PersistQueryClientProvider` as `persister`.
+ *
+ * Nothing waits on the device for good: a read that has not answered within `restoreMs` (another
+ * tab holding a write, a broken store) gives up and the app asks the server, and an aborted or
+ * blocked store fails instead of hanging. The provider shows nothing until the restore settles,
+ * so a hung read would otherwise leave the app blank. Writes go out at most once a second, as one
+ * record kept as an object (no JSON round trip).
+ */
+const KEY = 'queries';
+export function savedAnswers({ name, restoreMs = 1500, writeMs = 1000, }) {
+    // No IndexedDB (a test runner, a locked-down browser): nothing is saved, every load asks the server.
+    if (typeof indexedDB === 'undefined')
+        return {
+            persistClient: () => { },
+            restoreClient: async () => undefined,
+            removeClient: () => { },
+        };
+    let db;
+    const open = () => {
+        if (!db)
+            db = new Promise((resolve, reject) => {
+                const req = indexedDB.open(name, 1);
+                req.onupgradeneeded = () => req.result.createObjectStore('cache');
+                req.onsuccess = () => resolve(req.result);
+                req.onerror = () => reject(req.error);
+                req.onblocked = () => reject(new Error(`${name}: saved answers blocked`));
+            }).catch((e) => {
+                // A failed open is tried again on the next read or write.
+                db = undefined;
+                throw e;
+            });
+        return db;
+    };
+    const run = (mode, op) => open().then((d) => new Promise((resolve, reject) => {
+        const tx = d.transaction('cache', mode);
+        const req = op(tx.objectStore('cache'));
+        tx.oncomplete = () => resolve(req.result);
+        tx.onerror = () => reject(tx.error);
+        // An aborted transaction (storage full, the browser gave up) fires only abort, never error.
+        tx.onabort = () => reject(tx.error ?? new Error(`${name}: saved answers aborted`));
+    }));
+    let next;
+    let timer;
+    return {
+        persistClient: (client) => {
+            next = client;
+            timer ??= setTimeout(() => {
+                timer = undefined;
+                void run('readwrite', (s) => s.put(next, KEY)).catch(() => { });
+            }, writeMs);
+        },
+        restoreClient: () => Promise.race([
+            run('readonly', (s) => s.get(KEY)).catch(() => undefined),
+            new Promise((resolve) => setTimeout(() => resolve(undefined), restoreMs)),
+        ]),
+        removeClient: () => run('readwrite', (s) => s.delete(KEY)).then(() => { }, () => { }),
+    };
+}

package/dist/scroll-fade.js

@@ -12,8 +12,9 @@ export function useScrollFade(given) {
         const el = ref.current;
         if (!el)
             return;
-        const start = el.scrollLeft > 1;
-        const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        // A couple of pixels past the edge (rounding, a border) is not "more beyond it".
+        const start = el.scrollLeft > 2;
+        const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 2;
         setSide(start && end ? 'both' : start ? 'start' : end ? 'end' : undefined);
     }, [ref]);
     useEffect(() => {

package/package.json

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