@orangecheck/ui 0.4.0 → 0.6.0

package/dist/index.mjs

@@ -1,7 +1,8 @@
 import { Boxes, ChevronDown, Check } from 'lucide-react';
 import Link from 'next/link';
 import { useState, useRef, useEffect, useId } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useOcSession } from '@orangecheck/auth-client';
 
 // src/ecosystem-switcher.tsx
 var ENTRIES = [
@@ -172,88 +173,162 @@ function EcosystemSwitcher({
     )
   ] });
 }
-var ENTRIES2 = [
+
+// src/family-properties.ts
+var FAMILY_PROPERTIES = [
   {
     slug: "home",
-    href: "https://ochk.io",
+    origin: "https://ochk.io",
+    hostname: "ochk.io",
     label: "orangecheck",
     sub: "umbrella \xB7 sign-in",
-    docsHref: "https://docs.ochk.io"
+    docsHref: "https://docs.ochk.io",
+    category: "hub"
+  },
+  {
+    slug: "docs",
+    origin: "https://docs.ochk.io",
+    hostname: "docs.ochk.io",
+    label: "oc\xB7docs",
+    sub: "unified reference",
+    docsHref: "https://docs.ochk.io",
+    category: "hub"
   },
   {
     slug: "me",
-    href: "https://me.ochk.io",
+    origin: "https://me.ochk.io",
+    hostname: "me.ochk.io",
     label: "oc\xB7me",
     sub: "earn \u2014 consumer identity",
-    docsHref: "https://docs.ochk.io/me"
+    docsHref: "https://docs.ochk.io/me",
+    category: "product"
   },
   {
     slug: "vault",
-    href: "https://vault.ochk.io",
+    origin: "https://vault.ochk.io",
+    hostname: "vault.ochk.io",
     label: "oc\xB7vault",
     sub: "keep \u2014 encrypted secrets",
-    docsHref: "https://docs.ochk.io/vault"
+    docsHref: "https://docs.ochk.io/vault",
+    category: "product"
   },
   {
     slug: "fleet",
-    href: "https://fleet.ochk.io",
+    origin: "https://fleet.ochk.io",
+    hostname: "fleet.ochk.io",
     label: "oc\xB7fleet",
     sub: "managed \u2014 agent fleet",
-    docsHref: "https://docs.ochk.io/fleet"
+    docsHref: "https://docs.ochk.io/fleet",
+    category: "product"
   },
   {
     slug: "attest",
-    href: "https://attest.ochk.io",
+    origin: "https://attest.ochk.io",
+    hostname: "attest.ochk.io",
     label: "oc\xB7attest",
     sub: "am \u2014 sybil resistance",
-    docsHref: "https://docs.ochk.io/attest"
+    docsHref: "https://docs.ochk.io/attest",
+    category: "protocol"
   },
   {
     slug: "lock",
-    href: "https://lock.ochk.io",
+    origin: "https://lock.ochk.io",
+    hostname: "lock.ochk.io",
     label: "oc\xB7lock",
     sub: "whisper \u2014 encryption",
-    docsHref: "https://docs.ochk.io/lock"
+    docsHref: "https://docs.ochk.io/lock",
+    category: "protocol"
   },
   {
     slug: "vote",
-    href: "https://vote.ochk.io",
+    origin: "https://vote.ochk.io",
+    hostname: "vote.ochk.io",
     label: "oc\xB7vote",
     sub: "decide \u2014 polls",
-    docsHref: "https://docs.ochk.io/vote"
+    docsHref: "https://docs.ochk.io/vote",
+    category: "protocol"
   },
   {
     slug: "stamp",
-    href: "https://stamp.ochk.io",
+    origin: "https://stamp.ochk.io",
+    hostname: "stamp.ochk.io",
     label: "oc\xB7stamp",
     sub: "declare \u2014 block-anchored",
-    docsHref: "https://docs.ochk.io/stamp"
+    docsHref: "https://docs.ochk.io/stamp",
+    category: "protocol"
   },
   {
     slug: "agent",
-    href: "https://agent.ochk.io",
+    origin: "https://agent.ochk.io",
+    hostname: "agent.ochk.io",
     label: "oc\xB7agent",
     sub: "delegate \u2014 scoped auth",
-    docsHref: "https://docs.ochk.io/agent"
+    docsHref: "https://docs.ochk.io/agent",
+    category: "protocol"
   },
   {
     slug: "pledge",
-    href: "https://pledge.ochk.io",
+    origin: "https://pledge.ochk.io",
+    hostname: "pledge.ochk.io",
     label: "oc\xB7pledge",
     sub: "swear \u2014 bonded commitment",
-    docsHref: "https://docs.ochk.io/pledge"
-  },
-  {
-    slug: "docs",
-    href: "https://docs.ochk.io",
-    label: "oc\xB7docs",
-    sub: "unified reference",
-    docsHref: "https://docs.ochk.io"
+    docsHref: "https://docs.ochk.io/pledge",
+    category: "protocol"
   }
 ];
+var SITE_STATE_LABEL = {
+  alpha: "alpha",
+  beta: "beta"
+};
+function findFamilyProperty(slug) {
+  return FAMILY_PROPERTIES.find((p) => p.slug === slug);
+}
+var SECTIONS = [
+  { category: "hub", label: "hub" },
+  { category: "product", label: "products" },
+  { category: "protocol", label: "protocols" }
+];
+function CategoryChip({ category }) {
+  if (category === "hub") return null;
+  const isProduct = category === "product";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": isProduct ? "commercial product" : "protocol reference",
+      className: "ml-1 hidden rounded-sm border px-1.5 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase sm:inline-block " + (isProduct ? "border-primary/25 bg-primary/10 text-primary" : "border-muted-foreground/20 bg-muted/40 text-muted-foreground/85"),
+      "data-oc-category": category,
+      children: isProduct ? "product" : "protocol"
+    }
+  );
+}
+function SiteStateBadge({ state }) {
+  if (state === "live") return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": `site lifecycle: ${state}`,
+      className: "text-muted-foreground/70 ml-1 hidden font-mono text-[9px] font-medium tracking-widest uppercase sm:inline-block",
+      "data-oc-site-state": state,
+      children: SITE_STATE_LABEL[state]
+    }
+  );
+}
+function MenuCategoryChip({ category }) {
+  if (category === "hub") return null;
+  const isProduct = category === "product";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "inline-block shrink-0 rounded-sm px-1 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase " + (isProduct ? "bg-primary/10 text-primary" : "bg-muted/60 text-muted-foreground/80"),
+      children: isProduct ? "pro" : "spec"
+    }
+  );
+}
 function OcLogoDropdown({
   current,
   homeHref = "/",
+  siteState = "live",
   children,
   className,
   triggerClassName,
@@ -262,6 +337,7 @@ function OcLogoDropdown({
   const [open, setOpen] = useState(false);
   const containerRef = useRef(null);
   const menuId = useId();
+  const currentCategory = findFamilyProperty(current)?.category ?? "hub";
   useEffect(() => {
     if (!open) return;
     function onDoc(e) {
@@ -284,6 +360,8 @@ function OcLogoDropdown({
       ref: containerRef,
       className: "relative " + (className ?? ""),
       "data-oc-logo-dropdown": "",
+      "data-oc-current-category": currentCategory,
+      "data-oc-site-state": siteState,
       children: [
         /* @__PURE__ */ jsxs(
           "button",
@@ -295,10 +373,12 @@ function OcLogoDropdown({
             "aria-label": "OrangeCheck family \xB7 open property menu",
             title: "Switch OrangeCheck product",
             onClick: () => setOpen((v) => !v),
-            className: triggerClassName ?? "group hover:bg-accent/30 flex min-h-[40px] items-center gap-2 rounded-sm px-1.5 py-1 -mx-1.5 -my-1 transition-colors",
+            className: triggerClassName ?? "group hover:bg-accent/30 -mx-1.5 -my-1 flex min-h-[40px] items-center gap-2 rounded-sm px-1.5 py-1 transition-colors",
             "data-oc-logo-dropdown-trigger": "",
             children: [
               children,
+              /* @__PURE__ */ jsx(CategoryChip, { category: currentCategory }),
+              /* @__PURE__ */ jsx(SiteStateBadge, { state: siteState }),
               /* @__PURE__ */ jsx(
                 ChevronDown,
                 {
@@ -315,18 +395,28 @@ function OcLogoDropdown({
             id: menuId,
             role: "menu",
             "aria-label": "OrangeCheck family",
-            className: popoverClassName ?? "bg-background absolute left-0 top-full z-[60] mt-2 w-[min(20rem,calc(100vw-1rem))] border shadow-lg",
+            className: popoverClassName ?? "bg-background absolute top-full left-0 z-[60] mt-2 w-[min(20rem,calc(100vw-1rem))] border shadow-lg",
             "data-oc-logo-dropdown-popover": "",
             children: [
               /* @__PURE__ */ jsx("div", { className: "label-mono text-primary border-b px-4 py-2", children: "\xA7 the orangecheck family" }),
-              /* @__PURE__ */ jsx(
-                "ul",
-                {
-                  className: "max-h-[min(28rem,70vh)] overflow-y-auto py-1",
-                  role: "none",
-                  children: ENTRIES2.map((e) => {
+              /* @__PURE__ */ jsx("div", { className: "max-h-[min(28rem,70vh)] overflow-y-auto py-1", role: "none", children: SECTIONS.map(({ category, label }) => {
+                const sectionEntries = FAMILY_PROPERTIES.filter(
+                  (e) => e.category === category
+                );
+                if (sectionEntries.length === 0) return null;
+                return /* @__PURE__ */ jsxs("div", { role: "none", "data-oc-section": category, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "separator",
+                      "aria-hidden": true,
+                      className: "text-muted-foreground/60 px-4 pt-2.5 pb-1 font-mono text-[9px] font-medium tracking-widest uppercase " + (category === "hub" ? "" : "border-t mt-1"),
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("ul", { role: "none", className: "pb-1", children: sectionEntries.map((e) => {
                     const isActive = e.slug === current;
-                    const href = isActive ? homeHref : e.href;
+                    const href = isActive ? homeHref : e.origin;
                     return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
                       Link,
                       {
@@ -334,27 +424,31 @@ function OcLogoDropdown({
                         role: "menuitem",
                         onClick: () => setOpen(false),
                         "aria-current": isActive ? "page" : void 0,
-                        className: "group flex items-baseline gap-3 px-4 py-2.5 transition-colors " + (isActive ? "bg-primary/8 border-primary border-l-2 -ml-px" : "hover:bg-muted border-l-2 border-transparent -ml-px"),
+                        className: "group flex items-center gap-2 px-4 py-2 transition-colors " + (isActive ? "bg-primary/8 border-primary -ml-px border-l-2" : "hover:bg-muted -ml-px border-l-2 border-transparent"),
                         "data-oc-logo-dropdown-item": isActive ? "current" : "sibling",
+                        "data-oc-entry-category": e.category,
                         children: [
-                          /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              className: "font-display flex-1 text-[12px] font-semibold tracking-tight " + (isActive ? "text-primary" : "text-foreground group-hover:text-primary transition-colors"),
-                              children: e.label
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] tracking-wider uppercase", children: e.sub }),
-                          isActive ? /* @__PURE__ */ jsxs("span", { className: "text-primary inline-flex items-center gap-1 font-mono text-[10px] tracking-widest uppercase", children: [
+                          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "font-display text-[12px] font-semibold tracking-tight " + (isActive ? "text-primary" : "text-foreground group-hover:text-primary transition-colors"),
+                                children: e.label
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mt-0.5 font-mono text-[10px] tracking-wide", children: e.sub })
+                          ] }),
+                          /* @__PURE__ */ jsx(MenuCategoryChip, { category: e.category }),
+                          isActive ? /* @__PURE__ */ jsxs("span", { className: "text-primary inline-flex shrink-0 items-center gap-1 font-mono text-[10px] tracking-widest uppercase", children: [
                             "home",
                             /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
                           ] }) : null
                         ]
                       }
                     ) }, e.slug);
-                  })
-                }
-              ),
+                  }) })
+                ] }, category);
+              }) }),
               /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-2 font-mono text-[10px] tracking-widest uppercase", children: /* @__PURE__ */ jsx(
                 Link,
                 {
@@ -371,6 +465,271 @@ function OcLogoDropdown({
     }
   );
 }
+function shortenDid(s) {
+  if (s.length <= 14) return s;
+  return `${s.slice(0, 7)}\u2026${s.slice(-5)}`;
+}
+function OcAccountMenu({
+  current,
+  signInUrl = "/signin",
+  signInLabel = "sign in",
+  menuItems,
+  showFamilyDashboard,
+  build,
+  siteState,
+  className,
+  triggerClassName,
+  popoverClassName
+}) {
+  const session = useOcSession();
+  const { status, account, signOut, refresh } = session;
+  const [hydrated, setHydrated] = useState(false);
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+  const property = findFamilyProperty(current);
+  const hostname = property?.hostname ?? `${current}.ochk.io`;
+  const isHome = current === "home";
+  const familyDashboardEnabled = showFamilyDashboard ?? !isHome;
+  useEffect(() => setHydrated(true), []);
+  useEffect(() => {
+    const onWake = () => {
+      if (document.visibilityState === "visible") void refresh();
+    };
+    const onFocus = () => void refresh();
+    document.addEventListener("visibilitychange", onWake);
+    window.addEventListener("focus", onFocus);
+    return () => {
+      document.removeEventListener("visibilitychange", onWake);
+      window.removeEventListener("focus", onFocus);
+    };
+  }, [refresh]);
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e) => {
+      if (wrapRef.current && !wrapRef.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 signInTrigger = /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: signInUrl,
+      "aria-label": signInLabel,
+      "data-oc-account-menu-signin": "",
+      className: triggerClassName ?? "border-input bg-background hover:bg-accent inline-flex h-8 items-center justify-center rounded-md border px-3 font-mono text-[11px] font-semibold tracking-widest uppercase transition-colors",
+      children: signInLabel
+    }
+  );
+  if (!hydrated || status === "loading") {
+    return signInTrigger;
+  }
+  if (status !== "authenticated" || !account) {
+    return signInTrigger;
+  }
+  const displayName = account.displayName ?? null;
+  const label = displayName ?? shortenDid(account.didOc);
+  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(18rem,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
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "text-foreground/90 font-mono text-[11px] leading-tight break-all", children: account.didOc }),
+                displayName ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/80 mt-1 font-mono text-[10px] tracking-wide", children: displayName }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "p-1", 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 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(
+                    Link,
+                    {
+                      href: item.href,
+                      onClick,
+                      role: "menuitem",
+                      className: cls,
+                      "data-oc-account-menu-item": "",
+                      children: inner
+                    },
+                    item.href
+                  );
+                }),
+                familyDashboardEnabled ? /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    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,
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: () => {
+                      setOpen(false);
+                      void signOut();
+                    },
+                    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" })
+                    ]
+                  }
+                )
+              ] }),
+              build ? /* @__PURE__ */ jsx(BuildFooter, { hostname, build, state: siteState }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function BuildFooter({
+  hostname,
+  build,
+  state
+}) {
+  const sha = build.sha;
+  const showSha = !!sha && sha !== "dev";
+  const commitUrl = showSha && build.repo ? `https://github.com/${build.repo}/commit/${sha}` : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "text-muted-foreground/60 border-border border-t px-3 py-2 font-mono text-[9.5px] tracking-widest uppercase",
+      "data-oc-account-menu-build": "",
+      children: [
+        hostname,
+        state && state !== "live" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " \xB7 ",
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/80", children: state })
+        ] }) : null,
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/80", children: [
+          "v",
+          build.version,
+          showSha ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            " \xB7 ",
+            commitUrl ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: commitUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                className: "hover:text-foreground/90 underline decoration-dotted underline-offset-2",
+                children: sha
+              }
+            ) : sha
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
 function AppShell({
   eyebrow,
   title,
@@ -494,6 +853,6 @@ function StatTile({ children, ...item }) {
   ] });
 }
 
-export { AppShell, EcosystemSwitcher, EmptyState, OcLogoDropdown, SectionHeader, StatGrid, StatTile };
+export { AppShell, EcosystemSwitcher, EmptyState, FAMILY_PROPERTIES, OcAccountMenu, OcLogoDropdown, SITE_STATE_LABEL, SectionHeader, StatGrid, StatTile, findFamilyProperty };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map