@vectojs/core 1.14.0 → 1.16.0

package/dist/index.js

@@ -1,39 +1,23 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7; var _class8; var _class9; var _class10;const __vecto_cjs_url=require("url").pathToFileURL(__filename).href;
 
 
 
 
-var _chunkBA5HUUDFjs = require('./chunk-BA5HUUDF.js');
 
 
 
 
 
+var _chunkIYPLG4Z4js = require('./chunk-IYPLG4Z4.js');
 
 
 
 
-var _chunkBEUIB3U7js = require('./chunk-BEUIB3U7.js');
 
+var _chunkDUYB4GX4js = require('./chunk-DUYB4GX4.js');
 
-
-
-
-
-
-
-
-
-
-
-
-
-var _chunk2Z23LTH3js = require('./chunk-2Z23LTH3.js');
-
-
-
-
-var _chunk4AR425ARjs = require('./chunk-4AR425AR.js');
+// src/tree/Scene.ts
+var _animation = require('@vectojs/animation'); _createStarExport(_animation);
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -45,7 +29,7 @@ var PARTICLE_OFFSET_ORIGIN_X = 4;
 var PARTICLE_OFFSET_ORIGIN_Y = 5;
 var PARTICLE_OFFSET_SIZE = 6;
 var PARTICLE_OFFSET_LIFE = 7;
-var ComputeParticleEntity = (_class = class extends _chunk2Z23LTH3js.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkDUYB4GX4js.Entity {
   
   
   
@@ -68,8 +52,12 @@ var ComputeParticleEntity = (_class = class extends _chunk2Z23LTH3js.Entity {
   __init5() {this.computeBindGroup = null}
   /** WebGPU bind group for the render pass (usually same as compute). */
   __init6() {this.renderBindGroup = null}
+  /** When the last simulation step ran through the WASM backend, its fused
+   *  pending-animation flag; `null` when the last step used the JS `updateCPU`
+   *  path (so `hasPendingAnimations` falls back to its own scan). */
+  __init7() {this._wasmPending = null}
   constructor(options = {}) {
-    super();_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);;
+    super();_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);_class.prototype.__init7.call(this);;
     this.maxParticles = _nullishCoalesce(options.maxParticles, () => ( 1e4));
     this.springK = _nullishCoalesce(options.springK, () => ( 0.05));
     this.damping = _nullishCoalesce(options.damping, () => ( 0.95));
@@ -197,6 +185,9 @@ var ComputeParticleEntity = (_class = class extends _chunk2Z23LTH3js.Entity {
    * always return `true` and defeat the idle throttle entirely.
    */
   hasPendingAnimations() {
+    if (this._wasmPending !== null) {
+      return this._wasmPending || this.pendingExplosion !== null;
+    }
     const EPS_VELOCITY = 0.5;
     const EPS_DISTANCE = 0.5;
     for (let i = 0; i < this.maxParticles; i++) {
@@ -222,6 +213,7 @@ var ComputeParticleEntity = (_class = class extends _chunk2Z23LTH3js.Entity {
    * @param height - Boundary height.
    */
   updateCPU(dt, mouseX, mouseY, width, height) {
+    this._wasmPending = null;
     const safeDt = isNaN(dt) ? 0.016 : Math.max(0, Math.min(dt, 0.1));
     const explosion = this.pendingExplosion;
     const safeWidth = Math.max(1, width);
@@ -304,6 +296,37 @@ var ComputeParticleEntity = (_class = class extends _chunk2Z23LTH3js.Entity {
     }
     this.pendingExplosion = null;
   }
+  /**
+   * Advance the simulation one step through the WASM particle kernel: transpose
+   * this entity's AoS buffer into the backend's SoA views, run `particle_step`,
+   * and scatter position/velocity/life back. Produces an f32 result (matching
+   * the WGSL shader) that differs from {@link updateCPU}'s f64 by <1 ULP/step —
+   * the accepted CPU-vs-GPU-class divergence. Caches the kernel's fused
+   * pending-animation flag so {@link hasPendingAnimations} needs no second scan.
+   *
+   * The backend holds one resident SoA store, so a Scene with multiple particle
+   * entities reuses it sequentially — origin is therefore re-gathered each call
+   * (not upload-once), a couple of extra f32 reads per particle.
+   */
+  stepWithBackend(backend, dt, mouseX, mouseY, width, height) {
+    const count = this.maxParticles;
+    backend.ensure(count);
+    backend.gather(this.particleData, count, true);
+    this._wasmPending = backend.step(count, {
+      dt,
+      mouseX,
+      mouseY,
+      width,
+      height,
+      springK: this.springK,
+      damping: this.damping,
+      bounceDamping: this.bounceDamping,
+      maxVelocity: this.maxVelocity,
+      explosion: this.pendingExplosion
+    });
+    backend.scatter(this.particleData, count);
+    this.pendingExplosion = null;
+  }
   destroy() {
     this.destroyGPUResources();
     super.destroy();
@@ -329,7 +352,751 @@ var ComputeParticleEntity = (_class = class extends _chunk2Z23LTH3js.Entity {
   }
 }, _class);
 
+// src/wasm/soa.ts
+var PAD = 8;
+function buildStore(nodes) {
+  const count = nodes.length;
+  const capacity = count + PAD;
+  const childrenOf = Array.from({ length: count }, () => []);
+  let rootInput = -1;
+  for (let k = 0; k < count; k++) {
+    const p = nodes[k].parent;
+    if (p === -1) {
+      if (rootInput !== -1) throw new Error("buildStore: more than one root (parent === -1)");
+      rootInput = k;
+    } else {
+      if (p < 0 || p >= count)
+        throw new Error(`buildStore: node ${k} has out-of-range parent ${p}`);
+      childrenOf[p].push(k);
+    }
+  }
+  if (rootInput === -1) throw new Error("buildStore: no root (need exactly one parent === -1)");
+  const store = {
+    count,
+    capacity,
+    x: new Float64Array(capacity),
+    y: new Float64Array(capacity),
+    sx: new Float64Array(capacity),
+    sy: new Float64Array(capacity),
+    cos: new Float64Array(capacity),
+    sin: new Float64Array(capacity),
+    opacity: new Float64Array(capacity),
+    wa: new Float64Array(capacity),
+    wb: new Float64Array(capacity),
+    wc: new Float64Array(capacity),
+    wd: new Float64Array(capacity),
+    we: new Float64Array(capacity),
+    wf: new Float64Array(capacity),
+    wo: new Float64Array(capacity),
+    bx: new Float64Array(capacity),
+    by: new Float64Array(capacity),
+    bw: new Float64Array(capacity),
+    bh: new Float64Array(capacity),
+    aminx: new Float64Array(capacity),
+    aminy: new Float64Array(capacity),
+    amaxx: new Float64Array(capacity),
+    amaxy: new Float64Array(capacity),
+    runParent: new Int32Array(count),
+    runStart: new Int32Array(count),
+    runLen: new Int32Array(count),
+    runCount: 0,
+    storeIndexOf: new Int32Array(count).fill(-1)
+  };
+  store.storeIndexOf[rootInput] = 0;
+  writeInput(store, 0, nodes[rootInput]);
+  let next = 1;
+  const queue = [rootInput];
+  let head = 0;
+  while (head < queue.length) {
+    const parentInput = queue[head++];
+    const kids = childrenOf[parentInput];
+    if (kids.length === 0) continue;
+    const runStart = next;
+    for (const kid of kids) {
+      store.storeIndexOf[kid] = next;
+      writeInput(store, next, nodes[kid]);
+      next++;
+    }
+    const r = store.runCount++;
+    store.runParent[r] = store.storeIndexOf[parentInput];
+    store.runStart[r] = runStart;
+    store.runLen[r] = kids.length;
+    for (const kid of kids) queue.push(kid);
+  }
+  return store;
+}
+function writeInput(s, i, n) {
+  s.x[i] = n.x;
+  s.y[i] = n.y;
+  s.sx[i] = n.scaleX;
+  s.sy[i] = n.scaleY;
+  s.cos[i] = Math.cos(n.rotation);
+  s.sin[i] = Math.sin(n.rotation);
+  s.opacity[i] = n.opacity;
+  s.bx[i] = _nullishCoalesce(n.bx, () => ( 0));
+  s.by[i] = _nullishCoalesce(n.by, () => ( 0));
+  s.bw[i] = _nullishCoalesce(n.bw, () => ( 0));
+  s.bh[i] = _nullishCoalesce(n.bh, () => ( 0));
+}
+
+// src/wasm/scene-store.ts
+function buildTreeStore(root) {
+  const entities = [];
+  const inputIndex = /* @__PURE__ */ new Map();
+  const collect = (e) => {
+    inputIndex.set(e, entities.length);
+    entities.push(e);
+    const kids = e.children;
+    for (let i = 0; i < kids.length; i++) collect(kids[i]);
+  };
+  collect(root);
+  const nodes = entities.map((e) => {
+    const parent = e.parent;
+    const p = parent !== null && inputIndex.has(parent) ? inputIndex.get(parent) : -1;
+    return {
+      parent: e === root ? -1 : p,
+      x: e.x,
+      y: e.y,
+      scaleX: e.scaleX,
+      scaleY: e.scaleY,
+      rotation: e.rotation,
+      opacity: e.opacity
+    };
+  });
+  const store = buildStore(nodes);
+  const indexOf = /* @__PURE__ */ new Map();
+  for (const [e, ii] of inputIndex) indexOf.set(e, store.storeIndexOf[ii]);
+  return { store, indexOf };
+}
+
+// src/wasm/backend.ts
+var PAD2 = 8;
+var WasmTransformBackend = (_class2 = class {
+  __init8() {this.available = true}
+  
+  __init9() {this.cap = 0}
+  __init10() {this.runCap = 0}
+  // Views over wasm linear memory, valid until the next init().
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  constructor(instance) {;_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);
+    this.ex = instance.exports;
+  }
+  /** Compose world matrices for `store` in WASM, writing back into its
+   *  `wa..wo` arrays. Result is bit-identical to `composeJS(store)`. */
+  compose(store, kernel = "simd") {
+    this.ensure(store.count, store.runCount);
+    const n = store.count;
+    this.vx.set(store.x.subarray(0, n));
+    this.vy.set(store.y.subarray(0, n));
+    this.vsx.set(store.sx.subarray(0, n));
+    this.vsy.set(store.sy.subarray(0, n));
+    this.vcos.set(store.cos.subarray(0, n));
+    this.vsin.set(store.sin.subarray(0, n));
+    this.vop.set(store.opacity.subarray(0, n));
+    const rc = store.runCount;
+    this.vrp.set(store.runParent.subarray(0, rc));
+    this.vrs.set(store.runStart.subarray(0, rc));
+    this.vrl.set(store.runLen.subarray(0, rc));
+    this.ex.set_run_count(rc);
+    if (kernel === "scalar") this.ex.compose_scalar();
+    else this.ex.compose_simd();
+    store.wa.set(this.vwa.subarray(0, n));
+    store.wb.set(this.vwb.subarray(0, n));
+    store.wc.set(this.vwc.subarray(0, n));
+    store.wd.set(this.vwd.subarray(0, n));
+    store.we.set(this.vwe.subarray(0, n));
+    store.wf.set(this.vwf.subarray(0, n));
+    store.wo.set(this.vwo.subarray(0, n));
+  }
+  /**
+   * Run the kernel only, over data already resident in WASM memory — no upload,
+   * no readback. This is the per-frame cost the *designed* integration pays:
+   * entity accessors write `x/y/rotation` straight into the wasm input views
+   * (via {@link inputView}) and the renderer reads world matrices straight from
+   * the wasm output views (via {@link worldView}), so the batch copies in
+   * {@link compose} do not happen every frame. `compose` must have run at least
+   * once at the current capacity to size the store and set the run count; call
+   * {@link uploadRuns} after a topology change.
+   */
+  runKernel(kernel = "simd") {
+    if (kernel === "scalar") this.ex.compose_scalar();
+    else this.ex.compose_simd();
+  }
+  /** Upload only the run table + count (topology), leaving per-entity inputs to
+   *  the resident views. Call when the tree structure changes, not per frame. */
+  uploadRuns(store) {
+    this.ensure(store.count, store.runCount);
+    const rc = store.runCount;
+    this.vrp.set(store.runParent.subarray(0, rc));
+    this.vrs.set(store.runStart.subarray(0, rc));
+    this.vrl.set(store.runLen.subarray(0, rc));
+    this.ex.set_run_count(rc);
+  }
+  /** The resident wasm input views (`x,y,sx,sy,cos,sin,opacity`), valid until
+   *  the next capacity growth. Writing here is what makes uploads unnecessary. */
+  inputView() {
+    return {
+      x: this.vx,
+      y: this.vy,
+      sx: this.vsx,
+      sy: this.vsy,
+      cos: this.vcos,
+      sin: this.vsin,
+      opacity: this.vop
+    };
+  }
+  /** The resident wasm world-matrix output views (`wa..wo`). Reading here is
+   *  what makes readback unnecessary. */
+  worldView() {
+    return {
+      wa: this.vwa,
+      wb: this.vwb,
+      wc: this.vwc,
+      wd: this.vwd,
+      we: this.vwe,
+      wf: this.vwf,
+      wo: this.vwo
+    };
+  }
+  /**
+   * Compute world-space AABBs for `store` in WASM (G1+), writing back into its
+   * `aminx/aminy/amaxx/amaxy` arrays. Uploads the local bounds, runs the AABB
+   * pass, reads results back. Result is bit-identical to `computeAabbsJS(store)`.
+   * `compose` (or `runKernel`) must have populated the world matrices first —
+   * this pass reads them. For the resident (no-copy) integration, write bounds
+   * via {@link boundsView} and read via {@link aabbView} + call
+   * {@link runAabbs} instead.
+   */
+  computeAabbs(store) {
+    this.ensure(store.count, store.runCount);
+    const n = store.count;
+    this.vbx.set(store.bx.subarray(0, n));
+    this.vby.set(store.by.subarray(0, n));
+    this.vbw.set(store.bw.subarray(0, n));
+    this.vbh.set(store.bh.subarray(0, n));
+    this.ex.compute_aabbs(n);
+    store.aminx.set(this.vaminx.subarray(0, n));
+    store.aminy.set(this.vaminy.subarray(0, n));
+    store.amaxx.set(this.vamaxx.subarray(0, n));
+    store.amaxy.set(this.vamaxy.subarray(0, n));
+  }
+  /** Run the AABB pass only, over `count` entities already resident in wasm
+   *  memory (bounds written via {@link boundsView}, world matrices already
+   *  composed). No upload/readback — the per-frame resident path. */
+  runAabbs(count) {
+    this.ex.compute_aabbs(count);
+  }
+  /** Resident wasm local-bounds input views (`bx,by,bw,bh`) for the AABB pass. */
+  boundsView() {
+    return { bx: this.vbx, by: this.vby, bw: this.vbw, bh: this.vbh };
+  }
+  /** Resident wasm world-AABB output views (`aminx,aminy,amaxx,amaxy`). */
+  aabbView() {
+    return {
+      aminx: this.vaminx,
+      aminy: this.vaminy,
+      amaxx: this.vamaxx,
+      amaxy: this.vamaxy
+    };
+  }
+  ensure(count, runCount) {
+    if (count + PAD2 <= this.cap && runCount <= this.runCap) return;
+    this.cap = count + PAD2;
+    this.runCap = Math.max(runCount, count, 1);
+    this.ex.init(count, this.runCap);
+    this.refreshViews();
+  }
+  /** Rebuild typed-array views after an init() (which may have grown, and thus
+   *  detached, the memory buffer). */
+  refreshViews() {
+    const buf = this.ex.memory.buffer;
+    const cap = this.cap;
+    const rc = this.runCap;
+    const f64 = (ptr) => new Float64Array(buf, ptr, cap);
+    const i32 = (ptr) => new Int32Array(buf, ptr, rc);
+    this.vx = f64(this.ex.p_x());
+    this.vy = f64(this.ex.p_y());
+    this.vsx = f64(this.ex.p_sx());
+    this.vsy = f64(this.ex.p_sy());
+    this.vcos = f64(this.ex.p_cos());
+    this.vsin = f64(this.ex.p_sin());
+    this.vop = f64(this.ex.p_opacity());
+    this.vwa = f64(this.ex.p_wa());
+    this.vwb = f64(this.ex.p_wb());
+    this.vwc = f64(this.ex.p_wc());
+    this.vwd = f64(this.ex.p_wd());
+    this.vwe = f64(this.ex.p_we());
+    this.vwf = f64(this.ex.p_wf());
+    this.vwo = f64(this.ex.p_wo());
+    this.vbx = f64(this.ex.p_bx());
+    this.vby = f64(this.ex.p_by());
+    this.vbw = f64(this.ex.p_bw());
+    this.vbh = f64(this.ex.p_bh());
+    this.vaminx = f64(this.ex.p_aminx());
+    this.vaminy = f64(this.ex.p_aminy());
+    this.vamaxx = f64(this.ex.p_amaxx());
+    this.vamaxy = f64(this.ex.p_amaxy());
+    this.vrp = i32(this.ex.p_run_parent());
+    this.vrs = i32(this.ex.p_run_start());
+    this.vrl = i32(this.ex.p_run_len());
+  }
+}, _class2);
+async function instantiateAsync(bytes) {
+  try {
+    const { instance } = await WebAssembly.instantiate(bytes, {});
+    return new WasmTransformBackend(instance);
+  } catch (e3) {
+    return null;
+  }
+}
+async function instantiateStreaming(source) {
+  try {
+    const resp = typeof source === "string" || source instanceof URL ? await fetch(String(source)) : await source;
+    if (typeof WebAssembly.instantiateStreaming === "function") {
+      const buffered = resp.clone();
+      try {
+        const { instance: instance2 } = await WebAssembly.instantiateStreaming(resp, {});
+        return new WasmTransformBackend(instance2);
+      } catch (e4) {
+        const { instance: instance2 } = await WebAssembly.instantiate(await buffered.arrayBuffer(), {});
+        return new WasmTransformBackend(instance2);
+      }
+    }
+    const { instance } = await WebAssembly.instantiate(await resp.arrayBuffer(), {});
+    return new WasmTransformBackend(instance);
+  } catch (e5) {
+    return null;
+  }
+}
+
+// src/wasm/hit-store.ts
+function gatherHitAABBs(root, currentFrame) {
+  const slotEntity = [];
+  const boundless = [];
+  const minxs = [];
+  const minys = [];
+  const maxxs = [];
+  const maxys = [];
+  const scratch = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+  const visit = (node) => {
+    const index = slotEntity.length;
+    slotEntity.push(node);
+    const bounds = node.getBounds();
+    if (bounds === null) {
+      boundless.push({ entity: node, index });
+      minxs.push(0);
+      minys.push(0);
+      maxxs.push(0);
+      maxys.push(0);
+    } else {
+      if (!node._readWorldCache(currentFrame, scratch)) {
+        const t = node.getWorldTransform();
+        scratch.a = t.a;
+        scratch.b = t.b;
+        scratch.c = t.c;
+        scratch.d = t.d;
+        scratch.e = t.e;
+        scratch.f = t.f;
+      }
+      const { a, b, c, d, e, f } = scratch;
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (let i = 0; i < 4; i++) {
+        const lx = i & 1 ? bounds.x + bounds.width : bounds.x;
+        const ly = i & 2 ? bounds.y + bounds.height : bounds.y;
+        const wx = a * lx + c * ly + e;
+        const wy = b * lx + d * ly + f;
+        if (wx < minX) minX = wx;
+        if (wx > maxX) maxX = wx;
+        if (wy < minY) minY = wy;
+        if (wy > maxY) maxY = wy;
+      }
+      minxs.push(minX);
+      minys.push(minY);
+      maxxs.push(maxX);
+      maxys.push(maxY);
+    }
+    const kids = node.children;
+    for (let i = 0; i < kids.length; i++) visit(kids[i]);
+  };
+  visit(root);
+  return {
+    count: slotEntity.length,
+    slotEntity,
+    boundless,
+    minx: Float64Array.from(minxs),
+    miny: Float64Array.from(minys),
+    maxx: Float64Array.from(maxxs),
+    maxy: Float64Array.from(maxys)
+  };
+}
+
+// src/wasm/hit-backend.ts
+var PAD3 = 8;
+var CELLS_PER_ENTITY_HINT = 4;
+var HitTestBackend = (_class3 = class {
+  
+  __init11() {this.entityCap = 0}
+  __init12() {this.cellCap = 0}
+  __init13() {this.itemCap = 0}
+  
+  
+  
+  
+  
+  
+  
+  /** Grid geometry from the last {@link ensure} call. */
+  __init14() {this.gridW = 0}
+  __init15() {this.gridH = 0}
+  __init16() {this.cellSize = 64}
+  constructor(instance) {;_class3.prototype.__init11.call(this);_class3.prototype.__init12.call(this);_class3.prototype.__init13.call(this);_class3.prototype.__init14.call(this);_class3.prototype.__init15.call(this);_class3.prototype.__init16.call(this);
+    this.ex = instance.exports;
+  }
+  /** The resident AABB input views (`minx/miny/maxx/maxy`), valid until the
+   *  next capacity growth. Writing here is what {@link build} reads from. */
+  inputView() {
+    return { minx: this.vminx, miny: this.vminy, maxx: this.vmaxx, maxy: this.vmaxy };
+  }
+  /**
+   * Size (and grow, if needed) capacity for `count` entities over
+   * `[0,vw] x [0,vh]` at `cellSize`, and record the grid geometry
+   * {@link candidatesAt} needs. Call this BEFORE writing AABBs into
+   * {@link inputView} — a capacity growth detaches the previous views, so
+   * writing first and sizing after would write into a stale buffer.
+   */
+  ensure(count, vw, vh, cellSize) {
+    const gw = Math.max(1, Math.ceil(vw / cellSize));
+    const gh = Math.max(1, Math.ceil(vh / cellSize));
+    this.growIfNeeded(count, gw * gh, count * CELLS_PER_ENTITY_HINT);
+    this.gridW = gw;
+    this.gridH = gh;
+    this.cellSize = cellSize;
+  }
+  /**
+   * Run the kernel's bucketing over whatever is currently resident in
+   * {@link inputView} (write the AABBs there, and call {@link ensure} first).
+   * Returns `false` if the build overflowed its item budget — the caller must
+   * not trust {@link candidatesAt} results for this build and should fall back
+   * to the JS walk instead (never return a wrong hit).
+   */
+  runBuild(count, vw, vh, cellSize) {
+    this.ex.hit_build(count, vw, vh, cellSize);
+    return this.ex.hit_overflow() === 0;
+  }
+  /**
+   * Entity indices whose AABB overlaps the cell containing `(px, py)`, in
+   * ascending index order (scan from the end for topmost/highest-index
+   * first), or `null` if the point falls outside the built grid. This is a
+   * coarse candidate LIST, not a hit result — the caller must still confirm
+   * each candidate's AABB contains the point and re-check its precise
+   * `isPointInside`.
+   */
+  candidatesAt(px, py) {
+    if (px < 0 || py < 0) return null;
+    const cx = Math.floor(px / this.cellSize);
+    const cy = Math.floor(py / this.cellSize);
+    if (cx < 0 || cy < 0 || cx >= this.gridW || cy >= this.gridH) return null;
+    const c = cy * this.gridW + cx;
+    if (c >= this.cellCap) return null;
+    const start = this.vCellStart[c];
+    const count = this.vCellCount[c];
+    return this.vItems.subarray(start, start + count);
+  }
+  growIfNeeded(count, cellCount, itemCount) {
+    if (count + PAD3 <= this.entityCap && cellCount <= this.cellCap && itemCount <= this.itemCap) {
+      return;
+    }
+    this.entityCap = count + PAD3;
+    this.cellCap = Math.max(cellCount, 1);
+    this.itemCap = Math.max(itemCount, count, 1);
+    this.ex.hit_init(count, this.cellCap, this.itemCap);
+    this.refreshViews();
+  }
+  /** Rebuild typed-array views after a growing `hit_init` (which detaches the
+   *  memory buffer). */
+  refreshViews() {
+    const buf = this.ex.memory.buffer;
+    const eCap = this.entityCap;
+    const cCap = this.cellCap;
+    const iCap = this.itemCap;
+    this.vminx = new Float64Array(buf, this.ex.p_h_minx(), eCap);
+    this.vminy = new Float64Array(buf, this.ex.p_h_miny(), eCap);
+    this.vmaxx = new Float64Array(buf, this.ex.p_h_maxx(), eCap);
+    this.vmaxy = new Float64Array(buf, this.ex.p_h_maxy(), eCap);
+    this.vCellStart = new Int32Array(buf, this.ex.p_h_cell_start(), cCap);
+    this.vCellCount = new Int32Array(buf, this.ex.p_h_cell_count(), cCap);
+    this.vItems = new Int32Array(buf, this.ex.p_h_items(), iCap);
+  }
+}, _class3);
+async function instantiateAsync2(bytes) {
+  try {
+    const { instance } = await WebAssembly.instantiate(bytes, {});
+    return new HitTestBackend(instance);
+  } catch (e6) {
+    return null;
+  }
+}
+async function instantiateStreaming2(source) {
+  try {
+    const resp = typeof source === "string" || source instanceof URL ? await fetch(String(source)) : await source;
+    if (typeof WebAssembly.instantiateStreaming === "function") {
+      const buffered = resp.clone();
+      try {
+        const { instance: instance2 } = await WebAssembly.instantiateStreaming(resp, {});
+        return new HitTestBackend(instance2);
+      } catch (e7) {
+        const { instance: instance2 } = await WebAssembly.instantiate(await buffered.arrayBuffer(), {});
+        return new HitTestBackend(instance2);
+      }
+    }
+    const { instance } = await WebAssembly.instantiate(await resp.arrayBuffer(), {});
+    return new HitTestBackend(instance);
+  } catch (e8) {
+    return null;
+  }
+}
+
+// src/wasm/anim-backend.ts
+var PAD4 = 8;
+var AnimBackend = (_class4 = class {
+  
+  __init17() {this.springCap = 0}
+  __init18() {this.tweenCap = 0}
+  
+  
+  constructor(instance) {;_class4.prototype.__init17.call(this);_class4.prototype.__init18.call(this);
+    this.ex = instance.exports;
+  }
+  /** The resident spring SoA input/output views, valid until the next capacity
+   *  growth. Write gathered driver state here before calling {@link stepSprings}. */
+  springView() {
+    return this.sv;
+  }
+  /** The resident tween SoA input/output views, valid until the next capacity
+   *  growth. Write gathered driver state here before calling {@link stepTweens}. */
+  tweenView() {
+    return this.tv;
+  }
+  /**
+   * Size (and grow, if needed) capacity for `springCount` springs and
+   * `tweenCount` tweens. Call this BEFORE writing into {@link springView}/
+   * {@link tweenView} — a capacity growth detaches the previous views, so
+   * writing first and sizing after would write into a stale buffer.
+   */
+  ensure(springCount, tweenCount) {
+    if (springCount + PAD4 <= this.springCap && tweenCount + PAD4 <= this.tweenCap) return;
+    this.springCap = springCount + PAD4;
+    this.tweenCap = tweenCount + PAD4;
+    this.ex.anim_init(this.springCap, this.tweenCap);
+    this.refreshViews();
+  }
+  /** Advance `count` springs (from index 0) by `dtMs` milliseconds, in place. */
+  stepSprings(dtMs, count) {
+    this.ex.spring_step(dtMs / 1e3, count);
+  }
+  /** Advance `count` tweens (from index 0) by `dtMs` milliseconds, writing `val`. */
+  stepTweens(dtMs, count) {
+    this.ex.tween_step(dtMs, count);
+  }
+  refreshViews() {
+    const buf = this.ex.memory.buffer;
+    const sCap = this.springCap;
+    const tCap = this.tweenCap;
+    this.sv = {
+      val: new Float64Array(buf, this.ex.p_s_val(), sCap),
+      target: new Float64Array(buf, this.ex.p_s_target(), sCap),
+      vel: new Float64Array(buf, this.ex.p_s_vel(), sCap),
+      stiff: new Float64Array(buf, this.ex.p_s_stiff(), sCap),
+      damp: new Float64Array(buf, this.ex.p_s_damp(), sCap),
+      mass: new Float64Array(buf, this.ex.p_s_mass(), sCap)
+    };
+    this.tv = {
+      from: new Float64Array(buf, this.ex.p_t_from(), tCap),
+      to: new Float64Array(buf, this.ex.p_t_to(), tCap),
+      elapsed: new Float64Array(buf, this.ex.p_t_elapsed(), tCap),
+      dur: new Float64Array(buf, this.ex.p_t_dur(), tCap),
+      delay: new Float64Array(buf, this.ex.p_t_delay(), tCap),
+      ease: new Float64Array(buf, this.ex.p_t_ease(), tCap),
+      val: new Float64Array(buf, this.ex.p_t_val(), tCap)
+    };
+  }
+}, _class4);
+async function instantiateAsync3(bytes) {
+  try {
+    const { instance } = await WebAssembly.instantiate(bytes, {});
+    return new AnimBackend(instance);
+  } catch (e9) {
+    return null;
+  }
+}
+async function instantiateStreaming3(source) {
+  try {
+    const resp = typeof source === "string" || source instanceof URL ? await fetch(String(source)) : await source;
+    if (typeof WebAssembly.instantiateStreaming === "function") {
+      const buffered = resp.clone();
+      try {
+        const { instance: instance2 } = await WebAssembly.instantiateStreaming(resp, {});
+        return new AnimBackend(instance2);
+      } catch (e10) {
+        const { instance: instance2 } = await WebAssembly.instantiate(await buffered.arrayBuffer(), {});
+        return new AnimBackend(instance2);
+      }
+    }
+    const { instance } = await WebAssembly.instantiate(await resp.arrayBuffer(), {});
+    return new AnimBackend(instance);
+  } catch (e11) {
+    return null;
+  }
+}
+
+// src/wasm/particle-backend.ts
+var PAD5 = 8;
+var ParticleBackend = (_class5 = class {
+  
+  __init19() {this.cap = 0}
+  
+  constructor(instance) {;_class5.prototype.__init19.call(this);
+    this.ex = instance.exports;
+  }
+  /** The resident SoA views, valid until the next capacity growth. */
+  particleView() {
+    return this.view;
+  }
+  /**
+   * Size (and grow, if needed) capacity for `count` particles. Call BEFORE
+   * writing into {@link particleView} — a growth detaches the previous views.
+   */
+  ensure(count) {
+    if (count + PAD5 <= this.cap) return;
+    this.cap = count + PAD5;
+    this.ex.particle_init(this.cap);
+    this.refreshViews();
+  }
+  /**
+   * Advance `count` particles one step in place. Returns `true` when at least
+   * one live particle is still moving or off-origin beyond epsilon (the fused
+   * `hasPendingAnimations` flag), so the caller need not re-scan the buffer.
+   */
+  step(count, p) {
+    const e = p.explosion;
+    const flag = this.ex.particle_step(
+      p.dt,
+      p.mouseX,
+      p.mouseY,
+      p.width,
+      p.height,
+      p.springK,
+      p.damping,
+      p.bounceDamping,
+      p.maxVelocity,
+      e ? 1 : 0,
+      e ? e.x : 0,
+      e ? e.y : 0,
+      e ? e.force : 0,
+      count
+    );
+    return flag !== 0;
+  }
+  /** Transpose the AoS stride-8 buffer into the SoA views (position/velocity/
+   *  life every frame; origin upload-once when `withOrigin`). */
+  gather(data, count, withOrigin) {
+    const v = this.view;
+    for (let i = 0; i < count; i++) {
+      const o = i * PARTICLE_STRIDE_FLOATS;
+      v.px[i] = data[o + PARTICLE_OFFSET_POSITION_X];
+      v.py[i] = data[o + PARTICLE_OFFSET_POSITION_Y];
+      v.vx[i] = data[o + PARTICLE_OFFSET_VELOCITY_X];
+      v.vy[i] = data[o + PARTICLE_OFFSET_VELOCITY_Y];
+      v.life[i] = data[o + PARTICLE_OFFSET_LIFE];
+      if (withOrigin) {
+        v.ox[i] = data[o + PARTICLE_OFFSET_ORIGIN_X];
+        v.oy[i] = data[o + PARTICLE_OFFSET_ORIGIN_Y];
+      }
+    }
+  }
+  /** Scatter the mutated position/velocity/life back into the AoS buffer. */
+  scatter(data, count) {
+    const v = this.view;
+    for (let i = 0; i < count; i++) {
+      const o = i * PARTICLE_STRIDE_FLOATS;
+      data[o + PARTICLE_OFFSET_POSITION_X] = v.px[i];
+      data[o + PARTICLE_OFFSET_POSITION_Y] = v.py[i];
+      data[o + PARTICLE_OFFSET_VELOCITY_X] = v.vx[i];
+      data[o + PARTICLE_OFFSET_VELOCITY_Y] = v.vy[i];
+      data[o + PARTICLE_OFFSET_LIFE] = v.life[i];
+    }
+  }
+  refreshViews() {
+    const buf = this.ex.memory.buffer;
+    const c = this.cap;
+    this.view = {
+      px: new Float32Array(buf, this.ex.pp_px(), c),
+      py: new Float32Array(buf, this.ex.pp_py(), c),
+      vx: new Float32Array(buf, this.ex.pp_vx(), c),
+      vy: new Float32Array(buf, this.ex.pp_vy(), c),
+      ox: new Float32Array(buf, this.ex.pp_ox(), c),
+      oy: new Float32Array(buf, this.ex.pp_oy(), c),
+      life: new Float32Array(buf, this.ex.pp_life(), c)
+    };
+  }
+}, _class5);
+async function instantiateAsync4(bytes) {
+  try {
+    const { instance } = await WebAssembly.instantiate(bytes, {});
+    return new ParticleBackend(instance);
+  } catch (e12) {
+    return null;
+  }
+}
+async function instantiateStreaming4(source) {
+  try {
+    const resp = typeof source === "string" || source instanceof URL ? await fetch(String(source)) : await source;
+    if (typeof WebAssembly.instantiateStreaming === "function") {
+      const buffered = resp.clone();
+      try {
+        const { instance: instance2 } = await WebAssembly.instantiateStreaming(resp, {});
+        return new ParticleBackend(instance2);
+      } catch (e13) {
+        const { instance: instance2 } = await WebAssembly.instantiate(await buffered.arrayBuffer(), {});
+        return new ParticleBackend(instance2);
+      }
+    }
+    const { instance } = await WebAssembly.instantiate(await resp.arrayBuffer(), {});
+    return new ParticleBackend(instance);
+  } catch (e14) {
+    return null;
+  }
+}
+
 // src/tree/Scene.ts
+var _text = require('@vectojs/text'); _createStarExport(_text);
 var INTERACTIVE_A11Y_ROLES = /* @__PURE__ */ new Set([
   "button",
   "switch",
@@ -616,13 +1383,13 @@ function extendSelection(selection, anchor, focus) {
   try {
     selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
     return;
-  } catch (e3) {
+  } catch (e15) {
   }
   try {
     selection.collapse(anchor.node, anchor.offset);
     selection.extend(focus.node, focus.offset);
     return;
-  } catch (e4) {
+  } catch (e16) {
   }
   const anchorRange = document.createRange();
   anchorRange.setStart(anchor.node, anchor.offset);
@@ -641,9 +1408,13 @@ function extendSelection(selection, anchor, focus) {
   selection.removeAllRanges();
   selection.addRange(range);
 }
-var Scene = (_class2 = class _Scene {
+var Scene = (_class6 = class _Scene {
   static __initStatic() {this.webglCreator = null}
   static __initStatic2() {this.webgpuManagerClass = null}
+  /** Upper bound (ms) on a single frame's `dt`. Caps the giant elapsed gap a
+   *  backgrounded/refocused tab produces so physics advances at most one slow
+   *  frame instead of the whole idle duration (~100ms ≈ 6 frames at 60fps). */
+  static __initStatic3() {this.MAX_FRAME_DT = 100}
   static registerWebGLPointRendererCreator(creator) {
     _Scene.webglCreator = creator;
   }
@@ -653,8 +1424,15 @@ var Scene = (_class2 = class _Scene {
   
   
   
-  __init7() {this.isRunning = false}
-  __init8() {this.lastTime = 0}
+  __init20() {this.isRunning = false}
+  /** Whether the canvas is at least partially in the viewport. When it scrolls
+   *  fully off-screen the rAF loop pauses (stops rescheduling) instead of
+   *  burning frames on a scene nobody can see; an IntersectionObserver resumes
+   *  it on re-entry. Defaults true (and stays true where IntersectionObserver
+   *  is unavailable, e.g. SSR/jsdom, so behavior is unchanged there). */
+  __init21() {this._canvasOnScreen = true}
+  __init22() {this._canvasObserver = null}
+  __init23() {this.lastTime = 0}
   
   /**
    * Redraw strategy:
@@ -663,133 +1441,700 @@ var Scene = (_class2 = class _Scene {
    *   {@link markDirty}) or while an animation is pending. Ideal for static /
    *   event-driven UIs where idle frames should cost ~0.
    */
-  __init9() {this.renderMode = "always"}
-  __init10() {this.dirty = true}
+  __init24() {this.renderMode = "always"}
+  __init25() {this.dirty = true}
   /** Whether to throttle rendering to 2 FPS when the scene is static to save power. */
-  __init11() {this.autoThrottle = true}
+  __init26() {this.autoThrottle = true}
   // --- Frame telemetry (read via `frameStats`) ---------------------------
   /** Wall-clock ms spent inside the last `render()` call. */
-  __init12() {this._lastFrameMs = 0}
+  __init27() {this._lastFrameMs = 0}
   /** Rolling exponential average of rendered-frame intervals, in ms. */
-  __init13() {this._avgFrameIntervalMs = 0}
+  __init28() {this._avgFrameIntervalMs = 0}
   /** dt (ms) handed to the last rendered frame. */
-  __init14() {this._lastDt = 0}
+  __init29() {this._lastDt = 0}
   /** Count of frames actually rendered since the loop started. */
-  __init15() {this._renderedFrames = 0}
+  __init30() {this._renderedFrames = 0}
   /** Count of rAF ticks skipped (idle / capped) since the loop started. */
-  __init16() {this._skippedFrames = 0}
+  __init31() {this._skippedFrames = 0}
   /** `time` of the previous *rendered* frame, for interval measurement. */
-  __init17() {this._lastRenderTick = 0}
+  __init32() {this._lastRenderTick = 0}
   /**
    * Frame-rate cap (power saving). `0` = uncapped (native refresh). When set,
    * the loop renders at most `maxFPS` times per second; animations still run,
    * just less often. See {@link SceneOptions.maxFPS}.
    */
-  __init18() {this.maxFPS = 60}
+  __init33() {this.maxFPS = 60}
   /** Whether the OS prefers-reduced-motion setting auto-caps the loop. */
-  __init19() {this.respectReducedMotion = true}
+  __init34() {this.respectReducedMotion = true}
+  /**
+   * Reading direction for accessibility tab/traversal order (`'ltr'` default,
+   * `'rtl'`). Controls the inline sort within a visual row in
+   * {@link enforceA11yDomOrder}. Set at runtime to re-flow tab order on the
+   * next sync (also trips a reorder).
+   */
+  get readingDirection() {
+    return this._readingDirection;
+  }
+  set readingDirection(dir) {
+    if (dir !== this._readingDirection) {
+      this._readingDirection = dir;
+      this.a11yNeedsReorder = true;
+    }
+  }
+  __init35() {this._readingDirection = "ltr"}
   /** Cached media-query list; `.matches` is read live each frame. */
-  __init20() {this.reducedMotionQuery = null}
+  __init36() {this.reducedMotionQuery = null}
+  /** Cached `(forced-colors: active)` query (Windows High Contrast etc.). A
+   *  canvas gets NO automatic forced-colors treatment from the browser (it's
+   *  opaque pixels), so components must read {@link forcedColors} and repaint
+   *  with system colors themselves; a change listener repaints idle scenes. */
+  __init37() {this.forcedColorsQuery = null}
+  __init38() {this.forcedColorsChangeHandler = null}
   /** True when the OS asks for reduced motion and we respect it. Read by the animation drivers. */
   get prefersReducedMotion() {
     return this.respectReducedMotion && !!_optionalChain([this, 'access', _21 => _21.reducedMotionQuery, 'optionalAccess', _22 => _22.matches]);
   }
+  /**
+   * True when the OS is in a forced-colors mode (Windows High Contrast, and the
+   * `forced-colors: active` media feature generally). Canvas pixels are exempt
+   * from the browser's forced-colors remapping, so accessible components should
+   * read this and draw with CSS system colors (`CanvasText`, `Canvas`,
+   * `Highlight`, …) instead of their themed palette. Re-rendered automatically
+   * when the setting toggles.
+   */
+  get forcedColors() {
+    return !!_optionalChain([this, 'access', _23 => _23.forcedColorsQuery, 'optionalAccess', _24 => _24.matches]);
+  }
   /**
    * Throttle interval (ms) for the a11y/automation shadow sync. `0` = every
    * frame. See {@link SceneOptions.a11ySyncInterval}.
    */
-  __init21() {this.a11ySyncInterval = 0}
+  __init39() {this.a11ySyncInterval = 0}
   /** Timestamp of the last a11y sync, for throttling. */
-  __init22() {this.lastA11ySync = -Infinity}
+  __init40() {this.lastA11ySync = -Infinity}
   /** True if we skipped an a11y sync during animation and need to sync when at rest. */
-  __init23() {this.a11yPendingSyncAfterAnimation = false}
+  __init41() {this.a11yPendingSyncAfterAnimation = false}
   // A11y / Automation Layer. `null` in non-DOM (SSR/Node) environments — the
   // whole projection degrades to a no-op so the engine's logic stays usable
   // server-side (e.g. headless layout / vector export) without jsdom.
   
-  __init24() {this.a11yElements = /* @__PURE__ */ new Map()}
+  __init42() {this.a11yElements = /* @__PURE__ */ new Map()}
   /** DOM nodes mirroring static text content, keyed by entity id. */
-  __init25() {this.contentElements = /* @__PURE__ */ new Map()}
+  __init43() {this.contentElements = /* @__PURE__ */ new Map()}
   /** Pending cold font-calibration frame per projected grid entity. */
-  __init26() {this.contentGridCalibrationFrames = /* @__PURE__ */ new Map()}
+  __init44() {this.contentGridCalibrationFrames = /* @__PURE__ */ new Map()}
   /** Detached, untransformed font probes used by the cold calibration pass. */
-  __init27() {this.contentGridCalibrationProbes = /* @__PURE__ */ new Map()}
+  __init45() {this.contentGridCalibrationProbes = /* @__PURE__ */ new Map()}
   /** Invalidates grid font calibration after browser font availability changes. */
-  __init28() {this.contentFontEpoch = 0}
+  __init46() {this.contentFontEpoch = 0}
   /** Cached Canvas-to-client scale for the current font/viewport epoch. */
-  __init29() {this.contentMetricScaleEpoch = -1}
-  __init30() {this.contentMetricScaleX = 1}
-  __init31() {this.contentProjectionEnabled = true}
+  __init47() {this.contentMetricScaleEpoch = -1}
+  __init48() {this.contentMetricScaleX = 1}
+  __init49() {this.contentProjectionEnabled = true}
   // Virtualization margin (px) for content projection; `undefined` → one
   // viewport height, resolved at sync time. `Infinity` = materialize everything.
-  __init32() {this.contentProjectionMargin = void 0}
+  __init50() {this.contentProjectionMargin = void 0}
   /**
    * True while a text-selection drag that started on a projection's blank
    * region (no text node under the press) is being driven manually — the
    * browser has no native anchor for it, so mousemove extends the Selection
    * from the position we resolved ourselves.
    */
-  __init33() {this.blankRegionSelectionDrag = false}
-  __init34() {this.contentSelectionAnchor = null}
-  __init35() {this.contentSelectionEndListener = null}
+  __init51() {this.blankRegionSelectionDrag = false}
+  __init52() {this.contentSelectionAnchor = null}
+  __init53() {this.contentSelectionEndListener = null}
   // Animation/interactive flags collected during the render walk (tree-walk
   // fusion): the loop reads last frame's answers instead of re-walking the
   // tree up to 4× per tick. Start true so the first tick stays conservative.
-  __init36() {this.frameHadAnimation = true}
-  __init37() {this.frameHadInteractive = true}
-  
-  __init38() {this.focusedA11yElement = null}
-  __init39() {this.caretBlinkTimer = null}
-  __init40() {this.a11yNeedsReorder = true}
-  __init41() {this.portalRoot = null}
-  __init42() {this.fullViewportElements = []}
-  __init43() {this.normalElements = []}
-  __init44() {this.activeIds = /* @__PURE__ */ new Set()}
-  __init45() {this.activePortalsThisFrame = /* @__PURE__ */ new Set()}
-  __init46() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
-  __init47() {this.portalEntities = /* @__PURE__ */ new Map()}
-  __init48() {this.renderOrderCounter = 0}
+  __init54() {this.frameHadAnimation = true}
+  __init55() {this.frameHadInteractive = true}
+  
+  /** Active `(resolution: Ndppx)` media query watching for a runtime DPR change
+   *  (window moved between monitors, browser zoom) so the canvas backing store
+   *  can be re-scaled — otherwise it stays rasterized at the old DPR and blurs.
+   *  A resolution media query only fires when leaving its exact value, so the
+   *  handler re-arms a fresh query for the new DPR each time. */
+  __init56() {this.dprMediaQuery = null}
+  /** For embedded (`disableWindowResize`) scenes: observes the canvas element so
+   *  a CSS/layout-driven size change re-runs `resize()`. A window `resize`
+   *  listener never fires for these (the window isn't what changed), so without
+   *  this an embedded canvas stayed at its initial size forever. */
+  __init57() {this.canvasResizeObserver = null}
+  __init58() {this.dprChangeHandler = null}
+  __init59() {this.focusedA11yElement = null}
+  /** Last geometry `syncOverlayGeometry` wrote, so an unchanged frame can skip the
+   *  style writes entirely. Reset to `null` to force the next sync (a new overlay
+   *  layer was created and has never been positioned). */
+  __init60() {this._overlayGeometry = null}
+  /** Shadow elements the pointer is currently inside. Lets a removal that happens
+   *  mid-hover synthesize the `pointerleave` the browser never sends for a
+   *  detached element, so the entity doesn't keep its hover state. */
+  __init61() {this.hoveredA11yElements = /* @__PURE__ */ new WeakSet()}
+  /** Persistent tabindex=-1 element in a11yRoot. When the focused a11y mirror is
+   *  pruned (virtualization/streaming/removal) while it holds focus, we move
+   *  focus here instead of letting the browser drop it to <body> — keeping the
+   *  screen-reader virtual cursor inside the scene's a11y region. */
+  __init62() {this.focusSentinel = null}
+  __init63() {this.caretBlinkTimer = null}
+  __init64() {this.a11yNeedsReorder = true}
+  __init65() {this.portalRoot = null}
+  __init66() {this.fullViewportElements = []}
+  __init67() {this.normalElements = []}
+  __init68() {this.activeIds = /* @__PURE__ */ new Set()}
+  __init69() {this.activePortalsThisFrame = /* @__PURE__ */ new Set()}
+  __init70() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
+  __init71() {this.portalEntities = /* @__PURE__ */ new Map()}
+  __init72() {this.renderOrderCounter = 0}
+  /**
+   * Monotonic render-frame counter, bumped once per authoritative `render()`
+   * pass. Entities stamp their per-frame world-matrix cache with this value and
+   * {@link Entity.getWorldTransform} trusts that cache only while it still
+   * matches, so a query outside the frame that produced it transparently falls
+   * back to the ancestor walk. Public for the same reason `Entity._getTrig`/
+   * `_setWorldCache` are: it is a cross-class render-internal contract.
+   */
+  __init73() {this.currentFrame = 0}
+  // ── WASM transform backend (invisible accelerator) ──────────────────────────
+  // When `_transformBackend === 'wasm'`, the main render walk sources each
+  // entity's world matrix from an SoA store composed by `_wasm` (see
+  // `renderNode`), instead of composing it in JS. The JS path is the permanent
+  // fallback and the default: a null backend, a non-main renderer, or any entity
+  // absent from the store all fall back to the JS composition, so WASM can only
+  // ever change *how fast* a world matrix is produced, never *what* it is.
+  __init74() {this._wasm = null}
+  __init75() {this._transformBackend = "js"}
+  // Resident store state (Stage 3). The store layout — slot assignment + sibling
+  // runs — depends only on tree TOPOLOGY, so it is rebuilt only when the
+  // structure changes (add/remove/reparent bump `_structureVersion`). Between
+  // rebuilds the per-frame cost is: gather each entity's transform into the
+  // resident wasm input view + run the kernel — no reallocation, no readback.
+  __init76() {this._treeStore = null}
+  __init77() {this._slotEntity = []}
+  // store slot -> entity (also validates slots)
+  __init78() {this._wasmInputs = null}
+  __init79() {this._wasmWorld = null}
+  __init80() {this._structureVersion = 0}
+  __init81() {this._storeStructureVersion = -1}
+  // Cached list of ComputeParticleEntity instances in the tree, keyed by the
+  // structure version it was gathered at. Rebuilt only on a topology change.
+  __init82() {this._computeEntities = []}
+  __init83() {this._computeEntitiesVersion = -1}
+  /** Invalidate the resident WASM store layout; the next wasm-mode frame rebuilds
+   *  it. Called by `Entity.add`/`remove` (topology changes only). */
+  markStructureChanged() {
+    this._structureVersion++;
+  }
+  /** The tree's ComputeParticleEntity instances, cached per structure version so
+   *  a compute-free scene doesn't re-walk the whole tree every frame. */
+  _computeEntitiesFor(version) {
+    if (this._computeEntitiesVersion === version) return this._computeEntities;
+    const list = [];
+    const collect = (node) => {
+      if (node instanceof ComputeParticleEntity) list.push(node);
+      for (const child of node.children) collect(child);
+    };
+    collect(this.root);
+    for (const overlay of this.overlayRoot.children) collect(overlay);
+    this._computeEntities = list;
+    this._computeEntitiesVersion = version;
+    return list;
+  }
+  /** Which backend composes world matrices for the main render walk. */
+  get transformBackend() {
+    return this._transformBackend;
+  }
+  /**
+   * Install (or clear) a WASM transform backend. Passing a backend switches the
+   * main render walk onto it; passing `null` reverts to the JS path. Synchronous
+   * and safe to call between frames — the next `render()` picks it up. Prefer
+   * {@link enableWasmTransforms} for the normal async hot-swap.
+   */
+  setTransformBackend(backend) {
+    this._wasm = backend;
+    this._transformBackend = backend ? "wasm" : "js";
+  }
+  /**
+   * Asynchronously instantiate the WASM transform core and, on success, hot-swap
+   * the render walk onto it. Accepts whatever is convenient at the call site:
+   *
+   * ```ts
+   * // The common case — a bundler-emitted, co-located asset URL:
+   * await scene.enableWasmTransforms(new URL('./vectojs_core.wasm', import.meta.url));
+   * // …or a path string, a Response, or raw bytes you already have:
+   * await scene.enableWasmTransforms('/assets/vectojs_core.wasm');
+   * await scene.enableWasmTransforms(await fetch(url));
+   * await scene.enableWasmTransforms(myUint8Array);
+   * ```
+   *
+   * A URL/Response streams (compiles while it downloads, with a buffered
+   * fallback for a wrong MIME type); raw bytes instantiate directly. The Scene
+   * keeps rendering on the JS path until this resolves, and stays on JS if
+   * instantiation fails (CSP `wasm-unsafe-eval`, unsupported SIMD, corrupt or
+   * missing bytes, a 404) — failure is the default state, not an error path.
+   * Resolves `true` if WASM is now active, `false` if the JS path remains.
+   */
+  async enableWasmTransforms(source) {
+    const isBytes = source instanceof ArrayBuffer || ArrayBuffer.isView(source);
+    const backend = isBytes ? await instantiateAsync(source) : await instantiateStreaming(source);
+    if (!backend) return false;
+    this.setTransformBackend(backend);
+    return true;
+  }
+  // ── WASM hit-test backend (invisible accelerator, G3) ───────────────────────
+  // A separate WASM module instance from the transform backend (each crate
+  // export lives in independent linear memory per instance, so there is no
+  // shared-state hazard in running both) that indexes the main tree's world
+  // AABBs into a dense viewport grid for findEntityAt. The JS depth-first walk
+  // (findHitRecursively) is the permanent fallback: a null backend, a build
+  // that overflows its item budget, or the overlay tree (never indexed — small
+  // and rare, not worth accelerating) all fall through to it, so WASM can only
+  // ever change *how fast* a hit is found, never *which* entity is returned —
+  // every grid candidate is re-confirmed against its own precise
+  // isPointInside before being trusted (see hit-store.ts / hit-backend.ts).
+  __init84() {this._hitWasm = null}
+  // Cache key: which frame + structure version the grid was last (successfully,
+  // non-overflowing) built for. findEntityAt is called ad-hoc (pointer
+  // hover/click), not every frame, so the grid is refreshed lazily on demand
+  // rather than proactively every render() — unlike the transform store, which
+  // every frame's draw depends on.
+  __init85() {this._hitGridFrame = -1}
+  __init86() {this._hitGridOk = false}
+  __init87() {this._hitSlotEntity = []}
+  __init88() {this._hitBoundless = []}
+  /** Which backend answers `findEntityAt` for the main tree. */
+  get hitTestBackend() {
+    return this._hitWasm ? "wasm" : "js";
+  }
+  /** Install (or clear) a WASM hit-test backend directly. Prefer
+   *  {@link enableWasmHitTest} for the normal async hot-swap. */
+  setHitTestBackend(backend) {
+    this._hitWasm = backend;
+    this._hitGridFrame = -1;
+  }
+  /**
+   * Asynchronously instantiate the WASM hit-test core and, on success, hot-swap
+   * `findEntityAt` onto it. Accepts the same source shapes as
+   * {@link enableWasmTransforms} (URL, path string, Response, or raw bytes).
+   * Stays on the JS walk if instantiation fails — failure is the default
+   * state, not an error path. Resolves `true` if WASM is now active.
+   */
+  async enableWasmHitTest(source) {
+    const isBytes = source instanceof ArrayBuffer || ArrayBuffer.isView(source);
+    const backend = isBytes ? await instantiateAsync2(source) : await instantiateStreaming2(source);
+    if (!backend) return false;
+    this.setHitTestBackend(backend);
+    return true;
+  }
+  /**
+   * Refresh the hit-test grid for the CURRENT tree state if it is stale (a
+   * structural or transform change may have happened since the last build —
+   * there is no cheap "nothing moved" shortcut for a spatial index the way
+   * there is for the transform store's topology-only run table, since ANY
+   * entity moving invalidates its AABB, not just add/remove/reparent; the
+   * measured build cost is cheap enough to redo per call). Returns `false`
+   * (grid untrustworthy — caller must use the JS walk) when there is no
+   * backend or the build overflowed its item budget.
+   */
+  _ensureHitGrid() {
+    const backend = this._hitWasm;
+    if (!backend) return false;
+    if (this._hitGridFrame === this.currentFrame) return this._hitGridOk;
+    const gathered = gatherHitAABBs(this.root, this.currentFrame);
+    backend.ensure(gathered.count, this.width, this.height, 64);
+    const view = backend.inputView();
+    view.minx.set(gathered.minx.subarray(0, gathered.count));
+    view.miny.set(gathered.miny.subarray(0, gathered.count));
+    view.maxx.set(gathered.maxx.subarray(0, gathered.count));
+    view.maxy.set(gathered.maxy.subarray(0, gathered.count));
+    const ok = backend.runBuild(gathered.count, this.width, this.height, 64);
+    this._hitSlotEntity = gathered.slotEntity;
+    this._hitBoundless = gathered.boundless;
+    this._hitGridFrame = this.currentFrame;
+    this._hitGridOk = ok;
+    return ok;
+  }
+  /**
+   * `findEntityAt`'s WASM-accelerated path for the main tree. Scans only the
+   * queried cell's candidates (confirming each against its own AABB and precise
+   * `isPointInside`) merged against the (typically empty or tiny) list of
+   * entities with no `getBounds()`, taking whichever confirmed match has the
+   * higher pre-order index — see hit-store.ts for why that is exactly
+   * equivalent to findHitRecursively's topmost-hit priority. Always
+   * conclusive: returns the correct entity or `null`, never "inconclusive".
+   */
+  _findEntityAtWasm(x, y) {
+    const backend = this._hitWasm;
+    const { minx, miny, maxx, maxy } = backend.inputView();
+    let bestIndex = -1;
+    let bestEntity = null;
+    const cell = backend.candidatesAt(x, y);
+    if (cell) {
+      for (let k = cell.length - 1; k >= 0; k--) {
+        const idx = cell[k];
+        if (x < minx[idx] || x > maxx[idx] || y < miny[idx] || y > maxy[idx]) continue;
+        const entity = this._hitSlotEntity[idx];
+        if (_optionalChain([entity, 'optionalAccess', _25 => _25.isPointInside, 'call', _26 => _26(x, y)]) && this.isHitEligible(entity, x, y)) {
+          bestIndex = idx;
+          bestEntity = entity;
+          break;
+        }
+      }
+    }
+    for (const { entity, index } of this._hitBoundless) {
+      if (index > bestIndex && entity.isPointInside(x, y) && this.isHitEligible(entity, x, y)) {
+        bestIndex = index;
+        bestEntity = entity;
+      }
+    }
+    return bestEntity;
+  }
+  // ── WASM batched-animation backend (invisible accelerator, G2) ──────────────
+  // Advances every currently-active SpringDriver/TweenDriver in one WASM call
+  // each (spring_step/tween_step) instead of Entity.tickDrivers()'s per-driver
+  // JS loop. The JS tick loop is the permanent fallback: a null backend, a
+  // driver count below `animDriverGateCount`, or a TweenDriver using a custom
+  // EasingFn (which cannot cross into WASM) all fall through to it — WASM can
+  // only ever change *how* a driver is advanced, never *what* value it lands
+  // on.
+  __init89() {this._animWasm = null}
+  // Entities with at least one active driver, added by Entity._spawnDriver.
+  // Self-pruning: _tickBatchedDrivers drops an entry the first time it visits
+  // an entity whose drivers have since all completed or been removed. This is
+  // what lets the batch pass find its candidates in O(active drivers), not
+  // O(tree size) — the exact mistake G3's first integrated benchmark made.
+  __init90() {this._activeDriverEntities = /* @__PURE__ */ new Set()}
+  // Reused across frames instead of allocating a fresh array + N {entity,prop,
+  // driver} objects every call — the integrated benchmark
+  // (benchmarks/anim-wasm-scene) found that allocation churn was the
+  // dominant integrated cost, not the wasm kernel itself. Parallel arrays,
+  // truncated to the live count after each use so a stale tail slot never
+  // pins a no-longer-active entity/driver in memory.
+  __init91() {this._springEntities = []}
+  __init92() {this._springProps = []}
+  __init93() {this._springDrivers = []}
+  __init94() {this._tweenEntities = []}
+  __init95() {this._tweenProps = []}
+  __init96() {this._tweenDrivers = []}
+  /**
+   * Minimum number of batchable (spring, or named-easing tween) active drivers
+   * before a frame engages the WASM batch path at all; below it, every driver
+   * ticks on the normal JS per-entity path, unmodified.
+   *
+   * Re-measured on the INTEGRATED path (benchmarks/anim-wasm-scene, real
+   * Chrome 150 / Firefox 153, 2026-07-24 — correctness verified 0 mismatches
+   * across all three kinds before any of these numbers were trusted): the
+   * isolated kernel spike's "<100 drivers, wins everywhere" verdict did NOT
+   * survive integration, and neither did the first integrated pass's single
+   * gate-count verdict once broken out by driver kind. On Chrome, spring and
+   * mixed drivers are a real ~1.4–2.3× win from n=128 up through the tested
+   * ceiling of 16384, but pure-tween drivers are a LOSS at n=128 (0.71×,
+   * i.e. ~40% slower than the JS path) and only turn net-positive around
+   * n≈256 (1.52×). A single scalar gate can't be tight for spring/mixed
+   * without occasionally opening early on a tween-heavy scene and making it
+   * slower — 256 is chosen to keep the gate net-positive across all three
+   * kinds rather than optimal for any one of them; a kind-aware gate (see
+   * `_tickBatchedDrivers`'s per-kind arrays, which already separate spring
+   * from tween) would recover the 128–255 spring/mixed win without the
+   * tween regression, but that's a larger change than this measurement pass
+   * covers. On Firefox it is a net loss at every driver count measured, up
+   * to 16384 — not an allocation artifact (confirmed after removing all
+   * per-frame allocation from the gather/scatter path); SpiderMonkey's
+   * wasm-boundary/property-dispatch cost for this shape of call appears to
+   * structurally exceed the saving, at least at the scales tested here.
+   *
+   * 256 is set as a Chrome-oriented default so an app that opts in (this
+   * path is never engaged without an explicit {@link enableWasmAnimBatching}
+   * call) sees the gate open only where it reliably helps on Chromium,
+   * regardless of whether the scene's active drivers are spring, tween, or
+   * a mix of both. Unlike G1 (safe to default on everywhere) and G3 (opt-in,
+   * but a reliable win once its own gate condition holds), G2 has no
+   * threshold that is safe on every engine — raise or lower this per your
+   * own target browser mix and driver-kind distribution, or leave WASM
+   * animation batching disabled entirely on a Firefox-heavy audience.
+   */
+  __init97() {this.animDriverGateCount = 256}
+  /** Which backend advances active property drivers on the current gate
+   *  decision. Reflects only whether a backend is installed — the per-frame
+   *  gate can still choose the JS path even when this reads `'wasm'`. */
+  get animBackend() {
+    return this._animWasm ? "wasm" : "js";
+  }
+  /** Install (or clear) a WASM batched-animation backend directly. Prefer
+   *  {@link enableWasmAnimBatching} for the normal async hot-swap. */
+  setAnimBackend(backend) {
+    this._animWasm = backend;
+  }
+  /**
+   * Asynchronously instantiate the WASM batched-animation core and, on
+   * success, make it available to the per-frame gate (see
+   * {@link animDriverGateCount}). Accepts the same source shapes as
+   * {@link enableWasmTransforms}. Stays on the JS tick loop if instantiation
+   * fails — failure is the default state, not an error path. Resolves `true`
+   * if WASM is now available (not necessarily active every frame).
+   */
+  async enableWasmAnimBatching(source) {
+    const isBytes = source instanceof ArrayBuffer || ArrayBuffer.isView(source);
+    const backend = isBytes ? await instantiateAsync3(source) : await instantiateStreaming3(source);
+    if (!backend) return false;
+    this.setAnimBackend(backend);
+    return true;
+  }
+  // ── WASM particle CPU-sim backend (invisible accelerator, G4) ───────────────
+  // Advances a ComputeParticleEntity's whole buffer in one `particle_step` call
+  // (spring/mouse/explosion/integrate/bounce/life), replacing the per-particle
+  // JS `updateCPU` loop on the GPU-less fallback path. Measured ~2.1-2.5x on
+  // Chrome and ~1.4-2.0x on Firefox including the per-frame AoS<->SoA transpose
+  // (benchmarks/particle-wasm). f32 (matches the WGSL shader), bit-identical to
+  // a JS f32 reference oracle; updateCPU (f64) stays the permanent fallback when
+  // no backend is installed or a scene runs on WebGPU.
+  __init98() {this._particleWasm = null}
+  /** Which backend runs the CPU particle simulation. Reflects only whether a
+   *  backend is installed (the WebGPU compute path, when active, is used first
+   *  regardless). */
+  get particleSimBackend() {
+    return this._particleWasm ? "wasm" : "js";
+  }
+  /** Install (or clear) a WASM particle backend directly. Prefer
+   *  {@link enableWasmParticles} for the normal async hot-swap. */
+  setParticleBackend(backend) {
+    this._particleWasm = backend;
+  }
+  /**
+   * Asynchronously instantiate the WASM particle core and, on success, use it
+   * for the CPU particle fallback. Accepts the same source shapes as
+   * {@link enableWasmTransforms}. Stays on the JS `updateCPU` path if
+   * instantiation fails — failure is the default state, not an error path.
+   * Resolves `true` if WASM is now active.
+   */
+  async enableWasmParticles(source) {
+    const isBytes = source instanceof ArrayBuffer || ArrayBuffer.isView(source);
+    const backend = isBytes ? await instantiateAsync4(source) : await instantiateStreaming4(source);
+    if (!backend) return false;
+    this.setParticleBackend(backend);
+    return true;
+  }
+  /** Internal: called by `Entity._spawnDriver` when a new property driver
+   *  starts. See {@link _activeDriverEntities}. */
+  _registerActiveDriverEntity(entity) {
+    this._activeDriverEntities.add(entity);
+  }
+  /**
+   * Drop `entity` and its whole subtree from the batched-driver candidate set.
+   * Called by {@link remove}/{@link hideOverlay} on detach: without this a
+   * removed-but-still-animating entity stays pinned in the Set (a leak) and its
+   * drivers keep ticking every frame even though it is off-tree. If it is later
+   * re-added, {@link registerActiveDriverSubtree} re-registers any node that
+   * still has live drivers, so the motion resumes.
+   */
+  unregisterActiveDriverSubtree(entity) {
+    if (this._activeDriverEntities.size === 0) return;
+    const stack = [entity];
+    while (stack.length > 0) {
+      const node = stack.pop();
+      this._activeDriverEntities.delete(node);
+      for (const child of node.children) stack.push(child);
+    }
+  }
+  /**
+   * Re-register every node in `entity`'s subtree that still has live property
+   * drivers. Called by {@link add}/{@link showOverlay} so re-attaching a subtree
+   * that was removed mid-animation resumes its batched drivers (they were
+   * dropped from the candidate set on removal, but the driver state still lives
+   * on each entity).
+   */
+  registerActiveDriverSubtree(entity) {
+    const stack = [entity];
+    while (stack.length > 0) {
+      const node = stack.pop();
+      const entries = node._driverEntries();
+      if (entries && entries.size > 0) this._activeDriverEntities.add(node);
+      for (const child of node.children) stack.push(child);
+    }
+  }
+  /**
+   * Advance every registered entity's active drivers for this frame, batching
+   * whichever are batchable (`SpringDriver`; `TweenDriver` with a named
+   * easing) through one WASM call each when the driver-count gate is open, and
+   * ticking the rest (a `TweenDriver` using a custom `EasingFn`) directly in
+   * JS regardless of the gate. A "claimed" entity must have ALL its drivers
+   * advanced here so it can be safely stamped `_driversTickedFrame` — leaving
+   * one unclaimed would silently stall it, since `tickDrivers()` skips the
+   * whole entity once stamped.
+   *
+   * Must run before ANY entity's `update()`/`tickDrivers()` this frame (see
+   * the call site in {@link render}) — the same ordering constraint G1 Stage 4
+   * discovered: a value this pass writes must be final before anything reads
+   * it, including the JS-mode interleaved walk and the WASM-mode transform
+   * pre-pass.
+   */
+  _tickBatchedDrivers(dt) {
+    if (this._activeDriverEntities.size === 0) return;
+    let batchable = 0;
+    for (const entity of this._activeDriverEntities) {
+      const entries = entity._driverEntries();
+      if (!entries || entries.size === 0) {
+        this._activeDriverEntities.delete(entity);
+        continue;
+      }
+      for (const driver of entries.values()) {
+        if (driver instanceof _animation.SpringDriver) batchable++;
+        else if (driver instanceof _animation.TweenDriver && driver.wasmEasingId !== null) batchable++;
+      }
+    }
+    const backend = this._animWasm;
+    if (!backend || batchable < this.animDriverGateCount) return;
+    const sE = this._springEntities;
+    const sP = this._springProps;
+    const sD = this._springDrivers;
+    const tE = this._tweenEntities;
+    const tP = this._tweenProps;
+    const tD = this._tweenDrivers;
+    let springCount = 0;
+    let tweenCount = 0;
+    for (const entity of this._activeDriverEntities) {
+      const entries = entity._driverEntries();
+      for (const [prop, driver] of entries) {
+        if (driver instanceof _animation.SpringDriver) {
+          sE[springCount] = entity;
+          sP[springCount] = prop;
+          sD[springCount] = driver;
+          springCount++;
+        } else if (driver instanceof _animation.TweenDriver && driver.wasmEasingId !== null) {
+          tE[tweenCount] = entity;
+          tP[tweenCount] = prop;
+          tD[tweenCount] = driver;
+          tweenCount++;
+        } else {
+          driver.tick(dt);
+          entity._applyDriverTick(prop, driver);
+        }
+      }
+      entity._driversTickedFrame = this.currentFrame;
+    }
+    sE.length = springCount;
+    sP.length = springCount;
+    sD.length = springCount;
+    tE.length = tweenCount;
+    tP.length = tweenCount;
+    tD.length = tweenCount;
+    backend.ensure(springCount, tweenCount);
+    if (springCount > 0) {
+      const sv = backend.springView();
+      for (let i = 0; i < springCount; i++) {
+        const phys = sD[i].physics;
+        sv.val[i] = phys.value;
+        sv.target[i] = phys.target;
+        sv.vel[i] = phys.velocity;
+        sv.stiff[i] = phys.stiffness;
+        sv.damp[i] = phys.damping;
+        sv.mass[i] = phys.mass;
+      }
+      backend.stepSprings(dt, springCount);
+      for (let i = 0; i < springCount; i++) sD[i].syncExternal(sv.val[i], sv.vel[i]);
+    }
+    if (tweenCount > 0) {
+      const tv = backend.tweenView();
+      for (let i = 0; i < tweenCount; i++) {
+        const d = tD[i];
+        tv.from[i] = d.fromValue;
+        tv.to[i] = d.target;
+        tv.elapsed[i] = d.elapsedMs;
+        tv.dur[i] = d.durationMs;
+        tv.delay[i] = d.delayMs;
+        tv.ease[i] = d.wasmEasingId;
+      }
+      backend.stepTweens(dt, tweenCount);
+      for (let i = 0; i < tweenCount; i++) tD[i].syncExternal(tv.val[i], tv.elapsed[i]);
+    }
+    for (let i = 0; i < springCount; i++) sE[i]._applyDriverTick(sP[i], sD[i]);
+    for (let i = 0; i < tweenCount; i++) tE[i]._applyDriverTick(tP[i], tD[i]);
+  }
+  /**
+   * Compose the whole main tree's world matrices through the resident WASM store
+   * and return the world-matrix views for the render walk to read. Rebuilds the
+   * store layout (slots + runs) only when the tree structure changed since the
+   * last rebuild; otherwise it just gathers current transforms into the resident
+   * input view and runs the kernel. Returns `null` if there is no backend.
+   */
+  _syncWasmStore() {
+    const backend = this._wasm;
+    if (!backend) return null;
+    if (this._treeStore === null || this._storeStructureVersion !== this._structureVersion) {
+      const built = buildTreeStore(this.root);
+      const slotEntity2 = Array.from({ length: built.store.count });
+      for (const [entity, slot] of built.indexOf) {
+        slotEntity2[slot] = entity;
+        entity._storeSlot = slot;
+      }
+      backend.uploadRuns(built.store);
+      this._treeStore = built.store;
+      this._slotEntity = slotEntity2;
+      this._wasmInputs = backend.inputView();
+      this._wasmWorld = backend.worldView();
+      this._storeStructureVersion = this._structureVersion;
+    }
+    const inp = this._wasmInputs;
+    const slotEntity = this._slotEntity;
+    for (let slot = 1; slot < slotEntity.length; slot++) {
+      const e = slotEntity[slot];
+      inp.x[slot] = e.x;
+      inp.y[slot] = e.y;
+      inp.sx[slot] = e.scaleX;
+      inp.sy[slot] = e.scaleY;
+      const trig = e._getTrig();
+      inp.cos[slot] = trig.cos;
+      inp.sin[slot] = trig.sin;
+      inp.opacity[slot] = e.opacity;
+    }
+    backend.runKernel("simd");
+    return this._wasmWorld;
+  }
   /**
    * Authoritative paint order for semantic nodes discovered during the main
    * render. A node may not have a DOM projection until the following a11y
    * sync, so retaining the order prevents a newly opened overlay from spending
    * its first frame below previously projected controls.
    */
-  __init49() {this.a11yRenderOrders = /* @__PURE__ */ new Map()}
+  __init99() {this.a11yRenderOrders = /* @__PURE__ */ new Map()}
   // Optional WebGL point-cloud layer (see SceneOptions.pointBackend).
-  __init50() {this.pointRenderer = null}
-  __init51() {this.glCanvas = null}
+  __init100() {this.pointRenderer = null}
+  __init101() {this.glCanvas = null}
+  __init102() {this.glContextLostHandler = null}
+  __init103() {this.glContextRestoredHandler = null}
   
   
   
-  __init52() {this.disableWindowResize = false}
+  __init104() {this.disableWindowResize = false}
   /** See {@link SceneOptions.maxDPR}. `undefined` = uncapped (real DPR). */
   
   // WebGPU properties
-  __init53() {this.destroyed = false}
-  __init54() {this.device = null}
-  __init55() {this.deviceLost = false}
-  __init56() {this.particleBackend = "auto"}
-  __init57() {this._webgpuDisabled = false}
+  __init105() {this.destroyed = false}
+  __init106() {this.device = null}
+  __init107() {this.deviceLost = false}
+  __init108() {this.particleBackend = "auto"}
+  __init109() {this._webgpuDisabled = false}
   get webgpuDisabled() {
     return this._webgpuDisabled || this.particleBackend === "cpu";
   }
   set webgpuDisabled(value) {
     this._webgpuDisabled = value;
   }
-  __init58() {this.recoveryTimerId = null}
-  __init59() {this.manager = null}
-  __init60() {this.initializingWebGPU = false}
-  __init61() {this.gpuCanvas = null}
-  __init62() {this.gpuContext = null}
+  __init110() {this.recoveryTimerId = null}
+  __init111() {this.manager = null}
+  __init112() {this.initializingWebGPU = false}
+  __init113() {this.gpuCanvas = null}
+  __init114() {this.gpuContext = null}
   /** True while the GPU canvas holds a presented particle frame (needs clearing when they leave). */
-  __init63() {this.gpuHasContent = false}
-  __init64() {this.mouseX = -9999}
-  __init65() {this.mouseY = -9999}
-  __init66() {this.pointerMoveListener = null}
-  __init67() {this.pointerLeaveListener = null}
-  __init68() {this.hasWarnedZeroSize = false}
-  __init69() {this.fontLoadHandler = null}
+  __init115() {this.gpuHasContent = false}
+  __init116() {this.mouseX = -9999}
+  __init117() {this.mouseY = -9999}
+  __init118() {this.pointerMoveListener = null}
+  __init119() {this.pointerLeaveListener = null}
+  /** Element the pointer listeners are bound to (parent container if present,
+   *  else the canvas). Stored so `destroy()` detaches from the same element. */
+  __init120() {this.pointerEventTarget = null}
+  __init121() {this.hasWarnedZeroSize = false}
+  __init122() {this.fontLoadHandler = null}
   // ── Dev-mode warning infrastructure ──────────────────────────────
   //
   // Enable with `Scene.devMode = true` or by setting `globalThis.__DEV__`.
@@ -798,16 +2143,16 @@ var Scene = (_class2 = class _Scene {
   // Checks run once every ~120 frames (~2s at 60fps) to keep overhead
   // negligible even when dev mode is on.
   /** Toggle development-mode runtime warnings globally. */
-  static __initStatic3() {this.devMode = false}
+  static __initStatic4() {this.devMode = false}
   static _devModeDetected() {
     if (_Scene.devMode) return true;
     const gp = typeof globalThis !== "undefined" ? globalThis : void 0;
-    if (_optionalChain([gp, 'optionalAccess', _23 => _23.__DEV__])) return true;
-    if (_optionalChain([gp, 'optionalAccess', _24 => _24.process, 'optionalAccess', _25 => _25.env, 'optionalAccess', _26 => _26.NODE_ENV]) === "development") return true;
+    if (_optionalChain([gp, 'optionalAccess', _27 => _27.__DEV__])) return true;
+    if (_optionalChain([gp, 'optionalAccess', _28 => _28.process, 'optionalAccess', _29 => _29.env, 'optionalAccess', _30 => _30.NODE_ENV]) === "development") return true;
     return false;
   }
   
-  __init70() {this._devFrameCount = 0}
+  __init123() {this._devFrameCount = 0}
   _devWarn(message) {
     if (!this._devActive) return;
     console.warn(`[vectojs/dev] ${message}`);
@@ -834,9 +2179,9 @@ var Scene = (_class2 = class _Scene {
     let checked = 0;
     const walkProjections = (node) => {
       if (checked > 10) return;
-      const proj = _optionalChain([node, 'access', _27 => _27.getContentProjection, 'optionalCall', _28 => _28()]);
-      if (_optionalChain([proj, 'optionalAccess', _29 => _29.text]) && proj.selectable !== false) {
-        const el = _optionalChain([this, 'access', _30 => _30.contentElements, 'optionalAccess', _31 => _31.get, 'call', _32 => _32(node.id)]);
+      const proj = _optionalChain([node, 'access', _31 => _31.getContentProjection, 'optionalCall', _32 => _32()]);
+      if (_optionalChain([proj, 'optionalAccess', _33 => _33.text]) && proj.selectable !== false) {
+        const el = _optionalChain([this, 'access', _34 => _34.contentElements, 'optionalAccess', _35 => _35.get, 'call', _36 => _36(node.id)]);
         if (el) {
           const projectedText = el.textContent || "";
           if (projectedText !== "" && projectedText !== proj.text) {
@@ -851,14 +2196,14 @@ var Scene = (_class2 = class _Scene {
     };
     walkProjections(this.root);
   }
-  constructor(canvas, options = {}) {;_class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);_class2.prototype.__init19.call(this);_class2.prototype.__init20.call(this);_class2.prototype.__init21.call(this);_class2.prototype.__init22.call(this);_class2.prototype.__init23.call(this);_class2.prototype.__init24.call(this);_class2.prototype.__init25.call(this);_class2.prototype.__init26.call(this);_class2.prototype.__init27.call(this);_class2.prototype.__init28.call(this);_class2.prototype.__init29.call(this);_class2.prototype.__init30.call(this);_class2.prototype.__init31.call(this);_class2.prototype.__init32.call(this);_class2.prototype.__init33.call(this);_class2.prototype.__init34.call(this);_class2.prototype.__init35.call(this);_class2.prototype.__init36.call(this);_class2.prototype.__init37.call(this);_class2.prototype.__init38.call(this);_class2.prototype.__init39.call(this);_class2.prototype.__init40.call(this);_class2.prototype.__init41.call(this);_class2.prototype.__init42.call(this);_class2.prototype.__init43.call(this);_class2.prototype.__init44.call(this);_class2.prototype.__init45.call(this);_class2.prototype.__init46.call(this);_class2.prototype.__init47.call(this);_class2.prototype.__init48.call(this);_class2.prototype.__init49.call(this);_class2.prototype.__init50.call(this);_class2.prototype.__init51.call(this);_class2.prototype.__init52.call(this);_class2.prototype.__init53.call(this);_class2.prototype.__init54.call(this);_class2.prototype.__init55.call(this);_class2.prototype.__init56.call(this);_class2.prototype.__init57.call(this);_class2.prototype.__init58.call(this);_class2.prototype.__init59.call(this);_class2.prototype.__init60.call(this);_class2.prototype.__init61.call(this);_class2.prototype.__init62.call(this);_class2.prototype.__init63.call(this);_class2.prototype.__init64.call(this);_class2.prototype.__init65.call(this);_class2.prototype.__init66.call(this);_class2.prototype.__init67.call(this);_class2.prototype.__init68.call(this);_class2.prototype.__init69.call(this);_class2.prototype.__init70.call(this);
+  constructor(canvas, options = {}) {;_class6.prototype.__init20.call(this);_class6.prototype.__init21.call(this);_class6.prototype.__init22.call(this);_class6.prototype.__init23.call(this);_class6.prototype.__init24.call(this);_class6.prototype.__init25.call(this);_class6.prototype.__init26.call(this);_class6.prototype.__init27.call(this);_class6.prototype.__init28.call(this);_class6.prototype.__init29.call(this);_class6.prototype.__init30.call(this);_class6.prototype.__init31.call(this);_class6.prototype.__init32.call(this);_class6.prototype.__init33.call(this);_class6.prototype.__init34.call(this);_class6.prototype.__init35.call(this);_class6.prototype.__init36.call(this);_class6.prototype.__init37.call(this);_class6.prototype.__init38.call(this);_class6.prototype.__init39.call(this);_class6.prototype.__init40.call(this);_class6.prototype.__init41.call(this);_class6.prototype.__init42.call(this);_class6.prototype.__init43.call(this);_class6.prototype.__init44.call(this);_class6.prototype.__init45.call(this);_class6.prototype.__init46.call(this);_class6.prototype.__init47.call(this);_class6.prototype.__init48.call(this);_class6.prototype.__init49.call(this);_class6.prototype.__init50.call(this);_class6.prototype.__init51.call(this);_class6.prototype.__init52.call(this);_class6.prototype.__init53.call(this);_class6.prototype.__init54.call(this);_class6.prototype.__init55.call(this);_class6.prototype.__init56.call(this);_class6.prototype.__init57.call(this);_class6.prototype.__init58.call(this);_class6.prototype.__init59.call(this);_class6.prototype.__init60.call(this);_class6.prototype.__init61.call(this);_class6.prototype.__init62.call(this);_class6.prototype.__init63.call(this);_class6.prototype.__init64.call(this);_class6.prototype.__init65.call(this);_class6.prototype.__init66.call(this);_class6.prototype.__init67.call(this);_class6.prototype.__init68.call(this);_class6.prototype.__init69.call(this);_class6.prototype.__init70.call(this);_class6.prototype.__init71.call(this);_class6.prototype.__init72.call(this);_class6.prototype.__init73.call(this);_class6.prototype.__init74.call(this);_class6.prototype.__init75.call(this);_class6.prototype.__init76.call(this);_class6.prototype.__init77.call(this);_class6.prototype.__init78.call(this);_class6.prototype.__init79.call(this);_class6.prototype.__init80.call(this);_class6.prototype.__init81.call(this);_class6.prototype.__init82.call(this);_class6.prototype.__init83.call(this);_class6.prototype.__init84.call(this);_class6.prototype.__init85.call(this);_class6.prototype.__init86.call(this);_class6.prototype.__init87.call(this);_class6.prototype.__init88.call(this);_class6.prototype.__init89.call(this);_class6.prototype.__init90.call(this);_class6.prototype.__init91.call(this);_class6.prototype.__init92.call(this);_class6.prototype.__init93.call(this);_class6.prototype.__init94.call(this);_class6.prototype.__init95.call(this);_class6.prototype.__init96.call(this);_class6.prototype.__init97.call(this);_class6.prototype.__init98.call(this);_class6.prototype.__init99.call(this);_class6.prototype.__init100.call(this);_class6.prototype.__init101.call(this);_class6.prototype.__init102.call(this);_class6.prototype.__init103.call(this);_class6.prototype.__init104.call(this);_class6.prototype.__init105.call(this);_class6.prototype.__init106.call(this);_class6.prototype.__init107.call(this);_class6.prototype.__init108.call(this);_class6.prototype.__init109.call(this);_class6.prototype.__init110.call(this);_class6.prototype.__init111.call(this);_class6.prototype.__init112.call(this);_class6.prototype.__init113.call(this);_class6.prototype.__init114.call(this);_class6.prototype.__init115.call(this);_class6.prototype.__init116.call(this);_class6.prototype.__init117.call(this);_class6.prototype.__init118.call(this);_class6.prototype.__init119.call(this);_class6.prototype.__init120.call(this);_class6.prototype.__init121.call(this);_class6.prototype.__init122.call(this);_class6.prototype.__init123.call(this);
     this.canvas = canvas;
     this.debugA11y = _nullishCoalesce(options.debugA11y, () => ( false));
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
     this.maxDPR = options.maxDPR;
     if (this.disableWindowResize) {
-      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _33 => _33.style, 'optionalAccess', _34 => _34.width]));
-      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _35 => _35.style, 'optionalAccess', _36 => _36.height]));
+      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _37 => _37.style, 'optionalAccess', _38 => _38.width]));
+      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _39 => _39.style, 'optionalAccess', _40 => _40.height]));
       this.width = _nullishCoalesce(styleWidth, () => ( (canvas.width || canvas.clientWidth || 0)));
       this.height = _nullishCoalesce(styleHeight, () => ( (canvas.height || canvas.clientHeight || 0)));
     } else {
@@ -866,7 +2211,7 @@ var Scene = (_class2 = class _Scene {
       this.height = typeof window !== "undefined" ? window.innerHeight : canvas.clientHeight || canvas.height || 600;
     }
     const globalProcess = typeof globalThis !== "undefined" ? globalThis.process : void 0;
-    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _37 => _37.env, 'optionalAccess', _38 => _38.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _39 => _39.env, 'optionalAccess', _40 => _40.VITEST]) === "true");
+    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _41 => _41.env, 'optionalAccess', _42 => _42.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _43 => _43.env, 'optionalAccess', _44 => _44.VITEST]) === "true");
     this.maxFPS = _nullishCoalesce(options.maxFPS, () => ( (isTest ? 0 : 60)));
     this.respectReducedMotion = _nullishCoalesce(options.respectReducedMotion, () => ( true));
     this.autoThrottle = _nullishCoalesce(options.autoThrottle, () => ( true));
@@ -874,9 +2219,15 @@ var Scene = (_class2 = class _Scene {
     this.a11ySyncInterval = _nullishCoalesce(options.a11ySyncInterval, () => ( 0));
     this.contentProjectionEnabled = _nullishCoalesce(options.contentProjection, () => ( true));
     this.contentProjectionMargin = options.contentProjectionMargin;
+    this.readingDirection = _nullishCoalesce(options.readingDirection, () => ( "ltr"));
     this._devActive = _Scene._devModeDetected();
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
-    this.root = new class RootEntity extends _chunk2Z23LTH3js.Entity {
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+      this.forcedColorsQuery = window.matchMedia("(forced-colors: active)");
+      this.forcedColorsChangeHandler = () => this.markDirty();
+      _optionalChain([this, 'access', _45 => _45.forcedColorsQuery, 'access', _46 => _46.addEventListener, 'optionalCall', _47 => _47("change", this.forcedColorsChangeHandler)]);
+    }
+    this.root = new class RootEntity extends _chunkDUYB4GX4js.Entity {
       isPointInside() {
         return false;
       }
@@ -885,7 +2236,7 @@ var Scene = (_class2 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunk2Z23LTH3js.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkDUYB4GX4js.Entity {
       isPointInside() {
         return false;
       }
@@ -896,12 +2247,16 @@ var Scene = (_class2 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkBEUIB3U7js.CanvasRenderer)(
+      this.renderer = new (0, _chunkIYPLG4Z4js.CanvasRenderer)(
         canvas,
         this.disableWindowResize ? { width: this.width, height: this.height } : void 0,
         this.maxDPR
       );
     }
+    _optionalChain([this, 'access', _48 => _48.renderer, 'access', _49 => _49.onContextRestored, 'optionalCall', _50 => _50(() => {
+      this.markDirty();
+      if (_optionalChain([this, 'access', _51 => _51.renderer, 'access', _52 => _52.isContextLost, 'optionalCall', _53 => _53()]) !== true) this.render(this.renderer);
+    })]);
     if (typeof document !== "undefined") {
       this.a11yRoot = document.createElement("div");
       this.a11yRoot.style.position = "absolute";
@@ -913,6 +2268,15 @@ var Scene = (_class2 = class _Scene {
       this.a11yRoot.style.overflow = "hidden";
       this.a11yRoot.style.zIndex = "10";
       this.a11yRoot.style.userSelect = "text";
+      this.focusSentinel = document.createElement("div");
+      this.focusSentinel.setAttribute("data-vecto-focus-sentinel", "");
+      this.focusSentinel.tabIndex = -1;
+      this.focusSentinel.style.position = "absolute";
+      this.focusSentinel.style.width = "0";
+      this.focusSentinel.style.height = "0";
+      this.focusSentinel.style.outline = "none";
+      this.focusSentinel.style.overflow = "hidden";
+      this.a11yRoot.appendChild(this.focusSentinel);
       this.a11yRoot.addEventListener("mousedown", (e) => {
         if (e.button !== 0) return;
         const target = e.target;
@@ -1029,6 +2393,8 @@ var Scene = (_class2 = class _Scene {
         pr.resize(this.width, this.height);
         this.glCanvas = gl;
         this.pointRenderer = pr;
+        this._overlayGeometry = null;
+        this.setupGLContextRecovery(gl);
       } else {
         gl.remove();
       }
@@ -1038,7 +2404,7 @@ var Scene = (_class2 = class _Scene {
     };
     if (typeof document !== "undefined" && document.fonts) {
       this.fontLoadHandler = () => {
-        _chunk2Z23LTH3js.clearCssLineBoxMetrics.call(void 0, );
+        _text.clearCssLineBoxMetrics.call(void 0, );
         this.contentFontEpoch++;
         this.markDirty();
       };
@@ -1047,6 +2413,61 @@ var Scene = (_class2 = class _Scene {
     }
     this.setupEvents();
   }
+  /**
+   * Arm a `(resolution: Ndppx)` media query for the current devicePixelRatio and
+   * re-apply the canvas scale when it changes. Such a query only fires when the
+   * DPR leaves its exact value, so on each change the old query is detached and
+   * a fresh one is armed for the new DPR. Re-runs `resize(width, height)` (which
+   * re-scales the backing store via the renderer) so text/vectors stay crisp
+   * after a monitor move or zoom. No-op without `matchMedia`.
+   */
+  watchDevicePixelRatio() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    if (this.dprMediaQuery && this.dprChangeHandler) {
+      _optionalChain([this, 'access', _54 => _54.dprMediaQuery, 'access', _55 => _55.removeEventListener, 'optionalCall', _56 => _56("change", this.dprChangeHandler)]);
+    }
+    const dpr = window.devicePixelRatio || 1;
+    const query = window.matchMedia(`(resolution: ${dpr}dppx)`);
+    const handler = () => {
+      this.resize(this.width, this.height);
+      this.watchDevicePixelRatio();
+    };
+    _optionalChain([query, 'access', _57 => _57.addEventListener, 'optionalCall', _58 => _58("change", handler)]);
+    this.dprMediaQuery = query;
+    this.dprChangeHandler = handler;
+  }
+  /**
+   * Recover the WebGL point layer from a GPU context loss (driver TDR reset,
+   * tab backgrounded on mobile, GPU switch). Two things are required:
+   *
+   *  1. The `webglcontextlost` handler MUST call `preventDefault()`, or the
+   *     browser never fires `webglcontextrestored` and the layer is blank
+   *     forever. While lost, the old renderer's GL calls are silently ignored,
+   *     so we drop it and the render loop simply skips the point layer.
+   *  2. On `webglcontextrestored`, all GL objects (programs, buffers, textures)
+   *     are gone, so we rebuild the renderer from scratch via `Scene.webglCreator`
+   *     on the same canvas, restore DPR/size, and repaint.
+   */
+  setupGLContextRecovery(gl) {
+    if (typeof gl.addEventListener !== "function") return;
+    this.glContextLostHandler = (e) => {
+      e.preventDefault();
+      _optionalChain([this, 'access', _59 => _59.pointRenderer, 'optionalAccess', _60 => _60.destroy, 'call', _61 => _61()]);
+      this.pointRenderer = null;
+    };
+    this.glContextRestoredHandler = () => {
+      if (this.destroyed || !this.glCanvas) return;
+      const pr = _Scene.webglCreator ? _Scene.webglCreator(this.glCanvas) : null;
+      if (pr) {
+        pr.maxDPR = this.maxDPR;
+        pr.resize(this.width, this.height);
+        this.pointRenderer = pr;
+        this.markDirty();
+      }
+    };
+    gl.addEventListener("webglcontextlost", this.glContextLostHandler);
+    gl.addEventListener("webglcontextrestored", this.glContextRestoredHandler);
+  }
   endContentSelectionDrag() {
     this.blankRegionSelectionDrag = false;
     this.contentSelectionAnchor = null;
@@ -1054,10 +2475,57 @@ var Scene = (_class2 = class _Scene {
   }
   releaseContentSelectionForRebuild(el) {
     const selection = typeof window !== "undefined" && typeof window.getSelection === "function" ? window.getSelection() : null;
-    const ownsSelection = this.contentSelectionAnchor && el.contains(this.contentSelectionAnchor.node) || (_optionalChain([selection, 'optionalAccess', _41 => _41.anchorNode]) ? el.contains(selection.anchorNode) : false) || (_optionalChain([selection, 'optionalAccess', _42 => _42.focusNode]) ? el.contains(selection.focusNode) : false);
+    const ownsSelection = this.contentSelectionAnchor && el.contains(this.contentSelectionAnchor.node) || (_optionalChain([selection, 'optionalAccess', _62 => _62.anchorNode]) ? el.contains(selection.anchorNode) : false) || (_optionalChain([selection, 'optionalAccess', _63 => _63.focusNode]) ? el.contains(selection.focusNode) : false);
     if (!ownsSelection) return;
     this.endContentSelectionDrag();
-    _optionalChain([selection, 'optionalAccess', _43 => _43.removeAllRanges, 'call', _44 => _44()]);
+    _optionalChain([selection, 'optionalAccess', _64 => _64.removeAllRanges, 'call', _65 => _65()]);
+  }
+  /**
+   * Rebuild a content-projection element's DOM (`rebuild`) while preserving a
+   * text selection the user made inside it. A streaming message replaces its
+   * projection children on every appended chunk; without this, a selection in
+   * the UNCHANGED prefix is wiped on each frame ("can't select text in a
+   * message still receiving tokens"). We snapshot the selection's anchor/focus
+   * as linear character offsets within `el` before the rebuild and re-resolve
+   * them against the new DOM after, clamped to the new text length.
+   *
+   * Only fires when `el` owns the current selection and there is no active drag
+   * (mid-drag the browser is authoritative). The virtualization case — where
+   * `el` itself is removed from the DOM — is out of scope here (the node is
+   * genuinely freed; the browser clears the selection and there is nothing to
+   * restore against).
+   */
+  preserveContentSelectionAcrossRebuild(el, rebuild) {
+    const selection = typeof window !== "undefined" && typeof window.getSelection === "function" ? window.getSelection() : null;
+    const owns = !!selection && !this.blankRegionSelectionDrag && ((selection.anchorNode ? el.contains(selection.anchorNode) : false) || (selection.focusNode ? el.contains(selection.focusNode) : false));
+    if (!owns || !selection.anchorNode || !selection.focusNode) {
+      this.releaseContentSelectionForRebuild(el);
+      rebuild();
+      return;
+    }
+    const anchorNode = selection.anchorNode;
+    const focusNode = selection.focusNode;
+    const anchorOffset = anchorNode instanceof Text ? projectionAbsoluteOffset(el, {
+      node: anchorNode,
+      offset: selection.anchorOffset
+    }) : null;
+    const focusOffset = focusNode instanceof Text ? projectionAbsoluteOffset(el, {
+      node: focusNode,
+      offset: selection.focusOffset
+    }) : null;
+    this.endContentSelectionDrag();
+    selection.removeAllRanges();
+    rebuild();
+    if (anchorOffset === null || focusOffset === null) return;
+    const textLen = (_nullishCoalesce(el.textContent, () => ( ""))).length;
+    if (anchorOffset > textLen || focusOffset > textLen) return;
+    const anchor = projectionCaretAt(el, anchorOffset, "forward");
+    const focus = projectionCaretAt(el, focusOffset, "backward");
+    if (!anchor || !focus) return;
+    try {
+      selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+    } catch (e17) {
+    }
   }
   /**
    * Expose the underlying {@link IRenderer} for advanced direct-draw operations.
@@ -1069,7 +2537,7 @@ var Scene = (_class2 = class _Scene {
   }
   /** Convert browser viewport coordinates into this Scene's logical coordinates. */
   clientToScene(clientX, clientY) {
-    const rect = _optionalChain([this, 'access', _45 => _45.canvas, 'access', _46 => _46.getBoundingClientRect, 'optionalCall', _47 => _47()]);
+    const rect = _optionalChain([this, 'access', _66 => _66.canvas, 'access', _67 => _67.getBoundingClientRect, 'optionalCall', _68 => _68()]);
     if (!rect) return { x: clientX, y: clientY };
     const cssWidth = rect.width || this.canvas.clientWidth || this.width;
     const cssHeight = rect.height || this.canvas.clientHeight || this.height;
@@ -1087,6 +2555,7 @@ var Scene = (_class2 = class _Scene {
    */
   add(entity) {
     this.root.add(entity);
+    this.registerActiveDriverSubtree(entity);
     return this;
   }
   clearContentGridState(entityId, el) {
@@ -1095,7 +2564,7 @@ var Scene = (_class2 = class _Scene {
       cancelAnimationFrame(calibrationFrame);
     }
     this.contentGridCalibrationFrames.delete(entityId);
-    _optionalChain([this, 'access', _48 => _48.contentGridCalibrationProbes, 'access', _49 => _49.get, 'call', _50 => _50(entityId), 'optionalAccess', _51 => _51.remove, 'call', _52 => _52()]);
+    _optionalChain([this, 'access', _69 => _69.contentGridCalibrationProbes, 'access', _70 => _70.get, 'call', _71 => _71(entityId), 'optionalAccess', _72 => _72.remove, 'call', _73 => _73()]);
     this.contentGridCalibrationProbes.delete(entityId);
     delete el.dataset.vectoGridCalibrationPending;
     delete el.dataset.vectoGridCalibration;
@@ -1109,6 +2578,7 @@ var Scene = (_class2 = class _Scene {
   }
   removeA11yRecursively(node) {
     if (node.isDOMPortal) {
+      node.releaseDOMBindings();
       node.domElement.remove();
       this.portalEntities.delete(node.id);
       this.activePortalsThisFrame.delete(node.id);
@@ -1130,6 +2600,11 @@ var Scene = (_class2 = class _Scene {
           this.caretBlinkTimer = null;
         }
       }
+      if (this.hoveredA11yElements.has(el)) {
+        this.hoveredA11yElements.delete(el);
+        node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("pointerleave", node, void 0, false));
+      }
+      this.preserveFocusOnRemoval(el);
       el.remove();
       this.a11yElements.delete(node.id);
       this.a11yNeedsReorder = true;
@@ -1138,6 +2613,18 @@ var Scene = (_class2 = class _Scene {
       this.removeA11yRecursively(child);
     }
   }
+  /**
+   * If `el` is about to be removed from the DOM while it holds browser focus,
+   * move focus to the a11y focus sentinel first. Removing the active element
+   * otherwise drops focus to `<body>`, which pulls a screen reader out of the
+   * scene's a11y region and back to the top of the page — the classic
+   * "lost my place on scroll/stream" bug for virtualized/recycled controls.
+   */
+  preserveFocusOnRemoval(el) {
+    if (!this.focusSentinel || typeof document === "undefined") return;
+    if (document.activeElement !== el) return;
+    this.focusSentinel.focus({ preventScroll: true });
+  }
   /**
    * Remove a top-level entity from the scene graph and clean up its
    * accessibility shadow elements recursively.
@@ -1148,6 +2635,7 @@ var Scene = (_class2 = class _Scene {
   remove(entity) {
     this.root.remove(entity);
     this.removeA11yRecursively(entity);
+    this.unregisterActiveDriverSubtree(entity);
     return this;
   }
   /**
@@ -1167,6 +2655,7 @@ var Scene = (_class2 = class _Scene {
    */
   showOverlay(overlay) {
     this.overlayRoot.add(overlay);
+    this.registerActiveDriverSubtree(overlay);
     this.markDirty();
   }
   /**
@@ -1175,10 +2664,10 @@ var Scene = (_class2 = class _Scene {
   hideOverlay(overlay) {
     this.overlayRoot.remove(overlay);
     this.removeA11yRecursively(overlay);
+    this.unregisterActiveDriverSubtree(overlay);
     this.markDirty();
   }
   destroyEntitySubtree(entity) {
-    while (entity.children.length > 0) this.destroyEntitySubtree(entity.children.at(-1));
     entity.destroy();
   }
   /**
@@ -1198,21 +2687,37 @@ var Scene = (_class2 = class _Scene {
     if (typeof window !== "undefined" && !this.disableWindowResize) {
       window.removeEventListener("resize", this.resizeHandler);
     }
+    if (this.canvasResizeObserver) {
+      this.canvasResizeObserver.disconnect();
+      this.canvasResizeObserver = null;
+    }
+    if (this.dprMediaQuery && this.dprChangeHandler) {
+      _optionalChain([this, 'access', _74 => _74.dprMediaQuery, 'access', _75 => _75.removeEventListener, 'optionalCall', _76 => _76("change", this.dprChangeHandler)]);
+      this.dprMediaQuery = null;
+      this.dprChangeHandler = null;
+    }
+    if (this.forcedColorsQuery && this.forcedColorsChangeHandler) {
+      _optionalChain([this, 'access', _77 => _77.forcedColorsQuery, 'access', _78 => _78.removeEventListener, 'optionalCall', _79 => _79("change", this.forcedColorsChangeHandler)]);
+      this.forcedColorsQuery = null;
+      this.forcedColorsChangeHandler = null;
+    }
     if (typeof window !== "undefined" && this.contentSelectionEndListener) {
       window.removeEventListener("mouseup", this.contentSelectionEndListener);
       window.removeEventListener("blur", this.contentSelectionEndListener);
       this.contentSelectionEndListener = null;
     }
-    if (typeof window !== "undefined" && this.canvas && typeof this.canvas.removeEventListener === "function") {
+    if (typeof window !== "undefined" && this.pointerEventTarget && typeof this.pointerEventTarget.removeEventListener === "function") {
       if (this.pointerMoveListener) {
-        this.canvas.removeEventListener("pointermove", this.pointerMoveListener);
+        this.pointerEventTarget.removeEventListener("pointermove", this.pointerMoveListener);
       }
       if (this.pointerLeaveListener) {
-        this.canvas.removeEventListener("pointerleave", this.pointerLeaveListener);
+        this.pointerEventTarget.removeEventListener("pointerleave", this.pointerLeaveListener);
       }
+      this.pointerEventTarget = null;
     }
-    _optionalChain([this, 'access', _53 => _53.a11yRoot, 'optionalAccess', _54 => _54.remove, 'call', _55 => _55()]);
-    _optionalChain([this, 'access', _56 => _56.portalRoot, 'optionalAccess', _57 => _57.remove, 'call', _58 => _58()]);
+    _optionalChain([this, 'access', _80 => _80.a11yRoot, 'optionalAccess', _81 => _81.remove, 'call', _82 => _82()]);
+    this.focusSentinel = null;
+    _optionalChain([this, 'access', _83 => _83.portalRoot, 'optionalAccess', _84 => _84.remove, 'call', _85 => _85()]);
     this.a11yElements.clear();
     for (const el of this.contentElements.values()) el.remove();
     this.contentElements.clear();
@@ -1225,10 +2730,20 @@ var Scene = (_class2 = class _Scene {
     for (const probe of this.contentGridCalibrationProbes.values()) probe.remove();
     this.contentGridCalibrationProbes.clear();
     this.endContentSelectionDrag();
-    _optionalChain([this, 'access', _59 => _59.pointRenderer, 'optionalAccess', _60 => _60.destroy, 'call', _61 => _61()]);
-    _optionalChain([this, 'access', _62 => _62.renderer, 'access', _63 => _63.dispose, 'optionalCall', _64 => _64()]);
-    _optionalChain([this, 'access', _65 => _65.glCanvas, 'optionalAccess', _66 => _66.remove, 'call', _67 => _67()]);
-    _optionalChain([this, 'access', _68 => _68.gpuCanvas, 'optionalAccess', _69 => _69.remove, 'call', _70 => _70()]);
+    if (this.glCanvas) {
+      if (this.glContextLostHandler) {
+        this.glCanvas.removeEventListener("webglcontextlost", this.glContextLostHandler);
+      }
+      if (this.glContextRestoredHandler) {
+        this.glCanvas.removeEventListener("webglcontextrestored", this.glContextRestoredHandler);
+      }
+    }
+    this.glContextLostHandler = null;
+    this.glContextRestoredHandler = null;
+    _optionalChain([this, 'access', _86 => _86.pointRenderer, 'optionalAccess', _87 => _87.destroy, 'call', _88 => _88()]);
+    _optionalChain([this, 'access', _89 => _89.renderer, 'access', _90 => _90.dispose, 'optionalCall', _91 => _91()]);
+    _optionalChain([this, 'access', _92 => _92.glCanvas, 'optionalAccess', _93 => _93.remove, 'call', _94 => _94()]);
+    _optionalChain([this, 'access', _95 => _95.gpuCanvas, 'optionalAccess', _96 => _96.remove, 'call', _97 => _97()]);
     this.gpuCanvas = null;
     this.gpuContext = null;
     if (this.recoveryTimerId) {
@@ -1240,14 +2755,27 @@ var Scene = (_class2 = class _Scene {
       this.manager = null;
     }
     if (this.device) {
-      _optionalChain([this, 'access', _71 => _71.device, 'access', _72 => _72.destroy, 'optionalCall', _73 => _73()]);
+      _optionalChain([this, 'access', _98 => _98.device, 'access', _99 => _99.destroy, 'optionalCall', _100 => _100()]);
       this.device = null;
     }
   }
   setupEvents() {
     if (typeof window !== "undefined" && !this.disableWindowResize) {
       window.addEventListener("resize", this.resizeHandler);
+    } else if (this.disableWindowResize && typeof ResizeObserver !== "undefined" && this.canvas && typeof this.canvas.getBoundingClientRect === "function") {
+      this.canvasResizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        const box = entry.contentRect;
+        const w = Math.round(box.width);
+        const h = Math.round(box.height);
+        if (w > 0 && h > 0 && (w !== this.width || h !== this.height)) {
+          this.resize(w, h);
+        }
+      });
+      this.canvasResizeObserver.observe(this.canvas);
     }
+    this.watchDevicePixelRatio();
     if (typeof window !== "undefined" && this.canvas && typeof this.canvas.addEventListener === "function") {
       this.pointerMoveListener = (e) => {
         const point = this.clientToScene(e.clientX, e.clientY);
@@ -1258,8 +2786,9 @@ var Scene = (_class2 = class _Scene {
         this.mouseX = -9999;
         this.mouseY = -9999;
       };
-      this.canvas.addEventListener("pointermove", this.pointerMoveListener);
-      this.canvas.addEventListener("pointerleave", this.pointerLeaveListener);
+      this.pointerEventTarget = _nullishCoalesce(this.canvas.parentElement, () => ( this.canvas));
+      this.pointerEventTarget.addEventListener("pointermove", this.pointerMoveListener);
+      this.pointerEventTarget.addEventListener("pointerleave", this.pointerLeaveListener);
     }
   }
   /**
@@ -1277,6 +2806,7 @@ var Scene = (_class2 = class _Scene {
     }
     this.isRunning = true;
     this.lastTime = typeof performance !== "undefined" ? performance.now() : 0;
+    this.watchCanvasVisibility();
     this.scheduleFrame();
     const isTextFocused = this.focusedA11yElement instanceof HTMLInputElement || this.focusedA11yElement instanceof HTMLTextAreaElement;
     if (isTextFocused && this.renderMode === "onDemand" && !this.caretBlinkTimer) {
@@ -1291,6 +2821,29 @@ var Scene = (_class2 = class _Scene {
       requestAnimationFrame((t) => this.loop(t));
     }
   }
+  /**
+   * Observe whether the canvas is on-screen so the rAF loop can pause when it
+   * scrolls fully out of view (a dashboard tab, a chart below the fold) and
+   * resume when it returns — instead of running the full update/render every
+   * frame for a scene nobody can see. No-op (stays "on screen") where
+   * `IntersectionObserver` is unavailable, so SSR/jsdom behavior is unchanged.
+   */
+  watchCanvasVisibility() {
+    if (this._canvasObserver || typeof IntersectionObserver === "undefined") return;
+    if (!this.canvas || typeof this.canvas.getBoundingClientRect !== "function") return;
+    this._canvasObserver = new IntersectionObserver((entries) => {
+      const entry = entries[entries.length - 1];
+      if (!entry) return;
+      const nowOnScreen = entry.isIntersecting;
+      const wasOffScreen = !this._canvasOnScreen;
+      this._canvasOnScreen = nowOnScreen;
+      if (nowOnScreen && wasOffScreen && this.isRunning) {
+        this.lastTime = typeof performance !== "undefined" ? performance.now() : 0;
+        this.scheduleFrame();
+      }
+    });
+    this._canvasObserver.observe(this.canvas);
+  }
   /**
    * Halt the render loop after the current frame completes.
    *
@@ -1302,6 +2855,11 @@ var Scene = (_class2 = class _Scene {
       clearInterval(this.caretBlinkTimer);
       this.caretBlinkTimer = null;
     }
+    if (this._canvasObserver) {
+      this._canvasObserver.disconnect();
+      this._canvasObserver = null;
+    }
+    this._canvasOnScreen = true;
   }
   /**
    * Manually advance the scene clock by `dt` milliseconds and render synchronously.
@@ -1392,6 +2950,7 @@ var Scene = (_class2 = class _Scene {
           }
         }
         if (el.parentNode === this.a11yRoot) {
+          this.preserveFocusOnRemoval(el);
           this.a11yRoot.removeChild(el);
         }
         this.a11yElements.delete(node.id);
@@ -1419,18 +2978,20 @@ var Scene = (_class2 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("dblclick", (e) => {
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("dblclick", node, e));
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("dblclick", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("hover", node, e, false));
+          this.hoveredA11yElements.add(el);
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("hover", node, e, false));
         });
         el.addEventListener("mouseleave", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.05)";
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointerleave", node, e, false));
+          this.hoveredA11yElements.delete(el);
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         const releasePointer = (event) => {
@@ -1446,32 +3007,32 @@ var Scene = (_class2 = class _Scene {
         };
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener("pointercancel", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointercancel", node, e));
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("pointercancel", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -1493,12 +3054,18 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("click", forward);
           el.addEventListener("select", forward);
           el.addEventListener("compositionstart", () => {
-            composition = { start: _nullishCoalesce(input.selectionStart, () => ( input.value.length)), length: 0 };
+            composition = {
+              start: _nullishCoalesce(input.selectionStart, () => ( input.value.length)),
+              length: 0
+            };
             forward();
           });
           el.addEventListener("compositionupdate", (e) => {
             const data = _nullishCoalesce(e.data, () => ( ""));
-            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _74 => _74.start]), () => ( 0)), length: data.length };
+            composition = {
+              start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _101 => _101.start]), () => ( 0)),
+              length: data.length
+            };
             forward();
           });
           el.addEventListener("compositionend", () => {
@@ -1531,7 +3098,7 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -1569,7 +3136,7 @@ var Scene = (_class2 = class _Scene {
         this.syncOptionalAttribute(
           el,
           "href",
-          attrs.href === void 0 ? void 0 : _chunkBEUIB3U7js.sanitizeUrl.call(void 0, attrs.href)
+          attrs.href === void 0 ? void 0 : _chunkIYPLG4Z4js.sanitizeUrl.call(void 0, attrs.href)
         );
         this.syncOptionalAttribute(el, "target", attrs.target);
       }
@@ -1612,6 +3179,31 @@ var Scene = (_class2 = class _Scene {
       this.syncOptionalAttribute(el, "aria-activedescendant", attrs.activedescendant);
       this.syncOptionalAttribute(el, "aria-valuemin", attrs.valuemin);
       this.syncOptionalAttribute(el, "aria-valuemax", attrs.valuemax);
+      this.syncOptionalAttribute(el, "aria-live", attrs.live);
+      this.syncOptionalAttribute(
+        el,
+        "aria-atomic",
+        attrs.atomic === void 0 ? void 0 : String(attrs.atomic)
+      );
+      this.syncOptionalAttribute(el, "aria-relevant", attrs.relevant);
+      this.syncOptionalAttribute(el, "aria-modal", attrs.ariaModal);
+      this.syncOptionalAttribute(el, "aria-labelledby", attrs.labelledby);
+      this.syncOptionalAttribute(el, "aria-describedby", attrs.describedby);
+      this.syncOptionalAttribute(
+        el,
+        "aria-required",
+        attrs.required === void 0 ? void 0 : String(attrs.required)
+      );
+      this.syncOptionalAttribute(
+        el,
+        "aria-invalid",
+        attrs.invalid === void 0 ? void 0 : String(attrs.invalid)
+      );
+      this.syncOptionalAttribute(
+        el,
+        "aria-level",
+        attrs.level === void 0 ? void 0 : String(attrs.level)
+      );
       if (attrs.value !== void 0) {
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           if (el.value !== attrs.value) {
@@ -1643,13 +3235,18 @@ var Scene = (_class2 = class _Scene {
         el.style.width = `${this.width}px`;
         el.style.height = `${this.height}px`;
         el.style.transform = "";
+        if (el.style.display === "none") el.style.display = "";
       } else {
-        const { a, b, c, d, e, f } = node.getWorldTransform();
+        const worldTf = node.getWorldTransform();
+        const { a, b, c, d, e, f } = worldTf;
         el.style.left = `${e + node.a11yOffsetX}px`;
         el.style.top = `${f + node.a11yOffsetY}px`;
         el.style.width = `${node.width}px`;
         el.style.height = `${node.height}px`;
         el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
+        const visible = this.projectionBoxVisible(node, worldTf, 0);
+        const display = visible ? "" : "none";
+        if (el.style.display !== display) el.style.display = display;
       }
     }
     this.syncContentProjection(node);
@@ -1717,26 +3314,24 @@ var Scene = (_class2 = class _Scene {
   }
   syncContentProjection(node) {
     if (!this.contentProjectionEnabled || !this.a11yRoot) return;
-    const projection = node.getContentProjection();
     let el = this.contentElements.get(node.id);
-    if (!projection || !projection.text) {
+    const releaseProjectionEl = () => {
       if (el) {
         this.clearContentGridState(node.id, el);
         el.remove();
         this.contentElements.delete(node.id);
         this.a11yNeedsReorder = true;
       }
-      return;
-    }
+    };
     const worldTf = node.getWorldTransform();
     const margin = _nullishCoalesce(this.contentProjectionMargin, () => ( this.height));
     if (Number.isFinite(margin) && !this.projectionBoxVisible(node, worldTf, margin)) {
-      if (el) {
-        this.clearContentGridState(node.id, el);
-        el.remove();
-        this.contentElements.delete(node.id);
-        this.a11yNeedsReorder = true;
-      }
+      releaseProjectionEl();
+      return;
+    }
+    const projection = node.getContentProjection();
+    if (!projection || !projection.text) {
+      releaseProjectionEl();
       return;
     }
     if (!el) {
@@ -1755,7 +3350,7 @@ var Scene = (_class2 = class _Scene {
       el.addEventListener(
         "wheel",
         (e2) => {
-          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("wheel", node, e2));
+          node.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)("wheel", node, e2));
         },
         { passive: false }
       );
@@ -1776,35 +3371,48 @@ var Scene = (_class2 = class _Scene {
         fallbackLineHeight: _nullishCoalesce(projection.lineHeight, () => ( 16))
       });
       if (el.dataset.vectoProjectionLines !== signature) {
-        this.releaseContentSelectionForRebuild(el);
-        el.replaceChildren();
-        for (let index = 0; index < lines.length; index++) {
-          const line = lines[index];
-          const lineElement = document.createElement("span");
-          const lineFont = _nullishCoalesce(_nullishCoalesce(line.font, () => ( projection.font)), () => ( ""));
-          const lineHeight2 = _nullishCoalesce(_nullishCoalesce(line.lineHeight, () => ( projection.lineHeight)), () => ( 16));
-          lineElement.style.position = "absolute";
-          lineElement.dir = "auto";
-          lineElement.style.left = `${line.x}px`;
-          lineElement.style.top = `${line.y + line.baseline - _chunk2Z23LTH3js.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
-          lineElement.style.whiteSpace = "pre";
-          if (lineFont) lineElement.style.font = lineFont;
-          lineElement.style.lineHeight = `${lineHeight2}px`;
-          const separator = _nullishCoalesce(line.separatorAfter, () => ( (index < lines.length - 1 ? "\n" : "")));
-          if (line.runs && line.runs.length > 0) {
-            for (let runIndex = 0; runIndex < line.runs.length; runIndex++) {
-              const run = line.runs[runIndex];
-              const runElement = document.createElement("span");
-              runElement.textContent = run.text + (runIndex === line.runs.length - 1 ? separator : "");
-              if (run.font) runElement.style.font = run.font;
-              runElement.style.lineHeight = `${lineHeight2}px`;
-              lineElement.appendChild(runElement);
+        this.preserveContentSelectionAcrossRebuild(el, () => {
+          el.replaceChildren();
+          for (let index = 0; index < lines.length; index++) {
+            const line = lines[index];
+            const lineElement = document.createElement("span");
+            const lineFont = _nullishCoalesce(_nullishCoalesce(line.font, () => ( projection.font)), () => ( ""));
+            const lineHeight2 = _nullishCoalesce(_nullishCoalesce(line.lineHeight, () => ( projection.lineHeight)), () => ( 16));
+            const hasPositionedRuns = !!line.runs && line.runs.some((run) => run.x !== void 0);
+            lineElement.style.position = "absolute";
+            lineElement.dir = hasPositionedRuns ? "ltr" : "auto";
+            lineElement.style.left = `${line.x}px`;
+            lineElement.style.top = `${line.y + line.baseline - _text.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
+            lineElement.style.whiteSpace = "pre";
+            if (lineFont) lineElement.style.font = lineFont;
+            lineElement.style.lineHeight = `${lineHeight2}px`;
+            const separator = _nullishCoalesce(line.separatorAfter, () => ( (index < lines.length - 1 ? "\n" : "")));
+            if (line.runs && line.runs.length > 0) {
+              const positioned = line.runs.some((run) => run.x !== void 0);
+              for (let runIndex = 0; runIndex < line.runs.length; runIndex++) {
+                const run = line.runs[runIndex];
+                const runElement = document.createElement("span");
+                runElement.textContent = run.text + (runIndex === line.runs.length - 1 ? separator : "");
+                if (run.font) runElement.style.font = run.font;
+                runElement.style.lineHeight = `${lineHeight2}px`;
+                if (positioned && run.x !== void 0) {
+                  runElement.style.position = "absolute";
+                  runElement.style.left = `${run.x - line.x}px`;
+                  runElement.style.top = "0";
+                  if (run.width !== void 0) runElement.style.width = `${run.width}px`;
+                  runElement.style.whiteSpace = "pre";
+                  runElement.style.verticalAlign = "top";
+                  runElement.style.unicodeBidi = "isolate";
+                  runElement.dir = "ltr";
+                }
+                lineElement.appendChild(runElement);
+              }
+            } else {
+              lineElement.textContent = line.text + separator;
             }
-          } else {
-            lineElement.textContent = line.text + separator;
+            el.appendChild(lineElement);
           }
-          el.appendChild(lineElement);
-        }
+        });
         el.dataset.vectoProjectionLines = signature;
       }
     } else {
@@ -1838,7 +3446,7 @@ var Scene = (_class2 = class _Scene {
     const { a, b, c, d, e, f } = worldTf;
     const contentX = _nullishCoalesce(projection.contentX, () => ( 0));
     const contentY = _nullishCoalesce(projection.contentY, () => ( 0));
-    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - _chunk2Z23LTH3js.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
+    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - _text.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
     const localY = contentY + baselineOffset;
     el.style.left = `${e + a * contentX + c * localY}px`;
     el.style.top = `${f + b * contentX + d * localY}px`;
@@ -1867,15 +3475,15 @@ var Scene = (_class2 = class _Scene {
       for (let lineIndex = 0; lineIndex < grid.lines.length; lineIndex++) {
         const gridLine = grid.lines[lineIndex];
         const projectedLine = projectionLines[lineIndex];
-        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _75 => _75.lineHeight]), () => ( grid.lineHeight));
-        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _76 => _76.baseline]), () => ( grid.baseline));
-        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _77 => _77.font]), () => ( grid.font));
+        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _102 => _102.lineHeight]), () => ( grid.lineHeight));
+        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _103 => _103.baseline]), () => ( grid.baseline));
+        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _104 => _104.font]), () => ( grid.font));
         const lineElement = document.createElement("span");
         lineElement.dir = "ltr";
         lineElement.dataset.vectoGridLine = `${lineIndex}`;
         lineElement.style.position = "absolute";
-        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _78 => _78.x]), () => ( 0))}px`;
-        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _79 => _79.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _chunk2Z23LTH3js.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
+        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _105 => _105.x]), () => ( 0))}px`;
+        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _106 => _106.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _text.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
         lineElement.style.width = `${gridLine.width}px`;
         lineElement.style.height = `${lineHeight}px`;
         lineElement.style.whiteSpace = "pre";
@@ -1971,7 +3579,7 @@ var Scene = (_class2 = class _Scene {
     if (previous !== void 0 && typeof cancelAnimationFrame === "function") {
       cancelAnimationFrame(previous);
     }
-    _optionalChain([this, 'access', _80 => _80.contentGridCalibrationProbes, 'access', _81 => _81.get, 'call', _82 => _82(entityId), 'optionalAccess', _83 => _83.remove, 'call', _84 => _84()]);
+    _optionalChain([this, 'access', _107 => _107.contentGridCalibrationProbes, 'access', _108 => _108.get, 'call', _109 => _109(entityId), 'optionalAccess', _110 => _110.remove, 'call', _111 => _111()]);
     this.contentGridCalibrationProbes.delete(entityId);
     const calibrationStart = typeof performance !== "undefined" ? performance.now() : 0;
     const probe = document.createElement("div");
@@ -2001,7 +3609,7 @@ var Scene = (_class2 = class _Scene {
       const sourceLength = Number(_nullishCoalesce(target.dataset.vectoGridSourceLength, () => ( 0)));
       const targetWidth = Number(_nullishCoalesce(target.dataset.vectoGridAdvance, () => ( 0)));
       if (sourceLength <= 0 || targetWidth <= 0) continue;
-      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _85 => _85.textContent, 'optionalAccess', _86 => _86.slice, 'call', _87 => _87(0, sourceLength)]), () => ( ""));
+      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _112 => _112.textContent, 'optionalAccess', _113 => _113.slice, 'call', _114 => _114(0, sourceLength)]), () => ( ""));
       if (!sourceText) continue;
       const measurementKey = JSON.stringify([
         target.style.font,
@@ -2027,7 +3635,12 @@ var Scene = (_class2 = class _Scene {
       const source = document.createTextNode(sourceText);
       carrier.appendChild(source);
       probe.appendChild(carrier);
-      const measurement = { targets: [target], targetWidth, sourceLength, source };
+      const measurement = {
+        targets: [target],
+        targetWidth,
+        sourceLength,
+        source
+      };
       measurements.push(measurement);
       measurementsByKey.set(measurementKey, measurement);
     }
@@ -2126,6 +3739,7 @@ var Scene = (_class2 = class _Scene {
           }
         }
         if (el.parentNode === this.a11yRoot) {
+          this.preserveFocusOnRemoval(el);
           this.a11yRoot.removeChild(el);
         }
         this.a11yElements.delete(id);
@@ -2135,6 +3749,7 @@ var Scene = (_class2 = class _Scene {
       this.a11yNeedsReorder = true;
     }
     if (!this.a11yNeedsReorder) return;
+    this.sortNormalElementsVisually();
     const fullLen = this.fullViewportElements.length;
     const normalLen = this.normalElements.length;
     const totalLen = fullLen + normalLen;
@@ -2147,18 +3762,73 @@ var Scene = (_class2 = class _Scene {
     }
     this.a11yNeedsReorder = false;
   }
+  /**
+   * Reorder `normalElements` (in place) into visual reading order using the
+   * world positions `syncA11y` already wrote to each element's inline style
+   * (`top`/`left`/`height`). Elements are grouped into rows top-to-bottom (an
+   * element belongs to the current row while its top is above the row's
+   * running bottom edge), then sorted within a row by `left` — ascending for
+   * `'ltr'`, descending for `'rtl'`. The sort is stable, so entities at the
+   * same position keep their scene-graph (collection) order as a tiebreak.
+   */
+  sortNormalElementsVisually() {
+    const els = this.normalElements;
+    if (els.length < 2) return;
+    const rtl = this._readingDirection === "rtl";
+    const topOf = (el) => Number.parseFloat(el.style.top) || 0;
+    const leftOf = (el) => Number.parseFloat(el.style.left) || 0;
+    const heightOf = (el) => Math.max(Number.parseFloat(el.style.height) || 0, 4);
+    const order = els.map((el, i) => ({
+      el,
+      i,
+      top: topOf(el),
+      left: leftOf(el)
+    }));
+    order.sort((p, q) => p.top - q.top || p.i - q.i);
+    const sorted = [];
+    let rowStart = 0;
+    let rowBottom = order.length ? order[0].top + heightOf(order[0].el) : 0;
+    const flushRow = (end) => {
+      const row = order.slice(rowStart, end);
+      row.sort((p, q) => (rtl ? q.left - p.left : p.left - q.left) || p.i - q.i);
+      for (const r of row) sorted.push(r.el);
+    };
+    for (let k = 1; k < order.length; k++) {
+      if (order[k].top < rowBottom) {
+        rowBottom = Math.max(rowBottom, order[k].top + heightOf(order[k].el));
+      } else {
+        flushRow(k);
+        rowStart = k;
+        rowBottom = order[k].top + heightOf(order[k].el);
+      }
+    }
+    flushRow(order.length);
+    for (let i = 0; i < sorted.length; i++) els[i] = sorted[i];
+  }
   /** Keep DOM/WebGL overlay layers aligned with the canvas's CSS box. */
   syncOverlayGeometry() {
     const parent = this.canvas.parentElement;
     if (!parent) return;
-    const canvasRect = _optionalChain([this, 'access', _88 => _88.canvas, 'access', _89 => _89.getBoundingClientRect, 'optionalCall', _90 => _90()]);
-    const parentRect = _optionalChain([parent, 'access', _91 => _91.getBoundingClientRect, 'optionalCall', _92 => _92()]);
-    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _93 => _93.width]) || this.canvas.clientWidth || this.width;
-    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _94 => _94.height]) || this.canvas.clientHeight || this.height;
-    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _95 => _95.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _96 => _96.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
-    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _97 => _97.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _98 => _98.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
+    const canvasRect = _optionalChain([this, 'access', _115 => _115.canvas, 'access', _116 => _116.getBoundingClientRect, 'optionalCall', _117 => _117()]);
+    const parentRect = _optionalChain([parent, 'access', _118 => _118.getBoundingClientRect, 'optionalCall', _119 => _119()]);
+    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _120 => _120.width]) || this.canvas.clientWidth || this.width;
+    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _121 => _121.height]) || this.canvas.clientHeight || this.height;
+    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _122 => _122.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _123 => _123.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
+    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _124 => _124.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _125 => _125.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
     const scaleX = this.width > 0 ? cssWidth / this.width : 1;
     const scaleY = this.height > 0 ? cssHeight / this.height : 1;
+    const prev = this._overlayGeometry;
+    if (prev !== null && prev.left === left && prev.top === top && prev.cssWidth === cssWidth && prev.cssHeight === cssHeight && prev.width === this.width && prev.height === this.height) {
+      return;
+    }
+    this._overlayGeometry = {
+      left,
+      top,
+      cssWidth,
+      cssHeight,
+      width: this.width,
+      height: this.height
+    };
     for (const root of [this.a11yRoot, this.portalRoot]) {
       if (!root) continue;
       root.style.left = `${left}px`;
@@ -2226,6 +3896,7 @@ var Scene = (_class2 = class _Scene {
     if (portal.domElement.parentElement !== this.portalRoot) {
       this.portalRoot.appendChild(portal.domElement);
     }
+    portal.attachDOMBindings();
     if (!portal.domElement.hasAttribute("data-vecto-id")) {
       portal.domElement.setAttribute("data-vecto-id", portal.id);
     }
@@ -2266,6 +3937,7 @@ var Scene = (_class2 = class _Scene {
         const portal = this.portalEntities.get(oldId);
         if (portal) {
           if (portal.domElement.parentElement === this.portalRoot && (!portal.scene || portal.scene === this)) {
+            portal.releaseDOMBindings();
             portal.domElement.remove();
           }
           this.portalEntities.delete(oldId);
@@ -2281,13 +3953,14 @@ var Scene = (_class2 = class _Scene {
    * (and {@link respectReducedMotion} is on). `0` means uncapped.
    */
   effectiveMaxFPS() {
-    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _99 => _99.reducedMotionQuery, 'optionalAccess', _100 => _100.matches]);
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _126 => _126.reducedMotionQuery, 'optionalAccess', _127 => _127.matches]);
     if (reduced)
       return this.maxFPS > 0 ? Math.min(this.maxFPS, REDUCED_MOTION_FPS) : REDUCED_MOTION_FPS;
     return this.maxFPS;
   }
   loop(time) {
     if (!this.isRunning) return;
+    if (!this._canvasOnScreen) return;
     let cap = this.effectiveMaxFPS();
     const isIdle = !this.dirty && !this.frameHadAnimation;
     if (isIdle && this.autoThrottle && this.renderMode === "always" && this.maxFPS > 0) {
@@ -2303,6 +3976,7 @@ var Scene = (_class2 = class _Scene {
       const nominal = 1e3 / cap;
       if (Math.abs(dt - nominal) < nominal * 0.3) dt = nominal;
     }
+    if (dt > _Scene.MAX_FRAME_DT) dt = _Scene.MAX_FRAME_DT;
     this.lastTime = time;
     if (this.renderMode === "onDemand" && isIdle) {
       this._skippedFrames++;
@@ -2346,6 +4020,7 @@ var Scene = (_class2 = class _Scene {
    * @param time - Current absolute time in milliseconds (default 0).
    */
   render(renderer, dt = 0, time = 0) {
+    if (_optionalChain([renderer, 'access', _128 => _128.isContextLost, 'optionalCall', _129 => _129()])) return;
     const isMainRenderer = renderer === this.renderer;
     if (isMainRenderer && this.a11yRoot && this.canvas.parentElement) {
       const parentStyle = this.canvas.parentElement.style;
@@ -2355,23 +4030,13 @@ var Scene = (_class2 = class _Scene {
       this.syncOverlayGeometry();
     }
     if (isMainRenderer) {
+      this.currentFrame++;
       this.renderOrderCounter = 0;
       this.a11yRenderOrders.clear();
       this.activePortalsThisFrame.clear();
+      this._tickBatchedDrivers(dt);
     }
-    const computeEntities = [];
-    const collectComputeEntities = (node) => {
-      if (node instanceof ComputeParticleEntity) {
-        computeEntities.push(node);
-      }
-      for (const child of node.children) {
-        collectComputeEntities(child);
-      }
-    };
-    collectComputeEntities(this.root);
-    for (const overlay of this.overlayRoot.children) {
-      collectComputeEntities(overlay);
-    }
+    const computeEntities = this._computeEntitiesFor(this._structureVersion);
     if (computeEntities.length > 0) {
       const isMainRenderPath = renderer === this.renderer;
       if (isMainRenderPath && !this.device && !this.webgpuDisabled && !this.initializingWebGPU && !this.deviceLost) {
@@ -2469,7 +4134,11 @@ var Scene = (_class2 = class _Scene {
               my = -9999;
             }
           }
-          entity.updateCPU(dt / 1e3, mx, my, this.width, this.height);
+          if (this._particleWasm) {
+            entity.stepWithBackend(this._particleWasm, dt / 1e3, mx, my, this.width, this.height);
+          } else {
+            entity.updateCPU(dt / 1e3, mx, my, this.width, this.height);
+          }
         }
       }
     } else if (isMainRenderer) {
@@ -2477,37 +4146,75 @@ var Scene = (_class2 = class _Scene {
     }
     renderer.clear();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _101 => _101.pointRenderer, 'optionalAccess', _102 => _102.begin, 'call', _103 => _103()]);
+      _optionalChain([this, 'access', _130 => _130.pointRenderer, 'optionalAccess', _131 => _131.begin, 'call', _132 => _132()]);
     }
     const vw = this.width;
     const vh = this.height;
     let walkHadAnimation = false;
     let walkHadInteractive = false;
-    const renderNode = (node, pa, pb, pc, pd, pe, pf, parentOpacity) => {
-      if (isMainRenderer) {
+    const runUpdate = (node) => {
+      const overridesUpdate = node.update !== _chunkDUYB4GX4js.Entity.prototype.update;
+      let pending = node.hasPendingAnimations();
+      if (pending || overridesUpdate) {
         node.update(dt, time);
-        if (!walkHadAnimation && node.hasPendingAnimations()) walkHadAnimation = true;
-        if (!walkHadInteractive && node.interactive) walkHadInteractive = true;
-        if (this._devActive && this._devFrameCount % 120 === 0) {
-          if (node.update !== _chunk2Z23LTH3js.Entity.prototype.update && node.hasPendingAnimations === _chunk2Z23LTH3js.Entity.prototype.hasPendingAnimations) {
-            this._devWarn(
-              `Entity "${node.id}" overrides update() but not hasPendingAnimations(). Custom motion in update() without overriding hasPendingAnimations() causes the idle throttle to drop the animation to ~2fps. Override hasPendingAnimations() to return true while motion is in flight.`
-            );
-          }
+        pending = node.hasPendingAnimations();
+      }
+      if (pending) walkHadAnimation = true;
+      if (!walkHadInteractive && node.interactive) walkHadInteractive = true;
+      if (this._devActive && this._devFrameCount % 120 === 0) {
+        if (overridesUpdate && node.hasPendingAnimations === _chunkDUYB4GX4js.Entity.prototype.hasPendingAnimations) {
+          this._devWarn(
+            `Entity "${node.id}" overrides update() but not hasPendingAnimations(). Custom motion in update() without overriding hasPendingAnimations() causes the idle throttle to drop the animation to ~2fps. Override hasPendingAnimations() to return true while motion is in flight.`
+          );
         }
       }
-      const cos = Math.cos(node.rotation);
-      const sin = Math.sin(node.rotation);
-      const te = pa * node.x + pc * node.y + pe;
-      const tf = pb * node.x + pd * node.y + pf;
-      const sxCos = node.scaleX * cos;
-      const sxSin = node.scaleX * sin;
-      const syCos = node.scaleY * cos;
-      const sySin = node.scaleY * sin;
-      const a = pa * sxCos + pc * sySin;
-      const b = pb * sxCos + pd * sySin;
-      const c = pa * -sxSin + pc * syCos;
-      const d = pb * -sxSin + pd * syCos;
+    };
+    const wasmMain = isMainRenderer && this._wasm !== null && this._transformBackend === "wasm";
+    if (wasmMain) {
+      const updateWalk = (node) => {
+        runUpdate(node);
+        const kids = node.children;
+        for (let i = 0; i < kids.length; i++) updateWalk(kids[i]);
+      };
+      updateWalk(this.root);
+      for (const overlay of this.overlayRoot.children) updateWalk(overlay);
+    }
+    const wasmWorld = wasmMain ? this._syncWasmStore() : null;
+    const wasmSlotEntity = this._slotEntity;
+    const renderNode = (node, pa, pb, pc, pd, pe, pf, parentOpacity) => {
+      if (isMainRenderer && !wasmMain) {
+        runUpdate(node);
+      }
+      let a;
+      let b;
+      let c;
+      let d;
+      let te;
+      let tf;
+      const slot = node._storeSlot;
+      if (wasmWorld !== null && slot >= 0 && wasmSlotEntity[slot] === node) {
+        a = wasmWorld.wa[slot];
+        b = wasmWorld.wb[slot];
+        c = wasmWorld.wc[slot];
+        d = wasmWorld.wd[slot];
+        te = wasmWorld.we[slot];
+        tf = wasmWorld.wf[slot];
+      } else {
+        const trig = node._getTrig();
+        const cos = trig.cos;
+        const sin = trig.sin;
+        te = pa * node.x + pc * node.y + pe;
+        tf = pb * node.x + pd * node.y + pf;
+        const sxCos = node.scaleX * cos;
+        const sxSin = node.scaleX * sin;
+        const syCos = node.scaleY * cos;
+        const sySin = node.scaleY * sin;
+        a = pa * sxCos + pc * sySin;
+        b = pb * sxCos + pd * sySin;
+        c = pa * -sxSin + pc * syCos;
+        d = pb * -sxSin + pd * syCos;
+      }
+      if (isMainRenderer) node._setWorldCache(a, b, c, d, te, tf, this.currentFrame);
       const worldScaleX = Math.hypot(a, b);
       const worldScaleY = Math.hypot(c, d);
       const worldOpacity = parentOpacity * node.opacity;
@@ -2625,9 +4332,9 @@ var Scene = (_class2 = class _Scene {
     }
     renderer.flush();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _104 => _104.pointRenderer, 'optionalAccess', _105 => _105.flush, 'call', _106 => _106()]);
+      _optionalChain([this, 'access', _133 => _133.pointRenderer, 'optionalAccess', _134 => _134.flush, 'call', _135 => _135()]);
     }
-    _optionalChain([renderer, 'access', _107 => _107.present, 'optionalCall', _108 => _108()]);
+    _optionalChain([renderer, 'access', _136 => _136.present, 'optionalCall', _137 => _137()]);
     if (this._devActive) {
       this._devFrameCount++;
       this._devRunChecks();
@@ -2637,7 +4344,7 @@ var Scene = (_class2 = class _Scene {
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkBEUIB3U7js.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkIYPLG4Z4js.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -2656,12 +4363,25 @@ var Scene = (_class2 = class _Scene {
       this.pointRenderer.maxDPR = this.maxDPR;
       this.pointRenderer.resize(width, height);
     }
-    if (this.gpuCanvas) {
-      this.gpuCanvas.width = width;
-      this.gpuCanvas.height = height;
-    }
+    if (this.gpuCanvas) this.sizeGpuCanvas(this.gpuCanvas, width, height);
     this.markDirty();
   }
+  /** Effective device pixel ratio, matching CanvasRenderer: real DPR clamped to
+   *  `maxDPR` when set. */
+  effectiveDPR() {
+    const real = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+    return this.maxDPR !== void 0 ? Math.min(real, this.maxDPR) : real;
+  }
+  /** Size the WebGPU particle canvas: backing store at logical × DPR, CSS box at
+   *  the logical size. Sizing the backing store in logical px (the old
+   *  behavior) left it rasterized at 1× and CSS-stretched — blurry on HiDPI. */
+  sizeGpuCanvas(gpuCanvas, width, height) {
+    const dpr = this.effectiveDPR();
+    gpuCanvas.width = Math.max(1, Math.round(width * dpr));
+    gpuCanvas.height = Math.max(1, Math.round(height * dpr));
+    gpuCanvas.style.width = `${width}px`;
+    gpuCanvas.style.height = `${height}px`;
+  }
   /**
    * Gets the accessibility DOM element projected for the given entity ID.
    */
@@ -2684,6 +4404,9 @@ var Scene = (_class2 = class _Scene {
   findEntityAt(x, y) {
     const overlayHit = this.findHitRecursively(this.overlayRoot, x, y);
     if (overlayHit) return overlayHit;
+    if (this._hitWasm && this._ensureHitGrid()) {
+      return this._findEntityAtWasm(x, y);
+    }
     return this.findHitRecursively(this.root, x, y);
   }
   /** Submit one transparent clear pass when particle content lingers on the GPU canvas. */
@@ -2703,7 +4426,7 @@ var Scene = (_class2 = class _Scene {
       });
       pass.end();
       this.device.queue.submit([encoder.finish()]);
-    } catch (e5) {
+    } catch (e18) {
     }
     this.gpuHasContent = false;
   }
@@ -2718,8 +4441,7 @@ var Scene = (_class2 = class _Scene {
     const device = await adapter.requestDevice();
     if (typeof document !== "undefined" && !this.gpuCanvas) {
       const gpuCanvas = document.createElement("canvas");
-      gpuCanvas.width = this.width;
-      gpuCanvas.height = this.height;
+      this.sizeGpuCanvas(gpuCanvas, this.width, this.height);
       gpuCanvas.style.position = "absolute";
       gpuCanvas.style.top = "0";
       gpuCanvas.style.left = "0";
@@ -2729,6 +4451,7 @@ var Scene = (_class2 = class _Scene {
         this.canvas.parentElement.appendChild(gpuCanvas);
       }
       this.gpuCanvas = gpuCanvas;
+      this._overlayGeometry = null;
       this.gpuContext = gpuCanvas.getContext("webgpu");
     }
     if (this.gpuContext) {
@@ -2825,42 +4548,97 @@ var Scene = (_class2 = class _Scene {
       }
     }
   }
-  findHitRecursively(node, x, y) {
+  findHitRecursively(node, x, y, clip = null) {
+    if (node.opacity <= 0) return null;
+    let childClip = clip;
+    if (node.clipChildren) {
+      const box = node.getWorldBounds();
+      childClip = clip ? intersectBounds(clip, box) : box;
+    }
     for (let i = node.children.length - 1; i >= 0; i--) {
-      const hit = this.findHitRecursively(node.children[i], x, y);
+      const hit = this.findHitRecursively(node.children[i], x, y, childClip);
       if (hit) return hit;
     }
-    if (node.isPointInside && node.isPointInside(x, y)) {
+    if (node.isPointInside && node.isPointInside(x, y) && (!clip || pointInBounds(clip, x, y)) && !this.isPointerTransparent(node)) {
       return node;
     }
     return null;
   }
-}, _class2.__initStatic(), _class2.__initStatic2(), _class2.__initStatic3(), _class2);
+  /** Whether `node` opts out of being a pointer hit target: a disabled control
+   *  or an explicit `pointerEvents: 'none'` in its a11y attributes. Its children
+   *  are still walked (a transparent container can hold hittable descendants). */
+  isPointerTransparent(node) {
+    const attrs = node.getA11yAttributes();
+    return attrs.disabled === true || attrs.pointerEvents === "none";
+  }
+  /**
+   * Whether a confirmed geometric hit on `node` at world `(x, y)` is a REAL hit,
+   * applying the same visibility/input gating as {@link findHitRecursively} but
+   * from a flat candidate (the WASM grid has no recursion clip-stack): the node
+   * and all ancestors are visible (`opacity > 0`), the point lies inside every
+   * `clipChildren` ancestor's world box, and the node isn't pointer-transparent
+   * (disabled / `pointerEvents: 'none'`). Keeps the WASM and JS hit paths in
+   * lockstep so they return the same entity.
+   */
+  isHitEligible(node, x, y) {
+    if (this.isPointerTransparent(node)) return false;
+    if (node.opacity <= 0) return false;
+    for (let ancestor = node.parent; ancestor; ancestor = ancestor.parent) {
+      if (ancestor.opacity <= 0) return false;
+      if (ancestor.clipChildren && ancestor.width > 0 && ancestor.height > 0) {
+        const local = ancestor.worldToLocal(x, y);
+        if (!local || local.x < 0 || local.y < 0 || local.x > ancestor.width || local.y > ancestor.height) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+}, _class6.__initStatic(), _class6.__initStatic2(), _class6.__initStatic3(), _class6.__initStatic4(), _class6);
+function intersectBounds(a, b) {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.width, b.x + b.width);
+  const bottom = Math.min(a.y + a.height, b.y + b.height);
+  return {
+    x,
+    y,
+    width: Math.max(0, right - x),
+    height: Math.max(0, bottom - y)
+  };
+}
+function pointInBounds(b, x, y) {
+  return x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height;
+}
 
 // src/components/TextEntity.ts
+
+
+
+var _layout = require('@vectojs/layout'); _createStarExport(_layout);
 var sharedMeasurer;
 function defaultMeasurer() {
-  if (sharedMeasurer === void 0) sharedMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer.call(void 0, "sans-serif");
+  if (sharedMeasurer === void 0) sharedMeasurer = _layout.createCanvasMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class3 = class extends _chunk2Z23LTH3js.Entity {
+var TextEntity = (_class7 = class extends _chunkDUYB4GX4js.Entity {
   
   
   
   
-  __init71() {this.nodes = []}
+  __init124() {this.nodes = []}
   
-  __init72() {this.fillStyle = "#94a3b8"}
-  __init73() {this.strokeStyle = null}
-  __init74() {this.hoveredFillStyle = "#ffffff"}
-  __init75() {this.lineWidth = 1}
-  __init76() {this.isHovered = false}
+  __init125() {this.fillStyle = "#94a3b8"}
+  __init126() {this.strokeStyle = null}
+  __init127() {this.hoveredFillStyle = "#ffffff"}
+  __init128() {this.lineWidth = 1}
+  __init129() {this.isHovered = false}
   constructor(text, atlas, maxWidth, fontSize = 24) {
-    super();_class3.prototype.__init71.call(this);_class3.prototype.__init72.call(this);_class3.prototype.__init73.call(this);_class3.prototype.__init74.call(this);_class3.prototype.__init75.call(this);_class3.prototype.__init76.call(this);;
+    super();_class7.prototype.__init124.call(this);_class7.prototype.__init125.call(this);_class7.prototype.__init126.call(this);_class7.prototype.__init127.call(this);_class7.prototype.__init128.call(this);_class7.prototype.__init129.call(this);;
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
-    this.layout = new (0, _chunkBA5HUUDFjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
+    this.layout = new (0, _layout.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
     this.prepared = this.layout.prepare(this.text, this.atlas, this.fontSize);
     this.applyLayout();
     this.interactive = true;
@@ -2966,20 +4744,20 @@ var TextEntity = (_class3 = class extends _chunk2Z23LTH3js.Entity {
       renderer.restore();
     }
   }
-}, _class3);
+}, _class7);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class4 = class extends _chunk2Z23LTH3js.Entity {
+var GridTextEntity = (_class8 = class extends _chunkDUYB4GX4js.Entity {
   
-  __init77() {this.fillStyle = "#ffffff"}
-  __init78() {this.grid = []}
+  __init130() {this.fillStyle = "#ffffff"}
+  __init131() {this.grid = []}
   // Array of rows
-  __init79() {this.cols = 0}
-  __init80() {this.rows = 0}
+  __init132() {this.cols = 0}
+  __init133() {this.rows = 0}
   
   
   constructor(_atlas, fontSize = 10) {
-    super();_class4.prototype.__init77.call(this);_class4.prototype.__init78.call(this);_class4.prototype.__init79.call(this);_class4.prototype.__init80.call(this);;
+    super();_class8.prototype.__init130.call(this);_class8.prototype.__init131.call(this);_class8.prototype.__init132.call(this);_class8.prototype.__init133.call(this);;
     this.fontSize = fontSize;
     this.charWidth = fontSize * 1;
     this.charHeight = fontSize * 1.1;
@@ -2988,7 +4766,7 @@ var GridTextEntity = (_class4 = class extends _chunk2Z23LTH3js.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _109 => _109[0], 'optionalAccess', _110 => _110.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _138 => _138[0], 'optionalAccess', _139 => _139.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -3010,7 +4788,7 @@ var GridTextEntity = (_class4 = class extends _chunk2Z23LTH3js.Entity {
       }
     }
   }
-}, _class4);
+}, _class8);
 
 // src/components/SplineEntity.ts
 function polySegmentToBezier(seg) {
@@ -3063,7 +4841,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class5 = class extends _chunk2Z23LTH3js.Entity {
+var SplineEntity = (_class9 = class extends _chunkDUYB4GX4js.Entity {
   
   
   
@@ -3071,23 +4849,23 @@ var SplineEntity = (_class5 = class extends _chunk2Z23LTH3js.Entity {
   
   
   
-  __init81() {this.offscreen = null}
-  __init82() {this.baked = false}
+  __init134() {this.offscreen = null}
+  __init135() {this.baked = false}
   /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
-  __init83() {this.bakedWidth = 0}
-  __init84() {this.bakedHeight = 0}
+  __init136() {this.bakedWidth = 0}
+  __init137() {this.bakedHeight = 0}
   /** Gradient strokes can't be baked to a solid-color bitmap; they render per-frame. */
   
   /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
-  __init85() {this.polylines = null}
+  __init138() {this.polylines = null}
   /**
    * When `true`, the renderer draws a rounded-rect outline of the entity's
    * local bounds after painting the curves. Useful for drag feedback and
    * debugging hit areas. Defaults to `false`.
    */
-  __init86() {this.showBounds = false}
+  __init139() {this.showBounds = false}
   constructor(doc, opts = {}) {
-    super();_class5.prototype.__init81.call(this);_class5.prototype.__init82.call(this);_class5.prototype.__init83.call(this);_class5.prototype.__init84.call(this);_class5.prototype.__init85.call(this);_class5.prototype.__init86.call(this);;
+    super();_class9.prototype.__init134.call(this);_class9.prototype.__init135.call(this);_class9.prototype.__init136.call(this);_class9.prototype.__init137.call(this);_class9.prototype.__init138.call(this);_class9.prototype.__init139.call(this);;
     this.doc = doc;
     this.lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
     this.cache = _nullishCoalesce(opts.cache, () => ( true));
@@ -3098,7 +4876,7 @@ var SplineEntity = (_class5 = class extends _chunk2Z23LTH3js.Entity {
     this.width = this.bounds.width;
     this.height = this.bounds.height;
     const isGradient = (c) => c !== null && !Array.isArray(c);
-    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _111 => _111.doc, 'access', _112 => _112.equations, 'optionalAccess', _113 => _113.some, 'call', _114 => _114((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _115 => _115.doc, 'access', _116 => _116.paths, 'optionalAccess', _117 => _117.some, 'call', _118 => _118((p) => isGradient(p.color_rgb))]), () => ( false)));
+    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _140 => _140.doc, 'access', _141 => _141.equations, 'optionalAccess', _142 => _142.some, 'call', _143 => _143((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _144 => _144.doc, 'access', _145 => _145.paths, 'optionalAccess', _146 => _146.some, 'call', _147 => _147((p) => isGradient(p.color_rgb))]), () => ( false)));
     this.interactive = true;
   }
   computeBounds() {
@@ -3331,14 +5109,14 @@ var SplineEntity = (_class5 = class extends _chunk2Z23LTH3js.Entity {
       r.stroke("rgba(0, 150, 255, 0.8)", 2);
     }
   }
-}, _class5);
+}, _class9);
 async function loadSpline(url) {
   const res = await fetch(url);
   return await res.json();
 }
 
 // src/components/Rect.ts
-var Rect = class extends _chunk2Z23LTH3js.Entity {
+var Rect = class extends _chunkDUYB4GX4js.Entity {
   
   
   
@@ -3387,7 +5165,7 @@ var Rect = class extends _chunk2Z23LTH3js.Entity {
 };
 
 // src/components/Circle.ts
-var Circle = class extends _chunk2Z23LTH3js.Entity {
+var Circle = class extends _chunkDUYB4GX4js.Entity {
   
   
   
@@ -3447,7 +5225,7 @@ var Circle = class extends _chunk2Z23LTH3js.Entity {
 };
 
 // src/components/Group.ts
-var Group = class extends _chunk2Z23LTH3js.Entity {
+var Group = class extends _chunkDUYB4GX4js.Entity {
   constructor(...children) {
     super();
     if (children.length > 0) this.add(...children);
@@ -3459,115 +5237,28 @@ var Group = class extends _chunk2Z23LTH3js.Entity {
   }
 };
 
-// src/math/SpatialHashGrid.ts
-var SpatialHashGrid = (_class6 = class {
-  
-  __init87() {this.grid = /* @__PURE__ */ new Map()}
-  __init88() {this.entityCells = /* @__PURE__ */ new Map()}
-  constructor(cellSize = 64) {;_class6.prototype.__init87.call(this);_class6.prototype.__init88.call(this);
-    this.cellSize = cellSize;
-  }
-  hash(cx, cy) {
-    const x = cx < 0 ? -2 * cx - 1 : 2 * cx;
-    const y = cy < 0 ? -2 * cy - 1 : 2 * cy;
-    return (x + y) * (x + y + 1) / 2 + y;
-  }
-  cellsForAABB(x, y, w, h) {
-    const minCx = Math.floor(x / this.cellSize);
-    const minCy = Math.floor(y / this.cellSize);
-    const maxCx = Math.floor((x + w) / this.cellSize);
-    const maxCy = Math.floor((y + h) / this.cellSize);
-    const keys = [];
-    for (let cx = minCx; cx <= maxCx; cx++) {
-      for (let cy = minCy; cy <= maxCy; cy++) {
-        keys.push(this.hash(cx, cy));
-      }
-    }
-    return keys;
-  }
-  /**
-   * Insert or update an entity's axis-aligned bounding box in the grid.
-   *
-   * If the entity is already registered its old cell memberships are removed
-   * before the new ones are computed, so this method is safe to call every
-   * frame.
-   *
-   * @param id - Unique string identifier for the entity.
-   * @param x - Left edge of the AABB in world space.
-   * @param y - Top edge of the AABB in world space.
-   * @param w - Width of the AABB.
-   * @param h - Height of the AABB.
-   */
-  insert(id, x, y, w, h) {
-    this.remove(id);
-    const keys = this.cellsForAABB(x, y, w, h);
-    this.entityCells.set(id, keys);
-    for (const key of keys) {
-      if (!this.grid.has(key)) this.grid.set(key, /* @__PURE__ */ new Set());
-      this.grid.get(key).add(id);
-    }
-  }
-  /**
-   * Remove an entity from all grid cells it currently occupies.
-   *
-   * Silently does nothing if the entity is not registered.
-   *
-   * @param id - Unique string identifier of the entity to remove.
-   */
-  remove(id) {
-    const keys = this.entityCells.get(id);
-    if (!keys) return;
-    for (const key of keys) {
-      _optionalChain([this, 'access', _119 => _119.grid, 'access', _120 => _120.get, 'call', _121 => _121(key), 'optionalAccess', _122 => _122.delete, 'call', _123 => _123(id)]);
-    }
-    this.entityCells.delete(id);
-  }
-  /**
-   * Return all entity IDs whose grid cells overlap the given AABB.
-   *
-   * Time complexity: O(k) where k is the number of cells the query AABB spans
-   * plus the number of results — O(1) average for small, similarly-sized entities.
-   *
-   * @param x - Left edge of the query AABB.
-   * @param y - Top edge of the query AABB.
-   * @param w - Width of the query AABB.
-   * @param h - Height of the query AABB.
-   * @returns A `Set` of entity ID strings whose cells intersect the query region.
-   */
-  query(x, y, w, h) {
-    const result = /* @__PURE__ */ new Set();
-    for (const key of this.cellsForAABB(x, y, w, h)) {
-      const cell = this.grid.get(key);
-      if (cell) for (const id of cell) result.add(id);
-    }
-    return result;
-  }
-  /**
-   * Clear all cells and entity registrations, resetting the grid to an empty state.
-   *
-   * Call once per frame before re-inserting all dynamic entities.
-   */
-  clear() {
-    this.grid.clear();
-    this.entityCells.clear();
-  }
-}, _class6);
+// src/index.ts
+
+
+var _math = require('@vectojs/math'); _createStarExport(_math);
+
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class7 = class extends _chunk2Z23LTH3js.Entity {
-  
-  __init89() {this.isDOMPortal = true}
-  __init90() {this.domListeners = []}
-  __init91() {this.resizeObserver = null}
-  __init92() {this.cachedWidth = 100}
-  __init93() {this.cachedHeight = 100}
-  __init94() {this.lastWidth = ""}
-  __init95() {this.lastHeight = ""}
-  __init96() {this.lastTransform = ""}
-  __init97() {this.lastZIndex = ""}
-  __init98() {this.lastOpacity = ""}
+var DOMPortalEntity = (_class10 = class extends _chunkDUYB4GX4js.Entity {
+  
+  __init140() {this.isDOMPortal = true}
+  __init141() {this.domListeners = []}
+  __init142() {this.resizeObserver = null}
+  __init143() {this.domBound = false}
+  __init144() {this.cachedWidth = 100}
+  __init145() {this.cachedHeight = 100}
+  __init146() {this.lastWidth = ""}
+  __init147() {this.lastHeight = ""}
+  __init148() {this.lastTransform = ""}
+  __init149() {this.lastZIndex = ""}
+  __init150() {this.lastOpacity = ""}
   constructor(domElement, width, height, id) {
-    super(id);_class7.prototype.__init89.call(this);_class7.prototype.__init90.call(this);_class7.prototype.__init91.call(this);_class7.prototype.__init92.call(this);_class7.prototype.__init93.call(this);_class7.prototype.__init94.call(this);_class7.prototype.__init95.call(this);_class7.prototype.__init96.call(this);_class7.prototype.__init97.call(this);_class7.prototype.__init98.call(this);;
+    super(id);_class10.prototype.__init140.call(this);_class10.prototype.__init141.call(this);_class10.prototype.__init142.call(this);_class10.prototype.__init143.call(this);_class10.prototype.__init144.call(this);_class10.prototype.__init145.call(this);_class10.prototype.__init146.call(this);_class10.prototype.__init147.call(this);_class10.prototype.__init148.call(this);_class10.prototype.__init149.call(this);_class10.prototype.__init150.call(this);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));
@@ -3577,50 +5268,84 @@ var DOMPortalEntity = (_class7 = class extends _chunk2Z23LTH3js.Entity {
       this.domElement.style.pointerEvents = "auto";
       this.cachedWidth = parseFloat(domElement.style.width) || domElement.offsetWidth || 100;
       this.cachedHeight = parseFloat(domElement.style.height) || domElement.offsetHeight || 100;
-      if (typeof ResizeObserver !== "undefined") {
-        this.resizeObserver = new ResizeObserver((entries) => {
-          for (const entry of entries) {
-            this.cachedWidth = entry.contentRect.width || entry.target.offsetWidth;
-            this.cachedHeight = entry.contentRect.height || entry.target.offsetHeight;
-          }
-        });
-        this.resizeObserver.observe(this.domElement);
-      }
-      const events = [
-        "click",
-        "pointerdown",
-        "pointerup",
-        "pointercancel",
-        "pointermove",
-        "wheel"
-      ];
-      for (const type of events) {
-        const handler = (e) => {
-          this.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)(type, this, e));
-        };
-        this.domElement.addEventListener(type, handler);
-        this.domListeners.push({ type, handler, capture: false });
-      }
-      const hoverEvents = [
-        { native: "mouseenter", vecto: "hover" },
-        { native: "mouseleave", vecto: "pointerleave" }
-      ];
-      for (const { native, vecto } of hoverEvents) {
-        const handler = (e) => {
-          this.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)(vecto, this, e, false));
-        };
-        this.domElement.addEventListener(native, handler);
-        this.domListeners.push({ type: native, handler, capture: false });
-      }
-      const focusEvents = ["focus", "blur"];
-      for (const type of focusEvents) {
-        const handler = (e) => {
-          this.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)(type, this, e, true));
-        };
-        this.domElement.addEventListener(type, handler, true);
-        this.domListeners.push({ type, handler, capture: true });
+      this.attachDOMBindings();
+    }
+  }
+  /**
+   * Attach the ResizeObserver + DOM event listeners that bridge native DOM
+   * events into the Vecto event system. Idempotent: safe to call every frame
+   * from the projection path (`Scene.syncPortalGeometry`), which is what lets a
+   * portal survive a `scene.remove()` -> re-add cycle — {@link releaseDOMBindings}
+   * tears these down on removal and the next projection re-attaches them.
+   */
+  attachDOMBindings() {
+    if (this.domBound || typeof window === "undefined") return;
+    this.domBound = true;
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          this.cachedWidth = entry.contentRect.width || entry.target.offsetWidth;
+          this.cachedHeight = entry.contentRect.height || entry.target.offsetHeight;
+        }
+      });
+      this.resizeObserver.observe(this.domElement);
+    }
+    const events = [
+      "click",
+      "pointerdown",
+      "pointerup",
+      "pointercancel",
+      "pointermove",
+      "wheel"
+    ];
+    for (const type of events) {
+      const handler = (e) => {
+        this.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)(type, this, e));
+      };
+      this.domElement.addEventListener(type, handler);
+      this.domListeners.push({ type, handler, capture: false });
+    }
+    const hoverEvents = [
+      { native: "mouseenter", vecto: "hover" },
+      { native: "mouseleave", vecto: "pointerleave" }
+    ];
+    for (const { native, vecto } of hoverEvents) {
+      const handler = (e) => {
+        this.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)(vecto, this, e, false));
+      };
+      this.domElement.addEventListener(native, handler);
+      this.domListeners.push({ type: native, handler, capture: false });
+    }
+    const focusEvents = ["focus", "blur"];
+    for (const type of focusEvents) {
+      const handler = (e) => {
+        this.dispatchEvent(new (0, _chunkDUYB4GX4js.VectoJSEvent)(type, this, e, true));
+      };
+      this.domElement.addEventListener(type, handler, true);
+      this.domListeners.push({ type, handler, capture: true });
+    }
+  }
+  /**
+   * Disconnect the ResizeObserver and remove the DOM event listeners, without
+   * touching the scene graph or the element's DOM parentage. Called on the
+   * `scene.remove()` path so a detached portal doesn't leak an observer that
+   * keeps its element alive and firing; the element itself is removed from the
+   * document by the scene's portal pruning. Re-attached lazily on the next
+   * projection frame via {@link attachDOMBindings}.
+   */
+  releaseDOMBindings() {
+    if (!this.domBound) return;
+    this.domBound = false;
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (this.domElement) {
+      for (const { type, handler, capture } of this.domListeners) {
+        this.domElement.removeEventListener(type, handler, capture);
       }
     }
+    this.domListeners = [];
   }
   isPointInside(globalX, globalY) {
     const w = this.width > 0 ? this.width : this.cachedWidth;
@@ -3636,43 +5361,17 @@ var DOMPortalEntity = (_class7 = class extends _chunk2Z23LTH3js.Entity {
   render() {
   }
   destroy() {
-    if (typeof window !== "undefined") {
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect();
-        this.resizeObserver = null;
-      }
-      if (this.domElement) {
-        for (const { type, handler, capture } of this.domListeners) {
-          this.domElement.removeEventListener(type, handler, capture);
-        }
-        this.domListeners = [];
-        this.domElement.remove();
-      }
+    this.releaseDOMBindings();
+    if (typeof window !== "undefined" && this.domElement) {
+      this.domElement.remove();
     }
     super.destroy();
   }
-}, _class7);
+}, _class10);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkBEUIB3U7js.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkBEUIB3U7js.WebGPUParticleSystemManager);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+Scene.registerWebGLPointRendererCreator(_chunkIYPLG4Z4js.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkIYPLG4Z4js.WebGPUParticleSystemManager);
 
 
 
@@ -3707,4 +5406,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkBEUIB3U7js.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.CanvasRenderer = _chunkBEUIB3U7js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunk2Z23LTH3js.Easing; exports.Entity = _chunk2Z23LTH3js.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.LayoutEngine = _chunkBA5HUUDFjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBA5HUUDFjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk4AR425ARjs.LayoutWorkerManager; exports.MSDFFont = _chunk2Z23LTH3js.MSDFFont; exports.MSDFTextEntity = _chunk2Z23LTH3js.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SVGEntity = _chunk2Z23LTH3js.SVGEntity; exports.SVGRenderer = _chunkBEUIB3U7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunk2Z23LTH3js.SpringDriver; exports.SpringPhysics = _chunk2Z23LTH3js.SpringPhysics; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkBEUIB3U7js.TextRasterCache; exports.TweenDriver = _chunk2Z23LTH3js.TweenDriver; exports.VectoJSEvent = _chunk2Z23LTH3js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkBEUIB3U7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunk2Z23LTH3js.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkBA5HUUDFjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkBEUIB3U7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunk2Z23LTH3js.cssLineBoxBaseline; exports.isSafeUrl = _chunkBEUIB3U7js.isSafeUrl; exports.isTweenConfig = _chunk2Z23LTH3js.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkBEUIB3U7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.prepareContentGrid = _chunk2Z23LTH3js.prepareContentGrid; exports.sanitizeUrl = _chunkBEUIB3U7js.sanitizeUrl;
+exports.CanvasRenderer = _chunkIYPLG4Z4js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkDUYB4GX4js.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkDUYB4GX4js.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SVGEntity = _chunkDUYB4GX4js.SVGEntity; exports.SVGRenderer = _chunkIYPLG4Z4js.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkIYPLG4Z4js.TextRasterCache; exports.VectoJSEvent = _chunkDUYB4GX4js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkIYPLG4Z4js.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkIYPLG4Z4js.createWebGLPointRenderer; exports.isSafeUrl = _chunkIYPLG4Z4js.isSafeUrl; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkIYPLG4Z4js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkIYPLG4Z4js.sanitizeUrl;