@tollbooth-dpyc/web 0.5.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";
@@ -115,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/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/package.json

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