@orangecheck/app-design 1.0.0 → 1.1.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { forwardRef, createContext, useContext, useRef, useState, useCallback, useEffect, useId, isValidElement, cloneElement, useSyncExternalStore, useMemo, createElement, Children, Component, Fragment as Fragment$1 } from 'react';
+import { forwardRef, useContext, createContext, useRef, useState, useCallback, useEffect, useMemo, useId, useSyncExternalStore, Children, isValidElement, createElement, cloneElement, Component, Fragment as Fragment$1 } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -12,14 +12,14 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { ChevronDown, Check, X, ChevronLeft, ChevronRight, Copy, ArrowUpRight, Menu, Sun, Moon, SunMoon, CircleDashed, CircleMinus, Clock, CircleX, CircleCheck } from 'lucide-react';
+import { ChevronDown, Check, X, Search, ArrowUpRight, ArrowRight, Copy, ChevronLeft, ChevronRight, CornerDownLeft, Download, FileText, Upload, Menu, PanelLeft, Sun, Moon, SunMoon, CircleUser, LogOut, ArrowLeft, Lock, CircleDashed, CircleMinus, Clock, CircleX, CircleCheck } from 'lucide-react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import QRCode from 'qrcode';
-import Link5 from 'next/link';
+import Link8 from 'next/link';
 import { useTheme } from 'next-themes';
 
 // src/tokens/index.ts
@@ -362,6 +362,20 @@ function CardContent({ className, ...props }) {
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex flex-wrap items-center gap-3", className), ...props });
 }
+function sharedContext(name, initial) {
+  const key = /* @__PURE__ */ Symbol.for(`@orangecheck/app-design/${name}`);
+  const store = globalThis;
+  return store[key] ?? (store[key] = createContext(initial));
+}
+
+// src/lib/density.ts
+var DensityContext = sharedContext("density", "comfortable");
+function DensityProvider({ density, children }) {
+  return createElement(DensityContext.Provider, { value: density }, children);
+}
+function useDensity() {
+  return useContext(DensityContext);
+}
 var fieldBase = [
   "w-full rounded-xl border border-input bg-card text-foreground placeholder:text-oca-subtle",
   "text-base md:text-[0.9375rem] outline-none transition-[border-color,box-shadow]",
@@ -369,8 +383,24 @@ var fieldBase = [
   "disabled:cursor-not-allowed disabled:opacity-55",
   "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-[color-mix(in_oklab,var(--destructive)_14%,transparent)]"
 ];
-var Input = forwardRef(function Input2({ className, type = "text", ...props }, ref) {
-  return /* @__PURE__ */ jsx("input", { ref, type, "data-ui": "input", className: cn(fieldBase, "h-11 px-3.5", className), ...props });
+var FIELD_SIZE = {
+  md: "h-11 px-3.5",
+  sm: "h-9 rounded-[0.625rem] px-3 md:text-[0.875rem]"
+};
+var Input = forwardRef(function Input2({ className, type = "text", size, ...props }, ref) {
+  const density = useDensity();
+  const s = size ?? (density === "compact" ? "sm" : "md");
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type,
+      "data-ui": "input",
+      "data-size": s,
+      className: cn(fieldBase, FIELD_SIZE[s], className),
+      ...props
+    }
+  );
 });
 var Textarea = forwardRef(
   function Textarea2({ className, ...props }, ref) {
@@ -427,15 +457,29 @@ function Field({ label, hint, optional, error, children, className, hideLabel, a
     error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-[0.8125rem] leading-snug text-destructive", children: error }) : null
   ] });
 }
-var Select = SelectPrimitive.Root;
+var SelectFieldContext = sharedContext("select-field", null);
+function Select({
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectFieldContext.Provider, { value: { id, "aria-describedby": describedBy, "aria-invalid": invalid }, children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { ...props }) });
+}
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = forwardRef(function SelectTrigger2({ className, children, ...props }, ref) {
+var SelectTrigger = forwardRef(function SelectTrigger2({ className, children, size, ...props }, ref) {
+  const density = useDensity();
+  const field = useContext(SelectFieldContext);
+  const s = size ?? (density === "compact" ? "sm" : "md");
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
     {
       ref,
-      className: cn(fieldBase, "flex h-11 items-center justify-between gap-2 px-3.5 text-left", className),
+      id: field?.id,
+      "aria-describedby": field?.["aria-describedby"],
+      "aria-invalid": field?.["aria-invalid"],
+      className: cn(fieldBase, FIELD_SIZE[s], "flex items-center justify-between gap-2 text-left", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx("span", { className: "truncate", children }),
@@ -1751,6 +1795,7 @@ function useActiveHeading(ids) {
   const [active, setActive] = useState(ids[0]);
   const key = ids.join("|");
   useEffect(() => {
+    setActive(key.split("|")[0] || void 0);
     const els = key.split("|").map((id) => document.getElementById(id)).filter((el) => el !== null);
     if (els.length === 0 || typeof IntersectionObserver === "undefined") return;
     const io = new IntersectionObserver(
@@ -1843,7 +1888,563 @@ function StepGrid({ items, look = "cards", className }) {
     ] }) }, i)
   ) });
 }
-var ShellContext = createContext({});
+var KIND = {
+  package: "text-oca-code-package",
+  tag: "text-oca-code-tag",
+  link: "text-oca-code-link"
+};
+function PackageCard({ items, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-x-10 gap-y-7 rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card p-6 text-oca-ink-foreground md:grid-cols-2 md:p-9",
+        className
+      ),
+      children: items.map((it, i) => {
+        const code = /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", KIND[it.kind ?? "package"]), children: it.code });
+        return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-[1.125rem] font-semibold tracking-[-0.01em] text-oca-ink-title", children: it.title }),
+          it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "w-fit underline decoration-transparent underline-offset-4 hover:decoration-current", children: code }) : code,
+          it.note ? /* @__PURE__ */ jsxs("p", { className: "text-[0.9375rem] leading-relaxed text-oca-ink-subtle", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "// " }),
+            it.note
+          ] }) : null
+        ] }, i);
+      })
+    }
+  );
+}
+
+// src/code/highlight.ts
+var TOKEN_CLASS = {
+  keyword: "oca-k",
+  string: "oca-s",
+  number: "oca-n",
+  function: "oca-f",
+  type: "oca-y",
+  property: "oca-p",
+  comment: "oca-c",
+  tag: "oca-g",
+  url: "oca-u"
+};
+var ALIASES = {
+  ts: "js",
+  typescript: "js",
+  tsx: "js",
+  js: "js",
+  javascript: "js",
+  jsx: "js",
+  mjs: "js",
+  cjs: "js",
+  json: "json",
+  jsonc: "json",
+  json5: "json",
+  bash: "shell",
+  sh: "shell",
+  shell: "shell",
+  zsh: "shell",
+  console: "shell",
+  terminal: "shell",
+  py: "python",
+  python: "python",
+  yaml: "yaml",
+  yml: "yaml",
+  diff: "diff"
+};
+var CODE_LANGS = Object.keys(ALIASES);
+function grammarOf(lang) {
+  return lang && ALIASES[lang.toLowerCase()] || "plain";
+}
+function collector() {
+  const tokens = [];
+  const emit2 = (text, kind) => {
+    if (!text) return;
+    const last = tokens[tokens.length - 1];
+    if (last && last.kind === kind) last.text += text;
+    else tokens.push(kind ? { text, kind } : { text });
+  };
+  return { emit: emit2, tokens };
+}
+function at(re, src, i) {
+  re.lastIndex = i;
+  const m = re.exec(src);
+  return m ? m[0] : null;
+}
+var WS = /[ \t]+/y;
+var NEWLINE = /\r?\n/y;
+var JS_KEYWORDS = new Set(
+  "abstract as async await break case catch class const continue debugger declare default delete do else enum export extends finally for from function get if implements import in infer instanceof interface is keyof let module namespace new of override private protected public readonly return satisfies set static super switch this throw try type typeof unique var void while with yield".split(" ")
+);
+var JS_CONSTANTS = /* @__PURE__ */ new Set(["true", "false", "null", "undefined", "NaN", "Infinity"]);
+var TS_PRIMITIVES = /* @__PURE__ */ new Set(["string", "number", "boolean", "bigint", "symbol", "object", "unknown", "any", "never"]);
+var isConstant = (m) => /^[A-Z][A-Z\d_]+$/.test(m) && (m.includes("_") || m.length > 4);
+var JS_LINE_COMMENT = /\/\/[^\n]*/y;
+var JS_BLOCK_COMMENT = /\/\*[\s\S]*?(?:\*\/|$)/y;
+var JS_TEMPLATE = /`(?:\\[\s\S]|[^\\`])*`?/y;
+var JS_STRING = /'(?:\\.|[^\\'\n])*'?|"(?:\\.|[^\\"\n])*"?/y;
+var JS_NUMBER = /(?:0[xX][\da-fA-F_]+|0[bB][01_]+|0[oO][0-7_]+|\d[\d_]*(?:\.[\d_]+)?(?:[eE][+-]?\d+)?|\.\d[\d_]*(?:[eE][+-]?\d+)?)n?/y;
+var JS_IDENT = /[A-Za-z_$][\w$]*/y;
+var JS_DECORATOR = /@[A-Za-z_$][\w$.]*/y;
+var JS_CALL_AFTER = /\s*(?:<[\w$\s,.[\]|&'"]*>)?\s*\(/y;
+var JS_TAG = /<\/?(?=[A-Za-z])/y;
+var JS_TAG_NAME = /[A-Za-z][\w$.:-]*/y;
+var JS_PUNCT = /=>|\.\.\.|[{}()[\];,.<>=+\-*/%!?:&|^~#]/y;
+var JSX_BEFORE = /* @__PURE__ */ new Set(["(", ",", "=", "?", ":", "{", "[", ";", ">", "&&", "||", "=>", "return"]);
+function scanJs(src, emit2, jsx50) {
+  let i = 0;
+  let prev = "";
+  let tagDepth = 0;
+  let braceInTag = 0;
+  const sig = (t) => {
+    prev = t;
+  };
+  while (i < src.length) {
+    let m;
+    if ((m = at(WS, src, i)) || (m = at(NEWLINE, src, i))) {
+      emit2(m);
+      i += m.length;
+      continue;
+    }
+    if ((m = at(JS_LINE_COMMENT, src, i)) || (m = at(JS_BLOCK_COMMENT, src, i))) {
+      emit2(m, "comment");
+      i += m.length;
+      continue;
+    }
+    if ((m = at(JS_TEMPLATE, src, i)) || (m = at(JS_STRING, src, i))) {
+      emit2(m, "string");
+      i += m.length;
+      sig('"');
+      continue;
+    }
+    if (jsx50 && tagDepth === 0 && (m = at(JS_TAG, src, i)) && (prev === "" || JSX_BEFORE.has(prev))) {
+      const name = at(JS_TAG_NAME, src, i + m.length);
+      if (name) {
+        emit2(m);
+        emit2(name, "tag");
+        i += m.length + name.length;
+        tagDepth = 1;
+        braceInTag = 0;
+        sig("tag");
+        continue;
+      }
+    }
+    if (jsx50 && tagDepth > 0 && braceInTag === 0) {
+      if (src.startsWith("/>", i) || src[i] === ">") {
+        const close = src[i] === ">" ? ">" : "/>";
+        emit2(close);
+        i += close.length;
+        tagDepth = 0;
+        sig(">");
+        continue;
+      }
+      if ((m = at(JS_IDENT, src, i)) && /^\s*=/.test(src.slice(i + m.length, i + m.length + 4))) {
+        emit2(m, "property");
+        i += m.length;
+        continue;
+      }
+      if (m = at(JS_IDENT, src, i)) {
+        emit2(m, "property");
+        i += m.length;
+        continue;
+      }
+      if (src[i] === "{") braceInTag = 1;
+    } else if (jsx50 && tagDepth > 0 && braceInTag > 0) {
+      if (src[i] === "{") braceInTag++;
+      else if (src[i] === "}") braceInTag--;
+    }
+    if (m = at(JS_DECORATOR, src, i)) {
+      emit2(m, "function");
+      i += m.length;
+      sig("@");
+      continue;
+    }
+    if (m = at(JS_IDENT, src, i)) {
+      const end = i + m.length;
+      let kind;
+      if (prev !== "." && JS_CONSTANTS.has(m)) kind = "number";
+      else if (prev !== "." && JS_KEYWORDS.has(m)) kind = "keyword";
+      else if (at(JS_CALL_AFTER, src, end) !== null) kind = "function";
+      else if (prev !== "." && TS_PRIMITIVES.has(m)) kind = "type";
+      else if (isConstant(m)) kind = "number";
+      else if (/^[A-Z]/.test(m)) kind = "type";
+      emit2(m, kind);
+      i = end;
+      sig(kind === "keyword" ? m : "id");
+      continue;
+    }
+    if (m = at(JS_NUMBER, src, i)) {
+      emit2(m, "number");
+      i += m.length;
+      sig("0");
+      continue;
+    }
+    if (m = at(JS_PUNCT, src, i)) {
+      emit2(m);
+      i += m.length;
+      sig(m === "." ? "." : m);
+      continue;
+    }
+    emit2(src[i]);
+    i++;
+  }
+}
+var JSON_STRING = /"(?:\\.|[^\\"\n])*"?/y;
+var JSON_KEY_AFTER = /\s*:/y;
+var JSON_NUMBER = /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y;
+var JSON_WORD = /true|false|null/y;
+function scanJson(src, emit2) {
+  let i = 0;
+  while (i < src.length) {
+    let m;
+    if ((m = at(JS_LINE_COMMENT, src, i)) || (m = at(JS_BLOCK_COMMENT, src, i))) {
+      emit2(m, "comment");
+    } else if (m = at(JSON_STRING, src, i)) {
+      emit2(m, at(JSON_KEY_AFTER, src, i + m.length) !== null ? "property" : "string");
+    } else if ((m = at(JSON_NUMBER, src, i)) || (m = at(JSON_WORD, src, i))) {
+      emit2(m, "number");
+    } else {
+      m = src[i];
+      emit2(m);
+    }
+    i += m.length;
+  }
+}
+var SH_KEYWORDS = new Set(
+  "if then else elif fi for in do done case esac while until function return export local select time".split(" ")
+);
+var SH_PROMPT = /\$ (?=\S)/y;
+var SH_COMMENT = /#[^\n]*/y;
+var SH_SINGLE = /'[^']*'?/y;
+var SH_DOUBLE = /"(?:\\.|[^\\"])*"?/y;
+var SH_VAR = /\$(?:\{[^}\n]*\}?|[A-Za-z_][\w]*|[@*#?$!\d])/y;
+var SH_URL = /https?:\/\/[^\s'"`)]+/y;
+var SH_FLAG = /--?[A-Za-z][\w-]*/y;
+var SH_ASSIGN = /[A-Za-z_][\w]*(?==)/y;
+var SH_VALUE = /=[^\s|&;()<>'"`$]*/y;
+var SH_WORD = /[^\s|&;()<>'"`$#]+/y;
+var SH_OPERATOR = /\|\||&&|[|;&]|\$\(|[()<>]/y;
+function scanShell(src, emit2) {
+  let i = 0;
+  let command = true;
+  let lineStart = true;
+  while (i < src.length) {
+    let m;
+    if (m = at(NEWLINE, src, i)) {
+      emit2(m);
+      i += m.length;
+      command = !/\\\s*$/.test(src.slice(0, i - m.length));
+      lineStart = true;
+      continue;
+    }
+    if (m = at(WS, src, i)) {
+      emit2(m);
+      i += m.length;
+      continue;
+    }
+    if (lineStart && (m = at(SH_PROMPT, src, i))) {
+      emit2(m, "comment");
+      i += m.length;
+      lineStart = false;
+      continue;
+    }
+    lineStart = false;
+    if ((m = at(SH_COMMENT, src, i)) && (i === 0 || /\s/.test(src[i - 1]))) {
+      emit2(m, "comment");
+      i += m.length;
+      continue;
+    }
+    if ((m = at(SH_SINGLE, src, i)) || (m = at(SH_DOUBLE, src, i))) {
+      emit2(m, "string");
+      i += m.length;
+      command = false;
+      continue;
+    }
+    if (m = at(SH_OPERATOR, src, i)) {
+      emit2(m);
+      i += m.length;
+      command = m !== ")" && m !== ">" && m !== "<";
+      continue;
+    }
+    if (m = at(SH_VAR, src, i)) {
+      emit2(m, "type");
+      i += m.length;
+      command = false;
+      continue;
+    }
+    if (m = at(SH_URL, src, i)) {
+      emit2(m, "url");
+      i += m.length;
+      command = false;
+      continue;
+    }
+    if (command && (m = at(SH_ASSIGN, src, i))) {
+      emit2(m, "property");
+      i += m.length;
+      const v = at(SH_VALUE, src, i);
+      emit2(v);
+      i += v.length;
+      continue;
+    }
+    if ((m = at(SH_FLAG, src, i)) && !command) {
+      emit2(m, "keyword");
+      i += m.length;
+      continue;
+    }
+    if (m = at(SH_WORD, src, i)) {
+      if (command && SH_KEYWORDS.has(m)) emit2(m, "keyword");
+      else if (command) {
+        emit2(m, "function");
+        command = m === "sudo" || m === "npx" || m === "env" || m === "time";
+        i += m.length;
+        continue;
+      } else emit2(m);
+      i += m.length;
+      continue;
+    }
+    emit2(src[i]);
+    i++;
+  }
+}
+var PY_KEYWORDS = new Set(
+  "and as assert async await break class continue def del elif else except finally for from global if import in is lambda match case nonlocal not or pass raise return try while with yield self cls".split(" ")
+);
+var PY_CONSTANTS = /* @__PURE__ */ new Set(["True", "False", "None"]);
+var PY_TYPES = /* @__PURE__ */ new Set(["int", "str", "bool", "float", "bytes", "list", "dict", "tuple", "set", "object"]);
+var PY_COMMENT = /#[^\n]*/y;
+var PY_TRIPLE = /[rRbBuUfF]{0,2}(?:"""[\s\S]*?(?:"""|$)|'''[\s\S]*?(?:'''|$))/y;
+var PY_STRING = /[rRbBuUfF]{0,2}(?:'(?:\\.|[^\\'\n])*'?|"(?:\\.|[^\\"\n])*"?)/y;
+var PY_NUMBER = /(?:0[xX][\da-fA-F_]+|\d[\d_]*(?:\.[\d_]*)?(?:[eE][+-]?\d+)?j?)/y;
+var PY_IDENT = /[A-Za-z_]\w*/y;
+var PY_DECORATOR = /@[A-Za-z_][\w.]*/y;
+var PY_CALL_AFTER = /\s*\(/y;
+function scanPython(src, emit2) {
+  let i = 0;
+  let prev = "";
+  while (i < src.length) {
+    let m;
+    if ((m = at(WS, src, i)) || (m = at(NEWLINE, src, i))) {
+      emit2(m);
+      i += m.length;
+      continue;
+    }
+    if (m = at(PY_COMMENT, src, i)) {
+      emit2(m, "comment");
+    } else if ((m = at(PY_TRIPLE, src, i)) || (m = at(PY_STRING, src, i))) {
+      if (/^[A-Za-z]+$/.test(m)) {
+        emit2(m);
+      } else emit2(m, "string");
+      prev = '"';
+    } else if (m = at(PY_DECORATOR, src, i)) {
+      emit2(m, "function");
+      prev = "@";
+    } else if (m = at(PY_IDENT, src, i)) {
+      let kind;
+      if (PY_CONSTANTS.has(m)) kind = "number";
+      else if (prev !== "." && PY_KEYWORDS.has(m)) kind = "keyword";
+      else if (prev === "def" || at(PY_CALL_AFTER, src, i + m.length) !== null) kind = "function";
+      else if (prev === "class" || /^[A-Z][a-z]/.test(m) || PY_TYPES.has(m)) kind = "type";
+      else if (isConstant(m)) kind = "number";
+      emit2(m, kind);
+      prev = kind === "keyword" ? m : "id";
+    } else if (m = at(PY_NUMBER, src, i)) {
+      emit2(m, "number");
+      prev = "0";
+    } else {
+      m = src[i];
+      emit2(m);
+      prev = m;
+    }
+    i += m.length;
+  }
+}
+var YAML_KEY = /[ \t]*(?:- )?[\w.$/-]+(?=[ \t]*:(?:\s|$))/y;
+var YAML_VALUE_WORD = /(?:true|false|null|yes|no|~|-?\d+(?:\.\d+)?)(?=\s*(?:#|$))/y;
+function scanYaml(src, emit2) {
+  let i = 0;
+  let lineStart = true;
+  while (i < src.length) {
+    let m;
+    if (m = at(NEWLINE, src, i)) {
+      emit2(m);
+      i += m.length;
+      lineStart = true;
+      continue;
+    }
+    if (lineStart && (m = at(YAML_KEY, src, i))) {
+      const dash = m.match(/^([ \t]*(?:- )?)/)[1];
+      emit2(dash);
+      emit2(m.slice(dash.length), "property");
+      i += m.length;
+      lineStart = false;
+      continue;
+    }
+    lineStart = false;
+    if ((m = at(SH_COMMENT, src, i)) && (i === 0 || /\s/.test(src[i - 1]))) emit2(m, "comment");
+    else if ((m = at(SH_SINGLE, src, i)) || (m = at(JSON_STRING, src, i))) emit2(m, "string");
+    else if (m = at(YAML_VALUE_WORD, src, i)) emit2(m, "number");
+    else if (m = at(SH_URL, src, i)) emit2(m, "url");
+    else {
+      m = src[i];
+      emit2(m);
+    }
+    i += m.length;
+  }
+}
+function toLines(tokens) {
+  const lines = [[]];
+  for (const t of tokens) {
+    const parts = t.text.split(/\r?\n/);
+    parts.forEach((part, j) => {
+      if (j > 0) lines.push([]);
+      if (part) lines[lines.length - 1].push(t.kind ? { text: part, kind: t.kind } : { text: part });
+    });
+  }
+  return lines;
+}
+function highlight(code, lang) {
+  const src = code.replace(/\r?\n$/, "");
+  const grammar = grammarOf(lang);
+  const { emit: emit2, tokens } = collector();
+  const name = (lang ?? "").toLowerCase();
+  switch (grammar) {
+    case "js":
+      scanJs(src, emit2, name === "tsx" || name === "jsx");
+      break;
+    case "json":
+      scanJson(src, emit2);
+      break;
+    case "shell":
+      scanShell(src, emit2);
+      break;
+    case "python":
+      scanPython(src, emit2);
+      break;
+    case "yaml":
+      scanYaml(src, emit2);
+      break;
+    default:
+      emit2(src);
+  }
+  return toLines(tokens);
+}
+function readDiff(code) {
+  const diff = /* @__PURE__ */ new Map();
+  const lines = code.replace(/\r?\n$/, "").split(/\r?\n/);
+  const out = lines.map((line, i) => {
+    const c = line[0];
+    if (c === "+" || c === "-") {
+      diff.set(i + 1, c === "+" ? "add" : "remove");
+      return line.slice(1);
+    }
+    return c === " " ? line.slice(1) : line;
+  });
+  return { code: out.join("\n"), diff };
+}
+function parseLineRanges(spec) {
+  if (!spec) return /* @__PURE__ */ new Set();
+  if (typeof spec !== "string") return new Set(spec);
+  const out = /* @__PURE__ */ new Set();
+  for (const part of spec.split(",")) {
+    const m = part.trim().match(/^(\d+)(?:\s*-\s*(\d+))?$/);
+    if (!m) continue;
+    const a = Number(m[1]);
+    const b = m[2] ? Number(m[2]) : a;
+    for (let n = Math.min(a, b); n <= Math.max(a, b) && n - a < 1e4; n++) out.add(n);
+  }
+  return out;
+}
+function parseCodeMeta(meta) {
+  if (!meta) return {};
+  const out = {};
+  const title = meta.match(/(?:title|filename)=(?:"([^"]*)"|'([^']*)'|(\S+))/);
+  if (title) out.title = title[1] ?? title[2] ?? title[3];
+  const lines = meta.match(/\{([\d,\s-]+)\}/);
+  if (lines) out.highlight = lines[1].replace(/\s+/g, "");
+  const rest = meta.replace(/(?:title|filename)=(?:"[^"]*"|'[^']*'|\S+)/, "");
+  if (/\bdiff\b/.test(rest)) out.diff = true;
+  if (/\b(?:showLineNumbers|lineNumbers|numbers)\b/.test(rest)) out.lineNumbers = true;
+  return out;
+}
+var ESCAPE = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" };
+function escapeHtml(s) {
+  return s.replace(/[&<>"]/g, (c) => ESCAPE[c]);
+}
+function linesToHtml(lines, marks = {}) {
+  return lines.map((line, i) => {
+    const n = i + 1;
+    const attrs = [
+      'data-line=""',
+      marks.highlight?.has(n) ? 'data-mark=""' : "",
+      marks.diff?.has(n) ? `data-diff="${marks.diff.get(n)}"` : ""
+    ].filter(Boolean).join(" ");
+    const body = line.map((t) => t.kind ? `<span class="${TOKEN_CLASS[t.kind]}">${escapeHtml(t.text)}</span>` : escapeHtml(t.text)).join("");
+    return `<span ${attrs}>${body}</span>`;
+  }).join("\n");
+}
+function highlightToHtml(code, lang, opts = {}) {
+  const d = opts.diff ? readDiff(code) : null;
+  return linesToHtml(highlight(d ? d.code : code, lang), {
+    highlight: parseLineRanges(opts.highlight),
+    diff: d?.diff
+  });
+}
+
+// src/format/index.ts
+var EXPLORER = "https://mempool.space";
+function explorerUrl(kind, value, network = "mainnet") {
+  const net = network === "mainnet" ? "" : `/${network}`;
+  return `${EXPLORER}${net}/${kind}/${encodeURIComponent(String(value))}`;
+}
+function shortenMiddle(value, head = 8, tail = 6) {
+  return value.length <= head + tail + 1 ? value : `${value.slice(0, head)}\u2026${value.slice(-tail)}`;
+}
+function formatBlockHeight(height) {
+  return Math.trunc(height).toLocaleString("en-US");
+}
+function blocksToDuration(blocks, minutesPerBlock = 10) {
+  const minutes = Math.max(0, Math.round(blocks * minutesPerBlock));
+  if (minutes < 60) return `about ${minutes} minute${minutes === 1 ? "" : "s"}`;
+  const units = [
+    [60 * 24 * 7, "week"],
+    [60 * 24, "day"],
+    [60, "hour"],
+    [1, "minute"]
+  ];
+  const parts = [];
+  let rest = minutes;
+  for (const [size, word] of units) {
+    const n = Math.floor(rest / size);
+    if (n > 0 && parts.length < 2) {
+      parts.push(`${n} ${word}${n === 1 ? "" : "s"}`);
+      rest -= n * size;
+    } else if (parts.length > 0) break;
+  }
+  return `about ${parts.join(" ")}`;
+}
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+function formatUtc(at2, opts = {}) {
+  const d = typeof at2 === "number" ? new Date(at2 * 1e3) : new Date(at2);
+  if (Number.isNaN(d.getTime())) return "\u2014";
+  const day = `${d.getUTCDate()} ${MONTHS[d.getUTCMonth()]} ${d.getUTCFullYear()}`;
+  if (opts.date) return day;
+  const hh = String(d.getUTCHours()).padStart(2, "0");
+  const mm = String(d.getUTCMinutes()).padStart(2, "0");
+  return `${day}, ${hh}:${mm} UTC`;
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "\u2014";
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let v = bytes / 1024;
+  let u = 0;
+  while (v >= 1024 && u < units.length - 1) {
+    v /= 1024;
+    u++;
+  }
+  return `${v < 10 ? v.toFixed(1).replace(/\.0$/, "") : Math.round(v)} ${units[u]}`;
+}
+var ShellContext = sharedContext("shell-place", {});
 function useShellPlace() {
   return useContext(ShellContext);
 }
@@ -1866,26 +2467,30 @@ function PageHeader({
   ] });
 }
 var InStatGrid = createContext(false);
-function StatCard({ label, value, hint, className }) {
+function StatCard({ label, value, hint, size, className }) {
   const inGrid = useContext(InStatGrid);
+  const density = useDensity();
+  const sm = (size ?? (density === "compact" ? "sm" : "md")) === "sm";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-ui": "stat",
       className: cn(
-        "rounded-[1.25rem] border border-border bg-card p-5 md:p-6",
+        "border border-border bg-card",
+        sm ? "rounded-2xl p-4" : "rounded-[1.25rem] p-5 md:p-6",
         // In a grid, label, value and hint each share a row with their
         // neighbours, so values line up whatever wraps above them.
         inGrid ? "row-span-3 grid grid-rows-subgrid gap-1.5" : "flex flex-col gap-2",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx("span", { className: cn("leading-snug text-muted-foreground", sm ? "text-[0.8125rem]" : "text-[0.875rem]"), children: label }),
         /* @__PURE__ */ jsx(
           "span",
           {
             className: cn(
-              "break-words oca-tabular text-[1.5rem] leading-tight tracking-[-0.02em] md:text-[1.75rem]",
+              "break-words oca-tabular leading-tight tracking-[-0.02em]",
+              sm ? "text-[1.25rem]" : "text-[1.5rem] md:text-[1.75rem]",
               inGrid && "self-end"
             ),
             children: value
@@ -1947,6 +2552,7 @@ function StatGrid({ columns, empty, isEmpty, className, children, ...props }) {
   const items = Children.toArray(children).filter(isValidElement);
   const n = items.length;
   const allZero = n > 0 && items.every((el) => "raw" in el.props && (el.props.raw === 0 || el.props.raw === null));
+  const compact = useDensity() === "compact";
   if (isEmpty ?? allZero) return /* @__PURE__ */ jsx(EmptyLine, { className, children: empty ?? "Nothing here yet." });
   const lg = columns ?? statColumns(n);
   const md = lg > 4 ? 3 : lg;
@@ -1956,7 +2562,8 @@ function StatGrid({ columns, empty, isEmpty, className, children, ...props }) {
     "div",
     {
       className: cn(
-        "grid gap-3 md:gap-4",
+        "grid",
+        compact ? "gap-2.5 md:gap-3" : "gap-3 md:gap-4",
         n === 1 ? "grid-cols-1" : "grid-cols-2",
         MD_COLS[md],
         LG_COLS[lg],
@@ -1975,11 +2582,40 @@ function StatGrid({ columns, empty, isEmpty, className, children, ...props }) {
     }
   ) });
 }
-function KeyValueList({ items, className }) {
-  return /* @__PURE__ */ jsx("dl", { className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((it, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-5 py-3.5 sm:flex-row sm:items-baseline sm:gap-6", children: [
-    /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-[0.875rem] text-muted-foreground sm:w-48", children: it.label }),
-    /* @__PURE__ */ jsx("dd", { className: cn("min-w-0 break-words text-[0.9375rem]", it.mono && "font-mono text-[0.875rem]"), children: it.value })
-  ] }, i)) });
+function KeyValueList({
+  items,
+  dense,
+  className
+}) {
+  const density = useDensity();
+  const tight = dense ?? density === "compact";
+  return (
+    // The rows go side by side when the list itself is wide enough, wherever it sits: a narrow card stacks them.
+    /* @__PURE__ */ jsx("dl", { className: cn("@container divide-y divide-border border border-border bg-card", tight ? "rounded-2xl" : "rounded-[1.25rem]", className), children: items.map((it, i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-1 @md:flex-row @md:items-baseline",
+          tight ? "px-4 py-2.5 @md:gap-5" : "px-5 py-3.5 @md:gap-6"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("dt", { className: cn("shrink-0 text-muted-foreground", tight ? "text-[0.8125rem] @md:w-36" : "text-[0.875rem] @md:w-48"), children: it.label }),
+          /* @__PURE__ */ jsx(
+            "dd",
+            {
+              className: cn(
+                "min-w-0 break-words",
+                tight ? "text-[0.875rem]" : "text-[0.9375rem]",
+                it.mono && (tight ? "font-mono text-[0.8125rem]" : "font-mono text-[0.875rem]")
+              ),
+              children: it.value
+            }
+          )
+        ]
+      },
+      i
+    )) })
+  );
 }
 function DataTable({
   columns,
@@ -1988,8 +2624,11 @@ function DataTable({
   empty,
   caption,
   phone = "cards",
+  dense,
   className
 }) {
+  const density = useDensity();
+  const tight = dense ?? density === "compact";
   if (rows.length === 0 && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
   const primary = columns.find((c) => c.primary) ?? columns[0];
   const right = (c) => c.numeric || c.align === "end";
@@ -1997,11 +2636,12 @@ function DataTable({
     "div",
     {
       className: cn(
-        "overflow-hidden rounded-[1.25rem] border border-border bg-card",
+        "overflow-hidden border border-border bg-card",
+        tight ? "rounded-2xl" : "rounded-[1.25rem]",
         phone === "cards" && "max-sm:hidden",
         className
       ),
-      children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem]", children: [
+      children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxs("table", { className: cn("w-full border-collapse text-left", tight ? "text-[0.875rem]" : "text-[0.9375rem]"), children: [
         caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border", children: columns.map((c) => /* @__PURE__ */ jsx(
           "th",
@@ -2009,7 +2649,8 @@ function DataTable({
             scope: "col",
             style: { width: c.width, minWidth: c.minWidth },
             className: cn(
-              "whitespace-nowrap px-5 py-3 text-[0.8125rem] font-medium text-muted-foreground",
+              "whitespace-nowrap text-[0.8125rem] font-medium text-muted-foreground",
+              tight ? "px-4 py-2.5" : "px-5 py-3",
               right(c) && "text-right",
               c.wide && "hidden md:table-cell"
             ),
@@ -2022,7 +2663,8 @@ function DataTable({
           {
             style: { minWidth: c.minWidth },
             className: cn(
-              "px-5 py-3.5 align-middle",
+              "align-middle",
+              tight ? "px-4 py-2" : "px-5 py-3.5",
               right(c) && "text-right",
               c.numeric && "whitespace-nowrap oca-tabular",
               c.wide && "hidden md:table-cell"
@@ -2042,8 +2684,12 @@ function DataTable({
       "ul",
       {
         "aria-label": caption,
-        className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card sm:hidden", className),
-        children: rows.map((r, i) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-2.5 px-4 py-4", children: [
+        className: cn(
+          "divide-y divide-border border border-border bg-card sm:hidden",
+          tight ? "rounded-2xl" : "rounded-[1.25rem]",
+          className
+        ),
+        children: rows.map((r, i) => /* @__PURE__ */ jsxs("li", { className: cn("flex flex-col gap-2.5 px-4", tight ? "py-3" : "py-4"), children: [
           /* @__PURE__ */ jsx("div", { className: "min-w-0 break-words text-[0.9375rem] font-medium", children: primary?.cell(r) }),
           rest.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-[0.875rem]", children: rest.map((c) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
             /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: c.header }),
@@ -2090,13 +2736,14 @@ function Notice({
   title,
   children,
   action,
+  role,
   className
 }) {
   const kind = NOTICE_KIND[tone];
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      role: tone === "danger" || tone === "warning" ? "alert" : "note",
+      role: role ?? (tone === "danger" || tone === "warning" ? "alert" : "note"),
       "data-tone": kind,
       className: cn(
         "flex flex-col gap-3 rounded-2xl border border-border bg-card px-5 py-4 sm:flex-row sm:items-start sm:justify-between",
@@ -2146,45 +2793,66 @@ function LoadingBlock({
   }
   return /* @__PURE__ */ jsx("div", { role: "status", "aria-label": label, className: cn("flex flex-col gap-3", className), children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-16 rounded-2xl" }, i)) });
 }
-function middle(v, head, tail) {
-  return v.length <= head + tail + 1 ? v : `${v.slice(0, head)}\u2026${v.slice(-tail)}`;
+async function wipeIfUnchanged(expected) {
+  try {
+    if (await navigator.clipboard.readText() !== expected) return;
+  } catch {
+  }
+  try {
+    await navigator.clipboard.writeText("");
+  } catch {
+  }
 }
 function useCopy(timeoutMs = 1600) {
   const [copied, setCopied] = useState(false);
   const t = useRef(null);
-  useEffect(() => () => {
-    if (t.current) clearTimeout(t.current);
-  }, []);
+  const wipe = useRef(null);
+  useEffect(
+    () => () => {
+      if (t.current) clearTimeout(t.current);
+    },
+    []
+  );
   const copy = useCallback(
-    async (text) => {
+    async (text, opts = {}) => {
       try {
         await navigator.clipboard.writeText(text);
         setCopied(true);
         if (t.current) clearTimeout(t.current);
         t.current = setTimeout(() => setCopied(false), timeoutMs);
+        if (opts.clearAfter && opts.clearAfter > 0) {
+          if (wipe.current) clearTimeout(wipe.current);
+          wipe.current = setTimeout(() => void wipeIfUnchanged(text), opts.clearAfter);
+        }
+        return true;
       } catch {
         setCopied(false);
+        return false;
       }
     },
     [timeoutMs]
   );
   return { copied, copy };
 }
-function CopyButton({ value, label = "Copy", className }) {
+function CopyButton({ value, label = "Copy", clearAfter, onCopied, className }) {
   const { copied, copy } = useCopy();
+  const done2 = copied ? clearAfter ? `Copied. Cleared in ${Math.round(clearAfter / 1e3)} seconds` : "Copied" : "";
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      onClick: () => void copy(value),
+      onClick: async () => {
+        if (await copy(typeof value === "function" ? value() : value, { clearAfter })) onCopied?.();
+      },
       "aria-label": copied ? "Copied" : label,
+      title: label,
       className: cn(
         "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
         className
       ),
       children: [
         copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Copied" : "" })
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: done2 })
       ]
     }
   );
@@ -2195,12 +2863,27 @@ function HashChip({
   tail = 6,
   copy = true,
   href,
+  explorer,
+  network = "mainnet",
   className
 }) {
-  const shown = middle(value, head, tail);
+  const shown = shortenMiddle(value, head, tail);
+  const link = href ?? (explorer ? explorerUrl(explorer, value, network) : void 0);
+  const offsite = !!link && /^https?:\/\//.test(link);
   const text = /* @__PURE__ */ jsx("span", { title: value, className: "font-mono text-[0.875rem]", children: shown });
   return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex max-w-full items-center gap-1", className), children: [
-    href ? /* @__PURE__ */ jsx("a", { href, className: "underline decoration-foreground/35 underline-offset-4 hover:decoration-foreground", children: text }) : text,
+    link ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: link,
+        ...offsite ? { target: "_blank", rel: "noreferrer" } : {},
+        className: "underline decoration-foreground/35 underline-offset-4 hover:decoration-foreground",
+        children: [
+          text,
+          offsite ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
+        ]
+      }
+    ) : text,
     copy ? /* @__PURE__ */ jsx(CopyButton, { value, label: "Copy full value" }) : null
   ] });
 }
@@ -2254,96 +2937,269 @@ function ActivityList({ items, empty, className }) {
     return /* @__PURE__ */ jsx("li", { children: it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "block transition-colors hover:bg-accent/60", children: body }) : body }, it.id);
   }) });
 }
-var KIND = {
-  package: "text-oca-code-package",
-  tag: "text-oca-code-tag",
-  link: "text-oca-code-link"
+var LANG_NAME = {
+  ts: "TypeScript",
+  typescript: "TypeScript",
+  tsx: "TSX",
+  js: "JavaScript",
+  javascript: "JavaScript",
+  jsx: "JSX",
+  mjs: "JavaScript",
+  json: "JSON",
+  jsonc: "JSON",
+  bash: "Shell",
+  sh: "Shell",
+  shell: "Shell",
+  zsh: "Shell",
+  console: "Terminal",
+  terminal: "Terminal",
+  python: "Python",
+  py: "Python",
+  yaml: "YAML",
+  yml: "YAML",
+  diff: "Diff",
+  text: "Text"
 };
-function PackageCard({ items, className }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "grid gap-x-10 gap-y-7 rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card p-6 text-oca-ink-foreground md:grid-cols-2 md:p-9",
-        className
-      ),
-      children: items.map((it, i) => {
-        const code = /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", KIND[it.kind ?? "package"]), children: it.code });
-        return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-[1.125rem] font-semibold tracking-[-0.01em] text-oca-ink-title", children: it.title }),
-          it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "w-fit underline decoration-transparent underline-offset-4 hover:decoration-current", children: code }) : code,
-          it.note ? /* @__PURE__ */ jsxs("p", { className: "text-[0.9375rem] leading-relaxed text-oca-ink-subtle", children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "// " }),
-            it.note
-          ] }) : null
-        ] }, i);
-      })
-    }
-  );
+function languageName(lang) {
+  return lang ? LANG_NAME[lang.toLowerCase()] ?? lang : void 0;
+}
+function forClipboard(text, lang) {
+  if (grammarOf(lang) !== "shell") return text;
+  const lines = text.split("\n");
+  if (!lines.some((l) => l.startsWith("$ "))) return text;
+  return lines.filter((l) => l.startsWith("$ ")).map((l) => l.slice(2)).join("\n");
+}
+function linesFromDom(pre) {
+  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");
+}
+function prepare(code, lang, marks, diff) {
+  const d = diff ? readDiff(code) : null;
+  const src = d ? d.code : code.replace(/\r?\n$/, "");
+  const lines = highlight(src, lang === "diff" ? void 0 : lang);
+  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,
+    lines: lines.length,
+    diff: !!d
+  };
+}
+function Well({
+  preRef,
+  html,
+  children,
+  lang,
+  lines,
+  maxLines,
+  diff,
+  lineNumbers
+}) {
+  const foldable = maxLines !== void 0 && lines > maxLines + 2;
+  const [open, setOpen] = useState(false);
+  const folded = foldable && !open;
+  const lined = html !== void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(folded && "overflow-hidden"),
+        style: folded ? { maxHeight: `calc(${maxLines} * 1.625em + 2rem)` } : void 0,
+        children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--oca-code-surface)", children: /* @__PURE__ */ jsx(
+          "pre",
+          {
+            ref: preRef,
+            "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]",
+              !lined && "px-5"
+            ),
+            children: lined ? /* @__PURE__ */ jsx("code", { className: "block", "data-lang": lang, dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx("code", { className: "block", "data-lang": lang, children })
+          }
+        ) })
+      }
+    ),
+    foldable ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex justify-center px-5 pb-4", folded && "absolute inset-x-0 bottom-0 pt-16"),
+        style: folded ? { background: "linear-gradient(to top, var(--oca-code-surface) 40%, transparent)" } : void 0,
+        children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((v) => !v),
+            "aria-expanded": open,
+            className: "rounded-full border border-white/20 px-4 py-1.5 text-[0.8125rem] text-white transition-colors hover:bg-white/10",
+            children: open ? "Show less" : `Show all ${lines} lines`
+          }
+        )
+      }
+    ) : null
+  ] });
 }
+var FRAME = "overflow-hidden rounded-[1.25rem] border border-[var(--oca-code-line)] bg-[var(--oca-code-surface)]";
+var COPY_ON_INK = "text-oca-ink-subtle hover:bg-white/10 hover:text-white";
 function CodeBlock({
   code,
+  html,
+  children,
+  lang,
   caption,
   copy = true,
+  clearAfter,
   maxLines,
+  highlight: marks,
+  diff,
+  lineNumbers,
+  actions,
   className
 }) {
-  const lines = code.split("\n").length;
-  const foldable = maxLines !== void 0 && lines > maxLines + 2;
-  const [open, setOpen] = useState(false);
-  const folded = foldable && !open;
+  const preRef = useRef(null);
+  const isDiff = diff || lang === "diff";
+  const markKey = typeof marks === "string" ? marks : marks?.join(",");
+  const prepared = useMemo(
+    () => html === void 0 && children === void 0 && code !== void 0 ? prepare(code, lang, markKey, !!isDiff) : null,
+    [code, html, children, lang, markKey, isDiff]
+  );
+  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);
+  return /* @__PURE__ */ jsxs("figure", { className: cn(FRAME, className), children: [
+    /* @__PURE__ */ jsxs("figcaption", { className: "flex h-11 items-center justify-between gap-3 border-b border-[var(--oca-code-line)] pl-5 pr-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-[0.8125rem] text-oca-ink-subtle", children: caption ?? languageName(lang) ?? "Code" }),
+      /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
+        actions,
+        copy ? /* @__PURE__ */ jsx(CopyButton, { value: read, label: "Copy code", clearAfter, className: COPY_ON_INK }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Well,
+      {
+        preRef,
+        html: markup,
+        lang,
+        lines,
+        maxLines,
+        diff: prepared ? prepared.diff : isDiff,
+        lineNumbers,
+        children
+      }
+    )
+  ] });
+}
+var tabListeners = /* @__PURE__ */ new Map();
+var tabMemory = /* @__PURE__ */ new Map();
+var storeKey = (k) => `oca-code-tab:${k}`;
+function readTab(key) {
+  if (tabMemory.has(key)) return tabMemory.get(key);
+  try {
+    return window.localStorage.getItem(storeKey(key));
+  } catch {
+    return null;
+  }
+}
+function writeTab(key, value) {
+  tabMemory.set(key, value);
+  try {
+    window.localStorage.setItem(storeKey(key), value);
+  } catch {
+  }
+  tabListeners.get(key)?.forEach((l) => l());
+}
+function useSyncedTab(key) {
+  const subscribe2 = useCallback(
+    (cb) => {
+      if (!key) return () => {
+      };
+      const set = tabListeners.get(key) ?? /* @__PURE__ */ new Set();
+      set.add(cb);
+      tabListeners.set(key, set);
+      return () => {
+        set.delete(cb);
+      };
+    },
+    [key]
+  );
+  const value = useSyncExternalStore(
+    subscribe2,
+    () => key ? readTab(key) : null,
+    () => null
+  );
+  return [value, (v) => key && writeTab(key, v)];
+}
+function CodeTabs({
+  items,
+  syncKey,
+  defaultValue,
+  maxLines,
+  className
+}) {
+  const [synced, setSynced] = useSyncedTab(syncKey);
+  const [local, setLocal] = useState(null);
+  const labels = items.map((it) => it.label);
+  const pick = [local, synced, defaultValue].find((v) => !!v && labels.includes(v)) ?? labels[0] ?? "";
+  const active = items.find((it) => it.label === pick);
+  const prepared = useMemo(() => items.map((it) => prepare(it.code, it.lang, void 0, it.lang === "diff")), [items]);
   return /* @__PURE__ */ jsxs(
-    "figure",
+    TabsPrimitive.Root,
     {
-      className: cn(
-        "overflow-hidden rounded-[1.25rem] border border-[var(--oca-code-line)] bg-[var(--oca-code-surface)]",
-        className
-      ),
+      value: pick,
+      onValueChange: (v) => {
+        setLocal(v);
+        setSynced(v);
+      },
+      className: cn(FRAME, className),
       children: [
-        /* @__PURE__ */ jsxs("figcaption", { className: "flex h-11 items-center justify-between gap-3 border-b border-[var(--oca-code-line)] pl-5 pr-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate text-[0.8125rem] text-oca-ink-subtle", children: caption ?? "Code" }),
-          copy ? /* @__PURE__ */ jsx(
-            CopyButton,
-            {
-              value: code,
-              label: "Copy code",
-              className: "text-oca-ink-subtle hover:bg-white/10 hover:text-white"
-            }
-          ) : null
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(folded && "overflow-hidden"),
-              style: folded ? { maxHeight: `calc(${maxLines} * 1.625em + 2.5rem)` } : void 0,
-              children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--oca-code-surface)", children: /* @__PURE__ */ jsx("pre", { className: "w-max min-w-full p-5 font-mono text-[0.875rem] leading-[1.625] text-oca-ink-muted [font-variant-ligatures:none]", children: /* @__PURE__ */ jsx("code", { children: code }) }) })
-            }
-          ),
-          foldable ? /* @__PURE__ */ jsx(
-            "div",
+        /* @__PURE__ */ jsxs("div", { className: "flex h-11 items-center justify-between gap-3 border-b border-[var(--oca-code-line)] pl-2 pr-2", children: [
+          /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--oca-code-surface)", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TabsPrimitive.List, { "aria-label": "Versions", className: "flex w-max items-center gap-0.5", children: items.map((it) => /* @__PURE__ */ jsx(
+            TabsPrimitive.Trigger,
             {
+              value: it.label,
               className: cn(
-                "flex justify-center px-5 pb-4",
-                folded && "absolute inset-x-0 bottom-0 pt-16"
+                "relative inline-flex h-11 items-center whitespace-nowrap px-3 text-[0.8125rem] text-oca-ink-subtle outline-none transition-colors",
+                "hover:text-white focus-visible:text-white focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                "data-[state=active]:text-white",
+                "after:absolute after:inset-x-3 after:bottom-0 after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-oca-orange"
               ),
-              style: folded ? { background: "linear-gradient(to top, var(--oca-code-surface) 40%, transparent)" } : void 0,
-              children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setOpen((v) => !v),
-                  className: "rounded-full border border-white/20 px-4 py-1.5 text-[0.8125rem] text-white transition-colors hover:bg-white/10",
-                  children: open ? "Show less" : `Show all ${lines} lines`
-                }
-              )
+              children: it.label
+            },
+            it.label
+          )) }) }),
+          active ? /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              value: () => forClipboard(prepared[items.indexOf(active)]?.copy ?? active.code, active.lang),
+              label: `Copy ${active.label}`,
+              className: COPY_ON_INK
             }
           ) : null
-        ] })
+        ] }),
+        items.map((it, i) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { value: it.label, className: "outline-none", tabIndex: -1, children: /* @__PURE__ */ jsx(
+          Well,
+          {
+            html: prepared[i].html,
+            lang: it.lang,
+            lines: prepared[i].lines,
+            maxLines,
+            diff: prepared[i].diff
+          }
+        ) }, it.label))
       ]
     }
   );
 }
+function InstallTabs({ pkg, dev = false, className }) {
+  const items = [
+    { label: "npm", code: `npm install ${dev ? "--save-dev " : ""}${pkg}`, lang: "bash" },
+    { label: "yarn", code: `yarn add ${dev ? "--dev " : ""}${pkg}`, lang: "bash" },
+    { label: "pnpm", code: `pnpm add ${dev ? "--save-dev " : ""}${pkg}`, lang: "bash" }
+  ];
+  return /* @__PURE__ */ jsx(CodeTabs, { items, syncKey: "package-manager", className });
+}
 function SplitBar({
   segments,
   caption,
@@ -2728,7 +3584,7 @@ function ErrorPage({
       /* @__PURE__ */ jsx("p", { className: "oca-lead oca-enter [--enter-delay:150ms]", children: detail ?? words.detail }),
       /* @__PURE__ */ jsx("div", { className: "oca-enter flex flex-wrap gap-3 [--enter-delay:230ms]", children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         server ? /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), children: "Try again" }) : null,
-        /* @__PURE__ */ jsx(Button, { asChild: true, variant: server ? "secondary" : "primary", children: /* @__PURE__ */ jsx(Link5, { href: home, children: "Go home" }) })
+        /* @__PURE__ */ jsx(Button, { asChild: true, variant: server ? "secondary" : "primary", children: /* @__PURE__ */ jsx(Link8, { href: home, children: "Go home" }) })
       ] }) })
     ] }),
     art !== null ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "oca-enter hidden justify-center md:col-span-5 md:flex [--enter-delay:120ms]", children: art ?? /* @__PURE__ */ jsx(MarkOutline, { className: "w-full max-w-[20rem] text-oca-hairline-strong" }) }) : null
@@ -2856,7 +3712,7 @@ function TextLink({
   const internal = href.startsWith("/") && !href.startsWith("/api/") && !href.startsWith("/.well-known/");
   const offsite = external ?? /^https?:\/\//.test(href);
   if (internal && !offsite) {
-    return /* @__PURE__ */ jsx(Link5, { href, className: cn(LINK, className), children });
+    return /* @__PURE__ */ jsx(Link8, { href, className: cn(LINK, className), children });
   }
   return /* @__PURE__ */ jsxs("a", { href, className: cn(LINK, className), ...offsite ? { target: "_blank", rel: "noreferrer" } : {}, children: [
     children,
@@ -3044,7 +3900,8 @@ var FAMILY = [
     group: "app",
     line: "Builders find co-founders and backers.",
     status: "testing",
-    protocols: ["attest"]
+    // Signs in with an orangecheck account and a wallet; uses none of the six directly.
+    protocols: []
   },
   {
     slug: "me-demo",
@@ -3136,19 +3993,32 @@ function ProtocolGrid({
         ] }),
         p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status }) : null
       ] }),
-      /* @__PURE__ */ jsx("h3", { className: "oca-display-3", children: /* @__PURE__ */ jsx("a", { href: link === "tool" ? p.toolHref : p.pageHref, className: STRETCH, children: p.label }) }),
+      /* @__PURE__ */ jsx("h3", { className: "oca-display-3", children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: link === "tool" ? p.toolHref : link === "docs" ? `${DOCS_HREF}/${p.slug}` : p.pageHref,
+          className: STRETCH,
+          children: p.label
+        }
+      ) }),
       /* @__PURE__ */ jsx("p", { className: "oca-body", children: p.line }),
       /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between gap-3 pt-2 text-[0.875rem] text-muted-foreground", children: [
         /* @__PURE__ */ jsxs("span", { className: "oca-tabular", children: [
           "Nostr kind ",
           p.kinds
         ] }),
-        /* @__PURE__ */ jsx(
+        link === "tool" ? /* @__PURE__ */ jsx(
           ArrowUpRight,
           {
             "aria-hidden": true,
             className: "size-4 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-foreground"
           }
+        ) : /* @__PURE__ */ jsx(
+          ArrowRight,
+          {
+            "aria-hidden": true,
+            className: "size-4 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-foreground"
+          }
         )
       ] })
     ] }) }, slug);
@@ -3434,6 +4304,7 @@ function VerifyReport({
   facts,
   notChecked,
   actions,
+  as: Heading = "h2",
   className
 }) {
   return /* @__PURE__ */ jsxs(
@@ -3444,7 +4315,7 @@ function VerifyReport({
       children: [
         /* @__PURE__ */ jsxs("header", { className: "flex flex-col items-start gap-3 p-6 md:p-8", children: [
           /* @__PURE__ */ jsx(StatusBadge, { status: verdict }),
-          /* @__PURE__ */ jsx("h3", { className: "oca-display-3", children: title }),
+          /* @__PURE__ */ jsx(Heading, { className: "oca-display-3", children: title }),
           summary ? /* @__PURE__ */ jsx("p", { className: "oca-body max-w-[40rem]", children: summary }) : null
         ] }),
         /* @__PURE__ */ jsx("ul", { "aria-label": "Checks", className: "divide-y divide-border border-t border-border", children: checks.map((c, i) => {
@@ -3544,9 +4415,1207 @@ function SignMessage({
     )
   ] });
 }
-function SiteRow({ site, here, onNavigate }) {
-  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-    "a",
+var isInternal = (href) => href.startsWith("/") || href.startsWith("#");
+function DocLink({ href, className, children, ...rest }) {
+  return isInternal(href) ? /* @__PURE__ */ jsx(Link8, { href, className, ...rest, children }) : /* @__PURE__ */ jsx("a", { href, className, ...rest, children });
+}
+function Breadcrumbs({ items, action, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-11 items-center justify-between gap-4 sm:min-h-0", className), children: [
+    /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "min-w-0", children: /* @__PURE__ */ 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__ */ jsxs("li", { className: cn("flex items-center gap-1.5", last ? "min-w-0" : "shrink-0"), children: [
+        c.href && !last ? /* @__PURE__ */ 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__ */ jsx("span", { "aria-current": last ? "page" : void 0, className: cn("truncate", last && "text-foreground"), children: c.label }),
+        !last ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-oca-subtle" }) : null
+      ] }, i);
+    }) }) }),
+    action ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[0.8125rem] text-muted-foreground", children: [
+          dir === "prev" ? /* @__PURE__ */ jsx(ArrowLeft, { "aria-hidden": true, className: "size-3.5" }) : null,
+          dir === "prev" ? "Previous" : "Next",
+          l.section ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }) : null,
+          l.section ? /* @__PURE__ */ jsx("span", { className: "truncate", children: l.section }) : null,
+          dir === "next" ? /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true, className: "size-3.5" }) : null
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-[1rem] font-medium leading-snug text-foreground", children: l.label })
+      ]
+    }
+  );
+  return /* @__PURE__ */ 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] = useState([]);
+  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 = 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__ */ jsxs("nav", { "aria-labelledby": title ? id : void 0, "aria-label": title ? void 0 : "On this page", className, children: [
+      title ? /* @__PURE__ */ jsx("p", { id, className: "mb-3 text-[0.875rem] font-medium", children: title }) : null,
+      /* @__PURE__ */ jsx("ul", { children: items.map((t) => {
+        const on = t.id === activeId;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("li", { className: "relative pb-8 pl-11 last:pb-0 [counter-increment:oca-step]", children: [
+    /* @__PURE__ */ 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__ */ jsx("span", { "aria-hidden": true, className: "absolute bottom-1 left-[0.8125rem] top-9 w-px bg-border" }),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "mt-2 text-muted-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children })
+  ] });
+}
+function Steps({ children, className }) {
+  return /* @__PURE__ */ 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) ? ArrowRight : ArrowUpRight;
+  return /* @__PURE__ */ jsxs(
+    DocLink,
+    {
+      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: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-start justify-between gap-3", children: [
+          icon ? /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[1rem] font-medium leading-snug text-foreground", children: title }),
+          /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
+            meta,
+            /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[1rem] font-medium leading-snug text-foreground", children: title }) : null,
+        description ? /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] leading-relaxed text-muted-foreground", children: description }) : null
+      ]
+    }
+  );
+}
+function CardGrid({ columns = 2, children, className }) {
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: "not-prose my-6 overflow-hidden rounded-2xl border border-border bg-card", children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ 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",
+  className
+}) {
+  const hasDefault = rows.some((r) => r.default !== void 0);
+  const marks = (r) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    r.required ? /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] text-oca-accent-ink", children: "Required" }) : null,
+    r.deprecated ? /* @__PURE__ */ jsx(Badge, { tone: "muted", children: "Deprecated" }) : null,
+    r.status ? /* @__PURE__ */ jsx(StatusBadge, { status: r.status }) : null
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn("not-prose my-6", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl border border-border bg-card max-sm:hidden", children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.875rem]", children: [
+      caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-oca-hairline-strong bg-oca-table-head text-[0.8125rem]", children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: nameHeader }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Type" }),
+        hasDefault ? /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Default" }) : null,
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Description" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: rows.map((r) => /* @__PURE__ */ jsxs("tr", { className: "align-top", children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", className: "px-4 py-3 text-left font-normal", children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start gap-1", children: [
+          /* @__PURE__ */ jsx("code", { className: cn("font-mono text-[0.8125rem] text-foreground", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
+          marks(r)
+        ] }) }),
+        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-[0.8125rem] text-muted-foreground", children: r.type ?? "\u2014" }),
+        hasDefault ? /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-[0.8125rem] text-muted-foreground", children: r.default ?? "\u2014" }) : null,
+        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 leading-relaxed text-muted-foreground", children: r.description })
+      ] }, r.name)) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("ul", { "aria-label": caption, className: "divide-y divide-border rounded-2xl border border-border bg-card sm:hidden", children: rows.map((r) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-1.5 px-4 py-3.5", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+        /* @__PURE__ */ jsx("code", { className: cn("font-mono text-[0.875rem] text-foreground", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
+        r.type ? /* @__PURE__ */ jsx("code", { className: "break-all font-mono text-[0.8125rem] text-muted-foreground", children: r.type }) : null
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-2 empty:hidden", children: marks(r) }),
+      r.description ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-relaxed text-muted-foreground", children: r.description }) : null,
+      r.default !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[0.8125rem] text-muted-foreground", children: [
+        "Default ",
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: r.default })
+      ] }) : null
+    ] }, r.name)) })
+  ] });
+}
+function useDarkMode() {
+  const [dark, setDark] = useState(false);
+  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 = useRef(null);
+  const dark = useDarkMode();
+  const raw = useId();
+  const [svg, setSvg] = useState(null);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    let live = true;
+    const el = ref.current;
+    if (!el) return;
+    (async () => {
+      try {
+        const mod = await load();
+        const mermaid = "default" in mod ? mod.default : mod;
+        mermaid.initialize({ startOnLoad: false, securityLevel: "strict", theme: "base", themeVariables: mermaidTheme(el) });
+        const { svg: drawn } = await mermaid.render(`oca-diagram-${raw.replace(/[^a-zA-Z0-9]/g, "")}-${dark ? "d" : "l"}`, chart);
+        if (live) {
+          setSvg(naturalSize(drawn));
+          setFailed(false);
+        }
+      } catch {
+        if (live) setFailed(true);
+      }
+    })();
+    return () => {
+      live = false;
+    };
+  }, [chart, dark, load, raw]);
+  if (failed) return /* @__PURE__ */ jsx(CodeBlock, { code: chart, caption: "Diagram (shown as its source)", className: cn("my-6", className) });
+  return /* @__PURE__ */ jsxs("figure", { ref, className: cn("not-prose my-6 overflow-hidden rounded-[1.25rem] border border-border bg-card", className), children: [
+    svg ? /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        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__ */ jsx("div", { role: "status", "aria-label": "Drawing the diagram", className: "p-6", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full rounded-xl" }) }),
+    caption ? /* @__PURE__ */ jsx("figcaption", { className: "border-t border-border px-5 py-3 text-[0.8125rem] text-muted-foreground", children: caption }) : null
+  ] });
+}
+var HEADING = {
+  h1: "oca-display-3 mb-4 text-foreground",
+  h2: "mb-3 mt-12 text-[1.375rem] font-medium leading-tight tracking-[-0.015em] text-foreground md:text-[1.5rem]",
+  h3: "mb-2 mt-9 text-[1.125rem] font-medium leading-snug tracking-[-0.01em] text-foreground",
+  h4: "mb-2 mt-7 text-[1rem] font-medium leading-snug text-foreground"
+};
+function DocsHeading({
+  as: Tag,
+  id,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Tag, { id, className: cn("group scroll-mt-28", HEADING[Tag], className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { "data-heading-text": "", children }),
+    id && Tag !== "h1" ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: `#${id}`,
+        className: "ml-2 inline-block rounded-md px-1 align-baseline text-[0.85em] font-normal text-oca-subtle no-underline opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100",
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "#" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Link to this section" })
+        ]
+      }
+    ) : null
+  ] });
+}
+function 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 (isValidElement(node)) return codeText(node.props.children);
+  return "";
+}
+function codeLang(node) {
+  const child = Children.toArray(node)[0];
+  if (!isValidElement(child)) return void 0;
+  const cls = child.props.className ?? "";
+  return cls.match(/language-([\w+-]+)/)?.[1];
+}
+function useMacKeys() {
+  const [mac, setMac] = useState(true);
+  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 = forwardRef(function SearchButton2({ label = "Search", onClick, className }, ref) {
+  const mac = useMacKeys();
+  return /* @__PURE__ */ 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__ */ jsx(Search, { "aria-hidden": true, className: "size-[1.125rem] shrink-0 md:size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only flex-1 text-left text-[0.9375rem] md:not-sr-only", children: label }),
+        /* @__PURE__ */ 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] = useState(false);
+  const open = openProp ?? own;
+  const setOpen = (v) => {
+    if (openProp === void 0) setOwn(v);
+    onOpenChange?.(v);
+  };
+  const [query, setQuery] = useState(defaultQuery);
+  const [groups, setGroups] = useState([]);
+  const [state, setState] = useState("idle");
+  const [active, setActive] = useState(0);
+  const listId = useId();
+  const listRef = useRef(null);
+  const buttonRef = useRef(null);
+  const returnTo = useRef(null);
+  const flat = useMemo(() => groups.flatMap((g) => g.results), [groups]);
+  const latest = useRef({ open, setOpen, onQuery });
+  latest.current = { open, setOpen, onQuery };
+  useEffect(() => {
+    if (!hotkey) return;
+    const onKey = (e) => {
+      const { open: isOpen, setOpen: set } = latest.current;
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        set(!isOpen);
+      } else if (e.key === "/" && !isOpen && !typing(e.target)) {
+        e.preventDefault();
+        set(true);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [hotkey]);
+  useEffect(() => {
+    const q = query.trim();
+    if (!q) {
+      setGroups([]);
+      setState("idle");
+      return;
+    }
+    const ctl = new AbortController();
+    setState("loading");
+    const t = setTimeout(async () => {
+      try {
+        const out = await latest.current.onQuery(q, ctl.signal);
+        if (ctl.signal.aborted) return;
+        setGroups(out.filter((g) => g.results.length > 0));
+        setActive(0);
+        setState("done");
+      } catch {
+        if (!ctl.signal.aborted) setState("error");
+      }
+    }, debounceMs);
+    return () => {
+      clearTimeout(t);
+      ctl.abort();
+    };
+  }, [query, debounceMs]);
+  useEffect(() => {
+    listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+  const choose = (r) => {
+    setOpen(false);
+    if (onSelect) onSelect(r);
+    else window.location.assign(r.href);
+  };
+  const optionId = (i) => `${listId}-o${i}`;
+  const showList = state === "done" && flat.length > 0;
+  let index = -1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    button ? /* @__PURE__ */ jsx(SearchButton, { ref: buttonRef, label, onClick: () => setOpen(true), className }) : null,
+    /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "oca-animate-fade fixed inset-0 z-50 bg-[rgb(10_10_10/0.38)] backdrop-blur-[2px]" }),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          "aria-describedby": void 0,
+          onOpenAutoFocus: () => {
+            const el = document.activeElement;
+            returnTo.current = el instanceof HTMLElement && el !== document.body ? el : null;
+          },
+          onCloseAutoFocus: (e) => {
+            const back = returnTo.current?.isConnected ? returnTo.current : buttonRef.current;
+            if (back) {
+              e.preventDefault();
+              back.focus();
+            }
+          },
+          className: "oca-animate-rise fixed left-1/2 top-3 z-50 flex max-h-[calc(100dvh-1.5rem)] w-[calc(100vw-1.5rem)] -translate-x-1/2 flex-col overflow-hidden rounded-[1.5rem] border border-border bg-popover text-popover-foreground shadow-xl outline-none sm:top-[12vh] sm:max-h-[min(36rem,76vh)] sm:w-[min(92vw,40rem)]",
+          children: [
+            /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: label }),
+            /* @__PURE__ */ jsxs("div", { className: "flex h-14 shrink-0 items-center gap-3 border-b border-border pl-5 pr-3", children: [
+              state === "loading" ? /* @__PURE__ */ jsx(Spinner, { className: "size-[1.125rem] text-muted-foreground" }) : /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-[1.125rem] shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  autoFocus: true,
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  onKeyDown: (e) => {
+                    if (!showList) return;
+                    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                      e.preventDefault();
+                      const d = e.key === "ArrowDown" ? 1 : -1;
+                      setActive((a) => (a + d + flat.length) % flat.length);
+                    } else if (e.key === "Enter" && flat[active]) {
+                      e.preventDefault();
+                      choose(flat[active]);
+                    }
+                  },
+                  placeholder,
+                  role: "combobox",
+                  "aria-label": label,
+                  "aria-expanded": showList,
+                  "aria-controls": listId,
+                  "aria-autocomplete": "list",
+                  "aria-activedescendant": showList ? optionId(active) : void 0,
+                  spellCheck: false,
+                  autoComplete: "off",
+                  className: "h-full min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-oca-subtle"
+                }
+              ),
+              /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "inline-flex h-8 shrink-0 items-center rounded-md border border-border px-2 text-[0.75rem] text-muted-foreground transition-colors hover:text-foreground", children: [
+                /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "Close" }),
+                /* @__PURE__ */ jsx("span", { className: "max-sm:hidden", "aria-hidden": true, children: "Esc" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only max-sm:hidden", children: "Close search" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { ref: listRef, className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-2", children: [
+              /* @__PURE__ */ jsx("div", { id: listId, role: "listbox", "aria-label": "Results", className: cn(!showList && "hidden"), children: groups.map((g, gi) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": typeof g.label === "string" ? g.label : void 0, className: "pb-1", children: [
+                /* @__PURE__ */ jsx("p", { "aria-hidden": true, className: "px-3 pb-1.5 pt-3 text-[0.8125rem] text-muted-foreground", children: g.label }),
+                g.results.map((r) => {
+                  index++;
+                  const i = index;
+                  const on = i === active;
+                  return /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      id: optionId(i),
+                      href: r.href,
+                      role: "option",
+                      "aria-selected": on,
+                      tabIndex: -1,
+                      onMouseMove: () => setActive(i),
+                      onClick: (e) => {
+                        if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+                        e.preventDefault();
+                        choose(r);
+                      },
+                      className: cn(
+                        "flex items-start gap-3 rounded-xl px-3 py-2.5 transition-colors",
+                        on ? "bg-accent" : "hover:bg-accent"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                          /* @__PURE__ */ jsx("span", { className: "truncate text-[0.9375rem] font-medium text-foreground", children: r.title }),
+                          r.section ? /* @__PURE__ */ jsx("span", { className: "truncate text-[0.8125rem] text-muted-foreground", children: r.section }) : null,
+                          r.excerptHtml ? /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "line-clamp-2 text-[0.875rem] leading-snug text-muted-foreground [&_mark]:rounded-sm [&_mark]:bg-[color-mix(in_oklab,var(--oca-orange)_22%,transparent)] [&_mark]:px-0.5 [&_mark]:text-foreground",
+                              dangerouslySetInnerHTML: { __html: r.excerptHtml }
+                            }
+                          ) : r.excerpt ? /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-[0.875rem] leading-snug text-muted-foreground", children: r.excerpt }) : null
+                        ] }),
+                        /* @__PURE__ */ jsx(CornerDownLeft, { "aria-hidden": true, className: cn("mt-1 size-4 shrink-0 text-muted-foreground", !on && "invisible") })
+                      ]
+                    },
+                    r.id
+                  );
+                })
+              ] }, gi)) }),
+              state === "idle" ? /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-[0.9375rem] text-muted-foreground", children: idle ?? "Type a word: a protocol, a function, an error." }) : null,
+              state === "done" && flat.length === 0 ? /* @__PURE__ */ jsxs("p", { role: "status", className: "px-3 py-6 text-[0.9375rem] text-muted-foreground", children: [
+                "No results for \u201C",
+                query.trim(),
+                "\u201D."
+              ] }) : null,
+              state === "error" ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-3 py-6 text-[0.9375rem] text-muted-foreground", children: "Search is not available right now. Try again in a moment." }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "hidden shrink-0 items-center gap-4 border-t border-border px-5 py-2.5 text-[0.75rem] text-muted-foreground sm:flex", children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx(Kbd, { children: "\u2191" }),
+                /* @__PURE__ */ jsx(Kbd, { children: "\u2193" }),
+                " to move"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx(Kbd, { children: "\u21B5" }),
+                " to open"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx(Kbd, { children: "esc" }),
+                " to close"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: state === "done" ? `${flat.length} result${flat.length === 1 ? "" : "s"}` : "" })
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+function pretty(content) {
+  try {
+    return JSON.stringify(JSON.parse(content), null, 2);
+  } catch {
+    return null;
+  }
+}
+function download(content, filename, mime) {
+  const url = URL.createObjectURL(new Blob([content], { type: mime }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+var BAR_BUTTON = "inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-[0.75rem] text-oca-ink-subtle transition-colors hover:bg-white/10 hover:text-white";
+function ArtifactView({
+  content,
+  title,
+  filename,
+  mime,
+  defaultView = "formatted",
+  maxLines = 28,
+  className
+}) {
+  const formatted = useMemo(() => pretty(content), [content]);
+  const [view, setView] = useState(formatted ? defaultView : "raw");
+  const shown = view === "formatted" && formatted ? formatted : content;
+  const json = formatted !== null;
+  return /* @__PURE__ */ jsx(
+    CodeBlock,
+    {
+      code: shown,
+      lang: json ? "json" : void 0,
+      caption: title,
+      maxLines,
+      className,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        json ? /* @__PURE__ */ jsx("span", { role: "group", "aria-label": "View", className: "mr-1 flex items-center rounded-full bg-white/[0.06] p-0.5", children: ["formatted", "raw"].map((v) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": view === v,
+            onClick: () => setView(v),
+            className: cn(
+              "h-7 rounded-full px-2.5 text-[0.75rem] transition-colors",
+              view === v ? "bg-white/[0.12] text-white" : "text-oca-ink-subtle hover:text-white"
+            ),
+            children: v === "formatted" ? "Formatted" : "Raw"
+          },
+          v
+        )) }) : null,
+        filename ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => download(content, filename, mime ?? (json ? "application/json" : "text/plain")),
+            className: BAR_BUTTON,
+            "aria-label": `Download ${filename}`,
+            children: [
+              /* @__PURE__ */ jsx(Download, { "aria-hidden": true, className: "size-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "max-sm:hidden", children: "Download" })
+            ]
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+function DropZone({
+  onFile,
+  onText,
+  accept,
+  title = "Drop a file here, or choose one",
+  hint,
+  privacy = "It stays in your browser. Only its hash leaves this page.",
+  file,
+  progress,
+  progressLabel = "Hashing",
+  onClear,
+  error,
+  disabled = false,
+  className
+}) {
+  const input = useRef(null);
+  const [over, setOver] = useState(false);
+  const depth = useRef(0);
+  const [mode, setMode] = useState("file");
+  const [text, setText] = useState("");
+  const errorId = useId();
+  const titleId = useId();
+  const busy = progress !== null && progress !== void 0;
+  const pct = busy ? Math.round(Math.max(0, Math.min(1, progress)) * 100) : 0;
+  const take = (f) => {
+    if (f && !disabled) onFile(f);
+  };
+  const privacyLine = privacy === null ? null : /* @__PURE__ */ jsxs("p", { className: "flex items-start gap-2 text-[0.8125rem] leading-snug text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Lock, { "aria-hidden": true, className: "mt-0.5 size-3.5 shrink-0" }),
+    /* @__PURE__ */ jsx("span", { children: privacy })
+  ] });
+  if (mode === "text" && onText) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          value: text,
+          onChange: (e) => setText(e.target.value),
+          rows: 6,
+          "aria-label": "Text",
+          "aria-describedby": error ? errorId : void 0,
+          "aria-invalid": error ? true : void 0,
+          placeholder: "Paste the text here",
+          className: "font-mono text-base md:text-[0.875rem]"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", disabled: !text.trim() || disabled, onClick: () => onText(text), children: "Use this text" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setMode("file"), children: "Choose a file instead" })
+      ] }),
+      error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-[0.8125rem] text-destructive", children: error }) : null,
+      privacyLine
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": titleId,
+        "aria-describedby": error ? errorId : void 0,
+        "aria-busy": busy || void 0,
+        onDragEnter: (e) => {
+          e.preventDefault();
+          depth.current++;
+          if (!disabled) setOver(true);
+        },
+        onDragOver: (e) => e.preventDefault(),
+        onDragLeave: () => {
+          depth.current = Math.max(0, depth.current - 1);
+          if (depth.current === 0) setOver(false);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          depth.current = 0;
+          setOver(false);
+          take(e.dataTransfer.files?.[0]);
+        },
+        className: cn(
+          "relative flex flex-col gap-3 rounded-[1.25rem] border border-dashed transition-colors",
+          file ? "px-4 py-4 sm:px-5" : "items-center px-5 py-8 text-center md:py-10",
+          over ? "border-foreground bg-accent" : "border-oca-hairline-strong bg-card",
+          error && "border-destructive",
+          disabled && "opacity-55"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: input,
+              type: "file",
+              accept,
+              disabled,
+              tabIndex: -1,
+              "aria-hidden": true,
+              className: "sr-only",
+              onChange: (e) => {
+                take(e.target.files?.[0]);
+                e.target.value = "";
+              }
+            }
+          ),
+          file ? /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted text-foreground", children: busy ? /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-5" }) : /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-5" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ jsx("span", { id: titleId, className: "truncate text-[0.9375rem] font-medium", title: file.name, children: file.name }),
+                /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] text-muted-foreground", children: [formatBytes(file.size), file.type].filter(Boolean).join(" \xB7 ") })
+              ] }),
+              !busy && onClear ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onClear, disabled, className: "shrink-0", children: "Choose another" }) : null
+            ] }),
+            busy ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "progressbar",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": pct,
+                  "aria-label": typeof progressLabel === "string" ? progressLabel : "Progress",
+                  className: "h-1.5 overflow-hidden rounded-full bg-muted",
+                  children: /* @__PURE__ */ jsx("div", { className: "h-full rounded-full bg-foreground transition-[width] duration-200", style: { width: `${pct}%` } })
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "text-[0.8125rem] text-muted-foreground oca-tabular", children: [
+                progressLabel,
+                " ",
+                pct,
+                "%"
+              ] })
+            ] }) : null
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "flex size-11 items-center justify-center rounded-full bg-muted text-foreground", children: /* @__PURE__ */ jsx(Upload, { "aria-hidden": true, className: "size-5" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("p", { id: titleId, className: "text-[1rem] font-medium", children: over ? "Drop it to add it" : title }),
+              hint ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", disabled, onClick: () => input.current?.click(), children: "Choose a file" }),
+              onText ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", disabled, onClick: () => setMode("text"), children: "Paste text instead" }) : null
+            ] })
+          ] })
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-[0.8125rem] text-destructive", children: error }) : null,
+    privacyLine
+  ] });
+}
+function FormSection({
+  n,
+  title,
+  hint,
+  status,
+  action,
+  as: Heading = "h2",
+  id,
+  children,
+  className
+}) {
+  const titleId = useId();
+  const tight = useDensity() === "compact";
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id,
+      "aria-labelledby": titleId,
+      "aria-current": status === "current" ? "step" : void 0,
+      className: cn("scroll-mt-24 rounded-[1.25rem] border border-border bg-card", className),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: cn("flex items-start gap-3.5", tight ? "px-5 pt-5" : "px-6 pt-6"), children: [
+          n !== void 0 ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "mt-px flex size-7 shrink-0 items-center justify-center rounded-full border text-[0.8125rem] oca-tabular",
+                status === "done" && "border-primary bg-primary text-primary-foreground",
+                status === "current" && "border-brand text-oca-accent-ink",
+                status === "blocked" && "border-destructive text-destructive",
+                (status === "upcoming" || status === void 0) && "border-oca-hairline-strong text-muted-foreground"
+              ),
+              children: status === "done" ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", strokeWidth: 3 }) : n
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs(Heading, { id: titleId, className: "text-[1.0625rem] font-medium leading-snug tracking-[-0.008em]", children: [
+              n !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                "Step ",
+                n,
+                ": "
+              ] }) : null,
+              title,
+              status === "done" ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (done)" }) : null
+            ] }),
+            hint ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: hint }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", tight ? "gap-4 p-5" : "gap-5 p-6", n !== void 0 && (tight ? "sm:pl-[3.875rem]" : "sm:pl-[4.125rem]")), children })
+      ]
+    }
+  );
+}
+var STATE_TONE = { good: "success", attention: "brand", bad: "danger", neutral: "neutral", quiet: "muted" };
+function StateBadge({
+  tone = "neutral",
+  children,
+  title,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Badge, { tone: STATE_TONE[tone], title, className, children });
+}
+function createStateBadge(states) {
+  function ProtocolStateBadge({ state, className }) {
+    const def = states[state];
+    if (!def) {
+      if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+        console.warn(`StateBadge: no state "${state}"; known: ${Object.keys(states).join(", ")}`);
+      }
+      return /* @__PURE__ */ jsx(StateBadge, { className, children: String(state) });
+    }
+    return /* @__PURE__ */ jsx(StateBadge, { tone: def.tone, title: def.hint, className, children: def.label });
+  }
+  return ProtocolStateBadge;
+}
+function BlockHeight({
+  height,
+  label = false,
+  link = true,
+  network = "mainnet",
+  className
+}) {
+  const text = `${label ? "block " : ""}${formatBlockHeight(height)}`;
+  if (!link) return /* @__PURE__ */ jsx("span", { className: cn("oca-tabular", className), children: text });
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: explorerUrl("block", Math.trunc(height), network),
+      target: "_blank",
+      rel: "noreferrer",
+      title: `Block ${formatBlockHeight(height)} on mempool.space`,
+      className: cn("oca-tabular underline decoration-foreground/35 underline-offset-4 hover:decoration-foreground", className),
+      children: [
+        text,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens mempool.space in a new tab)" })
+      ]
+    }
+  );
+}
+var ANCHOR = {
+  anchored: { label: "Anchored", tone: "good" },
+  pending: { label: "Anchor pending", tone: "attention" },
+  unverified: { label: "Not checked", tone: "quiet" },
+  none: { label: "Not anchored", tone: "quiet" },
+  fail: { label: "Does not check out", tone: "bad" }
+};
+function hostOf(url) {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}
+function AnchorStatus({
+  state,
+  blockHeight,
+  blockTime,
+  submittedAt,
+  calendar,
+  message,
+  network = "mainnet",
+  variant = "detail",
+  className
+}) {
+  const def = ANCHOR[state];
+  const block = blockHeight !== void 0 ? /* @__PURE__ */ jsx(BlockHeight, { height: blockHeight, label: true, network }) : null;
+  const line = message ?? (state === "anchored" ? block ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "In ",
+    block,
+    blockTime !== void 0 ? ` \xB7 ${formatUtc(blockTime)}` : null
+  ] }) : "Its hash is in a Bitcoin block." : state === "pending" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "Submitted",
+    submittedAt !== void 0 ? ` ${formatUtc(submittedAt)}` : "",
+    " to",
+    " ",
+    calendar ? hostOf(calendar) : "an OpenTimestamps calendar",
+    ". Waiting for a Bitcoin block."
+  ] }) : state === "unverified" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "The proof names ",
+    block ?? "a block",
+    ", but its header could not be fetched to check it."
+  ] }) : state === "fail" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "The proof does not lead to ",
+    block ?? "the block it names",
+    "."
+  ] }) : "No timestamp yet. The signature still checks offline.");
+  if (variant === "badge") {
+    const plain = typeof line === "string" ? line : void 0;
+    return /* @__PURE__ */ jsx(StateBadge, { tone: def.tone, title: plain, className, children: def.label });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start gap-1.5", className), children: [
+    /* @__PURE__ */ jsx(StateBadge, { tone: def.tone, children: def.label }),
+    /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: line })
+  ] });
+}
+function BlockCountdown({
+  target,
+  tip,
+  from,
+  reached = "Reached",
+  minutesPerBlock = 10,
+  network = "mainnet",
+  className
+}) {
+  const known = typeof tip === "number";
+  const left = known ? target - tip : null;
+  const done2 = left !== null && left <= 0;
+  const share = known && from !== void 0 && target > from ? Math.min(1, Math.max(0, (tip - from) / (target - from))) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] leading-snug", children: !known ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "At ",
+      /* @__PURE__ */ jsx(BlockHeight, { height: target, label: true, network })
+    ] }) : done2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      reached,
+      " at ",
+      /* @__PURE__ */ jsx(BlockHeight, { height: target, label: true, network })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      "In ",
+      /* @__PURE__ */ jsx("span", { className: "oca-tabular font-medium", children: formatBlockHeight(left) }),
+      " block",
+      left === 1 ? "" : "s",
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        ", ",
+        blocksToDuration(left, minutesPerBlock)
+      ] })
+    ] }) }),
+    share !== null ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(share * 100),
+        "aria-label": "Blocks passed",
+        className: "h-1.5 overflow-hidden rounded-full bg-muted",
+        children: /* @__PURE__ */ jsx("div", { className: "h-full rounded-full bg-foreground", style: { width: `${share * 100}%` } })
+      }
+    ) : null,
+    known && !done2 ? /* @__PURE__ */ jsxs("p", { className: "text-[0.8125rem] text-muted-foreground", children: [
+      "Target ",
+      /* @__PURE__ */ jsx(BlockHeight, { height: target, network }),
+      " \xB7 tip ",
+      /* @__PURE__ */ jsx("span", { className: "oca-tabular", children: formatBlockHeight(tip) })
+    ] }) : null
+  ] });
+}
+function Meter({
+  value,
+  max,
+  ghost,
+  label,
+  figure,
+  tone = "ink",
+  size = "md",
+  className
+}) {
+  const id = useId();
+  const total = max > 0 ? max : 1;
+  const v = Math.max(0, Math.min(1, value / total));
+  const g = ghost ? Math.max(0, Math.min(1 - v, ghost / total)) : 0;
+  const pct = `${Math.round(v * 100)}%`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-4 text-[0.875rem]", children: [
+      /* @__PURE__ */ jsx("span", { id, className: "min-w-0 truncate", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 oca-tabular text-muted-foreground", children: figure ?? pct })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "meter",
+        "aria-labelledby": id,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-valuetext": typeof figure === "string" ? figure : pct,
+        className: cn("flex overflow-hidden rounded-full bg-muted", size === "sm" ? "h-1.5" : "h-2.5"),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("h-full shrink-0 rounded-full", tone === "brand" ? "bg-oca-orange-deep" : "bg-foreground"),
+              style: { width: `${v * 100}%` }
+            }
+          ),
+          g > 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "-ml-1.5 h-full shrink-0 rounded-r-full pl-1.5 text-foreground/45",
+              style: {
+                width: `calc(${g * 100}% + 0.375rem)`,
+                backgroundImage: "repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 6px)"
+              }
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function FilterChips({
+  options,
+  value,
+  onChange,
+  label,
+  className
+}) {
+  const tight = useDensity() === "compact";
+  const multi = Array.isArray(value);
+  const isOn = (v) => multi ? value.includes(v) : value === v;
+  const press = (v) => {
+    if (multi) {
+      const cur = value;
+      onChange(cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v]);
+    } else onChange(v);
+  };
+  return /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--background)", className: cn("w-full", className), children: /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: "flex w-max items-center gap-2 py-0.5", children: options.map((o) => {
+    const on = isOn(o.value);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": on,
+        onClick: () => press(o.value),
+        className: cn(
+          "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3.5 text-[0.875rem] transition-colors",
+          tight ? "h-8" : "h-9",
+          on ? "border-foreground bg-foreground text-background" : "border-border bg-card text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
+        ),
+        children: [
+          o.label,
+          o.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "oca-tabular", children: o.count.toLocaleString("en-US") }) : null
+        ]
+      },
+      o.value
+    );
+  }) }) });
+}
+function ToolGrid({
+  tools,
+  as: Heading = "h2",
+  className
+}) {
+  const tight = useDensity() === "compact";
+  const n = tools.length;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-3 sm:grid-cols-2 md:gap-4",
+        // Three or four sit in one row on a wide screen.
+        n === 3 || n === 6 ? "lg:grid-cols-3" : n === 4 ? "xl:grid-cols-4" : null,
+        className
+      ),
+      children: tools.map((t) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "group relative flex h-full flex-col rounded-[1.25rem] border border-border bg-card transition-colors",
+            tight ? "gap-3 p-5" : "gap-4 p-6",
+            "hover:border-oca-hairline-strong 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"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+              t.icon ? /* @__PURE__ */ jsx("span", { className: "flex size-10 items-center justify-center rounded-xl bg-muted text-foreground [&_svg]:size-5", children: t.icon }) : /* @__PURE__ */ jsx("span", {}),
+              /* @__PURE__ */ jsx(
+                ArrowRight,
+                {
+                  "aria-hidden": true,
+                  className: "size-4 text-muted-foreground transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-foreground"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx(Heading, { className: "oca-title-sm", children: /* @__PURE__ */ jsx(
+                Link8,
+                {
+                  href: t.href,
+                  className: "outline-none after:absolute after:inset-0 after:rounded-[1.25rem] after:content-['']",
+                  children: t.label
+                }
+              ) }),
+              t.description ? /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] leading-relaxed text-muted-foreground", children: t.description }) : null
+            ] })
+          ]
+        }
+      ) }, t.href))
+    }
+  );
+}
+function SiteRow({ site, here, onNavigate }) {
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "a",
     {
       href: site.href,
       onClick: onNavigate,
@@ -3622,16 +5691,23 @@ function FamilyMenu({ current: current2, className }) {
     )
   ] });
 }
-function NavLink({ item, className, onNavigate }) {
+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__ */ jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
   }
-  return /* @__PURE__ */ jsx(Link5, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
+  return /* @__PURE__ */ jsx(Link8, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
 }
 function NavRow({ item, onNavigate }) {
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3642,7 +5718,7 @@ function NavRow({ item, onNavigate }) {
     "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__ */ jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: body }) : /* @__PURE__ */ jsx(Link5, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: body });
+  return item.external ? /* @__PURE__ */ jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: body }) : /* @__PURE__ */ jsx(Link8, { 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 }) {
@@ -3684,13 +5760,16 @@ function SiteHeader({
   search,
   actions,
   variant = "site",
+  navOnPhone = true,
+  menu: menuExtra,
   className
 }) {
   const [open, setOpen] = useState(false);
   const tool = variant === "tool";
   const size = tool ? 24 : 28;
   const current2 = typeof family === "string" ? family : void 0;
-  const menu = nav.length > 0 || Boolean(family);
+  const phoneNav = navOnPhone ? nav : [];
+  const menu = phoneNav.length > 0 || Boolean(family) || Boolean(menuExtra);
   const brandNode = brand ?? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", children: [
     /* @__PURE__ */ jsx(Lockup, { size }),
     product ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3698,7 +5777,9 @@ function SiteHeader({
       /* @__PURE__ */ jsx("span", { className: "font-medium tracking-[-0.01em]", style: { fontSize: size * 0.56 }, children: product })
     ] }) : null
   ] });
-  const navigation = nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map((n) => n.children?.length ? /* @__PURE__ */ jsx(NavDropdown, { item: n }, n.href) : /* @__PURE__ */ jsx(NavLink, { item: n }, n.href)) }) : null;
+  const navigation = nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map(
+    (n) => n.children?.length ? /* @__PURE__ */ jsx(NavDropdown, { item: n }, n.href) : /* @__PURE__ */ jsx(NavLink, { item: n, line: tool }, n.href)
+  ) }) : null;
   return /* @__PURE__ */ jsx(
     "header",
     {
@@ -3720,7 +5801,7 @@ function SiteHeader({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center gap-1", tool ? "md:gap-1" : "justify-self-start"), children: [
-              /* @__PURE__ */ jsxs(Link5, { href: home, className: "-ml-1 min-w-0 rounded-lg p-1", children: [
+              /* @__PURE__ */ jsxs(Link8, { href: home, className: "-ml-1 min-w-0 rounded-lg p-1", children: [
                 brandNode,
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
               ] }),
@@ -3742,7 +5823,8 @@ function SiteHeader({
                 ),
                 /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "pt-16", children: [
                   /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
-                  nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: nav.map(
+                  menuExtra ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", (phoneNav.length > 0 || family) && "border-b border-border pb-3"), children: menuExtra }) : null,
+                  phoneNav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: phoneNav.map(
                     (n) => n.children?.length ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col py-2", children: [
                       /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: n.label }),
                       n.children.map((c) => /* @__PURE__ */ jsx(
@@ -3764,7 +5846,7 @@ function SiteHeader({
                       n.href
                     )
                   ) }) : null,
-                  family ? /* @__PURE__ */ jsxs("details", { className: cn("group", nav.length > 0 && "mt-2 border-t border-border pt-4"), children: [
+                  family ? /* @__PURE__ */ jsxs("details", { className: cn("group", phoneNav.length > 0 && "mt-2 border-t border-border pt-4"), children: [
                     /* @__PURE__ */ 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__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
@@ -3931,12 +6013,12 @@ function SignInFrame({
       children: [
         /* @__PURE__ */ jsxs("section", { className: "flex flex-col px-4 pb-8 pt-5 sm:px-8 lg:px-14 lg:pt-8", children: [
           /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs(Link5, { href: home, className: "w-fit rounded-lg", children: [
+            /* @__PURE__ */ jsxs(Link8, { href: home, className: "w-fit rounded-lg", children: [
               brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
             ] }),
             back === void 0 ? /* @__PURE__ */ jsx(
-              Link5,
+              Link8,
               {
                 href: home,
                 className: "text-[0.9375rem] text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
@@ -3969,11 +6051,156 @@ function SignInFrame({
     }
   );
 }
+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 = useMemo(
+    () => sections.findIndex((s) => s.items.some((i) => pathOf(i.href) === here)),
+    [sections, here]
+  );
+  const [peeked, setPeeked] = useState(() => /* @__PURE__ */ new Set());
+  useEffect(() => setPeeked(/* @__PURE__ */ new Set()), [activeSection]);
+  const activeRef = useRef(null);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => activeRef.current?.scrollIntoView({ block: "nearest" }));
+    return () => cancelAnimationFrame(id);
+  }, [here]);
+  const base = useId();
+  return /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+      /* @__PURE__ */ 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__ */ jsx(
+              ChevronRight,
+              {
+                "aria-hidden": true,
+                className: cn("size-3.5 shrink-0 text-oca-subtle transition-transform duration-200", open && "rotate-90")
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ 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__ */ jsx(StatusBadge, { status: item.badge }) : item.badge ? /* @__PURE__ */ jsx(Badge, { tone: "muted", children: item.badge }) : null;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          Link8,
+          {
+            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__ */ 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
+}) {
+  const [menu, setMenu] = useState(false);
+  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 = 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__ */ jsxs("div", { className: "flex min-h-dvh flex-col bg-background", children: [
+    /* @__PURE__ */ jsx(SkipLink, {}),
+    header ?? /* @__PURE__ */ jsx(SiteHeader, { home: OCHK_IO, family: "docs", nav: DOCS_HEADER_NAV, search, actions }),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "oca-container flex h-12 items-center gap-2", children: /* @__PURE__ */ jsxs(Sheet, { open: menu, onOpenChange: setMenu, children: [
+      /* @__PURE__ */ 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__ */ jsx(PanelLeft, { "aria-hidden": true, className: "size-[1.125rem] shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Docs menu. " }),
+        place ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
+          /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-oca-subtle" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: place.page })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Docs" })
+      ] }),
+      /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-[min(88vw,22rem)] gap-0 p-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-border px-5 py-4 pr-14", children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-[1.0625rem] font-medium", children: "Docs" }) }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-y-auto p-3", children: /* @__PURE__ */ jsx(DocsNav, { sections: nav, current: current2, onNavigate: () => setMenu(false) }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "oca-container flex-1", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(DocsNav, { sections: nav, current: current2 }) }),
+      /* @__PURE__ */ jsxs("main", { id: "main-content", className: "min-w-0 pb-16 pt-6 md:pt-8", children: [
+        breadcrumbs ? /* @__PURE__ */ jsx("div", { className: "mb-6 max-lg:hidden", children: breadcrumbs }) : null,
+        items.length > 1 ? /* @__PURE__ */ jsxs("details", { className: "group mb-8 rounded-2xl border border-border bg-card xl:hidden", children: [
+          /* @__PURE__ */ 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__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
+          ] }),
+          /* @__PURE__ */ jsx(OnThisPage, { items, activeId, title: null, className: "px-4 pb-4" })
+        ] }) : null,
+        /* @__PURE__ */ jsx("article", { id: "docs-content", className: "max-w-[46rem]", children }),
+        pager ? /* @__PURE__ */ jsx("div", { className: "mt-16 max-w-[46rem]", children: pager }) : null
+      ] }),
+      /* @__PURE__ */ 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__ */ jsx(OnThisPage, { items, activeId }) : null })
+    ] }) }),
+    footer ?? /* @__PURE__ */ jsx(SiteFooter, { columns: OCHK_IO_FOOTER, family: true, legal: true, signature: false })
+  ] });
+}
 function SideNav({ groups, onNavigate }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Pages", className: "flex flex-col gap-5", children: groups.map((g, gi) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
     g.label ? /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: g.label }) : null,
     g.items.map((it) => /* @__PURE__ */ jsxs(
-      Link5,
+      Link8,
       {
         href: it.href,
         onClick: onNavigate,
@@ -4008,7 +6235,7 @@ function SectionSwitch({
       children: sections.map((sec) => {
         const on = sec.id === current2.id;
         return /* @__PURE__ */ jsx(
-          Link5,
+          Link8,
           {
             href: sec.href,
             onClick: onNavigate,
@@ -4038,7 +6265,7 @@ function TabBar({ items }) {
           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__ */ jsxs(
-            Link5,
+            Link8,
             {
               href: it.href,
               "aria-current": it.active ? "page" : void 0,
@@ -4147,7 +6374,7 @@ function AppShell({
                 footer ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsx(Link5, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsx(Lockup, { size: 22 }) }),
+            /* @__PURE__ */ jsx(Link8, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsx(Lockup, { size: 22 }) }),
             /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: account })
           ] }),
           place.page ? /* @__PURE__ */ jsxs(
@@ -4170,7 +6397,7 @@ function AppShell({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
           /* @__PURE__ */ 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__ */ jsx(Link5, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsx(Lockup, { size: 26 }) }),
+            /* @__PURE__ */ jsx(Link8, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsx(Lockup, { size: 26 }) }),
             switcher,
             /* @__PURE__ */ jsx(SideNav, { groups }),
             /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
@@ -4201,9 +6428,16 @@ function AccountMenu({
           "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": `Account: ${name}`,
+        "aria-label": `${name}, account menu`,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background", children: initial }),
+          /* @__PURE__ */ 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__ */ jsx("span", { className: cn("max-w-[10rem] truncate", nameFrom === "lg" ? "max-lg:hidden" : "max-sm:hidden"), children: name })
         ]
       }
@@ -4215,7 +6449,7 @@ function AccountMenu({
       ] }),
       /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
       items.map(
-        (it, i) => it === "separator" ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, `sep-${i}`) : it.href ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, destructive: it.destructive, children: /* @__PURE__ */ jsxs(Link5, { href: it.href, children: [
+        (it, i) => it === "separator" ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, `sep-${i}`) : it.href ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, destructive: it.destructive, children: /* @__PURE__ */ jsxs(Link8, { href: it.href, children: [
           it.icon,
           it.label
         ] }) }, it.label) : /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: it.onSelect, destructive: it.destructive, children: [
@@ -4248,7 +6482,260 @@ function ThemeToggle({ className }) {
     }
   );
 }
+var OCHK_APP_ACCOUNT = "https://ochk.app/me/account";
+function SessionAccountView({
+  state,
+  name,
+  detail,
+  items = [],
+  signInHref,
+  signInLabel = "Sign in",
+  accountHref = OCHK_APP_ACCOUNT,
+  onSignOut,
+  nameFrom = "lg"
+}) {
+  if (state === "in") {
+    return /* @__PURE__ */ jsx(
+      AccountMenu,
+      {
+        name: name || "Your account",
+        detail,
+        nameFrom,
+        items: [
+          ...items,
+          ...items.length > 0 ? ["separator"] : [],
+          { label: "Your account", href: accountHref, icon: /* @__PURE__ */ jsx(CircleUser, {}) },
+          "separator",
+          { label: "Sign out", onSelect: onSignOut, icon: /* @__PURE__ */ jsx(LogOut, {}) }
+        ]
+      }
+    );
+  }
+  if (state === "unknown") {
+    return /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", variant: "secondary", children: /* @__PURE__ */ jsx("a", { href: accountHref, children: "Your account" }) });
+  }
+  return (
+    // No box of its own: it sits exactly where the signed-in chip will. While checking it is only unseen.
+    /* @__PURE__ */ jsx("span", { className: state === "checking" ? "contents invisible" : "contents", "aria-hidden": state === "checking" || void 0, children: /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", variant: "secondary", tabIndex: state === "checking" ? -1 : void 0, children: /* @__PURE__ */ jsx("a", { href: signInHref, children: signInLabel }) }) })
+  );
+}
+function ToolShell({
+  protocol: protocol2,
+  tools,
+  home = "/",
+  account,
+  rail = false,
+  railFooter,
+  variant = "tool",
+  banner,
+  footer,
+  children
+}) {
+  const p = protocolSite(protocol2);
+  const app = variant === "app";
+  const tabs = app ? null : tabsFor([{ items: [...tools] }]);
+  const about = /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: p.pageHref,
+      className: "inline-flex items-center gap-1 rounded-full px-3 py-2 text-[0.9375rem] text-muted-foreground transition-colors hover:text-foreground",
+      children: [
+        "About ",
+        p.label,
+        /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(DensityProvider, { density: "compact", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col bg-background",
+        app ? "h-dvh overflow-hidden" : "min-h-dvh",
+        tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SkipLink, {}),
+        banner,
+        /* @__PURE__ */ jsx(
+          SiteHeader,
+          {
+            variant: "tool",
+            home,
+            product: p.label,
+            family: protocol2,
+            nav: tools.map((t) => ({ href: t.href, label: t.label, active: t.active })),
+            navOnPhone: !tabs,
+            menu: /* @__PURE__ */ jsx("div", { className: "[&>a]:px-3 [&>a]:py-3 [&>a]:text-[1.0625rem]", children: about }),
+            className: cn(rail && "lg:[&_nav[aria-label=Main]]:hidden"),
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "hidden lg:contents", children: about }),
+              p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status, className: "max-sm:hidden" }) : null,
+              /* @__PURE__ */ jsx(ThemeToggle, { className: "max-sm:hidden" }),
+              account
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex w-full", app ? "min-h-0 flex-1" : "max-w-[90rem] flex-1"), children: [
+          rail ? /* @__PURE__ */ jsxs("aside", { className: "sticky top-14 hidden h-[calc(100dvh-3.5rem)] w-60 shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
+            /* @__PURE__ */ jsx(SideNav, { groups: [{ label: "Tools", items: tools.map(({ href, label, icon, active }) => ({ href, label, icon, active })) }] }),
+            railFooter ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-0.5 px-3 text-[0.875rem] text-muted-foreground [&_a:hover]:text-foreground [&_a]:py-1.5 [&_a]:transition-colors", children: railFooter }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              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__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children })
+            }
+          )
+        ] }),
+        app || footer === false ? null : footer ?? /* @__PURE__ */ jsx(SiteFooter, { compact: true, family: true, legal: true }),
+        tabs ? /* @__PURE__ */ jsx(TabBar, { items: tabs }) : null
+      ]
+    }
+  ) });
+}
+
+// src/code/rehype.ts
+function textOf(node) {
+  if (node.type === "text") return node.value ?? "";
+  return (node.children ?? []).map(textOf).join("");
+}
+function langOf(code) {
+  const cls = code.properties?.className;
+  const list = Array.isArray(cls) ? cls : typeof cls === "string" ? cls.split(" ") : [];
+  for (const c of list) {
+    const m = String(c).match(/^language-(.+)$/);
+    if (m) return m[1];
+  }
+  return void 0;
+}
+function rehypeCode(options = {}) {
+  const skip = new Set(options.skip ?? ["mermaid"]);
+  const visit = (node) => {
+    for (const child of node.children ?? []) {
+      const code = child.type === "element" && child.tagName === "pre" ? child.children?.[0] : void 0;
+      if (code && code.type === "element" && code.tagName === "code" && child.children?.length === 1) {
+        const lang = langOf(code);
+        if (lang && skip.has(lang)) continue;
+        const meta = parseCodeMeta(code.data?.meta);
+        let source = textOf(code);
+        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);
+        child.properties = {
+          ...child.properties,
+          dataOcaCode: "",
+          dataHtml: linesToHtml(lines, { highlight: parseLineRanges(meta.highlight), diff: diff?.diff }),
+          ...lang ? { dataLang: lang } : {},
+          ...meta.title ? { dataTitle: meta.title } : {},
+          ...diff ? { dataDiff: "" } : {},
+          ...meta.lineNumbers ? { dataLineNumbers: "" } : {}
+        };
+        child.children = [];
+        continue;
+      }
+      visit(child);
+    }
+  };
+  return (tree) => visit(tree);
+}
+function createMdxComponents({ mermaid } = {}) {
+  function Pre(props) {
+    if (props["data-oca-code"] !== void 0) {
+      return /* @__PURE__ */ jsx(
+        CodeBlock,
+        {
+          html: props["data-html"] ?? "",
+          lang: props["data-lang"],
+          caption: props["data-title"],
+          diff: props["data-diff"] !== void 0,
+          lineNumbers: props["data-line-numbers"] !== void 0,
+          className: "my-6"
+        }
+      );
+    }
+    const lang = codeLang(props.children);
+    const code = codeText(props.children);
+    if (lang === "mermaid" && mermaid) return /* @__PURE__ */ jsx(Diagram, { chart: code, load: mermaid });
+    return /* @__PURE__ */ jsx(
+      CodeBlock,
+      {
+        code,
+        lang: lang === "mermaid" ? void 0 : lang,
+        caption: lang === "mermaid" ? "Diagram source" : void 0,
+        className: "my-6"
+      }
+    );
+  }
+  function A({ href, children, ...rest }) {
+    if (!href || href.startsWith("#")) {
+      return /* @__PURE__ */ jsx("a", { href, ...rest, className: "text-foreground underline decoration-foreground/35 underline-offset-4 hover:decoration-foreground", children });
+    }
+    return /* @__PURE__ */ jsx(TextLink, { href, children });
+  }
+  const heading = (as) => function Heading(props) {
+    return /* @__PURE__ */ jsx(DocsHeading, { as, ...props });
+  };
+  return {
+    h1: heading("h1"),
+    h2: heading("h2"),
+    h3: heading("h3"),
+    h4: heading("h4"),
+    p: ({ className, ...props }) => /* @__PURE__ */ 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__ */ jsx("strong", { className: "font-medium text-foreground", ...props }),
+    ul: ({ className, ...props }) => /* @__PURE__ */ 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]",
+          className
+        ),
+        ...props
+      }
+    ),
+    ol: ({ className, ...props }) => /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: cn(
+          "my-4 list-decimal space-y-1.5 pl-5 text-[1rem] leading-[1.7] text-muted-foreground marker:text-oca-subtle md:text-[1.0625rem]",
+          className
+        ),
+        ...props
+      }
+    ),
+    li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", { className: cn("pl-1 [&>p]:my-1 [&>ul]:my-1.5 [&>ol]:my-1.5", className), ...props }),
+    blockquote: ({ children }) => /* @__PURE__ */ jsx(Callout, { children }),
+    hr: () => /* @__PURE__ */ jsx("hr", { className: "my-10 border-border" }),
+    table: MdxTable,
+    code: ({ className, ...props }) => /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: cn("break-words rounded-md bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground", className),
+        ...props
+      }
+    ),
+    pre: Pre,
+    img: ({ className, alt = "", ...props }) => /* @__PURE__ */ jsx("img", { alt, loading: "lazy", className: cn("my-6 h-auto max-w-full rounded-2xl border border-border", className), ...props }),
+    Callout,
+    Steps,
+    Step,
+    LinkCard,
+    CardGrid,
+    ApiTable,
+    CodeBlock,
+    CodeTabs,
+    InstallTabs,
+    SpecCard,
+    ProtocolGrid,
+    StatusBadge,
+    ...mermaid ? { Diagram: (p) => /* @__PURE__ */ jsx(Diagram, { ...p, load: mermaid }) } : {}
+  };
+}
+var mdxComponents = createMdxComponents();
 
-export { APP_ATTRIBUTE, APP_ID, Accent, Accordion, AccordionItem, AccountMenu, ActivityList, AppCard, AppGrid, AppIcon, AppShell, Badge, BrowserFrame, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardTitle, Checkbox, Closing, CodeBlock, ComparisonTable, Container, CopyButton, Crowd, DOCS_HREF, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, Display, DocHeader, DocLayout, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FAMILY, FAMILY_GROUPS, FactBlock, FactRows, FamilyMenu, Faq, Field, FloatChip, Footnote, HalftoneCanvas, HalftoneSphere, HashChip, Input, IsoCheck, Kbd, KeyValueList, LEGAL_LINKS, Label, Lead, LegalDocument, LoadingBlock, Lockup, MARK_FACES, Mark, Monogram, Notice, OCHK_IO, OCHK_IO_FOOTER, OCHK_IO_NAV, PROTOCOLS, PROTOCOL_ORDER, PackageCard, PageHeader, PageHero, Pagination, PhoneFrame, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, QrCode, RadioGroup, RadioGroupItem, Reveal, SPHERE_GRADIENT, Sats, SatsFigure, ScrollFade, ScrollStory, Section, SectionHeading, SectionIntro, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, ShellContext, SignInFrame, SignMessage, SiteBanner, SiteFooter, SiteHeader, Skeleton, SkipLink, SpecCard, Spinner, SplitBar, StatCard, StatGrid, StatusBadge, StatusDot, StatusPill, StepGrid, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TextLink, Textarea, ThemeToggle, Ticker, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruthTable, UsdApprox, VerifyBox, VerifyReport, appColors, appFonts, badgeVariants, buttonVariants, cardVariants, cn, confirm, familyByGroup, familySite, monogramGround, monogramLetter, portraitTone, prompt, protocolSite, satsText, sectionVariants, statusWord, useCopy, useInView, useShellPlace, useTimedOut };
+export { APP_ATTRIBUTE, APP_ID, Accent, Accordion, AccordionItem, AccountMenu, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, AppIcon, AppShell, ArtifactView, Badge, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Button, CODE_LANGS, Callout, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardNumeral, CardTitle, Checkbox, Closing, CodeBlock, CodeTabs, ComparisonTable, Container, CopyButton, Crowd, DOCS_HEADER_NAV, DOCS_HREF, DataTable, DensityProvider, Diagram, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, Display, DocHeader, DocLayout, DocsHeading, DocsNav, DocsPager, DocsShell, DropZone, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FAMILY, FAMILY_GROUPS, FactBlock, FactRows, FamilyMenu, Faq, Field, FilterChips, FloatChip, Footnote, FormSection, HalftoneCanvas, HalftoneSphere, HashChip, Input, InstallTabs, IsoCheck, Kbd, KeyValueList, LEGAL_LINKS, Label, Lead, LegalDocument, LinkCard, LoadingBlock, Lockup, MARK_FACES, Mark, MdxTable, Meter, Monogram, Notice, OCHK_APP_ACCOUNT, OCHK_IO, OCHK_IO_FOOTER, OCHK_IO_NAV, OnThisPage, PROTOCOLS, PROTOCOL_ORDER, PackageCard, PageHeader, PageHero, Pagination, PhoneFrame, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, QrCode, RadioGroup, RadioGroupItem, Reveal, SPHERE_GRADIENT, Sats, SatsFigure, ScrollFade, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, SessionAccountView, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, ShellContext, SignInFrame, SignMessage, SiteBanner, SiteFooter, SiteHeader, Skeleton, SkipLink, SpecCard, Spinner, SplitBar, StatCard, StatGrid, StateBadge, StatusBadge, StatusDot, StatusPill, Step, StepGrid, Steps, Switch, TOKEN_CLASS, Tabs, TabsContent, TabsList, TabsTrigger, TextLink, Textarea, ThemeToggle, Ticker, Toaster, ToolGrid, ToolShell, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruthTable, UsdApprox, VerifyBox, VerifyReport, appColors, appFonts, badgeVariants, blocksToDuration, buttonVariants, cardVariants, cn, confirm, createMdxComponents, createStateBadge, escapeHtml, explorerUrl, familyByGroup, familySite, formatBlockHeight, formatBytes, formatUtc, grammarOf, highlight, highlightToHtml, languageName, linesToHtml, mdxComponents, monogramGround, monogramLetter, parseCodeMeta, parseLineRanges, portraitTone, prompt, protocolSite, readDiff, rehypeCode, satsText, sectionVariants, shortenMiddle, statusWord, useActiveHeading, useCopy, useDensity, useHeadings, useInView, useShellPlace, useTimedOut };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map