@cosxai/ui 0.12.0 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/primitives/CopyField.tsx

@@ -0,0 +1,139 @@
+import { forwardRef, useCallback, useRef, useState, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+// CopyField — read-only value field with an embedded Copy button.
+//
+// One bordered frame (same 36px field chrome as Input-with-addon):
+// the value renders mono + ellipsized on the left, the Copy button
+// sits INSIDE the frame flush right on a muted slab (mirrors Input's
+// suffix addon). Clicking copies to the clipboard and flips the
+// label to "Copied ✓" for a beat; clicking the value text selects it
+// (manual-copy fallback for non-secure origins where the Clipboard
+// API is unavailable).
+//
+// Use for share links, signing URLs, tokens, API keys — anywhere the
+// user's next action is overwhelmingly "copy this". Compose with:
+// dialog bodies (share link rows), sidebar token reveals, settings
+// pages (API-key display).
+//
+// Forwards ref to the copy <button>. Spreads `...rest` on the frame
+// so consumers can pass data-* / aria-* / style / className.
+
+export interface CopyFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
+  // The string shown + copied. Rendered mono, single-line, ellipsized.
+  value: string;
+  // Copy-button label; flips to `copiedLabel` after a click.
+  copyLabel?: ReactNode;
+  copiedLabel?: ReactNode;
+  // How long the copied state lingers before flipping back (ms).
+  copiedForMs?: number;
+  // Notified after a successful clipboard write. Clipboard failures
+  // are silent by design — the value stays selectable in the field.
+  onCopied?: (value: string) => void;
+}
+
+export const CopyField = forwardRef<HTMLButtonElement, CopyFieldProps>(function CopyField(
+  {
+    value,
+    copyLabel = "Copy",
+    copiedLabel = "Copied ✓",
+    copiedForMs = 1500,
+    onCopied,
+    className,
+    style,
+    ...rest
+  },
+  ref,
+) {
+  const [copied, setCopied] = useState(false);
+  const valueRef = useRef<HTMLElement | null>(null);
+
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard
+      ?.writeText(value)
+      .then(() => onCopied?.(value))
+      .catch(() => {
+        // Clipboard rejected (permissions / non-secure origin). The
+        // value stays visible + selectable in the field — no error UI.
+      });
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), copiedForMs);
+  }, [value, copiedForMs, onCopied]);
+
+  // Click-to-select on the value — the manual-copy fallback.
+  const handleSelectAll = useCallback(() => {
+    const node = valueRef.current;
+    if (!node) return;
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }, []);
+
+  return (
+    <div
+      {...rest}
+      className={cn("ck-copy-field", className)}
+      style={{
+        display: "flex",
+        alignItems: "stretch",
+        height: 36,
+        background: "var(--ck-bg-surface)",
+        border: "1px solid var(--ck-border-strong)",
+        borderRadius: "var(--ck-radius-sm)",
+        overflow: "hidden",
+        minWidth: 0,
+        ...(style ?? {}),
+      }}
+    >
+      <code
+        ref={valueRef}
+        title={value}
+        onClick={handleSelectAll}
+        style={{
+          flex: 1,
+          minWidth: 0,
+          alignSelf: "center",
+          padding: "0 12px",
+          font: "400 12px/1.5 var(--ck-font-mono, ui-monospace, monospace)",
+          color: "var(--ck-text-primary)",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          cursor: "text",
+        }}
+      >
+        {value}
+      </code>
+      <button
+        ref={ref}
+        type="button"
+        onClick={handleCopy}
+        disabled={copied}
+        className="ck-copy-field-btn"
+        style={{
+          flex: "0 0 auto",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0 14px",
+          // Reserve the wider copied-label footprint so the value
+          // column doesn't shift mid-flash.
+          minWidth: 84,
+          border: "none",
+          borderLeft: "1px solid var(--ck-border-strong)",
+          background: "var(--ck-bg-muted)",
+          color: copied ? "var(--ck-text-secondary)" : "var(--ck-text-primary)",
+          font: "500 11px/1 var(--ck-font-sans)",
+          letterSpacing: "0.04em",
+          textTransform: "uppercase",
+          cursor: copied ? "default" : "pointer",
+          transition: "color var(--ck-dur-fast) var(--ck-ease)",
+        }}
+      >
+        {copied ? copiedLabel : copyLabel}
+      </button>
+    </div>
+  );
+});

package/src/primitives/SignaturePad.tsx

@@ -165,6 +165,30 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
       };
     }, [fontReady]);
 
+    // Mode switch — clear the canvas so a stale typed baseline
+    // doesn't hang around behind a drawn signature (or vice versa).
+    // MUST be declared BEFORE the typed-repaint + drawn-restore
+    // effects: effects run in declaration order, and v0.13.0 had
+    // this clear declared LAST — on switching to typed mode with a
+    // prefilled name the repaint painted first and this then wiped
+    // it (QA 2026-07-17: Type tab showed an empty pad until the
+    // signer edited the name). Skips the mount run so a parent-held
+    // captured value isn't nulled on first render.
+    const prevModeRef = useRef(mode);
+    useEffect(() => {
+      if (prevModeRef.current === mode) return;
+      prevModeRef.current = mode;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      dirtyRef.current = false;
+      onChange(null);
+      // Only fire when mode itself changes.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode]);
+
     // Repaint on typedName / mode / fontReady change. Drawn mode
     // doesn't repaint imperatively — strokes are appended as the user
     // draws.
@@ -233,20 +257,6 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mode]);
 
-    // Mode switch — clear the canvas so a stale typed baseline
-    // doesn't hang around behind a drawn signature (or vice versa).
-    useEffect(() => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      dirtyRef.current = false;
-      onChange(null);
-      // Only fire when mode itself changes.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mode]);
-
     const clear = useCallback(() => {
       const canvas = canvasRef.current;
       if (canvas) {

package/src/primitives/index.ts

@@ -30,3 +30,5 @@ export { MentionCombobox, findActiveMentionStart, extractQuery } from "./Mention
 export type { MentionComboboxProps, MentionComboboxHandle } from "./MentionCombobox";
 export { SignaturePad } from "./SignaturePad";
 export type { SignaturePadProps, SignaturePadHandle } from "./SignaturePad";
+export { CopyField } from "./CopyField";
+export type { CopyFieldProps } from "./CopyField";