@flighthq/displayobject-wgpu 0.1.0

package/src/wgpuRegistration.test.ts

@@ -0,0 +1,115 @@
+import { getRenderStateRuntime } from '@flighthq/render';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import {
+  BitmapKind,
+  DisplayObjectKind,
+  ParticleEmitterKind,
+  QuadBatchKind,
+  RichTextKind,
+  Scale9ShapeKind,
+  ShapeKind,
+  SpriteKind,
+  TextLabelKind,
+  TilemapKind,
+  VideoKind,
+} from '@flighthq/types';
+
+import { registerWgpuDisplayObjectRenderers, registerWgpuSpriteRenderers } from './wgpuRegistration';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('registerWgpuDisplayObjectRenderers', () => {
+  it('registers bitmap renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(BitmapKind)).not.toBeUndefined();
+  });
+
+  it('registers display object renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(DisplayObjectKind)).not.toBeUndefined();
+  });
+
+  it('registers particle emitter renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(ParticleEmitterKind)).not.toBeUndefined();
+  });
+
+  it('registers quad batch renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(QuadBatchKind)).not.toBeUndefined();
+  });
+
+  it('registers rich text renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(RichTextKind)).not.toBeUndefined();
+  });
+
+  it('registers scale9 shape renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(Scale9ShapeKind)).not.toBeUndefined();
+  });
+
+  it('registers shape renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(ShapeKind)).not.toBeUndefined();
+  });
+
+  it('registers sprite renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(SpriteKind)).not.toBeUndefined();
+  });
+
+  it('registers text label renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(TextLabelKind)).not.toBeUndefined();
+  });
+
+  it('registers tilemap renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(TilemapKind)).not.toBeUndefined();
+  });
+
+  it('registers video renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuDisplayObjectRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(VideoKind)).not.toBeUndefined();
+  });
+});
+
+describe('registerWgpuSpriteRenderers', () => {
+  it('registers particle emitter renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuSpriteRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(ParticleEmitterKind)).not.toBeUndefined();
+  });
+
+  it('registers quad batch renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuSpriteRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(QuadBatchKind)).not.toBeUndefined();
+  });
+
+  it('registers sprite renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuSpriteRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(SpriteKind)).not.toBeUndefined();
+  });
+
+  it('registers tilemap renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuSpriteRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(TilemapKind)).not.toBeUndefined();
+  });
+});

package/src/wgpuRenderStats.test.ts

@@ -0,0 +1,89 @@
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+
+import {
+  getWgpuRenderStats,
+  recordWgpuBatchFlush,
+  recordWgpuTextureUpload,
+  resetWgpuRenderStats,
+} from './wgpuRenderStats';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('getWgpuRenderStats', () => {
+  it('returns zeroed stats for a fresh state', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const stats = getWgpuRenderStats(state);
+    expect(stats.drawCallCount).toBe(0);
+    expect(stats.instanceCount).toBe(0);
+    expect(stats.batchFlushCount).toBe(0);
+    expect(stats.textureUploadCount).toBe(0);
+  });
+
+  it('returns the same object reference on repeated calls', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const a = getWgpuRenderStats(state);
+    const b = getWgpuRenderStats(state);
+    expect(a).toBe(b);
+  });
+});
+
+describe('recordWgpuBatchFlush', () => {
+  it('increments draw call, instance, and batch flush counts', async () => {
+    const state = await createWgpuRenderStateForTest();
+    resetWgpuRenderStats(state);
+    recordWgpuBatchFlush(state, 10);
+    const stats = getWgpuRenderStats(state);
+    expect(stats.drawCallCount).toBe(1);
+    expect(stats.instanceCount).toBe(10);
+    expect(stats.batchFlushCount).toBe(1);
+  });
+
+  it('accumulates across multiple flushes', async () => {
+    const state = await createWgpuRenderStateForTest();
+    resetWgpuRenderStats(state);
+    recordWgpuBatchFlush(state, 5);
+    recordWgpuBatchFlush(state, 3);
+    const stats = getWgpuRenderStats(state);
+    expect(stats.drawCallCount).toBe(2);
+    expect(stats.instanceCount).toBe(8);
+    expect(stats.batchFlushCount).toBe(2);
+  });
+
+  it('is a no-op when stats have not been initialized via getWgpuRenderStats or resetWgpuRenderStats', async () => {
+    const state = await createWgpuRenderStateForTest();
+    // Calling recordWgpuBatchFlush before getWgpuRenderStats / resetWgpuRenderStats should not throw.
+    expect(() => recordWgpuBatchFlush(state, 10)).not.toThrow();
+  });
+});
+
+describe('recordWgpuTextureUpload', () => {
+  it('increments texture upload count', async () => {
+    const state = await createWgpuRenderStateForTest();
+    resetWgpuRenderStats(state);
+    recordWgpuTextureUpload(state);
+    recordWgpuTextureUpload(state);
+    expect(getWgpuRenderStats(state).textureUploadCount).toBe(2);
+  });
+
+  it('is a no-op when stats have not been initialized', async () => {
+    const state = await createWgpuRenderStateForTest();
+    expect(() => recordWgpuTextureUpload(state)).not.toThrow();
+  });
+});
+
+describe('resetWgpuRenderStats', () => {
+  it('zeroes all counts', async () => {
+    const state = await createWgpuRenderStateForTest();
+    resetWgpuRenderStats(state);
+    recordWgpuBatchFlush(state, 100);
+    recordWgpuTextureUpload(state);
+    resetWgpuRenderStats(state);
+    const stats = getWgpuRenderStats(state);
+    expect(stats.drawCallCount).toBe(0);
+    expect(stats.instanceCount).toBe(0);
+    expect(stats.batchFlushCount).toBe(0);
+    expect(stats.textureUploadCount).toBe(0);
+  });
+});

package/src/wgpuRendererData.test.ts

@@ -0,0 +1,29 @@
+import { createWgpuRendererData, getWgpuRendererData } from './wgpuRendererData';
+
+describe('createWgpuRendererData', () => {
+  it('returns the input data cast to RendererData', () => {
+    const data = { x: 1, y: 2 };
+    const result = createWgpuRendererData(data);
+    expect(result).toBe(data);
+  });
+
+  it('round-trips through getWgpuRendererData', () => {
+    const data = { value: 42 };
+    const rendererData = createWgpuRendererData(data);
+    const recovered = getWgpuRendererData<{ value: number }>(rendererData);
+    expect(recovered).toBe(data);
+    expect(recovered?.value).toBe(42);
+  });
+});
+
+describe('getWgpuRendererData', () => {
+  it('returns null when data is null', () => {
+    expect(getWgpuRendererData(null)).toBeNull();
+  });
+
+  it('returns the original object', () => {
+    const data = { canvas: null, lastContentId: -1 };
+    const result = getWgpuRendererData(createWgpuRendererData(data));
+    expect(result).toBe(data);
+  });
+});

package/src/wgpuRichText.test.ts

@@ -0,0 +1,100 @@
+import { getOrCreateRenderProxy2D, prepareDisplayObjectRender } 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 {
+  createWgpuRichTextData,
+  defaultWgpuRichTextRenderer,
+  destroyWgpuRichTextData,
+  drawWgpuRichText,
+  drawWgpuRichTextWithOverlay,
+  registerWgpuTextInputOverlay,
+} from './wgpuRichText';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('createWgpuRichTextData', () => {
+  it('allocates per-node data with no texture entry yet', () => {
+    const data = createWgpuRichTextData({} as never, {} as never) as unknown as { entry: unknown };
+    expect(data.entry).toBeNull();
+  });
+});
+
+describe('defaultWgpuRichTextRenderer', () => {
+  it('has createData and draw functions', () => {
+    expect(typeof defaultWgpuRichTextRenderer.createData).toBe('function');
+    expect(typeof defaultWgpuRichTextRenderer.submit).toBe('function');
+  });
+});
+
+describe('destroyWgpuRichTextData', () => {
+  it('destroys the GPU texture the node owns', () => {
+    const destroy = vi.fn();
+    destroyWgpuRichTextData({} as never, { entry: { texture: { destroy } } } as never);
+    expect(destroy).toHaveBeenCalled();
+  });
+
+  it('is a no-op when no texture entry was allocated', () => {
+    expect(() => destroyWgpuRichTextData({} as never, { entry: null } as never)).not.toThrow();
+  });
+});
+
+describe('drawWgpuRichText', () => {
+  it('does not throw for empty rich text', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+
+    const richText = createRichText();
+    prepareDisplayObjectRender(state, richText);
+    const renderProxy = getOrCreateRenderProxy2D(state, richText);
+
+    expect(() => drawWgpuRichText(state, renderProxy)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+
+  it('does not throw when renderPass is null', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const richText = createRichText();
+    prepareDisplayObjectRender(state, richText);
+    const renderProxy = getOrCreateRenderProxy2D(state, richText);
+
+    expect(() => drawWgpuRichText(state, renderProxy)).not.toThrow();
+  });
+});
+
+describe('drawWgpuRichTextWithOverlay', () => {
+  it('does not throw for empty rich text', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const richText = createRichText();
+    prepareDisplayObjectRender(state, richText);
+    const renderProxy = getOrCreateRenderProxy2D(state, richText);
+    expect(() => drawWgpuRichTextWithOverlay(state, renderProxy)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+});
+
+describe('registerWgpuTextInputOverlay', () => {
+  it('invokes the registered overlay only for a RichText with an input slot', async () => {
+    const overlay = vi.fn();
+    registerWgpuTextInputOverlay(overlay);
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+
+    const plain = createRichText({ data: { height: 40, text: 'x', width: 100 } });
+    prepareDisplayObjectRender(state, plain);
+    drawWgpuRichText(state, getOrCreateRenderProxy2D(state, plain));
+    expect(overlay).not.toHaveBeenCalled();
+
+    const editable = createRichText({ data: { height: 40, text: 'x', width: 100 } });
+    enableTextInput(editable);
+    prepareDisplayObjectRender(state, editable);
+    drawWgpuRichText(state, getOrCreateRenderProxy2D(state, editable));
+    expect(overlay).toHaveBeenCalled();
+    submitWgpuRenderPass(state);
+  });
+});

package/src/wgpuScale9Mapper.test.ts

@@ -0,0 +1,20 @@
+import { createRectangle } from '@flighthq/geometry';
+
+import { buildWgpuScale9Mapper } from './wgpuScale9Mapper';
+
+describe('buildWgpuScale9Mapper', () => {
+  it('returns null for invalid scale or bounds', () => {
+    expect(buildWgpuScale9Mapper(createRectangle(0, 0, 0, 100), createRectangle(10, 10, 20, 20), 1, 1)).toBeNull();
+    expect(buildWgpuScale9Mapper(createRectangle(0, 0, 100, 100), createRectangle(10, 10, 20, 20), 0, 1)).toBeNull();
+  });
+
+  it('maps edge and center coordinates using 9-slice scaling', () => {
+    const mapper = buildWgpuScale9Mapper(createRectangle(0, 0, 100, 100), createRectangle(10, 10, 20, 20), 2, 3)!;
+
+    expect(mapper.mapX(5)).toBe(5);
+    expect(mapper.mapX(20)).toBe(70);
+    expect(mapper.mapX(40)).toBe(140);
+    expect(mapper.mapY(20)).toBe(120);
+    expect(mapper.mapY(40)).toBe(240);
+  });
+});

package/src/wgpuScale9Shape.test.ts

@@ -0,0 +1,97 @@
+import { getOrCreateRenderProxy2D, prepareDisplayObjectRender } from '@flighthq/render';
+import { renderWgpuBackground, submitWgpuRenderPass } from '@flighthq/render-wgpu';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import { appendShapeBeginFill, appendShapeRectangle, createScale9Shape } from '@flighthq/shape';
+
+import {
+  createWgpuScale9ShapeData,
+  defaultWgpuScale9ShapeRenderer,
+  destroyWgpuScale9ShapeData,
+  drawWgpuScale9Shape,
+  drawWgpuScale9ShapeMask,
+  remapWgpuScale9Commands,
+} from './wgpuScale9Shape';
+
+const grid = { height: 80, width: 80, x: 10, y: 10 };
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('createWgpuScale9ShapeData', () => {
+  it('creates renderer data with no texture entry yet', () => {
+    const data = createWgpuScale9ShapeData({} as never, createScale9Shape(grid)) as unknown as { entry: unknown };
+    expect(data.entry).toBeNull();
+  });
+});
+
+describe('defaultWgpuScale9ShapeRenderer', () => {
+  it('wires createData, destroyData, and submit', () => {
+    expect(defaultWgpuScale9ShapeRenderer.createData).toBe(createWgpuScale9ShapeData);
+    expect(defaultWgpuScale9ShapeRenderer.destroyData).toBe(destroyWgpuScale9ShapeData);
+    expect(defaultWgpuScale9ShapeRenderer.submit).toBe(drawWgpuScale9Shape);
+  });
+});
+
+describe('destroyWgpuScale9ShapeData', () => {
+  it('destroys the texture it owns', () => {
+    const destroy = vi.fn();
+    destroyWgpuScale9ShapeData({} as never, { entry: { texture: { destroy } } } as never);
+    expect(destroy).toHaveBeenCalled();
+  });
+
+  it('is a no-op when no texture entry was allocated', () => {
+    expect(() => destroyWgpuScale9ShapeData({} as never, { entry: null } as never)).not.toThrow();
+  });
+});
+
+describe('drawWgpuScale9Shape', () => {
+  it('returns early when commands are empty', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const shape = createScale9Shape(grid);
+    prepareDisplayObjectRender(state, shape);
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    expect(() => drawWgpuScale9Shape(state, renderProxy)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+
+  it('rasterizes and draws a filled shape without throwing', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const shape = createScale9Shape(grid);
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    prepareDisplayObjectRender(state, shape);
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    expect(() => drawWgpuScale9Shape(state, renderProxy)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+});
+
+describe('drawWgpuScale9ShapeMask', () => {
+  it('delegates to the Scale9 draw path', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+    const shape = createScale9Shape(grid);
+    prepareDisplayObjectRender(state, shape);
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    expect(() => drawWgpuScale9ShapeMask(state, renderProxy)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+});
+
+describe('remapWgpuScale9Commands', () => {
+  it('remaps coordinates with a compatible mapper', () => {
+    const out: unknown[] = [];
+    remapWgpuScale9Commands(out, ['drawRectangle', 4, 10, 20, 50, 30], {
+      mapX: (x: number) => x * 2,
+      mapY: (y: number) => y * 3,
+    });
+
+    expect(out).toEqual(['drawRectangle', 4, 20, 60, 100, 90]);
+  });
+});

package/src/wgpuShape.test.ts

@@ -0,0 +1,95 @@
+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, 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,124 @@
+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 './wgpuShapeMesh';
+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): RenderProxy2D {
+  return { alpha, blendMode: null, 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('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('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);
+  });
+});