@jgengine/shell 0.6.0 → 0.8.0

package/dist/GamePlayerShell.js

@@ -1,23 +1,49 @@
 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 } from "react";
+import { Component, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import * as THREE from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { createActionStateTracker, hotbarSlotActionIndex, resolveActionCommand, toActionStateBindingMap, } from "@jgengine/core/input/actionBindings";
+import { actionRepeatMs, createActionStateTracker, hotbarSlotActionIndex, resolveActionCommand, shouldDispatchAction, toActionStateBindingMap, } from "@jgengine/core/input/actionBindings";
+import { deriveTouchScheme, withTouchCodes } from "@jgengine/core/input/touchScheme";
+import { buildContextMenu, contextVerbInput, } from "@jgengine/core/interaction/contextMenu";
 import { resolveActivePrompt } from "@jgengine/core/interaction/proximityPrompt";
-import { advancePlayerMotion, createEmptyMovementKeys, createPlayerMotionState, resolveMovementIntent, } from "@jgengine/core/movement/movementModel";
+import { aimToPoint } from "@jgengine/core/input/pointer";
+import { createSelectionSet, isMarquee, screenRect, selectWithinRect, } from "@jgengine/core/scene/selection";
+import { advancePlayerMotion, constrainStepToAxis, createEmptyMovementKeys, createPlayerMotionState, resolveMovementIntent, resolveObstacleStep, snapPositionToGrid, } from "@jgengine/core/movement/movementModel";
+import { advanceVoxelPlayer, createVoxelPlayerBody, } from "@jgengine/core/movement/voxelController";
 import { createGameContext } from "@jgengine/core/runtime/gameContext";
+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 { useSceneEntities, useSceneObjects, usePlayer, useTarget } from "@jgengine/react/hooks";
 import { GameProvider } from "@jgengine/react/provider";
-import { GAME_SIM_FRAME_PRIORITY, GameOrbitCamera } from "./camera/index.js";
-import { GameFirstPersonCamera } from "./camera/GameFirstPersonCamera.js";
-import { ProjectileTracers, Reticle, WorldEntityBars, WorldFloatText } from "./world/WorldHud.js";
+import { CAMERA_FRUSTUM_DEFAULTS } from "@jgengine/core/game/playableGame";
+import { sky as resolveSkyDescriptor } from "@jgengine/core/world/features";
+import { devtools } from "@jgengine/core/devtools/devtools";
+import { AudioListener, EntityAudioEmitters, ObjectAudioEmitters } from "./audio/AudioComponents.js";
+import { createAudioEngine } from "./audio/audioEngine.js";
+import { DevtoolsOverlay, DevtoolsRendererProbe, withDevtoolsLatency } from "./devtools/DevtoolsOverlay.js";
+import { GAME_SIM_FRAME_PRIORITY, GameCameraRig, resolveRigKind, rtsPanKeysConflict } from "./camera/index.js";
+import { SkyDaylight, TimeOfDayDaylight } from "./environment.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 { 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";
 const DEV_USER_ID = "dev-player";
 const TURN_SPEED = 2.4;
 const PRIMARY_CLICK_MOVE_THRESHOLD_PX = 6;
 const GROUND_SIZE = 160;
 const GROUND_SEGMENTS = 80;
+const DEFAULT_BACKGROUND_COLOR = "#14161b";
+const DEFAULT_BACKDROP_FOG_COLOR = "#1a1c22";
 function errorToDiagnostic(error, phase) {
     if (error instanceof Error) {
         return { phase, message: error.message, stack: error.stack };
@@ -43,6 +69,11 @@ const RESERVED_INPUT_ACTIONS = new Set([
     "useAbility",
     "interact",
 ]);
+const SHELL_MOVEMENT_ACTIONS = ["moveForward", "moveBack", "moveLeft", "moveRight", "jump"];
+function shellDrivesPlayerPose(input) {
+    const bound = input ?? {};
+    return SHELL_MOVEMENT_ACTIONS.some((action) => action in bound);
+}
 function findHotbarSlotActions(input) {
     return Object.keys(input ?? {}).flatMap((action) => {
         const slot = hotbarSlotActionIndex(action);
@@ -54,24 +85,125 @@ function hotbarIdFor(playable) {
     const hud = declarations.find(([, declaration]) => declaration.hud === "hotbar");
     return (hud ?? declarations[0])?.[0] ?? null;
 }
-function executeHotbarSlot(ctx, hotbarId, slot, yaw, pitch) {
+function executeHotbarSlot(ctx, fromId, hotbarId, slot, yaw, pitch, aimOverride) {
     const stack = ctx.player.inventory.state(hotbarId).slots[slot];
     if (stack === undefined || stack === null)
         return { ok: false, error: `Hotbar slot ${slot + 1} is empty` };
     const result = ctx.item.use.use({
-        from: ctx.player.userId,
+        from: fromId,
         itemId: stack.itemId,
         inventoryId: hotbarId,
-        aim: { yaw, pitch },
+        aim: aimOverride ?? { yaw, pitch },
     });
     return result.error === undefined ? { ok: true } : { ok: false, error: result.error };
 }
+function pointerAimFor(ctx, service) {
+    const hit = service.worldHit();
+    if (hit === null)
+        return undefined;
+    const player = ctx.scene.entity.get(ctx.player.userId);
+    const origin = player === null ? hit.point : player.position;
+    return aimToPoint([origin[0], origin[1] + 1, origin[2]], hit.point);
+}
+function pointerContextMenu(ctx, playable, hit) {
+    if (hit.entity !== null) {
+        const entity = ctx.scene.entity.get(hit.entity);
+        const verbs = entity === null ? undefined : playable.content.entityById?.(entity.name)?.verbs;
+        return buildContextMenu({ kind: "entity", targetId: hit.entity, verbs, point: hit.point });
+    }
+    if (hit.object !== null) {
+        const verbs = ctx.scene.object.catalog(hit.object)?.verbs;
+        return buildContextMenu({ kind: "object", targetId: hit.object, verbs, point: hit.point });
+    }
+    return null;
+}
+/** Actions from `input` currently held down, for `ctx.input.publish` (#164.1); includes reserved movement/jump actions. */
+export function heldActionsFor(tracker, actions) {
+    return actions.filter((action) => tracker.isDown(action));
+}
+/** Whether a bound action should fire this frame: on press, or on repeat interval while held (shared by `FrameDriver` and `HudOnlyDriver`). */
+export function shouldFireBoundAction(tracker, action, input, repeatFiredAt, now) {
+    return shouldDispatchAction({
+        pressed: tracker.wasPressed(action),
+        down: tracker.isDown(action),
+        repeatMs: actionRepeatMs(input?.[action]),
+        lastFiredAt: repeatFiredAt.get(action) ?? null,
+        now,
+    });
+}
+/** Resolves and runs the command bound to `action` via the shell's action→command convention (shared by `FrameDriver` and `HudOnlyDriver`). */
+export function dispatchBoundAction(ctx, action, yaw, pitch, aim) {
+    const command = resolveActionCommand(action, (name) => ctx.game.commands.has(name), RESERVED_INPUT_ACTIONS);
+    if (command !== null)
+        ctx.game.commands.run(command, { yaw, pitch, aim });
+}
+const OBSTACLE_GATHER_RADIUS = 3;
+/** Placed scene objects within `radius` of `center`, as `CollisionObstacle`s for `resolveObstacleStep` (#162.1). */
+export function nearbyObstacles(objects, center, radius = OBSTACLE_GATHER_RADIUS) {
+    const radiusSq = radius * radius;
+    const result = [];
+    for (const object of objects) {
+        const dx = object.position[0] - center[0];
+        const dz = object.position[2] - center[2];
+        if (dx * dx + dz * dz <= radiusSq)
+            result.push({ position: object.position });
+    }
+    return result;
+}
+/** Applies a pending `MotionIntentBatch` to a vertical velocity: impulses add, then `verticalVelocity` replaces the result outright (#162.4). */
+export function applyMotionImpulses(currentVelocity, batch) {
+    if (batch === null)
+        return currentVelocity;
+    let velocity = currentVelocity;
+    for (const impulse of batch.impulses)
+        velocity += impulse;
+    return batch.verticalVelocity ?? velocity;
+}
+/** The world's declared sky, when its world feature is an environment with one (#196.1). */
+export function resolveWorldSky(world) {
+    return world?.kind === "environment" ? world.sky : undefined;
+}
+/**
+ * Maps the game's declared `physics` onto the movement controllers' tuning
+ * overrides. `PhysicsConfig.gravity` is a signed world acceleration (negative
+ * points down, matching every game's config and the Y-up convention), but the
+ * controllers integrate `velocityY -= gravityAcceleration * dt` and so expect a
+ * positive downward magnitude. Negating here is what keeps a down-pointing
+ * gravity pulling the player *down*; passing the signed value straight through
+ * flipped the sign and launched airborne players upward instead.
+ */
+export function resolvePhysicsTuning(physics) {
+    if (physics?.gravity === undefined && physics?.jumpVelocity === undefined)
+        return undefined;
+    const tuning = {};
+    if (physics.gravity !== undefined)
+        tuning.gravityAcceleration = -physics.gravity;
+    if (physics.jumpVelocity !== undefined)
+        tuning.jumpVelocity = physics.jumpVelocity;
+    return tuning;
+}
+/** 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;
+}
 function colorFromId(id) {
     let hash = 0;
     for (let index = 0; index < id.length; index += 1)
         hash = (hash * 31 + id.charCodeAt(index)) >>> 0;
     return `hsl(${hash % 360}, 65%, 55%)`;
 }
+function ConfiguredLighting({ lighting }) {
+    return (_jsxs(_Fragment, { children: [lighting.ambient !== undefined ? (_jsx("ambientLight", { color: lighting.ambient.color, intensity: lighting.ambient.intensity ?? 0.55 })) : null, lighting.hemisphere !== undefined ? (_jsx("hemisphereLight", { args: [
+                    lighting.hemisphere.skyColor ?? "#bfe3ff",
+                    lighting.hemisphere.groundColor ?? "#4c6b34",
+                    lighting.hemisphere.intensity ?? 0.55,
+                ] })) : null, (lighting.directional ?? []).map((entry, index) => (_jsx("directionalLight", { position: [entry.position[0], entry.position[1], entry.position[2]], intensity: entry.intensity ?? 1.3, color: entry.color, castShadow: entry.castShadow ?? false }, index)))] }));
+}
+function BackdropFog({ fog }) {
+    if (fog === undefined)
+        return null;
+    return fog.density !== undefined ? (_jsx("fogExp2", { attach: "fog", args: [fog.color ?? DEFAULT_BACKDROP_FOG_COLOR, fog.density] })) : (_jsx("fog", { attach: "fog", args: [fog.color ?? DEFAULT_BACKDROP_FOG_COLOR, fog.near ?? 10, fog.far ?? 200] }));
+}
 function EntitySprite({ sprite }) {
     const texture = useLoader(THREE.TextureLoader, sprite.url);
     useEffect(() => {
@@ -81,9 +213,10 @@ function EntitySprite({ sprite }) {
     }, [texture]);
     return (_jsx("sprite", { "position-y": sprite.y, scale: [sprite.width, sprite.height, 1], children: _jsx("spriteMaterial", { map: texture, transparent: true, alphaTest: 0.08, depthWrite: false }) }));
 }
-function EntityModel({ model }) {
+function EntityModel({ model, instanceId }) {
     const gltf = useLoader(GLTFLoader, model.url);
-    const scene = useMemo(() => gltf.scene.clone(true), [gltf]);
+    const ctx = useGameContext();
+    const material = model.material;
     const scale = model.scale ?? 1;
     const baseY = model.y ?? 0;
     const dims = model.dims;
@@ -91,6 +224,73 @@ function EntityModel({ model }) {
     const position = centered
         ? [-scale * dims.center.x, baseY - scale * dims.minY, -scale * dims.center.z]
         : [0, baseY, 0];
+    const scene = useMemo(() => {
+        const cloned = cloneModelScene(gltf.scene);
+        if (material !== undefined)
+            applyMaterialOverride(cloned, material);
+        return cloned;
+    }, [gltf, material]);
+    const animation = model.animation;
+    const mixerRef = useRef(null);
+    const animationPausedRef = useRef(false);
+    useEffect(() => {
+        if (animation === undefined || gltf.animations.length === 0) {
+            mixerRef.current = null;
+            return;
+        }
+        const mixer = new THREE.AnimationMixer(scene);
+        const clip = (animation.clip !== undefined ? THREE.AnimationClip.findByName(gltf.animations, animation.clip) : undefined) ??
+            gltf.animations[0];
+        const action = mixer.clipAction(clip);
+        action.setLoop(animation.loop === false ? THREE.LoopOnce : THREE.LoopRepeat, Infinity);
+        action.clampWhenFinished = animation.loop === false;
+        action.timeScale = animation.timeScale ?? 1;
+        action.enabled = true;
+        action.paused = animation.paused === true;
+        action.play();
+        if (animation.time !== undefined)
+            action.time = animation.time;
+        mixer.update(0);
+        mixerRef.current = mixer;
+        animationPausedRef.current = animation.paused === true;
+        return () => {
+            mixer.stopAllAction();
+            mixerRef.current = null;
+        };
+    }, [scene, gltf, animation?.clip, animation?.loop, animation?.timeScale, animation?.paused, animation?.time]);
+    const paintCanvasRef = useRef(null);
+    const paintDrawnCountRef = useRef(0);
+    const paintVersionRef = useRef(-1);
+    useEffect(() => {
+        paintCanvasRef.current = null;
+        paintDrawnCountRef.current = 0;
+        paintVersionRef.current = -1;
+    }, [scene]);
+    useFrame((_state, delta) => {
+        if (mixerRef.current !== null && !animationPausedRef.current)
+            mixerRef.current.update(delta);
+        if (instanceId === undefined)
+            return;
+        const paint = ctx.scene.entity.paint;
+        const version = paint.version(instanceId);
+        if (version === paintVersionRef.current)
+            return;
+        paintVersionRef.current = version;
+        const strokes = paint.strokes(instanceId);
+        if (paintCanvasRef.current === null) {
+            if (strokes.length === 0)
+                return;
+            const materials = standardMaterialsOf(scene);
+            const seed = materials[0];
+            if (seed === undefined)
+                return;
+            const paintCanvas = createPaintCanvas(seed);
+            paintCanvasRef.current = paintCanvas;
+            applyPaintTexture(scene, paintCanvas);
+        }
+        const seedColor = standardMaterialsOf(scene)[0]?.color ?? new THREE.Color("#ffffff");
+        paintDrawnCountRef.current = syncPaintCanvas(paintCanvasRef.current, seedColor, strokes, paintDrawnCountRef.current);
+    });
     return _jsx("primitive", { object: scene, position: position, scale: [scale, scale, scale] });
 }
 function resolveModel(value, assets) {
@@ -103,13 +303,19 @@ function resolveModel(value, assets) {
         return undefined;
     return ref.dims === undefined ? { url: ref.url } : { url: ref.url, dims: ref.dims };
 }
-function EntityMarker({ entity, custom, model, sprite, isLocal, targeted, onSelect, }) {
+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, onPointerDown: (event) => {
+    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) => {
             event.stopPropagation();
             if (!isLocal)
                 onSelect(entity);
-        }, children: [custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(EntityModel, { model: model })) : 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] }));
+        }, 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] }));
+}
+function ObjectMarker({ object, custom, model, style, }) {
+    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 })] })) }));
 }
 function GroundPlane() {
     const geometry = useMemo(() => {
@@ -142,43 +348,70 @@ 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, environment: Environment, assets, renderEntity, }) {
+function WorldView({ entitySprites, entityModels, objectModels, objectStyles, environment: Environment, assets, renderEntity, renderObject, selectedIds, }) {
     const ctx = useGameContext();
     const entities = useSceneEntities();
     const objects = useSceneObjects();
     const player = usePlayer();
     const targetId = useTarget(player.userId);
+    const controlledId = ctx.player.possession.active(player.userId);
     const handleSelect = (entity) => {
         const relation = ctx.scene.entity.canReceive(entity.id, "damage") === null ? "hostile" : "friendly";
-        ctx.scene.entity.setTarget(player.userId, relation === "hostile" || entity.role === "npc" ? entity.id : null);
+        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.map((entity) => (_jsx(EntityMarker, { entity: entity, custom: renderEntity?.(entity), model: resolveModel(entityModels?.[entity.name], assets), sprite: entitySprites?.[entity.name], isLocal: entity.id === player.userId, targeted: entity.id === targetId, onSelect: handleSelect }, entity.id))), objects.map((object) => {
+    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
+                .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);
-                return (_jsx("group", { position: [object.position[0], object.position[1], object.position[2]], "rotation-y": object.rotationY, children: model !== undefined ? (_jsx(EntityModel, { model: model })) : (_jsxs("mesh", { "position-y": 0.5, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: colorFromId(object.catalogId) })] })) }, object.instanceId));
+                return (_jsx(ObjectMarker, { object: object, custom: renderObject?.(object), model: model, style: objectStyles?.[object.catalogId] }, object.instanceId));
             })] }));
 }
 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, }) {
+function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef, onRuntimeError, multiplayer, serverIdRef, pointerService, pointerAim, pingCommand, }) {
     const motionRef = useRef(createPlayerMotionState());
+    const voxelBodyRef = useRef(null);
+    const solidCacheRef = useRef({ count: -1, set: new Set() });
     const hasReportedTickError = useRef(false);
+    const repeatFiredAtRef = useRef(new Map());
     const slotActions = useMemo(() => findHotbarSlotActions(playable.game.input), [playable]);
     const hotbarId = useMemo(() => hotbarIdFor(playable), [playable]);
+    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,
+    }), [collision]);
+    const movementTuning = useMemo(() => resolvePhysicsTuning(playable.game.physics), [playable]);
+    const autoPickupRadius = useMemo(() => {
+        const cfg = playable.worldItem?.autoPickup;
+        if (cfg === undefined || cfg === false)
+            return null;
+        const fallback = playable.worldItem?.pickupRadius ?? DEFAULT_PICKUP_RADIUS;
+        return cfg === true ? fallback : cfg.radius ?? fallback;
+    }, [playable]);
+    const ground = useMemo(() => groundFieldFor(playable.game.world), [playable]);
+    const drivesPose = useMemo(() => shellDrivesPlayerPose(playable.game.input), [playable]);
+    const inputActions = useMemo(() => Object.keys(playable.game.input ?? {}), [playable]);
+    const hasTerrain = useMemo(() => hasEnvironmentTerrain(playable.game.world), [playable]);
     useFrame((_state, rawDt) => {
+        const simStart = performance.now();
         try {
             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;
-            const playerId = ctx.player.userId;
+            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) {
+            if (player !== null && drivesPose) {
                 const keys = createEmptyMovementKeys();
                 keys.w = tracker.isDown("moveForward");
                 keys.s = tracker.isDown("moveBack");
@@ -187,15 +420,92 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 keys.shift = tracker.isDown("sprint");
                 keys.space = tracker.isDown("jump");
                 const intent = resolveMovementIntent(keys, true);
-                const motion = motionRef.current;
-                const step = advancePlayerMotion(motion, intent, forwardX, forwardZ, player.movement.walkSpeed ?? 2, rawDt);
-                ctx.scene.entity.setPose(playerId, {
-                    position: [player.position[0] + step.stepX, motion.jumpOffset, player.position[2] + step.stepZ],
-                    rotationY: intent.moving
-                        ? Math.atan2(motion.horizontalVelocityX, motion.horizontalVelocityZ)
-                        : player.rotationY,
-                    dt: rawDt,
-                });
+                const motionBatch = ctx.player.motion.takePending();
+                if (collision?.voxel) {
+                    let body = voxelBodyRef.current;
+                    if (body === null) {
+                        body = createVoxelPlayerBody(player.position[0], player.position[1], player.position[2]);
+                        voxelBodyRef.current = body;
+                    }
+                    const objects = ctx.scene.object.list();
+                    const cache = solidCacheRef.current;
+                    if (cache.count !== objects.length) {
+                        cache.set = new Set(objects.map((o) => `${o.position[0]},${o.position[1]},${o.position[2]}`));
+                        cache.count = objects.length;
+                    }
+                    const solids = cache.set;
+                    const isSolid = (x, y, z) => solids.has(`${x},${y},${z}`);
+                    body.velocityY = applyMotionImpulses(body.velocityY, 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;
+                    ctx.scene.entity.setPose(playerId, {
+                        position: [body.x, body.y, body.z],
+                        rotationY: intent.moving
+                            ? Math.atan2(body.velocityX, body.velocityZ)
+                            : player.rotationY,
+                        dt: rawDt,
+                    });
+                }
+                else {
+                    const motion = motionRef.current;
+                    motion.verticalVelocity = applyMotionImpulses(motion.verticalVelocity, motionBatch);
+                    const step = advancePlayerMotion(motion, intent, forwardX, forwardZ, player.movement.walkSpeed ?? 2, rawDt, movementTuning);
+                    let stepX = step.stepX;
+                    let stepZ = step.stepZ;
+                    if (movement?.mode === "axis") {
+                        const constrained = constrainStepToAxis(stepX, stepZ, movement.axis ?? "x");
+                        stepX = constrained.stepX;
+                        stepZ = constrained.stepZ;
+                    }
+                    if (movement?.collideObjects === true) {
+                        const obstacles = nearbyObstacles(ctx.scene.object.list(), player.position);
+                        const resolved = resolveObstacleStep(player.position, stepX, stepZ, obstacles);
+                        stepX = resolved.stepX;
+                        stepZ = resolved.stepZ;
+                    }
+                    let nextX = player.position[0] + stepX;
+                    let nextZ = player.position[2] + stepZ;
+                    if (movement?.mode === "grid") {
+                        const snapped = snapPositionToGrid(nextX, nextZ, movement.cellSize ?? 1);
+                        nextX = snapped[0];
+                        nextZ = snapped[1];
+                    }
+                    let nextY = ground.sampleHeight(nextX, nextZ) + motion.jumpOffset;
+                    if (motionBatch !== null && motionBatch.y !== null) {
+                        nextY = motionBatch.y;
+                        motion.jumpOffset = motionBatch.y - ground.sampleHeight(nextX, nextZ);
+                    }
+                    if (movement?.beforeCommit !== undefined) {
+                        const frame = {
+                            entityId: playerId,
+                            current: player.position,
+                            next: [nextX, nextY, nextZ],
+                            dt: rawDt,
+                        };
+                        const replacement = movement.beforeCommit(frame);
+                        if (replacement !== undefined) {
+                            nextX = replacement[0];
+                            nextY = replacement[1];
+                            nextZ = replacement[2];
+                        }
+                    }
+                    ctx.scene.entity.setPose(playerId, {
+                        position: [nextX, nextY, nextZ],
+                        rotationY: intent.moving
+                            ? Math.atan2(motion.horizontalVelocityX, motion.horizontalVelocityZ)
+                            : player.rotationY,
+                        dt: rawDt,
+                    });
+                }
+            }
+            if (autoPickupRadius !== null) {
+                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);
+                }
             }
             playable.loop.onTick(ctx, gameDt);
             if (tracker.wasPressed("tabTarget")) {
@@ -210,10 +520,27 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 else
                     ctx.scene.entity.setTarget(playerId, null);
             }
+            if (pingCommand !== undefined && tracker.wasPressed("ping")) {
+                const hit = pointerService.worldHit();
+                if (hit !== null && ctx.game.commands.has(pingCommand)) {
+                    ctx.game.commands.run(pingCommand, {
+                        point: hit.point,
+                        entity: hit.entity,
+                        object: hit.object,
+                        normal: hit.normal,
+                    });
+                }
+            }
+            const aimOverride = pointerAim ? pointerAimFor(ctx, pointerService) : undefined;
+            const commandAim = aimOverride ?? { yaw: yawRef.current, pitch: pitchRef.current };
+            const nowMs = performance.now();
             for (const action of Object.keys(playable.game.input ?? {})) {
-                if (!tracker.wasPressed(action))
+                const pressed = tracker.wasPressed(action);
+                if (action === "ping" && pingCommand !== undefined)
                     continue;
                 if (action === "interact") {
+                    if (!pressed)
+                        continue;
                     const prompts = playable.prompts?.(ctx);
                     const focus = prompts === undefined ? null : ctx.scene.entity.get(playerId);
                     if (prompts !== undefined && focus !== null) {
@@ -224,15 +551,16 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                     }
                     continue;
                 }
-                const command = resolveActionCommand(action, (name) => ctx.game.commands.has(name), RESERVED_INPUT_ACTIONS);
-                if (command !== null)
-                    ctx.game.commands.run(command, {});
+                if (!shouldFireBoundAction(tracker, action, playable.game.input, repeatFiredAtRef.current, nowMs))
+                    continue;
+                repeatFiredAtRef.current.set(action, nowMs);
+                dispatchBoundAction(ctx, action, yawRef.current, pitchRef.current, commandAim);
             }
             if (hotbarId !== null) {
                 for (const { action, slot } of slotActions) {
                     if (!tracker.wasPressed(action))
                         continue;
-                    const result = executeHotbarSlot(ctx, hotbarId, slot, yawRef.current, pitchRef.current);
+                    const result = executeHotbarSlot(ctx, playerId, hotbarId, slot, yawRef.current, pitchRef.current, aimOverride);
                     if (!result.ok)
                         console.warn(`[jgengine:item-use] ${result.error}`);
                 }
@@ -245,7 +573,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                         ? preferred
                         : slots.findIndex((stack) => stack !== null);
                     if (slot >= 0) {
-                        const result = executeHotbarSlot(ctx, hotbarId, slot, yawRef.current, pitchRef.current);
+                        const result = executeHotbarSlot(ctx, playerId, hotbarId, slot, yawRef.current, pitchRef.current, aimOverride);
                         if (!result.ok)
                             console.warn(`[jgengine:item-use] ${result.error}`);
                     }
@@ -272,9 +600,52 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 onRuntimeError(error, "tick");
             }
         }
+        devtools.frame.record({ frameMs: rawDt * 1000, simMs: performance.now() - simStart });
     }, GAME_SIM_FRAME_PRIORITY);
     return null;
 }
+function HudOnlyDriver({ ctx, playable, tracker, onRuntimeError, }) {
+    const hasReportedTickError = useRef(false);
+    const repeatFiredAtRef = useRef(new Map());
+    const lastFrameRef = useRef(null);
+    const inputActions = useMemo(() => Object.keys(playable.game.input ?? {}), [playable]);
+    useEffect(() => {
+        let frameId;
+        const tick = (now) => {
+            frameId = requestAnimationFrame(tick);
+            const last = lastFrameRef.current;
+            lastFrameRef.current = now;
+            if (last === null)
+                return;
+            const rawDt = (now - last) / 1000;
+            const simStart = performance.now();
+            try {
+                const dt = Math.min(rawDt, 0.05);
+                const gameDt = ctx.time.advance(dt);
+                ctx.input.publish(heldActionsFor(tracker, inputActions));
+                playable.loop.onTick(ctx, gameDt);
+                const nowMs = performance.now();
+                for (const action of inputActions) {
+                    if (!shouldFireBoundAction(tracker, action, playable.game.input, repeatFiredAtRef.current, nowMs))
+                        continue;
+                    repeatFiredAtRef.current.set(action, nowMs);
+                    dispatchBoundAction(ctx, action, 0, 0, { yaw: 0, pitch: 0 });
+                }
+                tracker.endFrame();
+            }
+            catch (error) {
+                if (!hasReportedTickError.current) {
+                    hasReportedTickError.current = true;
+                    onRuntimeError(error, "tick");
+                }
+            }
+            devtools.frame.record({ frameMs: rawDt * 1000, simMs: performance.now() - simStart });
+        };
+        frameId = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frameId);
+    }, [ctx, playable, tracker, onRuntimeError, inputActions]);
+    return null;
+}
 class GameUiErrorBoundary extends Component {
     state = { failed: false };
     static getDerivedStateFromError() {
@@ -295,7 +666,10 @@ function DiagnosticOverlay({ diagnostics }) {
     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] }));
 }
-export function GamePlayerShell({ playable, multiplayer = null, }) {
+export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null, }) {
+    const multiplayer = useMemo(() => (rawMultiplayer === null ? null : withDevtoolsLatency(rawMultiplayer)), [rawMultiplayer]);
+    const devtoolsEnabled = playable.devtools !== false;
+    const [devtoolsOpen, setDevtoolsOpen] = useState(false);
     const [ctx, setCtx] = useState(null);
     const [diagnostics, setDiagnostics] = useState([]);
     const [remotePlayers, setRemotePlayers] = useState([]);
@@ -306,7 +680,22 @@ export function GamePlayerShell({ playable, multiplayer = null, }) {
     const cameraDraggingRef = useRef(false);
     const primaryClickRef = useRef(false);
     const pointerDownRef = useRef(null);
-    const tracker = useMemo(() => createActionStateTracker(toActionStateBindingMap(playable.game.input ?? {})), [playable]);
+    const marqueeStartRef = useRef(null);
+    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 touchScheme = useMemo(() => deriveTouchScheme(playable.game.input, {
+        reserved: RESERVED_INPUT_ACTIONS,
+        firstPerson: resolveRigKind(playable.camera) === "first",
+        config: playable.touch,
+    }), [playable]);
+    const { coarsePointer } = 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]);
     const userId = multiplayer?.userId ?? DEV_USER_ID;
     const reportRuntimeError = (error, phase) => {
         const diagnostic = logRuntimeError(error, phase);
@@ -381,6 +770,33 @@ export function GamePlayerShell({ playable, multiplayer = null, }) {
                 if (remoteUnsub !== undefined)
                     cleanups.push(remoteUnsub);
             }
+            const chatSync = multiplayer.backend.chatSyncFor?.(joined.serverId);
+            if (chatSync !== undefined) {
+                const globalChannelIds = new Set(ctx.game.chat
+                    .channels()
+                    .filter((channel) => channel.kind === "global")
+                    .map((channel) => channel.id));
+                const seenRemoteChat = new Set();
+                cleanups.push(ctx.game.events.subscribe("chat.message", (event) => {
+                    if (event.fromUserId !== multiplayer.userId)
+                        return;
+                    if (!globalChannelIds.has(event.channelId))
+                        return;
+                    void chatSync.send(event.channelId, event.body).catch(() => undefined);
+                }));
+                for (const channelId of globalChannelIds) {
+                    cleanups.push(chatSync.subscribe(channelId, (messages) => {
+                        for (const message of messages) {
+                            if (message.fromUserId === multiplayer.userId)
+                                continue;
+                            if (seenRemoteChat.has(message.id))
+                                continue;
+                            seenRemoteChat.add(message.id);
+                            ctx.game.chat.send(message.fromUserId, message.channelId, message.body);
+                        }
+                    }));
+                }
+            }
         })
             .catch(() => undefined);
         return () => {
@@ -398,39 +814,199 @@ export function GamePlayerShell({ playable, multiplayer = null, }) {
     useEffect(() => {
         wrapperRef.current?.focus();
     }, [ctx]);
+    useSyncExternalStore(ctx?.subscribe ?? (() => () => undefined), ctx?.version ?? (() => 0), ctx?.version ?? (() => 0));
     if (ctx === null)
         return _jsx("div", { className: "h-full w-full bg-neutral-950" });
     const GameUI = playable.GameUI;
     const WorldOverlay = playable.WorldOverlay;
-    const firstPerson = playable.camera?.perspective === "first";
-    const showReticle = firstPerson && playable.camera?.firstPerson?.reticle !== false;
+    const controlledEntityId = ctx.player.possession.active(userId);
+    const cameraConfig = playable.camera?.followEntityId !== undefined
+        ? playable.camera
+        : { ...playable.camera, followEntityId: controlledEntityId };
+    const rigKind = resolveRigKind(cameraConfig);
+    if (rigKind === "none" || playable.presentation === "hud") {
+        const GameUI = playable.GameUI;
+        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);
+                    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 })] }));
+    }
+    const firstPerson = rigKind === "first";
+    const showReticle = (firstPerson && playable.camera?.firstPerson?.reticle !== false) || rigKind === "shoulder";
+    const rtsPanKeysEnabled = !rtsPanKeysConflict(playable.game.input);
     const worldBars = playable.worldHealthBars;
     const barsStatId = worldBars === undefined || worldBars === false
         ? null
         : worldBars === true
             ? "health"
             : worldBars.statId ?? "health";
+    const barsRoles = worldBars === undefined || worldBars === true || worldBars === false ? undefined : worldBars.roles;
+    const resolveEntityRole = (entity) => playable.content.entityById?.(entity.name)?.role;
+    const pointer = playable.pointer;
+    const pointerUsesLeft = pointer !== undefined && (pointer.select === true || pointer.moveCommand !== undefined);
+    const selectFilter = pointer?.selectFilter;
+    const worldSky = resolveWorldSky(playable.game.world);
+    const world = playable.game.world;
+    const AutoEnvironment = playable.environment ??
+        (world?.kind === "environment"
+            ? () => _jsx(EnvironmentScene, { feature: world })
+            : world?.kind === "biomes" || world?.kind === "voxel" || world?.kind === "plots" || world?.kind === "tilemap"
+                ? () => _jsx(GridWorldScene, { feature: world })
+                : undefined);
+    const backdrop = playable.backdrop;
+    const backdropSky = backdrop?.sky !== undefined ? resolveSkyDescriptor(backdrop.sky) : undefined;
+    const effectiveSky = backdropSky ?? worldSky;
+    const backgroundColor = backdrop?.background ?? (effectiveSky === undefined ? DEFAULT_BACKGROUND_COLOR : undefined);
+    const lighting = playable.lighting;
+    const localXY = (event) => {
+        const rect = wrapperRef.current?.getBoundingClientRect();
+        return rect === undefined
+            ? { x: event.clientX, y: event.clientY }
+            : { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    };
+    const commitSelection = (ids) => {
+        selection.replace(ids);
+        setSelectedIds(new Set(ids));
+    };
+    const finishMarquee = (rect) => {
+        const candidates = [];
+        for (const entity of ctx.scene.entity.list()) {
+            if (selectFilter !== undefined && !selectFilter(entity.id))
+                continue;
+            const screen = pointerService.screenOf(entity.position);
+            if (screen !== null)
+                candidates.push({ id: entity.id, x: screen.x, y: screen.y });
+        }
+        commitSelection(selectWithinRect(candidates, rect));
+    };
+    const handlePointerDown = (event) => {
+        wrapperRef.current?.focus();
+        audioEngine.resume();
+        if (contextMenu !== null)
+            setContextMenu(null);
+        if (event.button === 0) {
+            const point = localXY(event);
+            pointerDownRef.current = point;
+            if (pointer?.select === true)
+                marqueeStartRef.current = point;
+        }
+    };
+    const handlePointerMove = (event) => {
+        if (pointer?.select !== true)
+            return;
+        const start = marqueeStartRef.current;
+        if (start === null || (event.buttons & 1) === 0)
+            return;
+        const point = localXY(event);
+        setMarquee(screenRect(start.x, start.y, point.x, point.y));
+    };
+    const handlePointerUp = (event) => {
+        if (event.button !== 0 || pointerDownRef.current === null)
+            return;
+        const start = pointerDownRef.current;
+        pointerDownRef.current = null;
+        marqueeStartRef.current = null;
+        const end = localXY(event);
+        const rect = screenRect(start.x, start.y, end.x, end.y);
+        const wasMarquee = marquee !== null && isMarquee(rect, PRIMARY_CLICK_MOVE_THRESHOLD_PX);
+        setMarquee(null);
+        if (pointer?.select === true && wasMarquee) {
+            finishMarquee(rect);
+            return;
+        }
+        if (cameraDraggingRef.current)
+            return;
+        if (pointer?.grabWorldItems === true) {
+            const hit = pointerService.worldHit();
+            const itemInstanceId = hit?.entity ?? null;
+            const record = itemInstanceId === null ? null : ctx.scene.worldItem.get(itemInstanceId);
+            if (record !== null && itemInstanceId !== null) {
+                const itemEntity = ctx.scene.entity.get(itemInstanceId);
+                const localPlayer = ctx.scene.entity.get(ctx.player.userId);
+                const pickupRadius = playable.worldItem?.pickupRadius ?? DEFAULT_PICKUP_RADIUS;
+                const withinRadius = itemEntity !== null &&
+                    localPlayer !== null &&
+                    Math.hypot(localPlayer.position[0] - itemEntity.position[0], localPlayer.position[1] - itemEntity.position[1], localPlayer.position[2] - itemEntity.position[2]) <= pickupRadius;
+                if (withinRadius) {
+                    ctx.scene.worldItem.pickup(itemInstanceId, ctx.player.userId);
+                    return;
+                }
+            }
+        }
+        if (pointer?.select === true) {
+            const hit = pointerService.worldHit();
+            if (hit !== null && hit.entity !== null && (selectFilter === undefined || selectFilter(hit.entity))) {
+                commitSelection([hit.entity]);
+            }
+            else {
+                commitSelection([]);
+            }
+            return;
+        }
+        if (pointer?.moveCommand !== undefined) {
+            const hit = pointerService.worldHit();
+            if (hit !== null && ctx.game.commands.has(pointer.moveCommand)) {
+                ctx.game.commands.run(pointer.moveCommand, { point: hit.point, entity: hit.entity, object: hit.object });
+            }
+            return;
+        }
+        const moved = (end.x - start.x) ** 2 + (end.y - start.y) ** 2;
+        if (moved <= PRIMARY_CLICK_MOVE_THRESHOLD_PX * PRIMARY_CLICK_MOVE_THRESHOLD_PX)
+            primaryClickRef.current = true;
+    };
+    const handleContextMenu = (event) => {
+        if (pointer === undefined)
+            return;
+        event.preventDefault();
+        const hit = pointerService.worldHit();
+        if (hit === null)
+            return;
+        if (pointer.contextMenu === true && (hit.entity !== null || hit.object !== null)) {
+            const menu = pointerContextMenu(ctx, playable, hit);
+            if (menu !== null) {
+                const point = localXY(event);
+                setContextMenu({ menu, x: point.x, y: point.y });
+                return;
+            }
+        }
+        if (pointer.select === true && pointer.orderCommand !== undefined && selection.size() > 0) {
+            if (ctx.game.commands.has(pointer.orderCommand)) {
+                ctx.game.commands.run(pointer.orderCommand, { selection: selection.list(), point: hit.point });
+            }
+            return;
+        }
+        if (pointer.secondaryCommand !== undefined && ctx.game.commands.has(pointer.secondaryCommand)) {
+            const aim = (pointer.aim === true ? pointerAimFor(ctx, pointerService) : undefined) ?? {
+                yaw: yawRef.current,
+                pitch: pitchRef.current,
+            };
+            ctx.game.commands.run(pointer.secondaryCommand, { point: hit.point, entity: hit.entity, object: hit.object, aim });
+        }
+    };
+    const handleVerbPick = (verb) => {
+        const state = contextMenu;
+        setContextMenu(null);
+        if (state !== null && ctx.game.commands.has(verb.command)) {
+            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 === "Tab" || event.code === "Space")
+            if (event.code === "F2" && devtoolsEnabled) {
                 event.preventDefault();
-            tracker.handleDown(event.code);
-        }, onKeyUp: (event) => tracker.handleUp(event.code), onBlur: () => tracker.reset(), onPointerDown: (event) => {
-            wrapperRef.current?.focus();
-            if (event.button === 0) {
-                pointerDownRef.current = { x: event.clientX, y: event.clientY };
-            }
-        }, onPointerUp: (event) => {
-            if (event.button !== 0 || pointerDownRef.current === null)
+                document.exitPointerLock?.();
+                setDevtoolsOpen((current) => !current);
                 return;
-            const start = pointerDownRef.current;
-            pointerDownRef.current = null;
-            const dx = event.clientX - start.x;
-            const dy = event.clientY - start.y;
-            const moved = dx * dx + dy * dy;
-            if (!cameraDraggingRef.current && moved <= PRIMARY_CLICK_MOVE_THRESHOLD_PX * PRIMARY_CLICK_MOVE_THRESHOLD_PX) {
-                primaryClickRef.current = true;
             }
-        }, onWheel: (event) => {
+            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();
@@ -440,7 +1016,13 @@ export function GamePlayerShell({ playable, multiplayer = null, }) {
             else if (event.deltaY > 0 && ctx.game.commands.has("ui.hotbarScrollPrev")) {
                 ctx.game.commands.run("ui.hotbarScrollPrev", {});
             }
-        }, children: [_jsxs(Canvas, { camera: { fov: 55, near: 0.1, far: 300 }, children: [_jsx("color", { attach: "background", args: ["#14161b"] }), _jsx("ambientLight", { intensity: 0.55 }), _jsx("directionalLight", { position: [10, 16, 6], intensity: 1.3 }), _jsxs(GameProvider, { context: ctx, children: [_jsx(WorldView, { entitySprites: playable.entitySprites, entityModels: playable.entityModels, objectModels: playable.objectModels, environment: playable.environment, assets: playable.game.assets, renderEntity: playable.renderEntity }), WorldOverlay !== undefined ? _jsx(WorldOverlay, {}) : null, barsStatId !== null ? _jsx(WorldEntityBars, { statId: barsStatId }) : null, _jsx(WorldFloatText, {}), _jsx(ProjectileTracers, {}), firstPerson ? (_jsx(GameFirstPersonCamera, { yawRef: yawRef, pitchRef: pitchRef, config: playable.camera?.firstPerson, followEntityId: playable.camera?.followEntityId })) : (_jsx(GameOrbitCamera, { yawRef: yawRef, pitchRef: pitchRef, config: playable.camera, followEntityId: playable.camera?.followEntityId, onCameraFollow: playable.camera?.onCameraFollow, onDragChange: (dragging) => {
+        }, 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(RemotePlayers, { rows: remotePlayers }), _jsx(FrameDriver, { ctx: ctx, playable: playable, tracker: tracker, yawRef: yawRef, pitchRef: pitchRef, primaryClickRef: primaryClickRef, onRuntimeError: reportRuntimeError, multiplayer: multiplayer, serverIdRef: serverIdRef })] }), _jsx(GameUiErrorBoundary, { onRuntimeError: reportRuntimeError, children: _jsx(GameProvider, { context: ctx, children: _jsx(GameUI, {}) }) }), showReticle ? _jsx(Reticle, {}) : null, _jsx(DiagnosticOverlay, { diagnostics: diagnostics })] }));
+                                } }), _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 })] }));
 }