@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/widget-settings.js

@@ -0,0 +1,290 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Edit widget's own parts (one editor for every widget). Every widget opens the
+// same editor (view-editor.tsx): Widget (type, name, width, link colour), Fields, Settings, Rows,
+// Formulas, Controls, with the field tree beside it. A table's Fields are its columns; any other
+// widget's are its slots (By and Value, Date and Values, a card's number), which the tree fills the
+// same way it ticks a column. Settings are the picked style's own options. Switching the type
+// swaps only these two parts.
+import { OUTLOOK_INDEXES, marketWindows, } from '@columenlabs/lumen-ui-types/market';
+import { ALLOCATION_MAX, isOwnTile, isRowCard, isTableCard, trendBuckets, widgetStyleId, } from '@columenlabs/lumen-ui-types/views';
+import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';
+import { useState } from 'react';
+import { LumenSelector } from './lumen-selector.js';
+import { SummaryCardsEditor, summaryCardIssues } from './summary-cards.js';
+import { Input } from './ui/input.js';
+import { Label } from './ui/label.js';
+import { Switch } from './ui/switch.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { MAX_TILES, fieldOptions } from './view-formulas.js';
+/** A label beside its control, the same in every section of Edit widget. */
+export function EditorRow({ label, children }) {
+    return (_jsxs("div", { className: "grid grid-cols-[5rem_minmax(0,1fr)] items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: label }), _jsx("div", { className: "min-w-0", children: children })] }));
+}
+export const isTextField = (f) => f.format === 'text' && !f.render;
+export const isNumberField = (f) => f.format !== 'text' && !f.render;
+const DATE_LIKE = /(^|_)(date|day|at|time|month|week|year)($|_)/i;
+/** A trend's date candidates: text fields, the date-like ones first. */
+export const dateFields = (domain) => {
+    // A rendered text field still reads its raw value (a report date drawn as Tue, Oct 20).
+    const texts = domain.fields.filter((f) => f.format === 'text');
+    return [
+        ...texts.filter((f) => DATE_LIKE.test(f.key)),
+        ...texts.filter((f) => !DATE_LIKE.test(f.key)),
+    ];
+};
+/** The most columns a Top N shows. */
+const TOP_N_COLUMNS = 8;
+/** How many values a trend draws, a spark or tracker one. */
+const TREND_VALUES = 4;
+/** A free Summary card key. */
+const freeTileKey = (tiles, taken) => {
+    let n = tiles.length + 1;
+    while (tiles.some((t) => t.key === `tile_${n}`) || taken.includes(`tile_${n}`))
+        n++;
+    return `tile_${n}`;
+};
+/** A widget's slots, in the order the editor lists them; none for a chart of symbols. */
+export function widgetSlots(card, domain) {
+    const label = (k) => domain.fields.find((f) => f.key === k)?.label ?? k;
+    const text = { accepts: isTextField, why: 'Takes a text field' };
+    const number = { accepts: isNumberField, why: 'Takes a number' };
+    if ('by' in card)
+        return [
+            {
+                id: 'by',
+                label: 'By',
+                max: 1,
+                ...text,
+                keys: [card.by],
+                set: ([by]) => ({ ...card, by: by ?? card.by }),
+            },
+            {
+                id: 'value',
+                label: 'Value',
+                max: 1,
+                ...number,
+                keys: [card.value],
+                set: ([value]) => ({ ...card, value: value ?? card.value }),
+            },
+        ];
+    if (card.kind === 'table')
+        return [
+            {
+                id: 'columns',
+                label: 'Columns',
+                max: TOP_N_COLUMNS,
+                accepts: (f) => !f.render,
+                why: 'Drawn by the page only',
+                keys: card.columns,
+                set: (columns) => (columns.length ? { ...card, columns } : card),
+            },
+            {
+                id: 'sort',
+                label: 'Sort by',
+                max: 1,
+                accepts: (f) => !f.render,
+                why: 'Drawn by the page only',
+                keys: [card.sort],
+                set: ([sort]) => ({ ...card, sort: sort ?? card.sort }),
+            },
+        ];
+    if ('date' in card) {
+        const one = card.style === 'spark' || card.style === 'tracker';
+        const dates = new Set(dateFields(domain).map((f) => f.key));
+        return [
+            {
+                id: 'date',
+                label: 'Date',
+                max: 1,
+                accepts: (f) => dates.has(f.key),
+                why: 'Takes a date',
+                keys: [card.date],
+                set: ([date]) => ({ ...card, date: date ?? card.date }),
+            },
+            {
+                id: 'values',
+                label: 'Values',
+                max: one ? 1 : TREND_VALUES,
+                ...number,
+                keys: card.values,
+                set: (values) => (values.length ? { ...card, values } : card),
+            },
+        ];
+    }
+    if ('tile' in card) {
+        const t = card.tile;
+        return [
+            {
+                id: 'number',
+                label: 'Number',
+                max: 1,
+                ...number,
+                keys: isOwnTile(t) ? [t.field] : [],
+                set: ([field]) => field
+                    ? {
+                        ...card,
+                        tile: isOwnTile(t)
+                            ? { ...t, field }
+                            : {
+                                key: t.key,
+                                label: label(field),
+                                field,
+                                agg: 'sum',
+                                filter: [],
+                                sign: false,
+                                lines: [],
+                            },
+                    }
+                    : card,
+            },
+        ];
+    }
+    if (isRowCard(card)) {
+        const tiles = card.tiles ?? [];
+        const builtIns = (domain.tiles ?? []).map((w) => w.key);
+        return [
+            {
+                id: 'cards',
+                label: 'Cards',
+                max: MAX_TILES,
+                ...number,
+                keys: tiles.filter(isOwnTile).map((t) => t.field),
+                // A field ticked adds a card of its sum; one unticked takes its cards out.
+                set: (keys) => {
+                    const kept = tiles.filter((t) => !isOwnTile(t) || keys.includes(t.field));
+                    const next = [...kept];
+                    for (const field of keys) {
+                        if (next.some((t) => isOwnTile(t) && t.field === field))
+                            continue;
+                        next.push({
+                            key: freeTileKey(next, builtIns),
+                            label: label(field),
+                            field,
+                            agg: 'sum',
+                            filter: [],
+                            sign: false,
+                            lines: [],
+                        });
+                    }
+                    return { ...card, tiles: next };
+                },
+            },
+        ];
+    }
+    return [];
+}
+/** A slot's keys after the tree ticks or unticks `key`: one replaces, a list adds up to its max. */
+export function slotKeys(slot, key, on) {
+    if (slot.max === 1)
+        return on ? [key] : slot.keys;
+    if (!on)
+        return slot.keys.filter((k) => k !== key);
+    return slot.keys.length < slot.max ? [...slot.keys, key] : slot.keys;
+}
+/**
+ * Fields: each slot as a picker (the tree beside fills the same ones), a number card's or a
+ * Summary's cards, or a chart's symbols.
+ */
+export function WidgetFields({ card, set, domain, rows, fields, }) {
+    const [symbols, setSymbols] = useState(card.kind === 'chart' && card.style === 'market' ? card.symbols.join(', ') : '');
+    const keys = domain.fields.map((f) => f.key);
+    const domainTiles = (domain.tiles ?? []).map((w) => w.key);
+    if ('tile' in card)
+        return (_jsx(SummaryCardsEditor, { one: true, domain: domain, tiles: [card.tile], onChange: (tiles) => {
+                const tile = tiles[tiles.length - 1];
+                if (tile)
+                    set({ ...card, tile });
+            }, rows: rows, fields: fields, problems: summaryCardIssues([card.tile], keys, domainTiles) }));
+    if (isRowCard(card))
+        return (_jsx(SummaryCardsEditor, { domain: domain, tiles: card.tiles ?? [], onChange: (tiles) => set({ ...card, tiles }), rows: rows, fields: fields, problems: summaryCardIssues(card.tiles ?? [], keys, domainTiles) }));
+    if (card.kind === 'chart' && card.style === 'market')
+        return (_jsx(EditorRow, { label: "Symbols", children: _jsx(Input, { "aria-label": "Symbols, comma separated", value: symbols, placeholder: OUTLOOK_INDEXES.join(', '), onChange: (e) => {
+                    setSymbols(e.target.value);
+                    const list = [
+                        ...new Set(e.target.value
+                            .toUpperCase()
+                            .split(/[\s,]+/)
+                            .filter(Boolean)),
+                    ];
+                    if (list.length)
+                        set({ ...card, symbols: list });
+                } }) }));
+    if (card.kind === 'chart' && card.style === 'price')
+        return (_jsx(EditorRow, { label: "Symbol", children: _jsx(Input, { "aria-label": "Symbol", value: card.symbol, placeholder: "SPX", onChange: (e) => set({ ...card, symbol: e.target.value.trim().toUpperCase() }) }) }));
+    const slots = widgetSlots(card, domain);
+    if (!slots.length)
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "It draws each shown row's own curve." });
+    return (_jsx("div", { className: "flex max-w-xl flex-col gap-3", children: slots.map((s) => (_jsx(EditorRow, { label: s.label, children: _jsx(LumenSelector, { label: s.label, size: "sm", className: "w-full min-w-0", placeholder: "Pick a field", options: fieldOptions(domain.fields.filter(s.accepts), domain), ...(s.max === 1
+                    ? {
+                        value: s.keys[0] ?? '',
+                        onChange: (k) => set(s.set([k])),
+                    }
+                    : {
+                        multiple: true,
+                        max: s.max,
+                        value: s.keys,
+                        onChange: (ks) => set(s.set(ks)),
+                    }) }) }, s.id))) }));
+}
+const NO_SPLIT = '__none';
+const BUCKET_NAMES = {
+    day: 'Day',
+    week: 'Week',
+    month: 'Month',
+    year: 'Year',
+};
+const TREND_AGGS = [
+    ['sum', 'Sum'],
+    ['mean', 'Average'],
+    ['last', 'Last'],
+    ['count', 'Count'],
+];
+/** The most slices a donut or a bar shows on their own; the most rows a list ranks. */
+const MAX_SLICES = { donut: 12, bar: 50 };
+const MAX_RANKED = { bar_list: 30, top_n: 50 };
+function Choice({ label, value, options, onChange, }) {
+    return (_jsx(ToggleGroup, { type: "single", size: "sm", variant: "outline", spacing: 0, value: value, onValueChange: (v) => v && onChange(v), "aria-label": label, className: "flex-wrap justify-self-start", children: options.map(([v, l]) => (_jsx(ToggleGroupItem, { value: v, className: "px-2.5", children: l }, v))) }));
+}
+const ORDERS = [
+    [
+        'desc',
+        _jsxs("span", { className: "contents", children: [_jsx(ArrowDownIcon, {}), " Largest"] }, "desc"),
+    ],
+    [
+        'asc',
+        _jsxs("span", { className: "contents", children: [_jsx(ArrowUpIcon, {}), " Smallest"] }, "asc"),
+    ],
+];
+/** Whether a widget has Settings of its own. */
+export const hasWidgetSettings = (card) => !(card.kind === 'metric' && (card.style === 'number' || card.style === 'row'));
+/** Settings: the picked style's own options. */
+export function WidgetSettings({ card, set, domain, }) {
+    const sid = widgetStyleId(card);
+    const texts = domain.fields.filter(isTextField);
+    return (_jsxs("div", { className: "flex max-w-xl flex-col gap-3", children: [card.kind === 'allocation' && card.style !== 'bar_list' && (_jsx(EditorRow, { label: "Slices", children: _jsx(Input, { "aria-label": "Slices (the rest are Other)", type: "number", className: "w-24", min: 2, max: MAX_SLICES[card.style], value: card.max ?? ALLOCATION_MAX, onChange: (e) => set({ ...card, max: Number(e.target.value) }) }) })), (sid === 'allocation:bar_list' || sid === 'table:top_n') && 'n' in card && (_jsxs(_Fragment, { children: [_jsx(EditorRow, { label: "Order", children: _jsx(Choice, { label: "Order", value: card.desc ? 'desc' : 'asc', options: ORDERS, onChange: (v) => set({ ...card, desc: v === 'desc' }) }) }), _jsx(EditorRow, { label: sid === 'allocation:bar_list' ? 'Bars' : 'Rows', children: _jsx(Input, { "aria-label": "How many", type: "number", className: "w-24", min: 1, max: sid === 'allocation:bar_list' ? MAX_RANKED.bar_list : MAX_RANKED.top_n, value: card.n, onChange: (e) => set({ ...card, n: Number(e.target.value) }) }) })] })), card.kind === 'allocation' && card.style === 'bar_list' && (_jsxs(_Fragment, { children: [_jsx(EditorRow, { label: "Colour", children: _jsxs(Label, { className: "flex items-center gap-2 font-normal", children: [_jsx(Switch, { checked: card.signed, onCheckedChange: (signed) => set({ ...card, signed, ...(signed ? { stack: undefined } : {}) }) }), "Gains green, losses red"] }) }), !card.signed && (_jsx(EditorRow, { label: "Split by", children: _jsx(LumenSelector, { label: "Split each bar by", size: "sm", className: "w-full min-w-0", options: [
+                                { value: NO_SPLIT, label: 'No split' },
+                                ...fieldOptions(texts.filter((f) => f.key !== card.by), domain),
+                            ], value: card.stack ?? NO_SPLIT, onChange: (v) => set({ ...card, stack: v === NO_SPLIT ? undefined : v }) }) }))] })), card.kind === 'chart' && card.style === 'market' && (_jsx(EditorRow, { label: "Style", children: _jsx(Choice, { label: "Style", value: card.layout, options: [
+                        ['lines', 'One chart'],
+                        ['tiles', 'A widget each'],
+                        ['today', 'Up or down today'],
+                    ], onChange: (layout) => set({ ...card, layout }) }) })), card.kind === 'chart' && card.style === 'price' && (_jsxs(_Fragment, { children: [_jsx(EditorRow, { label: "Window", children: _jsx(Choice, { label: "Window", value: card.window, options: marketWindows.map((w) => [w, w]), onChange: (window) => set({ ...card, window }) }) }), _jsx(EditorRow, { label: "Type", children: _jsx(Choice, { label: "Chart type", value: card.type, options: [
+                                ['line', 'Line'],
+                                ['candles', 'Candles'],
+                            ], onChange: (type) => set({ ...card, type }) }) })] })), card.kind === 'chart' && card.style === 'growth' && (_jsx(EditorRow, { label: "Scale", children: _jsx(Choice, { label: "Scale", value: card.scale, options: [
+                        ['log', 'Log'],
+                        ['linear', 'Linear'],
+                    ], onChange: (scale) => set({ ...card, scale }) }) })), 'date' in card && (_jsxs(_Fragment, { children: [_jsx(EditorRow, { label: "Each", children: _jsx(Choice, { label: "Each", value: card.bucket, options: trendBuckets.map((b) => [b, BUCKET_NAMES[b]]), onChange: (bucket) => set({ ...card, bucket }) }) }), _jsx(EditorRow, { label: "Roll up", children: _jsx(Choice, { label: "Roll up", value: card.agg, options: TREND_AGGS, onChange: (agg) => set({ ...card, agg }) }) })] })), 'tile' in card && card.style !== 'number' && (_jsx(EditorRow, { label: "Target", children: _jsx(Input, { "aria-label": "Target (the bar's 100%)", type: "number", min: 0, value: card.target ?? '', placeholder: "The bar's 100%", onChange: (e) => {
+                        const n = Number(e.target.value);
+                        set({ ...card, target: e.target.value && n > 0 ? n : undefined });
+                    } }) })), 'tile' in card && card.style !== 'number' && (_jsx(EditorRow, { label: "Colour", children: _jsx(Choice, { label: "Colour by meaning", value: card.meter ?? 'none', options: METER_CHOICES, onChange: (m) => set({ ...card, meter: m === 'none' ? undefined : m }) }) }))] }));
+}
+/** A progress card's colour: plain, health (better high) or usage (better low). */
+const METER_CHOICES = [
+    ['none', 'Plain'],
+    ['health', 'Health: 100% green'],
+    ['usage', 'Usage: 75% orange, 90% red'],
+];
+/** Whether a widget reads the view's rows (a chart of symbols reads its own data). */
+export const readsRows = (card) => isTableCard(card) ||
+    !(card.kind === 'chart' && (card.style === 'market' || card.style === 'price'));

package/dist/widget-thumbs.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+/** A style's thumbnail (`WIDGET_STYLES` id); a style with none draws nothing. */
+export declare const widgetThumb: (id: string) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/dist/widget-thumbs.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const C1 = 'var(--chart-1)';
+const C2 = 'var(--chart-2)';
+const C3 = 'var(--chart-3)';
+const MUTED = 'var(--muted-foreground)';
+const box = (children) => (_jsxs("svg", { viewBox: "0 0 40 28", className: "h-7 w-10 rounded-[4px] bg-muted/60", "aria-hidden": true, focusable: "false", children: [_jsx("title", { children: "Widget style" }), children] }));
+const line = (d, stroke = C1) => (_jsx("path", { d: d, fill: "none", stroke: stroke, strokeWidth: 1.6, strokeLinecap: "round" }));
+const THUMBS = {
+    top_n: box([6, 12, 18].map((y) => (_jsxs("g", { children: [_jsx("rect", { x: 5, y: y, width: 16, height: 3, rx: 1, fill: MUTED, opacity: 0.6 }), _jsx("rect", { x: 26, y: y, width: 9, height: 3, rx: 1, fill: C1 })] }, y)))),
+    card: box(_jsxs(_Fragment, { children: [_jsx("rect", { x: 6, y: 7, width: 20, height: 6, rx: 1.5, fill: C1 }), _jsx("rect", { x: 6, y: 17, width: 14, height: 3, rx: 1, fill: MUTED, opacity: 0.6 })] })),
+    tiles: box([4, 16, 28].map((x) => (_jsxs("g", { children: [_jsx("rect", { x: x, y: 9, width: 8, height: 5, rx: 1, fill: C1 }), _jsx("rect", { x: x, y: 17, width: 6, height: 2, rx: 1, fill: MUTED, opacity: 0.6 })] }, x)))),
+    'card:progress_bar': box(_jsxs(_Fragment, { children: [_jsx("rect", { x: 6, y: 7, width: 14, height: 5, rx: 1.5, fill: C1 }), _jsx("rect", { x: 6, y: 17, width: 28, height: 3, rx: 1.5, fill: MUTED, opacity: 0.3 }), _jsx("rect", { x: 6, y: 17, width: 19, height: 3, rx: 1.5, fill: C1 })] })),
+    'card:progress_circle': box(_jsxs(_Fragment, { children: [_jsx("circle", { cx: 20, cy: 14, r: 8, fill: "none", stroke: MUTED, strokeOpacity: 0.3, strokeWidth: 3 }), _jsx("path", { d: "M20 6 A8 8 0 1 1 12.4 16.5", fill: "none", stroke: C1, strokeWidth: 3 })] })),
+    'trend:spark': box(_jsxs(_Fragment, { children: [_jsx("rect", { x: 5, y: 5, width: 12, height: 5, rx: 1.5, fill: C1 }), line('M5 22 L12 19 L18 21 L25 15 L30 17 L35 12')] })),
+    'trend:tracker': box([0, 1, 2, 3, 4, 5, 6, 7].map((i) => (_jsx("rect", { x: 4 + i * 4, y: 10, width: 3, height: 8, rx: 0.8, fill: i === 2 || i === 5 ? 'var(--loss)' : 'var(--gain)' }, i)))),
+    allocation: box(_jsxs(_Fragment, { children: [_jsx("rect", { x: 4, y: 11, width: 14, height: 6, rx: 1.5, fill: C1 }), _jsx("rect", { x: 19, y: 11, width: 9, height: 6, rx: 1.5, fill: C2 }), _jsx("rect", { x: 29, y: 11, width: 7, height: 6, rx: 1.5, fill: C3 })] })),
+    donut: box(_jsxs(_Fragment, { children: [_jsx("circle", { cx: 20, cy: 14, r: 8, fill: "none", stroke: C2, strokeWidth: 4 }), _jsx("path", { d: "M20 6 A8 8 0 0 1 27.6 16.5", fill: "none", stroke: C1, strokeWidth: 4 })] })),
+    bars: box(_jsxs(_Fragment, { children: [_jsx("rect", { x: 5, y: 6, width: 28, height: 3.5, rx: 1.5, fill: C1 }), _jsx("rect", { x: 5, y: 12, width: 20, height: 3.5, rx: 1.5, fill: C1, opacity: 0.75 }), _jsx("rect", { x: 5, y: 18, width: 12, height: 3.5, rx: 1.5, fill: C1, opacity: 0.5 })] })),
+    'trend:line': box(_jsxs(_Fragment, { children: [line('M5 21 L12 16 L18 18 L25 10 L35 7'), line('M5 23 L14 21 L22 22 L30 17 L35 18', C2)] })),
+    'trend:area': box(_jsxs(_Fragment, { children: [_jsx("path", { d: "M5 21 L12 15 L19 17 L26 9 L35 7 L35 24 L5 24 Z", fill: C1, opacity: 0.25 }), line('M5 21 L12 15 L19 17 L26 9 L35 7')] })),
+    'trend:stacked': box(_jsxs(_Fragment, { children: [_jsx("path", { d: "M5 24 L5 19 L14 17 L24 18 L35 14 L35 24 Z", fill: C2, opacity: 0.5 }), _jsx("path", { d: "M5 19 L14 17 L24 18 L35 14 L35 8 L24 11 L14 9 L5 13 Z", fill: C1, opacity: 0.5 })] })),
+    'trend:bars': box([6, 12, 18, 24, 30].map((x, i) => (_jsx("rect", { x: x, y: 24 - ([8, 12, 9, 15, 13][i] ?? 0), width: 4, height: [8, 12, 9, 15, 13][i], rx: 1, fill: C1 }, x)))),
+    'trend:combo': box(_jsxs(_Fragment, { children: [[6, 13, 20, 27].map((x, i) => (_jsx("rect", { x: x, y: 24 - ([7, 10, 8, 12][i] ?? 0), width: 5, height: [7, 10, 8, 12][i], rx: 1, fill: C1, opacity: 0.6 }, x))), line('M7 12 L15 9 L22 11 L30 6', C2)] })),
+    chart: box([8, 14, 20, 26, 32].map((x, i) => (_jsxs("g", { children: [_jsx("path", { d: `M${x} ${[8, 10, 6, 9, 5][i]} V${[20, 21, 17, 20, 15][i]}`, stroke: MUTED, strokeWidth: 0.8 }), _jsx("rect", { x: x - 1.5, y: [11, 13, 9, 12, 8][i], width: 3, height: 5, fill: i % 2 ? 'var(--loss)' : 'var(--gain)' })] }, x)))),
+    growth: box(_jsxs(_Fragment, { children: [line('M5 22 Q16 20 22 14 T35 6'), line('M5 22 Q18 21 26 18 T35 15', MUTED)] })),
+    market: box(_jsxs(_Fragment, { children: [_jsx("rect", { x: 4, y: 6, width: 15, height: 16, rx: 2, fill: "none", stroke: MUTED, strokeOpacity: 0.5 }), _jsx("rect", { x: 21, y: 6, width: 15, height: 16, rx: 2, fill: "none", stroke: MUTED, strokeOpacity: 0.5 }), line('M6 18 L10 14 L13 16 L17 10'), line('M23 12 L27 16 L30 14 L34 18', 'var(--loss)')] })),
+};
+/** A style's thumbnail (`WIDGET_STYLES` id); a style with none draws nothing. */
+export const widgetThumb = (id) => THUMBS[id] ?? null;

package/dist/workspace-keys.d.ts

@@ -0,0 +1,12 @@
+import type { WorkspaceSummary } from '@columenlabs/lumen-ui-types/workspaces';
+/** Every workspace query's key starts here: the assistant's tab moves invalidate them all. */
+export declare const WORKSPACES_KEY: readonly ['workspaces'];
+/** A frame's rows; a remade frame invalidates it. */
+export declare const frameKey: (api: string, id: string) => string[];
+/** The workspaces as the sidebar and the @ picker list them. */
+export declare const workspacesListQuery: (api: string) => {
+    queryKey: string[];
+    queryFn: () => Promise<{
+        workspaces: WorkspaceSummary[];
+    }>;
+};

package/dist/workspace-keys.js

@@ -0,0 +1,13 @@
+import { apiJson } from './api-fetch.js';
+// Query keys of frames and the workspaces that show them, shared by every card that attaches a
+// frame, a product's workspace page and its assistant (whose tab moves and remade frames
+// invalidate them).
+/** Every workspace query's key starts here: the assistant's tab moves invalidate them all. */
+export const WORKSPACES_KEY = ['workspaces'];
+/** A frame's rows; a remade frame invalidates it. */
+export const frameKey = (api, id) => [...WORKSPACES_KEY, api, 'frame', id];
+/** The workspaces as the sidebar and the @ picker list them. */
+export const workspacesListQuery = (api) => ({
+    queryKey: [...WORKSPACES_KEY, api, 'list'],
+    queryFn: () => apiJson(`${api}/workspaces`, {}, 'workspaces.list'),
+});

package/dist/workspaces.d.ts

@@ -0,0 +1,57 @@
+import { type CustomViewConfig } from '@columenlabs/lumen-ui-types/views';
+import { type ComponentType, type ReactNode } from 'react';
+import { type Crumb } from './page.js';
+type Icon = ComponentType<{
+    className?: string;
+}>;
+/** An app a workspace can belong to (the product's apps). */
+export interface WorkspaceApp {
+    id: string;
+    label: string;
+    /** Its address; a workspace there is at `${href}workspaces/<id>`. */
+    href: string;
+    icon?: Icon;
+}
+/** What the product tells its workspaces; every field may be left out by a one-app product. */
+export interface WorkspacesConfig {
+    /** The apps a workspace may move to that this person can open, this one included. */
+    apps?: WorkspaceApp[];
+    /** What the product calls an app: e.g. `desk`. */
+    appNoun?: string;
+    /** Which app draws a tab over a domain; one it does not say is this app's. */
+    domainApp?: (domain: string) => string | undefined;
+    /** A domain tab's starting layout. */
+    defaultConfig?: (domain: string) => CustomViewConfig | null;
+    /** The empty workspace's example ask, on an app: `put my holdings with their earnings dates in`. */
+    example?: (app: string) => string;
+}
+/** The product's apps and domains for its workspaces. */
+export declare const WorkspacesProvider: import("react").Provider<WorkspacesConfig>;
+/**
+ * Workspaces in the sidebar: one item per workspace, newest first; `+` starts an empty one, the
+ * trash icon deletes one (its frames stay until no tab shows them). Hidden where the app has no
+ * assistant.
+ */
+export declare function WorkspacesSection(): import("react").JSX.Element | null;
+/** What an app draws for a tab over one of its own domains, inside the workspace page. */
+export interface WorkspaceDraftProps {
+    domain: string;
+    /** The tab's layout: the person's and the assistant's edits, else the domain's default view. */
+    config: CustomViewConfig;
+    onChange: (config: CustomViewConfig) => void;
+    crumbs: Crumb[];
+    /** The tab row, drawn above the cards. */
+    intro: ReactNode;
+    actions: ReactNode;
+    tabKey: string;
+    /** A workspace tab is a sheet (rule C): chips, sort and grouping save at once. */
+    save: 'sheet';
+}
+/**
+ * `/workspaces/$id` on every app with an assistant. `draft` draws a tab over one of the app's own
+ * domains (an app passes its portfolio view); a tab over another app's domain links there.
+ */
+export declare function WorkspacePage({ draft }: {
+    draft?: (p: WorkspaceDraftProps) => ReactNode;
+}): import("react").JSX.Element;
+export {};