@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/mcp-settings.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon, ShieldIcon } from 'lucide-react';
+import { useState } from 'react';
+// Settings ▸ MCP (in Lumen for
+// every app): each MCP server's address and the steps to connect it from each
+// client. Sign-in is OAuth only (no API keys); a client that can't sign in back to the app runs the
+// common `mcp-remote` bridge on the person's own computer, whose sign-in returns to localhost.
+import { LumenSelector } from './lumen-selector.js';
+import { IconButton } from './page.js';
+import { SettingRow } from './settings.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
+import { Tabs, TabsList, TabsTrigger } from './ui/tabs.js';
+const CLIENTS = {
+    claude: 'Claude',
+    chatgpt: 'ChatGPT',
+    code: 'Claude Code',
+    cursor: 'Cursor',
+    other: 'Other app',
+    script: 'Script',
+};
+function useCopy() {
+    const [copied, setCopied] = useState(null);
+    const copy = (text) => void navigator.clipboard.writeText(text).then(() => {
+        setCopied(text);
+        setTimeout(() => setCopied((c) => (c === text ? null : c)), 1500);
+    });
+    return { copied, copy };
+}
+/** A command or config to paste, with Copy in its corner. */
+function Snippet({ text }) {
+    const { copied, copy } = useCopy();
+    return (_jsxs("div", { className: "relative", children: [_jsx("pre", { className: "rounded-md border bg-muted/40 p-3 pr-10 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap", children: text }), _jsx(IconButton, { icon: copied === text ? CheckIcon : CopyIcon, size: "icon-xs", label: "Copy", className: "absolute top-2 right-2", onClick: () => copy(text) })] }));
+}
+const Steps = ({ children }) => (_jsx("ol", { className: "flex list-decimal flex-col gap-1 pl-5 text-sm", children: children }));
+/** The steps for one client and server. */
+function ClientSteps({ client, server }) {
+    const { url, key: name } = server;
+    const bridge = JSON.stringify({ mcpServers: { [name]: { command: 'npx', args: ['-y', 'mcp-remote', url] } } }, null, 2);
+    switch (client) {
+        case 'claude':
+            return (_jsxs(Steps, { children: [_jsx("li", { children: "In Claude, open Settings \u25B8 Connectors and press Add custom connector." }), _jsxs("li", { children: ["Name it ", server.label, ", paste the ", server.label, " address and press Add."] }), _jsx("li", { children: "Press Connect and sign in when your browser opens." })] }));
+        case 'chatgpt':
+            return (_jsxs(Steps, { children: [_jsx("li", { children: "In ChatGPT, open Settings \u25B8 Apps & Connectors \u25B8 Advanced settings and turn on Developer mode." }), _jsxs("li", { children: ["Back in Apps & Connectors, press Create, name it ", server.label, ", paste the address and pick OAuth."] }), _jsx("li", { children: "Sign in when your browser opens." })] }));
+        case 'code':
+            return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Steps, { children: [_jsx("li", { children: "Run this in a terminal." }), _jsxs("li", { children: ["Type ", _jsx("code", { className: "font-mono text-xs", children: "/mcp" }), " in Claude Code and pick ", name, ". Your browser opens; sign in."] })] }), _jsx(Snippet, { text: `claude mcp add --transport http ${name} ${url}` })] }));
+        case 'cursor':
+            return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Steps, { children: [_jsxs("li", { children: ["Add this to ", _jsx("code", { className: "font-mono text-xs", children: "~/.cursor/mcp.json" }), "."] }), _jsxs("li", { children: ["In Cursor Settings \u25B8 MCP, press Needs login beside ", name, " and sign in."] })] }), _jsx(Snippet, { text: JSON.stringify({ mcpServers: { [name]: { url } } }, null, 2) })] }));
+        case 'other':
+            return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("p", { className: "text-sm", children: ["Apps that sign in through the browser take the address as is. An app whose sign-in can only return to its own website runs the bridge on your computer instead: the app talks to the bridge, the bridge signs in through your browser and talks to ", server.label, "."] }), _jsxs(Steps, { children: [_jsx("li", { children: "Add this server to the app's MCP config (Node.js needed)." }), _jsx("li", { children: "Start the app; your browser opens once to sign in." })] }), _jsx(Snippet, { text: bridge })] }));
+        case 'script':
+            return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Steps, { children: [_jsx("li", { children: "Sign in once on the computer the script runs on; the sign-in is kept there." }), _jsx("li", { children: "Point the script's MCP client at the same command (stdio). Later runs need no browser." }), server.script?.steps] }), _jsx(Snippet, { text: `npx -y mcp-remote ${url}` }), server.script?.example && _jsx(Snippet, { text: server.script.example })] }));
+    }
+}
+export function McpSettings({ servers, current }) {
+    const { copied, copy } = useCopy();
+    const [serverId, setServerId] = useState(current ?? servers[0]?.id);
+    const [client, setClient] = useState('claude');
+    const server = servers.find((d) => d.id === serverId) ?? servers[0];
+    if (!server)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col", children: [_jsx("h4", { className: "text-xs font-medium text-muted-foreground", children: "Servers" }), servers.map((d) => {
+                        const url = d.url;
+                        return (_jsx(SettingRow, { label: d.label, description: "MCP address", children: _jsxs(InputGroup, { className: "w-56 sm:w-80", children: [_jsx(InputGroupInput, { readOnly: true, value: url, "aria-label": `${d.label} MCP address`, className: "font-mono text-xs", onFocus: (e) => e.currentTarget.select() }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": `Copy the ${d.label} address`, onClick: () => copy(url), children: copied === url ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }) })] }) }, d.id));
+                    })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h4", { className: "text-xs font-medium text-muted-foreground", children: "Connect" }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [servers.length > 1 && (_jsx(LumenSelector, { label: "Server", size: "sm", className: "w-40", options: servers.map((d) => ({ value: d.id, label: d.label })), value: server.id, onChange: setServerId })), _jsx(LumenSelector, { label: "App", size: "sm", className: "w-36 md:hidden", options: Object.entries(CLIENTS).map(([k, label]) => ({ value: k, label })), value: client, onChange: (v) => setClient(v) })] }), _jsx(Tabs, { value: client, onValueChange: (v) => setClient(v), className: "max-md:hidden", children: _jsx(TabsList, { children: Object.entries(CLIENTS).map(([k, label]) => (_jsx(TabsTrigger, { value: k, children: label }, k))) }) }), _jsx(ClientSteps, { client: client, server: server })] }), _jsxs("p", { className: "flex items-start gap-1.5 text-xs text-muted-foreground", children: [_jsx(ShieldIcon, { className: "mt-0.5 size-3.5 shrink-0" }), "Every client signs in as you through your browser; there are no API keys. Sign-ins return only to known apps and to http://localhost or http://127.0.0.1 on your own computer."] })] }));
+}

package/dist/nav.d.ts

@@ -0,0 +1,77 @@
+import type { ComponentType, ReactNode } from 'react';
+import { type AssistantPageType } from './assistant-screen.js';
+/** A nav icon: a lucide icon, or a view's emoji drawn at icon size. */
+export type NavIcon = ComponentType<{
+    className?: string;
+}>;
+export interface NavItem {
+    title: string;
+    to: string;
+    icon: NavIcon;
+    badge?: ReactNode;
+    /** Active only on this exact path, not its children. */
+    exact?: boolean;
+    /** One nested level, shown under a collapsible parent. */
+    items?: Omit<NavItem, 'items'>[];
+}
+/**
+ * A sidebar group whose header folds its items: bold caps, no icon. At rest
+ * it looks as before; hovered, it lights up and a chevron shows after the name, which stays while
+ * folded (and always on touch screens). Icons-only sidebars show every item.
+ */
+export declare function FoldGroup({ label, action, children, }: {
+    label?: string;
+    action?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function NavGroup({ label, items, pageType, }: {
+    label?: string;
+    items: NavItem[];
+    /** What its pages stand for in the assistant's @ picker; plain pages by default. */
+    pageType?: AssistantPageType;
+}): import("react").JSX.Element;
+export interface SectionItem {
+    id: string;
+    title: string;
+    to: string;
+    icon: NavIcon;
+    /** A count or a value on the right (a % change); hidden while the remove icon shows. */
+    badge?: ReactNode;
+    /** One nested level, toggled by a chevron; the item itself still links. */
+    items?: SectionSubItem[];
+    /** Open the nested items on first render (they also open while one is active). */
+    defaultOpen?: boolean;
+    /** Not removable: no trash icon even when the section has `onRemove`. */
+    fixed?: boolean;
+    /** What it stands for in the assistant's @ picker, when not the section's `pageType`. */
+    type?: AssistantPageType;
+}
+export interface SectionSubItem {
+    id: string;
+    title: string;
+    to: string;
+    /** A colour dot before the title, matching the item's line on a chart. */
+    color?: string;
+}
+/**
+ * A section of things a person keeps (views, trades, a watchlist): `+` adds one, the
+ * trash icon on hover removes one. An item may carry a badge and one nested level of links with
+ * colour dots. The app supplies the items and both handlers.
+ */
+export declare function SidebarSection({ label, items, onAdd, addLabel, onRemove, removeLabel, loading, empty, children, pageType, assistantSubType, }: {
+    label: string;
+    items: SectionItem[];
+    onAdd?: () => void;
+    addLabel?: string;
+    onRemove?: (item: SectionItem) => void;
+    removeLabel?: (item: SectionItem) => string;
+    loading?: boolean;
+    /** Shown when there are no items. */
+    empty?: ReactNode;
+    /** Extra content under the items (a search box, a retry line). */
+    children?: ReactNode;
+    /** What its items stand for in the assistant's @ picker; plain pages by default. */
+    pageType?: AssistantPageType;
+    /** What its nested items stand for; plain pages by default. */
+    assistantSubType?: AssistantPageType;
+}): import("react").JSX.Element;

package/dist/nav.js

@@ -0,0 +1,73 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Sidebar building blocks an app composes its nav from (shadcn NavMain pattern): a group of links
+// that may nest one level (chevron on the right, hidden in icon mode), and a section whose items a
+// person adds with `+` and removes with the trash icon. Every item carries an icon; section headers are bold caps without one.
+// A section header folds its items: it lights up on hover with a chevron after
+// the name, a click folds it, the fold is remembered in the browser, and `+` never folds.
+import { Link, useRouterState } from '@tanstack/react-router';
+import { ChevronRightIcon, PlusIcon, Trash2Icon } from 'lucide-react';
+import { useAssistantPages } from './assistant-screen.js';
+import { LumenConfirm } from './confirm.js';
+import { useFolded } from './fold.js';
+import { cn } from './lib/utils.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
+import { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar, } from './ui/sidebar.js';
+function useActive() {
+    const path = useRouterState({ select: (s) => s.location.pathname });
+    return ({ to, exact }) => path === to || (!exact && path.startsWith(`${to.replace(/\/$/, '')}/`));
+}
+/**
+ * A sidebar group whose header folds its items: bold caps, no icon. At rest
+ * it looks as before; hovered, it lights up and a chevron shows after the name, which stays while
+ * folded (and always on touch screens). Icons-only sidebars show every item.
+ */
+export function FoldGroup({ label, action, children, }) {
+    const [folded, setFolded] = useFolded(`nav:${label ?? ''}`);
+    const { state, isMobile } = useSidebar();
+    if (!label)
+        return _jsx(SidebarGroup, { children: children });
+    const icons = state === 'collapsed' && !isMobile;
+    return (_jsx(Collapsible, { open: icons || !folded, onOpenChange: (open) => setFolded(!open), className: "group/fold", children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { asChild: true, children: _jsxs(CollapsibleTrigger, { className: "group/label w-full cursor-pointer gap-1 text-left hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", children: [_jsx("span", { className: "truncate", children: label }), _jsx(ChevronRightIcon, { "aria-hidden": true, className: "text-muted-foreground opacity-0 transition-[opacity,transform] group-hover/label:opacity-100 group-focus-visible/label:opacity-100 group-data-[state=closed]/fold:opacity-100 group-data-[state=open]/fold:rotate-90 [@media(hover:none)]:opacity-100" })] }) }), action, _jsx(CollapsibleContent, { children: children })] }) }));
+}
+export function NavGroup({ label, items, pageType, }) {
+    useAssistantPages(items.flatMap((i) => [i, ...(i.items ?? []).map((sub) => ({ ...sub, parent: i.title }))]), label, pageType);
+    const active = useActive();
+    return (_jsx(FoldGroup, { label: label, children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: items.map((item) => item.items?.length ? (_jsx(Collapsible, { asChild: true, defaultOpen: active(item) || item.items.some(active), className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { tooltip: item.title, isActive: active(item), children: [_jsx(item.icon, {}), _jsx("span", { children: item.title }), _jsx(ChevronRightIcon, { className: "ml-auto transition-transform duration-200 group-data-[collapsible=icon]:hidden group-data-[state=open]/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: item.items.map((sub) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { asChild: true, isActive: active(sub), children: _jsxs(Link, { to: sub.to, children: [_jsx(sub.icon, {}), _jsx("span", { children: sub.title })] }) }) }, sub.to))) }) })] }) }, item.to)) : (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: active(item), children: _jsxs(Link, { to: item.to, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: typeof item.badge === 'number' ? 'num' : undefined, children: item.badge }))] }, item.to))) }) }) }));
+}
+const SECTION_BADGE = 'num group-data-[collapsible=icon]:hidden';
+/** One section item: a link, its badge, and the chevron and nested items when it has any. */
+function SectionRow({ item, active, onRemove, removeLabel, }) {
+    const subs = item.items ?? [];
+    const subActive = subs.some((s) => active({ to: s.to, exact: true }));
+    const isActive = active({ to: item.to, exact: true }) && !subActive;
+    // The open item shows no trash icon.
+    const remove = item.fixed || isActive ? undefined : onRemove;
+    const row = (_jsxs(_Fragment, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: isActive, children: _jsxs(Link, { to: item.to, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: cn(SECTION_BADGE, subs.length > 0 && 'right-7', 
+                // The remove icon shows on hover from md up, and always below it: make room there.
+                remove &&
+                    'max-md:right-7 md:group-focus-within/menu-item:opacity-0 md:group-hover/menu-item:opacity-0'), children: item.badge })), remove && (_jsx(LumenConfirm, { title: `${removeLabel(item)}?`, action: "Remove", onConfirm: () => remove(item), children: _jsx(SidebarMenuAction, { showOnHover: true, "aria-label": removeLabel(item), title: removeLabel(item), 
+                    // Muted while the row is hovered, red while the icon itself is.
+                    className: "text-muted-foreground peer-hover/menu-button:text-muted-foreground hover:bg-transparent hover:text-destructive", children: _jsx(Trash2Icon, {}) }) }))] }));
+    if (!subs.length)
+        return _jsx(SidebarMenuItem, { children: row });
+    return (_jsx(Collapsible, { asChild: true, defaultOpen: item.defaultOpen || subActive || active(item), className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [row, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(SidebarMenuAction, { "aria-label": `Show or hide ${item.title}`, className: "data-[state=open]:rotate-90", children: _jsx(ChevronRightIcon, {}) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: subs.map((sub) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { asChild: true, isActive: active({ to: sub.to, exact: true }), children: _jsxs(Link, { to: sub.to, children: [sub.color && (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { background: sub.color } })), _jsx("span", { children: sub.title })] }) }) }, sub.id))) }) })] }) }));
+}
+/**
+ * A section of things a person keeps (views, trades, a watchlist): `+` adds one, the
+ * trash icon on hover removes one. An item may carry a badge and one nested level of links with
+ * colour dots. The app supplies the items and both handlers.
+ */
+export function SidebarSection({ label, items, onAdd, addLabel = `Add to ${label}`, onRemove, removeLabel = (item) => `Remove ${item.title}`, loading, empty, children, pageType, assistantSubType, }) {
+    useAssistantPages(items.flatMap((i) => [
+        i,
+        ...(i.items ?? []).map((sub) => ({
+            ...sub,
+            parent: i.title,
+            type: assistantSubType ?? 'page',
+        })),
+    ]), label, pageType);
+    const active = useActive();
+    return (_jsx(FoldGroup, { label: label, action: onAdd && (_jsx(SidebarGroupAction, { title: addLabel, "aria-label": addLabel, onClick: onAdd, children: _jsx(PlusIcon, {}) })), children: _jsxs(SidebarGroupContent, { children: [_jsxs(SidebarMenu, { children: [loading
+                            ? [0, 1].map((i) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuSkeleton, { showIcon: true }) }, i)))
+                            : items.map((item) => (_jsx(SectionRow, { item: item, active: active, onRemove: onRemove, removeLabel: removeLabel }, item.id))), !loading && !items.length && empty && (_jsx("li", { className: "px-2 py-1 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: empty }))] }), children] }) }));
+}

package/dist/note-line.d.ts

@@ -0,0 +1,13 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+export interface NoteLineProps {
+    icon: LucideIcon;
+    /** The point, in a few words. */
+    title: ReactNode;
+    /** The detail, one line. */
+    note?: ReactNode;
+    /** A button the note carries. */
+    action?: ReactNode;
+}
+/** One muted line over a card or page: an icon, what it says, and an optional button. */
+export declare function NoteLine({ icon: Icon, title, note, action }: NoteLineProps): import("react").JSX.Element;

package/dist/note-line.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** One muted line over a card or page: an icon, what it says, and an optional button. */
+export function NoteLine({ icon: Icon, title, note, action }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg bg-muted px-3 py-2 text-xs", children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "font-medium", children: title }), note && _jsxs("span", { className: "text-muted-foreground", children: [" ", note] })] }), action] }));
+}

package/dist/notifications.d.ts

@@ -0,0 +1,9 @@
+/** The Settings ▸ Notifications section's body. */
+export declare function NotificationsSettings({ api: base, product, sender, }: {
+    /** The app's Notifications API base, e.g. `/api/notifications`. */
+    api: string;
+    /** The product's name in the copy ("Get Acme alerts by email"). */
+    product: string;
+    /** The address email comes from. */
+    sender: string;
+}): import("react").JSX.Element;

package/dist/notifications.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { AlertTriangleIcon, BellIcon, CheckIcon, CopyIcon, MailIcon, PlusIcon, RefreshCwIcon, Trash2Icon, WebhookIcon, XIcon, } from 'lucide-react';
+import { useState } from 'react';
+// Settings ▸ Notifications: where the product tells the person something
+// happened: email to the sign-in address, ntfy (a private ntfy.sh topic per person, sent with their
+// own paid ntfy.sh token) and webhooks, then which event goes to which target. The app passes its
+// API base (`/api/notifications`), its product's name and the address email comes from.
+import { LumenConfirm } from './confirm.js';
+import { ErrorLine, IntegrationRow, KeyTestLine, TestBadge, } from './integrations.js';
+import { IconButton } from './page.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Checkbox } from './ui/checkbox.js';
+import { Input } from './ui/input.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
+import { Label } from './ui/label.js';
+const NTFY_IOS = 'https://apps.apple.com/us/app/ntfy/id1625396347';
+const NTFY_ANDROID = 'https://play.google.com/store/apps/details?id=io.heckel.ntfy';
+async function call(url, method = 'GET', body) {
+    const res = await fetch(url, {
+        method,
+        headers: body === undefined ? {} : { 'content-type': 'application/json' },
+        body: body === undefined ? undefined : JSON.stringify(body),
+    });
+    const data = (await res.json().catch(() => ({})));
+    if (!res.ok)
+        throw new Error(data.error ?? `${res.status}`);
+    return data;
+}
+/** The section's data and its writes; every write answers with the new state. */
+function useNotifications(api, product, sender) {
+    const qc = useQueryClient();
+    const key = ['notifications', api];
+    const q = useQuery({ queryKey: key, queryFn: () => call(api) });
+    const set = (data) => qc.setQueryData(key, data);
+    const reload = () => qc.invalidateQueries({ queryKey: key });
+    const send = (method, path, body) => call(`${api}${path}`, method, body ?? (method === 'DELETE' ? undefined : {}));
+    return { q, set, reload, send, product, sender };
+}
+function Field({ id, label, children }) {
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-1.5", children: [_jsx(Label, { htmlFor: id, className: "text-xs text-muted-foreground", children: label }), children] }));
+}
+function Section({ title, children }) {
+    return (_jsxs("section", { className: "grid grid-cols-1 gap-2", children: [_jsx("h4", { className: "text-xs font-semibold tracking-wide text-muted-foreground uppercase", children: title }), children] }));
+}
+function CopyField({ id, value }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { id: id, readOnly: true, className: "num", value: value, onFocus: (e) => e.currentTarget.select() }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsxs(InputGroupButton, { size: "xs", "aria-label": "Copy topic", onClick: () => {
+                        void navigator.clipboard.writeText(value);
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 1500);
+                    }, children: [copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}), copied ? 'Copied' : 'Copy'] }) })] }));
+}
+/** A test that answers refreshes the section. */
+function TestLine({ test, run, api }) {
+    return _jsx(KeyTestLine, { test: test, run: () => api.send('POST', run).then(api.set) });
+}
+// ── Email ──
+function Email({ status, api }) {
+    const create = useMutation({ mutationFn: () => api.send('POST', '/email'), onSuccess: api.set });
+    const remove = useMutation({
+        mutationFn: () => api.send('DELETE', '/email'),
+        onSuccess: () => void api.reload(),
+    });
+    if (!status.connected)
+        return status.available ? (_jsxs("div", { className: "grid grid-cols-1 gap-3", children: [_jsxs("p", { className: "text-sm", children: ["Get ", api.product, " alerts by email at the address you sign in with. Nothing to set up."] }), _jsx(ErrorLine, { error: create.error }), _jsx(IconButton, { icon: create.isPending ? RefreshCwIcon : MailIcon, label: "Turn on email", variant: "outline", className: "justify-self-start", disabled: create.isPending, busy: create.isPending, onClick: () => create.mutate() })] })) : (_jsx("p", { className: "text-sm", children: "Email is not set up on this server." }));
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-5", children: [_jsx(Section, { title: "Sends to", children: _jsxs("p", { className: "text-sm", children: [status.address, ", from ", api.sender] }) }), _jsx(Section, { title: "Test", children: _jsx(TestLine, { test: status.last_test, run: "/email/test", api: api }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(ErrorLine, { error: remove.error }), _jsx("span", { className: "flex-1" }), _jsx(LumenConfirm, { title: "Turn off email notifications?", description: `${api.product} stops emailing you. You can turn it on again any time.`, action: "Turn off", onConfirm: () => remove.mutate(), children: _jsx(IconButton, { icon: Trash2Icon, label: "Turn off", variant: "destructive" }) })] })] }));
+}
+// ── ntfy ──
+/**
+ * The person's ntfy.sh access token: ntfy.sh limits anonymous and free sends per
+ * address, and the product sends from Cloudflare's shared ones, so sends go out under their paid account.
+ */
+function NtfyToken({ token, api }) {
+    const [value, setValue] = useState('');
+    const save = useMutation({
+        mutationFn: () => api.send('PUT', '/ntfy/token', { token: value.trim() }),
+        onSuccess: (data) => {
+            api.set(data);
+            setValue('');
+        },
+    });
+    return (_jsxs(Section, { title: "Access token", children: [_jsxs("p", { className: "text-sm", children: ["This needs a paid account at", ' ', _jsx("a", { className: "underline", href: "https://ntfy.sh/account", target: "_blank", rel: "noreferrer", children: "ntfy.sh" }), ' ', "(Supporter or above): ntfy.sh limits free accounts by sending address, and ", api.product, ' ', "sends from Cloudflare's shared addresses. Open Account \u25B8 Access tokens, create one and paste it here."] }), token ? (_jsxs("p", { className: "text-sm", children: ["Saved ", _jsx("span", { className: "num", children: token })] })) : null, _jsxs("form", { className: "flex flex-wrap items-end gap-2", onSubmit: (e) => {
+                    e.preventDefault();
+                    if (value.trim())
+                        save.mutate();
+                }, children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(Field, { id: "ntfy-token", label: token ? 'Replace token' : 'Access token', children: _jsx(Input, { id: "ntfy-token", type: "password", className: "num", autoComplete: "off", placeholder: "tk_\u2026", value: value, onChange: (e) => setValue(e.target.value) }) }) }), _jsxs(Button, { type: "submit", size: "sm", disabled: !value.trim() || save.isPending, children: [save.isPending ? _jsx(RefreshCwIcon, { className: "animate-spin" }) : _jsx(CheckIcon, {}), "Save"] })] }), _jsx(ErrorLine, { error: save.error })] }));
+}
+function Ntfy({ status, api }) {
+    const create = useMutation({ mutationFn: () => api.send('POST', '/ntfy'), onSuccess: api.set });
+    const remove = useMutation({
+        mutationFn: () => api.send('DELETE', '/ntfy'),
+        onSuccess: () => void api.reload(),
+    });
+    if (!status.connected)
+        return (_jsxs("div", { className: "grid grid-cols-1 gap-3", children: [_jsxs("p", { className: "text-sm", children: ["Get ", api.product, " alerts on your phone through the free ntfy app. ", api.product, " makes you a private topic (a random name only you know) and sends to it with the access token of your own paid ntfy.sh account."] }), _jsx(ErrorLine, { error: create.error }), _jsx(IconButton, { icon: create.isPending ? RefreshCwIcon : BellIcon, label: "Turn on ntfy", variant: "outline", className: "justify-self-start", disabled: create.isPending, busy: create.isPending, onClick: () => create.mutate() })] }));
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-5", children: [_jsxs(Section, { title: "Set up your phone", children: [_jsxs("ol", { className: "grid list-decimal grid-cols-1 gap-2 pl-5 text-sm", children: [_jsxs("li", { children: ["Install ntfy:", ' ', _jsx("a", { className: "underline", href: NTFY_IOS, target: "_blank", rel: "noreferrer", children: "iPhone" }), ' ', "or", ' ', _jsx("a", { className: "underline", href: NTFY_ANDROID, target: "_blank", rel: "noreferrer", children: "Android" }), "."] }), _jsx("li", { children: "Open it, tap + (Subscribe to topic) and paste your topic. Keep the server as ntfy.sh." }), _jsx("li", { children: "Allow notifications when your phone asks, add your access token below, then tap Test." })] }), _jsx(Field, { id: "ntfy-topic", label: "Your topic (keep it private: anyone with it can read it)", children: _jsx(CopyField, { id: "ntfy-topic", value: status.topic }) })] }), _jsx(NtfyToken, { token: status.token, api: api }), _jsx(Section, { title: "Test", children: _jsx(TestLine, { test: status.last_test, run: "/ntfy/test", api: api }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(ErrorLine, { error: remove.error }), _jsx("span", { className: "flex-1" }), _jsx(LumenConfirm, { title: "Turn off ntfy?", description: `${api.product} stops sending and forgets your topic. Turning on again makes a new topic, which your phone must subscribe to again.`, action: "Turn off", onConfirm: () => remove.mutate(), children: _jsx(IconButton, { icon: Trash2Icon, label: "Turn off", variant: "destructive" }) })] })] }));
+}
+// ── Webhooks ──
+function WebhookRow({ hook, api }) {
+    const remove = useMutation({
+        mutationFn: () => api.send('DELETE', `/webhooks/${encodeURIComponent(hook.id)}`),
+        onSuccess: () => void api.reload(),
+    });
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-2 border-b pb-3 last:border-b-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(WebhookIcon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: hook.name }), _jsx("span", { className: "num min-w-0 flex-1 truncate text-xs text-muted-foreground", children: hook.url }), _jsx(LumenConfirm, { title: `Remove ${hook.name}?`, description: `${api.product} stops sending events to this address.`, action: "Remove", onConfirm: () => remove.mutate(), children: _jsx(IconButton, { icon: Trash2Icon, label: `Remove ${hook.name}`, variant: "destructive" }) })] }), hook.headers.length ? (_jsx("p", { className: "num text-xs text-muted-foreground", children: hook.headers.map((h) => `${h.name}: ${h.value}`).join(' · ') })) : null, _jsx(TestLine, { test: hook.last_test, run: `/webhooks/${encodeURIComponent(hook.id)}/test`, api: api }), _jsx(ErrorLine, { error: remove.error })] }));
+}
+function Webhooks({ hooks, api }) {
+    const [name, setName] = useState('');
+    const [url, setUrl] = useState('');
+    const [headers, setHeaders] = useState([]);
+    const setHeader = (i, part, v) => setHeaders((hs) => hs.map((h, j) => (j === i ? { ...h, [part]: v } : h)));
+    const filled = headers.filter((h) => h.name.trim() || h.value.trim());
+    const add = useMutation({
+        mutationFn: () => api.send('POST', '/webhooks', {
+            name: name.trim(),
+            url: url.trim(),
+            headers: filled.map((h) => ({ name: h.name.trim(), value: h.value.trim() })),
+        }),
+        onSuccess: (data) => {
+            api.set(data);
+            setName('');
+            setUrl('');
+            setHeaders([]);
+        },
+    });
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-5", children: [_jsxs("p", { className: "text-sm", children: [api.product, " posts each event as JSON to your own addresses: Slack, Discord, Home Assistant, n8n or anything that takes a webhook."] }), hooks.length ? (_jsx(Section, { title: "Your webhooks", children: hooks.map((h) => (_jsx(WebhookRow, { hook: h, api: api }, h.id))) })) : null, _jsx(Section, { title: "Add a webhook", children: _jsxs("form", { className: "grid grid-cols-1 gap-3", onSubmit: (e) => {
+                        e.preventDefault();
+                        if (name.trim() && url.trim())
+                            add.mutate();
+                    }, children: [_jsx(Field, { id: "wh-name", label: "Name", children: _jsx(Input, { id: "wh-name", placeholder: "Discord", value: name, onChange: (e) => setName(e.target.value) }) }), _jsx(Field, { id: "wh-url", label: "Address (https)", children: _jsx(Input, { id: "wh-url", className: "num", autoComplete: "off", placeholder: "https://", value: url, onChange: (e) => setUrl(e.target.value) }) }), headers.length ? (_jsx(Field, { id: "wh-header-0", label: "Headers (sent with each post; hidden once saved)", children: _jsx("div", { className: "grid grid-cols-1 gap-2", children: headers.map((h, i) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: `wh-header-${i}`, className: "num w-2/5", autoComplete: "off", placeholder: "Authorization", "aria-label": "Header name", value: h.name, onChange: (e) => setHeader(i, 'name', e.target.value) }), _jsx(Input, { className: "num min-w-0 flex-1", type: "password", autoComplete: "off", placeholder: "Value", "aria-label": "Header value", value: h.value, onChange: (e) => setHeader(i, 'value', e.target.value) }), _jsx(IconButton, { type: "button", icon: XIcon, label: "Remove header", onClick: () => setHeaders((hs) => hs.filter((_, j) => j !== i)) })] }, i))) }) })) : null, _jsx(ErrorLine, { error: add.error }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headers.length < 5 ? (_jsx(IconButton, { type: "button", icon: PlusIcon, label: "Add header", variant: "outline", onClick: () => setHeaders((hs) => [...hs, { name: '', value: '' }]) })) : null, _jsx("span", { className: "flex-1" }), _jsxs(Button, { type: "submit", size: "sm", disabled: !name.trim() || !url.trim() || add.isPending, children: [add.isPending ? _jsx(RefreshCwIcon, { className: "animate-spin" }) : _jsx(PlusIcon, {}), "Add"] })] })] }) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Each post is ", _jsx("span", { className: "num", children: '{ event, title, message, click, at }' }), ". Messages name no account, holding or amount. For a Cloudflare Access service token, add the headers CF-Access-Client-Id and CF-Access-Client-Secret."] })] }));
+}
+// ── Events: one row per event, one column per target ──
+function EventCell({ event, target, name, api, }) {
+    const set = useMutation({
+        mutationFn: (on) => api.send('PUT', `/events/${encodeURIComponent(event.key)}`, { target, on }),
+        onSuccess: api.set,
+    });
+    const on = set.isPending ? Boolean(set.variables) : !event.off.includes(target);
+    return (_jsx("span", { className: "flex items-center justify-center", children: _jsx(Checkbox, { "aria-label": `${event.label} by ${name}`, checked: on, onCheckedChange: (v) => set.mutate(v === true) }) }));
+}
+function Events({ status, api }) {
+    const targets = [
+        ...(status.email.connected ? [{ id: 'email', name: 'Email' }] : []),
+        ...(status.ntfy.connected ? [{ id: 'ntfy', name: 'ntfy' }] : []),
+        ...status.webhooks.map((h) => ({ id: h.id, name: h.name })),
+    ];
+    if (!targets.length)
+        return (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to send to yet: turn on email or ntfy, or add a webhook, above." }));
+    const grid = { gridTemplateColumns: `minmax(12rem, 2.4fr) repeat(${targets.length}, 5.5rem)` };
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-2", children: [_jsx("div", { className: "overflow-x-auto", children: _jsxs("div", { "aria-label": "Events", className: "grid min-w-max items-center", style: grid, children: [_jsxs("div", { className: "contents", children: [_jsx("span", { className: "pb-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase", children: "Event" }), targets.map((t) => (_jsx("span", { className: "truncate pb-1 text-center text-xs font-semibold tracking-wide text-muted-foreground uppercase", title: t.name, children: t.name }, t.id)))] }), status.events.map((e) => (_jsxs("div", { className: "contents", children: [_jsxs("span", { className: "grid gap-0.5 border-t py-2 pr-3", children: [_jsx("span", { className: "text-sm", children: e.label }), _jsx("span", { className: "text-xs text-muted-foreground", children: e.detail })] }), targets.map((t) => (_jsx("span", { className: "self-stretch border-t py-2", children: _jsx("span", { className: "flex h-full items-center justify-center", children: _jsx(EventCell, { event: e, target: t.id, name: t.name, api: api }) }) }, t.id)))] }, e.key)))] }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "A new target starts with every event on." })] }));
+}
+/** The Settings ▸ Notifications section's body. */
+export function NotificationsSettings({ api: base, product, sender, }) {
+    const api = useNotifications(base, product, sender);
+    const [open, setOpen] = useState(null);
+    const toggle = (id) => (o) => setOpen(o ? id : null);
+    if (api.q.isPending)
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "Loading\u2026" });
+    if (api.q.isError)
+        return _jsx(ErrorLine, { error: api.q.error });
+    const s = api.q.data;
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-6", children: [_jsxs("div", { className: "grid grid-cols-1", children: [_jsx(IntegrationRow, { name: "Email", meta: "To your sign-in address", open: open === 'email', onOpenChange: toggle('email'), badge: s.email.connected ? (_jsx(TestBadge, { test: s.email.last_test })) : (_jsx(Badge, { variant: "outline", children: "Off" })), children: _jsx(Email, { status: s.email, api: api }) }), _jsx(IntegrationRow, { name: "ntfy", meta: "Phone notifications through the ntfy app", open: open === 'ntfy', onOpenChange: toggle('ntfy'), badge: s.ntfy.connected ? (_jsx(TestBadge, { test: s.ntfy.last_test })) : (_jsx(Badge, { variant: "outline", children: "Off" })), children: _jsx(Ntfy, { status: s.ntfy, api: api }) }), _jsx(IntegrationRow, { name: "Webhooks", meta: s.webhooks.length
+                            ? s.webhooks.map((h) => h.name).join(' · ')
+                            : 'Events posted to your own addresses', open: open === 'webhooks', onOpenChange: toggle('webhooks'), badge: s.webhooks.length ? (s.webhooks.some((h) => h.last_test?.ok === false) ? (_jsxs(Badge, { variant: "outline", className: "text-loss", children: [_jsx(AlertTriangleIcon, {}), "Failed"] })) : (_jsxs(Badge, { variant: "outline", children: [s.webhooks.length, " webhook", s.webhooks.length === 1 ? '' : 's'] }))) : (_jsx(Badge, { variant: "outline", children: "None" })), children: _jsx(Webhooks, { hooks: s.webhooks, api: api }) })] }), _jsxs("section", { className: "grid grid-cols-1 gap-2", children: [_jsx("h4", { className: "font-medium", children: "Events" }), _jsx(Events, { status: s, api: api })] })] }));
+}

package/dist/origin-legend.d.ts

@@ -0,0 +1,14 @@
+import { type ViewDomain, type ViewField } from './view-model.js';
+interface Origin {
+    label: string;
+    color: string | null;
+}
+/** The origins of `columns` in first-seen order, one per colour and name. */
+export declare function originsOf<T>(domain: ViewDomain<T>, columns: ViewField<T>[]): Origin[];
+/** The legend: the origins when the columns come from two or more, and the freshness marks they
+ *  carry (Live, Live calc, As of; marks). */
+export declare function OriginLegend<T>({ domain, columns, }: {
+    domain: ViewDomain<T>;
+    columns: ViewField<T>[];
+}): import("react").JSX.Element | null;
+export {};

package/dist/origin-legend.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The status bar's legend of where a card's columns come from (Edits in
+// place): one dot and name per origin the shown columns carry, in the header rules' colours:
+// the data model's groups (Holding, Symbol › a broker, ...), the assistant · <frame>, Yours · <frame>
+// and Formula; then the freshness marks the columns carry.
+import { FRESHNESS, FreshnessIcon, marksOf } from './freshness.js';
+import { FORMULAS_GROUP, groupOf } from './view-model.js';
+/** The origins of `columns` in first-seen order, one per colour and name. */
+export function originsOf(domain, columns) {
+    if (!domain.groups?.length)
+        return [];
+    const out = [];
+    const seen = new Set();
+    for (const f of columns) {
+        const id = groupOf(domain, f);
+        const g = id === FORMULAS_GROUP ? undefined : domain.groups.find((x) => x.id === id);
+        const src = f.topic ? g?.sources?.[f.topic] : undefined;
+        const label = id === FORMULAS_GROUP ? 'Formula' : src ? `${g?.label} · ${src.name}` : (g?.label ?? id);
+        const color = id === FORMULAS_GROUP ? 'var(--color-muted-foreground)' : (src?.color ?? g?.color ?? null);
+        const k = `${label}\u0000${color}`;
+        if (seen.has(k))
+            continue;
+        seen.add(k);
+        out.push({ label, color });
+    }
+    return out;
+}
+/** The legend: the origins when the columns come from two or more, and the freshness marks they
+ *  carry (Live, Live calc, As of; marks). */
+export function OriginLegend({ domain, columns, }) {
+    const origins = originsOf(domain, columns);
+    const marks = marksOf(domain, columns);
+    if (origins.length < 2 && !marks.length)
+        return null;
+    return (_jsxs("span", { className: "hidden items-center gap-2.5 sm:inline-flex", "aria-label": "Column origins", children: [origins.length >= 2
+                ? origins.map((o) => (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { "aria-hidden": true, className: "inline-block h-0.5 w-3 rounded-full bg-current", style: { color: o.color ?? 'var(--color-border)' } }), o.label] }, `${o.label}${o.color}`)))
+                : null, marks.map((m) => (_jsxs("span", { className: "inline-flex items-center gap-1", title: FRESHNESS[m].about, children: [_jsx(FreshnessIcon, { kind: m }), FRESHNESS[m].label] }, m)))] }));
+}

package/dist/overview.d.ts

@@ -0,0 +1,84 @@
+import { type ReactNode } from 'react';
+import type { LumenLoad } from './lumen-source.js';
+export type OverviewTone = 'ok' | 'warn' | 'bad' | 'idle';
+interface WidgetBase {
+    id: string;
+    label: string;
+    /** Small text on the right of the label (a count, an average). */
+    aside?: ReactNode;
+    /** One line under the widget. */
+    caption?: ReactNode;
+    /** `warn` or `bad` outlines the widget. */
+    tone?: OverviewTone;
+}
+export type OverviewWidget = WidgetBase & ({
+    kind: 'stat';
+    value?: ReactNode;
+    detail?: ReactNode;
+} | {
+    kind: 'ring';
+    /** Each ring is a share (0 to 1) with the text shown in its middle. */
+    rings: {
+        label: string;
+        value: number;
+        text: string;
+        tone?: OverviewTone;
+    }[];
+    /** Beside the rings: a list (`OverviewList`), a line of text or a button. */
+    detail?: ReactNode;
+} | {
+    kind: 'bars';
+    bars: {
+        key: string;
+        label: string;
+        value: number;
+    }[];
+    /** How a bar's value reads in its tooltip. */
+    format?: (v: number) => string;
+} | {
+    kind: 'timeline';
+    /** The window in epoch ms, and the busy blocks inside it. */
+    from: number;
+    to: number;
+    blocks: {
+        start: number;
+        end: number;
+    }[];
+    ticks: {
+        at: number;
+        label: string;
+    }[];
+});
+export interface OverviewStage {
+    id: string;
+    name: string;
+    tone: OverviewTone;
+    /** One or two words on the stage map chip ("fresh", "2 stale"). */
+    verdict: string;
+    widgets: OverviewWidget[];
+    /** This stage's own reads, when they differ from the page's (the runner's live health). */
+    load?: LumenLoad;
+}
+/** A stage's status mark: a dot, or ▲ when it needs a look. */
+export declare function ToneDot({ tone, className }: {
+    tone: OverviewTone;
+    className?: string;
+}): import("react").JSX.Element;
+/** Label and value rows for a widget's detail (schedules and their last tick, latencies). */
+export declare function OverviewList({ items, }: {
+    items: {
+        label: ReactNode;
+        value: ReactNode;
+        tone?: OverviewTone;
+    }[];
+}): import("react").JSX.Element;
+export interface OverviewPageProps {
+    stages: OverviewStage[];
+    /** The reads the stages are built from: every widget's ↻, skeleton, error and load time. */
+    load: LumenLoad;
+    /** Beside the title: when the numbers were read. */
+    updated?: ReactNode;
+}
+/** The Overview on LumenLayout: the stage map leads, each widget is a card. */
+export declare function OverviewPage({ stages, load, updated }: OverviewPageProps): import("react").JSX.Element;
+export {};