@columenlabs/lumen-ui 0.3.0 → 0.3.2

package/dist/index.d.ts

@@ -85,3 +85,4 @@ export { useSymbolSheet } from './symbol-sheet-context.js';
 export { NoteLine, type NoteLineProps } from './note-line.js';
 export { type LumenFinderConfig, type LumenFinderPageType, type LumenFinderRow, type LumenFinderScope, LumenFinderButton, useLumenFinder, useLumenFinderRows, useOpenLumenFinder, } from './lumen-finder.js';
 export { type AssistantChat, LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, tabState, useAssistantHotkey, } from './assistant-panel.js';
+export { LumenTree, LumenTreeItem, type LumenTreeItemProps, type LumenTreeProps, useLumenTree, } from './lumen-tree.js';

package/dist/index.js

@@ -92,3 +92,4 @@ export { useSymbolSheet } from './symbol-sheet-context.js';
 export { NoteLine } from './note-line.js';
 export { LumenFinderButton, useLumenFinder, useLumenFinderRows, useOpenLumenFinder, } from './lumen-finder.js';
 export { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, tabState, useAssistantHotkey, } from './assistant-panel.js';
+export { LumenTree, LumenTreeItem, useLumenTree, } from './lumen-tree.js';

package/dist/lumen-tree.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+interface TreeContext {
+    /** Opens every item above the row `id`, scrolls to it and flashes it. */
+    reveal: (id: string) => void;
+    /** Items told to open by the last reveal, and a count so the same set opens again. */
+    opening: {
+        ids: Set<string>;
+        n: number;
+    };
+}
+/** The tree around the rows: `reveal` from any row inside it. */
+export declare function useLumenTree(): TreeContext;
+export interface LumenTreeProps {
+    children: ReactNode;
+    'aria-label'?: string;
+    className?: string;
+}
+export declare function LumenTree({ children, className, ...aria }: LumenTreeProps): import("react").JSX.Element;
+export interface LumenTreeItemProps {
+    /** What `reveal` finds this row by. */
+    id?: string;
+    /** The row itself, laid out as a wrapping line beside the chevron. */
+    row: ReactNode;
+    /** Rows under this one: LumenTreeItems. */
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    /** `positive`: the guide under it is the colour of a path taken; `muted`: the row is dimmed. */
+    tone?: 'default' | 'positive' | 'muted';
+    className?: string;
+}
+export declare function LumenTreeItem({ id, row, children, defaultOpen, tone, className, }: LumenTreeItemProps): import("react").JSX.Element;
+export {};

package/dist/lumen-tree.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// LumenTree: rows that nest, read top to bottom. Each item is one row; an item with children has a
+// chevron and folds, and its children hang off a guide line (green when `tone` is positive: the path
+// that was taken). Nothing about what the rows mean lives here: an app fills `row` with its own
+// words. Children stay mounted while folded, so `reveal` can find a row inside a closed item, open
+// every item above it, scroll to it and flash it (a link from one row to another).
+import { ChevronRightIcon } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { cn } from './lib/utils.js';
+import { Collapsible, CollapsibleContent } from './ui/collapsible.js';
+const Ctx = createContext(null);
+/** The tree around the rows: `reveal` from any row inside it. */
+export function useLumenTree() {
+    const c = useContext(Ctx);
+    if (!c)
+        throw new Error('useLumenTree outside LumenTree');
+    return c;
+}
+export function LumenTree({ children, className, ...aria }) {
+    const root = useRef(null);
+    const [opening, setOpening] = useState({ ids: new Set(), n: 0 });
+    const reveal = useCallback((id) => {
+        const el = root.current?.querySelector(`[data-tree-id="${CSS.escape(id)}"]`);
+        if (!el)
+            return;
+        const ids = new Set();
+        for (let p = el.parentElement; p && p !== root.current; p = p.parentElement) {
+            const k = p.getAttribute('data-tree-id');
+            if (k)
+                ids.add(k);
+        }
+        setOpening((o) => ({ ids, n: o.n + 1 }));
+        requestAnimationFrame(() => {
+            const row = el.querySelector(':scope > [data-tree-row]') ?? el;
+            const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+            row.scrollIntoView({ behavior: still ? 'auto' : 'smooth', block: 'center' });
+            row.animate(still
+                ? [{ outline: '1px solid var(--primary)' }, { outline: '1px solid transparent' }]
+                : [
+                    { backgroundColor: 'color-mix(in oklab, var(--primary) 35%, transparent)' },
+                    { backgroundColor: 'transparent' },
+                ], { duration: 1600, easing: 'ease-out' });
+        });
+    }, []);
+    const ctx = useMemo(() => ({ reveal, opening }), [reveal, opening]);
+    return (_jsx(Ctx.Provider, { value: ctx, children: _jsx("ul", { ref: root, className: cn('flex flex-col', className), ...aria, children: children }) }));
+}
+const isControl = (t) => t instanceof Element && t.closest('button, a, input, [role="button"], [data-tree-skip]') !== null;
+export function LumenTreeItem({ id, row, children, defaultOpen = false, tone = 'default', className, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    const ctx = useContext(Ctx);
+    const n = ctx?.opening.n ?? 0;
+    const told = id !== undefined && (ctx?.opening.ids.has(id) ?? false);
+    useEffect(() => {
+        if (told && n > 0)
+            setOpen(true);
+    }, [told, n]);
+    const has = children !== undefined && children !== null && children !== false;
+    const line = (_jsxs("div", { "data-tree-row": true, className: cn('flex min-h-7 flex-wrap items-baseline gap-x-2 gap-y-0.5 rounded-md px-1.5 py-0.5 hover:bg-muted/60', has && 'cursor-pointer', tone === 'muted' && 'text-muted-foreground'), onClick: has ? (e) => !isControl(e.target) && setOpen((o) => !o) : undefined, children: [has ? (_jsx("button", { type: "button", "aria-expanded": open, "aria-label": open ? 'Fold' : 'Unfold', className: "grid size-4 shrink-0 self-center place-items-center text-muted-foreground", onClick: (e) => {
+                    e.stopPropagation();
+                    setOpen((o) => !o);
+                }, children: _jsx(ChevronRightIcon, { className: cn('size-3.5 transition-transform', open && 'rotate-90') }) })) : (_jsx("span", { className: "w-4 shrink-0", "aria-hidden": true })), row] }));
+    return (_jsx("li", { "data-tree-id": id, className: className, children: has ? (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, children: [line, _jsx(CollapsibleContent, { forceMount: true, className: "data-[state=closed]:hidden", children: _jsx("ul", { className: cn('ml-3 flex flex-col border-l pl-2.5 max-sm:ml-2 max-sm:pl-1.5', tone === 'positive' && 'border-rule-yes/40'), children: children }) })] })) : (line) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.3.0",
+    "@columenlabs/lumen-ui-types": "0.3.2",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",