@columenlabs/lumen-ui 0.1.17 → 0.1.19

package/dist/index.d.ts

@@ -16,6 +16,8 @@ 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 { type LumenAuthPoint, LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, type LumenAuthStageProps, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.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 { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';

package/dist/index.js

@@ -23,6 +23,8 @@ export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm } from './confirm.js';
 export { LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+export { LumenBackupCodes, LumenSecondStep, LumenSignInMethods, } from './lumen-security.js';
+export { LumenDateInput, stepDate, } from './lumen-date-input.js';
 export { LumenChoice } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';

package/dist/lumen-auth.d.ts

@@ -15,7 +15,8 @@ export interface LumenAuthStageProps {
         body?: ReactNode;
     };
     points?: LumenAuthPoint[];
-    /** A picture under the points, such as a diagram of what the app does. */
+    /** A picture under the points, such as a diagram of what the app does. Without one, the
+     *  story is centred in the pane. */
     illustration?: ReactNode;
     /** Small links under the form (privacy, terms). */
     footer?: ReactNode;

package/dist/lumen-auth.js

@@ -1,4 +1,4 @@
-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";
 // The signed-out screens every app shares: a split page (the app's story on the left, hidden on
 // a phone, the form on the right) and the fields its forms are built from. The app passes its
 // brand, pitch, points, illustration and footer links; the kit draws the layout.
@@ -11,7 +11,8 @@ import { Input } from './ui/input.js';
 import { InputGroup, InputGroupAddon, InputGroupInput } from './ui/input-group.js';
 /** The page a signed-out screen sits in. */
 export function LumenAuthStage({ brand, pitch, points = [], illustration, footer, children, }) {
-    return (_jsxs("div", { className: "grid min-h-svh grid-cols-1 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)]", children: [_jsxs("aside", { className: "hidden flex-col gap-10 border-r bg-sidebar px-10 py-8 text-sidebar-foreground lg:flex", children: [brand, _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-balance font-semibold text-3xl leading-tight", children: pitch.title }), pitch.body && _jsx("p", { className: "max-w-md text-muted-foreground", children: pitch.body })] }), points.length > 0 && (_jsx("ul", { className: "flex flex-col gap-4", children: points.map(({ icon: Icon, title, body }) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-4.5" }) }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium text-sm", children: title }), _jsx("span", { className: "text-muted-foreground text-sm", children: body })] })] }, title))) })), illustration] }), _jsxs("main", { className: "flex flex-col bg-background px-6 py-8 sm:px-12", children: [_jsx("div", { className: "lg:hidden", children: brand }), _jsx("div", { className: "mx-auto flex w-full max-w-sm flex-1 flex-col justify-center py-8", children: children }), footer && _jsx("div", { className: "text-center text-muted-foreground text-xs", children: footer })] })] }));
+    const story = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-balance font-semibold text-3xl leading-tight", children: pitch.title }), pitch.body && _jsx("p", { className: "max-w-md text-muted-foreground", children: pitch.body })] }), points.length > 0 && (_jsx("ul", { className: "flex flex-col gap-4", children: points.map(({ icon: Icon, title, body }) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-4.5" }) }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium text-sm", children: title }), _jsx("span", { className: "text-muted-foreground text-sm", children: body })] })] }, title))) }))] }));
+    return (_jsxs("div", { className: "grid min-h-svh grid-cols-1 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)]", children: [_jsxs("aside", { className: "hidden flex-col gap-10 border-r bg-sidebar px-10 py-8 text-sidebar-foreground lg:flex", children: [brand, illustration ? (_jsxs(_Fragment, { children: [story, illustration] })) : (_jsx("div", { className: "flex flex-1 flex-col justify-center gap-10 pb-16", children: story }))] }), _jsxs("main", { className: "flex flex-col bg-background px-6 py-8 sm:px-12", children: [_jsx("div", { className: "lg:hidden", children: brand }), _jsx("div", { className: "mx-auto flex w-full max-w-sm flex-1 flex-col justify-center py-8", children: children }), footer && _jsx("div", { className: "text-center text-muted-foreground text-xs", children: footer })] })] }));
 }
 /** A screen's title, and a line under it. */
 export function LumenAuthHeading({ title, sub }) {

package/dist/lumen-date-input.d.ts

@@ -0,0 +1,30 @@
+export type LumenDateInputProps = {
+    /** The day as ISO `yyyy-mm-dd`, or '' for none. */
+    value: string;
+    onChange: (iso: string) => void;
+    /** Earliest and latest day the picker and the steps reach. */
+    min?: string;
+    max?: string;
+    /** Which days the steps land on (a trading calendar); every day when left out. */
+    isOpen?: (iso: string) => boolean;
+    /** What a day is called in the step tooltips: "Previous trading day". Default "day". */
+    unit?: string;
+    /** Shows a Today icon button that runs this. */
+    onToday?: () => void;
+    /** Today is already shown: the Today button is off. */
+    atToday?: boolean;
+    /** `sm` for toolbars and card headers, `default` in forms. */
+    size?: 'sm' | 'default';
+    disabled?: boolean;
+    id?: string;
+    'aria-label'?: string;
+    className?: string;
+};
+/** The next open day from `iso` in direction `dir`, inside min and max; null when none. */
+export declare function stepDate(iso: string, dir: 1 | -1, { min, max, isOpen }?: Pick<LumenDateInputProps, 'min' | 'max' | 'isOpen'>): string | null;
+/**
+ * The kit's date picker: the browser's date input between ‹ and › icon buttons that step
+ * one open day (an app passes its trading calendar as `isOpen`), Alt+← and Alt+→ while it
+ * has focus, and an optional Today. Every date field in an app uses it.
+ */
+export declare function LumenDateInput({ value, onChange, min, max, isOpen, unit, onToday, atToday, size, disabled, id, 'aria-label': ariaLabel, className, }: LumenDateInputProps): import("react").JSX.Element;

package/dist/lumen-date-input.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A date picker with ‹ › to step one open day back or forward, and an optional Today.
+import { CalendarClockIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { Input } from './ui/input.js';
+const DAY = 86_400_000;
+/** The furthest a step looks for an open day (long holiday runs fit easily). */
+const REACH = 14;
+function addDays(iso, n) {
+    return new Date(Date.parse(`${iso}T00:00:00Z`) + n * DAY).toISOString().slice(0, 10);
+}
+/** The next open day from `iso` in direction `dir`, inside min and max; null when none. */
+export function stepDate(iso, dir, { min, max, isOpen } = {}) {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(iso))
+        return null;
+    let day = iso;
+    for (let i = 0; i < REACH; i++) {
+        day = addDays(day, dir);
+        if ((min && day < min) || (max && day > max))
+            return null;
+        if (!isOpen || isOpen(day))
+            return day;
+    }
+    return null;
+}
+/**
+ * The kit's date picker: the browser's date input between ‹ and › icon buttons that step
+ * one open day (an app passes its trading calendar as `isOpen`), Alt+← and Alt+→ while it
+ * has focus, and an optional Today. Every date field in an app uses it.
+ */
+export function LumenDateInput({ value, onChange, min, max, isOpen, unit = 'day', onToday, atToday, size = 'sm', disabled, id, 'aria-label': ariaLabel, className, }) {
+    const prev = disabled ? null : stepDate(value, -1, { min, max, isOpen });
+    const next = disabled ? null : stepDate(value, 1, { min, max, isOpen });
+    const btn = size === 'sm' ? 'icon-xs' : 'icon-sm';
+    const onKeyDown = (e) => {
+        if (!e.altKey)
+            return;
+        const to = e.key === 'ArrowLeft' ? prev : e.key === 'ArrowRight' ? next : undefined;
+        if (to === undefined)
+            return;
+        e.preventDefault();
+        if (to)
+            onChange(to);
+    };
+    return (_jsxs("div", { className: cn('inline-flex shrink-0 items-center gap-0.5', className), children: [_jsx(IconButton, { icon: ChevronLeftIcon, label: `Previous ${unit}`, size: btn, disabled: !prev, onClick: () => prev && onChange(prev) }), _jsx(Input, { type: "date", id: id, "aria-label": ariaLabel ?? 'Date', className: cn('tabular-nums', size === 'sm' ? 'h-7 w-32 text-xs md:text-xs' : 'w-36'), min: min, max: max, value: value, disabled: disabled, onKeyDown: onKeyDown, onChange: (e) => onChange(e.target.value) }), _jsx(IconButton, { icon: ChevronRightIcon, label: `Next ${unit}`, size: btn, disabled: !next, onClick: () => next && onChange(next) }), onToday && (_jsx(IconButton, { icon: CalendarClockIcon, label: "Today", size: btn, disabled: disabled || atToday, onClick: onToday }))] }));
+}

package/dist/lumen-security.d.ts

@@ -0,0 +1,92 @@
+/** What a callback answers: a problem to show the person (a string), or anything else when it worked. */
+export type LumenResult = Promise<unknown>;
+/** The ways to pass the second step that take a typed code. */
+export type LumenCodeMethod = 'email' | 'app' | 'backup';
+export interface LumenSecondStepProps {
+    /** The ways this person can pass the second step. */
+    methods: {
+        passkey?: boolean;
+        app?: boolean;
+        email?: boolean;
+        backup?: boolean;
+    };
+    /**
+     * The code method shown first (the app sends the first emailed code itself). Left out, it is
+     * the app, then email, then backup, whichever the person has; with none, only the passkey shows.
+     */
+    initial?: LumenCodeMethod;
+    /** Where emailed codes go, as the app wants it shown (masked or whole). */
+    emailTo?: string;
+    onPasskey?: () => LumenResult;
+    /** Sends a new emailed code. */
+    onSendEmail?: () => LumenResult;
+    onVerify: (method: LumenCodeMethod, code: string) => LumenResult;
+    /** Back to the first step; no link without it. */
+    onBack?: () => void;
+}
+/**
+ * The second step of a sign-in: the passkey first when the person has one, else a 6-digit code
+ * from their authenticator app or email, or a backup code. Goes inside LumenAuthStage.
+ */
+export declare function LumenSecondStep({ methods, initial, emailTo, onPasskey, onSendEmail, onVerify, onBack, }: LumenSecondStepProps): import("react").JSX.Element;
+/** Backup codes, shown once: copy, download, and a box to tick before Done. */
+export declare function LumenBackupCodes({ codes, onDone, fileName, doneLabel, }: {
+    codes: string[];
+    onDone: () => void;
+    fileName?: string;
+    doneLabel?: string;
+}): import("react").JSX.Element;
+/** A passkey the person has added. */
+export interface LumenPasskey {
+    id: string;
+    name?: string | null;
+    createdAt?: Date | string | null;
+}
+export interface LumenSignInMethodsProps {
+    /** The password row; its Change opens the app's own flow. */
+    password?: {
+        onChange: () => void;
+    };
+    passkeys?: {
+        list: LumenPasskey[];
+        /** Adds one under the name the person typed; the device asks for their face, finger or PIN. */
+        onAdd: (name: string) => LumenResult;
+        onRemove: (id: string) => LumenResult;
+    };
+    /** The authenticator app (TOTP). Turning it on asks for the password first. */
+    app?: {
+        on: boolean;
+        /** Checks the password and starts setup: the app's otpauth:// link and fresh backup codes. */
+        onStart: (password: string) => Promise<{
+            uri: string;
+            backupCodes: string[];
+        } | string>;
+        /** Confirms setup with the first code the app shows. */
+        onConfirm: (code: string) => LumenResult;
+        /** Turns it off after the password; no Turn off without it. */
+        onTurnOff?: (password: string) => LumenResult;
+        /** Whether Replace shows while it is on (set up again over the old one); true when absent. */
+        replaceable?: boolean;
+    };
+    /** A code emailed at each sign-in. */
+    email?: {
+        /** Where the codes go, as the app wants it shown. */
+        to: string;
+        on: boolean;
+        /** No switch without it: emailed codes stay on. */
+        onToggle?: (on: boolean) => LumenResult;
+        /** Why the switch is locked (it is the only second step left); unlocked when absent. */
+        locked?: string;
+    };
+    backup?: {
+        /** Codes left, or null when unknown. */
+        left: number | null;
+        /** Checks the password and makes 10 new codes; the old ones stop working. */
+        onRenew: (password: string) => Promise<string[] | string>;
+    };
+}
+/**
+ * Settings ▸ General ▸ Security: the password, then the second-step methods (passkeys, an
+ * authenticator app, emailed codes, backup codes). Adding or changing one opens its steps in place.
+ */
+export declare function LumenSignInMethods({ password, passkeys, app, email, backup, }: LumenSignInMethodsProps): import("react").JSX.Element;

package/dist/lumen-security.js

@@ -0,0 +1,200 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Two-step sign-in, the same on every app: the second step after a password (LumenSecondStep), the
+// sign-in methods in Settings ▸ General ▸ Security (LumenSignInMethods), and the backup codes shown
+// once (LumenBackupCodes). They draw the screens and call the app back; the app talks to its own
+// sign-in service and decides which methods it allows. A callback answers with a problem to show,
+// or nothing when it worked.
+import { Check, Copy, Download, Fingerprint, Lock, Mail, Plus, Smartphone, Ticket, } from 'lucide-react';
+import { QRCodeSVG } from 'qrcode.react';
+import { useState } from 'react';
+import { LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenCodeField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+import { SettingRow } from './settings.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Checkbox } from './ui/checkbox.js';
+import { FieldSeparator } from './ui/field.js';
+import { Input } from './ui/input.js';
+import { Label } from './ui/label.js';
+import { Switch } from './ui/switch.js';
+/** The problem a callback answered, if any; a throw counts as one. */
+const problemOf = (work) => work().then((r) => (typeof r === 'string' && r ? r : null), () => 'That didn’t work. Try again.');
+const link = 'text-primary underline-offset-4 hover:underline';
+/**
+ * The second step of a sign-in: the passkey first when the person has one, else a 6-digit code
+ * from their authenticator app or email, or a backup code. Goes inside LumenAuthStage.
+ */
+export function LumenSecondStep({ methods, initial, emailTo, onPasskey, onSendEmail, onVerify, onBack, }) {
+    const [method, setMethod] = useState(initial ?? ['app', 'email', 'backup'].find((m) => methods[m]) ?? null);
+    const [code, setCode] = useState('');
+    const [error, setError] = useState(null);
+    const [note, setNote] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const run = async (work) => {
+        setError(null);
+        setBusy(true);
+        const problem = await problemOf(work);
+        setBusy(false);
+        if (problem)
+            setError(problem);
+    };
+    const switchTo = async (m) => {
+        setMethod(m);
+        setCode('');
+        setError(null);
+        setNote(null);
+        if (m === 'email' && onSendEmail) {
+            await run(onSendEmail);
+            setNote(emailTo ? `We emailed a code to ${emailTo}.` : 'We emailed you a code.');
+        }
+    };
+    const verify = (e) => {
+        e.preventDefault();
+        if (!method)
+            return;
+        if (method !== 'backup' && code.length !== 6)
+            return setError('Enter all 6 digits.');
+        return run(() => onVerify(method, code.trim()));
+    };
+    const others = [
+        { m: 'app', label: 'Use my authenticator app instead' },
+        { m: 'email', label: 'Email me a code instead' },
+        { m: 'backup', label: 'Use a backup code' },
+    ].filter((o) => o.m !== method && methods[o.m]);
+    const sub = method === 'email'
+        ? emailTo
+            ? `We emailed a code to ${emailTo}.`
+            : 'We emailed you a code.'
+        : method === 'app'
+            ? 'Enter the code from your authenticator app.'
+            : method === 'backup'
+                ? 'Enter one of the backup codes you saved. Each works once.'
+                : 'Use your passkey to finish signing in.';
+    return (_jsxs(_Fragment, { children: [_jsx(LumenAuthHeading, { title: "Confirm it\u2019s you", sub: sub }), _jsxs("div", { className: "flex flex-col gap-4", children: [methods.passkey && onPasskey && (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "lg", className: "h-10", disabled: busy, onClick: () => run(onPasskey), children: [_jsx(Fingerprint, {}), " ", busy ? 'Waiting for your passkey…' : 'Use my passkey'] }), method && _jsx(FieldSeparator, { children: "or enter the code" })] })), _jsx(LumenAuthNote, { children: note }), method && (_jsxs("form", { className: "flex flex-col gap-4", onSubmit: verify, children: [method === 'backup' ? (_jsxs(_Fragment, { children: [_jsx(Input, { "aria-label": "Backup code", autoComplete: "one-time-code", className: "h-12 text-center font-code text-lg", value: code, onChange: (e) => setCode(e.target.value) }), _jsx(LumenAuthProblem, { children: error })] })) : (_jsx(LumenCodeField, { value: code, onChange: setCode, error: error, hint: method === 'email'
+                                    ? 'It expires in 5 minutes.'
+                                    : 'The code changes every 30 seconds.', onResend: method === 'email' && onSendEmail
+                                    ? async () => {
+                                        await run(onSendEmail);
+                                        setNote(emailTo ? `New code sent to ${emailTo}.` : 'New code sent.');
+                                    }
+                                    : undefined })), _jsx(Button, { size: "lg", variant: "outline", type: "submit", className: "h-10", disabled: busy, children: "Verify" })] })), _jsxs("div", { className: "flex flex-col items-center gap-2 text-sm", children: [others.map((o) => (_jsx("button", { type: "button", className: link, onClick: () => switchTo(o.m), children: o.label }, o.m))), onBack && (_jsx("button", { type: "button", className: link, onClick: onBack, children: "Back to sign in" }))] })] })] }));
+}
+/** Backup codes, shown once: copy, download, and a box to tick before Done. */
+export function LumenBackupCodes({ codes, onDone, fileName = 'backup-codes.txt', doneLabel = 'Done', }) {
+    const [saved, setSaved] = useState(false);
+    const text = codes.join('\n');
+    const download = () => {
+        const url = URL.createObjectURL(new Blob([`${text}\n`], { type: 'text/plain' }));
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: "If you lose your devices, each code signs you in once. They are shown only now." }), _jsx("div", { className: "grid grid-cols-2 gap-x-3 gap-y-1 rounded-lg bg-muted p-3 font-code text-sm", children: codes.map((c) => (_jsx("span", { className: "text-center", children: c }, c))) }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", className: "flex-1", onClick: () => navigator.clipboard?.writeText(text), children: [_jsx(Copy, {}), " Copy"] }), _jsxs(Button, { variant: "outline", className: "flex-1", onClick: download, children: [_jsx(Download, {}), " Download"] })] }), _jsxs(Label, { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: saved, onCheckedChange: (v) => setSaved(v === true) }), " I saved them somewhere safe"] }), _jsx(Button, { disabled: !saved, onClick: onDone, children: doneLabel })] }));
+}
+const when = (d) => d
+    ? new Date(d).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+    : '';
+/** A row's icon, in the same square as the sign-in screen's points. */
+function RowIcon({ children }) {
+    return (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4", children: children }));
+}
+/**
+ * Settings ▸ General ▸ Security: the password, then the second-step methods (passkeys, an
+ * authenticator app, emailed codes, backup codes). Adding or changing one opens its steps in place.
+ */
+export function LumenSignInMethods({ password, passkeys, app, email, backup, }) {
+    const [flow, setFlow] = useState(null);
+    const [name, setName] = useState('');
+    const [secret, setSecret] = useState('');
+    const [code, setCode] = useState('');
+    const [setup, setSetup] = useState(null);
+    const [codes, setCodes] = useState([]);
+    const [removing, setRemoving] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const open = (f) => {
+        setFlow(f);
+        setError(null);
+        setSecret('');
+        setCode('');
+        setName('');
+    };
+    const run = async (work, next) => {
+        setError(null);
+        setBusy(true);
+        const problem = await problemOf(work);
+        setBusy(false);
+        if (problem)
+            return setError(problem);
+        next?.();
+    };
+    const cancel = (_jsx(Button, { type: "button", variant: "ghost", onClick: () => open(null), disabled: busy, children: "Cancel" }));
+    if (flow === 'passkey' && passkeys) {
+        return (_jsxs("form", { className: "flex max-w-md flex-col gap-4 py-2", onSubmit: (e) => {
+                e.preventDefault();
+                run(() => passkeys.onAdd(name.trim()), () => open(null));
+            }, children: [_jsx("h4", { className: "font-semibold", children: "Add a passkey" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "lumen-passkey-name", children: "Name it" }), _jsx(Input, { id: "lumen-passkey-name", placeholder: "MacBook, iPhone, YubiKey", value: name, onChange: (e) => setName(e.target.value) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "So you can tell your passkeys apart later." })] }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Your device asks for your face, fingerprint or PIN. That never leaves the device." }), _jsx(LumenAuthProblem, { children: error }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { type: "submit", disabled: busy, children: [_jsx(Fingerprint, {}), " ", busy ? 'Waiting for your device…' : 'Add passkey'] }), cancel] })] }));
+    }
+    // The steps that ask for the password first: turning the app on or off, and new backup codes.
+    if ((flow === 'app' && app) ||
+        (flow === 'app-off' && app?.onTurnOff) ||
+        (flow === 'backup' && backup)) {
+        const title = flow === 'app'
+            ? 'Set up an authenticator app'
+            : flow === 'app-off'
+                ? 'Turn off the authenticator app'
+                : 'Make new backup codes';
+        const submit = (e) => {
+            e.preventDefault();
+            if (flow === 'app' && app) {
+                return run(async () => {
+                    const res = await app.onStart(secret);
+                    if (typeof res === 'string')
+                        return res;
+                    setSetup(res);
+                    open('app-confirm');
+                });
+            }
+            if (flow === 'app-off' && app?.onTurnOff)
+                return run(() => app.onTurnOff?.(secret) ?? Promise.resolve(), () => open(null));
+            if (flow === 'backup' && backup) {
+                return run(async () => {
+                    const res = await backup.onRenew(secret);
+                    if (typeof res === 'string')
+                        return res;
+                    setCodes(res);
+                    open('codes');
+                });
+            }
+        };
+        return (_jsxs("form", { className: "flex max-w-md flex-col gap-4 py-2", onSubmit: submit, children: [flow === 'app' && _jsx(LumenStepBar, { at: 1, of: 3 }), _jsx("h4", { className: "font-semibold", children: title }), _jsx("p", { className: "text-muted-foreground text-sm", children: "First, confirm it\u2019s you with your password." }), _jsx(LumenPasswordField, { value: secret, onChange: setSecret, autoComplete: "current-password" }), _jsx(LumenAuthProblem, { children: error }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "submit", variant: flow === 'app-off' ? 'destructive' : 'default', disabled: busy || !secret, children: flow === 'app-off' ? 'Turn off' : 'Continue' }), cancel] })] }));
+    }
+    if (flow === 'app-confirm' && app && setup) {
+        const key = new URL(setup.uri).searchParams.get('secret') ?? '';
+        return (_jsxs("form", { className: "flex max-w-md flex-col gap-4 py-2", onSubmit: (e) => {
+                e.preventDefault();
+                if (code.length !== 6)
+                    return setError('Enter all 6 digits.');
+                return run(() => app.onConfirm(code), () => {
+                    setCodes(setup.backupCodes);
+                    open('codes');
+                });
+            }, children: [_jsx(LumenStepBar, { at: 2, of: 3 }), _jsx("h4", { className: "font-semibold", children: "Scan this code" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Open 1Password, Google Authenticator or any authenticator app, then scan it." }), _jsx(QRCodeSVG, { value: setup.uri, size: 160, marginSize: 2, className: "self-center rounded-md bg-white" }), _jsxs("div", { className: "flex flex-col items-center gap-1 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Can\u2019t scan it? Enter this key:" }), _jsxs("button", { type: "button", className: "flex items-center gap-2 break-all font-code", onClick: () => navigator.clipboard?.writeText(key), children: [key.match(/.{1,4}/g)?.join(' '), " ", _jsx(Copy, { className: "size-3.5 shrink-0" })] })] }), _jsx(LumenCodeField, { value: code, onChange: setCode, error: error, hint: "Enter the 6 digits it shows." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "submit", disabled: busy, children: "Turn on" }), cancel] })] }));
+    }
+    if (flow === 'codes') {
+        return (_jsxs("div", { className: "flex max-w-md flex-col gap-2 py-2", children: [setup && _jsx(LumenStepBar, { at: 3, of: 3 }), _jsx("h4", { className: "font-semibold", children: "Save your backup codes" }), _jsx(LumenBackupCodes, { codes: codes, onDone: () => {
+                        setSetup(null);
+                        setCodes([]);
+                        open(null);
+                    } })] }));
+    }
+    const list = passkeys?.list ?? [];
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenAuthProblem, { children: error }), password && (_jsx(SettingRow, { label: "Password", description: "The first step, every time.", children: _jsxs(Button, { size: "sm", variant: "outline", onClick: password.onChange, children: [_jsx(Lock, {}), " Change"] }) })), _jsx("p", { className: "pt-4 pb-1 font-semibold text-muted-foreground text-xs uppercase tracking-wide", children: "Second step \u00B7 one of these, every time" }), passkeys && (_jsxs(_Fragment, { children: [_jsx(SettingRow, { label: "Passkeys", description: list.length
+                            ? `${list.length} added. The fastest second step, and it can’t be phished.`
+                            : 'None yet. The fastest second step, and it can’t be phished.', children: _jsxs(Button, { size: "sm", onClick: () => open('passkey'), children: [_jsx(Plus, {}), " Add a passkey"] }) }), list.map((p) => (_jsxs("div", { className: "flex items-center gap-3 border-b py-2 pl-4 text-sm", children: [_jsx(Fingerprint, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: p.name || 'Passkey' }), p.createdAt && (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["Added ", when(p.createdAt)] }))] }), removing === p.id ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "destructive", disabled: busy, onClick: () => run(() => passkeys.onRemove(p.id), () => setRemoving(null)), children: "Remove" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setRemoving(null), children: "Keep" })] })) : (_jsx(Button, { size: "sm", variant: "ghost", className: "text-destructive", onClick: () => setRemoving(p.id), children: "Remove" }))] }, p.id)))] })), app && (_jsx(SettingRow, { label: "Authenticator app", description: app.on
+                    ? 'On. A 6-digit code from your app.'
+                    : 'A 6-digit code from 1Password, Google Authenticator or similar.', children: _jsxs("div", { className: "flex items-center gap-2", children: [app.on && (_jsxs(Badge, { variant: "secondary", children: [_jsx(Check, {}), " On"] })), (!app.on || app.replaceable !== false) && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => open('app'), children: [_jsx(Smartphone, {}), " ", app.on ? 'Replace' : 'Set up'] })), app.on && app.onTurnOff && (_jsx(Button, { size: "sm", variant: "ghost", className: "text-destructive", onClick: () => open('app-off'), children: "Turn off" }))] }) })), email && (_jsx(SettingRow, { label: "Emailed code", description: email.locked && email.on ? email.locked : `A 6-digit code to ${email.to}.`, htmlFor: "lumen-email-code", children: email.onToggle ? (_jsx(Switch, { id: "lumen-email-code", checked: email.on, disabled: busy || (email.on && Boolean(email.locked)), onCheckedChange: (v) => run(() => email.onToggle?.(v) ?? Promise.resolve()) })) : (_jsx(Mail, { className: "size-4 text-muted-foreground" })) })), backup && (_jsx(SettingRow, { label: "Backup codes", description: backup.left === null
+                    ? 'Each works once, for when your devices are lost.'
+                    : `${backup.left} left. Each works once, for when your devices are lost.`, children: _jsxs(Button, { size: "sm", variant: "outline", onClick: () => open('backup'), children: [_jsx(Ticket, {}), " Make new codes"] }) }))] }));
+}

package/dist/settings.d.ts

@@ -33,8 +33,8 @@ export declare function ThemeToggle({ compact }: {
     compact?: boolean;
 }): import("react").JSX.Element;
 /** Every Settings section in the order the dialog lists them: General, the product's, the app's. */
-export declare function allSettings(profile: ReactNode | undefined, shared?: SettingsSectionDef[], sections?: SettingsSectionDef[]): SettingsSectionDef[];
-export declare function LumenSettings({ open, section, onOpen, onClose, appLabel, profile, sections, shared, sharedLabel, }: {
+export declare function allSettings(profile: ReactNode | undefined, shared?: SettingsSectionDef[], sections?: SettingsSectionDef[], security?: ReactNode): SettingsSectionDef[];
+export declare function LumenSettings({ open, section, onOpen, onClose, appLabel, profile, security, sections, shared, sharedLabel, }: {
     open: boolean;
     /** The section shown; unknown ids show Profile. */
     section: string;
@@ -44,6 +44,8 @@ export declare function LumenSettings({ open, section, onOpen, onClose, appLabel
     appLabel: string;
     /** Profile's content, the first General section; none without it. */
     profile?: ReactNode;
+    /** Security's content, after Profile (LumenSignInMethods); none without it. */
+    security?: ReactNode;
     sections?: SettingsSectionDef[];
     /** Sections the product adds to every app (the assistant), listed under `sharedLabel` after General. */
     shared?: SettingsSectionDef[];

package/dist/settings.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // sections (an app: Repos). On phone the list becomes a picker.
 // A search box tops the list and filters the rows on every section.
 // `?settings=<section>` in the URL opens it at that section (GitHub's install page returns there).
-import { LogOutIcon, MonitorIcon, MoonIcon, PaletteIcon, SearchIcon, SlidersHorizontalIcon, SunIcon, UserRoundIcon, XIcon, } from 'lucide-react';
+import { LogOutIcon, MonitorIcon, MoonIcon, PaletteIcon, SearchIcon, ShieldCheckIcon, SlidersHorizontalIcon, SunIcon, UserRoundIcon, XIcon, } from 'lucide-react';
 import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import { toast } from 'sonner';
@@ -79,6 +79,12 @@ const PROFILE = {
     icon: UserRoundIcon,
     description: 'Your name and sign-in on every desk.',
 };
+const SECURITY = {
+    id: 'security',
+    title: 'Security',
+    icon: ShieldCheckIcon,
+    description: 'How you sign in. Changes ask you to confirm it’s you.',
+};
 const GENERAL = [
     {
         id: 'appearance',
@@ -96,12 +102,16 @@ const GENERAL = [
     },
 ];
 /** Every Settings section in the order the dialog lists them: General, the product's, the app's. */
-export function allSettings(profile, shared = [], sections = []) {
-    const general = profile ? [{ ...PROFILE, content: profile }, ...GENERAL] : GENERAL;
+export function allSettings(profile, shared = [], sections = [], security) {
+    const general = [
+        ...(profile ? [{ ...PROFILE, content: profile }] : []),
+        ...(security ? [{ ...SECURITY, content: security }] : []),
+        ...GENERAL,
+    ];
     return [...general, ...shared, ...sections];
 }
-export function LumenSettings({ open, section, onOpen, onClose, appLabel, profile, sections = [], shared = [], sharedLabel = 'All apps', }) {
-    const all = allSettings(profile, shared, sections);
+export function LumenSettings({ open, section, onOpen, onClose, appLabel, profile, security, sections = [], shared = [], sharedLabel = 'All apps', }) {
+    const all = allSettings(profile, shared, sections, security);
     const general = all.slice(0, all.length - shared.length - sections.length);
     const current = all.find((s) => s.id === section) ?? all[0];
     // The assistant opens Settings at a section (it never changes a setting); Undo puts it back as it was.

package/dist/shell.d.ts

@@ -69,6 +69,8 @@ export interface LumenShellProps {
     signOutUrl?: string;
     /** Settings ▸ General ▸ Profile's content; no Profile section without it. */
     profile?: ReactNode;
+    /** Settings ▸ General ▸ Security's content (LumenSignInMethods); no Security section without it. */
+    security?: ReactNode;
     /** Reloads the page's data and drops every cached read (TanStack Query `invalidateQueries`);
      *  shows Refresh in the header, which then mounts the page again. */
     onRefresh?: () => Promise<unknown>;
@@ -87,7 +89,7 @@ export interface LumenShellProps {
     /** The routed page (usually `<Outlet />`). */
     children: ReactNode;
 }
-export declare function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, settings, shared, sharedLabel, user, signOutUrl, profile, onRefresh, hideAmounts, onLogs, headerActions, panel, finder, wrap, children, }: LumenShellProps): import("react").JSX.Element;
+export declare function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, settings, shared, sharedLabel, user, signOutUrl, profile, security, onRefresh, hideAmounts, onLogs, headerActions, panel, finder, wrap, children, }: LumenShellProps): import("react").JSX.Element;
 /** A status bar entry: an optional health dot, a label and a mono value. */
 export declare function StatusItem({ label, value, ok, className, }: {
     label: ReactNode;

package/dist/shell.js

@@ -88,7 +88,7 @@ const settingsFromUrl = (() => {
     window.history.replaceState(window.history.state, '', url);
     return at || 'profile';
 })();
-export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, settings, shared, sharedLabel, user = null, signOutUrl, profile, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
+export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, settings, shared, sharedLabel, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
     const [statusSlot, setStatusSlot] = useState(null);
     const [refreshing, setRefreshing] = useState(false);
     // Refresh reloads the layout too: once the data is fresh the page mounts
@@ -117,7 +117,7 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
         document.documentElement.dataset.app = app;
     }, [app]);
     // Find lists every Settings section by name.
-    const sectionNames = JSON.stringify(allSettings(profile, shared, settings).map((s) => ({ id: s.id, title: s.title })));
+    const sectionNames = JSON.stringify(allSettings(profile, shared, settings, security).map((s) => ({ id: s.id, title: s.title })));
     const findSettings = useMemo(() => JSON.parse(sectionNames), [sectionNames]);
     return (_jsx(Ctx.Provider, { value: {
             app,
@@ -129,7 +129,7 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
             refreshing,
             hideAmounts,
             headerActions,
-        }, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, sections: settings, shared: shared, sharedLabel: sharedLabel }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }));
+        }, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }));
 }
 /** A status bar entry: an optional health dot, a label and a mono value. */
 export function StatusItem({ label, value, ok, className, }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "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.1.17",
+    "@columenlabs/lumen-ui-types": "0.1.19",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -62,6 +62,7 @@
     "lightweight-charts": "^5.2.1",
     "lucide-react": "^1.48.0",
     "papaparse": "5.5.3",
+    "qrcode.react": "4.2.0",
     "radix-ui": "^1.6.7",
     "react-error-boundary": "^6.1.6",
     "react-grid-layout": "2.2.4",