@columenlabs/lumen-ui 0.1.73 → 0.1.74

package/README.md

@@ -29,6 +29,8 @@ bun add -d tailwindcss @tailwindcss/vite tw-animate-css shadcn
 
 /* your accent, per app (LumenShell sets data-app on <html>) */
 :root[data-app="myapp"] { --primary: oklch(0.55 0.15 160); }
+/* optional: numbers in the text font instead of mono (code stays mono via `font-code`) */
+:root[data-app="myapp"] { --num-font: var(--app-font); }
 ```
 
 At start, before anything renders, tell the kit about your app. The kit names no product: your names and data come in here.
@@ -57,13 +59,13 @@ Use `createDeskQueryClient()` for the app's TanStack Query client: data stays fr
 
 ## What's inside
 
-**Frame.** `LumenShell` (sidebar with icons-only collapse and a drawer on phone, header, status bar, Settings, profile menu, ⌘K Find), `LumenAppSwitcher` and `LumenSuiteSwitcher` (groups, apps on other sites, a list read from an address), `WhatsNew` (release notes in a drawer), `TasksButton` and `TasksProvider` (background work in the header), `NotificationsSettings`, `McpSettings`, sign-in screens (`LumenAuthStage`, `LumenSecondStep`, `LumenSignInMethods`, `LumenBackupCodes`), `StatusHealth`, `LumenBoundary` (keeps a crash inside its card), `LumenPageState` (loading, empty and error), `lumenToast`.
+**Frame.** `LumenShell` (sidebar with icons-only collapse and a drawer on phone, header, status bar, Settings, profile menu, ⌘K Find), `LumenAppSwitcher` and `LumenSuiteSwitcher` (groups, apps on other sites, a list read from an address), `WhatsNew` (release notes in a drawer), `TasksButton` and `TasksProvider` (background work in the header), `NotificationsSettings`, `McpSettings`, sign-in screens (`LumenAuthStage`, `LumenSecondStep`, `LumenSignInMethods`, `LumenBackupCodes`, `LumenBotCheck` for Cloudflare Turnstile, `authErrorText` for errors in plain words), `StatusHealth`, `LumenBoundary` (keeps a crash inside its card), `LumenPageState` (loading, empty and error), `lumenToast`.
 
-**Pages and views.** `LumenLayout` (a page of cards from one view config: filter, tiles, widgets; Edit layout and Edit widget when you pass `onConfigChange`), `LumenGrid` (the 6-column grid under it), `LumenView` and `LumenViewCard` (a table that filters, groups, pivots and totals the rows you load), `LumenTable`, `LumenTokenizedFilter`, `LumenWidget` and `LumenSavedWidget` (the frame every card sits in, with its link square and controls), `LumenCard` (one number and its lines), `LumenPager`, `DetailsTable`, `LumenTree`, `useAppView` (a page whose layout each person can change and reset).
+**Pages and views.** `LumenLayout` (a page of cards from one view config: filter, tiles, widgets; Edit layout and Edit widget when you pass `onConfigChange`; a card with `header: false` is its body alone), `LumenGrid` (the 6-column grid under it), `LumenView` and `LumenViewCard` (a table that filters, groups, pivots and totals the rows you load), `LumenTable`, `LumenTokenizedFilter`, `LumenWidget` and `LumenSavedWidget` (the frame every card sits in, with its link square and controls), `LumenCard` (one number and its lines), `LumenPager`, `DetailsTable`, `LumenTree`, `useAppView` (a page whose layout each person can change and reset).
 
-**Charts.** `LumenChart` (one or more symbols' prices, with indicators), `LumenEChart`, `LumenGeoMap`, growth and price charts, `StackedBars`, `StackedColumns`, `RankedBars`.
+**Charts.** `LumenChart` (one or more symbols' prices, with indicators), `LumenEChart`, `LumenGeoMap`, growth and price charts, `StackedBars`, `StackedColumns`, `TimeLines` (lines over time, with an optional right axis), `RankedBars` (with each bar's share of the total or of the first bar, and an empty state).
 
-**Pickers and panels.** `LumenSelector` (every picker), `LumenDrawer` with `DrawerSection` (a side panel on desktop, a sheet on phone), `LumenTabs`, `LumenConfirm` (destructive confirms), `LumenForm`, `LumenDateInput`, `LumenChoice`, `LumenSecret`, `RenameField`, `ResetButton`, `SaveButton` with `FormIssue` (a Save that says why it can't), `IconPicker`.
+**Pickers and panels.** `LumenSelector` (every picker), `LumenDrawer` with `DrawerSection` (a side panel on desktop, a sheet on phone), `LumenTabs`, `LumenConfirm` (destructive confirms), `LumenForm`, `LumenDateInput`, `LumenChoice`, `LumenSecret`, `LumenFileField` (drop or pick a file), `RenameField`, `ResetButton`, `SaveButton` with `FormIssue` (a Save that says why it can't), `IconPicker`.
 
 **Primitives.** The shadcn parts under `@columenlabs/lumen-ui/ui/*` (`ui/button`, `ui/badge`, `ui/input`, ...) and `theme.css` (light and dark tokens).
 

package/dist/index.d.ts

@@ -16,12 +16,14 @@ export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, type CardControls, type CardLink, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm, type LumenConfirmProps } from './confirm.js';
 export { InfoLabel, InfoTip } from './info-tip.js';
-export { type LumenAuthPoint, LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, type LumenAuthStageProps, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+export { type LumenAuthPoint, LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, type LumenAuthStageProps, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, type LumenAuthError, authErrorText, } from './lumen-auth.js';
+export { LumenBotCheck } from './lumen-bot-check.js';
 export { LumenBackupCodes, type LumenCodeMethod, type LumenPasskey, type LumenResult, LumenSecondStep, type LumenSecondStepProps, LumenSignInMethods, type LumenSignInMethodsProps, } from './lumen-security.js';
 export { LumenDateInput, type LumenDateInputProps, stepDate, } from './lumen-date-input.js';
 export { LumenChoice, type LumenChoiceOption } from './lumen-choice.js';
+export { LumenFileField, type LumenFileFieldProps } from './lumen-file-field.js';
 export { LumenSecret } from './lumen-secret.js';
-export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';
+export { RankedBars, StackedBars, StackedColumns, TimeLines } from './lumen-widget-charts.js';
 export { type ShareSegment, ShareMeter } from './share-meter.js';
 export { type Pool, poolShare } from './pool-share.js';
 export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';

package/dist/index.js

@@ -23,12 +23,14 @@ export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm } from './confirm.js';
 export { InfoLabel, InfoTip } from './info-tip.js';
-export { LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+export { LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, authErrorText, } from './lumen-auth.js';
+export { LumenBotCheck } from './lumen-bot-check.js';
 export { LumenBackupCodes, LumenSecondStep, LumenSignInMethods, } from './lumen-security.js';
 export { LumenDateInput, stepDate, } from './lumen-date-input.js';
 export { LumenChoice } from './lumen-choice.js';
+export { LumenFileField } from './lumen-file-field.js';
 export { LumenSecret } from './lumen-secret.js';
-export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';
+export { RankedBars, StackedBars, StackedColumns, TimeLines } from './lumen-widget-charts.js';
 export { ShareMeter } from './share-meter.js';
 export { poolShare } from './pool-share.js';
 export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';

package/dist/lumen-auth.d.ts

@@ -65,4 +65,16 @@ export declare function LumenStepBar({ at, of }: {
     at: number;
     of: number;
 }): import("react").JSX.Element;
+/** An error from the sign-in server (a `code` such as Better Auth's, a status, a message). */
+export type LumenAuthError = {
+    code?: string;
+    message?: string;
+    status?: number;
+};
+/**
+ * A sign-in error in plain words, for `LumenAuthProblem`. Known codes get the kit's line, a 429 asks
+ * the person to wait, and anything else shows the server's message or `fallback`. An app passes
+ * `own` for codes of its own, checked first.
+ */
+export declare function authErrorText(e: LumenAuthError | null | undefined, fallback?: string, own?: Record<string, string>): string;
 export {};

package/dist/lumen-auth.js

@@ -51,3 +51,29 @@ export function LumenCodeField({ id, value, onChange, length = 6, error, hint, o
 export function LumenStepBar({ at, of }) {
     return (_jsxs("div", { className: "mb-5 flex flex-col gap-1.5", children: [_jsx("div", { className: "flex gap-1.5", children: Array.from({ length: of }, (_, i) => i + 1).map((n) => (_jsx("span", { className: `h-1 flex-1 rounded-full ${n <= at ? 'bg-primary' : 'bg-muted'}` }, n))) }), _jsxs("span", { className: "text-center text-muted-foreground text-xs", children: ["Step ", at, " of ", of] })] }));
 }
+const AUTH_ERROR_TEXT = {
+    INVALID_EMAIL_OR_PASSWORD: 'That email and password don’t match.',
+    INVALID_CODE: 'That code doesn’t match. Check the latest one and try again.',
+    INVALID_OTP: 'That code doesn’t match. Check the latest one and try again.',
+    INVALID_TWO_FACTOR_AUTHENTICATION: 'That code doesn’t match. Check the latest one and try again.',
+    OTP_HAS_EXPIRED: 'That code has expired. Send a new one.',
+    OTP_EXPIRED: 'That code has expired. Send a new one.',
+    TOO_MANY_ATTEMPTS: 'Too many tries. Send a new code.',
+    TOO_MANY_ATTEMPTS_REQUEST_NEW_CODE: 'Too many tries. Send a new code.',
+    INVALID_TWO_FACTOR_COOKIE: 'That took too long. Sign in again.',
+    MISSING_RESPONSE: 'The bot check didn’t pass. Wait a moment and try again.',
+    VERIFICATION_FAILED: 'The bot check didn’t pass. Wait a moment and try again.',
+};
+/**
+ * A sign-in error in plain words, for `LumenAuthProblem`. Known codes get the kit's line, a 429 asks
+ * the person to wait, and anything else shows the server's message or `fallback`. An app passes
+ * `own` for codes of its own, checked first.
+ */
+export function authErrorText(e, fallback = 'That didn’t work. Try again.', own = {}) {
+    const known = e?.code ? (own[e.code] ?? AUTH_ERROR_TEXT[e.code]) : undefined;
+    if (known)
+        return known;
+    if (e?.status === 429)
+        return 'Too many tries. Wait a minute and try again.';
+    return e?.message || fallback;
+}

package/dist/lumen-bot-check.d.ts

@@ -0,0 +1,8 @@
+/** Renders nothing without a site key, so an app can ship it before its keys are set. */
+export declare function LumenBotCheck({ siteKey, onToken, version, }: {
+    siteKey: string | null | undefined;
+    /** The token to send with the form, or null when it expired or failed. */
+    onToken: (token: string | null) => void;
+    /** Bump to get a fresh token after a try. */
+    version: number;
+}): import("react").JSX.Element | null;

package/dist/lumen-bot-check.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The bot check on signed-out forms: Cloudflare Turnstile, out of sight unless it is unsure, when
+// it asks for one click. Each token works once, so a form bumps `version` after every try.
+import { Turnstile } from '@marsidev/react-turnstile';
+/** Renders nothing without a site key, so an app can ship it before its keys are set. */
+export function LumenBotCheck({ siteKey, onToken, version, }) {
+    if (!siteKey)
+        return null;
+    return (_jsx(Turnstile, { siteKey: siteKey, options: { size: 'flexible', appearance: 'interaction-only' }, onSuccess: onToken, onExpire: () => onToken(null), onError: () => onToken(null) }, version));
+}

package/dist/lumen-echart.js

@@ -15,7 +15,7 @@ function readTokens() {
         primary: v('--primary', '#5b8cff'),
         series: Array.from({ length: 10 }, (_, i) => v(`--chart-${i + 1}`, '#5b8cff')),
         font: getComputedStyle(document.body).fontFamily || 'sans-serif',
-        mono: v('--font-mono', 'monospace'),
+        mono: v('--num-font', 'monospace'),
     };
 }
 /** The theme's chart colours; new ones when light and dark flip. */

package/dist/lumen-file-field.d.ts

@@ -0,0 +1,13 @@
+export interface LumenFileFieldProps {
+    /** The chosen file, or null for none. */
+    file: File | null;
+    onFile: (file: File | null) => void;
+    /** File types the picker offers, as the input's `accept` (`.csv,text/csv`). */
+    accept?: string;
+    /** What the field takes, for screen readers and the empty field ("CSV file"). */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+}
+/** A drop zone with a Choose button; the chosen file's name and size, and × to clear it. */
+export declare function LumenFileField({ file, onFile, accept, label, disabled, className, }: LumenFileFieldProps): import("react").JSX.Element;

package/dist/lumen-file-field.js

@@ -0,0 +1,50 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A file to bring in (a CSV, a statement): drop it on the field or pick it. The app holds the
+// chosen file, so clearing the field after an upload is the app setting `file` back to null.
+import { FileUpIcon, XIcon } from 'lucide-react';
+import { useId, useRef, useState } from 'react';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { Button } from './ui/button.js';
+/** A drop zone with a Choose button; the chosen file's name and size, and × to clear it. */
+export function LumenFileField({ file, onFile, accept, label, disabled, className, }) {
+    const id = useId();
+    const input = useRef(null);
+    const [over, setOver] = useState(false);
+    const allowed = (f) => {
+        if (!accept)
+            return true;
+        const name = f.name.toLowerCase();
+        return accept.split(',').some((a) => {
+            const t = a.trim().toLowerCase();
+            if (t.startsWith('.'))
+                return name.endsWith(t);
+            if (t.endsWith('/*'))
+                return f.type.startsWith(t.slice(0, -1));
+            return f.type === t;
+        });
+    };
+    const drop = (e) => {
+        e.preventDefault();
+        setOver(false);
+        const f = e.dataTransfer.files[0];
+        if (!disabled && f && allowed(f))
+            onFile(f);
+    };
+    return (_jsxs("div", { onDragOver: (e) => {
+            e.preventDefault();
+            if (!disabled)
+                setOver(true);
+        }, onDragLeave: () => setOver(false), onDrop: drop, className: cn('flex min-w-0 items-center gap-2 rounded-md border border-dashed px-3 py-2 text-sm', over && 'border-primary bg-primary/5', disabled && 'opacity-50', className), children: [_jsx(FileUpIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }), file ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 flex-1 truncate", title: file.name, children: file.name }), _jsx("span", { className: "num shrink-0 text-xs text-muted-foreground", children: fileSize(file.size) }), _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: "Clear file", disabled: disabled, onClick: () => onFile(null) })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: "Drop a file or choose one" }), _jsx(Button, { type: "button", size: "sm", variant: "outline", disabled: disabled, onClick: () => input.current?.click(), children: "Choose" })] })), _jsx("input", { ref: input, id: id, type: "file", accept: accept, "aria-label": label, disabled: disabled, className: "sr-only", onChange: (e) => {
+                    const f = e.target.files?.[0] ?? null;
+                    // Emptied at once, so picking the same file again still reads it.
+                    e.target.value = '';
+                    if (f)
+                        onFile(f);
+                } })] }));
+}
+const fileSize = (n) => n < 1024
+    ? `${n} B`
+    : n < 1024 ** 2
+        ? `${(n / 1024).toFixed(0)} KB`
+        : `${(n / 1024 ** 2).toFixed(1)} MB`;

package/dist/lumen-layout.d.ts

@@ -26,6 +26,8 @@ export interface LumenLayoutCard {
     rows?: number;
     /** Buttons or links in the card's header, before its ↻ ("All jobs"). */
     tools?: ReactNode;
+    /** false: the card is its body alone, no title row (Edit layout still shows it). */
+    header?: boolean;
     /** ⓘ How to read: a few lines on what the card shows and what to look for. */
     help?: ReactNode;
     /** What ✦ Ask the assistant adds to its question (the record to read); false: no ✦ on this card. */

package/dist/lumen-layout.js

@@ -62,7 +62,7 @@ function CodeCard({ card, inScroll, controls, }) {
             }
             : undefined);
     const children = typeof card.children === 'function' ? card.children(follows) : card.children;
-    return (_jsx(LumenWidget, { id: card.id, kind: null, style: card.kind === 'table' ? 'table' : undefined, icon: card.icon ?? (card.kind === 'table' ? TableIcon : undefined), title: card.title, controls: controls, load: card.load, rows: card.rows, tools: card.tools, help: card.help, assistant: card.assistant, link: link, pad: card.kind !== 'table', pinned: inScroll && card.kind === 'table', children: card.load ? (_jsx(LumenStates, { load: card.load, kind: card.kind === 'table' ? 'table' : 'widget', skeleton: card.skeleton, children: children })) : (children) }));
+    return (_jsx(LumenWidget, { id: card.id, kind: null, style: card.kind === 'table' ? 'table' : undefined, icon: card.icon ?? (card.kind === 'table' ? TableIcon : undefined), title: card.title, controls: controls, shown: card.header === false ? { header: false } : undefined, load: card.load, rows: card.rows, tools: card.tools, help: card.help, assistant: card.assistant, link: link, pad: card.kind !== 'table', pinned: inScroll && card.kind === 'table', children: card.load ? (_jsx(LumenStates, { load: card.load, kind: card.kind === 'table' ? 'table' : 'widget', skeleton: card.skeleton, children: children })) : (children) }));
 }
 /** The chips of its colour a code card follows: those on the keys it `reads`. */
 function useCardFollows(card) {

package/dist/lumen-widget-charts.d.ts

@@ -50,13 +50,44 @@ export declare function StackedColumns({ rows, x, parts, label, height, tick, fm
     /** The parts' names under the columns. */
     legend?: boolean;
 }): import("react").JSX.Element;
+/** Lines over time (visits, sign-ups per day), each its own colour; a line with `right` reads off a
+ *  second axis on the right, for a count far smaller than the others. */
+export declare function TimeLines({ rows, x, lines, label, height, tick, fmt, legend, }: {
+    /** One row per period, oldest first: the `x` field plus a number (or null for no data) for
+     *  each line's key. */
+    rows: Record<string, number | string | null>[];
+    /** The field that names each period (a date, a month). */
+    x: string;
+    lines: {
+        name: string;
+        key: string;
+        fill: string;
+        right?: boolean;
+    }[];
+    /** What the chart shows, for screen readers. */
+    label: string;
+    height?: number;
+    /** How a period's name reads under the chart (a date as `10-22`). */
+    tick?: (v: string) => string;
+    fmt?: Fmt;
+    /** The lines' names under the chart. */
+    legend?: boolean;
+}): import("react").JSX.Element;
 /** Horizontal bars as a ranked list: a full track per row, each bar its own colour. */
-export declare function RankedBars({ id, items, signed, fmt, share, }: {
-    id: string;
+export declare function RankedBars({ id, items, signed, fmt, share, empty, label, }: {
+    /** Keeps the bars' gradients apart when one page draws several; one is made when left out. */
+    id?: string;
     items: Item[];
-    signed: boolean;
-    fmt: Fmt;
-    share: (v: number) => string;
+    /** Bars can go below zero (a loss); otherwise they start at zero. */
+    signed?: boolean;
+    fmt?: Fmt;
+    /** The small figure before each value: its % of all bars (`total`), of the first bar
+     *  (`first`, for a funnel), the app's own text, or `false` for none. */
+    share?: 'total' | 'first' | false | ((v: number) => string);
+    /** Shown in place of the bars when there are none. */
+    empty?: ReactNode;
+    /** What the bars show, for screen readers. */
+    label?: string;
 }): import("react").JSX.Element;
 /** A donut with its total in the middle; hovering a slice or its legend line shows its share. */
 export declare function Donut({ items, total, fmt, share, caption, legend, }: {

package/dist/lumen-widget-charts.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Chart widgets: each leads with a headline number; bars are a ranked
 // list on full tracks (or split into parts by a text field), the donut carries its total in the
 // middle, allocation names its wide slices. Flat marks, no glow. Recharts only.
-import { useState } from 'react';
-import { Bar, BarChart, CartesianGrid, Cell, Label, LabelList, Pie, PieChart, Rectangle, XAxis, YAxis, usePlotArea, } from 'recharts';
+import { useId, useState } from 'react';
+import { Bar, BarChart, CartesianGrid, Cell, Label, LabelList, Line, LineChart, Pie, PieChart, Rectangle, XAxis, YAxis, usePlotArea, } from 'recharts';
 import { cn } from './lib/utils.js';
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from './ui/chart.js';
 /** Parts a split bar shows on their own; the rest fold into Other. */
@@ -48,13 +48,39 @@ export function StackedColumns({ rows, x, parts, label, height = 220, tick = Str
                                     return r ? (_jsxs("span", { className: "flex w-full gap-3", children: [_jsx("span", { children: tick(String(r[x])) }), _jsx("span", { className: "num ml-auto", children: fmt(total(r)) })] })) : null;
                                 }, formatter: (v, name) => (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-sm", style: { background: config[String(name)]?.color } }), _jsx("span", { children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v)) })] })) }) }), parts.map((p) => (_jsx(Bar, { dataKey: p.key, stackId: "a", fill: p.fill, isAnimationActive: false, shape: (b) => (_jsx(Rectangle, { ...b, radius: top(b.payload) === p.key ? CAP : 0 })) }, p.key)))] }) }), legend && (_jsx("ul", { className: "flex flex-wrap justify-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: parts.map((p) => (_jsxs("li", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-sm", style: { background: p.fill } }), p.name] }, p.key))) }))] }));
 }
+/** Lines over time (visits, sign-ups per day), each its own colour; a line with `right` reads off a
+ *  second axis on the right, for a count far smaller than the others. */
+export function TimeLines({ rows, x, lines, label, height = 220, tick = String, fmt = (v) => v.toLocaleString(), legend = true, }) {
+    const config = Object.fromEntries(lines.map((l) => [l.key, { label: l.name, color: l.fill }]));
+    const axis = (right) => {
+        const keys = lines.filter((l) => !!l.right === right).map((l) => l.key);
+        return niceTicks(Math.max(0, ...rows.flatMap((r) => keys.map((k) => Number(r[k]) || 0))));
+    };
+    const left = axis(false);
+    const hasRight = lines.some((l) => l.right);
+    const right = hasRight ? axis(true) : [];
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(LineChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { yAxisId: "left", tickLine: false, axisLine: false, domain: [0, left.at(-1) ?? 'auto'], ticks: left, width: axisWidth(left.map(fmt)), tickFormatter: (v) => fmt(Number(v)) }), hasRight && (_jsx(YAxis, { yAxisId: "right", orientation: "right", tickLine: false, axisLine: false, domain: [0, right.at(-1) ?? 'auto'], ticks: right, width: axisWidth(right.map(fmt)), tickFormatter: (v) => fmt(Number(v)) })), _jsx(ChartTooltip, { cursor: { stroke: 'var(--border)' }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
+                                    const r = payload?.[0]?.payload;
+                                    return r ? tick(String(r[x])) : null;
+                                }, formatter: (v, name) => (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-sm", style: { background: config[String(name)]?.color } }), _jsx("span", { children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v)) })] })) }) }), lines.map((l) => (_jsx(Line, { dataKey: l.key, yAxisId: l.right ? 'right' : 'left', type: "monotone", stroke: l.fill, strokeWidth: 2, dot: false, connectNulls: false, isAnimationActive: false }, l.key)))] }) }), legend && (_jsx("ul", { className: "flex flex-wrap justify-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: lines.map((l) => (_jsxs("li", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "h-0.5 w-3 rounded-full", style: { background: l.fill } }), l.name] }, l.key))) }))] }));
+}
 /** Horizontal bars as a ranked list: a full track per row, each bar its own colour. */
-export function RankedBars({ id, items, signed, fmt, share, }) {
+export function RankedBars({ id, items, signed = false, fmt = (v) => v.toLocaleString(), share = 'total', empty = 'None yet.', label, }) {
+    const ownId = useId();
+    const gid = id ?? ownId;
+    if (!items.length)
+        return _jsx("p", { className: "p-3 text-sm text-muted-foreground", children: empty });
+    const base = share === 'first' ? (items[0]?.v ?? 0) : items.reduce((t, i) => t + Math.abs(i.v), 0);
+    const shareText = typeof share === 'function'
+        ? share
+        : share === false
+            ? () => ''
+            : (v) => (base ? `${Math.round((v / base) * 100)}%` : '');
     const ROW = 34;
     const lo = Math.min(0, ...items.map((i) => i.v));
     const hi = Math.max(0, ...items.map((i) => i.v));
     const config = { v: { label: 'Value', color: 'var(--chart-1)' } };
-    return (_jsx(ChartContainer, { config: config, className: "aspect-auto w-full", style: { height: items.length * ROW + 14 }, children: _jsxs(BarChart, { data: items, layout: "vertical", margin: { left: 0, right: 0, top: 14, bottom: 0 }, barCategoryGap: 0, children: [_jsx("defs", { children: items.map((it, i) => (_jsxs("linearGradient", { id: `rb-${id}-${i}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: it.fill, stopOpacity: it.v < 0 ? 1 : 0.35 }), _jsx("stop", { offset: "100%", stopColor: it.fill, stopOpacity: it.v < 0 ? 0.35 : 1 })] }, it.name))) }), _jsx(XAxis, { type: "number", hide: true, domain: signed ? [lo, hi] : [0, hi] }), _jsx(YAxis, { type: "category", dataKey: "name", hide: true }), _jsxs(Bar, { dataKey: "v", barSize: 10, radius: 5, background: { fill: 'var(--muted)', radius: 5 }, isAnimationActive: false, children: [items.map((it, i) => (_jsx(Cell, { fill: `url(#rb-${id}-${i})`, style: { color: it.fill } }, it.name))), _jsx(LabelList, { dataKey: "v", content: _jsx(RankLabel, { items: items, fmt: fmt, share: share }) })] })] }) }));
+    return (_jsx(ChartContainer, { config: config, className: "aspect-auto w-full", style: { height: items.length * ROW + 14 }, role: label ? 'img' : undefined, "aria-label": label, children: _jsxs(BarChart, { data: items, layout: "vertical", margin: { left: 0, right: 0, top: 14, bottom: 0 }, barCategoryGap: 0, children: [_jsx("defs", { children: items.map((it, i) => (_jsxs("linearGradient", { id: `rb-${gid}-${i}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: it.fill, stopOpacity: it.v < 0 ? 1 : 0.35 }), _jsx("stop", { offset: "100%", stopColor: it.fill, stopOpacity: it.v < 0 ? 0.35 : 1 })] }, it.name))) }), _jsx(XAxis, { type: "number", hide: true, domain: signed ? [lo, hi] : [0, hi] }), _jsx(YAxis, { type: "category", dataKey: "name", hide: true }), _jsxs(Bar, { dataKey: "v", barSize: 10, radius: 5, background: { fill: 'var(--muted)', radius: 5 }, isAnimationActive: false, children: [items.map((it, i) => (_jsx(Cell, { fill: `url(#rb-${gid}-${i})`, style: { color: it.fill } }, it.name))), _jsx(LabelList, { dataKey: "v", content: _jsx(RankLabel, { items: items, fmt: fmt, share: shareText }) })] })] }) }));
 }
 /** A donut with its total in the middle; hovering a slice or its legend line shows its share. */
 export function Donut({ items, total, fmt, share, caption, legend = true, }) {

package/dist/lumen-widget.js

@@ -329,7 +329,8 @@ export function LumenWidget({ id, kind, icon, title, note, controls, tools, filt
     const layout = !!controls?.layout;
     // A small card (one number) shows only its title until the page is in Edit layout.
     const bare = compact && !layout;
-    const on = (k) => kind === null || controlOn({ kind, style, controls: shown }, k);
+    // A page's own card (kind null) has every control unless `shown` turns one off (its header).
+    const on = (k) => kind === null ? shown?.[k] !== false : controlOn({ kind, style, controls: shown }, k);
     // A page's own card (kind null) says it is a table when it draws one (`style` table).
     const styleId = kind
         ? widgetStyleId({ kind, style })

package/dist/overview.js

@@ -48,7 +48,7 @@ function Ring({ ring, size }) {
                                         if (!viewBox || !('cx' in viewBox))
                                             return null;
                                         const many = ring.rings.length > 1;
-                                        return (_jsxs("text", { x: viewBox.cx, y: viewBox.cy, textAnchor: "middle", children: [_jsx("tspan", { x: viewBox.cx, dy: many ? '-0.1em' : '0.35em', className: "fill-foreground font-mono text-[11px]", children: r.text }), many && (_jsx("tspan", { x: viewBox.cx, dy: "1.2em", className: "fill-muted-foreground text-[9px]", children: r.label }))] }));
+                                        return (_jsxs("text", { x: viewBox.cx, y: viewBox.cy, textAnchor: "middle", children: [_jsx("tspan", { x: viewBox.cx, dy: many ? '-0.1em' : '0.35em', className: "fill-foreground font-num text-[11px]", children: r.text }), many && (_jsx("tspan", { x: viewBox.cx, dy: "1.2em", className: "fill-muted-foreground text-[9px]", children: r.label }))] }));
                                     } })] }) }) }, r.label));
             }), ring.detail && _jsx("div", { className: "min-w-36 flex-1", children: ring.detail })] }));
 }

package/dist/tasks.js

@@ -183,7 +183,7 @@ export function TasksButton() {
     ]
         .filter(Boolean)
         .join(', ');
-    const trigger = (_jsxs(Button, { variant: "ghost", size: list.active ? 'sm' : 'icon-sm', className: cn('relative shrink-0', list.active > 0 && 'gap-1.5 px-2'), "aria-label": label, "data-slot": "tasks-button", children: [list.active > 0 ? _jsx(Ring, { share: share }) : _jsx(ListChecksIcon, {}), list.active > 0 && _jsx("span", { className: "font-mono text-xs tabular-nums", children: list.active }), list.unseen > 0 && (_jsx("span", { "aria-hidden": true, "data-slot": "tasks-unseen", className: "absolute top-1 right-0.5 size-1.5 rounded-full bg-edge" }))] }));
+    const trigger = (_jsxs(Button, { variant: "ghost", size: list.active ? 'sm' : 'icon-sm', className: cn('relative shrink-0', list.active > 0 && 'gap-1.5 px-2'), "aria-label": label, "data-slot": "tasks-button", children: [list.active > 0 ? _jsx(Ring, { share: share }) : _jsx(ListChecksIcon, {}), list.active > 0 && _jsx("span", { className: "font-num text-xs tabular-nums", children: list.active }), list.unseen > 0 && (_jsx("span", { "aria-hidden": true, "data-slot": "tasks-unseen", className: "absolute top-1 right-0.5 size-1.5 rounded-full bg-edge" }))] }));
     const body = _jsx(TaskPanel, { list: list, onClose: () => setOpen(false) });
     if (mobile) {
         return (_jsxs(Sheet, { open: open, onOpenChange: onOpen, children: [_jsx(SheetTrigger, { asChild: true, children: trigger }), _jsxs(SheetContent, { side: "bottom", className: "max-h-[75svh] gap-0 rounded-t-2xl p-0", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "flex-row items-baseline gap-2 border-b px-4 py-3", children: [_jsx(SheetTitle, { children: "Tasks" }), _jsx(SheetDescription, { children: "last 7 days" }), _jsxs("span", { className: "mr-8 ml-auto flex items-center gap-2 self-center", children: [list.active > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [list.active, " running"] })), _jsx(ClearAll, { list: list })] })] }), body] })] }));
@@ -223,12 +223,12 @@ function TaskRow({ task: t, onClose }) {
     return (_jsxs("div", { "data-slot": "task-row", "data-state": t.state, className: cn('flex flex-col gap-1.5 border-t px-3.5 py-2.5', unseen && 'bg-muted/40'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [unseen && _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-edge" }), apps && (_jsx(Badge, { variant: "outline", className: "shrink-0 text-[11px]", children: apps[t.app] ?? t.app })), _jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold", title: t.title, children: t.title }), isActive(t) && t.cancellable ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: XIcon, label: "Cancel task", size: "icon-xs", className: "text-muted-foreground hover:text-destructive", onClick: () => setConfirm(true) }), _jsx(LumenConfirm, { open: confirm, onOpenChange: setConfirm, title: `Cancel ${t.title}?`, description: "It stops at its next step; what it finished stays.", action: "Cancel task", onConfirm: () => void tasks?.cancel(t.id) })] })) : t.link ? (_jsx(IconButton, { icon: isActive(t) ? ChevronRightIcon : ArrowUpRightIcon, label: "Open", size: "icon-xs", onClick: () => {
                             onClose();
                             tasks?.open(t);
-                        } })) : null, !isActive(t) && (_jsx(IconButton, { icon: XIcon, label: "Clear", size: "icon-xs", className: "text-muted-foreground hover:text-destructive", onClick: () => void tasks?.clear(t.id) }))] }), t.state === 'running' && t.total ? (_jsxs(_Fragment, { children: [_jsx(Progress, { value: pct ?? 0 }), _jsxs("div", { className: "flex gap-2.5 font-mono text-[11.5px] text-muted-foreground tabular-nums", children: [_jsxs("span", { children: [done.toLocaleString('en-US'), " / ", t.total.toLocaleString('en-US'), t.unit ? ` ${t.unit}` : ''] }), _jsxs("span", { children: [pct, "%"] }), _jsx("span", { className: "ml-auto", children: timeLeft(t, now) })] })] })) : t.state === 'running' ? (_jsxs(_Fragment, { children: [_jsx(Progress, {}), _jsxs("div", { className: "font-mono text-[11.5px] text-muted-foreground tabular-nums", children: [done ? `${done.toLocaleString('en-US')}${t.unit ? ` ${t.unit}` : ''} · ` : '', "running ", took(Date.parse(t.started_at ?? t.created_at), now)] })] })) : t.state === 'queued' ? (_jsx(Line, { icon: _jsx(Clock3Icon, { className: "size-3" }), children: "Queued" })) : t.state === 'done' ? (_jsx(Line, { icon: _jsx(CheckIcon, { className: "size-3 text-gain", strokeWidth: 2.5 }), mono: true, children: [t.summary, tookLine(t), ago(t.finished_at, now)].filter(Boolean).join(' · ') })) : (_jsx(Line, { icon: _jsx(CircleAlertIcon, { className: "size-3" }), className: t.state === 'failed' ? 'text-loss' : undefined, children: [t.state === 'cancelled' ? 'Cancelled' : (t.error ?? 'Failed'), ago(t.finished_at, now)]
+                        } })) : null, !isActive(t) && (_jsx(IconButton, { icon: XIcon, label: "Clear", size: "icon-xs", className: "text-muted-foreground hover:text-destructive", onClick: () => void tasks?.clear(t.id) }))] }), t.state === 'running' && t.total ? (_jsxs(_Fragment, { children: [_jsx(Progress, { value: pct ?? 0 }), _jsxs("div", { className: "flex gap-2.5 font-num text-[11.5px] text-muted-foreground tabular-nums", children: [_jsxs("span", { children: [done.toLocaleString('en-US'), " / ", t.total.toLocaleString('en-US'), t.unit ? ` ${t.unit}` : ''] }), _jsxs("span", { children: [pct, "%"] }), _jsx("span", { className: "ml-auto", children: timeLeft(t, now) })] })] })) : t.state === 'running' ? (_jsxs(_Fragment, { children: [_jsx(Progress, {}), _jsxs("div", { className: "font-num text-[11.5px] text-muted-foreground tabular-nums", children: [done ? `${done.toLocaleString('en-US')}${t.unit ? ` ${t.unit}` : ''} · ` : '', "running ", took(Date.parse(t.started_at ?? t.created_at), now)] })] })) : t.state === 'queued' ? (_jsx(Line, { icon: _jsx(Clock3Icon, { className: "size-3" }), children: "Queued" })) : t.state === 'done' ? (_jsx(Line, { icon: _jsx(CheckIcon, { className: "size-3 text-gain", strokeWidth: 2.5 }), mono: true, children: [t.summary, tookLine(t), ago(t.finished_at, now)].filter(Boolean).join(' · ') })) : (_jsx(Line, { icon: _jsx(CircleAlertIcon, { className: "size-3" }), className: t.state === 'failed' ? 'text-loss' : undefined, children: [t.state === 'cancelled' ? 'Cancelled' : (t.error ?? 'Failed'), ago(t.finished_at, now)]
                     .filter(Boolean)
                     .join(' · ') }))] }));
 }
 function Line({ icon, mono, className, children, }) {
-    return (_jsxs("div", { className: cn('flex min-w-0 items-center gap-1.5 text-[11.5px] text-muted-foreground', mono && 'font-mono tabular-nums', className), children: [_jsx("span", { className: "shrink-0", children: icon }), _jsx("span", { className: "min-w-0 truncate", children: children })] }));
+    return (_jsxs("div", { className: cn('flex min-w-0 items-center gap-1.5 text-[11.5px] text-muted-foreground', mono && 'font-num tabular-nums', className), children: [_jsx("span", { className: "shrink-0", children: icon }), _jsx("span", { className: "min-w-0 truncate", children: children })] }));
 }
 /** Ticks once a second while a task runs, so "left" and "running" count. */
 function useNow(live) {

package/dist/theme.css

@@ -16,6 +16,10 @@
   --font-heading: var(--font-sans);
   --font-sans: var(--app-font);
   --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+  /* `font-code`: code, keys and one-time codes. Always mono, whatever numbers use. */
+  --font-code: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+  /* `font-num` (and `.num`): numbers in tables, tiles and charts. */
+  --font-num: var(--num-font);
   --color-gain: var(--gain);
   --color-kind-declarative: var(--kind-declarative);
   --color-kind-script: var(--kind-script);
@@ -90,6 +94,9 @@
   --shell-max-width: 1400px;
   /* The text font, picked in Settings ▸ Appearance (`data-font` on <html>, prefs.ts). */
   --app-font: "Manrope Variable", Manrope, ui-sans-serif, system-ui, sans-serif;
+  /* The numbers font. An app that wants its numbers in the text font sets
+     `--num-font: var(--app-font)`; tabular figures keep them lined up either way. */
+  --num-font: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
   /* Compact density, the only density. */
   --card-pad: 12px;
   --row-h: 28px;
@@ -455,7 +462,7 @@
   }
 
   .num {
-    font-family: var(--font-mono);
+    font-family: var(--num-font);
     font-variant-numeric: tabular-nums;
   }
 }
@@ -595,7 +602,7 @@ body[data-spotlight="nav"] [data-spotlit] {
     margin: 0;
     padding: 0.5rem 0.75rem;
     background: transparent !important;
-    font-family: var(--font-mono);
+    font-family: var(--font-code);
     counter-reset: line;
   }
   .lumen-code.lumen-code-numbers pre {
@@ -626,7 +633,7 @@ body[data-spotlight="nav"] [data-spotlit] {
   }
   .lumen-code-editor .cm-editor {
     height: 100%;
-    font-family: var(--font-mono);
+    font-family: var(--font-code);
   }
   .lumen-code-editor .cm-editor.cm-focused {
     outline: none;

package/dist/ui/chart.js

@@ -75,7 +75,7 @@ function ChartTooltipContent({ active, payload, className, indicator = 'dot', hi
                                     }), style: {
                                         '--color-bg': indicatorColor,
                                         '--color-border': indicatorColor,
-                                    } }))), _jsxs("div", { className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === 'number'
+                                    } }))), _jsxs("div", { className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-num font-medium text-foreground tabular-nums", children: typeof item.value === 'number'
                                                 ? item.value.toLocaleString()
                                                 : String(item.value) }))] })] })) }, index));
                 }) })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.73",
+  "version": "0.1.74",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -45,7 +45,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.73",
+    "@columenlabs/lumen-ui-types": "0.1.74",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -53,6 +53,7 @@
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/manrope": "^5.3.0",
+    "@marsidev/react-turnstile": "1.3.1",
     "@tanstack/react-table": "^9.2.4",
     "@uiw/codemirror-theme-github": "4.25.12",
     "@uiw/react-codemirror": "4.25.12",