@tollbooth-dpyc/web 0.4.0 → 0.5.0

package/README.md

@@ -66,7 +66,12 @@ zone the site stores under `<prefix>:timezone`, if any.
 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:
+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";
@@ -79,9 +84,23 @@ const QUOTES: Quote[] = [{ text: "Observe the seasons.", author: "Hesiod" }];
   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/react/QuoteScroller.d.ts

@@ -11,8 +11,16 @@
  * 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. Coloured only through `--tb-*` tokens.
+ * 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
@@ -27,7 +35,31 @@ export interface QuoteScrollerProps {
     spinner?: boolean;
     /** How long each quote stays, in ms. Default 3500. */
     intervalMs?: number;
-    /** Classes for the outer box (padding, placement). */
-    className?: string;
+    /** 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, className, }: QuoteScrollerProps): import("react").JSX.Element;
+export default function QuoteScroller({ quotes, source, heading, spinner, intervalMs, classNames, renderQuote, marks, }: QuoteScrollerProps): import("react").JSX.Element;

package/dist/react/QuoteScroller.js

@@ -12,11 +12,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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. Coloured only through `--tb-*` tokens.
+ * 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, useMemo, useRef, useState } from "react";
+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)";
@@ -40,7 +48,7 @@ function usePageVisible() {
     }, []);
     return shown;
 }
-export default function QuoteScroller({ quotes, source, heading, spinner = false, intervalMs = 3500, className = "", }) {
+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
@@ -94,13 +102,17 @@ export default function QuoteScroller({ quotes, source, heading, spinner = false
             setShown(true);
         };
     }, [list, intervalMs, reduced, pageVisible]);
-    const longest = useMemo(() => list.reduce((a, q) => (!a || q.text.length + q.author.length > a.text.length + a.author.length ? q : a), undefined), [list]);
     const q = list[index % Math.max(list.length, 1)];
-    return (_jsxs("div", { className: `px-4 py-6 text-center ${className}`, children: [heading && (_jsxs("div", { className: "mb-5 flex items-center justify-center gap-2 font-mono text-[11px] uppercase tracking-[0.3em] text-[var(--tb-accent)]", children: [spinner && _jsx(Loader2, { "aria-hidden": true, className: "h-3.5 w-3.5 motion-safe:animate-spin" }), heading] })), q && longest && (_jsxs("div", { className: "mx-auto grid max-w-xl", children: [_jsx(QuoteText, { quote: longest, className: "invisible [grid-area:1/1]", hidden: true }), _jsx(QuoteText, { quote: q, className: "[grid-area:1/1]", style: {
+    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`,
-                        }, live: true })] }))] }));
-}
-function QuoteText({ quote, className, style, hidden = false, live = false, }) {
-    return (_jsxs("figure", { className: `m-0 flex flex-col justify-center gap-3 ${className}`, style: style, "aria-hidden": hidden || undefined, "aria-live": live ? "polite" : undefined, "aria-atomic": live || undefined, children: [_jsxs("blockquote", { className: "m-0 font-serif text-[17px] italic leading-relaxed text-[var(--tb-ink)]", children: [_jsx("span", { className: "not-italic text-[var(--tb-accent)]", children: "\u201C" }), quote.text, _jsx("span", { className: "not-italic text-[var(--tb-accent)]", children: "\u201D" })] }), _jsx("figcaption", { className: "font-mono text-[10.5px] uppercase tracking-[0.22em] text-[var(--tb-muted)]", children: quote.author })] }));
+                        }, "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,7 +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 } from "./QuoteScroller.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/package.json

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