@orangecheck/ui 0.8.2 → 0.10.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Boxes, ChevronDown, Check, CornerDownLeft } from 'lucide-react';
+import { Boxes, ChevronDown, Check, CornerDownLeft, Copy } from 'lucide-react';
 import Link5 from 'next/link';
 import { useState, useRef, useEffect, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -85,9 +85,19 @@ var ENTRIES = [
     docsHref: "https://docs.ochk.io/pledge"
   }
 ];
+var OWNER_ENTRIES = [
+  {
+    slug: "analytics",
+    href: "https://analytics.ochk.io",
+    label: "oc\xB7analytics",
+    sub: "owner cockpit",
+    docsHref: "https://analytics.ochk.io"
+  }
+];
 function EcosystemSwitcher({
   current,
-  className
+  className,
+  showOwnerEntries = false
 }) {
   const [open, setOpen] = useState(false);
   const containerRef = useRef(null);
@@ -137,7 +147,7 @@ function EcosystemSwitcher({
         className: "bg-background absolute right-0 top-full z-[60] mt-2 w-72 border shadow-lg",
         children: [
           /* @__PURE__ */ jsx("div", { className: "label-mono text-primary border-b px-4 py-2", children: "\xA7 the family" }),
-          /* @__PURE__ */ jsx("ul", { className: "py-1", children: ENTRIES.map((e) => {
+          /* @__PURE__ */ jsx("ul", { className: "py-1", children: [...ENTRIES, ...showOwnerEntries ? OWNER_ENTRIES : []].map((e) => {
             const isActive2 = e.slug === current;
             return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
               Link5,
@@ -275,6 +285,15 @@ var FAMILY_PROPERTIES = [
     sub: "swear \u2014 bonded commitment",
     docsHref: "https://docs.ochk.io/pledge",
     category: "protocol"
+  },
+  {
+    slug: "analytics",
+    origin: "https://analytics.ochk.io",
+    hostname: "analytics.ochk.io",
+    label: "oc\xB7analytics",
+    sub: "owner cockpit",
+    docsHref: "https://analytics.ochk.io",
+    category: "owner"
   }
 ];
 var SITE_STATE_LABEL = {
@@ -287,18 +306,20 @@ function findFamilyProperty(slug) {
 var SECTIONS = [
   { category: "hub", label: "hub" },
   { category: "product", label: "products" },
-  { category: "protocol", label: "protocols" }
+  { category: "protocol", label: "protocols" },
+  { category: "owner", label: "owner" }
 ];
 function CategoryChip({ category }) {
   if (category === "hub") return null;
-  const isProduct = category === "product";
+  const label = category === "product" ? "product" : category === "protocol" ? "protocol" : "owner";
+  const tone = category === "product" ? "border-primary/25 bg-primary/10 text-primary" : category === "protocol" ? "border-muted-foreground/20 bg-muted/40 text-muted-foreground/85" : "border-warning/30 bg-warning/10 text-warning";
   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"),
+      "aria-label": category === "product" ? "commercial product" : category === "protocol" ? "protocol reference" : "owner-only surface",
+      className: "ml-1 hidden rounded-sm border px-1.5 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase sm:inline-block " + tone,
       "data-oc-category": category,
-      children: isProduct ? "product" : "protocol"
+      children: label
     }
   );
 }
@@ -316,13 +337,14 @@ function SiteStateBadge({ state }) {
 }
 function MenuCategoryChip({ category }) {
   if (category === "hub") return null;
-  const isProduct = category === "product";
+  const label = category === "product" ? "pro" : category === "protocol" ? "spec" : "own";
+  const tone = category === "product" ? "bg-primary/10 text-primary" : category === "protocol" ? "bg-muted/60 text-muted-foreground/80" : "bg-warning/15 text-warning";
   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"
+      className: "inline-block shrink-0 rounded-sm px-1 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase " + tone,
+      children: label
     }
   );
 }
@@ -333,7 +355,8 @@ function OcLogoDropdown({
   children,
   className,
   triggerClassName,
-  popoverClassName
+  popoverClassName,
+  showOwnerEntries = false
 }) {
   const [open, setOpen] = useState(false);
   const containerRef = useRef(null);
@@ -433,6 +456,7 @@ function OcLogoDropdown({
             children: [
               /* @__PURE__ */ jsx("div", { className: "label-mono text-primary border-b px-4 py-2", children: "\xA7 the orangecheck family" }),
               /* @__PURE__ */ jsx("div", { className: "max-h-[min(28rem,70vh)] overflow-y-auto py-1", role: "none", children: SECTIONS.map(({ category, label }) => {
+                if (category === "owner" && !showOwnerEntries) return null;
                 const sectionEntries = FAMILY_PROPERTIES.filter(
                   (e) => e.category === category
                 );
@@ -502,6 +526,71 @@ function shortenDid(s) {
   if (s.length <= 14) return s;
   return `${s.slice(0, 7)}\u2026${s.slice(-5)}`;
 }
+async function writeClipboard(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.setAttribute("readonly", "");
+    ta.style.position = "fixed";
+    ta.style.top = "-1000px";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+function CopyableDid({ did }) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const onCopy = async () => {
+    const ok = await writeClipboard(did);
+    if (!ok) return;
+    setCopied(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setCopied(false), 1600);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      "aria-label": copied ? "OrangeCheck identity copied to clipboard" : `Copy OrangeCheck identity ${did} to clipboard`,
+      title: "Copy identity",
+      "data-oc-account-menu-copy-did": "",
+      "data-copied": copied ? "" : void 0,
+      className: "group/did hover:bg-accent focus-visible:ring-ring/60 -mx-1.5 mt-px flex w-[calc(100%+0.75rem)] items-start gap-1.5 rounded px-1.5 py-1 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-foreground/90 min-w-0 flex-1 font-mono text-[11px] leading-tight break-all", children: did }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "mt-px shrink-0 transition-colors " + (copied ? "text-primary" : "text-muted-foreground/50 group-hover/did:text-foreground/80"),
+            "aria-hidden": true,
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? "Copied to clipboard" : "" })
+      ]
+    }
+  );
+}
 function OcAccountMenu(props) {
   const session = useOcSession();
   return /* @__PURE__ */ jsx(
@@ -645,7 +734,7 @@ function OcAccountMenuView({
                   "\xA7 signed in \xB7 ",
                   hostname
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "text-foreground/90 font-mono text-[11px] leading-tight break-all", children: account.didOc }),
+                /* @__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
               ] }),
               primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(