@orangecheck/app-design 1.0.0 → 1.1.1

package/dist/components.mjs

@@ -1,9 +1,10 @@
-import { forwardRef, createContext, createElement, useRef, useState, useEffect, useContext, Children, isValidElement, cloneElement, useCallback, Component, useId, Fragment as Fragment$1 } from 'react';
+import { forwardRef, createContext, useContext, useState, useEffect, createElement, useRef, Children, isValidElement, cloneElement, useCallback, useMemo, Component, useId, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { ChevronDown, Check, Copy, ArrowUpRight, CircleDashed, CircleMinus, Clock, CircleX, CircleCheck } from 'lucide-react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { ChevronDown, Check, Search, Copy, ArrowUpRight, ArrowRight, ChevronRight, CornerDownLeft, Download, FileText, Upload, ArrowLeft, Lock, CircleDashed, CircleMinus, Clock, CircleX, CircleCheck } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import 'sonner';
@@ -13,6 +14,7 @@ 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 * as DialogPrimitive from '@radix-ui/react-dialog';
 
 var merge = extendTailwindMerge({
   extend: {
@@ -276,6 +278,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(
@@ -425,6 +428,487 @@ function StepGrid({ items, look = "cards", className }) {
     ] }) }, i)
   ) });
 }
+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"
+};
+function grammarOf(lang) {
+  return lang && ALIASES[lang.toLowerCase()] || "plain";
+}
+function collector() {
+  const tokens = [];
+  const emit = (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, 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, emit, jsx35) {
+  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))) {
+      emit(m);
+      i += m.length;
+      continue;
+    }
+    if ((m = at(JS_LINE_COMMENT, src, i)) || (m = at(JS_BLOCK_COMMENT, src, i))) {
+      emit(m, "comment");
+      i += m.length;
+      continue;
+    }
+    if ((m = at(JS_TEMPLATE, src, i)) || (m = at(JS_STRING, src, i))) {
+      emit(m, "string");
+      i += m.length;
+      sig('"');
+      continue;
+    }
+    if (jsx35 && 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) {
+        emit(m);
+        emit(name, "tag");
+        i += m.length + name.length;
+        tagDepth = 1;
+        braceInTag = 0;
+        sig("tag");
+        continue;
+      }
+    }
+    if (jsx35 && tagDepth > 0 && braceInTag === 0) {
+      if (src.startsWith("/>", i) || src[i] === ">") {
+        const close = src[i] === ">" ? ">" : "/>";
+        emit(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))) {
+        emit(m, "property");
+        i += m.length;
+        continue;
+      }
+      if (m = at(JS_IDENT, src, i)) {
+        emit(m, "property");
+        i += m.length;
+        continue;
+      }
+      if (src[i] === "{") braceInTag = 1;
+    } else if (jsx35 && tagDepth > 0 && braceInTag > 0) {
+      if (src[i] === "{") braceInTag++;
+      else if (src[i] === "}") braceInTag--;
+    }
+    if (m = at(JS_DECORATOR, src, i)) {
+      emit(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";
+      emit(m, kind);
+      i = end;
+      sig(kind === "keyword" ? m : "id");
+      continue;
+    }
+    if (m = at(JS_NUMBER, src, i)) {
+      emit(m, "number");
+      i += m.length;
+      sig("0");
+      continue;
+    }
+    if (m = at(JS_PUNCT, src, i)) {
+      emit(m);
+      i += m.length;
+      sig(m === "." ? "." : m);
+      continue;
+    }
+    emit(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, emit) {
+  let i = 0;
+  while (i < src.length) {
+    let m;
+    if ((m = at(JS_LINE_COMMENT, src, i)) || (m = at(JS_BLOCK_COMMENT, src, i))) {
+      emit(m, "comment");
+    } else if (m = at(JSON_STRING, src, i)) {
+      emit(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))) {
+      emit(m, "number");
+    } else {
+      m = src[i];
+      emit(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, emit) {
+  let i = 0;
+  let command = true;
+  let lineStart = true;
+  while (i < src.length) {
+    let m;
+    if (m = at(NEWLINE, src, i)) {
+      emit(m);
+      i += m.length;
+      command = !/\\\s*$/.test(src.slice(0, i - m.length));
+      lineStart = true;
+      continue;
+    }
+    if (m = at(WS, src, i)) {
+      emit(m);
+      i += m.length;
+      continue;
+    }
+    if (lineStart && (m = at(SH_PROMPT, src, i))) {
+      emit(m, "comment");
+      i += m.length;
+      lineStart = false;
+      continue;
+    }
+    lineStart = false;
+    if ((m = at(SH_COMMENT, src, i)) && (i === 0 || /\s/.test(src[i - 1]))) {
+      emit(m, "comment");
+      i += m.length;
+      continue;
+    }
+    if ((m = at(SH_SINGLE, src, i)) || (m = at(SH_DOUBLE, src, i))) {
+      emit(m, "string");
+      i += m.length;
+      command = false;
+      continue;
+    }
+    if (m = at(SH_OPERATOR, src, i)) {
+      emit(m);
+      i += m.length;
+      command = m !== ")" && m !== ">" && m !== "<";
+      continue;
+    }
+    if (m = at(SH_VAR, src, i)) {
+      emit(m, "type");
+      i += m.length;
+      command = false;
+      continue;
+    }
+    if (m = at(SH_URL, src, i)) {
+      emit(m, "url");
+      i += m.length;
+      command = false;
+      continue;
+    }
+    if (command && (m = at(SH_ASSIGN, src, i))) {
+      emit(m, "property");
+      i += m.length;
+      const v = at(SH_VALUE, src, i);
+      emit(v);
+      i += v.length;
+      continue;
+    }
+    if ((m = at(SH_FLAG, src, i)) && !command) {
+      emit(m, "keyword");
+      i += m.length;
+      continue;
+    }
+    if (m = at(SH_WORD, src, i)) {
+      if (command && SH_KEYWORDS.has(m)) emit(m, "keyword");
+      else if (command) {
+        emit(m, "function");
+        command = m === "sudo" || m === "npx" || m === "env" || m === "time";
+        i += m.length;
+        continue;
+      } else emit(m);
+      i += m.length;
+      continue;
+    }
+    emit(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, emit) {
+  let i = 0;
+  let prev = "";
+  while (i < src.length) {
+    let m;
+    if ((m = at(WS, src, i)) || (m = at(NEWLINE, src, i))) {
+      emit(m);
+      i += m.length;
+      continue;
+    }
+    if (m = at(PY_COMMENT, src, i)) {
+      emit(m, "comment");
+    } else if ((m = at(PY_TRIPLE, src, i)) || (m = at(PY_STRING, src, i))) {
+      if (/^[A-Za-z]+$/.test(m)) {
+        emit(m);
+      } else emit(m, "string");
+      prev = '"';
+    } else if (m = at(PY_DECORATOR, src, i)) {
+      emit(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";
+      emit(m, kind);
+      prev = kind === "keyword" ? m : "id";
+    } else if (m = at(PY_NUMBER, src, i)) {
+      emit(m, "number");
+      prev = "0";
+    } else {
+      m = src[i];
+      emit(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, emit) {
+  let i = 0;
+  let lineStart = true;
+  while (i < src.length) {
+    let m;
+    if (m = at(NEWLINE, src, i)) {
+      emit(m);
+      i += m.length;
+      lineStart = true;
+      continue;
+    }
+    if (lineStart && (m = at(YAML_KEY, src, i))) {
+      const dash = m.match(/^([ \t]*(?:- )?)/)[1];
+      emit(dash);
+      emit(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]))) emit(m, "comment");
+    else if ((m = at(SH_SINGLE, src, i)) || (m = at(JSON_STRING, src, i))) emit(m, "string");
+    else if (m = at(YAML_VALUE_WORD, src, i)) emit(m, "number");
+    else if (m = at(SH_URL, src, i)) emit(m, "url");
+    else {
+      m = src[i];
+      emit(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, tokens } = collector();
+  const name = (lang ?? "").toLowerCase();
+  switch (grammar) {
+    case "js":
+      scanJs(src, emit, name === "tsx" || name === "jsx");
+      break;
+    case "json":
+      scanJson(src, emit);
+      break;
+    case "shell":
+      scanShell(src, emit);
+      break;
+    case "python":
+      scanPython(src, emit);
+      break;
+    case "yaml":
+      scanYaml(src, emit);
+      break;
+    default:
+      emit(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;
+}
+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 ScrollFade({ fade = "var(--card)", className, innerClassName, children, ...props }) {
   const ref = useRef(null);
   const [edges, setEdges] = useState({ left: false, right: false });
@@ -483,7 +967,73 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
     )
   ] });
 }
-var ShellContext = createContext({});
+
+// 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]}`;
+}
+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 useDensity() {
+  return useContext(DensityContext);
+}
+var ShellContext = sharedContext("shell-place", {});
 function useShellPlace() {
   return useContext(ShellContext);
 }
@@ -538,6 +1088,18 @@ forwardRef(function Separator2({ className, orientation = "horizontal", decorati
     }
   );
 });
+function Kbd({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-md border border-border bg-card px-1.5 font-mono text-[11px] text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var buttonVariants = cva(
   [
     "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium",
@@ -611,26 +1173,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
@@ -692,6 +1258,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;
@@ -701,7 +1268,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],
@@ -720,11 +1288,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,
@@ -733,8 +1330,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";
@@ -742,11 +1342,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",
@@ -754,7 +1355,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"
             ),
@@ -767,7 +1369,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"
@@ -787,8 +1390,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 }),
@@ -835,13 +1442,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",
@@ -891,45 +1499,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 done = 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: done })
       ]
     }
   );
@@ -940,12 +1569,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
   ] });
 }
@@ -999,96 +1643,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 subscribe = 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(
+    subscribe,
+    () => 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,
@@ -1932,7 +2749,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",
@@ -2016,20 +2834,33 @@ 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);
   }) });
@@ -2068,8 +2899,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) {
@@ -2126,12 +2973,19 @@ 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
   ] });
 }
-forwardRef(function SelectTrigger2({ className, children, ...props }, ref) {
+var SelectFieldContext = sharedContext("select-field", null);
+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 }),
@@ -2480,6 +3334,7 @@ function VerifyReport({
   facts,
   notChecked,
   actions,
+  as: Heading = "h2",
   className
 }) {
   return /* @__PURE__ */ jsxs(
@@ -2490,7 +3345,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) => {
@@ -2590,7 +3445,1192 @@ function SignMessage({
     )
   ] });
 }
+var isInternal = (href) => href.startsWith("/") || href.startsWith("#");
+function DocLink({ href, className, children, ...rest }) {
+  return isInternal(href) ? /* @__PURE__ */ jsx(Link, { href, className, ...rest, children }) : /* @__PURE__ */ jsx("a", { href, className, ...rest, children });
+}
+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 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 done = 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 })
+    ] }) : done ? /* @__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 && !done ? /* @__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(
+                Link,
+                {
+                  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))
+    }
+  );
+}
 
-export { Accent, ActivityList, AppCard, AppGrid, BrowserFrame, Closing, CodeBlock, ComparisonTable, Container, CopyButton, DataTable, Display, DocHeader, DocLayout, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRows, Faq, FloatChip, Footnote, HashChip, KeyValueList, Lead, LegalDocument, LoadingBlock, Monogram, Notice, PackageCard, PageHeader, PageHero, PhoneFrame, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, Reveal, Sats, SatsFigure, ScrollStory, Section, SectionHeading, SectionIntro, SignMessage, SpecCard, SplitBar, StatCard, StatGrid, StepGrid, TextLink, Ticker, TruthTable, UsdApprox, VerifyBox, VerifyReport, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };
+export { Accent, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, ArtifactView, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Callout, CardGrid, Closing, CodeBlock, CodeTabs, ComparisonTable, Container, CopyButton, DataTable, Diagram, Display, DocHeader, DocLayout, DocsHeading, DocsPager, DropZone, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRows, Faq, FilterChips, FloatChip, Footnote, FormSection, HashChip, InstallTabs, KeyValueList, Lead, LegalDocument, LinkCard, LoadingBlock, MdxTable, Meter, Monogram, Notice, OnThisPage, PackageCard, PageHeader, PageHero, PhoneFrame, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, Reveal, Sats, SatsFigure, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, SignMessage, SpecCard, SplitBar, StatCard, StatGrid, StateBadge, Step, StepGrid, Steps, TextLink, Ticker, ToolGrid, TruthTable, UsdApprox, VerifyBox, VerifyReport, createStateBadge, languageName, monogramGround, monogramLetter, satsText, sectionVariants, useActiveHeading, useCopy, useHeadings, useInView };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map