@tempo-ai/visual-review 0.0.125-staging.3 → 0.0.125-staging.4

package/dist/bin.js

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

package/dist/{chunk-CYU7WCUJ.js → chunk-ZBXLSXRH.js}

@@ -7321,7 +7321,10 @@ var DIRECT_RENDER_PARAMS = {
   height: "height",
   idle: "tempoCaptureIdle"
 };
-var RESPONSIVE_CAPTURE_VIEWPORT = { width: 1600, height: 1200 };
+var RESPONSIVE_CAPTURE_VIEWPORT = {
+  width: 1600,
+  height: 1200
+};
 var STORYBOARD_RENDER_ID_ATTRIBUTE = "data-tempo-storyboard-render-id";
 var STORYBOARD_PENDING_SELECTOR = `[${PROJECTION_PENDING_ATTRIBUTE}]`;
 function buildCanvasStoryboardRenderId(canvasPath, storyboardId) {
@@ -7332,12 +7335,13 @@ function buildCanvasStoryboardRenderId(canvasPath, storyboardId) {
 function buildStoryboardRenderSelector(renderId) {
   return `[${STORYBOARD_RENDER_ID_ATTRIBUTE}=${JSON.stringify(renderId)}]`;
 }
-function buildCanvasHostUrl(hostUrl) {
+function buildCanvasHostUrl(hostUrl, incremental = false) {
   const url = new URL(hostUrl);
   url.searchParams.set(
     CANVAS_CLIENT_PROTOCOL_PARAM,
     String(CANVAS_CLIENT_PROTOCOL)
   );
+  if (incremental) url.searchParams.set("canvasRegistration", "incremental");
   return url;
 }
 function buildDirectRenderUrl(hostUrl, target) {
@@ -7532,6 +7536,21 @@ function buildSettleWaitScript(options) {
       function renderedImages(target) {
         return renderedMatches(target, 'img');
       }
+      // The source each image was last asked to decode, and whether that
+      // decode has settled. A new source asks again.
+      var decodes = typeof WeakMap === 'function' ? new WeakMap() : null;
+      function imageDecoded(img) {
+        if (!decodes || typeof img.decode !== 'function') return true;
+        var src = img.currentSrc || img.src;
+        var entry = decodes.get(img);
+        if (!entry || entry.src !== src) {
+          entry = { src: src, done: false };
+          decodes.set(img, entry);
+          var settled = function() { entry.done = true; };
+          img.decode().then(settled, settled);
+        }
+        return entry.done;
+      }
       // A video paints its current frame only once that frame is DECODED.
       // HAVE_CURRENT_DATA (2) is exactly that bar.
       //
@@ -7566,6 +7585,17 @@ function buildSettleWaitScript(options) {
             return false;
           }
         }
+        // A loaded image can still paint as empty space until it decodes
+        // (decoding="async" lets the browser paint first). Ask each source
+        // to decode once; a failed decode counts as finished.
+        var decoding = false;
+        for (var d = 0; d < images.length; d++) {
+          if (!imageDecoded(images[d])) decoding = true;
+        }
+        if (decoding) {
+          quietKey = null;
+          return false;
+        }
         // Second line of defence behind videoFrameReady's fail-open rules: a
         // video that is legitimately loading can still stall forever (a dev
         // server that never answers, a huge asset). Waiting is an OPTIMISATION
@@ -7650,6 +7680,34 @@ function buildSettleWaitScript(options) {
   `;
 }
 
+// ../canvas-capture-headless/src/fingerprint.ts
+var KIT_VERSION = "6";
+var FONTS_BUNDLE_VERSION = "system-1";
+var DEVICE_SCALE_FACTOR = 1;
+function buildEnvFingerprint(input) {
+  const parts = {
+    os: input.os,
+    // FULL Chromium version, not just the major: a patch-level rendering
+    // change must open a fresh epoch, not surface as mass false diffs
+    // inside the old one. The version moves only with the lockfile's
+    // Playwright pin, so epochs track dependency bumps.
+    browser: `chromium-${input.browserVersion}`,
+    dpr: DEVICE_SCALE_FACTOR,
+    fontsBundleVersion: FONTS_BUNDLE_VERSION,
+    kitVersion: KIT_VERSION
+  };
+  return {
+    fingerprint: [
+      parts.os,
+      parts.browser,
+      `dpr${parts.dpr}`,
+      `fonts-${parts.fontsBundleVersion}`,
+      `kit-${parts.kitVersion}`
+    ].join("/"),
+    parts
+  };
+}
+
 // ../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(
@@ -7660,7 +7718,7 @@ function isNavigationInterruptedError(message) {
 // ../canvas-capture-headless/src/determinism.ts
 var CHROMIUM_LAUNCH_ARGS = [
   "--force-color-profile=srgb",
-  "--force-device-scale-factor=2",
+  `--force-device-scale-factor=${DEVICE_SCALE_FACTOR}`,
   "--hide-scrollbars",
   "--disable-lcd-text"
 ];
@@ -7761,34 +7819,6 @@ async function installChromium(log, spawnImpl = spawn) {
   });
 }
 
-// ../canvas-capture-headless/src/fingerprint.ts
-var KIT_VERSION = "5";
-var FONTS_BUNDLE_VERSION = "system-1";
-var DEVICE_SCALE_FACTOR = 2;
-function buildEnvFingerprint(input) {
-  const parts = {
-    os: input.os,
-    // FULL Chromium version, not just the major: a patch-level rendering
-    // change must open a fresh epoch, not surface as mass false diffs
-    // inside the old one. The version moves only with the lockfile's
-    // Playwright pin, so epochs track dependency bumps.
-    browser: `chromium-${input.browserVersion}`,
-    dpr: DEVICE_SCALE_FACTOR,
-    fontsBundleVersion: FONTS_BUNDLE_VERSION,
-    kitVersion: KIT_VERSION
-  };
-  return {
-    fingerprint: [
-      parts.os,
-      parts.browser,
-      `dpr${parts.dpr}`,
-      `fonts-${parts.fontsBundleVersion}`,
-      `kit-${parts.kitVersion}`
-    ].join("/"),
-    parts
-  };
-}
-
 // ../canvas-capture-headless/src/html-document.ts
 var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 var ROOT_SIZE_STYLE = "<style>html{width:100%;height:100%;}</style>";
@@ -17703,7 +17733,7 @@ var MissingRootDepsError = class extends TempoDevServerError {
 // ../tempo-sdk/package.json
 var package_default = {
   name: "tempo-sdk",
-  version: "0.0.57",
+  version: "0.0.60",
   publishConfig: {
     tag: "sdk-v2-latest"
   },
@@ -17787,7 +17817,7 @@ var package_default = {
     demo: "TEMPO=true pnpm --filter @tempo-modules/vite-annotate-plugin-demo dev",
     "demo:nextjs": "TEMPO=true pnpm --filter @tempo-modules/tempo-sdk-nextjs-demo dev",
     test: "vitest run",
-    "test:browser": "vitest run pruned-module-deletion-browser.test.ts asset-live-preview-browser.test.ts asset-popover-lifecycle-browser.test.ts component-controls-browser.test.ts canvas-controls-browser.test.ts canvas-capture-determinism-browser.test.ts canvas-host-vite-e2e.test.ts canvas-host-packed-sdk-e2e.test.ts error-tracking-e2e.test.ts",
+    "test:browser": "vitest run canvas-dependency-scan-browser.test.ts pruned-module-deletion-browser.test.ts asset-live-preview-browser.test.ts asset-popover-lifecycle-browser.test.ts component-controls-browser.test.ts canvas-controls-browser.test.ts canvas-capture-determinism-browser.test.ts canvas-host-vite-e2e.test.ts canvas-host-packed-sdk-e2e.test.ts error-tracking-e2e.test.ts",
     "test:watch": "vitest",
     "test:nextjs:unit": "vitest run nextjs-loader.test.ts nextjs-wrapper.test.ts nextjs-fixtures.test.ts nextjs-published.test.ts",
     "test:nextjs:integration": "vitest run nextjs-e2e-correctness.test.ts",
@@ -18128,7 +18158,12 @@ async function prepareManagedDependencyMigration(options) {
               "Yarn Classic cannot prepare a lockfile without installing packages. Configure scripts.updateSdk to migrate this environment before its frozen install."
             );
           }
-          await options.runCommand(plan.command, root, options.signal);
+          await options.runCommand(
+            plan.command,
+            root,
+            options.signal,
+            plan.packageManager
+          );
           synced.add(plan.lockfile);
         }
       }
@@ -24246,6 +24281,10 @@ var TempoDevServer = class _TempoDevServer {
         // It keeps Tempo's host cache isolated from the user's own `next dev`.
         extraEnv: {
           ...startPlan.env,
+          // Scoped to this canvas host. The SDK uses this to retire the old
+          // all-canvas optimizer glob in memory, preserving the user's file.
+          TEMPO_CANVAS_HOST_ROOT: this.tempoRoot,
+          TEMPO_CANVAS_SOURCE_ROOT: this.pagesDir,
           ...expectedIdentity ? { TEMPO_WORKSPACE_NONCE: expectedIdentity.workspaceNonce } : {},
           ...this.nextDistDir ? { TEMPO_NEXT_DIST_DIR: this.nextDistDir } : {}
         },
@@ -24561,10 +24600,10 @@ var TempoDevServer = class _TempoDevServer {
         this.config.scripts.install
       ),
       signal: options.signal,
-      runCommand: (command, cwd, signal) => {
+      runCommand: async (command, cwd, signal, pm) => {
         options.onOutput?.("Updating Tempo dependency lockfile...\n");
         return runShellCommand(
-          command,
+          await buildSafeInstallCommand({ pm, installCmd: command }, cwd),
           cwd,
           signal,
           options.onOutput,
@@ -24727,13 +24766,15 @@ var TempoDevServer = class _TempoDevServer {
         cwd: this.tempoRoot,
         command: await buildSafeInstallCommand(tempoManager, this.tempoRoot),
         label: "tempo sidecar install",
-        // On a forced retry (e.g. a crash-retry after the devserver died) the
-        // existing tree is suspect, so wipe it for a clean, complete install
-        // rather than an incremental top-up over a possibly-partial tree. A
-        // routine "not ready" (marker absent/stale, no force) does an ordinary
-        // incremental install — cheap when already satisfied, and npm restores
-        // any missing optional-native binary. See TEM-820.
-        cleanBeforeInstall: forceInstall,
+        // A forced retry (e.g. a crash-retry after the devserver died) or a
+        // tree whose previous install never finished is suspect, so wipe it
+        // for a clean, complete install. npm never re-verifies files it already
+        // extracted: a disk-full or killed install leaves truncated native
+        // binaries that an incremental top-up keeps forever (TEM-2467). A
+        // routine "not ready" after a COMPLETED install (deps changed) does an
+        // ordinary incremental install — cheap when already satisfied, and npm
+        // restores any missing optional-native binary. See TEM-820.
+        cleanBeforeInstall: forceInstall || await installWasInterrupted(this.tempoRoot),
         // Record completion only after `npm install` exits 0 so an interrupted
         // install is never mistaken for a finished one on the next start.
         markerRoots: [this.tempoRoot]
@@ -25996,7 +26037,7 @@ function buildTempoHostWrapper(reactCanvasEntries = [], options = {}) {
 ${canvasModuleEntries}
 ];
 ` : "";
-  const directCanvasSelection = hasReactCanvasEntries ? `  const directUrlParams = new URLSearchParams(directUrlSearch);
+  const directCanvasSelection = hasReactCanvasEntries && options.startFramework === "vite" ? "  const activeCanvasModules = canvasModules;\n" : hasReactCanvasEntries ? `  const directUrlParams = new URLSearchParams(directUrlSearch);
   const requestedCanvasPath =
     directUrlParams.get("canvasPath")?.trim() ??
     directUrlParams.get("pageFile")?.trim();
@@ -26016,7 +26057,7 @@ tempoHostGlobals.${CANVAS_HOST_WRAPPER_GENERATION_KEY} =
   (tempoHostGlobals.${CANVAS_HOST_WRAPPER_GENERATION_KEY} ?? 0) + 1;
 `;
   return `/* THIS FILE IS AUTO-GENERATED. DO NOT EDIT. */
-import { useSyncExternalStore } from "react";
+${options.startFramework === "vite" ? "// tempo-incremental-canvas-registration\n" : ""}import { useSyncExternalStore } from "react";
 import { CanvasHost } from "tempo-sdk/canvas";
 ${recoveryImport}
 ${generationStamp}${canvasModulesDeclaration}
@@ -26041,7 +26082,7 @@ export default function TempoHost() {
   void directUrlSearch;
 ${directCanvasSelection}
   return (
-    <CanvasHost${canvasModulesProp}>
+    <CanvasHost${canvasModulesProp}${options.startFramework === "vite" ? " incremental" : ""}>
     </CanvasHost>
   );
 }
@@ -26050,6 +26091,12 @@ ${directCanvasSelection}
 function installCompletionMarkerPath(packageRoot) {
   return path16.join(packageRoot, "node_modules", ".tempo-install-complete");
 }
+function installInProgressMarkerPath(packageRoot) {
+  return path16.join(packageRoot, "node_modules", ".tempo-install-in-progress");
+}
+async function installWasInterrupted(packageRoot) {
+  return await pathExists2(installInProgressMarkerPath(packageRoot));
+}
 var INSTALL_COMPLETION_MARKER_VERSION = "tempo-install-complete-v3";
 var EXTERNAL_LAYOUT_INSTALL_MARKER = ".tempo-external-install-complete";
 async function computeInstallCompletionKey(packageRoot) {
@@ -26248,8 +26295,12 @@ function filterProtectedInstallSteps(steps) {
 }
 async function buildSafeInstallCommand(manager, cwd) {
   const resolved = await resolvePackageManagerCommand(manager.pm, cwd);
-  const installSuffix = manager.installCmd.replace(/^[^\s]+/, "");
-  return `${resolved}${installSuffix}`;
+  const lifted = extractLeadingEnvAssignments(manager.installCmd);
+  const installSuffix = lifted.command.replace(/^[^\s]+/, "");
+  return manager.installCmd.replace(
+    lifted.command,
+    `${resolved}${installSuffix}`
+  );
 }
 function parseFirstSemverMajor(value) {
   const match = value.match(/(\d+)(?:\.\d+)?(?:\.\d+)?/);
@@ -26577,6 +26628,9 @@ async function runInstallStep(step, signal, onOutput, projectRoot = step.cwd) {
     });
     throwIfLaunchAborted(signal);
   }
+  await Promise.all(
+    (step.markerRoots ?? []).map(writeInstallInProgressMarker)
+  );
   try {
     await runInstallCommandWithLockRetry(
       step.command,
@@ -26593,19 +26647,20 @@ async function runInstallStep(step, signal, onOutput, projectRoot = step.cwd) {
       console.warn(
         `[tempo-devserver] ${step.label}: pnpm skipped dependency build scripts (ERR_PNPM_IGNORED_BUILDS) but node_modules is populated \u2014 treating as a successful install.`
       );
-      await Promise.all(
-        (step.markerRoots ?? []).map(writeInstallCompletionMarker)
-      );
-      await Promise.all(
-        (step.externalLayoutMarkerRoots ?? []).map(
-          writeExternalLayoutInstallMarker
-        )
-      );
+      await recordInstallStepCompleted(step);
       return;
     }
     throw classifyInstallFailure(step.command, output) ?? error;
   }
   throwIfLaunchAborted(signal);
+  await recordInstallStepCompleted(step);
+}
+async function recordInstallStepCompleted(step) {
+  await Promise.all(
+    (step.markerRoots ?? []).map(
+      (root) => rm5(installInProgressMarkerPath(root), { force: true })
+    )
+  );
   await Promise.all((step.markerRoots ?? []).map(writeInstallCompletionMarker));
   await Promise.all(
     (step.externalLayoutMarkerRoots ?? []).map(
@@ -26613,6 +26668,17 @@ async function runInstallStep(step, signal, onOutput, projectRoot = step.cwd) {
     )
   );
 }
+async function writeInstallInProgressMarker(packageRoot) {
+  try {
+    await mkdir6(path16.join(packageRoot, "node_modules"), { recursive: true });
+    await writeFile6(installInProgressMarkerPath(packageRoot), "", "utf-8");
+  } catch (error) {
+    console.warn(
+      `[tempo-devserver] failed to write install-in-progress marker at ${packageRoot}:`,
+      error
+    );
+  }
+}
 async function sleepForStatusRetry(delayMs) {
   await new Promise((resolve2) => setTimeout(resolve2, delayMs));
 }
@@ -28421,13 +28487,13 @@ function readStoryboard(element, component, imports, legacyObjects, source, glob
   if (component === "HtmlStoryboard") {
     const filepath = readStringAttribute(openingElement, "filepath");
     const src = readStringAttribute(openingElement, "src");
-    storyboard.filepath = filepath?.value;
+    storyboard.filepath = filepath?.value.trim() ? filepath.value : void 0;
     storyboard.filepathSpan = filepath?.valueSpan;
     storyboard.filepathAttributeSpan = filepath?.attributeSpan;
     storyboard.src = src?.value;
     storyboard.srcSpan = src?.valueSpan;
     storyboard.srcAttributeSpan = src?.attributeSpan;
-    if (!filepath && !src) {
+    if (!filepath?.value.trim() && !src?.value.trim()) {
       errors.push({
         message: '<HtmlStoryboard> must include a literal "filepath" or "src" prop',
         span: toSpan(openingElement),
@@ -30176,12 +30242,12 @@ export {
   FROZEN_EPOCH_MS,
   buildFreezeInitScript,
   FREEZE_MOTION_CSS,
-  CHROMIUM_LAUNCH_ARGS,
-  settlePage,
   KIT_VERSION,
   FONTS_BUNDLE_VERSION,
   DEVICE_SCALE_FACTOR,
   buildEnvFingerprint,
+  CHROMIUM_LAUNCH_ARGS,
+  settlePage,
   storyboardRenderId,
   sha256Hex,
   looksBlank,
@@ -30199,4 +30265,4 @@ export {
   buildBaselineCaptureArgs,
   main
 };
-//# sourceMappingURL=chunk-CYU7WCUJ.js.map
+//# sourceMappingURL=chunk-ZBXLSXRH.js.map