@columenlabs/lumen-ui 0.2.2 → 0.3.1

package/dist/confirm.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface LumenConfirmProps {
     /** The question, e.g. `Delete view Options?`. */
     title: ReactNode;
@@ -14,5 +14,7 @@ export interface LumenConfirmProps {
     onOpenChange?: (open: boolean) => void;
     /** False for a confirm that destroys nothing (a new version): its action is not red. */
     destructive?: boolean;
+    /** A word the person must type before the action unlocks, for a step that loses a lot (`DELETE`). */
+    typeToConfirm?: string;
 }
-export declare function LumenConfirm({ title, description, action, cancel, onConfirm, children, open, onOpenChange, destructive, }: LumenConfirmProps): import("react").JSX.Element;
+export declare function LumenConfirm({ title, description, action, cancel, onConfirm, children, open, onOpenChange, destructive, typeToConfirm, }: LumenConfirmProps): import("react").JSX.Element;

package/dist/confirm.js

@@ -1,5 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Every delete asks first: one shadcn AlertDialog every app uses for any
+// delete, remove, cancel or other step to confirm (LumenConfirm, : no raw
+// AlertDialog in an app). Wrap the trigger button, or control `open` when it starts from a menu item.
+import { useId, useState } from 'react';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from './ui/alert-dialog.js';
-export function LumenConfirm({ title, description = 'This cannot be undone.', action = 'Delete', cancel = 'Cancel', onConfirm, children, open, onOpenChange, destructive = true, }) {
-    return (_jsxs(AlertDialog, { open: open, onOpenChange: onOpenChange, children: [children && _jsx(AlertDialogTrigger, { asChild: true, children: children }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: cancel }), _jsx(AlertDialogAction, { variant: destructive ? 'destructive-confirm' : 'default', onClick: onConfirm, children: action })] })] })] }));
+import { Field, FieldLabel } from './ui/field.js';
+import { Input } from './ui/input.js';
+export function LumenConfirm({ title, description = 'This cannot be undone.', action = 'Delete', cancel = 'Cancel', onConfirm, children, open, onOpenChange, destructive = true, typeToConfirm, }) {
+    const id = useId();
+    const [typed, setTyped] = useState('');
+    const locked = typeToConfirm !== undefined && typed !== typeToConfirm;
+    const change = (o) => {
+        if (!o)
+            setTyped('');
+        onOpenChange?.(o);
+    };
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: change, children: [children && _jsx(AlertDialogTrigger, { asChild: true, children: children }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), typeToConfirm !== undefined && (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: id, children: _jsxs("span", { children: ["Type ", _jsx("code", { className: "rounded bg-muted px-1.5 font-code", children: typeToConfirm }), " to confirm"] }) }), _jsx(Input, { id: id, autoComplete: "off", className: "font-code", value: typed, onChange: (e) => setTyped(e.target.value) })] })), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: cancel }), _jsx(AlertDialogAction, { variant: destructive ? 'destructive-confirm' : 'default', disabled: locked, onClick: onConfirm, children: action })] })] })] }));
 }

package/dist/index.d.ts

@@ -15,6 +15,10 @@ export { LumenEChart, type EChartOption, type ChartTokens, axisStyle, baseOption
 export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, type CardControls, type CardLink, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm, type LumenConfirmProps } from './confirm.js';
+export { type LumenAuthPoint, LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, type LumenAuthStageProps, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+export { LumenChoice, type LumenChoiceOption } from './lumen-choice.js';
+export { LumenSecret } from './lumen-secret.js';
+export { RankedBars, StackedBars } from './lumen-widget-charts.js';
 export { COVERAGE_LEVELS, CoverageCell, type CoverageJobState, type CoverageLevel, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { type CoverageBlock, type CoverageData, type CoverageFact, type CoveragePick, type CoverageRow, type CoverageSummary, LumenCoverageMap, type LumenCoverageMapProps, blockName, blockOf, } from './coverage-map.js';
 export { type CalendarFact, LumenCoverageCalendarMap, type LumenCoverageCalendarMapProps, } from './coverage-calendar-map.js';
@@ -81,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

@@ -22,6 +22,10 @@ export { LumenEChart, axisStyle, baseOption, useChartTokens, } from './lumen-ech
 export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm } from './confirm.js';
+export { LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+export { LumenChoice } from './lumen-choice.js';
+export { LumenSecret } from './lumen-secret.js';
+export { RankedBars, StackedBars } from './lumen-widget-charts.js';
 export { COVERAGE_LEVELS, CoverageCell, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { LumenCoverageMap, blockName, blockOf, } from './coverage-map.js';
 export { LumenCoverageCalendarMap, } from './coverage-calendar-map.js';
@@ -88,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-auth.d.ts

@@ -0,0 +1,67 @@
+import { type ComponentType, type ReactNode } from 'react';
+export interface LumenAuthPoint {
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    title: string;
+    body: string;
+}
+export interface LumenAuthStageProps {
+    /** The app's logo and name, shown over the story and, on a phone, over the form. */
+    brand: ReactNode;
+    /** The story's headline and the line under it. */
+    pitch: {
+        title: ReactNode;
+        body?: ReactNode;
+    };
+    points?: LumenAuthPoint[];
+    /** A picture under the points, such as a diagram of what the app does. */
+    illustration?: ReactNode;
+    /** Small links under the form (privacy, terms). */
+    footer?: ReactNode;
+    children: ReactNode;
+}
+/** The page a signed-out screen sits in. */
+export declare function LumenAuthStage({ brand, pitch, points, illustration, footer, children, }: LumenAuthStageProps): import("react").JSX.Element;
+/** A screen's title, and a line under it. */
+export declare function LumenAuthHeading({ title, sub }: {
+    title: ReactNode;
+    sub?: ReactNode;
+}): import("react").JSX.Element;
+/** A red line over the form; renders nothing when empty. */
+export declare function LumenAuthProblem({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element | null;
+/** A plain note over the form, such as "New code sent"; renders nothing when empty. */
+export declare function LumenAuthNote({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element | null;
+interface TextFieldProps {
+    id?: string;
+    value: string;
+    onChange: (v: string) => void;
+    /** The browser's autocomplete hint (`username`, `email`, `current-password`, `new-password`). */
+    autoComplete: string;
+    label?: string;
+}
+export declare function LumenEmailField({ id, value, onChange, autoComplete, label, }: TextFieldProps): import("react").JSX.Element;
+/** A password box with a Show switch beside it. */
+export declare function LumenPasswordField({ id, value, onChange, autoComplete, label, }: TextFieldProps): import("react").JSX.Element;
+/** A one-time code from an email or an authenticator app: digits only, big and spaced. */
+export declare function LumenCodeField({ id, value, onChange, length, error, hint, onResend, resendLabel, }: {
+    id?: string;
+    value: string;
+    onChange: (v: string) => void;
+    length?: number;
+    error?: ReactNode;
+    hint?: ReactNode;
+    /** Shows a link after the hint that asks for a fresh code. */
+    onResend?: () => void;
+    resendLabel?: string;
+}): import("react").JSX.Element;
+/** Progress through a short flow: one bar per step, filled up to `at`, and "Step 2 of 3". */
+export declare function LumenStepBar({ at, of }: {
+    at: number;
+    of: number;
+}): import("react").JSX.Element;
+export {};

package/dist/lumen-auth.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The signed-out screens every app shares: a split page (the app's story on the left, hidden on
+// a phone, the form on the right) and the fields its forms are built from. The app passes its
+// brand, pitch, points, illustration and footer links; the kit draws the layout.
+import { Lock, Mail } from 'lucide-react';
+import { useId, useState } from 'react';
+import { Alert, AlertDescription } from './ui/alert.js';
+import { Checkbox } from './ui/checkbox.js';
+import { Field, FieldDescription, FieldError, FieldLabel } from './ui/field.js';
+import { Input } from './ui/input.js';
+import { InputGroup, InputGroupAddon, InputGroupInput } from './ui/input-group.js';
+/** The page a signed-out screen sits in. */
+export function LumenAuthStage({ brand, pitch, points = [], illustration, footer, children, }) {
+    return (_jsxs("div", { className: "grid min-h-svh grid-cols-1 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)]", children: [_jsxs("aside", { className: "hidden flex-col gap-10 border-r bg-sidebar px-10 py-8 text-sidebar-foreground lg:flex", children: [brand, _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-balance font-semibold text-3xl leading-tight", children: pitch.title }), pitch.body && _jsx("p", { className: "max-w-md text-muted-foreground", children: pitch.body })] }), points.length > 0 && (_jsx("ul", { className: "flex flex-col gap-4", children: points.map(({ icon: Icon, title, body }) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-4.5" }) }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium text-sm", children: title }), _jsx("span", { className: "text-muted-foreground text-sm", children: body })] })] }, title))) })), illustration] }), _jsxs("main", { className: "flex flex-col bg-background px-6 py-8 sm:px-12", children: [_jsx("div", { className: "lg:hidden", children: brand }), _jsx("div", { className: "mx-auto flex w-full max-w-sm flex-1 flex-col justify-center py-8", children: children }), footer && _jsx("div", { className: "text-center text-muted-foreground text-xs", children: footer })] })] }));
+}
+/** A screen's title, and a line under it. */
+export function LumenAuthHeading({ title, sub }) {
+    return (_jsxs("div", { className: "mb-6 flex flex-col gap-1.5", children: [_jsx("h1", { className: "font-semibold text-2xl", children: title }), sub && _jsx("p", { className: "text-muted-foreground text-sm", children: sub })] }));
+}
+/** A red line over the form; renders nothing when empty. */
+export function LumenAuthProblem({ children }) {
+    if (!children)
+        return null;
+    return (_jsx(Alert, { variant: "destructive", className: "mb-4", children: _jsx(AlertDescription, { children: children }) }));
+}
+/** A plain note over the form, such as "New code sent"; renders nothing when empty. */
+export function LumenAuthNote({ children }) {
+    if (!children)
+        return null;
+    return (_jsxs(Alert, { className: "mb-4", children: [_jsx(Mail, {}), _jsx(AlertDescription, { children: children })] }));
+}
+export function LumenEmailField({ id, value, onChange, autoComplete, label = 'Email', }) {
+    const own = useId();
+    const fieldId = id ?? own;
+    return (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: fieldId, children: label }), _jsxs(InputGroup, { className: "h-10", children: [_jsx(InputGroupAddon, { children: _jsx(Mail, {}) }), _jsx(InputGroupInput, { id: fieldId, type: "email", required: true, autoComplete: autoComplete, placeholder: "you@example.com", value: value, onChange: (e) => onChange(e.target.value) })] })] }));
+}
+/** A password box with a Show switch beside it. */
+export function LumenPasswordField({ id, value, onChange, autoComplete, label = 'Password', }) {
+    const own = useId();
+    const fieldId = id ?? own;
+    const [show, setShow] = useState(false);
+    return (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: fieldId, children: label }), _jsxs(InputGroup, { className: "h-10", children: [_jsx(InputGroupAddon, { children: _jsx(Lock, {}) }), _jsx(InputGroupInput, { id: fieldId, type: show ? 'text' : 'password', required: true, autoComplete: autoComplete, value: value, onChange: (e) => onChange(e.target.value) }), _jsx(InputGroupAddon, { align: "inline-end", className: "border-l bg-muted/50 px-3", children: _jsxs("label", { htmlFor: `${fieldId}-show`, className: "flex items-center gap-1.5 text-sm", children: [_jsx(Checkbox, { id: `${fieldId}-show`, checked: show, onCheckedChange: (v) => setShow(v === true) }), ' ', "Show"] }) })] })] }));
+}
+/** A one-time code from an email or an authenticator app: digits only, big and spaced. */
+export function LumenCodeField({ id, value, onChange, length = 6, error, hint, onResend, resendLabel = 'Send a new code', }) {
+    const own = useId();
+    return (_jsxs(Field, { "data-invalid": error ? true : undefined, children: [_jsx(Input, { id: id ?? own, inputMode: "numeric", autoComplete: "one-time-code", placeholder: '0'.repeat(length), maxLength: length, "aria-label": `${length}-digit code`, className: "h-14 text-center font-code text-2xl tracking-[0.6em]", value: value, onChange: (e) => onChange(e.target.value.replace(/\D/g, '').slice(0, length)), "aria-invalid": Boolean(error) }), error ? _jsx(FieldError, { children: error }) : null, (hint || onResend) && (_jsxs(FieldDescription, { className: "text-center", children: [hint, ' ', onResend && (_jsx("button", { type: "button", className: "text-primary underline-offset-4 hover:underline", onClick: onResend, children: resendLabel }))] }))] }));
+}
+/** Progress through a short flow: one bar per step, filled up to `at`, and "Step 2 of 3". */
+export function LumenStepBar({ at, of }) {
+    return (_jsxs("div", { className: "mb-5 flex flex-col gap-1.5", children: [_jsx("div", { className: "flex gap-1.5", children: Array.from({ length: of }, (_, i) => i + 1).map((n) => (_jsx("span", { className: `h-1 flex-1 rounded-full ${n <= at ? 'bg-primary' : 'bg-muted'}` }, n))) }), _jsxs("span", { className: "text-center text-muted-foreground text-xs", children: ["Step ", at, " of ", of] })] }));
+}

package/dist/lumen-choice.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentType, ReactNode } from 'react';
+export interface LumenChoiceOption<T extends string> {
+    value: T;
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    title: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export declare function LumenChoice<T extends string>({ label, value, options, onValueChange, }: {
+    /** Names the group for screen readers. */
+    label: string;
+    /** The picked option, or null before the person picks. */
+    value: T | null;
+    options: LumenChoiceOption<T>[];
+    onValueChange: (v: T) => void;
+}): import("react").JSX.Element;

package/dist/lumen-choice.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A pick-one list of cards, each with an icon, a title and a line under it: the way an app asks
+// "how do you want to do this?" when each option needs a sentence. For a short one-of-a-few
+// choice without notes, use CardSegments.
+import { Check } from 'lucide-react';
+import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from './ui/item.js';
+export function LumenChoice({ label, value, options, onValueChange, }) {
+    return (_jsx("fieldset", { "aria-label": label, className: "m-0 flex min-w-0 flex-col gap-3 border-0 p-0", children: options.map(({ value: v, icon: Icon, title, description, disabled }) => {
+            const picked = v === value;
+            return (_jsx(Item, { asChild: true, variant: "outline", className: picked ? 'border-primary bg-primary/5' : 'disabled:opacity-50', children: _jsxs("button", { type: "button", "aria-pressed": picked, disabled: disabled, onClick: () => onValueChange(v), children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Icon, { className: picked ? 'text-primary' : undefined }) }), _jsxs(ItemContent, { className: "text-left", children: [_jsx(ItemTitle, { children: title }), description && _jsx(ItemDescription, { children: description })] }), picked && _jsx(Check, { className: "size-5 shrink-0 text-primary" })] }) }, v));
+        }) }));
+}

package/dist/lumen-secret.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export declare function LumenSecret({ value, label, warning, hidden, }: {
+    value: string;
+    label?: string;
+    warning?: ReactNode;
+    /** Start with the value masked. */
+    hidden?: boolean;
+}): import("react").JSX.Element;

package/dist/lumen-secret.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A secret the app shows only once (a new API key, a signing secret): a warning to copy it now,
+// the value in code type with a Show switch, and a Copy button that says when it worked.
+import { Check, Copy, Eye, EyeOff, TriangleAlert } from 'lucide-react';
+import { useState } from 'react';
+import { Alert, AlertDescription } from './ui/alert.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
+export function LumenSecret({ value, label = 'Secret', warning = 'Copy it now. It won’t be shown again.', hidden = false, }) {
+    const [show, setShow] = useState(!hidden);
+    const [copied, setCopied] = useState(false);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [warning && (_jsxs(Alert, { children: [_jsx(TriangleAlert, {}), _jsx(AlertDescription, { children: warning })] })), _jsxs(InputGroup, { className: "h-10", children: [_jsx(InputGroupInput, { readOnly: true, "aria-label": label, type: show ? 'text' : 'password', value: value, className: "font-code text-xs", onFocus: (e) => e.currentTarget.select() }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(InputGroupButton, { size: "icon-xs", "aria-label": show ? `Hide ${label.toLowerCase()}` : `Show ${label.toLowerCase()}`, onClick: () => setShow((s) => !s), children: show ? _jsx(EyeOff, {}) : _jsx(Eye, {}) }), _jsxs(InputGroupButton, { size: "xs", onClick: copy, children: [copied ? _jsx(Check, {}) : _jsx(Copy, {}), copied ? 'Copied' : 'Copy'] })] })] })] }));
+}

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.2.2",
+  "version": "0.3.1",
   "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.2.2",
+    "@columenlabs/lumen-ui-types": "0.3.1",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",