From 66b60cece91be4dbcaeaea6522297ed10c997716 Mon Sep 17 00:00:00 2001
From: Exoridus <1218727+Exoridus@users.noreply.github.com>
Date: Sun, 27 Sep 2026 04:18:23 +0200
Subject: [PATCH 1/2] fix(rendering): unify scalable sprite integrity

---
 packages/exojs-bench/docs/harness.md          |   1 +
 .../src/webgl2/WebGl2TileChunkRenderer.ts     |   6 +-
 .../src/components/BenchComparisonTable.astro |  30 +-
 site/src/components/BenchResultCard.astro     |  47 +-
 .../src/components/pages/BenchmarksPage.astro |   3 +-
 .../guide/debugging/renderer-sdk-contract.mdx |   2 +
 site/src/lib/bench-cards.ts                   |  22 +-
 site/src/lib/bench-profiles.ts                |  22 -
 src/rendering/coreRendererBindings.ts         |  19 +-
 src/rendering/plan/DerivedRootProduct.ts      |   4 +-
 src/rendering/plan/DerivedSelectionState.ts   |  24 +-
 src/rendering/plan/RenderPlanBuilder.ts       |  25 +-
 src/rendering/webgl2/WebGl2Backend.ts         |  12 +-
 src/rendering/webgl2/WebGl2MeshRenderer.ts    |   6 +-
 .../webgl2/WebGl2NineSliceSpriteRenderer.ts   | 534 ------------
 .../webgl2/WebGl2RetainedGroupResources.ts    |   8 +-
 ...rer.ts => WebGl2ScalableSpriteRenderer.ts} |  69 +-
 src/rendering/webgl2/WebGl2SpriteRenderer.ts  |   6 +-
 src/rendering/webgl2/WebGl2TextRenderer.ts    |   8 +-
 src/rendering/webgl2/shaders/nine-slice.frag  |  16 -
 src/rendering/webgl2/shaders/nine-slice.vert  |  94 ---
 .../webgpu/WebGpuNineSliceSpriteRenderer.ts   | 777 ------------------
 ...rer.ts => WebGpuScalableSpriteRenderer.ts} |  45 +-
 src/rendering/webgpu/WebGpuTextRenderer.ts    |   2 +-
 src/rendering/webgpu/shaders/nine-slice.wgsl  | 112 ---
 .../retained-instruction-webgl2.test.ts       |  62 +-
 .../structural-scalable-sprite.test.ts        |  35 +
 ...webgl2-mobile-precision-regression.test.ts |  19 +-
 .../webgl2-scalable-sprite-state.test.ts      |  32 +
 .../browser/webgl2-shader-compile.test.ts     |   1 -
 ...2-text-retained-instruction-replay.test.ts |   4 +-
 .../browser/webgpu-shader-compile.test.ts     |   6 +-
 .../rendering/derived-selection-state.test.ts |  34 +-
 .../persistent-slot-live-marks.test.ts        |  32 +
 .../webgpu-affine-packing-parity.test.ts      |   6 +-
 .../rendering/webgpu-pipeline-prewarm.test.ts |  58 +-
 .../webgpu-retained-record-replay.test.ts     |  70 +-
 test/rendering/wgsl-naga-validation.test.ts   |   6 +-
 test/site/bench-invalid-values.test.ts        |   9 +-
 test/site/bench-opening-selection.test.ts     |   1 -
 40 files changed, 427 insertions(+), 1842 deletions(-)
 delete mode 100644 src/rendering/webgl2/WebGl2NineSliceSpriteRenderer.ts
 rename src/rendering/webgl2/{WebGl2RepeatingSpriteRenderer.ts => WebGl2ScalableSpriteRenderer.ts} (93%)
 delete mode 100644 src/rendering/webgl2/shaders/nine-slice.frag
 delete mode 100644 src/rendering/webgl2/shaders/nine-slice.vert
 delete mode 100644 src/rendering/webgpu/WebGpuNineSliceSpriteRenderer.ts
 rename src/rendering/webgpu/{WebGpuRepeatingSpriteRenderer.ts => WebGpuScalableSpriteRenderer.ts} (96%)
 delete mode 100644 src/rendering/webgpu/shaders/nine-slice.wgsl
 create mode 100644 test/perf/rendering/structural-scalable-sprite.test.ts
 create mode 100644 test/rendering/browser/webgl2-scalable-sprite-state.test.ts

diff --git a/packages/exojs-bench/docs/harness.md b/packages/exojs-bench/docs/harness.md
index 1e45c4f03..3fee35c0c 100644
--- a/packages/exojs-bench/docs/harness.md
+++ b/packages/exojs-bench/docs/harness.md
@@ -256,6 +256,7 @@ Rules the generator enforces rather than merely intends:
 - Every row names the mechanism behind its difference, drawn from the structural counters. A row whose mechanism cannot be evidenced is not published - it is listed under Omissions with the reason, so a dropped row stays auditable.
 - One column per competitor, no "best competitor" composite. Phaser occupies its own WebGL1 block, CPU time only, explicitly carrying no mechanism.
 - Cells where ExoJS loses are published exactly like the cells where it wins.
+- A scenario whose arms turn out not to do the same work is repaired and re-measured. It is never published with a "not comparable" label in place of its comparison, and never hidden: a label would keep a known-unfair row on the page, and hiding it would let the choice of what to show depend on the outcome.
 
 ### Machine profiles
 
diff --git a/packages/exojs-tilemap/src/webgl2/WebGl2TileChunkRenderer.ts b/packages/exojs-tilemap/src/webgl2/WebGl2TileChunkRenderer.ts
index 07129c847..7425b94aa 100644
--- a/packages/exojs-tilemap/src/webgl2/WebGl2TileChunkRenderer.ts
+++ b/packages/exojs-tilemap/src/webgl2/WebGl2TileChunkRenderer.ts
@@ -408,7 +408,7 @@ export class WebGl2TileChunkRenderer extends AbstractWebGl2Renderer<TileChunkNod
    * dispatching here and bumps the stats from the instruction descriptor.
    * @internal
    */
-  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): void {
+  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): boolean {
     const backend = this.getBackendOrNull();
     const vao = payload.vao;
     const transformTexture = payload.bundle.transformTexture;
@@ -416,7 +416,7 @@ export class WebGl2TileChunkRenderer extends AbstractWebGl2Renderer<TileChunkNod
     if (backend === null || vao === null || transformTexture === null) {
       // Defensive: a bundle in this state never validates (generation), so a
       // spliced replay cannot reach here; skip rather than crash mid-frame.
-      return;
+      return false;
     }
 
     backend.setBlendMode(payload.blendMode);
@@ -440,6 +440,8 @@ export class WebGl2TileChunkRenderer extends AbstractWebGl2Renderer<TileChunkNod
     this._shader.sync();
     backend.bindVertexArrayObject(vao);
     vao.drawInstanced(4, 0, payload.instanceCount, RenderingPrimitives.TriangleStrip);
+
+    return true;
   }
 
   protected onConnect(backend: WebGl2Backend): void {
diff --git a/site/src/components/BenchComparisonTable.astro b/site/src/components/BenchComparisonTable.astro
index c12a6528c..071d2b158 100644
--- a/site/src/components/BenchComparisonTable.astro
+++ b/site/src/components/BenchComparisonTable.astro
@@ -53,7 +53,6 @@ import {
     pooledFactor,
     ratioBand,
     rungSide,
-    withheldScenario,
     type ProfileCell,
     type ProfileSpread,
 } from '../lib/bench-profiles';
@@ -219,15 +218,8 @@ const winnerOf = (cell: ProfileCell): string => {
                                 {row.load}
                             </td>
                         )}
-                        {/*
-                          * A row whose arms are known not to do the same work
-                          * publishes their times and no comparison: the factor,
-                          * the bar and the winner all go, the same way they do
-                          * for a pair the clock could not separate.
-                          */}
                         {row.entries.map((entry, column) => {
                             const cell = entry.cell;
-                            const withheld = withheldScenario(row.archetype) !== undefined;
 
                             if (cell === null) {
                                 const reason =
@@ -248,7 +240,7 @@ const winnerOf = (cell: ProfileCell): string => {
                             const mixed = outcome === 'unstable';
                             const level = outcome === 'level';
                             // A pair the clock never separated publishes neither a figure nor a bar; only its two times survive.
-                            const unresolved = withheld || outcome === 'timer-limited' || outcome === 'timer-unknown';
+                            const unresolved = outcome === 'timer-limited' || outcome === 'timer-unknown';
                             const band = mixed ? ratioBand(cell) : null;
                             const factor = mixed ? pooledFactor(cell) : cell.verdict.factor;
                             const ratio = cell.verdict.ratio;
@@ -279,16 +271,8 @@ const winnerOf = (cell: ProfileCell): string => {
                                                 {/* A pair inside the noise band is named, not scored: its factor is pinned to 1 by the ladder, so printing 1.00x beside two medians that differ would claim a precision the ladder never measured. */}
                                                 <b>{unresolved ? '-' : mixed ? (factor === null ? '-' : formatApproximate(factor)) : level ? 'similar' : formatFactor(factor)}</b>
                                                 {/* The word alone; what it means is stated once in the legend rather than in every cell that carries it. */}
-                                                <i title={withheld ? withheldScenario(row.archetype) : unresolved || mixed ? OUTCOME_NOTES[outcome] : undefined}>
-                                                    {withheld
-                                                        ? 'not comparable'
-                                                        : unresolved
-                                                          ? OUTCOME_STATUS[outcome]
-                                                          : mixed
-                                                            ? OUTCOME_STATUS.unstable
-                                                            : level
-                                                              ? ''
-                                                              : winnerOf(cell)}
+                                                <i title={unresolved || mixed ? OUTCOME_NOTES[outcome] : undefined}>
+                                                    {unresolved ? OUTCOME_STATUS[outcome] : mixed ? OUTCOME_STATUS.unstable : level ? '' : winnerOf(cell)}
                                                 </i>
                                             </span>
                                             <span class="medians">
@@ -308,7 +292,6 @@ const winnerOf = (cell: ProfileCell): string => {
                             <details class="row-more">
                                 {/* The row already names its archetype; the label repeats it only where a reader reaches the summary without that context. */}
                                 <summary aria-label={`How ${archetypeTitle(row.archetype)} was measured`}>Measurement detail</summary>
-                                {withheldScenario(row.archetype) !== undefined && <p class="row-withheld">{withheldScenario(row.archetype)}</p>}
                                 <div class="arms">
                                     {row.entries.map((entry, column) => {
                                         const cell = entry.cell;
@@ -796,13 +779,6 @@ const winnerOf = (cell: ProfileCell): string => {
         border-bottom: 1px solid var(--line-soft);
     }
 
-    .row-withheld {
-        margin: 0.4rem 0 0.6rem;
-        font-size: 0.8rem;
-        line-height: 1.45;
-        color: var(--fg-muted);
-    }
-
     .row-more summary {
         cursor: pointer;
         font-family: var(--f-mono);
diff --git a/site/src/components/BenchResultCard.astro b/site/src/components/BenchResultCard.astro
index d032476d1..77a3c3e85 100644
--- a/site/src/components/BenchResultCard.astro
+++ b/site/src/components/BenchResultCard.astro
@@ -172,23 +172,15 @@ const statesOf = (load: BenchCard['loads'][number]): readonly CellOutcome[] => [
     {card.loads.map(load => (
         <div class="bench-load-panel" data-load={load.id} hidden={load.id !== opening?.id}>
             {/*
-              * The load's own note about itself: why its comparison is
-              * withheld, or what state every arm on it shares. Nothing to say
-              * leaves no row, so the paragraph is only rendered where there
-              * is something to read - an always-present element with nothing
-              * inside it is invisible on screen but still there for `:empty`
-              * and similar checks to miss.
+              * The load's own note about itself: what state every arm on it
+              * shares. Nothing to say leaves no row, so the paragraph is only
+              * rendered where there is something to read - an always-present
+              * element with nothing inside it is invisible on screen but still
+              * there for `:empty` and similar checks to miss.
               */}
-            {(load.withheld !== undefined || statesOf(load).length > 0) && (
+            {statesOf(load).length > 0 && (
                 <p class="meta">
-                    {load.withheld !== undefined ? (
-                        <>
-                            <span class="status withheld">Not comparable</span>
-                            <span class="reason">{load.withheld}</span>
-                        </>
-                    ) : (
-                        <span class="status">{OUTCOME_STATUS[statesOf(load)[0] ?? 'absent']}</span>
-                    )}
+                    <span class="status">{OUTCOME_STATUS[statesOf(load)[0] ?? 'absent']}</span>
                 </p>
             )}
 
@@ -196,20 +188,9 @@ const statesOf = (load: BenchCard['loads'][number]): readonly CellOutcome[] => [
                 {load.arms.map(arm => (
                     <li class:list={['arm', { reference: arm.reference, absent: arm.ms === null }]}>
                         <span class="name">{arm.label}</span>
-                        {/*
-                          * A withheld row draws no track at all. Its bars would
-                          * be durations like any other, but side by side they
-                          * are read as the comparison the row is published
-                          * without, and an empty track under every row reads as
-                          * a chart that failed to draw.
-                          */}
-                        {load.withheld === undefined ? (
-                            <span class="track">
-                                {widthOf(arm.ms, load.maxMs) !== null && <span class="bar" style={`width:${String(widthOf(arm.ms, load.maxMs))}%`} />}
-                            </span>
-                        ) : (
-                            <span />
-                        )}
+                        <span class="track">
+                            {widthOf(arm.ms, load.maxMs) !== null && <span class="bar" style={`width:${String(widthOf(arm.ms, load.maxMs))}%`} />}
+                        </span>
                         <span class="time">
                             {arm.ms === null ? (
                                 <span class="state">{OUTCOME_STATUS[arm.outcome]}</span>
@@ -328,14 +309,6 @@ const statesOf = (load: BenchCard['loads'][number]): readonly CellOutcome[] => [
         margin-left: auto;
     }
 
-    /* Forced onto its own line under the status badge: the reason reads as a caption to it, not a second fact beside it. */
-    .reason {
-        flex-basis: 100%;
-        font-size: 0.74rem;
-        line-height: 1.45;
-        text-wrap: pretty;
-    }
-
     /* No frame, no ground: the card is already the box, and the global `.panel` rule is what used to draw a second one here. */
     .bench-load-panel {
         border: 0;
diff --git a/site/src/components/pages/BenchmarksPage.astro b/site/src/components/pages/BenchmarksPage.astro
index 8628ece28..2efd4bfef 100644
--- a/site/src/components/pages/BenchmarksPage.astro
+++ b/site/src/components/pages/BenchmarksPage.astro
@@ -11,8 +11,7 @@
  * `bench-cards.ts` before any run happens, so the top of the page cannot become
  * a selection of whatever ExoJS won.
  *
- * The page carries cards and nothing else. A withheld comparison states its own
- * reason on the card that withholds it, and the full per-row report - every
+ * The page carries cards and nothing else. The full per-row report - every
  * measured load, its spread and the rows the harness left out - is its own
  * page, linked once rather than repeated on every card that would otherwise
  * say the same thing.
diff --git a/site/src/content/guide/debugging/renderer-sdk-contract.mdx b/site/src/content/guide/debugging/renderer-sdk-contract.mdx
index 04f8e848d..6e9d9bc58 100644
--- a/site/src/content/guide/debugging/renderer-sdk-contract.mdx
+++ b/site/src/content/guide/debugging/renderer-sdk-contract.mdx
@@ -84,6 +84,8 @@ Recorded batches reference a `RetainedGroupBundle` you own. One field carries th
 
 Set `nodeCount` on a batch whenever one render node expands into several GPU instances — a tile chunk, a nine-slice, a repeating sprite, a text run. `instanceCount` is the replay draw's instance argument, not a node count, and without `nodeCount` the recorded tier reports instances where the live and entry-replay tiers report nodes. A node is booked once, against whichever batch was open when its first instance was written.
 
+For WebGL2, return `false` from `replayRetainedBatch` when a defensive check prevents drawing. The backend then leaves `batches` and `drawCalls` unchanged. Returning `true` or nothing keeps descriptor-based accounting, so existing SDK replayers remain compatible. WebGPU replayers increment these two counters after issuing a draw. Both backends count `submittedNodes` before replay, including submissions that cannot draw.
+
 ## Seam 4 — the pass coordinator
 
 Target, view, clear, the scissor stack and the stencil-clip stack belong to the backend's `passCoordinator`. Reach it through the backend when you need a pass of your own:
diff --git a/site/src/lib/bench-cards.ts b/site/src/lib/bench-cards.ts
index 6e4653968..32145f919 100644
--- a/site/src/lib/bench-cards.ts
+++ b/site/src/lib/bench-cards.ts
@@ -19,7 +19,7 @@
  */
 
 import type { BenchProfileDocument, ProfileBackendName, ProfileCell, ProfileRow, ProfileSection } from './bench-profiles';
-import { armLabel, formatLoad, isQuantitative, isWasmReferenceArm, orderArms, OUTCOME_ORDER, outcomeOf, publishedMs, withheldScenario } from './bench-profiles';
+import { armLabel, formatLoad, isQuantitative, isWasmReferenceArm, orderArms, OUTCOME_ORDER, outcomeOf, publishedMs } from './bench-profiles';
 
 /** One arm's time on one load of one scenario. */
 export interface CardArm {
@@ -61,15 +61,6 @@ export interface CardLoad {
   readonly arms: readonly CardArm[];
   /** Largest plottable figure on this load, for scaling the bars. */
   readonly maxMs: number;
-  /**
-   * Why this load publishes no cross-arm comparison, or `undefined` where it
-   * publishes one; see `withheldScenario`.
-   *
-   * A withheld load keeps every arm's time and loses every bar, factor and
-   * winner: the arms ran the same scene and are not doing the same work in it,
-   * which a bar length would assert they were.
-   */
-  readonly withheld: string | undefined;
 }
 
 /** One scenario's card. */
@@ -201,16 +192,8 @@ const loadOf = (row: ProfileRow): CardLoad | null => {
     return null;
   }
 
-  const withheld = withheldScenario(row.archetype);
   const cells = orderArms(row.cells, cell => cell.competitor);
-  // A withheld row loses its quantitative treatment wholesale rather than per
-  // arm: the doubt is about the comparison, so no arm in it may keep a bar.
-  const canonical = [reference, ...cells.map(competitorArm)].map(arm => (withheld === undefined ? arm : { ...arm, quantitative: false }));
-  // Sorted even where the comparison is withheld. The order is the reader's way
-  // through the rows and the same one on every card, and leaving a withheld
-  // load in canonical order does not stop anyone ranking four printed numbers,
-  // it only makes them do it by eye. That these times are not a ranking is said
-  // where it belongs, on the load's own marker.
+  const canonical = [reference, ...cells.map(competitorArm)];
   const arms = fastestFirst(canonical);
   // Every published figure sets the scale, because the bars are durations: an
   // arm whose PAIR the clock could not separate still took the time it reports,
@@ -225,7 +208,6 @@ const loadOf = (row: ProfileRow): CardLoad | null => {
     primary: row.primary ?? false,
     arms,
     maxMs: plotted.length > 0 ? Math.max(...plotted) : 0,
-    withheld,
   };
 };
 
diff --git a/site/src/lib/bench-profiles.ts b/site/src/lib/bench-profiles.ts
index caf1d8320..b3b4274ae 100644
--- a/site/src/lib/bench-profiles.ts
+++ b/site/src/lib/bench-profiles.ts
@@ -660,28 +660,6 @@ const ARCHETYPE_TITLES: Readonly<Record<string, string>> = {
   'settling-pile': 'Settling pile',
 };
 
-/**
- * Scenarios whose CROSS-ARM comparison is withheld, and why.
- *
- * Not a scenario that is hidden, and not one that is dropped from the page: the
- * arms all ran it, and each arm's own times are published. What is withheld is
- * the comparison between them - no factor, no winner, no bar read as a
- * performance claim - because the arms are known not to be doing the same work.
- *
- * Withholding is a statement about the measurement and never about the result.
- * A row is listed here only for a documented reason that applies whichever way
- * the figures came out, and a row is never listed because ExoJS trails on it;
- * removing a losing card and quietly keeping a winning one is exactly what a
- * fixed headline set exists to prevent.
- */
-const WITHHELD_SCENARIOS: Readonly<Record<string, string>> = {
-  joints:
-    'On the published profiles the chains had settled and every arm that sleeps was idle: Nape-JS took less than the clock resolved, and the other figures set a solver at work against one at rest. The scene now keeps the chains moving, and the comparison returns with the next reference measurement.',
-};
-
-/** Why a scenario publishes no cross-arm comparison, or `undefined` where it publishes one. */
-export const withheldScenario = (archetype: string): string | undefined => WITHHELD_SCENARIOS[archetype];
-
 /** The readable title for a scenario, falling back to its id where none is written. */
 export const archetypeTitle = (archetype: string): string => ARCHETYPE_TITLES[archetype] ?? archetype;
 
diff --git a/src/rendering/coreRendererBindings.ts b/src/rendering/coreRendererBindings.ts
index e79a08e00..adebc80ae 100644
--- a/src/rendering/coreRendererBindings.ts
+++ b/src/rendering/coreRendererBindings.ts
@@ -9,13 +9,11 @@ import { BitmapText } from '#rendering/text/BitmapText';
 import { Text } from '#rendering/text/Text';
 import { Video } from '#rendering/video/Video';
 import { WebGl2MeshRenderer } from '#rendering/webgl2/WebGl2MeshRenderer';
-import { WebGl2NineSliceSpriteRenderer } from '#rendering/webgl2/WebGl2NineSliceSpriteRenderer';
-import { WebGl2RepeatingSpriteRenderer } from '#rendering/webgl2/WebGl2RepeatingSpriteRenderer';
+import { WebGl2ScalableSpriteRenderer } from '#rendering/webgl2/WebGl2ScalableSpriteRenderer';
 import { WebGl2SpriteRenderer } from '#rendering/webgl2/WebGl2SpriteRenderer';
 import { WebGl2TextRenderer } from '#rendering/webgl2/WebGl2TextRenderer';
 import { WebGpuMeshRenderer } from '#rendering/webgpu/WebGpuMeshRenderer';
-import { WebGpuNineSliceSpriteRenderer } from '#rendering/webgpu/WebGpuNineSliceSpriteRenderer';
-import { WebGpuRepeatingSpriteRenderer } from '#rendering/webgpu/WebGpuRepeatingSpriteRenderer';
+import { WebGpuScalableSpriteRenderer } from '#rendering/webgpu/WebGpuScalableSpriteRenderer';
 import { WebGpuSpriteRenderer } from '#rendering/webgpu/WebGpuSpriteRenderer';
 import { WebGpuTextRenderer } from '#rendering/webgpu/WebGpuTextRenderer';
 import { WebGpuVideoRenderer } from '#rendering/webgpu/WebGpuVideoRenderer';
@@ -48,13 +46,9 @@ export const buildCoreRendererBindings = (options: RenderingApplicationOptions):
     [RenderBackendType.WebGl2]: () => new WebGl2TextRenderer(),
     [RenderBackendType.WebGpu]: () => new WebGpuTextRenderer(),
   };
-  const nineSliceRenderers: BackendRendererMap<NineSliceSprite> = {
-    [RenderBackendType.WebGl2]: () => new WebGl2NineSliceSpriteRenderer(spriteRendererBatchSize),
-    [RenderBackendType.WebGpu]: () => new WebGpuNineSliceSpriteRenderer(),
-  };
-  const repeatingSpriteRenderers: BackendRendererMap<RepeatingSprite> = {
-    [RenderBackendType.WebGl2]: () => new WebGl2RepeatingSpriteRenderer(spriteRendererBatchSize),
-    [RenderBackendType.WebGpu]: () => new WebGpuRepeatingSpriteRenderer(),
+  const scalableSpriteRenderers: BackendRendererMap<NineSliceSprite | RepeatingSprite> = {
+    [RenderBackendType.WebGl2]: () => new WebGl2ScalableSpriteRenderer(spriteRendererBatchSize),
+    [RenderBackendType.WebGpu]: () => new WebGpuScalableSpriteRenderer(),
   };
   const videoRenderers: BackendRendererMap<Video> = {
     [RenderBackendType.WebGpu]: () => new WebGpuVideoRenderer(),
@@ -66,7 +60,6 @@ export const buildCoreRendererBindings = (options: RenderingApplicationOptions):
     defineRendererBinding([Mesh], backend => meshRenderers[backend.backendType]?.()),
     // Text and BitmapText share the same renderer class - one multi-target binding.
     defineRendererBinding([Text, BitmapText], backend => textRenderers[backend.backendType]?.()),
-    defineRendererBinding([NineSliceSprite], backend => nineSliceRenderers[backend.backendType]?.()),
-    defineRendererBinding([RepeatingSprite], backend => repeatingSpriteRenderers[backend.backendType]?.()),
+    defineRendererBinding([NineSliceSprite, RepeatingSprite], backend => scalableSpriteRenderers[backend.backendType]?.()),
   ];
 };
diff --git a/src/rendering/plan/DerivedRootProduct.ts b/src/rendering/plan/DerivedRootProduct.ts
index c66dfc09f..33e4048e7 100644
--- a/src/rendering/plan/DerivedRootProduct.ts
+++ b/src/rendering/plan/DerivedRootProduct.ts
@@ -327,12 +327,12 @@ export class DerivedRootProduct {
         // A table sized only now has no previous assignment to diff against, so
         // every admitted item enters - which is what the backend's empty stores
         // require anyway.
-        this.slots.update(scopes[0]!, this._current, null);
+        this.slots.update(scopes[0]!, this._current, null, this._queried);
 
         return;
       }
 
-      this.slots.update(scopes[0]!, this._current, hadPrevious ? this._previous : null);
+      this.slots.update(scopes[0]!, this._current, hadPrevious ? this._previous : null, this._queried);
     }
   }
 
diff --git a/src/rendering/plan/DerivedSelectionState.ts b/src/rendering/plan/DerivedSelectionState.ts
index d19b85b35..a5c2232f8 100644
--- a/src/rendering/plan/DerivedSelectionState.ts
+++ b/src/rendering/plan/DerivedSelectionState.ts
@@ -272,7 +272,7 @@ export class DerivedSelectionState {
    * ordinal; pass `null` when there is none, in which case every admitted item
    * is treated as entering.
    */
-  public update(rootScope: SourceScope, current: readonly MembershipBits[], previous: readonly MembershipBits[] | null): void {
+  public update(rootScope: SourceScope, current: readonly MembershipBits[], previous: readonly MembershipBits[] | null, queried?: Uint8Array): void {
     resetSlotStats(this.stats);
     this._enteredCount = 0;
     this._orderCount = 0;
@@ -288,7 +288,7 @@ export class DerivedSelectionState {
     }
 
     this._admitTree(rootScope, current, previous);
-    this._walkScope(rootScope, current);
+    this._walkScope(rootScope, current, queried);
     this.stats.orderEntries = this._orderCount;
     this.stats.slotCapacity = this._slotCount;
   }
@@ -442,13 +442,11 @@ export class DerivedSelectionState {
    *
    * This is the same walk `RenderPlanBuilder._emitSourceSelection` performs, and
    * it has to stay the same walk: the order stream IS the draw order, so any
-   * divergence here is a reordered frame. Nested groups are entered
-   * unconditionally rather than behind their subtree cull test - the per-item
-   * membership already answers that question, and an empty nested scope
-   * contributes nothing to append. A live entry is never culled here either:
-   * its own collect applies whatever cull its node has.
+   * divergence here is a reordered frame. Only queried groups are entered:
+   * empty membership alone cannot distinguish a culled subtree from a visible
+   * group containing live entries. A live entry's own collect applies its cull.
    */
-  private _walkScope(scope: SourceScope, current: readonly MembershipBits[]): void {
+  private _walkScope(scope: SourceScope, current: readonly MembershipBits[], queried?: Uint8Array): void {
     const bits = current[scope.ordinal]!;
     const words = bits.words;
     const wordCount = bits.wordCount;
@@ -481,8 +479,12 @@ export class DerivedSelectionState {
           other++;
 
           if (nested.kind === RenderEntryKind.Group) {
+            if (queried?.[nested.ordinal] === 0) {
+              continue;
+            }
+
             this._orderCount = cursor;
-            this._walkScope(nested, current);
+            this._walkScope(nested, current, queried);
             cursor = this._orderCount;
           } else {
             this._mark(cursor, nested);
@@ -501,7 +503,9 @@ export class DerivedSelectionState {
       other++;
 
       if (nested.kind === RenderEntryKind.Group) {
-        this._walkScope(nested, current);
+        if (queried?.[nested.ordinal] !== 0) {
+          this._walkScope(nested, current, queried);
+        }
       } else {
         this._mark(this._orderCount, nested);
       }
diff --git a/src/rendering/plan/RenderPlanBuilder.ts b/src/rendering/plan/RenderPlanBuilder.ts
index 1b87b93b8..8a23017ff 100644
--- a/src/rendering/plan/RenderPlanBuilder.ts
+++ b/src/rendering/plan/RenderPlanBuilder.ts
@@ -1247,7 +1247,7 @@ export class RenderPlanBuilder {
     const rect = this._captureCullRect;
 
     product.beginSelection();
-    this._selectMembership(rootScope, product, source);
+    const culled = this._selectMembership(rootScope, product, source);
     product.commitSelection(source.scopes);
 
     const slots = product.slots;
@@ -1275,9 +1275,7 @@ export class RenderPlanBuilder {
       backend._writePersistentSlots!(bundle, source, slots.entered, slots.enteredCount);
     }
 
-    // One note for the whole root rather than one per item: the count is exact
-    // either way, and it is what proves the tier still culls.
-    this.backend.stats.culledNodes += source.itemCount - product.delta.visible;
+    this.backend.stats.culledNodes += culled;
     representation.notePersistentSelection(rect);
 
     const record = representation.persistentDrawRecord(bundle, slots);
@@ -1328,19 +1326,26 @@ export class RenderPlanBuilder {
   /**
    * Fill every scope's membership without emitting anything.
    *
-   * The subtree cull a nested group gets on the ordinary path is deliberately
-   * absent: it is an optimisation over a per-item test, and here the per-item
-   * test is the spatial index, which already answers for a fully off-screen
-   * group in the time it takes to reject its cells.
+   * Apply the selection tier's subtree cull before querying descendants. The
+   * queried-scope bitmap also keeps their live marks out of the slot stream.
    */
-  private _selectMembership(scope: SourceScope, product: DerivedRootProduct, source: RenderRootSource): void {
+  private _selectMembership(scope: SourceScope, product: DerivedRootProduct, source: RenderRootSource): number {
+    const visibleBefore = product.delta.visible;
+
     product.selectScope(scope, this._captureCullRect, source.visibility);
+    let culled = scope.items.count - (product.delta.visible - visibleBefore);
 
     for (const other of scope.others) {
       if (other.kind === RenderEntryKind.Group) {
-        this._selectMembership(other, product, source);
+        if (other.node._inCullRect(this._captureCullRect)) {
+          culled += this._selectMembership(other, product, source);
+        } else {
+          culled++;
+        }
       }
     }
+
+    return culled;
   }
 
   /**
diff --git a/src/rendering/webgl2/WebGl2Backend.ts b/src/rendering/webgl2/WebGl2Backend.ts
index 3b3ca3b97..c25cb2b63 100644
--- a/src/rendering/webgl2/WebGl2Backend.ts
+++ b/src/rendering/webgl2/WebGl2Backend.ts
@@ -2298,9 +2298,8 @@ export class WebGl2Backend implements RenderBackend {
    * group scope. The pending live batch drains first (in practice the group
    * boundary's transform switch already flushed it - hook contract), then the
    * owning renderer re-issues the batch from group-owned resources with all
-   * state resolved live. Stats are bumped from the descriptor so the spliced
-   * tier stays comparable with the entry tiers (batches / drawCalls /
-   * submittedNodes parity).
+   * state resolved live. Submitted nodes follow the descriptor; a renderer
+   * returning false suppresses draw counters when its resources cannot draw.
    * @internal
    */
   public replayRetainedBatch(batch: RetainedBatchInstruction): void {
@@ -2317,12 +2316,13 @@ export class WebGl2Backend implements RenderBackend {
     }
 
     this._bindRenderTarget(this._renderTarget);
-    payload.replayer.replayRetainedBatch(payload);
-    this._stats.batches++;
-    this._stats.drawCalls += batch.drawCalls;
     // Nodes, not instances: a batch whose renderer expands one node into many
     // instances records its own node count (see RetainedBatchInstruction).
     this._stats.submittedNodes += batch.nodeCount ?? batch.instanceCount;
+    if (payload.replayer.replayRetainedBatch(payload) !== false) {
+      this._stats.batches++;
+      this._stats.drawCalls += batch.drawCalls;
+    }
   }
 
   public destroy(): void {
diff --git a/src/rendering/webgl2/WebGl2MeshRenderer.ts b/src/rendering/webgl2/WebGl2MeshRenderer.ts
index f3a41b0bf..114039c02 100644
--- a/src/rendering/webgl2/WebGl2MeshRenderer.ts
+++ b/src/rendering/webgl2/WebGl2MeshRenderer.ts
@@ -769,7 +769,7 @@ export class WebGl2MeshRenderer extends AbstractWebGl2Renderer<Mesh> implements
    * (`drawElementsInstanced`), unlike the sprite path's `drawArraysInstanced`.
    * @internal
    */
-  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): void {
+  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): boolean {
     const backend = this.getBackendOrNull();
     const vao = payload.vao;
     const geometry = payload.geometry;
@@ -779,7 +779,7 @@ export class WebGl2MeshRenderer extends AbstractWebGl2Renderer<Mesh> implements
     if (backend === null || vao === null || geometry === null || geometry === undefined || transformTexture === null || tintTexture === null) {
       // Defensive: a bundle in this state never validates (generation), so a
       // spliced replay cannot reach here; skip rather than crash mid-frame.
-      return;
+      return false;
     }
 
     const shader = this._defaultShader;
@@ -819,6 +819,8 @@ export class WebGl2MeshRenderer extends AbstractWebGl2Renderer<Mesh> implements
     shader.sync();
     backend.bindVertexArrayObject(vao);
     vao.drawInstanced(geometry.indexCount, 0, payload.instanceCount, RenderingPrimitives.Triangles);
+
+    return true;
   }
 
   private _canBatchStatic(draw: PendingMeshDraw): boolean {
diff --git a/src/rendering/webgl2/WebGl2NineSliceSpriteRenderer.ts b/src/rendering/webgl2/WebGl2NineSliceSpriteRenderer.ts
deleted file mode 100644
index 245a8924e..000000000
--- a/src/rendering/webgl2/WebGl2NineSliceSpriteRenderer.ts
+++ /dev/null
@@ -1,534 +0,0 @@
-import { packedGroupChanged } from '#rendering/affinePacking';
-import type { NineSliceQuad } from '#rendering/sprite/nineSlice';
-import type { NineSliceSprite } from '#rendering/sprite/NineSliceSprite';
-import type { RenderTexture } from '#rendering/texture/RenderTexture';
-import type { Texture } from '#rendering/texture/Texture';
-import { BlendModes, BufferTypes, BufferUsage, RenderingPrimitives } from '#rendering/types';
-import type { View } from '#rendering/View';
-import { WebGl2Shader } from '#rendering/webgl2/WebGl2Shader';
-
-import { AbstractWebGl2Renderer } from './AbstractWebGl2Renderer';
-import { createWebGl2ShaderProgram } from './shaderProgram';
-import nineSliceFragmentSource from './shaders/nine-slice.frag';
-import nineSliceVertexSource from './shaders/nine-slice.vert';
-import type { WebGl2Backend } from './WebGl2Backend';
-import { uploadBufferRange, uploadBufferStore, WebGl2RenderBuffer, type WebGl2RenderBufferRuntime } from './WebGl2RenderBuffer';
-import type { WebGl2RetainedBatchPayload, WebGl2RetainedBatchReplayer, WebGl2RetainedNodeIndexRange } from './WebGl2RetainedGroupResources';
-import { WebGl2VertexArrayObject, type WebGl2VertexArrayObjectRuntime } from './WebGl2VertexArrayObject';
-
-const instanceStrideBytes = 32;
-const wordsPerInstance = instanceStrideBytes / Uint32Array.BYTES_PER_ELEMENT;
-const transformTextureUnit = 1;
-const identityGroupMat3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
-
-interface NineSliceRendererConnection {
-  readonly gl: WebGL2RenderingContext;
-  readonly buffers: Map<WebGl2RenderBuffer, { handle: WebGLBuffer; dataByteLength: number }>;
-  readonly vaoHandle: WebGLVertexArrayObject;
-}
-
-/** Instanced renderer for {@link NineSliceSprite} using WebGL2. */
-export class WebGl2NineSliceSpriteRenderer extends AbstractWebGl2Renderer<NineSliceSprite> implements WebGl2RetainedBatchReplayer {
-  /**
-   * Retained-batch capability opt-in: a nine-slice
-   * group's per-flush instanced batches (fixed 32-byte layout, node index at
-   * word 7 - the same seam as the sprite renderer) can be recorded into a
-   * group's instruction set and replayed from group-owned resources.
-   * Pixel-snapped draws are excluded by the collect-time recordability
-   * predicate (and belt-and-braces poisoning in {@link render}); nine-slice
-   * has no custom-material path to exclude.
-   * @internal
-   */
-  public readonly supportsRetainedBatches = true;
-
-  private readonly _shader: WebGl2Shader;
-  private readonly _batchSize: number;
-  private readonly _instanceData: ArrayBuffer;
-  private readonly _instanceFloat32: Float32Array;
-  private readonly _instanceUint32: Uint32Array;
-
-  private readonly _transformUnitScratch: Int32Array = new Int32Array([transformTextureUnit]);
-  // Pinned unit index for the single base texture sampler (unit 0), reused by
-  // the live flush and retained replay so both stay allocation-free.
-  private readonly _baseTextureUnitScratch: Int32Array = new Int32Array([0]);
-  // Reused single-slot texture list handed to the backend at record time; the
-  // nine-slice batch always binds exactly one base texture (slot 0).
-  private readonly _recordTextures: Array<Texture | RenderTexture | null> = [null];
-
-  private _quadIndex = 0;
-  private _maxNodeIndex = 0;
-  // Render nodes booked against the PENDING batch, and whether the node being
-  // rendered right now has already been booked. One node emits up to nine quad
-  // instances, so the recorded batch's `submittedNodes` contribution is this
-  // count and not `_quadIndex`. A node whose quads chunk across several batches
-  // is booked once, against the batch its first chunk lands in.
-  private _batchNodeCount = 0;
-  private _nodeBooked = false;
-  // Blend mode and base texture of the batch currently accumulating, used to
-  // detect a batch break. Neither is a mirror of backend state: `flush()`
-  // establishes both at the draw (see {@link _resetBatchState}).
-  private _currentBlendMode: BlendModes | null = null;
-  private _currentTexture: Texture | RenderTexture | null = null;
-  private _currentView: View | null = null;
-  private _currentViewId = -1;
-  private _hasWrittenGroup = false;
-  private readonly _writtenGroupData = new Float32Array(9);
-
-  private _instanceBuffer: WebGl2RenderBuffer | null = null;
-  private _vao: WebGl2VertexArrayObject | null = null;
-  private _connection: NineSliceRendererConnection | null = null;
-
-  public constructor(batchSize: number) {
-    super();
-
-    this._batchSize = batchSize;
-    this._shader = new WebGl2Shader(nineSliceVertexSource, nineSliceFragmentSource);
-    this._instanceData = new ArrayBuffer(batchSize * instanceStrideBytes);
-    this._instanceFloat32 = new Float32Array(this._instanceData);
-    this._instanceUint32 = new Uint32Array(this._instanceData);
-  }
-
-  public render(sprite: NineSliceSprite): void {
-    const backend = this.getBackend();
-
-    // Always upload the raw content quads. Geometry-mode boundary snapping is
-    // resolved in the vertex shader (the `snapBoundary` block, gated on the
-    // row's snap flag), so no CPU quad snap happens here and logical geometry
-    // is never mutated. Shared quad edges snap identically in-shader, keeping
-    // the internal seams closed.
-    const quads: readonly NineSliceQuad[] = sprite.quads;
-
-    this._nodeBooked = false;
-
-    if (quads.length === 0) {
-      return;
-    }
-
-    const texture = sprite.texture;
-    const blendMode = sprite.blendMode;
-    const tintRgba = sprite.tint.toRgba8();
-
-    const command = backend.activeDrawCommand;
-    const nodeIndex = command !== null ? command.nodeIndex : backend.pushTransform(sprite);
-
-    const textureChanged = this._currentTexture !== null && texture !== this._currentTexture;
-    const blendModeChanged = this._currentBlendMode !== null && blendMode !== this._currentBlendMode;
-
-    // If the batch would overflow with current quads + new quads, flush first.
-    if (this._quadIndex > 0 && (blendModeChanged || textureChanged || this._quadIndex + quads.length > this._batchSize)) {
-      this.flush();
-    }
-
-    this._currentBlendMode = blendMode;
-    this._currentTexture = texture;
-
-    // A single sprite may produce more quads than the fixed batch buffer can hold.
-    // Process in [start, end) chunks, flushing between each. Iterating by index
-    // range (rather than `quads.slice(...)`) keeps the overflow path allocation-free.
-    let offset = 0;
-
-    while (offset < quads.length) {
-      const chunkEnd = Math.min(offset + this._batchSize, quads.length);
-
-      this._writeQuadChunk(quads, offset, chunkEnd, texture, tintRgba, nodeIndex);
-
-      offset = chunkEnd;
-
-      if (offset < quads.length) {
-        this.flush();
-        this._currentBlendMode = blendMode;
-        this._currentTexture = texture;
-      }
-    }
-  }
-
-  private _writeQuadChunk(
-    quads: readonly NineSliceQuad[],
-    start: number,
-    end: number,
-    texture: Texture | RenderTexture,
-    tintRgba: number,
-    nodeIndex: number,
-  ): void {
-    const f32 = this._instanceFloat32;
-    const u32 = this._instanceUint32;
-    const flipY = texture.flipY;
-
-    // Booked here rather than in render(): any flush this node's chunking loop
-    // triggers has already happened, so the node lands on the batch that
-    // actually holds its first quad.
-    if (!this._nodeBooked) {
-      this._nodeBooked = true;
-      this._batchNodeCount++;
-    }
-
-    for (let i = start; i < end; i++) {
-      // In-bounds: callers pass `[start, end)` ⊆ `[0, quads.length)`.
-      const q = quads[i]!;
-      const idx = this._quadIndex * wordsPerInstance;
-
-      f32[idx + 0] = q.x0;
-      f32[idx + 1] = q.y0;
-      f32[idx + 2] = q.x1;
-      f32[idx + 3] = q.y1;
-
-      const uMin = (q.u0 * 0xffff) & 0xffff;
-      const uMax = (q.u1 * 0xffff) & 0xffff;
-      const v0Raw = (q.v0 * 0xffff) & 0xffff;
-      const v1Raw = (q.v1 * 0xffff) & 0xffff;
-      const vMin = flipY ? v1Raw : v0Raw;
-      const vMax = flipY ? v0Raw : v1Raw;
-
-      u32[idx + 4] = uMin | (vMin << 16);
-      u32[idx + 5] = uMax | (vMax << 16);
-      u32[idx + 6] = tintRgba;
-      u32[idx + 7] = nodeIndex >>> 0;
-
-      this._quadIndex++;
-
-      if (nodeIndex > this._maxNodeIndex) {
-        this._maxNodeIndex = nodeIndex;
-      }
-    }
-  }
-
-  public flush(): void {
-    const backend = this.getBackendOrNull();
-    const instanceBuffer = this._instanceBuffer;
-    const vao = this._vao;
-
-    if (this._quadIndex === 0 || backend === null || instanceBuffer === null || vao === null) {
-      this._resetBatchState();
-      return;
-    }
-
-    this._stageViewUniforms(backend);
-
-    // Blend state and texture unit 0 are global and shared with every other
-    // renderer, so this batch establishes both at its own draw instead of
-    // trusting what it left behind when it started accumulating. The backend
-    // deduplicates a redundant call, and only the bind carries the upload of a
-    // payload that changed under a stable texture identity.
-    if (this._currentTexture !== null) {
-      backend.bindTexture(this._currentTexture, 0);
-      this._shader.getUniform('u_texture').setValue(this._baseTextureUnitScratch);
-    }
-
-    backend.bindTransformBufferTexture(transformTextureUnit, this._maxNodeIndex + 1);
-    this._shader.getUniform('u_transforms').setValue(this._transformUnitScratch);
-
-    this._shader.sync();
-    backend.bindVertexArrayObject(vao);
-    instanceBuffer.upload(this._instanceFloat32, 0, this._quadIndex * wordsPerInstance);
-    backend.setBlendMode(this._currentBlendMode ?? BlendModes.Normal);
-    vao.drawInstanced(4, 0, this._quadIndex, RenderingPrimitives.TriangleStrip);
-    backend.stats.batches++;
-    backend.stats.drawCalls++;
-
-    // Retained recording: while a capture window is open, hand the
-    // exact packed instance words of this flush to the backend - byte-identical
-    // to what just drew, no duplicated packing logic. The nine-slice batch
-    // always binds a single base texture (slot 0); a pixel-snapped draw already
-    // poisoned the capture in render().
-    if (backend._isRetainedCapturing && this._currentTexture !== null) {
-      this._recordTextures[0] = this._currentTexture;
-      backend.recordRetainedBatch(
-        this,
-        this._instanceUint32.subarray(0, this._quadIndex * wordsPerInstance),
-        this._quadIndex,
-        this._currentBlendMode ?? BlendModes.Normal,
-        this._recordTextures,
-        1,
-        null,
-        null,
-        this._batchNodeCount,
-      );
-    }
-
-    this._resetBatchState();
-  }
-
-  /**
-   * Scope the batch memos to one batch: they describe what is accumulating, not
-   * what GL holds, so a memo that outlived its flush would let the next batch
-   * skip establishing state another renderer has since changed - and would keep
-   * a destroyed texture reachable past its `destroy()`.
-   */
-  private _resetBatchState(): void {
-    this._quadIndex = 0;
-    this._maxNodeIndex = 0;
-    this._batchNodeCount = 0;
-    this._currentBlendMode = null;
-    this._currentTexture = null;
-  }
-
-  /**
-   * Stage `u_projection` (live view) and `u_group` (live composed group matrix)
-   * on the shader, guarded by the cached view/group stamps. Shared by the live
-   * flush path and retained-batch replay - replay resolves exactly the same
-   * live state a slow-path flush would.
-   */
-  private _stageViewUniforms(backend: WebGl2Backend): void {
-    const view = backend.view;
-
-    if (this._currentView !== view || this._currentViewId !== view.updateId) {
-      this._currentView = view;
-      this._currentViewId = view.updateId;
-      this._shader.getUniform('u_projection').setValue(view.getTransform().toArray(false));
-    }
-
-    if (this._shader.uniforms.has('u_group')) {
-      const groupTransform = backend.renderGroupTransform;
-      const groupData = groupTransform !== null ? groupTransform.toArray(false) : identityGroupMat3;
-
-      if (!this._hasWrittenGroup || packedGroupChanged(groupData, this._writtenGroupData, 0)) {
-        this._shader.getUniform('u_group').setValue(groupData);
-        this._writtenGroupData.set(groupData);
-        this._hasWrittenGroup = true;
-      }
-    }
-
-    backend.stageViewportUniform(this._shader);
-  }
-
-  // ── Retained-batch record/replay ──────────────────────────────────────────
-  // The bundle stores raw instance bytes; this renderer owns the 32-byte
-  // layout (node index at word 7), so the layout-aware finalize steps
-  // (node-index scan/rebase, VAO attribute wiring) and the replay dispatch
-  // live here - mirroring WebGl2SpriteRenderer's seam, adapted to nine-slice's
-  // single-texture, per-instance-tint attribute set.
-
-  /** @internal See {@link WebGl2RetainedBatchReplayer.scanRetainedNodeIndexRange}. */
-  public scanRetainedNodeIndexRange(payload: WebGl2RetainedBatchPayload, range: WebGl2RetainedNodeIndexRange): void {
-    const words = payload.bundle.instanceWords;
-    const start = payload.byteOffset / Uint32Array.BYTES_PER_ELEMENT;
-
-    for (let i = 0; i < payload.instanceCount; i++) {
-      // In-bounds: the payload's word range was appended to the bundle store.
-      // nodeIndex is the last word of the 32-byte (8-word) instance layout.
-      const node = words[start + i * wordsPerInstance + 7]!;
-
-      if (node < range.min) {
-        range.min = node;
-      }
-
-      if (node > range.max) {
-        range.max = node;
-      }
-    }
-  }
-
-  /** @internal See {@link WebGl2RetainedBatchReplayer.rebaseRetainedNodeIndices} (rebases to group-local indices). */
-  public rebaseRetainedNodeIndices(payload: WebGl2RetainedBatchPayload, base: number): void {
-    const words = payload.bundle.instanceWords;
-    const start = payload.byteOffset / Uint32Array.BYTES_PER_ELEMENT;
-
-    for (let i = 0; i < payload.instanceCount; i++) {
-      const index = start + i * wordsPerInstance + 7;
-
-      // In-bounds: see the scan above.
-      words[index] = (words[index]! - base) >>> 0;
-    }
-  }
-
-  /**
-   * Point the batch VAO's per-instance attributes at the bundle's persistent
-   * instance buffer, based at the batch's byte offset (WebGL2 has no
-   * baseInstance, hence one small VAO per recorded batch). Same attribute
-   * set/locations as the live VAO in {@link onConnect}.
-   * @internal
-   */
-  public configureRetainedVao(payload: WebGl2RetainedBatchPayload): void {
-    const gl = this.getBackend().context;
-    const buffer = payload.bundle.instanceBuffer;
-    const vao = payload.vao;
-
-    if (buffer === null || vao === null) {
-      throw new Error('WebGl2NineSliceSpriteRenderer: retained batch VAO configuration requires an uploaded bundle.');
-    }
-
-    const base = payload.byteOffset;
-
-    vao
-      .addAttribute(buffer, this._shader.getAttribute('a_quadBounds'), gl.FLOAT, false, instanceStrideBytes, base + 0, false, 1)
-      .addAttribute(buffer, this._shader.getAttribute('a_uvBounds'), gl.UNSIGNED_SHORT, true, instanceStrideBytes, base + 16, false, 1)
-      .addAttribute(buffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, instanceStrideBytes, base + 24, false, 1)
-      .addAttribute(buffer, this._shader.getAttribute('a_nodeIndex'), gl.UNSIGNED_INT, false, instanceStrideBytes, base + 28, true, 1);
-  }
-
-  /**
-   * Replay one recorded batch: all STATE is resolved live - blend mode via the
-   * backend's dedup, `u_projection`/`u_group` from the live view + composed
-   * group matrix (the camera-pan / group-move win), the single base texture
-   * bound to unit 0 by recorded slot order - and only the DATA is cached: the
-   * instance bytes in the bundle buffer (bound through the per-batch VAO) and
-   * the group-owned transform texture on the shared transform unit. The backend
-   * hook flushed any pending live batch before dispatching here and bumps the
-   * stats from the instruction descriptor.
-   * @internal
-   */
-  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): void {
-    const backend = this.getBackendOrNull();
-    const vao = payload.vao;
-    const transformTexture = payload.bundle.transformTexture;
-
-    if (backend === null || vao === null || transformTexture === null) {
-      // Defensive: a bundle in this state never validates (generation), so a
-      // spliced replay cannot reach here; skip rather than crash mid-frame.
-      return;
-    }
-
-    backend.setBlendMode(payload.blendMode);
-    this._stageViewUniforms(backend);
-
-    const textures = payload.textures;
-
-    for (let i = 0; i < textures.length; i++) {
-      // In-bounds: i < textures.length.
-      backend.bindTexture(textures[i]!, i);
-    }
-
-    this._shader.getUniform('u_texture').setValue(this._baseTextureUnitScratch);
-
-    // The group-owned transform store replaces the shared frame buffer on the
-    // SAME unit/sampler - zero GLSL changes. The next live flush
-    // re-binds the shared texture through bindTransformBufferTexture.
-    backend.bindTexture(transformTexture, transformTextureUnit);
-    this._shader.getUniform('u_transforms').setValue(this._transformUnitScratch);
-
-    this._shader.sync();
-    backend.bindVertexArrayObject(vao);
-    vao.drawInstanced(4, 0, payload.instanceCount, RenderingPrimitives.TriangleStrip);
-  }
-
-  protected onConnect(backend: WebGl2Backend): void {
-    const gl = backend.context;
-
-    this._shader.connect(createWebGl2ShaderProgram(gl));
-    this._connection = this._createConnection(gl);
-    this._instanceBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._instanceData, BufferUsage.DynamicDraw).connect(
-      this._createBufferRuntime(this._connection),
-      backend.accountant,
-    );
-    this._shader.sync();
-
-    this._vao = new WebGl2VertexArrayObject(RenderingPrimitives.TriangleStrip)
-      .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_quadBounds'), gl.FLOAT, false, instanceStrideBytes, 0, false, 1)
-      .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_uvBounds'), gl.UNSIGNED_SHORT, true, instanceStrideBytes, 16, false, 1)
-      .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, instanceStrideBytes, 24, false, 1)
-      .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_nodeIndex'), gl.UNSIGNED_INT, false, instanceStrideBytes, 28, true, 1)
-      .connect(this._createVaoRuntime(this._connection));
-  }
-
-  protected onDisconnect(): void {
-    this._shader.destroy();
-    this._instanceBuffer?.destroy();
-    this._instanceBuffer = null;
-    this._vao?.destroy();
-    this._vao = null;
-    this._connection = null;
-    this._currentBlendMode = null;
-    this._currentTexture = null;
-    this._currentView = null;
-    this._currentViewId = -1;
-    this._hasWrittenGroup = false;
-    this._quadIndex = 0;
-    this._maxNodeIndex = 0;
-    this._batchNodeCount = 0;
-    this._nodeBooked = false;
-  }
-
-  public destroy(): void {
-    this.disconnect();
-    this._shader.destroy();
-  }
-
-  private _createConnection(gl: WebGL2RenderingContext): NineSliceRendererConnection {
-    const vaoHandle = gl.createVertexArray();
-
-    if (vaoHandle === null) {
-      throw new Error('WebGl2NineSliceSpriteRenderer: could not create vertex array object.');
-    }
-
-    return { gl, buffers: new Map(), vaoHandle };
-  }
-
-  private _createBufferRuntime(connection: NineSliceRendererConnection): WebGl2RenderBufferRuntime {
-    const handle = connection.gl.createBuffer();
-
-    if (handle === null) {
-      throw new Error('WebGl2NineSliceSpriteRenderer: could not create render buffer.');
-    }
-
-    return {
-      bind: (buffer): void => {
-        connection.gl.bindBuffer(buffer.type, handle);
-      },
-      upload: (buffer, offset): void => {
-        const gl = connection.gl;
-        const state = connection.buffers.get(buffer);
-
-        gl.bindBuffer(buffer.type, handle);
-
-        if (state && state.dataByteLength >= buffer.uploadByteLength) {
-          uploadBufferRange(gl, buffer, offset);
-        } else {
-          uploadBufferStore(gl, buffer);
-          connection.buffers.set(buffer, { handle, dataByteLength: buffer.uploadByteLength });
-        }
-      },
-      destroy: (buffer): void => {
-        connection.gl.deleteBuffer(handle);
-        connection.buffers.delete(buffer);
-        buffer.disconnect();
-      },
-    };
-  }
-
-  private _createVaoRuntime(connection: NineSliceRendererConnection): WebGl2VertexArrayObjectRuntime {
-    let appliedVersion = -1;
-
-    return {
-      bind: (vao): void => {
-        const gl = connection.gl;
-
-        gl.bindVertexArray(connection.vaoHandle);
-
-        if (appliedVersion !== vao.version) {
-          let lastBuffer: WebGl2RenderBuffer | null = null;
-
-          for (const attribute of vao.attributes) {
-            if (lastBuffer !== attribute.buffer) {
-              attribute.buffer.bind();
-              lastBuffer = attribute.buffer;
-            }
-
-            if (attribute.integer) {
-              gl.vertexAttribIPointer(attribute.location, attribute.size, attribute.type, attribute.stride, attribute.start);
-            } else {
-              gl.vertexAttribPointer(attribute.location, attribute.size, attribute.type, attribute.normalized, attribute.stride, attribute.start);
-            }
-
-            gl.enableVertexAttribArray(attribute.location);
-            gl.vertexAttribDivisor(attribute.location, attribute.divisor);
-          }
-
-          appliedVersion = vao.version;
-        }
-      },
-      unbind: (): void => {
-        connection.gl.bindVertexArray(null);
-      },
-      draw: (_vao, size, start, type): void => {
-        connection.gl.drawArrays(type, start, size);
-      },
-      drawInstanced: (_vao, count, start, instanceCount, type): void => {
-        connection.gl.drawArraysInstanced(type, start, count, instanceCount);
-      },
-      destroy: (vao): void => {
-        connection.gl.deleteVertexArray(connection.vaoHandle);
-        vao.disconnect();
-      },
-    };
-  }
-}
diff --git a/src/rendering/webgl2/WebGl2RetainedGroupResources.ts b/src/rendering/webgl2/WebGl2RetainedGroupResources.ts
index cc197323c..8648b7fbf 100644
--- a/src/rendering/webgl2/WebGl2RetainedGroupResources.ts
+++ b/src/rendering/webgl2/WebGl2RetainedGroupResources.ts
@@ -144,8 +144,12 @@ export interface WebGl2RetainedBatchReplayer {
   configureRetainedVao(payload: WebGl2RetainedBatchPayload): void;
   /** Preflight structural live state before any instruction in the set draws. */
   validateRetainedBatch?(payload: WebGl2RetainedBatchPayload): boolean;
-  /** Replay the batch: live state (blend, uniforms, textures), cached data (bytes, transforms). */
-  replayRetainedBatch(payload: WebGl2RetainedBatchPayload): void;
+  /**
+   * Replay cached data with live state. Return false when no draw was issued;
+   * true or no return preserves descriptor-based batch/draw accounting.
+   * Submitted nodes are counted by the backend even when replay cannot draw.
+   */
+  replayRetainedBatch(payload: WebGl2RetainedBatchPayload): boolean | void;
 }
 
 /**
diff --git a/src/rendering/webgl2/WebGl2RepeatingSpriteRenderer.ts b/src/rendering/webgl2/WebGl2ScalableSpriteRenderer.ts
similarity index 93%
rename from src/rendering/webgl2/WebGl2RepeatingSpriteRenderer.ts
rename to src/rendering/webgl2/WebGl2ScalableSpriteRenderer.ts
index 0b1ace1a8..21775aa5e 100644
--- a/src/rendering/webgl2/WebGl2RepeatingSpriteRenderer.ts
+++ b/src/rendering/webgl2/WebGl2ScalableSpriteRenderer.ts
@@ -1,7 +1,8 @@
 import { packedGroupChanged } from '#rendering/affinePacking';
 import type { Drawable } from '#rendering/Drawable';
+import type { NineSliceSprite } from '#rendering/sprite/NineSliceSprite';
 import { computeShaderTiling, type RepeatingSpriteQuad } from '#rendering/sprite/repeatingPlan';
-import type { RepeatingSprite } from '#rendering/sprite/RepeatingSprite';
+import { RepeatingSprite } from '#rendering/sprite/RepeatingSprite';
 import type { RenderTexture } from '#rendering/texture/RenderTexture';
 import type { RepeatMode } from '#rendering/texture/repeat';
 import { Texture } from '#rendering/texture/Texture';
@@ -60,24 +61,12 @@ interface RendererConnection {
   readonly geoVaoHandle: WebGLVertexArrayObject;
 }
 
-/** Instanced renderer for {@link RepeatingSprite} using WebGL2. Handles both shader and geometry paths internally. */
-export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<RepeatingSprite> implements WebGl2RetainedBatchReplayer {
+/** Shared geometry batches for scalable sprites, with a separate whole-texture repeating path. @internal */
+export class WebGl2ScalableSpriteRenderer extends AbstractWebGl2Renderer<NineSliceSprite | RepeatingSprite> implements WebGl2RetainedBatchReplayer {
   /**
-   * Retained-batch capability opt-in. Only the
-   * GEOMETRY path (TextureRegion source) is recorded: its 32-byte instance
-   * layout matches the sprite/NineSlice batch shape (node index at word 7 of
-   * the 8-word instance), so it records and replays exactly like the sprite
-   * renderer - a mixed group of sprites and geometry-path repeating sprites
-   * shares one bundle and one group transform texture.
-   *
-   * The SHADER path (bare {@link Texture} source) uses a distinct 40-byte
-   * stride AND a per-batch wrap-mode sampler; the generalized instruction
-   * seam carries no per-batch metadata channel for the path discriminant or
-   * the wrap modes, so a shader-path draw inside a capture window POISONS it
-   * - the group degrades to the (correct) entry-replay tier, exactly as it
-   * did before this renderer opted in. Pixel-snapped draws are excluded for
-   * the same reason the sprite renderer excludes them (view-dependent
-   * instance words).
+   * NineSlice and atlas repeating geometry share the retained instance layout.
+   * Whole-texture repeating uses a distinct stride and sampler state, so it
+   * stays on entry replay. Pixel snapping is resolved in the shader.
    * @internal
    */
   public readonly supportsRetainedBatches = true;
@@ -96,7 +85,7 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
    * @internal
    */
   public admitsRetainedRecording(drawable: Drawable): boolean {
-    return (drawable as RepeatingSprite).resolvedStrategy !== 'shader';
+    return !(drawable instanceof RepeatingSprite) || drawable.resolvedStrategy !== 'shader';
   }
 
   private readonly _shaderPathShader: WebGl2Shader;
@@ -176,12 +165,18 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
     this._geoU32 = new Uint32Array(this._geoData);
   }
 
-  public render(sprite: RepeatingSprite): void {
-    const strategy = sprite.resolvedStrategy;
+  public render(sprite: NineSliceSprite | RepeatingSprite): void {
+    const repeating = sprite instanceof RepeatingSprite ? sprite : null;
+    const strategy = repeating?.resolvedStrategy ?? 'geometry';
+
+    if (strategy === 'geometry' && sprite.quads.length === 0) {
+      return;
+    }
+
     const texture = sprite.texture;
     const blendMode = sprite.blendMode;
-    const modeX = sprite.modeX;
-    const modeY = sprite.modeY;
+    const modeX = repeating?.modeX ?? null;
+    const modeY = repeating?.modeY ?? null;
 
     const hasData = this._shaderQuadCount > 0 || this._geoQuadCount > 0;
 
@@ -191,7 +186,9 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
       const blendChanged = this._currentBlendMode !== blendMode;
       const modeChanged = strategy === 'shader' && (this._currentModeX !== modeX || this._currentModeY !== modeY);
 
-      if (pathChanged || texChanged || blendChanged || modeChanged) {
+      const geometryOverflow = repeating === null && this._geoQuadCount + sprite.quads.length > this._batchSize;
+
+      if (pathChanged || texChanged || blendChanged || modeChanged || geometryOverflow) {
         this.flush();
       }
     }
@@ -230,10 +227,10 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
       this._maxNodeIndex = nodeIndex;
     }
 
-    if (strategy === 'shader') {
+    if (repeating !== null && strategy === 'shader') {
       this._currentModeX = modeX;
       this._currentModeY = modeY;
-      this._writeShaderInstance(sprite, nodeIndex);
+      this._writeShaderInstance(repeating, nodeIndex);
     } else {
       this._geoNodeBooked = false;
       this._writeGeoQuads(sprite, nodeIndex);
@@ -282,7 +279,7 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
     this._shaderQuadCount++;
   }
 
-  private _writeGeoQuads(sprite: RepeatingSprite, nodeIndex: number): void {
+  private _writeGeoQuads(sprite: NineSliceSprite | RepeatingSprite, nodeIndex: number): void {
     // Quads are uploaded RAW; PixelSnapMode.Geometry snaps each shared segment
     // boundary to the device grid in the vertex shader (gap-free, like NineSlice).
     const quads: readonly RepeatingSpriteQuad[] = sprite.quads;
@@ -414,6 +411,8 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
 
     const gl = conn.gl;
     const texture = this._currentTexture;
+    backend.bindTexture(texture, 0);
+    backend.setBlendMode(this._currentBlendMode);
     const scaleMode = texture instanceof Texture ? texture.scaleMode : ScaleModes.Linear;
     const wrapS = repeatModeToWrap(this._currentModeX ?? 'repeat');
     const wrapT = repeatModeToWrap(this._currentModeY ?? 'repeat');
@@ -447,6 +446,8 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
 
     if (!conn || !buf || !vao || this._geoQuadCount === 0) return;
 
+    backend.bindTexture(this._currentTexture, 0);
+    backend.setBlendMode(this._currentBlendMode);
     backend.bindTransformBufferTexture(transformTextureUnit, this._maxNodeIndex + 1);
     this._geoPathShader.getUniform('u_texture').setValue(this._textureUnitScratch);
     this._geoPathShader.getUniform('u_transforms').setValue(this._transformUnitScratch);
@@ -532,7 +533,7 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
     const vao = payload.vao;
 
     if (buffer === null || vao === null) {
-      throw new Error('WebGl2RepeatingSpriteRenderer: retained batch VAO configuration requires an uploaded bundle.');
+      throw new Error('WebGl2ScalableSpriteRenderer: retained batch VAO configuration requires an uploaded bundle.');
     }
 
     const base = payload.byteOffset;
@@ -552,7 +553,7 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
    * transform unit). Mirrors {@link WebGl2SpriteRenderer.replayRetainedBatch}.
    * @internal
    */
-  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): void {
+  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): boolean {
     const backend = this.getBackendOrNull();
     const vao = payload.vao;
     const transformTexture = payload.bundle.transformTexture;
@@ -560,7 +561,7 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
     if (backend === null || vao === null || transformTexture === null) {
       // Defensive: a bundle in this state never validates (generation), so a
       // spliced replay cannot reach here; skip rather than crash mid-frame.
-      return;
+      return false;
     }
 
     if (payload.blendMode !== this._currentBlendMode) {
@@ -584,6 +585,8 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
 
     backend.bindVertexArrayObject(vao);
     vao.drawInstanced(4, 0, payload.instanceCount, RenderingPrimitives.TriangleStrip);
+
+    return true;
   }
 
   /**
@@ -635,7 +638,7 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
     if (existing !== undefined) return existing;
 
     const sampler = gl.createSampler();
-    if (sampler === null) throw new Error('WebGl2RepeatingSpriteRenderer: could not create sampler.');
+    if (sampler === null) throw new Error('WebGl2ScalableSpriteRenderer: could not create sampler.');
 
     gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, wrapS);
     gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, wrapT);
@@ -733,7 +736,7 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
     const geoVaoHandle = gl.createVertexArray();
 
     if (shaderVaoHandle === null || geoVaoHandle === null) {
-      throw new Error('WebGl2RepeatingSpriteRenderer: could not create vertex array object.');
+      throw new Error('WebGl2ScalableSpriteRenderer: could not create vertex array object.');
     }
 
     return { gl, buffers: new Map(), shaderVaoHandle, geoVaoHandle };
@@ -741,7 +744,7 @@ export class WebGl2RepeatingSpriteRenderer extends AbstractWebGl2Renderer<Repeat
 
   private _createBufRuntime(conn: RendererConnection, _kind: string): WebGl2RenderBufferRuntime {
     const handle = conn.gl.createBuffer();
-    if (handle === null) throw new Error('WebGl2RepeatingSpriteRenderer: could not create render buffer.');
+    if (handle === null) throw new Error('WebGl2ScalableSpriteRenderer: could not create render buffer.');
 
     return {
       bind: (buffer): void => {
diff --git a/src/rendering/webgl2/WebGl2SpriteRenderer.ts b/src/rendering/webgl2/WebGl2SpriteRenderer.ts
index 311cc7448..7f168d8a7 100644
--- a/src/rendering/webgl2/WebGl2SpriteRenderer.ts
+++ b/src/rendering/webgl2/WebGl2SpriteRenderer.ts
@@ -547,7 +547,7 @@ export class WebGl2SpriteRenderer extends AbstractWebGl2Renderer<Sprite> impleme
    * dispatching here and bumps the stats from the instruction descriptor.
    * @internal
    */
-  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): void {
+  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): boolean {
     const backend = this.getBackendOrNull();
     const vao = payload.vao;
     const transformTexture = payload.bundle.transformTexture;
@@ -558,7 +558,7 @@ export class WebGl2SpriteRenderer extends AbstractWebGl2Renderer<Sprite> impleme
     if (backend === null || vao === null || transformTexture === null || tintTexture === null) {
       // Defensive: a bundle in this state never validates (generation), so a
       // spliced replay cannot reach here; skip rather than crash mid-frame.
-      return;
+      return false;
     }
 
     backend.setBlendMode(payload.blendMode);
@@ -614,6 +614,8 @@ export class WebGl2SpriteRenderer extends AbstractWebGl2Renderer<Sprite> impleme
     this._bindBaseTextureSamplers(backend, material, textures.length);
     vao.drawInstanced(4, 0, payload.instanceCount, RenderingPrimitives.TriangleStrip);
     this._unbindBaseTextureSamplers(backend, material, textures.length);
+
+    return true;
   }
 
   private _bindBaseTextureSamplers(backend: WebGl2Backend, material: AnySpriteMaterial | null, slotCount: number): void {
diff --git a/src/rendering/webgl2/WebGl2TextRenderer.ts b/src/rendering/webgl2/WebGl2TextRenderer.ts
index 51c510294..36010fc63 100644
--- a/src/rendering/webgl2/WebGl2TextRenderer.ts
+++ b/src/rendering/webgl2/WebGl2TextRenderer.ts
@@ -726,19 +726,19 @@ export class WebGl2TextRenderer extends AbstractWebGl2Renderer<Text | BitmapText
    * static quad-index pattern, and the group-owned per-node style texture.
    * @internal
    */
-  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): void {
+  public replayRetainedBatch(payload: WebGl2RetainedBatchPayload): boolean {
     const backend = this.getBackendOrNull();
     const vao = payload.vao;
     const data = payload.rendererData as TextRetainedRendererData | null;
 
     if (backend === null || vao === null || data === null || !(payload.bundle instanceof WebGl2RetainedGroupResources)) {
-      return;
+      return false;
     }
 
     const state = payload.bundle.rendererReplayState;
 
     if (!(state instanceof TextRetainedReplayState) || state.nodeDataTexture === null) {
-      return;
+      return false;
     }
 
     const shader = this._shaderFor(data.shaderType);
@@ -773,6 +773,8 @@ export class WebGl2TextRenderer extends AbstractWebGl2Renderer<Text | BitmapText
     shader.sync();
     backend.bindVertexArrayObject(vao);
     vao.draw(state.quadCount * 6, 0, RenderingPrimitives.Triangles);
+
+    return true;
   }
 
   /**
diff --git a/src/rendering/webgl2/shaders/nine-slice.frag b/src/rendering/webgl2/shaders/nine-slice.frag
deleted file mode 100644
index b69018b44..000000000
--- a/src/rendering/webgl2/shaders/nine-slice.frag
+++ /dev/null
@@ -1,16 +0,0 @@
-#version 300 es
-precision lowp float;
-
-uniform sampler2D u_texture;
-
-// UVs need full precision on mobile GLES (the lowp default would quantise
-// them); the color varying stays lowp for 8-bit output.
-in highp vec2 v_texcoord;
-in vec4 v_color;
-
-layout(location = 0) out vec4 fragColor;
-
-void main(void) {
-    vec4 sampleColor = texture(u_texture, v_texcoord);
-    fragColor = sampleColor * v_color;
-}
diff --git a/src/rendering/webgl2/shaders/nine-slice.vert b/src/rendering/webgl2/shaders/nine-slice.vert
deleted file mode 100644
index ec97344ef..000000000
--- a/src/rendering/webgl2/shaders/nine-slice.vert
+++ /dev/null
@@ -1,94 +0,0 @@
-#version 300 es
-precision highp float;
-precision highp int;
-
-// Per-instance attributes (divisor = 1). One entry per nine-slice quad.
-// gl_VertexID 0..3 selects which corner of the quad this invocation computes.
-layout(location = 0) in vec4 a_quadBounds;   // x0, y0, x1, y1 (local space)
-layout(location = 1) in vec4 a_uvBounds;     // u0, v0, u1, v1 (normalised, flipY pre-applied)
-layout(location = 2) in vec4 a_color;        // RGBA tint
-layout(location = 3) in uint a_nodeIndex;    // row into the shared transform buffer
-
-uniform mat3 u_projection;
-uniform mat3 u_group;
-uniform vec4 u_viewport;                     // device-pixel viewport rect (x, y, width, height)
-uniform sampler2D u_transforms;              // shared per-frame transform buffer (2 texels/row)
-
-// #exo-include transform-texture
-
-out vec2 v_texcoord;
-out vec4 v_color;
-
-// Round one local boundary coordinate to the device grid along an axis whose
-// local→device scale is \`scale\`: floor(L*scale + 0.5) / scale. Pure in the
-// boundary value, so two quads sharing a boundary snap identically — seams stay
-// closed. Degenerate scales pass the value through unchanged.
-float snapBoundary(float localValue, float scale) {
-    if (abs(scale) < 1e-6) return localValue;
-    return floor(localValue * scale + 0.5) / scale;
-}
-
-void main(void) {
-    // gl_VertexID 0..3 -> corner: 0=TL, 1=TR, 2=BL, 3=BR (TRIANGLE_STRIP order)
-    int vid = gl_VertexID;
-    int cornerX = vid & 1;
-    int cornerY = (vid >> 1) & 1;
-
-    float localX = (cornerX == 0) ? a_quadBounds.x : a_quadBounds.z;
-    float localY = (cornerY == 0) ? a_quadBounds.y : a_quadBounds.w;
-
-    int row = int(a_nodeIndex);
-    vec4 m0 = texelFetch(u_transforms, exoTransformTexel(row, 0), 0); // a, b, c, d
-    vec4 m1 = texelFetch(u_transforms, exoTransformTexel(row, 1), 0); // tx, ty, snapMode, 0
-
-    // Geometry boundary snap: round each local corner to the device grid so the
-    // quad edges land on whole device pixels (m1.z == 2.0, axis-aligned only).
-    // Derive the per-axis device scale from the composed pipeline: device
-    // positions of the local origin and the two local unit axes give scaleX/
-    // scaleY (device-per-local) and the cross-terms.
-    // Shared nine-slice quad edges are the same local value, so this pure snap
-    // moves both neighbours identically — the internal seams stay closed.
-    if (m1.z == 2.0) {
-        vec2 vp = u_viewport.zw;
-        vec3 dO = u_projection * u_group * vec3(m1.x, m1.y, 1.0);          // NOTE: origin uses row translation
-        vec2 devO = u_viewport.xy + (dO.xy * 0.5 + 0.5) * vp;
-        // The linear part maps local (1,0)->(m0.x,m0.z), (0,1)->(m0.y,m0.w).
-        vec3 dX = u_projection * u_group * vec3(m1.x + m0.x, m1.y + m0.z, 1.0);
-        vec3 dY = u_projection * u_group * vec3(m1.x + m0.y, m1.y + m0.w, 1.0);
-        vec2 devX = u_viewport.xy + (dX.xy * 0.5 + 0.5) * vp;
-        vec2 devY = u_viewport.xy + (dY.xy * 0.5 + 0.5) * vp;
-        float scaleX = devX.x - devO.x;
-        float scaleY = devY.y - devO.y;
-        float crossXy = devX.y - devO.y;
-        float crossYx = devY.x - devO.x;
-        if (abs(crossXy) < 1e-3 && abs(crossYx) < 1e-3) { // axis-aligned
-            localX = snapBoundary(localX, scaleX);
-            localY = snapBoundary(localY, scaleY);
-        }
-    }
-
-    float worldX = (m0.x * localX) + (m0.y * localY) + m1.x;
-    float worldY = (m0.z * localX) + (m0.w * localY) + m1.y;
-
-    vec2 clip = (u_projection * u_group * vec3(worldX, worldY, 1.0)).xy;
-
-    // Render-only pixel snapping (m1.z: 0 = none, 1 = position, 2 = geometry —
-    // both non-zero modes snap the origin). Snap the node ORIGIN's device-pixel
-    // position and rigid-shift the whole primitive by the same delta. floor(x+0.5)
-    // matches the CPU Math.round policy; GLSL round() is undefined at .5. Grid
-    // alignment is independent of the y-axis convention because the staged
-    // viewport rect is whole device pixels.
-    if (m1.z != 0.0) {
-        vec2 originClip = (u_projection * u_group * vec3(m1.x, m1.y, 1.0)).xy;
-        vec2 originDevice = u_viewport.xy + (originClip * 0.5 + 0.5) * u_viewport.zw;
-        clip += (floor(originDevice + 0.5) - originDevice) * 2.0 / max(u_viewport.zw, vec2(1.0));
-    }
-
-    gl_Position = vec4(clip, 0.0, 1.0);
-
-    float u = (cornerX == 0) ? a_uvBounds.x : a_uvBounds.z;
-    float v = (cornerY == 0) ? a_uvBounds.y : a_uvBounds.w;
-    v_texcoord = vec2(u, v);
-
-    v_color = vec4(a_color.rgb * a_color.a, a_color.a);
-}
diff --git a/src/rendering/webgpu/WebGpuNineSliceSpriteRenderer.ts b/src/rendering/webgpu/WebGpuNineSliceSpriteRenderer.ts
deleted file mode 100644
index 9b1e8910a..000000000
--- a/src/rendering/webgpu/WebGpuNineSliceSpriteRenderer.ts
+++ /dev/null
@@ -1,777 +0,0 @@
-/// <reference types="@webgpu/types" />
-
-import { Matrix } from '#math/Matrix';
-import { affineMat4FloatCount, packAffineMat4, packedGroupChanged } from '#rendering/affinePacking';
-import type { NineSliceQuad } from '#rendering/sprite/nineSlice';
-import type { NineSliceSprite } from '#rendering/sprite/NineSliceSprite';
-import { isSampleableTexture } from '#rendering/texture/deferredTexture';
-import type { RenderTexture } from '#rendering/texture/RenderTexture';
-import { Texture } from '#rendering/texture/Texture';
-import { BlendModes } from '#rendering/types';
-import type { View } from '#rendering/View';
-
-import { AbstractWebGpuRenderer } from './AbstractWebGpuRenderer';
-import { getWebGpuBlendState } from './blendState';
-import {
-  retainedGroupUniformBytes,
-  type WebGpuRetainedBatchPayload,
-  type WebGpuRetainedBatchReplayer,
-  type WebGpuRetainedNodeIndexRange,
-} from './retainedGroupResources';
-import nineSliceShaderSourceModule from './shaders/nine-slice.wgsl';
-import { packSnapViewport } from './snapViewport';
-import { stencilContentDepthStencilState } from './stencilState';
-import type { WebGpuBackend } from './WebGpuBackend';
-import { WebGpuPassArena } from './WebGpuPassArena';
-import type { WebGpuActiveRenderPass, WebGpuPassCoordinator } from './WebGpuPassCoordinator';
-
-/** WGSL source for the nine-slice sprite pipeline. @internal */
-export const nineSliceShaderSource: string = nineSliceShaderSourceModule;
-
-const instanceStrideBytes = 32;
-const wordsPerInstance = instanceStrideBytes / Uint32Array.BYTES_PER_ELEMENT; // = 8
-// mat4x4 projection + mat4x4 group + vec4 snap viewport (aligned 16, total 144).
-const projectionByteLength = 144;
-const initialBatchCapacity = 32;
-const indicesPerInstance = 6;
-const quadIndices = new Uint16Array([0, 1, 2, 0, 2, 3]);
-
-/** Instanced renderer for {@link NineSliceSprite} using WebGPU. */
-export class WebGpuNineSliceSpriteRenderer extends AbstractWebGpuRenderer<NineSliceSprite> implements WebGpuRetainedBatchReplayer {
-  /**
-   * Retained-batch capability flag: a nine-slice
-   * group's per-flush instanced batches (fixed 32-byte layout, node index at
-   * word 7 - the same seam as the sprite renderer) record and replay from
-   * group-owned resources. Pixel-snapped draws are excluded by the collect-time
-   * recordability predicate (and belt-and-braces poisoning in {@link render});
-   * nine-slice has no custom-material path to exclude.
-   * @internal
-   */
-  public readonly supportsRetainedBatches = true;
-
-  private readonly _projectionData = new Float32Array(projectionByteLength / Float32Array.BYTES_PER_ELEMENT);
-  // Projection-uniform skip state: a matching (view identity, view.updateId,
-  // group-matrix content) triple means the shared UBO already holds this
-  // flush's projection, so the 128-byte write is skipped - static frames issue
-  // zero projection uploads. Mirrors the sprite renderer's redundant-write skip.
-  private _writtenView: View | null = null;
-  private _writtenViewUpdateId = -1;
-  private _hasWrittenProjection = false;
-  private readonly _stagedGroupData = new Float32Array(affineMat4FloatCount);
-
-  private _device: GPUDevice | null = null;
-  private _shaderModule: GPUShaderModule | null = null;
-  private _uniformBindGroupLayout: GPUBindGroupLayout | null = null;
-  private _textureBindGroupLayout: GPUBindGroupLayout | null = null;
-  private _pipelineLayout: GPUPipelineLayout | null = null;
-  private _uniformBuffer: GPUBuffer | null = null;
-  private _transformBindGroup: GPUBindGroup | null = null;
-  private _transformStorageBuffer: GPUBuffer | null = null;
-  private _indexBuffer: GPUBuffer | null = null;
-  // Frame-scoped append arena: consecutive batch flushes accumulate into one
-  // open pass at distinct byte offsets so the frame submits once.
-  private readonly _instanceArena = new WebGpuPassArena('nine-slice:instance-buffer', initialBatchCapacity * instanceStrideBytes);
-  private _instanceCapacity = 0;
-  private _instanceData: ArrayBuffer = new ArrayBuffer(0);
-  private _instanceFloat32 = new Float32Array(this._instanceData);
-  private _instanceUint32 = new Uint32Array(this._instanceData);
-  private readonly _pipelines = new Map<string, GPURenderPipeline>();
-  // Single-texture group(1) bind groups cached per texture (WeakMap so a
-  // short-lived texture does not pin its GPU bind group). The entry stores the
-  // resolved view AND sampler it was built from: the view detects a
-  // backend-recreated GPU texture (resize / content rebuild), the sampler
-  // detects a sampler-only refresh (setScaleMode / setWrapMode bumps
-  // texture.version, recreating the sampler while the view identity stays put).
-  // Dropped wholesale on disconnect / device loss.
-  private _textureBindGroups = new WeakMap<Texture | RenderTexture, { group: GPUBindGroup; view: GPUTextureView; sampler: GPUSampler }>();
-
-  private _quadIndex = 0;
-  private _maxNodeIndex = 0;
-  // Render nodes booked against the PENDING batch. One node emits up to nine
-  // quad instances, so the recorded batch's `submittedNodes` contribution is
-  // this count and not `_quadIndex`.
-  private _batchNodeCount = 0;
-  private _currentBlendMode: BlendModes | null = null;
-  private _currentTexture: Texture | RenderTexture | null = null;
-
-  // ── Retained-batch replay state ───────────────────────────────────────────
-  // Scratch for the packed group matrix compared at replay (see replayRetainedBatch).
-  private readonly _stagedReplayGroupData = new Float32Array(16);
-  // Reused single-slot texture list handed to the backend at record time; the
-  // nine-slice batch always binds exactly one base texture (slot 0).
-  private readonly _recordTextures: Array<Texture | RenderTexture | null> = [null];
-
-  protected onConnect(backend: WebGpuBackend): void {
-    if (this._device) {
-      return;
-    }
-
-    this._device = backend.device;
-    this._shaderModule = this._device.createShaderModule({ label: 'nine-slice:shader', code: nineSliceShaderSource });
-
-    this._uniformBindGroupLayout = this._device.createBindGroupLayout({
-      label: 'nine-slice:bind-group-layout:uniform',
-      entries: [
-        { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
-        { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: 'read-only-storage' } },
-      ],
-    });
-
-    this._textureBindGroupLayout = this._device.createBindGroupLayout({
-      label: 'nine-slice:bind-group-layout:texture',
-      entries: [
-        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'float' } },
-        { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: 'filtering' } },
-      ],
-    });
-
-    this._pipelineLayout = this._device.createPipelineLayout({
-      label: 'nine-slice:pipeline-layout',
-      bindGroupLayouts: [this._uniformBindGroupLayout, this._textureBindGroupLayout],
-    });
-
-    this._uniformBuffer = this._device.createBuffer({
-      label: 'nine-slice:uniform-buffer',
-      size: projectionByteLength,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    });
-
-    this._indexBuffer = this._device.createBuffer({
-      label: 'nine-slice:index-buffer',
-      size: quadIndices.byteLength,
-      usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-    });
-    this._device.queue.writeBuffer(this._indexBuffer, 0, quadIndices.buffer, quadIndices.byteOffset, quadIndices.byteLength);
-  }
-
-  protected onDisconnect(): void {
-    this._instanceArena.destroy();
-    this._indexBuffer?.destroy();
-    this._uniformBuffer?.destroy();
-    this._pipelines.clear();
-    this._indexBuffer = null;
-    this._transformBindGroup = null;
-    this._transformStorageBuffer = null;
-    // Bind groups and the projection UBO belong to the (possibly lost) device;
-    // drop the caches so reconnect rebuilds them against the fresh device.
-    this._textureBindGroups = new WeakMap<Texture | RenderTexture, { group: GPUBindGroup; view: GPUTextureView; sampler: GPUSampler }>();
-    this._writtenView = null;
-    this._writtenViewUpdateId = -1;
-    this._hasWrittenProjection = false;
-    this._uniformBuffer = null;
-    this._pipelineLayout = null;
-    this._textureBindGroupLayout = null;
-    this._uniformBindGroupLayout = null;
-    this._shaderModule = null;
-    this._device = null;
-    this._backend = null;
-    this._instanceCapacity = 0;
-    this._instanceData = new ArrayBuffer(0);
-    this._instanceFloat32 = new Float32Array(this._instanceData);
-    this._instanceUint32 = new Uint32Array(this._instanceData);
-    this._quadIndex = 0;
-    this._maxNodeIndex = 0;
-    this._batchNodeCount = 0;
-    this._currentBlendMode = null;
-    this._currentTexture = null;
-  }
-
-  public render(sprite: NineSliceSprite): void {
-    const backend = this._backend;
-
-    if (backend === null) {
-      return;
-    }
-
-    // Always upload the raw content quads. Geometry-mode boundary snapping is
-    // resolved in the WGSL vertex stage (the `snapBoundary` block, gated on the
-    // row's snap flag), so no CPU quad snap happens here and logical geometry is
-    // never mutated. Shared quad edges snap identically in-shader, keeping the
-    // internal seams closed.
-    const quads: readonly NineSliceQuad[] = sprite.quads;
-
-    if (quads.length === 0) {
-      return;
-    }
-
-    const texture = sprite.texture;
-
-    // A loader handle that has not delivered yet is not bound: there is
-    // nothing to upload, and the draw resumes when the payload lands.
-    if (!isSampleableTexture(texture)) {
-      return;
-    }
-
-    const blendMode = sprite.blendMode;
-
-    const command = backend.activeDrawCommand;
-    const nodeIndex = command !== null ? command.nodeIndex : backend.pushTransform(sprite);
-
-    const blendModeChanged = this._currentBlendMode !== null && blendMode !== this._currentBlendMode;
-    const textureChanged = this._currentTexture !== null && texture !== this._currentTexture;
-    const willExceed = this._quadIndex + quads.length > this._instanceCapacity && this._instanceCapacity > 0;
-
-    if ((blendModeChanged || textureChanged || willExceed) && this._quadIndex > 0) {
-      this.flush();
-    }
-
-    this._currentBlendMode = blendMode;
-    this._currentTexture = texture;
-    backend.setBlendMode(blendMode);
-
-    this._ensureInstanceCapacity(this._quadIndex + quads.length);
-
-    // Booked after the flush decision above, so the node lands on the batch that
-    // holds its quads. All of this node's quads go into that one batch - the
-    // arena grows instead of chunking - so one increment is exact.
-    this._batchNodeCount++;
-
-    const f32 = this._instanceFloat32;
-    const u32 = this._instanceUint32;
-    const flipY = texture instanceof Texture && texture.flipY;
-
-    for (const q of quads) {
-      const offset = this._quadIndex * wordsPerInstance;
-
-      f32[offset + 0] = q.x0;
-      f32[offset + 1] = q.y0;
-      f32[offset + 2] = q.x1;
-      f32[offset + 3] = q.y1;
-
-      const uMin = (q.u0 * 0xffff) & 0xffff;
-      const uMax = (q.u1 * 0xffff) & 0xffff;
-      const v0Raw = (q.v0 * 0xffff) & 0xffff;
-      const v1Raw = (q.v1 * 0xffff) & 0xffff;
-      const vMin = flipY ? v1Raw : v0Raw;
-      const vMax = flipY ? v0Raw : v1Raw;
-
-      u32[offset + 4] = uMin | (vMin << 16);
-      u32[offset + 5] = uMax | (vMax << 16);
-      u32[offset + 6] = sprite.tint.toRgba8();
-      u32[offset + 7] = nodeIndex >>> 0;
-
-      this._quadIndex++;
-
-      if (nodeIndex > this._maxNodeIndex) {
-        this._maxNodeIndex = nodeIndex;
-      }
-    }
-  }
-
-  public flush(): void {
-    const backend = this._backend;
-    const device = this._device;
-    const uniformBuffer = this._uniformBuffer;
-
-    if (!backend || !device || !uniformBuffer) {
-      return;
-    }
-
-    if (this._quadIndex === 0 && !backend.clearRequested) {
-      return;
-    }
-
-    // Rewriting the shared projection uniform for a still-open pass whose batches
-    // were projected with a now-changed view transform (same View object mutated
-    // between merged flushes) would retroactively re-project them; end that pass
-    // first. Guarded on the arena tracking the current active pass.
-    const activePass = backend.passCoordinator.activePass;
-    const groupChanged = this._groupContentChanged(backend);
-
-    if (
-      activePass !== null &&
-      this._instanceArena.cursor > 0 &&
-      this._instanceArena.tracksPass(activePass) &&
-      (activePass.viewUpdateId !== backend.view.updateId || groupChanged)
-    ) {
-      backend.passCoordinator.endPass();
-      this._instanceArena.resetPass();
-    }
-
-    // ProjectionUniforms layout: mat4x4 projection + mat4x4 group + vec4 snap
-    // viewport, packed via the shared canonical (non-transposed) column order.
-    // The write is skipped when the UBO already holds this exact (view,
-    // updateId, group bytes, snap-rect) state - static frames then issue zero
-    // projection uploads.
-    const view = backend.view;
-    const viewportChanged = packSnapViewport(backend, this._projectionData, 32);
-
-    if (!this._hasWrittenProjection || this._writtenView !== view || this._writtenViewUpdateId !== view.updateId || groupChanged || viewportChanged) {
-      packAffineMat4(view.getTransform(), this._projectionData, 0);
-      packAffineMat4(backend.renderGroupTransform ?? Matrix.identity, this._projectionData, 16);
-
-      this._writtenView = view;
-      this._writtenViewUpdateId = view.updateId;
-      this._hasWrittenProjection = true;
-
-      device.queue.writeBuffer(uniformBuffer, 0, this._projectionData.buffer, this._projectionData.byteOffset, this._projectionData.byteLength);
-    }
-
-    const scissor = backend.getScissorRect();
-    const maskClipsAll = scissor !== null && (scissor.width <= 0 || scissor.height <= 0);
-
-    const willDraw = this._quadIndex > 0 && !maskClipsAll && this._indexBuffer !== null && this._currentBlendMode !== null && this._currentTexture !== null;
-
-    if (willDraw) {
-      const batchBytes = this._quadIndex * instanceStrideBytes;
-      const needCount = this._maxNodeIndex + 1;
-
-      const coordinator = backend.passCoordinator;
-      let active = coordinator.acquirePass();
-
-      this._instanceArena.syncPass(active);
-
-      // A texture re-upload / resize lands on the queue timeline before the
-      // deferred submit, retroactively changing draws already recorded into this
-      // open pass. End (submit) the pass first so they capture the pre-mutation
-      // content, then reopen and re-upload into the fresh slice. The texture
-      // cache is shared and the pass survives a renderer switch, so the guard
-      // asks the coordinator whether ANY draw is recorded, not just our arena.
-      if (coordinator.passHasDraws && this._currentTexture !== null && backend.textureUploadWouldMutate(this._currentTexture)) {
-        active = this._reopenPass(coordinator);
-      }
-
-      // Resolving the transform storage may reallocate (and free) its GPU buffer;
-      // end the pass first when earlier batches in it still reference the old
-      // one - again from any renderer sharing this pass, not only ours.
-      if (coordinator.passHasDraws && backend.transformStorageWouldGrow(needCount)) {
-        active = this._reopenPass(coordinator);
-      }
-
-      // The arena buffer is ours alone, so only our own batches in the pass
-      // reference the allocation `grow` is about to free.
-      if (!this._instanceArena.fits(batchBytes)) {
-        if (this._instanceArena.cursor > 0) {
-          active = this._reopenPass(coordinator);
-        }
-
-        this._instanceArena.grow(device, batchBytes);
-      }
-
-      const offset = this._instanceArena.take(batchBytes);
-      const instanceBuffer = this._instanceArena.buffer!;
-      const pass = active.pass;
-
-      device.queue.writeBuffer(instanceBuffer, offset, this._instanceData, 0, batchBytes);
-
-      const storage = backend.getTransformStorageBuffer(needCount);
-      const transformBindGroup = this._getOrCreateTransformBindGroup(device, uniformBuffer, storage.buffer);
-      const textureBindGroup = this._getOrCreateTextureBindGroup(device, backend, this._currentTexture!);
-
-      const stencil = backend.passCoordinator.stencilActive;
-      const pipeline = this._getPipeline(this._currentBlendMode!, backend.renderTargetFormat, stencil);
-
-      pass.setPipeline(pipeline);
-      pass.setBindGroup(0, transformBindGroup);
-      pass.setBindGroup(1, textureBindGroup);
-      pass.setVertexBuffer(0, instanceBuffer, offset);
-      pass.setIndexBuffer(this._indexBuffer!, 'uint16');
-      pass.drawIndexed(indicesPerInstance, this._quadIndex, 0, 0, 0);
-
-      coordinator.markPassDraws();
-      backend.stats.batches++;
-      backend.stats.drawCalls++;
-    } else if (backend.clearRequested) {
-      // Honor a pending clear with an open pass (submitted at the next boundary).
-      backend.passCoordinator.acquirePass();
-    }
-
-    // Retained capture: while a capture window is active,
-    // additionally stage this batch's exact packed bytes into the group-owned
-    // bundle - the recorded data IS the drawn data, byte-identical by
-    // construction. Recorded regardless of the live visibility decision above
-    // (mask/scissor), since visibility is re-evaluated live at replay. The
-    // nine-slice batch always binds a single base texture (slot 0); a
-    // pixel-snapped draw already poisoned the capture in render().
-    if (this._quadIndex > 0 && backend._retainedCaptureActive && this._currentBlendMode !== null && this._currentTexture !== null) {
-      this._recordTextures[0] = this._currentTexture;
-      backend.recordRetainedBatch(
-        this,
-        this._instanceData,
-        this._quadIndex * instanceStrideBytes,
-        this._quadIndex,
-        this._currentBlendMode,
-        this._recordTextures,
-        1,
-        null,
-        null,
-        this._batchNodeCount,
-      );
-    }
-
-    // Batch flushes no longer submit; the backend ends the pass at boundaries.
-    this._quadIndex = 0;
-    this._maxNodeIndex = 0;
-    this._batchNodeCount = 0;
-    this._currentBlendMode = null;
-    this._currentTexture = null;
-  }
-
-  private _groupContentChanged(backend: WebGpuBackend): boolean {
-    packAffineMat4(backend.renderGroupTransform ?? Matrix.identity, this._stagedGroupData, 0);
-
-    if (!this._hasWrittenProjection) {
-      return true;
-    }
-
-    return packedGroupChanged(this._stagedGroupData, this._projectionData, affineMat4FloatCount);
-  }
-
-  public destroy(): void {
-    this.disconnect();
-  }
-
-  /** End (submit) the open pass and reopen a fresh one with an empty arena slice. */
-  private _reopenPass(coordinator: WebGpuPassCoordinator): WebGpuActiveRenderPass {
-    coordinator.endPass();
-
-    const active = coordinator.acquirePass();
-
-    this._instanceArena.resetPass();
-    this._instanceArena.syncPass(active);
-
-    return active;
-  }
-
-  private _getOrCreateTransformBindGroup(device: GPUDevice, uniformBuffer: GPUBuffer, storageBuffer: GPUBuffer): GPUBindGroup {
-    if (this._transformBindGroup !== null && this._transformStorageBuffer === storageBuffer) {
-      return this._transformBindGroup;
-    }
-
-    this._transformStorageBuffer = storageBuffer;
-    this._transformBindGroup = device.createBindGroup({
-      label: 'nine-slice:transform-bind-group',
-      layout: this._uniformBindGroupLayout!,
-      entries: [
-        { binding: 0, resource: { buffer: uniformBuffer } },
-        { binding: 1, resource: { buffer: storageBuffer } },
-      ],
-    });
-
-    return this._transformBindGroup;
-  }
-
-  // ── Retained-batch record/replay ──────────────────────────────────────────
-  // The bundle/stage stores raw instance bytes; this renderer owns the 32-byte
-  // (8-word) layout (node index at word 7), so the layout-aware finalize steps
-  // (node-index scan/rebase) and the replay dispatch live here - mirroring
-  // WebGpuSpriteRenderer's seam, adapted to nine-slice's single-texture path.
-
-  /** @internal See {@link WebGpuRetainedBatchReplayer.scanRetainedNodeIndexRange}. */
-  public scanRetainedNodeIndexRange(bytes: Uint8Array, range: WebGpuRetainedNodeIndexRange): void {
-    const words = new Uint32Array(bytes.buffer, bytes.byteOffset, bytes.byteLength / Uint32Array.BYTES_PER_ELEMENT);
-
-    for (let i = 7; i < words.length; i += 8) {
-      // In-bounds: i < words.length via the loop guard. nodeIndex is the last
-      // word of the 32-byte (8-word) instance layout.
-      const nodeIndex = words[i]!;
-
-      if (nodeIndex < range.min) {
-        range.min = nodeIndex;
-      }
-
-      if (nodeIndex > range.max) {
-        range.max = nodeIndex;
-      }
-    }
-  }
-
-  /** @internal See {@link WebGpuRetainedBatchReplayer.rebaseRetainedNodeIndices} (rebases to group-local indices). */
-  public rebaseRetainedNodeIndices(bytes: Uint8Array, base: number): void {
-    const words = new Uint32Array(bytes.buffer, bytes.byteOffset, bytes.byteLength / Uint32Array.BYTES_PER_ELEMENT);
-
-    for (let i = 7; i < words.length; i += 8) {
-      // In-bounds: i < words.length via the loop guard.
-      words[i] = words[i]! - base;
-    }
-  }
-
-  /**
-   * Replay one recorded batch from its group-owned bundle into the OPEN pass.
-   * Reuses only recorded DATA (instance bytes,
-   * transform rows, texture, blend mode); every piece of STATE is resolved
-   * live - pipeline via the `_getPipeline` cache, the group(1) texture bind
-   * group via the live texture-set cache (resolving re-syncs dirty content),
-   * and the group's 128-byte UBO (projection from the live view + the live
-   * player-composed group matrix) written only when its content changed. The
-   * same-frame double-replay hazard (one group under two views while the open
-   * pass already holds this bundle's draws) ends the pass first. The shared
-   * per-flush projection UBO is never touched, so group boundaries on the
-   * cached path do not fragment the single-submit frame.
-   * @internal
-   */
-  public replayRetainedBatch(payload: WebGpuRetainedBatchPayload): void {
-    const backend = this._backend;
-    const device = this._device;
-    const bundle = payload.bundle;
-
-    if (!backend || !device || this._indexBuffer === null || !bundle.isReady) {
-      return;
-    }
-
-    // Drain any pending live batch into the open pass first (defensive - the
-    // group boundary already flushed; flush() never ends the pass on the
-    // default path and guards its own shared-UBO hazards).
-    this.flush();
-
-    // Match the live path's visibility handling: a fully-clipped scissor draws
-    // nothing (the batch stays recorded; visibility is live per frame).
-    const scissor = backend.getScissorRect();
-
-    if (scissor !== null && (scissor.width <= 0 || scissor.height <= 0)) {
-      return;
-    }
-
-    const coordinator = backend.passCoordinator;
-
-    // Same-frame texture mutation guard: resolving the bindings below
-    // re-uploads mutated content on the queue timeline BEFORE the deferred
-    // submit, which would retroactively change draws already recorded into the
-    // open pass. End (submit) the pass first so they keep the pre-mutation
-    // content. The texture cache is shared and the pass survives a renderer
-    // switch, so any recorded draw is at risk, not just one of ours.
-    if (coordinator.passHasDraws) {
-      for (const texture of payload.textures) {
-        if (backend.textureUploadWouldMutate(texture)) {
-          coordinator.endPass();
-          this._instanceArena.resetPass();
-          break;
-        }
-      }
-    }
-
-    // Resolve the single base texture LIVE through the texture bind-group cache
-    // (syncs dirty content, adopts refreshed views/samplers). The recorded
-    // batch always has exactly one texture (slot 0).
-    const textureBindGroup = this._getOrCreateTextureBindGroup(device, backend, payload.textures[0]!);
-
-    // Group UBO: skip the write while (view, updateId, group bytes) match what
-    // the buffer holds; guard the double-replay aliasing case first.
-    const view = backend.view;
-    const scratch = this._stagedReplayGroupData;
-
-    packAffineMat4(backend.renderGroupTransform ?? Matrix.identity, scratch, 0);
-
-    // Staged unconditionally: an unchanged rect makes this an identity write,
-    // while a changed one forces the rewrite the skip state cannot see.
-    const viewportChanged = packSnapViewport(backend, bundle.uboData, 32);
-
-    let uboDirty = !bundle.uboWritten || bundle.uboView !== view || bundle.uboViewUpdateId !== view.updateId || viewportChanged;
-
-    if (!uboDirty) {
-      for (let i = 0; i < 16; i++) {
-        if (scratch[i] !== bundle.uboData[16 + i]) {
-          uboDirty = true;
-          break;
-        }
-      }
-    }
-
-    if (uboDirty) {
-      const activePass = coordinator.activePass;
-
-      if (activePass !== null && bundle.drawsInPass === activePass) {
-        // Rewriting the UBO would retroactively re-project this bundle's draws
-        // already recorded into the open pass: end it first.
-        coordinator.endPass();
-        this._instanceArena.resetPass();
-      }
-
-      packAffineMat4(view.getTransform(), bundle.uboData, 0);
-      bundle.uboData.set(scratch, 16);
-      bundle.uboView = view;
-      bundle.uboViewUpdateId = view.updateId;
-      bundle.uboWritten = true;
-      device.queue.writeBuffer(bundle.uniformBuffer!, 0, bundle.uboData.buffer, bundle.uboData.byteOffset, retainedGroupUniformBytes);
-    }
-
-    const active = coordinator.acquirePass();
-    const pass = active.pass;
-
-    pass.setPipeline(this._getPipeline(payload.blendMode, backend.renderTargetFormat, coordinator.stencilActive));
-    pass.setBindGroup(0, bundle.getBindGroup(device, this._uniformBindGroupLayout!, false));
-    pass.setBindGroup(1, textureBindGroup);
-    pass.setVertexBuffer(0, bundle.instanceBuffer, payload.byteOffset);
-    pass.setIndexBuffer(this._indexBuffer, 'uint16');
-    pass.drawIndexed(indicesPerInstance, payload.instanceCount, 0, 0, 0);
-
-    bundle.drawsInPass = active;
-    coordinator.markPassDraws();
-    backend.stats.batches++;
-    backend.stats.drawCalls++;
-  }
-
-  /**
-   * Build (or reuse) the group(1) texture bind group for `texture`. The binding
-   * is resolved BEFORE the cache lookup on purpose: resolving is what syncs a
-   * dirty/mutated texture's content to the GPU, so it must run every flush even
-   * when the bind group itself is served from cache. The cached entry is reused
-   * while both the resolved view AND sampler identities are unchanged, and
-   * rebuilt in place otherwise (resize → new view, setScaleMode/setWrapMode →
-   * new sampler).
-   */
-  private _getOrCreateTextureBindGroup(device: GPUDevice, backend: WebGpuBackend, texture: Texture | RenderTexture): GPUBindGroup {
-    const { view, sampler } = backend.getTextureBinding(texture);
-    const cached = this._textureBindGroups.get(texture);
-
-    if (cached?.view === view && cached.sampler === sampler) {
-      return cached.group;
-    }
-
-    const group = device.createBindGroup({
-      label: 'nine-slice:texture-bind-group',
-      layout: this._textureBindGroupLayout!,
-      entries: [
-        { binding: 0, resource: view },
-        { binding: 1, resource: sampler },
-      ],
-    });
-
-    this._textureBindGroups.set(texture, { group, view, sampler });
-
-    return group;
-  }
-
-  /**
-   * Pre-create render pipelines for every blend-mode × target-format pair this
-   * renderer can produce, asynchronously and in parallel. Called from the
-   * backend init path so first-frame draws do not block on synchronous WGSL
-   * compilation. Only the no-clip (`:n`) variants are prewarmed; stencil
-   * pipelines compile lazily on the first clipped draw (mirrors the sprite,
-   * mesh and text renderers).
-   */
-  public async prewarmPipelines(formats: readonly GPUTextureFormat[]): Promise<void> {
-    const device = this._device;
-
-    if (!device || !this._shaderModule || !this._pipelineLayout) {
-      return;
-    }
-
-    if (typeof device.createRenderPipelineAsync !== 'function') {
-      return;
-    }
-
-    const blendModes: readonly BlendModes[] = [
-      BlendModes.Normal,
-      BlendModes.Additive,
-      BlendModes.Subtract,
-      BlendModes.Multiply,
-      BlendModes.Screen,
-      BlendModes.Darken,
-      BlendModes.Lighten,
-    ];
-
-    const promises: Array<Promise<void>> = [];
-
-    for (const blendMode of blendModes) {
-      for (const format of formats) {
-        const key = `${blendMode}:${format}:n`;
-
-        if (this._pipelines.has(key)) {
-          continue;
-        }
-
-        promises.push(
-          device.createRenderPipelineAsync(this._buildPipelineDescriptor(blendMode, format)).then(pipeline => {
-            this._pipelines.set(key, pipeline);
-          }),
-        );
-      }
-    }
-
-    await Promise.all(promises);
-  }
-
-  private _getPipeline(blendMode: BlendModes, format: GPUTextureFormat, stencil: boolean): GPURenderPipeline {
-    const key = `${blendMode}:${format}:${stencil ? 's' : 'n'}`;
-    const existing = this._pipelines.get(key);
-
-    if (existing) {
-      return existing;
-    }
-
-    if (!this._device || !this._shaderModule || !this._pipelineLayout) {
-      throw new Error('WebGpuNineSliceSpriteRenderer: renderer must be connected first.');
-    }
-
-    const pipeline = this._device.createRenderPipeline(this._buildPipelineDescriptor(blendMode, format, stencil));
-
-    this._pipelines.set(key, pipeline);
-
-    return pipeline;
-  }
-
-  private _buildPipelineDescriptor(blendMode: BlendModes, format: GPUTextureFormat, stencil = false): GPURenderPipelineDescriptor {
-    if (!this._shaderModule || !this._pipelineLayout) {
-      throw new Error('WebGpuNineSliceSpriteRenderer: renderer must be connected first.');
-    }
-
-    const descriptor: GPURenderPipelineDescriptor = {
-      label: 'nine-slice:render-pipeline',
-      layout: this._pipelineLayout,
-      vertex: {
-        module: this._shaderModule,
-        entryPoint: 'vertexMain',
-        buffers: [
-          {
-            arrayStride: instanceStrideBytes,
-            stepMode: 'instance',
-            attributes: [
-              { shaderLocation: 0, offset: 0, format: 'float32x4' },
-              { shaderLocation: 1, offset: 16, format: 'unorm16x4' },
-              { shaderLocation: 2, offset: 24, format: 'unorm8x4' },
-              { shaderLocation: 3, offset: 28, format: 'uint32' },
-            ],
-          },
-        ],
-      },
-      fragment: {
-        module: this._shaderModule,
-        entryPoint: 'fragmentMain',
-        targets: [
-          {
-            format,
-            blend: getWebGpuBlendState(blendMode),
-            writeMask: GPUColorWrite.ALL,
-          },
-        ],
-      },
-      primitive: {
-        topology: 'triangle-list',
-      },
-    };
-
-    if (stencil) {
-      descriptor.depthStencil = stencilContentDepthStencilState();
-    }
-
-    return descriptor;
-  }
-
-  // Grow the CPU staging array for the batch currently being packed. The GPU
-  // instance buffer is a separate frame-scoped arena managed in flush().
-  private _ensureInstanceCapacity(instanceCount: number): void {
-    if (instanceCount <= this._instanceCapacity) {
-      return;
-    }
-
-    let nextCapacity = Math.max(this._instanceCapacity, initialBatchCapacity);
-
-    while (nextCapacity < instanceCount) {
-      nextCapacity *= 2;
-    }
-
-    const oldData = this._instanceData;
-    const carryBytes = Math.min(this._quadIndex * instanceStrideBytes, oldData.byteLength);
-    const instanceData = new ArrayBuffer(nextCapacity * instanceStrideBytes);
-
-    if (carryBytes > 0) {
-      new Uint8Array(instanceData).set(new Uint8Array(oldData, 0, carryBytes));
-    }
-
-    this._instanceCapacity = nextCapacity;
-    this._instanceData = instanceData;
-    this._instanceFloat32 = new Float32Array(instanceData);
-    this._instanceUint32 = new Uint32Array(instanceData);
-  }
-}
diff --git a/src/rendering/webgpu/WebGpuRepeatingSpriteRenderer.ts b/src/rendering/webgpu/WebGpuScalableSpriteRenderer.ts
similarity index 96%
rename from src/rendering/webgpu/WebGpuRepeatingSpriteRenderer.ts
rename to src/rendering/webgpu/WebGpuScalableSpriteRenderer.ts
index b0dce3773..b3032c12c 100644
--- a/src/rendering/webgpu/WebGpuRepeatingSpriteRenderer.ts
+++ b/src/rendering/webgpu/WebGpuScalableSpriteRenderer.ts
@@ -3,8 +3,9 @@
 import { Matrix } from '#math/Matrix';
 import { affineMat4FloatCount, packAffineMat4, packedGroupChanged } from '#rendering/affinePacking';
 import type { Drawable } from '#rendering/Drawable';
+import type { NineSliceSprite } from '#rendering/sprite/NineSliceSprite';
 import { computeShaderTiling, type RepeatingSpriteQuad } from '#rendering/sprite/repeatingPlan';
-import type { RepeatingSprite } from '#rendering/sprite/RepeatingSprite';
+import { RepeatingSprite } from '#rendering/sprite/RepeatingSprite';
 import { isSampleableTexture } from '#rendering/texture/deferredTexture';
 import type { RenderTexture } from '#rendering/texture/RenderTexture';
 import type { RepeatMode } from '#rendering/texture/repeat';
@@ -73,20 +74,12 @@ const repeatModeToAddressMode = (mode: RepeatMode): GPUAddressMode => {
   return 'clamp-to-edge';
 };
 
-/** Instanced renderer for {@link RepeatingSprite} using WebGPU. */
-export class WebGpuRepeatingSpriteRenderer extends AbstractWebGpuRenderer<RepeatingSprite> implements WebGpuRetainedBatchReplayer {
+/** Shared geometry batches for scalable sprites, with a separate whole-texture repeating path. @internal */
+export class WebGpuScalableSpriteRenderer extends AbstractWebGpuRenderer<NineSliceSprite | RepeatingSprite> implements WebGpuRetainedBatchReplayer {
   /**
-   * Retained-batch capability opt-in. Only the
-   * GEOMETRY path (TextureRegion source) is recorded: its 32-byte instance
-   * layout (node index at word 7 of the 8-word instance) matches the sprite
-   * renderer's batch shape exactly, so it records and replays through the
-   * same generalized seam. The SHADER path (bare Texture source) uses a
-   * distinct 40-byte stride AND a per-batch wrap-mode sampler that the
-   * generalized instruction payload carries no metadata for - a shader-path
-   * draw inside a capture window POISONS it instead, degrading the group to
-   * the (correct) entry-replay tier rather than replaying with the wrong
-   * sampler. Pixel-snapped draws are excluded for the same reason the sprite
-   * renderer excludes them (view-dependent instance words).
+   * NineSlice and atlas repeating geometry share the retained instance layout.
+   * Whole-texture repeating uses a distinct stride and sampler state, so it
+   * stays on entry replay. Pixel snapping is resolved in the shader.
    * @internal
    */
   public readonly supportsRetainedBatches = true;
@@ -105,7 +98,7 @@ export class WebGpuRepeatingSpriteRenderer extends AbstractWebGpuRenderer<Repeat
    * @internal
    */
   public admitsRetainedRecording(drawable: Drawable): boolean {
-    return (drawable as RepeatingSprite).resolvedStrategy !== 'shader';
+    return !(drawable instanceof RepeatingSprite) || drawable.resolvedStrategy !== 'shader';
   }
 
   private readonly _projData = new Float32Array(projectionByteLength / Float32Array.BYTES_PER_ELEMENT);
@@ -274,17 +267,21 @@ export class WebGpuRepeatingSpriteRenderer extends AbstractWebGpuRenderer<Repeat
     this._recordTextureScratch[0] = null;
   }
 
-  public render(sprite: RepeatingSprite): void {
+  public render(sprite: NineSliceSprite | RepeatingSprite): void {
     const backend = this._backend;
     if (!backend) return;
 
     const texture = sprite.texture;
     if (!isSampleableTexture(texture)) return;
 
-    const strategy = sprite.resolvedStrategy;
+    const repeating = sprite instanceof RepeatingSprite ? sprite : null;
+    const strategy = repeating?.resolvedStrategy ?? 'geometry';
+
+    if (strategy === 'geometry' && sprite.quads.length === 0) return;
+
     const blendMode = sprite.blendMode;
-    const modeX = sprite.modeX;
-    const modeY = sprite.modeY;
+    const modeX = repeating?.modeX ?? null;
+    const modeY = repeating?.modeY ?? null;
 
     // Retained recording: only the geometry path is replayable (see
     // supportsRetainedBatches), and admitsRetainedRecording keeps a
@@ -322,10 +319,10 @@ export class WebGpuRepeatingSpriteRenderer extends AbstractWebGpuRenderer<Repeat
     const nodeIndex = command !== null ? command.nodeIndex : backend.pushTransform(sprite);
     if (nodeIndex > this._maxNodeIndex) this._maxNodeIndex = nodeIndex;
 
-    if (strategy === 'shader') {
+    if (repeating !== null && strategy === 'shader') {
       this._currentModeX = modeX;
       this._currentModeY = modeY;
-      this._writeShaderInstance(sprite, nodeIndex);
+      this._writeShaderInstance(repeating, nodeIndex);
     } else {
       this._writeGeoQuads(sprite, nodeIndex);
     }
@@ -370,7 +367,7 @@ export class WebGpuRepeatingSpriteRenderer extends AbstractWebGpuRenderer<Repeat
     this._shaderQuadCount++;
   }
 
-  private _writeGeoQuads(sprite: RepeatingSprite, nodeIndex: number): void {
+  private _writeGeoQuads(sprite: NineSliceSprite | RepeatingSprite, nodeIndex: number): void {
     // Quads are uploaded RAW; PixelSnapMode.Geometry snaps each shared segment
     // boundary to the device grid in the vertex shader (gap-free, like NineSlice).
     const quads: readonly RepeatingSpriteQuad[] = sprite.quads;
@@ -878,7 +875,7 @@ export class WebGpuRepeatingSpriteRenderer extends AbstractWebGpuRenderer<Repeat
     if (existing) return existing;
 
     if (!this._device || !this._shaderModule || !this._pipelineLayout) {
-      throw new Error('WebGpuRepeatingSpriteRenderer: not connected.');
+      throw new Error('WebGpuScalableSpriteRenderer: not connected.');
     }
 
     const pipeline = this._device.createRenderPipeline(this._buildPipelineDescriptor(kind, blend, format, stencil));
@@ -888,7 +885,7 @@ export class WebGpuRepeatingSpriteRenderer extends AbstractWebGpuRenderer<Repeat
 
   private _buildPipelineDescriptor(kind: 'shader' | 'geo', blend: BlendModes, format: GPUTextureFormat, stencil = false): GPURenderPipelineDescriptor {
     if (!this._shaderModule || !this._pipelineLayout) {
-      throw new Error('WebGpuRepeatingSpriteRenderer: not connected.');
+      throw new Error('WebGpuScalableSpriteRenderer: not connected.');
     }
 
     const isShader = kind === 'shader';
diff --git a/src/rendering/webgpu/WebGpuTextRenderer.ts b/src/rendering/webgpu/WebGpuTextRenderer.ts
index 0cff0e867..ea2ded14b 100644
--- a/src/rendering/webgpu/WebGpuTextRenderer.ts
+++ b/src/rendering/webgpu/WebGpuTextRenderer.ts
@@ -1444,7 +1444,7 @@ export class WebGpuTextRenderer extends AbstractWebGpuRenderer<Text | BitmapText
    * indices are ALWAYS this exact pattern (`buildTextPageQuads` never packs
    * anything else), so replay never needs to persist per-batch index bytes;
    * one shared, ever-growing buffer serves every recorded Text batch on this
-   * renderer, exactly like `WebGpuNineSliceSpriteRenderer`'s static per-quad
+   * renderer, exactly like `WebGpuScalableSpriteRenderer`'s static per-quad
    * index buffer serves every nine-slice instance.
    */
   private _ensureRetainedQuadIndexBuffer(device: GPUDevice, quadCount: number, coordinator: WebGpuBackend['passCoordinator']): GPUBuffer {
diff --git a/src/rendering/webgpu/shaders/nine-slice.wgsl b/src/rendering/webgpu/shaders/nine-slice.wgsl
deleted file mode 100644
index 27c329997..000000000
--- a/src/rendering/webgpu/shaders/nine-slice.wgsl
+++ /dev/null
@@ -1,112 +0,0 @@
-struct ProjectionUniforms {
-    matrix: mat4x4<f32>,
-    group: mat4x4<f32>,
-    viewport: vec4<f32>,        // device-pixel snap rect (x, y, width, height)
-};
-
-struct TransformSlot {
-    m0: vec4<f32>,
-    m1: vec4<f32>,
-};
-
-@group(0) @binding(0)
-var<uniform> projection: ProjectionUniforms;
-@group(0) @binding(1)
-var<storage, read> transforms: array<TransformSlot>;
-
-@group(1) @binding(0)
-var nineSliceTexture: texture_2d<f32>;
-@group(1) @binding(1)
-var nineSliceSampler: sampler;
-
-struct VertexInput {
-    @location(0) quadBounds: vec4<f32>,   // x0, y0, x1, y1
-    @location(1) uvBounds: vec4<f32>,     // u0, v0, u1, v1 (normalised, flipY pre-applied)
-    @location(2) color: vec4<f32>,        // RGBA tint
-    @location(3) nodeIndex: u32,          // transform buffer row
-};
-
-struct VertexOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) texcoord: vec2<f32>,
-    @location(1) color: vec4<f32>,
-};
-
-// Round one local boundary coordinate to the device grid along an axis whose
-// local-to-device scale is scale: floor(L*scale + 0.5) / scale. Pure in the
-// boundary value, so two quads sharing a boundary snap identically — seams stay
-// closed. Degenerate scales pass the value through unchanged.
-fn snapBoundary(localValue: f32, scale: f32) -> f32 {
-    if (abs(scale) < 1e-6) {
-        return localValue;
-    }
-    return floor(localValue * scale + 0.5) / scale;
-}
-
-@vertex
-fn vertexMain(input: VertexInput, @builtin(vertex_index) vid: u32) -> VertexOutput {
-    var output: VertexOutput;
-
-    // vid 0..3 → TL, TR, BR, BL (matches static index buffer [0,1,2,0,2,3])
-    let cornerX = ((vid + 1u) >> 1u) & 1u;
-    let cornerY = vid >> 1u;
-
-    var localX = select(input.quadBounds.x, input.quadBounds.z, cornerX == 1u);
-    var localY = select(input.quadBounds.y, input.quadBounds.w, cornerY == 1u);
-
-    let slot = transforms[input.nodeIndex];
-
-    // Geometry boundary snap (slot.m1.z == 2.0, axis-aligned only): round each
-    // local corner to the device grid so the quad edges land on whole device
-    // pixels. The per-axis device scale is derived from the composed pipeline:
-    // device positions of the local origin and the two local unit axes give
-    // scaleX/scaleY and the cross-terms. Shared
-    // nine-slice quad edges are the same local value, so this pure snap moves
-    // both neighbours identically — the internal seams stay closed.
-    if (slot.m1.z == 2.0) {
-        let vp = projection.viewport.zw;
-        let dO = projection.matrix * projection.group * vec4<f32>(slot.m1.x, slot.m1.y, 0.0, 1.0);
-        let devO = projection.viewport.xy + (dO.xy * 0.5 + vec2<f32>(0.5)) * vp;
-        let dX = projection.matrix * projection.group * vec4<f32>(slot.m1.x + slot.m0.x, slot.m1.y + slot.m0.z, 0.0, 1.0);
-        let dY = projection.matrix * projection.group * vec4<f32>(slot.m1.x + slot.m0.y, slot.m1.y + slot.m0.w, 0.0, 1.0);
-        let devX = projection.viewport.xy + (dX.xy * 0.5 + vec2<f32>(0.5)) * vp;
-        let devY = projection.viewport.xy + (dY.xy * 0.5 + vec2<f32>(0.5)) * vp;
-        let scaleX = devX.x - devO.x;
-        let scaleY = devY.y - devO.y;
-        if (abs(devX.y - devO.y) < 1e-3 && abs(devY.x - devO.x) < 1e-3) {
-            localX = snapBoundary(localX, scaleX);
-            localY = snapBoundary(localY, scaleY);
-        }
-    }
-
-    let worldX = slot.m0.x * localX + slot.m0.y * localY + slot.m1.x;
-    let worldY = slot.m0.z * localX + slot.m0.w * localY + slot.m1.y;
-
-    var position = projection.matrix * projection.group * vec4<f32>(worldX, worldY, 0.0, 1.0);
-
-    // Render-only pixel snapping (slot.m1.z: 0 = none, non-zero = snap origin).
-    // floor(x + 0.5) matches the CPU Math.round policy; WGSL round() is
-    // half-to-even. Grid alignment is independent of the y-axis convention
-    // because the staged viewport rect is whole device pixels.
-    if (slot.m1.z != 0.0) {
-        let originClip = projection.matrix * projection.group * vec4<f32>(slot.m1.x, slot.m1.y, 0.0, 1.0);
-        let originDevice = projection.viewport.xy + (originClip.xy * 0.5 + vec2<f32>(0.5)) * projection.viewport.zw;
-        let snapDelta = (floor(originDevice + vec2<f32>(0.5)) - originDevice) * 2.0 / max(projection.viewport.zw, vec2<f32>(1.0));
-        position = vec4<f32>(position.xy + snapDelta, position.z, position.w);
-    }
-    output.position = position;
-
-    let u = select(input.uvBounds.x, input.uvBounds.z, cornerX == 1u);
-    let v = select(input.uvBounds.y, input.uvBounds.w, cornerY == 1u);
-    output.texcoord = vec2<f32>(u, v);
-
-    output.color = vec4(input.color.rgb * input.color.a, input.color.a);
-
-    return output;
-}
-
-@fragment
-fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
-    let sample = textureSample(nineSliceTexture, nineSliceSampler, input.texcoord);
-    return sample * input.color;
-}
diff --git a/test/perf/rendering/retained-instruction-webgl2.test.ts b/test/perf/rendering/retained-instruction-webgl2.test.ts
index 391e23801..14145a34d 100644
--- a/test/perf/rendering/retained-instruction-webgl2.test.ts
+++ b/test/perf/rendering/retained-instruction-webgl2.test.ts
@@ -19,10 +19,11 @@ import { describe, expect, it, vi } from 'vitest';
 import { Container } from '#rendering/Container';
 import { PixelSnapMode } from '#rendering/pixelSnap';
 import type { RetainedGroupFragment } from '#rendering/plan/RetainedGroupFragment';
-import { RetainedInstructionSet } from '#rendering/plan/RetainedInstructionSet';
+import { RetainedInstructionKind, RetainedInstructionSet } from '#rendering/plan/RetainedInstructionSet';
 import { RetainedContainer } from '#rendering/RetainedContainer';
 import { Sprite } from '#rendering/sprite/Sprite';
-import type { WebGl2RetainedGroupResources } from '#rendering/webgl2/WebGl2RetainedGroupResources';
+import type { WebGl2RetainedBatchPayload, WebGl2RetainedGroupResources } from '#rendering/webgl2/WebGl2RetainedGroupResources';
+import { WebGl2SpriteRenderer } from '#rendering/webgl2/WebGl2SpriteRenderer';
 
 import { makeTextures } from './fixtures';
 import { createWebGl2Harness, measureFrame, type WebGl2Harness } from './harness';
@@ -75,6 +76,63 @@ const buildScene = () => {
 };
 
 describe('WebGL2 retained instruction set: record + splice ladder (Tasks 6/7)', () => {
+  it('preserves descriptor counters for SDK replayers without a replay result', () => {
+    withHarness(harness => {
+      const { root, group } = buildScene();
+
+      measureFrame(harness, root);
+      measureFrame(harness, root);
+      const batch = fragmentOf(group).instructions!.instructions.find(instruction => instruction.kind === RetainedInstructionKind.Batch)!;
+
+      if (batch.kind !== RetainedInstructionKind.Batch) throw new Error('Expected a recorded batch');
+      const payload = batch.payload as WebGl2RetainedBatchPayload;
+      const replayer = {
+        scanRetainedNodeIndexRange: payload.replayer.scanRetainedNodeIndexRange.bind(payload.replayer),
+        rebaseRetainedNodeIndices: payload.replayer.rebaseRetainedNodeIndices.bind(payload.replayer),
+        configureRetainedVao: payload.replayer.configureRetainedVao.bind(payload.replayer),
+        replayRetainedBatch(): void {
+          payload.vao!.drawInstanced(4, 0, payload.instanceCount);
+        },
+      };
+
+      harness.backend.resetStats();
+      harness.backend.replayRetainedBatch({ ...batch, payload: { ...payload, replayer } });
+      expect(harness.backend.stats.batches).toBe(1);
+      expect(harness.backend.stats.drawCalls).toBe(batch.drawCalls);
+      expect(harness.backend.stats.submittedNodes).toBe(batch.nodeCount ?? batch.instanceCount);
+      root.destroy();
+    });
+  });
+
+  it.each(['missing-vao', 'destroyed-bundle', 'disconnected-renderer'] as const)('counts submissions but no draws on %s replay', failure => {
+    withHarness(harness => {
+      const { root, group } = buildScene();
+
+      measureFrame(harness, root);
+      measureFrame(harness, root);
+      const batch = fragmentOf(group).instructions!.instructions.find(instruction => instruction.kind === RetainedInstructionKind.Batch)!;
+
+      if (batch.kind !== RetainedInstructionKind.Batch) throw new Error('Expected a recorded batch');
+      const payload = { ...(batch.payload as WebGl2RetainedBatchPayload) };
+      const detached = new WebGl2SpriteRenderer(16);
+
+      if (failure === 'missing-vao') payload.vao = null;
+      if (failure === 'destroyed-bundle') payload.bundle.destroy();
+      const replayPayload = failure === 'disconnected-renderer' ? { ...payload, replayer: detached } : payload;
+
+      harness.backend.resetStats();
+      harness.backend.replayRetainedBatch({ ...batch, nodeCount: 2, payload: replayPayload });
+      expect(harness.backend.stats.submittedNodes).toBe(2);
+      expect(harness.backend.stats.batches).toBe(0);
+      expect(harness.backend.stats.drawCalls).toBe(0);
+      harness.backend.replayRetainedBatch({ ...batch, nodeCount: 0, payload: replayPayload });
+      expect(harness.backend.stats.submittedNodes).toBe(2);
+
+      detached.destroy();
+      root.destroy();
+    });
+  });
+
   it('walks capture -> record -> splice; the steady splice frame re-uploads ZERO instance bytes', () => {
     withHarness(harness => {
       const { root, group } = buildScene();
diff --git a/test/perf/rendering/structural-scalable-sprite.test.ts b/test/perf/rendering/structural-scalable-sprite.test.ts
new file mode 100644
index 000000000..dbd16a5b8
--- /dev/null
+++ b/test/perf/rendering/structural-scalable-sprite.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+
+import { RetainedContainer } from '#rendering/RetainedContainer';
+import { NineSliceSprite } from '#rendering/sprite/NineSliceSprite';
+import { RepeatingSprite } from '#rendering/sprite/RepeatingSprite';
+
+import { makeRegion, makeTexture } from './fixtures';
+import { createWebGl2Harness, measureFrame } from './harness';
+
+describe('scalable sprite renderer family', () => {
+  it('batches mixed geometry over one texture through live, recorded and replayed frames', () => {
+    const harness = createWebGl2Harness();
+    const texture = makeTexture();
+    const root = new RetainedContainer();
+    const nine = new NineSliceSprite(texture, { slices: 4, width: 64, height: 64 });
+    const repeating = new RepeatingSprite(makeRegion(texture), { width: 64, height: 64 });
+
+    root.addChild(nine, repeating);
+
+    try {
+      for (let frame = 0; frame < 4; frame++) {
+        const measured = measureFrame(harness, root);
+
+        expect(measured.drawCalls).toBe(1);
+        expect(measured.batches).toBe(1);
+        expect(measured.visibleNodes).toBe(2);
+        expect(measured.instances).toBe(10);
+      }
+    } finally {
+      root.destroy();
+      texture.destroy();
+      harness.destroy();
+    }
+  });
+});
diff --git a/test/rendering/browser/webgl2-mobile-precision-regression.test.ts b/test/rendering/browser/webgl2-mobile-precision-regression.test.ts
index b40e71204..be3c055f1 100644
--- a/test/rendering/browser/webgl2-mobile-precision-regression.test.ts
+++ b/test/rendering/browser/webgl2-mobile-precision-regression.test.ts
@@ -35,20 +35,10 @@
  *    (informational) on non-ANGLE backends (Firefox) so it never spuriously
  *    reds them.
  *
- *  - Layer 2 (source regression teeth): every position/UV vertex stage must
- *    declare `precision highp float` and must NOT declare `mediump`/`lowp`
- *    float - the 7 standalone `.vert` files (`sprite`, `mesh`, `particle`,
- *    `text`, `mask-compose`, `backdrop-blend`, `stencil-clip`) via a `?raw`
- *    import, PLUS the 3 vertex sources NineSlice/RepeatingSprite inline as
- *    template literals inside their renderer `.ts` files rather than separate
- *    `.vert` files (`WebGl2NineSliceSpriteRenderer.ts`'s `nineSliceVertexSource`,
- *    `WebGl2RepeatingSpriteRenderer.ts`'s `shaderPathVertSource` and
- *    `geoPathVertSource`) - extracted from the `.ts` source text by name, since
- *    they aren't separately importable. This fails RED the instant someone
- *    reintroduces reduced precision on any of these 10 stages - proven during
- *    development: downgrading `sprite.vert` to `mediump` fails this layer
- *    immediately. This is the guard that catches the regression in required
- *    CI, since the render layer cannot (arithmetic is fp32 on SwiftShader).
+ *  - Layer 2 (source precision): position/UV vertex stages, including the shared
+ *    scalable geometry and repeating shader paths, must declare `precision
+ *    highp float` and never `mediump`/`lowp` float. Raw shader imports catch
+ *    reduced precision even where rendering uses fp32 arithmetic on SwiftShader.
  *
  *  - Layer 3 (end-to-end correctness): render the REAL shipped `sprite.vert`/
  *    `sprite.frag` (bypassing the shader stub via a `?raw` import, the same
@@ -181,7 +171,6 @@ const positionVertStages = {
   'mask-compose.vert': () => import('../../../src/rendering/webgl2/shaders/mask-compose.vert?raw'),
   'backdrop-blend.vert': () => import('../../../src/rendering/webgl2/shaders/backdrop-blend.vert?raw'),
   'stencil-clip.vert': () => import('../../../src/rendering/webgl2/shaders/stencil-clip.vert?raw'),
-  'nine-slice.vert': () => import('../../../src/rendering/webgl2/shaders/nine-slice.vert?raw'),
   'repeating-sprite-shader-path.vert': () => import('../../../src/rendering/webgl2/shaders/repeating-sprite-shader-path.vert?raw'),
   'repeating-sprite-geo-path.vert': () => import('../../../src/rendering/webgl2/shaders/repeating-sprite-geo-path.vert?raw'),
   'sprite-material.vert': () => import('../../../src/rendering/sprite/shaders/sprite-material.vert?raw'),
diff --git a/test/rendering/browser/webgl2-scalable-sprite-state.test.ts b/test/rendering/browser/webgl2-scalable-sprite-state.test.ts
new file mode 100644
index 000000000..348f63d5a
--- /dev/null
+++ b/test/rendering/browser/webgl2-scalable-sprite-state.test.ts
@@ -0,0 +1,32 @@
+import { Color } from '#core/Color';
+import { NineSliceSprite } from '#rendering/sprite/NineSliceSprite';
+import { BlendModes } from '#rendering/types';
+
+import { createWebGl2TestBackend, readWebGl2Pixel } from './_backendSetup';
+import { createSolidTexture } from './_crossRendererBlendScene';
+import { expectPixelNear } from './_pixels';
+
+describe('scalable sprite draw-time state', () => {
+  test('restores texture and blend state changed after enqueue', async () => {
+    const backend = await createWebGl2TestBackend(64);
+    const texture = createSolidTexture('#ff0000');
+    const foreign = createSolidTexture('#0000ff');
+    const nine = new NineSliceSprite(texture, { slices: 4, width: 32, height: 32 });
+
+    try {
+      backend.clear(new Color(0, 0, 64, 1));
+      const renderer = backend.rendererRegistry.resolve(nine);
+
+      renderer.render(nine);
+      backend.bindTexture(foreign, 0);
+      backend.setBlendMode(BlendModes.Additive);
+      renderer.flush();
+      expectPixelNear(readWebGl2Pixel(backend, 16, 16), [255, 0, 0, 255]);
+    } finally {
+      nine.destroy();
+      texture.destroy();
+      foreign.destroy();
+      backend.destroy();
+    }
+  });
+});
diff --git a/test/rendering/browser/webgl2-shader-compile.test.ts b/test/rendering/browser/webgl2-shader-compile.test.ts
index 3625cc81a..ee8e51e39 100644
--- a/test/rendering/browser/webgl2-shader-compile.test.ts
+++ b/test/rendering/browser/webgl2-shader-compile.test.ts
@@ -179,7 +179,6 @@ const programPairs: ReadonlyArray<readonly [string, string]> = [
   ['text.vert', 'text-color.frag'],
   ['text.vert', 'text-sdf.frag'],
   ['text.vert', 'text-msdf.frag'],
-  ['nine-slice.vert', 'nine-slice.frag'],
   // Both repeating-sprite vertex paths (one quad per sprite, N quads per sprite)
   // link against the same fragment stage.
   ['repeating-sprite-shader-path.vert', 'repeating-sprite.frag'],
diff --git a/test/rendering/browser/webgl2-text-retained-instruction-replay.test.ts b/test/rendering/browser/webgl2-text-retained-instruction-replay.test.ts
index 2c7cad194..dda07766b 100644
--- a/test/rendering/browser/webgl2-text-retained-instruction-replay.test.ts
+++ b/test/rendering/browser/webgl2-text-retained-instruction-replay.test.ts
@@ -321,7 +321,9 @@ describe('WebGL2 renderer matrix: Text retained instruction-set replay cells', (
       // F3 static frame: the fast/instruction-replay tier is the only path that
       // can draw the group's glyphs. A neutered replay that never issues its
       // drawElements leaves the canvas empty where the record frame had ink.
-      WebGl2TextRenderer.prototype.replayRetainedBatch = function (): void {};
+      WebGl2TextRenderer.prototype.replayRetainedBatch = function (): boolean {
+        return false;
+      };
 
       render(backend, scene.root);
 
diff --git a/test/rendering/browser/webgpu-shader-compile.test.ts b/test/rendering/browser/webgpu-shader-compile.test.ts
index 30da418a2..cb5d864ef 100644
--- a/test/rendering/browser/webgpu-shader-compile.test.ts
+++ b/test/rendering/browser/webgpu-shader-compile.test.ts
@@ -48,8 +48,7 @@ import { compositorShaderSource as backdropBlendCompositorWgsl } from '#renderin
 import { mipmapWgsl } from '#rendering/webgpu/WebGpuBackend';
 import { compositorShaderSource as maskCompositorWgsl } from '#rendering/webgpu/WebGpuMaskCompositor';
 import { instancedMeshShaderSource, meshShaderSource } from '#rendering/webgpu/WebGpuMeshRenderer';
-import { nineSliceShaderSource } from '#rendering/webgpu/WebGpuNineSliceSpriteRenderer';
-import { commonWgsl, geoPathEntries, shaderPathEntries } from '#rendering/webgpu/WebGpuRepeatingSpriteRenderer';
+import { commonWgsl, geoPathEntries, shaderPathEntries } from '#rendering/webgpu/WebGpuScalableSpriteRenderer';
 import { buildPersistentSpriteShaderSource, buildSpriteShaderSource, spriteBatchTextureSlotTiers } from '#rendering/webgpu/WebGpuSpriteRenderer';
 import { stencilWriteShaderSource } from '#rendering/webgpu/WebGpuStencilClipper';
 import { textShaderSource } from '#rendering/webgpu/WebGpuTextRenderer';
@@ -75,10 +74,9 @@ const shaders: readonly ShaderEntry[] = [
   { name: 'WebGpuMaskCompositor', source: maskCompositorWgsl },
   { name: 'WebGpuMeshRenderer (default)', source: meshShaderSource },
   { name: 'WebGpuMeshRenderer (instanced)', source: instancedMeshShaderSource },
-  { name: 'WebGpuNineSliceSpriteRenderer', source: nineSliceShaderSource },
   // Combined exactly as `onConnect` feeds `createShaderModule`: shared struct/
   // binding declarations + both entry-point sets in one module.
-  { name: 'WebGpuRepeatingSpriteRenderer (combined)', source: commonWgsl + shaderPathEntries + geoPathEntries },
+  { name: 'WebGpuScalableSpriteRenderer (combined)', source: commonWgsl + shaderPathEntries + geoPathEntries },
   // The sprite shader is generated per slot tier from the device limits
   // Every tier that can ever ship is compiled here.
   ...spriteBatchTextureSlotTiers.map(tier => ({ name: `WebGpuSpriteRenderer (${tier} texture slots)`, source: buildSpriteShaderSource(tier) })),
diff --git a/test/rendering/derived-selection-state.test.ts b/test/rendering/derived-selection-state.test.ts
index 94f56a0a7..c930c43b5 100644
--- a/test/rendering/derived-selection-state.test.ts
+++ b/test/rendering/derived-selection-state.test.ts
@@ -7,12 +7,12 @@
  * and that the order stream reproduces the emit order EXACTLY - including nested
  * scopes at their recorded position - because that stream IS the draw order.
  */
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import type { Drawable } from '#rendering/Drawable';
 import { DerivedSelectionState } from '#rendering/plan/DerivedSelectionState';
 import { RenderEntryKind } from '#rendering/plan/renderCommand';
-import { createSourceScope, finalizeSourceScopes, type SourceGroup, type SourceScope } from '#rendering/plan/renderSourceItem';
+import { createSourceScope, finalizeSourceScopes, LiveEntryReason, type SourceGroup, type SourceScope } from '#rendering/plan/renderSourceItem';
 import { MembershipBits } from '#rendering/plan/SourceVisibilityIndex';
 
 const drawable = (): Drawable => ({}) as Drawable;
@@ -70,6 +70,36 @@ const orderedHandles = (state: DerivedSelectionState): number[] => {
 };
 
 describe('DerivedSelectionState', () => {
+  it.each([0, 1])('skips live marks in an unqueried subgroup at item mark %i and restores them on re-entry', itemMark => {
+    const root = createSourceScope();
+
+    fill(root, 1);
+    const group = nest(root, 1, itemMark);
+    const child = nest(group, 0, 1);
+    const live = { kind: RenderEntryKind.Barrier as const, seq: 0, zIndex: 0, node: drawable(), reason: LiveEntryReason.Barrier, itemMark: 0 };
+
+    child.others.push(live);
+    const scopes = finalize(root);
+    const state = new DerivedSelectionState();
+    const first = membership(scopes, [[0], [0], []]);
+    const culled = membership(scopes, [[0], [], []]);
+
+    state.rebind(2);
+    state.update(root, first, null, new Uint8Array([1, 1, 1]));
+    expect(state.markCount).toBe(1);
+    const walk = vi.spyOn(state as unknown as { _walkScope(scope: SourceScope): void }, '_walkScope');
+
+    state.update(root, culled, first, new Uint8Array([1, 0, 0]));
+    expect(walk.mock.calls.map(([scope]) => scope.ordinal)).toEqual([0]);
+    expect(state.markCount).toBe(0);
+    expect(orderedHandles(state)).toEqual([0]);
+    expect(state.stats.released).toBe(1);
+    state.update(root, first, culled, new Uint8Array([1, 1, 1]));
+    expect(state.markCount).toBe(1);
+    expect(state.markEntries[0]).toBe(live);
+    expect(state.stats.reused).toBe(1);
+  });
+
   describe('slot lifetime', () => {
     it('gives every admitted item a slot on the first update', () => {
       const root = createSourceScope();
diff --git a/test/rendering/persistent-slot-live-marks.test.ts b/test/rendering/persistent-slot-live-marks.test.ts
index 467ab483b..561bc9200 100644
--- a/test/rendering/persistent-slot-live-marks.test.ts
+++ b/test/rendering/persistent-slot-live-marks.test.ts
@@ -3,6 +3,7 @@ import { vi } from 'vitest';
 import { Rectangle } from '#math/Rectangle';
 import { Container } from '#rendering/Container';
 import { Drawable } from '#rendering/Drawable';
+import { DerivedRootProduct } from '#rendering/plan/DerivedRootProduct';
 import type { PersistentSlotBundle } from '#rendering/plan/persistentSlotDraw';
 import { RenderPlanBuilder } from '#rendering/plan/RenderPlanBuilder';
 import { RenderPlanOptimizer } from '#rendering/plan/RenderPlanOptimizer';
@@ -231,6 +232,37 @@ const frameEvents = (harness: Harness, root: RenderNode): string[] => {
 };
 
 describe('persistent slots: a live entry cuts the order stream', () => {
+  test('counts an offscreen subgroup once and never queries its descendants', () => {
+    const harness = createHarness();
+    const root = new Container();
+    const group = new Container();
+    const nested = new Container();
+
+    root.cullable = false;
+    addLeaves(root, 'a', 4, 100);
+    addLeaves(nested, 'hidden', 3, 10_000);
+    group.addChild(nested);
+    root.addChild(group);
+    driveToSourceTier(root, harness.backend);
+
+    const query = vi.spyOn(nested, '_inCullRect');
+    const selectScope = vi.spyOn(DerivedRootProduct.prototype, 'selectScope');
+
+    harness.backend.stats.culledNodes = 0;
+    harness.backend.setView(viewAt(2_000));
+    frameEvents(harness, root);
+
+    expect(harness.stores.length).toBeGreaterThan(0);
+    expect(query).not.toHaveBeenCalled();
+    expect(selectScope).toHaveBeenCalledTimes(1);
+    expect(harness.backend.stats.culledNodes).toBe(5);
+    expect(harness.events).toEqual([]);
+
+    selectScope.mockRestore();
+    root.destroy();
+    harness.backend.destroy();
+  });
+
   test('a masked container inside the root draws between two slot segments, in collect order', () => {
     const harness = createHarness();
     const { root } = createMaskedScene();
diff --git a/test/rendering/webgpu-affine-packing-parity.test.ts b/test/rendering/webgpu-affine-packing-parity.test.ts
index 6d0808038..43cac8b85 100644
--- a/test/rendering/webgpu-affine-packing-parity.test.ts
+++ b/test/rendering/webgpu-affine-packing-parity.test.ts
@@ -23,8 +23,7 @@ import { affineMat3Std140FloatCount, affineMat4FloatCount, packAffineMat3Std140,
 import { spriteVertexCoreWgsl } from '#rendering/sprite/materialSources';
 import { TransformBuffer } from '#rendering/TransformBuffer';
 import { instancedMeshShaderSource, WebGpuMeshRenderer } from '#rendering/webgpu/WebGpuMeshRenderer';
-import { nineSliceShaderSource } from '#rendering/webgpu/WebGpuNineSliceSpriteRenderer';
-import { geoPathEntries, shaderPathEntries } from '#rendering/webgpu/WebGpuRepeatingSpriteRenderer';
+import { geoPathEntries, shaderPathEntries } from '#rendering/webgpu/WebGpuScalableSpriteRenderer';
 import { buildPersistentSpriteShaderSource, buildSpriteShaderSource, spriteBatchTextureSlotTiers } from '#rendering/webgpu/WebGpuSpriteRenderer';
 import { textShaderSource } from '#rendering/webgpu/WebGpuTextRenderer';
 
@@ -147,9 +146,8 @@ describe('WGSL slot math parity across instanced renderers', () => {
     // the core covers all three at once. It takes the two transform rows as
     // parameters rather than reading a local, hence the empty slot prefix.
     { name: 'sprite (shared vertex core)', source: spriteVertexCoreWgsl, slot: '', lx: 'localX', ly: 'localY' },
-    { name: 'nine-slice', source: nineSliceShaderSource, lx: 'localX', ly: 'localY' },
     { name: 'repeating-sprite (shader path)', source: shaderPathEntries, lx: 'lx', ly: 'ly' },
-    { name: 'repeating-sprite (geometry path)', source: geoPathEntries, lx: 'lx', ly: 'ly' },
+    { name: 'scalable-sprite (shared geometry path)', source: geoPathEntries, lx: 'lx', ly: 'ly' },
     { name: 'mesh (instanced path)', source: instancedMeshShaderSource, lx: String.raw`input\.position\.x`, ly: String.raw`input\.position\.y` },
   ];
 
diff --git a/test/rendering/webgpu-pipeline-prewarm.test.ts b/test/rendering/webgpu-pipeline-prewarm.test.ts
index e81f898d2..03c235aa7 100644
--- a/test/rendering/webgpu-pipeline-prewarm.test.ts
+++ b/test/rendering/webgpu-pipeline-prewarm.test.ts
@@ -20,8 +20,7 @@
 
 import { BlendModes } from '#rendering/types';
 import { WebGpuMeshRenderer } from '#rendering/webgpu/WebGpuMeshRenderer';
-import { WebGpuNineSliceSpriteRenderer } from '#rendering/webgpu/WebGpuNineSliceSpriteRenderer';
-import { WebGpuRepeatingSpriteRenderer } from '#rendering/webgpu/WebGpuRepeatingSpriteRenderer';
+import { WebGpuScalableSpriteRenderer } from '#rendering/webgpu/WebGpuScalableSpriteRenderer';
 import { WebGpuSpriteRenderer } from '#rendering/webgpu/WebGpuSpriteRenderer';
 import { WebGpuTextRenderer } from '#rendering/webgpu/WebGpuTextRenderer';
 
@@ -204,60 +203,11 @@ describe('WebGpuMeshRenderer pipeline prewarm', () => {
   });
 });
 
-describe('WebGpuNineSliceSpriteRenderer pipeline prewarm', () => {
-  const setup = (): { renderer: WebGpuNineSliceSpriteRenderer; stub: StubDevice; pipelines: Map<string, GPURenderPipeline> } => {
-    const renderer = new WebGpuNineSliceSpriteRenderer();
-    const stub = createStubDevice();
-    const internals = renderer as unknown as {
-      _device: unknown;
-      _shaderModule: unknown;
-      _pipelineLayout: unknown;
-      _backend: unknown;
-      _pipelines: Map<string, GPURenderPipeline>;
-    };
-
-    internals._device = stub.device;
-    internals._shaderModule = {};
-    internals._pipelineLayout = {};
-    internals._backend = {};
-
-    return { renderer, stub, pipelines: internals._pipelines };
-  };
-
-  test('prewarmed pipelines are found by the hot-path lookup (no synchronous compiles)', async () => {
-    const { renderer, stub } = setup();
-
-    await renderer.prewarmPipelines(formats);
-
-    const lookup = renderer as unknown as { _getPipeline(blendMode: BlendModes, format: GPUTextureFormat, stencil: boolean): GPURenderPipeline };
-
-    for (const blendMode of prewarmedBlendModes) {
-      for (const format of formats) {
-        lookup._getPipeline(blendMode, format, false);
-      }
-    }
-
-    expect(stub.syncCreates()).toBe(0);
-  });
-
-  test('the pipeline cache holds no unreachable (suffix-less) keys after prewarm', async () => {
-    const { renderer, pipelines } = setup();
-
-    await renderer.prewarmPipelines(formats);
-
-    expect(pipelines.size).toBe(prewarmedBlendModes.length * formats.length);
-
-    for (const key of pipelines.keys()) {
-      expect(key).toMatch(lookupKeyPattern);
-    }
-  });
-});
-
-describe('WebGpuRepeatingSpriteRenderer pipeline prewarm', () => {
+describe('WebGpuScalableSpriteRenderer pipeline prewarm', () => {
   const kinds = ['shader', 'geo'] as const;
 
-  const setup = (): { renderer: WebGpuRepeatingSpriteRenderer; stub: StubDevice; pipelines: Map<string, GPURenderPipeline> } => {
-    const renderer = new WebGpuRepeatingSpriteRenderer();
+  const setup = (): { renderer: WebGpuScalableSpriteRenderer; stub: StubDevice; pipelines: Map<string, GPURenderPipeline> } => {
+    const renderer = new WebGpuScalableSpriteRenderer();
     const stub = createStubDevice();
     const internals = renderer as unknown as {
       _device: unknown;
diff --git a/test/rendering/webgpu-retained-record-replay.test.ts b/test/rendering/webgpu-retained-record-replay.test.ts
index 4554d1836..cff53d539 100644
--- a/test/rendering/webgpu-retained-record-replay.test.ts
+++ b/test/rendering/webgpu-retained-record-replay.test.ts
@@ -32,13 +32,16 @@ import { buildCoreRendererBindings } from '#rendering/coreRendererBindings';
 import { GpuResourceAccountant } from '#rendering/GpuResourceAccountant';
 import { SpriteMaterial } from '#rendering/material/SpriteMaterial';
 import type { RetainedGroupFragment } from '#rendering/plan/RetainedGroupFragment';
-import { RetainedInstructionSet } from '#rendering/plan/RetainedInstructionSet';
+import { RetainedInstructionKind, RetainedInstructionSet } from '#rendering/plan/RetainedInstructionSet';
 import type { RenderNode } from '#rendering/RenderNode';
 import { createRenderStats } from '#rendering/RenderStats';
 import { RetainedContainer } from '#rendering/RetainedContainer';
 import { Shader } from '#rendering/shader/Shader';
+import { NineSliceSprite } from '#rendering/sprite/NineSliceSprite';
+import { RepeatingSprite } from '#rendering/sprite/RepeatingSprite';
 import { Sprite } from '#rendering/sprite/Sprite';
 import { Texture } from '#rendering/texture/Texture';
+import { TextureRegion } from '#rendering/texture/TextureRegion';
 import { BlendModes } from '#rendering/types';
 import { WebGpuBackend } from '#rendering/webgpu/WebGpuBackend';
 import { WebGpuRetainedGroupBundle } from '#rendering/webgpu/WebGpuRetainedGroupBundle';
@@ -307,6 +310,71 @@ const buildGroupScene = (texture: Texture, groupCount: number): { root: Containe
 };
 
 describe('WebGPU retained record/replay: fallback ladder + submit collapse', () => {
+  test('mixed scalable geometry uses one batch through live, record and replay frames', async () => {
+    const environment = createMockWebGpuEnvironment();
+
+    try {
+      const backend = await createBackend(environment);
+      const texture = createCanvasTexture();
+      const group = new RetainedContainer();
+
+      group.addChild(
+        new NineSliceSprite(texture, { slices: 4, width: 16, height: 16 }),
+        new RepeatingSprite(new TextureRegion(texture, { x: 0, y: 0, width: 16, height: 16 }), { width: 16, height: 16 }),
+      );
+
+      for (let frame = 0; frame < 4; frame++) {
+        const before = environment.draws().length;
+
+        renderFrame(backend, group);
+        expect(environment.draws().slice(before)).toEqual([{ instanceCount: 10 }]);
+        expect(backend.stats.batches).toBe(1);
+        expect(backend.stats.drawCalls).toBe(1);
+        expect(backend.stats.submittedNodes).toBe(2);
+      }
+
+      expect(fragmentOf(group).instructions?.hasRecording).toBe(true);
+      group.destroy();
+      texture.destroy();
+      backend.destroy();
+    } finally {
+      environment.restore();
+    }
+  });
+
+  test('destroyed replay resources count submitted nodes but no batches or draws', async () => {
+    const environment = createMockWebGpuEnvironment();
+
+    try {
+      const backend = await createBackend(environment);
+      const texture = createCanvasTexture();
+      const { root, groups } = buildGroupScene(texture, 1);
+
+      renderFrame(backend, root);
+      renderFrame(backend, root);
+      const set = fragmentOf(groups[0]!).instructions!;
+      const batch = set.instructions.find(instruction => instruction.kind === RetainedInstructionKind.Batch)!;
+
+      if (batch.kind !== RetainedInstructionKind.Batch) throw new Error('Expected a recorded batch');
+      set.ownedBundle!.destroy!();
+      backend.resetStats();
+      const before = environment.draws().length;
+
+      backend.replayRetainedBatch({ ...batch, nodeCount: 2 });
+      backend.replayRetainedBatch({ ...batch, nodeCount: 0 });
+      expect(environment.draws()).toHaveLength(before);
+      expect(backend.stats.submittedNodes).toBe(2);
+      expect(backend.stats.batches).toBe(0);
+      expect(backend.stats.drawCalls).toBe(0);
+
+      root.destroy();
+      texture.destroy();
+      backend.destroy();
+    } finally {
+      environment.restore();
+    }
+  });
+
   test('SpriteMaterial values stay live on instruction replay and structural state re-records recoverably', async () => {
     const environment = createMockWebGpuEnvironment();
 
diff --git a/test/rendering/wgsl-naga-validation.test.ts b/test/rendering/wgsl-naga-validation.test.ts
index 9c6027eed..1d912c19b 100644
--- a/test/rendering/wgsl-naga-validation.test.ts
+++ b/test/rendering/wgsl-naga-validation.test.ts
@@ -42,8 +42,7 @@ import { compositorShaderSource as backdropBlendCompositorWgsl } from '#renderin
 import { mipmapWgsl } from '#rendering/webgpu/WebGpuBackend';
 import { compositorShaderSource as maskCompositorWgsl } from '#rendering/webgpu/WebGpuMaskCompositor';
 import { instancedMeshShaderSource, meshShaderSource } from '#rendering/webgpu/WebGpuMeshRenderer';
-import { nineSliceShaderSource } from '#rendering/webgpu/WebGpuNineSliceSpriteRenderer';
-import { commonWgsl, geoPathEntries, shaderPathEntries } from '#rendering/webgpu/WebGpuRepeatingSpriteRenderer';
+import { commonWgsl, geoPathEntries, shaderPathEntries } from '#rendering/webgpu/WebGpuScalableSpriteRenderer';
 import { buildPersistentSpriteShaderSource, buildSpriteShaderSource, spriteBatchTextureSlotTiers } from '#rendering/webgpu/WebGpuSpriteRenderer';
 import { stencilWriteShaderSource } from '#rendering/webgpu/WebGpuStencilClipper';
 import { textShaderSource } from '#rendering/webgpu/WebGpuTextRenderer';
@@ -55,8 +54,7 @@ const shaders: ReadonlyArray<readonly [name: string, source: string]> = [
   ['WebGpuMaskCompositor', maskCompositorWgsl],
   ['WebGpuMeshRenderer (default)', meshShaderSource],
   ['WebGpuMeshRenderer (instanced)', instancedMeshShaderSource],
-  ['WebGpuNineSliceSpriteRenderer', nineSliceShaderSource],
-  ['WebGpuRepeatingSpriteRenderer (combined)', commonWgsl + shaderPathEntries + geoPathEntries],
+  ['WebGpuScalableSpriteRenderer (combined)', commonWgsl + shaderPathEntries + geoPathEntries],
   ...spriteBatchTextureSlotTiers.map((tier): readonly [string, string] => [`WebGpuSpriteRenderer (${tier} texture slots)`, buildSpriteShaderSource(tier)]),
   ...spriteBatchTextureSlotTiers.map((tier): readonly [string, string] => [
     `WebGpuSpriteRenderer persistent-indexed (${tier} texture slots)`,
diff --git a/test/site/bench-invalid-values.test.ts b/test/site/bench-invalid-values.test.ts
index d3ce26232..8a3744622 100644
--- a/test/site/bench-invalid-values.test.ts
+++ b/test/site/bench-invalid-values.test.ts
@@ -117,6 +117,13 @@ describe('every published profile', () => {
     expect(loads.length).toBeGreaterThan(0);
   });
 
+  it('publishes quantitative comparisons for joints like every other scenario', () => {
+    const joints = benchProfiles.flatMap(document => physicsCards(document)).filter(card => card.id === 'joints');
+
+    expect(joints.length).toBeGreaterThan(0);
+    expect(joints.flatMap(card => card.loads).some(load => load.arms.some(arm => arm.quantitative))).toBe(true);
+  });
+
   it('publishes no arm at a zero time', () => {
     // A stored zero is an arm that sat the comparison out. Whatever else a card
     // does with it, it must never reach the page as the fastest figure on it.
@@ -136,8 +143,6 @@ describe('every published profile', () => {
       const published = load.arms.filter(arm => arm.ms !== null).map(arm => arm.ms ?? 0);
 
       // The section reads "lower is better", so the rows read best to worst.
-      // A withheld load is sorted the same way: its times are real durations,
-      // and the marker on the load, not the order, says they are no ranking.
       expect(published).toStrictEqual([...published].sort((a, b) => a - b));
       // Arms without a figure sit behind the published ones, never between them.
       const firstUnpublished = load.arms.findIndex(arm => arm.ms === null);
diff --git a/test/site/bench-opening-selection.test.ts b/test/site/bench-opening-selection.test.ts
index c2e3f7f02..cb4c903b6 100644
--- a/test/site/bench-opening-selection.test.ts
+++ b/test/site/bench-opening-selection.test.ts
@@ -34,7 +34,6 @@ const loadOf = (count: number, peerOutcomes: Readonly<Record<string, CellOutcome
   primary: false,
   arms: [armOf('exojs', 'level', true), ...Object.entries(peerOutcomes).map(([id, outcome]) => armOf(id, outcome))],
   maxMs: 1,
-  withheld: undefined,
 });
 
 const cardOf = (loads: readonly CardLoad[]): BenchCard => ({ id: 'test', category: 'test', loads });

From 07d5ea5496381a24b82d491edf763578448574c5 Mon Sep 17 00:00:00 2001
From: Exoridus <1218727+Exoridus@users.noreply.github.com>
Date: Sun, 27 Sep 2026 04:31:36 +0200
Subject: [PATCH 2/2] test(rendering): track shared sprite caches

---
 .../webgpu-prewarm-bindgroup-cache.test.ts        | 15 +++++++++++----
 .../webgpu-instanced-flush-caching.test.ts        |  4 ++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/test/rendering/browser/webgpu-prewarm-bindgroup-cache.test.ts b/test/rendering/browser/webgpu-prewarm-bindgroup-cache.test.ts
index 9da2c4a8d..43d467602 100644
--- a/test/rendering/browser/webgpu-prewarm-bindgroup-cache.test.ts
+++ b/test/rendering/browser/webgpu-prewarm-bindgroup-cache.test.ts
@@ -155,14 +155,21 @@ describe('WebGPU prewarm + flush-path caching (nine-slice / repeating / text)',
       // Prewarm ran during initialize(): the no-clip pipeline variants exist.
       expect(pipelineCacheSize(backend, sprite)).toBeGreaterThan(0);
 
-      if (!(await renderNode(ctx, backend, sprite))) {
+      const device = getBackendDevice(backend);
+      const textureBindGroupLabel = 'repeating-sprite:texture-bind-group:geo';
+      let drew = false;
+
+      const warmed = await countBindGroups(device, textureBindGroupLabel, async () => {
+        drew = await renderNode(ctx, backend, sprite);
+      });
+
+      if (!drew) {
         return;
       }
 
-      const device = getBackendDevice(backend);
-      let drew = false;
+      expect(warmed).toBe(1);
 
-      const created = await countBindGroups(device, 'nine-slice:texture-bind-group', async () => {
+      const created = await countBindGroups(device, textureBindGroupLabel, async () => {
         drew = await renderNode(ctx, backend, sprite);
       });
 
diff --git a/test/rendering/webgpu-instanced-flush-caching.test.ts b/test/rendering/webgpu-instanced-flush-caching.test.ts
index 9f2f9f3d2..e80060ab2 100644
--- a/test/rendering/webgpu-instanced-flush-caching.test.ts
+++ b/test/rendering/webgpu-instanced-flush-caching.test.ts
@@ -37,8 +37,8 @@ const renderFrame = (backend: WebGpuBackend, nodes: readonly RenderNode[]): void
 };
 
 describe('WebGPU NineSliceSprite flush hot-path caching', () => {
-  const uniformLabel = 'nine-slice:uniform-buffer';
-  const textureBindGroupLabel = 'nine-slice:texture-bind-group';
+  const uniformLabel = 'repeating-sprite:uniform-buffer';
+  const textureBindGroupLabel = 'repeating-sprite:texture-bind-group:geo';
 
   const makeSprite = (texture: Texture): NineSliceSprite => new NineSliceSprite(texture, { slices: 4, border: 4, width: 48, height: 48 });