@jgengine/react 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -11,6 +11,42 @@ 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.
 
+## 0.10.0
+
+### Migrate
+
+- **Nothing to change for existing games** — the shared mobile-composition system (viewport allocation, region collision, `--jg-*` viewport vars) is wired automatically by the shell for every game; `HudPanel`s inside a `HudCanvas` register themselves. Legacy `orientation: "landscape" | "portrait"` keeps its advisory dismissible-hint behavior unchanged.
+- **Opt a driving/landscape game into the strict gate**: replace the advisory `orientation` with the contract form — `orientation: { mobile: "landscape-required" }` (rules: `any` · `portrait`/`landscape` advisory · `portrait-required`/`landscape-required` · `unsupported`). In portrait the engine now shows a polished `RotateDeviceScreen`, suppresses input, freezes the sim, and unmounts the HUD/controls until the device is landscape.
+- **Declare HUD intent** where useful: `HudPanel` gains `priority` (`critical`/`secondary`/`tertiary`), `mobileBehavior` (`hidden` unmounts on phones, `transient` softens collision, …), `allowOverlapWith`, and `collisionGroup`. Optional — omitting them keeps prior behavior.
+- **Mobile validation now also fails on overlap**: `bun run shoot <game> --device mobile|mobile-landscape|both` exits non-zero on forbidden inter-element collisions (not just viewport overflow), naming both regions.
+
+### Added
+
+- Shared mobile layout composition — `@jgengine/core/ui/gameLayout` (pure geometry: `resolveLayoutMode`, `intersects`, `overlapArea`, `detectLayoutCollisions`, `computeGameplayRect`, `LayoutRegion`, `GameViewportLayout`) and `@jgengine/core/ui/orientation` (`resolveOrientationRequirement`, `orientationGateActive`, `MobileOrientationRule`). `@jgengine/react` adds `GameViewportProvider` (mounted by the shell), hooks (`useGameViewportLayout`, `useGameLayoutMode`, `useGameOrientation`, `useReservedControlZones`, `useLayoutCollisions`, `useRegisterLayoutRegion`), and a headless `RotateDeviceScreen`. The provider tracks `window.visualViewport`, publishes `--jg-viewport-*` / `--jg-visual-viewport-*` / `--jg-safe-*` CSS vars, resolves the explicit layout mode, and detects forbidden region overlaps (dev `data-jg-layout-collision` + console diagnostic).
+- Mandatory orientation contract — `PlayableGame.orientation` accepts `{ mobile: <rule> }`; `landscape-required`/`portrait-required` render an engine-owned rotate gate that blocks gameplay (input suppressed, simulation frozen, HUD/controls unmounted), self-correcting when the device is turned. Reduced-motion and safe-area respected; `visualViewport`-sized for mobile Safari/PWA.
+- Reserved touch-control zones — the touch dock registers its joystick / action-cluster / utility rectangles (runtime-measured) as `control` regions, so HUD placement and collision validation know exactly where controls sit.
+- HUD placement metadata — `HudPanel` gains `priority`, `mobileBehavior`, `allowOverlapWith`, `collisionGroup`, and registers as a collision-tracked layout region.
+- Mobile-landscape shoot device — `bun run shoot --device mobile-landscape` (844×390) plus collision-gate reads that fail mobile validation on forbidden overlaps.
+- Canyon Chase migrated as the reference landscape-required game — declares `orientation: { mobile: "landscape-required" }`, composes its HUD through coordinated `HudPanel` regions (pursuit distance critical, border secondary, survey map hidden on mobile, radio transient) instead of independent fixed corners.
+
+### Changed
+
+- First-person projectile tracers now originate from the weapon muzzle instead of the camera/eye centerline. Hit detection is unchanged (still crosshair-accurate) — only the drawn tracer's start point moved to the viewmodel muzzle, which tracks full aim yaw and pitch. Non-viewmodel games and enemy tracers are unaffected.
+
+## 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/chat.d.ts

@@ -23,7 +23,7 @@ export declare function ChatInput({ channelId, className, inputClassName, button
     sendLabel?: ReactNode;
     onSent?: (message: ChatMessage) => void;
     onRejected?: (reason: string) => void;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 export declare function ChannelTabs({ channels, active, onSelect, className, tabClassName, activeTabClassName, renderTab, }: {
     channels?: readonly string[];
     active: string;
@@ -32,7 +32,7 @@ export declare function ChannelTabs({ channels, active, onSelect, className, tab
     tabClassName?: string;
     activeTabClassName?: string;
     renderTab?: (channelId: string, isActive: boolean) => ReactNode;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 export declare function ChatPanel({ channels, initialChannel, limit, className, tabsClassName, tabClassName, activeTabClassName, logClassName, messageClassName, inputClassName, inputFieldClassName, sendButtonClassName, placeholder, renderMessage, onRejected, }: {
     channels?: readonly string[];
     initialChannel?: string;
@@ -49,4 +49,4 @@ export declare function ChatPanel({ channels, initialChannel, limit, className,
     placeholder?: string;
     renderMessage?: (message: ChatMessage) => ReactNode;
     onRejected?: (reason: string) => void;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/chat.js

@@ -37,21 +37,27 @@ export function ChatLog({ channelId, limit, className, messageClassName, renderM
 export function ChatInput({ channelId, className, inputClassName, buttonClassName, placeholder, sendLabel, onSent, onRejected, }) {
     const ctx = useGameContext();
     const [value, setValue] = useState("");
-    function submit(event) {
+    const chat = ctx.game.chat;
+    if (chat === undefined)
+        return null;
+    const submit = (event) => {
         event.preventDefault();
-        const result = ctx.game.chat.send(ctx.player.userId, channelId, value);
+        const result = chat.send(ctx.player.userId, channelId, value);
         if ("reason" in result) {
             onRejected?.(result.reason);
             return;
         }
         setValue("");
         onSent?.(result.message);
-    }
+    };
     return (_jsxs("form", { className: className, "data-chat-input": channelId, onSubmit: submit, children: [_jsx("input", { className: inputClassName, type: "text", value: value, placeholder: placeholder, onChange: (event) => setValue(event.target.value) }), _jsx("button", { type: "submit", className: buttonClassName, "data-chat-send": true, children: sendLabel ?? "Send" })] }));
 }
 export function ChannelTabs({ channels, active, onSelect, className, tabClassName, activeTabClassName, renderTab, }) {
     const ctx = useGameContext();
-    const ids = channels ?? ctx.game.chat.channels().map((def) => def.id);
+    const chat = ctx.game.chat;
+    if (chat === undefined)
+        return null;
+    const ids = channels ?? chat.channels().map((def) => def.id);
     return (_jsx("div", { className: className, role: "tablist", "data-chat-tabs": true, children: ids.map((channelId) => {
             const isActive = channelId === active;
             const classes = [tabClassName, isActive ? activeTabClassName : undefined]
@@ -62,7 +68,10 @@ export function ChannelTabs({ channels, active, onSelect, className, tabClassNam
 }
 export function ChatPanel({ channels, initialChannel, limit, className, tabsClassName, tabClassName, activeTabClassName, logClassName, messageClassName, inputClassName, inputFieldClassName, sendButtonClassName, placeholder, renderMessage, onRejected, }) {
     const ctx = useGameContext();
-    const ids = channels ?? ctx.game.chat.channels().map((def) => def.id);
+    const chat = ctx.game.chat;
+    const ids = channels ?? chat?.channels().map((def) => def.id) ?? [];
     const [active, setActive] = useState(initialChannel ?? ids[0] ?? "global");
+    if (chat === undefined)
+        return null;
     return (_jsxs("section", { className: className, "data-chat-panel": true, children: [_jsx(ChannelTabs, { channels: ids, active: active, onSelect: setActive, className: tabsClassName, tabClassName: tabClassName, activeTabClassName: activeTabClassName }), _jsx(ChatLog, { channelId: active, limit: limit, className: logClassName, messageClassName: messageClassName, renderMessage: renderMessage }), _jsx(ChatInput, { channelId: active, className: inputClassName, inputClassName: inputFieldClassName, buttonClassName: sendButtonClassName, placeholder: placeholder, onRejected: onRejected })] }));
 }

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,46 @@
+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;
+const EMPTY_CHAT_MESSAGES = [];
+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 }) ?? EMPTY_CHAT_MESSAGES);
+    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
@@ -28,7 +30,7 @@ export function CurrencyPill({ currencyId, className }) {
 export function ProximityPrompt({ prompt, className, }) {
     const display = prompt.display;
     if (display.kind === "keybind") {
-        return (_jsx("span", { className: className, "data-prompt": "keybind", "data-action": display.actionId, children: _jsx("kbd", { children: display.actionId }) }));
+        return (_jsxs("span", { className: className, "data-prompt": "keybind", "data-action": display.actionId, children: [_jsx("kbd", { children: display.actionId }), display.label !== undefined ? _jsx("span", { "data-prompt-label": true, children: display.label }) : null] }));
     }
     if (display.kind === "gauge") {
         return (_jsx("span", { className: className, "data-prompt": "gauge", "data-gauge": display.gaugeId, children: display.gaugeId }));
@@ -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();
+}