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

package/src/wgpuParticleEmitter2D.test.ts

@@ -0,0 +1,85 @@
+import { createParticleEmitter2D } from '@flighthq/particleemitter';
+import { getRenderProxy2D, prepareScene2DRender } from '@flighthq/render';
+import { getWgpuRenderStateRuntime, renderWgpuBackground, submitWgpuRenderPass } from '@flighthq/render-wgpu';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import type { ImageResource, RenderProxy2D } from '@flighthq/types';
+
+import { defaultWgpuParticleEmitter2DRenderer, drawWgpuParticleEmitter2D } from './wgpuParticleEmitter2D';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('defaultWgpuParticleEmitter2DRenderer', () => {
+  it('has a createData function', () => {
+    expect(typeof defaultWgpuParticleEmitter2DRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function', () => {
+    expect(typeof defaultWgpuParticleEmitter2DRenderer.submit).toBe('function');
+  });
+});
+
+describe('drawWgpuParticleEmitter2D', () => {
+  it('does not throw when atlas is null', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+
+    const emitter = createParticleEmitter2D();
+    prepareScene2DRender(state, emitter);
+    const renderProxy = getRenderProxy2D(state, emitter)!;
+
+    expect(() => drawWgpuParticleEmitter2D(state, renderProxy)).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+
+  it('threads a native compressed atlas straight-alpha flag through the particle uniform', async () => {
+    const state = await createWgpuRenderStateForTest();
+    const runtime = getWgpuRenderStateRuntime(state);
+    renderWgpuBackground(state);
+    const before = runtime.uniformOffset;
+    const image = {
+      alphaType: 'straight',
+      compressed: { container: {}, payload: new Uint8Array() },
+      data: null,
+      height: 4,
+      source: null,
+      version: 1,
+      width: 4,
+    } as unknown as ImageResource;
+    runtime.compressedTextureUpload = () => {
+      const texture = state.device.createTexture({
+        size: [4, 4],
+        format: 'bc3-rgba-unorm',
+        usage: GPUTextureUsage.TEXTURE_BINDING,
+      });
+      const view = texture.createView();
+      return {
+        bindGroup: state.device.createBindGroup({ layout: runtime.textureBindGroupLayout, entries: [] }),
+        straightAlpha: true,
+        texture,
+        view,
+      };
+    };
+    const renderProxy = {
+      alpha: 1,
+      blendMode: null,
+      source: {
+        data: {
+          alphas: new Float32Array([1]),
+          atlas: { image, regions: [{ height: 4, width: 4, x: 0, y: 0 }] },
+          colors: new Float32Array([1, 1, 1]),
+          ids: new Uint16Array([0]),
+          particleCount: 1,
+          transforms: new Float32Array([0, 0, 0, 1]),
+          worldSpace: false,
+        },
+      },
+      transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+    } as unknown as RenderProxy2D;
+
+    drawWgpuParticleEmitter2D(state, renderProxy);
+
+    expect(runtime.uniformDataU32[(before >> 2) + 14]).toBe(1);
+  });
+});

package/src/wgpuQuadBatch.test.ts

@@ -0,0 +1,69 @@
+import { getRenderProxy2D, prepareScene2DRender } from '@flighthq/render';
+import { renderWgpuBackground, submitWgpuRenderPass } from '@flighthq/render-wgpu';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import { createQuadBatch } from '@flighthq/sprite';
+
+import { defaultWgpuQuadBatchRenderer, ensureWgpuQuadBatchResources, getWgpuQuadBatchPipeline } from './wgpuQuadBatch';
+import { flushWgpuSpriteBatch } from './wgpuSpriteBatch';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('defaultWgpuQuadBatchRenderer', () => {
+  it('has a createData function', () => {
+    expect(typeof defaultWgpuQuadBatchRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function', () => {
+    expect(typeof defaultWgpuQuadBatchRenderer.submit).toBe('function');
+  });
+});
+
+describe('defaultWgpuQuadBatchRenderer.submit', () => {
+  it('does not throw when atlas is null', async () => {
+    const state = await createWgpuRenderStateForTest();
+    renderWgpuBackground(state);
+
+    const batch = createQuadBatch();
+    prepareScene2DRender(state, batch);
+    const renderProxy = getRenderProxy2D(state, batch)!;
+
+    expect(() => {
+      defaultWgpuQuadBatchRenderer.submit(state, renderProxy);
+      flushWgpuSpriteBatch(state as any);
+    }).not.toThrow();
+    submitWgpuRenderPass(state);
+  });
+});
+
+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('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);
+  });
+});

package/src/wgpuRegistration.test.ts

@@ -0,0 +1,115 @@
+import { getRenderStateRuntime } from '@flighthq/render';
+import { createWgpuRenderStateForTest, installWgpuMock } from '@flighthq/render-wgpu';
+import {
+  BitmapKind,
+  DisplayObjectKind,
+  ParticleEmitter2DKind,
+  QuadBatchKind,
+  RichTextKind,
+  Scale9ShapeKind,
+  ShapeKind,
+  SpriteKind,
+  TextLabelKind,
+  TilemapKind,
+  VideoKind,
+} from '@flighthq/types';
+
+import { registerWgpuScene2DRenderers, registerWgpuSpriteRenderers } from './wgpuRegistration';
+
+beforeAll(() => {
+  installWgpuMock();
+});
+
+describe('registerWgpuScene2DRenderers', () => {
+  it('registers bitmap renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(BitmapKind)).not.toBeUndefined();
+  });
+
+  it('registers display object renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(DisplayObjectKind)).not.toBeUndefined();
+  });
+
+  it('registers particle emitter renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(ParticleEmitter2DKind)).not.toBeUndefined();
+  });
+
+  it('registers quad batch renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(QuadBatchKind)).not.toBeUndefined();
+  });
+
+  it('registers rich text renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(RichTextKind)).not.toBeUndefined();
+  });
+
+  it('registers scale9 shape renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(Scale9ShapeKind)).not.toBeUndefined();
+  });
+
+  it('registers shape renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(ShapeKind)).not.toBeUndefined();
+  });
+
+  it('registers sprite renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(SpriteKind)).not.toBeUndefined();
+  });
+
+  it('registers text label renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(TextLabelKind)).not.toBeUndefined();
+  });
+
+  it('registers tilemap renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(TilemapKind)).not.toBeUndefined();
+  });
+
+  it('registers video renderer', async () => {
+    const state = await createWgpuRenderStateForTest();
+    registerWgpuScene2DRenderers(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(ParticleEmitter2DKind)).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, 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 {
+  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();
+    prepareScene2DRender(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();
+    prepareScene2DRender(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();
+    prepareScene2DRender(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 } });
+    prepareScene2DRender(state, plain);
+    drawWgpuRichText(state, getOrCreateRenderProxy2D(state, plain));
+    expect(overlay).not.toHaveBeenCalled();
+
+    const editable = createRichText({ data: { height: 40, text: 'x', width: 100 } });
+    enableTextInput(editable);
+    prepareScene2DRender(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, prepareScene2DRender } 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);
+    prepareScene2DRender(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);
+    prepareScene2DRender(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);
+    prepareScene2DRender(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]);
+  });
+});