@jgengine/shell 0.8.0 → 0.9.0

package/dist/GamePlayerShell.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Canvas, useFrame, useLoader } from "@react-three/fiber";
-import { Component, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { Component, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import * as THREE from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { actionRepeatMs, createActionStateTracker, hotbarSlotActionIndex, resolveActionCommand, shouldDispatchAction, toActionStateBindingMap, } from "@jgengine/core/input/actionBindings";
@@ -8,35 +8,55 @@ import { deriveTouchScheme, withTouchCodes } from "@jgengine/core/input/touchSch
 import { buildContextMenu, contextVerbInput, } from "@jgengine/core/interaction/contextMenu";
 import { resolveActivePrompt } from "@jgengine/core/interaction/proximityPrompt";
 import { aimToPoint } from "@jgengine/core/input/pointer";
+import { normalizePointerToAxis } from "@jgengine/core/input/pointerAxis";
 import { createSelectionSet, isMarquee, screenRect, selectWithinRect, } from "@jgengine/core/scene/selection";
 import { advancePlayerMotion, constrainStepToAxis, createEmptyMovementKeys, createPlayerMotionState, resolveMovementIntent, resolveObstacleStep, snapPositionToGrid, } from "@jgengine/core/movement/movementModel";
+import { steerYaw } from "@jgengine/core/movement/steering";
 import { advanceVoxelPlayer, createVoxelPlayerBody, } from "@jgengine/core/movement/voxelController";
 import { createGameContext } from "@jgengine/core/runtime/gameContext";
+import { applyHorizontalImpulses } from "@jgengine/core/runtime/motionIntents";
 import { groundFieldFor } from "@jgengine/core/world/terrain";
 import { objectVisualScale } from "@jgengine/core/scene/objectStore";
 import { DEFAULT_PICKUP_RADIUS, WORLD_ITEM_ENTITY_NAME } from "@jgengine/core/game/worldItem";
 import { useGameContext } from "@jgengine/react/provider";
 import { useDisplayProfile } from "@jgengine/react/display";
+import { HudViewportProvider } from "@jgengine/react/hudViewport";
 import { useSceneEntities, useSceneObjects, usePlayer, useTarget } from "@jgengine/react/hooks";
 import { GameProvider } from "@jgengine/react/provider";
 import { CAMERA_FRUSTUM_DEFAULTS } from "@jgengine/core/game/playableGame";
+import { createSettingsStore } from "@jgengine/core/settings/settingsModel";
+import { applyBindingOverrides, clearBindingOverride, loadBindingOverrides, saveBindingOverride, } from "@jgengine/core/input/bindingOverrides";
+import { playControlsActive } from "@jgengine/core/game/controlGate";
 import { sky as resolveSkyDescriptor } from "@jgengine/core/world/features";
 import { devtools } from "@jgengine/core/devtools/devtools";
+import { VERSION } from "@jgengine/core/meta/changelog";
 import { AudioListener, EntityAudioEmitters, ObjectAudioEmitters } from "./audio/AudioComponents.js";
 import { createAudioEngine } from "./audio/audioEngine.js";
+import { CollisionDebugWorld } from "./devtools/CollisionDebugWorld.js";
+import { collisionDebug } from "./devtools/collisionDebug.js";
 import { DevtoolsOverlay, DevtoolsRendererProbe, withDevtoolsLatency } from "./devtools/DevtoolsOverlay.js";
-import { GAME_SIM_FRAME_PRIORITY, GameCameraRig, resolveRigKind, rtsPanKeysConflict } from "./camera/index.js";
+import { GAME_SIM_FRAME_PRIORITY, GameCameraRig, PlayerFovProvider, PlayerFovSlider, resolveRigKind, rtsPanKeysConflict, } from "./camera/index.js";
+import { resolveModel, tryResolveCatalogModel } from "./render/resolveModel.js";
+import { CullingProvider, useRenderVisibility } from "./visibility/CullingProvider.js";
 import { SkyDaylight, TimeOfDayDaylight } from "./environment.js";
+import { resolveSkyLightOwnership, skyEmitsLights } from "./environment/skyLightingPolicy.js";
 import { EnvironmentScene } from "./environment/EnvironmentScene.js";
 import { applyMaterialOverride } from "./materialOverride.js";
 import { PointerProbe } from "./pointer/PointerProbe.js";
-import { applyPaintTexture, cloneModelScene, createPaintCanvas, standardMaterialsOf, syncPaintCanvas, } from "./render/modelRender.js";
+import { applyPaintTextureToMaterials, cacheStandardMaterials, cloneModelScene, createPaintCanvas, disposeClonedMaterials, syncPaintCanvas, } from "./render/modelRender.js";
+import { writeEntityPose } from "./world/entityPose.js";
 import { MarqueeBox, ContextMenuView } from "./pointer/PointerOverlays.js";
 import { createPointerService, POINTER_ENTITY_KEY, POINTER_OBJECT_KEY, } from "./pointer/pointerService.js";
 import { CombatCameraShake, ProjectileTracers, Reticle, WorldEntityBars, WorldFloatText, WorldTelegraphs, } from "./world/WorldHud.js";
 import { GridWorldScene } from "./world/GridWorldScene.js";
 import { WorldItems } from "./world/WorldItems.js";
-import { TouchControlsDock, TouchPlaySurface } from "./touch/TouchControlsOverlay.js";
+import { OrientationHint } from "./touch/OrientationHint.js";
+import { TouchControlsDock, TouchPlaySurface, touchDockClearance } from "./touch/TouchControlsOverlay.js";
+import { BUILT_IN_SETTING_CATEGORIES } from "@jgengine/core/settings/settingsModel";
+import { SettingsProvider } from "@jgengine/react/settings";
+import { SettingsRuntime } from "./settings/SettingsRuntime.js";
+import { SettingsChrome } from "./settings/SettingsChrome.js";
+import { AudioSettingsBridge, useGraphicsSettings } from "./settings/appliedSettings.js";
 const DEV_USER_ID = "dev-player";
 const TURN_SPEED = 2.4;
 const PRIMARY_CLICK_MOVE_THRESHOLD_PX = 6;
@@ -44,14 +64,15 @@ const GROUND_SIZE = 160;
 const GROUND_SEGMENTS = 80;
 const DEFAULT_BACKGROUND_COLOR = "#14161b";
 const DEFAULT_BACKDROP_FOG_COLOR = "#1a1c22";
-function errorToDiagnostic(error, phase) {
+function errorToDiagnostic(error, phase, componentStack) {
+    const capturedAt = new Date().toISOString();
     if (error instanceof Error) {
-        return { phase, message: error.message, stack: error.stack };
+        return { phase, message: error.message, stack: error.stack, componentStack, capturedAt };
     }
-    return { phase, message: typeof error === "string" ? error : JSON.stringify(error) };
+    return { phase, message: typeof error === "string" ? error : JSON.stringify(error), componentStack, capturedAt };
 }
-function logRuntimeError(error, phase) {
-    const diagnostic = errorToDiagnostic(error, phase);
+function logRuntimeError(error, phase, componentStack) {
+    const diagnostic = errorToDiagnostic(error, phase, componentStack);
     console.error(`[jgengine:${phase}] ${diagnostic.message}`, error);
     return diagnostic;
 }
@@ -173,18 +194,20 @@ export function resolveWorldSky(world) {
  * flipped the sign and launched airborne players upward instead.
  */
 export function resolvePhysicsTuning(physics) {
-    if (physics?.gravity === undefined && physics?.jumpVelocity === undefined)
+    if (physics === undefined)
         return undefined;
-    const tuning = {};
-    if (physics.gravity !== undefined)
-        tuning.gravityAcceleration = -physics.gravity;
-    if (physics.jumpVelocity !== undefined)
-        tuning.jumpVelocity = physics.jumpVelocity;
-    return tuning;
+    return {
+        get gravityAcceleration() {
+            return physics.gravity === undefined ? undefined : -physics.gravity;
+        },
+        get jumpVelocity() {
+            return physics.jumpVelocity;
+        },
+    };
 }
 /** True when the world is an environment feature with terrain, so the voxel controller should sample its height. */
 export function hasEnvironmentTerrain(world) {
-    return world?.kind === "environment" && world.terrain !== undefined;
+    return world?.kind === "environment" && (world.terrain !== undefined || (world.islands?.length ?? 0) > 0);
 }
 function colorFromId(id) {
     let hash = 0;
@@ -227,9 +250,12 @@ function EntityModel({ model, instanceId }) {
     const scene = useMemo(() => {
         const cloned = cloneModelScene(gltf.scene);
         if (material !== undefined)
-            applyMaterialOverride(cloned, material);
+            applyMaterialOverride(cloned, material, { clone: false });
         return cloned;
     }, [gltf, material]);
+    useEffect(() => () => {
+        disposeClonedMaterials(scene);
+    }, [scene]);
     const animation = model.animation;
     const mixerRef = useRef(null);
     const animationPausedRef = useRef(false);
@@ -261,10 +287,12 @@ function EntityModel({ model, instanceId }) {
     const paintCanvasRef = useRef(null);
     const paintDrawnCountRef = useRef(0);
     const paintVersionRef = useRef(-1);
+    const materialCacheRef = useRef(null);
     useEffect(() => {
         paintCanvasRef.current = null;
         paintDrawnCountRef.current = 0;
         paintVersionRef.current = -1;
+        materialCacheRef.current = null;
     }, [scene]);
     useFrame((_state, delta) => {
         if (mixerRef.current !== null && !animationPausedRef.current)
@@ -277,45 +305,68 @@ function EntityModel({ model, instanceId }) {
             return;
         paintVersionRef.current = version;
         const strokes = paint.strokes(instanceId);
+        const cache = cacheStandardMaterials(scene, materialCacheRef.current);
+        materialCacheRef.current = cache;
         if (paintCanvasRef.current === null) {
             if (strokes.length === 0)
                 return;
-            const materials = standardMaterialsOf(scene);
-            const seed = materials[0];
+            const seed = cache.materials[0];
             if (seed === undefined)
                 return;
             const paintCanvas = createPaintCanvas(seed);
             paintCanvasRef.current = paintCanvas;
-            applyPaintTexture(scene, paintCanvas);
+            applyPaintTextureToMaterials(cache.materials, paintCanvas);
         }
-        const seedColor = standardMaterialsOf(scene)[0]?.color ?? new THREE.Color("#ffffff");
-        paintDrawnCountRef.current = syncPaintCanvas(paintCanvasRef.current, seedColor, strokes, paintDrawnCountRef.current);
+        paintDrawnCountRef.current = syncPaintCanvas(paintCanvasRef.current, cache.seedColor, strokes, paintDrawnCountRef.current);
     });
     return _jsx("primitive", { object: scene, position: position, scale: [scale, scale, scale] });
 }
-function resolveModel(value, assets) {
-    if (value === undefined)
-        return undefined;
-    if (typeof value !== "string")
-        return value;
-    const ref = assets.resolve(value);
-    if (ref === null)
-        return undefined;
-    return ref.dims === undefined ? { url: ref.url } : { url: ref.url, dims: ref.dims };
-}
 function EntityMarker({ entity, custom, model, sprite, isLocal, targeted, selected, onSelect, }) {
-    const color = isLocal ? "#4ade80" : entity.role === "npc" ? colorFromId(entity.name) : "#9ca3af";
-    return (_jsxs("group", { position: [entity.position[0], entity.position[1], entity.position[2]], "rotation-y": entity.rotationY, userData: { [POINTER_ENTITY_KEY]: entity.id }, onPointerDown: (event) => {
+    const groupRef = useRef(null);
+    const ctx = useGameContext();
+    const visibleRef = useRenderVisibility();
+    const entityId = entity.id;
+    const role = entity.role;
+    const name = entity.name;
+    const color = isLocal ? "#4ade80" : role === "npc" ? colorFromId(name) : "#9ca3af";
+    useFrame(() => {
+        const group = groupRef.current;
+        if (group === null)
+            return;
+        const live = ctx.scene.entity.get(entityId);
+        if (live === null)
+            return;
+        writeEntityPose(group, live);
+        group.visible = visibleRef.current(entityId);
+    });
+    return (_jsxs("group", { ref: groupRef, userData: { [POINTER_ENTITY_KEY]: entityId }, onPointerDown: (event) => {
             event.stopPropagation();
-            if (!isLocal)
-                onSelect(entity);
-        }, children: [selected ? (_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.02, children: [_jsx("ringGeometry", { args: [0.8, 0.95, 32] }), _jsx("meshBasicMaterial", { color: "#34d399", transparent: true, opacity: 0.9 })] })) : null, custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(EntityModel, { model: model, instanceId: entity.id })) : sprite !== undefined ? (_jsx(EntitySprite, { sprite: sprite })) : entity.role === "prop" ? (_jsxs("mesh", { "position-y": 0.5, children: [_jsx("sphereGeometry", { args: [0.45, 16, 16] }), _jsx("meshStandardMaterial", { color: color })] })) : (_jsxs(_Fragment, { children: [_jsxs("mesh", { "position-y": 0.95, children: [_jsx("capsuleGeometry", { args: [0.35, 1.1, 6, 14] }), _jsx("meshStandardMaterial", { color: color })] }), _jsxs("mesh", { position: [0, 1.35, 0.32], children: [_jsx("boxGeometry", { args: [0.16, 0.16, 0.16] }), _jsx("meshStandardMaterial", { color: "#f8fafc" })] })] })), targeted ? (_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.03, children: [_jsx("ringGeometry", { args: [0.6, 0.75, 28] }), _jsx("meshBasicMaterial", { color: "#f87171" })] })) : null] }));
+            if (isLocal)
+                return;
+            const live = ctx.scene.entity.get(entityId);
+            if (live !== null)
+                onSelect(live);
+        }, children: [selected ? (_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.02, children: [_jsx("ringGeometry", { args: [0.8, 0.95, 32] }), _jsx("meshBasicMaterial", { color: "#34d399", transparent: true, opacity: 0.9 })] })) : null, custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(EntityModel, { model: model, instanceId: entityId })) : sprite !== undefined ? (_jsx(EntitySprite, { sprite: sprite })) : role === "prop" ? (_jsxs("mesh", { "position-y": 0.5, children: [_jsx("sphereGeometry", { args: [0.45, 16, 16] }), _jsx("meshStandardMaterial", { color: color })] })) : (_jsxs(_Fragment, { children: [_jsxs("mesh", { "position-y": 0.95, children: [_jsx("capsuleGeometry", { args: [0.35, 1.1, 6, 14] }), _jsx("meshStandardMaterial", { color: color })] }), _jsxs("mesh", { position: [0, 1.35, 0.32], children: [_jsx("boxGeometry", { args: [0.16, 0.16, 0.16] }), _jsx("meshStandardMaterial", { color: "#f8fafc" })] })] })), targeted ? (_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.03, children: [_jsx("ringGeometry", { args: [0.6, 0.75, 28] }), _jsx("meshBasicMaterial", { color: "#f87171" })] })) : null] }));
 }
 function ObjectMarker({ object, custom, model, style, }) {
+    const groupRef = useRef(null);
+    const ctx = useGameContext();
+    const visibleRef = useRenderVisibility();
+    const instanceId = object.instanceId;
     const [scaleX, scaleY, scaleZ] = objectVisualScale(object.visual);
     const color = object.visual?.color ?? style?.color ?? colorFromId(object.catalogId);
     const opacity = object.visual?.opacity ?? style?.opacity ?? 1;
-    return (_jsx("group", { position: [object.position[0], object.position[1], object.position[2]], "rotation-y": object.rotationY, userData: { [POINTER_OBJECT_KEY]: object.instanceId }, children: custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(EntityModel, { model: model, instanceId: object.instanceId })) : style?.hidden === true ? null : (_jsxs("mesh", { "position-y": 0.5 * scaleY, scale: [scaleX, scaleY, scaleZ], children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: color, transparent: opacity < 1, opacity: opacity })] })) }));
+    useFrame(() => {
+        const group = groupRef.current;
+        if (group === null)
+            return;
+        const live = ctx.scene.object.get(instanceId);
+        if (live === null)
+            return;
+        writeEntityPose(group, live);
+        group.visible = visibleRef.current(instanceId);
+    });
+    return (_jsx("group", { ref: groupRef, userData: { [POINTER_OBJECT_KEY]: instanceId }, children: custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(EntityModel, { model: model, instanceId: instanceId })) : style?.hidden === true ? null : (_jsxs("mesh", { "position-y": 0.5 * scaleY, scale: [scaleX, scaleY, scaleZ], children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: color, transparent: opacity < 1, opacity: opacity })] })) }));
 }
 function GroundPlane() {
     const geometry = useMemo(() => {
@@ -348,7 +399,12 @@ function RockField() {
     }), []);
     return (_jsx(_Fragment, { children: rocks.map((rock) => (_jsxs("mesh", { position: [rock.x, 0.25 * rock.scale, rock.z], rotation: [0.1, rock.rotation, -0.08], scale: [rock.scale * 1.4, rock.scale * 0.7, rock.scale], children: [_jsx("dodecahedronGeometry", { args: [0.8, 0] }), _jsx("meshStandardMaterial", { color: "#6b6f63", roughness: 1 })] }, rock.id))) }));
 }
-function WorldView({ entitySprites, entityModels, objectModels, objectStyles, environment: Environment, assets, renderEntity, renderObject, selectedIds, }) {
+function WorldEnvironment({ environment: Environment }) {
+    if (Environment !== undefined)
+        return _jsx(Environment, {});
+    return (_jsxs(_Fragment, { children: [_jsx(GroundPlane, {}), _jsx("gridHelper", { args: [160, 80, "#3a3f4a", "#2b2f38"], "position-y": 0.01 }), _jsx(RockField, {})] }));
+}
+function WorldActors({ entitySprites, entityModels, objectModels, objectStyles, assets, renderEntity, renderObject, selectedIds, }) {
     const ctx = useGameContext();
     const entities = useSceneEntities();
     const objects = useSceneObjects();
@@ -359,18 +415,28 @@ function WorldView({ entitySprites, entityModels, objectModels, objectStyles, en
         const relation = ctx.scene.entity.canReceive(entity.id, "damage") === null ? "hostile" : "friendly";
         ctx.scene.entity.setTarget(controlledId, relation === "hostile" || entity.role === "npc" ? entity.id : null);
     };
-    return (_jsxs(_Fragment, { children: [Environment !== undefined ? (_jsx(Environment, {})) : (_jsxs(_Fragment, { children: [_jsx(GroundPlane, {}), _jsx("gridHelper", { args: [160, 80, "#3a3f4a", "#2b2f38"], "position-y": 0.01 }), _jsx(RockField, {})] })), entities
+    return (_jsxs(_Fragment, { children: [entities
                 .filter((entity) => entity.name !== WORLD_ITEM_ENTITY_NAME)
-                .map((entity) => (_jsx(EntityMarker, { entity: entity, custom: renderEntity?.(entity), model: resolveModel(entityModels?.[entity.name], assets), sprite: entitySprites?.[entity.name], isLocal: entity.id === controlledId, targeted: entity.id === targetId, selected: selectedIds.has(entity.id), onSelect: handleSelect }, entity.id))), objects.map((object) => {
-                const model = resolveModel(objectModels?.[object.catalogId], assets) ??
-                    resolveModel(object.catalogId, assets);
+                .map((entity) => (_jsx(EntityMarker, { entity: entity, custom: renderEntity?.(entity), model: resolveModel(entityModels?.[entity.name], assets, {
+                    seam: "entityModels",
+                    key: entity.name,
+                }), sprite: entitySprites?.[entity.name], isLocal: entity.id === controlledId, targeted: entity.id === targetId, selected: selectedIds.has(entity.id), onSelect: handleSelect }, entity.id))), objects.map((object) => {
+                const model = resolveModel(objectModels?.[object.catalogId], assets, {
+                    seam: "objectModels",
+                    key: object.catalogId,
+                }) ?? tryResolveCatalogModel(object.catalogId, assets);
                 return (_jsx(ObjectMarker, { object: object, custom: renderObject?.(object), model: model, style: objectStyles?.[object.catalogId] }, object.instanceId));
             })] }));
 }
+function WorldView({ entitySprites, entityModels, objectModels, objectStyles, environment, assets, renderEntity, renderObject, selectedIds, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(WorldEnvironment, { environment: environment }), _jsx(WorldActors, { entitySprites: entitySprites, entityModels: entityModels, objectModels: objectModels, objectStyles: objectStyles, assets: assets, renderEntity: renderEntity, renderObject: renderObject, selectedIds: selectedIds })] }));
+}
 function RemotePlayers({ rows }) {
     return (_jsx(_Fragment, { children: rows.map((row) => (_jsxs("group", { position: [row.position.x, row.position.y, row.position.z], "rotation-y": row.rotationY, children: [_jsxs("mesh", { "position-y": 0.95, children: [_jsx("capsuleGeometry", { args: [0.35, 1.1, 6, 14] }), _jsx("meshStandardMaterial", { color: colorFromId(row.userId) })] }), _jsxs("mesh", { position: [0, 1.35, 0.32], children: [_jsx("boxGeometry", { args: [0.16, 0.16, 0.16] }), _jsx("meshStandardMaterial", { color: "#f8fafc" })] })] }, row.userId))) }));
 }
-function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef, onRuntimeError, multiplayer, serverIdRef, pointerService, pointerAim, pingCommand, }) {
+function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef, pointerAxisRef, onRuntimeError, multiplayer, serverIdRef, pointerService, pointerAim, pingCommand, poster, onPosterSettled, }) {
+    const posterElapsedRef = useRef(0);
+    const posterDoneRef = useRef(false);
     const motionRef = useRef(createPlayerMotionState());
     const voxelBodyRef = useRef(null);
     const solidCacheRef = useRef({ count: -1, set: new Set() });
@@ -381,9 +447,15 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
     const collision = playable.collision;
     const movement = playable.movement;
     const voxelDims = useMemo(() => ({
-        halfWidth: collision?.halfWidth ?? 0.3,
-        height: collision?.height ?? 1.8,
-        stepHeight: collision?.stepHeight ?? 0.6,
+        get halfWidth() {
+            return collision?.halfWidth ?? 0.3;
+        },
+        get height() {
+            return collision?.height ?? 1.8;
+        },
+        get stepHeight() {
+            return collision?.stepHeight ?? 0.6;
+        },
     }), [collision]);
     const movementTuning = useMemo(() => resolvePhysicsTuning(playable.game.physics), [playable]);
     const autoPickupRadius = useMemo(() => {
@@ -398,26 +470,39 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
     const inputActions = useMemo(() => Object.keys(playable.game.input ?? {}), [playable]);
     const hasTerrain = useMemo(() => hasEnvironmentTerrain(playable.game.world), [playable]);
     useFrame((_state, rawDt) => {
+        if (poster) {
+            if (posterDoneRef.current)
+                return;
+            posterElapsedRef.current += Math.min(rawDt, 0.05);
+            if (posterElapsedRef.current >= POSTER_SETTLE_SECONDS) {
+                posterDoneRef.current = true;
+                onPosterSettled();
+                return;
+            }
+        }
         const simStart = performance.now();
         try {
+            let endPhase = devtools.profile.begin("time+input");
             const dt = Math.min(rawDt, 0.05);
             const gameDt = ctx.time.advance(dt);
             ctx.input.publish(heldActionsFor(tracker, inputActions));
-            if (tracker.isDown("turnLeft"))
-                yawRef.current += TURN_SPEED * dt;
-            if (tracker.isDown("turnRight"))
-                yawRef.current -= TURN_SPEED * dt;
+            ctx.input.publishPointer(pointerAxisRef.current);
+            const turnInput = (tracker.isDown("turnRight") ? 1 : 0) - (tracker.isDown("turnLeft") ? 1 : 0);
+            if (turnInput !== 0)
+                yawRef.current = steerYaw(yawRef.current, turnInput, TURN_SPEED, dt);
+            endPhase();
             const playerId = ctx.player.possession.active(ctx.player.userId);
             const player = ctx.scene.entity.get(playerId);
             const forwardX = Math.sin(yawRef.current);
             const forwardZ = Math.cos(yawRef.current);
             if (player !== null && drivesPose) {
+                endPhase = devtools.profile.begin("pose");
                 const keys = createEmptyMovementKeys();
                 keys.w = tracker.isDown("moveForward");
                 keys.s = tracker.isDown("moveBack");
                 keys.a = tracker.isDown("moveLeft");
                 keys.d = tracker.isDown("moveRight");
-                keys.shift = tracker.isDown("sprint");
+                keys.shift = tracker.isDown("sprint") && (movement?.canSprint?.(ctx) ?? true);
                 keys.space = tracker.isDown("jump");
                 const intent = resolveMovementIntent(keys, true);
                 const motionBatch = ctx.player.motion.takePending();
@@ -436,6 +521,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                     const solids = cache.set;
                     const isSolid = (x, y, z) => solids.has(`${x},${y},${z}`);
                     body.velocityY = applyMotionImpulses(body.velocityY, motionBatch);
+                    [body.velocityX, body.velocityZ] = applyHorizontalImpulses(body.velocityX, body.velocityZ, motionBatch);
                     advanceVoxelPlayer(body, intent, forwardX, forwardZ, player.movement.walkSpeed ?? 2, rawDt, isSolid, voxelDims, movementTuning, hasTerrain ? (x, z) => ground.sampleHeight(x, z) : undefined);
                     if (motionBatch !== null && motionBatch.y !== null)
                         body.y = motionBatch.y;
@@ -450,6 +536,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 else {
                     const motion = motionRef.current;
                     motion.verticalVelocity = applyMotionImpulses(motion.verticalVelocity, motionBatch);
+                    [motion.horizontalVelocityX, motion.horizontalVelocityZ] = applyHorizontalImpulses(motion.horizontalVelocityX, motion.horizontalVelocityZ, motionBatch);
                     const step = advancePlayerMotion(motion, intent, forwardX, forwardZ, player.movement.walkSpeed ?? 2, rawDt, movementTuning);
                     let stepX = step.stepX;
                     let stepZ = step.stepZ;
@@ -482,6 +569,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                             current: player.position,
                             next: [nextX, nextY, nextZ],
                             dt: rawDt,
+                            ctx,
                         };
                         const replacement = movement.beforeCommit(frame);
                         if (replacement !== undefined) {
@@ -498,16 +586,22 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                         dt: rawDt,
                     });
                 }
+                endPhase();
             }
             if (autoPickupRadius !== null) {
+                endPhase = devtools.profile.begin("pickup");
                 const self = ctx.scene.entity.get(playerId);
                 if (self !== null) {
                     const nearest = ctx.scene.worldItem.nearestInRadius(self.position, autoPickupRadius);
                     if (nearest !== null)
                         ctx.scene.worldItem.pickup(nearest, ctx.player.userId);
                 }
+                endPhase();
             }
-            playable.loop.onTick(ctx, gameDt);
+            devtools.profile.measure("onTick", () => {
+                playable.loop.onTick(ctx, gameDt);
+            });
+            endPhase = devtools.profile.begin("actions");
             if (tracker.wasPressed("tabTarget")) {
                 if (ctx.game.commands.has("target.cycle"))
                     ctx.game.commands.run("target.cycle", {});
@@ -533,6 +627,18 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
             }
             const aimOverride = pointerAim ? pointerAimFor(ctx, pointerService) : undefined;
             const commandAim = aimOverride ?? { yaw: yawRef.current, pitch: pitchRef.current };
+            if (collisionDebug.getState().layers.aimLaser) {
+                const aimFrom = ctx.player.possession.active(playerId) ?? playerId;
+                collisionDebug.setAimProbe({
+                    from: aimFrom,
+                    aim: commandAim,
+                    originPolicy: { kind: "muzzle" },
+                    maxDistance: 100,
+                });
+            }
+            else if (collisionDebug.getAimProbe() !== null) {
+                collisionDebug.setAimProbe(null);
+            }
             const nowMs = performance.now();
             for (const action of Object.keys(playable.game.input ?? {})) {
                 const pressed = tracker.wasPressed(action);
@@ -580,8 +686,10 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 }
             }
             tracker.endFrame();
+            endPhase();
             const serverId = serverIdRef.current;
             if (multiplayer !== null && serverId !== null) {
+                endPhase = devtools.profile.begin("presence");
                 const focus = ctx.scene.entity.get(playerId);
                 if (focus !== null) {
                     multiplayer.backend.presenceSync.syncPose(serverId, {
@@ -592,6 +700,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                         rotationPitch: pitchRef.current,
                     });
                 }
+                endPhase();
             }
         }
         catch (error) {
@@ -604,7 +713,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
     }, GAME_SIM_FRAME_PRIORITY);
     return null;
 }
-function HudOnlyDriver({ ctx, playable, tracker, onRuntimeError, }) {
+function HudOnlyDriver({ ctx, playable, tracker, pointerAxisRef, onRuntimeError, }) {
     const hasReportedTickError = useRef(false);
     const repeatFiredAtRef = useRef(new Map());
     const lastFrameRef = useRef(null);
@@ -620,10 +729,16 @@ function HudOnlyDriver({ ctx, playable, tracker, onRuntimeError, }) {
             const rawDt = (now - last) / 1000;
             const simStart = performance.now();
             try {
+                let endPhase = devtools.profile.begin("time+input");
                 const dt = Math.min(rawDt, 0.05);
                 const gameDt = ctx.time.advance(dt);
                 ctx.input.publish(heldActionsFor(tracker, inputActions));
-                playable.loop.onTick(ctx, gameDt);
+                ctx.input.publishPointer(pointerAxisRef.current);
+                endPhase();
+                devtools.profile.measure("onTick", () => {
+                    playable.loop.onTick(ctx, gameDt);
+                });
+                endPhase = devtools.profile.begin("actions");
                 const nowMs = performance.now();
                 for (const action of inputActions) {
                     if (!shouldFireBoundAction(tracker, action, playable.game.input, repeatFiredAtRef.current, nowMs))
@@ -632,6 +747,7 @@ function HudOnlyDriver({ ctx, playable, tracker, onRuntimeError, }) {
                     dispatchBoundAction(ctx, action, 0, 0, { yaw: 0, pitch: 0 });
                 }
                 tracker.endFrame();
+                endPhase();
             }
             catch (error) {
                 if (!hasReportedTickError.current) {
@@ -643,7 +759,7 @@ function HudOnlyDriver({ ctx, playable, tracker, onRuntimeError, }) {
         };
         frameId = requestAnimationFrame(tick);
         return () => cancelAnimationFrame(frameId);
-    }, [ctx, playable, tracker, onRuntimeError, inputActions]);
+    }, [ctx, playable, tracker, pointerAxisRef, onRuntimeError, inputActions]);
     return null;
 }
 class GameUiErrorBoundary extends Component {
@@ -651,8 +767,8 @@ class GameUiErrorBoundary extends Component {
     static getDerivedStateFromError() {
         return { failed: true };
     }
-    componentDidCatch(error) {
-        this.props.onRuntimeError(error, "ui-render");
+    componentDidCatch(error, info) {
+        this.props.onRuntimeError(error, "ui-render", info.componentStack ?? undefined);
     }
     render() {
         if (this.state.failed)
@@ -660,16 +776,53 @@ class GameUiErrorBoundary extends Component {
         return this.props.children;
     }
 }
-function DiagnosticOverlay({ diagnostics }) {
+function expandedReactError(message) {
+    return /Minified React error #185\b/.test(message)
+        ? "Maximum update depth exceeded. A component is repeatedly updating state during render or after every update."
+        : null;
+}
+function diagnosticReport(diagnostic, gameName) {
+    const explanation = expandedReactError(diagnostic.message);
+    return [
+        "JGengine runtime error",
+        `Game: ${gameName}`,
+        `Engine: ${VERSION}`,
+        `Phase: ${diagnostic.phase}`,
+        `Time: ${diagnostic.capturedAt}`,
+        `Page: ${window.location.origin}${window.location.pathname}`,
+        `Browser: ${navigator.userAgent}`,
+        explanation === null ? null : `Explanation: ${explanation}`,
+        "",
+        `Message: ${diagnostic.message}`,
+        diagnostic.stack === undefined ? null : `JavaScript stack:\n${diagnostic.stack}`,
+        diagnostic.componentStack === undefined ? null : `React component stack:\n${diagnostic.componentStack}`,
+    ]
+        .filter((line) => line !== null)
+        .join("\n");
+}
+function DiagnosticOverlay({ diagnostics, gameName }) {
+    const [copied, setCopied] = useState(false);
     if (diagnostics.length === 0)
         return null;
     const latest = diagnostics[diagnostics.length - 1];
-    return (_jsxs("div", { className: "pointer-events-auto absolute right-4 top-4 z-50 max-w-lg rounded border border-red-400/60 bg-red-950/95 p-3 text-xs text-red-50 shadow-2xl", children: [_jsx("div", { className: "mb-1 font-semibold uppercase tracking-wide text-red-200", children: "JG engine error" }), _jsxs("div", { className: "font-mono text-[11px] text-red-100", children: ["[", latest.phase, "] ", latest.message] }), latest.stack !== undefined ? (_jsx("pre", { className: "mt-2 max-h-36 overflow-auto whitespace-pre-wrap text-[10px] text-red-200/80", children: latest.stack })) : null] }));
+    const explanation = expandedReactError(latest.message);
+    const report = diagnosticReport(latest, gameName);
+    const issueBody = report.length > 8000 ? `${report.slice(0, 8000)}\n\n[Report truncated; use Copy error for the full report.]` : report;
+    const issueUrl = `https://github.com/Noisemaker111/jgengine/issues/new?title=${encodeURIComponent(`[BUG] ${latest.phase}: ${latest.message.slice(0, 100)}`)}&body=${encodeURIComponent(issueBody)}`;
+    return (_jsxs("div", { className: "pointer-events-auto absolute right-4 top-4 z-50 max-w-lg rounded border border-red-400/60 bg-red-950/95 p-3 text-xs text-red-50 shadow-2xl", children: [_jsx("div", { className: "mb-1 font-semibold uppercase tracking-wide text-red-200", children: "JG engine error" }), _jsxs("div", { className: "font-mono text-[11px] text-red-100", children: ["[", latest.phase, "] ", latest.message] }), explanation !== null ? _jsx("div", { className: "mt-2 text-red-100", children: explanation }) : null, latest.stack !== undefined ? (_jsx("pre", { className: "mt-2 max-h-36 overflow-auto whitespace-pre-wrap text-[10px] text-red-200/80", children: latest.stack })) : null, latest.componentStack !== undefined ? (_jsx("pre", { className: "mt-2 max-h-36 overflow-auto whitespace-pre-wrap text-[10px] text-red-200/80", children: latest.componentStack })) : null, _jsxs("div", { className: "mt-3 flex gap-2", children: [_jsx("button", { className: "rounded border border-red-300/50 bg-red-900 px-2 py-1 font-semibold hover:bg-red-800", type: "button", onClick: () => {
+                            void navigator.clipboard.writeText(report).then(() => {
+                                setCopied(true);
+                                window.setTimeout(() => setCopied(false), 2000);
+                            });
+                        }, children: copied ? "Copied" : "Copy error" }), _jsx("a", { className: "rounded border border-red-300/50 bg-red-900 px-2 py-1 font-semibold hover:bg-red-800", href: issueUrl, rel: "noreferrer", target: "_blank", children: "File issue" })] })] }));
 }
-export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null, }) {
+const POSTER_SETTLE_SECONDS = 1.6;
+export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null, poster = false, onContextReady, }) {
     const multiplayer = useMemo(() => (rawMultiplayer === null ? null : withDevtoolsLatency(rawMultiplayer)), [rawMultiplayer]);
-    const devtoolsEnabled = playable.devtools !== false;
+    const devtoolsEnabled = playable.devtools !== false && !poster;
     const [devtoolsOpen, setDevtoolsOpen] = useState(false);
+    const [posterFrozen, setPosterFrozen] = useState(false);
+    const posterSettledRef = useRef(false);
     const [ctx, setCtx] = useState(null);
     const [diagnostics, setDiagnostics] = useState([]);
     const [remotePlayers, setRemotePlayers] = useState([]);
@@ -680,25 +833,55 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
     const cameraDraggingRef = useRef(false);
     const primaryClickRef = useRef(false);
     const pointerDownRef = useRef(null);
+    const pointerAxisRef = useRef(null);
     const marqueeStartRef = useRef(null);
+    const f2HeldRef = useRef(false);
+    const f2ChordedRef = useRef(false);
     const pointerService = useMemo(() => createPointerService(), []);
     const selection = useMemo(() => createSelectionSet(), [playable]);
     const [marquee, setMarquee] = useState(null);
     const [selectedIds, setSelectedIds] = useState(() => new Set());
     const [contextMenu, setContextMenu] = useState(null);
-    const tracker = useMemo(() => createActionStateTracker(toActionStateBindingMap(withTouchCodes(playable.game.input))), [playable]);
+    const settingsStore = useMemo(() => createSettingsStore(), []);
+    const [bindingOverrides, setBindingOverrides] = useState(() => loadBindingOverrides(playable.game.name));
+    useEffect(() => {
+        setBindingOverrides(loadBindingOverrides(playable.game.name));
+    }, [playable]);
+    const effectiveInput = useMemo(() => applyBindingOverrides(playable.game.input ?? {}, bindingOverrides), [playable, bindingOverrides]);
+    const rebindAction = useCallback((action, code) => setBindingOverrides(saveBindingOverride(playable.game.name, action, [code])), [playable]);
+    const resetActionBinding = useCallback((action) => setBindingOverrides(clearBindingOverride(playable.game.name, action)), [playable]);
+    const tracker = useMemo(() => createActionStateTracker(toActionStateBindingMap(withTouchCodes(effectiveInput))), [effectiveInput]);
+    const graphics = useGraphicsSettings(settingsStore, playable.shadows ?? true);
+    const trackPointerAxis = (event) => {
+        const rect = wrapperRef.current?.getBoundingClientRect();
+        if (rect === undefined)
+            return;
+        pointerAxisRef.current = normalizePointerToAxis(event.clientX, event.clientY, rect);
+    };
+    const deactivatePointerAxis = () => {
+        const state = pointerAxisRef.current;
+        if (state !== null && state.active)
+            pointerAxisRef.current = { ...state, active: false };
+    };
     const touchScheme = useMemo(() => deriveTouchScheme(playable.game.input, {
         reserved: RESERVED_INPUT_ACTIONS,
         firstPerson: resolveRigKind(playable.camera) === "first",
         config: playable.touch,
     }), [playable]);
-    const { coarsePointer } = useDisplayProfile();
+    const { coarsePointer, portrait, compact } = useDisplayProfile();
     const touchSink = useMemo(() => ({ onCodeDown: (code) => tracker.handleDown(code), onCodeUp: (code) => tracker.handleUp(code) }), [tracker]);
     const audioEngine = useMemo(() => createAudioEngine({ sounds: playable.audio?.sounds, buses: playable.audio?.buses }), [playable]);
     useEffect(() => () => audioEngine.dispose(), [audioEngine]);
+    useEffect(() => {
+        if (ctx === null)
+            return;
+        return ctx.game.events.on("audio.play", ({ sound, at }) => {
+            audioEngine.playOneShot(sound, at === undefined ? undefined : { x: at[0], y: at[1], z: at[2] });
+        });
+    }, [ctx, audioEngine]);
     const userId = multiplayer?.userId ?? DEV_USER_ID;
-    const reportRuntimeError = (error, phase) => {
-        const diagnostic = logRuntimeError(error, phase);
+    const reportRuntimeError = (error, phase, componentStack) => {
+        const diagnostic = logRuntimeError(error, phase, componentStack);
         setDiagnostics((current) => [...current.slice(-4), { ...diagnostic, id: Date.now() + current.length }]);
     };
     useEffect(() => {
@@ -712,6 +895,7 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
             });
             playable.loop.onInit(context);
             playable.loop.onNewPlayer(context);
+            onContextReady?.(context);
             setCtx(context);
         }
         catch (error) {
@@ -829,13 +1013,29 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
         return (_jsxs("div", { ref: wrapperRef, tabIndex: 0, className: "relative h-full w-full bg-neutral-950 outline-none", onKeyDown: (event) => {
                 if (event.code === "F2" && devtoolsEnabled) {
                     event.preventDefault();
-                    setDevtoolsOpen((current) => !current);
+                    f2HeldRef.current = true;
+                    f2ChordedRef.current = false;
+                    return;
+                }
+                if (f2HeldRef.current) {
+                    f2ChordedRef.current = true;
                     return;
                 }
                 if (event.code === "Tab" || event.code === "Space")
                     event.preventDefault();
                 tracker.handleDown(event.code);
-            }, onKeyUp: (event) => tracker.handleUp(event.code), onBlur: () => tracker.reset(), children: [_jsx(HudOnlyDriver, { ctx: ctx, playable: playable, tracker: tracker, onRuntimeError: reportRuntimeError }), _jsx(GameUiErrorBoundary, { onRuntimeError: reportRuntimeError, children: _jsx(GameProvider, { context: ctx, children: _jsx(GameUI, {}) }) }), devtoolsEnabled ? (_jsx(DevtoolsOverlay, { open: devtoolsOpen, ctx: ctx, playable: playable, multiplayer: multiplayer })) : null, _jsx(DiagnosticOverlay, { diagnostics: diagnostics })] }));
+            }, onKeyUp: (event) => {
+                if (event.code === "F2" && devtoolsEnabled) {
+                    f2HeldRef.current = false;
+                    if (!f2ChordedRef.current)
+                        setDevtoolsOpen((current) => !current);
+                    return;
+                }
+                tracker.handleUp(event.code);
+            }, onBlur: () => {
+                f2HeldRef.current = false;
+                tracker.reset();
+            }, onPointerMove: trackPointerAxis, onPointerLeave: deactivatePointerAxis, onPointerCancel: deactivatePointerAxis, children: [_jsx(HudOnlyDriver, { ctx: ctx, playable: playable, tracker: tracker, pointerAxisRef: pointerAxisRef, onRuntimeError: reportRuntimeError }), _jsx(GameUiErrorBoundary, { onRuntimeError: reportRuntimeError, children: _jsx(GameProvider, { context: ctx, children: _jsx(HudViewportProvider, { platforms: playable.platforms, config: playable.hudFit, userScale: graphics.uiScale, children: _jsx(GameUI, {}) }) }) }), devtoolsEnabled ? (_jsx(DevtoolsOverlay, { open: devtoolsOpen, ctx: ctx, playable: playable, multiplayer: multiplayer })) : null, _jsx(DiagnosticOverlay, { diagnostics: diagnostics, gameName: playable.game.name })] }));
     }
     const firstPerson = rigKind === "first";
     const showReticle = (firstPerson && playable.camera?.firstPerson?.reticle !== false) || rigKind === "shoulder";
@@ -864,6 +1064,7 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
     const effectiveSky = backdropSky ?? worldSky;
     const backgroundColor = backdrop?.background ?? (effectiveSky === undefined ? DEFAULT_BACKGROUND_COLOR : undefined);
     const lighting = playable.lighting;
+    const orthographic = playable.camera?.projection === "orthographic";
     const localXY = (event) => {
         const rect = wrapperRef.current?.getBoundingClientRect();
         return rect === undefined
@@ -887,6 +1088,7 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
     };
     const handlePointerDown = (event) => {
         wrapperRef.current?.focus();
+        trackPointerAxis(event);
         audioEngine.resume();
         if (contextMenu !== null)
             setContextMenu(null);
@@ -898,6 +1100,7 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
         }
     };
     const handlePointerMove = (event) => {
+        trackPointerAxis(event);
         if (pointer?.select !== true)
             return;
         const start = marqueeStartRef.current;
@@ -996,33 +1199,90 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
             ctx.game.commands.run(verb.command, contextVerbInput(state.menu, verb));
         }
     };
-    return (_jsxs("div", { ref: wrapperRef, tabIndex: 0, className: "relative h-full w-full bg-neutral-950 outline-none", onKeyDown: (event) => {
-            if (event.code === "F2" && devtoolsEnabled) {
-                event.preventDefault();
-                document.exitPointerLock?.();
-                setDevtoolsOpen((current) => !current);
-                return;
-            }
-            if (event.code === "Tab" || event.code === "Space")
-                event.preventDefault();
-            tracker.handleDown(event.code);
-        }, onKeyUp: (event) => tracker.handleUp(event.code), onBlur: () => tracker.reset(), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onContextMenu: handleContextMenu, onWheel: (event) => {
-            if (ctx === null || !event.shiftKey)
-                return;
-            event.preventDefault();
-            if (event.deltaY < 0 && ctx.game.commands.has("ui.hotbarScrollNext")) {
-                ctx.game.commands.run("ui.hotbarScrollNext", {});
-            }
-            else if (event.deltaY > 0 && ctx.game.commands.has("ui.hotbarScrollPrev")) {
-                ctx.game.commands.run("ui.hotbarScrollPrev", {});
-            }
-        }, children: [_jsxs(Canvas, { camera: {
-                    fov: playable.camera?.frustum?.fov ?? CAMERA_FRUSTUM_DEFAULTS.fov,
-                    near: playable.camera?.frustum?.near ?? CAMERA_FRUSTUM_DEFAULTS.near,
-                    far: playable.camera?.frustum?.far ?? CAMERA_FRUSTUM_DEFAULTS.far,
-                }, shadows: playable.shadows ?? true, gl: { preserveDrawingBuffer: true }, style: { touchAction: "none" }, children: [backgroundColor !== undefined ? _jsx("color", { attach: "background", args: [backgroundColor] }) : null, effectiveSky === undefined ? (lighting !== undefined ? (_jsx(ConfiguredLighting, { lighting: lighting })) : (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 0.55 }), _jsx("directionalLight", { position: [10, 16, 6], intensity: 1.3 })] }))) : effectiveSky.timeOfDay ? (_jsx(TimeOfDayDaylight, { sky: effectiveSky, clock: ctx.time })) : backdropSky !== undefined ? (_jsx(SkyDaylight, { sky: backdropSky })) : null, _jsx(BackdropFog, { fog: backdrop?.fog }), _jsxs(GameProvider, { context: ctx, children: [_jsx(WorldView, { entitySprites: playable.entitySprites, entityModels: playable.entityModels, objectModels: playable.objectModels, objectStyles: playable.objectStyles, environment: AutoEnvironment, assets: playable.game.assets, renderEntity: playable.renderEntity, renderObject: playable.renderObject, selectedIds: selectedIds }), WorldOverlay !== undefined ? _jsx(WorldOverlay, {}) : null, barsStatId !== null ? (_jsx(WorldEntityBars, { statId: barsStatId, roles: barsRoles, resolveRole: resolveEntityRole })) : null, _jsx(WorldItems, { config: playable.worldItem }), _jsx(WorldTelegraphs, {}), _jsx(WorldFloatText, {}), _jsx(ProjectileTracers, {}), _jsx(CombatCameraShake, {}), _jsx(AudioListener, { engine: audioEngine }), _jsx(EntityAudioEmitters, { engine: audioEngine, entitySounds: playable.entitySounds }), _jsx(ObjectAudioEmitters, { engine: audioEngine, objectSounds: playable.objectSounds }), _jsx(GameCameraRig, { yawRef: yawRef, pitchRef: pitchRef, config: cameraConfig, pointerControls: pointerUsesLeft, panKeysEnabled: rtsPanKeysEnabled, director: ctx.camera, onDragChange: (dragging) => {
-                                    cameraDraggingRef.current = dragging;
-                                } }), _jsx(PointerProbe, { service: pointerService })] }), _jsx(RemotePlayers, { rows: remotePlayers }), _jsx(FrameDriver, { ctx: ctx, playable: playable, tracker: tracker, yawRef: yawRef, pitchRef: pitchRef, primaryClickRef: primaryClickRef, onRuntimeError: reportRuntimeError, multiplayer: multiplayer, serverIdRef: serverIdRef, pointerService: pointerService, pointerAim: pointer?.aim === true, pingCommand: pointer?.pingCommand }), _jsx(DevtoolsRendererProbe, {})] }), coarsePointer && touchScheme !== null && (touchScheme.gestures !== null || touchScheme.look) ? (_jsx(TouchPlaySurface, { scheme: touchScheme, sink: touchSink, yawRef: yawRef, pitchRef: pitchRef, maxPitch: playable.camera?.firstPerson?.maxPitch ?? 1.45, onPrimaryTap: () => {
-                    primaryClickRef.current = true;
-                } })) : null, _jsx(GameUiErrorBoundary, { onRuntimeError: reportRuntimeError, children: _jsx(GameProvider, { context: ctx, children: _jsx(GameUI, {}) }) }), showReticle ? _jsx(Reticle, {}) : null, coarsePointer && touchScheme !== null && (touchScheme.joystick !== null || touchScheme.buttons.length > 0) ? (_jsx(TouchControlsDock, { scheme: touchScheme, sink: touchSink })) : null, marquee !== null ? _jsx(MarqueeBox, { rect: marquee }) : null, contextMenu !== null ? (_jsx(ContextMenuView, { menu: contextMenu.menu, x: contextMenu.x, y: contextMenu.y, onPick: handleVerbPick, onClose: () => setContextMenu(null) })) : null, devtoolsEnabled ? (_jsx(DevtoolsOverlay, { open: devtoolsOpen, ctx: ctx, playable: playable, multiplayer: multiplayer })) : null, _jsx(DiagnosticOverlay, { diagnostics: diagnostics })] }));
+    const controlsActive = playControlsActive(ctx);
+    const settingsDisabled = playable.settings === false;
+    const settingsConfig = playable.settings === false || playable.settings === undefined ? {} : playable.settings;
+    const settingsSurface = settingsDisabled ? false : settingsConfig.surface ?? false;
+    const settingsVariant = settingsConfig.variant ?? "panel";
+    const hideCategories = settingsDisabled ? BUILT_IN_SETTING_CATEGORIES : settingsConfig.hide ?? [];
+    const fovControlEnabled = !orthographic && playable.camera?.playerFov?.control !== false;
+    const settingsHostsFov = !settingsDisabled && !hideCategories.includes("gameplay") && fovControlEnabled;
+    const settingsActions = settingsDisabled
+        ? []
+        : (settingsConfig.actions ?? []).map((action) => ({
+            id: action.id,
+            label: action.label,
+            kind: action.kind ?? "default",
+            description: action.description,
+            run: () => action.run(ctx),
+        }));
+    const touchScale = compact ? 0.88 : 1;
+    const dockMounted = !poster &&
+        coarsePointer &&
+        controlsActive &&
+        touchScheme !== null &&
+        (touchScheme.joystick !== null || touchScheme.buttons.length > 0);
+    const orientationMismatch = !poster &&
+        coarsePointer &&
+        playable.orientation !== undefined &&
+        (playable.orientation === "landscape") === portrait;
+    return (_jsx(SettingsProvider, { store: settingsStore, children: _jsxs(PlayerFovProvider, { config: playable.camera, orthographic: orthographic, children: [_jsx(AudioSettingsBridge, { store: settingsStore, engine: audioEngine, buses: playable.audio?.buses }), _jsx(SettingsRuntime, { variant: settingsVariant, surface: settingsSurface, actions: settingsActions, input: playable.game.input ?? {}, buses: playable.audio?.buses, extra: settingsConfig.extra ?? [], categories: settingsConfig.categories ?? [], hide: hideCategories, fovEnabled: fovControlEnabled, hideBindings: settingsConfig.hideBindings ?? [], overrides: bindingOverrides, rebind: rebindAction, resetBinding: resetActionBinding, children: _jsxs("div", { ref: wrapperRef, tabIndex: 0, ...(poster && posterFrozen ? { "data-poster-ready": "" } : {}), className: "relative h-full w-full bg-neutral-950 outline-none", style: {
+                            "--jg-hud-dock-clearance": `${dockMounted ? touchDockClearance(touchScheme, touchScale) : 0}px`,
+                        }, onKeyDown: (event) => {
+                            if (event.code === "F2" && devtoolsEnabled) {
+                                event.preventDefault();
+                                f2HeldRef.current = true;
+                                f2ChordedRef.current = false;
+                                return;
+                            }
+                            if (f2HeldRef.current) {
+                                f2ChordedRef.current = true;
+                                return;
+                            }
+                            if (event.code === "Tab" || event.code === "Space")
+                                event.preventDefault();
+                            tracker.handleDown(event.code);
+                        }, onKeyUp: (event) => {
+                            if (event.code === "F2" && devtoolsEnabled) {
+                                f2HeldRef.current = false;
+                                if (!f2ChordedRef.current) {
+                                    document.exitPointerLock?.();
+                                    setDevtoolsOpen((current) => !current);
+                                }
+                                return;
+                            }
+                            tracker.handleUp(event.code);
+                        }, onBlur: () => {
+                            f2HeldRef.current = false;
+                            tracker.reset();
+                        }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerLeave: deactivatePointerAxis, onPointerCancel: deactivatePointerAxis, onContextMenu: handleContextMenu, onWheel: (event) => {
+                            if (ctx === null || !event.shiftKey)
+                                return;
+                            event.preventDefault();
+                            if (event.deltaY < 0 && ctx.game.commands.has("ui.hotbarScrollNext")) {
+                                ctx.game.commands.run("ui.hotbarScrollNext", {});
+                            }
+                            else if (event.deltaY > 0 && ctx.game.commands.has("ui.hotbarScrollPrev")) {
+                                ctx.game.commands.run("ui.hotbarScrollPrev", {});
+                            }
+                        }, children: [_jsxs(Canvas, { frameloop: poster && posterFrozen ? "demand" : "always", orthographic: orthographic, camera: orthographic
+                                    ? {
+                                        zoom: playable.camera?.frustum?.zoom ?? CAMERA_FRUSTUM_DEFAULTS.zoom,
+                                        near: playable.camera?.frustum?.near ?? CAMERA_FRUSTUM_DEFAULTS.near,
+                                        far: playable.camera?.frustum?.far ?? CAMERA_FRUSTUM_DEFAULTS.far,
+                                    }
+                                    : {
+                                        fov: playable.camera?.frustum?.fov ?? CAMERA_FRUSTUM_DEFAULTS.fov,
+                                        near: playable.camera?.frustum?.near ?? CAMERA_FRUSTUM_DEFAULTS.near,
+                                        far: playable.camera?.frustum?.far ?? CAMERA_FRUSTUM_DEFAULTS.far,
+                                    }, shadows: graphics.shadows, dpr: graphics.dpr, gl: { preserveDrawingBuffer: true }, style: { touchAction: "none" }, children: [backgroundColor !== undefined ? _jsx("color", { attach: "background", args: [backgroundColor] }) : null, lighting !== undefined ? (_jsx(ConfiguredLighting, { lighting: lighting })) : effectiveSky === undefined ? (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 0.55 }), _jsx("directionalLight", { position: [10, 16, 6], intensity: 1.3 })] })) : null, effectiveSky !== undefined ? (effectiveSky.timeOfDay ? (_jsx(TimeOfDayDaylight, { sky: effectiveSky, clock: ctx.time, lights: skyEmitsLights(resolveSkyLightOwnership(lighting !== undefined)) })) : (_jsx(SkyDaylight, { sky: effectiveSky, lights: skyEmitsLights(resolveSkyLightOwnership(lighting !== undefined)) }))) : null, _jsx(BackdropFog, { fog: backdrop?.fog }), _jsxs(GameProvider, { context: ctx, children: [_jsx(CullingProvider, { config: playable.visibility, children: _jsx(WorldView, { entitySprites: playable.entitySprites, entityModels: playable.entityModels, objectModels: playable.objectModels, objectStyles: playable.objectStyles, environment: AutoEnvironment, assets: playable.game.assets, renderEntity: playable.renderEntity, renderObject: playable.renderObject, selectedIds: selectedIds }) }), WorldOverlay !== undefined ? _jsx(WorldOverlay, {}) : null, barsStatId !== null ? (_jsx(WorldEntityBars, { statId: barsStatId, roles: barsRoles, resolveRole: resolveEntityRole })) : null, _jsx(WorldItems, { config: playable.worldItem }), _jsx(WorldTelegraphs, {}), _jsx(WorldFloatText, {}), _jsx(ProjectileTracers, {}), devtoolsEnabled ? _jsx(CollisionDebugWorld, {}) : null, _jsx(CombatCameraShake, {}), _jsx(AudioListener, { engine: audioEngine }), _jsx(EntityAudioEmitters, { engine: audioEngine, entitySounds: playable.entitySounds }), _jsx(ObjectAudioEmitters, { engine: audioEngine, objectSounds: playable.objectSounds }), _jsx(GameCameraRig, { yawRef: yawRef, pitchRef: pitchRef, config: cameraConfig, pointerControls: pointerUsesLeft, panKeysEnabled: rtsPanKeysEnabled, director: ctx.camera, onDragChange: (dragging) => {
+                                                    cameraDraggingRef.current = dragging;
+                                                } }), _jsx(PointerProbe, { service: pointerService })] }), _jsx(RemotePlayers, { rows: remotePlayers }), _jsx(FrameDriver, { ctx: ctx, playable: playable, tracker: tracker, yawRef: yawRef, pitchRef: pitchRef, primaryClickRef: primaryClickRef, pointerAxisRef: pointerAxisRef, onRuntimeError: reportRuntimeError, multiplayer: multiplayer, serverIdRef: serverIdRef, pointerService: pointerService, pointerAim: pointer?.aim === true, pingCommand: pointer?.pingCommand, poster: poster, onPosterSettled: () => {
+                                            if (posterSettledRef.current)
+                                                return;
+                                            posterSettledRef.current = true;
+                                            setPosterFrozen(true);
+                                        } }), _jsx(DevtoolsRendererProbe, {})] }), !poster && coarsePointer && controlsActive && touchScheme !== null && (touchScheme.gestures !== null || touchScheme.look) ? (_jsx(TouchPlaySurface, { scheme: touchScheme, sink: touchSink, yawRef: yawRef, pitchRef: pitchRef, maxPitch: playable.camera?.firstPerson?.maxPitch ?? 1.45, onPrimaryTap: () => {
+                                    primaryClickRef.current = true;
+                                } })) : null, _jsx(GameUiErrorBoundary, { onRuntimeError: reportRuntimeError, children: _jsx(GameProvider, { context: ctx, children: _jsx(HudViewportProvider, { platforms: playable.platforms, config: playable.hudFit, userScale: graphics.uiScale, children: _jsx(GameUI, {}) }) }) }), !poster && showReticle ? _jsx(Reticle, {}) : null, dockMounted && touchScheme !== null ? (_jsx(TouchControlsDock, { scheme: touchScheme, sink: touchSink, scale: touchScale })) : null, orientationMismatch && playable.orientation !== undefined ? (_jsx(OrientationHint, { wanted: playable.orientation })) : null, marquee !== null ? _jsx(MarqueeBox, { rect: marquee }) : null, contextMenu !== null ? (_jsx(ContextMenuView, { menu: contextMenu.menu, x: contextMenu.x, y: contextMenu.y, onPick: handleVerbPick, onClose: () => setContextMenu(null) })) : null, devtoolsEnabled ? (_jsx(DevtoolsOverlay, { open: devtoolsOpen, ctx: ctx, playable: playable, multiplayer: multiplayer })) : null, poster ? null : _jsx(DiagnosticOverlay, { diagnostics: diagnostics, gameName: playable.game.name }), poster || orthographic || settingsHostsFov ? null : _jsx(PlayerFovSlider, {}), poster ? null : _jsx(SettingsChrome, {})] }) })] }) }));
 }