@tempo-ai/visual-review 0.0.107-staging.2 → 0.0.108-staging.1

package/dist/bin.js

@@ -6,7 +6,7 @@ async function main(argv = process.argv.slice(2)) {
   const [command, ...commandArgs] = argv;
   switch (command) {
     case "capture":
-      return await (await import("./cli-JCGZRFSY.js")).main(commandArgs);
+      return await (await import("./cli-DPVTULCN.js")).main(commandArgs);
     case "claim":
       return await (await import("./claim-WI2ZVIDS.js")).main(commandArgs);
     case "report":

package/dist/{chunk-MW6S36CX.js → chunk-WGNWCWMJ.js}

@@ -15,6 +15,63 @@ import path16 from "path";
 
 // ../canvas-capture-headless/src/capture.ts
 import { createHash } from "crypto";
+
+// ../../modules/iframe-projection/combined/projection-pending.ts
+var PROJECTION_PENDING_ATTRIBUTE = "data-tempo-projection-pending";
+
+// ../../modules/component-render-pool/direct-render.ts
+var DIRECT_RENDER_PARAMS = {
+  canvasPath: "canvasPath",
+  storyboardId: "storyboardId",
+  width: "width",
+  height: "height",
+  intrinsicSize: "intrinsicSize",
+  idle: "tempoCaptureIdle"
+};
+var STORYBOARD_RENDER_ID_ATTRIBUTE = "data-tempo-storyboard-render-id";
+var STORYBOARD_PENDING_SELECTOR = `[${PROJECTION_PENDING_ATTRIBUTE}]`;
+function buildCanvasStoryboardRenderId(canvasPath, storyboardId) {
+  return `canvas:${encodeURIComponent(canvasPath.trim())}#storyboard:${encodeURIComponent(
+    storyboardId.trim()
+  )}`;
+}
+function buildStoryboardRenderSelector(renderId) {
+  return `[${STORYBOARD_RENDER_ID_ATTRIBUTE}=${JSON.stringify(renderId)}]`;
+}
+function buildDirectRenderUrl(hostUrl, target) {
+  const hasWidth = target.width !== void 0;
+  const hasHeight = target.height !== void 0;
+  if (hasWidth !== hasHeight) {
+    throw new Error("Direct render width and height must be provided together");
+  }
+  const url = new URL(hostUrl);
+  url.searchParams.delete(DIRECT_RENDER_PARAMS.idle);
+  url.searchParams.set(DIRECT_RENDER_PARAMS.canvasPath, target.canvasPath);
+  url.searchParams.set(DIRECT_RENDER_PARAMS.storyboardId, target.storyboardId);
+  if (hasWidth && hasHeight) {
+    url.searchParams.set(DIRECT_RENDER_PARAMS.width, String(target.width));
+    url.searchParams.set(DIRECT_RENDER_PARAMS.height, String(target.height));
+  } else {
+    url.searchParams.delete(DIRECT_RENDER_PARAMS.width);
+    url.searchParams.delete(DIRECT_RENDER_PARAMS.height);
+  }
+  if (target.intrinsicSize) {
+    url.searchParams.set(DIRECT_RENDER_PARAMS.intrinsicSize, "1");
+  } else {
+    url.searchParams.delete(DIRECT_RENDER_PARAMS.intrinsicSize);
+  }
+  return url.toString();
+}
+function buildDirectRenderIdleUrl(hostUrl) {
+  const url = new URL(hostUrl);
+  for (const param of Object.values(DIRECT_RENDER_PARAMS)) {
+    url.searchParams.delete(param);
+  }
+  url.searchParams.set(DIRECT_RENDER_PARAMS.idle, "1");
+  return url.toString();
+}
+
+// ../canvas-capture-headless/src/capture.ts
 import { PNG } from "pngjs";
 
 // ../../modules/frame-pool/capture-determinism.ts
@@ -70,100 +127,240 @@ var FREEZE_MOTION_CSS = `
 }
 `;
 
-// ../canvas-capture-headless/src/determinism.ts
-var CHROMIUM_LAUNCH_ARGS = [
-  "--force-color-profile=srgb",
-  "--force-device-scale-factor=2",
-  "--hide-scrollbars",
-  "--disable-lcd-text"
+// ../../modules/frame-pool/settle-script.ts
+var SETTLE_STEPS = [
+  "target",
+  "fonts",
+  "suspense",
+  "content-quiet",
+  "paint"
 ];
-async function runSettleStep(name, work, onStep) {
-  const startedAt = Date.now();
-  try {
-    return await work();
-  } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(`settle.${name}: ${message}`);
-  } finally {
-    onStep?.(name, Date.now() - startedAt);
-  }
-}
-async function settlePage(page, targetSelector, options = {}) {
-  const quietMs = options.quietMs ?? 300;
-  const timeoutMs = options.timeoutMs ?? 15e3;
-  await runSettleStep(
-    "target",
-    () => page.waitForSelector(targetSelector, {
-      state: "attached",
-      timeout: timeoutMs
-    }),
-    options.onStep
-  );
-  await runSettleStep(
-    "fonts",
-    () => page.waitForFunction(() => document.fonts.status === "loaded", {
-      timeout: timeoutMs
-    }),
-    options.onStep
+var DEFAULT_SETTLE_QUIET_MS = 300;
+var DEFAULT_SETTLE_STEP_TIMEOUT_MS = 15e3;
+var DEFAULT_SETTLE_POLL_MS = 50;
+function buildSettleWaitScript(options) {
+  const quietMs = Math.max(0, Math.round(options.quietMs ?? DEFAULT_SETTLE_QUIET_MS));
+  const stepTimeoutMs = Math.max(
+    1,
+    Math.round(options.stepTimeoutMs ?? DEFAULT_SETTLE_STEP_TIMEOUT_MS)
   );
-  await runSettleStep(
-    "suspense",
-    () => page.waitForFunction(
-      (selector) => {
-        const target = document.querySelector(selector);
-        if (!target) return false;
-        return !target.querySelector("[data-tempo-projection-pending]");
-      },
-      targetSelector,
-      { timeout: timeoutMs }
-    ),
-    options.onStep
+  const quietTimeoutMs = Math.max(
+    1,
+    Math.round(options.quietTimeoutMs ?? stepTimeoutMs)
   );
-  await runSettleStep(
-    "content-quiet",
-    () => page.waitForFunction(
-      ({ selector, quiet }) => {
-        const target = document.querySelector(selector);
+  const pollMs = Math.max(1, Math.round(options.pollMs ?? DEFAULT_SETTLE_POLL_MS));
+  return `
+    (function() {
+      var selector = ${JSON.stringify(options.selector)};
+      var pendingSelector = ${JSON.stringify(options.pendingSelector ?? null)};
+      var quietMs = ${quietMs};
+      var stepTimeoutMs = ${stepTimeoutMs};
+      var quietTimeoutMs = ${quietTimeoutMs};
+      var quietBestEffort = ${options.quietBestEffort === true ? "true" : "false"};
+      var pollMs = ${pollMs};
+      var runPaint = ${options.paint === false ? "false" : "true"};
+      var steps = {};
+      // Cleared when the content-quiet step gives up under best effort.
+      var quiet = true;
+      // Monotonic and immune to the determinism kit's frozen Date.
+      var now = typeof performance !== 'undefined' && performance && typeof performance.now === 'function'
+        ? function() { return performance.now(); }
+        : function() { return Date.now(); };
+
+      function failure(step, message) {
+        return { ok: false, step: step, message: message, steps: steps };
+      }
+
+      // Polls \`check\` until it answers true, or \`budgetMs\` elapses. The
+      // first check runs synchronously so an already-settled step costs no
+      // poll interval. A step run with \`giveUp\` resolves at its budget
+      // instead of failing, recording that the content never held still.
+      function until(step, check, budgetMs, giveUp) {
+        var started = now();
+        return new Promise(function(resolve, reject) {
+          function tick() {
+            var done;
+            try {
+              done = check();
+            } catch (error) {
+              steps[step] = Math.round(now() - started);
+              reject(failure(step, String((error && error.message) || error)));
+              return;
+            }
+            if (done) {
+              steps[step] = Math.round(now() - started);
+              resolve();
+              return;
+            }
+            if (now() - started >= budgetMs) {
+              steps[step] = Math.round(now() - started);
+              if (giveUp) {
+                quiet = false;
+                resolve();
+                return;
+              }
+              reject(failure(step, 'Timeout ' + budgetMs + 'ms exceeded'));
+              return;
+            }
+            setTimeout(tick, pollMs);
+          }
+          tick();
+        });
+      }
+
+      var quietKey = null;
+      var quietSince = 0;
+      // Images that take part in the capture: laid out and not hidden. A
+      // hidden responsive variant never starts native lazy loading and must
+      // not hold the window; a rendered lazy image never starts either,
+      // because a capture does not scroll, so it is asked for eagerly.
+      function renderedImages(target) {
+        var all = Array.prototype.slice.call(target.querySelectorAll('img'));
+        var rendered = [];
+        for (var i = 0; i < all.length; i++) {
+          var img = all[i];
+          if (img.getClientRects().length === 0) continue;
+          var visibility = getComputedStyle(img).visibility;
+          if (visibility === 'hidden' || visibility === 'collapse') continue;
+          rendered.push(img);
+        }
+        return rendered;
+      }
+      function contentQuiet() {
+        var target = document.querySelector(selector);
         if (!target) return false;
-        const images = Array.from(target.querySelectorAll("img"));
-        if (images.some((img) => !img.complete)) return false;
-        const rect = target.getBoundingClientRect();
-        const text = target.innerText ?? "";
-        const key2 = [
+        var images = renderedImages(target);
+        for (var i = 0; i < images.length; i++) {
+          if (images[i].loading === 'lazy') images[i].loading = 'eager';
+        }
+        for (var j = 0; j < images.length; j++) {
+          if (!images[j].complete) {
+            // Load/error handlers can replace content without moving its
+            // geometry: start a fresh quiet window once they have run.
+            quietKey = null;
+            return false;
+          }
+        }
+        var rect = target.getBoundingClientRect();
+        var text = target.innerText || '';
+        var key = [
           rect.x,
           rect.y,
           rect.width,
           rect.height,
-          target.querySelectorAll("*").length,
+          target.querySelectorAll('*').length,
           text.length,
           images.length
-        ].join(",");
-        const state = window.__tempoVisualReviewQuiet ?? {};
-        window.__tempoVisualReviewQuiet = state;
-        const now = performance.now();
-        if (state.key !== key2) {
-          state.key = key2;
-          state.since = now;
+        ].join(',');
+        var at = now();
+        if (quietKey !== key) {
+          quietKey = key;
+          quietSince = at;
           return false;
         }
-        return now - state.since >= quiet;
-      },
-      { selector: targetSelector, quiet: quietMs },
-      { timeout: timeoutMs, polling: 50 }
-    ),
-    options.onStep
-  );
-  await runSettleStep(
-    "paint",
-    () => page.evaluate(
-      () => new Promise(
-        (resolve2) => requestAnimationFrame(() => requestAnimationFrame(() => resolve2()))
-      )
-    ),
-    options.onStep
+        return at - quietSince >= quietMs;
+      }
+
+      function paint() {
+        if (!runPaint) return Promise.resolve();
+        var started = now();
+        return new Promise(function(resolve) {
+          requestAnimationFrame(function() {
+            requestAnimationFrame(function() {
+              steps.paint = Math.round(now() - started);
+              resolve();
+            });
+          });
+        });
+      }
+
+      return until('target', function() {
+          return document.querySelector(selector) !== null;
+        }, stepTimeoutMs, false)
+        .then(function() {
+          return until('fonts', function() {
+            var fonts = document.fonts;
+            return !fonts || fonts.status === 'loaded';
+          }, stepTimeoutMs, false);
+        })
+        .then(function() {
+          return until('suspense', function() {
+            if (!pendingSelector) return true;
+            var target = document.querySelector(selector);
+            if (!target) return false;
+            return !target.querySelector(pendingSelector);
+          }, stepTimeoutMs, false);
+        })
+        .then(function() {
+          return until('content-quiet', contentQuiet, quietTimeoutMs, quietBestEffort);
+        })
+        .then(paint)
+        .then(
+          function() {
+            return { ok: true, steps: steps, quiet: quiet };
+          },
+          function(caught) {
+            if (caught && caught.ok === false) return caught;
+            return failure('paint', String((caught && caught.message) || caught));
+          }
+        );
+    })()
+  `;
+}
+
+// ../canvas-capture-headless/src/navigation-errors.ts
+function isNavigationInterruptedError(message) {
+  return /Execution context was destroyed|most likely because of a navigation|Cannot find context with specified id|[Ff]rame was detached|Navigation interrupted|is interrupted by another navigation|Inspected target navigated or closed|Cannot find object with id|context was destroyed/.test(
+    message
   );
 }
 
+// ../canvas-capture-headless/src/determinism.ts
+var CHROMIUM_LAUNCH_ARGS = [
+  "--force-color-profile=srgb",
+  "--force-device-scale-factor=2",
+  "--hide-scrollbars",
+  "--disable-lcd-text"
+];
+async function settlePage(page, targetSelector, options = {}) {
+  const quietMs = options.quietMs ?? 300;
+  const timeoutMs = options.timeoutMs ?? 15e3;
+  const budgetMs = timeoutMs * SETTLE_STEPS.length;
+  const deadline = Date.now() + budgetMs;
+  let resumes = 0;
+  for (; ; ) {
+    let report;
+    try {
+      report = await page.evaluate(
+        buildSettleWaitScript({
+          selector: targetSelector,
+          pendingSelector: STORYBOARD_PENDING_SELECTOR,
+          quietMs,
+          stepTimeoutMs: Math.max(1, Math.min(timeoutMs, deadline - Date.now()))
+        })
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      if (!isNavigationInterruptedError(message)) throw error;
+      resumes += 1;
+      if (Date.now() >= deadline) {
+        throw new Error(
+          `settle: Timeout ${budgetMs}ms exceeded; the document was replaced ${resumes} times while waiting`
+        );
+      }
+      continue;
+    }
+    for (const step of SETTLE_STEPS) {
+      const ms = report.steps[step];
+      if (ms !== void 0) options.onStep?.(step, ms);
+    }
+    if (!report.ok) {
+      throw new Error(`settle.${report.step}: ${report.message}`);
+    }
+    return;
+  }
+}
+
 // ../canvas-capture-headless/src/ensure-chromium.ts
 import { spawn } from "child_process";
 import { createRequire } from "module";
@@ -223,7 +420,7 @@ async function installChromium(log, spawnImpl = spawn) {
 }
 
 // ../canvas-capture-headless/src/fingerprint.ts
-var KIT_VERSION = "2";
+var KIT_VERSION = "3";
 var FONTS_BUNDLE_VERSION = "system-1";
 var DEVICE_SCALE_FACTOR = 2;
 function buildEnvFingerprint(input) {
@@ -610,15 +807,15 @@ function readRenderProfileInPage(targetCanvasPath) {
 
 // ../canvas-capture-headless/src/capture.ts
 function storyboardRenderId(hostCanvasPath, storyboardId) {
-  return `canvas:${encodeURIComponent(hostCanvasPath.trim())}#storyboard:${encodeURIComponent(storyboardId.trim())}`;
-}
-function buildDirectRenderUrl(hostUrl, target) {
-  const url = new URL(hostUrl);
-  url.searchParams.set("canvasPath", target.hostCanvasPath);
-  url.searchParams.set("storyboardId", target.storyboardId);
-  url.searchParams.set("width", String(target.width));
-  url.searchParams.set("height", String(target.height));
-  return url.toString();
+  return buildCanvasStoryboardRenderId(hostCanvasPath, storyboardId);
+}
+function buildDirectRenderUrl2(hostUrl, target) {
+  return buildDirectRenderUrl(hostUrl, {
+    canvasPath: target.hostCanvasPath,
+    storyboardId: target.storyboardId,
+    width: target.width,
+    height: target.height
+  });
 }
 function sha256Hex(bytes) {
   return createHash("sha256").update(bytes).digest("hex");
@@ -639,11 +836,6 @@ function looksBlank(pngBytes) {
   }
   return true;
 }
-function isNavigationInterruptedError(message) {
-  return /Execution context was destroyed|most likely because of a navigation|Cannot find context with specified id|[Ff]rame was detached|Navigation interrupted|is interrupted by another navigation|Inspected target navigated or closed|Cannot find object with id|context was destroyed/.test(
-    message
-  );
-}
 function isPageGoneError(message) {
   return /Target closed|Target page, context or browser has been closed|Page closed|Target crashed/.test(
     message
@@ -838,7 +1030,7 @@ async function startCaptureSession(options) {
       target.hostCanvasPath,
       target.storyboardId
     );
-    const selector = `[data-tempo-storyboard-render-id=${JSON.stringify(renderId)}]`;
+    const selector = buildStoryboardRenderSelector(renderId);
     const ownsWorker = reusableWorker === void 0;
     const worker = reusableWorker ?? await createCaptureWorker(capture);
     const { page } = worker;
@@ -852,19 +1044,17 @@ async function startCaptureSession(options) {
     try {
       const navStart = Date.now();
       try {
-        const targetUrl = buildDirectRenderUrl(options.hostUrl, target);
+        const targetUrl = buildDirectRenderUrl2(options.hostUrl, target);
         if (!worker.hasNavigated) {
           await page.goto(targetUrl, { waitUntil: "domcontentloaded" });
           await page.addStyleTag({ content: FREEZE_MOTION_CSS });
           worker.hasNavigated = true;
         } else {
           if (worker.currentSelector === selector) {
-            const idleUrl = new URL(options.hostUrl);
-            idleUrl.searchParams.set("tempoCaptureIdle", "1");
             await page.evaluate((url) => {
               history.replaceState(null, "", url);
               window.dispatchEvent(new PopStateEvent("popstate"));
-            }, idleUrl.toString());
+            }, buildDirectRenderIdleUrl(options.hostUrl));
             worker.counters.sameDocumentIssued += 1;
             await page.waitForSelector(worker.currentSelector, {
               state: "detached",
@@ -875,7 +1065,6 @@ async function startCaptureSession(options) {
             ({ url, nextSelector }) => {
               const captureWindow = window;
               captureWindow.__tempoResetCaptureDeterminism?.();
-              delete captureWindow.__tempoVisualReviewQuiet;
               captureWindow.__tempoCaptureRenderProfile?.begin(nextSelector);
               history.replaceState(null, "", url);
               window.dispatchEvent(new PopStateEvent("popstate"));
@@ -1440,6 +1629,7 @@ function abortableWait(cancelledMessage) {
 import { spawn as spawn3 } from "child_process";
 import path2 from "path";
 var BUNDLED_NODE_BIN_DIR_ENV = "TEMPO_NODE_TOOLCHAIN_BIN_DIR";
+var BUNDLED_NODE_RUNTIME_ENV = "TEMPO_NODE_TOOLCHAIN_RUNTIME";
 function getBundledNodeBinDir() {
   const dir = process.env[BUNDLED_NODE_BIN_DIR_ENV];
   return dir && dir.trim().length > 0 ? dir : null;
@@ -1458,10 +1648,13 @@ function shouldUseBundledNode(args) {
 }
 function applyBundledNodeEnv(env, binDir) {
   if (!binDir) return env;
-  return {
-    ...prependDirToPathEnv(env, binDir),
-    ELECTRON_RUN_AS_NODE: "1"
-  };
+  const next = prependDirToPathEnv(env, binDir);
+  if (env[BUNDLED_NODE_RUNTIME_ENV] === "native") {
+    delete next.ELECTRON_RUN_AS_NODE;
+  } else {
+    next.ELECTRON_RUN_AS_NODE = "1";
+  }
+  return next;
 }
 function prependDirToPathEnv(env, dir) {
   const pathKey = Object.keys(env).find((key2) => key2.toLowerCase() === "path");
@@ -4606,7 +4799,7 @@ async function parcelEventToFileEvent(event, rootInfo) {
 // ../tempo-sdk/package.json
 var package_default = {
   name: "tempo-sdk",
-  version: "0.0.40",
+  version: "0.0.42",
   type: "module",
   description: "Tempo SDK \u2014 Vite, Next.js, and Expo plugins for JSX annotation and shared page/storyboard types",
   repository: {
@@ -13678,4 +13871,4 @@ export {
   main,
   VISUAL_REVIEW_OIDC_AUDIENCE
 };
-//# sourceMappingURL=chunk-MW6S36CX.js.map
+//# sourceMappingURL=chunk-WGNWCWMJ.js.map