@tollbooth-dpyc/web 1.0.0 → 1.1.0

package/dist/react/TableFilter.d.ts

@@ -0,0 +1,93 @@
+/**
+ * A filter bar for a table: any of a search box, a date range and a panel of
+ * questions, with one Clear chip shown only while something is on.
+ *
+ * Merged from the fleet's two shapes — the search + date range (cypher,
+ * excalibur, roastify, after TaxSort) and the mark that opens a panel of
+ * toggles and numbers (goodearth). A site passes the groups it wants.
+ *
+ * Controlled and presentational: the parent owns the applied values and runs
+ * the query (server-side, or `filterRows` in the browser), so paging reflects
+ * the filtered set. The search is applied on Enter or its chip, never on each
+ * keystroke. Mechanics only: every visual choice is the site's, through
+ * `classNames`; the actions are chips.
+ */
+import { type ReactNode } from "react";
+export interface DateFieldOption {
+    value: string;
+    label: string;
+}
+/** One question the panel asks: a toggle, or a number with a unit beside it. */
+export type FilterQuestion<F> = {
+    kind: "toggle";
+    key: keyof F;
+    label: string;
+} | {
+    kind: "number";
+    key: keyof F;
+    label: string;
+    unit: string;
+};
+export interface TableFilterClassNames {
+    root?: string;
+    /** The search box and its chip. */
+    search?: string;
+    input?: string;
+    /** Every action: search, the panel's mark, Clear. */
+    chip?: string;
+    /** Added to the panel's mark while a question is answered. */
+    chipActive?: string;
+    /** The date-field select, the two dates and the dash between. */
+    dates?: string;
+    select?: string;
+    date?: string;
+    separator?: string;
+    /** The box holding the mark and its panel (positioned: the panel hangs from it). */
+    questions?: string;
+    /** What is on, beside the mark. */
+    summary?: string;
+    panel?: string;
+    /** One question's row. */
+    question?: string;
+    checkbox?: string;
+    number?: string;
+    unit?: string;
+}
+export interface TableFilterSearch {
+    /** The applied text. */
+    value: string;
+    onSearch: (text: string) => void;
+    placeholder?: string;
+    /** Tooltip on the box, e.g. that it takes a regular expression. */
+    title?: string;
+}
+export interface TableFilterDates {
+    from: string;
+    to: string;
+    onFrom: (v: string) => void;
+    onTo: (v: string) => void;
+    /** Which date the range reads, when a row has more than one. */
+    field?: string;
+    fields?: DateFieldOption[];
+    onField?: (v: string) => void;
+}
+export interface TableFilterQuestions<F> {
+    value: F;
+    onChange: (f: F) => void;
+    questions: readonly FilterQuestion<F>[];
+    /** What is on, in as few words as fit beside the mark; "" when nothing is. */
+    summary: string;
+    /** The mark's icon. Default a sliders glyph. */
+    icon?: ReactNode;
+}
+export interface TableFilterProps<F extends object> {
+    search?: TableFilterSearch;
+    dates?: TableFilterDates;
+    questions?: TableFilterQuestions<F>;
+    /** Turn everything off. */
+    onClear: () => void;
+    searchIcon?: ReactNode;
+    clearLabel?: ReactNode;
+    classNames?: TableFilterClassNames;
+}
+export default function TableFilter<F extends object>({ search, dates, questions, onClear, searchIcon, clearLabel, classNames: c, }: TableFilterProps<F>): import("react").JSX.Element;

package/dist/react/TableFilter.js

@@ -0,0 +1,68 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A filter bar for a table: any of a search box, a date range and a panel of
+ * questions, with one Clear chip shown only while something is on.
+ *
+ * Merged from the fleet's two shapes — the search + date range (cypher,
+ * excalibur, roastify, after TaxSort) and the mark that opens a panel of
+ * toggles and numbers (goodearth). A site passes the groups it wants.
+ *
+ * Controlled and presentational: the parent owns the applied values and runs
+ * the query (server-side, or `filterRows` in the browser), so paging reflects
+ * the filtered set. The search is applied on Enter or its chip, never on each
+ * keystroke. Mechanics only: every visual choice is the site's, through
+ * `classNames`; the actions are chips.
+ */
+import { useEffect, useRef, useState } from "react";
+import { Search, SlidersHorizontal, X } from "lucide-react";
+import { filterActive } from "../table.js";
+function cx(...parts) {
+    const s = parts.filter(Boolean).join(" ");
+    return s || undefined;
+}
+export default function TableFilter({ search, dates, questions, onClear, searchIcon = _jsx(Search, { size: "1em", "aria-hidden": true }), clearLabel = (_jsxs(_Fragment, { children: [_jsx(X, { size: "1em", "aria-hidden": true }), " Clear"] })), classNames: c = {}, }) {
+    const active = filterActive({ search: search?.value, dateFrom: dates?.from, dateTo: dates?.to }, questions?.summary ?? "");
+    return (_jsxs("div", { className: c.root, children: [search && _jsx(SearchBox, { search: search, icon: searchIcon, c: c }), dates && _jsx(DateRange, { dates: dates, c: c }), questions && _jsx(QuestionPanel, { q: questions, c: c }), active && (_jsx("button", { type: "button", onClick: onClear, className: c.chip, children: clearLabel }))] }));
+}
+function SearchBox({ search, icon, c }) {
+    // Edited freely, applied on Enter or the chip; follows the applied value
+    // when it changes elsewhere (Clear).
+    const [input, setInput] = useState(search.value);
+    useEffect(() => setInput(search.value), [search.value]);
+    return (_jsxs("div", { className: c.search, children: [_jsx("input", { type: "search", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Enter")
+                        search.onSearch(input);
+                }, placeholder: search.placeholder ?? "Search…", title: search.title, "aria-label": "Search", className: c.input }), _jsx("button", { type: "button", onClick: () => search.onSearch(input), title: "Search", "aria-label": "Search", className: c.chip, children: icon })] }));
+}
+function DateRange({ dates, c }) {
+    return (_jsxs("div", { className: c.dates, children: [dates.fields && dates.fields.length > 0 && dates.onField && (_jsx("select", { value: dates.field, onChange: (e) => dates.onField(e.target.value), title: "Which date the range filters", "aria-label": "Date to filter", className: c.select, children: dates.fields.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })), _jsx("input", { type: "date", value: dates.from, max: dates.to || undefined, onChange: (e) => dates.onFrom(e.target.value), title: "From (inclusive)", "aria-label": "From date", className: c.date }), _jsx("span", { className: c.separator, "aria-hidden": true, children: "\u2013" }), _jsx("input", { type: "date", value: dates.to, min: dates.from || undefined, onChange: (e) => dates.onTo(e.target.value), title: "To (inclusive)", "aria-label": "To date", className: c.date })] }));
+}
+function QuestionPanel({ q, c }) {
+    const [open, setOpen] = useState(false);
+    const box = useRef(null);
+    // Dismissed by a tap outside or Escape.
+    useEffect(() => {
+        if (!open)
+            return;
+        const away = (e) => {
+            if (box.current && !box.current.contains(e.target))
+                setOpen(false);
+        };
+        const esc = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", away);
+        document.addEventListener("keydown", esc);
+        return () => {
+            document.removeEventListener("pointerdown", away);
+            document.removeEventListener("keydown", esc);
+        };
+    }, [open]);
+    const on = q.summary !== "";
+    const set = (key, v) => q.onChange({ ...q.value, [key]: v });
+    return (_jsxs("div", { className: c.questions, ref: box, children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, title: on ? `Filtered: ${q.summary}` : "Filter", "aria-label": on ? `Filtered: ${q.summary}` : "Filter", className: cx(c.chip, on && c.chipActive), children: [q.icon ?? _jsx(SlidersHorizontal, { size: "1em", "aria-hidden": true }), on && _jsx("span", { className: c.summary, children: q.summary })] }), open && (_jsx("div", { className: c.panel, role: "group", "aria-label": "Filter", children: q.questions.map((question) => {
+                    const id = `tf-${String(question.key)}`;
+                    return question.kind === "toggle" ? (_jsxs("label", { className: c.question, children: [_jsx("input", { type: "checkbox", checked: !!q.value[question.key], onChange: (e) => set(question.key, e.target.checked), className: c.checkbox }), " ", question.label] }, id)) : (_jsxs("div", { className: c.question, children: [_jsx("label", { htmlFor: id, children: question.label }), " ", _jsx("input", { id: id, inputMode: "numeric", value: String(q.value[question.key] ?? ""), onChange: (e) => set(question.key, e.target.value), className: c.number }), " ", _jsx("span", { className: c.unit, children: question.unit })] }, id));
+                }) }))] }));
+}

package/dist/react/ThemeToggle.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Light / dark / system as a row of chips, the current one marked. Mechanics
+ * only: `classNames` styles it, `labels` names the choices (text or icons),
+ * and `themes` picks which are offered — ["dark", "light"] for a site with no
+ * "system" option.
+ */
+import type { ReactNode } from "react";
+import { type Theme } from "../theme.ts";
+export interface ThemeToggleClassNames {
+    root?: string;
+    chip?: string;
+    /** Added to the chip of the current pick. */
+    active?: string;
+}
+export interface ThemeToggleProps {
+    themes?: readonly Theme[];
+    labels?: Partial<Record<Theme, ReactNode>>;
+    /** The pick when nothing is stored. Default "dark". */
+    fallback?: Theme;
+    classNames?: ThemeToggleClassNames;
+}
+export default function ThemeToggle({ themes, labels, fallback, classNames: c }: ThemeToggleProps): import("react").JSX.Element;

package/dist/react/ThemeToggle.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEMES } from "../theme.js";
+import { useTheme } from "./useTheme.js";
+const LABELS = { dark: "Dark", light: "Light", system: "System" };
+export default function ThemeToggle({ themes = THEMES, labels = {}, fallback = "dark", classNames: c = {} }) {
+    const [theme, setTheme] = useTheme(fallback);
+    return (_jsx("div", { role: "radiogroup", "aria-label": "Theme", className: c.root, children: themes.map((t) => {
+            const on = t === theme;
+            return (_jsx("button", { type: "button", role: "radio", "aria-checked": on, "aria-label": LABELS[t], onClick: () => setTheme(t), className: [c.chip, on && c.active].filter(Boolean).join(" ") || undefined, children: labels[t] ?? LABELS[t] }, t));
+        }) }));
+}

package/dist/react/WalletCard.d.ts

@@ -5,6 +5,9 @@
  * unknown, and unknown is not zero: showing 0 to someone with funds would send
  * them to buy credits they already own. The card offers round numbers to pay
  * in and never guesses what anything costs.
+ *
+ * The compact card. `WalletPage` is the full account view; both run the same
+ * top-up (`useTopUp`), which checks an open invoice on its own until it settles.
  */
 export default function WalletCard({ topUps }: {
     topUps?: number[];

package/dist/react/WalletCard.js

@@ -6,23 +6,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * unknown, and unknown is not zero: showing 0 to someone with funds would send
  * them to buy credits they already own. The card offers round numbers to pay
  * in and never guesses what anything costs.
+ *
+ * The compact card. `WalletPage` is the full account view; both run the same
+ * top-up (`useTopUp`), which checks an open invoice on its own until it settles.
  */
 import { useCallback, useEffect, useState } from "react";
 import { RefreshCw, Zap } from "lucide-react";
 import { tollboothConfig } from "../config.js";
-import { checkBalance, checkPayment, purchaseCredits } from "../standardTools.js";
+import { checkBalance } from "../standardTools.js";
+import { formatSats } from "../wallet.js";
 import { card, ghost, iconButton, muted, primary } from "./ui.js";
+import { useTopUp } from "./useTopUp.js";
 const DEFAULT_TOP_UPS = [1_000, 5_000, 20_000];
-function sats(n) {
-    return n === null ? "—" : n.toLocaleString("en-US");
-}
 export default function WalletCard({ topUps = DEFAULT_TOP_UPS }) {
     const { appName } = tollboothConfig();
     const [balance, setBalance] = useState(null);
     const [reachable, setReachable] = useState(true);
-    const [busy, setBusy] = useState(false);
-    const [invoice, setInvoice] = useState(null);
-    const [msg, setMsg] = useState("");
     const load = useCallback(() => {
         checkBalance()
             .then((r) => {
@@ -33,50 +32,17 @@ export default function WalletCard({ topUps = DEFAULT_TOP_UPS }) {
             .catch(() => setReachable(false));
     }, []);
     useEffect(load, [load]);
-    async function topUp(amount) {
-        setBusy(true);
-        setMsg("");
-        try {
-            const r = await purchaseCredits(amount);
-            if (r.error || !r.invoice_id) {
-                setMsg(r.error ?? "The service did not return an invoice. Try again.");
-                return;
-            }
-            setInvoice({
-                id: r.invoice_id,
-                link: r.checkout_link ?? r.lightning_invoice ?? r.payment_request ?? "",
-                sats: r.amount_sats ?? amount,
-            });
-        }
-        catch (e) {
-            setMsg(e.message);
-        }
-        finally {
-            setBusy(false);
-        }
-    }
-    async function confirm() {
-        if (!invoice)
-            return;
-        setBusy(true);
-        setMsg("");
-        try {
-            const r = await checkPayment(invoice.id);
-            if (r.status === "Settled") {
-                setInvoice(null);
-                setMsg(`Paid. ${sats(r.credits_granted ?? invoice.sats)} sats added.`);
-                load();
-            }
-            else {
-                setMsg(`Not paid yet — the invoice reads ${r.status ?? "unknown"}.`);
-            }
-        }
-        catch (e) {
-            setMsg(e.message);
-        }
-        finally {
-            setBusy(false);
-        }
-    }
-    return (_jsxs("section", { className: `${card} p-4`, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: `text-sm ${muted}`, children: "Balance" }), _jsx("button", { type: "button", onClick: load, title: "Refresh", "aria-label": "Refresh balance", className: iconButton, children: _jsx(RefreshCw, { size: 14 }) })] }), _jsxs("div", { className: "mt-1 flex items-baseline gap-2", children: [_jsx("span", { className: "text-2xl font-semibold tabular-nums", children: sats(reachable ? balance : null) }), _jsx("span", { className: `text-sm ${muted}`, children: "sats" })] }), !reachable && _jsxs("p", { className: `mt-2 text-xs ${muted}`, children: [appName, " did not answer, so no balance is shown."] }), !invoice ? (_jsx("div", { className: "mt-4 flex gap-2", children: topUps.map((n) => (_jsxs("button", { type: "button", disabled: busy, onClick: () => topUp(n), className: ghost, children: ["+", n.toLocaleString("en-US")] }, n))) })) : (_jsxs("div", { className: "mt-4 space-y-2", children: [_jsxs("a", { href: invoice.link, target: "_blank", rel: "noreferrer", className: `${primary} flex items-center justify-center gap-2`, children: [_jsx(Zap, { size: 16 }), " Pay ", invoice.sats.toLocaleString("en-US"), " sats"] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", disabled: busy, onClick: confirm, className: ghost, children: "I've paid \u2014 check" }), _jsx("button", { type: "button", onClick: () => setInvoice(null), className: `${ghost} w-auto px-4`, children: "Cancel" })] })] })), msg && _jsx("p", { className: `mt-3 text-xs ${muted}`, children: msg })] }));
+    const { state, create, check, cancel } = useTopUp({ onSettled: load });
+    const busy = state.phase === "creating" || (state.phase === "awaiting" && state.checking);
+    const invoice = state.phase === "awaiting" ? state.invoice : null;
+    const msg = state.phase === "settled"
+        ? `Paid. ${formatSats(state.credited)} sats added.`
+        : state.phase === "failed"
+            ? state.message
+            : state.phase === "awaiting" && state.status
+                ? `Not paid yet — ${state.status}`
+                : state.phase === "idle"
+                    ? (state.message ?? "")
+                    : "";
+    return (_jsxs("section", { className: `${card} p-4`, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: `text-sm ${muted}`, children: "Balance" }), _jsx("button", { type: "button", onClick: load, title: "Refresh", "aria-label": "Refresh balance", className: iconButton, children: _jsx(RefreshCw, { size: 14 }) })] }), _jsxs("div", { className: "mt-1 flex items-baseline gap-2", children: [_jsx("span", { className: "text-2xl font-semibold tabular-nums", children: formatSats(reachable ? balance : null) }), _jsx("span", { className: `text-sm ${muted}`, children: "sats" })] }), !reachable && _jsxs("p", { className: `mt-2 text-xs ${muted}`, children: [appName, " did not answer, so no balance is shown."] }), !invoice ? (_jsx("div", { className: "mt-4 flex gap-2", children: topUps.map((n) => (_jsxs("button", { type: "button", disabled: busy, onClick: () => create(n), className: ghost, children: ["+", n.toLocaleString("en-US")] }, n))) })) : (_jsxs("div", { className: "mt-4 space-y-2", children: [_jsxs("a", { href: invoice.checkoutLink ?? (invoice.bolt11 ? `lightning:${invoice.bolt11}` : "#"), target: "_blank", rel: "noreferrer", className: `${primary} flex items-center justify-center gap-2`, children: [_jsx(Zap, { size: 16 }), " Pay ", invoice.sats.toLocaleString("en-US"), " sats"] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", disabled: busy, onClick: check, className: ghost, children: "I've paid \u2014 check" }), _jsx("button", { type: "button", onClick: cancel, className: `${ghost} w-auto px-4`, children: "Cancel" })] })] })), msg && _jsx("p", { className: `mt-3 text-xs ${muted}`, children: msg })] }));
 }

package/dist/react/WalletPage.d.ts

@@ -0,0 +1,70 @@
+/**
+ * The patron's whole account at this operator: balance, a Lightning top-up,
+ * credit tranches, the statement and coupons.
+ *
+ * Mechanics only. The package makes the calls (check_balance,
+ * purchase_credits → check_payment, account_statement, the coupon tools),
+ * holds the states and writes the words; every visual choice belongs to the
+ * site, through `classNames` — with none it is plain markup that inherits from
+ * the page. Actions are chips (`classNames.chip`). Anything only one site has
+ * (a funding-health panel, an operator view) goes in `before` or `children`.
+ *
+ * A balance nobody has read is a dash, never 0: showing 0 to someone with
+ * funds sends them to buy credits they already own.
+ */
+import { type ReactNode } from "react";
+import { type CouponsPanelProps } from "./CouponsPanel.tsx";
+import { type UseTopUpOptions } from "./useTopUp.ts";
+export interface WalletPageClassNames {
+    root?: string;
+    heading?: string;
+    /** Each block: balance, top-up, tranches, statement. */
+    section?: string;
+    sectionTitle?: string;
+    /** The balance figure and its unit. */
+    figure?: string;
+    unit?: string;
+    /** The deposited · consumed · expired · tranches line, and each item in it. */
+    stats?: string;
+    stat?: string;
+    /** A heads-up: a stale ledger, pending invoices, credit about to expire. */
+    notice?: string;
+    error?: string;
+    /** Every action. */
+    chip?: string;
+    /** Added to a chip that is the current choice. */
+    chipActive?: string;
+    /** A row of chips. */
+    chips?: string;
+    input?: string;
+    /** The open invoice's box, and its BOLT11 string. */
+    invoice?: string;
+    bolt11?: string;
+    /** The line saying where a payment stands. */
+    status?: string;
+    list?: string;
+    row?: string;
+}
+export interface WalletPageProps {
+    /** The page heading. Default "Wallet"; null for none. */
+    heading?: ReactNode;
+    /** Preset amounts, in sats, offered as chips. */
+    topUps?: number[];
+    /** Offer a box for any amount. Default true. */
+    customAmount?: boolean;
+    /** Polling for an open invoice (see `useTopUp`). */
+    poll?: Pick<UseTopUpOptions, "pollMs" | "maxChecks">;
+    /** Show the coupons panel, optionally with its own props. Default true. */
+    coupons?: boolean | CouponsPanelProps;
+    /** Offer the statement (loaded on request). Default true. */
+    statement?: boolean;
+    /** How a date and a date-time are written — pass the site's time-zone formatter. */
+    formatDate?: (iso: string) => string;
+    formatDateTime?: (iso: string) => string;
+    /** Site content above the balance, e.g. a funding-health panel. */
+    before?: ReactNode;
+    /** Site content at the end. */
+    children?: ReactNode;
+    classNames?: WalletPageClassNames;
+}
+export default function WalletPage({ heading, topUps, customAmount, poll, coupons, statement, formatDate, formatDateTime, before, children, classNames: c, }: WalletPageProps): import("react").JSX.Element;

package/dist/react/WalletPage.js

@@ -0,0 +1,104 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The patron's whole account at this operator: balance, a Lightning top-up,
+ * credit tranches, the statement and coupons.
+ *
+ * Mechanics only. The package makes the calls (check_balance,
+ * purchase_credits → check_payment, account_statement, the coupon tools),
+ * holds the states and writes the words; every visual choice belongs to the
+ * site, through `classNames` — with none it is plain markup that inherits from
+ * the page. Actions are chips (`classNames.chip`). Anything only one site has
+ * (a funding-health panel, an operator view) goes in `before` or `children`.
+ *
+ * A balance nobody has read is a dash, never 0: showing 0 to someone with
+ * funds sends them to buy credits they already own.
+ */
+import { useCallback, useEffect, useState } from "react";
+import { checkBalance, getAccountStatement, } from "../standardTools.js";
+import { formatSats, parseSats } from "../wallet.js";
+import CouponsPanel, {} from "./CouponsPanel.js";
+import { useTopUp } from "./useTopUp.js";
+const DEFAULT_TOP_UPS = [1_000, 5_000, 25_000];
+const localDate = (iso) => new Date(iso).toLocaleDateString();
+const localDateTime = (iso) => new Date(iso).toLocaleString();
+function cx(...parts) {
+    const s = parts.filter(Boolean).join(" ");
+    return s || undefined;
+}
+export default function WalletPage({ heading = "Wallet", topUps = DEFAULT_TOP_UPS, customAmount = true, poll, coupons = true, statement = true, formatDate = localDate, formatDateTime = localDateTime, before, children, classNames: c = {}, }) {
+    const [bal, setBal] = useState(null);
+    const [balError, setBalError] = useState(null);
+    const refresh = useCallback(async () => {
+        try {
+            const r = await checkBalance();
+            if (r.error)
+                setBalError(r.error);
+            else {
+                setBal(r);
+                setBalError(null);
+            }
+        }
+        catch (e) {
+            setBalError(e.message);
+        }
+    }, []);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const couponProps = typeof coupons === "object" ? coupons : {};
+    return (_jsxs("div", { className: c.root, children: [heading && _jsx("h1", { className: c.heading, children: heading }), before, _jsx(Balance, { bal: bal, error: balError, refresh: refresh, formatDateTime: formatDateTime, c: c }), _jsx(TopUpSection, { topUps: topUps, customAmount: customAmount, poll: poll, onSettled: refresh, c: c }), bal?.tranches && bal.tranches.length > 0 && (_jsx(Tranches, { tranches: bal.tranches, formatDate: formatDate, c: c })), statement && _jsx(Statement, { formatDate: formatDate, c: c }), coupons !== false && _jsx(CouponsPanel, { ...couponProps }), children] }));
+}
+function Balance({ bal, error, refresh, formatDateTime, c, }) {
+    const pending = bal?.pending_invoices ?? 0;
+    const expiring = bal?.expiring_within_24h_sats ?? 0;
+    return (_jsxs("section", { className: c.section, children: [_jsx("div", { className: c.sectionTitle, children: "Balance" }), _jsxs("div", { children: [_jsx("span", { className: c.figure, children: formatSats(error ? null : bal?.balance_api_sats) }), " ", _jsx("span", { className: c.unit, children: "sats" })] }), bal && !error && (_jsxs("div", { className: c.stats, children: [_jsxs("span", { className: c.stat, children: ["deposited ", formatSats(bal.total_deposited_api_sats)] }), " ", _jsxs("span", { className: c.stat, children: ["consumed ", formatSats(bal.total_consumed_api_sats)] }), " ", !!bal.total_expired_api_sats && (_jsxs(_Fragment, { children: [_jsxs("span", { className: c.stat, children: ["expired ", formatSats(bal.total_expired_api_sats)] }), " "] })), _jsxs("span", { className: c.stat, children: [bal.active_tranches ?? 0, " active tranche", bal.active_tranches === 1 ? "" : "s"] })] })), error && _jsxs("p", { className: c.error, children: ["The balance could not be read: ", error] }), bal?.vault_unavailable && (_jsx("p", { className: c.notice, children: bal.warning ?? "The ledger is not available yet — the balance may be stale." })), pending > 0 && (_jsxs("p", { className: c.notice, children: [pending, " invoice", pending === 1 ? "" : "s", " awaiting payment"] })), expiring > 0 && _jsxs("p", { className: c.notice, children: [formatSats(expiring), " sats expire within 24 hours"] }), bal?.next_expiration_iso && (_jsxs("p", { className: c.notice, children: ["next expiry ", formatDateTime(bal.next_expiration_iso)] })), _jsx("div", { className: c.chips, children: _jsx("button", { type: "button", onClick: () => void refresh(), className: c.chip, children: "Refresh" }) })] }));
+}
+function TopUpSection({ topUps, customAmount, poll, onSettled, c, }) {
+    const { state, create, check, cancel, reset } = useTopUp({ ...poll, onSettled });
+    const [custom, setCustom] = useState("");
+    const [copied, setCopied] = useState(false);
+    const customSats = parseSats(custom);
+    const creating = state.phase === "creating";
+    async function copy(text) {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch {
+            /* the string is on screen and selectable */
+        }
+    }
+    return (_jsxs("section", { className: c.section, children: [_jsx("div", { className: c.sectionTitle, children: "Top up with Lightning" }), (state.phase === "idle" || state.phase === "creating") && (_jsxs(_Fragment, { children: [_jsx("div", { className: c.chips, children: topUps.map((n) => (_jsxs("button", { type: "button", disabled: creating, onClick: () => create(n), className: cx(c.chip, creating && state.sats === n && c.chipActive), children: [n.toLocaleString("en-US"), " sats"] }, n))) }), customAmount && (_jsxs("div", { className: c.chips, children: [_jsx("input", { inputMode: "numeric", value: custom, onChange: (e) => setCustom(e.target.value.replace(/[^\d]/g, "")), onKeyDown: (e) => {
+                                    if (e.key === "Enter" && customSats)
+                                        create(customSats);
+                                }, placeholder: "Any amount", "aria-label": "Amount in sats", className: c.input }), _jsx("button", { type: "button", disabled: creating || !customSats, onClick: () => customSats && create(customSats), className: c.chip, children: "Create invoice" })] })), creating && _jsx("p", { className: c.status, children: "Making a Lightning invoice\u2026" }), state.phase === "idle" && state.message && _jsx("p", { className: c.error, children: state.message })] })), state.phase === "awaiting" && (_jsxs("div", { className: c.invoice, children: [_jsxs("p", { className: c.status, children: ["Invoice for ", formatSats(state.invoice.sats), " sats"] }), state.invoice.bolt11 && _jsx("div", { className: c.bolt11, children: state.invoice.bolt11 }), _jsxs("div", { className: c.chips, children: [state.invoice.checkoutLink && (_jsx("a", { href: state.invoice.checkoutLink, target: "_blank", rel: "noreferrer", className: c.chip, children: "Open checkout" })), state.invoice.bolt11 && (_jsx("button", { type: "button", onClick: () => void copy(state.invoice.bolt11), className: c.chip, children: copied ? "Copied" : "Copy invoice" })), _jsx("button", { type: "button", disabled: state.checking, onClick: check, className: c.chip, children: state.checking ? "Checking…" : "I've paid — check" }), _jsx("button", { type: "button", onClick: cancel, className: c.chip, children: "Cancel" })] }), _jsx("p", { className: c.status, "aria-live": "polite", children: state.status ?? "Waiting for payment." })] })), state.phase === "settled" && (_jsxs(_Fragment, { children: [_jsxs("p", { className: c.status, "aria-live": "polite", children: ["Paid. ", formatSats(state.credited), " sats added."] }), _jsx("div", { className: c.chips, children: _jsx("button", { type: "button", onClick: reset, className: c.chip, children: "Done" }) })] })), state.phase === "failed" && (_jsxs(_Fragment, { children: [_jsx("p", { className: c.error, children: state.message }), _jsx("div", { className: c.chips, children: _jsx("button", { type: "button", onClick: reset, className: c.chip, children: "Try again" }) })] }))] }));
+}
+function Tranches({ tranches, formatDate, c, }) {
+    return (_jsxs("section", { className: c.section, children: [_jsx("div", { className: c.sectionTitle, children: "Credit tranches" }), _jsx("ul", { className: c.list, children: tranches.map((t) => (_jsxs("li", { className: c.row, children: [_jsxs("span", { children: [formatSats(t.remaining_sats), " / ", formatSats(t.amount_sats), " sats"] }), " ", _jsx("span", { children: t.expires_at ? `expires ${formatDate(t.expires_at)}` : "no expiry" })] }, t.id))) })] }));
+}
+function Statement({ formatDate, c }) {
+    const [stmt, setStmt] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    async function load() {
+        setLoading(true);
+        setError(null);
+        try {
+            const r = await getAccountStatement(30);
+            if (r.error)
+                setError(r.error);
+            else
+                setStmt(r);
+        }
+        catch (e) {
+            setError(e.message);
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    const purchases = stmt?.purchase_history ?? [];
+    const usage = stmt?.tool_usage_all_time ?? [];
+    return (_jsxs("section", { className: c.section, children: [_jsx("div", { className: c.sectionTitle, children: "Statement" }), _jsx("div", { className: c.chips, children: _jsx("button", { type: "button", disabled: loading, onClick: () => void load(), className: c.chip, children: loading ? "Loading…" : stmt ? "Refresh statement" : "Load statement" }) }), error && _jsx("p", { className: c.error, children: error }), stmt && (_jsxs(_Fragment, { children: [_jsx("div", { className: c.sectionTitle, children: "Purchases" }), purchases.length === 0 ? (_jsx("p", { className: c.status, children: "No purchases yet." })) : (_jsx("ul", { className: c.list, children: purchases.map((p) => (_jsxs("li", { className: c.row, children: [_jsx("span", { children: p.created_at ? formatDate(p.created_at) : "—" }), " ", _jsxs("span", { children: [formatSats(p.amount_sats), " sats"] }), " ", _jsxs("span", { children: [p.status, p.api_sats_credited ? ` · ${formatSats(p.api_sats_credited)} credited` : ""] })] }, p.invoice_id))) })), _jsx("div", { className: c.sectionTitle, children: "Usage" }), usage.length === 0 ? (_jsx("p", { className: c.status, children: "No paid calls yet." })) : (_jsx("ul", { className: c.list, children: usage.map((u) => (_jsxs("li", { className: c.row, children: [_jsx("span", { children: u.tool }), " ", _jsxs("span", { children: [u.calls.toLocaleString("en-US"), " call", u.calls === 1 ? "" : "s", " \u00B7 ", formatSats(u.api_sats), " sats"] })] }, u.tool))) }))] }))] }));
+}

package/dist/react/index.d.ts

@@ -1,10 +1,18 @@
 export { default as Avatar } from "./Avatar.tsx";
 export { default as AvatarPicker } from "./AvatarPicker.tsx";
+export { default as CouponsPanel, type CouponsPanelProps, type CouponsPanelClassNames } from "./CouponsPanel.tsx";
 export { default as DebugPanel, type DebugPanelProps } from "./DebugPanel.tsx";
+export { default as ErrorBoundary, type ErrorBoundaryProps, type ErrorBoundaryClassNames, type ErrorFallbackProps, } from "./ErrorBoundary.tsx";
 export { default as NpubGate } from "./NpubGate.tsx";
 export { default as NostrProfilePanel } from "./NostrProfilePanel.tsx";
+export { PageControls, SortHeader, TableShell, type PageControlsProps, type PageControlsClassNames, type SortHeaderProps, type SortHeaderClassNames, type TableShellClassNames, } from "./PagedTable.tsx";
 export { default as QuoteScroller, type QuoteScrollerProps, type QuoteScrollerClassNames } from "./QuoteScroller.tsx";
 export { default as SessionKeyClaim } from "./SessionKeyClaim.tsx";
+export { default as TableFilter, type DateFieldOption, type FilterQuestion, type TableFilterProps, type TableFilterClassNames, type TableFilterDates, type TableFilterQuestions, type TableFilterSearch, } from "./TableFilter.tsx";
+export { default as ThemeToggle, type ThemeToggleProps, type ThemeToggleClassNames } from "./ThemeToggle.tsx";
 export { default as WalletCard } from "./WalletCard.tsx";
+export { default as WalletPage, type WalletPageProps, type WalletPageClassNames } from "./WalletPage.tsx";
 export { useSession, type Session } from "./useSession.ts";
 export { useDebugLog } from "./useDebugLog.ts";
+export { useTheme } from "./useTheme.ts";
+export { useTopUp, type TopUp, type UseTopUpOptions } from "./useTopUp.ts";

package/dist/react/index.js

@@ -1,10 +1,18 @@
 export { default as Avatar } from "./Avatar.js";
 export { default as AvatarPicker } from "./AvatarPicker.js";
+export { default as CouponsPanel } from "./CouponsPanel.js";
 export { default as DebugPanel } from "./DebugPanel.js";
+export { default as ErrorBoundary, } from "./ErrorBoundary.js";
 export { default as NpubGate } from "./NpubGate.js";
 export { default as NostrProfilePanel } from "./NostrProfilePanel.js";
+export { PageControls, SortHeader, TableShell, } from "./PagedTable.js";
 export { default as QuoteScroller } from "./QuoteScroller.js";
 export { default as SessionKeyClaim } from "./SessionKeyClaim.js";
+export { default as TableFilter, } from "./TableFilter.js";
+export { default as ThemeToggle } from "./ThemeToggle.js";
 export { default as WalletCard } from "./WalletCard.js";
+export { default as WalletPage } from "./WalletPage.js";
 export { useSession } from "./useSession.js";
 export { useDebugLog } from "./useDebugLog.js";
+export { useTheme } from "./useTheme.js";
+export { useTopUp } from "./useTopUp.js";

package/dist/react/useTheme.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The theme pick as React state: persisted under `<prefix>:theme`, applied to
+ * <html>, followed across tabs, and — in "system" — following the OS live.
+ * Call `bootstrapTheme()` in main.tsx too, so the first frame is right.
+ */
+import { type Theme } from "../theme.ts";
+export declare function useTheme(fallback?: Theme): [Theme, (next: Theme) => void];

package/dist/react/useTheme.js

@@ -0,0 +1,44 @@
+/**
+ * The theme pick as React state: persisted under `<prefix>:theme`, applied to
+ * <html>, followed across tabs, and — in "system" — following the OS live.
+ * Call `bootstrapTheme()` in main.tsx too, so the first frame is right.
+ */
+import { useCallback, useEffect, useState } from "react";
+import { applyTheme, readTheme, themeStorageKey, writeTheme } from "../theme.js";
+export function useTheme(fallback = "dark") {
+    const [theme, setTheme] = useState(() => readTheme(fallback));
+    // Another tab changed it.
+    useEffect(() => {
+        let key;
+        try {
+            key = themeStorageKey();
+        }
+        catch {
+            return;
+        }
+        const onStorage = (e) => {
+            if (e.key !== key)
+                return;
+            const next = readTheme(fallback);
+            setTheme(next);
+            applyTheme(next);
+        };
+        window.addEventListener("storage", onStorage);
+        return () => window.removeEventListener("storage", onStorage);
+    }, [fallback]);
+    // In "system", the OS changed its mind.
+    useEffect(() => {
+        if (theme !== "system" || !window.matchMedia)
+            return;
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        const onChange = () => applyTheme("system");
+        mq.addEventListener("change", onChange);
+        return () => mq.removeEventListener("change", onChange);
+    }, [theme]);
+    const update = useCallback((next) => {
+        writeTheme(next);
+        applyTheme(next);
+        setTheme(next);
+    }, []);
+    return [theme, update];
+}

package/dist/react/useTopUp.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A Lightning top-up as a hook: purchase_credits → an invoice → check_payment
+ * until it settles, expires or the patron gives up.
+ *
+ * The state machine is `topUpReducer` (framework-free, tested). This adds the
+ * calls and the polling: while an invoice is out and the tab is visible,
+ * check_payment runs every `pollMs` — it is free and safe to repeat — up to
+ * `maxChecks` times, after which the patron's own "check" still works.
+ */
+import { type TopUpState } from "../wallet.ts";
+export interface UseTopUpOptions {
+    /** How often to check an open invoice, in ms. 0 turns polling off. Default 5000. */
+    pollMs?: number;
+    /** Stop polling after this many checks. Default 60 (five minutes at the default rate). */
+    maxChecks?: number;
+    /** Called once when an invoice settles, with the sats credited — refresh a balance here. */
+    onSettled?: (credited: number) => void;
+}
+export interface TopUp {
+    state: TopUpState;
+    /** Ask the service for an invoice of `sats`. Ignored while one is being made or is out. */
+    create: (sats: number) => void;
+    /** Check the open invoice now. */
+    check: () => void;
+    /** Drop the open invoice (it simply expires at BTCPay). */
+    cancel: () => void;
+    /** Back to idle after a settlement or failure. */
+    reset: () => void;
+}
+export declare function useTopUp({ pollMs, maxChecks, onSettled }?: UseTopUpOptions): TopUp;