@orangecheck/app-design 0.2.1 → 0.3.1

package/dist/index.js

@@ -134,7 +134,26 @@ function Spinner({ className, label }) {
   );
 }
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-ui": "skeleton", className: cn("animate-pulse rounded-lg bg-muted", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  react.useEffect(() => {
+    if (!active) {
+      setTimedOut(false);
+      return;
+    }
+    const t = setTimeout(() => setTimedOut(true), ms);
+    return () => clearTimeout(t);
+  }, [active, ms]);
+  return timedOut;
 }
 var Separator = react.forwardRef(function Separator2({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -207,7 +226,10 @@ var buttonVariants = classVarianceAuthority.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:opacity-45",
+    "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"
   ],
   {
@@ -253,6 +275,7 @@ var Button = react.forwardRef(function Button2({ className, variant, size, asChi
     }
   );
 });
+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 = classVarianceAuthority.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",
   {
@@ -261,10 +284,13 @@ var badgeVariants = classVarianceAuthority.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"
       }
@@ -375,7 +401,7 @@ var Label = react.forwardRef(function Label2({ className, ...props }, ref) {
     }
   );
 });
-function Field({ label, hint, error, children, className, hideLabel }) {
+function Field({ label, hint, optional, error, children, className, hideLabel }) {
   const id = react.useId();
   const hintId = hint ? `${id}-hint` : void 0;
   const errorId = error ? `${id}-error` : void 0;
@@ -386,9 +412,12 @@ function Field({ label, hint, error, children, className, hideLabel }) {
     "aria-invalid": error ? true : void 0
   }) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, className: hideLabel ? "sr-only" : void 0, children: label }),
-    hint ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: hintId, className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: id, className: hideLabel ? "sr-only" : "flex items-baseline gap-2", children: [
+      label,
+      optional ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.8125rem] font-normal text-muted-foreground", children: "Optional" }) : null
+    ] }),
     control,
+    hint ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: hintId, className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : null,
     error ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, role: "alert", className: "text-[0.8125rem] leading-snug text-destructive", children: error }) : null
   ] });
 }
@@ -665,23 +694,69 @@ var DropdownMenuLabel = react.forwardRef(function DropdownMenuLabel2({ className
 var DropdownMenuSeparator = react.forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Separator, { ref, className: cn("my-1.5 h-px bg-border", className), ...props });
 });
+function ScrollFade({ fade = "var(--card)", className, innerClassName, children, ...props }) {
+  const ref = react.useRef(null);
+  const [edges, setEdges] = react.useState({ left: false, right: false });
+  const measure = react.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 });
+  }, []);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    if (el.firstElementChild) ro.observe(el.firstElementChild);
+    return () => ro.disconnect();
+  }, [measure]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative min-w-0", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref, onScroll: measure, className: cn("overflow-x-auto overscroll-x-contain", innerClassName), children }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "pointer-events-none absolute inset-y-0 left-0 w-8 transition-opacity duration-150",
+          edges.left ? "opacity-100" : "opacity-0"
+        ),
+        style: { background: `linear-gradient(to right, ${fade}, transparent)` }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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)` }
+      }
+    )
+  ] });
+}
 var LookContext = react.createContext("pill");
 var Tabs = react.forwardRef(function Tabs2({ look = "pill", ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(LookContext.Provider, { value: look, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props }) });
 });
 var TabsList = react.forwardRef(function TabsList2({ className, ...props }, ref) {
   const look = react.useContext(LookContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--background)", className: look === "pill" ? "w-fit max-w-full" : "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.List,
     {
       ref,
       className: cn(
-        look === "pill" ? "inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-full bg-muted p-1" : "flex max-w-full items-center gap-6 overflow-x-auto border-b border-border",
+        look === "pill" ? "inline-flex w-max items-center gap-1 rounded-full bg-muted p-1" : "flex w-max min-w-full items-center gap-6 border-b border-border",
         className
       ),
       ...props
     }
-  );
+  ) });
 });
 var TabsTrigger = react.forwardRef(function TabsTrigger2({ className, ...props }, ref) {
   const look = react.useContext(LookContext);
@@ -887,7 +962,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",
@@ -903,7 +978,9 @@ var sectionVariants = classVarianceAuthority.cva("relative w-full overflow-x-cli
     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: {
@@ -938,6 +1015,120 @@ function SectionIntro({
     }
   );
 }
+function PageHero({
+  eyebrow,
+  title,
+  lead,
+  actions,
+  art,
+  meta,
+  children,
+  variant = "page",
+  size = "lg",
+  className
+}) {
+  if (variant === "document") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Section, { space: "none", className: cn("pb-12 pt-12 md:pb-16 md:pt-20", className), children: /* @__PURE__ */ jsxRuntime.jsx(DocHeader, { className: "mx-auto max-w-[42rem]", ...{ eyebrow, title, lead, meta, actions }, children }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { space: "none", className: cn("pb-14 pt-12 md:pb-20 md:pt-20", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-1 gap-10", art && "items-center md:grid-cols-12"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start gap-6", art ? "md:col-span-7" : "max-w-[52rem]"), children: [
+      eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: size === "xl" ? "oca-display-1" : "oca-display-2", children: title }),
+      lead ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-lead max-w-[38rem]", children: lead }) : null,
+      meta ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: meta }) : null,
+      actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: actions }) : null,
+      children
+    ] }),
+    art ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-5", children: art }) : null
+  ] }) });
+}
+function DocHeader({
+  eyebrow,
+  title,
+  lead,
+  meta,
+  actions,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
+    eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "oca-display-2", children: title }),
+    lead ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-lead", children: lead }) : null,
+    meta ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: meta }) : null,
+    actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-wrap gap-3", children: actions }) : null,
+    children
+  ] });
+}
+function useActiveHeading(ids) {
+  const [active, setActive] = react.useState(ids[0]);
+  const key = ids.join("|");
+  react.useEffect(() => {
+    const els = key.split("|").map((id) => document.getElementById(id)).filter((el) => el !== null);
+    if (els.length === 0 || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver(
+      (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__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("oca-container pb-24", header ? "pt-12 md:pt-20" : null, className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn(hasToc && "lg:col-start-2", "pb-4"), children: header }) : null,
+        hasToc ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "nav",
+            {
+              "aria-label": "On this page",
+              className: cn("sticky top-24 hidden self-start lg:block", header && "lg:row-start-2"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-[0.875rem] font-medium", children: "On this page" }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { children: links() })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group rounded-2xl border border-border bg-card px-4 py-3 lg:hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer list-none text-[0.9375rem] font-medium marker:hidden", children: "On this page" }),
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3", children: links() })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-w-0", hasToc && "lg:col-start-2", hasToc && header && "lg:row-start-2"), children })
+      ]
+    }
+  ) });
+}
 var pad = (n) => String(n + 1).padStart(2, "0");
 function StepGrid({ items, look = "cards", className }) {
   const cols = items.length >= 3 ? "md:grid-cols-3" : items.length === 2 ? "md:grid-cols-2" : "";
@@ -965,322 +1156,299 @@ function StepGrid({ items, look = "cards", className }) {
     ] }) }, i)
   ) });
 }
-var KIND = {
-  package: "text-oca-code-package",
-  tag: "text-oca-code-tag",
-  link: "text-oca-code-link"
+var ShellContext = react.createContext({});
+function useShellPlace() {
+  return react.useContext(ShellContext);
+}
+function PageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  className
+}) {
+  const place = useShellPlace();
+  const eb = eyebrow === void 0 ? place.section : eyebrow;
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("flex flex-col gap-5 md:flex-row md:items-end md:justify-between", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 max-w-[44rem] flex-col gap-2.5", children: [
+      eb ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-eyebrow", children: eb }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "oca-display-3", children: title }),
+      description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-body max-w-[40rem] text-[1.0625rem]", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2.5 md:shrink-0 md:justify-end", children: actions }) : null
+  ] });
+}
+var InStatGrid = react.createContext(false);
+function StatCard({ label, value, hint, className }) {
+  const inGrid = react.useContext(InStatGrid);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : inGrid ? /* @__PURE__ */ jsxRuntime.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"
 };
-function PackageCard({ items, className }) {
+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 lastSpan(n, cols) {
+  const rest = n % cols;
+  return rest === 0 ? 1 : cols - rest + 1;
+}
+function EmptyLine({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.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 = react.Children.toArray(children).filter(react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(InStatGrid.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.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",
+        "grid gap-3 md:gap-4",
+        n === 1 ? "grid-cols-1" : "grid-cols-2",
+        MD_COLS[md],
+        LG_COLS[lg],
         className
       ),
-      children: items.map((it, i) => {
-        const code = /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[0.9375rem]", KIND[it.kind ?? "package"]), children: it.code });
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[1.125rem] font-semibold tracking-[-0.01em] text-oca-ink-title", children: it.title }),
-          it.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: it.href, className: "w-fit underline decoration-transparent underline-offset-4 hover:decoration-current", children: code }) : code,
-          it.note ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[0.9375rem] leading-relaxed text-oca-ink-subtle", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "// " }),
-            it.note
-          ] }) : null
-        ] }, i);
+      ...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 ? react.cloneElement(el, { className: cn(el.props.className, span) }) : el;
       })
     }
-  );
+  ) });
 }
-function CodeBlock({
-  code,
+function KeyValueList({ items, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 px-5 py-3.5 sm:flex-row sm:items-baseline sm:gap-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "shrink-0 text-[0.875rem] text-muted-foreground sm:w-48", children: it.label }),
+    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn("min-w-0 break-words text-[0.9375rem]", it.mono && "font-mono text-[0.875rem]"), children: it.value })
+  ] }, i)) });
+}
+function DataTable({
+  columns,
+  rows,
+  rowKey,
+  empty,
   caption,
+  phone = "cards",
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: cn("overflow-hidden rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card", className), children: [
-    caption ? /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "border-b border-oca-ink-line px-5 py-3 text-[0.8125rem] text-oca-ink-subtle", children: caption }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-x-auto p-5 font-mono text-[0.875rem] leading-relaxed text-oca-ink-muted", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code }) })
+  if (rows.length === 0 && empty) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: empty });
+  const primary = columns.find((c) => c.primary) ?? columns[0];
+  const right = (c) => c.numeric || c.align === "end";
+  const table = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-[1.25rem] border border-border bg-card",
+        phone === "cards" && "max-sm:hidden",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem]", children: [
+        caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border", children: columns.map((c) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: rows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "transition-colors hover:bg-accent/60", children: columns.map((c) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    table,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        "aria-label": caption,
+        className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card sm:hidden", className),
+        children: rows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex flex-col gap-2.5 px-4 py-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 break-words text-[0.9375rem] font-medium", children: primary?.cell(r) }),
+          rest.length > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "contents", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: c.header }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn("min-w-0 break-words", c.numeric && "oca-tabular"), children: c.cell(r) })
+          ] }, c.key)) }) : null
+        ] }, rowKey(r, i)))
+      }
+    )
   ] });
 }
-function SplitBar({
-  segments,
-  caption,
+function EmptyState({
+  title,
+  children,
+  action,
+  icon,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: cn("flex flex-col gap-5", className), children: [
-    caption ? /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "text-[0.9375rem]", children: caption }) : null,
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "oca-tabular text-[1.25rem] leading-none tracking-[-0.02em] md:text-[1.875rem]", children: [
-          s.pct,
-          "%"
-        ] })
-      },
-      i
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid gap-x-8 gap-y-2 sm:grid-cols-2", children: segments.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "sr-only", children: [
-        s.pct,
-        "%"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.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"
-          )
-        }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center gap-3 rounded-[1.25rem] border border-dashed border-oca-hairline-strong px-6 py-10 text-center",
+        className
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-[0.9375rem] leading-snug", children: s.label })
-    ] }, i)) })
-  ] });
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "oca-title-sm", children: title }),
+        children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-body max-w-md text-[0.9375rem]", children }) : null,
+        action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap justify-center gap-3", children: action }) : null
+      ]
+    }
+  );
 }
-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"
+var NOTICE_KIND = {
+  neutral: "neutral",
+  info: "neutral",
+  success: "neutral",
+  brand: "brand",
+  warning: "brand",
+  danger: "danger"
 };
-function TruthTable({
-  rows,
-  statusHeading = "Status",
-  whatHeading = "What",
+function Notice({
+  tone = "neutral",
+  title,
+  children,
+  action,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-xl border border-oca-hairline-strong", className), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem] md:text-[1rem]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-oca-table-head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("th", { scope: "col", className: "border-b border-l border-oca-hairline-strong px-4 py-3 font-semibold", children: whatHeading })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-card", children: rows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "align-top", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: unknown }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "unknown" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), children: [
-    "\u2248 ",
-    text
-  ] });
-}
-function SatsFigure({
-  label,
-  value,
-  hint,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9375rem] text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oca-display-3 oca-tabular", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Sats, { value, unit: "none" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-[0.5em] tracking-normal text-muted-foreground", children: "sats" })
-    ] }),
-    hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
-  ] });
-}
-function PageHeader({
-  eyebrow,
-  title,
-  description,
-  actions,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("flex flex-col gap-5 md:flex-row md:items-end md:justify-between", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-[44rem] flex-col gap-3", children: [
-      eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "oca-display-3", children: title }),
-      description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-body text-[1.0625rem]", children: description }) : null
-    ] }),
-    actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-3", children: actions }) : null
-  ] });
-}
-function StatCard({
-  label,
-  value,
-  hint,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oca-tabular text-[1.75rem] leading-tight tracking-[-0.02em]", children: value }),
-    hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : null
-  ] });
-}
-function StatGrid({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4", className), ...props });
-}
-function KeyValueList({ items, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 px-5 py-3.5 sm:flex-row sm:items-baseline sm:gap-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "shrink-0 text-[0.875rem] text-muted-foreground sm:w-48", children: it.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn("min-w-0 break-words text-[0.9375rem]", it.mono && "font-mono text-[0.875rem]"), children: it.value })
-  ] }, i)) });
-}
-function DataTable({
-  columns,
-  rows,
-  rowKey,
-  empty,
-  caption,
-  className
-}) {
-  if (rows.length === 0 && empty) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: empty });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-x-auto rounded-[1.25rem] border border-border bg-card", className), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem]", children: [
-    caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border", children: columns.map((c) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: rows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "transition-colors hover:bg-accent/60", children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
-      "td",
-      {
-        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))) })
-  ] }) });
-}
-function EmptyState({
-  title,
-  children,
-  action,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.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",
-        className
+  const kind = NOTICE_KIND[tone];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: tone === "danger" || tone === "warning" ? "alert" : "note",
+      "data-tone": kind,
+      className: cn(
+        "flex flex-col gap-3 rounded-2xl border border-border bg-card px-5 py-4 sm:flex-row sm:items-start sm:justify-between",
+        kind === "danger" && "border-[color-mix(in_oklab,var(--destructive)_40%,var(--border))]",
+        className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Mark, { size: 56 }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "oca-title-sm", children: title }),
-        children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-body max-w-md text-[0.9375rem]", children }) : null,
-        action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-wrap justify-center gap-3", children: action }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 gap-3", children: [
+          kind !== "neutral" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-[0.9375rem] font-medium", kind === "danger" && "text-destructive"), children: title }) : null,
+            children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[0.9375rem] leading-relaxed text-muted-foreground", children }) : null
+          ] })
+        ] }),
+        action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", 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"
-};
-function Notice({
-  tone = "neutral",
-  title,
-  children,
-  action,
+function LoadingBlock({
+  rows = 3,
+  timeoutMs = 12e3,
+  onRetry,
+  label = "Loading",
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      role: tone === "danger" || tone === "warning" ? "alert" : "note",
-      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],
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
-          title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-[0.9375rem] font-medium", NOTICE_TITLE[tone]), children: title }) : null,
-          children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[0.9375rem] leading-relaxed text-foreground/85", children }) : null
-        ] }),
-        action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action }) : null
-      ]
-    }
-  );
+  const timedOut = useTimedOut(true, timeoutMs);
+  if (timedOut) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Notice,
+      {
+        className,
+        title: "This is taking longer than it should.",
+        action: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "secondary", onClick: onRetry ?? (() => window.location.reload()), children: "Try again" }),
+        children: "Check your connection, then try again."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-label": label, className: cn("flex flex-col gap-3", className), children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxRuntime.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)}`;
@@ -1387,6 +1555,252 @@ function ActivityList({ items, empty, className }) {
     return /* @__PURE__ */ jsxRuntime.jsx("li", { children: it.href ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cn("text-[0.9375rem]", KIND[it.kind ?? "package"]), children: it.code });
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[1.125rem] font-semibold tracking-[-0.01em] text-oca-ink-title", children: it.title }),
+          it.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: it.href, className: "w-fit underline decoration-transparent underline-offset-4 hover:decoration-current", children: code }) : code,
+          it.note ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[0.9375rem] leading-relaxed text-oca-ink-subtle", children: [
+            /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  const folded = foldable && !open;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "figure",
+    {
+      className: cn(
+        "overflow-hidden rounded-[1.25rem] border border-[var(--oca-code-line)] bg-[var(--oca-code-surface)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.8125rem] text-oca-ink-subtle", children: caption ?? "Code" }),
+          copy ? /* @__PURE__ */ jsxRuntime.jsx(
+            CopyButton,
+            {
+              value: code,
+              label: "Copy code",
+              className: "text-oca-ink-subtle hover:bg-white/10 hover:text-white"
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(folded && "overflow-hidden"),
+              style: folded ? { maxHeight: `calc(${maxLines} * 1.625em + 2.5rem)` } : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx(ScrollFade, { fade: "var(--oca-code-surface)", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "w-max min-w-full p-5 font-mono text-[0.875rem] leading-[1.625] text-oca-ink-muted", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code }) }) })
+            }
+          ),
+          foldable ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("figure", { className: cn("flex flex-col gap-5", className), children: [
+    caption ? /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "text-[0.9375rem]", children: caption }) : null,
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "oca-tabular text-[1.25rem] leading-none tracking-[-0.02em] md:text-[1.875rem]", children: [
+          s.pct,
+          "%"
+        ] })
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid gap-x-8 gap-y-2 sm:grid-cols-2", children: segments.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "sr-only", children: [
+        s.pct,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { className: "flex flex-col gap-1.5 px-4 py-3.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[0.875rem] font-medium", TONE[r.status]), children: LABEL[r.status] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9375rem] leading-relaxed", children: r.what })
+        ] }, i))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-xl border border-oca-hairline-strong max-sm:hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem] md:text-[1rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-oca-table-head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("th", { scope: "col", className: "border-b border-l border-oca-hairline-strong px-4 py-3 font-semibold", children: whatHeading })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-card", children: rows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "align-top", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: unknown }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "unknown" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), children: [
+    "\u2248 ",
+    text
+  ] });
+}
+function SatsFigure({
+  label,
+  value,
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9375rem] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oca-display-3 oca-tabular", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Sats, { value, unit: "none" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-[0.5em] tracking-normal text-muted-foreground", children: "sats" })
+    ] }),
+    hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
+  ] });
+}
 function NavLink({ item, className, onNavigate }) {
   const cls = cn(
     "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
@@ -1452,12 +1866,12 @@ function SiteFooter({
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: cn("border-t border-border bg-background", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oca-container grid gap-10 py-14 md:grid-cols-[1.3fr_repeat(3,1fr)] md:py-16", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oca-container grid grid-cols-2 gap-x-6 gap-y-10 py-14 md:grid-cols-[1.3fr_repeat(3,1fr)] md:py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2 flex flex-col gap-4 md:col-span-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }),
         fineprint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs text-[0.9375rem] leading-relaxed text-muted-foreground", children: fineprint }) : null
       ] }),
-      columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+      columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[0.875rem] font-medium", children: col.heading }),
         col.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
           NavLink,
@@ -1473,8 +1887,8 @@ function SiteFooter({
   ] });
 }
 function SideNav({ groups, onNavigate }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Sections", className: "flex flex-col gap-6", children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
-    g.label ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1.5 text-[0.8125rem] text-muted-foreground", children: g.label }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Pages", className: "flex flex-col gap-5", children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    g.label ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: g.label }) : null,
     g.items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
       Link2__default.default,
       {
@@ -1482,8 +1896,8 @@ function SideNav({ groups, onNavigate }) {
         onClick: onNavigate,
         "aria-current": it.active ? "page" : void 0,
         className: cn(
-          "flex h-10 items-center gap-3 rounded-xl px-3 text-[0.9375rem] transition-colors",
-          "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
+          "flex h-9 items-center gap-3 rounded-xl px-3 text-[0.9375rem] transition-colors",
+          "[&_svg]:size-[1.0625rem] [&_svg]:shrink-0",
           it.active ? "bg-card text-foreground shadow-sm ring-1 ring-border [&_svg]:text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"
         ),
         children: [
@@ -1496,8 +1910,56 @@ function SideNav({ groups, onNavigate }) {
     ))
   ] }, g.label ?? gi)) });
 }
+function SectionSwitch({
+  sections,
+  current,
+  onNavigate
+}) {
+  const cols = sections.length <= 3 ? sections.length : 2;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "aria-label": "Sections",
+      className: cn("grid gap-1 bg-muted p-1", cols === sections.length ? "rounded-full" : "rounded-[1.25rem]"),
+      style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
+      children: sections.map((sec) => {
+        const on = sec.id === current.id;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Link2__default.default,
+          {
+            href: sec.href,
+            onClick: onNavigate,
+            "aria-current": on ? "true" : void 0,
+            className: cn(
+              "flex h-8 min-w-0 items-center justify-center rounded-full px-1.5 text-[0.8125rem] font-medium transition-colors",
+              on ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: sec.label })
+          },
+          sec.id
+        );
+      })
+    }
+  );
+}
+var activeItem = (groups) => groups.flatMap((g) => g.items).find((it) => it.active);
+var warned = /* @__PURE__ */ new Set();
+function warnDuplicateLabels(groups) {
+  if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  const seen = /* @__PURE__ */ new Set();
+  for (const it of groups.flatMap((g) => g.items)) {
+    if (seen.has(it.label) && !warned.has(it.label)) {
+      warned.add(it.label);
+      console.warn(`AppShell: two pages are labelled "${it.label}"; give each its own name.`);
+    }
+    seen.add(it.label);
+  }
+}
 function AppShell({
   nav,
+  sections,
+  activeSection,
+  persistent = [],
   home = "/",
   account,
   banner,
@@ -1506,38 +1968,59 @@ function AppShell({
   className
 }) {
   const [open, setOpen] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-h-dvh bg-background", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-40 flex h-14 items-center justify-between border-b border-border bg-background/85 px-4 backdrop-blur-md lg:hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SheetTrigger,
-          {
-            className: "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
-            "aria-label": "Open navigation",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "p-4 pt-16", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
-          /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups: nav, onNavigate: () => setOpen(false) })
-        ] })
+  const current = sections && sections.length > 0 ? sections.find((sec) => sec.id === activeSection) ?? sections.find((sec) => activeItem(sec.groups)) ?? sections[0] : void 0;
+  const groups = current ? [...current.groups, ...persistent] : [...nav ?? [], ...persistent];
+  warnDuplicateLabels(groups);
+  const page = activeItem(groups);
+  const place = react.useMemo(
+    () => ({ section: current ? current.title ?? current.label : void 0, page: page?.label }),
+    [current, page?.label]
+  );
+  const switcher = sections && current && sections.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(SectionSwitch, { sections, current, onNavigate: () => setOpen(false) }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-h-dvh bg-background", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-md lg:hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-14 items-center gap-2 px-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SheetTrigger,
+            {
+              className: "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
+              "aria-label": "Open navigation",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "flex flex-col gap-6 overflow-y-auto p-4 pt-16", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
+            switcher,
+            /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups, onNavigate: () => setOpen(false) }),
+            footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 22 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: account })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: home, "aria-label": "Home", children: /* @__PURE__ */ jsxRuntime.jsx(AppIcon, { size: 28 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: account })
+      place.page ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]", children: [
+        place.section ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" })
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: place.page })
+      ] }) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "sticky top-0 hidden h-dvh w-64 shrink-0 flex-col gap-8 overflow-y-auto px-4 py-6 lg:flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "sticky top-0 hidden h-dvh w-[17rem] shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups: nav }),
+        switcher,
+        /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden h-[4.5rem] items-center justify-end gap-3 px-8 lg:flex", children: account }),
         banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-2 pt-4 md:px-8 lg:pt-0", children: banner }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children })
+        /* @__PURE__ */ jsxRuntime.jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
       ] })
     ] })
-  ] });
+  ] }) });
 }
 function AccountMenu({
   name,
@@ -1549,11 +2032,11 @@ function AccountMenu({
     /* @__PURE__ */ jsxRuntime.jsxs(
       DropdownMenuTrigger,
       {
-        className: "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-3.5 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring",
+        className: "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-1 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring sm:pr-3.5",
         "aria-label": `Account: ${name}`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background", children: initial }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[10rem] truncate", children: name })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[10rem] truncate max-sm:hidden", children: name })
         ]
       }
     ),
@@ -1633,6 +2116,8 @@ exports.DialogHeader = DialogHeader;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.Display = Display;
+exports.DocHeader = DocHeader;
+exports.DocLayout = DocLayout;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuContent = DropdownMenuContent;
 exports.DropdownMenuGroup = DropdownMenuGroup;
@@ -1640,6 +2125,7 @@ exports.DropdownMenuItem = DropdownMenuItem;
 exports.DropdownMenuLabel = DropdownMenuLabel;
 exports.DropdownMenuSeparator = DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EmptyLine = EmptyLine;
 exports.EmptyState = EmptyState;
 exports.Eyebrow = Eyebrow;
 exports.Field = Field;
@@ -1652,12 +2138,14 @@ exports.Kbd = Kbd;
 exports.KeyValueList = KeyValueList;
 exports.Label = Label;
 exports.Lead = Lead;
+exports.LoadingBlock = LoadingBlock;
 exports.Lockup = Lockup;
 exports.MARK_FACES = MARK_FACES;
 exports.Mark = Mark;
 exports.Notice = Notice;
 exports.PackageCard = PackageCard;
 exports.PageHeader = PageHeader;
+exports.PageHero = PageHero;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
@@ -1669,6 +2157,7 @@ exports.RadioGroupItem = RadioGroupItem;
 exports.SPHERE_GRADIENT = SPHERE_GRADIENT;
 exports.Sats = Sats;
 exports.SatsFigure = SatsFigure;
+exports.ScrollFade = ScrollFade;
 exports.Section = Section;
 exports.SectionIntro = SectionIntro;
 exports.Select = Select;
@@ -1684,6 +2173,7 @@ exports.SheetContent = SheetContent;
 exports.SheetDescription = SheetDescription;
 exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
+exports.ShellContext = ShellContext;
 exports.SiteFooter = SiteFooter;
 exports.SiteHeader = SiteHeader;
 exports.Skeleton = Skeleton;
@@ -1717,5 +2207,7 @@ exports.cn = cn;
 exports.satsText = satsText;
 exports.sectionVariants = sectionVariants;
 exports.useCopy = useCopy;
+exports.useShellPlace = useShellPlace;
+exports.useTimedOut = useTimedOut;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map