@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/index.js

@@ -0,0 +1,90 @@
+// Lumen (the whole component system is Lumen: published as
+// `@columenlabs/lumen-ui` for every app): the frame, page, status bar, sidebar building
+// blocks, preferences, filter, views, widgets, charts and drawers. Shadcn components it is built from
+// are under `@columenlabs/lumen-ui/ui/*`; an app's sidebar content must use these (not its own
+// copies) so it shares the shell's sidebar state. What one product adds (the product's assistant panel,
+// Tasks) lives in that product and plugs into the shell's slots. Every app and the shell use the same major
+// of TanStack Table (v9): vite's dev pre-bundling serves one copy to all of them.
+export { LumenTable, LumenView, CHIP_TONE, RUN_STATE_TONE, FORMULAS_GROUP, ViewValueCell, rollUp, } from './lumen-view.js';
+export { LumenLayout, domainKeys, followRows, } from './lumen-layout.js';
+export { LumenViewCard } from './lumen-view-card.js';
+export { LumenSelector, LumenSelectorList, SelectorRowContent, } from './lumen-selector.js';
+export { ColorChip, ColorDot, colorIcon } from './color-dot.js';
+export { EditCell, EditInputCell } from './view-edit-cell.js';
+export { cardsOnScreen, kindName, onScreen, pointAtCard, spotlight, } from './spotlight.js';
+export { LinkDot, LinkPicker, linkVar } from './lumen-links.js';
+export { CardSegments, CardSwitch } from './card-switch.js';
+export { PageInput, PageInputs } from './page-inputs.js';
+export { LumenTabs } from './lumen-tabs.js';
+export { LumenTabDrawer, TAB_NAME_MAX } from './lumen-tab-drawer.js';
+export { IconPicker } from './icon-picker.js';
+export { LumenEChart, axisStyle, baseOption, useChartTokens, } from './lumen-echart.js';
+export { LumenGeoMap } from './lumen-geo-map.js';
+export { LumenWidget, LumenSavedWidget } from './lumen-widget.js';
+export { LumenConfirm } from './confirm.js';
+export { COVERAGE_LEVELS, CoverageCell, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
+export { LumenCoverageMap, blockName, blockOf, } from './coverage-map.js';
+export { LumenCoverageCalendarMap, } from './coverage-calendar-map.js';
+export { DetailsTable, FactsTable } from './details-table.js';
+export { DrawerSection } from './drawer-section.js';
+export { LumenDrawer } from './lumen-drawer.js';
+export { LumenCode, langOfPath } from './lumen-code.js';
+export { LumenCodeEditor, } from './lumen-code-editor.js';
+export { RenameField } from './rename-field.js';
+export { ResetButton } from './reset-button.js';
+export { GrowthChart, KEY_DATE_KINDS, KeyDateChips, PALETTE, benchColour, keyDateMarkers, paletteAt, } from './growth-chart.js';
+export { FoldGroup, NavGroup, SidebarSection, } from './nav.js';
+export { OverviewList, OverviewPage, ToneDot, } from './overview.js';
+export { IconButton, Page, PageBody, PageHeader, } from './page.js';
+export { DEFAULT_PREFS, TIME_ZONES, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
+export { KIT, configureLumen } from './kit-config.js';
+export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, TestBadge, errorText, useClock, } from './integrations.js';
+export { LumenPager } from './pager.js';
+export { createDeskQueryClient } from './query-client.js';
+export { refreshHeaders, withRefreshToken } from './refresh.js';
+export { LumenError, LumenLazy, LumenLoadFooter, LumenLoadTime, LumenProgress, LumenRefresh, LumenSkeleton, LumenStates, marketTrades, useLumenLoad, useLumenSource, useLiveLoad, } from './lumen-source.js';
+export { LumenBoundary } from './lumen-boundary.js';
+export { LumenPageState } from './lumen-page-state.js';
+export { goToIssue, SaveButton } from './form-issues.js';
+export { LumenForm, lumenFormIssues, } from './lumen-form.js';
+export { RouteError, isStaleBuildError, reloadForNewBuild, reportError, watchNewBuilds, } from './route-error.js';
+export { LumenSettings, SettingRow, SettingsActions, SettingsFooter, } from './settings.js';
+export { LumenCard } from './summary-cards.js';
+export { WhatsNew } from './whats-new.js';
+export { LumenAppSwitcher } from './app-switcher.js';
+export { SchedulesSection, } from './schedules.js';
+export { NotificationsSettings } from './notifications.js';
+export { TasksButton, TasksProvider, useTasks } from './tasks.js';
+export { McpSettings } from './mcp-settings.js';
+export { lumenToast } from './lumen-toast.js';
+export { LumenShell, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
+export { apiJson } from './api-fetch.js';
+export { cn } from './lib/utils.js';
+export { StatusHealth } from './status-health.js';
+export { TimeZoneSelect } from './status.js';
+export { JoinsProvider, SourceStatusItems, YOURS_COLOR, editedCells, editedKey, frameColor, useFrameEdits, useJoins, usedJoinKeys, } from './joins.js';
+export { OriginLegend, originsOf } from './origin-legend.js';
+export { ConnectOffer, connectionFields, linkGroupId } from './connections.js';
+export { FRESHNESS, FreshnessIcon, FreshnessMark, freshnessLine, freshnessOf, } from './freshness.js';
+export { SourcesLine, useSourceHealth } from './source-health.js';
+export { TILE_WIDTH, Tile, TileChip, TileRow, TileToggleGroup, } from './tile.js';
+export { LumenTokenizedFilter, useLumenFilter, } from './lumen-filter.js';
+export { useIsMobile } from './hooks/use-mobile.js';
+export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';
+export { useAppView } from './app-views.js';
+export { AssistantScreenProvider, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';
+export { AssistantContext, useAssistant, AssistantPendingContext, useAssistantName, useAssistantNote, useAssistantPending, } from './assistant-context.js';
+export { WORKSPACES_KEY, frameKey, workspacesListQuery } from './workspace-keys.js';
+export { WorkspacePage, WorkspacesProvider, WorkspacesSection, } from './workspaces.js';
+export { CHART_INDICATORS, LINE_COLOR, computeIndicators, formulaIndicator, lineColor, resolveIndicator, runFormula, } from './market/indicators.js';
+export { IndicatorPicker } from './market/indicator-picker.js';
+export { OptionChainTable, } from './market/option-chain.js';
+export { MarketProvider, useHasMarket, useMarket, useMarketDaily, useMarketFeed, } from './market/live.js';
+export { MarketBadge, MarketLines, MarketTiles, MarketToday, MarketWidget, } from './market/market-widget.js';
+export { CHART_TYPES, PriceChart, heikinAshi, } from './market/price-chart.js';
+export { LumenChart, SymbolChartProvider, useLumenChart, useSymbolChart, } from './market/lumen-chart.js';
+export { SymbolSheetProvider } from './symbol-sheet.js';
+export { useSymbolSheet } from './symbol-sheet-context.js';
+export { NoteLine } from './note-line.js';
+export { LumenFinderButton, useLumenFinder, useLumenFinderRows, useOpenLumenFinder, } from './lumen-finder.js';
+export { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, tabState, useAssistantHotkey, } from './assistant-panel.js';

package/dist/integrations.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+/** A key's last test: when, whether it worked, and what it read or why it failed. */
+export interface KeyTestResult {
+    at: string;
+    ok: boolean;
+    detail?: string | null;
+    error?: string | null;
+}
+/** `Oct 12, 4:34 PM PDT`-style time in the person's time zone. */
+export declare function useClock(): (iso: string) => string;
+/** A fetch that never got an answer is a TypeError ("Load failed" in Safari, "Failed to fetch" in Chrome). */
+export declare const errorText: (e: unknown) => string;
+export declare function ErrorLine({ error }: {
+    error: unknown;
+}): import("react").JSX.Element | null;
+/** One integration: a row that expands in place. */
+export declare function IntegrationRow({ name, meta, badge, open, onOpenChange, children, }: {
+    name: string;
+    meta: string;
+    badge: ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * One linked connection (a bank, a broker) and its accounts (an app banks and
+ * An app a broker link brokers alike). Collapsed by default, showing its name, `meta` and status; a
+ * connection that needs fixing opens on its own. `actions` sit beside the status, outside the toggle.
+ */
+export declare function ConnectionBlock({ name, meta, status, fix, actions, children, }: {
+    name: string;
+    meta?: string;
+    /** `ok` is Connected; `fix` shows the fix button; `failed` shows the last sync failed. */
+    status: 'ok' | 'fix' | 'failed';
+    /** The fix (sign in again, reconnect); shown while `status` is `fix`. */
+    fix?: {
+        label: string;
+        onClick: () => void;
+        busy?: boolean;
+        disabled?: boolean;
+    };
+    actions?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The row's status: whether the key's last test worked. */
+export declare function TestBadge({ test, ok }: {
+    test: {
+        ok: boolean;
+    } | null;
+    ok?: string;
+}): import("react").JSX.Element;
+/** The last test's time and outcome, with the Test button that runs it again. */
+export declare function KeyTestLine({ test, run, }: {
+    test: KeyTestResult | null;
+    /** Runs the test; the app refreshes its own data when it settles. */
+    run: () => Promise<unknown>;
+}): import("react").JSX.Element;

package/dist/integrations.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Settings ▸ Integrations rows, one look on every app (an app since 2026-10-11, an app since
+// 2026-10-12): a row that expands in place, its badge saying whether the key's last test worked, and
+// the Test line that runs it again. A saved key says nothing; each row shows whether it works.
+import { AlertTriangleIcon, CheckIcon, ChevronRightIcon, RefreshCwIcon } from 'lucide-react';
+import { useState } from 'react';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { usePrefs } from './prefs.js';
+import { Badge } from './ui/badge.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
+/** `Oct 12, 4:34 PM PDT`-style time in the person's time zone. */
+export function useClock() {
+    const { timeZone } = usePrefs();
+    return (iso) => new Date(iso).toLocaleString('en-US', {
+        timeZone,
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+        timeZoneName: 'short',
+    });
+}
+/** A fetch that never got an answer is a TypeError ("Load failed" in Safari, "Failed to fetch" in Chrome). */
+export const errorText = (e) => e instanceof TypeError
+    ? 'The request was cut off before the desk answered (the page was left or the network dropped). Try again.'
+    : e instanceof Error
+        ? e.message
+        : String(e);
+export function ErrorLine({ error }) {
+    if (!error)
+        return null;
+    return (_jsx("p", { role: "alert", className: "text-xs text-loss", children: errorText(error) }));
+}
+/** One integration: a row that expands in place. */
+export function IntegrationRow({ name, meta, badge, open, onOpenChange, children, }) {
+    return (_jsxs(Collapsible, { open: open, onOpenChange: onOpenChange, className: "border-b last:border-b-0", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-3 px-1 py-3 text-left hover:bg-muted/50", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block font-medium", children: name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: meta })] }), badge, _jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') })] }) }), _jsx(CollapsibleContent, { className: "grid grid-cols-1 gap-5 px-1 pt-1 pb-5", children: children })] }));
+}
+/**
+ * One linked connection (a bank, a broker) and its accounts (an app banks and
+ * An app a broker link brokers alike). Collapsed by default, showing its name, `meta` and status; a
+ * connection that needs fixing opens on its own. `actions` sit beside the status, outside the toggle.
+ */
+export function ConnectionBlock({ name, meta, status, fix, actions, children, }) {
+    const [open, setOpen] = useState(status !== 'ok');
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, className: "overflow-hidden rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-2 bg-muted/60 px-3 py-1.5 text-sm", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": `${open ? 'Collapse' : 'Expand'} ${name}`, className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [_jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block font-medium", children: name }), meta && _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: meta })] })] }) }), actions, status === 'fix' && fix ? (_jsx(IconButton, { icon: AlertTriangleIcon, size: "icon-xs", busy: fix.busy, label: fix.label, variant: "outline", className: "text-warning", disabled: fix.disabled, onClick: fix.onClick })) : status === 'failed' ? (_jsx(TestBadge, { test: { ok: false } })) : (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), "Connected"] }))] }), _jsx(CollapsibleContent, { children: children })] }));
+}
+/** The row's status: whether the key's last test worked. */
+export function TestBadge({ test, ok = 'Works' }) {
+    if (!test)
+        return _jsx(Badge, { variant: "outline", children: "Not tested" });
+    return test.ok ? (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), ok] })) : (_jsxs(Badge, { variant: "outline", className: "text-loss", children: [_jsx(AlertTriangleIcon, {}), "Failed"] }));
+}
+/** The last test's time and outcome, with the Test button that runs it again. */
+export function KeyTestLine({ test, run, }) {
+    const clock = useClock();
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    const go = async () => {
+        setPending(true);
+        setError(null);
+        try {
+            await run();
+        }
+        catch (e) {
+            setError(e);
+        }
+        finally {
+            setPending(false);
+        }
+    };
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 text-sm", children: [test ? (_jsxs("span", { className: cn('flex min-w-0 items-center gap-2', !test.ok && 'text-loss'), children: [test.ok ? (_jsx(CheckIcon, { className: "size-4 shrink-0 text-gain" })) : (_jsx(AlertTriangleIcon, { className: "size-4 shrink-0" })), _jsxs("span", { className: "truncate", children: ["Tested ", clock(test.at), " \u00B7 ", test.ok ? `works · ${test.detail}` : 'failed'] })] })) : (_jsx("span", { className: "text-muted-foreground", children: "Not tested yet" })), _jsx("span", { className: "flex-1" }), _jsx(IconButton, { icon: RefreshCwIcon, busy: pending, label: pending ? 'Testing…' : 'Test', variant: "outline", disabled: pending, onClick: () => void go() })] }), test && !test.ok && test.error ? (_jsx("p", { role: "alert", className: "text-xs text-loss", children: test.error })) : null, _jsx(ErrorLine, { error: error })] }));
+}

package/dist/joins.d.ts

@@ -0,0 +1,128 @@
+import { type JoinKey, type SourceState } from '@columenlabs/lumen-ui-types/domains';
+import { type FrameChoice, type FrameColumn, type FrameData, type FrameEditInput, type FrameMeta, type YourColumn } from '@columenlabs/lumen-ui-types/frames';
+import { type CustomViewConfig } from '@columenlabs/lumen-ui-types/views';
+import { type ReactNode } from 'react';
+import { type ConnectedDomain } from './connections.js';
+import type { ViewCellValue, ViewDomain } from './view-model.js';
+/** One symbol's facts by field key; a missing key is no data. */
+type SymbolFacts = Record<string, number | string | null>;
+/** An account's facts, by its id. */
+export interface AccountFacts {
+    brokerage: string | null;
+    trading: string | null;
+    cash: number | null;
+}
+/**
+ * How an app reads each join (an app: `/api/symbols` and its accounts). Each is a hook, called
+ * on every render of a card that could join; `on` and `used` say whether to read at all.
+ */
+export interface JoinReaders {
+    /** Facts by symbol for a broker and an app fields, when `on`. */
+    useSymbolFacts?: (symbols: string[], on: boolean) => {
+        facts: Record<string, SymbolFacts>;
+        sources: SourceState[];
+    };
+    /** Facts by account id for the account fields in `used` (empty: none). */
+    useAccountFacts?: (ids: string[], used: string[]) => {
+        facts: Record<string, AccountFacts>;
+        sources: SourceState[];
+    };
+    /** Option fields by OCC id for the contract fields in `used` (empty: none). */
+    useContractFacts?: (contracts: string[], used: string[]) => {
+        facts: Record<string, Record<string, ViewCellValue>>;
+        sources: SourceState[];
+    };
+    /**
+     * The rows of other domains a card connects to (connections), by domain id:
+     * `ids` to read, `live` the ones a card shows (priced live), the rest only for the Link offer.
+     */
+    useDomains?: (ids: string[], live: string[]) => Record<string, ConnectedDomain>;
+}
+/** Gives every card under it the app's readers for the joins. */
+export declare function JoinsProvider({ readers, children, }: {
+    readers: JoinReaders;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The join field keys a view uses anywhere: columns, filters, group, tiles, sort, pivot, cards, formulas. */
+export declare function usedJoinKeys(config: CustomViewConfig, keys: Set<string>): string[];
+/** Something the status bar can do for a source: a linked frame's ↻ (run the assistant's script again). */
+export interface JoinAction {
+    label: string;
+    run: () => void;
+    busy: boolean;
+    /** Why it cannot run now (shown instead of running). */
+    disabled?: string;
+}
+/** A frame's as-of time as the status bar and the field tree show it. */
+export declare const asOf: (at: string) => string;
+/** Your data: the person's own columns. */
+export declare const YOURS_COLOR = "var(--origin-yours)";
+declare const recipeId: (id: string) => string;
+/** A frame's group name on a card: `Assistant · Targets`, or `Yours · Notes` for the person's own. */
+export declare const frameLabel: (meta: Pick<FrameMeta, 'name' | 'origin'>, assistant?: string) => string;
+export declare const frameColor: (meta: Pick<FrameMeta, 'origin'>) => "var(--origin-assistant)" | "var(--origin-yours)";
+/** The hand-edited cells of a frame, as `column\u0000key` (or `column\u0000#row`). */
+export declare function editedCells(data: FrameData | undefined): Set<string>;
+export declare const editedKey: (column: string, key: string | number) => string;
+/**
+ * Edits in place: the cells the person types into a frame on any card, sent
+ * to the assistant's API, and the frame's rows in the cache replaced with what came back.
+ */
+export declare function useFrameEdits(api: string | null): import("@tanstack/react-query").UseMutationResult<FrameData, Error, {
+    id: string;
+    edits: FrameEditInput[];
+}, unknown>;
+/** The one Your data frame per key: every card with that key attaches the same columns. */
+export declare const yoursName: (key: JoinKey) => string;
+/** Makes (or extends) the person's Your data frame for a key with one more column. */
+export declare function useYourData(api: string | null): import("@tanstack/react-query").UseMutationResult<FrameMeta, Error, {
+    key: JoinKey;
+    column: YourColumn;
+}, unknown>;
+/** A linked frame's group id in a card's field tree (`recipe:fr_…`). */
+export declare const frameGroupId: typeof recipeId;
+/**
+ * Edit widget's draft of `config.frames`: `domain` (the card's, joined with
+ * its saved frames) with the frames `ids` lists, reading the ones it lacks and dropping the rest.
+ */
+export declare function useDraftFrames<T>(domain: ViewDomain<T>, ids: readonly string[]): ViewDomain<T>;
+/** The person's linked frames (recipes) a card can attach, for Edit widget's + Data. */
+export declare function useFrameChoices(enabled: boolean): import("@tanstack/react-query").UseQueryResult<FrameChoice[], Error>;
+/** A row of plain cells, as a link to a catalog domain or a recipe reads it. */
+type CellRow = Record<string, ViewCellValue>;
+interface PlainColumn {
+    key: string;
+    label: string;
+    type: 'number' | 'text' | 'date';
+    format?: FrameColumn['format'];
+    amount?: boolean;
+}
+/** Plain rows as a domain: a field per column, and the keys (symbol, account) a column carries. */
+export declare function rowsDomain(id: string, columns: PlainColumn[], keys: readonly JoinKey[]): ViewDomain<CellRow>;
+/**
+ * The rows of every domain or recipe the card links (any data domain or recipe,
+ * read once a link is defined): the app's own readers for the ones it reads itself (`linkable`),
+ * The assistant's API for the rest, a catalog domain through `GET /domains/:id/rows` as the person and a
+ * recipe (`frame:<id>`) through its frame. `live` are the ones a card shows; the rest of `ids` are
+ * read by the app only, for the Link offer.
+ */
+export declare function useDomainReads(ids: string[], live: string[]): Record<string, ConnectedDomain>;
+/** What one source shows after its name, from how it fared. */
+export declare function detailOf(s: SourceState | undefined, idle: string): string;
+/**
+ * `domain` with the registry's join fields for the keys its rows carry, loaded for the join fields
+ * `config` uses over `rows`, and how each source fared. A domain with no keys comes back as is.
+ */
+export declare function useJoins<T>(domain: ViewDomain<T>, rows: T[], config: CustomViewConfig): {
+    domain: ViewDomain<T>;
+    sources: SourceState[];
+    actions: Record<string, JoinAction>;
+    /** What each connected or connectable domain read, for the Link offer. */
+    read: Record<string, ConnectedDomain>;
+};
+/** The status bar's word on each source: its dot and state, or a Connect button where it is off and can be turned on. */
+export declare function SourceStatusItems({ sources, actions, }: {
+    sources: SourceState[];
+    actions?: Record<string, JoinAction>;
+}): import("react").JSX.Element;
+export {};