cubeforge 0.5.0 → 0.5.1

package/dist/index.js

@@ -137,6 +137,7 @@ var ECSWorld = class {
     return id;
   }
   destroyEntity(id) {
+    if (!this.componentIndex.has(id)) return;
     const comps = this.componentIndex.get(id);
     if (comps) {
       for (const type of comps.keys()) this.dirtyTypes.add(type);
@@ -152,10 +153,32 @@ var ECSWorld = class {
     this.componentIndex.delete(id);
     this.entityArchetype.delete(id);
     this.dirtyAll = true;
+    if (this.destroyListeners.size > 0) {
+      for (const cb of Array.from(this.destroyListeners)) cb(id);
+    }
   }
   hasEntity(id) {
     return this.componentIndex.has(id);
   }
+  /**
+   * Subscribe to entity-destroyed events. The callback fires after the entity
+   * has been removed from all archetypes and component storage. Returns an
+   * unsubscribe function.
+   *
+   * @example
+   * ```ts
+   * const off = ecs.onDestroyEntity((id) => console.log('gone', id))
+   * // ...
+   * off()
+   * ```
+   */
+  onDestroyEntity(cb) {
+    this.destroyListeners.add(cb);
+    return () => {
+      this.destroyListeners.delete(cb);
+    };
+  }
+  destroyListeners = /* @__PURE__ */ new Set();
   addComponent(id, component) {
     const comps = this.componentIndex.get(id);
     if (!comps) return;
@@ -872,12 +895,12 @@ async function preloadManifest(manifest, assets) {
     return;
   }
   let done = 0;
-  const tick = () => {
+  const tick2 = () => {
     done++;
     manifest.onProgress?.(done / total);
   };
-  const imageLoads = imageUrls.map((src) => assets.loadImage(src).then(tick, tick));
-  const audioLoads = audioUrls.map((src) => assets.loadAudio(src).then(tick, tick));
+  const imageLoads = imageUrls.map((src) => assets.loadImage(src).then(tick2, tick2));
+  const audioLoads = audioUrls.map((src) => assets.loadAudio(src).then(tick2, tick2));
   await Promise.allSettled([...imageLoads, ...audioLoads]);
 }
 
@@ -915,8 +938,8 @@ function heuristic(ac, ar, bc, br) {
   const dr = Math.abs(ar - br);
   return dc + dr + (Math.SQRT2 - 2) * Math.min(dc, dr);
 }
-function findPath(grid, start, goal) {
-  const sc = worldToCell(grid, start.x, start.y);
+function findPath(grid, start2, goal) {
+  const sc = worldToCell(grid, start2.x, start2.y);
   const gc = worldToCell(grid, goal.x, goal.y);
   if (!isWalkable(grid, sc.col, sc.row) || !isWalkable(grid, gc.col, gc.row)) {
     return [];
@@ -1340,9 +1363,9 @@ function tween(from, to, duration, ease = Ease.linear, onUpdate, onComplete, opt
       }
       const t = duration > 0 ? elapsed / duration : 1;
       const easedT = ease(t);
-      const start = forward ? from : to;
+      const start2 = forward ? from : to;
       const end = forward ? to : from;
-      onUpdate(start + (end - start) * easedT);
+      onUpdate(start2 + (end - start2) * easedT);
     }
   };
 }
@@ -1382,10 +1405,10 @@ function createTimeline(opts) {
   }
   const timeline = {
     add(entry, addOpts) {
-      const start = resolveStartTime(addOpts);
+      const start2 = resolveStartTime(addOpts);
       const delay = addOpts?.delay ?? 0;
-      segments.push({ startTime: start, delay, entry, started: false, complete: false });
-      cursor = start + delay + entry.duration;
+      segments.push({ startTime: start2, delay, entry, started: false, complete: false });
+      cursor = start2 + delay + entry.duration;
       return timeline;
     },
     addLabel(name) {
@@ -1393,12 +1416,12 @@ function createTimeline(opts) {
       return timeline;
     },
     addParallel(entries, addOpts) {
-      const start = resolveStartTime(addOpts);
+      const start2 = resolveStartTime(addOpts);
       const delay = addOpts?.delay ?? 0;
       let maxEnd = cursor;
       for (const entry of entries) {
-        segments.push({ startTime: start, delay, entry, started: false, complete: false });
-        const end = start + delay + entry.duration;
+        segments.push({ startTime: start2, delay, entry, started: false, complete: false });
+        const end = start2 + delay + entry.duration;
         if (end > maxEnd) maxEnd = end;
       }
       cursor = maxEnd;
@@ -5410,7 +5433,7 @@ function useAudioScheduler(opts) {
       nextBeatIndexRef.current++;
     }
   };
-  const start = () => {
+  const start2 = () => {
     if (isRunningRef.current) return;
     const ctx = getAudioCtx();
     if (ctx.state === "suspended") void ctx.resume();
@@ -5438,7 +5461,7 @@ function useAudioScheduler(opts) {
     return () => barHandlers.current.delete(handler);
   };
   return {
-    start,
+    start: start2,
     stop,
     onBeat,
     onBar,
@@ -9031,7 +9054,7 @@ function TriangleCollider({
 // src/components/SegmentCollider.tsx
 import { useEffect as useEffect44, useContext as useContext34 } from "react";
 function SegmentCollider({
-  start,
+  start: start2,
   end,
   isTrigger = false,
   layer = "default",
@@ -9048,7 +9071,7 @@ function SegmentCollider({
   useEffect44(() => {
     engine.ecs.addComponent(
       entityId,
-      createSegmentCollider(start, end, {
+      createSegmentCollider(start2, end, {
         isTrigger,
         layer,
         mask,
@@ -9393,7 +9416,7 @@ function useWorldQuery(...components) {
   const mountedRef = useRef17(true);
   useEffect50(() => {
     mountedRef.current = true;
-    const tick = () => {
+    const tick2 = () => {
       if (!mountedRef.current) return;
       const next = engine.ecs.query(...components);
       const prev = prevRef.current;
@@ -9401,9 +9424,9 @@ function useWorldQuery(...components) {
         prevRef.current = next;
         setResult([...next]);
       }
-      rafRef.current = requestAnimationFrame(tick);
+      rafRef.current = requestAnimationFrame(tick2);
     };
-    rafRef.current = requestAnimationFrame(tick);
+    rafRef.current = requestAnimationFrame(tick2);
     return () => {
       mountedRef.current = false;
       cancelAnimationFrame(rafRef.current);
@@ -9518,7 +9541,7 @@ function useProfiler() {
   const prevTimeRef = useRef19(0);
   useEffect53(() => {
     if (!engine) return;
-    let rafId;
+    let rafId2;
     const frameTimes = frameTimesRef.current;
     const sample = (now) => {
       if (prevTimeRef.current > 0) {
@@ -9542,11 +9565,11 @@ function useProfiler() {
           systemTimings: new Map(engine.systemTimings)
         });
       }
-      rafId = requestAnimationFrame(sample);
+      rafId2 = requestAnimationFrame(sample);
     };
-    rafId = requestAnimationFrame(sample);
+    rafId2 = requestAnimationFrame(sample);
     return () => {
-      cancelAnimationFrame(rafId);
+      cancelAnimationFrame(rafId2);
       frameTimes.length = 0;
       prevTimeRef.current = 0;
       lastUpdateRef.current = 0;
@@ -9802,7 +9825,7 @@ function useTimer(duration, onComplete, opts) {
       if (engine.ecs.hasEntity(eid)) engine.ecs.destroyEntity(eid);
     };
   }, [engine.ecs]);
-  const start = useCallback5(() => {
+  const start2 = useCallback5(() => {
     timerRef.current.start();
   }, []);
   const stop = useCallback5(() => {
@@ -9812,7 +9835,7 @@ function useTimer(duration, onComplete, opts) {
     timerRef.current.reset();
   }, []);
   return {
-    start,
+    start: start2,
     stop,
     reset,
     get isRunning() {
@@ -9966,16 +9989,16 @@ function useSceneTransition(initialScene, defaultTransition) {
     const effect = transState.effect;
     if (!effect || effect.type === "instant") return;
     const duration = (effect.duration ?? 0.4) / 2;
-    let rafId;
-    let start = performance.now();
+    let rafId2;
+    let start2 = performance.now();
     const animate = (now) => {
-      const elapsed = (now - start) / 1e3;
+      const elapsed = (now - start2) / 1e3;
       const t = Math.min(elapsed / duration, 1);
       if (transRef.current.phase === "out") {
         setTransState((prev) => ({ ...prev, progress: t }));
         if (t >= 1) {
           transRef.current.pendingAction?.();
-          start = performance.now();
+          start2 = performance.now();
           setTransState((prev) => ({ ...prev, phase: "in", progress: 1, pendingAction: null }));
         }
       } else if (transRef.current.phase === "in") {
@@ -9985,10 +10008,10 @@ function useSceneTransition(initialScene, defaultTransition) {
           return;
         }
       }
-      rafId = requestAnimationFrame(animate);
+      rafId2 = requestAnimationFrame(animate);
     };
-    rafId = requestAnimationFrame(animate);
-    return () => cancelAnimationFrame(rafId);
+    rafId2 = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(rafId2);
   }, [transState.phase, transState.effect]);
   const startTransition = useCallback7(
     (effect, action) => {
@@ -10340,11 +10363,23 @@ function useHistory(options) {
 }
 
 // src/hooks/useSelection.tsx
-import { createContext as createContext2, useCallback as useCallback12, useContext as useContext55, useMemo as useMemo12, useState as useState15 } from "react";
+import { createContext as createContext2, useCallback as useCallback12, useContext as useContext55, useEffect as useEffect64, useMemo as useMemo12, useState as useState15 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var SelectionContext = createContext2(null);
 function Selection({ initial, onChange, children }) {
+  const engine = useContext55(EngineContext);
   const [selected, setSelected] = useState15(initial ?? []);
+  useEffect64(() => {
+    if (!engine) return;
+    return engine.ecs.onDestroyEntity((destroyedId) => {
+      setSelected((prev) => {
+        if (!prev.includes(destroyedId)) return prev;
+        const next = prev.filter((id) => id !== destroyedId);
+        onChange?.(next);
+        return next;
+      });
+    });
+  }, [engine, onChange]);
   const commit = useCallback12(
     (next) => {
       setSelected(next);
@@ -10403,7 +10438,38 @@ function useSelection() {
 }
 
 // src/components/TransformHandles.tsx
-import { useContext as useContext56, useEffect as useEffect64, useRef as useRef28 } from "react";
+import { useContext as useContext56, useEffect as useEffect66, useRef as useRef28 } from "react";
+
+// src/hooks/useOverlayTick.ts
+import { useEffect as useEffect65 } from "react";
+var callbacks = /* @__PURE__ */ new Set();
+var rafId = 0;
+function tick() {
+  for (const cb of callbacks) cb();
+  if (callbacks.size > 0) rafId = requestAnimationFrame(tick);
+  else rafId = 0;
+}
+function start() {
+  if (rafId === 0) rafId = requestAnimationFrame(tick);
+}
+function register(cb) {
+  callbacks.add(cb);
+  start();
+  return () => {
+    callbacks.delete(cb);
+    if (callbacks.size === 0 && rafId !== 0) {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+  };
+}
+function useOverlayTick(callback, deps = []) {
+  useEffect65(() => {
+    return register(callback);
+  }, deps);
+}
+
+// src/components/TransformHandles.tsx
 import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function TransformHandles({
   showRotationHandle = true,
@@ -10416,47 +10482,41 @@ function TransformHandles({
   const selection = useSelection();
   const overlayRef = useRef28(null);
   const dragRef = useRef28(null);
-  useEffect64(() => {
+  useOverlayTick(() => {
     if (!engine) return;
     const overlay = overlayRef.current;
     if (!overlay) return;
     const canvas = engine.canvas;
-    let rafId = 0;
-    const tick = () => {
-      const rect = canvas.getBoundingClientRect();
-      overlay.style.left = `${rect.left + window.scrollX}px`;
-      overlay.style.top = `${rect.top + window.scrollY}px`;
-      overlay.style.width = `${rect.width}px`;
-      overlay.style.height = `${rect.height}px`;
-      for (const id of selection.selected) {
-        const node = overlay.querySelector(`[data-selection-id="${id}"]`);
-        if (!node) continue;
-        const bounds = getEntityBounds(engine.ecs, id);
-        const t = engine.ecs.getComponent(id, "Transform");
-        if (!bounds || !t) {
-          node.style.display = "none";
-          continue;
-        }
-        const screen = worldToScreenCss(engine, t.x, t.y);
-        if (!screen) {
-          node.style.display = "none";
-          continue;
-        }
-        const w = bounds.baseWidth * Math.abs(t.scaleX) * screen.zoom;
-        const h = bounds.baseHeight * Math.abs(t.scaleY) * screen.zoom;
-        node.style.display = "block";
-        node.style.left = `${screen.x}px`;
-        node.style.top = `${screen.y}px`;
-        node.style.width = `${w}px`;
-        node.style.height = `${h}px`;
-        node.style.transform = `translate(-50%, -50%) rotate(${t.rotation}rad)`;
-      }
-      rafId = requestAnimationFrame(tick);
-    };
-    rafId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafId);
+    const rect = canvas.getBoundingClientRect();
+    overlay.style.left = `${rect.left + window.scrollX}px`;
+    overlay.style.top = `${rect.top + window.scrollY}px`;
+    overlay.style.width = `${rect.width}px`;
+    overlay.style.height = `${rect.height}px`;
+    for (const id of selection.selected) {
+      const node = overlay.querySelector(`[data-selection-id="${id}"]`);
+      if (!node) continue;
+      const bounds = getEntityBounds(engine.ecs, id);
+      const t = engine.ecs.getComponent(id, "Transform");
+      if (!bounds || !t) {
+        node.style.display = "none";
+        continue;
+      }
+      const screen = worldToScreenCss(engine, t.x, t.y);
+      if (!screen) {
+        node.style.display = "none";
+        continue;
+      }
+      const w = bounds.baseWidth * Math.abs(t.scaleX) * screen.zoom;
+      const h = bounds.baseHeight * Math.abs(t.scaleY) * screen.zoom;
+      node.style.display = "block";
+      node.style.left = `${screen.x}px`;
+      node.style.top = `${screen.y}px`;
+      node.style.width = `${w}px`;
+      node.style.height = `${h}px`;
+      node.style.transform = `translate(-50%, -50%) rotate(${t.rotation}rad)`;
+    }
   }, [engine, selection.selected]);
-  useEffect64(() => {
+  useEffect66(() => {
     if (!engine) return;
     const onMove = (e) => {
       const drag = dragRef.current;
@@ -10771,7 +10831,7 @@ function getBounds(ecs, id) {
 }
 
 // src/components/EditableText.tsx
-import { useContext as useContext58, useEffect as useEffect65, useRef as useRef29 } from "react";
+import { useContext as useContext58, useEffect as useEffect67, useRef as useRef29 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function EditableText({
   value,
@@ -10797,39 +10857,33 @@ function EditableText({
   const entityId = useContext58(EntityContext);
   const containerRef = useRef29(null);
   const inputRef = useRef29(null);
-  useEffect65(() => {
+  useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const container = containerRef.current;
     if (!container) return;
-    let rafId = 0;
-    const tick = () => {
-      const t = engine.ecs.getComponent(entityId, "Transform");
-      if (t) {
-        const screen = worldToScreenCss2(engine, t.x, t.y);
-        if (screen) {
-          const zoom = screen.zoom;
-          const cssW = width * zoom;
-          const cssH = height * zoom;
-          container.style.display = "block";
-          container.style.left = `${screen.x - cssW / 2}px`;
-          container.style.top = `${screen.y - cssH / 2}px`;
-          container.style.width = `${cssW}px`;
-          container.style.height = `${cssH}px`;
-          container.style.transform = `rotate(${t.rotation}rad)`;
-          container.style.fontSize = `${fontSize * zoom}px`;
-        } else {
-          container.style.display = "none";
-        }
+    const t = engine.ecs.getComponent(entityId, "Transform");
+    if (t) {
+      const screen = worldToScreenCss2(engine, t.x, t.y);
+      if (screen) {
+        const zoom = screen.zoom;
+        const cssW = width * zoom;
+        const cssH = height * zoom;
+        container.style.display = "block";
+        container.style.left = `${screen.x - cssW / 2}px`;
+        container.style.top = `${screen.y - cssH / 2}px`;
+        container.style.width = `${cssW}px`;
+        container.style.height = `${cssH}px`;
+        container.style.transform = `rotate(${t.rotation}rad)`;
+        container.style.fontSize = `${fontSize * zoom}px`;
+      } else {
+        container.style.display = "none";
       }
-      const rect = engine.canvas.getBoundingClientRect();
-      container.style.setProperty("--cubeforge-canvas-left", `${rect.left + window.scrollX}px`);
-      container.style.setProperty("--cubeforge-canvas-top", `${rect.top + window.scrollY}px`);
-      rafId = requestAnimationFrame(tick);
-    };
-    rafId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafId);
+    }
+    const rect = engine.canvas.getBoundingClientRect();
+    container.style.setProperty("--cubeforge-canvas-left", `${rect.left + window.scrollX}px`);
+    container.style.setProperty("--cubeforge-canvas-top", `${rect.top + window.scrollY}px`);
   }, [engine, entityId, width, height, fontSize]);
-  useEffect65(() => {
+  useEffect67(() => {
     if (autoFocus) inputRef.current?.focus();
   }, [autoFocus]);
   if (!engine) return null;
@@ -10960,7 +11014,7 @@ function copyRegion(source, region, scale) {
 }
 
 // src/components/A11yNode.tsx
-import { useContext as useContext59, useEffect as useEffect66, useRef as useRef30 } from "react";
+import { useContext as useContext59, useRef as useRef30 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function A11yNode({
   label,
@@ -10977,29 +11031,21 @@ function A11yNode({
   const engine = useContext59(EngineContext);
   const entityId = useContext59(EntityContext);
   const nodeRef = useRef30(null);
-  useEffect66(() => {
+  useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const node = nodeRef.current;
     if (!node) return;
-    let rafId = 0;
-    const tick = () => {
-      const t = engine.ecs.getComponent(entityId, "Transform");
-      if (t) {
-        const screen = worldToScreenCss3(engine, t.x, t.y);
-        if (screen) {
-          const size = bounds ?? deriveBounds(engine.ecs, entityId) ?? { width: 16, height: 16 };
-          const w = size.width * Math.abs(t.scaleX) * screen.zoom;
-          const h = size.height * Math.abs(t.scaleY) * screen.zoom;
-          node.style.left = `${screen.x - Math.max(w, 1) / 2}px`;
-          node.style.top = `${screen.y - Math.max(h, 1) / 2}px`;
-          node.style.width = `${Math.max(w, 1)}px`;
-          node.style.height = `${Math.max(h, 1)}px`;
-        }
-      }
-      rafId = requestAnimationFrame(tick);
-    };
-    rafId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafId);
+    const t = engine.ecs.getComponent(entityId, "Transform");
+    if (!t) return;
+    const screen = worldToScreenCss3(engine, t.x, t.y);
+    if (!screen) return;
+    const size = bounds ?? deriveBounds(engine.ecs, entityId) ?? { width: 16, height: 16 };
+    const w = size.width * Math.abs(t.scaleX) * screen.zoom;
+    const h = size.height * Math.abs(t.scaleY) * screen.zoom;
+    node.style.left = `${screen.x - Math.max(w, 1) / 2}px`;
+    node.style.top = `${screen.y - Math.max(h, 1) / 2}px`;
+    node.style.width = `${Math.max(w, 1)}px`;
+    node.style.height = `${Math.max(h, 1)}px`;
   }, [engine, entityId, bounds]);
   if (!engine || entityId === null || entityId === void 0) return null;
   const effectiveRole = role ?? (onActivate ? "button" : "presentation");
@@ -11073,7 +11119,7 @@ function worldToScreenCss3(engine, wx, wy) {
 }
 
 // src/components/VectorPath.tsx
-import { useContext as useContext60, useEffect as useEffect67, useRef as useRef31 } from "react";
+import { useContext as useContext60, useRef as useRef31 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function VectorPath({
   d,
@@ -11090,37 +11136,29 @@ function VectorPath({
   const engine = useContext60(EngineContext);
   const entityId = useContext60(EntityContext);
   const svgRef = useRef31(null);
-  useEffect67(() => {
+  useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const svg = svgRef.current;
     if (!svg) return;
-    let rafId = 0;
-    const tick = () => {
-      const t = engine.ecs.getComponent(entityId, "Transform");
-      if (t) {
-        const screen = worldToScreenCss4(engine, t.x, t.y);
-        if (screen) {
-          svg.style.display = visible ? "block" : "none";
-          const rect = engine.canvas.getBoundingClientRect();
-          svg.style.left = `${rect.left + window.scrollX}px`;
-          svg.style.top = `${rect.top + window.scrollY}px`;
-          svg.style.width = `${rect.width}px`;
-          svg.style.height = `${rect.height}px`;
-          const path = svg.querySelector("path");
-          if (path) {
-            const degrees = t.rotation * 180 / Math.PI;
-            path.setAttribute(
-              "transform",
-              `translate(${screen.x} ${screen.y}) rotate(${degrees}) scale(${t.scaleX * screen.zoom} ${t.scaleY * screen.zoom})`
-            );
-            path.setAttribute("stroke-width", `${strokeWidth * screen.zoom}`);
-          }
-        }
-      }
-      rafId = requestAnimationFrame(tick);
-    };
-    rafId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafId);
+    const t = engine.ecs.getComponent(entityId, "Transform");
+    if (!t) return;
+    const screen = worldToScreenCss4(engine, t.x, t.y);
+    if (!screen) return;
+    svg.style.display = visible ? "block" : "none";
+    const rect = engine.canvas.getBoundingClientRect();
+    svg.style.left = `${rect.left + window.scrollX}px`;
+    svg.style.top = `${rect.top + window.scrollY}px`;
+    svg.style.width = `${rect.width}px`;
+    svg.style.height = `${rect.height}px`;
+    const path = svg.querySelector("path");
+    if (path) {
+      const degrees = t.rotation * 180 / Math.PI;
+      path.setAttribute(
+        "transform",
+        `translate(${screen.x} ${screen.y}) rotate(${degrees}) scale(${t.scaleX * screen.zoom} ${t.scaleY * screen.zoom})`
+      );
+      path.setAttribute("stroke-width", `${strokeWidth * screen.zoom}`);
+    }
   }, [engine, entityId, visible, strokeWidth]);
   if (!engine) return null;
   const svgStyle = {
@@ -11356,12 +11394,16 @@ function useTurnSystem({
   const [activeIndex, setActiveIndex] = useState17(initialIndex % players.length);
   const [turn, setTurn] = useState17(0);
   const [isPending, setIsPending] = useState17(false);
-  const pendingTimer = useRef33(null);
+  const pendingRafId = useRef33(null);
+  const pendingRemaining = useRef33(0);
+  const pendingTarget = useRef33(null);
+  const pendingLastTime = useRef33(0);
   const clearPending = useCallback15(() => {
-    if (pendingTimer.current) {
-      clearTimeout(pendingTimer.current);
-      pendingTimer.current = null;
+    if (pendingRafId.current !== null) {
+      cancelAnimationFrame(pendingRafId.current);
+      pendingRafId.current = null;
     }
+    pendingTarget.current = null;
     setIsPending(false);
   }, []);
   const startedOnce = useRef33(false);
@@ -11391,13 +11433,29 @@ function useTurnSystem({
         return;
       }
       setIsPending(true);
-      pendingTimer.current = setTimeout(() => {
-        pendingTimer.current = null;
-        setIsPending(false);
-        applyChange(nextIndex);
-      }, aiDelay * 1e3);
+      pendingTarget.current = nextIndex;
+      pendingRemaining.current = aiDelay;
+      pendingLastTime.current = performance.now();
+      const tick2 = (now) => {
+        const dt = (now - pendingLastTime.current) / 1e3;
+        pendingLastTime.current = now;
+        const paused = engine?.loop.isPaused ?? false;
+        if (!paused) {
+          pendingRemaining.current -= dt;
+        }
+        if (pendingRemaining.current <= 0 && pendingTarget.current !== null) {
+          const target = pendingTarget.current;
+          pendingTarget.current = null;
+          pendingRafId.current = null;
+          setIsPending(false);
+          applyChange(target);
+          return;
+        }
+        pendingRafId.current = requestAnimationFrame(tick2);
+      };
+      pendingRafId.current = requestAnimationFrame(tick2);
     },
-    [aiDelay, applyChange, clearPending]
+    [aiDelay, applyChange, clearPending, engine]
   );
   const nextTurn = useCallback15(() => scheduleChange(activeIndex + 1), [scheduleChange, activeIndex]);
   const prevTurn = useCallback15(() => scheduleChange(activeIndex - 1), [scheduleChange, activeIndex]);
@@ -11422,7 +11480,7 @@ function useTurnSystem({
   }, [players.length, initialIndex, clearPending, engine]);
   useEffect68(
     () => () => {
-      if (pendingTimer.current) clearTimeout(pendingTimer.current);
+      if (pendingRafId.current !== null) cancelAnimationFrame(pendingRafId.current);
     },
     []
   );
@@ -11526,15 +11584,23 @@ function screenToWorld(engine, cssX, cssY) {
 
 // src/hooks/useDragDrop.ts
 import { useContext as useContext64, useEffect as useEffect70, useRef as useRef34, useState as useState19 } from "react";
-var activeDrag = null;
-function notifyDragSubscribers() {
-  if (!activeDrag) return;
-  for (const cb of activeDrag.subscribers) cb();
+var dragStateByEngine = /* @__PURE__ */ new WeakMap();
+function getActiveDrag(engine) {
+  return dragStateByEngine.get(engine) ?? null;
 }
-function subscribeToActiveDrag(cb) {
-  if (!activeDrag) return () => void 0;
-  activeDrag.subscribers.add(cb);
-  return () => activeDrag?.subscribers.delete(cb);
+function setActiveDrag(engine, drag) {
+  dragStateByEngine.set(engine, drag);
+}
+function notifyDragSubscribers(engine) {
+  const drag = dragStateByEngine.get(engine);
+  if (!drag) return;
+  for (const cb of drag.subscribers) cb();
+}
+function subscribeToActiveDrag(engine, cb) {
+  const drag = dragStateByEngine.get(engine);
+  if (!drag) return () => void 0;
+  drag.subscribers.add(cb);
+  return () => dragStateByEngine.get(engine)?.subscribers.delete(cb);
 }
 function useDraggable(options) {
   const engine = useContext64(EngineContext);
@@ -11571,7 +11637,7 @@ function useDraggable(options) {
       startEntityY = t.y;
       startWorldX = world.x;
       startWorldY = world.y;
-      activeDrag = {
+      setActiveDrag(engine, {
         entityId,
         tag: optsRef.current?.tag ?? null,
         pointerX: e.clientX,
@@ -11579,14 +11645,15 @@ function useDraggable(options) {
         worldX: world.x,
         worldY: world.y,
         subscribers: /* @__PURE__ */ new Set()
-      };
+      });
       setIsDragging(true);
       setPosition({ x: t.x, y: t.y });
       optsRef.current?.onDragStart?.({ entityId, x: t.x, y: t.y });
       engine.loop.markDirty();
     };
     const onPointerMove = (e) => {
-      if (!dragging || !activeDrag) return;
+      const drag = getActiveDrag(engine);
+      if (!dragging || !drag) return;
       const t = engine.ecs.getComponent(entityId, "Transform");
       if (!t) return;
       const rect = canvas.getBoundingClientRect();
@@ -11607,11 +11674,11 @@ function useDraggable(options) {
       }
       t.x = nx;
       t.y = ny;
-      activeDrag.pointerX = e.clientX;
-      activeDrag.pointerY = e.clientY;
-      activeDrag.worldX = world.x;
-      activeDrag.worldY = world.y;
-      notifyDragSubscribers();
+      drag.pointerX = e.clientX;
+      drag.pointerY = e.clientY;
+      drag.worldX = world.x;
+      drag.worldY = world.y;
+      notifyDragSubscribers(engine);
       setPosition({ x: nx, y: ny });
       optsRef.current?.onDrag?.({ entityId, x: nx, y: ny });
       engine.loop.markDirty();
@@ -11620,10 +11687,11 @@ function useDraggable(options) {
       if (!dragging) return;
       dragging = false;
       const t = engine.ecs.getComponent(entityId, "Transform");
-      const droppedOn = findDroppableUnder(engine, activeDrag);
+      const drag = getActiveDrag(engine);
+      const droppedOn = findDroppableUnder(engine, drag);
       const finalX = t?.x ?? startEntityX;
       const finalY = t?.y ?? startEntityY;
-      activeDrag = null;
+      setActiveDrag(engine, null);
       setIsDragging(false);
       optsRef.current?.onDragEnd?.({
         entityId,
@@ -11658,7 +11726,8 @@ function useDroppable(options) {
     if (!engine || entityId === null || entityId === void 0 || options?.disabled) return;
     let currentlyOver = false;
     const check = () => {
-      if (!activeDrag) {
+      const drag = getActiveDrag(engine);
+      if (!drag) {
         if (currentlyOver) {
           currentlyOver = false;
           setIsOver(false);
@@ -11669,15 +11738,15 @@ function useDroppable(options) {
         return;
       }
       const accepts = optsRef.current?.accepts;
-      if (accepts && (!activeDrag.tag || !accepts.includes(activeDrag.tag))) return;
+      if (accepts && (!drag.tag || !accepts.includes(drag.tag))) return;
       const t = engine.ecs.getComponent(entityId, "Transform");
       if (!t) return;
       const bounds = optsRef.current?.bounds ?? deriveBounds3(engine.ecs, entityId);
       if (!bounds) return;
       const halfW = bounds.width * Math.abs(t.scaleX) / 2;
       const halfH = bounds.height * Math.abs(t.scaleY) / 2;
-      const inside = Math.abs(activeDrag.worldX - t.x) <= halfW && Math.abs(activeDrag.worldY - t.y) <= halfH;
-      const dragId = activeDrag.entityId;
+      const inside = Math.abs(drag.worldX - t.x) <= halfW && Math.abs(drag.worldY - t.y) <= halfH;
+      const dragId = drag.entityId;
       if (inside && !currentlyOver) {
         currentlyOver = true;
         setIsOver(true);
@@ -11690,12 +11759,13 @@ function useDroppable(options) {
         optsRef.current?.onLeave?.({ droppedEntityId: dragId });
       }
     };
-    const unsubscribe = subscribeToActiveDrag(check);
+    const unsubscribe = subscribeToActiveDrag(engine, check);
     const onUp = () => {
-      if (!activeDrag || !currentlyOver) return;
-      const dragId = activeDrag.entityId;
-      const dragX = activeDrag.worldX;
-      const dragY = activeDrag.worldY;
+      const drag = getActiveDrag(engine);
+      if (!drag || !currentlyOver) return;
+      const dragId = drag.entityId;
+      const dragX = drag.worldX;
+      const dragY = drag.worldY;
       currentlyOver = false;
       setIsOver(false);
       setHoveredBy(null);
@@ -11949,39 +12019,33 @@ function FocusRing({
     mq.addEventListener("change", cb);
     return () => mq.removeEventListener("change", cb);
   }, []);
-  useEffect72(() => {
+  useOverlayTick(() => {
     if (!engine) return;
     const ring = ringRef.current;
     if (!ring) return;
-    let rafId = 0;
-    const tick = () => {
-      if (focused === null) {
-        ring.style.display = "none";
-      } else {
-        const t = engine.ecs.getComponent(focused, "Transform");
-        if (t) {
-          const screen = worldToScreenCss5(engine, t.x, t.y);
-          const bounds = deriveBounds4(engine.ecs, focused) ?? { width: 16, height: 16 };
-          if (screen) {
-            const w = bounds.width * Math.abs(t.scaleX) * screen.zoom + padding * 2;
-            const h = bounds.height * Math.abs(t.scaleY) * screen.zoom + padding * 2;
-            ring.style.display = "block";
-            ring.style.left = `${screen.x - w / 2}px`;
-            ring.style.top = `${screen.y - h / 2}px`;
-            ring.style.width = `${w}px`;
-            ring.style.height = `${h}px`;
-            ring.style.transform = `rotate(${t.rotation}rad)`;
-          } else {
-            ring.style.display = "none";
-          }
-        } else {
-          ring.style.display = "none";
-        }
-      }
-      rafId = requestAnimationFrame(tick);
-    };
-    rafId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafId);
+    if (focused === null) {
+      ring.style.display = "none";
+      return;
+    }
+    const t = engine.ecs.getComponent(focused, "Transform");
+    if (!t) {
+      ring.style.display = "none";
+      return;
+    }
+    const screen = worldToScreenCss5(engine, t.x, t.y);
+    if (!screen) {
+      ring.style.display = "none";
+      return;
+    }
+    const bounds = deriveBounds4(engine.ecs, focused) ?? { width: 16, height: 16 };
+    const w = bounds.width * Math.abs(t.scaleX) * screen.zoom + padding * 2;
+    const h = bounds.height * Math.abs(t.scaleY) * screen.zoom + padding * 2;
+    ring.style.display = "block";
+    ring.style.left = `${screen.x - w / 2}px`;
+    ring.style.top = `${screen.y - h / 2}px`;
+    ring.style.width = `${w}px`;
+    ring.style.height = `${h}px`;
+    ring.style.transform = `rotate(${t.rotation}rad)`;
   }, [engine, focused, padding]);
   if (!engine) return null;
   const style = {
@@ -12497,7 +12561,7 @@ function usePathfinding() {
     (grid, col, row, walkable) => setWalkable(grid, col, row, walkable),
     []
   );
-  const findPath$ = useCallback23((grid, start, goal) => findPath(grid, start, goal), []);
+  const findPath$ = useCallback23((grid, start2, goal) => findPath(grid, start2, goal), []);
   return { createGrid: createGrid$, setWalkable: setWalkable$, findPath: findPath$ };
 }
 
@@ -12759,7 +12823,7 @@ function useDialogue() {
   const [active, setActive] = useState27(false);
   const [currentId, setCurrentId] = useState27(null);
   const scriptRef = useRef41(null);
-  const start = useCallback28((script, startId) => {
+  const start2 = useCallback28((script, startId) => {
     scriptRef.current = script;
     const id = startId ?? Object.keys(script)[0];
     setCurrentId(id);
@@ -12801,7 +12865,7 @@ function useDialogue() {
     scriptRef.current = null;
   }, []);
   const current = scriptRef.current && currentId ? scriptRef.current[currentId] ?? null : null;
-  return { active, current, currentId, start, advance, close };
+  return { active, current, currentId, start: start2, advance, close };
 }
 
 // ../gameplay/src/components/DialogueBox.tsx
@@ -13069,11 +13133,11 @@ function useTween(opts) {
     }
     runningRef.current = false;
   }, []);
-  const start = useCallback31(() => {
+  const start2 = useCallback31(() => {
     stop();
     runningRef.current = true;
     startTimeRef.current = performance.now();
-    const tick = (now) => {
+    const tick2 = (now) => {
       if (!runningRef.current) return;
       const { from, to, duration, ease, onUpdate, onComplete } = optsRef.current;
       const easeFn = ease ?? Ease.linear;
@@ -13086,14 +13150,14 @@ function useTween(opts) {
         rafRef.current = null;
         onComplete?.();
       } else {
-        rafRef.current = requestAnimationFrame(tick);
+        rafRef.current = requestAnimationFrame(tick2);
       }
     };
-    rafRef.current = requestAnimationFrame(tick);
+    rafRef.current = requestAnimationFrame(tick2);
   }, [stop]);
   useEffect78(() => {
     if (opts.autoStart) {
-      start();
+      start2();
     }
   }, []);
   useEffect78(() => {
@@ -13106,7 +13170,7 @@ function useTween(opts) {
     };
   }, []);
   return {
-    start,
+    start: start2,
     stop,
     get isRunning() {
       return runningRef.current;
@@ -13717,12 +13781,12 @@ var ClientPrediction = class {
    * @param inputs - Input state this tick. Stored for re-simulation when a
    *   server correction arrives. Pass an empty object if not using re-simulation.
    */
-  saveFrame(tick, inputs = {}) {
-    this._frames.set(tick, {
+  saveFrame(tick2, inputs = {}) {
+    this._frames.set(tick2, {
       snapshot: this._world.getSnapshot(),
       inputs
     });
-    const minTick = tick - this._bufferSize;
+    const minTick = tick2 - this._bufferSize;
     for (const key of this._frames.keys()) {
       if (key < minTick) this._frames.delete(key);
     }
@@ -13731,8 +13795,8 @@ var ClientPrediction = class {
    * Restore world state to the snapshot saved at `tick`.
    * Returns `true` if the snapshot was found, `false` otherwise.
    */
-  rollbackTo(tick) {
-    const entry = this._frames.get(tick);
+  rollbackTo(tick2) {
+    const entry = this._frames.get(tick2);
     if (!entry) return false;
     this._world.restoreSnapshot(entry.snapshot);
     return true;
@@ -13748,10 +13812,10 @@ var ClientPrediction = class {
    * @param serverSnapshot - Authoritative world state from the server.
    * @param tick - The tick the server snapshot corresponds to.
    */
-  applyCorrection(serverSnapshot, tick) {
+  applyCorrection(serverSnapshot, tick2) {
     this._world.restoreSnapshot(serverSnapshot);
     if (this._simulate) {
-      const laterTicks = [...this._frames.keys()].filter((t) => t > tick).sort((a, b) => a - b);
+      const laterTicks = [...this._frames.keys()].filter((t) => t > tick2).sort((a, b) => a - b);
       for (const t of laterTicks) {
         const entry = this._frames.get(t);
         if (entry) {
@@ -13760,7 +13824,7 @@ var ClientPrediction = class {
       }
     }
     for (const key of this._frames.keys()) {
-      if (key <= tick) this._frames.delete(key);
+      if (key <= tick2) this._frames.delete(key);
     }
   }
   /** Number of frames currently held in the buffer. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cubeforge",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React-first 2D browser game engine",
   "type": "module",
   "main": "./dist/index.js",