@columenlabs/lumen-ui 0.3.2 → 0.4.0

package/dist/confirm.d.ts

@@ -7,7 +7,8 @@ export interface LumenConfirmProps {
     action?: ReactNode;
     /** The button that backs out (Keep, Keep running). */
     cancel?: string;
-    onConfirm: () => void;
+    /** Return a promise to keep the dialog open, busy, until it settles. */
+    onConfirm: () => unknown;
     /** The button that opens the dialog; leave it out and control `open` instead. */
     children?: ReactNode;
     open?: boolean;
@@ -16,5 +17,19 @@ export interface LumenConfirmProps {
     destructive?: boolean;
     /** A word the person must type before the action unlocks, for a step that loses a lot (`DELETE`). */
     typeToConfirm?: string;
+    /** The action's label while the promise runs. */
+    busyAction?: ReactNode;
+    /** Turns a failed promise's error into what the dialog says (a string, or the error itself). */
+    problem?: (error: unknown) => unknown;
+    /** What the dialog says after the promise succeeds; leave it out to close instead. */
+    done?: {
+        title: ReactNode;
+        description?: ReactNode;
+        action?: ReactNode;
+    };
+    /** Runs when the person dismisses the `done` state. */
+    onDone?: () => void;
+    /** `default` is wider, for a longer description. */
+    size?: 'sm' | 'default';
 }
-export declare function LumenConfirm({ title, description, action, cancel, onConfirm, children, open, onOpenChange, destructive, typeToConfirm, }: LumenConfirmProps): import("react").JSX.Element;
+export declare function LumenConfirm({ title, description, action, cancel, onConfirm, children, open, onOpenChange, destructive, typeToConfirm, busyAction, problem, done, onDone, size, }: LumenConfirmProps): import("react").JSX.Element;

package/dist/confirm.js

@@ -1,19 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Every delete asks first: one shadcn AlertDialog every app uses for any
 // delete, remove, cancel or other step to confirm (LumenConfirm, : no raw
 // AlertDialog in an app). Wrap the trigger button, or control `open` when it starts from a menu item.
+// When `onConfirm` returns a promise the dialog waits for it: the action shows `busyAction` and
+// nothing closes it until the server answers; a failure stays in the dialog, a success closes it
+// or shows `done`.
 import { useId, useState } from 'react';
+import { ErrorLine } from './integrations.js';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from './ui/alert-dialog.js';
 import { Field, FieldLabel } from './ui/field.js';
 import { Input } from './ui/input.js';
-export function LumenConfirm({ title, description = 'This cannot be undone.', action = 'Delete', cancel = 'Cancel', onConfirm, children, open, onOpenChange, destructive = true, typeToConfirm, }) {
+export function LumenConfirm({ title, description = 'This cannot be undone.', action = 'Delete', cancel = 'Cancel', onConfirm, children, open, onOpenChange, destructive = true, typeToConfirm, busyAction = 'Working…', problem = (e) => e, done, onDone, size = 'sm', }) {
     const id = useId();
+    const [inner, setInner] = useState(false);
     const [typed, setTyped] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [finished, setFinished] = useState(false);
     const locked = typeToConfirm !== undefined && typed !== typeToConfirm;
     const change = (o) => {
-        if (!o)
+        if (busy)
+            return;
+        if (!o && finished)
+            onDone?.();
+        if (!o) {
             setTyped('');
+            setError(null);
+            setFinished(false);
+        }
+        setInner(o);
         onOpenChange?.(o);
     };
-    return (_jsxs(AlertDialog, { open: open, onOpenChange: change, children: [children && _jsx(AlertDialogTrigger, { asChild: true, children: children }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), typeToConfirm !== undefined && (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: id, children: _jsxs("span", { children: ["Type ", _jsx("code", { className: "rounded bg-muted px-1.5 font-code", children: typeToConfirm }), " to confirm"] }) }), _jsx(Input, { id: id, autoComplete: "off", className: "font-code", value: typed, onChange: (e) => setTyped(e.target.value) })] })), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: cancel }), _jsx(AlertDialogAction, { variant: destructive ? 'destructive-confirm' : 'default', disabled: locked, onClick: onConfirm, children: action })] })] })] }));
+    const confirm = async (e) => {
+        e.preventDefault();
+        const run = onConfirm();
+        if (!(run instanceof Promise))
+            return change(false);
+        setBusy(true);
+        setError(null);
+        try {
+            await run;
+            setBusy(false);
+            if (done)
+                setFinished(true);
+            else {
+                setTyped('');
+                setInner(false);
+                onOpenChange?.(false);
+            }
+        }
+        catch (err) {
+            setBusy(false);
+            setError(problem(err));
+        }
+    };
+    return (_jsxs(AlertDialog, { open: open ?? inner, onOpenChange: change, children: [children && _jsx(AlertDialogTrigger, { asChild: true, children: children }), _jsx(AlertDialogContent, { size: size, children: finished && done ? (_jsxs(_Fragment, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: done.title }), done.description && (_jsx(AlertDialogDescription, { children: done.description }))] }), _jsx(AlertDialogFooter, { className: "group-data-[size=sm]/alert-dialog-content:grid-cols-1", children: _jsx(AlertDialogAction, { children: done.action ?? 'Done' }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), typeToConfirm !== undefined && (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: id, children: _jsxs("span", { children: ["Type ", _jsx("code", { className: "rounded bg-muted px-1.5 font-code", children: typeToConfirm }), ' ', "to confirm"] }) }), _jsx(Input, { id: id, autoComplete: "off", autoCapitalize: typeToConfirm === typeToConfirm.toUpperCase() ? 'characters' : 'none', spellCheck: false, className: "font-code", disabled: busy, value: typed, onChange: (e) => setTyped(e.target.value) })] })), _jsx(ErrorLine, { error: error }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: busy, children: cancel }), _jsx(AlertDialogAction, { variant: destructive ? 'destructive-confirm' : 'default', disabled: locked || busy, "aria-busy": busy, onClick: confirm, children: busy ? busyAction : action })] })] })) })] }));
 }

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export { LumenConfirm, type LumenConfirmProps } from './confirm.js';
 export { type LumenAuthPoint, LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, type LumenAuthStageProps, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
 export { LumenChoice, type LumenChoiceOption } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
-export { RankedBars, StackedBars } from './lumen-widget-charts.js';
+export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';
 export { COVERAGE_LEVELS, CoverageCell, type CoverageJobState, type CoverageLevel, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { type CoverageBlock, type CoverageData, type CoverageFact, type CoveragePick, type CoverageRow, type CoverageSummary, LumenCoverageMap, type LumenCoverageMapProps, blockName, blockOf, } from './coverage-map.js';
 export { type CalendarFact, LumenCoverageCalendarMap, type LumenCoverageCalendarMapProps, } from './coverage-calendar-map.js';

package/dist/index.js

@@ -25,7 +25,7 @@ export { LumenConfirm } from './confirm.js';
 export { LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
 export { LumenChoice } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
-export { RankedBars, StackedBars } from './lumen-widget-charts.js';
+export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.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';

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

@@ -26,6 +26,30 @@ export declare function StackedBars({ rows, parts, fmt, exact, share, }: {
     exact: Fmt;
     share: (v: number) => string;
 }): import("react").JSX.Element;
+/**
+ * Columns over time (one per day, week or month), each split into stacked parts: what worked and
+ * what failed per day, spend per category per month. Oldest on the left; the top part gets the
+ * rounded cap; the tooltip lists every part and the column's total.
+ */
+export declare function StackedColumns({ rows, x, parts, label, height, tick, fmt, legend, }: {
+    /** One row per period, oldest first: the `x` field plus a number for each part's key. */
+    rows: Record<string, number | string>[];
+    /** The field that names each column (a date, a month). */
+    x: string;
+    parts: {
+        name: string;
+        key: string;
+        fill: string;
+    }[];
+    /** What the chart shows, for screen readers. */
+    label: string;
+    height?: number;
+    /** How a column's name reads under it (a date as `10-22`). */
+    tick?: (v: string) => string;
+    fmt?: Fmt;
+    /** The parts' names under the columns. */
+    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;

package/dist/lumen-widget-charts.js

@@ -3,11 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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, Cell, Label, LabelList, Pie, PieChart, XAxis, YAxis, usePlotArea, } from 'recharts';
+import { Bar, BarChart, CartesianGrid, Cell, Label, LabelList, 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. */
 export const STACK_MAX = 5;
+/** A column's rounded top. */
+const CAP = [3, 3, 0, 0];
 /** The widget's lead number over its chart: total and a short caption. */
 export function Headline({ value, caption, tone, }) {
     return (_jsxs("div", { className: "mb-3 flex items-baseline gap-2", children: [_jsx("span", { className: cn('num font-semibold tracking-tight', 'text-2xl', tone === 'gain' && 'text-gain', tone === 'loss' && 'text-loss'), children: value }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: caption })] }));
@@ -30,6 +32,21 @@ export function StackedBars({ rows, parts, fmt, exact, share, }) {
                 return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline gap-2 text-xs", children: [_jsx("span", { className: "truncate font-medium", children: String(r.name) }), _jsx("span", { className: "num ml-auto text-[11px] text-muted-foreground", children: share(total) }), _jsx("span", { className: "num", children: fmt(total) })] }), _jsx("div", { className: "h-2.5 overflow-hidden rounded-full bg-muted", children: _jsx(ChartContainer, { config: config, className: "aspect-auto h-full w-full", children: _jsxs(BarChart, { data: [r], layout: "vertical", margin: { left: 0, right: 0, top: 0, bottom: 0 }, barCategoryGap: 0, children: [_jsx(XAxis, { type: "number", hide: true, domain: [0, hi] }), _jsx(YAxis, { type: "category", hide: true }), _jsx(ChartTooltip, { cursor: false, shared: false, allowEscapeViewBox: { x: false, y: true }, wrapperStyle: { zIndex: 50 }, content: _jsx(ChartTooltipContent, { hideLabel: true, formatter: (v, name) => (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: config[String(name)]?.color } }), _jsx("span", { children: config[String(name)]?.label }), _jsxs("span", { className: "num ml-auto pl-3 whitespace-nowrap", children: [exact(Number(v)), " \u00B7", ' ', total ? ((Number(v) / total) * 100).toFixed(1) : 0, "%"] })] })) }) }), parts.map((p) => (_jsx(Bar, { dataKey: p.key, stackId: "a", fill: p.fill, stroke: "var(--card)", strokeWidth: 1, isAnimationActive: false }, p.key)))] }) }) })] }, String(r.name)));
             }), _jsx("ul", { className: "flex flex-wrap gap-x-3 gap-y-1 pt-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))) })] }));
 }
+/**
+ * Columns over time (one per day, week or month), each split into stacked parts: what worked and
+ * what failed per day, spend per category per month. Oldest on the left; the top part gets the
+ * rounded cap; the tooltip lists every part and the column's total.
+ */
+export function StackedColumns({ rows, x, parts, label, height = 220, tick = String, fmt = (v) => v.toLocaleString(), legend = true, }) {
+    const config = Object.fromEntries(parts.map((p) => [p.key, { label: p.name, color: p.fill }]));
+    const total = (r) => parts.reduce((n, p) => n + (Number(r[p.key]) || 0), 0);
+    // The highest part with a value carries the column's rounded cap.
+    const top = (r) => parts.findLast((p) => Number(r[p.key]) > 0)?.key;
+    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(BarChart, { 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, { tickLine: false, axisLine: false, width: 36, allowDecimals: false, tickFormatter: (v) => fmt(Number(v)) }), _jsx(ChartTooltip, { cursor: { fill: 'var(--muted)', opacity: 0.5 }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
+                                    const r = payload?.[0]?.payload;
+                                    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))) }))] }));
+}
 /** Horizontal bars as a ranked list: a full track per row, each bar its own colour. */
 export function RankedBars({ id, items, signed, fmt, share, }) {
     const ROW = 34;

package/package.json

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