@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/view-edit-cell.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// An editable text cell: click the value, pick one already in use or type a
+// new one, or clear it. Saves at once through the field's `edit`. Clicks stay off the row, which
+// opens its details.
+import { PencilLineIcon, PlusIcon, XIcon } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { ColorChip, colorIcon } from './color-dot.js';
+import { cn } from './lib/utils.js';
+import { LumenSelector } from './lumen-selector.js';
+import { Input } from './ui/input.js';
+const CLEAR = '\u0000clear';
+export function EditCell({ label, value, options, unused = [], chip, note, colorOf, fixed = false, edited = false, onSave, }) {
+    const [open, setOpen] = useState(false);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    // A pick keeps the list open until the save lands, so a failure shows in it.
+    const picking = useRef(false);
+    const stop = (e) => e.stopPropagation();
+    const save = async (v) => {
+        if (saving)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            await onSave(v);
+            setOpen(false);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            picking.current = false;
+            setSaving(false);
+        }
+    };
+    const row = (o) => {
+        const c = colorOf?.(o);
+        return { value: o, label: o, ...(c ? { icon: colorIcon(c) } : {}) };
+    };
+    const groups = [
+        { label: 'In use', options: options.map(row) },
+        { label: 'Unused', options: unused.map(row) },
+        ...(value !== null
+            ? [
+                {
+                    label: '',
+                    options: [{ value: CLEAR, label: `Clear ${label.toLowerCase()}`, icon: XIcon }],
+                },
+            ]
+            : []),
+    ];
+    return (_jsxs("span", { className: edited ? 'inline-flex items-center gap-1' : 'contents', onClick: stop, onKeyDown: stop, children: [_jsx(LumenSelector, { trigger: value === null ? 'icon' : chip ? 'chip' : 'field', icon: value === null ? PlusIcon : undefined, size: "sm", label: value === null ? `Set ${label}` : `${label}: ${value}`, className: value === null
+                    ? '-ml-1 size-6 text-muted-foreground'
+                    : chip
+                        ? 'h-6 border-0 bg-secondary px-2 text-xs font-normal text-secondary-foreground dark:bg-secondary'
+                        : '-ml-1.5 h-6 border-0 bg-transparent px-1.5 font-normal text-sm dark:bg-transparent', groups: groups, value: value, empty: fixed ? 'No match.' : `Type a ${label.toLowerCase()} name.`, create: fixed ? undefined : (q) => q.trim() || null, createLabel: fixed ? undefined : (q) => `Set “${q.trim()}”`, open: open, onOpenChange: (o) => {
+                    if (!o && picking.current)
+                        return;
+                    setOpen(o);
+                    if (!o)
+                        setError(null);
+                }, onChange: (v) => {
+                    picking.current = true;
+                    void save(v === CLEAR ? null : v);
+                }, header: (note || error) && (_jsx("p", { role: error ? 'alert' : undefined, className: cn('border-b px-3 py-2 text-xs', error ? 'text-destructive' : 'text-muted-foreground'), children: error ?? note })) }), edited && (_jsx(PencilLineIcon, { "aria-label": "Edited by hand", className: "size-3 shrink-0 text-muted-foreground/70" }))] }));
+}
+/**
+ * A cell of several values (labels): each shows as a chip with its colour;
+ * a tap opens a picker that ticks any number and takes a typed name, and closing it saves them all
+ * at once. Clicks stay off the row, which opens its details.
+ */
+export function EditManyCell({ label, values, options, unused = [], note, colorOf, onSave, }) {
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState(values);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const stop = (e) => e.stopPropagation();
+    const start = () => {
+        setDraft(values);
+        setError(null);
+        setOpen(true);
+    };
+    const close = async () => {
+        const same = draft.length === values.length && draft.every((v) => values.includes(v));
+        if (same)
+            return setOpen(false);
+        setSaving(true);
+        try {
+            await onSave(draft);
+            setOpen(false);
+        }
+        catch (e) {
+            // The list stays open with why, so the picks are not lost.
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const row = (o) => {
+        const c = colorOf?.(o);
+        return { value: o, label: o, ...(c ? { icon: colorIcon(c) } : {}) };
+    };
+    const all = [...options, ...unused];
+    const picked = draft.filter((v) => !all.includes(v));
+    const groups = [
+        { label: 'In use', options: [...options, ...picked].map(row) },
+        { label: 'Unused', options: unused.map(row) },
+    ];
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", onClick: stop, onKeyDown: stop, children: [values.length > 0 && (_jsx("button", { type: "button", "aria-label": `${label}: ${values.join(', ')}`, className: "flex min-w-0 flex-wrap items-center gap-1 rounded text-left", onClick: start, children: values.map((v) => (_jsx(ColorChip, { color: colorOf?.(v), children: v }, v))) })), _jsx(LumenSelector, { multiple: true, trigger: "icon", icon: values.length ? PencilLineIcon : PlusIcon, size: "sm", label: values.length ? `Change ${label.toLowerCase()}` : `Add ${label.toLowerCase()}`, className: cn('size-6 text-muted-foreground', values.length
+                    ? 'opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100 max-md:opacity-100'
+                    : '-ml-1'), groups: groups, value: draft, disabled: saving, empty: `Type a ${label.toLowerCase()} name.`, create: (q) => q.trim() || null, createLabel: (q) => `Add “${q.trim()}”`, open: open, onOpenChange: (o) => {
+                    if (o)
+                        start();
+                    else
+                        void close();
+                }, onChange: setDraft, header: (note || error) && (_jsx("p", { role: error ? 'alert' : undefined, className: cn('border-b px-3 py-2 text-xs', error ? 'text-destructive' : 'text-muted-foreground'), children: error ?? note })) })] }));
+}
+/**
+ * A cell typed in place (Edits in place), as in a sheet: a click or tap turns
+ * the value into a box, Enter saves, Esc leaves it, Tab saves and moves to the next editable cell
+ * on the row, and so does clicking away. A cell the person typed carries a small ✎.
+ */
+export function EditInputCell({ label, value, type, edited = false, children, onSave, }) {
+    const [open, setOpen] = useState(false);
+    const [text, setText] = useState('');
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const box = useRef(null);
+    const stop = (e) => e.stopPropagation();
+    const start = () => {
+        setText(value === null ? '' : String(value));
+        setError(null);
+        setOpen(true);
+    };
+    useEffect(() => {
+        if (open)
+            box.current?.select();
+    }, [open]);
+    const save = async (then) => {
+        const next = text.trim() === '' ? null : text.trim();
+        const same = (next ?? '') === (value === null ? '' : String(value));
+        if (same || saving) {
+            setOpen(false);
+            if (then)
+                moveRight(box.current);
+            return;
+        }
+        setSaving(true);
+        try {
+            await onSave(next);
+            setOpen(false);
+            if (then)
+                moveRight(box.current);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+            box.current?.focus();
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    if (!open)
+        return (_jsxs("button", { type: "button", "data-edit-cell": true, "aria-label": `Edit ${label}`, className: cn('group/cell inline-flex min-h-6 min-w-8 cursor-text items-center gap-1 rounded px-1 -mx-1 text-left hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none', value === null && 'text-muted-foreground/60'), onClick: (e) => {
+                stop(e);
+                start();
+            }, onKeyDown: (e) => {
+                stop(e);
+                if (e.key === 'Enter' || e.key === 'F2')
+                    start();
+            }, children: [_jsx("span", { className: "min-w-0", children: value === null ? '—' : children }), edited && (_jsx(PencilLineIcon, { "aria-label": "Edited by hand", className: "size-3 shrink-0 text-muted-foreground/70" }))] }));
+    return (_jsx("span", { className: "contents", onClick: stop, onKeyDown: stop, children: _jsx(Input, { ref: box, "data-edit-cell": true, "aria-label": label, "aria-invalid": error ? true : undefined, title: error ?? undefined, inputMode: type === 'number' ? 'decimal' : 'text', value: text, disabled: saving, onChange: (e) => setText(e.target.value), onBlur: () => void save(), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    void save();
+                }
+                else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    setOpen(false);
+                }
+                else if (e.key === 'Tab') {
+                    e.preventDefault();
+                    void save('next');
+                }
+            }, className: cn('h-6 w-24 min-w-16 max-w-48 px-1.5 -mx-1 font-[inherit] text-sm', type === 'number' && 'num text-right', error && 'border-destructive') }) }));
+}
+/** Focuses the next editable cell after `from` on its row, else the first on the row below. */
+function moveRight(from) {
+    const row = from?.closest('tr');
+    if (!row)
+        return;
+    const cells = [...row.querySelectorAll('[data-edit-cell]')];
+    const i = cells.indexOf(from);
+    const next = cells[i + 1] ?? row.nextElementSibling?.querySelector('[data-edit-cell]');
+    // The box unmounts on save; its button takes its place on the next frame.
+    requestAnimationFrame(() => (next?.isConnected ? next : null)?.focus());
+}

package/dist/view-editor.d.ts

@@ -0,0 +1,52 @@
+import { type CustomViewConfig, type ViewTile, type ViewWidget } from '@columenlabs/lumen-ui-types/views';
+import { type LucideIcon } from 'lucide-react';
+import { type ReactNode } from 'react';
+import { type ConnectedDomain } from './connections.js';
+import { type FilterField, type FilterToken } from './lumen-filter.js';
+import { type ViewDomain } from './view-model.js';
+/** An app's own section in the dialog (an explorer view's columns). */
+export interface ViewEditorSection {
+    title: string;
+    icon: LucideIcon;
+    description?: string;
+    content: ReactNode;
+}
+export interface ViewEditDialogProps<T> {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    domain: ViewDomain<T>;
+    /** The view: its own table's layout, and the formulas every widget on it shares. */
+    config: CustomViewConfig;
+    /** The rows the page shows now (after its filters), for the previews. */
+    rows: T[];
+    /** The filter tokens on the page now, offered as the new defaults. */
+    current: FilterToken[];
+    /** Saves the view's own table (left out when `card` is edited). */
+    onSave?: (config: CustomViewConfig) => void;
+    /**
+     * Any other widget on the page (one editor for every widget): a second
+     * table, a number, a chart. Left out, the editor edits the view's own table.
+     */
+    card?: ViewWidget;
+    /** Saves `card` as edited (its type may have changed) with the view's formulas and links. */
+    onSaveCard?: (card: ViewWidget, view: Pick<CustomViewConfig, 'formulas' | 'connections' | 'frames'>) => void;
+    /** What each linked or linkable domain read (the app's `useJoins`), for Link in the tree. */
+    read?: Record<string, ConnectedDomain>;
+    /** The fields a widget's own filter reads. */
+    fields?: FilterField<T>[];
+    /** The view's own Summary cards, which a Summary without its own starts from. */
+    viewTiles?: ViewTile[];
+    viewId?: string;
+    editor?: ViewEditorSection;
+    onDuplicate?: () => void;
+    onDelete?: () => void;
+}
+/**
+ * Edit widget (one editor for every widget). The same two panes for every
+ * widget: on the left Widget (type, name, width, link colour), Fields (a table's columns, any other
+ * widget's slots), Settings (the type's own options), Rows, Formulas, Controls; on the right the
+ * field tree, which ticks a table's columns or fills a widget's slot. Picking another type swaps
+ * only Fields and Settings; a type tried and left comes back as it was. The view's own table stays
+ * a table.
+ */
+export declare function ViewEditDialog<T>({ open, onOpenChange, domain: joined, config, rows, current, onSave, card, onSaveCard, fields: filterFields, viewTiles, read, viewId, editor, onDuplicate, onDelete, }: ViewEditDialogProps<T>): import("react").JSX.Element;