@orangecheck/app-design 1.6.2 → 1.8.0

package/README.md

@@ -35,13 +35,13 @@ family `OcThemeProvider` on the same page: it writes `data-oc-theme` and the sha
 |---|---|
 | `/brand` | `Mark`, `AppIcon`, `Lockup`, `IsoCheck`, `HalftoneSphere` |
 | `/primitives` | `Button`, `Badge`, `Card`, form controls (`Input size="sm"` for tools), `Dialog`, `Sheet`, `Popover`, `Tooltip`, `DropdownMenu`, `Tabs`, `Toaster`, `DensityProvider` |
-| `/components` | `Display`, `Eyebrow`, `Section`, `StepGrid`, `PackageCard`, `TruthTable`, `Sats`, `DataTable`, `Notice`, `ProgressSteps`, `ErrorPage`, the public page blocks (`SectionHeading`, `FactBlock`, `ProofStrip`, `Closing`, `LegalDocument` …), the protocol page blocks (`ProtocolGrid`, `AppGrid`, `ProtocolHero`, `SpecCard`, `VerifyBox`, `ComparisonTable`, `VerifyReport`, `SignMessage`), code (`CodeBlock`, `CodeTabs`, `InstallTabs`), the docs blocks (`Breadcrumbs`, `DocsPager`, `OnThisPage`, `Callout`, `Steps`, `LinkCard`, `ApiTable`, `Diagram`, `SearchDialog`) and the tool parts (`ArtifactView`, `DropZone`, `FormSection`, `StateBadge`, `AnchorStatus`, `BlockHeight`, `BlockCountdown`, `Meter`, `FilterChips`, `ToolGrid`) |
-| `/chrome` | `SiteHeader`, `SiteFooter`, `FamilyMenu`, `SkipLink`, `SiteBanner`, `SignInFrame`, `AppShell`, `AccountMenu`, `ThemeToggle`, `DocsShell`, `DocsNav`, `ToolShell`, `SessionAccountView` |
+| `/components` | `Display`, `Eyebrow`, `Section`, `StepGrid`, `PackageCard`, `TruthTable`, `Sats`, `DataTable`, `Notice`, `ProgressSteps`, `ErrorPage`, the public page blocks (`SectionHeading`, `FactBlock`, `ProofStrip`, `Closing`, `LegalDocument` …), the protocol page blocks (`ProtocolGrid`, `AppGrid`, `ProtocolHero`, `SpecCard`, `VerifyBox`, `ComparisonTable`, `VerifyReport`, `SignMessage`), code (`CodeBlock`, `CodeTabs`, `InstallTabs`), the docs blocks (`Breadcrumbs`, `DocsPager`, `OnThisPage`, `Callout`, `Steps`, `LinkCard`, `ApiTable`, `Diagram`, `SearchDialog`) and the tool parts (`ArtifactView`, `DropZone`, `FormSection`, `StateBadge`, `AnchorStatus`, `BlockHeight`, `BlockCountdown`, `Meter`, `FilterChips`, `ToolGrid`), and the parts signed-in pages repeat (`SectionTitle`, `ListCard`, `ListRow`, `ChoiceGroup`, `ChoiceCard`, `Avatar`) |
+| `/chrome` | `SiteHeader`, `SiteFooter`, `FamilyMenu`, `SkipLink`, `SiteBanner`, `SignInFrame`, `AppShell`, `PaneHeader`, `AccountMenu`, `ThemeToggle`, `DocsShell`, `DocsNav`, `ToolShell`, `ToolColumn`, `SessionAccountView`, `AccountCta` |
 | `/mdx` | `mdxComponents` and `createMdxComponents({ mermaid })`: markdown in the system's type |
 | `/code` | `rehypeCode` (highlights fences at build time), `highlight`, `highlightToHtml`; no React |
 | `/format` | `explorerUrl`, `shortenMiddle`, `formatBlockHeight`, `blocksToDuration`, `formatUtc`, `formatBytes`; no React |
 | `/session` | `SessionAccount`, read from `@orangecheck/auth-client` (an optional peer: install it to use this entry) |
-| `/family` | every public site as data (`FAMILY`, `PROTOCOLS`, `OCHK_IO_NAV`, `LEGAL_LINKS`); no React |
+| `/family` | every public site as data (`FAMILY`, `PROTOCOLS`, `OCHK_IO_NAV`, `LEGAL_LINKS`) and the account phrase (`GET_AN_ACCOUNT`, `SIGN_IN_LABEL`); no React |
 | `/tokens` | the palette as data, for OG images and charts |
 
 Docs written in MDX get highlighted code from the build and the system's type:

package/dist/chrome.d.mts

@@ -1,10 +1,10 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { e as FooterColumn, N as NavItem, d as FamilySlug, j as ProtocolSlug } from './index-DmfyPYe5.mjs';
+import { e as FooterColumn, N as NavItem, d as FamilySlug, k as ProtocolSlug } from './index-Bkl49Vgy.mjs';
 import { T as TocItem } from './hero-Dn37il-9.mjs';
-import { a as Status } from './status-badge-BJ9Sdsx8.mjs';
-export { A as AccountMenu, a as AccountMenuItem, b as AppShell, c as AppShellProps, O as OCHK_APP_ACCOUNT, S as SessionAccountView, d as SessionState, e as ShellNavGroup, f as ShellNavItem, g as ShellSection, T as ThemeToggle, h as ToolShell, i as ToolShellProps, u as useSignInHref } from './tool-shell-CQZNRUgH.mjs';
-import './tools-Bg1gi2HO.mjs';
+import { a as Status } from './status-badge-BBbCO6ZA.mjs';
+export { A as AccountMenu, a as AccountMenuItem, b as AppShell, c as AppShellProps, O as OCHK_APP_ACCOUNT, P as PaneHeader, S as SessionAccountView, d as SessionState, e as ShellNavGroup, f as ShellNavItem, g as ShellSection, T as ThemeToggle, h as ToolColumn, i as ToolShell, j as ToolShellProps, u as useSignInHref } from './tool-shell-Dxw5o2rH.mjs';
+import './tools-CKO8IseL.mjs';
 import './format.mjs';
 
 interface SiteHeaderProps {
@@ -20,6 +20,10 @@ interface SiteHeaderProps {
     menu?: ReactNode;
     className?: string;
 }
+declare function AccountCta({ href, className }: {
+    href?: string;
+    className?: string;
+}): react.JSX.Element;
 declare function SiteHeader({ home, brand, product, family, nav, search, actions, variant, navOnPhone, menu: menuExtra, className, }: SiteHeaderProps): react.JSX.Element;
 declare function SkipLink({ href, children }: {
     href?: string;
@@ -57,13 +61,14 @@ declare function FamilyMenu({ current, className }: {
     className?: string;
 }): react.JSX.Element;
 
-declare function SignInFrame({ title, lead, children, error, fineprint, brand, home, protocol, back, art, caption, className, }: {
+declare function SignInFrame({ title, lead, children, error, fineprint, brand, product, home, protocol, back, art, caption, className, }: {
     title?: ReactNode;
     lead?: ReactNode;
     children: ReactNode;
     error?: ReactNode;
     fineprint?: ReactNode;
     brand?: ReactNode;
+    product?: string;
     home?: string;
     protocol?: ProtocolSlug;
     back?: ReactNode;
@@ -110,4 +115,4 @@ interface ShellPlace {
 declare const ShellContext: react.Context<ShellPlace>;
 declare function useShellPlace(): ShellPlace;
 
-export { DOCS_HEADER_NAV, DocsNav, type DocsNavItem, type DocsNavSection, DocsShell, type DocsShellProps, FamilyMenu, FooterColumn, NavItem, OchkIoFooter, ShellContext, type ShellPlace, SignInFrame, SiteBanner, SiteFooter, type SiteFooterProps, SiteHeader, type SiteHeaderProps, SkipLink, useShellPlace };
+export { AccountCta, DOCS_HEADER_NAV, DocsNav, type DocsNavItem, type DocsNavSection, DocsShell, type DocsShellProps, FamilyMenu, FooterColumn, NavItem, OchkIoFooter, ShellContext, type ShellPlace, SignInFrame, SiteBanner, SiteFooter, type SiteFooterProps, SiteHeader, type SiteHeaderProps, SkipLink, useShellPlace };

package/dist/chrome.d.ts

@@ -1,10 +1,10 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { e as FooterColumn, N as NavItem, d as FamilySlug, j as ProtocolSlug } from './index-DmfyPYe5.js';
+import { e as FooterColumn, N as NavItem, d as FamilySlug, k as ProtocolSlug } from './index-Bkl49Vgy.js';
 import { T as TocItem } from './hero-Dn37il-9.js';
-import { a as Status } from './status-badge-Bt8x3RhO.js';
-export { A as AccountMenu, a as AccountMenuItem, b as AppShell, c as AppShellProps, O as OCHK_APP_ACCOUNT, S as SessionAccountView, d as SessionState, e as ShellNavGroup, f as ShellNavItem, g as ShellSection, T as ThemeToggle, h as ToolShell, i as ToolShellProps, u as useSignInHref } from './tool-shell-CRmceGrV.js';
-import './tools-Bw7RhO92.js';
+import { a as Status } from './status-badge-CHHxtFkP.js';
+export { A as AccountMenu, a as AccountMenuItem, b as AppShell, c as AppShellProps, O as OCHK_APP_ACCOUNT, P as PaneHeader, S as SessionAccountView, d as SessionState, e as ShellNavGroup, f as ShellNavItem, g as ShellSection, T as ThemeToggle, h as ToolColumn, i as ToolShell, j as ToolShellProps, u as useSignInHref } from './tool-shell-Cg51cRHJ.js';
+import './tools-CzjFPng4.js';
 import './format.js';
 
 interface SiteHeaderProps {
@@ -20,6 +20,10 @@ interface SiteHeaderProps {
     menu?: ReactNode;
     className?: string;
 }
+declare function AccountCta({ href, className }: {
+    href?: string;
+    className?: string;
+}): react.JSX.Element;
 declare function SiteHeader({ home, brand, product, family, nav, search, actions, variant, navOnPhone, menu: menuExtra, className, }: SiteHeaderProps): react.JSX.Element;
 declare function SkipLink({ href, children }: {
     href?: string;
@@ -57,13 +61,14 @@ declare function FamilyMenu({ current, className }: {
     className?: string;
 }): react.JSX.Element;
 
-declare function SignInFrame({ title, lead, children, error, fineprint, brand, home, protocol, back, art, caption, className, }: {
+declare function SignInFrame({ title, lead, children, error, fineprint, brand, product, home, protocol, back, art, caption, className, }: {
     title?: ReactNode;
     lead?: ReactNode;
     children: ReactNode;
     error?: ReactNode;
     fineprint?: ReactNode;
     brand?: ReactNode;
+    product?: string;
     home?: string;
     protocol?: ProtocolSlug;
     back?: ReactNode;
@@ -110,4 +115,4 @@ interface ShellPlace {
 declare const ShellContext: react.Context<ShellPlace>;
 declare function useShellPlace(): ShellPlace;
 
-export { DOCS_HEADER_NAV, DocsNav, type DocsNavItem, type DocsNavSection, DocsShell, type DocsShellProps, FamilyMenu, FooterColumn, NavItem, OchkIoFooter, ShellContext, type ShellPlace, SignInFrame, SiteBanner, SiteFooter, type SiteFooterProps, SiteHeader, type SiteHeaderProps, SkipLink, useShellPlace };
+export { AccountCta, DOCS_HEADER_NAV, DocsNav, type DocsNavItem, type DocsNavSection, DocsShell, type DocsShellProps, FamilyMenu, FooterColumn, NavItem, OchkIoFooter, ShellContext, type ShellPlace, SignInFrame, SiteBanner, SiteFooter, type SiteFooterProps, SiteHeader, type SiteHeaderProps, SkipLink, useShellPlace };

package/dist/chrome.js

@@ -6,15 +6,15 @@ var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var SeparatorPrimitive = require('@radix-ui/react-separator');
+var nextThemes = require('next-themes');
+require('sonner');
 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 router = require('next/compat/router');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -38,11 +38,11 @@ function _interopNamespace(e) {
 }
 
 var Link__default = /*#__PURE__*/_interopDefault(Link);
+var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
-var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 
 var merge = tailwindMerge.extendTailwindMerge({
   extend: {
@@ -137,6 +137,9 @@ function Lockup({ name = "orangecheck", size = 28, className }) {
 // src/family/index.ts
 var OCHK_IO = "https://ochk.io";
 var DOCS_HREF = `${OCHK_IO}/docs`;
+var OCHK_APP = "https://ochk.app";
+var GET_AN_ACCOUNT = { href: OCHK_APP, label: "Get an account" };
+var SIGN_IN_LABEL = "Sign in";
 function protocol(slug, verb, line, kinds) {
   return {
     slug,
@@ -173,7 +176,7 @@ var FAMILY = [
   {
     slug: "me",
     label: "ochk.app",
-    href: "https://ochk.app",
+    href: OCHK_APP,
     group: "orangecheck",
     line: "One account, with Bitcoin behind it.",
     status: "testing"
@@ -282,6 +285,93 @@ var OCHK_IO_FOOTER = [
     ]
   }
 ];
+function Spinner({ className, label }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+react.forwardRef(function Separator2({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SeparatorPrimitive__namespace.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var buttonVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium",
+    "transition-[background-color,border-color,color,box-shadow,transform] duration-150",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "active:translate-y-px disabled:pointer-events-none",
+    // Disabled 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 = react.forwardRef(function Button2({ className, variant, size, asChild = false, loading = false, disabled, children, type, ...props }, ref) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "size-[1.1em]" }) : null,
+        children
+      ] })
+    }
+  );
+});
 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";
 react.forwardRef(function DialogContent2({ className, children, hideClose, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
@@ -417,7 +507,8 @@ var DropdownMenuItem = react.forwardRef(function DropdownMenuItem2({ className,
     {
       ref,
       className: cn(
-        "flex h-10 cursor-default select-none items-center gap-2.5 rounded-xl px-3 text-[0.9375rem] outline-none",
+        // A thumb's 44px on a phone.
+        "flex h-10 cursor-default select-none items-center gap-2.5 rounded-xl px-3 text-[0.9375rem] outline-none max-md:h-11",
         "data-[highlighted]:bg-accent data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:text-muted-foreground",
         destructive && "text-destructive [&_svg]:text-destructive",
         className
@@ -445,7 +536,8 @@ function sharedContext(name, initial) {
   return store[key] ?? (store[key] = react.createContext(initial));
 }
 
-// src/lib/shell-context.ts
+// src/lib/column.ts
+var InColumnContext = sharedContext("in-column", false);
 var ShellContext = sharedContext("shell-place", {});
 function useShellPlace() {
   return react.useContext(ShellContext);
@@ -857,7 +949,7 @@ function SidebarShell({
           /* @__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 }) })
+            /* @__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: /* @__PURE__ */ jsxRuntime.jsx(InColumnContext.Provider, { value: true, children }) }) })
           ] })
         ] }),
         tabs ? /* @__PURE__ */ jsxRuntime.jsx(TabBar, { items: tabs }) : null
@@ -923,6 +1015,9 @@ function RailShell({ nav = [], persistent = [], page: pageOverride, header, acco
     tabs ? /* @__PURE__ */ jsxRuntime.jsx(TabBar, { items: tabs }) : null
   ] }) }) });
 }
+function PaneHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: cn("flex h-14 shrink-0 items-center gap-3 border-b border-border px-4 md:px-5", className), children });
+}
 function AccountMenu({
   name,
   detail,
@@ -1052,6 +1147,18 @@ function NavDropdown({ item }) {
     ] })
   ] });
 }
+function AccountCta({ href = GET_AN_ACCOUNT.href, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, size: "sm", className, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, children: GET_AN_ACCOUNT.label }) });
+}
+function ProductLockup({ size, product }) {
+  return /* @__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
+  ] });
+}
 function SiteHeader({
   home = "/",
   brand,
@@ -1071,13 +1178,7 @@ function SiteHeader({
   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 brandNode = brand ?? /* @__PURE__ */ jsxRuntime.jsx(ProductLockup, { size, product });
   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.
@@ -1207,7 +1308,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(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.jsx("nav", { "aria-label": "Legal", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-x-5", children: links.map((l, i) => /* @__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 }) }, `${i}:${l.label}`)) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
       "\xA9 ",
       (/* @__PURE__ */ new Date()).getFullYear(),
@@ -1227,16 +1328,26 @@ function SiteFooter({
 }) {
   const legalLinks = legal === true ? LEGAL_LINKS : legal || null;
   if (compact) {
-    return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("border-t border-border bg-background text-[0.875rem] text-muted-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oca-container flex flex-col gap-x-8 gap-y-3 py-5 lg:flex-row lg:items-center lg:justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: OCHK_IO, className: "rounded-lg text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 22 }) }),
-        family ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Protocols", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-x-4", children: PROTOCOLS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: p.pageHref, className: FOOT_LINK, children: p.label }) }, p.slug)) }) }) : null
-      ] }),
-      legalLinks || meta ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
-        legalLinks ? /* @__PURE__ */ jsxRuntime.jsx(LegalRow, { links: legalLinks }) : null,
-        meta
-      ] }) : null
-    ] }) });
+    return (
+      // The tools' column (ToolColumn): the lockup lines up with the page's title.
+      /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("border-t border-border bg-background px-4 text-[0.875rem] text-muted-foreground md:px-8", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-[72rem] flex-col gap-x-8 gap-y-3 py-5 lg:flex-row lg:items-center lg:justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: OCHK_IO,
+              className: "relative rounded-lg text-foreground before:absolute before:inset-x-0 before:top-1/2 before:h-11 before:-translate-y-1/2",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 22 })
+            }
+          ),
+          family ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Protocols", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-x-4", children: PROTOCOLS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: p.pageHref, className: FOOT_LINK, children: p.label }) }, p.slug)) }) }) : null
+        ] }),
+        legalLinks || meta ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
+          legalLinks ? /* @__PURE__ */ jsxRuntime.jsx(LegalRow, { links: legalLinks }) : null,
+          meta
+        ] }) : null
+      ] }) })
+    );
   }
   const cols = [
     ...columns,
@@ -1271,17 +1382,17 @@ function SiteFooter({
                 className: cn("flex min-w-0 flex-col gap-1", spans && "col-span-2 md:col-span-1"),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[0.875rem] font-medium", children: col.heading }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-1", spans && "grid grid-cols-2 gap-x-6 md:flex md:flex-col"), children: col.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-1", spans && "grid grid-cols-2 gap-x-6 md:flex md:flex-col"), children: col.links.map((l, j) => /* @__PURE__ */ jsxRuntime.jsx(
                     NavLink,
                     {
                       item: l,
                       className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
                     },
-                    l.href
+                    `${j}:${l.label}`
                   )) })
                 ]
               },
-              col.heading
+              `${i}:${col.heading}`
             );
           })
         ]
@@ -1381,12 +1492,13 @@ function IsoCheck({ size = 360, settle = false, shadow = true, tilt = false, tit
   );
 }
 function SignInFrame({
-  title = "Sign in",
+  title = SIGN_IN_LABEL,
   lead,
   children,
   error,
   fineprint,
   brand,
+  product,
   home,
   protocol: protocol2,
   back,
@@ -1404,7 +1516,7 @@ function SignInFrame({
         /* @__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(Link__default.default, { href: homeHref, className: "w-fit rounded-lg", children: [
-              brand ?? /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 28 }),
+              brand ?? /* @__PURE__ */ jsxRuntime.jsx(ProductLockup, { size: 28, product: product ?? (protocol2 ? protocolSite(protocol2).label : void 0) }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " home" })
             ] }),
             back === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1441,97 +1553,10 @@ function SignInFrame({
     }
   );
 }
-function Spinner({ className, label }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2.5" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
-      ]
-    }
-  );
-}
-react.forwardRef(function Separator3({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SeparatorPrimitive__namespace.Root,
-    {
-      ref,
-      decorative,
-      orientation,
-      className: cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className
-      ),
-      ...props
-    }
-  );
-});
 var DensityContext = sharedContext("density", "comfortable");
 function DensityProvider({ density, children }) {
   return react.createElement(DensityContext.Provider, { value: density }, children);
 }
-var buttonVariants = classVarianceAuthority.cva(
-  [
-    "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium",
-    "transition-[background-color,border-color,color,box-shadow,transform] duration-150",
-    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    "active:translate-y-px disabled:pointer-events-none",
-    // Disabled 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 = react.forwardRef(function Button2({ className, variant, size, asChild = false, loading = false, disabled, children, type, ...props }, ref) {
-  const Comp = asChild ? reactSlot.Slot : "button";
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "size-[1.1em]" }) : null,
-        children
-      ] })
-    }
-  );
-});
 function useActiveHeading(ids) {
   const [active, setActive] = react.useState(ids[0]);
   const key = ids.join("|");
@@ -1785,7 +1810,7 @@ function SessionAccountView({
   items = [],
   signInHref,
   signInPath,
-  signInLabel = "Sign in",
+  signInLabel = SIGN_IN_LABEL,
   accountHref = OCHK_APP_ACCOUNT,
   onSignOut,
   nameFrom = "lg"
@@ -1816,6 +1841,13 @@ function SessionAccountView({
     /* @__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 ToolColumn({
+  measure = "wide",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-4 pb-16 pt-8 md:px-8 md:pt-10", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-[72rem]", children: /* @__PURE__ */ jsxRuntime.jsx(InColumnContext.Provider, { value: true, children: measure === "narrow" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem]", children }) : children }) }) });
+}
 function ToolShell({
   protocol: protocol2,
   tools,
@@ -1824,6 +1856,7 @@ function ToolShell({
   rail = false,
   railFooter,
   variant = "tool",
+  measure = "wide",
   banner,
   footer,
   children
@@ -1881,14 +1914,7 @@ function ToolShell({
             /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups: [{ label: "Tools", items: tools.map(({ href, label, icon, active }) => ({ href, label, icon, active })) }] }),
             railFooter ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: /* @__PURE__ */ jsxRuntime.jsx(SiteHomeContext.Provider, { value: homeHref, children: app ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx("main", { id: "main-content", className: cn("min-w-0 flex-1", app && "flex min-h-0 flex-col"), children: /* @__PURE__ */ jsxRuntime.jsx(SiteHomeContext.Provider, { value: homeHref, children: app ? children : /* @__PURE__ */ jsxRuntime.jsx(ToolColumn, { measure, children }) }) })
         ] }),
         app || footer === false ? null : footer ?? /* @__PURE__ */ jsxRuntime.jsx(SiteFooter, { compact: true, family: true, legal: true }),
         tabs ? /* @__PURE__ */ jsxRuntime.jsx(TabBar, { items: tabs }) : null
@@ -1897,6 +1923,7 @@ function ToolShell({
   ) });
 }
 
+exports.AccountCta = AccountCta;
 exports.AccountMenu = AccountMenu;
 exports.AppShell = AppShell;
 exports.DOCS_HEADER_NAV = DOCS_HEADER_NAV;
@@ -1905,6 +1932,7 @@ exports.DocsShell = DocsShell;
 exports.FamilyMenu = FamilyMenu;
 exports.OCHK_APP_ACCOUNT = OCHK_APP_ACCOUNT;
 exports.OchkIoFooter = OchkIoFooter;
+exports.PaneHeader = PaneHeader;
 exports.SessionAccountView = SessionAccountView;
 exports.ShellContext = ShellContext;
 exports.SignInFrame = SignInFrame;
@@ -1913,6 +1941,7 @@ exports.SiteFooter = SiteFooter;
 exports.SiteHeader = SiteHeader;
 exports.SkipLink = SkipLink;
 exports.ThemeToggle = ThemeToggle;
+exports.ToolColumn = ToolColumn;
 exports.ToolShell = ToolShell;
 exports.useShellPlace = useShellPlace;
 exports.useSignInHref = useSignInHref;