@jgengine/react 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -11,6 +11,22 @@ Agents building on the published SDK can also read this programmatically:
 same data as typed values, so an updater can diff its installed version against
 the latest and surface the migration steps.
 
+## Unreleased
+
+## 0.9.0
+
+### Added
+
+- Mobile HUD fit — design-resolution UI scaling now applies to every game by default: `HudCanvas` measures the live viewport and scales the whole HUD from `PlayableGame.hudFit.designSize` (default 1600×900, clamps `minScale`/`maxScale` 0.4–1) so desktop-authored layouts shrink to fit a phone instead of overflowing it; `hudFit.mobile` overrides tune the phone fit separately. Pure math lives in `@jgengine/core/ui/hudScale` (`hudScaleForViewport`, `resolveHudFit`, `rectOverflow`, `overflowingPanels`); the shell mounts `@jgengine/react`'s `HudViewportProvider` around `GameUI` so games need no wiring.
+- Graphics → UI scale — a player-facing `graphics.uiScale` slider (0.5–1.5, default 1) multiplies the computed HUD scale on every platform; the same resolution system drives desktop preference and mobile shrink.
+- HUD overflow gate — `HudCanvas` measures every `HudPanel` against the viewport at runtime and reports offenders on a `data-hud-overflow` attribute (plus a console warning); `bun run shoot <game> --device mobile|both` now exits non-zero naming the panels that escape the viewport.
+- Automatic visibility & streaming defaults — an engine-level `VisibilitySystem` (exported from `@jgengine/core`) gives every scene renderer-agnostic culling and asset-streaming policy with no per-object wiring: distance culling, preload margins, hysteresis, delayed unloading, multi-camera awareness (including cameras excluded from streaming), and per-object overrides (always-visible, never-unload, disabled culling/streaming, custom render distance and preload margin).
+- Self-hosted asset mirror — `DEFAULT_RELEASE_BASE` now points at this repo's rolling `packs` release instead of the upstream host; a catalog-driven `mirror-assets` workflow (weekly cron + manual dispatch) keeps the mirror in sync with the asset catalog.
+
+### Changed
+
+- Mobile HUD fit is on by default — design-resolution HUD scaling now applies to every game with no config change (previously opt-in via `platforms: ["web", "mobile"]`). A desktop-only game keeps the legacy fixed 0.85 compact zoom by declaring `platforms: ["web"]` (without `"mobile"`).
+
 ## 0.8.0
 
 Transport-agnostic multiplayer (socket.io, WebRTC p2p, LAN/Fly adapters) plus grid/voxel

package/dist/chatBubbles.d.ts

@@ -0,0 +1,15 @@
+import type { ChatMessage } from "@jgengine/core/game/chat";
+export interface ChatBubble {
+    id: string;
+    fromUserId: string;
+    body: string;
+    at: number;
+}
+export interface ChatBubblesOptions {
+    channelId?: string;
+    ttlMs?: number;
+    limit?: number;
+}
+export declare function latestChatBubbles(messages: readonly ChatMessage[], nowMs: number, ttlMs: number): ChatBubble[];
+export declare function useChatBubbles(options?: ChatBubblesOptions): readonly ChatBubble[];
+export declare function useEntityChatBubble(instanceId: string, options?: ChatBubblesOptions): ChatBubble | null;

package/dist/chatBubbles.js

@@ -0,0 +1,45 @@
+import { useEffect, useMemo, useState } from "react";
+import { useGameStore } from "./hooks.js";
+const DEFAULT_CHAT_BUBBLE_CHANNEL = "proximity";
+const DEFAULT_CHAT_BUBBLE_TTL_MS = 4000;
+const DEFAULT_CHAT_BUBBLE_LIMIT = 8;
+const CHAT_BUBBLE_TICK_MS = 500;
+export function latestChatBubbles(messages, nowMs, ttlMs) {
+    const cutoff = nowMs - ttlMs;
+    const latestByUser = new Map();
+    for (const message of messages) {
+        if (message.at <= cutoff)
+            continue;
+        const current = latestByUser.get(message.fromUserId);
+        if (current === undefined || message.at > current.at) {
+            latestByUser.set(message.fromUserId, message);
+        }
+    }
+    return [...latestByUser.values()]
+        .sort((a, b) => a.at - b.at)
+        .map((message) => ({
+        id: message.id,
+        fromUserId: message.fromUserId,
+        body: message.body,
+        at: message.at,
+    }));
+}
+export function useChatBubbles(options) {
+    const channelId = options?.channelId ?? DEFAULT_CHAT_BUBBLE_CHANNEL;
+    const ttlMs = options?.ttlMs ?? DEFAULT_CHAT_BUBBLE_TTL_MS;
+    const limit = options?.limit ?? DEFAULT_CHAT_BUBBLE_LIMIT;
+    const messages = useGameStore((ctx) => ctx.game.chat.history(channelId, { limit }));
+    const [now, setNow] = useState(() => Date.now());
+    const hasLiveMessage = messages.some((message) => message.at > now - ttlMs);
+    useEffect(() => {
+        if (!hasLiveMessage)
+            return undefined;
+        const id = setInterval(() => setNow(Date.now()), CHAT_BUBBLE_TICK_MS);
+        return () => clearInterval(id);
+    }, [hasLiveMessage]);
+    return useMemo(() => latestChatBubbles(messages, now, ttlMs), [messages, now, ttlMs]);
+}
+export function useEntityChatBubble(instanceId, options) {
+    const bubbles = useChatBubbles(options);
+    return bubbles.find((bubble) => bubble.fromUserId === instanceId) ?? null;
+}

package/dist/components.d.ts

@@ -6,6 +6,7 @@ import { type QteStep } from "@jgengine/core/interaction/qte";
 import type { FeedEntry } from "@jgengine/core/game/feed";
 import type { StatLevelUpEvent } from "@jgengine/core/game/events";
 import { type CheckAdvantage, type CheckResult } from "@jgengine/core/stats/rollCheck";
+export { paintQteStepDom, paintSkillCheckDom } from "./skillCheckPaint.js";
 export declare function SlotGrid({ inventoryId, className, renderSlot, }: {
     inventoryId: string;
     className?: string;

package/dist/components.js

@@ -5,6 +5,8 @@ import { pendingQteStep } from "@jgengine/core/interaction/qte";
 import { rollCheck } from "@jgengine/core/stats/rollCheck";
 import { useGameContext } from "./provider.js";
 import { useCurrency, useEntityStat, useFeed, useInventory, useLocalPlayerDead } from "./hooks.js";
+import { paintQteStepDom, paintSkillCheckDom } from "./skillCheckPaint.js";
+export { paintQteStepDom, paintSkillCheckDom } from "./skillCheckPaint.js";
 export function SlotGrid({ inventoryId, className, renderSlot, }) {
     const slots = useInventory(inventoryId);
     return (_jsx("div", { className: className, "data-inventory": inventoryId, children: slots.map((slot, index) => (_jsx("div", { "data-slot": index, children: renderSlot !== undefined
@@ -55,45 +57,56 @@ export function DialogueBox({ dialogue, onChoice, rng, className, lineClassName,
 }
 export function SkillCheckBar({ config, startedAt, className, trackClassName, zoneClassName, markerClassName, renderStatus, }) {
     const ctx = useGameContext();
-    const [, tick] = useState(0);
+    const rootRef = useRef(null);
+    const zoneRef = useRef(null);
+    const markerRef = useRef(null);
+    const [status, setStatus] = useState(null);
+    const statusKeyRef = useRef("");
     useEffect(() => {
         let frame;
         const step = () => {
-            tick((n) => n + 1);
+            const elapsed = Math.max(0, ctx.time.now() - startedAt);
+            const result = evaluateSkillCheck(config, elapsed);
+            const root = rootRef.current;
+            const zone = zoneRef.current;
+            const marker = markerRef.current;
+            if (root !== null && zone !== null && marker !== null) {
+                paintSkillCheckDom(root, zone, marker, config, result);
+            }
+            if (renderStatus !== undefined) {
+                const key = `${result.success}:${result.timedOut}:${Math.round(result.markerPosition)}`;
+                if (key !== statusKeyRef.current) {
+                    statusKeyRef.current = key;
+                    setStatus(result);
+                }
+            }
             frame = requestAnimationFrame(step);
         };
         frame = requestAnimationFrame(step);
         return () => cancelAnimationFrame(frame);
-    }, []);
-    const elapsed = Math.max(0, ctx.time.now() - startedAt);
-    const result = evaluateSkillCheck(config, elapsed);
-    const zoneLeft = (result.zone.start / config.trackWidth) * 100;
-    const zoneWidth = ((result.zone.end - result.zone.start) / config.trackWidth) * 100;
-    const markerLeft = (result.markerPosition / config.trackWidth) * 100;
-    return (_jsxs("div", { className: className, "data-skill-check": true, "data-in-zone": result.success, "data-timed-out": result.timedOut, children: [_jsxs("div", { className: trackClassName, "data-track": true, style: { position: "relative" }, children: [_jsx("div", { className: zoneClassName, "data-zone": true, style: { position: "absolute", left: `${zoneLeft}%`, width: `${zoneWidth}%`, height: "100%" } }), _jsx("div", { className: markerClassName, "data-marker": true, style: { position: "absolute", left: `${markerLeft}%`, height: "100%" } })] }), renderStatus?.(result)] }));
+    }, [ctx, config, startedAt, renderStatus]);
+    return (_jsxs("div", { ref: rootRef, className: className, "data-skill-check": true, "data-in-zone": "false", "data-timed-out": "false", children: [_jsxs("div", { className: trackClassName, "data-track": true, style: { position: "relative" }, children: [_jsx("div", { ref: zoneRef, className: zoneClassName, "data-zone": true, style: { position: "absolute", left: "0%", width: "0%", height: "100%" } }), _jsx("div", { ref: markerRef, className: markerClassName, "data-marker": true, style: { position: "absolute", left: "0%", height: "100%" } })] }), renderStatus !== undefined && status !== null ? renderStatus(status) : null] }));
 }
 export function QteTrack({ steps, startedAt, className, stepClassName, activeClassName, doneClassName, }) {
     const ctx = useGameContext();
-    const [, tick] = useState(0);
+    const stepRefs = useRef(new Map());
     useEffect(() => {
         let frame;
         const step = () => {
-            tick((n) => n + 1);
+            const elapsed = Math.max(0, ctx.time.now() - startedAt);
+            const active = pendingQteStep(steps, elapsed);
+            paintQteStepDom(stepRefs.current, steps, elapsed, active?.id ?? null, stepClassName, activeClassName, doneClassName);
             frame = requestAnimationFrame(step);
         };
         frame = requestAnimationFrame(step);
         return () => cancelAnimationFrame(frame);
-    }, []);
-    const elapsed = Math.max(0, ctx.time.now() - startedAt);
-    const active = pendingQteStep(steps, elapsed);
-    return (_jsx("div", { className: className, "data-qte": true, children: steps.map((step) => {
-            const isActive = active?.id === step.id;
-            const isDone = elapsed > step.windowEnd;
-            const classes = [stepClassName, isActive ? activeClassName : isDone ? doneClassName : undefined]
-                .filter(Boolean)
-                .join(" ");
-            return (_jsx("div", { className: classes.length > 0 ? classes : undefined, "data-qte-step": step.id, "data-active": isActive, "data-done": isDone, children: step.action }, step.id));
-        }) }));
+    }, [ctx, steps, startedAt, stepClassName, activeClassName, doneClassName]);
+    return (_jsx("div", { className: className, "data-qte": true, children: steps.map((step) => (_jsx("div", { ref: (node) => {
+                if (node === null)
+                    stepRefs.current.delete(step.id);
+                else
+                    stepRefs.current.set(step.id, node);
+            }, className: stepClassName, "data-qte-step": step.id, "data-active": "false", "data-done": "false", children: step.action }, step.id))) }));
 }
 export function CaptureOdds({ chance, className, fillClassName, }) {
     const percent = Math.round(Math.min(1, Math.max(0, chance)) * 100);

package/dist/display.d.ts

@@ -1,7 +1,8 @@
 /**
  * Viewport/input-modality profile for adaptive HUDs: coarse pointer means a
  * touchscreen is the primary input (mount touch controls, enlarge tap
- * targets), compact means phone-width layout (collapse side panels), portrait
+ * targets), compact means phone-scale layout — narrow width or the short
+ * height of a landscape phone (collapse side panels), portrait
  * distinguishes the two phone orientations. Values track live media-query
  * changes and are safe to read during SSR (everything false).
  */

package/dist/display.js

@@ -1,14 +1,15 @@
 /**
  * Viewport/input-modality profile for adaptive HUDs: coarse pointer means a
  * touchscreen is the primary input (mount touch controls, enlarge tap
- * targets), compact means phone-width layout (collapse side panels), portrait
+ * targets), compact means phone-scale layout — narrow width or the short
+ * height of a landscape phone (collapse side panels), portrait
  * distinguishes the two phone orientations. Values track live media-query
  * changes and are safe to read during SSR (everything false).
  */
 import { useSyncExternalStore } from "react";
 const QUERIES = {
     coarsePointer: "(pointer: coarse)",
-    compact: "(max-width: 820px)",
+    compact: "(max-width: 820px), (max-height: 500px)",
     portrait: "(orientation: portrait)",
 };
 const SERVER_PROFILE = { coarsePointer: false, compact: false, portrait: false };

package/dist/dragLayer.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
+import { type CSSProperties, type PointerEvent as ReactPointerEvent, type ReactNode, type RefObject } from "react";
 import { type Cell, type Rotation } from "@jgengine/core/inventory/shapedGrid";
 export interface DragPayload<T> {
     id: string;
@@ -30,6 +30,10 @@ export interface DropInfo<T> {
 export interface DragLayer<T> {
     state: DragState<T>;
     dragging: boolean;
+    pointRef: RefObject<{
+        x: number;
+        y: number;
+    }>;
     beginDrag(payload: {
         id: string;
         value: T;
@@ -39,6 +43,7 @@ export interface DragLayer<T> {
     setTarget(target: string | null, cell?: Cell | null): void;
     endDrag(): DropInfo<T> | null;
     cancel(): void;
+    attachGhost(element: HTMLElement | null): void;
 }
 export declare function useDragLayer<T>(options?: {
     onDrop?: (info: DropInfo<T>) => void;

package/dist/dragLayer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState, } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { cellFromPoint, } from "@jgengine/core/inventory/shapedGrid";
 const EMPTY_POINT = { x: 0, y: 0 };
 export function useDragLayer(options) {
@@ -10,47 +10,70 @@ export function useDragLayer(options) {
         overTarget: null,
         overCell: null,
     });
+    const pointRef = useRef(EMPTY_POINT);
+    const ghostRef = useRef(null);
     const moveRef = useRef(null);
+    const payloadRef = useRef(null);
+    const overRef = useRef({ target: null, cell: null });
     const detach = useCallback(() => {
         if (moveRef.current !== null) {
             window.removeEventListener("pointermove", moveRef.current);
             moveRef.current = null;
         }
     }, []);
+    const writeGhost = useCallback((point, rotation) => {
+        const el = ghostRef.current;
+        if (el === null)
+            return;
+        el.style.left = `${point.x}px`;
+        el.style.top = `${point.y}px`;
+        el.style.transform = `translate(-50%, -50%) rotate(${rotation * 90}deg)`;
+    }, []);
     const beginDrag = useCallback((payload, event) => {
         const point = { x: event.clientX, y: event.clientY };
+        const nextPayload = { id: payload.id, value: payload.value, rotation: payload.rotation ?? 0 };
+        payloadRef.current = nextPayload;
+        overRef.current = { target: null, cell: null };
+        pointRef.current = point;
         setState({
-            payload: { id: payload.id, value: payload.value, rotation: payload.rotation ?? 0 },
+            payload: nextPayload,
             point,
             origin: point,
             overTarget: null,
             overCell: null,
         });
+        writeGhost(point, nextPayload.rotation);
         const onMove = (moveEvent) => {
-            setState((prev) => prev.payload === null
-                ? prev
-                : { ...prev, point: { x: moveEvent.clientX, y: moveEvent.clientY } });
+            if (payloadRef.current === null)
+                return;
+            const next = { x: moveEvent.clientX, y: moveEvent.clientY };
+            pointRef.current = next;
+            writeGhost(next, payloadRef.current.rotation);
         };
         detach();
         moveRef.current = onMove;
         window.addEventListener("pointermove", onMove);
-    }, [detach]);
+    }, [detach, writeGhost]);
     const rotate = useCallback((quarterTurns = 1) => {
-        setState((prev) => prev.payload === null
-            ? prev
-            : {
-                ...prev,
-                payload: {
-                    ...prev.payload,
-                    rotation: (((prev.payload.rotation + quarterTurns) % 4) + 4) % 4,
-                },
-            });
-    }, []);
+        setState((prev) => {
+            if (prev.payload === null)
+                return prev;
+            const rotation = (((prev.payload.rotation + quarterTurns) % 4) + 4) % 4;
+            const payload = { ...prev.payload, rotation };
+            payloadRef.current = payload;
+            writeGhost(pointRef.current, rotation);
+            return { ...prev, payload, point: pointRef.current };
+        });
+    }, [writeGhost]);
     const setTarget = useCallback((target, cell = null) => {
-        setState((prev) => ({ ...prev, overTarget: target, overCell: cell }));
+        overRef.current = { target, cell };
+        setState((prev) => ({ ...prev, overTarget: target, overCell: cell, point: pointRef.current }));
     }, []);
     const reset = useCallback(() => {
         detach();
+        payloadRef.current = null;
+        overRef.current = { target: null, cell: null };
+        pointRef.current = EMPTY_POINT;
         setState({
             payload: null,
             point: EMPTY_POINT,
@@ -60,38 +83,48 @@ export function useDragLayer(options) {
         });
     }, [detach]);
     const endDrag = useCallback(() => {
+        const payload = payloadRef.current;
         let info = null;
-        setState((prev) => {
-            if (prev.payload !== null) {
-                info = {
-                    payload: prev.payload,
-                    target: prev.overTarget,
-                    cell: prev.overCell,
-                    point: prev.point,
-                };
-            }
-            return prev;
-        });
-        if (info !== null)
+        if (payload !== null) {
+            info = {
+                payload,
+                target: overRef.current.target,
+                cell: overRef.current.cell,
+                point: pointRef.current,
+            };
             options?.onDrop?.(info);
+        }
         reset();
         return info;
     }, [options, reset]);
+    const attachGhost = useCallback((element) => {
+        ghostRef.current = element;
+        if (element !== null && payloadRef.current !== null) {
+            writeGhost(pointRef.current, payloadRef.current.rotation);
+        }
+    }, [writeGhost]);
     return {
         state,
         dragging: state.payload !== null,
+        pointRef,
         beginDrag,
         rotate,
         setTarget,
         endDrag,
         cancel: reset,
+        attachGhost,
     };
 }
 export function DragGhost({ layer, className, style, children, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        layer.attachGhost(ref.current);
+        return () => layer.attachGhost(null);
+    }, [layer, layer.state.payload]);
     if (layer.state.payload === null)
         return null;
-    const { x, y } = layer.state.point;
-    return (_jsx("div", { className: className, "data-drag-ghost": "", style: {
+    const { x, y } = layer.pointRef.current;
+    return (_jsx("div", { ref: ref, className: className, "data-drag-ghost": "", style: {
             position: "fixed",
             left: x,
             top: y,

package/dist/engineStore.d.ts

@@ -6,5 +6,5 @@ export interface EventfulEngineStore<TEventMap extends object> {
     on<K extends keyof TEventMap>(eventName: K, listener: (payload: TEventMap[K]) => void): () => void;
 }
 export declare function useEngineState<TState>(store: ReadableEngineStore<TState>): TState;
-export declare function useEngineStore<TState, TSelected>(store: ReadableEngineStore<TState>, selector: (state: TState) => TSelected): TSelected;
+export declare function useEngineStore<TState, TSelected>(store: ReadableEngineStore<TState>, selector: (state: TState) => TSelected, isEqual?: (previous: TSelected, next: TSelected) => boolean): TSelected;
 export declare function useEngineEvent<TEventMap extends object, K extends keyof TEventMap>(store: EventfulEngineStore<TEventMap>, eventName: K, handler: (payload: TEventMap[K]) => void): void;

package/dist/engineStore.js

@@ -1,11 +1,19 @@
 import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import { createSelectCache, readSelectSnapshot } from "./selectSnapshot.js";
 export function useEngineState(store) {
     const subscribe = useCallback((onChange) => store.subscribe(() => onChange()), [store]);
     const getSnapshot = useCallback(() => store.getState(), [store]);
     return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
-export function useEngineStore(store, selector) {
-    return selector(useEngineState(store));
+export function useEngineStore(store, selector, isEqual = Object.is) {
+    const selectorRef = useRef(selector);
+    selectorRef.current = selector;
+    const isEqualRef = useRef(isEqual);
+    isEqualRef.current = isEqual;
+    const cacheRef = useRef(createSelectCache());
+    const subscribe = useCallback((onChange) => store.subscribe(() => onChange()), [store]);
+    const getSnapshot = useCallback(() => readSelectSnapshot(cacheRef.current, store.getState(), (state) => selectorRef.current(state), (previous, next) => isEqualRef.current(previous, next)), [store]);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 export function useEngineEvent(store, eventName, handler) {
     const handlerRef = useRef(handler);

package/dist/fogOverlay.d.ts

@@ -0,0 +1,21 @@
+import type { FogCells } from "@jgengine/core/world/fog";
+export interface FogCellRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface FogPaintSurface {
+    fillStyle: string | CanvasGradient | CanvasPattern;
+    fillRect(x: number, y: number, width: number, height: number): void;
+    clearRect(x: number, y: number, width: number, height: number): void;
+}
+export declare function forEachUnrevealedFogCell(fog: FogCells, visit: (col: number, row: number) => void): number;
+export declare function paintFogOverlay(surface: FogPaintSurface, canvasSize: {
+    width: number;
+    height: number;
+}, fog: FogCells, cellRect: (col: number, row: number) => FogCellRect | null, fill?: string): number;
+export declare function createFogDataUrl(fog: FogCells, canvasSize: {
+    width: number;
+    height: number;
+}, cellRect: (col: number, row: number) => FogCellRect | null, fill?: string): string | null;

package/dist/fogOverlay.js

@@ -0,0 +1,34 @@
+export function forEachUnrevealedFogCell(fog, visit) {
+    let count = 0;
+    for (let row = 0; row < fog.rows; row += 1) {
+        for (let col = 0; col < fog.cols; col += 1) {
+            if (fog.revealed[row * fog.cols + col])
+                continue;
+            visit(col, row);
+            count += 1;
+        }
+    }
+    return count;
+}
+export function paintFogOverlay(surface, canvasSize, fog, cellRect, fill = "rgba(11, 15, 20, 0.82)") {
+    surface.clearRect(0, 0, canvasSize.width, canvasSize.height);
+    surface.fillStyle = fill;
+    return forEachUnrevealedFogCell(fog, (col, row) => {
+        const rect = cellRect(col, row);
+        if (rect === null)
+            return;
+        surface.fillRect(rect.x, rect.y, rect.width, rect.height);
+    });
+}
+export function createFogDataUrl(fog, canvasSize, cellRect, fill = "rgba(11, 15, 20, 0.82)") {
+    if (typeof document === "undefined")
+        return null;
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.floor(canvasSize.width));
+    canvas.height = Math.max(1, Math.floor(canvasSize.height));
+    const context = canvas.getContext("2d");
+    if (context === null)
+        return null;
+    paintFogOverlay(context, { width: canvas.width, height: canvas.height }, fog, cellRect, fill);
+    return canvas.toDataURL();
+}

package/dist/hooks.d.ts

@@ -17,7 +17,8 @@ import type { RosterEntry } from "@jgengine/core/scene/roster";
 import type { WorldItemRecord } from "@jgengine/core/game/worldItem";
 import type { ClockSnapshot, SimClock } from "@jgengine/core/time/simClock";
 import { type PositionedPrompt } from "@jgengine/core/interaction/proximityPrompt";
-export declare function useGameStore<T>(selector: (ctx: GameContext) => T): T;
+import { type GamePhase } from "@jgengine/core/game/gamePhase";
+export declare function useGameStore<T>(selector: (ctx: GameContext) => T, isEqual?: (previous: T, next: T) => boolean): T;
 export declare function useGame(): {
     commands: GameContext["game"]["commands"];
     events: GameEvents;
@@ -26,6 +27,11 @@ export declare function usePlayer(): {
     userId: string;
     isNew: boolean;
 };
+/** Live run phase + a setter that also gates the shell's touch controls. `menu`/`paused`/`ended` hide the touch dock; `playing` shows it. */
+export declare function useGamePhase(): {
+    phase: GamePhase;
+    setPhase: (phase: GamePhase) => void;
+};
 export declare function useSceneEntities(): readonly SceneEntity[];
 export declare function useSceneObjects(): readonly SceneObject[];
 export declare function useWorldItems(): readonly WorldItemRecord[];
@@ -81,6 +87,8 @@ export declare function useGameClock(): ClockSnapshot & {
     controls: SimClock;
 };
 export declare function useActivePrompt<T extends PositionedPrompt>(prompts?: readonly T[]): T | null;
+export declare function abilityKitNeedsHeartbeat(kit: AbilityKit, resourceAvailable?: number): boolean;
+export declare function eventMeterNeedsHeartbeat(meter: EventMeter, previous: EventMeterView | null): boolean;
 export interface AbilitySlotBindingOptions {
     intervalMs?: number;
 }

package/dist/hooks.js

@@ -2,11 +2,18 @@ import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore
 import { AxisChannel } from "@jgengine/core/input/axisInput";
 import { browseSessions, } from "@jgengine/core/multiplayer/matchmaking";
 import { resolveActivePrompt, } from "@jgengine/core/interaction/proximityPrompt";
+import { gamePhase, setGamePhase } from "@jgengine/core/game/gamePhase";
 import { useGameContext } from "./provider.js";
-export function useGameStore(selector) {
+import { createSelectCache, readSelectSnapshot } from "./selectSnapshot.js";
+export function useGameStore(selector, isEqual = Object.is) {
     const ctx = useGameContext();
-    useSyncExternalStore(ctx.subscribe, ctx.version, ctx.version);
-    return selector(ctx);
+    const selectorRef = useRef(selector);
+    selectorRef.current = selector;
+    const isEqualRef = useRef(isEqual);
+    isEqualRef.current = isEqual;
+    const cacheRef = useRef(createSelectCache());
+    const getSnapshot = useCallback(() => readSelectSnapshot(cacheRef.current, ctx.version(), () => selectorRef.current(ctx), (previous, next) => isEqualRef.current(previous, next)), [ctx]);
+    return useSyncExternalStore(ctx.subscribe, getSnapshot, getSnapshot);
 }
 export function useGame() {
     const ctx = useGameContext();
@@ -16,6 +23,13 @@ export function usePlayer() {
     const ctx = useGameContext();
     return useMemo(() => ({ userId: ctx.player.userId, isNew: ctx.player.isNew }), [ctx]);
 }
+/** Live run phase + a setter that also gates the shell's touch controls. `menu`/`paused`/`ended` hide the touch dock; `playing` shows it. */
+export function useGamePhase() {
+    const ctx = useGameContext();
+    const phase = useGameStore((c) => gamePhase(c));
+    const setPhase = useCallback((next) => setGamePhase(ctx, next), [ctx]);
+    return { phase, setPhase };
+}
 export function useSceneEntities() {
     return useGameStore((ctx) => ctx.scene.entity.list());
 }
@@ -154,28 +168,66 @@ export function useActivePrompt(prompts) {
         return resolveActivePrompt({ x: player.position[0], z: player.position[2] }, prompts);
     });
 }
-function useEngineHeartbeat(intervalMs) {
-    const ctx = useGameContext();
-    useSyncExternalStore(ctx.subscribe, ctx.version, ctx.version);
+export function abilityKitNeedsHeartbeat(kit, resourceAvailable) {
+    for (const slot of kit.snapshot(resourceAvailable)) {
+        if (slot.cooldownRemainingMs > 0 || slot.justCast || slot.groupRemainingMs > 0)
+            return true;
+    }
+    return false;
+}
+export function eventMeterNeedsHeartbeat(meter, previous) {
+    const next = {
+        value: meter.value(),
+        fraction: meter.fraction(),
+        tier: meter.tier(),
+        ready: meter.ready(),
+    };
+    if (previous === null)
+        return true;
+    return (previous.value !== next.value ||
+        previous.fraction !== next.fraction ||
+        previous.tier !== next.tier ||
+        previous.ready !== next.ready);
+}
+function useEngineHeartbeat(intervalMs, shouldTick) {
     const [, setTick] = useState(0);
+    const shouldTickRef = useRef(shouldTick);
+    shouldTickRef.current = shouldTick;
     useEffect(() => {
         if (intervalMs <= 0 || typeof window === "undefined")
             return undefined;
-        const id = window.setInterval(() => setTick((current) => current + 1), intervalMs);
+        const id = window.setInterval(() => {
+            if (shouldTickRef.current())
+                setTick((current) => current + 1);
+        }, intervalMs);
         return () => window.clearInterval(id);
     }, [intervalMs]);
 }
 export function useAbilitySlots(kit, resourceAvailable, options) {
-    useEngineHeartbeat(options?.intervalMs ?? 80);
+    useEngineHeartbeat(options?.intervalMs ?? 80, () => abilityKitNeedsHeartbeat(kit, resourceAvailable));
     return kit.snapshot(resourceAvailable);
 }
 export function useAbilitySlot(kit, slotId, resourceAvailable, options) {
-    useEngineHeartbeat(options?.intervalMs ?? 80);
+    useEngineHeartbeat(options?.intervalMs ?? 80, () => abilityKitNeedsHeartbeat(kit, resourceAvailable));
     return kit.state(slotId, resourceAvailable);
 }
 export function useEventMeter(meter, options) {
-    useEngineHeartbeat(options?.intervalMs ?? 80);
-    return { value: meter.value(), fraction: meter.fraction(), tier: meter.tier(), ready: meter.ready() };
+    const previous = useRef(null);
+    useEngineHeartbeat(options?.intervalMs ?? 80, () => {
+        const changed = eventMeterNeedsHeartbeat(meter, previous.current);
+        if (changed) {
+            previous.current = {
+                value: meter.value(),
+                fraction: meter.fraction(),
+                tier: meter.tier(),
+                ready: meter.ready(),
+            };
+        }
+        return changed;
+    });
+    const view = { value: meter.value(), fraction: meter.fraction(), tier: meter.tier(), ready: meter.ready() };
+    previous.current = view;
+    return view;
 }
 export function createHeldKeyTracker(target) {
     const held = new Set();