@columenlabs/lumen-ui 0.1.308 → 0.1.310

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { DetailsTable, type DetailsTableProps, FactsTable } from './details-tabl
 export { DrawerSection, type DrawerSectionProps } from './drawer-section.js';
 export { type DrawerAction, LumenDrawer, type LumenDrawerProps } from './lumen-drawer.js';
 export { LumenBottomSheet, type LumenBottomSheetProps, type SheetSnap } from './lumen-bottom-sheet.js';
+export { type FloatingRect, LumenFloatingPanel, type LumenFloatingPanelProps, } from './lumen-floating-panel.js';
 export { LumenCode, type LumenCodeProps, langOfPath } from './lumen-code.js';
 export { LumenCodeEditor, type LumenCodeEditorProps, type LumenCodeLang, } from './lumen-code-editor.js';
 export { RenameField, type RenameFieldProps } from './rename-field.js';

package/dist/index.js

@@ -48,6 +48,7 @@ export { DetailsTable, FactsTable } from './details-table.js';
 export { DrawerSection } from './drawer-section.js';
 export { LumenDrawer } from './lumen-drawer.js';
 export { LumenBottomSheet } from './lumen-bottom-sheet.js';
+export { LumenFloatingPanel, } from './lumen-floating-panel.js';
 export { LumenCode, langOfPath } from './lumen-code.js';
 export { LumenCodeEditor, } from './lumen-code-editor.js';
 export { RenameField } from './rename-field.js';

package/dist/lumen-bottom-sheet.d.ts

@@ -13,6 +13,11 @@ export interface LumenBottomSheetProps {
     onSnap: (snap: SheetSnap) => void;
     /** Its name for screen readers. */
     title: string;
+    /**
+     * Its top row (tabs, a title): shown at every snap, and part of the drag area with the grab bar,
+     * so a drag that starts anywhere on it moves the sheet. Taps on its buttons still reach them.
+     */
+    header?: React.ReactNode;
     /** What it holds. It stays mounted at every snap, so running work inside keeps going. */
     children: React.ReactNode;
     className?: string;
@@ -22,4 +27,4 @@ export interface LumenBottomSheetProps {
  * drags above it reach the page. The person drags its handle between `snaps` (peek, half, full);
  * it never closes, so what it holds is never unmounted. Built on vaul's snap points.
  */
-export declare function LumenBottomSheet({ snaps, snap, onSnap, title, children, className, }: LumenBottomSheetProps): React.JSX.Element;
+export declare function LumenBottomSheet({ snaps, snap, onSnap, title, header, children, className, }: LumenBottomSheetProps): React.JSX.Element;

package/dist/lumen-bottom-sheet.js

@@ -46,7 +46,7 @@ function useScreenHeight() {
  * drags above it reach the page. The person drags its handle between `snaps` (peek, half, full);
  * it never closes, so what it holds is never unmounted. Built on vaul's snap points.
  */
-export function LumenBottomSheet({ snaps, snap, onSnap, title, children, className, }) {
+export function LumenBottomSheet({ snaps, snap, onSnap, title, header, children, className, }) {
     const h = useScreenHeight();
     const inset = useSafeBottom();
     // A px snap rests above the home bar: vaul gets it with the bar's height added.
@@ -63,7 +63,10 @@ export function LumenBottomSheet({ snaps, snap, onSnap, title, children, classNa
     const [typing, setTyping] = React.useState(false);
     const lifted = typing && kb ? Math.min(rested, kb.height) : undefined;
     const shown = lifted ?? rested;
-    return (_jsx(Drawer.Root, { open: true, modal: false, dismissible: false, handleOnly: true, snapPoints: rests, activeSnapPoint: rests[at] ?? rest(snap), setActiveSnapPoint: (s) => {
+    return (_jsx(Drawer.Root, { open: true, modal: false, dismissible: false, 
+        // The grab bar and the header drag it; the body is marked no-drag, so its lists and chat
+        // scroll and never move the sheet. (Only the 4px bar used to drag, so most swipes missed.)
+        snapPoints: rests, activeSnapPoint: rests[at] ?? rest(snap), setActiveSnapPoint: (s) => {
             const i = s == null ? -1 : rests.indexOf(s);
             const next = snaps[i];
             if (next !== undefined)
@@ -75,5 +78,5 @@ export function LumenBottomSheet({ snaps, snap, onSnap, title, children, classNa
                             setTyping(false);
                     }, "data-lifted": lifted === undefined ? undefined : '', style: lifted === undefined || !kb
                         ? undefined
-                        : { top: kb.top + kb.height - lifted, bottom: 'auto', height: lifted }, className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { height: shown }, children: [_jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "mx-auto! my-2! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }), _jsx("div", { className: cn('flex min-h-0 flex-1 flex-col', lifted === undefined && 'pb-[env(safe-area-inset-bottom)]'), children: children })] })] }) }) }) }));
+                        : { top: kb.top + kb.height - lifted, bottom: 'auto', height: lifted }, className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { height: shown }, children: [_jsx("div", { className: "flex h-5 shrink-0 items-center justify-center", children: _jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "m-0! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }) }), header !== undefined && _jsx("div", { className: "shrink-0", children: header }), _jsx("div", { "data-vaul-no-drag": "", className: cn('flex min-h-0 flex-1 flex-col', lifted === undefined && 'pb-[env(safe-area-inset-bottom)]'), children: children })] })] }) }) }) }));
 }

package/dist/lumen-floating-panel.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/** Where the panel sits in its box, and how big it is, px. */
+export interface FloatingRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface LumenFloatingPanelProps {
+    /** Its name for screen readers, and the fold button's tooltip. */
+    title: string;
+    /** Its top row (tabs, a title), between the grip and the fold button. Shown folded too. */
+    header?: React.ReactNode;
+    /** What it holds. It stays mounted while folded, so running work inside keeps going. */
+    children: React.ReactNode;
+    /** Where it starts on a device that has not moved it yet. */
+    defaultRect?: Partial<FloatingRect>;
+    /** Kept on this device under this key: where the person left it, its size and whether it is folded. */
+    storageKey?: string;
+    /** Folded to its header, controlled (left out, it keeps its own and the device remembers it). */
+    folded?: boolean;
+    onFold?: (folded: boolean) => void;
+    minWidth?: number;
+    minHeight?: number;
+    className?: string;
+}
+/**
+ * A see-through panel that floats over a live page (a 3D view, a map) inside its parent: the person
+ * drags it by its grip, resizes it from its edges and corner, and folds it to its header. Its box is
+ * the parent (which must be `relative`), and it is kept inside it when the box changes size (a phone
+ * turning). Taps outside it reach the page. Built on react-rnd.
+ */
+export declare function LumenFloatingPanel({ title, header, children, defaultRect, storageKey, folded: foldedProp, onFold, minWidth, minHeight, className, }: LumenFloatingPanelProps): React.JSX.Element;

package/dist/lumen-floating-panel.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from 'lucide-react';
+import * as React from 'react';
+import { Rnd } from 'react-rnd';
+import { cn } from './lib/utils.js';
+import { Button } from './ui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+const DEFAULT = { x: 12, y: 12, width: 330, height: 300 };
+function load(key) {
+    if (!key)
+        return {};
+    try {
+        return JSON.parse(localStorage.getItem(key) ?? '{}') ?? {};
+    }
+    catch {
+        return {};
+    }
+}
+/**
+ * A see-through panel that floats over a live page (a 3D view, a map) inside its parent: the person
+ * drags it by its grip, resizes it from its edges and corner, and folds it to its header. Its box is
+ * the parent (which must be `relative`), and it is kept inside it when the box changes size (a phone
+ * turning). Taps outside it reach the page. Built on react-rnd.
+ */
+export function LumenFloatingPanel({ title, header, children, defaultRect, storageKey, folded: foldedProp, onFold, minWidth = 240, minHeight = 160, className, }) {
+    const saved = React.useMemo(() => load(storageKey), [storageKey]);
+    const [rect, setRect] = React.useState(saved.rect ?? { ...DEFAULT, ...defaultRect });
+    const [foldedOwn, setFoldedOwn] = React.useState(!!saved.folded);
+    const folded = foldedProp ?? foldedOwn;
+    const setFolded = (f) => {
+        setFoldedOwn(f);
+        onFold?.(f);
+    };
+    const box = React.useRef(null);
+    const [room, setRoom] = React.useState(null);
+    React.useLayoutEffect(() => {
+        const el = box.current;
+        if (!el)
+            return;
+        const read = () => setRoom({ w: el.clientWidth, h: el.clientHeight });
+        read();
+        const seen = new ResizeObserver(read);
+        seen.observe(el);
+        return () => seen.disconnect();
+    }, []);
+    React.useEffect(() => {
+        if (!storageKey)
+            return;
+        try {
+            localStorage.setItem(storageKey, JSON.stringify({ rect, folded }));
+        }
+        catch { }
+    }, [storageKey, rect, folded]);
+    // Inside the box whatever its size now: smaller than the box, and moved back in if it hangs out.
+    const fit = (r) => {
+        if (!room)
+            return r;
+        const width = Math.max(Math.min(minWidth, room.w), Math.min(r.width, room.w));
+        const height = Math.max(Math.min(minHeight, room.h), Math.min(r.height, room.h));
+        return {
+            width,
+            height,
+            x: Math.max(0, Math.min(r.x, room.w - width)),
+            y: Math.max(0, Math.min(r.y, room.h - height)),
+        };
+    };
+    const shown = fit(rect);
+    return (_jsx("div", { ref: box, className: "pointer-events-none absolute inset-0 z-20", children: room && (_jsx(Rnd, { bounds: "parent", position: { x: shown.x, y: shown.y }, size: { width: shown.width, height: folded ? 'auto' : shown.height }, minWidth: minWidth, minHeight: folded ? undefined : minHeight, dragHandleClassName: "lumen-float-grip", enableResizing: folded
+                ? false
+                : { right: true, bottom: true, bottomRight: true, left: true, bottomLeft: true }, 
+            // A finger needs a fuller edge than a mouse: 12px edges, a 24px corner.
+            resizeHandleStyles: {
+                right: { width: 12, right: -6 },
+                left: { width: 12, left: -6 },
+                bottom: { height: 12, bottom: -6 },
+                bottomRight: { width: 24, height: 24, right: -6, bottom: -6 },
+                bottomLeft: { width: 24, height: 24, left: -6, bottom: -6 },
+            }, onDragStop: (_e, d) => setRect((r) => ({ ...r, x: d.x, y: d.y })), onResizeStop: (_e, _dir, el, _delta, pos) => setRect({ x: pos.x, y: pos.y, width: el.offsetWidth, height: el.offsetHeight }), className: "pointer-events-auto", children: _jsxs("section", { "data-slot": "lumen-floating-panel", "aria-label": title, className: cn('flex h-full flex-col overflow-hidden rounded-xl border bg-popover/85 text-popover-foreground shadow-lg backdrop-blur-md', className), children: [_jsxs("div", { className: "flex shrink-0 items-center gap-0.5 border-b pr-1", children: [_jsx("span", { className: "lumen-float-grip flex h-11 w-8 shrink-0 cursor-grab touch-none items-center justify-center text-muted-foreground active:cursor-grabbing", "aria-hidden": true, children: _jsx(GripVerticalIcon, { className: "size-4" }) }), _jsx("div", { className: "min-w-0 flex-1", children: header }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": folded ? `Open ${title}` : `Fold ${title}`, "aria-expanded": !folded, onClick: () => setFolded(!folded), children: folded ? _jsx(ChevronDownIcon, {}) : _jsx(ChevronUpIcon, {}) }) }), _jsx(TooltipContent, { children: folded ? `Open ${title}` : `Fold ${title}` })] })] }), _jsx("div", { className: cn('flex min-h-0 flex-1 flex-col', folded && 'hidden'), children: children })] }) })) }));
+}

package/dist/lumen-tabs.d.ts

@@ -12,10 +12,16 @@ export interface LumenTab<V extends string = string> {
     /** Left out of the row (a tab this page does not have). */
     hidden?: boolean;
 }
-export declare function LumenTabs<V extends string>({ tabs, value, onChange, actions, }: {
+export declare function LumenTabs<V extends string>({ tabs, value, onChange, actions, variant, }: {
     tabs: LumenTab<V>[];
     value: V | undefined;
     onChange: (value: V) => void;
     /** What only the open tab uses, at the row's right end. */
     actions?: ReactNode;
+    /**
+     * `row` (default): icon and name side by side, the rest in More. `stacked`: a phone panel's bar,
+     * the tabs sharing the row evenly, each its icon over a short name. `icons`: icons only, each
+     * named in its tooltip, for a small floating panel.
+     */
+    variant?: 'row' | 'stacked' | 'icons';
 }): import("react").JSX.Element;

package/dist/lumen-tabs.js

@@ -10,12 +10,26 @@ 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';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.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, }) {
+export function LumenTabs({ tabs, value, onChange, actions, variant = 'row', }) {
     const shown = tabs.filter((t) => !t.hidden);
+    if (variant !== 'row')
+        return (_jsx(EvenTabs, { tabs: shown, value: value, onChange: onChange, actions: actions, icons: variant === 'icons' }));
+    return _jsx(RowTabs, { tabs: shown, value: value, onChange: onChange, actions: actions });
+}
+/** A bar of tabs that share the row evenly: icon over name, or icons alone with a tooltip. */
+function EvenTabs({ tabs, value, onChange, actions, icons, }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(Tabs, { value: value, onValueChange: (v) => onChange(v), className: "min-w-0 flex-1", children: _jsx(TabsList, { className: "w-full gap-0", children: tabs.map((t) => {
+                        const name = typeof t.label === 'string' ? t.label : undefined;
+                        const trigger = (_jsxs(TabsTrigger, { value: t.value, "aria-label": icons ? name : undefined, className: cn('relative min-h-11 min-w-0 flex-1 justify-center py-1 after:inset-x-3', !icons && 'flex-col gap-0.5 text-xs leading-3 [&_svg]:size-5'), children: [_jsx(t.icon, {}), !icons && _jsx("span", { className: "max-w-full truncate", children: t.label }), t.after && (_jsx("span", { className: cn('text-xs', !icons ? 'absolute top-0.5 left-1/2 ml-2' : ''), children: t.after }))] }, t.value));
+                        return icons ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: trigger }), _jsx(TooltipContent, { children: t.label })] }, t.value)) : (trigger);
+                    }) }) }), actions] }));
+}
+function RowTabs({ tabs: shown, value, onChange, actions, }) {
     const box = useRef(null);
     const ruler = useRef(null);
     // How many tabs fit before the More menu; all of them until measured.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.308",
+  "version": "0.1.310",
   "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.308",
+    "@columenlabs/lumen-ui-types": "0.1.310",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -75,6 +75,7 @@
     "react-intersection-observer": "9.16.0",
     "react-markdown": "10.1.0",
     "react-resizable-panels": "^4.14.3",
+    "react-rnd": "10.5.3",
     "react-zoom-pan-pinch": "4.2.0",
     "recharts": "^3.10.1",
     "remark-gfm": "4.0.1",