npm - alanbox - Versions diffs - 0.1.3 → 0.1.4 - Mend

alanbox 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/0boxer/AGENTS.md +3 -2
package/0boxer/src/commands/AGENTS.md +2 -1
package/0boxer/src/commands/install.js +47 -0
package/1swarmer/AGENTS.md +5 -2
package/1swarmer/src/AGENTS.md +4 -3
package/1swarmer/src/args.js +7 -0
package/1swarmer/src/cli.js +26 -0
package/1swarmer/src/commands/AGENTS.md +3 -0
package/1swarmer/src/commands/review-file.js +997 -0
package/1swarmer/src/runner/AGENTS.md +1 -0
package/1swarmer/src/runner/codex-runner.js +23 -3
package/2designer/README.md +3 -0
package/2designer/dist/{cdp-engine-JK2XVDHK.js → cdp-engine-4AIWSWXO.js} +2 -2
package/2designer/dist/{cdp-engine-A5WTMTVF.js → cdp-engine-SG4K2BCX.js} +2 -2
package/2designer/dist/{chunk-NQ3ASZUE.js → chunk-7X7PTLZH.js} +2 -2
package/2designer/dist/{chunk-JVF26NXD.js → chunk-DPOWNFOH.js} +2 -2
package/2designer/dist/{chunk-SKEIVBOU.js → chunk-ISUUIOO7.js} +1 -1
package/2designer/dist/chunk-ISUUIOO7.js.map +1 -0
package/2designer/dist/cli.js +494 -244
package/2designer/dist/cli.js.map +1 -1
package/2designer/dist/index.d.ts +7 -18
package/2designer/dist/index.js +5 -198
package/2designer/dist/index.js.map +1 -1
package/2designer/dist/{playwright-engine-YBRDIUHF.js → playwright-engine-YXBY3KEN.js} +2 -2
package/2designer/dist/{playwright-engine-3YKJOUNU.js → playwright-engine-YXGDTSZ5.js} +2 -2
package/2designer/dist/tint-UD4CJ7S2.js +7 -0
package/2designer/dist/{tint-I3FTT23O.js → tint-YN63MLVN.js} +1 -1
package/2designer/dist/tint-YN63MLVN.js.map +1 -0
package/4reporter/README.md +24 -0
package/4reporter/dist/cli.js +464 -0
package/4reporter/dist/cli.js.map +1 -0
package/4reporter/dist/index.d.ts +108 -0
package/4reporter/dist/index.js +445 -0
package/4reporter/dist/index.js.map +1 -0
package/4reporter/package.json +39 -0
package/README.md +13 -5
package/bin/reporter.js +11 -0
package/cli.js +31 -6
package/mcp/README.md +7 -1
package/mcp/config.toml +4 -0
package/package.json +8 -4
package/skills/AGENTS.md +3 -3
package/skills/aitool/SKILL.md +1 -1
package/skills/desginer/SKILL.md +65 -45
package/skills/swarmer/SKILL.md +37 -0
package/2designer/LICENSE +0 -21
package/2designer/dist/chunk-SKEIVBOU.js.map +0 -1
package/2designer/dist/tint-I3FTT23O.js.map +0 -1
package/2designer/dist/tint-RUSSUAWA.js +0 -7
/package/2designer/dist/{cdp-engine-JK2XVDHK.js.map → cdp-engine-4AIWSWXO.js.map} +0 -0
/package/2designer/dist/{cdp-engine-A5WTMTVF.js.map → cdp-engine-SG4K2BCX.js.map} +0 -0
/package/2designer/dist/{chunk-NQ3ASZUE.js.map → chunk-7X7PTLZH.js.map} +0 -0
/package/2designer/dist/{chunk-JVF26NXD.js.map → chunk-DPOWNFOH.js.map} +0 -0
/package/2designer/dist/{playwright-engine-YBRDIUHF.js.map → playwright-engine-YXBY3KEN.js.map} +0 -0
/package/2designer/dist/{playwright-engine-3YKJOUNU.js.map → playwright-engine-YXGDTSZ5.js.map} +0 -0
/package/2designer/dist/{tint-RUSSUAWA.js.map → tint-UD4CJ7S2.js.map} +0 -0

package/2designer/dist/cli.js CHANGED Viewed

@@ -11,12 +11,12 @@ function resolveEngineType(options) {
 async function createEngine(options) {
   const type = resolveEngineType(options);
   if (type === "cdp") {
-    const { CdpEngine } = await import("./cdp-engine-JK2XVDHK.js");
+    const { CdpEngine } = await import("./cdp-engine-4AIWSWXO.js");
     const [host, portStr] = options.cdp.split(":");
     const port = parseInt(portStr, 10);
     return CdpEngine.create(host, port, options.url);
   }
-  const { PlaywrightEngine } = await import("./playwright-engine-YBRDIUHF.js");
+  const { PlaywrightEngine } = await import("./playwright-engine-YXBY3KEN.js");
   return PlaywrightEngine.create(options.url, {
     headless: options.headless ?? true,
     viewport: options.viewport
@@ -134,211 +134,14 @@ async function screenshot(raw) {
 }
 // src/commands/overlay.ts
-import { createServer } from "http";
 import { writeFile as writeFile2, mkdir as mkdir2 } from "fs/promises";
 import { resolve, dirname as dirname2 } from "path";
-import { WebSocketServer } from "ws";
-// src/overlay/ui.ts
-function generateOverlayHtml(options) {
-  const {
-    targetUrl,
-    designImageBase64,
-    wsPort,
-    initialOpacity = 50,
-    initialScale = 100,
-    initialOffsetX = 0,
-    initialOffsetY = 0
-  } = options;
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<title>designer overlay</title>
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { overflow: hidden; background: #1a1a1a; font-family: system-ui, sans-serif; }
-  #toolbar {
-    position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
-    background: rgba(0,0,0,0.85); color: #fff; padding: 8px 16px;
-    display: flex; align-items: center; gap: 16px; font-size: 13px;
-    backdrop-filter: blur(8px);
-  }
-  #toolbar label { display: flex; align-items: center; gap: 6px; }
-  #toolbar input[type=range] { width: 120px; }
-  #toolbar .value { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
-  #confirm-btn {
-    margin-left: auto; padding: 6px 20px; background: #22c55e; color: #fff;
-    border: none; border-radius: 6px; font-size: 14px; font-weight: 600;
-    cursor: pointer;
-  }
-  #confirm-btn:hover { background: #16a34a; }
-  #viewport {
-    position: fixed; top: 40px; left: 0; right: 0; bottom: 0;
-  }
-  #target-frame {
-    width: 100%; height: 100%; border: none;
-  }
-  #overlay-img {
-    position: fixed; top: 40px; left: 0;
-    width: 100vw; height: auto;
-    pointer-events: none; z-index: 99999;
-    transform-origin: top left;
-  }
-  #overlay-img.draggable { pointer-events: auto; cursor: grab; }
-  #overlay-img.dragging { cursor: grabbing; }
-  #status {
-    position: fixed; bottom: 12px; right: 12px; z-index: 100001;
-    background: rgba(0,0,0,0.7); color: #aaa; padding: 4px 10px;
-    border-radius: 4px; font-size: 12px;
-  }
-</style>
-</head>
-<body>
-<div id="toolbar">
-  <span style="font-weight:600">designer</span>
-  <label>
-    opacity
-    <input type="range" id="opacity-slider" min="0" max="100" value="${initialOpacity}">
-    <span class="value" id="opacity-val">${initialOpacity}%</span>
-  </label>
-  <label>
-    scale
-    <input type="range" id="scale-slider" min="10" max="300" value="${initialScale}">
-    <span class="value" id="scale-val">${initialScale}%</span>
-  </label>
-  <label>
-    <input type="checkbox" id="lock-cb" checked> lock
-  </label>
-  <button id="reset-btn" style="padding:4px 12px;background:#555;color:#fff;border:none;border-radius:4px;cursor:pointer">reset</button>
-  <button id="confirm-btn">confirm</button>
-</div>
-<div id="viewport">
-  <iframe id="target-frame" src="${targetUrl}"></iframe>
-</div>
-<img id="overlay-img" src="data:image/png;base64,${designImageBase64}">
-<div id="status">connecting...</div>
-<script>
-(() => {
-  const img = document.getElementById('overlay-img');
-  const opacitySlider = document.getElementById('opacity-slider');
-  const opacityVal = document.getElementById('opacity-val');
-  const scaleSlider = document.getElementById('scale-slider');
-  const scaleVal = document.getElementById('scale-val');
-  const lockCb = document.getElementById('lock-cb');
-  const resetBtn = document.getElementById('reset-btn');
-  const confirmBtn = document.getElementById('confirm-btn');
-  const status = document.getElementById('status');
-  let offsetX = ${initialOffsetX}, offsetY = ${initialOffsetY};
-  let scale = ${initialScale} / 100;
-  let opacity = ${initialOpacity} / 100;
-  let isDragging = false, dragStartX = 0, dragStartY = 0, dragStartOX = 0, dragStartOY = 0;
-  function updateTransform() {
-    img.style.opacity = String(opacity);
-    img.style.transform = \`translate(\${offsetX}px, \${offsetY}px) scale(\${scale})\`;
-  }
-  opacitySlider.addEventListener('input', () => {
-    opacity = opacitySlider.value / 100;
-    opacityVal.textContent = opacitySlider.value + '%';
-    updateTransform();
-  });
-  scaleSlider.addEventListener('input', () => {
-    scale = scaleSlider.value / 100;
-    scaleVal.textContent = scaleSlider.value + '%';
-    updateTransform();
-  });
-  lockCb.addEventListener('change', () => {
-    img.classList.toggle('draggable', !lockCb.checked);
-  });
-  resetBtn.addEventListener('click', () => {
-    offsetX = 0; offsetY = 0; scale = 1; opacity = 0.5;
-    opacitySlider.value = '50'; opacityVal.textContent = '50%';
-    scaleSlider.value = '100'; scaleVal.textContent = '100%';
-    updateTransform();
-  });
-  // Drag
-  img.addEventListener('mousedown', (e) => {
-    if (lockCb.checked) return;
-    isDragging = true;
-    dragStartX = e.clientX; dragStartY = e.clientY;
-    dragStartOX = offsetX; dragStartOY = offsetY;
-    img.classList.add('dragging');
-    e.preventDefault();
-  });
-  document.addEventListener('mousemove', (e) => {
-    if (!isDragging) return;
-    offsetX = dragStartOX + (e.clientX - dragStartX);
-    offsetY = dragStartOY + (e.clientY - dragStartY);
-    updateTransform();
-  });
-  document.addEventListener('mouseup', () => {
-    isDragging = false;
-    img.classList.remove('dragging');
-  });
-  // Scroll zoom
-  document.addEventListener('wheel', (e) => {
-    if (lockCb.checked) return;
-    e.preventDefault();
-    const delta = e.deltaY > 0 ? -2 : 2;
-    const newVal = Math.max(10, Math.min(300, parseInt(scaleSlider.value) + delta));
-    scaleSlider.value = String(newVal);
-    scale = newVal / 100;
-    scaleVal.textContent = newVal + '%';
-    updateTransform();
-  }, { passive: false });
-  // WebSocket to CLI
-  const ws = new WebSocket('ws://127.0.0.1:${wsPort}');
-  ws.onopen = () => { status.textContent = 'connected'; };
-  ws.onclose = () => { status.textContent = 'disconnected'; };
-  confirmBtn.addEventListener('click', () => {
-    const params = { offsetX, offsetY, scale, opacity, scrollY: 0 };
-    // Try to get iframe scroll position
-    try {
-      const frame = document.getElementById('target-frame');
-      params.scrollY = frame.contentWindow.scrollY || 0;
-    } catch(e) {}
-    ws.send(JSON.stringify({ type: 'confirm', params }));
-    status.textContent = 'saved!';
-    confirmBtn.textContent = 'saved!';
-    confirmBtn.style.background = '#666';
-  });
-  updateTransform();
-})();
-</script>
-</body>
-</html>`;
-}
-// src/commands/overlay.ts
 function buildOverlayOptions(raw) {
   if (!raw.design) throw new Error("--design is required (path to design screenshot)");
   if (!raw.url) throw new Error("--url is required (target page URL)");
   return {
     designImagePath: resolve(raw.design),
     targetUrl: raw.url,
-    port: raw.port ? parseInt(raw.port, 10) : 9876,
     cdp: raw.cdp,
     output: raw.output,
     selector: raw.selector ? resolveSelector(raw.selector) : void 0,
@@ -371,8 +174,8 @@ async function captureGhost(opts, params) {
   }
 }
 async function compositeGhost(opts) {
-  const sharp = (await import("sharp")).default;
-  const { tintDesignImage } = await import("./tint-I3FTT23O.js");
+  const sharp2 = (await import("sharp")).default;
+  const { tintDesignImage } = await import("./tint-YN63MLVN.js");
   const engine = await createEngine({ url: opts.targetUrl, cdp: opts.cdp });
   let elementBuf;
   try {
@@ -380,12 +183,12 @@ async function compositeGhost(opts) {
   } finally {
     await engine.close();
   }
-  const elementMeta = await sharp(elementBuf).metadata();
+  const elementMeta = await sharp2(elementBuf).metadata();
   const ew = elementMeta.width;
   const eh = elementMeta.height;
   const tintedBuf = await tintDesignImage(opts.designImagePath);
-  const tintedResized = await sharp(tintedBuf).resize(ew, eh, { fit: "contain", background: { r: 0, g: 0, b: 0, alpha: 0 } }).toBuffer();
-  const ghostBuf = await sharp(elementBuf).composite([{ input: tintedResized, blend: "over" }]).png().toBuffer();
+  const tintedResized = await sharp2(tintedBuf).resize(ew, eh, { fit: "contain", background: { r: 0, g: 0, b: 0, alpha: 0 } }).toBuffer();
+  const ghostBuf = await sharp2(elementBuf).composite([{ input: tintedResized, blend: "over" }]).png().toBuffer();
   const outputPath = opts.output ?? `overlay-${Date.now()}.png`;
   await mkdir2(dirname2(resolve(outputPath)), { recursive: true }).catch(() => {
   });
@@ -407,59 +210,505 @@ async function overlay(raw) {
     });
     return;
   }
-  const { tintDesignImage } = await import("./tint-I3FTT23O.js");
-  const tintedBuf = await tintDesignImage(opts.designImagePath);
-  const imageBase64 = tintedBuf.toString("base64");
-  const wsPort = opts.port + 1;
-  const html = generateOverlayHtml({
-    targetUrl: opts.targetUrl,
-    designImageBase64: imageBase64,
-    wsPort
-  });
-  const server = createServer((req, res) => {
-    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-    res.end(html);
+  throw new Error("overlay requires --selector for component comparison, or --offset-x/--offset-y for full-page mode");
+}
+// src/commands/changelist.ts
+import { readFile, writeFile as writeFile3, mkdir as mkdir3 } from "fs/promises";
+import { basename, dirname as dirname3, extname, join, resolve as resolve2 } from "path";
+import sharp from "sharp";
+var COMPARISON_GAP = 32;
+var DEFAULT_SCANS = [
+  {
+    id: 1,
+    mode: "word-sentence",
+    label: "word / sentence",
+    hiddenSlider: true,
+    threshold: 20,
+    group: 12,
+    minArea: 114,
+    maxAreaPercent: 15
+  },
+  {
+    id: 2,
+    mode: "graphic-large",
+    label: "graphic / large region",
+    hiddenSlider: true,
+    threshold: 25,
+    group: 25,
+    minArea: 761,
+    maxAreaPercent: 50
+  }
+];
+function buildChangelistOptions(raw) {
+  if (!raw.design) throw new Error("--design is required (path to design screenshot)");
+  if (raw.runtime && raw.url) throw new Error("Use either --runtime or --url, not both");
+  if (!raw.runtime && !raw.url) throw new Error("--runtime or --url is required");
+  return {
+    designImagePath: resolve2(raw.design),
+    runtimeImagePath: raw.runtime ? resolve2(raw.runtime) : void 0,
+    runtimeUrl: raw.url,
+    selector: raw.selector ? resolveSelector(raw.selector) : void 0,
+    fullPage: raw.fullPage ?? false,
+    cdp: raw.cdp,
+    output: raw.output,
+    annotated: raw.annotated,
+    regionsDir: raw.regionsDir,
+    mode: parseMode(raw.mode ?? "both"),
+    threshold: raw.threshold != null ? parseNumber(raw.threshold, "--threshold") : void 0,
+    group: raw.group != null ? parseNumber(raw.group, "--group") : void 0,
+    minArea: raw.minArea != null ? parseNumber(raw.minArea, "--min-area") : void 0,
+    maxAreaPercent: raw.maxAreaPercent != null ? parsePercent(raw.maxAreaPercent, "--max-area-percent") : void 0
+  };
+}
+function resolveScanConfigs(opts) {
+  const scans = DEFAULT_SCANS.filter((scan) => opts.mode === "both" || scan.mode === opts.mode).map((scan) => ({
+    ...scan,
+    threshold: opts.threshold ?? scan.threshold,
+    group: opts.group ?? scan.group,
+    minArea: opts.minArea ?? scan.minArea,
+    maxAreaPercent: opts.maxAreaPercent ?? scan.maxAreaPercent
+  }));
+  if (scans.length === 0) throw new Error(`Unsupported mode: ${opts.mode}`);
+  return scans;
+}
+async function detectChangelist(designImagePath, runtimeImage, scans = DEFAULT_SCANS) {
+  const design = await loadImage(designImagePath);
+  const runtime = await loadImage(runtimeImage);
+  if (design.width !== runtime.width || design.height !== runtime.height) {
+    throw new Error(`Image sizes differ: design ${design.width}x${design.height}, runtime ${runtime.width}x${runtime.height}`);
+  }
+  const scanResults = scans.map((scan) => {
+    const mask = buildDiffMask(design, runtime, scan.threshold);
+    const changedPixels = countMask(mask);
+    const components = findComponents(mask, design.width, design.height);
+    const grouped = mergeComponents(components, scan.group, maxRegionArea(scan, design.width, design.height));
+    const regions2 = filterRegions(grouped, scan, design.width, design.height);
+    return {
+      id: scan.id,
+      mode: scan.mode,
+      label: scan.label,
+      params: {
+        hiddenSlider: scan.hiddenSlider,
+        threshold: scan.threshold,
+        group: scan.group,
+        minArea: scan.minArea,
+        maxAreaPercent: scan.maxAreaPercent
+      },
+      regions: regions2,
+      changedPixels,
+      changedPercent: roundPercent(changedPixels / (design.width * design.height))
+    };
   });
-  const wss = new WebSocketServer({ port: wsPort });
-  await new Promise((resolvePromise) => {
-    wss.on("connection", (ws) => {
-      ws.on("message", async (data) => {
-        try {
-          const msg = JSON.parse(data.toString());
-          if (msg.type === "confirm") {
-            console.log(JSON.stringify({ confirmed: true, params: msg.params }));
-            ws.send(JSON.stringify({ type: "saved" }));
-            wss.close();
-            server.close();
-            resolvePromise();
-          }
-        } catch (e) {
-          console.error("WebSocket error:", e);
+  let nextId = 1;
+  const regions = scanResults.flatMap((scan) => scan.regions.map((region) => ({ ...region, id: nextId++ }))).sort((a, b) => b.area - a.area || a.y - b.y || a.x - b.x).map((region, index) => ({ ...region, id: index + 1 }));
+  return {
+    design: designImagePath,
+    runtime: typeof runtimeImage === "string" ? runtimeImage : "<captured>",
+    size: { width: design.width, height: design.height },
+    scans: scanResults,
+    regions
+  };
+}
+async function changelist(raw) {
+  const opts = buildChangelistOptions(raw);
+  const scans = resolveScanConfigs(opts);
+  const runtime = opts.runtimeImagePath ?? await captureRuntime(opts);
+  const result = await detectChangelist(opts.designImagePath, runtime, scans);
+  let annotatedOutputs;
+  let regionOutputs;
+  if (opts.annotated) {
+    annotatedOutputs = await writeAnnotatedImages(opts.annotated, opts.designImagePath, runtime, scans, result);
+  }
+  if (opts.regionsDir) {
+    regionOutputs = await writeRegionExports(opts.regionsDir, opts.designImagePath, runtime, scans, result);
+  }
+  if (opts.output) {
+    await writeOutputFile(opts.output, Buffer.from(`${JSON.stringify(result, null, 2)}
+`, "utf8"));
+    console.log(JSON.stringify({
+      output: opts.output,
+      annotated: annotatedOutputs ?? opts.annotated,
+      regionsDir: regionOutputs ?? opts.regionsDir,
+      regions: result.regions.length,
+      scans: result.scans.map((scan) => ({ id: scan.id, mode: scan.mode, regions: scan.regions.length }))
+    }));
+    return;
+  }
+  console.log(JSON.stringify(result, null, 2));
+}
+async function writeAnnotatedImages(annotatedPath, designImagePath, runtimeImage, scans, result) {
+  const outputs = [];
+  if (scans.length > 1) {
+    const combined = await renderComparisonImage(designImagePath, runtimeImage, scans, result.regions);
+    await writeOutputFile(annotatedPath, combined);
+    outputs.push({ path: annotatedPath, mode: "combined", regions: result.regions.length });
+  }
+  for (const scan of scans) {
+    const scanResult = result.scans.find((item) => item.id === scan.id);
+    const outputPath = scans.length === 1 ? annotatedPath : appendModeSuffix(annotatedPath, scan.mode);
+    const image = await renderComparisonImage(designImagePath, runtimeImage, [scan], scanResult?.regions ?? []);
+    await writeOutputFile(outputPath, image);
+    outputs.push({ path: outputPath, mode: scan.mode, regions: scanResult?.regions.length ?? 0 });
+  }
+  return outputs;
+}
+async function writeRegionExports(outputRoot, designImagePath, runtimeImage, scans, result) {
+  const designBuffer = await readFile(designImagePath);
+  const runtimeBuffer = typeof runtimeImage === "string" ? await readFile(runtimeImage) : runtimeImage;
+  const outputs = [];
+  for (const scan of scans) {
+    const scanResult = result.scans.find((item) => item.id === scan.id);
+    const regions = scanResult?.regions ?? [];
+    const modeDir = join(outputRoot, regionDirName(scan.mode));
+    for (const region of regions) {
+      const regionDir = join(modeDir, String(region.id));
+      const designCrop = await cropRegion(designBuffer, region);
+      const runtimeCrop = await cropRegion(runtimeBuffer, region);
+      const compare = await renderRegionPairImage(designCrop, runtimeCrop, region);
+      const regionJson = {
+        ...region,
+        source: {
+          design: designImagePath,
+          runtime: typeof runtimeImage === "string" ? runtimeImage : "<captured>",
+          size: result.size
+        },
+        scan: {
+          id: scan.id,
+          mode: scan.mode,
+          label: scan.label,
+          params: scanResult?.params
         }
-      });
+      };
+      await writeOutputFile(join(regionDir, "design.png"), designCrop);
+      await writeOutputFile(join(regionDir, "runtime.png"), runtimeCrop);
+      await writeOutputFile(join(regionDir, "compare.png"), compare);
+      await writeOutputFile(join(regionDir, "region.json"), Buffer.from(`${JSON.stringify(regionJson, null, 2)}
+`, "utf8"));
+    }
+    outputs.push({ dir: modeDir, mode: scan.mode, regions: regions.length });
+  }
+  return outputs;
+}
+async function captureRuntime(opts) {
+  if (!opts.runtimeUrl) throw new Error("--url is required when --runtime is not provided");
+  const engine = await createEngine({ url: opts.runtimeUrl, cdp: opts.cdp });
+  try {
+    return await engine.screenshot({
+      selector: opts.selector,
+      fullPage: opts.fullPage
     });
-    server.listen(opts.port, () => {
-      const url = `http://127.0.0.1:${opts.port}`;
-      console.error(`Overlay UI: ${url}`);
-      console.error("Adjust the overlay, then click confirm.");
-      import("child_process").then(({ exec }) => {
-        const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
-        exec(`${cmd} ${url}`);
-      });
+  } finally {
+    await engine.close();
+  }
+}
+async function loadImage(input) {
+  const source = typeof input === "string" ? await readFile(input) : input;
+  const { data, info } = await sharp(source).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+  return {
+    data,
+    width: info.width,
+    height: info.height
+  };
+}
+function buildDiffMask(design, runtime, threshold) {
+  const total = design.width * design.height;
+  const mask = new Uint8Array(total);
+  for (let pixel = 0, offset = 0; pixel < total; pixel++, offset += 4) {
+    const diff = Math.max(
+      Math.abs(design.data[offset] - runtime.data[offset]),
+      Math.abs(design.data[offset + 1] - runtime.data[offset + 1]),
+      Math.abs(design.data[offset + 2] - runtime.data[offset + 2]),
+      Math.abs(design.data[offset + 3] - runtime.data[offset + 3])
+    );
+    if (diff >= threshold) mask[pixel] = 1;
+  }
+  return mask;
+}
+function buildUnionDiffMask(design, runtime, scans) {
+  const total = design.width * design.height;
+  const mask = new Uint8Array(total);
+  for (const scan of scans) {
+    const scanMask = buildDiffMask(design, runtime, scan.threshold);
+    for (let i = 0; i < total; i++) {
+      if (scanMask[i]) mask[i] = 1;
+    }
+  }
+  return mask;
+}
+function countMask(mask) {
+  let count = 0;
+  for (const value of mask) count += value;
+  return count;
+}
+function findComponents(mask, width, height) {
+  const visited = new Uint8Array(mask.length);
+  const components = [];
+  const queue = [];
+  for (let start = 0; start < mask.length; start++) {
+    if (!mask[start] || visited[start]) continue;
+    visited[start] = 1;
+    queue.length = 0;
+    queue.push(start);
+    let head = 0;
+    let changedPixels = 0;
+    let minX = width;
+    let minY = height;
+    let maxX = 0;
+    let maxY = 0;
+    while (head < queue.length) {
+      const idx = queue[head++];
+      const x = idx % width;
+      const y = Math.floor(idx / width);
+      changedPixels++;
+      if (x < minX) minX = x;
+      if (y < minY) minY = y;
+      if (x > maxX) maxX = x;
+      if (y > maxY) maxY = y;
+      for (let dy = -1; dy <= 1; dy++) {
+        const ny = y + dy;
+        if (ny < 0 || ny >= height) continue;
+        for (let dx = -1; dx <= 1; dx++) {
+          if (dx === 0 && dy === 0) continue;
+          const nx = x + dx;
+          if (nx < 0 || nx >= width) continue;
+          const next = ny * width + nx;
+          if (!mask[next] || visited[next]) continue;
+          visited[next] = 1;
+          queue.push(next);
+        }
+      }
+    }
+    components.push({
+      x: minX,
+      y: minY,
+      right: maxX + 1,
+      bottom: maxY + 1,
+      changedPixels
     });
+  }
+  return components;
+}
+function mergeComponents(components, group, maxArea) {
+  const regions = components.map((component) => ({ ...component }));
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (let i = 0; i < regions.length; i++) {
+      for (let j = i + 1; j < regions.length; j++) {
+        if (!shouldMerge(regions[i], regions[j], group)) continue;
+        const merged = mergeRegion(regions[i], regions[j]);
+        if (componentArea(merged) > maxArea) continue;
+        regions[i] = merged;
+        regions.splice(j, 1);
+        changed = true;
+        j--;
+      }
+    }
+  }
+  return regions;
+}
+function maxRegionArea(scan, width, height) {
+  return width * height * (scan.maxAreaPercent / 100);
+}
+function shouldMerge(a, b, gap) {
+  return !(a.right + gap < b.x || b.right + gap < a.x || a.bottom + gap < b.y || b.bottom + gap < a.y);
+}
+function componentArea(component) {
+  return (component.right - component.x) * (component.bottom - component.y);
+}
+function mergeRegion(a, b) {
+  return {
+    x: Math.min(a.x, b.x),
+    y: Math.min(a.y, b.y),
+    right: Math.max(a.right, b.right),
+    bottom: Math.max(a.bottom, b.bottom),
+    changedPixels: a.changedPixels + b.changedPixels
+  };
+}
+function filterRegions(components, scan, width, height) {
+  const imageArea = width * height;
+  return components.map(componentToRegion(scan, imageArea)).filter((region) => region.area >= scan.minArea).filter((region) => region.changedPercent <= scan.maxAreaPercent).sort((a, b) => b.area - a.area || a.y - b.y || a.x - b.x).map((region, index) => ({ ...region, id: index + 1 }));
+}
+function componentToRegion(scan, imageArea) {
+  return (component) => {
+    const width = component.right - component.x;
+    const height = component.bottom - component.y;
+    const area = width * height;
+    return {
+      id: 0,
+      scanId: scan.id,
+      mode: scan.mode,
+      x: component.x,
+      y: component.y,
+      width,
+      height,
+      area,
+      changedPixels: component.changedPixels,
+      changedPercent: roundPercent(area / imageArea)
+    };
+  };
+}
+async function cropRegion(image, region) {
+  return sharp(image).extract({
+    left: region.x,
+    top: region.y,
+    width: region.width,
+    height: region.height
+  }).png().toBuffer();
+}
+async function renderRegionPairImage(designCrop, runtimeCrop, region) {
+  const designMeta = await sharp(designCrop).metadata();
+  const runtimeMeta = await sharp(runtimeCrop).metadata();
+  const width = designMeta.width ?? region.width;
+  const height = designMeta.height ?? region.height;
+  if (width !== runtimeMeta.width || height !== runtimeMeta.height) {
+    throw new Error(`Region crop sizes differ for region ${region.id}: design ${width}x${height}, runtime ${runtimeMeta.width}x${runtimeMeta.height}`);
+  }
+  const runtimeOffsetX = width + COMPARISON_GAP;
+  const outputWidth = width * 2 + COMPARISON_GAP;
+  return sharp({
+    create: {
+      width: outputWidth,
+      height,
+      channels: 4,
+      background: { r: 248, g: 250, b: 252, alpha: 1 }
+    }
+  }).composite([
+    { input: designCrop, left: 0, top: 0 },
+    { input: runtimeCrop, left: runtimeOffsetX, top: 0 },
+    { input: Buffer.from(buildDividerSvg(outputWidth, height, runtimeOffsetX)), blend: "over" }
+  ]).png().toBuffer();
+}
+async function renderComparisonImage(designImagePath, runtimeImage, scans, regions) {
+  const design = await loadImage(designImagePath);
+  const runtime = await loadImage(runtimeImage);
+  if (design.width !== runtime.width || design.height !== runtime.height) {
+    throw new Error(`Image sizes differ: design ${design.width}x${design.height}, runtime ${runtime.width}x${runtime.height}`);
+  }
+  const mask = buildUnionDiffMask(design, runtime, scans);
+  const highlightedRuntime = Buffer.from(runtime.data);
+  for (let pixel = 0, offset = 0; pixel < mask.length; pixel++, offset += 4) {
+    if (!mask[pixel]) continue;
+    highlightedRuntime[offset] = 255;
+    highlightedRuntime[offset + 1] = Math.round(highlightedRuntime[offset + 1] * 0.35);
+    highlightedRuntime[offset + 2] = Math.round(highlightedRuntime[offset + 2] * 0.35);
+    highlightedRuntime[offset + 3] = 255;
+  }
+  const runtimeOffsetX = design.width + COMPARISON_GAP;
+  const outputWidth = design.width * 2 + COMPARISON_GAP;
+  const designPanel = await imageDataToPng(design);
+  const runtimePanel = await imageDataToPng({ ...runtime, data: highlightedRuntime });
+  const svg = buildSideBySideRegionSvg(outputWidth, design.height, runtimeOffsetX, regions);
+  return sharp({
+    create: {
+      width: outputWidth,
+      height: design.height,
+      channels: 4,
+      background: { r: 248, g: 250, b: 252, alpha: 1 }
+    }
+  }).composite([
+    { input: designPanel, left: 0, top: 0 },
+    { input: runtimePanel, left: runtimeOffsetX, top: 0 },
+    { input: Buffer.from(svg), blend: "over" }
+  ]).png().toBuffer();
+}
+function imageDataToPng(image) {
+  return sharp(image.data, {
+    raw: {
+      width: image.width,
+      height: image.height,
+      channels: 4
+    }
+  }).png().toBuffer();
+}
+function buildSideBySideRegionSvg(width, height, runtimeOffsetX, regions) {
+  const svg = [
+    `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">`,
+    dividerSvgContent(height, runtimeOffsetX),
+    ...regions.flatMap((region) => [
+      regionToSvg(region, 0),
+      regionToSvg(region, runtimeOffsetX)
+    ]),
+    "</svg>"
+  ].join("");
+  return svg;
+}
+function buildDividerSvg(width, height, runtimeOffsetX) {
+  return [
+    `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">`,
+    dividerSvgContent(height, runtimeOffsetX),
+    "</svg>"
+  ].join("");
+}
+function dividerSvgContent(height, runtimeOffsetX) {
+  return [
+    `<rect x="${runtimeOffsetX - COMPARISON_GAP}" y="0" width="${COMPARISON_GAP}" height="${height}" fill="#f8fafc"/>`,
+    `<line x1="${runtimeOffsetX - COMPARISON_GAP / 2}" y1="0" x2="${runtimeOffsetX - COMPARISON_GAP / 2}" y2="${height}" stroke="#d9e2ec" stroke-width="1"/>`
+  ].join("");
+}
+function regionToSvg(region, offsetX) {
+  const labelWidth = Math.max(14, String(region.id).length * 8 + 8);
+  const labelX = Math.max(offsetX, offsetX + region.x + region.width - labelWidth);
+  const labelY = Math.max(0, region.y - 12);
+  return [
+    `<rect x="${offsetX + region.x + 0.5}" y="${region.y + 0.5}" width="${Math.max(1, region.width - 1)}" height="${Math.max(1, region.height - 1)}" fill="none" stroke="#ef3b2d" stroke-width="1"/>`,
+    `<rect x="${labelX}" y="${labelY}" width="${labelWidth}" height="14" fill="#ef3b2d"/>`,
+    `<text x="${labelX + labelWidth / 2}" y="${labelY + 10}" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="700" fill="#fff">${region.id}</text>`
+  ].join("");
+}
+async function writeOutputFile(filePath, data) {
+  await mkdir3(dirname3(resolve2(filePath)), { recursive: true }).catch(() => {
   });
+  await writeFile3(filePath, data);
+}
+function appendModeSuffix(filePath, mode) {
+  const ext = extname(filePath) || ".png";
+  const name = extname(filePath) ? basename(filePath, extname(filePath)) : basename(filePath);
+  return join(dirname3(filePath), `${name}-${mode}${ext}`);
+}
+function regionDirName(mode) {
+  return mode === "word-sentence" ? "word" : "graphic";
+}
+function parseMode(value) {
+  const normalized = String(value).trim().toLowerCase();
+  if (["both", "all"].includes(normalized)) return "both";
+  if (["word", "words", "sentence", "sentences", "word-sentence", "word_sentence", "text"].includes(normalized)) {
+    return "word-sentence";
+  }
+  if (["graphic", "graphics", "large", "large-region", "graphic-large", "graphic_large"].includes(normalized)) {
+    return "graphic-large";
+  }
+  throw new Error(`invalid mode: ${value}. Use both, word-sentence, or graphic-large.`);
+}
+function parseNumber(value, flag) {
+  const n = Number(value);
+  if (!Number.isFinite(n) || n < 0) throw new Error(`${flag} must be a non-negative number`);
+  return n;
+}
+function parsePercent(value, flag) {
+  const raw = String(value).trim().replace(/%$/, "");
+  const n = Number(raw);
+  if (!Number.isFinite(n) || n < 0 || n > 100) {
+    throw new Error(`${flag} must be a number between 0 and 100`);
+  }
+  return n;
+}
+function roundPercent(value) {
+  return Math.round(value * 1e4) / 100;
 }
 // src/cli.ts
 var program = new Command();
 program.name("designer").description(
-  "Runtime UI measurement CLI for AI agents: measure CSS/layout, capture screenshots, and build design overlays."
+  "Runtime UI measurement CLI for AI agents: measure CSS/layout, capture screenshots, build overlays, and list visual changes."
 ).version("0.1.0");
 program.addHelpText("after", `
 Workflow (agent):
   1. measure    Read element bbox and computed CSS as JSON
   2. screenshot Capture design/runtime component images
   3. overlay    Compare design image against runtime page
+  4. changelist List changed regions between design/runtime screenshots
 Engine selection:
   Default: Playwright (launches headless Chromium)
@@ -470,6 +719,7 @@ Examples:
   $ designer measure --url http://127.0.0.1:32767/start.html --frame "#mainFrame" --selector "#u0"
   $ designer screenshot --url http://localhost:3000 --selector ".dialog" --output runtime.png
   $ designer overlay --design design.png --url http://localhost:3000 --selector ".dialog" --output overlay.png
+  $ designer changelist --design design.png --runtime runtime.png --annotated changes.png
 `);
 var measureCmd = program.command("measure").description("Measure an element bbox, computed style, and optional child tree.").requiredOption("--url <url>", "Target page URL").requiredOption("--selector <selector>", "CSS selector to measure; prefix ~ for fuzzy class match").option("--frame <selector>", "Iframe CSS selector; measure --selector inside this frame document").option("--depth <n>", "Child element depth (0=no children)", "1").option("--cdp <host:port>", "CDP endpoint").option("--pick <fields>", "Pick bbox, children, or CSS property names (comma-separated)").option("--format <format>", "Output format: json | table", "json").action(measure);
 measureCmd.addHelpText("after", `
@@ -482,7 +732,7 @@ Output (json):
   }
 `);
 program.command("screenshot").description("Capture a PNG screenshot of the full page or a specific element.").requiredOption("--url <url>", "Target page URL").option("--selector <selector>", "CSS selector; captures element only, prefix ~ for fuzzy class match").option("--output <path>", "Output file path (default: screenshot-<timestamp>.png)").option("--full-page", "Capture full scrollable page").option("--cdp <host:port>", "CDP endpoint").action(screenshot);
-var overlayCmd = program.command("overlay").description("Generate a magenta design ghost overlay on top of a live page screenshot.").requiredOption("--design <path>", "Path to design screenshot (PNG/JPG)").requiredOption("--url <url>", "Target page URL").option("--selector <selector>", "CSS selector; composite ghost on element, prefix ~ for fuzzy class match").option("--full-page", "Capture full scrollable page").option("--output <path>", "Output file path (default: overlay-<timestamp>.png)").option("--offset-x <px>", "Horizontal offset of design overlay (full-page mode)").option("--offset-y <px>", "Vertical offset of design overlay (full-page mode)").option("--scale <ratio>", "Scale factor for design overlay (1 = 100%)").option("--opacity <0-1>", "Opacity of design overlay").option("--cdp <host:port>", "CDP endpoint").option("--port <port>", "Local server port for interactive UI", "9876").action(overlay);
+var overlayCmd = program.command("overlay").description("Generate a magenta design ghost overlay on top of a live page screenshot.").requiredOption("--design <path>", "Path to design screenshot (PNG/JPG)").requiredOption("--url <url>", "Target page URL").option("--selector <selector>", "CSS selector; composite ghost on element, prefix ~ for fuzzy class match").option("--full-page", "Capture full scrollable page").option("--output <path>", "Output file path (default: overlay-<timestamp>.png)").option("--offset-x <px>", "Horizontal offset of design overlay (full-page mode)").option("--offset-y <px>", "Vertical offset of design overlay (full-page mode)").option("--scale <ratio>", "Scale factor for design overlay (1 = 100%)").option("--opacity <0-1>", "Opacity of design overlay").option("--cdp <host:port>", "CDP endpoint").action(overlay);
 overlayCmd.addHelpText("after", `
 Modes:
   Selector:
@@ -491,8 +741,8 @@ Modes:
   Direct full-page:
     $ designer overlay --design spec.png --url http://localhost:3000 --offset-x 0 --offset-y 0 --output overlay.png
-  Interactive:
-    $ designer overlay --design spec.png --url http://localhost:3000
+  Without --selector, provide at least --offset-x or --offset-y for direct full-page mode.
 `);
+program.command("changelist").description("Detect changed regions between a design screenshot and a runtime screenshot.").requiredOption("--design <path>", "Path to design screenshot (PNG/JPG)").option("--runtime <path>", "Path to runtime screenshot; use this or --url").option("--url <url>", "Target page URL to capture as runtime screenshot; use this or --runtime").option("--selector <selector>", "CSS selector when capturing --url; prefix ~ for fuzzy class match").option("--full-page", "Capture full scrollable page when using --url").option("--cdp <host:port>", "CDP endpoint when using --url").option("--output <path>", "Write changelist JSON to file; default prints JSON").option("--annotated <path>", "Write side-by-side comparison PNG; both mode also writes per-mode PNG files").option("--regions-dir <dir>", "Write per-region design/runtime/compare PNGs and region JSON by scan mode").option("--mode <mode>", "both | word-sentence | graphic-large", "both").option("--threshold <n>", "Override difference threshold for selected scans").option("--group <px>", "Override grouping distance for selected scans").option("--min-area <px>", "Override minimum region area for selected scans").option("--max-area-percent <pct>", "Override max region area percent for selected scans").action(changelist);
 program.parse();
 //# sourceMappingURL=cli.js.map