@orangecheck/app-design 0.6.0 → 1.0.0

package/dist/chrome.mjs

@@ -1,6 +1,6 @@
-import { X, Menu, ChevronRight, Sun, Moon, SunMoon } from 'lucide-react';
-import Link2 from 'next/link';
-import { forwardRef, createContext, useState, useContext, useMemo, useEffect } from 'react';
+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 { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -8,6 +8,7 @@ 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 { cva } from 'class-variance-authority';
 import { useTheme } from 'next-themes';
 
 var merge = extendTailwindMerge({
@@ -99,6 +100,141 @@ function Lockup({ name = "orangecheck", size = 28, className }) {
     }
   );
 }
+
+// src/family/index.ts
+var OCHK_IO = "https://ochk.io";
+var DOCS_HREF = `${OCHK_IO}/docs`;
+function protocol(slug, verb, line, kinds) {
+  return {
+    slug,
+    label: slug,
+    href: `${OCHK_IO}/${slug}`,
+    group: "protocol",
+    line,
+    status: "live",
+    verb,
+    pageHref: `${OCHK_IO}/${slug}`,
+    toolHref: `https://${slug}.ochk.io`,
+    specHref: `https://github.com/orangecheck/oc-${slug}-protocol`,
+    kinds
+  };
+}
+var PROTOCOLS = [
+  protocol("attest", "identity", "Show that an address holds bitcoin, and for how long.", "30078"),
+  protocol("lock", "confidentiality", "Encrypt to a Bitcoin address, so only its holder can open it.", "30078"),
+  protocol("vote", "legitimacy", "Polls weighed in sats, that anyone can tally.", "30080\u201330082"),
+  protocol("stamp", "provenance", "Prove who signed something, and when.", "30083"),
+  protocol("agent", "authority", "Give software scoped, revocable permission to act for you.", "30083\u201330086"),
+  protocol("pledge", "commitment", "Make a promise with bitcoin behind it, on a public record.", "30078")
+];
+PROTOCOLS.map((p) => p.slug);
+var FAMILY = [
+  {
+    slug: "home",
+    label: "ochk.io",
+    href: OCHK_IO,
+    group: "orangecheck",
+    line: "The open protocols, and the company behind them.",
+    status: "live"
+  },
+  {
+    slug: "me",
+    label: "ochk.app",
+    href: "https://ochk.app",
+    group: "orangecheck",
+    line: "One account, with Bitcoin behind it.",
+    status: "testing"
+  },
+  {
+    slug: "docs",
+    label: "docs",
+    href: DOCS_HREF,
+    group: "orangecheck",
+    line: "Specs, SDKs and guides for every protocol.",
+    status: "live"
+  },
+  ...PROTOCOLS,
+  {
+    slug: "vault",
+    label: "vault",
+    href: "https://vault.ochk.io",
+    group: "app",
+    line: "A password manager, encrypted in your browser.",
+    status: "live",
+    protocols: ["lock"]
+  },
+  {
+    slug: "chat",
+    label: "chat",
+    href: "https://chat.ochk.io",
+    group: "app",
+    line: "Messages only the holder of a Bitcoin address can read.",
+    status: "testing",
+    protocols: ["lock"]
+  },
+  {
+    slug: "cosign",
+    label: "cosign",
+    href: "https://cosign.ochk.io",
+    group: "app",
+    line: "Builders find co-founders and backers.",
+    status: "testing",
+    protocols: ["attest"]
+  },
+  {
+    slug: "me-demo",
+    // "demo", not the made-up app's own name, so nobody takes it for ours.
+    label: "demo",
+    href: "https://me-demo.ochk.io",
+    group: "app",
+    line: "Lumen Notes, a made-up app that signs in with orangecheck.",
+    status: "live"
+  },
+  {
+    slug: "globe",
+    label: "globe",
+    href: "https://globe.ochk.io",
+    group: "public-good",
+    line: "The Bitcoin network, live, on a globe.",
+    status: "live"
+  },
+  {
+    slug: "btc",
+    label: "btc",
+    href: "https://btc.ochk.io",
+    group: "public-good",
+    line: "A free desk for reading the Bitcoin market.",
+    status: "live"
+  }
+];
+var FAMILY_GROUPS = [
+  { id: "orangecheck", label: "orangecheck" },
+  { id: "protocol", label: "Protocols" },
+  { id: "app", label: "Apps" },
+  { id: "public-good", label: "Public goods" }
+];
+new Map(FAMILY.map((s) => [s.slug, s]));
+function familyByGroup() {
+  return FAMILY_GROUPS.map((g) => ({ ...g, sites: FAMILY.filter((s) => s.group === g.id) }));
+}
+var LEGAL_LINKS = [
+  { href: `${OCHK_IO}/privacy`, label: "Privacy" },
+  { href: `${OCHK_IO}/terms`, label: "Terms" },
+  { href: `${OCHK_IO}/security`, label: "Security" },
+  { href: `${OCHK_IO}/trademark`, label: "Trademarks" },
+  { href: `${OCHK_IO}/contact`, label: "Contact" }
+];
+[
+  {
+    href: `${OCHK_IO}/protocols`,
+    label: "Protocols",
+    children: PROTOCOLS.map((p) => ({ href: p.pageHref, label: p.label, description: p.line }))
+  },
+  { href: `${OCHK_IO}/apps`, label: "Apps" },
+  { href: DOCS_HREF, label: "Docs" },
+  { href: `${OCHK_IO}/trust`, label: "Trust" },
+  { href: `${OCHK_IO}/about`, label: "About" }
+];
 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: [
@@ -178,7 +314,9 @@ var SheetContent = forwardRef(function SheetContent2({ className, children, side
     )
   ] });
 });
-forwardRef(function PopoverContent2({ className, align = "center", sideOffset = 8, ...props }, ref) {
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = forwardRef(function PopoverContent2({ className, align = "center", sideOffset = 8, ...props }, ref) {
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
     {
@@ -251,6 +389,132 @@ var DropdownMenuLabel = forwardRef(function DropdownMenuLabel2({ className, ...p
 var DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: cn("my-1.5 h-px bg-border", className), ...props });
 });
+var GOOD_DOT = "border-border bg-card text-foreground before:size-1.5 before:shrink-0 before:rounded-full before:bg-success before:content-['']";
+var badgeVariants = cva(
+  "inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 text-[0.8125rem] font-medium leading-none",
+  {
+    variants: {
+      tone: {
+        neutral: "border-border bg-card text-foreground",
+        muted: "border-transparent bg-muted text-muted-foreground",
+        brand: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))] text-oca-accent-ink",
+        danger: "border-transparent bg-[color-mix(in_oklab,var(--destructive)_12%,var(--card))] text-destructive",
+        // A good state is a neutral pill with a green dot, not a green pill.
+        success: GOOD_DOT,
+        // Aliases kept so older call sites keep compiling: attention is
+        // the brand accent, information is neutral.
+        warning: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--card))] text-oca-accent-ink",
+        info: "border-border bg-card text-foreground",
+        // Inverted in dark mode, where ink would sit on a card of nearly its own colour.
+        ink: "border-transparent bg-oca-ink text-oca-ink-foreground dark:bg-foreground dark:text-background",
+        onInk: "border-white/15 bg-white/5 text-white/90"
+      }
+    },
+    defaultVariants: { tone: "neutral" }
+  }
+);
+function Badge({ className, tone, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-ui": "badge", className: cn(badgeVariants({ tone }), className), ...props });
+}
+var WORD = {
+  live: "Live",
+  testing: "In testing",
+  "not-yet": "Not yet",
+  paused: "Paused",
+  good: "Good",
+  caution: "Caution",
+  refused: "Refused"
+};
+var TONE = {
+  live: "success",
+  testing: "brand",
+  "not-yet": "muted",
+  paused: "muted",
+  good: "success",
+  caution: "brand",
+  refused: "danger"
+};
+function StatusBadge({ status, className, ...props }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: TONE[status], "data-status": status, className: cn(className), ...props, children: WORD[status] });
+}
+function SiteRow({ site, here, onNavigate }) {
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: site.href,
+      onClick: onNavigate,
+      "aria-current": here ? "page" : void 0,
+      className: cn(
+        "flex flex-col gap-0.5 rounded-xl px-3 py-2 transition-colors hover:bg-accent",
+        here && "bg-muted hover:bg-muted dark:bg-white/[0.06]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-[0.9375rem] font-medium leading-6", children: [
+          site.label,
+          site.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: site.status }) : null,
+          here ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(this site)" }) : null
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: site.line })
+      ]
+    }
+  ) });
+}
+var PLACE = {
+  orangecheck: "sm:col-start-1 sm:row-start-1 lg:row-span-2",
+  protocol: "sm:col-start-1 sm:row-start-2 lg:col-start-2 lg:row-start-1 lg:row-span-2",
+  app: "sm:col-start-2 sm:row-start-1 lg:col-start-3",
+  "public-good": "sm:col-start-2 sm:row-start-2 lg:col-start-3"
+};
+function FamilyList({
+  current,
+  onNavigate,
+  stack = false,
+  className
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-x-2 gap-y-4",
+        // The second desk row takes the slack, so the public goods sit right under the apps.
+        !stack && "sm:grid-cols-2 lg:grid-cols-3 lg:grid-rows-[auto_1fr]",
+        className
+      ),
+      children: familyByGroup().map((g) => /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", !stack && PLACE[g.id]), children: [
+        /* @__PURE__ */ jsx("p", { id: `${id}-${g.id}`, className: "px-3 pt-1 text-[0.8125rem] text-muted-foreground", children: g.label }),
+        /* @__PURE__ */ jsx("ul", { "aria-labelledby": `${id}-${g.id}`, className: "flex flex-col", children: g.sites.map((s) => /* @__PURE__ */ jsx(SiteRow, { site: s, here: s.slug === current, onNavigate }, s.slug)) })
+      ] }, g.id))
+    }
+  );
+}
+function FamilyMenu({ current, className }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        "aria-label": "All orangecheck sites",
+        className: cn(
+          "group inline-flex size-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors",
+          "hover:bg-accent hover:text-foreground data-[state=open]:bg-accent data-[state=open]:text-foreground",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align: "start",
+        sideOffset: 14,
+        collisionPadding: 16,
+        className: "max-h-[min(40rem,var(--radix-popover-content-available-height))] w-[min(calc(100vw-2rem),42rem)] overflow-y-auto p-3 lg:w-[min(calc(100vw-2rem),56rem)]",
+        children: /* @__PURE__ */ jsx(FamilyList, { current, onNavigate: () => setOpen(false) })
+      }
+    )
+  ] });
+}
 function NavLink({ item, className, onNavigate }) {
   const cls = cn(
     "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
@@ -260,42 +524,107 @@ function NavLink({ item, className, onNavigate }) {
   if (item.external) {
     return /* @__PURE__ */ jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
   }
-  return /* @__PURE__ */ jsx(Link2, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, 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 });
+}
+function NavRow({ item, onNavigate }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] font-medium leading-6 text-foreground", children: item.label }),
+    item.description ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: item.description }) : null
+  ] });
+  const cls = cn(
+    "flex flex-col gap-0.5 rounded-xl px-3 py-2 transition-colors hover:bg-accent",
+    item.active && "bg-muted hover:bg-muted dark:bg-white/[0.06]"
+  );
+  return item.external ? /* @__PURE__ */ 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 });
+}
+var seeAll = (item) => typeof item.label === "string" ? `All ${item.label.toLowerCase()}` : "See all";
+function NavDropdown({ item }) {
+  const [open, setOpen] = useState(false);
+  const active = item.active || item.children?.some((c) => c.active);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        className: cn(
+          "group inline-flex items-center gap-1 rounded-full py-2 pl-3 pr-2.5 text-[0.9375rem] transition-colors",
+          active ? "text-foreground" : "text-muted-foreground hover:text-foreground data-[state=open]:text-foreground"
+        ),
+        children: [
+          item.label,
+          /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "center", sideOffset: 10, className: "w-[min(calc(100vw-2rem),26rem)] p-2", children: [
+      /* @__PURE__ */ jsx("ul", { className: "flex flex-col", children: item.children?.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavRow, { item: c, onNavigate: () => setOpen(false) }) }, c.href)) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1.5 border-t border-border px-1 pt-1.5", children: /* @__PURE__ */ jsx(
+        NavLink,
+        {
+          item: { ...item, label: seeAll(item), children: void 0 },
+          className: "block rounded-xl px-2 py-2 text-[0.875rem]",
+          onNavigate: () => setOpen(false)
+        }
+      ) })
+    ] })
+  ] });
 }
 function SiteHeader({
   home = "/",
   brand,
+  product,
+  family,
   nav = [],
+  search,
   actions,
+  variant = "site",
   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 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 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;
   return /* @__PURE__ */ jsx(
     "header",
     {
       className: cn(
-        "sticky top-0 z-40 w-full border-b border-transparent bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/70",
+        "sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/90",
+        tool ? "border-border" : "border-transparent",
         className
       ),
       children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "oca-container flex h-16 items-center justify-between gap-4 md:h-[4.5rem]",
+            "flex items-center justify-between gap-4",
+            tool ? "h-14 px-4 md:px-6" : "oca-container h-16 md:h-[4.5rem]",
             // Three columns, the outer two each at least their content: the
             // navigation stays centred whatever the actions hold, so it does
             // not shift when they change (signed out to signed in).
-            nav.length > 0 && "md:grid md:grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]"
+            !tool && nav.length > 0 && "md:grid md:grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]"
           ),
           children: [
-            /* @__PURE__ */ jsxs(Link2, { href: home, className: "-ml-1 justify-self-start rounded-lg p-1", children: [
-              brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
+            /* @__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: [
+                brandNode,
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
+              ] }),
+              family ? /* @__PURE__ */ jsx(FamilyMenu, { current, className: "max-md:hidden" }) : null,
+              tool && navigation ? /* @__PURE__ */ jsx("div", { className: "ml-5", children: navigation }) : null
             ] }),
-            nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map((n) => /* @__PURE__ */ jsx(NavLink, { item: n }, n.href)) }) : null,
+            !tool ? navigation : null,
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-self-end", children: [
+              search,
               actions,
-              nav.length > 0 ? /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+              menu ? /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
                 /* @__PURE__ */ jsx(
                   SheetTrigger,
                   {
@@ -306,15 +635,35 @@ function SiteHeader({
                 ),
                 /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "pt-16", children: [
                   /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
-                  /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: nav.map((n) => /* @__PURE__ */ jsx(
-                    NavLink,
-                    {
-                      item: n,
-                      className: "rounded-xl px-3 py-3 text-[1.0625rem]",
-                      onNavigate: () => setOpen(false)
-                    },
-                    n.href
-                  )) })
+                  nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: nav.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(
+                        NavLink,
+                        {
+                          item: c,
+                          className: "rounded-xl px-3 py-2.5 text-[1.0625rem]",
+                          onNavigate: () => setOpen(false)
+                        },
+                        c.href
+                      ))
+                    ] }, n.href) : /* @__PURE__ */ jsx(
+                      NavLink,
+                      {
+                        item: n,
+                        className: "rounded-xl px-3 py-3 text-[1.0625rem]",
+                        onNavigate: () => setOpen(false)
+                      },
+                      n.href
+                    )
+                  ) }) : null,
+                  family ? /* @__PURE__ */ jsxs("details", { className: cn("group", nav.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" })
+                    ] }),
+                    /* @__PURE__ */ jsx(FamilyList, { current, onNavigate: () => setOpen(false), stack: true, className: "mt-2" })
+                  ] }) : null
                 ] })
               ] }) : null
             ] })
@@ -324,48 +673,259 @@ function SiteHeader({
     }
   );
 }
+function SkipLink({ href = "#main-content", children = "Skip to content" }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-3 focus:z-50 focus:rounded-full focus:border focus:border-border focus:bg-card focus:px-4 focus:py-2 focus:text-[0.9375rem] focus:font-medium focus:text-foreground focus:shadow-md",
+      children
+    }
+  );
+}
+var BANNER_TONE = {
+  neutral: "border-border bg-muted",
+  brand: "border-[color-mix(in_oklab,var(--oca-orange)_30%,var(--border))] bg-[color-mix(in_oklab,var(--oca-orange)_9%,var(--background))]",
+  danger: "border-[color-mix(in_oklab,var(--destructive)_35%,var(--border))] bg-[color-mix(in_oklab,var(--destructive)_8%,var(--background))]"
+};
+function SiteBanner({
+  tone = "neutral",
+  children,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "data-tone": tone, className: cn("border-b text-[0.875rem]", BANNER_TONE[tone], className), children: /* @__PURE__ */ jsxs("div", { className: "oca-container flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-2.5", children: [
+    /* @__PURE__ */ jsxs("p", { className: "flex min-w-0 items-baseline gap-2.5 leading-snug", children: [
+      tone !== "neutral" ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "size-2 shrink-0 translate-y-[-0.05em] rounded-full",
+            tone === "brand" ? "bg-oca-orange" : "bg-destructive"
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("span", { children })
+    ] }),
+    action ? /* @__PURE__ */ jsx("div", { className: cn("shrink-0 font-medium", tone !== "neutral" && "max-sm:pl-[1.125rem]"), children: action }) : null
+  ] }) });
+}
+var FOOT_LINK = "inline-flex min-h-11 items-center transition-colors hover:text-foreground md:min-h-0";
+function LegalRow() {
+  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: LEGAL_LINKS.map((l) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: l.href, className: FOOT_LINK, children: l.label }) }, l.href)) }) }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      "\xA9 ",
+      (/* @__PURE__ */ new Date()).getFullYear(),
+      " OrangeCheck"
+    ] })
+  ] });
+}
 function SiteFooter({
   columns = [],
+  family = false,
+  legal = false,
+  compact = false,
   fineprint,
   meta,
   signature = true,
   className
 }) {
-  return /* @__PURE__ */ jsxs("footer", { className: cn("border-t border-border bg-background", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "oca-container grid grid-cols-2 gap-x-6 gap-y-10 py-14 md:grid-cols-[1.3fr_repeat(3,1fr)] md:py-16", children: [
-      /* @__PURE__ */ jsxs("div", { className: "col-span-2 flex flex-col gap-4 md:col-span-1", children: [
-        /* @__PURE__ */ jsx(Lockup, { size: 26 }),
-        fineprint ? /* @__PURE__ */ jsx("p", { className: "max-w-xs text-[0.9375rem] leading-relaxed text-muted-foreground", children: fineprint }) : 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
       ] }),
-      columns.map((col, i) => {
-        const spans = columns.length % 2 === 1 && i === columns.length - 1;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            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(
-                NavLink,
-                {
-                  item: l,
-                  className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
-                },
-                l.href
-              )) })
-            ]
-          },
-          col.heading
-        );
-      })
-    ] }),
+      legal || meta ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-x-6 gap-y-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
+        legal ? /* @__PURE__ */ jsx(LegalRow, {}) : null,
+        meta
+      ] }) : null
+    ] }) });
+  }
+  const cols = [
+    ...columns,
+    ...family ? familyByGroup().map((g) => ({
+      // The lockup above already says orangecheck.
+      heading: g.id === "orangecheck" ? "Start here" : g.label,
+      links: g.sites.map((s) => ({ href: s.href, label: s.label, external: true }))
+    })) : []
+  ];
+  const n = cols.length;
+  const inline = n <= 5;
+  const grid = {
+    "--oca-footer-md": `repeat(${Math.max(1, Math.min(n, 4))}, minmax(0, 1fr))`,
+    "--oca-footer-lg": inline ? `minmax(0, 1.3fr) repeat(${Math.max(1, n)}, minmax(0, 1fr))` : `repeat(${Math.min(n, 6)}, minmax(0, 1fr))`
+  };
+  return /* @__PURE__ */ jsxs("footer", { className: cn("border-t border-border bg-background", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: grid,
+        className: "oca-container grid grid-cols-2 gap-x-6 gap-y-10 py-14 md:grid-cols-[var(--oca-footer-md)] md:py-16 lg:grid-cols-[var(--oca-footer-lg)]",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("col-span-full flex flex-col gap-4", inline && "lg:col-span-1"), children: [
+            /* @__PURE__ */ jsx(Lockup, { size: 26 }),
+            fineprint ? /* @__PURE__ */ jsx("p", { className: "max-w-xs text-[0.9375rem] leading-relaxed text-muted-foreground", children: fineprint }) : null
+          ] }),
+          cols.map((col, i) => {
+            const spans = n % 2 === 1 && i === n - 1;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                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(
+                    NavLink,
+                    {
+                      item: l,
+                      className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
+                    },
+                    l.href
+                  )) })
+                ]
+              },
+              col.heading
+            );
+          })
+        ]
+      }
+    ),
     signature ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "oca-container select-none overflow-hidden pb-8 md:pb-12", children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-[0.18em] text-[clamp(3rem,11.5vw,10rem)] leading-[0.78] tracking-[-0.065em] [font-family:var(--oc-font-display)]", children: [
       /* @__PURE__ */ jsx("span", { className: "mb-[0.06em] inline-block w-[1.1em] shrink-0", children: /* @__PURE__ */ jsx(Mark, { className: "block h-auto w-full" }) }),
       /* @__PURE__ */ jsx("span", { children: "orangecheck" })
     ] }) }) : null,
-    meta ? /* @__PURE__ */ jsx("div", { className: "oca-container", children: /* @__PURE__ */ jsx("div", { className: "border-t border-border py-6 text-[0.875rem] text-muted-foreground", children: meta }) }) : null
+    legal || meta ? /* @__PURE__ */ jsx("div", { className: "oca-container", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-t border-border py-6 text-[0.875rem] text-muted-foreground", children: [
+      legal ? /* @__PURE__ */ jsx(LegalRow, {}) : null,
+      meta
+    ] }) }) : null
   ] });
 }
+function IsoCheck({ size = 360, settle = false, shadow = true, tilt = false, title, className }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !tilt || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    let raf = 0;
+    let tx = 0;
+    let ty = 0;
+    let x = 0;
+    let y = 0;
+    const step = () => {
+      x += (tx - x) * 0.08;
+      y += (ty - y) * 0.08;
+      el.style.setProperty("--rx", `${(-y * 10).toFixed(2)}deg`);
+      el.style.setProperty("--ry", `${(x * 14).toFixed(2)}deg`);
+      raf = Math.abs(tx - x) + Math.abs(ty - y) > 1e-3 ? requestAnimationFrame(step) : 0;
+    };
+    const move = (e) => {
+      const b = el.getBoundingClientRect();
+      tx = Math.max(-1, Math.min(1, (e.clientX - (b.left + b.width / 2)) / (window.innerWidth / 2)));
+      ty = Math.max(-1, Math.min(1, (e.clientY - (b.top + b.height / 2)) / (window.innerHeight / 2)));
+      if (!raf) raf = requestAnimationFrame(step);
+    };
+    window.addEventListener("pointermove", move, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("pointermove", move);
+    };
+  }, [tilt]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("relative inline-block", settle && "oca-animate-settle", className),
+      style: { width: size, perspective: tilt ? 900 : void 0 },
+      children: [
+        tilt ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute left-1/2 top-1/2 -z-0 aspect-square w-[120%] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-70 blur-3xl",
+            style: { background: "radial-gradient(closest-side, rgb(255 140 70 / 0.35), transparent)" }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative z-10 transition-transform duration-300 ease-out",
+            style: tilt ? { transform: "rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))", transformStyle: "preserve-3d" } : void 0,
+            children: /* @__PURE__ */ jsx(Mark, { size, title, className: "block" })
+          }
+        ),
+        shadow ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute left-[8%] right-[8%] rounded-[50%] opacity-60 blur-xl",
+            style: { height: size * 0.08, bottom: -size * 0.04, background: "rgb(234 88 11 / 0.18)" }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function SignInFrame({
+  title = "Sign in",
+  lead,
+  children,
+  error,
+  fineprint,
+  brand,
+  home = "/",
+  back,
+  art,
+  caption,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      id: "main-content",
+      className: cn("grid min-h-dvh grid-cols-1 bg-background text-foreground lg:grid-cols-2", className),
+      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: [
+              brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
+            ] }),
+            back === void 0 ? /* @__PURE__ */ jsx(
+              Link3,
+              {
+                href: home,
+                className: "text-[0.9375rem] text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
+                children: "Back to home"
+              }
+            ) : back
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-[25rem] flex-1 flex-col justify-center gap-9 py-12", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsx("h1", { className: "oca-display-2", children: title }),
+              lead ? /* @__PURE__ */ jsx("p", { className: "oca-lead", children: lead }) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { children }),
+            error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[0.9375rem] text-destructive", children: error }) : null,
+            fineprint ? /* @__PURE__ */ jsx("p", { className: "text-[0.8125rem] leading-relaxed text-muted-foreground", children: fineprint }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            "aria-hidden": true,
+            className: "relative hidden flex-col justify-between gap-10 overflow-hidden border-l border-[var(--oca-band-line)] bg-oca-ink p-14 text-oca-ink-foreground lg:flex",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: art ?? /* @__PURE__ */ jsx(IsoCheck, { size: 340, settle: true, tilt: true, className: "max-w-full" }) }),
+              caption ? /* @__PURE__ */ jsx("div", { className: "flex max-w-[24rem] flex-col gap-3", children: caption }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 var ShellContext = createContext({});
 function useShellPlace() {
   return useContext(ShellContext);
@@ -374,7 +934,7 @@ 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(
-      Link2,
+      Link3,
       {
         href: it.href,
         onClick: onNavigate,
@@ -409,7 +969,7 @@ function SectionSwitch({
       children: sections.map((sec) => {
         const on = sec.id === current.id;
         return /* @__PURE__ */ jsx(
-          Link2,
+          Link3,
           {
             href: sec.href,
             onClick: onNavigate,
@@ -439,7 +999,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(
-            Link2,
+            Link3,
             {
               href: it.href,
               "aria-current": it.active ? "page" : void 0,
@@ -548,7 +1108,7 @@ function AppShell({
                 footer ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsx(Link2, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsx(Lockup, { size: 22 }) }),
+            /* @__PURE__ */ jsx(Link3, { 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(
@@ -571,7 +1131,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(Link2, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsx(Lockup, { size: 26 }) }),
+            /* @__PURE__ */ jsx(Link3, { 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 })
@@ -616,7 +1176,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(Link2, { 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(Link3, { href: it.href, children: [
           it.icon,
           it.label
         ] }) }, it.label) : /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: it.onSelect, destructive: it.destructive, children: [
@@ -650,6 +1210,6 @@ function ThemeToggle({ className }) {
   );
 }
 
-export { AccountMenu, AppShell, ShellContext, SiteFooter, SiteHeader, ThemeToggle, useShellPlace };
+export { AccountMenu, AppShell, FamilyMenu, ShellContext, SignInFrame, SiteBanner, SiteFooter, SiteHeader, SkipLink, ThemeToggle, useShellPlace };
 //# sourceMappingURL=chrome.mjs.map
 //# sourceMappingURL=chrome.mjs.map