route-graphics 1.44.1 → 1.44.2

package/dist/cli/routeGraphicsCli.js

@@ -745,13 +745,17 @@ var captureVideoWebm = async ({
                   return;
                 }
                 const waiterIndex = pendingRenderWaiters.findIndex(
-                  (waiter2) => payload?.aborted !== true && (waiter2.stateId === payload?.id || waiter2.stateId === void 0)
+                  (waiter2) => (payload?.failed === true || payload?.aborted !== true) && (waiter2.stateId === payload?.id || waiter2.stateId === void 0)
                 );
                 if (waiterIndex < 0) {
                   return;
                 }
                 const [waiter] = pendingRenderWaiters.splice(waiterIndex, 1);
-                waiter.resolve(payload);
+                if (payload?.failed) {
+                  waiter.reject(payload.error ?? new Error("Render failed."));
+                } else {
+                  waiter.resolve(payload);
+                }
               },
               debug: false
             });
@@ -798,6 +802,8 @@ var captureVideoWebm = async ({
                 const stateIndex = renderPayload.stateIndexes[renderIndex];
                 const state = renderPayload.states[stateIndex];
                 const waitForComplete = createRenderCompleteWaiter(state.id);
+                void waitForComplete.catch(() => {
+                });
                 debug("render state start", state.id);
                 app.render(state);
                 app.render(state);
@@ -6651,6 +6657,7 @@ Options:
 PNG options:
   --state <index>                  State index when YAML contains multiple states
   --time <ms>                      Sample animations at a manual time
+  --layout-report <path>           Write a JSON layout snapshot beside the PNG
   --wait-for-render-complete       Wait for renderComplete before capture
 
 MP4 options:
@@ -6673,7 +6680,12 @@ Timeline inspection options:
   --compact                        Emit compact JSON instead of indented JSON
 `;
 var renderCommandUsage = usage;
-var PNG_ONLY_OPTIONS = ["stateIndex", "timeMS", "waitForRenderComplete"];
+var PNG_ONLY_OPTIONS = [
+  "stateIndex",
+  "timeMS",
+  "waitForRenderComplete",
+  "layoutReportPath"
+];
 var MP4_ONLY_OPTIONS = [
   "stateSelection",
   "fps",
@@ -6686,6 +6698,7 @@ var MP4_ONLY_OPTIONS = [
 var toOptionName = (propertyName) => ({
   stateIndex: "--state",
   timeMS: "--time",
+  layoutReportPath: "--layout-report",
   waitForRenderComplete: "--wait-for-render-complete",
   stateSelection: "--states",
   fps: "--fps",
@@ -6870,6 +6883,10 @@ var parseRouteGraphicsCliArgs = (argv) => {
         options.stateSelection = readOptionValue(rest, index, token);
         index += 1;
         break;
+      case "--layout-report":
+        options.layoutReportPath = readOptionValue(rest, index, token);
+        index += 1;
+        break;
       case "--time":
         options.timeMS = parseIntegerOption(
           "Animation time",
@@ -7141,7 +7158,8 @@ var capturePng = async ({
   timeMS,
   waitForRenderComplete,
   timeoutMS,
-  browserExecutablePath
+  browserExecutablePath,
+  includeLayoutReport = false
 }) => {
   const browser = await chromium2.launch(
     getRendererBrowserLaunchOptions(browserExecutablePath)
@@ -7160,7 +7178,7 @@ var capturePng = async ({
     await page.goto(origin, {
       waitUntil: "domcontentloaded"
     });
-    const base64 = await page.evaluate(
+    const capture = await page.evaluate(
       async ({ moduleUrl, renderPayload }) => {
         const nextFrame = async (count = 2) => {
           await new Promise((resolve) => {
@@ -7197,16 +7215,22 @@ var capturePng = async ({
         const assetBufferManager = createAssetBufferManager();
         let renderCompleteResolve = () => {
         };
+        let renderCompleteReject = () => {
+        };
+        let renderFailure;
         let renderTimeoutId = null;
         let renderCompletePromise = Promise.resolve(null);
         if (renderPayload.waitForRenderComplete) {
           renderCompletePromise = new Promise((resolve, reject) => {
             renderCompleteResolve = resolve;
+            renderCompleteReject = reject;
             renderTimeoutId = window.setTimeout(() => {
               reject(new Error("Timed out waiting for renderComplete."));
             }, renderPayload.timeoutMS);
           });
         }
+        void renderCompletePromise.catch(() => {
+        });
         try {
           await app.init({
             width: renderPayload.width,
@@ -7230,6 +7254,10 @@ var capturePng = async ({
               audio: [soundPlugin].filter(Boolean)
             },
             eventHandler: (eventName, payload) => {
+              if (eventName === "renderComplete" && payload?.failed) {
+                renderFailure = payload.error ?? new Error("Render failed.");
+                renderCompleteReject(renderFailure);
+              }
               if (eventName === "renderComplete" && payload?.aborted !== true) {
                 renderCompleteResolve(payload);
               }
@@ -7254,7 +7282,10 @@ var capturePng = async ({
           } catch {
           }
           await nextFrame(2);
-          return await app.extractBase64();
+          if (renderFailure) throw renderFailure;
+          const image = app.extractBase64();
+          const layoutReport = renderPayload.includeLayoutReport ? app.getLayoutReport() : null;
+          return { base64: await image, layoutReport };
         } finally {
           if (renderTimeoutId !== null) {
             window.clearTimeout(renderTimeoutId);
@@ -7272,14 +7303,15 @@ var capturePng = async ({
           assets: browserAssets,
           timeMS: timeMS ?? null,
           waitForRenderComplete,
-          timeoutMS
+          timeoutMS,
+          includeLayoutReport
         }
       }
     );
     if (pageErrors.length > 0) {
       throw new Error(pageErrors.join("\n"));
     }
-    return base64;
+    return capture;
   } finally {
     await browser.close();
   }
@@ -7301,7 +7333,7 @@ var renderPng = async ({
   }
   const settings = normalizeRenderSettings({ cliOptions, definition });
   const renderStartedAt = performance2.now();
-  const base64 = await capturePng({
+  const { base64, layoutReport } = await capturePng({
     origin,
     width: settings.width,
     height: settings.height,
@@ -7311,11 +7343,22 @@ var renderPng = async ({
     timeMS: cliOptions.timeMS,
     waitForRenderComplete: cliOptions.waitForRenderComplete,
     timeoutMS: cliOptions.timeoutMS,
-    browserExecutablePath: cliOptions.browserExecutablePath
+    browserExecutablePath: cliOptions.browserExecutablePath,
+    includeLayoutReport: Boolean(cliOptions.layoutReportPath)
   });
   const renderDurationMS = performance2.now() - renderStartedAt;
   const writeStartedAt = performance2.now();
   await writePngOutput(outputPath, base64);
+  if (cliOptions.layoutReportPath) {
+    await fsPromises2.mkdir(path4.dirname(cliOptions.layoutReportPath), {
+      recursive: true
+    });
+    await fsPromises2.writeFile(
+      cliOptions.layoutReportPath,
+      `${JSON.stringify(layoutReport, null, 2)}
+`
+    );
+  }
   const writeDurationMS = performance2.now() - writeStartedAt;
   return {
     inputPath,
@@ -7342,6 +7385,17 @@ var runRender = async ({ cliOptions, cwd }) => {
     outputPath: cliOptions.outputPath,
     format
   });
+  if (cliOptions.layoutReportPath) {
+    cliOptions = {
+      ...cliOptions,
+      layoutReportPath: path4.resolve(cwd, cliOptions.layoutReportPath)
+    };
+    if (cliOptions.layoutReportPath === inputPath || cliOptions.layoutReportPath === outputPath) {
+      throw new Error(
+        "Layout report path must differ from the input and PNG output paths."
+      );
+    }
+  }
   await ensureBundleExists();
   const yamlSource = await fsPromises2.readFile(inputPath, "utf8");
   const definition = loadRenderDefinition(yamlSource);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "route-graphics",
-  "version": "1.44.1",
+  "version": "1.44.2",
   "description": "A 2D graphics rendering interface that takes JSON input and renders pixels using PixiJS",
   "main": "dist/RouteGraphics.js",
   "type": "module",
@@ -27,12 +27,11 @@
   "files": [
     "bin",
     "dist",
-    "src/cli",
     "package.json"
   ],
   "scripts": {
-    "lint": "bunx prettier --check src",
-    "lint:fix": "bunx prettier --write src",
+    "lint": "prettier --check src && oxlint src spec scripts bin",
+    "lint:fix": "prettier --write src && oxlint --fix src spec scripts bin",
     "prepare": "husky",
     "build": "node ./esbuild.js",
     "benchmark:timeline": "node ./scripts/benchmarkTimeline.mjs",
@@ -41,30 +40,37 @@
     "avt:report": "bun run build && node ./scripts/audioVisualTest.mjs report",
     "render:png": "bun run build && node ./bin/route-graphics-render.js",
     "vt:docker:pull": "docker pull docker.io/han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0",
-    "vt:generate": "bun run build && docker run --rm --user $(id -u):$(id -g) -e RTGL_VT_DEBUG=true -v \"$PWD:/workspace\" docker.io/han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0 rtgl vt generate --wait-event vt:ready",
-    "vt:screenshot": "bun run build && docker run --rm --user $(id -u):$(id -g) -e RTGL_VT_DEBUG=true -e RTGL_VT_CONCURRENCY=${RTGL_VT_CONCURRENCY:-8} -v \"$PWD:/workspace\" docker.io/han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0 rtgl vt screenshot --wait-event vt:ready --concurrency ${RTGL_VT_CONCURRENCY:-8}",
+    "vt:generate": "bun run build:visual && docker run --rm --user $(id -u):$(id -g) -e RTGL_VT_DEBUG=true -v \"$PWD:/workspace\" docker.io/han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0 rtgl vt generate --wait-event vt:ready",
+    "vt:screenshot": "bun run build:visual && bun run vt:screenshot:built",
     "vt:docker": "bun run vt:screenshot",
-    "vt:report": "bun run vt:screenshot && docker run --rm --user $(id -u):$(id -g) -e RTGL_VT_DEBUG=true -v \"$PWD:/workspace\" docker.io/han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0 rtgl vt report",
+    "vt:report": "bun run build:visual && bun run vt:report:built",
     "vt:accept": "docker run --rm --user $(id -u):$(id -g) -e RTGL_VT_DEBUG=true -v \"$PWD:/workspace\" docker.io/han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0 rtgl vt accept",
     "test": "vitest run",
     "test:layout-report": "node esbuild.js && node scripts/testLayoutReport.mjs",
     "test:webgpu": "bun run build && node ./scripts/testWebGPUShaders.mjs",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
-    "serve": "bunx serve -p 3005 .rettangoli/vt/_site"
+    "serve": "bunx serve -p 3005 .rettangoli/vt/_site",
+    "build:playground": "node ./esbuild.js playground",
+    "build:visual": "node ./esbuild.js visual",
+    "build:all": "node ./esbuild.js all",
+    "test:runtime": "bun run build && node scripts/testRuntimeLifecycle.mjs",
+    "test:package": "node scripts/testPackage.mjs",
+    "vt:screenshot:built": "docker run --rm --user $(id -u):$(id -g) -e RTGL_VT_DEBUG=true -e RTGL_VT_CONCURRENCY=${RTGL_VT_CONCURRENCY:-8} -v \"$PWD:/workspace\" docker.io/han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0 rtgl vt screenshot --wait-event vt:ready --concurrency ${RTGL_VT_CONCURRENCY:-8}",
+    "vt:report:built": "bun run vt:screenshot:built && docker run --rm --user $(id -u):$(id -g) -e RTGL_VT_DEBUG=true -v \"$PWD:/workspace\" docker.io/han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0 rtgl vt report"
   },
   "dependencies": {
-    "@pixi/unsafe-eval": "^7.4.3",
     "@wasm-audio-decoders/ogg-vorbis": "^0.1.20",
     "gsap": "3.15.0",
     "hotkeys-js": "^4.0.0-beta.7",
     "js-yaml": "^4.1.0",
     "ogg-opus-decoder": "^1.7.3",
-    "pixi.js": "8.9.2",
+    "pixi.js": "8.10.2",
     "playwright": "1.57.0"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.0.8",
+    "canvas": "3.2.0",
     "esbuild": "^0.25.6",
     "husky": "^9.1.7",
     "jsdom": "^27.0.1",
@@ -72,6 +78,7 @@
     "oxlint": "^1.26.0",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
+    "prettier": "3.6.2",
     "puty": "^0.1.2",
     "vitest": "^4.0.8"
   },

package/src/cli/browserLaunch.js

@@ -1,5 +0,0 @@
-export const getRendererBrowserLaunchOptions = (browserExecutablePath) => ({
-  headless: true,
-  executablePath: browserExecutablePath,
-  args: ["--autoplay-policy=no-user-gesture-required"],
-});

package/src/cli/inspectTimeline.js

@@ -1,72 +0,0 @@
-import fs from "node:fs/promises";
-import path from "node:path";
-
-import { loadRenderDefinition } from "./renderConfig.js";
-import { normalizeRenderState } from "../util/normalizeRenderState.js";
-import {
-  compileAnimationTimelineProgram,
-  inspectTimelineProgram,
-} from "../plugins/animations/timeline/inspectProgram.js";
-
-export const inspectTimelineDefinition = ({
-  definition,
-  stateIndex = 0,
-  animationId,
-}) => {
-  if (!Number.isSafeInteger(stateIndex) || stateIndex < 0) {
-    throw new Error(
-      "Timeline inspection state index must be a non-negative safe integer.",
-    );
-  }
-  const rawState = definition.states[stateIndex];
-  if (!rawState) {
-    throw new Error(
-      `State index ${stateIndex} is out of range for ${definition.states.length} states.`,
-    );
-  }
-  const state = normalizeRenderState(rawState);
-  const indexedAnimations = state.animations.map((animation, index) => ({
-    animation,
-    index,
-  }));
-  const selected = animationId
-    ? indexedAnimations.filter(({ animation }) => animation.id === animationId)
-    : indexedAnimations;
-  if (animationId && selected.length === 0) {
-    throw new Error(
-      `Animation "${animationId}" was not found in state "${state.id ?? stateIndex}".`,
-    );
-  }
-
-  return {
-    schema: "route.timeline-inspection-set/v1",
-    state: { index: stateIndex, id: state.id ?? null },
-    animations: selected.map(({ animation, index }) => {
-      const sourcePath = `states[${stateIndex}].animations[${index}]`;
-      const program = compileAnimationTimelineProgram(animation, {
-        sourcePath,
-      });
-      return {
-        normalizedAst: animation,
-        ...inspectTimelineProgram(program),
-      };
-    }),
-  };
-};
-
-export const inspectTimelineFile = async ({
-  inputPath,
-  cwd = process.cwd(),
-  stateIndex = 0,
-  animationId,
-}) => {
-  if (!inputPath)
-    throw new Error("Timeline inspection requires an input YAML file.");
-  const absolutePath = path.resolve(cwd, inputPath);
-  const yamlSource = await fs.readFile(absolutePath, "utf8");
-  return inspectTimelineDefinition({
-    definition: loadRenderDefinition(yamlSource),
-    stateIndex,
-    animationId,
-  });
-};

package/src/cli/inspectTimeline.test.js

@@ -1,135 +0,0 @@
-import { describe, expect, it } from "vitest";
-import fs from "node:fs";
-import { inspectTimelineDefinition } from "./inspectTimeline.js";
-import { loadRenderDefinition } from "./renderConfig.js";
-import {
-  parseRouteGraphicsCliArgs,
-  runRouteGraphicsCli,
-} from "./routeGraphicsCli.js";
-
-const source = `
-states:
-  - id: demo
-    elements: []
-    animations:
-      - id: move
-        targetId: hero
-        type: update
-        gsap:
-          profile: portable-v1
-          steps:
-            - kind: mark
-              name: entrance
-            - kind: to
-              values: { x: 100 }
-              duration: 250
-`;
-
-describe("timeline inspector", () => {
-  it("reports normalized authoring, semantic program, and visualization lanes", () => {
-    const result = inspectTimelineDefinition({
-      definition: loadRenderDefinition(source),
-      stateIndex: 0,
-      animationId: "move",
-    });
-    expect(result.animations[0]).toMatchObject({
-      normalizedAst: { id: "move", gsap: { profile: "portable-v1" } },
-      summary: { duration: 250, clipCount: 1, frontend: "gsap" },
-      visualization: {
-        marks: { entrance: 0 },
-        lanes: [{ channel: "transform.x", start: 0, duration: 250 }],
-      },
-    });
-    expect(result.animations[0].semanticSignature).toContain(
-      '"schema":"route.timeline/v1"',
-    );
-  });
-
-  it("parses and runs inspect-timeline without launching a browser", async () => {
-    expect(
-      parseRouteGraphicsCliArgs([
-        "inspect-timeline",
-        "scene.yaml",
-        "--animation",
-        "move",
-        "--compact",
-      ]),
-    ).toMatchObject({
-      command: "inspect-timeline",
-      inputPath: "scene.yaml",
-      animationId: "move",
-      compact: true,
-    });
-
-    const stdout = {
-      value: "",
-      write(value) {
-        this.value += value;
-      },
-    };
-    const stderr = {
-      value: "",
-      write(value) {
-        this.value += value;
-      },
-    };
-    const exitCode = await runRouteGraphicsCli({
-      argv: ["inspect-timeline", "virtual.yaml", "--compact"],
-      cwd: "/virtual",
-      stdout,
-      stderr,
-    });
-    expect(exitCode).toBe(1);
-    expect(stdout.value).toBe("");
-    expect(stderr.value).toContain("ENOENT");
-    expect(() =>
-      parseRouteGraphicsCliArgs([
-        "inspect-timeline",
-        "scene.yaml",
-        "--output",
-        "ignored.json",
-      ]),
-    ).toThrow("--output is not supported by inspect-timeline");
-  });
-
-  it("preserves original animation indexes in source paths when filtering", () => {
-    const result = inspectTimelineDefinition({
-      definition: loadRenderDefinition(`
-states:
-  - elements: []
-    animations:
-      - id: first
-        targetId: one
-        type: update
-        tween:
-          x:
-            keyframes: [{ value: 1, duration: 10 }]
-      - id: second
-        targetId: two
-        type: update
-        tween:
-          x:
-            keyframes: [{ value: 2, duration: 10 }]
-`),
-      animationId: "second",
-    });
-    expect(result.animations[0].visualization.lanes[0].sourcePath).toContain(
-      "animations[1]",
-    );
-  });
-
-  it("compiles the checked-in portable GSAP example", () => {
-    const example = fs.readFileSync(
-      `${process.cwd()}/examples/portable-gsap.yaml`,
-      "utf8",
-    );
-    const result = inspectTimelineDefinition({
-      definition: loadRenderDefinition(example),
-    });
-    expect(result.animations[0].summary).toMatchObject({
-      programId: "card-entrance",
-      frontend: "gsap",
-      eventCount: 1,
-    });
-  });
-});