cubeforge 0.5.2 → 0.6.1

package/dist/index.js

@@ -7829,6 +7829,7 @@ import { useEffect as useEffect28, useContext as useContext19 } from "react";
 
 // src/components/particlePresets.ts
 var PARTICLE_PRESETS = {
+  // ── Action / combat ──
   explosion: {
     rate: 60,
     speed: 200,
@@ -7837,8 +7838,12 @@ var PARTICLE_PRESETS = {
     particleLife: 0.5,
     particleSize: 6,
     color: "#ff6b35",
+    colorOverLife: ["#fff3b0", "#ff6b35", "#6d4c41"],
+    sizeOverLife: { start: 1.4, end: 0 },
     gravity: 300,
-    maxParticles: 80
+    maxParticles: 80,
+    blendMode: "additive",
+    particleShape: "soft"
   },
   spark: {
     rate: 40,
@@ -7849,7 +7854,70 @@ var PARTICLE_PRESETS = {
     particleSize: 3,
     color: "#ffd54f",
     gravity: 400,
-    maxParticles: 50
+    maxParticles: 50,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  damage: {
+    rate: 45,
+    speed: 120,
+    spread: Math.PI * 2,
+    angle: 0,
+    particleLife: 0.35,
+    particleSize: 4,
+    color: "#ef5350",
+    colorOverLife: ["#ffab91", "#ef5350", "#4a148c"],
+    sizeOverLife: { start: 1, end: 0.2 },
+    gravity: 150,
+    maxParticles: 40,
+    blendMode: "normal",
+    particleShape: "circle"
+  },
+  heal: {
+    rate: 22,
+    speed: 50,
+    spread: Math.PI / 2,
+    angle: -Math.PI / 2,
+    particleLife: 0.9,
+    particleSize: 5,
+    color: "#8bc34a",
+    colorOverLife: ["#e8f5e9", "#8bc34a"],
+    sizeOverLife: { start: 0.5, end: 1.2 },
+    gravity: -60,
+    maxParticles: 30,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  magic: {
+    rate: 32,
+    speed: 80,
+    spread: Math.PI * 2,
+    angle: 0,
+    particleLife: 1.1,
+    particleSize: 5,
+    color: "#ba68c8",
+    colorOverLife: ["#e1bee7", "#ba68c8", "#4a148c"],
+    sizeOverLife: { start: 1, end: 0 },
+    gravity: -20,
+    maxParticles: 60,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  // ── Environment ──
+  fire: {
+    rate: 40,
+    speed: 60,
+    spread: 0.6,
+    angle: -Math.PI / 2,
+    particleLife: 0.7,
+    particleSize: 7,
+    color: "#ff9800",
+    colorOverLife: ["#ffe082", "#ff9800", "#6d4c41", "#37474f"],
+    sizeOverLife: { start: 1.2, end: 0.3 },
+    gravity: -120,
+    maxParticles: 70,
+    blendMode: "additive",
+    particleShape: "soft"
   },
   smoke: {
     rate: 15,
@@ -7859,9 +7927,54 @@ var PARTICLE_PRESETS = {
     particleLife: 1.2,
     particleSize: 10,
     color: "#90a4ae",
+    colorOverLife: ["#90a4ae", "rgba(55,71,79,0)"],
+    sizeOverLife: { start: 0.5, end: 1.8 },
     gravity: -20,
-    maxParticles: 40
+    maxParticles: 40,
+    blendMode: "normal",
+    particleShape: "soft"
+  },
+  rain: {
+    rate: 80,
+    speed: 350,
+    spread: 0.05,
+    angle: Math.PI / 2,
+    particleLife: 0.8,
+    particleSize: 2,
+    color: "#81d4fa",
+    gravity: 900,
+    maxParticles: 300,
+    blendMode: "normal",
+    particleShape: "square"
+  },
+  snow: {
+    rate: 20,
+    speed: 40,
+    spread: 0.4,
+    angle: Math.PI / 2,
+    particleLife: 4,
+    particleSize: 3,
+    color: "#ffffff",
+    gravity: 20,
+    maxParticles: 150,
+    blendMode: "normal",
+    particleShape: "circle"
+  },
+  fountain: {
+    rate: 50,
+    speed: 300,
+    spread: 0.3,
+    angle: -Math.PI / 2,
+    particleLife: 1.5,
+    particleSize: 4,
+    color: "#4fc3f7",
+    colorOverLife: ["#b3e5fc", "#4fc3f7", "#0277bd"],
+    gravity: 500,
+    maxParticles: 200,
+    blendMode: "additive",
+    particleShape: "soft"
   },
+  // ── UI / reward ──
   coinPickup: {
     rate: 30,
     speed: 80,
@@ -7871,8 +7984,54 @@ var PARTICLE_PRESETS = {
     particleSize: 4,
     color: "#ffd700",
     gravity: 200,
-    maxParticles: 20
+    maxParticles: 20,
+    blendMode: "additive",
+    particleShape: "soft"
   },
+  pickup: {
+    rate: 35,
+    speed: 70,
+    spread: Math.PI * 2,
+    angle: 0,
+    particleLife: 0.5,
+    particleSize: 5,
+    color: "#4fc3f7",
+    colorOverLife: ["#ffffff", "#4fc3f7"],
+    sizeOverLife: { start: 1, end: 0 },
+    gravity: -80,
+    maxParticles: 24,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  sparkle: {
+    rate: 14,
+    speed: 40,
+    spread: Math.PI * 2,
+    angle: 0,
+    particleLife: 0.8,
+    particleSize: 3,
+    color: "#fffde7",
+    sizeOverLife: { start: 0, end: 1 },
+    gravity: 0,
+    maxParticles: 30,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  confetti: {
+    rate: 70,
+    speed: 280,
+    spread: Math.PI / 3,
+    angle: -Math.PI / 2,
+    particleLife: 2.2,
+    particleSize: 5,
+    color: "#ffc107",
+    colorOverLife: ["#f44336", "#ffc107", "#4caf50", "#2196f3", "#9c27b0"],
+    gravity: 400,
+    maxParticles: 150,
+    blendMode: "normal",
+    particleShape: "square"
+  },
+  // ── Character ──
   jumpDust: {
     rate: 25,
     speed: 60,
@@ -7882,7 +8041,23 @@ var PARTICLE_PRESETS = {
     particleSize: 5,
     color: "#b0bec5",
     gravity: 80,
-    maxParticles: 20
+    maxParticles: 20,
+    blendMode: "normal",
+    particleShape: "soft"
+  },
+  trail: {
+    rate: 30,
+    speed: 8,
+    spread: 0.2,
+    angle: Math.PI / 2,
+    particleLife: 0.5,
+    particleSize: 4,
+    color: "#4fc3f7",
+    sizeOverLife: { start: 1, end: 0 },
+    gravity: 0,
+    maxParticles: 40,
+    blendMode: "additive",
+    particleShape: "soft"
   }
 };
 
@@ -7928,6 +8103,10 @@ function ParticleEmitter({
   const resolvedColor = color ?? presetConfig.color ?? "#ffffff";
   const resolvedGravity = gravity ?? presetConfig.gravity ?? 200;
   const resolvedMaxParticles = maxParticles ?? presetConfig.maxParticles ?? 100;
+  const resolvedBlendMode = blendMode ?? presetConfig.blendMode;
+  const resolvedParticleShape = particleShape ?? presetConfig.particleShape;
+  const resolvedColorOverLife = colorOverLife ?? presetConfig.colorOverLife;
+  const resolvedSizeOverLife = sizeOverLife ?? presetConfig.sizeOverLife;
   const engine = useContext19(EngineContext);
   const entityId = useContext19(EntityContext);
   useEffect28(() => {
@@ -7953,15 +8132,15 @@ function ParticleEmitter({
       textureSrc,
       enableRotation,
       rotationSpeedRange,
-      sizeOverLife,
+      sizeOverLife: resolvedSizeOverLife,
       attractors,
-      colorOverLife,
-      blendMode,
+      colorOverLife: resolvedColorOverLife,
+      blendMode: resolvedBlendMode,
       mode,
       formationPoints,
       seekStrength,
       colorTransitionDuration,
-      particleShape
+      particleShape: resolvedParticleShape
     });
     return () => engine.ecs.removeComponent(entityId, "ParticlePool");
   }, []);
@@ -7973,9 +8152,9 @@ function ParticleEmitter({
   useEffect28(() => {
     const pool = engine.ecs.getComponent(entityId, "ParticlePool");
     if (!pool) return;
-    pool.blendMode = blendMode;
-    pool.particleShape = particleShape;
-  }, [blendMode, particleShape, engine, entityId]);
+    pool.blendMode = resolvedBlendMode;
+    pool.particleShape = resolvedParticleShape;
+  }, [resolvedBlendMode, resolvedParticleShape, engine, entityId]);
   useEffect28(() => {
     const pool = engine.ecs.getComponent(entityId, "ParticlePool");
     if (!pool) return;
@@ -8684,12 +8863,151 @@ function CameraZone({ x, y, width, height, watchTag = "player", targetX, targetY
   return /* @__PURE__ */ jsx13(Fragment6, { children: children ?? null });
 }
 
-// src/components/Trail.tsx
+// src/components/VirtualCamera.tsx
 import { useEffect as useEffect32, useContext as useContext23 } from "react";
-function Trail({ length = 20, color = "#ffffff", width = 3 }) {
+var registries = /* @__PURE__ */ new WeakMap();
+var driverEids = /* @__PURE__ */ new WeakMap();
+var driverRefs = /* @__PURE__ */ new WeakMap();
+var driverStates = /* @__PURE__ */ new WeakMap();
+function getRegistry(engine) {
+  if (!registries.has(engine)) registries.set(engine, /* @__PURE__ */ new Map());
+  return registries.get(engine);
+}
+function easeInOutQuad(t) {
+  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+}
+function acquireDriver(engine) {
+  const count = driverRefs.get(engine) ?? 0;
+  driverRefs.set(engine, count + 1);
+  if (count > 0) return;
+  const state = { activeId: null, blend: null };
+  driverStates.set(engine, state);
+  const eid = engine.ecs.createEntity();
+  driverEids.set(engine, eid);
+  engine.ecs.addComponent(
+    eid,
+    createScript((_id, _world, _input, dt) => {
+      const registry2 = getRegistry(engine);
+      const camId = engine.ecs.queryOne("Camera2D");
+      if (camId === void 0) return;
+      const cam = engine.ecs.getComponent(camId, "Camera2D");
+      if (!cam) return;
+      let best = null;
+      for (const vc of registry2.values()) {
+        if (!vc.active) continue;
+        if (!best || vc.priority > best.priority) best = vc;
+      }
+      if (!best) return;
+      if (best.id !== state.activeId) {
+        state.blend = {
+          fromX: cam.x,
+          fromY: cam.y,
+          fromZoom: cam.zoom,
+          elapsed: 0,
+          duration: best.blendDuration
+        };
+        state.activeId = best.id;
+        cam.followEntityId = void 0;
+      }
+      if (state.blend) {
+        if (state.blend.duration <= 0) {
+          state.blend = null;
+        } else {
+          state.blend.elapsed += dt;
+          const t = Math.min(1, state.blend.elapsed / state.blend.duration);
+          const eased = easeInOutQuad(t);
+          const targetX = best.x ?? state.blend.fromX;
+          const targetY = best.y ?? state.blend.fromY;
+          const targetZoom = best.zoom ?? 1;
+          cam.x = state.blend.fromX + (targetX - state.blend.fromX) * eased;
+          cam.y = state.blend.fromY + (targetY - state.blend.fromY) * eased;
+          cam.zoom = state.blend.fromZoom + (targetZoom - state.blend.fromZoom) * eased;
+          if (t >= 1) {
+            state.blend = null;
+            cam.followEntityId = best.followEntityId;
+            if (best.smoothing !== void 0) cam.smoothing = best.smoothing;
+            if (best.bounds !== void 0) cam.bounds = best.bounds;
+          }
+          return;
+        }
+      }
+      cam.followEntityId = best.followEntityId;
+      if (best.followEntityId === void 0) {
+        if (best.x !== void 0) cam.x = best.x;
+        if (best.y !== void 0) cam.y = best.y;
+      }
+      if (best.zoom !== void 0) cam.zoom = best.zoom;
+      if (best.smoothing !== void 0) cam.smoothing = best.smoothing;
+      if (best.bounds !== void 0) cam.bounds = best.bounds;
+    })
+  );
+}
+function releaseDriver(engine) {
+  const count = (driverRefs.get(engine) ?? 1) - 1;
+  driverRefs.set(engine, Math.max(0, count));
+  if (count > 0) return;
+  const eid = driverEids.get(engine);
+  if (eid !== void 0 && engine.ecs.hasEntity(eid)) engine.ecs.destroyEntity(eid);
+  driverEids.delete(engine);
+  driverStates.delete(engine);
+  driverRefs.delete(engine);
+  getRegistry(engine).clear();
+}
+function VirtualCamera({
+  id,
+  priority = 0,
+  active = true,
+  followEntity,
+  x,
+  y,
+  zoom = 1,
+  smoothing,
+  bounds,
+  blendDuration = 0.4
+}) {
   const engine = useContext23(EngineContext);
-  const entityId = useContext23(EntityContext);
   useEffect32(() => {
+    acquireDriver(engine);
+    const registry2 = getRegistry(engine);
+    registry2.set(id, {
+      id,
+      priority,
+      active,
+      followEntityId: followEntity,
+      x,
+      y,
+      zoom,
+      smoothing,
+      bounds,
+      blendDuration
+    });
+    return () => {
+      getRegistry(engine).delete(id);
+      releaseDriver(engine);
+    };
+  }, []);
+  useEffect32(() => {
+    const entry = getRegistry(engine).get(id);
+    if (!entry) return;
+    entry.priority = priority;
+    entry.active = active;
+    entry.followEntityId = followEntity;
+    entry.x = x;
+    entry.y = y;
+    entry.zoom = zoom;
+    entry.smoothing = smoothing;
+    entry.bounds = bounds;
+    entry.blendDuration = blendDuration;
+  }, [id, priority, active, followEntity, x, y, zoom, smoothing, bounds, blendDuration, engine]);
+  return null;
+}
+
+// src/components/Trail.tsx
+import { useEffect as useEffect33, useContext as useContext24 } from "react";
+function Trail({ length = 20, color = "#ffffff", width = 3 }) {
+  const engine = useContext24(EngineContext);
+  const entityId = useContext24(EntityContext);
+  useEffect33(() => {
     engine.ecs.addComponent(entityId, createTrail({ length, color, width }));
     return () => engine.ecs.removeComponent(entityId, "Trail");
   }, []);
@@ -8697,7 +9015,7 @@ function Trail({ length = 20, color = "#ffffff", width = 3 }) {
 }
 
 // src/components/NineSlice.tsx
-import { useEffect as useEffect33, useContext as useContext24 } from "react";
+import { useEffect as useEffect34, useContext as useContext25 } from "react";
 function NineSlice({
   src,
   width,
@@ -8708,9 +9026,9 @@ function NineSlice({
   borderLeft = 8,
   zIndex = 0
 }) {
-  const engine = useContext24(EngineContext);
-  const entityId = useContext24(EntityContext);
-  useEffect33(() => {
+  const engine = useContext25(EngineContext);
+  const entityId = useContext25(EntityContext);
+  useEffect34(() => {
     engine.ecs.addComponent(
       entityId,
       createNineSlice(src, width, height, {
@@ -8727,18 +9045,18 @@ function NineSlice({
 }
 
 // src/components/AssetLoader.tsx
-import { useEffect as useEffect35 } from "react";
+import { useEffect as useEffect36 } from "react";
 
 // src/hooks/usePreload.ts
-import { useState as useState7, useEffect as useEffect34, useContext as useContext25 } from "react";
+import { useState as useState7, useEffect as useEffect35, useContext as useContext26 } from "react";
 function usePreload(assets) {
-  const engine = useContext25(EngineContext);
+  const engine = useContext26(EngineContext);
   const [state, setState] = useState7({
     progress: assets.length === 0 ? 1 : 0,
     loaded: assets.length === 0,
     error: null
   });
-  useEffect34(() => {
+  useEffect35(() => {
     if (assets.length === 0) {
       setState({ progress: 1, loaded: true, error: null });
       return;
@@ -8775,7 +9093,7 @@ function usePreload(assets) {
 import { Fragment as Fragment7, jsx as jsx14 } from "react/jsx-runtime";
 function AssetLoader({ assets, fallback = null, onError, children }) {
   const { loaded, error } = usePreload(assets);
-  useEffect35(() => {
+  useEffect36(() => {
     if (error && onError) onError(error);
   }, [error, onError]);
   if (!loaded) {
@@ -8785,7 +9103,7 @@ function AssetLoader({ assets, fallback = null, onError, children }) {
 }
 
 // src/components/Circle.tsx
-import { useEffect as useEffect36, useContext as useContext26 } from "react";
+import { useEffect as useEffect37, useContext as useContext27 } from "react";
 function Circle({
   radius = 16,
   color = "#ffffff",
@@ -8794,9 +9112,9 @@ function Circle({
   zIndex = 0,
   opacity = 1
 }) {
-  const engine = useContext26(EngineContext);
-  const entityId = useContext26(EntityContext);
-  useEffect36(() => {
+  const engine = useContext27(EngineContext);
+  const entityId = useContext27(EntityContext);
+  useEffect37(() => {
     const comp = createCircleShape({
       radius,
       color,
@@ -8808,7 +9126,7 @@ function Circle({
     engine.ecs.addComponent(entityId, comp);
     return () => engine.ecs.removeComponent(entityId, "CircleShape");
   }, []);
-  useEffect36(() => {
+  useEffect37(() => {
     const comp = engine.ecs.getComponent(entityId, "CircleShape");
     if (!comp) return;
     comp.radius = radius;
@@ -8822,7 +9140,7 @@ function Circle({
 }
 
 // src/components/Line.tsx
-import { useEffect as useEffect37, useContext as useContext27 } from "react";
+import { useEffect as useEffect38, useContext as useContext28 } from "react";
 function Line({
   endX,
   endY,
@@ -8832,9 +9150,9 @@ function Line({
   opacity = 1,
   lineCap = "round"
 }) {
-  const engine = useContext27(EngineContext);
-  const entityId = useContext27(EntityContext);
-  useEffect37(() => {
+  const engine = useContext28(EngineContext);
+  const entityId = useContext28(EntityContext);
+  useEffect38(() => {
     const comp = createLineShape({
       endX,
       endY,
@@ -8847,7 +9165,7 @@ function Line({
     engine.ecs.addComponent(entityId, comp);
     return () => engine.ecs.removeComponent(entityId, "LineShape");
   }, []);
-  useEffect37(() => {
+  useEffect38(() => {
     const comp = engine.ecs.getComponent(entityId, "LineShape");
     if (!comp) return;
     comp.endX = endX;
@@ -8862,7 +9180,7 @@ function Line({
 }
 
 // src/components/Polygon.tsx
-import { useEffect as useEffect38, useContext as useContext28 } from "react";
+import { useEffect as useEffect39, useContext as useContext29 } from "react";
 function Polygon({
   points,
   color = "#ffffff",
@@ -8872,9 +9190,9 @@ function Polygon({
   opacity = 1,
   closed = true
 }) {
-  const engine = useContext28(EngineContext);
-  const entityId = useContext28(EntityContext);
-  useEffect38(() => {
+  const engine = useContext29(EngineContext);
+  const entityId = useContext29(EntityContext);
+  useEffect39(() => {
     const comp = createPolygonShape({
       points,
       color,
@@ -8887,7 +9205,7 @@ function Polygon({
     engine.ecs.addComponent(entityId, comp);
     return () => engine.ecs.removeComponent(entityId, "PolygonShape");
   }, []);
-  useEffect38(() => {
+  useEffect39(() => {
     const comp = engine.ecs.getComponent(entityId, "PolygonShape");
     if (!comp) return;
     comp.points = points;
@@ -8902,7 +9220,7 @@ function Polygon({
 }
 
 // src/components/Gradient.tsx
-import { useEffect as useEffect39, useContext as useContext29 } from "react";
+import { useEffect as useEffect40, useContext as useContext30 } from "react";
 function Gradient({
   gradientType = "linear",
   stops,
@@ -8915,9 +9233,9 @@ function Gradient({
   anchorX = 0.5,
   anchorY = 0.5
 }) {
-  const engine = useContext29(EngineContext);
-  const entityId = useContext29(EntityContext);
-  useEffect39(() => {
+  const engine = useContext30(EngineContext);
+  const entityId = useContext30(EntityContext);
+  useEffect40(() => {
     const comp = createGradient({
       gradientType,
       stops,
@@ -8933,7 +9251,7 @@ function Gradient({
     engine.ecs.addComponent(entityId, comp);
     return () => engine.ecs.removeComponent(entityId, "Gradient");
   }, []);
-  useEffect39(() => {
+  useEffect40(() => {
     const comp = engine.ecs.getComponent(entityId, "Gradient");
     if (!comp) return;
     comp.gradientType = gradientType;
@@ -8947,16 +9265,16 @@ function Gradient({
 }
 
 // src/components/Mask.tsx
-import { useEffect as useEffect40, useContext as useContext30 } from "react";
+import { useEffect as useEffect41, useContext as useContext31 } from "react";
 function Mask({ shape = "rect", width = 64, height = 64, radius = 32, inverted = false }) {
-  const engine = useContext30(EngineContext);
-  const entityId = useContext30(EntityContext);
-  useEffect40(() => {
+  const engine = useContext31(EngineContext);
+  const entityId = useContext31(EntityContext);
+  useEffect41(() => {
     const comp = createMask({ shape, width, height, radius, inverted });
     engine.ecs.addComponent(entityId, comp);
     return () => engine.ecs.removeComponent(entityId, "Mask");
   }, []);
-  useEffect40(() => {
+  useEffect41(() => {
     const comp = engine.ecs.getComponent(entityId, "Mask");
     if (!comp) return;
     comp.shape = shape;
@@ -8969,11 +9287,11 @@ function Mask({ shape = "rect", width = 64, height = 64, radius = 32, inverted =
 }
 
 // src/components/Joint.tsx
-import { useEffect as useEffect41, useContext as useContext31 } from "react";
+import { useEffect as useEffect42, useContext as useContext32 } from "react";
 function Joint({ type, target, anchorA, anchorB, length, stiffness, damping, maxLength }) {
-  const engine = useContext31(EngineContext);
-  const entityId = useContext31(EntityContext);
-  useEffect41(() => {
+  const engine = useContext32(EngineContext);
+  const entityId = useContext32(EntityContext);
+  useEffect42(() => {
     const checkId = setTimeout(() => {
       const targetEntityId = engine.entityIds.get(target);
       if (!targetEntityId) {
@@ -9008,7 +9326,7 @@ function Joint({ type, target, anchorA, anchorB, length, stiffness, damping, max
 }
 
 // src/components/ConvexCollider.tsx
-import { useEffect as useEffect42, useContext as useContext32 } from "react";
+import { useEffect as useEffect43, useContext as useContext33 } from "react";
 function ConvexCollider({
   vertices,
   offsetX = 0,
@@ -9022,9 +9340,9 @@ function ConvexCollider({
   restitutionCombineRule = "average",
   enabled = true
 }) {
-  const engine = useContext32(EngineContext);
-  const entityId = useContext32(EntityContext);
-  useEffect42(() => {
+  const engine = useContext33(EngineContext);
+  const entityId = useContext33(EntityContext);
+  useEffect43(() => {
     engine.ecs.addComponent(
       entityId,
       createConvexPolygonCollider(vertices, {
@@ -9046,7 +9364,7 @@ function ConvexCollider({
 }
 
 // src/components/TriangleCollider.tsx
-import { useEffect as useEffect43, useContext as useContext33 } from "react";
+import { useEffect as useEffect44, useContext as useContext34 } from "react";
 function TriangleCollider({
   a,
   b,
@@ -9062,9 +9380,9 @@ function TriangleCollider({
   restitutionCombineRule = "average",
   enabled = true
 }) {
-  const engine = useContext33(EngineContext);
-  const entityId = useContext33(EntityContext);
-  useEffect43(() => {
+  const engine = useContext34(EngineContext);
+  const entityId = useContext34(EntityContext);
+  useEffect44(() => {
     engine.ecs.addComponent(
       entityId,
       createTriangleCollider(a, b, c, {
@@ -9086,7 +9404,7 @@ function TriangleCollider({
 }
 
 // src/components/SegmentCollider.tsx
-import { useEffect as useEffect44, useContext as useContext34 } from "react";
+import { useEffect as useEffect45, useContext as useContext35 } from "react";
 function SegmentCollider({
   start: start2,
   end,
@@ -9100,9 +9418,9 @@ function SegmentCollider({
   restitutionCombineRule = "average",
   enabled = true
 }) {
-  const engine = useContext34(EngineContext);
-  const entityId = useContext34(EntityContext);
-  useEffect44(() => {
+  const engine = useContext35(EngineContext);
+  const entityId = useContext35(EntityContext);
+  useEffect45(() => {
     engine.ecs.addComponent(
       entityId,
       createSegmentCollider(start2, end, {
@@ -9123,7 +9441,7 @@ function SegmentCollider({
 }
 
 // src/components/HeightFieldCollider.tsx
-import { useEffect as useEffect45, useContext as useContext35 } from "react";
+import { useEffect as useEffect46, useContext as useContext36 } from "react";
 function HeightFieldCollider({
   heights,
   scaleX = 1,
@@ -9136,9 +9454,9 @@ function HeightFieldCollider({
   restitutionCombineRule = "average",
   enabled = true
 }) {
-  const engine = useContext35(EngineContext);
-  const entityId = useContext35(EntityContext);
-  useEffect45(() => {
+  const engine = useContext36(EngineContext);
+  const entityId = useContext36(EntityContext);
+  useEffect46(() => {
     engine.ecs.addComponent(
       entityId,
       createHeightFieldCollider(heights, {
@@ -9159,7 +9477,7 @@ function HeightFieldCollider({
 }
 
 // src/components/HalfSpaceCollider.tsx
-import { useEffect as useEffect46, useContext as useContext36 } from "react";
+import { useEffect as useEffect47, useContext as useContext37 } from "react";
 function HalfSpaceCollider({
   normalX = 0,
   normalY = -1,
@@ -9171,9 +9489,9 @@ function HalfSpaceCollider({
   restitutionCombineRule = "average",
   enabled = true
 }) {
-  const engine = useContext36(EngineContext);
-  const entityId = useContext36(EntityContext);
-  useEffect46(() => {
+  const engine = useContext37(EngineContext);
+  const entityId = useContext37(EntityContext);
+  useEffect47(() => {
     engine.ecs.addComponent(
       entityId,
       createHalfSpaceCollider({
@@ -9194,7 +9512,7 @@ function HalfSpaceCollider({
 }
 
 // src/components/TriMeshCollider.tsx
-import { useEffect as useEffect47, useContext as useContext37 } from "react";
+import { useEffect as useEffect48, useContext as useContext38 } from "react";
 function TriMeshCollider({
   vertices,
   indices,
@@ -9206,9 +9524,9 @@ function TriMeshCollider({
   restitutionCombineRule = "average",
   enabled = true
 }) {
-  const engine = useContext37(EngineContext);
-  const entityId = useContext37(EntityContext);
-  useEffect47(() => {
+  const engine = useContext38(EngineContext);
+  const entityId = useContext38(EntityContext);
+  useEffect48(() => {
     engine.ecs.addComponent(
       entityId,
       createTriMeshCollider(vertices, indices, {
@@ -9227,9 +9545,9 @@ function TriMeshCollider({
 }
 
 // src/hooks/useGame.ts
-import { useContext as useContext38 } from "react";
+import { useContext as useContext39 } from "react";
 function useGame() {
-  const engine = useContext38(EngineContext);
+  const engine = useContext39(EngineContext);
   if (!engine) throw new Error("useGame must be used inside <Game>");
   return engine;
 }
@@ -9291,11 +9609,11 @@ function useCamera() {
 }
 
 // src/hooks/useCameraLookahead.ts
-import { useContext as useContext39, useEffect as useEffect48 } from "react";
+import { useContext as useContext40, useEffect as useEffect49 } from "react";
 function useCameraLookahead(entityId, opts = {}) {
-  const engine = useContext39(EngineContext);
+  const engine = useContext40(EngineContext);
   const { distance = 100, smoothing = 3, vertical = false } = opts;
-  useEffect48(() => {
+  useEffect49(() => {
     let offsetX = 0;
     let offsetY = 0;
     const script = createScript((id, world, _input, dt) => {
@@ -9329,11 +9647,161 @@ function useCameraLookahead(entityId, opts = {}) {
   }, [distance, smoothing, vertical]);
 }
 
-// src/hooks/useSnapshot.ts
+// src/hooks/useCameraBlend.ts
 import { useMemo as useMemo2 } from "react";
+var OVERRIDE_PRIORITY = 999999;
+var originalPriorities = /* @__PURE__ */ new WeakMap();
+function useCameraBlend() {
+  const engine = useGame();
+  return useMemo2(() => {
+    function getOverrides() {
+      if (!originalPriorities.has(engine)) originalPriorities.set(engine, /* @__PURE__ */ new Map());
+      return originalPriorities.get(engine);
+    }
+    return {
+      activate(id) {
+        const entry = getRegistry(engine).get(id);
+        if (entry) entry.active = true;
+      },
+      deactivate(id) {
+        const entry = getRegistry(engine).get(id);
+        if (entry) entry.active = false;
+      },
+      override(id) {
+        const entry = getRegistry(engine).get(id);
+        if (!entry) return;
+        const overrides = getOverrides();
+        if (!overrides.has(id)) overrides.set(id, entry.priority);
+        entry.priority = OVERRIDE_PRIORITY;
+        entry.active = true;
+      },
+      restore(id) {
+        const entry = getRegistry(engine).get(id);
+        if (!entry) return;
+        const overrides = getOverrides();
+        const original = overrides.get(id);
+        if (original !== void 0) {
+          entry.priority = original;
+          overrides.delete(id);
+        }
+      },
+      getActiveId() {
+        const registry2 = getRegistry(engine);
+        let best = null;
+        for (const vc of registry2.values()) {
+          if (!vc.active) continue;
+          if (!best || vc.priority > best.priority) best = vc;
+        }
+        return best?.id ?? null;
+      }
+    };
+  }, [engine]);
+}
+
+// src/hooks/useCinematicSequence.ts
+import { useEffect as useEffect50, useRef as useRef17, useCallback as useCallback2, useState as useState8, useContext as useContext41 } from "react";
+function useCinematicSequence(steps, opts) {
+  const engine = useContext41(EngineContext);
+  const stepsRef = useRef17(steps);
+  stepsRef.current = steps;
+  const optsRef = useRef17(opts);
+  optsRef.current = opts;
+  const [isPlaying, setIsPlaying] = useState8(false);
+  const [currentStep, setCurrentStep] = useState8(-1);
+  const stateRef = useRef17({ playing: false, step: -1, elapsed: 0, scriptEid: null });
+  const activateStep = useCallback2(
+    (idx) => {
+      const steps2 = stepsRef.current;
+      if (idx < 0 || idx >= steps2.length) return;
+      const step = steps2[idx];
+      const registry2 = getRegistry(engine);
+      for (const s2 of steps2) {
+        if (s2.cameraId !== step.cameraId) {
+          const entry2 = registry2.get(s2.cameraId);
+          if (entry2) entry2.active = false;
+        }
+      }
+      const entry = registry2.get(step.cameraId);
+      if (entry) {
+        if (step.blendDuration !== void 0) entry.blendDuration = step.blendDuration;
+        entry.active = true;
+      }
+    },
+    [engine]
+  );
+  const play = useCallback2(() => {
+    const state = stateRef.current;
+    state.playing = true;
+    state.step = 0;
+    state.elapsed = 0;
+    setIsPlaying(true);
+    setCurrentStep(0);
+    activateStep(0);
+  }, [activateStep]);
+  const stop = useCallback2(() => {
+    const state = stateRef.current;
+    if (!state.playing) return;
+    state.playing = false;
+    setIsPlaying(false);
+    setCurrentStep(-1);
+    const registry2 = getRegistry(engine);
+    for (const s2 of stepsRef.current) {
+      const entry = registry2.get(s2.cameraId);
+      if (entry) entry.active = false;
+    }
+  }, [engine]);
+  useEffect50(() => {
+    const state = stateRef.current;
+    const eid = engine.ecs.createEntity();
+    state.scriptEid = eid;
+    engine.ecs.addComponent(
+      eid,
+      createScript((_id, _world, _input, dt) => {
+        if (!state.playing) return;
+        const steps2 = stepsRef.current;
+        if (steps2.length === 0) return;
+        const step = steps2[state.step];
+        if (!step) return;
+        if (step.holdFor === Infinity) return;
+        state.elapsed += dt;
+        if (state.elapsed >= step.holdFor) {
+          state.elapsed = 0;
+          const next = state.step + 1;
+          if (next >= steps2.length) {
+            state.playing = false;
+            setIsPlaying(false);
+            setCurrentStep(-1);
+            optsRef.current?.onComplete?.();
+          } else {
+            state.step = next;
+            setCurrentStep(next);
+            activateStep(next);
+          }
+        }
+      })
+    );
+    return () => {
+      state.scriptEid = null;
+      if (engine.ecs.hasEntity(eid)) engine.ecs.destroyEntity(eid);
+    };
+  }, [engine]);
+  return {
+    play,
+    stop,
+    get isPlaying() {
+      return isPlaying;
+    },
+    get currentStep() {
+      return currentStep;
+    }
+  };
+}
+
+// src/hooks/useSnapshot.ts
+import { useMemo as useMemo3 } from "react";
 function useSnapshot() {
   const engine = useGame();
-  return useMemo2(
+  return useMemo3(
     () => ({
       save: () => engine.ecs.getSnapshot(),
       restore: (snapshot) => engine.ecs.restoreSnapshot(snapshot)
@@ -9343,21 +9811,21 @@ function useSnapshot() {
 }
 
 // src/hooks/useEntity.ts
-import { useContext as useContext40 } from "react";
+import { useContext as useContext42 } from "react";
 function useEntity() {
-  const id = useContext40(EntityContext);
+  const id = useContext42(EntityContext);
   if (id === null) throw new Error("useEntity must be used inside <Entity>");
   return id;
 }
 
 // src/hooks/useDestroyEntity.ts
-import { useCallback as useCallback2, useContext as useContext41 } from "react";
+import { useCallback as useCallback3, useContext as useContext43 } from "react";
 function useDestroyEntity() {
-  const engine = useContext41(EngineContext);
-  const entityId = useContext41(EntityContext);
+  const engine = useContext43(EngineContext);
+  const entityId = useContext43(EntityContext);
   if (!engine) throw new Error("useDestroyEntity must be used inside <Game>");
   if (entityId === null) throw new Error("useDestroyEntity must be used inside <Entity>");
-  return useCallback2(() => {
+  return useCallback3(() => {
     if (engine.ecs.hasEntity(entityId)) {
       engine.ecs.destroyEntity(entityId);
     }
@@ -9365,19 +9833,19 @@ function useDestroyEntity() {
 }
 
 // src/hooks/useInput.ts
-import { useContext as useContext42 } from "react";
+import { useContext as useContext44 } from "react";
 function useInput() {
-  const engine = useContext42(EngineContext);
+  const engine = useContext44(EngineContext);
   if (!engine) throw new Error("useInput must be used inside <Game>");
   return engine.input;
 }
 
 // src/hooks/useInputMap.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 function useInputMap(bindings) {
   const input = useInput();
-  const map = useMemo3(() => createInputMap(bindings), [JSON.stringify(bindings)]);
-  return useMemo3(
+  const map = useMemo4(() => createInputMap(bindings), [JSON.stringify(bindings)]);
+  return useMemo4(
     () => ({
       isActionDown: (action) => map.isActionDown(input, action),
       isActionPressed: (action) => map.isActionPressed(input, action),
@@ -9390,26 +9858,26 @@ function useInputMap(bindings) {
 }
 
 // src/hooks/useEvents.ts
-import { useContext as useContext43, useEffect as useEffect49, useRef as useRef17 } from "react";
+import { useContext as useContext45, useEffect as useEffect51, useRef as useRef18 } from "react";
 function useEvents() {
-  const engine = useContext43(EngineContext);
+  const engine = useContext45(EngineContext);
   if (!engine) throw new Error("useEvents must be used inside <Game>");
   return engine.events;
 }
 function useEvent(event, handler) {
   const events = useEvents();
-  const handlerRef = useRef17(handler);
+  const handlerRef = useRef18(handler);
   handlerRef.current = handler;
-  useEffect49(() => {
+  useEffect51(() => {
     return events.on(event, (data) => handlerRef.current(data));
   }, [events, event]);
 }
 
 // src/hooks/useCoordinates.ts
-import { useCallback as useCallback3, useContext as useContext44 } from "react";
+import { useCallback as useCallback4, useContext as useContext46 } from "react";
 function useCoordinates() {
-  const engine = useContext44(EngineContext);
-  const worldToScreen = useCallback3(
+  const engine = useContext46(EngineContext);
+  const worldToScreen = useCallback4(
     (wx, wy) => {
       const canvas = engine.canvas;
       const camId = engine.ecs.queryOne("Camera2D");
@@ -9423,7 +9891,7 @@ function useCoordinates() {
     },
     [engine.ecs, engine.canvas]
   );
-  const screenToWorld3 = useCallback3(
+  const screenToWorld3 = useCallback4(
     (sx, sy) => {
       const canvas = engine.canvas;
       const camId = engine.ecs.queryOne("Camera2D");
@@ -9441,14 +9909,14 @@ function useCoordinates() {
 }
 
 // src/hooks/useWorldQuery.ts
-import { useEffect as useEffect50, useRef as useRef18, useState as useState8 } from "react";
+import { useEffect as useEffect52, useRef as useRef19, useState as useState9 } from "react";
 function useWorldQuery(...components) {
   const engine = useGame();
-  const [result, setResult] = useState8(() => engine.ecs.query(...components));
-  const prevRef = useRef18([]);
-  const rafRef = useRef18(0);
-  const mountedRef = useRef18(true);
-  useEffect50(() => {
+  const [result, setResult] = useState9(() => engine.ecs.query(...components));
+  const prevRef = useRef19([]);
+  const rafRef = useRef19(0);
+  const mountedRef = useRef19(true);
+  useEffect52(() => {
     mountedRef.current = true;
     const tick2 = () => {
       if (!mountedRef.current) return;
@@ -9470,14 +9938,14 @@ function useWorldQuery(...components) {
 }
 
 // src/hooks/useInputContext.ts
-import { useEffect as useEffect51, useMemo as useMemo4 } from "react";
+import { useEffect as useEffect53, useMemo as useMemo5 } from "react";
 function useInputContext(ctx) {
-  useEffect51(() => {
+  useEffect53(() => {
     if (!ctx) return;
     globalInputContext.push(ctx);
     return () => globalInputContext.pop(ctx);
   }, [ctx]);
-  return useMemo4(
+  return useMemo5(
     () => ({
       push: (c) => globalInputContext.push(c),
       pop: (c) => globalInputContext.pop(c),
@@ -9490,17 +9958,17 @@ function useInputContext(ctx) {
 }
 
 // src/hooks/usePlayerInput.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 function usePlayerInput(playerId, bindings) {
   const input = useInput();
-  return useMemo5(() => createPlayerInput(playerId, bindings, input), [playerId, input, JSON.stringify(bindings)]);
+  return useMemo6(() => createPlayerInput(playerId, bindings, input), [playerId, input, JSON.stringify(bindings)]);
 }
 
 // src/hooks/useLocalMultiplayer.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 function useLocalMultiplayer(bindingsPerPlayer) {
   const input = useInput();
-  return useMemo6(
+  return useMemo7(
     () => bindingsPerPlayer.map((bindings, i) => createPlayerInput(i + 1, bindings, input)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [input, JSON.stringify(bindingsPerPlayer)]
@@ -9508,18 +9976,18 @@ function useLocalMultiplayer(bindingsPerPlayer) {
 }
 
 // src/hooks/useInputRecorder.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 function useInputRecorder() {
-  return useMemo7(() => createInputRecorder(), []);
+  return useMemo8(() => createInputRecorder(), []);
 }
 
 // src/hooks/useGamepad.ts
-import { useEffect as useEffect52, useRef as useRef19, useState as useState9 } from "react";
+import { useEffect as useEffect54, useRef as useRef20, useState as useState10 } from "react";
 var EMPTY_STATE = { connected: false, axes: [], buttons: [] };
 function useGamepad(playerIndex = 0) {
-  const [state, setState] = useState9(EMPTY_STATE);
-  const rafRef = useRef19(0);
-  useEffect52(() => {
+  const [state, setState] = useState10(EMPTY_STATE);
+  const rafRef = useRef20(0);
+  useEffect54(() => {
     const poll = () => {
       const gp = navigator.getGamepads()[playerIndex];
       if (gp) {
@@ -9540,19 +10008,19 @@ function useGamepad(playerIndex = 0) {
 }
 
 // src/hooks/usePause.ts
-import { useContext as useContext45, useState as useState10, useCallback as useCallback4 } from "react";
+import { useContext as useContext47, useState as useState11, useCallback as useCallback5 } from "react";
 function usePause() {
-  const engine = useContext45(EngineContext);
-  const [paused, setPaused] = useState10(false);
-  const pause = useCallback4(() => {
+  const engine = useContext47(EngineContext);
+  const [paused, setPaused] = useState11(false);
+  const pause = useCallback5(() => {
     engine.loop.pause();
     setPaused(true);
   }, [engine]);
-  const resume = useCallback4(() => {
+  const resume = useCallback5(() => {
     engine.loop.resume();
     setPaused(false);
   }, [engine]);
-  const toggle = useCallback4(() => {
+  const toggle = useCallback5(() => {
     if (engine.loop.isPaused) resume();
     else pause();
   }, [engine, pause, resume]);
@@ -9560,7 +10028,7 @@ function usePause() {
 }
 
 // src/hooks/useProfiler.ts
-import { useContext as useContext46, useEffect as useEffect53, useRef as useRef20, useState as useState11 } from "react";
+import { useContext as useContext48, useEffect as useEffect55, useRef as useRef21, useState as useState12 } from "react";
 var EMPTY = {
   fps: 0,
   frameTime: 0,
@@ -9568,12 +10036,12 @@ var EMPTY = {
   systemTimings: /* @__PURE__ */ new Map()
 };
 function useProfiler() {
-  const engine = useContext46(EngineContext);
-  const [data, setData] = useState11(EMPTY);
-  const frameTimesRef = useRef20([]);
-  const lastUpdateRef = useRef20(0);
-  const prevTimeRef = useRef20(0);
-  useEffect53(() => {
+  const engine = useContext48(EngineContext);
+  const [data, setData] = useState12(EMPTY);
+  const frameTimesRef = useRef21([]);
+  const lastUpdateRef = useRef21(0);
+  const prevTimeRef = useRef21(0);
+  useEffect55(() => {
     if (!engine) return;
     let rafId2;
     const frameTimes = frameTimesRef.current;
@@ -9613,10 +10081,10 @@ function useProfiler() {
 }
 
 // src/hooks/usePostProcess.ts
-import { useEffect as useEffect54 } from "react";
+import { useEffect as useEffect56 } from "react";
 function usePostProcess(effect) {
   const engine = useGame();
-  useEffect54(() => {
+  useEffect56(() => {
     engine.postProcessStack.add(effect);
     return () => {
       engine.postProcessStack.remove(effect);
@@ -9625,11 +10093,11 @@ function usePostProcess(effect) {
 }
 
 // src/hooks/useWebGLPostProcess.ts
-import { useEffect as useEffect55, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect57, useMemo as useMemo9 } from "react";
 function useWebGLPostProcess(opts) {
   const engine = useGame();
-  const optsKey = useMemo8(() => JSON.stringify(opts), [JSON.stringify(opts)]);
-  useEffect55(() => {
+  const optsKey = useMemo9(() => JSON.stringify(opts), [JSON.stringify(opts)]);
+  useEffect57(() => {
     const rs = engine.activeRenderSystem;
     rs.setPostProcessOptions?.(opts);
     return () => {
@@ -9639,10 +10107,10 @@ function useWebGLPostProcess(opts) {
 }
 
 // src/hooks/useAudioListener.ts
-import { useEffect as useEffect56, useContext as useContext47 } from "react";
+import { useEffect as useEffect58, useContext as useContext49 } from "react";
 function useAudioListener() {
-  const engine = useContext47(EngineContext);
-  useEffect56(() => {
+  const engine = useContext49(EngineContext);
+  useEffect58(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -9661,9 +10129,9 @@ function useAudioListener() {
 }
 
 // src/hooks/useTouch.ts
-import { useContext as useContext48 } from "react";
+import { useContext as useContext50 } from "react";
 function useTouch() {
-  const engine = useContext48(EngineContext);
+  const engine = useContext50(EngineContext);
   if (!engine) throw new Error("useTouch must be used inside <Game>");
   const t = engine.input.touch;
   return {
@@ -9686,13 +10154,13 @@ function useTouch() {
 }
 
 // src/hooks/useGestures.ts
-import { useEffect as useEffect57, useRef as useRef21 } from "react";
+import { useEffect as useEffect59, useRef as useRef22 } from "react";
 function useGestures(handlers, opts = {}) {
-  const handlersRef = useRef21(handlers);
+  const handlersRef = useRef22(handlers);
   handlersRef.current = handlers;
-  const optsRef = useRef21(opts);
+  const optsRef = useRef22(opts);
   optsRef.current = opts;
-  useEffect57(() => {
+  useEffect59(() => {
     const target = optsRef.current.target ?? window;
     let starts = [];
     let longPressTimer = null;
@@ -9827,14 +10295,14 @@ function useGamepadHaptics(playerIndex = 0) {
 }
 
 // src/hooks/useTimer.ts
-import { useRef as useRef22, useCallback as useCallback5, useEffect as useEffect58, useContext as useContext49 } from "react";
+import { useRef as useRef23, useCallback as useCallback6, useEffect as useEffect60, useContext as useContext51 } from "react";
 function useTimer(duration, onComplete, opts) {
-  const engine = useContext49(EngineContext);
-  const onCompleteRef = useRef22(onComplete);
+  const engine = useContext51(EngineContext);
+  const onCompleteRef = useRef23(onComplete);
   onCompleteRef.current = onComplete;
-  const loopRef = useRef22(opts?.loop ?? false);
+  const loopRef = useRef23(opts?.loop ?? false);
   loopRef.current = opts?.loop ?? false;
-  const timerRef = useRef22(null);
+  const timerRef = useRef23(null);
   if (!timerRef.current) {
     timerRef.current = createTimer(
       duration,
@@ -9847,7 +10315,7 @@ function useTimer(duration, onComplete, opts) {
       opts?.autoStart ?? false
     );
   }
-  useEffect58(() => {
+  useEffect60(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -9859,13 +10327,13 @@ function useTimer(duration, onComplete, opts) {
       if (engine.ecs.hasEntity(eid)) engine.ecs.destroyEntity(eid);
     };
   }, [engine.ecs]);
-  const start2 = useCallback5(() => {
+  const start2 = useCallback6(() => {
     timerRef.current.start();
   }, []);
-  const stop = useCallback5(() => {
+  const stop = useCallback6(() => {
     timerRef.current.stop();
   }, []);
-  const reset = useCallback5(() => {
+  const reset = useCallback6(() => {
     timerRef.current.reset();
   }, []);
   return {
@@ -9888,15 +10356,15 @@ function useTimer(duration, onComplete, opts) {
 }
 
 // src/hooks/useCoroutine.ts
-import { useRef as useRef23, useEffect as useEffect59, useContext as useContext50 } from "react";
+import { useRef as useRef24, useEffect as useEffect61, 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 = useContext50(EngineContext);
-  const coroutinesRef = useRef23(/* @__PURE__ */ new Map());
-  useEffect59(() => {
+  const engine = useContext52(EngineContext);
+  const coroutinesRef = useRef24(/* @__PURE__ */ new Map());
+  useEffect61(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -9961,33 +10429,33 @@ function useCoroutine() {
       return coroutinesRef.current.size;
     }
   };
-  const controlsRef = useRef23(controls);
+  const controlsRef = useRef24(controls);
   return controlsRef.current;
 }
 
 // src/hooks/useSceneManager.ts
-import { useState as useState12, useCallback as useCallback6, useRef as useRef24 } from "react";
+import { useState as useState13, useCallback as useCallback7, useRef as useRef25 } from "react";
 function useSceneManager(initialScene) {
-  const [stack, setStack] = useState12([initialScene]);
-  const stackRef = useRef24(stack);
+  const [stack, setStack] = useState13([initialScene]);
+  const stackRef = useRef25(stack);
   stackRef.current = stack;
-  const push = useCallback6((scene) => {
+  const push = useCallback7((scene) => {
     setStack((prev) => [...prev, scene]);
   }, []);
-  const pop = useCallback6(() => {
+  const pop = useCallback7(() => {
     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 = useCallback6((scene) => {
+  const replace = useCallback7((scene) => {
     setStack((prev) => [...prev.slice(0, -1), scene]);
   }, []);
-  const reset = useCallback6((scene) => {
+  const reset = useCallback7((scene) => {
     setStack([scene]);
   }, []);
-  const has = useCallback6(
+  const has = useCallback7(
     (scene) => {
       return stack.includes(scene);
     },
@@ -10005,20 +10473,20 @@ function useSceneManager(initialScene) {
 }
 
 // src/hooks/useSceneTransition.ts
-import { useState as useState13, useCallback as useCallback7, useRef as useRef25, useEffect as useEffect60 } from "react";
+import { useState as useState14, useCallback as useCallback8, useRef as useRef26, useEffect as useEffect62 } from "react";
 function useSceneTransition(initialScene, defaultTransition) {
-  const [stack, setStack] = useState13([initialScene]);
-  const [transState, setTransState] = useState13({
+  const [stack, setStack] = useState14([initialScene]);
+  const [transState, setTransState] = useState14({
     phase: "idle",
     progress: 0,
     effect: null,
     pendingAction: null
   });
-  const stackRef = useRef25(stack);
+  const stackRef = useRef26(stack);
   stackRef.current = stack;
-  const transRef = useRef25(transState);
+  const transRef = useRef26(transState);
   transRef.current = transState;
-  useEffect60(() => {
+  useEffect62(() => {
     if (transState.phase === "idle") return;
     const effect = transState.effect;
     if (!effect || effect.type === "instant") return;
@@ -10047,7 +10515,7 @@ function useSceneTransition(initialScene, defaultTransition) {
     rafId2 = requestAnimationFrame(animate);
     return () => cancelAnimationFrame(rafId2);
   }, [transState.phase, transState.effect]);
-  const startTransition = useCallback7(
+  const startTransition = useCallback8(
     (effect, action) => {
       const eff = effect ?? defaultTransition ?? { type: "instant" };
       if (eff.type === "instant" || isReducedMotionPreferred()) {
@@ -10063,13 +10531,13 @@ function useSceneTransition(initialScene, defaultTransition) {
     },
     [defaultTransition]
   );
-  const push = useCallback7(
+  const push = useCallback8(
     (scene, transition) => {
       startTransition(transition, () => setStack((prev) => [...prev, scene]));
     },
     [startTransition]
   );
-  const pop = useCallback7(
+  const pop = useCallback8(
     (transition) => {
       const prev = stackRef.current;
       if (prev.length <= 1) return void 0;
@@ -10079,13 +10547,13 @@ function useSceneTransition(initialScene, defaultTransition) {
     },
     [startTransition]
   );
-  const replace = useCallback7(
+  const replace = useCallback8(
     (scene, transition) => {
       startTransition(transition, () => setStack((prev) => [...prev.slice(0, -1), scene]));
     },
     [startTransition]
   );
-  const reset = useCallback7(
+  const reset = useCallback8(
     (scene, transition) => {
       startTransition(transition, () => setStack([scene]));
     },
@@ -10186,10 +10654,10 @@ function SceneTransitionOverlay({ controls }) {
 }
 
 // src/hooks/useHitstop.ts
-import { useContext as useContext51, useCallback as useCallback8 } from "react";
+import { useContext as useContext53, useCallback as useCallback9 } from "react";
 function useHitstop() {
-  const engine = useContext51(EngineContext);
-  const freeze = useCallback8(
+  const engine = useContext53(EngineContext);
+  const freeze = useCallback9(
     (seconds) => {
       engine.loop.hitPause(seconds);
     },
@@ -10199,16 +10667,16 @@ function useHitstop() {
 }
 
 // src/hooks/useInputBuffer.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 function useInputBuffer(opts) {
-  return useMemo9(() => new InputBuffer(opts), []);
+  return useMemo10(() => new InputBuffer(opts), []);
 }
 
 // src/hooks/useComboDetector.ts
-import { useMemo as useMemo10, useRef as useRef26 } from "react";
+import { useMemo as useMemo11, useRef as useRef27 } from "react";
 function useComboDetector(combos) {
-  const lastComboRef = useRef26(null);
-  const result = useMemo10(() => {
+  const lastComboRef = useRef27(null);
+  const result = useMemo11(() => {
     const detector = new ComboDetector({ combos });
     const api = {
       feed(action) {
@@ -10230,11 +10698,11 @@ function useComboDetector(combos) {
 }
 
 // src/hooks/useParent.ts
-import { useEffect as useEffect61, useContext as useContext52 } from "react";
+import { useEffect as useEffect63, useContext as useContext54 } from "react";
 function useParent(childEntityId, parentEntityId) {
-  const engine = useContext52(EngineContext);
+  const engine = useContext54(EngineContext);
   if (!engine) throw new Error("useParent must be used inside <Game>");
-  useEffect61(() => {
+  useEffect63(() => {
     setParent(engine.ecs, childEntityId, parentEntityId);
     return () => {
       removeParent(engine.ecs, childEntityId);
@@ -10243,7 +10711,7 @@ function useParent(childEntityId, parentEntityId) {
 }
 
 // src/hooks/useAccessibility.ts
-import { useCallback as useCallback9, useSyncExternalStore } from "react";
+import { useCallback as useCallback10, useSyncExternalStore } from "react";
 var _version = 0;
 var _listeners = /* @__PURE__ */ new Set();
 function subscribe(cb) {
@@ -10255,12 +10723,12 @@ function getSnapshot() {
 }
 function useAccessibility() {
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const setOptions = useCallback9((opts) => {
+  const setOptions = useCallback10((opts) => {
     setAccessibilityOptions(opts);
     _version++;
     for (const cb of _listeners) cb();
   }, []);
-  const announce = useCallback9((text, priority) => {
+  const announce = useCallback10((text, priority) => {
     announceToScreenReader(text, priority);
   }, []);
   return {
@@ -10271,18 +10739,18 @@ function useAccessibility() {
 }
 
 // src/hooks/useHMR.ts
-import { useEffect as useEffect62, useRef as useRef27, useMemo as useMemo11 } from "react";
+import { useEffect as useEffect64, useRef as useRef28, useMemo as useMemo12 } from "react";
 var idCounter = 0;
 function useHMR(hmrKey) {
-  const idRef = useRef27(null);
+  const idRef = useRef28(null);
   if (idRef.current === null) {
     idRef.current = hmrKey ?? `__hmr_${idCounter++}`;
   }
   const key = idRef.current;
   const isHotReload = hmrLoadState(key) !== void 0;
-  const disposeRef = useRef27(null);
-  const acceptRef = useRef27(null);
-  useEffect62(() => {
+  const disposeRef = useRef28(null);
+  const acceptRef = useRef28(null);
+  useEffect64(() => {
     const hot = import.meta.hot;
     if (!hot) return;
     hot.dispose(() => {
@@ -10296,7 +10764,7 @@ function useHMR(hmrKey) {
       acceptRef.current(prev);
     }
   }, [key]);
-  return useMemo11(
+  return useMemo12(
     () => ({
       onDispose(handler) {
         disposeRef.current = handler;
@@ -10315,11 +10783,11 @@ function useHMR(hmrKey) {
 }
 
 // src/hooks/useSquashStretch.ts
-import { useCallback as useCallback10, useContext as useContext53 } from "react";
+import { useCallback as useCallback11, useContext as useContext55 } from "react";
 function useSquashStretch() {
-  const engine = useContext53(EngineContext);
-  const entityId = useContext53(EntityContext);
-  const trigger = useCallback10(
+  const engine = useContext55(EngineContext);
+  const entityId = useContext55(EntityContext);
+  const trigger = useCallback11(
     (scaleX, scaleY) => {
       const ss = engine.ecs.getComponent(entityId, "SquashStretch");
       if (!ss) return;
@@ -10332,16 +10800,16 @@ function useSquashStretch() {
 }
 
 // src/hooks/useHistory.ts
-import { useCallback as useCallback11, useContext as useContext54, useEffect as useEffect63, useRef as useRef28, useState as useState14 } from "react";
+import { useCallback as useCallback12, useContext as useContext56, useEffect as useEffect65, useRef as useRef29, useState as useState15 } from "react";
 function useHistory(options) {
-  const engine = useContext54(EngineContext);
+  const engine = useContext56(EngineContext);
   const capacity = options?.capacity ?? 50;
   const bindKeys = options?.bindKeyboardShortcuts ?? false;
-  const stackRef = useRef28([]);
-  const indexRef = useRef28(-1);
-  const [version, setVersion] = useState14(0);
-  const bump = useCallback11(() => setVersion((v) => v + 1), []);
-  const push = useCallback11(() => {
+  const stackRef = useRef29([]);
+  const indexRef = useRef29(-1);
+  const [version, setVersion] = useState15(0);
+  const bump = useCallback12(() => setVersion((v) => v + 1), []);
+  const push = useCallback12(() => {
     const snap = engine.ecs.getSnapshot();
     const stack = stackRef.current;
     if (indexRef.current < stack.length - 1) {
@@ -10352,14 +10820,14 @@ function useHistory(options) {
     indexRef.current = stack.length - 1;
     bump();
   }, [engine, capacity, bump]);
-  const undo = useCallback11(() => {
+  const undo = useCallback12(() => {
     if (indexRef.current <= 0) return;
     indexRef.current -= 1;
     engine.ecs.restoreSnapshot(stackRef.current[indexRef.current]);
     engine.loop.markDirty();
     bump();
   }, [engine, bump]);
-  const redo = useCallback11(() => {
+  const redo = useCallback12(() => {
     const stack = stackRef.current;
     if (indexRef.current >= stack.length - 1) return;
     indexRef.current += 1;
@@ -10367,12 +10835,12 @@ function useHistory(options) {
     engine.loop.markDirty();
     bump();
   }, [engine, bump]);
-  const clear = useCallback11(() => {
+  const clear = useCallback12(() => {
     stackRef.current = [];
     indexRef.current = -1;
     bump();
   }, [bump]);
-  useEffect63(() => {
+  useEffect65(() => {
     if (!bindKeys) return;
     const onKey = (e) => {
       const mod = e.ctrlKey || e.metaKey;
@@ -10397,13 +10865,13 @@ function useHistory(options) {
 }
 
 // src/hooks/useSelection.tsx
-import { createContext as createContext2, useCallback as useCallback12, useContext as useContext55, useEffect as useEffect64, useMemo as useMemo12, useState as useState15 } from "react";
+import { createContext as createContext2, useCallback as useCallback13, useContext as useContext57, useEffect as useEffect66, useMemo as useMemo13, useState as useState16 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var SelectionContext = createContext2(null);
 function Selection({ initial, onChange, children }) {
-  const engine = useContext55(EngineContext);
-  const [selected, setSelected] = useState15(initial ?? []);
-  useEffect64(() => {
+  const engine = useContext57(EngineContext);
+  const [selected, setSelected] = useState16(initial ?? []);
+  useEffect66(() => {
     if (!engine) return;
     return engine.ecs.onDestroyEntity((destroyedId) => {
       setSelected((prev) => {
@@ -10414,14 +10882,14 @@ function Selection({ initial, onChange, children }) {
       });
     });
   }, [engine, onChange]);
-  const commit = useCallback12(
+  const commit = useCallback13(
     (next) => {
       setSelected(next);
       onChange?.(next);
     },
     [onChange]
   );
-  const select = useCallback12(
+  const select = useCallback13(
     (id, opts) => {
       if (opts?.additive) {
         setSelected((prev) => {
@@ -10436,7 +10904,7 @@ function Selection({ initial, onChange, children }) {
     },
     [commit, onChange]
   );
-  const deselect = useCallback12(
+  const deselect = useCallback13(
     (id) => {
       setSelected((prev) => {
         if (!prev.includes(id)) return prev;
@@ -10447,7 +10915,7 @@ function Selection({ initial, onChange, children }) {
     },
     [onChange]
   );
-  const toggle = useCallback12(
+  const toggle = useCallback13(
     (id) => {
       setSelected((prev) => {
         const next = prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id];
@@ -10457,25 +10925,25 @@ function Selection({ initial, onChange, children }) {
     },
     [onChange]
   );
-  const clear = useCallback12(() => commit([]), [commit]);
-  const isSelected = useCallback12((id) => selected.includes(id), [selected]);
-  const value = useMemo12(
+  const clear = useCallback13(() => commit([]), [commit]);
+  const isSelected = useCallback13((id) => selected.includes(id), [selected]);
+  const value = useMemo13(
     () => ({ selected, select, deselect, toggle, clear, isSelected }),
     [selected, select, deselect, toggle, clear, isSelected]
   );
   return /* @__PURE__ */ jsx15(SelectionContext.Provider, { value, children });
 }
 function useSelection() {
-  const ctx = useContext55(SelectionContext);
+  const ctx = useContext57(SelectionContext);
   if (!ctx) throw new Error("useSelection must be used inside a <Selection> provider");
   return ctx;
 }
 
 // src/components/TransformHandles.tsx
-import { useContext as useContext56, useEffect as useEffect66, useRef as useRef29 } from "react";
+import { useContext as useContext58, useEffect as useEffect68, useRef as useRef30 } from "react";
 
 // src/hooks/useOverlayTick.ts
-import { useEffect as useEffect65 } from "react";
+import { useEffect as useEffect67 } from "react";
 var callbacks = /* @__PURE__ */ new Set();
 var rafId = 0;
 function tick() {
@@ -10498,7 +10966,7 @@ function register(cb) {
   };
 }
 function useOverlayTick(callback, deps = []) {
-  useEffect65(() => {
+  useEffect67(() => {
     return register(callback);
   }, deps);
 }
@@ -10512,10 +10980,10 @@ function TransformHandles({
   color = "#4fc3f7",
   handleSize = 10
 }) {
-  const engine = useContext56(EngineContext);
+  const engine = useContext58(EngineContext);
   const selection = useSelection();
-  const overlayRef = useRef29(null);
-  const dragRef = useRef29(null);
+  const overlayRef = useRef30(null);
+  const dragRef = useRef30(null);
   useOverlayTick(() => {
     if (!engine) return;
     const overlay = overlayRef.current;
@@ -10550,7 +11018,7 @@ function TransformHandles({
       node.style.transform = `translate(-50%, -50%) rotate(${t.rotation}rad)`;
     }
   }, [engine, selection.selected]);
-  useEffect66(() => {
+  useEffect68(() => {
     if (!engine) return;
     const onMove = (e) => {
       const drag = dragRef.current;
@@ -10774,15 +11242,15 @@ function worldToScreenCss(engine, wx, wy) {
 }
 
 // src/hooks/useSnap.ts
-import { useCallback as useCallback13, useContext as useContext57 } from "react";
+import { useCallback as useCallback14, useContext as useContext59 } from "react";
 function useSnap(options) {
-  const engine = useContext57(EngineContext);
+  const engine = useContext59(EngineContext);
   const gridX = typeof options?.grid === "number" ? options.grid : options?.grid?.x ?? 0;
   const gridY = typeof options?.grid === "number" ? options.grid : options?.grid?.y ?? 0;
   const snapToEntities = options?.snapToEntities ?? false;
   const threshold = options?.threshold ?? 8;
   const exclude = options?.exclude;
-  const snapToGrid = useCallback13(
+  const snapToGrid = useCallback14(
     (x, y) => {
       const sx = gridX > 0 ? Math.round(x / gridX) * gridX : x;
       const sy = gridY > 0 ? Math.round(y / gridY) * gridY : y;
@@ -10790,7 +11258,7 @@ function useSnap(options) {
     },
     [gridX, gridY]
   );
-  const snap = useCallback13(
+  const snap = useCallback14(
     (x, y) => {
       let outX = x;
       let outY = y;
@@ -10865,7 +11333,7 @@ function getBounds(ecs, id) {
 }
 
 // src/components/EditableText.tsx
-import { useContext as useContext58, useEffect as useEffect67, useRef as useRef30 } from "react";
+import { useContext as useContext60, useEffect as useEffect69, useRef as useRef31 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function EditableText({
   value,
@@ -10887,10 +11355,10 @@ function EditableText({
   autoFocus = false,
   disabled = false
 }) {
-  const engine = useContext58(EngineContext);
-  const entityId = useContext58(EntityContext);
-  const containerRef = useRef30(null);
-  const inputRef = useRef30(null);
+  const engine = useContext60(EngineContext);
+  const entityId = useContext60(EntityContext);
+  const containerRef = useRef31(null);
+  const inputRef = useRef31(null);
   useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const container = containerRef.current;
@@ -10917,7 +11385,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]);
-  useEffect67(() => {
+  useEffect69(() => {
     if (autoFocus) inputRef.current?.focus();
   }, [autoFocus]);
   if (!engine) return null;
@@ -11048,7 +11516,7 @@ function copyRegion(source, region, scale) {
 }
 
 // src/components/A11yNode.tsx
-import { useContext as useContext59, useRef as useRef31 } from "react";
+import { useContext as useContext61, useRef as useRef32 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function A11yNode({
   label,
@@ -11062,9 +11530,9 @@ function A11yNode({
   selected,
   bounds
 }) {
-  const engine = useContext59(EngineContext);
-  const entityId = useContext59(EntityContext);
-  const nodeRef = useRef31(null);
+  const engine = useContext61(EngineContext);
+  const entityId = useContext61(EntityContext);
+  const nodeRef = useRef32(null);
   useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const node = nodeRef.current;
@@ -11153,7 +11621,7 @@ function worldToScreenCss3(engine, wx, wy) {
 }
 
 // src/components/VectorPath.tsx
-import { useContext as useContext60, useRef as useRef32 } from "react";
+import { useContext as useContext62, useRef as useRef33 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function VectorPath({
   d,
@@ -11167,9 +11635,9 @@ function VectorPath({
   opacity = 1,
   visible = true
 }) {
-  const engine = useContext60(EngineContext);
-  const entityId = useContext60(EntityContext);
-  const svgRef = useRef32(null);
+  const engine = useContext62(EngineContext);
+  const entityId = useContext62(EntityContext);
+  const svgRef = useRef33(null);
   useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const svg = svgRef.current;
@@ -11230,12 +11698,12 @@ function worldToScreenCss4(engine, wx, wy) {
 }
 
 // src/hooks/useGrid.ts
-import { useCallback as useCallback14, useContext as useContext61, useMemo as useMemo13, useRef as useRef33, useState as useState16 } from "react";
+import { useCallback as useCallback15, useContext as useContext63, useMemo as useMemo14, useRef as useRef34, useState as useState17 } from "react";
 function useGrid({ width, height, fill }) {
-  const engine = useContext61(EngineContext);
-  const [version, setVersion] = useState16(0);
-  const bump = useCallback14(() => setVersion((v) => v + 1), []);
-  const dataRef = useRef33(null);
+  const engine = useContext63(EngineContext);
+  const [version, setVersion] = useState17(0);
+  const bump = useCallback15(() => setVersion((v) => v + 1), []);
+  const dataRef = useRef34(null);
   if (dataRef.current === null) {
     const arr = new Array(width * height);
     if (typeof fill === "function") {
@@ -11250,19 +11718,19 @@ function useGrid({ width, height, fill }) {
     }
     dataRef.current = arr;
   }
-  const markChanged = useCallback14(() => {
+  const markChanged = useCallback15(() => {
     engine?.loop.markDirty();
     bump();
   }, [engine, bump]);
-  const inBounds = useCallback14((x, y) => x >= 0 && y >= 0 && x < width && y < height, [width, height]);
-  const get = useCallback14(
+  const inBounds = useCallback15((x, y) => x >= 0 && y >= 0 && x < width && y < height, [width, height]);
+  const get = useCallback15(
     (x, y) => {
       if (!inBounds(x, y)) return void 0;
       return dataRef.current[y * width + x];
     },
     [width, inBounds]
   );
-  const set = useCallback14(
+  const set = useCallback15(
     (x, y, value) => {
       if (!inBounds(x, y)) return;
       const data = dataRef.current;
@@ -11273,7 +11741,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, inBounds, markChanged]
   );
-  const swap = useCallback14(
+  const swap = useCallback15(
     (ax, ay, bx, by) => {
       if (!inBounds(ax, ay) || !inBounds(bx, by)) return;
       const data = dataRef.current;
@@ -11287,7 +11755,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, inBounds, markChanged]
   );
-  const forEach = useCallback14(
+  const forEach = useCallback15(
     (cb) => {
       const data = dataRef.current;
       for (let y = 0; y < height; y++) {
@@ -11298,7 +11766,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, height]
   );
-  const find = useCallback14(
+  const find = useCallback15(
     (pred) => {
       const data = dataRef.current;
       for (let y = 0; y < height; y++) {
@@ -11311,7 +11779,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, height]
   );
-  const count = useCallback14(
+  const count = useCallback15(
     (pred) => {
       const data = dataRef.current;
       let n = 0;
@@ -11324,7 +11792,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, height]
   );
-  const neighbors = useCallback14(
+  const neighbors = useCallback15(
     (x, y, diagonal = false) => {
       const data = dataRef.current;
       const result = [];
@@ -11352,7 +11820,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, inBounds]
   );
-  const fillAll = useCallback14(
+  const fillAll = useCallback15(
     (value) => {
       const data = dataRef.current;
       if (typeof value === "function") {
@@ -11369,7 +11837,7 @@ function useGrid({ width, height, fill }) {
     },
     [width, height, markChanged]
   );
-  const toArray = useCallback14(() => {
+  const toArray = useCallback15(() => {
     const data = dataRef.current;
     const out = new Array(height);
     for (let y = 0; y < height; y++) {
@@ -11379,7 +11847,7 @@ function useGrid({ width, height, fill }) {
     }
     return out;
   }, [width, height]);
-  const fromArray = useCallback14(
+  const fromArray = useCallback15(
     (arr) => {
       const data = dataRef.current;
       for (let y = 0; y < height; y++) {
@@ -11394,7 +11862,7 @@ function useGrid({ width, height, fill }) {
     [width, height, markChanged]
   );
   void version;
-  return useMemo13(
+  return useMemo14(
     () => ({
       width,
       height,
@@ -11415,7 +11883,7 @@ function useGrid({ width, height, fill }) {
 }
 
 // src/hooks/useTurnSystem.ts
-import { useCallback as useCallback15, useContext as useContext62, useEffect as useEffect68, useMemo as useMemo14, useRef as useRef34, useState as useState17 } from "react";
+import { useCallback as useCallback16, useContext as useContext64, useEffect as useEffect70, useMemo as useMemo15, useRef as useRef35, useState as useState18 } from "react";
 function useTurnSystem({
   players,
   initialIndex = 0,
@@ -11424,15 +11892,15 @@ function useTurnSystem({
   aiDelay = 0
 }) {
   if (players.length === 0) throw new Error("useTurnSystem requires at least one player");
-  const engine = useContext62(EngineContext);
-  const [activeIndex, setActiveIndex] = useState17(initialIndex % players.length);
-  const [turn, setTurn] = useState17(0);
-  const [isPending, setIsPending] = useState17(false);
-  const pendingRafId = useRef34(null);
-  const pendingRemaining = useRef34(0);
-  const pendingTarget = useRef34(null);
-  const pendingLastTime = useRef34(0);
-  const clearPending = useCallback15(() => {
+  const engine = useContext64(EngineContext);
+  const [activeIndex, setActiveIndex] = useState18(initialIndex % players.length);
+  const [turn, setTurn] = useState18(0);
+  const [isPending, setIsPending] = useState18(false);
+  const pendingRafId = useRef35(null);
+  const pendingRemaining = useRef35(0);
+  const pendingTarget = useRef35(null);
+  const pendingLastTime = useRef35(0);
+  const clearPending = useCallback16(() => {
     if (pendingRafId.current !== null) {
       cancelAnimationFrame(pendingRafId.current);
       pendingRafId.current = null;
@@ -11440,13 +11908,13 @@ function useTurnSystem({
     pendingTarget.current = null;
     setIsPending(false);
   }, []);
-  const startedOnce = useRef34(false);
-  useEffect68(() => {
+  const startedOnce = useRef35(false);
+  useEffect70(() => {
     if (startedOnce.current) return;
     startedOnce.current = true;
     onTurnStart?.({ player: players[activeIndex], index: activeIndex, turn: 0 });
   }, []);
-  const applyChange = useCallback15(
+  const applyChange = useCallback16(
     (nextIndex) => {
       const curr = players[activeIndex];
       onTurnEnd?.({ player: curr, index: activeIndex, turn });
@@ -11459,7 +11927,7 @@ function useTurnSystem({
     },
     [players, activeIndex, turn, onTurnStart, onTurnEnd, engine]
   );
-  const scheduleChange = useCallback15(
+  const scheduleChange = useCallback16(
     (nextIndex) => {
       clearPending();
       if (aiDelay <= 0) {
@@ -11491,9 +11959,9 @@ function useTurnSystem({
     },
     [aiDelay, applyChange, clearPending, engine]
   );
-  const nextTurn = useCallback15(() => scheduleChange(activeIndex + 1), [scheduleChange, activeIndex]);
-  const prevTurn = useCallback15(() => scheduleChange(activeIndex - 1), [scheduleChange, activeIndex]);
-  const skipTo = useCallback15(
+  const nextTurn = useCallback16(() => scheduleChange(activeIndex + 1), [scheduleChange, activeIndex]);
+  const prevTurn = useCallback16(() => scheduleChange(activeIndex - 1), [scheduleChange, activeIndex]);
+  const skipTo = useCallback16(
     (target) => {
       let idx;
       if (typeof target === "number") {
@@ -11506,19 +11974,19 @@ function useTurnSystem({
     },
     [players, scheduleChange]
   );
-  const reset = useCallback15(() => {
+  const reset = useCallback16(() => {
     clearPending();
     setActiveIndex(initialIndex % players.length);
     setTurn(0);
     engine?.loop.markDirty();
   }, [players.length, initialIndex, clearPending, engine]);
-  useEffect68(
+  useEffect70(
     () => () => {
       if (pendingRafId.current !== null) cancelAnimationFrame(pendingRafId.current);
     },
     []
   );
-  return useMemo14(
+  return useMemo15(
     () => ({
       activePlayer: players[activeIndex],
       activeIndex,
@@ -11534,13 +12002,13 @@ function useTurnSystem({
 }
 
 // src/hooks/useHoverable.ts
-import { useContext as useContext63, useEffect as useEffect69, useState as useState18 } from "react";
+import { useContext as useContext65, useEffect as useEffect71, useState as useState19 } from "react";
 function useHoverable(options) {
-  const engine = useContext63(EngineContext);
-  const ctxEntityId = useContext63(EntityContext);
+  const engine = useContext65(EngineContext);
+  const ctxEntityId = useContext65(EntityContext);
   const entityId = options?.entityId ?? ctxEntityId;
-  const [isHovered, setIsHovered] = useState18(false);
-  useEffect69(() => {
+  const [isHovered, setIsHovered] = useState19(false);
+  useEffect71(() => {
     if (!engine || entityId === null || entityId === void 0 || options?.disabled) return;
     const canvas = engine.canvas;
     let hovered = false;
@@ -11617,7 +12085,7 @@ function screenToWorld(engine, cssX, cssY) {
 }
 
 // src/hooks/useDragDrop.ts
-import { useContext as useContext64, useEffect as useEffect70, useRef as useRef35, useState as useState19 } from "react";
+import { useContext as useContext66, useEffect as useEffect72, useRef as useRef36, useState as useState20 } from "react";
 var dragStateByEngine = /* @__PURE__ */ new WeakMap();
 function getActiveDrag(engine) {
   return dragStateByEngine.get(engine) ?? null;
@@ -11637,14 +12105,14 @@ function subscribeToActiveDrag(engine, cb) {
   return () => dragStateByEngine.get(engine)?.subscribers.delete(cb);
 }
 function useDraggable(options) {
-  const engine = useContext64(EngineContext);
-  const ctxEntityId = useContext64(EntityContext);
+  const engine = useContext66(EngineContext);
+  const ctxEntityId = useContext66(EntityContext);
   const entityId = options?.entityId ?? ctxEntityId;
-  const [isDragging, setIsDragging] = useState19(false);
-  const [position, setPosition] = useState19({ x: 0, y: 0 });
-  const optsRef = useRef35(options);
+  const [isDragging, setIsDragging] = useState20(false);
+  const [position, setPosition] = useState20({ x: 0, y: 0 });
+  const optsRef = useRef36(options);
   optsRef.current = options;
-  useEffect70(() => {
+  useEffect72(() => {
     if (!engine || entityId === null || entityId === void 0 || options?.disabled) return;
     const canvas = engine.canvas;
     let dragging = false;
@@ -11749,14 +12217,14 @@ function useDraggable(options) {
   return { isDragging, position };
 }
 function useDroppable(options) {
-  const engine = useContext64(EngineContext);
-  const ctxEntityId = useContext64(EntityContext);
+  const engine = useContext66(EngineContext);
+  const ctxEntityId = useContext66(EntityContext);
   const entityId = options?.entityId ?? ctxEntityId;
-  const [isOver, setIsOver] = useState19(false);
-  const [hoveredBy, setHoveredBy] = useState19(null);
-  const optsRef = useRef35(options);
+  const [isOver, setIsOver] = useState20(false);
+  const [hoveredBy, setHoveredBy] = useState20(null);
+  const optsRef = useRef36(options);
   optsRef.current = options;
-  useEffect70(() => {
+  useEffect72(() => {
     if (!engine || entityId === null || entityId === void 0 || options?.disabled) return;
     let currentlyOver = false;
     const check = () => {
@@ -11858,7 +12326,7 @@ function findDroppableUnder(engine, drag) {
 }
 
 // src/hooks/useKeyboardFocus.ts
-import { useContext as useContext65, useEffect as useEffect71, useRef as useRef36, useState as useState20 } from "react";
+import { useContext as useContext67, useEffect as useEffect73, useRef as useRef37, useState as useState21 } from "react";
 var registry = /* @__PURE__ */ new Map();
 var focusedId = null;
 var subscribers = /* @__PURE__ */ new Set();
@@ -11874,10 +12342,10 @@ function setFocused(id) {
   notifyFocus();
 }
 function useFocusable(options) {
-  const entityIdCtx = useContext65(EntityContext);
-  const optsRef = useRef36(options);
+  const entityIdCtx = useContext67(EntityContext);
+  const optsRef = useRef37(options);
   optsRef.current = options;
-  useEffect71(() => {
+  useEffect73(() => {
     if (entityIdCtx === null || entityIdCtx === void 0) return;
     const id = entityIdCtx;
     const entry = {
@@ -11895,16 +12363,16 @@ function useFocusable(options) {
   }, [entityIdCtx]);
 }
 function useKeyboardFocus() {
-  const engine = useContext65(EngineContext);
-  const [focused, setFocusedState] = useState20(focusedId);
-  useEffect71(() => {
+  const engine = useContext67(EngineContext);
+  const [focused, setFocusedState] = useState21(focusedId);
+  useEffect73(() => {
     const cb = () => setFocusedState(focusedId);
     subscribers.add(cb);
     return () => {
       subscribers.delete(cb);
     };
   }, []);
-  useEffect71(() => {
+  useEffect73(() => {
     if (!engine) return;
     const onKey = (e) => {
       const target = e.target;
@@ -12030,7 +12498,7 @@ function subscribeFocus(cb) {
 }
 
 // src/components/FocusRing.tsx
-import { useContext as useContext66, useEffect as useEffect72, useRef as useRef37, useState as useState21 } from "react";
+import { useContext as useContext68, useEffect as useEffect74, useRef as useRef38, useState as useState22 } from "react";
 import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function FocusRing({
   color = "#4fc3f7",
@@ -12039,15 +12507,15 @@ function FocusRing({
   borderRadius = 4,
   pulse = true
 }) {
-  const engine = useContext66(EngineContext);
-  const ringRef = useRef37(null);
-  const [focused, setFocused2] = useState21(getFocusedEntityId());
-  const [reducedMotion, setReducedMotion] = useState21(false);
-  useEffect72(() => {
+  const engine = useContext68(EngineContext);
+  const ringRef = useRef38(null);
+  const [focused, setFocused2] = useState22(getFocusedEntityId());
+  const [reducedMotion, setReducedMotion] = useState22(false);
+  useEffect74(() => {
     const unsub = subscribeFocus(() => setFocused2(getFocusedEntityId()));
     return unsub;
   }, []);
-  useEffect72(() => {
+  useEffect74(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     setReducedMotion(mq.matches);
@@ -12184,10 +12652,10 @@ function listSavedScenes(prefix = "") {
 }
 
 // ../gameplay/src/hooks/useAnimationController.ts
-import { useState as useState22, useCallback as useCallback16 } from "react";
+import { useState as useState23, useCallback as useCallback17 } from "react";
 function useAnimationController(states, initial) {
-  const [stateName, setStateName] = useState22(initial);
-  const setState = useCallback16((next) => {
+  const [stateName, setStateName] = useState23(initial);
+  const setState = useCallback17((next) => {
     setStateName((prev) => prev === next ? prev : next);
   }, []);
   const clip = states[stateName] ?? states[initial];
@@ -12209,39 +12677,39 @@ function useAnimationController(states, initial) {
 }
 
 // ../gameplay/src/hooks/useAISteering.ts
-import { useCallback as useCallback17 } from "react";
+import { useCallback as useCallback18 } from "react";
 function useAISteering() {
-  const seek$ = useCallback17((pos, target, speed) => seek(pos, target, speed), []);
-  const flee$ = useCallback17((pos, threat, speed) => flee(pos, threat, speed), []);
-  const arrive$ = useCallback17(
+  const seek$ = useCallback18((pos, target, speed) => seek(pos, target, speed), []);
+  const flee$ = useCallback18((pos, threat, speed) => flee(pos, threat, speed), []);
+  const arrive$ = useCallback18(
     (pos, target, speed, slowRadius) => arrive(pos, target, speed, slowRadius),
     []
   );
-  const patrol$ = useCallback17(
+  const patrol$ = useCallback18(
     (pos, waypoints, speed, currentIdx, arriveThreshold) => patrol(pos, waypoints, speed, currentIdx, arriveThreshold),
     []
   );
-  const wander$ = useCallback17(
+  const wander$ = useCallback18(
     (pos, angle, speed, jitter) => wander(pos, angle, speed, jitter),
     []
   );
-  const pursuit$ = useCallback17(
+  const pursuit$ = useCallback18(
     (pos, targetPos, targetVel, speed, lookAhead) => pursuit(pos, targetPos, targetVel, speed, lookAhead),
     []
   );
-  const evade$ = useCallback17(
+  const evade$ = useCallback18(
     (pos, threatPos, threatVel, speed, lookAhead) => evade(pos, threatPos, threatVel, speed, lookAhead),
     []
   );
-  const separation$ = useCallback17(
+  const separation$ = useCallback18(
     (pos, neighbors, speed, radius) => separation(pos, neighbors, speed, radius),
     []
   );
-  const cohesion$ = useCallback17(
+  const cohesion$ = useCallback18(
     (pos, neighbors, speed) => cohesion(pos, neighbors, speed),
     []
   );
-  const alignment$ = useCallback17(
+  const alignment$ = useCallback18(
     (neighborVelocities, speed) => alignment(neighborVelocities, speed),
     []
   );
@@ -12260,9 +12728,9 @@ function useAISteering() {
 }
 
 // ../gameplay/src/hooks/useDamageZone.ts
-import { useContext as useContext67 } from "react";
+import { useContext as useContext69 } from "react";
 function useDamageZone(damage, opts = {}) {
-  const engine = useContext67(EngineContext);
+  const engine = useContext69(EngineContext);
   useTriggerEnter(
     (other) => {
       engine.events.emit(`damage:${other}`, { amount: damage });
@@ -12272,11 +12740,11 @@ function useDamageZone(damage, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useDropThrough.ts
-import { useContext as useContext68, useCallback as useCallback18 } from "react";
+import { useContext as useContext70, useCallback as useCallback19 } from "react";
 function useDropThrough(frames = 8) {
-  const engine = useContext68(EngineContext);
-  const entityId = useContext68(EntityContext);
-  const dropThrough = useCallback18(() => {
+  const engine = useContext70(EngineContext);
+  const entityId = useContext70(EntityContext);
+  const dropThrough = useCallback19(() => {
     const rb = engine.ecs.getComponent(entityId, "RigidBody");
     if (rb) rb.dropThrough = frames;
   }, [engine.ecs, entityId, frames]);
@@ -12284,17 +12752,17 @@ function useDropThrough(frames = 8) {
 }
 
 // ../gameplay/src/hooks/useGameStateMachine.ts
-import { useState as useState23, useRef as useRef38, useCallback as useCallback19, useEffect as useEffect73, useContext as useContext69 } from "react";
+import { useState as useState24, useRef as useRef39, useCallback as useCallback20, useEffect as useEffect75, useContext as useContext71 } from "react";
 function useGameStateMachine(states, initial) {
-  const engine = useContext69(EngineContext);
-  const [state, setState] = useState23(initial);
-  const stateRef = useRef38(initial);
-  const statesRef = useRef38(states);
+  const engine = useContext71(EngineContext);
+  const [state, setState] = useState24(initial);
+  const stateRef = useRef39(initial);
+  const statesRef = useRef39(states);
   statesRef.current = states;
-  useEffect73(() => {
+  useEffect75(() => {
     statesRef.current[initial]?.onEnter?.();
   }, []);
-  const transition = useCallback19((to) => {
+  const transition = useCallback20((to) => {
     const current = stateRef.current;
     if (current === to) return;
     statesRef.current[current]?.onExit?.();
@@ -12302,7 +12770,7 @@ function useGameStateMachine(states, initial) {
     setState(to);
     statesRef.current[to]?.onEnter?.();
   }, []);
-  useEffect73(() => {
+  useEffect75(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
       eid,
@@ -12318,27 +12786,27 @@ function useGameStateMachine(states, initial) {
 }
 
 // ../gameplay/src/hooks/useHealth.ts
-import { useRef as useRef39, useEffect as useEffect74, useContext as useContext70, useCallback as useCallback20 } from "react";
+import { useRef as useRef40, useEffect as useEffect76, useContext as useContext72, useCallback as useCallback21 } from "react";
 function useHealth(maxHp, opts = {}) {
-  const engine = useContext70(EngineContext);
-  const entityId = useContext70(EntityContext);
-  const hpRef = useRef39(maxHp);
-  const invincibleRef = useRef39(false);
+  const engine = useContext72(EngineContext);
+  const entityId = useContext72(EntityContext);
+  const hpRef = useRef40(maxHp);
+  const invincibleRef = useRef40(false);
   const iFrameDuration = opts.iFrames ?? 1;
-  const onDeathRef = useRef39(opts.onDeath);
-  const onDamageRef = useRef39(opts.onDamage);
-  useEffect74(() => {
+  const onDeathRef = useRef40(opts.onDeath);
+  const onDamageRef = useRef40(opts.onDamage);
+  useEffect76(() => {
     onDeathRef.current = opts.onDeath;
   });
-  useEffect74(() => {
+  useEffect76(() => {
     onDamageRef.current = opts.onDamage;
   });
-  const timerRef = useRef39(
+  const timerRef = useRef40(
     createTimer(iFrameDuration, () => {
       invincibleRef.current = false;
     })
   );
-  const takeDamage = useCallback20(
+  const takeDamage = useCallback21(
     (amount = 1) => {
       if (invincibleRef.current || hpRef.current <= 0) return;
       hpRef.current = Math.max(0, hpRef.current - amount);
@@ -12351,28 +12819,28 @@ function useHealth(maxHp, opts = {}) {
     },
     [iFrameDuration]
   );
-  const takeDamageRef = useRef39(takeDamage);
-  useEffect74(() => {
+  const takeDamageRef = useRef40(takeDamage);
+  useEffect76(() => {
     takeDamageRef.current = takeDamage;
   }, [takeDamage]);
-  useEffect74(() => {
+  useEffect76(() => {
     return engine.events.on(`damage:${entityId}`, ({ amount }) => {
       takeDamageRef.current(amount);
     });
   }, [engine.events, entityId]);
-  const heal = useCallback20(
+  const heal = useCallback21(
     (amount) => {
       hpRef.current = Math.min(maxHp, hpRef.current + amount);
     },
     [maxHp]
   );
-  const setHp = useCallback20(
+  const setHp = useCallback21(
     (hp) => {
       hpRef.current = Math.min(maxHp, Math.max(0, hp));
     },
     [maxHp]
   );
-  const update = useCallback20((dt) => {
+  const update = useCallback21((dt) => {
     timerRef.current.update(dt);
   }, []);
   return {
@@ -12396,11 +12864,11 @@ function useHealth(maxHp, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useKinematicBody.ts
-import { useContext as useContext71, useCallback as useCallback21 } from "react";
+import { useContext as useContext73, useCallback as useCallback22 } from "react";
 function useKinematicBody() {
-  const engine = useContext71(EngineContext);
-  const entityId = useContext71(EntityContext);
-  const moveAndCollide = useCallback21(
+  const engine = useContext73(EngineContext);
+  const entityId = useContext73(EntityContext);
+  const moveAndCollide = useCallback22(
     (dx, dy) => {
       const transform = engine.ecs.getComponent(entityId, "Transform");
       if (!transform) return { dx: 0, dy: 0 };
@@ -12436,7 +12904,7 @@ function useKinematicBody() {
     },
     [engine.ecs, entityId]
   );
-  const setVelocity = useCallback21(
+  const setVelocity = useCallback22(
     (vx, vy) => {
       const rb = engine.ecs.getComponent(entityId, "RigidBody");
       if (rb) {
@@ -12446,7 +12914,7 @@ function useKinematicBody() {
     },
     [engine.ecs, entityId]
   );
-  const setAngularVelocity = useCallback21(
+  const setAngularVelocity = useCallback22(
     (w) => {
       const rb = engine.ecs.getComponent(entityId, "RigidBody");
       if (rb) rb.angularVelocity = w;
@@ -12457,12 +12925,12 @@ function useKinematicBody() {
 }
 
 // ../gameplay/src/hooks/useLevelTransition.ts
-import { useState as useState24, useRef as useRef40, useCallback as useCallback22 } from "react";
+import { useState as useState25, useRef as useRef41, useCallback as useCallback23 } from "react";
 function useLevelTransition(initial) {
-  const [currentLevel, setCurrentLevel] = useState24(initial);
-  const [isTransitioning, setIsTransitioning] = useState24(false);
-  const overlayRef = useRef40(null);
-  const transitionTo = useCallback22((level, opts = {}) => {
+  const [currentLevel, setCurrentLevel] = useState25(initial);
+  const [isTransitioning, setIsTransitioning] = useState25(false);
+  const overlayRef = useRef41(null);
+  const transitionTo = useCallback23((level, opts = {}) => {
     const { duration = 0.4, type = "fade" } = opts;
     if (type === "instant") {
       setCurrentLevel(level);
@@ -12499,13 +12967,13 @@ function useLevelTransition(initial) {
 }
 
 // ../gameplay/src/hooks/usePlatformerController.ts
-import { useContext as useContext72, useEffect as useEffect75 } from "react";
+import { useContext as useContext74, useEffect as useEffect77 } from "react";
 function normalizeKeys(val, defaults) {
   if (!val) return defaults;
   return Array.isArray(val) ? val : [val];
 }
 function usePlatformerController(entityId, opts = {}) {
-  const engine = useContext72(EngineContext);
+  const engine = useContext74(EngineContext);
   const {
     speed = 200,
     jumpForce = -500,
@@ -12523,7 +12991,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"]);
-  useEffect75(() => {
+  useEffect77(() => {
     const state = {
       coyoteTimer: 0,
       jumpBuffer: 0,
@@ -12587,26 +13055,26 @@ function usePlatformerController(entityId, opts = {}) {
 }
 
 // ../gameplay/src/hooks/usePathfinding.ts
-import { useCallback as useCallback23 } from "react";
+import { useCallback as useCallback24 } from "react";
 function usePathfinding() {
-  const createGrid$ = useCallback23(
+  const createGrid$ = useCallback24(
     (cols, rows, cellSize) => createNavGrid(cols, rows, cellSize),
     []
   );
-  const setWalkable$ = useCallback23(
+  const setWalkable$ = useCallback24(
     (grid, col, row, walkable) => setWalkable(grid, col, row, walkable),
     []
   );
-  const findPath$ = useCallback23((grid, start2, goal) => findPath(grid, start2, goal), []);
+  const findPath$ = useCallback24((grid, start2, goal) => findPath(grid, start2, goal), []);
   return { createGrid: createGrid$, setWalkable: setWalkable$, findPath: findPath$ };
 }
 
 // ../gameplay/src/hooks/usePersistedBindings.ts
-import { useState as useState25, useCallback as useCallback24, useMemo as useMemo15, useContext as useContext73 } from "react";
+import { useState as useState26, useCallback as useCallback25, useMemo as useMemo16, useContext as useContext75 } from "react";
 function usePersistedBindings(storageKey, defaults) {
-  const engine = useContext73(EngineContext);
+  const engine = useContext75(EngineContext);
   const input = engine.input;
-  const [bindings, setBindings] = useState25(() => {
+  const [bindings, setBindings] = useState26(() => {
     try {
       const stored = localStorage.getItem(storageKey);
       if (stored) return { ...defaults, ...JSON.parse(stored) };
@@ -12614,7 +13082,7 @@ function usePersistedBindings(storageKey, defaults) {
     }
     return defaults;
   });
-  const normalized = useMemo15(() => {
+  const normalized = useMemo16(() => {
     const out = {};
     for (const [action, keys] of Object.entries(bindings)) {
       if (typeof keys === "string") out[action] = [keys];
@@ -12622,7 +13090,7 @@ function usePersistedBindings(storageKey, defaults) {
     }
     return out;
   }, [bindings]);
-  const rebind = useCallback24(
+  const rebind = useCallback25(
     (action, keys) => {
       setBindings((prev) => {
         const next = { ...prev, [action]: Array.isArray(keys) ? keys : [keys] };
@@ -12635,14 +13103,14 @@ function usePersistedBindings(storageKey, defaults) {
     },
     [storageKey]
   );
-  const reset = useCallback24(() => {
+  const reset = useCallback25(() => {
     try {
       localStorage.removeItem(storageKey);
     } catch {
     }
     setBindings(defaults);
   }, [storageKey]);
-  return useMemo15(
+  return useMemo16(
     () => ({
       bindings,
       rebind,
@@ -12656,21 +13124,21 @@ function usePersistedBindings(storageKey, defaults) {
 }
 
 // ../gameplay/src/hooks/useRestart.ts
-import { useState as useState26, useCallback as useCallback25 } from "react";
+import { useState as useState27, useCallback as useCallback26 } from "react";
 function useRestart() {
-  const [restartKey, setRestartKey] = useState26(0);
-  const restart = useCallback25(() => {
+  const [restartKey, setRestartKey] = useState27(0);
+  const restart = useCallback26(() => {
     setRestartKey((k) => k + 1);
   }, []);
   return { restartKey, restart };
 }
 
 // ../gameplay/src/hooks/useSave.ts
-import { useCallback as useCallback26, useRef as useRef41 } from "react";
+import { useCallback as useCallback27, useRef as useRef42 } from "react";
 function useSave(key, defaultValue, opts = {}) {
   const version = opts.version ?? 1;
-  const dataRef = useRef41(defaultValue);
-  const save = useCallback26(
+  const dataRef = useRef42(defaultValue);
+  const save = useCallback27(
     (value) => {
       dataRef.current = value;
       const slot = { version, data: value };
@@ -12682,7 +13150,7 @@ function useSave(key, defaultValue, opts = {}) {
     },
     [key, version]
   );
-  const load = useCallback26(() => {
+  const load = useCallback27(() => {
     try {
       const raw = localStorage.getItem(key);
       if (!raw) return defaultValue;
@@ -12702,11 +13170,11 @@ function useSave(key, defaultValue, opts = {}) {
       return defaultValue;
     }
   }, [key, version]);
-  const clear = useCallback26(() => {
+  const clear = useCallback27(() => {
     localStorage.removeItem(key);
     dataRef.current = defaultValue;
   }, [key]);
-  const exists = useCallback26(() => {
+  const exists = useCallback27(() => {
     return localStorage.getItem(key) !== null;
   }, [key]);
   return {
@@ -12721,7 +13189,7 @@ function useSave(key, defaultValue, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useIDBSave.ts
-import { useCallback as useCallback27, useRef as useRef42 } from "react";
+import { useCallback as useCallback28, useRef as useRef43 } from "react";
 var DB_NAME = "cubeforge-saves";
 var STORE_NAME = "saves";
 function openDB() {
@@ -12739,12 +13207,12 @@ function openDB() {
 }
 function useIDBSave(key, defaultValue, opts = {}) {
   const version = opts.version ?? 1;
-  const dbRef = useRef42(null);
-  const getDB = useCallback27(() => {
+  const dbRef = useRef43(null);
+  const getDB = useCallback28(() => {
     if (!dbRef.current) dbRef.current = openDB();
     return dbRef.current;
   }, []);
-  const save = useCallback27(
+  const save = useCallback28(
     async (value) => {
       const db = await getDB();
       const slot = { version, data: value };
@@ -12757,7 +13225,7 @@ function useIDBSave(key, defaultValue, opts = {}) {
     },
     [getDB, key, version]
   );
-  const load = useCallback27(async () => {
+  const load = useCallback28(async () => {
     const db = await getDB();
     return new Promise((resolve, reject) => {
       const tx = db.transaction(STORE_NAME, "readonly");
@@ -12783,7 +13251,7 @@ function useIDBSave(key, defaultValue, opts = {}) {
       req.onerror = () => reject(req.error);
     });
   }, [getDB, key, version]);
-  const clear = useCallback27(async () => {
+  const clear = useCallback28(async () => {
     const db = await getDB();
     return new Promise((resolve, reject) => {
       const tx = db.transaction(STORE_NAME, "readwrite");
@@ -12792,7 +13260,7 @@ function useIDBSave(key, defaultValue, opts = {}) {
       req.onerror = () => reject(req.error);
     });
   }, [getDB, key]);
-  const exists = useCallback27(async () => {
+  const exists = useCallback28(async () => {
     const db = await getDB();
     return new Promise((resolve, reject) => {
       const tx = db.transaction(STORE_NAME, "readonly");
@@ -12805,16 +13273,16 @@ function useIDBSave(key, defaultValue, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useTopDownMovement.ts
-import { useContext as useContext74, useEffect as useEffect76 } from "react";
+import { useContext as useContext76, useEffect as useEffect78 } from "react";
 function moveToward(current, target, maxDelta) {
   const diff = target - current;
   if (Math.abs(diff) <= maxDelta) return target;
   return current + Math.sign(diff) * maxDelta;
 }
 function useTopDownMovement(entityId, opts = {}) {
-  const engine = useContext74(EngineContext);
+  const engine = useContext76(EngineContext);
   const { speed = 200, normalizeDiagonal = true, acceleration = Infinity, deceleration = acceleration } = opts;
-  useEffect76(() => {
+  useEffect78(() => {
     const updateFn = (id, world, input, dt) => {
       if (!world.hasEntity(id)) return;
       const rb = world.getComponent(id, "RigidBody");
@@ -12854,18 +13322,18 @@ function useTopDownMovement(entityId, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useDialogue.ts
-import { useState as useState27, useCallback as useCallback28, useRef as useRef43 } from "react";
+import { useState as useState28, useCallback as useCallback29, useRef as useRef44 } from "react";
 function useDialogue() {
-  const [active, setActive] = useState27(false);
-  const [currentId, setCurrentId] = useState27(null);
-  const scriptRef = useRef43(null);
-  const start2 = useCallback28((script, startId) => {
+  const [active, setActive] = useState28(false);
+  const [currentId, setCurrentId] = useState28(null);
+  const scriptRef = useRef44(null);
+  const start2 = useCallback29((script, startId) => {
     scriptRef.current = script;
     const id = startId ?? Object.keys(script)[0];
     setCurrentId(id);
     setActive(true);
   }, []);
-  const advance = useCallback28(
+  const advance = useCallback29(
     (choiceIndex) => {
       if (!scriptRef.current || !currentId) return;
       const line = scriptRef.current[currentId];
@@ -12895,7 +13363,7 @@ function useDialogue() {
     },
     [currentId]
   );
-  const close = useCallback28(() => {
+  const close = useCallback29(() => {
     setActive(false);
     setCurrentId(null);
     scriptRef.current = null;
@@ -13013,17 +13481,17 @@ function DialogueBox({ dialogue, onAdvance, onClose, style = {} }) {
 }
 
 // ../gameplay/src/hooks/useCutscene.ts
-import { useState as useState28, useCallback as useCallback29, useRef as useRef44, useEffect as useEffect77, useContext as useContext75 } from "react";
+import { useState as useState29, useCallback as useCallback30, useRef as useRef45, useEffect as useEffect79, useContext as useContext77 } from "react";
 function useCutscene() {
-  const engine = useContext75(EngineContext);
-  const [playing, setPlaying] = useState28(false);
-  const [stepIndex, setStepIndex] = useState28(0);
-  const stepsRef = useRef44([]);
-  const timerRef = useRef44(0);
-  const idxRef = useRef44(0);
-  const playingRef = useRef44(false);
-  const entityRef = useRef44(null);
-  const finish = useCallback29(() => {
+  const engine = useContext77(EngineContext);
+  const [playing, setPlaying] = useState29(false);
+  const [stepIndex, setStepIndex] = useState29(0);
+  const stepsRef = useRef45([]);
+  const timerRef = useRef45(0);
+  const idxRef = useRef45(0);
+  const playingRef = useRef45(false);
+  const entityRef = useRef45(null);
+  const finish = useCallback30(() => {
     playingRef.current = false;
     setPlaying(false);
     setStepIndex(0);
@@ -13033,14 +13501,14 @@ function useCutscene() {
       entityRef.current = null;
     }
   }, [engine.ecs]);
-  const fireStep = useCallback29((step) => {
+  const fireStep = useCallback30((step) => {
     if (step.type === "call") step.fn();
     if (step.type === "parallel")
       step.steps.forEach((s2) => {
         if (s2.type === "call") s2.fn();
       });
   }, []);
-  const play = useCallback29(
+  const play = useCallback30(
     (steps) => {
       stepsRef.current = steps;
       idxRef.current = 0;
@@ -13097,7 +13565,7 @@ function useCutscene() {
     },
     [engine.ecs, finish, fireStep]
   );
-  const skip = useCallback29(() => {
+  const skip = useCallback30(() => {
     for (let i = idxRef.current; i < stepsRef.current.length; i++) {
       const step = stepsRef.current[i];
       if (step.type === "call") step.fn();
@@ -13108,7 +13576,7 @@ function useCutscene() {
     }
     finish();
   }, [finish]);
-  useEffect77(() => {
+  useEffect79(() => {
     return () => {
       if (entityRef.current !== null && engine.ecs.hasEntity(entityRef.current)) {
         engine.ecs.destroyEntity(entityRef.current);
@@ -13119,7 +13587,7 @@ function useCutscene() {
 }
 
 // ../gameplay/src/hooks/useGameStore.ts
-import { useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback30 } from "react";
+import { useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback31 } from "react";
 function createStore(initialState) {
   let state = { ...initialState };
   const listeners = /* @__PURE__ */ new Set();
@@ -13145,7 +13613,7 @@ function useGameStore(key, initialState) {
   }
   const store = stores.get(key);
   const state = useSyncExternalStore2(store.subscribe, store.getState);
-  const setState = useCallback30(
+  const setState = useCallback31(
     (partial) => {
       store.setState(partial);
     },
@@ -13155,21 +13623,21 @@ function useGameStore(key, initialState) {
 }
 
 // ../gameplay/src/hooks/useTween.ts
-import { useRef as useRef45, useCallback as useCallback31, useEffect as useEffect78 } from "react";
+import { useRef as useRef46, useCallback as useCallback32, useEffect as useEffect80 } from "react";
 function useTween(opts) {
-  const rafRef = useRef45(null);
-  const startTimeRef = useRef45(0);
-  const runningRef = useRef45(false);
-  const optsRef = useRef45(opts);
+  const rafRef = useRef46(null);
+  const startTimeRef = useRef46(0);
+  const runningRef = useRef46(false);
+  const optsRef = useRef46(opts);
   optsRef.current = opts;
-  const stop = useCallback31(() => {
+  const stop = useCallback32(() => {
     if (rafRef.current !== null) {
       cancelAnimationFrame(rafRef.current);
       rafRef.current = null;
     }
     runningRef.current = false;
   }, []);
-  const start2 = useCallback31(() => {
+  const start2 = useCallback32(() => {
     stop();
     runningRef.current = true;
     startTimeRef.current = performance.now();
@@ -13191,12 +13659,12 @@ function useTween(opts) {
     };
     rafRef.current = requestAnimationFrame(tick2);
   }, [stop]);
-  useEffect78(() => {
+  useEffect80(() => {
     if (opts.autoStart) {
       start2();
     }
   }, []);
-  useEffect78(() => {
+  useEffect80(() => {
     return () => {
       if (rafRef.current !== null) {
         cancelAnimationFrame(rafRef.current);
@@ -13215,15 +13683,15 @@ function useTween(opts) {
 }
 
 // ../gameplay/src/hooks/useObjectPool.ts
-import { useRef as useRef46, useMemo as useMemo16, useEffect as useEffect79 } from "react";
+import { useRef as useRef47, useMemo as useMemo17, useEffect as useEffect81 } from "react";
 function useObjectPool(factory, reset, initialSize) {
-  const poolRef = useRef46([]);
-  const activeRef = useRef46(0);
-  const factoryRef = useRef46(factory);
+  const poolRef = useRef47([]);
+  const activeRef = useRef47(0);
+  const factoryRef = useRef47(factory);
   factoryRef.current = factory;
-  const resetRef = useRef46(reset);
+  const resetRef = useRef47(reset);
   resetRef.current = reset;
-  useEffect79(() => {
+  useEffect81(() => {
     if (initialSize != null && initialSize > 0) {
       const pool = poolRef.current;
       for (let i = 0; i < initialSize; i++) {
@@ -13231,7 +13699,7 @@ function useObjectPool(factory, reset, initialSize) {
       }
     }
   }, []);
-  return useMemo16(
+  return useMemo17(
     () => ({
       acquire() {
         activeRef.current++;
@@ -13262,11 +13730,11 @@ function useObjectPool(factory, reset, initialSize) {
 }
 
 // ../gameplay/src/hooks/useForces.ts
-import { useContext as useContext76, useMemo as useMemo17 } from "react";
+import { useContext as useContext78, useMemo as useMemo18 } from "react";
 function useForces() {
-  const engine = useContext76(EngineContext);
-  const entityId = useContext76(EntityContext);
-  return useMemo17(() => {
+  const engine = useContext78(EngineContext);
+  const entityId = useContext78(EntityContext);
+  return useMemo18(() => {
     const getRb = () => engine.ecs.getComponent(entityId, "RigidBody");
     const getTransform = () => engine.ecs.getComponent(entityId, "Transform");
     const getCenter = () => {
@@ -13334,11 +13802,11 @@ function useForces() {
 }
 
 // ../gameplay/src/hooks/useCharacterController.ts
-import { useContext as useContext77, useMemo as useMemo18 } from "react";
+import { useContext as useContext79, useMemo as useMemo19 } from "react";
 function useCharacterController(config = {}) {
-  const engine = useContext77(EngineContext);
-  const entityId = useContext77(EntityContext);
-  return useMemo18(() => {
+  const engine = useContext79(EngineContext);
+  const entityId = useContext79(EntityContext);
+  return useMemo19(() => {
     const controller = new CharacterController(config);
     return {
       move(dx, dy) {
@@ -13358,6 +13826,164 @@ function createAtlas(names, _columns) {
   return atlas;
 }
 
+// src/components/HUD.tsx
+import { createContext as createContext3, useContext as useContext80, useMemo as useMemo20 } from "react";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var HUDContextRef = createContext3(null);
+function HUD({
+  dimDuringTransitions = true,
+  dimmedOpacity = 0.25,
+  visible = true,
+  safeArea = true,
+  padding = 12,
+  style,
+  className,
+  children
+}) {
+  const ctx = useMemo20(() => ({ padding, safeArea }), [padding, safeArea]);
+  const rootStyle = {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 100,
+    opacity: visible ? 1 : 0,
+    transition: "opacity 180ms ease-out",
+    userSelect: "none",
+    ...style
+  };
+  void dimDuringTransitions;
+  void dimmedOpacity;
+  return /* @__PURE__ */ jsx22(HUDContextRef.Provider, { value: ctx, children: /* @__PURE__ */ jsx22("div", { className, style: rootStyle, "data-cubeforge-hud": "true", children }) });
+}
+function useHUD() {
+  return useContext80(HUDContextRef) ?? { padding: 12, safeArea: false };
+}
+function HUDZone({
+  position = "topLeft",
+  direction,
+  gap = 8,
+  interactive = true,
+  style,
+  className,
+  children
+}) {
+  const { padding, safeArea } = useHUD();
+  const isTop = position.startsWith("top");
+  const isBottom = position.startsWith("bottom");
+  const isCenter = position.startsWith("center");
+  const isLeft = position.endsWith("Left") || position === "centerLeft";
+  const isRight = position.endsWith("Right") || position === "centerRight";
+  const isHCenter = position.endsWith("Center") || position === "center";
+  const flexDirection = direction ?? (isTop || isBottom ? "row" : "column");
+  const sa = (side) => safeArea ? `max(${padding}px, env(safe-area-inset-${side}))` : `${padding}px`;
+  const zoneStyle = {
+    position: "absolute",
+    display: "flex",
+    flexDirection,
+    gap,
+    pointerEvents: interactive ? "auto" : "none",
+    ...isTop && { top: sa("top") },
+    ...isBottom && { bottom: sa("bottom") },
+    ...isLeft && { left: sa("left") },
+    ...isRight && { right: sa("right") },
+    ...isCenter && !isHCenter && { top: "50%", transform: "translateY(-50%)" },
+    ...isHCenter && !isCenter && { left: "50%", transform: "translateX(-50%)" },
+    ...position === "center" && { top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
+    ...isHCenter && !isCenter && isTop && { top: sa("top") },
+    ...isHCenter && !isCenter && isBottom && { bottom: sa("bottom") },
+    alignItems: isHCenter ? "center" : isRight ? "flex-end" : "flex-start",
+    ...style
+  };
+  return /* @__PURE__ */ jsx22("div", { className, style: zoneStyle, children });
+}
+function HUDBar({
+  value,
+  max,
+  label,
+  color = "#4fc3f7",
+  trackColor = "rgba(255,255,255,0.08)",
+  width = 180,
+  height = 14,
+  showValue = true,
+  rtl = false,
+  rounded = true,
+  animated = true,
+  style
+}) {
+  const pct = max > 0 ? Math.max(0, Math.min(1, value / max)) : 0;
+  const fillStyle = {
+    width: `${pct * 100}%`,
+    height: "100%",
+    background: color,
+    borderRadius: rounded ? height / 2 : 0,
+    transition: animated ? "width 160ms ease-out" : void 0,
+    ...rtl && { marginLeft: "auto" }
+  };
+  const trackStyle = {
+    width,
+    height,
+    background: trackColor,
+    borderRadius: rounded ? height / 2 : 0,
+    overflow: "hidden",
+    position: "relative",
+    display: "flex",
+    flexDirection: rtl ? "row-reverse" : "row"
+  };
+  const labelStyle = {
+    fontFamily: "system-ui, sans-serif",
+    fontSize: 11,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    color: "#e0e7f1",
+    opacity: 0.85,
+    display: "flex",
+    justifyContent: "space-between",
+    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 && /* @__PURE__ */ jsx22("span", { children: label }),
+      showValue && /* @__PURE__ */ jsxs11("span", { style: { fontVariantNumeric: "tabular-nums" }, children: [
+        Math.round(value),
+        " / ",
+        max
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx22("div", { style: trackStyle, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, children: /* @__PURE__ */ jsx22("div", { style: fillStyle }) })
+  ] });
+}
+function HUDCounter({
+  value,
+  icon,
+  label,
+  pulse = true,
+  color = "#fff",
+  fontSize = 18,
+  style
+}) {
+  void pulse;
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        fontFamily: "system-ui, sans-serif",
+        fontSize,
+        color,
+        fontVariantNumeric: "tabular-nums",
+        ...style
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx22("span", { style: { fontSize: fontSize * 1.1 }, children: icon }),
+        /* @__PURE__ */ jsx22("span", { children: value }),
+        label && /* @__PURE__ */ jsx22("span", { style: { opacity: 0.7, fontSize: fontSize * 0.75 }, children: label })
+      ]
+    }
+  );
+}
+
 // src/utils/animationHelpers.ts
 function playClip(world, entityId, clipName) {
   const anim = world.getComponent(entityId, "AnimationState");
@@ -13387,7 +14013,7 @@ function definePrefab(name, defaults, render) {
 }
 
 // src/hooks/useNetworkSync.ts
-import { useEffect as useEffect81, useRef as useRef48 } from "react";
+import { useEffect as useEffect83, useRef as useRef49 } from "react";
 
 // ../../packages/net/src/transport.ts
 function isBinaryTransport(t) {
@@ -13732,17 +14358,17 @@ function syncEntity(config) {
 }
 
 // ../../packages/net/src/useNetworkInput.ts
-import { useState as useState29, useEffect as useEffect80, useRef as useRef47 } from "react";
+import { useState as useState30, useEffect as useEffect82, useRef as useRef48 } from "react";
 var INPUT_MSG_TYPE = "input:state";
 function useNetworkInput(config) {
   const { room, keys, input, tickRate = 20 } = config;
   const intervalMs = 1e3 / tickRate;
-  const [localInput, setLocalInput] = useState29(
+  const [localInput, setLocalInput] = useState30(
     () => Object.fromEntries(keys.map((k) => [k, false]))
   );
-  const [remoteInputs] = useState29(() => /* @__PURE__ */ new Map());
-  const localInputRef = useRef47(localInput);
-  useEffect80(() => {
+  const [remoteInputs] = useState30(() => /* @__PURE__ */ new Map());
+  const localInputRef = useRef48(localInput);
+  useEffect82(() => {
     let cleanupDom = null;
     if (!input) {
       let handleKeyDown2 = function(e) {
@@ -13956,9 +14582,9 @@ function lerpState(a, b, t) {
 
 // src/hooks/useNetworkSync.ts
 function useNetworkSync(entityId, components, room, world, owner, opts = {}) {
-  const optsRef = useRef48(opts);
+  const optsRef = useRef49(opts);
   optsRef.current = opts;
-  useEffect81(() => {
+  useEffect83(() => {
     const sync = syncEntity({
       entityId,
       components,
@@ -13973,18 +14599,18 @@ function useNetworkSync(entityId, components, room, world, owner, opts = {}) {
 }
 
 // src/hooks/useRemotePlayer.ts
-import { useEffect as useEffect82, useRef as useRef49, useState as useState30 } from "react";
+import { useEffect as useEffect84, useRef as useRef50, useState as useState31 } 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] = useState30(() => /* @__PURE__ */ new Map());
-  const playersRef = useRef49(players);
-  const createRef = useRef49(createEntity);
+  const [players, setPlayers] = useState31(() => /* @__PURE__ */ new Map());
+  const playersRef = useRef50(players);
+  const createRef = useRef50(createEntity);
   createRef.current = createEntity;
-  const destroyRef = useRef49(destroyEntity);
+  const destroyRef = useRef50(destroyEntity);
   destroyRef.current = destroyEntity;
-  useEffect82(() => {
+  useEffect84(() => {
     function spawnPeer(peerId) {
       if (playersRef.current.has(peerId)) return;
       const entityId = createRef.current(peerId);
@@ -14056,6 +14682,10 @@ export {
   FocusRing,
   Game,
   Gradient,
+  HUD,
+  HUDBar,
+  HUDCounter,
+  HUDZone,
   HalfSpaceCollider,
   HeightFieldCollider,
   HierarchySystem,
@@ -14066,6 +14696,7 @@ export {
   Mask,
   MovingPlatform,
   NineSlice,
+  PARTICLE_PRESETS,
   ParallaxLayer,
   ParticleEmitter,
   Polygon,
@@ -14090,6 +14721,7 @@ export {
   TriMeshCollider,
   TriangleCollider,
   VectorPath,
+  VirtualCamera,
   VirtualJoystick,
   World,
   addForce,
@@ -14230,8 +14862,10 @@ export {
   useAudioListener,
   useAudioScheduler,
   useCamera,
+  useCameraBlend,
   useCameraLookahead,
   useCharacterController,
+  useCinematicSequence,
   useCircleEnter,
   useCircleExit,
   useCircleStay,