@columenlabs/lumen-ui 0.1.1 → 0.1.3

package/dist/ui/item.d.ts

@@ -4,14 +4,14 @@ import { Separator } from './separator.js';
 declare function ItemGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare const itemVariants: (props?: ({
-    variant?: "default" | "outline" | "muted" | null | undefined;
-    size?: "default" | "xs" | "sm" | null | undefined;
+    variant?: "default" | "muted" | "outline" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & {
     asChild?: boolean;
 }): React.JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "image" | "default" | "icon" | null | undefined;
+    variant?: "default" | "icon" | "image" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/ui/sidebar.d.ts

@@ -44,7 +44,7 @@ declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>
 declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<'button'> & {
     asChild?: boolean;

package/dist/ui/sidebar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils.js';
 import { cva } from 'class-variance-authority';
 import { Slot } from 'radix-ui';

package/dist/ui/toggle.d.ts

@@ -3,7 +3,7 @@ import { Toggle as TogglePrimitive } from 'radix-ui';
 import type * as React from 'react';
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): React.JSX.Element;
 export { Toggle, toggleVariants };

package/dist/view-edit-cell.js

@@ -49,10 +49,7 @@ export function EditCell({ label, value, options, unused = [], chip, note, color
             ]
             : []),
     ];
-    return (
-    // Clicks and keys stay off the row, which opens its details (the list is a portal, but React
-    // events still bubble through here).
-    _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
+    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'

package/dist/view-editor.d.ts

@@ -49,4 +49,4 @@ export interface ViewEditDialogProps<T> {
  * 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;
+export declare function ViewEditDialog<T>({ open, onOpenChange, domain: pageDomain, config, rows: pageRows, current, onSave, card, onSaveCard, fields: pageFields, viewTiles, read, viewId, editor, onDuplicate, onDelete, }: ViewEditDialogProps<T>): import("react").JSX.Element;

package/dist/view-editor.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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, inferConnection, isOwnTile, isRowCard, isTableCard, mainTableOf, tableConfigOf, tableLayoutOf, viewAggs, viewCardSchema, viewPageSizes, viewPaginationSchema, widgetStyleId, } from '@columenlabs/lumen-ui-types/views';
+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,
@@ -10,7 +10,7 @@ import { CONNECTED_COUNT, VIEW_CARD_KIND_NAMES, WIDGET_STYLES, cardsOf, connecte
 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, RotateCcwIcon, SearchIcon, ShapesIcon, ShrinkIcon, SigmaIcon, SlidersHorizontalIcon, SmileIcon, SparklesIcon, ToggleRightIcon, Trash2Icon, Unlink2Icon, XIcon, } from 'lucide-react';
+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';
@@ -21,12 +21,13 @@ 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, useDomainReads, useDraftFrames, useFrameChoices } from './joins.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 { CARD_COLUMNS, CARD_TITLE_MAX, cardTitle, draftOf, useOffered } from './lumen-widget.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';
@@ -48,6 +49,7 @@ import { AGG_LABELS, FORMAT_LABELS, FormatChip, FormulaForm, MAX_FORMULAS, field
 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. */
@@ -60,6 +62,7 @@ const SHAPES = [
     { 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('');
@@ -123,10 +126,17 @@ const tableDraftOf = (config, card) => tableConfigOf(config, isTableCard(card)
  * 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: joined, config, rows, current, onSave, card, onSaveCard, fields: filterFields = [], viewTiles, read, viewId, editor, onDuplicate, onDelete, }) {
+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();
-    const start = () => (card ? tableDraftOf(config, card) : config);
+    // 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;
@@ -156,6 +166,7 @@ export function ViewEditDialog({ open, onOpenChange, domain: joined, config, row
     if (open !== wasOpen) {
         setWasOpen(open);
         if (open) {
+            setSource(card?.source ?? null);
             setDraft(start());
             setWidget(card && !isTableCard(card) ? card : null);
             setFrame(card ?? null);
@@ -273,6 +284,8 @@ export function ViewEditDialog({ open, onOpenChange, domain: joined, config, row
         }
         : 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);
@@ -348,6 +361,97 @@ export function ViewEditDialog({ open, onOpenChange, domain: joined, config, row
         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)
@@ -368,9 +472,25 @@ export function ViewEditDialog({ open, onOpenChange, domain: joined, config, row
             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) : [],
@@ -385,6 +505,16 @@ export function ViewEditDialog({ open, onOpenChange, domain: joined, config, row
         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()
             ? [
                 {
@@ -463,11 +593,7 @@ export function ViewEditDialog({ open, onOpenChange, domain: joined, config, row
         }
         if (parsed) {
             if (parsed.success)
-                onSaveCard?.(parsed.data, {
-                    formulas: draft.formulas,
-                    connections: draft.connections,
-                    ...(draft.frames ? { frames: draft.frames } : {}),
-                });
+                onSaveCard?.(parsed.data, viewPart(draft));
         }
         else if (frame) {
             // A table of its own: the frame, its name and its layout.
@@ -476,25 +602,32 @@ export function ViewEditDialog({ open, onOpenChange, domain: joined, config, row
             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),
-            }), {
-                formulas: next.formulas,
-                connections: next.connections,
-                ...(next.frames ? { frames: next.frames } : {}),
-            });
+            }), 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: unlink, linkPairs: {
+    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: removeFrame, onNewRecipe: askRecipe })) : (_jsx("p", { className: "px-1.5 text-sm text-muted-foreground", children: widget?.kind === 'chart' && (widget.style === 'price' || widget.style === 'market')
+        }, 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
@@ -577,8 +710,7 @@ function LinkPairs({ label, on, cardFields, fields, onChange, }) {
     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"] }))] }));
 }
-/** The right pane: every field by group and topic, ticked to show it as a column. */
-function FieldTree({ domain, draft, picked, onPick, why, formulaProblems, onEditFormula, onRemoveFormula, onAddFormula, deskDomains = [], onLink, onUnlink, deskLabel, recipes = [], recipeNote, onAddRecipe, recipeByKey = () => false, onRemoveRecipe, onNewRecipe, linkPairs, }) {
+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.
@@ -655,32 +787,41 @@ function FieldTree({ domain, draft, picked, onPick, why, formulaProblems, onEdit
         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: "mb-1 flex items-center gap-1.5", 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 && (_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 }))] }), 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] })] })] })), 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 recipe = g.id.startsWith(FRAME_PREFIX) ? g.id.slice(FRAME_PREFIX.length) : null;
-                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 && _jsx(Link2Icon, { className: "text-muted-foreground" }), recipe && _jsx(SparklesIcon, { className: "text-muted-foreground" }), _jsx("span", { className: "truncate", children: g.label }), gi === 0 && !linkTo && !recipe && !formulasGroup && (_jsx(Badge, { variant: "secondary", className: "h-4 px-1.5 text-[0.6875rem] font-normal", children: "Rows" })), _jsxs("span", { className: "num ml-auto text-xs font-normal text-muted-foreground", children: [all.filter((f) => picked(f.key)).length, "/", all.length] })] }) }), 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}` }) })), 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: "px-1 py-1 text-xs 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) })), 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));
-            })] }));
+    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, ' ');

package/dist/view-formulas.d.ts

@@ -14,7 +14,7 @@ export declare function FormatChip({ format, icon }: {
     icon?: LucideIcon;
 }): import("react").JSX.Element;
 /** The number formats as picker options, each with how it reads. */
-export declare const formatOptions: () => LumenOption<ViewFormula["format"]>[];
+export declare const formatOptions: () => LumenOption<ViewFormula['format']>[];
 /**
  * A formula as it shows: a Text one has no sum or average of words, so its
  * group and Total rows are blank unless they count, or show the first or last value. Its format is

package/dist/view-model.d.ts

@@ -127,12 +127,12 @@ export declare const CHIP_TONE: Record<ViewChipTone, string>;
 /** A run's state as a chip, the same on every app: done green, failed
  *  red, running blue, queued, waiting and canceled grey. */
 export declare const RUN_STATE_TONE: {
-    readonly done: "gain";
-    readonly failed: "loss";
-    readonly running: "info";
-    readonly queued: "muted";
-    readonly waiting: "muted";
-    readonly canceled: "muted";
+    readonly done: 'gain';
+    readonly failed: 'loss';
+    readonly running: 'info';
+    readonly queued: 'muted';
+    readonly waiting: 'muted';
+    readonly canceled: 'muted';
 };
 /** A group of fields by where they come from: their colour and, per topic, the source line. */
 export interface ViewFieldGroup {
@@ -303,8 +303,8 @@ export declare const formulasOf: (c: CustomViewConfig) => {
     key: string;
     label: string;
     expr: string;
-    format: "number" | "text" | "weight" | "compact" | "rounded" | "price" | "price_rounded" | "price_signed" | "percent" | "signed" | "integer";
-    agg: "none" | "max" | "min" | "first" | "last" | "sum" | "count" | "mean" | "distinct" | null;
+    format: "compact" | "integer" | "number" | "percent" | "price" | "price_rounded" | "price_signed" | "rounded" | "signed" | "text" | "weight";
+    agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "none" | "sum" | null;
 }[];
 /** Fields listed under Columns but not shown, for their Filter and Group ticks; views saved before it have none. */
 export declare const hiddenOf: (c: CustomViewConfig) => string[];
@@ -313,32 +313,32 @@ export declare const tilesOf: (c: CustomViewConfig) => ({
     key: string;
     label: string;
     field: string;
-    agg: "max" | "min" | "first" | "last" | "sum" | "count" | "mean" | "distinct";
+    agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
     filter: {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "gt" | "lt" | "eq" | "between" | undefined;
-        link?: "blue" | "lime" | "pink" | "teal" | "amber" | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     sign: boolean;
     suffix: string;
     lines: ({
         kind: "value";
         field: string;
-        agg: "max" | "min" | "first" | "last" | "sum" | "count" | "mean" | "distinct";
+        agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
         filter: {
             key: string;
             value: string;
             not?: boolean | undefined;
-            op?: "gt" | "lt" | "eq" | "between" | undefined;
-            link?: "blue" | "lime" | "pink" | "teal" | "amber" | undefined;
+            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
         }[];
         suffix: string;
     } | {
         kind: "pct";
         field: string;
-        agg: "max" | "min" | "first" | "last" | "sum" | "count" | "mean" | "distinct";
+        agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
     } | {
         kind: "text";
         text: string;

package/dist/whats-new.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // What's new (in Lumen for
 // every app): the version in the status bar opens the release notes, newest
 // first, each release's Key takeaways only. An app turns it on with LumenShell's `releases`, its

package/dist/widget-data.d.ts

@@ -0,0 +1,4 @@
+import type { LumenOption } from './lumen-selector.js';
+/** The page's own rows, as a data option's value. */
+export declare const PAGE_SOURCE = "_page";
+export declare function useWidgetDataOptions(enabled: boolean, pageLabel: string): LumenOption[];

package/dist/widget-data.js

@@ -0,0 +1,32 @@
+// The data a widget can take as its main data: this page's rows, the app's live domains with a
+// reader, and the person's recipes. Add widget's first step and Edit widget ▸ Data both pick from it.
+import { CATALOG, FRAME_LINK, catalogKeys, readableDomain, } from '@columenlabs/lumen-ui-types/catalog';
+import { DatabaseIcon, SparklesIcon, TableIcon } from 'lucide-react';
+import { asOf, useFrameChoices } from './joins.js';
+import { useApp } from './shell.js';
+/** The page's own rows, as a data option's value. */
+export const PAGE_SOURCE = '_page';
+export function useWidgetDataOptions(enabled, pageLabel) {
+    const app = useApp();
+    const choices = useFrameChoices(enabled);
+    return [
+        { value: PAGE_SOURCE, label: pageLabel, group: 'This page', icon: TableIcon },
+        ...Object.entries(CATALOG)
+            .filter(([id, d]) => d.desk === app?.id && d.status === 'live' && readableDomain(id))
+            .map(([id, d]) => ({
+            value: id,
+            label: d.label,
+            group: `${app?.label ?? 'This app'} data`,
+            detail: catalogKeys(id).join(', ') || undefined,
+            icon: DatabaseIcon,
+            keywords: [d.about],
+        })),
+        ...(choices.data ?? []).map((f) => ({
+            value: `${FRAME_LINK}${f.id}`,
+            label: f.name,
+            group: 'Recipes',
+            detail: asOf(f.at),
+            icon: SparklesIcon,
+        })),
+    ];
+}