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

package/src/glQuadBatch.test.ts

@@ -0,0 +1,132 @@
+import type { RenderProxy2D } from '@flighthq/types';
+
+import { registerDefaultGlMaterial } from './glDefaultMaterial';
+import { defaultGlQuadBatchRenderer } from './glQuadBatch';
+import { flushGlSpriteBatch } from './glSpriteBatch';
+import { createGlState } from './glTestHelper';
+
+function makeAtlas() {
+  const img = document.createElement('img');
+  return {
+    image: { source: img, width: 64, height: 64 },
+    regions: [{ x: 0, y: 0, width: 32, height: 32 }],
+  };
+}
+
+function makeQuadBatchNode(data: Record<string, unknown> = {}): RenderProxy2D {
+  return {
+    source: {
+      data: {
+        atlas: makeAtlas(),
+        instanceCount: 1,
+        ids: new Int32Array([0]),
+        transforms: new Float32Array([0, 0]),
+        transformType: 'vector2',
+        ...data,
+      },
+    },
+    blendMode: 0,
+    alpha: 1,
+    material: null,
+    materialData: null,
+    renderer: null,
+    traverseChildren: false,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+  } as unknown as RenderProxy2D;
+}
+
+describe('defaultGlQuadBatchRenderer', () => {
+  it('has a createData function', () => {
+    expect(typeof defaultGlQuadBatchRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function', () => {
+    expect(typeof defaultGlQuadBatchRenderer.submit).toBe('function');
+  });
+});
+
+describe('defaultGlQuadBatchRenderer.submit', () => {
+  it('returns early without drawing when atlas is null', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ atlas: null }));
+    flushGlSpriteBatch(state as any);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when atlas.image is null', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ atlas: { image: null, regions: [] } }));
+    flushGlSpriteBatch(state as any);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when atlas.image.source is null', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ atlas: { image: { source: null }, regions: [] } }));
+    flushGlSpriteBatch(state as any);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when instanceCount is 0', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ instanceCount: 0 }));
+    flushGlSpriteBatch(state as any);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('draws all valid instances in a single instanced call with vector2 transform type', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlQuadBatchRenderer.submit(
+      state,
+      makeQuadBatchNode({
+        instanceCount: 2,
+        ids: new Int32Array([0, 0]),
+        transforms: new Float32Array([0, 0, 10, 20]),
+        transformType: 'vector2',
+      }),
+    );
+    flushGlSpriteBatch(state as any);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 2);
+  });
+
+  it('excludes out-of-range ids from the instanced draw count', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlQuadBatchRenderer.submit(
+      state,
+      makeQuadBatchNode({
+        instanceCount: 3,
+        ids: new Int32Array([0, 99, 0]),
+        transforms: new Float32Array([0, 0, 0, 0, 0, 0]),
+        transformType: 'vector2',
+      }),
+    );
+    flushGlSpriteBatch(state as any);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 2);
+  });
+
+  it('draws all valid instances in a single instanced call with full matrix transform type', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    const transforms = new Float32Array([1, 0, 0, 1, 0, 0]);
+    defaultGlQuadBatchRenderer.submit(
+      state,
+      makeQuadBatchNode({
+        instanceCount: 1,
+        ids: new Int32Array([0]),
+        transforms,
+        transformType: 'matrix',
+      }),
+    );
+    flushGlSpriteBatch(state as any);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 1);
+  });
+});

package/src/glRichText.test.ts

@@ -0,0 +1,140 @@
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import { createRichText } from '@flighthq/text';
+import { enableTextInput } from '@flighthq/textinput';
+import type { RendererData, RenderProxy2D, RichText } from '@flighthq/types';
+
+import {
+  createGlRichTextData,
+  defaultGlRichTextRenderer,
+  destroyGlRichTextData,
+  drawGlRichText,
+  drawGlRichTextWithOverlay,
+  registerGlTextInputOverlay,
+} from './glRichText';
+import { createGlState } from './glTestHelper';
+
+function makeRichTextNode(): RenderProxy2D {
+  const richText = createRichText();
+  return {
+    source: richText,
+    blendMode: 0,
+    alpha: 1,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+    rendererData: { texture: null },
+  } as unknown as RenderProxy2D;
+}
+
+describe('createGlRichTextData', () => {
+  it('allocates per-node data with no texture yet', () => {
+    const { state } = createGlState();
+    const data = createGlRichTextData(state, createRichText()) as unknown as { texture: WebGLTexture | null };
+    expect(data.texture).toBeNull();
+  });
+});
+
+describe('defaultGlRichTextRenderer', () => {
+  it('has a createData function', () => {
+    expect(typeof defaultGlRichTextRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function pointing to drawGlRichText', () => {
+    expect(defaultGlRichTextRenderer.submit).toBe(drawGlRichText);
+  });
+});
+
+describe('destroyGlRichTextData', () => {
+  it('deletes the GPU texture the node owns', () => {
+    const { state, gl } = createGlState();
+    const texture = gl.createTexture();
+    const deleteSpy = vi.spyOn(gl, 'deleteTexture');
+    destroyGlRichTextData(state, { texture } as unknown as RendererData);
+    expect(deleteSpy).toHaveBeenCalledWith(texture);
+  });
+
+  it('is a no-op when no texture was allocated', () => {
+    const { state, gl } = createGlState();
+    const deleteSpy = vi.spyOn(gl, 'deleteTexture');
+    destroyGlRichTextData(state, { texture: null } as unknown as RendererData);
+    expect(deleteSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe('drawGlRichText', () => {
+  it('binds the active bitmap shader when drawing rich text', () => {
+    const { state } = createGlState();
+    const renderProxy = makeRichTextNode();
+    (renderProxy.source as RichText).data.text = 'hello';
+
+    const bindSpy = vi.spyOn(getGlRenderStateRuntime(state).defaultBitmapShader, 'bind');
+    drawGlRichText(state, renderProxy);
+
+    expect(bindSpy).toHaveBeenCalledWith(state.gl, state, renderProxy);
+  });
+
+  it('returns early without drawing when text and chrome are empty', () => {
+    const { state, gl } = createGlState();
+    drawGlRichText(state, makeRichTextNode());
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+
+  it('draws when text is non-empty', () => {
+    const { state, gl } = createGlState();
+    const renderProxy = makeRichTextNode();
+    (renderProxy.source as RichText).data.text = 'hello';
+    drawGlRichText(state, renderProxy);
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+
+  it('draws resolved multi-format spans', () => {
+    const { state, gl } = createGlState();
+    const renderProxy = makeRichTextNode();
+    const node = renderProxy.source as RichText;
+    node.data.text = 'BoldGreen';
+    node.data.textFormatRanges = [
+      { start: 0, end: 4, format: { bold: true } },
+      { start: 4, end: 9, format: { color: 0x00ff00 } },
+    ];
+    drawGlRichText(state, renderProxy);
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+
+  it('draws field chrome even when text is empty', () => {
+    const { state, gl } = createGlState();
+    const renderProxy = makeRichTextNode();
+    (renderProxy.source as RichText).data.background = true;
+    drawGlRichText(state, renderProxy);
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+});
+
+describe('drawGlRichTextWithOverlay', () => {
+  it('runs an optional canvas overlay after layout', () => {
+    const { state } = createGlState();
+    const renderProxy = makeRichTextNode();
+    (renderProxy.source as RichText).data.text = 'hello';
+    const overlay = vi.fn();
+
+    drawGlRichTextWithOverlay(state, renderProxy, overlay);
+
+    expect(overlay).toHaveBeenCalled();
+  });
+});
+
+describe('registerGlTextInputOverlay', () => {
+  it('invokes the registered overlay only for a RichText with an input slot', () => {
+    const overlay = vi.fn();
+    registerGlTextInputOverlay(overlay);
+    const { state } = createGlState();
+
+    const plain = makeRichTextNode();
+    (plain.source as RichText).data.text = 'x';
+    drawGlRichText(state, plain);
+    expect(overlay).not.toHaveBeenCalled();
+
+    const editable = makeRichTextNode();
+    (editable.source as RichText).data.text = 'x';
+    enableTextInput(editable.source as RichText);
+    drawGlRichText(state, editable);
+    expect(overlay).toHaveBeenCalled();
+  });
+});

package/src/glScale9Mapper.test.ts

@@ -0,0 +1,20 @@
+import { createRectangle } from '@flighthq/geometry';
+
+import { buildGlScale9Mapper } from './glScale9Mapper';
+
+describe('buildGlScale9Mapper', () => {
+  it('returns null for invalid scale or bounds', () => {
+    expect(buildGlScale9Mapper(createRectangle(0, 0, 0, 100), createRectangle(10, 10, 20, 20), 1, 1)).toBeNull();
+    expect(buildGlScale9Mapper(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 = buildGlScale9Mapper(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/glScale9Shape.test.ts

@@ -0,0 +1,90 @@
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { appendShapeBeginFill, appendShapeRectangle, createScale9Shape } from '@flighthq/shape';
+
+import {
+  createGlScale9ShapeData,
+  defaultGlScale9ShapeRenderer,
+  destroyGlScale9ShapeData,
+  drawGlScale9Shape,
+  drawGlScale9ShapeMask,
+  remapGlScale9Commands,
+} from './glScale9Shape';
+import { createGlState } from './glTestHelper';
+
+const grid = { height: 80, width: 80, x: 10, y: 10 };
+
+describe('createGlScale9ShapeData', () => {
+  it('creates renderer data with a Gl texture', () => {
+    const { state, gl } = createGlState();
+    const shape = createScale9Shape(grid);
+
+    const data = createGlScale9ShapeData(state, shape);
+
+    expect(data).not.toBeNull();
+    expect(gl.createTexture).toHaveBeenCalled();
+  });
+});
+
+describe('defaultGlScale9ShapeRenderer', () => {
+  it('has submit and createData functions', () => {
+    expect(defaultGlScale9ShapeRenderer.createData).toBe(createGlScale9ShapeData);
+    expect(defaultGlScale9ShapeRenderer.submit).toBe(drawGlScale9Shape);
+  });
+});
+
+describe('destroyGlScale9ShapeData', () => {
+  it('deletes the texture it owns', () => {
+    const { state, gl } = createGlState();
+    const data = createGlScale9ShapeData(state, createScale9Shape(grid))!;
+    destroyGlScale9ShapeData(state, data);
+    expect(gl.deleteTexture).toHaveBeenCalled();
+  });
+});
+
+describe('drawGlScale9Shape', () => {
+  it('returns early when commands are empty', () => {
+    const { state, gl } = createGlState();
+    const shape = createScale9Shape(grid);
+    const data = getOrCreateRenderProxy2D(state, shape);
+
+    drawGlScale9Shape(state, data);
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+
+  it('returns early when rendererData is null', () => {
+    const { state, gl } = createGlState();
+    const shape = createScale9Shape(grid);
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    const data = getOrCreateRenderProxy2D(state, shape);
+
+    drawGlScale9Shape(state, data);
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+});
+
+describe('drawGlScale9ShapeMask', () => {
+  it('uses the same draw path as normal Scale9 rendering', () => {
+    const { state, gl } = createGlState();
+    const shape = createScale9Shape(grid);
+    const data = getOrCreateRenderProxy2D(state, shape);
+
+    drawGlScale9ShapeMask(state, data);
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+});
+
+describe('remapGlScale9Commands', () => {
+  it('remaps coordinates with a compatible mapper', () => {
+    const out: unknown[] = [];
+    remapGlScale9Commands(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/glShape.test.ts

@@ -0,0 +1,116 @@
+import { createImageResource } from '@flighthq/image';
+import type * as FlightNodeModule from '@flighthq/node';
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import type { RenderProxy2D } from '@flighthq/types';
+import { BatchFormat } from '@flighthq/types';
+
+import { registerDefaultGlMaterial } from './glDefaultMaterial';
+import type * as GlShapeModule from './glShape';
+import { flushGlSpriteBatch } from './glSpriteBatch';
+import { createGlState } from './glTestHelper';
+import { scopeModuleMocks } from './moduleMockTestHelper';
+
+// @flighthq/node's bounds/revision queries expect a real BoundsNode; these tests drive drawGlShape
+// 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 ./glShape still picks up the stub.
+let defaultGlShapeRenderer: typeof GlShapeModule.defaultGlShapeRenderer;
+let drawGlShape: typeof GlShapeModule.drawGlShape;
+
+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,
+  }));
+  ({ defaultGlShapeRenderer, drawGlShape } = await import('./glShape'));
+});
+
+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 makeShapeNode(data: Record<string, unknown> = {}, rendererData: unknown = null): RenderProxy2D {
+  return {
+    source: {
+      data: {
+        commands: [],
+        version: 0,
+        ...data,
+      },
+    },
+    rendererData: rendererData,
+    blendMode: 0,
+    alpha: 1,
+    material: null,
+    materialData: null,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+  } as unknown as RenderProxy2D;
+}
+
+describe('defaultGlShapeRenderer', () => {
+  it('declares BatchFormat.Quad', () => {
+    expect(defaultGlShapeRenderer.format).toBe(BatchFormat.Quad);
+  });
+
+  it('has a createData function', () => {
+    expect(typeof defaultGlShapeRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function pointing to drawGlShape', () => {
+    expect(defaultGlShapeRenderer.submit).toBe(drawGlShape);
+  });
+});
+
+describe('drawGlShape', () => {
+  it('returns early without writing to batch when commands array is empty', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [] }, makeShapeData()));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+  });
+
+  it('returns early without writing to batch when rendererData is null', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [{}] }, null));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+  });
+
+  it('returns early without writing to batch when no material renderer is registered', () => {
+    const { state } = createGlState();
+    drawGlShape(state, makeShapeNode({ commands: [{}] }, makeShapeData()));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+  });
+
+  it('writes one instance to the sprite batch when shape has valid commands and bounds', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [{}], version: 1 }, makeShapeData()));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(1);
+  });
+
+  it('draws via drawElementsInstanced after flush', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [{}], version: 1 }, makeShapeData()));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).toHaveBeenCalled();
+  });
+
+  it('writes correct size into instance data', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [{}], version: 1 }, makeShapeData()));
+    const d = getGlRenderStateRuntime(state).spriteBatchInstanceData;
+    expect(d[6]).toBe(64); // width from mocked bounds
+    expect(d[7]).toBe(48); // height from mocked bounds
+  });
+});

package/src/glShapeMesh.test.ts

@@ -0,0 +1,164 @@
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import type { ColorTransform, RenderProxy2D } from '@flighthq/types';
+
+import { enableGlColorAdjustment } from './glColorAdjustment';
+import { drawGlShapeMeshBatch, drawGlShapeMeshes, ensureGlShapeMeshProgram } from './glShapeMesh';
+import { createGlState } from './glTestHelper';
+
+function makeProxy(overrides?: Partial<RenderProxy2D>): RenderProxy2D {
+  return {
+    alpha: 1,
+    blendMode: null,
+    colorTransform: null,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+    ...overrides,
+  } as unknown as RenderProxy2D;
+}
+
+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 TRIANGLE = {
+  vertices: new Float32Array([0, 0, 10, 0, 0, 10]),
+  indices: new Uint16Array([0, 1, 2]),
+  color: 0xff8040,
+  alpha: 1,
+};
+
+describe('drawGlShapeMeshBatch', () => {
+  it('runs onProgramBound after the matrix upload and before the draw loop', () => {
+    const { state, gl } = createGlState();
+    const calls: string[] = [];
+    (gl.uniformMatrix3fv as ReturnType<typeof vi.fn>).mockImplementation(() => calls.push('matrix'));
+    (gl.drawElements as ReturnType<typeof vi.fn>).mockImplementation(() => calls.push('draw'));
+
+    drawGlShapeMeshBatch(state, makeProxy(), [TRIANGLE], ensureGlShapeMeshProgram(state), () => calls.push('bound'));
+
+    expect(calls).toEqual(['matrix', 'bound', 'draw']);
+  });
+
+  it('is a no-op for an empty mesh list', () => {
+    const { state, gl } = createGlState();
+    drawGlShapeMeshBatch(state, makeProxy(), [], ensureGlShapeMeshProgram(state));
+    expect(gl.useProgram).not.toHaveBeenCalled();
+  });
+});
+
+describe('drawGlShapeMeshes', () => {
+  it('binds the mesh program and draws each mesh', () => {
+    const { state, gl } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy(), [TRIANGLE]);
+
+    expect(gl.useProgram).toHaveBeenCalled();
+    expect(gl.drawElements).toHaveBeenCalledWith(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
+  });
+
+  it('records the mesh program as currentProgram so content draws re-bind', () => {
+    const { state } = createGlState();
+    expect(getGlRenderStateRuntime(state).currentProgram).toBeNull();
+
+    drawGlShapeMeshes(state, makeProxy(), [TRIANGLE]);
+
+    expect(getGlRenderStateRuntime(state).currentProgram).not.toBeNull();
+  });
+
+  it('uploads premultiplied color (color * alpha) for the standard blend', () => {
+    const { state, gl } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy(), [{ ...TRIANGLE, color: 0xffffff, alpha: 0.5 }]);
+
+    expect(gl.uniform4f).toHaveBeenCalledWith(expect.anything(), 0.5, 0.5, 0.5, 0.5);
+  });
+
+  it('skips fully transparent meshes', () => {
+    const { state, gl } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy(), [{ ...TRIANGLE, alpha: 0 }]);
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+
+  it('is a no-op for an empty mesh list', () => {
+    const { state, gl } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy(), []);
+
+    expect(gl.useProgram).not.toHaveBeenCalled();
+  });
+
+  it('ignores a color transform when color adjustment is not enabled (default path pays nothing)', () => {
+    const { state } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy({ colorTransform: ct(0.5) }), [TRIANGLE]);
+
+    // The tinted program is compiled only through the opt-in fold; the base path never touches it.
+    expect(getGlRenderStateRuntime(state).shapeMeshColorTransformShader).toBeUndefined();
+  });
+
+  it('tints solid-fill meshes through the fold with the same uniforms as the quad-batch path', () => {
+    const { state, gl } = createGlState();
+    enableGlColorAdjustment(state);
+
+    // White fill, half-brightness multiplier, +128 red offset — mirrors the Path-B uniform upload.
+    drawGlShapeMeshes(state, makeProxy({ colorTransform: ct(0.5, 0.5, 0.5, 1, 128, 0, 0, 0) }), [
+      { ...TRIANGLE, color: 0xffffff, alpha: 1 },
+    ]);
+
+    const shader = getGlRenderStateRuntime(state).shapeMeshColorTransformShader!;
+    expect(shader).toBeDefined();
+    // Multiplier uploaded verbatim; offsets normalized by 255 — identical to glColorAdjustment's
+    // bindGlSpriteBatchUniformColorTransform.
+    expect(gl.uniform4f).toHaveBeenCalledWith(shader.colorMultiplierLocation, 0.5, 0.5, 0.5, 1);
+    expect(gl.uniform4f).toHaveBeenCalledWith(shader.colorOffsetLocation, 128 / 255, 0, 0, 0);
+    // Flat mesh color still uploaded premultiplied (white, alpha 1); the shader un/re-premultiplies.
+    expect(gl.uniform4f).toHaveBeenCalledWith(shader.colorLocation, 1, 1, 1, 1);
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+
+  it('falls back to the lean path through the fold when the node carries no transform', () => {
+    const { state } = createGlState();
+    enableGlColorAdjustment(state);
+
+    drawGlShapeMeshes(state, makeProxy({ colorTransform: null }), [TRIANGLE]);
+
+    // No transform → the fold is not consulted (gated on non-null), so no tint shader is compiled.
+    expect(getGlRenderStateRuntime(state).shapeMeshColorTransformShader).toBeUndefined();
+  });
+});
+
+describe('ensureGlShapeMeshProgram', () => {
+  it('compiles once and caches the binding per context', () => {
+    const { state } = createGlState();
+    const first = ensureGlShapeMeshProgram(state);
+    const second = ensureGlShapeMeshProgram(state);
+    expect(second).toBe(first);
+  });
+
+  it('exposes shared vertex and index buffers for the draw driver', () => {
+    const { state } = createGlState();
+    const binding = ensureGlShapeMeshProgram(state);
+    expect(binding.vertexBuffer).toBeDefined();
+    expect(binding.indexBuffer).toBeDefined();
+    expect(binding.vertexBuffer).not.toBe(binding.indexBuffer);
+  });
+});