cubeforge 0.8.1 → 0.8.3

package/dist/index.js

@@ -2963,6 +2963,7 @@ function getSamplingKey(sampling) {
   return `${sampling.min}|${sampling.mag}`;
 }
 function getTextureKey(sprite) {
+  if (sprite.dynamicSrc) return sprite.dynamicSrc;
   const src = sprite.image?.src || sprite.src;
   const samplingKey = getSamplingKey(sprite.sampling);
   const suffix = samplingKey ? `:s=${samplingKey}` : "";
@@ -3159,6 +3160,15 @@ var RenderSystem = class {
   // FPS tracking
   frameTimes = [];
   lastTimestamp = 0;
+  // ── Dynamic canvas textures (texSubImage2D optimization) ─────────────────
+  _dynamicCanvases = /* @__PURE__ */ new Map();
+  // ── Idle frame skip ──────────────────────────────────────────────────────
+  _idleSkip = false;
+  _prevSceneHash = -1;
+  _idleFBO = null;
+  _idleTex = null;
+  _idleFBOW = 0;
+  _idleFBOH = 0;
   // ── Post-process ─────────────────────────────────────────────────────────
   _ppOptions = {};
   // Lazily created programs (null until first PP use)
@@ -3210,6 +3220,55 @@ var RenderSystem = class {
   setPostProcessOptions(opts) {
     this._ppOptions = opts;
   }
+  /**
+   * Enable idle frame skip. When enabled the renderer computes a hash of all
+   * visible entity positions, frame indices, and camera state each frame. If
+   * the hash matches the previous frame the GPU draw calls are skipped entirely
+   * and the cached scene is blitted to screen instead.
+   *
+   * Best for scenes that are frequently static (pause menus, cutscenes, HUDs).
+   * Animations and active particles automatically disable the skip for that frame.
+   */
+  setIdleFrameSkip(enabled) {
+    this._idleSkip = enabled;
+  }
+  /**
+   * Register an HTMLCanvasElement as a GPU texture that the renderer can sample.
+   * The canvas is uploaded once on registration. Call {@link markDynamicCanvasDirty}
+   * to schedule a re-upload before the next frame.
+   *
+   * Use the returned `id` as the `dynamicSrc` on a `<Sprite>` component.
+   */
+  registerDynamicCanvas(id, canvas) {
+    const { gl } = this;
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this._dynamicCanvases.set(id, { canvas, tex, dirty: false });
+    this.textures.set(id, tex);
+    this.touchTexture(id);
+  }
+  /**
+   * Mark a dynamic canvas as modified so it will be re-uploaded to the GPU
+   * (via `texSubImage2D`) at the start of the next rendered frame.
+   * Only call this after actually drawing new content to the canvas.
+   */
+  markDynamicCanvasDirty(id) {
+    const entry = this._dynamicCanvases.get(id);
+    if (entry) entry.dirty = true;
+  }
+  /** Remove a registered dynamic canvas and free its GPU texture. */
+  unregisterDynamicCanvas(id) {
+    const entry = this._dynamicCanvases.get(id);
+    if (!entry) return;
+    this.gl.deleteTexture(entry.tex);
+    this._dynamicCanvases.delete(id);
+    this.textures.delete(id);
+  }
   get _anyPPEnabled() {
     const o = this._ppOptions;
     return (o.bloom?.enabled ?? false) || (o.vignette?.enabled ?? false) || (o.chromaticAberration?.enabled ?? false) || (o.scanlines?.enabled ?? false);
@@ -3532,6 +3591,71 @@ var RenderSystem = class {
         break;
     }
   }
+  // ── Scene hash for idle frame skip ───────────────────────────────────────
+  _computeSceneHash(world, camX, camY, zoom, shakeX, shakeY) {
+    let h = 2166136261;
+    const mix = (n) => {
+      const i = n | 0;
+      h = Math.imul(h ^ i & 255, 16777619);
+      h = Math.imul(h ^ i >> 8 & 255, 16777619);
+      h = Math.imul(h ^ i >> 16 & 255, 16777619);
+      h = Math.imul(h ^ i >> 24 & 255, 16777619);
+    };
+    mix(camX * 100);
+    mix(camY * 100);
+    mix(zoom * 1e3);
+    mix(shakeX * 1e3);
+    mix(shakeY * 1e3);
+    for (const id of world.query("Transform", "Sprite")) {
+      const t = world.getComponent(id, "Transform");
+      const s2 = world.getComponent(id, "Sprite");
+      mix(id);
+      mix(t.x * 100);
+      mix(t.y * 100);
+      mix(t.rotation * 1e3);
+      mix(t.scaleX * 1e3);
+      mix(t.scaleY * 1e3);
+      mix(s2.frameIndex);
+      mix(s2.visible ? 1 : 0);
+      mix((s2.opacity ?? 1) * 255);
+    }
+    for (const id of world.query("AnimationState")) {
+      const anim = world.getComponent(id, "AnimationState");
+      if (anim.playing) return -1;
+    }
+    for (const id of world.query("ParticlePool")) {
+      const pool = world.getComponent(id, "ParticlePool");
+      if (pool.active || pool.particles.length > 0) return -1;
+    }
+    for (const id of world.query("SquashStretch")) {
+      const ss = world.getComponent(id, "SquashStretch");
+      mix(ss.currentScaleX * 1e3);
+      mix(ss.currentScaleY * 1e3);
+    }
+    return h;
+  }
+  _ensureIdleFBO(w, h) {
+    if (this._idleFBOW === w && this._idleFBOH === h && this._idleFBO) return;
+    const { gl } = this;
+    if (this._idleFBO) gl.deleteFramebuffer(this._idleFBO);
+    if (this._idleTex) gl.deleteTexture(this._idleTex);
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const fbo = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    this._idleFBO = fbo;
+    this._idleTex = tex;
+    this._idleFBOW = w;
+    this._idleFBOH = h;
+  }
   // ── Instanced draw call ────────────────────────────────────────────────────
   flush(count, textureKey, sampling, blendMode, shapeSpriteRef) {
     if (count === 0) return;
@@ -3752,6 +3876,24 @@ var RenderSystem = class {
       ss.currentScaleX += (tScX - ss.currentScaleX) * ss.recovery * dt;
       ss.currentScaleY += (tScY - ss.currentScaleY) * ss.recovery * dt;
     }
+    for (const entry of this._dynamicCanvases.values()) {
+      if (!entry.dirty) continue;
+      gl.bindTexture(gl.TEXTURE_2D, entry.tex);
+      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, entry.canvas);
+      entry.dirty = false;
+    }
+    if (this._idleSkip) {
+      this._ensureIdleFBO(W, H);
+      const hash = this._computeSceneHash(world, camX, camY, zoom, shakeX, shakeY);
+      if (hash !== -1 && hash === this._prevSceneHash) {
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._idleFBO);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+        gl.blitFramebuffer(0, 0, W, H, 0, 0, W, H, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        return;
+      }
+      this._prevSceneHash = hash;
+    }
     const ppEnabled = this._anyPPEnabled;
     if (ppEnabled) {
       this._ensurePPPrograms();
@@ -3897,7 +4039,7 @@ var RenderSystem = class {
       const ss = world.getComponent(id, "SquashStretch");
       const scaleXMod = ss ? ss.currentScaleX : 1;
       const scaleYMod = ss ? ss.currentScaleY : 1;
-      const hasTexture = sprite.image && sprite.image.complete && sprite.image.naturalWidth > 0;
+      const hasTexture = sprite.image && sprite.image.complete && sprite.image.naturalWidth > 0 || sprite.dynamicSrc !== void 0 && this._dynamicCanvases.has(sprite.dynamicSrc);
       const opacity = sprite.opacity ?? 1;
       let [r, g, b, a] = hasTexture ? [1, 1, 1, 1] : parseCSSColor(sprite.color);
       a *= opacity;
@@ -4368,6 +4510,12 @@ var RenderSystem = class {
       gl.bindFramebuffer(gl.FRAMEBUFFER, null);
       this._applyPostProcess(W, H);
     }
+    if (this._idleSkip && this._idleFBO) {
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this._idleFBO);
+      gl.blitFramebuffer(0, 0, W, H, 0, 0, W, H, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    }
     const now = performance.now();
     if (this.lastTimestamp > 0) {
       this.frameTimes.push(now - this.lastTimestamp);
@@ -7237,6 +7385,7 @@ function Sprite({
   height,
   color = "#ffffff",
   src,
+  dynamicSrc,
   offsetX = 0,
   offsetY = 0,
   zIndex = 0,
@@ -7288,6 +7437,7 @@ function Sprite({
       height,
       color,
       src,
+      dynamicSrc,
       offsetX,
       offsetY,
       zIndex,
@@ -7369,6 +7519,7 @@ function Sprite({
     const comp = engine.ecs.getComponent(entityId, "Sprite");
     if (!comp) return;
     comp.color = color;
+    comp.dynamicSrc = dynamicSrc;
     comp.visible = visible;
     comp.flipX = flipX;
     comp.flipY = flipY;
@@ -7388,6 +7539,7 @@ function Sprite({
     comp.starInnerRadius = starInnerRadius;
   }, [
     color,
+    dynamicSrc,
     visible,
     flipX,
     flipY,
@@ -10289,11 +10441,51 @@ function useWebGLPostProcess(opts) {
   }, [engine, optsKey]);
 }
 
+// src/hooks/useDynamicCanvas.ts
+import { useCallback as useCallback7, useEffect as useEffect59, useMemo as useMemo10, useRef as useRef23 } from "react";
+function useDynamicCanvas(width, height) {
+  const engine = useGame();
+  const idRef = useRef23(`__dynamic__:${Math.random().toString(36).slice(2)}`);
+  const id = idRef.current;
+  const canvas = useMemo10(() => {
+    const c = document.createElement("canvas");
+    c.width = width;
+    c.height = height;
+    return c;
+  }, [width, height]);
+  const ctx = useMemo10(() => canvas.getContext("2d"), [canvas]);
+  useEffect59(() => {
+    const rs = engine.activeRenderSystem;
+    rs.registerDynamicCanvas?.(id, canvas);
+    return () => {
+      rs.unregisterDynamicCanvas?.(id);
+    };
+  }, [engine, id, canvas]);
+  const markDirty = useCallback7(() => {
+    const rs = engine.activeRenderSystem;
+    rs.markDynamicCanvasDirty?.(id);
+  }, [engine, id]);
+  return useMemo10(() => ({ id, canvas, ctx, markDirty }), [id, canvas, ctx, markDirty]);
+}
+
+// src/hooks/useIdleFrameSkip.ts
+import { useEffect as useEffect60 } from "react";
+function useIdleFrameSkip(enabled = true) {
+  const engine = useGame();
+  useEffect60(() => {
+    const rs = engine.activeRenderSystem;
+    rs.setIdleFrameSkip?.(enabled);
+    return () => {
+      rs.setIdleFrameSkip?.(false);
+    };
+  }, [engine, enabled]);
+}
+
 // src/hooks/useAudioListener.ts
-import { useEffect as useEffect59, useContext as useContext49 } from "react";
+import { useEffect as useEffect61, useContext as useContext49 } from "react";
 function useAudioListener() {
   const engine = useContext49(EngineContext);
-  useEffect59(() => {
+  useEffect61(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -10337,13 +10529,13 @@ function useTouch() {
 }
 
 // src/hooks/useGestures.ts
-import { useEffect as useEffect60, useRef as useRef23 } from "react";
+import { useEffect as useEffect62, useRef as useRef24 } from "react";
 function useGestures(handlers, opts = {}) {
-  const handlersRef = useRef23(handlers);
+  const handlersRef = useRef24(handlers);
   handlersRef.current = handlers;
-  const optsRef = useRef23(opts);
+  const optsRef = useRef24(opts);
   optsRef.current = opts;
-  useEffect60(() => {
+  useEffect62(() => {
     const target = optsRef.current.target ?? window;
     let starts = [];
     let longPressTimer = null;
@@ -10503,14 +10695,14 @@ var touchHapticsControls = {
 };
 
 // src/hooks/useTimer.ts
-import { useRef as useRef24, useCallback as useCallback7, useEffect as useEffect61, useContext as useContext51 } from "react";
+import { useRef as useRef25, useCallback as useCallback8, useEffect as useEffect63, useContext as useContext51 } from "react";
 function useTimer(duration, onComplete, opts) {
   const engine = useContext51(EngineContext);
-  const onCompleteRef = useRef24(onComplete);
+  const onCompleteRef = useRef25(onComplete);
   onCompleteRef.current = onComplete;
-  const loopRef = useRef24(opts?.loop ?? false);
+  const loopRef = useRef25(opts?.loop ?? false);
   loopRef.current = opts?.loop ?? false;
-  const timerRef = useRef24(null);
+  const timerRef = useRef25(null);
   if (!timerRef.current) {
     timerRef.current = createTimer(
       duration,
@@ -10523,7 +10715,7 @@ function useTimer(duration, onComplete, opts) {
       opts?.autoStart ?? false
     );
   }
-  useEffect61(() => {
+  useEffect63(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -10535,13 +10727,13 @@ function useTimer(duration, onComplete, opts) {
       if (engine.ecs.hasEntity(eid)) engine.ecs.destroyEntity(eid);
     };
   }, [engine.ecs]);
-  const start2 = useCallback7(() => {
+  const start2 = useCallback8(() => {
     timerRef.current.start();
   }, []);
-  const stop = useCallback7(() => {
+  const stop = useCallback8(() => {
     timerRef.current.stop();
   }, []);
-  const reset = useCallback7(() => {
+  const reset = useCallback8(() => {
     timerRef.current.reset();
   }, []);
   return {
@@ -10564,15 +10756,15 @@ function useTimer(duration, onComplete, opts) {
 }
 
 // src/hooks/useCoroutine.ts
-import { useRef as useRef25, useEffect as useEffect62, useContext as useContext52 } from "react";
+import { useRef as useRef26, useEffect as useEffect64, useContext as useContext52 } from "react";
 var wait = (seconds) => ({ type: "wait", seconds });
 var waitFrames = (frames) => ({ type: "waitFrames", frames });
 var waitUntil = (condition) => ({ type: "waitUntil", condition });
 var nextCoroutineId = 1;
 function useCoroutine() {
   const engine = useContext52(EngineContext);
-  const coroutinesRef = useRef25(/* @__PURE__ */ new Map());
-  useEffect62(() => {
+  const coroutinesRef = useRef26(/* @__PURE__ */ new Map());
+  useEffect64(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -10637,33 +10829,33 @@ function useCoroutine() {
       return coroutinesRef.current.size;
     }
   };
-  const controlsRef = useRef25(controls);
+  const controlsRef = useRef26(controls);
   return controlsRef.current;
 }
 
 // src/hooks/useSceneManager.ts
-import { useState as useState13, useCallback as useCallback8, useRef as useRef26 } from "react";
+import { useState as useState13, useCallback as useCallback9, useRef as useRef27 } from "react";
 function useSceneManager(initialScene) {
   const [stack, setStack] = useState13([initialScene]);
-  const stackRef = useRef26(stack);
+  const stackRef = useRef27(stack);
   stackRef.current = stack;
-  const push = useCallback8((scene) => {
+  const push = useCallback9((scene) => {
     setStack((prev) => [...prev, scene]);
   }, []);
-  const pop = useCallback8(() => {
+  const pop = useCallback9(() => {
     const prev = stackRef.current;
     if (prev.length <= 1) return void 0;
     const popped = prev[prev.length - 1];
     setStack(prev.slice(0, -1));
     return popped;
   }, []);
-  const replace = useCallback8((scene) => {
+  const replace = useCallback9((scene) => {
     setStack((prev) => [...prev.slice(0, -1), scene]);
   }, []);
-  const reset = useCallback8((scene) => {
+  const reset = useCallback9((scene) => {
     setStack([scene]);
   }, []);
-  const has = useCallback8(
+  const has = useCallback9(
     (scene) => {
       return stack.includes(scene);
     },
@@ -10681,7 +10873,7 @@ function useSceneManager(initialScene) {
 }
 
 // src/hooks/useSceneTransition.ts
-import { useState as useState14, useCallback as useCallback9, useRef as useRef27, useEffect as useEffect63 } from "react";
+import { useState as useState14, useCallback as useCallback10, useRef as useRef28, useEffect as useEffect65 } from "react";
 function useSceneTransition(initialScene, defaultTransition) {
   const [stack, setStack] = useState14([initialScene]);
   const [transState, setTransState] = useState14({
@@ -10690,11 +10882,11 @@ function useSceneTransition(initialScene, defaultTransition) {
     effect: null,
     pendingAction: null
   });
-  const stackRef = useRef27(stack);
+  const stackRef = useRef28(stack);
   stackRef.current = stack;
-  const transRef = useRef27(transState);
+  const transRef = useRef28(transState);
   transRef.current = transState;
-  useEffect63(() => {
+  useEffect65(() => {
     if (transState.phase === "idle") return;
     const effect = transState.effect;
     if (!effect || effect.type === "instant") return;
@@ -10723,7 +10915,7 @@ function useSceneTransition(initialScene, defaultTransition) {
     rafId2 = requestAnimationFrame(animate);
     return () => cancelAnimationFrame(rafId2);
   }, [transState.phase, transState.effect]);
-  const startTransition = useCallback9(
+  const startTransition = useCallback10(
     (effect, action) => {
       const eff = effect ?? defaultTransition ?? { type: "instant" };
       if (eff.type === "instant" || isReducedMotionPreferred()) {
@@ -10739,13 +10931,13 @@ function useSceneTransition(initialScene, defaultTransition) {
     },
     [defaultTransition]
   );
-  const push = useCallback9(
+  const push = useCallback10(
     (scene, transition) => {
       startTransition(transition, () => setStack((prev) => [...prev, scene]));
     },
     [startTransition]
   );
-  const pop = useCallback9(
+  const pop = useCallback10(
     (transition) => {
       const prev = stackRef.current;
       if (prev.length <= 1) return void 0;
@@ -10755,13 +10947,13 @@ function useSceneTransition(initialScene, defaultTransition) {
     },
     [startTransition]
   );
-  const replace = useCallback9(
+  const replace = useCallback10(
     (scene, transition) => {
       startTransition(transition, () => setStack((prev) => [...prev.slice(0, -1), scene]));
     },
     [startTransition]
   );
-  const reset = useCallback9(
+  const reset = useCallback10(
     (scene, transition) => {
       startTransition(transition, () => setStack([scene]));
     },
@@ -10862,10 +11054,10 @@ function SceneTransitionOverlay({ controls }) {
 }
 
 // src/hooks/useHitstop.ts
-import { useContext as useContext53, useCallback as useCallback10 } from "react";
+import { useContext as useContext53, useCallback as useCallback11 } from "react";
 function useHitstop() {
   const engine = useContext53(EngineContext);
-  const freeze = useCallback10(
+  const freeze = useCallback11(
     (seconds) => {
       engine.loop.hitPause(seconds);
     },
@@ -10875,16 +11067,16 @@ function useHitstop() {
 }
 
 // src/hooks/useInputBuffer.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 function useInputBuffer(opts) {
-  return useMemo10(() => new InputBuffer(opts), []);
+  return useMemo11(() => new InputBuffer(opts), []);
 }
 
 // src/hooks/useComboDetector.ts
-import { useMemo as useMemo11, useRef as useRef28 } from "react";
+import { useMemo as useMemo12, useRef as useRef29 } from "react";
 function useComboDetector(combos) {
-  const lastComboRef = useRef28(null);
-  const result = useMemo11(() => {
+  const lastComboRef = useRef29(null);
+  const result = useMemo12(() => {
     const detector = new ComboDetector({ combos });
     const api = {
       feed(action) {
@@ -10906,11 +11098,11 @@ function useComboDetector(combos) {
 }
 
 // src/hooks/useParent.ts
-import { useEffect as useEffect64, useContext as useContext54 } from "react";
+import { useEffect as useEffect66, useContext as useContext54 } from "react";
 function useParent(childEntityId, parentEntityId) {
   const engine = useContext54(EngineContext);
   if (!engine) throw new Error("useParent must be used inside <Game>");
-  useEffect64(() => {
+  useEffect66(() => {
     setParent(engine.ecs, childEntityId, parentEntityId);
     return () => {
       removeParent(engine.ecs, childEntityId);
@@ -10919,7 +11111,7 @@ function useParent(childEntityId, parentEntityId) {
 }
 
 // src/hooks/useAccessibility.ts
-import { useCallback as useCallback11, useSyncExternalStore } from "react";
+import { useCallback as useCallback12, useSyncExternalStore } from "react";
 var _version = 0;
 var _listeners = /* @__PURE__ */ new Set();
 function subscribe(cb) {
@@ -10931,12 +11123,12 @@ function getSnapshot() {
 }
 function useAccessibility() {
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const setOptions = useCallback11((opts) => {
+  const setOptions = useCallback12((opts) => {
     setAccessibilityOptions(opts);
     _version++;
     for (const cb of _listeners) cb();
   }, []);
-  const announce = useCallback11((text, priority) => {
+  const announce = useCallback12((text, priority) => {
     announceToScreenReader(text, priority);
   }, []);
   return {
@@ -10947,18 +11139,18 @@ function useAccessibility() {
 }
 
 // src/hooks/useHMR.ts
-import { useEffect as useEffect65, useRef as useRef29, useMemo as useMemo12 } from "react";
+import { useEffect as useEffect67, useRef as useRef30, useMemo as useMemo13 } from "react";
 var idCounter = 0;
 function useHMR(hmrKey) {
-  const idRef = useRef29(null);
+  const idRef = useRef30(null);
   if (idRef.current === null) {
     idRef.current = hmrKey ?? `__hmr_${idCounter++}`;
   }
   const key = idRef.current;
   const isHotReload = hmrLoadState(key) !== void 0;
-  const disposeRef = useRef29(null);
-  const acceptRef = useRef29(null);
-  useEffect65(() => {
+  const disposeRef = useRef30(null);
+  const acceptRef = useRef30(null);
+  useEffect67(() => {
     const hot = import.meta.hot;
     if (!hot) return;
     hot.dispose(() => {
@@ -10972,7 +11164,7 @@ function useHMR(hmrKey) {
       acceptRef.current(prev);
     }
   }, [key]);
-  return useMemo12(
+  return useMemo13(
     () => ({
       onDispose(handler) {
         disposeRef.current = handler;
@@ -10991,11 +11183,11 @@ function useHMR(hmrKey) {
 }
 
 // src/hooks/useSquashStretch.ts
-import { useCallback as useCallback12, useContext as useContext55 } from "react";
+import { useCallback as useCallback13, useContext as useContext55 } from "react";
 function useSquashStretch() {
   const engine = useContext55(EngineContext);
   const entityId = useContext55(EntityContext);
-  const trigger = useCallback12(
+  const trigger = useCallback13(
     (scaleX, scaleY) => {
       const ss = engine.ecs.getComponent(entityId, "SquashStretch");
       if (!ss) return;
@@ -11008,16 +11200,16 @@ function useSquashStretch() {
 }
 
 // src/hooks/useHistory.ts
-import { useCallback as useCallback13, useContext as useContext56, useEffect as useEffect66, useRef as useRef30, useState as useState15 } from "react";
+import { useCallback as useCallback14, useContext as useContext56, useEffect as useEffect68, useRef as useRef31, useState as useState15 } from "react";
 function useHistory(options) {
   const engine = useContext56(EngineContext);
   const capacity = options?.capacity ?? 50;
   const bindKeys = options?.bindKeyboardShortcuts ?? false;
-  const stackRef = useRef30([]);
-  const indexRef = useRef30(-1);
+  const stackRef = useRef31([]);
+  const indexRef = useRef31(-1);
   const [version, setVersion] = useState15(0);
-  const bump = useCallback13(() => setVersion((v) => v + 1), []);
-  const push = useCallback13(() => {
+  const bump = useCallback14(() => setVersion((v) => v + 1), []);
+  const push = useCallback14(() => {
     const snap = engine.ecs.getSnapshot();
     const stack = stackRef.current;
     if (indexRef.current < stack.length - 1) {
@@ -11028,14 +11220,14 @@ function useHistory(options) {
     indexRef.current = stack.length - 1;
     bump();
   }, [engine, capacity, bump]);
-  const undo = useCallback13(() => {
+  const undo = useCallback14(() => {
     if (indexRef.current <= 0) return;
     indexRef.current -= 1;
     engine.ecs.restoreSnapshot(stackRef.current[indexRef.current]);
     engine.loop.markDirty();
     bump();
   }, [engine, bump]);
-  const redo = useCallback13(() => {
+  const redo = useCallback14(() => {
     const stack = stackRef.current;
     if (indexRef.current >= stack.length - 1) return;
     indexRef.current += 1;
@@ -11043,12 +11235,12 @@ function useHistory(options) {
     engine.loop.markDirty();
     bump();
   }, [engine, bump]);
-  const clear = useCallback13(() => {
+  const clear = useCallback14(() => {
     stackRef.current = [];
     indexRef.current = -1;
     bump();
   }, [bump]);
-  useEffect66(() => {
+  useEffect68(() => {
     if (!bindKeys) return;
     const onKey = (e) => {
       const mod = e.ctrlKey || e.metaKey;
@@ -11073,13 +11265,13 @@ function useHistory(options) {
 }
 
 // src/hooks/useSelection.tsx
-import { createContext as createContext2, useCallback as useCallback14, useContext as useContext57, useEffect as useEffect67, useMemo as useMemo13, useState as useState16 } from "react";
+import { createContext as createContext2, useCallback as useCallback15, useContext as useContext57, useEffect as useEffect69, useMemo as useMemo14, useState as useState16 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var SelectionContext = createContext2(null);
 function Selection({ initial, onChange, children }) {
   const engine = useContext57(EngineContext);
   const [selected, setSelected] = useState16(initial ?? []);
-  useEffect67(() => {
+  useEffect69(() => {
     if (!engine) return;
     return engine.ecs.onDestroyEntity((destroyedId) => {
       setSelected((prev) => {
@@ -11090,14 +11282,14 @@ function Selection({ initial, onChange, children }) {
       });
     });
   }, [engine, onChange]);
-  const commit = useCallback14(
+  const commit = useCallback15(
     (next) => {
       setSelected(next);
       onChange?.(next);
     },
     [onChange]
   );
-  const select = useCallback14(
+  const select = useCallback15(
     (id, opts) => {
       if (opts?.additive) {
         setSelected((prev) => {
@@ -11112,7 +11304,7 @@ function Selection({ initial, onChange, children }) {
     },
     [commit, onChange]
   );
-  const deselect = useCallback14(
+  const deselect = useCallback15(
     (id) => {
       setSelected((prev) => {
         if (!prev.includes(id)) return prev;
@@ -11123,7 +11315,7 @@ function Selection({ initial, onChange, children }) {
     },
     [onChange]
   );
-  const toggle = useCallback14(
+  const toggle = useCallback15(
     (id) => {
       setSelected((prev) => {
         const next = prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id];
@@ -11133,9 +11325,9 @@ function Selection({ initial, onChange, children }) {
     },
     [onChange]
   );
-  const clear = useCallback14(() => commit([]), [commit]);
-  const isSelected = useCallback14((id) => selected.includes(id), [selected]);
-  const value = useMemo13(
+  const clear = useCallback15(() => commit([]), [commit]);
+  const isSelected = useCallback15((id) => selected.includes(id), [selected]);
+  const value = useMemo14(
     () => ({ selected, select, deselect, toggle, clear, isSelected }),
     [selected, select, deselect, toggle, clear, isSelected]
   );
@@ -11148,10 +11340,10 @@ function useSelection() {
 }
 
 // src/components/TransformHandles.tsx
-import { useContext as useContext58, useEffect as useEffect69, useRef as useRef31 } from "react";
+import { useContext as useContext58, useEffect as useEffect71, useRef as useRef32 } from "react";
 
 // src/hooks/useOverlayTick.ts
-import { useEffect as useEffect68 } from "react";
+import { useEffect as useEffect70 } from "react";
 var callbacks = /* @__PURE__ */ new Set();
 var rafId = 0;
 function tick() {
@@ -11174,7 +11366,7 @@ function register(cb) {
   };
 }
 function useOverlayTick(callback, deps = []) {
-  useEffect68(() => {
+  useEffect70(() => {
     return register(callback);
   }, deps);
 }
@@ -11190,8 +11382,8 @@ function TransformHandles({
 }) {
   const engine = useContext58(EngineContext);
   const selection = useSelection();
-  const overlayRef = useRef31(null);
-  const dragRef = useRef31(null);
+  const overlayRef = useRef32(null);
+  const dragRef = useRef32(null);
   useOverlayTick(() => {
     if (!engine) return;
     const overlay = overlayRef.current;
@@ -11226,7 +11418,7 @@ function TransformHandles({
       node.style.transform = `translate(-50%, -50%) rotate(${t.rotation}rad)`;
     }
   }, [engine, selection.selected]);
-  useEffect69(() => {
+  useEffect71(() => {
     if (!engine) return;
     const onMove = (e) => {
       const drag = dragRef.current;
@@ -11450,7 +11642,7 @@ function worldToScreenCss(engine, wx, wy) {
 }
 
 // src/hooks/useSnap.ts
-import { useCallback as useCallback15, useContext as useContext59 } from "react";
+import { useCallback as useCallback16, useContext as useContext59 } from "react";
 function useSnap(options) {
   const engine = useContext59(EngineContext);
   const gridX = typeof options?.grid === "number" ? options.grid : options?.grid?.x ?? 0;
@@ -11458,7 +11650,7 @@ function useSnap(options) {
   const snapToEntities = options?.snapToEntities ?? false;
   const threshold = options?.threshold ?? 8;
   const exclude = options?.exclude;
-  const snapToGrid = useCallback15(
+  const snapToGrid = useCallback16(
     (x, y) => {
       const sx = gridX > 0 ? Math.round(x / gridX) * gridX : x;
       const sy = gridY > 0 ? Math.round(y / gridY) * gridY : y;
@@ -11466,7 +11658,7 @@ function useSnap(options) {
     },
     [gridX, gridY]
   );
-  const snap = useCallback15(
+  const snap = useCallback16(
     (x, y) => {
       let outX = x;
       let outY = y;
@@ -11541,7 +11733,7 @@ function getBounds(ecs, id) {
 }
 
 // src/components/EditableText.tsx
-import { useContext as useContext60, useEffect as useEffect70, useRef as useRef32 } from "react";
+import { useContext as useContext60, useEffect as useEffect72, useRef as useRef33 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function EditableText({
   value,
@@ -11565,8 +11757,8 @@ function EditableText({
 }) {
   const engine = useContext60(EngineContext);
   const entityId = useContext60(EntityContext);
-  const containerRef = useRef32(null);
-  const inputRef = useRef32(null);
+  const containerRef = useRef33(null);
+  const inputRef = useRef33(null);
   useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const container = containerRef.current;
@@ -11593,7 +11785,7 @@ function EditableText({
     container.style.setProperty("--cubeforge-canvas-left", `${rect.left + window.scrollX}px`);
     container.style.setProperty("--cubeforge-canvas-top", `${rect.top + window.scrollY}px`);
   }, [engine, entityId, width, height, fontSize]);
-  useEffect70(() => {
+  useEffect72(() => {
     if (autoFocus) inputRef.current?.focus();
   }, [autoFocus]);
   if (!engine) return null;
@@ -11724,7 +11916,7 @@ function copyRegion(source, region, scale) {
 }
 
 // src/components/A11yNode.tsx
-import { useContext as useContext61, useRef as useRef33 } from "react";
+import { useContext as useContext61, useRef as useRef34 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function A11yNode({
   label,
@@ -11740,7 +11932,7 @@ function A11yNode({
 }) {
   const engine = useContext61(EngineContext);
   const entityId = useContext61(EntityContext);
-  const nodeRef = useRef33(null);
+  const nodeRef = useRef34(null);
   useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const node = nodeRef.current;
@@ -11829,7 +12021,7 @@ function worldToScreenCss3(engine, wx, wy) {
 }
 
 // src/components/VectorPath.tsx
-import { useContext as useContext62, useRef as useRef34 } from "react";
+import { useContext as useContext62, useRef as useRef35 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function VectorPath({
   d,
@@ -11845,7 +12037,7 @@ function VectorPath({
 }) {
   const engine = useContext62(EngineContext);
   const entityId = useContext62(EntityContext);
-  const svgRef = useRef34(null);
+  const svgRef = useRef35(null);
   useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const svg = svgRef.current;
@@ -11906,12 +12098,12 @@ function worldToScreenCss4(engine, wx, wy) {
 }
 
 // src/hooks/useGrid.ts
-import { useCallback as useCallback16, useContext as useContext63, useMemo as useMemo14, useRef as useRef35, useState as useState17 } from "react";
+import { useCallback as useCallback17, useContext as useContext63, useMemo as useMemo15, useRef as useRef36, useState as useState17 } from "react";
 function useGrid({ width, height, fill }) {
   const engine = useContext63(EngineContext);
   const [version, setVersion] = useState17(0);
-  const bump = useCallback16(() => setVersion((v) => v + 1), []);
-  const dataRef = useRef35(null);
+  const bump = useCallback17(() => setVersion((v) => v + 1), []);
+  const dataRef = useRef36(null);
   if (dataRef.current === null) {
     const arr = new Array(width * height);
     if (typeof fill === "function") {
@@ -11926,19 +12118,19 @@ function useGrid({ width, height, fill }) {
     }
     dataRef.current = arr;
   }
-  const markChanged = useCallback16(() => {
+  const markChanged = useCallback17(() => {
     engine?.loop.markDirty();
     bump();
   }, [engine, bump]);
-  const inBounds = useCallback16((x, y) => x >= 0 && y >= 0 && x < width && y < height, [width, height]);
-  const get = useCallback16(
+  const inBounds = useCallback17((x, y) => x >= 0 && y >= 0 && x < width && y < height, [width, height]);
+  const get = useCallback17(
     (x, y) => {
       if (!inBounds(x, y)) return void 0;
       return dataRef.current[y * width + x];
     },
     [width, inBounds]
   );
-  const set = useCallback16(
+  const set = useCallback17(
     (x, y, value) => {
       if (!inBounds(x, y)) return;
       const data = dataRef.current;
@@ -11949,7 +12141,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, inBounds, markChanged]
   );
-  const swap = useCallback16(
+  const swap = useCallback17(
     (ax, ay, bx, by) => {
       if (!inBounds(ax, ay) || !inBounds(bx, by)) return;
       const data = dataRef.current;
@@ -11963,7 +12155,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, inBounds, markChanged]
   );
-  const forEach = useCallback16(
+  const forEach = useCallback17(
     (cb) => {
       const data = dataRef.current;
       for (let y = 0; y < height; y++) {
@@ -11974,7 +12166,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, height]
   );
-  const find = useCallback16(
+  const find = useCallback17(
     (pred) => {
       const data = dataRef.current;
       for (let y = 0; y < height; y++) {
@@ -11987,7 +12179,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, height]
   );
-  const count = useCallback16(
+  const count = useCallback17(
     (pred) => {
       const data = dataRef.current;
       let n = 0;
@@ -12000,7 +12192,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, height]
   );
-  const neighbors = useCallback16(
+  const neighbors = useCallback17(
     (x, y, diagonal = false) => {
       const data = dataRef.current;
       const result = [];
@@ -12028,7 +12220,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, inBounds]
   );
-  const fillAll = useCallback16(
+  const fillAll = useCallback17(
     (value) => {
       const data = dataRef.current;
       if (typeof value === "function") {
@@ -12045,7 +12237,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, height, markChanged]
   );
-  const toArray = useCallback16(() => {
+  const toArray = useCallback17(() => {
     const data = dataRef.current;
     const out = new Array(height);
     for (let y = 0; y < height; y++) {
@@ -12055,7 +12247,7 @@ function useGrid({ width, height, fill }) {
     }
     return out;
   }, [width, height]);
-  const fromArray = useCallback16(
+  const fromArray = useCallback17(
     (arr) => {
       const data = dataRef.current;
       for (let y = 0; y < height; y++) {
@@ -12070,7 +12262,7 @@ function useGrid({ width, height, fill }) {
     [width, height, markChanged]
   );
   void version;
-  return useMemo14(
+  return useMemo15(
     () => ({
       width,
       height,
@@ -12091,7 +12283,7 @@ function useGrid({ width, height, fill }) {
 }
 
 // src/hooks/useTurnSystem.ts
-import { useCallback as useCallback17, useContext as useContext64, useEffect as useEffect71, useMemo as useMemo15, useRef as useRef36, useState as useState18 } from "react";
+import { useCallback as useCallback18, useContext as useContext64, useEffect as useEffect73, useMemo as useMemo16, useRef as useRef37, useState as useState18 } from "react";
 function useTurnSystem({
   players,
   initialIndex = 0,
@@ -12104,11 +12296,11 @@ function useTurnSystem({
   const [activeIndex, setActiveIndex] = useState18(initialIndex % players.length);
   const [turn, setTurn] = useState18(0);
   const [isPending, setIsPending] = useState18(false);
-  const pendingRafId = useRef36(null);
-  const pendingRemaining = useRef36(0);
-  const pendingTarget = useRef36(null);
-  const pendingLastTime = useRef36(0);
-  const clearPending = useCallback17(() => {
+  const pendingRafId = useRef37(null);
+  const pendingRemaining = useRef37(0);
+  const pendingTarget = useRef37(null);
+  const pendingLastTime = useRef37(0);
+  const clearPending = useCallback18(() => {
     if (pendingRafId.current !== null) {
       cancelAnimationFrame(pendingRafId.current);
       pendingRafId.current = null;
@@ -12116,13 +12308,13 @@ function useTurnSystem({
     pendingTarget.current = null;
     setIsPending(false);
   }, []);
-  const startedOnce = useRef36(false);
-  useEffect71(() => {
+  const startedOnce = useRef37(false);
+  useEffect73(() => {
     if (startedOnce.current) return;
     startedOnce.current = true;
     onTurnStart?.({ player: players[activeIndex], index: activeIndex, turn: 0 });
   }, []);
-  const applyChange = useCallback17(
+  const applyChange = useCallback18(
     (nextIndex) => {
       const curr = players[activeIndex];
       onTurnEnd?.({ player: curr, index: activeIndex, turn });
@@ -12135,7 +12327,7 @@ function useTurnSystem({
     },
     [players, activeIndex, turn, onTurnStart, onTurnEnd, engine]
   );
-  const scheduleChange = useCallback17(
+  const scheduleChange = useCallback18(
     (nextIndex) => {
       clearPending();
       if (aiDelay <= 0) {
@@ -12167,9 +12359,9 @@ function useTurnSystem({
     },
     [aiDelay, applyChange, clearPending, engine]
   );
-  const nextTurn = useCallback17(() => scheduleChange(activeIndex + 1), [scheduleChange, activeIndex]);
-  const prevTurn = useCallback17(() => scheduleChange(activeIndex - 1), [scheduleChange, activeIndex]);
-  const skipTo = useCallback17(
+  const nextTurn = useCallback18(() => scheduleChange(activeIndex + 1), [scheduleChange, activeIndex]);
+  const prevTurn = useCallback18(() => scheduleChange(activeIndex - 1), [scheduleChange, activeIndex]);
+  const skipTo = useCallback18(
     (target) => {
       let idx;
       if (typeof target === "number") {
@@ -12182,19 +12374,19 @@ function useTurnSystem({
     },
     [players, scheduleChange]
   );
-  const reset = useCallback17(() => {
+  const reset = useCallback18(() => {
     clearPending();
     setActiveIndex(initialIndex % players.length);
     setTurn(0);
     engine?.loop.markDirty();
   }, [players.length, initialIndex, clearPending, engine]);
-  useEffect71(
+  useEffect73(
     () => () => {
       if (pendingRafId.current !== null) cancelAnimationFrame(pendingRafId.current);
     },
     []
   );
-  return useMemo15(
+  return useMemo16(
     () => ({
       activePlayer: players[activeIndex],
       activeIndex,
@@ -12210,13 +12402,13 @@ function useTurnSystem({
 }
 
 // src/hooks/useHoverable.ts
-import { useContext as useContext65, useEffect as useEffect72, useState as useState19 } from "react";
+import { useContext as useContext65, useEffect as useEffect74, useState as useState19 } from "react";
 function useHoverable(options) {
   const engine = useContext65(EngineContext);
   const ctxEntityId = useContext65(EntityContext);
   const entityId = options?.entityId ?? ctxEntityId;
   const [isHovered, setIsHovered] = useState19(false);
-  useEffect72(() => {
+  useEffect74(() => {
     if (!engine || entityId === null || entityId === void 0 || options?.disabled) return;
     const canvas = engine.canvas;
     let hovered = false;
@@ -12293,7 +12485,7 @@ function screenToWorld(engine, cssX, cssY) {
 }
 
 // src/hooks/useDragDrop.ts
-import { useContext as useContext66, useEffect as useEffect73, useRef as useRef37, useState as useState20 } from "react";
+import { useContext as useContext66, useEffect as useEffect75, useRef as useRef38, useState as useState20 } from "react";
 var dragStateByEngine = /* @__PURE__ */ new WeakMap();
 function getActiveDrag(engine) {
   return dragStateByEngine.get(engine) ?? null;
@@ -12318,9 +12510,9 @@ function useDraggable(options) {
   const entityId = options?.entityId ?? ctxEntityId;
   const [isDragging, setIsDragging] = useState20(false);
   const [position, setPosition] = useState20({ x: 0, y: 0 });
-  const optsRef = useRef37(options);
+  const optsRef = useRef38(options);
   optsRef.current = options;
-  useEffect73(() => {
+  useEffect75(() => {
     if (!engine || entityId === null || entityId === void 0 || options?.disabled) return;
     const canvas = engine.canvas;
     let dragging = false;
@@ -12430,9 +12622,9 @@ function useDroppable(options) {
   const entityId = options?.entityId ?? ctxEntityId;
   const [isOver, setIsOver] = useState20(false);
   const [hoveredBy, setHoveredBy] = useState20(null);
-  const optsRef = useRef37(options);
+  const optsRef = useRef38(options);
   optsRef.current = options;
-  useEffect73(() => {
+  useEffect75(() => {
     if (!engine || entityId === null || entityId === void 0 || options?.disabled) return;
     let currentlyOver = false;
     const check = () => {
@@ -12534,7 +12726,7 @@ function findDroppableUnder(engine, drag) {
 }
 
 // src/hooks/useKeyboardFocus.ts
-import { useContext as useContext67, useEffect as useEffect74, useRef as useRef38, useState as useState21 } from "react";
+import { useContext as useContext67, useEffect as useEffect76, useRef as useRef39, useState as useState21 } from "react";
 var registry = /* @__PURE__ */ new Map();
 var focusedId = null;
 var subscribers = /* @__PURE__ */ new Set();
@@ -12551,9 +12743,9 @@ function setFocused(id) {
 }
 function useFocusable(options) {
   const entityIdCtx = useContext67(EntityContext);
-  const optsRef = useRef38(options);
+  const optsRef = useRef39(options);
   optsRef.current = options;
-  useEffect74(() => {
+  useEffect76(() => {
     if (entityIdCtx === null || entityIdCtx === void 0) return;
     const id = entityIdCtx;
     const entry = {
@@ -12573,14 +12765,14 @@ function useFocusable(options) {
 function useKeyboardFocus() {
   const engine = useContext67(EngineContext);
   const [focused, setFocusedState] = useState21(focusedId);
-  useEffect74(() => {
+  useEffect76(() => {
     const cb = () => setFocusedState(focusedId);
     subscribers.add(cb);
     return () => {
       subscribers.delete(cb);
     };
   }, []);
-  useEffect74(() => {
+  useEffect76(() => {
     if (!engine) return;
     const onKey = (e) => {
       const target = e.target;
@@ -12706,7 +12898,7 @@ function subscribeFocus(cb) {
 }
 
 // src/components/FocusRing.tsx
-import { useContext as useContext68, useEffect as useEffect75, useRef as useRef39, useState as useState22 } from "react";
+import { useContext as useContext68, useEffect as useEffect77, useRef as useRef40, useState as useState22 } from "react";
 import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function FocusRing({
   color = "#4fc3f7",
@@ -12716,14 +12908,14 @@ function FocusRing({
   pulse = true
 }) {
   const engine = useContext68(EngineContext);
-  const ringRef = useRef39(null);
+  const ringRef = useRef40(null);
   const [focused, setFocused2] = useState22(getFocusedEntityId());
   const [reducedMotion, setReducedMotion] = useState22(false);
-  useEffect75(() => {
+  useEffect77(() => {
     const unsub = subscribeFocus(() => setFocused2(getFocusedEntityId()));
     return unsub;
   }, []);
-  useEffect75(() => {
+  useEffect77(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     setReducedMotion(mq.matches);
@@ -12860,10 +13052,10 @@ function listSavedScenes(prefix = "") {
 }
 
 // ../gameplay/src/hooks/useAnimationController.ts
-import { useState as useState23, useCallback as useCallback18 } from "react";
+import { useState as useState23, useCallback as useCallback19 } from "react";
 function useAnimationController(states, initial) {
   const [stateName, setStateName] = useState23(initial);
-  const setState = useCallback18((next) => {
+  const setState = useCallback19((next) => {
     setStateName((prev) => prev === next ? prev : next);
   }, []);
   const clip = states[stateName] ?? states[initial];
@@ -12885,39 +13077,39 @@ function useAnimationController(states, initial) {
 }
 
 // ../gameplay/src/hooks/useAISteering.ts
-import { useCallback as useCallback19 } from "react";
+import { useCallback as useCallback20 } from "react";
 function useAISteering() {
-  const seek$ = useCallback19((pos, target, speed) => seek(pos, target, speed), []);
-  const flee$ = useCallback19((pos, threat, speed) => flee(pos, threat, speed), []);
-  const arrive$ = useCallback19(
+  const seek$ = useCallback20((pos, target, speed) => seek(pos, target, speed), []);
+  const flee$ = useCallback20((pos, threat, speed) => flee(pos, threat, speed), []);
+  const arrive$ = useCallback20(
     (pos, target, speed, slowRadius) => arrive(pos, target, speed, slowRadius),
     []
   );
-  const patrol$ = useCallback19(
+  const patrol$ = useCallback20(
     (pos, waypoints, speed, currentIdx, arriveThreshold) => patrol(pos, waypoints, speed, currentIdx, arriveThreshold),
     []
   );
-  const wander$ = useCallback19(
+  const wander$ = useCallback20(
     (pos, angle, speed, jitter) => wander(pos, angle, speed, jitter),
     []
   );
-  const pursuit$ = useCallback19(
+  const pursuit$ = useCallback20(
     (pos, targetPos, targetVel, speed, lookAhead) => pursuit(pos, targetPos, targetVel, speed, lookAhead),
     []
   );
-  const evade$ = useCallback19(
+  const evade$ = useCallback20(
     (pos, threatPos, threatVel, speed, lookAhead) => evade(pos, threatPos, threatVel, speed, lookAhead),
     []
   );
-  const separation$ = useCallback19(
+  const separation$ = useCallback20(
     (pos, neighbors, speed, radius) => separation(pos, neighbors, speed, radius),
     []
   );
-  const cohesion$ = useCallback19(
+  const cohesion$ = useCallback20(
     (pos, neighbors, speed) => cohesion(pos, neighbors, speed),
     []
   );
-  const alignment$ = useCallback19(
+  const alignment$ = useCallback20(
     (neighborVelocities, speed) => alignment(neighborVelocities, speed),
     []
   );
@@ -12948,11 +13140,11 @@ function useDamageZone(damage, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useDropThrough.ts
-import { useContext as useContext70, useCallback as useCallback20 } from "react";
+import { useContext as useContext70, useCallback as useCallback21 } from "react";
 function useDropThrough(frames = 8) {
   const engine = useContext70(EngineContext);
   const entityId = useContext70(EntityContext);
-  const dropThrough = useCallback20(() => {
+  const dropThrough = useCallback21(() => {
     const rb = engine.ecs.getComponent(entityId, "RigidBody");
     if (rb) rb.dropThrough = frames;
   }, [engine.ecs, entityId, frames]);
@@ -12960,17 +13152,17 @@ function useDropThrough(frames = 8) {
 }
 
 // ../gameplay/src/hooks/useGameStateMachine.ts
-import { useState as useState24, useRef as useRef40, useCallback as useCallback21, useEffect as useEffect76, useContext as useContext71 } from "react";
+import { useState as useState24, useRef as useRef41, useCallback as useCallback22, useEffect as useEffect78, useContext as useContext71 } from "react";
 function useGameStateMachine(states, initial) {
   const engine = useContext71(EngineContext);
   const [state, setState] = useState24(initial);
-  const stateRef = useRef40(initial);
-  const statesRef = useRef40(states);
+  const stateRef = useRef41(initial);
+  const statesRef = useRef41(states);
   statesRef.current = states;
-  useEffect76(() => {
+  useEffect78(() => {
     statesRef.current[initial]?.onEnter?.();
   }, []);
-  const transition = useCallback21((to) => {
+  const transition = useCallback22((to) => {
     const current = stateRef.current;
     if (current === to) return;
     statesRef.current[current]?.onExit?.();
@@ -12978,7 +13170,7 @@ function useGameStateMachine(states, initial) {
     setState(to);
     statesRef.current[to]?.onEnter?.();
   }, []);
-  useEffect76(() => {
+  useEffect78(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -12994,27 +13186,27 @@ function useGameStateMachine(states, initial) {
 }
 
 // ../gameplay/src/hooks/useHealth.ts
-import { useRef as useRef41, useEffect as useEffect77, useContext as useContext72, useCallback as useCallback22 } from "react";
+import { useRef as useRef42, useEffect as useEffect79, useContext as useContext72, useCallback as useCallback23 } from "react";
 function useHealth(maxHp, opts = {}) {
   const engine = useContext72(EngineContext);
   const entityId = useContext72(EntityContext);
-  const hpRef = useRef41(maxHp);
-  const invincibleRef = useRef41(false);
+  const hpRef = useRef42(maxHp);
+  const invincibleRef = useRef42(false);
   const iFrameDuration = opts.iFrames ?? 1;
-  const onDeathRef = useRef41(opts.onDeath);
-  const onDamageRef = useRef41(opts.onDamage);
-  useEffect77(() => {
+  const onDeathRef = useRef42(opts.onDeath);
+  const onDamageRef = useRef42(opts.onDamage);
+  useEffect79(() => {
     onDeathRef.current = opts.onDeath;
   });
-  useEffect77(() => {
+  useEffect79(() => {
     onDamageRef.current = opts.onDamage;
   });
-  const timerRef = useRef41(
+  const timerRef = useRef42(
     createTimer(iFrameDuration, () => {
       invincibleRef.current = false;
     })
   );
-  const takeDamage = useCallback22(
+  const takeDamage = useCallback23(
     (amount = 1) => {
       if (invincibleRef.current || hpRef.current <= 0) return;
       hpRef.current = Math.max(0, hpRef.current - amount);
@@ -13027,28 +13219,28 @@ function useHealth(maxHp, opts = {}) {
     },
     [iFrameDuration]
   );
-  const takeDamageRef = useRef41(takeDamage);
-  useEffect77(() => {
+  const takeDamageRef = useRef42(takeDamage);
+  useEffect79(() => {
     takeDamageRef.current = takeDamage;
   }, [takeDamage]);
-  useEffect77(() => {
+  useEffect79(() => {
     return engine.events.on(`damage:${entityId}`, ({ amount }) => {
       takeDamageRef.current(amount);
     });
   }, [engine.events, entityId]);
-  const heal = useCallback22(
+  const heal = useCallback23(
     (amount) => {
       hpRef.current = Math.min(maxHp, hpRef.current + amount);
     },
     [maxHp]
   );
-  const setHp = useCallback22(
+  const setHp = useCallback23(
     (hp) => {
       hpRef.current = Math.min(maxHp, Math.max(0, hp));
     },
     [maxHp]
   );
-  const update = useCallback22((dt) => {
+  const update = useCallback23((dt) => {
     timerRef.current.update(dt);
   }, []);
   return {
@@ -13072,11 +13264,11 @@ function useHealth(maxHp, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useKinematicBody.ts
-import { useContext as useContext73, useCallback as useCallback23 } from "react";
+import { useContext as useContext73, useCallback as useCallback24 } from "react";
 function useKinematicBody() {
   const engine = useContext73(EngineContext);
   const entityId = useContext73(EntityContext);
-  const moveAndCollide = useCallback23(
+  const moveAndCollide = useCallback24(
     (dx, dy) => {
       const transform = engine.ecs.getComponent(entityId, "Transform");
       if (!transform) return { dx: 0, dy: 0 };
@@ -13112,7 +13304,7 @@ function useKinematicBody() {
     },
     [engine.ecs, entityId]
   );
-  const setVelocity = useCallback23(
+  const setVelocity = useCallback24(
     (vx, vy) => {
       const rb = engine.ecs.getComponent(entityId, "RigidBody");
       if (rb) {
@@ -13122,7 +13314,7 @@ function useKinematicBody() {
     },
     [engine.ecs, entityId]
   );
-  const setAngularVelocity = useCallback23(
+  const setAngularVelocity = useCallback24(
     (w) => {
       const rb = engine.ecs.getComponent(entityId, "RigidBody");
       if (rb) rb.angularVelocity = w;
@@ -13133,12 +13325,12 @@ function useKinematicBody() {
 }
 
 // ../gameplay/src/hooks/useLevelTransition.ts
-import { useState as useState25, useRef as useRef42, useCallback as useCallback24 } from "react";
+import { useState as useState25, useRef as useRef43, useCallback as useCallback25 } from "react";
 function useLevelTransition(initial) {
   const [currentLevel, setCurrentLevel] = useState25(initial);
   const [isTransitioning, setIsTransitioning] = useState25(false);
-  const overlayRef = useRef42(null);
-  const transitionTo = useCallback24((level, opts = {}) => {
+  const overlayRef = useRef43(null);
+  const transitionTo = useCallback25((level, opts = {}) => {
     const { duration = 0.4, type = "fade" } = opts;
     if (type === "instant") {
       setCurrentLevel(level);
@@ -13175,7 +13367,7 @@ function useLevelTransition(initial) {
 }
 
 // ../gameplay/src/hooks/usePlatformerController.ts
-import { useContext as useContext74, useEffect as useEffect78 } from "react";
+import { useContext as useContext74, useEffect as useEffect80 } from "react";
 function normalizeKeys(val, defaults) {
   if (!val) return defaults;
   return Array.isArray(val) ? val : [val];
@@ -13199,7 +13391,7 @@ function usePlatformerController(entityId, opts = {}) {
   const leftKeys = normalizeKeys(bindings?.left, ["ArrowLeft", "KeyA", "a"]);
   const rightKeys = normalizeKeys(bindings?.right, ["ArrowRight", "KeyD", "d"]);
   const jumpKeys = normalizeKeys(bindings?.jump, ["Space", "ArrowUp", "KeyW", "w"]);
-  useEffect78(() => {
+  useEffect80(() => {
     const state = {
       coyoteTimer: 0,
       jumpBuffer: 0,
@@ -13263,22 +13455,22 @@ function usePlatformerController(entityId, opts = {}) {
 }
 
 // ../gameplay/src/hooks/usePathfinding.ts
-import { useCallback as useCallback25 } from "react";
+import { useCallback as useCallback26 } from "react";
 function usePathfinding() {
-  const createGrid$ = useCallback25(
+  const createGrid$ = useCallback26(
     (cols, rows, cellSize) => createNavGrid(cols, rows, cellSize),
     []
   );
-  const setWalkable$ = useCallback25(
+  const setWalkable$ = useCallback26(
     (grid, col, row, walkable) => setWalkable(grid, col, row, walkable),
     []
   );
-  const findPath$ = useCallback25((grid, start2, goal) => findPath(grid, start2, goal), []);
+  const findPath$ = useCallback26((grid, start2, goal) => findPath(grid, start2, goal), []);
   return { createGrid: createGrid$, setWalkable: setWalkable$, findPath: findPath$ };
 }
 
 // ../gameplay/src/hooks/usePersistedBindings.ts
-import { useState as useState26, useCallback as useCallback26, useMemo as useMemo16, useContext as useContext75 } from "react";
+import { useState as useState26, useCallback as useCallback27, useMemo as useMemo17, useContext as useContext75 } from "react";
 function usePersistedBindings(storageKey, defaults) {
   const engine = useContext75(EngineContext);
   const input = engine.input;
@@ -13290,7 +13482,7 @@ function usePersistedBindings(storageKey, defaults) {
     }
     return defaults;
   });
-  const normalized = useMemo16(() => {
+  const normalized = useMemo17(() => {
     const out = {};
     for (const [action, keys] of Object.entries(bindings)) {
       if (typeof keys === "string") out[action] = [keys];
@@ -13298,7 +13490,7 @@ function usePersistedBindings(storageKey, defaults) {
     }
     return out;
   }, [bindings]);
-  const rebind = useCallback26(
+  const rebind = useCallback27(
     (action, keys) => {
       setBindings((prev) => {
         const next = { ...prev, [action]: Array.isArray(keys) ? keys : [keys] };
@@ -13311,14 +13503,14 @@ function usePersistedBindings(storageKey, defaults) {
     },
     [storageKey]
   );
-  const reset = useCallback26(() => {
+  const reset = useCallback27(() => {
     try {
       localStorage.removeItem(storageKey);
     } catch {
     }
     setBindings(defaults);
   }, [storageKey]);
-  return useMemo16(
+  return useMemo17(
     () => ({
       bindings,
       rebind,
@@ -13332,21 +13524,21 @@ function usePersistedBindings(storageKey, defaults) {
 }
 
 // ../gameplay/src/hooks/useRestart.ts
-import { useState as useState27, useCallback as useCallback27 } from "react";
+import { useState as useState27, useCallback as useCallback28 } from "react";
 function useRestart() {
   const [restartKey, setRestartKey] = useState27(0);
-  const restart = useCallback27(() => {
+  const restart = useCallback28(() => {
     setRestartKey((k) => k + 1);
   }, []);
   return { restartKey, restart };
 }
 
 // ../gameplay/src/hooks/useSave.ts
-import { useCallback as useCallback28, useRef as useRef43 } from "react";
+import { useCallback as useCallback29, useRef as useRef44 } from "react";
 function useSave(key, defaultValue, opts = {}) {
   const version = opts.version ?? 1;
-  const dataRef = useRef43(defaultValue);
-  const save = useCallback28(
+  const dataRef = useRef44(defaultValue);
+  const save = useCallback29(
     (value) => {
       dataRef.current = value;
       const slot = { version, data: value };
@@ -13358,7 +13550,7 @@ function useSave(key, defaultValue, opts = {}) {
     },
     [key, version]
   );
-  const load = useCallback28(() => {
+  const load = useCallback29(() => {
     try {
       const raw = localStorage.getItem(key);
       if (!raw) return defaultValue;
@@ -13378,11 +13570,11 @@ function useSave(key, defaultValue, opts = {}) {
       return defaultValue;
     }
   }, [key, version]);
-  const clear = useCallback28(() => {
+  const clear = useCallback29(() => {
     localStorage.removeItem(key);
     dataRef.current = defaultValue;
   }, [key]);
-  const exists = useCallback28(() => {
+  const exists = useCallback29(() => {
     return localStorage.getItem(key) !== null;
   }, [key]);
   return {
@@ -13397,7 +13589,7 @@ function useSave(key, defaultValue, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useIDBSave.ts
-import { useCallback as useCallback29, useRef as useRef44 } from "react";
+import { useCallback as useCallback30, useRef as useRef45 } from "react";
 var DB_NAME = "cubeforge-saves";
 var STORE_NAME = "saves";
 function openDB() {
@@ -13415,12 +13607,12 @@ function openDB() {
 }
 function useIDBSave(key, defaultValue, opts = {}) {
   const version = opts.version ?? 1;
-  const dbRef = useRef44(null);
-  const getDB = useCallback29(() => {
+  const dbRef = useRef45(null);
+  const getDB = useCallback30(() => {
     if (!dbRef.current) dbRef.current = openDB();
     return dbRef.current;
   }, []);
-  const save = useCallback29(
+  const save = useCallback30(
     async (value) => {
       const db = await getDB();
       const slot = { version, data: value };
@@ -13433,7 +13625,7 @@ function useIDBSave(key, defaultValue, opts = {}) {
     },
     [getDB, key, version]
   );
-  const load = useCallback29(async () => {
+  const load = useCallback30(async () => {
     const db = await getDB();
     return new Promise((resolve, reject) => {
       const tx = db.transaction(STORE_NAME, "readonly");
@@ -13459,7 +13651,7 @@ function useIDBSave(key, defaultValue, opts = {}) {
       req.onerror = () => reject(req.error);
     });
   }, [getDB, key, version]);
-  const clear = useCallback29(async () => {
+  const clear = useCallback30(async () => {
     const db = await getDB();
     return new Promise((resolve, reject) => {
       const tx = db.transaction(STORE_NAME, "readwrite");
@@ -13468,7 +13660,7 @@ function useIDBSave(key, defaultValue, opts = {}) {
       req.onerror = () => reject(req.error);
     });
   }, [getDB, key]);
-  const exists = useCallback29(async () => {
+  const exists = useCallback30(async () => {
     const db = await getDB();
     return new Promise((resolve, reject) => {
       const tx = db.transaction(STORE_NAME, "readonly");
@@ -13481,7 +13673,7 @@ function useIDBSave(key, defaultValue, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useSaveSlots.ts
-import { useCallback as useCallback30, useState as useState28 } from "react";
+import { useCallback as useCallback31, useState as useState28 } from "react";
 function useSaveSlots(namespace, opts = {}) {
   const version = opts.version ?? 1;
   const indexKey = `cubeforge-saves:${namespace}:__index`;
@@ -13535,7 +13727,7 @@ function useSaveSlots(namespace, opts = {}) {
     const metas = readIndex().map((id) => readSlot(id)?.meta).filter((m) => m !== void 0).sort((a, b) => a.savedAt < b.savedAt ? 1 : -1);
     setSlots(metas);
   }
-  const save = useCallback30(
+  const save = useCallback31(
     (id, data, label, thumbnail) => {
       const meta = {
         id,
@@ -13550,7 +13742,7 @@ function useSaveSlots(namespace, opts = {}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [namespace, version]
   );
-  const load = useCallback30(
+  const load = useCallback31(
     (id) => {
       const entry = readSlot(id);
       if (!entry) return null;
@@ -13566,7 +13758,7 @@ function useSaveSlots(namespace, opts = {}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [namespace, version]
   );
-  const deleteFn = useCallback30(
+  const deleteFn = useCallback31(
     (id) => {
       try {
         localStorage.removeItem(slotKey(id));
@@ -13578,7 +13770,7 @@ function useSaveSlots(namespace, opts = {}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [namespace]
   );
-  const copy = useCallback30(
+  const copy = useCallback31(
     (fromId, toId) => {
       const entry = readSlot(fromId);
       if (!entry) return false;
@@ -13591,7 +13783,7 @@ function useSaveSlots(namespace, opts = {}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [namespace, version]
   );
-  const rename = useCallback30(
+  const rename = useCallback31(
     (id, label) => {
       const entry = readSlot(id);
       if (!entry) return;
@@ -13601,10 +13793,10 @@ function useSaveSlots(namespace, opts = {}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [namespace]
   );
-  const listSlots = useCallback30(() => {
+  const listSlots = useCallback31(() => {
     return readIndex().map((id) => readSlot(id)?.meta).filter((m) => m !== void 0).sort((a, b) => a.savedAt < b.savedAt ? 1 : -1);
   }, [namespace]);
-  const exists = useCallback30(
+  const exists = useCallback31(
     (id) => {
       return readSlot(id) !== null;
     },
@@ -13626,7 +13818,7 @@ function useSaveSlots(namespace, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useTopDownMovement.ts
-import { useContext as useContext76, useEffect as useEffect79 } from "react";
+import { useContext as useContext76, useEffect as useEffect81 } from "react";
 function moveToward(current, target, maxDelta) {
   const diff = target - current;
   if (Math.abs(diff) <= maxDelta) return target;
@@ -13635,7 +13827,7 @@ function moveToward(current, target, maxDelta) {
 function useTopDownMovement(entityId, opts = {}) {
   const engine = useContext76(EngineContext);
   const { speed = 200, normalizeDiagonal = true, acceleration = Infinity, deceleration = acceleration } = opts;
-  useEffect79(() => {
+  useEffect81(() => {
     const updateFn = (id, world, input, dt) => {
       if (!world.hasEntity(id)) return;
       const rb = world.getComponent(id, "RigidBody");
@@ -13675,18 +13867,18 @@ function useTopDownMovement(entityId, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useDialogue.ts
-import { useState as useState29, useCallback as useCallback31, useRef as useRef45 } from "react";
+import { useState as useState29, useCallback as useCallback32, useRef as useRef46 } from "react";
 function useDialogue() {
   const [active, setActive] = useState29(false);
   const [currentId, setCurrentId] = useState29(null);
-  const scriptRef = useRef45(null);
-  const start2 = useCallback31((script, startId) => {
+  const scriptRef = useRef46(null);
+  const start2 = useCallback32((script, startId) => {
     scriptRef.current = script;
     const id = startId ?? Object.keys(script)[0];
     setCurrentId(id);
     setActive(true);
   }, []);
-  const advance = useCallback31(
+  const advance = useCallback32(
     (choiceIndex) => {
       if (!scriptRef.current || !currentId) return;
       const line = scriptRef.current[currentId];
@@ -13716,7 +13908,7 @@ function useDialogue() {
     },
     [currentId]
   );
-  const close = useCallback31(() => {
+  const close = useCallback32(() => {
     setActive(false);
     setCurrentId(null);
     scriptRef.current = null;
@@ -13726,7 +13918,7 @@ function useDialogue() {
 }
 
 // ../gameplay/src/hooks/useDialogueTree.ts
-import { useState as useState30, useCallback as useCallback32, useRef as useRef46 } from "react";
+import { useState as useState30, useCallback as useCallback33, useRef as useRef47 } from "react";
 function interpolate(text, vars) {
   return text.replace(/\{(\w+)\}/g, (_, key) => {
     const val = vars[key];
@@ -13744,8 +13936,8 @@ function useDialogueTree() {
   const [active, setActive] = useState30(false);
   const [currentId, setCurrentId] = useState30(null);
   const [variables, setVariables] = useState30({});
-  const scriptRef = useRef46(null);
-  const varsRef = useRef46({});
+  const scriptRef = useRef47(null);
+  const varsRef = useRef47({});
   function setCurrentNode(id) {
     if (!id || !scriptRef.current) {
       setActive(false);
@@ -13761,7 +13953,7 @@ function useDialogueTree() {
     node.onEnter?.(varsRef.current);
     setCurrentId(id);
   }
-  const start2 = useCallback32(
+  const start2 = useCallback33(
     (script, startId, initialVars) => {
       scriptRef.current = script;
       const newVars = { ...varsRef.current, ...initialVars };
@@ -13774,7 +13966,7 @@ function useDialogueTree() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const advance = useCallback32(
+  const advance = useCallback33(
     (choiceIndex) => {
       if (!scriptRef.current || !currentId) return;
       const node = scriptRef.current[currentId];
@@ -13813,7 +14005,7 @@ function useDialogueTree() {
     },
     [currentId]
   );
-  const jumpTo = useCallback32(
+  const jumpTo = useCallback33(
     (id) => {
       if (!scriptRef.current?.[id]) return;
       const current2 = scriptRef.current[currentId ?? ""];
@@ -13822,11 +14014,11 @@ function useDialogueTree() {
     },
     [currentId]
   );
-  const setVar = useCallback32((key, value) => {
+  const setVar = useCallback33((key, value) => {
     varsRef.current = { ...varsRef.current, [key]: value };
     setVariables({ ...varsRef.current });
   }, []);
-  const close = useCallback32(() => {
+  const close = useCallback33(() => {
     if (scriptRef.current && currentId) {
       scriptRef.current[currentId]?.onExit?.(varsRef.current);
     }
@@ -13852,7 +14044,7 @@ function useDialogueTree() {
 }
 
 // ../gameplay/src/hooks/useBehaviorTree.ts
-import { useRef as useRef47, useCallback as useCallback33 } from "react";
+import { useRef as useRef48, useCallback as useCallback34 } from "react";
 function btAction(fn) {
   return {
     tick(dt) {
@@ -14065,16 +14257,16 @@ function btFail(child) {
   };
 }
 function useBehaviorTree(rootFactory) {
-  const rootRef = useRef47(null);
+  const rootRef = useRef48(null);
   if (!rootRef.current) rootRef.current = rootFactory();
-  const statusRef = useRef47("failure");
-  const tick2 = useCallback33((dt) => {
+  const statusRef = useRef48("failure");
+  const tick2 = useCallback34((dt) => {
     if (!rootRef.current) return "failure";
     const s2 = rootRef.current.tick(dt);
     statusRef.current = s2;
     return s2;
   }, []);
-  const reset = useCallback33(() => {
+  const reset = useCallback34(() => {
     rootRef.current?.reset();
   }, []);
   return {
@@ -14195,17 +14387,17 @@ function DialogueBox({ dialogue, onAdvance, onClose, style = {} }) {
 }
 
 // ../gameplay/src/hooks/useCutscene.ts
-import { useState as useState31, useCallback as useCallback34, useRef as useRef48, useEffect as useEffect80, useContext as useContext77 } from "react";
+import { useState as useState31, useCallback as useCallback35, useRef as useRef49, useEffect as useEffect82, useContext as useContext77 } from "react";
 function useCutscene() {
   const engine = useContext77(EngineContext);
   const [playing, setPlaying] = useState31(false);
   const [stepIndex, setStepIndex] = useState31(0);
-  const stepsRef = useRef48([]);
-  const timerRef = useRef48(0);
-  const idxRef = useRef48(0);
-  const playingRef = useRef48(false);
-  const entityRef = useRef48(null);
-  const finish = useCallback34(() => {
+  const stepsRef = useRef49([]);
+  const timerRef = useRef49(0);
+  const idxRef = useRef49(0);
+  const playingRef = useRef49(false);
+  const entityRef = useRef49(null);
+  const finish = useCallback35(() => {
     playingRef.current = false;
     setPlaying(false);
     setStepIndex(0);
@@ -14215,14 +14407,14 @@ function useCutscene() {
       entityRef.current = null;
     }
   }, [engine.ecs]);
-  const fireStep = useCallback34((step) => {
+  const fireStep = useCallback35((step) => {
     if (step.type === "call") step.fn();
     if (step.type === "parallel")
       step.steps.forEach((s2) => {
         if (s2.type === "call") s2.fn();
       });
   }, []);
-  const play = useCallback34(
+  const play = useCallback35(
     (steps) => {
       stepsRef.current = steps;
       idxRef.current = 0;
@@ -14279,7 +14471,7 @@ function useCutscene() {
     },
     [engine.ecs, finish, fireStep]
   );
-  const skip = useCallback34(() => {
+  const skip = useCallback35(() => {
     for (let i = idxRef.current; i < stepsRef.current.length; i++) {
       const step = stepsRef.current[i];
       if (step.type === "call") step.fn();
@@ -14290,7 +14482,7 @@ function useCutscene() {
     }
     finish();
   }, [finish]);
-  useEffect80(() => {
+  useEffect82(() => {
     return () => {
       if (entityRef.current !== null && engine.ecs.hasEntity(entityRef.current)) {
         engine.ecs.destroyEntity(entityRef.current);
@@ -14301,7 +14493,7 @@ function useCutscene() {
 }
 
 // ../gameplay/src/hooks/useGameStore.ts
-import { useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback35 } from "react";
+import { useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback36 } from "react";
 function createStore(initialState) {
   let state = { ...initialState };
   const listeners = /* @__PURE__ */ new Set();
@@ -14327,7 +14519,7 @@ function useGameStore(key, initialState) {
   }
   const store = stores.get(key);
   const state = useSyncExternalStore2(store.subscribe, store.getState);
-  const setState = useCallback35(
+  const setState = useCallback36(
     (partial) => {
       store.setState(partial);
     },
@@ -14337,21 +14529,21 @@ function useGameStore(key, initialState) {
 }
 
 // ../gameplay/src/hooks/useTween.ts
-import { useRef as useRef49, useCallback as useCallback36, useEffect as useEffect81 } from "react";
+import { useRef as useRef50, useCallback as useCallback37, useEffect as useEffect83 } from "react";
 function useTween(opts) {
-  const rafRef = useRef49(null);
-  const startTimeRef = useRef49(0);
-  const runningRef = useRef49(false);
-  const optsRef = useRef49(opts);
+  const rafRef = useRef50(null);
+  const startTimeRef = useRef50(0);
+  const runningRef = useRef50(false);
+  const optsRef = useRef50(opts);
   optsRef.current = opts;
-  const stop = useCallback36(() => {
+  const stop = useCallback37(() => {
     if (rafRef.current !== null) {
       cancelAnimationFrame(rafRef.current);
       rafRef.current = null;
     }
     runningRef.current = false;
   }, []);
-  const start2 = useCallback36(() => {
+  const start2 = useCallback37(() => {
     stop();
     runningRef.current = true;
     startTimeRef.current = performance.now();
@@ -14373,12 +14565,12 @@ function useTween(opts) {
     };
     rafRef.current = requestAnimationFrame(tick2);
   }, [stop]);
-  useEffect81(() => {
+  useEffect83(() => {
     if (opts.autoStart) {
       start2();
     }
   }, []);
-  useEffect81(() => {
+  useEffect83(() => {
     return () => {
       if (rafRef.current !== null) {
         cancelAnimationFrame(rafRef.current);
@@ -14397,15 +14589,15 @@ function useTween(opts) {
 }
 
 // ../gameplay/src/hooks/useObjectPool.ts
-import { useRef as useRef50, useMemo as useMemo17, useEffect as useEffect82 } from "react";
+import { useRef as useRef51, useMemo as useMemo18, useEffect as useEffect84 } from "react";
 function useObjectPool(factory, reset, initialSize) {
-  const poolRef = useRef50([]);
-  const activeRef = useRef50(0);
-  const factoryRef = useRef50(factory);
+  const poolRef = useRef51([]);
+  const activeRef = useRef51(0);
+  const factoryRef = useRef51(factory);
   factoryRef.current = factory;
-  const resetRef = useRef50(reset);
+  const resetRef = useRef51(reset);
   resetRef.current = reset;
-  useEffect82(() => {
+  useEffect84(() => {
     if (initialSize != null && initialSize > 0) {
       const pool = poolRef.current;
       for (let i = 0; i < initialSize; i++) {
@@ -14413,7 +14605,7 @@ function useObjectPool(factory, reset, initialSize) {
       }
     }
   }, []);
-  return useMemo17(
+  return useMemo18(
     () => ({
       acquire() {
         activeRef.current++;
@@ -14444,11 +14636,11 @@ function useObjectPool(factory, reset, initialSize) {
 }
 
 // ../gameplay/src/hooks/useForces.ts
-import { useContext as useContext78, useMemo as useMemo18 } from "react";
+import { useContext as useContext78, useMemo as useMemo19 } from "react";
 function useForces() {
   const engine = useContext78(EngineContext);
   const entityId = useContext78(EntityContext);
-  return useMemo18(() => {
+  return useMemo19(() => {
     const getRb = () => engine.ecs.getComponent(entityId, "RigidBody");
     const getTransform = () => engine.ecs.getComponent(entityId, "Transform");
     const getCenter = () => {
@@ -14516,11 +14708,11 @@ function useForces() {
 }
 
 // ../gameplay/src/hooks/useCharacterController.ts
-import { useContext as useContext79, useMemo as useMemo19 } from "react";
+import { useContext as useContext79, useMemo as useMemo20 } from "react";
 function useCharacterController(config = {}) {
   const engine = useContext79(EngineContext);
   const entityId = useContext79(EntityContext);
-  return useMemo19(() => {
+  return useMemo20(() => {
     const controller = new CharacterController(config);
     return {
       move(dx, dy) {
@@ -14541,7 +14733,7 @@ function createAtlas(names, _columns) {
 }
 
 // src/components/HUD.tsx
-import { createContext as createContext3, useContext as useContext80, useMemo as useMemo20 } from "react";
+import { createContext as createContext3, useContext as useContext80, useMemo as useMemo21 } from "react";
 import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var HUDContextRef = createContext3(null);
 function HUD({
@@ -14554,7 +14746,7 @@ function HUD({
   className,
   children
 }) {
-  const ctx = useMemo20(() => ({ padding, safeArea }), [padding, safeArea]);
+  const ctx = useMemo21(() => ({ padding, safeArea }), [padding, safeArea]);
   const rootStyle = {
     position: "absolute",
     inset: 0,
@@ -14727,7 +14919,7 @@ function definePrefab(name, defaults, render) {
 }
 
 // src/hooks/useNetworkSync.ts
-import { useEffect as useEffect84, useRef as useRef52 } from "react";
+import { useEffect as useEffect86, useRef as useRef53 } from "react";
 
 // ../../packages/net/src/transport.ts
 function isBinaryTransport(t) {
@@ -15072,7 +15264,7 @@ function syncEntity(config) {
 }
 
 // ../../packages/net/src/useNetworkInput.ts
-import { useState as useState32, useEffect as useEffect83, useRef as useRef51 } from "react";
+import { useState as useState32, useEffect as useEffect85, useRef as useRef52 } from "react";
 var INPUT_MSG_TYPE = "input:state";
 function useNetworkInput(config) {
   const { room, keys, input, tickRate = 20 } = config;
@@ -15081,8 +15273,8 @@ function useNetworkInput(config) {
     () => Object.fromEntries(keys.map((k) => [k, false]))
   );
   const [remoteInputs] = useState32(() => /* @__PURE__ */ new Map());
-  const localInputRef = useRef51(localInput);
-  useEffect83(() => {
+  const localInputRef = useRef52(localInput);
+  useEffect85(() => {
     let cleanupDom = null;
     if (!input) {
       let handleKeyDown2 = function(e) {
@@ -15296,9 +15488,9 @@ function lerpState(a, b, t) {
 
 // src/hooks/useNetworkSync.ts
 function useNetworkSync(entityId, components, room, world, owner, opts = {}) {
-  const optsRef = useRef52(opts);
+  const optsRef = useRef53(opts);
   optsRef.current = opts;
-  useEffect84(() => {
+  useEffect86(() => {
     const sync = syncEntity({
       entityId,
       components,
@@ -15313,18 +15505,18 @@ function useNetworkSync(entityId, components, room, world, owner, opts = {}) {
 }
 
 // src/hooks/useRemotePlayer.ts
-import { useEffect as useEffect85, useRef as useRef53, useState as useState33 } from "react";
+import { useEffect as useEffect87, useRef as useRef54, useState as useState33 } from "react";
 var PEER_JOIN_MSG = "peer:join";
 var PEER_LEAVE_MSG = "peer:leave";
 function useRemotePlayer(config) {
   const { room, world, createEntity, destroyEntity } = config;
   const [players, setPlayers] = useState33(() => /* @__PURE__ */ new Map());
-  const playersRef = useRef53(players);
-  const createRef = useRef53(createEntity);
+  const playersRef = useRef54(players);
+  const createRef = useRef54(createEntity);
   createRef.current = createEntity;
-  const destroyRef = useRef53(destroyEntity);
+  const destroyRef = useRef54(destroyEntity);
   destroyRef.current = destroyEntity;
-  useEffect85(() => {
+  useEffect87(() => {
     function spawnPeer(peerId) {
       if (playersRef.current.has(peerId)) return;
       const entityId = createRef.current(peerId);
@@ -15820,7 +16012,7 @@ function EntityInspector({ entity, components, width = 260, style }) {
 }
 
 // ../editor/src/hooks/useEditorState.ts
-import { useState as useState34, useCallback as useCallback37, useContext as useContext81, useEffect as useEffect86, useRef as useRef54 } from "react";
+import { useState as useState34, useCallback as useCallback38, useContext as useContext81, useEffect as useEffect88, useRef as useRef55 } from "react";
 function buildEntityInfo(engine) {
   const nameMap = /* @__PURE__ */ new Map();
   engine.entityIds.forEach((eid, name) => nameMap.set(eid, name));
@@ -15838,18 +16030,18 @@ function useEditorState(refreshHz = 4) {
   const engine = useContext81(EngineContext);
   const [entities, setEntities] = useState34([]);
   const [selectedId, setSelectedId] = useState34(null);
-  const intervalRef = useRef54(null);
-  const refresh = useCallback37(() => {
+  const intervalRef = useRef55(null);
+  const refresh = useCallback38(() => {
     setEntities(buildEntityInfo(engine));
   }, [engine]);
-  useEffect86(() => {
+  useEffect88(() => {
     refresh();
     intervalRef.current = setInterval(refresh, 1e3 / refreshHz);
     return () => {
       if (intervalRef.current !== null) clearInterval(intervalRef.current);
     };
   }, [refresh, refreshHz]);
-  const select = useCallback37((id) => {
+  const select = useCallback38((id) => {
     setSelectedId(id);
   }, []);
   const selectedComponents = selectedId !== null ? engine.ecs.getEntityComponents(selectedId) : [];
@@ -16164,6 +16356,7 @@ export {
   useDraggable,
   useDropThrough,
   useDroppable,
+  useDynamicCanvas,
   useEditorState,
   useEntity,
   useEvent,
@@ -16183,6 +16376,7 @@ export {
   useHitstop,
   useHoverable,
   useIDBSave,
+  useIdleFrameSkip,
   useInput,
   useInputBuffer,
   useInputContext,