@jgengine/shell 0.9.0 → 0.10.0

package/dist/GamePlayerShell.js

@@ -1,37 +1,45 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Canvas, useFrame, useLoader } from "@react-three/fiber";
-import { Component, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { Component, Suspense, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import * as THREE from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js";
 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 { aimToPoint } from "@jgengine/core/input/pointer";
+import { eyeHeightFromColliders } from "@jgengine/core/combat/shotOrigin";
 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 { stepPlayerMovement, resolvePlayerMovementTuning } from "@jgengine/core/movement/playerMovement";
 import { createGameContext } from "@jgengine/core/runtime/gameContext";
-import { applyHorizontalImpulses } from "@jgengine/core/runtime/motionIntents";
-import { groundFieldFor } from "@jgengine/core/world/terrain";
+import { isServerAuthoritative } from "@jgengine/core/runtime/adapter";
+import { attachWorldSync } from "./worldSync.js";
+import { localCommandSink, resolveCommandSink } from "./commandSink.js";
+import { inputFramesEqual, resolveInputSink } from "./inputSink.js";
 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 { GameViewportProvider } from "@jgengine/react/gameViewport";
+import { RotateDeviceScreen } from "@jgengine/react/rotateDevice";
 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 { orientationGateActive, orientationHintActive, resolveOrientationRequirement, } from "@jgengine/core/ui/orientation";
+import { resolveOneShotClip } from "@jgengine/core/game/modelAnimation";
 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 { PostProcessing } from "./postfx/PostProcessing.js";
 import { CollisionDebugWorld } from "./devtools/CollisionDebugWorld.js";
 import { collisionDebug } from "./devtools/collisionDebug.js";
 import { DevtoolsOverlay, DevtoolsRendererProbe, withDevtoolsLatency } from "./devtools/DevtoolsOverlay.js";
@@ -90,6 +98,10 @@ const RESERVED_INPUT_ACTIONS = new Set([
     "useAbility",
     "interact",
 ]);
+/** No action names are reserved when no camera rig is active (hud/none presentation): games may bind `turnLeft`/`interact`/etc. as their own. */
+const EMPTY_RESERVED = new Set();
+/** Empty action list — published while the orientation gate is up to suppress all held input without touching the tracker. */
+const NO_ACTIONS = [];
 const SHELL_MOVEMENT_ACTIONS = ["moveForward", "moveBack", "moveLeft", "moveRight", "jump"];
 function shellDrivesPlayerPose(input) {
     const bound = input ?? {};
@@ -122,9 +134,12 @@ 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);
+    const shooter = ctx.scene.entity.get(ctx.player.possession.active(ctx.player.userId)) ??
+        ctx.scene.entity.get(ctx.player.userId);
+    if (shooter === null)
+        return undefined;
+    const eye = eyeHeightFromColliders(ctx.scene.entity.collidersOf(shooter.id));
+    return aimToPoint([shooter.position[0], shooter.position[1] + eye, shooter.position[2]], hit.point);
 }
 function pointerContextMenu(ctx, playable, hit) {
     if (hit.entity !== null) {
@@ -153,74 +168,35 @@ export function shouldFireBoundAction(tracker, action, input, repeatFiredAt, 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);
+export function dispatchBoundAction(ctx, action, yaw, pitch, aim, reserved = RESERVED_INPUT_ACTIONS, sink = localCommandSink(ctx)) {
+    const command = resolveActionCommand(action, (name) => ctx.game.commands.has(name), reserved);
     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;
+        sink.run(command, { yaw, pitch, aim });
 }
+export { applyMotionImpulses } from "@jgengine/core/runtime/motionIntents";
+export { nearbyObstacles } from "@jgengine/core/movement/movementModel";
+export { resolvePhysicsTuning } from "@jgengine/core/movement/playerMovement";
+export { hasEnvironmentTerrain } from "@jgengine/core/world/terrain";
 /** 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 === undefined)
-        return undefined;
-    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 || (world.islands?.length ?? 0) > 0);
-}
 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 DirectionalShadowLight({ entry }) {
+    const size = entry.shadowCameraSize ?? 40;
+    return (_jsx("directionalLight", { position: [entry.position[0], entry.position[1], entry.position[2]], intensity: entry.intensity ?? 1.3, color: entry.color, castShadow: entry.castShadow ?? false, "shadow-mapSize-width": entry.shadowMapSize ?? 1024, "shadow-mapSize-height": entry.shadowMapSize ?? 1024, "shadow-camera-left": -size, "shadow-camera-right": size, "shadow-camera-top": size, "shadow-camera-bottom": -size, "shadow-camera-near": 0.5, "shadow-camera-far": Math.max(200, size * 6), "shadow-bias": entry.shadowBias ?? -0.0004, "shadow-normalBias": entry.shadowNormalBias ?? 0.02 }));
+}
 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)))] }));
+                ] })) : null, (lighting.directional ?? []).map((entry, index) => (_jsx(DirectionalShadowLight, { entry: entry }, index)))] }));
 }
 function BackdropFog({ fog }) {
     if (fog === undefined)
@@ -236,35 +212,193 @@ 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 }) }));
 }
+class ModelFallbackBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    render() {
+        return this.state.failed ? this.props.fallback : this.props.children;
+    }
+}
+function IsolatedEntityModel({ model, instanceId, fallback, }) {
+    return (_jsx(ModelFallbackBoundary, { fallback: fallback ?? null, children: _jsx(Suspense, { fallback: null, children: _jsx(EntityModel, { model: model, instanceId: instanceId }) }) }));
+}
+function BoneAttachment({ rig, model, slot, position, rotation, scale, }) {
+    const gltf = useLoader(GLTFLoader, model.url, (loader) => {
+        loader.setMeshoptDecoder(MeshoptDecoder);
+    });
+    const weaponScene = useMemo(() => cloneModelScene(gltf.scene), [gltf]);
+    const px = position?.[0] ?? 0;
+    const py = position?.[1] ?? 0;
+    const pz = position?.[2] ?? 0;
+    const rx = rotation?.[0] ?? 0;
+    const ry = rotation?.[1] ?? 0;
+    const rz = rotation?.[2] ?? 0;
+    const s = scale ?? 1;
+    useEffect(() => {
+        const bone = rig.getObjectByName(slot);
+        if (bone === undefined) {
+            if (typeof console !== "undefined") {
+                console.warn(`[jgengine] entityModels attachment: bone/slot "${slot}" not found on the rig`);
+            }
+            return;
+        }
+        weaponScene.position.set(px, py, pz);
+        weaponScene.rotation.set(rx, ry, rz);
+        weaponScene.scale.setScalar(s);
+        bone.add(weaponScene);
+        return () => {
+            bone.remove(weaponScene);
+        };
+    }, [rig, weaponScene, slot, px, py, pz, rx, ry, rz, s]);
+    useEffect(() => () => disposeClonedMaterials(weaponScene), [weaponScene]);
+    return null;
+}
+/** Resolves an entity model plus any bone attachments' models through the asset catalog, so `EntityModel` receives fully-resolved `ModelConfig`s. */
+function resolveEntityModel(value, assets, key) {
+    const model = resolveModel(value, assets, { seam: "entityModels", key });
+    if (model?.attachments === undefined)
+        return model;
+    return {
+        ...model,
+        attachments: model.attachments.map((attachment) => ({
+            ...attachment,
+            model: resolveModel(attachment.model, assets) ?? attachment.model,
+        })),
+    };
+}
 function EntityModel({ model, instanceId }) {
-    const gltf = useLoader(GLTFLoader, model.url);
+    const gltf = useLoader(GLTFLoader, model.url, (loader) => {
+        loader.setMeshoptDecoder(MeshoptDecoder);
+    });
     const ctx = useGameContext();
     const material = model.material;
-    const scale = model.scale ?? 1;
     const baseY = model.y ?? 0;
     const dims = model.dims;
-    const centered = (model.anchor ?? "center") === "center" && dims !== undefined;
-    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, { clone: false });
         return cloned;
     }, [gltf, material]);
+    const measured = useMemo(() => {
+        if (model.targetHeight === undefined)
+            return null;
+        const box = new THREE.Box3().setFromObject(scene);
+        const height = box.max.y - box.min.y;
+        if (!Number.isFinite(height) || height <= 0)
+            return null;
+        return {
+            normalize: model.targetHeight / height,
+            minY: box.min.y,
+            centerX: (box.min.x + box.max.x) / 2,
+            centerZ: (box.min.z + box.max.z) / 2,
+        };
+    }, [scene, model.targetHeight]);
+    const scale = (model.scale ?? 1) * (measured?.normalize ?? 1);
+    const centered = (model.anchor ?? "center") === "center" && dims !== undefined;
+    const position = measured !== null
+        ? [-scale * measured.centerX, baseY - scale * measured.minY, -scale * measured.centerZ]
+        : centered
+            ? [-scale * dims.center.x, baseY - scale * dims.minY, -scale * dims.center.z]
+            : [0, baseY, 0];
     useEffect(() => () => {
         disposeClonedMaterials(scene);
     }, [scene]);
     const animation = model.animation;
     const mixerRef = useRef(null);
     const animationPausedRef = useRef(false);
+    const stateActionsRef = useRef(null);
+    const states = animation?.states;
+    const oneShots = animation?.oneShots;
+    const oneShotPlayRef = useRef(null);
+    const activeOneShotRef = useRef(null);
     useEffect(() => {
         if (animation === undefined || gltf.animations.length === 0) {
             mixerRef.current = null;
+            stateActionsRef.current = null;
             return;
         }
         const mixer = new THREE.AnimationMixer(scene);
+        if (states !== undefined) {
+            const clipFor = (name) => THREE.AnimationClip.findByName(gltf.animations, name) ?? gltf.animations[0];
+            const actions = {
+                idle: mixer.clipAction(clipFor(states.idle)),
+                walk: mixer.clipAction(clipFor(states.walk)),
+                ...(states.run === undefined ? {} : { run: mixer.clipAction(clipFor(states.run)) }),
+            };
+            for (const action of Object.values(actions)) {
+                action.setLoop(THREE.LoopRepeat, Infinity);
+                action.timeScale = animation.timeScale ?? 1;
+                action.enabled = true;
+            }
+            actions.idle.play();
+            mixer.update(0);
+            mixerRef.current = mixer;
+            stateActionsRef.current = { actions, active: "idle", lastPos: null, smoothedSpeed: 0 };
+            animationPausedRef.current = false;
+            let onOneShotFinished = null;
+            if (oneShots !== undefined) {
+                const clipNames = new Set();
+                for (const spec of Object.values(oneShots)) {
+                    if (typeof spec === "string")
+                        clipNames.add(spec);
+                    else
+                        for (const name of spec)
+                            clipNames.add(name);
+                }
+                const oneShotActions = new Map();
+                for (const name of clipNames) {
+                    const found = THREE.AnimationClip.findByName(gltf.animations, name);
+                    if (found === null)
+                        continue;
+                    const oneShotAction = mixer.clipAction(found);
+                    oneShotAction.setLoop(THREE.LoopOnce, 1);
+                    oneShotAction.enabled = true;
+                    oneShotActions.set(name, oneShotAction);
+                }
+                onOneShotFinished = ({ action }) => {
+                    const active = activeOneShotRef.current;
+                    if (active === null || action !== active.action || active.isDeath)
+                        return;
+                    const machine = stateActionsRef.current;
+                    const back = machine?.actions[machine.active];
+                    action.fadeOut(0.15);
+                    if (back !== undefined)
+                        back.reset().fadeIn(0.15).play();
+                    activeOneShotRef.current = null;
+                };
+                mixer.addEventListener("finished", onOneShotFinished);
+                oneShotPlayRef.current = (event) => {
+                    const active = activeOneShotRef.current;
+                    if (active !== null && active.isDeath)
+                        return;
+                    const clipName = resolveOneShotClip(oneShots, event, Math.random());
+                    if (clipName === null)
+                        return;
+                    const oneShotAction = oneShotActions.get(clipName);
+                    if (oneShotAction === undefined)
+                        return;
+                    const machine = stateActionsRef.current;
+                    machine?.actions[machine.active]?.fadeOut(0.1);
+                    if (active !== null && active.action !== oneShotAction)
+                        active.action.stop();
+                    oneShotAction.clampWhenFinished = event === "death";
+                    oneShotAction.reset().fadeIn(0.1).play();
+                    activeOneShotRef.current = { action: oneShotAction, isDeath: event === "death" };
+                };
+            }
+            return () => {
+                if (onOneShotFinished !== null)
+                    mixer.removeEventListener("finished", onOneShotFinished);
+                oneShotPlayRef.current = null;
+                activeOneShotRef.current = null;
+                mixer.stopAllAction();
+                mixerRef.current = null;
+                stateActionsRef.current = null;
+            };
+        }
         const clip = (animation.clip !== undefined ? THREE.AnimationClip.findByName(gltf.animations, animation.clip) : undefined) ??
             gltf.animations[0];
         const action = mixer.clipAction(clip);
@@ -283,7 +417,39 @@ function EntityModel({ model, instanceId }) {
             mixer.stopAllAction();
             mixerRef.current = null;
         };
-    }, [scene, gltf, animation?.clip, animation?.loop, animation?.timeScale, animation?.paused, animation?.time]);
+    }, [
+        scene,
+        gltf,
+        animation?.clip,
+        animation?.loop,
+        animation?.timeScale,
+        animation?.paused,
+        animation?.time,
+        states,
+        oneShots,
+    ]);
+    useEffect(() => {
+        if (instanceId === undefined || oneShots === undefined)
+            return;
+        const fire = (event) => oneShotPlayRef.current?.(event);
+        const offAnimation = ctx.game.events.on("entity.animation", (event) => {
+            if (event.instanceId === instanceId)
+                fire(event.event);
+        });
+        const offHit = ctx.game.events.on("combat.hitReaction", (event) => {
+            if (event.instanceId === instanceId)
+                fire("hit");
+        });
+        const offDied = ctx.game.events.on("entity.died", (event) => {
+            if (event.instanceId === instanceId)
+                fire("death");
+        });
+        return () => {
+            offAnimation();
+            offHit();
+            offDied();
+        };
+    }, [ctx, instanceId, oneShots]);
     const paintCanvasRef = useRef(null);
     const paintDrawnCountRef = useRef(0);
     const paintVersionRef = useRef(-1);
@@ -295,6 +461,38 @@ function EntityModel({ model, instanceId }) {
         materialCacheRef.current = null;
     }, [scene]);
     useFrame((_state, delta) => {
+        const stateMachine = stateActionsRef.current;
+        if (stateMachine !== null && states !== undefined && instanceId !== undefined && delta > 0) {
+            const entity = ctx.scene.entity.get(instanceId);
+            if (entity !== null) {
+                const [x, , z] = entity.position;
+                if (stateMachine.lastPos !== null) {
+                    const instantSpeed = Math.hypot(x - stateMachine.lastPos[0], z - stateMachine.lastPos[2]) / delta;
+                    stateMachine.smoothedSpeed +=
+                        (instantSpeed - stateMachine.smoothedSpeed) * Math.min(1, delta * 12);
+                }
+                stateMachine.lastPos = [x, entity.position[1], z];
+                const walkSpeed = states.walkSpeed ?? 0.5;
+                const runSpeed = states.runSpeed ?? 6;
+                const next = stateMachine.smoothedSpeed < walkSpeed
+                    ? "idle"
+                    : stateMachine.actions.run !== undefined && stateMachine.smoothedSpeed >= runSpeed
+                        ? "run"
+                        : "walk";
+                if (next !== stateMachine.active) {
+                    if (activeOneShotRef.current === null) {
+                        const fade = states.fadeSec ?? 0.2;
+                        const from = stateMachine.actions[stateMachine.active];
+                        const to = stateMachine.actions[next];
+                        if (from !== undefined && to !== undefined) {
+                            to.reset().fadeIn(fade).play();
+                            from.fadeOut(fade);
+                        }
+                    }
+                    stateMachine.active = next;
+                }
+            }
+        }
         if (mixerRef.current !== null && !animationPausedRef.current)
             mixerRef.current.update(delta);
         if (instanceId === undefined)
@@ -319,7 +517,7 @@ function EntityModel({ model, instanceId }) {
         }
         paintDrawnCountRef.current = syncPaintCanvas(paintCanvasRef.current, cache.seedColor, strokes, paintDrawnCountRef.current);
     });
-    return _jsx("primitive", { object: scene, position: position, scale: [scale, scale, scale] });
+    return (_jsxs(_Fragment, { children: [_jsx("primitive", { object: scene, position: position, scale: [scale, scale, scale] }), (model.attachments ?? []).map((attachment, index) => typeof attachment.model === "string" ? null : (_jsx(BoneAttachment, { rig: scene, model: attachment.model, slot: attachment.slot, position: attachment.position, rotation: attachment.rotation, scale: attachment.scale }, `${attachment.slot}-${index}`)))] }));
 }
 function EntityMarker({ entity, custom, model, sprite, isLocal, targeted, selected, onSelect, }) {
     const groupRef = useRef(null);
@@ -346,7 +544,7 @@ function EntityMarker({ entity, custom, model, sprite, isLocal, targeted, select
             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] }));
+        }, 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(IsolatedEntityModel, { model: model, instanceId: entityId, fallback: sprite !== undefined ? _jsx(EntitySprite, { sprite: sprite }) : undefined })) : 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);
@@ -366,7 +564,7 @@ function ObjectMarker({ object, custom, model, style, }) {
         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 })] })) }));
+    return (_jsx("group", { ref: groupRef, userData: { [POINTER_OBJECT_KEY]: instanceId }, children: custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(IsolatedEntityModel, { 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(() => {
@@ -404,7 +602,7 @@ function WorldEnvironment({ environment: Environment }) {
         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, }) {
+function WorldActors({ entitySprites, entityModels, objectModels, objectStyles, assets, renderEntity, renderObject, selectedIds, hideLocalActor, }) {
     const ctx = useGameContext();
     const entities = useSceneEntities();
     const objects = useSceneObjects();
@@ -417,10 +615,8 @@ function WorldActors({ entitySprites, entityModels, objectModels, objectStyles,
     };
     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, {
-                    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) => {
+                .filter((entity) => !(hideLocalActor && entity.id === controlledId))
+                .map((entity) => (_jsx(EntityMarker, { entity: entity, custom: renderEntity?.(entity), model: resolveEntityModel(entityModels?.[entity.name], assets, 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,
@@ -428,36 +624,25 @@ function WorldActors({ entitySprites, entityModels, objectModels, objectStyles,
                 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 WorldView({ entitySprites, entityModels, objectModels, objectStyles, environment, assets, renderEntity, renderObject, selectedIds, hideLocalActor, }) {
+    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, hideLocalActor: hideLocalActor })] }));
 }
 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, pointerAxisRef, onRuntimeError, multiplayer, serverIdRef, pointerService, pointerAim, pingCommand, poster, onPosterSettled, }) {
+function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef, pointerAxisRef, gateRef, 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() });
     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(() => ({
-        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 movementTuning = useMemo(() => resolvePlayerMovementTuning({
+        collision: playable.collision,
+        movement: playable.movement,
+        physics: playable.game.physics,
+        world: playable.game.world,
+    }), [playable]);
     const autoPickupRadius = useMemo(() => {
         const cfg = playable.worldItem?.autoPickup;
         if (cfg === undefined || cfg === false)
@@ -465,10 +650,24 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
         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 serverAuthoritative = useMemo(() => isServerAuthoritative(playable.game.multiplayer) && multiplayer !== null, [playable, multiplayer]);
+    const commandSink = useMemo(() => ({
+        run: (name, input) => resolveCommandSink(ctx, {
+            serverAuthoritative,
+            backend: multiplayer?.backend ?? null,
+            serverId: serverIdRef.current,
+        }).run(name, input),
+    }), [ctx, multiplayer, serverAuthoritative, serverIdRef]);
+    const inputSink = useMemo(() => ({
+        send: (frame) => resolveInputSink({
+            serverAuthoritative,
+            backend: multiplayer?.backend ?? null,
+            serverId: serverIdRef.current,
+        }).send(frame),
+    }), [multiplayer, serverAuthoritative, serverIdRef]);
+    const lastSentInputRef = useRef(null);
     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)
@@ -480,6 +679,21 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 return;
             }
         }
+        const sendInput = () => {
+            if (!serverAuthoritative)
+                return;
+            const frame = { held: ctx.input.held(), pointer: ctx.input.pointer() };
+            const last = lastSentInputRef.current;
+            if (last !== null && inputFramesEqual(last, frame))
+                return;
+            lastSentInputRef.current = frame;
+            inputSink.send(frame);
+        };
+        if (gateRef.current) {
+            ctx.input.publish(heldActionsFor(tracker, NO_ACTIONS));
+            sendInput();
+            return;
+        }
         const simStart = performance.now();
         try {
             let endPhase = devtools.profile.begin("time+input");
@@ -487,108 +701,19 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
             const gameDt = ctx.time.advance(dt);
             ctx.input.publish(heldActionsFor(tracker, inputActions));
             ctx.input.publishPointer(pointerAxisRef.current);
+            sendInput();
             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) {
+            if (player !== null && drivesPose && !serverAuthoritative) {
                 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") && (movement?.canSprint?.(ctx) ?? true);
-                keys.space = tracker.isDown("jump");
-                const intent = resolveMovementIntent(keys, true);
-                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);
-                    [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;
-                    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);
-                    [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;
-                    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,
-                            ctx,
-                        };
-                        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,
-                    });
-                }
+                stepPlayerMovement(ctx, ctx.player.userId, { held: ctx.input.held(), pointer: ctx.input.pointer() }, rawDt, movementTuning, yawRef.current);
                 endPhase();
             }
-            if (autoPickupRadius !== null) {
+            if (autoPickupRadius !== null && !serverAuthoritative) {
                 endPhase = devtools.profile.begin("pickup");
                 const self = ctx.scene.entity.get(playerId);
                 if (self !== null) {
@@ -598,9 +723,11 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 }
                 endPhase();
             }
-            devtools.profile.measure("onTick", () => {
-                playable.loop.onTick(ctx, gameDt);
-            });
+            if (!serverAuthoritative) {
+                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"))
@@ -617,7 +744,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
             if (pingCommand !== undefined && tracker.wasPressed("ping")) {
                 const hit = pointerService.worldHit();
                 if (hit !== null && ctx.game.commands.has(pingCommand)) {
-                    ctx.game.commands.run(pingCommand, {
+                    commandSink.run(pingCommand, {
                         point: hit.point,
                         entity: hit.entity,
                         object: hit.object,
@@ -632,7 +759,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 collisionDebug.setAimProbe({
                     from: aimFrom,
                     aim: commandAim,
-                    originPolicy: { kind: "muzzle" },
+                    originPolicy: { kind: "eye" },
                     maxDistance: 100,
                 });
             }
@@ -652,7 +779,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                     if (prompts !== undefined && focus !== null) {
                         const active = resolveActivePrompt({ x: focus.position[0], z: focus.position[2] }, prompts);
                         if (active !== null && active.prompt.invoke !== null) {
-                            ctx.game.commands.run(active.prompt.invoke.name, active.prompt.invoke.input);
+                            commandSink.run(active.prompt.invoke.name, active.prompt.invoke.input);
                         }
                     }
                     continue;
@@ -660,7 +787,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
                 if (!shouldFireBoundAction(tracker, action, playable.game.input, repeatFiredAtRef.current, nowMs))
                     continue;
                 repeatFiredAtRef.current.set(action, nowMs);
-                dispatchBoundAction(ctx, action, yawRef.current, pitchRef.current, commandAim);
+                dispatchBoundAction(ctx, action, yawRef.current, pitchRef.current, commandAim, RESERVED_INPUT_ACTIONS, commandSink);
             }
             if (hotbarId !== null) {
                 for (const { action, slot } of slotActions) {
@@ -713,7 +840,7 @@ function FrameDriver({ ctx, playable, tracker, yawRef, pitchRef, primaryClickRef
     }, GAME_SIM_FRAME_PRIORITY);
     return null;
 }
-function HudOnlyDriver({ ctx, playable, tracker, pointerAxisRef, onRuntimeError, }) {
+function HudOnlyDriver({ ctx, playable, tracker, pointerAxisRef, gateRef, onRuntimeError, }) {
     const hasReportedTickError = useRef(false);
     const repeatFiredAtRef = useRef(new Map());
     const lastFrameRef = useRef(null);
@@ -726,6 +853,10 @@ function HudOnlyDriver({ ctx, playable, tracker, pointerAxisRef, onRuntimeError,
             lastFrameRef.current = now;
             if (last === null)
                 return;
+            if (gateRef.current) {
+                ctx.input.publish(heldActionsFor(tracker, NO_ACTIONS));
+                return;
+            }
             const rawDt = (now - last) / 1000;
             const simStart = performance.now();
             try {
@@ -744,7 +875,7 @@ function HudOnlyDriver({ ctx, playable, tracker, pointerAxisRef, onRuntimeError,
                     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 });
+                    dispatchBoundAction(ctx, action, 0, 0, { yaw: 0, pitch: 0 }, EMPTY_RESERVED);
                 }
                 tracker.endFrame();
                 endPhase();
@@ -759,7 +890,7 @@ function HudOnlyDriver({ ctx, playable, tracker, pointerAxisRef, onRuntimeError,
         };
         frameId = requestAnimationFrame(tick);
         return () => cancelAnimationFrame(frameId);
-    }, [ctx, playable, tracker, pointerAxisRef, onRuntimeError, inputActions]);
+    }, [ctx, playable, tracker, pointerAxisRef, gateRef, onRuntimeError, inputActions]);
     return null;
 }
 class GameUiErrorBoundary extends Component {
@@ -864,21 +995,67 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
             pointerAxisRef.current = { ...state, active: false };
     };
     const touchScheme = useMemo(() => deriveTouchScheme(playable.game.input, {
-        reserved: RESERVED_INPUT_ACTIONS,
+        reserved: resolveRigKind(playable.camera) === "none" || playable.presentation === "hud"
+            ? EMPTY_RESERVED
+            : RESERVED_INPUT_ACTIONS,
         firstPerson: resolveRigKind(playable.camera) === "first",
         config: playable.touch,
     }), [playable]);
     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]);
+    const gateRef = useRef(false);
+    const orientationPlatform = coarsePointer ? "mobile" : "desktop";
+    const orientationRequirement = useMemo(() => resolveOrientationRequirement(playable.orientation, orientationPlatform), [playable, orientationPlatform]);
+    const liveOrientation = portrait ? "portrait" : "landscape";
+    const orientationGate = !poster && coarsePointer && orientationGateActive(orientationRequirement, liveOrientation);
+    const orientationHint = !poster && coarsePointer && orientationHintActive(orientationRequirement, liveOrientation);
+    gateRef.current = orientationGate;
+    const orientationGateEl = orientationGate ? (_jsx(RotateDeviceScreen, { requiredOrientation: orientationRequirement.required ?? "landscape", title: orientationRequirement.required === "portrait" ? "Turn your phone upright" : "Turn your phone sideways", description: `${playable.game.name} is built for ${orientationRequirement.required ?? "landscape"} play.` })) : orientationHint && orientationRequirement.preferred !== null ? (_jsx(OrientationHint, { wanted: orientationRequirement.preferred })) : null;
+    const audioEngine = useMemo(() => createAudioEngine({
+        sounds: playable.audio?.sounds,
+        buses: playable.audio?.buses,
+        music: playable.audio?.music,
+        musicBus: playable.audio?.musicBus,
+    }), [playable]);
     useEffect(() => () => audioEngine.dispose(), [audioEngine]);
     useEffect(() => {
         if (ctx === null)
             return;
-        return ctx.game.events.on("audio.play", ({ sound, at }) => {
+        const offPlay = ctx.game.events.on("audio.play", ({ sound, at }) => {
             audioEngine.playOneShot(sound, at === undefined ? undefined : { x: at[0], y: at[1], z: at[2] });
         });
+        const offMusic = ctx.game.events.on("audio.music", ({ theme, transpose }) => {
+            audioEngine.playMusic(theme, transpose === undefined ? undefined : { transpose });
+        });
+        const offResume = ctx.game.events.on("audio.resume", () => audioEngine.resume());
+        return () => {
+            offPlay();
+            offMusic();
+            offResume();
+        };
     }, [ctx, audioEngine]);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        document.documentElement.dataset.jgPresentation = playable.presentation ?? "3d";
+        return () => {
+            delete document.documentElement.dataset.jgPresentation;
+        };
+    }, [playable]);
+    useEffect(() => {
+        if (ctx === null || typeof document === "undefined")
+            return;
+        const hud = resolveRigKind(playable.camera) === "none" || playable.presentation === "hud";
+        if (!hud)
+            return;
+        const frame = requestAnimationFrame(() => {
+            document.documentElement.dataset.jgFrameReady = "1";
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            delete document.documentElement.dataset.jgFrameReady;
+        };
+    }, [ctx, playable]);
     const userId = multiplayer?.userId ?? DEV_USER_ID;
     const reportRuntimeError = (error, phase, componentStack) => {
         const diagnostic = logRuntimeError(error, phase, componentStack);
@@ -920,6 +1097,9 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
                 return;
             }
             serverIdRef.current = joined.serverId;
+            if (isServerAuthoritative(playable.game.multiplayer) && multiplayer.backend.feeds !== undefined) {
+                cleanups.push(attachWorldSync(multiplayer.backend.feeds, joined.serverId, ctx));
+            }
             cleanups.push(multiplayer.backend.presenceSync.subscribe(joined.serverId, (rows) => {
                 setRemotePlayers(rows.filter((row) => row.userId !== multiplayer.userId));
             }));
@@ -955,8 +1135,9 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
                     cleanups.push(remoteUnsub);
             }
             const chatSync = multiplayer.backend.chatSyncFor?.(joined.serverId);
-            if (chatSync !== undefined) {
-                const globalChannelIds = new Set(ctx.game.chat
+            if (chatSync !== undefined && ctx.game.chat !== undefined) {
+                const chat = ctx.game.chat;
+                const globalChannelIds = new Set(chat
                     .channels()
                     .filter((channel) => channel.kind === "global")
                     .map((channel) => channel.id));
@@ -976,7 +1157,7 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
                             if (seenRemoteChat.has(message.id))
                                 continue;
                             seenRemoteChat.add(message.id);
-                            ctx.game.chat.send(message.fromUserId, message.channelId, message.body);
+                            chat.send(message.fromUserId, message.channelId, message.body);
                         }
                     }));
                 }
@@ -994,7 +1175,7 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
                 void multiplayer.backend.transport.leaveServer({ serverId }).catch(() => undefined);
             }
         };
-    }, [ctx, multiplayer]);
+    }, [ctx, multiplayer, playable]);
     useEffect(() => {
         wrapperRef.current?.focus();
     }, [ctx]);
@@ -1010,7 +1191,7 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
     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) => {
+        return (_jsx("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();
                     f2HeldRef.current = true;
@@ -1035,7 +1216,7 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
             }, 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 })] }));
+            }, onPointerDown: () => audioEngine.resume(), onPointerMove: trackPointerAxis, onPointerLeave: deactivatePointerAxis, onPointerCancel: deactivatePointerAxis, children: _jsxs(GameViewportProvider, { platforms: playable.platforms, children: [_jsx(HudOnlyDriver, { ctx: ctx, playable: playable, tracker: tracker, pointerAxisRef: pointerAxisRef, gateRef: gateRef, onRuntimeError: reportRuntimeError }), !orientationGate && coarsePointer && touchScheme !== null && touchScheme.gestures !== null && playControlsActive(ctx) ? (_jsx(TouchPlaySurface, { scheme: touchScheme, sink: touchSink, yawRef: yawRef, pitchRef: pitchRef, maxPitch: 0, onPrimaryTap: () => undefined })) : null, _jsx(GameUiErrorBoundary, { onRuntimeError: reportRuntimeError, children: _jsx(GameProvider, { context: ctx, children: _jsx(HudViewportProvider, { platforms: playable.platforms, config: playable.hudFit, userScale: graphics.uiScale, children: orientationGate ? null : _jsx(GameUI, {}) }) }) }), orientationGateEl, 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";
@@ -1047,6 +1228,9 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
             ? "health"
             : worldBars.statId ?? "health";
     const barsRoles = worldBars === undefined || worldBars === true || worldBars === false ? undefined : worldBars.roles;
+    const barsMaxDistance = worldBars === undefined || worldBars === true || worldBars === false
+        ? undefined
+        : worldBars.maxDistance;
     const resolveEntityRole = (entity) => playable.content.entityById?.(entity.name)?.role;
     const pointer = playable.pointer;
     const pointerUsesLeft = pointer !== undefined && (pointer.select === true || pointer.moveCommand !== undefined);
@@ -1086,13 +1270,15 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
         }
         commitSelection(selectWithinRect(candidates, rect));
     };
+    /** DOM UI (menus, HUD buttons) sits in the same wrapper as the canvas — only canvas-targeted clicks are world input. */
+    const isWorldPointerTarget = (event) => event.target instanceof HTMLCanvasElement;
     const handlePointerDown = (event) => {
         wrapperRef.current?.focus();
         trackPointerAxis(event);
         audioEngine.resume();
         if (contextMenu !== null)
             setContextMenu(null);
-        if (event.button === 0) {
+        if (event.button === 0 && isWorldPointerTarget(event)) {
             const point = localXY(event);
             pointerDownRef.current = point;
             if (pointer?.select === true)
@@ -1166,6 +1352,8 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
     const handleContextMenu = (event) => {
         if (pointer === undefined)
             return;
+        if (!isWorldPointerTarget(event))
+            return;
         event.preventDefault();
         const hit = pointerService.worldHit();
         if (hit === null)
@@ -1218,15 +1406,12 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
         }));
     const touchScale = compact ? 0.88 : 1;
     const dockMounted = !poster &&
+        !orientationGate &&
         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: {
+    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: _jsx("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) {
@@ -1265,24 +1450,24 @@ export function GamePlayerShell({ playable, multiplayer: rawMultiplayer = null,
                             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, {})] }) })] }) }));
+                        }, children: _jsxs(GameViewportProvider, { platforms: playable.platforms, 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, hideLocalActor: firstPerson }) }), WorldOverlay !== undefined ? _jsx(WorldOverlay, {}) : null, barsStatId !== null ? (_jsx(WorldEntityBars, { statId: barsStatId, roles: barsRoles, resolveRole: resolveEntityRole, ...(barsMaxDistance === undefined ? {} : { maxDistance: barsMaxDistance }) })) : 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, gateRef: gateRef, 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, {}), playable.postProcessing !== undefined && playable.postProcessing.enabled !== false ? (_jsx(PostProcessing, { config: playable.postProcessing })) : null] }), !poster && !orientationGate && 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: orientationGate ? null : _jsx(GameUI, {}) }) }) }), !poster && !orientationGate && showReticle ? _jsx(Reticle, {}) : null, dockMounted && touchScheme !== null ? (_jsx(TouchControlsDock, { scheme: touchScheme, sink: touchSink, scale: touchScale })) : null, orientationGateEl, 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, {})] }) }) })] }) }));
 }