cubeforge 0.5.1 → 0.6.0

package/dist/index.js

@@ -63,7 +63,7 @@ import {
   triangleArea,
   triangleMassProperties,
   velocityAtPoint
-} from "./chunk-OT6I5RYW.js";
+} from "./chunk-UMHYQ4EP.js";
 
 // src/components/Game.tsx
 import { useEffect as useEffect11, useRef as useRef11, useState as useState3 } from "react";
@@ -1496,7 +1496,6 @@ function createTimeline(opts) {
     seek(time) {
       elapsed = 0;
       resetSegments();
-      elapsed = 0;
       const step = 1 / 60;
       while (elapsed < time) {
         const d = Math.min(step, time - elapsed);
@@ -5437,6 +5436,10 @@ function useAudioScheduler(opts) {
     if (isRunningRef.current) return;
     const ctx = getAudioCtx();
     if (ctx.state === "suspended") void ctx.resume();
+    if (timerRef.current !== null) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
     nextBeatTimeRef.current = ctx.currentTime;
     nextBeatIndexRef.current = 0;
     currentBeatRef.current = 0;
@@ -7047,7 +7050,7 @@ function Transform({ x = 0, y = 0, rotation = 0, scaleX = 1, scaleY = 1 }) {
 }
 
 // src/components/Sprite.tsx
-import { useEffect as useEffect15, useContext as useContext6 } from "react";
+import { useEffect as useEffect15, useContext as useContext6, useRef as useRef12 } from "react";
 function Sprite({
   width,
   height,
@@ -7150,6 +7153,37 @@ function Sprite({
     }
     return () => engine.ecs.removeComponent(entityId, "Sprite");
   }, []);
+  const didMount = useRef12(false);
+  useEffect15(() => {
+    if (!didMount.current) {
+      didMount.current = true;
+      return;
+    }
+    const comp = engine.ecs.getComponent(entityId, "Sprite");
+    if (!comp) return;
+    if (!src) {
+      comp.image = void 0;
+      comp.src = void 0;
+      return;
+    }
+    let cancelled = false;
+    engine.assets.loadImage(src).then((img) => {
+      if (cancelled) return;
+      const c = engine.ecs.getComponent(entityId, "Sprite");
+      if (c) {
+        c.image = img;
+        c.src = img.src;
+      }
+    }).catch((err) => {
+      if (cancelled) return;
+      const message = err instanceof Error ? err.message : String(err);
+      engine.events.emit("asset:error", { type: "image", src, entityId, error: err });
+      console.error(`[Cubeforge] <Sprite> failed to reload image "${src}": ${message}`);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src, engine, entityId]);
   useEffect15(() => {
     const comp = engine.ecs.getComponent(entityId, "Sprite");
     if (!comp) return;
@@ -7500,7 +7534,7 @@ function CompoundCollider({ shapes, isTrigger = false, layer = "default", mask =
 }
 
 // src/components/Script.tsx
-import { useEffect as useEffect22, useContext as useContext13, useRef as useRef12 } from "react";
+import { useEffect as useEffect22, useContext as useContext13, useRef as useRef13 } from "react";
 function Script({ init, update }) {
   const engine = useContext13(EngineContext);
   const entityId = useContext13(EntityContext);
@@ -7509,9 +7543,9 @@ function Script({ init, update }) {
       console.warn("[Cubeforge] <Script> must be inside an <Entity>. No EntityContext found.");
     }
   }
-  const initRef = useRef12(init);
+  const initRef = useRef13(init);
   initRef.current = init;
-  const updateRef = useRef12(update);
+  const updateRef = useRef13(update);
   updateRef.current = update;
   useEffect22(() => {
     if (initRef.current) {
@@ -7795,6 +7829,7 @@ import { useEffect as useEffect28, useContext as useContext19 } from "react";
 
 // src/components/particlePresets.ts
 var PARTICLE_PRESETS = {
+  // ── Action / combat ──
   explosion: {
     rate: 60,
     speed: 200,
@@ -7803,8 +7838,12 @@ var PARTICLE_PRESETS = {
     particleLife: 0.5,
     particleSize: 6,
     color: "#ff6b35",
+    colorOverLife: ["#fff3b0", "#ff6b35", "#6d4c41"],
+    sizeOverLife: { start: 1.4, end: 0 },
     gravity: 300,
-    maxParticles: 80
+    maxParticles: 80,
+    blendMode: "additive",
+    particleShape: "soft"
   },
   spark: {
     rate: 40,
@@ -7815,7 +7854,70 @@ var PARTICLE_PRESETS = {
     particleSize: 3,
     color: "#ffd54f",
     gravity: 400,
-    maxParticles: 50
+    maxParticles: 50,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  damage: {
+    rate: 45,
+    speed: 120,
+    spread: Math.PI * 2,
+    angle: 0,
+    particleLife: 0.35,
+    particleSize: 4,
+    color: "#ef5350",
+    colorOverLife: ["#ffab91", "#ef5350", "#4a148c"],
+    sizeOverLife: { start: 1, end: 0.2 },
+    gravity: 150,
+    maxParticles: 40,
+    blendMode: "normal",
+    particleShape: "circle"
+  },
+  heal: {
+    rate: 22,
+    speed: 50,
+    spread: Math.PI / 2,
+    angle: -Math.PI / 2,
+    particleLife: 0.9,
+    particleSize: 5,
+    color: "#8bc34a",
+    colorOverLife: ["#e8f5e9", "#8bc34a"],
+    sizeOverLife: { start: 0.5, end: 1.2 },
+    gravity: -60,
+    maxParticles: 30,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  magic: {
+    rate: 32,
+    speed: 80,
+    spread: Math.PI * 2,
+    angle: 0,
+    particleLife: 1.1,
+    particleSize: 5,
+    color: "#ba68c8",
+    colorOverLife: ["#e1bee7", "#ba68c8", "#4a148c"],
+    sizeOverLife: { start: 1, end: 0 },
+    gravity: -20,
+    maxParticles: 60,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  // ── Environment ──
+  fire: {
+    rate: 40,
+    speed: 60,
+    spread: 0.6,
+    angle: -Math.PI / 2,
+    particleLife: 0.7,
+    particleSize: 7,
+    color: "#ff9800",
+    colorOverLife: ["#ffe082", "#ff9800", "#6d4c41", "#37474f"],
+    sizeOverLife: { start: 1.2, end: 0.3 },
+    gravity: -120,
+    maxParticles: 70,
+    blendMode: "additive",
+    particleShape: "soft"
   },
   smoke: {
     rate: 15,
@@ -7825,9 +7927,54 @@ var PARTICLE_PRESETS = {
     particleLife: 1.2,
     particleSize: 10,
     color: "#90a4ae",
+    colorOverLife: ["#90a4ae", "rgba(55,71,79,0)"],
+    sizeOverLife: { start: 0.5, end: 1.8 },
     gravity: -20,
-    maxParticles: 40
+    maxParticles: 40,
+    blendMode: "normal",
+    particleShape: "soft"
+  },
+  rain: {
+    rate: 80,
+    speed: 350,
+    spread: 0.05,
+    angle: Math.PI / 2,
+    particleLife: 0.8,
+    particleSize: 2,
+    color: "#81d4fa",
+    gravity: 900,
+    maxParticles: 300,
+    blendMode: "normal",
+    particleShape: "square"
+  },
+  snow: {
+    rate: 20,
+    speed: 40,
+    spread: 0.4,
+    angle: Math.PI / 2,
+    particleLife: 4,
+    particleSize: 3,
+    color: "#ffffff",
+    gravity: 20,
+    maxParticles: 150,
+    blendMode: "normal",
+    particleShape: "circle"
   },
+  fountain: {
+    rate: 50,
+    speed: 300,
+    spread: 0.3,
+    angle: -Math.PI / 2,
+    particleLife: 1.5,
+    particleSize: 4,
+    color: "#4fc3f7",
+    colorOverLife: ["#b3e5fc", "#4fc3f7", "#0277bd"],
+    gravity: 500,
+    maxParticles: 200,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  // ── UI / reward ──
   coinPickup: {
     rate: 30,
     speed: 80,
@@ -7837,8 +7984,54 @@ var PARTICLE_PRESETS = {
     particleSize: 4,
     color: "#ffd700",
     gravity: 200,
-    maxParticles: 20
+    maxParticles: 20,
+    blendMode: "additive",
+    particleShape: "soft"
   },
+  pickup: {
+    rate: 35,
+    speed: 70,
+    spread: Math.PI * 2,
+    angle: 0,
+    particleLife: 0.5,
+    particleSize: 5,
+    color: "#4fc3f7",
+    colorOverLife: ["#ffffff", "#4fc3f7"],
+    sizeOverLife: { start: 1, end: 0 },
+    gravity: -80,
+    maxParticles: 24,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  sparkle: {
+    rate: 14,
+    speed: 40,
+    spread: Math.PI * 2,
+    angle: 0,
+    particleLife: 0.8,
+    particleSize: 3,
+    color: "#fffde7",
+    sizeOverLife: { start: 0, end: 1 },
+    gravity: 0,
+    maxParticles: 30,
+    blendMode: "additive",
+    particleShape: "soft"
+  },
+  confetti: {
+    rate: 70,
+    speed: 280,
+    spread: Math.PI / 3,
+    angle: -Math.PI / 2,
+    particleLife: 2.2,
+    particleSize: 5,
+    color: "#ffc107",
+    colorOverLife: ["#f44336", "#ffc107", "#4caf50", "#2196f3", "#9c27b0"],
+    gravity: 400,
+    maxParticles: 150,
+    blendMode: "normal",
+    particleShape: "square"
+  },
+  // ── Character ──
   jumpDust: {
     rate: 25,
     speed: 60,
@@ -7848,7 +8041,23 @@ var PARTICLE_PRESETS = {
     particleSize: 5,
     color: "#b0bec5",
     gravity: 80,
-    maxParticles: 20
+    maxParticles: 20,
+    blendMode: "normal",
+    particleShape: "soft"
+  },
+  trail: {
+    rate: 30,
+    speed: 8,
+    spread: 0.2,
+    angle: Math.PI / 2,
+    particleLife: 0.5,
+    particleSize: 4,
+    color: "#4fc3f7",
+    sizeOverLife: { start: 1, end: 0 },
+    gravity: 0,
+    maxParticles: 40,
+    blendMode: "additive",
+    particleShape: "soft"
   }
 };
 
@@ -7894,6 +8103,10 @@ function ParticleEmitter({
   const resolvedColor = color ?? presetConfig.color ?? "#ffffff";
   const resolvedGravity = gravity ?? presetConfig.gravity ?? 200;
   const resolvedMaxParticles = maxParticles ?? presetConfig.maxParticles ?? 100;
+  const resolvedBlendMode = blendMode ?? presetConfig.blendMode;
+  const resolvedParticleShape = particleShape ?? presetConfig.particleShape;
+  const resolvedColorOverLife = colorOverLife ?? presetConfig.colorOverLife;
+  const resolvedSizeOverLife = sizeOverLife ?? presetConfig.sizeOverLife;
   const engine = useContext19(EngineContext);
   const entityId = useContext19(EntityContext);
   useEffect28(() => {
@@ -7919,15 +8132,15 @@ function ParticleEmitter({
       textureSrc,
       enableRotation,
       rotationSpeedRange,
-      sizeOverLife,
+      sizeOverLife: resolvedSizeOverLife,
       attractors,
-      colorOverLife,
-      blendMode,
+      colorOverLife: resolvedColorOverLife,
+      blendMode: resolvedBlendMode,
       mode,
       formationPoints,
       seekStrength,
       colorTransitionDuration,
-      particleShape
+      particleShape: resolvedParticleShape
     });
     return () => engine.ecs.removeComponent(entityId, "ParticlePool");
   }, []);
@@ -7939,9 +8152,9 @@ function ParticleEmitter({
   useEffect28(() => {
     const pool = engine.ecs.getComponent(entityId, "ParticlePool");
     if (!pool) return;
-    pool.blendMode = blendMode;
-    pool.particleShape = particleShape;
-  }, [blendMode, particleShape, engine, entityId]);
+    pool.blendMode = resolvedBlendMode;
+    pool.particleShape = resolvedParticleShape;
+  }, [resolvedBlendMode, resolvedParticleShape, engine, entityId]);
   useEffect28(() => {
     const pool = engine.ecs.getComponent(entityId, "ParticlePool");
     if (!pool) return;
@@ -7971,7 +8184,7 @@ function ParticleEmitter({
 }
 
 // src/components/VirtualJoystick.tsx
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 
 // src/hooks/useVirtualInput.ts
 var _axes = { x: 0, y: 0 };
@@ -8005,10 +8218,10 @@ function VirtualJoystick({
   actionLabel = "A",
   actionName = "action"
 }) {
-  const baseRef = useRef13(null);
-  const stickRef = useRef13(null);
-  const activePtr = useRef13(null);
-  const baseCenterRef = useRef13({ x: 0, y: 0 });
+  const baseRef = useRef14(null);
+  const stickRef = useRef14(null);
+  const activePtr = useRef14(null);
+  const baseCenterRef = useRef14({ x: 0, y: 0 });
   const radius = size / 2 - 16;
   const applyStickPosition = (dx, dy) => {
     if (!stickRef.current) return;
@@ -8556,10 +8769,10 @@ function ParallaxLayer({
 }
 
 // src/components/ScreenFlash.tsx
-import { forwardRef, useImperativeHandle, useRef as useRef14 } from "react";
+import { forwardRef, useImperativeHandle, useRef as useRef15 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var ScreenFlash = forwardRef((_, ref) => {
-  const divRef = useRef14(null);
+  const divRef = useRef15(null);
   useImperativeHandle(ref, () => ({
     flash(color, duration) {
       const el = divRef.current;
@@ -8595,12 +8808,12 @@ var ScreenFlash = forwardRef((_, ref) => {
 ScreenFlash.displayName = "ScreenFlash";
 
 // src/components/CameraZone.tsx
-import { useEffect as useEffect31, useContext as useContext22, useRef as useRef15 } from "react";
+import { useEffect as useEffect31, useContext as useContext22, useRef as useRef16 } from "react";
 import { Fragment as Fragment6, jsx as jsx13 } from "react/jsx-runtime";
 function CameraZone({ x, y, width, height, watchTag = "player", targetX, targetY, children }) {
   const engine = useContext22(EngineContext);
-  const prevFollowRef = useRef15(void 0);
-  const activeRef = useRef15(false);
+  const prevFollowRef = useRef16(void 0);
+  const activeRef = useRef16(false);
   useEffect31(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
@@ -9356,7 +9569,7 @@ function useInputMap(bindings) {
 }
 
 // src/hooks/useEvents.ts
-import { useContext as useContext43, useEffect as useEffect49, useRef as useRef16 } from "react";
+import { useContext as useContext43, useEffect as useEffect49, useRef as useRef17 } from "react";
 function useEvents() {
   const engine = useContext43(EngineContext);
   if (!engine) throw new Error("useEvents must be used inside <Game>");
@@ -9364,7 +9577,7 @@ function useEvents() {
 }
 function useEvent(event, handler) {
   const events = useEvents();
-  const handlerRef = useRef16(handler);
+  const handlerRef = useRef17(handler);
   handlerRef.current = handler;
   useEffect49(() => {
     return events.on(event, (data) => handlerRef.current(data));
@@ -9407,13 +9620,13 @@ function useCoordinates() {
 }
 
 // src/hooks/useWorldQuery.ts
-import { useEffect as useEffect50, useRef as useRef17, useState as useState8 } from "react";
+import { useEffect as useEffect50, useRef as useRef18, useState as useState8 } from "react";
 function useWorldQuery(...components) {
   const engine = useGame();
   const [result, setResult] = useState8(() => engine.ecs.query(...components));
-  const prevRef = useRef17([]);
-  const rafRef = useRef17(0);
-  const mountedRef = useRef17(true);
+  const prevRef = useRef18([]);
+  const rafRef = useRef18(0);
+  const mountedRef = useRef18(true);
   useEffect50(() => {
     mountedRef.current = true;
     const tick2 = () => {
@@ -9480,11 +9693,11 @@ function useInputRecorder() {
 }
 
 // src/hooks/useGamepad.ts
-import { useEffect as useEffect52, useRef as useRef18, useState as useState9 } from "react";
+import { useEffect as useEffect52, useRef as useRef19, useState as useState9 } from "react";
 var EMPTY_STATE = { connected: false, axes: [], buttons: [] };
 function useGamepad(playerIndex = 0) {
   const [state, setState] = useState9(EMPTY_STATE);
-  const rafRef = useRef18(0);
+  const rafRef = useRef19(0);
   useEffect52(() => {
     const poll = () => {
       const gp = navigator.getGamepads()[playerIndex];
@@ -9526,7 +9739,7 @@ function usePause() {
 }
 
 // src/hooks/useProfiler.ts
-import { useContext as useContext46, useEffect as useEffect53, useRef as useRef19, useState as useState11 } from "react";
+import { useContext as useContext46, useEffect as useEffect53, useRef as useRef20, useState as useState11 } from "react";
 var EMPTY = {
   fps: 0,
   frameTime: 0,
@@ -9536,9 +9749,9 @@ var EMPTY = {
 function useProfiler() {
   const engine = useContext46(EngineContext);
   const [data, setData] = useState11(EMPTY);
-  const frameTimesRef = useRef19([]);
-  const lastUpdateRef = useRef19(0);
-  const prevTimeRef = useRef19(0);
+  const frameTimesRef = useRef20([]);
+  const lastUpdateRef = useRef20(0);
+  const prevTimeRef = useRef20(0);
   useEffect53(() => {
     if (!engine) return;
     let rafId2;
@@ -9652,11 +9865,11 @@ function useTouch() {
 }
 
 // src/hooks/useGestures.ts
-import { useEffect as useEffect57, useRef as useRef20 } from "react";
+import { useEffect as useEffect57, useRef as useRef21 } from "react";
 function useGestures(handlers, opts = {}) {
-  const handlersRef = useRef20(handlers);
+  const handlersRef = useRef21(handlers);
   handlersRef.current = handlers;
-  const optsRef = useRef20(opts);
+  const optsRef = useRef21(opts);
   optsRef.current = opts;
   useEffect57(() => {
     const target = optsRef.current.target ?? window;
@@ -9793,14 +10006,14 @@ function useGamepadHaptics(playerIndex = 0) {
 }
 
 // src/hooks/useTimer.ts
-import { useRef as useRef21, useCallback as useCallback5, useEffect as useEffect58, useContext as useContext49 } from "react";
+import { useRef as useRef22, useCallback as useCallback5, useEffect as useEffect58, useContext as useContext49 } from "react";
 function useTimer(duration, onComplete, opts) {
   const engine = useContext49(EngineContext);
-  const onCompleteRef = useRef21(onComplete);
+  const onCompleteRef = useRef22(onComplete);
   onCompleteRef.current = onComplete;
-  const loopRef = useRef21(opts?.loop ?? false);
+  const loopRef = useRef22(opts?.loop ?? false);
   loopRef.current = opts?.loop ?? false;
-  const timerRef = useRef21(null);
+  const timerRef = useRef22(null);
   if (!timerRef.current) {
     timerRef.current = createTimer(
       duration,
@@ -9854,14 +10067,14 @@ function useTimer(duration, onComplete, opts) {
 }
 
 // src/hooks/useCoroutine.ts
-import { useRef as useRef22, useEffect as useEffect59, useContext as useContext50 } from "react";
+import { useRef as useRef23, useEffect as useEffect59, useContext as useContext50 } from "react";
 var wait = (seconds) => ({ type: "wait", seconds });
 var waitFrames = (frames) => ({ type: "waitFrames", frames });
 var waitUntil = (condition) => ({ type: "waitUntil", condition });
 var nextCoroutineId = 1;
 function useCoroutine() {
   const engine = useContext50(EngineContext);
-  const coroutinesRef = useRef22(/* @__PURE__ */ new Map());
+  const coroutinesRef = useRef23(/* @__PURE__ */ new Map());
   useEffect59(() => {
     const eid = engine.ecs.createEntity();
     engine.ecs.addComponent(
@@ -9927,15 +10140,15 @@ function useCoroutine() {
       return coroutinesRef.current.size;
     }
   };
-  const controlsRef = useRef22(controls);
+  const controlsRef = useRef23(controls);
   return controlsRef.current;
 }
 
 // src/hooks/useSceneManager.ts
-import { useState as useState12, useCallback as useCallback6, useRef as useRef23 } from "react";
+import { useState as useState12, useCallback as useCallback6, useRef as useRef24 } from "react";
 function useSceneManager(initialScene) {
   const [stack, setStack] = useState12([initialScene]);
-  const stackRef = useRef23(stack);
+  const stackRef = useRef24(stack);
   stackRef.current = stack;
   const push = useCallback6((scene) => {
     setStack((prev) => [...prev, scene]);
@@ -9971,7 +10184,7 @@ function useSceneManager(initialScene) {
 }
 
 // src/hooks/useSceneTransition.ts
-import { useState as useState13, useCallback as useCallback7, useRef as useRef24, useEffect as useEffect60 } from "react";
+import { useState as useState13, useCallback as useCallback7, useRef as useRef25, useEffect as useEffect60 } from "react";
 function useSceneTransition(initialScene, defaultTransition) {
   const [stack, setStack] = useState13([initialScene]);
   const [transState, setTransState] = useState13({
@@ -9980,9 +10193,9 @@ function useSceneTransition(initialScene, defaultTransition) {
     effect: null,
     pendingAction: null
   });
-  const stackRef = useRef24(stack);
+  const stackRef = useRef25(stack);
   stackRef.current = stack;
-  const transRef = useRef24(transState);
+  const transRef = useRef25(transState);
   transRef.current = transState;
   useEffect60(() => {
     if (transState.phase === "idle") return;
@@ -10171,9 +10384,9 @@ function useInputBuffer(opts) {
 }
 
 // src/hooks/useComboDetector.ts
-import { useMemo as useMemo10, useRef as useRef25 } from "react";
+import { useMemo as useMemo10, useRef as useRef26 } from "react";
 function useComboDetector(combos) {
-  const lastComboRef = useRef25(null);
+  const lastComboRef = useRef26(null);
   const result = useMemo10(() => {
     const detector = new ComboDetector({ combos });
     const api = {
@@ -10237,17 +10450,17 @@ function useAccessibility() {
 }
 
 // src/hooks/useHMR.ts
-import { useEffect as useEffect62, useRef as useRef26, useMemo as useMemo11 } from "react";
+import { useEffect as useEffect62, useRef as useRef27, useMemo as useMemo11 } from "react";
 var idCounter = 0;
 function useHMR(hmrKey) {
-  const idRef = useRef26(null);
+  const idRef = useRef27(null);
   if (idRef.current === null) {
     idRef.current = hmrKey ?? `__hmr_${idCounter++}`;
   }
   const key = idRef.current;
   const isHotReload = hmrLoadState(key) !== void 0;
-  const disposeRef = useRef26(null);
-  const acceptRef = useRef26(null);
+  const disposeRef = useRef27(null);
+  const acceptRef = useRef27(null);
   useEffect62(() => {
     const hot = import.meta.hot;
     if (!hot) return;
@@ -10298,13 +10511,13 @@ function useSquashStretch() {
 }
 
 // src/hooks/useHistory.ts
-import { useCallback as useCallback11, useContext as useContext54, useEffect as useEffect63, useRef as useRef27, useState as useState14 } from "react";
+import { useCallback as useCallback11, useContext as useContext54, useEffect as useEffect63, useRef as useRef28, useState as useState14 } from "react";
 function useHistory(options) {
   const engine = useContext54(EngineContext);
   const capacity = options?.capacity ?? 50;
   const bindKeys = options?.bindKeyboardShortcuts ?? false;
-  const stackRef = useRef27([]);
-  const indexRef = useRef27(-1);
+  const stackRef = useRef28([]);
+  const indexRef = useRef28(-1);
   const [version, setVersion] = useState14(0);
   const bump = useCallback11(() => setVersion((v) => v + 1), []);
   const push = useCallback11(() => {
@@ -10438,7 +10651,7 @@ function useSelection() {
 }
 
 // src/components/TransformHandles.tsx
-import { useContext as useContext56, useEffect as useEffect66, useRef as useRef28 } from "react";
+import { useContext as useContext56, useEffect as useEffect66, useRef as useRef29 } from "react";
 
 // src/hooks/useOverlayTick.ts
 import { useEffect as useEffect65 } from "react";
@@ -10480,8 +10693,8 @@ function TransformHandles({
 }) {
   const engine = useContext56(EngineContext);
   const selection = useSelection();
-  const overlayRef = useRef28(null);
-  const dragRef = useRef28(null);
+  const overlayRef = useRef29(null);
+  const dragRef = useRef29(null);
   useOverlayTick(() => {
     if (!engine) return;
     const overlay = overlayRef.current;
@@ -10831,7 +11044,7 @@ function getBounds(ecs, id) {
 }
 
 // src/components/EditableText.tsx
-import { useContext as useContext58, useEffect as useEffect67, useRef as useRef29 } from "react";
+import { useContext as useContext58, useEffect as useEffect67, useRef as useRef30 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function EditableText({
   value,
@@ -10855,8 +11068,8 @@ function EditableText({
 }) {
   const engine = useContext58(EngineContext);
   const entityId = useContext58(EntityContext);
-  const containerRef = useRef29(null);
-  const inputRef = useRef29(null);
+  const containerRef = useRef30(null);
+  const inputRef = useRef30(null);
   useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const container = containerRef.current;
@@ -11014,7 +11227,7 @@ function copyRegion(source, region, scale) {
 }
 
 // src/components/A11yNode.tsx
-import { useContext as useContext59, useRef as useRef30 } from "react";
+import { useContext as useContext59, useRef as useRef31 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function A11yNode({
   label,
@@ -11030,7 +11243,7 @@ function A11yNode({
 }) {
   const engine = useContext59(EngineContext);
   const entityId = useContext59(EntityContext);
-  const nodeRef = useRef30(null);
+  const nodeRef = useRef31(null);
   useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const node = nodeRef.current;
@@ -11119,7 +11332,7 @@ function worldToScreenCss3(engine, wx, wy) {
 }
 
 // src/components/VectorPath.tsx
-import { useContext as useContext60, useRef as useRef31 } from "react";
+import { useContext as useContext60, useRef as useRef32 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function VectorPath({
   d,
@@ -11135,7 +11348,7 @@ function VectorPath({
 }) {
   const engine = useContext60(EngineContext);
   const entityId = useContext60(EntityContext);
-  const svgRef = useRef31(null);
+  const svgRef = useRef32(null);
   useOverlayTick(() => {
     if (!engine || entityId === null || entityId === void 0) return;
     const svg = svgRef.current;
@@ -11196,12 +11409,12 @@ function worldToScreenCss4(engine, wx, wy) {
 }
 
 // src/hooks/useGrid.ts
-import { useCallback as useCallback14, useContext as useContext61, useMemo as useMemo13, useRef as useRef32, useState as useState16 } from "react";
+import { useCallback as useCallback14, useContext as useContext61, useMemo as useMemo13, useRef as useRef33, useState as useState16 } from "react";
 function useGrid({ width, height, fill }) {
   const engine = useContext61(EngineContext);
   const [version, setVersion] = useState16(0);
   const bump = useCallback14(() => setVersion((v) => v + 1), []);
-  const dataRef = useRef32(null);
+  const dataRef = useRef33(null);
   if (dataRef.current === null) {
     const arr = new Array(width * height);
     if (typeof fill === "function") {
@@ -11381,7 +11594,7 @@ function useGrid({ width, height, fill }) {
 }
 
 // src/hooks/useTurnSystem.ts
-import { useCallback as useCallback15, useContext as useContext62, useEffect as useEffect68, useMemo as useMemo14, useRef as useRef33, useState as useState17 } from "react";
+import { useCallback as useCallback15, useContext as useContext62, useEffect as useEffect68, useMemo as useMemo14, useRef as useRef34, useState as useState17 } from "react";
 function useTurnSystem({
   players,
   initialIndex = 0,
@@ -11394,10 +11607,10 @@ function useTurnSystem({
   const [activeIndex, setActiveIndex] = useState17(initialIndex % players.length);
   const [turn, setTurn] = useState17(0);
   const [isPending, setIsPending] = useState17(false);
-  const pendingRafId = useRef33(null);
-  const pendingRemaining = useRef33(0);
-  const pendingTarget = useRef33(null);
-  const pendingLastTime = useRef33(0);
+  const pendingRafId = useRef34(null);
+  const pendingRemaining = useRef34(0);
+  const pendingTarget = useRef34(null);
+  const pendingLastTime = useRef34(0);
   const clearPending = useCallback15(() => {
     if (pendingRafId.current !== null) {
       cancelAnimationFrame(pendingRafId.current);
@@ -11406,7 +11619,7 @@ function useTurnSystem({
     pendingTarget.current = null;
     setIsPending(false);
   }, []);
-  const startedOnce = useRef33(false);
+  const startedOnce = useRef34(false);
   useEffect68(() => {
     if (startedOnce.current) return;
     startedOnce.current = true;
@@ -11583,7 +11796,7 @@ function screenToWorld(engine, cssX, cssY) {
 }
 
 // src/hooks/useDragDrop.ts
-import { useContext as useContext64, useEffect as useEffect70, useRef as useRef34, useState as useState19 } from "react";
+import { useContext as useContext64, useEffect as useEffect70, useRef as useRef35, useState as useState19 } from "react";
 var dragStateByEngine = /* @__PURE__ */ new WeakMap();
 function getActiveDrag(engine) {
   return dragStateByEngine.get(engine) ?? null;
@@ -11608,7 +11821,7 @@ function useDraggable(options) {
   const entityId = options?.entityId ?? ctxEntityId;
   const [isDragging, setIsDragging] = useState19(false);
   const [position, setPosition] = useState19({ x: 0, y: 0 });
-  const optsRef = useRef34(options);
+  const optsRef = useRef35(options);
   optsRef.current = options;
   useEffect70(() => {
     if (!engine || entityId === null || entityId === void 0 || options?.disabled) return;
@@ -11720,7 +11933,7 @@ function useDroppable(options) {
   const entityId = options?.entityId ?? ctxEntityId;
   const [isOver, setIsOver] = useState19(false);
   const [hoveredBy, setHoveredBy] = useState19(null);
-  const optsRef = useRef34(options);
+  const optsRef = useRef35(options);
   optsRef.current = options;
   useEffect70(() => {
     if (!engine || entityId === null || entityId === void 0 || options?.disabled) return;
@@ -11824,7 +12037,7 @@ function findDroppableUnder(engine, drag) {
 }
 
 // src/hooks/useKeyboardFocus.ts
-import { useContext as useContext65, useEffect as useEffect71, useState as useState20 } from "react";
+import { useContext as useContext65, useEffect as useEffect71, useRef as useRef36, useState as useState20 } from "react";
 var registry = /* @__PURE__ */ new Map();
 var focusedId = null;
 var subscribers = /* @__PURE__ */ new Set();
@@ -11841,17 +12054,19 @@ function setFocused(id) {
 }
 function useFocusable(options) {
   const entityIdCtx = useContext65(EntityContext);
+  const optsRef = useRef36(options);
+  optsRef.current = options;
   useEffect71(() => {
     if (entityIdCtx === null || entityIdCtx === void 0) return;
     const id = entityIdCtx;
     const entry = {
       entityId: id,
-      onFocus: options?.onFocus,
-      onBlur: options?.onBlur,
-      onActivate: options?.onActivate
+      onFocus: (eid) => optsRef.current?.onFocus?.(eid),
+      onBlur: (eid) => optsRef.current?.onBlur?.(eid),
+      onActivate: (eid) => optsRef.current?.onActivate?.(eid)
     };
     registry.set(id, entry);
-    if (options?.autoFocus && focusedId === null) setFocused(id);
+    if (optsRef.current?.autoFocus && focusedId === null) setFocused(id);
     return () => {
       registry.delete(id);
       if (focusedId === id) setFocused(null);
@@ -11994,7 +12209,7 @@ function subscribeFocus(cb) {
 }
 
 // src/components/FocusRing.tsx
-import { useContext as useContext66, useEffect as useEffect72, useRef as useRef35, useState as useState21 } from "react";
+import { useContext as useContext66, useEffect as useEffect72, useRef as useRef37, useState as useState21 } from "react";
 import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function FocusRing({
   color = "#4fc3f7",
@@ -12004,7 +12219,7 @@ function FocusRing({
   pulse = true
 }) {
   const engine = useContext66(EngineContext);
-  const ringRef = useRef35(null);
+  const ringRef = useRef37(null);
   const [focused, setFocused2] = useState21(getFocusedEntityId());
   const [reducedMotion, setReducedMotion] = useState21(false);
   useEffect72(() => {
@@ -12248,12 +12463,12 @@ function useDropThrough(frames = 8) {
 }
 
 // ../gameplay/src/hooks/useGameStateMachine.ts
-import { useState as useState23, useRef as useRef36, useCallback as useCallback19, useEffect as useEffect73, useContext as useContext69 } from "react";
+import { useState as useState23, useRef as useRef38, useCallback as useCallback19, useEffect as useEffect73, useContext as useContext69 } from "react";
 function useGameStateMachine(states, initial) {
   const engine = useContext69(EngineContext);
   const [state, setState] = useState23(initial);
-  const stateRef = useRef36(initial);
-  const statesRef = useRef36(states);
+  const stateRef = useRef38(initial);
+  const statesRef = useRef38(states);
   statesRef.current = states;
   useEffect73(() => {
     statesRef.current[initial]?.onEnter?.();
@@ -12282,22 +12497,22 @@ function useGameStateMachine(states, initial) {
 }
 
 // ../gameplay/src/hooks/useHealth.ts
-import { useRef as useRef37, useEffect as useEffect74, useContext as useContext70, useCallback as useCallback20 } from "react";
+import { useRef as useRef39, useEffect as useEffect74, useContext as useContext70, useCallback as useCallback20 } from "react";
 function useHealth(maxHp, opts = {}) {
   const engine = useContext70(EngineContext);
   const entityId = useContext70(EntityContext);
-  const hpRef = useRef37(maxHp);
-  const invincibleRef = useRef37(false);
+  const hpRef = useRef39(maxHp);
+  const invincibleRef = useRef39(false);
   const iFrameDuration = opts.iFrames ?? 1;
-  const onDeathRef = useRef37(opts.onDeath);
-  const onDamageRef = useRef37(opts.onDamage);
+  const onDeathRef = useRef39(opts.onDeath);
+  const onDamageRef = useRef39(opts.onDamage);
   useEffect74(() => {
     onDeathRef.current = opts.onDeath;
   });
   useEffect74(() => {
     onDamageRef.current = opts.onDamage;
   });
-  const timerRef = useRef37(
+  const timerRef = useRef39(
     createTimer(iFrameDuration, () => {
       invincibleRef.current = false;
     })
@@ -12315,7 +12530,7 @@ function useHealth(maxHp, opts = {}) {
     },
     [iFrameDuration]
   );
-  const takeDamageRef = useRef37(takeDamage);
+  const takeDamageRef = useRef39(takeDamage);
   useEffect74(() => {
     takeDamageRef.current = takeDamage;
   }, [takeDamage]);
@@ -12421,11 +12636,11 @@ function useKinematicBody() {
 }
 
 // ../gameplay/src/hooks/useLevelTransition.ts
-import { useState as useState24, useRef as useRef38, useCallback as useCallback22 } from "react";
+import { useState as useState24, useRef as useRef40, useCallback as useCallback22 } from "react";
 function useLevelTransition(initial) {
   const [currentLevel, setCurrentLevel] = useState24(initial);
   const [isTransitioning, setIsTransitioning] = useState24(false);
-  const overlayRef = useRef38(null);
+  const overlayRef = useRef40(null);
   const transitionTo = useCallback22((level, opts = {}) => {
     const { duration = 0.4, type = "fade" } = opts;
     if (type === "instant") {
@@ -12630,10 +12845,10 @@ function useRestart() {
 }
 
 // ../gameplay/src/hooks/useSave.ts
-import { useCallback as useCallback26, useRef as useRef39 } from "react";
+import { useCallback as useCallback26, useRef as useRef41 } from "react";
 function useSave(key, defaultValue, opts = {}) {
   const version = opts.version ?? 1;
-  const dataRef = useRef39(defaultValue);
+  const dataRef = useRef41(defaultValue);
   const save = useCallback26(
     (value) => {
       dataRef.current = value;
@@ -12685,7 +12900,7 @@ function useSave(key, defaultValue, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useIDBSave.ts
-import { useCallback as useCallback27, useRef as useRef40 } from "react";
+import { useCallback as useCallback27, useRef as useRef42 } from "react";
 var DB_NAME = "cubeforge-saves";
 var STORE_NAME = "saves";
 function openDB() {
@@ -12703,7 +12918,7 @@ function openDB() {
 }
 function useIDBSave(key, defaultValue, opts = {}) {
   const version = opts.version ?? 1;
-  const dbRef = useRef40(null);
+  const dbRef = useRef42(null);
   const getDB = useCallback27(() => {
     if (!dbRef.current) dbRef.current = openDB();
     return dbRef.current;
@@ -12818,11 +13033,11 @@ function useTopDownMovement(entityId, opts = {}) {
 }
 
 // ../gameplay/src/hooks/useDialogue.ts
-import { useState as useState27, useCallback as useCallback28, useRef as useRef41 } from "react";
+import { useState as useState27, useCallback as useCallback28, useRef as useRef43 } from "react";
 function useDialogue() {
   const [active, setActive] = useState27(false);
   const [currentId, setCurrentId] = useState27(null);
-  const scriptRef = useRef41(null);
+  const scriptRef = useRef43(null);
   const start2 = useCallback28((script, startId) => {
     scriptRef.current = script;
     const id = startId ?? Object.keys(script)[0];
@@ -12977,16 +13192,16 @@ function DialogueBox({ dialogue, onAdvance, onClose, style = {} }) {
 }
 
 // ../gameplay/src/hooks/useCutscene.ts
-import { useState as useState28, useCallback as useCallback29, useRef as useRef42, useEffect as useEffect77, useContext as useContext75 } from "react";
+import { useState as useState28, useCallback as useCallback29, useRef as useRef44, useEffect as useEffect77, useContext as useContext75 } from "react";
 function useCutscene() {
   const engine = useContext75(EngineContext);
   const [playing, setPlaying] = useState28(false);
   const [stepIndex, setStepIndex] = useState28(0);
-  const stepsRef = useRef42([]);
-  const timerRef = useRef42(0);
-  const idxRef = useRef42(0);
-  const playingRef = useRef42(false);
-  const entityRef = useRef42(null);
+  const stepsRef = useRef44([]);
+  const timerRef = useRef44(0);
+  const idxRef = useRef44(0);
+  const playingRef = useRef44(false);
+  const entityRef = useRef44(null);
   const finish = useCallback29(() => {
     playingRef.current = false;
     setPlaying(false);
@@ -13119,12 +13334,12 @@ function useGameStore(key, initialState) {
 }
 
 // ../gameplay/src/hooks/useTween.ts
-import { useRef as useRef43, useCallback as useCallback31, useEffect as useEffect78 } from "react";
+import { useRef as useRef45, useCallback as useCallback31, useEffect as useEffect78 } from "react";
 function useTween(opts) {
-  const rafRef = useRef43(null);
-  const startTimeRef = useRef43(0);
-  const runningRef = useRef43(false);
-  const optsRef = useRef43(opts);
+  const rafRef = useRef45(null);
+  const startTimeRef = useRef45(0);
+  const runningRef = useRef45(false);
+  const optsRef = useRef45(opts);
   optsRef.current = opts;
   const stop = useCallback31(() => {
     if (rafRef.current !== null) {
@@ -13179,13 +13394,13 @@ function useTween(opts) {
 }
 
 // ../gameplay/src/hooks/useObjectPool.ts
-import { useRef as useRef44, useMemo as useMemo16, useEffect as useEffect79 } from "react";
+import { useRef as useRef46, useMemo as useMemo16, useEffect as useEffect79 } from "react";
 function useObjectPool(factory, reset, initialSize) {
-  const poolRef = useRef44([]);
-  const activeRef = useRef44(0);
-  const factoryRef = useRef44(factory);
+  const poolRef = useRef46([]);
+  const activeRef = useRef46(0);
+  const factoryRef = useRef46(factory);
   factoryRef.current = factory;
-  const resetRef = useRef44(reset);
+  const resetRef = useRef46(reset);
   resetRef.current = reset;
   useEffect79(() => {
     if (initialSize != null && initialSize > 0) {
@@ -13322,6 +13537,164 @@ function createAtlas(names, _columns) {
   return atlas;
 }
 
+// src/components/HUD.tsx
+import { createContext as createContext3, useContext as useContext78, useMemo as useMemo19 } from "react";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var HUDContextRef = createContext3(null);
+function HUD({
+  dimDuringTransitions = true,
+  dimmedOpacity = 0.25,
+  visible = true,
+  safeArea = true,
+  padding = 12,
+  style,
+  className,
+  children
+}) {
+  const ctx = useMemo19(() => ({ padding, safeArea }), [padding, safeArea]);
+  const rootStyle = {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 100,
+    opacity: visible ? 1 : 0,
+    transition: "opacity 180ms ease-out",
+    userSelect: "none",
+    ...style
+  };
+  void dimDuringTransitions;
+  void dimmedOpacity;
+  return /* @__PURE__ */ jsx22(HUDContextRef.Provider, { value: ctx, children: /* @__PURE__ */ jsx22("div", { className, style: rootStyle, "data-cubeforge-hud": "true", children }) });
+}
+function useHUD() {
+  return useContext78(HUDContextRef) ?? { padding: 12, safeArea: false };
+}
+function HUDZone({
+  position = "topLeft",
+  direction,
+  gap = 8,
+  interactive = true,
+  style,
+  className,
+  children
+}) {
+  const { padding, safeArea } = useHUD();
+  const isTop = position.startsWith("top");
+  const isBottom = position.startsWith("bottom");
+  const isCenter = position.startsWith("center");
+  const isLeft = position.endsWith("Left") || position === "centerLeft";
+  const isRight = position.endsWith("Right") || position === "centerRight";
+  const isHCenter = position.endsWith("Center") || position === "center";
+  const flexDirection = direction ?? (isTop || isBottom ? "row" : "column");
+  const sa = (side) => safeArea ? `max(${padding}px, env(safe-area-inset-${side}))` : `${padding}px`;
+  const zoneStyle = {
+    position: "absolute",
+    display: "flex",
+    flexDirection,
+    gap,
+    pointerEvents: interactive ? "auto" : "none",
+    ...isTop && { top: sa("top") },
+    ...isBottom && { bottom: sa("bottom") },
+    ...isLeft && { left: sa("left") },
+    ...isRight && { right: sa("right") },
+    ...isCenter && !isHCenter && { top: "50%", transform: "translateY(-50%)" },
+    ...isHCenter && !isCenter && { left: "50%", transform: "translateX(-50%)" },
+    ...position === "center" && { top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
+    ...isHCenter && !isCenter && isTop && { top: sa("top") },
+    ...isHCenter && !isCenter && isBottom && { bottom: sa("bottom") },
+    alignItems: isHCenter ? "center" : isRight ? "flex-end" : "flex-start",
+    ...style
+  };
+  return /* @__PURE__ */ jsx22("div", { className, style: zoneStyle, children });
+}
+function HUDBar({
+  value,
+  max,
+  label,
+  color = "#4fc3f7",
+  trackColor = "rgba(255,255,255,0.08)",
+  width = 180,
+  height = 14,
+  showValue = true,
+  rtl = false,
+  rounded = true,
+  animated = true,
+  style
+}) {
+  const pct = max > 0 ? Math.max(0, Math.min(1, value / max)) : 0;
+  const fillStyle = {
+    width: `${pct * 100}%`,
+    height: "100%",
+    background: color,
+    borderRadius: rounded ? height / 2 : 0,
+    transition: animated ? "width 160ms ease-out" : void 0,
+    ...rtl && { marginLeft: "auto" }
+  };
+  const trackStyle = {
+    width,
+    height,
+    background: trackColor,
+    borderRadius: rounded ? height / 2 : 0,
+    overflow: "hidden",
+    position: "relative",
+    display: "flex",
+    flexDirection: rtl ? "row-reverse" : "row"
+  };
+  const labelStyle = {
+    fontFamily: "system-ui, sans-serif",
+    fontSize: 11,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    color: "#e0e7f1",
+    opacity: 0.85,
+    display: "flex",
+    justifyContent: "space-between",
+    marginBottom: 4
+  };
+  return /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", ...style }, "aria-label": label, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs11("div", { style: labelStyle, children: [
+      label && /* @__PURE__ */ jsx22("span", { children: label }),
+      showValue && /* @__PURE__ */ jsxs11("span", { style: { fontVariantNumeric: "tabular-nums" }, children: [
+        Math.round(value),
+        " / ",
+        max
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx22("div", { style: trackStyle, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, children: /* @__PURE__ */ jsx22("div", { style: fillStyle }) })
+  ] });
+}
+function HUDCounter({
+  value,
+  icon,
+  label,
+  pulse = true,
+  color = "#fff",
+  fontSize = 18,
+  style
+}) {
+  void pulse;
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        fontFamily: "system-ui, sans-serif",
+        fontSize,
+        color,
+        fontVariantNumeric: "tabular-nums",
+        ...style
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx22("span", { style: { fontSize: fontSize * 1.1 }, children: icon }),
+        /* @__PURE__ */ jsx22("span", { children: value }),
+        label && /* @__PURE__ */ jsx22("span", { style: { opacity: 0.7, fontSize: fontSize * 0.75 }, children: label })
+      ]
+    }
+  );
+}
+
 // src/utils/animationHelpers.ts
 function playClip(world, entityId, clipName) {
   const anim = world.getComponent(entityId, "AnimationState");
@@ -13351,7 +13724,7 @@ function definePrefab(name, defaults, render) {
 }
 
 // src/hooks/useNetworkSync.ts
-import { useEffect as useEffect81, useRef as useRef46 } from "react";
+import { useEffect as useEffect81, useRef as useRef48 } from "react";
 
 // ../../packages/net/src/transport.ts
 function isBinaryTransport(t) {
@@ -13696,7 +14069,7 @@ function syncEntity(config) {
 }
 
 // ../../packages/net/src/useNetworkInput.ts
-import { useState as useState29, useEffect as useEffect80, useRef as useRef45 } from "react";
+import { useState as useState29, useEffect as useEffect80, useRef as useRef47 } from "react";
 var INPUT_MSG_TYPE = "input:state";
 function useNetworkInput(config) {
   const { room, keys, input, tickRate = 20 } = config;
@@ -13705,7 +14078,7 @@ function useNetworkInput(config) {
     () => Object.fromEntries(keys.map((k) => [k, false]))
   );
   const [remoteInputs] = useState29(() => /* @__PURE__ */ new Map());
-  const localInputRef = useRef45(localInput);
+  const localInputRef = useRef47(localInput);
   useEffect80(() => {
     let cleanupDom = null;
     if (!input) {
@@ -13920,7 +14293,7 @@ function lerpState(a, b, t) {
 
 // src/hooks/useNetworkSync.ts
 function useNetworkSync(entityId, components, room, world, owner, opts = {}) {
-  const optsRef = useRef46(opts);
+  const optsRef = useRef48(opts);
   optsRef.current = opts;
   useEffect81(() => {
     const sync = syncEntity({
@@ -13937,16 +14310,16 @@ function useNetworkSync(entityId, components, room, world, owner, opts = {}) {
 }
 
 // src/hooks/useRemotePlayer.ts
-import { useEffect as useEffect82, useRef as useRef47, useState as useState30 } from "react";
+import { useEffect as useEffect82, useRef as useRef49, useState as useState30 } from "react";
 var PEER_JOIN_MSG = "peer:join";
 var PEER_LEAVE_MSG = "peer:leave";
 function useRemotePlayer(config) {
   const { room, world, createEntity, destroyEntity } = config;
   const [players, setPlayers] = useState30(() => /* @__PURE__ */ new Map());
-  const playersRef = useRef47(players);
-  const createRef = useRef47(createEntity);
+  const playersRef = useRef49(players);
+  const createRef = useRef49(createEntity);
   createRef.current = createEntity;
-  const destroyRef = useRef47(destroyEntity);
+  const destroyRef = useRef49(destroyEntity);
   destroyRef.current = destroyEntity;
   useEffect82(() => {
     function spawnPeer(peerId) {
@@ -14020,6 +14393,10 @@ export {
   FocusRing,
   Game,
   Gradient,
+  HUD,
+  HUDBar,
+  HUDCounter,
+  HUDZone,
   HalfSpaceCollider,
   HeightFieldCollider,
   HierarchySystem,
@@ -14030,6 +14407,7 @@ export {
   Mask,
   MovingPlatform,
   NineSlice,
+  PARTICLE_PRESETS,
   ParallaxLayer,
   ParticleEmitter,
   Polygon,