@useclickly/react 1.0.1 → 1.0.3

package/dist/index.cjs

@@ -1373,6 +1373,18 @@ function Icon({
     }
   );
 }
+var IconFreeze = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { size: 15, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "5", y1: "5", x2: "19", y2: "19" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "19", y1: "5", x2: "5", y2: "19" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor", stroke: "none" })
+] });
+var IconInfo = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { size: 14, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "8", strokeWidth: "2.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "12", x2: "12", y2: "16" })
+] });
 var IconCursor = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 4l6 16 2-7 7-2z" }) });
 var IconLayers = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2l9 5-9 5-9-5 9-5z" }),
@@ -1591,7 +1603,46 @@ function AnnotationCard({
 
 // packages/react/src/internal/Toolbar.tsx
 var import_jsx_runtime4 = require("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] = (0, import_react7.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "span",
+    {
+      className: "clickly-tip shortcuts-trigger",
+      onMouseEnter: () => setVisible(true),
+      onMouseLeave: () => setVisible(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            className: "clickly-btn icon-only",
+            "aria-label": "Show keyboard shortcuts",
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconInfo, {})
+          }
+        ),
+        visible && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "shortcuts-panel", role: "tooltip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shortcuts-title", children: "Keyboard shortcuts" }),
+          SHORTCUTS.map((s) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "shortcuts-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shortcuts-label", children: s.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shortcuts-keys", children: s.keys.map((k) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("kbd", { children: k }, k)) })
+          ] }, s.label))
+        ] })
+      ]
+    }
+  );
+}
 function Tip({
   label,
   shortcut,
@@ -1612,7 +1663,38 @@ function Toolbar({ engine, onCollapse }) {
   const outputDetail = useSettings((s) => s.outputDetail);
   const [showSettings, setShowSettings] = (0, import_react7.useState)(false);
   const [showList, setShowList] = (0, import_react7.useState)(false);
+  const [frozen, setFrozen] = (0, import_react7.useState)(false);
   const anchorRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    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),
@@ -1695,6 +1777,16 @@ function Toolbar({ engine, onCollapse }) {
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "divider" })
         ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tip, { label: frozen ? "Unfreeze animations" : "Freeze animations", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "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__ */ (0, import_jsx_runtime4.jsx)(IconFreeze, {})
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tip, { label: "Annotations", shortcut: "L", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "button",
           {
@@ -1728,6 +1820,7 @@ function Toolbar({ engine, onCollapse }) {
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShortcutsPanel, {}),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tip, { label: "Settings", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
@@ -2194,24 +2287,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] = (0, import_react9.useState)(false);
   const [editing, setEditing] = (0, import_react9.useState)(false);
   const [draft, setDraft] = (0, import_react9.useState)(annotation.comment);
+  const [showStyles, setShowStyles] = (0, import_react9.useState)(false);
   const taRef = (0, import_react9.useRef)(null);
   const editRef = (0, import_react9.useRef)(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 });
@@ -2230,6 +2335,27 @@ function Pin({ number, annotation }) {
     window.addEventListener("pointerdown", onDown, true);
     return () => window.removeEventListener("pointerdown", onDown, true);
   }, [editing]);
+  (0, import_react9.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
@@ -2260,21 +2386,42 @@ function Pin({ number, annotation }) {
             className: "pin-edit",
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pin-edit-header", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "pin-edit-label", children: [
-                label,
-                ": ",
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pin-edit-path", children: annotation.elementPath })
-              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "div",
+                {
+                  className: "popup-header",
+                  role: "button",
+                  "aria-expanded": showStyles,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowStyles((v) => !v);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "popup-chevron", children: showStyles ? "\u25BE" : "\u203A" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "popup-label", children: headerLabel })
+                  ]
+                }
+              ),
+              showStyles && styleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "popup-styles", children: [
+                styleEntries.map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "style-row", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "style-key", children: k }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "style-val", children: v })
+                ] }, k)),
+                annotation.suggestedCss && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "style-hint", style: { color: "#7c3aed", borderTopColor: "rgba(124,58,237,0.2)" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: "Suggested changes:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
+                  annotation.suggestedCss
+                ] })
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pin-edit-actions", children: [
@@ -2287,9 +2434,9 @@ function Pin({ number, annotation }) {
                     children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconTrash, {})
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pin-edit-right", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "pin-edit-cancel", onClick: closeEdit, children: "Cancel" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "pin-edit-save", onClick: save, children: "Save" })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row", style: { margin: 0, flex: 1, justifyContent: "flex-end" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "ghost", onClick: closeEdit, children: "Cancel" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "primary", onClick: save, children: "Save" })
                 ] })
               ] })
             ]
@@ -2311,10 +2458,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;
 }
@@ -2538,6 +2682,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;
@@ -2615,6 +2767,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 {
@@ -2638,8 +2875,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;
@@ -2653,9 +2892,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;
@@ -2663,7 +2904,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;
@@ -2701,7 +2943,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;
@@ -2714,7 +2957,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;
@@ -2724,17 +2968,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;
@@ -2773,8 +3027,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;
@@ -2784,7 +3039,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;
@@ -2795,33 +3051,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;
@@ -3102,119 +3365,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 */