alanbox 0.1.1 → 0.1.3

package/2designer/dist/index.d.ts

@@ -0,0 +1,129 @@
+interface BBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+interface ChildElement {
+    tag: string;
+    className: string;
+    bbox: BBox;
+    text?: string;
+    children?: ChildElement[];
+}
+interface MeasureResult {
+    selector: string;
+    frameSelector?: string;
+    bbox: BBox;
+    computedStyle: Record<string, string>;
+    children?: ChildElement[];
+}
+interface OverlayParams {
+    designImagePath: string;
+    targetUrl: string;
+    offsetX: number;
+    offsetY: number;
+    scale: number;
+    opacity: number;
+    scrollY?: number;
+}
+interface ScreenshotOptions {
+    selector?: string;
+    fullPage?: boolean;
+    output?: string;
+}
+interface RuntimeEngine {
+    /** Take a screenshot, optionally of a specific element */
+    screenshot(options?: ScreenshotOptions): Promise<Buffer>;
+    /** Measure an element's bbox + computed style */
+    measure(selector: string, depth?: number, frameSelector?: string): Promise<MeasureResult>;
+    /** Execute JavaScript in the page context */
+    evaluate<T = unknown>(expression: string): Promise<T>;
+    /** Inject a design overlay image onto the page */
+    injectOverlay(params: OverlayParams): Promise<void>;
+    /** Capture the page with overlay applied */
+    captureOverlay(options?: ScreenshotOptions): Promise<Buffer>;
+    /** Clean up resources */
+    close(): Promise<void>;
+}
+
+interface EngineOptions {
+    cdp?: string;
+    url: string;
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    headless?: boolean;
+}
+declare function resolveEngineType(options: {
+    cdp?: string;
+}): 'cdp' | 'playwright';
+declare function createEngine(options: EngineOptions): Promise<RuntimeEngine>;
+
+declare class CdpEngine implements RuntimeEngine {
+    private client;
+    private pageUrl;
+    private constructor();
+    static create(host: string, port: number, urlFilter?: string): Promise<CdpEngine>;
+    screenshot(options?: ScreenshotOptions): Promise<Buffer>;
+    measure(selector: string, depth?: number, frameSelector?: string): Promise<MeasureResult>;
+    evaluate<T = unknown>(expression: string): Promise<T>;
+    injectOverlay(params: OverlayParams): Promise<void>;
+    captureOverlay(options?: ScreenshotOptions): Promise<Buffer>;
+    close(): Promise<void>;
+    private getViewport;
+}
+
+interface PlaywrightEngineOptions {
+    headless?: boolean;
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    deviceScaleFactor?: number;
+    waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' | 'commit';
+    waitTimeout?: number;
+}
+declare class PlaywrightEngine implements RuntimeEngine {
+    private browser;
+    private page;
+    private constructor();
+    static create(url: string, options?: PlaywrightEngineOptions): Promise<PlaywrightEngine>;
+    screenshot(options?: ScreenshotOptions): Promise<Buffer>;
+    measure(selector: string, depth?: number, frameSelector?: string): Promise<MeasureResult>;
+    evaluate<T = unknown>(expression: string): Promise<T>;
+    injectOverlay(params: OverlayParams): Promise<void>;
+    captureOverlay(options?: ScreenshotOptions): Promise<Buffer>;
+    close(): Promise<void>;
+}
+
+interface OverlayHtmlOptions {
+    targetUrl: string;
+    designImageBase64: string;
+    wsPort: number;
+    initialOpacity?: number;
+    initialScale?: number;
+    initialOffsetX?: number;
+    initialOffsetY?: number;
+}
+declare function generateOverlayHtml(options: OverlayHtmlOptions): string;
+
+type TintMode = 'magenta' | 'ghost' | 'difference';
+/**
+ * Process a design image for overlay compositing.
+ *
+ * Modes:
+ * - 'magenta': Tint non-white pixels magenta (best for white/light backgrounds)
+ * - 'ghost': Reduce opacity uniformly (works on any background color)
+ * - 'difference': No preprocessing — caller should use 'difference' blend mode
+ *
+ * Returns a PNG buffer with alpha channel.
+ */
+declare function tintDesignImage(imagePath: string, mode?: TintMode): Promise<Buffer>;
+
+export { type BBox, CdpEngine, type ChildElement, type EngineOptions, type MeasureResult, type OverlayParams, PlaywrightEngine, type RuntimeEngine, type ScreenshotOptions, createEngine, generateOverlayHtml, resolveEngineType, tintDesignImage };

package/2designer/dist/index.js

@@ -0,0 +1,230 @@
+import {
+  tintDesignImage
+} from "./chunk-SKEIVBOU.js";
+import {
+  CdpEngine
+} from "./chunk-JVF26NXD.js";
+import {
+  PlaywrightEngine
+} from "./chunk-NQ3ASZUE.js";
+import "./chunk-UVKSRKXR.js";
+
+// 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: CdpEngine2 } = await import("./cdp-engine-A5WTMTVF.js");
+    const [host, portStr] = options.cdp.split(":");
+    const port = parseInt(portStr, 10);
+    return CdpEngine2.create(host, port, options.url);
+  }
+  const { PlaywrightEngine: PlaywrightEngine2 } = await import("./playwright-engine-3YKJOUNU.js");
+  return PlaywrightEngine2.create(options.url, {
+    headless: options.headless ?? true,
+    viewport: options.viewport
+  });
+}
+
+// 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>`;
+}
+export {
+  CdpEngine,
+  PlaywrightEngine,
+  createEngine,
+  generateOverlayHtml,
+  resolveEngineType,
+  tintDesignImage
+};
+//# sourceMappingURL=index.js.map

package/2designer/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/engine/create-engine.ts","../src/overlay/ui.ts"],"sourcesContent":["import type { RuntimeEngine } from './types.js'\r\n\r\nexport interface EngineOptions {\r\n  cdp?: string // host:port\r\n  url: string\r\n  viewport?: { width: number; height: number }\r\n  headless?: boolean\r\n}\r\n\r\nexport function resolveEngineType(options: { cdp?: string }): 'cdp' | 'playwright' {\r\n  return options.cdp ? 'cdp' : 'playwright'\r\n}\r\n\r\nexport async function createEngine(options: EngineOptions): Promise<RuntimeEngine> {\r\n  const type = resolveEngineType(options)\r\n\r\n  if (type === 'cdp') {\r\n    const { CdpEngine } = await import('./cdp/cdp-engine.js')\r\n    const [host, portStr] = options.cdp!.split(':')\r\n    const port = parseInt(portStr, 10)\r\n    return CdpEngine.create(host, port, options.url)\r\n  }\r\n\r\n  const { PlaywrightEngine } = await import('./playwright/playwright-engine.js')\r\n  return PlaywrightEngine.create(options.url, {\r\n    headless: options.headless ?? true,\r\n    viewport: options.viewport,\r\n  })\r\n}\r\n","export interface OverlayHtmlOptions {\r\n  targetUrl: string\r\n  designImageBase64: string\r\n  wsPort: number\r\n  initialOpacity?: number\r\n  initialScale?: number\r\n  initialOffsetX?: number\r\n  initialOffsetY?: number\r\n}\r\n\r\nexport function generateOverlayHtml(options: OverlayHtmlOptions): string {\r\n  const {\r\n    targetUrl,\r\n    designImageBase64,\r\n    wsPort,\r\n    initialOpacity = 50,\r\n    initialScale = 100,\r\n    initialOffsetX = 0,\r\n    initialOffsetY = 0,\r\n  } = options\r\n\r\n  return `<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>designer overlay</title>\r\n<style>\r\n  * { margin: 0; padding: 0; box-sizing: border-box; }\r\n  body { overflow: hidden; background: #1a1a1a; font-family: system-ui, sans-serif; }\r\n\r\n  #toolbar {\r\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100000;\r\n    background: rgba(0,0,0,0.85); color: #fff; padding: 8px 16px;\r\n    display: flex; align-items: center; gap: 16px; font-size: 13px;\r\n    backdrop-filter: blur(8px);\r\n  }\r\n  #toolbar label { display: flex; align-items: center; gap: 6px; }\r\n  #toolbar input[type=range] { width: 120px; }\r\n  #toolbar .value { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }\r\n  #confirm-btn {\r\n    margin-left: auto; padding: 6px 20px; background: #22c55e; color: #fff;\r\n    border: none; border-radius: 6px; font-size: 14px; font-weight: 600;\r\n    cursor: pointer;\r\n  }\r\n  #confirm-btn:hover { background: #16a34a; }\r\n\r\n  #viewport {\r\n    position: fixed; top: 40px; left: 0; right: 0; bottom: 0;\r\n  }\r\n  #target-frame {\r\n    width: 100%; height: 100%; border: none;\r\n  }\r\n\r\n  #overlay-img {\r\n    position: fixed; top: 40px; left: 0;\r\n    width: 100vw; height: auto;\r\n    pointer-events: none; z-index: 99999;\r\n    transform-origin: top left;\r\n  }\r\n  #overlay-img.draggable { pointer-events: auto; cursor: grab; }\r\n  #overlay-img.dragging { cursor: grabbing; }\r\n\r\n  #status {\r\n    position: fixed; bottom: 12px; right: 12px; z-index: 100001;\r\n    background: rgba(0,0,0,0.7); color: #aaa; padding: 4px 10px;\r\n    border-radius: 4px; font-size: 12px;\r\n  }\r\n</style>\r\n</head>\r\n<body>\r\n\r\n<div id=\"toolbar\">\r\n  <span style=\"font-weight:600\">designer</span>\r\n  <label>\r\n    opacity\r\n    <input type=\"range\" id=\"opacity-slider\" min=\"0\" max=\"100\" value=\"${initialOpacity}\">\r\n    <span class=\"value\" id=\"opacity-val\">${initialOpacity}%</span>\r\n  </label>\r\n  <label>\r\n    scale\r\n    <input type=\"range\" id=\"scale-slider\" min=\"10\" max=\"300\" value=\"${initialScale}\">\r\n    <span class=\"value\" id=\"scale-val\">${initialScale}%</span>\r\n  </label>\r\n  <label>\r\n    <input type=\"checkbox\" id=\"lock-cb\" checked> lock\r\n  </label>\r\n  <button id=\"reset-btn\" style=\"padding:4px 12px;background:#555;color:#fff;border:none;border-radius:4px;cursor:pointer\">reset</button>\r\n  <button id=\"confirm-btn\">confirm</button>\r\n</div>\r\n\r\n<div id=\"viewport\">\r\n  <iframe id=\"target-frame\" src=\"${targetUrl}\"></iframe>\r\n</div>\r\n\r\n<img id=\"overlay-img\" src=\"data:image/png;base64,${designImageBase64}\">\r\n\r\n<div id=\"status\">connecting...</div>\r\n\r\n<script>\r\n(() => {\r\n  const img = document.getElementById('overlay-img');\r\n  const opacitySlider = document.getElementById('opacity-slider');\r\n  const opacityVal = document.getElementById('opacity-val');\r\n  const scaleSlider = document.getElementById('scale-slider');\r\n  const scaleVal = document.getElementById('scale-val');\r\n  const lockCb = document.getElementById('lock-cb');\r\n  const resetBtn = document.getElementById('reset-btn');\r\n  const confirmBtn = document.getElementById('confirm-btn');\r\n  const status = document.getElementById('status');\r\n\r\n  let offsetX = ${initialOffsetX}, offsetY = ${initialOffsetY};\r\n  let scale = ${initialScale} / 100;\r\n  let opacity = ${initialOpacity} / 100;\r\n  let isDragging = false, dragStartX = 0, dragStartY = 0, dragStartOX = 0, dragStartOY = 0;\r\n\r\n  function updateTransform() {\r\n    img.style.opacity = String(opacity);\r\n    img.style.transform = \\`translate(\\${offsetX}px, \\${offsetY}px) scale(\\${scale})\\`;\r\n  }\r\n\r\n  opacitySlider.addEventListener('input', () => {\r\n    opacity = opacitySlider.value / 100;\r\n    opacityVal.textContent = opacitySlider.value + '%';\r\n    updateTransform();\r\n  });\r\n\r\n  scaleSlider.addEventListener('input', () => {\r\n    scale = scaleSlider.value / 100;\r\n    scaleVal.textContent = scaleSlider.value + '%';\r\n    updateTransform();\r\n  });\r\n\r\n  lockCb.addEventListener('change', () => {\r\n    img.classList.toggle('draggable', !lockCb.checked);\r\n  });\r\n\r\n  resetBtn.addEventListener('click', () => {\r\n    offsetX = 0; offsetY = 0; scale = 1; opacity = 0.5;\r\n    opacitySlider.value = '50'; opacityVal.textContent = '50%';\r\n    scaleSlider.value = '100'; scaleVal.textContent = '100%';\r\n    updateTransform();\r\n  });\r\n\r\n  // Drag\r\n  img.addEventListener('mousedown', (e) => {\r\n    if (lockCb.checked) return;\r\n    isDragging = true;\r\n    dragStartX = e.clientX; dragStartY = e.clientY;\r\n    dragStartOX = offsetX; dragStartOY = offsetY;\r\n    img.classList.add('dragging');\r\n    e.preventDefault();\r\n  });\r\n\r\n  document.addEventListener('mousemove', (e) => {\r\n    if (!isDragging) return;\r\n    offsetX = dragStartOX + (e.clientX - dragStartX);\r\n    offsetY = dragStartOY + (e.clientY - dragStartY);\r\n    updateTransform();\r\n  });\r\n\r\n  document.addEventListener('mouseup', () => {\r\n    isDragging = false;\r\n    img.classList.remove('dragging');\r\n  });\r\n\r\n  // Scroll zoom\r\n  document.addEventListener('wheel', (e) => {\r\n    if (lockCb.checked) return;\r\n    e.preventDefault();\r\n    const delta = e.deltaY > 0 ? -2 : 2;\r\n    const newVal = Math.max(10, Math.min(300, parseInt(scaleSlider.value) + delta));\r\n    scaleSlider.value = String(newVal);\r\n    scale = newVal / 100;\r\n    scaleVal.textContent = newVal + '%';\r\n    updateTransform();\r\n  }, { passive: false });\r\n\r\n  // WebSocket to CLI\r\n  const ws = new WebSocket('ws://127.0.0.1:${wsPort}');\r\n  ws.onopen = () => { status.textContent = 'connected'; };\r\n  ws.onclose = () => { status.textContent = 'disconnected'; };\r\n\r\n  confirmBtn.addEventListener('click', () => {\r\n    const params = { offsetX, offsetY, scale, opacity, scrollY: 0 };\r\n    // Try to get iframe scroll position\r\n    try {\r\n      const frame = document.getElementById('target-frame');\r\n      params.scrollY = frame.contentWindow.scrollY || 0;\r\n    } catch(e) {}\r\n    ws.send(JSON.stringify({ type: 'confirm', params }));\r\n    status.textContent = 'saved!';\r\n    confirmBtn.textContent = 'saved!';\r\n    confirmBtn.style.background = '#666';\r\n  });\r\n\r\n  updateTransform();\r\n})();\r\n</script>\r\n</body>\r\n</html>`\r\n}\r\n"],"mappings":";;;;;;;;;;;;AASO,SAAS,kBAAkB,SAAiD;AACjF,SAAO,QAAQ,MAAM,QAAQ;AAC/B;AAEA,eAAsB,aAAa,SAAgD;AACjF,QAAM,OAAO,kBAAkB,OAAO;AAEtC,MAAI,SAAS,OAAO;AAClB,UAAM,EAAE,WAAAA,WAAU,IAAI,MAAM,OAAO,0BAAqB;AACxD,UAAM,CAAC,MAAM,OAAO,IAAI,QAAQ,IAAK,MAAM,GAAG;AAC9C,UAAM,OAAO,SAAS,SAAS,EAAE;AACjC,WAAOA,WAAU,OAAO,MAAM,MAAM,QAAQ,GAAG;AAAA,EACjD;AAEA,QAAM,EAAE,kBAAAC,kBAAiB,IAAI,MAAM,OAAO,iCAAmC;AAC7E,SAAOA,kBAAiB,OAAO,QAAQ,KAAK;AAAA,IAC1C,UAAU,QAAQ,YAAY;AAAA,IAC9B,UAAU,QAAQ;AAAA,EACpB,CAAC;AACH;;;AClBO,SAAS,oBAAoB,SAAqC;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EACnB,IAAI;AAEJ,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uEAsD8D,cAAc;AAAA,2CAC1C,cAAc;AAAA;AAAA;AAAA;AAAA,sEAIa,YAAY;AAAA,yCACzC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAUlB,SAAS;AAAA;AAAA;AAAA,mDAGO,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBlD,cAAc,eAAe,cAAc;AAAA,gBAC7C,YAAY;AAAA,kBACV,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6CAkEa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBnD;","names":["CdpEngine","PlaywrightEngine"]}

package/2designer/dist/playwright-engine-3YKJOUNU.js

@@ -0,0 +1,8 @@
+import {
+  PlaywrightEngine
+} from "./chunk-NQ3ASZUE.js";
+import "./chunk-UVKSRKXR.js";
+export {
+  PlaywrightEngine
+};
+//# sourceMappingURL=playwright-engine-3YKJOUNU.js.map

package/2designer/dist/playwright-engine-3YKJOUNU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/2designer/dist/playwright-engine-YBRDIUHF.js

@@ -0,0 +1,186 @@
+#!/usr/bin/env node
+
+import {
+  MEASURE_RETRY_INTERVAL_MS,
+  MEASURE_WAIT_TIMEOUT_MS,
+  RELEVANT_PROPS,
+  REQUIRED_MEASURE_PROPS
+} from "./chunk-NLYFLQ3C.js";
+
+// src/engine/playwright/playwright-engine.ts
+var PlaywrightEngine = class _PlaywrightEngine {
+  browser;
+  page;
+  constructor(browser, page) {
+    this.browser = browser;
+    this.page = page;
+  }
+  static async create(url, options = {}) {
+    const { chromium } = await import("playwright");
+    const browser = await chromium.launch({
+      headless: options.headless ?? true
+    });
+    const context = await browser.newContext({
+      viewport: options.viewport ?? { width: 1920, height: 1080 },
+      deviceScaleFactor: options.deviceScaleFactor ?? 1
+    });
+    const page = await context.newPage();
+    await page.goto(url, {
+      waitUntil: options.waitUntil ?? "networkidle",
+      timeout: options.waitTimeout ?? 15e3
+    });
+    return new _PlaywrightEngine(browser, page);
+  }
+  async screenshot(options) {
+    if (options?.selector) {
+      const el = await this.page.waitForSelector(options.selector, {
+        timeout: 5e3,
+        state: "visible"
+      });
+      return el.screenshot({ type: "png" });
+    }
+    return this.page.screenshot({
+      type: "png",
+      fullPage: options?.fullPage ?? false
+    });
+  }
+  async measure(selector, depth = 1, frameSelector) {
+    const maxDepth = Number.isFinite(depth) ? Math.max(0, depth) : 1;
+    const handle = await this.page.waitForFunction(
+      ({
+        sel,
+        frameSel,
+        props,
+        requiredProps,
+        maxDepth: maxDepth2
+      }) => {
+        function toBBox(rect, origin) {
+          const originX = origin?.x ?? 0;
+          const originY = origin?.y ?? 0;
+          const originLeft = origin?.left ?? 0;
+          const originTop = origin?.top ?? 0;
+          return {
+            x: +(rect.x - originX).toFixed(1),
+            y: +(rect.y - originY).toFixed(1),
+            width: +rect.width.toFixed(1),
+            height: +rect.height.toFixed(1),
+            top: +(rect.top - originTop).toFixed(1),
+            right: +(rect.right - originLeft).toFixed(1),
+            bottom: +(rect.bottom - originTop).toFixed(1),
+            left: +(rect.left - originLeft).toFixed(1)
+          };
+        }
+        function isValidBBox(bbox2) {
+          return Object.values(bbox2).every(Number.isFinite);
+        }
+        function collectStyle(win2, el2) {
+          const cs = win2.getComputedStyle(el2);
+          const style2 = {};
+          props.forEach((p) => {
+            style2[p] = p === "font" ? cs.font : cs.getPropertyValue(p);
+          });
+          return style2;
+        }
+        function hasRequiredStyle(style2) {
+          return requiredProps.every((p) => typeof style2[p] === "string" && style2[p] !== "");
+        }
+        function collectChildren(parent, parentRect, currentDepth, maxDep) {
+          if (currentDepth >= maxDep) return [];
+          const result2 = [];
+          for (const child of parent.children) {
+            const cr = child.getBoundingClientRect();
+            const node = {
+              tag: child.tagName.toLowerCase(),
+              className: (child.className || "").toString().substring(0, 120),
+              bbox: toBBox(cr, parentRect),
+              text: (child.textContent || "").substring(0, 80).trim() || void 0
+            };
+            if (currentDepth + 1 < maxDep && child.children.length > 0) {
+              node.children = collectChildren(child, cr, currentDepth + 1, maxDep);
+            }
+            result2.push(node);
+          }
+          return result2;
+        }
+        let doc = document;
+        let win = window;
+        if (frameSel) {
+          const frame = document.querySelector(frameSel);
+          if (!frame || !frame.contentDocument || !frame.contentWindow) return null;
+          doc = frame.contentDocument;
+          win = frame.contentWindow;
+        }
+        const el = doc.querySelector(sel);
+        if (!el) return null;
+        const r = el.getBoundingClientRect();
+        const bbox = toBBox(r);
+        const style = collectStyle(win, el);
+        if (!isValidBBox(bbox)) return null;
+        if (!hasRequiredStyle(style)) return null;
+        if (bbox.width <= 0 || bbox.height <= 0 || style.display === "none" || style.visibility === "hidden") {
+          return null;
+        }
+        return {
+          bbox,
+          computedStyle: style,
+          children: maxDepth2 > 0 ? collectChildren(el, r, 0, maxDepth2) : []
+        };
+      },
+      {
+        sel: selector,
+        frameSel: frameSelector,
+        props: RELEVANT_PROPS,
+        requiredProps: REQUIRED_MEASURE_PROPS,
+        maxDepth
+      },
+      {
+        timeout: MEASURE_WAIT_TIMEOUT_MS,
+        polling: MEASURE_RETRY_INTERVAL_MS
+      }
+    );
+    const result = await handle.jsonValue();
+    return frameSelector ? { selector, frameSelector, ...result } : { selector, ...result };
+  }
+  async evaluate(expression) {
+    return this.page.evaluate(expression);
+  }
+  async injectOverlay(params) {
+    const { tintDesignImage } = await import("./tint-I3FTT23O.js");
+    const tintedBuf = await tintDesignImage(params.designImagePath);
+    const base64 = tintedBuf.toString("base64");
+    await this.page.evaluate(
+      ({ b64, opacity, offsetX, offsetY, scale, scrollY }) => {
+        let overlay = document.getElementById("__design_ruler_overlay__");
+        if (!overlay) {
+          overlay = document.createElement("img");
+          overlay.id = "__design_ruler_overlay__";
+          overlay.style.cssText = "position:fixed;top:0;left:0;width:100vw;height:auto;pointer-events:none;z-index:999999;";
+          document.body.appendChild(overlay);
+        }
+        overlay.src = `data:image/png;base64,${b64}`;
+        overlay.style.opacity = String(opacity);
+        overlay.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+        overlay.style.transformOrigin = "top left";
+        if (scrollY > 0) window.scrollTo(0, scrollY);
+      },
+      {
+        b64: base64,
+        opacity: params.opacity,
+        offsetX: params.offsetX,
+        offsetY: params.offsetY,
+        scale: params.scale,
+        scrollY: params.scrollY ?? 0
+      }
+    );
+  }
+  async captureOverlay(options) {
+    return this.screenshot(options);
+  }
+  async close() {
+    await this.browser.close();
+  }
+};
+export {
+  PlaywrightEngine
+};
+//# sourceMappingURL=playwright-engine-YBRDIUHF.js.map

package/2designer/dist/playwright-engine-YBRDIUHF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/engine/playwright/playwright-engine.ts"],"sourcesContent":["import type { RuntimeEngine, MeasureResult, ScreenshotOptions, OverlayParams } from '../types.js'\nimport {\n  MEASURE_RETRY_INTERVAL_MS,\n  MEASURE_WAIT_TIMEOUT_MS,\n  RELEVANT_PROPS,\n  REQUIRED_MEASURE_PROPS,\n} from '../constants.js'\n\r\nexport interface PlaywrightEngineOptions {\r\n  headless?: boolean\r\n  viewport?: { width: number; height: number }\r\n  deviceScaleFactor?: number\r\n  waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' | 'commit'\r\n  waitTimeout?: number\r\n}\r\n\r\nexport class PlaywrightEngine implements RuntimeEngine {\r\n  private browser: any\r\n  private page: any\r\n\r\n  private constructor(browser: any, page: any) {\r\n    this.browser = browser\r\n    this.page = page\r\n  }\r\n\r\n  static async create(\r\n    url: string,\r\n    options: PlaywrightEngineOptions = {},\r\n  ): Promise<PlaywrightEngine> {\r\n    const { chromium } = await import('playwright')\r\n    const browser = await chromium.launch({\r\n      headless: options.headless ?? true,\r\n    })\r\n    const context = await browser.newContext({\r\n      viewport: options.viewport ?? { width: 1920, height: 1080 },\r\n      deviceScaleFactor: options.deviceScaleFactor ?? 1,\r\n    })\r\n    const page = await context.newPage()\r\n    await page.goto(url, {\r\n      waitUntil: options.waitUntil ?? 'networkidle',\r\n      timeout: options.waitTimeout ?? 15000,\r\n    })\r\n    return new PlaywrightEngine(browser, page)\r\n  }\r\n\r\n  async screenshot(options?: ScreenshotOptions): Promise<Buffer> {\r\n    if (options?.selector) {\r\n      const el = await this.page.waitForSelector(options.selector, {\r\n        timeout: 5000,\r\n        state: 'visible',\r\n      })\r\n      return el.screenshot({ type: 'png' })\r\n    }\r\n    return this.page.screenshot({\r\n      type: 'png',\r\n      fullPage: options?.fullPage ?? false,\r\n    })\r\n  }\r\n\r\n  async measure(selector: string, depth = 1, frameSelector?: string): Promise<MeasureResult> {\n    const maxDepth = Number.isFinite(depth) ? Math.max(0, depth) : 1\n    const handle = await this.page.waitForFunction(\n      (\n        {\n          sel,\n          frameSel,\n          props,\n          requiredProps,\n          maxDepth,\n        }: { sel: string; frameSel?: string; props: string[]; requiredProps: string[]; maxDepth: number },\n      ) => {\n        function toBBox(rect: DOMRect, origin?: DOMRect) {\n          const originX = origin?.x ?? 0\n          const originY = origin?.y ?? 0\n          const originLeft = origin?.left ?? 0\n          const originTop = origin?.top ?? 0\n          return {\n            x: +(rect.x - originX).toFixed(1),\n            y: +(rect.y - originY).toFixed(1),\n            width: +rect.width.toFixed(1),\n            height: +rect.height.toFixed(1),\n            top: +(rect.top - originTop).toFixed(1),\n            right: +(rect.right - originLeft).toFixed(1),\n            bottom: +(rect.bottom - originTop).toFixed(1),\n            left: +(rect.left - originLeft).toFixed(1),\n          }\n        }\n\n        function isValidBBox(bbox: Record<string, number>) {\n          return Object.values(bbox).every(Number.isFinite)\n        }\n\n        function collectStyle(win: Window, el: Element) {\n          const cs = win.getComputedStyle(el)\n          const style: Record<string, string> = {}\n          props.forEach(p => {\n            style[p] = p === 'font' ? cs.font : cs.getPropertyValue(p)\n          })\n          return style\n        }\n\n        function hasRequiredStyle(style: Record<string, string>) {\n          return requiredProps.every(p => typeof style[p] === 'string' && style[p] !== '')\n        }\n\n        function collectChildren(\n          parent: Element,\n          parentRect: DOMRect,\n          currentDepth: number,\n          maxDep: number,\n        ): any[] {\n          if (currentDepth >= maxDep) return []\n          const result: any[] = []\n          for (const child of parent.children) {\n            const cr = child.getBoundingClientRect()\n            const node: any = {\n              tag: child.tagName.toLowerCase(),\n              className: (child.className || '').toString().substring(0, 120),\n              bbox: toBBox(cr, parentRect),\n              text: (child.textContent || '').substring(0, 80).trim() || undefined,\n            }\n            if (currentDepth + 1 < maxDep && child.children.length > 0) {\n              node.children = collectChildren(child, cr, currentDepth + 1, maxDep)\r\n            }\r\n            result.push(node)\r\n          }\n          return result\n        }\n\n        let doc: Document = document\n        let win: Window = window\n        if (frameSel) {\n          const frame = document.querySelector(frameSel) as HTMLIFrameElement | null\n          if (!frame || !frame.contentDocument || !frame.contentWindow) return null\n          doc = frame.contentDocument\n          win = frame.contentWindow\n        }\n\n        const el = doc.querySelector(sel)\n        if (!el) return null\n        const r = el.getBoundingClientRect()\n        const bbox = toBBox(r)\n        const style = collectStyle(win, el)\n        if (!isValidBBox(bbox)) return null\n        if (!hasRequiredStyle(style)) return null\n        if (bbox.width <= 0 || bbox.height <= 0 || style.display === 'none' || style.visibility === 'hidden') {\n          return null\n        }\n\n        return {\n          bbox,\n          computedStyle: style,\n          children: maxDepth > 0 ? collectChildren(el, r, 0, maxDepth) : [],\n        }\n      },\n      {\n        sel: selector,\n        frameSel: frameSelector,\n        props: RELEVANT_PROPS,\n        requiredProps: REQUIRED_MEASURE_PROPS,\n        maxDepth,\n      },\n      {\n        timeout: MEASURE_WAIT_TIMEOUT_MS,\n        polling: MEASURE_RETRY_INTERVAL_MS,\n      },\n    )\n    const result = await handle.jsonValue()\n    return frameSelector ? { selector, frameSelector, ...result } : { selector, ...result }\n  }\n\r\n  async evaluate<T = unknown>(expression: string): Promise<T> {\r\n    return this.page.evaluate(expression)\r\n  }\r\n\r\n  async injectOverlay(params: OverlayParams): Promise<void> {\r\n    const { tintDesignImage } = await import('../../overlay/tint.js')\r\n    const tintedBuf = await tintDesignImage(params.designImagePath)\r\n    const base64 = tintedBuf.toString('base64')\r\n    await this.page.evaluate(\r\n      ({ b64, opacity, offsetX, offsetY, scale, scrollY }: any) => {\r\n        let overlay = document.getElementById('__design_ruler_overlay__') as HTMLImageElement\r\n        if (!overlay) {\r\n          overlay = document.createElement('img')\r\n          overlay.id = '__design_ruler_overlay__'\r\n          overlay.style.cssText =\r\n            'position:fixed;top:0;left:0;width:100vw;height:auto;pointer-events:none;z-index:999999;'\r\n          document.body.appendChild(overlay)\r\n        }\r\n        overlay.src = `data:image/png;base64,${b64}`\r\n        overlay.style.opacity = String(opacity)\r\n        overlay.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`\r\n        overlay.style.transformOrigin = 'top left'\r\n        if (scrollY > 0) window.scrollTo(0, scrollY)\r\n      },\r\n      {\r\n        b64: base64,\r\n        opacity: params.opacity,\r\n        offsetX: params.offsetX,\r\n        offsetY: params.offsetY,\r\n        scale: params.scale,\r\n        scrollY: params.scrollY ?? 0,\r\n      },\r\n    )\r\n  }\r\n\r\n  async captureOverlay(options?: import('../types.js').ScreenshotOptions): Promise<Buffer> {\r\n    return this.screenshot(options)\r\n  }\r\n\r\n  async close(): Promise<void> {\r\n    await this.browser.close()\r\n  }\r\n}\r\n"],"mappings":"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","names":["maxDepth","bbox","win","el","style","result"]}

package/2designer/dist/tint-I3FTT23O.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+
+// src/overlay/tint.ts
+import sharp from "sharp";
+async function tintDesignImage(imagePath, mode = "auto") {
+  const { data, info } = await sharp(imagePath).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+  const pixels = new Uint8Array(data.buffer);
+  const resolvedMode = mode === "auto" ? detectMode(pixels) : mode;
+  if (resolvedMode === "magenta") {
+    return tintMagenta(pixels, info);
+  }
+  if (resolvedMode === "difference") {
+    return sharp(imagePath).ensureAlpha().png().toBuffer();
+  }
+  return tintGhost(pixels, info, 0.4);
+}
+function detectMode(pixels) {
+  let brightCount = 0;
+  const sampleSize = Math.min(pixels.length / 4, 1e3);
+  const step = Math.floor(pixels.length / 4 / sampleSize);
+  for (let i = 0; i < sampleSize; i++) {
+    const idx = i * step * 4;
+    const brightness = (pixels[idx] + pixels[idx + 1] + pixels[idx + 2]) / 3;
+    if (brightness > 220) brightCount++;
+  }
+  return brightCount / sampleSize > 0.5 ? "magenta" : "ghost";
+}
+var LIGHT_THRESHOLD = 230;
+var MAGENTA = [220, 40, 160];
+function tintMagenta(pixels, info) {
+  for (let i = 0; i < pixels.length; i += 4) {
+    const r = pixels[i], g = pixels[i + 1], b = pixels[i + 2];
+    const brightness = (r + g + b) / 3;
+    if (brightness > LIGHT_THRESHOLD) {
+      pixels[i + 3] = 0;
+    } else {
+      const darkness = 1 - brightness / 255;
+      pixels[i] = MAGENTA[0];
+      pixels[i + 1] = MAGENTA[1];
+      pixels[i + 2] = MAGENTA[2];
+      pixels[i + 3] = Math.round(darkness * 200);
+    }
+  }
+  return sharp(Buffer.from(pixels.buffer), {
+    raw: { width: info.width, height: info.height, channels: 4 }
+  }).png().toBuffer();
+}
+function tintGhost(pixels, info, opacity) {
+  for (let i = 0; i < pixels.length; i += 4) {
+    pixels[i + 3] = Math.round(pixels[i + 3] * opacity);
+  }
+  return sharp(Buffer.from(pixels.buffer), {
+    raw: { width: info.width, height: info.height, channels: 4 }
+  }).png().toBuffer();
+}
+export {
+  tintDesignImage
+};
+//# sourceMappingURL=tint-I3FTT23O.js.map