cubeforge 0.3.8 → 0.3.9

package/dist/index.js

@@ -805,6 +805,20 @@ function definePlugin(plugin) {
   return plugin;
 }
 
+// ../../packages/core/src/pluginHotReload.ts
+function hotReloadPlugin(engine, oldPlugin, newPlugin, oldSystems) {
+  const { ecs } = engine;
+  const toRemove = oldSystems ?? oldPlugin.systems;
+  for (const system of toRemove) {
+    ecs.removeSystem(system);
+  }
+  oldPlugin.onDestroy?.(engine);
+  for (const system of newPlugin.systems) {
+    ecs.addSystem(system);
+  }
+  newPlugin.onInit?.(engine);
+}
+
 // ../../packages/input/src/keyboard.ts
 var Keyboard = class {
   held = /* @__PURE__ */ new Set();
@@ -1162,6 +1176,22 @@ function createTrail(opts) {
   };
 }
 
+// ../../packages/renderer/src/components/nineSlice.ts
+function createNineSlice(src, width, height, opts) {
+  return {
+    type: "NineSlice",
+    src,
+    width,
+    height,
+    borderTop: 8,
+    borderRight: 8,
+    borderBottom: 8,
+    borderLeft: 8,
+    zIndex: 0,
+    ...opts
+  };
+}
+
 // ../../packages/renderer/src/shaders.ts
 var VERT_SRC = `#version 300 es
 layout(location = 0) in vec2 a_quadPos;
@@ -1498,6 +1528,20 @@ var RenderSystem = class {
   textureCache = /* @__PURE__ */ new Map();
   /** Insertion-order key list for LRU-style eviction. */
   textureCacheKeys = [];
+  // ── Debug overlays ──────────────────────────────────────────────────────
+  debugNavGrid = null;
+  contactFlashPoints = [];
+  // FPS tracking
+  frameTimes = [];
+  lastTimestamp = 0;
+  /** Overlay a nav grid: green = walkable, red = blocked. Pass null to clear. */
+  setDebugNavGrid(grid) {
+    this.debugNavGrid = grid;
+  }
+  /** Flash a point on the canvas for one frame (world-space coords). */
+  flashContactPoint(x, y) {
+    this.contactFlashPoints.push({ x, y, ttl: 1 });
+  }
   // ── Texture management (sprite textures — CLAMP_TO_EDGE) ──────────────────
   loadTexture(src) {
     const cached = this.textures.get(src);
@@ -2014,6 +2058,84 @@ var RenderSystem = class {
       }
       if (tCount > 0) this.flush(tCount, "__color__");
     }
+    if (this.debugNavGrid) {
+      const g = this.debugNavGrid;
+      let ngCount = 0;
+      for (let row = 0; row < g.rows; row++) {
+        for (let col = 0; col < g.cols; col++) {
+          if (ngCount >= MAX_INSTANCES) {
+            this.flush(ngCount, "__color__");
+            ngCount = 0;
+          }
+          const walkable = g.walkable[row * g.cols + col];
+          const cx = col * g.cellSize + g.cellSize / 2;
+          const cy = row * g.cellSize + g.cellSize / 2;
+          this.writeInstance(
+            ngCount * FLOATS_PER_INSTANCE,
+            cx,
+            cy,
+            g.cellSize,
+            g.cellSize,
+            0,
+            0.5,
+            0.5,
+            0,
+            0,
+            false,
+            walkable ? 0 : 1,
+            walkable ? 1 : 0,
+            0,
+            walkable ? 0.08 : 0.25,
+            0,
+            0,
+            1,
+            1
+          );
+          ngCount++;
+        }
+      }
+      if (ngCount > 0) this.flush(ngCount, "__color__");
+    }
+    if (this.contactFlashPoints.length > 0) {
+      let cfCount = 0;
+      for (const pt of this.contactFlashPoints) {
+        if (cfCount >= MAX_INSTANCES) {
+          this.flush(cfCount, "__color__");
+          cfCount = 0;
+        }
+        this.writeInstance(
+          cfCount * FLOATS_PER_INSTANCE,
+          pt.x,
+          pt.y,
+          8,
+          8,
+          0,
+          0.5,
+          0.5,
+          0,
+          0,
+          false,
+          1,
+          0.3,
+          0.3,
+          0.9,
+          0,
+          0,
+          1,
+          1
+        );
+        cfCount++;
+        pt.ttl--;
+      }
+      if (cfCount > 0) this.flush(cfCount, "__color__");
+      this.contactFlashPoints = this.contactFlashPoints.filter((p) => p.ttl > 0);
+    }
+    const now = performance.now();
+    if (this.lastTimestamp > 0) {
+      this.frameTimes.push(now - this.lastTimestamp);
+      if (this.frameTimes.length > 60) this.frameTimes.shift();
+    }
+    this.lastTimestamp = now;
   }
 };
 
@@ -2109,6 +2231,18 @@ function createCapsuleCollider(width, height, opts) {
   };
 }
 
+// ../../packages/physics/src/components/compoundCollider.ts
+function createCompoundCollider(shapes, opts) {
+  return {
+    type: "CompoundCollider",
+    shapes,
+    isTrigger: false,
+    layer: "default",
+    mask: "*",
+    ...opts
+  };
+}
+
 // ../../packages/physics/src/physicsSystem.ts
 function getAABB(transform, collider) {
   return {
@@ -2149,6 +2283,77 @@ function maskAllows(mask, layer) {
 function canInteract(a, b) {
   return maskAllows(a.mask, b.layer) && maskAllows(b.mask, a.layer);
 }
+function shapeToAABB(tx, ty, shape) {
+  if (shape.type === "box") {
+    return {
+      cx: tx + shape.offsetX,
+      cy: ty + shape.offsetY,
+      hw: (shape.width ?? 0) / 2,
+      hh: (shape.height ?? 0) / 2
+    };
+  }
+  const r = shape.radius ?? 0;
+  return {
+    cx: tx + shape.offsetX,
+    cy: ty + shape.offsetY,
+    hw: r,
+    hh: r
+  };
+}
+function shapeOverlapsAABB(tx, ty, shape, other) {
+  if (shape.type === "box") {
+    return getOverlap(shapeToAABB(tx, ty, shape), other);
+  }
+  const r = shape.radius ?? 0;
+  const cx = tx + shape.offsetX;
+  const cy = ty + shape.offsetY;
+  const nearX = Math.max(other.cx - other.hw, Math.min(cx, other.cx + other.hw));
+  const nearY = Math.max(other.cy - other.hh, Math.min(cy, other.cy + other.hh));
+  const dx = cx - nearX;
+  const dy = cy - nearY;
+  if (dx * dx + dy * dy >= r * r) return null;
+  return getOverlap(shapeToAABB(tx, ty, shape), other);
+}
+function shapeOverlapsCircle(tx, ty, shape, cx, cy, cr) {
+  if (shape.type === "circle") {
+    const r = shape.radius ?? 0;
+    const dx2 = tx + shape.offsetX - cx;
+    const dy2 = ty + shape.offsetY - cy;
+    return dx2 * dx2 + dy2 * dy2 < (r + cr) * (r + cr);
+  }
+  const aabb = shapeToAABB(tx, ty, shape);
+  const nearX = Math.max(aabb.cx - aabb.hw, Math.min(cx, aabb.cx + aabb.hw));
+  const nearY = Math.max(aabb.cy - aabb.hh, Math.min(cy, aabb.cy + aabb.hh));
+  const dx = cx - nearX;
+  const dy = cy - nearY;
+  return dx * dx + dy * dy < cr * cr;
+}
+function getCompoundBounds(tx, ty, shapes) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const s2 of shapes) {
+    const a = shapeToAABB(tx, ty, s2);
+    const l = a.cx - a.hw;
+    const r = a.cx + a.hw;
+    const t = a.cy - a.hh;
+    const b = a.cy + a.hh;
+    if (l < minX) minX = l;
+    if (r > maxX) maxX = r;
+    if (t < minY) minY = t;
+    if (b > maxY) maxY = b;
+  }
+  return {
+    cx: (minX + maxX) / 2,
+    cy: (minY + maxY) / 2,
+    hw: (maxX - minX) / 2,
+    hh: (maxY - minY) / 2
+  };
+}
+function canInteractGeneric(aLayer, aMask, bLayer, bMask) {
+  return maskAllows(aMask, bLayer) && maskAllows(bMask, aLayer);
+}
 function pairKey(a, b) {
   return a < b ? `${a}:${b}` : `${b}:${a}`;
 }
@@ -2163,6 +2368,7 @@ var PhysicsSystem = class {
   activeTriggerPairs = /* @__PURE__ */ new Map();
   activeCollisionPairs = /* @__PURE__ */ new Map();
   activeCirclePairs = /* @__PURE__ */ new Map();
+  activeCompoundPairs = /* @__PURE__ */ new Map();
   // Previous-frame positions of static entities — used to compute platform carry delta.
   staticPrevPos = /* @__PURE__ */ new Map();
   setGravity(g) {
@@ -2217,6 +2423,12 @@ var PhysicsSystem = class {
         this.activeCirclePairs.delete(key);
       }
     }
+    for (const [key, [a, b]] of this.activeCompoundPairs) {
+      if (!world.hasEntity(a) || !world.hasEntity(b)) {
+        this.events?.emit("compoundExit", { a, b });
+        this.activeCompoundPairs.delete(key);
+      }
+    }
     const staticDelta = /* @__PURE__ */ new Map();
     for (const sid of statics) {
       const st = world.getComponent(sid, "Transform");
@@ -2519,6 +2731,101 @@ var PhysicsSystem = class {
       }
       this.activeCirclePairs = /* @__PURE__ */ new Map();
     }
+    const allCompound = world.query("Transform", "CompoundCollider");
+    if (allCompound.length > 0) {
+      const currentCompoundPairs = /* @__PURE__ */ new Map();
+      const allBoxEntities = world.query("Transform", "BoxCollider");
+      for (const cid of allCompound) {
+        const cc = world.getComponent(cid, "CompoundCollider");
+        const ct = world.getComponent(cid, "Transform");
+        for (const bid of allBoxEntities) {
+          if (bid === cid) continue;
+          const bc = world.getComponent(bid, "BoxCollider");
+          if (!canInteractGeneric(cc.layer, cc.mask, bc.layer, bc.mask)) continue;
+          const bt = world.getComponent(bid, "Transform");
+          const boxAABB = getAABB(bt, bc);
+          let hit = false;
+          for (const shape of cc.shapes) {
+            if (shapeOverlapsAABB(ct.x, ct.y, shape, boxAABB)) {
+              hit = true;
+              break;
+            }
+          }
+          if (hit) currentCompoundPairs.set(pairKey(cid, bid), [cid, bid]);
+        }
+      }
+      for (const cid of allCompound) {
+        const cc = world.getComponent(cid, "CompoundCollider");
+        const ct = world.getComponent(cid, "Transform");
+        for (const oid of allCircles) {
+          if (oid === cid) continue;
+          const oc = world.getComponent(oid, "CircleCollider");
+          if (!canInteractGeneric(cc.layer, cc.mask, oc.layer, oc.mask)) continue;
+          const ot = world.getComponent(oid, "Transform");
+          let hit = false;
+          for (const shape of cc.shapes) {
+            if (shapeOverlapsCircle(ct.x, ct.y, shape, ot.x + oc.offsetX, ot.y + oc.offsetY, oc.radius)) {
+              hit = true;
+              break;
+            }
+          }
+          if (hit) currentCompoundPairs.set(pairKey(cid, oid), [cid, oid]);
+        }
+      }
+      for (let i = 0; i < allCompound.length; i++) {
+        for (let j = i + 1; j < allCompound.length; j++) {
+          const ia = allCompound[i];
+          const ib = allCompound[j];
+          const ca = world.getComponent(ia, "CompoundCollider");
+          const cb = world.getComponent(ib, "CompoundCollider");
+          if (!canInteractGeneric(ca.layer, ca.mask, cb.layer, cb.mask)) continue;
+          const ta = world.getComponent(ia, "Transform");
+          const tb = world.getComponent(ib, "Transform");
+          const boundsA = getCompoundBounds(ta.x, ta.y, ca.shapes);
+          const boundsB = getCompoundBounds(tb.x, tb.y, cb.shapes);
+          if (!getOverlap(boundsA, boundsB)) continue;
+          let hit = false;
+          outer2: for (const sa of ca.shapes) {
+            const aabb = shapeToAABB(ta.x, ta.y, sa);
+            for (const sb of cb.shapes) {
+              if (sb.type === "circle") {
+                const r = sb.radius ?? 0;
+                if (shapeOverlapsCircle(ta.x, ta.y, sa, tb.x + sb.offsetX, tb.y + sb.offsetY, r)) {
+                  hit = true;
+                  break outer2;
+                }
+              } else {
+                const bAABB = shapeToAABB(tb.x, tb.y, sb);
+                if (getOverlap(aabb, bAABB)) {
+                  hit = true;
+                  break outer2;
+                }
+              }
+            }
+          }
+          if (hit) currentCompoundPairs.set(pairKey(ia, ib), [ia, ib]);
+        }
+      }
+      for (const [key, [a, b]] of currentCompoundPairs) {
+        if (!this.activeCompoundPairs.has(key)) {
+          this.events?.emit("compoundEnter", { a, b });
+        } else {
+          this.events?.emit("compoundStay", { a, b });
+        }
+        this.events?.emit("compound", { a, b });
+      }
+      for (const [key, [a, b]] of this.activeCompoundPairs) {
+        if (!currentCompoundPairs.has(key)) {
+          this.events?.emit("compoundExit", { a, b });
+        }
+      }
+      this.activeCompoundPairs = currentCompoundPairs;
+    } else if (this.activeCompoundPairs.size > 0) {
+      for (const [, [a, b]] of this.activeCompoundPairs) {
+        this.events?.emit("compoundExit", { a, b });
+      }
+      this.activeCompoundPairs = /* @__PURE__ */ new Map();
+    }
   }
 };
 
@@ -2962,6 +3269,8 @@ function DevToolsOverlay({ handle, loop, ecs, engine }) {
   const [activeTab, setActiveTab] = useState("entities");
   const [entitySearch, setEntitySearch] = useState("");
   const [contactLog, setContactLog] = useState([]);
+  const [showNavGrid, setShowNavGrid] = useState(false);
+  const [showContactFlash, setShowContactFlash] = useState(false);
   const frameRef = useRef2(0);
   useEffect2(() => {
     handle.onFrame = () => {
@@ -2987,10 +3296,24 @@ function DevToolsOverlay({ handle, loop, ecs, engine }) {
           if (next.length > 20) next.length = 20;
           return next;
         });
+        if (showContactFlash) {
+          const renderer = engine.activeRenderSystem;
+          if (renderer?.flashContactPoint) {
+            const tA = engine.ecs.getComponent(a, "Transform");
+            const tB = engine.ecs.getComponent(b, "Transform");
+            if (tA && tB) {
+              renderer.flashContactPoint((tA.x + tB.x) / 2, (tA.y + tB.y) / 2);
+            } else if (tA) {
+              renderer.flashContactPoint(tA.x, tA.y);
+            } else if (tB) {
+              renderer.flashContactPoint(tB.x, tB.y);
+            }
+          }
+        }
       })
     );
     return () => unsubs.forEach((u) => u());
-  }, [engine]);
+  }, [engine, showContactFlash]);
   const totalFrames = handle.buffer.length;
   const currentSnap = handle.buffer[selectedIdx];
   const handlePauseResume = useCallback(() => {
@@ -3013,6 +3336,51 @@ function DevToolsOverlay({ handle, loop, ecs, engine }) {
     setSelectedIdx((i) => Math.min(handle.buffer.length - 1, i + 1));
     setSelectedEntity(null);
   }, [handle]);
+  const handleToggleNavGrid = useCallback(() => {
+    if (!engine) return;
+    const renderer = engine.activeRenderSystem;
+    if (!renderer?.setDebugNavGrid) return;
+    if (showNavGrid) {
+      renderer.setDebugNavGrid(null);
+      setShowNavGrid(false);
+    } else {
+      const snap = handle.buffer[handle.buffer.length - 1];
+      if (snap) {
+        let maxX = 0, maxY = 0;
+        for (const e of snap.entities) {
+          const t = e.components.find((c) => c.type === "Transform");
+          if (t) {
+            if (t.x > maxX) maxX = t.x;
+            if (t.y > maxY) maxY = t.y;
+          }
+        }
+        const cellSize = 16;
+        const cols = Math.ceil((maxX + 200) / cellSize);
+        const rows = Math.ceil((maxY + 200) / cellSize);
+        const walkable = new Uint8Array(cols * rows).fill(1);
+        for (const e of snap.entities) {
+          const t = e.components.find((c) => c.type === "Transform");
+          const bc = e.components.find((c) => c.type === "BoxCollider");
+          const rb = e.components.find((c) => c.type === "RigidBody");
+          if (t && bc && (!rb || rb.isStatic)) {
+            const left = t.x + (bc.offsetX ?? 0) - bc.width / 2;
+            const top = t.y + (bc.offsetY ?? 0) - bc.height / 2;
+            const c0 = Math.max(0, Math.floor(left / cellSize));
+            const c1 = Math.min(cols - 1, Math.floor((left + bc.width) / cellSize));
+            const r0 = Math.max(0, Math.floor(top / cellSize));
+            const r1 = Math.min(rows - 1, Math.floor((top + bc.height) / cellSize));
+            for (let r = r0; r <= r1; r++) {
+              for (let c = c0; c <= c1; c++) {
+                walkable[r * cols + c] = 0;
+              }
+            }
+          }
+        }
+        renderer.setDebugNavGrid({ cols, rows, cellSize, walkable });
+        setShowNavGrid(true);
+      }
+    }
+  }, [engine, showNavGrid, handle]);
   const frameLabel = totalFrames === 0 ? "0/0" : `${selectedIdx + 1}/${totalFrames}`;
   const entities = currentSnap?.entities ?? [];
   const filtered = entitySearch ? entities.filter(
@@ -3052,9 +3420,27 @@ function DevToolsOverlay({ handle, loop, ecs, engine }) {
             selectedEntityData
           }
         ),
-        activeTab === "perf" && /* @__PURE__ */ jsx(PerfTab, { fps, entityCount, compCount, timings }),
+        activeTab === "perf" && /* @__PURE__ */ jsx(
+          PerfTab,
+          {
+            fps,
+            entityCount,
+            compCount,
+            timings,
+            showNavGrid,
+            onToggleNavGrid: handleToggleNavGrid
+          }
+        ),
         activeTab === "input" && /* @__PURE__ */ jsx(InputTab, { activeKeys, inputCtx }),
-        activeTab === "contacts" && /* @__PURE__ */ jsx(ContactsTab, { log: contactLog, onClear: () => setContactLog([]) }),
+        activeTab === "contacts" && /* @__PURE__ */ jsx(
+          ContactsTab,
+          {
+            log: contactLog,
+            onClear: () => setContactLog([]),
+            showFlash: showContactFlash,
+            onToggleFlash: () => setShowContactFlash((v) => !v)
+          }
+        ),
         activeTab === "assets" && /* @__PURE__ */ jsx(AssetsTab, { assetCache })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: s.bar, children: [
@@ -3153,7 +3539,7 @@ function EntitiesTab({ entities, entitySearch, onSearchChange, selectedEntity, o
     ] }, comp.type)) })
   ] });
 }
-function PerfTab({ fps, entityCount, compCount, timings }) {
+function PerfTab({ fps, entityCount, compCount, timings, showNavGrid, onToggleNavGrid }) {
   const maxMs = 16.67;
   const stats = [
     { label: "FPS", value: String(fps), ok: fps >= 55 },
@@ -3165,6 +3551,10 @@ function PerfTab({ fps, entityCount, compCount, timings }) {
       /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: C.muted }, children: label }),
       /* @__PURE__ */ jsx("span", { style: { fontSize: 16, fontWeight: 700, color: ok ? C.ok : C.warn }, children: value })
     ] }, label)) }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, marginBottom: 10 }, children: /* @__PURE__ */ jsxs("button", { style: s.btn(showNavGrid), onClick: onToggleNavGrid, children: [
+      showNavGrid ? "Hide" : "Show",
+      " Nav Grid"
+    ] }) }),
     timings && timings.size > 0 && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("div", { style: { color: C.muted, fontSize: 9, marginBottom: 6, letterSpacing: "0.08em" }, children: "SYSTEM TIMING" }),
       Array.from(timings.entries()).map(([name, ms]) => {
@@ -3214,11 +3604,17 @@ function InputTab({ activeKeys, inputCtx }) {
     ] })
   ] });
 }
-function ContactsTab({ log, onClear }) {
+function ContactsTab({ log, onClear, showFlash, onToggleFlash }) {
   return /* @__PURE__ */ jsxs("div", { style: { padding: "4px 0" }, children: [
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 14px 8px" }, children: [
       /* @__PURE__ */ jsx("span", { style: { color: C.muted, fontSize: 9 }, children: "Last 20 contact events" }),
-      /* @__PURE__ */ jsx("button", { style: s.btn(false, true), onClick: onClear, children: "Clear" })
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
+        /* @__PURE__ */ jsxs("button", { style: s.btn(showFlash), onClick: onToggleFlash, children: [
+          showFlash ? "Hide" : "Show",
+          " Flash"
+        ] }),
+        /* @__PURE__ */ jsx("button", { style: s.btn(false, true), onClick: onClear, children: "Clear" })
+      ] })
     ] }),
     log.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "4px 14px", color: C.muted }, children: "No contacts yet" }) : log.map((entry, i) => /* @__PURE__ */ jsxs("div", { style: { padding: "3px 14px", display: "flex", gap: 10, alignItems: "center" }, children: [
       /* @__PURE__ */ jsxs("span", { style: { color: C.muted, fontSize: 9, minWidth: 46 }, children: [
@@ -3703,7 +4099,9 @@ function Sprite({
   atlas,
   frame,
   tileX,
-  tileY
+  tileY,
+  tileSizeX,
+  tileSizeY
 }) {
   const resolvedFrameIndex = atlas && frame != null ? atlas[frame] ?? 0 : frameIndex;
   const engine = useContext5(EngineContext);
@@ -3726,7 +4124,9 @@ function Sprite({
       frameHeight,
       frameColumns,
       tileX,
-      tileY
+      tileY,
+      tileSizeX,
+      tileSizeY
     });
     engine.ecs.addComponent(entityId, comp);
     if (src) {
@@ -3889,12 +4289,37 @@ function CapsuleCollider({
   return null;
 }
 
-// src/components/Script.tsx
+// src/components/CompoundCollider.tsx
 import { useEffect as useEffect13, useContext as useContext11 } from "react";
-function Script({ init, update }) {
+function CompoundCollider({
+  shapes,
+  isTrigger = false,
+  layer = "default",
+  mask = "*"
+}) {
   const engine = useContext11(EngineContext);
   const entityId = useContext11(EntityContext);
   useEffect13(() => {
+    engine.ecs.addComponent(entityId, createCompoundCollider(shapes, { isTrigger, layer, mask }));
+    const checkId = setTimeout(() => {
+      if (engine.ecs.hasEntity(entityId) && !engine.ecs.hasComponent(entityId, "Transform")) {
+        console.warn(`[Cubeforge] CompoundCollider on entity ${entityId} has no Transform. Physics requires Transform.`);
+      }
+    }, 0);
+    return () => {
+      clearTimeout(checkId);
+      engine.ecs.removeComponent(entityId, "CompoundCollider");
+    };
+  }, []);
+  return null;
+}
+
+// src/components/Script.tsx
+import { useEffect as useEffect14, useContext as useContext12 } from "react";
+function Script({ init, update }) {
+  const engine = useContext12(EngineContext);
+  const entityId = useContext12(EntityContext);
+  useEffect14(() => {
     if (init) {
       try {
         init(entityId, engine.ecs);
@@ -3909,7 +4334,7 @@ function Script({ init, update }) {
 }
 
 // src/components/Camera2D.tsx
-import { useEffect as useEffect14, useContext as useContext12 } from "react";
+import { useEffect as useEffect15, useContext as useContext13 } from "react";
 function Camera2D({
   followEntity,
   x = 0,
@@ -3922,8 +4347,8 @@ function Camera2D({
   followOffsetX = 0,
   followOffsetY = 0
 }) {
-  const engine = useContext12(EngineContext);
-  useEffect14(() => {
+  const engine = useContext13(EngineContext);
+  useEffect15(() => {
     const entityId = engine.ecs.createEntity();
     engine.ecs.addComponent(entityId, createCamera2D({
       followEntityId: followEntity,
@@ -3939,7 +4364,7 @@ function Camera2D({
     }));
     return () => engine.ecs.destroyEntity(entityId);
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     const camId = engine.ecs.queryOne("Camera2D");
     if (camId === void 0) return;
     const cam = engine.ecs.getComponent(camId, "Camera2D");
@@ -3958,11 +4383,11 @@ function Camera2D({
 }
 
 // src/components/Animation.tsx
-import { useEffect as useEffect15, useContext as useContext13 } from "react";
+import { useEffect as useEffect16, useContext as useContext14 } from "react";
 function Animation({ frames, fps = 12, loop = true, playing = true, onComplete, frameEvents }) {
-  const engine = useContext13(EngineContext);
-  const entityId = useContext13(EntityContext);
-  useEffect15(() => {
+  const engine = useContext14(EngineContext);
+  const entityId = useContext14(EntityContext);
+  useEffect16(() => {
     const state = {
       type: "AnimationState",
       frames,
@@ -3980,7 +4405,7 @@ function Animation({ frames, fps = 12, loop = true, playing = true, onComplete,
       engine.ecs.removeComponent(entityId, "AnimationState");
     };
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     const anim = engine.ecs.getComponent(entityId, "AnimationState");
     if (!anim) return;
     const wasFramesChanged = anim.frames !== frames;
@@ -4000,11 +4425,11 @@ function Animation({ frames, fps = 12, loop = true, playing = true, onComplete,
 }
 
 // src/components/SquashStretch.tsx
-import { useEffect as useEffect16, useContext as useContext14 } from "react";
+import { useEffect as useEffect17, useContext as useContext15 } from "react";
 function SquashStretch({ intensity = 0.2, recovery = 8 }) {
-  const engine = useContext14(EngineContext);
-  const entityId = useContext14(EntityContext);
-  useEffect16(() => {
+  const engine = useContext15(EngineContext);
+  const entityId = useContext15(EntityContext);
+  useEffect17(() => {
     engine.ecs.addComponent(entityId, {
       type: "SquashStretch",
       intensity,
@@ -4018,7 +4443,7 @@ function SquashStretch({ intensity = 0.2, recovery = 8 }) {
 }
 
 // src/components/ParticleEmitter.tsx
-import { useEffect as useEffect17, useContext as useContext15 } from "react";
+import { useEffect as useEffect18, useContext as useContext16 } from "react";
 
 // src/components/particlePresets.ts
 var PARTICLE_PRESETS = {
@@ -4103,9 +4528,9 @@ function ParticleEmitter({
   const resolvedColor = color ?? presetConfig.color ?? "#ffffff";
   const resolvedGravity = gravity ?? presetConfig.gravity ?? 200;
   const resolvedMaxParticles = maxParticles ?? presetConfig.maxParticles ?? 100;
-  const engine = useContext15(EngineContext);
-  const entityId = useContext15(EntityContext);
-  useEffect17(() => {
+  const engine = useContext16(EngineContext);
+  const entityId = useContext16(EntityContext);
+  useEffect18(() => {
     engine.ecs.addComponent(entityId, {
       type: "ParticlePool",
       particles: [],
@@ -4123,7 +4548,7 @@ function ParticleEmitter({
     });
     return () => engine.ecs.removeComponent(entityId, "ParticlePool");
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     const pool = engine.ecs.getComponent(entityId, "ParticlePool");
     if (!pool) return;
     pool.active = active;
@@ -4357,7 +4782,7 @@ function Checkpoint({
 }
 
 // src/components/Tilemap.tsx
-import { useEffect as useEffect18, useState as useState5, useContext as useContext16 } from "react";
+import { useEffect as useEffect19, useState as useState5, useContext as useContext17 } from "react";
 import { Fragment as Fragment4, jsx as jsx8 } from "react/jsx-runtime";
 var animatedTiles = /* @__PURE__ */ new Map();
 function getProperty(props, name) {
@@ -4382,9 +4807,9 @@ function Tilemap({
   onTileProperty,
   navGrid
 }) {
-  const engine = useContext16(EngineContext);
+  const engine = useContext17(EngineContext);
   const [spawnedNodes, setSpawnedNodes] = useState5([]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!engine) return;
     const createdEntities = [];
     async function load() {
@@ -4575,7 +5000,7 @@ function Tilemap({
 }
 
 // src/components/ParallaxLayer.tsx
-import { useEffect as useEffect19, useContext as useContext17 } from "react";
+import { useEffect as useEffect20, useContext as useContext18 } from "react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function ParallaxLayerInner({
   src,
@@ -4587,9 +5012,9 @@ function ParallaxLayerInner({
   offsetX,
   offsetY
 }) {
-  const engine = useContext17(EngineContext);
-  const entityId = useContext17(EntityContext);
-  useEffect19(() => {
+  const engine = useContext18(EngineContext);
+  const entityId = useContext18(EntityContext);
+  useEffect20(() => {
     engine.ecs.addComponent(entityId, {
       type: "ParallaxLayer",
       src,
@@ -4605,7 +5030,7 @@ function ParallaxLayerInner({
     });
     return () => engine.ecs.removeComponent(entityId, "ParallaxLayer");
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     const layer = engine.ecs.getComponent(entityId, "ParallaxLayer");
     if (!layer) return;
     layer.src = src;
@@ -4687,7 +5112,7 @@ var ScreenFlash = forwardRef((_, ref) => {
 ScreenFlash.displayName = "ScreenFlash";
 
 // src/components/CameraZone.tsx
-import { useEffect as useEffect20, useContext as useContext18, useRef as useRef6 } from "react";
+import { useEffect as useEffect21, useContext as useContext19, useRef as useRef6 } from "react";
 import { Fragment as Fragment5, jsx as jsx11 } from "react/jsx-runtime";
 function CameraZone({
   x,
@@ -4699,10 +5124,10 @@ function CameraZone({
   targetY,
   children
 }) {
-  const engine = useContext18(EngineContext);
+  const engine = useContext19(EngineContext);
   const prevFollowRef = useRef6(void 0);
   const activeRef = useRef6(false);
-  useEffect20(() => {
+  useEffect21(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(eid, createScript(() => {
       const cam = engine.ecs.queryOne("Camera2D");
@@ -4749,26 +5174,56 @@ function CameraZone({
 }
 
 // src/components/Trail.tsx
-import { useEffect as useEffect21, useContext as useContext19 } from "react";
+import { useEffect as useEffect22, useContext as useContext20 } from "react";
 function Trail({ length = 20, color = "#ffffff", width = 3 }) {
-  const engine = useContext19(EngineContext);
-  const entityId = useContext19(EntityContext);
-  useEffect21(() => {
+  const engine = useContext20(EngineContext);
+  const entityId = useContext20(EntityContext);
+  useEffect22(() => {
     engine.ecs.addComponent(entityId, createTrail({ length, color, width }));
     return () => engine.ecs.removeComponent(entityId, "Trail");
   }, []);
   return null;
 }
 
+// src/components/NineSlice.tsx
+import { useEffect as useEffect23, useContext as useContext21 } from "react";
+function NineSlice({
+  src,
+  width,
+  height,
+  borderTop = 8,
+  borderRight = 8,
+  borderBottom = 8,
+  borderLeft = 8,
+  zIndex = 0
+}) {
+  const engine = useContext21(EngineContext);
+  const entityId = useContext21(EntityContext);
+  useEffect23(() => {
+    engine.ecs.addComponent(
+      entityId,
+      createNineSlice(src, width, height, {
+        borderTop,
+        borderRight,
+        borderBottom,
+        borderLeft,
+        zIndex
+      })
+    );
+    return () => engine.ecs.removeComponent(entityId, "NineSlice");
+  }, []);
+  return null;
+}
+
 // src/components/AssetLoader.tsx
-import { useEffect as useEffect23 } from "react";
+import { useEffect as useEffect25 } from "react";
 
 // src/hooks/usePreload.ts
-import { useState as useState6, useEffect as useEffect22, useContext as useContext20 } from "react";
+import { useState as useState6, useEffect as useEffect24, useContext as useContext22 } from "react";
 function usePreload(assets) {
-  const engine = useContext20(EngineContext);
+  const engine = useContext22(EngineContext);
   const [state, setState] = useState6({ progress: assets.length === 0 ? 1 : 0, loaded: assets.length === 0, error: null });
-  useEffect22(() => {
+  useEffect24(() => {
     if (assets.length === 0) {
       setState({ progress: 1, loaded: true, error: null });
       return;
@@ -4799,7 +5254,7 @@ function usePreload(assets) {
 import { Fragment as Fragment6, jsx as jsx12 } from "react/jsx-runtime";
 function AssetLoader({ assets, fallback = null, onError, children }) {
   const { loaded, error } = usePreload(assets);
-  useEffect23(() => {
+  useEffect25(() => {
     if (error && onError) onError(error);
   }, [error, onError]);
   if (!loaded) {
@@ -4809,9 +5264,9 @@ function AssetLoader({ assets, fallback = null, onError, children }) {
 }
 
 // src/hooks/useGame.ts
-import { useContext as useContext21 } from "react";
+import { useContext as useContext23 } from "react";
 function useGame() {
-  const engine = useContext21(EngineContext);
+  const engine = useContext23(EngineContext);
   if (!engine) throw new Error("useGame must be used inside <Game>");
   return engine;
 }
@@ -4868,18 +5323,18 @@ function useSnapshot() {
 }
 
 // src/hooks/useEntity.ts
-import { useContext as useContext22 } from "react";
+import { useContext as useContext24 } from "react";
 function useEntity() {
-  const id = useContext22(EntityContext);
+  const id = useContext24(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 useContext23 } from "react";
+import { useCallback as useCallback2, useContext as useContext25 } from "react";
 function useDestroyEntity() {
-  const engine = useContext23(EngineContext);
-  const entityId = useContext23(EntityContext);
+  const engine = useContext25(EngineContext);
+  const entityId = useContext25(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(() => {
@@ -4890,9 +5345,9 @@ function useDestroyEntity() {
 }
 
 // src/hooks/useInput.ts
-import { useContext as useContext24 } from "react";
+import { useContext as useContext26 } from "react";
 function useInput() {
-  const engine = useContext24(EngineContext);
+  const engine = useContext26(EngineContext);
   if (!engine) throw new Error("useInput must be used inside <Game>");
   return engine.input;
 }
@@ -4912,9 +5367,9 @@ function useInputMap(bindings) {
 }
 
 // src/hooks/useEvents.ts
-import { useContext as useContext25, useEffect as useEffect24, useRef as useRef7 } from "react";
+import { useContext as useContext27, useEffect as useEffect26, useRef as useRef7 } from "react";
 function useEvents() {
-  const engine = useContext25(EngineContext);
+  const engine = useContext27(EngineContext);
   if (!engine) throw new Error("useEvents must be used inside <Game>");
   return engine.events;
 }
@@ -4922,15 +5377,15 @@ function useEvent(event, handler) {
   const events = useEvents();
   const handlerRef = useRef7(handler);
   handlerRef.current = handler;
-  useEffect24(() => {
+  useEffect26(() => {
     return events.on(event, (data) => handlerRef.current(data));
   }, [events, event]);
 }
 
 // src/hooks/useCoordinates.ts
-import { useCallback as useCallback3, useContext as useContext26 } from "react";
+import { useCallback as useCallback3, useContext as useContext28 } from "react";
 function useCoordinates() {
-  const engine = useContext26(EngineContext);
+  const engine = useContext28(EngineContext);
   const worldToScreen = useCallback3((wx, wy) => {
     const canvas = engine.canvas;
     const camId = engine.ecs.queryOne("Camera2D");
@@ -4957,9 +5412,9 @@ function useCoordinates() {
 }
 
 // src/hooks/useInputContext.ts
-import { useEffect as useEffect25, useMemo as useMemo4 } from "react";
+import { useEffect as useEffect27, useMemo as useMemo4 } from "react";
 function useInputContext(ctx) {
-  useEffect25(() => {
+  useEffect27(() => {
     if (!ctx) return;
     globalInputContext.push(ctx);
     return () => globalInputContext.pop(ctx);
@@ -4998,12 +5453,12 @@ function useInputRecorder() {
 }
 
 // src/hooks/useGamepad.ts
-import { useEffect as useEffect26, useRef as useRef8, useState as useState7 } from "react";
+import { useEffect as useEffect28, useRef as useRef8, useState as useState7 } from "react";
 var EMPTY_STATE = { connected: false, axes: [], buttons: [] };
 function useGamepad(playerIndex = 0) {
   const [state, setState] = useState7(EMPTY_STATE);
   const rafRef = useRef8(0);
-  useEffect26(() => {
+  useEffect28(() => {
     const poll = () => {
       const gp = navigator.getGamepads()[playerIndex];
       if (gp) {
@@ -5024,9 +5479,9 @@ function useGamepad(playerIndex = 0) {
 }
 
 // src/hooks/usePause.ts
-import { useContext as useContext27, useState as useState8, useCallback as useCallback4 } from "react";
+import { useContext as useContext29, useState as useState8, useCallback as useCallback4 } from "react";
 function usePause() {
-  const engine = useContext27(EngineContext);
+  const engine = useContext29(EngineContext);
   const [paused, setPaused] = useState8(false);
   const pause = useCallback4(() => {
     engine.loop.pause();
@@ -5095,19 +5550,19 @@ function useAISteering() {
 }
 
 // ../gameplay/src/hooks/useDamageZone.ts
-import { useContext as useContext28 } from "react";
+import { useContext as useContext30 } from "react";
 function useDamageZone(damage, opts = {}) {
-  const engine = useContext28(EngineContext);
+  const engine = useContext30(EngineContext);
   useTriggerEnter((other) => {
     engine.events.emit(`damage:${other}`, { amount: damage });
   }, { tag: opts.tag, layer: opts.layer });
 }
 
 // ../gameplay/src/hooks/useDropThrough.ts
-import { useContext as useContext29, useCallback as useCallback7 } from "react";
+import { useContext as useContext31, useCallback as useCallback7 } from "react";
 function useDropThrough(frames = 8) {
-  const engine = useContext29(EngineContext);
-  const entityId = useContext29(EntityContext);
+  const engine = useContext31(EngineContext);
+  const entityId = useContext31(EntityContext);
   const dropThrough = useCallback7(() => {
     const rb = engine.ecs.getComponent(entityId, "RigidBody");
     if (rb) rb.dropThrough = frames;
@@ -5116,14 +5571,14 @@ function useDropThrough(frames = 8) {
 }
 
 // ../gameplay/src/hooks/useGameStateMachine.ts
-import { useState as useState10, useRef as useRef9, useCallback as useCallback8, useEffect as useEffect27, useContext as useContext30 } from "react";
+import { useState as useState10, useRef as useRef9, useCallback as useCallback8, useEffect as useEffect29, useContext as useContext32 } from "react";
 function useGameStateMachine(states, initial) {
-  const engine = useContext30(EngineContext);
+  const engine = useContext32(EngineContext);
   const [state, setState] = useState10(initial);
   const stateRef = useRef9(initial);
   const statesRef = useRef9(states);
   statesRef.current = states;
-  useEffect27(() => {
+  useEffect29(() => {
     statesRef.current[initial]?.onEnter?.();
   }, []);
   const transition = useCallback8((to) => {
@@ -5134,7 +5589,7 @@ function useGameStateMachine(states, initial) {
     setState(to);
     statesRef.current[to]?.onEnter?.();
   }, []);
-  useEffect27(() => {
+  useEffect29(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(eid, createScript((_id, _world, _input, dt) => {
       statesRef.current[stateRef.current]?.onUpdate?.(dt);
@@ -5147,19 +5602,19 @@ function useGameStateMachine(states, initial) {
 }
 
 // ../gameplay/src/hooks/useHealth.ts
-import { useRef as useRef10, useEffect as useEffect28, useContext as useContext31, useCallback as useCallback9 } from "react";
+import { useRef as useRef10, useEffect as useEffect30, useContext as useContext33, useCallback as useCallback9 } from "react";
 function useHealth(maxHp, opts = {}) {
-  const engine = useContext31(EngineContext);
-  const entityId = useContext31(EntityContext);
+  const engine = useContext33(EngineContext);
+  const entityId = useContext33(EntityContext);
   const hpRef = useRef10(maxHp);
   const invincibleRef = useRef10(false);
   const iFrameDuration = opts.iFrames ?? 1;
   const onDeathRef = useRef10(opts.onDeath);
   const onDamageRef = useRef10(opts.onDamage);
-  useEffect28(() => {
+  useEffect30(() => {
     onDeathRef.current = opts.onDeath;
   });
-  useEffect28(() => {
+  useEffect30(() => {
     onDamageRef.current = opts.onDamage;
   });
   const timerRef = useRef10(
@@ -5178,10 +5633,10 @@ function useHealth(maxHp, opts = {}) {
     if (hpRef.current <= 0) onDeathRef.current?.();
   }, [iFrameDuration]);
   const takeDamageRef = useRef10(takeDamage);
-  useEffect28(() => {
+  useEffect30(() => {
     takeDamageRef.current = takeDamage;
   }, [takeDamage]);
-  useEffect28(() => {
+  useEffect30(() => {
     return engine.events.on(`damage:${entityId}`, ({ amount }) => {
       takeDamageRef.current(amount);
     });
@@ -5216,10 +5671,10 @@ function useHealth(maxHp, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useKinematicBody.ts
-import { useContext as useContext32, useCallback as useCallback10 } from "react";
+import { useContext as useContext34, useCallback as useCallback10 } from "react";
 function useKinematicBody() {
-  const engine = useContext32(EngineContext);
-  const entityId = useContext32(EntityContext);
+  const engine = useContext34(EngineContext);
+  const entityId = useContext34(EntityContext);
   const moveAndCollide = useCallback10((dx, dy) => {
     const transform = engine.ecs.getComponent(entityId, "Transform");
     if (!transform) return { dx: 0, dy: 0 };
@@ -5306,13 +5761,13 @@ function useLevelTransition(initial) {
 }
 
 // ../gameplay/src/hooks/usePlatformerController.ts
-import { useContext as useContext33, useEffect as useEffect29 } from "react";
+import { useContext as useContext35, useEffect as useEffect31 } from "react";
 function normalizeKeys(val, defaults) {
   if (!val) return defaults;
   return Array.isArray(val) ? val : [val];
 }
 function usePlatformerController(entityId, opts = {}) {
-  const engine = useContext33(EngineContext);
+  const engine = useContext35(EngineContext);
   const {
     speed = 200,
     jumpForce = -500,
@@ -5325,7 +5780,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"]);
-  useEffect29(() => {
+  useEffect31(() => {
     const state = {
       coyoteTimer: 0,
       jumpBuffer: 0,
@@ -5389,9 +5844,9 @@ function usePathfinding() {
 }
 
 // ../gameplay/src/hooks/usePersistedBindings.ts
-import { useState as useState12, useCallback as useCallback13, useMemo as useMemo8, useContext as useContext34 } from "react";
+import { useState as useState12, useCallback as useCallback13, useMemo as useMemo8, useContext as useContext36 } from "react";
 function usePersistedBindings(storageKey, defaults) {
-  const engine = useContext34(EngineContext);
+  const engine = useContext36(EngineContext);
   const input = engine.input;
   const [bindings, setBindings] = useState12(() => {
     try {
@@ -5496,11 +5951,11 @@ function useSave(key, defaultValue, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useTopDownMovement.ts
-import { useContext as useContext35, useEffect as useEffect30 } from "react";
+import { useContext as useContext37, useEffect as useEffect32 } from "react";
 function useTopDownMovement(entityId, opts = {}) {
-  const engine = useContext35(EngineContext);
+  const engine = useContext37(EngineContext);
   const { speed = 200, normalizeDiagonal = true } = opts;
-  useEffect30(() => {
+  useEffect32(() => {
     const updateFn = (id, world, input) => {
       if (!world.hasEntity(id)) return;
       const rb = world.getComponent(id, "RigidBody");
@@ -5524,8 +5979,190 @@ function useTopDownMovement(entityId, opts = {}) {
   }, []);
 }
 
+// ../gameplay/src/hooks/useDialogue.ts
+import { useState as useState14, useCallback as useCallback16, useRef as useRef13 } from "react";
+function useDialogue() {
+  const [active, setActive] = useState14(false);
+  const [currentId, setCurrentId] = useState14(null);
+  const scriptRef = useRef13(null);
+  const start = useCallback16((script, startId) => {
+    scriptRef.current = script;
+    const id = startId ?? Object.keys(script)[0];
+    setCurrentId(id);
+    setActive(true);
+  }, []);
+  const advance = useCallback16((choiceIndex) => {
+    if (!scriptRef.current || !currentId) return;
+    const line = scriptRef.current[currentId];
+    if (!line) {
+      setActive(false);
+      setCurrentId(null);
+      return;
+    }
+    if (line.choices && choiceIndex !== void 0) {
+      const choice = line.choices[choiceIndex];
+      if (choice?.next && scriptRef.current[choice.next]) {
+        setCurrentId(choice.next);
+      } else {
+        setActive(false);
+        setCurrentId(null);
+      }
+    } else {
+      const keys = Object.keys(scriptRef.current);
+      const idx = keys.indexOf(currentId);
+      if (idx >= 0 && idx + 1 < keys.length) {
+        setCurrentId(keys[idx + 1]);
+      } else {
+        setActive(false);
+        setCurrentId(null);
+      }
+    }
+  }, [currentId]);
+  const close = useCallback16(() => {
+    setActive(false);
+    setCurrentId(null);
+    scriptRef.current = null;
+  }, []);
+  const current = scriptRef.current && currentId ? scriptRef.current[currentId] ?? null : null;
+  return { active, current, currentId, start, advance, close };
+}
+
+// ../gameplay/src/hooks/useCutscene.ts
+import { useState as useState15, useCallback as useCallback17, useRef as useRef14, useEffect as useEffect33, useContext as useContext38 } from "react";
+function useCutscene() {
+  const engine = useContext38(EngineContext);
+  const [playing, setPlaying] = useState15(false);
+  const [stepIndex, setStepIndex] = useState15(0);
+  const stepsRef = useRef14([]);
+  const timerRef = useRef14(0);
+  const idxRef = useRef14(0);
+  const playingRef = useRef14(false);
+  const entityRef = useRef14(null);
+  const finish = useCallback17(() => {
+    playingRef.current = false;
+    setPlaying(false);
+    setStepIndex(0);
+    idxRef.current = 0;
+    if (entityRef.current !== null && engine.ecs.hasEntity(entityRef.current)) {
+      engine.ecs.destroyEntity(entityRef.current);
+      entityRef.current = null;
+    }
+  }, [engine.ecs]);
+  const fireStep = useCallback17((step) => {
+    if (step.type === "call") step.fn();
+    if (step.type === "parallel") step.steps.forEach((s2) => {
+      if (s2.type === "call") s2.fn();
+    });
+  }, []);
+  const play = useCallback17((steps) => {
+    stepsRef.current = steps;
+    idxRef.current = 0;
+    timerRef.current = 0;
+    playingRef.current = true;
+    setPlaying(true);
+    setStepIndex(0);
+    const step = steps[0];
+    if (step) fireStep(step);
+    const eid = engine.ecs.createEntity();
+    entityRef.current = eid;
+    engine.ecs.addComponent(eid, createScript((_id, _world, _input, dt) => {
+      if (!playingRef.current) return;
+      const allSteps = stepsRef.current;
+      const idx = idxRef.current;
+      if (idx >= allSteps.length) {
+        finish();
+        return;
+      }
+      const current = allSteps[idx];
+      if (current.type === "wait") {
+        timerRef.current += dt;
+        if (timerRef.current >= current.duration) {
+          timerRef.current = 0;
+          idxRef.current++;
+          setStepIndex(idxRef.current);
+          const next = allSteps[idxRef.current];
+          if (next) fireStep(next);
+          if (idxRef.current >= allSteps.length) finish();
+        }
+      } else if (current.type === "call") {
+        idxRef.current++;
+        setStepIndex(idxRef.current);
+        const next = allSteps[idxRef.current];
+        if (next) fireStep(next);
+        if (idxRef.current >= allSteps.length) finish();
+      } else if (current.type === "parallel") {
+        const waits = current.steps.filter((s2) => s2.type === "wait");
+        const maxDuration = waits.length > 0 ? Math.max(...waits.map((w) => w.duration)) : 0;
+        timerRef.current += dt;
+        if (timerRef.current >= maxDuration) {
+          timerRef.current = 0;
+          idxRef.current++;
+          setStepIndex(idxRef.current);
+          const next = allSteps[idxRef.current];
+          if (next) fireStep(next);
+          if (idxRef.current >= allSteps.length) finish();
+        }
+      }
+    }));
+  }, [engine.ecs, finish, fireStep]);
+  const skip = useCallback17(() => {
+    for (let i = idxRef.current; i < stepsRef.current.length; i++) {
+      const step = stepsRef.current[i];
+      if (step.type === "call") step.fn();
+      if (step.type === "parallel") step.steps.forEach((s2) => {
+        if (s2.type === "call") s2.fn();
+      });
+    }
+    finish();
+  }, [finish]);
+  useEffect33(() => {
+    return () => {
+      if (entityRef.current !== null && engine.ecs.hasEntity(entityRef.current)) {
+        engine.ecs.destroyEntity(entityRef.current);
+      }
+    };
+  }, [engine.ecs]);
+  return { playing, stepIndex, play, skip };
+}
+
+// ../gameplay/src/hooks/useGameStore.ts
+import { useSyncExternalStore, useCallback as useCallback18 } from "react";
+function createStore(initialState) {
+  let state = { ...initialState };
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    getState: () => state,
+    setState: (partial) => {
+      const updates = typeof partial === "function" ? partial(state) : partial;
+      state = { ...state, ...updates };
+      listeners.forEach((l) => l());
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+var stores = /* @__PURE__ */ new Map();
+function useGameStore(key, initialState) {
+  if (!stores.has(key)) {
+    stores.set(key, createStore(initialState));
+  }
+  const store = stores.get(key);
+  const state = useSyncExternalStore(
+    store.subscribe,
+    store.getState
+  );
+  const setState = useCallback18((partial) => {
+    store.setState(partial);
+  }, [store]);
+  return [state, setState];
+}
+
 // ../../packages/audio/src/useSound.ts
-import { useEffect as useEffect31, useRef as useRef13 } from "react";
+import { useEffect as useEffect34, useRef as useRef15 } from "react";
 var _audioCtx = null;
 function getAudioCtx() {
   if (!_audioCtx) _audioCtx = new AudioContext();
@@ -5592,13 +6229,13 @@ async function loadBuffer(src) {
   return buf;
 }
 function useSound(src, opts = {}) {
-  const bufferRef = useRef13(null);
-  const sourceRef = useRef13(null);
-  const gainRef = useRef13(null);
-  const volRef = useRef13(opts.volume ?? 1);
-  const loopRef = useRef13(opts.loop ?? false);
-  const groupRef = useRef13(opts.group);
-  useEffect31(() => {
+  const bufferRef = useRef15(null);
+  const sourceRef = useRef15(null);
+  const gainRef = useRef15(null);
+  const volRef = useRef15(opts.volume ?? 1);
+  const loopRef = useRef15(opts.loop ?? false);
+  const groupRef = useRef15(opts.group);
+  useEffect34(() => {
     let cancelled = false;
     loadBuffer(src).then((buf) => {
       if (!cancelled) bufferRef.current = buf;
@@ -5742,10 +6379,12 @@ export {
   CapsuleCollider,
   Checkpoint,
   CircleCollider,
+  CompoundCollider,
   Ease,
   Entity,
   Game,
   MovingPlatform,
+  NineSlice,
   ParallaxLayer,
   ParticleEmitter,
   RenderSystem,
@@ -5762,8 +6401,10 @@ export {
   World,
   arrive,
   createAtlas,
+  createCompoundCollider,
   createInputMap,
   createInputRecorder,
+  createNineSlice,
   createPlayerInput,
   createSprite,
   createTag,
@@ -5775,6 +6416,7 @@ export {
   flee,
   getGroupVolume,
   globalInputContext,
+  hotReloadPlugin,
   overlapBox,
   overlapCircle,
   patrol,
@@ -5798,14 +6440,17 @@ export {
   useCollisionExit,
   useCollisionStay,
   useCoordinates,
+  useCutscene,
   useDamageZone,
   useDestroyEntity,
+  useDialogue,
   useDropThrough,
   useEntity,
   useEvent,
   useEvents,
   useGame,
   useGameStateMachine,
+  useGameStore,
   useGamepad,
   useHealth,
   useInput,