@tollbooth-dpyc/web 0.3.0 → 0.5.0

package/README.md

@@ -10,7 +10,7 @@ features. It is the peer of the `tollbooth-dpyc` Python wheel.
 - **MCP client** — one shared connection to the operator, typed wrappers for
   the standard tools (balance, top-up, statement, price, profile)
 - **React components** — `NpubGate`, `NostrProfilePanel`, `SessionKeyClaim`, `WalletCard`,
-  `AvatarPicker`, `DebugPanel`, `useSession`, `useDebugLog`
+  `AvatarPicker`, `DebugPanel`, `QuoteScroller`, `useSession`, `useDebugLog`
 - **Debug log** — every call, result and error from `callTool`, scrubbed of
   nsecs, hex keys, tokens and proofs before it is stored
 - **Pages proxy** — the `/mcp` Cloudflare Pages Function
@@ -61,6 +61,46 @@ configureDebugLog({ persist: true });   // optional: outlive a reload; max defau
 A site's own `debugPush` lines are scrubbed the same way. Stamps follow the
 zone the site stores under `<prefix>:timezone`, if any.
 
+### Quote scroller
+
+Something to read while a page loads. The quotes are the site's own; the
+package only scrolls them. Name a remote corpus to edit the set without a
+redeploy — it is fetched once per page and replaces the inline set when it
+arrives, or never, if it cannot be had.
+
+The package owns the mechanics (timing, cross-fade, reduced motion, pausing
+while the tab is hidden, `aria-live`, and a reserved height taken from the
+tallest quote as *your* styles lay it out). How the quotes look is yours:
+without `classNames` they are plain text inheriting from the page.
+
+```tsx
+import { QuoteScroller } from "@tollbooth-dpyc/web/react";
+import type { Quote } from "@tollbooth-dpyc/web";
+
+const QUOTES: Quote[] = [{ text: "Observe the seasons.", author: "Hesiod" }];
+
+<QuoteScroller
+  quotes={QUOTES}
+  source="https://raw.githubusercontent.com/lonniev/dpyc-community/main/quotes-agrarian.json"
+  heading="Reading the ledger…"
+  spinner
+  classNames={{
+    root: "px-4 py-6 text-center",
+    heading: "mb-5 font-mono text-[11px] uppercase tracking-[0.3em] text-[var(--tb-accent)]",
+    figure: "mx-auto flex max-w-xl flex-col gap-3",
+    text: "font-serif text-[17px] italic leading-relaxed",
+    mark: "not-italic text-[var(--tb-accent)]",
+    author: "font-mono text-[10.5px] uppercase tracking-[0.22em] text-[var(--tb-muted)]",
+  }}
+/>
+```
+
+Props: `quotes`, `source`, `heading`, `spinner`, `intervalMs` (default 3500),
+`classNames` (`root`, `heading`, `spinner`, `figure`, `text`, `mark`,
+`author`), `marks` (curly quotes by default; `false` for none, or
+`[open, close]`), and `renderQuote(quote)` to draw a quote's markup yourself
+(then `text`, `mark` and `author` are unused).
+
 ### Styling
 
 Components use Tailwind classes coloured only through CSS variables. Tell

package/dist/index.d.ts

@@ -11,4 +11,5 @@ export { canSignFor, isProven, type Claim } from "./signedIn.ts";
 export { readSignInFailure, type Situation } from "./signInSituation.ts";
 export { canSignProfile, fetchProfile, publishProfile } from "./nostrProfile.ts";
 export * from "./avatar.ts";
+export { loadQuotes, peekQuotes, shuffle, validQuotes, type Quote } from "./quotes.ts";
 export { captureGlobalErrors, clearDebug, configureDebugLog, debugEntries, debugLogText, debugPush, debugSeverity, onDebug, redact, type DebugEntry, type DebugLogOptions, type DebugSeverity, } from "./debugLog.ts";

package/dist/index.js

@@ -10,4 +10,5 @@ export { canSignFor, isProven } from "./signedIn.js";
 export { readSignInFailure } from "./signInSituation.js";
 export { canSignProfile, fetchProfile, publishProfile } from "./nostrProfile.js";
 export * from "./avatar.js";
+export { loadQuotes, peekQuotes, shuffle, validQuotes } from "./quotes.js";
 export { captureGlobalErrors, clearDebug, configureDebugLog, debugEntries, debugLogText, debugPush, debugSeverity, onDebug, redact, } from "./debugLog.js";

package/dist/quotes.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Quotations for a wait: something to read while a page loads, instead of a
+ * frozen "Loading…".
+ *
+ * Each site keeps its own set — agrarian for a farm, copywriters for a posting
+ * tool — and may name a remote corpus (a `{ quotes: [{ text, author }] }` JSON
+ * file) that supersedes it once it loads, so the set can be edited without a
+ * redeploy. The remote file is fetched at most once per page per URL; two
+ * sites or two corpora never share a cache entry. Anything that goes wrong —
+ * offline, a 404, a malformed file, an empty list — leaves the site's own set
+ * on screen.
+ */
+export interface Quote {
+    text: string;
+    author: string;
+}
+/** Keep only well-formed rows: both fields present as non-blank strings. */
+export declare function validQuotes(rows: unknown): Quote[];
+/** A shuffled copy (Fisher–Yates); the input is left alone. */
+export declare function shuffle<T>(items: ReadonlyArray<T>, random?: () => number): T[];
+/** The remote list already loaded for `source` this page, if there is one. */
+export declare function peekQuotes(source: string): Quote[] | undefined;
+/**
+ * The quotes at `source`, or `fallback` when they cannot be had. Fetched once
+ * per page per URL; a failure is remembered too, so a broken corpus costs one
+ * request, not one per spinner.
+ */
+export declare function loadQuotes(source: string, fallback: ReadonlyArray<Quote>, fetchImpl?: typeof fetch): Promise<Quote[]>;

package/dist/quotes.js

@@ -0,0 +1,77 @@
+/**
+ * Quotations for a wait: something to read while a page loads, instead of a
+ * frozen "Loading…".
+ *
+ * Each site keeps its own set — agrarian for a farm, copywriters for a posting
+ * tool — and may name a remote corpus (a `{ quotes: [{ text, author }] }` JSON
+ * file) that supersedes it once it loads, so the set can be edited without a
+ * redeploy. The remote file is fetched at most once per page per URL; two
+ * sites or two corpora never share a cache entry. Anything that goes wrong —
+ * offline, a 404, a malformed file, an empty list — leaves the site's own set
+ * on screen.
+ */
+/** Keep only well-formed rows: both fields present as non-blank strings. */
+export function validQuotes(rows) {
+    if (!Array.isArray(rows))
+        return [];
+    return rows.flatMap((row) => {
+        if (typeof row !== "object" || row === null)
+            return [];
+        const { text, author } = row;
+        if (typeof text !== "string" || typeof author !== "string")
+            return [];
+        if (!text.trim() || !author.trim())
+            return [];
+        return [{ text, author }];
+    });
+}
+/** A shuffled copy (Fisher–Yates); the input is left alone. */
+export function shuffle(items, random = Math.random) {
+    const copy = items.slice();
+    for (let i = copy.length - 1; i > 0; i--) {
+        const j = Math.floor(random() * (i + 1));
+        [copy[i], copy[j]] = [copy[j], copy[i]];
+    }
+    return copy;
+}
+// Per source URL: the validated remote list ([] when the fetch failed), and
+// the one request in flight so concurrent callers share it.
+const loaded = new Map();
+const inflight = new Map();
+/** The remote list already loaded for `source` this page, if there is one. */
+export function peekQuotes(source) {
+    const list = loaded.get(source);
+    return list && list.length ? list : undefined;
+}
+/**
+ * The quotes at `source`, or `fallback` when they cannot be had. Fetched once
+ * per page per URL; a failure is remembered too, so a broken corpus costs one
+ * request, not one per spinner.
+ */
+export async function loadQuotes(source, fallback, fetchImpl = globalThis.fetch) {
+    const pick = (list) => (list.length ? list : fallback.slice());
+    const done = loaded.get(source);
+    if (done)
+        return pick(done);
+    let pending = inflight.get(source);
+    if (!pending) {
+        pending = (async () => {
+            let list = [];
+            try {
+                const res = await fetchImpl(source, { cache: "no-cache" });
+                if (res.ok) {
+                    const body = (await res.json());
+                    list = validQuotes(body?.quotes);
+                }
+            }
+            catch {
+                list = [];
+            }
+            loaded.set(source, list);
+            inflight.delete(source);
+            return list;
+        })();
+        inflight.set(source, pending);
+    }
+    return pick(await pending);
+}

package/dist/react/QuoteScroller.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Something worth reading while a page loads — rotating quotations instead of
+ * a frozen "Loading…". First written for optionality-mcp as a port of the
+ * Pricing Studio app's LoadingQuoteView, then copied across the fleet; this is
+ * the one copy.
+ *
+ * The site brings its own quotes (`quotes`), so the scroller always has
+ * something to show without the network. `source` may name a remote corpus
+ * that supersedes them once it loads (see `loadQuotes`).
+ *
+ * The order is shuffled and then walked, so nothing repeats until every quote
+ * has shown. It cross-fades (instantly under reduced motion), stops while the
+ * tab is hidden, and reserves the height of its longest quote so the page
+ * does not jump as quotes change.
+ *
+ * Mechanics only. The package owns the timing, the fade, the cache and the
+ * reserved height; every visual choice — type, size, colour, spacing,
+ * alignment — belongs to the site, through `classNames` or `renderQuote`.
+ * With neither, the quotes are plain text that inherits from the page. The
+ * reserved height is the tallest quote as the SITE styles it: every quote is
+ * laid out, invisibly, in the same grid cell as the one on show.
+ */
+import { type ReactNode } from "react";
+import { type Quote } from "../quotes.ts";
+export interface QuoteScrollerProps {
+    /** The site's own quotes: shown at once, and kept if `source` fails. Pass a
+     *  module constant. */
+    quotes: ReadonlyArray<Quote>;
+    /** URL of a `{ quotes: [{ text, author }] }` JSON file that supersedes
+     *  `quotes` once it loads. */
+    source?: string;
+    /** A status line above the quotes ("Reading the ledger…"). */
+    heading?: string;
+    /** Show a spinner beside the heading. Default false. */
+    spinner?: boolean;
+    /** How long each quote stays, in ms. Default 3500. */
+    intervalMs?: number;
+    /** Classes for each part. The package adds no typography or colour of its
+     *  own to any of them. `text`, `mark` and `author` are unused when
+     *  `renderQuote` is given. */
+    classNames?: QuoteScrollerClassNames;
+    /** Full control of one quote's markup. The package still wraps it for the
+     *  fade and the reserved height. */
+    renderQuote?: (quote: Quote) => ReactNode;
+    /** Quotation marks around the text: the curly pair by default, `false` for
+     *  none, or your own `[open, close]`. */
+    marks?: boolean | readonly [open: string, close: string];
+}
+export interface QuoteScrollerClassNames {
+    /** The outer box. */
+    root?: string;
+    /** The status line. */
+    heading?: string;
+    /** The spinner icon. Given, it replaces the default 1em size. */
+    spinner?: string;
+    /** Each quote's `<figure>`. */
+    figure?: string;
+    /** The `<blockquote>` holding the text and its marks. */
+    text?: string;
+    /** Each quotation mark. */
+    mark?: string;
+    /** The `<figcaption>` naming the author. */
+    author?: string;
+}
+export default function QuoteScroller({ quotes, source, heading, spinner, intervalMs, classNames, renderQuote, marks, }: QuoteScrollerProps): import("react").JSX.Element;

package/dist/react/QuoteScroller.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Something worth reading while a page loads — rotating quotations instead of
+ * a frozen "Loading…". First written for optionality-mcp as a port of the
+ * Pricing Studio app's LoadingQuoteView, then copied across the fleet; this is
+ * the one copy.
+ *
+ * The site brings its own quotes (`quotes`), so the scroller always has
+ * something to show without the network. `source` may name a remote corpus
+ * that supersedes them once it loads (see `loadQuotes`).
+ *
+ * The order is shuffled and then walked, so nothing repeats until every quote
+ * has shown. It cross-fades (instantly under reduced motion), stops while the
+ * tab is hidden, and reserves the height of its longest quote so the page
+ * does not jump as quotes change.
+ *
+ * Mechanics only. The package owns the timing, the fade, the cache and the
+ * reserved height; every visual choice — type, size, colour, spacing,
+ * alignment — belongs to the site, through `classNames` or `renderQuote`.
+ * With neither, the quotes are plain text that inherits from the page. The
+ * reserved height is the tallest quote as the SITE styles it: every quote is
+ * laid out, invisibly, in the same grid cell as the one on show.
+ */
+import { useEffect, useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { loadQuotes, peekQuotes, shuffle } from "../quotes.js";
+const CURLY = ["\u201c", "\u201d"];
+const FADE_MS = 450;
+function useReducedMotion() {
+    const query = "(prefers-reduced-motion: reduce)";
+    const [reduced, setReduced] = useState(() => typeof window !== "undefined" && !!window.matchMedia?.(query).matches);
+    useEffect(() => {
+        const mq = window.matchMedia?.(query);
+        if (!mq)
+            return;
+        const on = () => setReduced(mq.matches);
+        mq.addEventListener("change", on);
+        return () => mq.removeEventListener("change", on);
+    }, []);
+    return reduced;
+}
+function usePageVisible() {
+    const [shown, setShown] = useState(() => typeof document === "undefined" || document.visibilityState !== "hidden");
+    useEffect(() => {
+        const on = () => setShown(document.visibilityState !== "hidden");
+        document.addEventListener("visibilitychange", on);
+        return () => document.removeEventListener("visibilitychange", on);
+    }, []);
+    return shown;
+}
+export default function QuoteScroller({ quotes, source, heading, spinner = false, intervalMs = 3500, classNames = {}, renderQuote, marks = true, }) {
+    const reduced = useReducedMotion();
+    const pageVisible = usePageVisible();
+    // Content, not identity: a site that passes an inline array still gets one
+    // shuffle, not one per render.
+    const signature = quotes.map((q) => `${q.text}\u0000${q.author}`).join("\u0001");
+    const [list, setList] = useState(() => shuffle((source && peekQuotes(source)) || quotes));
+    const [index, setIndex] = useState(0);
+    const [shown, setShown] = useState(false);
+    const key = `${source ?? ""}\u0002${signature}`;
+    const first = useRef(key);
+    useEffect(() => {
+        if (first.current !== key) {
+            first.current = key;
+            setList(shuffle((source && peekQuotes(source)) || quotes));
+            setIndex(0);
+        }
+        if (!source || peekQuotes(source))
+            return; // nothing to fetch, or already showing it
+        let alive = true;
+        void loadQuotes(source, quotes).then((loaded) => {
+            if (!alive || !peekQuotes(source))
+                return; // the site's own set is already up
+            setList(shuffle(loaded));
+            setIndex(0);
+        });
+        return () => {
+            alive = false;
+        };
+        // `key` stands for `quotes` and `source`, by content.
+    }, [key]);
+    // Fade the first quote in.
+    useEffect(() => {
+        const id = window.setTimeout(() => setShown(true), 30);
+        return () => window.clearTimeout(id);
+    }, []);
+    useEffect(() => {
+        if (list.length <= 1 || !pageVisible)
+            return;
+        const fade = reduced ? 0 : FADE_MS;
+        let swap;
+        const tick = window.setInterval(() => {
+            setShown(false);
+            swap = window.setTimeout(() => {
+                setIndex((i) => (i + 1) % list.length);
+                setShown(true);
+            }, fade);
+        }, intervalMs);
+        return () => {
+            window.clearInterval(tick);
+            window.clearTimeout(swap);
+            setShown(true);
+        };
+    }, [list, intervalMs, reduced, pageVisible]);
+    const q = list[index % Math.max(list.length, 1)];
+    const pair = marks === true ? CURLY : marks === false ? null : marks;
+    const draw = renderQuote ??
+        ((quote) => (_jsxs("figure", { className: classNames.figure, children: [_jsxs("blockquote", { className: classNames.text, children: [pair && _jsx("span", { className: classNames.mark, children: pair[0] }), quote.text, pair && _jsx("span", { className: classNames.mark, children: pair[1] })] }), _jsx("figcaption", { className: classNames.author, children: quote.author })] })));
+    return (_jsxs("div", { className: classNames.root, children: [heading && (_jsxs("div", { className: classNames.heading, children: [spinner && (_jsx(Loader2, { "aria-hidden": true, className: `${classNames.spinner ?? "inline-block h-[1em] w-[1em]"} motion-safe:animate-spin` })), spinner && " ", heading] })), q && (_jsxs("div", { style: STAGE, children: [list.map((each, i) => (_jsx("div", { style: HOLDER, "aria-hidden": true, children: draw(each) }, i))), _jsx("div", { style: {
+                            ...CELL,
+                            opacity: shown ? 1 : 0,
+                            transition: reduced ? "none" : `opacity ${FADE_MS}ms ease`,
+                        }, "aria-live": "polite", "aria-atomic": true, children: draw(q) })] }))] }));
+}
+// Structure for the mechanism only, inline so it needs no stylesheet.
+const STAGE = { display: "grid" };
+const CELL = { gridArea: "1 / 1", minWidth: 0 };
+const HOLDER = { ...CELL, visibility: "hidden" };

package/dist/react/SessionKeyClaim.d.ts

@@ -3,8 +3,9 @@
  *
  * Renders ONLY when this browser holds the session nsec for the signed-in
  * npub. NIP-07 and courier-proof sign-ins see nothing: no disabled control,
- * no placeholder, no mention. Reveal takes a deliberate second step so an
- * account page opened in front of other people does not paint the key.
+ * no placeholder, no mention. Painting the key takes two deliberate taps —
+ * "Claim your session key", then the Reveal chip — so an account page opened
+ * in front of other people does not show it.
  *
  * Destinations: copy, download .env, password-manager prompt, and an
  * encrypted DM to another npub the patron names. The nsec never reaches a

package/dist/react/SessionKeyClaim.js

@@ -4,8 +4,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Renders ONLY when this browser holds the session nsec for the signed-in
  * npub. NIP-07 and courier-proof sign-ins see nothing: no disabled control,
- * no placeholder, no mention. Reveal takes a deliberate second step so an
- * account page opened in front of other people does not paint the key.
+ * no placeholder, no mention. Painting the key takes two deliberate taps —
+ * "Claim your session key", then the Reveal chip — so an account page opened
+ * in front of other people does not show it.
  *
  * Destinations: copy, download .env, password-manager prompt, and an
  * encrypted DM to another npub the patron names. The nsec never reaches a
@@ -161,10 +162,10 @@ function SessionKeyClaimInner() {
                             setDmOpen(false);
                             setFlash(null);
                             setRecipient("");
-                        }, className: `text-[12px] ${muted} hover:text-[var(--tb-ink)]`, children: "Hide" })] }), _jsxs("p", { className: `mb-3 text-[12.5px] leading-relaxed ${muted}`, children: ["Anyone who holds this key is you. It leaves this page only when you choose a destination below \u2014 never logged, never sent to ", appName, "."] }), showKey ? (_jsx("div", { className: "mb-3 break-all rounded-lg border border-[var(--tb-line)] bg-[var(--tb-surface-2)] px-3 py-2 font-mono text-[12px] text-[var(--tb-ink)]", children: getSessionNsec() })) : (_jsx("button", { type: "button", onClick: () => setShowKey(true), className: `mb-3 text-[12.5px] ${muted} underline-offset-2 hover:text-[var(--tb-ink)] hover:underline`, children: "Show the key on screen" })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(DestButton, { onClick: () => void copyKey(), disabled: busy, children: copied ? "Copied" : "Copy" }), _jsx(DestButton, { onClick: () => void downloadEnv(), disabled: busy, children: "Download .env" }), _jsx(DestButton, { onClick: () => void passwordManagerSave(), disabled: busy, children: "Password manager" }), _jsx(DestButton, { onClick: () => {
+                        }, className: `text-[12px] ${muted} hover:text-[var(--tb-ink)]`, children: "Hide" })] }), _jsxs("p", { className: `mb-3 text-[12.5px] leading-relaxed ${muted}`, children: ["Anyone who holds this key is you. It leaves this page only when you choose a destination below \u2014 never logged, never sent to ", appName, "."] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(DestButton, { onClick: () => setShowKey((v) => !v), active: showKey, children: showKey ? "Conceal" : "Reveal" }), _jsx(DestButton, { onClick: () => void copyKey(), disabled: busy, children: copied ? "Copied" : "Copy" }), _jsx(DestButton, { onClick: () => void downloadEnv(), disabled: busy, children: "Download .env" }), _jsx(DestButton, { onClick: () => void passwordManagerSave(), disabled: busy, children: "Password manager" }), _jsx(DestButton, { onClick: () => {
                             setDmOpen((v) => !v);
                             setFlash(null);
-                        }, disabled: busy, active: dmOpen, children: "Send by DM" })] }), dmOpen && (_jsxs("div", { className: "mt-3 space-y-2 rounded-lg border border-[var(--tb-line)] bg-[var(--tb-surface-2)] p-3", children: [_jsx("p", { className: `text-[12px] leading-relaxed ${muted}`, children: "Encrypts the key to an npub you own and publishes the sealed message to public relays. Only that npub can open it." }), _jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [_jsxs("label", { className: `block min-w-[16rem] flex-1 text-[12px] ${muted}`, children: ["Recipient npub", _jsx("input", { value: recipient, onChange: (e) => setRecipient(e.target.value), spellCheck: false, autoCapitalize: "off", autoCorrect: "off", placeholder: "npub1\u2026", className: `mt-1 h-11 ${input}` })] }), _jsx("button", { type: "button", onClick: () => void sendDm(), disabled: busy || recipient.trim().length < 60, className: "min-h-11 shrink-0 rounded-full border border-[var(--tb-accent)] bg-[var(--tb-accent)] px-4 text-[13px] font-semibold text-[var(--tb-on-accent)] disabled:opacity-40", children: busy ? "Sending…" : "Send encrypted DM" })] })] })), _jsxs("form", { ref: formRef, className: "absolute h-px w-px overflow-hidden opacity-0", "aria-hidden": "true", autoComplete: "on", onSubmit: (e) => {
+                        }, disabled: busy, active: dmOpen, children: "Send by DM" })] }), showKey && (_jsx("div", { className: "mt-3 break-all rounded-lg border border-[var(--tb-line)] bg-[var(--tb-surface-2)] px-3 py-2 font-mono text-[12px] text-[var(--tb-ink)]", children: getSessionNsec() })), dmOpen && (_jsxs("div", { className: "mt-3 space-y-2 rounded-lg border border-[var(--tb-line)] bg-[var(--tb-surface-2)] p-3", children: [_jsx("p", { className: `text-[12px] leading-relaxed ${muted}`, children: "Encrypts the key to an npub you own and publishes the sealed message to public relays. Only that npub can open it." }), _jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [_jsxs("label", { className: `block min-w-[16rem] flex-1 text-[12px] ${muted}`, children: ["Recipient npub", _jsx("input", { value: recipient, onChange: (e) => setRecipient(e.target.value), spellCheck: false, autoCapitalize: "off", autoCorrect: "off", placeholder: "npub1\u2026", className: `mt-1 h-11 ${input}` })] }), _jsx("button", { type: "button", onClick: () => void sendDm(), disabled: busy || recipient.trim().length < 60, className: "min-h-11 shrink-0 rounded-full border border-[var(--tb-accent)] bg-[var(--tb-accent)] px-4 text-[13px] font-semibold text-[var(--tb-on-accent)] disabled:opacity-40", children: busy ? "Sending…" : "Send encrypted DM" })] })] })), _jsxs("form", { ref: formRef, className: "absolute h-px w-px overflow-hidden opacity-0", "aria-hidden": "true", autoComplete: "on", onSubmit: (e) => {
                     e.preventDefault();
                 }, children: [_jsx("input", { ref: userRef, name: "username", autoComplete: "username", defaultValue: "", readOnly: true, tabIndex: -1 }), _jsx("input", { ref: passRef, name: "password", type: "password", autoComplete: "new-password", defaultValue: "", readOnly: true, tabIndex: -1 })] }), flash && (_jsx("p", { className: `mt-3 text-[12.5px] leading-relaxed ${flash.tone === "ok" ? "text-[var(--tb-ink)]" : "text-[var(--tb-err-ink)]"}`, role: "status", children: flash.text }))] }));
 }

package/dist/react/index.d.ts

@@ -3,6 +3,7 @@ export { default as AvatarPicker } from "./AvatarPicker.tsx";
 export { default as DebugPanel, type DebugPanelProps } from "./DebugPanel.tsx";
 export { default as NpubGate } from "./NpubGate.tsx";
 export { default as NostrProfilePanel } from "./NostrProfilePanel.tsx";
+export { default as QuoteScroller, type QuoteScrollerProps, type QuoteScrollerClassNames } from "./QuoteScroller.tsx";
 export { default as SessionKeyClaim } from "./SessionKeyClaim.tsx";
 export { default as WalletCard } from "./WalletCard.tsx";
 export { useSession, type Session } from "./useSession.ts";

package/dist/react/index.js

@@ -3,6 +3,7 @@ export { default as AvatarPicker } from "./AvatarPicker.js";
 export { default as DebugPanel } from "./DebugPanel.js";
 export { default as NpubGate } from "./NpubGate.js";
 export { default as NostrProfilePanel } from "./NostrProfilePanel.js";
+export { default as QuoteScroller } from "./QuoteScroller.js";
 export { default as SessionKeyClaim } from "./SessionKeyClaim.js";
 export { default as WalletCard } from "./WalletCard.js";
 export { useSession } from "./useSession.js";

package/package.json

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