alanbox 0.1.2 → 0.1.4

package/2designer/dist/cli.js

@@ -0,0 +1,748 @@
+#!/usr/bin/env node
+
+
+// src/cli.ts
+import { Command } from "commander";
+
+// src/engine/create-engine.ts
+function resolveEngineType(options) {
+  return options.cdp ? "cdp" : "playwright";
+}
+async function createEngine(options) {
+  const type = resolveEngineType(options);
+  if (type === "cdp") {
+    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-YXBY3KEN.js");
+  return PlaywrightEngine.create(options.url, {
+    headless: options.headless ?? true,
+    viewport: options.viewport
+  });
+}
+
+// src/engine/selector.ts
+function resolveSelector(input) {
+  if (input.startsWith("~")) {
+    const keyword = input.slice(1).trim();
+    return `[class*="${keyword}"]`;
+  }
+  return input;
+}
+
+// src/commands/measure.ts
+function buildMeasureOptions(raw) {
+  if (!raw.url) throw new Error("--url is required");
+  if (!raw.selector) throw new Error("--selector is required");
+  return {
+    url: raw.url,
+    selector: resolveSelector(raw.selector),
+    frame: raw.frame ? resolveSelector(raw.frame) : void 0,
+    depth: raw.depth != null ? parseInt(raw.depth, 10) : 1,
+    cdp: raw.cdp,
+    format: raw.format ?? "json",
+    pick: raw.pick
+  };
+}
+function formatMeasureResult(result, format) {
+  if (format === "table") {
+    const lines = [];
+    lines.push(`Selector: ${result.selector}`);
+    lines.push(`BBox: x=${result.bbox.x} y=${result.bbox.y} w=${result.bbox.width} h=${result.bbox.height}`);
+    lines.push("");
+    lines.push("Property".padEnd(30) + "Value");
+    lines.push("-".repeat(60));
+    for (const [key, val] of Object.entries(result.computedStyle)) {
+      lines.push(key.padEnd(30) + val);
+    }
+    if (result.children?.length) {
+      let printChildren2 = function(children, indent) {
+        for (const c of children) {
+          const pad = " ".repeat(indent);
+          lines.push(`${pad}<${c.tag}> .${c.className} [${c.bbox.width}x${c.bbox.height}] ${c.text ?? ""}`);
+          if (c.children?.length) {
+            printChildren2(c.children, indent + 2);
+          }
+        }
+      };
+      var printChildren = printChildren2;
+      lines.push("");
+      lines.push(`Children (${result.children.length}):`);
+      printChildren2(result.children, 2);
+    }
+    return lines.join("\n");
+  }
+  return JSON.stringify(result, null, 2);
+}
+function pickFields(result, pick) {
+  if (pick === "bbox") return JSON.stringify(result.bbox);
+  if (pick === "children") return JSON.stringify(result.children ?? []);
+  const props = pick.split(",").map((p) => p.trim());
+  const picked = {};
+  for (const p of props) {
+    if (result.computedStyle[p] != null) {
+      picked[p] = result.computedStyle[p];
+    }
+  }
+  return JSON.stringify(picked);
+}
+async function measure(raw) {
+  const opts = buildMeasureOptions(raw);
+  const engine = await createEngine({ url: opts.url, cdp: opts.cdp });
+  try {
+    const result = await engine.measure(opts.selector, opts.depth, opts.frame);
+    if (opts.pick) {
+      console.log(pickFields(result, opts.pick));
+    } else {
+      console.log(formatMeasureResult(result, opts.format ?? "json"));
+    }
+  } finally {
+    await engine.close();
+  }
+}
+
+// src/commands/screenshot.ts
+import { writeFile, mkdir } from "fs/promises";
+import { dirname } from "path";
+function buildScreenshotOptions(raw) {
+  if (!raw.url) throw new Error("--url is required");
+  return {
+    url: raw.url,
+    selector: raw.selector ? resolveSelector(raw.selector) : void 0,
+    output: raw.output ?? `screenshot-${Date.now()}.png`,
+    fullPage: raw.fullPage ?? false,
+    cdp: raw.cdp
+  };
+}
+async function screenshot(raw) {
+  const opts = buildScreenshotOptions(raw);
+  const engine = await createEngine({ url: opts.url, cdp: opts.cdp });
+  try {
+    const buf = await engine.screenshot({
+      selector: opts.selector,
+      fullPage: opts.fullPage
+    });
+    await mkdir(dirname(opts.output), { recursive: true }).catch(() => {
+    });
+    await writeFile(opts.output, buf);
+    console.log(JSON.stringify({ output: opts.output, bytes: buf.length }));
+  } finally {
+    await engine.close();
+  }
+}
+
+// src/commands/overlay.ts
+import { writeFile as writeFile2, mkdir as mkdir2 } from "fs/promises";
+import { resolve, dirname as dirname2 } from "path";
+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,
+    cdp: raw.cdp,
+    output: raw.output,
+    selector: raw.selector ? resolveSelector(raw.selector) : void 0,
+    offsetX: raw.offsetX != null ? parseFloat(raw.offsetX) : void 0,
+    offsetY: raw.offsetY != null ? parseFloat(raw.offsetY) : void 0,
+    scale: raw.scale != null ? parseFloat(raw.scale) : void 0,
+    opacity: raw.opacity != null ? parseFloat(raw.opacity) : void 0,
+    fullPage: raw.fullPage ?? false
+  };
+}
+async function captureGhost(opts, params) {
+  const engine = await createEngine({ url: opts.targetUrl, cdp: opts.cdp });
+  try {
+    await engine.injectOverlay({
+      designImagePath: opts.designImagePath,
+      targetUrl: opts.targetUrl,
+      offsetX: params.offsetX,
+      offsetY: params.offsetY,
+      scale: params.scale,
+      opacity: params.opacity
+    });
+    const buf = await engine.captureOverlay({ fullPage: opts.fullPage });
+    const outputPath = opts.output ?? `overlay-${Date.now()}.png`;
+    await mkdir2(dirname2(resolve(outputPath)), { recursive: true }).catch(() => {
+    });
+    await writeFile2(outputPath, buf);
+    console.log(JSON.stringify({ output: outputPath, bytes: buf.length }));
+  } finally {
+    await engine.close();
+  }
+}
+async function compositeGhost(opts) {
+  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 {
+    elementBuf = await engine.screenshot({ selector: opts.selector, fullPage: opts.fullPage });
+  } finally {
+    await engine.close();
+  }
+  const elementMeta = await sharp2(elementBuf).metadata();
+  const ew = elementMeta.width;
+  const eh = elementMeta.height;
+  const tintedBuf = await tintDesignImage(opts.designImagePath);
+  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(() => {
+  });
+  await writeFile2(outputPath, ghostBuf);
+  console.log(JSON.stringify({ output: outputPath, bytes: ghostBuf.length, selector: opts.selector, elementSize: { width: ew, height: eh } }));
+}
+async function overlay(raw) {
+  const opts = buildOverlayOptions(raw);
+  if (opts.selector) {
+    await compositeGhost(opts);
+    return;
+  }
+  if (opts.offsetX != null || opts.offsetY != null) {
+    await captureGhost(opts, {
+      offsetX: opts.offsetX ?? 0,
+      offsetY: opts.offsetY ?? 0,
+      scale: opts.scale ?? 1,
+      opacity: opts.opacity ?? 1
+    });
+    return;
+  }
+  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))
+    };
+  });
+  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
+    });
+  } 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, 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)
+  --cdp <host:port>: Connect to an existing Chrome/WebView
+
+Examples:
+  $ designer measure --url http://localhost:3000 --selector ".dialog"
+  $ 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", `
+Output (json):
+  {
+    "selector": ".dialog",
+    "bbox": { "x": 100, "y": 200, "width": 400, "height": 300 },
+    "computedStyle": { "border-radius": "12px", "padding": "24px" },
+    "children": []
+  }
+`);
+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").action(overlay);
+overlayCmd.addHelpText("after", `
+Modes:
+  Selector:
+    $ designer overlay --design design.png --url http://localhost:3000 --selector ".dialog" --output overlay.png
+
+  Direct full-page:
+    $ designer overlay --design spec.png --url http://localhost:3000 --offset-x 0 --offset-y 0 --output overlay.png
+
+  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