@orangecheck/design 0.16.0 → 0.17.0

package/dist/chrome.mjs

@@ -1,13 +1,14 @@
-import { Boxes, ChevronDown, Check, CornerDownLeft, Plus, Loader2, X, Menu, Copy } from 'lucide-react';
+import { Boxes, ChevronDown, Check, CornerDownLeft, Plus, Loader2, Copy, X, Menu, Sun, Moon, Monitor } from 'lucide-react';
 import Link5 from 'next/link';
 import * as React from 'react';
-import { useState, useRef, useEffect, useId } from 'react';
+import { createContext, useState, useRef, useEffect, useId, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import * as Popover from '@radix-ui/react-popover';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { useOcSession, fetchOcLinkedIdentities } from '@orangecheck/auth-client';
+import { useTheme } from 'next-themes';
 
 // src/chrome/ecosystem-switcher.tsx
 var ENTRIES = [
@@ -751,6 +752,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)}`;
@@ -1001,6 +1070,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(
+                Link5,
+                {
+                  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",
@@ -1073,220 +1228,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-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(
+  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, { 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, { 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(
-                    Link5,
-                    {
-                      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(
+                  Link5,
                   {
-                    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({
@@ -1399,33 +1554,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, { 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,
@@ -1435,10 +1579,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(
             Link5,
             {
               href: item.href,
@@ -1446,11 +1594,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
-          );
-        })
+          )
+        )
       ]
     }
   );
@@ -1502,146 +1653,54 @@ function isActive(pathname, link) {
   if (link.href === "/") return pathname === "/";
   return pathname === link.href || pathname.startsWith(link.href + "/");
 }
-function ExternalGlyph() {
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-muted-foreground/60 ml-1 text-[9px]", children: "\u2197" });
-}
 function OcPrimaryNav({
   activePath,
   links,
   className
 }) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  const menuId = useId();
-  useEffect(() => {
-    setOpen(false);
-  }, [activePath]);
-  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 inlineClass = (active) => "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 rowClass = (active) => "font-display flex items-center gap-2 px-3 py-2 text-[12px] font-semibold tracking-wider uppercase transition-colors " + (active ? "text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent");
-  function renderInline(link) {
-    const active = isActive(activePath, link);
-    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-      link.label,
-      link.external ? /* @__PURE__ */ jsx(ExternalGlyph, {}) : null
-    ] });
-    return link.external ? /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: link.href,
-        target: "_blank",
-        rel: "noreferrer",
-        className: inlineClass(false),
-        "data-oc-primary-nav-item": "",
-        children: inner
-      },
-      link.href
-    ) : /* @__PURE__ */ jsx(
-      Link5,
-      {
-        href: link.href,
-        "aria-current": active ? "page" : void 0,
-        className: inlineClass(active),
-        "data-oc-primary-nav-item": active ? "active" : "sibling",
-        children: inner
-      },
-      link.href
-    );
-  }
-  function renderRow(link) {
-    const active = isActive(activePath, link);
-    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
-      /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.label }),
-      link.external ? /* @__PURE__ */ jsx(ExternalGlyph, {}) : null
-    ] });
-    return link.external ? /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: link.href,
-        target: "_blank",
-        rel: "noreferrer",
-        role: "menuitem",
-        onClick: () => setOpen(false),
-        className: rowClass(false),
-        "data-oc-primary-nav-item": "",
-        children: inner
-      },
-      link.href
-    ) : /* @__PURE__ */ jsx(
-      Link5,
-      {
-        href: link.href,
-        role: "menuitem",
-        "aria-current": active ? "page" : void 0,
-        onClick: () => setOpen(false),
-        className: rowClass(active),
-        "data-oc-primary-nav-item": active ? "active" : "sibling",
-        children: inner
-      },
-      link.href
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    "nav",
     {
-      ref,
-      className: "relative flex items-center justify-center " + (className ?? ""),
+      "aria-label": "primary",
+      className: "hidden items-center gap-0.5 sm:gap-1 md:flex " + (className ?? ""),
       "data-oc-primary-nav": "",
-      children: [
-        /* @__PURE__ */ jsx(
-          "nav",
-          {
-            "aria-label": "primary",
-            className: "hidden items-center gap-0.5 sm:gap-1 md:flex",
-            children: links.map(renderInline)
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
-          /* @__PURE__ */ jsx(
-            "button",
+      children: links.map((link) => {
+        const active = isActive(activePath, link);
+        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, { children: [
+          link.label,
+          link.external ? /* @__PURE__ */ jsx(
+            "span",
             {
-              type: "button",
-              onClick: () => setOpen((v) => !v),
-              "aria-haspopup": "menu",
-              "aria-expanded": open,
-              "aria-controls": menuId,
-              "aria-label": "site navigation",
-              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-primary-nav-toggle": "",
-              children: open ? /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(Menu, { className: "size-4", "aria-hidden": true })
+              "aria-hidden": true,
+              className: "text-muted-foreground/60 ml-1 text-[9px]",
+              children: "\u2197"
             }
-          ),
-          open && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              id: menuId,
-              role: "menu",
-              "aria-label": "primary",
-              className: "border-border bg-popover text-popover-foreground absolute top-[calc(100%+8px)] left-1/2 z-50 w-[min(15rem,calc(100vw-1rem))] -translate-x-1/2 border p-1 shadow-xl",
-              "data-oc-primary-nav-popover": "",
-              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(renderRow)
-              ]
-            }
-          )
-        ] })
-      ]
+          ) : null
+        ] });
+        return link.external ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: link.href,
+            target: "_blank",
+            rel: "noreferrer",
+            className: cls,
+            "data-oc-primary-nav-item": "",
+            children: content
+          },
+          link.href
+        ) : /* @__PURE__ */ jsx(
+          Link5,
+          {
+            href: link.href,
+            "aria-current": active ? "page" : void 0,
+            className: cls,
+            "data-oc-primary-nav-item": active ? "active" : "sibling",
+            children: content
+          },
+          link.href
+        );
+      })
     }
   );
 }