@useclickly/react 1.0.0 → 1.0.2

package/dist/index.js

@@ -1,13 +1,1028 @@
-"use client";
-import { useState, useEffect, useSyncExternalStore, useRef, useMemo, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import { createShadowHost, SelectionEngine, Overlay, collectMetadata } from '@useclickly/core';
-import { create } from 'zustand';
-import { useShallow } from 'zustand/react/shallow';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { nanoid } from 'nanoid';
-
-// src/Clickly.tsx
+// packages/react/src/Clickly.tsx
+import { useEffect as useEffect7, useState as useState7 } from "react";
+import { createPortal } from "react-dom";
+
+// packages/core/dist/index.js
+function pickElementAt(doc, x, y, excludeHost) {
+  if (typeof doc.elementsFromPoint !== "function") return null;
+  const chain = doc.elementsFromPoint(x, y);
+  for (const el of chain) {
+    if (!isInExcludedSubtree(el, excludeHost)) return el;
+  }
+  return null;
+}
+function pickElementsInRect(root, rect, excludeHost) {
+  const out = [];
+  const stack = [root];
+  while (stack.length) {
+    const el = stack.pop();
+    if (isInExcludedSubtree(el, excludeHost)) continue;
+    const box = el.getBoundingClientRect();
+    if (box.width > 0 && box.height > 0 && containedIn(box, rect)) {
+      out.push(el);
+    }
+    for (let i = 0; i < el.children.length; i++) {
+      const child = el.children[i];
+      if (child) stack.push(child);
+    }
+  }
+  return out;
+}
+function containedIn(el, sel) {
+  return el.left >= sel.x && el.top >= sel.y && el.right <= sel.x + sel.width && el.bottom <= sel.y + sel.height;
+}
+function isInExcludedSubtree(el, host) {
+  if (!host) return false;
+  let cur = el;
+  while (cur) {
+    if (cur === host) return true;
+    cur = cur.parentNode;
+  }
+  return false;
+}
+function manhattan(a, b) {
+  return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+}
+function rectFromPoints(start, current) {
+  const x = Math.min(start.x, current.x);
+  const y = Math.min(start.y, current.y);
+  const width = Math.abs(current.x - start.x);
+  const height = Math.abs(current.y - start.y);
+  return { x, y, width, height };
+}
+var DRAG_THRESHOLD_PX = 12;
+var initialState = { kind: "idle" };
+function reduce(state, event) {
+  if (event.type === "DEACTIVATE") return { kind: "idle" };
+  if (event.type === "ESCAPE") {
+    if (state.kind === "idle") return state;
+    if (state.kind === "annotating") return resumeInspect(
+      [],
+      /* mode */
+      void 0
+    );
+    if (state.kind === "inspect" && state.pinned.length > 0) {
+      return { ...state, pinned: [], hoverTarget: null };
+    }
+    return resumeInspect("pinned" in state ? state.pinned : []);
+  }
+  if (event.type === "CLEAR_PINNED") {
+    if (state.kind === "idle") return state;
+    if (state.kind === "inspect") return { ...state, pinned: [] };
+    return state;
+  }
+  switch (state.kind) {
+    case "idle":
+      if (event.type === "ACTIVATE") {
+        return {
+          kind: "inspect",
+          mode: event.mode ?? "single",
+          hoverTarget: null,
+          pinned: []
+        };
+      }
+      return state;
+    case "inspect":
+      if (event.type === "MODE_CHANGE") return { ...state, mode: event.mode };
+      if (event.type === "POINTER_MOVE") return { ...state, hoverTarget: event.target };
+      if (event.type === "POINTER_DOWN") {
+        return {
+          kind: "pressed",
+          mode: state.mode,
+          start: event.point,
+          target: event.target,
+          additive: event.additive,
+          pinned: state.pinned
+        };
+      }
+      if (event.type === "ANNOTATE_PINNED") {
+        if (state.pinned.length === 0) return state;
+        return {
+          kind: "annotating",
+          selection: { kind: "multi", elements: state.pinned },
+          pinned: state.pinned
+        };
+      }
+      return state;
+    case "pressed":
+      if (event.type === "POINTER_MOVE") {
+        if (manhattan(state.start, event.point) >= DRAG_THRESHOLD_PX) {
+          return {
+            kind: "dragging",
+            mode: state.mode,
+            start: state.start,
+            current: event.point,
+            pinned: state.pinned
+          };
+        }
+        return state;
+      }
+      if (event.type === "POINTER_UP") {
+        if (!state.target) {
+          return resumeInspect(state.pinned, state.mode);
+        }
+        if (state.additive || state.mode === "multi") {
+          const nextPinned = togglePinned(state.pinned, state.target);
+          return {
+            kind: "inspect",
+            mode: state.mode,
+            hoverTarget: state.target,
+            pinned: nextPinned
+          };
+        }
+        return {
+          kind: "annotating",
+          selection: { kind: "single", element: state.target },
+          pinned: state.pinned
+        };
+      }
+      return state;
+    case "dragging":
+      if (event.type === "POINTER_MOVE") return { ...state, current: event.point };
+      if (event.type === "POINTER_UP") {
+        const rect = rectFromPoints(state.start, state.current);
+        const selection = { kind: "area", rect, elements: [] };
+        return { kind: "annotating", selection, pinned: state.pinned };
+      }
+      return state;
+    case "annotating":
+      if (event.type === "COMMIT") {
+        return resumeInspect([]);
+      }
+      return state;
+  }
+}
+function resumeInspect(pinned, mode) {
+  return {
+    kind: "inspect",
+    mode: mode ?? "single",
+    hoverTarget: null,
+    pinned
+  };
+}
+function togglePinned(pinned, el) {
+  const idx = pinned.indexOf(el);
+  if (idx === -1) return [...pinned, el];
+  const next = pinned.slice();
+  next.splice(idx, 1);
+  return next;
+}
+var SelectionEngine = class {
+  state = initialState;
+  listeners = /* @__PURE__ */ new Set();
+  doc;
+  host;
+  raf;
+  caf;
+  searchRoot;
+  pendingPointer = null;
+  rafHandle = null;
+  /** Guard for the pointermove RAF coalescer. Separate from `rafHandle`
+   *  because a synchronous `raf` (used in tests) returns a handle the cb
+   *  has already invalidated — boolean is the safe sentinel. */
+  rafPending = false;
+  attached = false;
+  boundHandlers = [];
+  constructor(deps = {}) {
+    this.doc = deps.document ?? (typeof document !== "undefined" ? document : null);
+    if (!this.doc) {
+      throw new Error("SelectionEngine: no Document available (pass `deps.document`).");
+    }
+    this.host = deps.host ?? null;
+    this.raf = deps.raf ?? ((cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : setTimeout(() => cb(performance.now()), 16));
+    this.caf = deps.caf ?? ((h) => {
+      if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(h);
+      else clearTimeout(h);
+    });
+    this.searchRoot = deps.searchRoot ?? this.doc.body;
+  }
+  /* ─── Subscribable<EngineState> ───────────────────────────────── */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  getSnapshot() {
+    return this.state;
+  }
+  /* ─── Public control ──────────────────────────────────────────── */
+  activate(mode) {
+    perfMark("clickly:engine:activate");
+    this.dispatch(mode ? { type: "ACTIVATE", mode } : { type: "ACTIVATE" });
+    this.attach();
+  }
+  deactivate() {
+    perfMark("clickly:engine:deactivate");
+    this.detach();
+    this.dispatch({ type: "DEACTIVATE" });
+  }
+  setMode(mode) {
+    this.dispatch({ type: "MODE_CHANGE", mode });
+  }
+  commit() {
+    this.dispatch({ type: "COMMIT" });
+  }
+  clearPinned() {
+    this.dispatch({ type: "CLEAR_PINNED" });
+  }
+  /** Open the annotation popup populated with everything currently pinned. */
+  annotatePinned() {
+    this.dispatch({ type: "ANNOTATE_PINNED" });
+  }
+  /**
+   * Returns the resolved selection from the current annotating state, with
+   * area-mode element enumeration filled in (the reducer leaves it empty).
+   * Returns null if not currently annotating.
+   */
+  resolveSelection() {
+    if (this.state.kind !== "annotating") return null;
+    const sel = this.state.selection;
+    if (sel.kind !== "area") return sel;
+    const elements = pickElementsInRect(this.searchRoot, sel.rect, this.host);
+    return { ...sel, elements };
+  }
+  /* ─── Lifecycle ───────────────────────────────────────────────── */
+  attach() {
+    if (this.attached) return;
+    this.attached = true;
+    const win = this.doc.defaultView ?? globalThis;
+    this.bind(this.doc, "pointermove", this.onPointerMove, { passive: true });
+    this.bind(this.doc, "pointerdown", this.onPointerDown);
+    this.bind(this.doc, "pointerup", this.onPointerUp);
+    this.bind(win, "keydown", this.onKeyDown);
+  }
+  detach() {
+    if (!this.attached) return;
+    for (const [t, ev, fn, opts] of this.boundHandlers) t.removeEventListener(ev, fn, opts);
+    this.boundHandlers = [];
+    this.attached = false;
+    if (this.rafHandle !== null) {
+      this.caf(this.rafHandle);
+      this.rafHandle = null;
+    }
+    this.rafPending = false;
+  }
+  destroy() {
+    this.detach();
+    this.listeners.clear();
+  }
+  bind(target, ev, fn, opts) {
+    target.addEventListener(ev, fn, opts);
+    this.boundHandlers.push([target, ev, fn, opts]);
+  }
+  /* ─── DOM event handlers ──────────────────────────────────────── */
+  onPointerMove = (e) => {
+    this.pendingPointer = { x: e.clientX, y: e.clientY };
+    if (this.rafPending) return;
+    this.rafPending = true;
+    this.rafHandle = this.raf(() => {
+      this.rafPending = false;
+      this.rafHandle = null;
+      const pt = this.pendingPointer;
+      this.pendingPointer = null;
+      if (!pt) return;
+      const target = pickElementAt(this.doc, pt.x, pt.y, this.host);
+      this.dispatch({ type: "POINTER_MOVE", point: pt, target });
+    });
+  };
+  onPointerDown = (e) => {
+    if (this.host && e.composedPath().includes(this.host)) return;
+    const target = pickElementAt(this.doc, e.clientX, e.clientY, this.host);
+    this.dispatch({
+      type: "POINTER_DOWN",
+      point: { x: e.clientX, y: e.clientY },
+      target,
+      additive: e.shiftKey || e.metaKey || e.ctrlKey
+    });
+  };
+  onPointerUp = (e) => {
+    this.dispatch({ type: "POINTER_UP", point: { x: e.clientX, y: e.clientY } });
+  };
+  onKeyDown = (e) => {
+    if (e.key === "Escape") this.dispatch({ type: "ESCAPE" });
+  };
+  /* ─── Reducer plumbing ────────────────────────────────────────── */
+  dispatch(event) {
+    const next = reduce(this.state, event);
+    if (next === this.state) return;
+    this.state = next;
+    for (const l of this.listeners) l(next);
+  }
+};
+function perfMark(name) {
+  if (typeof performance !== "undefined" && typeof performance.mark === "function") {
+    try {
+      performance.mark(name);
+    } catch {
+    }
+  }
+}
+var OVERLAY_CSS = `
+:host {
+  --clickly-hover: #06b6d4;
+  --clickly-pinned: #f59e0b;
+  --clickly-selected: #10b981;
+  --clickly-marquee-stroke: #10b981;
+  --clickly-marquee-fill: rgba(16, 185, 129, 0.10);
+  --clickly-label-bg: rgba(15, 23, 42, 0.92);
+  --clickly-label-fg: #f8fafc;
+  --clickly-shadow: 0 0 0 1px rgba(255,255,255,0.5);
+
+  all: initial;
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  pointer-events: none;
+  contain: layout style paint;
+  isolation: isolate;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+}
+
+.layer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  will-change: transform, width, height, opacity;
+}
+
+.marker {
+  position: fixed;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+  border-radius: 2px;
+  pointer-events: none;
+  will-change: transform, width, height, opacity;
+  transition: opacity 80ms linear;
+}
+
+.marker[hidden] { display: none; }
+
+.marker.hover     { box-shadow: 0 0 0 2px var(--clickly-hover),     var(--clickly-shadow); }
+.marker.pinned    { box-shadow: 0 0 0 2px var(--clickly-pinned),    var(--clickly-shadow); }
+.marker.selected  { box-shadow: 0 0 0 2px var(--clickly-selected),  var(--clickly-shadow); }
+
+/* Marquee \u2014 used during drag (dashed) AND for the committed union
+   box around multi/area selections (solid).                          */
+.marker.marquee {
+  border: 2px dashed var(--clickly-marquee-stroke);
+  background: var(--clickly-marquee-fill);
+  border-radius: 8px;
+}
+.marker.marquee.is-committed {
+  border-style: solid;
+  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.18);
+}
+
+.label {
+  position: fixed;
+  left: 0;
+  top: 0;
+  padding: 2px 6px;
+  background: var(--clickly-label-bg);
+  color: var(--clickly-label-fg);
+  font-size: 11px;
+  line-height: 1.4;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+  max-width: 50vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+`;
+var HOST_TAG = "clickly-root";
+function createShadowHost(deps = {}) {
+  const doc = deps.document ?? (typeof document !== "undefined" ? document : null);
+  if (!doc) throw new Error("createShadowHost: no Document available");
+  const existing = doc.querySelector(HOST_TAG);
+  const host = existing ?? doc.createElement(HOST_TAG);
+  if (!existing) doc.body.appendChild(host);
+  const root = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+  if (!root.querySelector("style[data-clickly]")) {
+    const style = doc.createElement("style");
+    style.setAttribute("data-clickly", "");
+    style.textContent = OVERLAY_CSS;
+    root.appendChild(style);
+  }
+  return {
+    host,
+    root,
+    destroy() {
+      host.remove();
+    }
+  };
+}
+var OverlayRenderer = class {
+  root;
+  document;
+  layer;
+  hover;
+  hoverLabel;
+  /** Marquee rect — used both for live drag AND for the union box
+   *  drawn around multi-element selections after commit. */
+  marquee;
+  /** Pinned/selected single-element rings (recycled across renders). */
+  pinnedPool = [];
+  selectedPool = [];
+  /** Last rendered state — used to re-render on scroll without a state change. */
+  lastState = null;
+  constructor(root, document2) {
+    this.root = root;
+    this.document = document2 ?? root.ownerDocument ?? (typeof globalThis !== "undefined" && globalThis.document ? globalThis.document : null);
+    if (!this.document) throw new Error("OverlayRenderer: no Document available");
+    this.layer = this.div("layer");
+    this.root.appendChild(this.layer);
+    this.hover = this.div("marker hover");
+    this.hover.hidden = true;
+    this.layer.appendChild(this.hover);
+    this.hoverLabel = this.div("label");
+    this.hoverLabel.hidden = true;
+    this.layer.appendChild(this.hoverLabel);
+    this.marquee = this.div("marker marquee");
+    this.marquee.hidden = true;
+    this.layer.appendChild(this.marquee);
+    this.document.addEventListener("scroll", this.onScroll, {
+      passive: true,
+      capture: true
+    });
+  }
+  onScroll = () => {
+    if (this.lastState) this.renderState(this.lastState);
+  };
+  render(state) {
+    this.lastState = state;
+    this.renderState(state);
+  }
+  renderState(state) {
+    this.renderSingle(this.hover, state.hover);
+    if (state.hover) {
+      this.hoverLabel.hidden = false;
+      this.hoverLabel.textContent = describeElement(state.hover);
+      const rect = state.hover.getBoundingClientRect();
+      const labelY = rect.top - 20 < 0 ? rect.bottom + 4 : rect.top - 20;
+      moveTo(this.hoverLabel, rect.left, labelY);
+    } else {
+      this.hoverLabel.hidden = true;
+    }
+    this.renderList(this.pinnedPool, state.pinned, "marker pinned");
+    const sel = state.selection ?? [];
+    const isMultiUnion = sel.length > 1 || state.marquee !== null && sel.length === 0;
+    if (sel.length === 1) {
+      this.renderList(this.selectedPool, [sel[0]], "marker selected");
+    } else {
+      this.renderList(this.selectedPool, [], "marker selected");
+    }
+    const marqueeRect = state.marquee ?? (sel.length > 1 ? unionOf(sel) : null);
+    if (marqueeRect) {
+      this.marquee.classList.toggle("is-committed", state.marquee === null);
+      this.placeRect(this.marquee, marqueeRect);
+      this.marquee.hidden = false;
+    } else {
+      this.marquee.hidden = true;
+    }
+    void isMultiUnion;
+  }
+  destroy() {
+    this.document.removeEventListener("scroll", this.onScroll, { capture: true });
+    this.lastState = null;
+    this.layer.remove();
+  }
+  /* ─── Internals ───────────────────────────────────────────────── */
+  renderSingle(node, target) {
+    if (!target) {
+      node.hidden = true;
+      return;
+    }
+    const r = target.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0) {
+      node.hidden = true;
+      return;
+    }
+    this.placeRect(node, { x: r.left, y: r.top, width: r.width, height: r.height });
+    node.hidden = false;
+  }
+  renderList(pool, targets, className) {
+    while (pool.length < targets.length) {
+      const el = this.div(className);
+      el.hidden = true;
+      this.layer.appendChild(el);
+      pool.push(el);
+    }
+    for (let i = 0; i < pool.length; i++) {
+      const node = pool[i];
+      const target = targets[i];
+      if (!target) {
+        node.hidden = true;
+        continue;
+      }
+      const r = target.getBoundingClientRect();
+      if (r.width === 0 && r.height === 0) {
+        node.hidden = true;
+        continue;
+      }
+      this.placeRect(node, { x: r.left, y: r.top, width: r.width, height: r.height });
+      node.hidden = false;
+    }
+  }
+  placeRect(node, rect) {
+    moveTo(node, rect.x, rect.y);
+    node.style.width = `${rect.width}px`;
+    node.style.height = `${rect.height}px`;
+  }
+  div(className) {
+    const el = this.document.createElement("div");
+    el.className = className;
+    return el;
+  }
+};
+function moveTo(node, x, y) {
+  const tx = Math.round(x);
+  const ty = Math.round(y);
+  node.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;
+}
+var TAG_LABELS = {
+  p: "paragraph",
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  h5: "heading",
+  h6: "heading",
+  a: "link",
+  button: "button",
+  input: "input",
+  textarea: "textarea",
+  select: "select",
+  img: "image",
+  video: "video",
+  audio: "audio",
+  form: "form",
+  nav: "nav",
+  header: "header",
+  footer: "footer",
+  main: "main",
+  section: "section",
+  article: "article",
+  aside: "aside",
+  ul: "list",
+  ol: "list",
+  li: "list item",
+  table: "table",
+  thead: "table head",
+  tbody: "table body",
+  tr: "table row",
+  td: "cell",
+  th: "header cell",
+  span: "span",
+  div: "div",
+  label: "label",
+  code: "code",
+  pre: "code block",
+  blockquote: "quote",
+  strong: "bold",
+  em: "italic",
+  kbd: "key",
+  svg: "svg",
+  canvas: "canvas"
+};
+function describeElement(el) {
+  const tag = el.tagName.toLowerCase();
+  const type = TAG_LABELS[tag] ?? tag;
+  const text = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+  if (text.length > 0) {
+    const preview = text.length > 48 ? text.slice(0, 48) + "\u2026" : text;
+    return `${type}: "${preview}"`;
+  }
+  if (el.id) return `${type}: #${el.id}`;
+  const cls = el.classList[0];
+  if (cls) return `${type}: .${cls}`;
+  return type;
+}
+function unionOf(elements) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let any = false;
+  for (const el of elements) {
+    const r = el.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0) continue;
+    any = true;
+    if (r.left < minX) minX = r.left;
+    if (r.top < minY) minY = r.top;
+    if (r.right > maxX) maxX = r.right;
+    if (r.bottom > maxY) maxY = r.bottom;
+  }
+  if (!any) return null;
+  const PAD = 4;
+  return {
+    x: minX - PAD,
+    y: minY - PAD,
+    width: maxX - minX + PAD * 2,
+    height: maxY - minY + PAD * 2
+  };
+}
+var emptyRenderState = {
+  hover: null,
+  pinned: [],
+  selection: null,
+  marquee: null
+};
+var Overlay = class {
+  renderer;
+  engine;
+  doc;
+  win;
+  searchRoot;
+  excludeHost;
+  raf;
+  caf;
+  state = emptyRenderState;
+  unsubscribe = null;
+  rafHandle = null;
+  /** Guard for scheduleRender re-entry. Tracked separately from `rafHandle`
+   *  because a synchronous `raf` (used in tests) returns a handle the cb has
+   *  already invalidated — boolean is the safe sentinel. */
+  renderPending = false;
+  destroyed = false;
+  bound = [];
+  constructor(opts) {
+    this.engine = opts.engine;
+    this.doc = opts.document ?? opts.root.ownerDocument ?? null;
+    if (!this.doc) throw new Error("Overlay: no Document available");
+    this.win = this.doc.defaultView ?? globalThis;
+    this.searchRoot = opts.searchRoot ?? this.doc.body;
+    this.excludeHost = opts.excludeHost ?? null;
+    this.raf = opts.raf ?? ((cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : setTimeout(() => cb(performance.now()), 16));
+    this.caf = opts.caf ?? ((h) => {
+      if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(h);
+      else clearTimeout(h);
+    });
+    this.renderer = new OverlayRenderer(opts.root, this.doc);
+    this.bindEvent(this.doc, "scroll", this.onReposition, { passive: true, capture: true });
+    this.bindEvent(this.win, "resize", this.onReposition, { passive: true });
+    this.unsubscribe = this.engine.subscribe((s) => this.onEngineState(s));
+    this.onEngineState(this.engine.getSnapshot());
+  }
+  destroy() {
+    this.destroyed = true;
+    if (this.unsubscribe) this.unsubscribe();
+    this.unsubscribe = null;
+    if (this.rafHandle !== null) this.caf(this.rafHandle);
+    this.rafHandle = null;
+    for (const [t, ev, fn, opts] of this.bound) t.removeEventListener(ev, fn, opts);
+    this.bound = [];
+    this.renderer.destroy();
+  }
+  /* ─── Internals ───────────────────────────────────────────────── */
+  onReposition = () => {
+    if (this.destroyed) return;
+    if (hasAnythingToTrack(this.state)) this.scheduleRender();
+  };
+  onEngineState(s) {
+    this.state = this.derive(s);
+    this.scheduleRender();
+  }
+  /** Engine state → render state. */
+  derive(s) {
+    switch (s.kind) {
+      case "idle":
+        return emptyRenderState;
+      case "inspect":
+        return { hover: s.hoverTarget, pinned: s.pinned, selection: null, marquee: null };
+      case "pressed":
+        return { hover: s.target, pinned: s.pinned, selection: null, marquee: null };
+      case "dragging": {
+        const rect = rectFromPoints(s.start, s.current);
+        return { hover: null, pinned: s.pinned, selection: null, marquee: rect };
+      }
+      case "annotating": {
+        const sel = s.selection;
+        const elements = sel.kind === "area" ? pickElementsInRect(this.searchRoot, sel.rect, this.excludeHost) : sel.kind === "multi" ? sel.elements : [sel.element];
+        return { hover: null, pinned: s.pinned, selection: elements, marquee: null };
+      }
+    }
+  }
+  scheduleRender() {
+    if (this.destroyed || this.renderPending) return;
+    this.renderPending = true;
+    this.rafHandle = this.raf(() => {
+      this.renderPending = false;
+      this.rafHandle = null;
+      if (this.destroyed) return;
+      this.renderer.render(this.state);
+    });
+  }
+  bindEvent(target, ev, fn, opts) {
+    target.addEventListener(ev, fn, opts);
+    this.bound.push([target, ev, fn, opts]);
+  }
+};
+function hasAnythingToTrack(s) {
+  return s.hover !== null || s.pinned.length > 0 || s.selection !== null && s.selection.length > 0 || s.marquee !== null;
+}
+var FIBER_PROP_PREFIX = "__reactFiber$";
+function getFiber(node) {
+  if (!node) return null;
+  for (const key of Object.keys(node)) {
+    if (key.startsWith(FIBER_PROP_PREFIX)) return node[key];
+  }
+  return null;
+}
+function getComponentChain(node) {
+  const fiber = getFiber(node);
+  if (!fiber) return [];
+  const names = [];
+  let cur = fiber;
+  while (cur) {
+    const name = getComponentName(cur);
+    if (name) names.unshift(name);
+    cur = cur.return;
+  }
+  return dedupeConsecutive(names);
+}
+function getComponentName(fiber) {
+  const t = fiber.type;
+  if (!t) return null;
+  if (typeof t === "string") return null;
+  if (typeof t === "function") {
+    const fn = t;
+    return fn.displayName || fn.name || null;
+  }
+  if (typeof t === "object") {
+    const o = t;
+    if (o.displayName) return o.displayName;
+    if (o.render) return o.render.displayName || o.render.name || null;
+    if (o.type) return o.type.displayName || o.type.name || null;
+  }
+  return null;
+}
+function dedupeConsecutive(names) {
+  const out = [];
+  for (const n of names) {
+    if (out[out.length - 1] !== n) out.push(n);
+  }
+  return out;
+}
+function getSourceInfo(node) {
+  const fiber = getFiber(node);
+  if (!fiber) return null;
+  let cur = fiber._debugOwner;
+  while (cur) {
+    if (cur._debugSource) return cur._debugSource;
+    cur = cur._debugOwner;
+  }
+  cur = fiber;
+  while (cur) {
+    if (cur._debugSource) return cur._debugSource;
+    cur = cur.return;
+  }
+  return null;
+}
+function collectAccessibility(el) {
+  const parts = [];
+  const role = el.getAttribute("role");
+  if (role) parts.push(`role=${role}`);
+  for (const attr of Array.from(el.attributes)) {
+    if (attr.name.startsWith("aria-") && attr.value) {
+      parts.push(`${attr.name}=${attr.value}`);
+    }
+  }
+  const tabindex = el.getAttribute("tabindex");
+  if (tabindex !== null && tabindex !== "") parts.push(`tabindex=${tabindex}`);
+  const title = el.getAttribute("title");
+  if (title) parts.push(`title=${title}`);
+  return parts.join("; ");
+}
+var GROUPS = {
+  layout: [
+    "display",
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "width",
+    "height",
+    "margin",
+    "padding",
+    "box-sizing"
+  ],
+  visual: [
+    "color",
+    "background-color",
+    "border",
+    "border-radius",
+    "outline"
+  ],
+  text: [
+    "font-family",
+    "font-size",
+    "font-weight",
+    "line-height",
+    "letter-spacing",
+    "text-align",
+    "white-space"
+  ],
+  flexgrid: [
+    "flex-direction",
+    "justify-content",
+    "align-items",
+    "gap",
+    "grid-template-columns",
+    "grid-template-rows"
+  ],
+  effects: ["transform", "box-shadow", "filter"],
+  misc: ["cursor", "z-index", "overflow", "opacity", "transition", "animation"]
+};
+var TIER_GROUPS = {
+  compact: [],
+  standard: ["layout", "visual", "text"],
+  detailed: ["layout", "visual", "text", "flexgrid", "effects"],
+  forensic: ["layout", "visual", "text", "flexgrid", "effects", "misc"]
+};
+function collectComputedStyles(el, detail) {
+  if (detail === "compact") return {};
+  const doc = el.ownerDocument;
+  const win = doc?.defaultView ?? globalThis;
+  if (typeof win.getComputedStyle !== "function") return {};
+  const cs = win.getComputedStyle(el);
+  const props = /* @__PURE__ */ new Set();
+  for (const g of TIER_GROUPS[detail]) {
+    for (const p of GROUPS[g]) props.add(p);
+  }
+  const out = {};
+  for (const p of props) {
+    const v = cs.getPropertyValue(p);
+    if (!v) continue;
+    const trimmed = v.trim();
+    if (isUninterestingDefault(p, trimmed)) continue;
+    out[p] = trimmed;
+  }
+  return out;
+}
+function isUninterestingDefault(prop, value) {
+  if (!value || value === "none" || value === "auto" || value === "normal") return true;
+  if (value === "0px" || value === "0%") return true;
+  if (value === "rgba(0, 0, 0, 0)") return true;
+  if (prop === "color" || prop === "background-color") {
+    return value === "rgba(0, 0, 0, 0)";
+  }
+  return false;
+}
+var SHORT_MAX_DEPTH = 5;
+var FULL_MAX_DEPTH = 8;
+function buildSelector(target, doc = target.ownerDocument ?? document) {
+  if (target.id && isStableId(target.id)) {
+    const escaped = cssEscape(target.id);
+    const id = `#${escaped}`;
+    return { short: id, full: id };
+  }
+  const segments = [];
+  let cur = target;
+  let short = null;
+  for (let depth = 0; cur && depth < FULL_MAX_DEPTH; depth++) {
+    segments.unshift(segmentFor(cur));
+    const candidate = segments.join(" > ");
+    if (short === null && depth < SHORT_MAX_DEPTH && isUnique(doc, candidate)) {
+      short = candidate;
+    }
+    cur = cur.parentElement;
+    if (!cur || cur === doc.documentElement || cur.tagName.toLowerCase() === "html") break;
+  }
+  const full = segments.join(" > ");
+  return { short: short ?? full, full };
+}
+function segmentFor(el) {
+  const tag = el.tagName.toLowerCase();
+  if (el.id && isStableId(el.id)) return `${tag}#${cssEscape(el.id)}`;
+  const classes = Array.from(el.classList).filter(isUseableClass).slice(0, 3);
+  let segment = classes.length ? `${tag}.${classes.map(cssEscape).join(".")}` : tag;
+  const parent = el.parentElement;
+  if (parent) {
+    const sameTag = Array.from(parent.children).filter(
+      (c) => c.tagName === el.tagName
+    );
+    if (sameTag.length > 1) {
+      const idx = sameTag.indexOf(el) + 1;
+      if (idx > 0) segment += `:nth-of-type(${idx})`;
+    }
+  }
+  return segment;
+}
+function isUseableClass(c) {
+  if (!c) return false;
+  if (c.length > 30) return false;
+  if (/^css-[a-z0-9]+$/i.test(c)) return false;
+  if (/^jsx-\d+$/i.test(c)) return false;
+  if (/^_.+_[a-z0-9]{5,}$/i.test(c)) return false;
+  if (/^\d/.test(c)) return false;
+  return true;
+}
+function isStableId(id) {
+  if (/^:[a-z]\d+:/i.test(id)) return false;
+  if (/^radix-/i.test(id)) return false;
+  if (/^headlessui-/i.test(id)) return false;
+  return true;
+}
+function isUnique(doc, selector) {
+  try {
+    return doc.querySelectorAll(selector).length === 1;
+  } catch {
+    return false;
+  }
+}
+function cssEscape(s) {
+  const g = globalThis;
+  if (g.CSS?.escape) return g.CSS.escape(s);
+  return s.replace(/[^a-zA-Z0-9_-]/g, (c) => "\\" + c);
+}
+var NEARBY_MAX = 200;
+function collectNearbyText(el) {
+  const own = readText(el);
+  if (own) return truncate(own, NEARBY_MAX);
+  const parent = el.parentElement;
+  if (parent) {
+    const t = readText(parent);
+    if (t) return truncate(t, NEARBY_MAX);
+  }
+  return "";
+}
+function collectSelectedText(doc = document) {
+  const win = doc.defaultView ?? globalThis;
+  if (typeof win.getSelection !== "function") return "";
+  const sel = win.getSelection();
+  if (!sel) return "";
+  return sel.toString().trim();
+}
+function readText(el) {
+  const t = el.innerText ?? el.textContent ?? "";
+  return t.replace(/\s+/g, " ").trim();
+}
+function truncate(s, n) {
+  return s.length <= n ? s : s.slice(0, n - 1) + "\u2026";
+}
+var POSITIONED_FIXED = /* @__PURE__ */ new Set(["fixed", "sticky"]);
+function collectMetadata(el, options = {}) {
+  perfMark2("clickly:metadata:collect");
+  const detail = options.detail ?? "standard";
+  const includeReact = options.includeReact !== false && detail !== "compact";
+  const doc = options.document ?? el.ownerDocument ?? document;
+  const { short, full } = buildSelector(el, doc);
+  const rect = el.getBoundingClientRect();
+  const boundingBox = { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+  const reactComponents = includeReact ? getComponentChain(el).join(" > ") : "";
+  const source = includeReact ? getSourceInfo(el) : null;
+  return {
+    element: el.tagName.toLowerCase(),
+    elementPath: short,
+    fullPath: full,
+    cssClasses: typeof el.className === "string" ? el.className.trim() : "",
+    computedStyles: collectComputedStyles(el, detail),
+    accessibility: collectAccessibility(el),
+    nearbyText: collectNearbyText(el),
+    selectedText: options.selectedText ?? collectSelectedText(doc),
+    boundingBox,
+    isFixed: hasFixedAncestor(el),
+    reactComponents,
+    sourceFile: source?.fileName ?? "",
+    sourceLine: source?.lineNumber ?? 0,
+    sourceColumn: source?.columnNumber ?? 0
+  };
+}
+function perfMark2(name) {
+  if (typeof performance !== "undefined" && typeof performance.mark === "function") {
+    try {
+      performance.mark(name);
+    } catch {
+    }
+  }
+}
+function hasFixedAncestor(el) {
+  const doc = el.ownerDocument;
+  const win = doc?.defaultView ?? globalThis;
+  if (typeof win.getComputedStyle !== "function") return false;
+  let cur = el;
+  for (let i = 0; cur && i < 8; i++) {
+    const pos = win.getComputedStyle(cur).getPropertyValue("position");
+    if (POSITIONED_FIXED.has(pos)) return true;
+    cur = cur.parentElement;
+  }
+  return false;
+}
+
+// packages/react/src/internal/ClicklyRoot.tsx
+import { useEffect as useEffect6, useState as useState6 } from "react";
+
+// packages/react/src/internal/Toolbar.tsx
+import { useRef as useRef4, useState as useState3 } from "react";
+
+// packages/react/src/hooks/useDraggable.ts
+import { useCallback, useEffect, useRef, useState } from "react";
 function useDraggable(defaultPos, size) {
   const [position, setPosition] = useState(defaultPos);
   const [isDragging, setDragging] = useState(false);
@@ -62,6 +1077,9 @@ function useDraggable(defaultPos, size) {
 function clamp(n, lo, hi) {
   return Math.max(lo, Math.min(hi, n));
 }
+
+// packages/react/src/state/useEngineState.ts
+import { useSyncExternalStore } from "react";
 function useEngineState(engine) {
   return useSyncExternalStore(
     (cb) => engine ? engine.subscribe(cb) : () => {
@@ -71,6 +1089,119 @@ function useEngineState(engine) {
   );
 }
 var IDLE = { kind: "idle" };
+
+// node_modules/.pnpm/zustand@5.0.14_@types+react@18.3.31_react@18.3.1/node_modules/zustand/esm/vanilla.mjs
+var createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState2;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const api = { setState, getState, getInitialState, subscribe };
+  const initialState2 = state = createState(setState, getState, api);
+  return api;
+};
+var createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
+
+// node_modules/.pnpm/zustand@5.0.14_@types+react@18.3.31_react@18.3.1/node_modules/zustand/esm/react.mjs
+import React from "react";
+var identity = (arg) => arg;
+function useStore(api, selector = identity) {
+  const slice = React.useSyncExternalStore(
+    api.subscribe,
+    React.useCallback(() => selector(api.getState()), [api, selector]),
+    React.useCallback(() => selector(api.getInitialState()), [api, selector])
+  );
+  React.useDebugValue(slice);
+  return slice;
+}
+var createImpl = (createState) => {
+  const api = createStore(createState);
+  const useBoundStore = (selector) => useStore(api, selector);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+var create = ((createState) => createState ? createImpl(createState) : createImpl);
+
+// node_modules/.pnpm/zustand@5.0.14_@types+react@18.3.31_react@18.3.1/node_modules/zustand/esm/react/shallow.mjs
+import React2 from "react";
+
+// node_modules/.pnpm/zustand@5.0.14_@types+react@18.3.31_react@18.3.1/node_modules/zustand/esm/vanilla/shallow.mjs
+var isIterable = (obj) => Symbol.iterator in obj;
+var hasIterableEntries = (value) => (
+  // HACK: avoid checking entries type
+  "entries" in value
+);
+var compareEntries = (valueA, valueB) => {
+  const mapA = valueA instanceof Map ? valueA : new Map(valueA.entries());
+  const mapB = valueB instanceof Map ? valueB : new Map(valueB.entries());
+  if (mapA.size !== mapB.size) {
+    return false;
+  }
+  for (const [key, value] of mapA) {
+    if (!mapB.has(key) || !Object.is(value, mapB.get(key))) {
+      return false;
+    }
+  }
+  return true;
+};
+var compareIterables = (valueA, valueB) => {
+  const iteratorA = valueA[Symbol.iterator]();
+  const iteratorB = valueB[Symbol.iterator]();
+  let nextA = iteratorA.next();
+  let nextB = iteratorB.next();
+  while (!nextA.done && !nextB.done) {
+    if (!Object.is(nextA.value, nextB.value)) {
+      return false;
+    }
+    nextA = iteratorA.next();
+    nextB = iteratorB.next();
+  }
+  return !!nextA.done && !!nextB.done;
+};
+function shallow(valueA, valueB) {
+  if (Object.is(valueA, valueB)) {
+    return true;
+  }
+  if (typeof valueA !== "object" || valueA === null || typeof valueB !== "object" || valueB === null) {
+    return false;
+  }
+  if (Object.getPrototypeOf(valueA) !== Object.getPrototypeOf(valueB)) {
+    return false;
+  }
+  if (isIterable(valueA) && isIterable(valueB)) {
+    if (hasIterableEntries(valueA) && hasIterableEntries(valueB)) {
+      return compareEntries(valueA, valueB);
+    }
+    return compareIterables(valueA, valueB);
+  }
+  return compareEntries(
+    { entries: () => Object.entries(valueA) },
+    { entries: () => Object.entries(valueB) }
+  );
+}
+
+// node_modules/.pnpm/zustand@5.0.14_@types+react@18.3.31_react@18.3.1/node_modules/zustand/esm/react/shallow.mjs
+function useShallow(selector) {
+  const prev = React2.useRef(void 0);
+  return (state) => {
+    const next = selector(state);
+    return shallow(prev.current, next) ? prev.current : prev.current = next;
+  };
+}
+
+// packages/react/src/state/annotations.ts
 var useAnnotations = create((set, get) => ({
   byId: {},
   order: [],
@@ -100,6 +1231,8 @@ function useAnnotationsList() {
     useShallow((s) => s.order.map((id) => s.byId[id]).filter(Boolean))
   );
 }
+
+// packages/react/src/state/settings.ts
 var DEFAULTS = {
   outputDetail: "standard",
   copyOnAdd: true,
@@ -138,7 +1271,7 @@ var useSettings = create((set) => ({
   }
 }));
 
-// src/output/markdown.ts
+// packages/react/src/output/markdown.ts
 function annotationsToMarkdown(annotations, detail = "standard") {
   if (!annotations.length) return "(no annotations)";
   return annotations.map((a, i) => formatOne(a, i + 1, detail)).join("\n\n");
@@ -161,18 +1294,24 @@ function formatOne(a, index, detail) {
   }
   if (detail === "detailed" || detail === "forensic") {
     if (a.reactComponents) lines.push(`**React:** ${a.reactComponents}`);
-    if (a.nearbyText) lines.push(`**Nearby text:** ${truncate(a.nearbyText, 120)}`);
+    if (a.nearbyText) lines.push(`**Nearby text:** ${truncate2(a.nearbyText, 120)}`);
   }
   if (detail === "forensic" && a.computedStyles) {
-    lines.push("**Computed styles:**\n```\n" + a.computedStyles + "\n```");
+    lines.push("**Computed styles:**\n```css\n" + a.computedStyles + "\n```");
   }
   lines.push(`**Feedback:** ${a.comment}`);
+  if (a.suggestedCss) {
+    lines.push("**Suggested CSS:**\n```css\n" + a.suggestedCss + "\n```");
+  }
   if (a.severity) lines.push(`**Severity:** ${a.severity}`);
   return lines.join("\n");
 }
-function truncate(s, n) {
+function truncate2(s, n) {
   return s.length <= n ? s : s.slice(0, n - 1) + "\u2026";
 }
+
+// packages/react/src/internal/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 function Icon({
   children,
   size = 16
@@ -199,7 +1338,6 @@ var IconLayers = () => /* @__PURE__ */ jsxs(Icon, { children: [
   /* @__PURE__ */ jsx("path", { d: "M3 12l9 5 9-5" }),
   /* @__PURE__ */ jsx("path", { d: "M3 17l9 5 9-5" })
 ] });
-var IconSquare = () => /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", strokeDasharray: "3 3" }) });
 var IconCopy = () => /* @__PURE__ */ jsxs(Icon, { children: [
   /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
   /* @__PURE__ */ jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
@@ -220,109 +1358,220 @@ var IconGrip = () => /* @__PURE__ */ jsxs(Icon, { children: [
 var IconClose = () => /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) });
 var IconCheck = () => /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5L20 7" }) });
 var IconList = () => /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }) });
+
+// packages/react/src/internal/SettingsPopover.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SettingsPopover({ anchor, width, onClose }) {
-  const ref = useRef(null);
+  const ref = useRef2(null);
   const s = useSettings();
-  useEffect(() => {
+  useEffect2(() => {
     const onDown = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) onClose();
+      if (ref.current && e.composedPath().includes(ref.current)) return;
+      onClose();
     };
     window.addEventListener("pointerdown", onDown, true);
     return () => window.removeEventListener("pointerdown", onDown, true);
   }, [onClose]);
-  const top = Math.max(8, anchor.y - 200);
-  const left = Math.min(window.innerWidth - 268, anchor.x + width - 260);
-  return /* @__PURE__ */ jsxs("div", { ref, className: "clickly-popover", style: { left, top }, children: [
-    /* @__PURE__ */ jsx("h4", { children: "Settings" }),
-    /* @__PURE__ */ jsxs("div", { className: "field", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "clickly-detail", children: "Output detail" }),
-      /* @__PURE__ */ jsxs(
+  const PANEL_H = 330;
+  const top = Math.max(8, anchor.y - PANEL_H - 12);
+  const left = Math.min(window.innerWidth - 300, Math.max(8, anchor.x + width - 284));
+  return /* @__PURE__ */ jsxs2("div", { ref, className: "clickly-settings", style: { left, top }, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "settings-header", children: [
+      /* @__PURE__ */ jsx2("span", { className: "settings-title", children: "Settings" }),
+      /* @__PURE__ */ jsx2("button", { className: "settings-close", onClick: onClose, "aria-label": "Close settings", children: /* @__PURE__ */ jsx2(IconClose, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "settings-section", children: [
+      /* @__PURE__ */ jsxs2("label", { className: "settings-label", htmlFor: "clickly-detail", children: [
+        "Output detail",
+        /* @__PURE__ */ jsx2("span", { className: "settings-hint", children: "How much metadata is captured" })
+      ] }),
+      /* @__PURE__ */ jsxs2(
         "select",
         {
           id: "clickly-detail",
+          className: "settings-select",
           value: s.outputDetail,
           onChange: (e) => s.set({ outputDetail: e.target.value }),
           children: [
-            /* @__PURE__ */ jsx("option", { value: "compact", children: "Compact" }),
-            /* @__PURE__ */ jsx("option", { value: "standard", children: "Standard" }),
-            /* @__PURE__ */ jsx("option", { value: "detailed", children: "Detailed" }),
-            /* @__PURE__ */ jsx("option", { value: "forensic", children: "Forensic" })
+            /* @__PURE__ */ jsx2("option", { value: "compact", children: "Compact" }),
+            /* @__PURE__ */ jsx2("option", { value: "standard", children: "Standard" }),
+            /* @__PURE__ */ jsx2("option", { value: "detailed", children: "Detailed" }),
+            /* @__PURE__ */ jsx2("option", { value: "forensic", children: "Forensic" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "field", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "clickly-copy", children: "Copy on add" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: "clickly-copy",
-          type: "checkbox",
-          checked: s.copyOnAdd,
-          onChange: (e) => s.set({ copyOnAdd: e.target.checked })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "field", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "clickly-react", children: "React components" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: "clickly-react",
-          type: "checkbox",
-          checked: s.showReactComponents,
-          onChange: (e) => s.set({ showReactComponents: e.target.checked })
-        }
-      )
+    /* @__PURE__ */ jsx2("div", { className: "settings-divider" }),
+    /* @__PURE__ */ jsxs2("div", { className: "settings-section", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "settings-row", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "settings-row-label", children: [
+          "Copy on add",
+          /* @__PURE__ */ jsx2("span", { className: "settings-hint", children: "Auto-copy markdown when annotating" })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { className: "clickly-toggle", children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "checkbox",
+              checked: s.copyOnAdd,
+              onChange: (e) => s.set({ copyOnAdd: e.target.checked })
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "toggle-track" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "settings-row", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "settings-row-label", children: [
+          "React components",
+          /* @__PURE__ */ jsx2("span", { className: "settings-hint", children: "Include component tree in output" })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { className: "clickly-toggle", children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "checkbox",
+              checked: s.showReactComponents,
+              onChange: (e) => s.set({ showReactComponents: e.target.checked })
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "toggle-track" })
+        ] })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "field", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "clickly-color", children: "Marker color" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: "clickly-color",
-          type: "color",
-          value: s.markerColor,
-          onChange: (e) => s.set({ markerColor: e.target.value })
-        }
-      )
-    ] })
-  ] });
+    /* @__PURE__ */ jsx2("div", { className: "settings-divider" }),
+    /* @__PURE__ */ jsx2("div", { className: "settings-section", children: /* @__PURE__ */ jsxs2("div", { className: "settings-row", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "settings-row-label", children: [
+        "Marker color",
+        /* @__PURE__ */ jsx2("span", { className: "settings-hint", children: "Color used for annotation pins" })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "settings-color-wrap", "aria-label": "Marker color", children: [
+        /* @__PURE__ */ jsx2("span", { className: "color-swatch", style: { background: s.markerColor } }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "color",
+            value: s.markerColor,
+            onChange: (e) => s.set({ markerColor: e.target.value })
+          }
+        )
+      ] })
+    ] }) })
+  ] });
 }
+
+// packages/react/src/internal/AnnotationList.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AnnotationList({ anchor, width, onClose }) {
   const items = useAnnotationsList();
   const remove = useAnnotations((s) => s.remove);
-  const ref = useRef(null);
-  useEffect(() => {
+  const outputDetail = useSettings((s) => s.outputDetail);
+  const ref = useRef3(null);
+  useEffect3(() => {
     const onDown = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) onClose();
+      if (ref.current && e.composedPath().includes(ref.current)) return;
+      onClose();
     };
     window.addEventListener("pointerdown", onDown, true);
     return () => window.removeEventListener("pointerdown", onDown, true);
   }, [onClose]);
-  const top = Math.max(8, anchor.y - 8 - Math.min(window.innerHeight * 0.5, items.length * 60 + 40));
-  const left = Math.min(window.innerWidth - 328, anchor.x);
-  return /* @__PURE__ */ jsx("div", { ref, className: "clickly-list", style: { left, top }, children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "empty", children: "No annotations yet." }) : items.map((a, i) => /* @__PURE__ */ jsxs("div", { className: "row", children: [
-    /* @__PURE__ */ jsxs("span", { className: "num", children: [
-      "#",
-      i + 1
+  const estimatedHeight = Math.min(window.innerHeight * 0.55, items.length * 88 + 48);
+  const top = Math.max(8, anchor.y - estimatedHeight - 12);
+  const left = Math.min(window.innerWidth - 336, Math.max(8, anchor.x));
+  return /* @__PURE__ */ jsxs3("div", { ref, className: "clickly-list", style: { left, top }, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "list-header", children: [
+      /* @__PURE__ */ jsx3("span", { className: "list-title", children: "Annotations" }),
+      /* @__PURE__ */ jsx3("span", { className: "list-count", children: items.length })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "body", children: [
-      /* @__PURE__ */ jsx("div", { className: "selector", children: a.elementPath }),
-      /* @__PURE__ */ jsx("p", { children: a.comment })
+    items.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "list-empty", children: "No annotations yet." }) : /* @__PURE__ */ jsx3("div", { className: "list-items", children: items.map((a, i) => /* @__PURE__ */ jsx3(
+      AnnotationCard,
+      {
+        annotation: a,
+        index: i + 1,
+        outputDetail,
+        onRemove: () => remove(a.id)
+      },
+      a.id
+    )) })
+  ] });
+}
+function AnnotationCard({
+  annotation: a,
+  index,
+  outputDetail,
+  onRemove
+}) {
+  const [copied, setCopied] = useState2(false);
+  const copyOne = async () => {
+    const md = formatOne(a, index, outputDetail);
+    try {
+      await navigator.clipboard.writeText(md);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "list-card", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "list-card-header", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "list-card-num", children: [
+        "#",
+        index
+      ] }),
+      /* @__PURE__ */ jsx3("span", { className: "list-card-path", children: a.elementPath }),
+      /* @__PURE__ */ jsxs3("div", { className: "list-card-actions", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            className: `list-action-btn${copied ? " copied" : ""}`,
+            onClick: copyOne,
+            title: `Copy annotation #${index} (${outputDetail})`,
+            children: copied ? /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsx3(IconCopy, {})
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            className: "list-action-btn list-action-delete",
+            onClick: onRemove,
+            title: "Remove annotation",
+            children: /* @__PURE__ */ jsx3(IconClose, {})
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("button", { className: "remove", onClick: () => remove(a.id), title: "Remove", children: /* @__PURE__ */ jsx(IconClose, {}) })
-  ] }, a.id)) });
+    /* @__PURE__ */ jsx3("p", { className: "list-card-comment", children: a.comment }),
+    a.suggestedCss && /* @__PURE__ */ jsxs3("div", { className: "list-card-css", children: [
+      /* @__PURE__ */ jsx3("span", { className: "list-card-css-label", children: "CSS changes" }),
+      /* @__PURE__ */ jsx3("pre", { className: "list-card-css-code", children: a.suggestedCss })
+    ] })
+  ] });
+}
+
+// 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 };
+function Tip({
+  label,
+  shortcut,
+  children
+}) {
+  return /* @__PURE__ */ jsxs4("span", { className: "clickly-tip", children: [
+    children,
+    /* @__PURE__ */ jsxs4("span", { className: "tip-bubble", "aria-hidden": "true", children: [
+      label,
+      shortcut && /* @__PURE__ */ jsx4("kbd", { children: shortcut })
+    ] })
+  ] });
 }
-var TOOLBAR_SIZE = { width: 360, height: 40 };
 function Toolbar({ engine, onCollapse }) {
   const state = useEngineState(engine);
   const annotations = useAnnotationsList();
   const clearAnnotations = useAnnotations((s) => s.clear);
   const outputDetail = useSettings((s) => s.outputDetail);
-  const [showSettings, setShowSettings] = useState(false);
-  const [showList, setShowList] = useState(false);
-  const anchorRef = useRef(null);
+  const [showSettings, setShowSettings] = useState3(false);
+  const [showList, setShowList] = useState3(false);
+  const anchorRef = useRef4(null);
   const { position, handleProps } = useDraggable(
     {
       x: Math.max(8, window.innerWidth - TOOLBAR_SIZE.width - 16),
@@ -344,11 +1593,7 @@ function Toolbar({ engine, onCollapse }) {
     } catch {
     }
   };
-  const onClear = () => {
-    if (annotations.length === 0) return;
-    if (confirm(`Clear ${annotations.length} annotation(s)?`)) clearAnnotations();
-  };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: anchorRef,
@@ -356,134 +1601,112 @@ function Toolbar({ engine, onCollapse }) {
       style: { left: position.x, top: position.y, width: TOOLBAR_SIZE.width },
       "aria-label": "Clickly toolbar",
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx4(Tip, { label: "Move", children: /* @__PURE__ */ jsx4(
           "div",
           {
             className: "grip",
             ...handleProps,
-            title: "Drag to move",
             role: "separator",
             "aria-orientation": "vertical",
-            children: /* @__PURE__ */ jsx(IconGrip, {})
+            children: /* @__PURE__ */ jsx4(IconGrip, {})
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx4(Tip, { label: "Select", shortcut: "1", children: /* @__PURE__ */ jsx4(
           "button",
           {
             className: `clickly-btn icon-only${currentMode === "single" ? " is-active" : ""}`,
             onClick: () => setMode("single"),
-            title: "Single (1)",
             "aria-label": "Single-element selection mode",
             "aria-pressed": currentMode === "single",
-            children: /* @__PURE__ */ jsx(IconCursor, {})
+            children: /* @__PURE__ */ jsx4(IconCursor, {})
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx4(Tip, { label: "Multi-select", shortcut: "2", children: /* @__PURE__ */ jsx4(
           "button",
           {
             className: `clickly-btn icon-only${currentMode === "multi" ? " is-active" : ""}`,
             onClick: () => setMode("multi"),
-            title: "Multi-select (2 / shift-click)",
             "aria-label": "Multi-element selection mode",
             "aria-pressed": currentMode === "multi",
-            children: /* @__PURE__ */ jsx(IconLayers, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: `clickly-btn icon-only${currentMode === "area" ? " is-active" : ""}`,
-            onClick: () => setMode("area"),
-            title: "Area drag (3)",
-            "aria-label": "Area drag-selection mode",
-            "aria-pressed": currentMode === "area",
-            children: /* @__PURE__ */ jsx(IconSquare, {})
+            children: /* @__PURE__ */ jsx4(IconLayers, {})
           }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "divider" }),
-        pinnedCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
+        ) }),
+        /* @__PURE__ */ jsx4("div", { className: "divider" }),
+        pinnedCount > 0 && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4(Tip, { label: `Annotate ${pinnedCount} element(s)`, shortcut: "\u21B5", children: /* @__PURE__ */ jsxs4(
             "button",
             {
               className: "clickly-btn primary-pinned",
               onClick: () => engine.annotatePinned(),
-              title: `Annotate the ${pinnedCount} pinned element(s) (Enter)`,
               children: [
-                /* @__PURE__ */ jsx(IconCheck, {}),
-                "Annotate (",
-                pinnedCount,
-                ")"
+                /* @__PURE__ */ jsx4(IconCheck, {}),
+                /* @__PURE__ */ jsx4("span", { children: pinnedCount })
               ]
             }
-          ),
-          /* @__PURE__ */ jsx(
+          ) }),
+          /* @__PURE__ */ jsx4(Tip, { label: "Clear selection", shortcut: "Esc", children: /* @__PURE__ */ jsx4(
             "button",
             {
               className: "clickly-btn icon-only",
               onClick: () => engine.clearPinned(),
-              title: "Clear pinned (Esc)",
-              children: /* @__PURE__ */ jsx(IconClose, {})
+              children: /* @__PURE__ */ jsx4(IconClose, {})
             }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "divider" })
+          ) }),
+          /* @__PURE__ */ jsx4("div", { className: "divider" })
         ] }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx4(Tip, { label: "Annotations", shortcut: "L", children: /* @__PURE__ */ jsxs4(
           "button",
           {
-            className: "clickly-btn",
+            className: "clickly-btn icon-only",
             onClick: () => setShowList((v) => !v),
-            title: "Annotations (L)",
+            "aria-label": "Show annotation list",
             children: [
-              /* @__PURE__ */ jsx(IconList, {}),
-              annotations.length > 0 && /* @__PURE__ */ jsx("span", { className: "clickly-counter", children: annotations.length })
+              /* @__PURE__ */ jsx4(IconList, {}),
+              annotations.length > 0 && /* @__PURE__ */ jsx4("span", { className: "clickly-counter", children: annotations.length })
             ]
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx4(Tip, { label: "Copy feedback", shortcut: "C", children: /* @__PURE__ */ jsx4(
           "button",
           {
             className: "clickly-btn icon-only",
             onClick: onCopy,
-            title: "Copy markdown (C)",
             "aria-label": "Copy all annotations as markdown",
             disabled: annotations.length === 0,
-            children: /* @__PURE__ */ jsx(IconCopy, {})
+            children: /* @__PURE__ */ jsx4(IconCopy, {})
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx4(Tip, { label: "Clear all", shortcut: "X", children: /* @__PURE__ */ jsx4(
           "button",
           {
             className: "clickly-btn icon-only",
-            onClick: onClear,
-            title: "Clear (X)",
+            onClick: () => clearAnnotations(),
             "aria-label": "Clear all annotations",
             disabled: annotations.length === 0,
-            children: /* @__PURE__ */ jsx(IconTrash, {})
+            children: /* @__PURE__ */ jsx4(IconTrash, {})
           }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "divider" }),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx4("div", { className: "divider" }),
+        /* @__PURE__ */ jsx4(Tip, { label: "Settings", children: /* @__PURE__ */ jsx4(
           "button",
           {
-            className: "clickly-btn icon-only",
+            className: `clickly-btn icon-only${showSettings ? " is-active" : ""}`,
             onClick: () => setShowSettings((v) => !v),
-            title: "Settings",
             "aria-label": "Open settings",
             "aria-expanded": showSettings,
-            children: /* @__PURE__ */ jsx(IconSettings, {})
+            children: /* @__PURE__ */ jsx4(IconSettings, {})
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx4(Tip, { label: "Close", shortcut: "Esc", children: /* @__PURE__ */ jsx4(
           "button",
           {
             className: "clickly-btn icon-only",
             onClick: onCollapse,
-            title: "Collapse (Esc)",
             "aria-label": "Collapse Clickly toolbar",
-            children: /* @__PURE__ */ jsx(IconClose, {})
+            children: /* @__PURE__ */ jsx4(IconClose, {})
           }
-        ),
-        showSettings && /* @__PURE__ */ jsx(
+        ) }),
+        showSettings && /* @__PURE__ */ jsx4(
           SettingsPopover,
           {
             anchor: { x: position.x, y: position.y },
@@ -491,7 +1714,7 @@ function Toolbar({ engine, onCollapse }) {
             onClose: () => setShowSettings(false)
           }
         ),
-        showList && /* @__PURE__ */ jsx(
+        showList && /* @__PURE__ */ jsx4(
           AnnotationList,
           {
             anchor: { x: position.x, y: position.y },
@@ -503,9 +1726,12 @@ function Toolbar({ engine, onCollapse }) {
     }
   );
 }
+
+// packages/react/src/internal/CollapsedFAB.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function CollapsedFAB({ onExpand }) {
   const annotations = useAnnotationsList();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs5(
     "button",
     {
       className: "clickly-fab",
@@ -513,27 +1739,75 @@ function CollapsedFAB({ onExpand }) {
       title: "Open Clickly (\u2318/Ctrl+Shift+F)",
       "aria-label": "Open Clickly toolbar",
       children: [
-        /* @__PURE__ */ jsx(IconCursor, {}),
-        annotations.length > 0 && /* @__PURE__ */ jsx("span", { className: "clickly-fab-badge", children: annotations.length })
+        /* @__PURE__ */ jsx5(IconCursor, {}),
+        annotations.length > 0 && /* @__PURE__ */ jsx5("span", { className: "clickly-fab-badge", children: annotations.length })
       ]
     }
   );
 }
+
+// packages/react/src/internal/AnnotationPopup.tsx
+import { useCallback as useCallback2, useEffect as useEffect4, 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;
-var POPUP_H_EST = 200;
+var POPUP_H_EST = 240;
 function AnnotationPopup({ engine }) {
   const state = useEngineState(engine);
   const addAnnotation = useAnnotations((s) => s.add);
   const copyOnAdd = useSettings((s) => s.copyOnAdd);
   const outputDetail = useSettings((s) => s.outputDetail);
-  const [comment, setComment] = useState("");
-  const taRef = useRef(null);
-  useEffect(() => {
+  const [comment, setComment] = useState4("");
+  const [showStyles, setShowStyles] = useState4(false);
+  const [editMode, setEditMode] = useState4(false);
+  const [styles, setStyles] = useState4({});
+  const [editedStyles, setEditedStyles] = useState4({});
+  const targetElRef = useRef5(null);
+  const taRef = useRef5(null);
+  const popupRef = useRef5(null);
+  useEffect4(() => {
     if (state.kind === "annotating") {
       setComment("");
+      setShowStyles(false);
+      setEditMode(false);
+      setEditedStyles({});
+      const sel = engine.resolveSelection();
+      const el = sel?.kind === "single" ? sel.element : sel?.kind === "multi" || sel?.kind === "area" ? sel.elements[0] : null;
+      targetElRef.current = el instanceof HTMLElement ? el : null;
+      if (el) {
+        setStyles(collectComputedStyles(el, "standard"));
+      } else {
+        setStyles({});
+      }
       requestAnimationFrame(() => taRef.current?.focus());
     }
-  }, [state.kind]);
+  }, [state.kind, engine]);
+  useEffect4(() => {
+    if (state.kind !== "annotating") return;
+    const onDown = (e) => {
+      if (popupRef.current && e.composedPath().includes(popupRef.current)) return;
+      engine.commit();
+    };
+    window.addEventListener("pointerdown", onDown, true);
+    return () => window.removeEventListener("pointerdown", onDown, true);
+  }, [state.kind, engine]);
+  const onStyleChange = (prop, value) => {
+    setEditedStyles((prev) => ({ ...prev, [prop]: value }));
+    targetElRef.current?.style.setProperty(prop, value);
+  };
+  const revertProp = (prop) => {
+    targetElRef.current?.style.removeProperty(prop);
+    setEditedStyles((prev) => {
+      const next = { ...prev };
+      delete next[prop];
+      return next;
+    });
+  };
+  const cancel = () => {
+    revertAll(targetElRef.current, editedStyles);
+    setEditedStyles({});
+    engine.commit();
+  };
   const onKey = (e) => {
     if (e.key === "Escape") {
       e.preventDefault();
@@ -544,14 +1818,16 @@ function AnnotationPopup({ engine }) {
       submit();
     }
   };
-  const cancel = () => engine.commit();
   const submit = () => {
     if (state.kind !== "annotating") return;
     const sel = engine.resolveSelection();
     if (!sel) return;
     const elements = sel.kind === "single" ? [sel.element] : sel.elements;
     if (elements.length === 0) return;
+    const cssDiff = buildCssDiff(styles, editedStyles);
     const sharedComment = comment.trim() || "(no comment)";
+    revertAll(targetElRef.current, editedStyles);
+    setEditedStyles({});
     const isMulti = sel.kind !== "single";
     const showReact = useSettings.getState().showReactComponents;
     for (const el of elements) {
@@ -579,7 +1855,8 @@ function AnnotationPopup({ engine }) {
         sourceColumn: md.sourceColumn || void 0,
         isMultiSelect: isMulti,
         kind: "feedback",
-        status: "pending"
+        status: "pending",
+        suggestedCss: cssDiff || void 0
       };
       addAnnotation(annotation);
     }
@@ -589,29 +1866,118 @@ function AnnotationPopup({ engine }) {
     }
     engine.commit();
   };
-  const placement = useMemo(() => {
-    if (state.kind !== "annotating") return null;
+  const [placement, setPlacement] = useState4(null);
+  const calcPlacement = useCallback2(() => {
+    if (state.kind !== "annotating") {
+      setPlacement(null);
+      return;
+    }
     const sel = engine.resolveSelection();
-    if (!sel) return null;
+    if (!sel) {
+      setPlacement(null);
+      return;
+    }
     const rect = anchorRect(sel);
-    if (!rect) return null;
-    let top = rect.bottom + 8;
-    let left = rect.left;
-    if (top + POPUP_H_EST > window.innerHeight) {
-      top = Math.max(8, rect.top - POPUP_H_EST - 8);
+    if (!rect) {
+      setPlacement(null);
+      return;
     }
-    if (left + POPUP_W > window.innerWidth) {
-      left = Math.max(8, window.innerWidth - POPUP_W - 8);
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const label = describeSelection(sel);
+    const elementArea = rect.width * rect.height;
+    if (elementArea > vw * vh * 0.7) {
+      setPlacement({
+        top: Math.round((vh - POPUP_H_EST) / 2),
+        left: Math.round((vw - POPUP_W) / 2),
+        label
+      });
+      return;
     }
-    return { top, left, label: describeSelection(sel) };
+    let top = rect.bottom + 8;
+    let left = rect.left;
+    if (top + POPUP_H_EST > vh) top = Math.max(8, rect.top - POPUP_H_EST - 8);
+    if (left + POPUP_W > vw) left = Math.max(8, vw - POPUP_W - 8);
+    setPlacement({ top, left, label });
   }, [state, engine]);
+  useEffect4(() => {
+    calcPlacement();
+  }, [calcPlacement]);
+  useEffect4(() => {
+    if (state.kind !== "annotating") return;
+    const onScroll = () => calcPlacement();
+    window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    return () => window.removeEventListener("scroll", onScroll, { capture: true });
+  }, [state.kind, calcPlacement]);
   if (state.kind !== "annotating" || !placement) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "clickly-popup", style: { top: placement.top, left: placement.left }, children: [
-    /* @__PURE__ */ jsxs("div", { className: "target-info", children: [
-      /* @__PURE__ */ jsx("span", { children: placement.label }),
-      /* @__PURE__ */ jsx("span", { children: state.selection.kind })
+  const styleEntries = Object.entries(styles);
+  const hasEdits = Object.keys(editedStyles).length > 0;
+  return /* @__PURE__ */ jsxs6("div", { ref: popupRef, className: "clickly-popup", style: { top: placement.top, left: placement.left }, children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: "popup-header",
+        role: "button",
+        "aria-expanded": showStyles,
+        onClick: () => setShowStyles((v) => !v),
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: "popup-chevron", children: showStyles ? "\u25BE" : "\u203A" }),
+          /* @__PURE__ */ jsx6("span", { className: "popup-label", children: placement.label }),
+          showStyles && /* @__PURE__ */ jsx6(
+            "button",
+            {
+              className: `popup-edit-toggle${editMode ? " is-editing" : ""}`,
+              onClick: (e) => {
+                e.stopPropagation();
+                setEditMode((v) => !v);
+              },
+              title: editMode ? "Done editing" : "Edit CSS live",
+              "aria-label": editMode ? "Exit CSS edit mode" : "Edit CSS values live",
+              children: editMode ? (
+                // checkmark when in edit mode
+                /* @__PURE__ */ jsx6("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("polyline", { points: "20 6 9 17 4 12" }) })
+              ) : (
+                // pencil icon
+                /* @__PURE__ */ jsxs6("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx6("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+                  /* @__PURE__ */ jsx6("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+                ] })
+              )
+            }
+          )
+        ]
+      }
+    ),
+    showStyles && styleEntries.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "popup-styles", children: [
+      styleEntries.map(([prop, origVal]) => {
+        const currentVal = editedStyles[prop] ?? origVal;
+        const changed = editedStyles[prop] !== void 0 && editedStyles[prop] !== origVal;
+        return /* @__PURE__ */ jsxs6("div", { className: `style-row${changed ? " style-row--changed" : ""}`, children: [
+          /* @__PURE__ */ jsx6("span", { className: "style-key", children: prop }),
+          editMode ? /* @__PURE__ */ jsx6(
+            "input",
+            {
+              className: "style-val-input",
+              value: currentVal,
+              onChange: (e) => onStyleChange(prop, e.target.value),
+              spellCheck: false,
+              "aria-label": prop
+            }
+          ) : /* @__PURE__ */ jsx6("span", { className: "style-val", children: currentVal }),
+          changed && /* @__PURE__ */ jsx6(
+            "button",
+            {
+              className: "style-revert-btn",
+              onClick: () => revertProp(prop),
+              title: "Revert to original",
+              children: "\u21A9"
+            }
+          )
+        ] }, prop);
+      }),
+      hasEdits && /* @__PURE__ */ jsx6("div", { className: "style-hint", children: "Changes are live on page. Cancel reverts them." })
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx6(
       "textarea",
       {
         ref: taRef,
@@ -622,38 +1988,111 @@ function AnnotationPopup({ engine }) {
         onKeyDown: onKey
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "row", children: [
-      /* @__PURE__ */ jsx("button", { className: "ghost", onClick: cancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx("button", { className: "primary", onClick: submit, children: "Add" })
+    /* @__PURE__ */ jsxs6("div", { className: "row", children: [
+      /* @__PURE__ */ jsx6("button", { className: "ghost", onClick: cancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx6("button", { className: "primary", onClick: submit, children: "Add" })
     ] })
   ] });
 }
-function stringifyStyles(styles) {
-  const entries = Object.entries(styles);
+function revertAll(el, edits) {
+  if (!el) return;
+  for (const prop of Object.keys(edits)) {
+    el.style.removeProperty(prop);
+  }
+}
+function buildCssDiff(original, edited) {
+  const lines = [];
+  for (const [prop, val] of Object.entries(edited)) {
+    if (val !== original[prop]) {
+      lines.push(`  ${prop}: ${val};  /* was: ${original[prop] ?? "unset"} */`);
+    }
+  }
+  if (lines.length === 0) return "";
+  return `{
+${lines.join("\n")}
+}`;
+}
+function stringifyStyles(s) {
+  const entries = Object.entries(s);
   if (entries.length === 0) return void 0;
   return entries.map(([k, v]) => `${k}: ${v}`).join("; ");
 }
 function anchorRect(sel) {
   if (!sel) return null;
   if (sel.kind === "single") return sel.element.getBoundingClientRect();
-  if (sel.kind === "area") {
-    return new DOMRect(sel.rect.x, sel.rect.y, sel.rect.width, sel.rect.height);
-  }
+  if (sel.kind === "area") return new DOMRect(sel.rect.x, sel.rect.y, sel.rect.width, sel.rect.height);
   if (sel.elements.length === 0) return null;
   return sel.elements[0].getBoundingClientRect();
 }
-function describeSelection(sel) {
-  if (sel.kind === "single") {
-    const m = collectMetadata(sel.element, { detail: "compact" });
-    return m.elementPath;
+var TAG_LABELS2 = {
+  p: "paragraph",
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  h5: "heading",
+  h6: "heading",
+  a: "link",
+  button: "button",
+  input: "input",
+  textarea: "textarea",
+  select: "select",
+  img: "image",
+  video: "video",
+  audio: "audio",
+  form: "form",
+  nav: "nav",
+  header: "header",
+  footer: "footer",
+  main: "main",
+  section: "section",
+  article: "article",
+  aside: "aside",
+  ul: "list",
+  ol: "list",
+  li: "list item",
+  table: "table",
+  td: "cell",
+  th: "header cell",
+  span: "span",
+  div: "div",
+  label: "label",
+  code: "code",
+  pre: "code block",
+  blockquote: "quote",
+  strong: "bold",
+  em: "italic",
+  kbd: "key",
+  svg: "svg",
+  canvas: "canvas"
+};
+function describeElement2(el) {
+  const tag = el.tagName.toLowerCase();
+  const type = TAG_LABELS2[tag] ?? tag;
+  const text = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+  if (text.length > 0) {
+    const preview = text.length > 48 ? text.slice(0, 48) + "\u2026" : text;
+    return `${type}: "${preview}"`;
   }
+  if (el.id) return `${type}: #${el.id}`;
+  const cls = el.classList[0];
+  if (cls) return `${type}: .${cls}`;
+  return type;
+}
+function describeSelection(sel) {
+  if (sel.kind === "single") return describeElement2(sel.element);
   if (sel.kind === "area") return `area \xB7 ${sel.elements.length} element(s)`;
+  if (sel.elements.length === 1) return describeElement2(sel.elements[0]);
   return `${sel.elements.length} element(s)`;
 }
+
+// packages/react/src/internal/AnnotationPins.tsx
+import { useEffect as useEffect5, 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] = useState(0);
-  useEffect(() => {
+  const [, setVersion] = useState5(0);
+  useEffect5(() => {
     let raf = null;
     const update = () => {
       if (raf !== null) return;
@@ -670,40 +2109,205 @@ function AnnotationPins() {
       window.removeEventListener("resize", update);
     };
   }, []);
-  return /* @__PURE__ */ jsx(Fragment, { children: annotations.map((a, i) => /* @__PURE__ */ jsx(Pin, { number: i + 1, annotation: a }, a.id)) });
+  return /* @__PURE__ */ jsx7(Fragment2, { children: annotations.map((a, i) => /* @__PURE__ */ jsx7(Pin, { number: i + 1, annotation: a }, a.id)) });
+}
+var TAG_LABELS3 = {
+  p: "paragraph",
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  h5: "heading",
+  h6: "heading",
+  a: "link",
+  button: "button",
+  input: "input",
+  textarea: "textarea",
+  select: "select",
+  img: "image",
+  video: "video",
+  audio: "audio",
+  form: "form",
+  nav: "nav",
+  header: "header",
+  footer: "footer",
+  main: "main",
+  section: "section",
+  article: "article",
+  aside: "aside",
+  ul: "list",
+  ol: "list",
+  li: "list item",
+  table: "table",
+  td: "cell",
+  th: "header cell",
+  span: "span",
+  div: "div",
+  label: "label",
+  code: "code",
+  pre: "code block",
+  blockquote: "quote"
+};
+function pinLabel(annotation) {
+  const raw = (annotation.element ?? "").toLowerCase();
+  const tag = raw.split(/[.#\s]/)[0] ?? "";
+  return (TAG_LABELS3[tag] ?? tag) || "element";
+}
+function parseStyles(raw) {
+  if (!raw) return [];
+  return raw.split(";").map((s) => s.trim()).filter(Boolean).map((s) => {
+    const colon = s.indexOf(":");
+    if (colon === -1) return null;
+    return [s.slice(0, colon).trim(), s.slice(colon + 1).trim()];
+  }).filter(Boolean);
 }
 function Pin({ number, annotation }) {
   const remove = useAnnotations((s) => s.remove);
-  const [hovered, setHovered] = useState(false);
+  const update = useAnnotations((s) => s.update);
+  const [hovered, setHovered] = useState5(false);
+  const [editing, setEditing] = useState5(false);
+  const [draft, setDraft] = useState5(annotation.comment);
+  const [showStyles, setShowStyles] = useState5(false);
+  const taRef = useRef6(null);
+  const editRef = useRef6(null);
+  const styleEntries = parseStyles(annotation.computedStyles);
+  const label = pinLabel(annotation);
+  const headerLabel = annotation.isMultiSelect ? `${label} (multi-select)` : `${label}: "${annotation.elementPath}"`;
+  const openEdit = () => {
+    setDraft(annotation.comment);
+    setEditing(true);
+    setHovered(false);
+    requestAnimationFrame(() => taRef.current?.focus());
+  };
+  const closeEdit = () => {
+    setEditing(false);
+    setShowStyles(false);
+  };
+  const save = () => {
+    const trimmed = draft.trim();
+    if (trimmed) update(annotation.id, { comment: trimmed });
+    closeEdit();
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") closeEdit();
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) save();
+  };
+  useEffect5(() => {
+    if (!editing) return;
+    const onDown = (e) => {
+      if (editRef.current && e.composedPath().includes(editRef.current)) return;
+      closeEdit();
+    };
+    window.addEventListener("pointerdown", onDown, true);
+    return () => window.removeEventListener("pointerdown", onDown, true);
+  }, [editing]);
+  useEffect5(() => {
+    if (!editing) return;
+    let el = null;
+    if (annotation.elementPath) {
+      try {
+        el = document.querySelector(annotation.elementPath);
+      } catch {
+      }
+    }
+    if (!el) return;
+    const prevOutline = el.style.outline;
+    const prevOffset = el.style.outlineOffset;
+    el.style.outline = "2px solid #10b981";
+    el.style.outlineOffset = "3px";
+    return () => {
+      el.style.outline = prevOutline;
+      el.style.outlineOffset = prevOffset;
+    };
+  }, [editing, annotation.elementPath]);
   const pos = resolvePosition(annotation);
   if (!pos) return null;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "clickly-pin",
       style: { left: pos.x, top: pos.y },
-      onMouseEnter: () => setHovered(true),
+      onMouseEnter: () => {
+        if (!editing) setHovered(true);
+      },
       onMouseLeave: () => setHovered(false),
+      onClick: openEdit,
       role: "button",
       tabIndex: 0,
-      title: annotation.comment,
+      "aria-label": `Annotation ${number}: ${annotation.comment}`,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "clickly-pin-num", children: number }),
-        hovered && /* @__PURE__ */ jsxs("div", { className: "clickly-pin-bubble", children: [
-          /* @__PURE__ */ jsx("div", { className: "clickly-pin-comment", children: annotation.comment }),
-          /* @__PURE__ */ jsx("div", { className: "clickly-pin-meta", children: annotation.elementPath }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "clickly-pin-remove",
-              onClick: (e) => {
-                e.stopPropagation();
-                remove(annotation.id);
-              },
-              children: "Remove"
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx7("span", { className: "clickly-pin-num", children: number }),
+        hovered && !editing && /* @__PURE__ */ jsxs7("div", { className: "pin-preview", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "pin-preview-meta", children: [
+            label,
+            ": ",
+            annotation.elementPath
+          ] }),
+          /* @__PURE__ */ jsx7("div", { className: "pin-preview-comment", children: annotation.comment })
+        ] }),
+        editing && /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            ref: editRef,
+            className: "pin-edit",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  className: "popup-header",
+                  role: "button",
+                  "aria-expanded": showStyles,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowStyles((v) => !v);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx7("span", { className: "popup-chevron", children: showStyles ? "\u25BE" : "\u203A" }),
+                    /* @__PURE__ */ jsx7("span", { className: "popup-label", children: headerLabel })
+                  ]
+                }
+              ),
+              showStyles && styleEntries.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "popup-styles", children: [
+                styleEntries.map(([k, v]) => /* @__PURE__ */ jsxs7("div", { className: "style-row", children: [
+                  /* @__PURE__ */ jsx7("span", { className: "style-key", children: k }),
+                  /* @__PURE__ */ jsx7("span", { className: "style-val", children: v })
+                ] }, k)),
+                annotation.suggestedCss && /* @__PURE__ */ jsxs7("div", { className: "style-hint", style: { color: "#7c3aed", borderTopColor: "rgba(124,58,237,0.2)" }, children: [
+                  /* @__PURE__ */ jsx7("strong", { children: "Suggested changes:" }),
+                  /* @__PURE__ */ jsx7("br", {}),
+                  annotation.suggestedCss
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx7(
+                "textarea",
+                {
+                  ref: taRef,
+                  value: draft,
+                  onChange: (e) => setDraft(e.target.value),
+                  onKeyDown,
+                  placeholder: "Describe the issue\u2026  (\u2318/Ctrl + Enter to save)",
+                  "aria-label": "Annotation comment"
+                }
+              ),
+              /* @__PURE__ */ jsxs7("div", { className: "pin-edit-actions", children: [
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    className: "pin-edit-delete",
+                    onClick: () => remove(annotation.id),
+                    "aria-label": "Delete annotation",
+                    children: /* @__PURE__ */ jsx7(IconTrash, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxs7("div", { className: "row", style: { margin: 0, flex: 1, justifyContent: "flex-end" }, children: [
+                  /* @__PURE__ */ jsx7("button", { className: "ghost", onClick: closeEdit, children: "Cancel" }),
+                  /* @__PURE__ */ jsx7("button", { className: "primary", onClick: save, children: "Save" })
+                ] })
+              ] })
+            ]
+          }
+        )
       ]
     }
   );
@@ -720,33 +2324,33 @@ function resolvePosition(a) {
     }
   }
   if (a.boundingBox) {
-    return {
-      x: a.boundingBox.x + a.boundingBox.width - 11,
-      y: a.boundingBox.y - 11
-    };
+    return { x: a.boundingBox.x + a.boundingBox.width - 11, y: a.boundingBox.y - 11 };
   }
   return null;
 }
+
+// packages/react/src/internal/ClicklyRoot.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function ClicklyRoot({
   engine,
   host
 }) {
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState6(false);
   const clearAnnotations = useAnnotations((s) => s.clear);
   const outputDetail = useSettings((s) => s.outputDetail);
   const markerColor = useSettings((s) => s.markerColor);
   const engineState = useEngineState(engine);
-  useEffect(() => {
+  useEffect6(() => {
     host.style.setProperty("--clickly-hover", markerColor);
   }, [host, markerColor]);
-  useEffect(() => {
+  useEffect6(() => {
     if (expanded) {
       if (engine.getSnapshot().kind === "idle") engine.activate("single");
     } else {
       if (engine.getSnapshot().kind !== "idle") engine.deactivate();
     }
   }, [expanded, engine]);
-  useEffect(() => {
+  useEffect6(() => {
     const active = engineState.kind !== "idle";
     if (active) document.body.setAttribute("data-clickly-active", "");
     else document.body.removeAttribute("data-clickly-active");
@@ -764,7 +2368,7 @@ function ClicklyRoot({
       document.body.removeAttribute("data-clickly-annotating");
     };
   }, [engineState]);
-  useEffect(() => {
+  useEffect6(() => {
     const onKey = (e) => {
       const tag = e.target?.tagName;
       if (tag === "INPUT" || tag === "TEXTAREA") return;
@@ -807,16 +2411,16 @@ function ClicklyRoot({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [clearAnnotations, outputDetail, expanded, engine]);
-  return /* @__PURE__ */ jsxs("div", { className: "clickly-ui", children: [
-    /* @__PURE__ */ jsx(AnnotationPins, {}),
-    expanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Toolbar, { engine, onCollapse: () => setExpanded(false) }),
-      /* @__PURE__ */ jsx(AnnotationPopup, { engine })
-    ] }) : /* @__PURE__ */ jsx(CollapsedFAB, { onExpand: () => setExpanded(true) })
+  return /* @__PURE__ */ jsxs8("div", { className: "clickly-ui", children: [
+    /* @__PURE__ */ jsx8(AnnotationPins, {}),
+    expanded ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx8(Toolbar, { engine, onCollapse: () => setExpanded(false) }),
+      /* @__PURE__ */ jsx8(AnnotationPopup, { engine })
+    ] }) : /* @__PURE__ */ jsx8(CollapsedFAB, { onExpand: () => setExpanded(true) })
   ] });
 }
 
-// src/internal/styles.ts
+// packages/react/src/internal/styles.ts
 var REACT_UI_CSS = `
 .clickly-ui, .clickly-ui * { box-sizing: border-box; }
 
@@ -874,72 +2478,151 @@ var REACT_UI_CSS = `
   position: fixed;
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px;
-  background: rgba(15, 23, 42, 0.94);
+  gap: 2px;
+  padding: 6px;
+  height: 44px;
+  background: rgba(9, 14, 28, 0.97);
   color: #f8fafc;
-  border-radius: 12px;
+  border-radius: 16px;
   font: 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06) inset;
+  box-shadow:
+    0 16px 40px rgba(0,0,0,0.45),
+    0 0 0 1px rgba(255,255,255,0.08) inset,
+    0 1px 0 rgba(255,255,255,0.06) inset;
   pointer-events: auto;
   user-select: none;
   z-index: 1;
-  animation: clickly-fade-in 120ms ease-out;
+  animation: clickly-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes clickly-fade-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; transform: translateY(6px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .clickly-toolbar .grip {
   display: grid;
   place-items: center;
-  width: 24px;
-  height: 28px;
-  color: #94a3b8;
+  width: 22px;
+  height: 32px;
+  color: #475569;
   touch-action: none;
+  cursor: grab;
+  border-radius: 6px;
+  transition: color 120ms ease;
 }
+.clickly-toolbar .grip:hover { color: #94a3b8; }
+.clickly-toolbar .grip:active { cursor: grabbing; }
 
 .clickly-toolbar .divider {
   width: 1px;
-  height: 18px;
-  background: rgba(255,255,255,0.12);
-  margin: 0 2px;
+  height: 20px;
+  background: rgba(255,255,255,0.08);
+  margin: 0 3px;
+  flex-shrink: 0;
 }
 
 .clickly-btn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 4px;
-  height: 28px;
+  height: 32px;
   padding: 0 8px;
   background: transparent;
   border: none;
-  border-radius: 8px;
-  color: #cbd5e1;
+  border-radius: 10px;
+  color: #94a3b8;
   cursor: pointer;
   font: inherit;
+  transition: background 100ms ease, color 100ms ease;
+  position: relative;
+}
+.clickly-btn:hover  { background: rgba(255,255,255,0.09); color: #e2e8f0; }
+.clickly-btn:active { background: rgba(255,255,255,0.15); color: #fff; transform: scale(0.96); }
+.clickly-btn.is-active {
+  background: #0ea5e9;
+  color: #fff;
+  box-shadow: 0 0 0 1px rgba(14,165,233,0.4), 0 2px 8px rgba(14,165,233,0.3);
 }
-.clickly-btn:hover  { background: rgba(255,255,255,0.08); color: #fff; }
-.clickly-btn:active { background: rgba(255,255,255,0.14); }
-.clickly-btn.is-active { background: #0ea5e9; color: #fff; }
-.clickly-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
+.clickly-btn.is-active:hover { background: #0284c7; }
+.clickly-btn[disabled] { opacity: 0.28; cursor: not-allowed; pointer-events: none; }
 
 .clickly-btn.icon-only {
-  width: 28px;
+  width: 32px;
   padding: 0;
-  justify-content: center;
 }
 
 .clickly-btn.primary-pinned {
   background: #10b981;
   color: #fff;
+  font-weight: 600;
+  font-size: 12px;
+  padding: 0 10px;
+  gap: 5px;
+  box-shadow: 0 0 0 1px rgba(16,185,129,0.4), 0 2px 8px rgba(16,185,129,0.25);
+}
+.clickly-btn.primary-pinned:hover { background: #059669; }
+
+/* \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 */
+
+.clickly-tip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Ensures the absolute-positioned counter badge clips correctly */
+  isolation: isolate;
+}
+
+.clickly-tip .tip-bubble {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(15, 23, 42, 0.98);
+  color: #f1f5f9;
+  font-size: 12px;
   font-weight: 500;
+  white-space: nowrap;
+  padding: 5px 10px;
+  border-radius: 8px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 80ms ease;
+  transition-delay: 200ms;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.07) inset;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  z-index: 10;
 }
-.clickly-btn.primary-pinned:hover {
-  background: #059669;
-  color: #fff;
+
+/* Arrow */
+.clickly-tip .tip-bubble::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: rgba(15, 23, 42, 0.98);
+}
+
+.clickly-tip:hover .tip-bubble { opacity: 1; }
+
+.clickly-tip .tip-bubble kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  background: rgba(255,255,255,0.12);
+  border: 1px solid rgba(255,255,255,0.10);
+  border-radius: 4px;
+  font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
+  color: #94a3b8;
 }
 
 /* \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 */
@@ -956,20 +2639,181 @@ var REACT_UI_CSS = `
   animation: clickly-fade-in 120ms ease-out;
 }
 
-.clickly-popup { width: 320px; padding: 12px; }
+.clickly-popup {
+  width: 320px;
+  padding: 12px;
+  max-height: calc(100vh - 80px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
 
-.clickly-popup .target-info {
+/* \u2500\u2500\u2500 Shared inner styles \u2014 apply to both popup and pin-edit \u2500\u2500\u2500 */
+
+.clickly-popup .popup-header,
+.pin-edit .popup-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+  gap: 5px;
   margin-bottom: 8px;
+  padding: 4px 2px;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
   color: #475569;
   font-size: 11px;
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  transition: background 80ms ease;
+}
+.clickly-popup .popup-header:hover,
+.pin-edit .popup-header:hover { background: #f1f5f9; }
+
+.clickly-popup .popup-chevron,
+.pin-edit .popup-chevron {
+  font-size: 12px;
+  color: #94a3b8;
+  flex-shrink: 0;
+  width: 12px;
+  text-align: center;
+}
+
+.clickly-popup .popup-label,
+.pin-edit .popup-label {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Edit-mode toggle button \u2014 top-right of CSS panel header */
+.clickly-popup .popup-edit-toggle {
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  background: transparent;
+  border: 1px solid #e2e8f0;
+  border-radius: 5px;
+  color: #94a3b8;
+  cursor: pointer;
+  padding: 0;
+  margin-left: auto;
+  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
+}
+.clickly-popup .popup-edit-toggle:hover {
+  background: #f1f5f9;
+  color: #475569;
+  border-color: #cbd5e1;
+}
+.clickly-popup .popup-edit-toggle.is-editing {
+  background: #0ea5e9;
+  color: #fff;
+  border-color: #0ea5e9;
+}
+.clickly-popup .popup-edit-toggle.is-editing:hover {
+  background: #0284c7;
+}
+
+/* Computed-styles panel */
+.clickly-popup .popup-styles,
+.pin-edit .popup-styles {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 11px;
+  max-height: 160px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.clickly-popup .style-row,
+.pin-edit .style-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  line-height: 1.7;
+  border-radius: 4px;
+  padding: 0 2px;
+  transition: background 80ms ease;
+}
+
+.clickly-popup .style-row--changed,
+.pin-edit .style-row--changed {
+  background: rgba(245, 158, 11, 0.10);
+}
+
+.clickly-popup .style-key,
+.pin-edit .style-key {
+  color: #7c3aed;
+  flex-shrink: 0;
+  min-width: 90px;
+  font-size: 11px;
+}
+
+.clickly-popup .style-val,
+.pin-edit .style-val {
+  color: #0f172a;
+  font-size: 11px;
+  word-break: break-all;
+  flex: 1;
+}
+
+/* Editable value input \u2014 live CSS preview */
+.clickly-popup .style-val-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid transparent;
+  color: #0f172a;
+  font: 11px/1.7 ui-monospace, "SF Mono", Menlo, monospace;
+  padding: 0;
+  outline: none;
+  transition: border-color 100ms ease;
+  word-break: break-all;
+}
+.clickly-popup .style-val-input:focus {
+  border-bottom-color: #0ea5e9;
+  background: rgba(14, 165, 233, 0.05);
+  border-radius: 2px 2px 0 0;
+}
+
+/* Revert button shown only on changed rows */
+.clickly-popup .style-revert-btn {
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+  border-radius: 3px;
+  transition: color 80ms ease, background 80ms ease;
+}
+.clickly-popup .style-revert-btn:hover {
+  color: #f59e0b;
+  background: rgba(245,158,11,0.12);
 }
 
-.clickly-popup textarea {
+/* Hint text at bottom of CSS panel */
+.clickly-popup .style-hint,
+.pin-edit .style-hint {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid #e2e8f0;
+  font-size: 10.5px;
+  color: #94a3b8;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  line-height: 1.4;
+}
+
+.clickly-popup textarea,
+.pin-edit textarea {
   width: 100%;
   min-height: 64px;
   max-height: 160px;
@@ -980,33 +2824,40 @@ var REACT_UI_CSS = `
   font: inherit;
   color: inherit;
 }
-.clickly-popup textarea:focus {
+.clickly-popup textarea:focus,
+.pin-edit textarea:focus {
   outline: none;
   border-color: #0ea5e9;
   box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
 }
 
-.clickly-popup .row {
+.clickly-popup .row,
+.pin-edit .row {
   display: flex;
   justify-content: flex-end;
   gap: 6px;
   margin-top: 10px;
 }
 
-.clickly-popup .row .ghost {
+.clickly-popup .row .ghost,
+.pin-edit .row .ghost {
   background: transparent;
   color: #475569;
   border: 1px solid #e2e8f0;
 }
-.clickly-popup .row .ghost:hover { background: #f8fafc; }
+.clickly-popup .row .ghost:hover,
+.pin-edit .row .ghost:hover { background: #f8fafc; }
 
-.clickly-popup .row .primary {
+.clickly-popup .row .primary,
+.pin-edit .row .primary {
   background: #0ea5e9;
   color: #fff;
   border: none;
 }
-.clickly-popup .row .primary:hover { background: #0284c7; }
-.clickly-popup .row button {
+.clickly-popup .row .primary:hover,
+.pin-edit .row .primary:hover { background: #0284c7; }
+.clickly-popup .row button,
+.pin-edit .row button {
   height: 28px;
   padding: 0 12px;
   border-radius: 6px;
@@ -1014,121 +2865,518 @@ var REACT_UI_CSS = `
   cursor: pointer;
 }
 
+/* Old popover kept for any legacy use */
 .clickly-popover { width: 260px; padding: 12px; }
-.clickly-popover h4 { margin: 0 0 8px; font-size: 12px; color: #475569; text-transform: uppercase; letter-spacing: 0.05em; }
-.clickly-popover .field { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 13px; }
-.clickly-popover select { font: inherit; padding: 4px 6px; border-radius: 4px; border: 1px solid #e2e8f0; }
-.clickly-popover input[type="color"] { width: 28px; height: 24px; padding: 0; border: 1px solid #e2e8f0; border-radius: 4px; background: none; }
+
+/* \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 */
+
+.clickly-settings {
+  position: fixed;
+  width: 284px;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 16px 48px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);
+  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  color: #0f172a;
+  pointer-events: auto;
+  z-index: 2;
+  animation: clickly-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 14px 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.settings-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0f172a;
+  letter-spacing: -0.01em;
+}
+
+.settings-close {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  background: #f1f5f9;
+  border: none;
+  border-radius: 6px;
+  color: #64748b;
+  cursor: pointer;
+  padding: 0;
+  transition: background 100ms, color 100ms;
+}
+.settings-close:hover { background: #e2e8f0; color: #0f172a; }
+.settings-close svg { width: 13px; height: 13px; }
+
+.settings-section { padding: 10px 14px; }
+
+.settings-divider {
+  height: 1px;
+  background: #f1f5f9;
+  margin: 0;
+}
+
+.settings-label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.settings-hint {
+  font-size: 11.5px;
+  font-weight: 400;
+  color: #94a3b8;
+}
+
+.settings-select {
+  width: 100%;
+  padding: 7px 10px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font: inherit;
+  font-size: 13px;
+  color: #1e293b;
+  cursor: pointer;
+  appearance: none;
+  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");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 32px;
+  transition: border-color 120ms, box-shadow 120ms;
+}
+.settings-select:focus {
+  outline: none;
+  border-color: #0ea5e9;
+  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
+  background-color: #fff;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0;
+}
+.settings-row + .settings-row {
+  border-top: 1px solid #f8fafc;
+}
+
+.settings-row-label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  min-width: 0;
+}
+
+/* Toggle switch */
+.clickly-toggle {
+  position: relative;
+  flex-shrink: 0;
+  width: 38px;
+  height: 22px;
+  cursor: pointer;
+}
+.clickly-toggle input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle-track {
+  position: absolute;
+  inset: 0;
+  background: #e2e8f0;
+  border-radius: 11px;
+  transition: background 180ms ease;
+}
+.toggle-track::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.clickly-toggle input:checked + .toggle-track {
+  background: #0ea5e9;
+}
+.clickly-toggle input:checked + .toggle-track::after {
+  transform: translateX(16px);
+}
+
+/* Color picker */
+.settings-color-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  cursor: pointer;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  flex-shrink: 0;
+}
+.settings-color-wrap input[type="color"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.color-swatch {
+  display: block;
+  width: 32px;
+  height: 24px;
+  border-radius: 7px;
+  border: 1px solid rgba(0,0,0,0.08);
+  transition: transform 100ms ease;
+}
+.settings-color-wrap:hover .color-swatch { transform: scale(1.08); }
 
 .clickly-counter {
-  display: inline-flex;
+  /* Float as a badge \u2014 positioned absolutely so it doesn't widen the button */
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: #f59e0b;
+  color: #0f172a;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 9px;
-  background: #f59e0b;
-  color: #1f2937;
-  font-size: 11px;
-  font-weight: 600;
-  margin-left: 4px;
+  pointer-events: none;
+  border: 1.5px solid rgba(9, 14, 28, 0.97);
 }
 
 /* \u2500\u2500\u2500 Annotation pins (persistent numbered markers) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .clickly-pin {
   position: fixed;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   border-radius: 999px;
-  background: #f59e0b;
-  color: #0f172a;
-  font: 600 12px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  background: #10b981;
+  color: #fff;
+  font: 700 11px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-align: center;
   cursor: pointer;
   pointer-events: auto;
   user-select: none;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 2px #fff;
-  z-index: 1;
-  transition: transform 100ms ease;
+  box-shadow: 0 2px 8px rgba(16,185,129,0.4), 0 0 0 2px #fff;
+  z-index: 10;
+  transition: transform 120ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 120ms ease;
+}
+.clickly-pin:hover {
+  transform: scale(1.18);
+  box-shadow: 0 4px 16px rgba(16,185,129,0.5), 0 0 0 2px #fff;
 }
-.clickly-pin:hover { transform: scale(1.12); }
 .clickly-pin-num { display: block; }
 
-.clickly-pin-bubble {
+/* \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 */
+
+.pin-preview {
   position: absolute;
-  top: 28px;
-  left: 0;
-  width: 240px;
+  right: calc(100% + 10px);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 220px;
   padding: 8px 10px;
-  background: #fff;
-  color: #0f172a;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);
-  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  background: rgba(9, 14, 28, 0.96);
+  color: #f1f5f9;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.07) inset;
+  font: 12px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-align: left;
   cursor: default;
-  z-index: 3;
+  pointer-events: none;
+  z-index: 11;
   animation: clickly-fade-in 100ms ease-out;
+  white-space: normal;
 }
-.clickly-pin-comment { word-break: break-word; }
-.clickly-pin-meta {
-  margin-top: 6px;
+
+.pin-preview-meta {
+  font-size: 10.5px;
+  color: #64748b;
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 11px;
-  color: #475569;
-  word-break: break-all;
+  margin-bottom: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.pin-preview-comment {
+  font-size: 12px;
+  color: #e2e8f0;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
-.clickly-pin-remove {
-  margin-top: 8px;
-  padding: 4px 8px;
-  border: 1px solid #fecaca;
+
+/* \u2500\u2500\u2500 Pin edit popup \u2014 same white card as .clickly-popup \u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.pin-edit {
+  /* Positioning: floats to the LEFT of the pin */
+  position: absolute;
+  right: calc(100% + 12px);
+  top: 50%;
+  transform: translateY(-50%);
+  /* Appearance: identical to .clickly-popup */
+  width: 300px;
+  padding: 12px;
   background: #fff;
-  color: #b91c1c;
-  border-radius: 4px;
-  font: 11px inherit;
+  color: #0f172a;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);
+  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  text-align: left;
+  cursor: default;
+  z-index: 11;
+  animation: clickly-fade-in 120ms cubic-bezier(0.16,1,0.3,1);
+  /* Allow inner popup-styles to scroll */
+  max-height: 80vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Reuse .clickly-popup textarea inside pin-edit */
+.pin-edit textarea {
+  width: 100%;
+  min-height: 64px;
+  max-height: 120px;
+  padding: 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  resize: vertical;
+  font: inherit;
+  color: inherit;
+  background: #fff;
+  box-sizing: border-box;
+}
+.pin-edit textarea:focus {
+  outline: none;
+  border-color: #0ea5e9;
+  box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
+}
+
+/* Actions row */
+.pin-edit-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.pin-edit-delete {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  background: transparent;
+  border: 1px solid #fee2e2;
+  border-radius: 6px;
+  color: #ef4444;
   cursor: pointer;
+  padding: 0;
+  transition: background 100ms, border-color 100ms;
 }
-.clickly-pin-remove:hover { background: #fef2f2; }
+.pin-edit-delete:hover { background: #fef2f2; border-color: #fca5a5; }
+.pin-edit-delete svg { width: 13px; height: 13px; }
 
 /* \u2500\u2500\u2500 Annotation list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .clickly-list {
   position: fixed;
-  max-height: 50vh;
   width: 320px;
-  overflow-y: auto;
+  max-height: 55vh;
   background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 12px 32px rgba(2,6,23,0.18), 0 0 0 1px rgba(15,23,42,0.06);
+  border-radius: 14px;
+  box-shadow: 0 16px 48px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);
   color: #0f172a;
-  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   pointer-events: auto;
   z-index: 2;
-  animation: clickly-fade-in 120ms ease-out;
+  animation: clickly-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
-.clickly-list .row { display: flex; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
-.clickly-list .row:last-child { border-bottom: none; }
-.clickly-list .num { color: #94a3b8; min-width: 18px; }
-.clickly-list .selector { color: #475569; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; word-break: break-all; }
-.clickly-list .body { flex: 1; min-width: 0; }
-.clickly-list .body p { margin: 2px 0 0; word-break: break-word; }
-.clickly-list button.remove {
+
+.list-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px 10px;
+  border-bottom: 1px solid #f1f5f9;
+  flex-shrink: 0;
+}
+
+.list-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0f172a;
+  letter-spacing: -0.01em;
+  flex: 1;
+}
+
+.list-count {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+}
+
+.list-items {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  flex: 1;
+}
+
+.list-empty {
+  padding: 24px;
+  text-align: center;
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+/* \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 */
+
+.list-card {
+  padding: 10px 12px;
+  border-bottom: 1px solid #f8fafc;
+  transition: background 80ms ease;
+}
+.list-card:last-child { border-bottom: none; }
+.list-card:hover { background: #fafafa; }
+
+.list-card-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.list-card-num {
+  font-size: 11px;
+  font-weight: 700;
+  color: #94a3b8;
+  flex-shrink: 0;
+  min-width: 20px;
+}
+
+.list-card-path {
+  flex: 1;
+  min-width: 0;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 10.5px;
+  color: #475569;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list-card-actions {
+  display: flex;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.list-action-btn {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
   background: transparent;
   border: none;
+  border-radius: 6px;
   color: #94a3b8;
   cursor: pointer;
-  padding: 2px;
-  display: grid;
-  place-items: center;
+  padding: 0;
+  transition: background 80ms ease, color 80ms ease;
+}
+.list-action-btn svg { width: 12px; height: 12px; }
+.list-action-btn:hover { background: #f1f5f9; color: #475569; }
+.list-action-btn.copied { color: #10b981; }
+.list-action-btn.list-action-delete:hover { background: #fef2f2; color: #ef4444; }
+
+.list-card-comment {
+  font-size: 12px;
+  color: #1e293b;
+  line-height: 1.45;
+  margin: 0 0 6px;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* CSS changes badge */
+.list-card-css {
+  background: rgba(124, 58, 237, 0.05);
+  border: 1px solid rgba(124, 58, 237, 0.12);
+  border-radius: 6px;
+  padding: 5px 8px;
+  margin-top: 4px;
+}
+
+.list-card-css-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 600;
+  color: #7c3aed;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 3px;
+}
+
+.list-card-css-code {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 10px;
+  color: #475569;
+  line-height: 1.5;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 60px;
+  overflow: hidden;
 }
-.clickly-list button.remove svg { width: 12px; height: 12px; }
-.clickly-list button.remove:hover { color: #ef4444; }
-.clickly-list .empty { padding: 20px; text-align: center; color: #94a3b8; }
 `;
 
-// src/internal/globalStyles.ts
+// packages/react/src/internal/globalStyles.ts
 var GLOBAL_PAGE_CSS = `
 body[data-clickly-active] {
   -webkit-user-select: none !important;
@@ -1148,9 +3396,12 @@ body[data-clickly-annotating] {
   cursor: default !important;
 }
 `;
+
+// packages/react/src/Clickly.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Clickly({ className } = {}) {
-  const [mount, setMount] = useState(null);
-  useEffect(() => {
+  const [mount, setMount] = useState7(null);
+  useEffect7(() => {
     if (typeof window === "undefined" || typeof document === "undefined") return;
     let shadow = null;
     let engine = null;
@@ -1199,7 +3450,7 @@ function Clickly({ className } = {}) {
       document.body.removeAttribute("data-clickly-mode");
     };
   }, []);
-  useEffect(() => {
+  useEffect7(() => {
     if (!mount || !className) return;
     mount.shadow.host.className = className;
     return () => {
@@ -1208,11 +3459,15 @@ function Clickly({ className } = {}) {
   }, [mount, className]);
   if (!mount) return null;
   return createPortal(
-    /* @__PURE__ */ jsx(ClicklyRoot, { engine: mount.engine, host: mount.shadow.host }),
+    /* @__PURE__ */ jsx9(ClicklyRoot, { engine: mount.engine, host: mount.shadow.host }),
     mount.portal
   );
 }
-
-export { Clickly, DEFAULTS as DEFAULT_SETTINGS, annotationsToMarkdown, useAnnotations, useAnnotationsList, useSettings };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+export {
+  Clickly,
+  DEFAULTS as DEFAULT_SETTINGS,
+  annotationsToMarkdown,
+  useAnnotations,
+  useAnnotationsList,
+  useSettings
+};