@tollbooth-dpyc/web 1.5.0 → 1.6.0

package/README.md

@@ -227,6 +227,10 @@ function Nav() {
   the lapsed-sign-in note), or the gate alone. The frame is a column: "page"
   grows with the content; "viewport" pins it to the screen and lets the
   content shrink, so the debug log's spacer never pushes a bottom rail off.
+  `shell.statusState` is `"connecting"`, `"ready"` or `"failed"`;
+  `shell.statusError` is the failure as one short, scrubbed line; and
+  `shell.retryStatus()` runs the check again — so a banner can say
+  "connection failed" rather than "Connecting…" through an outage.
 - `SiteNav`: brand, pages (icon, label, badge), `trailing`, and an account
   menu (avatar → identity, links, Log out). Below `collapse` (default
   `(max-width: 639px)`; `false` never) the pages fold into a menu button.
@@ -243,6 +247,20 @@ function Nav() {
   `classNames.spinning`), is disabled and `aria-busy` while `onRefresh`'s
   promise runs or `busy` is set; `label` is the tooltip and accessible name.
 
+### Sign-in gate
+
+`NpubGate` (or `AppShell`'s `gateOptions`) takes `welcome` — the site's own
+words about what this place is for, above the card. Under the card it shows
+`SignInSteps`, the nine-step sequence (you enter your npub; this page asks the
+operator for a proof; a message reaches your Nostr client; you approve it for
+a time you choose; your signed reply travels back; you tap Verify; the
+operator checks the signature and hands the page a proof; the page unlocks)
+with the step under way lit from the gate's real stage, and `SignInLinks` —
+0xchat and Pricing Studio on the App Store, with the trademark credit
+(`linksCredit={false}` where the page's footer already carries it). Both are
+headless and exported on their own; `classNames.steps` / `classNames.links`
+restyle them inside the gate. `steps={false}` / `links={false}` remove them.
+
 ### Debug panel
 
 `callTool` logs to a shared, scrubbed ring buffer; `DebugPanel` shows it as a

package/dist/react/AppShell.d.ts

@@ -12,8 +12,9 @@
  * `signedOut` the gate is the page.
  *
  * Inside, `useAppShell()` gives any component the same `shell` — the npub,
- * `signOut`, the `service_status` answer — so a site keeps no session context
- * of its own.
+ * `signOut`, the `service_status` answer and whether that check is still
+ * connecting, answered or failed (with `retryStatus()` to ask again) — so a
+ * site keeps no session context of its own.
  *
  * Also done here, once: the stored theme applied before paint and followed
  * across tabs; the npub's kind-0 picture seeded as its avatar; `DebugPanel`
@@ -23,12 +24,20 @@ import { type ReactNode } from "react";
 import { type ServiceStatus } from "../standardTools.ts";
 import { type Theme } from "../theme.ts";
 import { type DebugPanelProps } from "./DebugPanel.tsx";
+import { type NpubGateProps } from "./NpubGate.tsx";
 import { type ShellFit } from "./shellLayout.ts";
+import { type StatusState } from "./statusCheck.ts";
 import { type Session } from "./useSession.ts";
 export interface AppShellContext {
     session: Session;
     /** The `service_status` answer, or null until (or unless) it comes. */
     status: ServiceStatus | null;
+    /** Where the `service_status` check stands: "connecting", "ready" or "failed". */
+    statusState: StatusState;
+    /** Why the last check failed — short, human, scrubbed of secrets — or null. */
+    statusError: string | null;
+    /** Run the `service_status` check again (back to "connecting" until it settles). */
+    retryStatus: () => void;
     /** The sign-in gate, ready to place. */
     gate: ReactNode;
 }
@@ -51,8 +60,13 @@ export interface AppShellProps {
     fit?: ShellFit;
     /** Arrive at the gate with a new key already made. */
     startFresh?: boolean;
+    /**
+     * The gate's own words and look: the site's `welcome` above the card, whether
+     * the sequence strip and the tool links show, and their `classNames`.
+     */
+    gateOptions?: Pick<NpubGateProps, "welcome" | "steps" | "links" | "linksCredit" | "classNames">;
     classNames?: AppShellClassNames;
 }
 /** The shell's session, status and gate, for any component inside `AppShell`. */
 export declare function useAppShell(): AppShellContext;
-export default function AppShell({ children, signedOut, footer, debug, theme, fit, startFresh, classNames: c, }: AppShellProps): import("react").JSX.Element;
+export default function AppShell({ children, signedOut, footer, debug, theme, fit, startFresh, gateOptions, classNames: c, }: AppShellProps): import("react").JSX.Element;

package/dist/react/AppShell.js

@@ -13,20 +13,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `signedOut` the gate is the page.
  *
  * Inside, `useAppShell()` gives any component the same `shell` — the npub,
- * `signOut`, the `service_status` answer — so a site keeps no session context
- * of its own.
+ * `signOut`, the `service_status` answer and whether that check is still
+ * connecting, answered or failed (with `retryStatus()` to ask again) — so a
+ * site keeps no session context of its own.
  *
  * Also done here, once: the stored theme applied before paint and followed
  * across tabs; the npub's kind-0 picture seeded as its avatar; `DebugPanel`
  * mounted last, so its spacer is the page's last thing (see `shellLayout`).
  */
-import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useReducer, useRef } from "react";
 import { hydrateAvatarFromNostr } from "../avatar.js";
+import { debugPush } from "../debugLog.js";
 import { serviceStatus } from "../standardTools.js";
 import { bootstrapTheme } from "../theme.js";
 import DebugPanel, {} from "./DebugPanel.js";
-import NpubGate from "./NpubGate.js";
+import NpubGate, {} from "./NpubGate.js";
 import { shellLayout } from "./shellLayout.js";
+import { STATUS_CONNECTING, statusReducer } from "./statusCheck.js";
 import { useSession } from "./useSession.js";
 import { useTheme } from "./useTheme.js";
 const Ctx = createContext(null);
@@ -37,29 +40,43 @@ export function useAppShell() {
         throw new Error("useAppShell must be used inside <AppShell>");
     return shell;
 }
-export default function AppShell({ children, signedOut, footer, debug = {}, theme = "dark", fit = "page", startFresh, classNames: c = {}, }) {
+export default function AppShell({ children, signedOut, footer, debug = {}, theme = "dark", fit = "page", startFresh, gateOptions, classNames: c = {}, }) {
     const session = useSession();
-    const [status, setStatus] = useState(null);
+    const [check, dispatch] = useReducer(statusReducer, STATUS_CONNECTING);
+    const attempt = useRef(0);
     useTheme(theme);
     useLayoutEffect(() => {
         bootstrapTheme(theme);
     }, [theme]);
+    // Only the newest check settles the state: a slow first answer must not
+    // overwrite a retry's, and an unmounted shell settles nothing.
+    const retryStatus = useCallback(() => {
+        const mine = ++attempt.current;
+        dispatch({ type: "start" });
+        serviceStatus({ bestEffort: true }).then((s) => {
+            if (attempt.current === mine)
+                dispatch({ type: "ok", status: s });
+        }, (e) => {
+            // service_status is a quiet call, so its failure is logged here.
+            debugPush("error", `service_status failed: ${e instanceof Error ? e.message : String(e)}`);
+            if (attempt.current === mine)
+                dispatch({ type: "fail", error: e });
+        });
+    }, []);
     useEffect(() => {
-        let live = true;
-        serviceStatus({ bestEffort: true })
-            .then((s) => live && setStatus(s))
-            .catch(() => live && setStatus(null));
+        retryStatus();
         return () => {
-            live = false;
+            attempt.current++;
         };
-    }, []);
+    }, [retryStatus]);
     const { npub, signedIn, notice, refresh } = session;
     useEffect(() => {
         if (signedIn && npub)
             void hydrateAvatarFromNostr(npub);
     }, [signedIn, npub]);
-    const gate = (_jsx(NpubGate, { onLogin: refresh, operatorHash: status?.operator_npub_hash, notice: notice, startFresh: startFresh }));
-    const shell = { session, status, gate };
+    const { status, state: statusState, error: statusError } = check;
+    const gate = (_jsx(NpubGate, { onLogin: refresh, operatorHash: status?.operator_npub_hash, notice: notice, startFresh: startFresh, ...gateOptions }));
+    const shell = { session, status, statusState, statusError, retryStatus, gate };
     const layout = shellLayout(fit);
     return (_jsx(Ctx.Provider, { value: shell, children: _jsxs("div", { className: c.root, style: layout.root, children: [_jsx("div", { className: c.body, style: layout.body, children: signedIn ? children(shell) : signedOut ? signedOut(shell) : gate }), typeof footer === "function" ? footer(shell) : footer, debug !== false && _jsx(DebugPanel, { ...debug })] }) }));
 }

package/dist/react/NpubGate.d.ts

@@ -4,13 +4,43 @@
  *   begin → request_npub_proof → awaiting reply → receive_npub_proof → app
  *
  * Success is not a `verified` flag but "no `error` and a token came back".
+ *
+ * Around the card: the site's `welcome` (its own words about what this place
+ * is for), the network's register line, and — below — `SignInSteps`, which
+ * shows the sequence above with the step under way lit from this component's
+ * real stage, and `SignInLinks`, the two tools a newcomer needs. Both take the
+ * gate's default look here; a site restyles them through `classNames`.
  */
-export default function NpubGate({ onLogin, startFresh, operatorHash, notice, }: {
+import { type ReactNode } from "react";
+import { type SignInLinksClassNames } from "./SignInLinks.tsx";
+import { type SignInStepsClassNames } from "./SignInSteps.tsx";
+export interface NpubGateClassNames {
+    root?: string;
+    /** Around the site's `welcome`. */
+    welcome?: string;
+    /** The network's register line under the heading. */
+    register?: string;
+    /** The sequence strip's parts; the gate's defaults apply where unset. */
+    steps?: SignInStepsClassNames;
+    /** The tools list's parts; the gate's defaults apply where unset. */
+    links?: SignInLinksClassNames;
+}
+export interface NpubGateProps {
     onLogin: () => void;
     /** Arrive with a key already made, for a first-timer who asked for one. */
     startFresh?: boolean;
-    /** Operator fingerprint, shown so the patron can check who sent the DM. */
+    /** Operator fingerprint, shown so the patron can check who sent the message. */
     operatorHash?: string;
     /** A routine re-auth prompt, drawn as a calm note rather than an error. */
     notice?: string;
-}): import("react").JSX.Element;
+    /** The site's own words about what this place is for, above the card. */
+    welcome?: ReactNode;
+    /** The sequence strip under the card. Default true. */
+    steps?: boolean;
+    /** The 0xchat / Pricing Studio links under the strip. Default true. */
+    links?: boolean;
+    /** The trademark credit under the links. Default true; false when the page's footer carries it. */
+    linksCredit?: boolean;
+    classNames?: NpubGateClassNames;
+}
+export default function NpubGate({ onLogin, startFresh, operatorHash, notice, welcome, steps, links, linksCredit, classNames: c, }: NpubGateProps): import("react").JSX.Element;

package/dist/react/NpubGate.js

@@ -5,6 +5,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *   begin → request_npub_proof → awaiting reply → receive_npub_proof → app
  *
  * Success is not a `verified` flag but "no `error` and a token came back".
+ *
+ * Around the card: the site's `welcome` (its own words about what this place
+ * is for), the network's register line, and — below — `SignInSteps`, which
+ * shows the sequence above with the step under way lit from this component's
+ * real stage, and `SignInLinks`, the two tools a newcomer needs. Both take the
+ * gate's default look here; a site restyles them through `classNames`.
  */
 import { useEffect, useRef, useState } from "react";
 import { generateSecretKey, getPublicKey, nip19 } from "nostr-tools";
@@ -13,8 +19,31 @@ import { forgetRecentLogin, getLastTypedNpub, getValidRecentLogins, recordRecent
 import { setSessionNsec } from "../sessionNsec.js";
 import { readSignInFailure } from "../signInSituation.js";
 import { receiveNpubProof, requestNpubProof } from "../standardTools.js";
+import { cx } from "./cx.js";
+import SignInLinks, {} from "./SignInLinks.js";
+import SignInSteps, {} from "./SignInSteps.js";
+import { gateStage } from "./signInFlow.js";
 import { card, errBox, ghost, input, muted, primary, warnBox } from "./ui.js";
-export default function NpubGate({ onLogin, startFresh = false, operatorHash, notice, }) {
+const STEPS_LOOK = {
+    root: "mt-6 space-y-1.5",
+    step: "grid grid-cols-[1.5rem_auto_1fr] items-baseline gap-x-2 rounded-lg border px-3 py-1.5 text-xs transition-colors",
+    done: "border-transparent text-[var(--tb-muted)] opacity-70",
+    current: "border-[var(--tb-accent)] bg-[var(--tb-surface)] text-[var(--tb-ink)]",
+    todo: "border-transparent text-[var(--tb-muted)]",
+    index: "font-mono text-[10px] tabular-nums",
+    actor: "font-medium",
+    label: "",
+};
+const LINKS_LOOK = {
+    root: "mt-6 space-y-2",
+    lead: `text-xs ${muted}`,
+    list: "space-y-1.5",
+    link: `${card} block px-3 py-2.5 hover:border-[var(--tb-accent)] transition-colors`,
+    name: "block text-sm font-medium",
+    line: `block text-xs ${muted}`,
+    credit: `text-[10px] leading-relaxed ${muted}`,
+};
+export default function NpubGate({ onLogin, startFresh = false, operatorHash, notice, welcome, steps = true, links = true, linksCredit = true, classNames: c = {}, }) {
     const { appName } = tollboothConfig();
     // Prefilled from what was typed last, NOT from the stored identity.
     const [value, setValue] = useState(getLastTypedNpub());
@@ -133,7 +162,7 @@ export default function NpubGate({ onLogin, startFresh = false, operatorHash, no
         setPendingProof("");
         setError("");
     }
-    return (_jsxs("div", { className: "max-w-md mx-auto mt-12 px-4", children: [_jsxs("h1", { className: "text-xl font-semibold mb-1", children: ["Sign in to ", appName] }), _jsx("p", { className: `text-sm mb-5 ${muted}`, children: "Your Nostr npub is your identity. No email, no password." }), notice && _jsx("div", { className: `mb-5 ${warnBox}`, children: notice }), stage === "begin" && recents.length > 0 && (_jsxs("div", { className: "mb-5", children: [_jsx("div", { className: `text-xs uppercase tracking-wider mb-2 ${muted}`, children: "Recent identities" }), _jsx("div", { className: "space-y-1.5", children: recents.map((e) => (_jsxs("div", { className: "flex gap-1.5", children: [_jsxs("button", { type: "button", onClick: () => reuseRecent(e), disabled: busy, title: `Re-enter as ${e.npub} on the cached proof`, className: `${card} flex-1 flex items-center justify-between px-3 py-2.5 text-left hover:border-[var(--tb-accent)]`, children: [_jsxs("span", { className: "font-mono text-xs truncate", children: [e.npub.slice(0, 12), "\u2026", e.npub.slice(-6)] }), _jsxs("span", { className: `text-xs shrink-0 ml-2 ${muted}`, children: [ttl(e.expiresAt), " left"] })] }), _jsx("button", { type: "button", onClick: () => forget(e.npub), disabled: busy, title: "Forget this identity", "aria-label": "Forget this identity", className: `w-9 rounded-lg border border-[var(--tb-line)] ${muted}`, children: "\u00D7" })] }, e.npub))) })] })), _jsxs("div", { className: `${card} p-4 space-y-3`, children: [stage === "begin" ? (_jsxs(_Fragment, { children: [_jsx("label", { className: `block text-xs uppercase tracking-wider ${muted}`, htmlFor: "tb-npub-field", children: "Paste your npub or nsec" }), _jsx("input", { id: "tb-npub-field", type: isNsec ? "password" : "text", value: value, onChange: (e) => {
+    return (_jsxs("div", { className: cx("max-w-md mx-auto mt-12 px-4", c.root), children: [_jsxs("h1", { className: "text-xl font-semibold mb-1", children: ["Sign in to ", appName] }), welcome && _jsx("div", { className: cx("text-sm mb-3", c.welcome), children: welcome }), _jsxs("p", { className: cx(`text-sm mb-5 ${muted}`, c.register), children: [appName, " is an operator on the Tollbooth DPYC\u2122 network. DPYC\u2122 \u2014 Don't Pester Your Customer\u2122: no email, no password, no KYC. Your Nostr key is your identity."] }), notice && _jsx("div", { className: `mb-5 ${warnBox}`, children: notice }), stage === "begin" && recents.length > 0 && (_jsxs("div", { className: "mb-5", children: [_jsx("div", { className: `text-xs uppercase tracking-wider mb-2 ${muted}`, children: "Recent identities" }), _jsx("div", { className: "space-y-1.5", children: recents.map((e) => (_jsxs("div", { className: "flex gap-1.5", children: [_jsxs("button", { type: "button", onClick: () => reuseRecent(e), disabled: busy, title: `Re-enter as ${e.npub} on the cached proof`, className: `${card} flex-1 flex items-center justify-between px-3 py-2.5 text-left hover:border-[var(--tb-accent)]`, children: [_jsxs("span", { className: "font-mono text-xs truncate", children: [e.npub.slice(0, 12), "\u2026", e.npub.slice(-6)] }), _jsxs("span", { className: `text-xs shrink-0 ml-2 ${muted}`, children: [ttl(e.expiresAt), " left"] })] }), _jsx("button", { type: "button", onClick: () => forget(e.npub), disabled: busy, title: "Forget this identity", "aria-label": "Forget this identity", className: `w-9 rounded-lg border border-[var(--tb-line)] ${muted}`, children: "\u00D7" })] }, e.npub))) })] })), _jsxs("div", { className: `${card} p-4 space-y-3`, children: [stage === "begin" ? (_jsxs(_Fragment, { children: [_jsx("label", { className: `block text-xs uppercase tracking-wider ${muted}`, htmlFor: "tb-npub-field", children: "Paste your npub or nsec" }), _jsx("input", { id: "tb-npub-field", type: isNsec ? "password" : "text", value: value, onChange: (e) => {
                                     setValue(e.target.value);
                                     setGeneratedHint(false);
                                 }, onKeyDown: (e) => {
@@ -143,9 +172,9 @@ export default function NpubGate({ onLogin, startFresh = false, operatorHash, no
                                         signInWithNsec();
                                     else
                                         void begin();
-                                }, placeholder: "npub1\u2026 (DM challenge) or nsec1\u2026 (instant)", spellCheck: false, autoCapitalize: "off", autoCorrect: "off", className: input }), generatedHint && (_jsxs("div", { className: warnBox, children: ["New key generated. ", _jsx("b", { children: "Save this nsec" }), " somewhere safe \u2014 it's the only copy and it lives only in this browser."] })), _jsx("button", { type: "button", onClick: () => (isNsec ? signInWithNsec() : void begin()), disabled: !valid || busy, className: primary, children: busy ? "Sending…" : isNpub ? "Send proof DM" : "Sign in" }), _jsx("p", { className: `text-xs ${muted}`, children: isNsec
+                                }, placeholder: "npub1\u2026 (a message to your client) or nsec1\u2026 (instant)", spellCheck: false, autoCapitalize: "off", autoCorrect: "off", className: input }), generatedHint && (_jsxs("div", { className: warnBox, children: ["New key generated. ", _jsx("b", { children: "Save this nsec" }), " somewhere safe \u2014 it's the only copy and it lives only in this browser."] })), _jsx("button", { type: "button", onClick: () => (isNsec ? signInWithNsec() : void begin()), disabled: !valid || busy, className: primary, children: busy ? "Sending…" : isNpub ? "Send message" : "Sign in" }), _jsx("p", { className: `text-xs ${muted}`, children: isNsec
                                     ? "Your nsec stays in this browser and signs each call."
-                                    : "We send a Nostr DM to your npub. Reply from your Nostr client — your signature is the proof." }), _jsx("button", { type: "button", onClick: generateKey, className: ghost, children: "Generate a new key" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${warnBox} space-y-1.5`, children: [_jsx("div", { className: "font-medium", children: "DM sent \u2014 check your Nostr client." }), _jsx("div", { children: "Reply with any text. Your signature on that DM is the proof." }), operatorHash && (_jsxs("div", { children: ["Sender fingerprint: ", _jsxs("span", { className: "font-mono", children: ["\uD83D\uDD12 ", operatorHash] })] }))] }), pendingProof && (_jsxs("div", { className: "rounded-lg p-3 text-xs border border-[var(--tb-accent)] space-y-2", children: [_jsx("div", { className: `uppercase tracking-wider text-[10px] ${muted}`, children: "Confirmation code" }), _jsx("div", { className: "font-mono text-base select-all", children: pendingProof }), _jsxs("div", { className: `leading-relaxed ${muted}`, children: ["The same code appears in the DM. ", _jsx("b", { children: "Approve the DM only if the codes match." }), " If they differ \u2014 or the DM points you somewhere other than this site \u2014 do not reply."] })] })), _jsx("button", { type: "button", onClick: () => void finish(), disabled: busy, className: primary, children: busy ? "Checking…" : "I've replied — verify" }), _jsx("button", { type: "button", onClick: () => void begin(), disabled: busy, className: ghost, children: "Resend DM" }), _jsx("button", { type: "button", onClick: reset, disabled: busy, className: `w-full text-xs py-1.5 ${muted}`, children: "Use a different npub" })] })), error && _jsx(Trouble, { raw: error, appName: appName }), note && _jsx("div", { className: `text-xs text-center italic ${muted}`, children: note })] })] }));
+                                    : "We send a message to your npub. Approve it from your Nostr client — your signature is the proof." }), _jsx("button", { type: "button", onClick: generateKey, className: ghost, children: "Generate a new key" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${warnBox} space-y-1.5`, children: [_jsx("div", { className: "font-medium", children: "Message sent \u2014 open your Nostr client." }), _jsx("div", { children: "Reply with any text. Your signature on that reply is the proof." }), operatorHash && (_jsxs("div", { children: ["Sender fingerprint: ", _jsxs("span", { className: "font-mono", children: ["\uD83D\uDD12 ", operatorHash] })] }))] }), pendingProof && (_jsxs("div", { className: "rounded-lg p-3 text-xs border border-[var(--tb-accent)] space-y-2", children: [_jsx("div", { className: `uppercase tracking-wider text-[10px] ${muted}`, children: "Confirmation code" }), _jsx("div", { className: "font-mono text-base select-all", children: pendingProof }), _jsxs("div", { className: `leading-relaxed ${muted}`, children: ["The same code appears in the message. ", _jsx("b", { children: "Approve it only if the codes match." }), " If they differ \u2014 or the message points you somewhere other than this site \u2014 do not reply."] })] })), _jsx("button", { type: "button", onClick: () => void finish(), disabled: busy, className: primary, children: busy ? "Checking…" : "I've replied — verify" }), _jsx("button", { type: "button", onClick: () => void begin(), disabled: busy, className: ghost, children: "Resend" }), _jsx("button", { type: "button", onClick: reset, disabled: busy, className: `w-full text-xs py-1.5 ${muted}`, children: "Use a different npub" })] })), error && _jsx(Trouble, { raw: error, appName: appName }), note && _jsx("div", { className: `text-xs text-center italic ${muted}`, children: note })] }), steps && _jsx(SignInSteps, { stage: gateStage(stage, busy), classNames: { ...STEPS_LOOK, ...c.steps } }), links && _jsx(SignInLinks, { credit: linksCredit, classNames: { ...LINKS_LOOK, ...c.links } })] }));
 }
 /** A failure, read to the person: the lead first, the service's own words underneath. */
 function Trouble({ raw, appName }) {

package/dist/react/SignInLinks.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The two tools a newcomer needs, offered under the sign-in card: a Nostr
+ * client and Pricing Studio. Links open in a new tab; the credit line for
+ * other companies' marks is on by default and off where the page's own legal
+ * footer already carries it.
+ *
+ * Mechanics only: the list, the targets and the credit are the package's;
+ * every class is the site's.
+ */
+import type { ReactNode } from "react";
+import { type SignInLink } from "./signInTools.ts";
+export interface SignInLinksClassNames {
+    root?: string;
+    lead?: string;
+    list?: string;
+    item?: string;
+    link?: string;
+    name?: string;
+    line?: string;
+    credit?: string;
+}
+export interface SignInLinksProps {
+    /** Default: 0xchat and Pricing Studio. */
+    links?: readonly SignInLink[];
+    /** A line above the list. Default "New to Nostr? These two are all it takes." */
+    lead?: ReactNode;
+    /** The trademark credit. Default true; false when the page's footer carries it. */
+    credit?: boolean;
+    classNames?: SignInLinksClassNames;
+}
+export default function SignInLinks({ links, lead, credit, classNames: c, }: SignInLinksProps): import("react").JSX.Element;

package/dist/react/SignInLinks.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { SIGN_IN_LINKS, SIGN_IN_LINKS_CREDIT } from "./signInTools.js";
+export default function SignInLinks({ links = SIGN_IN_LINKS, lead = "New to Nostr? These two are all it takes.", credit = true, classNames: c = {}, }) {
+    return (_jsxs("nav", { "aria-label": "Tools for signing in", className: c.root, children: [lead && _jsx("p", { className: c.lead, children: lead }), _jsx("ul", { className: c.list, children: links.map((l) => (_jsx("li", { className: c.item, children: _jsxs("a", { href: l.href, target: "_blank", rel: "noopener noreferrer", className: cx(c.link), children: [_jsx("span", { className: c.name, children: l.name }), _jsx("span", { className: c.line, children: l.line })] }) }, l.id))) }), credit && _jsx("p", { className: c.credit, children: SIGN_IN_LINKS_CREDIT })] }));
+}

package/dist/react/SignInSteps.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The sequence under the sign-in card: what happens, who does it, and which
+ * step is under way now — read from the gate's real stage, never guessed.
+ *
+ * Mechanics only. It renders an ordered list with `data-state` on each step
+ * (`done` / `current` / `todo`) and `aria-current="step"` on the ones under
+ * way; every class is the site's through `classNames`. Without them the
+ * markup is plain and inherits from the page.
+ */
+import { type SignInActor, type SignInStage, type SignInStep } from "./signInFlow.ts";
+export interface SignInStepsClassNames {
+    root?: string;
+    step?: string;
+    /** Added to a step by its state. */
+    done?: string;
+    current?: string;
+    todo?: string;
+    /** The step number. */
+    index?: string;
+    /** Who acts. */
+    actor?: string;
+    label?: string;
+}
+export interface SignInStepsProps {
+    stage: SignInStage;
+    /** Default: the package's nine. */
+    steps?: readonly SignInStep[];
+    /** Names for the actors. Default: You / This page / The operator / Your Nostr client. */
+    actors?: Readonly<Record<SignInActor, string>>;
+    /** Accessible name of the list. Default "How signing in works". */
+    label?: string;
+    classNames?: SignInStepsClassNames;
+}
+export default function SignInSteps({ stage, steps, actors, label, classNames: c, }: SignInStepsProps): import("react").JSX.Element;

package/dist/react/SignInSteps.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The sequence under the sign-in card: what happens, who does it, and which
+ * step is under way now — read from the gate's real stage, never guessed.
+ *
+ * Mechanics only. It renders an ordered list with `data-state` on each step
+ * (`done` / `current` / `todo`) and `aria-current="step"` on the ones under
+ * way; every class is the site's through `classNames`. Without them the
+ * markup is plain and inherits from the page.
+ */
+import { cx } from "./cx.js";
+import { SIGN_IN_ACTORS, SIGN_IN_STEPS, stepState, } from "./signInFlow.js";
+export default function SignInSteps({ stage, steps = SIGN_IN_STEPS, actors = SIGN_IN_ACTORS, label = "How signing in works", classNames: c = {}, }) {
+    return (_jsx("ol", { "aria-label": label, className: c.root, children: steps.map((s, i) => {
+            const state = stepState(s, stage);
+            return (_jsxs("li", { "data-state": state, "aria-current": state === "current" ? "step" : undefined, className: cx(c.step, c[state]), children: [_jsx("span", { "aria-hidden": true, className: c.index, children: i + 1 }), _jsx("span", { className: c.actor, children: actors[s.actor] }), _jsx("span", { className: c.label, children: s.label })] }, s.id));
+        }) }));
+}

package/dist/react/index.d.ts

@@ -1,6 +1,7 @@
 export { default as AccountPage, type AccountPageClassNames, type AccountPageProps, type AccountSectionText, type AccountThemeProps, type AccountTimezoneProps, } from "./AccountPage.tsx";
 export { ACCOUNT_SECTIONS, type AccountSection } from "./accountSections.ts";
 export { default as AppShell, useAppShell, type AppShellClassNames, type AppShellContext, type AppShellProps, } from "./AppShell.tsx";
+export { statusErrorMessage, type StatusState } from "./statusCheck.ts";
 export type { ShellFit } from "./shellLayout.ts";
 export { default as Avatar } from "./Avatar.tsx";
 export { default as AvatarPicker } from "./AvatarPicker.tsx";
@@ -9,7 +10,11 @@ export { default as CouponsPanel, type CouponsPanelProps, type CouponsPanelClass
 export { default as DebugPanel, type DebugPanelProps } from "./DebugPanel.tsx";
 export { default as ErrorBoundary, type ErrorBoundaryProps, type ErrorBoundaryClassNames, type ErrorFallbackProps, } from "./ErrorBoundary.tsx";
 export { OperatorFundingStatus, PatronFundingStatus, type FundingStatusClassNames, type FundingStatusProps, type OperatorFundingStatusProps, type PatronFundingStatusProps, } from "./FundingStatus.tsx";
-export { default as NpubGate } from "./NpubGate.tsx";
+export { default as NpubGate, type NpubGateClassNames, type NpubGateProps } from "./NpubGate.tsx";
+export { default as SignInSteps, type SignInStepsClassNames, type SignInStepsProps } from "./SignInSteps.tsx";
+export { gateStage, SIGN_IN_ACTORS, SIGN_IN_STEPS, stepState, type SignInActor, type SignInStage, type SignInStep, type SignInStepState, } from "./signInFlow.ts";
+export { default as SignInLinks, type SignInLinksClassNames, type SignInLinksProps } from "./SignInLinks.tsx";
+export { SIGN_IN_LINKS, SIGN_IN_LINKS_CREDIT, type SignInLink } from "./signInTools.ts";
 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 RefreshButton, type RefreshButtonClassNames, type RefreshButtonProps, } from "./RefreshButton.tsx";

package/dist/react/index.js

@@ -1,6 +1,7 @@
 export { default as AccountPage, } from "./AccountPage.js";
 export { ACCOUNT_SECTIONS } from "./accountSections.js";
 export { default as AppShell, useAppShell, } from "./AppShell.js";
+export { statusErrorMessage } from "./statusCheck.js";
 export { default as Avatar } from "./Avatar.js";
 export { default as AvatarPicker } from "./AvatarPicker.js";
 export { default as BuildInfoPanel, } from "./BuildInfoPanel.js";
@@ -9,6 +10,10 @@ export { default as DebugPanel } from "./DebugPanel.js";
 export { default as ErrorBoundary, } from "./ErrorBoundary.js";
 export { OperatorFundingStatus, PatronFundingStatus, } from "./FundingStatus.js";
 export { default as NpubGate } from "./NpubGate.js";
+export { default as SignInSteps } from "./SignInSteps.js";
+export { gateStage, SIGN_IN_ACTORS, SIGN_IN_STEPS, stepState, } from "./signInFlow.js";
+export { default as SignInLinks } from "./SignInLinks.js";
+export { SIGN_IN_LINKS, SIGN_IN_LINKS_CREDIT } from "./signInTools.js";
 export { default as NostrProfilePanel } from "./NostrProfilePanel.js";
 export { PageControls, SortHeader, TableShell, } from "./PagedTable.js";
 export { default as RefreshButton, } from "./RefreshButton.js";

package/dist/react/signInFlow.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The pure half of `SignInSteps` (named apart from it: the filesystem is case-blind): what happens when someone signs in, in the
+ * order it happens, and which step is under way for a given gate stage.
+ *
+ * Nine steps, four actors. The words are the visitor's, not the protocol's:
+ * "the operator" (never MCP), "a proof" (never dpop), "this page" (never FE).
+ * A site may pass its own list to `SignInSteps`; this one is the default.
+ */
+/** Where the gate stands. `sending` is `begin` with a request in flight. */
+export type SignInStage = "begin" | "sending" | "awaiting" | "checking" | "done";
+export type SignInActor = "you" | "page" | "operator" | "client";
+export interface SignInStep {
+    id: string;
+    actor: SignInActor;
+    /** Short, on screen. */
+    label: string;
+    /** The stage during which this step is the one under way. */
+    at: SignInStage;
+}
+export type SignInStepState = "done" | "current" | "todo";
+export declare const SIGN_IN_ACTORS: Readonly<Record<SignInActor, string>>;
+export declare const SIGN_IN_STEPS: readonly SignInStep[];
+/** Whether `step` is behind, under way, or ahead of `stage`. */
+export declare function stepState(step: SignInStep, stage: SignInStage): SignInStepState;
+/** The gate's private stage and busy flag, read as one `SignInStage`. */
+export declare function gateStage(stage: "begin" | "awaiting" | "checking", busy: boolean): SignInStage;

package/dist/react/signInFlow.js

@@ -0,0 +1,42 @@
+/**
+ * The pure half of `SignInSteps` (named apart from it: the filesystem is case-blind): what happens when someone signs in, in the
+ * order it happens, and which step is under way for a given gate stage.
+ *
+ * Nine steps, four actors. The words are the visitor's, not the protocol's:
+ * "the operator" (never MCP), "a proof" (never dpop), "this page" (never FE).
+ * A site may pass its own list to `SignInSteps`; this one is the default.
+ */
+export const SIGN_IN_ACTORS = {
+    you: "You",
+    page: "This page",
+    operator: "The operator",
+    client: "Your Nostr client",
+};
+export const SIGN_IN_STEPS = [
+    { id: "enter", actor: "you", label: "Enter your npub", at: "begin" },
+    { id: "ask", actor: "page", label: "Asks the operator for a proof", at: "sending" },
+    { id: "message", actor: "operator", label: "Sends a message to your Nostr client", at: "awaiting" },
+    { id: "approve", actor: "you", label: "Approve it, for as long as you choose", at: "awaiting" },
+    { id: "reply", actor: "client", label: "Your signed reply travels back", at: "awaiting" },
+    { id: "verify", actor: "you", label: "Tap Verify", at: "awaiting" },
+    { id: "check", actor: "operator", label: "Checks your signature", at: "checking" },
+    { id: "token", actor: "operator", label: "Hands this page a proof", at: "checking" },
+    { id: "unlock", actor: "page", label: "Unlocks", at: "done" },
+];
+const ORDER = ["begin", "sending", "awaiting", "checking", "done"];
+/** Whether `step` is behind, under way, or ahead of `stage`. */
+export function stepState(step, stage) {
+    const now = ORDER.indexOf(stage);
+    const at = ORDER.indexOf(step.at);
+    if (at < now)
+        return "done";
+    if (at === now)
+        return "current";
+    return "todo";
+}
+/** The gate's private stage and busy flag, read as one `SignInStage`. */
+export function gateStage(stage, busy) {
+    if (stage === "begin")
+        return busy ? "sending" : "begin";
+    return stage;
+}

package/dist/react/signInTools.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Where a visitor gets the two tools the sign-in leans on: a Nostr client that
+ * holds their key and answers the message, and Pricing Studio, where the
+ * operators of this network price their tools.
+ *
+ * 0xchat links to its own download page rather than to one store, so the
+ * link stays right as its listings move. Pricing Studio's App Store page is
+ * public (id 6760925205). Apple's wording rule: an app is *available on the
+ * App Store*, never *at*.
+ */
+export interface SignInLink {
+    id: string;
+    name: string;
+    href: string;
+    /** One short line under the name. */
+    line: string;
+}
+export declare const SIGN_IN_LINKS: readonly SignInLink[];
+/** Shown once, small, wherever the links are — unless the page already carries a legal footer. */
+export declare const SIGN_IN_LINKS_CREDIT = "App Store is a trademark of Apple Inc., registered in the U.S. and other countries. 0xchat is a trademark of its owner.";

package/dist/react/signInTools.js

@@ -0,0 +1,26 @@
+/**
+ * Where a visitor gets the two tools the sign-in leans on: a Nostr client that
+ * holds their key and answers the message, and Pricing Studio, where the
+ * operators of this network price their tools.
+ *
+ * 0xchat links to its own download page rather than to one store, so the
+ * link stays right as its listings move. Pricing Studio's App Store page is
+ * public (id 6760925205). Apple's wording rule: an app is *available on the
+ * App Store*, never *at*.
+ */
+export const SIGN_IN_LINKS = [
+    {
+        id: "0xchat",
+        name: "0xchat",
+        href: "https://0xchat.com",
+        line: "A Nostr client for iPhone, Android and desktop. It holds your key and answers the sign-in message.",
+    },
+    {
+        id: "pricing-studio",
+        name: "Pricing Studio",
+        href: "https://apps.apple.com/us/app/pricing-studio/id6760925205",
+        line: "Where operators price their tools, live. Available on the App Store.",
+    },
+];
+/** Shown once, small, wherever the links are — unless the page already carries a legal footer. */
+export const SIGN_IN_LINKS_CREDIT = "App Store is a trademark of Apple Inc., registered in the U.S. and other countries. 0xchat is a trademark of its owner.";

package/dist/react/statusCheck.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The shell's `service_status` check as three states a site can tell apart:
+ * still connecting, answered, or failed. Before this a failed check read as
+ * "no answer yet", so a banner said "Connecting…" through a whole outage.
+ *
+ * Pure: `AppShell` feeds it events, and the tests feed it the same ones.
+ */
+import type { ServiceStatus } from "../standardTools.ts";
+export type StatusState = "connecting" | "ready" | "failed";
+export interface StatusCheck {
+    state: StatusState;
+    /** The last `service_status` answer; kept through a retry. */
+    status: ServiceStatus | null;
+    /** Why the last check failed — short, human, scrubbed — or null. */
+    error: string | null;
+}
+export type StatusEvent = {
+    type: "start";
+} | {
+    type: "ok";
+    status: ServiceStatus;
+} | {
+    type: "fail";
+    error: unknown;
+};
+export declare const STATUS_CONNECTING: StatusCheck;
+/** The longest `statusError` a banner is handed. */
+export declare const STATUS_ERROR_MAX = 140;
+/**
+ * A failed check as one short line: scrubbed of secrets, the runtime tool
+ * name dropped, whitespace collapsed, cut at `STATUS_ERROR_MAX`.
+ */
+export declare function statusErrorMessage(error: unknown): string;
+export declare function statusReducer(check: StatusCheck, event: StatusEvent): StatusCheck;

package/dist/react/statusCheck.js

@@ -0,0 +1,39 @@
+/**
+ * The shell's `service_status` check as three states a site can tell apart:
+ * still connecting, answered, or failed. Before this a failed check read as
+ * "no answer yet", so a banner said "Connecting…" through a whole outage.
+ *
+ * Pure: `AppShell` feeds it events, and the tests feed it the same ones.
+ */
+import { redact } from "../debugLog.js";
+import { isNetworkError } from "../networkError.js";
+export const STATUS_CONNECTING = { state: "connecting", status: null, error: null };
+/** The longest `statusError` a banner is handed. */
+export const STATUS_ERROR_MAX = 140;
+/**
+ * A failed check as one short line: scrubbed of secrets, the runtime tool
+ * name dropped, whitespace collapsed, cut at `STATUS_ERROR_MAX`.
+ */
+export function statusErrorMessage(error) {
+    const raw = error instanceof Error ? error.message : String(error ?? "");
+    const why = redact(raw)
+        .replace(/^[a-z0-9_]*service_status:\s*/i, "")
+        .replace(/\s+/g, " ")
+        .trim();
+    const line = isNetworkError(error)
+        ? why
+            ? `Could not reach the service — ${why}`
+            : "Could not reach the service"
+        : why || "The service did not answer";
+    return line.length > STATUS_ERROR_MAX ? `${line.slice(0, STATUS_ERROR_MAX - 1)}…` : line;
+}
+export function statusReducer(check, event) {
+    switch (event.type) {
+        case "start":
+            return { state: "connecting", status: check.status, error: null };
+        case "ok":
+            return { state: "ready", status: event.status, error: null };
+        case "fail":
+            return { state: "failed", status: check.status, error: statusErrorMessage(event.error) };
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tollbooth-dpyc/web",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "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",