@orangecheck/design 0.15.0 → 0.17.0

package/dist/components.mjs

@@ -1,13 +1,14 @@
 import * as Popover from '@radix-ui/react-popover';
-import { HelpCircle, Boxes, ChevronDown, Check, CornerDownLeft, Plus, Loader2, Copy } from 'lucide-react';
+import { HelpCircle, Boxes, ChevronDown, Check, CornerDownLeft, Plus, Loader2, Copy, X, Menu, Sun, Moon, Monitor } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import Link6 from 'next/link';
 import * as React from 'react';
-import { Fragment, useState, useRef, useEffect, useId } from 'react';
+import { createContext, Fragment, useState, useRef, useEffect, useId, useContext } from 'react';
 import { useRouter } from 'next/router';
 import { useOcSession, fetchOcLinkedIdentities } from '@orangecheck/auth-client';
+import { useTheme } from 'next-themes';
 
 // src/composites/help-hint.tsx
 function cn(...inputs) {
@@ -1000,6 +1001,74 @@ function OcLogoDropdown({
     }
   );
 }
+var OcSkinContext = createContext(null);
+function useOcSkin() {
+  const ctx = useContext(OcSkinContext);
+  if (!ctx) {
+    throw new Error("useOcSkin must be used within <OcThemeProvider>");
+  }
+  return ctx;
+}
+var MODES = [
+  { id: "light", label: "light", Icon: Sun },
+  { id: "dark", label: "dark", Icon: Moon },
+  { id: "system", label: "system", Icon: Monitor }
+];
+function AppearanceControls({ className }) {
+  const { skin, setSkin, themes } = useOcSkin();
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const activeMode = mounted ? theme ?? "system" : null;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { className: "label-mono text-muted-foreground px-3 pt-3 pb-2", children: "mode" }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 px-2 pb-2", children: MODES.map(({ id, label, Icon }) => {
+      const active = activeMode === id;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          onClick: () => setTheme(id),
+          className: cn(
+            "flex flex-col items-center gap-1 rounded-md border py-2 text-[11px] transition-colors",
+            active ? "border-primary text-foreground bg-accent" : "border-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true }),
+            label
+          ]
+        },
+        id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "label-mono text-muted-foreground border-t px-3 pt-3 pb-1", children: "theme" }),
+    /* @__PURE__ */ jsx("ul", { className: "pb-1", children: themes.map((t) => {
+      const active = t.id === skin;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          onClick: () => setSkin(t.id),
+          className: cn(
+            "hover:bg-accent hover:text-accent-foreground flex w-full items-start gap-2 px-3 py-2 text-left transition-colors",
+            active && "text-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-0.5 size-4 shrink-0", children: active && /* @__PURE__ */ jsx(Check, { className: "text-primary size-4", "aria-hidden": true }) }),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium", children: t.label }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block text-xs leading-snug", children: t.description })
+            ] })
+          ]
+        }
+      ) }, t.id);
+    }) })
+  ] });
+}
 function obscureIdentity(value) {
   if (value.length <= 12) {
     return `${value.slice(0, 4)}\u2026${value.slice(-3)}`;
@@ -1250,6 +1319,92 @@ function OcAccountMenu(props) {
     }
   );
 }
+function MobileMenu({
+  primary,
+  secondary
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const links = [...primary ?? [], ...secondary ?? []];
+  const rowCls = "font-display flex items-center gap-2 px-3 py-2 text-[12px] font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground hover:bg-accent transition-colors";
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative md:hidden", "data-oc-account-mobile-menu": "", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-label": "menu",
+        className: "border-input bg-background hover:bg-accent text-muted-foreground inline-flex size-8 items-center justify-center rounded-md border transition-colors",
+        "data-oc-account-mobile-toggle": "",
+        children: open ? /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(Menu, { className: "size-4", "aria-hidden": true })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "menu",
+        "aria-label": "menu",
+        className: "border-border bg-popover text-popover-foreground absolute top-[calc(100%+6px)] right-0 z-50 w-[min(16rem,calc(100vw-1rem))] overflow-hidden border shadow-xl",
+        "data-oc-account-mobile-popover": "",
+        children: [
+          links.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-b p-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 px-3 pt-2 pb-1 font-mono text-[10px] tracking-widest uppercase", children: "\xA7 navigate" }),
+            links.map(
+              (l) => l.external ? /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: l.href,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  role: "menuitem",
+                  onClick: () => setOpen(false),
+                  className: rowCls,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: l.label }),
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 text-[10px]", "aria-hidden": true, children: "\u2197" })
+                  ]
+                },
+                l.href
+              ) : /* @__PURE__ */ jsxs(
+                Link6,
+                {
+                  href: l.href,
+                  role: "menuitem",
+                  onClick: () => setOpen(false),
+                  className: rowCls,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: l.label })
+                  ]
+                },
+                l.href
+              )
+            )
+          ] }),
+          /* @__PURE__ */ jsx(AppearanceControls, {})
+        ]
+      }
+    )
+  ] });
+}
 function OcAccountMenuView({
   current,
   signInUrl = "/signin",
@@ -1322,220 +1477,220 @@ function OcAccountMenuView({
       children: signInLabel
     }
   );
+  const hasNav = (primaryNavLinks?.length ?? 0) + (secondaryNavLinks?.length ?? 0) > 0;
+  const wrap = (identity) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", className), "data-oc-account-menu": "", children: [
+    hasNav ? /* @__PURE__ */ jsx(MobileMenu, { primary: primaryNavLinks, secondary: secondaryNavLinks }) : null,
+    identity
+  ] });
   if (!hydrated || status === "loading") {
-    return signInTrigger;
+    return wrap(signInTrigger);
   }
   if (status !== "authenticated" || !account) {
-    return signInTrigger;
+    return wrap(signInTrigger);
   }
   const displayName = account.displayName ?? null;
   const label = displayName ?? obscureIdentity(account.displayIdentity.value);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapRef,
-      className: "relative inline-block " + (className ?? ""),
-      "data-oc-account-menu": "",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setOpen((v) => !v),
-            "aria-haspopup": "menu",
-            "aria-expanded": open,
-            "aria-label": `Signed in as ${account.didOc}. Open account menu.`,
-            className: triggerClassName ?? "border-primary/40 bg-card hover:bg-accent inline-flex h-8 items-center gap-1.5 rounded-md border px-3 font-mono text-[11px] tracking-wide transition-colors",
-            "data-oc-account-menu-trigger": "",
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "bg-primary inline-block size-1.5 rounded-full", "aria-hidden": true }),
-              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: label }),
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  width: "9",
-                  height: "9",
-                  viewBox: "0 0 10 10",
-                  "aria-hidden": true,
-                  className: "opacity-60 transition-transform " + (open ? "rotate-180" : "rotate-0"),
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M2 4 L5 7 L8 4",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      fill: "none",
-                      strokeLinecap: "round"
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        open && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            role: "menu",
-            "aria-label": "Account menu",
-            className: popoverClassName ?? "border-border bg-popover text-popover-foreground absolute top-[calc(100%+6px)] right-0 z-50 w-[min(20rem,calc(100vw-1rem))] border shadow-xl",
-            "data-oc-account-menu-popover": "",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "border-border border-b p-3", children: [
-                /* @__PURE__ */ jsxs("div", { className: "text-primary mb-1 font-mono text-[10px] tracking-widest uppercase", children: [
-                  "\xA7 signed in \xB7 ",
-                  hostname,
-                  tabPinned ? /* @__PURE__ */ jsxs(
+  return wrap(
+    /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative inline-block", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen((v) => !v),
+          "aria-haspopup": "menu",
+          "aria-expanded": open,
+          "aria-label": `Signed in as ${account.didOc}. Open account menu.`,
+          className: triggerClassName ?? "border-primary/40 bg-card hover:bg-accent inline-flex h-8 items-center gap-1.5 rounded-md border px-2 font-mono text-[11px] tracking-wide transition-colors sm:px-3",
+          "data-oc-account-menu-trigger": "",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "bg-primary inline-block size-1.5 shrink-0 rounded-full", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground hidden max-w-[16ch] truncate sm:inline", children: label }),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "9",
+                height: "9",
+                viewBox: "0 0 10 10",
+                "aria-hidden": true,
+                className: "opacity-60 transition-transform " + (open ? "rotate-180" : "rotate-0"),
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M2 4 L5 7 L8 4",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    fill: "none",
+                    strokeLinecap: "round"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "menu",
+          "aria-label": "Account menu",
+          className: popoverClassName ?? "border-border bg-popover text-popover-foreground absolute top-[calc(100%+6px)] right-0 z-50 w-[min(20rem,calc(100vw-1rem))] border shadow-xl",
+          "data-oc-account-menu-popover": "",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "border-border border-b p-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-primary mb-1 font-mono text-[10px] tracking-widest uppercase", children: [
+                "\xA7 signed in \xB7 ",
+                hostname,
+                tabPinned ? /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "text-muted-foreground/70 normal-case",
+                    "data-oc-account-menu-tab-pin": "",
+                    title: "This tab keeps this account even if you switch accounts in another tab",
+                    children: [
+                      " ",
+                      "\xB7 this tab"
+                    ]
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsx(CopyableDid, { did: account.didOc }),
+              displayName ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/80 mt-1 font-mono text-[10px] tracking-wide", children: displayName }) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              IdentityPromoteSection,
+              {
+                didOc: account.didOc,
+                nostrNpub: account.nostrNpub ?? null,
+                current: account.displayIdentity,
+                open,
+                setDisplayIdentity
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AccountsSection,
+              {
+                roster: roster ?? [],
+                switchAccount,
+                addAccountUrl,
+                signOut,
+                onActionStart: () => setOpen(false)
+              }
+            ),
+            primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(
+              PopoverSection,
+              {
+                label: "navigate",
+                items: primaryNavLinks,
+                onItemClick: () => setOpen(false),
+                className: "hidden md:block"
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("div", { className: "p-1", "data-oc-account-menu-section": "account", children: [
+              menuItems?.map((item) => {
+                const onClick = () => setOpen(false);
+                const cls = "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors";
+                const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+                  item.external ? /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: "text-muted-foreground/70 normal-case",
-                      "data-oc-account-menu-tab-pin": "",
-                      title: "This tab keeps this account even if you switch accounts in another tab",
-                      children: [
-                        " ",
-                        "\xB7 this tab"
-                      ]
+                      className: "text-muted-foreground/70 text-[10px]",
+                      "aria-hidden": true,
+                      children: "\u2197"
                     }
                   ) : null
-                ] }),
-                /* @__PURE__ */ jsx(CopyableDid, { did: account.didOc }),
-                displayName ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/80 mt-1 font-mono text-[10px] tracking-wide", children: displayName }) : null
-              ] }),
-              /* @__PURE__ */ jsx(
-                IdentityPromoteSection,
-                {
-                  didOc: account.didOc,
-                  nostrNpub: account.nostrNpub ?? null,
-                  current: account.displayIdentity,
-                  open,
-                  setDisplayIdentity
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AccountsSection,
-                {
-                  roster: roster ?? [],
-                  switchAccount,
-                  addAccountUrl,
-                  signOut,
-                  onActionStart: () => setOpen(false)
-                }
-              ),
-              primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(
-                PopoverSection,
-                {
-                  label: "navigate",
-                  items: primaryNavLinks,
-                  onItemClick: () => setOpen(false)
-                }
-              ) : null,
-              /* @__PURE__ */ jsxs("div", { className: "p-1", "data-oc-account-menu-section": "account", children: [
-                primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 px-3 pb-1 pt-2 font-mono text-[10px] tracking-widest uppercase", children: "\xA7 account" }) : null,
-                menuItems?.map((item) => {
-                  const onClick = () => setOpen(false);
-                  const cls = "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors";
-                  const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
-                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
-                    item.external ? /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "text-muted-foreground/70 text-[10px]",
-                        "aria-hidden": true,
-                        children: "\u2197"
-                      }
-                    ) : null
-                  ] });
-                  return item.external ? /* @__PURE__ */ jsx(
-                    "a",
-                    {
-                      href: item.href,
-                      target: "_blank",
-                      rel: "noreferrer",
-                      onClick,
-                      role: "menuitem",
-                      className: cls,
-                      "data-oc-account-menu-item": "",
-                      children: inner
-                    },
-                    item.href
-                  ) : /* @__PURE__ */ jsx(
-                    Link6,
-                    {
-                      href: item.href,
-                      onClick,
-                      role: "menuitem",
-                      className: cls,
-                      "data-oc-account-menu-item": "",
-                      children: inner
-                    },
-                    item.href
-                  );
-                }),
-                familyDashboardEnabled ? /* @__PURE__ */ jsxs(
+                ] });
+                return item.external ? /* @__PURE__ */ jsx(
                   "a",
                   {
-                    href: "https://ochk.io/dashboard",
+                    href: item.href,
                     target: "_blank",
                     rel: "noreferrer",
-                    onClick: () => setOpen(false),
+                    onClick,
                     role: "menuitem",
-                    className: "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors",
+                    className: cls,
                     "data-oc-account-menu-item": "",
-                    "data-oc-account-menu-family-dashboard": "",
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
-                      /* @__PURE__ */ jsx("span", { className: "flex-1", children: "family dashboard" }),
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "text-muted-foreground/70 text-[10px]",
-                          "aria-hidden": true,
-                          children: "\u2197"
-                        }
-                      )
-                    ]
-                  }
-                ) : null,
-                /* @__PURE__ */ jsxs(
-                  "button",
+                    children: inner
+                  },
+                  item.href
+                ) : /* @__PURE__ */ jsx(
+                  Link6,
                   {
-                    type: "button",
+                    href: item.href,
+                    onClick,
                     role: "menuitem",
-                    onClick: () => {
-                      setOpen(false);
-                      void (async () => {
-                        await signOut();
-                        if (typeof window !== "undefined") {
-                          window.location.assign(signOutRedirect);
-                        }
-                      })();
-                    },
-                    className: "hover:bg-accent flex w-full items-center gap-2 px-3 py-2 text-left font-mono text-[11px] tracking-wide transition-colors",
+                    className: cls,
                     "data-oc-account-menu-item": "",
-                    "data-oc-account-menu-signout": "",
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
-                      /* @__PURE__ */ jsx("span", { className: "flex-1", children: "sign out" })
-                    ]
-                  }
-                )
-              ] }),
-              secondaryNavLinks && secondaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(
-                PopoverSection,
+                    children: inner
+                  },
+                  item.href
+                );
+              }),
+              familyDashboardEnabled ? /* @__PURE__ */ jsxs(
+                "a",
                 {
-                  label: "more",
-                  items: secondaryNavLinks,
-                  onItemClick: () => setOpen(false),
-                  bordered: true
+                  href: "https://ochk.io/dashboard",
+                  target: "_blank",
+                  rel: "noreferrer",
+                  onClick: () => setOpen(false),
+                  role: "menuitem",
+                  className: "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors",
+                  "data-oc-account-menu-item": "",
+                  "data-oc-account-menu-family-dashboard": "",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: "family dashboard" }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "text-muted-foreground/70 text-[10px]",
+                        "aria-hidden": true,
+                        children: "\u2197"
+                      }
+                    )
+                  ]
                 }
               ) : null,
-              build ? /* @__PURE__ */ jsx(BuildFooter, { hostname, build, state: siteState }) : null
-            ]
-          }
-        )
-      ]
-    }
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: () => {
+                    setOpen(false);
+                    void (async () => {
+                      await signOut();
+                      if (typeof window !== "undefined") {
+                        window.location.assign(signOutRedirect);
+                      }
+                    })();
+                  },
+                  className: "hover:bg-accent flex w-full items-center gap-2 px-3 py-2 text-left font-mono text-[11px] tracking-wide transition-colors",
+                  "data-oc-account-menu-item": "",
+                  "data-oc-account-menu-signout": "",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: "sign out" })
+                  ]
+                }
+              )
+            ] }),
+            secondaryNavLinks && secondaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(
+              PopoverSection,
+              {
+                label: "more",
+                items: secondaryNavLinks,
+                onItemClick: () => setOpen(false),
+                bordered: true,
+                className: "hidden md:block"
+              }
+            ) : null,
+            build ? /* @__PURE__ */ jsx(BuildFooter, { hostname, build, state: siteState }) : null
+          ]
+        }
+      )
+    ] })
   );
 }
 function AccountsSection({
@@ -1648,33 +1803,22 @@ function PopoverSection({
   label,
   items,
   onItemClick,
-  bordered
+  bordered,
+  className
 }) {
   const cls = "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "p-1 " + (bordered ? "border-border border-t" : ""),
+      className: cn("p-1", bordered && "border-border border-t", className),
       "data-oc-account-menu-section": label,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground/60 px-3 pt-2 pb-1 font-mono text-[10px] tracking-widest uppercase", children: [
           "\xA7 ",
           label
         ] }),
-        items.map((item) => {
-          const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
-            /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
-            item.external ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "text-muted-foreground/70 text-[10px]",
-                "aria-hidden": true,
-                children: "\u2197"
-              }
-            ) : null
-          ] });
-          return item.external ? /* @__PURE__ */ jsx(
+        items.map(
+          (item) => item.external ? /* @__PURE__ */ jsxs(
             "a",
             {
               href: item.href,
@@ -1684,10 +1828,14 @@ function PopoverSection({
               role: "menuitem",
               className: cls,
               "data-oc-account-menu-item": "",
-              children: inner
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 text-[10px]", "aria-hidden": true, children: "\u2197" })
+              ]
             },
             item.href
-          ) : /* @__PURE__ */ jsx(
+          ) : /* @__PURE__ */ jsxs(
             Link6,
             {
               href: item.href,
@@ -1695,11 +1843,14 @@ function PopoverSection({
               role: "menuitem",
               className: cls,
               "data-oc-account-menu-item": "",
-              children: inner
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label })
+              ]
             },
             item.href
-          );
-        })
+          )
+        )
       ]
     }
   );
@@ -1760,11 +1911,11 @@ function OcPrimaryNav({
     "nav",
     {
       "aria-label": "primary",
-      className: "flex min-w-0 items-center justify-start overflow-x-auto gap-0.5 sm:gap-1 whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden " + (className ?? ""),
+      className: "hidden items-center gap-0.5 sm:gap-1 md:flex " + (className ?? ""),
       "data-oc-primary-nav": "",
       children: links.map((link) => {
         const active = isActive(activePath, link);
-        const className2 = "font-display shrink-0 px-2 py-1 sm:px-3 text-[11px] sm:text-[12px] font-semibold tracking-wider uppercase transition-colors " + (active ? "text-primary" : "text-muted-foreground hover:text-foreground");
+        const cls = "font-display shrink-0 px-2 py-1 sm:px-3 text-[11px] sm:text-[12px] font-semibold tracking-wider uppercase transition-colors " + (active ? "text-primary" : "text-muted-foreground hover:text-foreground");
         const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
           link.label,
           link.external ? /* @__PURE__ */ jsx(
@@ -1782,7 +1933,7 @@ function OcPrimaryNav({
             href: link.href,
             target: "_blank",
             rel: "noreferrer",
-            className: className2,
+            className: cls,
             "data-oc-primary-nav-item": "",
             children: content
           },
@@ -1792,7 +1943,7 @@ function OcPrimaryNav({
           {
             href: link.href,
             "aria-current": active ? "page" : void 0,
-            className: className2,
+            className: cls,
             "data-oc-primary-nav-item": active ? "active" : "sibling",
             children: content
           },
@@ -2095,13 +2246,19 @@ function LayoutSubHeader({
   noHeartbeat = false,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("border-b", className), children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-wrap items-center justify-between gap-x-6 gap-y-1 py-2 font-mono text-[11px]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      !noHeartbeat && /* @__PURE__ */ jsx("span", { className: "bg-primary inline-block h-1.5 w-1.5 animate-pulse rounded-full" }),
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground tracking-widest uppercase", children: status }),
-      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: product })
+  return /* @__PURE__ */ jsx("div", { className: cn("oc-substrip border-b", className), children: /* @__PURE__ */ jsxs("div", { className: "container flex items-center justify-between gap-x-6 py-2 font-mono text-[11px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+      !noHeartbeat && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "bg-primary inline-block size-1.5 shrink-0 animate-pulse rounded-full ring-2 ring-[color-mix(in_oklch,var(--primary),transparent_78%)]",
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground hidden tracking-widest whitespace-nowrap uppercase sm:inline", children: status }),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground truncate", children: product })
     ] }),
-    tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 tracking-widest uppercase", children: tags.map((tag, i) => /* @__PURE__ */ jsx("span", { className: tag.hideBelow ? HIDE[tag.hideBelow] : void 0, children: tag.label }, i)) })
+    tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/55 hidden shrink-0 items-center gap-x-3 tracking-wider whitespace-nowrap uppercase sm:flex", children: tags.map((tag, i) => /* @__PURE__ */ jsx("span", { className: tag.hideBelow ? HIDE[tag.hideBelow] : void 0, children: tag.label }, i)) })
   ] }) });
 }
 function OcAppBar({