@flighthq/scene2d-wgpu 0.2.1-next.840.857425c

package/src/wgpuShape.test.ts

@@ -0,0 +1,96 @@
+import { createImageResource } from '@flighthq/image';
+import type * as FlightNodeModule from '@flighthq/node';
+import { renderWgpuBackground, submitWgpuRenderPass } from '@flighthq/render-wgpu';
+import { getWgpuRenderStateRuntime } from '@flighthq/render-wgpu';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import type { RenderProxy2D } from '@flighthq/types';
+import { BatchFormat } from '@flighthq/types';
+
+import { scopeModuleMocks } from './moduleMockTestHelper';
+import { registerDefaultWgpuMaterial } from './wgpuDefaultMaterial';
+import type * as WgpuShapeModule from './wgpuShape';
+
+// @flighthq/node's bounds/revision queries expect a real BoundsNode; these tests drive drawWgpuShape
+// with lightweight fake proxies, so the two queries are stubbed. scopeModuleMocks scopes the stub to
+// this file (registry reset before the mock applies, unmock + reset after), so under a shared
+// (isolate:false) worker it never leaks into the many real consumers of these functions (node,
+// interaction, shape, text) — and a sibling that pre-evaluated ./wgpuShape still picks up the stub.
+let defaultWgpuShapeRenderer: typeof WgpuShapeModule.defaultWgpuShapeRenderer;
+let drawWgpuShape: typeof WgpuShapeModule.drawWgpuShape;
+
+scopeModuleMocks(['@flighthq/node']);
+
+beforeAll(async () => {
+  vi.doMock('@flighthq/node', async (importOriginal) => ({
+    ...(await importOriginal<typeof FlightNodeModule>()),
+    getNodeLocalBoundsRectangle: () => ({ x: 0, y: 0, width: 64, height: 48 }),
+    getNodeLocalContentRevision: (source: any) => source?.data?.version ?? 0,
+  }));
+  ({ defaultWgpuShapeRenderer, drawWgpuShape } = await import('./wgpuShape'));
+  installWgpuMock();
+});
+
+function makeShapeData() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext('2d')!;
+  return { canvas, ctx, image: createImageResource(canvas), lastContentId: -1, lastW: 0, lastH: 0 };
+}
+
+function makeShapeProxy(data: Record<string, unknown> = {}, rendererData: unknown = null): RenderProxy2D {
+  return {
+    source: { data: { commands: [], version: 0, ...data } },
+    blendMode: 0,
+    alpha: 1,
+    material: null,
+    materialData: null,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+    rendererData,
+  } as unknown as RenderProxy2D;
+}
+
+describe('defaultWgpuShapeRenderer', () => {
+  it('declares BatchFormat.Quad', () => {
+    expect(defaultWgpuShapeRenderer.format).toBe(BatchFormat.Quad);
+  });
+
+  it('has createData and submit functions', () => {
+    expect(typeof defaultWgpuShapeRenderer.createData).toBe('function');
+    expect(typeof defaultWgpuShapeRenderer.submit).toBe('function');
+  });
+});
+
+describe('drawWgpuShape', () => {
+  it('returns early without writing to batch when commands are empty', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    registerDefaultWgpuMaterial(state);
+    drawWgpuShape(state, makeShapeProxy({ commands: [] }, makeShapeData()));
+    expect(getWgpuRenderStateRuntime(state).spriteBatchCount).toBe(0);
+    submitWgpuRenderPass(state);
+  });
+
+  it('returns early without writing to batch when rendererData is null', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    registerDefaultWgpuMaterial(state);
+    drawWgpuShape(state, makeShapeProxy({ commands: [{}] }, null));
+    expect(getWgpuRenderStateRuntime(state).spriteBatchCount).toBe(0);
+    submitWgpuRenderPass(state);
+  });
+
+  it('does not throw when renderPass is null', async () => {
+    const state = await createWgpuRenderStateForTest();
+    expect(() => drawWgpuShape(state, makeShapeProxy({ commands: [{}] }, makeShapeData()))).not.toThrow();
+  });
+
+  it('writes one instance to the sprite batch when shape has valid commands and bounds', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    registerDefaultWgpuMaterial(state);
+    drawWgpuShape(state, makeShapeProxy({ commands: [{}], version: 1 }, makeShapeData()));
+    expect(getWgpuRenderStateRuntime(state).spriteBatchCount).toBe(1);
+    submitWgpuRenderPass(state);
+  });
+});

package/src/wgpuShapeMesh.test.ts

@@ -0,0 +1,164 @@
+import { createMatrix } from '@flighthq/geometry';
+import { getWgpuRenderStateRuntime } from '@flighthq/render-wgpu';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import type { RenderProxy2D, WgpuRenderState, WgpuShapeMeshBuffers } from '@flighthq/types';
+import type { WgpuShapeMesh } from '@flighthq/types';
+import { BlendMode } from '@flighthq/types';
+
+import { drawWgpuShapeMeshes } from './wgpuShapeMesh';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+const TRIANGLE: WgpuShapeMesh = {
+  vertices: new Float32Array([0, 0, 10, 0, 0, 10]),
+  indices: new Uint16Array([0, 1, 2]),
+  color: 0xff8040,
+  alpha: 1,
+};
+
+function makeBuffers(): WgpuShapeMeshBuffers {
+  return {
+    vertexBuffer: null,
+    vertexCapacity: 0,
+    indexBuffer: null,
+    indexCapacity: 0,
+    uniformBuffer: null,
+    bindGroup: null,
+  };
+}
+
+function makePassSpy(): GPURenderPassEncoder {
+  return {
+    setPipeline: vi.fn(),
+    setBindGroup: vi.fn(),
+    setVertexBuffer: vi.fn(),
+    setIndexBuffer: vi.fn(),
+    setStencilReference: vi.fn(),
+    draw: vi.fn(),
+    drawIndexed: vi.fn(),
+  } as unknown as GPURenderPassEncoder;
+}
+
+function makeProxy(matrix = createMatrix(), alpha = 1, blendMode: BlendMode | null = null): RenderProxy2D {
+  return { alpha, blendMode, transform2D: matrix } as unknown as RenderProxy2D;
+}
+
+async function makeState(): Promise<WgpuRenderState> {
+  const state = await createWgpuRenderStateForTest();
+  getWgpuRenderStateRuntime(state).renderPass = makePassSpy();
+  return state;
+}
+
+describe('drawWgpuShapeMeshes', () => {
+  it('sets the shape-mesh pipeline and draws each mesh', async () => {
+    const state = await makeState();
+    const runtime = getWgpuRenderStateRuntime(state);
+    const pass = runtime.renderPass as unknown as {
+      setPipeline: ReturnType<typeof vi.fn>;
+      drawIndexed: ReturnType<typeof vi.fn>;
+    };
+
+    drawWgpuShapeMeshes(state, makeProxy(), [TRIANGLE, TRIANGLE], makeBuffers());
+
+    expect(pass.setPipeline).toHaveBeenCalled();
+    expect(runtime.shapeMeshPipelines?.size ?? 0).toBeGreaterThan(0);
+    expect(pass.drawIndexed).toHaveBeenCalledTimes(2);
+    expect(pass.drawIndexed).toHaveBeenCalledWith(3);
+  });
+
+  it('retires grown geometry buffers until the recorded frame is submitted', async () => {
+    const state = await makeState();
+    const buffers = makeBuffers();
+    const createBuffer = state.device.createBuffer.bind(state.device);
+    vi.spyOn(state.device, 'createBuffer').mockImplementation((descriptor) => {
+      const buffer = createBuffer(descriptor);
+      buffer.destroy = vi.fn();
+      return buffer;
+    });
+    const larger: WgpuShapeMesh = {
+      ...TRIANGLE,
+      vertices: new Float32Array([...TRIANGLE.vertices, 10, 10]),
+      indices: new Uint16Array([0, 1, 2, 1, 3, 2]),
+    };
+
+    drawWgpuShapeMeshes(state, makeProxy(), [TRIANGLE, larger], buffers);
+
+    const retired = getWgpuRenderStateRuntime(state).retiredBuffers!;
+    expect(retired).toHaveLength(2);
+    for (const buffer of retired) {
+      expect(buffer.destroy).not.toHaveBeenCalled();
+    }
+  });
+
+  it('gates the fill by the active contour-clip stencil reference', async () => {
+    const state = await makeState();
+    const runtime = getWgpuRenderStateRuntime(state);
+    runtime.currentMaskDepth = 2;
+    const pass = runtime.renderPass as unknown as { setStencilReference: ReturnType<typeof vi.fn> };
+
+    drawWgpuShapeMeshes(state, makeProxy(), [TRIANGLE], makeBuffers());
+
+    expect(pass.setStencilReference).toHaveBeenCalledWith(2);
+  });
+
+  it('bakes the node blend mode into a distinct shape pipeline', async () => {
+    const state = await makeState();
+
+    drawWgpuShapeMeshes(state, makeProxy(createMatrix(), 1, BlendMode.Normal), [TRIANGLE], makeBuffers());
+    drawWgpuShapeMeshes(state, makeProxy(createMatrix(), 1, BlendMode.Add), [TRIANGLE], makeBuffers());
+
+    const pipelines = [...getWgpuRenderStateRuntime(state).shapeMeshPipelines!.values()].map(
+      (entry) => entry.pipeline,
+    ) as unknown as { __descriptor: GPURenderPipelineDescriptor }[];
+    expect(pipelines).toHaveLength(2);
+    const blends = pipelines.map((pipeline) => [...pipeline.__descriptor.fragment!.targets][0]!.blend!.color);
+    expect(blends).toContainEqual({ srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' });
+    expect(blends).toContainEqual({ srcFactor: 'one', dstFactor: 'one', operation: 'add' });
+  });
+
+  it('writes premultiplied color (color * alpha) into the uniform buffer', async () => {
+    const state = await makeState();
+    const buffers = makeBuffers();
+    const writes = new Map<GPUBuffer, Float32Array>();
+    state.device.queue.writeBuffer = vi.fn((buffer: GPUBuffer, _offset: number, data: BufferSource) => {
+      const view = ArrayBuffer.isView(data) ? data : new Uint8Array(data as ArrayBuffer);
+      // Only the uniform write is inspected; record a copy keyed by its destination buffer.
+      if (view.byteLength % 4 === 0) {
+        writes.set(buffer, new Float32Array(view.buffer.slice(view.byteOffset, view.byteOffset + view.byteLength)));
+      }
+    }) as unknown as GPUQueue['writeBuffer'];
+
+    drawWgpuShapeMeshes(state, makeProxy(createMatrix(), 0.5), [{ ...TRIANGLE, color: 0xffffff }], buffers);
+
+    const uniformData = writes.get(buffers.uniformBuffer!);
+    expect(uniformData).toBeDefined();
+    // Color occupies floats 12..15 (after the mat3x3f columns): premultiplied (0.5, 0.5, 0.5, 0.5).
+    const color = uniformData!.slice(12, 16);
+    expect(color[0]).toBeCloseTo(0.5);
+    expect(color[1]).toBeCloseTo(0.5);
+    expect(color[2]).toBeCloseTo(0.5);
+    expect(color[3]).toBeCloseTo(0.5);
+  });
+
+  it('skips fully transparent meshes', async () => {
+    const state = await makeState();
+    const pass = getWgpuRenderStateRuntime(state).renderPass as unknown as { drawIndexed: ReturnType<typeof vi.fn> };
+
+    drawWgpuShapeMeshes(state, makeProxy(), [{ ...TRIANGLE, alpha: 0 }], makeBuffers());
+
+    expect(pass.drawIndexed).not.toHaveBeenCalled();
+  });
+
+  it('is a no-op for an empty mesh list', async () => {
+    const state = await makeState();
+    const runtime = getWgpuRenderStateRuntime(state);
+    const pass = runtime.renderPass as unknown as { setPipeline: ReturnType<typeof vi.fn> };
+
+    drawWgpuShapeMeshes(state, makeProxy(), [], makeBuffers());
+
+    expect(pass.setPipeline).not.toHaveBeenCalled();
+    expect(runtime.shapeMeshPipelines?.size ?? 0).toBe(0);
+  });
+});

package/src/wgpuSprite.test.ts

@@ -0,0 +1,19 @@
+import { renderWgpuBackground, submitWgpuRenderPass } from '@flighthq/render-wgpu';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import { createSprite } from '@flighthq/sprite';
+
+import { renderWgpuSprite } from './wgpuSprite';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('renderWgpuSprite', () => {
+  it('traverses a sprite node without error', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const root = createSprite();
+    expect(() => renderWgpuSprite(state, root)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+});

package/src/wgpuSpriteBatch.test.ts

@@ -0,0 +1,272 @@
+import { createImageResource } from '@flighthq/image';
+import { renderWgpuBackground, submitWgpuRenderPass } from '@flighthq/render-wgpu';
+import { getWgpuRenderStateRuntime } from '@flighthq/render-wgpu';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import type { ColorTransform, Material } from '@flighthq/types';
+import { BlendMode } from '@flighthq/types';
+
+import { enableWgpuColorAdjustment } from './wgpuColorAdjustment';
+import { defaultWgpuMaterialRenderer } from './wgpuDefaultMaterial';
+import {
+  ensureWgpuQuadBatchResources,
+  flushWgpuSpriteBatch,
+  getWgpuQuadBatchPipeline,
+  getWgpuQuadBatchPreludeWGSL,
+  packWgpuSpriteBatchMaterialInstance,
+  prepareWgpuSpriteBatchWrite,
+  recordWgpuSpriteBatchColorTransform,
+  resetWgpuSpriteBatchBufferPool,
+} from './wgpuSpriteBatch';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+function makeMaterial(): Material {
+  return { kind: 'TestMaterial' } as Material;
+}
+
+function ct(
+  redMultiplier = 1,
+  greenMultiplier = 1,
+  blueMultiplier = 1,
+  alphaMultiplier = 1,
+  redOffset = 0,
+  greenOffset = 0,
+  blueOffset = 0,
+  alphaOffset = 0,
+): ColorTransform {
+  return {
+    redMultiplier,
+    greenMultiplier,
+    blueMultiplier,
+    alphaMultiplier,
+    redOffset,
+    greenOffset,
+    blueOffset,
+    alphaOffset,
+  } as ColorTransform;
+}
+
+const CT_MODE_NONE = 0;
+const CT_MODE_UNIFORM = 1;
+
+describe('ensureWgpuQuadBatchResources', () => {
+  it('returns resources with bind group layouts and a pipelines WeakMap', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const resources = ensureWgpuQuadBatchResources(state);
+    expect(resources.instanceBindGroupLayout).toBeDefined();
+    expect(resources.materialBindGroupLayout).toBeDefined();
+    expect(resources.basePipelineLayout).toBeDefined();
+    expect(resources.materialPipelineLayout).toBeDefined();
+    expect(resources.pipelines).toBeInstanceOf(WeakMap);
+  });
+
+  it('is idempotent — returns the same resources on repeated calls', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const r1 = ensureWgpuQuadBatchResources(state);
+    const r2 = ensureWgpuQuadBatchResources(state);
+    expect(r1).toBe(r2);
+  });
+});
+
+describe('flushWgpuSpriteBatch', () => {
+  it('does nothing when batch count is zero', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    expect(() => flushWgpuSpriteBatch(state)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+
+  it('resets state after flush', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const runtime = getWgpuRenderStateRuntime(state);
+    const tex = createImageResource(document.createElement('img'));
+
+    prepareWgpuSpriteBatchWrite(state, tex, null, null, defaultWgpuMaterialRenderer, 1);
+    runtime.spriteBatchCount = 1;
+    flushWgpuSpriteBatch(state);
+
+    expect(runtime.spriteBatchCount).toBe(0);
+    expect(runtime.spriteBatchTexture).toBeNull();
+    expect(runtime.spriteBatchBlendMode).toBeNull();
+    expect(runtime.spriteBatchMaterial).toBeNull();
+    submitWgpuRenderPass(state);
+  });
+
+  it('claims a distinct buffer per flush so deferred draws never share one', async () => {
+    // The canvas pass is submitted once at end of frame; if successive flushes reused one instance
+    // buffer, every draw would read the last flush's data and the batch would collapse to one spot.
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const runtime = getWgpuRenderStateRuntime(state);
+    const tex1 = createImageResource(document.createElement('img'));
+    const tex2 = createImageResource(document.createElement('img'));
+
+    prepareWgpuSpriteBatchWrite(state, tex1, null, null, defaultWgpuMaterialRenderer, 1);
+    runtime.spriteBatchCount = 1;
+    flushWgpuSpriteBatch(state);
+
+    prepareWgpuSpriteBatchWrite(state, tex2, null, null, defaultWgpuMaterialRenderer, 1);
+    runtime.spriteBatchCount = 1;
+    flushWgpuSpriteBatch(state);
+
+    expect(runtime.spriteBatchBufferCursor).toBe(2);
+    expect(runtime.spriteBatchBufferPool[0].instanceBuffer).not.toBeNull();
+    expect(runtime.spriteBatchBufferPool[0].instanceBuffer).not.toBe(runtime.spriteBatchBufferPool[1].instanceBuffer);
+    submitWgpuRenderPass(state);
+  });
+});
+
+describe('getWgpuQuadBatchPipeline', () => {
+  it('creates and caches a pipeline for a given shader module', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const resources = ensureWgpuQuadBatchResources(state);
+    const module = state.device.createShaderModule({ code: '' });
+    const pipeline = getWgpuQuadBatchPipeline(state, resources, module, false, null);
+    expect(pipeline).toBeDefined();
+    const pipeline2 = getWgpuQuadBatchPipeline(state, resources, module, false, null);
+    expect(pipeline2).toBe(pipeline);
+  });
+
+  it('uses the shared fixed-function blend table for every batch mode', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const resources = ensureWgpuQuadBatchResources(state);
+    const module = state.device.createShaderModule({ code: '' });
+    const blendOf = (mode: BlendMode) => {
+      const pipeline = getWgpuQuadBatchPipeline(state, resources, module, false, mode) as unknown as {
+        __descriptor: GPURenderPipelineDescriptor;
+      };
+      return [...pipeline.__descriptor.fragment!.targets][0]!.blend!.color;
+    };
+
+    expect(blendOf(BlendMode.Multiply)).toEqual({
+      srcFactor: 'dst',
+      dstFactor: 'one-minus-src-alpha',
+      operation: 'add',
+    });
+    expect(blendOf(BlendMode.Screen)).toEqual({
+      srcFactor: 'one',
+      dstFactor: 'one-minus-src',
+      operation: 'add',
+    });
+    expect(blendOf(BlendMode.Darken).operation).toBe('min');
+    expect(blendOf(BlendMode.Lighten).operation).toBe('max');
+  });
+});
+
+describe('getWgpuQuadBatchPreludeWGSL', () => {
+  it('returns the shared WGSL prelude string containing the base structs', () => {
+    const wgsl = getWgpuQuadBatchPreludeWGSL();
+    expect(typeof wgsl).toBe('string');
+    expect(wgsl).toContain('struct Uniforms');
+    expect(wgsl).toContain('quadBaseVertex');
+    expect(wgsl).toContain('straightTextureAlpha : u32');
+  });
+});
+
+describe('packWgpuSpriteBatchMaterialInstance', () => {
+  it('is a no-op when no per-instance material data is active', async () => {
+    const state = await createWgpuRenderStateForTest();
+    expect(() => packWgpuSpriteBatchMaterialInstance(state, null, 0)).not.toThrow();
+  });
+});
+
+describe('prepareWgpuSpriteBatchWrite', () => {
+  it('returns float index 0 for an empty batch', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const tex = createImageResource(document.createElement('img'));
+
+    const base = prepareWgpuSpriteBatchWrite(state, tex, null, null, defaultWgpuMaterialRenderer, 1);
+    expect(base).toBe(0);
+  });
+
+  it('flushes when texture changes', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const runtime = getWgpuRenderStateRuntime(state);
+    const tex1 = createImageResource(document.createElement('img'));
+    const tex2 = createImageResource(document.createElement('img'));
+
+    prepareWgpuSpriteBatchWrite(state, tex1, null, null, defaultWgpuMaterialRenderer, 1);
+    runtime.spriteBatchCount = 1;
+    prepareWgpuSpriteBatchWrite(state, tex2, null, null, defaultWgpuMaterialRenderer, 1);
+
+    expect(runtime.spriteBatchTexture).toBe(tex2);
+    expect(runtime.spriteBatchCount).toBe(0);
+    submitWgpuRenderPass(state);
+  });
+
+  it('flushes when material changes', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const runtime = getWgpuRenderStateRuntime(state);
+    const tex = createImageResource(document.createElement('img'));
+    const materialA = makeMaterial();
+    const materialB = makeMaterial();
+
+    prepareWgpuSpriteBatchWrite(state, tex, null, materialA, defaultWgpuMaterialRenderer, 1);
+    runtime.spriteBatchCount = 1;
+    prepareWgpuSpriteBatchWrite(state, tex, null, materialB, defaultWgpuMaterialRenderer, 1);
+
+    expect(runtime.spriteBatchMaterial).toBe(materialB);
+    expect(runtime.spriteBatchCount).toBe(0);
+    submitWgpuRenderPass(state);
+  });
+});
+
+describe('recordWgpuSpriteBatchColorTransform', () => {
+  it('skips the tint and records no fold state when color adjustment is not enabled', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const runtime = getWgpuRenderStateRuntime(state);
+    recordWgpuSpriteBatchColorTransform(state, ct(0.5), 0);
+    expect(runtime.spriteBatchColorTransformMode ?? CT_MODE_NONE).toBe(CT_MODE_NONE);
+  });
+
+  it('is a no-op for an untinted instance whether or not the fold is enabled', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const runtime = getWgpuRenderStateRuntime(state);
+    expect(() => recordWgpuSpriteBatchColorTransform(state, null, 0)).not.toThrow();
+    expect(runtime.spriteBatchColorTransformMode ?? CT_MODE_NONE).toBe(CT_MODE_NONE);
+  });
+
+  it('delegates to the installed fold when color adjustment is enabled', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const runtime = getWgpuRenderStateRuntime(state);
+    enableWgpuColorAdjustment(state);
+    recordWgpuSpriteBatchColorTransform(state, ct(0.5), 0);
+    expect(runtime.spriteBatchColorTransformMode).toBe(CT_MODE_UNIFORM);
+  });
+
+  it('an untinted batch on flush uses the lean material module (no fold)', async () => {
+    const state = await createWgpuRenderStateForTest();
+    enableWgpuColorAdjustment(state);
+    renderWgpuBackground(state);
+    const runtime = getWgpuRenderStateRuntime(state);
+    const tex = createImageResource(document.createElement('img'));
+    prepareWgpuSpriteBatchWrite(state, tex, null, null, defaultWgpuMaterialRenderer, 1);
+    recordWgpuSpriteBatchColorTransform(state, null, 0);
+    runtime.spriteBatchCount = 1;
+    expect(() => flushWgpuSpriteBatch(state)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+});
+
+describe('resetWgpuSpriteBatchBufferPool', () => {
+  it('rewinds the pool cursor so slots are reclaimed next frame', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const runtime = getWgpuRenderStateRuntime(state);
+    const tex = createImageResource(document.createElement('img'));
+
+    prepareWgpuSpriteBatchWrite(state, tex, null, null, defaultWgpuMaterialRenderer, 1);
+    runtime.spriteBatchCount = 1;
+    flushWgpuSpriteBatch(state);
+    expect(runtime.spriteBatchBufferCursor).toBe(1);
+
+    resetWgpuSpriteBatchBufferPool(state);
+    expect(runtime.spriteBatchBufferCursor).toBe(0);
+    submitWgpuRenderPass(state);
+  });
+});

package/src/wgpuSpriteRenderer.test.ts

@@ -0,0 +1,63 @@
+import { createImageResource } from '@flighthq/image';
+import { getRenderProxy2D, prepareScene2DRender } from '@flighthq/render';
+import { getWgpuRenderStateRuntime, renderWgpuBackground, submitWgpuRenderPass } from '@flighthq/render-wgpu';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import { createSprite } from '@flighthq/sprite';
+import type { TextureAtlas } from '@flighthq/types';
+
+import { registerDefaultWgpuMaterial } from './wgpuDefaultMaterial';
+import { flushWgpuSpriteBatch } from './wgpuSpriteBatch';
+import { defaultWgpuSpriteRenderer } from './wgpuSpriteRenderer';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('defaultWgpuSpriteRenderer', () => {
+  it('has a createData function', () => {
+    expect(typeof defaultWgpuSpriteRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function', () => {
+    expect(typeof defaultWgpuSpriteRenderer.submit).toBe('function');
+  });
+});
+
+describe('defaultWgpuSpriteRenderer.submit', () => {
+  it('does not throw when atlas is null', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+
+    const sprite = createSprite();
+    prepareScene2DRender(state, sprite);
+    const renderProxy = getRenderProxy2D(state, sprite)!;
+
+    expect(() => {
+      defaultWgpuSpriteRenderer.submit(state, renderProxy);
+      flushWgpuSpriteBatch(state as any);
+    }).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+
+  it('folds the region pivot through the sprite transform into batch translation', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    registerDefaultWgpuMaterial(state);
+    const atlas = {
+      image: createImageResource(document.createElement('img')),
+      regions: [{ height: 32, id: 0, name: null, pivotX: 7, pivotY: 9, width: 32, x: 0, y: 0 }],
+    };
+    const sprite = createSprite();
+    sprite.data.atlas = atlas as unknown as TextureAtlas;
+    prepareScene2DRender(state, sprite);
+    const renderProxy = getRenderProxy2D(state, sprite)!;
+    Object.assign(renderProxy.transform2D, { a: 2, b: 3, c: 4, d: 5, tx: 100, ty: 200 });
+
+    defaultWgpuSpriteRenderer.submit(state, renderProxy);
+
+    const data = getWgpuRenderStateRuntime(state).spriteBatchInstanceData;
+    expect(data[4]).toBe(50);
+    expect(data[5]).toBe(134);
+    submitWgpuRenderPass(state);
+  });
+});

package/src/wgpuTextInput.test.ts

@@ -0,0 +1,37 @@
+import { getOrCreateRenderProxy2D, prepareScene2DRender } from '@flighthq/render';
+import { renderWgpuBackground, submitWgpuRenderPass } from '@flighthq/render-wgpu';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import { createRichText } from '@flighthq/text';
+import { enableTextInput } from '@flighthq/textinput';
+
+import { drawWgpuRichText } from './wgpuRichText';
+import { drawWgpuTextInputOverlay, enableWgpuTextInput } from './wgpuTextInput';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('drawWgpuTextInputOverlay', () => {
+  it('is the installed overlay function', () => {
+    expect(typeof drawWgpuTextInputOverlay).toBe('function');
+  });
+
+  it('rasterizes a focused editable field without throwing', async () => {
+    enableWgpuTextInput();
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const input = createRichText({ data: { height: 40, text: 'hi', width: 100 } });
+    enableTextInput(input).focused = true;
+    prepareScene2DRender(state, input);
+    const renderProxy = getOrCreateRenderProxy2D(state, input);
+
+    expect(() => drawWgpuRichText(state, renderProxy)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+});
+
+describe('enableWgpuTextInput', () => {
+  it('installs the overlay without throwing', () => {
+    expect(() => enableWgpuTextInput()).not.toThrow();
+  });
+});