@orangecheck/design 0.14.1 → 0.16.0

package/dist/components.mjs

@@ -1,5 +1,5 @@
 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, X, Menu, Copy } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -1241,7 +1241,11 @@ function OcAccountMenu(props) {
         // context (oc-www) can opt in incrementally.
         roster: session.roster,
         switchAccount: session.switchAccount,
-        addAccountUrl: session.addAccountUrl
+        addAccountUrl: session.addAccountUrl,
+        // Structural read keeps the auth-client peer floor at
+        // ^2.17.0 — `tabPinned` ships in 2.18.0 and is simply
+        // undefined (no hint) on older providers.
+        tabPinned: session.tabPinned
       }
     }
   );
@@ -1270,7 +1274,8 @@ function OcAccountMenuView({
     setDisplayIdentity,
     roster,
     switchAccount,
-    addAccountUrl
+    addAccountUrl,
+    tabPinned
   } = session;
   const [hydrated, setHydrated] = useState(false);
   const [open, setOpen] = useState(false);
@@ -1340,11 +1345,11 @@ function OcAccountMenuView({
             "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",
+            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 rounded-full", "aria-hidden": true }),
-              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: label }),
+              /* @__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",
                 {
@@ -1379,7 +1384,19 @@ function OcAccountMenuView({
               /* @__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
+                  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
@@ -1734,54 +1751,146 @@ 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
 }) {
-  return /* @__PURE__ */ jsx(
-    "nav",
+  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$1, { 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(
+      Link6,
+      {
+        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$1, { 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(
+      Link6,
+      {
+        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",
     {
-      "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 ?? ""),
+      ref,
+      className: "relative flex items-center justify-center " + (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 content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          link.label,
-          link.external ? /* @__PURE__ */ jsx(
-            "span",
+      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",
             {
-              "aria-hidden": true,
-              className: "text-muted-foreground/60 ml-1 text-[9px]",
-              children: "\u2197"
+              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 })
             }
-          ) : null
-        ] });
-        return link.external ? /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: link.href,
-            target: "_blank",
-            rel: "noreferrer",
-            className: className2,
-            "data-oc-primary-nav-item": "",
-            children: content
-          },
-          link.href
-        ) : /* @__PURE__ */ jsx(
-          Link6,
-          {
-            href: link.href,
-            "aria-current": active ? "page" : void 0,
-            className: className2,
-            "data-oc-primary-nav-item": active ? "active" : "sibling",
-            children: content
-          },
-          link.href
-        );
-      })
+          ),
+          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)
+              ]
+            }
+          )
+        ] })
+      ]
     }
   );
 }
@@ -2078,13 +2187,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({