@useclickly/react 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +146 -111
  2. package/dist/index.js +146 -111
  3. package/dist/internal/AnnotationPins.d.ts +0 -5
  4. package/dist/internal/AnnotationPins.d.ts.map +1 -1
  5. package/dist/internal/styles.d.ts +1 -1
  6. package/dist/internal/styles.d.ts.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -2194,24 +2194,36 @@ function pinLabel(annotation) {
2194
2194
  const tag = raw.split(/[.#\s]/)[0] ?? "";
2195
2195
  return (TAG_LABELS3[tag] ?? tag) || "element";
2196
2196
  }
2197
+ function parseStyles(raw) {
2198
+ if (!raw) return [];
2199
+ return raw.split(";").map((s) => s.trim()).filter(Boolean).map((s) => {
2200
+ const colon = s.indexOf(":");
2201
+ if (colon === -1) return null;
2202
+ return [s.slice(0, colon).trim(), s.slice(colon + 1).trim()];
2203
+ }).filter(Boolean);
2204
+ }
2197
2205
  function Pin({ number, annotation }) {
2198
2206
  const remove = useAnnotations((s) => s.remove);
2199
2207
  const update = useAnnotations((s) => s.update);
2200
2208
  const [hovered, setHovered] = (0, import_react9.useState)(false);
2201
2209
  const [editing, setEditing] = (0, import_react9.useState)(false);
2202
2210
  const [draft, setDraft] = (0, import_react9.useState)(annotation.comment);
2211
+ const [showStyles, setShowStyles] = (0, import_react9.useState)(false);
2203
2212
  const taRef = (0, import_react9.useRef)(null);
2204
2213
  const editRef = (0, import_react9.useRef)(null);
2205
- const pos = resolvePosition(annotation);
2206
- if (!pos) return null;
2214
+ const styleEntries = parseStyles(annotation.computedStyles);
2207
2215
  const label = pinLabel(annotation);
2216
+ const headerLabel = annotation.isMultiSelect ? `${label} (multi-select)` : `${label}: "${annotation.elementPath}"`;
2208
2217
  const openEdit = () => {
2209
2218
  setDraft(annotation.comment);
2210
2219
  setEditing(true);
2211
2220
  setHovered(false);
2212
2221
  requestAnimationFrame(() => taRef.current?.focus());
2213
2222
  };
2214
- const closeEdit = () => setEditing(false);
2223
+ const closeEdit = () => {
2224
+ setEditing(false);
2225
+ setShowStyles(false);
2226
+ };
2215
2227
  const save = () => {
2216
2228
  const trimmed = draft.trim();
2217
2229
  if (trimmed) update(annotation.id, { comment: trimmed });
@@ -2230,6 +2242,27 @@ function Pin({ number, annotation }) {
2230
2242
  window.addEventListener("pointerdown", onDown, true);
2231
2243
  return () => window.removeEventListener("pointerdown", onDown, true);
2232
2244
  }, [editing]);
2245
+ (0, import_react9.useEffect)(() => {
2246
+ if (!editing) return;
2247
+ let el = null;
2248
+ if (annotation.elementPath) {
2249
+ try {
2250
+ el = document.querySelector(annotation.elementPath);
2251
+ } catch {
2252
+ }
2253
+ }
2254
+ if (!el) return;
2255
+ const prevOutline = el.style.outline;
2256
+ const prevOffset = el.style.outlineOffset;
2257
+ el.style.outline = "2px solid #10b981";
2258
+ el.style.outlineOffset = "3px";
2259
+ return () => {
2260
+ el.style.outline = prevOutline;
2261
+ el.style.outlineOffset = prevOffset;
2262
+ };
2263
+ }, [editing, annotation.elementPath]);
2264
+ const pos = resolvePosition(annotation);
2265
+ if (!pos) return null;
2233
2266
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
2234
2267
  "div",
2235
2268
  {
@@ -2260,21 +2293,42 @@ function Pin({ number, annotation }) {
2260
2293
  className: "pin-edit",
2261
2294
  onClick: (e) => e.stopPropagation(),
2262
2295
  children: [
2263
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pin-edit-header", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "pin-edit-label", children: [
2264
- label,
2265
- ": ",
2266
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pin-edit-path", children: annotation.elementPath })
2267
- ] }) }),
2296
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
2297
+ "div",
2298
+ {
2299
+ className: "popup-header",
2300
+ role: "button",
2301
+ "aria-expanded": showStyles,
2302
+ onClick: (e) => {
2303
+ e.stopPropagation();
2304
+ setShowStyles((v) => !v);
2305
+ },
2306
+ children: [
2307
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "popup-chevron", children: showStyles ? "\u25BE" : "\u203A" }),
2308
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "popup-label", children: headerLabel })
2309
+ ]
2310
+ }
2311
+ ),
2312
+ showStyles && styleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "popup-styles", children: [
2313
+ styleEntries.map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "style-row", children: [
2314
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "style-key", children: k }),
2315
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "style-val", children: v })
2316
+ ] }, k)),
2317
+ annotation.suggestedCss && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "style-hint", style: { color: "#7c3aed", borderTopColor: "rgba(124,58,237,0.2)" }, children: [
2318
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: "Suggested changes:" }),
2319
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
2320
+ annotation.suggestedCss
2321
+ ] })
2322
+ ] }),
2268
2323
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2269
2324
  "textarea",
2270
2325
  {
2271
2326
  ref: taRef,
2272
- className: "pin-edit-textarea",
2273
2327
  value: draft,
2274
2328
  onChange: (e) => setDraft(e.target.value),
2275
2329
  onKeyDown,
2276
- placeholder: "Describe the issue\u2026",
2277
- rows: 3
2330
+ placeholder: "Describe the issue\u2026 (\u2318/Ctrl + Enter to save)",
2331
+ "aria-label": "Annotation comment"
2278
2332
  }
2279
2333
  ),
2280
2334
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pin-edit-actions", children: [
@@ -2287,9 +2341,9 @@ function Pin({ number, annotation }) {
2287
2341
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconTrash, {})
2288
2342
  }
2289
2343
  ),
2290
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pin-edit-right", children: [
2291
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "pin-edit-cancel", onClick: closeEdit, children: "Cancel" }),
2292
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "pin-edit-save", onClick: save, children: "Save" })
2344
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row", style: { margin: 0, flex: 1, justifyContent: "flex-end" }, children: [
2345
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "ghost", onClick: closeEdit, children: "Cancel" }),
2346
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "primary", onClick: save, children: "Save" })
2293
2347
  ] })
2294
2348
  ] })
2295
2349
  ]
@@ -2311,10 +2365,7 @@ function resolvePosition(a) {
2311
2365
  }
2312
2366
  }
2313
2367
  if (a.boundingBox) {
2314
- return {
2315
- x: a.boundingBox.x + a.boundingBox.width - 11,
2316
- y: a.boundingBox.y - 11
2317
- };
2368
+ return { x: a.boundingBox.x + a.boundingBox.width - 11, y: a.boundingBox.y - 11 };
2318
2369
  }
2319
2370
  return null;
2320
2371
  }
@@ -2638,8 +2689,10 @@ var REACT_UI_CSS = `
2638
2689
  flex-direction: column;
2639
2690
  }
2640
2691
 
2641
- /* Collapsible header row \u2014 shows element label + CSS toggle */
2642
- .clickly-popup .popup-header {
2692
+ /* \u2500\u2500\u2500 Shared inner styles \u2014 apply to both popup and pin-edit \u2500\u2500\u2500 */
2693
+
2694
+ .clickly-popup .popup-header,
2695
+ .pin-edit .popup-header {
2643
2696
  display: flex;
2644
2697
  align-items: center;
2645
2698
  gap: 5px;
@@ -2653,9 +2706,11 @@ var REACT_UI_CSS = `
2653
2706
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
2654
2707
  transition: background 80ms ease;
2655
2708
  }
2656
- .clickly-popup .popup-header:hover { background: #f1f5f9; }
2709
+ .clickly-popup .popup-header:hover,
2710
+ .pin-edit .popup-header:hover { background: #f1f5f9; }
2657
2711
 
2658
- .clickly-popup .popup-chevron {
2712
+ .clickly-popup .popup-chevron,
2713
+ .pin-edit .popup-chevron {
2659
2714
  font-size: 12px;
2660
2715
  color: #94a3b8;
2661
2716
  flex-shrink: 0;
@@ -2663,7 +2718,8 @@ var REACT_UI_CSS = `
2663
2718
  text-align: center;
2664
2719
  }
2665
2720
 
2666
- .clickly-popup .popup-label {
2721
+ .clickly-popup .popup-label,
2722
+ .pin-edit .popup-label {
2667
2723
  flex: 1;
2668
2724
  overflow: hidden;
2669
2725
  white-space: nowrap;
@@ -2701,7 +2757,8 @@ var REACT_UI_CSS = `
2701
2757
  }
2702
2758
 
2703
2759
  /* Computed-styles panel */
2704
- .clickly-popup .popup-styles {
2760
+ .clickly-popup .popup-styles,
2761
+ .pin-edit .popup-styles {
2705
2762
  margin-bottom: 8px;
2706
2763
  padding: 8px;
2707
2764
  background: #f8fafc;
@@ -2714,7 +2771,8 @@ var REACT_UI_CSS = `
2714
2771
  overscroll-behavior: contain;
2715
2772
  }
2716
2773
 
2717
- .clickly-popup .style-row {
2774
+ .clickly-popup .style-row,
2775
+ .pin-edit .style-row {
2718
2776
  display: flex;
2719
2777
  align-items: center;
2720
2778
  gap: 6px;
@@ -2724,17 +2782,27 @@ var REACT_UI_CSS = `
2724
2782
  transition: background 80ms ease;
2725
2783
  }
2726
2784
 
2727
- .clickly-popup .style-row--changed {
2785
+ .clickly-popup .style-row--changed,
2786
+ .pin-edit .style-row--changed {
2728
2787
  background: rgba(245, 158, 11, 0.10);
2729
2788
  }
2730
2789
 
2731
- .clickly-popup .style-key {
2790
+ .clickly-popup .style-key,
2791
+ .pin-edit .style-key {
2732
2792
  color: #7c3aed;
2733
2793
  flex-shrink: 0;
2734
2794
  min-width: 90px;
2735
2795
  font-size: 11px;
2736
2796
  }
2737
2797
 
2798
+ .clickly-popup .style-val,
2799
+ .pin-edit .style-val {
2800
+ color: #0f172a;
2801
+ font-size: 11px;
2802
+ word-break: break-all;
2803
+ flex: 1;
2804
+ }
2805
+
2738
2806
  /* Editable value input \u2014 live CSS preview */
2739
2807
  .clickly-popup .style-val-input {
2740
2808
  flex: 1;
@@ -2773,8 +2841,9 @@ var REACT_UI_CSS = `
2773
2841
  background: rgba(245,158,11,0.12);
2774
2842
  }
2775
2843
 
2776
- /* Hint text at bottom of CSS panel when edits exist */
2777
- .clickly-popup .style-hint {
2844
+ /* Hint text at bottom of CSS panel */
2845
+ .clickly-popup .style-hint,
2846
+ .pin-edit .style-hint {
2778
2847
  margin-top: 6px;
2779
2848
  padding-top: 6px;
2780
2849
  border-top: 1px solid #e2e8f0;
@@ -2784,7 +2853,8 @@ var REACT_UI_CSS = `
2784
2853
  line-height: 1.4;
2785
2854
  }
2786
2855
 
2787
- .clickly-popup textarea {
2856
+ .clickly-popup textarea,
2857
+ .pin-edit textarea {
2788
2858
  width: 100%;
2789
2859
  min-height: 64px;
2790
2860
  max-height: 160px;
@@ -2795,33 +2865,40 @@ var REACT_UI_CSS = `
2795
2865
  font: inherit;
2796
2866
  color: inherit;
2797
2867
  }
2798
- .clickly-popup textarea:focus {
2868
+ .clickly-popup textarea:focus,
2869
+ .pin-edit textarea:focus {
2799
2870
  outline: none;
2800
2871
  border-color: #0ea5e9;
2801
2872
  box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
2802
2873
  }
2803
2874
 
2804
- .clickly-popup .row {
2875
+ .clickly-popup .row,
2876
+ .pin-edit .row {
2805
2877
  display: flex;
2806
2878
  justify-content: flex-end;
2807
2879
  gap: 6px;
2808
2880
  margin-top: 10px;
2809
2881
  }
2810
2882
 
2811
- .clickly-popup .row .ghost {
2883
+ .clickly-popup .row .ghost,
2884
+ .pin-edit .row .ghost {
2812
2885
  background: transparent;
2813
2886
  color: #475569;
2814
2887
  border: 1px solid #e2e8f0;
2815
2888
  }
2816
- .clickly-popup .row .ghost:hover { background: #f8fafc; }
2889
+ .clickly-popup .row .ghost:hover,
2890
+ .pin-edit .row .ghost:hover { background: #f8fafc; }
2817
2891
 
2818
- .clickly-popup .row .primary {
2892
+ .clickly-popup .row .primary,
2893
+ .pin-edit .row .primary {
2819
2894
  background: #0ea5e9;
2820
2895
  color: #fff;
2821
2896
  border: none;
2822
2897
  }
2823
- .clickly-popup .row .primary:hover { background: #0284c7; }
2824
- .clickly-popup .row button {
2898
+ .clickly-popup .row .primary:hover,
2899
+ .pin-edit .row .primary:hover { background: #0284c7; }
2900
+ .clickly-popup .row button,
2901
+ .pin-edit .row button {
2825
2902
  height: 28px;
2826
2903
  padding: 0 12px;
2827
2904
  border-radius: 6px;
@@ -3102,119 +3179,77 @@ var REACT_UI_CSS = `
3102
3179
  overflow: hidden;
3103
3180
  }
3104
3181
 
3105
- /* \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 */
3182
+ /* \u2500\u2500\u2500 Pin edit popup \u2014 same white card as .clickly-popup \u2500\u2500\u2500\u2500\u2500\u2500 */
3106
3183
 
3107
3184
  .pin-edit {
3185
+ /* Positioning: floats to the LEFT of the pin */
3108
3186
  position: absolute;
3109
- right: calc(100% + 10px);
3187
+ right: calc(100% + 12px);
3110
3188
  top: 50%;
3111
3189
  transform: translateY(-50%);
3112
- width: 260px;
3190
+ /* Appearance: identical to .clickly-popup */
3191
+ width: 300px;
3192
+ padding: 12px;
3113
3193
  background: #fff;
3114
- border-radius: 12px;
3115
- box-shadow: 0 12px 40px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);
3116
- font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
3117
3194
  color: #0f172a;
3195
+ border-radius: 10px;
3196
+ box-shadow: 0 12px 32px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);
3197
+ font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
3118
3198
  text-align: left;
3119
3199
  cursor: default;
3120
3200
  z-index: 11;
3121
3201
  animation: clickly-fade-in 120ms cubic-bezier(0.16,1,0.3,1);
3202
+ /* Allow inner popup-styles to scroll */
3203
+ max-height: 80vh;
3122
3204
  overflow: hidden;
3205
+ display: flex;
3206
+ flex-direction: column;
3123
3207
  }
3124
3208
 
3125
- .pin-edit-header {
3126
- padding: 10px 12px 8px;
3127
- border-bottom: 1px solid #f1f5f9;
3128
- }
3129
-
3130
- .pin-edit-label {
3131
- font-size: 11.5px;
3132
- font-weight: 600;
3133
- color: #475569;
3134
- }
3135
-
3136
- .pin-edit-path {
3137
- font-family: ui-monospace, "SF Mono", Menlo, monospace;
3138
- font-weight: 400;
3139
- color: #94a3b8;
3140
- font-size: 10.5px;
3141
- overflow: hidden;
3142
- white-space: nowrap;
3143
- text-overflow: ellipsis;
3144
- display: inline-block;
3145
- max-width: 160px;
3146
- vertical-align: bottom;
3147
- }
3148
-
3149
- .pin-edit-textarea {
3150
- display: block;
3209
+ /* Reuse .clickly-popup textarea inside pin-edit */
3210
+ .pin-edit textarea {
3151
3211
  width: 100%;
3152
- min-height: 72px;
3153
- padding: 10px 12px;
3154
- border: none;
3155
- border-bottom: 1px solid #f1f5f9;
3212
+ min-height: 64px;
3213
+ max-height: 120px;
3214
+ padding: 8px;
3215
+ border: 1px solid #e2e8f0;
3216
+ border-radius: 6px;
3156
3217
  resize: vertical;
3157
- font: 13px/1.5 inherit;
3158
- color: #0f172a;
3218
+ font: inherit;
3219
+ color: inherit;
3159
3220
  background: #fff;
3160
3221
  box-sizing: border-box;
3161
3222
  }
3162
- .pin-edit-textarea:focus {
3223
+ .pin-edit textarea:focus {
3163
3224
  outline: none;
3164
- background: #f8fafc;
3225
+ border-color: #0ea5e9;
3226
+ box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
3165
3227
  }
3166
3228
 
3229
+ /* Actions row */
3167
3230
  .pin-edit-actions {
3168
3231
  display: flex;
3169
3232
  align-items: center;
3170
- justify-content: space-between;
3171
- padding: 8px 10px;
3172
- gap: 6px;
3173
- }
3174
-
3175
- .pin-edit-right {
3176
- display: flex;
3177
3233
  gap: 6px;
3234
+ margin-top: 10px;
3178
3235
  }
3179
3236
 
3180
3237
  .pin-edit-delete {
3181
3238
  display: grid;
3182
3239
  place-items: center;
3183
- width: 30px;
3184
- height: 30px;
3240
+ width: 28px;
3241
+ height: 28px;
3242
+ flex-shrink: 0;
3185
3243
  background: transparent;
3186
3244
  border: 1px solid #fee2e2;
3187
- border-radius: 8px;
3245
+ border-radius: 6px;
3188
3246
  color: #ef4444;
3189
3247
  cursor: pointer;
3190
3248
  padding: 0;
3191
3249
  transition: background 100ms, border-color 100ms;
3192
3250
  }
3193
3251
  .pin-edit-delete:hover { background: #fef2f2; border-color: #fca5a5; }
3194
- .pin-edit-delete svg { width: 14px; height: 14px; }
3195
-
3196
- .pin-edit-cancel, .pin-edit-save {
3197
- height: 30px;
3198
- padding: 0 12px;
3199
- border-radius: 8px;
3200
- font: 12px/1 inherit;
3201
- font-weight: 500;
3202
- cursor: pointer;
3203
- border: none;
3204
- transition: background 100ms;
3205
- }
3206
-
3207
- .pin-edit-cancel {
3208
- background: #f1f5f9;
3209
- color: #475569;
3210
- }
3211
- .pin-edit-cancel:hover { background: #e2e8f0; }
3212
-
3213
- .pin-edit-save {
3214
- background: #10b981;
3215
- color: #fff;
3216
- }
3217
- .pin-edit-save:hover { background: #059669; }
3252
+ .pin-edit-delete svg { width: 13px; height: 13px; }
3218
3253
 
3219
3254
  /* \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 */
3220
3255
 
package/dist/index.js CHANGED
@@ -2153,24 +2153,36 @@ function pinLabel(annotation) {
2153
2153
  const tag = raw.split(/[.#\s]/)[0] ?? "";
2154
2154
  return (TAG_LABELS3[tag] ?? tag) || "element";
2155
2155
  }
2156
+ function parseStyles(raw) {
2157
+ if (!raw) return [];
2158
+ return raw.split(";").map((s) => s.trim()).filter(Boolean).map((s) => {
2159
+ const colon = s.indexOf(":");
2160
+ if (colon === -1) return null;
2161
+ return [s.slice(0, colon).trim(), s.slice(colon + 1).trim()];
2162
+ }).filter(Boolean);
2163
+ }
2156
2164
  function Pin({ number, annotation }) {
2157
2165
  const remove = useAnnotations((s) => s.remove);
2158
2166
  const update = useAnnotations((s) => s.update);
2159
2167
  const [hovered, setHovered] = useState5(false);
2160
2168
  const [editing, setEditing] = useState5(false);
2161
2169
  const [draft, setDraft] = useState5(annotation.comment);
2170
+ const [showStyles, setShowStyles] = useState5(false);
2162
2171
  const taRef = useRef6(null);
2163
2172
  const editRef = useRef6(null);
2164
- const pos = resolvePosition(annotation);
2165
- if (!pos) return null;
2173
+ const styleEntries = parseStyles(annotation.computedStyles);
2166
2174
  const label = pinLabel(annotation);
2175
+ const headerLabel = annotation.isMultiSelect ? `${label} (multi-select)` : `${label}: "${annotation.elementPath}"`;
2167
2176
  const openEdit = () => {
2168
2177
  setDraft(annotation.comment);
2169
2178
  setEditing(true);
2170
2179
  setHovered(false);
2171
2180
  requestAnimationFrame(() => taRef.current?.focus());
2172
2181
  };
2173
- const closeEdit = () => setEditing(false);
2182
+ const closeEdit = () => {
2183
+ setEditing(false);
2184
+ setShowStyles(false);
2185
+ };
2174
2186
  const save = () => {
2175
2187
  const trimmed = draft.trim();
2176
2188
  if (trimmed) update(annotation.id, { comment: trimmed });
@@ -2189,6 +2201,27 @@ function Pin({ number, annotation }) {
2189
2201
  window.addEventListener("pointerdown", onDown, true);
2190
2202
  return () => window.removeEventListener("pointerdown", onDown, true);
2191
2203
  }, [editing]);
2204
+ useEffect5(() => {
2205
+ if (!editing) return;
2206
+ let el = null;
2207
+ if (annotation.elementPath) {
2208
+ try {
2209
+ el = document.querySelector(annotation.elementPath);
2210
+ } catch {
2211
+ }
2212
+ }
2213
+ if (!el) return;
2214
+ const prevOutline = el.style.outline;
2215
+ const prevOffset = el.style.outlineOffset;
2216
+ el.style.outline = "2px solid #10b981";
2217
+ el.style.outlineOffset = "3px";
2218
+ return () => {
2219
+ el.style.outline = prevOutline;
2220
+ el.style.outlineOffset = prevOffset;
2221
+ };
2222
+ }, [editing, annotation.elementPath]);
2223
+ const pos = resolvePosition(annotation);
2224
+ if (!pos) return null;
2192
2225
  return /* @__PURE__ */ jsxs7(
2193
2226
  "div",
2194
2227
  {
@@ -2219,21 +2252,42 @@ function Pin({ number, annotation }) {
2219
2252
  className: "pin-edit",
2220
2253
  onClick: (e) => e.stopPropagation(),
2221
2254
  children: [
2222
- /* @__PURE__ */ jsx7("div", { className: "pin-edit-header", children: /* @__PURE__ */ jsxs7("span", { className: "pin-edit-label", children: [
2223
- label,
2224
- ": ",
2225
- /* @__PURE__ */ jsx7("span", { className: "pin-edit-path", children: annotation.elementPath })
2226
- ] }) }),
2255
+ /* @__PURE__ */ jsxs7(
2256
+ "div",
2257
+ {
2258
+ className: "popup-header",
2259
+ role: "button",
2260
+ "aria-expanded": showStyles,
2261
+ onClick: (e) => {
2262
+ e.stopPropagation();
2263
+ setShowStyles((v) => !v);
2264
+ },
2265
+ children: [
2266
+ /* @__PURE__ */ jsx7("span", { className: "popup-chevron", children: showStyles ? "\u25BE" : "\u203A" }),
2267
+ /* @__PURE__ */ jsx7("span", { className: "popup-label", children: headerLabel })
2268
+ ]
2269
+ }
2270
+ ),
2271
+ showStyles && styleEntries.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "popup-styles", children: [
2272
+ styleEntries.map(([k, v]) => /* @__PURE__ */ jsxs7("div", { className: "style-row", children: [
2273
+ /* @__PURE__ */ jsx7("span", { className: "style-key", children: k }),
2274
+ /* @__PURE__ */ jsx7("span", { className: "style-val", children: v })
2275
+ ] }, k)),
2276
+ annotation.suggestedCss && /* @__PURE__ */ jsxs7("div", { className: "style-hint", style: { color: "#7c3aed", borderTopColor: "rgba(124,58,237,0.2)" }, children: [
2277
+ /* @__PURE__ */ jsx7("strong", { children: "Suggested changes:" }),
2278
+ /* @__PURE__ */ jsx7("br", {}),
2279
+ annotation.suggestedCss
2280
+ ] })
2281
+ ] }),
2227
2282
  /* @__PURE__ */ jsx7(
2228
2283
  "textarea",
2229
2284
  {
2230
2285
  ref: taRef,
2231
- className: "pin-edit-textarea",
2232
2286
  value: draft,
2233
2287
  onChange: (e) => setDraft(e.target.value),
2234
2288
  onKeyDown,
2235
- placeholder: "Describe the issue\u2026",
2236
- rows: 3
2289
+ placeholder: "Describe the issue\u2026 (\u2318/Ctrl + Enter to save)",
2290
+ "aria-label": "Annotation comment"
2237
2291
  }
2238
2292
  ),
2239
2293
  /* @__PURE__ */ jsxs7("div", { className: "pin-edit-actions", children: [
@@ -2246,9 +2300,9 @@ function Pin({ number, annotation }) {
2246
2300
  children: /* @__PURE__ */ jsx7(IconTrash, {})
2247
2301
  }
2248
2302
  ),
2249
- /* @__PURE__ */ jsxs7("div", { className: "pin-edit-right", children: [
2250
- /* @__PURE__ */ jsx7("button", { className: "pin-edit-cancel", onClick: closeEdit, children: "Cancel" }),
2251
- /* @__PURE__ */ jsx7("button", { className: "pin-edit-save", onClick: save, children: "Save" })
2303
+ /* @__PURE__ */ jsxs7("div", { className: "row", style: { margin: 0, flex: 1, justifyContent: "flex-end" }, children: [
2304
+ /* @__PURE__ */ jsx7("button", { className: "ghost", onClick: closeEdit, children: "Cancel" }),
2305
+ /* @__PURE__ */ jsx7("button", { className: "primary", onClick: save, children: "Save" })
2252
2306
  ] })
2253
2307
  ] })
2254
2308
  ]
@@ -2270,10 +2324,7 @@ function resolvePosition(a) {
2270
2324
  }
2271
2325
  }
2272
2326
  if (a.boundingBox) {
2273
- return {
2274
- x: a.boundingBox.x + a.boundingBox.width - 11,
2275
- y: a.boundingBox.y - 11
2276
- };
2327
+ return { x: a.boundingBox.x + a.boundingBox.width - 11, y: a.boundingBox.y - 11 };
2277
2328
  }
2278
2329
  return null;
2279
2330
  }
@@ -2597,8 +2648,10 @@ var REACT_UI_CSS = `
2597
2648
  flex-direction: column;
2598
2649
  }
2599
2650
 
2600
- /* Collapsible header row \u2014 shows element label + CSS toggle */
2601
- .clickly-popup .popup-header {
2651
+ /* \u2500\u2500\u2500 Shared inner styles \u2014 apply to both popup and pin-edit \u2500\u2500\u2500 */
2652
+
2653
+ .clickly-popup .popup-header,
2654
+ .pin-edit .popup-header {
2602
2655
  display: flex;
2603
2656
  align-items: center;
2604
2657
  gap: 5px;
@@ -2612,9 +2665,11 @@ var REACT_UI_CSS = `
2612
2665
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
2613
2666
  transition: background 80ms ease;
2614
2667
  }
2615
- .clickly-popup .popup-header:hover { background: #f1f5f9; }
2668
+ .clickly-popup .popup-header:hover,
2669
+ .pin-edit .popup-header:hover { background: #f1f5f9; }
2616
2670
 
2617
- .clickly-popup .popup-chevron {
2671
+ .clickly-popup .popup-chevron,
2672
+ .pin-edit .popup-chevron {
2618
2673
  font-size: 12px;
2619
2674
  color: #94a3b8;
2620
2675
  flex-shrink: 0;
@@ -2622,7 +2677,8 @@ var REACT_UI_CSS = `
2622
2677
  text-align: center;
2623
2678
  }
2624
2679
 
2625
- .clickly-popup .popup-label {
2680
+ .clickly-popup .popup-label,
2681
+ .pin-edit .popup-label {
2626
2682
  flex: 1;
2627
2683
  overflow: hidden;
2628
2684
  white-space: nowrap;
@@ -2660,7 +2716,8 @@ var REACT_UI_CSS = `
2660
2716
  }
2661
2717
 
2662
2718
  /* Computed-styles panel */
2663
- .clickly-popup .popup-styles {
2719
+ .clickly-popup .popup-styles,
2720
+ .pin-edit .popup-styles {
2664
2721
  margin-bottom: 8px;
2665
2722
  padding: 8px;
2666
2723
  background: #f8fafc;
@@ -2673,7 +2730,8 @@ var REACT_UI_CSS = `
2673
2730
  overscroll-behavior: contain;
2674
2731
  }
2675
2732
 
2676
- .clickly-popup .style-row {
2733
+ .clickly-popup .style-row,
2734
+ .pin-edit .style-row {
2677
2735
  display: flex;
2678
2736
  align-items: center;
2679
2737
  gap: 6px;
@@ -2683,17 +2741,27 @@ var REACT_UI_CSS = `
2683
2741
  transition: background 80ms ease;
2684
2742
  }
2685
2743
 
2686
- .clickly-popup .style-row--changed {
2744
+ .clickly-popup .style-row--changed,
2745
+ .pin-edit .style-row--changed {
2687
2746
  background: rgba(245, 158, 11, 0.10);
2688
2747
  }
2689
2748
 
2690
- .clickly-popup .style-key {
2749
+ .clickly-popup .style-key,
2750
+ .pin-edit .style-key {
2691
2751
  color: #7c3aed;
2692
2752
  flex-shrink: 0;
2693
2753
  min-width: 90px;
2694
2754
  font-size: 11px;
2695
2755
  }
2696
2756
 
2757
+ .clickly-popup .style-val,
2758
+ .pin-edit .style-val {
2759
+ color: #0f172a;
2760
+ font-size: 11px;
2761
+ word-break: break-all;
2762
+ flex: 1;
2763
+ }
2764
+
2697
2765
  /* Editable value input \u2014 live CSS preview */
2698
2766
  .clickly-popup .style-val-input {
2699
2767
  flex: 1;
@@ -2732,8 +2800,9 @@ var REACT_UI_CSS = `
2732
2800
  background: rgba(245,158,11,0.12);
2733
2801
  }
2734
2802
 
2735
- /* Hint text at bottom of CSS panel when edits exist */
2736
- .clickly-popup .style-hint {
2803
+ /* Hint text at bottom of CSS panel */
2804
+ .clickly-popup .style-hint,
2805
+ .pin-edit .style-hint {
2737
2806
  margin-top: 6px;
2738
2807
  padding-top: 6px;
2739
2808
  border-top: 1px solid #e2e8f0;
@@ -2743,7 +2812,8 @@ var REACT_UI_CSS = `
2743
2812
  line-height: 1.4;
2744
2813
  }
2745
2814
 
2746
- .clickly-popup textarea {
2815
+ .clickly-popup textarea,
2816
+ .pin-edit textarea {
2747
2817
  width: 100%;
2748
2818
  min-height: 64px;
2749
2819
  max-height: 160px;
@@ -2754,33 +2824,40 @@ var REACT_UI_CSS = `
2754
2824
  font: inherit;
2755
2825
  color: inherit;
2756
2826
  }
2757
- .clickly-popup textarea:focus {
2827
+ .clickly-popup textarea:focus,
2828
+ .pin-edit textarea:focus {
2758
2829
  outline: none;
2759
2830
  border-color: #0ea5e9;
2760
2831
  box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
2761
2832
  }
2762
2833
 
2763
- .clickly-popup .row {
2834
+ .clickly-popup .row,
2835
+ .pin-edit .row {
2764
2836
  display: flex;
2765
2837
  justify-content: flex-end;
2766
2838
  gap: 6px;
2767
2839
  margin-top: 10px;
2768
2840
  }
2769
2841
 
2770
- .clickly-popup .row .ghost {
2842
+ .clickly-popup .row .ghost,
2843
+ .pin-edit .row .ghost {
2771
2844
  background: transparent;
2772
2845
  color: #475569;
2773
2846
  border: 1px solid #e2e8f0;
2774
2847
  }
2775
- .clickly-popup .row .ghost:hover { background: #f8fafc; }
2848
+ .clickly-popup .row .ghost:hover,
2849
+ .pin-edit .row .ghost:hover { background: #f8fafc; }
2776
2850
 
2777
- .clickly-popup .row .primary {
2851
+ .clickly-popup .row .primary,
2852
+ .pin-edit .row .primary {
2778
2853
  background: #0ea5e9;
2779
2854
  color: #fff;
2780
2855
  border: none;
2781
2856
  }
2782
- .clickly-popup .row .primary:hover { background: #0284c7; }
2783
- .clickly-popup .row button {
2857
+ .clickly-popup .row .primary:hover,
2858
+ .pin-edit .row .primary:hover { background: #0284c7; }
2859
+ .clickly-popup .row button,
2860
+ .pin-edit .row button {
2784
2861
  height: 28px;
2785
2862
  padding: 0 12px;
2786
2863
  border-radius: 6px;
@@ -3061,119 +3138,77 @@ var REACT_UI_CSS = `
3061
3138
  overflow: hidden;
3062
3139
  }
3063
3140
 
3064
- /* \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 */
3141
+ /* \u2500\u2500\u2500 Pin edit popup \u2014 same white card as .clickly-popup \u2500\u2500\u2500\u2500\u2500\u2500 */
3065
3142
 
3066
3143
  .pin-edit {
3144
+ /* Positioning: floats to the LEFT of the pin */
3067
3145
  position: absolute;
3068
- right: calc(100% + 10px);
3146
+ right: calc(100% + 12px);
3069
3147
  top: 50%;
3070
3148
  transform: translateY(-50%);
3071
- width: 260px;
3149
+ /* Appearance: identical to .clickly-popup */
3150
+ width: 300px;
3151
+ padding: 12px;
3072
3152
  background: #fff;
3073
- border-radius: 12px;
3074
- box-shadow: 0 12px 40px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);
3075
- font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
3076
3153
  color: #0f172a;
3154
+ border-radius: 10px;
3155
+ box-shadow: 0 12px 32px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);
3156
+ font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
3077
3157
  text-align: left;
3078
3158
  cursor: default;
3079
3159
  z-index: 11;
3080
3160
  animation: clickly-fade-in 120ms cubic-bezier(0.16,1,0.3,1);
3161
+ /* Allow inner popup-styles to scroll */
3162
+ max-height: 80vh;
3081
3163
  overflow: hidden;
3164
+ display: flex;
3165
+ flex-direction: column;
3082
3166
  }
3083
3167
 
3084
- .pin-edit-header {
3085
- padding: 10px 12px 8px;
3086
- border-bottom: 1px solid #f1f5f9;
3087
- }
3088
-
3089
- .pin-edit-label {
3090
- font-size: 11.5px;
3091
- font-weight: 600;
3092
- color: #475569;
3093
- }
3094
-
3095
- .pin-edit-path {
3096
- font-family: ui-monospace, "SF Mono", Menlo, monospace;
3097
- font-weight: 400;
3098
- color: #94a3b8;
3099
- font-size: 10.5px;
3100
- overflow: hidden;
3101
- white-space: nowrap;
3102
- text-overflow: ellipsis;
3103
- display: inline-block;
3104
- max-width: 160px;
3105
- vertical-align: bottom;
3106
- }
3107
-
3108
- .pin-edit-textarea {
3109
- display: block;
3168
+ /* Reuse .clickly-popup textarea inside pin-edit */
3169
+ .pin-edit textarea {
3110
3170
  width: 100%;
3111
- min-height: 72px;
3112
- padding: 10px 12px;
3113
- border: none;
3114
- border-bottom: 1px solid #f1f5f9;
3171
+ min-height: 64px;
3172
+ max-height: 120px;
3173
+ padding: 8px;
3174
+ border: 1px solid #e2e8f0;
3175
+ border-radius: 6px;
3115
3176
  resize: vertical;
3116
- font: 13px/1.5 inherit;
3117
- color: #0f172a;
3177
+ font: inherit;
3178
+ color: inherit;
3118
3179
  background: #fff;
3119
3180
  box-sizing: border-box;
3120
3181
  }
3121
- .pin-edit-textarea:focus {
3182
+ .pin-edit textarea:focus {
3122
3183
  outline: none;
3123
- background: #f8fafc;
3184
+ border-color: #0ea5e9;
3185
+ box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
3124
3186
  }
3125
3187
 
3188
+ /* Actions row */
3126
3189
  .pin-edit-actions {
3127
3190
  display: flex;
3128
3191
  align-items: center;
3129
- justify-content: space-between;
3130
- padding: 8px 10px;
3131
- gap: 6px;
3132
- }
3133
-
3134
- .pin-edit-right {
3135
- display: flex;
3136
3192
  gap: 6px;
3193
+ margin-top: 10px;
3137
3194
  }
3138
3195
 
3139
3196
  .pin-edit-delete {
3140
3197
  display: grid;
3141
3198
  place-items: center;
3142
- width: 30px;
3143
- height: 30px;
3199
+ width: 28px;
3200
+ height: 28px;
3201
+ flex-shrink: 0;
3144
3202
  background: transparent;
3145
3203
  border: 1px solid #fee2e2;
3146
- border-radius: 8px;
3204
+ border-radius: 6px;
3147
3205
  color: #ef4444;
3148
3206
  cursor: pointer;
3149
3207
  padding: 0;
3150
3208
  transition: background 100ms, border-color 100ms;
3151
3209
  }
3152
3210
  .pin-edit-delete:hover { background: #fef2f2; border-color: #fca5a5; }
3153
- .pin-edit-delete svg { width: 14px; height: 14px; }
3154
-
3155
- .pin-edit-cancel, .pin-edit-save {
3156
- height: 30px;
3157
- padding: 0 12px;
3158
- border-radius: 8px;
3159
- font: 12px/1 inherit;
3160
- font-weight: 500;
3161
- cursor: pointer;
3162
- border: none;
3163
- transition: background 100ms;
3164
- }
3165
-
3166
- .pin-edit-cancel {
3167
- background: #f1f5f9;
3168
- color: #475569;
3169
- }
3170
- .pin-edit-cancel:hover { background: #e2e8f0; }
3171
-
3172
- .pin-edit-save {
3173
- background: #10b981;
3174
- color: #fff;
3175
- }
3176
- .pin-edit-save:hover { background: #059669; }
3211
+ .pin-edit-delete svg { width: 13px; height: 13px; }
3177
3212
 
3178
3213
  /* \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 */
3179
3214
 
package/dist/internal/AnnotationPins.d.ts CHANGED
@@ -1,7 +1,2 @@
1
- /**
2
- * Persistent numbered markers anchored to annotated elements. Updates
3
- * on scroll/resize (RAF-coalesced) and re-resolves the live element by
4
- * its stored `elementPath` selector on each render.
5
- */
6
1
  export declare function AnnotationPins(): import("react").JSX.Element;
7
2
  //# sourceMappingURL=AnnotationPins.d.ts.map
package/dist/internal/AnnotationPins.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AnnotationPins.d.ts","sourceRoot":"","sources":["../../src/internal/AnnotationPins.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,cAAc,gCA6B7B"}
1
+ {"version":3,"file":"AnnotationPins.d.ts","sourceRoot":"","sources":["../../src/internal/AnnotationPins.tsx"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,gCA0B7B"}
package/dist/internal/styles.d.ts CHANGED
@@ -3,5 +3,5 @@
3
3
  * the overlay-marker CSS in `@useclickly/core/styles` so each package owns
4
4
  * its surface.
5
5
  */
6
- 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/* Collapsible header row \u2014 shows element label + CSS toggle */\n.clickly-popup .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 { background: #f1f5f9; }\n\n.clickly-popup .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 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 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 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 background: rgba(245, 158, 11, 0.10);\n}\n\n.clickly-popup .style-key {\n color: #7c3aed;\n flex-shrink: 0;\n min-width: 90px;\n font-size: 11px;\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 when edits exist */\n.clickly-popup .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 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 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 display: flex;\n justify-content: flex-end;\n gap: 6px;\n margin-top: 10px;\n}\n\n.clickly-popup .row .ghost {\n background: transparent;\n color: #475569;\n border: 1px solid #e2e8f0;\n}\n.clickly-popup .row .ghost:hover { background: #f8fafc; }\n\n.clickly-popup .row .primary {\n background: #0ea5e9;\n color: #fff;\n border: none;\n}\n.clickly-popup .row .primary:hover { background: #0284c7; }\n.clickly-popup .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 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-edit {\n position: absolute;\n right: calc(100% + 10px);\n top: 50%;\n transform: translateY(-50%);\n width: 260px;\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 12px 40px 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 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 overflow: hidden;\n}\n\n.pin-edit-header {\n padding: 10px 12px 8px;\n border-bottom: 1px solid #f1f5f9;\n}\n\n.pin-edit-label {\n font-size: 11.5px;\n font-weight: 600;\n color: #475569;\n}\n\n.pin-edit-path {\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-weight: 400;\n color: #94a3b8;\n font-size: 10.5px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n max-width: 160px;\n vertical-align: bottom;\n}\n\n.pin-edit-textarea {\n display: block;\n width: 100%;\n min-height: 72px;\n padding: 10px 12px;\n border: none;\n border-bottom: 1px solid #f1f5f9;\n resize: vertical;\n font: 13px/1.5 inherit;\n color: #0f172a;\n background: #fff;\n box-sizing: border-box;\n}\n.pin-edit-textarea:focus {\n outline: none;\n background: #f8fafc;\n}\n\n.pin-edit-actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 10px;\n gap: 6px;\n}\n\n.pin-edit-right {\n display: flex;\n gap: 6px;\n}\n\n.pin-edit-delete {\n display: grid;\n place-items: center;\n width: 30px;\n height: 30px;\n background: transparent;\n border: 1px solid #fee2e2;\n border-radius: 8px;\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: 14px; height: 14px; }\n\n.pin-edit-cancel, .pin-edit-save {\n height: 30px;\n padding: 0 12px;\n border-radius: 8px;\n font: 12px/1 inherit;\n font-weight: 500;\n cursor: pointer;\n border: none;\n transition: background 100ms;\n}\n\n.pin-edit-cancel {\n background: #f1f5f9;\n color: #475569;\n}\n.pin-edit-cancel:hover { background: #e2e8f0; }\n\n.pin-edit-save {\n background: #10b981;\n color: #fff;\n}\n.pin-edit-save:hover { background: #059669; }\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";
6
+ 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";
7
7
  //# sourceMappingURL=styles.d.ts.map
package/dist/internal/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/internal/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,YAAY,i5vBAy8BxB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/internal/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,YAAY,uqvBAy7BxB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useclickly/react",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Click-to-annotate dev toolbar for React 18+ apps. Generates agent-ready prompts. Drop in one component — no config.",
5
5
  "license": "MIT",
6
6
  "author": "Clickly contributors",