@vectojs/core 0.1.0

package/dist/index.js

@@ -0,0 +1,2238 @@
+"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; var _class8;
+
+
+
+
+var _chunk72WVPMSJjs = require('./chunk-72WVPMSJ.js');
+
+
+
+
+
+
+var _chunkLIX7DJTIjs = require('./chunk-LIX7DJTI.js');
+
+
+
+
+
+
+var _chunk53DAQC3Ujs = require('./chunk-53DAQC3U.js');
+
+
+
+
+var _chunkRW6NC4RBjs = require('./chunk-RW6NC4RB.js');
+
+// src/tree/ComputeParticleEntity.ts
+var PARTICLE_STRIDE_FLOATS = 8;
+var PARTICLE_OFFSET_POSITION_X = 0;
+var PARTICLE_OFFSET_POSITION_Y = 1;
+var PARTICLE_OFFSET_VELOCITY_X = 2;
+var PARTICLE_OFFSET_VELOCITY_Y = 3;
+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 _chunk53DAQC3Ujs.Entity {
+  
+  
+  
+  
+  
+  
+  
+  
+  /** Flat array containing layout of all particles: position, velocity, origin, size, life. */
+  
+  /** Flag indicating whether the particle coordinates need to be initialized. */
+  __init() {this.needsInit = true}
+  /** Active explosion impulse to apply in the next simulation step. */
+  __init2() {this.pendingExplosion = null}
+  /** WebGPU storage buffer containing particle states. */
+  __init3() {this.gpuStorageBuffer = null}
+  /** WebGPU uniform buffer containing simulation parameters. */
+  __init4() {this.gpuUniformBuffer = null}
+  /** WebGPU bind group for the compute shader pass. */
+  __init5() {this.computeBindGroup = null}
+  /** WebGPU bind group for the render pass (usually same as compute). */
+  __init6() {this.renderBindGroup = 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);;
+    this.maxParticles = _nullishCoalesce(options.maxParticles, () => ( 1e4));
+    this.springK = _nullishCoalesce(options.springK, () => ( 0.05));
+    this.damping = _nullishCoalesce(options.damping, () => ( 0.95));
+    this.bounceDamping = _nullishCoalesce(options.bounceDamping, () => ( 0.5));
+    this.maxVelocity = _nullishCoalesce(options.maxVelocity, () => ( 500));
+    this.size = _nullishCoalesce(options.size, () => ( 4));
+    this.baseColor = _nullishCoalesce(options.color, () => ( "#00f0ff"));
+    this.pointerEvents = _nullishCoalesce(options.pointerEvents, () => ( false));
+    this.particleData = new Float32Array(this.maxParticles * PARTICLE_STRIDE_FLOATS);
+    this.interactive = true;
+  }
+  /**
+   * Disperses all particles randomly across the specified screen bounds.
+   * Sets initial positions, velocities, origins, and sizes.
+   *
+   * @param width - Simulation zone width.
+   * @param height - Simulation zone height.
+   */
+  initRandomParticles(width, height) {
+    const safeW = Math.max(1, width);
+    const safeH = Math.max(1, height);
+    for (let i = 0; i < this.maxParticles; i++) {
+      const idx = i * PARTICLE_STRIDE_FLOATS;
+      const x = Math.random() * safeW;
+      const y = Math.random() * safeH;
+      this.particleData[idx + PARTICLE_OFFSET_POSITION_X] = x;
+      this.particleData[idx + PARTICLE_OFFSET_POSITION_Y] = y;
+      this.particleData[idx + PARTICLE_OFFSET_VELOCITY_X] = 0;
+      this.particleData[idx + PARTICLE_OFFSET_VELOCITY_Y] = 0;
+      this.particleData[idx + PARTICLE_OFFSET_ORIGIN_X] = x;
+      this.particleData[idx + PARTICLE_OFFSET_ORIGIN_Y] = y;
+      this.particleData[idx + PARTICLE_OFFSET_SIZE] = this.size;
+      this.particleData[idx + PARTICLE_OFFSET_LIFE] = -1;
+    }
+    this.needsInit = true;
+    _optionalChain([this, 'access', _ => _.scene, 'optionalAccess', _2 => _2.markDirty, 'call', _3 => _3()]);
+  }
+  /**
+   * Sets the origins (ox, oy) for a subset or all particles.
+   * Also sets position to origin if requestPositionReset is true.
+   *
+   * @param points - Flat Float32Array containing [x0, y0, x1, y1, ...]
+   * @param requestPositionReset - Whether to set current positions to the new origins. Defaults to true.
+   */
+  setOrigins(points, requestPositionReset = true) {
+    const len = Math.min(this.maxParticles, Math.floor(points.length / 2));
+    for (let i = 0; i < len; i++) {
+      const idx = i * PARTICLE_STRIDE_FLOATS;
+      const ptIdx = i * 2;
+      const ox = points[ptIdx];
+      const oy = points[ptIdx + 1];
+      this.particleData[idx + PARTICLE_OFFSET_ORIGIN_X] = ox;
+      this.particleData[idx + PARTICLE_OFFSET_ORIGIN_Y] = oy;
+      if (requestPositionReset) {
+        this.particleData[idx + PARTICLE_OFFSET_POSITION_X] = ox;
+        this.particleData[idx + PARTICLE_OFFSET_POSITION_Y] = oy;
+        this.particleData[idx + PARTICLE_OFFSET_VELOCITY_X] = 0;
+        this.particleData[idx + PARTICLE_OFFSET_VELOCITY_Y] = 0;
+      }
+    }
+    this.needsInit = true;
+    _optionalChain([this, 'access', _4 => _4.scene, 'optionalAccess', _5 => _5.markDirty, 'call', _6 => _6()]);
+  }
+  /**
+   * Sets the current positions (x, y) for a subset or all particles.
+   *
+   * @param positions - Flat Float32Array containing [x0, y0, x1, y1, ...]
+   */
+  setPositions(positions) {
+    const len = Math.min(this.maxParticles, Math.floor(positions.length / 2));
+    for (let i = 0; i < len; i++) {
+      const idx = i * PARTICLE_STRIDE_FLOATS;
+      const ptIdx = i * 2;
+      this.particleData[idx + PARTICLE_OFFSET_POSITION_X] = positions[ptIdx];
+      this.particleData[idx + PARTICLE_OFFSET_POSITION_Y] = positions[ptIdx + 1];
+    }
+    this.needsInit = true;
+    _optionalChain([this, 'access', _7 => _7.scene, 'optionalAccess', _8 => _8.markDirty, 'call', _9 => _9()]);
+  }
+  /**
+   * Sets the current velocities (vx, vy) for a subset or all particles.
+   *
+   * @param velocities - Flat Float32Array containing [vx0, vy0, vx1, vy1, ...]
+   */
+  setVelocities(velocities) {
+    const len = Math.min(this.maxParticles, Math.floor(velocities.length / 2));
+    for (let i = 0; i < len; i++) {
+      const idx = i * PARTICLE_STRIDE_FLOATS;
+      const ptIdx = i * 2;
+      this.particleData[idx + PARTICLE_OFFSET_VELOCITY_X] = velocities[ptIdx];
+      this.particleData[idx + PARTICLE_OFFSET_VELOCITY_Y] = velocities[ptIdx + 1];
+    }
+    this.needsInit = true;
+    _optionalChain([this, 'access', _10 => _10.scene, 'optionalAccess', _11 => _11.markDirty, 'call', _12 => _12()]);
+  }
+  /**
+   * Triggers an explosion force center.
+   *
+   * @param x - Explosion center x-coordinate.
+   * @param y - Explosion center y-coordinate.
+   * @param force - Magnitude force scalar.
+   */
+  triggerExplosion(x, y, force) {
+    this.pendingExplosion = { x, y, force };
+  }
+  isPointInside(_x, _y) {
+    return this.pointerEvents;
+  }
+  render(_r) {
+  }
+  /**
+   * Updates particle simulation on the CPU.
+   * Handles spring forces, mouse repulsion, explosion impulses, velocity capping, and bounds bouncing/clamping.
+   *
+   * @param dt - Delta time in seconds.
+   * @param mouseX - Mouse x-coordinate, or a value below -9000 if inactive.
+   * @param mouseY - Mouse y-coordinate, or a value below -9000 if inactive.
+   * @param width - Boundary width.
+   * @param height - Boundary height.
+   */
+  updateCPU(dt, mouseX, mouseY, width, height) {
+    const safeDt = isNaN(dt) ? 0.016 : Math.max(0, Math.min(dt, 0.1));
+    const explosion = this.pendingExplosion;
+    const safeWidth = Math.max(1, width);
+    const safeHeight = Math.max(1, height);
+    const springK = Math.max(0, Math.min(10, this.springK));
+    const damping = Math.max(0, Math.min(1, this.damping));
+    const bounceDamping = Math.max(0, Math.min(1, this.bounceDamping));
+    const maxVelocity = Math.max(1, this.maxVelocity);
+    for (let i = 0; i < this.maxParticles; i++) {
+      const offset = i * 8;
+      let px = this.particleData[offset];
+      let py = this.particleData[offset + 1];
+      let vx = this.particleData[offset + 2];
+      let vy = this.particleData[offset + 3];
+      const ox = this.particleData[offset + 4];
+      const oy = this.particleData[offset + 5];
+      const life = this.particleData[offset + 7];
+      if (isNaN(px)) px = ox;
+      if (isNaN(py)) py = oy;
+      if (isNaN(vx)) vx = 0;
+      if (isNaN(vy)) vy = 0;
+      const fx_spring = (ox - px) * springK;
+      const fy_spring = (oy - py) * springK;
+      let fx_mouse = 0;
+      let fy_mouse = 0;
+      if (!isNaN(mouseX) && !isNaN(mouseY) && mouseX > -9e3 && mouseY > -9e3) {
+        const dx = mouseX - px;
+        const dy = mouseY - py;
+        const dist = Math.hypot(dx, dy);
+        if (dist < 120 && dist > 0.1) {
+          const forceMag = (120 - dist) * 2;
+          fx_mouse = -(dx / dist) * forceMag;
+          fy_mouse = -(dy / dist) * forceMag;
+        }
+      }
+      let fx_expl = 0;
+      let fy_expl = 0;
+      if (explosion) {
+        const ex = explosion.x - px;
+        const ey = explosion.y - py;
+        const edist = Math.hypot(ex, ey);
+        if (edist < 150 && edist > 0.1) {
+          const forceMag = (150 - edist) * explosion.force;
+          fx_expl = -(ex / edist) * forceMag;
+          fy_expl = -(ey / edist) * forceMag;
+        }
+      }
+      const ax = fx_spring + fx_mouse + fx_expl;
+      const ay = fy_spring + fy_mouse + fy_expl;
+      let nvx = (vx + ax * safeDt) * damping;
+      let nvy = (vy + ay * safeDt) * damping;
+      const speed = Math.hypot(nvx, nvy);
+      if (speed > maxVelocity) {
+        nvx = nvx / speed * maxVelocity;
+        nvy = nvy / speed * maxVelocity;
+      }
+      let npx = px + nvx * safeDt;
+      let npy = py + nvy * safeDt;
+      if (npx <= 0 && nvx < 0) {
+        nvx = -nvx * bounceDamping;
+      } else if (npx >= safeWidth && nvx > 0) {
+        nvx = -nvx * bounceDamping;
+      }
+      if (npy <= 0 && nvy < 0) {
+        nvy = -nvy * bounceDamping;
+      } else if (npy >= safeHeight && nvy > 0) {
+        nvy = -nvy * bounceDamping;
+      }
+      npx = Math.max(0, Math.min(safeWidth, npx));
+      npy = Math.max(0, Math.min(safeHeight, npy));
+      let nlife = life;
+      if (life >= 0) {
+        nlife = Math.max(0, life - safeDt * 0.5);
+      }
+      this.particleData[offset] = npx;
+      this.particleData[offset + 1] = npy;
+      this.particleData[offset + 2] = nvx;
+      this.particleData[offset + 3] = nvy;
+      this.particleData[offset + 7] = nlife;
+    }
+    this.pendingExplosion = null;
+  }
+  destroy() {
+    this.destroyGPUResources();
+    super.destroy();
+  }
+  /**
+   * Frees all GPU resources allocated for WebGPU simulation.
+   */
+  destroyGPUResources() {
+    if (this.gpuStorageBuffer) {
+      if (typeof this.gpuStorageBuffer.destroy === "function") {
+        this.gpuStorageBuffer.destroy();
+      }
+      this.gpuStorageBuffer = null;
+    }
+    if (this.gpuUniformBuffer) {
+      if (typeof this.gpuUniformBuffer.destroy === "function") {
+        this.gpuUniformBuffer.destroy();
+      }
+      this.gpuUniformBuffer = null;
+    }
+    this.computeBindGroup = null;
+    this.renderBindGroup = null;
+  }
+}, _class);
+
+// src/tree/Scene.ts
+var REDUCED_MOTION_FPS = 30;
+var Scene = (_class2 = class _Scene {
+  static __initStatic() {this.webglCreator = null}
+  static __initStatic2() {this.webgpuManagerClass = null}
+  static registerWebGLPointRendererCreator(creator) {
+    _Scene.webglCreator = creator;
+  }
+  static registerWebGPUParticleSystemManager(managerClass) {
+    _Scene.webgpuManagerClass = managerClass;
+  }
+  
+  
+  
+  __init7() {this.isRunning = false}
+  __init8() {this.lastTime = 0}
+  
+  /**
+   * Redraw strategy:
+   * - `'always'` (default): re-render every animation frame (legacy behavior).
+   * - `'onDemand'`: only re-render when the scene is marked dirty (via
+   *   {@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}
+  /**
+   * 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}.
+   */
+  __init11() {this.maxFPS = 60}
+  /** Whether the OS prefers-reduced-motion setting auto-caps the loop. */
+  __init12() {this.respectReducedMotion = true}
+  /** Cached media-query list; `.matches` is read live each frame. */
+  __init13() {this.reducedMotionQuery = null}
+  /**
+   * Throttle interval (ms) for the a11y/automation shadow sync. `0` = every
+   * frame. See {@link SceneOptions.a11ySyncInterval}.
+   */
+  __init14() {this.a11ySyncInterval = 0}
+  /** Timestamp of the last a11y sync, for throttling. */
+  __init15() {this.lastA11ySync = -Infinity}
+  /** True if we skipped an a11y sync during animation and need to sync when at rest. */
+  __init16() {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.
+  
+  __init17() {this.a11yElements = /* @__PURE__ */ new Map()}
+  
+  __init18() {this.focusedA11yElement = null}
+  __init19() {this.caretBlinkTimer = null}
+  __init20() {this.a11yNeedsReorder = true}
+  __init21() {this.portalRoot = null}
+  __init22() {this.fullViewportElements = []}
+  __init23() {this.normalElements = []}
+  __init24() {this.activeIds = /* @__PURE__ */ new Set()}
+  __init25() {this.activePortalsThisFrame = /* @__PURE__ */ new Set()}
+  __init26() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
+  __init27() {this.portalEntities = /* @__PURE__ */ new Map()}
+  __init28() {this.renderOrderCounter = 0}
+  // Optional WebGL point-cloud layer (see SceneOptions.pointBackend).
+  __init29() {this.pointRenderer = null}
+  __init30() {this.glCanvas = null}
+  
+  
+  
+  __init31() {this.disableWindowResize = false}
+  // WebGPU properties
+  __init32() {this.destroyed = false}
+  __init33() {this.device = null}
+  __init34() {this.deviceLost = false}
+  __init35() {this.particleBackend = "auto"}
+  __init36() {this._webgpuDisabled = false}
+  get webgpuDisabled() {
+    return this._webgpuDisabled || this.particleBackend === "cpu";
+  }
+  set webgpuDisabled(value) {
+    this._webgpuDisabled = value;
+  }
+  __init37() {this.recoveryTimerId = null}
+  __init38() {this.manager = null}
+  __init39() {this.initializingWebGPU = false}
+  __init40() {this.gpuCanvas = null}
+  __init41() {this.gpuContext = null}
+  __init42() {this.mouseX = -9999}
+  __init43() {this.mouseY = -9999}
+  __init44() {this.pointerMoveListener = null}
+  __init45() {this.pointerLeaveListener = null}
+  __init46() {this.hasWarnedZeroSize = false}
+  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);
+    this.canvas = canvas;
+    this.debugA11y = _nullishCoalesce(options.debugA11y, () => ( false));
+    this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
+    if (this.disableWindowResize) {
+      this.width = canvas.width || canvas.clientWidth || 0;
+      this.height = canvas.height || canvas.clientHeight || 0;
+    } else {
+      this.width = typeof window !== "undefined" ? window.innerWidth : canvas.clientWidth || canvas.width || 800;
+      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', _13 => _13.env, 'optionalAccess', _14 => _14.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _15 => _15.env, 'optionalAccess', _16 => _16.VITEST]) === "true");
+    this.maxFPS = _nullishCoalesce(options.maxFPS, () => ( (isTest ? 0 : 60)));
+    this.respectReducedMotion = _nullishCoalesce(options.respectReducedMotion, () => ( true));
+    this.particleBackend = _nullishCoalesce(options.particleBackend, () => ( "auto"));
+    this.a11ySyncInterval = _nullishCoalesce(options.a11ySyncInterval, () => ( 0));
+    this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
+    this.root = new class RootEntity extends _chunk53DAQC3Ujs.Entity {
+      isPointInside() {
+        return false;
+      }
+      // Root renders nothing itself — renderNode() handles all child traversal.
+      render(_r) {
+      }
+    }("root");
+    this.root._scene = this;
+    this.overlayRoot = new class OverlayRoot extends _chunk53DAQC3Ujs.Entity {
+      isPointInside() {
+        return false;
+      }
+      render() {
+      }
+    }("overlayRoot");
+    this.overlayRoot._scene = this;
+    if (options.renderer) {
+      this.renderer = options.renderer;
+    } else {
+      this.renderer = new (0, _chunkLIX7DJTIjs.CanvasRenderer)(canvas);
+    }
+    if (typeof document !== "undefined") {
+      this.a11yRoot = document.createElement("div");
+      this.a11yRoot.style.position = "absolute";
+      this.a11yRoot.style.top = "0";
+      this.a11yRoot.style.left = "0";
+      this.a11yRoot.style.width = "100vw";
+      this.a11yRoot.style.height = "100vh";
+      this.a11yRoot.style.pointerEvents = "none";
+      this.a11yRoot.style.overflow = "hidden";
+      this.a11yRoot.style.zIndex = "10";
+      if (canvas.parentElement) {
+        canvas.parentElement.appendChild(this.a11yRoot);
+      }
+      this.portalRoot = document.createElement("div");
+      this.portalRoot.style.position = "absolute";
+      this.portalRoot.style.top = "0";
+      this.portalRoot.style.left = "0";
+      this.portalRoot.style.width = "100vw";
+      this.portalRoot.style.height = "100vh";
+      this.portalRoot.style.pointerEvents = "none";
+      this.portalRoot.style.overflow = "hidden";
+      this.portalRoot.style.zIndex = "9";
+      if (canvas.parentElement) {
+        canvas.parentElement.appendChild(this.portalRoot);
+      }
+    } else {
+      this.a11yRoot = null;
+      this.portalRoot = null;
+    }
+    if (options.pointBackend === "webgl" && typeof document !== "undefined") {
+      const gl = document.createElement("canvas");
+      gl.style.position = "absolute";
+      gl.style.top = "0";
+      gl.style.left = "0";
+      gl.style.pointerEvents = "none";
+      gl.style.zIndex = "5";
+      if (canvas.parentElement) canvas.parentElement.appendChild(gl);
+      const pr = _Scene.webglCreator ? _Scene.webglCreator(gl) : null;
+      if (pr) {
+        pr.resize(this.width, this.height);
+        this.glCanvas = gl;
+        this.pointRenderer = pr;
+      } else {
+        gl.remove();
+      }
+    }
+    this.resizeHandler = () => {
+      this.resize(window.innerWidth, window.innerHeight);
+    };
+    this.setupEvents();
+  }
+  /**
+   * Expose the underlying {@link IRenderer} for advanced direct-draw operations.
+   *
+   * @returns The active renderer instance.
+   */
+  getRenderer() {
+    return this.renderer;
+  }
+  /**
+   * Add a top-level entity to the scene graph.
+   *
+   * @param entity - The entity to attach to the scene root.
+   * @returns `this` for method chaining.
+   * @example scene.add(new CircleEntity());
+   */
+  add(entity) {
+    this.root.add(entity);
+    return this;
+  }
+  removeA11yRecursively(node) {
+    if (node.isDOMPortal) {
+      node.domElement.remove();
+      this.portalEntities.delete(node.id);
+      this.activePortalsThisFrame.delete(node.id);
+      this.activePortalsPrevFrame.delete(node.id);
+    }
+    const el = this.a11yElements.get(node.id);
+    if (el) {
+      if (el === this.focusedA11yElement) {
+        this.focusedA11yElement = null;
+        if (this.caretBlinkTimer) {
+          clearInterval(this.caretBlinkTimer);
+          this.caretBlinkTimer = null;
+        }
+      }
+      el.remove();
+      this.a11yElements.delete(node.id);
+      this.a11yNeedsReorder = true;
+    }
+    for (const child of node.children) {
+      this.removeA11yRecursively(child);
+    }
+  }
+  /**
+   * Remove a top-level entity from the scene graph and clean up its
+   * accessibility shadow elements recursively.
+   *
+   * @param entity - The entity to detach from the scene root.
+   * @returns `this` for method chaining.
+   */
+  remove(entity) {
+    this.root.remove(entity);
+    this.removeA11yRecursively(entity);
+    return this;
+  }
+  /**
+   * Tear down the a11y/automation shadow nodes for `entity` and its descendants
+   * without removing it from the scene graph. Components that manage dynamic
+   * interactive *child* entities (e.g. a {@link Entity}'s per-link hotspots) call
+   * this before discarding those children so their shadow `<a>`/controls don't
+   * leak (the per-frame `syncA11y` only creates/updates, it never prunes).
+   *
+   * @param entity - The subtree whose shadow nodes should be removed.
+   */
+  detachA11y(entity) {
+    this.removeA11yRecursively(entity);
+  }
+  /**
+   * Add an overlay entity to the overlay root, bypassing main tree clipping bounds.
+   */
+  showOverlay(overlay) {
+    this.overlayRoot.add(overlay);
+    this.markDirty();
+  }
+  /**
+   * Remove an overlay entity from the overlay root.
+   */
+  hideOverlay(overlay) {
+    this.overlayRoot.remove(overlay);
+    this.removeA11yRecursively(overlay);
+    this.markDirty();
+  }
+  /**
+   * Tear down the Scene, halt the loop, and clean up event listeners and DOM elements.
+   */
+  destroy() {
+    this.destroyed = true;
+    this.stop();
+    if (typeof window !== "undefined" && !this.disableWindowResize) {
+      window.removeEventListener("resize", this.resizeHandler);
+    }
+    if (typeof window !== "undefined" && this.canvas && typeof this.canvas.removeEventListener === "function") {
+      if (this.pointerMoveListener) {
+        this.canvas.removeEventListener("pointermove", this.pointerMoveListener);
+      }
+      if (this.pointerLeaveListener) {
+        this.canvas.removeEventListener("pointerleave", this.pointerLeaveListener);
+      }
+    }
+    _optionalChain([this, 'access', _17 => _17.a11yRoot, 'optionalAccess', _18 => _18.remove, 'call', _19 => _19()]);
+    _optionalChain([this, 'access', _20 => _20.portalRoot, 'optionalAccess', _21 => _21.remove, 'call', _22 => _22()]);
+    this.a11yElements.clear();
+    _optionalChain([this, 'access', _23 => _23.pointRenderer, 'optionalAccess', _24 => _24.destroy, 'call', _25 => _25()]);
+    _optionalChain([this, 'access', _26 => _26.glCanvas, 'optionalAccess', _27 => _27.remove, 'call', _28 => _28()]);
+    _optionalChain([this, 'access', _29 => _29.gpuCanvas, 'optionalAccess', _30 => _30.remove, 'call', _31 => _31()]);
+    this.gpuCanvas = null;
+    this.gpuContext = null;
+    if (this.recoveryTimerId) {
+      clearTimeout(this.recoveryTimerId);
+      this.recoveryTimerId = null;
+    }
+    if (this.manager) {
+      this.manager.destroy();
+      this.manager = null;
+    }
+  }
+  setupEvents() {
+    if (typeof window !== "undefined" && !this.disableWindowResize) {
+      window.addEventListener("resize", this.resizeHandler);
+    }
+    if (typeof window !== "undefined" && this.canvas && typeof this.canvas.addEventListener === "function") {
+      this.pointerMoveListener = (e) => {
+        const rect = this.canvas.getBoundingClientRect();
+        this.mouseX = e.clientX - rect.left;
+        this.mouseY = e.clientY - rect.top;
+      };
+      this.pointerLeaveListener = () => {
+        this.mouseX = -9999;
+        this.mouseY = -9999;
+      };
+      this.canvas.addEventListener("pointermove", this.pointerMoveListener);
+      this.canvas.addEventListener("pointerleave", this.pointerLeaveListener);
+    }
+  }
+  /**
+   * Begin the `requestAnimationFrame` render loop.
+   *
+   * Idempotent — calling `start()` on an already-running scene is a no-op.
+   */
+  start() {
+    if (this.isRunning) return;
+    if ((this.width === 0 || this.height === 0) && !this.hasWarnedZeroSize) {
+      console.warn(
+        `[VectoJS] Scene started with width or height set to 0 (width: ${this.width}, height: ${this.height}). Entities may not render or simulate correctly. Please call scene.resize(width, height) to set valid dimensions.`
+      );
+      this.hasWarnedZeroSize = true;
+    }
+    this.isRunning = true;
+    this.lastTime = typeof performance !== "undefined" ? performance.now() : 0;
+    this.scheduleFrame();
+    const isTextFocused = this.focusedA11yElement instanceof HTMLInputElement || this.focusedA11yElement instanceof HTMLTextAreaElement;
+    if (isTextFocused && this.renderMode === "onDemand" && !this.caretBlinkTimer) {
+      this.caretBlinkTimer = setInterval(() => {
+        this.markDirty();
+      }, 500);
+    }
+  }
+  /** Schedule the next frame, or no-op where `requestAnimationFrame` is absent (SSR). */
+  scheduleFrame() {
+    if (typeof requestAnimationFrame !== "undefined") {
+      requestAnimationFrame((t) => this.loop(t));
+    }
+  }
+  /**
+   * Halt the render loop after the current frame completes.
+   *
+   * Call {@link start} again to resume rendering.
+   */
+  stop() {
+    this.isRunning = false;
+    if (this.caretBlinkTimer) {
+      clearInterval(this.caretBlinkTimer);
+      this.caretBlinkTimer = null;
+    }
+  }
+  /**
+   * Mark the scene as needing a redraw on the next frame.
+   *
+   * Only meaningful in `onDemand` {@link renderMode}: call it after mutating
+   * entity state outside of {@link Entity.animate} so the change is rendered.
+   */
+  markDirty() {
+    this.dirty = true;
+  }
+  /** True when any node in the subtree has a pending animation. */
+  hasAnyPendingAnimation(node) {
+    if (node.hasPendingAnimations()) return true;
+    for (const child of node.children) {
+      if (this.hasAnyPendingAnimation(child)) return true;
+    }
+    return false;
+  }
+  /** True when any node in the subtree is interactive (drives a11y sync). */
+  hasAnyInteractive(node) {
+    if (node.interactive) return true;
+    for (const child of node.children) {
+      if (this.hasAnyInteractive(child)) return true;
+    }
+    return false;
+  }
+  syncA11y(node) {
+    if (!this.a11yRoot) return;
+    if (node.isDOMPortal) {
+      return;
+    }
+    if (node.interactive && (node.width > 0 || node.a11yFullViewport)) {
+      let el = this.a11yElements.get(node.id);
+      const attrs = node.getA11yAttributes();
+      const expectedTag = attrs.tag || "div";
+      if (el && el.tagName.toLowerCase() !== expectedTag.toLowerCase()) {
+        if (el === this.focusedA11yElement) {
+          this.focusedA11yElement = null;
+          if (this.caretBlinkTimer) {
+            clearInterval(this.caretBlinkTimer);
+            this.caretBlinkTimer = null;
+          }
+        }
+        if (el.parentNode === this.a11yRoot) {
+          this.a11yRoot.removeChild(el);
+        }
+        this.a11yElements.delete(node.id);
+        el = void 0;
+        this.a11yNeedsReorder = true;
+      }
+      if (!el) {
+        el = document.createElement(expectedTag);
+        el.id = node.id;
+        el.setAttribute("data-vecto-id", node.id);
+        el.style.position = "absolute";
+        el.style.pointerEvents = "auto";
+        el.style.touchAction = "pinch-zoom";
+        el.style.margin = "0";
+        el.style.padding = "0";
+        el.style.outline = "none";
+        el.style.cursor = node.a11yFullViewport ? "default" : "pointer";
+        if (this.debugA11y) {
+          el.style.backgroundColor = "rgba(56, 189, 248, 0.05)";
+          el.style.border = "1px dashed rgba(56, 189, 248, 0.4)";
+        } else {
+          el.style.opacity = "0";
+          el.style.border = "none";
+          el.style.background = "transparent";
+        }
+        el.addEventListener("click", (e) => {
+          node.dispatchEvent(new (0, _chunk53DAQC3Ujs.VectoJSEvent)("click", node, e));
+        });
+        el.addEventListener("mouseenter", (e) => {
+          if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
+          node.dispatchEvent(new (0, _chunk53DAQC3Ujs.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, _chunk53DAQC3Ujs.VectoJSEvent)("pointerleave", node, e, false));
+        });
+        const capEl = el;
+        el.addEventListener("pointerdown", (e) => {
+          if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
+          node.dispatchEvent(new (0, _chunk53DAQC3Ujs.VectoJSEvent)("pointerdown", node, e));
+        });
+        el.addEventListener("pointerup", (e) => {
+          if (typeof capEl.releasePointerCapture === "function")
+            capEl.releasePointerCapture(e.pointerId);
+          node.dispatchEvent(new (0, _chunk53DAQC3Ujs.VectoJSEvent)("pointerup", node, e));
+        });
+        el.addEventListener(
+          "pointermove",
+          (e) => node.dispatchEvent(new (0, _chunk53DAQC3Ujs.VectoJSEvent)("pointermove", node, e))
+        );
+        el.addEventListener(
+          "wheel",
+          (e) => {
+            node.dispatchEvent(new (0, _chunk53DAQC3Ujs.VectoJSEvent)("wheel", node, e));
+          },
+          { passive: false }
+        );
+        el.addEventListener("keydown", (e) => {
+          node.dispatchEvent(new (0, _chunk53DAQC3Ujs.VectoJSEvent)("keydown", node, e));
+        });
+        el.addEventListener("keyup", (e) => {
+          node.dispatchEvent(new (0, _chunk53DAQC3Ujs.VectoJSEvent)("keyup", node, e));
+        });
+        if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+          const input = el;
+          let composition = null;
+          const forward = () => {
+            input._lastSyncedValue = input.value;
+            node.emit("change", {
+              value: input.value,
+              checked: input instanceof HTMLInputElement ? input.checked : void 0,
+              selectionStart: _nullishCoalesce(input.selectionStart, () => ( input.value.length)),
+              selectionEnd: _nullishCoalesce(input.selectionEnd, () => ( input.value.length)),
+              composition
+            });
+          };
+          el.addEventListener("input", forward);
+          el.addEventListener("change", forward);
+          el.addEventListener("keyup", forward);
+          el.addEventListener("click", forward);
+          el.addEventListener("select", forward);
+          el.addEventListener("compositionstart", () => {
+            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', _32 => _32.start]), () => ( 0)), length: data.length };
+            forward();
+          });
+          el.addEventListener("compositionend", () => {
+            composition = null;
+            forward();
+          });
+        }
+        const isTextInput = el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement;
+        el.addEventListener("focus", () => {
+          this.focusedA11yElement = el;
+          node.emit("focus", {});
+          if (isTextInput && this.renderMode === "onDemand" && this.isRunning && !this.caretBlinkTimer) {
+            this.caretBlinkTimer = setInterval(() => {
+              this.markDirty();
+            }, 500);
+          }
+        });
+        el.addEventListener("blur", () => {
+          if (this.focusedA11yElement === el) {
+            this.focusedA11yElement = null;
+          }
+          const isTextFocused = this.focusedA11yElement instanceof HTMLInputElement || this.focusedA11yElement instanceof HTMLTextAreaElement;
+          if (!isTextFocused && this.caretBlinkTimer) {
+            clearInterval(this.caretBlinkTimer);
+            this.caretBlinkTimer = null;
+          }
+          node.emit("blur", {});
+        });
+        const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
+          "button",
+          "switch",
+          "checkbox",
+          "radio",
+          "link",
+          "tab",
+          "menuitem",
+          "slider",
+          "combobox"
+        ]);
+        const nativelyFocusable = el instanceof HTMLButtonElement || el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement || el instanceof HTMLAnchorElement && el.hasAttribute("href");
+        if (!nativelyFocusable && attrs.role && INTERACTIVE_ROLES.has(attrs.role)) {
+          el.setAttribute("tabindex", "0");
+          el.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              node.dispatchEvent(new (0, _chunk53DAQC3Ujs.VectoJSEvent)("click", node, e));
+            }
+          });
+        }
+        if (node.a11yFullViewport) {
+          this.a11yRoot.insertBefore(el, this.a11yRoot.firstChild);
+        } else {
+          this.a11yRoot.appendChild(el);
+        }
+        this.a11yElements.set(node.id, el);
+        this.a11yNeedsReorder = true;
+      }
+      if (attrs.role !== void 0 && el.getAttribute("role") !== attrs.role) {
+        el.setAttribute("role", attrs.role);
+      }
+      if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
+        el.setAttribute("aria-label", attrs.label);
+      }
+      if (attrs.inputType !== void 0 && el.getAttribute("type") !== attrs.inputType) {
+        el.setAttribute("type", attrs.inputType);
+      }
+      if (attrs.placeholder !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+        if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
+      }
+      if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
+        if (el.getAttribute("href") !== attrs.href) el.setAttribute("href", attrs.href);
+      }
+      if (el instanceof HTMLImageElement) {
+        if (attrs.src !== void 0 && el.src !== attrs.src) el.src = attrs.src;
+        if (attrs.alt !== void 0 && el.alt !== attrs.alt) el.alt = attrs.alt;
+      }
+      if (attrs.checked !== void 0) {
+        if (el instanceof HTMLInputElement) {
+          if (el.checked !== attrs.checked) el.checked = attrs.checked;
+        } else if (el.getAttribute("aria-checked") !== String(attrs.checked)) {
+          el.setAttribute("aria-checked", String(attrs.checked));
+        }
+      }
+      if (attrs.disabled !== void 0) {
+        if ("disabled" in el) {
+          if (el.disabled !== attrs.disabled) el.disabled = attrs.disabled;
+        } else if (el.getAttribute("aria-disabled") !== String(attrs.disabled)) {
+          el.setAttribute("aria-disabled", String(attrs.disabled));
+        }
+      }
+      if (attrs.expanded !== void 0 && el.getAttribute("aria-expanded") !== String(attrs.expanded)) {
+        el.setAttribute("aria-expanded", String(attrs.expanded));
+      }
+      if (attrs.controls !== void 0 && el.getAttribute("aria-controls") !== attrs.controls) {
+        el.setAttribute("aria-controls", attrs.controls);
+      }
+      if (attrs.haspopup !== void 0 && el.getAttribute("aria-haspopup") !== attrs.haspopup) {
+        el.setAttribute("aria-haspopup", attrs.haspopup);
+      }
+      if (attrs.selected !== void 0 && el.getAttribute("aria-selected") !== String(attrs.selected)) {
+        el.setAttribute("aria-selected", String(attrs.selected));
+      }
+      if (attrs.activedescendant !== void 0 && el.getAttribute("aria-activedescendant") !== attrs.activedescendant) {
+        el.setAttribute("aria-activedescendant", attrs.activedescendant);
+      }
+      if (attrs.valuemin !== void 0 && el.getAttribute("aria-valuemin") !== attrs.valuemin) {
+        el.setAttribute("aria-valuemin", attrs.valuemin);
+      }
+      if (attrs.valuemax !== void 0 && el.getAttribute("aria-valuemax") !== attrs.valuemax) {
+        el.setAttribute("aria-valuemax", attrs.valuemax);
+      }
+      if (attrs.value !== void 0) {
+        if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+          if (el.value !== attrs.value) {
+            const userTyped = el._lastSyncedValue;
+            if (attrs.value !== userTyped || document.activeElement !== el) {
+              el.value = attrs.value;
+              el._lastSyncedValue = attrs.value;
+            }
+          }
+        } else if (el.getAttribute("aria-valuenow") !== attrs.value) {
+          el.setAttribute("aria-valuenow", attrs.value);
+        }
+      }
+      if (node.a11yFullViewport) {
+        el.style.left = "0px";
+        el.style.top = "0px";
+        el.style.width = `${this.width}px`;
+        el.style.height = `${this.height}px`;
+        el.style.transform = "";
+      } else {
+        const pos = node.getGlobalPosition();
+        el.style.left = `${pos.x + node.a11yOffsetX}px`;
+        el.style.top = `${pos.y + node.a11yOffsetY}px`;
+        el.style.width = `${node.width * node.scaleX}px`;
+        el.style.height = `${node.height * node.scaleY}px`;
+        el.style.transform = `rotate(${node.rotation}rad)`;
+      }
+    }
+    for (const child of node.children) this.syncA11y(child);
+    if (node === this.root) {
+      for (const overlay of this.overlayRoot.children) this.syncA11y(overlay);
+    }
+  }
+  enforceA11yDomOrder() {
+    if (!this.a11yRoot) return;
+    this.fullViewportElements.length = 0;
+    this.normalElements.length = 0;
+    this.activeIds.clear();
+    const collect = (node) => {
+      if (node.isDOMPortal) return;
+      if (node.interactive && (node.width > 0 || node.a11yFullViewport)) {
+        const el = this.a11yElements.get(node.id);
+        if (el) {
+          this.activeIds.add(node.id);
+          if (node.a11yFullViewport) this.fullViewportElements.push(el);
+          else this.normalElements.push(el);
+        }
+      }
+      for (const child of node.children) collect(child);
+      if (node === this.root) {
+        for (const overlay of this.overlayRoot.children) collect(overlay);
+      }
+    };
+    collect(this.root);
+    let elementsPruned = false;
+    for (const [id, el] of this.a11yElements.entries()) {
+      if (!this.activeIds.has(id)) {
+        elementsPruned = true;
+        if (el === this.focusedA11yElement) {
+          this.focusedA11yElement = null;
+          if (this.caretBlinkTimer) {
+            clearInterval(this.caretBlinkTimer);
+            this.caretBlinkTimer = null;
+          }
+        }
+        if (el.parentNode === this.a11yRoot) {
+          this.a11yRoot.removeChild(el);
+        }
+        this.a11yElements.delete(id);
+      }
+    }
+    if (elementsPruned) {
+      this.a11yNeedsReorder = true;
+    }
+    if (!this.a11yNeedsReorder) return;
+    const fullLen = this.fullViewportElements.length;
+    const normalLen = this.normalElements.length;
+    const totalLen = fullLen + normalLen;
+    for (let i = 0; i < totalLen; i++) {
+      const expected = i < fullLen ? this.fullViewportElements[i] : this.normalElements[i - fullLen];
+      const current = this.a11yRoot.childNodes[i];
+      if (current !== expected) {
+        this.a11yRoot.insertBefore(expected, current || null);
+      }
+    }
+    this.a11yNeedsReorder = false;
+  }
+  getA11yTree() {
+    const map = /* @__PURE__ */ new Map();
+    const roots = [];
+    const traverse = (node, parentNode) => {
+      if (node.isDOMPortal) return;
+      let currentA11yNode = null;
+      if (node.interactive && (node.width > 0 || node.a11yFullViewport)) {
+        const el = this.a11yElements.get(node.id);
+        if (el) {
+          const attrs = node.getA11yAttributes();
+          currentA11yNode = {
+            id: node.id,
+            tag: el.tagName.toLowerCase(),
+            role: el.getAttribute("role") || void 0,
+            label: el.getAttribute("aria-label") || void 0,
+            value: attrs.value,
+            checked: attrs.checked,
+            expanded: attrs.expanded,
+            valuemin: attrs.valuemin,
+            valuemax: attrs.valuemax,
+            children: []
+          };
+          map.set(node.id, currentA11yNode);
+          const parentA11y = parentNode ? map.get(parentNode.id) : null;
+          if (parentA11y) {
+            parentA11y.children.push(currentA11yNode);
+          } else {
+            roots.push(currentA11yNode);
+          }
+        }
+      }
+      for (const child of node.children) {
+        traverse(child, currentA11yNode ? node : parentNode);
+      }
+      if (node === this.root) {
+        for (const overlay of this.overlayRoot.children) {
+          traverse(overlay, currentA11yNode ? node : parentNode);
+        }
+      }
+    };
+    traverse(this.root, null);
+    return roots;
+  }
+  renderPortalDOM(portal, te, tf, a, b, c, d) {
+    if (!this.portalRoot) return;
+    this.activePortalsThisFrame.add(portal.id);
+    this.portalEntities.set(portal.id, portal);
+    if (portal.domElement.parentElement !== this.portalRoot) {
+      this.portalRoot.appendChild(portal.domElement);
+    }
+    if (!portal.domElement.hasAttribute("data-vecto-id")) {
+      portal.domElement.setAttribute("data-vecto-id", portal.id);
+    }
+    const transformStr = `matrix(${a}, ${b}, ${c}, ${d}, ${te}, ${tf})`;
+    let widthStr = "";
+    let heightStr = "";
+    if (portal.width > 0) widthStr = `${portal.width}px`;
+    if (portal.height > 0) heightStr = `${portal.height}px`;
+    const zIndexStr = String(this.renderOrderCounter++);
+    if (portal.lastWidth !== widthStr) {
+      portal.domElement.style.width = widthStr;
+      portal.lastWidth = widthStr;
+    }
+    if (portal.lastHeight !== heightStr) {
+      portal.domElement.style.height = heightStr;
+      portal.lastHeight = heightStr;
+    }
+    if (portal.lastTransform !== transformStr) {
+      portal.domElement.style.left = "0px";
+      portal.domElement.style.top = "0px";
+      portal.domElement.style.transform = transformStr;
+      portal.lastTransform = transformStr;
+    }
+    if (portal.lastZIndex !== zIndexStr) {
+      portal.domElement.style.zIndex = zIndexStr;
+      portal.lastZIndex = zIndexStr;
+    }
+  }
+  reconcilePortals() {
+    if (!this.portalRoot) return;
+    for (const oldId of this.activePortalsPrevFrame) {
+      if (!this.activePortalsThisFrame.has(oldId)) {
+        const portal = this.portalEntities.get(oldId);
+        if (portal) {
+          if (portal.domElement.parentElement === this.portalRoot && (!portal.scene || portal.scene === this)) {
+            portal.domElement.remove();
+          }
+          this.portalEntities.delete(oldId);
+        }
+      }
+    }
+    this.activePortalsPrevFrame = new Set(this.activePortalsThisFrame);
+    this.activePortalsThisFrame.clear();
+  }
+  /**
+   * The frame-rate cap actually in effect: the explicit {@link maxFPS}, further
+   * lowered to {@link REDUCED_MOTION_FPS} when the OS requests reduced motion
+   * (and {@link respectReducedMotion} is on). `0` means uncapped.
+   */
+  effectiveMaxFPS() {
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _33 => _33.reducedMotionQuery, 'optionalAccess', _34 => _34.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;
+    let cap = this.effectiveMaxFPS();
+    const isStatic = !this.dirty && !this.hasAnyPendingAnimation(this.root) && !this.hasAnyPendingAnimation(this.overlayRoot);
+    if (isStatic && this.renderMode === "always" && this.maxFPS > 0) {
+      cap = Math.min(cap, 2);
+    }
+    if (cap > 0 && time - this.lastTime < 1e3 / cap - 1) {
+      this.scheduleFrame();
+      return;
+    }
+    const dt = time - this.lastTime;
+    this.lastTime = time;
+    if (this.renderMode === "onDemand" && isStatic) {
+      this.scheduleFrame();
+      return;
+    }
+    this.render(this.renderer, dt, time);
+    const hasActiveAnimation = this.hasAnyPendingAnimation(this.root) || this.hasAnyPendingAnimation(this.overlayRoot);
+    if (hasActiveAnimation) {
+      this.a11yPendingSyncAfterAnimation = true;
+    } else {
+      const hasInteractive = this.hasAnyInteractive(this.root) || this.hasAnyInteractive(this.overlayRoot);
+      const shouldSyncInterval = this.a11ySyncInterval <= 0 || time - this.lastA11ySync >= this.a11ySyncInterval;
+      if ((hasInteractive || this.a11yElements.size > 0) && (shouldSyncInterval || this.a11yPendingSyncAfterAnimation)) {
+        this.lastA11ySync = time;
+        if (hasInteractive) {
+          this.syncA11y(this.root);
+        }
+        this.enforceA11yDomOrder();
+        this.a11yPendingSyncAfterAnimation = false;
+      }
+    }
+    this.dirty = false;
+    this.scheduleFrame();
+  }
+  /**
+   * Render the entire scene graph onto the specified renderer.
+   *
+   * @param renderer - The renderer instance to draw to.
+   * @param dt - Delta time in milliseconds (default 0).
+   * @param time - Current absolute time in milliseconds (default 0).
+   */
+  render(renderer, dt = 0, time = 0) {
+    if (this.a11yRoot && this.canvas.parentElement) {
+      const parentStyle = this.canvas.parentElement.style;
+      if (!parentStyle.position || parentStyle.position === "static") {
+        parentStyle.position = "relative";
+      }
+    }
+    this.renderOrderCounter = 0;
+    this.activePortalsThisFrame.clear();
+    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);
+    }
+    if (computeEntities.length > 0) {
+      if (!this.device && !this.webgpuDisabled && !this.initializingWebGPU && !this.deviceLost) {
+        this.initializingWebGPU = true;
+        this.initWebGPUContext(computeEntities).then((newDevice) => {
+          this.device = newDevice;
+          this.initializingWebGPU = false;
+          const format = navigator.gpu ? navigator.gpu.getPreferredCanvasFormat() : "rgba8unorm";
+          if (_Scene.webgpuManagerClass) {
+            this.manager = new _Scene.webgpuManagerClass(newDevice);
+          } else if (this.particleBackend === "webgpu") {
+            throw new Error(
+              "WebGPU particle manager is not registered. Please call Scene.registerWebGPUParticleSystemManager(WebGPUParticleSystemManager) first."
+            );
+          }
+          if (this.manager) {
+            this.manager.initPipelines(format);
+            for (const entity of computeEntities) {
+              this.manager.setupEntityResources(entity);
+              if (entity.gpuStorageBuffer) {
+                newDevice.queue.writeBuffer(entity.gpuStorageBuffer, 0, entity.particleData);
+              }
+            }
+          }
+        }).catch((err) => {
+          console.error("Failed to initialize WebGPU:", err);
+          this.webgpuDisabled = true;
+          this.initializingWebGPU = false;
+        });
+      }
+      if (this.device && this.manager && !this.deviceLost && !this.webgpuDisabled) {
+        try {
+          const commandEncoder = this.device.createCommandEncoder();
+          const computePass = commandEncoder.beginComputePass();
+          for (const entity of computeEntities) {
+            if (!entity.gpuStorageBuffer || entity.needsInit) {
+              if (!entity.gpuStorageBuffer) {
+                this.manager.setupEntityResources(entity);
+              }
+              this.device.queue.writeBuffer(entity.gpuStorageBuffer, 0, entity.particleData);
+              entity.needsInit = false;
+            }
+            this.manager.recordComputePass(
+              computePass,
+              entity,
+              dt / 1e3,
+              this.mouseX,
+              this.mouseY,
+              this.width,
+              this.height
+            );
+          }
+          computePass.end();
+          if (this.gpuContext) {
+            const view = this.gpuContext.getCurrentTexture().createView();
+            const renderPassDescriptor = {
+              colorAttachments: [
+                {
+                  view,
+                  clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                  loadOp: "clear",
+                  storeOp: "store"
+                }
+              ]
+            };
+            const renderPass = commandEncoder.beginRenderPass(renderPassDescriptor);
+            for (const entity of computeEntities) {
+              this.manager.recordRenderPass(renderPass, entity);
+            }
+            renderPass.end();
+          }
+          this.device.queue.submit([commandEncoder.finish()]);
+        } catch (e) {
+          console.error("WebGPU frame execution failed. Falling back.", e);
+          this.deviceLost = true;
+          this.device = null;
+          this.recreateWebGPUDeviceWithRetry(computeEntities);
+        }
+      } else {
+        for (const entity of computeEntities) {
+          entity.updateCPU(dt / 1e3, this.mouseX, this.mouseY, this.width, this.height);
+        }
+      }
+    }
+    renderer.clear();
+    const isMainRenderer = renderer === this.renderer;
+    if (isMainRenderer) {
+      _optionalChain([this, 'access', _35 => _35.pointRenderer, 'optionalAccess', _36 => _36.begin, 'call', _37 => _37()]);
+    }
+    const vw = this.width;
+    const vh = this.height;
+    const renderNode = (node, pa, pb, pc, pd, pe, pf) => {
+      node.update(dt, time);
+      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 * sxSin;
+      const b = pb * sxCos + pd * sxSin;
+      const c = pa * -sySin + pc * syCos;
+      const d = pb * -sySin + pd * syCos;
+      const a11yEl = this.a11yElements.get(node.id);
+      if (a11yEl) {
+        a11yEl.style.zIndex = String(this.renderOrderCounter++);
+      }
+      if (node.isDOMPortal) {
+        this.renderPortalDOM(node, te, tf, a, b, c, d);
+        return;
+      }
+      let visible = true;
+      const bounds = node.getBounds();
+      if (bounds) {
+        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 + te;
+          const wy = b * lx + d * ly + tf;
+          if (wx < minX) minX = wx;
+          if (wx > maxX) maxX = wx;
+          if (wy < minY) minY = wy;
+          if (wy > maxY) maxY = wy;
+        }
+        visible = maxX >= 0 && minX <= vw && maxY >= 0 && minY <= vh;
+      }
+      if (!visible && node.children.length === 0) return;
+      if (node.children.length === 0 && node.scaleX === node.scaleY) {
+        const bc = node.getBatchCircle();
+        if (bc) {
+          if (visible) {
+            if (isMainRenderer && this.pointRenderer) {
+              this.pointRenderer.addCircle(
+                te,
+                tf,
+                bc.radius * Math.hypot(a, b),
+                bc.color,
+                node.opacity
+              );
+            } else {
+              renderer.fillCircle(node.x, node.y, bc.radius * node.scaleX, bc.color, node.opacity);
+            }
+          }
+          return;
+        }
+        if (isMainRenderer && this.pointRenderer) {
+          const br = node.getBatchRect();
+          if (br) {
+            if (visible) {
+              const ws = Math.hypot(a, b);
+              this.pointRenderer.addRect(
+                te,
+                tf,
+                br.width * ws,
+                br.height * ws,
+                br.color,
+                node.opacity,
+                Math.atan2(b, a)
+              );
+            }
+            return;
+          }
+        }
+      }
+      renderer.flush();
+      renderer.save();
+      renderer.translate(node.x, node.y);
+      renderer.scale(node.scaleX, node.scaleY);
+      renderer.rotate(node.rotation);
+      renderer.setGlobalAlpha(node.opacity);
+      if (visible) {
+        if (node instanceof ComputeParticleEntity) {
+          if (this.deviceLost || this.webgpuDisabled || !this.device || !this.manager) {
+            this.renderCPUParticles(renderer, node);
+          }
+        } else {
+          node.render(renderer);
+        }
+      }
+      if (node.clipChildren) {
+        renderer.clip(0, 0, node.width, node.height);
+      }
+      for (const child of node.children) {
+        renderNode(child, a, b, c, d, te, tf);
+      }
+      renderer.flush();
+      renderer.restore();
+    };
+    renderNode(this.root, 1, 0, 0, 1, 0, 0);
+    for (const overlay of this.overlayRoot.children) {
+      renderNode(overlay, 1, 0, 0, 1, 0, 0);
+    }
+    this.reconcilePortals();
+    renderer.flush();
+    if (isMainRenderer) {
+      _optionalChain([this, 'access', _38 => _38.pointRenderer, 'optionalAccess', _39 => _39.flush, 'call', _40 => _40()]);
+    }
+  }
+  /**
+   * Export the current scene state to a lightweight, flat SVG XML string.
+   */
+  toSVG() {
+    const renderer = new (0, _chunkLIX7DJTIjs.SVGRenderer)(this.width, this.height);
+    this.render(renderer, 0, 0);
+    return renderer.toXMLString();
+  }
+  /**
+   * Manually resize the Scene's viewport.
+   */
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    if (typeof this.renderer.resize === "function") {
+      this.renderer.resize(width, height);
+    }
+    _optionalChain([this, 'access', _41 => _41.pointRenderer, 'optionalAccess', _42 => _42.resize, 'call', _43 => _43(width, height)]);
+    this.markDirty();
+  }
+  /**
+   * Gets the accessibility DOM element projected for the given entity ID.
+   */
+  getA11yElement(entityId) {
+    return this.a11yElements.get(entityId);
+  }
+  /**
+   * Gets the root entity of the scene.
+   */
+  getRoot() {
+    return this.root;
+  }
+  /**
+   * Finds the topmost interactive entity at the given coordinates.
+   */
+  findEntityAt(x, y) {
+    const overlayHit = this.findHitRecursively(this.overlayRoot, x, y);
+    if (overlayHit) return overlayHit;
+    return this.findHitRecursively(this.root, x, y);
+  }
+  async initWebGPUContext(entities) {
+    if (!navigator.gpu) {
+      throw new Error("WebGPU not supported on this platform.");
+    }
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) {
+      throw new Error("No GPUAdapter found.");
+    }
+    const device = await adapter.requestDevice();
+    if (typeof document !== "undefined" && !this.gpuCanvas) {
+      const gpuCanvas = document.createElement("canvas");
+      gpuCanvas.width = this.width;
+      gpuCanvas.height = this.height;
+      gpuCanvas.style.position = "absolute";
+      gpuCanvas.style.top = "0";
+      gpuCanvas.style.left = "0";
+      gpuCanvas.style.pointerEvents = "none";
+      gpuCanvas.style.zIndex = "6";
+      if (this.canvas.parentElement) {
+        this.canvas.parentElement.appendChild(gpuCanvas);
+      }
+      this.gpuCanvas = gpuCanvas;
+      this.gpuContext = gpuCanvas.getContext("webgpu");
+    }
+    if (this.gpuContext) {
+      this.gpuContext.configure({
+        device,
+        format: navigator.gpu.getPreferredCanvasFormat(),
+        alphaMode: "premultiplied"
+      });
+    }
+    this.setupDeviceLostHandler(device, entities);
+    return device;
+  }
+  setupDeviceLostHandler(device, entities) {
+    device.lost.then((info) => {
+      if (info.reason === "destroyed") return;
+      console.warn(`WebGPU device lost: ${info.message}`);
+      this.deviceLost = true;
+      this.device = null;
+      this.recreateWebGPUDeviceWithRetry(entities);
+    });
+  }
+  recreateWebGPUDeviceWithRetry(entities, attempt = 0) {
+    if (this.destroyed) return;
+    if (attempt >= 3) {
+      console.error(
+        "Failed to recover WebGPU device after 3 retries. Remaining on fallback renderer."
+      );
+      this.webgpuDisabled = true;
+      this.deviceLost = true;
+      return;
+    }
+    for (const entity of entities) {
+      entity.destroyGPUResources();
+    }
+    if (this.manager) {
+      this.manager.destroy();
+      this.manager = null;
+    }
+    const backoff = Math.pow(2, attempt) * 1e3;
+    if (this.recoveryTimerId) clearTimeout(this.recoveryTimerId);
+    this.recoveryTimerId = setTimeout(() => {
+      if (this.destroyed) return;
+      this.initWebGPUContext(entities).then((newDevice) => {
+        if (this.destroyed) {
+          newDevice.destroy();
+          return;
+        }
+        console.log("Successfully recovered WebGPU device.");
+        this.device = newDevice;
+        this.deviceLost = false;
+        const format = navigator.gpu.getPreferredCanvasFormat();
+        if (_Scene.webgpuManagerClass) {
+          this.manager = new _Scene.webgpuManagerClass(newDevice);
+        } else if (this.particleBackend === "webgpu") {
+          throw new Error(
+            "WebGPU particle manager is not registered. Please call Scene.registerWebGPUParticleSystemManager(WebGPUParticleSystemManager) first."
+          );
+        }
+        if (this.manager) {
+          this.manager.initPipelines(format);
+          for (const entity of entities) {
+            this.manager.setupEntityResources(entity);
+            newDevice.queue.writeBuffer(entity.gpuStorageBuffer, 0, entity.particleData);
+          }
+        }
+      }).catch(() => this.recreateWebGPUDeviceWithRetry(entities, attempt + 1));
+    }, backoff);
+  }
+  renderCPUParticles(renderer, entity) {
+    const data = entity.particleData;
+    const size = entity.maxParticles;
+    const isMain = renderer === this.renderer;
+    for (let i = 0; i < size; i++) {
+      const idx = i * 8;
+      const x = data[idx];
+      const y = data[idx + 1];
+      const pSize = data[idx + 6];
+      const life = data[idx + 7];
+      if (life === 0) continue;
+      const opacity = life < 0 ? entity.opacity : entity.opacity * Math.min(1, life);
+      const scale = life >= 0 ? Math.min(1, life) : 1;
+      if (isMain && this.pointRenderer) {
+        this.pointRenderer.addCircle(x, y, pSize * scale, entity.baseColor, opacity);
+      } else {
+        renderer.fillCircle(x, y, pSize * scale, entity.baseColor, opacity);
+      }
+    }
+  }
+  findHitRecursively(node, x, y) {
+    for (let i = node.children.length - 1; i >= 0; i--) {
+      const hit = this.findHitRecursively(node.children[i], x, y);
+      if (hit) return hit;
+    }
+    if (node.isPointInside && node.isPointInside(x, y)) {
+      return node;
+    }
+    return null;
+  }
+}, _class2.__initStatic(), _class2.__initStatic2(), _class2);
+
+// src/components/TextEntity.ts
+var sharedMeasurer;
+function defaultMeasurer() {
+  if (sharedMeasurer === void 0) sharedMeasurer = _chunk72WVPMSJjs.createCanvasMeasurer.call(void 0, "sans-serif");
+  return sharedMeasurer;
+}
+var TextEntity = (_class3 = class extends _chunk53DAQC3Ujs.Entity {
+  
+  
+  
+  
+  __init47() {this.nodes = []}
+  
+  __init48() {this.fillStyle = "#94a3b8"}
+  __init49() {this.strokeStyle = null}
+  __init50() {this.hoveredFillStyle = "#ffffff"}
+  __init51() {this.lineWidth = 1}
+  __init52() {this.isHovered = false}
+  constructor(text, atlas, maxWidth, fontSize = 24) {
+    super();_class3.prototype.__init47.call(this);_class3.prototype.__init48.call(this);_class3.prototype.__init49.call(this);_class3.prototype.__init50.call(this);_class3.prototype.__init51.call(this);_class3.prototype.__init52.call(this);;
+    this.text = text;
+    this.atlas = atlas;
+    this.fontSize = fontSize;
+    this.layout = new (0, _chunk72WVPMSJjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
+    this.prepared = this.layout.prepare(this.text, this.atlas, this.fontSize);
+    this.applyLayout();
+    this.interactive = true;
+    this.on("hover", () => this.isHovered = true);
+    this.on("pointerleave", () => this.isHovered = false);
+  }
+  /**
+   * Replace the text content. Runs the **cold** measurement pass (re-segment +
+   * re-measure) since the glyphs changed, then re-lays out.
+   *
+   * @returns `this` for chaining.
+   */
+  setText(text) {
+    this.text = text;
+    this.prepared = this.layout.prepare(this.text, this.atlas, this.fontSize);
+    this.applyLayout();
+    return this;
+  }
+  /**
+   * Change the wrap width and reflow. Cheap **hot** path only — reuses the
+   * cached {@link PreparedText}, doing no re-segmentation or re-measurement.
+   * Ideal for responsive resize.
+   *
+   * @returns `this` for chaining.
+   */
+  setMaxWidth(maxWidth) {
+    this.layout.maxWidth = maxWidth;
+    this.applyLayout();
+    return this;
+  }
+  /** Hot pass: place the cached {@link PreparedText} and refresh the a11y box. */
+  applyLayout() {
+    const result = this.layout.layoutPrepared(this.prepared);
+    this.nodes = result.nodes;
+    this.width = result.totalWidth;
+    this.height = result.totalHeight;
+    this.a11yOffsetY = 0;
+  }
+  isPointInside(globalX, globalY) {
+    const pos = this.getGlobalPosition();
+    const lx = globalX - pos.x;
+    const ly = globalY - pos.y;
+    return lx >= 0 && lx <= this.width && ly >= 0 && ly <= this.height;
+  }
+  render(renderer) {
+    const currentFill = this.isHovered ? this.hoveredFillStyle : this.fillStyle;
+    for (const node of this.nodes) {
+      const glyph = this.atlas[node.char];
+      if (!glyph) {
+        renderer.save();
+        renderer.translate(node.x, node.y + this.fontSize * 0.8);
+        renderer.fillText(node.char, 0, 0, `${this.fontSize}px sans-serif`, currentFill);
+        renderer.restore();
+        continue;
+      }
+      renderer.save();
+      renderer.translate(node.x, node.y);
+      const scale = this.fontSize / glyph.baseSize;
+      renderer.scale(scale, scale);
+      for (const path of glyph.ast.paths) {
+        renderer.beginPath();
+        for (const cmd of path.commands) {
+          if (cmd.type === "M") renderer.moveTo(cmd.x, cmd.y);
+          else if (cmd.type === "L") renderer.lineTo(cmd.x, cmd.y);
+          else if (cmd.type === "C")
+            renderer.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+          else if (cmd.type === "Z") renderer.closePath();
+        }
+        if (currentFill) {
+          renderer.fill(currentFill);
+        }
+        if (this.strokeStyle) {
+          renderer.stroke(this.strokeStyle, this.lineWidth / scale);
+        }
+      }
+      renderer.restore();
+    }
+  }
+}, _class3);
+
+// src/components/GridTextEntity.ts
+var GridTextEntity = (_class4 = class extends _chunk53DAQC3Ujs.Entity {
+  
+  __init53() {this.fillStyle = "#ffffff"}
+  __init54() {this.grid = []}
+  // Array of rows
+  __init55() {this.cols = 0}
+  __init56() {this.rows = 0}
+  
+  
+  constructor(_atlas, fontSize = 10) {
+    super();_class4.prototype.__init53.call(this);_class4.prototype.__init54.call(this);_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);;
+    this.fontSize = fontSize;
+    this.charWidth = fontSize * 1;
+    this.charHeight = fontSize * 1.1;
+    this.interactive = false;
+  }
+  updateGrid(ascii) {
+    this.grid = ascii;
+    this.rows = ascii.length;
+    this.cols = _optionalChain([ascii, 'access', _44 => _44[0], 'optionalAccess', _45 => _45.length]) || 0;
+  }
+  isPointInside(_globalX, _globalY) {
+    return false;
+  }
+  render(renderer) {
+    if (this.rows === 0) return;
+    for (let r = 0; r < this.rows; r++) {
+      const row = this.grid[r];
+      if (!row) continue;
+      for (let c = 0; c < this.cols; c++) {
+        const char = row[c];
+        if (char === " ") continue;
+        const x = c * this.charWidth;
+        const y = r * this.charHeight;
+        renderer.save();
+        renderer.translate(x, y + this.fontSize * 0.8);
+        renderer.fillText(char, 0, 0, `bold ${this.fontSize}px monospace`, this.fillStyle);
+        renderer.restore();
+      }
+    }
+  }
+}, _class4);
+
+// src/components/SplineEntity.ts
+function polySegmentToBezier(seg) {
+  const ax = seg.x_poly[0] || 0;
+  const bx = seg.x_poly[1] || 0;
+  const cx = seg.x_poly[2] || 0;
+  const dx = seg.x_poly[3] || 0;
+  const ay = seg.y_poly[0] || 0;
+  const by = seg.y_poly[1] || 0;
+  const cy = seg.y_poly[2] || 0;
+  const dy = seg.y_poly[3] || 0;
+  return {
+    x0: ax,
+    y0: ay,
+    cp1x: ax + bx / 3,
+    cp1y: ay + by / 3,
+    cp2x: ax + 2 * bx / 3 + cx / 3,
+    cp2y: ay + 2 * by / 3 + cy / 3,
+    x3: ax + bx + cx + dx,
+    y3: ay + by + cy + dy
+  };
+}
+function rgbToCss(rgb) {
+  return `rgb(${Math.round(rgb[0] * 255)}, ${Math.round(rgb[1] * 255)}, ${Math.round(rgb[2] * 255)})`;
+}
+var HIT_SAMPLES = 16;
+function flattenBezier(b, samples) {
+  const pts = new Float32Array((samples + 1) * 2);
+  for (let i = 0; i <= samples; i++) {
+    const t = i / samples;
+    const mt = 1 - t;
+    const a = mt * mt * mt;
+    const c1 = 3 * mt * mt * t;
+    const c2 = 3 * mt * t * t;
+    const d = t * t * t;
+    pts[i * 2] = a * b.x0 + c1 * b.cp1x + c2 * b.cp2x + d * b.x3;
+    pts[i * 2 + 1] = a * b.y0 + c1 * b.cp1y + c2 * b.cp2y + d * b.y3;
+  }
+  return pts;
+}
+function distSqToSegment(px, py, x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const lenSq = dx * dx + dy * dy;
+  let t = lenSq > 0 ? ((px - x1) * dx + (py - y1) * dy) / lenSq : 0;
+  t = t < 0 ? 0 : t > 1 ? 1 : t;
+  const cx = x1 + t * dx;
+  const cy = y1 + t * dy;
+  const ex = px - cx;
+  const ey = py - cy;
+  return ex * ex + ey * ey;
+}
+var SplineEntity = (_class5 = class extends _chunk53DAQC3Ujs.Entity {
+  
+  
+  
+  
+  
+  
+  
+  __init57() {this.offscreen = null}
+  __init58() {this.baked = false}
+  /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
+  __init59() {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`.
+   */
+  __init60() {this.showBounds = false}
+  constructor(doc, opts = {}) {
+    super();_class5.prototype.__init57.call(this);_class5.prototype.__init58.call(this);_class5.prototype.__init59.call(this);_class5.prototype.__init60.call(this);;
+    this.doc = doc;
+    this.lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
+    this.cache = _nullishCoalesce(opts.cache, () => ( true));
+    this.defaultColor = _nullishCoalesce(opts.defaultColor, () => ( "#e2e8f0"));
+    this.hitMode = _nullishCoalesce(opts.hitTest, () => ( "curve"));
+    this.hitTolerance = _nullishCoalesce(opts.hitTolerance, () => ( 0));
+    this.bounds = this.computeBounds();
+    this.width = this.bounds.width;
+    this.height = this.bounds.height;
+    this.interactive = true;
+  }
+  computeBounds() {
+    if (this.doc.bounding_box) {
+      const [minX2, minY2, maxX2, maxY2] = this.doc.bounding_box;
+      return { x: minX2, y: minY2, width: maxX2 - minX2, height: maxY2 - minY2 };
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    if (this.doc.equations) {
+      for (const eq of this.doc.equations) {
+        for (const seg of eq.data) {
+          const b = polySegmentToBezier(seg);
+          for (const [x, y] of [
+            [b.x0, b.y0],
+            [b.cp1x, b.cp1y],
+            [b.cp2x, b.cp2y],
+            [b.x3, b.y3]
+          ]) {
+            if (x < minX) minX = x;
+            if (x > maxX) maxX = x;
+            if (y < minY) minY = y;
+            if (y > maxY) maxY = y;
+          }
+        }
+      }
+    }
+    if (this.doc.paths) {
+      for (const path of this.doc.paths) {
+        for (const pt of path.data) {
+          if (pt.x < minX) minX = pt.x;
+          if (pt.x > maxX) maxX = pt.x;
+          if (pt.y < minY) minY = pt.y;
+          if (pt.y > maxY) maxY = pt.y;
+        }
+      }
+    }
+    if (minX === Infinity) return { x: 0, y: 0, width: 0, height: 0 };
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  }
+  /** @inheritdoc */
+  getBounds() {
+    return this.bounds;
+  }
+  /**
+   * AABB hit-test against the document bounds in world space.
+   *
+   * Curve-accurate hit-testing can be layered on later via {@link hitTestCurve};
+   * this method already calls it as a refinement when it is overridden.
+   */
+  isPointInside(globalX, globalY) {
+    const pos = this.getGlobalPosition();
+    const scale = this.getWorldScale();
+    const lx = (globalX - pos.x) / (scale.x || 1);
+    const ly = (globalY - pos.y) / (scale.y || 1);
+    const inAabb = lx >= this.bounds.x && lx <= this.bounds.x + this.bounds.width && ly >= this.bounds.y && ly <= this.bounds.y + this.bounds.height;
+    if (!inAabb) return false;
+    const refined = this.hitTestCurve(lx, ly);
+    return refined === null ? true : refined;
+  }
+  /**
+   * Curve-accurate refinement of {@link isPointInside}: hit only when the local
+   * point lies within `lineWidth/2 + hitTolerance` of an actual curve.
+   *
+   * Returns `null` in `hitTest: 'aabb'` mode (keep the bounding-box result).
+   * Curves are flattened to polylines once and cached. Override for custom logic.
+   *
+   * @param localX - X in the entity's local space.
+   * @param localY - Y in the entity's local space.
+   * @returns `true`/`false`, or `null` to keep the AABB result.
+   */
+  hitTestCurve(localX, localY) {
+    if (this.hitMode === "aabb") return null;
+    const tol = this.lineWidth / 2 + this.hitTolerance;
+    const tol2 = tol * tol;
+    const polylines = this.getPolylines();
+    for (const pts of polylines) {
+      for (let i = 0; i + 3 < pts.length; i += 2) {
+        if (distSqToSegment(localX, localY, pts[i], pts[i + 1], pts[i + 2], pts[i + 3]) <= tol2) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  /** Flatten every Bézier segment into a sampled polyline once, then cache. */
+  getPolylines() {
+    if (this.polylines) return this.polylines;
+    const out = [];
+    if (this.doc.equations) {
+      for (const eq of this.doc.equations) {
+        for (const seg of eq.data) {
+          out.push(flattenBezier(polySegmentToBezier(seg), HIT_SAMPLES));
+        }
+      }
+    }
+    if (this.doc.paths) {
+      for (const path of this.doc.paths) {
+        const pts = new Float32Array(path.data.length * 2);
+        for (let i = 0; i < path.data.length; i++) {
+          pts[i * 2] = path.data[i].x;
+          pts[i * 2 + 1] = path.data[i].y;
+        }
+        out.push(pts);
+      }
+    }
+    this.polylines = out;
+    return out;
+  }
+  resolveColor(color, r) {
+    if (color === null) return this.defaultColor;
+    if (Array.isArray(color)) return rgbToCss(color);
+    const w = this.bounds.width || 1;
+    const h = this.bounds.height || 1;
+    return r.createLinearGradient(
+      color.start_pos[0] * w + this.bounds.x,
+      color.start_pos[1] * h + this.bounds.y,
+      color.end_pos[0] * w + this.bounds.x,
+      color.end_pos[1] * h + this.bounds.y,
+      color.stops.map(([stop, rgb]) => ({
+        stop: Math.max(0, Math.min(1, stop)),
+        color: rgbToCss(rgb)
+      }))
+    );
+  }
+  strokeEquations(r) {
+    if (this.doc.equations) {
+      for (const eq of this.doc.equations) {
+        const stroke = this.resolveColor(eq.color_rgb, r);
+        r.beginPath();
+        for (const seg of eq.data) {
+          const b = polySegmentToBezier(seg);
+          r.moveTo(b.x0, b.y0);
+          r.bezierCurveTo(b.cp1x, b.cp1y, b.cp2x, b.cp2y, b.x3, b.y3);
+        }
+        r.stroke(stroke, this.lineWidth);
+      }
+    }
+    if (this.doc.paths) {
+      for (const path of this.doc.paths) {
+        const stroke = this.resolveColor(path.color_rgb, r);
+        r.beginPath();
+        if (path.data.length > 0) {
+          r.moveTo(path.data[0].x, path.data[0].y);
+          for (let i = 1; i < path.data.length; i++) {
+            r.lineTo(path.data[i].x, path.data[i].y);
+          }
+        }
+        r.stroke(stroke, this.lineWidth);
+      }
+    }
+  }
+  /** Bake all equations into an OffscreenCanvas once (when available). */
+  bake() {
+    this.baked = true;
+    const pad = this.lineWidth + 2;
+    const w = Math.max(1, Math.ceil(this.bounds.width) + pad * 2);
+    const h = Math.max(1, Math.ceil(this.bounds.height) + pad * 2);
+    let canvas;
+    if (typeof OffscreenCanvas !== "undefined") {
+      canvas = new OffscreenCanvas(w, h);
+    } else if (typeof document !== "undefined") {
+      canvas = document.createElement("canvas");
+      canvas.width = w;
+      canvas.height = h;
+    } else {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.translate(pad - this.bounds.x, pad - this.bounds.y);
+    ctx.lineWidth = this.lineWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    if (this.doc.equations) {
+      for (const eq of this.doc.equations) {
+        ctx.strokeStyle = eq.color_rgb === null ? this.defaultColor : Array.isArray(eq.color_rgb) ? rgbToCss(eq.color_rgb) : this.defaultColor;
+        ctx.beginPath();
+        for (const seg of eq.data) {
+          const b = polySegmentToBezier(seg);
+          ctx.moveTo(b.x0, b.y0);
+          ctx.bezierCurveTo(b.cp1x, b.cp1y, b.cp2x, b.cp2y, b.x3, b.y3);
+        }
+        ctx.stroke();
+      }
+    }
+    if (this.doc.paths) {
+      for (const path of this.doc.paths) {
+        ctx.strokeStyle = path.color_rgb === null ? this.defaultColor : Array.isArray(path.color_rgb) ? rgbToCss(path.color_rgb) : this.defaultColor;
+        ctx.beginPath();
+        if (path.data.length > 0) {
+          ctx.moveTo(path.data[0].x, path.data[0].y);
+          for (let i = 1; i < path.data.length; i++) {
+            ctx.lineTo(path.data[i].x, path.data[i].y);
+          }
+        }
+        ctx.stroke();
+      }
+    }
+    this.offscreen = canvas;
+  }
+  render(r) {
+    let rendered = false;
+    if (this.cache) {
+      if (!this.baked) this.bake();
+      if (this.offscreen) {
+        const pad = this.lineWidth + 2;
+        r.drawImage(
+          this.offscreen,
+          this.bounds.x - pad,
+          this.bounds.y - pad,
+          this.offscreen.width,
+          this.offscreen.height
+        );
+        rendered = true;
+      }
+    }
+    if (!rendered) {
+      this.strokeEquations(r);
+    }
+    if (this.showBounds) {
+      r.beginPath();
+      r.roundRect(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height, 4);
+      r.stroke("rgba(0, 150, 255, 0.8)", 2);
+    }
+  }
+}, _class5);
+async function loadSpline(url) {
+  const res = await fetch(url);
+  return await res.json();
+}
+
+// src/math/SpatialHashGrid.ts
+var SpatialHashGrid = (_class6 = class {
+  
+  __init61() {this.grid = /* @__PURE__ */ new Map()}
+  __init62() {this.entityCells = /* @__PURE__ */ new Map()}
+  constructor(cellSize = 64) {;_class6.prototype.__init61.call(this);_class6.prototype.__init62.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', _46 => _46.grid, 'access', _47 => _47.get, 'call', _48 => _48(key), 'optionalAccess', _49 => _49.delete, 'call', _50 => _50(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/math/SpringPhysics.ts
+var SpringPhysics = (_class7 = class {
+  
+  
+  __init63() {this.velocity = 0}
+  __init64() {this.stiffness = 180}
+  __init65() {this.damping = 12}
+  __init66() {this.mass = 1}
+  __init67() {this.valEpsilon = 5e-3}
+  __init68() {this.velEpsilon = 5e-3}
+  constructor(initial) {;_class7.prototype.__init63.call(this);_class7.prototype.__init64.call(this);_class7.prototype.__init65.call(this);_class7.prototype.__init66.call(this);_class7.prototype.__init67.call(this);_class7.prototype.__init68.call(this);
+    this.value = initial;
+    this.target = initial;
+  }
+  update(dt) {
+    if (this.isAtRest()) {
+      this.value = this.target;
+      this.velocity = 0;
+      return;
+    }
+    const forceSpring = -this.stiffness * (this.value - this.target);
+    const forceDamping = -this.damping * this.velocity;
+    const acceleration = (forceSpring + forceDamping) / this.mass;
+    this.velocity += acceleration * dt;
+    this.value += this.velocity * dt;
+  }
+  isAtRest() {
+    return Math.abs(this.value - this.target) < this.valEpsilon && Math.abs(this.velocity) < this.velEpsilon;
+  }
+}, _class7);
+
+// src/tree/DOMPortalEntity.ts
+var DOMPortalEntity = (_class8 = class extends _chunk53DAQC3Ujs.Entity {
+  
+  __init69() {this.isDOMPortal = true}
+  __init70() {this.domListeners = []}
+  __init71() {this.resizeObserver = null}
+  __init72() {this.cachedWidth = 100}
+  __init73() {this.cachedHeight = 100}
+  __init74() {this.lastWidth = ""}
+  __init75() {this.lastHeight = ""}
+  __init76() {this.lastTransform = ""}
+  __init77() {this.lastZIndex = ""}
+  constructor(domElement, width, height, id) {
+    super(id);_class8.prototype.__init69.call(this);_class8.prototype.__init70.call(this);_class8.prototype.__init71.call(this);_class8.prototype.__init72.call(this);_class8.prototype.__init73.call(this);_class8.prototype.__init74.call(this);_class8.prototype.__init75.call(this);_class8.prototype.__init76.call(this);_class8.prototype.__init77.call(this);;
+    this.domElement = domElement;
+    this.width = _nullishCoalesce(width, () => ( 0));
+    this.height = _nullishCoalesce(height, () => ( 0));
+    if (typeof window !== "undefined") {
+      this.domElement.style.position = "absolute";
+      this.domElement.style.transformOrigin = "0 0";
+      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", "pointermove", "wheel"];
+      for (const type of events) {
+        const handler = (e) => {
+          this.dispatchEvent(new (0, _chunk53DAQC3Ujs.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, _chunk53DAQC3Ujs.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, _chunk53DAQC3Ujs.VectoJSEvent)(type, this, e, true));
+        };
+        this.domElement.addEventListener(type, handler, true);
+        this.domListeners.push({ type, handler, capture: true });
+      }
+    }
+  }
+  isPointInside(globalX, globalY) {
+    const pos = this.getGlobalPosition();
+    const scale = this.getWorldScale();
+    const rot = this.getWorldRotation();
+    const dx = globalX - pos.x;
+    const dy = globalY - pos.y;
+    const cos = Math.cos(-rot);
+    const sin = Math.sin(-rot);
+    const lx = (dx * cos - dy * sin) / scale.x;
+    const ly = (dx * sin + dy * cos) / scale.y;
+    const w = this.width > 0 ? this.width : this.cachedWidth;
+    const h = this.height > 0 ? this.height : this.cachedHeight;
+    return lx >= 0 && lx <= w && ly >= 0 && ly <= h;
+  }
+  add(child) {
+    console.warn(`DOMPortalEntity (${this.id}) is a leaf node. Child entities are not supported.`);
+    return super.add(child);
+  }
+  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();
+      }
+    }
+    super.destroy();
+  }
+}, _class8);
+
+// src/index.ts
+Scene.registerWebGLPointRendererCreator(_chunkLIX7DJTIjs.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkLIX7DJTIjs.WebGPUParticleSystemManager);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.ArabicShaper = _chunkRW6NC4RBjs.ArabicShaper; exports.BidiResolver = _chunkRW6NC4RBjs.BidiResolver; exports.CanvasRenderer = _chunkLIX7DJTIjs.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunk53DAQC3Ujs.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunk72WVPMSJjs.LayoutEngine; exports.LayoutResultBuffer = _chunk72WVPMSJjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkRW6NC4RBjs.LayoutWorkerManager; exports.MSDFFont = _chunk53DAQC3Ujs.MSDFFont; exports.MSDFTextEntity = _chunk53DAQC3Ujs.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.SVGEntity = _chunk53DAQC3Ujs.SVGEntity; exports.SVGRenderer = _chunkLIX7DJTIjs.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringPhysics = SpringPhysics; exports.TextEntity = TextEntity; exports.VectoJSEvent = _chunk53DAQC3Ujs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkLIX7DJTIjs.WebGPUParticleSystemManager; exports.computeLineSegments = _chunk72WVPMSJjs.computeLineSegments; exports.createCanvasMeasurer = _chunk72WVPMSJjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkLIX7DJTIjs.createWebGLPointRenderer; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkLIX7DJTIjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier;