cubeforge 0.7.0 → 0.8.2

package/dist/index.js

@@ -83,6 +83,20 @@ function applyDeltaSnapshot(baseline, delta) {
   }
   return { nextId: delta.nextId, rngState: delta.rngState, entities };
 }
+function _componentsChanged(a, b) {
+  if (a.length !== b.length) return true;
+  for (let i = 0; i < a.length; i++) {
+    const ca = a[i];
+    const cb = b[i];
+    if (ca["type"] !== cb["type"]) return true;
+    const keysA = Object.keys(ca);
+    if (keysA.length !== Object.keys(cb).length) return true;
+    for (const k of keysA) {
+      if (ca[k] !== cb[k]) return true;
+    }
+  }
+  return false;
+}
 var ECSWorld = class {
   nextId = 0;
   // Secondary index: O(1) single-entity component lookup
@@ -201,6 +215,23 @@ var ECSWorld = class {
   hasComponent(id, type) {
     return this.componentIndex.get(id)?.has(type) ?? false;
   }
+  /**
+   * Returns live references to all components on an entity.
+   * Useful for editor / inspector tooling. Returns an empty array if the
+   * entity does not exist.
+   *
+   * **Do not mutate structural fields** (e.g. `type`) — doing so will
+   * desync the archetype index. Mutating value fields (x, y, color …) is safe.
+   */
+  getEntityComponents(id) {
+    const map = this.componentIndex.get(id);
+    if (!map) return [];
+    return [...map.values()];
+  }
+  /** Returns all live entity IDs currently in the world. */
+  getAllEntityIds() {
+    return [...this.componentIndex.keys()];
+  }
   // Flush pending dirty flags into the query cache immediately.
   // Called inline at the top of query() so any mid-frame mutation
   // (destroyEntity, addComponent, removeComponent) is reflected before
@@ -437,7 +468,7 @@ var ECSWorld = class {
     const removed = [];
     for (const entity of current.entities) {
       const base = baseMap.get(entity.id);
-      if (!base || JSON.stringify(entity.components) !== JSON.stringify(base.components)) {
+      if (!base || _componentsChanged(entity.components, base.components)) {
         changed.push(entity);
       }
     }
@@ -2932,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}` : "";
@@ -3128,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)
@@ -3179,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);
@@ -3501,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;
@@ -3721,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();
@@ -3866,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;
@@ -4337,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);
@@ -7206,6 +7385,7 @@ function Sprite({
   height,
   color = "#ffffff",
   src,
+  dynamicSrc,
   offsetX = 0,
   offsetY = 0,
   zIndex = 0,
@@ -7257,6 +7437,7 @@ function Sprite({
       height,
       color,
       src,
+      dynamicSrc,
       offsetX,
       offsetY,
       zIndex,
@@ -7338,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;
@@ -7357,6 +7539,7 @@ function Sprite({
     comp.starInnerRadius = starInnerRadius;
   }, [
     color,
+    dynamicSrc,
     visible,
     flipX,
     flipY,
@@ -8597,7 +8780,6 @@ function Checkpoint({
 // src/components/Tilemap.tsx
 import { useEffect as useEffect30, useState as useState6, useContext as useContext20 } from "react";
 import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
-var animatedTiles = /* @__PURE__ */ new Map();
 function getProperty(props, name) {
   return props?.find((p) => p.name === name)?.value;
 }
@@ -8629,6 +8811,7 @@ function Tilemap({
   useEffect30(() => {
     if (!engine) return;
     const createdEntities = [];
+    const animatedTiles = /* @__PURE__ */ new Map();
     async function load() {
       let mapData;
       try {
@@ -8764,6 +8947,7 @@ function Tilemap({
               if (frame) {
                 sprite.frame = { sx: frame.sx, sy: frame.sy, sw: frame.sw, sh: frame.sh };
                 engine.assets.loadImage(frame.imageSrc).then((img) => {
+                  if (!engine.ecs.hasEntity(eid)) return;
                   const s2 = engine.ecs.getComponent(eid, "Sprite");
                   if (s2) s2.image = img;
                 }).catch(() => {
@@ -8779,6 +8963,7 @@ function Tilemap({
                 animatedTiles.set(eid, state);
                 const firstFrameRegion = getFrameForLocalId(resolved.tileset, frames[0]);
                 engine.assets.loadImage(firstFrameRegion.imageSrc).then((img) => {
+                  if (!engine.ecs.hasEntity(eid)) return;
                   const s2 = engine.ecs.getComponent(eid, "Sprite");
                   if (s2) {
                     s2.image = img;
@@ -10256,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,
@@ -10304,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;
@@ -10470,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,
@@ -10490,7 +10715,7 @@ function useTimer(duration, onComplete, opts) {
       opts?.autoStart ?? false
     );
   }
-  useEffect61(() => {
+  useEffect63(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -10502,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 {
@@ -10531,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,
@@ -10604,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);
     },
@@ -10648,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({
@@ -10657,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;
@@ -10690,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()) {
@@ -10706,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;
@@ -10722,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]));
     },
@@ -10829,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);
     },
@@ -10842,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) {
@@ -10873,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);
@@ -10886,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) {
@@ -10898,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 {
@@ -10914,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(() => {
@@ -10939,7 +11164,7 @@ function useHMR(hmrKey) {
       acceptRef.current(prev);
     }
   }, [key]);
-  return useMemo12(
+  return useMemo13(
     () => ({
       onDispose(handler) {
         disposeRef.current = handler;
@@ -10958,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;
@@ -10975,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) {
@@ -10995,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;
@@ -11010,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;
@@ -11040,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) => {
@@ -11057,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) => {
@@ -11079,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;
@@ -11090,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];
@@ -11100,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]
   );
@@ -11115,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() {
@@ -11141,7 +11366,7 @@ function register(cb) {
   };
 }
 function useOverlayTick(callback, deps = []) {
-  useEffect68(() => {
+  useEffect70(() => {
     return register(callback);
   }, deps);
 }
@@ -11157,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;
@@ -11193,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;
@@ -11417,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;
@@ -11425,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;
@@ -11433,7 +11658,7 @@ function useSnap(options) {
     },
     [gridX, gridY]
   );
-  const snap = useCallback15(
+  const snap = useCallback16(
     (x, y) => {
       let outX = x;
       let outY = y;
@@ -11508,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,
@@ -11532,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;
@@ -11560,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;
@@ -11691,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,
@@ -11707,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;
@@ -11796,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,
@@ -11812,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;
@@ -11873,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") {
@@ -11893,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;
@@ -11916,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;
@@ -11930,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++) {
@@ -11941,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++) {
@@ -11954,7 +12179,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, height]
   );
-  const count = useCallback16(
+  const count = useCallback17(
     (pred) => {
       const data = dataRef.current;
       let n = 0;
@@ -11967,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 = [];
@@ -11995,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") {
@@ -12012,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++) {
@@ -12022,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++) {
@@ -12037,7 +12262,7 @@ function useGrid({ width, height, fill }) {
     [width, height, markChanged]
   );
   void version;
-  return useMemo14(
+  return useMemo15(
     () => ({
       width,
       height,
@@ -12058,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,
@@ -12071,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;
@@ -12083,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 });
@@ -12102,7 +12327,7 @@ function useTurnSystem({
     },
     [players, activeIndex, turn, onTurnStart, onTurnEnd, engine]
   );
-  const scheduleChange = useCallback17(
+  const scheduleChange = useCallback18(
     (nextIndex) => {
       clearPending();
       if (aiDelay <= 0) {
@@ -12134,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") {
@@ -12149,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,
@@ -12177,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;
@@ -12260,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;
@@ -12285,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;
@@ -12397,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 = () => {
@@ -12501,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();
@@ -12518,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 = {
@@ -12540,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;
@@ -12673,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",
@@ -12683,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);
@@ -12827,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];
@@ -12852,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),
     []
   );
@@ -12915,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]);
@@ -12927,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?.();
@@ -12945,7 +13170,7 @@ function useGameStateMachine(states, initial) {
     setState(to);
     statesRef.current[to]?.onEnter?.();
   }, []);
-  useEffect76(() => {
+  useEffect78(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -12961,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);
@@ -12994,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 {
@@ -13039,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 };
@@ -13079,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) {
@@ -13089,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;
@@ -13100,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);
@@ -13142,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];
@@ -13166,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,
@@ -13230,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;
@@ -13257,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];
@@ -13265,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] };
@@ -13278,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,
@@ -13299,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 };
@@ -13325,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;
@@ -13345,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 {
@@ -13364,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() {
@@ -13382,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 };
@@ -13400,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");
@@ -13426,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");
@@ -13435,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");
@@ -13448,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`;
@@ -13502,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,
@@ -13517,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;
@@ -13533,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));
@@ -13545,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;
@@ -13558,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;
@@ -13568,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;
     },
@@ -13593,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;
@@ -13602,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");
@@ -13642,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];
@@ -13683,7 +13908,7 @@ function useDialogue() {
     },
     [currentId]
   );
-  const close = useCallback31(() => {
+  const close = useCallback32(() => {
     setActive(false);
     setCurrentId(null);
     scriptRef.current = null;
@@ -13693,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];
@@ -13711,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);
@@ -13728,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 };
@@ -13741,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];
@@ -13780,7 +14005,7 @@ function useDialogueTree() {
     },
     [currentId]
   );
-  const jumpTo = useCallback32(
+  const jumpTo = useCallback33(
     (id) => {
       if (!scriptRef.current?.[id]) return;
       const current2 = scriptRef.current[currentId ?? ""];
@@ -13789,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);
     }
@@ -13819,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) {
@@ -14032,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 {
@@ -14162,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);
@@ -14182,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;
@@ -14246,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();
@@ -14257,7 +14482,7 @@ function useCutscene() {
     }
     finish();
   }, [finish]);
-  useEffect80(() => {
+  useEffect82(() => {
     return () => {
       if (entityRef.current !== null && engine.ecs.hasEntity(entityRef.current)) {
         engine.ecs.destroyEntity(entityRef.current);
@@ -14268,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();
@@ -14294,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);
     },
@@ -14304,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();
@@ -14340,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);
@@ -14364,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++) {
@@ -14380,7 +14605,7 @@ function useObjectPool(factory, reset, initialSize) {
       }
     }
   }, []);
-  return useMemo17(
+  return useMemo18(
     () => ({
       acquire() {
         activeRef.current++;
@@ -14411,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 = () => {
@@ -14483,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) {
@@ -14508,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({
@@ -14521,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,
@@ -14610,7 +14835,7 @@ function HUDBar({
     display: "flex",
     flexDirection: rtl ? "row-reverse" : "row"
   };
-  const labelStyle = {
+  const labelStyle2 = {
     fontFamily: "system-ui, sans-serif",
     fontSize: 11,
     letterSpacing: 0.5,
@@ -14622,7 +14847,7 @@ function HUDBar({
     marginBottom: 4
   };
   return /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", ...style }, "aria-label": label, children: [
-    (label || showValue) && /* @__PURE__ */ jsxs11("div", { style: labelStyle, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs11("div", { style: labelStyle2, children: [
       label && /* @__PURE__ */ jsx22("span", { children: label }),
       showValue && /* @__PURE__ */ jsxs11("span", { style: { fontVariantNumeric: "tabular-nums" }, children: [
         Math.round(value),
@@ -14694,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) {
@@ -15039,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;
@@ -15048,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) {
@@ -15263,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,
@@ -15280,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);
@@ -15330,12 +15555,558 @@ function useRemotePlayer(config) {
   }, [room, world]);
   return { players };
 }
+
+// ../editor/src/components/SceneHierarchy.tsx
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+var panelStyle = {
+  background: "#0d1520",
+  borderRight: "1px solid #1a2a3a",
+  color: "#c0d0e0",
+  fontFamily: "system-ui, sans-serif",
+  fontSize: 12,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  userSelect: "none"
+};
+var headerStyle = {
+  padding: "6px 10px",
+  fontSize: 10,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: 1,
+  color: "#4fc3f7",
+  borderBottom: "1px solid #1a2a3a",
+  flexShrink: 0
+};
+var listStyle = {
+  flex: 1,
+  overflowY: "auto",
+  padding: "4px 0"
+};
+function entityRowStyle(selected) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "3px 10px",
+    cursor: "pointer",
+    background: selected ? "#1a3050" : "transparent",
+    borderLeft: selected ? "2px solid #4fc3f7" : "2px solid transparent",
+    color: selected ? "#e0f0ff" : "#a0b4c8",
+    transition: "background 80ms"
+  };
+}
+var componentBadgeStyle = {
+  fontSize: 9,
+  background: "#1a2a3a",
+  color: "#607080",
+  borderRadius: 3,
+  padding: "1px 4px",
+  maxWidth: 60,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function SceneHierarchy({ entities, selectedId, onSelect, width = 220, style }) {
+  return /* @__PURE__ */ jsxs12("div", { style: { ...panelStyle, width, ...style }, children: [
+    /* @__PURE__ */ jsx23("div", { style: headerStyle, children: "Scene Hierarchy" }),
+    /* @__PURE__ */ jsxs12("div", { style: { padding: "4px 10px", borderBottom: "1px solid #1a2a3a", color: "#4a5a6a", fontSize: 10 }, children: [
+      entities.length,
+      " ",
+      entities.length === 1 ? "entity" : "entities"
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { style: listStyle, children: [
+      entities.map((e) => /* @__PURE__ */ jsx23(
+        "div",
+        {
+          style: entityRowStyle(e.id === selectedId),
+          onClick: () => onSelect(e.id === selectedId ? null : e.id),
+          children: /* @__PURE__ */ jsxs12("div", { style: { flex: 1, overflow: "hidden" }, children: [
+            /* @__PURE__ */ jsx23("div", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: e.name }),
+            /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: 3, marginTop: 2, flexWrap: "wrap" }, children: [
+              e.componentTypes.slice(0, 3).map((t) => /* @__PURE__ */ jsx23("span", { style: componentBadgeStyle, children: t }, t)),
+              e.componentTypes.length > 3 && /* @__PURE__ */ jsxs12("span", { style: componentBadgeStyle, children: [
+                "+",
+                e.componentTypes.length - 3
+              ] })
+            ] })
+          ] })
+        },
+        e.id
+      )),
+      entities.length === 0 && /* @__PURE__ */ jsx23("div", { style: { padding: "10px", color: "#3a5060", fontSize: 11, textAlign: "center" }, children: "No entities" })
+    ] })
+  ] });
+}
+
+// ../editor/src/components/PropertyField.tsx
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+var fieldRow = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  marginBottom: 4,
+  minHeight: 24
+};
+var labelStyle = {
+  flex: "0 0 90px",
+  fontSize: 11,
+  color: "#8899aa",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  fontFamily: "system-ui, sans-serif",
+  textTransform: "uppercase",
+  letterSpacing: 0.5
+};
+var inputBase = {
+  flex: 1,
+  background: "#1a2030",
+  border: "1px solid #2a3a50",
+  borderRadius: 3,
+  color: "#d0e0f0",
+  padding: "2px 6px",
+  fontSize: 11,
+  fontFamily: "monospace",
+  outline: "none",
+  minWidth: 0
+};
+function NumberField({ label, value, onChange, step = 1 }) {
+  return /* @__PURE__ */ jsxs13("div", { style: fieldRow, children: [
+    /* @__PURE__ */ jsx24("span", { style: labelStyle, title: label, children: label }),
+    /* @__PURE__ */ jsx24(
+      "input",
+      {
+        type: "number",
+        style: inputBase,
+        value: isNaN(value) ? "" : value,
+        step,
+        onChange: (e) => {
+          const v = parseFloat(e.target.value);
+          if (!isNaN(v)) onChange(v);
+        }
+      }
+    )
+  ] });
+}
+function TextField({ label, value, onChange }) {
+  return /* @__PURE__ */ jsxs13("div", { style: fieldRow, children: [
+    /* @__PURE__ */ jsx24("span", { style: labelStyle, title: label, children: label }),
+    /* @__PURE__ */ jsx24("input", { type: "text", style: inputBase, value, onChange: (e) => onChange(e.target.value) })
+  ] });
+}
+function BoolField({ label, value, onChange }) {
+  return /* @__PURE__ */ jsxs13("div", { style: fieldRow, children: [
+    /* @__PURE__ */ jsx24("span", { style: labelStyle, title: label, children: label }),
+    /* @__PURE__ */ jsx24(
+      "input",
+      {
+        type: "checkbox",
+        checked: value,
+        style: { accentColor: "#4fc3f7", cursor: "pointer" },
+        onChange: (e) => onChange(e.target.checked)
+      }
+    )
+  ] });
+}
+function ColorField({ label, value, onChange }) {
+  return /* @__PURE__ */ jsxs13("div", { style: fieldRow, children: [
+    /* @__PURE__ */ jsx24("span", { style: labelStyle, title: label, children: label }),
+    /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 4, flex: 1 }, children: [
+      /* @__PURE__ */ jsx24(
+        "input",
+        {
+          type: "color",
+          value: value.startsWith("#") ? value.slice(0, 7) : "#ffffff",
+          style: { width: 28, height: 22, padding: 1, border: "1px solid #2a3a50", borderRadius: 3, cursor: "pointer" },
+          onChange: (e) => onChange(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx24("input", { type: "text", style: { ...inputBase, flex: 1 }, value, onChange: (e) => onChange(e.target.value) })
+    ] })
+  ] });
+}
+function Vec2Field({ label, x, y, onChangeX, onChangeY, step = 1 }) {
+  return /* @__PURE__ */ jsxs13("div", { style: fieldRow, children: [
+    /* @__PURE__ */ jsx24("span", { style: labelStyle, title: label, children: label }),
+    /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 4, flex: 1 }, children: [
+      /* @__PURE__ */ jsx24(
+        "input",
+        {
+          type: "number",
+          style: { ...inputBase, flex: 1 },
+          value: isNaN(x) ? "" : x,
+          step,
+          onChange: (e) => {
+            const v = parseFloat(e.target.value);
+            if (!isNaN(v)) onChangeX(v);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx24(
+        "input",
+        {
+          type: "number",
+          style: { ...inputBase, flex: 1 },
+          value: isNaN(y) ? "" : y,
+          step,
+          onChange: (e) => {
+            const v = parseFloat(e.target.value);
+            if (!isNaN(v)) onChangeY(v);
+          }
+        }
+      )
+    ] })
+  ] });
+}
+
+// ../editor/src/components/EntityInspector.tsx
+import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var panelStyle2 = {
+  background: "#0d1520",
+  borderLeft: "1px solid #1a2a3a",
+  color: "#c0d0e0",
+  fontFamily: "system-ui, sans-serif",
+  fontSize: 12,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  userSelect: "none"
+};
+var headerStyle2 = {
+  padding: "6px 10px",
+  fontSize: 10,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: 1,
+  color: "#4fc3f7",
+  borderBottom: "1px solid #1a2a3a",
+  flexShrink: 0
+};
+var scrollStyle = {
+  flex: 1,
+  overflowY: "auto",
+  padding: "6px 0"
+};
+var componentSectionStyle = {
+  marginBottom: 2,
+  borderBottom: "1px solid #131d2a"
+};
+var componentHeaderStyle = {
+  display: "flex",
+  alignItems: "center",
+  padding: "4px 10px",
+  fontSize: 10,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: 0.8,
+  color: "#80a8c0",
+  cursor: "default",
+  background: "#0f1a28"
+};
+var fieldsStyle = {
+  padding: "4px 10px 6px"
+};
+function isColorKey(key) {
+  const lower = key.toLowerCase();
+  return lower === "color" || lower === "background" || lower === "fill" || lower === "stroke" || lower.includes("color");
+}
+function ComponentSection({ comp }) {
+  const compRecord = comp;
+  const entries = Object.entries(comp).filter(([k]) => k !== "type");
+  const rendered = /* @__PURE__ */ new Set();
+  return /* @__PURE__ */ jsxs14("div", { style: componentSectionStyle, children: [
+    /* @__PURE__ */ jsx25("div", { style: componentHeaderStyle, children: comp.type }),
+    /* @__PURE__ */ jsxs14("div", { style: fieldsStyle, children: [
+      entries.map(([key, val]) => {
+        if (rendered.has(key)) return null;
+        if (key === "x" && typeof val === "number" && typeof compRecord["y"] === "number") {
+          rendered.add("x");
+          rendered.add("y");
+          return /* @__PURE__ */ jsx25(
+            Vec2Field,
+            {
+              label: "pos",
+              x: val,
+              y: compRecord["y"],
+              step: 0.5,
+              onChangeX: (v) => {
+                compRecord["x"] = v;
+              },
+              onChangeY: (v) => {
+                compRecord["y"] = v;
+              }
+            },
+            "xy"
+          );
+        }
+        if (key === "followOffsetX" && typeof val === "number") {
+          const oy = compRecord["followOffsetY"];
+          if (typeof oy === "number") {
+            rendered.add("followOffsetX");
+            rendered.add("followOffsetY");
+            return /* @__PURE__ */ jsx25(
+              Vec2Field,
+              {
+                label: "offset",
+                x: val,
+                y: oy,
+                step: 1,
+                onChangeX: (v) => {
+                  compRecord["followOffsetX"] = v;
+                },
+                onChangeY: (v) => {
+                  compRecord["followOffsetY"] = v;
+                }
+              },
+              "followOffset"
+            );
+          }
+        }
+        if (typeof val === "number") {
+          rendered.add(key);
+          return /* @__PURE__ */ jsx25(
+            NumberField,
+            {
+              label: key,
+              value: val,
+              step: Math.abs(val) < 2 ? 0.01 : 1,
+              onChange: (v) => {
+                compRecord[key] = v;
+              }
+            },
+            key
+          );
+        }
+        if (typeof val === "string" && isColorKey(key)) {
+          rendered.add(key);
+          return /* @__PURE__ */ jsx25(
+            ColorField,
+            {
+              label: key,
+              value: val,
+              onChange: (v) => {
+                compRecord[key] = v;
+              }
+            },
+            key
+          );
+        }
+        if (typeof val === "string") {
+          rendered.add(key);
+          return /* @__PURE__ */ jsx25(
+            TextField,
+            {
+              label: key,
+              value: val,
+              onChange: (v) => {
+                compRecord[key] = v;
+              }
+            },
+            key
+          );
+        }
+        if (typeof val === "boolean") {
+          rendered.add(key);
+          return /* @__PURE__ */ jsx25(
+            BoolField,
+            {
+              label: key,
+              value: val,
+              onChange: (v) => {
+                compRecord[key] = v;
+              }
+            },
+            key
+          );
+        }
+        if (val !== null && val !== void 0 && typeof val !== "function") {
+          rendered.add(key);
+          const preview = typeof val === "object" ? JSON.stringify(val).slice(0, 60) : String(val);
+          return /* @__PURE__ */ jsxs14(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: 6,
+                marginBottom: 4,
+                fontSize: 11,
+                alignItems: "flex-start"
+              },
+              children: [
+                /* @__PURE__ */ jsx25(
+                  "span",
+                  {
+                    style: {
+                      flex: "0 0 90px",
+                      color: "#6a7a8a",
+                      textTransform: "uppercase",
+                      fontSize: 10,
+                      letterSpacing: 0.5,
+                      paddingTop: 2
+                    },
+                    children: key
+                  }
+                ),
+                /* @__PURE__ */ jsx25(
+                  "span",
+                  {
+                    style: { flex: 1, color: "#506070", fontFamily: "monospace", wordBreak: "break-all", fontSize: 10 },
+                    children: preview
+                  }
+                )
+              ]
+            },
+            key
+          );
+        }
+        return null;
+      }),
+      entries.length === 0 && /* @__PURE__ */ jsx25("div", { style: { color: "#3a5060", fontSize: 10 }, children: "No fields" })
+    ] })
+  ] });
+}
+function EntityInspector({ entity, components, width = 260, style }) {
+  return /* @__PURE__ */ jsxs14("div", { style: { ...panelStyle2, width, ...style }, children: [
+    /* @__PURE__ */ jsx25("div", { style: headerStyle2, children: "Inspector" }),
+    entity ? /* @__PURE__ */ jsxs14(Fragment10, { children: [
+      /* @__PURE__ */ jsxs14(
+        "div",
+        {
+          style: {
+            padding: "6px 10px",
+            borderBottom: "1px solid #1a2a3a",
+            color: "#d0e0f0",
+            fontSize: 12,
+            fontWeight: 600
+          },
+          children: [
+            entity.name,
+            /* @__PURE__ */ jsxs14("span", { style: { color: "#4a6070", fontSize: 10, marginLeft: 6 }, children: [
+              "#",
+              entity.id
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs14("div", { style: scrollStyle, children: [
+        components.map((comp) => /* @__PURE__ */ jsx25(ComponentSection, { comp }, comp.type)),
+        components.length === 0 && /* @__PURE__ */ jsx25("div", { style: { padding: "10px", color: "#3a5060", fontSize: 11, textAlign: "center" }, children: "No components" })
+      ] })
+    ] }) : /* @__PURE__ */ jsx25(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#2a4050",
+          fontSize: 11
+        },
+        children: "Select an entity"
+      }
+    )
+  ] });
+}
+
+// ../editor/src/hooks/useEditorState.ts
+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));
+  const ids = engine.ecs.getAllEntityIds();
+  return ids.map((id) => {
+    const comps = engine.ecs.getEntityComponents(id);
+    return {
+      id,
+      name: nameMap.get(id) ?? `Entity #${id}`,
+      componentTypes: comps.map((c) => c.type)
+    };
+  });
+}
+function useEditorState(refreshHz = 4) {
+  const engine = useContext81(EngineContext);
+  const [entities, setEntities] = useState34([]);
+  const [selectedId, setSelectedId] = useState34(null);
+  const intervalRef = useRef55(null);
+  const refresh = useCallback38(() => {
+    setEntities(buildEntityInfo(engine));
+  }, [engine]);
+  useEffect88(() => {
+    refresh();
+    intervalRef.current = setInterval(refresh, 1e3 / refreshHz);
+    return () => {
+      if (intervalRef.current !== null) clearInterval(intervalRef.current);
+    };
+  }, [refresh, refreshHz]);
+  const select = useCallback38((id) => {
+    setSelectedId(id);
+  }, []);
+  const selectedComponents = selectedId !== null ? engine.ecs.getEntityComponents(selectedId) : [];
+  return { entities, selectedId, selectedComponents, select, refresh };
+}
+
+// ../editor/src/components/EditorShell.tsx
+import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+function EditorShell({
+  children,
+  active = true,
+  hierarchyWidth = 220,
+  inspectorWidth = 260,
+  style
+}) {
+  const state = useEditorState();
+  const selectedEntity = state.entities.find((e) => e.id === state.selectedId) ?? null;
+  if (!active) {
+    return /* @__PURE__ */ jsx26(Fragment11, { children });
+  }
+  const shellStyle = {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    flexDirection: "row",
+    pointerEvents: "none",
+    zIndex: 200,
+    ...style
+  };
+  const sideStyle = {
+    pointerEvents: "auto",
+    flexShrink: 0,
+    height: "100%",
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ jsxs15("div", { style: shellStyle, children: [
+    /* @__PURE__ */ jsx26("div", { style: sideStyle, children: /* @__PURE__ */ jsx26(
+      SceneHierarchy,
+      {
+        entities: state.entities,
+        selectedId: state.selectedId,
+        onSelect: state.select,
+        width: hierarchyWidth,
+        style: { height: "100%" }
+      }
+    ) }),
+    /* @__PURE__ */ jsx26("div", { style: { flex: 1, pointerEvents: "none" }, children }),
+    /* @__PURE__ */ jsx26("div", { style: sideStyle, children: /* @__PURE__ */ jsx26(
+      EntityInspector,
+      {
+        entity: selectedEntity,
+        components: state.selectedComponents,
+        width: inspectorWidth,
+        style: { height: "100%" }
+      }
+    ) })
+  ] });
+}
 export {
   A11yNode,
   AnimatedSprite,
   Animation,
   Animator,
   AssetLoader,
+  BoolField,
   BoxCollider,
   COLLISION_DYNAMIC_DYNAMIC,
   COLLISION_DYNAMIC_KINEMATIC,
@@ -15351,6 +16122,7 @@ export {
   CircleCollider,
   ClientPrediction,
   CollisionPipeline,
+  ColorField,
   ComboDetector,
   CompoundCollider,
   ConvexCollider,
@@ -15359,7 +16131,9 @@ export {
   DialogueBox,
   Ease,
   EditableText,
+  EditorShell,
   Entity,
+  EntityInspector,
   FocusRing,
   Game,
   Gradient,
@@ -15377,6 +16151,7 @@ export {
   Mask,
   MovingPlatform,
   NineSlice,
+  NumberField,
   PARTICLE_PRESETS,
   ParallaxLayer,
   ParticleEmitter,
@@ -15384,6 +16159,7 @@ export {
   RenderSystem,
   RigidBody,
   Room,
+  SceneHierarchy,
   SceneTransitionOverlay,
   ScreenFlash,
   Script,
@@ -15394,6 +16170,7 @@ export {
   SquashStretch,
   Stage,
   Text,
+  TextField,
   TextureFilter,
   Tilemap,
   Trail,
@@ -15401,6 +16178,7 @@ export {
   TransformHandles,
   TriMeshCollider,
   TriangleCollider,
+  Vec2Field,
   VectorPath,
   VirtualCamera,
   VirtualJoystick,
@@ -15578,6 +16356,8 @@ export {
   useDraggable,
   useDropThrough,
   useDroppable,
+  useDynamicCanvas,
+  useEditorState,
   useEntity,
   useEvent,
   useEvents,
@@ -15596,6 +16376,7 @@ export {
   useHitstop,
   useHoverable,
   useIDBSave,
+  useIdleFrameSkip,
   useInput,
   useInputBuffer,
   useInputContext,