@wasao/kagemusha 0.1.1 → 0.2.0

package/dist/commands/validate.js.map

@@ -1 +1 @@
-{"version":3,"file":"validate.js","sourceRoot":"","sources":["../../src/commands/validate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACN,eAAe,EACf,UAAU,EACV,eAAe,EACf,cAAc,EACd,kBAAkB,GAClB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,CAAC,KAAK,UAAU,eAAe;IACpC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC;IAEvD,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,IAAI,CAAC;QACJ,MAAM,WAAW,GAAG,eAAe,EAAE,CAAC;QAEtC,kBAAkB;QAClB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC,CAAC;QAC7D,MAAM,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;QACvC,MAAM,YAAY,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,SAAS,GAAG,IAAI,CAAC;YACjB,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE,CAAC;gBAChC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC;YACtC,CAAC;QACF,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC;QACjD,CAAC;QAED,uBAAuB;QACvB,MAAM,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,IAAI,CAAC,cAAc,WAAW,CAAC,MAAM,mBAAmB,CAAC,CAC/D,CAAC;QAEF,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC/B,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;YACvC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACvB,SAAS,GAAG,IAAI,CAAC;gBACjB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC;gBACrD,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;oBAC1B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC;gBACxC,CAAC;YACF,CAAC;iBAAM,CAAC;gBACP,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YAC3C,CAAC;QACF,CAAC;QAED,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,MAAM,CAAC,mDAAmD,CAAC,CACjE,CAAC;QACH,CAAC;IACF,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACd,SAAS,GAAG,IAAI,CAAC;QACjB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAQ,GAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACf,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC,CAAC;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC;SAAM,CAAC;QACP,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAC3D,CAAC;AACF,CAAC"}
+{"version":3,"file":"validate.js","sourceRoot":"","sources":["../../src/commands/validate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACN,eAAe,EACf,UAAU,EACV,eAAe,EACf,cAAc,EACd,kBAAkB,GAClB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,CAAC,KAAK,UAAU,eAAe;IACpC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC;IAEvD,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,IAAI,CAAC;QACJ,MAAM,WAAW,GAAG,eAAe,EAAE,CAAC;QAEtC,kBAAkB;QAClB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC,CAAC;QAC7D,MAAM,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;QACvC,MAAM,YAAY,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,SAAS,GAAG,IAAI,CAAC;YACjB,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE,CAAC;gBAChC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC;YACtC,CAAC;QACF,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC;QACjD,CAAC;QAED,uBAAuB;QACvB,MAAM,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,IAAI,CAAC,cAAc,WAAW,CAAC,MAAM,mBAAmB,CAAC,CAC/D,CAAC;QAEF,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC/B,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;YACvC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACvB,SAAS,GAAG,IAAI,CAAC;gBACjB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC;gBACrD,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;oBAC1B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC;gBACxC,CAAC;YACF,CAAC;iBAAM,CAAC;gBACP,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YAC3C,CAAC;QACF,CAAC;QAED,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,MAAM,CAAC,uDAAuD,CAAC,CACrE,CAAC;QACH,CAAC;IACF,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACd,SAAS,GAAG,IAAI,CAAC;QACjB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAQ,GAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACf,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC,CAAC;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC;SAAM,CAAC;QACP,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAC3D,CAAC;AACF,CAAC"}

package/dist/editor/inject-script.js

@@ -3,13 +3,20 @@
 // 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 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";
@@ -17,17 +24,20 @@ 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;
+      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 14px; border: 1px solid #444; border-radius: 6px;
+      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 {
@@ -35,16 +45,31 @@ toolbar.innerHTML = `
       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">🥷 Annotation Editor</span>
-  <button id="kg-tool-rect" class="active">▭ Rectangle</button>
+  <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>
@@ -52,10 +77,13 @@ toolbar.innerHTML = `
   <button class="save-btn" id="kg-save">💾 Save</button>
 `;
 document.body.appendChild(toolbar);
-document.body.style.paddingTop = `${TOOLBAR_HEIGHT}px`;
+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.";
+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");
@@ -69,13 +97,20 @@ const updateSvgSize = () => {
 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>';
+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"); });
+    svg.querySelectorAll(".annotation").forEach((el) => {
+        el.classList.remove("selected");
+    });
 };
 const selectEl = (el) => {
     deselectAll();
@@ -98,7 +133,13 @@ const startMove = (e, id) => {
         return;
     selectEl(el);
     const p = getPos(e);
-    dragState = { type: "move", id, el: el, lastX: p.x, lastY: p.y };
+    dragState = {
+        type: "move",
+        id,
+        el: el,
+        lastX: p.x,
+        lastY: p.y,
+    };
 };
 const measureTextWidth = (text, fontSize) => {
     const tmp = document.createElementNS(svgNS, "text");
@@ -133,19 +174,111 @@ const createLabelGroup = (id, x, y, text, fontSize = 14) => {
     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("#kagemusha-toolbar button").forEach((b) => { b.classList.remove("active"); });
+    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");
-    svg.classList.toggle("drawing", true);
+    // 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-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.getElementById("kg-save")?.addEventListener("click", save);
 document.addEventListener("keydown", (e) => {
     if (e.key === "Delete" || e.key === "Backspace") {
         if (document.activeElement?.tagName === "INPUT")
@@ -158,6 +291,45 @@ 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++}`;
@@ -196,7 +368,8 @@ svg.addEventListener("mousedown", (e) => {
         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.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);
@@ -232,6 +405,72 @@ svg.addEventListener("mousedown", (e) => {
 });
 // --- 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);
@@ -283,6 +522,28 @@ document.addEventListener("mousemove", (e) => {
 });
 // --- 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);
@@ -293,7 +554,14 @@ document.addEventListener("mouseup", (e) => {
             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 };
+            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;
@@ -306,7 +574,14 @@ document.addEventListener("mouseup", (e) => {
             dragState.el.remove();
         }
         else {
-            const a = { id: dragState.id, type: "arrow", fromX: dragState.sx, fromY: dragState.sy, toX: p.x, toY: p.y };
+            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;
@@ -317,12 +592,12 @@ document.addEventListener("mouseup", (e) => {
 });
 // --- LOAD EXISTING ---
 _win.__kagemusha_loadAnnotations = (decorations) => {
-    const dpr = _win.__kagemusha_dpr || 1;
+    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 + TOOLBAR_HEIGHT;
+            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");
@@ -337,14 +612,21 @@ _win.__kagemusha_loadAnnotations = (decorations) => {
             rect.classList.add("annotation");
             rect.dataset.id = id;
             svg.appendChild(rect);
-            annotations.push({ id, type: "rect", x: rx, y: ry, width: rw, height: rh });
+            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 ay1 = d.from.y / dpr + toolbarHeight;
             const ax2 = d.to.x / dpr;
-            const ay2 = d.to.y / dpr + TOOLBAR_HEIGHT;
+            const ay2 = d.to.y / dpr + toolbarHeight;
             const line = document.createElementNS(svgNS, "line");
             line.setAttribute("x1", String(ax1));
             line.setAttribute("y1", String(ay1));
@@ -356,12 +638,19 @@ _win.__kagemusha_loadAnnotations = (decorations) => {
             line.classList.add("annotation");
             line.dataset.id = id;
             svg.appendChild(line);
-            annotations.push({ id, type: "arrow", fromX: ax1, fromY: ay1, toX: ax2, toY: ay2 });
+            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 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);
@@ -370,25 +659,110 @@ _win.__kagemusha_loadAnnotations = (decorations) => {
         }
     }
 };
+// --- 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 ---
-function save() {
-    const dpr = _win.__kagemusha_dpr || 1;
+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) - TOOLBAR_HEIGHT) * dpr), width: s((a.width ?? 0) * dpr), height: s((a.height ?? 0) * dpr) }, style: { color: "#FF0000", strokeWidth: s(3 * dpr) } };
+            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) - 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) } };
+            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) - TOOLBAR_HEIGHT) * dpr) }, style: { fontSize: s(14 * dpr), color: "#FF0000", background: "#FFFFFF" } };
+            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);
-    _win.__kagemusha_save(JSON.stringify(decorations));
-}
+    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