@useclickly/react 1.0.2 → 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",
           {
@@ -2589,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;
@@ -2666,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 {

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;
@@ -2192,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;
@@ -2201,7 +2294,7 @@ function Pin({ number, annotation }) {
     window.addEventListener("pointerdown", onDown, true);
     return () => window.removeEventListener("pointerdown", onDown, true);
   }, [editing]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!editing) return;
     let el = null;
     if (annotation.elementPath) {
@@ -2340,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");
@@ -2368,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;
@@ -2548,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;
@@ -2625,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 {
@@ -3401,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;
@@ -3450,7 +3636,7 @@ function Clickly({ className } = {}) {
       document.body.removeAttribute("data-clickly-mode");
     };
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!mount || !className) return;
     mount.shadow.host.className = className;
     return () => {

package/dist/internal/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/internal/Toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,kBAAkB,CAAC;AAsBvE,UAAU,KAAK;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAuBD,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,KAAK,+BAyLpD"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/internal/Toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,kBAAkB,CAAC;AAoEvE,UAAU,KAAK;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAuBD,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,KAAK,+BAgPpD"}

package/dist/internal/icons.d.ts

@@ -1,3 +1,5 @@
+export declare const IconFreeze: () => import("react").JSX.Element;
+export declare const IconInfo: () => import("react").JSX.Element;
 export declare const IconCursor: () => import("react").JSX.Element;
 export declare const IconLayers: () => import("react").JSX.Element;
 export declare const IconSquare: () => import("react").JSX.Element;

package/dist/internal/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/internal/icons.tsx"],"names":[],"mappings":"AA0BA,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAMtB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAKpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAKxB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAIpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/internal/icons.tsx"],"names":[],"mappings":"AA0BA,eAAO,MAAM,UAAU,mCAStB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAMpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAMtB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAKpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAKxB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAIpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC"}

package/dist/internal/styles.d.ts

@@ -3,5 +3,5 @@
  * the overlay-marker CSS in `@useclickly/core/styles` so each package owns
  * its surface.
  */
-export declare const REACT_UI_CSS = "\n.clickly-ui, .clickly-ui * { box-sizing: border-box; }\n\n/* \u2500\u2500\u2500 Floating action button (collapsed state) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.clickly-fab {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n  width: 48px;\n  height: 48px;\n  border: none;\n  border-radius: 999px;\n  background: #0f172a;\n  color: #f8fafc;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  pointer-events: auto;\n  user-select: none;\n  box-shadow:\n    0 8px 24px rgba(0,0,0,0.30),\n    0 0 0 1px rgba(255,255,255,0.06) inset;\n  transition: transform 140ms ease, box-shadow 140ms ease;\n  z-index: 1;\n}\n.clickly-fab:hover {\n  transform: scale(1.06);\n  box-shadow:\n    0 10px 28px rgba(0,0,0,0.36),\n    0 0 0 1px rgba(255,255,255,0.10) inset;\n}\n.clickly-fab:active { transform: scale(0.96); }\n.clickly-fab svg { width: 18px; height: 18px; color: #f8fafc; }\n\n.clickly-fab-badge {\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: #f59e0b;\n  color: #0f172a;\n  font: 600 11px -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  border-radius: 9px;\n  display: grid;\n  place-items: center;\n  pointer-events: none;\n}\n\n/* \u2500\u2500\u2500 Toolbar (expanded state) \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 */\n\n.clickly-toolbar {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 6px;\n  height: 44px;\n  background: rgba(9, 14, 28, 0.97);\n  color: #f8fafc;\n  border-radius: 16px;\n  font: 13px/1 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  box-shadow:\n    0 16px 40px rgba(0,0,0,0.45),\n    0 0 0 1px rgba(255,255,255,0.08) inset,\n    0 1px 0 rgba(255,255,255,0.06) inset;\n  pointer-events: auto;\n  user-select: none;\n  z-index: 1;\n  animation: clickly-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes clickly-fade-in {\n  from { opacity: 0; transform: translateY(6px) scale(0.97); }\n  to   { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.clickly-toolbar .grip {\n  display: grid;\n  place-items: center;\n  width: 22px;\n  height: 32px;\n  color: #475569;\n  touch-action: none;\n  cursor: grab;\n  border-radius: 6px;\n  transition: color 120ms ease;\n}\n.clickly-toolbar .grip:hover { color: #94a3b8; }\n.clickly-toolbar .grip:active { cursor: grabbing; }\n\n.clickly-toolbar .divider {\n  width: 1px;\n  height: 20px;\n  background: rgba(255,255,255,0.08);\n  margin: 0 3px;\n  flex-shrink: 0;\n}\n\n.clickly-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  height: 32px;\n  padding: 0 8px;\n  background: transparent;\n  border: none;\n  border-radius: 10px;\n  color: #94a3b8;\n  cursor: pointer;\n  font: inherit;\n  transition: background 100ms ease, color 100ms ease;\n  position: relative;\n}\n.clickly-btn:hover  { background: rgba(255,255,255,0.09); color: #e2e8f0; }\n.clickly-btn:active { background: rgba(255,255,255,0.15); color: #fff; transform: scale(0.96); }\n.clickly-btn.is-active {\n  background: #0ea5e9;\n  color: #fff;\n  box-shadow: 0 0 0 1px rgba(14,165,233,0.4), 0 2px 8px rgba(14,165,233,0.3);\n}\n.clickly-btn.is-active:hover { background: #0284c7; }\n.clickly-btn[disabled] { opacity: 0.28; cursor: not-allowed; pointer-events: none; }\n\n.clickly-btn.icon-only {\n  width: 32px;\n  padding: 0;\n}\n\n.clickly-btn.primary-pinned {\n  background: #10b981;\n  color: #fff;\n  font-weight: 600;\n  font-size: 12px;\n  padding: 0 10px;\n  gap: 5px;\n  box-shadow: 0 0 0 1px rgba(16,185,129,0.4), 0 2px 8px rgba(16,185,129,0.25);\n}\n.clickly-btn.primary-pinned:hover { background: #059669; }\n\n/* \u2500\u2500\u2500 Tooltip \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.clickly-tip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Ensures the absolute-positioned counter badge clips correctly */\n  isolation: isolate;\n}\n\n.clickly-tip .tip-bubble {\n  position: absolute;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(15, 23, 42, 0.98);\n  color: #f1f5f9;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  padding: 5px 10px;\n  border-radius: 8px;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 80ms ease;\n  transition-delay: 200ms;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.07) inset;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  z-index: 10;\n}\n\n/* Arrow */\n.clickly-tip .tip-bubble::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 5px solid transparent;\n  border-top-color: rgba(15, 23, 42, 0.98);\n}\n\n.clickly-tip:hover .tip-bubble { opacity: 1; }\n\n.clickly-tip .tip-bubble kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  background: rgba(255,255,255,0.12);\n  border: 1px solid rgba(255,255,255,0.10);\n  border-radius: 4px;\n  font: 11px/1 ui-monospace, \"SF Mono\", Menlo, monospace;\n  color: #94a3b8;\n}\n\n/* \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 */\n\n.clickly-popup, .clickly-popover {\n  position: fixed;\n  background: #fff;\n  color: #0f172a;\n  border-radius: 10px;\n  box-shadow: 0 12px 32px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);\n  font: 13px/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  pointer-events: auto;\n  z-index: 2;\n  animation: clickly-fade-in 120ms ease-out;\n}\n\n.clickly-popup {\n  width: 320px;\n  padding: 12px;\n  max-height: calc(100vh - 80px);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* \u2500\u2500\u2500 Shared inner styles \u2014 apply to both popup and pin-edit \u2500\u2500\u2500 */\n\n.clickly-popup .popup-header,\n.pin-edit .popup-header {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  margin-bottom: 8px;\n  padding: 4px 2px;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n  color: #475569;\n  font-size: 11px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  transition: background 80ms ease;\n}\n.clickly-popup .popup-header:hover,\n.pin-edit .popup-header:hover { background: #f1f5f9; }\n\n.clickly-popup .popup-chevron,\n.pin-edit .popup-chevron {\n  font-size: 12px;\n  color: #94a3b8;\n  flex-shrink: 0;\n  width: 12px;\n  text-align: center;\n}\n\n.clickly-popup .popup-label,\n.pin-edit .popup-label {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Edit-mode toggle button \u2014 top-right of CSS panel header */\n.clickly-popup .popup-edit-toggle {\n  flex-shrink: 0;\n  display: grid;\n  place-items: center;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: 1px solid #e2e8f0;\n  border-radius: 5px;\n  color: #94a3b8;\n  cursor: pointer;\n  padding: 0;\n  margin-left: auto;\n  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;\n}\n.clickly-popup .popup-edit-toggle:hover {\n  background: #f1f5f9;\n  color: #475569;\n  border-color: #cbd5e1;\n}\n.clickly-popup .popup-edit-toggle.is-editing {\n  background: #0ea5e9;\n  color: #fff;\n  border-color: #0ea5e9;\n}\n.clickly-popup .popup-edit-toggle.is-editing:hover {\n  background: #0284c7;\n}\n\n/* Computed-styles panel */\n.clickly-popup .popup-styles,\n.pin-edit .popup-styles {\n  margin-bottom: 8px;\n  padding: 8px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 11px;\n  max-height: 160px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.clickly-popup .style-row,\n.pin-edit .style-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  line-height: 1.7;\n  border-radius: 4px;\n  padding: 0 2px;\n  transition: background 80ms ease;\n}\n\n.clickly-popup .style-row--changed,\n.pin-edit .style-row--changed {\n  background: rgba(245, 158, 11, 0.10);\n}\n\n.clickly-popup .style-key,\n.pin-edit .style-key {\n  color: #7c3aed;\n  flex-shrink: 0;\n  min-width: 90px;\n  font-size: 11px;\n}\n\n.clickly-popup .style-val,\n.pin-edit .style-val {\n  color: #0f172a;\n  font-size: 11px;\n  word-break: break-all;\n  flex: 1;\n}\n\n/* Editable value input \u2014 live CSS preview */\n.clickly-popup .style-val-input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid transparent;\n  color: #0f172a;\n  font: 11px/1.7 ui-monospace, \"SF Mono\", Menlo, monospace;\n  padding: 0;\n  outline: none;\n  transition: border-color 100ms ease;\n  word-break: break-all;\n}\n.clickly-popup .style-val-input:focus {\n  border-bottom-color: #0ea5e9;\n  background: rgba(14, 165, 233, 0.05);\n  border-radius: 2px 2px 0 0;\n}\n\n/* Revert button shown only on changed rows */\n.clickly-popup .style-revert-btn {\n  flex-shrink: 0;\n  background: transparent;\n  border: none;\n  color: #94a3b8;\n  font-size: 13px;\n  cursor: pointer;\n  padding: 0 2px;\n  line-height: 1;\n  border-radius: 3px;\n  transition: color 80ms ease, background 80ms ease;\n}\n.clickly-popup .style-revert-btn:hover {\n  color: #f59e0b;\n  background: rgba(245,158,11,0.12);\n}\n\n/* Hint text at bottom of CSS panel */\n.clickly-popup .style-hint,\n.pin-edit .style-hint {\n  margin-top: 6px;\n  padding-top: 6px;\n  border-top: 1px solid #e2e8f0;\n  font-size: 10.5px;\n  color: #94a3b8;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  line-height: 1.4;\n}\n\n.clickly-popup textarea,\n.pin-edit textarea {\n  width: 100%;\n  min-height: 64px;\n  max-height: 160px;\n  padding: 8px;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  resize: vertical;\n  font: inherit;\n  color: inherit;\n}\n.clickly-popup textarea:focus,\n.pin-edit textarea:focus {\n  outline: none;\n  border-color: #0ea5e9;\n  box-shadow: 0 0 0 3px rgba(14,165,233,0.18);\n}\n\n.clickly-popup .row,\n.pin-edit .row {\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n  margin-top: 10px;\n}\n\n.clickly-popup .row .ghost,\n.pin-edit .row .ghost {\n  background: transparent;\n  color: #475569;\n  border: 1px solid #e2e8f0;\n}\n.clickly-popup .row .ghost:hover,\n.pin-edit .row .ghost:hover { background: #f8fafc; }\n\n.clickly-popup .row .primary,\n.pin-edit .row .primary {\n  background: #0ea5e9;\n  color: #fff;\n  border: none;\n}\n.clickly-popup .row .primary:hover,\n.pin-edit .row .primary:hover { background: #0284c7; }\n.clickly-popup .row button,\n.pin-edit .row button {\n  height: 28px;\n  padding: 0 12px;\n  border-radius: 6px;\n  font: inherit;\n  cursor: pointer;\n}\n\n/* Old popover kept for any legacy use */\n.clickly-popover { width: 260px; padding: 12px; }\n\n/* \u2500\u2500\u2500 Settings panel (redesigned) \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 */\n\n.clickly-settings {\n  position: fixed;\n  width: 284px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 16px 48px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);\n  font: 13px/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  color: #0f172a;\n  pointer-events: auto;\n  z-index: 2;\n  animation: clickly-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  overflow: hidden;\n}\n\n.settings-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 14px 12px;\n  border-bottom: 1px solid #f1f5f9;\n}\n\n.settings-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: #0f172a;\n  letter-spacing: -0.01em;\n}\n\n.settings-close {\n  display: grid;\n  place-items: center;\n  width: 24px;\n  height: 24px;\n  background: #f1f5f9;\n  border: none;\n  border-radius: 6px;\n  color: #64748b;\n  cursor: pointer;\n  padding: 0;\n  transition: background 100ms, color 100ms;\n}\n.settings-close:hover { background: #e2e8f0; color: #0f172a; }\n.settings-close svg { width: 13px; height: 13px; }\n\n.settings-section { padding: 10px 14px; }\n\n.settings-divider {\n  height: 1px;\n  background: #f1f5f9;\n  margin: 0;\n}\n\n.settings-label {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #1e293b;\n  margin-bottom: 8px;\n}\n\n.settings-hint {\n  font-size: 11.5px;\n  font-weight: 400;\n  color: #94a3b8;\n}\n\n.settings-select {\n  width: 100%;\n  padding: 7px 10px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  color: #1e293b;\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 10px center;\n  padding-right: 32px;\n  transition: border-color 120ms, box-shadow 120ms;\n}\n.settings-select:focus {\n  outline: none;\n  border-color: #0ea5e9;\n  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);\n  background-color: #fff;\n}\n\n.settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 6px 0;\n}\n.settings-row + .settings-row {\n  border-top: 1px solid #f8fafc;\n}\n\n.settings-row-label {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #1e293b;\n  min-width: 0;\n}\n\n/* Toggle switch */\n.clickly-toggle {\n  position: relative;\n  flex-shrink: 0;\n  width: 38px;\n  height: 22px;\n  cursor: pointer;\n}\n.clickly-toggle input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.toggle-track {\n  position: absolute;\n  inset: 0;\n  background: #e2e8f0;\n  border-radius: 11px;\n  transition: background 180ms ease;\n}\n.toggle-track::after {\n  content: \"\";\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 16px;\n  height: 16px;\n  background: #fff;\n  border-radius: 50%;\n  box-shadow: 0 1px 4px rgba(0,0,0,0.2);\n  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.clickly-toggle input:checked + .toggle-track {\n  background: #0ea5e9;\n}\n.clickly-toggle input:checked + .toggle-track::after {\n  transform: translateX(16px);\n}\n\n/* Color picker */\n.settings-color-wrap {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  cursor: pointer;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid #e2e8f0;\n  flex-shrink: 0;\n}\n.settings-color-wrap input[type=\"color\"] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n}\n.color-swatch {\n  display: block;\n  width: 32px;\n  height: 24px;\n  border-radius: 7px;\n  border: 1px solid rgba(0,0,0,0.08);\n  transition: transform 100ms ease;\n}\n.settings-color-wrap:hover .color-swatch { transform: scale(1.08); }\n\n.clickly-counter {\n  /* Float as a badge \u2014 positioned absolutely so it doesn't widen the button */\n  position: absolute;\n  top: -5px;\n  right: -5px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: #f59e0b;\n  color: #0f172a;\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  border: 1.5px solid rgba(9, 14, 28, 0.97);\n}\n\n/* \u2500\u2500\u2500 Annotation pins (persistent numbered markers) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.clickly-pin {\n  position: fixed;\n  width: 24px;\n  height: 24px;\n  border-radius: 999px;\n  background: #10b981;\n  color: #fff;\n  font: 700 11px/24px -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  text-align: center;\n  cursor: pointer;\n  pointer-events: auto;\n  user-select: none;\n  box-shadow: 0 2px 8px rgba(16,185,129,0.4), 0 0 0 2px #fff;\n  z-index: 10;\n  transition: transform 120ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 120ms ease;\n}\n.clickly-pin:hover {\n  transform: scale(1.18);\n  box-shadow: 0 4px 16px rgba(16,185,129,0.5), 0 0 0 2px #fff;\n}\n.clickly-pin-num { display: block; }\n\n/* \u2500\u2500\u2500 Pin hover preview (dark tooltip) \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 */\n\n.pin-preview {\n  position: absolute;\n  right: calc(100% + 10px);\n  top: 50%;\n  transform: translateY(-50%);\n  width: 220px;\n  padding: 8px 10px;\n  background: rgba(9, 14, 28, 0.96);\n  color: #f1f5f9;\n  border-radius: 10px;\n  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.07) inset;\n  font: 12px/1.45 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  text-align: left;\n  cursor: default;\n  pointer-events: none;\n  z-index: 11;\n  animation: clickly-fade-in 100ms ease-out;\n  white-space: normal;\n}\n\n.pin-preview-meta {\n  font-size: 10.5px;\n  color: #64748b;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  margin-bottom: 4px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.pin-preview-comment {\n  font-size: 12px;\n  color: #e2e8f0;\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* \u2500\u2500\u2500 Pin edit popup \u2014 same white card as .clickly-popup \u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pin-edit {\n  /* Positioning: floats to the LEFT of the pin */\n  position: absolute;\n  right: calc(100% + 12px);\n  top: 50%;\n  transform: translateY(-50%);\n  /* Appearance: identical to .clickly-popup */\n  width: 300px;\n  padding: 12px;\n  background: #fff;\n  color: #0f172a;\n  border-radius: 10px;\n  box-shadow: 0 12px 32px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);\n  font: 13px/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  text-align: left;\n  cursor: default;\n  z-index: 11;\n  animation: clickly-fade-in 120ms cubic-bezier(0.16,1,0.3,1);\n  /* Allow inner popup-styles to scroll */\n  max-height: 80vh;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Reuse .clickly-popup textarea inside pin-edit */\n.pin-edit textarea {\n  width: 100%;\n  min-height: 64px;\n  max-height: 120px;\n  padding: 8px;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  resize: vertical;\n  font: inherit;\n  color: inherit;\n  background: #fff;\n  box-sizing: border-box;\n}\n.pin-edit textarea:focus {\n  outline: none;\n  border-color: #0ea5e9;\n  box-shadow: 0 0 0 3px rgba(14,165,233,0.18);\n}\n\n/* Actions row */\n.pin-edit-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 10px;\n}\n\n.pin-edit-delete {\n  display: grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  background: transparent;\n  border: 1px solid #fee2e2;\n  border-radius: 6px;\n  color: #ef4444;\n  cursor: pointer;\n  padding: 0;\n  transition: background 100ms, border-color 100ms;\n}\n.pin-edit-delete:hover { background: #fef2f2; border-color: #fca5a5; }\n.pin-edit-delete svg { width: 13px; height: 13px; }\n\n/* \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 */\n\n.clickly-list {\n  position: fixed;\n  width: 320px;\n  max-height: 55vh;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 16px 48px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);\n  color: #0f172a;\n  font: 13px/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  pointer-events: auto;\n  z-index: 2;\n  animation: clickly-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.list-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px 10px;\n  border-bottom: 1px solid #f1f5f9;\n  flex-shrink: 0;\n}\n\n.list-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: #0f172a;\n  letter-spacing: -0.01em;\n  flex: 1;\n}\n\n.list-count {\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  background: #f1f5f9;\n  color: #475569;\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 10px;\n  display: grid;\n  place-items: center;\n}\n\n.list-items {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  flex: 1;\n}\n\n.list-empty {\n  padding: 24px;\n  text-align: center;\n  color: #94a3b8;\n  font-size: 12px;\n}\n\n/* \u2500\u2500\u2500 Annotation card \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 */\n\n.list-card {\n  padding: 10px 12px;\n  border-bottom: 1px solid #f8fafc;\n  transition: background 80ms ease;\n}\n.list-card:last-child { border-bottom: none; }\n.list-card:hover { background: #fafafa; }\n\n.list-card-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 4px;\n}\n\n.list-card-num {\n  font-size: 11px;\n  font-weight: 700;\n  color: #94a3b8;\n  flex-shrink: 0;\n  min-width: 20px;\n}\n\n.list-card-path {\n  flex: 1;\n  min-width: 0;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 10.5px;\n  color: #475569;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.list-card-actions {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.list-action-btn {\n  display: grid;\n  place-items: center;\n  width: 24px;\n  height: 24px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  color: #94a3b8;\n  cursor: pointer;\n  padding: 0;\n  transition: background 80ms ease, color 80ms ease;\n}\n.list-action-btn svg { width: 12px; height: 12px; }\n.list-action-btn:hover { background: #f1f5f9; color: #475569; }\n.list-action-btn.copied { color: #10b981; }\n.list-action-btn.list-action-delete:hover { background: #fef2f2; color: #ef4444; }\n\n.list-card-comment {\n  font-size: 12px;\n  color: #1e293b;\n  line-height: 1.45;\n  margin: 0 0 6px;\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* CSS changes badge */\n.list-card-css {\n  background: rgba(124, 58, 237, 0.05);\n  border: 1px solid rgba(124, 58, 237, 0.12);\n  border-radius: 6px;\n  padding: 5px 8px;\n  margin-top: 4px;\n}\n\n.list-card-css-label {\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  color: #7c3aed;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  margin-bottom: 3px;\n}\n\n.list-card-css-code {\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 10px;\n  color: #475569;\n  line-height: 1.5;\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-all;\n  max-height: 60px;\n  overflow: hidden;\n}\n";
+export declare const REACT_UI_CSS = "\n.clickly-ui, .clickly-ui * { box-sizing: border-box; }\n\n/* \u2500\u2500\u2500 Floating action button (collapsed state) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.clickly-fab {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n  width: 48px;\n  height: 48px;\n  border: none;\n  border-radius: 999px;\n  background: #0f172a;\n  color: #f8fafc;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  pointer-events: auto;\n  user-select: none;\n  box-shadow:\n    0 8px 24px rgba(0,0,0,0.30),\n    0 0 0 1px rgba(255,255,255,0.06) inset;\n  transition: transform 140ms ease, box-shadow 140ms ease;\n  z-index: 1;\n}\n.clickly-fab:hover {\n  transform: scale(1.06);\n  box-shadow:\n    0 10px 28px rgba(0,0,0,0.36),\n    0 0 0 1px rgba(255,255,255,0.10) inset;\n}\n.clickly-fab:active { transform: scale(0.96); }\n.clickly-fab svg { width: 18px; height: 18px; color: #f8fafc; }\n\n.clickly-fab-badge {\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: #f59e0b;\n  color: #0f172a;\n  font: 600 11px -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  border-radius: 9px;\n  display: grid;\n  place-items: center;\n  pointer-events: none;\n}\n\n/* \u2500\u2500\u2500 Toolbar (expanded state) \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 */\n\n.clickly-toolbar {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 6px;\n  height: 44px;\n  background: rgba(9, 14, 28, 0.97);\n  color: #f8fafc;\n  border-radius: 16px;\n  font: 13px/1 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  box-shadow:\n    0 16px 40px rgba(0,0,0,0.45),\n    0 0 0 1px rgba(255,255,255,0.08) inset,\n    0 1px 0 rgba(255,255,255,0.06) inset;\n  pointer-events: auto;\n  user-select: none;\n  z-index: 1;\n  animation: clickly-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes clickly-fade-in {\n  from { opacity: 0; transform: translateY(6px) scale(0.97); }\n  to   { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.clickly-toolbar .grip {\n  display: grid;\n  place-items: center;\n  width: 22px;\n  height: 32px;\n  color: #475569;\n  touch-action: none;\n  cursor: grab;\n  border-radius: 6px;\n  transition: color 120ms ease;\n}\n.clickly-toolbar .grip:hover { color: #94a3b8; }\n.clickly-toolbar .grip:active { cursor: grabbing; }\n\n.clickly-toolbar .divider {\n  width: 1px;\n  height: 20px;\n  background: rgba(255,255,255,0.08);\n  margin: 0 3px;\n  flex-shrink: 0;\n}\n\n.clickly-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  height: 32px;\n  padding: 0 8px;\n  background: transparent;\n  border: none;\n  border-radius: 10px;\n  color: #94a3b8;\n  cursor: pointer;\n  font: inherit;\n  transition: background 100ms ease, color 100ms ease;\n  position: relative;\n}\n.clickly-btn:hover  { background: rgba(255,255,255,0.09); color: #e2e8f0; }\n.clickly-btn:active { background: rgba(255,255,255,0.15); color: #fff; transform: scale(0.96); }\n.clickly-btn.is-active {\n  background: #0ea5e9;\n  color: #fff;\n  box-shadow: 0 0 0 1px rgba(14,165,233,0.4), 0 2px 8px rgba(14,165,233,0.3);\n}\n.clickly-btn.is-active:hover { background: #0284c7; }\n.clickly-btn[disabled] { opacity: 0.28; cursor: not-allowed; pointer-events: none; }\n\n/* Freeze-animations active state \u2014 icy blue */\n.clickly-btn.is-freeze {\n  background: rgba(99, 179, 237, 0.18);\n  color: #63b3ed;\n  box-shadow: 0 0 0 1px rgba(99,179,237,0.35), 0 2px 8px rgba(99,179,237,0.2);\n}\n.clickly-btn.is-freeze:hover { background: rgba(99, 179, 237, 0.26); }\n\n.clickly-btn.icon-only {\n  width: 32px;\n  padding: 0;\n}\n\n.clickly-btn.primary-pinned {\n  background: #10b981;\n  color: #fff;\n  font-weight: 600;\n  font-size: 12px;\n  padding: 0 10px;\n  gap: 5px;\n  box-shadow: 0 0 0 1px rgba(16,185,129,0.4), 0 2px 8px rgba(16,185,129,0.25);\n}\n.clickly-btn.primary-pinned:hover { background: #059669; }\n\n/* \u2500\u2500\u2500 Tooltip \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.clickly-tip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Ensures the absolute-positioned counter badge clips correctly */\n  isolation: isolate;\n}\n\n.clickly-tip .tip-bubble {\n  position: absolute;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(15, 23, 42, 0.98);\n  color: #f1f5f9;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  padding: 5px 10px;\n  border-radius: 8px;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 80ms ease;\n  transition-delay: 200ms;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.07) inset;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  z-index: 10;\n}\n\n/* Arrow */\n.clickly-tip .tip-bubble::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 5px solid transparent;\n  border-top-color: rgba(15, 23, 42, 0.98);\n}\n\n.clickly-tip:hover .tip-bubble { opacity: 1; }\n\n.clickly-tip .tip-bubble kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  background: rgba(255,255,255,0.12);\n  border: 1px solid rgba(255,255,255,0.10);\n  border-radius: 4px;\n  font: 11px/1 ui-monospace, \"SF Mono\", Menlo, monospace;\n  color: #94a3b8;\n}\n\n/* \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 */\n\n.shortcuts-trigger {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.shortcuts-panel {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%);\n  width: 260px;\n  background: rgba(9, 14, 28, 0.97);\n  border: 1px solid rgba(255,255,255,0.08);\n  border-radius: 12px;\n  box-shadow: 0 16px 40px rgba(0,0,0,0.45);\n  padding: 10px;\n  z-index: 10;\n  animation: clickly-fade-in 100ms ease-out;\n  pointer-events: none;\n}\n\n/* Arrow pointing down */\n.shortcuts-panel::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: rgba(9, 14, 28, 0.97);\n}\n\n.shortcuts-title {\n  font: 600 11px/1 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  padding: 2px 4px 8px;\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n  margin-bottom: 6px;\n}\n\n.shortcuts-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 4px;\n  border-radius: 6px;\n  gap: 8px;\n}\n.shortcuts-row:hover { background: rgba(255,255,255,0.04); }\n\n.shortcuts-label {\n  font: 12px/1.4 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  color: #94a3b8;\n  flex: 1;\n  min-width: 0;\n}\n\n.shortcuts-keys {\n  display: flex;\n  gap: 3px;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.shortcuts-keys kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 5px;\n  background: rgba(255,255,255,0.08);\n  border: 1px solid rgba(255,255,255,0.10);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  font: 11px/1 ui-monospace, \"SF Mono\", Menlo, monospace;\n  color: #e2e8f0;\n}\n\n/* \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 */\n\n.clickly-popup, .clickly-popover {\n  position: fixed;\n  background: #fff;\n  color: #0f172a;\n  border-radius: 10px;\n  box-shadow: 0 12px 32px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);\n  font: 13px/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  pointer-events: auto;\n  z-index: 2;\n  animation: clickly-fade-in 120ms ease-out;\n}\n\n.clickly-popup {\n  width: 320px;\n  padding: 12px;\n  max-height: calc(100vh - 80px);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* \u2500\u2500\u2500 Shared inner styles \u2014 apply to both popup and pin-edit \u2500\u2500\u2500 */\n\n.clickly-popup .popup-header,\n.pin-edit .popup-header {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  margin-bottom: 8px;\n  padding: 4px 2px;\n  border-radius: 4px;\n  cursor: pointer;\n  user-select: none;\n  color: #475569;\n  font-size: 11px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  transition: background 80ms ease;\n}\n.clickly-popup .popup-header:hover,\n.pin-edit .popup-header:hover { background: #f1f5f9; }\n\n.clickly-popup .popup-chevron,\n.pin-edit .popup-chevron {\n  font-size: 12px;\n  color: #94a3b8;\n  flex-shrink: 0;\n  width: 12px;\n  text-align: center;\n}\n\n.clickly-popup .popup-label,\n.pin-edit .popup-label {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Edit-mode toggle button \u2014 top-right of CSS panel header */\n.clickly-popup .popup-edit-toggle {\n  flex-shrink: 0;\n  display: grid;\n  place-items: center;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: 1px solid #e2e8f0;\n  border-radius: 5px;\n  color: #94a3b8;\n  cursor: pointer;\n  padding: 0;\n  margin-left: auto;\n  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;\n}\n.clickly-popup .popup-edit-toggle:hover {\n  background: #f1f5f9;\n  color: #475569;\n  border-color: #cbd5e1;\n}\n.clickly-popup .popup-edit-toggle.is-editing {\n  background: #0ea5e9;\n  color: #fff;\n  border-color: #0ea5e9;\n}\n.clickly-popup .popup-edit-toggle.is-editing:hover {\n  background: #0284c7;\n}\n\n/* Computed-styles panel */\n.clickly-popup .popup-styles,\n.pin-edit .popup-styles {\n  margin-bottom: 8px;\n  padding: 8px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 11px;\n  max-height: 160px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.clickly-popup .style-row,\n.pin-edit .style-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  line-height: 1.7;\n  border-radius: 4px;\n  padding: 0 2px;\n  transition: background 80ms ease;\n}\n\n.clickly-popup .style-row--changed,\n.pin-edit .style-row--changed {\n  background: rgba(245, 158, 11, 0.10);\n}\n\n.clickly-popup .style-key,\n.pin-edit .style-key {\n  color: #7c3aed;\n  flex-shrink: 0;\n  min-width: 90px;\n  font-size: 11px;\n}\n\n.clickly-popup .style-val,\n.pin-edit .style-val {\n  color: #0f172a;\n  font-size: 11px;\n  word-break: break-all;\n  flex: 1;\n}\n\n/* Editable value input \u2014 live CSS preview */\n.clickly-popup .style-val-input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid transparent;\n  color: #0f172a;\n  font: 11px/1.7 ui-monospace, \"SF Mono\", Menlo, monospace;\n  padding: 0;\n  outline: none;\n  transition: border-color 100ms ease;\n  word-break: break-all;\n}\n.clickly-popup .style-val-input:focus {\n  border-bottom-color: #0ea5e9;\n  background: rgba(14, 165, 233, 0.05);\n  border-radius: 2px 2px 0 0;\n}\n\n/* Revert button shown only on changed rows */\n.clickly-popup .style-revert-btn {\n  flex-shrink: 0;\n  background: transparent;\n  border: none;\n  color: #94a3b8;\n  font-size: 13px;\n  cursor: pointer;\n  padding: 0 2px;\n  line-height: 1;\n  border-radius: 3px;\n  transition: color 80ms ease, background 80ms ease;\n}\n.clickly-popup .style-revert-btn:hover {\n  color: #f59e0b;\n  background: rgba(245,158,11,0.12);\n}\n\n/* Hint text at bottom of CSS panel */\n.clickly-popup .style-hint,\n.pin-edit .style-hint {\n  margin-top: 6px;\n  padding-top: 6px;\n  border-top: 1px solid #e2e8f0;\n  font-size: 10.5px;\n  color: #94a3b8;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  line-height: 1.4;\n}\n\n.clickly-popup textarea,\n.pin-edit textarea {\n  width: 100%;\n  min-height: 64px;\n  max-height: 160px;\n  padding: 8px;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  resize: vertical;\n  font: inherit;\n  color: inherit;\n}\n.clickly-popup textarea:focus,\n.pin-edit textarea:focus {\n  outline: none;\n  border-color: #0ea5e9;\n  box-shadow: 0 0 0 3px rgba(14,165,233,0.18);\n}\n\n.clickly-popup .row,\n.pin-edit .row {\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n  margin-top: 10px;\n}\n\n.clickly-popup .row .ghost,\n.pin-edit .row .ghost {\n  background: transparent;\n  color: #475569;\n  border: 1px solid #e2e8f0;\n}\n.clickly-popup .row .ghost:hover,\n.pin-edit .row .ghost:hover { background: #f8fafc; }\n\n.clickly-popup .row .primary,\n.pin-edit .row .primary {\n  background: #0ea5e9;\n  color: #fff;\n  border: none;\n}\n.clickly-popup .row .primary:hover,\n.pin-edit .row .primary:hover { background: #0284c7; }\n.clickly-popup .row button,\n.pin-edit .row button {\n  height: 28px;\n  padding: 0 12px;\n  border-radius: 6px;\n  font: inherit;\n  cursor: pointer;\n}\n\n/* Old popover kept for any legacy use */\n.clickly-popover { width: 260px; padding: 12px; }\n\n/* \u2500\u2500\u2500 Settings panel (redesigned) \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 */\n\n.clickly-settings {\n  position: fixed;\n  width: 284px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 16px 48px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);\n  font: 13px/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  color: #0f172a;\n  pointer-events: auto;\n  z-index: 2;\n  animation: clickly-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  overflow: hidden;\n}\n\n.settings-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 14px 12px;\n  border-bottom: 1px solid #f1f5f9;\n}\n\n.settings-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: #0f172a;\n  letter-spacing: -0.01em;\n}\n\n.settings-close {\n  display: grid;\n  place-items: center;\n  width: 24px;\n  height: 24px;\n  background: #f1f5f9;\n  border: none;\n  border-radius: 6px;\n  color: #64748b;\n  cursor: pointer;\n  padding: 0;\n  transition: background 100ms, color 100ms;\n}\n.settings-close:hover { background: #e2e8f0; color: #0f172a; }\n.settings-close svg { width: 13px; height: 13px; }\n\n.settings-section { padding: 10px 14px; }\n\n.settings-divider {\n  height: 1px;\n  background: #f1f5f9;\n  margin: 0;\n}\n\n.settings-label {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #1e293b;\n  margin-bottom: 8px;\n}\n\n.settings-hint {\n  font-size: 11.5px;\n  font-weight: 400;\n  color: #94a3b8;\n}\n\n.settings-select {\n  width: 100%;\n  padding: 7px 10px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  color: #1e293b;\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 10px center;\n  padding-right: 32px;\n  transition: border-color 120ms, box-shadow 120ms;\n}\n.settings-select:focus {\n  outline: none;\n  border-color: #0ea5e9;\n  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);\n  background-color: #fff;\n}\n\n.settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 6px 0;\n}\n.settings-row + .settings-row {\n  border-top: 1px solid #f8fafc;\n}\n\n.settings-row-label {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #1e293b;\n  min-width: 0;\n}\n\n/* Toggle switch */\n.clickly-toggle {\n  position: relative;\n  flex-shrink: 0;\n  width: 38px;\n  height: 22px;\n  cursor: pointer;\n}\n.clickly-toggle input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.toggle-track {\n  position: absolute;\n  inset: 0;\n  background: #e2e8f0;\n  border-radius: 11px;\n  transition: background 180ms ease;\n}\n.toggle-track::after {\n  content: \"\";\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 16px;\n  height: 16px;\n  background: #fff;\n  border-radius: 50%;\n  box-shadow: 0 1px 4px rgba(0,0,0,0.2);\n  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.clickly-toggle input:checked + .toggle-track {\n  background: #0ea5e9;\n}\n.clickly-toggle input:checked + .toggle-track::after {\n  transform: translateX(16px);\n}\n\n/* Color picker */\n.settings-color-wrap {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  cursor: pointer;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid #e2e8f0;\n  flex-shrink: 0;\n}\n.settings-color-wrap input[type=\"color\"] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n}\n.color-swatch {\n  display: block;\n  width: 32px;\n  height: 24px;\n  border-radius: 7px;\n  border: 1px solid rgba(0,0,0,0.08);\n  transition: transform 100ms ease;\n}\n.settings-color-wrap:hover .color-swatch { transform: scale(1.08); }\n\n.clickly-counter {\n  /* Float as a badge \u2014 positioned absolutely so it doesn't widen the button */\n  position: absolute;\n  top: -5px;\n  right: -5px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: #f59e0b;\n  color: #0f172a;\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  border: 1.5px solid rgba(9, 14, 28, 0.97);\n}\n\n/* \u2500\u2500\u2500 Annotation pins (persistent numbered markers) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.clickly-pin {\n  position: fixed;\n  width: 24px;\n  height: 24px;\n  border-radius: 999px;\n  background: #10b981;\n  color: #fff;\n  font: 700 11px/24px -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  text-align: center;\n  cursor: pointer;\n  pointer-events: auto;\n  user-select: none;\n  box-shadow: 0 2px 8px rgba(16,185,129,0.4), 0 0 0 2px #fff;\n  z-index: 10;\n  transition: transform 120ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 120ms ease;\n}\n.clickly-pin:hover {\n  transform: scale(1.18);\n  box-shadow: 0 4px 16px rgba(16,185,129,0.5), 0 0 0 2px #fff;\n}\n.clickly-pin-num { display: block; }\n\n/* \u2500\u2500\u2500 Pin hover preview (dark tooltip) \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 */\n\n.pin-preview {\n  position: absolute;\n  right: calc(100% + 10px);\n  top: 50%;\n  transform: translateY(-50%);\n  width: 220px;\n  padding: 8px 10px;\n  background: rgba(9, 14, 28, 0.96);\n  color: #f1f5f9;\n  border-radius: 10px;\n  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.07) inset;\n  font: 12px/1.45 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  text-align: left;\n  cursor: default;\n  pointer-events: none;\n  z-index: 11;\n  animation: clickly-fade-in 100ms ease-out;\n  white-space: normal;\n}\n\n.pin-preview-meta {\n  font-size: 10.5px;\n  color: #64748b;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  margin-bottom: 4px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.pin-preview-comment {\n  font-size: 12px;\n  color: #e2e8f0;\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* \u2500\u2500\u2500 Pin edit popup \u2014 same white card as .clickly-popup \u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pin-edit {\n  /* Positioning: floats to the LEFT of the pin */\n  position: absolute;\n  right: calc(100% + 12px);\n  top: 50%;\n  transform: translateY(-50%);\n  /* Appearance: identical to .clickly-popup */\n  width: 300px;\n  padding: 12px;\n  background: #fff;\n  color: #0f172a;\n  border-radius: 10px;\n  box-shadow: 0 12px 32px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);\n  font: 13px/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  text-align: left;\n  cursor: default;\n  z-index: 11;\n  animation: clickly-fade-in 120ms cubic-bezier(0.16,1,0.3,1);\n  /* Allow inner popup-styles to scroll */\n  max-height: 80vh;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Reuse .clickly-popup textarea inside pin-edit */\n.pin-edit textarea {\n  width: 100%;\n  min-height: 64px;\n  max-height: 120px;\n  padding: 8px;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  resize: vertical;\n  font: inherit;\n  color: inherit;\n  background: #fff;\n  box-sizing: border-box;\n}\n.pin-edit textarea:focus {\n  outline: none;\n  border-color: #0ea5e9;\n  box-shadow: 0 0 0 3px rgba(14,165,233,0.18);\n}\n\n/* Actions row */\n.pin-edit-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 10px;\n}\n\n.pin-edit-delete {\n  display: grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  background: transparent;\n  border: 1px solid #fee2e2;\n  border-radius: 6px;\n  color: #ef4444;\n  cursor: pointer;\n  padding: 0;\n  transition: background 100ms, border-color 100ms;\n}\n.pin-edit-delete:hover { background: #fef2f2; border-color: #fca5a5; }\n.pin-edit-delete svg { width: 13px; height: 13px; }\n\n/* \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 */\n\n.clickly-list {\n  position: fixed;\n  width: 320px;\n  max-height: 55vh;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 16px 48px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);\n  color: #0f172a;\n  font: 13px/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  pointer-events: auto;\n  z-index: 2;\n  animation: clickly-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.list-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px 10px;\n  border-bottom: 1px solid #f1f5f9;\n  flex-shrink: 0;\n}\n\n.list-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: #0f172a;\n  letter-spacing: -0.01em;\n  flex: 1;\n}\n\n.list-count {\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  background: #f1f5f9;\n  color: #475569;\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 10px;\n  display: grid;\n  place-items: center;\n}\n\n.list-items {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  flex: 1;\n}\n\n.list-empty {\n  padding: 24px;\n  text-align: center;\n  color: #94a3b8;\n  font-size: 12px;\n}\n\n/* \u2500\u2500\u2500 Annotation card \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 */\n\n.list-card {\n  padding: 10px 12px;\n  border-bottom: 1px solid #f8fafc;\n  transition: background 80ms ease;\n}\n.list-card:last-child { border-bottom: none; }\n.list-card:hover { background: #fafafa; }\n\n.list-card-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 4px;\n}\n\n.list-card-num {\n  font-size: 11px;\n  font-weight: 700;\n  color: #94a3b8;\n  flex-shrink: 0;\n  min-width: 20px;\n}\n\n.list-card-path {\n  flex: 1;\n  min-width: 0;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 10.5px;\n  color: #475569;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.list-card-actions {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.list-action-btn {\n  display: grid;\n  place-items: center;\n  width: 24px;\n  height: 24px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  color: #94a3b8;\n  cursor: pointer;\n  padding: 0;\n  transition: background 80ms ease, color 80ms ease;\n}\n.list-action-btn svg { width: 12px; height: 12px; }\n.list-action-btn:hover { background: #f1f5f9; color: #475569; }\n.list-action-btn.copied { color: #10b981; }\n.list-action-btn.list-action-delete:hover { background: #fef2f2; color: #ef4444; }\n\n.list-card-comment {\n  font-size: 12px;\n  color: #1e293b;\n  line-height: 1.45;\n  margin: 0 0 6px;\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* CSS changes badge */\n.list-card-css {\n  background: rgba(124, 58, 237, 0.05);\n  border: 1px solid rgba(124, 58, 237, 0.12);\n  border-radius: 6px;\n  padding: 5px 8px;\n  margin-top: 4px;\n}\n\n.list-card-css-label {\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  color: #7c3aed;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  margin-bottom: 3px;\n}\n\n.list-card-css-code {\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 10px;\n  color: #475569;\n  line-height: 1.5;\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-all;\n  max-height: 60px;\n  overflow: hidden;\n}\n";
 //# sourceMappingURL=styles.d.ts.map

package/dist/internal/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/internal/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,YAAY,uqvBAy7BxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/internal/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,YAAY,oo0BAshCxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useclickly/react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Click-to-annotate dev toolbar for React 18+ apps. Generates agent-ready prompts. Drop in one component — no config.",
   "license": "MIT",
   "author": "Clickly contributors",