@vamos-ui/react 0.2.0 → 0.3.0

package/dist/business/index.js

@@ -18,3 +18,5 @@ export { SetupChecklist, SetupChecklistLauncher, setupChecklistLabels, } from ".
 // Permission matrix
 export { PermissionMatrix, PermissionMatrixCell, PermissionDiff, PermissionCompare, permissionMatrixLabels, } from "./permission-matrix.js";
 export { diffPermissions, applyDependencies, effectiveLevel, scopeRank, isGranted, setMany, setPermission, SCOPE_ORDER, } from "./permission-core.js";
+// Signer status (e-signature progress)
+export { SignerStatus, signerStatusLabels, } from "./signer-status.js";

package/dist/business/signer-status.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+export type SignerState = "waiting" | "sent" | "viewed" | "signed" | "declined";
+export interface Signer {
+    id: string;
+    name: string;
+    email?: string;
+    /** "Client", "Account manager", "Witness". */
+    role?: string;
+    status: SignerState;
+    /** When the current status happened (ISO date-time). */
+    at?: string;
+    /** Decline reason or a note. */
+    note?: React.ReactNode;
+    /** Avatar image. */
+    avatarSrc?: string;
+}
+export declare const signerStatusLabels: {
+    title: string;
+    summary: string;
+    declinedSummary: string;
+    complete: string;
+    waiting: string;
+    sent: string;
+    viewed: string;
+    signed: string;
+    declined: string;
+    remind: string;
+    remindName: string;
+    reminded: string;
+    order: string;
+};
+export type SignerStatusLabels = typeof signerStatusLabels;
+export interface SignerStatusProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    signers: Signer[];
+    /** Signers sign in list order — numbers the rows and draws the chain. */
+    sequential?: boolean;
+    /** Heading. Default "Signatures"; `null` hides the header row. */
+    title?: React.ReactNode;
+    /** Shows "Remind" on sent / viewed rows. Resolve to show "Reminder sent". */
+    onRemind?: (signer: Signer) => void | Promise<void>;
+    /** Fixed reference time for relative dates (epoch ms) — tests, screenshots. */
+    now?: number;
+    labels?: Partial<SignerStatusLabels>;
+}
+/**
+ * E-signature progress for a quote, contract or offer letter: who signs, in which order,
+ * where each person is (sent, viewed, signed, declined) and when — with a reminder action.
+ *
+ * ```tsx
+ * <SignerStatus sequential signers={contract.signers} onRemind={(s) => api.remind(s.id)} />
+ * ```
+ */
+export declare const SignerStatus: React.ForwardRefExoticComponent<SignerStatusProps & React.RefAttributes<HTMLDivElement>>;

package/dist/business/signer-status.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { BellRing, Check, Clock3, Eye, Send, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { Avatar } from "../components/avatar.js";
+import { Button } from "../components/button.js";
+export const signerStatusLabels = {
+    title: "Signatures",
+    summary: "{signed} of {total} signed",
+    declinedSummary: "Declined by {name}",
+    complete: "Fully signed",
+    waiting: "Waiting",
+    sent: "Sent",
+    viewed: "Viewed",
+    signed: "Signed",
+    declined: "Declined",
+    remind: "Remind",
+    remindName: "Send a reminder to {name}",
+    reminded: "Reminder sent",
+    order: "Signs {position}",
+};
+const stateIcon = {
+    waiting: Clock3,
+    sent: Send,
+    viewed: Eye,
+    signed: Check,
+    declined: X,
+};
+const stateTone = {
+    waiting: "text-fg-subtle",
+    sent: "tone-info tone-soft",
+    viewed: "tone-warning tone-soft",
+    signed: "tone-success tone-soft",
+    declined: "tone-danger tone-soft",
+};
+/**
+ * E-signature progress for a quote, contract or offer letter: who signs, in which order,
+ * where each person is (sent, viewed, signed, declined) and when — with a reminder action.
+ *
+ * ```tsx
+ * <SignerStatus sequential signers={contract.signers} onRemind={(s) => api.remind(s.id)} />
+ * ```
+ */
+export const SignerStatus = React.forwardRef(function SignerStatus({ signers, sequential, title, onRemind, now, labels, className, ...props }, ref) {
+    const t = useLabels("signerStatus", signerStatusLabels, labels);
+    const f = useFormat();
+    const titleId = React.useId();
+    const [reminded, setReminded] = React.useState({});
+    const signed = signers.filter((s) => s.status === "signed").length;
+    const declined = signers.find((s) => s.status === "declined");
+    const total = signers.length;
+    const heading = title === undefined ? t("title") : title;
+    const summary = declined ? t("declinedSummary", { name: declined.name }) : signed === total && total > 0 ? t("complete") : t("summary", { signed: f.number(signed), total: f.number(total) });
+    const remind = async (s) => {
+        if (!onRemind)
+            return;
+        setReminded((r) => ({ ...r, [s.id]: "busy" }));
+        try {
+            await onRemind(s);
+            setReminded((r) => ({ ...r, [s.id]: "done" }));
+        }
+        catch {
+            setReminded(({ [s.id]: _drop, ...rest }) => rest);
+        }
+    };
+    return (_jsxs("section", { ref: ref, "data-slot": "signer-status", "aria-labelledby": heading ? titleId : undefined, className: cn("grid gap-3", className), ...props, children: [heading ? (_jsxs("header", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h3", { id: titleId, className: "text-sm font-medium text-fg", children: heading }), _jsx("span", { className: cn("text-xs tabular", declined ? "text-danger" : signed === total ? "text-success" : "text-fg-muted"), children: summary })] }), _jsx("div", { "aria-hidden": "true", className: "flex gap-1", children: signers.map((s) => (_jsx("span", { className: cn("h-1 flex-1 rounded-full", s.status === "signed" ? "bg-success" : s.status === "declined" ? "bg-danger" : s.status === "viewed" ? "bg-warning" : s.status === "sent" ? "bg-info" : "bg-track") }, s.id))) })] })) : null, _jsx("ol", { className: "grid", children: signers.map((s, i) => {
+                    const Icon = stateIcon[s.status];
+                    const canRemind = onRemind && (s.status === "sent" || s.status === "viewed");
+                    const r = reminded[s.id];
+                    const when = s.at ? f.relative(s.at, now != null ? { now } : undefined) : null;
+                    return (_jsxs("li", { "data-state": s.status, className: "relative flex items-start gap-3 py-2.5 not-last:border-b not-last:border-line", children: [_jsxs("span", { className: "relative shrink-0", children: [_jsx(Avatar, { name: s.name, src: s.avatarSrc, size: "sm" }), sequential ? (_jsx("span", { "aria-hidden": "true", className: "absolute -end-1 -bottom-1 grid size-4 place-items-center rounded-full bg-surface text-[10px] font-semibold text-fg-muted ring-1 ring-line tabular", children: i + 1 })) : null] }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [_jsxs("p", { className: "flex min-w-0 items-baseline gap-2 text-[13px]", children: [_jsx("span", { className: "truncate font-medium text-fg", children: s.name }), s.role ? _jsx("span", { className: "truncate text-xs text-fg-subtle", children: s.role }) : null, sequential ? _jsx("span", { className: "sr-only", children: t("order", { position: i + 1 }) }) : null] }), s.email ? _jsx("p", { className: "truncate text-xs text-fg-muted", children: s.email }) : null, s.note ? _jsx("div", { className: "mt-1 text-xs text-fg-muted", children: s.note }) : null] }), _jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [_jsxs("span", { className: cn("inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[11px] font-medium [&_svg]:size-3", stateTone[s.status]), children: [_jsx(Icon, { "aria-hidden": "true" }), t(s.status)] }), when ? (_jsx("time", { dateTime: s.at, title: f.dateTime(s.at), className: "text-[11px] text-fg-subtle tabular", suppressHydrationWarning: true, children: when })) : null, canRemind ? (r === "done" ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1 text-[11px] text-fg-muted", children: [_jsx(Check, { "aria-hidden": "true", className: "size-3" }), t("reminded")] })) : (_jsxs(Button, { size: "xs", variant: "ghost", className: "-me-1.5", loading: r === "busy", "aria-label": t("remindName", { name: s.name }), onClick: () => remind(s), children: [_jsx(BellRing, { "aria-hidden": "true" }), t("remind")] }))) : null] })] }, s.id));
+                }) })] }));
+});

package/dist/charts/bar-chart.js

@@ -26,7 +26,11 @@ function BarPlot({ series: keys, layout, stack, radius = 4, highlight, valueLabe
     const [min] = extent(chart.data, visible.map((s) => s.key), stacked);
     const valueWidth = useValueAxisWidth(visible.map((s) => s.key), { stacked, percent });
     const categoryWidth = React.useMemo(() => (horizontal && chart.x ? Math.min(160, estimateAxisWidth(chart.data.map((r) => chart.formatX(r[chart.x])), 12)) : 0), [horizontal, chart]);
-    if (process.env.NODE_ENV !== "production" && chart.data.length > 20 && !horizontal) {
+    // A time series (dates on x) legitimately has many bars; the hint is for long category lists.
+    const timeAxis = (typeof chart.xFormat === "object" && chart.xFormat !== null && ("date" in chart.xFormat || "relative" in chart.xFormat)) ||
+        (chart.x != null && typeof chart.data[0]?.[chart.x] === "string" && /^\d{4}-\d{2}-\d{2}/.test(chart.data[0][chart.x])) ||
+        (chart.x != null && (chart.data[0]?.[chart.x] instanceof Date || typeof chart.data[0]?.[chart.x] === "number" && chart.data[0][chart.x] > 1e11));
+    if (process.env.NODE_ENV !== "production" && chart.data.length > 20 && !horizontal && !timeAxis) {
         console.warn("[vamos-ui] BarChart: more than 20 categories — use layout=\"horizontal\" or group the tail into \"Other\".");
     }
     const lastKey = visible[visible.length - 1]?.key;

package/dist/charts/combo-chart.js

@@ -40,7 +40,7 @@ function ComboPlot({ bars, lines, areas = [], endAxisFormat, endAxis, stackBars,
     const left = rtl ? "end" : "start";
     const yId = (key, fallback) => axisOf(key, fallback);
     const titleProps = (value, side) => value ? { value, angle: -90, position: side === "left" ? "insideLeft" : "insideRight", className: "vui-chart-axis-title", offset: 0, style: { textAnchor: "middle" } } : undefined;
-    return (_jsx(ChartFrame, { children: _jsxs(ComposedChart, { data: chart.data, margin: { top: 8, right: 4, bottom: 0, left: 4 }, barCategoryGap: "30%", children: [_jsx(ChartGrid, { yAxisId: "start" }), _jsx(ChartXAxis, {}), _jsx(ChartYAxis, { yAxisId: "start", orientation: left === "start" ? "left" : "right", domain: startDomain, ticks: ticksOf(startDomain), width: startWidth + (startAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, startFormat), label: titleProps(startAxisLabel, left === "start" ? "left" : "right"), keys: startKeys }), _jsx(ChartYAxis, { yAxisId: "end", orientation: left === "start" ? "right" : "left", domain: endDomain, ticks: ticksOf(endDomain), hide: !endAxis || endKeys.length === 0, width: endWidth + (endAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, endFormat), label: titleProps(endAxisLabel, left === "start" ? "right" : "left"), keys: endKeys }), _jsx(ChartTooltip, { cursor: { fill: "var(--hover)" } }), areas.map((key) => (_jsx(Area, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), type: "monotone", stroke: seriesColor(key), strokeWidth: 1.5, fill: `color-mix(in oklch, ${seriesColor(key)} 16%, transparent)`, isAnimationActive: chart.animate }, key))), bars.map((key, i) => (_jsx(Bar, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), stackId: stackBars ? "bars" : undefined, fill: seriesColor(key), radius: stackBars && i < bars.length - 1 ? 0 : [4, 4, 0, 0], maxBarSize: 40, isAnimationActive: chart.animate }, key))), lines.map((key) => {
+    return (_jsx(ChartFrame, { children: _jsxs(ComposedChart, { data: chart.data, stackOffset: startStacked && startDomain[0] < 0 ? "sign" : undefined, margin: { top: 8, right: 4, bottom: 0, left: 4 }, barCategoryGap: "30%", children: [_jsx(ChartGrid, { yAxisId: "start" }), _jsx(ChartXAxis, {}), _jsx(ChartYAxis, { yAxisId: "start", orientation: left === "start" ? "left" : "right", domain: startDomain, ticks: ticksOf(startDomain), width: startWidth + (startAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, startFormat), label: titleProps(startAxisLabel, left === "start" ? "left" : "right"), keys: startKeys }), _jsx(ChartYAxis, { yAxisId: "end", orientation: left === "start" ? "right" : "left", domain: endDomain, ticks: ticksOf(endDomain), hide: !endAxis || endKeys.length === 0, width: endWidth + (endAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, endFormat), label: titleProps(endAxisLabel, left === "start" ? "right" : "left"), keys: endKeys }), _jsx(ChartTooltip, { cursor: { fill: "var(--hover)" } }), areas.map((key) => (_jsx(Area, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), type: "monotone", stroke: seriesColor(key), strokeWidth: 1.5, fill: `color-mix(in oklch, ${seriesColor(key)} 16%, transparent)`, isAnimationActive: chart.animate }, key))), bars.map((key, i) => (_jsx(Bar, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), stackId: stackBars ? "bars" : undefined, fill: seriesColor(key), radius: stackBars && i < bars.length - 1 ? 0 : [4, 4, 0, 0], maxBarSize: 40, isAnimationActive: chart.animate }, key))), lines.map((key) => {
                     const s = chart.series.find((x) => x.key === key);
                     return (_jsx(Line, { yAxisId: yId(key, "end"), dataKey: key, name: s?.label, hide: chart.isHidden(key), type: "monotone", stroke: seriesColor(key), strokeWidth: 2, strokeDasharray: patternDash(s?.pattern), dot: { r: 2.5, fill: seriesColor(key), stroke: "var(--chart-tooltip)", strokeWidth: 1.5 }, activeDot: { r: 4, strokeWidth: 2, stroke: "var(--chart-tooltip)", fill: seriesColor(key) }, isAnimationActive: chart.animate }, key));
                 })] }) }));

package/dist/components/_qr-core.d.ts

@@ -0,0 +1,26 @@
+export type QrErrorCorrection = "L" | "M" | "Q" | "H";
+export interface QrMatrix {
+    /** Modules per side (version × 4 + 17). */
+    size: number;
+    version: number;
+    mask: number;
+    errorCorrection: QrErrorCorrection;
+    /** `modules[y][x]` — true = dark. */
+    modules: boolean[][];
+}
+/**
+ * Encode text (UTF-8, byte mode) as a QR matrix.
+ * Throws when the text does not fit version 40 at the chosen level.
+ *
+ * ```ts
+ * const qr = encodeQr("otpauth://totp/Northpoint:ada@example.com?secret=…", { errorCorrection: "M" });
+ * qr.size; // 41 (version 6)
+ * ```
+ */
+export declare function encodeQr(text: string, options?: {
+    errorCorrection?: QrErrorCorrection;
+    minVersion?: number;
+    mask?: number;
+}): QrMatrix;
+/** One SVG path (`d`) drawing every dark module, offset by `margin` modules. */
+export declare function qrPath(qr: Pick<QrMatrix, "size" | "modules">, margin?: number): string;

package/dist/components/_qr-core.js

@@ -0,0 +1,376 @@
+// QR Code Model 2 encoder (ISO/IEC 18004), byte mode, versions 1–40, all four error
+// correction levels, automatic mask choice. Pure and dependency-free so it runs in RSC.
+// Follows the structure of the public-domain-style reference algorithm (Nayuki).
+const ECL_INDEX = { L: 0, M: 1, Q: 2, H: 3 };
+const ECL_FORMAT = { L: 1, M: 0, Q: 3, H: 2 };
+// prettier-ignore
+const ECC_CODEWORDS_PER_BLOCK = [
+    [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
+    [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+    [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+];
+// prettier-ignore
+const NUM_ERROR_CORRECTION_BLOCKS = [
+    [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
+    [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
+    [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
+    [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81],
+];
+const bit = (x, i) => ((x >>> i) & 1) !== 0;
+function rawDataModules(ver) {
+    let result = (16 * ver + 128) * ver + 64;
+    if (ver >= 2) {
+        const numAlign = Math.floor(ver / 7) + 2;
+        result -= (25 * numAlign - 10) * numAlign - 55;
+        if (ver >= 7)
+            result -= 36;
+    }
+    return result;
+}
+function dataCodewords(ver, ecl) {
+    const e = ECL_INDEX[ecl];
+    return Math.floor(rawDataModules(ver) / 8) - ECC_CODEWORDS_PER_BLOCK[e][ver] * NUM_ERROR_CORRECTION_BLOCKS[e][ver];
+}
+/* Reed–Solomon over GF(2^8), polynomial 0x11D. */
+function gfMul(x, y) {
+    let z = 0;
+    for (let i = 7; i >= 0; i--) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((y >>> i) & 1) * x;
+    }
+    return z & 0xff;
+}
+function rsDivisor(degree) {
+    const result = new Array(degree - 1).fill(0);
+    result.push(1);
+    let root = 1;
+    for (let i = 0; i < degree; i++) {
+        for (let j = 0; j < result.length; j++) {
+            result[j] = gfMul(result[j], root);
+            if (j + 1 < result.length)
+                result[j] ^= result[j + 1];
+        }
+        root = gfMul(root, 0x02);
+    }
+    return result;
+}
+function rsRemainder(data, divisor) {
+    const result = divisor.map(() => 0);
+    for (const b of data) {
+        const factor = b ^ result.shift();
+        result.push(0);
+        divisor.forEach((coef, i) => (result[i] ^= gfMul(coef, factor)));
+    }
+    return result;
+}
+/** UTF-8 bytes without TextEncoder (works everywhere). */
+function utf8(text) {
+    const out = [];
+    for (const ch of text) {
+        const cp = ch.codePointAt(0);
+        if (cp < 0x80)
+            out.push(cp);
+        else if (cp < 0x800)
+            out.push(0xc0 | (cp >> 6), 0x80 | (cp & 63));
+        else if (cp < 0x10000)
+            out.push(0xe0 | (cp >> 12), 0x80 | ((cp >> 6) & 63), 0x80 | (cp & 63));
+        else
+            out.push(0xf0 | (cp >> 18), 0x80 | ((cp >> 12) & 63), 0x80 | ((cp >> 6) & 63), 0x80 | (cp & 63));
+    }
+    return out;
+}
+class Grid {
+    version;
+    size;
+    modules;
+    fn;
+    constructor(version) {
+        this.version = version;
+        this.size = version * 4 + 17;
+        this.modules = Array.from({ length: this.size }, () => new Array(this.size).fill(false));
+        this.fn = Array.from({ length: this.size }, () => new Array(this.size).fill(false));
+    }
+    setFn(x, y, dark) {
+        this.modules[y][x] = dark;
+        this.fn[y][x] = true;
+    }
+    alignmentPositions() {
+        if (this.version === 1)
+            return [];
+        const numAlign = Math.floor(this.version / 7) + 2;
+        const step = Math.floor((this.version * 8 + numAlign * 3 + 5) / (numAlign * 4 - 4)) * 2;
+        const result = [6];
+        for (let pos = this.size - 7; result.length < numAlign; pos -= step)
+            result.splice(1, 0, pos);
+        return result;
+    }
+    drawFunctionPatterns(ecl) {
+        const n = this.size;
+        for (let i = 0; i < n; i++) {
+            this.setFn(6, i, i % 2 === 0);
+            this.setFn(i, 6, i % 2 === 0);
+        }
+        this.finder(3, 3);
+        this.finder(n - 4, 3);
+        this.finder(3, n - 4);
+        const pos = this.alignmentPositions();
+        const k = pos.length;
+        for (let i = 0; i < k; i++)
+            for (let j = 0; j < k; j++) {
+                if ((i === 0 && j === 0) || (i === 0 && j === k - 1) || (i === k - 1 && j === 0))
+                    continue;
+                for (let dy = -2; dy <= 2; dy++)
+                    for (let dx = -2; dx <= 2; dx++)
+                        this.setFn(pos[i] + dx, pos[j] + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+            }
+        this.drawFormat(ecl, 0);
+        this.drawVersion();
+    }
+    finder(x, y) {
+        for (let dy = -4; dy <= 4; dy++)
+            for (let dx = -4; dx <= 4; dx++) {
+                const d = Math.max(Math.abs(dx), Math.abs(dy));
+                const xx = x + dx;
+                const yy = y + dy;
+                if (xx >= 0 && xx < this.size && yy >= 0 && yy < this.size)
+                    this.setFn(xx, yy, d !== 2 && d !== 4);
+            }
+    }
+    drawFormat(ecl, mask) {
+        const data = (ECL_FORMAT[ecl] << 3) | mask;
+        let rem = data;
+        for (let i = 0; i < 10; i++)
+            rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+        const bits = ((data << 10) | rem) ^ 0x5412;
+        const n = this.size;
+        for (let i = 0; i <= 5; i++)
+            this.setFn(8, i, bit(bits, i));
+        this.setFn(8, 7, bit(bits, 6));
+        this.setFn(8, 8, bit(bits, 7));
+        this.setFn(7, 8, bit(bits, 8));
+        for (let i = 9; i < 15; i++)
+            this.setFn(14 - i, 8, bit(bits, i));
+        for (let i = 0; i < 8; i++)
+            this.setFn(n - 1 - i, 8, bit(bits, i));
+        for (let i = 8; i < 15; i++)
+            this.setFn(8, n - 15 + i, bit(bits, i));
+        this.setFn(8, n - 8, true);
+    }
+    drawVersion() {
+        if (this.version < 7)
+            return;
+        let rem = this.version;
+        for (let i = 0; i < 12; i++)
+            rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
+        const bits = (this.version << 12) | rem;
+        for (let i = 0; i < 18; i++) {
+            const b = bit(bits, i);
+            const a = this.size - 11 + (i % 3);
+            const c = Math.floor(i / 3);
+            this.setFn(a, c, b);
+            this.setFn(c, a, b);
+        }
+    }
+    drawCodewords(data) {
+        let i = 0;
+        const n = this.size;
+        for (let right = n - 1; right >= 1; right -= 2) {
+            if (right === 6)
+                right = 5;
+            for (let vert = 0; vert < n; vert++)
+                for (let j = 0; j < 2; j++) {
+                    const x = right - j;
+                    const upward = ((right + 1) & 2) === 0;
+                    const y = upward ? n - 1 - vert : vert;
+                    if (!this.fn[y][x] && i < data.length * 8) {
+                        this.modules[y][x] = bit(data[i >>> 3], 7 - (i & 7));
+                        i++;
+                    }
+                }
+        }
+    }
+    applyMask(mask) {
+        for (let y = 0; y < this.size; y++)
+            for (let x = 0; x < this.size; x++) {
+                let invert;
+                switch (mask) {
+                    case 0:
+                        invert = (x + y) % 2 === 0;
+                        break;
+                    case 1:
+                        invert = y % 2 === 0;
+                        break;
+                    case 2:
+                        invert = x % 3 === 0;
+                        break;
+                    case 3:
+                        invert = (x + y) % 3 === 0;
+                        break;
+                    case 4:
+                        invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0;
+                        break;
+                    case 5:
+                        invert = ((x * y) % 2) + ((x * y) % 3) === 0;
+                        break;
+                    case 6:
+                        invert = (((x * y) % 2) + ((x * y) % 3)) % 2 === 0;
+                        break;
+                    default: invert = (((x + y) % 2) + ((x * y) % 3)) % 2 === 0;
+                }
+                if (!this.fn[y][x] && invert)
+                    this.modules[y][x] = !this.modules[y][x];
+            }
+    }
+    penalty() {
+        const n = this.size;
+        const m = this.modules;
+        let score = 0;
+        const line = (get) => {
+            let run = 1;
+            let s = 0;
+            for (let i = 1; i <= n; i++) {
+                if (i < n && get(i) === get(i - 1))
+                    run++;
+                else {
+                    if (run >= 5)
+                        s += 3 + (run - 5);
+                    run = 1;
+                }
+            }
+            // Finder-like 1:1:3:1:1 with four light modules on one side.
+            for (let i = 0; i + 10 < n + 4; i++) {
+                const at = (k) => (k < 0 || k >= n ? false : get(k));
+                const core = at(i) && !at(i + 1) && at(i + 2) && at(i + 3) && at(i + 4) && !at(i + 5) && at(i + 6);
+                if (!core)
+                    continue;
+                const before = !at(i - 1) && !at(i - 2) && !at(i - 3) && !at(i - 4);
+                const after = !at(i + 7) && !at(i + 8) && !at(i + 9) && !at(i + 10);
+                if (before || after)
+                    s += 40;
+            }
+            return s;
+        };
+        for (let y = 0; y < n; y++)
+            score += line((x) => m[y][x]);
+        for (let x = 0; x < n; x++)
+            score += line((y) => m[y][x]);
+        for (let y = 0; y < n - 1; y++)
+            for (let x = 0; x < n - 1; x++) {
+                const c = m[y][x];
+                if (c === m[y][x + 1] && c === m[y + 1][x] && c === m[y + 1][x + 1])
+                    score += 3;
+            }
+        let dark = 0;
+        for (const row of m)
+            for (const c of row)
+                if (c)
+                    dark++;
+        const total = n * n;
+        score += (Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1) * 10;
+        return score;
+    }
+}
+/**
+ * Encode text (UTF-8, byte mode) as a QR matrix.
+ * Throws when the text does not fit version 40 at the chosen level.
+ *
+ * ```ts
+ * const qr = encodeQr("otpauth://totp/Northpoint:ada@example.com?secret=…", { errorCorrection: "M" });
+ * qr.size; // 41 (version 6)
+ * ```
+ */
+export function encodeQr(text, options = {}) {
+    const ecl = options.errorCorrection ?? "M";
+    const bytes = utf8(text);
+    let version = Math.max(1, Math.min(40, options.minVersion ?? 1));
+    let capacityBits = 0;
+    for (;; version++) {
+        if (version > 40)
+            throw new RangeError("QR: text is too long to encode");
+        const ccBits = version < 10 ? 8 : 16;
+        capacityBits = dataCodewords(version, ecl) * 8;
+        if (4 + ccBits + bytes.length * 8 <= capacityBits)
+            break;
+    }
+    // Bit stream: mode (byte = 0100), length, data, terminator, padding.
+    const bits = [];
+    const push = (value, len) => {
+        for (let i = len - 1; i >= 0; i--)
+            bits.push((value >>> i) & 1);
+    };
+    push(0b0100, 4);
+    push(bytes.length, version < 10 ? 8 : 16);
+    for (const b of bytes)
+        push(b, 8);
+    push(0, Math.min(4, capacityBits - bits.length));
+    push(0, (8 - (bits.length % 8)) % 8);
+    for (let pad = 0xec; bits.length < capacityBits; pad ^= 0xec ^ 0x11)
+        push(pad, 8);
+    const data = [];
+    for (let i = 0; i < bits.length; i += 8)
+        data.push(bits.slice(i, i + 8).reduce((acc, b) => (acc << 1) | b, 0));
+    // Error correction + interleave.
+    const e = ECL_INDEX[ecl];
+    const numBlocks = NUM_ERROR_CORRECTION_BLOCKS[e][version];
+    const eccLen = ECC_CODEWORDS_PER_BLOCK[e][version];
+    const rawCodewords = Math.floor(rawDataModules(version) / 8);
+    const numShort = numBlocks - (rawCodewords % numBlocks);
+    const shortLen = Math.floor(rawCodewords / numBlocks);
+    const divisor = rsDivisor(eccLen);
+    const blocks = [];
+    for (let i = 0, k = 0; i < numBlocks; i++) {
+        const dat = data.slice(k, k + shortLen - eccLen + (i < numShort ? 0 : 1));
+        k += dat.length;
+        const ecc = rsRemainder(dat, divisor);
+        if (i < numShort)
+            dat.push(0);
+        blocks.push(dat.concat(ecc));
+    }
+    const codewords = [];
+    for (let i = 0; i < blocks[0].length; i++)
+        blocks.forEach((block, j) => {
+            if (i !== shortLen - eccLen || j >= numShort)
+                codewords.push(block[i]);
+        });
+    // Place, then pick the mask with the lowest penalty.
+    const grid = new Grid(version);
+    grid.drawFunctionPatterns(ecl);
+    grid.drawCodewords(codewords);
+    let mask = options.mask ?? -1;
+    if (mask < 0 || mask > 7) {
+        let best = Infinity;
+        for (let candidate = 0; candidate < 8; candidate++) {
+            grid.applyMask(candidate);
+            grid.drawFormat(ecl, candidate);
+            const p = grid.penalty();
+            if (p < best) {
+                best = p;
+                mask = candidate;
+            }
+            grid.applyMask(candidate); // undo (XOR)
+        }
+    }
+    grid.applyMask(mask);
+    grid.drawFormat(ecl, mask);
+    return { size: grid.size, version, mask, errorCorrection: ecl, modules: grid.modules };
+}
+/** One SVG path (`d`) drawing every dark module, offset by `margin` modules. */
+export function qrPath(qr, margin = 0) {
+    let d = "";
+    for (let y = 0; y < qr.size; y++) {
+        let x = 0;
+        while (x < qr.size) {
+            if (!qr.modules[y][x]) {
+                x++;
+                continue;
+            }
+            let run = 1;
+            while (x + run < qr.size && qr.modules[y][x + run])
+                run++;
+            d += `M${x + margin} ${y + margin}h${run}v1h-${run}z`;
+            x += run;
+        }
+    }
+    return d;
+}

package/dist/components/backup-codes.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export declare const backupCodesLabels: {
+    title: string;
+    copy: string;
+    copied: string;
+    copiedAnnouncement: string;
+    download: string;
+    regenerate: string;
+    used: string;
+    remaining: string;
+    fileHeader: string;
+};
+export type BackupCodesLabels = typeof backupCodesLabels;
+export interface BackupCodesProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onCopy"> {
+    /** One-time recovery codes, in display order. */
+    codes: string[];
+    /** Codes already spent — struck through and announced as used. */
+    used?: string[];
+    /** Heading above the grid. Default "Backup codes"; `null` hides it (label the region yourself). */
+    title?: React.ReactNode;
+    /** Name of the downloaded text file. Default `"backup-codes.txt"`. */
+    filename?: string;
+    /** Extra first line(s) of the downloaded file (account, service). */
+    fileNote?: string;
+    /** Called after the codes were copied. */
+    onCopy?: (text: string) => void;
+    /** Replace the default download (Blob + link) — e.g. to log it. */
+    onDownload?: (text: string) => void;
+    /** Shows a "New codes" button. */
+    onRegenerate?: () => void;
+    regenerating?: boolean;
+    labels?: Partial<BackupCodesLabels>;
+}
+/**
+ * One-time recovery codes after two-factor enrolment: a numbered monospace grid with copy,
+ * download and regenerate. Used codes stay visible, struck through.
+ *
+ * ```tsx
+ * <BackupCodes codes={codes} used={["4K7Q-PX2M"]} onRegenerate={regenerate} />
+ * ```
+ */
+export declare const BackupCodes: React.ForwardRefExoticComponent<BackupCodesProps & React.RefAttributes<HTMLDivElement>>;