@orangecheck/app-design 1.0.0 → 1.1.0

package/dist/chrome.mjs

@@ -1,6 +1,6 @@
-import { X, ChevronDown, Menu, ChevronRight, Sun, Moon, SunMoon } from 'lucide-react';
-import Link3 from 'next/link';
-import { forwardRef, createContext, useState, useContext, useMemo, useEffect, useId, useRef } from 'react';
+import { X, ChevronDown, Menu, ChevronRight, PanelLeft, Sun, Moon, SunMoon, CircleUser, LogOut, ArrowUpRight } from 'lucide-react';
+import Link5 from 'next/link';
+import { forwardRef, createContext, useState, useContext, useMemo, useEffect, useRef, useId, createElement } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -9,6 +9,9 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import 'sonner';
+import { Slot } from '@radix-ui/react-slot';
 import { useTheme } from 'next-themes';
 
 var merge = extendTailwindMerge({
@@ -213,7 +216,10 @@ var FAMILY_GROUPS = [
   { id: "app", label: "Apps" },
   { id: "public-good", label: "Public goods" }
 ];
-new Map(FAMILY.map((s) => [s.slug, s]));
+var BY_SLUG = new Map(FAMILY.map((s) => [s.slug, s]));
+function protocolSite(slug) {
+  return BY_SLUG.get(slug);
+}
 function familyByGroup() {
   return FAMILY_GROUPS.map((g) => ({ ...g, sites: FAMILY.filter((s) => s.group === g.id) }));
 }
@@ -224,7 +230,7 @@ var LEGAL_LINKS = [
   { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
   { href: `${OCHK_IO}/contact`, label: "Contact" }
 ];
-[
+var OCHK_IO_NAV = [
   {
     href: `${OCHK_IO}/protocols`,
     label: "Protocols",
@@ -235,6 +241,16 @@ var LEGAL_LINKS = [
   { href: `${OCHK_IO}/trust`, label: "Trust" },
   { href: `${OCHK_IO}/about`, label: "About" }
 ];
+var OCHK_IO_FOOTER = [
+  {
+    heading: "Company",
+    links: [
+      { href: `${OCHK_IO}/about`, label: "About" },
+      { href: `${OCHK_IO}/trust`, label: "Trust" },
+      { href: "https://github.com/orangecheck", label: "GitHub", external: true }
+    ]
+  }
+];
 var overlayClass = "oca-animate-fade fixed inset-0 z-50 bg-[rgb(10_10_10/0.38)] backdrop-blur-[2px] data-[state=closed]:opacity-0";
 forwardRef(function DialogContent2({ className, children, hideClose, ...props }, ref) {
   return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
@@ -515,16 +531,23 @@ function FamilyMenu({ current, className }) {
     )
   ] });
 }
-function NavLink({ item, className, onNavigate }) {
+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__ */ jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
   }
-  return /* @__PURE__ */ jsx(Link3, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
+  return /* @__PURE__ */ jsx(Link5, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
 }
 function NavRow({ item, onNavigate }) {
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -535,7 +558,7 @@ function NavRow({ item, onNavigate }) {
     "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__ */ jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: body }) : /* @__PURE__ */ jsx(Link3, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: body });
+  return item.external ? /* @__PURE__ */ jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: body }) : /* @__PURE__ */ jsx(Link5, { 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 }) {
@@ -577,13 +600,16 @@ function SiteHeader({
   search,
   actions,
   variant = "site",
+  navOnPhone = true,
+  menu: menuExtra,
   className
 }) {
   const [open, setOpen] = useState(false);
   const tool = variant === "tool";
   const size = tool ? 24 : 28;
   const current = typeof family === "string" ? family : void 0;
-  const menu = nav.length > 0 || Boolean(family);
+  const phoneNav = navOnPhone ? nav : [];
+  const menu = phoneNav.length > 0 || Boolean(family) || Boolean(menuExtra);
   const brandNode = brand ?? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", children: [
     /* @__PURE__ */ jsx(Lockup, { size }),
     product ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -591,7 +617,9 @@ function SiteHeader({
       /* @__PURE__ */ jsx("span", { className: "font-medium tracking-[-0.01em]", style: { fontSize: size * 0.56 }, children: product })
     ] }) : null
   ] });
-  const navigation = nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map((n) => n.children?.length ? /* @__PURE__ */ jsx(NavDropdown, { item: n }, n.href) : /* @__PURE__ */ jsx(NavLink, { item: n }, n.href)) }) : null;
+  const navigation = nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map(
+    (n) => n.children?.length ? /* @__PURE__ */ jsx(NavDropdown, { item: n }, n.href) : /* @__PURE__ */ jsx(NavLink, { item: n, line: tool }, n.href)
+  ) }) : null;
   return /* @__PURE__ */ jsx(
     "header",
     {
@@ -613,7 +641,7 @@ function SiteHeader({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center gap-1", tool ? "md:gap-1" : "justify-self-start"), children: [
-              /* @__PURE__ */ jsxs(Link3, { href: home, className: "-ml-1 min-w-0 rounded-lg p-1", children: [
+              /* @__PURE__ */ jsxs(Link5, { href: home, className: "-ml-1 min-w-0 rounded-lg p-1", children: [
                 brandNode,
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
               ] }),
@@ -635,7 +663,8 @@ function SiteHeader({
                 ),
                 /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "pt-16", children: [
                   /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
-                  nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: nav.map(
+                  menuExtra ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", (phoneNav.length > 0 || family) && "border-b border-border pb-3"), children: menuExtra }) : null,
+                  phoneNav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: phoneNav.map(
                     (n) => n.children?.length ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col py-2", children: [
                       /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: n.label }),
                       n.children.map((c) => /* @__PURE__ */ jsx(
@@ -657,7 +686,7 @@ function SiteHeader({
                       n.href
                     )
                   ) }) : null,
-                  family ? /* @__PURE__ */ jsxs("details", { className: cn("group", nav.length > 0 && "mt-2 border-t border-border pt-4"), children: [
+                  family ? /* @__PURE__ */ jsxs("details", { className: cn("group", phoneNav.length > 0 && "mt-2 border-t border-border pt-4"), children: [
                     /* @__PURE__ */ 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__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
@@ -888,12 +917,12 @@ function SignInFrame({
       children: [
         /* @__PURE__ */ jsxs("section", { className: "flex flex-col px-4 pb-8 pt-5 sm:px-8 lg:px-14 lg:pt-8", children: [
           /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs(Link3, { href: home, className: "w-fit rounded-lg", children: [
+            /* @__PURE__ */ jsxs(Link5, { href: home, className: "w-fit rounded-lg", children: [
               brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
             ] }),
             back === void 0 ? /* @__PURE__ */ jsx(
-              Link3,
+              Link5,
               {
                 href: home,
                 className: "text-[0.9375rem] text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
@@ -926,15 +955,335 @@ function SignInFrame({
     }
   );
 }
-var ShellContext = createContext({});
+function Spinner({ className, label }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      role: label ? "status" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn("size-4 animate-spin", className),
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+forwardRef(function Separator3({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      ...props
+    }
+  );
+});
+function sharedContext(name, initial) {
+  const key = /* @__PURE__ */ Symbol.for(`@orangecheck/app-design/${name}`);
+  const store = globalThis;
+  return store[key] ?? (store[key] = createContext(initial));
+}
+
+// src/lib/density.ts
+var DensityContext = sharedContext("density", "comfortable");
+function DensityProvider({ density, children }) {
+  return createElement(DensityContext.Provider, { value: density }, children);
+}
+var ShellContext = sharedContext("shell-place", {});
 function useShellPlace() {
   return useContext(ShellContext);
 }
+var buttonVariants = cva(
+  [
+    "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium",
+    "transition-[background-color,border-color,color,box-shadow,transform] duration-150",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "active:translate-y-px disabled:pointer-events-none",
+    // Disabled is one look for every variant: a quiet grey pill, never a
+    // faded black or orange slab that reads as broken.
+    "disabled:border disabled:border-border disabled:bg-muted disabled:text-oca-subtle disabled:shadow-none",
+    "[&_svg]:pointer-events-none [&_svg]:size-[1.1em] [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/85",
+        secondary: "border border-border bg-secondary text-secondary-foreground hover:border-oca-hairline-strong hover:bg-accent",
+        brand: "bg-brand text-brand-foreground hover:bg-oca-orange-deep",
+        ghost: "text-foreground hover:bg-accent",
+        danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        link: "h-auto rounded-none px-0 text-foreground underline decoration-foreground/35 underline-offset-4 hover:decoration-foreground",
+        onInk: "bg-white text-oca-ink hover:bg-white/90",
+        onInkOutline: "border border-white/20 text-white hover:bg-white/10"
+      },
+      size: {
+        sm: "h-9 px-4 text-sm",
+        md: "h-11 px-5 text-[0.9375rem]",
+        lg: "h-14 px-7 text-[1.0625rem]",
+        icon: "size-10",
+        "icon-sm": "size-8"
+      }
+    },
+    compoundVariants: [{ variant: "link", className: "h-auto px-0" }],
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var Button = forwardRef(function Button2({ className, variant, size, asChild = false, loading = false, disabled, children, type, ...props }, ref) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-ui": "button",
+      className: cn(buttonVariants({ variant, size }), className),
+      disabled: asChild ? void 0 : disabled || loading,
+      "aria-busy": loading || void 0,
+      type: asChild ? void 0 : type ?? "button",
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-[1.1em]" }) : null,
+        children
+      ] })
+    }
+  );
+});
+function useActiveHeading(ids) {
+  const [active, setActive] = useState(ids[0]);
+  const key = ids.join("|");
+  useEffect(() => {
+    setActive(key.split("|")[0] || void 0);
+    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 useHeadings(selector = "#docs-content", key) {
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    const read = () => {
+      const root = document.querySelector(selector);
+      if (!root) return setItems([]);
+      setItems(
+        Array.from(root.querySelectorAll("h2[id], h3[id]")).map((h) => ({
+          id: h.id,
+          // The anchor link's "#" is not part of the name.
+          label: (h.querySelector("[data-heading-text]") ?? h).textContent?.trim() ?? "",
+          level: h.tagName === "H3" ? 3 : 2
+        }))
+      );
+    };
+    const raf = requestAnimationFrame(read);
+    const t = setTimeout(read, 80);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(t);
+    };
+  }, [selector, key]);
+  const activeId = useActiveHeading(items.map((i) => i.id));
+  return { items, activeId };
+}
+function OnThisPage({
+  items,
+  activeId,
+  title = "On this page",
+  onNavigate,
+  className
+}) {
+  const id = useId();
+  if (items.length === 0) return null;
+  return (
+    // With no visible title (a folded list under its own summary) the name is still "On this page".
+    /* @__PURE__ */ jsxs("nav", { "aria-labelledby": title ? id : void 0, "aria-label": title ? void 0 : "On this page", className, children: [
+      title ? /* @__PURE__ */ jsx("p", { id, className: "mb-3 text-[0.875rem] font-medium", children: title }) : null,
+      /* @__PURE__ */ jsx("ul", { children: items.map((t) => {
+        const on = t.id === activeId;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `#${t.id}`,
+            onClick: onNavigate,
+            "aria-current": on ? "location" : void 0,
+            className: cn(
+              "block border-l py-1.5 text-[0.875rem] leading-snug transition-colors",
+              t.level === 3 ? "pl-7" : "pl-4",
+              on ? "border-foreground text-foreground" : "border-border text-muted-foreground hover:text-foreground"
+            ),
+            children: t.label
+          }
+        ) }, t.id);
+      }) })
+    ] })
+  );
+}
+var STATUS_WORDS = /* @__PURE__ */ new Set(["live", "testing", "not-yet", "paused", "good", "caution", "refused"]);
+var pathOf = (href) => href.split(/[?#]/)[0].replace(/(.)\/$/, "$1");
+function DocsNav({
+  sections,
+  current,
+  onNavigate,
+  className
+}) {
+  const here = pathOf(current);
+  const activeSection = useMemo(
+    () => sections.findIndex((s) => s.items.some((i) => pathOf(i.href) === here)),
+    [sections, here]
+  );
+  const [peeked, setPeeked] = useState(() => /* @__PURE__ */ new Set());
+  useEffect(() => setPeeked(/* @__PURE__ */ new Set()), [activeSection]);
+  const activeRef = useRef(null);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => activeRef.current?.scrollIntoView({ block: "nearest" }));
+    return () => cancelAnimationFrame(id);
+  }, [here]);
+  const base = useId();
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Docs", className: cn("flex flex-col gap-0.5", className), children: sections.map((section, si) => {
+    const isActive = si === activeSection;
+    const open = isActive || peeked.has(si);
+    const panel = `${base}-s${si}`;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": open,
+          "aria-controls": panel,
+          onClick: () => {
+            if (isActive) return;
+            setPeeked((p) => {
+              const n = new Set(p);
+              if (n.has(si)) n.delete(si);
+              else n.add(si);
+              return n;
+            });
+          },
+          className: cn(
+            "flex min-h-9 w-full items-center justify-between gap-2 rounded-lg px-2.5 py-1.5 text-left text-[0.875rem] transition-colors",
+            isActive ? "font-medium text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground",
+            isActive && "cursor-default"
+          ),
+          children: [
+            section.label,
+            /* @__PURE__ */ jsx(
+              ChevronRight,
+              {
+                "aria-hidden": true,
+                className: cn("size-3.5 shrink-0 text-oca-subtle transition-transform duration-200", open && "rotate-90")
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ 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__ */ jsx(StatusBadge, { status: item.badge }) : item.badge ? /* @__PURE__ */ jsx(Badge, { tone: "muted", children: item.badge }) : null;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          Link5,
+          {
+            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__ */ 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] = useState(false);
+  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 = 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__ */ jsxs("div", { className: "flex min-h-dvh flex-col bg-background", children: [
+    /* @__PURE__ */ jsx(SkipLink, {}),
+    header ?? /* @__PURE__ */ jsx(SiteHeader, { home: OCHK_IO, family: "docs", nav: DOCS_HEADER_NAV, search, actions }),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "oca-container flex h-12 items-center gap-2", children: /* @__PURE__ */ jsxs(Sheet, { open: menu, onOpenChange: setMenu, children: [
+      /* @__PURE__ */ 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__ */ jsx(PanelLeft, { "aria-hidden": true, className: "size-[1.125rem] shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Docs menu. " }),
+        place ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
+          /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-oca-subtle" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: place.page })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Docs" })
+      ] }),
+      /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-[min(88vw,22rem)] gap-0 p-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-border px-5 py-4 pr-14", children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-[1.0625rem] font-medium", children: "Docs" }) }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-y-auto p-3", children: /* @__PURE__ */ jsx(DocsNav, { sections: nav, current, onNavigate: () => setMenu(false) }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "oca-container flex-1", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(DocsNav, { sections: nav, current }) }),
+      /* @__PURE__ */ jsxs("main", { id: "main-content", className: "min-w-0 pb-16 pt-6 md:pt-8", children: [
+        breadcrumbs ? /* @__PURE__ */ jsx("div", { className: "mb-6 max-lg:hidden", children: breadcrumbs }) : null,
+        items.length > 1 ? /* @__PURE__ */ jsxs("details", { className: "group mb-8 rounded-2xl border border-border bg-card xl:hidden", children: [
+          /* @__PURE__ */ 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__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })
+          ] }),
+          /* @__PURE__ */ jsx(OnThisPage, { items, activeId, title: null, className: "px-4 pb-4" })
+        ] }) : null,
+        /* @__PURE__ */ jsx("article", { id: "docs-content", className: "max-w-[46rem]", children }),
+        pager ? /* @__PURE__ */ jsx("div", { className: "mt-16 max-w-[46rem]", children: pager }) : null
+      ] }),
+      /* @__PURE__ */ 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__ */ jsx(OnThisPage, { items, activeId }) : null })
+    ] }) }),
+    footer ?? /* @__PURE__ */ jsx(SiteFooter, { columns: OCHK_IO_FOOTER, family: true, legal: true, signature: false })
+  ] });
+}
 function SideNav({ groups, onNavigate }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Pages", className: "flex flex-col gap-5", children: groups.map((g, gi) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
     g.label ? /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 text-[0.8125rem] text-muted-foreground", children: g.label }) : null,
     g.items.map((it) => /* @__PURE__ */ jsxs(
-      Link3,
+      Link5,
       {
         href: it.href,
         onClick: onNavigate,
@@ -969,7 +1318,7 @@ function SectionSwitch({
       children: sections.map((sec) => {
         const on = sec.id === current.id;
         return /* @__PURE__ */ jsx(
-          Link3,
+          Link5,
           {
             href: sec.href,
             onClick: onNavigate,
@@ -999,7 +1348,7 @@ function TabBar({ items }) {
           className: "mx-auto grid h-14 max-w-[32rem] px-1.5",
           style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
           children: items.map((it) => /* @__PURE__ */ jsxs(
-            Link3,
+            Link5,
             {
               href: it.href,
               "aria-current": it.active ? "page" : void 0,
@@ -1108,7 +1457,7 @@ function AppShell({
                 footer ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsx(Link3, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsx(Lockup, { size: 22 }) }),
+            /* @__PURE__ */ jsx(Link5, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsx(Lockup, { size: 22 }) }),
             /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: account })
           ] }),
           place.page ? /* @__PURE__ */ jsxs(
@@ -1131,7 +1480,7 @@ function AppShell({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
           /* @__PURE__ */ 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__ */ jsx(Link3, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsx(Lockup, { size: 26 }) }),
+            /* @__PURE__ */ jsx(Link5, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsx(Lockup, { size: 26 }) }),
             switcher,
             /* @__PURE__ */ jsx(SideNav, { groups }),
             /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
@@ -1162,9 +1511,16 @@ function AccountMenu({
           "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": `Account: ${name}`,
+        "aria-label": `${name}, account menu`,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background", children: initial }),
+          /* @__PURE__ */ 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__ */ jsx("span", { className: cn("max-w-[10rem] truncate", nameFrom === "lg" ? "max-lg:hidden" : "max-sm:hidden"), children: name })
         ]
       }
@@ -1176,7 +1532,7 @@ function AccountMenu({
       ] }),
       /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
       items.map(
-        (it, i) => it === "separator" ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, `sep-${i}`) : it.href ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, destructive: it.destructive, children: /* @__PURE__ */ jsxs(Link3, { href: it.href, children: [
+        (it, i) => it === "separator" ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, `sep-${i}`) : it.href ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, destructive: it.destructive, children: /* @__PURE__ */ jsxs(Link5, { href: it.href, children: [
           it.icon,
           it.label
         ] }) }, it.label) : /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: it.onSelect, destructive: it.destructive, children: [
@@ -1209,7 +1565,121 @@ function ThemeToggle({ className }) {
     }
   );
 }
+var OCHK_APP_ACCOUNT = "https://ochk.app/me/account";
+function SessionAccountView({
+  state,
+  name,
+  detail,
+  items = [],
+  signInHref,
+  signInLabel = "Sign in",
+  accountHref = OCHK_APP_ACCOUNT,
+  onSignOut,
+  nameFrom = "lg"
+}) {
+  if (state === "in") {
+    return /* @__PURE__ */ jsx(
+      AccountMenu,
+      {
+        name: name || "Your account",
+        detail,
+        nameFrom,
+        items: [
+          ...items,
+          ...items.length > 0 ? ["separator"] : [],
+          { label: "Your account", href: accountHref, icon: /* @__PURE__ */ jsx(CircleUser, {}) },
+          "separator",
+          { label: "Sign out", onSelect: onSignOut, icon: /* @__PURE__ */ jsx(LogOut, {}) }
+        ]
+      }
+    );
+  }
+  if (state === "unknown") {
+    return /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", variant: "secondary", children: /* @__PURE__ */ jsx("a", { href: accountHref, children: "Your account" }) });
+  }
+  return (
+    // No box of its own: it sits exactly where the signed-in chip will. While checking it is only unseen.
+    /* @__PURE__ */ jsx("span", { className: state === "checking" ? "contents invisible" : "contents", "aria-hidden": state === "checking" || void 0, children: /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", variant: "secondary", tabIndex: state === "checking" ? -1 : void 0, children: /* @__PURE__ */ jsx("a", { href: signInHref, children: signInLabel }) }) })
+  );
+}
+function ToolShell({
+  protocol: protocol2,
+  tools,
+  home = "/",
+  account,
+  rail = false,
+  railFooter,
+  variant = "tool",
+  banner,
+  footer,
+  children
+}) {
+  const p = protocolSite(protocol2);
+  const app = variant === "app";
+  const tabs = app ? null : tabsFor([{ items: [...tools] }]);
+  const about = /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: p.pageHref,
+      className: "inline-flex items-center gap-1 rounded-full px-3 py-2 text-[0.9375rem] text-muted-foreground transition-colors hover:text-foreground",
+      children: [
+        "About ",
+        p.label,
+        /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(DensityProvider, { density: "compact", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col bg-background",
+        app ? "h-dvh overflow-hidden" : "min-h-dvh",
+        tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SkipLink, {}),
+        banner,
+        /* @__PURE__ */ jsx(
+          SiteHeader,
+          {
+            variant: "tool",
+            home,
+            product: p.label,
+            family: protocol2,
+            nav: tools.map((t) => ({ href: t.href, label: t.label, active: t.active })),
+            navOnPhone: !tabs,
+            menu: /* @__PURE__ */ jsx("div", { className: "[&>a]:px-3 [&>a]:py-3 [&>a]:text-[1.0625rem]", children: about }),
+            className: cn(rail && "lg:[&_nav[aria-label=Main]]:hidden"),
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "hidden lg:contents", children: about }),
+              p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status, className: "max-sm:hidden" }) : null,
+              /* @__PURE__ */ jsx(ThemeToggle, { className: "max-sm:hidden" }),
+              account
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex w-full", app ? "min-h-0 flex-1" : "max-w-[90rem] flex-1"), children: [
+          rail ? /* @__PURE__ */ jsxs("aside", { className: "sticky top-14 hidden h-[calc(100dvh-3.5rem)] w-60 shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
+            /* @__PURE__ */ jsx(SideNav, { groups: [{ label: "Tools", items: tools.map(({ href, label, icon, active }) => ({ href, label, icon, active })) }] }),
+            railFooter ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-0.5 px-3 text-[0.875rem] text-muted-foreground [&_a:hover]:text-foreground [&_a]:py-1.5 [&_a]:transition-colors", children: railFooter }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              id: "main-content",
+              className: cn("min-w-0 flex-1", app ? "flex min-h-0 flex-col" : "px-4 pb-16 pt-8 md:px-8 md:pt-10"),
+              children: app ? children : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children })
+            }
+          )
+        ] }),
+        app || footer === false ? null : footer ?? /* @__PURE__ */ jsx(SiteFooter, { compact: true, family: true, legal: true }),
+        tabs ? /* @__PURE__ */ jsx(TabBar, { items: tabs }) : null
+      ]
+    }
+  ) });
+}
 
-export { AccountMenu, AppShell, FamilyMenu, ShellContext, SignInFrame, SiteBanner, SiteFooter, SiteHeader, SkipLink, ThemeToggle, useShellPlace };
+export { AccountMenu, AppShell, DOCS_HEADER_NAV, DocsNav, DocsShell, FamilyMenu, OCHK_APP_ACCOUNT, SessionAccountView, ShellContext, SignInFrame, SiteBanner, SiteFooter, SiteHeader, SkipLink, ThemeToggle, ToolShell, useShellPlace };
 //# sourceMappingURL=chrome.mjs.map
 //# sourceMappingURL=chrome.mjs.map