@orangecheck/app-design 1.3.0 → 1.4.1

package/dist/index.js

@@ -6,6 +6,7 @@ var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
+var nextThemes = require('next-themes');
 var sonner = require('sonner');
 var jsxRuntime = require('react/jsx-runtime');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -20,9 +21,8 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var QRCode = require('qrcode');
-var Link8 = require('next/link');
+var Link6 = require('next/link');
 var router = require('next/compat/router');
-var nextThemes = require('next-themes');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -56,7 +56,7 @@ var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitiv
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
-var Link8__default = /*#__PURE__*/_interopDefault(Link8);
+var Link6__default = /*#__PURE__*/_interopDefault(Link6);
 
 // src/tokens/index.ts
 var APP_ATTRIBUTE = "data-oc-app";
@@ -208,10 +208,18 @@ function StatusDot({
     }
   );
 }
-function Toaster(props) {
+var TOAST_COLOURS = {
+  "--normal-bg": "var(--popover)",
+  "--normal-text": "var(--popover-foreground)",
+  "--normal-border": "var(--border)"
+};
+function Toaster({ style, ...props }) {
+  const { resolvedTheme } = nextThemes.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     sonner.Toaster,
     {
+      theme: resolvedTheme === "dark" ? "dark" : resolvedTheme === "light" ? "light" : "system",
+      style: { ...TOAST_COLOURS, ...style },
       position: "bottom-right",
       toastOptions: {
         classNames: {
@@ -3006,11 +3014,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;
@@ -3019,7 +3029,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
   };
@@ -3032,7 +3043,8 @@ function Well({
   lines,
   maxLines,
   diff,
-  lineNumbers
+  lineNumbers,
+  wrap
 }) {
   const foldable = maxLines !== void 0 && lines > maxLines + 2;
   const [open, setOpen] = react.useState(false);
@@ -3051,7 +3063,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__ */ jsxRuntime.jsx("code", { className: "block", "data-lang": lang, dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsxRuntime.jsx("code", { className: "block", "data-lang": lang, children })
@@ -3084,6 +3097,7 @@ function CodeBlock({
   code,
   html,
   children,
+  trailingNewline = false,
   lang,
   caption,
   copy = true,
@@ -3092,6 +3106,7 @@ function CodeBlock({
   highlight: marks,
   diff,
   lineNumbers,
+  wrap,
   actions,
   className
 }) {
@@ -3104,7 +3119,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__ */ jsxRuntime.jsxs("figure", { className: cn(FRAME, className), children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.8125rem] text-oca-ink-subtle", children: caption ?? languageName(lang) ?? "Code" }),
@@ -3123,6 +3138,7 @@ function CodeBlock({
         maxLines,
         diff: prepared ? prepared.diff : isDiff,
         lineNumbers,
+        wrap,
         children
       }
     )
@@ -3587,6 +3603,169 @@ var ErrorBoundary = class extends react.Component {
     ) });
   }
 };
+
+// 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 FAMILY_GROUPS = [
+  { id: "orangecheck", label: "orangecheck" },
+  { id: "protocol", label: "Protocols" },
+  { id: "app", label: "Apps" },
+  { id: "public-good", label: "Public goods" }
+];
+var BY_SLUG = new Map(FAMILY.map((s) => [s.slug, s]));
+function familySite(slug) {
+  return BY_SLUG.get(slug);
+}
+function protocolSite(slug) {
+  return BY_SLUG.get(slug);
+}
+function familyByGroup() {
+  return FAMILY_GROUPS.map((g) => ({ ...g, sites: FAMILY.filter((s) => s.group === g.id) }));
+}
+var LEGAL_LINKS = [
+  { href: `${OCHK_IO}/privacy`, label: "Privacy" },
+  { href: `${OCHK_IO}/terms`, label: "Terms" },
+  { href: `${OCHK_IO}/security`, label: "Security" },
+  { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
+  { href: `${OCHK_IO}/contact`, label: "Contact" }
+];
+var SELF_HOSTED_LEGAL_LINKS = [
+  { href: "/privacy", label: "Privacy" },
+  { href: "/terms", label: "Terms" },
+  { href: "/security", label: "Security" },
+  { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
+  { href: "/contact", label: "Contact" }
+];
+var OCHK_IO_NAV = [
+  {
+    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 OCHK_IO_FOOTER = [
+  {
+    heading: "Company",
+    links: [
+      { href: `${OCHK_IO}/about`, label: "About" },
+      { href: `${OCHK_IO}/trust`, label: "Trust" },
+      { href: "https://github.com/orangecheck", label: "GitHub", external: true }
+    ]
+  }
+];
+var SiteHomeContext = sharedContext("site-home", void 0);
+function useSiteHome() {
+  return react.useContext(SiteHomeContext);
+}
 var WORDS = {
   404: {
     name: "Not found",
@@ -3604,10 +3783,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__ */ jsxRuntime.jsx(Section, { space: "none", className: cn("flex min-h-[min(40rem,72dvh)] items-center py-16 md:py-24", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-12", children: [
@@ -3621,7 +3803,7 @@ function ErrorPage({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-lead oca-enter [--enter-delay:150ms]", children: detail ?? words.detail }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-enter flex flex-wrap gap-3 [--enter-delay:230ms]", children: actions ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         server ? /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => window.location.reload(), children: "Try again" }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, variant: server ? "secondary" : "primary", children: /* @__PURE__ */ jsxRuntime.jsx(Link8__default.default, { href: home, children: "Go home" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, variant: server ? "secondary" : "primary", children: /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href: homeHref, children: "Go home" }) })
       ] }) })
     ] }),
     art !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "oca-enter hidden justify-center md:col-span-5 md:flex [--enter-delay:120ms]", children: art ?? /* @__PURE__ */ jsxRuntime.jsx(MarkOutline, { className: "w-full max-w-[20rem] text-oca-hairline-strong" }) }) : null
@@ -3740,16 +3922,25 @@ function Faq({
   return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { single: true, className, children: items.map((it, i) => /* @__PURE__ */ jsxRuntime.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$1 = router.useRouter();
+  if (!router$1 || !href || href.startsWith("/") || href.startsWith("#") || href.startsWith("?") || SCHEME.test(href)) return href;
+  const here = router$1.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) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Link8__default.default, { href, className: cn(LINK, className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href, className: cn(LINK, className), children });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("a", { href, className: cn(LINK, className), ...offsite ? { target: "_blank", rel: "noreferrer" } : {}, children: [
     children,
@@ -3858,165 +4049,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 InDocsContext = sharedContext("in-docs", false);
+function useInDocs() {
+  return react.useContext(InDocsContext);
 }
-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 FAMILY_GROUPS = [
-  { id: "orangecheck", label: "orangecheck" },
-  { id: "protocol", label: "Protocols" },
-  { id: "app", label: "Apps" },
-  { id: "public-good", label: "Public goods" }
-];
-var BY_SLUG = new Map(FAMILY.map((s) => [s.slug, s]));
-function familySite(slug) {
-  return BY_SLUG.get(slug);
-}
-function protocolSite(slug) {
-  return BY_SLUG.get(slug);
-}
-function familyByGroup() {
-  return FAMILY_GROUPS.map((g) => ({ ...g, sites: FAMILY.filter((s) => s.group === g.id) }));
-}
-var LEGAL_LINKS = [
-  { href: `${OCHK_IO}/privacy`, label: "Privacy" },
-  { href: `${OCHK_IO}/terms`, label: "Terms" },
-  { href: `${OCHK_IO}/security`, label: "Security" },
-  { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
-  { href: `${OCHK_IO}/contact`, label: "Contact" }
-];
-var SELF_HOSTED_LEGAL_LINKS = [
-  { href: "/privacy", label: "Privacy" },
-  { href: "/terms", label: "Terms" },
-  { href: "/security", label: "Security" },
-  { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
-  { href: "/contact", label: "Contact" }
-];
-var OCHK_IO_NAV = [
-  {
-    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 OCHK_IO_FOOTER = [
-  {
-    heading: "Company",
-    links: [
-      { href: `${OCHK_IO}/about`, label: "About" },
-      { href: `${OCHK_IO}/trust`, label: "Trust" },
-      { href: "https://github.com/orangecheck", label: "GitHub", external: true }
-    ]
-  }
-];
 var CARD = "group relative flex h-full flex-col rounded-[1.25rem] border border-border bg-card p-6 transition-colors hover:border-oca-hairline-strong md:p-7 has-[a:focus-visible]:ring-2 has-[a:focus-visible]:ring-ring has-[a:focus-visible]:ring-offset-2 has-[a:focus-visible]:ring-offset-background";
 var STRETCH = 'outline-none after:absolute after:inset-0 after:rounded-[1.25rem] after:content-[""]';
 var pad2 = (n) => String(n + 1).padStart(2, "0");
@@ -4025,6 +4061,7 @@ function ProtocolGrid({
   link = "page",
   className
 }) {
+  const inDocs = useInDocs();
   return /* @__PURE__ */ jsxRuntime.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);
@@ -4037,7 +4074,7 @@ function ProtocolGrid({
         ] }),
         p.status !== "live" ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: p.status }) : null
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "oca-display-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "oca-display-3", children: link === "docs" && inDocs ? /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href: `/${p.slug}`, className: STRETCH, children: p.label }) : /* @__PURE__ */ jsxRuntime.jsx(
         "a",
         {
           href: link === "tool" ? p.toolHref : link === "docs" ? `${DOCS_HREF}/${p.slug}` : p.pageHref,
@@ -4095,203 +4132,627 @@ function AppGrid({
   const list = sites ? sites.map((slug) => FAMILY.find((s) => s.slug === slug)).filter((s) => s !== void 0) : FAMILY.filter((s) => s.group === group);
   return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-5", className), children: list.map((s) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(AppCard, { name: s.label, line: s.line, href: s.href, protocols: s.protocols, status: s.status }) }, s.slug)) });
 }
-function ProtocolHero({
-  protocol: protocol2,
+var isInternal = (href) => href.startsWith("/") || href.startsWith("#");
+function DocLink({ href, className, children, ...rest }) {
+  return isInternal(href) ? /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href, className, ...rest, children }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, ...rest, children });
+}
+function Breadcrumbs({ items, action, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-11 items-center justify-between gap-4 sm:min-h-0", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex min-w-0 items-center gap-1.5 text-[0.875rem] text-muted-foreground", children: items.map((c, i) => {
+      const last = i === items.length - 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-1.5", last ? "min-w-0" : "shrink-0"), children: [
+        c.href && !last ? /* @__PURE__ */ jsxRuntime.jsx(DocLink, { href: c.href, className: "inline-flex min-h-11 items-center transition-colors hover:text-foreground sm:min-h-0", children: c.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": last ? "page" : void 0, className: cn("truncate", last && "text-foreground"), children: c.label }),
+        !last ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-oca-subtle" }) : null
+      ] }, i);
+    }) }) }),
+    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-[0.875rem]", children: action }) : null
+  ] });
+}
+function DocsPager({ prev, next, className }) {
+  if (!prev && !next) return null;
+  const card = (l, dir) => /* @__PURE__ */ jsxRuntime.jsxs(
+    DocLink,
+    {
+      href: l.href,
+      className: cn(
+        "group flex min-h-20 flex-col justify-center gap-1 rounded-2xl border border-border bg-card px-5 py-4 transition-colors hover:border-oca-hairline-strong",
+        dir === "next" && "items-end text-right sm:col-start-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 text-[0.8125rem] text-muted-foreground", children: [
+          dir === "prev" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { "aria-hidden": true, className: "size-3.5" }) : null,
+          dir === "prev" ? "Previous" : "Next",
+          l.section ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "\xB7" }) : null,
+          l.section ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: l.section }) : null,
+          dir === "next" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { "aria-hidden": true, className: "size-3.5" }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[1rem] font-medium leading-snug text-foreground", children: l.label })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": "Previous and next page", className: cn("grid grid-cols-1 gap-3 border-t border-border pt-8 sm:grid-cols-2", className), children: [
+    prev ? card(prev, "prev") : null,
+    next ? card(next, "next") : null
+  ] });
+}
+function useHeadings(selector = "#docs-content", key) {
+  const [items, setItems] = react.useState([]);
+  react.useEffect(() => {
+    const read = () => {
+      const root = document.querySelector(selector);
+      if (!root) return setItems([]);
+      setItems(
+        Array.from(root.querySelectorAll("h2[id], h3[id]")).map((h) => ({
+          id: h.id,
+          // The anchor link's "#" is not part of the name.
+          label: (h.querySelector("[data-heading-text]") ?? h).textContent?.trim() ?? "",
+          level: h.tagName === "H3" ? 3 : 2
+        }))
+      );
+    };
+    const raf = requestAnimationFrame(read);
+    const t = setTimeout(read, 80);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(t);
+    };
+  }, [selector, key]);
+  const activeId = useActiveHeading(items.map((i) => i.id));
+  return { items, activeId };
+}
+function OnThisPage({
+  items,
+  activeId,
+  title = "On this page",
+  onNavigate,
+  className
+}) {
+  const id = react.useId();
+  if (items.length === 0) return null;
+  return (
+    // With no visible title (a folded list under its own summary) the name is still "On this page".
+    /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-labelledby": title ? id : void 0, "aria-label": title ? void 0 : "On this page", className, children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx("p", { id, className: "mb-3 text-[0.875rem] font-medium", children: title }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((t) => {
+        const on = t.id === activeId;
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: `#${t.id}`,
+            onClick: onNavigate,
+            "aria-current": on ? "location" : void 0,
+            className: cn(
+              "block border-l py-1.5 text-[0.875rem] leading-snug transition-colors",
+              t.level === 3 ? "pl-7" : "pl-4",
+              on ? "border-foreground text-foreground" : "border-border text-muted-foreground hover:text-foreground"
+            ),
+            children: t.label
+          }
+        ) }, t.id);
+      }) })
+    ] })
+  );
+}
+var CALLOUT_TONE = { note: "neutral", warning: "brand", danger: "danger" };
+function Callout({
+  tone = "note",
   title,
-  lead,
-  actions,
-  art,
   children,
   className
 }) {
-  const p = protocolSite(protocol2);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    PageHero,
+    Notice,
     {
-      className,
-      eyebrow: `Protocol \xB7 ${p.verb}`,
+      tone: CALLOUT_TONE[tone],
       title,
-      lead,
-      actions,
-      art,
-      children: p.status !== "live" || children ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-4", children: [
-        p.status !== "live" ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: p.status }) : null,
-        children
-      ] }) : null
+      role: "note",
+      className: cn("my-6 [&_p]:my-0 [&_p]:text-[0.9375rem] [&_p]:leading-relaxed [&_p+p]:mt-3", className),
+      children
     }
   );
 }
-function ProtocolNav({
-  current: current2,
-  link = "page",
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Protocols", className, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--background)", children: /* @__PURE__ */ jsxRuntime.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 === current2;
-    return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
+function Step({ title, id, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative pb-8 pl-11 last:pb-0 [counter-increment:oca-step]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
       {
-        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
+        "aria-hidden": true,
+        className: "absolute left-0 top-0 flex size-7 items-center justify-center rounded-full border border-oca-hairline-strong bg-card text-[0.8125rem] oca-tabular text-foreground before:content-[counter(oca-step)]"
       }
-    ) }, p.slug);
-  }) }) }) });
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute bottom-1 left-[0.8125rem] top-9 w-px bg-border" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { id, className: "scroll-mt-28 pt-0.5 text-[1.0625rem] font-medium leading-snug tracking-[-0.008em] text-foreground", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-muted-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children })
+  ] });
 }
-function SpecCard({
-  protocol: protocol2,
-  version,
-  license,
-  vectors,
-  size = "md",
+function Steps({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: cn("not-prose my-8 flex flex-col [counter-reset:oca-step] [&>li:last-child>span:nth-child(2)]:hidden", className), children });
+}
+function LinkCard({
+  href,
+  title,
+  description,
+  icon,
+  meta,
   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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-mono text-[0.8125rem] text-foreground", children: repo }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: facts.map(([k, v]) => k === "Version" ? `v${v}` : k === "Nostr kind" ? `kind ${v}` : v).join(" \xB7 ") }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto flex items-center gap-1 text-muted-foreground group-hover:text-foreground", children: [
-            "Read the spec ",
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { "aria-hidden": true, className: "size-4" })
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: "The spec" }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "oca-title break-all font-mono text-[1.0625rem] tracking-normal", children: repo })
-      ] }),
-      p.status !== "live" ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: p.status }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4", children: facts.map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-[0.8125rem] text-muted-foreground", children: k }),
-      /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "oca-tabular text-[1.0625rem]", children: v })
-    ] }, k)) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: p.specHref, children: [
-      "Read the spec ",
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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] = react.useState("");
-  const submit = (e) => {
-    if (!onVerify) return;
-    e.preventDefault();
-    if (value.trim()) onVerify(value.trim());
-  };
-  const button = /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: multiline ? void 0 : "w-full sm:w-auto", children: submitLabel });
+  const Arrow = isInternal(href) ? lucideReact.ArrowRight : lucideReact.ArrowUpRight;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "form",
+    DocLink,
     {
-      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),
+      href,
+      className: cn(
+        "group flex h-full flex-col gap-3 rounded-[1.25rem] border border-border bg-card p-5 transition-colors hover:border-oca-hairline-strong",
+        className
+      ),
       children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-          title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "oca-title", children: title }) : null,
-          description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-body text-[0.9375rem]", children: description }) : null
-        ] }) : null,
-        multiline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Field, { label, hint, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: button })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(Field, { label, hint, action: button, children: /* @__PURE__ */ jsxRuntime.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]"
-          }
-        ) })
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start justify-between gap-3", children: [
+          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-xl bg-muted text-foreground [&_svg]:size-[1.125rem]", children: icon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[1rem] font-medium leading-snug text-foreground", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
+            meta,
+            /* @__PURE__ */ jsxRuntime.jsx(Arrow, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" })
+          ] })
+        ] }),
+        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[1rem] font-medium leading-snug text-foreground", children: title }) : null,
+        description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9375rem] leading-relaxed text-muted-foreground", children: description }) : null
       ]
     }
   );
 }
-var TINT = "bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))]";
-function ComparisonTable({
-  columns,
+function CardGrid({ columns = 2, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("not-prose my-6 grid grid-cols-1 gap-3 sm:grid-cols-2", columns === 3 && "lg:grid-cols-3", className), children });
+}
+function MdxTable({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose my-6 overflow-hidden rounded-2xl border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      className: cn(
+        "w-full border-collapse text-left text-[0.875rem] leading-relaxed",
+        "[&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-oca-hairline-strong [&_th]:bg-oca-table-head [&_th]:px-4 [&_th]:py-2.5 [&_th]:text-[0.8125rem] [&_th]:font-medium [&_th]:text-foreground",
+        "[&_td]:border-t [&_td]:border-border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_td]:text-muted-foreground [&_tbody_tr:first-child_td]:border-t-0",
+        "[&_td_code]:bg-transparent [&_td_code]:p-0 [&_td_code]:text-foreground [&_td:first-child]:text-foreground",
+        "[&_[align=center]]:text-center [&_[align=right]]:text-right",
+        // On a phone a cell keeps a readable width; the table scrolls instead of crushing it.
+        "max-sm:[&_td]:min-w-[9rem]",
+        className
+      ),
+      ...props
+    }
+  ) }) });
+}
+var said = (n) => n !== void 0 && n !== null && n !== false && n !== "";
+function ApiTable({
   rows,
-  label,
-  propertyHeading = "Property",
+  caption,
+  nameHeader = "Name",
   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 hasDefault = rows.some((r) => r.default !== void 0);
+  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__ */ jsxRuntime.jsx("div", { className: cn("not-prose my-6 overflow-hidden rounded-2xl border border-border bg-card", className), children: /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-left text-[0.875rem] max-sm:block", children: [
+    caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "max-sm:sr-only", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-oca-hairline-strong bg-oca-table-head text-[0.8125rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: nameHeader }),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Type" }),
+      hasDefault ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Default" }) : null,
+      hasDescription ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Description" }) : null,
+      hasSource ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Defined in" }) : null
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border max-sm:block", children: rows.map((r) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("th", { scope: "row", className: cn(cell, "text-left font-normal"), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[0.75rem] text-oca-accent-ink", children: "Required" }) : null,
+            r.deprecated ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "muted", children: "Deprecated" }) : null,
+            r.status ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: r.status }) : null
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-sans sm:hidden", children: "Default " }),
+            r.default ?? "\u2014"
+          ] }) : null,
+          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: cn(cell, "leading-relaxed text-muted-foreground", !said(r.description) && "max-sm:hidden"), children: r.description }) : null,
+          hasSource ? /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  react.useEffect(() => {
+    const root = document.documentElement;
+    const read = () => setDark(root.classList.contains("dark"));
+    read();
+    const mo = new MutationObserver(read);
+    mo.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => mo.disconnect();
+  }, []);
+  return dark;
+}
+function mermaidTheme(el) {
+  const css = getComputedStyle(el);
+  const v = (name) => css.getPropertyValue(name).trim();
+  const card = v("--card");
+  const muted = v("--muted");
+  const text = v("--foreground");
+  const subtle = v("--muted-foreground");
+  const line = v("--input");
+  const hair = v("--oca-hairline-strong");
+  return {
+    background: "transparent",
+    fontFamily: css.fontFamily,
+    fontSize: "14px",
+    textColor: text,
+    mainBkg: card,
+    primaryColor: card,
+    primaryTextColor: text,
+    primaryBorderColor: hair,
+    secondaryColor: muted,
+    secondaryTextColor: text,
+    secondaryBorderColor: hair,
+    tertiaryColor: muted,
+    tertiaryTextColor: text,
+    tertiaryBorderColor: hair,
+    nodeBorder: hair,
+    lineColor: line,
+    edgeLabelBackground: card,
+    clusterBkg: muted,
+    clusterBorder: hair,
+    titleColor: text,
+    noteBkgColor: muted,
+    noteTextColor: text,
+    noteBorderColor: hair,
+    actorBkg: card,
+    actorBorder: hair,
+    actorTextColor: text,
+    actorLineColor: line,
+    signalColor: text,
+    signalTextColor: text,
+    labelBoxBkgColor: card,
+    labelBoxBorderColor: hair,
+    labelTextColor: text,
+    loopTextColor: subtle,
+    activationBkgColor: muted,
+    activationBorderColor: hair,
+    sequenceNumberColor: card
   };
-  const ordered = [...columns].sort((a, b) => Number(Boolean(b.highlight)) - Number(Boolean(a.highlight)));
-  return /* @__PURE__ */ jsxRuntime.jsxs("ul", { "aria-label": label, style, className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "li",
+}
+var FIT = 4 / 3;
+function naturalSize(svg) {
+  const w = svg.match(/viewBox="[\d.-]+ [\d.-]+ ([\d.]+) [\d.]+"/)?.[1];
+  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] = react.useState(null);
+  react.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 = react.useRef(null);
+  const dark = useDarkMode();
+  const raw = react.useId();
+  const [drawn, setDrawn] = react.useState(null);
+  const [failed, setFailed] = react.useState(false);
+  const room = useInnerWidth(ref, 48);
+  const fits = drawn?.width != null && room != null && drawn.width <= room * FIT;
+  react.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__ */ jsxRuntime.jsx(CodeBlock, { code: chart, caption: "Diagram (shown as its source)", className: cn("my-6", className) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { ref, className: cn("not-prose my-6 overflow-hidden rounded-[1.25rem] border border-border bg-card", className), children: [
+    drawn ? /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        "aria-hidden": true,
+        "data-fit": fits ? "" : void 0,
         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
+          "flex justify-center p-6 [&_svg]:h-auto",
+          fits ? "w-full [&_svg]:max-w-full" : "w-max min-w-full [&_svg]:max-w-none"
         ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: propertyHeading }),
-          columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(c.highlight && cn(TINT, "-my-4 px-4 py-4 text-oca-accent-ink")), children: c.label }, c.key))
-        ]
+        role: "img",
+        "aria-label": typeof caption === "string" ? caption : "Diagram",
+        dangerouslySetInnerHTML: { __html: drawn.svg }
       }
-    ),
-    rows.map((r, ri) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { role: "status", "aria-label": "Drawing the diagram", className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-40 w-full rounded-xl" }) }),
+    caption ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Tag, { id, className: cn("group scroll-mt-28", HEADING[Tag], className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-heading-text": "", children }),
+    id && Tag !== "h1" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "#" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Link to this section" })
+        ]
+      }
+    ) : null
+  ] });
+}
+function codeText(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(codeText).join("");
+  if (react.isValidElement(node)) return codeText(node.props.children);
+  return "";
+}
+function codeLang(node) {
+  const child = react.Children.toArray(node)[0];
+  if (!react.isValidElement(child)) return void 0;
+  const cls = child.props.className ?? "";
+  return cls.match(/language-([\w+-]+)/)?.[1];
+}
+function ProtocolHero({
+  protocol: protocol2,
+  title,
+  lead,
+  actions,
+  art,
+  children,
+  className
+}) {
+  const p = protocolSite(protocol2);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PageHero,
+    {
+      className,
+      eyebrow: `Protocol \xB7 ${p.verb}`,
+      title,
+      lead,
+      actions,
+      art,
+      children: p.status !== "live" || children ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-4", children: [
+        p.status !== "live" ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: p.status }) : null,
+        children
+      ] }) : null
+    }
+  );
+}
+function ProtocolNav({
+  current: current2,
+  link = "page",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Protocols", className, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--background)", children: /* @__PURE__ */ jsxRuntime.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 === current2;
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SpecFileNote, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(ProtocolSpecCard, { ...props });
+}
+function SpecFileNote({ repo, file, kind = "spec", version, note, className }) {
+  const d = SPEC_FILE[kind];
+  const f = file ?? d.file;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Callout, { title: version ? `${d.title} \xB7 ${version}` : d.title, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: note ?? d.note }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-mono text-[0.8125rem] text-foreground", children: repo }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: facts.map(([k, v]) => k === "Version" ? `v${v}` : k === "Nostr kind" ? `kind ${v}` : v).join(" \xB7 ") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto flex items-center gap-1 text-muted-foreground group-hover:text-foreground", children: [
+            "Read the spec ",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { "aria-hidden": true, className: "size-4" })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: "The spec" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "oca-title break-all font-mono text-[1.0625rem] tracking-normal", children: repo })
+      ] }),
+      p.status !== "live" ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: p.status }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4", children: facts.map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-[0.8125rem] text-muted-foreground", children: k }),
+      /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "oca-tabular text-[1.0625rem]", children: v })
+    ] }, k)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: p.specHref, children: [
+      "Read the spec ",
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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] = react.useState("");
+  const submit = (e) => {
+    if (!onVerify) return;
+    e.preventDefault();
+    if (value.trim()) onVerify(value.trim());
+  };
+  const button = /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: multiline ? void 0 : "w-full sm:w-auto", children: submitLabel });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "oca-title", children: title }) : null,
+          description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-body text-[0.9375rem]", children: description }) : null
+        ] }) : null,
+        multiline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Field, { label, hint, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: button })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(Field, { label, hint, action: button, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("ul", { "aria-label": label, style, className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: propertyHeading }),
+          columns.map((c) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oca-title-sm", children: r.label }),
         r.note ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: r.note }) : null
@@ -4404,6 +4865,7 @@ function SignMessage({
   error,
   submitLabel = "Confirm",
   secondary,
+  scheme = "bip322",
   onSignature,
   className
 }) {
@@ -4418,7 +4880,7 @@ function SignMessage({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" })
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { code: message, caption: "Message to sign" }),
+    /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { code: message, caption: "Message to sign", wrap: true }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "form",
       {
@@ -4434,7 +4896,9 @@ function SignMessage({
               label: "Signature",
               error,
               hint: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                "From your wallet\u2019s \u201Csign message\u201D (BIP-322), signed by",
+                "From your wallet\u2019s \u201Csign message\u201D (",
+                scheme === "legacy" ? "legacy, BIP-137" : "BIP-322",
+                "), signed by",
                 " ",
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "break-all font-mono", children: address }),
                 "."
@@ -4460,448 +4924,67 @@ function SignMessage({
     )
   ] });
 }
-var isInternal = (href) => href.startsWith("/") || href.startsWith("#");
-function DocLink({ href, className, children, ...rest }) {
-  return isInternal(href) ? /* @__PURE__ */ jsxRuntime.jsx(Link8__default.default, { href, className, ...rest, children }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, ...rest, children });
+function useMacKeys() {
+  const [mac, setMac] = react.useState(true);
+  react.useEffect(() => {
+    setMac(/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent));
+  }, []);
+  return mac;
 }
-function Breadcrumbs({ items, action, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-11 items-center justify-between gap-4 sm:min-h-0", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex min-w-0 items-center gap-1.5 text-[0.875rem] text-muted-foreground", children: items.map((c, i) => {
-      const last = i === items.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-1.5", last ? "min-w-0" : "shrink-0"), children: [
-        c.href && !last ? /* @__PURE__ */ jsxRuntime.jsx(DocLink, { href: c.href, className: "inline-flex min-h-11 items-center transition-colors hover:text-foreground sm:min-h-0", children: c.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": last ? "page" : void 0, className: cn("truncate", last && "text-foreground"), children: c.label }),
-        !last ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-oca-subtle" }) : null
-      ] }, i);
-    }) }) }),
-    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-[0.875rem]", children: action }) : null
-  ] });
-}
-function DocsPager({ prev, next, className }) {
-  if (!prev && !next) return null;
-  const card = (l, dir) => /* @__PURE__ */ jsxRuntime.jsxs(
-    DocLink,
-    {
-      href: l.href,
-      className: cn(
-        "group flex min-h-20 flex-col justify-center gap-1 rounded-2xl border border-border bg-card px-5 py-4 transition-colors hover:border-oca-hairline-strong",
-        dir === "next" && "items-end text-right sm:col-start-2"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 text-[0.8125rem] text-muted-foreground", children: [
-          dir === "prev" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { "aria-hidden": true, className: "size-3.5" }) : null,
-          dir === "prev" ? "Previous" : "Next",
-          l.section ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "\xB7" }) : null,
-          l.section ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: l.section }) : null,
-          dir === "next" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { "aria-hidden": true, className: "size-3.5" }) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[1rem] font-medium leading-snug text-foreground", children: l.label })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": "Previous and next page", className: cn("grid grid-cols-1 gap-3 border-t border-border pt-8 sm:grid-cols-2", className), children: [
-    prev ? card(prev, "prev") : null,
-    next ? card(next, "next") : null
-  ] });
-}
-function useHeadings(selector = "#docs-content", key) {
-  const [items, setItems] = react.useState([]);
-  react.useEffect(() => {
-    const read = () => {
-      const root = document.querySelector(selector);
-      if (!root) return setItems([]);
-      setItems(
-        Array.from(root.querySelectorAll("h2[id], h3[id]")).map((h) => ({
-          id: h.id,
-          // The anchor link's "#" is not part of the name.
-          label: (h.querySelector("[data-heading-text]") ?? h).textContent?.trim() ?? "",
-          level: h.tagName === "H3" ? 3 : 2
-        }))
-      );
-    };
-    const raf = requestAnimationFrame(read);
-    const t = setTimeout(read, 80);
-    return () => {
-      cancelAnimationFrame(raf);
-      clearTimeout(t);
-    };
-  }, [selector, key]);
-  const activeId = useActiveHeading(items.map((i) => i.id));
-  return { items, activeId };
-}
-function OnThisPage({
-  items,
-  activeId,
-  title = "On this page",
-  onNavigate,
-  className
-}) {
-  const id = react.useId();
-  if (items.length === 0) return null;
-  return (
-    // With no visible title (a folded list under its own summary) the name is still "On this page".
-    /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-labelledby": title ? id : void 0, "aria-label": title ? void 0 : "On this page", className, children: [
-      title ? /* @__PURE__ */ jsxRuntime.jsx("p", { id, className: "mb-3 text-[0.875rem] font-medium", children: title }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((t) => {
-        const on = t.id === activeId;
-        return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: `#${t.id}`,
-            onClick: onNavigate,
-            "aria-current": on ? "location" : void 0,
-            className: cn(
-              "block border-l py-1.5 text-[0.875rem] leading-snug transition-colors",
-              t.level === 3 ? "pl-7" : "pl-4",
-              on ? "border-foreground text-foreground" : "border-border text-muted-foreground hover:text-foreground"
-            ),
-            children: t.label
-          }
-        ) }, t.id);
-      }) })
-    ] })
-  );
-}
-var CALLOUT_TONE = { note: "neutral", warning: "brand", danger: "danger" };
-function Callout({
-  tone = "note",
-  title,
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Notice,
-    {
-      tone: CALLOUT_TONE[tone],
-      title,
-      role: "note",
-      className: cn("my-6 [&_p]:my-0 [&_p]:text-[0.9375rem] [&_p]:leading-relaxed [&_p+p]:mt-3", className),
-      children
-    }
-  );
-}
-function Step({ title, id, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative pb-8 pl-11 last:pb-0 [counter-increment:oca-step]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        "aria-hidden": true,
-        className: "absolute left-0 top-0 flex size-7 items-center justify-center rounded-full border border-oca-hairline-strong bg-card text-[0.8125rem] oca-tabular text-foreground before:content-[counter(oca-step)]"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute bottom-1 left-[0.8125rem] top-9 w-px bg-border" }),
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { id, className: "scroll-mt-28 pt-0.5 text-[1.0625rem] font-medium leading-snug tracking-[-0.008em] text-foreground", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-muted-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children })
-  ] });
-}
-function Steps({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: cn("not-prose my-8 flex flex-col [counter-reset:oca-step] [&>li:last-child>span:nth-child(2)]:hidden", className), children });
-}
-function LinkCard({
-  href,
-  title,
-  description,
-  icon,
-  meta,
-  className
-}) {
-  const Arrow = isInternal(href) ? lucideReact.ArrowRight : lucideReact.ArrowUpRight;
+var typing = (el) => el instanceof HTMLElement && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName));
+var SearchButton = react.forwardRef(function SearchButton2({ label = "Search", onClick, className }, ref) {
+  const mac = useMacKeys();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    DocLink,
+    "button",
     {
-      href,
+      ref,
+      type: "button",
+      onClick,
+      "aria-keyshortcuts": mac ? "Meta+K" : "Control+K",
       className: cn(
-        "group flex h-full flex-col gap-3 rounded-[1.25rem] border border-border bg-card p-5 transition-colors hover:border-oca-hairline-strong",
+        "inline-flex size-10 items-center justify-center gap-2 rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        "md:h-10 md:w-56 md:justify-start md:border md:border-border md:bg-card md:pl-3.5 md:pr-2 md:hover:border-oca-hairline-strong md:hover:bg-card",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start justify-between gap-3", children: [
-          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-xl bg-muted text-foreground [&_svg]:size-[1.125rem]", children: icon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[1rem] font-medium leading-snug text-foreground", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
-            meta,
-            /* @__PURE__ */ jsxRuntime.jsx(Arrow, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" })
-          ] })
-        ] }),
-        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[1rem] font-medium leading-snug text-foreground", children: title }) : null,
-        description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9375rem] leading-relaxed text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { "aria-hidden": true, className: "size-[1.125rem] shrink-0 md:size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only flex-1 text-left text-[0.9375rem] md:not-sr-only", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(Kbd, { "aria-hidden": true, className: "hidden md:inline-flex", children: mac ? "\u2318K" : "Ctrl K" })
       ]
     }
   );
-}
-function CardGrid({ columns = 2, children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("not-prose my-6 grid grid-cols-1 gap-3 sm:grid-cols-2", columns === 3 && "lg:grid-cols-3", className), children });
-}
-function MdxTable({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose my-6 overflow-hidden rounded-2xl border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "table",
-    {
-      className: cn(
-        "w-full border-collapse text-left text-[0.875rem] leading-relaxed",
-        "[&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-oca-hairline-strong [&_th]:bg-oca-table-head [&_th]:px-4 [&_th]:py-2.5 [&_th]:text-[0.8125rem] [&_th]:font-medium [&_th]:text-foreground",
-        "[&_td]:border-t [&_td]:border-border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_td]:text-muted-foreground [&_tbody_tr:first-child_td]:border-t-0",
-        "[&_td_code]:bg-transparent [&_td_code]:p-0 [&_td_code]:text-foreground [&_td:first-child]:text-foreground",
-        "[&_[align=center]]:text-center [&_[align=right]]:text-right",
-        // On a phone a cell keeps a readable width; the table scrolls instead of crushing it.
-        "max-sm:[&_td]:min-w-[9rem]",
-        className
-      ),
-      ...props
-    }
-  ) }) });
-}
-function ApiTable({
-  rows,
-  caption,
-  nameHeader = "Name",
+});
+function SearchDialog({
+  onQuery,
+  open: openProp,
+  onOpenChange,
+  onSelect,
+  button = true,
+  hotkey = true,
+  label = "Search",
+  placeholder = "Search the docs",
+  idle,
+  defaultQuery = "",
+  debounceMs = 120,
   className
 }) {
-  const hasDefault = rows.some((r) => r.default !== void 0);
-  const marks = (r) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    r.required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.75rem] text-oca-accent-ink", children: "Required" }) : null,
-    r.deprecated ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "muted", children: "Deprecated" }) : null,
-    r.status ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: r.status }) : null
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("not-prose my-6", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-2xl border border-border bg-card max-sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-left text-[0.875rem]", children: [
-      caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-oca-hairline-strong bg-oca-table-head text-[0.8125rem]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: nameHeader }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Type" }),
-        hasDefault ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Default" }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Description" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: rows.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "align-top", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "row", className: "px-4 py-3 text-left font-normal", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-start gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn("font-mono text-[0.8125rem] text-foreground", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
-          marks(r)
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 font-mono text-[0.8125rem] text-muted-foreground", children: r.type ?? "\u2014" }),
-        hasDefault ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 font-mono text-[0.8125rem] text-muted-foreground", children: r.default ?? "\u2014" }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 leading-relaxed text-muted-foreground", children: r.description })
-      ] }, r.name)) })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-label": caption, className: "divide-y divide-border rounded-2xl border border-border bg-card sm:hidden", children: rows.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex flex-col gap-1.5 px-4 py-3.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn("font-mono text-[0.875rem] text-foreground", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
-        r.type ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: "break-all font-mono text-[0.8125rem] text-muted-foreground", children: r.type }) : null
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-wrap items-center gap-2 empty:hidden", children: marks(r) }),
-      r.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] leading-relaxed text-muted-foreground", children: r.description }) : null,
-      r.default !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[0.8125rem] text-muted-foreground", children: [
-        "Default ",
-        /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono text-foreground", children: r.default })
-      ] }) : null
-    ] }, r.name)) })
-  ] });
-}
-function useDarkMode() {
-  const [dark, setDark] = react.useState(false);
-  react.useEffect(() => {
-    const root = document.documentElement;
-    const read = () => setDark(root.classList.contains("dark"));
-    read();
-    const mo = new MutationObserver(read);
-    mo.observe(root, { attributes: true, attributeFilter: ["class"] });
-    return () => mo.disconnect();
-  }, []);
-  return dark;
-}
-function mermaidTheme(el) {
-  const css = getComputedStyle(el);
-  const v = (name) => css.getPropertyValue(name).trim();
-  const card = v("--card");
-  const muted = v("--muted");
-  const text = v("--foreground");
-  const subtle = v("--muted-foreground");
-  const line = v("--input");
-  const hair = v("--oca-hairline-strong");
-  return {
-    background: "transparent",
-    fontFamily: css.fontFamily,
-    fontSize: "14px",
-    textColor: text,
-    mainBkg: card,
-    primaryColor: card,
-    primaryTextColor: text,
-    primaryBorderColor: hair,
-    secondaryColor: muted,
-    secondaryTextColor: text,
-    secondaryBorderColor: hair,
-    tertiaryColor: muted,
-    tertiaryTextColor: text,
-    tertiaryBorderColor: hair,
-    nodeBorder: hair,
-    lineColor: line,
-    edgeLabelBackground: card,
-    clusterBkg: muted,
-    clusterBorder: hair,
-    titleColor: text,
-    noteBkgColor: muted,
-    noteTextColor: text,
-    noteBorderColor: hair,
-    actorBkg: card,
-    actorBorder: hair,
-    actorTextColor: text,
-    actorLineColor: line,
-    signalColor: text,
-    signalTextColor: text,
-    labelBoxBkgColor: card,
-    labelBoxBorderColor: hair,
-    labelTextColor: text,
-    loopTextColor: subtle,
-    activationBkgColor: muted,
-    activationBorderColor: hair,
-    sequenceNumberColor: card
-  };
-}
-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;?/, "");
-}
-function Diagram({ chart, caption, load, className }) {
-  const ref = react.useRef(null);
-  const dark = useDarkMode();
-  const raw = react.useId();
-  const [svg, setSvg] = react.useState(null);
-  const [failed, setFailed] = react.useState(false);
-  react.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__ */ jsxRuntime.jsx(CodeBlock, { code: chart, caption: "Diagram (shown as its source)", className: cn("my-6", className) });
-  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { ref, className: cn("not-prose my-6 overflow-hidden rounded-[1.25rem] border border-border bg-card", className), children: [
-    svg ? /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        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 }
-      }
-    ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-label": "Drawing the diagram", className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-40 w-full rounded-xl" }) }),
-    caption ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Tag, { id, className: cn("group scroll-mt-28", HEADING[Tag], className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-heading-text": "", children }),
-    id && Tag !== "h1" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "#" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Link to this section" })
-        ]
-      }
-    ) : null
-  ] });
-}
-function codeText(node) {
-  if (typeof node === "string") return node;
-  if (typeof node === "number") return String(node);
-  if (Array.isArray(node)) return node.map(codeText).join("");
-  if (react.isValidElement(node)) return codeText(node.props.children);
-  return "";
-}
-function codeLang(node) {
-  const child = react.Children.toArray(node)[0];
-  if (!react.isValidElement(child)) return void 0;
-  const cls = child.props.className ?? "";
-  return cls.match(/language-([\w+-]+)/)?.[1];
-}
-function useMacKeys() {
-  const [mac, setMac] = react.useState(true);
-  react.useEffect(() => {
-    setMac(/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent));
-  }, []);
-  return mac;
-}
-var typing = (el) => el instanceof HTMLElement && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName));
-var SearchButton = react.forwardRef(function SearchButton2({ label = "Search", onClick, className }, ref) {
-  const mac = useMacKeys();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      ref,
-      type: "button",
-      onClick,
-      "aria-keyshortcuts": mac ? "Meta+K" : "Control+K",
-      className: cn(
-        "inline-flex size-10 items-center justify-center gap-2 rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-        "md:h-10 md:w-56 md:justify-start md:border md:border-border md:bg-card md:pl-3.5 md:pr-2 md:hover:border-oca-hairline-strong md:hover:bg-card",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { "aria-hidden": true, className: "size-[1.125rem] shrink-0 md:size-4" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only flex-1 text-left text-[0.9375rem] md:not-sr-only", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(Kbd, { "aria-hidden": true, className: "hidden md:inline-flex", children: mac ? "\u2318K" : "Ctrl K" })
-      ]
-    }
-  );
-});
-function SearchDialog({
-  onQuery,
-  open: openProp,
-  onOpenChange,
-  onSelect,
-  button = true,
-  hotkey = true,
-  label = "Search",
-  placeholder = "Search the docs",
-  idle,
-  defaultQuery = "",
-  debounceMs = 120,
-  className
-}) {
-  const [own, setOwn] = react.useState(false);
-  const open = openProp ?? own;
-  const setOpen = (v) => {
-    if (openProp === void 0) setOwn(v);
-    onOpenChange?.(v);
-  };
-  const [query, setQuery] = react.useState(defaultQuery);
-  const [groups, setGroups] = react.useState([]);
-  const [state, setState] = react.useState("idle");
-  const [active, setActive] = react.useState(0);
-  const listId = react.useId();
-  const listRef = react.useRef(null);
-  const buttonRef = react.useRef(null);
-  const returnTo = react.useRef(null);
-  const flat = react.useMemo(() => groups.flatMap((g) => g.results), [groups]);
-  const latest = react.useRef({ open, setOpen, onQuery });
-  latest.current = { open, setOpen, onQuery };
+  const [own, setOwn] = react.useState(false);
+  const open = openProp ?? own;
+  const setOpen = (v) => {
+    if (openProp === void 0) setOwn(v);
+    onOpenChange?.(v);
+  };
+  const [query, setQuery] = react.useState(defaultQuery);
+  const [groups, setGroups] = react.useState([]);
+  const [state, setState] = react.useState("idle");
+  const [active, setActive] = react.useState(0);
+  const listId = react.useId();
+  const listRef = react.useRef(null);
+  const buttonRef = react.useRef(null);
+  const returnTo = react.useRef(null);
+  const flat = react.useMemo(() => groups.flatMap((g) => g.results), [groups]);
+  const latest = react.useRef({ open, setOpen, onQuery });
+  latest.current = { open, setOpen, onQuery };
   react.useEffect(() => {
     if (!hotkey) return;
     const onKey = (e) => {
@@ -5327,7 +5410,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__ */ jsxRuntime.jsxs("header", { className: cn("flex items-start gap-3.5", tight ? "px-5 pt-5" : "px-6 pt-6"), children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "span",
             {
@@ -5354,7 +5437,7 @@ function FormSection({
             ] }),
             hint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: hint }) : null
           ] }),
-          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action }) : null
+          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("shrink-0 max-sm:basis-full", n !== void 0 && "max-sm:pl-[2.625rem]"), children: action }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.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 })
       ]
@@ -5584,27 +5667,30 @@ function FilterChips({
       onChange(cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v]);
     } else onChange(v);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--background)", className: cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "oca-tabular", children: o.count.toLocaleString("en-US") }) : null
+          ]
+        },
+        o.value
+      );
+    }) })
+  );
 }
 function ToolGrid({
   tools,
@@ -5643,7 +5729,7 @@ function ToolGrid({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Heading, { className: "oca-title-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Link8__default.default,
+                Link6__default.default,
                 {
                   href: t.href,
                   className: "outline-none after:absolute after:inset-0 after:rounded-[1.25rem] after:content-['']",
@@ -5736,800 +5822,829 @@ function FamilyMenu({ current: current2, className }) {
     )
   ] });
 }
-function NavLink({
-  item,
-  className,
-  onNavigate,
-  line = false
-}) {
-  const cls = cn(
-    "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
-    item.active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
-    line && "relative after:absolute after:inset-x-3 after:-bottom-[0.625rem] after:h-0.5 after:rounded-full",
-    line && item.active && "after:bg-foreground",
-    className
-  );
-  if (item.external) {
-    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Link8__default.default, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
-}
-function NavRow({ item, onNavigate }) {
-  const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9375rem] font-medium leading-6 text-foreground", children: item.label }),
-    item.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: item.description }) : null
-  ] });
-  const cls = cn(
-    "flex flex-col gap-0.5 rounded-xl px-3 py-2 transition-colors hover:bg-accent",
-    item.active && "bg-muted hover:bg-muted dark:bg-white/[0.06]"
-  );
-  return item.external ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: body }) : /* @__PURE__ */ jsxRuntime.jsx(Link8__default.default, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: body });
-}
-var seeAll = (item) => typeof item.label === "string" ? `All ${item.label.toLowerCase()}` : "See all";
-function NavDropdown({ item }) {
-  const [open, setOpen] = react.useState(false);
-  const active = item.active || item.children?.some((c) => c.active);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      PopoverTrigger,
+function SideNav({ groups, onNavigate }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Pages", className: "flex flex-col gap-5", children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    g.label ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: g.label }) : null,
+    g.items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Link6__default.default,
       {
+        href: it.href,
+        onClick: onNavigate,
+        "aria-current": it.active ? "page" : void 0,
         className: cn(
-          "group inline-flex items-center gap-1 rounded-full py-2 pl-3 pr-2.5 text-[0.9375rem] transition-colors md:max-lg:pl-2.5 md:max-lg:pr-2",
-          active ? "text-foreground" : "text-muted-foreground hover:text-foreground data-[state=open]:text-foreground"
+          "flex h-9 items-center gap-3 rounded-xl px-3 text-[0.9375rem] transition-colors",
+          "[&_svg]:size-[1.0625rem] [&_svg]:shrink-0",
+          it.active ? "bg-card text-foreground shadow-sm ring-1 ring-border [&_svg]:text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"
         ),
         children: [
-          item.label,
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180" })
+          it.icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: it.label }),
+          it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: it.badge }) : null
         ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "center", sideOffset: 10, className: "w-[min(calc(100vw-2rem),26rem)] p-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col", children: item.children?.map((c) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(NavRow, { item: c, onNavigate: () => setOpen(false) }) }, c.href)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 border-t border-border px-1 pt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
-        NavLink,
-        {
-          item: { ...item, label: seeAll(item), children: void 0 },
-          className: "block rounded-xl px-2 py-2 text-[0.875rem]",
-          onNavigate: () => setOpen(false)
-        }
-      ) })
-    ] })
-  ] });
+      },
+      it.href
+    ))
+  ] }, g.label ?? gi)) });
 }
-function SiteHeader({
-  home = "/",
-  brand,
-  product,
-  family,
-  nav = [],
-  search,
-  actions,
-  variant = "site",
-  navOnPhone = true,
-  menu: menuExtra,
-  className
+function SectionSwitch({
+  sections,
+  current: current2,
+  onNavigate
 }) {
-  const [open, setOpen] = react.useState(false);
-  const tool = variant === "tool";
-  const size = tool ? 24 : 28;
-  const current2 = typeof family === "string" ? family : void 0;
-  const phoneNav = navOnPhone ? nav : [];
-  const menu = phoneNav.length > 0 || Boolean(family) || Boolean(menuExtra);
-  const brandNode = brand ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size }),
-    product ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "mx-3 h-5 w-px bg-oca-hairline-strong" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tracking-[-0.01em]", style: { fontSize: size * 0.56 }, children: product })
-    ] }) : null
-  ] });
-  const navigation = nav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map(
-    (n) => n.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(NavDropdown, { item: n }, n.href) : (
-      // Between md and lg the family menu and the actions share the row: tighter.
-      /* @__PURE__ */ jsxRuntime.jsx(NavLink, { item: n, line: tool, className: tool ? void 0 : "md:max-lg:px-2.5" }, n.href)
-    )
-  ) }) : null;
+  const cols = sections.length <= 3 ? sections.length : 2;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "header",
+    "nav",
     {
-      className: cn(
-        "sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/90",
-        tool ? "border-border" : "border-transparent",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "aria-label": "Sections",
+      className: cn("grid gap-1 bg-muted p-1", cols === sections.length ? "rounded-full" : "rounded-[1.25rem]"),
+      style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
+      children: sections.map((sec) => {
+        const on = sec.id === current2.id;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Link6__default.default,
+          {
+            href: sec.href,
+            onClick: onNavigate,
+            "aria-current": on ? "true" : void 0,
+            className: cn(
+              "flex h-8 min-w-0 items-center justify-center rounded-full px-1.5 text-[0.8125rem] font-medium transition-colors",
+              on ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: sec.label })
+          },
+          sec.id
+        );
+      })
+    }
+  );
+}
+function TabBar({ items }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "aria-label": "Pages",
+      "data-oca-tabbar": "",
+      className: "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md md:hidden",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(
-            "flex items-center justify-between gap-4",
-            tool ? "h-14 px-4 md:px-6" : "oca-container h-16 md:h-[4.5rem] md:max-lg:gap-2",
-            // Three columns, the outer two each at least their content: the
-            // navigation stays centred whatever the actions hold, so it does
-            // not shift when they change (signed out to signed in).
-            !tool && nav.length > 0 && "md:grid md:grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]"
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 items-center gap-1", tool ? "md:gap-1" : "justify-self-start"), children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Link8__default.default, { href: home, className: "-ml-1 min-w-0 rounded-lg p-1", children: [
-                brandNode,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " home" })
-              ] }),
-              family ? /* @__PURE__ */ jsxRuntime.jsx(FamilyMenu, { current: current2, className: "max-md:hidden" }) : null,
-              tool && navigation ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-5", children: navigation }) : null
-            ] }),
-            !tool ? navigation : null,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 justify-self-end", children: [
-              search,
-              actions,
-              menu ? /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SheetTrigger,
+          className: "mx-auto grid h-14 max-w-[32rem] px-1.5",
+          style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
+          children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
+            Link6__default.default,
+            {
+              href: it.href,
+              "aria-current": it.active ? "page" : void 0,
+              className: cn(
+                "flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
                   {
-                    className: "inline-flex size-10 items-center justify-center rounded-full text-foreground hover:bg-accent md:hidden",
-                    "aria-label": "Open menu",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
+                    className: cn(
+                      "relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
+                      "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
+                      it.active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
+                    ),
+                    children: [
+                      it.icon,
+                      it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute right-2.5 top-0.5 size-2 rounded-full bg-oca-orange ring-2 ring-background" }) : null
+                    ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "pt-16", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
-                  menuExtra ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", (phoneNav.length > 0 || family) && "border-b border-border pb-3"), children: menuExtra }) : null,
-                  phoneNav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: phoneNav.map(
-                    (n) => n.children?.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col py-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: n.label }),
-                      n.children.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
-                        NavLink,
-                        {
-                          item: c,
-                          className: "rounded-xl px-3 py-2.5 text-[1.0625rem]",
-                          onNavigate: () => setOpen(false)
-                        },
-                        c.href
-                      ))
-                    ] }, n.href) : /* @__PURE__ */ jsxRuntime.jsx(
-                      NavLink,
-                      {
-                        item: n,
-                        className: "rounded-xl px-3 py-3 text-[1.0625rem]",
-                        onNavigate: () => setOpen(false)
-                      },
-                      n.href
-                    )
-                  ) }) : null,
-                  family ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cn("group", phoneNav.length > 0 && "mt-2 border-t border-border pt-4"), children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between rounded-xl px-3 py-2.5 text-[1.0625rem] [&::-webkit-details-marker]:hidden", children: [
-                      "All orangecheck sites",
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(FamilyList, { current: current2, onNavigate: () => setOpen(false), stack: true, className: "mt-2" })
-                  ] }) : null
-                ] })
-              ] }) : null
-            ] })
-          ]
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate px-0.5", children: it.label }),
+                it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: it.badge }) : null
+              ]
+            },
+            it.href
+          ))
         }
       )
     }
   );
 }
-function SkipLink({ href = "#main-content", children = "Skip to content" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "a",
-    {
-      href,
-      className: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-3 focus:z-50 focus:rounded-full focus:border focus:border-border focus:bg-card focus:px-4 focus:py-2 focus:text-[0.9375rem] focus:font-medium focus:text-foreground focus:shadow-md",
-      children
+function tabsFor(groups) {
+  const items = groups.flatMap((g) => g.items);
+  return items.length >= 2 && items.length <= 5 && items.every((it) => it.icon) ? items : null;
+}
+var activeItem = (groups) => groups.flatMap((g) => g.items).find((it) => it.active);
+var warned = /* @__PURE__ */ new Set();
+function warnDuplicateLabels(groups) {
+  if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  const seen = /* @__PURE__ */ new Set();
+  for (const it of groups.flatMap((g) => g.items)) {
+    if (seen.has(it.label) && !warned.has(it.label)) {
+      warned.add(it.label);
+      console.warn(`AppShell: two pages are labelled "${it.label}"; give each its own name.`);
     }
-  );
+    seen.add(it.label);
+  }
 }
-var BANNER_TONE = {
-  neutral: "border-border bg-muted",
-  brand: "border-[color-mix(in_oklab,var(--oca-orange)_30%,var(--border))] bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--background))]",
-  danger: "border-[color-mix(in_oklab,var(--destructive)_35%,var(--border))] bg-[color-mix(in_oklab,var(--destructive)_8%,var(--background))]"
-};
-function SiteBanner({
-  tone = "neutral",
+function AppShell({
+  nav,
+  sections,
+  activeSection,
+  page: pageOverride,
+  persistent = [],
+  home = "/",
+  family,
+  account,
+  banner,
+  footer,
   children,
-  action,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "data-tone": tone, className: cn("border-b text-[0.875rem]", BANNER_TONE[tone], className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oca-container flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-2.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex min-w-0 items-baseline gap-2.5 leading-snug", children: [
-      tone !== "neutral" ? /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn(
-            "size-2 shrink-0 translate-y-[-0.05em] rounded-full",
-            tone === "brand" ? "bg-oca-orange" : "bg-destructive"
-          )
-        }
-      ) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children })
-    ] }),
-    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("shrink-0 font-medium", tone !== "neutral" && "max-sm:pl-[1.125rem]"), children: action }) : null
-  ] }) });
-}
-var FOOT_LINK = "inline-flex min-h-11 items-center transition-colors hover:text-foreground md:min-h-0";
-function LegalRow({ links }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Legal", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-x-5", children: links.map((l) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: l.href.startsWith("/") ? /* @__PURE__ */ jsxRuntime.jsx(Link8__default.default, { href: l.href, className: FOOT_LINK, children: l.label }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: l.href, className: FOOT_LINK, children: l.label }) }, l.href)) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-      "\xA9 ",
-      (/* @__PURE__ */ new Date()).getFullYear(),
-      " OrangeCheck"
-    ] })
-  ] });
-}
-function SiteFooter({
-  columns = [],
-  family = false,
-  legal = false,
-  compact = false,
-  fineprint,
-  meta,
-  signature = true,
   className
 }) {
-  const legalLinks = legal === true ? LEGAL_LINKS : legal || null;
-  if (compact) {
-    return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("border-t border-border bg-background text-[0.875rem] text-muted-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oca-container flex flex-col gap-x-8 gap-y-3 py-5 lg:flex-row lg:items-center lg:justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: OCHK_IO, className: "rounded-lg text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 22 }) }),
-        family ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Protocols", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-x-4", children: PROTOCOLS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: p.pageHref, className: FOOT_LINK, children: p.label }) }, p.slug)) }) }) : null
-      ] }),
-      legalLinks || meta ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
-        legalLinks ? /* @__PURE__ */ jsxRuntime.jsx(LegalRow, { links: legalLinks }) : null,
-        meta
-      ] }) : null
-    ] }) });
-  }
-  const cols = [
-    ...columns,
-    ...family ? familyByGroup().map((g) => ({
-      // The lockup above already says orangecheck.
-      heading: g.id === "orangecheck" ? "Start here" : g.label,
-      links: g.sites.map((s) => ({ href: s.href, label: s.label, external: true }))
-    })) : []
-  ];
-  const n = cols.length;
-  const inline = n <= 5;
-  const grid = {
-    "--oca-footer-md": `repeat(${Math.max(1, Math.min(n, 4))}, minmax(0, 1fr))`,
-    "--oca-footer-lg": inline ? `minmax(0, 1.3fr) repeat(${Math.max(1, n)}, minmax(0, 1fr))` : `repeat(${Math.min(n, 6)}, minmax(0, 1fr))`
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: cn("border-t border-border bg-background", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: grid,
-        className: "oca-container grid grid-cols-2 gap-x-6 gap-y-10 py-14 md:grid-cols-[var(--oca-footer-md)] md:py-16 lg:grid-cols-[var(--oca-footer-lg)]",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("col-span-full flex flex-col gap-4", inline && "lg:col-span-1"), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }),
-            fineprint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs text-[0.9375rem] leading-relaxed text-muted-foreground", children: fineprint }) : null
-          ] }),
-          cols.map((col, i) => {
-            const spans = n % 2 === 1 && i === n - 1;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn("flex min-w-0 flex-col gap-1", spans && "col-span-2 md:col-span-1"),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[0.875rem] font-medium", children: col.heading }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-1", spans && "grid grid-cols-2 gap-x-6 md:flex md:flex-col"), children: col.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
-                    NavLink,
-                    {
-                      item: l,
-                      className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
-                    },
-                    l.href
-                  )) })
-                ]
-              },
-              col.heading
-            );
-          })
-        ]
-      }
-    ),
-    signature ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "oca-container select-none overflow-hidden pb-8 md:pb-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-[0.18em] text-[clamp(3rem,11.5vw,10rem)] leading-[0.78] tracking-[-0.065em] [font-family:var(--oc-font-display)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-[0.06em] inline-block w-[1.1em] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Mark, { className: "block h-auto w-full" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "orangecheck" })
-    ] }) }) : null,
-    legalLinks || meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 border-t border-border py-6 text-[0.875rem] text-muted-foreground", children: [
-      legalLinks ? /* @__PURE__ */ jsxRuntime.jsx(LegalRow, { links: legalLinks }) : null,
-      meta
-    ] }) }) : null
-  ] });
-}
-function SignInFrame({
-  title = "Sign in",
-  lead,
-  children,
-  error,
-  fineprint,
-  brand,
-  home = "/",
-  back,
-  art,
-  caption,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "main",
+  const [open, setOpen] = react.useState(false);
+  const current2 = sections && sections.length > 0 ? sections.find((sec) => sec.id === activeSection) ?? sections.find((sec) => activeItem(sec.groups)) ?? sections[0] : void 0;
+  const groups = current2 ? [...current2.groups, ...persistent] : [...nav ?? [], ...persistent];
+  warnDuplicateLabels(groups);
+  const tabs = current2 ? null : tabsFor(groups);
+  const page = activeItem(groups);
+  const place = react.useMemo(
+    () => ({
+      section: current2 ? current2.title ?? current2.label : void 0,
+      page: pageOverride ?? page?.label
+    }),
+    [current2, page?.label, pageOverride]
+  );
+  const familyMenu = family ? /* @__PURE__ */ jsxRuntime.jsx(FamilyMenu, { current: typeof family === "string" ? family : void 0 }) : null;
+  const switcher = sections && current2 && sections.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(SectionSwitch, { sections, current: current2, onNavigate: () => setOpen(false) }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      id: "main-content",
-      className: cn("grid min-h-dvh grid-cols-1 bg-background text-foreground lg:grid-cols-2", className),
+      className: cn(
+        "min-h-dvh bg-background",
+        tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]",
+        className
+      ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col px-4 pb-8 pt-5 sm:px-8 lg:px-14 lg:pt-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Link8__default.default, { href: home, className: "w-fit rounded-lg", children: [
-              brand ?? /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 28 }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " home" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-md lg:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-14 items-center gap-2 px-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SheetTrigger,
+                {
+                  className: cn(
+                    "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
+                    // The tab bar holds every page; the sheet is left for a footer.
+                    tabs && !footer && "max-md:hidden"
+                  ),
+                  "aria-label": "Open navigation",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "flex flex-col gap-6 overflow-y-auto p-4 pt-16", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
+                switcher,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabs ? "max-md:hidden" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups, onNavigate: () => setOpen(false) }) }),
+                footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
+              ] })
             ] }),
-            back === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-              Link8__default.default,
-              {
-                href: home,
-                className: "text-[0.9375rem] text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
-                children: "Back to home"
-              }
-            ) : back
+            /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 22 }) }),
+            familyMenu,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: account })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-[25rem] flex-1 flex-col justify-center gap-9 py-12", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "oca-display-2", children: title }),
-              lead ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-lead", children: lead }) : null
+          place.page ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]",
+                // The active tab already names the page.
+                tabs && !pageOverride && "max-md:hidden"
+              ),
+              children: [
+                place.section ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" })
+                ] }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: place.page })
+              ]
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "sticky top-0 hidden h-dvh w-[17rem] shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }) }),
+              familyMenu
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
-            error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-[0.9375rem] text-destructive", children: error }) : null,
-            fineprint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.8125rem] leading-relaxed text-muted-foreground", children: fineprint }) : null
+            switcher,
+            /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden h-[4.5rem] items-center justify-end gap-3 px-8 lg:flex", children: account }),
+            banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-2 pt-4 md:px-8 lg:pt-0", children: banner }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "aside",
-          {
-            "aria-hidden": true,
-            className: "relative hidden flex-col justify-between gap-10 overflow-hidden border-l border-[var(--oca-band-line)] bg-oca-ink p-14 text-oca-ink-foreground lg:flex",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center", children: art ?? /* @__PURE__ */ jsxRuntime.jsx(IsoCheck, { size: 340, settle: true, tilt: true, className: "max-w-full" }) }),
-              caption ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-w-[24rem] flex-col gap-3", children: caption }) : null
-            ]
-          }
-        )
+        tabs ? /* @__PURE__ */ jsxRuntime.jsx(TabBar, { items: tabs }) : null
       ]
     }
-  );
-}
-var STATUS_WORDS = /* @__PURE__ */ new Set(["live", "testing", "not-yet", "paused", "good", "caution", "refused"]);
-var pathOf = (href) => href.split(/[?#]/)[0].replace(/(.)\/$/, "$1");
-function DocsNav({
-  sections,
-  current: current2,
-  onNavigate,
-  className
-}) {
-  const here = pathOf(current2);
-  const activeSection = react.useMemo(
-    () => sections.findIndex((s) => s.items.some((i) => pathOf(i.href) === here)),
-    [sections, here]
-  );
-  const [peeked, setPeeked] = react.useState(() => /* @__PURE__ */ new Set());
-  react.useEffect(() => setPeeked(/* @__PURE__ */ new Set()), [activeSection]);
-  const activeRef = react.useRef(null);
-  react.useEffect(() => {
-    const id = requestAnimationFrame(() => activeRef.current?.scrollIntoView({ block: "nearest" }));
-    return () => cancelAnimationFrame(id);
-  }, [here]);
-  const base = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Docs", className: cn("flex flex-col gap-0.5", className), children: sections.map((section, si) => {
-    const isActive = si === activeSection;
-    const open = isActive || peeked.has(si);
-    const panel = `${base}-s${si}`;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          "aria-expanded": open,
-          "aria-controls": panel,
-          onClick: () => {
-            if (isActive) return;
-            setPeeked((p) => {
-              const n = new Set(p);
-              if (n.has(si)) n.delete(si);
-              else n.add(si);
-              return n;
-            });
-          },
-          className: cn(
-            "flex min-h-9 w-full items-center justify-between gap-2 rounded-lg px-2.5 py-1.5 text-left text-[0.875rem] transition-colors",
-            isActive ? "font-medium text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground",
-            isActive && "cursor-default"
-          ),
-          children: [
-            section.label,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronRight,
-              {
-                "aria-hidden": true,
-                className: cn("size-3.5 shrink-0 text-oca-subtle transition-transform duration-200", open && "rotate-90")
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { id: panel, hidden: !open, className: "mb-2 ml-2.5 mt-0.5 border-l border-border", children: section.items.map((item) => {
-        const on = pathOf(item.href) === here;
-        const badge = typeof item.badge === "string" && STATUS_WORDS.has(item.badge) ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: item.badge }) : item.badge ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "muted", children: item.badge }) : null;
-        return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Link8__default.default,
-          {
-            href: item.href,
-            ref: on ? activeRef : void 0,
-            onClick: onNavigate,
-            "aria-current": on ? "page" : void 0,
-            className: cn(
-              "-ml-px flex min-h-9 items-center gap-2 border-l-2 py-1.5 pl-3.5 pr-2 text-[0.875rem] leading-snug transition-colors",
-              on ? "border-foreground font-medium text-foreground" : "border-transparent text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: item.label }),
-              badge
-            ]
-          }
-        ) }, item.href);
-      }) })
-    ] }, section.label);
-  }) });
+  ) });
 }
-var DOCS_HEADER_NAV = OCHK_IO_NAV.map((n) => n.href === DOCS_HREF ? { ...n, active: true } : n);
-function DocsShell({
-  nav,
-  current: current2,
-  header,
-  search,
-  actions,
-  breadcrumbs,
-  toc,
-  pager,
-  footer,
-  children
+function AccountMenu({
+  name,
+  detail,
+  items,
+  nameFrom = "sm"
 }) {
-  const [menu, setMenu] = react.useState(false);
-  react.useEffect(() => setMenu(false), [current2]);
-  const read = useHeadings("#docs-content", current2);
-  const items = toc ?? read.items;
-  const activeId = toc ? void 0 : read.activeId;
-  const here = pathOf(current2);
-  const place = react.useMemo(() => {
-    for (const s of nav) {
-      const it = s.items.find((i) => pathOf(i.href) === here);
-      if (it) return { section: s.label, page: it.label };
-    }
-    return null;
-  }, [nav, here]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-dvh flex-col bg-background", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SkipLink, {}),
-    header ?? /* @__PURE__ */ jsxRuntime.jsx(SiteHeader, { home: OCHK_IO, family: "docs", nav: DOCS_HEADER_NAV, search, actions }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-16 z-30 border-b border-border bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/90 md:top-[4.5rem] lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container flex h-12 items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: menu, onOpenChange: setMenu, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(SheetTrigger, { className: "-ml-2 inline-flex h-10 min-w-0 items-center gap-2 rounded-full px-2.5 text-[0.875rem] hover:bg-accent", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { "aria-hidden": true, className: "size-[1.125rem] shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Docs menu. " }),
-        place ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-oca-subtle" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: place.page })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Docs" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "w-[min(88vw,22rem)] gap-0 p-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-5 py-4 pr-14", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "text-[1.0625rem] font-medium", children: "Docs" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto p-3", children: /* @__PURE__ */ jsxRuntime.jsx(DocsNav, { sections: nav, current: current2, onNavigate: () => setMenu(false) }) })
-      ] })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:grid lg:grid-cols-[13.5rem_minmax(0,1fr)] lg:gap-x-10 xl:grid-cols-[13.5rem_minmax(0,1fr)_11rem]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-[4.5rem] hidden max-h-[calc(100dvh-4.5rem)] self-start overflow-y-auto overscroll-contain py-8 pr-1 lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(DocsNav, { sections: nav, current: current2 }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("main", { id: "main-content", className: "min-w-0 pb-16 pt-6 md:pt-8", children: [
-        breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 max-lg:hidden", children: breadcrumbs }) : null,
-        items.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group mb-8 rounded-2xl border border-border bg-card xl:hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-[0.9375rem] font-medium [&::-webkit-details-marker]:hidden", children: [
-            "On this page",
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(OnThisPage, { items, activeId, title: null, className: "px-4 pb-4" })
-        ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("article", { id: "docs-content", className: "max-w-[46rem]", children }),
-        pager ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-16 max-w-[46rem]", children: pager }) : null
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-[4.5rem] hidden max-h-[calc(100dvh-4.5rem)] self-start overflow-y-auto py-10 xl:block", children: items.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(OnThisPage, { items, activeId }) : null })
-    ] }) }),
-    footer ?? /* @__PURE__ */ jsxRuntime.jsx(SiteFooter, { columns: OCHK_IO_FOOTER, family: true, legal: true, signature: false })
-  ] });
-}
-function SideNav({ groups, onNavigate }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Pages", className: "flex flex-col gap-5", children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
-    g.label ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: g.label }) : null,
-    g.items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Link8__default.default,
+  const initial = name.trim().charAt(0).toUpperCase() || "\xB7";
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenuTrigger,
       {
-        href: it.href,
-        onClick: onNavigate,
-        "aria-current": it.active ? "page" : void 0,
         className: cn(
-          "flex h-9 items-center gap-3 rounded-xl px-3 text-[0.9375rem] transition-colors",
-          "[&_svg]:size-[1.0625rem] [&_svg]:shrink-0",
-          it.active ? "bg-card text-foreground shadow-sm ring-1 ring-border [&_svg]:text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+          "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-1 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring",
+          nameFrom === "lg" ? "lg:pr-3.5" : "sm:pr-3.5"
         ),
+        "aria-label": `${name}, account menu`,
         children: [
-          it.icon,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: it.label }),
-          it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: it.badge }) : null
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-initial": initial,
+              className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background before:content-[attr(data-initial)]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("max-w-[10rem] truncate", nameFrom === "lg" ? "max-lg:hidden" : "max-sm:hidden"), children: name })
         ]
-      },
-      it.href
-    ))
-  ] }, g.label ?? gi)) });
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuLabel, { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.9375rem] font-medium text-foreground", children: name }),
+        detail ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-mono text-[0.75rem]", children: detail }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+      items.map(
+        (it, i) => it === "separator" ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}, `sep-${i}`) : it.href ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, destructive: it.destructive, children: /* @__PURE__ */ jsxRuntime.jsxs(Link6__default.default, { href: it.href, children: [
+          it.icon,
+          it.label
+        ] }) }, it.label) : /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onSelect: it.onSelect, destructive: it.destructive, children: [
+          it.icon,
+          it.label
+        ] }, it.label)
+      )
+    ] })
+  ] });
 }
-function SectionSwitch({
-  sections,
-  current: current2,
-  onNavigate
-}) {
-  const cols = sections.length <= 3 ? sections.length : 2;
+function ThemeToggle({ className }) {
+  const { theme, setTheme } = nextThemes.useTheme();
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => setMounted(true), []);
+  const current2 = mounted ? theme ?? "system" : "system";
+  const next = current2 === "light" ? "dark" : current2 === "dark" ? "system" : "light";
+  const Icon2 = current2 === "light" ? lucideReact.Sun : current2 === "dark" ? lucideReact.Moon : lucideReact.SunMoon;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "nav",
+    "button",
     {
-      "aria-label": "Sections",
-      className: cn("grid gap-1 bg-muted p-1", cols === sections.length ? "rounded-full" : "rounded-[1.25rem]"),
-      style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
-      children: sections.map((sec) => {
-        const on = sec.id === current2.id;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Link8__default.default,
-          {
-            href: sec.href,
-            onClick: onNavigate,
-            "aria-current": on ? "true" : void 0,
-            className: cn(
-              "flex h-8 min-w-0 items-center justify-center rounded-full px-1.5 text-[0.8125rem] font-medium transition-colors",
-              on ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: sec.label })
-          },
-          sec.id
-        );
-      })
+      type: "button",
+      onClick: () => setTheme(next),
+      "aria-label": `Theme: ${current2}. Switch to ${next}`,
+      title: `Theme: ${current2}`,
+      className: cn(
+        "inline-flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-[1.125rem]" })
     }
   );
 }
-function TabBar({ items }) {
+function NavLink({
+  item,
+  className,
+  onNavigate,
+  line = false
+}) {
+  const cls = cn(
+    "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
+    item.active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+    line && "relative after:absolute after:inset-x-3 after:-bottom-[0.625rem] after:h-0.5 after:rounded-full",
+    line && item.active && "after:bg-foreground",
+    className
+  );
+  if (item.external) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
+}
+function NavRow({ item, onNavigate }) {
+  const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9375rem] font-medium leading-6 text-foreground", children: item.label }),
+    item.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: item.description }) : null
+  ] });
+  const cls = cn(
+    "flex flex-col gap-0.5 rounded-xl px-3 py-2 transition-colors hover:bg-accent",
+    item.active && "bg-muted hover:bg-muted dark:bg-white/[0.06]"
+  );
+  return item.external ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: body }) : /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: body });
+}
+var seeAll = (item) => typeof item.label === "string" ? `All ${item.label.toLowerCase()}` : "See all";
+function NavDropdown({ item }) {
+  const [open, setOpen] = react.useState(false);
+  const active = item.active || item.children?.some((c) => c.active);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverTrigger,
+      {
+        className: cn(
+          "group inline-flex items-center gap-1 rounded-full py-2 pl-3 pr-2.5 text-[0.9375rem] transition-colors md:max-lg:pl-2.5 md:max-lg:pr-2",
+          active ? "text-foreground" : "text-muted-foreground hover:text-foreground data-[state=open]:text-foreground"
+        ),
+        children: [
+          item.label,
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "center", sideOffset: 10, className: "w-[min(calc(100vw-2rem),26rem)] p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col", children: item.children?.map((c) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(NavRow, { item: c, onNavigate: () => setOpen(false) }) }, c.href)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 border-t border-border px-1 pt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+        NavLink,
+        {
+          item: { ...item, label: seeAll(item), children: void 0 },
+          className: "block rounded-xl px-2 py-2 text-[0.875rem]",
+          onNavigate: () => setOpen(false)
+        }
+      ) })
+    ] })
+  ] });
+}
+function SiteHeader({
+  home = "/",
+  brand,
+  product,
+  family,
+  nav = [],
+  search,
+  actions,
+  variant = "site",
+  navOnPhone = true,
+  menu: menuExtra,
+  className
+}) {
+  const [open, setOpen] = react.useState(false);
+  const tool = variant === "tool";
+  const size = tool ? 24 : 28;
+  const current2 = typeof family === "string" ? family : void 0;
+  const phoneNav = navOnPhone ? nav : [];
+  const menu = phoneNav.length > 0 || Boolean(family) || Boolean(menuExtra);
+  const brandNode = brand ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size }),
+    product ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "mx-3 h-5 w-px bg-oca-hairline-strong" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tracking-[-0.01em]", style: { fontSize: size * 0.56 }, children: product })
+    ] }) : null
+  ] });
+  const navigation = nav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map(
+    (n) => n.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(NavDropdown, { item: n }, n.href) : (
+      // Between md and lg the family menu and the actions share the row: tighter.
+      /* @__PURE__ */ jsxRuntime.jsx(NavLink, { item: n, line: tool, className: tool ? void 0 : "md:max-lg:px-2.5" }, n.href)
+    )
+  ) }) : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "nav",
+    "header",
     {
-      "aria-label": "Pages",
-      "data-oca-tabbar": "",
-      className: "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md md:hidden",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      className: cn(
+        "sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/90",
+        tool ? "border-border" : "border-transparent",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "mx-auto grid h-14 max-w-[32rem] px-1.5",
-          style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
-          children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
-            Link8__default.default,
-            {
-              href: it.href,
-              "aria-current": it.active ? "page" : void 0,
-              className: cn(
-                "flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
+          className: cn(
+            "flex items-center justify-between gap-4",
+            tool ? "h-14 px-4 md:px-6" : "oca-container h-16 md:h-[4.5rem] md:max-lg:gap-2",
+            // Three columns, the outer two each at least their content: the
+            // navigation stays centred whatever the actions hold, so it does
+            // not shift when they change (signed out to signed in).
+            !tool && nav.length > 0 && "md:grid md:grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 items-center gap-1", tool ? "md:gap-1" : "justify-self-start"), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Link6__default.default, { href: home, className: "-ml-1 min-w-0 rounded-lg p-1", children: [
+                brandNode,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " home" })
+              ] }),
+              family ? /* @__PURE__ */ jsxRuntime.jsx(FamilyMenu, { current: current2, className: "max-md:hidden" }) : null,
+              tool && navigation ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-5", children: navigation }) : null
+            ] }),
+            !tool ? navigation : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 justify-self-end", children: [
+              search,
+              actions,
+              menu ? /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SheetTrigger,
                   {
-                    className: cn(
-                      "relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
-                      "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
-                      it.active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
-                    ),
-                    children: [
-                      it.icon,
-                      it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute right-2.5 top-0.5 size-2 rounded-full bg-oca-orange ring-2 ring-background" }) : null
-                    ]
+                    className: "inline-flex size-10 items-center justify-center rounded-full text-foreground hover:bg-accent md:hidden",
+                    "aria-label": "Open menu",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate px-0.5", children: it.label }),
-                it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: it.badge }) : null
-              ]
-            },
-            it.href
-          ))
+                /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "pt-16", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
+                  menuExtra ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", (phoneNav.length > 0 || family) && "border-b border-border pb-3"), children: menuExtra }) : null,
+                  phoneNav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: phoneNav.map(
+                    (n) => n.children?.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col py-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: n.label }),
+                      n.children.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+                        NavLink,
+                        {
+                          item: c,
+                          className: "rounded-xl px-3 py-2.5 text-[1.0625rem]",
+                          onNavigate: () => setOpen(false)
+                        },
+                        c.href
+                      ))
+                    ] }, n.href) : /* @__PURE__ */ jsxRuntime.jsx(
+                      NavLink,
+                      {
+                        item: n,
+                        className: "rounded-xl px-3 py-3 text-[1.0625rem]",
+                        onNavigate: () => setOpen(false)
+                      },
+                      n.href
+                    )
+                  ) }) : null,
+                  family ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cn("group", phoneNav.length > 0 && "mt-2 border-t border-border pt-4"), children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between rounded-xl px-3 py-2.5 text-[1.0625rem] [&::-webkit-details-marker]:hidden", children: [
+                      "All orangecheck sites",
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(FamilyList, { current: current2, onNavigate: () => setOpen(false), stack: true, className: "mt-2" })
+                  ] }) : null
+                ] })
+              ] }) : null
+            ] })
+          ]
         }
       )
     }
   );
 }
-function tabsFor(groups) {
-  const items = groups.flatMap((g) => g.items);
-  return items.length >= 2 && items.length <= 5 && items.every((it) => it.icon) ? items : null;
-}
-var activeItem = (groups) => groups.flatMap((g) => g.items).find((it) => it.active);
-var warned = /* @__PURE__ */ new Set();
-function warnDuplicateLabels(groups) {
-  if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
-  const seen = /* @__PURE__ */ new Set();
-  for (const it of groups.flatMap((g) => g.items)) {
-    if (seen.has(it.label) && !warned.has(it.label)) {
-      warned.add(it.label);
-      console.warn(`AppShell: two pages are labelled "${it.label}"; give each its own name.`);
+function SkipLink({ href = "#main-content", children = "Skip to content" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      className: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-3 focus:z-50 focus:rounded-full focus:border focus:border-border focus:bg-card focus:px-4 focus:py-2 focus:text-[0.9375rem] focus:font-medium focus:text-foreground focus:shadow-md",
+      children
     }
-    seen.add(it.label);
-  }
+  );
 }
-function AppShell({
-  nav,
-  sections,
-  activeSection,
-  page: pageOverride,
-  persistent = [],
-  home = "/",
-  account,
-  banner,
-  footer,
+var BANNER_TONE = {
+  neutral: "border-border bg-muted",
+  brand: "border-[color-mix(in_oklab,var(--oca-orange)_30%,var(--border))] bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--background))]",
+  danger: "border-[color-mix(in_oklab,var(--destructive)_35%,var(--border))] bg-[color-mix(in_oklab,var(--destructive)_8%,var(--background))]"
+};
+function SiteBanner({
+  tone = "neutral",
   children,
+  action,
   className
 }) {
-  const [open, setOpen] = react.useState(false);
-  const current2 = sections && sections.length > 0 ? sections.find((sec) => sec.id === activeSection) ?? sections.find((sec) => activeItem(sec.groups)) ?? sections[0] : void 0;
-  const groups = current2 ? [...current2.groups, ...persistent] : [...nav ?? [], ...persistent];
-  warnDuplicateLabels(groups);
-  const tabs = current2 ? null : tabsFor(groups);
-  const page = activeItem(groups);
-  const place = react.useMemo(
-    () => ({
-      section: current2 ? current2.title ?? current2.label : void 0,
-      page: pageOverride ?? page?.label
-    }),
-    [current2, page?.label, pageOverride]
-  );
-  const switcher = sections && current2 && sections.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(SectionSwitch, { sections, current: current2, onNavigate: () => setOpen(false) }) : null;
-  return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "min-h-dvh bg-background",
-        tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-md lg:hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-14 items-center gap-2 px-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SheetTrigger,
-                {
-                  className: cn(
-                    "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
-                    // The tab bar holds every page; the sheet is left for a footer.
-                    tabs && !footer && "max-md:hidden"
-                  ),
-                  "aria-label": "Open navigation",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "flex flex-col gap-6 overflow-y-auto p-4 pt-16", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
-                switcher,
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabs ? "max-md:hidden" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups, onNavigate: () => setOpen(false) }) }),
-                footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Link8__default.default, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 22 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: account })
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "data-tone": tone, className: cn("border-b text-[0.875rem]", BANNER_TONE[tone], className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oca-container flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-2.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex min-w-0 items-baseline gap-2.5 leading-snug", children: [
+      tone !== "neutral" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "size-2 shrink-0 translate-y-[-0.05em] rounded-full",
+            tone === "brand" ? "bg-oca-orange" : "bg-destructive"
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+    ] }),
+    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("shrink-0 font-medium", tone !== "neutral" && "max-sm:pl-[1.125rem]"), children: action }) : null
+  ] }) });
+}
+var FOOT_LINK = "inline-flex min-h-11 items-center transition-colors hover:text-foreground md:min-h-0";
+function LegalRow({ links }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Legal", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-x-5", children: links.map((l) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: l.href.startsWith("/") ? /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href: l.href, className: FOOT_LINK, children: l.label }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: l.href, className: FOOT_LINK, children: l.label }) }, l.href)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      "\xA9 ",
+      (/* @__PURE__ */ new Date()).getFullYear(),
+      " OrangeCheck"
+    ] })
+  ] });
+}
+function SiteFooter({
+  columns = [],
+  family = false,
+  legal = false,
+  compact = false,
+  fineprint,
+  meta,
+  signature = true,
+  className
+}) {
+  const legalLinks = legal === true ? LEGAL_LINKS : legal || null;
+  if (compact) {
+    return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("border-t border-border bg-background text-[0.875rem] text-muted-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oca-container flex flex-col gap-x-8 gap-y-3 py-5 lg:flex-row lg:items-center lg:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: OCHK_IO, className: "rounded-lg text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 22 }) }),
+        family ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Protocols", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-x-4", children: PROTOCOLS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: p.pageHref, className: FOOT_LINK, children: p.label }) }, p.slug)) }) }) : null
+      ] }),
+      legalLinks || meta ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
+        legalLinks ? /* @__PURE__ */ jsxRuntime.jsx(LegalRow, { links: legalLinks }) : null,
+        meta
+      ] }) : null
+    ] }) });
+  }
+  const cols = [
+    ...columns,
+    ...family ? familyByGroup().map((g) => ({
+      // The lockup above already says orangecheck.
+      heading: g.id === "orangecheck" ? "Start here" : g.label,
+      links: g.sites.map((s) => ({ href: s.href, label: s.label, external: true }))
+    })) : []
+  ];
+  const n = cols.length;
+  const inline = n <= 5;
+  const grid = {
+    "--oca-footer-md": `repeat(${Math.max(1, Math.min(n, 4))}, minmax(0, 1fr))`,
+    "--oca-footer-lg": inline ? `minmax(0, 1.3fr) repeat(${Math.max(1, n)}, minmax(0, 1fr))` : `repeat(${Math.min(n, 6)}, minmax(0, 1fr))`
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: cn("border-t border-border bg-background", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: grid,
+        className: "oca-container grid grid-cols-2 gap-x-6 gap-y-10 py-14 md:grid-cols-[var(--oca-footer-md)] md:py-16 lg:grid-cols-[var(--oca-footer-lg)]",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("col-span-full flex flex-col gap-4", inline && "lg:col-span-1"), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }),
+            fineprint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs text-[0.9375rem] leading-relaxed text-muted-foreground", children: fineprint }) : null
           ] }),
-          place.page ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]",
-                // The active tab already names the page.
-                tabs && !pageOverride && "max-md:hidden"
-              ),
-              children: [
-                place.section ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" })
-                ] }) : null,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: place.page })
-              ]
-            }
-          ) : null
+          cols.map((col, i) => {
+            const spans = n % 2 === 1 && i === n - 1;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn("flex min-w-0 flex-col gap-1", spans && "col-span-2 md:col-span-1"),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[0.875rem] font-medium", children: col.heading }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-1", spans && "grid grid-cols-2 gap-x-6 md:flex md:flex-col"), children: col.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+                    NavLink,
+                    {
+                      item: l,
+                      className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
+                    },
+                    l.href
+                  )) })
+                ]
+              },
+              col.heading
+            );
+          })
+        ]
+      }
+    ),
+    signature ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "oca-container select-none overflow-hidden pb-8 md:pb-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-[0.18em] text-[clamp(3rem,11.5vw,10rem)] leading-[0.78] tracking-[-0.065em] [font-family:var(--oc-font-display)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-[0.06em] inline-block w-[1.1em] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Mark, { className: "block h-auto w-full" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "orangecheck" })
+    ] }) }) : null,
+    legalLinks || meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 border-t border-border py-6 text-[0.875rem] text-muted-foreground", children: [
+      legalLinks ? /* @__PURE__ */ jsxRuntime.jsx(LegalRow, { links: legalLinks }) : null,
+      meta
+    ] }) }) : null
+  ] });
+}
+function OchkIoFooter({ columns = OCHK_IO_FOOTER, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SiteFooter,
+    {
+      columns,
+      family: true,
+      legal: true,
+      fineprint: "Open protocols on Bitcoin. Anyone can check the result.",
+      meta: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          "Open-source work on orangecheck is ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: "supported by OpenSats." })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "sticky top-0 hidden h-dvh w-[17rem] shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Link8__default.default, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }) }),
-            switcher,
-            /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
+        /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, { className: "-mx-3" })
+      ] }),
+      className
+    }
+  );
+}
+function SignInFrame({
+  title = "Sign in",
+  lead,
+  children,
+  error,
+  fineprint,
+  brand,
+  home,
+  protocol: protocol2,
+  back,
+  art,
+  caption,
+  className
+}) {
+  const homeHref = home ?? (protocol2 ? protocolSite(protocol2).pageHref : OCHK_IO);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "main",
+    {
+      id: "main-content",
+      className: cn("grid min-h-dvh grid-cols-1 bg-background text-foreground lg:grid-cols-2", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col px-4 pb-8 pt-5 sm:px-8 lg:px-14 lg:pt-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Link6__default.default, { href: homeHref, className: "w-fit rounded-lg", children: [
+              brand ?? /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 28 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " home" })
+            ] }),
+            back === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              Link6__default.default,
+              {
+                href: homeHref,
+                className: "text-[0.9375rem] text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
+                children: "Back to home"
+              }
+            ) : back
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden h-[4.5rem] items-center justify-end gap-3 px-8 lg:flex", children: account }),
-            banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-2 pt-4 md:px-8 lg:pt-0", children: banner }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-[25rem] flex-1 flex-col justify-center gap-9 py-12", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "oca-display-2", children: title }),
+              lead ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-lead", children: lead }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
+            error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-[0.9375rem] text-destructive", children: error }) : null,
+            fineprint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.8125rem] leading-relaxed text-muted-foreground", children: fineprint }) : null
           ] })
         ] }),
-        tabs ? /* @__PURE__ */ jsxRuntime.jsx(TabBar, { items: tabs }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "aside",
+          {
+            "aria-hidden": true,
+            className: "relative hidden flex-col justify-between gap-10 overflow-hidden border-l border-[var(--oca-band-line)] bg-oca-ink p-14 text-oca-ink-foreground lg:flex",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center", children: art ?? /* @__PURE__ */ jsxRuntime.jsx(IsoCheck, { size: 340, settle: true, tilt: true, className: "max-w-full" }) }),
+              caption ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-w-[24rem] flex-col gap-3", children: caption }) : null
+            ]
+          }
+        )
       ]
     }
-  ) });
+  );
 }
-function AccountMenu({
-  name,
-  detail,
-  items,
-  nameFrom = "sm"
+var STATUS_WORDS = /* @__PURE__ */ new Set(["live", "testing", "not-yet", "paused", "good", "caution", "refused"]);
+var pathOf = (href) => href.split(/[?#]/)[0].replace(/(.)\/$/, "$1");
+function DocsNav({
+  sections,
+  current: current2,
+  onNavigate,
+  className
 }) {
-  const initial = name.trim().charAt(0).toUpperCase() || "\xB7";
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownMenuTrigger,
-      {
-        className: cn(
-          "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-1 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring",
-          nameFrom === "lg" ? "lg:pr-3.5" : "sm:pr-3.5"
-        ),
-        "aria-label": `${name}, account menu`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              "data-initial": initial,
-              className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background before:content-[attr(data-initial)]"
-            }
+  const here = pathOf(current2);
+  const activeSection = react.useMemo(
+    () => sections.findIndex((s) => s.items.some((i) => pathOf(i.href) === here)),
+    [sections, here]
+  );
+  const [peeked, setPeeked] = react.useState(() => /* @__PURE__ */ new Set());
+  react.useEffect(() => setPeeked(/* @__PURE__ */ new Set()), [activeSection]);
+  const activeRef = react.useRef(null);
+  react.useEffect(() => {
+    const id = requestAnimationFrame(() => activeRef.current?.scrollIntoView({ block: "nearest" }));
+    return () => cancelAnimationFrame(id);
+  }, [here]);
+  const base = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Docs", className: cn("flex flex-col gap-0.5", className), children: sections.map((section, si) => {
+    const isActive = si === activeSection;
+    const open = isActive || peeked.has(si);
+    const panel = `${base}-s${si}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": open,
+          "aria-controls": panel,
+          onClick: () => {
+            if (isActive) return;
+            setPeeked((p) => {
+              const n = new Set(p);
+              if (n.has(si)) n.delete(si);
+              else n.add(si);
+              return n;
+            });
+          },
+          className: cn(
+            "flex min-h-9 w-full items-center justify-between gap-2 rounded-lg px-2.5 py-1.5 text-left text-[0.875rem] transition-colors",
+            isActive ? "font-medium text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground",
+            isActive && "cursor-default"
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("max-w-[10rem] truncate", nameFrom === "lg" ? "max-lg:hidden" : "max-sm:hidden"), children: name })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuLabel, { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.9375rem] font-medium text-foreground", children: name }),
-        detail ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-mono text-[0.75rem]", children: detail }) : null
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-      items.map(
-        (it, i) => it === "separator" ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}, `sep-${i}`) : it.href ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, destructive: it.destructive, children: /* @__PURE__ */ jsxRuntime.jsxs(Link8__default.default, { href: it.href, children: [
-          it.icon,
-          it.label
-        ] }) }, it.label) : /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onSelect: it.onSelect, destructive: it.destructive, children: [
-          it.icon,
-          it.label
-        ] }, it.label)
-      )
-    ] })
-  ] });
-}
-function ThemeToggle({ className }) {
-  const { theme, setTheme } = nextThemes.useTheme();
-  const [mounted, setMounted] = react.useState(false);
-  react.useEffect(() => setMounted(true), []);
-  const current2 = mounted ? theme ?? "system" : "system";
-  const next = current2 === "light" ? "dark" : current2 === "dark" ? "system" : "light";
-  const Icon2 = current2 === "light" ? lucideReact.Sun : current2 === "dark" ? lucideReact.Moon : lucideReact.SunMoon;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => setTheme(next),
-      "aria-label": `Theme: ${current2}. Switch to ${next}`,
-      title: `Theme: ${current2}`,
-      className: cn(
-        "inline-flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-        className
+          children: [
+            section.label,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronRight,
+              {
+                "aria-hidden": true,
+                className: cn("size-3.5 shrink-0 text-oca-subtle transition-transform duration-200", open && "rotate-90")
+              }
+            )
+          ]
+        }
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-[1.125rem]" })
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { id: panel, hidden: !open, className: "mb-2 ml-2.5 mt-0.5 border-l border-border", children: section.items.map((item) => {
+        const on = pathOf(item.href) === here;
+        const badge = typeof item.badge === "string" && STATUS_WORDS.has(item.badge) ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: item.badge }) : item.badge ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "muted", children: item.badge }) : null;
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Link6__default.default,
+          {
+            href: item.href,
+            ref: on ? activeRef : void 0,
+            onClick: onNavigate,
+            "aria-current": on ? "page" : void 0,
+            className: cn(
+              "-ml-px flex min-h-9 items-center gap-2 border-l-2 py-1.5 pl-3.5 pr-2 text-[0.875rem] leading-snug transition-colors",
+              on ? "border-foreground font-medium text-foreground" : "border-transparent text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: item.label }),
+              badge
+            ]
+          }
+        ) }, item.href);
+      }) })
+    ] }, section.label);
+  }) });
+}
+var DOCS_HEADER_NAV = OCHK_IO_NAV.map((n) => n.href === DOCS_HREF ? { ...n, active: true } : n);
+function DocsShell({
+  nav,
+  current: current2,
+  navCurrent,
+  header,
+  search,
+  actions,
+  breadcrumbs,
+  toc,
+  pager,
+  footer,
+  children
+}) {
+  const [menu, setMenu] = react.useState(false);
+  react.useEffect(() => setMenu(false), [current2]);
+  const read = useHeadings("#docs-content", current2);
+  const items = toc ?? read.items;
+  const activeId = toc ? void 0 : read.activeId;
+  const marked = navCurrent ?? current2;
+  const here = pathOf(marked);
+  const place = react.useMemo(() => {
+    for (const s of nav) {
+      const it = s.items.find((i) => pathOf(i.href) === here);
+      if (it) return { section: s.label, page: it.label };
     }
-  );
+    return null;
+  }, [nav, here]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-dvh flex-col bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkipLink, {}),
+    header ?? /* @__PURE__ */ jsxRuntime.jsx(SiteHeader, { home: OCHK_IO, family: "docs", nav: DOCS_HEADER_NAV, search, actions }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-16 z-30 border-b border-border bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/90 md:top-[4.5rem] lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container flex h-12 items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: menu, onOpenChange: setMenu, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetTrigger, { className: "-ml-2 inline-flex h-10 min-w-0 items-center gap-2 rounded-full px-2.5 text-[0.875rem] hover:bg-accent", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { "aria-hidden": true, className: "size-[1.125rem] shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Docs menu. " }),
+        place ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-oca-subtle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: place.page })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Docs" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "w-[min(88vw,22rem)] gap-0 p-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-5 py-4 pr-14", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "text-[1.0625rem] font-medium", children: "Docs" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto p-3", children: /* @__PURE__ */ jsxRuntime.jsx(DocsNav, { sections: nav, current: marked, onNavigate: () => setMenu(false) }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:grid lg:grid-cols-[13.5rem_minmax(0,1fr)] lg:gap-x-10 xl:grid-cols-[13.5rem_minmax(0,1fr)_11rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-[4.5rem] hidden max-h-[calc(100dvh-4.5rem)] self-start overflow-y-auto overscroll-contain py-8 pr-1 lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(DocsNav, { sections: nav, current: marked }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("main", { id: "main-content", className: "min-w-0 pb-16 pt-6 md:pt-8", children: [
+        breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 max-lg:hidden", children: breadcrumbs }) : null,
+        items.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group mb-8 rounded-2xl border border-border bg-card xl:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-[0.9375rem] font-medium [&::-webkit-details-marker]:hidden", children: [
+            "On this page",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(OnThisPage, { items, activeId, title: null, className: "px-4 pb-4" })
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("article", { id: "docs-content", className: "max-w-[46rem]", children: /* @__PURE__ */ jsxRuntime.jsx(InDocsContext.Provider, { value: true, children }) }),
+        pager ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-16 max-w-[46rem]", children: pager }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-[4.5rem] hidden max-h-[calc(100dvh-4.5rem)] self-start overflow-y-auto py-10 xl:block", children: items.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(OnThisPage, { items, activeId }) : null })
+    ] }) }),
+    footer ?? /* @__PURE__ */ jsxRuntime.jsx(OchkIoFooter, {})
+  ] });
 }
 var OCHK_APP_ACCOUNT = "https://ochk.app/me/account";
 function onHistory(change) {
@@ -6602,6 +6717,7 @@ function ToolShell({
   children
 }) {
   const p = protocolSite(protocol2);
+  const homeHref = home ?? p.pageHref;
   const app = variant === "app";
   const tabs = app ? null : tabsFor([{ items: [...tools] }]);
   const about = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6631,7 +6747,7 @@ function ToolShell({
           SiteHeader,
           {
             variant: "tool",
-            home: home ?? p.pageHref,
+            home: homeHref,
             product: p.label,
             family: protocol2,
             nav: tools.map((t) => ({ href: t.href, label: t.label, active: t.active })),
@@ -6656,7 +6772,7 @@ function ToolShell({
             {
               id: "main-content",
               className: cn("min-w-0 flex-1", app ? "flex min-h-0 flex-col" : "px-4 pb-16 pt-8 md:px-8 md:pt-10"),
-              children: app ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-[72rem]", children })
+              children: /* @__PURE__ */ jsxRuntime.jsx(SiteHomeContext.Provider, { value: homeHref, children: app ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
             }
           )
         ] }),
@@ -6691,6 +6807,7 @@ function rehypeCode(options = {}) {
         if (lang && skip.has(lang)) continue;
         const meta = parseCodeMeta(code.data?.meta);
         let source = textOf(code);
+        const newline = /\n$/.test(source);
         const diff = meta.diff || lang === "diff" ? readDiff(source) : null;
         if (diff) source = diff.code;
         const lines = options.tokenize?.(source, lang) ?? highlight(source, lang === "diff" ? void 0 : lang);
@@ -6701,7 +6818,8 @@ function rehypeCode(options = {}) {
           ...lang ? { dataLang: lang } : {},
           ...meta.title ? { dataTitle: meta.title } : {},
           ...diff ? { dataDiff: "" } : {},
-          ...meta.lineNumbers ? { dataLineNumbers: "" } : {}
+          ...meta.lineNumbers ? { dataLineNumbers: "" } : {},
+          ...newline ? { dataEol: "" } : {}
         };
         child.children = [];
         continue;
@@ -6722,6 +6840,7 @@ function createMdxComponents({ mermaid } = {}) {
           caption: props["data-title"],
           diff: props["data-diff"] !== void 0,
           lineNumbers: props["data-line-numbers"] !== void 0,
+          trailingNewline: props["data-eol"] !== void 0,
           className: "my-6"
         }
       );
@@ -6748,6 +6867,9 @@ function createMdxComponents({ mermaid } = {}) {
   const heading = (as) => function Heading(props) {
     return /* @__PURE__ */ jsxRuntime.jsx(DocsHeading, { as, ...props });
   };
+  const minor = (Tag) => function Minor({ className, ...props }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: cn("mb-2 mt-6 scroll-mt-28 text-[0.9375rem] font-medium leading-snug text-foreground", className), ...props });
+  };
   return {
     h1: heading("h1"),
     h2: heading("h2"),
@@ -6756,11 +6878,15 @@ function createMdxComponents({ mermaid } = {}) {
     p: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("my-4 text-[1rem] leading-[1.75] text-muted-foreground md:text-[1.0625rem]", className), ...props }),
     a: A,
     strong: (props) => /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-medium text-foreground", ...props }),
+    h5: minor("h5"),
+    h6: minor("h6"),
     ul: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
       {
         className: cn(
           "my-4 list-disc space-y-1.5 pl-5 text-[1rem] leading-[1.7] text-muted-foreground marker:text-oca-subtle md:text-[1.0625rem]",
+          // A GitHub task list: the box replaces the bullet.
+          className?.includes("contains-task-list") && "list-none pl-0",
           className
         ),
         ...props
@@ -6776,7 +6902,26 @@ function createMdxComponents({ mermaid } = {}) {
         ...props
       }
     ),
-    li: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("pl-1 [&>p]:my-1 [&>ul]:my-1.5 [&>ol]:my-1.5", className), ...props }),
+    li: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        className: cn(
+          "pl-1 [&>p]:my-1 [&>ul]:my-1.5 [&>ol]:my-1.5",
+          // A wrapped task starts under its text, not under the box.
+          className?.includes("task-list-item") && "pl-6 -indent-6",
+          className
+        ),
+        ...props
+      }
+    ),
+    input: (props) => props.type === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...props,
+        className: cn("mr-2 size-4 translate-y-[2px] align-baseline accent-foreground", props.className),
+        "aria-label": props.checked ? "Done" : "To do"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...props }),
     blockquote: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Callout, { children }),
     hr: () => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "my-10 border-border" }),
     table: MdxTable,
@@ -6919,6 +7064,7 @@ exports.OCHK_APP_ACCOUNT = OCHK_APP_ACCOUNT;
 exports.OCHK_IO = OCHK_IO;
 exports.OCHK_IO_FOOTER = OCHK_IO_FOOTER;
 exports.OCHK_IO_NAV = OCHK_IO_NAV;
+exports.OchkIoFooter = OchkIoFooter;
 exports.OnThisPage = OnThisPage;
 exports.PROTOCOLS = PROTOCOLS;
 exports.PROTOCOL_ORDER = PROTOCOL_ORDER;