@orangecheck/app-design 0.2.1 → 0.3.0

package/dist/components.mjs

@@ -1,9 +1,12 @@
-import { forwardRef, createElement, useState, useRef, useEffect, useCallback } from 'react';
+import { forwardRef, createContext, createElement, useContext, Children, isValidElement, cloneElement, useState, useRef, useEffect, useCallback } 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 { Slot } from '@radix-ui/react-slot';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import 'sonner';
 
 var merge = extendTailwindMerge({
   extend: {
@@ -47,7 +50,7 @@ function Prose({ className, ...props }) {
     {
       className: cn(
         "max-w-[42rem] text-[1.0625rem] leading-[1.7] text-muted-foreground",
-        "[&_h2]:oca-display-3 [&_h2]:mb-4 [&_h2]:mt-14 [&_h2]:text-foreground",
+        "[&_h2]:oca-display-3 [&_h2]:mb-4 [&_h2]:mt-14 [&_h2]:scroll-mt-24 [&_h2]:text-foreground",
         "[&_h3]:oca-title [&_h3]:mb-3 [&_h3]:mt-10 [&_h3]:text-foreground",
         "[&_p]:my-4 [&_strong]:font-medium [&_strong]:text-foreground",
         "[&_a]:text-foreground [&_a]:underline [&_a]:decoration-border [&_a]:underline-offset-4 hover:[&_a]:decoration-foreground",
@@ -63,7 +66,9 @@ var sectionVariants = cva("relative w-full overflow-x-clip", {
     tone: {
       canvas: "bg-background text-foreground",
       card: "bg-card text-card-foreground",
-      ink: "bg-oca-ink text-oca-ink-foreground",
+      // The band line is transparent in light; in dark it keeps the ink
+      // band from melting into the canvas.
+      ink: "border-y border-[var(--oca-band-line)] bg-oca-ink text-oca-ink-foreground",
       brand: "bg-brand text-brand-foreground"
     },
     space: {
@@ -98,6 +103,121 @@ function SectionIntro({
     }
   );
 }
+function PageHero({
+  eyebrow,
+  title,
+  lead,
+  actions,
+  art,
+  meta,
+  children,
+  variant = "page",
+  size = "lg",
+  className
+}) {
+  if (variant === "document") {
+    return /* @__PURE__ */ jsx(Section, { space: "none", className: cn("pb-12 pt-12 md:pb-16 md:pt-20", className), children: /* @__PURE__ */ jsx(DocHeader, { className: "mx-auto max-w-[42rem]", ...{ eyebrow, title, lead, meta, actions }, children }) });
+  }
+  return /* @__PURE__ */ jsx(Section, { space: "none", className: cn("pb-14 pt-12 md:pb-20 md:pt-20", className), children: /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-10", art && "items-center md:grid-cols-12"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start gap-6", art ? "md:col-span-7" : "max-w-[52rem]"), children: [
+      eyebrow ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx("h1", { className: size === "xl" ? "oca-display-1" : "oca-display-2", children: title }),
+      lead ? /* @__PURE__ */ jsx("p", { className: "oca-lead max-w-[38rem]", children: lead }) : null,
+      meta ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: meta }) : null,
+      actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: actions }) : null,
+      children
+    ] }),
+    art ? /* @__PURE__ */ jsx("div", { className: "md:col-span-5", children: art }) : null
+  ] }) });
+}
+function DocHeader({
+  eyebrow,
+  title,
+  lead,
+  meta,
+  actions,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
+    eyebrow ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
+    /* @__PURE__ */ jsx("h1", { className: "oca-display-2", children: title }),
+    lead ? /* @__PURE__ */ jsx("p", { className: "oca-lead", children: lead }) : null,
+    meta ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: meta }) : null,
+    actions ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-3", children: actions }) : null,
+    children
+  ] });
+}
+function useActiveHeading(ids) {
+  const [active, setActive] = useState(ids[0]);
+  const key = ids.join("|");
+  useEffect(() => {
+    const els = key.split("|").map((id) => document.getElementById(id)).filter((el) => el !== null);
+    if (els.length === 0) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        const hit = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
+        if (hit) setActive(hit.target.id);
+      },
+      { rootMargin: "-80px 0px -65% 0px" }
+    );
+    els.forEach((el) => io.observe(el));
+    return () => io.disconnect();
+  }, [key]);
+  return active;
+}
+function DocLayout({
+  toc,
+  header,
+  children,
+  className
+}) {
+  const active = useActiveHeading(toc?.map((t) => t.id) ?? []);
+  const links = () => toc?.map((t) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: `#${t.id}`,
+      "aria-current": active === t.id ? "location" : void 0,
+      className: cn(
+        "block border-l py-1.5 pl-4 text-[0.875rem] leading-snug transition-colors",
+        active === t.id ? "border-foreground text-foreground" : "border-border text-muted-foreground hover:text-foreground"
+      ),
+      children: t.label
+    }
+  ) }, t.id));
+  const hasToc = !!toc && toc.length > 0;
+  return /* @__PURE__ */ jsx("div", { className: cn("oca-container pb-24", header ? "pt-12 md:pt-20" : null, className), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mx-auto grid grid-cols-1 gap-8",
+        hasToc ? "max-w-[42rem] lg:max-w-[64rem] lg:grid-cols-[13rem_minmax(0,42rem)] lg:gap-x-16 lg:gap-y-10" : "max-w-[42rem]"
+      ),
+      children: [
+        header ? /* @__PURE__ */ jsx("div", { className: cn(hasToc && "lg:col-start-2", "pb-4"), children: header }) : null,
+        hasToc ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              "aria-label": "On this page",
+              className: cn("sticky top-24 hidden self-start lg:block", header && "lg:row-start-2"),
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "mb-3 text-[0.875rem] font-medium", children: "On this page" }),
+                /* @__PURE__ */ jsx("ul", { children: links() })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("details", { className: "group rounded-2xl border border-border bg-card px-4 py-3 lg:hidden", children: [
+            /* @__PURE__ */ jsx("summary", { className: "cursor-pointer list-none text-[0.9375rem] font-medium marker:hidden", children: "On this page" }),
+            /* @__PURE__ */ jsx("ul", { className: "mt-3", children: links() })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: cn("min-w-0", hasToc && "lg:col-start-2", hasToc && header && "lg:row-start-2"), children })
+      ]
+    }
+  ) });
+}
+var GOOD_DOT = "border-border bg-card text-foreground before:size-1.5 before:shrink-0 before:rounded-full before:bg-success before:content-['']";
 var badgeVariants = cva(
   "inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 text-[0.8125rem] font-medium leading-none",
   {
@@ -106,10 +226,13 @@ var badgeVariants = cva(
         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",
-        success: "border-transparent bg-[color-mix(in_oklab,var(--success)_12%,var(--card))] text-success",
-        warning: "border-transparent bg-[color-mix(in_oklab,var(--warning)_14%,var(--card))] text-warning",
         danger: "border-transparent bg-[color-mix(in_oklab,var(--destructive)_12%,var(--card))] text-destructive",
-        info: "border-transparent bg-[color-mix(in_oklab,var(--info)_12%,var(--card))] text-info",
+        // 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",
+        info: "border-border bg-card text-foreground",
         ink: "border-transparent bg-oca-ink text-oca-ink-foreground",
         onInk: "border-white/15 bg-white/5 text-white/90"
       }
@@ -177,208 +300,160 @@ function StepGrid({ items, look = "cards", className }) {
     ] }) }, i)
   ) });
 }
-var KIND = {
-  package: "text-oca-code-package",
-  tag: "text-oca-code-tag",
-  link: "text-oca-code-link"
-};
-function PackageCard({ items, className }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "grid gap-x-10 gap-y-7 rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card p-6 text-oca-ink-foreground md:grid-cols-2 md:p-9",
-        className
-      ),
-      children: items.map((it, i) => {
-        const code = /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", KIND[it.kind ?? "package"]), children: it.code });
-        return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-[1.125rem] font-semibold tracking-[-0.01em] text-oca-ink-title", children: it.title }),
-          it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "w-fit underline decoration-transparent underline-offset-4 hover:decoration-current", children: code }) : code,
-          it.note ? /* @__PURE__ */ jsxs("p", { className: "text-[0.9375rem] leading-relaxed text-oca-ink-subtle", children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "// " }),
-            it.note
-          ] }) : null
-        ] }, i);
-      })
-    }
-  );
-}
-function CodeBlock({
-  code,
-  caption,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("figure", { className: cn("overflow-hidden rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card", className), children: [
-    caption ? /* @__PURE__ */ jsx("figcaption", { className: "border-b border-oca-ink-line px-5 py-3 text-[0.8125rem] text-oca-ink-subtle", children: caption }) : null,
-    /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-5 font-mono text-[0.875rem] leading-relaxed text-oca-ink-muted", children: /* @__PURE__ */ jsx("code", { children: code }) })
-  ] });
-}
-function SplitBar({
-  segments,
-  caption,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("figure", { className: cn("flex flex-col gap-5", className), children: [
-    caption ? /* @__PURE__ */ jsx("figcaption", { className: "text-[0.9375rem]", children: caption }) : null,
-    /* @__PURE__ */ jsx("div", { className: "flex h-16 w-full gap-1.5 overflow-hidden rounded-[1.25rem] md:h-20", children: segments.map((s, i) => /* @__PURE__ */ jsx(
-      "div",
+function ScrollFade({ fade = "var(--card)", className, innerClassName, children, ...props }) {
+  const ref = useRef(null);
+  const [edges, setEdges] = useState({ left: false, right: false });
+  const measure = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const left = el.scrollLeft > 1;
+    const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+    setEdges((e) => e.left === left && e.right === right ? e : { left, right });
+  }, []);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    if (el.firstElementChild) ro.observe(el.firstElementChild);
+    return () => ro.disconnect();
+  }, [measure]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { ref, onScroll: measure, className: cn("overflow-x-auto overscroll-x-contain", innerClassName), children }),
+    /* @__PURE__ */ jsx(
+      "span",
       {
+        "aria-hidden": true,
         className: cn(
-          "flex min-w-[4.25rem] items-end rounded-[1rem] px-3 pb-2.5 md:px-4 md:pb-3",
-          s.tone === "card" ? "bg-white text-oca-ink" : "bg-oca-ink text-white"
+          "pointer-events-none absolute inset-y-0 left-0 w-8 transition-opacity duration-150",
+          edges.left ? "opacity-100" : "opacity-0"
         ),
-        style: { flexBasis: `${s.pct}%` },
-        children: /* @__PURE__ */ jsxs("span", { className: "oca-tabular text-[1.25rem] leading-none tracking-[-0.02em] md:text-[1.875rem]", children: [
-          s.pct,
-          "%"
-        ] })
-      },
-      i
-    )) }),
-    /* @__PURE__ */ jsx("dl", { className: "grid gap-x-8 gap-y-2 sm:grid-cols-2", children: segments.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2.5", children: [
-      /* @__PURE__ */ jsxs("dt", { className: "sr-only", children: [
-        s.pct,
-        "%"
-      ] }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn(
-            "inline-block size-2.5 shrink-0 translate-y-[-1px] rounded-full",
-            s.tone === "card" ? "bg-white" : "bg-oca-ink"
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx("dd", { className: "text-[0.9375rem] leading-snug", children: s.label })
-    ] }, i)) })
-  ] });
-}
-var LABEL = {
-  yes: "Yes",
-  testing: "In testing",
-  "not-yet": "Not yet",
-  no: "No"
-};
-var TONE = {
-  yes: "text-oca-accent-ink",
-  testing: "text-foreground",
-  "not-yet": "text-muted-foreground",
-  no: "text-muted-foreground"
-};
-function TruthTable({
-  rows,
-  statusHeading = "Status",
-  whatHeading = "What",
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-xl border border-oca-hairline-strong", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem] md:text-[1rem]", children: [
-    /* @__PURE__ */ jsx("thead", { className: "bg-oca-table-head", children: /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("th", { scope: "col", className: "w-[30%] border-b border-oca-hairline-strong px-4 py-3 font-semibold md:w-[22%]", children: statusHeading }),
-      /* @__PURE__ */ jsx("th", { scope: "col", className: "border-b border-l border-oca-hairline-strong px-4 py-3 font-semibold", children: whatHeading })
-    ] }) }),
-    /* @__PURE__ */ jsx("tbody", { className: "bg-card", children: rows.map((r, i) => /* @__PURE__ */ jsxs("tr", { className: "align-top", children: [
-      /* @__PURE__ */ jsx(
-        "td",
-        {
-          className: cn(
-            "border-t border-oca-hairline-strong px-4 py-3 font-medium",
-            i === 0 && "border-t-0",
-            TONE[r.status]
-          ),
-          children: LABEL[r.status]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "td",
-        {
-          className: cn(
-            "border-l border-t border-oca-hairline-strong px-4 py-3 leading-relaxed",
-            i === 0 && "border-t-0"
-          ),
-          children: r.what
-        }
-      )
-    ] }, i)) })
-  ] }) });
-}
-var INT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
-var COMPACT = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
-function satsText(value, opts = {}) {
-  if (value == null || !Number.isFinite(value)) return null;
-  const whole = Math.trunc(value);
-  const body = (opts.compact ? COMPACT : INT).format(Math.abs(whole));
-  const sign = whole < 0 ? "\u2212" : opts.signed && whole > 0 ? "+" : "";
-  const unit = opts.unit === "none" ? "" : whole === 1 || whole === -1 ? " sat" : " sats";
-  return `${sign}${body}${unit}`;
-}
-function Sats({ value, unit, compact, signed, unknown = "\u2014", className, ...props }) {
-  const text = satsText(value, { unit, compact, signed });
-  if (text === null) {
-    return /* @__PURE__ */ jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), ...props, children: [
-      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: unknown }),
-      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "unknown" })
-    ] });
-  }
-  return /* @__PURE__ */ jsx("span", { className: cn("oca-tabular whitespace-nowrap", className), ...props, children: text });
-}
-function UsdApprox({
-  sats,
-  usdPerBtc,
-  className
-}) {
-  if (sats == null || usdPerBtc == null || !Number.isFinite(sats) || !Number.isFinite(usdPerBtc)) return null;
-  const usd = sats / 1e8 * usdPerBtc;
-  const text = new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    maximumFractionDigits: usd < 1 ? 4 : 2
-  }).format(usd);
-  return /* @__PURE__ */ jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), children: [
-    "\u2248 ",
-    text
+        style: { background: `linear-gradient(to right, ${fade}, transparent)` }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "pointer-events-none absolute inset-y-0 right-0 w-10 transition-opacity duration-150",
+          edges.right ? "opacity-100" : "opacity-0"
+        ),
+        style: { background: `linear-gradient(to left, ${fade}, transparent)` }
+      }
+    )
   ] });
 }
-function SatsFigure({
-  label,
-  value,
-  hint,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxs("span", { className: "oca-display-3 oca-tabular", children: [
-      /* @__PURE__ */ jsx(Sats, { value, unit: "none" }),
-      /* @__PURE__ */ jsx("span", { className: "ml-2 text-[0.5em] tracking-normal text-muted-foreground", children: "sats" })
-    ] }),
-    hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
-  ] });
+var ShellContext = createContext({});
+function useShellPlace() {
+  return useContext(ShellContext);
 }
-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 }) {
+function Spinner({ className, label }) {
   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,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      role: label ? "status" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn("size-4 animate-spin", className),
       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 })
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
       ]
     }
   );
 }
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-ui": "skeleton",
+      className: cn("animate-pulse rounded-lg bg-[var(--oca-skeleton)]", className),
+      ...props
+    }
+  );
+}
+function useTimedOut(active, ms = 12e3) {
+  const [timedOut, setTimedOut] = useState(false);
+  useEffect(() => {
+    const t = setTimeout(() => setTimedOut(true), ms);
+    return () => clearTimeout(t);
+  }, [active, ms]);
+  return timedOut;
+}
+forwardRef(function Separator2({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var buttonVariants = cva(
+  [
+    "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium",
+    "transition-[background-color,border-color,color,box-shadow,transform] duration-150",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "active:translate-y-px disabled:pointer-events-none",
+    // Disabled is one look for every variant: a quiet grey pill, never a
+    // faded black or orange slab that reads as broken.
+    "disabled:border disabled:border-border disabled:bg-muted disabled:text-oca-subtle disabled:shadow-none",
+    "[&_svg]:pointer-events-none [&_svg]:size-[1.1em] [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/85",
+        secondary: "border border-border bg-secondary text-secondary-foreground hover:border-oca-hairline-strong hover:bg-accent",
+        brand: "bg-brand text-brand-foreground hover:bg-oca-orange-deep",
+        ghost: "text-foreground hover:bg-accent",
+        danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        link: "h-auto rounded-none px-0 text-foreground underline decoration-border underline-offset-4 hover:decoration-foreground",
+        onInk: "bg-white text-oca-ink hover:bg-white/90",
+        onInkOutline: "border border-white/20 text-white hover:bg-white/10"
+      },
+      size: {
+        sm: "h-9 px-4 text-sm",
+        md: "h-11 px-5 text-[0.9375rem]",
+        lg: "h-14 px-7 text-[1.0625rem]",
+        icon: "size-10",
+        "icon-sm": "size-8"
+      }
+    },
+    compoundVariants: [{ variant: "link", className: "h-auto px-0" }],
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var Button = forwardRef(function Button2({ className, variant, size, asChild = false, loading = false, disabled, children, type, ...props }, ref) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-ui": "button",
+      className: cn(buttonVariants({ variant, size }), className),
+      disabled: asChild ? void 0 : disabled || loading,
+      "aria-busy": loading || void 0,
+      type: asChild ? void 0 : type ?? "button",
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-[1.1em]" }) : null,
+        children
+      ] })
+    }
+  );
+});
 function PageHeader({
   eyebrow,
   title,
@@ -386,29 +461,117 @@ function PageHeader({
   actions,
   className
 }) {
+  const place = useShellPlace();
+  const eb = eyebrow === void 0 ? place.section : eyebrow;
   return /* @__PURE__ */ jsxs("header", { className: cn("flex flex-col gap-5 md:flex-row md:items-end md:justify-between", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex max-w-[44rem] flex-col gap-3", children: [
-      eyebrow ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-[44rem] flex-col gap-2.5", children: [
+      eb ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow", children: eb }) : null,
       /* @__PURE__ */ jsx("h1", { className: "oca-display-3", children: title }),
-      description ? /* @__PURE__ */ jsx("p", { className: "oca-body text-[1.0625rem]", children: description }) : null
+      description ? /* @__PURE__ */ jsx("p", { className: "oca-body max-w-[40rem] text-[1.0625rem]", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-3", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2.5 md:shrink-0 md:justify-end", children: actions }) : null
   ] });
 }
-function StatCard({
-  label,
-  value,
-  hint,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 rounded-[1.25rem] border border-border bg-card p-5 md:p-6", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx("span", { className: "oca-tabular text-[1.75rem] leading-tight tracking-[-0.02em]", children: value }),
-    hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : null
-  ] });
+var InStatGrid = createContext(false);
+function StatCard({ label, value, hint, className }) {
+  const inGrid = useContext(InStatGrid);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-ui": "stat",
+      className: cn(
+        "rounded-[1.25rem] border border-border bg-card p-5 md:p-6",
+        // In a grid, label, value and hint each share a row with their
+        // neighbours, so values line up whatever wraps above them.
+        inGrid ? "row-span-3 grid grid-rows-subgrid gap-1.5" : "flex flex-col gap-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "self-end break-words oca-tabular text-[1.5rem] leading-tight tracking-[-0.02em] md:text-[1.75rem]", children: value }),
+        hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : inGrid ? /* @__PURE__ */ jsx("span", { "aria-hidden": true }) : null
+      ]
+    }
+  );
+}
+var MD_COLS = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+var LG_COLS = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5"
+};
+var MD_SPAN = {
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4"
+};
+var LG_SPAN = {
+  1: "lg:col-span-1",
+  2: "lg:col-span-2",
+  3: "lg:col-span-3",
+  4: "lg:col-span-4"
+};
+function statColumns(n) {
+  if (n <= 5) return Math.max(1, n);
+  if (n % 4 === 0) return 4;
+  if (n % 3 === 0) return 3;
+  return 4;
 }
-function StatGrid({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4", className), ...props });
+function lastSpan(n, cols) {
+  const rest = n % cols;
+  return rest === 0 ? 1 : cols - rest + 1;
+}
+function EmptyLine({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "rounded-[1.25rem] border border-dashed border-oca-hairline-strong px-5 py-4 text-[0.9375rem] text-muted-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
+function StatGrid({ columns, empty, isEmpty, className, children, ...props }) {
+  const items = Children.toArray(children).filter(isValidElement);
+  const n = items.length;
+  const allZero = n > 0 && items.every((el) => "raw" in el.props && (el.props.raw === 0 || el.props.raw === null));
+  if (isEmpty ?? allZero) return /* @__PURE__ */ jsx(EmptyLine, { className, children: empty ?? "Nothing here yet." });
+  const lg = columns ?? statColumns(n);
+  const md = lg > 4 ? 3 : lg;
+  const mdSpan = lastSpan(n, md);
+  const lgSpan = lastSpan(n, lg);
+  return /* @__PURE__ */ jsx(InStatGrid.Provider, { value: true, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-3 md:gap-4",
+        n === 1 ? "grid-cols-1" : "grid-cols-2",
+        MD_COLS[md],
+        LG_COLS[lg],
+        className
+      ),
+      ...props,
+      children: items.map((el, i) => {
+        if (i !== n - 1) return el;
+        const span = cn(
+          n % 2 === 1 && n > 1 && "max-md:col-span-2",
+          (mdSpan > 1 || lgSpan > 1) && MD_SPAN[mdSpan],
+          (mdSpan > 1 || lgSpan > 1) && LG_SPAN[lgSpan]
+        );
+        return span ? cloneElement(el, { className: cn(el.props.className, span) }) : el;
+      })
+    }
+  ) });
 }
 function KeyValueList({ items, className }) {
   return /* @__PURE__ */ jsx("dl", { className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((it, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-5 py-3.5 sm:flex-row sm:items-baseline sm:gap-6", children: [
@@ -422,75 +585,103 @@ function DataTable({
   rowKey,
   empty,
   caption,
+  phone = "cards",
   className
 }) {
   if (rows.length === 0 && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
-  return /* @__PURE__ */ jsx("div", { className: cn("overflow-x-auto rounded-[1.25rem] border border-border bg-card", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem]", children: [
-    caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border", children: columns.map((c) => /* @__PURE__ */ jsx(
-      "th",
-      {
-        scope: "col",
-        className: cn(
-          "whitespace-nowrap px-5 py-3 text-[0.8125rem] font-medium text-muted-foreground",
-          c.align === "end" && "text-right",
-          c.wide && "hidden md:table-cell"
-        ),
-        children: c.header
-      },
-      c.key
-    )) }) }),
-    /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: rows.map((r, i) => /* @__PURE__ */ jsx("tr", { className: "transition-colors hover:bg-accent/60", children: columns.map((c) => /* @__PURE__ */ jsx(
-      "td",
+  const primary = columns.find((c) => c.primary) ?? columns[0];
+  const right = (c) => c.numeric || c.align === "end";
+  const table = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-[1.25rem] border border-border bg-card",
+        phone === "cards" && "max-sm:hidden",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem]", children: [
+        caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border", children: columns.map((c) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "col",
+            style: { width: c.width, minWidth: c.minWidth },
+            className: cn(
+              "whitespace-nowrap px-5 py-3 text-[0.8125rem] font-medium text-muted-foreground",
+              right(c) && "text-right",
+              c.wide && "hidden md:table-cell"
+            ),
+            children: c.header
+          },
+          c.key
+        )) }) }),
+        /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: rows.map((r, i) => /* @__PURE__ */ jsx("tr", { className: "transition-colors hover:bg-accent/60", children: columns.map((c) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            style: { minWidth: c.minWidth },
+            className: cn(
+              "px-5 py-3.5 align-middle",
+              right(c) && "text-right",
+              c.numeric && "whitespace-nowrap oca-tabular",
+              c.wide && "hidden md:table-cell"
+            ),
+            children: c.truncate ? /* @__PURE__ */ jsx("div", { className: "truncate", style: { maxWidth: c.width ?? "16rem" }, children: c.cell(r) }) : c.cell(r)
+          },
+          c.key
+        )) }, rowKey(r, i))) })
+      ] }) })
+    }
+  );
+  if (phone !== "cards") return table;
+  const rest = columns.filter((c) => c !== primary && !c.hideOnPhone);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    table,
+    /* @__PURE__ */ jsx(
+      "ul",
       {
-        className: cn(
-          "px-5 py-3.5 align-middle",
-          c.align === "end" && "text-right",
-          c.wide && "hidden md:table-cell"
-        ),
-        children: c.cell(r)
-      },
-      c.key
-    )) }, rowKey(r, i))) })
-  ] }) });
+        "aria-label": caption,
+        className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card sm:hidden", className),
+        children: rows.map((r, i) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-2.5 px-4 py-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 break-words text-[0.9375rem] font-medium", children: primary?.cell(r) }),
+          rest.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-[0.875rem]", children: rest.map((c) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: c.header }),
+            /* @__PURE__ */ jsx("dd", { className: cn("min-w-0 break-words", c.numeric && "oca-tabular"), children: c.cell(r) })
+          ] }, c.key)) }) : null
+        ] }, rowKey(r, i)))
+      }
+    )
+  ] });
 }
 function EmptyState({
   title,
   children,
   action,
+  icon,
   className
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex flex-col items-center gap-4 rounded-[1.25rem] border border-dashed border-oca-hairline-strong px-6 py-12 text-center",
+        "flex flex-col items-center gap-3 rounded-[1.25rem] border border-dashed border-oca-hairline-strong px-6 py-10 text-center",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(Mark, { size: 56 }),
+        icon ? /* @__PURE__ */ jsx("span", { className: "mb-1 flex size-11 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-5", children: icon }) : null,
         /* @__PURE__ */ jsx("h3", { className: "oca-title-sm", children: title }),
         children ? /* @__PURE__ */ jsx("div", { className: "oca-body max-w-md text-[0.9375rem]", children }) : null,
-        action ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap justify-center gap-3", children: action }) : null
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap justify-center gap-3", children: action }) : null
       ]
     }
   );
 }
-var NOTICE = {
-  neutral: "border-border bg-card",
-  info: "border-[color-mix(in_oklab,var(--info)_30%,var(--border))] bg-[color-mix(in_oklab,var(--info)_6%,var(--card))]",
-  success: "border-[color-mix(in_oklab,var(--success)_30%,var(--border))] bg-[color-mix(in_oklab,var(--success)_6%,var(--card))]",
-  warning: "border-[color-mix(in_oklab,var(--warning)_35%,var(--border))] bg-[color-mix(in_oklab,var(--warning)_7%,var(--card))]",
-  danger: "border-[color-mix(in_oklab,var(--destructive)_32%,var(--border))] bg-[color-mix(in_oklab,var(--destructive)_6%,var(--card))]",
-  brand: "border-[color-mix(in_oklab,var(--oca-orange)_35%,var(--border))] bg-[color-mix(in_oklab,var(--oca-orange)_7%,var(--card))]"
-};
-var NOTICE_TITLE = {
-  neutral: "text-foreground",
-  info: "text-info",
-  success: "text-success",
-  warning: "text-warning",
-  danger: "text-destructive",
-  brand: "text-oca-accent-ink"
+var NOTICE_KIND = {
+  neutral: "neutral",
+  info: "neutral",
+  success: "neutral",
+  brand: "brand",
+  warning: "brand",
+  danger: "danger"
 };
 function Notice({
   tone = "neutral",
@@ -499,25 +690,60 @@ function Notice({
   action,
   className
 }) {
+  const kind = NOTICE_KIND[tone];
   return /* @__PURE__ */ jsxs(
     "div",
     {
       role: tone === "danger" || tone === "warning" ? "alert" : "note",
+      "data-tone": kind,
       className: cn(
-        "flex flex-col gap-3 rounded-2xl border px-5 py-4 sm:flex-row sm:items-start sm:justify-between",
-        NOTICE[tone],
+        "flex flex-col gap-3 rounded-2xl border border-border bg-card px-5 py-4 sm:flex-row sm:items-start sm:justify-between",
+        kind === "danger" && "border-[color-mix(in_oklab,var(--destructive)_40%,var(--border))]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
-          title ? /* @__PURE__ */ jsx("p", { className: cn("text-[0.9375rem] font-medium", NOTICE_TITLE[tone]), children: title }) : null,
-          children ? /* @__PURE__ */ jsx("div", { className: "text-[0.9375rem] leading-relaxed text-foreground/85", children }) : null
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-3", children: [
+          kind !== "neutral" ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "mt-[0.45rem] size-2 shrink-0 rounded-full",
+                kind === "brand" ? "bg-oca-orange" : "bg-destructive"
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            title ? /* @__PURE__ */ jsx("p", { className: cn("text-[0.9375rem] font-medium", kind === "danger" && "text-destructive"), children: title }) : null,
+            children ? /* @__PURE__ */ jsx("div", { className: "text-[0.9375rem] leading-relaxed text-muted-foreground", children }) : null
+          ] })
         ] }),
         action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
       ]
     }
   );
 }
+function LoadingBlock({
+  rows = 3,
+  timeoutMs = 12e3,
+  onRetry,
+  label = "Loading",
+  className
+}) {
+  const timedOut = useTimedOut(true, timeoutMs);
+  if (timedOut) {
+    return /* @__PURE__ */ jsx(
+      Notice,
+      {
+        className,
+        title: "This is taking longer than it should.",
+        action: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onRetry ?? (() => window.location.reload()), children: "Try again" }),
+        children: "Check your connection, then try again."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { role: "status", "aria-label": label, className: cn("flex flex-col gap-3", className), children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-16 rounded-2xl" }, i)) });
+}
 function middle(v, head, tail) {
   return v.length <= head + tail + 1 ? v : `${v.slice(0, head)}\u2026${v.slice(-tail)}`;
 }
@@ -623,7 +849,253 @@ function ActivityList({ items, empty, className }) {
     return /* @__PURE__ */ jsx("li", { children: it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "block transition-colors hover:bg-accent/60", children: body }) : body }, it.id);
   }) });
 }
+var KIND = {
+  package: "text-oca-code-package",
+  tag: "text-oca-code-tag",
+  link: "text-oca-code-link"
+};
+function PackageCard({ items, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-x-10 gap-y-7 rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card p-6 text-oca-ink-foreground md:grid-cols-2 md:p-9",
+        className
+      ),
+      children: items.map((it, i) => {
+        const code = /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", KIND[it.kind ?? "package"]), children: it.code });
+        return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-[1.125rem] font-semibold tracking-[-0.01em] text-oca-ink-title", children: it.title }),
+          it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "w-fit underline decoration-transparent underline-offset-4 hover:decoration-current", children: code }) : code,
+          it.note ? /* @__PURE__ */ jsxs("p", { className: "text-[0.9375rem] leading-relaxed text-oca-ink-subtle", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "// " }),
+            it.note
+          ] }) : null
+        ] }, i);
+      })
+    }
+  );
+}
+function CodeBlock({
+  code,
+  caption,
+  copy = true,
+  maxLines,
+  className
+}) {
+  const lines = code.split("\n").length;
+  const foldable = maxLines !== void 0 && lines > maxLines + 2;
+  const [open, setOpen] = useState(false);
+  const folded = foldable && !open;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn(
+        "overflow-hidden rounded-[1.25rem] border border-[var(--oca-code-line)] bg-[var(--oca-code-surface)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("figcaption", { className: "flex h-11 items-center justify-between gap-3 border-b border-[var(--oca-code-line)] pl-5 pr-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-[0.8125rem] text-oca-ink-subtle", children: caption ?? "Code" }),
+          copy ? /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              value: code,
+              label: "Copy code",
+              className: "text-oca-ink-subtle hover:bg-white/10 hover:text-white"
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(folded && "overflow-hidden"),
+              style: folded ? { maxHeight: `calc(${maxLines} * 1.625em + 2.5rem)` } : void 0,
+              children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--oca-code-surface)", children: /* @__PURE__ */ jsx("pre", { className: "w-max min-w-full p-5 font-mono text-[0.875rem] leading-[1.625] text-oca-ink-muted", children: /* @__PURE__ */ jsx("code", { children: code }) }) })
+            }
+          ),
+          foldable ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex justify-center px-5 pb-4",
+                folded && "absolute inset-x-0 bottom-0 pt-16"
+              ),
+              style: folded ? { background: "linear-gradient(to top, var(--oca-code-surface) 40%, transparent)" } : void 0,
+              children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setOpen((v) => !v),
+                  className: "rounded-full border border-white/20 px-4 py-1.5 text-[0.8125rem] text-white transition-colors hover:bg-white/10",
+                  children: open ? "Show less" : `Show all ${lines} lines`
+                }
+              )
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function SplitBar({
+  segments,
+  caption,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("figure", { className: cn("flex flex-col gap-5", className), children: [
+    caption ? /* @__PURE__ */ jsx("figcaption", { className: "text-[0.9375rem]", children: caption }) : null,
+    /* @__PURE__ */ jsx("div", { className: "flex h-16 w-full gap-1.5 overflow-hidden rounded-[1.25rem] md:h-20", children: segments.map((s, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex min-w-[4.25rem] items-end rounded-[1rem] px-3 pb-2.5 md:px-4 md:pb-3",
+          s.tone === "card" ? "bg-white text-oca-ink" : "bg-oca-ink text-white"
+        ),
+        style: { flexBasis: `${s.pct}%` },
+        children: /* @__PURE__ */ jsxs("span", { className: "oca-tabular text-[1.25rem] leading-none tracking-[-0.02em] md:text-[1.875rem]", children: [
+          s.pct,
+          "%"
+        ] })
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("dl", { className: "grid gap-x-8 gap-y-2 sm:grid-cols-2", children: segments.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2.5", children: [
+      /* @__PURE__ */ jsxs("dt", { className: "sr-only", children: [
+        s.pct,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "inline-block size-2.5 shrink-0 translate-y-[-1px] rounded-full",
+            s.tone === "card" ? "bg-white" : "bg-oca-ink"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("dd", { className: "text-[0.9375rem] leading-snug", children: s.label })
+    ] }, i)) })
+  ] });
+}
+var LABEL = {
+  yes: "Yes",
+  testing: "In testing",
+  "not-yet": "Not yet",
+  no: "No"
+};
+var TONE = {
+  yes: "text-oca-accent-ink",
+  testing: "text-foreground",
+  "not-yet": "text-muted-foreground",
+  no: "text-muted-foreground"
+};
+function TruthTable({
+  rows,
+  statusHeading = "Status",
+  whatHeading = "What",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: cn(
+          "divide-y divide-oca-hairline-strong overflow-hidden rounded-xl border border-oca-hairline-strong bg-card sm:hidden",
+          className
+        ),
+        children: rows.map((r, i) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-1.5 px-4 py-3.5", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("text-[0.875rem] font-medium", TONE[r.status]), children: LABEL[r.status] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] leading-relaxed", children: r.what })
+        ] }, i))
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-xl border border-oca-hairline-strong max-sm:hidden", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem] md:text-[1rem]", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-oca-table-head", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "w-[30%] border-b border-oca-hairline-strong px-4 py-3 font-semibold md:w-[22%]", children: statusHeading }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "border-b border-l border-oca-hairline-strong px-4 py-3 font-semibold", children: whatHeading })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "bg-card", children: rows.map((r, i) => /* @__PURE__ */ jsxs("tr", { className: "align-top", children: [
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: cn(
+              "border-t border-oca-hairline-strong px-4 py-3 font-medium",
+              i === 0 && "border-t-0",
+              TONE[r.status]
+            ),
+            children: LABEL[r.status]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: cn(
+              "border-l border-t border-oca-hairline-strong px-4 py-3 leading-relaxed",
+              i === 0 && "border-t-0"
+            ),
+            children: r.what
+          }
+        )
+      ] }, i)) })
+    ] }) })
+  ] });
+}
+var INT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+var COMPACT = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+function satsText(value, opts = {}) {
+  if (value == null || !Number.isFinite(value)) return null;
+  const whole = Math.trunc(value);
+  const body = (opts.compact ? COMPACT : INT).format(Math.abs(whole));
+  const sign = whole < 0 ? "\u2212" : opts.signed && whole > 0 ? "+" : "";
+  const unit = opts.unit === "none" ? "" : whole === 1 || whole === -1 ? " sat" : " sats";
+  return `${sign}${body}${unit}`;
+}
+function Sats({ value, unit, compact, signed, unknown = "\u2014", className, ...props }) {
+  const text = satsText(value, { unit, compact, signed });
+  if (text === null) {
+    return /* @__PURE__ */ jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), ...props, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: unknown }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "unknown" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("oca-tabular whitespace-nowrap", className), ...props, children: text });
+}
+function UsdApprox({
+  sats,
+  usdPerBtc,
+  className
+}) {
+  if (sats == null || usdPerBtc == null || !Number.isFinite(sats) || !Number.isFinite(usdPerBtc)) return null;
+  const usd = sats / 1e8 * usdPerBtc;
+  const text = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: usd < 1 ? 4 : 2
+  }).format(usd);
+  return /* @__PURE__ */ jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), children: [
+    "\u2248 ",
+    text
+  ] });
+}
+function SatsFigure({
+  label,
+  value,
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs("span", { className: "oca-display-3 oca-tabular", children: [
+      /* @__PURE__ */ jsx(Sats, { value, unit: "none" }),
+      /* @__PURE__ */ jsx("span", { className: "ml-2 text-[0.5em] tracking-normal text-muted-foreground", children: "sats" })
+    ] }),
+    hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
+  ] });
+}
 
-export { Accent, ActivityList, CodeBlock, Container, CopyButton, DataTable, Display, EmptyState, Eyebrow, Footnote, HashChip, KeyValueList, Lead, Notice, PackageCard, PageHeader, ProgressSteps, Prose, Sats, SatsFigure, Section, SectionIntro, SplitBar, StatCard, StatGrid, StepGrid, TruthTable, UsdApprox, satsText, sectionVariants, useCopy };
+export { Accent, ActivityList, CodeBlock, Container, CopyButton, DataTable, Display, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, Footnote, HashChip, KeyValueList, Lead, LoadingBlock, Notice, PackageCard, PageHeader, PageHero, ProgressSteps, Prose, Sats, SatsFigure, Section, SectionIntro, SplitBar, StatCard, StatGrid, StepGrid, TruthTable, UsdApprox, satsText, sectionVariants, useCopy };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map