@wasao/kagemusha 0.1.1 → 0.3.4

package/dist/editor/inject-script.js

@@ -1,128 +1,132 @@
-// This script is injected into the target page to provide annotation editing.
-// It adds a toolbar and SVG overlay layer on top of the actual page.
-// This is a plain script (not a module) — no imports/exports.
-// Type helpers for window properties set by edit.ts
-const _win = window;
-const TOOLBAR_HEIGHT = 48;
-const svgNS = "http://www.w3.org/2000/svg";
-let tool = "rect";
-let annotations = [];
-let selectedId = null;
-let dragState = null;
-let nextId = 1;
-// --- TOOLBAR ---
-const toolbar = document.createElement("div");
-toolbar.id = "kagemusha-toolbar";
-toolbar.innerHTML = `
-  <style>
-    #kagemusha-toolbar {
-      position: fixed; top: 0; left: 0; right: 0; z-index: 999999;
-      background: #16213e; padding: 8px 16px; display: flex; align-items: center; gap: 12px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.3); font-family: -apple-system, sans-serif;
-    }
-    #kagemusha-toolbar button {
-      padding: 6px 14px; border: 1px solid #444; border-radius: 6px;
-      background: #1a1a2e; color: #fff; font-size: 13px; cursor: pointer;
-    }
-    #kagemusha-toolbar button:hover { background: #2a2a4e; }
-    #kagemusha-toolbar button.active { background: #6366f1; border-color: #6366f1; }
-    #kagemusha-toolbar .sep { width: 1px; height: 24px; background: #444; }
-    #kagemusha-toolbar .title { color: #888; font-size: 13px; }
-    #kagemusha-toolbar .save-btn { background: #22c55e; border-color: #22c55e; font-weight: 600; margin-left: auto; }
-    #kagemusha-toolbar .save-btn:hover { background: #16a34a; }
-    #kagemusha-svg-layer {
-      position: absolute; top: 0; left: 0; width: 100%;
-      z-index: 999998; pointer-events: none;
-    }
-    #kagemusha-svg-layer.drawing { pointer-events: auto; cursor: crosshair; }
-    #kagemusha-svg-layer .annotation { pointer-events: auto; cursor: move; }
-    #kagemusha-svg-layer .annotation.selected { filter: drop-shadow(0 0 3px #6366f1); }
-    .kagemusha-hint {
-      position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
-      color: #fff; background: rgba(0,0,0,0.7); padding: 6px 16px; border-radius: 8px;
-      font-size: 12px; z-index: 999999; font-family: -apple-system, sans-serif;
-    }
-  </style>
-  <span class="title">🥷 Annotation Editor</span>
-  <button id="kg-tool-rect" class="active">▭ Rectangle</button>
-  <button id="kg-tool-arrow">→ Arrow</button>
-  <button id="kg-tool-label">T Label</button>
-  <div class="sep"></div>
-  <button id="kg-delete">🗑 Delete</button>
-  <button class="save-btn" id="kg-save">💾 Save</button>
-`;
-document.body.appendChild(toolbar);
-document.body.style.paddingTop = `${TOOLBAR_HEIGHT}px`;
-const hint = document.createElement("div");
-hint.className = "kagemusha-hint";
-hint.textContent = "Click and drag to add annotations. Click to select. Press Delete to remove.";
-document.body.appendChild(hint);
-// --- SVG LAYER ---
-const svg = document.createElementNS(svgNS, "svg");
-svg.id = "kagemusha-svg-layer";
-svg.classList.add("drawing");
-document.body.appendChild(svg);
-const updateSvgSize = () => {
-    svg.setAttribute("width", String(window.innerWidth));
-    svg.setAttribute("height", String(document.documentElement.scrollHeight));
-};
-updateSvgSize();
-window.addEventListener("resize", updateSvgSize);
-const defs = document.createElementNS(svgNS, "defs");
-defs.innerHTML = '<marker id="kg-arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#FF0000"><polygon points="0 0, 10 3.5, 0 7"/></marker>';
-svg.appendChild(defs);
-// --- HELPERS ---
-const getPos = (e) => ({ x: e.pageX, y: e.pageY });
-const deselectAll = () => {
-    selectedId = null;
-    svg.querySelectorAll(".annotation").forEach((el) => { el.classList.remove("selected"); });
-};
-const selectEl = (el) => {
-    deselectAll();
-    selectedId = el.dataset.id ?? null;
-    el.classList.add("selected");
-};
-const deleteSelected = () => {
-    if (!selectedId)
-        return;
-    const el = svg.querySelector(`[data-id="${selectedId}"]`);
-    if (el)
-        el.remove();
-    annotations = annotations.filter((a) => a.id !== selectedId);
-    selectedId = null;
-};
-const startMove = (e, id) => {
-    e.stopPropagation();
-    const el = svg.querySelector(`[data-id="${id}"]`);
-    if (!el)
-        return;
-    selectEl(el);
-    const p = getPos(e);
-    dragState = { type: "move", id, el: el, lastX: p.x, lastY: p.y };
-};
-const measureTextWidth = (text, fontSize) => {
-    const tmp = document.createElementNS(svgNS, "text");
+"use strict";
+(() => {
+  // src/editor/inject-script/dom.ts
+  var getMousePos = (e) => ({
+    x: e.pageX,
+    y: e.pageY
+  });
+  var measureSvgTextWidth = (svg2, text, fontSize, svgNs) => {
+    const tmp = document.createElementNS(svgNs, "text");
     tmp.setAttribute("font-size", String(fontSize));
     tmp.setAttribute("font-family", "-apple-system, sans-serif");
     tmp.textContent = text;
-    svg.appendChild(tmp);
+    svg2.appendChild(tmp);
     const width = tmp.getBBox().width;
     tmp.remove();
     return width;
-};
-const createLabelGroup = (id, x, y, text, fontSize = 14) => {
-    const g = document.createElementNS(svgNS, "g");
+  };
+  var showErrorToast = (message, ms = 5e3) => {
+    const toast = document.createElement("div");
+    toast.setAttribute(
+      "style",
+      "position:fixed;top:72px;left:50%;transform:translateX(-50%);background:#dc2626;color:#fff;padding:12px 20px;border-radius:8px;font-family:-apple-system,sans-serif;font-size:14px;line-height:1.4;z-index:var(--kg-z-top);box-shadow:0 4px 12px rgba(0,0,0,0.3);max-width:480px;white-space:pre-wrap;text-align:center;"
+    );
+    toast.textContent = message;
+    document.documentElement.appendChild(toast);
+    setTimeout(() => toast.remove(), ms);
+  };
+
+  // src/editor/inject-script/state.ts
+  var SVG_NS = "http://www.w3.org/2000/svg";
+  var HANDLE_SIZE = 10;
+  var MIN_CROP = 10;
+  var state = {
+    tool: "rect",
+    annotations: [],
+    selectedId: null,
+    dragState: null,
+    nextId: 1,
+    captureMode: "fullPage",
+    captureCrop: null,
+    cropDragState: null,
+    recordedSteps: [],
+    recording: false,
+    pickerKind: null
+  };
+  var allocateAnnotationId = () => `a${state.nextId++}`;
+
+  // src/editor/inject-script/svg.ts
+  var svgEl = null;
+  var captureGroupEl = null;
+  var initSvgLayer = () => {
+    const svg2 = document.createElementNS(SVG_NS, "svg");
+    svg2.id = "kagemusha-svg-layer";
+    svg2.classList.add("drawing");
+    document.documentElement.appendChild(svg2);
+    const updateSvgSize = () => {
+      svg2.setAttribute("width", String(window.innerWidth));
+      svg2.setAttribute("height", String(document.documentElement.scrollHeight));
+    };
+    updateSvgSize();
+    window.addEventListener("resize", updateSvgSize);
+    const defs = document.createElementNS(SVG_NS, "defs");
+    defs.innerHTML = '<marker id="kg-arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#FF0000"><polygon points="0 0, 10 3.5, 0 7"/></marker>';
+    svg2.appendChild(defs);
+    const captureGroup = document.createElementNS(SVG_NS, "g");
+    captureGroup.id = "kagemusha-capture-group";
+    svg2.appendChild(captureGroup);
+    svgEl = svg2;
+    captureGroupEl = captureGroup;
+    return { svg: svg2, captureGroup };
+  };
+  var getSvg = () => {
+    if (!svgEl) throw new Error("SVG layer not initialized");
+    return svgEl;
+  };
+  var getCaptureGroup = () => {
+    if (!captureGroupEl) throw new Error("Capture group not initialized");
+    return captureGroupEl;
+  };
+
+  // src/editor/inject-script/annotations.ts
+  var isLabelInput = (el) => el?.tagName === "INPUT";
+  var deselectAll = () => {
+    state.selectedId = null;
+    getSvg().querySelectorAll(".annotation").forEach((el) => {
+      el.classList.remove("selected");
+    });
+  };
+  var selectEl = (el) => {
+    deselectAll();
+    state.selectedId = el.dataset.id ?? null;
+    el.classList.add("selected");
+  };
+  var deleteSelected = () => {
+    if (!state.selectedId) return;
+    const el = getSvg().querySelector(`[data-id="${state.selectedId}"]`);
+    if (el) el.remove();
+    state.annotations = state.annotations.filter(
+      (a) => a.id !== state.selectedId
+    );
+    state.selectedId = null;
+  };
+  var startMove = (e, id) => {
+    e.stopPropagation();
+    const el = getSvg().querySelector(`[data-id="${id}"]`);
+    if (!el) return;
+    selectEl(el);
+    const p = getMousePos(e);
+    state.dragState = {
+      type: "move",
+      id,
+      el,
+      lastX: p.x,
+      lastY: p.y
+    };
+  };
+  var createLabelGroup = (id, x, y, text, fontSize = 14) => {
+    const g = document.createElementNS(SVG_NS, "g");
     g.classList.add("annotation");
     g.dataset.id = id;
-    const bg = document.createElementNS(svgNS, "rect");
-    const txt = document.createElementNS(svgNS, "text");
+    const bg = document.createElementNS(SVG_NS, "rect");
+    const txt = document.createElementNS(SVG_NS, "text");
     txt.textContent = text;
     txt.setAttribute("x", String(x + 6));
     txt.setAttribute("y", String(y + 16));
     txt.setAttribute("fill", "#FF0000");
     txt.setAttribute("font-size", String(fontSize));
     txt.setAttribute("font-family", "-apple-system, sans-serif");
-    const tw = measureTextWidth(text, fontSize) + 12;
+    const tw = measureSvgTextWidth(getSvg(), text, fontSize, SVG_NS) + 12;
     bg.setAttribute("x", String(x));
     bg.setAttribute("y", String(y));
     bg.setAttribute("width", String(tw));
@@ -132,263 +136,1182 @@ const createLabelGroup = (id, x, y, text, fontSize = 14) => {
     g.appendChild(bg);
     g.appendChild(txt);
     return g;
-};
-// --- TOOLS ---
-const setTool = (t) => {
-    tool = t;
-    document.querySelectorAll("#kagemusha-toolbar button").forEach((b) => { b.classList.remove("active"); });
-    document.getElementById(`kg-tool-${t}`)?.classList.add("active");
-    svg.classList.toggle("drawing", true);
+  };
+  var handleMouseDown = (e) => {
+    if (e.target?.closest(".annotation")) return false;
     deselectAll();
-};
-document.getElementById("kg-tool-rect")?.addEventListener("click", () => setTool("rect"));
-document.getElementById("kg-tool-arrow")?.addEventListener("click", () => setTool("arrow"));
-document.getElementById("kg-tool-label")?.addEventListener("click", () => setTool("label"));
-document.getElementById("kg-delete")?.addEventListener("click", deleteSelected);
-document.getElementById("kg-save")?.addEventListener("click", save);
-document.addEventListener("keydown", (e) => {
+    const p = getMousePos(e);
+    const svg2 = getSvg();
+    if (state.tool === "rect") {
+      const id = allocateAnnotationId();
+      const rect = document.createElementNS(SVG_NS, "rect");
+      rect.setAttribute("x", String(p.x));
+      rect.setAttribute("y", String(p.y));
+      rect.setAttribute("width", "0");
+      rect.setAttribute("height", "0");
+      rect.setAttribute("fill", "none");
+      rect.setAttribute("stroke", "#FF0000");
+      rect.setAttribute("stroke-width", "3");
+      rect.setAttribute("rx", "4");
+      rect.classList.add("annotation");
+      rect.dataset.id = id;
+      svg2.appendChild(rect);
+      state.dragState = {
+        type: "create-rect",
+        id,
+        el: rect,
+        sx: p.x,
+        sy: p.y
+      };
+      return true;
+    }
+    if (state.tool === "arrow") {
+      const id = allocateAnnotationId();
+      const line = document.createElementNS(SVG_NS, "line");
+      line.setAttribute("x1", String(p.x));
+      line.setAttribute("y1", String(p.y));
+      line.setAttribute("x2", String(p.x));
+      line.setAttribute("y2", String(p.y));
+      line.setAttribute("stroke", "#FF0000");
+      line.setAttribute("stroke-width", "3");
+      line.setAttribute("marker-end", "url(#kg-arrowhead)");
+      line.classList.add("annotation");
+      line.dataset.id = id;
+      svg2.appendChild(line);
+      state.dragState = {
+        type: "create-arrow",
+        id,
+        el: line,
+        sx: p.x,
+        sy: p.y
+      };
+      return true;
+    }
+    if (state.tool === "label") {
+      const id = allocateAnnotationId();
+      const input = document.createElement("input");
+      input.type = "text";
+      input.value = "";
+      input.placeholder = "Type label...";
+      input.style.cssText = "position:fixed;z-index:var(--kg-z-top);padding:4px 8px;background:#fff;border:none;border-radius:4px;color:#FF0000;font-size:14px;font-family:-apple-system,sans-serif;outline:2px solid #6366f1;min-width:80px;box-shadow:0 2px 8px rgba(0,0,0,0.2);";
+      input.style.left = `${e.clientX}px`;
+      input.style.top = `${e.clientY}px`;
+      document.documentElement.appendChild(input);
+      svg2.classList.remove("drawing");
+      setTimeout(() => input.focus(), 50);
+      let labelFinished = false;
+      const finishLabel = () => {
+        if (labelFinished) return;
+        labelFinished = true;
+        const text = input.value.trim();
+        input.remove();
+        svg2.classList.add("drawing");
+        if (!text) return;
+        const g = createLabelGroup(id, p.x, p.y, text);
+        svg2.appendChild(g);
+        state.annotations.push({ id, type: "label", x: p.x, y: p.y, text });
+        selectEl(g);
+        g.addEventListener("mousedown", (ev) => startMove(ev, id));
+      };
+      input.addEventListener("keydown", (ev) => {
+        if (ev.key === "Enter") finishLabel();
+        if (ev.key === "Escape") {
+          labelFinished = true;
+          input.remove();
+          svg2.classList.add("drawing");
+        }
+      });
+      input.addEventListener("blur", finishLabel);
+      return true;
+    }
+    return false;
+  };
+  var handleMouseMove = (e) => {
+    const drag = state.dragState;
+    if (!drag) return false;
+    const p = getMousePos(e);
+    if (drag.type === "create-rect") {
+      drag.el.setAttribute("x", String(Math.min(drag.sx ?? 0, p.x)));
+      drag.el.setAttribute("y", String(Math.min(drag.sy ?? 0, p.y)));
+      drag.el.setAttribute("width", String(Math.abs(p.x - (drag.sx ?? 0))));
+      drag.el.setAttribute("height", String(Math.abs(p.y - (drag.sy ?? 0))));
+    } else if (drag.type === "create-arrow") {
+      drag.el.setAttribute("x2", String(p.x));
+      drag.el.setAttribute("y2", String(p.y));
+    } else if (drag.type === "move") {
+      const a = state.annotations.find((ann) => ann.id === drag.id);
+      if (!a) return true;
+      const dx = p.x - (drag.lastX ?? 0);
+      const dy = p.y - (drag.lastY ?? 0);
+      drag.lastX = p.x;
+      drag.lastY = p.y;
+      if (a.type === "rect") {
+        a.x = (a.x ?? 0) + dx;
+        a.y = (a.y ?? 0) + dy;
+        drag.el.setAttribute("x", String(a.x));
+        drag.el.setAttribute("y", String(a.y));
+      } else if (a.type === "arrow") {
+        a.fromX = (a.fromX ?? 0) + dx;
+        a.fromY = (a.fromY ?? 0) + dy;
+        a.toX = (a.toX ?? 0) + dx;
+        a.toY = (a.toY ?? 0) + dy;
+        drag.el.setAttribute("x1", String(a.fromX));
+        drag.el.setAttribute("y1", String(a.fromY));
+        drag.el.setAttribute("x2", String(a.toX));
+        drag.el.setAttribute("y2", String(a.toY));
+      } else if (a.type === "label") {
+        a.x = (a.x ?? 0) + dx;
+        a.y = (a.y ?? 0) + dy;
+        const bg = drag.el.querySelector("rect");
+        const txt = drag.el.querySelector("text");
+        bg?.setAttribute("x", String(a.x));
+        bg?.setAttribute("y", String(a.y));
+        txt?.setAttribute("x", String(a.x + 6));
+        txt?.setAttribute("y", String(a.y + 16));
+      }
+    }
+    return true;
+  };
+  var handleMouseUp = (e) => {
+    const drag = state.dragState;
+    if (!drag) return false;
+    const p = getMousePos(e);
+    if (drag.type === "create-rect") {
+      const w = Math.abs(p.x - (drag.sx ?? 0));
+      const h = Math.abs(p.y - (drag.sy ?? 0));
+      if (w < 5 && h < 5) {
+        drag.el.remove();
+      } else {
+        const a = {
+          id: drag.id,
+          type: "rect",
+          x: Math.min(drag.sx ?? 0, p.x),
+          y: Math.min(drag.sy ?? 0, p.y),
+          width: w,
+          height: h
+        };
+        state.annotations.push(a);
+        selectEl(drag.el);
+        const capturedId = drag.id;
+        drag.el.addEventListener(
+          "mousedown",
+          (ev) => startMove(ev, capturedId)
+        );
+      }
+    } else if (drag.type === "create-arrow") {
+      const dist = Math.hypot(p.x - (drag.sx ?? 0), p.y - (drag.sy ?? 0));
+      if (dist < 5) {
+        drag.el.remove();
+      } else {
+        const a = {
+          id: drag.id,
+          type: "arrow",
+          fromX: drag.sx,
+          fromY: drag.sy,
+          toX: p.x,
+          toY: p.y
+        };
+        state.annotations.push(a);
+        selectEl(drag.el);
+        const capturedId = drag.id;
+        drag.el.addEventListener(
+          "mousedown",
+          (ev) => startMove(ev, capturedId)
+        );
+      }
+    }
+    state.dragState = null;
+    return true;
+  };
+  var handleKeyDown = (e) => {
     if (e.key === "Delete" || e.key === "Backspace") {
-        if (document.activeElement?.tagName === "INPUT")
-            return;
-        deleteSelected();
-    }
-});
-// --- MOUSE: CREATE ---
-svg.addEventListener("mousedown", (e) => {
-    if (e.target?.closest(".annotation"))
-        return;
-    const p = getPos(e);
-    deselectAll();
-    if (tool === "rect") {
-        const id = `a${nextId++}`;
-        const rect = document.createElementNS(svgNS, "rect");
-        rect.setAttribute("x", String(p.x));
-        rect.setAttribute("y", String(p.y));
-        rect.setAttribute("width", "0");
-        rect.setAttribute("height", "0");
+      if (isLabelInput(document.activeElement)) return;
+      deleteSelected();
+    }
+  };
+  var loadAnnotations = (decorations) => {
+    const dpr = window.devicePixelRatio || 1;
+    const svg2 = getSvg();
+    for (const d of decorations) {
+      const id = allocateAnnotationId();
+      if (d.type === "rect" && d.target) {
+        const rx = d.target.x / dpr;
+        const ry = d.target.y / dpr;
+        const rw = d.target.width / dpr;
+        const rh = d.target.height / dpr;
+        const rect = document.createElementNS(SVG_NS, "rect");
+        rect.setAttribute("x", String(rx));
+        rect.setAttribute("y", String(ry));
+        rect.setAttribute("width", String(rw));
+        rect.setAttribute("height", String(rh));
         rect.setAttribute("fill", "none");
-        rect.setAttribute("stroke", "#FF0000");
+        rect.setAttribute("stroke", d.style?.color ?? "#FF0000");
         rect.setAttribute("stroke-width", "3");
         rect.setAttribute("rx", "4");
         rect.classList.add("annotation");
         rect.dataset.id = id;
-        svg.appendChild(rect);
-        dragState = { type: "create-rect", id, el: rect, sx: p.x, sy: p.y };
-    }
-    else if (tool === "arrow") {
-        const id = `a${nextId++}`;
-        const line = document.createElementNS(svgNS, "line");
-        line.setAttribute("x1", String(p.x));
-        line.setAttribute("y1", String(p.y));
-        line.setAttribute("x2", String(p.x));
-        line.setAttribute("y2", String(p.y));
-        line.setAttribute("stroke", "#FF0000");
+        svg2.appendChild(rect);
+        state.annotations.push({
+          id,
+          type: "rect",
+          x: rx,
+          y: ry,
+          width: rw,
+          height: rh
+        });
+        rect.addEventListener("mousedown", (ev) => startMove(ev, id));
+      } else if (d.type === "arrow" && d.from && d.to) {
+        const ax1 = d.from.x / dpr;
+        const ay1 = d.from.y / dpr;
+        const ax2 = d.to.x / dpr;
+        const ay2 = d.to.y / dpr;
+        const line = document.createElementNS(SVG_NS, "line");
+        line.setAttribute("x1", String(ax1));
+        line.setAttribute("y1", String(ay1));
+        line.setAttribute("x2", String(ax2));
+        line.setAttribute("y2", String(ay2));
+        line.setAttribute("stroke", d.style?.color ?? "#FF0000");
         line.setAttribute("stroke-width", "3");
         line.setAttribute("marker-end", "url(#kg-arrowhead)");
         line.classList.add("annotation");
         line.dataset.id = id;
-        svg.appendChild(line);
-        dragState = { type: "create-arrow", id, el: line, sx: p.x, sy: p.y };
-    }
-    else if (tool === "label") {
-        const id = `a${nextId++}`;
-        const input = document.createElement("input");
-        input.type = "text";
-        input.value = "";
-        input.placeholder = "Type label...";
-        input.style.cssText = "position:fixed;z-index:9999999;padding:4px 8px;background:#fff;border:none;border-radius:4px;color:#FF0000;font-size:14px;font-family:-apple-system,sans-serif;outline:2px solid #6366f1;min-width:80px;box-shadow:0 2px 8px rgba(0,0,0,0.2);";
-        input.style.left = `${e.clientX}px`;
-        input.style.top = `${e.clientY}px`;
-        document.body.appendChild(input);
-        svg.classList.remove("drawing");
-        setTimeout(() => input.focus(), 50);
-        let labelFinished = false;
-        const finishLabel = () => {
-            if (labelFinished)
-                return;
-            labelFinished = true;
-            const text = input.value.trim();
-            input.remove();
-            svg.classList.add("drawing");
-            if (!text)
-                return;
-            const g = createLabelGroup(id, p.x, p.y, text);
-            svg.appendChild(g);
-            annotations.push({ id, type: "label", x: p.x, y: p.y, text });
-            selectEl(g);
-            g.addEventListener("mousedown", (ev) => startMove(ev, id));
-        };
-        input.addEventListener("keydown", (ev) => {
-            if (ev.key === "Enter")
-                finishLabel();
-            if (ev.key === "Escape") {
-                labelFinished = true;
-                input.remove();
-                svg.classList.add("drawing");
-            }
+        svg2.appendChild(line);
+        state.annotations.push({
+          id,
+          type: "arrow",
+          fromX: ax1,
+          fromY: ay1,
+          toX: ax2,
+          toY: ay2
         });
-        input.addEventListener("blur", finishLabel);
-    }
-});
-// --- MOUSE: DRAG ---
-document.addEventListener("mousemove", (e) => {
-    if (!dragState)
-        return;
-    const p = getPos(e);
-    if (dragState.type === "create-rect") {
-        dragState.el.setAttribute("x", String(Math.min(dragState.sx ?? 0, p.x)));
-        dragState.el.setAttribute("y", String(Math.min(dragState.sy ?? 0, p.y)));
-        dragState.el.setAttribute("width", String(Math.abs(p.x - (dragState.sx ?? 0))));
-        dragState.el.setAttribute("height", String(Math.abs(p.y - (dragState.sy ?? 0))));
-    }
-    else if (dragState.type === "create-arrow") {
-        dragState.el.setAttribute("x2", String(p.x));
-        dragState.el.setAttribute("y2", String(p.y));
-    }
-    else if (dragState.type === "move") {
-        const a = annotations.find((ann) => ann.id === dragState?.id);
-        if (!a)
-            return;
-        const dx = p.x - (dragState.lastX ?? 0);
-        const dy = p.y - (dragState.lastY ?? 0);
-        dragState.lastX = p.x;
-        dragState.lastY = p.y;
-        if (a.type === "rect") {
-            a.x = (a.x ?? 0) + dx;
-            a.y = (a.y ?? 0) + dy;
-            dragState.el.setAttribute("x", String(a.x));
-            dragState.el.setAttribute("y", String(a.y));
-        }
-        else if (a.type === "arrow") {
-            a.fromX = (a.fromX ?? 0) + dx;
-            a.fromY = (a.fromY ?? 0) + dy;
-            a.toX = (a.toX ?? 0) + dx;
-            a.toY = (a.toY ?? 0) + dy;
-            dragState.el.setAttribute("x1", String(a.fromX));
-            dragState.el.setAttribute("y1", String(a.fromY));
-            dragState.el.setAttribute("x2", String(a.toX));
-            dragState.el.setAttribute("y2", String(a.toY));
-        }
-        else if (a.type === "label") {
-            a.x = (a.x ?? 0) + dx;
-            a.y = (a.y ?? 0) + dy;
-            const bg = dragState.el.querySelector("rect");
-            const txt = dragState.el.querySelector("text");
-            bg?.setAttribute("x", String(a.x));
-            bg?.setAttribute("y", String(a.y));
-            txt?.setAttribute("x", String(a.x + 6));
-            txt?.setAttribute("y", String(a.y + 16));
-        }
+        line.addEventListener("mousedown", (ev) => startMove(ev, id));
+      } else if (d.type === "label" && d.position) {
+        const lx = d.position.x / dpr;
+        const ly = d.position.y / dpr;
+        const fontSize = (d.style?.fontSize ?? 14) / dpr;
+        const g = createLabelGroup(id, lx, ly, d.text ?? "", fontSize);
+        svg2.appendChild(g);
+        state.annotations.push({
+          id,
+          type: "label",
+          x: lx,
+          y: ly,
+          text: d.text
+        });
+        g.addEventListener("mousedown", (ev) => startMove(ev, id));
+      }
     }
-});
-// --- MOUSE: UP ---
-document.addEventListener("mouseup", (e) => {
-    if (!dragState)
-        return;
-    const p = getPos(e);
-    if (dragState.type === "create-rect") {
-        const w = Math.abs(p.x - (dragState.sx ?? 0));
-        const h = Math.abs(p.y - (dragState.sy ?? 0));
-        if (w < 5 && h < 5) {
-            dragState.el.remove();
-        }
-        else {
-            const a = { id: dragState.id, type: "rect", x: Math.min(dragState.sx ?? 0, p.x), y: Math.min(dragState.sy ?? 0, p.y), width: w, height: h };
-            annotations.push(a);
-            selectEl(dragState.el);
-            const capturedId = dragState.id;
-            dragState.el.addEventListener("mousedown", (ev) => startMove(ev, capturedId));
-        }
+  };
+  var serializeAnnotations = () => {
+    const dpr = window.devicePixelRatio || 1;
+    const s = Math.round;
+    return state.annotations.map((a) => {
+      if (a.type === "rect") {
+        return {
+          type: "rect",
+          target: {
+            x: s((a.x ?? 0) * dpr),
+            y: s((a.y ?? 0) * dpr),
+            width: s((a.width ?? 0) * dpr),
+            height: s((a.height ?? 0) * dpr)
+          },
+          style: { color: "#FF0000", strokeWidth: s(3 * dpr) }
+        };
+      }
+      if (a.type === "arrow") {
+        return {
+          type: "arrow",
+          from: {
+            x: s((a.fromX ?? 0) * dpr),
+            y: s((a.fromY ?? 0) * dpr)
+          },
+          to: {
+            x: s((a.toX ?? 0) * dpr),
+            y: s((a.toY ?? 0) * dpr)
+          },
+          style: { color: "#FF0000", strokeWidth: s(3 * dpr) }
+        };
+      }
+      if (a.type === "label") {
+        return {
+          type: "label",
+          text: a.text,
+          position: {
+            x: s((a.x ?? 0) * dpr),
+            y: s((a.y ?? 0) * dpr)
+          },
+          style: {
+            fontSize: s(14 * dpr),
+            color: "#FF0000",
+            background: "#FFFFFF"
+          }
+        };
+      }
+      return null;
+    }).filter((d) => d !== null);
+  };
+
+  // src/editor/inject-script/toolbar.ts
+  var TOOLBAR_HTML = `
+  <style>
+    /* INT_MAX guarantees kagemusha UI sits above any host SPA dialog / modal. */
+    :root {
+      --kg-z-top: 2147483647;
+      --kg-z-below-top: 2147483646;
     }
-    else if (dragState.type === "create-arrow") {
-        const dist = Math.hypot(p.x - (dragState.sx ?? 0), p.y - (dragState.sy ?? 0));
-        if (dist < 5) {
-            dragState.el.remove();
-        }
-        else {
-            const a = { id: dragState.id, type: "arrow", fromX: dragState.sx, fromY: dragState.sy, toX: p.x, toY: p.y };
-            annotations.push(a);
-            selectEl(dragState.el);
-            const capturedId = dragState.id;
-            dragState.el.addEventListener("mousedown", (ev) => startMove(ev, capturedId));
-        }
+    #kagemusha-toolbar {
+      position: fixed; top: 16px; left: 16px; z-index: var(--kg-z-top);
+      background: #16213e; padding: 8px 16px; display: flex; align-items: center; gap: 10px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.35); font-family: -apple-system, sans-serif;
+      flex-wrap: nowrap; overflow-x: auto;
+      border-radius: 10px;
+      max-width: calc(100vw - 32px);
     }
-    dragState = null;
-});
-// --- LOAD EXISTING ---
-_win.__kagemusha_loadAnnotations = (decorations) => {
-    const dpr = _win.__kagemusha_dpr || 1;
-    for (const d of decorations) {
-        const id = `a${nextId++}`;
-        if (d.type === "rect" && d.target) {
-            const rx = d.target.x / dpr;
-            const ry = d.target.y / dpr + TOOLBAR_HEIGHT;
-            const rw = d.target.width / dpr;
-            const rh = d.target.height / dpr;
-            const rect = document.createElementNS(svgNS, "rect");
-            rect.setAttribute("x", String(rx));
-            rect.setAttribute("y", String(ry));
-            rect.setAttribute("width", String(rw));
-            rect.setAttribute("height", String(rh));
-            rect.setAttribute("fill", "none");
-            rect.setAttribute("stroke", d.style?.color ?? "#FF0000");
-            rect.setAttribute("stroke-width", "3");
-            rect.setAttribute("rx", "4");
-            rect.classList.add("annotation");
-            rect.dataset.id = id;
-            svg.appendChild(rect);
-            annotations.push({ id, type: "rect", x: rx, y: ry, width: rw, height: rh });
-            rect.addEventListener("mousedown", (ev) => startMove(ev, id));
-        }
-        else if (d.type === "arrow" && d.from && d.to) {
-            const ax1 = d.from.x / dpr;
-            const ay1 = d.from.y / dpr + TOOLBAR_HEIGHT;
-            const ax2 = d.to.x / dpr;
-            const ay2 = d.to.y / dpr + TOOLBAR_HEIGHT;
-            const line = document.createElementNS(svgNS, "line");
-            line.setAttribute("x1", String(ax1));
-            line.setAttribute("y1", String(ay1));
-            line.setAttribute("x2", String(ax2));
-            line.setAttribute("y2", String(ay2));
-            line.setAttribute("stroke", d.style?.color ?? "#FF0000");
-            line.setAttribute("stroke-width", "3");
-            line.setAttribute("marker-end", "url(#kg-arrowhead)");
-            line.classList.add("annotation");
-            line.dataset.id = id;
-            svg.appendChild(line);
-            annotations.push({ id, type: "arrow", fromX: ax1, fromY: ay1, toX: ax2, toY: ay2 });
-            line.addEventListener("mousedown", (ev) => startMove(ev, id));
-        }
-        else if (d.type === "label" && d.position) {
-            const lx = d.position.x / dpr;
-            const ly = d.position.y / dpr + TOOLBAR_HEIGHT;
-            const fontSize = (d.style?.fontSize ?? 14) / dpr;
-            const g = createLabelGroup(id, lx, ly, d.text ?? "", fontSize);
-            svg.appendChild(g);
-            annotations.push({ id, type: "label", x: lx, y: ly, text: d.text });
-            g.addEventListener("mousedown", (ev) => startMove(ev, id));
-        }
+    #kagemusha-toolbar .kg-drag-handle {
+      cursor: move; padding: 4px 6px; margin: -2px 2px -2px -10px;
+      color: #888; font-size: 14px; line-height: 1; user-select: none;
+      border-right: 1px solid #2a2a4e;
     }
-};
-// --- SAVE ---
-function save() {
-    const dpr = _win.__kagemusha_dpr || 1;
-    const s = Math.round;
-    const decorations = annotations
-        .map((a) => {
-        if (a.type === "rect") {
-            return { type: "rect", target: { x: s((a.x ?? 0) * dpr), y: s(((a.y ?? 0) - TOOLBAR_HEIGHT) * dpr), width: s((a.width ?? 0) * dpr), height: s((a.height ?? 0) * dpr) }, style: { color: "#FF0000", strokeWidth: s(3 * dpr) } };
-        }
-        if (a.type === "arrow") {
-            return { type: "arrow", from: { x: s((a.fromX ?? 0) * dpr), y: s(((a.fromY ?? 0) - TOOLBAR_HEIGHT) * dpr) }, to: { x: s((a.toX ?? 0) * dpr), y: s(((a.toY ?? 0) - TOOLBAR_HEIGHT) * dpr) }, style: { color: "#FF0000", strokeWidth: s(3 * dpr) } };
+    #kagemusha-toolbar .kg-drag-handle:hover { color: #fff; }
+    #kagemusha-toolbar.kg-dragging { opacity: 0.95; cursor: grabbing; }
+    #kagemusha-toolbar button {
+      padding: 6px 12px; border: 1px solid #444; border-radius: 6px;
+      background: #1a1a2e; color: #fff; font-size: 13px; cursor: pointer;
+    }
+    #kagemusha-toolbar button:hover { background: #2a2a4e; }
+    #kagemusha-toolbar button.active { background: #6366f1; border-color: #6366f1; }
+    #kagemusha-toolbar button.cap-btn.active { background: #0ea5e9; border-color: #0ea5e9; }
+    #kagemusha-toolbar button#kg-record.active { background: #ef4444; border-color: #ef4444; }
+    #kagemusha-toolbar button.picking {
+      background: #0ea5e9; border-color: #0ea5e9; color: #fff;
+      box-shadow: 0 0 0 2px rgba(14,165,233,0.4);
+      animation: kg-picking-pulse 1.2s ease-in-out infinite;
+    }
+    @keyframes kg-picking-pulse {
+      0%, 100% { box-shadow: 0 0 0 2px rgba(14,165,233,0.4); }
+      50%      { box-shadow: 0 0 0 6px rgba(14,165,233,0.1); }
+    }
+    #kagemusha-toolbar button:disabled { opacity: 0.4; cursor: not-allowed; }
+    #kagemusha-toolbar #kg-rec-group { display: none; align-items: center; gap: 10px; }
+    #kagemusha-toolbar #kg-rec-group.visible { display: flex; }
+    #kagemusha-toolbar #kg-steps-toggle.has-steps { background: #6366f1; border-color: #6366f1; }
+    #kagemusha-toolbar #kg-steps-toggle.open { background: #6366f1; border-color: #6366f1; }
+    .kagemusha-picker-outline {
+      position: fixed; border: 2px solid #0ea5e9;
+      background: rgba(14,165,233,0.08); pointer-events: none;
+      z-index: var(--kg-z-below-top); border-radius: 2px;
+      transition: all 60ms ease-out;
+    }
+    #kagemusha-toolbar .sep { width: 1px; height: 24px; background: #444; }
+    #kagemusha-toolbar .title { color: #888; font-size: 13px; }
+    #kagemusha-toolbar .group-label { color: #7a89b0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-right: -4px; }
+    #kagemusha-toolbar .save-btn { background: #22c55e; border-color: #22c55e; font-weight: 600; margin-left: auto; }
+    #kagemusha-toolbar .save-btn:hover { background: #16a34a; }
+    #kagemusha-svg-layer {
+      position: absolute; top: 0; left: 0; width: 100%;
+      z-index: var(--kg-z-below-top); pointer-events: none;
+    }
+    #kagemusha-svg-layer.drawing { pointer-events: auto; cursor: crosshair; }
+    #kagemusha-svg-layer.cropping { pointer-events: auto; cursor: crosshair; }
+    #kagemusha-svg-layer .annotation { pointer-events: auto; cursor: move; }
+    #kagemusha-svg-layer.cropping .annotation { pointer-events: none; }
+    #kagemusha-svg-layer .annotation.selected { filter: drop-shadow(0 0 3px #6366f1); }
+    #kagemusha-svg-layer .capture-crop-box { fill: rgba(14,165,233,0.10); stroke: #0ea5e9; stroke-width: 2; stroke-dasharray: 8 4; pointer-events: none; }
+    #kagemusha-svg-layer.cropping .capture-crop-box { pointer-events: auto; cursor: move; }
+    #kagemusha-svg-layer .crop-handle { fill: #fff; stroke: #0ea5e9; stroke-width: 2; pointer-events: none; }
+    #kagemusha-svg-layer.cropping .crop-handle { pointer-events: auto; }
+    #kagemusha-svg-layer .crop-handle.nw, #kagemusha-svg-layer .crop-handle.se { cursor: nwse-resize; }
+    #kagemusha-svg-layer .crop-handle.ne, #kagemusha-svg-layer .crop-handle.sw { cursor: nesw-resize; }
+    #kagemusha-svg-layer .crop-handle.n, #kagemusha-svg-layer .crop-handle.s { cursor: ns-resize; }
+    #kagemusha-svg-layer .crop-handle.e, #kagemusha-svg-layer .crop-handle.w { cursor: ew-resize; }
+    .kagemusha-hint {
+      position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
+      color: #fff; background: rgba(0,0,0,0.7); padding: 6px 16px; border-radius: 8px;
+      font-size: 12px; z-index: var(--kg-z-top); font-family: -apple-system, sans-serif;
+    }
+  </style>
+  <span class="kg-drag-handle" title="Drag to move toolbar">\u22EE\u22EE</span>
+  <span class="title">\u{1F977}</span>
+  <div class="sep"></div>
+  <span class="group-label">Capture</span>
+  <button id="kg-cap-full" class="cap-btn active">\u{1F4F7} Full</button>
+  <button id="kg-cap-crop" class="cap-btn">\u2702\uFE0F Crop</button>
+  <div class="sep"></div>
+  <span class="group-label">Annotate</span>
+  <button id="kg-tool-rect" class="active">\u25AD Rect</button>
+  <button id="kg-tool-arrow">\u2192 Arrow</button>
+  <button id="kg-tool-label">T Label</button>
+  <div class="sep"></div>
+  <span class="group-label">Pre-steps</span>
+  <button id="kg-record">\u{1F534} Record</button>
+  <div id="kg-rec-group">
+    <button id="kg-rec-wait">+ Wait</button>
+    <button id="kg-rec-wfs">+ WaitForSelector</button>
+    <button id="kg-rec-hover">+ Hover</button>
+  </div>
+  <button id="kg-steps-toggle">\u{1F4CB} Steps (0)</button>
+  <div class="sep"></div>
+  <button id="kg-delete">\u{1F5D1} Delete</button>
+  <button class="save-btn" id="kg-save">\u{1F4BE} Save</button>
+`;
+  var svgRef = null;
+  var cropOnEnter = () => {
+  };
+  var cropOnExit = () => {
+  };
+  var callbacks = null;
+  var initToolbar = (cb, svg2) => {
+    callbacks = cb;
+    svgRef = svg2;
+    const toolbar = document.createElement("div");
+    toolbar.id = "kagemusha-toolbar";
+    toolbar.innerHTML = TOOLBAR_HTML;
+    document.documentElement.appendChild(toolbar);
+    const hint = document.createElement("div");
+    hint.className = "kagemusha-hint";
+    hint.textContent = "Click and drag to add annotations. Click to select. Press Delete to remove.";
+    document.documentElement.appendChild(hint);
+    document.getElementById("kg-tool-rect")?.addEventListener("click", () => setTool("rect"));
+    document.getElementById("kg-tool-arrow")?.addEventListener("click", () => setTool("arrow"));
+    document.getElementById("kg-tool-label")?.addEventListener("click", () => setTool("label"));
+    document.getElementById("kg-cap-full")?.addEventListener("click", () => setCaptureMode("fullPage"));
+    document.getElementById("kg-cap-crop")?.addEventListener(
+      "click",
+      () => setCaptureMode("crop", { resetSelection: !state.captureCrop })
+    );
+    document.getElementById("kg-delete")?.addEventListener("click", () => cb.onDelete());
+    document.getElementById("kg-save")?.addEventListener("click", () => cb.onSave());
+    wireDragHandle(toolbar);
+  };
+  var wireDragHandle = (toolbar) => {
+    const handle = toolbar.querySelector(".kg-drag-handle");
+    if (!handle) return;
+    let dragging = false;
+    let offsetX = 0;
+    let offsetY = 0;
+    handle.addEventListener("mousedown", (e) => {
+      const m = e;
+      m.preventDefault();
+      const rect = toolbar.getBoundingClientRect();
+      offsetX = m.clientX - rect.left;
+      offsetY = m.clientY - rect.top;
+      dragging = true;
+      toolbar.classList.add("kg-dragging");
+      document.body.style.userSelect = "none";
+    });
+    document.addEventListener("mousemove", (e) => {
+      if (!dragging) return;
+      const x = Math.max(
+        0,
+        Math.min(window.innerWidth - toolbar.offsetWidth, e.clientX - offsetX)
+      );
+      const y = Math.max(
+        0,
+        Math.min(window.innerHeight - toolbar.offsetHeight, e.clientY - offsetY)
+      );
+      toolbar.style.left = `${x}px`;
+      toolbar.style.top = `${y}px`;
+    });
+    document.addEventListener("mouseup", () => {
+      if (!dragging) return;
+      dragging = false;
+      toolbar.classList.remove("kg-dragging");
+      document.body.style.userSelect = "";
+    });
+  };
+  var updateCaptureUi = () => {
+    document.querySelectorAll("#kagemusha-toolbar .cap-btn").forEach((b) => {
+      b.classList.remove("active");
+    });
+    const activeId = state.captureMode === "fullPage" ? "kg-cap-full" : "kg-cap-crop";
+    document.getElementById(activeId)?.classList.add("active");
+    if (svgRef) {
+      svgRef.classList.toggle("cropping", state.tool === "crop");
+      svgRef.classList.toggle(
+        "drawing",
+        state.tool === "rect" || state.tool === "arrow" || state.tool === "label"
+      );
+    }
+  };
+  var setTool = (t) => {
+    state.tool = t;
+    document.querySelectorAll(
+      "#kg-tool-rect, #kg-tool-arrow, #kg-tool-label"
+    ).forEach((b) => {
+      b.classList.remove("active");
+    });
+    if (t === "rect" || t === "arrow" || t === "label") {
+      document.getElementById(`kg-tool-${t}`)?.classList.add("active");
+    }
+    updateCaptureUi();
+    callbacks?.onToolChange(t);
+  };
+  var setCaptureMode = (mode, opts = {}) => {
+    state.captureMode = mode;
+    if (mode === "fullPage") {
+      state.captureCrop = null;
+      cropOnExit();
+      setTool("rect");
+    } else {
+      if (opts.resetSelection) state.captureCrop = null;
+      cropOnEnter();
+      state.tool = "crop";
+      updateCaptureUi();
+    }
+    callbacks?.onToolChange(state.tool);
+  };
+  var registerCropHooks = (onEnter, onExit) => {
+    cropOnEnter = onEnter;
+    cropOnExit = onExit;
+  };
+
+  // src/editor/inject-script/crop.ts
+  var HANDLE_POSITIONS = [
+    { handle: "nw", pos: (c) => ({ cx: c.x, cy: c.y }) },
+    { handle: "n", pos: (c) => ({ cx: c.x + c.w / 2, cy: c.y }) },
+    { handle: "ne", pos: (c) => ({ cx: c.x + c.w, cy: c.y }) },
+    { handle: "e", pos: (c) => ({ cx: c.x + c.w, cy: c.y + c.h / 2 }) },
+    { handle: "se", pos: (c) => ({ cx: c.x + c.w, cy: c.y + c.h }) },
+    { handle: "s", pos: (c) => ({ cx: c.x + c.w / 2, cy: c.y + c.h }) },
+    { handle: "sw", pos: (c) => ({ cx: c.x, cy: c.y + c.h }) },
+    { handle: "w", pos: (c) => ({ cx: c.x, cy: c.y + c.h / 2 }) }
+  ];
+  var clearVisual = () => {
+    getCaptureGroup().replaceChildren();
+  };
+  var redrawVisual = () => {
+    if (state.captureMode !== "crop" || !state.captureCrop) {
+      clearVisual();
+      return;
+    }
+    clearVisual();
+    const g = getCaptureGroup();
+    const c = state.captureCrop;
+    const r = document.createElementNS(SVG_NS, "rect");
+    r.setAttribute("x", String(c.x));
+    r.setAttribute("y", String(c.y));
+    r.setAttribute("width", String(c.w));
+    r.setAttribute("height", String(c.h));
+    r.setAttribute("class", "capture-crop-box");
+    g.appendChild(r);
+    for (const { handle, pos } of HANDLE_POSITIONS) {
+      const { cx, cy } = pos(c);
+      const h = document.createElementNS(SVG_NS, "rect");
+      h.setAttribute("x", String(cx - HANDLE_SIZE / 2));
+      h.setAttribute("y", String(cy - HANDLE_SIZE / 2));
+      h.setAttribute("width", String(HANDLE_SIZE));
+      h.setAttribute("height", String(HANDLE_SIZE));
+      h.setAttribute("class", `crop-handle ${handle}`);
+      h.dataset.handle = handle;
+      g.appendChild(h);
+    }
+  };
+  var initCrop = () => {
+    registerCropHooks(
+      // onEnter: redraw existing selection (if any)
+      () => redrawVisual(),
+      // onExit: clear visualization
+      () => clearVisual()
+    );
+  };
+  var handleMouseDown2 = (e) => {
+    if (state.tool !== "crop") return false;
+    e.preventDefault();
+    const p = getMousePos(e);
+    const target = e.target;
+    const handleAttr = target.dataset?.handle;
+    if (handleAttr && state.captureCrop) {
+      state.cropDragState = {
+        kind: "resize",
+        handle: handleAttr,
+        sx: p.x,
+        sy: p.y,
+        orig: { ...state.captureCrop }
+      };
+      return true;
+    }
+    if (target?.classList?.contains("capture-crop-box") && state.captureCrop) {
+      state.cropDragState = {
+        kind: "move",
+        sx: p.x,
+        sy: p.y,
+        orig: { ...state.captureCrop }
+      };
+      return true;
+    }
+    state.cropDragState = { kind: "create", sx: p.x, sy: p.y };
+    state.captureCrop = null;
+    clearVisual();
+    const r = document.createElementNS(SVG_NS, "rect");
+    r.setAttribute("x", String(p.x));
+    r.setAttribute("y", String(p.y));
+    r.setAttribute("width", "0");
+    r.setAttribute("height", "0");
+    r.setAttribute("class", "capture-crop-box");
+    getCaptureGroup().appendChild(r);
+    return true;
+  };
+  var handleMouseMove2 = (e) => {
+    const cds = state.cropDragState;
+    if (!cds) return false;
+    const p = getMousePos(e);
+    if (cds.kind === "create") {
+      const x = Math.min(cds.sx, p.x);
+      const y = Math.min(cds.sy, p.y);
+      const w = Math.abs(p.x - cds.sx);
+      const h2 = Math.abs(p.y - cds.sy);
+      const r = getCaptureGroup().firstChild;
+      if (r) {
+        r.setAttribute("x", String(x));
+        r.setAttribute("y", String(y));
+        r.setAttribute("width", String(w));
+        r.setAttribute("height", String(h2));
+      }
+      return true;
+    }
+    if (cds.kind === "move") {
+      const dx2 = p.x - cds.sx;
+      const dy2 = p.y - cds.sy;
+      state.captureCrop = {
+        x: cds.orig.x + dx2,
+        y: cds.orig.y + dy2,
+        w: cds.orig.w,
+        h: cds.orig.h
+      };
+      redrawVisual();
+      return true;
+    }
+    const dx = p.x - cds.sx;
+    const dy = p.y - cds.sy;
+    const o = cds.orig;
+    let nx = o.x;
+    let ny = o.y;
+    let nw = o.w;
+    let nh = o.h;
+    const h = cds.handle;
+    if (h.includes("w")) {
+      nx = o.x + dx;
+      nw = o.w - dx;
+    }
+    if (h.includes("e")) {
+      nw = o.w + dx;
+    }
+    if (h.includes("n")) {
+      ny = o.y + dy;
+      nh = o.h - dy;
+    }
+    if (h.includes("s")) {
+      nh = o.h + dy;
+    }
+    if (nw < MIN_CROP) {
+      if (h.includes("w")) nx = o.x + (o.w - MIN_CROP);
+      nw = MIN_CROP;
+    }
+    if (nh < MIN_CROP) {
+      if (h.includes("n")) ny = o.y + (o.h - MIN_CROP);
+      nh = MIN_CROP;
+    }
+    state.captureCrop = { x: nx, y: ny, w: nw, h: nh };
+    redrawVisual();
+    return true;
+  };
+  var handleMouseUp2 = (e) => {
+    const cds = state.cropDragState;
+    if (!cds) return false;
+    if (cds.kind === "create") {
+      const p = getMousePos(e);
+      const w = Math.abs(p.x - cds.sx);
+      const h = Math.abs(p.y - cds.sy);
+      if (w < 5 || h < 5) {
+        state.cropDragState = null;
+        redrawVisual();
+        return true;
+      }
+      state.captureCrop = {
+        x: Math.min(cds.sx, p.x),
+        y: Math.min(cds.sy, p.y),
+        w,
+        h
+      };
+    }
+    state.cropDragState = null;
+    redrawVisual();
+    return true;
+  };
+  var loadCapture = (capture, setMode) => {
+    if (!capture || !["fullPage", "crop"].includes(capture.mode)) {
+      setMode("fullPage");
+      return;
+    }
+    if (capture.mode === "fullPage") {
+      setMode("fullPage");
+      return;
+    }
+    if (capture.mode === "crop") {
+      const sx = capture.crop.start.x;
+      const sy = capture.crop.start.y;
+      const ex = capture.crop.end.x;
+      const ey = capture.crop.end.y;
+      state.captureCrop = { x: sx, y: sy, w: ex - sx, h: ey - sy };
+      state.captureMode = "crop";
+      setMode("crop");
+      redrawVisual();
+    }
+  };
+  var serializeCapture = () => {
+    if (state.captureMode === "crop" && state.captureCrop) {
+      const c = state.captureCrop;
+      return {
+        mode: "crop",
+        crop: {
+          start: { x: Math.round(c.x), y: Math.round(c.y) },
+          end: {
+            x: Math.round(c.x + c.w),
+            y: Math.round(c.y + c.h)
+          }
         }
-        if (a.type === "label") {
-            return { type: "label", text: a.text, position: { x: s((a.x ?? 0) * dpr), y: s(((a.y ?? 0) - TOOLBAR_HEIGHT) * dpr) }, style: { fontSize: s(14 * dpr), color: "#FF0000", background: "#FFFFFF" } };
+      };
+    }
+    return { mode: "fullPage" };
+  };
+
+  // src/editor/inject-script/selector.ts
+  var escapeQuotes = (s) => s.replace(/"/g, '\\"');
+  var inferRole = (el) => {
+    const tag = el.tagName;
+    if (tag === "BUTTON") return "button";
+    if (tag === "A" && el.hasAttribute("href")) return "link";
+    if (tag === "INPUT") {
+      const type = el.type;
+      if (type === "button" || type === "submit") return "button";
+      if (type === "checkbox") return "checkbox";
+      if (type === "radio") return "radio";
+    }
+    return null;
+  };
+  var isInteractiveAncestor = (el) => {
+    let cur = el;
+    while (cur) {
+      if (cur.tagName === "BUTTON" || cur.tagName === "A" || cur.getAttribute("role") === "button" || cur.getAttribute("role") === "link" || cur.hasAttribute("data-testid")) {
+        return cur;
+      }
+      cur = cur.parentElement;
+    }
+    return null;
+  };
+  var cssPath = (el) => {
+    const parts = [];
+    let cur = el;
+    let depth = 0;
+    while (cur && depth < 4 && cur !== document.body) {
+      const node = cur;
+      const tag = node.tagName;
+      let segment = tag.toLowerCase();
+      const id = node.id;
+      if (id && /^[a-zA-Z][\w-]*$/.test(id)) {
+        parts.unshift(`#${id}`);
+        break;
+      }
+      const parent = node.parentElement;
+      if (parent) {
+        const siblings = Array.from(parent.children).filter(
+          (c) => c.tagName === tag
+        );
+        if (siblings.length > 1) {
+          const idx = siblings.indexOf(node) + 1;
+          segment += `:nth-of-type(${idx})`;
         }
-        return null;
-    })
-        .filter((d) => d !== null);
-    _win.__kagemusha_save(JSON.stringify(decorations));
-}
-export {};
-//# sourceMappingURL=inject-script.js.map
+      }
+      parts.unshift(segment);
+      cur = parent;
+      depth++;
+    }
+    return parts.join(" > ");
+  };
+  var computeSelector = (raw) => {
+    const el = isInteractiveAncestor(raw) ?? raw;
+    const testId = el.getAttribute("data-testid");
+    if (testId) {
+      return {
+        selector: `[data-testid="${escapeQuotes(testId)}"]`,
+        quality: "good"
+      };
+    }
+    const ariaLabel = el.getAttribute("aria-label");
+    if (ariaLabel) {
+      return {
+        selector: `[aria-label="${escapeQuotes(ariaLabel)}"]`,
+        quality: "good"
+      };
+    }
+    const role = el.getAttribute("role") ?? inferRole(el);
+    const text = el.textContent?.trim();
+    if (role && text && text.length > 0 && text.length < 50) {
+      return { selector: `text="${escapeQuotes(text)}"`, quality: "good" };
+    }
+    if (text && text.length > 0 && text.length < 50 && !/\n/.test(text)) {
+      return { selector: `text="${escapeQuotes(text)}"`, quality: "good" };
+    }
+    return { selector: cssPath(el), quality: "fallback" };
+  };
+
+  // src/editor/inject-script/record.ts
+  var KAGEMUSHA_UI_SELECTORS = [
+    "#kagemusha-toolbar",
+    "#kagemusha-svg-layer",
+    ".kagemusha-hint",
+    ".kagemusha-steps-panel",
+    ".kagemusha-prompt"
+  ];
+  var isOwnUi = (el) => {
+    if (!(el instanceof Element)) return false;
+    return KAGEMUSHA_UI_SELECTORS.some((s) => el.closest(s) !== null);
+  };
+  var svgRef2 = null;
+  var panelEl = null;
+  var pickerOutlineEl = null;
+  var panelOpen = false;
+  var ensurePanel = () => {
+    if (panelEl) return panelEl;
+    const div = document.createElement("div");
+    div.className = "kagemusha-steps-panel";
+    div.setAttribute(
+      "style",
+      // Anchored just below the toolbar (top: 60px) so it's visible without
+      // scrolling. Fills available vertical space minus a small bottom margin.
+      "position:fixed;top:60px;right:16px;width:340px;max-height:calc(100vh - 80px);overflow-y:auto;background:#1a1a2e;color:#fff;padding:12px 16px;border-radius:8px;font-family:-apple-system,sans-serif;font-size:12px;line-height:1.5;z-index:var(--kg-z-top);box-shadow:0 4px 16px rgba(0,0,0,0.4);display:none;"
+    );
+    document.documentElement.appendChild(div);
+    panelEl = div;
+    return div;
+  };
+  var renderPanel = () => {
+    const panel = ensurePanel();
+    updateToggleButton();
+    if (!panelOpen) {
+      panel.style.display = "none";
+      return;
+    }
+    panel.style.display = "block";
+    const header = state.recording ? `<div style="color:#ef4444;font-weight:600;margin-bottom:6px;">\u{1F4F9} Recording... (${state.recordedSteps.length} steps)</div>` : `<div style="color:#7a89b0;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">Steps (${state.recordedSteps.length})</div>`;
+    const rows = state.recordedSteps.map((s, i) => `<div>${i + 1}. ${renderStepLine(s)}</div>`).join("");
+    panel.innerHTML = `${header}${rows || '<div style="color:#888;">(no steps)</div>'}`;
+  };
+  var updateToggleButton = () => {
+    const btn = document.getElementById("kg-steps-toggle");
+    if (!btn) return;
+    const n = state.recordedSteps.length;
+    const recording = state.recording;
+    btn.textContent = recording ? `\u{1F4F9} Steps (${n})` : n > 0 ? `\u{1F4CB} Steps (${n})` : "\u{1F4CB} Steps (0)";
+    btn.classList.toggle("has-steps", n > 0 && !panelOpen);
+    btn.classList.toggle("open", panelOpen);
+  };
+  var openPanel = () => {
+    panelOpen = true;
+    renderPanel();
+  };
+  var closePanel = () => {
+    panelOpen = false;
+    renderPanel();
+  };
+  var togglePanel = () => {
+    if (panelOpen) closePanel();
+    else openPanel();
+  };
+  var escapeHtml = (v) => v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  var optBadge = (s) => s.optional ? ' <span style="color:#7a89b0;font-size:10px;background:#2a2a4e;padding:1px 5px;border-radius:3px;margin-left:4px;">optional</span>' : "";
+  var renderStepLine = (s) => {
+    switch (s.action) {
+      case "click":
+        return `<b>click</b> ${escapeHtml(s.selector)}${optBadge(s)}`;
+      case "type":
+        return `<b>type</b> ${escapeHtml(s.selector)} \u2192 "${escapeHtml(s.text)}"${optBadge(s)}`;
+      case "select":
+        return `<b>select</b> ${escapeHtml(s.selector)} \u2192 "${escapeHtml(s.value)}"${optBadge(s)}`;
+      case "hover":
+        return `<b>hover</b> ${escapeHtml(s.selector)}${optBadge(s)}`;
+      case "wait":
+        return `<b>wait</b> ${s.ms}ms`;
+      case "waitForSelector":
+        return `<b>waitForSelector</b> ${escapeHtml(s.selector)}${s.timeout ? ` (${s.timeout}ms)` : ""}${optBadge(s)}`;
+      default:
+        return `<b>${s.action}</b>`;
+    }
+  };
+  var updateToolbarLockState = () => {
+    const lock = state.recording;
+    for (const id of [
+      "kg-tool-rect",
+      "kg-tool-arrow",
+      "kg-tool-label",
+      "kg-cap-full",
+      "kg-cap-crop",
+      "kg-delete"
+    ]) {
+      const btn = document.getElementById(id);
+      if (btn) btn.disabled = lock;
+    }
+    const group = document.getElementById("kg-rec-group");
+    if (group) group.classList.toggle("visible", lock);
+    const recBtn = document.getElementById("kg-record");
+    if (recBtn) {
+      recBtn.textContent = state.recording ? "\u23F9 Stop" : "\u{1F534} Record";
+      recBtn.classList.toggle("active", state.recording);
+    }
+    if (svgRef2) {
+      svgRef2.style.pointerEvents = state.recording ? "none" : "";
+    }
+  };
+  var setRecording = (on) => {
+    if (on) {
+      if (state.recordedSteps.length > 0) {
+        const ok = window.confirm(
+          `Recording will replace the existing ${state.recordedSteps.length} step(s). Continue?`
+        );
+        if (!ok) return;
+      }
+      state.recordedSteps = [];
+      state.recording = true;
+    } else {
+      state.recording = false;
+      cancelPicker();
+    }
+    updateToolbarLockState();
+    renderPanel();
+  };
+  var pickerButtonId = (kind) => kind === "hover" ? "kg-rec-hover" : "kg-rec-wfs";
+  var startPicker = (kind) => {
+    if (!state.recording) return;
+    state.pickerKind = kind;
+    document.getElementById(pickerButtonId(kind))?.classList.add("picking");
+    if (svgRef2) svgRef2.style.cursor = "crosshair";
+    showPrompt(
+      kind === "hover" ? "Hover an element, click to confirm. ESC to cancel." : "Hover an element, click to confirm. ESC to cancel."
+    );
+  };
+  var cancelPicker = () => {
+    if (state.pickerKind) {
+      document.getElementById(pickerButtonId(state.pickerKind))?.classList.remove("picking");
+    }
+    state.pickerKind = null;
+    if (svgRef2) svgRef2.style.cursor = "";
+    hidePrompt();
+    hidePickerOutline();
+  };
+  var ensurePickerOutline = () => {
+    if (pickerOutlineEl) return pickerOutlineEl;
+    const div = document.createElement("div");
+    div.className = "kagemusha-picker-outline";
+    div.style.display = "none";
+    document.documentElement.appendChild(div);
+    pickerOutlineEl = div;
+    return div;
+  };
+  var showPickerOutline = (rect) => {
+    const el = ensurePickerOutline();
+    el.style.display = "block";
+    el.style.left = `${rect.left}px`;
+    el.style.top = `${rect.top}px`;
+    el.style.width = `${rect.width}px`;
+    el.style.height = `${rect.height}px`;
+  };
+  var hidePickerOutline = () => {
+    if (pickerOutlineEl) pickerOutlineEl.style.display = "none";
+  };
+  var promptEl = null;
+  var showPrompt = (message) => {
+    if (!promptEl) {
+      const div = document.createElement("div");
+      div.className = "kagemusha-prompt";
+      div.setAttribute(
+        "style",
+        "position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#0ea5e9;color:#fff;padding:10px 18px;border-radius:8px;font-family:-apple-system,sans-serif;font-size:13px;z-index:var(--kg-z-top);box-shadow:0 4px 12px rgba(0,0,0,0.3);"
+      );
+      document.documentElement.appendChild(div);
+      promptEl = div;
+    }
+    promptEl.textContent = message;
+    promptEl.style.display = "block";
+  };
+  var hidePrompt = () => {
+    if (promptEl) promptEl.style.display = "none";
+  };
+  var onClickCapture = (e) => {
+    if (!state.recording) return;
+    if (isOwnUi(e.target)) return;
+    const el = e.target;
+    if (!el) return;
+    if (state.pickerKind) {
+      e.preventDefault();
+      e.stopPropagation();
+      const kind = state.pickerKind;
+      const sel2 = computeSelector(el);
+      if (kind === "hover") {
+        state.recordedSteps.push({ action: "hover", selector: sel2.selector });
+      } else {
+        state.recordedSteps.push({
+          action: "waitForSelector",
+          selector: sel2.selector
+        });
+      }
+      cancelPicker();
+      renderPanel();
+      return;
+    }
+    const sel = computeSelector(el);
+    state.recordedSteps.push({
+      action: "click",
+      selector: sel.selector,
+      optional: true
+    });
+    renderPanel();
+  };
+  var onChangeCapture = (e) => {
+    if (!state.recording) return;
+    if (isOwnUi(e.target)) return;
+    const target = e.target;
+    if (!target) return;
+    if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+      const input = target;
+      const type = input.type;
+      if (type === "checkbox" || type === "radio") return;
+      const sel = computeSelector(input);
+      state.recordedSteps.push({
+        action: "type",
+        selector: sel.selector,
+        text: input.value,
+        optional: true
+      });
+      renderPanel();
+      return;
+    }
+    if (target.tagName === "SELECT") {
+      const select = target;
+      const sel = computeSelector(select);
+      state.recordedSteps.push({
+        action: "select",
+        selector: sel.selector,
+        value: select.value,
+        optional: true
+      });
+      renderPanel();
+    }
+  };
+  var onKeyDownCapture = (e) => {
+    if (state.pickerKind && e.key === "Escape") {
+      cancelPicker();
+    }
+  };
+  var onMouseMoveCapture = (e) => {
+    if (!state.pickerKind) return;
+    if (isOwnUi(e.target)) {
+      hidePickerOutline();
+      return;
+    }
+    const el = e.target;
+    if (!el) return;
+    showPickerOutline(el.getBoundingClientRect());
+  };
+  var onOutsideClick = (e) => {
+    if (!panelOpen) return;
+    const target = e.target;
+    if (!target) return;
+    if (target.closest(".kagemusha-steps-panel")) return;
+    if (target.closest("#kg-steps-toggle")) return;
+    closePanel();
+  };
+  var promptForWaitMs = () => {
+    const raw = window.prompt("Wait for how many milliseconds?", "3000");
+    if (raw === null) return;
+    const ms = Number.parseInt(raw, 10);
+    if (Number.isNaN(ms) || ms <= 0) return;
+    state.recordedSteps.push({ action: "wait", ms });
+    renderPanel();
+  };
+  var initRecord = (svg2) => {
+    svgRef2 = svg2;
+    ensurePanel();
+    document.getElementById("kg-record")?.addEventListener("click", () => setRecording(!state.recording));
+    document.getElementById("kg-rec-wait")?.addEventListener("click", () => promptForWaitMs());
+    document.getElementById("kg-rec-wfs")?.addEventListener("click", () => startPicker("waitForSelector"));
+    document.getElementById("kg-rec-hover")?.addEventListener("click", () => startPicker("hover"));
+    document.getElementById("kg-steps-toggle")?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      togglePanel();
+    });
+    document.addEventListener("click", onClickCapture, true);
+    document.addEventListener("change", onChangeCapture, true);
+    document.addEventListener("keydown", onKeyDownCapture, true);
+    document.addEventListener("mousemove", onMouseMoveCapture, true);
+    document.addEventListener("click", onOutsideClick);
+    updateToolbarLockState();
+    renderPanel();
+  };
+  var loadSteps = (steps) => {
+    state.recordedSteps = [...steps];
+    renderPanel();
+  };
+  var serializeSteps = () => [...state.recordedSteps];
+
+  // src/editor/inject-script/bridge.ts
+  var save = () => {
+    if (state.captureMode === "crop" && !state.captureCrop) {
+      showErrorToast(
+        "Crop mode is active but no area is drawn.\nDrag to define an area, or switch to Full Page."
+      );
+      return;
+    }
+    const decorations = serializeAnnotations();
+    const capture = serializeCapture();
+    const beforeCapture = serializeSteps();
+    window.__kagemusha_save(
+      JSON.stringify({ decorations, capture, beforeCapture })
+    );
+  };
+  var initBridge = () => {
+    window.__kagemusha_loadAnnotations = (decorations) => {
+      loadAnnotations(decorations);
+    };
+    window.__kagemusha_loadCapture = (capture) => {
+      loadCapture(capture, (mode) => setCaptureMode(mode));
+    };
+    window.__kagemusha_loadSteps = (steps) => {
+      loadSteps(steps);
+    };
+    return { save };
+  };
+
+  // src/editor/inject-script/index.ts
+  document.documentElement.style.overflow = "hidden";
+  var { svg } = initSvgLayer();
+  var bridgeSave = () => {
+  };
+  initToolbar(
+    {
+      onToolChange: () => {
+      },
+      onSave: () => bridgeSave(),
+      onDelete: () => deleteSelected()
+    },
+    svg
+  );
+  initCrop();
+  initRecord(svg);
+  ({ save: bridgeSave } = initBridge());
+  svg.addEventListener("mousedown", (e) => {
+    if (handleMouseDown2(e)) return;
+    handleMouseDown(e);
+  });
+  document.addEventListener("mousemove", (e) => {
+    if (handleMouseMove2(e)) return;
+    handleMouseMove(e);
+  });
+  document.addEventListener("mouseup", (e) => {
+    if (handleMouseUp2(e)) return;
+    handleMouseUp(e);
+  });
+  document.addEventListener(
+    "keydown",
+    (e) => handleKeyDown(e)
+  );
+})();