@wasao/kagemusha 0.1.1 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wasao/kagemusha",
-  "version": "0.1.1",
+  "version": "0.3.4",
   "description": "Auto-update help center screenshots when your code changes. The shadow warrior for your documentation.",
   "type": "module",
   "exports": {
@@ -12,15 +12,21 @@
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && pnpm build:inject",
+    "build:inject": "esbuild src/editor/inject-script/index.ts --bundle --format=iife --outfile=dist/editor/inject-script.js --platform=browser --target=es2022",
+    "build:clean": "rm -rf dist && tsc && pnpm build:inject",
     "dev": "bun --watch src/index.ts",
     "typecheck": "tsc --noEmit",
     "lint": "bunx biome check .",
     "format": "bunx biome format --write .",
     "test": "bun test",
     "prepare": "husky",
-    "prepublishOnly": "bun run build"
+    "prepublishOnly": "pnpm run build"
   },
   "keywords": [
     "screenshot",
@@ -47,7 +53,9 @@
     "commander": "^13.0.0",
     "glob": "^11.0.0",
     "inquirer": "^12.0.0",
+    "pixelmatch": "^7.0.0",
     "playwright-chromium": "^1.50.0",
+    "pngjs": "^7.0.0",
     "sharp": "^0.34.5",
     "yaml": "^2.7.0"
   },
@@ -56,8 +64,17 @@
     "@types/bun": "latest",
     "@types/inquirer": "^9.0.0",
     "@types/node": "^22.0.0",
+    "@types/pixelmatch": "^5.2.6",
+    "@types/pngjs": "^6.0.5",
     "@types/sharp": "^0.32.0",
+    "esbuild": "^0.28.0",
     "husky": "^9.1.7",
     "typescript": "^5.7.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "playwright-chromium",
+      "sharp"
+    ]
   }
 }

package/dist/commands/preview.d.ts

@@ -1,6 +0,0 @@
-interface PreviewOptions {
-    id?: string;
-}
-export declare function previewCommand(options: PreviewOptions): Promise<void>;
-export {};
-//# sourceMappingURL=preview.d.ts.map

package/dist/commands/preview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/commands/preview.ts"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,wBAAsB,cAAc,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CAwC3E"}

package/dist/commands/preview.js

@@ -1,33 +0,0 @@
-import chalk from "chalk";
-import { chromium } from "playwright-chromium";
-import { annotateScreenshots } from "../lib/annotate.js";
-import { findProjectRoot, loadConfig, loadDefinitions } from "../lib/config.js";
-import { captureScreenshots } from "../lib/screenshot.js";
-export async function previewCommand(options) {
-    console.log(chalk.bold("\n🥷 Kagemusha — Preview\n"));
-    const projectRoot = findProjectRoot();
-    const config = loadConfig(projectRoot);
-    let definitions = loadDefinitions(projectRoot);
-    if (options.id) {
-        definitions = definitions.filter((d) => d.id === options.id);
-        if (definitions.length === 0) {
-            console.log(chalk.red(`Definition not found: ${options.id}`));
-            return;
-        }
-    }
-    console.log(chalk.blue(`📸 Capturing ${definitions.length} screenshot(s)...`));
-    const results = await captureScreenshots(config, definitions, projectRoot);
-    const annotated = await annotateScreenshots(definitions, results, projectRoot);
-    console.log(chalk.green("\n✅ Screenshots captured. Opening preview...\n"));
-    // Open annotated screenshots in browser
-    const browser = await chromium.launch({ headless: false });
-    const context = await browser.newContext();
-    for (const result of annotated) {
-        const page = await context.newPage();
-        await page.goto(`file://${result.annotatedPath}`);
-    }
-    console.log(chalk.gray("Press Ctrl+C to close preview.\n"));
-    // Keep process alive until user closes
-    await new Promise(() => { });
-}
-//# sourceMappingURL=preview.js.map

package/dist/commands/preview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview.js","sourceRoot":"","sources":["../../src/commands/preview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAM1D,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,OAAuB;IAC3D,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,eAAe,EAAE,CAAC;IACtC,MAAM,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEvC,IAAI,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,IAAI,OAAO,CAAC,EAAE,EAAE,CAAC;QAChB,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC;QAC7D,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,yBAAyB,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YAC9D,OAAO;QACR,CAAC;IACF,CAAC;IAED,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,IAAI,CAAC,gBAAgB,WAAW,CAAC,MAAM,mBAAmB,CAAC,CACjE,CAAC;IACF,MAAM,OAAO,GAAG,MAAM,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;IAC3E,MAAM,SAAS,GAAG,MAAM,mBAAmB,CAC1C,WAAW,EACX,OAAO,EACP,WAAW,CACX,CAAC;IAEF,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,gDAAgD,CAAC,CAAC,CAAC;IAE3E,wCAAwC;IACxC,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,UAAU,EAAE,CAAC;IAE3C,KAAK,MAAM,MAAM,IAAI,SAAS,EAAE,CAAC;QAChC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QACrC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC;IACnD,CAAC;IAED,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC,CAAC;IAE5D,uCAAuC;IACvC,MAAM,IAAI,OAAO,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;AAC7B,CAAC"}

package/dist/commands/run.d.ts

@@ -1,6 +0,0 @@
-interface RunOptions {
-    ids?: string;
-}
-export declare function runCommand(options: RunOptions): Promise<void>;
-export {};
-//# sourceMappingURL=run.d.ts.map

package/dist/commands/run.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../../src/commands/run.ts"],"names":[],"mappings":"AAMA,UAAU,UAAU;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED,wBAAsB,UAAU,CAAC,OAAO,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CA6DnE"}

package/dist/commands/run.js

@@ -1,39 +0,0 @@
-import chalk from "chalk";
-import { annotateScreenshots } from "../lib/annotate.js";
-import { findProjectRoot, loadConfig, loadDefinitions } from "../lib/config.js";
-import { captureScreenshots } from "../lib/screenshot.js";
-import { uploadToS3 } from "../lib/upload.js";
-export async function runCommand(options) {
-    console.log(chalk.bold("\n🥷 Kagemusha — Running pipeline\n"));
-    const projectRoot = findProjectRoot();
-    const config = loadConfig(projectRoot);
-    let definitions = loadDefinitions(projectRoot);
-    if (options.ids) {
-        const ids = options.ids.split(",").map((s) => s.trim());
-        definitions = definitions.filter((d) => ids.includes(d.id));
-    }
-    if (definitions.length === 0) {
-        console.log(chalk.yellow("No screenshot definitions to process. Skipping."));
-        return;
-    }
-    console.log(chalk.gray(`  Found ${definitions.length} definition(s) to process\n`));
-    // Step 1: Capture
-    console.log(chalk.blue("📸 Capturing screenshots..."));
-    const captureResults = await captureScreenshots(config, definitions, projectRoot);
-    console.log(chalk.green(`  ✓ Captured ${captureResults.length} screenshot(s)\n`));
-    // Step 2: Annotate
-    console.log(chalk.blue("🎨 Drawing annotations..."));
-    const annotatedResults = await annotateScreenshots(definitions, captureResults, projectRoot);
-    console.log(chalk.green(`  ✓ Annotated ${annotatedResults.length} screenshot(s)\n`));
-    // Step 3: Publish
-    if (config.publish?.destination === "s3") {
-        console.log(chalk.blue("☁️  Uploading to S3..."));
-        const uploadResults = await uploadToS3(config, annotatedResults, projectRoot);
-        console.log(chalk.green(`  ✓ Uploaded ${uploadResults.length} screenshot(s)\n`));
-    }
-    else {
-        console.log(chalk.green(`  Screenshots saved locally\n`));
-    }
-    console.log(chalk.bold.green("✅ Pipeline complete!\n"));
-}
-//# sourceMappingURL=run.js.map

package/dist/commands/run.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"run.js","sourceRoot":"","sources":["../../src/commands/run.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,OAAmB;IACnD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC,CAAC;IAE/D,MAAM,WAAW,GAAG,eAAe,EAAE,CAAC;IACtC,MAAM,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACvC,IAAI,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAE/C,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;QACjB,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACxD,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9B,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,MAAM,CAAC,iDAAiD,CAAC,CAC/D,CAAC;QACF,OAAO;IACR,CAAC;IAED,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,IAAI,CAAC,WAAW,WAAW,CAAC,MAAM,6BAA6B,CAAC,CACtE,CAAC;IAEF,kBAAkB;IAClB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,MAAM,kBAAkB,CAC9C,MAAM,EACN,WAAW,EACX,WAAW,CACX,CAAC;IACF,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,KAAK,CAAC,gBAAgB,cAAc,CAAC,MAAM,kBAAkB,CAAC,CACpE,CAAC;IAEF,mBAAmB;IACnB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,MAAM,mBAAmB,CACjD,WAAW,EACX,cAAc,EACd,WAAW,CACX,CAAC;IACF,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,KAAK,CAAC,iBAAiB,gBAAgB,CAAC,MAAM,kBAAkB,CAAC,CACvE,CAAC;IAEF,kBAAkB;IAClB,IAAI,MAAM,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,EAAE,CAAC;QAC1C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,MAAM,UAAU,CACrC,MAAM,EACN,gBAAgB,EAChB,WAAW,CACX,CAAC;QACF,OAAO,CAAC,GAAG,CACV,KAAK,CAAC,KAAK,CAAC,gBAAgB,aAAa,CAAC,MAAM,kBAAkB,CAAC,CACnE,CAAC;IACH,CAAC;SAAM,CAAC;QACP,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC,CAAC;IAC3D,CAAC;IAED,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC;AACzD,CAAC"}

package/dist/editor/editor/editor.html

@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<title>Kagemusha Annotation Editor</title>
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { background: #1a1a2e; font-family: -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden; }
-
-  .toolbar {
-    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
-    background: #16213e; padding: 8px 16px; display: flex; align-items: center; gap: 12px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-  }
-  .toolbar button {
-    padding: 6px 14px; border: 1px solid #444; border-radius: 6px;
-    background: #1a1a2e; color: #fff; font-size: 13px; cursor: pointer;
-  }
-  .toolbar button:hover { background: #2a2a4e; }
-  .toolbar button.active { background: #6366f1; border-color: #6366f1; }
-  .toolbar .separator { width: 1px; height: 24px; background: #444; }
-  .toolbar .title { color: #888; font-size: 13px; margin-right: 8px; }
-  .toolbar .save-btn { background: #22c55e; border-color: #22c55e; font-weight: 600; margin-left: auto; }
-  .toolbar .save-btn:hover { background: #16a34a; }
-
-  .canvas-area {
-    margin-top: 48px; display: flex; justify-content: center; align-items: flex-start;
-    padding: 20px; height: calc(100vh - 48px); overflow: auto;
-  }
-
-  .editor-container {
-    position: relative; cursor: crosshair;
-  }
-  .editor-container img { display: block; width: 100%; height: auto; }
-
-  .annotation { position: absolute; }
-  .annotation.selected { outline: 2px dashed #6366f1; outline-offset: 2px; }
-
-  .label-input {
-    background: none; border: none; color: inherit; font: inherit;
-    width: 100%; outline: none;
-  }
-
-  .hint {
-    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
-    color: #666; font-size: 12px;
-  }
-</style>
-</head>
-<body>
-
-<div class="toolbar">
-  <span class="title">🥷 Annotation Editor</span>
-  <button id="tool-rect" class="active" onclick="setTool('rect')">▭ Rectangle</button>
-  <button id="tool-arrow" onclick="setTool('arrow')">→ Arrow</button>
-  <button id="tool-label" onclick="setTool('label')">T Label</button>
-  <div class="separator"></div>
-  <button onclick="deleteSelected()">🗑 Delete</button>
-  <button class="save-btn" onclick="save()">💾 Save</button>
-</div>
-
-<div class="canvas-area">
-  <div class="editor-container" id="editor">
-    <img id="screenshot" />
-  </div>
-</div>
-
-<div class="hint">Click and drag to add annotations. Click to select. Press Delete to remove.</div>
-
-<script>
-let tool = 'rect';
-let annotations = [];
-let selectedId = null;
-let dragState = null;
-let nextId = 1;
-
-const editor = document.getElementById('editor');
-const img = document.getElementById('screenshot');
-
-// Mouse position relative to the editor container (in CSS px, matches display)
-function getPos(e) {
-  const r = editor.getBoundingClientRect();
-  return { x: e.clientX - r.left, y: e.clientY - r.top };
-}
-
-// Ratio to convert display px → image natural px (for saving)
-function getScale() {
-  return img.naturalWidth / editor.getBoundingClientRect().width;
-}
-
-window.initEditor = (screenshotDataUrl, existingDecorations) => {
-  img.src = screenshotDataUrl;
-  img.onload = () => {
-    // Set editor width to fit window
-    const maxW = window.innerWidth - 80;
-    const maxH = window.innerHeight - 108;
-    const ratio = img.naturalWidth / img.naturalHeight;
-    let w = maxW;
-    if (w / ratio > maxH) w = maxH * ratio;
-    editor.style.width = w + 'px';
-
-    if (existingDecorations) {
-      existingDecorations.forEach(d => addFromDecoration(d));
-    }
-  };
-};
-
-function setTool(t) {
-  tool = t;
-  document.querySelectorAll('.toolbar button').forEach(b => b.classList.remove('active'));
-  document.getElementById('tool-' + t)?.classList.add('active');
-  deselectAll();
-}
-
-function deselectAll() {
-  selectedId = null;
-  document.querySelectorAll('.annotation').forEach(el => el.classList.remove('selected'));
-}
-
-function selectEl(el) {
-  deselectAll();
-  selectedId = parseInt(el.dataset.id);
-  el.classList.add('selected');
-}
-
-function deleteSelected() {
-  if (!selectedId) return;
-  const el = document.querySelector(`[data-id="${selectedId}"]`);
-  if (el) el.remove();
-  annotations = annotations.filter(a => a.id !== selectedId);
-  selectedId = null;
-}
-
-document.addEventListener('keydown', e => {
-  if (e.key === 'Delete' || e.key === 'Backspace') {
-    if (document.activeElement.classList?.contains('label-input')) return;
-    deleteSelected();
-  }
-});
-
-// --- CREATE ---
-editor.addEventListener('mousedown', e => {
-  if (e.target.closest('.annotation')) return;
-  const p = getPos(e);
-  deselectAll();
-
-  if (tool === 'rect') {
-    const id = nextId++;
-    const el = makeRect(id, p.x, p.y, 0, 0);
-    editor.appendChild(el);
-    dragState = { type: 'create-rect', id, el, sx: p.x, sy: p.y };
-  } else if (tool === 'arrow') {
-    const id = nextId++;
-    const el = makeArrow(id, p.x, p.y, p.x, p.y);
-    editor.appendChild(el);
-    dragState = { type: 'create-arrow', id, el, sx: p.x, sy: p.y };
-  } else if (tool === 'label') {
-    const id = nextId++;
-    annotations.push({ id, type: 'label', x: p.x, y: p.y, text: 'Label' });
-    const el = makeLabel(id, p.x, p.y, 'Label');
-    editor.appendChild(el);
-    selectEl(el);
-    el.querySelector('.label-input').focus();
-    el.querySelector('.label-input').select();
-  }
-});
-
-document.addEventListener('mousemove', e => {
-  if (!dragState) return;
-  const p = getPos(e);
-
-  if (dragState.type === 'create-rect') {
-    const el = dragState.el;
-    const w = p.x - dragState.sx;
-    const h = p.y - dragState.sy;
-    el.style.left = (w > 0 ? dragState.sx : p.x) + 'px';
-    el.style.top = (h > 0 ? dragState.sy : p.y) + 'px';
-    el.style.width = Math.abs(w) + 'px';
-    el.style.height = Math.abs(h) + 'px';
-  } else if (dragState.type === 'create-arrow') {
-    updateArrow(dragState.el, dragState.sx, dragState.sy, p.x, p.y);
-  } else if (dragState.type === 'move') {
-    const a = annotations.find(a => a.id === dragState.id);
-    if (!a) return;
-    a.x = p.x - dragState.ox;
-    a.y = p.y - dragState.oy;
-    dragState.el.style.left = a.x + 'px';
-    dragState.el.style.top = a.y + 'px';
-  }
-});
-
-document.addEventListener('mouseup', e => {
-  if (!dragState) return;
-  const p = getPos(e);
-
-  if (dragState.type === 'create-rect') {
-    const w = Math.abs(p.x - dragState.sx);
-    const h = Math.abs(p.y - dragState.sy);
-    if (w < 5 && h < 5) { dragState.el.remove(); }
-    else {
-      const a = { id: dragState.id, type: 'rect', x: Math.min(dragState.sx, p.x), y: Math.min(dragState.sy, p.y), width: w, height: h };
-      annotations.push(a);
-      selectEl(dragState.el);
-    }
-  } else if (dragState.type === 'create-arrow') {
-    const dist = Math.hypot(p.x - dragState.sx, p.y - dragState.sy);
-    if (dist < 5) { dragState.el.remove(); }
-    else {
-      annotations.push({ id: dragState.id, type: 'arrow', fromX: dragState.sx, fromY: dragState.sy, toX: p.x, toY: p.y });
-      selectEl(dragState.el);
-    }
-  }
-  dragState = null;
-});
-
-// --- ELEMENTS ---
-function makeRect(id, x, y, w, h) {
-  const el = document.createElement('div');
-  el.className = 'annotation'; el.dataset.id = id;
-  el.style.cssText = `left:${x}px;top:${y}px;width:${w}px;height:${h}px;border:2px solid #FF0000;border-radius:4px;`;
-  el.addEventListener('mousedown', e => {
-    e.stopPropagation();
-    selectEl(el);
-    const a = annotations.find(a => a.id === parseInt(el.dataset.id));
-    if (a) {
-      const pp = getPos(e);
-      dragState = { type: 'move', id: a.id, el, ox: pp.x - a.x, oy: pp.y - a.y };
-    }
-  });
-  return el;
-}
-
-function makeArrow(id, x1, y1, x2, y2) {
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.classList.add('annotation'); svg.dataset.id = id;
-  svg.style.cssText = 'position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;';
-  svg.innerHTML = `
-    <defs><marker id="ah-${id}" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#FF0000">
-      <polygon points="0 0, 10 3.5, 0 7"/></marker></defs>
-    <line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#FF0000" stroke-width="2" marker-end="url(#ah-${id})" style="pointer-events:stroke;cursor:pointer;" />`;
-  svg.querySelector('line').addEventListener('mousedown', e => {
-    e.stopPropagation();
-    selectEl(svg);
-  });
-  return svg;
-}
-
-function updateArrow(svg, x1, y1, x2, y2) {
-  const line = svg.querySelector('line');
-  line.setAttribute('x1', x1); line.setAttribute('y1', y1);
-  line.setAttribute('x2', x2); line.setAttribute('y2', y2);
-}
-
-function makeLabel(id, x, y, text) {
-  const el = document.createElement('div');
-  el.className = 'annotation'; el.dataset.id = id;
-  el.style.cssText = `left:${x}px;top:${y}px;padding:4px 8px;background:#fff;border:1px solid #FF0000;border-radius:4px;color:#FF0000;font-size:14px;min-width:40px;`;
-  el.innerHTML = `<input class="label-input" value="${text}" style="color:#FF0000;font-size:14px;" />`;
-  el.querySelector('.label-input').addEventListener('input', e => {
-    const a = annotations.find(a => a.id === parseInt(el.dataset.id));
-    if (a) a.text = e.target.value;
-  });
-  el.addEventListener('mousedown', e => {
-    if (e.target.classList.contains('label-input')) return;
-    e.stopPropagation();
-    selectEl(el);
-    const a = annotations.find(a => a.id === parseInt(el.dataset.id));
-    if (a) {
-      const pp = getPos(e);
-      dragState = { type: 'move', id: a.id, el, ox: pp.x - a.x, oy: pp.y - a.y };
-    }
-  });
-  return el;
-}
-
-// --- LOAD EXISTING ---
-function addFromDecoration(d) {
-  const id = nextId++;
-  const s = getScale();
-  if (d.type === 'rect' && d.target && 'x' in d.target) {
-    const a = { id, type: 'rect', x: d.target.x/s, y: d.target.y/s, width: d.target.width/s, height: d.target.height/s };
-    annotations.push(a);
-    editor.appendChild(makeRect(id, a.x, a.y, a.width, a.height));
-  } else if (d.type === 'arrow' && 'x' in d.from && 'x' in d.to) {
-    const a = { id, type: 'arrow', fromX: d.from.x/s, fromY: d.from.y/s, toX: d.to.x/s, toY: d.to.y/s };
-    annotations.push(a);
-    editor.appendChild(makeArrow(id, a.fromX, a.fromY, a.toX, a.toY));
-  } else if (d.type === 'label' && 'x' in d.position) {
-    const a = { id, type: 'label', x: d.position.x/s, y: d.position.y/s, text: d.text };
-    annotations.push(a);
-    editor.appendChild(makeLabel(id, a.x, a.y, a.text));
-  }
-}
-
-// --- SAVE ---
-function save() {
-  const s = getScale();
-  const decorations = annotations.map(a => {
-    if (a.type === 'rect') {
-      return { type: 'rect', target: { x: Math.round(a.x*s), y: Math.round(a.y*s), width: Math.round(a.width*s), height: Math.round(a.height*s) }, style: { color: '#FF0000', strokeWidth: 2 } };
-    } else if (a.type === 'arrow') {
-      return { type: 'arrow', from: { x: Math.round(a.fromX*s), y: Math.round(a.fromY*s) }, to: { x: Math.round(a.toX*s), y: Math.round(a.toY*s) }, style: { color: '#FF0000', strokeWidth: 2 } };
-    } else if (a.type === 'label') {
-      return { type: 'label', text: a.text, position: { x: Math.round(a.x*s), y: Math.round(a.y*s) }, style: { fontSize: 14, color: '#FF0000', background: '#FFFFFF' } };
-    }
-  }).filter(Boolean);
-
-  window.__SAVED_DECORATIONS__ = decorations;
-  document.title = 'SAVED';
-}
-</script>
-</body>
-</html>