@moku-labs/game 0.0.3 → 0.1.0

package/dist/inspect.d.mts

@@ -1,10 +1,10 @@
-import { $ as Position, Dt as Api, dt as FlowGraph, h as Api$1, l as RenderStats, pt as JournalEntry, t as Api$2, z as EntitySnapshot, zt as Snapshot } from "./types-Cjf3ywai.mjs";
-import { f as Usage, t as Api$3 } from "./types-DgwbzDLP.mjs";
-import { a as InputOf, c as Source, d as HeadlessApp, i as InputArguments, l as WatchApp, o as InputSchema, t as CheatEntry, u as WatchInput } from "./types-D0uYTTC3.mjs";
-import { c as UiNode } from "./types-C0SLQsx0.mjs";
-import { b as UiApi } from "./types-KlE_GL1z.mjs";
-import { n as defineSource } from "./define-BMo0pHe_.mjs";
-import { _ as EffectsApi, a as SoundEntry, t as AudioApi, v as EffectsStats } from "./types-BTycq8_Z.mjs";
+import { $ as Position, Dt as Api, dt as FlowGraph, h as Api$1, l as RenderStats, pt as JournalEntry, t as Api$2, z as EntitySnapshot, zt as Snapshot } from "./types-BZ1OLf24.mjs";
+import { f as Usage, t as Api$3 } from "./types-C47fKNcn.mjs";
+import { a as InputOf, c as Source, d as HeadlessApp, i as InputArguments, l as WatchApp, o as InputSchema, t as CheatEntry, u as WatchInput } from "./types-DmhTHRVW.mjs";
+import { c as UiNode } from "./types-X9jXjka3.mjs";
+import { A as UiApi } from "./types-CqkrEY06.mjs";
+import { n as defineSource } from "./define-CjP_4H0G.mjs";
+import { _ as EffectsApi, a as SoundEntry, t as AudioApi, v as EffectsStats } from "./types-CxZy7Pi4.mjs";
 
 //#region src/plugins/flow/doors/read.d.ts
 /**

package/dist/jsx-dev-runtime.d.mts

@@ -1,2 +1,2 @@
-import { a as jsxs, i as jsxDEV, n as JSX, r as jsx, t as Fragment } from "./runtime-BstIkrhH.mjs";
+import { a as jsxs, i as jsxDEV, n as JSX, r as jsx, t as Fragment } from "./runtime-Bn5TXNxP.mjs";
 export { Fragment, type JSX, jsx, jsxDEV, jsxs };

package/dist/jsx-runtime.d.mts

@@ -1,2 +1,2 @@
-import { a as jsxs, n as JSX, r as jsx, t as Fragment } from "./runtime-BstIkrhH.mjs";
+import { a as jsxs, n as JSX, r as jsx, t as Fragment } from "./runtime-Bn5TXNxP.mjs";
 export { Fragment, type JSX, jsx, jsxs };

package/dist/{runtime-BstIkrhH.d.mts → runtime-Bn5TXNxP.d.mts}

@@ -1,4 +1,4 @@
-import { a as JsxChild, m as UiIntrinsicElements, t as DescriptionNode } from "./types-C0SLQsx0.mjs";
+import { a as JsxChild, m as UiIntrinsicElements, t as DescriptionNode } from "./types-X9jXjka3.mjs";
 
 //#region src/plugins/ui/jsx/runtime.d.ts
 /** What the compiler passes as props: the children plus whatever the tag declared. */

package/dist/testing.d.mts

@@ -1,8 +1,8 @@
-import { At as Json, Dt as Api$2, Ft as PlayerStateProvider, It as ProviderCall, Lt as SaveDoc, Ut as Api$3, Zt as FakeClock, h as Api$1, t as Api } from "./types-Cjf3ywai.mjs";
-import { _ as stepFrames, a as InputOf, d as HeadlessApp, f as HeadlessGame, g as runRepro, h as createHeadless, m as ReproResult, p as Repro, r as ControlApp } from "./types-D0uYTTC3.mjs";
-import { H as InputApi } from "./types-C0SLQsx0.mjs";
-import { b as UiApi, t as AnimApi } from "./types-KlE_GL1z.mjs";
-import { t as commands } from "./commands-BOxqlv7w.mjs";
+import { At as Json, Dt as Api$2, Ft as PlayerStateProvider, It as ProviderCall, Lt as SaveDoc, Ut as Api$3, Zt as FakeClock, h as Api$1, t as Api } from "./types-BZ1OLf24.mjs";
+import { _ as stepFrames, a as InputOf, d as HeadlessApp, f as HeadlessGame, g as runRepro, h as createHeadless, m as ReproResult, p as Repro, r as ControlApp } from "./types-DmhTHRVW.mjs";
+import { H as InputApi } from "./types-X9jXjka3.mjs";
+import { A as UiApi, t as AnimApi } from "./types-CqkrEY06.mjs";
+import { t as commands } from "./commands-C0BljsM5.mjs";
 
 //#region src/plugins/clock/fake.d.ts
 /**
@@ -116,8 +116,8 @@ type VisualStep = {
   checkpoint: string;
 } | { [K in StepCommand]: { [P in K]: InputOf<Catalogue[K]["input"]> } }[StepCommand];
 /**
- * A visual test as `defineVisualTest` answers it: its name, where it starts and its steps.
- * Frozen data; nothing runs at definition.
+ * A visual test as `defineVisualTest` answers it: its name, where it starts, its steps, and
+ * `webgl`, true when it also runs in the WebGL leg. Frozen data; nothing runs at definition.
  *
  * @example
  * ```ts
@@ -126,6 +126,7 @@ type VisualStep = {
  *   steps: [{ tap: { key: "play" } }, { checkpoint: "board" }]
  * });
  * test.name; // "reward-popup"
+ * test.webgl; // false
  * Object.isFrozen(test.steps); // true
  * ```
  */
@@ -133,6 +134,7 @@ type VisualTest = {
   readonly name: string;
   readonly start: Readonly<VisualStart>;
   readonly steps: readonly VisualStep[];
+  readonly webgl: boolean;
 };
 /**
  * What the runner needs of an app: the control app, the plugins the base commands act on and
@@ -200,22 +202,36 @@ type VisualTolerance = {
   ratio: number;
   threshold: number;
 };
+/**
+ * The backend the browser leg draws with: `"webgpu"`, or `"webgl"` for the WebGL leg.
+ *
+ * @example
+ * ```ts
+ * const renderer: VisualRenderer = "webgl"; // what --webgl asks for
+ * ```
+ */
+type VisualRenderer = "webgpu" | "webgl";
 /**
  * The options of a run. Each one left out comes from the command line (`argv`), then from its
  * default: `dir` `"tests/visual"`, `update` false, `pixels` true with a `page` on a Mac,
- * `settleFrames` 600, `tolerance` `{ ratio: 0.001, threshold: 24 }`, `argv`
- * `process.argv.slice(2)`. An option given here wins over a flag.
+ * `renderer` `"webgpu"`, `settleFrames` 600, `tolerance` `{ ratio: 0.001, threshold: 24 }`,
+ * `argv` `process.argv.slice(2)`. An option given here wins over a flag. `renderer: "webgl"`
+ * runs only the tests with `webgl: true`, on the page with `?renderer=webgl`, and compares their
+ * pictures with `screen.webgl.webp`.
  *
  * @example
  * ```ts
  * // The same as `bun tests/visual/run.ts --only reward-popup --no-pixels`.
  * const options: VisualOptions = { only: ["reward-popup"], pixels: false };
+ * // The same as `bun tests/visual/run.ts --webgl`.
+ * const webgl: VisualOptions = { renderer: "webgl" };
  * ```
  */
 type VisualOptions = {
   dir?: string;
   update?: boolean;
   pixels?: boolean;
+  renderer?: VisualRenderer;
   only?: readonly string[];
   settleFrames?: number;
   tolerance?: VisualTolerance;
@@ -288,6 +304,7 @@ type VisualFlags = {
   dir?: string;
   update?: boolean;
   pixels?: boolean;
+  renderer?: VisualRenderer;
   only?: readonly string[];
 };
 //#endregion
@@ -297,33 +314,34 @@ type VisualFlags = {
  * `/control` command by its short name with that command's input, or `{ checkpoint: name }`,
  * where the runner saves `state.json` and `describe.json` next to the test. `walk` runs fast: a
  * popup its last node opens never mounts, so the step before a checkpoint that shows a node's
- * result is `answer` or `tap`. The answer is a frozen copy; nothing runs here.
+ * result is `answer` or `tap`. With `webgl: true` the test also runs in the WebGL leg
+ * (`--webgl`), whose pictures go to `screen.webgl.webp`: set it on a screen with a custom filter.
+ * The answer is a frozen copy; nothing runs here.
  *
  * @param name - The test name, also its folder: lowercase letters, digits and dashes.
- * @param test - Where it starts and its steps.
+ * @param test - Where it starts, its steps and its WebGL leg.
  * @param test.start - The player, and optionally the session, the rng and the checkpoint.
  * @param test.steps - The commands and the checkpoints, in order.
+ * @param test.webgl - True to run the test in the WebGL leg too; false by default.
  * @returns The test, frozen.
  * @throws {Error} When the name or a checkpoint name is not a file name, a checkpoint name is
  *   used twice, or a step is not one step command.
  * @example
  * ```ts
- * // tests/visual/reward-popup.visual.ts: Play, deliver the first order, claim the reward.
- * export const rewardPopup = defineVisualTest("reward-popup", {
- *   start: { player: fixtures.ready, checkpoint: "home" },
- *   steps: [{ tap: { key: "play" } }, { answer: { intent: "deliver", payload: { orderId: "o1" } } },
- *     { checkpoint: "open" }, { tap: { key: "claim" } }, { checkpoint: "claimed" }]
- * });
+ * // tests/visual/home.visual.ts: Home with the glowing Play plank, in both legs.
+ * const home = defineVisualTest("home", { start: atHome, steps: [{ checkpoint: "rest" }], webgl: true });
+ * home.webgl; // true
  * ```
  */
 declare function defineVisualTest(name: string, test: {
   start: VisualStart;
   steps: readonly VisualStep[];
+  webgl?: boolean;
 }): VisualTest;
 //#endregion
 //#region src/visual/run.d.ts
 /**
- * Reads the flags of the visual tests from a command line: `--update`, `--no-pixels`,
+ * Reads the flags of the visual tests from a command line: `--update`, `--no-pixels`, `--webgl`,
  * `--only <name>` (repeatable) and `--dir <path>`. An argument it does not know is left to the
  * script that got it, so a test runner's own arguments pass through.
  *
@@ -335,12 +353,16 @@ declare function defineVisualTest(name: string, test: {
  * // `bun tests/visual/run.ts --update --only reward-popup`
  * parseVisualArgv(["--update", "--only", "reward-popup"]); // { update: true, only: ["reward-popup"] }
  * parseVisualArgv(["--no-pixels", "--dir", "shots"]); // { pixels: false, dir: "shots" }
+ * parseVisualArgv(["--webgl"]); // { renderer: "webgl" }
  * ```
  */
 declare function parseVisualArgv(argv: readonly string[]): VisualFlags;
 /**
  * Runs visual tests: the headless leg over every selected test, then the browser leg over the
- * same tests when `pixels` is on (by default only with a `page` on a Mac). A checkpoint saves
+ * same tests when `pixels` is on (by default only with a `page` on a Mac). With `renderer:
+ * "webgl"` (`--webgl`) only the tests with `webgl: true` run, the page opens with
+ * `?renderer=webgl` and its pictures go to `screen.webgl.webp`; `state.json` and `describe.json`
+ * are shared with the WebGPU leg and compared as always. A checkpoint saves
  * `state.json` and `describe.json` in `<dir>/<test>/<checkpoint>/`, and the browser leg
  * `screen.webp`, lossless: a missing file is written, `--update` rewrites every file of the tests
  * run, a JSON file is compared exactly. The browser leg opens the dev page in Chrome with WebGPU
@@ -359,7 +381,8 @@ declare function parseVisualArgv(argv: readonly string[]): VisualFlags;
  * @throws {Error} When a test is not well formed, two tests share a name, `only` names no test,
  *   a flag misses its value, or the browser leg fails as a whole: no `page`, no
  *   `playwright-core`, no Chrome, or a page that does not open, expose `game` and `doors`, start,
- *   draw with WebGPU or stop loading.
+ *   draw with the requested backend or stop loading. In the WebGL leg, also when `only` names a
+ *   test without `webgl: true`.
  * @example
  * ```ts
  * // tests/visual/run.ts of a game, `bun tests/visual/run.ts --update` on a Mac
@@ -372,4 +395,4 @@ declare function parseVisualArgv(argv: readonly string[]): VisualFlags;
  */
 declare function runVisualTests(setup: VisualSetup, tests: readonly VisualTest[], options?: VisualOptions): Promise<VisualReport>;
 //#endregion
-export { type CheckpointResult, type HeadlessApp, type HeadlessGame, type Repro, type ReproResult, type VisualApp, type VisualOptions, type VisualPage, type VisualReport, type VisualSetup, type VisualStart, type VisualStep, type VisualTest, type VisualTestResult, type VisualTolerance, createHeadless, defineVisualTest, fakeClock, memory, parseVisualArgv, runRepro, runVisualTests, saveOf, stepFrames };
+export { type CheckpointResult, type HeadlessApp, type HeadlessGame, type Repro, type ReproResult, type VisualApp, type VisualOptions, type VisualPage, type VisualRenderer, type VisualReport, type VisualSetup, type VisualStart, type VisualStep, type VisualTest, type VisualTestResult, type VisualTolerance, createHeadless, defineVisualTest, fakeClock, memory, parseVisualArgv, runRepro, runVisualTests, saveOf, stepFrames };

package/dist/testing.mjs

@@ -199,8 +199,8 @@ function runStep(app, name, input) {
 //#endregion
 //#region src/visual/define.ts
 /**
-* @file visual — `defineVisualTest`: a name, where the test starts and its steps, checked and
-* frozen. Nothing runs at definition.
+* @file visual — `defineVisualTest`: a name, where the test starts, its steps and whether it runs
+* in the WebGL leg, checked and frozen. Nothing runs at definition.
 */
 /** A file name: lowercase letters and digits, words joined by single dashes. */
 const fileName = /^[\da-z]+(?:-[\da-z]+)*$/u;
@@ -262,31 +262,33 @@ function checkVisualTest(name, steps) {
 * `/control` command by its short name with that command's input, or `{ checkpoint: name }`,
 * where the runner saves `state.json` and `describe.json` next to the test. `walk` runs fast: a
 * popup its last node opens never mounts, so the step before a checkpoint that shows a node's
-* result is `answer` or `tap`. The answer is a frozen copy; nothing runs here.
+* result is `answer` or `tap`. With `webgl: true` the test also runs in the WebGL leg
+* (`--webgl`), whose pictures go to `screen.webgl.webp`: set it on a screen with a custom filter.
+* The answer is a frozen copy; nothing runs here.
 *
 * @param name - The test name, also its folder: lowercase letters, digits and dashes.
-* @param test - Where it starts and its steps.
+* @param test - Where it starts, its steps and its WebGL leg.
 * @param test.start - The player, and optionally the session, the rng and the checkpoint.
 * @param test.steps - The commands and the checkpoints, in order.
+* @param test.webgl - True to run the test in the WebGL leg too; false by default.
 * @returns The test, frozen.
 * @throws {Error} When the name or a checkpoint name is not a file name, a checkpoint name is
 *   used twice, or a step is not one step command.
 * @example
 * ```ts
-* // tests/visual/reward-popup.visual.ts: Play, deliver the first order, claim the reward.
-* export const rewardPopup = defineVisualTest("reward-popup", {
-*   start: { player: fixtures.ready, checkpoint: "home" },
-*   steps: [{ tap: { key: "play" } }, { answer: { intent: "deliver", payload: { orderId: "o1" } } },
-*     { checkpoint: "open" }, { tap: { key: "claim" } }, { checkpoint: "claimed" }]
-* });
+* // tests/visual/home.visual.ts: Home with the glowing Play plank, in both legs.
+* const home = defineVisualTest("home", { start: atHome, steps: [{ checkpoint: "rest" }], webgl: true });
+* home.webgl; // true
 * ```
 */
 function defineVisualTest(name, test) {
 	checkVisualTest(name, test.steps);
+	const webgl = test.webgl ?? false;
 	return freezeDeep(structuredClone({
 		name,
 		start: test.start,
-		steps: test.steps
+		steps: test.steps,
+		webgl
 	}));
 }
 //#endregion
@@ -1489,13 +1491,54 @@ const READY_MS = 15e3;
 * multiple.
 */
 const START_MS = 5e3;
-/** The baseline picture of a checkpoint, and the two the leg leaves beside it on a difference. */
-const SCREEN = {
-	baseline: "screen.webp",
-	actual: "screen.actual.webp",
-	diff: "screen.diff.webp"
+/** The name of each backend in a message. */
+const BACKEND = {
+	webgpu: "WebGPU",
+	webgl: "WebGL"
+};
+/** What to do about a page that draws with another backend than the leg asked for. */
+const OTHER_BACKEND_FIX = {
+	webgpu: "The WebGPU baselines need a Chrome with WebGPU on a Mac: use one, or run with --no-pixels.",
+	webgl: "The WebGL baselines need a page that passes renderer=webgl from its query to the renderer: serve one, or run without --webgl."
 };
 /**
+* Names the URL a leg opens: the dev page as it is for WebGPU, with `renderer=webgl` in its query
+* for WebGL.
+*
+* @param url - The URL of the dev page.
+* @param renderer - The backend of the leg.
+* @returns The URL to open.
+* @example
+* ```ts
+* rendererUrl("http://localhost:3000/", "webgl"); // "http://localhost:3000/?renderer=webgl"
+* ```
+*/
+function rendererUrl(url, renderer) {
+	if (renderer === "webgpu") return url;
+	const withRenderer = new URL(url);
+	withRenderer.searchParams.set("renderer", renderer);
+	return withRenderer.href;
+}
+/**
+* Names the pictures of a checkpoint for a backend: `screen.webp` and its actual and diff for
+* WebGPU, the same names with `.webgl` before the end for WebGL.
+*
+* @param renderer - The backend of the leg.
+* @returns The file names of the baseline, the actual and the diff.
+* @example
+* ```ts
+* screenFiles("webgl"); // { baseline: "screen.webgl.webp", actual: "screen.webgl.actual.webp", diff: "screen.webgl.diff.webp" }
+* ```
+*/
+function screenFiles(renderer) {
+	const stem = renderer === "webgpu" ? "screen" : `screen.${renderer}`;
+	return {
+		baseline: `${stem}.webp`,
+		actual: `${stem}.actual.webp`,
+		diff: `${stem}.diff.webp`
+	};
+}
+/**
 * Reads the first line of a Playwright error, without the name of the call that failed.
 *
 * @param error - What Playwright threw.
@@ -1687,15 +1730,16 @@ async function startPage(page, url, run) {
 }
 /**
 * Opens the dev page for one test: the page script first, then the URL, then the wait for
-* `game` and `doors`, for the graph at its first gate, the check that it draws with WebGPU, and
-* the wait until no request ran for half a second, so no load is left for the stepped frames.
+* `game` and `doors`, for the graph at its first gate, the check that it draws with the backend
+* of the leg, and the wait until no request ran for half a second, so no load is left for the
+* stepped frames.
 *
 * @param context - The browser context.
-* @param url - The URL of the dev page.
-* @param run - The run options, for `settleFrames`.
+* @param url - The URL of the page the leg opens.
+* @param run - The run options, for `settleFrames` and `renderer`.
 * @returns The open page.
 * @throws {Error} When the page does not open, never exposes `game` and `doors`, does not start,
-*   does not draw with WebGPU or never stops loading. The page is closed then.
+*   draws with another backend or never stops loading. The page is closed then.
 */
 async function openPage(context, url, run) {
 	const page = await context.newPage();
@@ -1708,7 +1752,7 @@ async function openPage(context, url, run) {
 			throw new Error(`[game] The page at ${url} exposes no game and doors.\n  Serve the dev page (bun ./web/serve.ts) and set globalThis.game and globalThis.doors in it.`);
 		});
 		const kind = await startPage(page, url, run);
-		if (kind !== "webgpu") throw new Error(`[game] The page at ${url} draws with ${kind}, not WebGPU.\n  The pixel baselines are WebGPU only: use a Chrome with WebGPU on a Mac, or run with --no-pixels.`);
+		if (kind !== run.renderer) throw new Error(`[game] The page at ${url} draws with ${kind}, not ${BACKEND[run.renderer]}.\n  ${OTHER_BACKEND_FIX[run.renderer]}`);
 		await page.waitForLoadState("networkidle", { timeout: READY_MS }).catch(() => {
 			throw new Error(`[game] The page at ${url} did not stop loading in ${READY_MS / 1e3} s.\n  Let it finish its requests: the leg pauses the game once nothing loads.`);
 		});
@@ -1719,9 +1763,9 @@ async function openPage(context, url, run) {
 	}
 }
 /**
-* Checks the picture of a checkpoint against `screen.webp`: a missing baseline, or `--update`,
-* writes it; a difference writes `screen.actual.webp`, and `screen.diff.webp` when the sizes
-* match.
+* Checks the picture of a checkpoint against `screen.webp` (`screen.webgl.webp` in the WebGL
+* leg): a missing baseline, or `--update`, writes it; a difference writes `screen.actual.webp`,
+* and `screen.diff.webp` when the sizes match, named the same way.
 *
 * @param play - The test being played.
 * @param file - Names a file of the checkpoint.
@@ -1731,9 +1775,10 @@ async function openPage(context, url, run) {
 */
 async function checkScreen(play, file, where, screen) {
 	const { run } = play;
-	const baseline = run.update ? void 0 : await readScreen(file(SCREEN.baseline));
+	const names = screenFiles(run.renderer);
+	const baseline = run.update ? void 0 : await readScreen(file(names.baseline));
 	if (baseline === void 0) {
-		await writeScreen(file(SCREEN.baseline), screen);
+		await writeScreen(file(names.baseline), screen);
 		return { outcome: "written" };
 	}
 	const compared = await callPage(play.page, pageCompare, {
@@ -1745,14 +1790,14 @@ async function checkScreen(play, file, where, screen) {
 	});
 	const found = pixelOutcome(compared, run.tolerance);
 	if (found.outcome === "different") {
-		await writeScreen(file(SCREEN.actual), screen);
-		if (compared.diff !== void 0) await writeScreen(file(SCREEN.diff), compared.diff);
+		await writeScreen(file(names.actual), screen);
+		if (compared.diff !== void 0) await writeScreen(file(names.diff), compared.diff);
 	}
 	return found;
 }
 /**
 * Plays a checkpoint in the page and checks what it found: the state against `state.json` the
-* headless leg wrote, the picture against `screen.webp`.
+* headless leg wrote, the picture against the baseline of the leg's backend.
 *
 * @param play - The test being played.
 * @param name - The checkpoint name.
@@ -1767,7 +1812,7 @@ async function checkpoint(play, name, where) {
 		where,
 		settleFrames: run.settleFrames
 	});
-	if (shot.screen === void 0) throw new Error(`[game] Visual test "${test.name}", ${where}: the page gave no picture.\n  Serve a dev build with WebGPU: renderer.capture() answers only there.`);
+	if (shot.screen === void 0) throw new Error(`[game] Visual test "${test.name}", ${where}: the page gave no picture.\n  Serve a dev build with ${BACKEND[run.renderer]}: renderer.capture() answers only there.`);
 	const file = (kind) => baselineFile(run.dir, test.name, name, kind);
 	return {
 		state: await compareBaseline(file("state.json"), stableJson(shot.state)),
@@ -1826,7 +1871,7 @@ async function playSteps(play, found) {
 * @param play - The test and the run options; the page is opened here.
 * @param play.test - The test.
 * @param play.run - The run options.
-* @param url - The URL of the dev page.
+* @param url - The URL of the page the leg opens.
 * @param headless - The result of the test in the headless leg.
 * @returns The result of the test with its pixel fields.
 * @throws {Error} When the page fails to open: that fails the leg.
@@ -1860,8 +1905,9 @@ async function browserTest(context, play, url, headless) {
 }
 /**
 * Runs the browser leg over the tests the headless leg played, one page per test, and answers
-* their results with the pixel fields. A test the headless leg failed is left as it is. The
-* browser closes at the end, also after an error.
+* their results with the pixel fields. The page opens with `?renderer=webgl` in the WebGL leg. A
+* test the headless leg failed is left as it is. The browser closes at the end, also after an
+* error.
 *
 * @param setup - The setup: its `page`, and its app for the size of the page.
 * @param tests - The selected tests.
@@ -1870,13 +1916,15 @@ async function browserTest(context, play, url, headless) {
 * @param load - Loads `chromium`; `playwright-core` by default.
 * @returns One result per test, in order.
 * @throws {Error} When the setup has no page, `playwright-core` or Chrome is missing, or the page
-*   does not open, expose `game` and `doors`, start, draw with WebGPU or stop loading.
+*   does not open, expose `game` and `doors`, start, draw with the backend of the leg or stop
+*   loading.
 */
 async function runBrowserLeg(setup, tests, run, headless, load = loadChromium) {
 	const page = setup.page;
 	if (page === void 0) throw new Error("[game] The pixel leg needs the dev page.\n  Pass page: { url } in the setup, or run with --no-pixels.");
 	const chromium = await load();
 	const options = pageSize(setup, page);
+	const url = rendererUrl(page.url, run.renderer);
 	const browser = await launchChrome(chromium, page.browser);
 	try {
 		const context = await browser.newContext(options);
@@ -1889,7 +1937,7 @@ async function runBrowserLeg(setup, tests, run, headless, load = loadChromium) {
 			results.push(before.error === void 0 ? await browserTest(context, {
 				test,
 				run
-			}, page.url, before) : before);
+			}, url, before) : before);
 		}
 		return results;
 	} finally {
@@ -1900,8 +1948,8 @@ async function runBrowserLeg(setup, tests, run, headless, load = loadChromium) {
 //#region src/visual/run.ts
 /**
 * @file visual — `runVisualTests`, the runner a game's script calls, and `parseVisualArgv`, its
-* command line. It resolves the options, selects the tests, runs the headless leg and then, with
-* `pixels` on, the browser leg, prints one line per checkpoint through the branded console of
+* command line. It resolves the options, selects the tests (in the WebGL leg, the ones with
+* `webgl: true`), runs the headless leg and then, with `pixels` on, the browser leg, prints one line per checkpoint through the branded console of
 * `@moku-labs/common/cli` and answers one report. The game's script sets the exit code.
 */
 /** The folder of the visual tests, relative to where the script runs. */
@@ -1929,7 +1977,7 @@ function valueAfter(argv, index, placeholder) {
 	throw new Error(`[game] The flag ${flag} needs a value.\n  Write it as ${flag} ${placeholder}.`);
 }
 /**
-* Reads the flags of the visual tests from a command line: `--update`, `--no-pixels`,
+* Reads the flags of the visual tests from a command line: `--update`, `--no-pixels`, `--webgl`,
 * `--only <name>` (repeatable) and `--dir <path>`. An argument it does not know is left to the
 * script that got it, so a test runner's own arguments pass through.
 *
@@ -1941,6 +1989,7 @@ function valueAfter(argv, index, placeholder) {
 * // `bun tests/visual/run.ts --update --only reward-popup`
 * parseVisualArgv(["--update", "--only", "reward-popup"]); // { update: true, only: ["reward-popup"] }
 * parseVisualArgv(["--no-pixels", "--dir", "shots"]); // { pixels: false, dir: "shots" }
+* parseVisualArgv(["--webgl"]); // { renderer: "webgl" }
 * ```
 */
 function parseVisualArgv(argv) {
@@ -1949,6 +1998,7 @@ function parseVisualArgv(argv) {
 	for (const [index, argument] of argv.entries()) {
 		if (argument === "--update") flags.update = true;
 		if (argument === "--no-pixels") flags.pixels = false;
+		if (argument === "--webgl") flags.renderer = "webgl";
 		if (argument === "--only") only.push(valueAfter(argv, index, "<name>"));
 		if (argument === "--dir") flags.dir = valueAfter(argv, index, "<path>");
 	}
@@ -1959,7 +2009,7 @@ function parseVisualArgv(argv) {
 }
 /**
 * Fills in the options of a run: an explicit option wins over a flag of `argv`, a flag over the
-* default. `pixels` is on by default only with a `page` on a Mac.
+* default. `pixels` is on by default only with a `page` on a Mac; `renderer` is `"webgpu"`.
 *
 * @param setup - The setup, for its `page`.
 * @param options - The options the script passed.
@@ -1973,6 +2023,7 @@ function resolveVisualOptions(setup, options = {}) {
 		dir: options.dir ?? flags.dir ?? DEFAULT_DIR,
 		update: options.update ?? flags.update ?? false,
 		pixels: options.pixels ?? flags.pixels ?? (setup.page !== void 0 && process.platform === "darwin"),
+		renderer: options.renderer ?? flags.renderer ?? "webgpu",
 		settleFrames: options.settleFrames ?? DEFAULT_SETTLE_FRAMES,
 		tolerance: options.tolerance ?? { ...DEFAULT_TOLERANCE }
 	};
@@ -1982,6 +2033,21 @@ function resolveVisualOptions(setup, options = {}) {
 	};
 }
 /**
+* Keeps the tests the WebGL leg plays: the ones with `webgl: true`. The WebGPU leg plays every
+* test.
+*
+* @param tests - The tests `only` selected.
+* @param run - The run options, for `renderer` and `only`.
+* @returns The tests of the leg.
+* @throws {Error} When `only` names a test without `webgl: true` in the WebGL leg.
+*/
+function legTests(tests, run) {
+	if (run.renderer === "webgpu") return [...tests];
+	const withoutLeg = run.only === void 0 ? void 0 : tests.find((test) => !test.webgl);
+	if (withoutLeg !== void 0) throw new Error(`[game] The visual test "${withoutLeg.name}" has no WebGL leg.\n  Pass webgl: true to its defineVisualTest, or run without --webgl.`);
+	return tests.filter((test) => test.webgl);
+}
+/**
 * Picks the tests a run plays: all of them, or the ones `only` names, in the order given.
 *
 * @param tests - Every test of the script.
@@ -2097,7 +2163,10 @@ async function withPixelLeg(ui, setup, tests, run, headless) {
 }
 /**
 * Runs visual tests: the headless leg over every selected test, then the browser leg over the
-* same tests when `pixels` is on (by default only with a `page` on a Mac). A checkpoint saves
+* same tests when `pixels` is on (by default only with a `page` on a Mac). With `renderer:
+* "webgl"` (`--webgl`) only the tests with `webgl: true` run, the page opens with
+* `?renderer=webgl` and its pictures go to `screen.webgl.webp`; `state.json` and `describe.json`
+* are shared with the WebGPU leg and compared as always. A checkpoint saves
 * `state.json` and `describe.json` in `<dir>/<test>/<checkpoint>/`, and the browser leg
 * `screen.webp`, lossless: a missing file is written, `--update` rewrites every file of the tests
 * run, a JSON file is compared exactly. The browser leg opens the dev page in Chrome with WebGPU
@@ -2116,7 +2185,8 @@ async function withPixelLeg(ui, setup, tests, run, headless) {
 * @throws {Error} When a test is not well formed, two tests share a name, `only` names no test,
 *   a flag misses its value, or the browser leg fails as a whole: no `page`, no
 *   `playwright-core`, no Chrome, or a page that does not open, expose `game` and `doors`, start,
-*   draw with WebGPU or stop loading.
+*   draw with the requested backend or stop loading. In the WebGL leg, also when `only` names a
+*   test without `webgl: true`.
 * @example
 * ```ts
 * // tests/visual/run.ts of a game, `bun tests/visual/run.ts --update` on a Mac
@@ -2129,7 +2199,7 @@ async function withPixelLeg(ui, setup, tests, run, headless) {
 */
 async function runVisualTests(setup, tests, options = {}) {
 	const run = resolveVisualOptions(setup, options);
-	const selected = selectTests(tests, run.only);
+	const selected = legTests(selectTests(tests, run.only), run);
 	const ui = createBrandConsole();
 	const headless = await runHeadlessLeg(setup, selected, run);
 	const results = run.pixels ? await withPixelLeg(ui, setup, selected, run, headless) : headless;

package/dist/{types-Cjf3ywai.d.mts → types-BZ1OLf24.d.mts}

@@ -1527,7 +1527,7 @@ type FxApi = {
    * @example
    * ```ts
    * // The screen wants a haptic tick outside any node. Nothing waits for it.
-   * app.flow.fx.dispatch({ kind: "haptic", payload: { style: "light" } });
+   * app.flow.fx.dispatch({ kind: "haptic", payload: { kind: "light" } });
    * ```
    */
   dispatch(descriptor: Descriptor | Hint): void;
@@ -4755,6 +4755,21 @@ type HostApi = {
    * ```
    */
   device(): GPUDevice | undefined;
+  /**
+   * The WebGL2 context of the live WebGL application, read at call time like `device()`. Pixi
+   * restores a lost context itself, so a caller asks again instead of keeping it.
+   *
+   * @returns The context, or `undefined` while inert, before `ready()`, while the context is lost,
+   *   on the unsupported screen and on WebGPU.
+   * @example
+   * ```ts
+   * // effects compiles a custom filter's GLSL once in a dev build, on the WebGL fallback only
+   * const gl = ctx.require(rendererPlugin).host.gl();
+   * if (gl === undefined) return; // WebGPU, inert or a lost context: nothing to compile on
+   * const shader = gl.createShader(gl.FRAGMENT_SHADER); // then shaderSource and compileShader
+   * ```
+   */
+  gl(): WebGL2RenderingContext | undefined;
 };
 /**
  * The textures the GPU holds: how many sources, and their estimated bytes.
@@ -5776,7 +5791,8 @@ declare namespace types_d_exports {
  * The part of Pixi the engine uses: the classes `sync` builds views from (a `Rectangle` frames the
  * crop of a `"cover"` sprite), the bitmap-font pieces `fonts.install` needs, the `BitmapText` a
  * plugin above builds through `host.pixi()`, the filter and particle classes `effects` builds
- * through it, and the extension registry with the three WebGPU draw classes the dev draw-call
+ * through it (a custom filter carries a `GpuProgram` and a `GlProgram` over `defaultFilterVert`),
+ * and the extension registry with the three WebGPU draw classes the dev draw-call
  * counter swaps and the bitmap text pipe `host` swaps for one whose SDF shader applies the alpha
  * once (with the WGSL and GLSL shader pieces it compiles that shader from). The module object
  * never arrives through a static import: `config.loadPixi()` returns it, so a game without a screen carries no
@@ -5788,9 +5804,10 @@ declare namespace types_d_exports {
  * pixi.Texture.WHITE.width; // 1
  * pixi.GpuBatchAdaptor.extension.name; // "batch"
  * pixi.BitmapTextPipe.extension.name; // "bitmapText"
+ * pixi.defaultFilterVert.startsWith("in vec2 aPosition;"); // true
  * ```
  */
-type PixiModule = Pick<typeof import("pixi.js"), "AlphaFilter" | "Application" | "BitmapFont" | "BitmapText" | "BitmapTextPipe" | "BlurFilter" | "Cache" | "ColorMatrixFilter" | "Container" | "DisplacementFilter" | "Filter" | "GpuBatchAdaptor" | "GpuEncoderSystem" | "GpuGraphicsAdaptor" | "GpuProgram" | "Graphics" | "Matrix" | "NineSliceSprite" | "NoiseFilter" | "Particle" | "ParticleContainer" | "Rectangle" | "Shader" | "Sprite" | "Texture" | "UniformGroup" | "bitmapFontTextParser" | "bitmapFontXMLStringParser" | "colorBit" | "colorBitGl" | "compileHighShaderGlProgram" | "compileHighShaderGpuProgram" | "extensions" | "generateTextureBatchBit" | "generateTextureBatchBitGl" | "getBatchSamplersUniformGroup" | "localUniformMSDFBit" | "localUniformMSDFBitGl" | "mSDFBit" | "mSDFBitGl" | "roundPixelsBit" | "roundPixelsBitGl">;
+type PixiModule = Pick<typeof import("pixi.js"), "AlphaFilter" | "Application" | "BitmapFont" | "BitmapText" | "BitmapTextPipe" | "BlurFilter" | "Cache" | "ColorMatrixFilter" | "Container" | "DisplacementFilter" | "Filter" | "GlProgram" | "GpuBatchAdaptor" | "GpuEncoderSystem" | "GpuGraphicsAdaptor" | "GpuProgram" | "Graphics" | "Matrix" | "NineSliceSprite" | "NoiseFilter" | "Particle" | "ParticleContainer" | "Rectangle" | "Shader" | "Sprite" | "Texture" | "UniformGroup" | "bitmapFontTextParser" | "bitmapFontXMLStringParser" | "colorBit" | "colorBitGl" | "compileHighShaderGlProgram" | "compileHighShaderGpuProgram" | "defaultFilterVert" | "extensions" | "generateTextureBatchBit" | "generateTextureBatchBitGl" | "getBatchSamplersUniformGroup" | "localUniformMSDFBit" | "localUniformMSDFBitGl" | "mSDFBit" | "mSDFBitGl" | "roundPixelsBit" | "roundPixelsBitGl">;
 /**
  * One Pixi application: renderer, canvas and stage.
  */

package/dist/{types-DgwbzDLP.d.mts → types-C47fKNcn.d.mts}

@@ -1,4 +1,4 @@
-import { St as Api$3, f as SliceFrame, mt as NodeInfo, nn as Require, o as PixiTexture, q as Api$1, t as Api$2, vt as Descriptor } from "./types-Cjf3ywai.mjs";
+import { St as Api$3, f as SliceFrame, mt as NodeInfo, nn as Require, o as PixiTexture, q as Api$1, t as Api$2, vt as Descriptor } from "./types-BZ1OLf24.mjs";
 import { Log } from "@moku-labs/common/browser";
 import { PluginCtx } from "@moku-labs/core";
 
@@ -59,11 +59,15 @@ type CreateTextureOptions = {
 /**
  * The part of a fetch response the plugin reads: the manifest is `json`, a texture is a `blob`,
  * a font file is `text` and an audio file stays the raw `arrayBuffer`. The global `Response`
- * fits it.
+ * fits it. `headers` gives the `content-type`: on `tauri://` a missing file comes back `200` with
+ * `index.html`, so `text/html` for a path that is not `.html` counts as missing.
  */
 type FetchResponse = {
   ok: boolean;
   status: number;
+  headers: {
+    get(name: string): string | null;
+  };
   json(): Promise<unknown>;
   blob(): Promise<Blob>;
   text(): Promise<string>;
@@ -80,6 +84,7 @@ type FetchResponse = {
  *   fetch: async () => ({
  *     ok: true,
  *     status: 200,
+ *     headers: { get: () => null },
  *     json: async () => ({}),
  *     blob: async () => blob,
  *     text: async () => 'info face="body"',