@orangecheck/app-design 1.2.3 → 1.4.0

package/dist/chrome.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var lucideReact = require('lucide-react');
-var Link5 = require('next/link');
+var Link = require('next/link');
 var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -10,11 +10,12 @@ var DialogPrimitive = require('@radix-ui/react-dialog');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var nextThemes = require('next-themes');
 var classVarianceAuthority = require('class-variance-authority');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 require('sonner');
 var reactSlot = require('@radix-ui/react-slot');
-var nextThemes = require('next-themes');
+var router = require('next/compat/router');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -36,7 +37,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var Link5__default = /*#__PURE__*/_interopDefault(Link5);
+var Link__default = /*#__PURE__*/_interopDefault(Link);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
@@ -435,6 +436,17 @@ 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 sharedContext(name, initial) {
+  const key = /* @__PURE__ */ Symbol.for(`@orangecheck/app-design/${name}`);
+  const store = globalThis;
+  return store[key] ?? (store[key] = react.createContext(initial));
+}
+
+// src/lib/shell-context.ts
+var ShellContext = sharedContext("shell-place", {});
+function useShellPlace() {
+  return react.useContext(ShellContext);
+}
 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",
@@ -561,191 +573,483 @@ function FamilyMenu({ current, className }) {
     )
   ] });
 }
-function NavLink({
-  item,
-  className,
-  onNavigate,
-  line = false
-}) {
-  const cls = cn(
-    "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
-    item.active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
-    line && "relative after:absolute after:inset-x-3 after:-bottom-[0.625rem] after:h-0.5 after:rounded-full",
-    line && item.active && "after:bg-foreground",
-    className
-  );
-  if (item.external) {
-    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Link5__default.default, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
-}
-function NavRow({ item, onNavigate }) {
-  const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9375rem] font-medium leading-6 text-foreground", children: item.label }),
-    item.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: item.description }) : null
-  ] });
-  const cls = cn(
-    "flex flex-col gap-0.5 rounded-xl px-3 py-2 transition-colors hover:bg-accent",
-    item.active && "bg-muted hover:bg-muted dark:bg-white/[0.06]"
-  );
-  return item.external ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: body }) : /* @__PURE__ */ jsxRuntime.jsx(Link5__default.default, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: body });
-}
-var seeAll = (item) => typeof item.label === "string" ? `All ${item.label.toLowerCase()}` : "See all";
-function NavDropdown({ item }) {
-  const [open, setOpen] = react.useState(false);
-  const active = item.active || item.children?.some((c) => c.active);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      PopoverTrigger,
+function SideNav({ groups, onNavigate }) {
+  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(
+      Link__default.default,
       {
+        href: it.href,
+        onClick: onNavigate,
+        "aria-current": it.active ? "page" : void 0,
         className: cn(
-          "group inline-flex items-center gap-1 rounded-full py-2 pl-3 pr-2.5 text-[0.9375rem] transition-colors md:max-lg:pl-2.5 md:max-lg:pr-2",
-          active ? "text-foreground" : "text-muted-foreground hover:text-foreground data-[state=open]:text-foreground"
+          "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: [
-          item.label,
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180" })
+          it.icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: it.label }),
+          it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: it.badge }) : null
         ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "center", sideOffset: 10, className: "w-[min(calc(100vw-2rem),26rem)] p-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col", children: item.children?.map((c) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(NavRow, { item: c, onNavigate: () => setOpen(false) }) }, c.href)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 border-t border-border px-1 pt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
-        NavLink,
-        {
-          item: { ...item, label: seeAll(item), children: void 0 },
-          className: "block rounded-xl px-2 py-2 text-[0.875rem]",
-          onNavigate: () => setOpen(false)
-        }
-      ) })
-    ] })
-  ] });
+      },
+      it.href
+    ))
+  ] }, g.label ?? gi)) });
 }
-function SiteHeader({
-  home = "/",
-  brand,
-  product,
-  family,
-  nav = [],
-  search,
-  actions,
-  variant = "site",
-  navOnPhone = true,
-  menu: menuExtra,
-  className
+function SectionSwitch({
+  sections,
+  current,
+  onNavigate
 }) {
-  const [open, setOpen] = react.useState(false);
-  const tool = variant === "tool";
-  const size = tool ? 24 : 28;
-  const current = typeof family === "string" ? family : void 0;
-  const phoneNav = navOnPhone ? nav : [];
-  const menu = phoneNav.length > 0 || Boolean(family) || Boolean(menuExtra);
-  const brandNode = brand ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size }),
-    product ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "mx-3 h-5 w-px bg-oca-hairline-strong" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tracking-[-0.01em]", style: { fontSize: size * 0.56 }, children: product })
-    ] }) : null
-  ] });
-  const navigation = nav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map(
-    (n) => n.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(NavDropdown, { item: n }, n.href) : (
-      // Between md and lg the family menu and the actions share the row: tighter.
-      /* @__PURE__ */ jsxRuntime.jsx(NavLink, { item: n, line: tool, className: tool ? void 0 : "md:max-lg:px-2.5" }, n.href)
-    )
-  ) }) : null;
+  const cols = sections.length <= 3 ? sections.length : 2;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "header",
+    "nav",
     {
-      className: cn(
-        "sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/90",
-        tool ? "border-border" : "border-transparent",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "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(
+          Link__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
+        );
+      })
+    }
+  );
+}
+function TabBar({ items }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "aria-label": "Pages",
+      "data-oca-tabbar": "",
+      className: "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md md:hidden",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(
-            "flex items-center justify-between gap-4",
-            tool ? "h-14 px-4 md:px-6" : "oca-container h-16 md:h-[4.5rem] md:max-lg:gap-2",
-            // Three columns, the outer two each at least their content: the
-            // navigation stays centred whatever the actions hold, so it does
-            // not shift when they change (signed out to signed in).
-            !tool && nav.length > 0 && "md:grid md:grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]"
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 items-center gap-1", tool ? "md:gap-1" : "justify-self-start"), children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Link5__default.default, { href: home, className: "-ml-1 min-w-0 rounded-lg p-1", children: [
-                brandNode,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " home" })
-              ] }),
-              family ? /* @__PURE__ */ jsxRuntime.jsx(FamilyMenu, { current, className: "max-md:hidden" }) : null,
-              tool && navigation ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-5", children: navigation }) : null
-            ] }),
-            !tool ? navigation : null,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 justify-self-end", children: [
-              search,
-              actions,
-              menu ? /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SheetTrigger,
+          className: "mx-auto grid h-14 max-w-[32rem] px-1.5",
+          style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
+          children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
+            Link__default.default,
+            {
+              href: it.href,
+              "aria-current": it.active ? "page" : void 0,
+              className: cn(
+                "flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
                   {
-                    className: "inline-flex size-10 items-center justify-center rounded-full text-foreground hover:bg-accent md:hidden",
-                    "aria-label": "Open menu",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
+                    className: cn(
+                      "relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
+                      "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
+                      it.active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
+                    ),
+                    children: [
+                      it.icon,
+                      it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute right-2.5 top-0.5 size-2 rounded-full bg-oca-orange ring-2 ring-background" }) : null
+                    ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "pt-16", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
-                  menuExtra ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", (phoneNav.length > 0 || family) && "border-b border-border pb-3"), children: menuExtra }) : null,
-                  phoneNav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: phoneNav.map(
-                    (n) => n.children?.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col py-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: n.label }),
-                      n.children.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
-                        NavLink,
-                        {
-                          item: c,
-                          className: "rounded-xl px-3 py-2.5 text-[1.0625rem]",
-                          onNavigate: () => setOpen(false)
-                        },
-                        c.href
-                      ))
-                    ] }, n.href) : /* @__PURE__ */ jsxRuntime.jsx(
-                      NavLink,
-                      {
-                        item: n,
-                        className: "rounded-xl px-3 py-3 text-[1.0625rem]",
-                        onNavigate: () => setOpen(false)
-                      },
-                      n.href
-                    )
-                  ) }) : null,
-                  family ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cn("group", phoneNav.length > 0 && "mt-2 border-t border-border pt-4"), children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between rounded-xl px-3 py-2.5 text-[1.0625rem] [&::-webkit-details-marker]:hidden", children: [
-                      "All orangecheck sites",
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(FamilyList, { current, onNavigate: () => setOpen(false), stack: true, className: "mt-2" })
-                  ] }) : null
-                ] })
-              ] }) : null
-            ] })
-          ]
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate px-0.5", children: it.label }),
+                it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: it.badge }) : null
+              ]
+            },
+            it.href
+          ))
         }
       )
     }
   );
 }
-function SkipLink({ href = "#main-content", children = "Skip to content" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "a",
-    {
-      href,
-      className: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-3 focus:z-50 focus:rounded-full focus:border focus:border-border focus:bg-card focus:px-4 focus:py-2 focus:text-[0.9375rem] focus:font-medium focus:text-foreground focus:shadow-md",
-      children
-    }
-  );
-}
-var BANNER_TONE = {
+function tabsFor(groups) {
+  const items = groups.flatMap((g) => g.items);
+  return items.length >= 2 && items.length <= 5 && items.every((it) => it.icon) ? items : null;
+}
+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,
+  page: pageOverride,
+  persistent = [],
+  home = "/",
+  family,
+  account,
+  banner,
+  footer,
+  children,
+  className
+}) {
+  const [open, setOpen] = react.useState(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 tabs = current ? null : tabsFor(groups);
+  const page = activeItem(groups);
+  const place = react.useMemo(
+    () => ({
+      section: current ? current.title ?? current.label : void 0,
+      page: pageOverride ?? page?.label
+    }),
+    [current, page?.label, pageOverride]
+  );
+  const familyMenu = family ? /* @__PURE__ */ jsxRuntime.jsx(FamilyMenu, { current: typeof family === "string" ? family : void 0 }) : null;
+  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",
+        tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]",
+        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: cn(
+                    "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
+                    // The tab bar holds every page; the sheet is left for a footer.
+                    tabs && !footer && "max-md:hidden"
+                  ),
+                  "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("div", { className: tabs ? "max-md:hidden" : void 0, children: /* @__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(Link__default.default, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 22 }) }),
+            familyMenu,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: account })
+          ] }),
+          place.page ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]",
+                // The active tab already names the page.
+                tabs && !pageOverride && "max-md:hidden"
+              ),
+              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-[17rem] shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }) }),
+              familyMenu
+            ] }),
+            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("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
+          ] })
+        ] }),
+        tabs ? /* @__PURE__ */ jsxRuntime.jsx(TabBar, { items: tabs }) : null
+      ]
+    }
+  ) });
+}
+function AccountMenu({
+  name,
+  detail,
+  items,
+  nameFrom = "sm"
+}) {
+  const initial = name.trim().charAt(0).toUpperCase() || "\xB7";
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenuTrigger,
+      {
+        className: cn(
+          "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",
+          nameFrom === "lg" ? "lg:pr-3.5" : "sm:pr-3.5"
+        ),
+        "aria-label": `${name}, account menu`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-initial": initial,
+              className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background before:content-[attr(data-initial)]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("max-w-[10rem] truncate", nameFrom === "lg" ? "max-lg:hidden" : "max-sm:hidden"), children: name })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuLabel, { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.9375rem] font-medium text-foreground", children: name }),
+        detail ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-mono text-[0.75rem]", children: detail }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+      items.map(
+        (it, i) => it === "separator" ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}, `sep-${i}`) : it.href ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, destructive: it.destructive, children: /* @__PURE__ */ jsxRuntime.jsxs(Link__default.default, { href: it.href, children: [
+          it.icon,
+          it.label
+        ] }) }, it.label) : /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onSelect: it.onSelect, destructive: it.destructive, children: [
+          it.icon,
+          it.label
+        ] }, it.label)
+      )
+    ] })
+  ] });
+}
+function ThemeToggle({ className }) {
+  const { theme, setTheme } = nextThemes.useTheme();
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => setMounted(true), []);
+  const current = mounted ? theme ?? "system" : "system";
+  const next = current === "light" ? "dark" : current === "dark" ? "system" : "light";
+  const Icon = current === "light" ? lucideReact.Sun : current === "dark" ? lucideReact.Moon : lucideReact.SunMoon;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(next),
+      "aria-label": `Theme: ${current}. Switch to ${next}`,
+      title: `Theme: ${current}`,
+      className: cn(
+        "inline-flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-[1.125rem]" })
+    }
+  );
+}
+function NavLink({
+  item,
+  className,
+  onNavigate,
+  line = false
+}) {
+  const cls = cn(
+    "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
+    item.active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+    line && "relative after:absolute after:inset-x-3 after:-bottom-[0.625rem] after:h-0.5 after:rounded-full",
+    line && item.active && "after:bg-foreground",
+    className
+  );
+  if (item.external) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
+}
+function NavRow({ item, onNavigate }) {
+  const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9375rem] font-medium leading-6 text-foreground", children: item.label }),
+    item.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: item.description }) : null
+  ] });
+  const cls = cn(
+    "flex flex-col gap-0.5 rounded-xl px-3 py-2 transition-colors hover:bg-accent",
+    item.active && "bg-muted hover:bg-muted dark:bg-white/[0.06]"
+  );
+  return item.external ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: body }) : /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: body });
+}
+var seeAll = (item) => typeof item.label === "string" ? `All ${item.label.toLowerCase()}` : "See all";
+function NavDropdown({ item }) {
+  const [open, setOpen] = react.useState(false);
+  const active = item.active || item.children?.some((c) => c.active);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverTrigger,
+      {
+        className: cn(
+          "group inline-flex items-center gap-1 rounded-full py-2 pl-3 pr-2.5 text-[0.9375rem] transition-colors md:max-lg:pl-2.5 md:max-lg:pr-2",
+          active ? "text-foreground" : "text-muted-foreground hover:text-foreground data-[state=open]:text-foreground"
+        ),
+        children: [
+          item.label,
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "center", sideOffset: 10, className: "w-[min(calc(100vw-2rem),26rem)] p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col", children: item.children?.map((c) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(NavRow, { item: c, onNavigate: () => setOpen(false) }) }, c.href)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 border-t border-border px-1 pt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+        NavLink,
+        {
+          item: { ...item, label: seeAll(item), children: void 0 },
+          className: "block rounded-xl px-2 py-2 text-[0.875rem]",
+          onNavigate: () => setOpen(false)
+        }
+      ) })
+    ] })
+  ] });
+}
+function SiteHeader({
+  home = "/",
+  brand,
+  product,
+  family,
+  nav = [],
+  search,
+  actions,
+  variant = "site",
+  navOnPhone = true,
+  menu: menuExtra,
+  className
+}) {
+  const [open, setOpen] = react.useState(false);
+  const tool = variant === "tool";
+  const size = tool ? 24 : 28;
+  const current = typeof family === "string" ? family : void 0;
+  const phoneNav = navOnPhone ? nav : [];
+  const menu = phoneNav.length > 0 || Boolean(family) || Boolean(menuExtra);
+  const brandNode = brand ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size }),
+    product ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "mx-3 h-5 w-px bg-oca-hairline-strong" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tracking-[-0.01em]", style: { fontSize: size * 0.56 }, children: product })
+    ] }) : null
+  ] });
+  const navigation = nav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map(
+    (n) => n.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(NavDropdown, { item: n }, n.href) : (
+      // Between md and lg the family menu and the actions share the row: tighter.
+      /* @__PURE__ */ jsxRuntime.jsx(NavLink, { item: n, line: tool, className: tool ? void 0 : "md:max-lg:px-2.5" }, n.href)
+    )
+  ) }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/90",
+        tool ? "border-border" : "border-transparent",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-between gap-4",
+            tool ? "h-14 px-4 md:px-6" : "oca-container h-16 md:h-[4.5rem] md:max-lg:gap-2",
+            // Three columns, the outer two each at least their content: the
+            // navigation stays centred whatever the actions hold, so it does
+            // not shift when they change (signed out to signed in).
+            !tool && nav.length > 0 && "md:grid md:grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 items-center gap-1", tool ? "md:gap-1" : "justify-self-start"), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Link__default.default, { href: home, className: "-ml-1 min-w-0 rounded-lg p-1", children: [
+                brandNode,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " home" })
+              ] }),
+              family ? /* @__PURE__ */ jsxRuntime.jsx(FamilyMenu, { current, className: "max-md:hidden" }) : null,
+              tool && navigation ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-5", children: navigation }) : null
+            ] }),
+            !tool ? navigation : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 justify-self-end", children: [
+              search,
+              actions,
+              menu ? /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SheetTrigger,
+                  {
+                    className: "inline-flex size-10 items-center justify-center rounded-full text-foreground hover:bg-accent md:hidden",
+                    "aria-label": "Open menu",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "pt-16", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
+                  menuExtra ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", (phoneNav.length > 0 || family) && "border-b border-border pb-3"), children: menuExtra }) : null,
+                  phoneNav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: phoneNav.map(
+                    (n) => n.children?.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col py-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: n.label }),
+                      n.children.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+                        NavLink,
+                        {
+                          item: c,
+                          className: "rounded-xl px-3 py-2.5 text-[1.0625rem]",
+                          onNavigate: () => setOpen(false)
+                        },
+                        c.href
+                      ))
+                    ] }, n.href) : /* @__PURE__ */ jsxRuntime.jsx(
+                      NavLink,
+                      {
+                        item: n,
+                        className: "rounded-xl px-3 py-3 text-[1.0625rem]",
+                        onNavigate: () => setOpen(false)
+                      },
+                      n.href
+                    )
+                  ) }) : null,
+                  family ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cn("group", phoneNav.length > 0 && "mt-2 border-t border-border pt-4"), children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between rounded-xl px-3 py-2.5 text-[1.0625rem] [&::-webkit-details-marker]:hidden", children: [
+                      "All orangecheck sites",
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(FamilyList, { current, onNavigate: () => setOpen(false), stack: true, className: "mt-2" })
+                  ] }) : null
+                ] })
+              ] }) : null
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function SkipLink({ href = "#main-content", children = "Skip to content" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      className: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-3 focus:z-50 focus:rounded-full focus:border focus:border-border focus:bg-card focus:px-4 focus:py-2 focus:text-[0.9375rem] focus:font-medium focus:text-foreground focus:shadow-md",
+      children
+    }
+  );
+}
+var BANNER_TONE = {
   neutral: "border-border bg-muted",
   brand: "border-[color-mix(in_oklab,var(--oca-orange)_30%,var(--border))] bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--background))]",
   danger: "border-[color-mix(in_oklab,var(--destructive)_35%,var(--border))] bg-[color-mix(in_oklab,var(--destructive)_8%,var(--background))]"
@@ -776,7 +1080,7 @@ function SiteBanner({
 var FOOT_LINK = "inline-flex min-h-11 items-center transition-colors hover:text-foreground md:min-h-0";
 function LegalRow({ links }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Legal", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-x-5", children: links.map((l) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: l.href.startsWith("/") ? /* @__PURE__ */ jsxRuntime.jsx(Link5__default.default, { href: l.href, className: FOOT_LINK, children: l.label }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: l.href, className: FOOT_LINK, children: l.label }) }, l.href)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Legal", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-x-5", children: links.map((l) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: l.href.startsWith("/") ? /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: l.href, className: FOOT_LINK, children: l.label }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: l.href, className: FOOT_LINK, children: l.label }) }, l.href)) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
       "\xA9 ",
       (/* @__PURE__ */ new Date()).getFullYear(),
@@ -866,6 +1170,25 @@ function SiteFooter({
     ] }) }) : null
   ] });
 }
+function OchkIoFooter({ columns = OCHK_IO_FOOTER, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SiteFooter,
+    {
+      columns,
+      family: true,
+      legal: true,
+      fineprint: "Open protocols on Bitcoin. Anyone can check the result.",
+      meta: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          "Open-source work on orangecheck is ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: "supported by OpenSats." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, { className: "-mx-3" })
+      ] }),
+      className
+    }
+  );
+}
 function IsoCheck({ size = 360, settle = false, shadow = true, tilt = false, title, className }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
@@ -951,12 +1274,12 @@ function SignInFrame({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col px-4 pb-8 pt-5 sm:px-8 lg:px-14 lg:pt-8", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Link5__default.default, { href: home, className: "w-fit rounded-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Link__default.default, { href: home, className: "w-fit rounded-lg", children: [
               brand ?? /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 28 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " home" })
             ] }),
             back === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-              Link5__default.default,
+              Link__default.default,
               {
                 href: home,
                 className: "text-[0.9375rem] text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
@@ -1022,21 +1345,10 @@ react.forwardRef(function Separator3({ className, orientation = "horizontal", de
     }
   );
 });
-function sharedContext(name, initial) {
-  const key = /* @__PURE__ */ Symbol.for(`@orangecheck/app-design/${name}`);
-  const store = globalThis;
-  return store[key] ?? (store[key] = react.createContext(initial));
-}
-
-// src/lib/density.ts
 var DensityContext = sharedContext("density", "comfortable");
 function DensityProvider({ density, children }) {
   return react.createElement(DensityContext.Provider, { value: density }, children);
 }
-var ShellContext = sharedContext("shell-place", {});
-function useShellPlace() {
-  return react.useContext(ShellContext);
-}
 var buttonVariants = classVarianceAuthority.cva(
   [
     "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium",
@@ -1168,6 +1480,7 @@ function OnThisPage({
     ] })
   );
 }
+var InDocsContext = sharedContext("in-docs", false);
 var STATUS_WORDS = /* @__PURE__ */ new Set(["live", "testing", "not-yet", "paused", "good", "caution", "refused"]);
 var pathOf = (href) => href.split(/[?#]/)[0].replace(/(.)\/$/, "$1");
 function DocsNav({
@@ -1223,394 +1536,131 @@ function DocsNav({
                 className: cn("size-3.5 shrink-0 text-oca-subtle transition-transform duration-200", open && "rotate-90")
               }
             )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { id: panel, hidden: !open, className: "mb-2 ml-2.5 mt-0.5 border-l border-border", children: section.items.map((item) => {
-        const on = pathOf(item.href) === here;
-        const badge = typeof item.badge === "string" && STATUS_WORDS.has(item.badge) ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: item.badge }) : item.badge ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "muted", children: item.badge }) : null;
-        return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Link5__default.default,
-          {
-            href: item.href,
-            ref: on ? activeRef : void 0,
-            onClick: onNavigate,
-            "aria-current": on ? "page" : void 0,
-            className: cn(
-              "-ml-px flex min-h-9 items-center gap-2 border-l-2 py-1.5 pl-3.5 pr-2 text-[0.875rem] leading-snug transition-colors",
-              on ? "border-foreground font-medium text-foreground" : "border-transparent text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: item.label }),
-              badge
-            ]
-          }
-        ) }, item.href);
-      }) })
-    ] }, section.label);
-  }) });
-}
-var DOCS_HEADER_NAV = OCHK_IO_NAV.map((n) => n.href === DOCS_HREF ? { ...n, active: true } : n);
-function DocsShell({
-  nav,
-  current,
-  header,
-  search,
-  actions,
-  breadcrumbs,
-  toc,
-  pager,
-  footer,
-  children
-}) {
-  const [menu, setMenu] = react.useState(false);
-  react.useEffect(() => setMenu(false), [current]);
-  const read = useHeadings("#docs-content", current);
-  const items = toc ?? read.items;
-  const activeId = toc ? void 0 : read.activeId;
-  const here = pathOf(current);
-  const place = react.useMemo(() => {
-    for (const s of nav) {
-      const it = s.items.find((i) => pathOf(i.href) === here);
-      if (it) return { section: s.label, page: it.label };
-    }
-    return null;
-  }, [nav, here]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-dvh flex-col bg-background", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SkipLink, {}),
-    header ?? /* @__PURE__ */ jsxRuntime.jsx(SiteHeader, { home: OCHK_IO, family: "docs", nav: DOCS_HEADER_NAV, search, actions }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-16 z-30 border-b border-border bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/90 md:top-[4.5rem] lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container flex h-12 items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: menu, onOpenChange: setMenu, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(SheetTrigger, { className: "-ml-2 inline-flex h-10 min-w-0 items-center gap-2 rounded-full px-2.5 text-[0.875rem] hover:bg-accent", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { "aria-hidden": true, className: "size-[1.125rem] shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Docs menu. " }),
-        place ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", 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-oca-subtle" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: place.page })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Docs" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "w-[min(88vw,22rem)] gap-0 p-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-5 py-4 pr-14", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "text-[1.0625rem] font-medium", children: "Docs" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto p-3", children: /* @__PURE__ */ jsxRuntime.jsx(DocsNav, { sections: nav, current, onNavigate: () => setMenu(false) }) })
-      ] })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:grid lg:grid-cols-[13.5rem_minmax(0,1fr)] lg:gap-x-10 xl:grid-cols-[13.5rem_minmax(0,1fr)_11rem]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-[4.5rem] hidden max-h-[calc(100dvh-4.5rem)] self-start overflow-y-auto overscroll-contain py-8 pr-1 lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(DocsNav, { sections: nav, current }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("main", { id: "main-content", className: "min-w-0 pb-16 pt-6 md:pt-8", children: [
-        breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 max-lg:hidden", children: breadcrumbs }) : null,
-        items.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group mb-8 rounded-2xl border border-border bg-card xl:hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-[0.9375rem] font-medium [&::-webkit-details-marker]:hidden", children: [
-            "On this page",
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(OnThisPage, { items, activeId, title: null, className: "px-4 pb-4" })
-        ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("article", { id: "docs-content", className: "max-w-[46rem]", children }),
-        pager ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-16 max-w-[46rem]", children: pager }) : null
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-[4.5rem] hidden max-h-[calc(100dvh-4.5rem)] self-start overflow-y-auto py-10 xl:block", children: items.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(OnThisPage, { items, activeId }) : null })
-    ] }) }),
-    footer ?? /* @__PURE__ */ jsxRuntime.jsx(SiteFooter, { columns: OCHK_IO_FOOTER, family: true, legal: true, signature: false })
-  ] });
-}
-function SideNav({ groups, onNavigate }) {
-  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(
-      Link5__default.default,
-      {
-        href: it.href,
-        onClick: onNavigate,
-        "aria-current": it.active ? "page" : void 0,
-        className: cn(
-          "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: [
-          it.icon,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: it.label }),
-          it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: it.badge }) : null
-        ]
-      },
-      it.href
-    ))
-  ] }, 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(
-          Link5__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
-        );
-      })
-    }
-  );
-}
-function TabBar({ items }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "nav",
-    {
-      "aria-label": "Pages",
-      "data-oca-tabbar": "",
-      className: "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md md:hidden",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "mx-auto grid h-14 max-w-[32rem] px-1.5",
-          style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
-          children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
-            Link5__default.default,
-            {
-              href: it.href,
-              "aria-current": it.active ? "page" : void 0,
-              className: cn(
-                "flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
-                  {
-                    className: cn(
-                      "relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
-                      "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
-                      it.active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
-                    ),
-                    children: [
-                      it.icon,
-                      it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute right-2.5 top-0.5 size-2 rounded-full bg-oca-orange ring-2 ring-background" }) : null
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate px-0.5", children: it.label }),
-                it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: it.badge }) : null
-              ]
-            },
-            it.href
-          ))
+          ]
         }
-      )
-    }
-  );
-}
-function tabsFor(groups) {
-  const items = groups.flatMap((g) => g.items);
-  return items.length >= 2 && items.length <= 5 && items.every((it) => it.icon) ? items : null;
-}
-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);
-  }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { id: panel, hidden: !open, className: "mb-2 ml-2.5 mt-0.5 border-l border-border", children: section.items.map((item) => {
+        const on = pathOf(item.href) === here;
+        const badge = typeof item.badge === "string" && STATUS_WORDS.has(item.badge) ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: item.badge }) : item.badge ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "muted", children: item.badge }) : null;
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Link__default.default,
+          {
+            href: item.href,
+            ref: on ? activeRef : void 0,
+            onClick: onNavigate,
+            "aria-current": on ? "page" : void 0,
+            className: cn(
+              "-ml-px flex min-h-9 items-center gap-2 border-l-2 py-1.5 pl-3.5 pr-2 text-[0.875rem] leading-snug transition-colors",
+              on ? "border-foreground font-medium text-foreground" : "border-transparent text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: item.label }),
+              badge
+            ]
+          }
+        ) }, item.href);
+      }) })
+    ] }, section.label);
+  }) });
 }
-function AppShell({
+var DOCS_HEADER_NAV = OCHK_IO_NAV.map((n) => n.href === DOCS_HREF ? { ...n, active: true } : n);
+function DocsShell({
   nav,
-  sections,
-  activeSection,
-  page: pageOverride,
-  persistent = [],
-  home = "/",
-  account,
-  banner,
+  current,
+  navCurrent,
+  header,
+  search,
+  actions,
+  breadcrumbs,
+  toc,
+  pager,
   footer,
-  children,
-  className
+  children
 }) {
-  const [open, setOpen] = react.useState(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 tabs = current ? null : tabsFor(groups);
-  const page = activeItem(groups);
-  const place = react.useMemo(
-    () => ({
-      section: current ? current.title ?? current.label : void 0,
-      page: pageOverride ?? page?.label
-    }),
-    [current, page?.label, pageOverride]
-  );
-  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",
-        tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]",
-        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: cn(
-                    "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
-                    // The tab bar holds every page; the sheet is left for a footer.
-                    tabs && !footer && "max-md:hidden"
-                  ),
-                  "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("div", { className: tabs ? "max-md:hidden" : void 0, children: /* @__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(Link5__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 })
-          ] }),
-          place.page ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]",
-                // The active tab already names the page.
-                tabs && !pageOverride && "max-md:hidden"
-              ),
-              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-[17rem] shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Link5__default.default, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }) }),
-            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("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
-          ] })
-        ] }),
-        tabs ? /* @__PURE__ */ jsxRuntime.jsx(TabBar, { items: tabs }) : null
-      ]
+  const [menu, setMenu] = react.useState(false);
+  react.useEffect(() => setMenu(false), [current]);
+  const read = useHeadings("#docs-content", current);
+  const items = toc ?? read.items;
+  const activeId = toc ? void 0 : read.activeId;
+  const marked = navCurrent ?? current;
+  const here = pathOf(marked);
+  const place = react.useMemo(() => {
+    for (const s of nav) {
+      const it = s.items.find((i) => pathOf(i.href) === here);
+      if (it) return { section: s.label, page: it.label };
     }
-  ) });
-}
-function AccountMenu({
-  name,
-  detail,
-  items,
-  nameFrom = "sm"
-}) {
-  const initial = name.trim().charAt(0).toUpperCase() || "\xB7";
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownMenuTrigger,
-      {
-        className: cn(
-          "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",
-          nameFrom === "lg" ? "lg:pr-3.5" : "sm:pr-3.5"
-        ),
-        "aria-label": `${name}, account menu`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              "data-initial": initial,
-              className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background before:content-[attr(data-initial)]"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("max-w-[10rem] truncate", nameFrom === "lg" ? "max-lg:hidden" : "max-sm:hidden"), children: name })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuLabel, { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.9375rem] font-medium text-foreground", children: name }),
-        detail ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-mono text-[0.75rem]", children: detail }) : null
+    return null;
+  }, [nav, here]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-dvh flex-col bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkipLink, {}),
+    header ?? /* @__PURE__ */ jsxRuntime.jsx(SiteHeader, { home: OCHK_IO, family: "docs", nav: DOCS_HEADER_NAV, search, actions }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-16 z-30 border-b border-border bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/90 md:top-[4.5rem] lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container flex h-12 items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: menu, onOpenChange: setMenu, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetTrigger, { className: "-ml-2 inline-flex h-10 min-w-0 items-center gap-2 rounded-full px-2.5 text-[0.875rem] hover:bg-accent", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { "aria-hidden": true, className: "size-[1.125rem] shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Docs menu. " }),
+        place ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", 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-oca-subtle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: place.page })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Docs" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-      items.map(
-        (it, i) => it === "separator" ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}, `sep-${i}`) : it.href ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, destructive: it.destructive, children: /* @__PURE__ */ jsxRuntime.jsxs(Link5__default.default, { href: it.href, children: [
-          it.icon,
-          it.label
-        ] }) }, it.label) : /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onSelect: it.onSelect, destructive: it.destructive, children: [
-          it.icon,
-          it.label
-        ] }, it.label)
-      )
-    ] })
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "w-[min(88vw,22rem)] gap-0 p-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-5 py-4 pr-14", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "text-[1.0625rem] font-medium", children: "Docs" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto p-3", children: /* @__PURE__ */ jsxRuntime.jsx(DocsNav, { sections: nav, current: marked, onNavigate: () => setMenu(false) }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:grid lg:grid-cols-[13.5rem_minmax(0,1fr)] lg:gap-x-10 xl:grid-cols-[13.5rem_minmax(0,1fr)_11rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-[4.5rem] hidden max-h-[calc(100dvh-4.5rem)] self-start overflow-y-auto overscroll-contain py-8 pr-1 lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(DocsNav, { sections: nav, current: marked }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("main", { id: "main-content", className: "min-w-0 pb-16 pt-6 md:pt-8", children: [
+        breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 max-lg:hidden", children: breadcrumbs }) : null,
+        items.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group mb-8 rounded-2xl border border-border bg-card xl:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-[0.9375rem] font-medium [&::-webkit-details-marker]:hidden", children: [
+            "On this page",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(OnThisPage, { items, activeId, title: null, className: "px-4 pb-4" })
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("article", { id: "docs-content", className: "max-w-[46rem]", children: /* @__PURE__ */ jsxRuntime.jsx(InDocsContext.Provider, { value: true, children }) }),
+        pager ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-16 max-w-[46rem]", children: pager }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-[4.5rem] hidden max-h-[calc(100dvh-4.5rem)] self-start overflow-y-auto py-10 xl:block", children: items.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(OnThisPage, { items, activeId }) : null })
+    ] }) }),
+    footer ?? /* @__PURE__ */ jsxRuntime.jsx(OchkIoFooter, {})
   ] });
 }
-function ThemeToggle({ className }) {
-  const { theme, setTheme } = nextThemes.useTheme();
-  const [mounted, setMounted] = react.useState(false);
-  react.useEffect(() => setMounted(true), []);
-  const current = mounted ? theme ?? "system" : "system";
-  const next = current === "light" ? "dark" : current === "dark" ? "system" : "light";
-  const Icon = current === "light" ? lucideReact.Sun : current === "dark" ? lucideReact.Moon : lucideReact.SunMoon;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => setTheme(next),
-      "aria-label": `Theme: ${current}. Switch to ${next}`,
-      title: `Theme: ${current}`,
-      className: cn(
-        "inline-flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-[1.125rem]" })
-    }
-  );
-}
 var OCHK_APP_ACCOUNT = "https://ochk.app/me/account";
+function onHistory(change) {
+  window.addEventListener("popstate", change);
+  return () => window.removeEventListener("popstate", change);
+}
+function herePath() {
+  const { href, origin, pathname, search } = window.location;
+  const path = pathname + search;
+  return new URL(path, href).origin === origin ? path : "/";
+}
+function routePath(router) {
+  if (!router || router.pathname.includes("[")) return null;
+  return router.basePath && router.pathname === "/" ? router.basePath : router.basePath + router.pathname;
+}
+function useSignInHref(path) {
+  const router$1 = router.useRouter();
+  const here = react.useSyncExternalStore(onHistory, herePath, () => routePath(router$1));
+  if (!path) return void 0;
+  return here ? `${path}?return_to=${encodeURIComponent(here)}` : path;
+}
 function SessionAccountView({
   state,
   name,
   detail,
   items = [],
   signInHref,
+  signInPath,
   signInLabel = "Sign in",
   accountHref = OCHK_APP_ACCOUNT,
   onSignOut,
   nameFrom = "lg"
 }) {
+  const inPlace = useSignInHref(signInPath);
   if (state === "in") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       AccountMenu,
@@ -1633,13 +1683,13 @@ function SessionAccountView({
   }
   return (
     // No box of its own: it sits exactly where the signed-in chip will. While checking it is only unseen.
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: state === "checking" ? "contents invisible" : "contents", "aria-hidden": state === "checking" || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, size: "sm", variant: "secondary", tabIndex: state === "checking" ? -1 : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: signInHref, children: signInLabel }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: state === "checking" ? "contents invisible" : "contents", "aria-hidden": state === "checking" || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, size: "sm", variant: "secondary", tabIndex: state === "checking" ? -1 : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: signInHref ?? inPlace ?? "https://ochk.io/signin", children: signInLabel }) }) })
   );
 }
 function ToolShell({
   protocol: protocol2,
   tools,
-  home = "/",
+  home,
   account,
   rail = false,
   railFooter,
@@ -1678,7 +1728,7 @@ function ToolShell({
           SiteHeader,
           {
             variant: "tool",
-            home,
+            home: home ?? p.pageHref,
             product: p.label,
             family: protocol2,
             nav: tools.map((t) => ({ href: t.href, label: t.label, active: t.active })),
@@ -1721,6 +1771,7 @@ exports.DocsNav = DocsNav;
 exports.DocsShell = DocsShell;
 exports.FamilyMenu = FamilyMenu;
 exports.OCHK_APP_ACCOUNT = OCHK_APP_ACCOUNT;
+exports.OchkIoFooter = OchkIoFooter;
 exports.SessionAccountView = SessionAccountView;
 exports.ShellContext = ShellContext;
 exports.SignInFrame = SignInFrame;
@@ -1731,5 +1782,6 @@ exports.SkipLink = SkipLink;
 exports.ThemeToggle = ThemeToggle;
 exports.ToolShell = ToolShell;
 exports.useShellPlace = useShellPlace;
+exports.useSignInHref = useSignInHref;
 //# sourceMappingURL=chrome.js.map
 //# sourceMappingURL=chrome.js.map