@tollbooth-dpyc/web 1.2.0 → 1.3.1

package/README.md

@@ -87,7 +87,7 @@ bootstrapTheme();            // main.tsx, after configureTollbooth: <prefix>:the
   formatDateTime={(iso) => formatInZone(iso, zone)}
   before={<FundingStatus />}
   coupons={{ classNames: { root: "card", chip: "chip" } }}
-  classNames={{ section: "card p-5", figure: "text-3xl", chip: "chip", chipActive: "chip-on" }}
+  classNames={{ section: "card p-5", figure: "text-3xl", chip: "chip", chipActive: "chip-on", primary: "chip-accent" }}
 />
 
 <ThemeToggle themes={["dark", "light", "system"]} classNames={{ chip: "chip", active: "chip-on" }} />
@@ -98,8 +98,18 @@ bootstrapTheme();            // main.tsx, after configureTollbooth: <prefix>:the
   onClear={clearAll}
   classNames={{ root: "flex gap-2", input: "field", chip: "chip" }}
 />
+
+<SortHeader as="div" label="Date" col="date" activeCol={col} dir={dir} onSort={sortBy} />  // a div grid
 ```
 
+A preset amount in `WalletPage` / `WalletCard` only fills the amount; the
+invoice is made by the explicit "Create invoice". `classNames.primary` styles
+the action that moves a top-up forward (Redeem in `CouponsPanel`); every other
+action stays a chip. `TableFilter`'s panel slides itself back on screen on a
+phone; `clearPlacement="panel"` puts Clear inside it. Every standard-tool
+wrapper takes the same optional `CallOptions` as `callTool`, last
+(`listCanonicalIdentities({ bestEffort: true })`).
+
 `useTopUp` is the wallet's top-up on its own (purchase_credits → invoice →
 check_payment, polled while the tab is visible) for a site drawing its own.
 

package/dist/client.d.ts

@@ -28,14 +28,6 @@ export interface CallOptions {
      * patron out, whatever it gets back.
      */
     bestEffort?: boolean;
-    /**
-     * A background read — a badge, a poll — that must not send the patron to
-     * the sign-in gate. A proof bounce still throws `ProofRequiredError`, but
-     * the session is left as it is and `onProofExpired` is not told; the next
-     * call the patron makes themselves meets the lapse and re-arms sign-in.
-     * Opt-in: by default a bounce signs the patron out and re-arms the gate.
-     */
-    quietProof?: boolean;
     timeoutMs?: number;
 }
 export interface ToolAnswer<T> {

package/dist/client.js

@@ -166,8 +166,6 @@ export async function callToolWithContent(tool, args = {}, opts = {}) {
     if (!opts.bestEffort) {
         const bounced = proofBounceMessage(payload);
         if (bounced !== null) {
-            if (opts.quietProof)
-                throw new ProofRequiredError(bounced);
             // The token just refused is the same one the recent-login shortcut
             // would replay, so it goes too, or a returning patron re-bounces.
             const npub = getStoredNpub();

package/dist/react/CouponsPanel.d.ts

@@ -5,7 +5,8 @@
  * Mechanics only — the calls (list_my_coupons, redeem_coupon, forget_coupon),
  * the states and the words. Every visual choice is the site's, through
  * `classNames`; with none, the panel is plain markup inheriting from the page.
- * Actions (Redeem, Remove) are chips: `classNames.chip`.
+ * Actions (Redeem, Remove) are chips: `classNames.chip`; Redeem, the primary
+ * action, takes `classNames.primary` instead when a site gives it its accent.
  */
 import { type ReactNode } from "react";
 import { type PatronCoupon } from "../standardTools.ts";
@@ -18,6 +19,10 @@ export interface CouponsPanelClassNames {
     input?: string;
     /** Every action: Redeem, Remove. */
     chip?: string;
+    /** Redeem, in place of `chip`, for a site that gives it its accent. Default: `chip`. */
+    primary?: string;
+    /** The sub-labels `formHeading` and `listHeading`. */
+    subheading?: string;
     /** Added to the message after a redeem, with `ok` or `error`. */
     message?: string;
     ok?: string;
@@ -38,6 +43,10 @@ export interface CouponsPanelProps {
     intro?: ReactNode;
     /** Shown when the patron holds no coupons. */
     empty?: ReactNode;
+    /** A sub-label above the code box, e.g. "Redeem a code". Default none. */
+    formHeading?: ReactNode;
+    /** A sub-label above the held coupons, e.g. "Active". Shown only when there are some. Default none. */
+    listHeading?: ReactNode;
     placeholder?: string;
     /** Content of the Redeem chip. */
     redeemLabel?: ReactNode;
@@ -49,4 +58,4 @@ export interface CouponsPanelProps {
     /** Draw a coupon's row yourself; `forget` removes it (after confirmForget). */
     renderCoupon?: (coupon: PatronCoupon, forget: () => void) => ReactNode;
 }
-export default function CouponsPanel({ heading, intro, empty, placeholder, redeemLabel, forgetLabel, confirmForget, classNames: c, renderCoupon, }: CouponsPanelProps): import("react").JSX.Element;
+export default function CouponsPanel({ heading, intro, empty, formHeading, listHeading, placeholder, redeemLabel, forgetLabel, confirmForget, classNames: c, renderCoupon, }: CouponsPanelProps): import("react").JSX.Element;

package/dist/react/CouponsPanel.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 patron's coupons: redeem an operator's code once, see what is held, and
  * take one off the list.
@@ -6,7 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Mechanics only — the calls (list_my_coupons, redeem_coupon, forget_coupon),
  * the states and the words. Every visual choice is the site's, through
  * `classNames`; with none, the panel is plain markup inheriting from the page.
- * Actions (Redeem, Remove) are chips: `classNames.chip`.
+ * Actions (Redeem, Remove) are chips: `classNames.chip`; Redeem, the primary
+ * action, takes `classNames.primary` instead when a site gives it its accent.
  */
 import { useCallback, useEffect, useState } from "react";
 import { forgetCoupon, listMyCoupons, redeemCoupon } from "../standardTools.js";
@@ -21,7 +22,7 @@ function cx(...parts) {
     const s = parts.filter(Boolean).join(" ");
     return s || undefined;
 }
-export default function CouponsPanel({ heading = "My coupons", intro = DEFAULT_INTRO, empty = DEFAULT_EMPTY, placeholder = "Coupon code", redeemLabel = "Redeem", forgetLabel = "Remove", confirmForget = defaultConfirm, classNames: c = {}, renderCoupon, }) {
+export default function CouponsPanel({ heading = "My coupons", intro = DEFAULT_INTRO, empty = DEFAULT_EMPTY, formHeading, listHeading, placeholder = "Coupon code", redeemLabel = "Redeem", forgetLabel = "Remove", confirmForget = defaultConfirm, classNames: c = {}, renderCoupon, }) {
     const [coupons, setCoupons] = useState([]);
     const [loading, setLoading] = useState(true);
     const [loadError, setLoadError] = useState(null);
@@ -86,10 +87,10 @@ export default function CouponsPanel({ heading = "My coupons", intro = DEFAULT_I
             setMsg({ ok: false, text: e.message });
         }
     }
-    return (_jsxs("section", { className: c.root, children: [heading && _jsx("div", { className: c.heading, children: heading }), intro && _jsx("p", { className: c.intro, children: intro }), _jsxs("div", { className: c.form, children: [_jsx("input", { type: "text", value: code, onChange: (e) => setCode(e.target.value.toUpperCase()), onKeyDown: (e) => {
+    return (_jsxs("section", { className: c.root, children: [heading && _jsx("div", { className: c.heading, children: heading }), intro && _jsx("p", { className: c.intro, children: intro }), formHeading && _jsx("div", { className: c.subheading, children: formHeading }), _jsxs("div", { className: c.form, children: [_jsx("input", { type: "text", value: code, onChange: (e) => setCode(e.target.value.toUpperCase()), onKeyDown: (e) => {
                             if (e.key === "Enter")
                                 void redeem();
-                        }, placeholder: placeholder, "aria-label": "Coupon code", autoCapitalize: "characters", autoCorrect: "off", spellCheck: false, disabled: redeeming, className: c.input }), _jsx("button", { type: "button", onClick: () => void redeem(), disabled: redeeming || !code.trim(), className: c.chip, children: redeeming ? "Redeeming…" : redeemLabel })] }), msg && (_jsx("p", { role: "status", className: cx(c.message, msg.ok ? c.ok : c.error), children: msg.text })), loading ? (_jsx("p", { className: c.loading, children: "Loading\u2026" })) : loadError ? (_jsx("p", { className: cx(c.message, c.error), children: loadError })) : coupons.length === 0 ? (empty && _jsx("p", { className: c.empty, children: empty })) : (_jsx("ul", { className: c.list, children: coupons.map((coupon) => renderCoupon ? (_jsx("li", { className: c.row, children: renderCoupon(coupon, () => void forget(coupon)) }, coupon.coupon_id)) : (_jsx(CouponRow, { coupon: coupon, c: c, forgetLabel: forgetLabel, onForget: () => void forget(coupon) }, coupon.coupon_id))) }))] }));
+                        }, placeholder: placeholder, "aria-label": "Coupon code", autoCapitalize: "characters", autoCorrect: "off", spellCheck: false, disabled: redeeming, className: c.input }), _jsx("button", { type: "button", onClick: () => void redeem(), disabled: redeeming || !code.trim(), className: c.primary ?? c.chip, children: redeeming ? "Redeeming…" : redeemLabel })] }), msg && (_jsx("p", { role: "status", className: cx(c.message, msg.ok ? c.ok : c.error), children: msg.text })), loading ? (_jsx("p", { className: c.loading, children: "Loading\u2026" })) : loadError ? (_jsx("p", { className: cx(c.message, c.error), children: loadError })) : coupons.length === 0 ? (empty && _jsx("p", { className: c.empty, children: empty })) : (_jsxs(_Fragment, { children: [listHeading && _jsx("div", { className: c.subheading, children: listHeading }), _jsx("ul", { className: c.list, children: coupons.map((coupon) => renderCoupon ? (_jsx("li", { className: c.row, children: renderCoupon(coupon, () => void forget(coupon)) }, coupon.coupon_id)) : (_jsx(CouponRow, { coupon: coupon, c: c, forgetLabel: forgetLabel, onForget: () => void forget(coupon) }, coupon.coupon_id))) })] }))] }));
 }
 function CouponRow({ coupon, c, forgetLabel, onForget, }) {
     const active = coupon.status === "active";

package/dist/react/PagedTable.d.ts

@@ -10,7 +10,7 @@
 import type { ReactNode } from "react";
 import { type SortDir } from "../table.ts";
 export interface SortHeaderClassNames {
-    /** The <th>. */
+    /** The header cell: the <th>, or the <div> when `as="div"`. */
     cell?: string;
     /** The button inside a sortable header. */
     button?: string;
@@ -28,10 +28,15 @@ export interface SortHeaderProps {
     onSort: (col: string, dir: SortDir) => void;
     /** The direction a newly chosen column starts in. Default "desc". */
     initialDir?: SortDir;
+    /**
+     * The element: a <th> in a table (default), or a <div role="columnheader">
+     * for a grid of divs — the sort, the button and aria-sort are the same.
+     */
+    as?: "th" | "div";
     classNames?: SortHeaderClassNames;
 }
 /** A header cell. Tapping the sorted column flips it; another column starts at `initialDir`. */
-export declare function SortHeader({ label, col, activeCol, dir, onSort, initialDir, classNames: c }: SortHeaderProps): import("react").JSX.Element;
+export declare function SortHeader({ label, col, activeCol, dir, onSort, initialDir, as, classNames: c, }: SortHeaderProps): import("react").JSX.Element;
 export interface PageControlsClassNames {
     root?: string;
     /** Every control. */

package/dist/react/PagedTable.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { clampPage, lastPage, nextSort } from "../table.js";
+import { ariaSort, clampPage, lastPage, nextSort } from "../table.js";
 function cx(...parts) {
     const s = parts.filter(Boolean).join(" ");
     return s || undefined;
 }
 /** A header cell. Tapping the sorted column flips it; another column starts at `initialDir`. */
-export function SortHeader({ label, col, activeCol, dir, onSort, initialDir = "desc", classNames: c = {} }) {
-    if (!col)
-        return _jsx("th", { className: c.cell, children: label });
+export function SortHeader({ label, col, activeCol, dir, onSort, initialDir = "desc", as = "th", classNames: c = {}, }) {
+    const Cell = as;
+    const role = as === "div" ? "columnheader" : undefined;
+    if (!col) {
+        return (_jsx(Cell, { role: role, className: c.cell, children: label }));
+    }
     const active = col === activeCol;
-    return (_jsx("th", { className: c.cell, "aria-sort": active ? (dir === "desc" ? "descending" : "ascending") : undefined, children: _jsxs("button", { type: "button", onClick: () => {
+    return (_jsx(Cell, { role: role, className: c.cell, "aria-sort": ariaSort(col, activeCol, dir), children: _jsxs("button", { type: "button", onClick: () => {
                 const next = nextSort(col, activeCol, dir, initialDir);
                 onSort(next.col, next.dir);
             }, className: cx(c.button, active && c.active), children: [label, active && (_jsx("span", { "aria-hidden": true, className: c.arrow, children: dir === "desc" ? " ▾" : " ▴" }))] }) }));

package/dist/react/TableFilter.d.ts

@@ -10,7 +10,9 @@
  * 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.
+ * `classNames`; the actions are chips. The panel is kept on screen: while open,
+ * it is slid sideways (`reclampPanel`) so no part of it hangs past either edge
+ * of a phone, however its mark grows or the window changes.
  */
 import { type ReactNode } from "react";
 export interface DateFieldOption {
@@ -86,8 +88,14 @@ export interface TableFilterProps<F extends object> {
     questions?: TableFilterQuestions<F>;
     /** Turn everything off. */
     onClear: () => void;
+    /**
+     * Where the Clear chip goes: beside the other controls (default), or inside
+     * the questions panel. "panel" needs a `questions` group; without one it is
+     * beside.
+     */
+    clearPlacement?: "beside" | "panel";
     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;
+export default function TableFilter<F extends object>({ search, dates, questions, onClear, clearPlacement, searchIcon, clearLabel, classNames: c, }: TableFilterProps<F>): import("react").JSX.Element;

package/dist/react/TableFilter.js

@@ -11,18 +11,25 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * 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.
+ * `classNames`; the actions are chips. The panel is kept on screen: while open,
+ * it is slid sideways (`reclampPanel`) so no part of it hangs past either edge
+ * of a phone, however its mark grows or the window changes.
  */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Search, SlidersHorizontal, X } from "lucide-react";
 import { filterActive } from "../table.js";
+import { oncePerFrame, reclampPanel } from "./panelPlacement.js";
+/** The panel keeps this many px from each edge of the viewport. */
+const EDGE = 8;
 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 = {}, }) {
+export default function TableFilter({ search, dates, questions, onClear, clearPlacement = "beside", 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 }))] }));
+    const clear = active ? (_jsx("button", { type: "button", onClick: onClear, className: c.chip, children: clearLabel })) : null;
+    const inPanel = clearPlacement === "panel" && !!questions;
+    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, clear: inPanel ? clear : null, c: c }), !inPanel && clear] }));
 }
 function SearchBox({ search, icon, c }) {
     // Edited freely, applied on Enter or the chip; follows the applied value
@@ -37,9 +44,51 @@ function SearchBox({ search, icon, c }) {
 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 }) {
+function QuestionPanel({ q, clear, c, }) {
     const [open, setOpen] = useState(false);
     const box = useRef(null);
+    const panel = useRef(null);
+    const mark = useRef(null);
+    // Kept on screen, and kept there while open: the mark widens as questions
+    // are answered, the Clear chip joins the panel, the window turns or scrolls —
+    // each moves the panel, so each re-places it (at most once a frame). Slid by
+    // the `translate` property (a site's own `transform` is left alone); only a
+    // panel wider than the viewport gets a max-width.
+    useLayoutEffect(() => {
+        const el = panel.current;
+        if (!open || !el)
+            return;
+        let dx = 0;
+        const place = () => {
+            const room = document.documentElement.clientWidth;
+            el.style.maxWidth = "";
+            if (el.getBoundingClientRect().width > room - 2 * EDGE)
+                el.style.maxWidth = `${room - 2 * EDGE}px`;
+            const r = el.getBoundingClientRect();
+            const next = reclampPanel(dx, r.left, r.width, room, EDGE);
+            if (next !== dx) {
+                dx = next;
+                el.style.translate = dx ? `${dx}px 0` : "";
+            }
+        };
+        place();
+        const frame = oncePerFrame(place);
+        const sized = new ResizeObserver(frame.schedule);
+        sized.observe(el);
+        for (const around of [mark.current, box.current])
+            if (around)
+                sized.observe(around);
+        window.addEventListener("resize", frame.schedule);
+        window.addEventListener("orientationchange", frame.schedule);
+        window.addEventListener("scroll", frame.schedule, { capture: true, passive: true });
+        return () => {
+            frame.cancel();
+            sized.disconnect();
+            window.removeEventListener("resize", frame.schedule);
+            window.removeEventListener("orientationchange", frame.schedule);
+            window.removeEventListener("scroll", frame.schedule, { capture: true });
+        };
+    }, [open]);
     // Dismissed by a tap outside or Escape.
     useEffect(() => {
         if (!open)
@@ -61,8 +110,8 @@ function QuestionPanel({ q, c }) {
     }, [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));
-                }) }))] }));
+    return (_jsxs("div", { className: c.questions, ref: box, children: [_jsxs("button", { ref: mark, 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 && (_jsxs("div", { className: c.panel, ref: 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));
+                    }), clear] }))] }));
 }

package/dist/react/WalletCard.d.ts

@@ -4,11 +4,23 @@
  * Every figure is the service's answer or a dash. A balance nobody has read is
  * 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.
+ * in and never guesses what anything costs. Tapping one only chooses it; the
+ * invoice is made by "Create invoice".
  *
  * 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 }: {
+export interface WalletCardClassNames {
+    /** Each preset amount, and the invoice's check and cancel. Default: the package's outlined chip. */
+    chip?: string;
+    /** Added to the chosen preset. Default: an accent ring. */
+    chipActive?: string;
+    /** The action that moves a top-up forward — "Create invoice", then "Pay". Default: the accent button. */
+    primary?: string;
+}
+export interface WalletCardProps {
+    /** Preset amounts, in sats. A tap fills the amount; it does not invoice. */
     topUps?: number[];
-}): import("react").JSX.Element;
+    classNames?: WalletCardClassNames;
+}
+export default function WalletCard({ topUps, classNames }: WalletCardProps): import("react").JSX.Element;

package/dist/react/WalletCard.js

@@ -5,20 +5,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Every figure is the service's answer or a dash. A balance nobody has read is
  * 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.
+ * in and never guesses what anything costs. Tapping one only chooses it; the
+ * invoice is made by "Create invoice".
  *
  * 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 { useCallback, useEffect, useReducer, useState } from "react";
 import { RefreshCw, Zap } from "lucide-react";
 import { tollboothConfig } from "../config.js";
 import { checkBalance } from "../standardTools.js";
-import { formatSats } from "../wallet.js";
+import { amountReducer, formatSats, parseSats, presetChosen } 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];
-export default function WalletCard({ topUps = DEFAULT_TOP_UPS }) {
+const cx = (...parts) => parts.filter(Boolean).join(" ");
+export default function WalletCard({ topUps = DEFAULT_TOP_UPS, classNames = {} }) {
+    const c = { chip: ghost, chipActive: "ring-2 ring-[var(--tb-accent)]", primary, ...classNames };
     const { appName } = tollboothConfig();
     const [balance, setBalance] = useState(null);
     const [reachable, setReachable] = useState(true);
@@ -33,6 +36,8 @@ export default function WalletCard({ topUps = DEFAULT_TOP_UPS }) {
     }, []);
     useEffect(load, [load]);
     const { state, create, check, cancel } = useTopUp({ onSettled: load });
+    const [amount, pick] = useReducer(amountReducer, "");
+    const sats = parseSats(amount);
     const busy = state.phase === "creating" || (state.phase === "awaiting" && state.checking);
     const invoice = state.phase === "awaiting" ? state.invoice : null;
     const msg = state.phase === "settled"
@@ -44,5 +49,5 @@ export default function WalletCard({ topUps = DEFAULT_TOP_UPS }) {
                 : 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 })] }));
+    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 ? (_jsxs("div", { className: "mt-4 space-y-2", children: [_jsx("div", { className: "flex gap-2", children: topUps.map((n) => (_jsxs("button", { type: "button", disabled: busy, "aria-pressed": presetChosen(amount, n), onClick: () => pick({ type: "preset", sats: n }), className: cx(c.chip, presetChosen(amount, n) && c.chipActive), children: ["+", n.toLocaleString("en-US")] }, n))) }), _jsx("button", { type: "button", disabled: busy || !sats, onClick: () => sats && create(sats), className: c.primary, children: "Create invoice" })] })) : (_jsxs("div", { className: "mt-4 space-y-2", children: [_jsxs("a", { href: invoice.checkoutLink ?? (invoice.bolt11 ? `lightning:${invoice.bolt11}` : "#"), target: "_blank", rel: "noreferrer", className: cx(c.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: c.chip, children: "I've paid \u2014 check" }), _jsx("button", { type: "button", onClick: cancel, className: cx(c.chip, "w-auto px-4"), children: "Cancel" })] })] })), msg && _jsx("p", { className: `mt-3 text-xs ${muted}`, children: msg })] }));
 }

package/dist/react/WalletPage.d.ts

@@ -6,7 +6,9 @@
  * 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
+ * the page. Actions are chips (`classNames.chip`); the one that moves a top-up
+ * forward may keep an accent (`classNames.primary`). A preset amount only fills
+ * the amount — the invoice is made by "Create invoice". 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
@@ -32,7 +34,13 @@ export interface WalletPageClassNames {
     error?: string;
     /** Every action. */
     chip?: string;
-    /** Added to a chip that is the current choice. */
+    /**
+     * The action that moves a top-up forward — "Create invoice", then "Open
+     * checkout" — in place of `chip`, for a site that gives it its accent.
+     * Default: `chip`.
+     */
+    primary?: string;
+    /** Added to a chip that is the current choice (the chosen preset). */
     chipActive?: string;
     /** A row of chips. */
     chips?: string;
@@ -48,7 +56,7 @@ export interface WalletPageClassNames {
 export interface WalletPageProps {
     /** The page heading. Default "Wallet"; null for none. */
     heading?: ReactNode;
-    /** Preset amounts, in sats, offered as chips. */
+    /** Preset amounts, in sats, offered as chips. A tap fills the amount; it does not invoice. */
     topUps?: number[];
     /** Offer a box for any amount. Default true. */
     customAmount?: boolean;

package/dist/react/WalletPage.js

@@ -7,15 +7,17 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * 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
+ * the page. Actions are chips (`classNames.chip`); the one that moves a top-up
+ * forward may keep an accent (`classNames.primary`). A preset amount only fills
+ * the amount — the invoice is made by "Create invoice". 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 { useCallback, useEffect, useReducer, useState } from "react";
 import { checkBalance, getAccountStatement, } from "../standardTools.js";
-import { formatSats, parseSats } from "../wallet.js";
+import { amountReducer, formatSats, parseSats, presetChosen } from "../wallet.js";
 import CouponsPanel, {} from "./CouponsPanel.js";
 import { useTopUp } from "./useTopUp.js";
 const DEFAULT_TOP_UPS = [1_000, 5_000, 25_000];
@@ -55,10 +57,15 @@ function Balance({ bal, error, refresh, formatDateTime, c, }) {
 }
 function TopUpSection({ topUps, customAmount, poll, onSettled, c, }) {
     const { state, create, check, cancel, reset } = useTopUp({ ...poll, onSettled });
-    const [custom, setCustom] = useState("");
+    const [amount, pick] = useReducer(amountReducer, "");
     const [copied, setCopied] = useState(false);
-    const customSats = parseSats(custom);
+    const sats = parseSats(amount);
     const creating = state.phase === "creating";
+    const primary = c.primary ?? c.chip;
+    function confirm() {
+        if (sats && !creating)
+            create(sats);
+    }
     async function copy(text) {
         try {
             await navigator.clipboard.writeText(text);
@@ -69,10 +76,13 @@ function TopUpSection({ topUps, customAmount, poll, onSettled, c, }) {
             /* 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" }) })] }))] }));
+    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, "aria-pressed": presetChosen(amount, n), onClick: () => pick({ type: "preset", sats: n }), className: cx(c.chip, presetChosen(amount, n) && c.chipActive), children: [n.toLocaleString("en-US"), " sats"] }, n))) }), _jsxs("div", { className: c.chips, children: [customAmount && (_jsx("input", { inputMode: "numeric", value: amount, disabled: creating, onChange: (e) => pick({ type: "typed", text: e.target.value }), onKeyDown: (e) => {
+                                    if (e.key === "Enter")
+                                        confirm();
+                                }, placeholder: "Any amount", "aria-label": "Amount in sats", className: c.input })), _jsx("button", { type: "button", disabled: creating || !sats, onClick: confirm, className: primary, 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: primary, 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: () => {
+                                pick({ type: "clear" });
+                                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))) })] }));

package/dist/react/index.d.ts

@@ -10,7 +10,7 @@ export { default as QuoteScroller, type QuoteScrollerProps, type QuoteScrollerCl
 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 WalletCard, type WalletCardProps, type WalletCardClassNames } 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";

package/dist/react/panelPlacement.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Keeping TableFilter's questions panel on screen while it is open.
+ *
+ * The panel hangs from the filter mark, so anything that moves the mark moves
+ * the panel: ticking a question widens the mark (its summary), the Clear chip
+ * appears inside the panel, the window turns or scrolls. So the panel is
+ * re-placed on every one of those, not only when it opens.
+ *
+ * It is slid by the CSS `translate` property, which `getBoundingClientRect`
+ * already includes. Taking the slide in force back off gives where the site's
+ * CSS alone puts the panel, and the new slide is worked out from there — no
+ * need to clear the slide and force a second layout just to measure.
+ */
+/**
+ * The slide (px) that keeps the panel `margin` px inside both edges.
+ * `measuredLeft` is where it is drawn now, with `currentDx` already applied.
+ */
+export declare function reclampPanel(currentDx: number, measuredLeft: number, width: number, viewportWidth: number, margin?: number): number;
+/**
+ * `run` at most once per animation frame, however many times the returned
+ * function is called before that frame. `cancel` drops a pending run.
+ */
+export declare function oncePerFrame(run: () => void, request?: (cb: () => void) => number, release?: (id: number) => void): {
+    schedule: () => void;
+    cancel: () => void;
+};

package/dist/react/panelPlacement.js

@@ -0,0 +1,44 @@
+/**
+ * Keeping TableFilter's questions panel on screen while it is open.
+ *
+ * The panel hangs from the filter mark, so anything that moves the mark moves
+ * the panel: ticking a question widens the mark (its summary), the Clear chip
+ * appears inside the panel, the window turns or scrolls. So the panel is
+ * re-placed on every one of those, not only when it opens.
+ *
+ * It is slid by the CSS `translate` property, which `getBoundingClientRect`
+ * already includes. Taking the slide in force back off gives where the site's
+ * CSS alone puts the panel, and the new slide is worked out from there — no
+ * need to clear the slide and force a second layout just to measure.
+ */
+import { nudgeIntoView } from "../table.js";
+/**
+ * The slide (px) that keeps the panel `margin` px inside both edges.
+ * `measuredLeft` is where it is drawn now, with `currentDx` already applied.
+ */
+export function reclampPanel(currentDx, measuredLeft, width, viewportWidth, margin = 8) {
+    return nudgeIntoView(measuredLeft - currentDx, width, viewportWidth, margin);
+}
+/**
+ * `run` at most once per animation frame, however many times the returned
+ * function is called before that frame. `cancel` drops a pending run.
+ */
+export function oncePerFrame(run, request = (cb) => requestAnimationFrame(cb), release = (id) => cancelAnimationFrame(id)) {
+    let pending = null;
+    return {
+        schedule() {
+            if (pending !== null)
+                return;
+            pending = request(() => {
+                pending = null;
+                run();
+            });
+        },
+        cancel() {
+            if (pending === null)
+                return;
+            release(pending);
+            pending = null;
+        },
+    };
+}

package/dist/standardTools.d.ts

@@ -1,7 +1,12 @@
 /**
  * Typed wrappers for the tools every operator gets from
  * `register_standard_tools` in the tollbooth-dpyc wheel.
+ *
+ * Every wrapper takes the same optional `CallOptions` as `callTool`, last.
+ * A wrapper that is best-effort by default stays so unless the caller says
+ * otherwise; what the caller passes wins.
  */
+import { type CallOptions } from "./client.ts";
 /** What a patron must supply beyond the npub proof, per the wheel's `patron_auth_block`. */
 export interface PatronAuth {
     mode: "oauth" | "secure_courier" | "none";
@@ -42,7 +47,7 @@ export interface ServiceStatus {
     lifecycle?: string;
     message?: string;
 }
-export declare function serviceStatus(): Promise<ServiceStatus>;
+export declare function serviceStatus(opts?: CallOptions): Promise<ServiceStatus>;
 export interface NpubProofResult {
     success?: boolean;
     proven_npub?: string;
@@ -62,12 +67,12 @@ export interface NpubProofResult {
  * in the DM is the one on their own screen; an impostor firing the same tool
  * from elsewhere cannot make the patron's open tab show the attacker's code.
  */
-export declare function requestNpubProof(patronNpub: string, verifyAt?: string, reason?: string): Promise<NpubProofResult>;
+export declare function requestNpubProof(patronNpub: string, verifyAt?: string, reason?: string, opts?: CallOptions): Promise<NpubProofResult>;
 /**
  * Step 2: drain DMs for the signed reply to step 1. Call only after the human
  * says they replied — it is destructive, so never poll it.
  */
-export declare function receiveNpubProof(patronNpub: string, dpopToken: string): Promise<NpubProofResult>;
+export declare function receiveNpubProof(patronNpub: string, dpopToken: string, opts?: CallOptions): Promise<NpubProofResult>;
 export interface ProofStatusResult {
     success?: boolean;
     status?: "valid" | "expired" | "unknown" | string;
@@ -75,7 +80,7 @@ export interface ProofStatusResult {
     error?: string;
     error_code?: string;
 }
-export declare function checkProofStatus(patronNpub: string, dpopToken: string): Promise<ProofStatusResult>;
+export declare function checkProofStatus(patronNpub: string, dpopToken: string, opts?: CallOptions): Promise<ProofStatusResult>;
 /** One credit tranche: a purchase (or grant) and what is left of it. */
 export interface CreditTranche {
     id: string;
@@ -116,7 +121,7 @@ export interface CheckBalanceResult {
     error?: string;
     error_code?: string;
 }
-export declare function checkBalance(): Promise<CheckBalanceResult>;
+export declare function checkBalance(opts?: CallOptions): Promise<CheckBalanceResult>;
 export interface ConstraintEffect {
     type: string;
     message?: string;
@@ -148,7 +153,7 @@ export interface CheckPriceResult {
  * them (ad valorem, or a multiplier on a categorical argument). Null when
  * unreadable: show the answer without a price rather than invent one.
  */
-export declare function checkPrice(toolId: string, toolKwargs?: Record<string, unknown>): Promise<number | null>;
+export declare function checkPrice(toolId: string, toolKwargs?: Record<string, unknown>, opts?: CallOptions): Promise<number | null>;
 export interface PurchaseCreditsResult {
     success?: boolean;
     invoice_id?: string;
@@ -160,7 +165,7 @@ export interface PurchaseCreditsResult {
     error?: string;
     error_code?: string;
 }
-export declare function purchaseCredits(sats: number): Promise<PurchaseCreditsResult>;
+export declare function purchaseCredits(sats: number, opts?: CallOptions): Promise<PurchaseCreditsResult>;
 export interface CheckPaymentResult {
     success?: boolean;
     status?: "New" | "Processing" | "Settled" | "Expired" | "Invalid" | string;
@@ -175,7 +180,7 @@ export interface CheckPaymentResult {
     error?: string;
     error_code?: string;
 }
-export declare function checkPayment(invoiceId: string): Promise<CheckPaymentResult>;
+export declare function checkPayment(invoiceId: string, opts?: CallOptions): Promise<CheckPaymentResult>;
 export interface StatementInvoice {
     invoice_id: string;
     status: string;
@@ -224,7 +229,7 @@ export interface AccountStatementResult {
     error?: string;
     error_code?: string;
 }
-export declare function getAccountStatement(days?: number): Promise<AccountStatementResult>;
+export declare function getAccountStatement(days?: number, opts?: CallOptions): Promise<AccountStatementResult>;
 export interface PatronCoupon {
     coupon_id: string;
     name: string;
@@ -264,11 +269,11 @@ export interface ForgetCouponResult {
     error_code?: string;
 }
 /** The coupons this patron has redeemed here. Free. */
-export declare function listMyCoupons(): Promise<ListMyCouponsResult>;
+export declare function listMyCoupons(opts?: CallOptions): Promise<ListMyCouponsResult>;
 /** Redeem an operator's code once; the discount then applies on its own. Free. */
-export declare function redeemCoupon(code: string): Promise<RedeemCouponResult>;
+export declare function redeemCoupon(code: string, opts?: CallOptions): Promise<RedeemCouponResult>;
 /** Take a coupon off the patron's list. The code stays re-redeemable while its window allows. */
-export declare function forgetCoupon(couponId: string): Promise<ForgetCouponResult>;
+export declare function forgetCoupon(couponId: string, opts?: CallOptions): Promise<ForgetCouponResult>;
 export interface Kind0 {
     name?: string;
     display_name?: string;
@@ -285,7 +290,7 @@ export interface GetNostrProfileResult {
     profile?: Kind0;
     error?: string;
 }
-export declare function getNostrProfile(npub: string): Promise<GetNostrProfileResult>;
+export declare function getNostrProfile(npub: string, opts?: CallOptions): Promise<GetNostrProfileResult>;
 export interface PublishNostrProfileResult {
     success: boolean;
     ok?: number;
@@ -294,7 +299,7 @@ export interface PublishNostrProfileResult {
     error?: string;
 }
 /** Relay a kind-0 the BROWSER signed. The wheel verifies it and fans it out. */
-export declare function publishNostrProfile(npub: string, signedEvent: string): Promise<PublishNostrProfileResult>;
+export declare function publishNostrProfile(npub: string, signedEvent: string, opts?: CallOptions): Promise<PublishNostrProfileResult>;
 /** Every lifecycle `session_status` reports. */
 export type SessionLifecycle = "ready" | "warming_up" | "misconfigured" | "quota_exceeded" | "not_registered" | "no_identity";
 /** The patron's stored upstream OAuth token, when the operator has a provider. */
@@ -325,7 +330,7 @@ export interface SessionStatusResult {
  * Is the operator ready to serve? Free, no proof. With `patronNpub`, also the
  * patron's upstream OAuth token expiry, so a page can refresh ahead of time.
  */
-export declare function sessionStatus(patronNpub?: string): Promise<SessionStatusResult>;
+export declare function sessionStatus(patronNpub?: string, opts?: CallOptions): Promise<SessionStatusResult>;
 export interface OnboardingItem {
     field: string;
     /** "identity" | "authority" | "secret" */
@@ -353,12 +358,12 @@ export interface OperatorOnboardingStatus {
     error?: string;
     error_code?: string;
 }
-export declare function getOperatorOnboardingStatus(): Promise<OperatorOnboardingStatus>;
+export declare function getOperatorOnboardingStatus(opts?: CallOptions): Promise<OperatorOnboardingStatus>;
 /**
  * The operator's own balance at its Authority — what certifies patron top-ups.
  * The Authority's ledger, in the same shape as a patron's `check_balance`.
  */
-export declare function checkAuthorityBalance(): Promise<CheckBalanceResult>;
+export declare function checkAuthorityBalance(opts?: CallOptions): Promise<CheckBalanceResult>;
 export interface PricingStep {
     id: string;
     type: string;
@@ -395,7 +400,7 @@ export interface PricingModelResult {
     error?: string;
 }
 /** The operator's active pricing model. Free, no proof. */
-export declare function getPricingModel(): Promise<PricingModelResult>;
+export declare function getPricingModel(opts?: CallOptions): Promise<PricingModelResult>;
 export interface CanonicalIdentity {
     tool_id: string;
     mcp_name: string;
@@ -419,7 +424,7 @@ export interface CanonicalIdentitiesResult {
     }>;
     error?: string;
 }
-export declare function listCanonicalIdentities(): Promise<CanonicalIdentitiesResult>;
+export declare function listCanonicalIdentities(opts?: CallOptions): Promise<CanonicalIdentitiesResult>;
 export interface PatronCredentialFieldsResult {
     success?: boolean;
     fields?: string[];
@@ -436,8 +441,8 @@ export interface PatronCredentialWriteResult {
     error_code?: string;
 }
 /** The names of the patron's stored credential fields — never their values. */
-export declare function getPatronCredentialFields(): Promise<PatronCredentialFieldsResult>;
+export declare function getPatronCredentialFields(opts?: CallOptions): Promise<PatronCredentialFieldsResult>;
 /** Set one credential field, leaving the others as they are. */
-export declare function updatePatronCredential(field: string, value: string): Promise<PatronCredentialWriteResult>;
+export declare function updatePatronCredential(field: string, value: string, opts?: CallOptions): Promise<PatronCredentialWriteResult>;
 /** Remove one credential field, leaving the others as they are. */
-export declare function deletePatronCredential(field: string): Promise<PatronCredentialWriteResult>;
+export declare function deletePatronCredential(field: string, opts?: CallOptions): Promise<PatronCredentialWriteResult>;

package/dist/standardTools.js

@@ -1,10 +1,14 @@
 /**
  * Typed wrappers for the tools every operator gets from
  * `register_standard_tools` in the tollbooth-dpyc wheel.
+ *
+ * Every wrapper takes the same optional `CallOptions` as `callTool`, last.
+ * A wrapper that is best-effort by default stays so unless the caller says
+ * otherwise; what the caller passes wins.
  */
 import { callTool } from "./client.js";
-export function serviceStatus() {
-    return callTool("service_status", {}, { bestEffort: true });
+export function serviceStatus(opts) {
+    return callTool("service_status", {}, { bestEffort: true, ...opts });
 }
 /**
  * Step 1 of DM sign-in: a Secure Courier challenge DM to the npub. Free.
@@ -14,28 +18,25 @@ export function serviceStatus() {
  * in the DM is the one on their own screen; an impostor firing the same tool
  * from elsewhere cannot make the patron's open tab show the attacker's code.
  */
-export function requestNpubProof(patronNpub, verifyAt, reason) {
+export function requestNpubProof(patronNpub, verifyAt, reason, opts) {
     return callTool("request_npub_proof", {
         patron_npub: patronNpub,
         ...(verifyAt ? { verify_at: verifyAt } : {}),
         ...(reason ? { reason } : {}),
-    });
+    }, opts);
 }
 /**
  * Step 2: drain DMs for the signed reply to step 1. Call only after the human
  * says they replied — it is destructive, so never poll it.
  */
-export function receiveNpubProof(patronNpub, dpopToken) {
-    return callTool("receive_npub_proof", {
-        patron_npub: patronNpub,
-        dpop_token: dpopToken,
-    });
+export function receiveNpubProof(patronNpub, dpopToken, opts) {
+    return callTool("receive_npub_proof", { patron_npub: patronNpub, dpop_token: dpopToken }, opts);
 }
-export function checkProofStatus(patronNpub, dpopToken) {
-    return callTool("check_proof_status", { patron_npub: patronNpub, dpop_token: dpopToken }, { bestEffort: true });
+export function checkProofStatus(patronNpub, dpopToken, opts) {
+    return callTool("check_proof_status", { patron_npub: patronNpub, dpop_token: dpopToken }, { bestEffort: true, ...opts });
 }
-export function checkBalance() {
-    return callTool("check_balance", {});
+export function checkBalance(opts) {
+    return callTool("check_balance", {}, opts);
 }
 /**
  * The fare for one tool in api_sats, as the live pricing model resolves it,
@@ -44,79 +45,73 @@ export function checkBalance() {
  * them (ad valorem, or a multiplier on a categorical argument). Null when
  * unreadable: show the answer without a price rather than invent one.
  */
-export async function checkPrice(toolId, toolKwargs) {
-    const r = await callTool("check_price", {
-        tool_id: toolId,
-        ...(toolKwargs ? { tool_kwargs: JSON.stringify(toolKwargs) } : {}),
-    });
+export async function checkPrice(toolId, toolKwargs, opts) {
+    const r = await callTool("check_price", { tool_id: toolId, ...(toolKwargs ? { tool_kwargs: JSON.stringify(toolKwargs) } : {}) }, opts);
     const v = r.effective_cost_api_sats ?? r.base_cost_api_sats;
     return typeof v === "number" ? v : null;
 }
-export function purchaseCredits(sats) {
-    return callTool("purchase_credits", { amount_sats: sats });
+export function purchaseCredits(sats, opts) {
+    return callTool("purchase_credits", { amount_sats: sats }, opts);
 }
-export function checkPayment(invoiceId) {
-    return callTool("check_payment", { invoice_id: invoiceId });
+export function checkPayment(invoiceId, opts) {
+    return callTool("check_payment", { invoice_id: invoiceId }, opts);
 }
-export function getAccountStatement(days = 30) {
-    return callTool("account_statement", { days });
+export function getAccountStatement(days = 30, opts) {
+    return callTool("account_statement", { days }, opts);
 }
 /** The coupons this patron has redeemed here. Free. */
-export function listMyCoupons() {
-    return callTool("list_my_coupons", {});
+export function listMyCoupons(opts) {
+    return callTool("list_my_coupons", {}, opts);
 }
 /** Redeem an operator's code once; the discount then applies on its own. Free. */
-export function redeemCoupon(code) {
-    return callTool("redeem_coupon", { code });
+export function redeemCoupon(code, opts) {
+    return callTool("redeem_coupon", { code }, opts);
 }
 /** Take a coupon off the patron's list. The code stays re-redeemable while its window allows. */
-export function forgetCoupon(couponId) {
-    return callTool("forget_coupon", { coupon_id: couponId });
+export function forgetCoupon(couponId, opts) {
+    return callTool("forget_coupon", { coupon_id: couponId }, opts);
 }
-export function getNostrProfile(npub) {
-    return callTool("get_nostr_profile", { npub });
+export function getNostrProfile(npub, opts) {
+    return callTool("get_nostr_profile", { npub }, opts);
 }
 /** Relay a kind-0 the BROWSER signed. The wheel verifies it and fans it out. */
-export function publishNostrProfile(npub, signedEvent) {
-    return callTool("publish_nostr_profile", {
-        npub,
-        signed_event: signedEvent,
-    });
+export function publishNostrProfile(npub, signedEvent, opts) {
+    return callTool("publish_nostr_profile", { npub, signed_event: signedEvent }, opts);
 }
 /**
  * Is the operator ready to serve? Free, no proof. With `patronNpub`, also the
  * patron's upstream OAuth token expiry, so a page can refresh ahead of time.
  */
-export function sessionStatus(patronNpub) {
-    return callTool("session_status", patronNpub ? { patron_npub: patronNpub } : {}, { bestEffort: true });
+export function sessionStatus(patronNpub, opts) {
+    return callTool("session_status", patronNpub ? { patron_npub: patronNpub } : {}, { bestEffort: true, ...opts });
 }
-export function getOperatorOnboardingStatus() {
-    return callTool("get_operator_onboarding_status", {}, { bestEffort: true });
+export function getOperatorOnboardingStatus(opts) {
+    return callTool("get_operator_onboarding_status", {}, { bestEffort: true, ...opts });
 }
 /**
  * The operator's own balance at its Authority — what certifies patron top-ups.
  * The Authority's ledger, in the same shape as a patron's `check_balance`.
  */
-export function checkAuthorityBalance() {
-    return callTool("check_authority_balance", {}, { bestEffort: true });
+export function checkAuthorityBalance(opts) {
+    return callTool("check_authority_balance", {}, { bestEffort: true, ...opts });
 }
 /** The operator's active pricing model. Free, no proof. */
-export function getPricingModel() {
-    return callTool("get_pricing_model", {});
+export function getPricingModel(opts) {
+    return callTool("get_pricing_model", {}, opts);
 }
-export function listCanonicalIdentities() {
-    return callTool("list_canonical_identities", {});
+export function listCanonicalIdentities(opts) {
+    return callTool("list_canonical_identities", {}, opts);
 }
 /** The names of the patron's stored credential fields — never their values. */
-export function getPatronCredentialFields() {
-    return callTool("get_patron_credential_fields", {});
+export function getPatronCredentialFields(opts) {
+    return callTool("get_patron_credential_fields", {}, opts);
 }
 /** Set one credential field, leaving the others as they are. */
-export function updatePatronCredential(field, value) {
+export function updatePatronCredential(field, value, opts) {
     // `field` first: the log's scrubber keys on it to hide `value`.
-    return callTool("update_patron_credential", { field, value });
+    return callTool("update_patron_credential", { field, value }, opts);
 }
 /** Remove one credential field, leaving the others as they are. */
-export function deletePatronCredential(field) {
-    return callTool("delete_patron_credential", { field });
+export function deletePatronCredential(field, opts) {
+    return callTool("delete_patron_credential", { field }, opts);
 }

package/dist/table.d.ts

@@ -21,6 +21,16 @@ export declare function nextSort(col: string, activeCol: string, dir: SortDir, i
     col: string;
     dir: SortDir;
 };
+/** The `aria-sort` of a column header: set on the sorted column only. */
+export declare function ariaSort(col: string, activeCol: string, dir: SortDir): "ascending" | "descending" | undefined;
+/**
+ * How far to slide a popover sideways so it stays inside the viewport: the
+ * horizontal offset (px, negative is left) to add to where it would sit.
+ * `left` and `width` are its box as laid out before any slide. It keeps
+ * `margin` px from each edge; one wider than the room left is pinned to the
+ * left margin (give it a max-width to fit). Zero when it already fits.
+ */
+export declare function nudgeIntoView(left: number, width: number, viewportWidth: number, margin?: number): number;
 /**
  * A case-insensitive test for `pattern`. It is read as a regular expression
  * when it is one, and as plain text when it is not, so a stray "(" in a search

package/dist/table.js

@@ -35,6 +35,29 @@ export function nextSort(col, activeCol, dir, initial = "desc") {
         return { col, dir: dir === "desc" ? "asc" : "desc" };
     return { col, dir: initial };
 }
+/** The `aria-sort` of a column header: set on the sorted column only. */
+export function ariaSort(col, activeCol, dir) {
+    if (col !== activeCol)
+        return undefined;
+    return dir === "desc" ? "descending" : "ascending";
+}
+// ── A popover kept on screen ───────────────────────────────────────────────
+/**
+ * How far to slide a popover sideways so it stays inside the viewport: the
+ * horizontal offset (px, negative is left) to add to where it would sit.
+ * `left` and `width` are its box as laid out before any slide. It keeps
+ * `margin` px from each edge; one wider than the room left is pinned to the
+ * left margin (give it a max-width to fit). Zero when it already fits.
+ */
+export function nudgeIntoView(left, width, viewportWidth, margin = 8) {
+    const minLeft = margin;
+    const maxLeft = viewportWidth - margin - width;
+    if (maxLeft < minLeft || left < minLeft)
+        return minLeft - left;
+    if (left > maxLeft)
+        return maxLeft - left;
+    return 0;
+}
 // ── Filtering ──────────────────────────────────────────────────────────────
 /**
  * A case-insensitive test for `pattern`. It is read as a regular expression

package/dist/wallet.d.ts

@@ -66,6 +66,24 @@ export declare function paymentPhase(status: string | undefined | null): Payment
 export declare function invoiceFrom(result: PurchaseCreditsResult, asked: number): Invoice | null;
 /** A whole number of sats worth invoicing, from what the patron typed; else null. */
 export declare function parseSats(input: string | number): number | null;
+/**
+ * The amount box. Tapping a preset only fills it; an invoice is made only by
+ * the explicit "Create invoice" action, which reads `parseSats(text)`. A tap is
+ * a choice, not a purchase — a patron who taps the wrong chip changes it
+ * before anything is asked of the service.
+ */
+export type AmountEvent = {
+    type: "preset";
+    sats: number;
+} | {
+    type: "typed";
+    text: string;
+} | {
+    type: "clear";
+};
+export declare function amountReducer(text: string, event: AmountEvent): string;
+/** Whether preset `sats` is what the amount box holds — the chip to mark as chosen. */
+export declare function presetChosen(text: string, sats: number): boolean;
 export declare function topUpReducer(state: TopUpState, event: TopUpEvent): TopUpState;
 /** Whether a poll should run now: an invoice is out, nothing is in flight, and the budget is not spent. */
 export declare function shouldPoll(state: TopUpState, maxChecks: number): boolean;

package/dist/wallet.js

@@ -38,6 +38,20 @@ export function parseSats(input) {
     const n = typeof input === "number" ? input : Number(String(input).replace(/[\s,_]/g, ""));
     return Number.isSafeInteger(n) && n > 0 ? n : null;
 }
+export function amountReducer(text, event) {
+    switch (event.type) {
+        case "preset":
+            return parseSats(event.sats) === null ? text : String(event.sats);
+        case "typed":
+            return event.text.replace(/[^\d]/g, "");
+        case "clear":
+            return "";
+    }
+}
+/** Whether preset `sats` is what the amount box holds — the chip to mark as chosen. */
+export function presetChosen(text, sats) {
+    return parseSats(text) === sats;
+}
 export function topUpReducer(state, event) {
     switch (event.type) {
         case "create":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tollbooth-dpyc/web",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Shared browser SDK for Tollbooth DPYC operator front ends: npub sign-in, proofs, MCP client, profile and wallet",
   "license": "Apache-2.0",
   "author": "Lonnie VanZandt",