@orangecheck/app-design 0.6.0 → 1.0.0

package/dist/components.mjs

@@ -1,12 +1,18 @@
-import { forwardRef, createContext, createElement, useRef, useState, useEffect, useContext, Children, isValidElement, cloneElement, useCallback, Component } from 'react';
+import { forwardRef, createContext, createElement, useRef, useState, useEffect, useContext, Children, isValidElement, cloneElement, useCallback, Component, useId, 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 { Check, Copy } from 'lucide-react';
+import { ChevronDown, Check, Copy, ArrowUpRight, 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';
+import Link from 'next/link';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
 
 var merge = extendTailwindMerge({
   extend: {
@@ -343,13 +349,13 @@ var badgeVariants = cva(
       tone: {
         neutral: "border-border bg-card text-foreground",
         muted: "border-transparent bg-muted text-muted-foreground",
-        brand: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_12%,var(--card))] text-oca-accent-ink",
+        brand: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))] text-oca-accent-ink",
         danger: "border-transparent bg-[color-mix(in_oklab,var(--destructive)_12%,var(--card))] text-destructive",
         // A good state is a neutral pill with a green dot, not a green pill.
         success: GOOD_DOT,
         // Aliases kept so older call sites keep compiling: attention is
         // the brand accent, information is neutral.
-        warning: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_12%,var(--card))] text-oca-accent-ink",
+        warning: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))] text-oca-accent-ink",
         info: "border-border bg-card text-foreground",
         // Inverted in dark mode, where ink would sit on a card of nearly its own colour.
         ink: "border-transparent bg-oca-ink text-oca-ink-foreground dark:bg-foreground dark:text-background",
@@ -1433,7 +1439,1158 @@ var ErrorBoundary = class extends Component {
     ) });
   }
 };
+var TOP = "0,3 2,2 6,4 14,0 16,1 6,6";
+var LEFT = "0,3 6,6 6,8 0,5";
+var RIGHT = "6,6 16,1 16,3 6,8";
+var MARK_FACES = { top: "#FED8AB", left: "#FB933C", right: "#EA580B" };
+function Mark({ title, size, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 8",
+      width: size,
+      height: size ? size / 2 : void 0,
+      role: title ? "img" : void 0,
+      "aria-hidden": title ? void 0 : true,
+      className: cn("shrink-0", className),
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsx("polygon", { points: LEFT, fill: MARK_FACES.left }),
+        /* @__PURE__ */ jsx("polygon", { points: RIGHT, fill: MARK_FACES.right }),
+        /* @__PURE__ */ jsx("polygon", { points: TOP, fill: MARK_FACES.top })
+      ]
+    }
+  );
+}
+function MarkOutline({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "-0.2 -0.2 16.4 8.4", "aria-hidden": true, className: cn("shrink-0 overflow-visible", className), children: [TOP, LEFT, RIGHT].map((points) => /* @__PURE__ */ jsx(
+    "polygon",
+    {
+      points,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1",
+      strokeLinejoin: "round",
+      vectorEffect: "non-scaling-stroke"
+    },
+    points
+  )) });
+}
+var WORDS = {
+  404: {
+    name: "Not found",
+    title: "This page isn\u2019t here.",
+    detail: "The link may be old, or the address mistyped."
+  },
+  500: {
+    name: "Server error",
+    title: "Something broke on our side.",
+    detail: "Try again in a moment."
+  }
+};
+function ErrorPage({
+  code = 404,
+  title,
+  detail,
+  actions,
+  home = "/",
+  art,
+  className
+}) {
+  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: [
+    /* @__PURE__ */ jsxs("div", { className: "flex max-w-[40rem] flex-col items-start gap-6 md:col-span-7", children: [
+      /* @__PURE__ */ jsxs("p", { className: "oca-eyebrow oca-enter", children: [
+        /* @__PURE__ */ jsx("span", { className: "oca-tabular", children: code }),
+        " \xB7 ",
+        WORDS[code]?.name ?? (server ? "Error" : "Not available")
+      ] }),
+      /* @__PURE__ */ jsx("h1", { className: "oca-display-2 oca-enter [--enter-delay:70ms]", children: title ?? words.title }),
+      /* @__PURE__ */ jsx("p", { className: "oca-lead oca-enter [--enter-delay:150ms]", children: detail ?? words.detail }),
+      /* @__PURE__ */ jsx("div", { className: "oca-enter flex flex-wrap gap-3 [--enter-delay:230ms]", children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        server ? /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), children: "Try again" }) : null,
+        /* @__PURE__ */ jsx(Button, { asChild: true, variant: server ? "secondary" : "primary", children: /* @__PURE__ */ jsx(Link, { href: home, children: "Go home" }) })
+      ] }) })
+    ] }),
+    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 IsoCheck({ size = 360, settle = false, shadow = true, tilt = false, title, className }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !tilt || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    let raf = 0;
+    let tx = 0;
+    let ty = 0;
+    let x = 0;
+    let y = 0;
+    const step = () => {
+      x += (tx - x) * 0.08;
+      y += (ty - y) * 0.08;
+      el.style.setProperty("--rx", `${(-y * 10).toFixed(2)}deg`);
+      el.style.setProperty("--ry", `${(x * 14).toFixed(2)}deg`);
+      raf = Math.abs(tx - x) + Math.abs(ty - y) > 1e-3 ? requestAnimationFrame(step) : 0;
+    };
+    const move = (e) => {
+      const b = el.getBoundingClientRect();
+      tx = Math.max(-1, Math.min(1, (e.clientX - (b.left + b.width / 2)) / (window.innerWidth / 2)));
+      ty = Math.max(-1, Math.min(1, (e.clientY - (b.top + b.height / 2)) / (window.innerHeight / 2)));
+      if (!raf) raf = requestAnimationFrame(step);
+    };
+    window.addEventListener("pointermove", move, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("pointermove", move);
+    };
+  }, [tilt]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("relative inline-block", settle && "oca-animate-settle", className),
+      style: { width: size, perspective: tilt ? 900 : void 0 },
+      children: [
+        tilt ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute left-1/2 top-1/2 -z-0 aspect-square w-[120%] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-70 blur-3xl",
+            style: { background: "radial-gradient(closest-side, rgb(255 140 70 / 0.35), transparent)" }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative z-10 transition-transform duration-300 ease-out",
+            style: tilt ? { transform: "rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))", transformStyle: "preserve-3d" } : void 0,
+            children: /* @__PURE__ */ jsx(Mark, { size, title, className: "block" })
+          }
+        ),
+        shadow ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute left-[8%] right-[8%] rounded-[50%] opacity-60 blur-xl",
+            style: { height: size * 0.08, bottom: -size * 0.04, background: "rgb(234 88 11 / 0.18)" }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var GroupName = createContext(void 0);
+function Accordion({
+  single = false,
+  children,
+  className
+}) {
+  const name = useId();
+  return /* @__PURE__ */ jsx(GroupName.Provider, { value: single ? name : void 0, children: /* @__PURE__ */ jsx("div", { className: cn("divide-y divide-border overflow-hidden rounded-[1.25rem] border border-border bg-card", className), children }) });
+}
+function AccordionItem({
+  title,
+  children,
+  defaultOpen = false,
+  id,
+  className
+}) {
+  const name = useContext(GroupName);
+  return /* @__PURE__ */ jsxs("details", { id, name, open: defaultOpen || void 0, className: cn("group scroll-mt-24", className), children: [
+    /* @__PURE__ */ jsxs(
+      "summary",
+      {
+        className: cn(
+          "flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 text-[1rem] font-medium leading-snug md:px-6",
+          // Inside the card's clip, so the ring is drawn within the row.
+          "transition-colors hover:bg-accent/60 focus-visible:outline-offset-[-2px] [&::-webkit-details-marker]:hidden"
+        ),
+        children: [
+          title,
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              "aria-hidden": true,
+              className: "size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "oca-body px-5 pb-5 text-[0.9375rem] md:px-6 md:pb-6", children })
+  ] });
+}
+function SectionHeading({
+  eyebrow,
+  title,
+  lead,
+  id,
+  onInk = false,
+  level = 2,
+  as = "h2",
+  align = "start",
+  reveal = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(SectionIntro, { align, reveal, className: cn("max-w-3xl gap-4 md:gap-4", className), children: [
+    eyebrow ? /* @__PURE__ */ jsx(Eyebrow, { onInk, children: eyebrow }) : null,
+    /* @__PURE__ */ jsx(Display, { level, as, id, className: "scroll-mt-24", children: title }),
+    lead ? /* @__PURE__ */ jsx("p", { className: cn("oca-lead", onInk && "text-oca-ink-muted"), children: lead }) : null
+  ] });
+}
+function FactBlock({
+  id,
+  title,
+  description,
+  aside,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("section", { id, className: cn("flex scroll-mt-24 flex-col gap-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-end md:justify-between md:gap-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex max-w-[44rem] flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "oca-display-3", children: title }),
+        description ? /* @__PURE__ */ jsx("div", { className: "oca-body text-[1.0625rem]", children: description }) : null
+      ] }),
+      aside ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap gap-x-5 gap-y-2 text-[0.9375rem]", children: aside }) : null
+    ] }),
+    children
+  ] });
+}
+function FactRows({
+  rows,
+  columns = 1,
+  label,
+  className
+}) {
+  return /* @__PURE__ */ jsx("ul", { "aria-label": label, className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: rows.map((r) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-5 px-5 py-6 md:px-8 md:py-7", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-x-6", children: [
+      /* @__PURE__ */ jsx("h3", { className: "oca-title min-w-0 text-pretty", children: r.title }),
+      r.figure ? /* @__PURE__ */ jsx("span", { className: "oca-tabular shrink-0 whitespace-nowrap text-[1.75rem] leading-none tracking-[-0.02em]", children: r.figure }) : null
+    ] }),
+    /* @__PURE__ */ jsx("dl", { className: columns === 2 ? "grid grid-cols-1 gap-x-10 gap-y-4 md:grid-cols-2" : "flex flex-col gap-4", children: r.fields.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-[0.875rem] font-medium text-muted-foreground", children: f.label }),
+      /* @__PURE__ */ jsx("dd", { className: "break-words text-[1rem] leading-relaxed", children: f.value })
+    ] }, i)) })
+  ] }, r.key)) });
+}
+function EndpointList({ items, label, className }) {
+  return /* @__PURE__ */ jsx("ul", { "aria-label": label, className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((a) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: a.href,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "flex flex-col gap-1 px-5 py-3.5 transition-colors hover:bg-accent/60 sm:flex-row sm:items-baseline sm:justify-between sm:gap-6",
+      children: [
+        /* @__PURE__ */ jsx("code", { className: "break-all text-[0.875rem] text-foreground", children: a.label ?? a.href }),
+        /* @__PURE__ */ jsxs("span", { className: "text-[0.875rem] text-muted-foreground sm:text-right", children: [
+          a.description,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" })
+        ] })
+      ]
+    }
+  ) }, a.href)) });
+}
+function ProofStrip({ items, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("border-y border-border", className), children: /* @__PURE__ */ jsx("ul", { className: "oca-container grid grid-cols-2 gap-x-6 gap-y-4 py-6 md:grid-cols-4", children: items.map((it, i) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-center gap-3 text-[0.9375rem] [&_svg]:size-[1.1rem] [&_svg]:shrink-0 [&_svg]:text-oca-accent-ink",
+      children: [
+        it.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex", children: it.icon }) : null,
+        it.label
+      ]
+    },
+    i
+  )) }) });
+}
+function Closing({
+  title,
+  lead,
+  actions,
+  art,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Section, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-12", children: [
+    /* @__PURE__ */ jsxs(Reveal, { className: "flex flex-col items-start gap-8 md:col-span-7", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+        /* @__PURE__ */ jsx("h2", { className: "oca-display-1 text-[clamp(2.5rem,1.5rem+4vw,5rem)] leading-[1]", children: title }),
+        lead ? /* @__PURE__ */ jsx("p", { className: "oca-lead max-w-[34rem]", children: lead }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: actions }) : null
+    ] }),
+    art !== null ? (
+      // Room under the check on a phone, so its glow fades before the band ends.
+      /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex justify-center max-md:pb-16 md:col-span-5", children: art ?? /* @__PURE__ */ jsx(IsoCheck, { size: 340, settle: true, tilt: true, className: "max-w-full" }) })
+    ) : null
+  ] }) });
+}
+function Faq({
+  items,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Accordion, { single: true, className, children: items.map((it, i) => /* @__PURE__ */ jsx(AccordionItem, { id: it.id, title: it.q, children: it.a }, it.id ?? i)) });
+}
+var LINK = "text-foreground underline decoration-foreground/35 underline-offset-4 transition-colors hover:decoration-foreground";
+function TextLink({
+  href,
+  children,
+  external,
+  className
+}) {
+  const internal = href.startsWith("/") && !href.startsWith("/api/") && !href.startsWith("/.well-known/");
+  const offsite = external ?? /^https?:\/\//.test(href);
+  if (internal && !offsite) {
+    return /* @__PURE__ */ jsx(Link, { href, className: cn(LINK, className), children });
+  }
+  return /* @__PURE__ */ jsxs("a", { href, className: cn(LINK, className), ...offsite ? { target: "_blank", rel: "noreferrer" } : {}, children: [
+    children,
+    offsite ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
+  ] });
+}
+var PROPER = {
+  kyc: "KYC",
+  pii: "PII",
+  ccpa: "CCPA",
+  cpra: "CPRA",
+  gdpr: "GDPR",
+  uk: "UK",
+  eu: "EU",
+  california: "California",
+  europe: "Europe",
+  united: "United",
+  kingdom: "Kingdom"
+};
+function headingCase(text) {
+  const words = text.replace(/\b[a-z]+\b/g, (w) => PROPER[w] ?? w);
+  if (/^orangecheck\b/.test(words)) return `OrangeCheck${words.slice("orangecheck".length)}`;
+  return words.length === 0 ? words : words[0].toUpperCase() + words.slice(1);
+}
+function sentencesCase(text) {
+  return text.split(/(?<=[.!?])\s+/).map((s) => headingCase(s)).join(" ");
+}
+function openSentence(text) {
+  const first = /^\S+/.exec(text)?.[0] ?? "";
+  if (!/^[a-z][a-z'’-]*,?$/.test(first)) return text;
+  return text[0].toUpperCase() + text.slice(1);
+}
+var INLINE = /(\*\*[^*]+\*\*|`[^`]+`|\[[^\]]+\]\([^)]+\))/g;
+var LINK2 = /^\[([^\]]+)\]\(([^)]+)\)$/;
+function Inline({ text }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: text.split(INLINE).map((part, i) => {
+    if (!part) return null;
+    if (part.startsWith("**") && part.endsWith("**") && part.length > 4) {
+      return /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(Inline, { text: part.slice(2, -2) }) }, i);
+    }
+    if (part.startsWith("`") && part.endsWith("`") && part.length > 2) return /* @__PURE__ */ jsx("code", { children: part.slice(1, -1) }, i);
+    const link = LINK2.exec(part);
+    if (link) {
+      return /* @__PURE__ */ jsx(TextLink, { href: link[2] ?? "", children: link[1] }, i);
+    }
+    return /* @__PURE__ */ jsx(Fragment$1, { children: part }, i);
+  }) });
+}
+function BlockView({ block }) {
+  switch (block.kind) {
+    case "para":
+      return /* @__PURE__ */ jsx(Fragment, { children: block.text.split(/\n{2,}/).map((para, i) => /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Inline, { text: para }) }, i)) });
+    case "subhead":
+      return /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsx(Inline, { text: headingCase(block.text) }) });
+    case "bullets":
+      return /* @__PURE__ */ jsx("ul", { children: block.items.map(
+        (item, i) => typeof item === "string" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Inline, { text: item }) }, i) : /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsxs("strong", { children: [
+            headingCase(item.k),
+            "."
+          ] }),
+          " ",
+          /* @__PURE__ */ jsx(Inline, { text: openSentence(item.v) })
+        ] }, i)
+      ) });
+    case "callout":
+      return /* @__PURE__ */ jsx("div", { className: "not-prose my-6", children: /* @__PURE__ */ jsx(Notice, { tone: block.emphatic ? "brand" : "neutral", children: /* @__PURE__ */ jsx(Inline, { text: block.text }) }) });
+    case "stub":
+      return /* @__PURE__ */ jsx("div", { className: "not-prose my-6", children: /* @__PURE__ */ jsx(Notice, { tone: "brand", title: "Pending counsel review", children: /* @__PURE__ */ jsx(Inline, { text: block.text }) }) });
+  }
+}
+function LegalDocument({ doc, className }) {
+  return /* @__PURE__ */ jsx(
+    DocLayout,
+    {
+      className,
+      header: /* @__PURE__ */ jsx(
+        DocHeader,
+        {
+          eyebrow: headingCase(doc.eyebrow),
+          title: doc.title,
+          lead: doc.description,
+          meta: `Effective ${doc.effective} \xB7 last updated ${doc.updated}`
+        }
+      ),
+      toc: doc.sections.map((s) => ({ id: s.id, label: headingCase(s.heading) })),
+      children: /* @__PURE__ */ jsx("article", { className: "min-w-0", children: /* @__PURE__ */ jsxs(Prose, { children: [
+        doc.preamble?.map((b, i) => /* @__PURE__ */ jsx(BlockView, { block: b }, i)),
+        doc.sections.map((s) => /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsxs("h2", { id: s.id, className: "scroll-mt-24", children: [
+            s.num ? /* @__PURE__ */ jsxs("span", { className: "oca-tabular text-muted-foreground", children: [
+              s.num,
+              " "
+            ] }) : null,
+            headingCase(s.heading)
+          ] }),
+          s.hint ? /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem]", children: headingCase(s.hint) }) : null,
+          s.blocks.map((b, i) => /* @__PURE__ */ jsx(BlockView, { block: b }, i))
+        ] }, s.id)),
+        doc.summary ? /* @__PURE__ */ jsxs("p", { className: "mt-14 border-t border-border pt-6 text-[0.9375rem]", children: [
+          /* @__PURE__ */ jsx("strong", { children: "In short." }),
+          " ",
+          sentencesCase(doc.summary.replace(/^summary:\s*/i, ""))
+        ] }) : null
+      ] }) })
+    }
+  );
+}
+
+// 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",
+    protocols: ["attest"]
+  },
+  {
+    slug: "me-demo",
+    // "demo", not the made-up app's own name, so nobody takes it for ours.
+    label: "demo",
+    href: "https://me-demo.ochk.io",
+    group: "app",
+    line: "Lumen Notes, a made-up app that signs in with orangecheck.",
+    status: "live"
+  },
+  {
+    slug: "globe",
+    label: "globe",
+    href: "https://globe.ochk.io",
+    group: "public-good",
+    line: "The Bitcoin network, live, on a globe.",
+    status: "live"
+  },
+  {
+    slug: "btc",
+    label: "btc",
+    href: "https://btc.ochk.io",
+    group: "public-good",
+    line: "A free desk for reading the Bitcoin market.",
+    status: "live"
+  }
+];
+var BY_SLUG = new Map(FAMILY.map((s) => [s.slug, s]));
+function protocolSite(slug) {
+  return BY_SLUG.get(slug);
+}
+[
+  {
+    href: `${OCHK_IO}/protocols`,
+    label: "Protocols",
+    children: PROTOCOLS.map((p) => ({ href: p.pageHref, label: p.label, description: p.line }))
+  },
+  { href: `${OCHK_IO}/apps`, label: "Apps" },
+  { href: DOCS_HREF, label: "Docs" },
+  { href: `${OCHK_IO}/trust`, label: "Trust" },
+  { href: `${OCHK_IO}/about`, label: "About" }
+];
+var WORD = {
+  live: "Live",
+  testing: "In testing",
+  "not-yet": "Not yet",
+  paused: "Paused",
+  good: "Good",
+  caution: "Caution",
+  refused: "Refused"
+};
+var TONE2 = {
+  live: "success",
+  testing: "brand",
+  "not-yet": "muted",
+  paused: "muted",
+  good: "success",
+  caution: "brand",
+  refused: "danger"
+};
+function StatusBadge({ status, className, ...props }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: TONE2[status], "data-status": status, className: cn(className), ...props, children: WORD[status] });
+}
+var CARD = "group relative flex h-full flex-col rounded-[1.25rem] border border-border bg-card p-6 transition-colors hover:border-oca-hairline-strong md:p-7 has-[a:focus-visible]:ring-2 has-[a:focus-visible]:ring-ring has-[a:focus-visible]:ring-offset-2 has-[a:focus-visible]:ring-offset-background";
+var STRETCH = 'outline-none after:absolute after:inset-0 after:rounded-[1.25rem] after:content-[""]';
+var pad2 = (n) => String(n + 1).padStart(2, "0");
+function ProtocolGrid({
+  protocols = PROTOCOL_ORDER,
+  link = "page",
+  className
+}) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 md:gap-5", className), children: protocols.map((slug) => {
+    const p = protocolSite(slug);
+    const i = PROTOCOL_ORDER.indexOf(slug);
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: cn(CARD, "gap-4"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("span", { className: "oca-numeral", children: [
+          pad2(i),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "ml-1.5 capitalize", children: p.verb })
+        ] }),
+        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("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(
+          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"
+          }
+        )
+      ] })
+    ] }) }, slug);
+  }) });
+}
+function AppCard({ name, line, href, protocols = [], status = "live", className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(CARD, "gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "oca-title", children: /* @__PURE__ */ jsx("a", { href, className: STRETCH, children: name }) }),
+      status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "oca-body text-[0.9375rem]", children: line }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-end justify-between gap-3 pt-3", children: [
+      protocols.length > 0 ? /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-1.5 text-[0.8125rem] text-muted-foreground", children: [
+        "Shows",
+        protocols.map((p) => /* @__PURE__ */ jsx(Badge, { tone: "muted", children: p }, p))
+      ] }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1 text-[0.875rem] text-muted-foreground transition-colors group-hover:text-foreground", children: [
+        href.replace(/^https?:\/\//, ""),
+        /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true, className: "size-4" })
+      ] })
+    ] })
+  ] });
+}
+function AppGrid({
+  group = "app",
+  sites,
+  className
+}) {
+  const list = sites ? sites.map((slug) => FAMILY.find((s) => s.slug === slug)).filter((s) => s !== void 0) : FAMILY.filter((s) => s.group === group);
+  return /* @__PURE__ */ jsx("ul", { className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-5", className), children: list.map((s) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AppCard, { name: s.label, line: s.line, href: s.href, protocols: s.protocols, status: s.status }) }, s.slug)) });
+}
+var fieldBase = [
+  "w-full rounded-xl border border-input bg-card text-foreground placeholder:text-oca-subtle",
+  "text-base md:text-[0.9375rem] outline-none transition-[border-color,box-shadow]",
+  "focus:border-foreground/35 focus:ring-4 focus:ring-[color-mix(in_oklab,var(--oca-orange)_16%,transparent)]",
+  "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 Textarea = forwardRef(
+  function Textarea2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        "data-ui": "textarea",
+        className: cn(fieldBase, "min-h-28 px-3.5 py-3 leading-relaxed", className),
+        ...props
+      }
+    );
+  }
+);
+var Label = forwardRef(function Label2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      ref,
+      className: cn("text-sm font-medium leading-none text-foreground", className),
+      ...props
+    }
+  );
+});
+function Field({ label, hint, optional, error, children, className, hideLabel, action }) {
+  const id = useId();
+  const hintId = hint ? `${id}-hint` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || void 0;
+  const control = isValidElement(children) ? cloneElement(children, {
+    id,
+    "aria-describedby": describedBy,
+    "aria-invalid": error ? true : void 0
+  }) : children;
+  const hintNode = hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs(Label, { htmlFor: id, className: hideLabel ? "sr-only" : "flex items-baseline gap-2", children: [
+      label,
+      optional ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] font-normal text-muted-foreground", children: "Optional" }) : null
+    ] }),
+    action ? (
+      // The hint belongs to the input, so it sits under the input, not under the button.
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2 [&>input]:w-full", children: [
+          control,
+          hintNode
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+      ] })
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      control,
+      hintNode
+    ] }),
+    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) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(fieldBase, "flex h-11 items-center justify-between gap-2 px-3.5 text-left", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" }) })
+      ]
+    }
+  );
+});
+forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    SelectPrimitive.Content,
+    {
+      ref,
+      position,
+      sideOffset: 6,
+      className: cn(
+        "oca-animate-fade z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-lg",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children })
+    }
+  ) });
+});
+forwardRef(function SelectItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex h-10 cursor-default select-none items-center rounded-lg pl-3 pr-9 text-[0.9375rem] outline-none",
+        "data-[highlighted]:bg-accent data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "absolute right-3", children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) })
+      ]
+    }
+  );
+});
+forwardRef(function Checkbox2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "peer inline-flex size-5 shrink-0 items-center justify-center rounded-[6px] border border-input bg-card",
+        "outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-3.5", strokeWidth: 3 }) })
+    }
+  );
+});
+forwardRef(function Switch2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent bg-input p-0.5",
+        "outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        // The deep orange: the track is the state, so it must clear 3:1 on a card.
+        "data-[state=checked]:bg-oca-orange-deep disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "pointer-events-none block size-5 rounded-full bg-white shadow-sm transition-transform data-[state=checked]:translate-x-5" })
+    }
+  );
+});
+forwardRef(function RadioGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-3", className), ...props });
+});
+forwardRef(function RadioGroupItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-input bg-card",
+        "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "data-[state=checked]:border-primary disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "block size-2.5 rounded-full bg-primary" })
+    }
+  );
+});
+function ProtocolHero({
+  protocol: protocol2,
+  title,
+  lead,
+  actions,
+  art,
+  children,
+  className
+}) {
+  const p = protocolSite(protocol2);
+  return /* @__PURE__ */ jsx(
+    PageHero,
+    {
+      className,
+      eyebrow: `Protocol \xB7 ${p.verb}`,
+      title,
+      lead,
+      actions,
+      art,
+      children: p.status !== "live" || children ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4", children: [
+        p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status }) : null,
+        children
+      ] }) : null
+    }
+  );
+}
+function ProtocolNav({
+  current,
+  link = "page",
+  className
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Protocols", className, children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--background)", children: /* @__PURE__ */ jsx("ul", { className: "flex w-max min-w-full items-center gap-6 border-b border-border", children: PROTOCOLS.map((p) => {
+    const on = p.slug === current;
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: link === "tool" ? p.toolHref : p.pageHref,
+        "aria-current": on ? "page" : void 0,
+        className: cn(
+          "-mb-px inline-flex h-11 items-center border-b-2 text-[0.9375rem] transition-colors",
+          on ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+        ),
+        children: p.label
+      }
+    ) }, p.slug);
+  }) }) }) });
+}
+function SpecCard({
+  protocol: protocol2,
+  version,
+  license,
+  vectors,
+  size = "md",
+  className
+}) {
+  const p = protocolSite(protocol2);
+  const repo = `oc-${p.slug}-protocol`;
+  const facts = [
+    ["Version", version],
+    ...license ? [["Licence", license]] : [],
+    ["Nostr kind", p.kinds],
+    ...vectors !== void 0 ? [["Test vectors", String(vectors)]] : []
+  ];
+  if (size === "sm") {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: p.specHref,
+        className: cn(
+          "group flex flex-wrap items-center gap-x-4 gap-y-1 rounded-2xl border border-border bg-card px-4 py-3 text-[0.875rem] transition-colors hover:border-oca-hairline-strong",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[0.8125rem] text-foreground", children: repo }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: facts.map(([k, v]) => k === "Version" ? `v${v}` : k === "Nostr kind" ? `kind ${v}` : v).join(" \xB7 ") }),
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1 text-muted-foreground group-hover:text-foreground", children: [
+            "Read the spec ",
+            /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true, className: "size-4" })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 rounded-[1.25rem] border border-border bg-card p-6 md:p-8", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: "The spec" }),
+        /* @__PURE__ */ jsx("h3", { className: "oca-title break-all font-mono text-[1.0625rem] tracking-normal", children: repo })
+      ] }),
+      p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status }) : null
+    ] }),
+    /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4", children: facts.map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-[0.8125rem] text-muted-foreground", children: k }),
+      /* @__PURE__ */ jsx("dd", { className: "oca-tabular text-[1.0625rem]", children: v })
+    ] }, k)) }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: /* @__PURE__ */ jsxs("a", { href: p.specHref, children: [
+      "Read the spec ",
+      /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true })
+    ] }) }) })
+  ] });
+}
+function VerifyBox({
+  action,
+  param = "q",
+  title,
+  description,
+  label = "Id, envelope or link",
+  placeholder,
+  hint,
+  submitLabel = "Verify",
+  multiline = false,
+  onVerify,
+  className
+}) {
+  const [value, setValue] = useState("");
+  const submit = (e) => {
+    if (!onVerify) return;
+    e.preventDefault();
+    if (value.trim()) onVerify(value.trim());
+  };
+  const button = /* @__PURE__ */ jsx(Button, { type: "submit", className: multiline ? void 0 : "w-full sm:w-auto", children: submitLabel });
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      action,
+      method: "get",
+      onSubmit: submit,
+      className: cn("flex flex-col gap-5 rounded-[1.25rem] border border-border bg-card p-6 md:p-8", className),
+      children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: "oca-title", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "oca-body text-[0.9375rem]", children: description }) : null
+        ] }) : null,
+        multiline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Field, { label, hint, children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              name: param,
+              required: true,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              placeholder,
+              spellCheck: false,
+              className: "min-h-32 font-mono text-base md:text-[0.8125rem]"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { children: button })
+        ] }) : /* @__PURE__ */ jsx(Field, { label, hint, action: button, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            name: param,
+            required: true,
+            value,
+            onChange: (e) => setValue(e.target.value),
+            placeholder,
+            spellCheck: false,
+            autoComplete: "off",
+            className: "font-mono text-base md:text-[0.875rem]"
+          }
+        ) })
+      ]
+    }
+  );
+}
+var TINT = "bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))]";
+function ComparisonTable({
+  columns,
+  rows,
+  label,
+  propertyHeading = "Property",
+  className
+}) {
+  const wide = columns.length > 3;
+  const grid = wide ? "lg:grid lg:grid-cols-[var(--oca-compare)]" : "md:grid md:grid-cols-[var(--oca-compare)]";
+  const desk = wide ? "lg" : "md";
+  const style = {
+    // The argued-for column gets a little more room: its answers carry the page.
+    "--oca-compare": ["minmax(0, 1.4fr)", ...columns.map((c) => c.highlight ? "minmax(0, 1.3fr)" : "minmax(0, 1fr)")].join(" ")
+  };
+  const ordered = [...columns].sort((a, b) => Number(Boolean(b.highlight)) - Number(Boolean(a.highlight)));
+  return /* @__PURE__ */ jsxs("ul", { "aria-label": label, style, className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "hidden gap-5 px-5 py-4 text-[0.875rem] font-medium text-muted-foreground",
+          wide ? "lg:grid lg:px-8" : "md:grid md:px-8",
+          grid
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: propertyHeading }),
+          columns.map((c) => /* @__PURE__ */ jsx("span", { className: cn(c.highlight && cn(TINT, "-my-4 px-4 py-4 text-oca-accent-ink")), children: c.label }, c.key))
+        ]
+      }
+    ),
+    rows.map((r, ri) => /* @__PURE__ */ jsxs("li", { className: cn("grid grid-cols-1 gap-3 px-5 py-5", wide ? "lg:items-start lg:gap-5 lg:px-8" : "md:items-start md:gap-5 md:px-8", grid), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "oca-title-sm", children: r.label }),
+        r.note ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: r.note }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-1", desk === "lg" ? "lg:contents" : "md:contents"), children: columns.map((c) => {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { "--oca-order": ordered.indexOf(c) },
+            className: cn(
+              // Two rows of the pair's grid (name, answer), so answers line up
+              // across a pair even when one name wraps.
+              "order-[var(--oca-order)] row-span-2 grid min-w-0 grid-rows-subgrid gap-1 rounded-xl px-3 py-2.5",
+              desk === "lg" ? "lg:order-none lg:row-span-1 lg:flex lg:flex-col" : "md:order-none md:row-span-1 md:flex md:flex-col",
+              c.highlight ? cn(
+                TINT,
+                "col-span-2",
+                desk === "lg" ? "lg:col-span-1 lg:-my-5 lg:self-stretch lg:rounded-none lg:px-4 lg:py-5" : "md:col-span-1 md:-my-5 md:self-stretch md:rounded-none md:px-4 md:py-5"
+              ) : desk === "lg" ? "lg:p-0" : "md:p-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-[0.8125rem]",
+                    c.highlight ? "text-oca-accent-ink" : "text-muted-foreground",
+                    desk === "lg" ? "lg:sr-only" : "md:sr-only"
+                  ),
+                  children: c.label
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", c.highlight && "font-medium"), children: r.values[c.key] ?? "\u2014" })
+            ]
+          },
+          c.key
+        );
+      }) })
+    ] }, ri))
+  ] });
+}
+var CHECK = {
+  ok: { word: "Passed", icon: /* @__PURE__ */ jsx(CircleCheck, {}), tone: "text-success" },
+  fail: { word: "Failed", icon: /* @__PURE__ */ jsx(CircleX, {}), tone: "text-destructive" },
+  pending: { word: "Pending", icon: /* @__PURE__ */ jsx(Clock, {}), tone: "text-oca-accent-ink" },
+  skipped: { word: "Skipped", icon: /* @__PURE__ */ jsx(CircleMinus, {}), tone: "text-muted-foreground" },
+  unchecked: { word: "Not checked", icon: /* @__PURE__ */ jsx(CircleDashed, {}), tone: "text-oca-subtle" }
+};
+function VerifyReport({
+  verdict,
+  title,
+  summary,
+  checks,
+  facts,
+  notChecked,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": "Verification result",
+      className: cn("overflow-hidden rounded-[1.25rem] border border-border bg-card", className),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-col items-start gap-3 p-6 md:p-8", children: [
+          /* @__PURE__ */ jsx(StatusBadge, { status: verdict }),
+          /* @__PURE__ */ jsx("h3", { 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) => {
+          const k = CHECK[c.state];
+          return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3 px-6 py-3.5 md:px-8", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("mt-0.5 shrink-0 [&_svg]:size-[1.125rem]", k.tone), children: k.icon }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-baseline sm:justify-between sm:gap-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem]", children: c.label }),
+                c.note ? /* @__PURE__ */ jsx("span", { className: "break-words text-[0.8125rem] leading-snug text-muted-foreground", children: c.note }) : null
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "shrink-0 text-[0.8125rem]",
+                    c.state === "fail" ? "text-destructive" : "text-muted-foreground"
+                  ),
+                  children: k.word
+                }
+              )
+            ] })
+          ] }, i);
+        }) }),
+        facts && facts.length > 0 ? /* @__PURE__ */ jsx(KeyValueList, { items: facts, className: "rounded-none border-x-0 border-b-0 bg-transparent [&>div]:px-6 md:[&>div]:px-8" }) : null,
+        notChecked && notChecked.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-border bg-muted/50 px-6 py-5 md:px-8", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] font-medium", children: "What this did not check" }),
+          /* @__PURE__ */ jsx("ul", { className: "flex list-disc flex-col gap-1 pl-5 text-[0.875rem] leading-relaxed text-muted-foreground", children: notChecked.map((n, i) => /* @__PURE__ */ jsx("li", { children: n }, i)) })
+        ] }) : null,
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 border-t border-border px-6 py-5 md:px-8", children: actions }) : null
+      ]
+    }
+  );
+}
+function SignMessage({
+  lead,
+  address,
+  message,
+  wallets,
+  busy = false,
+  error,
+  submitLabel = "Confirm",
+  secondary,
+  onSignature,
+  className
+}) {
+  const [pasted, setPasted] = useState("");
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
+    lead ? /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] leading-relaxed", children: lead }) : null,
+    wallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: wallets }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[0.8125rem] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+        "or sign it in any wallet",
+        /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(CodeBlock, { code: message, caption: "Message to sign" }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "flex flex-col gap-4",
+        onSubmit: (e) => {
+          e.preventDefault();
+          if (pasted.trim()) onSignature(pasted.trim());
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Field,
+            {
+              label: "Signature",
+              error,
+              hint: /* @__PURE__ */ jsxs(Fragment, { children: [
+                "From your wallet\u2019s \u201Csign message\u201D (BIP-322), signed by",
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "break-all font-mono", children: address }),
+                "."
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  value: pasted,
+                  onChange: (e) => setPasted(e.target.value),
+                  rows: 3,
+                  spellCheck: false,
+                  className: "min-h-24 font-mono text-base md:text-[0.8125rem]"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { type: "submit", loading: busy, disabled: !pasted.trim(), children: submitLabel }),
+            secondary
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 
-export { Accent, ActivityList, BrowserFrame, CodeBlock, Container, CopyButton, DataTable, Display, DocHeader, DocLayout, EmptyLine, EmptyState, ErrorBoundary, Eyebrow, FloatChip, Footnote, HashChip, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PageHeader, PageHero, PhoneFrame, ProgressSteps, Prose, Reveal, Sats, SatsFigure, ScrollStory, Section, SectionIntro, SplitBar, StatCard, StatGrid, StepGrid, Ticker, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };
+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 };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map