@orangecheck/ui 0.9.0 → 0.10.0

package/dist/index.js

@@ -532,6 +532,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] = react.useState(false);
+  const timerRef = react.useRef(null);
+  react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-foreground/90 min-w-0 flex-1 font-mono text-[11px] leading-tight break-all", children: did }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? "Copied to clipboard" : "" })
+      ]
+    }
+  );
+}
 function OcAccountMenu(props) {
   const session = authClient.useOcSession();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -675,7 +740,7 @@ function OcAccountMenuView({
                   "\xA7 signed in \xB7 ",
                   hostname
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/90 font-mono text-[11px] leading-tight break-all", children: account.didOc }),
+                /* @__PURE__ */ jsxRuntime.jsx(CopyableDid, { did: account.didOc }),
                 displayName ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground/80 mt-1 font-mono text-[10px] tracking-wide", children: displayName }) : null
               ] }),
               primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(