@aardworx/wombat.rendering 0.9.14 → 0.9.16

package/src/runtime/heapScene.ts

@@ -75,161 +75,29 @@ import {
   isDerivedRule, STANDARD_DERIVED_RULES, STANDARD_TRAFO_LEAVES, inputsOf,
   type RoRegistration, type DerivedRule,
 } from "./derivedUniforms/index.js";
-
-// ---------------------------------------------------------------------------
-// Per-allocation arena layout
-// ---------------------------------------------------------------------------
-
-// Per-allocation header: (u32 typeId, u32 length). typeId is
-// (semantic << 16) | encoding. The data region follows the header
-// aligned up to 16 bytes (so positions/normals/etc. line up for
-// future vec4 reads).
-const ALLOC_HEADER_BYTES   = 8;
-const ALLOC_HEADER_PAD_TO  = 16;     // data starts header_offset + 16
-
-// Encoding-tag enum (low 16 bits of typeId).
-const ENC_V3F_TIGHT = 1;             // tightly-packed array of vec3<f32> (12 B/elt)
-
-// Semantic-tag enum (high 16 bits of typeId). Optional metadata —
-// the shader doesn't branch on this.
-const SEM_POSITIONS = 1;
-const SEM_NORMALS   = 2;
-
-const ALIGN16 = (n: number) => (n + 15) & ~15;
-
-function packMat44(m: M44d, dst: Float32Array, off: number): void {
-  // Zero-alloc flat copy (row-major) straight into the f32 staging
-  // buffer — `copyTo` does `dst.set(m._data, off)` which narrows f64→f32
-  // on store, no throwaway `number[]` per call.
-  m.copyTo(dst, off);
-}
-
-// ─── Layout-driven value packing ────────────────────────────────────
-//
-// Maps a schema uniform name + its value source to bytes in a staging
-// buffer. The bridge between the spec's named JS-side fields (e.g.
-// `spec.modelTrafo: Trafo3d`) and the schema's typed uniforms
-// ("ModelTrafo" mat4, "ModelTrafoInv" mat4, …). Step 5 generalises
-// this to a `spec.uniforms: { [name]: aval }` map; until then we
-// hardcode the shape here.
-
-// ─── Generic packer registry, keyed on WGSL type ────────────────────
-//
-// Each per-draw uniform comes from the spec as an aval whose JS value
-// type is determined by what the user passes. The packer for a given
-// WGSL type knows how to turn that JS value into bytes for the arena.
-// Step 5: this replaces the per-name `perDrawBinding` switch — the
-// spec just supplies `uniforms: { [name]: aval<...> }` and the
-// runtime asks the registry "how do I pack a `mat4x4<f32>`".
-
-/** A packer for one WGSL storage-buffer type. */
-interface WgslPacker {
-  /** Tightly-packed size in bytes of one value (mat4 = 64, vec3 = 12, …). */
-  readonly dataBytes: number;
-  readonly typeId: number;
-  /**
-   * Pack `val` (the aval's `.getValue(tok)` result) into `dst` at
-   * float offset `off`. The packer is responsible for handling the
-   * value type — Trafo3d, M44d, V4f, V3d, V3f, number — coercing as
-   * needed. Throws on unsupported value shapes.
-   */
-  readonly pack: (val: unknown, dst: Float32Array, off: number) => void;
-}
-
-const PACKER_MAT4: WgslPacker = {
-  dataBytes: 64, typeId: 0,
-  pack: (val, dst, off) => {
-    // Accept Trafo3d (uses .forward) or M44d directly.
-    const m = (val as { forward?: M44d }).forward !== undefined
-      ? (val as { forward: M44d }).forward
-      : (val as M44d);
-    packMat44(m, dst, off);
-  },
-};
-const PACKER_VEC4: WgslPacker = {
-  dataBytes: 16, typeId: 0,
-  pack: (val, dst, off) => {
-    const v = val as V4f;
-    dst[off + 0] = v.x; dst[off + 1] = v.y;
-    dst[off + 2] = v.z; dst[off + 3] = v.w;
-  },
-};
-const PACKER_VEC3: WgslPacker = {
-  dataBytes: 12, typeId: 0,
-  pack: (val, dst, off) => {
-    // V3f or V3d both expose .x/.y/.z; cast through a common shape.
-    const v = val as { x: number; y: number; z: number };
-    dst[off + 0] = v.x; dst[off + 1] = v.y; dst[off + 2] = v.z;
-  },
-};
-const PACKER_VEC2: WgslPacker = {
-  dataBytes: 8, typeId: 0,
-  pack: (val, dst, off) => {
-    const v = val as { x: number; y: number };
-    dst[off + 0] = v.x; dst[off + 1] = v.y;
-  },
-};
-const PACKER_F32: WgslPacker = {
-  dataBytes: 4, typeId: 0,
-  pack: (val, dst, off) => { dst[off] = val as number; },
-};
-// Integer scalars / vectors. The arena is fronted by a `Float32Array`,
-// so writing raw bits has to go through a same-buffer Uint32/Int32 view
-// to avoid the lossy `i32 → f32` coercion you'd get from a direct
-// `dst[off] = ...` assignment.
-function makeIntPacker(
-  ctor: typeof Uint32Array | typeof Int32Array,
-  dim: 1 | 2 | 3 | 4,
-): WgslPacker {
-  const bytes = dim * 4;
-  if (dim === 1) {
-    return {
-      dataBytes: bytes, typeId: 0,
-      pack: (val, dst, off) => {
-        new ctor(dst.buffer as ArrayBuffer, dst.byteOffset + off * 4, 1)[0] = val as number;
-      },
-    };
-  }
-  // Vector: accept {x,y,z,w} components.
-  return {
-    dataBytes: bytes, typeId: 0,
-    pack: (val, dst, off) => {
-      const view = new ctor(dst.buffer as ArrayBuffer, dst.byteOffset + off * 4, dim);
-      const v = val as { x: number; y: number; z?: number; w?: number };
-      view[0] = v.x; view[1] = v.y;
-      if (dim >= 3) view[2] = v.z!;
-      if (dim >= 4) view[3] = v.w!;
-    },
-  };
-}
-const PACKER_U32     = makeIntPacker(Uint32Array, 1);
-const PACKER_UVEC2   = makeIntPacker(Uint32Array, 2);
-const PACKER_UVEC3   = makeIntPacker(Uint32Array, 3);
-const PACKER_UVEC4   = makeIntPacker(Uint32Array, 4);
-const PACKER_I32     = makeIntPacker(Int32Array, 1);
-const PACKER_IVEC2   = makeIntPacker(Int32Array, 2);
-const PACKER_IVEC3   = makeIntPacker(Int32Array, 3);
-const PACKER_IVEC4   = makeIntPacker(Int32Array, 4);
-
-function packerForWgslType(wgslType: string): WgslPacker {
-  switch (wgslType) {
-    case "mat4x4<f32>": return PACKER_MAT4;
-    case "vec4<f32>":   return PACKER_VEC4;
-    case "vec3<f32>":   return PACKER_VEC3;
-    case "vec2<f32>":   return PACKER_VEC2;
-    case "f32":         return PACKER_F32;
-    case "u32":         return PACKER_U32;
-    case "vec2<u32>":   return PACKER_UVEC2;
-    case "vec3<u32>":   return PACKER_UVEC3;
-    case "vec4<u32>":   return PACKER_UVEC4;
-    case "i32":         return PACKER_I32;
-    case "vec2<i32>":   return PACKER_IVEC2;
-    case "vec3<i32>":   return PACKER_IVEC3;
-    case "vec4<i32>":   return PACKER_IVEC4;
-    default:
-      throw new Error(`heapScene: no JS-side packer for WGSL type '${wgslType}'`);
-  }
-}
+import { packerForWgslType, PACKER_MAT4, type WgslPacker } from "./heapScene/packers.js";
+import {
+  HEAP_SCAN_WGSL, SCAN_TILE_SIZE, SCAN_WG_SIZE, SCAN_MAX_RECORDS,
+  TILE_K, RECORD_U32, RECORD_BYTES,
+} from "./heapScene/scanKernel.js";
+import {
+  GrowBuffer, MIN_BUFFER_BYTES, POW2, ALIGN16,
+} from "./heapScene/growBuffer.js";
+import {
+  UniformPool, IndexPool, DrawHeap,
+  AttributeArena, IndexAllocator, insertSortedFreeBlock,
+  buildArenaState, arenaBytes, writeAttribute,
+  asAval, isBufferView, asFloat32,
+  ALLOC_HEADER_BYTES, ALLOC_HEADER_PAD_TO,
+  ENC_V3F_TIGHT, SEM_POSITIONS, SEM_NORMALS,
+  type ArenaState,
+} from "./heapScene/pools.js";
+import { encodeModeKey } from "./pipelineCache/index.js";
+import { snapshotDescriptor, ModeKeyTracker } from "./derivedModes/modeKeyCpu.js";
+import { addMarkingCallback } from "@aardworx/wombat.adaptive";
+
+// GrowBuffer + ALIGN16 + MIN_BUFFER_BYTES + POW2 live in ./heapScene/growBuffer.
+// Packers (WGSL-type → JS-value → arena bytes) live in ./heapScene/packers.
 
 // ---------------------------------------------------------------------------
 // Shared WGSL prelude (struct + bindings + VS)
@@ -268,765 +136,65 @@ export interface HeapGeometry {
 }
 
 
-// ---------------------------------------------------------------------------
-// Resizable buffer (pow2 grow + GPU-side copy on resize)
-// ---------------------------------------------------------------------------
-
-const MIN_BUFFER_BYTES = 64 * 1024;
-const POW2 = (n: number): number => {
-  let p = 1; while (p < n) p <<= 1; return p;
-};
-
-/**
- * A GPUBuffer that can grow to next power-of-two on demand. On grow,
- * a fresh buffer is created at the new size, the live tail copied
- * over via copyBufferToBuffer, and dependents (bind groups, mostly)
- * are notified to rebuild via the `onResize` callback.
- *
- * `usedBytes` is the high-water mark — the runtime advances this as
- * it allocates, and `ensureCapacity` grows when required. This
- * separates allocation policy from grow policy.
- */
-class GrowBuffer {
-  private buf: GPUBuffer;
-  private cap: number;
-  private used = 0;
-  private readonly listeners = new Set<() => void>();
-  constructor(
-    private readonly device: GPUDevice,
-    private readonly label: string,
-    private readonly usage: GPUBufferUsageFlags,
-    initialBytes: number,
-  ) {
-    this.cap = Math.max(MIN_BUFFER_BYTES, POW2(initialBytes));
-    this.buf = device.createBuffer({ size: this.cap, usage: usage | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC, label });
-  }
-  get buffer(): GPUBuffer { return this.buf; }
-  get capacity(): number { return this.cap; }
-  get usedBytes(): number { return this.used; }
-  setUsed(n: number): void { this.used = n; }
-  onResize(cb: () => void): IDisposable {
-    this.listeners.add(cb);
-    return { dispose: () => { this.listeners.delete(cb); } };
-  }
-  /** Ensure the buffer is at least `bytes` capacity. Grows by pow2 + copies live tail. */
-  ensureCapacity(bytes: number): void {
-    if (bytes <= this.cap) return;
-    const newCap = POW2(bytes);
-    const newBuf = this.device.createBuffer({
-      size: newCap, usage: this.usage | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC, label: this.label,
-    });
-    if (this.used > 0) {
-      const enc = this.device.createCommandEncoder({ label: `${this.label}: grow-copy` });
-      enc.copyBufferToBuffer(this.buf, 0, newBuf, 0, ALIGN16(this.used));
-      this.device.queue.submit([enc.finish()]);
-    }
-    this.buf.destroy();
-    this.buf = newBuf;
-    this.cap = newCap;
-    for (const cb of this.listeners) cb();
-  }
-  destroy(): void { this.buf.destroy(); }
-}
 
 // ---------------------------------------------------------------------------
-// UniformPool — aval-keyed refcounted allocations over the AttributeArena
-// ---------------------------------------------------------------------------
-
-interface PoolEntry {
-  /** Byte offset into the arena. Data starts at ref + ALLOC_HEADER_PAD_TO. */
-  readonly ref: number;
-  readonly dataBytes: number;
-  readonly typeId: number;
-  /** Packer used to refresh the data region on aval marks. */
-  readonly pack: (val: unknown, dst: Float32Array, off: number) => void;
-  refcount: number;
-}
-
-/**
- * Aval-keyed pool of arena allocations. One allocation per unique
- * aval (object identity). Two draws referencing the same aval share
- * the allocation; their DrawHeaders carry the same u32 ref. Holds
- * uniforms (fixed-size scalars/vectors/matrices) AND attribute arrays
- * (variable-size). The caller decides `dataBytes` + `length` per
- * acquisition — the pool just keys on aval identity and refcounts.
- *
- * Sharing emerges from aval identity — no separate "frequency"
- * declaration needed. A `cval` shared by all draws → 1 alloc.
- * A static positions array shared across instanced draws → 1 alloc.
- * Same code path either way.
- */
-class UniformPool {
-  // Keyed by `aval<unknown>` *by reference* (a plain JS `Map`). These
-  // keys are overwhelmingly reactive `cval`s (per-object trafos,
-  // colours, …) and the hot path is `acquire`/`release` ~once per
-  // drawHeader field per RO. A content-keyed `HashTable` would buy
-  // nothing here — reactive avals never compare content-equal — and
-  // would cost: reactive avals have no `equals`/`getHashCode`, so a
-  // `HashTable` falls back to a WeakMap-counter identity hash per
-  // lookup, measurably slower than `Map`'s native hashing. (Constant-
-  // aval dedup matters where keys are *texture* avals — there the
-  // `AtlasPool` is content-keyed; constant avals there carry a cached
-  // hash and a fast `equals`.)
-  private readonly byAval = new Map<aval<unknown>, PoolEntry>();
-
-  has(aval: aval<unknown>): boolean { return this.byAval.has(aval); }
-  entry(aval: aval<unknown>): PoolEntry | undefined { return this.byAval.get(aval); }
-
-  /**
-   * Acquire (or share) an allocation for `aval`. Caller passes the
-   * pre-read `value` (so the pool doesn't need a token) plus the
-   * (`dataBytes`, `typeId`, `length`, `pack`) describing how to lay
-   * it out. If a new allocation is made, the value is packed and
-   * uploaded immediately.
-   */
-  acquire(
-    device: GPUDevice,
-    arena: AttributeArena,
-    aval: aval<unknown>,
-    value: unknown,
-    dataBytes: number,
-    typeId: number,
-    length: number,
-    pack: (val: unknown, dst: Float32Array, off: number) => void,
-  ): number {
-    const existing = this.byAval.get(aval);
-    if (existing !== undefined) {
-      existing.refcount++;
-      return existing.ref;
-    }
-    const ref = arena.alloc(dataBytes);
-    const allocBytes = ALIGN16(ALLOC_HEADER_PAD_TO + dataBytes);
-    const buf = new ArrayBuffer(allocBytes);
-    const u32 = new Uint32Array(buf);
-    const f32 = new Float32Array(buf);
-    u32[0] = typeId;
-    u32[1] = length;
-    // stride_bytes (offset 8): bytes per element. Lets the VS decode
-    // pick V3- vs V4-tight load expressions for vec4 attributes
-    // (and is informative for everything else).
-    u32[2] = length > 0 ? Math.floor(dataBytes / length) : 0;
-    pack(value, f32, ALLOC_HEADER_PAD_TO / 4);
-    arena.write(ref, new Uint8Array(buf));
-    void device;
-    this.byAval.set(aval, { ref, dataBytes, typeId, pack, refcount: 1 });
-    return ref;
-  }
-
-  /** Decrement refcount; if zero, free the arena allocation. */
-  release(arena: AttributeArena, aval: aval<unknown>): void {
-    const e = this.byAval.get(aval);
-    if (e === undefined) return;
-    e.refcount--;
-    if (e.refcount > 0) return;
-    arena.release(e.ref, ALIGN16(ALLOC_HEADER_PAD_TO + e.dataBytes));
-    this.byAval.delete(aval);
-  }
-
-  /** Re-pack one entry's data region into the arena's CPU shadow. */
-  repack(device: GPUDevice, arena: AttributeArena, aval: aval<unknown>, val: unknown): void {
-    const e = this.byAval.get(aval);
-    if (e === undefined) return;
-    const dst = new Float32Array(e.dataBytes / 4);
-    e.pack(val, dst, 0);
-    arena.write(
-      e.ref + ALLOC_HEADER_PAD_TO,
-      new Uint8Array(dst.buffer, dst.byteOffset, e.dataBytes),
-    );
-    void device;
-  }
-}
-
-/**
- * Aval-keyed pool over the `IndexAllocator`. Two draws referencing
- * the same `Uint32Array` (or aval thereof) share an index range —
- * 19K instanced clones of the same mesh share one allocation, one
- * upload. Index data is treated as immutable for the aval's
- * lifetime: an aval mark won't repack (we'd have to free + re-alloc
- * since size changes are likely). Use a fresh aval to swap meshes.
- *
- * **Value-equality dedup for constant avals (§5b):** when an
- * incoming aval has `isConstant === true`, the pool also keys by
- * the underlying `ArrayBuffer` tuple `(buffer, byteOffset,
- * byteLength)`. Two distinct constant avals wrapping the same
- * `Uint32Array` view (or two views over the same backing buffer
- * with matching offsets) collapse to one allocation. Hashing
- * kilobytes of indices on every acquire would be wasteful; the
- * tuple key catches the realistic "one ArrayBuffer shared across
- * many aval wrappers" pattern, which is the only one that matters
- * for the heap path. Reactive (non-constant) avals fall through
- * to identity-only — their content can change and the pool can't
- * silently merge them.
- */
-class IndexPool {
-  // Per-aval binding. `perAvalCount` tracks acquire/release balance
-  // for THIS aval; `entry` is the shared allocation (one entry can be
-  // referenced by many aliasing avals via §5b dedup).
-  private readonly byAval = new Map<
-    aval<Uint32Array>,
-    { entry: IndexPoolEntry; perAvalCount: number }
-  >();
-  private readonly byValueKey = new Map<string, IndexPoolEntry>();
-  // Stable per-ArrayBuffer numeric id for value-key composition.
-  // WeakMap-backed so buffers GC'd elsewhere drop their entry too.
-  private readonly bufferIds = new WeakMap<ArrayBufferLike, number>();
-  private nextBufferId = 1;
-  private bufferIdOf(buf: ArrayBufferLike): number {
-    let id = this.bufferIds.get(buf);
-    if (id === undefined) {
-      id = this.nextBufferId++;
-      this.bufferIds.set(buf, id);
-    }
-    return id;
-  }
-
-  acquire(
-    device: GPUDevice,
-    indices: IndexAllocator,
-    aval: aval<Uint32Array>,
-    arr: Uint32Array,
-  ): { firstIndex: number; count: number } {
-    const bound = this.byAval.get(aval);
-    if (bound !== undefined) {
-      bound.perAvalCount++;
-      bound.entry.totalRefcount++;
-      return { firstIndex: bound.entry.firstIndex, count: bound.entry.count };
-    }
-    let valueKey: string | undefined;
-    if (aval.isConstant) {
-      valueKey = `${this.bufferIdOf(arr.buffer)}:${arr.byteOffset}:${arr.byteLength}`;
-      const shared = this.byValueKey.get(valueKey);
-      if (shared !== undefined) {
-        shared.totalRefcount++;
-        this.byAval.set(aval, { entry: shared, perAvalCount: 1 });
-        return { firstIndex: shared.firstIndex, count: shared.count };
-      }
-    }
-    const firstIndex = indices.alloc(arr.length);
-    indices.write(
-      firstIndex * 4,
-      new Uint8Array(arr.buffer, arr.byteOffset, arr.byteLength),
-    );
-    void device;
-    const entry: IndexPoolEntry = { firstIndex, count: arr.length, totalRefcount: 1, valueKey };
-    this.byAval.set(aval, { entry, perAvalCount: 1 });
-    if (valueKey !== undefined) this.byValueKey.set(valueKey, entry);
-    return { firstIndex, count: arr.length };
-  }
-
-  release(indices: IndexAllocator, aval: aval<Uint32Array>): void {
-    const bound = this.byAval.get(aval);
-    if (bound === undefined) return;
-    bound.perAvalCount--;
-    bound.entry.totalRefcount--;
-    if (bound.perAvalCount === 0) this.byAval.delete(aval);
-    if (bound.entry.totalRefcount > 0) return;
-    indices.release(bound.entry.firstIndex, bound.entry.count);
-    if (bound.entry.valueKey !== undefined) {
-      this.byValueKey.delete(bound.entry.valueKey);
-    }
-  }
-}
-
-interface IndexPoolEntry {
-  firstIndex: number;
-  count: number;
-  totalRefcount: number;
-  valueKey: string | undefined;
-}
-
-// ---------------------------------------------------------------------------
-// DrawHeap (slot-indexed) and AttributeArena (byte-bump) allocators
+// Internal state
 // ---------------------------------------------------------------------------
 
 /**
- * Slot-indexed allocator over a GrowBuffer. `slotBytes` is set per-
- * instance — each bucket sizes its DrawHeader from its effect's
- * schema, so a bucket whose layout is e.g. 96 B / slot uses a
- * DrawHeap with `slotBytes=96`.
- */
-class DrawHeap {
-  private free: number[] = [];
-  private nextSlot = 0;
-  constructor(private readonly buf: GrowBuffer, private readonly slotBytes: number) {}
-  get buffer(): GPUBuffer { return this.buf.buffer; }
-  /** Bytes per slot — caller multiplies by slot index for byte offsets. */
-  get bytesPerSlot(): number { return this.slotBytes; }
-  /** High-water mark in bytes (used to size bind-group entry on rebuild). */
-  get usedBytes(): number { return this.nextSlot * this.slotBytes; }
-  alloc(): number {
-    const slot = this.free.length > 0 ? this.free.pop()! : this.nextSlot++;
-    this.buf.ensureCapacity((slot + 1) * this.slotBytes);
-    this.buf.setUsed(Math.max(this.buf.usedBytes, (slot + 1) * this.slotBytes));
-    return slot;
-  }
-  release(slot: number): void { this.free.push(slot); }
-  onResize(cb: () => void): IDisposable { return this.buf.onResize(cb); }
-  destroy(): void { this.buf.destroy(); }
-}
-
-/**
- * Byte-bump allocator over a GrowBuffer for variable-size attribute
- * allocations. Each allocation gets a 16-byte aligned start (8-byte
- * (typeId, length) header at the start, data 16 bytes in). Frees go
- * onto a list keyed by size for simple first-fit reuse later — for
- * now `release` just records the gap and the bump cursor never
- * shrinks.
- */
-class AttributeArena {
-  private cursor = 0;
-  // (offset, size) free entries; first-fit reuse not yet implemented.
-  private freeList: { off: number; size: number }[] = [];
-  // CPU shadow of the entire GPU buffer. Writes go here first; a
-  // single `device.queue.writeBuffer` per dirty contiguous range
-  // lifts them to the GPU at flush time. At the cost of doubling
-  // host memory we collapse N small writeBuffer calls (10K+ at
-  // initial population) to 1 per frame.
-  private shadow: Uint8Array;
-  private dirtyMin = Infinity;
-  private dirtyMax = 0;
-  constructor(private readonly buf: GrowBuffer) {
-    this.shadow = new Uint8Array(buf.capacity);
-    buf.onResize(() => {
-      const grown = new Uint8Array(buf.capacity);
-      grown.set(this.shadow);
-      this.shadow = grown;
-    });
-  }
-  get buffer(): GPUBuffer { return this.buf.buffer; }
-  get capacity(): number { return this.buf.capacity; }
-  get usedBytes(): number { return this.cursor; }
-  /**
-   * Stage `data` to the shadow at byte offset `dst`. Tracks the
-   * dirty range so `flush(device)` can emit a single writeBuffer
-   * covering everything dirty since the last flush.
-   */
-  write(dst: number, data: Uint8Array): void {
-    this.shadow.set(data, dst);
-    if (dst < this.dirtyMin) this.dirtyMin = dst;
-    const end = dst + data.byteLength;
-    if (end > this.dirtyMax) this.dirtyMax = end;
-  }
-  flush(device: GPUDevice): void {
-    if (this.dirtyMax <= this.dirtyMin) return;
-    device.queue.writeBuffer(
-      this.buf.buffer, this.dirtyMin,
-      this.shadow.buffer, this.shadow.byteOffset + this.dirtyMin,
-      this.dirtyMax - this.dirtyMin,
-    );
-    this.dirtyMin = Infinity;
-    this.dirtyMax = 0;
-  }
-  /**
-   * Allocate space for one attribute. Returns the byte ref (offset
-   * to the header — data lives at ref + 16).
-   */
-  alloc(dataBytes: number): number {
-    const allocBytes = ALIGN16(ALLOC_HEADER_PAD_TO + dataBytes);
-    // First-fit reuse from free list.
-    for (let i = 0; i < this.freeList.length; i++) {
-      const f = this.freeList[i]!;
-      if (f.size >= allocBytes) {
-        const ref = f.off;
-        if (f.size === allocBytes) this.freeList.splice(i, 1);
-        else { f.off += allocBytes; f.size -= allocBytes; }
-        return ref;
-      }
-    }
-    const ref = this.cursor;
-    this.cursor += allocBytes;
-    this.buf.ensureCapacity(this.cursor);
-    this.buf.setUsed(this.cursor);
-    return ref;
-  }
-  release(ref: number, dataBytes: number): void {
-    const allocBytes = ALIGN16(ALLOC_HEADER_PAD_TO + dataBytes);
-    insertSortedFreeBlock(this.freeList, ref, allocBytes);
-  }
-  onResize(cb: () => void): IDisposable { return this.buf.onResize(cb); }
-  destroy(): void { this.buf.destroy(); }
-}
-
-/**
- * Insert `{off, size}` into a free-list kept sorted by `off`, then
- * coalesce with the two immediate neighbours.
- *
- * The list invariant — sorted, non-overlapping, never-adjacent — is
- * preserved across allocs (which take from the front or split a
- * block) and releases (this function). The previous implementation
- * did `push + Array.prototype.sort + linear coalesce scan`, which is
- * O(N log N) per release. Under a 500-RO bulk-remove the sort
- * dominated `removeDraw` (~41 ms of self-time in the heap-demo-sg
- * toggle profile). Binary-search insert + 2-neighbour merge collapses
- * that to O(log N + N-shift), and is principled — the sort never
- * actually mattered since we already had the sorted prefix as an
- * invariant.
- */
-function insertSortedFreeBlock(
-  freeList: { off: number; size: number }[],
-  off: number,
-  size: number,
-): void {
-  // Binary-search for the insertion index (first entry whose off > new).
-  let lo = 0, hi = freeList.length;
-  while (lo < hi) {
-    const mid = (lo + hi) >>> 1;
-    if (freeList[mid]!.off <= off) lo = mid + 1;
-    else hi = mid;
-  }
-  // lo is the index where the new entry would be inserted.
-  // Try merging with the predecessor first; if successful, the merged
-  // block may now be adjacent to its (former) successor too.
-  const prev = lo > 0 ? freeList[lo - 1] : undefined;
-  if (prev !== undefined && prev.off + prev.size === off) {
-    prev.size += size;
-    // Check forward-merge with what was freeList[lo].
-    const next = freeList[lo];
-    if (next !== undefined && prev.off + prev.size === next.off) {
-      prev.size += next.size;
-      freeList.splice(lo, 1);
-    }
-    return;
-  }
-  const next = freeList[lo];
-  if (next !== undefined && off + size === next.off) {
-    next.off = off;
-    next.size += size;
-    return;
-  }
-  freeList.splice(lo, 0, { off, size });
-}
-
-/**
- * Element-bump allocator over an index GrowBuffer (units = u32). Each
- * draw's index range is allocated as one block; on release the block
- * is returned to a free list and can be reused first-fit.
+ * One pipeline-state bucket. Holds the pipeline + a list of global
+ * draw-slot indices to emit with it. The bind group it draws against
+ * is referenced by `bindGroup` (typically the shared no-textures one
+ * or one of the per-texture-set ones).
  */
-class IndexAllocator {
-  private cursor = 0;     // in u32s, not bytes
-  private freeList: { off: number; size: number }[] = [];
-  // CPU shadow + dirty range, same shape as AttributeArena. Index
-  // uploads (one per drawn mesh's index buffer) get coalesced to a
-  // single writeBuffer per dirty range at flush time.
-  private shadow: Uint8Array;
-  private dirtyMin = Infinity;
-  private dirtyMax = 0;
-  constructor(private readonly buf: GrowBuffer) {
-    this.shadow = new Uint8Array(buf.capacity);
-    buf.onResize(() => {
-      const grown = new Uint8Array(buf.capacity);
-      grown.set(this.shadow);
-      this.shadow = grown;
-    });
-  }
-  get buffer(): GPUBuffer { return this.buf.buffer; }
-  get usedElements(): number { return this.cursor; }
-  /** Stage `data` (bytes) at the given byte offset; tracks dirty range. */
-  write(dstByteOffset: number, data: Uint8Array): void {
-    this.shadow.set(data, dstByteOffset);
-    if (dstByteOffset < this.dirtyMin) this.dirtyMin = dstByteOffset;
-    const end = dstByteOffset + data.byteLength;
-    if (end > this.dirtyMax) this.dirtyMax = end;
-  }
-  flush(device: GPUDevice): void {
-    if (this.dirtyMax <= this.dirtyMin) return;
-    device.queue.writeBuffer(
-      this.buf.buffer, this.dirtyMin,
-      this.shadow.buffer, this.shadow.byteOffset + this.dirtyMin,
-      this.dirtyMax - this.dirtyMin,
-    );
-    this.dirtyMin = Infinity;
-    this.dirtyMax = 0;
-  }
-  alloc(elements: number): number {
-    for (let i = 0; i < this.freeList.length; i++) {
-      const f = this.freeList[i]!;
-      if (f.size >= elements) {
-        const off = f.off;
-        if (f.size === elements) this.freeList.splice(i, 1);
-        else { f.off += elements; f.size -= elements; }
-        return off;
-      }
-    }
-    const off = this.cursor;
-    this.cursor += elements;
-    this.buf.ensureCapacity(this.cursor * 4);
-    this.buf.setUsed(this.cursor * 4);
-    return off;
-  }
-  release(off: number, elements: number): void {
-    insertSortedFreeBlock(this.freeList, off, elements);
-  }
-  onResize(cb: () => void): IDisposable { return this.buf.onResize(cb); }
-  destroy(): void { this.buf.destroy(); }
-}
-
-// ---------------------------------------------------------------------------
-// Static initial pack (uses the new allocators)
-// ---------------------------------------------------------------------------
-
 /**
- * Global arena state: attribute / uniform data lives in `attrs`
- * (multi-typed-view storage); indices live in `indices` (separate
- * INDEX-usage buffer). Per-draw bookkeeping (which arena offsets
- * are alive for which draw) now lives entirely in the bucket via
- * the UniformPool's refcount + the bucket's per-local-slot arrays.
+ * Per-slot state inside a bucket. Today every bucket has exactly ONE
+ * slot — `bucket.slots.length === 1`. Multi-pipeline buckets (the
+ * derived-modes work, see docs/derived-modes.md) grow this to one
+ * slot per distinct pipeline state used by the bucket's ROs. Each
+ * slot owns its own drawTable + scan buffers + indirect + pipeline.
  */
-interface ArenaState {
-  readonly attrs:    AttributeArena;
-  readonly indices:  IndexAllocator;
-}
-
-function buildArenaState(
-  device: GPUDevice,
-  attrBytesHint: number,
-  idxBytesHint: number,
-  label: string,
-  idxExtraUsage: GPUBufferUsageFlags = 0,
-): ArenaState {
-  const attrs = new AttributeArena(new GrowBuffer(
-    device, `${label}/attrs`, GPUBufferUsage.STORAGE,
-    attrBytesHint,
-  ));
-  const indices = new IndexAllocator(new GrowBuffer(
-    device, `${label}/idx`, GPUBufferUsage.INDEX | idxExtraUsage,
-    idxBytesHint,
-  ));
-  return { attrs, indices };
-}
-
-function arenaBytes(arena: ArenaState): number {
-  return arena.attrs.usedBytes + arena.indices.usedElements * 4;
-}
-
-/** Upload a single attribute — header (typeId, length) + data — into the arena at byte offset `ref`. */
-function writeAttribute(
-  device: GPUDevice, buf: GPUBuffer, ref: number, typeId: number, length: number, data: Float32Array,
-): void {
-  const allocBytes = ALIGN16(ALLOC_HEADER_PAD_TO + data.byteLength);
-  const staging = new ArrayBuffer(allocBytes);
-  const u32 = new Uint32Array(staging);
-  const f32 = new Float32Array(staging);
-  u32[0] = typeId;
-  u32[1] = length;
-  f32.set(data, ALLOC_HEADER_PAD_TO / 4);
-  device.queue.writeBuffer(buf, ref, staging, 0, allocBytes);
-}
-
-function asAval<T>(v: aval<T> | T): aval<T> {
-  return (typeof v === "object" && v !== null && typeof (v as { getValue?: unknown }).getValue === "function")
-    ? (v as aval<T>)
-    : AVal.constant(v as T);
-}
-
-/** Heuristic predicate — BufferView has `buffer: aval<IBuffer>` + elementType. */
-function isBufferView(v: unknown): v is BufferView {
-  if (typeof v !== "object" || v === null) return false;
-  const o = v as { buffer?: unknown; elementType?: unknown };
-  return typeof o.buffer === "object" && o.buffer !== null
-      && typeof (o.buffer as { getValue?: unknown }).getValue === "function"
-      && typeof o.elementType === "object" && o.elementType !== null;
-}
-
-/**
- * Float32 view over a host-side buffer source. Used by the BufferView
- * packer to hand the pool a typed array it can `set()` from.
- */
-function asFloat32(data: HostBufferSource): Float32Array {
-  if (data instanceof Float32Array) return data;
-  if (ArrayBuffer.isView(data)) {
-    return new Float32Array(data.buffer, data.byteOffset, data.byteLength / 4);
-  }
-  return new Float32Array(data); // ArrayBuffer
-}
-
-// ---------------------------------------------------------------------------
-// Megacall GPU prefix-sum compute shader
-// ---------------------------------------------------------------------------
-
-const SCAN_TILE_SIZE = 512;
-const SCAN_WG_SIZE = 256;
-const SCAN_MAX_RECORDS = SCAN_TILE_SIZE * SCAN_TILE_SIZE; // numBlocks ≤ TILE_SIZE
-
-const TILE_K = 64;
-
-/** drawTable record width: (firstEmit, drawIdx, indexStart, indexCount, instanceCount). */
-const RECORD_U32   = 5;
-const RECORD_BYTES = RECORD_U32 * 4;
-
-const HEAP_SCAN_WGSL = `
-struct Params {
-  numRecords: u32,
-  numBlocks:  u32,
-  _pad0:      u32,
-  _pad1:      u32,
-};
-
-struct Record {
-  firstEmit:     u32,
-  drawIdx:       u32,
-  indexStart:    u32,
-  indexCount:    u32,
-  instanceCount: u32,
-};
-
-@group(0) @binding(0) var<storage, read_write> drawTable:        array<Record>;
-@group(0) @binding(1) var<storage, read_write> blockSums:        array<u32>;
-@group(0) @binding(2) var<storage, read_write> blockOffsets:     array<u32>;
-@group(0) @binding(3) var<storage, read_write> indirect:         array<u32>;
-@group(0) @binding(4) var<uniform>             params:           Params;
-@group(0) @binding(5) var<storage, read_write> firstDrawInTile:  array<u32>;
-
-const TILE_SIZE: u32 = 512u;
-const WG_SIZE:   u32 = 256u;
-const TILE_K:    u32 = 64u;
-
-var<workgroup> sdata: array<u32, 512>;
-
-fn blellochScan(tid: u32) {
-  var offset: u32 = 1u;
-  for (var d: u32 = TILE_SIZE >> 1u; d > 0u; d = d >> 1u) {
-    workgroupBarrier();
-    if (tid < d) {
-      let ai = offset * (2u * tid + 1u) - 1u;
-      let bi = offset * (2u * tid + 2u) - 1u;
-      sdata[bi] = sdata[bi] + sdata[ai];
-    }
-    offset = offset * 2u;
-  }
-  if (tid == 0u) { sdata[TILE_SIZE - 1u] = 0u; }
-  for (var d: u32 = 1u; d < TILE_SIZE; d = d * 2u) {
-    offset = offset >> 1u;
-    workgroupBarrier();
-    if (tid < d) {
-      let ai = offset * (2u * tid + 1u) - 1u;
-      let bi = offset * (2u * tid + 2u) - 1u;
-      let t = sdata[ai];
-      sdata[ai] = sdata[bi];
-      sdata[bi] = sdata[bi] + t;
-    }
-  }
-  workgroupBarrier();
-}
-
-@compute @workgroup_size(WG_SIZE)
-fn scanTile(@builtin(local_invocation_id) lid: vec3<u32>, @builtin(workgroup_id) wgid: vec3<u32>) {
-  let tid = lid.x;
-  let blockOff = wgid.x * TILE_SIZE;
-  let n = params.numRecords;
-  let i0 = blockOff + tid;
-  let i1 = blockOff + tid + WG_SIZE;
-  var v0: u32 = 0u;
-  var v1: u32 = 0u;
-  if (i0 < n) { v0 = drawTable[i0].indexCount * drawTable[i0].instanceCount; }
-  if (i1 < n) { v1 = drawTable[i1].indexCount * drawTable[i1].instanceCount; }
-  sdata[tid]           = v0;
-  sdata[tid + WG_SIZE] = v1;
-  workgroupBarrier();
-  blellochScan(tid);
-  if (i0 < n) { drawTable[i0].firstEmit = sdata[tid]; }
-  if (i1 < n) { drawTable[i1].firstEmit = sdata[tid + WG_SIZE]; }
-  if (tid == WG_SIZE - 1u) {
-    blockSums[wgid.x] = sdata[tid + WG_SIZE] + v1;
-  }
-}
-
-@compute @workgroup_size(WG_SIZE)
-fn scanBlocks(@builtin(local_invocation_id) lid: vec3<u32>) {
-  let tid = lid.x;
-  let n = params.numBlocks;
-  let i0 = tid;
-  let i1 = tid + WG_SIZE;
-  var v0: u32 = 0u;
-  var v1: u32 = 0u;
-  if (i0 < n) { v0 = blockSums[i0]; }
-  if (i1 < n) { v1 = blockSums[i1]; }
-  sdata[tid]           = v0;
-  sdata[tid + WG_SIZE] = v1;
-  workgroupBarrier();
-  blellochScan(tid);
-  if (i0 < n) { blockOffsets[i0] = sdata[tid]; }
-  if (i1 < n) { blockOffsets[i1] = sdata[tid + WG_SIZE]; }
-  workgroupBarrier();
-  if (tid == 0u) {
-    if (n > 0u) {
-      let lastIdx = n - 1u;
-      let total = blockOffsets[lastIdx] + blockSums[lastIdx];
-      indirect[0] = total;
-    } else {
-      indirect[0] = 0u;
-    }
-    indirect[1] = 1u;
-    indirect[2] = 0u;
-    indirect[3] = 0u;
-  }
-}
+interface BucketSlot {
+  /** The render pipeline this slot draws with. */
+  readonly pipeline: GPURenderPipeline;
 
-@compute @workgroup_size(WG_SIZE)
-fn addOffsets(@builtin(local_invocation_id) lid: vec3<u32>, @builtin(workgroup_id) wgid: vec3<u32>) {
-  let tid = lid.x;
-  let blockOff = wgid.x * TILE_SIZE;
-  let n = params.numRecords;
-  let off = blockOffsets[wgid.x];
-  let i0 = blockOff + tid;
-  let i1 = blockOff + tid + WG_SIZE;
-  if (i0 < n) { drawTable[i0].firstEmit = drawTable[i0].firstEmit + off; }
-  if (i1 < n) { drawTable[i1].firstEmit = drawTable[i1].firstEmit + off; }
-}
+  // ─── drawTable / megacall state ────────────────────────────────────
+  drawTableBuf?: GrowBuffer;
+  drawTableShadow?: Uint32Array;
+  drawTableDirtyMin: number;
+  drawTableDirtyMax: number;
+  /** Number of live records routed to this slot (= drawTable length).
+   *  GPU owns firstEmit / total. */
+  recordCount: number;
+  /** localSlot → recordIdx (or -1). */
+  slotToRecord: number[];
+  /** recordIdx → localSlot. */
+  recordToSlot: number[];
 
-@compute @workgroup_size(WG_SIZE)
-fn buildTileIndex(@builtin(global_invocation_id) gid: vec3<u32>) {
-  let tileIdx = gid.x;
-  // totalEmit is computed by scanBlocks into indirect[0]; reading it
-  // from indirect avoids a separate uniform/storage round-trip.
-  let totalEmit = indirect[0];
-  let numTiles = (totalEmit + TILE_K - 1u) / TILE_K;
-  if (tileIdx > numTiles) { return; }
-  if (params.numRecords == 0u) {
-    if (tileIdx == 0u) { firstDrawInTile[0] = 0u; }
-    return;
-  }
-  if (tileIdx == numTiles) {
-    // Sentinel for the open upper bound — the LAST VALID SLOT, not
-    // numRecords. The render VS uses
-    //     hi = firstDrawInTile[_tileIdx + 1u]
-    // and the binary search treats hi as INCLUSIVE. If the sentinel
-    // were numRecords (one past last), the search would drag lo into
-    // the OOB slot for emits in the last tile, since drawTable reads
-    // past recordCount return 0 (binding size clamping) and 0 ≤ emit
-    // is always true. Visible symptom: the LAST few emits in the
-    // bucket land on slot=numRecords (drawIdx=0, indexCount=0 → /-by-
-    // zero) → degenerate / cross-RO triangle stitched to slot 0.
-    firstDrawInTile[tileIdx] = params.numRecords - 1u;
-    return;
-  }
-  let tileStart = tileIdx * TILE_K;
-  var lo: u32 = 0u;
-  var hi: u32 = params.numRecords - 1u;
-  loop {
-    if (lo >= hi) { break; }
-    let mid = (lo + hi + 1u) >> 1u;
-    if (drawTable[mid].firstEmit <= tileStart) { lo = mid; } else { hi = mid - 1u; }
-  }
-  firstDrawInTile[tileIdx] = lo;
+  // ─── Per-slot scan / indirect buffers ──────────────────────────────
+  blockSumsBuf?: GrowBuffer;
+  blockOffsetsBuf?: GrowBuffer;
+  firstDrawInTileBuf?: GrowBuffer;
+  /** CPU sum of indexCounts across live records — drives firstDrawInTileBuf sizing only. */
+  totalEmitEstimate: number;
+  indirectBuf?: GPUBuffer;
+  paramsBuf?: GPUBuffer;
+  scanBindGroup?: GPUBindGroup;
+  /** numRecords used to size the current render bindGroup; rebuild when it changes. */
+  renderBoundRecordCount?: number;
+  scanDirty: boolean;
 }
-`;
 
-// ---------------------------------------------------------------------------
-// Internal state
-// ---------------------------------------------------------------------------
-
-/**
- * One pipeline-state bucket. Holds the pipeline + a list of global
- * draw-slot indices to emit with it. The bind group it draws against
- * is referenced by `bindGroup` (typically the shared no-textures one
- * or one of the per-texture-set ones).
- */
 interface Bucket {
   readonly label: string;
   readonly textures: HeapTextureSet | undefined;
   readonly layout: BucketLayout;
-  readonly pipeline: GPURenderPipeline;
+  /**
+   * One entry per distinct pipeline state. Phase 5a: always length 1
+   * (per-RO pipeline-state still keyed at the bucket level).
+   * Later phases of the derived-modes work let `slots.length > 1`.
+   */
+  readonly slots: BucketSlot[];
   /** Repointed by `rebuildBindGroups` whenever any backing GrowBuffer reallocates. */
   bindGroup: GPUBindGroup;
 
@@ -1082,30 +250,6 @@ interface Bucket {
   /** Local slots whose DrawHeader needs re-pack + writeBuffer next frame. */
   readonly dirty: Set<number>;
 
-  // ─── Megacall state ────────────────────────────────────────────────
-  drawTableBuf?: GrowBuffer;
-  drawTableShadow?: Uint32Array;
-  drawTableDirtyMin: number;
-  drawTableDirtyMax: number;
-  /** Number of live records (= drawTable length). GPU owns firstEmit / total. */
-  recordCount: number;
-  /** localSlot → recordIdx (or -1). */
-  slotToRecord: number[];
-  /** recordIdx → localSlot. */
-  recordToSlot: number[];
-  /** Per-bucket buffers for the GPU prefix-sum pipeline. */
-  blockSumsBuf?: GrowBuffer;
-  blockOffsetsBuf?: GrowBuffer;
-  firstDrawInTileBuf?: GrowBuffer;
-  /** CPU sum of indexCounts across live records — drives firstDrawInTileBuf sizing only. */
-  totalEmitEstimate: number;
-  indirectBuf?: GPUBuffer;
-  paramsBuf?: GPUBuffer;
-  scanBindGroup?: GPUBindGroup;
-  /** numRecords used to size the current render bindGroup; rebuild when it changes. */
-  renderBoundRecordCount?: number;
-  scanDirty: boolean;
-
   // ─── Atlas-binding state (atlas-variant buckets only) ─────────────
   /**
    * True when this bucket holds at least one atlas-variant RO.
@@ -1428,6 +572,52 @@ export function buildHeapScene(
   const drawIdToLocalSlot: (number | undefined)[] = [];
   /** Per-draw index aval — for `indexPool.release` on removeDraw. */
   const drawIdToIndexAval: (aval<Uint32Array> | undefined)[] = [];
+  /**
+   * Original spec retained per drawId so we can re-add the RO into a
+   * new bucket when its PipelineState modeKey changes (reactive
+   * cullmode flip, etc.). Cheap to retain — specs are mostly aval
+   * references.
+   */
+  const drawIdToSpec:        (HeapDrawSpec | undefined)[] = [];
+  /** Per-draw ModeKeyTracker — recomputes the modeKey on demand. Does
+   *  NOT install per-instance marking callbacks; subscriptions are
+   *  scene-level (deduped by aval identity below). */
+  const drawIdToModeTracker: (ModeKeyTracker | undefined)[] = [];
+  /** drawIds whose PS marked since last update; drained by `update`. */
+  const dirtyModeKeyDrawIds = new Set<number>();
+  /**
+   * Scene-level mode-aval subscription dedupe. One IDisposable per
+   * unique leaf aval, plus a Set of dependent drawIds. When the aval
+   * marks, all drawIds in the set become dirty in O(1) per RO instead
+   * of installing N separate addMarkingCallbacks. The big win for the
+   * shared-cullCval case (20k ROs subscribing to one cval → 1 callback
+   * instead of 20k).
+   */
+  const modeAvalToDrawIds  = new Map<aval<unknown>, Set<number>>();
+  const modeAvalCallbacks  = new Map<aval<unknown>, IDisposable>();
+
+  function subscribeModeLeaf(av: aval<unknown>, drawId: number): void {
+    let set = modeAvalToDrawIds.get(av);
+    if (set === undefined) {
+      set = new Set<number>();
+      modeAvalToDrawIds.set(av, set);
+      modeAvalCallbacks.set(av, addMarkingCallback(av, () => {
+        for (const id of set!) dirtyModeKeyDrawIds.add(id);
+      }));
+    }
+    set.add(drawId);
+  }
+
+  function unsubscribeModeLeaf(av: aval<unknown>, drawId: number): void {
+    const set = modeAvalToDrawIds.get(av);
+    if (set === undefined) return;
+    set.delete(drawId);
+    if (set.size === 0) {
+      modeAvalToDrawIds.delete(av);
+      const cb = modeAvalCallbacks.get(av);
+      if (cb !== undefined) { cb.dispose(); modeAvalCallbacks.delete(av); }
+    }
+  }
   let nextDrawId = 0;
 
   /**
@@ -1853,12 +1043,12 @@ export function buildHeapScene(
       label: `heapScene/${bucket.label}/scanBg`,
       layout: scanBgl,
       entries: [
-        { binding: 0, resource: { buffer: bucket.drawTableBuf!.buffer } },
-        { binding: 1, resource: { buffer: bucket.blockSumsBuf!.buffer } },
-        { binding: 2, resource: { buffer: bucket.blockOffsetsBuf!.buffer } },
-        { binding: 3, resource: { buffer: bucket.indirectBuf! } },
-        { binding: 4, resource: { buffer: bucket.paramsBuf! } },
-        { binding: 5, resource: { buffer: bucket.firstDrawInTileBuf!.buffer } },
+        { binding: 0, resource: { buffer: bucket.slots[0]!.drawTableBuf!.buffer } },
+        { binding: 1, resource: { buffer: bucket.slots[0]!.blockSumsBuf!.buffer } },
+        { binding: 2, resource: { buffer: bucket.slots[0]!.blockOffsetsBuf!.buffer } },
+        { binding: 3, resource: { buffer: bucket.slots[0]!.indirectBuf! } },
+        { binding: 4, resource: { buffer: bucket.slots[0]!.paramsBuf! } },
+        { binding: 5, resource: { buffer: bucket.slots[0]!.firstDrawInTileBuf!.buffer } },
       ],
     });
   }
@@ -2085,29 +1275,10 @@ export function buildHeapScene(
     avalIds.set(av, vid);
     return `c${vid}`;
   };
-  const psContentIds = new WeakMap<PipelineState, string>();
-  const psIdOf = (ps: PipelineState | undefined): string => {
-    if (ps === undefined) return "ps#default";
-    const cached = psContentIds.get(ps);
-    if (cached !== undefined) return cached;
-    const r = ps.rasterizer;
-    const parts: string[] = [
-      avalIdOf(r.topology),
-      avalIdOf(r.cullMode),
-      avalIdOf(r.frontFace),
-      avalIdOf(r.depthBias),
-      ps.depth !== undefined
-        ? `d:${avalIdOf(ps.depth.write)}:${avalIdOf(ps.depth.compare)}:${avalIdOf(ps.depth.clamp)}`
-        : "d:_",
-      ps.stencil !== undefined ? "s:1" : "s:_",
-      avalIdOf(ps.blends),
-      avalIdOf(ps.alphaToCoverage),
-      avalIdOf(ps.blendConstant),
-    ];
-    const key = `ps#${parts.join("|")}`;
-    psContentIds.set(ps, key);
-    return key;
-  };
+  // (psIdOf removed in Phase 5b — replaced by snapshotDescriptor +
+  // encodeModeKey at the findOrCreateBucket call site, which keys on
+  // the VALUE of the pipeline state rather than aval identity. The
+  // 20k-cvals-with-same-value pathology now collapses correctly.)
 
   /** Resolved (forced) snapshot of the user's PipelineState. */
   interface ResolvedPipelineState {
@@ -2155,7 +1326,7 @@ export function buildHeapScene(
       { binding: 3, resource: { buffer: arena.attrs.buffer } },          // heapV4f
     ];
     {
-      if (bucket.drawTableBuf === undefined) {
+      if (bucket.slots[0]!.drawTableBuf === undefined) {
         throw new Error("heapScene: megacall bucket without drawTableBuf");
       }
       // Bind drawTable with size = recordCount * RECORD_BYTES so the VS
@@ -2163,13 +1334,13 @@ export function buildHeapScene(
       // the live record count — keeps stale tail entries out of the
       // binary search. Minimum one zero-record to satisfy WebGPU non-
       // zero size constraint when the bucket is empty.
-      const dtBytes = Math.max(RECORD_BYTES, bucket.recordCount * RECORD_BYTES);
+      const dtBytes = Math.max(RECORD_BYTES, bucket.slots[0]!.recordCount * RECORD_BYTES);
       entries.push(
-        { binding: 4, resource: { buffer: bucket.drawTableBuf.buffer, offset: 0, size: dtBytes } },
+        { binding: 4, resource: { buffer: bucket.slots[0]!.drawTableBuf.buffer, offset: 0, size: dtBytes } },
         { binding: 5, resource: { buffer: arena.indices.buffer } },
-        { binding: 6, resource: { buffer: bucket.firstDrawInTileBuf!.buffer } },
+        { binding: 6, resource: { buffer: bucket.slots[0]!.firstDrawInTileBuf!.buffer } },
       );
-      bucket.renderBoundRecordCount = bucket.recordCount;
+      bucket.slots[0]!.renderBoundRecordCount = bucket.slots[0]!.recordCount;
     }
     // Schema-driven texture + sampler entries. v1 user surface still
     // accepts a single (texture, sampler) pair via HeapTextureSet —
@@ -2307,8 +1478,17 @@ export function buildHeapScene(
       throw new Error("heapScene: findOrCreateBucket called before family build");
     }
     const fam = familyFor(effect);
-    const psKey = psIdOf(pipelineState);
-    const bk = `family#${fam.schema.id}|${psKey}`;
+    // ─── PS keying — VALUE based, not identity based ───────────────
+    // psIdOf used to hash by aval identity. That meant 20k ROs each
+    // constructed with `cval("back")` for cullMode hashed to 20k
+    // distinct keys → 20k buckets, all rendering with bitwise-
+    // identical state. Now the key is the bitfield-encoded modeKey
+    // (the actual value-set in the descriptor), so identical-value
+    // cvals collapse to ONE bucket. See docs/derived-modes.md and
+    // tests/heap-multi-pipeline-bucket.test.ts.
+    const psDescriptor = snapshotDescriptor(pipelineState, sig);
+    const psModeKey    = encodeModeKey(psDescriptor);
+    const bk = `family#${fam.schema.id}|mk#${psModeKey.toString(16)}`;
     const existing = bucketByKey.get(bk);
     if (existing !== undefined) return existing;
     const ps = resolvePipelineState(pipelineState);
@@ -2343,13 +1523,21 @@ export function buildHeapScene(
     );
     const drawHeap = new DrawHeap(drawHeapBuf, layout.drawHeaderBytes);
 
+    const slot0: BucketSlot = {
+      pipeline,
+      drawTableDirtyMin: Infinity, drawTableDirtyMax: 0,
+      recordCount: 0, slotToRecord: [], recordToSlot: [],
+      totalEmitEstimate: 0,
+      scanDirty: false,
+    };
     const bucket: Bucket = {
       // §6 family-merge: family buckets aren't keyed on a specific
       // texture set — atlas placements are addressed per-RO via
       // drawHeader fields (`pageRef` + `formatBits` + `origin` +
       // `size`), and the bucket's atlas-binding ladder is driven by
       // `atlasPool.pagesFor(format)`. Leave `textures` undefined.
-      label: bk, textures: undefined, layout, pipeline,
+      label: bk, textures: undefined, layout,
+      slots: [slot0],
       bindGroup: null as unknown as GPUBindGroup,
       drawHeap,
       drawHeaderStaging: new Float32Array(drawHeapBuf.capacity / 4),
@@ -2358,10 +1546,6 @@ export function buildHeapScene(
       localEntries: [], localToDrawId: [],
       localPerDrawAvals: [], localPerDrawRefs: [], localLayoutIds: [],
       drawSlots: new Set<number>(), dirty: new Set<number>(),
-      drawTableDirtyMin: Infinity, drawTableDirtyMax: 0,
-      recordCount: 0, slotToRecord: [], recordToSlot: [],
-      totalEmitEstimate: 0,
-      scanDirty: false,
       isAtlasBucket,
       localAtlasReleases: [],
       localAtlasTextures: [],
@@ -2401,30 +1585,30 @@ export function buildHeapScene(
         label: `heapScene/${bk}/params`, size: 16,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
       });
-      bucket.drawTableBuf = dtBuf;
-      bucket.drawTableShadow = new Uint32Array(dtBuf.capacity / 4);
-      bucket.blockSumsBuf = blockSumsBuf;
-      bucket.blockOffsetsBuf = blockOffsetsBuf;
-      bucket.firstDrawInTileBuf = firstDrawInTileBuf;
-      bucket.indirectBuf = indirectBuf;
-      bucket.paramsBuf = paramsBuf;
+      bucket.slots[0]!.drawTableBuf = dtBuf;
+      bucket.slots[0]!.drawTableShadow = new Uint32Array(dtBuf.capacity / 4);
+      bucket.slots[0]!.blockSumsBuf = blockSumsBuf;
+      bucket.slots[0]!.blockOffsetsBuf = blockOffsetsBuf;
+      bucket.slots[0]!.firstDrawInTileBuf = firstDrawInTileBuf;
+      bucket.slots[0]!.indirectBuf = indirectBuf;
+      bucket.slots[0]!.paramsBuf = paramsBuf;
       const ensureScanBuffers = (): void => {
-        const needBlocks = Math.max(1, Math.ceil(bucket.recordCount / SCAN_TILE_SIZE));
+        const needBlocks = Math.max(1, Math.ceil(bucket.slots[0]!.recordCount / SCAN_TILE_SIZE));
         blockSumsBuf.ensureCapacity(needBlocks * 4);
         blockOffsetsBuf.ensureCapacity(needBlocks * 4);
       };
       const rebuildScanBg = (): void => {
-        bucket.scanBindGroup = buildScanBindGroup(bucket);
+        bucket.slots[0]!.scanBindGroup = buildScanBindGroup(bucket);
       };
       dtBuf.onResize(() => {
         const grown = new Uint32Array(dtBuf.capacity / 4);
-        grown.set(bucket.drawTableShadow!);
-        bucket.drawTableShadow = grown;
+        grown.set(bucket.slots[0]!.drawTableShadow!);
+        bucket.slots[0]!.drawTableShadow = grown;
         ensureScanBuffers();
         bucket.bindGroup = buildBucketBindGroup(bucket);
         rebuildScanBg();
-        bucket.drawTableDirtyMin = 0;
-        bucket.drawTableDirtyMax = bucket.recordCount * RECORD_BYTES;
+        bucket.slots[0]!.drawTableDirtyMin = 0;
+        bucket.slots[0]!.drawTableDirtyMax = bucket.slots[0]!.recordCount * RECORD_BYTES;
       });
       blockSumsBuf.onResize(rebuildScanBg);
       blockOffsetsBuf.onResize(rebuildScanBg);
@@ -2432,7 +1616,7 @@ export function buildHeapScene(
         rebuildScanBg();
         bucket.bindGroup = buildBucketBindGroup(bucket);
       });
-      bucket.scanBindGroup = buildScanBindGroup(bucket);
+      bucket.slots[0]!.scanBindGroup = buildScanBindGroup(bucket);
     }
     bucket.bindGroup = buildBucketBindGroup(bucket);
     drawHeap.onResize(() => {
@@ -2754,8 +1938,8 @@ export function buildHeapScene(
     if (end > bucket.headerDirtyMax) bucket.headerDirtyMax = end;
 
     {
-      const dtBuf = bucket.drawTableBuf!;
-      const recIdx = bucket.recordCount;
+      const dtBuf = bucket.slots[0]!.drawTableBuf!;
+      const recIdx = bucket.slots[0]!.recordCount;
       if (recIdx >= SCAN_MAX_RECORDS) {
         throw new Error(
           `heapScene: bucket exceeds SCAN_MAX_RECORDS (${SCAN_MAX_RECORDS}); ` +
@@ -2767,30 +1951,48 @@ export function buildHeapScene(
       dtBuf.setUsed(Math.max(dtBuf.usedBytes, byteOff + RECORD_BYTES));
       // Grow scan-side buffers if recordCount crosses a tile boundary.
       const needBlocks = Math.max(1, Math.ceil((recIdx + 1) / SCAN_TILE_SIZE));
-      bucket.blockSumsBuf!.ensureCapacity(needBlocks * 4);
-      bucket.blockOffsetsBuf!.ensureCapacity(needBlocks * 4);
-      const shadow = bucket.drawTableShadow!;
+      bucket.slots[0]!.blockSumsBuf!.ensureCapacity(needBlocks * 4);
+      bucket.slots[0]!.blockOffsetsBuf!.ensureCapacity(needBlocks * 4);
+      const shadow = bucket.slots[0]!.drawTableShadow!;
       // firstEmit is GPU-overwritten by the prefix-sum pass; 0 is fine.
       shadow[recIdx * RECORD_U32 + 0] = 0;
       shadow[recIdx * RECORD_U32 + 1] = localSlot;
       shadow[recIdx * RECORD_U32 + 2] = idxAlloc.firstIndex;
       shadow[recIdx * RECORD_U32 + 3] = idxAlloc.count;
       shadow[recIdx * RECORD_U32 + 4] = instanceCount;
-      bucket.recordCount = recIdx + 1;
-      bucket.slotToRecord[localSlot] = recIdx;
-      bucket.recordToSlot[recIdx] = localSlot;
-      if (byteOff < bucket.drawTableDirtyMin) bucket.drawTableDirtyMin = byteOff;
-      if (byteOff + RECORD_BYTES > bucket.drawTableDirtyMax) bucket.drawTableDirtyMax = byteOff + RECORD_BYTES;
-      bucket.totalEmitEstimate += idxAlloc.count * instanceCount;
-      const newNumTiles = Math.max(1, Math.ceil(bucket.totalEmitEstimate / TILE_K));
-      bucket.firstDrawInTileBuf!.ensureCapacity((newNumTiles + 1) * 4);
-      bucket.scanDirty = true;
+      bucket.slots[0]!.recordCount = recIdx + 1;
+      bucket.slots[0]!.slotToRecord[localSlot] = recIdx;
+      bucket.slots[0]!.recordToSlot[recIdx] = localSlot;
+      if (byteOff < bucket.slots[0]!.drawTableDirtyMin) bucket.slots[0]!.drawTableDirtyMin = byteOff;
+      if (byteOff + RECORD_BYTES > bucket.slots[0]!.drawTableDirtyMax) bucket.slots[0]!.drawTableDirtyMax = byteOff + RECORD_BYTES;
+      bucket.slots[0]!.totalEmitEstimate += idxAlloc.count * instanceCount;
+      const newNumTiles = Math.max(1, Math.ceil(bucket.slots[0]!.totalEmitEstimate / TILE_K));
+      bucket.slots[0]!.firstDrawInTileBuf!.ensureCapacity((newNumTiles + 1) * 4);
+      bucket.slots[0]!.scanDirty = true;
     }
 
     drawIdToBucket[drawId]    = bucket;
     drawIdToLocalSlot[drawId] = localSlot;
     drawIdToIndexAval[drawId] = indicesAval;
 
+    // ─── Reactive rebucket: track PS-modeKey changes ────────────────
+    // When any mode-axis aval marks (e.g. cullCval.value = 'front'),
+    // schedule this RO for rebucket on the next update(). Today's
+    // bucket key is the modeKey VALUE (Phase 5b), so changing the
+    // value must move the RO to a different bucket. Without this
+    // tracker the cval flip would be silently ignored.
+    drawIdToSpec[drawId] = spec;
+    // skipSubscribe: this tracker doesn't install its own callbacks.
+    // The scene-level `modeAvalToDrawIds` does it once per unique aval
+    // (the 20k-ROs-share-one-cullCval optimization).
+    const tracker = new ModeKeyTracker(
+      spec.pipelineState, sig,
+      () => { dirtyModeKeyDrawIds.add(drawId); },
+      { skipSubscribe: true },
+    );
+    drawIdToModeTracker[drawId] = tracker;
+    tracker.forEachLeaf((av) => subscribeModeLeaf(av, drawId));
+
     // ─── §7 derived-uniforms registration ────────────────────────────
     // A uniform binding on this RO is either a value (aval/constant) or a rule —
     // collect the rules (explicit `derivedUniform(...)` values + standard trafo
@@ -2865,13 +2067,13 @@ export function buildHeapScene(
       const removedCount = removedEntry !== undefined
         ? removedEntry.indexCount * removedEntry.instanceCount
         : 0;
-      bucket.totalEmitEstimate = Math.max(0, bucket.totalEmitEstimate - removedCount);
+      bucket.slots[0]!.totalEmitEstimate = Math.max(0, bucket.slots[0]!.totalEmitEstimate - removedCount);
       // Swap-pop: move the last record into the freed slot, decrement
       // recordCount. firstEmit is GPU-rewritten by the next scan, so
       // we only fix (drawIdx, indexStart, indexCount, instanceCount).
-      const recIdx     = bucket.slotToRecord[localSlot]!;
-      const lastRecIdx = bucket.recordCount - 1;
-      const shadow = bucket.drawTableShadow!;
+      const recIdx     = bucket.slots[0]!.slotToRecord[localSlot]!;
+      const lastRecIdx = bucket.slots[0]!.recordCount - 1;
+      const shadow = bucket.slots[0]!.drawTableShadow!;
       if (recIdx !== lastRecIdx) {
         const dst = recIdx * RECORD_U32;
         const src = lastRecIdx * RECORD_U32;
@@ -2880,17 +2082,17 @@ export function buildHeapScene(
         shadow[dst + 2] = shadow[src + 2]!;
         shadow[dst + 3] = shadow[src + 3]!;
         shadow[dst + 4] = shadow[src + 4]!;
-        const movedSlot = bucket.recordToSlot[lastRecIdx]!;
-        bucket.slotToRecord[movedSlot] = recIdx;
-        bucket.recordToSlot[recIdx] = movedSlot;
+        const movedSlot = bucket.slots[0]!.recordToSlot[lastRecIdx]!;
+        bucket.slots[0]!.slotToRecord[movedSlot] = recIdx;
+        bucket.slots[0]!.recordToSlot[recIdx] = movedSlot;
         const byteOff = recIdx * RECORD_BYTES;
-        if (byteOff < bucket.drawTableDirtyMin) bucket.drawTableDirtyMin = byteOff;
-        if (byteOff + RECORD_BYTES > bucket.drawTableDirtyMax) bucket.drawTableDirtyMax = byteOff + RECORD_BYTES;
+        if (byteOff < bucket.slots[0]!.drawTableDirtyMin) bucket.slots[0]!.drawTableDirtyMin = byteOff;
+        if (byteOff + RECORD_BYTES > bucket.slots[0]!.drawTableDirtyMax) bucket.slots[0]!.drawTableDirtyMax = byteOff + RECORD_BYTES;
       }
-      bucket.slotToRecord[localSlot] = -1;
-      bucket.recordToSlot[lastRecIdx] = -1;
-      bucket.recordCount = lastRecIdx;
-      bucket.scanDirty = true;
+      bucket.slots[0]!.slotToRecord[localSlot] = -1;
+      bucket.slots[0]!.recordToSlot[lastRecIdx] = -1;
+      bucket.slots[0]!.recordCount = lastRecIdx;
+      bucket.slots[0]!.scanDirty = true;
     }
 
     // Release pool entries — refcount drops; if zero, allocation freed.
@@ -2943,9 +2145,21 @@ export function buildHeapScene(
     drawIdToBucket[drawId]    = undefined;
     drawIdToLocalSlot[drawId] = undefined;
     drawIdToIndexAval[drawId] = undefined;
+    drawIdToSpec[drawId]      = undefined;
+    const oldTracker = drawIdToModeTracker[drawId];
+    if (oldTracker !== undefined) {
+      oldTracker.forEachLeaf((av) => unsubscribeModeLeaf(av, drawId));
+      oldTracker.dispose();
+    }
+    drawIdToModeTracker[drawId] = undefined;
+    dirtyModeKeyDrawIds.delete(drawId);
 
     stats.totalDraws--;
     stats.geometryBytes = arenaBytes(arena);
+
+    // GC the bucket if it just emptied (common after reactive
+    // PS rebucket leaves the source bucket with zero live ROs).
+    gcBucket(bucket);
   }
 
   // ─── Aset reader (pull-driven on each frame) ──────────────────────
@@ -3030,6 +2244,105 @@ export function buildHeapScene(
     sceneObj.evaluateAlways(token, (tok) => {
       drainAsetWith(tok);
 
+      // 0. Reactive rebucket: any RO whose PipelineState modeKey
+      //    changed since last frame moves to its new bucket.
+      //    `dirtyModeKeyDrawIds` was populated by ModeKeyTracker's
+      //    onDirty callbacks (one per leaf aval per RO). Calling
+      //    `recompute()` here re-snapshots the descriptor and tells
+      //    us whether the modeKey actually changed (vs the aval just
+      //    being marked-but-equal). If the key changed, we remove +
+      //    re-add the RO via the retained spec; addDraw routes it to
+      //    the correct (new) bucket via the value-keyed lookup.
+      if (dirtyModeKeyDrawIds.size > 0) {
+        const dirty = [...dirtyModeKeyDrawIds];
+        dirtyModeKeyDrawIds.clear();
+
+        // Bucket-level fast path: group dirty drawIds by bucket. If
+        // ALL of a bucket's ROs are dirty (typical SG case where one
+        // shared aval drives every leaf — e.g. <Sg CullMode={cullC}>
+        // wrapping 20k leaves), the whole bucket transitions together.
+        // Rebuild the bucket's pipeline + rename in bucketByKey,
+        // O(1) work instead of N remove+add cycles.
+        const byBucket = new Map<Bucket, number[]>();
+        for (const drawId of dirty) {
+          const b = drawIdToBucket[drawId];
+          if (b === undefined) continue; // RO removed since mark
+          let arr = byBucket.get(b);
+          if (arr === undefined) { arr = []; byBucket.set(b, arr); }
+          arr.push(drawId);
+        }
+
+        for (const [bucket, ids] of byBucket) {
+          // First recompute every dirty tracker so .modeKey is fresh.
+          // Filter out ones whose value didn't actually change.
+          const changed: number[] = [];
+          for (const drawId of ids) {
+            const tracker = drawIdToModeTracker[drawId];
+            if (tracker === undefined) continue;
+            const oldKey = tracker.modeKey;
+            if (!tracker.recompute()) continue;
+            if (tracker.modeKey === oldKey) continue;
+            changed.push(drawId);
+          }
+          if (changed.length === 0) continue;
+
+          // Try the all-together fast path.
+          const wholeBucket = changed.length === bucket.drawSlots.size;
+          if (wholeBucket) {
+            const repId = changed[0]!;
+            const repTracker = drawIdToModeTracker[repId]!;
+            const newKey  = repTracker.modeKey;
+            // Compute the new bucketByKey string; we need the family.
+            const sample = drawIdToSpec[repId]!;
+            const fam = familyFor(sample.effect);
+            const newBk = `family#${fam.schema.id}|mk#${newKey.toString(16)}`;
+            const existing = bucketByKey.get(newBk);
+            if (existing === undefined) {
+              // No conflict — rename + rebuild pipeline in place.
+              // Find this bucket's current key by linear scan
+              // (buckets ≤ ~100 typically, so this is cheap).
+              let oldBk: string | undefined;
+              for (const [k, v] of bucketByKey) {
+                if (v === bucket) { oldBk = k; break; }
+              }
+              if (oldBk !== undefined) bucketByKey.delete(oldBk);
+              bucketByKey.set(newBk, bucket);
+              // Build the new pipeline with the snapshotted PS.
+              const desc = repTracker.descriptor;
+              const { pipelineLayout } = getBgl(bucket.layout, bucket.isAtlasBucket);
+              const newPipeline = device.createRenderPipeline({
+                label: `heapScene/${newBk}/pipeline`,
+                layout: pipelineLayout,
+                vertex:   { module: familyFor(sample.effect).vsModule, entryPoint: familyFor(sample.effect).vsEntryName, buffers: [] },
+                fragment: { module: familyFor(sample.effect).fsModule, entryPoint: familyFor(sample.effect).fsEntryName, targets: colorTargets },
+                primitive: { topology: desc.topology, cullMode: desc.cullMode, frontFace: desc.frontFace },
+                ...(depthFormat !== undefined && desc.depth !== undefined
+                  ? { depthStencil: { format: depthFormat, depthWriteEnabled: desc.depth.write, depthCompare: desc.depth.compare } }
+                  : depthFormat !== undefined
+                    ? { depthStencil: { format: depthFormat, depthWriteEnabled: false, depthCompare: "always" as GPUCompareFunction } }
+                    : {}),
+              });
+              // Swap pipeline reference on the bucket's single slot.
+              // (Multi-slot Phase 5c would update one slot at a time.)
+              (bucket.slots[0] as { pipeline: GPURenderPipeline }).pipeline = newPipeline;
+              continue; // done with this bucket
+            }
+            // Conflict: another bucket already owns newBk. Fall through
+            // to per-RO rebucket below, which will merge into `existing`.
+          }
+          // Slow path — per-RO rebucket (used when partial transition
+          // OR when a merge with an existing destination bucket is
+          // required).
+          for (const drawId of changed) {
+            const spec = drawIdToSpec[drawId];
+            if (spec === undefined) continue;
+            removeDraw(drawId);
+            const newId = addDrawImpl(spec, tok);
+            void newId;
+          }
+        }
+      }
+
       // 1. Pool: re-pack any aval whose value changed since last frame.
       //    One writeBuffer per dirty aval, regardless of how many draws
       //    reference it — sharing pays off here.
@@ -3125,16 +2438,16 @@ export function buildHeapScene(
         bucket.headerDirtyMin = Infinity;
         bucket.headerDirtyMax = 0;
       }
-      if (bucket.drawTableDirtyMax > bucket.drawTableDirtyMin) {
-        const shadow = bucket.drawTableShadow!;
+      if (bucket.slots[0]!.drawTableDirtyMax > bucket.slots[0]!.drawTableDirtyMin) {
+        const shadow = bucket.slots[0]!.drawTableShadow!;
         device.queue.writeBuffer(
-          bucket.drawTableBuf!.buffer, bucket.drawTableDirtyMin,
+          bucket.slots[0]!.drawTableBuf!.buffer, bucket.slots[0]!.drawTableDirtyMin,
           shadow.buffer,
-          shadow.byteOffset + bucket.drawTableDirtyMin,
-          bucket.drawTableDirtyMax - bucket.drawTableDirtyMin,
+          shadow.byteOffset + bucket.slots[0]!.drawTableDirtyMin,
+          bucket.slots[0]!.drawTableDirtyMax - bucket.slots[0]!.drawTableDirtyMin,
         );
-        bucket.drawTableDirtyMin = Infinity;
-        bucket.drawTableDirtyMax = 0;
+        bucket.slots[0]!.drawTableDirtyMin = Infinity;
+        bucket.slots[0]!.drawTableDirtyMax = 0;
       }
     }
   }
@@ -3148,8 +2461,8 @@ export function buildHeapScene(
     let curBg: GPUBindGroup | null = null;
     for (const b of buckets) {
       if (b.bindGroup !== curBg) { pass.setBindGroup(0, b.bindGroup); curBg = b.bindGroup; }
-      pass.setPipeline(b.pipeline);
-      if (b.recordCount > 0) pass.drawIndirect(b.indirectBuf!, 0);
+      pass.setPipeline(b.slots[0]!.pipeline);
+      if (b.slots[0]!.recordCount > 0) pass.drawIndirect(b.slots[0]!.indirectBuf!, 0);
     }
   }
 
@@ -3190,23 +2503,23 @@ export function buildHeapScene(
       stats.derivedRecords  = derivedScene.records.recordCount;
     }
     let anyDirty = false;
-    for (const b of buckets) { if (b.scanDirty) { anyDirty = true; break; } }
+    for (const b of buckets) { if (b.slots[0]!.scanDirty) { anyDirty = true; break; } }
     if (!anyDirty) return;
     const pass = enc.beginComputePass({ label: "heapScene/scan" });
     for (const b of buckets) {
-      if (!b.scanDirty) continue;
+      if (!b.slots[0]!.scanDirty) continue;
       // Rebuild render bind group if recordCount changed — its
       // drawTable binding is sized to recordCount * 16.
-      if (b.renderBoundRecordCount !== b.recordCount) {
+      if (b.slots[0]!.renderBoundRecordCount !== b.slots[0]!.recordCount) {
         b.bindGroup = buildBucketBindGroup(b);
       }
-      const numRecords = b.recordCount;
+      const numRecords = b.slots[0]!.recordCount;
       const numBlocks = Math.max(1, Math.ceil(numRecords / SCAN_TILE_SIZE));
       device.queue.writeBuffer(
-        b.paramsBuf!, 0,
+        b.slots[0]!.paramsBuf!, 0,
         new Uint32Array([numRecords, numBlocks, 0, 0]),
       );
-      pass.setBindGroup(0, b.scanBindGroup!);
+      pass.setBindGroup(0, b.slots[0]!.scanBindGroup!);
       pass.setPipeline(scanPipeTile!);
       pass.dispatchWorkgroups(numBlocks, 1, 1);
       pass.setPipeline(scanPipeBlocks!);
@@ -3217,11 +2530,11 @@ export function buildHeapScene(
       // must cover the worst-case totalEmit. Each WG handles WG_SIZE
       // tiles; +1 for the sentinel slot.
       const SCAN_WG_SIZE = 256;
-      const numTilesCap = Math.max(1, Math.ceil(b.totalEmitEstimate / TILE_K));
+      const numTilesCap = Math.max(1, Math.ceil(b.slots[0]!.totalEmitEstimate / TILE_K));
       const tileWgs = Math.max(1, Math.ceil((numTilesCap + 1) / SCAN_WG_SIZE));
       pass.setPipeline(scanPipeBuildTileIndex!);
       pass.dispatchWorkgroups(tileWgs, 1, 1);
-      b.scanDirty = false;
+      b.slots[0]!.scanDirty = false;
     }
     pass.end();
   }
@@ -3259,18 +2572,38 @@ export function buildHeapScene(
     device.queue.submit([enc.finish()]);
   }
 
+  function destroyBucketResources(b: Bucket): void {
+    b.drawHeap.destroy();
+    for (const slot of b.slots) {
+      slot.drawTableBuf?.destroy();
+      slot.blockSumsBuf?.destroy();
+      slot.blockOffsetsBuf?.destroy();
+      slot.firstDrawInTileBuf?.destroy();
+      slot.indirectBuf?.destroy();
+      slot.paramsBuf?.destroy();
+    }
+  }
+
+  /**
+   * Remove an empty bucket from the scene's bucket list + key index +
+   * destroy its GPU resources. Called from removeDraw when an RO's
+   * removal leaves the bucket with zero live slots — common after
+   * reactive PS rebucket leaves the source bucket empty.
+   */
+  function gcBucket(b: Bucket): void {
+    if (b.drawSlots.size !== 0) return;
+    const idx = buckets.indexOf(b);
+    if (idx >= 0) buckets.splice(idx, 1);
+    for (const [k, v] of bucketByKey) {
+      if (v === b) { bucketByKey.delete(k); break; }
+    }
+    destroyBucketResources(b);
+  }
+
   function dispose(): void {
     arena.attrs.destroy();
     arena.indices.destroy();
-    for (const b of buckets) {
-      b.drawHeap.destroy();
-      b.drawTableBuf?.destroy();
-      b.blockSumsBuf?.destroy();
-      b.blockOffsetsBuf?.destroy();
-      b.firstDrawInTileBuf?.destroy();
-      b.indirectBuf?.destroy();
-      b.paramsBuf?.destroy();
-    }
+    for (const b of buckets) destroyBucketResources(b);
   }
 
   // Test-only escape hatch for inspecting megacall bucket state. Not
@@ -3285,11 +2618,11 @@ export function buildHeapScene(
       layout: BucketLayout;
     }[] {
       return buckets.map(b => ({
-        indirectBuf: b.indirectBuf,
-        drawTableBuf: b.drawTableBuf?.buffer,
-        firstDrawInTileBuf: b.firstDrawInTileBuf?.buffer,
-        totalEmitEstimate: b.totalEmitEstimate,
-        recordCount: b.recordCount,
+        indirectBuf: b.slots[0]!.indirectBuf,
+        drawTableBuf: b.slots[0]!.drawTableBuf?.buffer,
+        firstDrawInTileBuf: b.slots[0]!.firstDrawInTileBuf?.buffer,
+        totalEmitEstimate: b.slots[0]!.totalEmitEstimate,
+        recordCount: b.slots[0]!.recordCount,
         layout: b.layout,
       }));
     },
@@ -3358,18 +2691,18 @@ export function buildHeapScene(
       const TILE_K_LOCAL = 64;
       const dcs: DC[] = [];
       for (const b of buckets) {
-        const dhSize = Math.min(b.drawHeap.buffer.size, b.recordCount * b.layout.drawHeaderBytes);
+        const dhSize = Math.min(b.drawHeap.buffer.size, b.slots[0]!.recordCount * b.layout.drawHeaderBytes);
         if (dhSize === 0) continue;
         const dh = stage(b.drawHeap.buffer, dhSize);
-        const dt = b.drawTableBuf !== undefined && b.recordCount > 0
-          ? stage(b.drawTableBuf.buffer, b.recordCount * RECORD_BYTES)
+        const dt = b.slots[0]!.drawTableBuf !== undefined && b.slots[0]!.recordCount > 0
+          ? stage(b.slots[0]!.drawTableBuf.buffer, b.slots[0]!.recordCount * RECORD_BYTES)
           : undefined;
-        const totalEmit = b.totalEmitEstimate;
+        const totalEmit = b.slots[0]!.totalEmitEstimate;
         const numTiles = totalEmit > 0 ? Math.ceil(totalEmit / TILE_K_LOCAL) : 0;
-        const fdt = b.firstDrawInTileBuf !== undefined && numTiles > 0
-          ? stage(b.firstDrawInTileBuf.buffer, Math.min(b.firstDrawInTileBuf.buffer.size, (numTiles + 1) * 4))
+        const fdt = b.slots[0]!.firstDrawInTileBuf !== undefined && numTiles > 0
+          ? stage(b.slots[0]!.firstDrawInTileBuf.buffer, Math.min(b.slots[0]!.firstDrawInTileBuf.buffer.size, (numTiles + 1) * 4))
           : undefined;
-        const ind = b.indirectBuf !== undefined ? stage(b.indirectBuf, 16) : undefined;
+        const ind = b.slots[0]!.indirectBuf !== undefined ? stage(b.slots[0]!.indirectBuf, 16) : undefined;
         dcs.push({
           bucket: b, drawHeap: dh, numTiles,
           ...(dt !== undefined ? { drawTable: dt } : {}),
@@ -3401,7 +2734,7 @@ export function buildHeapScene(
       for (const dc of dcs) {
         const u32 = new Uint32Array(dc.drawHeap.getMappedRange());
         const stride = dc.bucket.layout.drawHeaderBytes;
-        const recordCount = dc.bucket.recordCount;
+        const recordCount = dc.bucket.slots[0]!.recordCount;
 
         for (let slot = 0; slot < recordCount; slot++) {
           const slotOff = slot * stride;
@@ -3557,7 +2890,7 @@ export function buildHeapScene(
         // ── 6. indirect[0] (totalEmit) must match CPU prefix sum.
         if (dc.indirect !== undefined) {
           const ind = new Uint32Array(dc.indirect.getMappedRange());
-          const expectedTotal = dc.bucket.totalEmitEstimate;
+          const expectedTotal = dc.bucket.slots[0]!.totalEmitEstimate;
           const got = ind[0]!;
           if (got !== expectedTotal) {
             push(`bucket#${bucketIdx} indirect[0]=${got} ≠ expected totalEmit=${expectedTotal}`);
@@ -3658,10 +2991,10 @@ export function buildHeapScene(
       };
       const dcs: DC[] = [];
       for (const b of buckets) {
-        if (b.recordCount === 0 || b.totalEmitEstimate === 0) continue;
-        const dh = stage(b.drawHeap.buffer, Math.min(b.drawHeap.buffer.size, b.recordCount * b.layout.drawHeaderBytes));
-        const dt = stage(b.drawTableBuf!.buffer, b.recordCount * RECORD_BYTES);
-        dcs.push({ bucket: b, drawHeap: dh, drawTable: dt, firstEmit: [], totalEmit: b.totalEmitEstimate });
+        if (b.slots[0]!.recordCount === 0 || b.slots[0]!.totalEmitEstimate === 0) continue;
+        const dh = stage(b.drawHeap.buffer, Math.min(b.drawHeap.buffer.size, b.slots[0]!.recordCount * b.layout.drawHeaderBytes));
+        const dt = stage(b.slots[0]!.drawTableBuf!.buffer, b.slots[0]!.recordCount * RECORD_BYTES);
+        dcs.push({ bucket: b, drawHeap: dh, drawTable: dt, firstEmit: [], totalEmit: b.slots[0]!.totalEmitEstimate });
       }
       device.queue.submit([enc.finish()]);
 
@@ -3687,7 +3020,7 @@ export function buildHeapScene(
         const dt = new Uint32Array(dc.drawTable.getMappedRange());
         bucketDt.push(dt);
         bucketHdr.push(new Uint32Array(dc.drawHeap.getMappedRange()));
-        for (let r = 0; r < dc.bucket.recordCount; r++) {
+        for (let r = 0; r < dc.bucket.slots[0]!.recordCount; r++) {
           dc.firstEmit.push(dt[r * RECORD_U32 + 0]!);
         }
         bucketCumEmit.push(totalEmitGlobal);
@@ -3745,7 +3078,7 @@ export function buildHeapScene(
         emitsChecked++;
 
         // Binary search for slot.
-        const recCount = dc.bucket.recordCount;
+        const recCount = dc.bucket.slots[0]!.recordCount;
         let lo = 0, hi = recCount - 1;
         while (lo < hi) {
           const mid = (lo + hi + 1) >>> 1;
@@ -3942,9 +3275,9 @@ export function buildHeapScene(
         : new Uint32Array(0);
 
       for (const target of buckets) {
-        if (target.recordCount === 0 || target.totalEmitEstimate === 0) { bucketIdx++; continue; }
-        const recordCount = target.recordCount;
-        const totalEmit = target.totalEmitEstimate;
+        if (target.slots[0]!.recordCount === 0 || target.slots[0]!.totalEmitEstimate === 0) { bucketIdx++; continue; }
+        const recordCount = target.slots[0]!.recordCount;
+        const totalEmit = target.slots[0]!.totalEmitEstimate;
         const totalTris = Math.floor(totalEmit / 3);
         const remainder = totalEmit % 3;
         if (remainder !== 0) {
@@ -3962,7 +3295,7 @@ export function buildHeapScene(
           usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
         });
         const enc0 = device.createCommandEncoder({ label: "checkTriangleCoherence.dt" });
-        enc0.copyBufferToBuffer(target.drawTableBuf!.buffer, 0, dtCopy, 0, recordCount * RECORD_BYTES);
+        enc0.copyBufferToBuffer(target.slots[0]!.drawTableBuf!.buffer, 0, dtCopy, 0, recordCount * RECORD_BYTES);
         enc0.copyBufferToBuffer(target.drawHeap.buffer, 0, dhCopy, 0, recordCount * target.layout.drawHeaderBytes);
         device.queue.submit([enc0.finish()]);
         await dtCopy.mapAsync(GPUMapMode.READ);
@@ -4011,7 +3344,7 @@ export function buildHeapScene(
         });
         {
           const enc1 = device.createCommandEncoder();
-          enc1.copyBufferToBuffer(target.firstDrawInTileBuf!.buffer, 0, fdtCopy, 0, fdtSize);
+          enc1.copyBufferToBuffer(target.slots[0]!.firstDrawInTileBuf!.buffer, 0, fdtCopy, 0, fdtSize);
           device.queue.submit([enc1.finish()]);
           await fdtCopy.mapAsync(GPUMapMode.READ);
         }
@@ -4166,9 +3499,9 @@ export function buildHeapScene(
       // own bytes).
       bucketIdx = 0;
       for (const target of buckets) {
-        if (target.recordCount === 0) { bucketIdx++; continue; }
+        if (target.slots[0]!.recordCount === 0) { bucketIdx++; continue; }
         // Re-stage drawHeap for this bucket.
-        const dhBytes = target.recordCount * target.layout.drawHeaderBytes;
+        const dhBytes = target.slots[0]!.recordCount * target.layout.drawHeaderBytes;
         const dhCopy = device.createBuffer({
           size: dhBytes, usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
         });
@@ -4178,7 +3511,7 @@ export function buildHeapScene(
         await dhCopy.mapAsync(GPUMapMode.READ);
         const dhU32 = new Uint32Array(dhCopy.getMappedRange());
         const stride2 = target.layout.drawHeaderBytes;
-        for (let slot = 0; slot < target.recordCount; slot++) {
+        for (let slot = 0; slot < target.slots[0]!.recordCount; slot++) {
           for (const f of target.layout.drawHeaderFields) {
             if (f.kind !== "uniform-ref" && f.kind !== "attribute-ref") continue;
             const ref = dhU32[(slot * stride2 + f.byteOffset) >>> 2];
@@ -4238,11 +3571,11 @@ export function buildHeapScene(
       let gpuMismatches = 0;
       const push = (s: string) => { if (issues.length < 30) issues.push(s); };
 
-      const target = buckets.find(b => b.recordCount > 0 && b.totalEmitEstimate > 0);
+      const target = buckets.find(b => b.slots[0]!.recordCount > 0 && b.slots[0]!.totalEmitEstimate > 0);
       if (target === undefined) return { emitsChecked: 0, gpuMismatches: 0, issues };
 
-      const recordCount = target.recordCount;
-      const totalEmit = target.totalEmitEstimate;
+      const recordCount = target.slots[0]!.recordCount;
+      const totalEmit = target.slots[0]!.totalEmitEstimate;
       const sampleCount = Math.min(samples, totalEmit);
       const stride = Math.max(1, Math.floor(totalEmit / sampleCount));
 
@@ -4256,7 +3589,7 @@ export function buildHeapScene(
       });
       {
         const enc0 = device.createCommandEncoder({ label: "probeBinarySearch.dtCopy" });
-        enc0.copyBufferToBuffer(target.drawTableBuf!.buffer, 0, dtCopy, 0, recordCount * RECORD_BYTES);
+        enc0.copyBufferToBuffer(target.slots[0]!.drawTableBuf!.buffer, 0, dtCopy, 0, recordCount * RECORD_BYTES);
         device.queue.submit([enc0.finish()]);
         await dtCopy.mapAsync(GPUMapMode.READ);
       }
@@ -4360,8 +3693,8 @@ export function buildHeapScene(
       const bg = device.createBindGroup({
         layout: bgl,
         entries: [
-          { binding: 0, resource: { buffer: target.drawTableBuf!.buffer } },
-          { binding: 1, resource: { buffer: target.firstDrawInTileBuf!.buffer } },
+          { binding: 0, resource: { buffer: target.slots[0]!.drawTableBuf!.buffer } },
+          { binding: 1, resource: { buffer: target.slots[0]!.firstDrawInTileBuf!.buffer } },
           { binding: 2, resource: { buffer: sampleBuf } },
           { binding: 3, resource: { buffer: arena.indices.buffer } },
           { binding: 4, resource: { buffer: outBuf } },