cubeforge 0.0.5 → 0.0.7

package/dist/index.js

@@ -1,48 +1,94 @@
 // src/components/Game.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 // ../core/src/ecs/world.ts
 class ECSWorld {
   nextId = 0;
-  entities = new Set;
-  components = new Map;
+  componentIndex = new Map;
+  _rngState = 0;
+  _deterministic = false;
+  archetypes = new Map;
+  entityArchetype = new Map;
   systems = [];
   queryCache = new Map;
   dirtyTypes = new Set;
   dirtyAll = false;
+  getOrCreateArchetype(types) {
+    const arr = [...types].sort();
+    const key = arr.join("\x00");
+    let arch = this.archetypes.get(key);
+    if (!arch) {
+      arch = { key, types: new Set(arr), entities: [] };
+      this.archetypes.set(key, arch);
+    }
+    return arch;
+  }
+  moveToArchetype(id, newArch) {
+    const oldKey = this.entityArchetype.get(id);
+    if (oldKey !== undefined) {
+      const oldArch = this.archetypes.get(oldKey);
+      if (oldArch) {
+        const idx = oldArch.entities.indexOf(id);
+        if (idx !== -1)
+          oldArch.entities.splice(idx, 1);
+      }
+    }
+    newArch.entities.push(id);
+    this.entityArchetype.set(id, newArch.key);
+  }
   createEntity() {
     const id = this.nextId++;
-    this.entities.add(id);
-    this.components.set(id, new Map);
+    this.componentIndex.set(id, new Map);
+    const emptyArch = this.getOrCreateArchetype([]);
+    emptyArch.entities.push(id);
+    this.entityArchetype.set(id, emptyArch.key);
     this.dirtyAll = true;
     return id;
   }
   destroyEntity(id) {
-    const comps = this.components.get(id);
+    const comps = this.componentIndex.get(id);
     if (comps) {
-      for (const type of comps.keys()) {
+      for (const type of comps.keys())
         this.dirtyTypes.add(type);
+    }
+    const archKey = this.entityArchetype.get(id);
+    if (archKey !== undefined) {
+      const arch = this.archetypes.get(archKey);
+      if (arch) {
+        const idx = arch.entities.indexOf(id);
+        if (idx !== -1)
+          arch.entities.splice(idx, 1);
       }
     }
-    this.entities.delete(id);
-    this.components.delete(id);
+    this.componentIndex.delete(id);
+    this.entityArchetype.delete(id);
     this.dirtyAll = true;
   }
   hasEntity(id) {
-    return this.entities.has(id);
+    return this.componentIndex.has(id);
   }
   addComponent(id, component) {
-    this.components.get(id)?.set(component.type, component);
+    const comps = this.componentIndex.get(id);
+    if (!comps)
+      return;
+    comps.set(component.type, component);
     this.dirtyTypes.add(component.type);
+    const newArch = this.getOrCreateArchetype(comps.keys());
+    this.moveToArchetype(id, newArch);
   }
   removeComponent(id, type) {
-    this.components.get(id)?.delete(type);
+    const comps = this.componentIndex.get(id);
+    if (!comps)
+      return;
+    comps.delete(type);
     this.dirtyTypes.add(type);
+    const newArch = this.getOrCreateArchetype(comps.keys());
+    this.moveToArchetype(id, newArch);
   }
   getComponent(id, type) {
-    return this.components.get(id)?.get(type);
+    return this.componentIndex.get(id)?.get(type);
   }
   hasComponent(id, type) {
-    return this.components.get(id)?.has(type) ?? false;
+    return this.componentIndex.get(id)?.has(type) ?? false;
   }
   query(...types) {
     const key = types.slice().sort().join("\x00");
@@ -50,36 +96,77 @@ class ECSWorld {
     if (cached)
       return cached;
     const result = [];
-    for (const id of this.entities) {
-      const comps = this.components.get(id);
-      let match = true;
-      for (const t of types) {
-        if (!comps.has(t)) {
-          match = false;
-          break;
-        }
+    for (const arch of this.archetypes.values()) {
+      if (types.every((t) => arch.types.has(t))) {
+        for (const id of arch.entities)
+          result.push(id);
       }
-      if (match)
-        result.push(id);
     }
     this.queryCache.set(key, result);
     return result;
   }
   queryOne(...types) {
-    for (const id of this.entities) {
-      const comps = this.components.get(id);
-      let match = true;
-      for (const t of types) {
-        if (!comps.has(t)) {
-          match = false;
-          break;
-        }
+    for (const arch of this.archetypes.values()) {
+      if (types.every((t) => arch.types.has(t))) {
+        if (arch.entities.length > 0)
+          return arch.entities[0];
       }
-      if (match)
+    }
+    return;
+  }
+  findByTag(tag) {
+    for (const id of this.query("Tag")) {
+      const t = this.getComponent(id, "Tag");
+      if (t?.tags.includes(tag))
         return id;
     }
     return;
   }
+  findAllByTag(tag) {
+    const result = [];
+    for (const id of this.query("Tag")) {
+      const t = this.getComponent(id, "Tag");
+      if (t?.tags.includes(tag))
+        result.push(id);
+    }
+    return result;
+  }
+  setDeterministicSeed(seed) {
+    this._rngState = seed >>> 0;
+    this._deterministic = true;
+  }
+  rng() {
+    if (!this._deterministic)
+      return Math.random();
+    this._rngState = Math.imul(this._rngState, 1664525) + 1013904223 >>> 0;
+    return this._rngState / 4294967296;
+  }
+  getSnapshot() {
+    const entities = [];
+    for (const [id, comps] of this.componentIndex) {
+      const components = [];
+      for (const comp of comps.values()) {
+        components.push(JSON.parse(JSON.stringify(comp)));
+      }
+      entities.push({ id, components });
+    }
+    return { nextId: this.nextId, rngState: this._rngState, entities };
+  }
+  restoreSnapshot(snapshot) {
+    this.clear();
+    this.nextId = snapshot.nextId;
+    this._rngState = snapshot.rngState;
+    for (const { id, components } of snapshot.entities) {
+      const compMap = new Map;
+      for (const comp of components)
+        compMap.set(comp.type, comp);
+      this.componentIndex.set(id, compMap);
+      const arch = this.getOrCreateArchetype(compMap.keys());
+      arch.entities.push(id);
+      this.entityArchetype.set(id, arch.key);
+    }
+    this.dirtyAll = true;
+  }
   addSystem(system) {
     this.systems.push(system);
   }
@@ -110,17 +197,30 @@ class ECSWorld {
     }
   }
   clear() {
-    this.entities.clear();
-    this.components.clear();
+    this.componentIndex.clear();
+    this.archetypes.clear();
+    this.entityArchetype.clear();
     this.queryCache.clear();
     this.dirtyTypes.clear();
     this.dirtyAll = false;
     this.nextId = 0;
+    this._rngState = 0;
+    this._deterministic = false;
   }
   get entityCount() {
-    return this.entities.size;
+    return this.componentIndex.size;
   }
 }
+// ../core/src/ecs/worldQueries.ts
+function findByTag(world, tag) {
+  const results = [];
+  for (const id of world.query("Tag")) {
+    const t = world.getComponent(id, "Tag");
+    if (t?.tags.includes(tag))
+      results.push(id);
+  }
+  return results;
+}
 // ../core/src/loop/gameLoop.ts
 class GameLoop {
   onTick;
@@ -532,6 +632,24 @@ class InputManager {
     return this.keyboard.isReleased(key);
   }
 }
+// ../input/src/inputMap.ts
+function createInputMap(bindings) {
+  const normalized = {};
+  for (const [action, keys] of Object.entries(bindings)) {
+    normalized[action] = Array.isArray(keys) ? keys : [keys];
+  }
+  return {
+    isActionDown(input, action) {
+      return (normalized[action] ?? []).some((k) => input.isDown(k));
+    },
+    isActionPressed(input, action) {
+      return (normalized[action] ?? []).some((k) => input.isPressed(k));
+    },
+    isActionReleased(input, action) {
+      return (normalized[action] ?? []).some((k) => input.isReleased(k));
+    }
+  };
+}
 // ../renderer/src/canvas2d.ts
 class Canvas2DRenderer {
   canvas;
@@ -583,6 +701,8 @@ function createCamera2D(opts) {
     zoom: 1,
     smoothing: 0,
     background: "#1a1a2e",
+    followOffsetX: 0,
+    followOffsetY: 0,
     shakeIntensity: 0,
     shakeDuration: 0,
     shakeTimer: 0,
@@ -639,25 +759,27 @@ class RenderSystem {
         if (targetId !== undefined) {
           const targetTransform = world2.getComponent(targetId, "Transform");
           if (targetTransform) {
+            const tx = targetTransform.x + (cam.followOffsetX ?? 0);
+            const ty = targetTransform.y + (cam.followOffsetY ?? 0);
             if (cam.deadZone) {
               const halfW = cam.deadZone.w / 2;
               const halfH = cam.deadZone.h / 2;
-              const dx = targetTransform.x - cam.x;
-              const dy = targetTransform.y - cam.y;
+              const dx = tx - cam.x;
+              const dy = ty - cam.y;
               if (dx > halfW)
-                cam.x = targetTransform.x - halfW;
+                cam.x = tx - halfW;
               else if (dx < -halfW)
-                cam.x = targetTransform.x + halfW;
+                cam.x = tx + halfW;
               if (dy > halfH)
-                cam.y = targetTransform.y - halfH;
+                cam.y = ty - halfH;
               else if (dy < -halfH)
-                cam.y = targetTransform.y + halfH;
+                cam.y = ty + halfH;
             } else if (cam.smoothing > 0) {
-              cam.x += (targetTransform.x - cam.x) * (1 - cam.smoothing);
-              cam.y += (targetTransform.y - cam.y) * (1 - cam.smoothing);
+              cam.x += (tx - cam.x) * (1 - cam.smoothing);
+              cam.y += (ty - cam.y) * (1 - cam.smoothing);
             } else {
-              cam.x = targetTransform.x;
-              cam.y = targetTransform.y;
+              cam.x = tx;
+              cam.y = ty;
             }
           }
         }
@@ -673,8 +795,8 @@ class RenderSystem {
         if (cam.shakeTimer < 0)
           cam.shakeTimer = 0;
         const progress = cam.shakeDuration > 0 ? cam.shakeTimer / cam.shakeDuration : 0;
-        shakeX = (Math.random() * 2 - 1) * cam.shakeIntensity * progress;
-        shakeY = (Math.random() * 2 - 1) * cam.shakeIntensity * progress;
+        shakeX = (world2.rng() * 2 - 1) * cam.shakeIntensity * progress;
+        shakeY = (world2.rng() * 2 - 1) * cam.shakeIntensity * progress;
       }
       camX = cam.x;
       camY = cam.y;
@@ -691,7 +813,16 @@ class RenderSystem {
         anim.timer -= frameDuration;
         anim.currentIndex++;
         if (anim.currentIndex >= anim.frames.length) {
-          anim.currentIndex = anim.loop ? 0 : anim.frames.length - 1;
+          if (anim.loop) {
+            anim.currentIndex = 0;
+          } else {
+            anim.currentIndex = anim.frames.length - 1;
+            anim.playing = false;
+            if (anim.onComplete && !anim._completed) {
+              anim._completed = true;
+              anim.onComplete();
+            }
+          }
         }
       }
       sprite.frameIndex = anim.frames[anim.currentIndex];
@@ -755,10 +886,27 @@ class RenderSystem {
     ctx.translate(canvas.width / 2 - camX * zoom + shakeX, canvas.height / 2 - camY * zoom + shakeY);
     ctx.scale(zoom, zoom);
     const renderables = world2.query("Transform", "Sprite");
+    const textureKey = (id) => {
+      const sprite = world2.getComponent(id, "Sprite");
+      if (sprite.image && sprite.image.src)
+        return sprite.image.src;
+      if (sprite.src)
+        return sprite.src;
+      return `__color__:${sprite.color}`;
+    };
     renderables.sort((a, b) => {
-      const za = world2.getComponent(a, "Sprite").zIndex;
-      const zb = world2.getComponent(b, "Sprite").zIndex;
-      return za - zb;
+      const sa = world2.getComponent(a, "Sprite");
+      const sb = world2.getComponent(b, "Sprite");
+      const zDiff = sa.zIndex - sb.zIndex;
+      if (zDiff !== 0)
+        return zDiff;
+      const ka = textureKey(a);
+      const kb = textureKey(b);
+      if (ka < kb)
+        return -1;
+      if (ka > kb)
+        return 1;
+      return 0;
     });
     for (const id of renderables) {
       const transform2 = world2.getComponent(id, "Transform");
@@ -809,8 +957,8 @@ class RenderSystem {
         const spawnCount = Math.floor(pool.timer * pool.rate);
         pool.timer -= spawnCount / pool.rate;
         for (let i = 0;i < spawnCount && pool.particles.length < pool.maxParticles; i++) {
-          const angle = pool.angle + (Math.random() - 0.5) * pool.spread;
-          const speed = pool.speed * (0.5 + Math.random() * 0.5);
+          const angle = pool.angle + (world2.rng() - 0.5) * pool.spread;
+          const speed = pool.speed * (0.5 + world2.rng() * 0.5);
           pool.particles.push({
             x: t.x,
             y: t.y,
@@ -868,6 +1016,8 @@ function createRigidBody(opts) {
     isNearGround: false,
     bounce: 0,
     friction: 0.85,
+    lockX: false,
+    lockY: false,
     ...opts
   };
 }
@@ -881,7 +1031,22 @@ function createBoxCollider(width, height, opts) {
     offsetY: 0,
     isTrigger: false,
     layer: "default",
+    mask: "*",
     slope: 0,
+    oneWay: false,
+    ...opts
+  };
+}
+// ../physics/src/components/circleCollider.ts
+function createCircleCollider(radius, opts) {
+  return {
+    type: "CircleCollider",
+    radius,
+    offsetX: 0,
+    offsetY: 0,
+    isTrigger: false,
+    layer: "default",
+    mask: "*",
     ...opts
   };
 }
@@ -919,12 +1084,27 @@ function getSlopeSurfaceY(st, sc, worldX) {
   const angleRad = sc.slope * (Math.PI / 180);
   return cy - hh + dx * Math.tan(angleRad);
 }
+function maskAllows(mask, layer) {
+  if (mask === "*")
+    return true;
+  return Array.isArray(mask) && mask.includes(layer);
+}
+function canInteract(a, b) {
+  return maskAllows(a.mask, b.layer) && maskAllows(b.mask, a.layer);
+}
+function pairKey(a, b) {
+  return a < b ? `${a}:${b}` : `${b}:${a}`;
+}
 
 class PhysicsSystem {
   gravity;
   events;
   accumulator = 0;
   FIXED_DT = 1 / 60;
+  activeTriggerPairs = new Map;
+  activeCollisionPairs = new Map;
+  activeCirclePairs = new Map;
+  staticPrevPos = new Map;
   constructor(gravity, events) {
     this.gravity = gravity;
     this.events = events;
@@ -965,6 +1145,30 @@ class PhysicsSystem {
       else
         dynamics.push(id);
     }
+    for (const [key, [a, b]] of this.activeTriggerPairs) {
+      if (!world2.hasEntity(a) || !world2.hasEntity(b)) {
+        this.events?.emit("triggerExit", { a, b });
+        this.activeTriggerPairs.delete(key);
+      }
+    }
+    for (const [key, [a, b]] of this.activeCollisionPairs) {
+      if (!world2.hasEntity(a) || !world2.hasEntity(b)) {
+        this.events?.emit("collisionExit", { a, b });
+        this.activeCollisionPairs.delete(key);
+      }
+    }
+    const staticDelta = new Map;
+    for (const sid of statics) {
+      const st = world2.getComponent(sid, "Transform");
+      const prev = this.staticPrevPos.get(sid);
+      if (prev)
+        staticDelta.set(sid, { dx: st.x - prev.x, dy: st.y - prev.y });
+      this.staticPrevPos.set(sid, { x: st.x, y: st.y });
+    }
+    for (const sid of this.staticPrevPos.keys()) {
+      if (!world2.hasEntity(sid))
+        this.staticPrevPos.delete(sid);
+    }
     const staticGrid = new Map;
     for (const sid of statics) {
       const st = world2.getComponent(sid, "Transform");
@@ -983,7 +1187,12 @@ class PhysicsSystem {
       const rb = world2.getComponent(id, "RigidBody");
       rb.onGround = false;
       rb.isNearGround = false;
-      rb.vy += this.gravity * rb.gravityScale * dt;
+      if (!rb.lockY)
+        rb.vy += this.gravity * rb.gravityScale * dt;
+      if (rb.lockX)
+        rb.vx = 0;
+      if (rb.lockY)
+        rb.vy = 0;
     }
     for (const id of dynamics) {
       const transform2 = world2.getComponent(id, "Transform");
@@ -1008,6 +1217,8 @@ class PhysicsSystem {
               continue;
             if (sc.slope !== 0)
               continue;
+            if (!canInteract(col, sc))
+              continue;
             const ov = getOverlap(getAABB(transform2, col), getAABB(st, sc));
             if (!ov)
               continue;
@@ -1040,6 +1251,8 @@ class PhysicsSystem {
             const sc = world2.getComponent(sid, "BoxCollider");
             if (sc.isTrigger)
               continue;
+            if (!canInteract(col, sc))
+              continue;
             if (sc.slope !== 0) {
               const ov2 = getOverlap(getAABB(transform2, col), getAABB(st, sc));
               if (!ov2)
@@ -1060,11 +1273,25 @@ class PhysicsSystem {
             if (!ov)
               continue;
             if (Math.abs(ov.y) <= Math.abs(ov.x)) {
+              if (sc.oneWay) {
+                if (ov.y >= 0)
+                  continue;
+                const platformTop = st.y + sc.offsetY - sc.height / 2;
+                const prevEntityBottom = transform2.y - rb.vy * dt + col.offsetY + col.height / 2;
+                if (prevEntityBottom > platformTop)
+                  continue;
+              }
               transform2.y += ov.y;
               if (ov.y < 0) {
                 rb.onGround = true;
                 if (rb.friction < 1)
                   rb.vx *= rb.friction;
+                const delta = staticDelta.get(sid);
+                if (delta) {
+                  transform2.x += delta.dx;
+                  if (delta.dy < 0)
+                    transform2.y += delta.dy;
+                }
               }
               rb.vy = rb.bounce > 0 ? -rb.vy * rb.bounce : 0;
             }
@@ -1072,6 +1299,7 @@ class PhysicsSystem {
         }
       }
     }
+    const currentCollisionPairs = new Map;
     for (let i = 0;i < dynamics.length; i++) {
       for (let j = i + 1;j < dynamics.length; j++) {
         const ia = dynamics[i];
@@ -1083,10 +1311,10 @@ class PhysicsSystem {
         const ov = getOverlap(getAABB(ta, ca), getAABB(tb, cb));
         if (!ov)
           continue;
-        if (ca.isTrigger || cb.isTrigger) {
-          this.events?.emit("trigger", { a: ia, b: ib });
+        if (!canInteract(ca, cb))
+          continue;
+        if (ca.isTrigger || cb.isTrigger)
           continue;
-        }
         const rba = world2.getComponent(ia, "RigidBody");
         const rbb = world2.getComponent(ib, "RigidBody");
         if (Math.abs(ov.y) <= Math.abs(ov.x)) {
@@ -1108,9 +1336,22 @@ class PhysicsSystem {
         ta.y += ov.y / 2;
         tb.x -= ov.x / 2;
         tb.y -= ov.y / 2;
-        this.events?.emit("collision", { a: ia, b: ib });
+        const key = pairKey(ia, ib);
+        currentCollisionPairs.set(key, [ia, ib]);
       }
     }
+    for (const [key, [a, b]] of currentCollisionPairs) {
+      if (!this.activeCollisionPairs.has(key)) {
+        this.events?.emit("collisionEnter", { a, b });
+      }
+      this.events?.emit("collision", { a, b });
+    }
+    for (const [key, [a, b]] of this.activeCollisionPairs) {
+      if (!currentCollisionPairs.has(key)) {
+        this.events?.emit("collisionExit", { a, b });
+      }
+    }
+    this.activeCollisionPairs = currentCollisionPairs;
     for (const id of dynamics) {
       const rb = world2.getComponent(id, "RigidBody");
       if (rb.onGround) {
@@ -1140,6 +1381,8 @@ class PhysicsSystem {
             const sc = world2.getComponent(sid, "BoxCollider");
             if (sc.isTrigger)
               continue;
+            if (!canInteract(col, sc))
+              continue;
             const ov = getOverlap(probeAABB, getAABB(st, sc));
             if (ov && Math.abs(ov.y) <= Math.abs(ov.x) && ov.y < 0) {
               rb.isNearGround = true;
@@ -1148,7 +1391,194 @@ class PhysicsSystem {
           }
         }
     }
+    const allWithCollider = world2.query("Transform", "BoxCollider");
+    const currentTriggerPairs = new Map;
+    for (let i = 0;i < allWithCollider.length; i++) {
+      for (let j = i + 1;j < allWithCollider.length; j++) {
+        const ia = allWithCollider[i];
+        const ib = allWithCollider[j];
+        const ca = world2.getComponent(ia, "BoxCollider");
+        const cb = world2.getComponent(ib, "BoxCollider");
+        if (!ca.isTrigger && !cb.isTrigger)
+          continue;
+        if (!canInteract(ca, cb))
+          continue;
+        const ta = world2.getComponent(ia, "Transform");
+        const tb = world2.getComponent(ib, "Transform");
+        const ov = getOverlap(getAABB(ta, ca), getAABB(tb, cb));
+        if (!ov)
+          continue;
+        const key = pairKey(ia, ib);
+        currentTriggerPairs.set(key, [ia, ib]);
+      }
+    }
+    for (const [key, [a, b]] of currentTriggerPairs) {
+      if (!this.activeTriggerPairs.has(key)) {
+        this.events?.emit("triggerEnter", { a, b });
+      }
+      this.events?.emit("trigger", { a, b });
+    }
+    for (const [key, [a, b]] of this.activeTriggerPairs) {
+      if (!currentTriggerPairs.has(key)) {
+        this.events?.emit("triggerExit", { a, b });
+      }
+    }
+    this.activeTriggerPairs = currentTriggerPairs;
+    const allCircles = world2.query("Transform", "CircleCollider");
+    if (allCircles.length > 0) {
+      const currentCirclePairs = new Map;
+      for (let i = 0;i < allCircles.length; i++) {
+        for (let j = i + 1;j < allCircles.length; j++) {
+          const ia = allCircles[i];
+          const ib = allCircles[j];
+          const ca = world2.getComponent(ia, "CircleCollider");
+          const cb = world2.getComponent(ib, "CircleCollider");
+          if (!maskAllows(ca.mask, cb.layer) || !maskAllows(cb.mask, ca.layer))
+            continue;
+          const ta = world2.getComponent(ia, "Transform");
+          const tb = world2.getComponent(ib, "Transform");
+          const dx = ta.x + ca.offsetX - (tb.x + cb.offsetX);
+          const dy = ta.y + ca.offsetY - (tb.y + cb.offsetY);
+          if (dx * dx + dy * dy < (ca.radius + cb.radius) ** 2) {
+            currentCirclePairs.set(pairKey(ia, ib), [ia, ib]);
+          }
+        }
+      }
+      const allBoxes = world2.query("Transform", "BoxCollider");
+      for (const cid of allCircles) {
+        const cc = world2.getComponent(cid, "CircleCollider");
+        const ct = world2.getComponent(cid, "Transform");
+        const cx = ct.x + cc.offsetX;
+        const cy = ct.y + cc.offsetY;
+        for (const bid of allBoxes) {
+          if (bid === cid)
+            continue;
+          const bc = world2.getComponent(bid, "BoxCollider");
+          if (!maskAllows(cc.mask, bc.layer) || !maskAllows(bc.mask, cc.layer))
+            continue;
+          const bt = world2.getComponent(bid, "Transform");
+          const bx = bt.x + bc.offsetX;
+          const by = bt.y + bc.offsetY;
+          const nearX = Math.max(bx - bc.width / 2, Math.min(cx, bx + bc.width / 2));
+          const nearY = Math.max(by - bc.height / 2, Math.min(cy, by + bc.height / 2));
+          const dx = cx - nearX;
+          const dy = cy - nearY;
+          if (dx * dx + dy * dy < cc.radius * cc.radius) {
+            currentCirclePairs.set(pairKey(cid, bid), [cid, bid]);
+          }
+        }
+      }
+      for (const [key, [a, b]] of currentCirclePairs) {
+        if (!this.activeCirclePairs.has(key)) {
+          this.events?.emit("circleEnter", { a, b });
+        }
+        this.events?.emit("circle", { a, b });
+      }
+      for (const [key, [a, b]] of this.activeCirclePairs) {
+        if (!currentCirclePairs.has(key)) {
+          this.events?.emit("circleExit", { a, b });
+        }
+      }
+      this.activeCirclePairs = currentCirclePairs;
+    }
+  }
+}
+// ../physics/src/queries.ts
+function passesFilter(world2, id, col, opts) {
+  if (opts.exclude?.includes(id))
+    return false;
+  if (opts.layer && col.layer !== opts.layer)
+    return false;
+  if (opts.tag) {
+    const t = world2.getComponent(id, "Tag");
+    if (!t?.tags.includes(opts.tag))
+      return false;
+  }
+  return true;
+}
+function overlapBox(world2, cx, cy, hw, hh, opts = {}) {
+  const results = [];
+  for (const id of world2.query("Transform", "BoxCollider")) {
+    const t = world2.getComponent(id, "Transform");
+    const c = world2.getComponent(id, "BoxCollider");
+    if (!passesFilter(world2, id, c, opts))
+      continue;
+    const ecx = t.x + c.offsetX;
+    const ecy = t.y + c.offsetY;
+    const ehw = c.width / 2;
+    const ehh = c.height / 2;
+    if (Math.abs(ecx - cx) < hw + ehw && Math.abs(ecy - cy) < hh + ehh) {
+      results.push(id);
+    }
   }
+  return results;
+}
+function raycast(world2, origin, direction, maxDistance, opts = {}) {
+  const len = Math.hypot(direction.x, direction.y);
+  if (len === 0)
+    return null;
+  const dx = direction.x / len;
+  const dy = direction.y / len;
+  let closest = null;
+  for (const id of world2.query("Transform", "BoxCollider")) {
+    const t = world2.getComponent(id, "Transform");
+    const c = world2.getComponent(id, "BoxCollider");
+    if (!opts.includeTriggers && c.isTrigger)
+      continue;
+    if (!passesFilter(world2, id, c, opts))
+      continue;
+    const cx = t.x + c.offsetX;
+    const cy = t.y + c.offsetY;
+    const hw = c.width / 2;
+    const hh = c.height / 2;
+    const left = cx - hw;
+    const right = cx + hw;
+    const top = cy - hh;
+    const bottom = cy + hh;
+    let tmin = -Infinity;
+    let tmax = Infinity;
+    if (dx !== 0) {
+      const t1 = (left - origin.x) / dx;
+      const t2 = (right - origin.x) / dx;
+      tmin = Math.max(tmin, Math.min(t1, t2));
+      tmax = Math.min(tmax, Math.max(t1, t2));
+    } else if (origin.x < left || origin.x > right) {
+      continue;
+    }
+    if (dy !== 0) {
+      const t1 = (top - origin.y) / dy;
+      const t2 = (bottom - origin.y) / dy;
+      tmin = Math.max(tmin, Math.min(t1, t2));
+      tmax = Math.min(tmax, Math.max(t1, t2));
+    } else if (origin.y < top || origin.y > bottom) {
+      continue;
+    }
+    if (tmax < 0 || tmin > tmax || tmin > maxDistance)
+      continue;
+    const dist = Math.max(0, tmin);
+    if (closest && dist >= closest.distance)
+      continue;
+    const hitX = origin.x + dx * tmin;
+    const hitY = origin.y + dy * tmin;
+    let nx = 0;
+    let ny = 0;
+    const edgeEps = 0.001;
+    if (Math.abs(hitX - left) < edgeEps)
+      nx = -1;
+    else if (Math.abs(hitX - right) < edgeEps)
+      nx = 1;
+    else if (Math.abs(hitY - top) < edgeEps)
+      ny = -1;
+    else if (Math.abs(hitY - bottom) < edgeEps)
+      ny = 1;
+    closest = {
+      entityId: id,
+      distance: dist,
+      point: { x: hitX, y: hitY },
+      normal: { x: nx, y: ny }
+    };
+  }
+  return closest;
 }
 // src/context.ts
 import { createContext } from "react";
@@ -1253,34 +1683,350 @@ class DebugSystem {
   }
 }
 
+// src/components/DevTools.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+import { useState, useEffect, useCallback } from "react";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+var MAX_DEVTOOLS_FRAMES = 600;
+var css = {
+  overlay: {
+    position: "fixed",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 99999,
+    fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
+    fontSize: 11,
+    color: "#cdd6f4",
+    userSelect: "none",
+    pointerEvents: "auto"
+  },
+  bar: {
+    background: "rgba(11,13,20,0.97)",
+    borderTop: "1px solid #2a3048",
+    padding: "6px 12px",
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    height: 40
+  },
+  badge: {
+    fontSize: 9,
+    fontWeight: 700,
+    letterSpacing: "0.1em",
+    color: "#4fc3f7",
+    background: "rgba(79,195,247,0.1)",
+    border: "1px solid rgba(79,195,247,0.2)",
+    borderRadius: 4,
+    padding: "2px 6px",
+    flexShrink: 0
+  },
+  btn: (active = false, danger = false) => ({
+    background: active ? "rgba(79,195,247,0.15)" : "rgba(255,255,255,0.04)",
+    border: `1px solid ${active ? "rgba(79,195,247,0.3)" : "#2a3048"}`,
+    borderRadius: 4,
+    color: danger ? "#f38ba8" : active ? "#4fc3f7" : "#6b7a9e",
+    cursor: "pointer",
+    padding: "3px 8px",
+    fontSize: 10,
+    fontFamily: "inherit",
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    transition: "all 0.1s",
+    flexShrink: 0
+  }),
+  scrubber: {
+    flex: 1,
+    accentColor: "#4fc3f7",
+    cursor: "pointer",
+    height: 4
+  },
+  counter: {
+    color: "#6b7a9e",
+    fontSize: 10,
+    whiteSpace: "nowrap",
+    flexShrink: 0,
+    minWidth: 80,
+    textAlign: "right"
+  },
+  panel: {
+    background: "rgba(11,13,20,0.97)",
+    borderTop: "1px solid #1f2435",
+    maxHeight: 260,
+    overflowY: "auto",
+    padding: "8px 0"
+  },
+  entityRow: (selected) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "4px 12px",
+    cursor: "pointer",
+    background: selected ? "rgba(79,195,247,0.06)" : "transparent",
+    borderLeft: `2px solid ${selected ? "#4fc3f7" : "transparent"}`
+  }),
+  entityId: {
+    color: "#4fc3f7",
+    minWidth: 28,
+    fontSize: 10
+  },
+  compPill: {
+    fontSize: 9,
+    background: "rgba(79,195,247,0.08)",
+    border: "1px solid rgba(79,195,247,0.12)",
+    borderRadius: 3,
+    padding: "1px 5px",
+    color: "#6b7a9e"
+  },
+  detailPanel: {
+    background: "rgba(18,21,31,0.98)",
+    borderTop: "1px solid #1f2435",
+    padding: "10px 14px",
+    maxHeight: 200,
+    overflowY: "auto"
+  },
+  kv: {
+    display: "grid",
+    gridTemplateColumns: "140px 1fr",
+    gap: "2px 12px",
+    lineHeight: 1.8
+  },
+  key: { color: "#6b7a9e" },
+  val: { color: "#cdd6f4" }
+};
+function DevToolsOverlay({ handle, loop, ecs }) {
+  const [, forceUpdate] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [panelOpen, setPanelOpen] = useState(false);
+  const [selectedEntity, setSelectedEntity] = useState(null);
+  useEffect(() => {
+    handle.onFrame = () => {
+      if (!paused) {
+        forceUpdate((n) => n + 1);
+        setSelectedIdx(Math.max(0, handle.buffer.length - 1));
+      }
+    };
+    return () => {
+      handle.onFrame = undefined;
+    };
+  }, [handle, paused]);
+  const totalFrames = handle.buffer.length;
+  const currentSnap = handle.buffer[selectedIdx];
+  const handlePauseResume = useCallback(() => {
+    if (paused) {
+      if (currentSnap)
+        ecs.restoreSnapshot(currentSnap);
+      loop.resume();
+      setPaused(false);
+      setSelectedEntity(null);
+    } else {
+      loop.pause();
+      setPaused(true);
+      setSelectedIdx(Math.max(0, handle.buffer.length - 1));
+    }
+  }, [paused, currentSnap, ecs, loop, handle]);
+  const stepBack = useCallback(() => {
+    setSelectedIdx((i) => Math.max(0, i - 1));
+    setSelectedEntity(null);
+  }, []);
+  const stepForward = useCallback(() => {
+    setSelectedIdx((i) => Math.min(handle.buffer.length - 1, i + 1));
+    setSelectedEntity(null);
+  }, [handle]);
+  const frameLabel = totalFrames === 0 ? "0 / 0" : `${selectedIdx + 1} / ${totalFrames}`;
+  const entities = currentSnap?.entities ?? [];
+  const selectedEntityData = selectedEntity !== null ? entities.find((e) => e.id === selectedEntity) : null;
+  return createPortal(/* @__PURE__ */ jsxDEV("div", {
+    style: css.overlay,
+    children: [
+      panelOpen && paused && /* @__PURE__ */ jsxDEV(Fragment, {
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            style: css.panel,
+            children: [
+              entities.length === 0 && /* @__PURE__ */ jsxDEV("div", {
+                style: { padding: "4px 14px", color: "#3d4666" },
+                children: "No entities"
+              }, undefined, false, undefined, this),
+              entities.map((e) => /* @__PURE__ */ jsxDEV("div", {
+                style: css.entityRow(selectedEntity === e.id),
+                onClick: () => setSelectedEntity((s) => s === e.id ? null : e.id),
+                children: [
+                  /* @__PURE__ */ jsxDEV("span", {
+                    style: css.entityId,
+                    children: [
+                      "#",
+                      e.id
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    style: { display: "flex", gap: 4, flexWrap: "wrap" },
+                    children: e.components.map((c) => /* @__PURE__ */ jsxDEV("span", {
+                      style: css.compPill,
+                      children: c.type
+                    }, c.type, false, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, e.id, true, undefined, this))
+            ]
+          }, undefined, true, undefined, this),
+          selectedEntityData && /* @__PURE__ */ jsxDEV("div", {
+            style: css.detailPanel,
+            children: selectedEntityData.components.map((comp) => /* @__PURE__ */ jsxDEV("div", {
+              style: { marginBottom: 10 },
+              children: [
+                /* @__PURE__ */ jsxDEV("div", {
+                  style: { color: "#4fc3f7", fontSize: 10, fontWeight: 700, marginBottom: 4 },
+                  children: comp.type
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("div", {
+                  style: css.kv,
+                  children: Object.entries(comp).filter(([k]) => k !== "type").map(([k, v]) => /* @__PURE__ */ jsxDEV(React.Fragment, {
+                    children: [
+                      /* @__PURE__ */ jsxDEV("span", {
+                        style: css.key,
+                        children: k
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("span", {
+                        style: css.val,
+                        children: formatValue(v)
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, k, true, undefined, this))
+                }, undefined, false, undefined, this)
+              ]
+            }, comp.type, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        style: css.bar,
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            style: css.badge,
+            children: "DEVTOOLS"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("button", {
+            style: css.btn(paused),
+            onClick: handlePauseResume,
+            children: paused ? "▶ Resume" : "⏸ Pause"
+          }, undefined, false, undefined, this),
+          paused && /* @__PURE__ */ jsxDEV(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV("button", {
+                style: css.btn(),
+                onClick: stepBack,
+                children: "◀◀"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("button", {
+                style: css.btn(),
+                onClick: stepForward,
+                children: "▶▶"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("input", {
+            type: "range",
+            min: 0,
+            max: Math.max(0, totalFrames - 1),
+            value: selectedIdx,
+            style: css.scrubber,
+            onChange: (e) => {
+              const idx = Number(e.target.value);
+              setSelectedIdx(idx);
+              setSelectedEntity(null);
+              if (!paused) {
+                loop.pause();
+                setPaused(true);
+              }
+            }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            style: css.counter,
+            children: frameLabel
+          }, undefined, false, undefined, this),
+          paused && /* @__PURE__ */ jsxDEV("button", {
+            style: css.btn(panelOpen),
+            onClick: () => setPanelOpen((o) => !o),
+            children: [
+              panelOpen ? "▾" : "▸",
+              " Entities (",
+              entities.length,
+              ")"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("button", {
+            style: css.btn(false, true),
+            onClick: () => {
+              handle.buffer.length = 0;
+              setSelectedIdx(0);
+              forceUpdate((n) => n + 1);
+            },
+            children: "Clear"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this), document.body);
+}
+function formatValue(v) {
+  if (typeof v === "number")
+    return v.toFixed(2);
+  if (typeof v === "boolean")
+    return v ? "true" : "false";
+  if (v === null || v === undefined)
+    return "—";
+  if (typeof v === "object")
+    return JSON.stringify(v).slice(0, 60);
+  return String(v);
+}
+
 // src/components/Game.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 function Game({
   width = 800,
   height = 600,
   gravity = 980,
   debug = false,
+  devtools = false,
   scale = "none",
+  deterministic = false,
+  seed = 0,
   onReady,
   plugins,
+  renderer: CustomRenderer,
   style,
   className,
   children
 }) {
   const canvasRef = useRef(null);
   const wrapperRef = useRef(null);
-  const [engine, setEngine] = useState(null);
-  useEffect(() => {
+  const [engine, setEngine] = useState2(null);
+  const devtoolsHandle = useRef({ buffer: [] });
+  useEffect2(() => {
     const canvas = canvasRef.current;
     const ecs = new ECSWorld;
+    if (deterministic)
+      ecs.setDeterministicSeed(seed);
     const input = new InputManager;
-    const renderer = new Canvas2DRenderer(canvas);
     const events = new EventBus;
     const assets = new AssetManager;
     const physics = new PhysicsSystem(gravity, events);
     const entityIds = new Map;
-    const renderSystem2 = new RenderSystem(renderer, entityIds);
-    const debugSystem = debug ? new DebugSystem(renderer) : null;
+    let canvas2d2;
+    let builtinRenderSystem;
+    let renderSystem2;
+    if (CustomRenderer) {
+      renderSystem2 = new CustomRenderer(canvas, entityIds);
+    } else {
+      canvas2d2 = new Canvas2DRenderer(canvas);
+      builtinRenderSystem = new RenderSystem(canvas2d2, entityIds);
+      renderSystem2 = builtinRenderSystem;
+    }
+    const debugSystem = debug && canvas2d2 ? new DebugSystem(canvas2d2) : null;
     ecs.addSystem(new ScriptSystem(input));
     ecs.addSystem(physics);
     ecs.addSystem(renderSystem2);
@@ -1294,8 +2040,15 @@ function Game({
     const loop = new GameLoop((dt) => {
       ecs.update(dt);
       input.flush();
+      if (devtools) {
+        const handle = devtoolsHandle.current;
+        handle.buffer.push(ecs.getSnapshot());
+        if (handle.buffer.length > MAX_DEVTOOLS_FRAMES)
+          handle.buffer.shift();
+        handle.onFrame?.();
+      }
     });
-    const state = { ecs, input, renderer, physics, events, assets, loop, canvas, entityIds };
+    const state = { ecs, input, renderer: canvas2d2, renderSystem: builtinRenderSystem, physics, events, assets, loop, canvas, entityIds };
     setEngine(state);
     if (plugins) {
       for (const plugin2 of plugins) {
@@ -1339,7 +2092,7 @@ function Game({
       resizeObserver?.disconnect();
     };
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     engine?.physics.setGravity(gravity);
   }, [gravity, engine]);
   const canvasStyle = {
@@ -1349,13 +2102,13 @@ function Game({
     ...style
   };
   const wrapperStyle = scale === "contain" ? { position: "relative", width, height, overflow: "visible" } : {};
-  return /* @__PURE__ */ jsxDEV(EngineContext.Provider, {
+  return /* @__PURE__ */ jsxDEV2(EngineContext.Provider, {
     value: engine,
     children: [
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV2("div", {
         ref: wrapperRef,
         style: wrapperStyle,
-        children: /* @__PURE__ */ jsxDEV("canvas", {
+        children: /* @__PURE__ */ jsxDEV2("canvas", {
           ref: canvasRef,
           width,
           height,
@@ -1363,22 +2116,27 @@ function Game({
           className
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      engine && children
+      engine && children,
+      engine && devtools && /* @__PURE__ */ jsxDEV2(DevToolsOverlay, {
+        handle: devtoolsHandle.current,
+        loop: engine.loop,
+        ecs: engine.ecs
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 // src/components/World.tsx
-import { useEffect as useEffect2, useContext } from "react";
-import { jsxDEV as jsxDEV2, Fragment } from "react/jsx-dev-runtime";
+import { useEffect as useEffect3, useContext } from "react";
+import { jsxDEV as jsxDEV3, Fragment as Fragment2 } from "react/jsx-dev-runtime";
 function World({ gravity, background = "#1a1a2e", children }) {
   const engine = useContext(EngineContext);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!engine)
       return;
     if (gravity !== undefined)
       engine.physics.setGravity(gravity);
   }, [gravity, engine]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!engine)
       return;
     const camId = engine.ecs.queryOne("Camera2D");
@@ -1390,17 +2148,17 @@ function World({ gravity, background = "#1a1a2e", children }) {
       engine.canvas.style.background = background;
     }
   }, [background, engine]);
-  return /* @__PURE__ */ jsxDEV2(Fragment, {
+  return /* @__PURE__ */ jsxDEV3(Fragment2, {
     children
   }, undefined, false, undefined, this);
 }
 // src/components/Entity.tsx
-import { useEffect as useEffect3, useContext as useContext2, useState as useState2 } from "react";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+import { useEffect as useEffect4, useContext as useContext2, useState as useState3 } from "react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
 function Entity({ id, tags = [], children }) {
   const engine = useContext2(EngineContext);
-  const [entityId, setEntityId] = useState2(null);
-  useEffect3(() => {
+  const [entityId, setEntityId] = useState3(null);
+  useEffect4(() => {
     const eid = engine.ecs.createEntity();
     if (id) {
       if (engine.entityIds.has(id)) {
@@ -1419,21 +2177,21 @@ function Entity({ id, tags = [], children }) {
   }, []);
   if (entityId === null)
     return null;
-  return /* @__PURE__ */ jsxDEV3(EntityContext.Provider, {
+  return /* @__PURE__ */ jsxDEV4(EntityContext.Provider, {
     value: entityId,
     children
   }, undefined, false, undefined, this);
 }
 // src/components/Transform.tsx
-import { useEffect as useEffect4, useContext as useContext3 } from "react";
+import { useEffect as useEffect5, useContext as useContext3 } from "react";
 function Transform({ x = 0, y = 0, rotation = 0, scaleX = 1, scaleY = 1 }) {
   const engine = useContext3(EngineContext);
   const entityId = useContext3(EntityContext);
-  useEffect4(() => {
+  useEffect5(() => {
     engine.ecs.addComponent(entityId, createTransform(x, y, rotation, scaleX, scaleY));
     return () => engine.ecs.removeComponent(entityId, "Transform");
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     const comp = engine.ecs.getComponent(entityId, "Transform");
     if (comp) {
       comp.x = x;
@@ -1446,7 +2204,7 @@ function Transform({ x = 0, y = 0, rotation = 0, scaleX = 1, scaleY = 1 }) {
   return null;
 }
 // src/components/Sprite.tsx
-import { useEffect as useEffect5, useContext as useContext4 } from "react";
+import { useEffect as useEffect6, useContext as useContext4 } from "react";
 function Sprite({
   width,
   height,
@@ -1469,7 +2227,7 @@ function Sprite({
   const resolvedFrameIndex = atlas && frame != null ? atlas[frame] ?? 0 : frameIndex;
   const engine = useContext4(EngineContext);
   const entityId = useContext4(EntityContext);
-  useEffect5(() => {
+  useEffect6(() => {
     const comp = createSprite({
       width,
       height,
@@ -1497,7 +2255,7 @@ function Sprite({
     }
     return () => engine.ecs.removeComponent(entityId, "Sprite");
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     const comp = engine.ecs.getComponent(entityId, "Sprite");
     if (!comp)
       return;
@@ -1510,7 +2268,7 @@ function Sprite({
   return null;
 }
 // src/components/RigidBody.tsx
-import { useEffect as useEffect6, useContext as useContext5 } from "react";
+import { useEffect as useEffect7, useContext as useContext5 } from "react";
 function RigidBody({
   mass = 1,
   gravityScale = 1,
@@ -1518,30 +2276,34 @@ function RigidBody({
   bounce = 0,
   friction = 0.85,
   vx = 0,
-  vy = 0
+  vy = 0,
+  lockX = false,
+  lockY = false
 }) {
   const engine = useContext5(EngineContext);
   const entityId = useContext5(EntityContext);
-  useEffect6(() => {
-    engine.ecs.addComponent(entityId, createRigidBody({ mass, gravityScale, isStatic, bounce, friction, vx, vy }));
+  useEffect7(() => {
+    engine.ecs.addComponent(entityId, createRigidBody({ mass, gravityScale, isStatic, bounce, friction, vx, vy, lockX, lockY }));
     return () => engine.ecs.removeComponent(entityId, "RigidBody");
   }, []);
   return null;
 }
 // src/components/BoxCollider.tsx
-import { useEffect as useEffect7, useContext as useContext6 } from "react";
+import { useEffect as useEffect8, useContext as useContext6 } from "react";
 function BoxCollider({
   width,
   height,
   offsetX = 0,
   offsetY = 0,
   isTrigger = false,
-  layer = "default"
+  layer = "default",
+  mask = "*",
+  oneWay = false
 }) {
   const engine = useContext6(EngineContext);
   const entityId = useContext6(EntityContext);
-  useEffect7(() => {
-    engine.ecs.addComponent(entityId, createBoxCollider(width, height, { offsetX, offsetY, isTrigger, layer }));
+  useEffect8(() => {
+    engine.ecs.addComponent(entityId, createBoxCollider(width, height, { offsetX, offsetY, isTrigger, layer, mask, oneWay }));
     const checkId = setTimeout(() => {
       if (engine.ecs.hasEntity(entityId) && !engine.ecs.hasComponent(entityId, "Transform")) {
         console.warn(`[Cubeforge] BoxCollider on entity ${entityId} has no Transform. Physics requires Transform.`);
@@ -1554,12 +2316,30 @@ function BoxCollider({
   }, []);
   return null;
 }
-// src/components/Script.tsx
-import { useEffect as useEffect8, useContext as useContext7 } from "react";
-function Script({ init, update }) {
+// src/components/CircleCollider.tsx
+import { useEffect as useEffect9, useContext as useContext7 } from "react";
+function CircleCollider({
+  radius,
+  offsetX = 0,
+  offsetY = 0,
+  isTrigger = false,
+  layer = "default",
+  mask = "*"
+}) {
   const engine = useContext7(EngineContext);
   const entityId = useContext7(EntityContext);
-  useEffect8(() => {
+  useEffect9(() => {
+    engine.ecs.addComponent(entityId, createCircleCollider(radius, { offsetX, offsetY, isTrigger, layer, mask }));
+    return () => engine.ecs.removeComponent(entityId, "CircleCollider");
+  }, []);
+  return null;
+}
+// src/components/Script.tsx
+import { useEffect as useEffect10, useContext as useContext8 } from "react";
+function Script({ init, update }) {
+  const engine = useContext8(EngineContext);
+  const entityId = useContext8(EntityContext);
+  useEffect10(() => {
     if (init) {
       try {
         init(entityId, engine.ecs);
@@ -1573,17 +2353,19 @@ function Script({ init, update }) {
   return null;
 }
 // src/components/Camera2D.tsx
-import { useEffect as useEffect9, useContext as useContext8 } from "react";
+import { useEffect as useEffect11, useContext as useContext9 } from "react";
 function Camera2D({
   followEntity,
   zoom = 1,
   smoothing = 0,
   background = "#1a1a2e",
   bounds,
-  deadZone
+  deadZone,
+  followOffsetX = 0,
+  followOffsetY = 0
 }) {
-  const engine = useContext8(EngineContext);
-  useEffect9(() => {
+  const engine = useContext9(EngineContext);
+  useEffect11(() => {
     const entityId = engine.ecs.createEntity();
     engine.ecs.addComponent(entityId, createCamera2D({
       followEntityId: followEntity,
@@ -1591,11 +2373,13 @@ function Camera2D({
       smoothing,
       background,
       bounds,
-      deadZone
+      deadZone,
+      followOffsetX,
+      followOffsetY
     }));
     return () => engine.ecs.destroyEntity(entityId);
   }, []);
-  useEffect9(() => {
+  useEffect11(() => {
     const camId = engine.ecs.queryOne("Camera2D");
     if (camId === undefined)
       return;
@@ -1606,15 +2390,17 @@ function Camera2D({
     cam.background = background;
     cam.bounds = bounds;
     cam.deadZone = deadZone;
-  }, [followEntity, zoom, smoothing, background, bounds, deadZone, engine]);
+    cam.followOffsetX = followOffsetX;
+    cam.followOffsetY = followOffsetY;
+  }, [followEntity, zoom, smoothing, background, bounds, deadZone, followOffsetX, followOffsetY, engine]);
   return null;
 }
 // src/components/Animation.tsx
-import { useEffect as useEffect10, useContext as useContext9 } from "react";
-function Animation({ frames, fps = 12, loop = true, playing = true }) {
-  const engine = useContext9(EngineContext);
-  const entityId = useContext9(EntityContext);
-  useEffect10(() => {
+import { useEffect as useEffect12, useContext as useContext10 } from "react";
+function Animation({ frames, fps = 12, loop = true, playing = true, onComplete }) {
+  const engine = useContext10(EngineContext);
+  const entityId = useContext10(EntityContext);
+  useEffect12(() => {
     const state = {
       type: "AnimationState",
       frames,
@@ -1622,29 +2408,39 @@ function Animation({ frames, fps = 12, loop = true, playing = true }) {
       loop,
       playing,
       currentIndex: 0,
-      timer: 0
+      timer: 0,
+      _completed: false,
+      onComplete
     };
     engine.ecs.addComponent(entityId, state);
     return () => {
       engine.ecs.removeComponent(entityId, "AnimationState");
     };
   }, []);
-  useEffect10(() => {
+  useEffect12(() => {
     const anim = engine.ecs.getComponent(entityId, "AnimationState");
     if (!anim)
       return;
+    const wasFramesChanged = anim.frames !== frames;
     anim.playing = playing;
     anim.fps = fps;
     anim.loop = loop;
-  }, [playing, fps, loop, engine, entityId]);
+    anim.onComplete = onComplete;
+    if (wasFramesChanged) {
+      anim.frames = frames;
+      anim.currentIndex = 0;
+      anim.timer = 0;
+      anim._completed = false;
+    }
+  }, [playing, fps, loop, frames, onComplete, engine, entityId]);
   return null;
 }
 // src/components/SquashStretch.tsx
-import { useEffect as useEffect11, useContext as useContext10 } from "react";
+import { useEffect as useEffect13, useContext as useContext11 } from "react";
 function SquashStretch({ intensity = 0.2, recovery = 8 }) {
-  const engine = useContext10(EngineContext);
-  const entityId = useContext10(EntityContext);
-  useEffect11(() => {
+  const engine = useContext11(EngineContext);
+  const entityId = useContext11(EntityContext);
+  useEffect13(() => {
     engine.ecs.addComponent(entityId, {
       type: "SquashStretch",
       intensity,
@@ -1657,7 +2453,7 @@ function SquashStretch({ intensity = 0.2, recovery = 8 }) {
   return null;
 }
 // src/components/ParticleEmitter.tsx
-import { useEffect as useEffect12, useContext as useContext11 } from "react";
+import { useEffect as useEffect14, useContext as useContext12 } from "react";
 
 // src/components/particlePresets.ts
 var PARTICLE_PRESETS = {
@@ -1742,9 +2538,9 @@ function ParticleEmitter({
   const resolvedColor = color ?? presetConfig.color ?? "#ffffff";
   const resolvedGravity = gravity ?? presetConfig.gravity ?? 200;
   const resolvedMaxParticles = maxParticles ?? presetConfig.maxParticles ?? 100;
-  const engine = useContext11(EngineContext);
-  const entityId = useContext11(EntityContext);
-  useEffect12(() => {
+  const engine = useContext12(EngineContext);
+  const entityId = useContext12(EntityContext);
+  useEffect14(() => {
     engine.ecs.addComponent(entityId, {
       type: "ParticlePool",
       particles: [],
@@ -1762,7 +2558,7 @@ function ParticleEmitter({
     });
     return () => engine.ecs.removeComponent(entityId, "ParticlePool");
   }, []);
-  useEffect12(() => {
+  useEffect14(() => {
     const pool = engine.ecs.getComponent(entityId, "ParticlePool");
     if (!pool)
       return;
@@ -1771,7 +2567,7 @@ function ParticleEmitter({
   return null;
 }
 // src/components/MovingPlatform.tsx
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
 var platformPhases = new Map;
 function MovingPlatform({
   x1,
@@ -1783,26 +2579,26 @@ function MovingPlatform({
   duration = 3,
   color = "#37474f"
 }) {
-  return /* @__PURE__ */ jsxDEV4(Entity, {
+  return /* @__PURE__ */ jsxDEV5(Entity, {
     children: [
-      /* @__PURE__ */ jsxDEV4(Transform, {
+      /* @__PURE__ */ jsxDEV5(Transform, {
         x: x1,
         y: y1
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Sprite, {
+      /* @__PURE__ */ jsxDEV5(Sprite, {
         width,
         height,
         color,
         zIndex: 5
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4(RigidBody, {
+      /* @__PURE__ */ jsxDEV5(RigidBody, {
         isStatic: true
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4(BoxCollider, {
+      /* @__PURE__ */ jsxDEV5(BoxCollider, {
         width,
         height
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Script, {
+      /* @__PURE__ */ jsxDEV5(Script, {
         init: () => {},
         update: (id, world2, _input, dt) => {
           if (!world2.hasEntity(id))
@@ -1821,7 +2617,69 @@ function MovingPlatform({
   }, undefined, true, undefined, this);
 }
 // src/components/Checkpoint.tsx
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import { useState as useState4 } from "react";
+
+// src/hooks/useContact.ts
+import { useContext as useContext13, useEffect as useEffect15 } from "react";
+function useContactEvent(eventName, handler, opts) {
+  const engine = useContext13(EngineContext);
+  const entityId = useContext13(EntityContext);
+  if (!engine)
+    throw new Error(`${eventName} hook must be used inside <Game>`);
+  if (entityId === null)
+    throw new Error(`${eventName} hook must be used inside <Entity>`);
+  useEffect15(() => {
+    return engine.events.on(eventName, ({ a, b }) => {
+      const isA = a === entityId;
+      const isB = b === entityId;
+      if (!isA && !isB)
+        return;
+      const other = isA ? b : a;
+      if (opts?.tag) {
+        const tagComp = engine.ecs.getComponent(other, "Tag");
+        if (!tagComp?.tags.includes(opts.tag))
+          return;
+      }
+      if (opts?.layer) {
+        const col = engine.ecs.getComponent(other, "BoxCollider");
+        if (col?.layer !== opts.layer)
+          return;
+      }
+      handler(other);
+    });
+  }, [engine.events, engine.ecs, entityId, opts?.tag, opts?.layer]);
+}
+function useTriggerEnter(handler, opts) {
+  useContactEvent("triggerEnter", handler, opts);
+}
+function useTriggerExit(handler, opts) {
+  useContactEvent("triggerExit", handler, opts);
+}
+function useCollisionEnter(handler, opts) {
+  useContactEvent("collisionEnter", handler, opts);
+}
+function useCollisionExit(handler, opts) {
+  useContactEvent("collisionExit", handler, opts);
+}
+function useCircleEnter(handler, opts) {
+  useContactEvent("circleEnter", handler, opts);
+}
+function useCircleExit(handler, opts) {
+  useContactEvent("circleExit", handler, opts);
+}
+
+// src/components/Checkpoint.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function CheckpointActivator({ onActivate }) {
+  const [used, setUsed] = useState4(false);
+  useTriggerEnter(() => {
+    if (used)
+      return;
+    setUsed(true);
+    onActivate?.();
+  }, { tag: "player" });
+  return null;
+}
 function Checkpoint({
   x,
   y,
@@ -1830,55 +2688,33 @@ function Checkpoint({
   color = "#ffd54f",
   onActivate
 }) {
-  return /* @__PURE__ */ jsxDEV5(Entity, {
+  return /* @__PURE__ */ jsxDEV6(Entity, {
     tags: ["checkpoint"],
     children: [
-      /* @__PURE__ */ jsxDEV5(Transform, {
+      /* @__PURE__ */ jsxDEV6(Transform, {
         x,
         y
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5(Sprite, {
+      /* @__PURE__ */ jsxDEV6(Sprite, {
         width,
         height,
         color,
         zIndex: 5
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5(BoxCollider, {
+      /* @__PURE__ */ jsxDEV6(BoxCollider, {
         width,
         height,
         isTrigger: true
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5(Script, {
-        init: () => {},
-        update: (id, world2) => {
-          if (!world2.hasEntity(id))
-            return;
-          const ct = world2.getComponent(id, "Transform");
-          if (!ct)
-            return;
-          for (const pid of world2.query("Tag")) {
-            const tag2 = world2.getComponent(pid, "Tag");
-            if (!tag2?.tags.includes("player"))
-              continue;
-            const pt = world2.getComponent(pid, "Transform");
-            if (!pt)
-              continue;
-            const dx = Math.abs(pt.x - ct.x);
-            const dy = Math.abs(pt.y - ct.y);
-            if (dx < width / 2 + 16 && dy < height / 2 + 20) {
-              onActivate?.();
-              world2.destroyEntity(id);
-              return;
-            }
-          }
-        }
+      /* @__PURE__ */ jsxDEV6(CheckpointActivator, {
+        onActivate
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 // src/components/Tilemap.tsx
-import { useEffect as useEffect13, useState as useState3, useContext as useContext12 } from "react";
-import { jsxDEV as jsxDEV6, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+import { useEffect as useEffect16, useState as useState5, useContext as useContext14 } from "react";
+import { jsxDEV as jsxDEV7, Fragment as Fragment3 } from "react/jsx-dev-runtime";
 var animatedTiles = new Map;
 function getProperty(props, name) {
   return props?.find((p) => p.name === name)?.value;
@@ -1901,9 +2737,9 @@ function Tilemap({
   triggerLayer: triggerLayerName = "triggers",
   onTileProperty
 }) {
-  const engine = useContext12(EngineContext);
-  const [spawnedNodes, setSpawnedNodes] = useState3([]);
-  useEffect13(() => {
+  const engine = useContext14(EngineContext);
+  const [spawnedNodes, setSpawnedNodes] = useState5([]);
+  useEffect16(() => {
     if (!engine)
       return;
     const createdEntities = [];
@@ -2094,13 +2930,13 @@ function Tilemap({
   }, [src]);
   if (spawnedNodes.length === 0)
     return null;
-  return /* @__PURE__ */ jsxDEV6(Fragment2, {
+  return /* @__PURE__ */ jsxDEV7(Fragment3, {
     children: spawnedNodes
   }, undefined, false, undefined, this);
 }
 // src/components/ParallaxLayer.tsx
-import { useEffect as useEffect14, useContext as useContext13 } from "react";
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+import { useEffect as useEffect17, useContext as useContext15 } from "react";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
 function ParallaxLayerInner({
   src,
   speedX,
@@ -2111,9 +2947,9 @@ function ParallaxLayerInner({
   offsetX,
   offsetY
 }) {
-  const engine = useContext13(EngineContext);
-  const entityId = useContext13(EntityContext);
-  useEffect14(() => {
+  const engine = useContext15(EngineContext);
+  const entityId = useContext15(EntityContext);
+  useEffect17(() => {
     engine.ecs.addComponent(entityId, {
       type: "ParallaxLayer",
       src,
@@ -2129,7 +2965,7 @@ function ParallaxLayerInner({
     });
     return () => engine.ecs.removeComponent(entityId, "ParallaxLayer");
   }, []);
-  useEffect14(() => {
+  useEffect17(() => {
     const layer = engine.ecs.getComponent(entityId, "ParallaxLayer");
     if (!layer)
       return;
@@ -2154,13 +2990,13 @@ function ParallaxLayer({
   offsetX = 0,
   offsetY = 0
 }) {
-  return /* @__PURE__ */ jsxDEV7(Entity, {
+  return /* @__PURE__ */ jsxDEV8(Entity, {
     children: [
-      /* @__PURE__ */ jsxDEV7(Transform, {
+      /* @__PURE__ */ jsxDEV8(Transform, {
         x: 0,
         y: 0
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV7(ParallaxLayerInner, {
+      /* @__PURE__ */ jsxDEV8(ParallaxLayerInner, {
         src,
         speedX,
         speedY,
@@ -2175,7 +3011,7 @@ function ParallaxLayer({
 }
 // src/components/ScreenFlash.tsx
 import { forwardRef, useImperativeHandle, useRef as useRef2 } from "react";
-import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
 var ScreenFlash = forwardRef((_, ref) => {
   const divRef = useRef2(null);
   useImperativeHandle(ref, () => ({
@@ -2197,7 +3033,7 @@ var ScreenFlash = forwardRef((_, ref) => {
       });
     }
   }));
-  return /* @__PURE__ */ jsxDEV8("div", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     ref: divRef,
     style: {
       position: "absolute",
@@ -2211,47 +3047,111 @@ var ScreenFlash = forwardRef((_, ref) => {
 });
 ScreenFlash.displayName = "ScreenFlash";
 // src/hooks/useGame.ts
-import { useContext as useContext14 } from "react";
+import { useContext as useContext16 } from "react";
 function useGame() {
-  const engine = useContext14(EngineContext);
+  const engine = useContext16(EngineContext);
   if (!engine)
     throw new Error("useGame must be used inside <Game>");
   return engine;
 }
+// src/hooks/useCamera.ts
+import { useMemo } from "react";
+function useCamera() {
+  const engine = useGame();
+  return useMemo(() => ({
+    shake(intensity, duration) {
+      engine.renderSystem?.triggerShake(intensity, duration);
+    },
+    setFollowOffset(x, y) {
+      const camId = engine.ecs.queryOne("Camera2D");
+      if (camId === undefined)
+        return;
+      const cam = engine.ecs.getComponent(camId, "Camera2D");
+      if (cam) {
+        cam.followOffsetX = x;
+        cam.followOffsetY = y;
+      }
+    },
+    setPosition(x, y) {
+      const camId = engine.ecs.queryOne("Camera2D");
+      if (camId === undefined)
+        return;
+      const cam = engine.ecs.getComponent(camId, "Camera2D");
+      if (cam) {
+        cam.x = x;
+        cam.y = y;
+      }
+    },
+    setZoom(zoom) {
+      const camId = engine.ecs.queryOne("Camera2D");
+      if (camId === undefined)
+        return;
+      const cam = engine.ecs.getComponent(camId, "Camera2D");
+      if (cam)
+        cam.zoom = zoom;
+    }
+  }), [engine]);
+}
+// src/hooks/useSnapshot.ts
+import { useMemo as useMemo2 } from "react";
+function useSnapshot() {
+  const engine = useGame();
+  return useMemo2(() => ({
+    save: () => engine.ecs.getSnapshot(),
+    restore: (snapshot) => engine.ecs.restoreSnapshot(snapshot)
+  }), [engine]);
+}
 // src/hooks/useEntity.ts
-import { useContext as useContext15 } from "react";
+import { useContext as useContext17 } from "react";
 function useEntity() {
-  const id = useContext15(EntityContext);
+  const id = useContext17(EntityContext);
   if (id === null)
     throw new Error("useEntity must be used inside <Entity>");
   return id;
 }
 // src/hooks/useInput.ts
-import { useContext as useContext16 } from "react";
+import { useContext as useContext18 } from "react";
 function useInput() {
-  const engine = useContext16(EngineContext);
+  const engine = useContext18(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";
+function useInputMap(bindings) {
+  const input = useInput();
+  const normalized = useMemo3(() => {
+    const out = {};
+    for (const [action, keys] of Object.entries(bindings)) {
+      out[action] = Array.isArray(keys) ? keys : [keys];
+    }
+    return out;
+  }, []);
+  return useMemo3(() => ({
+    isActionDown: (action) => (normalized[action] ?? []).some((k) => input.isDown(k)),
+    isActionPressed: (action) => (normalized[action] ?? []).some((k) => input.isPressed(k)),
+    isActionReleased: (action) => (normalized[action] ?? []).some((k) => input.isReleased(k))
+  }), [input, normalized]);
+}
 // src/hooks/useEvents.ts
-import { useContext as useContext17, useEffect as useEffect15 } from "react";
+import { useContext as useContext19, useEffect as useEffect18 } from "react";
 function useEvents() {
-  const engine = useContext17(EngineContext);
+  const engine = useContext19(EngineContext);
   if (!engine)
     throw new Error("useEvents must be used inside <Game>");
   return engine.events;
 }
 function useEvent(event, handler) {
   const events = useEvents();
-  useEffect15(() => {
+  useEffect18(() => {
     return events.on(event, handler);
   }, [events, event]);
 }
 // src/hooks/usePlatformerController.ts
-import { useContext as useContext18, useEffect as useEffect16 } from "react";
+import { useContext as useContext20, useEffect as useEffect19 } from "react";
 function usePlatformerController(entityId, opts = {}) {
-  const engine = useContext18(EngineContext);
+  const engine = useContext20(EngineContext);
   const {
     speed = 200,
     jumpForce = -500,
@@ -2259,7 +3159,7 @@ function usePlatformerController(entityId, opts = {}) {
     coyoteTime = 0.08,
     jumpBuffer = 0.08
   } = opts;
-  useEffect16(() => {
+  useEffect19(() => {
     const state = { coyoteTimer: 0, jumpBuffer: 0, jumpsLeft: maxJumps };
     const updateFn = (id, world2, input, dt) => {
       if (!world2.hasEntity(id))
@@ -2308,11 +3208,11 @@ function usePlatformerController(entityId, opts = {}) {
   }, []);
 }
 // src/hooks/useTopDownMovement.ts
-import { useContext as useContext19, useEffect as useEffect17 } from "react";
+import { useContext as useContext21, useEffect as useEffect20 } from "react";
 function useTopDownMovement(entityId, opts = {}) {
-  const engine = useContext19(EngineContext);
+  const engine = useContext21(EngineContext);
   const { speed = 200, normalizeDiagonal = true } = opts;
-  useEffect17(() => {
+  useEffect20(() => {
     const updateFn = (id, world2, input) => {
       if (!world2.hasEntity(id))
         return;
@@ -2346,15 +3246,28 @@ function createAtlas(names, _columns) {
   return atlas;
 }
 export {
+  useTriggerExit,
+  useTriggerEnter,
   useTopDownMovement,
+  useSnapshot,
   usePlatformerController,
+  useInputMap,
   useInput,
   useGame,
   useEvents,
   useEvent,
   useEntity,
+  useCollisionExit,
+  useCollisionEnter,
+  useCircleExit,
+  useCircleEnter,
+  useCamera,
   tween,
+  raycast,
+  overlapBox,
+  findByTag,
   definePlugin,
+  createInputMap,
   createAtlas,
   World,
   Transform,
@@ -2370,6 +3283,7 @@ export {
   Game,
   Entity,
   Ease,
+  CircleCollider,
   Checkpoint,
   Camera2D,
   BoxCollider,