@tollbooth-dpyc/web 0.4.0 → 1.0.0

package/README.md

@@ -44,8 +44,13 @@ export const onRequest = makeMcpProxy("https://chartremotely-mcp.fastmcp.app/mcp
 ### Debug panel
 
 `callTool` logs to a shared, scrubbed ring buffer; `DebugPanel` shows it as a
-bar along the bottom of the page with Copy and Clear. Put it once near the root.
-Anything the site alone needs goes in as children, drawn above the log:
+bar along the bottom of the page with Copy and Clear. Put it once, **last** in
+the app shell. The bar is fixed to the viewport, but it also keeps its own
+room in the page: an in-flow spacer as tall as the bar is right now (collapsed
+or open) plus the iOS safe-area inset, so the page's last line always scrolls
+clear of it. Mounted last, that spacer is the page's last thing; mounted
+earlier, the room opens up there instead. Anything the site alone needs goes
+in as children, drawn above the log:
 
 ```tsx
 import { configureDebugLog, debugPush } from "@tollbooth-dpyc/web";
@@ -66,7 +71,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 +89,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
@@ -96,6 +120,14 @@ them after:
 :root { --tb-accent: #4cc38a; }
 ```
 
+## Stability
+
+From 1.0.0 the public API — everything exported from `@tollbooth-dpyc/web`,
+`/react`, `/pages-proxy` and the `theme.css` tokens — follows semver. Patch and
+minor releases are safe to take unattended (the fleet's Renovate preset
+auto-merges them); a breaking change ships only as a new major, which Renovate
+holds for review.
+
 ## Develop
 
 ```sh

package/dist/react/DebugPanel.d.ts

@@ -13,6 +13,12 @@
  *
  * Touch-first: every control is a real button at least 40px square, nothing
  * hides behind hover, and the page under the bar stays tappable.
+ *
+ * The panel keeps its own space: beside the fixed bar it renders an in-flow
+ * spacer as tall as the bar is right now (collapsed or open, measured with a
+ * ResizeObserver) plus the iOS safe-area inset, so the page's last line can
+ * always scroll clear of it. Mount it LAST in the app shell so that spacer is
+ * the last thing in the page's flow.
  */
 import { type ReactNode } from "react";
 export interface DebugPanelProps {

package/dist/react/DebugPanel.js

@@ -14,11 +14,18 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *
  * Touch-first: every control is a real button at least 40px square, nothing
  * hides behind hover, and the page under the bar stays tappable.
+ *
+ * The panel keeps its own space: beside the fixed bar it renders an in-flow
+ * spacer as tall as the bar is right now (collapsed or open, measured with a
+ * ResizeObserver) plus the iOS safe-area inset, so the page's last line can
+ * always scroll clear of it. Mount it LAST in the app shell so that spacer is
+ * the last thing in the page's flow.
  */
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { onProofExpired } from "../client.js";
 import { captureGlobalErrors, clearDebug, debugLogText, debugPush, debugSeverity, } from "../debugLog.js";
 import { readStored, writeStored } from "../storage.js";
+import { debugSpacerHeight, debugSpacerPx } from "./debugSpacer.js";
 import { useDebugLog } from "./useDebugLog.js";
 const OPEN_KEY = "debug-open";
 const TYPE_INK = {
@@ -40,6 +47,26 @@ export default function DebugPanel({ title = "Debug", defaultOpen = false, captu
         return saved === "" ? defaultOpen : saved === "1";
     });
     const [copied, setCopied] = useState("");
+    const barRef = useRef(null);
+    // Null until measured (and on the server, or with no ResizeObserver): the
+    // spacer then reserves the collapsed bar.
+    const [barHeight, setBarHeight] = useState(null);
+    useEffect(() => {
+        const bar = barRef.current;
+        const RO = globalThis.ResizeObserver;
+        if (!bar || !RO)
+            return;
+        // The observer reports once on observe and after every resize — opening,
+        // closing, a new log line, rotation — batched to the frame, and a state
+        // write only when the whole-pixel height actually changes.
+        const ro = new RO((entries) => {
+            const box = entries[entries.length - 1]?.borderBoxSize?.[0];
+            const next = debugSpacerPx(box ? box.blockSize : bar.getBoundingClientRect().height);
+            setBarHeight((prev) => (prev === next ? prev : next));
+        });
+        ro.observe(bar);
+        return () => ro.disconnect();
+    }, []);
     useEffect(() => {
         if (!captureErrors)
             return;
@@ -73,9 +100,9 @@ export default function DebugPanel({ title = "Debug", defaultOpen = false, captu
         : notices > 0
             ? "bg-[var(--tb-notice-bg)] text-[var(--tb-notice-ink)] border-[var(--tb-notice-line)]"
             : "bg-[var(--tb-surface-2)] text-[var(--tb-ink)] border-[var(--tb-line)]";
-    return (_jsxs("div", { className: "pointer-events-none fixed inset-x-0 bottom-0 z-50 flex flex-col items-end", children: [_jsxs("div", { className: "pointer-events-auto flex flex-wrap justify-end gap-1 pr-3", children: [open && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: copy, className: plainTab, "aria-label": "Copy the whole log", children: copied === "ok" ? "Copied" : copied === "failed" ? "Copy failed" : "Copy" }), _jsx("button", { type: "button", onClick: clearDebug, className: plainTab, children: "Clear" })] })), _jsxs("button", { type: "button", onClick: toggle, "aria-expanded": open, className: `${tab} ${toggleTone}`, children: [open ? "Hide" : title, " (", log.length, failures > 0 ? ` · ${failures} err` : "", notices > 0 ? ` · ${notices} notice` : "", ")"] })] }), open && (_jsxs("div", { className: "pointer-events-auto max-h-[40vh] w-full overflow-y-auto border-t border-[var(--tb-line)] bg-[var(--tb-surface)] p-3 font-mono text-xs text-[var(--tb-ink)]", children: [children && _jsx("div", { className: "mb-2 border-b border-[var(--tb-line)] pb-2 font-sans", children: children }), log.length === 0 && _jsx("div", { className: "text-[var(--tb-muted)]", children: "No MCP activity yet." }), log.map((entry, i) => {
-                        const sev = debugSeverity(entry);
-                        const flag = sev === "ok" ? null : FLAGGED[sev];
-                        return (_jsxs("div", { className: `-mx-1 flex gap-2 rounded px-1 py-0.5 ${flag?.row ?? ""}`, children: [_jsx("span", { className: "shrink-0 text-[var(--tb-muted)]", children: entry.ts }), _jsxs("span", { className: `w-14 shrink-0 ${flag?.ink ?? TYPE_INK[entry.type]}`, children: [sev === "notice" ? "notice" : entry.type, sev === "failure" && entry.type !== "error" ? " !" : ""] }), _jsx("span", { className: `min-w-0 break-all ${flag?.ink ?? ""}`, children: entry.message })] }, log.length - i));
-                    })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", "data-tb-debug-spacer": "", style: { height: debugSpacerHeight(barHeight), flexShrink: 0 } }), _jsxs("div", { ref: barRef, className: "pointer-events-none fixed inset-x-0 bottom-0 z-50 flex flex-col items-end", children: [_jsxs("div", { className: "pointer-events-auto flex flex-wrap justify-end gap-1 pr-3", children: [open && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: copy, className: plainTab, "aria-label": "Copy the whole log", children: copied === "ok" ? "Copied" : copied === "failed" ? "Copy failed" : "Copy" }), _jsx("button", { type: "button", onClick: clearDebug, className: plainTab, children: "Clear" })] })), _jsxs("button", { type: "button", onClick: toggle, "aria-expanded": open, className: `${tab} ${toggleTone}`, children: [open ? "Hide" : title, " (", log.length, failures > 0 ? ` · ${failures} err` : "", notices > 0 ? ` · ${notices} notice` : "", ")"] })] }), open && (_jsxs("div", { className: "pointer-events-auto max-h-[40vh] w-full overflow-y-auto border-t border-[var(--tb-line)] bg-[var(--tb-surface)] p-3 font-mono text-xs text-[var(--tb-ink)]", children: [children && _jsx("div", { className: "mb-2 border-b border-[var(--tb-line)] pb-2 font-sans", children: children }), log.length === 0 && _jsx("div", { className: "text-[var(--tb-muted)]", children: "No MCP activity yet." }), log.map((entry, i) => {
+                                const sev = debugSeverity(entry);
+                                const flag = sev === "ok" ? null : FLAGGED[sev];
+                                return (_jsxs("div", { className: `-mx-1 flex gap-2 rounded px-1 py-0.5 ${flag?.row ?? ""}`, children: [_jsx("span", { className: "shrink-0 text-[var(--tb-muted)]", children: entry.ts }), _jsxs("span", { className: `w-14 shrink-0 ${flag?.ink ?? TYPE_INK[entry.type]}`, children: [sev === "notice" ? "notice" : entry.type, sev === "failure" && entry.type !== "error" ? " !" : ""] }), _jsx("span", { className: `min-w-0 break-all ${flag?.ink ?? ""}`, children: entry.message })] }, log.length - i));
+                            })] }))] })] }));
 }

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/debugSpacer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The room the DebugPanel keeps for itself.
+ *
+ * The panel is fixed to the bottom of the viewport, so on its own it would sit
+ * over whatever the page puts last — on a phone, a loading quote or a Save
+ * button. Beside it the panel renders an in-flow spacer as tall as the panel is
+ * right now (the collapsed tab, or the open log), plus the iOS home-indicator
+ * inset, so the page can always scroll its last line clear of the bar.
+ */
+/** The collapsed tab: one `min-h-10` (2.5rem) button. Used until measured. */
+export declare const DEBUG_BAR_PX = 40;
+/** Whole CSS pixels for a measured height; the collapsed bar when unmeasured. */
+export declare function debugSpacerPx(measured: number | null | undefined): number;
+/** The spacer's CSS height: the panel's height plus the safe-area inset. */
+export declare function debugSpacerHeight(measured: number | null | undefined): string;

package/dist/react/debugSpacer.js

@@ -0,0 +1,21 @@
+/**
+ * The room the DebugPanel keeps for itself.
+ *
+ * The panel is fixed to the bottom of the viewport, so on its own it would sit
+ * over whatever the page puts last — on a phone, a loading quote or a Save
+ * button. Beside it the panel renders an in-flow spacer as tall as the panel is
+ * right now (the collapsed tab, or the open log), plus the iOS home-indicator
+ * inset, so the page can always scroll its last line clear of the bar.
+ */
+/** The collapsed tab: one `min-h-10` (2.5rem) button. Used until measured. */
+export const DEBUG_BAR_PX = 40;
+/** Whole CSS pixels for a measured height; the collapsed bar when unmeasured. */
+export function debugSpacerPx(measured) {
+    if (typeof measured !== "number" || !Number.isFinite(measured) || measured <= 0)
+        return DEBUG_BAR_PX;
+    return Math.ceil(measured);
+}
+/** The spacer's CSS height: the panel's height plus the safe-area inset. */
+export function debugSpacerHeight(measured) {
+    return `calc(${debugSpacerPx(measured)}px + env(safe-area-inset-bottom, 0px))`;
+}

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": "1.0.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",