@swifttui/web 0.0.13 → 0.0.15

package/src/WebHostSceneRuntime.test.ts

@@ -1,1982 +0,0 @@
-import { expect, test } from "bun:test";
-
-import {
-  BrowserWASIBridge,
-  encodeRenderStyleControlMessage,
-  encodeResizeControlMessage,
-} from "./wasi/BrowserWASIBridge.ts";
-import { SharedInputQueueReader } from "./wasi/SharedInputQueue.ts";
-import { createWasmSceneRuntimeFactory } from "./wasi/WasmSceneRuntime.ts";
-import { WebHostSceneRuntime, type WheelMode } from "./WebHostSceneRuntime.ts";
-import { transportFixture } from "./WebHostTestFixtures.ts";
-
-const encoder = new TextEncoder();
-const decoder = new TextDecoder();
-
-test("hidden scenes stay out of layout even after style updates", () => {
-  const dom = installFakeDOM();
-  try {
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "details", title: "Details", isDefault: false },
-      style: {},
-      onInput: () => {},
-    });
-
-    expect(runtime.element.hidden).toBe(true);
-    expect(runtime.element.style.getPropertyValue("display")).toBe("none");
-    expect(runtime.element.style.getPropertyPriority("display")).toBe("important");
-
-    runtime.setStyle({ fontSize: 18 });
-    expect(runtime.element.hidden).toBe(true);
-    expect(runtime.element.style.getPropertyValue("display")).toBe("none");
-
-    runtime.setVisible(true);
-    expect(runtime.element.hidden).toBe(false);
-    expect(runtime.element.style.getPropertyValue("display")).toBe("grid");
-
-    runtime.setVisible(false);
-    expect(runtime.element.hidden).toBe(true);
-    expect(runtime.element.style.getPropertyValue("display")).toBe("none");
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime draws decoded surface frames into the canvas", async () => {
-  const dom = installFakeDOM({ devicePixelRatio: 2 });
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 4,
-      rows: 2,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {
-        fontSize: 20,
-        fontFamily: "Test Mono",
-        theme: {
-          foreground: "#eeeeee",
-          background: "#101820",
-        },
-      },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-
-    expect(dom.canvases).toHaveLength(1);
-    const canvas = dom.canvases[0]!;
-    const context = canvas.context;
-
-    context.operations = [];
-    bridge.stdout.write(encoder.encode(transportFixture("web-surface-styled")));
-
-    expect(canvas.width).toBe(80);
-    expect(canvas.height).toBe(108);
-    expect(canvas.style.width).toBe("40px");
-    expect(canvas.style.height).toBe("54px");
-
-    expect(context.operations).toContainEqual({
-      type: "clearRect",
-      x: 0,
-      y: 0,
-      width: 40,
-      height: 54,
-    });
-    expect(context.operations).toContainEqual({
-      type: "fillRect",
-      x: 0,
-      y: 0,
-      width: 40,
-      height: 54,
-      fillStyle: "rgba(16, 24, 32, 1)",
-      globalAlpha: 1,
-    });
-
-    expect(fillTextOperations(context, "A")).toEqual([
-      {
-        type: "fillText",
-        text: "A",
-        x: 0,
-        y: 21,
-        fillStyle: "#000000FF",
-        font: "italic 700 20px Test Mono",
-        globalAlpha: 0.75,
-      },
-    ]);
-    expect(fillTextOperations(context, "界")).toHaveLength(1);
-    expect(fillRectOperations(context, "#E05757FF")[0]).toMatchObject({
-      x: 0,
-      y: 0,
-      width: 10,
-      height: 27,
-      globalAlpha: 0.75,
-    });
-    expect(fillRectOperations(context, "#61C67BFF")[0]).toMatchObject({
-      x: 10,
-      y: 0,
-      width: 20,
-      height: 27,
-      globalAlpha: 0.5,
-    });
-
-    const strokes = context.operations.filter((operation) => operation.type === "stroke");
-    expect(strokes).toContainEqual({
-      type: "stroke",
-      strokeStyle: "#EBB33CFF",
-      lineWidth: 1,
-      lineDash: [4, 3],
-      path: [["moveTo", 0, 25], ["lineTo", 10, 25]],
-    });
-    expect(strokes).toContainEqual({
-      type: "stroke",
-      strokeStyle: "#E05757FF",
-      lineWidth: 1,
-      lineDash: [1, 3],
-      path: [["moveTo", 0, 13], ["lineTo", 10, 13]],
-    });
-    expect(strokes.some((operation) => operation.lineWidth === 2)).toBe(true);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime redraws only damaged cells when a compatible frame includes damage", async () => {
-  const dom = installFakeDOM();
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 4,
-      rows: 2,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {
-        fontSize: 20,
-        fontFamily: "Test Mono",
-      },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-
-    const canvas = dom.canvases[0]!;
-    const context = canvas.context;
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [
-        [[0, "A", 1, 0], [1, "B", 1, 0]],
-        [[0, "C", 1, 0], [1, "D", 1, 0]],
-      ],
-      images: [],
-    })));
-
-    context.operations = [];
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [
-        [[0, "A", 1, 0], [1, "B", 1, 0]],
-        [[0, "X", 1, 0], [1, "D", 1, 0]],
-      ],
-      images: [],
-      damage: {
-        textRows: [[1, [[0, 1]]]],
-        requiresFullTextRepaint: false,
-        requiresFullGraphicsReplay: false,
-      },
-    })));
-
-    expect(context.operations).toContainEqual({
-      type: "clearRect",
-      x: 0,
-      y: 27,
-      width: 10,
-      height: 27,
-    });
-    expect(fillTextOperations(context, "X")).toHaveLength(1);
-    expect(fillTextOperations(context, "A")).toEqual([]);
-    expect(fillTextOperations(context, "D")).toEqual([]);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime redraws spanning cells that overlap a dirty range", async () => {
-  const dom = installFakeDOM();
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 6,
-      rows: 1,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {
-        fontSize: 20,
-        fontFamily: "Test Mono",
-      },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-
-    const canvas = dom.canvases[0]!;
-    const context = canvas.context;
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 6,
-      height: 1,
-      styles: [null],
-      rows: [
-        [[0, "Wide", 4, 0], [4, "Z", 1, 0]],
-      ],
-      images: [],
-    })));
-
-    context.operations = [];
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 6,
-      height: 1,
-      styles: [null],
-      rows: [
-        [[0, "wide", 4, 0], [4, "Z", 1, 0]],
-      ],
-      images: [],
-      damage: {
-        textRows: [[0, [[2, 3]]]],
-        requiresFullTextRepaint: false,
-        requiresFullGraphicsReplay: false,
-      },
-    })));
-
-    expect(context.operations).toContainEqual({
-      type: "clearRect",
-      x: 20,
-      y: 0,
-      width: 10,
-      height: 27,
-    });
-    expect(fillTextOperations(context, "wide")).toHaveLength(1);
-    expect(fillTextOperations(context, "Z")).toEqual([]);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime clears stale overlay text when dirty rects remove an overlay", async () => {
-  const dom = installFakeDOM();
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 24,
-      rows: 4,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {
-        fontSize: 20,
-        fontFamily: "Test Mono",
-      },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-
-    const canvas = dom.canvases[0]!;
-    const context = canvas.context;
-    context.operations = [];
-
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 24,
-      height: 4,
-      styles: [null],
-      rows: [
-        [[0, "Base content", 12, 0]],
-        [],
-        [],
-        [],
-      ],
-      images: [],
-    })));
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 24,
-      height: 4,
-      styles: [null],
-      rows: [
-        [[0, "Base content", 12, 0]],
-        [[0, "Command palette", 15, 0]],
-        [[0, "Search actions", 14, 0]],
-        [],
-      ],
-      images: [],
-      damage: {
-        textRows: [
-          [1, [[0, 24]]],
-          [2, [[0, 24]]],
-        ],
-        requiresFullTextRepaint: false,
-        requiresFullGraphicsReplay: false,
-      },
-    })));
-
-    const overlayText = readCanvasTextLikePixels(canvas);
-    expect(overlayText).toContain("Command palette");
-    expect(overlayText).toContain("Search actions");
-
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 24,
-      height: 4,
-      styles: [null],
-      rows: [
-        [[0, "Base content", 12, 0]],
-        [],
-        [],
-        [],
-      ],
-      images: [],
-      damage: {
-        textRows: [
-          [1, [[0, 24]]],
-          [2, [[0, 24]]],
-        ],
-        requiresFullTextRepaint: false,
-        requiresFullGraphicsReplay: false,
-      },
-    })));
-
-    const dismissedText = readCanvasTextLikePixels(canvas);
-    expect(dismissedText).not.toContain("Command palette");
-    expect(dismissedText).not.toContain("Search actions");
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime skips canvas drawing for compatible empty damage", async () => {
-  const dom = installFakeDOM();
-  try {
-    const bridge = new BrowserWASIBridge({ sceneId: "main", columns: 4, rows: 2 });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: { fontSize: 20, fontFamily: "Test Mono" },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [[[0, "A", 1, 0]], []],
-      images: [],
-    })));
-
-    const context = dom.canvases[0]!.context;
-    context.operations = [];
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [[[0, "A", 1, 0]], []],
-      images: [],
-      damage: {
-        textRows: [],
-        requiresFullTextRepaint: false,
-        requiresFullGraphicsReplay: false,
-      },
-    })));
-
-    expect(context.operations).toEqual([]);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime clears dirty rows when an image disappears", async () => {
-  const dom = installFakeDOM({
-    createImageBitmap: async () => ({ imageId: "decoded-image" }),
-  });
-  try {
-    const bridge = new BrowserWASIBridge({ sceneId: "main", columns: 4, rows: 2 });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: { fontSize: 20, fontFamily: "Test Mono" },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [
-        [[0, "A", 1, 0]],
-        [[0, "B", 1, 0]],
-      ],
-      images: [
-        {
-          id: "png:test",
-          format: "png",
-          bounds: [1, 1, 2, 1],
-          visibleBounds: [1, 1, 2, 1],
-          scalingMode: "stretch",
-          dataBase64: "iVBORw==",
-        },
-      ],
-    })));
-    await flushPromises();
-
-    const context = dom.canvases[0]!.context;
-    context.operations = [];
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [
-        [[0, "A", 1, 0]],
-        [[0, "B", 1, 0]],
-      ],
-      images: [],
-      damage: {
-        textRows: [[1, [[1, 3]]]],
-        requiresFullTextRepaint: false,
-        requiresFullGraphicsReplay: false,
-      },
-    })));
-
-    expect(context.operations).toContainEqual({
-      type: "clearRect",
-      x: 10,
-      y: 27,
-      width: 20,
-      height: 27,
-    });
-    expect(drawImageOperations(context)).toEqual([]);
-    expect(fillTextOperations(context, "A")).toEqual([]);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("WASI runtime forwards bridge control input into the worker queue", async () => {
-  const dom = installFakeDOM();
-  const previousWorker = globalThis.Worker;
-  const postedMessages: Array<{ inputQueue?: ConstructorParameters<typeof SharedInputQueueReader>[0] }> = [];
-
-  class FakeWorker {
-    constructor(
-      _url: string | URL,
-      _options?: WorkerOptions
-    ) {}
-
-    addEventListener(
-      _type: string,
-      _listener: EventListener
-    ): void {}
-
-    postMessage(
-      message: { inputQueue?: ConstructorParameters<typeof SharedInputQueueReader>[0] }
-    ): void {
-      postedMessages.push(message);
-    }
-
-    terminate(): void {}
-  }
-
-  globalThis.Worker = FakeWorker as unknown as typeof Worker;
-  try {
-    const bridge = new BrowserWASIBridge({ sceneId: "main", columns: 4, rows: 2 });
-    const mount = new FakeElement("div");
-    const runtime = createWasmSceneRuntimeFactory(new URL("https://example.test/app.wasm"), {
-      workerModuleURL: "fake-worker.js",
-    })({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: { fontSize: 20 },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-    const inputQueue = postedMessages[0]?.inputQueue;
-    if (!inputQueue) {
-      throw new Error("worker did not receive an input queue");
-    }
-    const reader = new SharedInputQueueReader(inputQueue);
-    reader.readAvailable(reader.availableBytes());
-
-    const style = { cursorBlink: true };
-    bridge.updateRenderStyle(style);
-    const styleBytes = reader.readAvailable(reader.availableBytes());
-    expect(Array.from(styleBytes ?? [])).toEqual(
-      Array.from(encodeRenderStyleControlMessage(style))
-    );
-
-    bridge.resize(10, 4, 9, 18);
-    const resizeBytes = reader.readAvailable(reader.availableBytes());
-    expect(Array.from(resizeBytes ?? [])).toEqual(
-      Array.from(encodeResizeControlMessage(10, 4, 9, 18))
-    );
-
-    runtime.dispose();
-  } finally {
-    globalThis.Worker = previousWorker;
-    dom.restore();
-  }
-});
-
-test("runtime mounts accessibility tree and announces live-region changes", async () => {
-  const dom = installFakeDOM();
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 4,
-      rows: 2,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {
-        fontSize: 20,
-        fontFamily: "Test Mono",
-      },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-
-    const canvas = dom.canvases[0]!;
-    expect(canvas.getAttribute("aria-hidden")).toBe("true");
-
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 2,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [[], []],
-      accessibilityTree: [
-        {
-          id: "root",
-          rect: [0, 0, 4, 2],
-          role: "group",
-          label: "Root",
-          isFocused: false,
-        },
-        {
-          id: "root/button",
-          parentId: "root",
-          rect: [0, 0, 2, 1],
-          role: "button",
-          label: "Save",
-          hint: "Writes the file",
-          isFocused: true,
-        },
-        {
-          id: "root/status",
-          parentId: "root",
-          rect: [0, 1, 2, 1],
-          role: "status",
-          label: "Idle",
-          liveRegion: "polite",
-          isFocused: false,
-        },
-        {
-          id: "root/error",
-          parentId: "root",
-          rect: [2, 1, 2, 1],
-          role: "alert",
-          label: "Ready",
-          liveRegion: "assertive",
-          isFocused: false,
-        },
-      ],
-      accessibilityAnnouncements: [
-        { message: "Ready", politeness: "polite" },
-      ],
-    })));
-
-    const tree = childWithClass(runtime.terminalMount, "webhost-scene__accessibility-tree");
-    const announcer = childWithClass(
-      runtime.terminalMount,
-      "webhost-scene__accessibility-announcer"
-    );
-    const root = childWithData(tree, "accessibilityId", "root");
-    const button = childWithData(root, "accessibilityId", "root/button");
-    const status = childWithData(root, "accessibilityId", "root/status");
-
-    expect(button.getAttribute("role")).toBe("button");
-    expect(button.getAttribute("aria-label")).toBe("Save");
-    expect(button.getAttribute("aria-description")).toBe("Writes the file");
-    expect(button.focused).toBe(true);
-    expect(button.lastFocusOptions).toEqual({ preventScroll: true });
-    expect(status.getAttribute("role")).toBe("status");
-    expect(status.getAttribute("aria-live")).toBe("polite");
-    expect(status.style.left).toBe("0px");
-    expect(status.style.top).toBe("27px");
-    expect(announcer.textContent).toBe("Ready");
-
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 2,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [[], []],
-      accessibilityTree: [
-        {
-          id: "root/status",
-          rect: [0, 1, 2, 1],
-          role: "status",
-          label: "Saved",
-          liveRegion: "polite",
-          isFocused: false,
-        },
-        {
-          id: "root/error",
-          rect: [2, 1, 2, 1],
-          role: "alert",
-          label: "Failed",
-          liveRegion: "assertive",
-          isFocused: false,
-        },
-      ],
-    })));
-
-    expect(announcer.getAttribute("aria-live")).toBe("assertive");
-    expect(announcer.textContent).toBe("Failed\nSaved");
-
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 2,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [[], []],
-      accessibilityAnnouncements: [
-        { message: "Published", politeness: "assertive" },
-        { message: "Queued", politeness: "polite" },
-      ],
-    })));
-
-    expect(announcer.getAttribute("aria-live")).toBe("assertive");
-    expect(announcer.textContent).toBe("Published\nQueued");
-
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 2,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [[], []],
-      accessibilityTree: [
-        {
-          id: "root/status",
-          rect: [0, 1, 2, 1],
-          role: "status",
-          label: "Saved",
-          liveRegion: "polite",
-          isFocused: false,
-        },
-      ],
-    })));
-
-    expect(announcer.textContent).toBe("Published\nQueued");
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime decodes surface images once and reuses the cached image", async () => {
-  const decodedBlobs: Blob[] = [];
-  const dom = installFakeDOM({
-    createImageBitmap: async (blob) => {
-      decodedBlobs.push(blob);
-      return { imageId: `decoded-${decodedBlobs.length}` };
-    },
-  });
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 4,
-      rows: 2,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {
-        fontSize: 20,
-        fontFamily: "Test Mono",
-      },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-
-    const canvas = dom.canvases[0]!;
-    const context = canvas.context;
-    context.operations = [];
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [[], []],
-      images: [
-        {
-          id: "png:test",
-          format: "png",
-          bounds: [1, 0, 2, 2],
-          visibleBounds: [1, 0, 1, 2],
-          scalingMode: "stretch",
-          pixelSize: [2, 2],
-          dataBase64: "iVBORw==",
-        },
-        {
-          id: "png:test",
-          format: "png",
-          bounds: [3, 0, 1, 1],
-          visibleBounds: [3, 0, 1, 1],
-          scalingMode: "stretch",
-          pixelSize: [2, 2],
-        },
-      ],
-    })));
-    await flushPromises();
-
-    expect(decodedBlobs).toHaveLength(1);
-    expect(drawImageOperations(context)).toEqual([
-      {
-        type: "drawImage",
-        imageId: "decoded-1",
-        x: 10,
-        y: 0,
-        width: 20,
-        height: 54,
-      },
-      {
-        type: "drawImage",
-        imageId: "decoded-1",
-        x: 30,
-        y: 0,
-        width: 10,
-        height: 27,
-      },
-    ]);
-    expect(context.operations).toContainEqual({
-      type: "rect",
-      x: 10,
-      y: 0,
-      width: 10,
-      height: 54,
-    });
-    expect(context.operations).toContainEqual({
-      type: "clip",
-      path: [["rect", 10, 0, 10, 54]],
-    });
-
-    context.operations = [];
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [[], []],
-      images: [
-        {
-          id: "png:test",
-          format: "png",
-          bounds: [0, 1, 1, 1],
-          visibleBounds: [0, 1, 1, 1],
-          scalingMode: "stretch",
-        },
-      ],
-    })));
-
-    expect(decodedBlobs).toHaveLength(1);
-    expect(drawImageOperations(context)).toEqual([
-      {
-        type: "drawImage",
-        imageId: "decoded-1",
-        x: 0,
-        y: 27,
-        width: 10,
-        height: 27,
-      },
-    ]);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime draws box and block elements procedurally instead of as font glyphs", async () => {
-  const dom = installFakeDOM();
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 4,
-      rows: 2,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {
-        fontSize: 20,
-        fontFamily: "Test Mono",
-      },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-
-    const canvas = dom.canvases[0]!;
-    const context = canvas.context;
-    context.operations = [];
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 2,
-      styles: [
-        null,
-        {
-          fg: "#EBB33CFF",
-        },
-      ],
-      rows: [
-        [
-          [0, "┌", 1, 1],
-          [1, "─", 1, 1],
-          [2, "▄", 1, 1],
-          [3, "A", 1, 1],
-        ],
-      ],
-      images: [],
-    })));
-
-    expect(fillTextOperations(context, "┌")).toEqual([]);
-    expect(fillTextOperations(context, "─")).toEqual([]);
-    expect(fillTextOperations(context, "▄")).toEqual([]);
-    expect(fillTextOperations(context, "A")).toHaveLength(1);
-
-    const boxFills = fillRectOperations(context, "#EBB33CFF");
-    expect(boxFills).toContainEqual({
-      type: "fillRect",
-      x: 4.5,
-      y: 13,
-      width: 5.5,
-      height: 1,
-      fillStyle: "#EBB33CFF",
-      globalAlpha: 1,
-    });
-    expect(boxFills).toContainEqual({
-      type: "fillRect",
-      x: 4.5,
-      y: 13,
-      width: 1,
-      height: 14,
-      fillStyle: "#EBB33CFF",
-      globalAlpha: 1,
-    });
-    expect(boxFills).toContainEqual({
-      type: "fillRect",
-      x: 10,
-      y: 13,
-      width: 5.5,
-      height: 1,
-      fillStyle: "#EBB33CFF",
-      globalAlpha: 1,
-    });
-    expect(boxFills).toContainEqual({
-      type: "fillRect",
-      x: 14.5,
-      y: 13,
-      width: 5.5,
-      height: 1,
-      fillStyle: "#EBB33CFF",
-      globalAlpha: 1,
-    });
-    expect(boxFills).toContainEqual({
-      type: "fillRect",
-      x: 20,
-      y: 13.5,
-      width: 10,
-      height: 13.5,
-      fillStyle: "#EBB33CFF",
-      globalAlpha: 1,
-    });
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime draws rounded box corners with the cell foreground stroke", async () => {
-  const dom = installFakeDOM();
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 4,
-      rows: 1,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {
-        fontSize: 20,
-        fontFamily: "Test Mono",
-      },
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-
-    const canvas = dom.canvases[0]!;
-    const context = canvas.context;
-    context.strokeStyle = "#000000";
-    context.operations = [];
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 1,
-      width: 4,
-      height: 1,
-      styles: [
-        null,
-        {
-          fg: "#EBB33CFF",
-        },
-      ],
-      rows: [
-        [
-          [0, "╭", 1, 1],
-          [1, "╮", 1, 1],
-        ],
-      ],
-      images: [],
-    })));
-
-    expect(fillTextOperations(context, "╭")).toEqual([]);
-    expect(fillTextOperations(context, "╮")).toEqual([]);
-    const strokes = context.operations.filter((operation) => operation.type === "stroke");
-    expect(strokes).toHaveLength(2);
-    expect(strokes.every((operation) => operation.strokeStyle === "#EBB33CFF")).toBe(true);
-    expect(strokes.every((operation) => operation.lineWidth === 1)).toBe(true);
-    expect(strokes.every((operation) => operation.lineDash instanceof Array)).toBe(true);
-    expect(strokes.every((operation) => (operation.lineDash as unknown[]).length === 0)).toBe(true);
-    expect(strokes.every((operation) => {
-      const path = operation.path as Array<[string, ...number[]]>;
-      return path.some(([command]) => command === "bezierCurveTo");
-    })).toBe(true);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime keeps diagnostic stdout visible when output is not a surface frame", async () => {
-  const dom = installFakeDOM();
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 4,
-      rows: 2,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {},
-      bridge,
-      onInput: () => {},
-    });
-
-    await runtime.mount();
-    bridge.stdout.write(encoder.encode("legacy output\n"));
-
-    const diagnostic = runtime.terminalMount.children.find(
-      (child) => child.className === "webhost-scene__diagnostic"
-    );
-    expect(diagnostic?.textContent).toBe("legacy output\n");
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime reports frame diagnostics without rendering them as terminal text", async () => {
-  const dom = installFakeDOM();
-  try {
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 4,
-      rows: 2,
-    });
-    const diagnostics: unknown[] = [];
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: {},
-      bridge,
-      onInput: () => {},
-      onFrameDiagnostic: (diagnostic) => diagnostics.push(diagnostic),
-    });
-
-    await runtime.mount();
-    bridge.stdout.write(encoder.encode(
-      '\u001EframeDiagnostic:{"format":"swift-tui-frame-diagnostics-v1",'
-        + '"header":["frame","total_ms"],"fields":["7","14.20"]}\n'
-    ));
-
-    expect(diagnostics).toEqual([
-      {
-        format: "swift-tui-frame-diagnostics-v1",
-        header: ["frame", "total_ms"],
-        fields: ["7", "14.20"],
-      },
-    ]);
-    expect(runtime.terminalMount.children.some(
-      (child) => child.className === "webhost-scene__diagnostic"
-    )).toBe(false);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime maps browser input events to web-surface messages", async () => {
-  const dom = installFakeDOM();
-  try {
-    const inputs: string[] = [];
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: { fontSize: 20 },
-      onInput: (chunk) => {
-        inputs.push(decoder.decode(chunk));
-      },
-    });
-
-    await runtime.mount();
-    runtime.resize(10, 4);
-
-    runtime.terminalMount.dispatch("keydown", {
-      key: "a",
-      shiftKey: true,
-      altKey: false,
-      ctrlKey: true,
-      metaKey: false,
-      isComposing: false,
-      preventDefault() {},
-    });
-    runtime.terminalMount.dispatch("paste", {
-      clipboardData: {
-        getData: () => "hello world",
-      },
-      preventDefault() {},
-    });
-    runtime.terminalMount.dispatch("pointerdown", pointerEvent({
-      button: 0,
-      buttons: 1,
-      clientX: 25,
-      clientY: 10,
-      pointerId: 7,
-    }));
-    runtime.terminalMount.dispatch("pointermove", pointerEvent({
-      buttons: 1,
-      clientX: 35,
-      clientY: 30,
-      pointerId: 7,
-    }));
-    runtime.terminalMount.dispatch("wheel", {
-      clientX: 35,
-      clientY: 30,
-      deltaX: 0,
-      deltaY: 20,
-      shiftKey: false,
-      altKey: true,
-      ctrlKey: false,
-      preventDefault() {},
-    });
-
-    expect(inputs).toEqual([
-      "\u001Ekey:character:a:5\n",
-      "\u001Epaste:hello%20world\n",
-      "\u001Emouse:down:2.5:0.37037037037037035:primary:0:0:0\n",
-      "\u001Emouse:dragged:3.5:1.1111111111111112:primary:0:0:0\n",
-      "\u001Emouse:scrolled:3.5:1.1111111111111112:none:0:1:2\n",
-    ]);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime can run as a passive embed without stealing focus or wheel scroll", async () => {
-  const dom = installFakeDOM();
-  try {
-    const inputs: string[] = [];
-    const bridge = new BrowserWASIBridge({
-      sceneId: "main",
-      columns: 4,
-      rows: 2,
-    });
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: { fontSize: 20 },
-      bridge,
-      onInput: (chunk) => {
-        inputs.push(decoder.decode(chunk));
-      },
-      synchronizeAccessibilityFocus: false,
-      captureWheelInput: false,
-    });
-
-    await runtime.mount();
-    bridge.stdout.write(encoder.encode(surfaceRecord({
-      version: 2,
-      width: 4,
-      height: 2,
-      styles: [null],
-      rows: [[], []],
-      accessibilityTree: [
-        {
-          id: "root/button",
-          rect: [0, 0, 2, 1],
-          role: "button",
-          label: "Save",
-          isFocused: true,
-        },
-      ],
-    })));
-
-    const tree = childWithClass(runtime.terminalMount, "webhost-scene__accessibility-tree");
-    const button = childWithData(tree, "accessibilityId", "root/button");
-    let wheelPrevented = false;
-
-    runtime.terminalMount.dispatch("wheel", {
-      clientX: 35,
-      clientY: 30,
-      deltaX: 0,
-      deltaY: 20,
-      shiftKey: false,
-      altKey: false,
-      ctrlKey: false,
-      preventDefault() {
-        wheelPrevented = true;
-      },
-    });
-
-    expect(button.focused).toBe(false);
-    expect(button.lastFocusOptions).toBeUndefined();
-    expect(inputs).toEqual([]);
-    expect(wheelPrevented).toBe(false);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("chain mode captures the wheel when a region under the pointer can scroll", async () => {
-  const dom = installFakeDOM();
-  try {
-    // Region covers the whole 4x2 surface; content is taller than the viewport
-    // and scrolled to the top, so a downward wheel has headroom.
-    const result = await wheelScenario({
-      wheelMode: "chain",
-      scrollRegions: [{ id: "list", rect: [0, 0, 4, 2], offset: [0, 0], content: [4, 10] }],
-      wheel: { clientX: 5, clientY: 5, deltaY: 20 },
-    });
-    expect(result.captured).toBe(true);
-    expect(result.wheelPrevented).toBe(true);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("chain mode lets the wheel fall through at the region's scroll edge", async () => {
-  const dom = installFakeDOM();
-  try {
-    // Same region, but scrolled to the bottom (offset.y == maxY == 10 - 2),
-    // so a further downward wheel has no headroom and must chain to the page.
-    const result = await wheelScenario({
-      wheelMode: "chain",
-      scrollRegions: [{ id: "list", rect: [0, 0, 4, 2], offset: [0, 8], content: [4, 10] }],
-      wheel: { clientX: 5, clientY: 5, deltaY: 20 },
-    });
-    expect(result.captured).toBe(false);
-    expect(result.wheelPrevented).toBe(false);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("chain mode captures an upward wheel when scrolled away from the top", async () => {
-  const dom = installFakeDOM();
-  try {
-    // At the bottom edge, downward chains but upward still has headroom.
-    const result = await wheelScenario({
-      wheelMode: "chain",
-      scrollRegions: [{ id: "list", rect: [0, 0, 4, 2], offset: [0, 8], content: [4, 10] }],
-      wheel: { clientX: 5, clientY: 5, deltaY: -20 },
-    });
-    expect(result.captured).toBe(true);
-    expect(result.wheelPrevented).toBe(true);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("chain mode falls through when the pointer is outside every scroll region", async () => {
-  const dom = installFakeDOM();
-  try {
-    // Region only covers the right half (cells x>=2); wheel at cell (0,0).
-    const result = await wheelScenario({
-      wheelMode: "chain",
-      scrollRegions: [{ id: "list", rect: [2, 0, 2, 2], offset: [0, 0], content: [2, 10] }],
-      wheel: { clientX: 5, clientY: 5, deltaY: 20 },
-    });
-    expect(result.captured).toBe(false);
-    expect(result.wheelPrevented).toBe(false);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("chain mode falls through when the scene publishes no scroll regions", async () => {
-  const dom = installFakeDOM();
-  try {
-    const result = await wheelScenario({
-      wheelMode: "chain",
-      wheel: { clientX: 5, clientY: 5, deltaY: 20 },
-    });
-    expect(result.captured).toBe(false);
-    expect(result.wheelPrevented).toBe(false);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("capture mode always eats the wheel even without scroll regions", async () => {
-  const dom = installFakeDOM();
-  try {
-    const result = await wheelScenario({
-      wheelMode: "capture",
-      wheel: { clientX: 5, clientY: 5, deltaY: 20 },
-    });
-    expect(result.captured).toBe(true);
-    expect(result.wheelPrevented).toBe(true);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("legacy captureWheelInput:true maps to capture mode", async () => {
-  const dom = installFakeDOM();
-  try {
-    const result = await wheelScenario({
-      captureWheelInput: true,
-      wheel: { clientX: 5, clientY: 5, deltaY: 20 },
-    });
-    expect(result.captured).toBe(true);
-    expect(result.wheelPrevented).toBe(true);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime preserves pointer movement within one cell", async () => {
-  const dom = installFakeDOM();
-  try {
-    const inputs: string[] = [];
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: { fontSize: 20 },
-      onInput: (chunk) => {
-        inputs.push(decoder.decode(chunk));
-      },
-    });
-
-    await runtime.mount();
-    runtime.resize(10, 4);
-
-    runtime.terminalMount.dispatch("pointermove", pointerEvent({
-      buttons: 1,
-      clientX: 21,
-      clientY: 27,
-      pointerId: 7,
-    }));
-    runtime.terminalMount.dispatch("pointermove", pointerEvent({
-      buttons: 1,
-      clientX: 27,
-      clientY: 27,
-      pointerId: 7,
-    }));
-
-    expect(inputs).toEqual([
-      "\u001Emouse:dragged:2.1:1:primary:0:0:0\n",
-      "\u001Emouse:dragged:2.7:1:primary:0:0:0\n",
-    ]);
-  } finally {
-    dom.restore();
-  }
-});
-
-test("runtime completes captured drags when pointerup lands outside the grid", async () => {
-  const dom = installFakeDOM();
-  try {
-    const inputs: string[] = [];
-    const mount = new FakeElement("div");
-    const runtime = new WebHostSceneRuntime({
-      mount: mount as unknown as HTMLElement,
-      descriptor: { id: "main", title: "Main", isDefault: true },
-      style: { fontSize: 20 },
-      onInput: (chunk) => {
-        inputs.push(decoder.decode(chunk));
-      },
-    });
-
-    await runtime.mount();
-    runtime.resize(10, 4);
-
-    runtime.terminalMount.dispatch("pointerdown", pointerEvent({
-      button: 0,
-      buttons: 1,
-      clientX: 25,
-      clientY: 10,
-      pointerId: 7,
-    }));
-    runtime.terminalMount.dispatch("pointermove", pointerEvent({
-      buttons: 1,
-      clientX: 35,
-      clientY: 30,
-      pointerId: 7,
-    }));
-    runtime.terminalMount.dispatch("pointerup", pointerEvent({
-      button: 0,
-      buttons: 0,
-      clientX: 125,
-      clientY: 30,
-      pointerId: 7,
-    }));
-
-    expect(inputs).toEqual([
-      "\u001Emouse:down:2.5:0.37037037037037035:primary:0:0:0\n",
-      "\u001Emouse:dragged:3.5:1.1111111111111112:primary:0:0:0\n",
-      "\u001Emouse:up:12.5:1.1111111111111112:primary:0:0:0\n",
-    ]);
-  } finally {
-    dom.restore();
-  }
-});
-
-function pointerEvent(
-  overrides: Record<string, unknown>
-): Record<string, unknown> {
-  return {
-    button: 0,
-    buttons: 0,
-    clientX: 0,
-    clientY: 0,
-    pointerId: 1,
-    shiftKey: false,
-    altKey: false,
-    ctrlKey: false,
-    preventDefault() {},
-    ...overrides,
-  };
-}
-
-function fillTextOperations(
-  context: RecordingCanvasContext,
-  text: string
-): RecordingCanvasOperation[] {
-  return context.operations.filter(
-    (operation) => operation.type === "fillText" && operation.text === text
-  );
-}
-
-function fillRectOperations(
-  context: RecordingCanvasContext,
-  fillStyle: string
-): RecordingCanvasOperation[] {
-  return context.operations.filter(
-    (operation) => operation.type === "fillRect" && operation.fillStyle === fillStyle
-  );
-}
-
-function drawImageOperations(
-  context: RecordingCanvasContext
-): RecordingCanvasOperation[] {
-  return context.operations.filter((operation) => operation.type === "drawImage");
-}
-
-function readCanvasTextLikePixels(
-  canvas: FakeCanvasElement
-): string {
-  const textSamples = new Map<string, { x: number; y: number; text: string }>();
-
-  for (const operation of canvas.context.operations) {
-    if (operation.type === "clearRect") {
-      const rect = operationRect(operation);
-      if (!rect) {
-        continue;
-      }
-      for (const [key, sample] of textSamples) {
-        if (textSampleInRect(sample, rect)) {
-          textSamples.delete(key);
-        }
-      }
-      continue;
-    }
-
-    if (operation.type !== "fillText" || typeof operation.text !== "string") {
-      continue;
-    }
-    const x = Number(operation.x);
-    const y = Number(operation.y);
-    if (!Number.isFinite(x) || !Number.isFinite(y)) {
-      continue;
-    }
-    textSamples.set(`${x}:${y}`, { x, y, text: operation.text });
-  }
-
-  const rows = new Map<number, Array<{ x: number; text: string }>>();
-  for (const sample of textSamples.values()) {
-    const row = rows.get(sample.y) ?? [];
-    row.push({ x: sample.x, text: sample.text });
-    rows.set(sample.y, row);
-  }
-
-  return Array.from(rows.entries())
-    .sort(([lhs], [rhs]) => lhs - rhs)
-    .map(([, row]) =>
-      row
-        .sort((lhs, rhs) => lhs.x - rhs.x)
-        .map((sample) => sample.text)
-        .join("")
-    )
-    .join("\n");
-}
-
-function operationRect(
-  operation: RecordingCanvasOperation
-): { x: number; y: number; width: number; height: number } | undefined {
-  const x = Number(operation.x);
-  const y = Number(operation.y);
-  const width = Number(operation.width);
-  const height = Number(operation.height);
-  if (
-    !Number.isFinite(x)
-    || !Number.isFinite(y)
-    || !Number.isFinite(width)
-    || !Number.isFinite(height)
-  ) {
-    return undefined;
-  }
-  return { x, y, width, height };
-}
-
-function textSampleInRect(
-  sample: { x: number; y: number },
-  rect: { x: number; y: number; width: number; height: number }
-): boolean {
-  return sample.x >= rect.x
-    && sample.x < rect.x + rect.width
-    && sample.y >= rect.y
-    && sample.y < rect.y + rect.height;
-}
-
-function childWithClass(
-  element: FakeElement,
-  className: string
-): FakeElement {
-  const child = element.children.find((child) => child.className === className);
-  if (!child) {
-    throw new Error(`missing child with class ${className}`);
-  }
-  return child;
-}
-
-function childWithData(
-  element: FakeElement,
-  key: string,
-  value: string
-): FakeElement {
-  const child = element.children.find((child) => child.dataset[key] === value);
-  if (!child) {
-    throw new Error(`missing child with data-${key} ${value}`);
-  }
-  return child;
-}
-
-async function flushPromises(): Promise<void> {
-  await Promise.resolve();
-  await Promise.resolve();
-}
-
-// Drives a single wheel event over a 4x2 surface (cellWidth 10, cellHeight 27
-// under the fake DOM) with the given wheel mode and published scroll regions,
-// and reports whether the wheel was forwarded to the app and/or preventDefault'd.
-// Assumes a fake DOM is already installed by the caller.
-async function wheelScenario(options: {
-  wheelMode?: WheelMode;
-  captureWheelInput?: boolean;
-  scrollRegions?: Array<Record<string, unknown>>;
-  wheel: { clientX: number; clientY: number; deltaX?: number; deltaY?: number };
-}): Promise<{ captured: boolean; wheelPrevented: boolean }> {
-  const inputs: string[] = [];
-  const bridge = new BrowserWASIBridge({ sceneId: "main", columns: 4, rows: 2 });
-  const mount = new FakeElement("div");
-  const runtime = new WebHostSceneRuntime({
-    mount: mount as unknown as HTMLElement,
-    descriptor: { id: "main", title: "Main", isDefault: true },
-    style: { fontSize: 20 },
-    bridge,
-    onInput: (chunk) => {
-      inputs.push(decoder.decode(chunk));
-    },
-    synchronizeAccessibilityFocus: false,
-    wheelMode: options.wheelMode,
-    captureWheelInput: options.captureWheelInput,
-  });
-
-  await runtime.mount();
-  const frame: Record<string, unknown> = {
-    version: 2,
-    width: 4,
-    height: 2,
-    styles: [null],
-    rows: [[], []],
-  };
-  if (options.scrollRegions) {
-    frame.scrollRegions = options.scrollRegions;
-  }
-  bridge.stdout.write(encoder.encode(surfaceRecord(frame)));
-
-  let wheelPrevented = false;
-  runtime.terminalMount.dispatch("wheel", {
-    clientX: options.wheel.clientX,
-    clientY: options.wheel.clientY,
-    deltaX: options.wheel.deltaX ?? 0,
-    deltaY: options.wheel.deltaY ?? 0,
-    shiftKey: false,
-    altKey: false,
-    ctrlKey: false,
-    preventDefault() {
-      wheelPrevented = true;
-    },
-  });
-
-  return { captured: inputs.some((i) => i.includes("scrolled")), wheelPrevented };
-}
-
-function surfaceRecord(
-  frame: Record<string, unknown>
-): string {
-  return `\u001Esurface:${JSON.stringify(frame)}\n`;
-}
-
-interface FakeDOMOptions {
-  devicePixelRatio?: number;
-  createImageBitmap?: (blob: Blob) => Promise<unknown>;
-}
-
-function installFakeDOM(
-  options: FakeDOMOptions = {}
-): {
-  canvases: FakeCanvasElement[];
-  restore(): void;
-} {
-  const previousDocument = globalThis.document;
-  const previousWindow = globalThis.window;
-  const previousResizeObserver = globalThis.ResizeObserver;
-  const previousCreateImageBitmap = globalThis.createImageBitmap;
-  const canvases: FakeCanvasElement[] = [];
-
-  globalThis.document = {
-    createElement: (tagName: string) => {
-      if (tagName === "canvas") {
-        const canvas = new FakeCanvasElement();
-        canvases.push(canvas);
-        return canvas;
-      }
-      return new FakeElement(tagName);
-    },
-  } as unknown as Document;
-  globalThis.window = {
-    devicePixelRatio: options.devicePixelRatio ?? 1,
-  } as unknown as Window & typeof globalThis;
-  globalThis.ResizeObserver = FakeResizeObserver as unknown as typeof ResizeObserver;
-  if (options.createImageBitmap) {
-    globalThis.createImageBitmap = options.createImageBitmap as typeof createImageBitmap;
-  }
-
-  return {
-    canvases,
-    restore: () => {
-      globalThis.document = previousDocument;
-      globalThis.window = previousWindow;
-      globalThis.ResizeObserver = previousResizeObserver;
-      globalThis.createImageBitmap = previousCreateImageBitmap;
-    },
-  };
-}
-
-class FakeResizeObserver {
-  observe(): void {}
-  disconnect(): void {}
-}
-
-class FakeStyle {
-  [key: string]: unknown;
-
-  private readonly values = new Map<string, string>();
-  private readonly priorities = new Map<string, string>();
-
-  setProperty(
-    name: string,
-    value: string,
-    priority?: string
-  ): void {
-    this.values.set(name, value);
-    this.priorities.set(name, priority ?? "");
-  }
-
-  getPropertyValue(
-    name: string
-  ): string {
-    return this.values.get(name) ?? "";
-  }
-
-  getPropertyPriority(
-    name: string
-  ): string {
-    return this.priorities.get(name) ?? "";
-  }
-}
-
-class FakeElement {
-  readonly tagName: string;
-  readonly style = new FakeStyle();
-  readonly dataset: Record<string, string> = {};
-  readonly children: FakeElement[] = [];
-  private readonly eventListeners = new Map<string, Set<(event: Record<string, unknown>) => void>>();
-  private readonly attributes = new Map<string, string>();
-
-  className = "";
-  id = "";
-  hidden = false;
-  focused = false;
-  lastFocusOptions: FocusOptions | undefined;
-  tabIndex = 0;
-  textContent = "";
-  rect = {
-    left: 0,
-    top: 0,
-    width: 100,
-    height: 108,
-    right: 100,
-    bottom: 108,
-  };
-
-  constructor(tagName: string) {
-    this.tagName = tagName.toUpperCase();
-  }
-
-  append(
-    ...children: FakeElement[]
-  ): void {
-    this.children.push(...children);
-  }
-
-  appendChild(
-    child: FakeElement
-  ): FakeElement {
-    this.children.push(child);
-    return child;
-  }
-
-  replaceChildren(
-    ...children: FakeElement[]
-  ): void {
-    this.children.splice(0, this.children.length, ...children);
-  }
-
-  remove(): void {}
-  focus(options?: FocusOptions): void {
-    this.focused = true;
-    this.lastFocusOptions = options;
-  }
-  setPointerCapture(): void {}
-  releasePointerCapture(): void {}
-
-  setAttribute(
-    name: string,
-    value: string
-  ): void {
-    this.attributes.set(name, value);
-  }
-
-  getAttribute(
-    name: string
-  ): string | null {
-    return this.attributes.get(name) ?? null;
-  }
-
-  getBoundingClientRect(): typeof this.rect {
-    return this.rect;
-  }
-
-  addEventListener(
-    type: string,
-    listener: (event: Record<string, unknown>) => void
-  ): void {
-    let listeners = this.eventListeners.get(type);
-    if (!listeners) {
-      listeners = new Set();
-      this.eventListeners.set(type, listeners);
-    }
-    listeners.add(listener);
-  }
-
-  removeEventListener(
-    type: string,
-    listener: (event: Record<string, unknown>) => void
-  ): void {
-    this.eventListeners.get(type)?.delete(listener);
-  }
-
-  dispatch(
-    type: string,
-    event: Record<string, unknown>
-  ): void {
-    for (const listener of this.eventListeners.get(type) ?? []) {
-      listener(event);
-    }
-  }
-}
-
-class FakeCanvasElement extends FakeElement {
-  readonly context = new RecordingCanvasContext();
-  width = 0;
-  height = 0;
-
-  constructor() {
-    super("canvas");
-    this.rect = {
-      left: 0,
-      top: 0,
-      width: 100,
-      height: 108,
-      right: 100,
-      bottom: 108,
-    };
-  }
-
-  getContext(
-    contextId: string
-  ): RecordingCanvasContext | undefined {
-    return contextId === "2d" ? this.context : undefined;
-  }
-}
-
-type RecordingCanvasOperation = Record<string, unknown>;
-
-class RecordingCanvasContext {
-  operations: RecordingCanvasOperation[] = [];
-  fillStyle = "";
-  strokeStyle = "";
-  font = "";
-  textBaseline = "";
-  globalAlpha = 1;
-  lineWidth = 1;
-  lineCap = "butt";
-
-  private lineDash: number[] = [];
-  private path: Array<[string, ...number[]]> = [];
-
-  measureText(
-    text: string
-  ): { width: number } {
-    return { width: Math.max(1, Array.from(text).length) * 10 };
-  }
-
-  setTransform(
-    a: number,
-    b: number,
-    c: number,
-    d: number,
-    e: number,
-    f: number
-  ): void {
-    this.operations.push({ type: "setTransform", a, b, c, d, e, f });
-  }
-
-  clearRect(
-    x: number,
-    y: number,
-    width: number,
-    height: number
-  ): void {
-    this.operations.push({ type: "clearRect", x, y, width, height });
-  }
-
-  fillRect(
-    x: number,
-    y: number,
-    width: number,
-    height: number
-  ): void {
-    this.operations.push({
-      type: "fillRect",
-      x,
-      y,
-      width,
-      height,
-      fillStyle: this.fillStyle,
-      globalAlpha: this.globalAlpha,
-    });
-  }
-
-  fillText(
-    text: string,
-    x: number,
-    y: number
-  ): void {
-    this.operations.push({
-      type: "fillText",
-      text,
-      x,
-      y,
-      fillStyle: this.fillStyle,
-      font: this.font,
-      globalAlpha: this.globalAlpha,
-    });
-  }
-
-  beginPath(): void {
-    this.path = [];
-  }
-
-  save(): void {
-    this.operations.push({ type: "save" });
-  }
-
-  restore(): void {
-    this.operations.push({ type: "restore" });
-  }
-
-  rect(
-    x: number,
-    y: number,
-    width: number,
-    height: number
-  ): void {
-    this.path.push(["rect", x, y, width, height]);
-    this.operations.push({ type: "rect", x, y, width, height });
-  }
-
-  clip(): void {
-    this.operations.push({
-      type: "clip",
-      path: [...this.path],
-    });
-  }
-
-  drawImage(
-    image: unknown,
-    x: number,
-    y: number,
-    width: number,
-    height: number
-  ): void {
-    this.operations.push({
-      type: "drawImage",
-      imageId: image && typeof image === "object" && "imageId" in image
-        ? (image as { imageId: unknown }).imageId
-        : undefined,
-      x,
-      y,
-      width,
-      height,
-    });
-  }
-
-  moveTo(
-    x: number,
-    y: number
-  ): void {
-    this.path.push(["moveTo", x, y]);
-  }
-
-  lineTo(
-    x: number,
-    y: number
-  ): void {
-    this.path.push(["lineTo", x, y]);
-  }
-
-  bezierCurveTo(
-    control1X: number,
-    control1Y: number,
-    control2X: number,
-    control2Y: number,
-    x: number,
-    y: number
-  ): void {
-    this.path.push(["bezierCurveTo", control1X, control1Y, control2X, control2Y, x, y]);
-  }
-
-  stroke(): void {
-    this.operations.push({
-      type: "stroke",
-      strokeStyle: this.strokeStyle,
-      lineWidth: this.lineWidth,
-      lineDash: [...this.lineDash],
-      path: [...this.path],
-    });
-  }
-
-  setLineDash(
-    lineDash: number[]
-  ): void {
-    this.lineDash = [...lineDash];
-  }
-}