@orangecheck/app-design 1.3.0 → 1.4.1

package/dist/components.mjs

@@ -7,8 +7,10 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { ChevronDown, Check, Search, Copy, ArrowUpRight, ArrowRight, ChevronRight, CornerDownLeft, Download, FileText, Upload, ArrowLeft, Lock, CircleDashed, CircleMinus, CircleSlash, Clock, CircleX, CircleCheck } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import 'next-themes';
 import 'sonner';
 import Link from 'next/link';
+import { useRouter } from 'next/compat/router';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -1675,11 +1677,13 @@ function forClipboard(text, lang) {
   if (!lines.some((l) => l.startsWith("$ "))) return text;
   return lines.filter((l) => l.startsWith("$ ")).map((l) => l.slice(2)).join("\n");
 }
-function linesFromDom(pre) {
+function linesFromDom(pre, newline) {
   if (!pre) return null;
   const lines = pre.querySelectorAll("[data-line]");
   if (lines.length === 0) return pre.textContent ?? "";
-  return Array.from(lines).filter((l) => l.getAttribute("data-diff") !== "remove").map((l) => l.textContent ?? "").join("\n");
+  const text = Array.from(lines).filter((l) => l.getAttribute("data-diff") !== "remove").map((l) => l.textContent ?? "").join("\n");
+  return newline ? `${text}
+` : text;
 }
 function prepare(code, lang, marks, diff) {
   const d = diff ? readDiff(code) : null;
@@ -1688,7 +1692,8 @@ function prepare(code, lang, marks, diff) {
   const kept = d ? src.split("\n").filter((_, i) => d.diff.get(i + 1) !== "remove") : null;
   return {
     html: linesToHtml(lines, { highlight: parseLineRanges(marks), diff: d?.diff }),
-    copy: kept ? kept.join("\n") : src,
+    // Byte for byte, the final newline too: a hash printed beside the code must match a copy of it.
+    copy: kept ? kept.join("\n") + (/\n$/.test(code) ? "\n" : "") : code,
     lines: lines.length,
     diff: !!d
   };
@@ -1701,7 +1706,8 @@ function Well({
   lines,
   maxLines,
   diff,
-  lineNumbers
+  lineNumbers,
+  wrap
 }) {
   const foldable = maxLines !== void 0 && lines > maxLines + 2;
   const [open, setOpen] = useState(false);
@@ -1720,7 +1726,8 @@ function Well({
             "data-diff": diff ? "" : void 0,
             "data-line-numbers": lineNumbers ? "" : void 0,
             className: cn(
-              "oca-code w-max min-w-full py-4 font-mono text-[0.875rem] leading-[1.625] text-oca-ink-muted [font-variant-ligatures:none]",
+              "oca-code py-4 font-mono text-[0.875rem] leading-[1.625] text-oca-ink-muted [font-variant-ligatures:none]",
+              wrap ? "whitespace-pre-wrap break-all" : "w-max min-w-full",
               !lined && "px-5"
             ),
             children: lined ? /* @__PURE__ */ jsx("code", { className: "block", "data-lang": lang, dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx("code", { className: "block", "data-lang": lang, children })
@@ -1753,6 +1760,7 @@ function CodeBlock({
   code,
   html,
   children,
+  trailingNewline = false,
   lang,
   caption,
   copy = true,
@@ -1761,6 +1769,7 @@ function CodeBlock({
   highlight: marks,
   diff,
   lineNumbers,
+  wrap,
   actions,
   className
 }) {
@@ -1773,7 +1782,7 @@ function CodeBlock({
   );
   const markup = prepared?.html ?? html;
   const lines = prepared?.lines ?? (html !== void 0 ? html.split("\n").length : code?.split("\n").length ?? 0);
-  const read = () => forClipboard(prepared?.copy ?? linesFromDom(preRef.current) ?? code ?? "", lang);
+  const read = () => forClipboard(prepared?.copy ?? linesFromDom(preRef.current, trailingNewline) ?? code ?? "", lang);
   return /* @__PURE__ */ jsxs("figure", { className: cn(FRAME, className), children: [
     /* @__PURE__ */ jsxs("figcaption", { className: "flex h-11 items-center justify-between gap-3 border-b border-[var(--oca-code-line)] pl-5 pr-2", children: [
       /* @__PURE__ */ jsx("span", { className: "truncate text-[0.8125rem] text-oca-ink-subtle", children: caption ?? languageName(lang) ?? "Code" }),
@@ -1792,6 +1801,7 @@ function CodeBlock({
         maxLines,
         diff: prepared ? prepared.diff : isDiff,
         lineNumbers,
+        wrap,
         children
       }
     )
@@ -2294,6 +2304,133 @@ function MarkOutline({ className }) {
     points
   )) });
 }
+
+// src/family/index.ts
+var OCHK_IO = "https://ochk.io";
+var DOCS_HREF = `${OCHK_IO}/docs`;
+function protocol(slug, verb, line, kinds) {
+  return {
+    slug,
+    label: slug,
+    href: `${OCHK_IO}/${slug}`,
+    group: "protocol",
+    line,
+    status: "live",
+    verb,
+    pageHref: `${OCHK_IO}/${slug}`,
+    toolHref: `https://${slug}.ochk.io`,
+    specHref: `https://github.com/orangecheck/oc-${slug}-protocol`,
+    kinds
+  };
+}
+var PROTOCOLS = [
+  protocol("attest", "identity", "Show that an address holds bitcoin, and for how long.", "30078"),
+  protocol("lock", "confidentiality", "Encrypt to a Bitcoin address, so only its holder can open it.", "30078"),
+  protocol("vote", "legitimacy", "Polls weighed in sats, that anyone can tally.", "30080\u201330082"),
+  protocol("stamp", "provenance", "Prove who signed something, and when.", "30083"),
+  protocol("agent", "authority", "Give software scoped, revocable permission to act for you.", "30083\u201330086"),
+  protocol("pledge", "commitment", "Make a promise with bitcoin behind it, on a public record.", "30078")
+];
+var PROTOCOL_ORDER = PROTOCOLS.map((p) => p.slug);
+var FAMILY = [
+  {
+    slug: "home",
+    label: "ochk.io",
+    href: OCHK_IO,
+    group: "orangecheck",
+    line: "The open protocols, and the company behind them.",
+    status: "live"
+  },
+  {
+    slug: "me",
+    label: "ochk.app",
+    href: "https://ochk.app",
+    group: "orangecheck",
+    line: "One account, with Bitcoin behind it.",
+    status: "testing"
+  },
+  {
+    slug: "docs",
+    label: "docs",
+    href: DOCS_HREF,
+    group: "orangecheck",
+    line: "Specs, SDKs and guides for every protocol.",
+    status: "live"
+  },
+  ...PROTOCOLS,
+  {
+    slug: "vault",
+    label: "vault",
+    href: "https://vault.ochk.io",
+    group: "app",
+    line: "A password manager, encrypted in your browser.",
+    status: "live",
+    protocols: ["lock"]
+  },
+  {
+    slug: "chat",
+    label: "chat",
+    href: "https://chat.ochk.io",
+    group: "app",
+    line: "Messages only the holder of a Bitcoin address can read.",
+    status: "testing",
+    protocols: ["lock"]
+  },
+  {
+    slug: "cosign",
+    label: "cosign",
+    href: "https://cosign.ochk.io",
+    group: "app",
+    line: "Builders find co-founders and backers.",
+    status: "testing",
+    // Signs in with an orangecheck account and a wallet; uses none of the six directly.
+    protocols: []
+  },
+  {
+    slug: "me-demo",
+    // "demo", not the made-up app's own name, so nobody takes it for ours.
+    label: "demo",
+    href: "https://me-demo.ochk.io",
+    group: "app",
+    line: "Lumen Notes, a made-up app that signs in with orangecheck.",
+    status: "live"
+  },
+  {
+    slug: "globe",
+    label: "globe",
+    href: "https://globe.ochk.io",
+    group: "public-good",
+    line: "The Bitcoin network, live, on a globe.",
+    status: "live"
+  },
+  {
+    slug: "btc",
+    label: "btc",
+    href: "https://btc.ochk.io",
+    group: "public-good",
+    line: "A free desk for reading the Bitcoin market.",
+    status: "live"
+  }
+];
+var BY_SLUG = new Map(FAMILY.map((s) => [s.slug, s]));
+function protocolSite(slug) {
+  return BY_SLUG.get(slug);
+}
+[
+  {
+    href: `${OCHK_IO}/protocols`,
+    label: "Protocols",
+    children: PROTOCOLS.map((p) => ({ href: p.pageHref, label: p.label, description: p.line }))
+  },
+  { href: `${OCHK_IO}/apps`, label: "Apps" },
+  { href: DOCS_HREF, label: "Docs" },
+  { href: `${OCHK_IO}/trust`, label: "Trust" },
+  { href: `${OCHK_IO}/about`, label: "About" }
+];
+var SiteHomeContext = sharedContext("site-home", void 0);
+function useSiteHome() {
+  return useContext(SiteHomeContext);
+}
 var WORDS = {
   404: {
     name: "Not found",
@@ -2311,10 +2448,13 @@ function ErrorPage({
   title,
   detail,
   actions,
-  home = "/",
+  home,
+  protocol: protocol2,
   art,
   className
 }) {
+  const shellHome = useSiteHome();
+  const homeHref = home ?? (protocol2 ? protocolSite(protocol2).pageHref : shellHome ?? OCHK_IO);
   const words = WORDS[code] ?? (code >= 500 ? WORDS[500] : WORDS[404]);
   const server = code >= 500;
   return /* @__PURE__ */ jsx(Section, { space: "none", className: cn("flex min-h-[min(40rem,72dvh)] items-center py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-12", children: [
@@ -2328,7 +2468,7 @@ function ErrorPage({
       /* @__PURE__ */ jsx("p", { className: "oca-lead oca-enter [--enter-delay:150ms]", children: detail ?? words.detail }),
       /* @__PURE__ */ jsx("div", { className: "oca-enter flex flex-wrap gap-3 [--enter-delay:230ms]", children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         server ? /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), children: "Try again" }) : null,
-        /* @__PURE__ */ jsx(Button, { asChild: true, variant: server ? "secondary" : "primary", children: /* @__PURE__ */ jsx(Link, { href: home, children: "Go home" }) })
+        /* @__PURE__ */ jsx(Button, { asChild: true, variant: server ? "secondary" : "primary", children: /* @__PURE__ */ jsx(Link, { href: homeHref, children: "Go home" }) })
       ] }) })
     ] }),
     art !== null ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "oca-enter hidden justify-center md:col-span-5 md:flex [--enter-delay:120ms]", children: art ?? /* @__PURE__ */ jsx(MarkOutline, { className: "w-full max-w-[20rem] text-oca-hairline-strong" }) }) : null
@@ -2552,12 +2692,21 @@ function Faq({
   return /* @__PURE__ */ jsx(Accordion, { single: true, className, children: items.map((it, i) => /* @__PURE__ */ jsx(AccordionItem, { id: it.id, title: it.q, children: it.a }, it.id ?? i)) });
 }
 var LINK = "text-foreground underline decoration-foreground/35 underline-offset-4 transition-colors hover:decoration-foreground";
+var SCHEME = /^[a-z][a-z\d+.-]*:/i;
+function useResolved(href) {
+  const router = useRouter();
+  if (!router || !href || href.startsWith("/") || href.startsWith("#") || href.startsWith("?") || SCHEME.test(href)) return href;
+  const here = router.asPath.split(/[?#]/)[0] || "/";
+  const url = new URL(href, `https://page.invalid${here}`);
+  return url.pathname + url.search + url.hash;
+}
 function TextLink({
-  href,
+  href: written,
   children,
   external,
   className
 }) {
+  const href = useResolved(written);
   const internal = href.startsWith("/") && !href.startsWith("/api/") && !href.startsWith("/.well-known/");
   const offsite = external ?? /^https?:\/\//.test(href);
   if (internal && !offsite) {
@@ -2670,129 +2819,10 @@ function LegalDocument({ doc, className }) {
     }
   );
 }
-
-// src/family/index.ts
-var OCHK_IO = "https://ochk.io";
-var DOCS_HREF = `${OCHK_IO}/docs`;
-function protocol(slug, verb, line, kinds) {
-  return {
-    slug,
-    label: slug,
-    href: `${OCHK_IO}/${slug}`,
-    group: "protocol",
-    line,
-    status: "live",
-    verb,
-    pageHref: `${OCHK_IO}/${slug}`,
-    toolHref: `https://${slug}.ochk.io`,
-    specHref: `https://github.com/orangecheck/oc-${slug}-protocol`,
-    kinds
-  };
-}
-var PROTOCOLS = [
-  protocol("attest", "identity", "Show that an address holds bitcoin, and for how long.", "30078"),
-  protocol("lock", "confidentiality", "Encrypt to a Bitcoin address, so only its holder can open it.", "30078"),
-  protocol("vote", "legitimacy", "Polls weighed in sats, that anyone can tally.", "30080\u201330082"),
-  protocol("stamp", "provenance", "Prove who signed something, and when.", "30083"),
-  protocol("agent", "authority", "Give software scoped, revocable permission to act for you.", "30083\u201330086"),
-  protocol("pledge", "commitment", "Make a promise with bitcoin behind it, on a public record.", "30078")
-];
-var PROTOCOL_ORDER = PROTOCOLS.map((p) => p.slug);
-var FAMILY = [
-  {
-    slug: "home",
-    label: "ochk.io",
-    href: OCHK_IO,
-    group: "orangecheck",
-    line: "The open protocols, and the company behind them.",
-    status: "live"
-  },
-  {
-    slug: "me",
-    label: "ochk.app",
-    href: "https://ochk.app",
-    group: "orangecheck",
-    line: "One account, with Bitcoin behind it.",
-    status: "testing"
-  },
-  {
-    slug: "docs",
-    label: "docs",
-    href: DOCS_HREF,
-    group: "orangecheck",
-    line: "Specs, SDKs and guides for every protocol.",
-    status: "live"
-  },
-  ...PROTOCOLS,
-  {
-    slug: "vault",
-    label: "vault",
-    href: "https://vault.ochk.io",
-    group: "app",
-    line: "A password manager, encrypted in your browser.",
-    status: "live",
-    protocols: ["lock"]
-  },
-  {
-    slug: "chat",
-    label: "chat",
-    href: "https://chat.ochk.io",
-    group: "app",
-    line: "Messages only the holder of a Bitcoin address can read.",
-    status: "testing",
-    protocols: ["lock"]
-  },
-  {
-    slug: "cosign",
-    label: "cosign",
-    href: "https://cosign.ochk.io",
-    group: "app",
-    line: "Builders find co-founders and backers.",
-    status: "testing",
-    // Signs in with an orangecheck account and a wallet; uses none of the six directly.
-    protocols: []
-  },
-  {
-    slug: "me-demo",
-    // "demo", not the made-up app's own name, so nobody takes it for ours.
-    label: "demo",
-    href: "https://me-demo.ochk.io",
-    group: "app",
-    line: "Lumen Notes, a made-up app that signs in with orangecheck.",
-    status: "live"
-  },
-  {
-    slug: "globe",
-    label: "globe",
-    href: "https://globe.ochk.io",
-    group: "public-good",
-    line: "The Bitcoin network, live, on a globe.",
-    status: "live"
-  },
-  {
-    slug: "btc",
-    label: "btc",
-    href: "https://btc.ochk.io",
-    group: "public-good",
-    line: "A free desk for reading the Bitcoin market.",
-    status: "live"
-  }
-];
-var BY_SLUG = new Map(FAMILY.map((s) => [s.slug, s]));
-function protocolSite(slug) {
-  return BY_SLUG.get(slug);
+var InDocsContext = sharedContext("in-docs", false);
+function useInDocs() {
+  return useContext(InDocsContext);
 }
-[
-  {
-    href: `${OCHK_IO}/protocols`,
-    label: "Protocols",
-    children: PROTOCOLS.map((p) => ({ href: p.pageHref, label: p.label, description: p.line }))
-  },
-  { href: `${OCHK_IO}/apps`, label: "Apps" },
-  { href: DOCS_HREF, label: "Docs" },
-  { href: `${OCHK_IO}/trust`, label: "Trust" },
-  { href: `${OCHK_IO}/about`, label: "About" }
-];
 var WORD = {
   live: "Live",
   testing: "In testing",
@@ -2822,6 +2852,7 @@ function ProtocolGrid({
   link = "page",
   className
 }) {
+  const inDocs = useInDocs();
   return /* @__PURE__ */ jsx("ul", { className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 md:gap-5", className), children: protocols.map((slug) => {
     const p = protocolSite(slug);
     const i = PROTOCOL_ORDER.indexOf(slug);
@@ -2834,7 +2865,7 @@ function ProtocolGrid({
         ] }),
         p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status }) : null
       ] }),
-      /* @__PURE__ */ jsx("h3", { className: "oca-display-3", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("h3", { className: "oca-display-3", children: link === "docs" && inDocs ? /* @__PURE__ */ jsx(Link, { href: `/${p.slug}`, className: STRETCH, children: p.label }) : /* @__PURE__ */ jsx(
         "a",
         {
           href: link === "tool" ? p.toolHref : link === "docs" ? `${DOCS_HREF}/${p.slug}` : p.pageHref,
@@ -3082,371 +3113,6 @@ forwardRef(function RadioGroupItem2({ className, ...props }, ref) {
     }
   );
 });
-function ProtocolHero({
-  protocol: protocol2,
-  title,
-  lead,
-  actions,
-  art,
-  children,
-  className
-}) {
-  const p = protocolSite(protocol2);
-  return /* @__PURE__ */ jsx(
-    PageHero,
-    {
-      className,
-      eyebrow: `Protocol \xB7 ${p.verb}`,
-      title,
-      lead,
-      actions,
-      art,
-      children: p.status !== "live" || children ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4", children: [
-        p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status }) : null,
-        children
-      ] }) : null
-    }
-  );
-}
-function ProtocolNav({
-  current,
-  link = "page",
-  className
-}) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Protocols", className, children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--background)", children: /* @__PURE__ */ jsx("ul", { className: "flex w-max min-w-full items-center gap-6 border-b border-border", children: PROTOCOLS.map((p) => {
-    const on = p.slug === current;
-    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: link === "tool" ? p.toolHref : p.pageHref,
-        "aria-current": on ? "page" : void 0,
-        className: cn(
-          "-mb-px inline-flex h-11 items-center border-b-2 text-[0.9375rem] transition-colors",
-          on ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
-        ),
-        children: p.label
-      }
-    ) }, p.slug);
-  }) }) }) });
-}
-function SpecCard({
-  protocol: protocol2,
-  version,
-  license,
-  vectors,
-  size = "md",
-  className
-}) {
-  const p = protocolSite(protocol2);
-  const repo = `oc-${p.slug}-protocol`;
-  const facts = [
-    ["Version", version],
-    ...license ? [["Licence", license]] : [],
-    ["Nostr kind", p.kinds],
-    ...vectors !== void 0 ? [["Test vectors", String(vectors)]] : []
-  ];
-  if (size === "sm") {
-    return /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: p.specHref,
-        className: cn(
-          "group flex flex-wrap items-center gap-x-4 gap-y-1 rounded-2xl border border-border bg-card px-4 py-3 text-[0.875rem] transition-colors hover:border-oca-hairline-strong",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "font-mono text-[0.8125rem] text-foreground", children: repo }),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: facts.map(([k, v]) => k === "Version" ? `v${v}` : k === "Nostr kind" ? `kind ${v}` : v).join(" \xB7 ") }),
-          /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1 text-muted-foreground group-hover:text-foreground", children: [
-            "Read the spec ",
-            /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true, className: "size-4" })
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 rounded-[1.25rem] border border-border bg-card p-6 md:p-8", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: "The spec" }),
-        /* @__PURE__ */ jsx("h3", { className: "oca-title break-all font-mono text-[1.0625rem] tracking-normal", children: repo })
-      ] }),
-      p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status }) : null
-    ] }),
-    /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4", children: facts.map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx("dt", { className: "text-[0.8125rem] text-muted-foreground", children: k }),
-      /* @__PURE__ */ jsx("dd", { className: "oca-tabular text-[1.0625rem]", children: v })
-    ] }, k)) }),
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: /* @__PURE__ */ jsxs("a", { href: p.specHref, children: [
-      "Read the spec ",
-      /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true })
-    ] }) }) })
-  ] });
-}
-function VerifyBox({
-  action,
-  param = "q",
-  title,
-  description,
-  label = "Id, envelope or link",
-  placeholder,
-  hint,
-  submitLabel = "Verify",
-  multiline = false,
-  onVerify,
-  className
-}) {
-  const [value, setValue] = useState("");
-  const submit = (e) => {
-    if (!onVerify) return;
-    e.preventDefault();
-    if (value.trim()) onVerify(value.trim());
-  };
-  const button = /* @__PURE__ */ jsx(Button, { type: "submit", className: multiline ? void 0 : "w-full sm:w-auto", children: submitLabel });
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      action,
-      method: "get",
-      onSubmit: submit,
-      className: cn("flex flex-col gap-5 rounded-[1.25rem] border border-border bg-card p-6 md:p-8", className),
-      children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          title ? /* @__PURE__ */ jsx("h3", { className: "oca-title", children: title }) : null,
-          description ? /* @__PURE__ */ jsx("p", { className: "oca-body text-[0.9375rem]", children: description }) : null
-        ] }) : null,
-        multiline ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Field, { label, hint, children: /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              name: param,
-              required: true,
-              value,
-              onChange: (e) => setValue(e.target.value),
-              placeholder,
-              spellCheck: false,
-              className: "min-h-32 font-mono text-base md:text-[0.8125rem]"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { children: button })
-        ] }) : /* @__PURE__ */ jsx(Field, { label, hint, action: button, children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            name: param,
-            required: true,
-            value,
-            onChange: (e) => setValue(e.target.value),
-            placeholder,
-            spellCheck: false,
-            autoComplete: "off",
-            className: "font-mono text-base md:text-[0.875rem]"
-          }
-        ) })
-      ]
-    }
-  );
-}
-var TINT = "bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))]";
-function ComparisonTable({
-  columns,
-  rows,
-  label,
-  propertyHeading = "Property",
-  className
-}) {
-  const wide = columns.length > 3;
-  const grid = wide ? "lg:grid lg:grid-cols-[var(--oca-compare)]" : "md:grid md:grid-cols-[var(--oca-compare)]";
-  const desk = wide ? "lg" : "md";
-  const style = {
-    // The argued-for column gets a little more room: its answers carry the page.
-    "--oca-compare": ["minmax(0, 1.4fr)", ...columns.map((c) => c.highlight ? "minmax(0, 1.3fr)" : "minmax(0, 1fr)")].join(" ")
-  };
-  const ordered = [...columns].sort((a, b) => Number(Boolean(b.highlight)) - Number(Boolean(a.highlight)));
-  return /* @__PURE__ */ jsxs("ul", { "aria-label": label, style, className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: [
-    /* @__PURE__ */ jsxs(
-      "li",
-      {
-        "aria-hidden": true,
-        className: cn(
-          "hidden gap-5 px-5 py-4 text-[0.875rem] font-medium text-muted-foreground",
-          wide ? "lg:grid lg:px-8" : "md:grid md:px-8",
-          grid
-        ),
-        children: [
-          /* @__PURE__ */ jsx("span", { children: propertyHeading }),
-          columns.map((c) => /* @__PURE__ */ jsx("span", { className: cn(c.highlight && cn(TINT, "-my-4 px-4 py-4 text-oca-accent-ink")), children: c.label }, c.key))
-        ]
-      }
-    ),
-    rows.map((r, ri) => /* @__PURE__ */ jsxs("li", { className: cn("grid grid-cols-1 gap-3 px-5 py-5", wide ? "lg:items-start lg:gap-5 lg:px-8" : "md:items-start md:gap-5 md:px-8", grid), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "oca-title-sm", children: r.label }),
-        r.note ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: r.note }) : null
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-1", desk === "lg" ? "lg:contents" : "md:contents"), children: columns.map((c) => {
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: { "--oca-order": ordered.indexOf(c) },
-            className: cn(
-              // Two rows of the pair's grid (name, answer), so answers line up
-              // across a pair even when one name wraps.
-              "order-[var(--oca-order)] row-span-2 grid min-w-0 grid-rows-subgrid gap-1 rounded-xl px-3 py-2.5",
-              desk === "lg" ? "lg:order-none lg:row-span-1 lg:flex lg:flex-col" : "md:order-none md:row-span-1 md:flex md:flex-col",
-              c.highlight ? cn(
-                TINT,
-                "col-span-2",
-                desk === "lg" ? "lg:col-span-1 lg:-my-5 lg:self-stretch lg:rounded-none lg:px-4 lg:py-5" : "md:col-span-1 md:-my-5 md:self-stretch md:rounded-none md:px-4 md:py-5"
-              ) : desk === "lg" ? "lg:p-0" : "md:p-0"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "text-[0.8125rem]",
-                    c.highlight ? "text-oca-accent-ink" : "text-muted-foreground",
-                    desk === "lg" ? "lg:sr-only" : "md:sr-only"
-                  ),
-                  children: c.label
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", c.highlight && "font-medium"), children: r.values[c.key] ?? "\u2014" })
-            ]
-          },
-          c.key
-        );
-      }) })
-    ] }, ri))
-  ] });
-}
-var CHECK = {
-  ok: { word: "Passed", icon: /* @__PURE__ */ jsx(CircleCheck, {}), tone: "text-success" },
-  fail: { word: "Failed", icon: /* @__PURE__ */ jsx(CircleX, {}), tone: "text-destructive" },
-  pending: { word: "Pending", icon: /* @__PURE__ */ jsx(Clock, {}), tone: "text-oca-accent-ink" },
-  none: { word: "None", icon: /* @__PURE__ */ jsx(CircleSlash, {}), tone: "text-muted-foreground" },
-  skipped: { word: "Skipped", icon: /* @__PURE__ */ jsx(CircleMinus, {}), tone: "text-muted-foreground" },
-  unchecked: { word: "Not checked", icon: /* @__PURE__ */ jsx(CircleDashed, {}), tone: "text-oca-subtle" }
-};
-function VerifyReport({
-  verdict,
-  title,
-  summary,
-  checks,
-  facts,
-  notChecked,
-  actions,
-  as: Heading = "h2",
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      "aria-label": "Verification result",
-      className: cn("overflow-hidden rounded-[1.25rem] border border-border bg-card", className),
-      children: [
-        /* @__PURE__ */ jsxs("header", { className: "flex flex-col items-start gap-3 p-6 md:p-8", children: [
-          /* @__PURE__ */ jsx(StatusBadge, { status: verdict }),
-          /* @__PURE__ */ jsx(Heading, { className: "oca-display-3 [overflow-wrap:anywhere]", children: title }),
-          summary ? /* @__PURE__ */ jsx("p", { className: "oca-body max-w-[40rem] [overflow-wrap:anywhere]", children: summary }) : null
-        ] }),
-        /* @__PURE__ */ jsx("ul", { "aria-label": "Checks", className: "divide-y divide-border border-t border-border", children: checks.map((c, i) => {
-          const k = CHECK[c.state];
-          return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3 px-6 py-3.5 md:px-8", children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("mt-0.5 shrink-0 [&_svg]:size-[1.125rem]", k.tone), children: k.icon }),
-            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-baseline sm:justify-between sm:gap-6", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem]", children: c.label }),
-                c.note ? /* @__PURE__ */ jsx("span", { className: "break-words text-[0.8125rem] leading-snug text-muted-foreground", children: c.note }) : null
-              ] }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "shrink-0 text-[0.8125rem]",
-                    c.state === "fail" ? "text-destructive" : "text-muted-foreground"
-                  ),
-                  children: k.word
-                }
-              )
-            ] })
-          ] }, i);
-        }) }),
-        facts && facts.length > 0 ? /* @__PURE__ */ jsx(KeyValueList, { items: facts, className: "rounded-none border-x-0 border-b-0 bg-transparent [&>div]:px-6 md:[&>div]:px-8" }) : null,
-        notChecked && notChecked.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-border bg-muted/50 px-6 py-5 md:px-8", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] font-medium", children: "What this did not check" }),
-          /* @__PURE__ */ jsx("ul", { className: "flex list-disc flex-col gap-1 pl-5 text-[0.875rem] leading-relaxed text-muted-foreground", children: notChecked.map((n, i) => /* @__PURE__ */ jsx("li", { children: n }, i)) })
-        ] }) : null,
-        actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 border-t border-border px-6 py-5 md:px-8", children: actions }) : null
-      ]
-    }
-  );
-}
-function SignMessage({
-  lead,
-  address,
-  message,
-  wallets,
-  busy = false,
-  error,
-  submitLabel = "Confirm",
-  secondary,
-  onSignature,
-  className
-}) {
-  const [pasted, setPasted] = useState("");
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
-    lead ? /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] leading-relaxed", children: lead }) : null,
-    wallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: wallets }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[0.8125rem] text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
-        "or sign it in any wallet",
-        /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
-      ] })
-    ] }) : null,
-    /* @__PURE__ */ jsx(CodeBlock, { code: message, caption: "Message to sign" }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        className: "flex flex-col gap-4",
-        onSubmit: (e) => {
-          e.preventDefault();
-          if (pasted.trim()) onSignature(pasted.trim());
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            Field,
-            {
-              label: "Signature",
-              error,
-              hint: /* @__PURE__ */ jsxs(Fragment, { children: [
-                "From your wallet\u2019s \u201Csign message\u201D (BIP-322), signed by",
-                " ",
-                /* @__PURE__ */ jsx("span", { className: "break-all font-mono", children: address }),
-                "."
-              ] }),
-              children: /* @__PURE__ */ jsx(
-                Textarea,
-                {
-                  value: pasted,
-                  onChange: (e) => setPasted(e.target.value),
-                  rows: 3,
-                  spellCheck: false,
-                  className: "min-h-24 font-mono text-base md:text-[0.8125rem]"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { type: "submit", loading: busy, disabled: !pasted.trim(), children: submitLabel }),
-            secondary
-          ] })
-        ]
-      }
-    )
-  ] });
-}
 var isInternal = (href) => href.startsWith("/") || href.startsWith("#");
 function DocLink({ href, className, children, ...rest }) {
   return isInternal(href) ? /* @__PURE__ */ jsx(Link, { href, className, ...rest, children }) : /* @__PURE__ */ jsx("a", { href, className, ...rest, children });
@@ -3635,6 +3301,7 @@ function MdxTable({ className, ...props }) {
     }
   ) }) });
 }
+var said = (n) => n !== void 0 && n !== null && n !== false && n !== "";
 function ApiTable({
   rows,
   caption,
@@ -3642,43 +3309,42 @@ function ApiTable({
   className
 }) {
   const hasDefault = rows.some((r) => r.default !== void 0);
-  const marks = (r) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    r.required ? /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] text-oca-accent-ink", children: "Required" }) : null,
-    r.deprecated ? /* @__PURE__ */ jsx(Badge, { tone: "muted", children: "Deprecated" }) : null,
-    r.status ? /* @__PURE__ */ jsx(StatusBadge, { status: r.status }) : null
-  ] });
-  return /* @__PURE__ */ jsxs("div", { className: cn("not-prose my-6", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl border border-border bg-card max-sm:hidden", children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.875rem]", children: [
-      caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-oca-hairline-strong bg-oca-table-head text-[0.8125rem]", children: [
-        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: nameHeader }),
-        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Type" }),
-        hasDefault ? /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Default" }) : null,
-        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Description" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: rows.map((r) => /* @__PURE__ */ jsxs("tr", { className: "align-top", children: [
-        /* @__PURE__ */ jsx("th", { scope: "row", className: "px-4 py-3 text-left font-normal", children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start gap-1", children: [
-          /* @__PURE__ */ jsx("code", { className: cn("font-mono text-[0.8125rem] text-foreground", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
-          marks(r)
-        ] }) }),
-        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-[0.8125rem] text-muted-foreground", children: r.type ?? "\u2014" }),
-        hasDefault ? /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-[0.8125rem] text-muted-foreground", children: r.default ?? "\u2014" }) : null,
-        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 leading-relaxed text-muted-foreground", children: r.description })
-      ] }, r.name)) })
-    ] }) }) }),
-    /* @__PURE__ */ jsx("ul", { "aria-label": caption, className: "divide-y divide-border rounded-2xl border border-border bg-card sm:hidden", children: rows.map((r) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-1.5 px-4 py-3.5", children: [
-      /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
-        /* @__PURE__ */ jsx("code", { className: cn("font-mono text-[0.875rem] text-foreground", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
-        r.type ? /* @__PURE__ */ jsx("code", { className: "break-all font-mono text-[0.8125rem] text-muted-foreground", children: r.type }) : null
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-2 empty:hidden", children: marks(r) }),
-      r.description ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-relaxed text-muted-foreground", children: r.description }) : null,
-      r.default !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[0.8125rem] text-muted-foreground", children: [
-        "Default ",
-        /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: r.default })
-      ] }) : null
-    ] }, r.name)) })
-  ] });
+  const hasDescription = rows.some((r) => said(r.description));
+  const hasSource = rows.some((r) => said(r.source));
+  const cell = "px-4 py-3 max-sm:p-0";
+  return /* @__PURE__ */ jsx("div", { className: cn("not-prose my-6 overflow-hidden rounded-2xl border border-border bg-card", className), children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.875rem] max-sm:block", children: [
+    caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx("thead", { className: "max-sm:sr-only", children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-oca-hairline-strong bg-oca-table-head text-[0.8125rem]", children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: nameHeader }),
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Type" }),
+      hasDefault ? /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Default" }) : null,
+      hasDescription ? /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Description" }) : null,
+      hasSource ? /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Defined in" }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border max-sm:block", children: rows.map((r) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        id: r.id,
+        className: "scroll-mt-28 align-top target:bg-muted max-sm:flex max-sm:flex-col max-sm:gap-1.5 max-sm:px-4 max-sm:py-3.5",
+        children: [
+          /* @__PURE__ */ jsx("th", { scope: "row", className: cn(cell, "text-left font-normal"), children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start gap-1 max-sm:flex-row max-sm:flex-wrap max-sm:items-baseline max-sm:gap-x-2", children: [
+            /* @__PURE__ */ jsx("code", { className: cn("font-mono text-[0.8125rem] text-foreground max-sm:text-[0.875rem]", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
+            r.required ? /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] text-oca-accent-ink", children: "Required" }) : null,
+            r.deprecated ? /* @__PURE__ */ jsx(Badge, { tone: "muted", children: "Deprecated" }) : null,
+            r.status ? /* @__PURE__ */ jsx(StatusBadge, { status: r.status }) : null
+          ] }) }),
+          /* @__PURE__ */ jsx("td", { className: cn(cell, "font-mono text-[0.8125rem] text-muted-foreground max-sm:break-all", !said(r.type) && "max-sm:hidden"), children: r.type ?? "\u2014" }),
+          hasDefault ? /* @__PURE__ */ jsxs("td", { className: cn(cell, "font-mono text-[0.8125rem] text-muted-foreground max-sm:order-last", r.default === void 0 && "max-sm:hidden"), children: [
+            /* @__PURE__ */ jsx("span", { className: "font-sans sm:hidden", children: "Default " }),
+            r.default ?? "\u2014"
+          ] }) : null,
+          hasDescription ? /* @__PURE__ */ jsx("td", { className: cn(cell, "leading-relaxed text-muted-foreground", !said(r.description) && "max-sm:hidden"), children: r.description }) : null,
+          hasSource ? /* @__PURE__ */ jsx("td", { className: cn(cell, "text-[0.8125rem] text-muted-foreground max-sm:order-last max-sm:break-all", !said(r.source) && "max-sm:hidden"), children: r.source }) : null
+        ]
+      },
+      r.id ?? r.name
+    )) })
+  ] }) }) });
 }
 function useDarkMode() {
   const [dark, setDark] = useState(false);
@@ -3740,79 +3406,490 @@ function mermaidTheme(el) {
     sequenceNumberColor: card
   };
 }
+var FIT = 4 / 3;
 function naturalSize(svg) {
   const w = svg.match(/viewBox="[\d.-]+ [\d.-]+ ([\d.]+) [\d.]+"/)?.[1];
-  if (!w) return svg;
-  return svg.replace(/<svg([^>]*?)\swidth="100%"/, `<svg$1 width="${Math.ceil(Number(w))}"`).replace(/max-width:\s*[\d.]+px;?/, "");
+  if (!w) return { svg, width: null };
+  const width = Math.ceil(Number(w));
+  return {
+    svg: svg.replace(/<svg([^>]*?)\swidth="100%"/, `<svg$1 width="${width}"`).replace(/max-width:\s*[\d.]+px;?/, ""),
+    width
+  };
+}
+function useInnerWidth(ref, padding) {
+  const [width, setWidth] = useState(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setWidth(el.clientWidth - padding));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref, padding]);
+  return width;
+}
+function Diagram({ chart, caption, load, className }) {
+  const ref = useRef(null);
+  const dark = useDarkMode();
+  const raw = useId();
+  const [drawn, setDrawn] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const room = useInnerWidth(ref, 48);
+  const fits = drawn?.width != null && room != null && drawn.width <= room * FIT;
+  useEffect(() => {
+    let live = true;
+    const el = ref.current;
+    if (!el) return;
+    (async () => {
+      try {
+        const mod = await load();
+        const mermaid = "default" in mod ? mod.default : mod;
+        mermaid.initialize({ startOnLoad: false, securityLevel: "strict", theme: "base", themeVariables: mermaidTheme(el) });
+        const { svg } = await mermaid.render(`oca-diagram-${raw.replace(/[^a-zA-Z0-9]/g, "")}-${dark ? "d" : "l"}`, chart);
+        if (live) {
+          setDrawn(naturalSize(svg));
+          setFailed(false);
+        }
+      } catch {
+        if (live) setFailed(true);
+      }
+    })();
+    return () => {
+      live = false;
+    };
+  }, [chart, dark, load, raw]);
+  if (failed) return /* @__PURE__ */ jsx(CodeBlock, { code: chart, caption: "Diagram (shown as its source)", className: cn("my-6", className) });
+  return /* @__PURE__ */ jsxs("figure", { ref, className: cn("not-prose my-6 overflow-hidden rounded-[1.25rem] border border-border bg-card", className), children: [
+    drawn ? /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-fit": fits ? "" : void 0,
+        className: cn(
+          "flex justify-center p-6 [&_svg]:h-auto",
+          fits ? "w-full [&_svg]:max-w-full" : "w-max min-w-full [&_svg]:max-w-none"
+        ),
+        role: "img",
+        "aria-label": typeof caption === "string" ? caption : "Diagram",
+        dangerouslySetInnerHTML: { __html: drawn.svg }
+      }
+    ) }) : /* @__PURE__ */ jsx("div", { role: "status", "aria-label": "Drawing the diagram", className: "p-6", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full rounded-xl" }) }),
+    caption ? /* @__PURE__ */ jsx("figcaption", { className: "border-t border-border px-5 py-3 text-[0.8125rem] text-muted-foreground", children: caption }) : null
+  ] });
+}
+var HEADING = {
+  h1: "oca-display-3 mb-4 text-foreground",
+  h2: "mb-3 mt-12 text-[1.375rem] font-medium leading-tight tracking-[-0.015em] text-foreground md:text-[1.5rem]",
+  h3: "mb-2 mt-9 text-[1.125rem] font-medium leading-snug tracking-[-0.01em] text-foreground",
+  h4: "mb-2 mt-7 text-[1rem] font-medium leading-snug text-foreground"
+};
+function DocsHeading({
+  as: Tag,
+  id,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Tag, { id, className: cn("group scroll-mt-28", HEADING[Tag], className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { "data-heading-text": "", children }),
+    id && Tag !== "h1" ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: `#${id}`,
+        className: "ml-2 inline-block rounded-md px-1 align-baseline text-[0.85em] font-normal text-oca-subtle no-underline opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100",
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "#" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Link to this section" })
+        ]
+      }
+    ) : null
+  ] });
+}
+function ProtocolHero({
+  protocol: protocol2,
+  title,
+  lead,
+  actions,
+  art,
+  children,
+  className
+}) {
+  const p = protocolSite(protocol2);
+  return /* @__PURE__ */ jsx(
+    PageHero,
+    {
+      className,
+      eyebrow: `Protocol \xB7 ${p.verb}`,
+      title,
+      lead,
+      actions,
+      art,
+      children: p.status !== "live" || children ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4", children: [
+        p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status }) : null,
+        children
+      ] }) : null
+    }
+  );
+}
+function ProtocolNav({
+  current,
+  link = "page",
+  className
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Protocols", className, children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--background)", children: /* @__PURE__ */ jsx("ul", { className: "flex w-max min-w-full items-center gap-6 border-b border-border", children: PROTOCOLS.map((p) => {
+    const on = p.slug === current;
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: link === "tool" ? p.toolHref : p.pageHref,
+        "aria-current": on ? "page" : void 0,
+        className: cn(
+          "-mb-px inline-flex h-11 items-center border-b-2 text-[0.9375rem] transition-colors",
+          on ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+        ),
+        children: p.label
+      }
+    ) }, p.slug);
+  }) }) }) });
+}
+var SPEC_FILE = {
+  spec: {
+    file: "SPEC.md",
+    title: "Normative source",
+    note: "This page is a human-readable summary. The authoritative copy lives in the spec repo. If the two ever drift, the repo wins."
+  },
+  security: {
+    file: "SECURITY.md",
+    title: "Normative threat model",
+    note: "This page is the short form. The authoritative, numbered threat model lives in the spec repo."
+  },
+  rationale: {
+    file: "WHY.md",
+    title: "Design rationale",
+    note: "This page is the short version. The full rationale and the rejected-design log live in the spec repo."
+  }
+};
+function SpecCard(props) {
+  return props.repo !== void 0 ? /* @__PURE__ */ jsx(SpecFileNote, { ...props }) : /* @__PURE__ */ jsx(ProtocolSpecCard, { ...props });
+}
+function SpecFileNote({ repo, file, kind = "spec", version, note, className }) {
+  const d = SPEC_FILE[kind];
+  const f = file ?? d.file;
+  return /* @__PURE__ */ jsxs(Callout, { title: version ? `${d.title} \xB7 ${version}` : d.title, className, children: [
+    /* @__PURE__ */ jsx("p", { children: note ?? d.note }),
+    /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(TextLink, { href: `https://github.com/orangecheck/${repo}/blob/main/${f}`, className: "break-all font-mono text-[0.875rem]", children: `${repo}/${f}` }) })
+  ] });
+}
+function ProtocolSpecCard({ protocol: protocol2, version, license, vectors, size = "md", className }) {
+  const p = protocolSite(protocol2);
+  const repo = `oc-${p.slug}-protocol`;
+  const facts = [
+    ["Version", version],
+    ...license ? [["Licence", license]] : [],
+    ["Nostr kind", p.kinds],
+    ...vectors !== void 0 ? [["Test vectors", String(vectors)]] : []
+  ];
+  if (size === "sm") {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: p.specHref,
+        className: cn(
+          "group flex flex-wrap items-center gap-x-4 gap-y-1 rounded-2xl border border-border bg-card px-4 py-3 text-[0.875rem] transition-colors hover:border-oca-hairline-strong",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[0.8125rem] text-foreground", children: repo }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: facts.map(([k, v]) => k === "Version" ? `v${v}` : k === "Nostr kind" ? `kind ${v}` : v).join(" \xB7 ") }),
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1 text-muted-foreground group-hover:text-foreground", children: [
+            "Read the spec ",
+            /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true, className: "size-4" })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 rounded-[1.25rem] border border-border bg-card p-6 md:p-8", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: "The spec" }),
+        /* @__PURE__ */ jsx("h3", { className: "oca-title break-all font-mono text-[1.0625rem] tracking-normal", children: repo })
+      ] }),
+      p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status }) : null
+    ] }),
+    /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4", children: facts.map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-[0.8125rem] text-muted-foreground", children: k }),
+      /* @__PURE__ */ jsx("dd", { className: "oca-tabular text-[1.0625rem]", children: v })
+    ] }, k)) }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: /* @__PURE__ */ jsxs("a", { href: p.specHref, children: [
+      "Read the spec ",
+      /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true })
+    ] }) }) })
+  ] });
+}
+function VerifyBox({
+  action,
+  param = "q",
+  title,
+  description,
+  label = "Id, envelope or link",
+  placeholder,
+  hint,
+  submitLabel = "Verify",
+  multiline = false,
+  onVerify,
+  className
+}) {
+  const [value, setValue] = useState("");
+  const submit = (e) => {
+    if (!onVerify) return;
+    e.preventDefault();
+    if (value.trim()) onVerify(value.trim());
+  };
+  const button = /* @__PURE__ */ jsx(Button, { type: "submit", className: multiline ? void 0 : "w-full sm:w-auto", children: submitLabel });
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      action,
+      method: "get",
+      onSubmit: submit,
+      className: cn("flex flex-col gap-5 rounded-[1.25rem] border border-border bg-card p-6 md:p-8", className),
+      children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: "oca-title", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "oca-body text-[0.9375rem]", children: description }) : null
+        ] }) : null,
+        multiline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Field, { label, hint, children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              name: param,
+              required: true,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              placeholder,
+              spellCheck: false,
+              className: "min-h-32 font-mono text-base md:text-[0.8125rem]"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { children: button })
+        ] }) : /* @__PURE__ */ jsx(Field, { label, hint, action: button, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            name: param,
+            required: true,
+            value,
+            onChange: (e) => setValue(e.target.value),
+            placeholder,
+            spellCheck: false,
+            autoComplete: "off",
+            className: "font-mono text-base md:text-[0.875rem]"
+          }
+        ) })
+      ]
+    }
+  );
 }
-function Diagram({ chart, caption, load, className }) {
-  const ref = useRef(null);
-  const dark = useDarkMode();
-  const raw = useId();
-  const [svg, setSvg] = useState(null);
-  const [failed, setFailed] = useState(false);
-  useEffect(() => {
-    let live = true;
-    const el = ref.current;
-    if (!el) return;
-    (async () => {
-      try {
-        const mod = await load();
-        const mermaid = "default" in mod ? mod.default : mod;
-        mermaid.initialize({ startOnLoad: false, securityLevel: "strict", theme: "base", themeVariables: mermaidTheme(el) });
-        const { svg: drawn } = await mermaid.render(`oca-diagram-${raw.replace(/[^a-zA-Z0-9]/g, "")}-${dark ? "d" : "l"}`, chart);
-        if (live) {
-          setSvg(naturalSize(drawn));
-          setFailed(false);
-        }
-      } catch {
-        if (live) setFailed(true);
-      }
-    })();
-    return () => {
-      live = false;
-    };
-  }, [chart, dark, load, raw]);
-  if (failed) return /* @__PURE__ */ jsx(CodeBlock, { code: chart, caption: "Diagram (shown as its source)", className: cn("my-6", className) });
-  return /* @__PURE__ */ jsxs("figure", { ref, className: cn("not-prose my-6 overflow-hidden rounded-[1.25rem] border border-border bg-card", className), children: [
-    svg ? /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsx(
-      "div",
+var TINT = "bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))]";
+function ComparisonTable({
+  columns,
+  rows,
+  label,
+  propertyHeading = "Property",
+  className
+}) {
+  const wide = columns.length > 3;
+  const grid = wide ? "lg:grid lg:grid-cols-[var(--oca-compare)]" : "md:grid md:grid-cols-[var(--oca-compare)]";
+  const desk = wide ? "lg" : "md";
+  const style = {
+    // The argued-for column gets a little more room: its answers carry the page.
+    "--oca-compare": ["minmax(0, 1.4fr)", ...columns.map((c) => c.highlight ? "minmax(0, 1.3fr)" : "minmax(0, 1fr)")].join(" ")
+  };
+  const ordered = [...columns].sort((a, b) => Number(Boolean(b.highlight)) - Number(Boolean(a.highlight)));
+  return /* @__PURE__ */ jsxs("ul", { "aria-label": label, style, className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs(
+      "li",
       {
-        className: "flex w-max min-w-full justify-center p-6 [&_svg]:h-auto [&_svg]:max-w-none",
-        role: "img",
-        "aria-label": typeof caption === "string" ? caption : "Diagram",
-        dangerouslySetInnerHTML: { __html: svg }
+        "aria-hidden": true,
+        className: cn(
+          "hidden gap-5 px-5 py-4 text-[0.875rem] font-medium text-muted-foreground",
+          wide ? "lg:grid lg:px-8" : "md:grid md:px-8",
+          grid
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: propertyHeading }),
+          columns.map((c) => /* @__PURE__ */ jsx("span", { className: cn(c.highlight && cn(TINT, "-my-4 px-4 py-4 text-oca-accent-ink")), children: c.label }, c.key))
+        ]
       }
-    ) }) : /* @__PURE__ */ jsx("div", { role: "status", "aria-label": "Drawing the diagram", className: "p-6", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full rounded-xl" }) }),
-    caption ? /* @__PURE__ */ jsx("figcaption", { className: "border-t border-border px-5 py-3 text-[0.8125rem] text-muted-foreground", children: caption }) : null
+    ),
+    rows.map((r, ri) => /* @__PURE__ */ jsxs("li", { className: cn("grid grid-cols-1 gap-3 px-5 py-5", wide ? "lg:items-start lg:gap-5 lg:px-8" : "md:items-start md:gap-5 md:px-8", grid), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "oca-title-sm", children: r.label }),
+        r.note ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: r.note }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-1", desk === "lg" ? "lg:contents" : "md:contents"), children: columns.map((c) => {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { "--oca-order": ordered.indexOf(c) },
+            className: cn(
+              // Two rows of the pair's grid (name, answer), so answers line up
+              // across a pair even when one name wraps.
+              "order-[var(--oca-order)] row-span-2 grid min-w-0 grid-rows-subgrid gap-1 rounded-xl px-3 py-2.5",
+              desk === "lg" ? "lg:order-none lg:row-span-1 lg:flex lg:flex-col" : "md:order-none md:row-span-1 md:flex md:flex-col",
+              c.highlight ? cn(
+                TINT,
+                "col-span-2",
+                desk === "lg" ? "lg:col-span-1 lg:-my-5 lg:self-stretch lg:rounded-none lg:px-4 lg:py-5" : "md:col-span-1 md:-my-5 md:self-stretch md:rounded-none md:px-4 md:py-5"
+              ) : desk === "lg" ? "lg:p-0" : "md:p-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-[0.8125rem]",
+                    c.highlight ? "text-oca-accent-ink" : "text-muted-foreground",
+                    desk === "lg" ? "lg:sr-only" : "md:sr-only"
+                  ),
+                  children: c.label
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", c.highlight && "font-medium"), children: r.values[c.key] ?? "\u2014" })
+            ]
+          },
+          c.key
+        );
+      }) })
+    ] }, ri))
   ] });
 }
-var HEADING = {
-  h1: "oca-display-3 mb-4 text-foreground",
-  h2: "mb-3 mt-12 text-[1.375rem] font-medium leading-tight tracking-[-0.015em] text-foreground md:text-[1.5rem]",
-  h3: "mb-2 mt-9 text-[1.125rem] font-medium leading-snug tracking-[-0.01em] text-foreground",
-  h4: "mb-2 mt-7 text-[1rem] font-medium leading-snug text-foreground"
+var CHECK = {
+  ok: { word: "Passed", icon: /* @__PURE__ */ jsx(CircleCheck, {}), tone: "text-success" },
+  fail: { word: "Failed", icon: /* @__PURE__ */ jsx(CircleX, {}), tone: "text-destructive" },
+  pending: { word: "Pending", icon: /* @__PURE__ */ jsx(Clock, {}), tone: "text-oca-accent-ink" },
+  none: { word: "None", icon: /* @__PURE__ */ jsx(CircleSlash, {}), tone: "text-muted-foreground" },
+  skipped: { word: "Skipped", icon: /* @__PURE__ */ jsx(CircleMinus, {}), tone: "text-muted-foreground" },
+  unchecked: { word: "Not checked", icon: /* @__PURE__ */ jsx(CircleDashed, {}), tone: "text-oca-subtle" }
 };
-function DocsHeading({
-  as: Tag,
-  id,
-  children,
-  className,
-  ...props
+function VerifyReport({
+  verdict,
+  title,
+  summary,
+  checks,
+  facts,
+  notChecked,
+  actions,
+  as: Heading = "h2",
+  className
 }) {
-  return /* @__PURE__ */ jsxs(Tag, { id, className: cn("group scroll-mt-28", HEADING[Tag], className), ...props, children: [
-    /* @__PURE__ */ jsx("span", { "data-heading-text": "", children }),
-    id && Tag !== "h1" ? /* @__PURE__ */ jsxs(
-      "a",
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": "Verification result",
+      className: cn("overflow-hidden rounded-[1.25rem] border border-border bg-card", className),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-col items-start gap-3 p-6 md:p-8", children: [
+          /* @__PURE__ */ jsx(StatusBadge, { status: verdict }),
+          /* @__PURE__ */ jsx(Heading, { className: "oca-display-3 [overflow-wrap:anywhere]", children: title }),
+          summary ? /* @__PURE__ */ jsx("p", { className: "oca-body max-w-[40rem] [overflow-wrap:anywhere]", children: summary }) : null
+        ] }),
+        /* @__PURE__ */ jsx("ul", { "aria-label": "Checks", className: "divide-y divide-border border-t border-border", children: checks.map((c, i) => {
+          const k = CHECK[c.state];
+          return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3 px-6 py-3.5 md:px-8", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("mt-0.5 shrink-0 [&_svg]:size-[1.125rem]", k.tone), children: k.icon }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-baseline sm:justify-between sm:gap-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem]", children: c.label }),
+                c.note ? /* @__PURE__ */ jsx("span", { className: "break-words text-[0.8125rem] leading-snug text-muted-foreground", children: c.note }) : null
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "shrink-0 text-[0.8125rem]",
+                    c.state === "fail" ? "text-destructive" : "text-muted-foreground"
+                  ),
+                  children: k.word
+                }
+              )
+            ] })
+          ] }, i);
+        }) }),
+        facts && facts.length > 0 ? /* @__PURE__ */ jsx(KeyValueList, { items: facts, className: "rounded-none border-x-0 border-b-0 bg-transparent [&>div]:px-6 md:[&>div]:px-8" }) : null,
+        notChecked && notChecked.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-border bg-muted/50 px-6 py-5 md:px-8", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] font-medium", children: "What this did not check" }),
+          /* @__PURE__ */ jsx("ul", { className: "flex list-disc flex-col gap-1 pl-5 text-[0.875rem] leading-relaxed text-muted-foreground", children: notChecked.map((n, i) => /* @__PURE__ */ jsx("li", { children: n }, i)) })
+        ] }) : null,
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 border-t border-border px-6 py-5 md:px-8", children: actions }) : null
+      ]
+    }
+  );
+}
+function SignMessage({
+  lead,
+  address,
+  message,
+  wallets,
+  busy = false,
+  error,
+  submitLabel = "Confirm",
+  secondary,
+  scheme = "bip322",
+  onSignature,
+  className
+}) {
+  const [pasted, setPasted] = useState("");
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
+    lead ? /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] leading-relaxed", children: lead }) : null,
+    wallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: wallets }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[0.8125rem] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+        "or sign it in any wallet",
+        /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(CodeBlock, { code: message, caption: "Message to sign", wrap: true }),
+    /* @__PURE__ */ jsxs(
+      "form",
       {
-        href: `#${id}`,
-        className: "ml-2 inline-block rounded-md px-1 align-baseline text-[0.85em] font-normal text-oca-subtle no-underline opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100",
+        className: "flex flex-col gap-4",
+        onSubmit: (e) => {
+          e.preventDefault();
+          if (pasted.trim()) onSignature(pasted.trim());
+        },
         children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "#" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Link to this section" })
+          /* @__PURE__ */ jsx(
+            Field,
+            {
+              label: "Signature",
+              error,
+              hint: /* @__PURE__ */ jsxs(Fragment, { children: [
+                "From your wallet\u2019s \u201Csign message\u201D (",
+                scheme === "legacy" ? "legacy, BIP-137" : "BIP-322",
+                "), signed by",
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "break-all font-mono", children: address }),
+                "."
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  value: pasted,
+                  onChange: (e) => setPasted(e.target.value),
+                  rows: 3,
+                  spellCheck: false,
+                  className: "min-h-24 font-mono text-base md:text-[0.8125rem]"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { type: "submit", loading: busy, disabled: !pasted.trim(), children: submitLabel }),
+            secondary
+          ] })
         ]
       }
-    ) : null
+    )
   ] });
 }
 function useMacKeys() {
@@ -4301,7 +4378,7 @@ function FormSection({
       "aria-current": status === "current" ? "step" : void 0,
       className: cn("scroll-mt-24 rounded-[1.25rem] border border-border bg-card", className),
       children: [
-        /* @__PURE__ */ jsxs("header", { className: cn("flex items-start gap-3.5", tight ? "px-5 pt-5" : "px-6 pt-6"), children: [
+        /* @__PURE__ */ jsxs("header", { className: cn("flex flex-wrap items-start gap-x-3.5 gap-y-3", tight ? "px-5 pt-5" : "px-6 pt-6"), children: [
           n !== void 0 ? /* @__PURE__ */ jsx(
             "span",
             {
@@ -4328,7 +4405,7 @@ function FormSection({
             ] }),
             hint ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: hint }) : null
           ] }),
-          action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+          action ? /* @__PURE__ */ jsx("div", { className: cn("shrink-0 max-sm:basis-full", n !== void 0 && "max-sm:pl-[2.625rem]"), children: action }) : null
         ] }),
         /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", tight ? "gap-4 p-5" : "gap-5 p-6", n !== void 0 && (tight ? "sm:pl-[3.875rem]" : "sm:pl-[4.125rem]")), children })
       ]
@@ -4558,27 +4635,30 @@ function FilterChips({
       onChange(cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v]);
     } else onChange(v);
   };
-  return /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--background)", className: cn("w-full", className), children: /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: "flex w-max items-center gap-2 py-0.5", children: options.map((o) => {
-    const on = isOn(o.value);
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-pressed": on,
-        onClick: () => press(o.value),
-        className: cn(
-          "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3.5 text-[0.875rem] transition-colors",
-          tight ? "h-8" : "h-9",
-          on ? "border-foreground bg-foreground text-background" : "border-border bg-card text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
-        ),
-        children: [
-          o.label,
-          o.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "oca-tabular", children: o.count.toLocaleString("en-US") }) : null
-        ]
-      },
-      o.value
-    );
-  }) }) });
+  return (
+    // Wraps rather than scrolls: every filter stays in view on a phone.
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: cn("flex flex-wrap items-center gap-2 py-0.5", className), children: options.map((o) => {
+      const on = isOn(o.value);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": on,
+          onClick: () => press(o.value),
+          className: cn(
+            "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3.5 text-[0.875rem] transition-colors",
+            tight ? "h-8" : "h-9",
+            on ? "border-foreground bg-foreground text-background" : "border-border bg-card text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
+          ),
+          children: [
+            o.label,
+            o.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "oca-tabular", children: o.count.toLocaleString("en-US") }) : null
+          ]
+        },
+        o.value
+      );
+    }) })
+  );
 }
 function ToolGrid({
   tools,