@agent-native/pinpoint 0.1.8 → 0.1.10

package/dist/{chunk-6YK47AB5.js → chunk-HC724C43.js}

@@ -985,7 +985,7 @@ var PinMarkerManager = class {
   }
 };
 
-// ../../node_modules/.pnpm/solid-js@1.9.12/node_modules/solid-js/dist/solid.js
+// ../../node_modules/.pnpm/solid-js@1.9.13/node_modules/solid-js/dist/solid.js
 var sharedConfig = {
   context: void 0,
   registry: void 0,
@@ -1159,20 +1159,23 @@ function readSignal() {
     }
   }
   if (Listener) {
-    const sSlot = this.observers ? this.observers.length : 0;
-    if (!Listener.sources) {
-      Listener.sources = [this];
-      Listener.sourceSlots = [sSlot];
-    } else {
-      Listener.sources.push(this);
-      Listener.sourceSlots.push(sSlot);
-    }
-    if (!this.observers) {
-      this.observers = [Listener];
-      this.observerSlots = [Listener.sources.length - 1];
-    } else {
-      this.observers.push(Listener);
-      this.observerSlots.push(Listener.sources.length - 1);
+    const observers = this.observers;
+    if (!observers || observers[observers.length - 1] !== Listener) {
+      const sSlot = observers ? observers.length : 0;
+      if (!Listener.sources) {
+        Listener.sources = [this];
+        Listener.sourceSlots = [sSlot];
+      } else {
+        Listener.sources.push(this);
+        Listener.sourceSlots.push(sSlot);
+      }
+      if (!observers) {
+        this.observers = [Listener];
+        this.observerSlots = [Listener.sources.length - 1];
+      } else {
+        observers.push(Listener);
+        this.observerSlots.push(Listener.sources.length - 1);
+      }
     }
   }
   if (runningTransition && Transition.sources.has(this)) return this.tValue;
@@ -1674,7 +1677,7 @@ function Show(props) {
   }, void 0, void 0);
 }
 
-// ../../node_modules/.pnpm/solid-js@1.9.12/node_modules/solid-js/web/dist/web.js
+// ../../node_modules/.pnpm/solid-js@1.9.13/node_modules/solid-js/web/dist/web.js
 var booleans = [
   "allowfullscreen",
   "async",
@@ -2059,2038 +2062,1227 @@ function cleanChildren(parent, current, marker, replacement) {
   return [node];
 }
 
-// src/ui/styles/theme.ts
-var overlayStyles = `
-:host {
-  all: initial;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 13px;
-  line-height: 1.4;
-  color: var(--pp-text);
-  pointer-events: none;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* Theme variables */
-:host {
-  --pp-bg: rgba(24, 24, 27, 0.92);
-  --pp-bg-solid: #18181b;
-  --pp-text: #fafafa;
-  --pp-text-muted: #a1a1aa;
-  --pp-border: rgba(63, 63, 70, 0.6);
-  --pp-accent: #3b82f6;
-  --pp-accent-hover: #60a5fa;
-  --pp-success: #22c55e;
-  --pp-warning: #eab308;
-  --pp-danger: #ef4444;
-  --pp-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
-  --pp-radius: 10px;
-  --pp-radius-sm: 6px;
-}
-
-:host([data-theme="light"]) {
-  --pp-bg: rgba(255, 255, 255, 0.92);
-  --pp-bg-solid: #ffffff;
-  --pp-text: #18181b;
-  --pp-text-muted: #71717a;
-  --pp-border: rgba(228, 228, 231, 0.8);
-  --pp-accent: #2563eb;
-  --pp-accent-hover: #3b82f6;
-  --pp-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
-}
-
-:host([data-theme="light"]) .pp-popup__textarea {
-  background: rgba(0, 0, 0, 0.06);
-}
-
-/* Toolbar */
-.pp-toolbar {
-  position: fixed;
-  z-index: 2147483646;
-  pointer-events: auto;
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  background: var(--pp-bg);
-  border: 1px solid var(--pp-border);
-  border-radius: var(--pp-radius);
-  box-shadow: var(--pp-shadow);
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  user-select: none;
-  cursor: default;
-}
-
-.pp-toolbar--collapsed {
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  cursor: pointer;
-}
-
-.pp-toolbar--expanded {
-  padding: 12px;
-  width: 320px;
-  max-height: 420px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.pp-toolbar__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 9px;
-  background: var(--pp-accent);
-  color: #fff;
-  font-size: 11px;
-  font-weight: 600;
-}
-
-/* Buttons */
-.pp-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 5px 10px;
-  border: 1px solid var(--pp-border);
-  border-radius: var(--pp-radius-sm);
-  background: transparent;
-  color: var(--pp-text);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-}
-
-.pp-btn:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: var(--pp-accent);
-}
-
-.pp-btn--primary {
-  background: var(--pp-accent);
-  border-color: var(--pp-accent);
-  color: #fff;
-}
-
-.pp-btn--primary:hover {
-  background: var(--pp-accent-hover);
-}
-
-.pp-btn--sm {
-  padding: 3px 6px;
-  font-size: 11px;
-}
+// src/ui/icons/index.ts
+var S = 'width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+var icons = {
+  pin: `<svg ${S}><path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4"/><path d="M9 15l-4.5 4.5"/><path d="M14.5 4l5.5 5.5"/></svg>`,
+  mapPin: `<svg ${S}><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0"/></svg>`,
+  crosshair: `<svg ${S}><path d="M4 8v-2a2 2 0 0 1 2 -2h2"/><path d="M4 16v2a2 2 0 0 0 2 2h2"/><path d="M16 4h2a2 2 0 0 1 2 2v2"/><path d="M16 20h2a2 2 0 0 0 2 -2v-2"/><path d="M9 12l6 0"/><path d="M12 9l0 6"/></svg>`,
+  send: `<svg ${S}><path d="M10 14l11 -11"/><path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"/></svg>`,
+  copy: `<svg ${S}><path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z"/><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"/></svg>`,
+  trash: `<svg ${S}><path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>`,
+  settings: `<svg ${S}><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065"/><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/></svg>`,
+  x: `<svg ${S}><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>`,
+  chevronDown: `<svg ${S}><path d="M6 9l6 6l6 -6"/></svg>`,
+  check: `<svg ${S}><path d="M5 12l5 5l10 -10"/></svg>`,
+  messageSquare: `<svg ${S}><path d="M8 9h8"/><path d="M8 13h6"/><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"/></svg>`,
+  eye: `<svg ${S}><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>`,
+  fileCode: `<svg ${S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/><path d="M10 13l-1 2l1 2"/><path d="M14 13l1 2l-1 2"/></svg>`,
+  history: `<svg ${S}><path d="M12 8l0 4l2 2"/><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5"/></svg>`,
+  minus: `<svg ${S}><path d="M5 12l14 0"/></svg>`,
+  // Draw mode icons
+  pencil: `<svg ${S}><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"/><path d="M13.5 6.5l4 4"/></svg>`,
+  arrowUpRight: `<svg ${S}><path d="M17 7l-10 10"/><path d="M8 7l9 0l0 9"/></svg>`,
+  circle: `<svg ${S}><circle cx="12" cy="12" r="9"/></svg>`,
+  square: `<svg ${S}><rect x="4" y="4" width="16" height="16" rx="2"/></svg>`,
+  typography: `<svg ${S}><path d="M4 20l3 0"/><path d="M14 20l7 0"/><path d="M6.9 15l6.9 0"/><path d="M10.2 6.3l5.8 13.7"/><path d="M5 20l6 -16l2 0l7 16"/></svg>`,
+  undo: `<svg ${S}><path d="M9 14l-4 -4l4 -4"/><path d="M5 10h11a4 4 0 1 1 0 8h-1"/></svg>`,
+  palette: `<svg ${S}><path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"/><circle cx="8.5" cy="10.5" r="1"/><circle cx="12.5" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg>`,
+  lineWeight: `<svg ${S}><path d="M4 6h16"/><path d="M4 12h16" stroke-width="3"/><path d="M4 18h16" stroke-width="5"/></svg>`,
+  // Voice icon
+  microphone: `<svg ${S}><path d="M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M8 21l8 0"/><path d="M12 17l0 4"/></svg>`,
+  microphoneOff: `<svg ${S}><path d="M3 3l18 18"/><path d="M9 5a3 3 0 0 1 6 0v5a3 3 0 0 1 -.13 .874m-2 2a3 3 0 0 1 -3.87 -2.872v-1"/><path d="M5 10a7 7 0 0 0 10.846 5.85m2 -2a6.967 6.967 0 0 0 1.152 -3.85"/><path d="M8 21l8 0"/><path d="M12 17l0 4"/></svg>`,
+  // Queue & batch icons
+  plus: `<svg ${S}><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>`,
+  stack: `<svg ${S}><path d="M12 2l-8 4l8 4l8 -4l-8 -4"/><path d="M4 10l8 4l8 -4"/><path d="M4 14l8 4l8 -4"/></svg>`,
+  checkSquare: `<svg ${S}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 12l2 2l4 -4"/></svg>`,
+  squareEmpty: `<svg ${S}><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`,
+  bolt: `<svg ${S}><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"/></svg>`,
+  checkCircle: `<svg ${S}><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2l4 -4"/></svg>`
+};
 
-.pp-btn--icon {
-  padding: 4px;
-  border: none;
-  background: transparent;
-  color: var(--pp-text-muted);
-  cursor: pointer;
-  border-radius: var(--pp-radius-sm);
-}
+// src/ui/components/ContextMenu.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div class=pp-context-menu><div class=pp-context-menu__item><span></span>Add Annotation</div><div class=pp-context-menu__item><span></span>Quick Prompt</div><div class=pp-context-menu__separator></div><div class=pp-context-menu__item><span></span>Copy Element Context</div><div class=pp-context-menu__item><span></span>Copy HTML Snippet</div><div class=pp-context-menu__item><span></span>Copy Computed Styles`);
+var ContextMenu = (props) => {
+  let menuRef;
+  onMount(() => {
+    const handleClick = (e) => {
+      if (menuRef && !e.composedPath().includes(menuRef)) {
+        props.onClose();
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") props.onClose();
+    };
+    setTimeout(() => {
+      document.addEventListener("click", handleClick, true);
+      document.addEventListener("keydown", handleKeyDown, true);
+    }, 0);
+    onCleanup(() => {
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+    });
+  });
+  const x = Math.min(props.position.x, window.innerWidth - 200);
+  const y = Math.min(props.position.y, window.innerHeight - 250);
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$9.nextSibling, _el$10 = _el$1.firstChild;
+    var _ref$ = menuRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : menuRef = _el$;
+    setStyleProperty(_el$, "left", `${x}px`);
+    setStyleProperty(_el$, "top", `${y}px`);
+    addEventListener(_el$2, "click", () => props.onAnnotate());
+    addEventListener(_el$4, "click", () => props.onPrompt());
+    addEventListener(_el$7, "click", () => props.onCopyContext());
+    addEventListener(_el$9, "click", async () => {
+      const html = props.element.outerHTML.replace(/\s+/g, " ").trim().slice(0, 500);
+      await navigator.clipboard.writeText(html);
+      props.onClose();
+    });
+    addEventListener(_el$1, "click", async () => {
+      const styles = window.getComputedStyle(props.element);
+      const relevant = ["color", "background-color", "font-size", "font-family", "padding", "margin", "border", "display", "position", "width", "height"];
+      const result = relevant.map((key) => `${key}: ${styles.getPropertyValue(key)}`).join("\n");
+      await navigator.clipboard.writeText(result);
+      props.onClose();
+    });
+    createRenderEffect((_p$) => {
+      var _v$ = icons.pin, _v$2 = icons.messageSquare, _v$3 = icons.copy, _v$4 = icons.fileCode, _v$5 = icons.eye;
+      _v$ !== _p$.e && (_el$3.innerHTML = _p$.e = _v$);
+      _v$2 !== _p$.t && (_el$5.innerHTML = _p$.t = _v$2);
+      _v$3 !== _p$.a && (_el$8.innerHTML = _p$.a = _v$3);
+      _v$4 !== _p$.o && (_el$0.innerHTML = _p$.o = _v$4);
+      _v$5 !== _p$.i && (_el$10.innerHTML = _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    });
+    return _el$;
+  })();
+};
 
-.pp-btn--icon:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--pp-text);
+// src/ui/components/OverlayCanvas.tsx
+var _tmpl$2 = /* @__PURE__ */ template(`<canvas style=position:fixed;top:0;left:0;z-index:2147483645>`);
+function lerp(start, end, t) {
+  return start + (end - start) * t;
 }
-
-.pp-btn--icon-sm {
-  padding: 2px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
-}
-
-.pp-pin-item:hover .pp-btn--icon-sm,
-.pp-pin-item:focus-within .pp-btn--icon-sm {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.pp-btn--icon-sm:hover {
-  background: rgba(239, 68, 68, 0.15);
-  color: var(--pp-danger);
-}
-
-@media (hover: none) {
-  .pp-btn--icon-sm {
-    opacity: 0.6;
-    pointer-events: auto;
+var OverlayCanvas = (props) => {
+  let canvasRef;
+  let animFrameId = null;
+  let currentRect = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  };
+  let targetRect = null;
+  const LERP_SPEED = 0.25;
+  function resizeCanvas() {
+    if (!canvasRef) return;
+    const dpr = window.devicePixelRatio || 1;
+    canvasRef.width = window.innerWidth * dpr;
+    canvasRef.height = window.innerHeight * dpr;
+    canvasRef.style.width = `${window.innerWidth}px`;
+    canvasRef.style.height = `${window.innerHeight}px`;
+    const ctx = canvasRef.getContext("2d");
+    if (ctx) ctx.scale(dpr, dpr);
   }
-}
+  function drawStroke(ctx, stroke) {
+    if (stroke.points.length < 1) return;
+    ctx.strokeStyle = stroke.color;
+    ctx.lineWidth = stroke.lineWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.setLineDash([]);
+    if (stroke.type === "freehand") {
+      ctx.beginPath();
+      ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+      for (let i = 1; i < stroke.points.length; i++) {
+        ctx.lineTo(stroke.points[i].x, stroke.points[i].y);
+      }
+      ctx.stroke();
+    } else if (stroke.type === "arrow") {
+      if (stroke.points.length < 2) return;
+      const start = stroke.points[0];
+      const end = stroke.points[stroke.points.length - 1];
+      ctx.beginPath();
+      ctx.moveTo(start.x, start.y);
+      ctx.lineTo(end.x, end.y);
+      ctx.stroke();
+      const angle = Math.atan2(end.y - start.y, end.x - start.x);
+      const headLen = 12 + stroke.lineWidth * 2;
+      ctx.beginPath();
+      ctx.moveTo(end.x, end.y);
+      ctx.lineTo(end.x - headLen * Math.cos(angle - Math.PI / 6), end.y - headLen * Math.sin(angle - Math.PI / 6));
+      ctx.moveTo(end.x, end.y);
+      ctx.lineTo(end.x - headLen * Math.cos(angle + Math.PI / 6), end.y - headLen * Math.sin(angle + Math.PI / 6));
+      ctx.stroke();
+    } else if (stroke.type === "circle") {
+      if (stroke.points.length < 2) return;
+      const start = stroke.points[0];
+      const end = stroke.points[stroke.points.length - 1];
+      const rx = Math.abs(end.x - start.x) / 2;
+      const ry = Math.abs(end.y - start.y) / 2;
+      const cx = (start.x + end.x) / 2;
+      const cy = (start.y + end.y) / 2;
+      ctx.beginPath();
+      ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+      ctx.stroke();
+    } else if (stroke.type === "rect") {
+      if (stroke.points.length < 2) return;
+      const start = stroke.points[0];
+      const end = stroke.points[stroke.points.length - 1];
+      ctx.strokeRect(start.x, start.y, end.x - start.x, end.y - start.y);
+    }
+  }
+  function drawTextNote(ctx, note) {
+    const fontSize = 13;
+    const padding = 6;
+    ctx.font = `500 ${fontSize}px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`;
+    const metrics = ctx.measureText(note.text);
+    const textWidth = metrics.width;
+    const textHeight = fontSize + 2;
+    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
+    const bgX = note.x - 2;
+    const bgY = note.y - textHeight - padding / 2;
+    const bgW = textWidth + padding * 2;
+    const bgH = textHeight + padding;
+    const r = 4;
+    ctx.beginPath();
+    ctx.moveTo(bgX + r, bgY);
+    ctx.lineTo(bgX + bgW - r, bgY);
+    ctx.quadraticCurveTo(bgX + bgW, bgY, bgX + bgW, bgY + r);
+    ctx.lineTo(bgX + bgW, bgY + bgH - r);
+    ctx.quadraticCurveTo(bgX + bgW, bgY + bgH, bgX + bgW - r, bgY + bgH);
+    ctx.lineTo(bgX + r, bgY + bgH);
+    ctx.quadraticCurveTo(bgX, bgY + bgH, bgX, bgY + bgH - r);
+    ctx.lineTo(bgX, bgY + r);
+    ctx.quadraticCurveTo(bgX, bgY, bgX + r, bgY);
+    ctx.closePath();
+    ctx.fill();
+    ctx.fillStyle = note.color;
+    ctx.beginPath();
+    ctx.arc(bgX + padding, bgY + bgH / 2, 3, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = "#ffffff";
+    ctx.fillText(note.text, bgX + padding + 10, note.y - 2);
+  }
+  function draw() {
+    if (!canvasRef) return;
+    const ctx = canvasRef.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    ctx.clearRect(0, 0, canvasRef.width / dpr, canvasRef.height / dpr);
+    if (props.active && !props.drawMode && props.hoveredRect) {
+      targetRect = {
+        x: props.hoveredRect.x,
+        y: props.hoveredRect.y,
+        width: props.hoveredRect.width,
+        height: props.hoveredRect.height
+      };
+    } else if (props.active && !props.drawMode) {
+      targetRect = null;
+    }
+    if (props.active && !props.drawMode && targetRect) {
+      currentRect.x = lerp(currentRect.x, targetRect.x, LERP_SPEED);
+      currentRect.y = lerp(currentRect.y, targetRect.y, LERP_SPEED);
+      currentRect.width = lerp(currentRect.width, targetRect.width, LERP_SPEED);
+      currentRect.height = lerp(currentRect.height, targetRect.height, LERP_SPEED);
+      ctx.strokeStyle = "rgba(59, 130, 246, 0.8)";
+      ctx.lineWidth = 2;
+      ctx.setLineDash([]);
+      ctx.strokeRect(currentRect.x, currentRect.y, currentRect.width, currentRect.height);
+      ctx.fillStyle = "rgba(59, 130, 246, 0.06)";
+      ctx.fillRect(currentRect.x, currentRect.y, currentRect.width, currentRect.height);
+    }
+    if (props.active && !props.drawMode && props.dragRect) {
+      ctx.strokeStyle = "rgba(59, 130, 246, 0.6)";
+      ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      ctx.strokeRect(props.dragRect.x, props.dragRect.y, props.dragRect.width, props.dragRect.height);
+      ctx.fillStyle = "rgba(59, 130, 246, 0.08)";
+      ctx.fillRect(props.dragRect.x, props.dragRect.y, props.dragRect.width, props.dragRect.height);
+    }
+    for (const stroke of props.drawStrokes) {
+      drawStroke(ctx, stroke);
+    }
+    if (props.currentStroke) {
+      drawStroke(ctx, props.currentStroke);
+    }
+    for (const note of props.textNotes) {
+      drawTextNote(ctx, note);
+    }
+    animFrameId = requestAnimationFrame(draw);
+  }
+  function handleMouseDown(e) {
+    if (!props.drawMode) return;
+    if (props.drawTool === "text") {
+      props.onTextPlace(e.clientX, e.clientY);
+    } else {
+      props.onDrawStart(e.clientX, e.clientY);
+    }
+  }
+  function handleMouseMove(e) {
+    if (!props.drawMode) return;
+    props.onDrawMove(e.clientX, e.clientY);
+  }
+  function handleMouseUp(_e) {
+    if (!props.drawMode) return;
+    props.onDrawEnd();
+  }
+  function handleTouchStart(e) {
+    if (!props.drawMode) return;
+    e.preventDefault();
+    const touch = e.touches[0];
+    if (props.drawTool === "text") {
+      props.onTextPlace(touch.clientX, touch.clientY);
+    } else {
+      props.onDrawStart(touch.clientX, touch.clientY);
+    }
+  }
+  function handleTouchMove(e) {
+    if (!props.drawMode) return;
+    e.preventDefault();
+    const touch = e.touches[0];
+    props.onDrawMove(touch.clientX, touch.clientY);
+  }
+  function handleTouchEnd(e) {
+    if (!props.drawMode) return;
+    e.preventDefault();
+    props.onDrawEnd();
+  }
+  onMount(() => {
+    resizeCanvas();
+    window.addEventListener("resize", resizeCanvas);
+    animFrameId = requestAnimationFrame(draw);
+  });
+  onCleanup(() => {
+    window.removeEventListener("resize", resizeCanvas);
+    if (animFrameId !== null) {
+      cancelAnimationFrame(animFrameId);
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$2();
+    _el$.$$touchend = handleTouchEnd;
+    _el$.$$touchmove = handleTouchMove;
+    _el$.$$touchstart = handleTouchStart;
+    _el$.$$mouseup = handleMouseUp;
+    _el$.$$mousemove = handleMouseMove;
+    _el$.$$mousedown = handleMouseDown;
+    var _ref$ = canvasRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : canvasRef = _el$;
+    createRenderEffect((_p$) => {
+      var _v$ = props.drawMode ? "auto" : "none", _v$2 = props.drawMode ? props.drawTool === "text" ? "text" : "crosshair" : "default";
+      _v$ !== _p$.e && setStyleProperty(_el$, "pointer-events", _p$.e = _v$);
+      _v$2 !== _p$.t && setStyleProperty(_el$, "cursor", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["mousedown", "mousemove", "mouseup", "touchstart", "touchmove", "touchend"]);
 
-@media (prefers-reduced-motion: reduce) {
-  .pp-btn--icon-sm { transition: none; }
+// src/ui/components/PinPopup.tsx
+var _tmpl$3 = /* @__PURE__ */ template(`<div class=pp-popup><div class=pp-popup__input-row><textarea class=pp-popup__textarea placeholder="Add your feedback..."></textarea></div><div class=pp-popup__actions><button class="pp-btn pp-btn--ghost"title="Send 'Fix this' to agent"><span style=display:inline-flex></span>Fix</button><div style=flex:1></div><button class=pp-btn>Cancel</button><button class="pp-btn pp-btn--primary">`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div class=pp-popup__header><span class=pp-popup__name></span><span>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<div><div class=pp-popup__details-inner><div class=pp-popup__element-info>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div class=pp-popup__source><span style=display:inline-flex;vertical-align:middle></span> `);
+var _tmpl$5 = /* @__PURE__ */ template(`<div class=pp-popup__component>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div class=pp-popup__element-info>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<button class=pp-btn title="Add to queue"><span style=display:inline-flex></span>Queue`);
+function getSpeechRecognition() {
+  const w = window;
+  return w.SpeechRecognition || w.webkitSpeechRecognition || null;
 }
-
-/* Pin list */
-.pp-pin-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  overflow-y: auto;
-  max-height: 240px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--pp-border) transparent;
-}
-
-.pp-pin-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: var(--pp-radius-sm);
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.pp-pin-item:hover {
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.pp-pin-item__number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  min-width: 22px;
-  padding: 0 4px;
-  border-radius: 11px;
-  background: var(--pp-accent);
-  color: #fff;
-  font-size: 11px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  flex-shrink: 0;
-}
-
-.pp-pin-item__content {
-  flex: 1;
-  min-width: 0;
-}
-
-.pp-pin-item__comment {
-  font-size: 12px;
-  color: var(--pp-text);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  word-break: break-word;
-}
-
-.pp-pin-item__status {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.pp-pin-item__status--open { background: var(--pp-danger); }
-.pp-pin-item__status--acknowledged { background: var(--pp-warning); }
-.pp-pin-item__status--resolved { background: var(--pp-success); }
-.pp-pin-item__status--dismissed { background: var(--pp-text-muted); }
-
-/* Action bar \u2014 horizontal icon bar at bottom */
-.pp-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding-top: 8px;
-  border-top: 1px solid var(--pp-border);
-}
-
-.pp-actions .pp-btn--icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pp-actions .pp-btn--icon:focus-visible {
-  outline: 2px solid var(--pp-accent);
-  outline-offset: 2px;
-}
-
-/* Popup */
-.pp-popup {
-  position: fixed;
-  z-index: 2147483647;
-  pointer-events: auto;
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  background: var(--pp-bg);
-  border: 1px solid var(--pp-border);
-  border-radius: var(--pp-radius);
-  box-shadow: var(--pp-shadow);
-  padding: 10px;
-  min-width: 280px;
-  max-width: 360px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.pp-popup__element-info {
-  font-size: 11px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  color: var(--pp-accent);
-  word-break: break-all;
-}
-
-.pp-popup__component {
-  font-size: 12px;
-  color: var(--pp-text-muted);
-}
-
-.pp-popup__source {
-  font-size: 11px;
-  color: var(--pp-text-muted);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.pp-popup__source:hover {
-  color: var(--pp-accent);
-  text-decoration: underline;
-}
-
-/* Popup header with chevron toggle */
-.pp-popup__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  padding: 2px 0;
-}
-
-.pp-popup__name {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--pp-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 280px;
-}
-
-.pp-popup__chevron {
-  color: var(--pp-text-muted);
-  transition: transform 0.15s ease;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  transform: rotate(-90deg);
-}
-
-.pp-popup__chevron--open {
-  transform: rotate(0deg);
-}
-
-/* CSS-based collapsible \u2014 keeps DOM, animates height */
-.pp-popup__details {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.2s ease-out;
-}
-
-.pp-popup__details--open {
-  grid-template-rows: 1fr;
-}
-
-.pp-popup__details-inner {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .pp-popup__chevron,
-  .pp-popup__details {
-    transition: none;
+var PinPopup = (props) => {
+  const [comment, setComment] = createSignal(props.initialComment || "");
+  const [showDetails, setShowDetails] = createSignal(false);
+  const [isRecording, setIsRecording] = createSignal(false);
+  let textareaRef;
+  let recognitionRef = null;
+  const compact = () => props.compactPopup ?? true;
+  const hasSpeechAPI = !!getSpeechRecognition();
+  const displayName = () => {
+    if (props.context.framework?.componentPath) {
+      return props.context.framework.componentPath;
+    }
+    return `<${props.context.element.tagName.toLowerCase()}>`;
+  };
+  const popupPosition = () => {
+    const rect = props.context.element.boundingRect;
+    const estimatedHeight = compact() && showDetails() ? 260 : 220;
+    const popupX = Math.min(rect.x, window.innerWidth - 380);
+    const popupY = rect.y + rect.height + 8;
+    const adjustedY = popupY + estimatedHeight > window.innerHeight ? rect.y - estimatedHeight - 8 : popupY;
+    return {
+      x: Math.max(8, popupX),
+      y: Math.max(8, adjustedY)
+    };
+  };
+  async function openFileHandler() {
+    try {
+      const file = props.context.framework?.sourceFile;
+      if (!file) return;
+      const {
+        openFile
+      } = await import("./open-file-RQVHOCXI.js");
+      openFile(file);
+    } catch {
+    }
   }
-}
-
-.pp-popup__textarea {
-  width: 100%;
-  min-height: 48px;
-  max-height: 120px;
-  padding: 8px;
-  border: 1px solid var(--pp-border);
-  border-radius: var(--pp-radius-sm);
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--pp-text);
-  font-size: 13px;
-  font-family: inherit;
-  resize: none;
-  overflow-y: auto;
-  outline: none;
-}
-
-.pp-popup__textarea:focus {
-  border-color: var(--pp-accent);
-}
-
-.pp-popup__actions {
-  display: flex;
-  gap: 6px;
-  justify-content: flex-end;
-}
-
-.pp-popup__actions .pp-btn {
-  height: 26px;
-  padding: 0 10px;
-  font-size: 12px;
-}
-
-/* Selection label */
-.pp-selection-label {
-  position: fixed;
-  z-index: 2147483646;
-  pointer-events: none;
-  padding: 3px 8px;
-  border-radius: 4px;
-  background: var(--pp-accent);
-  color: #fff;
-  font-size: 11px;
-  font-weight: 500;
-  white-space: nowrap;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
+  function toggleRecording() {
+    if (isRecording()) {
+      stopRecording();
+    } else {
+      startRecording();
+    }
+  }
+  function startRecording() {
+    const SpeechRecognitionClass = getSpeechRecognition();
+    if (!SpeechRecognitionClass) return;
+    const recognition = new SpeechRecognitionClass();
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.lang = "en-US";
+    let finalTranscript = "";
+    recognition.onresult = (event) => {
+      let interim = "";
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const transcript = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+          finalTranscript += transcript;
+        } else {
+          interim = transcript;
+        }
+      }
+      const current = comment();
+      const separator = current && !current.endsWith(" ") ? " " : "";
+      setComment(current + separator + finalTranscript + interim);
+      finalTranscript = "";
+      if (textareaRef) {
+        textareaRef.style.height = "auto";
+        textareaRef.style.height = Math.min(textareaRef.scrollHeight, 120) + "px";
+      }
+    };
+    recognition.onerror = () => {
+      setIsRecording(false);
+    };
+    recognition.onend = () => {
+      setIsRecording(false);
+    };
+    recognition.start();
+    recognitionRef = recognition;
+    setIsRecording(true);
+  }
+  function stopRecording() {
+    recognitionRef?.stop();
+    recognitionRef = null;
+    setIsRecording(false);
+  }
+  onMount(() => {
+    textareaRef?.focus();
+    if (props.initialComment && textareaRef) {
+      textareaRef.selectionStart = textareaRef.value.length;
+    }
+    const onEsc = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        stopRecording();
+        props.onCancel();
+      }
+    };
+    document.addEventListener("keydown", onEsc, true);
+    onCleanup(() => {
+      document.removeEventListener("keydown", onEsc, true);
+      stopRecording();
+    });
+  });
+  function handleSubmit() {
+    const text = comment().trim();
+    if (!text) return;
+    stopRecording();
+    props.onAdd(text);
+  }
+  function handleQueue() {
+    const text = comment().trim();
+    if (!text) return;
+    stopRecording();
+    props.onQueue?.(text);
+  }
+  function handleFixThis() {
+    const text = comment().trim() || `Fix this ${displayName()}`;
+    stopRecording();
+    props.onFixThis?.(text);
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      stopRecording();
+      props.onCancel();
+    }
+  }
+  function handleAutoGrow(e) {
+    const el = e.currentTarget;
+    setComment(el.value);
+    el.style.height = "auto";
+    el.style.height = Math.min(el.scrollHeight, 120) + "px";
+  }
+  return (() => {
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling;
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!compact());
+      return () => _c$() ? (
+        /* Compact mode — friendly name + collapsible details */
+        [(() => {
+          var _el$0 = _tmpl$22(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
+          addEventListener(_el$0, "click", () => setShowDetails(!showDetails()));
+          insert(_el$1, displayName);
+          createRenderEffect((_p$) => {
+            var _v$5 = `pp-popup__chevron ${showDetails() ? "pp-popup__chevron--open" : ""}`, _v$6 = icons.chevronDown, _v$7 = showDetails();
+            _v$5 !== _p$.e && className(_el$10, _p$.e = _v$5);
+            _v$6 !== _p$.t && (_el$10.innerHTML = _p$.t = _v$6);
+            _v$7 !== _p$.a && setAttribute(_el$10, "aria-expanded", _p$.a = _v$7);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          });
+          return _el$0;
+        })(), (() => {
+          var _el$11 = _tmpl$32(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild;
+          insert(_el$13, () => props.context.cssSelector);
+          insert(_el$12, createComponent(Show, {
+            get when() {
+              return props.context.framework?.sourceFile;
+            },
+            children: (file) => (() => {
+              var _el$14 = _tmpl$4(), _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling;
+              addEventListener(_el$14, "click", openFileHandler);
+              insert(_el$14, () => file().split("/").pop(), null);
+              createRenderEffect((_p$) => {
+                var _v$8 = file(), _v$9 = icons.fileCode;
+                _v$8 !== _p$.e && setAttribute(_el$14, "title", _p$.e = _v$8);
+                _v$9 !== _p$.t && (_el$15.innerHTML = _p$.t = _v$9);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$14;
+            })()
+          }), null);
+          createRenderEffect(() => className(_el$11, `pp-popup__details ${showDetails() ? "pp-popup__details--open" : ""}`));
+          return _el$11;
+        })()]
+      ) : (
+        /* Expanded mode — all info visible */
+        [(() => {
+          var _el$17 = _tmpl$5();
+          insert(_el$17, displayName);
+          return _el$17;
+        })(), (() => {
+          var _el$18 = _tmpl$6();
+          insert(_el$18, () => props.context.cssSelector);
+          return _el$18;
+        })(), createComponent(Show, {
+          get when() {
+            return props.context.framework?.sourceFile;
+          },
+          children: (file) => (() => {
+            var _el$19 = _tmpl$4(), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling;
+            addEventListener(_el$19, "click", openFileHandler);
+            insert(_el$19, () => file().split("/").pop(), null);
+            createRenderEffect((_p$) => {
+              var _v$0 = file(), _v$1 = icons.fileCode;
+              _v$0 !== _p$.e && setAttribute(_el$19, "title", _p$.e = _v$0);
+              _v$1 !== _p$.t && (_el$20.innerHTML = _p$.t = _v$1);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$19;
+          })()
+        })]
+      );
+    })(), _el$2);
+    addEventListener(_el$3, "keydown", handleKeyDown);
+    addEventListener(_el$3, "input", handleAutoGrow);
+    var _ref$ = textareaRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$3) : textareaRef = _el$3;
+    insert(_el$2, hasSpeechAPI && (() => {
+      var _el$22 = _tmpl$7();
+      addEventListener(_el$22, "click", toggleRecording);
+      createRenderEffect((_p$) => {
+        var _v$10 = `pp-btn--icon pp-popup__mic ${isRecording() ? "pp-popup__mic--recording" : ""}`, _v$11 = isRecording() ? "Stop recording" : "Voice input", _v$12 = isRecording() ? "Stop recording" : "Voice input", _v$13 = isRecording() ? icons.microphoneOff : icons.microphone;
+        _v$10 !== _p$.e && className(_el$22, _p$.e = _v$10);
+        _v$11 !== _p$.t && setAttribute(_el$22, "title", _p$.t = _v$11);
+        _v$12 !== _p$.a && setAttribute(_el$22, "aria-label", _p$.a = _v$12);
+        _v$13 !== _p$.o && (_el$22.innerHTML = _p$.o = _v$13);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0
+      });
+      return _el$22;
+    })(), null);
+    addEventListener(_el$5, "click", handleFixThis);
+    addEventListener(_el$8, "click", () => props.onCancel());
+    insert(_el$4, (() => {
+      var _c$2 = memo(() => !!(props.queueMode && props.onQueue));
+      return () => _c$2() && (() => {
+        var _el$23 = _tmpl$8(), _el$24 = _el$23.firstChild;
+        addEventListener(_el$23, "click", handleQueue);
+        createRenderEffect((_p$) => {
+          var _v$14 = !comment().trim(), _v$15 = icons.plus;
+          _v$14 !== _p$.e && (_el$23.disabled = _p$.e = _v$14);
+          _v$15 !== _p$.t && (_el$24.innerHTML = _p$.t = _v$15);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$23;
+      })();
+    })(), _el$9);
+    addEventListener(_el$9, "click", () => handleSubmit());
+    insert(_el$9, () => props.isEditing ? "Save" : "Add Pin");
+    createRenderEffect((_p$) => {
+      var _v$ = `${popupPosition().x}px`, _v$2 = `${popupPosition().y}px`, _v$3 = icons.bolt, _v$4 = !comment().trim();
+      _v$ !== _p$.e && setStyleProperty(_el$, "left", _p$.e = _v$);
+      _v$2 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$2);
+      _v$3 !== _p$.a && (_el$6.innerHTML = _p$.a = _v$3);
+      _v$4 !== _p$.o && (_el$9.disabled = _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    createRenderEffect(() => _el$3.value = comment());
+    return _el$;
+  })();
+};
 
-/* Context menu */
-.pp-context-menu {
-  position: fixed;
-  z-index: 2147483647;
-  pointer-events: auto;
-  background: var(--pp-bg-solid);
-  border: 1px solid var(--pp-border);
-  border-radius: var(--pp-radius-sm);
-  box-shadow: var(--pp-shadow);
-  padding: 4px;
-  min-width: 180px;
-}
-
-.pp-context-menu__item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--pp-text);
-  transition: background 0.1s;
-}
-
-.pp-context-menu__item:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.pp-context-menu__separator {
-  height: 1px;
-  background: var(--pp-border);
-  margin: 4px 0;
-}
-
-/* Prompt mode */
-.pp-prompt {
-  position: fixed;
-  z-index: 2147483647;
-  pointer-events: auto;
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.pp-prompt__input {
-  padding: 6px 10px;
-  border: 1px solid var(--pp-accent);
-  border-radius: var(--pp-radius-sm);
-  background: var(--pp-bg);
-  color: var(--pp-text);
-  font-size: 13px;
-  font-family: inherit;
-  min-width: 240px;
-  outline: none;
-  backdrop-filter: blur(12px) saturate(180%);
-}
-
-/* Settings panel */
-.pp-settings {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--pp-border);
-}
-
-.pp-settings__row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.pp-settings__label {
-  font-size: 12px;
-  color: var(--pp-text);
-}
-
-.pp-settings__value {
-  font-size: 11px;
-  color: var(--pp-text-muted);
-}
-
-/* Toggle switch */
-.pp-toggle {
-  position: relative;
-  width: 32px;
-  height: 18px;
-  border-radius: 9px;
-  background: var(--pp-border);
-  cursor: pointer;
-  transition: background 0.2s;
-}
+// src/ui/components/PromptMode.tsx
+var _tmpl$9 = /* @__PURE__ */ template(`<div class=pp-prompt><input class=pp-prompt__input type=text placeholder="Tell the agent what to do..."><button class="pp-btn pp-btn--primary pp-btn--sm"><span>`);
+var PromptMode = (props) => {
+  const [instruction, setInstruction] = createSignal("");
+  let inputRef;
+  onMount(() => inputRef?.focus());
+  function handleSubmit() {
+    const text = instruction().trim();
+    if (!text) return;
+    props.onSend(text);
+  }
+  const rect = props.element.getBoundingClientRect();
+  const x = Math.max(8, Math.min(rect.left, window.innerWidth - 300));
+  const y = rect.bottom + 8 > window.innerHeight - 40 ? rect.top - 40 : rect.bottom + 8;
+  return (() => {
+    var _el$ = _tmpl$9(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+    setStyleProperty(_el$, "left", `${x}px`);
+    setStyleProperty(_el$, "top", `${y}px`);
+    _el$2.$$keydown = (e) => {
+      if (e.key === "Enter") handleSubmit();
+      if (e.key === "Escape") props.onCancel();
+    };
+    _el$2.$$input = (e) => setInstruction(e.currentTarget.value);
+    var _ref$ = inputRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : inputRef = _el$2;
+    _el$3.$$click = handleSubmit;
+    createRenderEffect(() => _el$4.innerHTML = icons.send);
+    createRenderEffect(() => _el$2.value = instruction());
+    return _el$;
+  })();
+};
+delegateEvents(["input", "keydown", "click"]);
 
-.pp-toggle--active {
-  background: var(--pp-accent);
-}
+// src/ui/components/SelectionLabel.tsx
+var _tmpl$10 = /* @__PURE__ */ template(`<div class=pp-selection-label>`);
+var SelectionLabel = (props) => {
+  return createComponent(Show, {
+    get when() {
+      return props.info;
+    },
+    children: (info) => {
+      const {
+        text,
+        rect
+      } = info();
+      const y = rect.top > 30 ? rect.top - 24 : rect.bottom + 4;
+      const x = Math.max(4, Math.min(rect.left, window.innerWidth - 300));
+      return (() => {
+        var _el$ = _tmpl$10();
+        setStyleProperty(_el$, "left", `${x}px`);
+        setStyleProperty(_el$, "top", `${y}px`);
+        insert(_el$, text);
+        return _el$;
+      })();
+    }
+  });
+};
 
-.pp-toggle__thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: #fff;
-  transition: transform 0.2s;
-}
+// src/ui/components/TextInputPopup.tsx
+var _tmpl$11 = /* @__PURE__ */ template(`<div class=pp-text-input-popup><div class=pp-text-input-popup__indicator></div><input class=pp-text-input-popup__input type=text placeholder="Add text note...">`);
+var TextInputPopup = (props) => {
+  const [text, setText] = createSignal("");
+  let inputRef;
+  onMount(() => inputRef?.focus());
+  function handleSubmit() {
+    const t = text().trim();
+    if (t) props.onSubmit(t);
+    else props.onCancel();
+  }
+  const x = Math.max(8, Math.min(props.x, window.innerWidth - 260));
+  const y = Math.max(8, Math.min(props.y + 8, window.innerHeight - 50));
+  return (() => {
+    var _el$ = _tmpl$11(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    setStyleProperty(_el$, "left", `${x}px`);
+    setStyleProperty(_el$, "top", `${y}px`);
+    _el$3.addEventListener("blur", handleSubmit);
+    _el$3.$$keydown = (e) => {
+      if (e.key === "Enter") handleSubmit();
+      if (e.key === "Escape") props.onCancel();
+    };
+    _el$3.$$input = (e) => setText(e.currentTarget.value);
+    var _ref$ = inputRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$3) : inputRef = _el$3;
+    createRenderEffect((_$p) => setStyleProperty(_el$2, "background", props.color));
+    createRenderEffect(() => _el$3.value = text());
+    return _el$;
+  })();
+};
+delegateEvents(["input", "keydown"]);
 
-.pp-toggle--active .pp-toggle__thumb {
-  transform: translateX(14px);
+// src/ui/components/Toolbar.tsx
+var _tmpl$12 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<div style=display:flex;align-items:center;justify-content:center;gap:6px><span style=display:flex;align-items:center>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<span class=pp-toolbar__badge>`);
+var _tmpl$42 = /* @__PURE__ */ template(`<button class="pp-btn pp-btn--primary"style=width:100%><span style=display:inline-flex></span>Send <!> selected to Claude`);
+var _tmpl$52 = /* @__PURE__ */ template(`<div class=pp-draw-tools><button title=Freehand></button><button title=Arrow></button><button title=Circle></button><button title=Rectangle></button><button title="Text note"></button><div style=flex:1></div><button class=pp-draw-tool title="Undo (remove last stroke)"></button><button class=pp-draw-tool title="Clear drawing">`);
+var _tmpl$62 = /* @__PURE__ */ template(`<div class=pp-draw-options><div class=pp-draw-colors></div><div class=pp-draw-widths>`);
+var _tmpl$72 = /* @__PURE__ */ template(`<div style=font-size:11px;color:var(--pp-text-muted);text-align:center> stroke`);
+var _tmpl$82 = /* @__PURE__ */ template(`<div class=pp-settings><div class=pp-settings__row><span class=pp-settings__label>Output detail</span><select style="background:var(--pp-bg-solid);color:var(--pp-text);border:1px solid var(--pp-border);border-radius:var(--pp-radius-sm);padding:2px 6px;font-size:11px"><option value=compact>Compact</option><option value=standard>Standard</option><option value=detailed>Detailed</option></select></div><div class=pp-settings__row><span class=pp-settings__label>Auto-submit</span><div><div class=pp-toggle__thumb></div></div></div><div class=pp-settings__row><span class=pp-settings__label>Clear on send</span><div><div class=pp-toggle__thumb></div></div></div><div class=pp-settings__row><span class=pp-settings__label>Block page clicks</span><div><div class=pp-toggle__thumb></div></div></div><div class=pp-settings__row><span class=pp-settings__label>Compact popup</span><div><div class=pp-toggle__thumb>`);
+var _tmpl$92 = /* @__PURE__ */ template(`<div style=display:contents><div style=display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:0.02em;color:var(--pp-text-muted)><span></span></div><div class=pp-mode-tabs role=tablist><button role=tab><span></span>Select</button><button role=tab><span></span>Draw</button><button role=tab><span></span>Queue</button></div><div class=pp-actions role=toolbar aria-label="Pinpoint actions"><button class=pp-btn--icon title="Send to agent"aria-label="Send to agent"></button><button class=pp-btn--icon title="Copy to clipboard"aria-label="Copy to clipboard"></button><button class=pp-btn--icon title=Settings aria-label="Toggle settings"></button><button class=pp-btn--icon title=Close aria-label="Close toolbar">`);
+var _tmpl$0 = /* @__PURE__ */ template(`<span class=pp-toolbar__queue-badge>`);
+var _tmpl$1 = /* @__PURE__ */ template(`<span class=pp-mode-tab__count>`);
+var _tmpl$102 = /* @__PURE__ */ template(`<div style=font-size:11px;color:var(--pp-accent);display:flex;align-items:center;gap:4px><span></span>Click any element to annotate`);
+var _tmpl$112 = /* @__PURE__ */ template(`<div class=pp-pin-list>`);
+var _tmpl$122 = /* @__PURE__ */ template(`<div class=pp-pin-item><div></div><span class=pp-pin-item__number></span><div class=pp-pin-item__content><div class=pp-pin-item__comment></div></div><button class="pp-btn--icon pp-btn--icon-sm"style=opacity:1;pointer-events:auto></button><button class="pp-btn--icon pp-btn--icon-sm"title="Remove pin"aria-label="Remove pin">`);
+var _tmpl$13 = /* @__PURE__ */ template(`<span style=color:var(--pp-text-muted);font-style:italic>No comment`);
+var _tmpl$14 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<button><div style=width:16px>`);
+var _tmpl$16 = /* @__PURE__ */ template(`<div style="font-size:11px;color:var(--pp-text-muted);text-align:center;padding:8px 0">Queue is empty. Add pins or drawings, then queue them here.`);
+var _tmpl$17 = /* @__PURE__ */ template(`<div style=font-size:11px;color:var(--pp-text-muted);text-align:center>`);
+var _tmpl$18 = /* @__PURE__ */ template(`<div style=display:flex;gap:6px><button class=pp-btn style=flex:1>Clear</button><button class="pp-btn pp-btn--primary"style=flex:1><span style=display:inline-flex></span>Send All`);
+var _tmpl$19 = /* @__PURE__ */ template(`<div class=pp-pin-item><span class=pp-pin-item__number></span><div class=pp-pin-item__content><div class=pp-pin-item__comment>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<button class=pp-btn--icon title="Clear all"aria-label="Clear all pins">`);
+var DRAW_COLORS = [{
+  color: "#EF4444",
+  name: "Red"
+}, {
+  color: "#3B82F6",
+  name: "Blue"
+}, {
+  color: "#22C55E",
+  name: "Green"
+}, {
+  color: "#EAB308",
+  name: "Yellow"
+}];
+var LINE_WIDTHS = [{
+  width: 2,
+  name: "Thin"
+}, {
+  width: 4,
+  name: "Medium"
+}, {
+  width: 8,
+  name: "Thick"
+}];
+var EDGE_GAP = 16;
+var COLLAPSED_TOOLBAR_SIZE = 60;
+var EXPANDED_TOOLBAR_WIDTH = 320;
+var AGENT_SIDEBAR_SELECTOR = ".agent-sidebar-panel";
+function clampRightOffset(right, toolbarWidth) {
+  if (typeof window === "undefined") return right;
+  const maxRight = Math.max(0, window.innerWidth - toolbarWidth - EDGE_GAP);
+  return Math.min(right, maxRight);
 }
-
-/* Kbd hints */
-.pp-kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1px 4px;
-  border: 1px solid var(--pp-border);
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.04);
-  font-size: 10px;
-  font-family: inherit;
-  color: var(--pp-text-muted);
-  line-height: 1;
+function getVisibleRightSidebarInset() {
+  if (typeof window === "undefined") return 0;
+  let inset = 0;
+  for (const panel of document.querySelectorAll(AGENT_SIDEBAR_SELECTOR)) {
+    const style2 = window.getComputedStyle(panel);
+    if (style2.display === "none" || style2.visibility === "hidden" || panel.getAttribute("aria-hidden") === "true") {
+      continue;
+    }
+    const rect = panel.getBoundingClientRect();
+    const isVisible = rect.width > 0 && rect.height > 0;
+    const isAnchoredToRight = rect.right >= window.innerWidth - 1 && rect.left < window.innerWidth - 1;
+    if (!isVisible || !isAnchoredToRight) continue;
+    inset = Math.max(inset, Math.ceil(window.innerWidth - rect.left));
+  }
+  return inset;
 }
-
-/* Mode tabs */
-.pp-mode-tabs {
-  display: flex;
-  gap: 2px;
-  padding: 2px;
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: var(--pp-radius-sm);
-}
-
-.pp-mode-tab {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 5px 8px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--pp-text-muted);
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.pp-mode-tab:hover {
-  color: var(--pp-text);
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.pp-mode-tab--active {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--pp-text);
-}
-
-.pp-mode-tab__count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
-  background: var(--pp-accent);
-  color: #fff;
-  font-size: 10px;
-  font-weight: 600;
-}
-
-/* Draw tools bar */
-.pp-draw-tools {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.pp-draw-tool {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: var(--pp-radius-sm);
-  background: transparent;
-  color: var(--pp-text-muted);
-  cursor: pointer;
-}
-
-.pp-draw-tool:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--pp-text);
-}
-
-.pp-draw-tool--active {
-  background: rgba(59, 130, 246, 0.15);
-  color: var(--pp-accent);
-}
-
-.pp-draw-tool:disabled {
-  opacity: 0.3;
-  cursor: default;
-}
-
-/* Draw options row */
-.pp-draw-options {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.pp-draw-colors {
-  display: flex;
-  gap: 4px;
-}
-
-.pp-color-swatch {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  cursor: pointer;
-  padding: 0;
-}
-
-.pp-color-swatch:hover {
-  opacity: 0.85;
-}
-
-.pp-color-swatch--active {
-  border-color: #fff;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
-}
-
-.pp-draw-widths {
-  display: flex;
-  gap: 4px;
-}
-
-.pp-width-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: var(--pp-radius-sm);
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-}
-
-.pp-width-btn:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.pp-width-btn--active {
-  background: rgba(255, 255, 255, 0.1);
-  outline: 1px solid var(--pp-border);
-}
-
-/* Queue badge in toolbar header */
-.pp-toolbar__queue-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 9px;
-  background: var(--pp-warning);
-  color: #000;
-  font-size: 10px;
-  font-weight: 700;
-}
-
-/* Popup input row with mic */
-.pp-popup__input-row {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: 4px;
-}
-
-.pp-popup__input-row .pp-popup__textarea {
-  flex: 1;
-}
-
-.pp-popup__mic {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  margin-top: 4px;
-}
-
-.pp-popup__mic--recording {
-  color: var(--pp-danger) !important;
-  background: rgba(239, 68, 68, 0.15) !important;
-  animation: pp-mic-pulse 1.2s ease-in-out infinite;
-}
-
-@keyframes pp-mic-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
-  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
-}
-
-/* Ghost button (Fix this) */
-.pp-btn--ghost {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  border: none;
-  border-radius: var(--pp-radius-sm);
-  background: transparent;
-  color: var(--pp-warning);
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.pp-btn--ghost:hover {
-  background: rgba(234, 179, 8, 0.1);
-}
-
-/* Text input popup for draw-mode text annotations */
-.pp-text-input-popup {
-  position: fixed;
-  z-index: 2147483647;
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  background: var(--pp-bg);
-  border: 1px solid var(--pp-border);
-  border-radius: var(--pp-radius-sm);
-  box-shadow: var(--pp-shadow);
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-}
-
-.pp-text-input-popup__indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.pp-text-input-popup__input {
-  border: none;
-  background: transparent;
-  color: var(--pp-text);
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-  min-width: 200px;
-}
-
-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 4px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--pp-border);
-  border-radius: 2px;
-}
-`;
-
-// src/ui/icons/index.ts
-var S = 'width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
-var icons = {
-  pin: `<svg ${S}><path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4"/><path d="M9 15l-4.5 4.5"/><path d="M14.5 4l5.5 5.5"/></svg>`,
-  mapPin: `<svg ${S}><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0"/></svg>`,
-  crosshair: `<svg ${S}><path d="M4 8v-2a2 2 0 0 1 2 -2h2"/><path d="M4 16v2a2 2 0 0 0 2 2h2"/><path d="M16 4h2a2 2 0 0 1 2 2v2"/><path d="M16 20h2a2 2 0 0 0 2 -2v-2"/><path d="M9 12l6 0"/><path d="M12 9l0 6"/></svg>`,
-  send: `<svg ${S}><path d="M10 14l11 -11"/><path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"/></svg>`,
-  copy: `<svg ${S}><path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z"/><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"/></svg>`,
-  trash: `<svg ${S}><path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>`,
-  settings: `<svg ${S}><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065"/><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/></svg>`,
-  x: `<svg ${S}><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>`,
-  chevronDown: `<svg ${S}><path d="M6 9l6 6l6 -6"/></svg>`,
-  check: `<svg ${S}><path d="M5 12l5 5l10 -10"/></svg>`,
-  messageSquare: `<svg ${S}><path d="M8 9h8"/><path d="M8 13h6"/><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"/></svg>`,
-  eye: `<svg ${S}><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>`,
-  fileCode: `<svg ${S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/><path d="M10 13l-1 2l1 2"/><path d="M14 13l1 2l-1 2"/></svg>`,
-  history: `<svg ${S}><path d="M12 8l0 4l2 2"/><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5"/></svg>`,
-  minus: `<svg ${S}><path d="M5 12l14 0"/></svg>`,
-  // Draw mode icons
-  pencil: `<svg ${S}><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"/><path d="M13.5 6.5l4 4"/></svg>`,
-  arrowUpRight: `<svg ${S}><path d="M17 7l-10 10"/><path d="M8 7l9 0l0 9"/></svg>`,
-  circle: `<svg ${S}><circle cx="12" cy="12" r="9"/></svg>`,
-  square: `<svg ${S}><rect x="4" y="4" width="16" height="16" rx="2"/></svg>`,
-  typography: `<svg ${S}><path d="M4 20l3 0"/><path d="M14 20l7 0"/><path d="M6.9 15l6.9 0"/><path d="M10.2 6.3l5.8 13.7"/><path d="M5 20l6 -16l2 0l7 16"/></svg>`,
-  undo: `<svg ${S}><path d="M9 14l-4 -4l4 -4"/><path d="M5 10h11a4 4 0 1 1 0 8h-1"/></svg>`,
-  palette: `<svg ${S}><path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"/><circle cx="8.5" cy="10.5" r="1"/><circle cx="12.5" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg>`,
-  lineWeight: `<svg ${S}><path d="M4 6h16"/><path d="M4 12h16" stroke-width="3"/><path d="M4 18h16" stroke-width="5"/></svg>`,
-  // Voice icon
-  microphone: `<svg ${S}><path d="M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M8 21l8 0"/><path d="M12 17l0 4"/></svg>`,
-  microphoneOff: `<svg ${S}><path d="M3 3l18 18"/><path d="M9 5a3 3 0 0 1 6 0v5a3 3 0 0 1 -.13 .874m-2 2a3 3 0 0 1 -3.87 -2.872v-1"/><path d="M5 10a7 7 0 0 0 10.846 5.85m2 -2a6.967 6.967 0 0 0 1.152 -3.85"/><path d="M8 21l8 0"/><path d="M12 17l0 4"/></svg>`,
-  // Queue & batch icons
-  plus: `<svg ${S}><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>`,
-  stack: `<svg ${S}><path d="M12 2l-8 4l8 4l8 -4l-8 -4"/><path d="M4 10l8 4l8 -4"/><path d="M4 14l8 4l8 -4"/></svg>`,
-  checkSquare: `<svg ${S}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 12l2 2l4 -4"/></svg>`,
-  squareEmpty: `<svg ${S}><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`,
-  bolt: `<svg ${S}><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"/></svg>`,
-  checkCircle: `<svg ${S}><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2l4 -4"/></svg>`
-};
-
-// src/ui/components/Toolbar.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div style=display:flex;align-items:center;justify-content:center;gap:6px><span style=display:flex;align-items:center>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<span class=pp-toolbar__badge>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<button class="pp-btn pp-btn--primary"style=width:100%><span style=display:inline-flex></span>Send <!> selected to Claude`);
-var _tmpl$5 = /* @__PURE__ */ template(`<div class=pp-draw-tools><button title=Freehand></button><button title=Arrow></button><button title=Circle></button><button title=Rectangle></button><button title="Text note"></button><div style=flex:1></div><button class=pp-draw-tool title="Undo (remove last stroke)"></button><button class=pp-draw-tool title="Clear drawing">`);
-var _tmpl$6 = /* @__PURE__ */ template(`<div class=pp-draw-options><div class=pp-draw-colors></div><div class=pp-draw-widths>`);
-var _tmpl$7 = /* @__PURE__ */ template(`<div style=font-size:11px;color:var(--pp-text-muted);text-align:center> stroke`);
-var _tmpl$8 = /* @__PURE__ */ template(`<div class=pp-settings><div class=pp-settings__row><span class=pp-settings__label>Output detail</span><select style="background:var(--pp-bg-solid);color:var(--pp-text);border:1px solid var(--pp-border);border-radius:var(--pp-radius-sm);padding:2px 6px;font-size:11px"><option value=compact>Compact</option><option value=standard>Standard</option><option value=detailed>Detailed</option></select></div><div class=pp-settings__row><span class=pp-settings__label>Auto-submit</span><div><div class=pp-toggle__thumb></div></div></div><div class=pp-settings__row><span class=pp-settings__label>Clear on send</span><div><div class=pp-toggle__thumb></div></div></div><div class=pp-settings__row><span class=pp-settings__label>Block page clicks</span><div><div class=pp-toggle__thumb></div></div></div><div class=pp-settings__row><span class=pp-settings__label>Compact popup</span><div><div class=pp-toggle__thumb>`);
-var _tmpl$9 = /* @__PURE__ */ template(`<div style=display:contents><div style=display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:0.02em;color:var(--pp-text-muted)><span></span></div><div class=pp-mode-tabs role=tablist><button role=tab><span></span>Select</button><button role=tab><span></span>Draw</button><button role=tab><span></span>Queue</button></div><div class=pp-actions role=toolbar aria-label="Pinpoint actions"><button class=pp-btn--icon title="Send to agent"aria-label="Send to agent"></button><button class=pp-btn--icon title="Copy to clipboard"aria-label="Copy to clipboard"></button><button class=pp-btn--icon title=Settings aria-label="Toggle settings"></button><button class=pp-btn--icon title=Close aria-label="Close toolbar">`);
-var _tmpl$0 = /* @__PURE__ */ template(`<span class=pp-toolbar__queue-badge>`);
-var _tmpl$1 = /* @__PURE__ */ template(`<span class=pp-mode-tab__count>`);
-var _tmpl$10 = /* @__PURE__ */ template(`<div style=font-size:11px;color:var(--pp-accent);display:flex;align-items:center;gap:4px><span></span>Click any element to annotate`);
-var _tmpl$11 = /* @__PURE__ */ template(`<div class=pp-pin-list>`);
-var _tmpl$12 = /* @__PURE__ */ template(`<div class=pp-pin-item><div></div><span class=pp-pin-item__number></span><div class=pp-pin-item__content><div class=pp-pin-item__comment></div></div><button class="pp-btn--icon pp-btn--icon-sm"style=opacity:1;pointer-events:auto></button><button class="pp-btn--icon pp-btn--icon-sm"title="Remove pin"aria-label="Remove pin">`);
-var _tmpl$13 = /* @__PURE__ */ template(`<span style=color:var(--pp-text-muted);font-style:italic>No comment`);
-var _tmpl$14 = /* @__PURE__ */ template(`<button>`);
-var _tmpl$15 = /* @__PURE__ */ template(`<button><div style=width:16px>`);
-var _tmpl$16 = /* @__PURE__ */ template(`<div style="font-size:11px;color:var(--pp-text-muted);text-align:center;padding:8px 0">Queue is empty. Add pins or drawings, then queue them here.`);
-var _tmpl$17 = /* @__PURE__ */ template(`<div style=font-size:11px;color:var(--pp-text-muted);text-align:center>`);
-var _tmpl$18 = /* @__PURE__ */ template(`<div style=display:flex;gap:6px><button class=pp-btn style=flex:1>Clear</button><button class="pp-btn pp-btn--primary"style=flex:1><span style=display:inline-flex></span>Send All`);
-var _tmpl$19 = /* @__PURE__ */ template(`<div class=pp-pin-item><span class=pp-pin-item__number></span><div class=pp-pin-item__content><div class=pp-pin-item__comment>`);
-var _tmpl$20 = /* @__PURE__ */ template(`<button class=pp-btn--icon title="Clear all"aria-label="Clear all pins">`);
-var DRAW_COLORS = [{
-  color: "#EF4444",
-  name: "Red"
-}, {
-  color: "#3B82F6",
-  name: "Blue"
-}, {
-  color: "#22C55E",
-  name: "Green"
-}, {
-  color: "#EAB308",
-  name: "Yellow"
-}];
-var LINE_WIDTHS = [{
-  width: 2,
-  name: "Thin"
-}, {
-  width: 4,
-  name: "Medium"
-}, {
-  width: 8,
-  name: "Thick"
-}];
-var EDGE_GAP = 16;
-var COLLAPSED_TOOLBAR_SIZE = 60;
-var EXPANDED_TOOLBAR_WIDTH = 320;
-var AGENT_SIDEBAR_SELECTOR = ".agent-sidebar-panel";
-function clampRightOffset(right, toolbarWidth) {
-  if (typeof window === "undefined") return right;
-  const maxRight = Math.max(0, window.innerWidth - toolbarWidth - EDGE_GAP);
-  return Math.min(right, maxRight);
-}
-function getVisibleRightSidebarInset() {
-  if (typeof window === "undefined") return 0;
-  let inset = 0;
-  for (const panel of document.querySelectorAll(AGENT_SIDEBAR_SELECTOR)) {
-    const style2 = window.getComputedStyle(panel);
-    if (style2.display === "none" || style2.visibility === "hidden" || panel.getAttribute("aria-hidden") === "true") {
-      continue;
-    }
-    const rect = panel.getBoundingClientRect();
-    const isVisible = rect.width > 0 && rect.height > 0;
-    const isAnchoredToRight = rect.right >= window.innerWidth - 1 && rect.left < window.innerWidth - 1;
-    if (!isVisible || !isAnchoredToRight) continue;
-    inset = Math.max(inset, Math.ceil(window.innerWidth - rect.left));
-  }
-  return inset;
-}
-var Toolbar = (props) => {
-  const [pos, setPos] = createSignal(props.position ? {
-    right: window.innerWidth - props.position.x,
-    bottom: window.innerHeight - props.position.y
-  } : {
-    right: EDGE_GAP,
-    bottom: EDGE_GAP
-  });
-  const [reservedRight, setReservedRight] = createSignal(0);
-  const [dragStart, setDragStart] = createSignal({
-    x: 0,
-    y: 0,
-    right: 0,
-    bottom: 0
-  });
-  const [didDrag, setDidDrag] = createSignal(false);
-  onMount(() => {
-    if (typeof window === "undefined") return;
-    let resizeObserver;
-    const updateReservedRight = () => {
-      setReservedRight(getVisibleRightSidebarInset());
-      resizeObserver?.disconnect();
-      if (typeof ResizeObserver === "undefined") return;
-      resizeObserver = new ResizeObserver(() => {
-        setReservedRight(getVisibleRightSidebarInset());
-      });
-      for (const panel of document.querySelectorAll(AGENT_SIDEBAR_SELECTOR)) {
-        resizeObserver.observe(panel);
-      }
-    };
-    updateReservedRight();
-    const mutationObserver = new MutationObserver(updateReservedRight);
-    mutationObserver.observe(document.body, {
-      attributes: true,
-      attributeFilter: ["class", "style", "aria-hidden"],
-      childList: true,
-      subtree: true
-    });
-    window.addEventListener("resize", updateReservedRight);
-    onCleanup(() => {
-      mutationObserver.disconnect();
-      resizeObserver?.disconnect();
-      window.removeEventListener("resize", updateReservedRight);
-    });
-  });
-  const toolbarRight = () => {
-    const toolbarWidth = props.expanded ? EXPANDED_TOOLBAR_WIDTH : COLLAPSED_TOOLBAR_SIZE;
-    return clampRightOffset((props.expanded ? EDGE_GAP : pos().right) + reservedRight(), toolbarWidth);
-  };
-  function handleMouseDown(e) {
-    if (props.expanded) return;
-    setDidDrag(false);
-    setDragStart({
-      x: e.clientX,
-      y: e.clientY,
-      right: pos().right,
-      bottom: pos().bottom
-    });
-    const handleMove = (e2) => {
-      setDidDrag(true);
-      const start = dragStart();
-      const dx = e2.clientX - start.x;
-      const dy = e2.clientY - start.y;
-      const maxRight = Math.max(0, window.innerWidth - reservedRight() - COLLAPSED_TOOLBAR_SIZE);
-      setPos({
-        right: Math.max(0, Math.min(maxRight, start.right - dx)),
-        bottom: Math.max(0, Math.min(window.innerHeight - COLLAPSED_TOOLBAR_SIZE, start.bottom - dy))
-      });
-    };
-    const handleUp = () => {
-      window.removeEventListener("mousemove", handleMove);
-      window.removeEventListener("mouseup", handleUp);
-    };
-    window.addEventListener("mousemove", handleMove);
-    window.addEventListener("mouseup", handleUp);
-  }
-  function handleClick() {
-    if (props.expanded) return;
-    if (didDrag()) return;
-    props.onToggleExpand();
-  }
-  const queueSummary = () => {
-    const q = props.queue;
-    let draws = 0;
-    let clicks = 0;
-    for (const item of q) {
-      if (item.drawings?.length || item.textNotes?.length) draws++;
-      if (item.pin) clicks++;
-    }
-    const parts = [];
-    if (draws > 0) parts.push(`Draw x${draws}`);
-    if (clicks > 0) parts.push(`Click x${clicks}`);
-    return parts.join(" / ") || "Empty";
-  };
-  const totalBadgeCount = () => props.pins.length + props.queue.length + props.drawStrokeCount;
-  return (() => {
-    var _el$ = _tmpl$();
-    addEventListener(_el$, "click", handleClick);
-    addEventListener(_el$, "mousedown", props.expanded ? void 0 : handleMouseDown, true);
-    insert(_el$, (() => {
-      var _c$ = memo(() => !!!props.expanded);
-      return () => _c$() ? (
-        /* Collapsed pill */
-        (() => {
-          var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
-          insert(_el$2, (() => {
-            var _c$2 = memo(() => totalBadgeCount() > 0);
-            return () => _c$2() && (() => {
-              var _el$4 = _tmpl$3();
-              insert(_el$4, totalBadgeCount);
-              return _el$4;
-            })();
-          })(), _el$3);
-          createRenderEffect(() => _el$3.innerHTML = icons.pin);
-          return _el$2;
-        })()
-      ) : (
-        /* Expanded toolbar */
-        (() => {
-          var _el$5 = _tmpl$9(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$9.nextSibling, _el$10 = _el$1.firstChild, _el$11 = _el$1.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$49 = _el$8.nextSibling, _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling, _el$52 = _el$51.nextSibling, _el$53 = _el$52.nextSibling;
-          addEventListener(_el$5, "click", (e) => e.stopPropagation());
-          insert(_el$7, () => props.author || "Pinpoint");
-          insert(_el$6, (() => {
-            var _c$3 = memo(() => props.queue.length > 0);
-            return () => _c$3() && (() => {
-              var _el$54 = _tmpl$0();
-              insert(_el$54, () => props.queue.length);
-              return _el$54;
-            })();
-          })(), null);
-          addEventListener(_el$9, "click", () => props.onModeChange("select"));
-          addEventListener(_el$1, "click", () => props.onModeChange("draw"));
-          addEventListener(_el$11, "click", () => props.onModeChange("queue"));
-          insert(_el$11, (() => {
-            var _c$4 = memo(() => props.queue.length > 0);
-            return () => _c$4() && (() => {
-              var _el$55 = _tmpl$1();
-              insert(_el$55, () => props.queue.length);
-              return _el$55;
-            })();
-          })(), null);
-          insert(_el$5, createComponent(Show, {
-            get when() {
-              return props.mode === "select";
-            },
-            get children() {
-              return [memo(() => memo(() => props.pins.length === 0)() && (() => {
-                var _el$56 = _tmpl$10(), _el$57 = _el$56.firstChild;
-                createRenderEffect(() => _el$57.innerHTML = icons.crosshair);
-                return _el$56;
-              })()), memo(() => memo(() => props.pins.length > 0)() && (() => {
-                var _el$58 = _tmpl$11();
-                insert(_el$58, createComponent(For, {
-                  get each() {
-                    return props.pins;
-                  },
-                  children: (pin, index) => (() => {
-                    var _el$59 = _tmpl$12(), _el$60 = _el$59.firstChild, _el$61 = _el$60.nextSibling, _el$62 = _el$61.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.nextSibling;
-                    addEventListener(_el$59, "click", () => props.onEditPin(pin));
-                    insert(_el$61, () => index() + 1);
-                    insert(_el$63, () => pin.comment || _tmpl$13());
-                    addEventListener(_el$64, "click", (e) => {
-                      e.stopPropagation();
-                      props.onTogglePinSelect(pin);
-                    });
-                    addEventListener(_el$65, "click", (e) => {
-                      e.stopPropagation();
-                      props.onRemovePin(pin.id);
-                    });
-                    createRenderEffect((_p$) => {
-                      var _v$32 = `pp-pin-item__status pp-pin-item__status--${pin.status.state}`, _v$33 = props.selectedPinIds.has(pin.id) ? "Deselect" : "Select for send", _v$34 = props.selectedPinIds.has(pin.id) ? "Deselect" : "Select for send", _v$35 = props.selectedPinIds.has(pin.id) ? icons.checkSquare : icons.squareEmpty, _v$36 = props.selectedPinIds.has(pin.id) ? "var(--pp-accent)" : "var(--pp-text-muted)", _v$37 = icons.minus;
-                      _v$32 !== _p$.e && className(_el$60, _p$.e = _v$32);
-                      _v$33 !== _p$.t && setAttribute(_el$64, "title", _p$.t = _v$33);
-                      _v$34 !== _p$.a && setAttribute(_el$64, "aria-label", _p$.a = _v$34);
-                      _v$35 !== _p$.o && (_el$64.innerHTML = _p$.o = _v$35);
-                      _v$36 !== _p$.i && setStyleProperty(_el$64, "color", _p$.i = _v$36);
-                      _v$37 !== _p$.n && (_el$65.innerHTML = _p$.n = _v$37);
-                      return _p$;
-                    }, {
-                      e: void 0,
-                      t: void 0,
-                      a: void 0,
-                      o: void 0,
-                      i: void 0,
-                      n: void 0
-                    });
-                    return _el$59;
-                  })()
-                }));
-                return _el$58;
-              })()), createComponent(Show, {
-                get when() {
-                  return props.selectedPinIds.size > 0;
-                },
-                get children() {
-                  var _el$14 = _tmpl$4(), _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$18 = _el$16.nextSibling, _el$17 = _el$18.nextSibling;
-                  addEventListener(_el$14, "click", () => props.onSendSelected());
-                  insert(_el$14, () => props.selectedPinIds.size, _el$18);
-                  createRenderEffect(() => _el$15.innerHTML = icons.send);
-                  return _el$14;
-                }
-              })];
-            }
-          }), _el$49);
-          insert(_el$5, createComponent(Show, {
-            get when() {
-              return props.mode === "draw";
-            },
-            get children() {
-              return [(() => {
-                var _el$19 = _tmpl$5(), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$21.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.nextSibling, _el$25 = _el$24.nextSibling, _el$26 = _el$25.nextSibling, _el$27 = _el$26.nextSibling;
-                addEventListener(_el$20, "click", () => props.onDrawToolChange("freehand"));
-                addEventListener(_el$21, "click", () => props.onDrawToolChange("arrow"));
-                addEventListener(_el$22, "click", () => props.onDrawToolChange("circle"));
-                addEventListener(_el$23, "click", () => props.onDrawToolChange("rect"));
-                addEventListener(_el$24, "click", () => props.onDrawToolChange("text"));
-                addEventListener(_el$26, "click", () => props.onDrawUndo());
-                addEventListener(_el$27, "click", () => props.onDrawClear());
-                createRenderEffect((_p$) => {
-                  var _v$3 = `pp-draw-tool ${props.drawTool === "freehand" ? "pp-draw-tool--active" : ""}`, _v$4 = icons.pencil, _v$5 = `pp-draw-tool ${props.drawTool === "arrow" ? "pp-draw-tool--active" : ""}`, _v$6 = icons.arrowUpRight, _v$7 = `pp-draw-tool ${props.drawTool === "circle" ? "pp-draw-tool--active" : ""}`, _v$8 = icons.circle, _v$9 = `pp-draw-tool ${props.drawTool === "rect" ? "pp-draw-tool--active" : ""}`, _v$0 = icons.square, _v$1 = `pp-draw-tool ${props.drawTool === "text" ? "pp-draw-tool--active" : ""}`, _v$10 = icons.typography, _v$11 = icons.undo, _v$12 = props.drawStrokeCount === 0, _v$13 = icons.trash, _v$14 = props.drawStrokeCount === 0;
-                  _v$3 !== _p$.e && className(_el$20, _p$.e = _v$3);
-                  _v$4 !== _p$.t && (_el$20.innerHTML = _p$.t = _v$4);
-                  _v$5 !== _p$.a && className(_el$21, _p$.a = _v$5);
-                  _v$6 !== _p$.o && (_el$21.innerHTML = _p$.o = _v$6);
-                  _v$7 !== _p$.i && className(_el$22, _p$.i = _v$7);
-                  _v$8 !== _p$.n && (_el$22.innerHTML = _p$.n = _v$8);
-                  _v$9 !== _p$.s && className(_el$23, _p$.s = _v$9);
-                  _v$0 !== _p$.h && (_el$23.innerHTML = _p$.h = _v$0);
-                  _v$1 !== _p$.r && className(_el$24, _p$.r = _v$1);
-                  _v$10 !== _p$.d && (_el$24.innerHTML = _p$.d = _v$10);
-                  _v$11 !== _p$.l && (_el$26.innerHTML = _p$.l = _v$11);
-                  _v$12 !== _p$.u && (_el$26.disabled = _p$.u = _v$12);
-                  _v$13 !== _p$.c && (_el$27.innerHTML = _p$.c = _v$13);
-                  _v$14 !== _p$.w && (_el$27.disabled = _p$.w = _v$14);
-                  return _p$;
-                }, {
-                  e: void 0,
-                  t: void 0,
-                  a: void 0,
-                  o: void 0,
-                  i: void 0,
-                  n: void 0,
-                  s: void 0,
-                  h: void 0,
-                  r: void 0,
-                  d: void 0,
-                  l: void 0,
-                  u: void 0,
-                  c: void 0,
-                  w: void 0
-                });
-                return _el$19;
-              })(), (() => {
-                var _el$28 = _tmpl$6(), _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling;
-                insert(_el$29, createComponent(For, {
-                  each: DRAW_COLORS,
-                  children: (c) => (() => {
-                    var _el$67 = _tmpl$14();
-                    addEventListener(_el$67, "click", () => props.onDrawColorChange(c.color));
-                    createRenderEffect((_p$) => {
-                      var _v$38 = `pp-color-swatch ${props.drawColor === c.color ? "pp-color-swatch--active" : ""}`, _v$39 = c.color, _v$40 = c.name;
-                      _v$38 !== _p$.e && className(_el$67, _p$.e = _v$38);
-                      _v$39 !== _p$.t && setStyleProperty(_el$67, "background", _p$.t = _v$39);
-                      _v$40 !== _p$.a && setAttribute(_el$67, "title", _p$.a = _v$40);
-                      return _p$;
-                    }, {
-                      e: void 0,
-                      t: void 0,
-                      a: void 0
-                    });
-                    return _el$67;
-                  })()
-                }));
-                insert(_el$30, createComponent(For, {
-                  each: LINE_WIDTHS,
-                  children: (w) => (() => {
-                    var _el$68 = _tmpl$15(), _el$69 = _el$68.firstChild;
-                    addEventListener(_el$68, "click", () => props.onDrawLineWidthChange(w.width));
-                    createRenderEffect((_p$) => {
-                      var _v$41 = `pp-width-btn ${props.drawLineWidth === w.width ? "pp-width-btn--active" : ""}`, _v$42 = w.name, _v$43 = `${w.width}px`, _v$44 = props.drawColor, _v$45 = `${w.width / 2}px`;
-                      _v$41 !== _p$.e && className(_el$68, _p$.e = _v$41);
-                      _v$42 !== _p$.t && setAttribute(_el$68, "title", _p$.t = _v$42);
-                      _v$43 !== _p$.a && setStyleProperty(_el$69, "height", _p$.a = _v$43);
-                      _v$44 !== _p$.o && setStyleProperty(_el$69, "background", _p$.o = _v$44);
-                      _v$45 !== _p$.i && setStyleProperty(_el$69, "border-radius", _p$.i = _v$45);
-                      return _p$;
-                    }, {
-                      e: void 0,
-                      t: void 0,
-                      a: void 0,
-                      o: void 0,
-                      i: void 0
-                    });
-                    return _el$68;
-                  })()
-                }));
-                return _el$28;
-              })(), createComponent(Show, {
-                get when() {
-                  return props.drawStrokeCount > 0;
-                },
-                get children() {
-                  var _el$31 = _tmpl$7(), _el$32 = _el$31.firstChild;
-                  insert(_el$31, () => props.drawStrokeCount, _el$32);
-                  insert(_el$31, () => props.drawStrokeCount !== 1 ? "s" : "", null);
-                  return _el$31;
-                }
-              })];
-            }
-          }), _el$49);
-          insert(_el$5, createComponent(Show, {
-            get when() {
-              return props.mode === "queue";
-            },
-            get children() {
-              return memo(() => props.queue.length === 0)() ? _tmpl$16() : [(() => {
-                var _el$71 = _tmpl$17();
-                insert(_el$71, queueSummary);
-                return _el$71;
-              })(), (() => {
-                var _el$72 = _tmpl$11();
-                insert(_el$72, createComponent(For, {
-                  get each() {
-                    return props.queue;
-                  },
-                  children: (item, index) => (() => {
-                    var _el$77 = _tmpl$19(), _el$78 = _el$77.firstChild, _el$79 = _el$78.nextSibling, _el$80 = _el$79.firstChild;
-                    insert(_el$78, () => index() + 1);
-                    insert(_el$80, (() => {
-                      var _c$6 = memo(() => !!item.pin);
-                      return () => _c$6() ? item.pin.comment || "Pin annotation" : `Drawing (${(item.drawings?.length || 0) + (item.textNotes?.length || 0)} items)`;
-                    })());
-                    return _el$77;
-                  })()
-                }));
-                return _el$72;
-              })(), (() => {
-                var _el$73 = _tmpl$18(), _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$76 = _el$75.firstChild;
-                addEventListener(_el$74, "click", () => props.onQueueClear());
-                addEventListener(_el$75, "click", () => props.onQueueSend());
-                createRenderEffect(() => _el$76.innerHTML = icons.send);
-                return _el$73;
-              })()];
-            }
-          }), _el$49);
-          insert(_el$5, createComponent(Show, {
-            get when() {
-              return props.showSettings;
-            },
-            get children() {
-              var _el$33 = _tmpl$8(), _el$34 = _el$33.firstChild, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$34.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$37.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling, _el$43 = _el$40.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$43.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling;
-              _el$36.addEventListener("change", (e) => props.onOutputFormatChange(e.currentTarget.value));
-              addEventListener(_el$39, "click", () => props.onAutoSubmitChange(!props.autoSubmit));
-              addEventListener(_el$42, "click", () => props.onClearOnSendChange(!props.clearOnSend));
-              addEventListener(_el$45, "click", () => props.onBlockInteractionsChange(!props.blockInteractions));
-              addEventListener(_el$48, "click", () => props.onCompactPopupChange(!props.compactPopup));
-              createRenderEffect((_p$) => {
-                var _v$15 = `pp-toggle ${props.autoSubmit ? "pp-toggle--active" : ""}`, _v$16 = `pp-toggle ${props.clearOnSend ? "pp-toggle--active" : ""}`, _v$17 = `pp-toggle ${props.blockInteractions ? "pp-toggle--active" : ""}`, _v$18 = `pp-toggle ${props.compactPopup ? "pp-toggle--active" : ""}`;
-                _v$15 !== _p$.e && className(_el$39, _p$.e = _v$15);
-                _v$16 !== _p$.t && className(_el$42, _p$.t = _v$16);
-                _v$17 !== _p$.a && className(_el$45, _p$.a = _v$17);
-                _v$18 !== _p$.o && className(_el$48, _p$.o = _v$18);
-                return _p$;
-              }, {
-                e: void 0,
-                t: void 0,
-                a: void 0,
-                o: void 0
-              });
-              createRenderEffect(() => _el$36.value = props.outputFormat);
-              return _el$33;
-            }
-          }), _el$49);
-          addEventListener(_el$50, "click", () => props.onSend());
-          addEventListener(_el$51, "click", () => props.onCopy());
-          insert(_el$49, (() => {
-            var _c$5 = memo(() => props.pins.length > 0);
-            return () => _c$5() && (() => {
-              var _el$81 = _tmpl$20();
-              addEventListener(_el$81, "click", () => props.onClear());
-              createRenderEffect(() => _el$81.innerHTML = icons.trash);
-              return _el$81;
-            })();
-          })(), _el$52);
-          addEventListener(_el$52, "click", () => props.onToggleSettings());
-          addEventListener(_el$53, "click", () => props.onToggleExpand());
-          createRenderEffect((_p$) => {
-            var _v$19 = `pp-mode-tab ${props.mode === "select" ? "pp-mode-tab--active" : ""}`, _v$20 = props.mode === "select", _v$21 = icons.crosshair, _v$22 = `pp-mode-tab ${props.mode === "draw" ? "pp-mode-tab--active" : ""}`, _v$23 = props.mode === "draw", _v$24 = icons.pencil, _v$25 = `pp-mode-tab ${props.mode === "queue" ? "pp-mode-tab--active" : ""}`, _v$26 = props.mode === "queue", _v$27 = icons.stack, _v$28 = icons.send, _v$29 = icons.copy, _v$30 = icons.settings, _v$31 = icons.x;
-            _v$19 !== _p$.e && className(_el$9, _p$.e = _v$19);
-            _v$20 !== _p$.t && setAttribute(_el$9, "aria-selected", _p$.t = _v$20);
-            _v$21 !== _p$.a && (_el$0.innerHTML = _p$.a = _v$21);
-            _v$22 !== _p$.o && className(_el$1, _p$.o = _v$22);
-            _v$23 !== _p$.i && setAttribute(_el$1, "aria-selected", _p$.i = _v$23);
-            _v$24 !== _p$.n && (_el$10.innerHTML = _p$.n = _v$24);
-            _v$25 !== _p$.s && className(_el$11, _p$.s = _v$25);
-            _v$26 !== _p$.h && setAttribute(_el$11, "aria-selected", _p$.h = _v$26);
-            _v$27 !== _p$.r && (_el$12.innerHTML = _p$.r = _v$27);
-            _v$28 !== _p$.d && (_el$50.innerHTML = _p$.d = _v$28);
-            _v$29 !== _p$.l && (_el$51.innerHTML = _p$.l = _v$29);
-            _v$30 !== _p$.u && (_el$52.innerHTML = _p$.u = _v$30);
-            _v$31 !== _p$.c && (_el$53.innerHTML = _p$.c = _v$31);
-            return _p$;
-          }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0,
-            n: void 0,
-            s: void 0,
-            h: void 0,
-            r: void 0,
-            d: void 0,
-            l: void 0,
-            u: void 0,
-            c: void 0
-          });
-          return _el$5;
-        })()
-      );
-    })());
-    createRenderEffect((_p$) => {
-      var _v$ = `pp-toolbar ${props.expanded ? "pp-toolbar--expanded" : "pp-toolbar--collapsed"}`, _v$2 = {
-        ...props.expanded ? {
-          bottom: `${EDGE_GAP}px`,
-          right: `${toolbarRight()}px`
-        } : {
-          right: `${toolbarRight()}px`,
-          bottom: `${pos().bottom}px`
-        }
-      };
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _p$.t = style(_el$, _v$2, _p$.t);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
-};
-delegateEvents(["mousedown"]);
-
-// src/ui/components/OverlayCanvas.tsx
-var _tmpl$21 = /* @__PURE__ */ template(`<canvas style=position:fixed;top:0;left:0;z-index:2147483645>`);
-function lerp(start, end, t) {
-  return start + (end - start) * t;
-}
-var OverlayCanvas = (props) => {
-  let canvasRef;
-  let animFrameId = null;
-  let currentRect = {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  };
-  let targetRect = null;
-  const LERP_SPEED = 0.25;
-  function resizeCanvas() {
-    if (!canvasRef) return;
-    const dpr = window.devicePixelRatio || 1;
-    canvasRef.width = window.innerWidth * dpr;
-    canvasRef.height = window.innerHeight * dpr;
-    canvasRef.style.width = `${window.innerWidth}px`;
-    canvasRef.style.height = `${window.innerHeight}px`;
-    const ctx = canvasRef.getContext("2d");
-    if (ctx) ctx.scale(dpr, dpr);
-  }
-  function drawStroke(ctx, stroke) {
-    if (stroke.points.length < 1) return;
-    ctx.strokeStyle = stroke.color;
-    ctx.lineWidth = stroke.lineWidth;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    ctx.setLineDash([]);
-    if (stroke.type === "freehand") {
-      ctx.beginPath();
-      ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
-      for (let i = 1; i < stroke.points.length; i++) {
-        ctx.lineTo(stroke.points[i].x, stroke.points[i].y);
-      }
-      ctx.stroke();
-    } else if (stroke.type === "arrow") {
-      if (stroke.points.length < 2) return;
-      const start = stroke.points[0];
-      const end = stroke.points[stroke.points.length - 1];
-      ctx.beginPath();
-      ctx.moveTo(start.x, start.y);
-      ctx.lineTo(end.x, end.y);
-      ctx.stroke();
-      const angle = Math.atan2(end.y - start.y, end.x - start.x);
-      const headLen = 12 + stroke.lineWidth * 2;
-      ctx.beginPath();
-      ctx.moveTo(end.x, end.y);
-      ctx.lineTo(end.x - headLen * Math.cos(angle - Math.PI / 6), end.y - headLen * Math.sin(angle - Math.PI / 6));
-      ctx.moveTo(end.x, end.y);
-      ctx.lineTo(end.x - headLen * Math.cos(angle + Math.PI / 6), end.y - headLen * Math.sin(angle + Math.PI / 6));
-      ctx.stroke();
-    } else if (stroke.type === "circle") {
-      if (stroke.points.length < 2) return;
-      const start = stroke.points[0];
-      const end = stroke.points[stroke.points.length - 1];
-      const rx = Math.abs(end.x - start.x) / 2;
-      const ry = Math.abs(end.y - start.y) / 2;
-      const cx = (start.x + end.x) / 2;
-      const cy = (start.y + end.y) / 2;
-      ctx.beginPath();
-      ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
-      ctx.stroke();
-    } else if (stroke.type === "rect") {
-      if (stroke.points.length < 2) return;
-      const start = stroke.points[0];
-      const end = stroke.points[stroke.points.length - 1];
-      ctx.strokeRect(start.x, start.y, end.x - start.x, end.y - start.y);
-    }
-  }
-  function drawTextNote(ctx, note) {
-    const fontSize = 13;
-    const padding = 6;
-    ctx.font = `500 ${fontSize}px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`;
-    const metrics = ctx.measureText(note.text);
-    const textWidth = metrics.width;
-    const textHeight = fontSize + 2;
-    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
-    const bgX = note.x - 2;
-    const bgY = note.y - textHeight - padding / 2;
-    const bgW = textWidth + padding * 2;
-    const bgH = textHeight + padding;
-    const r = 4;
-    ctx.beginPath();
-    ctx.moveTo(bgX + r, bgY);
-    ctx.lineTo(bgX + bgW - r, bgY);
-    ctx.quadraticCurveTo(bgX + bgW, bgY, bgX + bgW, bgY + r);
-    ctx.lineTo(bgX + bgW, bgY + bgH - r);
-    ctx.quadraticCurveTo(bgX + bgW, bgY + bgH, bgX + bgW - r, bgY + bgH);
-    ctx.lineTo(bgX + r, bgY + bgH);
-    ctx.quadraticCurveTo(bgX, bgY + bgH, bgX, bgY + bgH - r);
-    ctx.lineTo(bgX, bgY + r);
-    ctx.quadraticCurveTo(bgX, bgY, bgX + r, bgY);
-    ctx.closePath();
-    ctx.fill();
-    ctx.fillStyle = note.color;
-    ctx.beginPath();
-    ctx.arc(bgX + padding, bgY + bgH / 2, 3, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.fillStyle = "#ffffff";
-    ctx.fillText(note.text, bgX + padding + 10, note.y - 2);
-  }
-  function draw() {
-    if (!canvasRef) return;
-    const ctx = canvasRef.getContext("2d");
-    if (!ctx) return;
-    const dpr = window.devicePixelRatio || 1;
-    ctx.clearRect(0, 0, canvasRef.width / dpr, canvasRef.height / dpr);
-    if (props.active && !props.drawMode && props.hoveredRect) {
-      targetRect = {
-        x: props.hoveredRect.x,
-        y: props.hoveredRect.y,
-        width: props.hoveredRect.width,
-        height: props.hoveredRect.height
-      };
-    } else if (props.active && !props.drawMode) {
-      targetRect = null;
-    }
-    if (props.active && !props.drawMode && targetRect) {
-      currentRect.x = lerp(currentRect.x, targetRect.x, LERP_SPEED);
-      currentRect.y = lerp(currentRect.y, targetRect.y, LERP_SPEED);
-      currentRect.width = lerp(currentRect.width, targetRect.width, LERP_SPEED);
-      currentRect.height = lerp(currentRect.height, targetRect.height, LERP_SPEED);
-      ctx.strokeStyle = "rgba(59, 130, 246, 0.8)";
-      ctx.lineWidth = 2;
-      ctx.setLineDash([]);
-      ctx.strokeRect(currentRect.x, currentRect.y, currentRect.width, currentRect.height);
-      ctx.fillStyle = "rgba(59, 130, 246, 0.06)";
-      ctx.fillRect(currentRect.x, currentRect.y, currentRect.width, currentRect.height);
-    }
-    if (props.active && !props.drawMode && props.dragRect) {
-      ctx.strokeStyle = "rgba(59, 130, 246, 0.6)";
-      ctx.lineWidth = 1;
-      ctx.setLineDash([4, 4]);
-      ctx.strokeRect(props.dragRect.x, props.dragRect.y, props.dragRect.width, props.dragRect.height);
-      ctx.fillStyle = "rgba(59, 130, 246, 0.08)";
-      ctx.fillRect(props.dragRect.x, props.dragRect.y, props.dragRect.width, props.dragRect.height);
-    }
-    for (const stroke of props.drawStrokes) {
-      drawStroke(ctx, stroke);
-    }
-    if (props.currentStroke) {
-      drawStroke(ctx, props.currentStroke);
-    }
-    for (const note of props.textNotes) {
-      drawTextNote(ctx, note);
-    }
-    animFrameId = requestAnimationFrame(draw);
-  }
-  function handleMouseDown(e) {
-    if (!props.drawMode) return;
-    if (props.drawTool === "text") {
-      props.onTextPlace(e.clientX, e.clientY);
-    } else {
-      props.onDrawStart(e.clientX, e.clientY);
-    }
-  }
-  function handleMouseMove(e) {
-    if (!props.drawMode) return;
-    props.onDrawMove(e.clientX, e.clientY);
-  }
-  function handleMouseUp(_e) {
-    if (!props.drawMode) return;
-    props.onDrawEnd();
-  }
-  function handleTouchStart(e) {
-    if (!props.drawMode) return;
-    e.preventDefault();
-    const touch = e.touches[0];
-    if (props.drawTool === "text") {
-      props.onTextPlace(touch.clientX, touch.clientY);
-    } else {
-      props.onDrawStart(touch.clientX, touch.clientY);
-    }
-  }
-  function handleTouchMove(e) {
-    if (!props.drawMode) return;
-    e.preventDefault();
-    const touch = e.touches[0];
-    props.onDrawMove(touch.clientX, touch.clientY);
-  }
-  function handleTouchEnd(e) {
-    if (!props.drawMode) return;
-    e.preventDefault();
-    props.onDrawEnd();
-  }
-  onMount(() => {
-    resizeCanvas();
-    window.addEventListener("resize", resizeCanvas);
-    animFrameId = requestAnimationFrame(draw);
-  });
-  onCleanup(() => {
-    window.removeEventListener("resize", resizeCanvas);
-    if (animFrameId !== null) {
-      cancelAnimationFrame(animFrameId);
-    }
-  });
-  return (() => {
-    var _el$ = _tmpl$21();
-    _el$.$$touchend = handleTouchEnd;
-    _el$.$$touchmove = handleTouchMove;
-    _el$.$$touchstart = handleTouchStart;
-    _el$.$$mouseup = handleMouseUp;
-    _el$.$$mousemove = handleMouseMove;
-    _el$.$$mousedown = handleMouseDown;
-    var _ref$ = canvasRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : canvasRef = _el$;
-    createRenderEffect((_p$) => {
-      var _v$ = props.drawMode ? "auto" : "none", _v$2 = props.drawMode ? props.drawTool === "text" ? "text" : "crosshair" : "default";
-      _v$ !== _p$.e && setStyleProperty(_el$, "pointer-events", _p$.e = _v$);
-      _v$2 !== _p$.t && setStyleProperty(_el$, "cursor", _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
-};
-delegateEvents(["mousedown", "mousemove", "mouseup", "touchstart", "touchmove", "touchend"]);
-
-// src/ui/components/PinPopup.tsx
-var _tmpl$22 = /* @__PURE__ */ template(`<div class=pp-popup><div class=pp-popup__input-row><textarea class=pp-popup__textarea placeholder="Add your feedback..."></textarea></div><div class=pp-popup__actions><button class="pp-btn pp-btn--ghost"title="Send 'Fix this' to agent"><span style=display:inline-flex></span>Fix</button><div style=flex:1></div><button class=pp-btn>Cancel</button><button class="pp-btn pp-btn--primary">`);
-var _tmpl$23 = /* @__PURE__ */ template(`<div class=pp-popup__header><span class=pp-popup__name></span><span>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div><div class=pp-popup__details-inner><div class=pp-popup__element-info>`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=pp-popup__source><span style=display:inline-flex;vertical-align:middle></span> `);
-var _tmpl$52 = /* @__PURE__ */ template(`<div class=pp-popup__component>`);
-var _tmpl$62 = /* @__PURE__ */ template(`<div class=pp-popup__element-info>`);
-var _tmpl$72 = /* @__PURE__ */ template(`<button>`);
-var _tmpl$82 = /* @__PURE__ */ template(`<button class=pp-btn title="Add to queue"><span style=display:inline-flex></span>Queue`);
-function getSpeechRecognition() {
-  const w = window;
-  return w.SpeechRecognition || w.webkitSpeechRecognition || null;
-}
-var PinPopup = (props) => {
-  const [comment, setComment] = createSignal(props.initialComment || "");
-  const [showDetails, setShowDetails] = createSignal(false);
-  const [isRecording, setIsRecording] = createSignal(false);
-  let textareaRef;
-  let recognitionRef = null;
-  const compact = () => props.compactPopup ?? true;
-  const hasSpeechAPI = !!getSpeechRecognition();
-  const displayName = () => {
-    if (props.context.framework?.componentPath) {
-      return props.context.framework.componentPath;
-    }
-    return `<${props.context.element.tagName.toLowerCase()}>`;
-  };
-  const popupPosition = () => {
-    const rect = props.context.element.boundingRect;
-    const estimatedHeight = compact() && showDetails() ? 260 : 220;
-    const popupX = Math.min(rect.x, window.innerWidth - 380);
-    const popupY = rect.y + rect.height + 8;
-    const adjustedY = popupY + estimatedHeight > window.innerHeight ? rect.y - estimatedHeight - 8 : popupY;
-    return {
-      x: Math.max(8, popupX),
-      y: Math.max(8, adjustedY)
-    };
-  };
-  async function openFileHandler() {
-    try {
-      const file = props.context.framework?.sourceFile;
-      if (!file) return;
-      const {
-        openFile
-      } = await import("./open-file-RQVHOCXI.js");
-      openFile(file);
-    } catch {
-    }
-  }
-  function toggleRecording() {
-    if (isRecording()) {
-      stopRecording();
-    } else {
-      startRecording();
-    }
-  }
-  function startRecording() {
-    const SpeechRecognitionClass = getSpeechRecognition();
-    if (!SpeechRecognitionClass) return;
-    const recognition = new SpeechRecognitionClass();
-    recognition.continuous = true;
-    recognition.interimResults = true;
-    recognition.lang = "en-US";
-    let finalTranscript = "";
-    recognition.onresult = (event) => {
-      let interim = "";
-      for (let i = event.resultIndex; i < event.results.length; i++) {
-        const transcript = event.results[i][0].transcript;
-        if (event.results[i].isFinal) {
-          finalTranscript += transcript;
-        } else {
-          interim = transcript;
-        }
-      }
-      const current = comment();
-      const separator = current && !current.endsWith(" ") ? " " : "";
-      setComment(current + separator + finalTranscript + interim);
-      finalTranscript = "";
-      if (textareaRef) {
-        textareaRef.style.height = "auto";
-        textareaRef.style.height = Math.min(textareaRef.scrollHeight, 120) + "px";
-      }
-    };
-    recognition.onerror = () => {
-      setIsRecording(false);
-    };
-    recognition.onend = () => {
-      setIsRecording(false);
-    };
-    recognition.start();
-    recognitionRef = recognition;
-    setIsRecording(true);
-  }
-  function stopRecording() {
-    recognitionRef?.stop();
-    recognitionRef = null;
-    setIsRecording(false);
-  }
+var Toolbar = (props) => {
+  const [pos, setPos] = createSignal(props.position ? {
+    right: window.innerWidth - props.position.x,
+    bottom: window.innerHeight - props.position.y
+  } : {
+    right: EDGE_GAP,
+    bottom: EDGE_GAP
+  });
+  const [reservedRight, setReservedRight] = createSignal(0);
+  const [dragStart, setDragStart] = createSignal({
+    x: 0,
+    y: 0,
+    right: 0,
+    bottom: 0
+  });
+  const [didDrag, setDidDrag] = createSignal(false);
   onMount(() => {
-    textareaRef?.focus();
-    if (props.initialComment && textareaRef) {
-      textareaRef.selectionStart = textareaRef.value.length;
-    }
-    const onEsc = (e) => {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        stopRecording();
-        props.onCancel();
+    if (typeof window === "undefined") return;
+    let resizeObserver;
+    const updateReservedRight = () => {
+      setReservedRight(getVisibleRightSidebarInset());
+      resizeObserver?.disconnect();
+      if (typeof ResizeObserver === "undefined") return;
+      resizeObserver = new ResizeObserver(() => {
+        setReservedRight(getVisibleRightSidebarInset());
+      });
+      for (const panel of document.querySelectorAll(AGENT_SIDEBAR_SELECTOR)) {
+        resizeObserver.observe(panel);
       }
     };
-    document.addEventListener("keydown", onEsc, true);
+    updateReservedRight();
+    const mutationObserver = new MutationObserver(updateReservedRight);
+    mutationObserver.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["class", "style", "aria-hidden"],
+      childList: true,
+      subtree: true
+    });
+    window.addEventListener("resize", updateReservedRight);
     onCleanup(() => {
-      document.removeEventListener("keydown", onEsc, true);
-      stopRecording();
+      mutationObserver.disconnect();
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", updateReservedRight);
     });
   });
-  function handleSubmit() {
-    const text = comment().trim();
-    if (!text) return;
-    stopRecording();
-    props.onAdd(text);
-  }
-  function handleQueue() {
-    const text = comment().trim();
-    if (!text) return;
-    stopRecording();
-    props.onQueue?.(text);
+  const toolbarRight = () => {
+    const toolbarWidth = props.expanded ? EXPANDED_TOOLBAR_WIDTH : COLLAPSED_TOOLBAR_SIZE;
+    return clampRightOffset((props.expanded ? EDGE_GAP : pos().right) + reservedRight(), toolbarWidth);
+  };
+  function handleMouseDown(e) {
+    if (props.expanded) return;
+    setDidDrag(false);
+    setDragStart({
+      x: e.clientX,
+      y: e.clientY,
+      right: pos().right,
+      bottom: pos().bottom
+    });
+    const handleMove = (e2) => {
+      setDidDrag(true);
+      const start = dragStart();
+      const dx = e2.clientX - start.x;
+      const dy = e2.clientY - start.y;
+      const maxRight = Math.max(0, window.innerWidth - reservedRight() - COLLAPSED_TOOLBAR_SIZE);
+      setPos({
+        right: Math.max(0, Math.min(maxRight, start.right - dx)),
+        bottom: Math.max(0, Math.min(window.innerHeight - COLLAPSED_TOOLBAR_SIZE, start.bottom - dy))
+      });
+    };
+    const handleUp = () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
   }
-  function handleFixThis() {
-    const text = comment().trim() || `Fix this ${displayName()}`;
-    stopRecording();
-    props.onFixThis?.(text);
+  function handleClick() {
+    if (props.expanded) return;
+    if (didDrag()) return;
+    props.onToggleExpand();
   }
-  function handleKeyDown(e) {
-    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      handleSubmit();
-    }
-    if (e.key === "Escape") {
-      stopRecording();
-      props.onCancel();
+  const queueSummary = () => {
+    const q = props.queue;
+    let draws = 0;
+    let clicks = 0;
+    for (const item of q) {
+      if (item.drawings?.length || item.textNotes?.length) draws++;
+      if (item.pin) clicks++;
     }
-  }
-  function handleAutoGrow(e) {
-    const el = e.currentTarget;
-    setComment(el.value);
-    el.style.height = "auto";
-    el.style.height = Math.min(el.scrollHeight, 120) + "px";
-  }
+    const parts = [];
+    if (draws > 0) parts.push(`Draw x${draws}`);
+    if (clicks > 0) parts.push(`Click x${clicks}`);
+    return parts.join(" / ") || "Empty";
+  };
+  const totalBadgeCount = () => props.pins.length + props.queue.length + props.drawStrokeCount;
   return (() => {
-    var _el$ = _tmpl$22(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling;
+    var _el$ = _tmpl$12();
+    addEventListener(_el$, "click", handleClick);
+    addEventListener(_el$, "mousedown", props.expanded ? void 0 : handleMouseDown, true);
     insert(_el$, (() => {
-      var _c$ = memo(() => !!compact());
+      var _c$ = memo(() => !!!props.expanded);
       return () => _c$() ? (
-        /* Compact mode — friendly name + collapsible details */
-        [(() => {
-          var _el$0 = _tmpl$23(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
-          addEventListener(_el$0, "click", () => setShowDetails(!showDetails()));
-          insert(_el$1, displayName);
-          createRenderEffect((_p$) => {
-            var _v$5 = `pp-popup__chevron ${showDetails() ? "pp-popup__chevron--open" : ""}`, _v$6 = icons.chevronDown, _v$7 = showDetails();
-            _v$5 !== _p$.e && className(_el$10, _p$.e = _v$5);
-            _v$6 !== _p$.t && (_el$10.innerHTML = _p$.t = _v$6);
-            _v$7 !== _p$.a && setAttribute(_el$10, "aria-expanded", _p$.a = _v$7);
-            return _p$;
-          }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-          });
-          return _el$0;
-        })(), (() => {
-          var _el$11 = _tmpl$32(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild;
-          insert(_el$13, () => props.context.cssSelector);
-          insert(_el$12, createComponent(Show, {
+        /* Collapsed pill */
+        (() => {
+          var _el$2 = _tmpl$23(), _el$3 = _el$2.firstChild;
+          insert(_el$2, (() => {
+            var _c$2 = memo(() => totalBadgeCount() > 0);
+            return () => _c$2() && (() => {
+              var _el$4 = _tmpl$33();
+              insert(_el$4, totalBadgeCount);
+              return _el$4;
+            })();
+          })(), _el$3);
+          createRenderEffect(() => _el$3.innerHTML = icons.pin);
+          return _el$2;
+        })()
+      ) : (
+        /* Expanded toolbar */
+        (() => {
+          var _el$5 = _tmpl$92(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$9.nextSibling, _el$10 = _el$1.firstChild, _el$11 = _el$1.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$49 = _el$8.nextSibling, _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling, _el$52 = _el$51.nextSibling, _el$53 = _el$52.nextSibling;
+          addEventListener(_el$5, "click", (e) => e.stopPropagation());
+          insert(_el$7, () => props.author || "Pinpoint");
+          insert(_el$6, (() => {
+            var _c$3 = memo(() => props.queue.length > 0);
+            return () => _c$3() && (() => {
+              var _el$54 = _tmpl$0();
+              insert(_el$54, () => props.queue.length);
+              return _el$54;
+            })();
+          })(), null);
+          addEventListener(_el$9, "click", () => props.onModeChange("select"));
+          addEventListener(_el$1, "click", () => props.onModeChange("draw"));
+          addEventListener(_el$11, "click", () => props.onModeChange("queue"));
+          insert(_el$11, (() => {
+            var _c$4 = memo(() => props.queue.length > 0);
+            return () => _c$4() && (() => {
+              var _el$55 = _tmpl$1();
+              insert(_el$55, () => props.queue.length);
+              return _el$55;
+            })();
+          })(), null);
+          insert(_el$5, createComponent(Show, {
+            get when() {
+              return props.mode === "select";
+            },
+            get children() {
+              return [memo(() => memo(() => props.pins.length === 0)() && (() => {
+                var _el$56 = _tmpl$102(), _el$57 = _el$56.firstChild;
+                createRenderEffect(() => _el$57.innerHTML = icons.crosshair);
+                return _el$56;
+              })()), memo(() => memo(() => props.pins.length > 0)() && (() => {
+                var _el$58 = _tmpl$112();
+                insert(_el$58, createComponent(For, {
+                  get each() {
+                    return props.pins;
+                  },
+                  children: (pin, index) => (() => {
+                    var _el$59 = _tmpl$122(), _el$60 = _el$59.firstChild, _el$61 = _el$60.nextSibling, _el$62 = _el$61.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.nextSibling;
+                    addEventListener(_el$59, "click", () => props.onEditPin(pin));
+                    insert(_el$61, () => index() + 1);
+                    insert(_el$63, () => pin.comment || _tmpl$13());
+                    addEventListener(_el$64, "click", (e) => {
+                      e.stopPropagation();
+                      props.onTogglePinSelect(pin);
+                    });
+                    addEventListener(_el$65, "click", (e) => {
+                      e.stopPropagation();
+                      props.onRemovePin(pin.id);
+                    });
+                    createRenderEffect((_p$) => {
+                      var _v$32 = `pp-pin-item__status pp-pin-item__status--${pin.status.state}`, _v$33 = props.selectedPinIds.has(pin.id) ? "Deselect" : "Select for send", _v$34 = props.selectedPinIds.has(pin.id) ? "Deselect" : "Select for send", _v$35 = props.selectedPinIds.has(pin.id) ? icons.checkSquare : icons.squareEmpty, _v$36 = props.selectedPinIds.has(pin.id) ? "var(--pp-accent)" : "var(--pp-text-muted)", _v$37 = icons.minus;
+                      _v$32 !== _p$.e && className(_el$60, _p$.e = _v$32);
+                      _v$33 !== _p$.t && setAttribute(_el$64, "title", _p$.t = _v$33);
+                      _v$34 !== _p$.a && setAttribute(_el$64, "aria-label", _p$.a = _v$34);
+                      _v$35 !== _p$.o && (_el$64.innerHTML = _p$.o = _v$35);
+                      _v$36 !== _p$.i && setStyleProperty(_el$64, "color", _p$.i = _v$36);
+                      _v$37 !== _p$.n && (_el$65.innerHTML = _p$.n = _v$37);
+                      return _p$;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0,
+                      o: void 0,
+                      i: void 0,
+                      n: void 0
+                    });
+                    return _el$59;
+                  })()
+                }));
+                return _el$58;
+              })()), createComponent(Show, {
+                get when() {
+                  return props.selectedPinIds.size > 0;
+                },
+                get children() {
+                  var _el$14 = _tmpl$42(), _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$18 = _el$16.nextSibling, _el$17 = _el$18.nextSibling;
+                  addEventListener(_el$14, "click", () => props.onSendSelected());
+                  insert(_el$14, () => props.selectedPinIds.size, _el$18);
+                  createRenderEffect(() => _el$15.innerHTML = icons.send);
+                  return _el$14;
+                }
+              })];
+            }
+          }), _el$49);
+          insert(_el$5, createComponent(Show, {
             get when() {
-              return props.context.framework?.sourceFile;
+              return props.mode === "draw";
             },
-            children: (file) => (() => {
-              var _el$14 = _tmpl$42(), _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling;
-              addEventListener(_el$14, "click", openFileHandler);
-              insert(_el$14, () => file().split("/").pop(), null);
+            get children() {
+              return [(() => {
+                var _el$19 = _tmpl$52(), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$21.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.nextSibling, _el$25 = _el$24.nextSibling, _el$26 = _el$25.nextSibling, _el$27 = _el$26.nextSibling;
+                addEventListener(_el$20, "click", () => props.onDrawToolChange("freehand"));
+                addEventListener(_el$21, "click", () => props.onDrawToolChange("arrow"));
+                addEventListener(_el$22, "click", () => props.onDrawToolChange("circle"));
+                addEventListener(_el$23, "click", () => props.onDrawToolChange("rect"));
+                addEventListener(_el$24, "click", () => props.onDrawToolChange("text"));
+                addEventListener(_el$26, "click", () => props.onDrawUndo());
+                addEventListener(_el$27, "click", () => props.onDrawClear());
+                createRenderEffect((_p$) => {
+                  var _v$3 = `pp-draw-tool ${props.drawTool === "freehand" ? "pp-draw-tool--active" : ""}`, _v$4 = icons.pencil, _v$5 = `pp-draw-tool ${props.drawTool === "arrow" ? "pp-draw-tool--active" : ""}`, _v$6 = icons.arrowUpRight, _v$7 = `pp-draw-tool ${props.drawTool === "circle" ? "pp-draw-tool--active" : ""}`, _v$8 = icons.circle, _v$9 = `pp-draw-tool ${props.drawTool === "rect" ? "pp-draw-tool--active" : ""}`, _v$0 = icons.square, _v$1 = `pp-draw-tool ${props.drawTool === "text" ? "pp-draw-tool--active" : ""}`, _v$10 = icons.typography, _v$11 = icons.undo, _v$12 = props.drawStrokeCount === 0, _v$13 = icons.trash, _v$14 = props.drawStrokeCount === 0;
+                  _v$3 !== _p$.e && className(_el$20, _p$.e = _v$3);
+                  _v$4 !== _p$.t && (_el$20.innerHTML = _p$.t = _v$4);
+                  _v$5 !== _p$.a && className(_el$21, _p$.a = _v$5);
+                  _v$6 !== _p$.o && (_el$21.innerHTML = _p$.o = _v$6);
+                  _v$7 !== _p$.i && className(_el$22, _p$.i = _v$7);
+                  _v$8 !== _p$.n && (_el$22.innerHTML = _p$.n = _v$8);
+                  _v$9 !== _p$.s && className(_el$23, _p$.s = _v$9);
+                  _v$0 !== _p$.h && (_el$23.innerHTML = _p$.h = _v$0);
+                  _v$1 !== _p$.r && className(_el$24, _p$.r = _v$1);
+                  _v$10 !== _p$.d && (_el$24.innerHTML = _p$.d = _v$10);
+                  _v$11 !== _p$.l && (_el$26.innerHTML = _p$.l = _v$11);
+                  _v$12 !== _p$.u && (_el$26.disabled = _p$.u = _v$12);
+                  _v$13 !== _p$.c && (_el$27.innerHTML = _p$.c = _v$13);
+                  _v$14 !== _p$.w && (_el$27.disabled = _p$.w = _v$14);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0,
+                  i: void 0,
+                  n: void 0,
+                  s: void 0,
+                  h: void 0,
+                  r: void 0,
+                  d: void 0,
+                  l: void 0,
+                  u: void 0,
+                  c: void 0,
+                  w: void 0
+                });
+                return _el$19;
+              })(), (() => {
+                var _el$28 = _tmpl$62(), _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling;
+                insert(_el$29, createComponent(For, {
+                  each: DRAW_COLORS,
+                  children: (c) => (() => {
+                    var _el$67 = _tmpl$14();
+                    addEventListener(_el$67, "click", () => props.onDrawColorChange(c.color));
+                    createRenderEffect((_p$) => {
+                      var _v$38 = `pp-color-swatch ${props.drawColor === c.color ? "pp-color-swatch--active" : ""}`, _v$39 = c.color, _v$40 = c.name;
+                      _v$38 !== _p$.e && className(_el$67, _p$.e = _v$38);
+                      _v$39 !== _p$.t && setStyleProperty(_el$67, "background", _p$.t = _v$39);
+                      _v$40 !== _p$.a && setAttribute(_el$67, "title", _p$.a = _v$40);
+                      return _p$;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0
+                    });
+                    return _el$67;
+                  })()
+                }));
+                insert(_el$30, createComponent(For, {
+                  each: LINE_WIDTHS,
+                  children: (w) => (() => {
+                    var _el$68 = _tmpl$15(), _el$69 = _el$68.firstChild;
+                    addEventListener(_el$68, "click", () => props.onDrawLineWidthChange(w.width));
+                    createRenderEffect((_p$) => {
+                      var _v$41 = `pp-width-btn ${props.drawLineWidth === w.width ? "pp-width-btn--active" : ""}`, _v$42 = w.name, _v$43 = `${w.width}px`, _v$44 = props.drawColor, _v$45 = `${w.width / 2}px`;
+                      _v$41 !== _p$.e && className(_el$68, _p$.e = _v$41);
+                      _v$42 !== _p$.t && setAttribute(_el$68, "title", _p$.t = _v$42);
+                      _v$43 !== _p$.a && setStyleProperty(_el$69, "height", _p$.a = _v$43);
+                      _v$44 !== _p$.o && setStyleProperty(_el$69, "background", _p$.o = _v$44);
+                      _v$45 !== _p$.i && setStyleProperty(_el$69, "border-radius", _p$.i = _v$45);
+                      return _p$;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0,
+                      o: void 0,
+                      i: void 0
+                    });
+                    return _el$68;
+                  })()
+                }));
+                return _el$28;
+              })(), createComponent(Show, {
+                get when() {
+                  return props.drawStrokeCount > 0;
+                },
+                get children() {
+                  var _el$31 = _tmpl$72(), _el$32 = _el$31.firstChild;
+                  insert(_el$31, () => props.drawStrokeCount, _el$32);
+                  insert(_el$31, () => props.drawStrokeCount !== 1 ? "s" : "", null);
+                  return _el$31;
+                }
+              })];
+            }
+          }), _el$49);
+          insert(_el$5, createComponent(Show, {
+            get when() {
+              return props.mode === "queue";
+            },
+            get children() {
+              return memo(() => props.queue.length === 0)() ? _tmpl$16() : [(() => {
+                var _el$71 = _tmpl$17();
+                insert(_el$71, queueSummary);
+                return _el$71;
+              })(), (() => {
+                var _el$72 = _tmpl$112();
+                insert(_el$72, createComponent(For, {
+                  get each() {
+                    return props.queue;
+                  },
+                  children: (item, index) => (() => {
+                    var _el$77 = _tmpl$19(), _el$78 = _el$77.firstChild, _el$79 = _el$78.nextSibling, _el$80 = _el$79.firstChild;
+                    insert(_el$78, () => index() + 1);
+                    insert(_el$80, (() => {
+                      var _c$6 = memo(() => !!item.pin);
+                      return () => _c$6() ? item.pin.comment || "Pin annotation" : `Drawing (${(item.drawings?.length || 0) + (item.textNotes?.length || 0)} items)`;
+                    })());
+                    return _el$77;
+                  })()
+                }));
+                return _el$72;
+              })(), (() => {
+                var _el$73 = _tmpl$18(), _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$76 = _el$75.firstChild;
+                addEventListener(_el$74, "click", () => props.onQueueClear());
+                addEventListener(_el$75, "click", () => props.onQueueSend());
+                createRenderEffect(() => _el$76.innerHTML = icons.send);
+                return _el$73;
+              })()];
+            }
+          }), _el$49);
+          insert(_el$5, createComponent(Show, {
+            get when() {
+              return props.showSettings;
+            },
+            get children() {
+              var _el$33 = _tmpl$82(), _el$34 = _el$33.firstChild, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$34.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$37.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling, _el$43 = _el$40.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$43.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling;
+              _el$36.addEventListener("change", (e) => props.onOutputFormatChange(e.currentTarget.value));
+              addEventListener(_el$39, "click", () => props.onAutoSubmitChange(!props.autoSubmit));
+              addEventListener(_el$42, "click", () => props.onClearOnSendChange(!props.clearOnSend));
+              addEventListener(_el$45, "click", () => props.onBlockInteractionsChange(!props.blockInteractions));
+              addEventListener(_el$48, "click", () => props.onCompactPopupChange(!props.compactPopup));
               createRenderEffect((_p$) => {
-                var _v$8 = file(), _v$9 = icons.fileCode;
-                _v$8 !== _p$.e && setAttribute(_el$14, "title", _p$.e = _v$8);
-                _v$9 !== _p$.t && (_el$15.innerHTML = _p$.t = _v$9);
+                var _v$15 = `pp-toggle ${props.autoSubmit ? "pp-toggle--active" : ""}`, _v$16 = `pp-toggle ${props.clearOnSend ? "pp-toggle--active" : ""}`, _v$17 = `pp-toggle ${props.blockInteractions ? "pp-toggle--active" : ""}`, _v$18 = `pp-toggle ${props.compactPopup ? "pp-toggle--active" : ""}`;
+                _v$15 !== _p$.e && className(_el$39, _p$.e = _v$15);
+                _v$16 !== _p$.t && className(_el$42, _p$.t = _v$16);
+                _v$17 !== _p$.a && className(_el$45, _p$.a = _v$17);
+                _v$18 !== _p$.o && className(_el$48, _p$.o = _v$18);
                 return _p$;
               }, {
                 e: void 0,
-                t: void 0
+                t: void 0,
+                a: void 0,
+                o: void 0
               });
-              return _el$14;
-            })()
-          }), null);
-          createRenderEffect(() => className(_el$11, `pp-popup__details ${showDetails() ? "pp-popup__details--open" : ""}`));
-          return _el$11;
-        })()]
-      ) : (
-        /* Expanded mode — all info visible */
-        [(() => {
-          var _el$17 = _tmpl$52();
-          insert(_el$17, displayName);
-          return _el$17;
-        })(), (() => {
-          var _el$18 = _tmpl$62();
-          insert(_el$18, () => props.context.cssSelector);
-          return _el$18;
-        })(), createComponent(Show, {
-          get when() {
-            return props.context.framework?.sourceFile;
-          },
-          children: (file) => (() => {
-            var _el$19 = _tmpl$42(), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling;
-            addEventListener(_el$19, "click", openFileHandler);
-            insert(_el$19, () => file().split("/").pop(), null);
-            createRenderEffect((_p$) => {
-              var _v$0 = file(), _v$1 = icons.fileCode;
-              _v$0 !== _p$.e && setAttribute(_el$19, "title", _p$.e = _v$0);
-              _v$1 !== _p$.t && (_el$20.innerHTML = _p$.t = _v$1);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            return _el$19;
-          })()
-        })]
+              createRenderEffect(() => _el$36.value = props.outputFormat);
+              return _el$33;
+            }
+          }), _el$49);
+          addEventListener(_el$50, "click", () => props.onSend());
+          addEventListener(_el$51, "click", () => props.onCopy());
+          insert(_el$49, (() => {
+            var _c$5 = memo(() => props.pins.length > 0);
+            return () => _c$5() && (() => {
+              var _el$81 = _tmpl$20();
+              addEventListener(_el$81, "click", () => props.onClear());
+              createRenderEffect(() => _el$81.innerHTML = icons.trash);
+              return _el$81;
+            })();
+          })(), _el$52);
+          addEventListener(_el$52, "click", () => props.onToggleSettings());
+          addEventListener(_el$53, "click", () => props.onToggleExpand());
+          createRenderEffect((_p$) => {
+            var _v$19 = `pp-mode-tab ${props.mode === "select" ? "pp-mode-tab--active" : ""}`, _v$20 = props.mode === "select", _v$21 = icons.crosshair, _v$22 = `pp-mode-tab ${props.mode === "draw" ? "pp-mode-tab--active" : ""}`, _v$23 = props.mode === "draw", _v$24 = icons.pencil, _v$25 = `pp-mode-tab ${props.mode === "queue" ? "pp-mode-tab--active" : ""}`, _v$26 = props.mode === "queue", _v$27 = icons.stack, _v$28 = icons.send, _v$29 = icons.copy, _v$30 = icons.settings, _v$31 = icons.x;
+            _v$19 !== _p$.e && className(_el$9, _p$.e = _v$19);
+            _v$20 !== _p$.t && setAttribute(_el$9, "aria-selected", _p$.t = _v$20);
+            _v$21 !== _p$.a && (_el$0.innerHTML = _p$.a = _v$21);
+            _v$22 !== _p$.o && className(_el$1, _p$.o = _v$22);
+            _v$23 !== _p$.i && setAttribute(_el$1, "aria-selected", _p$.i = _v$23);
+            _v$24 !== _p$.n && (_el$10.innerHTML = _p$.n = _v$24);
+            _v$25 !== _p$.s && className(_el$11, _p$.s = _v$25);
+            _v$26 !== _p$.h && setAttribute(_el$11, "aria-selected", _p$.h = _v$26);
+            _v$27 !== _p$.r && (_el$12.innerHTML = _p$.r = _v$27);
+            _v$28 !== _p$.d && (_el$50.innerHTML = _p$.d = _v$28);
+            _v$29 !== _p$.l && (_el$51.innerHTML = _p$.l = _v$29);
+            _v$30 !== _p$.u && (_el$52.innerHTML = _p$.u = _v$30);
+            _v$31 !== _p$.c && (_el$53.innerHTML = _p$.c = _v$31);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0,
+            h: void 0,
+            r: void 0,
+            d: void 0,
+            l: void 0,
+            u: void 0,
+            c: void 0
+          });
+          return _el$5;
+        })()
       );
-    })(), _el$2);
-    addEventListener(_el$3, "keydown", handleKeyDown);
-    addEventListener(_el$3, "input", handleAutoGrow);
-    var _ref$ = textareaRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$3) : textareaRef = _el$3;
-    insert(_el$2, hasSpeechAPI && (() => {
-      var _el$22 = _tmpl$72();
-      addEventListener(_el$22, "click", toggleRecording);
-      createRenderEffect((_p$) => {
-        var _v$10 = `pp-btn--icon pp-popup__mic ${isRecording() ? "pp-popup__mic--recording" : ""}`, _v$11 = isRecording() ? "Stop recording" : "Voice input", _v$12 = isRecording() ? "Stop recording" : "Voice input", _v$13 = isRecording() ? icons.microphoneOff : icons.microphone;
-        _v$10 !== _p$.e && className(_el$22, _p$.e = _v$10);
-        _v$11 !== _p$.t && setAttribute(_el$22, "title", _p$.t = _v$11);
-        _v$12 !== _p$.a && setAttribute(_el$22, "aria-label", _p$.a = _v$12);
-        _v$13 !== _p$.o && (_el$22.innerHTML = _p$.o = _v$13);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0,
-        a: void 0,
-        o: void 0
-      });
-      return _el$22;
-    })(), null);
-    addEventListener(_el$5, "click", handleFixThis);
-    addEventListener(_el$8, "click", () => props.onCancel());
-    insert(_el$4, (() => {
-      var _c$2 = memo(() => !!(props.queueMode && props.onQueue));
-      return () => _c$2() && (() => {
-        var _el$23 = _tmpl$82(), _el$24 = _el$23.firstChild;
-        addEventListener(_el$23, "click", handleQueue);
-        createRenderEffect((_p$) => {
-          var _v$14 = !comment().trim(), _v$15 = icons.plus;
-          _v$14 !== _p$.e && (_el$23.disabled = _p$.e = _v$14);
-          _v$15 !== _p$.t && (_el$24.innerHTML = _p$.t = _v$15);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0
-        });
-        return _el$23;
-      })();
-    })(), _el$9);
-    addEventListener(_el$9, "click", () => handleSubmit());
-    insert(_el$9, () => props.isEditing ? "Save" : "Add Pin");
-    createRenderEffect((_p$) => {
-      var _v$ = `${popupPosition().x}px`, _v$2 = `${popupPosition().y}px`, _v$3 = icons.bolt, _v$4 = !comment().trim();
-      _v$ !== _p$.e && setStyleProperty(_el$, "left", _p$.e = _v$);
-      _v$2 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$2);
-      _v$3 !== _p$.a && (_el$6.innerHTML = _p$.a = _v$3);
-      _v$4 !== _p$.o && (_el$9.disabled = _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    createRenderEffect(() => _el$3.value = comment());
-    return _el$;
-  })();
-};
-
-// src/ui/components/ContextMenu.tsx
-var _tmpl$24 = /* @__PURE__ */ template(`<div class=pp-context-menu><div class=pp-context-menu__item><span></span>Add Annotation</div><div class=pp-context-menu__item><span></span>Quick Prompt</div><div class=pp-context-menu__separator></div><div class=pp-context-menu__item><span></span>Copy Element Context</div><div class=pp-context-menu__item><span></span>Copy HTML Snippet</div><div class=pp-context-menu__item><span></span>Copy Computed Styles`);
-var ContextMenu = (props) => {
-  let menuRef;
-  onMount(() => {
-    const handleClick = (e) => {
-      if (menuRef && !e.composedPath().includes(menuRef)) {
-        props.onClose();
-      }
-    };
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") props.onClose();
-    };
-    setTimeout(() => {
-      document.addEventListener("click", handleClick, true);
-      document.addEventListener("keydown", handleKeyDown, true);
-    }, 0);
-    onCleanup(() => {
-      document.removeEventListener("click", handleClick, true);
-      document.removeEventListener("keydown", handleKeyDown, true);
-    });
-  });
-  const x = Math.min(props.position.x, window.innerWidth - 200);
-  const y = Math.min(props.position.y, window.innerHeight - 250);
-  return (() => {
-    var _el$ = _tmpl$24(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$9.nextSibling, _el$10 = _el$1.firstChild;
-    var _ref$ = menuRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : menuRef = _el$;
-    setStyleProperty(_el$, "left", `${x}px`);
-    setStyleProperty(_el$, "top", `${y}px`);
-    addEventListener(_el$2, "click", () => props.onAnnotate());
-    addEventListener(_el$4, "click", () => props.onPrompt());
-    addEventListener(_el$7, "click", () => props.onCopyContext());
-    addEventListener(_el$9, "click", async () => {
-      const html = props.element.outerHTML.replace(/\s+/g, " ").trim().slice(0, 500);
-      await navigator.clipboard.writeText(html);
-      props.onClose();
-    });
-    addEventListener(_el$1, "click", async () => {
-      const styles = window.getComputedStyle(props.element);
-      const relevant = ["color", "background-color", "font-size", "font-family", "padding", "margin", "border", "display", "position", "width", "height"];
-      const result = relevant.map((key) => `${key}: ${styles.getPropertyValue(key)}`).join("\n");
-      await navigator.clipboard.writeText(result);
-      props.onClose();
-    });
+    })());
     createRenderEffect((_p$) => {
-      var _v$ = icons.pin, _v$2 = icons.messageSquare, _v$3 = icons.copy, _v$4 = icons.fileCode, _v$5 = icons.eye;
-      _v$ !== _p$.e && (_el$3.innerHTML = _p$.e = _v$);
-      _v$2 !== _p$.t && (_el$5.innerHTML = _p$.t = _v$2);
-      _v$3 !== _p$.a && (_el$8.innerHTML = _p$.a = _v$3);
-      _v$4 !== _p$.o && (_el$0.innerHTML = _p$.o = _v$4);
-      _v$5 !== _p$.i && (_el$10.innerHTML = _p$.i = _v$5);
+      var _v$ = `pp-toolbar ${props.expanded ? "pp-toolbar--expanded" : "pp-toolbar--collapsed"}`, _v$2 = {
+        ...props.expanded ? {
+          bottom: `${EDGE_GAP}px`,
+          right: `${toolbarRight()}px`
+        } : {
+          right: `${toolbarRight()}px`,
+          bottom: `${pos().bottom}px`
+        }
+      };
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
       e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0
+      t: void 0
     });
     return _el$;
   })();
 };
-
-// src/ui/components/SelectionLabel.tsx
-var _tmpl$25 = /* @__PURE__ */ template(`<div class=pp-selection-label>`);
-var SelectionLabel = (props) => {
-  return createComponent(Show, {
-    get when() {
-      return props.info;
-    },
-    children: (info) => {
-      const {
-        text,
-        rect
-      } = info();
-      const y = rect.top > 30 ? rect.top - 24 : rect.bottom + 4;
-      const x = Math.max(4, Math.min(rect.left, window.innerWidth - 300));
-      return (() => {
-        var _el$ = _tmpl$25();
-        setStyleProperty(_el$, "left", `${x}px`);
-        setStyleProperty(_el$, "top", `${y}px`);
-        insert(_el$, text);
-        return _el$;
-      })();
-    }
-  });
-};
-
-// src/ui/components/PromptMode.tsx
-var _tmpl$26 = /* @__PURE__ */ template(`<div class=pp-prompt><input class=pp-prompt__input type=text placeholder="Tell the agent what to do..."><button class="pp-btn pp-btn--primary pp-btn--sm"><span>`);
-var PromptMode = (props) => {
-  const [instruction, setInstruction] = createSignal("");
-  let inputRef;
-  onMount(() => inputRef?.focus());
-  function handleSubmit() {
-    const text = instruction().trim();
-    if (!text) return;
-    props.onSend(text);
-  }
-  const rect = props.element.getBoundingClientRect();
-  const x = Math.max(8, Math.min(rect.left, window.innerWidth - 300));
-  const y = rect.bottom + 8 > window.innerHeight - 40 ? rect.top - 40 : rect.bottom + 8;
-  return (() => {
-    var _el$ = _tmpl$26(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
-    setStyleProperty(_el$, "left", `${x}px`);
-    setStyleProperty(_el$, "top", `${y}px`);
-    _el$2.$$keydown = (e) => {
-      if (e.key === "Enter") handleSubmit();
-      if (e.key === "Escape") props.onCancel();
-    };
-    _el$2.$$input = (e) => setInstruction(e.currentTarget.value);
-    var _ref$ = inputRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$2) : inputRef = _el$2;
-    _el$3.$$click = handleSubmit;
-    createRenderEffect(() => _el$4.innerHTML = icons.send);
-    createRenderEffect(() => _el$2.value = instruction());
-    return _el$;
-  })();
-};
-delegateEvents(["input", "keydown", "click"]);
-
-// src/ui/components/TextInputPopup.tsx
-var _tmpl$27 = /* @__PURE__ */ template(`<div class=pp-text-input-popup><div class=pp-text-input-popup__indicator></div><input class=pp-text-input-popup__input type=text placeholder="Add text note...">`);
-var TextInputPopup = (props) => {
-  const [text, setText] = createSignal("");
-  let inputRef;
-  onMount(() => inputRef?.focus());
-  function handleSubmit() {
-    const t = text().trim();
-    if (t) props.onSubmit(t);
-    else props.onCancel();
-  }
-  const x = Math.max(8, Math.min(props.x, window.innerWidth - 260));
-  const y = Math.max(8, Math.min(props.y + 8, window.innerHeight - 50));
-  return (() => {
-    var _el$ = _tmpl$27(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    setStyleProperty(_el$, "left", `${x}px`);
-    setStyleProperty(_el$, "top", `${y}px`);
-    _el$3.addEventListener("blur", handleSubmit);
-    _el$3.$$keydown = (e) => {
-      if (e.key === "Enter") handleSubmit();
-      if (e.key === "Escape") props.onCancel();
-    };
-    _el$3.$$input = (e) => setText(e.currentTarget.value);
-    var _ref$ = inputRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$3) : inputRef = _el$3;
-    createRenderEffect((_$p) => setStyleProperty(_el$2, "background", props.color));
-    createRenderEffect(() => _el$3.value = text());
-    return _el$;
-  })();
-};
-delegateEvents(["input", "keydown"]);
+delegateEvents(["mousedown"]);
 
 // src/ui/components/PinpointApp.tsx
 var PinpointApp = (props) => {
@@ -4852,6 +4044,817 @@ var PinpointApp = (props) => {
   }))];
 };
 
+// src/ui/styles/theme.ts
+var overlayStyles = `
+:host {
+  all: initial;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--pp-text);
+  pointer-events: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Theme variables */
+:host {
+  --pp-bg: rgba(24, 24, 27, 0.92);
+  --pp-bg-solid: #18181b;
+  --pp-text: #fafafa;
+  --pp-text-muted: #a1a1aa;
+  --pp-border: rgba(63, 63, 70, 0.6);
+  --pp-accent: #3b82f6;
+  --pp-accent-hover: #60a5fa;
+  --pp-success: #22c55e;
+  --pp-warning: #eab308;
+  --pp-danger: #ef4444;
+  --pp-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --pp-radius: 10px;
+  --pp-radius-sm: 6px;
+}
+
+:host([data-theme="light"]) {
+  --pp-bg: rgba(255, 255, 255, 0.92);
+  --pp-bg-solid: #ffffff;
+  --pp-text: #18181b;
+  --pp-text-muted: #71717a;
+  --pp-border: rgba(228, 228, 231, 0.8);
+  --pp-accent: #2563eb;
+  --pp-accent-hover: #3b82f6;
+  --pp-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
+}
+
+:host([data-theme="light"]) .pp-popup__textarea {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+/* Toolbar */
+.pp-toolbar {
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: auto;
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  background: var(--pp-bg);
+  border: 1px solid var(--pp-border);
+  border-radius: var(--pp-radius);
+  box-shadow: var(--pp-shadow);
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  user-select: none;
+  cursor: default;
+}
+
+.pp-toolbar--collapsed {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.pp-toolbar--expanded {
+  padding: 12px;
+  width: 320px;
+  max-height: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.pp-toolbar__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--pp-accent);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+/* Buttons */
+.pp-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 5px 10px;
+  border: 1px solid var(--pp-border);
+  border-radius: var(--pp-radius-sm);
+  background: transparent;
+  color: var(--pp-text);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.pp-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--pp-accent);
+}
+
+.pp-btn--primary {
+  background: var(--pp-accent);
+  border-color: var(--pp-accent);
+  color: #fff;
+}
+
+.pp-btn--primary:hover {
+  background: var(--pp-accent-hover);
+}
+
+.pp-btn--sm {
+  padding: 3px 6px;
+  font-size: 11px;
+}
+
+.pp-btn--icon {
+  padding: 4px;
+  border: none;
+  background: transparent;
+  color: var(--pp-text-muted);
+  cursor: pointer;
+  border-radius: var(--pp-radius-sm);
+}
+
+.pp-btn--icon:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--pp-text);
+}
+
+.pp-btn--icon-sm {
+  padding: 2px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
+}
+
+.pp-pin-item:hover .pp-btn--icon-sm,
+.pp-pin-item:focus-within .pp-btn--icon-sm {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.pp-btn--icon-sm:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--pp-danger);
+}
+
+@media (hover: none) {
+  .pp-btn--icon-sm {
+    opacity: 0.6;
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pp-btn--icon-sm { transition: none; }
+}
+
+/* Pin list */
+.pp-pin-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: auto;
+  max-height: 240px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pp-border) transparent;
+}
+
+.pp-pin-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--pp-radius-sm);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.pp-pin-item:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.pp-pin-item__number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  padding: 0 4px;
+  border-radius: 11px;
+  background: var(--pp-accent);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.pp-pin-item__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.pp-pin-item__comment {
+  font-size: 12px;
+  color: var(--pp-text);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.pp-pin-item__status {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.pp-pin-item__status--open { background: var(--pp-danger); }
+.pp-pin-item__status--acknowledged { background: var(--pp-warning); }
+.pp-pin-item__status--resolved { background: var(--pp-success); }
+.pp-pin-item__status--dismissed { background: var(--pp-text-muted); }
+
+/* Action bar \u2014 horizontal icon bar at bottom */
+.pp-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding-top: 8px;
+  border-top: 1px solid var(--pp-border);
+}
+
+.pp-actions .pp-btn--icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pp-actions .pp-btn--icon:focus-visible {
+  outline: 2px solid var(--pp-accent);
+  outline-offset: 2px;
+}
+
+/* Popup */
+.pp-popup {
+  position: fixed;
+  z-index: 2147483647;
+  pointer-events: auto;
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  background: var(--pp-bg);
+  border: 1px solid var(--pp-border);
+  border-radius: var(--pp-radius);
+  box-shadow: var(--pp-shadow);
+  padding: 10px;
+  min-width: 280px;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.pp-popup__element-info {
+  font-size: 11px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: var(--pp-accent);
+  word-break: break-all;
+}
+
+.pp-popup__component {
+  font-size: 12px;
+  color: var(--pp-text-muted);
+}
+
+.pp-popup__source {
+  font-size: 11px;
+  color: var(--pp-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.pp-popup__source:hover {
+  color: var(--pp-accent);
+  text-decoration: underline;
+}
+
+/* Popup header with chevron toggle */
+.pp-popup__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: 2px 0;
+}
+
+.pp-popup__name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--pp-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 280px;
+}
+
+.pp-popup__chevron {
+  color: var(--pp-text-muted);
+  transition: transform 0.15s ease;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  transform: rotate(-90deg);
+}
+
+.pp-popup__chevron--open {
+  transform: rotate(0deg);
+}
+
+/* CSS-based collapsible \u2014 keeps DOM, animates height */
+.pp-popup__details {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease-out;
+}
+
+.pp-popup__details--open {
+  grid-template-rows: 1fr;
+}
+
+.pp-popup__details-inner {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pp-popup__chevron,
+  .pp-popup__details {
+    transition: none;
+  }
+}
+
+.pp-popup__textarea {
+  width: 100%;
+  min-height: 48px;
+  max-height: 120px;
+  padding: 8px;
+  border: 1px solid var(--pp-border);
+  border-radius: var(--pp-radius-sm);
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--pp-text);
+  font-size: 13px;
+  font-family: inherit;
+  resize: none;
+  overflow-y: auto;
+  outline: none;
+}
+
+.pp-popup__textarea:focus {
+  border-color: var(--pp-accent);
+}
+
+.pp-popup__actions {
+  display: flex;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
+.pp-popup__actions .pp-btn {
+  height: 26px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+/* Selection label */
+.pp-selection-label {
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: none;
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: var(--pp-accent);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Context menu */
+.pp-context-menu {
+  position: fixed;
+  z-index: 2147483647;
+  pointer-events: auto;
+  background: var(--pp-bg-solid);
+  border: 1px solid var(--pp-border);
+  border-radius: var(--pp-radius-sm);
+  box-shadow: var(--pp-shadow);
+  padding: 4px;
+  min-width: 180px;
+}
+
+.pp-context-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--pp-text);
+  transition: background 0.1s;
+}
+
+.pp-context-menu__item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.pp-context-menu__separator {
+  height: 1px;
+  background: var(--pp-border);
+  margin: 4px 0;
+}
+
+/* Prompt mode */
+.pp-prompt {
+  position: fixed;
+  z-index: 2147483647;
+  pointer-events: auto;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.pp-prompt__input {
+  padding: 6px 10px;
+  border: 1px solid var(--pp-accent);
+  border-radius: var(--pp-radius-sm);
+  background: var(--pp-bg);
+  color: var(--pp-text);
+  font-size: 13px;
+  font-family: inherit;
+  min-width: 240px;
+  outline: none;
+  backdrop-filter: blur(12px) saturate(180%);
+}
+
+/* Settings panel */
+.pp-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--pp-border);
+}
+
+.pp-settings__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.pp-settings__label {
+  font-size: 12px;
+  color: var(--pp-text);
+}
+
+.pp-settings__value {
+  font-size: 11px;
+  color: var(--pp-text-muted);
+}
+
+/* Toggle switch */
+.pp-toggle {
+  position: relative;
+  width: 32px;
+  height: 18px;
+  border-radius: 9px;
+  background: var(--pp-border);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.pp-toggle--active {
+  background: var(--pp-accent);
+}
+
+.pp-toggle__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.2s;
+}
+
+.pp-toggle--active .pp-toggle__thumb {
+  transform: translateX(14px);
+}
+
+/* Kbd hints */
+.pp-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 4px;
+  border: 1px solid var(--pp-border);
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.04);
+  font-size: 10px;
+  font-family: inherit;
+  color: var(--pp-text-muted);
+  line-height: 1;
+}
+
+/* Mode tabs */
+.pp-mode-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: var(--pp-radius-sm);
+}
+
+.pp-mode-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--pp-text-muted);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pp-mode-tab:hover {
+  color: var(--pp-text);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.pp-mode-tab--active {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--pp-text);
+}
+
+.pp-mode-tab__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--pp-accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+/* Draw tools bar */
+.pp-draw-tools {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.pp-draw-tool {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--pp-radius-sm);
+  background: transparent;
+  color: var(--pp-text-muted);
+  cursor: pointer;
+}
+
+.pp-draw-tool:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--pp-text);
+}
+
+.pp-draw-tool--active {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--pp-accent);
+}
+
+.pp-draw-tool:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+/* Draw options row */
+.pp-draw-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.pp-draw-colors {
+  display: flex;
+  gap: 4px;
+}
+
+.pp-color-swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.pp-color-swatch:hover {
+  opacity: 0.85;
+}
+
+.pp-color-swatch--active {
+  border-color: #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+}
+
+.pp-draw-widths {
+  display: flex;
+  gap: 4px;
+}
+
+.pp-width-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--pp-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.pp-width-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.pp-width-btn--active {
+  background: rgba(255, 255, 255, 0.1);
+  outline: 1px solid var(--pp-border);
+}
+
+/* Queue badge in toolbar header */
+.pp-toolbar__queue-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--pp-warning);
+  color: #000;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+/* Popup input row with mic */
+.pp-popup__input-row {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.pp-popup__input-row .pp-popup__textarea {
+  flex: 1;
+}
+
+.pp-popup__mic {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin-top: 4px;
+}
+
+.pp-popup__mic--recording {
+  color: var(--pp-danger) !important;
+  background: rgba(239, 68, 68, 0.15) !important;
+  animation: pp-mic-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes pp-mic-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
+  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
+}
+
+/* Ghost button (Fix this) */
+.pp-btn--ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: none;
+  border-radius: var(--pp-radius-sm);
+  background: transparent;
+  color: var(--pp-warning);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.pp-btn--ghost:hover {
+  background: rgba(234, 179, 8, 0.1);
+}
+
+/* Text input popup for draw-mode text annotations */
+.pp-text-input-popup {
+  position: fixed;
+  z-index: 2147483647;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  background: var(--pp-bg);
+  border: 1px solid var(--pp-border);
+  border-radius: var(--pp-radius-sm);
+  box-shadow: var(--pp-shadow);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+}
+
+.pp-text-input-popup__indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.pp-text-input-popup__input {
+  border: none;
+  background: transparent;
+  color: var(--pp-text);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  min-width: 200px;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--pp-border);
+  border-radius: 2px;
+}
+`;
+
 // src/ui/mount.ts
 var CONTAINER_ID = "pinpoint-root";
 function mountPinpoint(config = {}, target = document.body) {
@@ -4921,4 +4924,4 @@ export {
   mountPinpoint,
   unmountPinpoint
 };
-//# sourceMappingURL=chunk-6YK47AB5.js.map
+//# sourceMappingURL=chunk-HC724C43.js.map