@orangecheck/app-design 1.4.0 → 1.5.0

package/dist/index.mjs

@@ -4,6 +4,7 @@ import { forwardRef, useContext, createContext, useRef, useState, useCallback, u
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { useTheme } from 'next-themes';
 import { Toaster as Toaster$1 } from 'sonner';
 export { toast } from 'sonner';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -12,7 +13,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 { ChevronDown, Check, X, Search, ArrowUpRight, ArrowRight, Copy, ChevronLeft, ChevronRight, CornerDownLeft, Download, FileText, Upload, Menu, Sun, Moon, SunMoon, PanelLeft, CircleUser, LogOut, ArrowLeft, Lock, CircleDashed, CircleMinus, CircleSlash, Clock, CircleX, CircleCheck } from 'lucide-react';
+import { ChevronDown, Check, X, Search, ArrowUpRight, ArrowRight, Copy, ChevronLeft, ChevronRight, Lock, CornerDownLeft, Download, FileText, Upload, Menu, Sun, Moon, SunMoon, PanelLeft, CircleUser, LogOut, ArrowLeft, CircleDashed, CircleMinus, CircleSlash, Clock, CircleX, CircleCheck, Ellipsis } from 'lucide-react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -21,7 +22,6 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import QRCode from 'qrcode';
 import Link6 from 'next/link';
 import { useRouter } from 'next/compat/router';
-import { useTheme } from 'next-themes';
 
 // src/tokens/index.ts
 var APP_ATTRIBUTE = "data-oc-app";
@@ -173,10 +173,18 @@ function StatusDot({
     }
   );
 }
-function Toaster(props) {
+var TOAST_COLOURS = {
+  "--normal-bg": "var(--popover)",
+  "--normal-text": "var(--popover-foreground)",
+  "--normal-border": "var(--border)"
+};
+function Toaster({ style, ...props }) {
+  const { resolvedTheme } = useTheme();
   return /* @__PURE__ */ jsx(
     Toaster$1,
     {
+      theme: resolvedTheme === "dark" ? "dark" : resolvedTheme === "light" ? "light" : "system",
+      style: { ...TOAST_COLOURS, ...style },
       position: "bottom-right",
       toastOptions: {
         classNames: {
@@ -923,7 +931,9 @@ var none = () => null;
 function PromptBody({ ask: a }) {
   const o = a.options;
   const [value, setValue] = useState(o.defaultValue ?? "");
+  const [again, setAgain] = useState("");
   const [error, setError] = useState(null);
+  const [mismatch, setMismatch] = useState(false);
   const submit = (e) => {
     e.preventDefault();
     if (o.minLength && value.length < o.minLength) {
@@ -935,6 +945,10 @@ function PromptBody({ ask: a }) {
       setError(refused);
       return;
     }
+    if (o.confirmField && again !== value) {
+      setMismatch(true);
+      return;
+    }
     a.settle(value);
     done();
   };
@@ -950,9 +964,30 @@ function PromptBody({ ask: a }) {
         onChange: (e) => {
           setValue(e.target.value);
           setError(null);
+          setMismatch(false);
         }
       }
     ) }),
+    o.confirmField ? /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: o.confirmField === true ? "Type it again" : o.confirmField,
+        error: mismatch ? "The two do not match." : null,
+        className: "mt-4",
+        children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: o.secret ? "password" : "text",
+            autoComplete: o.secret ? "new-password" : "off",
+            value: again,
+            onChange: (e) => {
+              setAgain(e.target.value);
+              setMismatch(false);
+            }
+          }
+        )
+      }
+    ) : null,
     /* @__PURE__ */ jsxs(DialogFooter, { children: [
       /* @__PURE__ */ jsx(
         Button,
@@ -1993,7 +2028,7 @@ var JS_TAG = /<\/?(?=[A-Za-z])/y;
 var JS_TAG_NAME = /[A-Za-z][\w$.:-]*/y;
 var JS_PUNCT = /=>|\.\.\.|[{}()[\];,.<>=+\-*/%!?:&|^~#]/y;
 var JSX_BEFORE = /* @__PURE__ */ new Set(["(", ",", "=", "?", ":", "{", "[", ";", ">", "&&", "||", "=>", "return"]);
-function scanJs(src, emit2, jsx50) {
+function scanJs(src, emit2, jsx51) {
   let i = 0;
   let prev = "";
   let tagDepth = 0;
@@ -2019,7 +2054,7 @@ function scanJs(src, emit2, jsx50) {
       sig('"');
       continue;
     }
-    if (jsx50 && tagDepth === 0 && (m = at(JS_TAG, src, i)) && (prev === "" || JSX_BEFORE.has(prev))) {
+    if (jsx51 && tagDepth === 0 && (m = at(JS_TAG, src, i)) && (prev === "" || JSX_BEFORE.has(prev))) {
       const name = at(JS_TAG_NAME, src, i + m.length);
       if (name) {
         emit2(m);
@@ -2031,7 +2066,7 @@ function scanJs(src, emit2, jsx50) {
         continue;
       }
     }
-    if (jsx50 && tagDepth > 0 && braceInTag === 0) {
+    if (jsx51 && tagDepth > 0 && braceInTag === 0) {
       if (src.startsWith("/>", i) || src[i] === ">") {
         const close = src[i] === ">" ? ">" : "/>";
         emit2(close);
@@ -2051,7 +2086,7 @@ function scanJs(src, emit2, jsx50) {
         continue;
       }
       if (src[i] === "{") braceInTag = 1;
-    } else if (jsx50 && tagDepth > 0 && braceInTag > 0) {
+    } else if (jsx51 && tagDepth > 0 && braceInTag > 0) {
       if (src[i] === "{") braceInTag++;
       else if (src[i] === "}") braceInTag--;
     }
@@ -3000,7 +3035,8 @@ function Well({
   lines,
   maxLines,
   diff,
-  lineNumbers
+  lineNumbers,
+  wrap
 }) {
   const foldable = maxLines !== void 0 && lines > maxLines + 2;
   const [open, setOpen] = useState(false);
@@ -3019,7 +3055,8 @@ function Well({
             "data-diff": diff ? "" : void 0,
             "data-line-numbers": lineNumbers ? "" : void 0,
             className: cn(
-              "oca-code w-max min-w-full py-4 font-mono text-[0.875rem] leading-[1.625] text-oca-ink-muted [font-variant-ligatures:none]",
+              "oca-code py-4 font-mono text-[0.875rem] leading-[1.625] text-oca-ink-muted [font-variant-ligatures:none]",
+              wrap ? "whitespace-pre-wrap break-all" : "w-max min-w-full",
               !lined && "px-5"
             ),
             children: lined ? /* @__PURE__ */ jsx("code", { className: "block", "data-lang": lang, dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx("code", { className: "block", "data-lang": lang, children })
@@ -3061,6 +3098,7 @@ function CodeBlock({
   highlight: marks,
   diff,
   lineNumbers,
+  wrap,
   actions,
   className
 }) {
@@ -3092,6 +3130,7 @@ function CodeBlock({
         maxLines,
         diff: prepared ? prepared.diff : isDiff,
         lineNumbers,
+        wrap,
         children
       }
     )
@@ -3556,6 +3595,169 @@ var ErrorBoundary = class extends Component {
     ) });
   }
 };
+
+// src/family/index.ts
+var OCHK_IO = "https://ochk.io";
+var DOCS_HREF = `${OCHK_IO}/docs`;
+function protocol(slug, verb, line, kinds) {
+  return {
+    slug,
+    label: slug,
+    href: `${OCHK_IO}/${slug}`,
+    group: "protocol",
+    line,
+    status: "live",
+    verb,
+    pageHref: `${OCHK_IO}/${slug}`,
+    toolHref: `https://${slug}.ochk.io`,
+    specHref: `https://github.com/orangecheck/oc-${slug}-protocol`,
+    kinds
+  };
+}
+var PROTOCOLS = [
+  protocol("attest", "identity", "Show that an address holds bitcoin, and for how long.", "30078"),
+  protocol("lock", "confidentiality", "Encrypt to a Bitcoin address, so only its holder can open it.", "30078"),
+  protocol("vote", "legitimacy", "Polls weighed in sats, that anyone can tally.", "30080\u201330082"),
+  protocol("stamp", "provenance", "Prove who signed something, and when.", "30083"),
+  protocol("agent", "authority", "Give software scoped, revocable permission to act for you.", "30083\u201330086"),
+  protocol("pledge", "commitment", "Make a promise with bitcoin behind it, on a public record.", "30078")
+];
+var PROTOCOL_ORDER = PROTOCOLS.map((p) => p.slug);
+var FAMILY = [
+  {
+    slug: "home",
+    label: "ochk.io",
+    href: OCHK_IO,
+    group: "orangecheck",
+    line: "The open protocols, and the company behind them.",
+    status: "live"
+  },
+  {
+    slug: "me",
+    label: "ochk.app",
+    href: "https://ochk.app",
+    group: "orangecheck",
+    line: "One account, with Bitcoin behind it.",
+    status: "testing"
+  },
+  {
+    slug: "docs",
+    label: "docs",
+    href: DOCS_HREF,
+    group: "orangecheck",
+    line: "Specs, SDKs and guides for every protocol.",
+    status: "live"
+  },
+  ...PROTOCOLS,
+  {
+    slug: "vault",
+    label: "vault",
+    href: "https://vault.ochk.io",
+    group: "app",
+    line: "A password manager, encrypted in your browser.",
+    status: "live",
+    protocols: ["lock"]
+  },
+  {
+    slug: "chat",
+    label: "chat",
+    href: "https://chat.ochk.io",
+    group: "app",
+    line: "Messages only the holder of a Bitcoin address can read.",
+    status: "testing",
+    protocols: ["lock"]
+  },
+  {
+    slug: "cosign",
+    label: "cosign",
+    href: "https://cosign.ochk.io",
+    group: "app",
+    line: "Builders find co-founders and backers.",
+    status: "testing",
+    // Signs in with an orangecheck account and a wallet; uses none of the six directly.
+    protocols: []
+  },
+  {
+    slug: "me-demo",
+    // "demo", not the made-up app's own name, so nobody takes it for ours.
+    label: "demo",
+    href: "https://me-demo.ochk.io",
+    group: "app",
+    line: "Lumen Notes, a made-up app that signs in with orangecheck.",
+    status: "live"
+  },
+  {
+    slug: "globe",
+    label: "globe",
+    href: "https://globe.ochk.io",
+    group: "public-good",
+    line: "The Bitcoin network, live, on a globe.",
+    status: "live"
+  },
+  {
+    slug: "btc",
+    label: "btc",
+    href: "https://btc.ochk.io",
+    group: "public-good",
+    line: "A free desk for reading the Bitcoin market.",
+    status: "live"
+  }
+];
+var FAMILY_GROUPS = [
+  { id: "orangecheck", label: "orangecheck" },
+  { id: "protocol", label: "Protocols" },
+  { id: "app", label: "Apps" },
+  { id: "public-good", label: "Public goods" }
+];
+var BY_SLUG = new Map(FAMILY.map((s) => [s.slug, s]));
+function familySite(slug) {
+  return BY_SLUG.get(slug);
+}
+function protocolSite(slug) {
+  return BY_SLUG.get(slug);
+}
+function familyByGroup() {
+  return FAMILY_GROUPS.map((g) => ({ ...g, sites: FAMILY.filter((s) => s.group === g.id) }));
+}
+var LEGAL_LINKS = [
+  { href: `${OCHK_IO}/privacy`, label: "Privacy" },
+  { href: `${OCHK_IO}/terms`, label: "Terms" },
+  { href: `${OCHK_IO}/security`, label: "Security" },
+  { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
+  { href: `${OCHK_IO}/contact`, label: "Contact" }
+];
+var SELF_HOSTED_LEGAL_LINKS = [
+  { href: "/privacy", label: "Privacy" },
+  { href: "/terms", label: "Terms" },
+  { href: "/security", label: "Security" },
+  { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
+  { href: "/contact", label: "Contact" }
+];
+var OCHK_IO_NAV = [
+  {
+    href: `${OCHK_IO}/protocols`,
+    label: "Protocols",
+    children: PROTOCOLS.map((p) => ({ href: p.pageHref, label: p.label, description: p.line }))
+  },
+  { href: `${OCHK_IO}/apps`, label: "Apps" },
+  { href: DOCS_HREF, label: "Docs" },
+  { href: `${OCHK_IO}/trust`, label: "Trust" },
+  { href: `${OCHK_IO}/about`, label: "About" }
+];
+var OCHK_IO_FOOTER = [
+  {
+    heading: "Company",
+    links: [
+      { href: `${OCHK_IO}/about`, label: "About" },
+      { href: `${OCHK_IO}/trust`, label: "Trust" },
+      { href: "https://github.com/orangecheck", label: "GitHub", external: true }
+    ]
+  }
+];
+var SiteHomeContext = sharedContext("site-home", void 0);
+function useSiteHome() {
+  return useContext(SiteHomeContext);
+}
 var WORDS = {
   404: {
     name: "Not found",
@@ -3573,10 +3775,13 @@ function ErrorPage({
   title,
   detail,
   actions,
-  home = "/",
+  home,
+  protocol: protocol2,
   art,
   className
 }) {
+  const shellHome = useSiteHome();
+  const homeHref = home ?? (protocol2 ? protocolSite(protocol2).pageHref : shellHome ?? OCHK_IO);
   const words = WORDS[code] ?? (code >= 500 ? WORDS[500] : WORDS[404]);
   const server = code >= 500;
   return /* @__PURE__ */ jsx(Section, { space: "none", className: cn("flex min-h-[min(40rem,72dvh)] items-center py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-12", children: [
@@ -3590,12 +3795,137 @@ function ErrorPage({
       /* @__PURE__ */ jsx("p", { className: "oca-lead oca-enter [--enter-delay:150ms]", children: detail ?? words.detail }),
       /* @__PURE__ */ jsx("div", { className: "oca-enter flex flex-wrap gap-3 [--enter-delay:230ms]", children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         server ? /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), children: "Try again" }) : null,
-        /* @__PURE__ */ jsx(Button, { asChild: true, variant: server ? "secondary" : "primary", children: /* @__PURE__ */ jsx(Link6, { href: home, children: "Go home" }) })
+        /* @__PURE__ */ jsx(Button, { asChild: true, variant: server ? "secondary" : "primary", children: /* @__PURE__ */ jsx(Link6, { href: homeHref, children: "Go home" }) })
       ] }) })
     ] }),
     art !== null ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "oca-enter hidden justify-center md:col-span-5 md:flex [--enter-delay:120ms]", children: art ?? /* @__PURE__ */ jsx(MarkOutline, { className: "w-full max-w-[20rem] text-oca-hairline-strong" }) }) : null
   ] }) });
 }
+function onSecond(tick) {
+  const id = setInterval(tick, 1e3);
+  return () => clearInterval(id);
+}
+var nowSeconds = () => Math.floor(Date.now() / 1e3);
+function CountdownRing({
+  period,
+  remaining,
+  warnAt = 5,
+  size = 18,
+  showSeconds = true,
+  className
+}) {
+  const now = useSyncExternalStore(onSecond, nowSeconds, () => null);
+  const left = remaining ?? (now === null ? null : period - now % period);
+  const share = left === null ? 1 : Math.max(0, Math.min(1, left / period));
+  const warn = left !== null && left <= warnAt;
+  const r = size / 2 - 1.5;
+  const c = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "timer",
+      "aria-label": left === null ? void 0 : `${left} second${left === 1 ? "" : "s"} left`,
+      className: cn("inline-flex items-center gap-1.5", warn ? "text-destructive" : "text-muted-foreground", className),
+      children: [
+        /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", children: [
+          /* @__PURE__ */ jsx("circle", { cx: size / 2, cy: size / 2, r, fill: "none", stroke: "var(--border)", strokeWidth: 2 }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeDasharray: c,
+              strokeDashoffset: c * (1 - share),
+              className: cn(left !== null && left < period && "transition-[stroke-dashoffset] duration-1000 ease-linear motion-reduce:transition-none")
+            }
+          )
+        ] }),
+        showSeconds && left !== null ? /* @__PURE__ */ jsxs("span", { className: "text-[0.8125rem] oca-tabular", children: [
+          left,
+          "s"
+        ] }) : null
+      ]
+    }
+  );
+}
+function PlanCard({
+  name,
+  subtitle,
+  price,
+  period,
+  footnote,
+  features = [],
+  action,
+  badge,
+  badgeTone = "neutral",
+  highlight: highlight2 = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex h-full flex-col gap-5 rounded-[1.25rem] border bg-card p-6",
+        highlight2 ? "border-foreground shadow-sm ring-1 ring-foreground" : "border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-[1.0625rem] font-medium leading-snug", children: name }),
+            badge ? /* @__PURE__ */ jsx(Badge, { tone: badgeTone, children: badge }) : null
+          ] }),
+          subtitle ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: subtitle }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "oca-display-3 oca-tabular", children: price }),
+            period ? /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] text-muted-foreground", children: period }) : null
+          ] }),
+          footnote ? /* @__PURE__ */ jsx("p", { className: "text-[0.8125rem] text-muted-foreground", children: footnote }) : null
+        ] }),
+        features.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2.5 text-[0.9375rem]", children: features.map((f, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5", children: [
+          /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "mt-1 size-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0", children: f })
+        ] }, i)) }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col pt-1 [&>*]:w-full", children: action }) : null
+      ]
+    }
+  );
+}
+function LockedPreview({
+  title,
+  description,
+  action,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    children ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        inert: true,
+        "aria-hidden": true,
+        "data-oca-locked": "",
+        className: "pointer-events-none max-h-[28rem] select-none overflow-hidden [mask-image:linear-gradient(to_bottom,#000_25%,transparent_85%)]",
+        children
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto flex max-w-md flex-col items-center gap-4 rounded-[1.25rem] border border-border bg-card px-6 py-7 text-center shadow-sm", children && "-mt-40"), children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex size-10 items-center justify-center rounded-full bg-muted text-foreground", children: /* @__PURE__ */ jsx(Lock, { className: "size-[1.125rem]" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[1.0625rem] font-medium leading-snug", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] leading-snug text-muted-foreground", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-2", children: action })
+    ] })
+  ] });
+}
 function SectionHeading({
   eyebrow,
   title,
@@ -3836,165 +4166,6 @@ function LegalDocument({ doc, className }) {
     }
   );
 }
-
-// src/family/index.ts
-var OCHK_IO = "https://ochk.io";
-var DOCS_HREF = `${OCHK_IO}/docs`;
-function protocol(slug, verb, line, kinds) {
-  return {
-    slug,
-    label: slug,
-    href: `${OCHK_IO}/${slug}`,
-    group: "protocol",
-    line,
-    status: "live",
-    verb,
-    pageHref: `${OCHK_IO}/${slug}`,
-    toolHref: `https://${slug}.ochk.io`,
-    specHref: `https://github.com/orangecheck/oc-${slug}-protocol`,
-    kinds
-  };
-}
-var PROTOCOLS = [
-  protocol("attest", "identity", "Show that an address holds bitcoin, and for how long.", "30078"),
-  protocol("lock", "confidentiality", "Encrypt to a Bitcoin address, so only its holder can open it.", "30078"),
-  protocol("vote", "legitimacy", "Polls weighed in sats, that anyone can tally.", "30080\u201330082"),
-  protocol("stamp", "provenance", "Prove who signed something, and when.", "30083"),
-  protocol("agent", "authority", "Give software scoped, revocable permission to act for you.", "30083\u201330086"),
-  protocol("pledge", "commitment", "Make a promise with bitcoin behind it, on a public record.", "30078")
-];
-var PROTOCOL_ORDER = PROTOCOLS.map((p) => p.slug);
-var FAMILY = [
-  {
-    slug: "home",
-    label: "ochk.io",
-    href: OCHK_IO,
-    group: "orangecheck",
-    line: "The open protocols, and the company behind them.",
-    status: "live"
-  },
-  {
-    slug: "me",
-    label: "ochk.app",
-    href: "https://ochk.app",
-    group: "orangecheck",
-    line: "One account, with Bitcoin behind it.",
-    status: "testing"
-  },
-  {
-    slug: "docs",
-    label: "docs",
-    href: DOCS_HREF,
-    group: "orangecheck",
-    line: "Specs, SDKs and guides for every protocol.",
-    status: "live"
-  },
-  ...PROTOCOLS,
-  {
-    slug: "vault",
-    label: "vault",
-    href: "https://vault.ochk.io",
-    group: "app",
-    line: "A password manager, encrypted in your browser.",
-    status: "live",
-    protocols: ["lock"]
-  },
-  {
-    slug: "chat",
-    label: "chat",
-    href: "https://chat.ochk.io",
-    group: "app",
-    line: "Messages only the holder of a Bitcoin address can read.",
-    status: "testing",
-    protocols: ["lock"]
-  },
-  {
-    slug: "cosign",
-    label: "cosign",
-    href: "https://cosign.ochk.io",
-    group: "app",
-    line: "Builders find co-founders and backers.",
-    status: "testing",
-    // Signs in with an orangecheck account and a wallet; uses none of the six directly.
-    protocols: []
-  },
-  {
-    slug: "me-demo",
-    // "demo", not the made-up app's own name, so nobody takes it for ours.
-    label: "demo",
-    href: "https://me-demo.ochk.io",
-    group: "app",
-    line: "Lumen Notes, a made-up app that signs in with orangecheck.",
-    status: "live"
-  },
-  {
-    slug: "globe",
-    label: "globe",
-    href: "https://globe.ochk.io",
-    group: "public-good",
-    line: "The Bitcoin network, live, on a globe.",
-    status: "live"
-  },
-  {
-    slug: "btc",
-    label: "btc",
-    href: "https://btc.ochk.io",
-    group: "public-good",
-    line: "A free desk for reading the Bitcoin market.",
-    status: "live"
-  }
-];
-var FAMILY_GROUPS = [
-  { id: "orangecheck", label: "orangecheck" },
-  { id: "protocol", label: "Protocols" },
-  { id: "app", label: "Apps" },
-  { id: "public-good", label: "Public goods" }
-];
-var BY_SLUG = new Map(FAMILY.map((s) => [s.slug, s]));
-function familySite(slug) {
-  return BY_SLUG.get(slug);
-}
-function protocolSite(slug) {
-  return BY_SLUG.get(slug);
-}
-function familyByGroup() {
-  return FAMILY_GROUPS.map((g) => ({ ...g, sites: FAMILY.filter((s) => s.group === g.id) }));
-}
-var LEGAL_LINKS = [
-  { href: `${OCHK_IO}/privacy`, label: "Privacy" },
-  { href: `${OCHK_IO}/terms`, label: "Terms" },
-  { href: `${OCHK_IO}/security`, label: "Security" },
-  { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
-  { href: `${OCHK_IO}/contact`, label: "Contact" }
-];
-var SELF_HOSTED_LEGAL_LINKS = [
-  { href: "/privacy", label: "Privacy" },
-  { href: "/terms", label: "Terms" },
-  { href: "/security", label: "Security" },
-  { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
-  { href: "/contact", label: "Contact" }
-];
-var OCHK_IO_NAV = [
-  {
-    href: `${OCHK_IO}/protocols`,
-    label: "Protocols",
-    children: PROTOCOLS.map((p) => ({ href: p.pageHref, label: p.label, description: p.line }))
-  },
-  { href: `${OCHK_IO}/apps`, label: "Apps" },
-  { href: DOCS_HREF, label: "Docs" },
-  { href: `${OCHK_IO}/trust`, label: "Trust" },
-  { href: `${OCHK_IO}/about`, label: "About" }
-];
-var OCHK_IO_FOOTER = [
-  {
-    heading: "Company",
-    links: [
-      { href: `${OCHK_IO}/about`, label: "About" },
-      { href: `${OCHK_IO}/trust`, label: "Trust" },
-      { href: "https://github.com/orangecheck", label: "GitHub", external: true }
-    ]
-  }
-];
 var InDocsContext = sharedContext("in-docs", false);
 function useInDocs() {
   return useContext(InDocsContext);
@@ -4811,6 +4982,7 @@ function SignMessage({
   error,
   submitLabel = "Confirm",
   secondary,
+  scheme = "bip322",
   onSignature,
   className
 }) {
@@ -4825,7 +4997,7 @@ function SignMessage({
         /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsx(CodeBlock, { code: message, caption: "Message to sign" }),
+    /* @__PURE__ */ jsx(CodeBlock, { code: message, caption: "Message to sign", wrap: true }),
     /* @__PURE__ */ jsxs(
       "form",
       {
@@ -4841,7 +5013,9 @@ function SignMessage({
               label: "Signature",
               error,
               hint: /* @__PURE__ */ jsxs(Fragment, { children: [
-                "From your wallet\u2019s \u201Csign message\u201D (BIP-322), signed by",
+                "From your wallet\u2019s \u201Csign message\u201D (",
+                scheme === "legacy" ? "legacy, BIP-137" : "BIP-322",
+                "), signed by",
                 " ",
                 /* @__PURE__ */ jsx("span", { className: "break-all font-mono", children: address }),
                 "."
@@ -4909,6 +5083,7 @@ function SearchDialog({
   idle,
   defaultQuery = "",
   debounceMs = 120,
+  browse = false,
   className
 }) {
   const [own, setOwn] = useState(false);
@@ -4945,7 +5120,7 @@ function SearchDialog({
   }, [hotkey]);
   useEffect(() => {
     const q = query.trim();
-    if (!q) {
+    if (!q && !(browse && open)) {
       setGroups([]);
       setState("idle");
       return;
@@ -4967,14 +5142,15 @@ function SearchDialog({
       clearTimeout(t);
       ctl.abort();
     };
-  }, [query, debounceMs]);
+  }, [query, debounceMs, browse, open]);
   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);
+    if (r.run) r.run();
+    else if (onSelect) onSelect(r);
+    else if (r.href) window.location.assign(r.href);
   };
   const optionId = (i) => `${listId}-o${i}`;
   const showList = state === "done" && flat.length > 0;
@@ -5045,25 +5221,28 @@ function SearchDialog({
                   index++;
                   const i = index;
                   const on = i === active;
+                  const Option = r.href ? "a" : "div";
                   return /* @__PURE__ */ jsxs(
-                    "a",
+                    Option,
                     {
                       id: optionId(i),
-                      href: r.href,
+                      ...r.href ? { href: r.href } : {},
                       role: "option",
                       "aria-selected": on,
                       tabIndex: -1,
                       onMouseMove: () => setActive(i),
                       onClick: (e) => {
-                        if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+                        if (r.href && (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"
+                        on ? "bg-accent" : "hover:bg-accent",
+                        !r.href && "cursor-pointer"
                       ),
                       children: [
+                        r.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-[1.0625rem]", children: r.icon }) : null,
                         /* @__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,
@@ -5075,6 +5254,7 @@ function SearchDialog({
                             }
                           ) : r.excerpt ? /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-[0.875rem] leading-snug text-muted-foreground", children: r.excerpt }) : null
                         ] }),
+                        r.meta ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 text-[0.8125rem] text-muted-foreground", children: r.meta }) : null,
                         /* @__PURE__ */ jsx(CornerDownLeft, { "aria-hidden": true, className: cn("mt-1 size-4 shrink-0 text-muted-foreground", !on && "invisible") })
                       ]
                     },
@@ -5083,11 +5263,11 @@ function SearchDialog({
                 })
               ] }, 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: [
+              state === "done" && flat.length === 0 ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-3 py-6 text-[0.9375rem] text-muted-foreground", children: query.trim() ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 "No results for \u201C",
                 query.trim(),
                 "\u201D."
-              ] }) : null,
+              ] }) : "Nothing here yet." }) : 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: [
@@ -5112,6 +5292,13 @@ function SearchDialog({
     ] }) })
   ] });
 }
+function CommandDialog({
+  label = "Commands",
+  placeholder = "Search, or run a command",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SearchDialog, { ...props, label, placeholder, button: false, browse: true });
+}
 function pretty(content) {
   try {
     return JSON.stringify(JSON.parse(content), null, 2);
@@ -5353,7 +5540,7 @@ function FormSection({
       "aria-current": status === "current" ? "step" : void 0,
       className: cn("scroll-mt-24 rounded-[1.25rem] border border-border bg-card", className),
       children: [
-        /* @__PURE__ */ jsxs("header", { className: cn("flex items-start gap-3.5", tight ? "px-5 pt-5" : "px-6 pt-6"), children: [
+        /* @__PURE__ */ jsxs("header", { className: cn("flex flex-wrap items-start gap-x-3.5 gap-y-3", tight ? "px-5 pt-5" : "px-6 pt-6"), children: [
           n !== void 0 ? /* @__PURE__ */ jsx(
             "span",
             {
@@ -5380,7 +5567,7 @@ function FormSection({
             ] }),
             hint ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: hint }) : null
           ] }),
-          action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+          action ? /* @__PURE__ */ jsx("div", { className: cn("shrink-0 max-sm:basis-full", n !== void 0 && "max-sm:pl-[2.625rem]"), children: action }) : null
         ] }),
         /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", tight ? "gap-4 p-5" : "gap-5 p-6", n !== void 0 && (tight ? "sm:pl-[3.875rem]" : "sm:pl-[4.125rem]")), children })
       ]
@@ -5540,6 +5727,13 @@ function BlockCountdown({
     ] }) : null
   ] });
 }
+var METER_FILL = {
+  ink: "bg-foreground",
+  brand: "bg-oca-orange-deep",
+  good: "bg-success",
+  caution: "bg-warning",
+  bad: "bg-destructive"
+};
 function Meter({
   value,
   max,
@@ -5574,7 +5768,7 @@ function Meter({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn("h-full shrink-0 rounded-full", tone === "brand" ? "bg-oca-orange-deep" : "bg-foreground"),
+              className: cn("h-full shrink-0 rounded-full", METER_FILL[tone]),
               style: { width: `${v * 100}%` }
             }
           ),
@@ -5610,27 +5804,30 @@ function FilterChips({
       onChange(cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v]);
     } else onChange(v);
   };
-  return /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--background)", className: cn("w-full", className), children: /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: "flex w-max items-center gap-2 py-0.5", children: options.map((o) => {
-    const on = isOn(o.value);
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-pressed": on,
-        onClick: () => press(o.value),
-        className: cn(
-          "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3.5 text-[0.875rem] transition-colors",
-          tight ? "h-8" : "h-9",
-          on ? "border-foreground bg-foreground text-background" : "border-border bg-card text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
-        ),
-        children: [
-          o.label,
-          o.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "oca-tabular", children: o.count.toLocaleString("en-US") }) : null
-        ]
-      },
-      o.value
-    );
-  }) }) });
+  return (
+    // Wraps rather than scrolls: every filter stays in view on a phone.
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: cn("flex flex-wrap items-center gap-2 py-0.5", className), children: options.map((o) => {
+      const on = isOn(o.value);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": on,
+          onClick: () => press(o.value),
+          className: cn(
+            "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3.5 text-[0.875rem] transition-colors",
+            tight ? "h-8" : "h-9",
+            on ? "border-foreground bg-foreground text-background" : "border-border bg-card text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
+          ),
+          children: [
+            o.label,
+            o.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "oca-tabular", children: o.count.toLocaleString("en-US") }) : null
+          ]
+        },
+        o.value
+      );
+    }) })
+  );
 }
 function ToolGrid({
   tools,
@@ -5818,48 +6015,106 @@ function SectionSwitch({
     }
   );
 }
+function NavBadge({ badge, className }) {
+  if (typeof badge === "number") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "absolute flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-medium leading-none text-primary-foreground ring-2 ring-background oca-tabular",
+          className
+        ),
+        children: badge > 99 ? "99+" : badge
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute size-2 rounded-full bg-oca-orange-deep ring-2 ring-background", className) });
+}
+var TAB = "flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
+function TabFace({ icon, label, badge, active }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
+          "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
+          active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
+        ),
+        children: [
+          icon,
+          badge ? /* @__PURE__ */ jsx(NavBadge, { badge, className: typeof badge === "number" ? "-top-1 right-0.5" : "right-2.5 top-0.5" }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: label }),
+    badge ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: badge }) : null
+  ] });
+}
 function TabBar({ items }) {
+  const [more, setMore] = useState(false);
+  const overflow = items.length > 5;
+  const shown = overflow ? items.slice(0, 4) : items;
+  const rest = overflow ? items.slice(4) : [];
+  const restBadge = rest.find((it) => it.badge)?.badge;
   return /* @__PURE__ */ jsx(
     "nav",
     {
       "aria-label": "Pages",
       "data-oca-tabbar": "",
       className: "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md md:hidden",
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: "mx-auto grid h-14 max-w-[32rem] px-1.5",
-          style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
-          children: items.map((it) => /* @__PURE__ */ jsxs(
-            Link6,
-            {
-              href: it.href,
-              "aria-current": it.active ? "page" : void 0,
-              className: cn(
-                "flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+          style: { gridTemplateColumns: `repeat(${shown.length + (overflow ? 1 : 0)}, minmax(0, 1fr))` },
+          children: [
+            shown.map((it) => /* @__PURE__ */ jsx(
+              Link6,
+              {
+                href: it.href,
+                "aria-current": it.active ? "page" : void 0,
+                className: cn(TAB, it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
+                children: /* @__PURE__ */ jsx(TabFace, { icon: it.icon, label: it.label, badge: it.badge, active: it.active })
+              },
+              it.href
+            )),
+            overflow ? /* @__PURE__ */ jsxs(Sheet, { open: more, onOpenChange: setMore, children: [
+              /* @__PURE__ */ jsx(
+                SheetTrigger,
+                {
+                  className: cn(TAB, rest.some((it) => it.active) ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
+                  children: /* @__PURE__ */ jsx(TabFace, { icon: /* @__PURE__ */ jsx(Ellipsis, {}), label: "More", badge: restBadge ? true : void 0, active: rest.some((it) => it.active) })
+                }
               ),
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "span",
+              /* @__PURE__ */ jsxs(SheetContent, { side: "bottom", className: "pb-[calc(1.5rem+env(safe-area-inset-bottom))]", children: [
+                /* @__PURE__ */ jsx(SheetTitle, { className: "px-1 text-[1.0625rem] font-medium", children: "More" }),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-3 gap-2", children: rest.map((it) => /* @__PURE__ */ jsxs(
+                  Link6,
                   {
+                    href: it.href,
+                    onClick: () => setMore(false),
+                    "aria-current": it.active ? "page" : void 0,
                     className: cn(
-                      "relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
-                      "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
-                      it.active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
+                      "flex min-h-20 flex-col items-center justify-center gap-2 rounded-2xl border px-2 text-center text-[0.8125rem] transition-colors",
+                      "[&_svg]:size-5",
+                      it.active ? "border-foreground bg-card text-foreground" : "border-border text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      it.icon,
-                      it.badge ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute right-2.5 top-0.5 size-2 rounded-full bg-oca-orange ring-2 ring-background" }) : null
+                      /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                        it.icon,
+                        it.badge ? /* @__PURE__ */ jsx(NavBadge, { badge: it.badge, className: typeof it.badge === "number" ? "-right-3 -top-2" : "-right-1 -top-0.5" }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "max-w-full truncate", children: it.label }),
+                      it.badge ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: it.badge }) : null
                     ]
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: it.label }),
-                it.badge ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: it.badge }) : null
-              ]
-            },
-            it.href
-          ))
+                  },
+                  it.href
+                )) })
+              ] })
+            ] }) : null
+          ]
         }
       )
     }
@@ -5867,7 +6122,11 @@ function TabBar({ items }) {
 }
 function tabsFor(groups) {
   const items = groups.flatMap((g) => g.items);
-  return items.length >= 2 && items.length <= 5 && items.every((it) => it.icon) ? items : null;
+  return items.length >= 2 && items.every((it) => it.icon) ? items : null;
+}
+function sectionTabs(sections, current2) {
+  if (!sections || !current2 || sections.length < 2 || !sections.every((sec) => sec.icon)) return null;
+  return sections.map((sec) => ({ href: sec.href, label: sec.label, icon: sec.icon, active: sec.id === current2.id }));
 }
 var activeItem = (groups) => groups.flatMap((g) => g.items).find((it) => it.active);
 var warned = /* @__PURE__ */ new Set();
@@ -5882,7 +6141,10 @@ function warnDuplicateLabels(groups) {
     seen.add(it.label);
   }
 }
-function AppShell({
+function AppShell(props) {
+  return props.variant === "rail" ? /* @__PURE__ */ jsx(RailShell, { ...props }) : /* @__PURE__ */ jsx(SidebarShell, { ...props });
+}
+function SidebarShell({
   nav,
   sections,
   activeSection,
@@ -5900,7 +6162,8 @@ function AppShell({
   const current2 = sections && sections.length > 0 ? sections.find((sec) => sec.id === activeSection) ?? sections.find((sec) => activeItem(sec.groups)) ?? sections[0] : void 0;
   const groups = current2 ? [...current2.groups, ...persistent] : [...nav ?? [], ...persistent];
   warnDuplicateLabels(groups);
-  const tabs = current2 ? null : tabsFor(groups);
+  const sectionTabsFor = sectionTabs(sections, current2);
+  const tabs = current2 ? sectionTabsFor : tabsFor(groups);
   const page = activeItem(groups);
   const place = useMemo(
     () => ({
@@ -5928,8 +6191,8 @@ function AppShell({
                 {
                   className: cn(
                     "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
-                    // The tab bar holds every page; the sheet is left for a footer.
-                    tabs && !footer && "max-md:hidden"
+                    // The tab bar holds every page; the sheet is left for a footer. Section tabs leave the pages here.
+                    tabs && !sectionTabsFor && !footer && "max-md:hidden"
                   ),
                   "aria-label": "Open navigation",
                   children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
@@ -5937,8 +6200,8 @@ function AppShell({
               ),
               /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "flex flex-col gap-6 overflow-y-auto p-4 pt-16", children: [
                 /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
-                switcher,
-                /* @__PURE__ */ jsx("div", { className: tabs ? "max-md:hidden" : void 0, children: /* @__PURE__ */ jsx(SideNav, { groups, onNavigate: () => setOpen(false) }) }),
+                switcher ? /* @__PURE__ */ jsx("div", { className: sectionTabsFor ? "max-md:hidden" : void 0, children: switcher }) : null,
+                /* @__PURE__ */ jsx("div", { className: tabs && !sectionTabsFor ? "max-md:hidden" : void 0, children: /* @__PURE__ */ jsx(SideNav, { groups, onNavigate: () => setOpen(false) }) }),
                 footer ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
               ] })
             ] }),
@@ -5952,7 +6215,7 @@ function AppShell({
               className: cn(
                 "flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]",
                 // The active tab already names the page.
-                tabs && !pageOverride && "max-md:hidden"
+                tabs && !sectionTabsFor && !pageOverride && "max-md:hidden"
               ),
               children: [
                 place.section ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -5985,6 +6248,64 @@ function AppShell({
     }
   ) });
 }
+function RailItem({ item }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Link6,
+      {
+        href: item.href,
+        "aria-current": item.active ? "page" : void 0,
+        className: cn(
+          "relative flex size-10 items-center justify-center rounded-xl outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+          "[&_svg]:size-5 [&_svg]:shrink-0",
+          item.active ? "bg-card text-foreground shadow-sm ring-1 ring-border" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+        ),
+        children: [
+          item.icon,
+          /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            item.label,
+            item.badge ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              ", ",
+              item.badge
+            ] }) : null
+          ] }),
+          item.badge ? /* @__PURE__ */ jsx(NavBadge, { badge: item.badge, className: typeof item.badge === "number" ? "-right-1 -top-1" : "right-1 top-1" }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: item.label })
+  ] });
+}
+function RailShell({ nav = [], persistent = [], page: pageOverride, header, account, banner, children, className }) {
+  const main = nav.flatMap((g) => g.items);
+  const foot = persistent.flatMap((g) => g.items);
+  warnDuplicateLabels([...nav, ...persistent]);
+  const tabs = tabsFor([{ items: [...main, ...foot] }]);
+  const active = activeItem([...nav, ...persistent]);
+  const place = useMemo(() => ({ page: pageOverride ?? active?.label }), [pageOverride, active?.label]);
+  return /* @__PURE__ */ jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-dvh flex-col overflow-hidden bg-background", className), children: [
+    header,
+    banner,
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("nav", { "aria-label": "Pages", className: "hidden w-14 shrink-0 flex-col items-center gap-1 border-r border-border py-3 md:flex", children: [
+        main.map((it) => /* @__PURE__ */ jsx(RailItem, { item: it }, it.href)),
+        /* @__PURE__ */ jsxs("div", { className: "mt-auto flex flex-col items-center gap-1", children: [
+          foot.map((it) => /* @__PURE__ */ jsx(RailItem, { item: it }, it.href)),
+          account
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "main",
+        {
+          id: "main-content",
+          className: cn("flex min-h-0 min-w-0 flex-1 flex-col", tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]"),
+          children
+        }
+      )
+    ] }),
+    tabs ? /* @__PURE__ */ jsx(TabBar, { items: tabs }) : null
+  ] }) }) });
+}
 function AccountMenu({
   name,
   detail,
@@ -6385,12 +6706,14 @@ function SignInFrame({
   error,
   fineprint,
   brand,
-  home = "/",
+  home,
+  protocol: protocol2,
   back,
   art,
   caption,
   className
 }) {
+  const homeHref = home ?? (protocol2 ? protocolSite(protocol2).pageHref : OCHK_IO);
   return /* @__PURE__ */ jsxs(
     "main",
     {
@@ -6399,14 +6722,14 @@ function SignInFrame({
       children: [
         /* @__PURE__ */ jsxs("section", { className: "flex flex-col px-4 pb-8 pt-5 sm:px-8 lg:px-14 lg:pt-8", children: [
           /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs(Link6, { href: home, className: "w-fit rounded-lg", children: [
+            /* @__PURE__ */ jsxs(Link6, { href: homeHref, className: "w-fit rounded-lg", children: [
               brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
             ] }),
             back === void 0 ? /* @__PURE__ */ jsx(
               Link6,
               {
-                href: home,
+                href: homeHref,
                 className: "text-[0.9375rem] text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
                 children: "Back to home"
               }
@@ -6655,6 +6978,7 @@ function ToolShell({
   children
 }) {
   const p = protocolSite(protocol2);
+  const homeHref = home ?? p.pageHref;
   const app = variant === "app";
   const tabs = app ? null : tabsFor([{ items: [...tools] }]);
   const about = /* @__PURE__ */ jsxs(
@@ -6684,7 +7008,7 @@ function ToolShell({
           SiteHeader,
           {
             variant: "tool",
-            home: home ?? p.pageHref,
+            home: homeHref,
             product: p.label,
             family: protocol2,
             nav: tools.map((t) => ({ href: t.href, label: t.label, active: t.active })),
@@ -6709,7 +7033,7 @@ function ToolShell({
             {
               id: "main-content",
               className: cn("min-w-0 flex-1", app ? "flex min-h-0 flex-col" : "px-4 pb-16 pt-8 md:px-8 md:pt-10"),
-              children: app ? children : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children })
+              children: /* @__PURE__ */ jsx(SiteHomeContext.Provider, { value: homeHref, children: app ? children : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
             }
           )
         ] }),
@@ -6888,6 +7212,6 @@ function createMdxComponents({ mermaid } = {}) {
 }
 var mdxComponents = createMdxComponents();
 
-export { APP_ATTRIBUTE, APP_ID, Accent, Accordion, AccordionItem, AccountMenu, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, AppIcon, AppShell, ArtifactView, Badge, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Button, CODE_LANGS, Callout, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardNumeral, CardTitle, Checkbox, Closing, CodeBlock, CodeTabs, ComparisonTable, Container, CopyButton, Crowd, DOCS_HEADER_NAV, DOCS_HREF, DataTable, DensityProvider, Diagram, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, Display, DocHeader, DocLayout, DocsHeading, DocsNav, DocsPager, DocsShell, DropZone, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FAMILY, FAMILY_GROUPS, FactBlock, FactRows, FamilyMenu, Faq, Field, FilterChips, FloatChip, Footnote, FormSection, HalftoneCanvas, HalftoneSphere, HashChip, Input, InstallTabs, IsoCheck, Kbd, KeyValueList, LEGAL_LINKS, Label, Lead, LegalDocument, LinkCard, LoadingBlock, Lockup, MARK_FACES, Mark, MdxTable, Meter, Monogram, Notice, OCHK_APP_ACCOUNT, OCHK_IO, OCHK_IO_FOOTER, OCHK_IO_NAV, OchkIoFooter, OnThisPage, PROTOCOLS, PROTOCOL_ORDER, PackageCard, PageHeader, PageHero, Pagination, PhoneFrame, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, QrCode, RadioGroup, RadioGroupItem, Reveal, SELF_HOSTED_LEGAL_LINKS, SPHERE_GRADIENT, Sats, SatsFigure, ScrollFade, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, SessionAccountView, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, ShellContext, SignInFrame, SignMessage, SiteBanner, SiteFooter, SiteHeader, Skeleton, SkipLink, SpecCard, Spinner, SplitBar, StatCard, StatGrid, StateBadge, StatusBadge, StatusDot, StatusPill, Step, StepGrid, Steps, Switch, TOKEN_CLASS, Tabs, TabsContent, TabsList, TabsTrigger, TextLink, Textarea, ThemeToggle, Ticker, Toaster, ToolGrid, ToolShell, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruthTable, UsdApprox, VerifyBox, VerifyReport, appColors, appFonts, badgeVariants, blocksToDuration, buttonVariants, cardVariants, cn, confirm, createMdxComponents, createStateBadge, escapeHtml, explorerUrl, familyByGroup, familySite, formatBlockHeight, formatBytes, formatUtc, grammarOf, highlight, highlightToHtml, languageName, linesToHtml, mdxComponents, monogramGround, monogramLetter, parseCodeMeta, parseLineRanges, portraitTone, prompt, protocolSite, readDiff, rehypeCode, satsText, sectionVariants, shortenMiddle, statusWord, useActiveHeading, useCopy, useDensity, useHeadings, useInView, useShellPlace, useSignInHref, useTimedOut };
+export { APP_ATTRIBUTE, APP_ID, Accent, Accordion, AccordionItem, AccountMenu, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, AppIcon, AppShell, ArtifactView, Badge, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Button, CODE_LANGS, Callout, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardNumeral, CardTitle, Checkbox, Closing, CodeBlock, CodeTabs, CommandDialog, ComparisonTable, Container, CopyButton, CountdownRing, Crowd, DOCS_HEADER_NAV, DOCS_HREF, DataTable, DensityProvider, Diagram, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, Display, DocHeader, DocLayout, DocsHeading, DocsNav, DocsPager, DocsShell, DropZone, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FAMILY, FAMILY_GROUPS, FactBlock, FactRows, FamilyMenu, Faq, Field, FilterChips, FloatChip, Footnote, FormSection, HalftoneCanvas, HalftoneSphere, HashChip, Input, InstallTabs, IsoCheck, Kbd, KeyValueList, LEGAL_LINKS, Label, Lead, LegalDocument, LinkCard, LoadingBlock, LockedPreview, Lockup, MARK_FACES, Mark, MdxTable, Meter, Monogram, Notice, OCHK_APP_ACCOUNT, OCHK_IO, OCHK_IO_FOOTER, OCHK_IO_NAV, OchkIoFooter, OnThisPage, PROTOCOLS, PROTOCOL_ORDER, PackageCard, PageHeader, PageHero, Pagination, PhoneFrame, PlanCard, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, QrCode, RadioGroup, RadioGroupItem, Reveal, SELF_HOSTED_LEGAL_LINKS, SPHERE_GRADIENT, Sats, SatsFigure, ScrollFade, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, SessionAccountView, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, ShellContext, SignInFrame, SignMessage, SiteBanner, SiteFooter, SiteHeader, Skeleton, SkipLink, SpecCard, Spinner, SplitBar, StatCard, StatGrid, StateBadge, StatusBadge, StatusDot, StatusPill, Step, StepGrid, Steps, Switch, TOKEN_CLASS, Tabs, TabsContent, TabsList, TabsTrigger, TextLink, Textarea, ThemeToggle, Ticker, Toaster, ToolGrid, ToolShell, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruthTable, UsdApprox, VerifyBox, VerifyReport, appColors, appFonts, badgeVariants, blocksToDuration, buttonVariants, cardVariants, cn, confirm, createMdxComponents, createStateBadge, escapeHtml, explorerUrl, familyByGroup, familySite, formatBlockHeight, formatBytes, formatUtc, grammarOf, highlight, highlightToHtml, languageName, linesToHtml, mdxComponents, monogramGround, monogramLetter, parseCodeMeta, parseLineRanges, portraitTone, prompt, protocolSite, readDiff, rehypeCode, satsText, sectionVariants, shortenMiddle, statusWord, useActiveHeading, useCopy, useDensity, useHeadings, useInView, useShellPlace, useSignInHref, useTimedOut };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map