@useclickly/react 1.0.1 → 1.0.3

package/dist/index.js

@@ -1,5 +1,5 @@
 // packages/react/src/Clickly.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useState as useState7 } from "react";
 import { createPortal } from "react-dom";
 
 // packages/core/dist/index.js
@@ -1016,10 +1016,10 @@ function hasFixedAncestor(el) {
 }
 
 // packages/react/src/internal/ClicklyRoot.tsx
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect7, useState as useState6 } from "react";
 
 // packages/react/src/internal/Toolbar.tsx
-import { useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
 
 // packages/react/src/hooks/useDraggable.ts
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -1332,6 +1332,18 @@ function Icon({
     }
   );
 }
+var IconFreeze = () => /* @__PURE__ */ jsxs(Icon, { size: 15, children: [
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22" }),
+  /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "5", y1: "5", x2: "19", y2: "19" }),
+  /* @__PURE__ */ jsx("line", { x1: "19", y1: "5", x2: "5", y2: "19" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor", stroke: "none" })
+] });
+var IconInfo = () => /* @__PURE__ */ jsxs(Icon, { size: 14, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "8", strokeWidth: "2.5" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "12", y2: "16" })
+] });
 var IconCursor = () => /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M4 4l6 16 2-7 7-2z" }) });
 var IconLayers = () => /* @__PURE__ */ jsxs(Icon, { children: [
   /* @__PURE__ */ jsx("path", { d: "M12 2l9 5-9 5-9-5 9-5z" }),
@@ -1550,7 +1562,46 @@ function AnnotationCard({
 
 // packages/react/src/internal/Toolbar.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var TOOLBAR_SIZE = { width: 320, height: 44 };
+var TOOLBAR_SIZE = { width: 360, height: 44 };
+var SHORTCUTS = [
+  { keys: ["\u2318", "\u21E7", "F"], label: "Toggle toolbar" },
+  { keys: ["1"], label: "Single select mode" },
+  { keys: ["2"], label: "Multi select mode" },
+  { keys: ["3"], label: "Area drag mode" },
+  { keys: ["\u21B5"], label: "Annotate pinned elements" },
+  { keys: ["Esc"], label: "Cancel / clear / close" },
+  { keys: ["\u2318", "\u21B5"], label: "Submit annotation" },
+  { keys: ["C"], label: "Copy all annotations" },
+  { keys: ["X"], label: "Clear all annotations" }
+];
+function ShortcutsPanel() {
+  const [visible, setVisible] = useState3(false);
+  return /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      className: "clickly-tip shortcuts-trigger",
+      onMouseEnter: () => setVisible(true),
+      onMouseLeave: () => setVisible(false),
+      children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            className: "clickly-btn icon-only",
+            "aria-label": "Show keyboard shortcuts",
+            children: /* @__PURE__ */ jsx4(IconInfo, {})
+          }
+        ),
+        visible && /* @__PURE__ */ jsxs4("div", { className: "shortcuts-panel", role: "tooltip", children: [
+          /* @__PURE__ */ jsx4("div", { className: "shortcuts-title", children: "Keyboard shortcuts" }),
+          SHORTCUTS.map((s) => /* @__PURE__ */ jsxs4("div", { className: "shortcuts-row", children: [
+            /* @__PURE__ */ jsx4("span", { className: "shortcuts-label", children: s.label }),
+            /* @__PURE__ */ jsx4("span", { className: "shortcuts-keys", children: s.keys.map((k) => /* @__PURE__ */ jsx4("kbd", { children: k }, k)) })
+          ] }, s.label))
+        ] })
+      ]
+    }
+  );
+}
 function Tip({
   label,
   shortcut,
@@ -1571,7 +1622,38 @@ function Toolbar({ engine, onCollapse }) {
   const outputDetail = useSettings((s) => s.outputDetail);
   const [showSettings, setShowSettings] = useState3(false);
   const [showList, setShowList] = useState3(false);
+  const [frozen, setFrozen] = useState3(false);
   const anchorRef = useRef4(null);
+  useEffect4(() => {
+    const STYLE_ID = "clickly-freeze-animations";
+    const gsap = window.gsap;
+    if (frozen) {
+      if (!document.getElementById(STYLE_ID)) {
+        const el = document.createElement("style");
+        el.id = STYLE_ID;
+        el.textContent = `
+          *, *::before, *::after {
+            animation-play-state: paused !important;
+            transition-duration: 0ms !important;
+            transition-delay: 0ms !important;
+          }
+        `;
+        document.head.appendChild(el);
+      }
+      if (gsap?.globalTimeline) {
+        gsap.globalTimeline.pause();
+      }
+    } else {
+      document.getElementById(STYLE_ID)?.remove();
+      if (gsap?.globalTimeline) {
+        gsap.globalTimeline.resume();
+      }
+    }
+    return () => {
+      document.getElementById(STYLE_ID)?.remove();
+      if (gsap?.globalTimeline) gsap.globalTimeline.resume();
+    };
+  }, [frozen]);
   const { position, handleProps } = useDraggable(
     {
       x: Math.max(8, window.innerWidth - TOOLBAR_SIZE.width - 16),
@@ -1654,6 +1736,16 @@ function Toolbar({ engine, onCollapse }) {
           ) }),
           /* @__PURE__ */ jsx4("div", { className: "divider" })
         ] }),
+        /* @__PURE__ */ jsx4(Tip, { label: frozen ? "Unfreeze animations" : "Freeze animations", children: /* @__PURE__ */ jsx4(
+          "button",
+          {
+            className: `clickly-btn icon-only${frozen ? " is-freeze" : ""}`,
+            onClick: () => setFrozen((v) => !v),
+            "aria-label": frozen ? "Unfreeze page animations" : "Freeze page animations",
+            "aria-pressed": frozen,
+            children: /* @__PURE__ */ jsx4(IconFreeze, {})
+          }
+        ) }),
         /* @__PURE__ */ jsx4(Tip, { label: "Annotations", shortcut: "L", children: /* @__PURE__ */ jsxs4(
           "button",
           {
@@ -1687,6 +1779,7 @@ function Toolbar({ engine, onCollapse }) {
           }
         ) }),
         /* @__PURE__ */ jsx4("div", { className: "divider" }),
+        /* @__PURE__ */ jsx4(ShortcutsPanel, {}),
         /* @__PURE__ */ jsx4(Tip, { label: "Settings", children: /* @__PURE__ */ jsx4(
           "button",
           {
@@ -1747,7 +1840,7 @@ function CollapsedFAB({ onExpand }) {
 }
 
 // packages/react/src/internal/AnnotationPopup.tsx
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "react";
 import { nanoid } from "nanoid";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var POPUP_W = 320;
@@ -1765,7 +1858,7 @@ function AnnotationPopup({ engine }) {
   const targetElRef = useRef5(null);
   const taRef = useRef5(null);
   const popupRef = useRef5(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (state.kind === "annotating") {
       setComment("");
       setShowStyles(false);
@@ -1782,7 +1875,7 @@ function AnnotationPopup({ engine }) {
       requestAnimationFrame(() => taRef.current?.focus());
     }
   }, [state.kind, engine]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (state.kind !== "annotating") return;
     const onDown = (e) => {
       if (popupRef.current && e.composedPath().includes(popupRef.current)) return;
@@ -1900,10 +1993,10 @@ function AnnotationPopup({ engine }) {
     if (left + POPUP_W > vw) left = Math.max(8, vw - POPUP_W - 8);
     setPlacement({ top, left, label });
   }, [state, engine]);
-  useEffect4(() => {
+  useEffect5(() => {
     calcPlacement();
   }, [calcPlacement]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (state.kind !== "annotating") return;
     const onScroll = () => calcPlacement();
     window.addEventListener("scroll", onScroll, { capture: true, passive: true });
@@ -2087,12 +2180,12 @@ function describeSelection(sel) {
 }
 
 // packages/react/src/internal/AnnotationPins.tsx
-import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function AnnotationPins() {
   const annotations = useAnnotationsList();
   const [, setVersion] = useState5(0);
-  useEffect5(() => {
+  useEffect6(() => {
     let raf = null;
     const update = () => {
       if (raf !== null) return;
@@ -2153,24 +2246,36 @@ function pinLabel(annotation) {
   const tag = raw.split(/[.#\s]/)[0] ?? "";
   return (TAG_LABELS3[tag] ?? tag) || "element";
 }
+function parseStyles(raw) {
+  if (!raw) return [];
+  return raw.split(";").map((s) => s.trim()).filter(Boolean).map((s) => {
+    const colon = s.indexOf(":");
+    if (colon === -1) return null;
+    return [s.slice(0, colon).trim(), s.slice(colon + 1).trim()];
+  }).filter(Boolean);
+}
 function Pin({ number, annotation }) {
   const remove = useAnnotations((s) => s.remove);
   const update = useAnnotations((s) => s.update);
   const [hovered, setHovered] = useState5(false);
   const [editing, setEditing] = useState5(false);
   const [draft, setDraft] = useState5(annotation.comment);
+  const [showStyles, setShowStyles] = useState5(false);
   const taRef = useRef6(null);
   const editRef = useRef6(null);
-  const pos = resolvePosition(annotation);
-  if (!pos) return null;
+  const styleEntries = parseStyles(annotation.computedStyles);
   const label = pinLabel(annotation);
+  const headerLabel = annotation.isMultiSelect ? `${label} (multi-select)` : `${label}: "${annotation.elementPath}"`;
   const openEdit = () => {
     setDraft(annotation.comment);
     setEditing(true);
     setHovered(false);
     requestAnimationFrame(() => taRef.current?.focus());
   };
-  const closeEdit = () => setEditing(false);
+  const closeEdit = () => {
+    setEditing(false);
+    setShowStyles(false);
+  };
   const save = () => {
     const trimmed = draft.trim();
     if (trimmed) update(annotation.id, { comment: trimmed });
@@ -2180,7 +2285,7 @@ function Pin({ number, annotation }) {
     if (e.key === "Escape") closeEdit();
     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) save();
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (!editing) return;
     const onDown = (e) => {
       if (editRef.current && e.composedPath().includes(editRef.current)) return;
@@ -2189,6 +2294,27 @@ function Pin({ number, annotation }) {
     window.addEventListener("pointerdown", onDown, true);
     return () => window.removeEventListener("pointerdown", onDown, true);
   }, [editing]);
+  useEffect6(() => {
+    if (!editing) return;
+    let el = null;
+    if (annotation.elementPath) {
+      try {
+        el = document.querySelector(annotation.elementPath);
+      } catch {
+      }
+    }
+    if (!el) return;
+    const prevOutline = el.style.outline;
+    const prevOffset = el.style.outlineOffset;
+    el.style.outline = "2px solid #10b981";
+    el.style.outlineOffset = "3px";
+    return () => {
+      el.style.outline = prevOutline;
+      el.style.outlineOffset = prevOffset;
+    };
+  }, [editing, annotation.elementPath]);
+  const pos = resolvePosition(annotation);
+  if (!pos) return null;
   return /* @__PURE__ */ jsxs7(
     "div",
     {
@@ -2219,21 +2345,42 @@ function Pin({ number, annotation }) {
             className: "pin-edit",
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsx7("div", { className: "pin-edit-header", children: /* @__PURE__ */ jsxs7("span", { className: "pin-edit-label", children: [
-                label,
-                ": ",
-                /* @__PURE__ */ jsx7("span", { className: "pin-edit-path", children: annotation.elementPath })
-              ] }) }),
+              /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  className: "popup-header",
+                  role: "button",
+                  "aria-expanded": showStyles,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowStyles((v) => !v);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx7("span", { className: "popup-chevron", children: showStyles ? "\u25BE" : "\u203A" }),
+                    /* @__PURE__ */ jsx7("span", { className: "popup-label", children: headerLabel })
+                  ]
+                }
+              ),
+              showStyles && styleEntries.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "popup-styles", children: [
+                styleEntries.map(([k, v]) => /* @__PURE__ */ jsxs7("div", { className: "style-row", children: [
+                  /* @__PURE__ */ jsx7("span", { className: "style-key", children: k }),
+                  /* @__PURE__ */ jsx7("span", { className: "style-val", children: v })
+                ] }, k)),
+                annotation.suggestedCss && /* @__PURE__ */ jsxs7("div", { className: "style-hint", style: { color: "#7c3aed", borderTopColor: "rgba(124,58,237,0.2)" }, children: [
+                  /* @__PURE__ */ jsx7("strong", { children: "Suggested changes:" }),
+                  /* @__PURE__ */ jsx7("br", {}),
+                  annotation.suggestedCss
+                ] })
+              ] }),
               /* @__PURE__ */ jsx7(
                 "textarea",
                 {
                   ref: taRef,
-                  className: "pin-edit-textarea",
                   value: draft,
                   onChange: (e) => setDraft(e.target.value),
                   onKeyDown,
-                  placeholder: "Describe the issue\u2026",
-                  rows: 3
+                  placeholder: "Describe the issue\u2026  (\u2318/Ctrl + Enter to save)",
+                  "aria-label": "Annotation comment"
                 }
               ),
               /* @__PURE__ */ jsxs7("div", { className: "pin-edit-actions", children: [
@@ -2246,9 +2393,9 @@ function Pin({ number, annotation }) {
                     children: /* @__PURE__ */ jsx7(IconTrash, {})
                   }
                 ),
-                /* @__PURE__ */ jsxs7("div", { className: "pin-edit-right", children: [
-                  /* @__PURE__ */ jsx7("button", { className: "pin-edit-cancel", onClick: closeEdit, children: "Cancel" }),
-                  /* @__PURE__ */ jsx7("button", { className: "pin-edit-save", onClick: save, children: "Save" })
+                /* @__PURE__ */ jsxs7("div", { className: "row", style: { margin: 0, flex: 1, justifyContent: "flex-end" }, children: [
+                  /* @__PURE__ */ jsx7("button", { className: "ghost", onClick: closeEdit, children: "Cancel" }),
+                  /* @__PURE__ */ jsx7("button", { className: "primary", onClick: save, children: "Save" })
                 ] })
               ] })
             ]
@@ -2270,10 +2417,7 @@ function resolvePosition(a) {
     }
   }
   if (a.boundingBox) {
-    return {
-      x: a.boundingBox.x + a.boundingBox.width - 11,
-      y: a.boundingBox.y - 11
-    };
+    return { x: a.boundingBox.x + a.boundingBox.width - 11, y: a.boundingBox.y - 11 };
   }
   return null;
 }
@@ -2289,17 +2433,17 @@ function ClicklyRoot({
   const outputDetail = useSettings((s) => s.outputDetail);
   const markerColor = useSettings((s) => s.markerColor);
   const engineState = useEngineState(engine);
-  useEffect6(() => {
+  useEffect7(() => {
     host.style.setProperty("--clickly-hover", markerColor);
   }, [host, markerColor]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (expanded) {
       if (engine.getSnapshot().kind === "idle") engine.activate("single");
     } else {
       if (engine.getSnapshot().kind !== "idle") engine.deactivate();
     }
   }, [expanded, engine]);
-  useEffect6(() => {
+  useEffect7(() => {
     const active = engineState.kind !== "idle";
     if (active) document.body.setAttribute("data-clickly-active", "");
     else document.body.removeAttribute("data-clickly-active");
@@ -2317,7 +2461,7 @@ function ClicklyRoot({
       document.body.removeAttribute("data-clickly-annotating");
     };
   }, [engineState]);
-  useEffect6(() => {
+  useEffect7(() => {
     const onKey = (e) => {
       const tag = e.target?.tagName;
       if (tag === "INPUT" || tag === "TEXTAREA") return;
@@ -2497,6 +2641,14 @@ var REACT_UI_CSS = `
 .clickly-btn.is-active:hover { background: #0284c7; }
 .clickly-btn[disabled] { opacity: 0.28; cursor: not-allowed; pointer-events: none; }
 
+/* Freeze-animations active state \u2014 icy blue */
+.clickly-btn.is-freeze {
+  background: rgba(99, 179, 237, 0.18);
+  color: #63b3ed;
+  box-shadow: 0 0 0 1px rgba(99,179,237,0.35), 0 2px 8px rgba(99,179,237,0.2);
+}
+.clickly-btn.is-freeze:hover { background: rgba(99, 179, 237, 0.26); }
+
 .clickly-btn.icon-only {
   width: 32px;
   padding: 0;
@@ -2574,6 +2726,91 @@ var REACT_UI_CSS = `
   color: #94a3b8;
 }
 
+/* \u2500\u2500\u2500 Shortcuts panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.shortcuts-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.shortcuts-panel {
+  position: absolute;
+  bottom: calc(100% + 12px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 260px;
+  background: rgba(9, 14, 28, 0.97);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
+  padding: 10px;
+  z-index: 10;
+  animation: clickly-fade-in 100ms ease-out;
+  pointer-events: none;
+}
+
+/* Arrow pointing down */
+.shortcuts-panel::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-color: rgba(9, 14, 28, 0.97);
+}
+
+.shortcuts-title {
+  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 4px 8px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  margin-bottom: 6px;
+}
+
+.shortcuts-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 4px;
+  border-radius: 6px;
+  gap: 8px;
+}
+.shortcuts-row:hover { background: rgba(255,255,255,0.04); }
+
+.shortcuts-label {
+  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  color: #94a3b8;
+  flex: 1;
+  min-width: 0;
+}
+
+.shortcuts-keys {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.shortcuts-keys kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  background: rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.10);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
+  color: #e2e8f0;
+}
+
 /* \u2500\u2500\u2500 Popup & popovers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .clickly-popup, .clickly-popover {
@@ -2597,8 +2834,10 @@ var REACT_UI_CSS = `
   flex-direction: column;
 }
 
-/* Collapsible header row \u2014 shows element label + CSS toggle */
-.clickly-popup .popup-header {
+/* \u2500\u2500\u2500 Shared inner styles \u2014 apply to both popup and pin-edit \u2500\u2500\u2500 */
+
+.clickly-popup .popup-header,
+.pin-edit .popup-header {
   display: flex;
   align-items: center;
   gap: 5px;
@@ -2612,9 +2851,11 @@ var REACT_UI_CSS = `
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
   transition: background 80ms ease;
 }
-.clickly-popup .popup-header:hover { background: #f1f5f9; }
+.clickly-popup .popup-header:hover,
+.pin-edit .popup-header:hover { background: #f1f5f9; }
 
-.clickly-popup .popup-chevron {
+.clickly-popup .popup-chevron,
+.pin-edit .popup-chevron {
   font-size: 12px;
   color: #94a3b8;
   flex-shrink: 0;
@@ -2622,7 +2863,8 @@ var REACT_UI_CSS = `
   text-align: center;
 }
 
-.clickly-popup .popup-label {
+.clickly-popup .popup-label,
+.pin-edit .popup-label {
   flex: 1;
   overflow: hidden;
   white-space: nowrap;
@@ -2660,7 +2902,8 @@ var REACT_UI_CSS = `
 }
 
 /* Computed-styles panel */
-.clickly-popup .popup-styles {
+.clickly-popup .popup-styles,
+.pin-edit .popup-styles {
   margin-bottom: 8px;
   padding: 8px;
   background: #f8fafc;
@@ -2673,7 +2916,8 @@ var REACT_UI_CSS = `
   overscroll-behavior: contain;
 }
 
-.clickly-popup .style-row {
+.clickly-popup .style-row,
+.pin-edit .style-row {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -2683,17 +2927,27 @@ var REACT_UI_CSS = `
   transition: background 80ms ease;
 }
 
-.clickly-popup .style-row--changed {
+.clickly-popup .style-row--changed,
+.pin-edit .style-row--changed {
   background: rgba(245, 158, 11, 0.10);
 }
 
-.clickly-popup .style-key {
+.clickly-popup .style-key,
+.pin-edit .style-key {
   color: #7c3aed;
   flex-shrink: 0;
   min-width: 90px;
   font-size: 11px;
 }
 
+.clickly-popup .style-val,
+.pin-edit .style-val {
+  color: #0f172a;
+  font-size: 11px;
+  word-break: break-all;
+  flex: 1;
+}
+
 /* Editable value input \u2014 live CSS preview */
 .clickly-popup .style-val-input {
   flex: 1;
@@ -2732,8 +2986,9 @@ var REACT_UI_CSS = `
   background: rgba(245,158,11,0.12);
 }
 
-/* Hint text at bottom of CSS panel when edits exist */
-.clickly-popup .style-hint {
+/* Hint text at bottom of CSS panel */
+.clickly-popup .style-hint,
+.pin-edit .style-hint {
   margin-top: 6px;
   padding-top: 6px;
   border-top: 1px solid #e2e8f0;
@@ -2743,7 +2998,8 @@ var REACT_UI_CSS = `
   line-height: 1.4;
 }
 
-.clickly-popup textarea {
+.clickly-popup textarea,
+.pin-edit textarea {
   width: 100%;
   min-height: 64px;
   max-height: 160px;
@@ -2754,33 +3010,40 @@ var REACT_UI_CSS = `
   font: inherit;
   color: inherit;
 }
-.clickly-popup textarea:focus {
+.clickly-popup textarea:focus,
+.pin-edit textarea:focus {
   outline: none;
   border-color: #0ea5e9;
   box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
 }
 
-.clickly-popup .row {
+.clickly-popup .row,
+.pin-edit .row {
   display: flex;
   justify-content: flex-end;
   gap: 6px;
   margin-top: 10px;
 }
 
-.clickly-popup .row .ghost {
+.clickly-popup .row .ghost,
+.pin-edit .row .ghost {
   background: transparent;
   color: #475569;
   border: 1px solid #e2e8f0;
 }
-.clickly-popup .row .ghost:hover { background: #f8fafc; }
+.clickly-popup .row .ghost:hover,
+.pin-edit .row .ghost:hover { background: #f8fafc; }
 
-.clickly-popup .row .primary {
+.clickly-popup .row .primary,
+.pin-edit .row .primary {
   background: #0ea5e9;
   color: #fff;
   border: none;
 }
-.clickly-popup .row .primary:hover { background: #0284c7; }
-.clickly-popup .row button {
+.clickly-popup .row .primary:hover,
+.pin-edit .row .primary:hover { background: #0284c7; }
+.clickly-popup .row button,
+.pin-edit .row button {
   height: 28px;
   padding: 0 12px;
   border-radius: 6px;
@@ -3061,119 +3324,77 @@ var REACT_UI_CSS = `
   overflow: hidden;
 }
 
-/* \u2500\u2500\u2500 Pin edit popup \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2500\u2500\u2500 Pin edit popup \u2014 same white card as .clickly-popup \u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .pin-edit {
+  /* Positioning: floats to the LEFT of the pin */
   position: absolute;
-  right: calc(100% + 10px);
+  right: calc(100% + 12px);
   top: 50%;
   transform: translateY(-50%);
-  width: 260px;
+  /* Appearance: identical to .clickly-popup */
+  width: 300px;
+  padding: 12px;
   background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 12px 40px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);
-  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   color: #0f172a;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);
+  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-align: left;
   cursor: default;
   z-index: 11;
   animation: clickly-fade-in 120ms cubic-bezier(0.16,1,0.3,1);
+  /* Allow inner popup-styles to scroll */
+  max-height: 80vh;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.pin-edit-header {
-  padding: 10px 12px 8px;
-  border-bottom: 1px solid #f1f5f9;
-}
-
-.pin-edit-label {
-  font-size: 11.5px;
-  font-weight: 600;
-  color: #475569;
-}
-
-.pin-edit-path {
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-weight: 400;
-  color: #94a3b8;
-  font-size: 10.5px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-  max-width: 160px;
-  vertical-align: bottom;
-}
-
-.pin-edit-textarea {
-  display: block;
+/* Reuse .clickly-popup textarea inside pin-edit */
+.pin-edit textarea {
   width: 100%;
-  min-height: 72px;
-  padding: 10px 12px;
-  border: none;
-  border-bottom: 1px solid #f1f5f9;
+  min-height: 64px;
+  max-height: 120px;
+  padding: 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
   resize: vertical;
-  font: 13px/1.5 inherit;
-  color: #0f172a;
+  font: inherit;
+  color: inherit;
   background: #fff;
   box-sizing: border-box;
 }
-.pin-edit-textarea:focus {
+.pin-edit textarea:focus {
   outline: none;
-  background: #f8fafc;
+  border-color: #0ea5e9;
+  box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
 }
 
+/* Actions row */
 .pin-edit-actions {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-  gap: 6px;
-}
-
-.pin-edit-right {
-  display: flex;
   gap: 6px;
+  margin-top: 10px;
 }
 
 .pin-edit-delete {
   display: grid;
   place-items: center;
-  width: 30px;
-  height: 30px;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
   background: transparent;
   border: 1px solid #fee2e2;
-  border-radius: 8px;
+  border-radius: 6px;
   color: #ef4444;
   cursor: pointer;
   padding: 0;
   transition: background 100ms, border-color 100ms;
 }
 .pin-edit-delete:hover { background: #fef2f2; border-color: #fca5a5; }
-.pin-edit-delete svg { width: 14px; height: 14px; }
-
-.pin-edit-cancel, .pin-edit-save {
-  height: 30px;
-  padding: 0 12px;
-  border-radius: 8px;
-  font: 12px/1 inherit;
-  font-weight: 500;
-  cursor: pointer;
-  border: none;
-  transition: background 100ms;
-}
-
-.pin-edit-cancel {
-  background: #f1f5f9;
-  color: #475569;
-}
-.pin-edit-cancel:hover { background: #e2e8f0; }
-
-.pin-edit-save {
-  background: #10b981;
-  color: #fff;
-}
-.pin-edit-save:hover { background: #059669; }
+.pin-edit-delete svg { width: 13px; height: 13px; }
 
 /* \u2500\u2500\u2500 Annotation list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
@@ -3366,7 +3587,7 @@ body[data-clickly-annotating] {
 import { jsx as jsx9 } from "react/jsx-runtime";
 function Clickly({ className } = {}) {
   const [mount, setMount] = useState7(null);
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window === "undefined" || typeof document === "undefined") return;
     let shadow = null;
     let engine = null;
@@ -3415,7 +3636,7 @@ function Clickly({ className } = {}) {
       document.body.removeAttribute("data-clickly-mode");
     };
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!mount || !className) return;
     mount.shadow.host.className = className;
     return () => {