@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/view-editor.js

@@ -0,0 +1,1081 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CATALOG, FRAME_LINK, catalogKeys, linkColumns, readableDomain, } from '@columenlabs/lumen-ui-types/catalog';
+import { CONNECTED_COUNT, VIEW_CARD_KIND_NAMES, WIDGET_STYLES, cardsOf, connectedKey, customViewConfigSchema, inferConnection, isOwnTile, isRowCard, isTableCard, mainTableOf, sourceConfigOf, tableConfigOf, tableLayoutOf, viewAggs, viewCardSchema, viewPageSizes, viewPaginationSchema, widgetStyleId, } from '@columenlabs/lumen-ui-types/views';
+// The Edit view dialog (mock 2b): two panes. Left, a tree of every field the
+// view's rows reach, grouped by where it comes from (Holding, Symbol by topic, Account, Formulas),
+// ticked to show. Right, what the view does with them: column order (drag), shape, group, filter,
+// sort, header tiles, then the view id, Duplicate and Delete. Name, icon, Cancel and Save sit in
+// the header. On a phone the panes are two tabs, Fields and Layout. Everything here is the view's
+// config, which agents write the same way through MCP custom_view_write.
+import { DndContext, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ArrowDownIcon, ArrowLeftIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, Columns3Icon, CopyIcon, DatabaseIcon, EllipsisIcon, FilterIcon, GripVerticalIcon, LayoutDashboardIcon, Link2Icon, MoveHorizontalIcon, PencilIcon, PlusIcon, ReplaceIcon, RotateCcwIcon, SearchIcon, ShapesIcon, ShrinkIcon, SigmaIcon, SlidersHorizontalIcon, SmileIcon, SparklesIcon, StarIcon, TableIcon, ToggleRightIcon, Trash2Icon, Unlink2Icon, XIcon, } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { AddFormulaDialog } from './add-column.js';
+import { useAssistant, useAssistantName } from './assistant-context.js';
+import { LumenConfirm } from './confirm.js';
+import { connectCandidates, connectionFields, connectionOn, linkGroupId, } from './connections.js';
+import { DrawerSection } from './drawer-section.js';
+import { SaveButton } from './form-issues.js';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { IconButton } from './icon-button.js';
+import { IconPicker } from './icon-picker.js';
+import { asOf, frameGroupId, rowsDomain, useDomainReads, useDraftFrames, useFrameChoices, } from './joins.js';
+import { cn } from './lib/utils.js';
+import { LumenTokenizedFilter, filterByTokens, tokenText, useLumenFilter, } from './lumen-filter.js';
+import { LinkPicker } from './lumen-links.js';
+import { LumenSelector } from './lumen-selector.js';
+import { lumenToast } from './lumen-toast.js';
+import { CARD_COLUMNS, CARD_TITLE_MAX, cardFilterFields, cardTitle, draftOf, useOffered, } from './lumen-widget.js';
+import { useApp } from './shell.js';
+import { summaryCardIssues } from './summary-cards.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Checkbox } from './ui/checkbox.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from './ui/dialog.js';
+import { Input } from './ui/input.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
+import { Label } from './ui/label.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+import { Separator } from './ui/separator.js';
+import { Switch } from './ui/switch.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs.js';
+import { Textarea } from './ui/textarea.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+import { AGG_LABELS, FORMAT_LABELS, FormatChip, FormulaForm, MAX_FORMULAS, fieldOptions, formatOptions, formulaIssueTarget, formulaIssues, formulaOptions, } from './view-formulas.js';
+import { VIEW_ICONS, lucideIconNames, shapeIcon, viewIcon } from './view-icons.js';
+import { FORMULAS_GROUP, canFilter, chipsOf, formulaBlanks, formulasOf, groupOf, hiddenOf, subgroupLabel, subgroupOf, subgroupsOf, summaryCash, takesFormulas, tilesOf, totalAggOf, withViewFields, } from './view-model.js';
+import { WidgetControlsEditor } from './widget-controls.js';
+import { PAGE_SOURCE, useWidgetDataOptions } from './widget-data.js';
+import { EditorRow as Row, WidgetFields, WidgetSettings, hasWidgetSettings, readsRows, slotKeys, widgetSlots, } from './widget-settings.js';
+import { widgetThumb } from './widget-thumbs.js';
+/** The field's own group and Total rows: a formula over the rolled-up inputs, or a share. */
+const OWN_TOTAL = '_own';
+/** The order: None, then the common roll-ups. */
+const TOTAL_AGGS = ['sum', 'mean', 'min', 'max', 'count', 'distinct', 'last', 'first'];
+const SHAPES = [
+    { value: 'table', label: 'Table' },
+    { value: 'group', label: 'Group' },
+    { value: 'pivot', label: 'Pivot' },
+];
+const NONE = '_none';
+/** The main data picker's value for the page's own rows. */
+const NO_FRAMES = [];
+/** A recipe's (a linked the assistant frame's) group id starts with this (`recipe:fr_…`). */
+const FRAME_PREFIX = frameGroupId('');
+/** A linked domain's group id starts with this (`link:holdings`). */
+const LINK_PREFIX = linkGroupId('');
+const CHIP_TEXT = 'text';
+/** The colour of fields with no group colour (formulas, a domain without groups). */
+const PLAIN = 'var(--color-muted-foreground)';
+/** What a type switch keeps of a widget: its place, size, colour and controls. */
+const KEPT = ['id', 'w', 'h', 'x', 'y', 'phone', 'link', 'controls'];
+/** `list` with `key` on or off; an empty list stands for `all`, kept in `order`. */
+const toggleIn = (list, all, key, on, order = all) => {
+    const base = list.length ? list : all;
+    const next = on ? [...base, key] : base.filter((k) => k !== key);
+    return order.filter((k) => next.includes(k));
+};
+/** A Summary card with a renamed formula key carried through its main number and lines. */
+const renameTile = (t, rename) => isOwnTile(t)
+    ? {
+        ...t,
+        field: rename(t.field),
+        lines: t.lines.map((l) => (l.kind === 'text' ? l : { ...l, field: rename(l.field) })),
+    }
+    : t;
+const sensorsOptions = { activationConstraint: { distance: 4 } };
+function useDrag() {
+    return useSensors(useSensor(PointerSensor, sensorsOptions), useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+}
+/** Moves `active` to `over` in `keys` after a drag; the same list when nothing moved. */
+const moved = (keys, e) => {
+    const from = keys.indexOf(String(e.active.id));
+    const to = e.over ? keys.indexOf(String(e.over.id)) : -1;
+    return from < 0 || to < 0 || from === to ? keys : arrayMove(keys, from, to);
+};
+/** A colour softened for a tree's guide line. */
+const guide = (color) => `color-mix(in oklab, ${color} 45%, transparent)`;
+/** The tree's groups: the domain's own, else one; then the view's formulas. */
+function groupsOf(domain) {
+    const own = domain.groups?.length ? domain.groups : [{ id: '', label: 'Fields' }];
+    return takesFormulas(domain)
+        ? [...own, { id: FORMULAS_GROUP, label: 'Formulas', color: PLAIN }]
+        : own;
+}
+const OPEN_AT_START = ['widget', 'fields'];
+/** The table layout a widget's editor starts from: its own, else the view's. */
+const tableDraftOf = (config, card) => tableConfigOf(config, isTableCard(card)
+    ? { ...card, table: card.table ?? tableLayoutOf(config) }
+    : viewCardSchema.parse({
+        ...Object.fromEntries(KEPT.filter((k) => card[k] !== undefined).map((k) => [k, card[k]])),
+        kind: 'table',
+        style: 'table',
+        title: card.title,
+        filter: [],
+        table: tableLayoutOf(config),
+    }));
+/**
+ * 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 function ViewEditDialog({ open, onOpenChange, domain: pageDomain, config, rows: pageRows, current, onSave, card, onSaveCard, fields: pageFields = [], viewTiles, read, viewId, editor, onDuplicate, onDelete, }) {
+    const isMobile = useIsMobile();
+    // A widget's main data (`source`): null is the page's rows, '' none yet (all cleared).
+    const [source, setSource] = useState(card?.source ?? null);
+    const start = () => card ? tableDraftOf(card.source ? sourceConfigOf(card, config.name) : config, card) : config;
+    const [draft, setDraft] = useState(start);
+    const srcIds = useMemo(() => (open && source ? [source] : NO_FRAMES), [open, source]);
+    const srcRead = useDomainReads(srcIds, srcIds);
+    const srcNow = source ? srcRead[source] : undefined;
+    const joined = (source === null ? pageDomain : (srcNow?.domain ?? rowsDomain(source || 'none', [], [])));
+    const rows = (source === null ? pageRows : (srcNow?.rows ?? []));
+    // Recipes: the assistant frames the draft attaches, their columns in the tree
+    // before Save.
+    const frameIds = draft.frames ?? NO_FRAMES;
+    const base = useDraftFrames(joined, frameIds);
+    const assistant = useAssistant();
+    const choices = useFrameChoices(open);
+    const app = useApp();
+    // The widget being edited when it is not a table of the rows; null while it is one.
+    const [widget, setWidget] = useState(() => card && !isTableCard(card) ? card : null);
+    // A widget's frame (place, width, colour, controls) and name, kept across type switches.
+    const [frame, setFrame] = useState(card ?? null);
+    const [title, setTitle] = useState(card?.title ?? '');
+    const [tokens, setTokens] = useState(card?.filter ?? []);
+    const [tab, setTab] = useState('view');
+    const [sections, setSections] = useState(new Set(OPEN_AT_START));
+    const [slotId, setSlotId] = useState(null);
+    // Each type's settings as last left here, so trying another and coming back restores them.
+    const tried = useRef(new Map());
+    // The formula open in the Formulas section.
+    const [editing, setEditing] = useState(null);
+    // The Add a formula column dialog, the same one the table header's + opens.
+    const [addingFormula, setAddingFormula] = useState(false);
+    // Each opening starts from the view as it is now (a column added from the
+    // header's + was missing). The parent opens the dialog through `open`, which never calls
+    // onOpenChange, so the reset runs when `open` turns true.
+    const [wasOpen, setWasOpen] = useState(open);
+    if (open !== wasOpen) {
+        setWasOpen(open);
+        if (open) {
+            setSource(card?.source ?? null);
+            setDraft(start());
+            setWidget(card && !isTableCard(card) ? card : null);
+            setFrame(card ?? null);
+            setTitle(card?.title ?? '');
+            setTokens(card?.filter ?? []);
+            tried.current.clear();
+            setEditing(null);
+            setTab('view');
+            setSlotId(null);
+            setSections(new Set(OPEN_AT_START));
+        }
+    }
+    // Linked domains (design, part 3): each link is one more group in the tree,
+    // and a domain this widget could link to shows below them as a dashed row with Link.
+    const unlinked = useMemo(() => {
+        const own = base.fields.filter((f) => !f.group?.startsWith(LINK_PREFIX));
+        const groups = (base.groups ?? []).filter((g) => !g.id.startsWith(LINK_PREFIX));
+        return { ...base, fields: own, groups: groups.length ? groups : [{ id: '', label: 'Fields' }] };
+    }, [base]);
+    const connections = draft.connections ?? [];
+    // The draft's links read here as well, so one added before Save shows its fields: a pending one has nothing to read until it is linked, but its fields name the pairs.
+    const connIdKey = connections.map((c) => c.to).join(',');
+    const connIds = useMemo(() => (open && connIdKey ? connIdKey.split(',') : NO_FRAMES), [open, connIdKey]);
+    const draftRead = useDomainReads(connIds, connIds);
+    const allRead = useMemo(() => ({ ...(read ?? {}), ...draftRead }), [read, draftRead]);
+    const linked = useMemo(() => connectionFields(unlinked, connections, allRead, new Set(unlinked.fields.map((f) => f.key))), [unlinked, connections, allRead]);
+    const withLinks = {
+        ...unlinked,
+        fields: [...unlinked.fields, ...linked.fields],
+        groups: [...unlinked.groups, ...linked.groups],
+    };
+    const offers = connectCandidates(base.id, draft).flatMap((to) => {
+        const other = allRead[to];
+        const on = other?.state === 'ok' ? connectionOn(unlinked, other.domain, undefined) : null;
+        return other && on ? [{ to, label: other.label, on }] : [];
+    });
+    // + Data's app group ("add any of the available data domains or recipes,
+    // but they don't get activated unless a link is defined"): every live catalog domain of this
+    // app; a shared key links it at once, else it waits Not linked for a field on each side.
+    const cardKeys = Object.keys(base.keys ?? {});
+    const deskDomains = Object.entries(CATALOG)
+        .filter(([id, d]) => d.desk === app?.id &&
+        d.status === 'live' &&
+        id !== base.id &&
+        !connections.some((c) => c.to === id))
+        .map(([id, d]) => ({
+        id,
+        label: d.label,
+        about: d.about,
+        on: offers.find((o) => o.to === id)?.on ?? inferConnection(cardKeys, catalogKeys(id)) ?? [],
+        by: catalogKeys(id).filter((k) => cardKeys.includes(k)),
+        ...(readableDomain(id) ? {} : { why: 'No function reads its rows yet' }),
+    }));
+    const link = (to, on) => setDraft({
+        ...draft,
+        connections: [...connections, { to, on }],
+        // A table shows the domain's usual columns once linked; any other widget picks from the tree.
+        columns: widget || !on.length
+            ? draft.columns
+            : [
+                ...shownKeys,
+                ...(linkColumns(to).length ? linkColumns(to) : [CONNECTED_COUNT]).map((k) => connectedKey(to, k)),
+            ],
+    });
+    const unlink = (to) => {
+        const gone = new Set(withLinks.fields.filter((f) => f.group === linkGroupId(to)).map((f) => f.key));
+        setDraft({
+            ...draft,
+            connections: connections.filter((c) => c.to !== to),
+            columns: draft.columns.filter((k) => !gone.has(k)),
+        });
+    };
+    // A link's field pairs, picked in its group of the tree.
+    const setPairs = (to, on) => setDraft({
+        ...draft,
+        connections: connections.map((c) => (c.to === to ? { ...c, on } : c)),
+    });
+    // + Data's recipes: every the assistant frame of the person's. One keyed like this card's rows attaches by
+    // its key (`frames`); any other links by field pairs (`frame:<id>`).
+    const byKey = (f) => !!f.key && !!base.keys?.[f.key];
+    const recipes = (choices.data ?? []).filter((f) => !frameIds.includes(f.id) && !connections.some((c) => c.to === `${FRAME_LINK}${f.id}`));
+    const addRecipe = (f) => (byKey(f) ? addFrame(f) : link(`${FRAME_LINK}${f.id}`, []));
+    const addFrame = (f) => setDraft({
+        ...draft,
+        frames: [...frameIds, f.id],
+        // A table shows the recipe's columns at once; any other widget picks from the tree.
+        columns: widget ? draft.columns : [...shownKeys, ...f.columns.map((c) => c.key)],
+    });
+    const removeFrame = (id) => {
+        const gone = new Set(withLinks.fields.filter((f) => f.group === frameGroupId(id)).map((f) => f.key));
+        setDraft({
+            ...draft,
+            frames: frameIds.filter((x) => x !== id),
+            columns: draft.columns.filter((k) => !gone.has(k)),
+        });
+    };
+    // New recipe: the person says what they want, the assistant writes it as a frame linked to this card. The
+    // message waits in the composer for them to send (never sent on the tap), so
+    // the edits so far are saved first.
+    const cardRef = card ?? mainTableOf(cardsOf(config));
+    const askRecipe = assistant?.ready && base.keys
+        ? (wish) => {
+            const by = Object.keys(base.keys ?? {}).join(' or ');
+            const title = name.trim() || styleLabel(styleId);
+            save();
+            assistant.draft(`Make a recipe for the "${title}" card: ${wish.trim()} Keep it as a frame keyed by ${by} and link it to this card.`, [
+                {
+                    kind: 'card',
+                    label: title,
+                    id: cardRef?.id ?? viewId ?? base.id,
+                    card: cardRef ? widgetStyleId(cardRef) : undefined,
+                    where: typeof document === 'undefined' ? undefined : document.title || undefined,
+                },
+            ]);
+        }
+        : undefined;
+    const domain = withViewFields(withLinks, draft);
+    // A widget's own filter reads the page's fields, or its own source's.
+    const filterFields = source === null ? pageFields : cardFilterFields(domain.fields);
+    const formulas = formulasOf(draft);
+    // Each formula's blank rows on the page's rows now, and why.
+    const formulaKey = JSON.stringify(formulas);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the formulas (by value) and rows decide it; domain is rebuilt each render.
+    const blanks = useMemo(() => formulaBlanks(domain, rows), [formulaKey, rows]);
+    const formulaProblems = formulaIssues(formulas, withLinks);
+    const allKeys = domain.fields.map((f) => f.key);
+    const shownKeys = draft.columns.length
+        ? draft.columns.filter((k) => allKeys.includes(k))
+        : allKeys;
+    const hiddenKeys = hiddenOf(draft).filter((k) => allKeys.includes(k) && !shownKeys.includes(k));
+    const section = (id) => ({
+        open: sections.has(id),
+        onOpenChange: (o) => {
+            const next = new Set(sections);
+            if (o)
+                next.add(id);
+            else
+                next.delete(id);
+            setSections(next);
+        },
+    });
+    // The frame the Widget section edits: the widget's own, or the view's table card.
+    const tableCard = mainTableOf(cardsOf(draft));
+    const shown = widget ?? frame ?? tableCard ?? null;
+    const setFramePart = (p) => {
+        if (widget)
+            setWidget({ ...widget, ...p });
+        if (frame)
+            setFrame({ ...frame, ...p });
+        if (!card && tableCard)
+            setDraft({
+                ...draft,
+                cards: cardsOf(draft).map((c) => (c === tableCard ? { ...c, ...p } : c)),
+            });
+    };
+    const offered = useOffered(domain);
+    const styleId = widget ? widgetStyleId(widget) : 'table:table';
+    const pickStyle = (id) => {
+        if (id === styleId)
+            return;
+        if (widget)
+            tried.current.set(styleId, widget);
+        if (id === 'table:table') {
+            setWidget(null);
+            return;
+        }
+        const keep = (w) => {
+            const from = widget ?? frame;
+            const kept = from
+                ? Object.fromEntries(KEPT.filter((k) => from[k] !== undefined).map((k) => [k, from[k]]))
+                : {};
+            return { ...w, ...kept };
+        };
+        const back = tried.current.get(id);
+        if (back)
+            return setWidget(keep(back));
+        const w = WIDGET_STYLES.find((x) => x.id === id);
+        if (!w)
+            return;
+        const fresh = draftOf(id, domain, []);
+        // Another style that keeps the same settings (a number and its progress bar, one trend and
+        // another) changes only its drawing; any other starts its fields afresh.
+        if (widget && Object.keys(fresh).every((k) => k in widget || k === 'target'))
+            return setWidget({ ...widget, kind: w.kind, style: w.style });
+        setWidget(keep(isRowCard(fresh) ? { ...fresh, tiles: viewTiles ?? [] } : fresh));
+        setSlotId(null);
+    };
+    const styleOptions = WIDGET_STYLES.filter((w) => offered(w.id)).map((w) => ({
+        value: w.id,
+        label: w.name,
+        group: VIEW_CARD_KIND_NAMES[w.kind],
+        description: w.note,
+        thumb: widgetThumb(w.id),
+    }));
+    // Main data (a widget only): change it, drop it (the next source moves
+    // up and links re-infer against it), make a linked one the main, or clear all. Each has Undo.
+    const keysOf = (id) => (id.startsWith(FRAME_LINK) ? [] : catalogKeys(id));
+    const labelOf = (id) => id.startsWith(FRAME_LINK)
+        ? ((choices.data ?? []).find((f) => `${FRAME_LINK}${f.id}` === id)?.name ?? 'Recipe')
+        : (allRead[id]?.label ?? CATALOG[id]?.label ?? id);
+    const pageLabel = `${config.name} (this page)`;
+    const mainLabel = source === null ? pageLabel : source ? (srcNow?.label ?? labelOf(source)) : '';
+    // Everything the widget joins besides its main data: its links, and recipes attached by key.
+    const others = () => [
+        ...connections.map((c) => c.to),
+        ...frameIds.map((id) => `${FRAME_LINK}${id}`),
+    ];
+    const relink = (main, ids) => ids
+        .filter((x) => x !== main)
+        .slice(0, 4)
+        .map((to) => ({ to, on: inferConnection(keysOf(main), keysOf(to)) ?? [] }));
+    const rebuild = useRef(false);
+    const changeMain = (next, conns, message) => {
+        if (!card)
+            return;
+        const before = { source, draft, widget, tokens };
+        setSource(next);
+        setDraft(next === null
+            ? tableDraftOf(config, card)
+            : {
+                ...customViewConfigSchema.parse({ connections: conns }),
+                name: draft.name,
+                cards: draft.cards,
+            });
+        setTokens([]);
+        rebuild.current = true;
+        lumenToast.undo(message, () => {
+            setSource(before.source);
+            setDraft(before.draft);
+            setWidget(before.widget);
+            setTokens(before.tokens);
+        });
+    };
+    const dropMain = () => {
+        const rest = others();
+        const next = rest[0];
+        if (next)
+            changeMain(next, relink(next, rest), `${mainLabel} dropped. ${labelOf(next)} is the main data now.`);
+        else
+            changeMain('', [], `${mainLabel} dropped.`);
+    };
+    const makeMain = (to) => {
+        const old = source ?? (readableDomain(pageDomain.id) ? pageDomain.id : null);
+        const rest = [...others().filter((x) => x !== to), ...(old ? [old] : [])];
+        changeMain(to, relink(to, rest), `${labelOf(to)} is the main data now.`);
+    };
+    const pickMain = (to) => to === PAGE_SOURCE
+        ? changeMain(null, [], `${pageLabel} is the main data now.`)
+        : changeMain(to, relink(to, others()), `${labelOf(to)} is the main data now.`);
+    const clearAll = () => changeMain('', [], 'All data cleared.');
+    const dropLink = (to) => {
+        const before = draft;
+        unlink(to);
+        lumenToast.undo(`${labelOf(to)} dropped.`, () => setDraft(before));
+    };
+    const dropRecipe = (id) => {
+        const before = draft;
+        removeFrame(id);
+        lumenToast.undo(`${labelOf(`${FRAME_LINK}${id}`)} dropped.`, () => setDraft(before));
+    };
+    // The main data picker: this page's rows, the app's live domains, the person's recipes.
+    const dataOptions = useWidgetDataOptions(open && !!card, pageLabel);
+    const mainOptions = card ? dataOptions.filter((o) => o.value !== (source ?? PAGE_SOURCE)) : [];
+    // A new main data's fields: a widget whose fields it lacks starts afresh once its fields load.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: runs when the new main data's fields arrive.
+    useEffect(() => {
+        if (!rebuild.current)
+            return;
+        if (source && srcNow?.state !== 'ok')
+            return;
+        rebuild.current = false;
+        if (!widget)
+            return;
+        const keys = new Set(domain.fields.map((f) => f.key));
+        const fits = widgetSlots(widget, domain).every((sl) => sl.keys.every((k) => keys.has(k)));
+        if (fits)
+            return;
+        const kept = Object.fromEntries(KEPT.filter((k) => widget[k] !== undefined).map((k) => [k, widget[k]]));
+        // A shape the new data cannot fill (a number with no number field) stays as it is, and Save
+        // says which field is missing.
+        try {
+            setWidget({ ...draftOf(styleId, domain, []), ...kept });
+        }
+        catch { }
+    }, [source, srcNow?.state, domain.fields.length]);
+    // A widget's rows: the view's, narrowed by its own filter, with or without cash.
+    const widgetRows = tokens.length ? filterByTokens(rows, filterFields, tokens, domain.text) : rows;
+    const cashRows = widget && isRowCard(widget) && domain.cash && !summaryCash(widget, tokens.length > 0)
+        ? widgetRows.filter((r) => !domain.cash?.(r))
+        : widgetRows;
+    // The slot the tree fills: a table's columns, else the picked one of the widget's.
+    const slots = widget ? widgetSlots(widget, domain) : [];
+    const slot = slots.find((s) => s.id === slotId) ?? slots[0];
+    const setShown = (key, on) => setDraft({
+        ...draft,
+        columns: on ? [...shownKeys, key] : shownKeys.filter((k) => k !== key),
+        hidden: hiddenOf(draft).filter((k) => k !== key),
+    });
+    const pick = widget
+        ? slot && {
+            on: (k) => slot.keys.includes(k),
+            set: (k, on) => setWidget(slot.set(slotKeys(slot, k, on))),
+            why: (f) => (slot.accepts(f) ? null : slot.why),
+        }
+        : { on: (k) => shownKeys.includes(k), set: setShown, why: () => null };
+    // A widget on its own data keeps it and its links on the card; the page's stay as they were.
+    const sourcePart = source
+        ? { source, connections: draft.connections ?? [] }
+        : { source: undefined, connections: undefined };
+    const viewPart = (next) => source !== null
+        ? {
+            formulas: config.formulas,
+            connections: config.connections,
+            ...(config.frames ? { frames: config.frames } : {}),
+        }
+        : {
+            formulas: next.formulas,
+            connections: next.connections,
+            ...(next.frames ? { frames: next.frames } : {}),
+        };
+    const parsed = widget
+        ? viewCardSchema.safeParse({
+            ...widget,
+            ...sourcePart,
+            title: title.trim() || null,
+            // A widget's own filter is its own: it never shares with the colour group.
+            filter: readsRows(widget) ? tokens.map(({ link: _, ...t }) => t) : [],
+        })
+        : null;
+    const cardProblems = widget && isRowCard(widget)
+        ? summaryCardIssues(widget.tiles ?? [], domain.fields.map((f) => f.key), (domain.tiles ?? []).map((w) => w.key))
+        : [];
+    // What stops Save, each with the field it is about (form-issues.tsx).
+    const open_ = (id) => {
+        setTab('view');
+        setSections((s) => new Set(s).add(id));
+    };
+    const issues = [
+        ...(source === ''
+            ? [
+                {
+                    where: 'Data',
+                    message: 'Pick the main data',
+                    target: 'view-editor-main-data',
+                    reveal: () => setTab('fields'),
+                },
+            ]
+            : []),
+        ...(!card && !draft.name.trim()
+            ? [
+                {
+                    where: 'Name',
+                    message: 'Give it a name',
+                    target: 'view-editor-name',
+                    reveal: () => open_('widget'),
+                },
+            ]
+            : []),
+        ...formulas.flatMap((f, fi) => {
+            const message = formulaProblems[fi];
+            if (!message)
+                return [];
+            return [
+                {
+                    where: `Formula ${f.label || f.key}`,
+                    message,
+                    target: formulaIssueTarget(f.key, message),
+                    reveal: () => edit(f.key),
+                },
+            ];
+        }),
+        ...cardProblems.flatMap((message, j) => message
+            ? [
+                {
+                    where: `Summary card ${j + 1}`,
+                    message,
+                    target: `summary-card-${j}`,
+                    reveal: () => open_('settings'),
+                },
+            ]
+            : []),
+        ...(parsed && !parsed.success
+            ? parsed.error.issues.slice(0, 3).map((i) => ({
+                where: i.path.join('.') || 'Widget',
+                message: i.message,
+                target: 'view-editor-check',
+            }))
+            : []),
+    ];
+    const edit = (key) => {
+        setEditing(key);
+        if (key) {
+            setSections(new Set(sections).add('formulas'));
+            setTab('view');
+        }
+    };
+    const addFormula = formulas.length < MAX_FORMULAS ? () => setAddingFormula(true) : undefined;
+    const removeFormula = (key) => {
+        if (editing === key)
+            setEditing(null);
+        setDraft({
+            ...draft,
+            formulas: formulas.filter((f) => f.key !== key),
+            columns: draft.columns.filter((k) => k !== key),
+        });
+    };
+    const tableConfig = () => {
+        const keys = new Set(domain.fields.map((f) => f.key));
+        // A removed field leaves its chip and sort too.
+        return {
+            ...draft,
+            name: draft.name.trim(),
+            columns: draft.columns.filter((k) => keys.has(k)),
+            hidden: hiddenOf(draft).filter((k) => keys.has(k) && !shownKeys.includes(k)),
+            chips: chipsOf(draft).filter((c) => keys.has(c.key)),
+            sort: draft.sort && keys.has(draft.sort.key) ? draft.sort : null,
+        };
+    };
+    const save = () => {
+        if (!card) {
+            onSave?.(tableConfig());
+            onOpenChange(false);
+            return;
+        }
+        if (parsed) {
+            if (parsed.success)
+                onSaveCard?.(parsed.data, viewPart(draft));
+        }
+        else if (frame) {
+            // A table of its own: the frame, its name and its layout.
+            const next = tableConfig();
+            const own = mainTableOf(cardsOf(next));
+            onSaveCard?.(viewCardSchema.parse({
+                ...Object.fromEntries(KEPT.filter((k) => frame[k] !== undefined).map((k) => [k, frame[k]])),
+                ...(own?.controls ? { controls: own.controls } : {}),
+                ...sourcePart,
+                kind: 'table',
+                style: 'table',
+                title: title.trim() || null,
+                filter: [],
+                table: tableLayoutOf(next),
+            }), viewPart(next));
+        }
+        onOpenChange(false);
+    };
+    const tree = pick ? (_jsx(FieldTree, { domain: domain, draft: draft, picked: pick.on, onPick: pick.set, why: pick.why, formulaProblems: formulaProblems, onEditFormula: edit, onRemoveFormula: removeFormula, onAddFormula: addFormula, deskDomains: deskDomains, onLink: link, onUnlink: card ? dropLink : unlink, main: card
+            ? {
+                label: mainLabel,
+                empty: source === '',
+                options: mainOptions,
+                onPick: pickMain,
+                onDrop: dropMain,
+                onClear: clearAll,
+                onMakeMain: makeMain,
+            }
+            : undefined, linkPairs: {
+            cardFields: unlinked.fields.filter((f) => f.group !== FORMULAS_GROUP),
+            fieldsOf: (to) => allRead[to]?.domain.fields ?? [],
+            onOf: (to) => connections.find((c) => c.to === to)?.on ?? [],
+            set: setPairs,
+        }, deskLabel: app?.label ?? null, recipes: recipes, recipeNote: choices.isError ? `Recipes did not load: ${choices.error.message}` : null, onAddRecipe: addRecipe, recipeByKey: byKey, onRemoveRecipe: card ? dropRecipe : removeFrame, onNewRecipe: askRecipe })) : (_jsx("p", { className: "px-1.5 text-sm text-muted-foreground", children: widget?.kind === 'chart' && (widget.style === 'price' || widget.style === 'market')
+            ? 'This chart reads its symbols, not fields.'
+            : 'This widget takes no fields.' }));
+    const treeHint = widget ? (slot && (_jsxs("div", { className: "flex flex-col gap-2 px-1.5 pb-2", children: [slots.length > 1 && (_jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, className: "justify-self-start", "aria-label": "Fill", value: slot.id, onValueChange: (v) => v && setSlotId(v), children: slots.map((s) => (_jsx(ToggleGroupItem, { value: s.id, className: "px-2.5", children: s.label }, s.id))) })), _jsx("p", { className: "text-xs text-muted-foreground", children: slot.max === 1
+                    ? `Tick a field to use it as ${slot.label}.`
+                    : `Tick fields to add them to ${slot.label}, up to ${slot.max}.` })] }))) : (_jsx("p", { className: "px-1.5 pb-2 text-xs text-muted-foreground", children: "Tick a field to add it as a column." }));
+    // More shows only what this view offers, and not at all when it offers nothing (an app view
+    // or a page's shared layout).
+    const more = [viewId && 'view id', onDuplicate && 'duplicate', onDelete && 'delete'].filter((x) => !!x);
+    const name = card ? title : draft.name;
+    const main = (_jsxs("div", { className: "flex flex-col", children: [_jsx(DrawerSection, { icon: ShapesIcon, title: "Widget", hint: styleLabel(styleId), ...section('widget'), children: _jsx(WidgetSection, { styleId: styleId, options: styleOptions, onStyle: card ? pickStyle : undefined, name: name, placeholder: card ? cardTitle({ ...(widget ?? frame ?? card), title: null }, config.name) : '', onName: (n) => (card ? setTitle(n) : setDraft({ ...draft, name: n })), icon: card ? undefined : _jsx(ViewIconPicker, { draft: draft, setDraft: setDraft }), frame: shown, onFrame: setFramePart }) }), widget ? (_jsx(DrawerSection, { icon: Columns3Icon, title: "Fields", hint: slots.map((s) => s.label).join(', ') || undefined, ...section('fields'), children: _jsx(WidgetFields, { card: widget, set: setWidget, domain: domain, rows: cashRows, fields: filterFields }, styleId) })) : (_jsx(DrawerSection, { icon: Columns3Icon, title: "Fields", count: shownKeys.length + hiddenKeys.length, hint: hiddenKeys.length
+                    ? `columns · ${shownKeys.length} shown · drag to reorder`
+                    : 'columns · drag to reorder', ...section('fields'), children: _jsx(ColumnList, { base: base, domain: domain, draft: draft, setDraft: setDraft, shownKeys: shownKeys, hiddenKeys: hiddenKeys, onEditFormula: edit }) })), widget ? (hasWidgetSettings(widget) && (_jsx(DrawerSection, { icon: SlidersHorizontalIcon, title: "Settings", ...section('settings'), children: _jsx(WidgetSettings, { card: widget, set: setWidget, domain: domain }) }))) : (_jsx(DrawerSection, { icon: SlidersHorizontalIcon, title: "Settings", hint: "shape, sort, pages", ...section('settings'), children: _jsx(DetailsSection, { domain: domain, draft: draft, setDraft: setDraft, shownKeys: shownKeys }) })), (widget ? readsRows(widget) : !card) && (_jsx(DrawerSection, { icon: FilterIcon, title: "Rows", hint: widget ? 'which rows it counts' : 'the filters it opens with', ...section('rows'), children: widget ? (_jsx(WidgetRows, { rows: rows, fields: filterFields, tokens: tokens, onChange: setTokens, cash: isRowCard(widget) && domain.cash
+                        ? {
+                            on: summaryCash(widget, tokens.length > 0),
+                            set: (on) => setWidget({ ...widget, cash: on }),
+                        }
+                        : undefined })) : (_jsx(OpensWith, { draft: draft, setDraft: setDraft, current: current })) })), takesFormulas(domain) && (_jsx(DrawerSection, { icon: SigmaIcon, title: "Formulas", count: formulas.length, hint: "columns you compute", ...section('formulas'), children: _jsx(FormulasSection, { base: withLinks, draft: draft, setDraft: setDraft, formulaProblems: formulaProblems, blanks: blanks, editing: editing, setEditing: setEditing, onAdd: addFormula }) })), shown && (_jsx(DrawerSection, { icon: ToggleRightIcon, title: "Controls", hint: "what the widget's frame shows", ...section('controls'), children: _jsx(WidgetControlsEditor, { kind: widget?.kind ?? 'table', style: widget?.style ?? 'table', controls: shown.controls, onChange: (controls) => setFramePart({ controls }) }, styleId) })), editor && !widget && (_jsxs(DrawerSection, { icon: editor.icon, title: editor.title, ...section('desk'), children: [editor.description && (_jsx("p", { className: "mb-3 text-sm text-muted-foreground", children: editor.description })), editor.content] })), more.length > 0 && !card && (_jsx(DrawerSection, { icon: EllipsisIcon, title: "More", hint: more.join(', '), ...section('more'), children: _jsx(MoreSection, { name: config.name, viewId: viewId, onDuplicate: onDuplicate &&
+                        (() => {
+                            onOpenChange(false);
+                            onDuplicate();
+                        }), onDelete: onDelete &&
+                        (() => {
+                            onOpenChange(false);
+                            onDelete();
+                        }) }) })), parsed && !parsed.success && (_jsxs("p", { id: "view-editor-check", tabIndex: -1, className: "px-3 text-xs text-destructive", children: [parsed.error.issues[0]?.path.join('.'), ": ", parsed.error.issues[0]?.message] }))] }));
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [_jsxs(DialogContent, { "data-slot": "view-editor", showCloseButton: false, className: "flex h-[min(780px,calc(100svh-2rem))] flex-col gap-0 overflow-hidden p-0 max-md:h-svh max-md:max-w-full max-md:rounded-none max-md:ring-0 sm:max-w-6xl", children: [_jsx(DialogDescription, { className: "sr-only", children: "This widget's type, fields, settings, rows and controls, and the fields it can use." }), _jsxs("header", { className: "flex shrink-0 items-center gap-2 border-b px-3 py-2 md:px-4", children: [isMobile && (_jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) })), _jsxs(DialogTitle, { className: "min-w-0 truncate text-sm font-semibold", children: ["Edit widget", ' ', _jsxs("span", { className: "font-normal text-muted-foreground", children: ["\u00B7 ", name.trim() || styleLabel(styleId)] })] }), _jsx("span", { className: "flex-1" }), !isMobile && (_jsx(DialogClose, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(XIcon, {}), "Cancel"] }) })), _jsx(SaveButton, { issues: issues, onSave: save })] }), isMobile ? (_jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), className: "min-h-0 flex-1 gap-0 pt-2", children: [_jsxs(TabsList, { className: "mx-3 w-[calc(100%-1.5rem)]", children: [_jsxs(TabsTrigger, { value: "view", children: [_jsx(LayoutDashboardIcon, {}), "Widget"] }), _jsxs(TabsTrigger, { value: "fields", children: [_jsx(DatabaseIcon, {}), "Data"] })] }), _jsx(TabsContent, { value: "view", className: "min-h-0 overflow-y-auto px-2 py-2 pb-[max(0.75rem,env(safe-area-inset-bottom))]", children: main }), _jsxs(TabsContent, { value: "fields", className: "min-h-0 overflow-y-auto px-3 py-2", children: [treeHint, tree] })] })) : (_jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_360px]", children: [_jsx("section", { "aria-label": "Widget", className: "min-h-0 overflow-y-auto px-3 py-2", children: main }), _jsxs("aside", { "aria-label": "Data", className: "flex min-h-0 flex-col overflow-y-auto border-l bg-sidebar px-2 py-2", children: [treeHint, tree, _jsxs("p", { className: "mt-auto px-2 pt-4 text-xs text-muted-foreground", children: ["Agents change the same settings with", ' ', _jsx("code", { className: "font-mono", children: card ? 'custom_view_widget_write' : 'custom_view_write' }), "."] })] })] }))] }), _jsx(AddFormulaDialog, { open: addingFormula, onOpenChange: setAddingFormula, domain: withLinks, formulas: formulas, onAdd: (f) => {
+                    setAddingFormula(false);
+                    setDraft({
+                        ...draft,
+                        formulas: [...formulas, f],
+                        columns: widget ? draft.columns : [...shownKeys, f.key],
+                    });
+                } })] }));
+}
+const styleLabel = (id) => WIDGET_STYLES.find((w) => w.id === id)?.name ?? 'Table';
+/** Widget: its type, name, width and link colour, the same for every widget. */
+function WidgetSection({ styleId, options, onStyle, name, placeholder, onName, icon, frame, onFrame, }) {
+    const picker = (_jsx(LumenSelector, { label: "Widget type", size: "sm", className: "w-full min-w-0", options: options, value: styleId, onChange: (id) => onStyle?.(id), disabled: !onStyle }));
+    return (_jsxs("div", { className: "flex max-w-xl flex-col gap-3", children: [_jsx(Row, { label: "Type", children: onStyle ? (picker) : (_jsx(WhyOff, { note: "The view's own table stays a table", children: _jsx("span", { className: "w-full", children: picker }) })) }), _jsx(Row, { label: "Name", children: _jsxs(InputGroup, { children: [icon && _jsx(InputGroupAddon, { children: icon }), _jsx(InputGroupInput, { id: "view-editor-name", "aria-label": "Name", value: name, maxLength: icon ? undefined : CARD_TITLE_MAX, placeholder: placeholder, onChange: (e) => onName(e.target.value) })] }) }), frame && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Width", children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, className: "justify-self-start", value: String(frame.w), onValueChange: (v) => v && onFrame({ w: Number(v) }), "aria-label": "Width in columns", children: CARD_COLUMNS.map((w) => (_jsx(ToggleGroupItem, { value: String(w), "aria-label": `${w} of 6 columns`, className: "px-2.5", children: w }, w))) }) }), _jsx(Row, { label: "Link", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2 text-sm text-muted-foreground", children: [_jsx(LinkPicker, { color: frame.link ?? null, label: name || placeholder, onPick: (c) => onFrame({ link: c ?? undefined }) }), _jsx("span", { className: "min-w-0 truncate", children: frame.link ? 'Shares chips and tapped rows with its colour' : 'Not linked' })] }) })] }))] }));
+}
+/** Rows: the widget's own filter and, where the domain has cash rows, whether it counts them. */
+function WidgetRows({ rows, fields, tokens, onChange, cash, }) {
+    const filter = useLumenFilter(rows, fields, { initial: tokens });
+    const next = JSON.stringify(filter.tokens);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reports the box's tokens when they change
+    useEffect(() => {
+        if (next !== JSON.stringify(tokens))
+            onChange(filter.tokens);
+    }, [next]);
+    return (_jsxs("div", { className: "flex max-w-xl flex-col gap-3", children: [_jsx(Row, { label: "Only where", children: _jsx(LumenTokenizedFilter, { filter: filter, label: "Widget filter", placeholder: "All of the view's rows", link: null }) }), cash && (_jsx(Row, { label: "Cash", children: _jsxs(ToggleGroup, { type: "single", size: "sm", variant: "outline", spacing: 0, className: "justify-self-start", value: cash.on ? 'in' : 'out', onValueChange: (v) => v && cash.set(v === 'in'), "aria-label": "Cash", children: [_jsx(ToggleGroupItem, { value: "in", className: "px-2.5", children: "Include cash" }), _jsx(ToggleGroupItem, { value: "out", className: "px-2.5", children: "Leave out" })] }) }))] }));
+}
+/** Rows of the view's own table: the filters it opens with. */
+function OpensWith({ draft, setDraft, current, }) {
+    return (_jsx(Row, { label: "Opens with", children: _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [draft.filters.default.map((t, i) => (_jsxs(Badge, { variant: "secondary", className: "gap-1 pr-0.5 font-normal", children: [tokenText(t), _jsx(IconButton, { icon: XIcon, size: "icon-xs", className: "size-5 rounded-full", label: `Remove filter ${tokenText(t)}`, onClick: () => setDraft({
+                                ...draft,
+                                filters: {
+                                    ...draft.filters,
+                                    default: draft.filters.default.filter((_, j) => j !== i),
+                                },
+                            }) })] }, tokenText(t)))), !draft.filters.default.length && (_jsx("span", { className: "text-sm text-muted-foreground", children: "No filters" })), _jsx(IconButton, { icon: FilterIcon, size: "icon-xs", label: "Use the page's filters", className: "text-muted-foreground", onClick: () => setDraft({ ...draft, filters: { ...draft.filters, default: current } }) })] }) }));
+}
+const MAX_PAIRS = 3;
+/**
+ * A link's field pairs: up to 3, this card's field = the source's, each
+ * picked with LumenSelector. With none the link reads nothing; a shared key was filled in on add.
+ */
+function LinkPairs({ label, on, cardFields, fields, onChange, }) {
+    // The pair being picked: shown at once while there is none.
+    const [part, setPart] = useState(null);
+    const open = part ?? (on.length ? null : { from: '', to: '' });
+    const opts = (list) => list.map((f) => ({ value: f.key, label: f.label, ...(f.icon ? { icon: f.icon } : {}) }));
+    const mine = opts(cardFields);
+    const theirs = opts(fields);
+    const put = (p, i) => {
+        if (!p.from || !p.to)
+            return setPart(p);
+        setPart(null);
+        onChange(i === null ? [...on, p] : on.map((x, j) => (j === i ? p : x)));
+    };
+    const row = (p, i) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(LumenSelector, { label: "This card's field", size: "sm", className: "min-w-0 flex-1", placeholder: "This card", search: true, value: p.from || null, options: mine, onChange: (v) => put({ ...p, from: v }, i) }), _jsx("span", { className: "text-xs text-muted-foreground", children: "=" }), _jsx(LumenSelector, { label: `${label}'s field`, size: "sm", className: "min-w-0 flex-1", placeholder: theirs.length ? label : 'Loading…', search: true, disabled: !theirs.length, value: p.to || null, options: theirs, onChange: (v) => put({ ...p, to: v }, i) }), i !== null && (_jsx(IconButton, { icon: XIcon, size: "icon-xs", label: "Remove this pair", onClick: () => onChange(on.filter((_, j) => j !== i)) }))] }, i ?? 'new'));
+    return (_jsxs("div", { className: "flex flex-col gap-1 px-1 py-1", children: [on.map((p, i) => row(p, i)), open && row(open, null), !open && on.length < MAX_PAIRS && (_jsxs(Button, { size: "xs", variant: "ghost", className: "self-start text-primary", onClick: () => setPart({ from: '', to: '' }), children: [_jsx(PlusIcon, {}), "Field pair"] }))] }));
+}
+function FieldTree({ domain, draft, picked, onPick, why, formulaProblems, onEditFormula, onRemoveFormula, onAddFormula, deskDomains = [], onLink, onUnlink, deskLabel, recipes = [], recipeNote, onAddRecipe, recipeByKey = () => false, onRemoveRecipe, onNewRecipe, linkPairs, main, }) {
+    const assistantName = useAssistantName();
+    const [query, setQuery] = useState('');
+    // New recipe's box, open while not null.
+    const [wish, setWish] = useState(null);
+    // + Data: the
+    // app's domains this card can link, the person's recipes, and New recipe.
+    const dataGroup = `${deskLabel ?? 'This desk'} data`;
+    const dataOptions = [
+        ...(onLink
+            ? deskDomains.map((d) => ({
+                value: `link:${d.id}`,
+                label: d.label,
+                group: dataGroup,
+                detail: (d.on ? d.on.map((p) => p.from) : d.by).length
+                    ? `by ${(d.on ? d.on.map((p) => p.from) : d.by).map(fieldName).join(' + ')}`
+                    : d.about,
+                icon: Link2Icon,
+                keywords: [d.about],
+                ...(d.why ? { disabled: d.why } : {}),
+            }))
+            : []),
+        ...(onAddRecipe
+            ? recipes.map((f) => ({
+                value: `frame:${f.id}`,
+                label: f.name,
+                group: 'Recipes',
+                detail: `${recipeByKey(f) && f.key ? `by ${fieldName(f.key)}` : 'link by fields'} · ${asOf(f.at)}`,
+                icon: SparklesIcon,
+                keywords: f.columns.map((c) => c.label),
+                ...(f.used && recipeByKey(f)
+                    ? { disabled: `Already enriches ${f.used}: a recipe joins one card` }
+                    : {}),
+            }))
+            : []),
+        ...(onNewRecipe
+            ? [
+                {
+                    value: 'new',
+                    label: 'New recipe',
+                    group: 'Recipes',
+                    description: `Say what you want; ${assistantName} writes it`,
+                    icon: PlusIcon,
+                },
+            ]
+            : []),
+    ];
+    const addData = (v) => {
+        if (v === 'new')
+            setWish('');
+        else if (v.startsWith('link:')) {
+            const d = deskDomains.find((x) => `link:${x.id}` === v);
+            if (d && !d.why)
+                onLink?.(d.id, d.on ?? []);
+        }
+        else if (v.startsWith('frame:')) {
+            const f = recipes.find((x) => `frame:${x.id}` === v);
+            if (f)
+                onAddRecipe?.(f);
+        }
+    };
+    const q = query.trim().toLowerCase();
+    // Open groups and topics; a group or topic starts open when it has a shown field.
+    const [toggled, setToggled] = useState(new Map());
+    const formulas = formulasOf(draft);
+    const match = (f) => !q ||
+        f.label.toLowerCase().includes(q) ||
+        f.key.includes(q) ||
+        !!f.topic?.toLowerCase().includes(q);
+    const isOpen = (id, fields) => !!q || (toggled.get(id) ?? fields.some((f) => picked(f.key)));
+    const flip = (id, now) => setToggled(new Map(toggled).set(id, !now));
+    const leaf = (f) => {
+        const fi = formulas.findIndex((x) => x.key === f.key);
+        const off = why(f);
+        const box = (_jsx(Checkbox, { checked: picked(f.key), disabled: !!off, onCheckedChange: (v) => onPick(f.key, v === true), "aria-label": `Use ${f.label}` }));
+        return (_jsxs("div", { className: cn('flex min-h-7 items-center gap-2 rounded-md px-1 hover:bg-accent/60', off && 'text-muted-foreground'), children: [_jsxs(Label, { className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 py-1 text-[0.8125rem] font-normal", children: [off ? _jsx(WhyOff, { note: off, children: box }) : box, _jsx("span", { className: "truncate", children: f.label }), f.note && (_jsx(Badge, { variant: "secondary", className: "font-normal", children: f.note })), fi >= 0 && formulaProblems[fi] && (_jsx(Badge, { variant: "destructive", className: "font-normal", children: "fix" }))] }), _jsx("span", { className: "flex w-8 shrink-0 justify-end", children: _jsx(FormatChip, { format: f.format, icon: f.icon }) }), _jsx("code", { className: "w-28 shrink-0 truncate font-mono text-[0.7rem] text-muted-foreground max-md:hidden", title: f.formula ?? f.key, children: fi >= 0 ? formulas[fi]?.expr || 'no expression yet' : f.key }), fi >= 0 && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: PencilIcon, size: "icon-xs", label: `Edit formula ${f.label}`, onClick: () => onEditFormula(f.key) }), _jsx(LumenConfirm, { title: `Remove ${f.label}?`, description: "The formula and its column leave this view when you save.", action: "Remove", onConfirm: () => onRemoveFormula(f.key), children: _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Remove formula ${f.label}` }) })] }))] }, f.key));
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-px", "data-testid": "view-fields", children: [_jsxs("div", { className: cn('mb-1 flex items-center gap-1.5', main?.empty && 'hidden'), children: [_jsxs(InputGroup, { className: "min-w-0 flex-1 bg-background", children: [_jsx(InputGroupAddon, { children: _jsx(SearchIcon, {}) }), _jsx(InputGroupInput, { type: "search", className: "[&::-webkit-search-cancel-button]:hidden", "aria-label": "Search fields", placeholder: `Search ${domain.fields.length} fields`, value: query, onChange: (e) => setQuery(e.target.value) }), query && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": "Clear search", onClick: () => setQuery(''), children: _jsx(XIcon, {}) }) }))] }), dataOptions.length > 0 && !main?.empty && (_jsx(LumenSelector, { trigger: "chip", icon: PlusIcon, placeholder: "Data", label: "Add data", align: "end", search: true, value: null, options: dataOptions, empty: "Nothing else to add", onChange: addData })), main && !main.empty && (_jsx(LumenConfirm, { title: "Clear all data?", description: "Every source leaves this widget. Pick its main data again, or Undo.", action: "Clear all", onConfirm: main.onClear, children: _jsx(IconButton, { icon: Trash2Icon, size: "icon-xs", label: "Clear all data" }) }))] }), recipeNote && _jsx("p", { className: "px-1.5 pb-1 text-xs text-destructive", children: recipeNote }), wish !== null && onNewRecipe && (_jsxs("div", { className: "mb-1 flex flex-col gap-1.5 rounded-md border bg-background p-2", children: [_jsx(Label, { htmlFor: "new-recipe", className: "text-xs font-medium", children: "New recipe" }), _jsx(Textarea, { id: "new-recipe", autoFocus: true, rows: 2, value: wish, placeholder: "How far each symbol is off its 52-week high", onChange: (e) => setWish(e.target.value), className: "min-h-14 text-sm" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Saves this widget, then opens ", assistantName, " with your words to send. Its columns join here by ", Object.keys(domain.keys ?? {}).join(' or '), "."] }), _jsxs("div", { className: "flex justify-end gap-1.5", children: [_jsx(Button, { size: "xs", variant: "ghost", onClick: () => setWish(null), children: "Cancel" }), _jsxs(Button, { size: "xs", disabled: !wish.trim(), onClick: () => onNewRecipe(wish), children: [_jsx(SparklesIcon, {}), "Save and ask ", assistantName] })] })] })), main?.empty && (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-md border border-dashed px-3 py-6 text-center", children: [_jsx(DatabaseIcon, { className: "size-5 text-muted-foreground" }), _jsx("p", { className: "text-sm font-medium", children: "Pick the main data" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Its rows are what this widget shows." }), _jsx(LumenSelector, { id: "view-editor-main-data", trigger: "chip", icon: DatabaseIcon, placeholder: "Main data", label: "Pick the main data", search: true, value: null, options: main.options, empty: "No data to pick", onChange: main.onPick })] })), !main?.empty &&
+                groupsOf(domain).map((g, gi) => {
+                    const all = domain.fields.filter((f) => groupOf(domain, f) === g.id);
+                    const fields = all.filter(match);
+                    const formulasGroup = g.id === FORMULAS_GROUP;
+                    const linkTo = g.id.startsWith(LINK_PREFIX) ? g.id.slice(LINK_PREFIX.length) : null;
+                    const rowsGroup = gi === 0 && !linkTo && !formulasGroup;
+                    const recipe = !rowsGroup && g.id.startsWith(FRAME_PREFIX) ? g.id.slice(FRAME_PREFIX.length) : null;
+                    // Not linked: no field pairs yet, so it adds nothing; its fields wait greyed out.
+                    const unlinked = !!linkTo && !all.length && !(linkPairs?.onOf(linkTo).length ?? 0);
+                    if (q && !fields.length)
+                        return null;
+                    if (!all.length && !formulasGroup && !linkTo)
+                        return null;
+                    const color = g.color ?? PLAIN;
+                    // A link starts open, so its pairs and fields show where they are picked.
+                    const open = linkTo
+                        ? !!q || (toggled.get(`g:${g.id}`) ?? true)
+                        : isOpen(`g:${g.id}`, all) || (formulasGroup && !all.length);
+                    const topics = [...new Set(fields.map((f) => f.topic ?? ''))];
+                    return (_jsxs(Collapsible, { open: open, onOpenChange: () => flip(`g:${g.id}`, open), children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "h-7 min-w-0 flex-1 justify-start gap-2 px-1.5 text-[0.8125rem] font-semibold", children: [_jsx(ChevronRightIcon, { className: cn('text-muted-foreground transition-transform', open && 'rotate-90') }), _jsx("span", { className: "size-2.5 shrink-0 rounded-[3px]", style: { background: color } }), formulasGroup && _jsx(SigmaIcon, { className: "text-muted-foreground" }), linkTo &&
+                                                    (unlinked ? (_jsx(Unlink2Icon, { className: "text-destructive" })) : (_jsx(Link2Icon, { className: "text-muted-foreground" }))), recipe && _jsx(SparklesIcon, { className: "text-muted-foreground" }), _jsx("span", { className: "truncate", children: rowsGroup && main ? main.label : g.label }), rowsGroup && (_jsx(Badge, { variant: "secondary", className: "h-4 px-1.5 text-[0.6875rem] font-normal", children: "Rows" })), unlinked && (_jsx(Badge, { variant: "destructive", className: "h-4 px-1.5 text-xs font-normal", children: "Not linked" })), _jsxs("span", { className: "num ml-auto text-xs font-normal text-muted-foreground", children: [all.filter((f) => picked(f.key)).length, "/", all.length] })] }) }), rowsGroup && main && (_jsxs(_Fragment, { children: [_jsx(LumenSelector, { trigger: "icon", icon: ReplaceIcon, label: "Change the main data", align: "end", search: true, value: null, options: main.options, empty: "No other data", onChange: main.onPick }), _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Drop ${main.label}`, onClick: main.onDrop })] })), main && (linkTo || recipe) && (_jsx(IconButton, { icon: StarIcon, size: "icon-xs", label: `Make ${g.label} the main data`, onClick: () => main.onMakeMain(linkTo ?? `${FRAME_LINK}${recipe}`) })), main && linkTo && onUnlink && (_jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Drop ${g.label}`, onClick: () => onUnlink(linkTo) })), main && recipe && onRemoveRecipe && (_jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Drop ${g.label}`, onClick: () => onRemoveRecipe(recipe) })), !main && linkTo && onUnlink && (_jsx(LumenConfirm, { title: `Unlink ${g.label}?`, description: "Its columns leave this widget when you save.", action: "Unlink", onConfirm: () => onUnlink(linkTo), children: _jsx(IconButton, { icon: Unlink2Icon, size: "icon-xs", label: `Unlink ${g.label}` }) })), !main && recipe && onRemoveRecipe && (_jsx(LumenConfirm, { title: `Remove ${g.label}?`, description: `Its columns leave this widget when you save. The recipe stays in ${assistantName}.`, action: "Remove", onConfirm: () => onRemoveRecipe(recipe), children: _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Remove ${g.label}` }) }))] }), _jsxs(CollapsibleContent, { className: "ml-[0.9rem] flex flex-col gap-px border-l-2 pl-2", style: { borderColor: guide(color) }, children: [g.note && !q && (_jsx("p", { className: cn('px-1 py-1 text-xs', unlinked ? 'text-destructive' : 'text-muted-foreground'), children: g.note })), linkTo && linkPairs && !q && (_jsx(LinkPairs, { label: g.label, on: linkPairs.onOf(linkTo), cardFields: linkPairs.cardFields, fields: linkPairs.fieldsOf(linkTo), onChange: (on) => linkPairs.set(linkTo, on) })), unlinked &&
+                                        linkPairs
+                                            ?.fieldsOf(linkTo)
+                                            .filter(match)
+                                            .map((f) => (_jsxs("div", { className: "flex min-h-7 items-center gap-2 px-1 text-sm text-muted-foreground opacity-60", children: [_jsx(WhyOff, { note: "Link it first", children: _jsx(Checkbox, { checked: false, disabled: true, "aria-label": `Use ${f.label}` }) }), _jsx("span", { className: "truncate", children: f.label })] }, f.key))), topics.map((t) => {
+                                        const inTopic = fields.filter((f) => (f.topic ?? '') === t);
+                                        if (!t)
+                                            return inTopic.map(leaf);
+                                        const src = g.sources?.[t];
+                                        const id = `t:${g.id}:${t}`;
+                                        const topicOpen = isOpen(id, all.filter((f) => f.topic === t));
+                                        return (_jsxs(Collapsible, { open: topicOpen, onOpenChange: () => flip(id, topicOpen), children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "h-7 w-full justify-start gap-1.5 px-1 text-[0.8125rem] font-semibold", children: [_jsx(ChevronRightIcon, { className: cn('text-muted-foreground transition-transform', topicOpen && 'rotate-90') }), _jsx("span", { className: "truncate", children: t }), _jsxs("span", { className: "num text-xs font-normal text-muted-foreground", children: [inTopic.filter((f) => picked(f.key)).length, "/", inTopic.length] }), src && (_jsxs("span", { className: "ml-auto flex min-w-0 items-center gap-1.5 text-xs font-normal text-muted-foreground", children: [_jsx("span", { className: "size-1.5 shrink-0 rounded-full", style: { background: src.color } }), _jsx("span", { className: "font-medium", style: { color: src.color }, children: src.name }), src.detail && (_jsxs("span", { className: "truncate max-md:hidden", children: ["\u00B7 ", src.detail] }))] }))] }) }), _jsx(CollapsibleContent, { className: "ml-[0.7rem] flex flex-col gap-px border-l-2 pl-2", style: { borderColor: guide(src?.color ?? PLAIN) }, children: inTopic.map(leaf) })] }, t));
+                                    }), formulasGroup && onAddFormula && !q && (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 justify-start gap-2 px-1 font-normal text-muted-foreground", onClick: onAddFormula, children: [_jsx(PlusIcon, {}), "Add formula"] }))] })] }, g.id));
+                })] }));
+}
+/** A key's name as a person reads it: `symbol` is Symbol. */
+const fieldName = (k) => (k[0]?.toUpperCase() ?? '') + k.slice(1).replace(/_/g, ' ');
+/** A table's Settings: shape, the default grouping and sort, pages and width. */
+function DetailsSection({ domain, draft, setDraft, shownKeys, }) {
+    const groupable = domain.fields.filter((f) => f.groupable);
+    const groupKeys = groupable.map((f) => f.key);
+    const numbers = domain.fields.filter((f) => f.format !== 'text');
+    const groupChoices = draft.group.fields.length ? draft.group.fields : groupKeys;
+    const offered = groupable.filter((f) => groupChoices.includes(f.key));
+    const byKey = new Map(domain.fields.map((f) => [f.key, f]));
+    const shown = shownKeys.map((k) => byKey.get(k)).filter((f) => !!f);
+    const pivot = draft.pivot;
+    const pagination = draft.pagination ?? viewPaginationSchema.parse({});
+    const fieldSelect = (label, value, fields, onChange, none) => (_jsx(LumenSelector, { label: label, size: "sm", className: "w-full min-w-0", placeholder: "Pick a field", options: [...(none ? [{ value: NONE, label: none }] : []), ...fieldOptions(fields, domain)], value: value || (none ? NONE : ''), onChange: onChange }));
+    return (_jsxs("div", { className: "flex max-w-xl flex-col gap-3", children: [_jsx(Row, { label: "Shape", children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, className: "justify-self-start", "aria-label": "Shape", value: draft.shape, onValueChange: (v) => {
+                        if (!v)
+                            return;
+                        const shape = v;
+                        setDraft({
+                            ...draft,
+                            shape,
+                            group: {
+                                ...draft.group,
+                                default: shape === 'table'
+                                    ? null
+                                    : shape === 'group'
+                                        ? (draft.group.default ?? offered[0]?.key ?? null)
+                                        : draft.group.default,
+                            },
+                            pivot: shape === 'pivot' && !draft.pivot
+                                ? {
+                                    rows: groupable[0]?.key ?? '',
+                                    columns: groupable[1]?.key ?? groupable[0]?.key ?? '',
+                                    value: numbers[0]?.key ?? '',
+                                    agg: 'sum',
+                                }
+                                : draft.pivot,
+                        });
+                    }, children: SHAPES.map((s) => {
+                        const Icon = shapeIcon(s.value);
+                        return (_jsxs(ToggleGroupItem, { value: s.value, "aria-label": s.label, children: [_jsx(Icon, {}), s.label] }, s.value));
+                    }) }) }), draft.shape === 'group' && (_jsx(Row, { label: "Group by", children: fieldSelect('Default grouping', draft.group.default ?? '', offered, (v) => setDraft({ ...draft, group: { ...draft.group, default: v === NONE ? null : v } }), 'No grouping') })), subgroupsOf(domain).length ? (_jsx(Row, { label: subgroupLabel(domain), children: _jsx(LumenSelector, { label: subgroupLabel(domain), size: "sm", className: "w-full min-w-0", options: [
+                        { value: NONE, label: 'None' },
+                        ...subgroupsOf(domain).map((sg) => ({
+                            value: sg.key,
+                            label: sg.label,
+                            icon: sg.icon,
+                        })),
+                    ], value: subgroupOf(domain, draft.subgroup)?.key ?? NONE, onChange: (v) => setDraft({ ...draft, subgroup: v === NONE ? null : v }) }) })) : null, draft.shape === 'pivot' && pivot && (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Rows", children: fieldSelect('Pivot rows', pivot.rows, groupable, (rows) => setDraft({ ...draft, pivot: { ...pivot, rows } })) }), _jsx(Row, { label: "Columns", children: fieldSelect('Pivot columns', pivot.columns, groupable, (columns) => setDraft({ ...draft, pivot: { ...pivot, columns } })) }), _jsx(Row, { label: "Value", children: _jsxs("div", { className: "flex min-w-0 gap-2", children: [fieldSelect('Pivot value', pivot.value, numbers, (value) => setDraft({ ...draft, pivot: { ...pivot, value } })), _jsx(LumenSelector, { label: "Roll-up", size: "sm", className: "w-28 shrink-0", options: viewAggs.map((a) => ({ value: a, label: AGG_LABELS[a] })), value: pivot.agg, onChange: (agg) => setDraft({ ...draft, pivot: { ...pivot, agg } }) })] }) })] })), _jsx(Row, { label: "Sort", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [fieldSelect('Sort by', draft.sort?.key ?? '', shown, (v) => setDraft({
+                            ...draft,
+                            sort: v === NONE ? null : { key: v, desc: draft.sort?.desc ?? true },
+                        }), 'As loaded'), _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, "aria-label": "Sort direction", disabled: !draft.sort, value: draft.sort?.desc ? 'desc' : 'asc', onValueChange: (v) => v && draft.sort && setDraft({ ...draft, sort: { ...draft.sort, desc: v === 'desc' } }), children: [_jsx(ToggleGroupItem, { value: "asc", "aria-label": "Ascending", children: _jsx(ArrowUpIcon, {}) }), _jsx(ToggleGroupItem, { value: "desc", "aria-label": "Descending", children: _jsx(ArrowDownIcon, {}) })] })] }) }), _jsx(Row, { label: "Pages", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Switch, { "aria-label": "Pagination", checked: pagination.on, onCheckedChange: (on) => setDraft({ ...draft, pagination: { ...pagination, on } }) }), _jsx(LumenSelector, { label: "Rows per page", size: "sm", className: "num w-36", disabled: !pagination.on, options: viewPageSizes.map((n) => ({ value: String(n), label: `${n} per page` })), value: String(pagination.size), onChange: (v) => setDraft({
+                                ...draft,
+                                pagination: { ...pagination, size: Number(v) },
+                            }) })] }) }), _jsx(Row, { label: "Table width", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: draft.width ?? 'scroll', onValueChange: (v) => v && setDraft({ ...draft, width: v }), "aria-label": "Table width", children: [_jsxs(ToggleGroupItem, { value: "fit", "aria-label": "Fit to width", children: [_jsx(ShrinkIcon, {}), " Fit"] }), _jsxs(ToggleGroupItem, { value: "scroll", "aria-label": "Scroll sideways", children: [_jsx(MoveHorizontalIcon, {}), " Scroll"] })] }) })] }));
+}
+const CHIP_LABELS = { text: 'Text', column: 'Chip', inline: 'On first' };
+/**
+ * Why a box is greyed out, on hover or a tap (a disabled checkbox gets no pointer events, so its
+ * wrapper carries the tip).
+ */
+function WhyOff({ note, children }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Tooltip, { open: open, onOpenChange: setOpen, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex justify-center", onPointerDown: () => setOpen(true), children: children }) }), _jsx(TooltipContent, { children: note })] }));
+}
+/**
+ * Columns: the fields the view lists, in order, dragged to reorder. Show puts one on screen; a
+ * field not shown stays listed, dimmed, so it can still be ticked to filter or group by. Each is shown as text or a chip.
+ */
+function ColumnList({ base, domain, draft, setDraft, shownKeys, hiddenKeys, onEditFormula, }) {
+    const sensors = useDrag();
+    const baseByKey = new Map(base.fields.map((f) => [f.key, f]));
+    // Total: what group and Total rows show for a number column. A formula's
+    // pick is its own `agg`; a field's goes in `aggs`, and picking the field's own clears it.
+    const totalCell = (f) => {
+        const formula = formulasOf(draft).find((x) => x.key === f.key);
+        const own = baseByKey.get(f.key);
+        const ownPick = formula ? null : own ? totalAggOf(own) : 'none';
+        const ownLabel = !formula && own?.share ? 'Share of total' : 'Same formula';
+        const options = [
+            ...(formula || ownPick === 'own' ? [{ value: OWN_TOTAL, label: ownLabel }] : []),
+            { value: 'none', label: 'None' },
+            ...TOTAL_AGGS.map((a) => ({ value: a, label: AGG_LABELS[a] })),
+        ];
+        const value = formula
+            ? (formula.agg ?? OWN_TOTAL)
+            : (draft.aggs?.[f.key] ?? (ownPick === 'own' ? OWN_TOTAL : ownPick));
+        const set = (v) => {
+            if (formula) {
+                setDraft({
+                    ...draft,
+                    formulas: formulasOf(draft).map((x) => x.key === f.key ? { ...x, agg: v === OWN_TOTAL ? null : v } : x),
+                });
+                return;
+            }
+            const { [f.key]: _, ...rest } = draft.aggs ?? {};
+            const fieldOwn = ownPick === 'own' ? OWN_TOTAL : ownPick;
+            setDraft({
+                ...draft,
+                aggs: v === fieldOwn ? rest : { ...rest, [f.key]: v },
+            });
+        };
+        return (_jsx(LumenSelector, { label: `Total of ${f.label}`, size: "sm", className: "h-7 w-full", options: options, value: value ?? 'none', onChange: set }));
+    };
+    const byKey = new Map(domain.fields.map((f) => [f.key, f]));
+    // Rows keep their place while Show is ticked on and off; a saved view lists the shown first.
+    const [order, setOrder] = useState(() => [...shownKeys, ...hiddenKeys]);
+    const listedKeys = [...shownKeys, ...hiddenKeys];
+    const rowKeys = [
+        ...order.filter((k) => listedKeys.includes(k)),
+        ...listedKeys.filter((k) => !order.includes(k)),
+    ];
+    const rows = rowKeys.map((k) => byKey.get(k)).filter((f) => !!f);
+    const chips = chipsOf(draft);
+    const first = domain.fields.find((f) => f.key === shownKeys[0]);
+    const groupKeys = domain.fields.filter((f) => f.groupable).map((f) => f.key);
+    const filterKeys = domain.fields.filter((f) => f.filterable).map((f) => f.key);
+    const canFilterKeys = domain.fields.filter(canFilter).map((f) => f.key);
+    const groupChoices = draft.group.fields.length ? draft.group.fields : groupKeys;
+    const filterChoices = draft.filters.fields.length ? draft.filters.fields : filterKeys;
+    const groupInfo = (f) => {
+        const id = groupOf(domain, f);
+        if (id === FORMULAS_GROUP)
+            return { color: PLAIN, label: 'Formula' };
+        const g = domain.groups?.find((x) => x.id === id);
+        // A column chip takes its source's colour like its header.
+        const src = f.topic ? g?.sources?.[f.topic] : undefined;
+        return { color: src?.color ?? g?.color ?? PLAIN, label: f.topic ?? g?.label ?? '' };
+    };
+    const chippable = (f) => f.format === 'text' && (f.filterable || f.groupable) && f.key !== first?.key;
+    const placement = (key) => chips.find((c) => c.key === key)?.placement ?? CHIP_TEXT;
+    const setPlacement = (key, v) => setDraft({
+        ...draft,
+        chips: v === CHIP_TEXT
+            ? chips.filter((c) => c.key !== key)
+            : chips.some((c) => c.key === key)
+                ? chips.map((c) => (c.key === key ? { key, placement: v } : c))
+                : [...chips, { key, placement: v }],
+    });
+    const isFormula = (key) => formulasOf(draft).some((x) => x.key === key);
+    // Show on or off keeps the row where it is: columns follow the rows' order.
+    const setShown = (key, on) => {
+        setOrder(rowKeys);
+        const shown = new Set(shownKeys);
+        if (on)
+            shown.add(key);
+        else
+            shown.delete(key);
+        setDraft({
+            ...draft,
+            columns: rowKeys.filter((k) => shown.has(k)),
+            hidden: rowKeys.filter((k) => !shown.has(k)),
+        });
+    };
+    const groupNote = (f) => f.groupNote ??
+        (f.format === 'text' ? 'Not offered for grouping.' : 'Numbers can’t be grouped.');
+    if (!rows.length)
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "Tick fields on the right to show them." });
+    const grid = 'grid grid-cols-[1.25rem_minmax(0,1fr)_2.5rem_2.5rem_2.5rem] items-center gap-x-2 md:grid-cols-[1.25rem_minmax(0,1fr)_3.5rem_3.5rem_3.5rem_8.5rem_7.5rem]';
+    return (_jsxs("div", { className: "flex flex-col", "data-testid": "view-columns", children: [_jsxs("div", { className: cn(grid, 'pb-1 text-xs text-muted-foreground'), children: [_jsx("span", {}), _jsx("span", { children: "Column" }), _jsx("span", { className: "text-center", children: "Show" }), _jsx("span", { className: "text-center", children: "Filter" }), _jsx("span", { className: "text-center", children: "Group" }), _jsx("span", { className: "max-md:hidden", children: "Format" }), _jsx("span", { className: "max-md:hidden", children: "Total" })] }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: (e) => {
+                    const next = moved(rowKeys, e);
+                    setOrder(next);
+                    setDraft({
+                        ...draft,
+                        columns: next.filter((k) => shownKeys.includes(k)),
+                        hidden: next.filter((k) => !shownKeys.includes(k)),
+                    });
+                }, children: _jsx(SortableContext, { items: rowKeys, strategy: verticalListSortingStrategy, children: rows.map((f) => {
+                        const g = groupInfo(f);
+                        const shown = shownKeys.includes(f.key);
+                        const canF = canFilterKeys.includes(f.key);
+                        const canG = groupKeys.includes(f.key);
+                        return (_jsxs(ColumnRow, { id: f.key, className: grid, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: cn('h-4 w-1 shrink-0 rounded-full', !shown && 'opacity-40'), style: { background: g.color }, "aria-hidden": true }), _jsx("span", { className: cn('truncate', !shown && 'text-muted-foreground'), children: f.label }), _jsx("span", { className: "truncate text-xs text-muted-foreground max-md:hidden", children: g.label }), !shown && (_jsx(Badge, { variant: "outline", className: "shrink-0 font-normal text-muted-foreground", children: "Not shown" })), isFormula(f.key) && (_jsx(IconButton, { icon: PencilIcon, size: "icon-xs", className: "text-muted-foreground", label: `Edit formula ${f.label}`, onClick: () => onEditFormula(f.key) }))] }), _jsx("span", { className: "flex justify-center", children: _jsx(Checkbox, { "aria-label": `Show ${f.label}`, checked: shown, onCheckedChange: (v) => setShown(f.key, v === true) }) }), canF ? (_jsx("span", { className: "flex justify-center", children: _jsx(Checkbox, { "aria-label": `Filter by ${f.label}`, checked: filterChoices.includes(f.key), onCheckedChange: (v) => setDraft({
+                                            ...draft,
+                                            filters: {
+                                                ...draft.filters,
+                                                fields: toggleIn(draft.filters.fields, filterKeys, f.key, v === true, canFilterKeys),
+                                                default: v === true
+                                                    ? draft.filters.default
+                                                    : draft.filters.default.filter((t) => t.key !== f.key),
+                                            },
+                                        }) }) })) : (_jsx(WhyOff, { note: "Not offered as a filter.", children: _jsx(Checkbox, { "aria-label": `Filter by ${f.label}`, disabled: true, checked: false }) })), canG ? (_jsx("span", { className: "flex justify-center", children: _jsx(Checkbox, { "aria-label": `Group by ${f.label}`, checked: groupChoices.includes(f.key), onCheckedChange: (v) => setDraft({
+                                            ...draft,
+                                            group: {
+                                                ...draft.group,
+                                                fields: toggleIn(draft.group.fields, groupKeys, f.key, v === true),
+                                                default: v !== true && draft.group.default === f.key
+                                                    ? null
+                                                    : draft.group.default,
+                                            },
+                                        }) }) })) : (_jsx(WhyOff, { note: groupNote(f), children: _jsx(Checkbox, { "aria-label": `Group by ${f.label}`, disabled: true, checked: false }) })), _jsx("span", { className: "max-md:hidden", children: chippable(f) ? (_jsx(LumenSelector, { label: `Show ${f.label} as`, size: "sm", className: "h-7 w-full", options: Object.entries(CHIP_LABELS).map(([v, l]) => ({
+                                            value: v,
+                                            label: v === 'inline' ? `On ${first?.label ?? 'first'}` : l,
+                                        })), value: placement(f.key), onChange: (v) => setPlacement(f.key, v) })) : f.format !== 'text' ? (_jsx(LumenSelector, { label: `Format of ${f.label}`, size: "sm", className: "h-7 w-full", options: formatOptions(), value: f.format, onChange: (v) => setDraft({
+                                            ...draft,
+                                            formats: {
+                                                ...draft.formats,
+                                                [f.key]: v,
+                                            },
+                                        }) })) : (_jsx("span", { className: "pl-2 text-xs text-muted-foreground", children: FORMAT_LABELS[f.format] })) }), _jsx("span", { className: "max-md:hidden", children: f.format !== 'text' && totalCell(f) })] }, f.key));
+                    }) }) })] }));
+}
+function ColumnRow({ id, className, children, }) {
+    const s = useSortable({ id });
+    return (_jsxs("div", { ref: s.setNodeRef, "data-field": id, style: { transform: CSS.Transform.toString(s.transform), transition: s.transition }, className: cn(className, 'min-h-9 rounded-md border-b border-border/50 bg-card text-sm last:border-b-0 hover:bg-accent/40', s.isDragging && 'relative z-20 shadow-md'), children: [_jsx(Button, { variant: "ghost", size: "icon-xs", className: "size-5 cursor-grab touch-none text-muted-foreground active:cursor-grabbing", "aria-label": `Drag ${id}`, ...s.attributes, ...s.listeners, children: _jsx(GripVerticalIcon, {}) }), children] }));
+}
+/** Formulas: each one a sub-item with its own editor, then New formula. */
+function FormulasSection({ base, draft, setDraft, formulaProblems, blanks, editing, setEditing, onAdd, }) {
+    const formulas = formulasOf(draft);
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [!formulas.length && (_jsx("p", { className: "text-sm text-muted-foreground", children: "A formula is a column you compute from other fields, like weight or upside." })), formulas.map((formula, fi) => {
+                const open = editing === formula.key;
+                const readable = formulaOptions(base, formulas, formula.key);
+                return (_jsxs(Collapsible
+                // biome-ignore lint/suspicious/noArrayIndexKey: the key is edited in place; the index keeps the editor mounted.
+                , { open: open, onOpenChange: (o) => setEditing(o ? formula.key : null), className: "rounded-md border", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-start gap-2 px-2", children: [_jsx(ChevronRightIcon, { className: cn('text-muted-foreground transition-transform', open && 'rotate-90') }), _jsx(SigmaIcon, { className: "text-muted-foreground" }), _jsx("span", { className: "shrink-0", children: formula.label || formula.key }), _jsx("code", { className: "min-w-0 truncate font-mono text-xs font-normal text-muted-foreground", children: formula.expr || 'no expression yet' }), formulaProblems[fi] && (_jsx(Badge, { variant: "destructive", className: "ml-auto font-normal", children: "fix" }))] }) }), _jsx(CollapsibleContent, { className: "[&>div]:border-t [&>div]:bg-transparent [&>div]:md:pl-3", children: _jsx(FormulaForm, { formula: formula, issue: formulaProblems[fi] ?? null, blank: blanks.get(formula.key) ?? null, fields: readable, onChange: (p) => {
+                                    const next = formulas.map((x, j) => (j === fi ? { ...x, ...p } : x));
+                                    // A renamed key carries its column, chip, sort and tiles with it.
+                                    const was = formula.key;
+                                    const now = p.key ?? was;
+                                    const rename = (k) => (k === was ? now : k);
+                                    setDraft({
+                                        ...draft,
+                                        formulas: next,
+                                        columns: draft.columns.map(rename),
+                                        tiles: tilesOf(draft).map((t) => renameTile(t, rename)),
+                                        cards: draft.cards?.map((c) => isRowCard(c) && c.tiles
+                                            ? { ...c, tiles: c.tiles.map((t) => renameTile(t, rename)) }
+                                            : c),
+                                        sort: draft.sort ? { ...draft.sort, key: rename(draft.sort.key) } : null,
+                                    });
+                                    if (now !== was)
+                                        setEditing(now);
+                                }, onRemove: () => {
+                                    setEditing(null);
+                                    setDraft({
+                                        ...draft,
+                                        formulas: formulas.filter((_, j) => j !== fi),
+                                        columns: draft.columns.filter((k) => k !== formula.key),
+                                    });
+                                }, onDone: () => setEditing(null) }) })] }, fi));
+            }), onAdd && (_jsx(IconButton, { icon: PlusIcon, label: "New formula", className: "self-start text-primary", onClick: onAdd }))] }));
+}
+/** The sidebar icon: the shared picker over the draft's `icon`. */
+function ViewIconPicker({ draft, setDraft }) {
+    return (_jsx(IconPicker, { value: draft.icon, onChange: (icon) => setDraft({ ...draft, icon }), fallback: shapeIcon(draft.shape), label: "Sidebar icon", resetLabel: "Use the shape's icon" }));
+}
+function MoreSection({ name, viewId, onDuplicate, onDelete, }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [viewId && (_jsxs(Field, { label: "View id", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Give it to an agent to read or change this view (custom_view_read, custom_view_write)." }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { "aria-label": "View id", readOnly: true, value: viewId, className: "font-mono text-xs", onFocus: (e) => e.currentTarget.select() }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": "Copy view id", onClick: () => void navigator.clipboard.writeText(viewId).then(() => {
+                                        setCopied(true);
+                                        setTimeout(() => setCopied(false), 1500);
+                                    }), children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }) })] })] })), onDuplicate && (_jsx(Field, { label: "Duplicate", children: _jsx(IconButton, { icon: CopyIcon, label: "Duplicate view", variant: "outline", className: "self-start", onClick: onDuplicate }) })), onDelete && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-destructive/40 p-4", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "font-medium", children: "Delete view" }), _jsx("span", { className: "text-sm text-muted-foreground", children: "Removes it for you. You confirm first." })] }), _jsx(LumenConfirm, { title: `Delete view ${name}?`, onConfirm: onDelete, children: _jsx(IconButton, { icon: Trash2Icon, label: "Delete view", variant: "destructive" }) })] }))] }));
+}
+function Field({ label, children }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-sm font-medium", children: label }), children] }));
+}