@wasao/kagemusha 0.1.0 → 0.2.0

package/dist/editor/inject-script.js

@@ -0,0 +1,768 @@
+// 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_FALLBACK = 48;
+let toolbarHeight = TOOLBAR_HEIGHT_FALLBACK;
+const svgNS = "http://www.w3.org/2000/svg";
+let tool = "rect";
+let annotations = [];
+let selectedId = null;
+let dragState = null;
+let nextId = 1;
+// Capture state — persisted on save (in page CSS pixels, NOT DPR-scaled)
+let captureMode = "fullPage";
+let captureCrop = null;
+let cropDragState = null;
+const HANDLE_SIZE = 10;
+const MIN_CROP = 10;
+// --- 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: 10px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3); font-family: -apple-system, sans-serif;
+      flex-wrap: nowrap; overflow-x: auto;
+    }
+    #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 .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: 999998; 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: 999999; font-family: -apple-system, sans-serif;
+    }
+  </style>
+  <span class="title">🥷</span>
+  <span class="group-label">Capture</span>
+  <button id="kg-cap-full" class="cap-btn active">📷 Full</button>
+  <button id="kg-cap-crop" class="cap-btn">✂️ Crop</button>
+  <div class="sep"></div>
+  <span class="group-label">Annotate</span>
+  <button id="kg-tool-rect" class="active">▭ Rect</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);
+toolbarHeight =
+    Math.ceil(toolbar.getBoundingClientRect().height) || TOOLBAR_HEIGHT_FALLBACK;
+document.body.style.paddingTop = `${toolbarHeight}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);
+// Capture layer goes BEFORE annotations so it renders behind them
+const captureGroup = document.createElementNS(svgNS, "g");
+captureGroup.id = "kagemusha-capture-group";
+svg.appendChild(captureGroup);
+// --- 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");
+    tmp.setAttribute("font-size", String(fontSize));
+    tmp.setAttribute("font-family", "-apple-system, sans-serif");
+    tmp.textContent = text;
+    svg.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");
+    g.classList.add("annotation");
+    g.dataset.id = id;
+    const bg = document.createElementNS(svgNS, "rect");
+    const txt = document.createElementNS(svgNS, "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;
+    bg.setAttribute("x", String(x));
+    bg.setAttribute("y", String(y));
+    bg.setAttribute("width", String(tw));
+    bg.setAttribute("height", "24");
+    bg.setAttribute("fill", "#FFFFFF");
+    bg.setAttribute("rx", "4");
+    g.appendChild(bg);
+    g.appendChild(txt);
+    return g;
+};
+// --- CAPTURE HELPERS ---
+const clearCaptureVisual = () => {
+    captureGroup.replaceChildren();
+};
+const 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 }) },
+];
+const redrawCropVisual = () => {
+    if (captureMode !== "crop" || !captureCrop) {
+        clearCaptureVisual();
+        return;
+    }
+    clearCaptureVisual();
+    const r = document.createElementNS(svgNS, "rect");
+    r.setAttribute("x", String(captureCrop.x));
+    r.setAttribute("y", String(captureCrop.y));
+    r.setAttribute("width", String(captureCrop.w));
+    r.setAttribute("height", String(captureCrop.h));
+    r.setAttribute("class", "capture-crop-box");
+    captureGroup.appendChild(r);
+    for (const { handle, pos } of HANDLE_POSITIONS) {
+        const { cx, cy } = pos(captureCrop);
+        const h = document.createElementNS(svgNS, "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;
+        captureGroup.appendChild(h);
+    }
+};
+const updateCaptureUi = () => {
+    document
+        .querySelectorAll("#kagemusha-toolbar .cap-btn")
+        .forEach((b) => {
+        b.classList.remove("active");
+    });
+    const activeId = captureMode === "fullPage" ? "kg-cap-full" : "kg-cap-crop";
+    document.getElementById(activeId)?.classList.add("active");
+    svg.classList.toggle("cropping", tool === "crop");
+    svg.classList.toggle("drawing", tool === "rect" || tool === "arrow" || tool === "label");
+};
+const setCaptureMode = (mode, opts = {}) => {
+    captureMode = mode;
+    if (mode === "fullPage") {
+        captureCrop = null;
+        tool = "rect";
+        clearCaptureVisual();
+    }
+    else {
+        if (opts.resetSelection)
+            captureCrop = null;
+        tool = "crop";
+        redrawCropVisual();
+    }
+    // Mark the matching annotation tool button too
+    document
+        .querySelectorAll("#kg-tool-rect, #kg-tool-arrow, #kg-tool-label")
+        .forEach((b) => {
+        b.classList.remove("active");
+    });
+    if (tool === "rect" || tool === "arrow" || tool === "label") {
+        document.getElementById(`kg-tool-${tool}`)?.classList.add("active");
+    }
+    updateCaptureUi();
+    deselectAll();
+};
+// --- TOOLS ---
+const setTool = (t) => {
+    tool = t;
+    document
+        .querySelectorAll("#kg-tool-rect, #kg-tool-arrow, #kg-tool-label")
+        .forEach((b) => {
+        b.classList.remove("active");
+    });
+    document.getElementById(`kg-tool-${t}`)?.classList.add("active");
+    // Switching to an annotation tool exits capture-edit interaction
+    // (capture settings themselves are preserved).
+    updateCaptureUi();
+    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-cap-full")
+    ?.addEventListener("click", () => setCaptureMode("fullPage"));
+document
+    .getElementById("kg-cap-crop")
+    ?.addEventListener("click", () => setCaptureMode("crop", { resetSelection: !captureCrop }));
+document.getElementById("kg-delete")?.addEventListener("click", deleteSelected);
+document.addEventListener("keydown", (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);
+    if (tool === "crop") {
+        e.preventDefault();
+        deselectAll();
+        const target = e.target;
+        const handleAttr = target.dataset?.handle;
+        // Resize from a handle
+        if (handleAttr && captureCrop) {
+            cropDragState = {
+                kind: "resize",
+                handle: handleAttr,
+                sx: p.x,
+                sy: p.y,
+                orig: { ...captureCrop },
+            };
+            return;
+        }
+        // Move the existing crop body
+        if (target?.classList?.contains("capture-crop-box") && captureCrop) {
+            cropDragState = {
+                kind: "move",
+                sx: p.x,
+                sy: p.y,
+                orig: { ...captureCrop },
+            };
+            return;
+        }
+        // Otherwise: drag-to-create new crop (replaces existing)
+        cropDragState = { kind: "create", sx: p.x, sy: p.y };
+        captureCrop = null;
+        clearCaptureVisual();
+        const r = document.createElementNS(svgNS, "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");
+        captureGroup.appendChild(r);
+        return;
+    }
+    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");
+        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;
+        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");
+        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");
+            }
+        });
+        input.addEventListener("blur", finishLabel);
+    }
+});
+// --- MOUSE: DRAG ---
+document.addEventListener("mousemove", (e) => {
+    if (cropDragState) {
+        const p = getPos(e);
+        if (cropDragState.kind === "create") {
+            const x = Math.min(cropDragState.sx, p.x);
+            const y = Math.min(cropDragState.sy, p.y);
+            const w = Math.abs(p.x - cropDragState.sx);
+            const h = Math.abs(p.y - cropDragState.sy);
+            const r = captureGroup.firstChild;
+            if (r) {
+                r.setAttribute("x", String(x));
+                r.setAttribute("y", String(y));
+                r.setAttribute("width", String(w));
+                r.setAttribute("height", String(h));
+            }
+            return;
+        }
+        if (cropDragState.kind === "move") {
+            const dx = p.x - cropDragState.sx;
+            const dy = p.y - cropDragState.sy;
+            captureCrop = {
+                x: cropDragState.orig.x + dx,
+                y: cropDragState.orig.y + dy,
+                w: cropDragState.orig.w,
+                h: cropDragState.orig.h,
+            };
+            redrawCropVisual();
+            return;
+        }
+        // resize
+        const dx = p.x - cropDragState.sx;
+        const dy = p.y - cropDragState.sy;
+        const o = cropDragState.orig;
+        let nx = o.x;
+        let ny = o.y;
+        let nw = o.w;
+        let nh = o.h;
+        const h = cropDragState.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;
+        }
+        // Keep min size and prevent flip-through
+        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;
+        }
+        captureCrop = { x: nx, y: ny, w: nw, h: nh };
+        redrawCropVisual();
+        return;
+    }
+    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));
+        }
+    }
+});
+// --- MOUSE: UP ---
+document.addEventListener("mouseup", (e) => {
+    if (cropDragState) {
+        if (cropDragState.kind === "create") {
+            const p = getPos(e);
+            const w = Math.abs(p.x - cropDragState.sx);
+            const h = Math.abs(p.y - cropDragState.sy);
+            if (w < 5 || h < 5) {
+                cropDragState = null;
+                redrawCropVisual();
+                return;
+            }
+            captureCrop = {
+                x: Math.min(cropDragState.sx, p.x),
+                y: Math.min(cropDragState.sy, p.y),
+                w,
+                h,
+            };
+        }
+        // move / resize: state is already applied via redrawCropVisual on mousemove
+        cropDragState = null;
+        redrawCropVisual();
+        return;
+    }
+    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));
+        }
+    }
+    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));
+        }
+    }
+    dragState = null;
+});
+// --- LOAD EXISTING ---
+_win.__kagemusha_loadAnnotations = (decorations) => {
+    const dpr = window.devicePixelRatio || 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 + toolbarHeight;
+            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 + toolbarHeight;
+            const ax2 = d.to.x / dpr;
+            const ay2 = d.to.y / dpr + toolbarHeight;
+            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 + toolbarHeight;
+            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));
+        }
+    }
+};
+// --- LOAD EXISTING CAPTURE CONFIG ---
+_win.__kagemusha_loadCapture = (capture) => {
+    if (!capture ||
+        !["fullPage", "crop"].includes(capture.mode ?? "")) {
+        // Unknown / legacy mode (e.g. removed "selector") — fall back to fullPage
+        setCaptureMode("fullPage");
+        setTool("rect");
+        return;
+    }
+    if (capture.mode === "fullPage") {
+        setCaptureMode("fullPage");
+        // Leave annotation tool active after load
+        setTool("rect");
+        return;
+    }
+    if (capture.mode === "crop") {
+        // crop is stored in page CSS pixels (not DPR-scaled); shift by toolbar for display
+        const sx = capture.crop.start.x;
+        const sy = capture.crop.start.y + toolbarHeight;
+        const ex = capture.crop.end.x;
+        const ey = capture.crop.end.y + toolbarHeight;
+        captureCrop = { x: sx, y: sy, w: ex - sx, h: ey - sy };
+        captureMode = "crop";
+        tool = "rect";
+        redrawCropVisual();
+        updateCaptureUi();
+    }
+};
+// --- SAVE ---
+const save = () => {
+    if (captureMode === "crop" && !captureCrop) {
+        alert("Crop mode is active but no area is drawn.\nDrag to define an area, or switch to Full Page.");
+        return;
+    }
+    const dpr = window.devicePixelRatio || 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) - toolbarHeight) * 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) - toolbarHeight) * dpr),
+                },
+                to: {
+                    x: s((a.toX ?? 0) * dpr),
+                    y: s(((a.toY ?? 0) - toolbarHeight) * 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) - toolbarHeight) * dpr),
+                },
+                style: {
+                    fontSize: s(14 * dpr),
+                    color: "#FF0000",
+                    background: "#FFFFFF",
+                },
+            };
+        }
+        return null;
+    })
+        .filter((d) => d !== null);
+    let capture;
+    if (captureMode === "crop" && captureCrop) {
+        // Store in page CSS pixels (Playwright's clip is in CSS pixels, not DPR)
+        capture = {
+            mode: "crop",
+            crop: {
+                start: {
+                    x: Math.round(captureCrop.x),
+                    y: Math.round(captureCrop.y - toolbarHeight),
+                },
+                end: {
+                    x: Math.round(captureCrop.x + captureCrop.w),
+                    y: Math.round(captureCrop.y + captureCrop.h - toolbarHeight),
+                },
+            },
+        };
+    }
+    else {
+        capture = { mode: "fullPage" };
+    }
+    _win.__kagemusha_save(JSON.stringify({ decorations, capture }));
+};
+document.getElementById("kg-save")?.addEventListener("click", save);
+export {};
+//# sourceMappingURL=inject-script.js.map