@orangecheck/app-design 1.6.1 → 1.7.0

package/dist/chrome.mjs

@@ -3,16 +3,16 @@ import Link from 'next/link';
 import { forwardRef, createContext, useContext, useState, useMemo, useEffect, useRef, useId, useSyncExternalStore, createElement } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { useTheme } from 'next-themes';
+import 'sonner';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 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 { useTheme } from 'next-themes';
-import { cva } from 'class-variance-authority';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import 'sonner';
-import { Slot } from '@radix-ui/react-slot';
 import { useRouter } from 'next/compat/router';
 
 var merge = extendTailwindMerge({
@@ -108,6 +108,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,
@@ -144,7 +147,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"
@@ -253,6 +256,93 @@ var OCHK_IO_FOOTER = [
     ]
   }
 ];
+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 Separator2({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var buttonVariants = cva(
+  [
+    "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium",
+    "transition-[background-color,border-color,color,box-shadow,transform] duration-150",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "active:translate-y-px disabled:pointer-events-none",
+    // Disabled is one look for every variant: a quiet grey pill, never a
+    // faded black or orange slab that reads as broken.
+    "disabled:border disabled:border-border disabled:bg-muted disabled:text-oca-subtle disabled:shadow-none",
+    "[&_svg]:pointer-events-none [&_svg]:size-[1.1em] [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/85",
+        secondary: "border border-border bg-secondary text-secondary-foreground hover:border-oca-hairline-strong hover:bg-accent",
+        brand: "bg-brand text-brand-foreground hover:bg-oca-orange-deep",
+        ghost: "text-foreground hover:bg-accent",
+        danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        link: "h-auto rounded-none px-0 text-foreground underline decoration-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
+      ] })
+    }
+  );
+});
 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: [
@@ -416,7 +506,8 @@ function sharedContext(name, initial) {
   return store[key] ?? (store[key] = 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 useContext(ShellContext);
@@ -828,7 +919,7 @@ function SidebarShell({
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
             /* @__PURE__ */ jsx("div", { className: "hidden h-[4.5rem] items-center justify-end gap-3 px-8 lg:flex", children: account }),
             banner ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-2 pt-4 md:px-8 lg:pt-0", children: banner }) : null,
-            /* @__PURE__ */ jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
+            /* @__PURE__ */ jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children: /* @__PURE__ */ jsx(InColumnContext.Provider, { value: true, children }) }) })
           ] })
         ] }),
         tabs ? /* @__PURE__ */ jsx(TabBar, { items: tabs }) : null
@@ -871,7 +962,7 @@ function RailShell({ nav = [], persistent = [], page: pageOverride, header, acco
   const tabs = tabsFor([{ items: [...main, ...foot] }]);
   const active = activeItem([...nav, ...persistent]);
   const place = useMemo(() => ({ page: pageOverride ?? active?.label }), [pageOverride, active?.label]);
-  return /* @__PURE__ */ jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-dvh flex-col overflow-hidden bg-background", className), children: [
+  return /* @__PURE__ */ jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs("div", { className: cn("relative flex h-dvh flex-col overflow-clip bg-background", className), children: [
     header,
     banner,
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
@@ -1023,6 +1114,18 @@ function NavDropdown({ item }) {
     ] })
   ] });
 }
+function AccountCta({ href = GET_AN_ACCOUNT.href, className }) {
+  return /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", className, children: /* @__PURE__ */ jsx("a", { href, children: GET_AN_ACCOUNT.label }) });
+}
+function ProductLockup({ size, product }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", children: [
+    /* @__PURE__ */ jsx(Lockup, { size }),
+    product ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-3 h-5 w-px bg-oca-hairline-strong" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium tracking-[-0.01em]", style: { fontSize: size * 0.56 }, children: product })
+    ] }) : null
+  ] });
+}
 function SiteHeader({
   home = "/",
   brand,
@@ -1042,13 +1145,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__ */ jsxs("span", { className: "inline-flex items-center", children: [
-    /* @__PURE__ */ jsx(Lockup, { size }),
-    product ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-3 h-5 w-px bg-oca-hairline-strong" }),
-      /* @__PURE__ */ jsx("span", { className: "font-medium tracking-[-0.01em]", style: { fontSize: size * 0.56 }, children: product })
-    ] }) : null
-  ] });
+  const brandNode = brand ?? /* @__PURE__ */ jsx(ProductLockup, { size, product });
   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) : (
       // Between md and lg the family menu and the actions share the row: tighter.
@@ -1178,7 +1275,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__ */ jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ jsx("nav", { "aria-label": "Legal", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-5", children: links.map((l) => /* @__PURE__ */ jsx("li", { children: l.href.startsWith("/") ? /* @__PURE__ */ jsx(Link, { href: l.href, className: FOOT_LINK, children: l.label }) : /* @__PURE__ */ jsx("a", { href: l.href, className: FOOT_LINK, children: l.label }) }, l.href)) }) }),
+    /* @__PURE__ */ jsx("nav", { "aria-label": "Legal", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-5", children: links.map((l, i) => /* @__PURE__ */ jsx("li", { children: l.href.startsWith("/") ? /* @__PURE__ */ jsx(Link, { href: l.href, className: FOOT_LINK, children: l.label }) : /* @__PURE__ */ jsx("a", { href: l.href, className: FOOT_LINK, children: l.label }) }, `${i}:${l.label}`)) }) }),
     /* @__PURE__ */ jsxs("p", { children: [
       "\xA9 ",
       (/* @__PURE__ */ new Date()).getFullYear(),
@@ -1198,16 +1295,26 @@ function SiteFooter({
 }) {
   const legalLinks = legal === true ? LEGAL_LINKS : legal || null;
   if (compact) {
-    return /* @__PURE__ */ jsx("footer", { className: cn("border-t border-border bg-background text-[0.875rem] text-muted-foreground", className), children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-1", children: [
-        /* @__PURE__ */ jsx("a", { href: OCHK_IO, className: "rounded-lg text-foreground", children: /* @__PURE__ */ jsx(Lockup, { size: 22 }) }),
-        family ? /* @__PURE__ */ jsx("nav", { "aria-label": "Protocols", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-4", children: PROTOCOLS.map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: p.pageHref, className: FOOT_LINK, children: p.label }) }, p.slug)) }) }) : null
-      ] }),
-      legalLinks || meta ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
-        legalLinks ? /* @__PURE__ */ jsx(LegalRow, { links: legalLinks }) : null,
-        meta
-      ] }) : null
-    ] }) });
+    return (
+      // The tools' column (ToolColumn): the lockup lines up with the page's title.
+      /* @__PURE__ */ jsx("footer", { className: cn("border-t border-border bg-background px-4 text-[0.875rem] text-muted-foreground md:px-8", className), children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3", children: [
+          /* @__PURE__ */ 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__ */ jsx(Lockup, { size: 22 })
+            }
+          ),
+          family ? /* @__PURE__ */ jsx("nav", { "aria-label": "Protocols", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-4", children: PROTOCOLS.map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: p.pageHref, className: FOOT_LINK, children: p.label }) }, p.slug)) }) }) : null
+        ] }),
+        legalLinks || meta ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
+          legalLinks ? /* @__PURE__ */ jsx(LegalRow, { links: legalLinks }) : null,
+          meta
+        ] }) : null
+      ] }) })
+    );
   }
   const cols = [
     ...columns,
@@ -1242,17 +1349,17 @@ function SiteFooter({
                 className: cn("flex min-w-0 flex-col gap-1", spans && "col-span-2 md:col-span-1"),
                 children: [
                   /* @__PURE__ */ jsx("p", { className: "mb-2 text-[0.875rem] font-medium", children: col.heading }),
-                  /* @__PURE__ */ 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__ */ jsx(
+                  /* @__PURE__ */ 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__ */ 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}`
             );
           })
         ]
@@ -1352,12 +1459,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,
@@ -1375,7 +1483,7 @@ function SignInFrame({
         /* @__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(Link, { href: homeHref, className: "w-fit rounded-lg", children: [
-              brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }),
+              brand ?? /* @__PURE__ */ jsx(ProductLockup, { size: 28, product: product ?? (protocol2 ? protocolSite(protocol2).label : void 0) }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
             ] }),
             back === void 0 ? /* @__PURE__ */ jsx(
@@ -1412,97 +1520,10 @@ function SignInFrame({
     }
   );
 }
-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
-    }
-  );
-});
 var DensityContext = sharedContext("density", "comfortable");
 function DensityProvider({ density, children }) {
   return createElement(DensityContext.Provider, { value: density }, children);
 }
-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("|");
@@ -1756,7 +1777,7 @@ function SessionAccountView({
   items = [],
   signInHref,
   signInPath,
-  signInLabel = "Sign in",
+  signInLabel = SIGN_IN_LABEL,
   accountHref = OCHK_APP_ACCOUNT,
   onSignOut,
   nameFrom = "lg"
@@ -1787,6 +1808,13 @@ function SessionAccountView({
     /* @__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 ?? inPlace ?? "https://ochk.io/signin", children: signInLabel }) }) })
   );
 }
+function ToolColumn({
+  measure = "wide",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-4 pb-16 pt-8 md:px-8 md:pt-10", className), children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children: /* @__PURE__ */ jsx(InColumnContext.Provider, { value: true, children: measure === "narrow" ? /* @__PURE__ */ jsx("div", { className: "max-w-[48rem]", children }) : children }) }) });
+}
 function ToolShell({
   protocol: protocol2,
   tools,
@@ -1795,6 +1823,7 @@ function ToolShell({
   rail = false,
   railFooter,
   variant = "tool",
+  measure = "wide",
   banner,
   footer,
   children
@@ -1820,7 +1849,9 @@ function ToolShell({
     {
       className: cn(
         "flex flex-col bg-background",
-        app ? "h-dvh overflow-hidden" : "min-h-dvh",
+        // An app frame contains what is positioned inside it (sr-only text deep in the page's own
+        // scroller would otherwise size the document), and clips without becoming a scroller.
+        app ? "relative h-dvh overflow-clip" : "min-h-dvh",
         tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]"
       ),
       children: [
@@ -1850,14 +1881,7 @@ function ToolShell({
             /* @__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: /* @__PURE__ */ jsx(SiteHomeContext.Provider, { value: homeHref, children: app ? children : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
-            }
-          )
+          /* @__PURE__ */ jsx("main", { id: "main-content", className: cn("min-w-0 flex-1", app && "flex min-h-0 flex-col"), children: /* @__PURE__ */ jsx(SiteHomeContext.Provider, { value: homeHref, children: app ? children : /* @__PURE__ */ jsx(ToolColumn, { measure, children }) }) })
         ] }),
         app || footer === false ? null : footer ?? /* @__PURE__ */ jsx(SiteFooter, { compact: true, family: true, legal: true }),
         tabs ? /* @__PURE__ */ jsx(TabBar, { items: tabs }) : null
@@ -1866,6 +1890,6 @@ function ToolShell({
   ) });
 }
 
-export { AccountMenu, AppShell, DOCS_HEADER_NAV, DocsNav, DocsShell, FamilyMenu, OCHK_APP_ACCOUNT, OchkIoFooter, SessionAccountView, ShellContext, SignInFrame, SiteBanner, SiteFooter, SiteHeader, SkipLink, ThemeToggle, ToolShell, useShellPlace, useSignInHref };
+export { AccountCta, AccountMenu, AppShell, DOCS_HEADER_NAV, DocsNav, DocsShell, FamilyMenu, OCHK_APP_ACCOUNT, OchkIoFooter, SessionAccountView, ShellContext, SignInFrame, SiteBanner, SiteFooter, SiteHeader, SkipLink, ThemeToggle, ToolColumn, ToolShell, useShellPlace, useSignInHref };
 //# sourceMappingURL=chrome.mjs.map
 //# sourceMappingURL=chrome.mjs.map