@columenlabs/lumen-ui 0.2.0 → 0.2.2

package/dist/connections.js

@@ -143,7 +143,12 @@ export function connectionFields(domain, connections, read, taken) {
         // field on each side is picked; its group stays in the tree for that.
         if (!on) {
             sources.push({ id, name, state: 'off', detail: NOT_LINKED });
-            groups.push({ id, label: name, color: LINK_COLOR, note: NOT_LINKED });
+            groups.push({
+                id,
+                label: name,
+                color: LINK_COLOR,
+                note: 'Pick a field on each side to link it',
+            });
             continue;
         }
         const { index, ok } = indexOf(to, on);

package/dist/lumen-layout.js

@@ -32,6 +32,7 @@ import { LumenViewCard } from './lumen-view-card.js';
 import { AddWidgetDialog, LayoutActions, LayoutChip, LumenSavedWidget, LumenWidget, cardFilterFields, cardTitle, cardsAfter, } from './lumen-widget.js';
 import { OriginLegend } from './origin-legend.js';
 import { IconButton, Page } from './page.js';
+import { SourcedCard } from './sourced-card.js';
 import { LumenCard, SummaryTiles } from './summary-cards.js';
 import { Button } from './ui/button.js';
 import { ViewEditDialog } from './view-editor.js';
@@ -534,7 +535,7 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
         return {
             ...place,
             wide: isTableCard(c) && c.w === GRID_COLS && c.h === undefined,
-            node: isTableCard(c) && c.id !== viewCardId ? (_jsx(LayoutTable, { card: c, base: joins.domain, config: config, rows: c.filter.length ? filterByTokens(rows, widgetFields, c.filter) : rows, load: scope(c.id, load), state: state, onDetails: onDetails, controls: controls, onLayout: onConfigChange ? (table) => putCard({ ...c, table }) : undefined })) : isTableCard(c) ? (_jsx(LumenView, { domain: domain, config: config, rows: viewRows, total: rows.length, groupBy: group.groupField, pivot: pivot, subgroup: group.sub, load: scope(c.id, load), state: state, title: c.title ?? config.name, selection: selection, onDetails: rowPick.onTap ?? onDetails, tapped: rowPick.tapped, groupActions: groupActions, controls: controls, inLayout: true, tools: viewTools, filter: viewFilter, filterCount: filter.tokens.length, strip: _jsx(ConnectOffer, { domain: domain, rows: rows, config: config, read: joins.read, cardKey: viewId ?? config.name, onConnect: onConfigChange ? connect : undefined }), link: cardLink(c.id, viewFollows, viewColor ? filter.tokens.length : 0), shown: c.controls, onColumns: onConfigChange && columnPicker !== false
+            node: c.source ? (_jsx(SourcedCard, { card: c, name: config.name, controls: controls })) : isTableCard(c) && c.id !== viewCardId ? (_jsx(LayoutTable, { card: c, base: joins.domain, config: config, rows: c.filter.length ? filterByTokens(rows, widgetFields, c.filter) : rows, load: scope(c.id, load), state: state, onDetails: onDetails, controls: controls, onLayout: onConfigChange ? (table) => putCard({ ...c, table }) : undefined })) : isTableCard(c) ? (_jsx(LumenView, { domain: domain, config: config, rows: viewRows, total: rows.length, groupBy: group.groupField, pivot: pivot, subgroup: group.sub, load: scope(c.id, load), state: state, title: c.title ?? config.name, selection: selection, onDetails: rowPick.onTap ?? onDetails, tapped: rowPick.tapped, groupActions: groupActions, controls: controls, inLayout: true, tools: viewTools, filter: viewFilter, filterCount: filter.tokens.length, strip: _jsx(ConnectOffer, { domain: domain, rows: rows, config: config, read: joins.read, cardKey: viewId ?? config.name, onConnect: onConfigChange ? connect : undefined }), link: cardLink(c.id, viewFollows, viewColor ? filter.tokens.length : 0), shown: c.controls, onColumns: onConfigChange && columnPicker !== false
                     ? (columns) => onConfigChange({ ...config, columns })
                     : undefined, onAddColumn: addColumn, sort: heldSort, onSort: setHeldSort })) : (_jsx(LumenSavedWidget, { widget: c, title: cardTitle(c, config.name), domain: domain, rows: narrow(rows, followed(c.id)), link: cardLink(c.id, followed(c.id)), fields: widgetFields, merge: mergeFlat, onDetails: onDetails, load: scope(c.id, load), tiles: 'tile' in c
                     ? cardOf(c)
@@ -607,10 +608,12 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
             } })) : (onConfigChange && (_jsxs(_Fragment, { children: [changed && saveMode === 'document' && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: Undo2Icon, label: "Revert view", onClick: revert }), _jsx(IconButton, { icon: SaveIcon, label: "Save view (chips, sort, group)", variant: "default", onClick: () => onConfigChange?.(heldConfig) })] })), _jsx(IconButton, { icon: LayoutDashboardIcon, label: "Edit layout", onClick: () => {
                         setDraft(saved);
                         setLayout(true);
-                    } })] }))), children: [_jsx(LinksProvider, { links: links, children: _jsx(Scroller, { fit: fit, children: body }) }), _jsx(LumenDrawer, { open: open !== null, title: openTitle, onClose: () => setDetails(null), children: open !== null && (_jsx(DetailsBody, { domain: domain, row: open, columns: columns, chips: config.chips ?? [] })) }), onConfigChange && (_jsxs(_Fragment, { children: [_jsx(AddWidgetDialog, { open: adding, onOpenChange: setAdding, domain: domain, cards: cards, onAdd: (c) => {
+                    } })] }))), children: [_jsx(LinksProvider, { links: links, children: _jsx(Scroller, { fit: fit, children: body }) }), _jsx(LumenDrawer, { open: open !== null, title: openTitle, onClose: () => setDetails(null), children: open !== null && (_jsx(DetailsBody, { domain: domain, row: open, columns: columns, chips: config.chips ?? [] })) }), onConfigChange && (_jsxs(_Fragment, { children: [_jsx(AddWidgetDialog, { open: adding, onOpenChange: setAdding, domain: domain, cards: cards, name: config.name, onAdd: (c) => {
                             setAdding(false);
                             // A second table starts as a copy of the view's layout, then goes its own way.
-                            putCard(isTableCard(c) && mainTable ? { ...c, table: tableLayoutOf(config) } : c);
+                            putCard(isTableCard(c) && mainTable && !c.source
+                                ? { ...c, table: tableLayoutOf(config) }
+                                : c);
                         }, onBuild: (c) => {
                             setAdding(false);
                             if (c.kind !== 'page')

package/dist/lumen-widget.d.ts

@@ -144,11 +144,13 @@ export declare function draftOf<T>(styleId: string, domain: ViewDomain<T>, cards
  *  of $1 a domain that draws curves. */
 export declare function useOffered<T>(domain: ViewDomain<T>): (styleId: string) => boolean;
 /** Add widget: the domain's pre-built widgets, or a kind to build. */
-export declare function AddWidgetDialog<T>({ open, onOpenChange, domain, cards, onAdd, onBuild, }: {
+export declare function AddWidgetDialog<T>({ open, onOpenChange, domain, cards, onAdd, onBuild, name, }: {
     open: boolean;
     onOpenChange: (o: boolean) => void;
     domain: ViewDomain<T>;
     cards: ViewCard[];
+    /** The page's name, for the data picker's "this page" row. */
+    name?: string;
     /** Adds a ready card (a pre-built widget, or the view's tiles or the view itself). */
     onAdd: (card: ViewCard) => void;
     /** Opens Edit widget on a new card of a kind. */
@@ -175,6 +177,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "table";
@@ -230,6 +240,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "table";
@@ -257,6 +275,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "metric";
@@ -325,6 +351,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "metric";
@@ -387,6 +421,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     w: number;
@@ -416,6 +458,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "allocation";
@@ -443,6 +493,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "allocation";
@@ -470,6 +528,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "allocation";
@@ -500,6 +566,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "chart";
@@ -527,6 +601,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "chart";
@@ -552,6 +634,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "chart";
@@ -577,6 +667,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     w: number;
@@ -606,6 +704,14 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "page";

package/dist/lumen-widget.js

@@ -7,7 +7,7 @@ import { OUTLOOK_INDEXES, marketWindows, } from '@columenlabs/lumen-ui-types/mar
 // cards out; this file draws the card frame every card shares (its header, ↻ and ⋯ menu), each
 // widget, the Edit layout bar, Add widget (Pre-built and Build your own) and Edit widget.
 import { ALLOCATION_MAX, VIEW_CARD_KIND_NAMES, WIDGET_STYLES, controlOn, isDollarFormat, isRowCard, isTableCard, trendBuckets, viewCardKinds, viewCardSchema, viewWidgetCatalog, widgetStyleId, widgetStyleOf, } from '@columenlabs/lumen-ui-types/views';
-import { ActivityIcon, ArrowDownIcon, ArrowUpIcon, BarChart3Icon, CandlestickChartIcon, ChartLineIcon, ChartPieIcon, CheckIcon, CodeIcon, CopyIcon, EyeOffIcon, FoldVerticalIcon, FunnelIcon, GripVerticalIcon, InfoIcon, LayoutGridIcon, ListOrderedIcon, MoreHorizontalIcon, PackageIcon, PencilIcon, PlusIcon, RotateCcwIcon, Rows3Icon, SparklesIcon, SquareIcon, TableIcon, Trash2Icon, TrendingUpIcon, WrenchIcon, XIcon, } from 'lucide-react';
+import { ActivityIcon, ArrowDownIcon, ArrowUpIcon, BarChart3Icon, CandlestickChartIcon, ChartLineIcon, ChartPieIcon, CheckIcon, CodeIcon, CopyIcon, DatabaseIcon, EyeOffIcon, FoldVerticalIcon, FunnelIcon, GripVerticalIcon, InfoIcon, LayoutGridIcon, ListOrderedIcon, MoreHorizontalIcon, PackageIcon, PencilIcon, PlusIcon, RotateCcwIcon, Rows3Icon, SparklesIcon, SquareIcon, TableIcon, Trash2Icon, TrendingUpIcon, WrenchIcon, XIcon, } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useAssistant, useAssistantName } from './assistant-context.js';
 import { LumenConfirm } from './confirm.js';
@@ -15,6 +15,7 @@ import { FoldChevron, useFolded, usePageKey } from './fold.js';
 import { GrowthChart } from './growth-chart.js';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
+import { useDomainReads } from './joins.js';
 import { cn } from './lib/utils.js';
 import { LumenBoundary } from './lumen-boundary.js';
 import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
@@ -48,6 +49,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
 import { fieldOptions } from './view-formulas.js';
 import { computedOf, label, summaryCash, } from './view-model.js';
 import { WidgetControlsEditor } from './widget-controls.js';
+import { PAGE_SOURCE, useWidgetDataOptions } from './widget-data.js';
 import { dateFields } from './widget-settings.js';
 /** Each style's icon, by its id in `WIDGET_STYLES`; a style left out takes its kind's. */
 const STYLE_ICONS = {
@@ -513,13 +515,26 @@ function PickCard({ icon: Icon, name, note, added, disabled, onClick, }) {
     return (_jsxs(Button, { variant: "outline", disabled: disabled, onClick: onClick, className: "h-auto justify-start gap-3 p-3 text-left font-normal whitespace-normal", children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-md bg-primary/10 text-primary", children: _jsx(Icon, { className: "size-4" }) }), _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "font-medium", children: name }), _jsx("span", { className: "text-xs text-muted-foreground", children: note })] }), added && (_jsxs(Badge, { variant: "secondary", className: "ml-auto font-normal", children: [_jsx(CheckIcon, {}), " Added"] }))] }));
 }
 /** Add widget: the domain's pre-built widgets, or a kind to build. */
-export function AddWidgetDialog({ open, onOpenChange, domain, cards, onAdd, onBuild, }) {
-    const catalog = viewWidgetCatalog[domain.id] ?? [];
+export function AddWidgetDialog({ open, onOpenChange, domain, cards, onAdd, onBuild, name = 'This page', }) {
+    // Step 1: the widget's main data, this page's rows unless another is picked.
+    const [data, setData] = useState(PAGE_SOURCE);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: starts on this page each time it opens.
+    useEffect(() => setData(PAGE_SOURCE), [open]);
+    const pageLabel = `${name} (this page)`;
+    const dataOptions = useWidgetDataOptions(open, pageLabel);
+    const own = data !== PAGE_SOURCE;
+    const ids = useMemo(() => (own ? [data] : []), [own, data]);
+    const read = useDomainReads(ids, ids)[data];
+    const shapeDomain = (own ? (read?.domain ?? { id: data, rowKey: String, fields: [] }) : domain);
+    const sourced = (c) => (own ? { ...c, source: data } : c);
+    const catalog = own ? [] : (viewWidgetCatalog[domain.id] ?? []);
     const keys = new Set(domain.fields.map((f) => f.key));
-    const hasRow = cards.some(isRowCard);
+    const hasRow = !own && cards.some(isRowCard);
     const full = cards.length >= 12;
-    const offered = useOffered(domain);
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-2xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add widget" }), _jsxs(DialogDescription, { children: ["Widgets use this view's rows and their own filter", full ? '. A page holds 12 cards at most.' : '.'] })] }), _jsxs(Tabs, { defaultValue: catalog.length ? 'prebuilt' : 'own', children: [_jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "prebuilt", children: [_jsx(PackageIcon, {}), "Pre-built"] }), _jsxs(TabsTrigger, { value: "own", children: [_jsx(WrenchIcon, {}), "Build your own"] })] }), _jsx(TabsContent, { value: "prebuilt", className: dialogBody, children: catalog.length ? (_jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: catalog.map((it) => {
+    const offered = useOffered(shapeDomain);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-2xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add widget" }), _jsxs(DialogDescription, { children: ["Pick its data, then its shape", full ? '. A page holds 12 cards at most.' : '.'] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "add-widget-data", className: "text-xs font-medium text-muted-foreground", children: "Data" }), _jsx(LumenSelector, { id: "add-widget-data", icon: DatabaseIcon, label: "Widget data", search: true, value: data, options: dataOptions, onChange: setData }), own && read?.state !== 'ok' && (_jsx("p", { className: cn('text-xs', read?.state === 'loading' || !read ? 'text-muted-foreground' : 'text-destructive'), children: read?.state === 'loading' || !read
+                                ? 'Reading its fields…'
+                                : (read.detail ?? 'Its rows could not be read.') }))] }), _jsxs(Tabs, { defaultValue: catalog.length ? 'prebuilt' : 'own', children: [_jsxs(TabsList, { children: [!own && (_jsxs(TabsTrigger, { value: "prebuilt", children: [_jsx(PackageIcon, {}), "Pre-built"] })), _jsxs(TabsTrigger, { value: "own", children: [_jsx(WrenchIcon, {}), "Build your own"] })] }), _jsx(TabsContent, { value: "prebuilt", className: dialogBody, children: catalog.length ? (_jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: catalog.map((it) => {
                                     const added = cards.some((b) => b.id === it.widget.id);
                                     const fits = [
                                         ...('by' in it.widget ? [it.widget.by, it.widget.value] : []),
@@ -536,16 +551,16 @@ export function AddWidgetDialog({ open, onOpenChange, domain, cards, onAdd, onBu
                                                 // A table goes on as it is; the page's first row of numbers shows the
                                                 // view's cards, any other starts empty in Edit widget.
                                                 const ready = w.id === 'table:table' || (w.id === 'metric:row' && !hasRow);
-                                                return (_jsx(PickCard, { icon: cardIcon(w), name: w.name, note: w.note, disabled: full, onClick: () => ready
-                                                        ? onAdd(draftOf(w.id, domain, cards))
-                                                        : onBuild(w.id === 'metric:row'
+                                                return (_jsx(PickCard, { icon: cardIcon(w), name: w.name, note: w.note, disabled: full || (own && read?.state !== 'ok'), onClick: () => ready
+                                                        ? onAdd(sourced(draftOf(w.id, shapeDomain, cards)))
+                                                        : onBuild(sourced(w.id === 'metric:row'
                                                             ? viewCardSchema.parse({
-                                                                ...draftOf(w.id, domain, cards),
+                                                                ...draftOf(w.id, shapeDomain, cards),
                                                                 tiles: [],
                                                             })
-                                                            : draftOf(w.id, domain, cards)) }, w.id));
+                                                            : draftOf(w.id, shapeDomain, cards))) }, w.id));
                                             }) })] }, kind));
-                            }) })] })] }) }));
+                            }) })] }, data)] }) }));
 }
 /** A page's cards after `action` on card `i`, or null for Edit (the caller opens a dialog). */
 export function cardsAfter(cards, i, action) {

package/dist/sourced-card.d.ts

@@ -0,0 +1,10 @@
+import { type ViewWidget } from '@columenlabs/lumen-ui-types/views';
+import { type CardControls } from './lumen-widget.js';
+export declare function SourcedCard({ card, name, controls, }: {
+    card: ViewWidget & {
+        source: string;
+    };
+    /** The page's name, for a widget with no title of its own. */
+    name: string;
+    controls?: CardControls;
+}): import("react").JSX.Element;

package/dist/sourced-card.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// A widget with its own main data (`source` on the card): it reads that domain or recipe itself
+// (the same reads a link uses), joins its own links, and draws like any widget over those rows. It
+// shares nothing of the page's rows; the page's chips reach it only by a key both carry.
+import { isRowCard, isTableCard, sourceConfigOf, tilesOfCard, } from '@columenlabs/lumen-ui-types/views';
+import { useMemo } from 'react';
+import { useDomainReads, useJoins } from './joins.js';
+import { filterByTokens } from './lumen-filter.js';
+import { followedBy, followsText, keyFilterFields, useLinks } from './lumen-links.js';
+import { mergeRows } from './lumen-view.js';
+import { LumenViewCard } from './lumen-view-card.js';
+import { LumenSavedWidget, cardFilterFields, cardTitle } from './lumen-widget.js';
+import { LumenCard, SummaryTiles } from './summary-cards.js';
+import { summaryCash, withViewFields } from './view-model.js';
+/** A source read's state as the card's loading state. */
+function loadOf(state, detail, label) {
+    const failed = state === 'failed' || state === 'off';
+    return {
+        loading: state === 'loading',
+        fetching: state === 'loading',
+        refreshing: false,
+        background: false,
+        error: failed ? new Error(`${label}: ${detail ?? 'could not be read'}`) : null,
+        stale: null,
+        refresh: async () => { },
+        tookMs: null,
+        cached: false,
+        at: null,
+    };
+}
+export function SourcedCard({ card, name, controls, }) {
+    const ids = useMemo(() => [card.source], [card.source]);
+    const read = useDomainReads(ids, ids)[card.source];
+    const base = (read?.domain ?? {
+        id: card.source,
+        rowKey: String,
+        fields: [],
+    });
+    const rows = (read?.rows ?? []);
+    const config = useMemo(() => sourceConfigOf(card, name), [card, name]);
+    const load = loadOf(read?.state ?? 'loading', read?.detail, read?.label ?? card.source);
+    if (isTableCard(card))
+        return (_jsx(LumenViewCard, { id: card.id, domain: base, config: config, rows: card.filter.length
+                ? filterByTokens(rows, cardFilterFields(base.fields), card.filter)
+                : rows, load: load, title: card.title ?? read?.label ?? name, controls: controls, shown: card.controls }));
+    return (_jsx(SourcedWidget, { card: card, base: base, rows: rows, load: load, label: read?.label ?? name, controls: controls }));
+}
+function SourcedWidget({ card, base, rows, load, label, controls, }) {
+    const config = useMemo(() => sourceConfigOf(card, label), [card, label]);
+    const joins = useJoins(base, rows, config);
+    const domain = useMemo(() => withViewFields(joins.domain, config), [joins.domain, config]);
+    const fields = useMemo(() => [...cardFilterFields(domain.fields), ...keyFilterFields(domain.keys)], [domain.fields, domain.keys]);
+    const links = useLinks();
+    const follows = followedBy(links?.follows(card.id) ?? [], fields, domain.keys);
+    const own = card.filter.length ? filterByTokens(rows, fields, card.filter, domain.text) : rows;
+    const drawn = follows.length ? filterByTokens(own, fields, follows, domain.text) : own;
+    const narrowed = card.filter.length > 0 || follows.length > 0;
+    const counted = domain.cash && !summaryCash(isRowCard(card) ? card : {}, narrowed)
+        ? drawn.filter((r) => !domain.cash?.(r))
+        : drawn;
+    const loading = load.loading;
+    return (_jsx(LumenSavedWidget, { widget: card, title: card.title ?? cardTitle(card, label), domain: domain, rows: drawn, link: links
+            ? {
+                color: links.colorOf(card.id),
+                onPick: (c) => links.setColor(card.id, c),
+                follows: followsText(follows),
+            }
+            : undefined, fields: fields, merge: (rs) => mergeRows(domain, rs, null), load: load, tiles: 'tile' in card ? (_jsx(LumenCard, { domain: domain, tile: card.tile, rows: counted, fields: fields, loading: loading, style: card.style, target: card.target, meter: card.meter, bands: card.bands })) : isRowCard(card) ? (_jsx(SummaryTiles, { domain: domain, tiles: tilesOfCard(config, card), rows: counted, fields: fields, loading: loading })) : null, controls: controls }));
+}

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 { 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, UnlinkIcon, 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(UnlinkIcon, { 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" })), _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: "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) })), 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/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,
+        })),
+    ];
+}

package/dist/widget-settings.d.ts

@@ -75,6 +75,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "table";
@@ -130,6 +138,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "table";
@@ -157,6 +173,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "metric";
@@ -225,6 +249,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "metric";
@@ -287,6 +319,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     w: number;
@@ -316,6 +356,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "allocation";
@@ -343,6 +391,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "allocation";
@@ -370,6 +426,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "allocation";
@@ -400,6 +464,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     kind: "chart";
@@ -424,6 +496,14 @@ export declare const readsRows: (card: ViewWidget) => card is {
         op?: "between" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
+    source?: string | undefined;
+    connections?: {
+        to: string;
+        on: {
+            from: string;
+            to: string;
+        }[];
+    }[] | undefined;
     link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
     w: number;

package/package.json

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