@jgengine/shell 0.10.0 → 0.11.0

package/dist/world/RetainedVfx.js

@@ -0,0 +1,136 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { useGameContext } from "@jgengine/react/provider";
+const UP = new THREE.Vector3(0, 1, 0);
+/**
+ * Resolve an endpoint into `out`. A world point is used literally; an entity id resolves to its live pose lifted
+ * by `lift` (so a beam meets an entity near chest height, not its feet). Returns false when an entity ref is
+ * missing, letting the caller hide the effect until the target exists again.
+ */
+function resolveRef(ctx, ref, lift, out) {
+    if (ref === undefined)
+        return false;
+    if (typeof ref === "string") {
+        const entity = ctx.scene.entity.get(ref);
+        if (entity === null)
+            return false;
+        out.set(entity.position[0], entity.position[1] + lift, entity.position[2]);
+        return true;
+    }
+    out.set(ref[0], ref[1], ref[2]);
+    return true;
+}
+/**
+ * One retained beam mesh. It reads its authoritative state from the shared live map every frame and resolves
+ * `from`/`to` refs against the entity store, so an endpoint bound to a moving entity follows it with no per-frame
+ * command traffic or React re-render — parameter updates mutate the render resources imperatively.
+ */
+function RetainedBeam({ id, live, onFadeComplete, }) {
+    const ctx = useGameContext();
+    const meshRef = useRef(null);
+    const matRef = useRef(null);
+    const from = useRef(new THREE.Vector3());
+    const to = useRef(new THREE.Vector3());
+    const delta = useRef(new THREE.Vector3());
+    const quat = useRef(new THREE.Quaternion());
+    useFrame(() => {
+        const entry = live.get(id);
+        const mesh = meshRef.current;
+        const mat = matRef.current;
+        if (entry === undefined || mesh === null || mat === null)
+            return;
+        const lift = entry.state.params?.lift ?? 1;
+        const hasFrom = resolveRef(ctx, entry.state.from, lift, from.current);
+        const hasTo = resolveRef(ctx, entry.state.to, lift, to.current);
+        if (!hasFrom || !hasTo) {
+            mesh.visible = false;
+            return;
+        }
+        delta.current.subVectors(to.current, from.current);
+        const length = Math.max(0.001, delta.current.length());
+        mesh.visible = true;
+        mesh.position.set((from.current.x + to.current.x) / 2, (from.current.y + to.current.y) / 2, (from.current.z + to.current.z) / 2);
+        quat.current.setFromUnitVectors(UP, delta.current.normalize());
+        mesh.quaternion.copy(quat.current);
+        const thickness = entry.state.radius ?? 0.12;
+        mesh.scale.set(thickness, length, thickness);
+        mat.color.set(entry.state.color);
+        const baseOpacity = entry.state.params?.opacity ?? 0.85;
+        if (entry.fade === null) {
+            mat.opacity = baseOpacity;
+        }
+        else {
+            const p = (performance.now() - entry.fade.startedAt) / Math.max(1, entry.fade.ms);
+            if (p >= 1) {
+                onFadeComplete(id);
+                return;
+            }
+            mat.opacity = baseOpacity * (1 - p);
+        }
+    });
+    return (_jsxs("mesh", { ref: meshRef, renderOrder: 998, visible: false, children: [_jsx("cylinderGeometry", { args: [1, 1, 1, 8, 1, true] }), _jsx("meshBasicMaterial", { ref: matRef, transparent: true, side: THREE.DoubleSide, depthWrite: false, blending: THREE.AdditiveBlending, toneMapped: false, opacity: 0 })] }));
+}
+/**
+ * Renders retained VFX instances (`combat.vfxInstance` ops from {@link GameContext}'s `scene.entity.vfxInstance`
+ * store) as long-lived beams whose endpoints follow live entity poses. Auto-mounted by the player shell alongside
+ * the one-shot {@link WorldSpellVfx} overlay. `upsert`/`update` mutate render resources imperatively (no per-frame
+ * React allocation); only create/stop change the mounted set, and `stop` fades out over its requested duration.
+ * Beam is the first shipped retained renderer; other kinds are ignored here for a future renderer to claim.
+ *
+ * @internal
+ */
+export function RetainedVfx() {
+    const ctx = useGameContext();
+    const live = useRef(new Map()).current;
+    const [ids, setIds] = useState([]);
+    useEffect(() => {
+        // Seed from any instances created before this overlay mounted.
+        for (const state of ctx.scene.entity.vfxInstance.list()) {
+            if (state.kind !== "beam")
+                continue;
+            live.set(state.id, { state, fade: null });
+        }
+        if (live.size > 0)
+            setIds([...live.keys()]);
+        const off = ctx.game.events.on("combat.vfxInstance", (op) => {
+            if (op.op === "stop") {
+                const entry = live.get(op.id);
+                if (entry === undefined)
+                    return;
+                if (op.fadeMs !== undefined && op.fadeMs > 0) {
+                    entry.fade = { ms: op.fadeMs, startedAt: performance.now() };
+                }
+                else {
+                    live.delete(op.id);
+                    setIds([...live.keys()]);
+                }
+                return;
+            }
+            const state = op.instance;
+            if (state === undefined || state.kind !== "beam")
+                return;
+            const existing = live.get(op.id);
+            if (existing === undefined) {
+                live.set(op.id, { state, fade: null });
+                setIds([...live.keys()]);
+            }
+            else {
+                // Update: mutate state in place; RetainedBeam reads it next frame (no React re-render).
+                existing.state = state;
+                existing.fade = null;
+            }
+        });
+        return () => {
+            off();
+            live.clear();
+            setIds([]);
+        };
+    }, [ctx, live]);
+    function removeId(id) {
+        live.delete(id);
+        setIds((current) => current.filter((entry) => entry !== id));
+    }
+    return (_jsx(_Fragment, { children: ids.map((id) => (_jsx(RetainedBeam, { id: id, live: live, onFadeComplete: removeId }, id))) }));
+}

package/dist/world/WorldHud.d.ts

@@ -1,7 +1,9 @@
+import { type ReactNode } from "react";
 import type { SceneEntity } from "@jgengine/core/scene/entityStore";
 import type { CatalogEntityRole } from "@jgengine/core/runtime/gameContext";
-export type { WorldBarSample } from "./worldBarSamples.js";
-export { collectWorldBarSamples, paintWorldBarSamples } from "./worldBarSamples.js";
+import { type NameplateSample } from "./worldBarSamples.js";
+export type { NameplateSample, WorldBarSample } from "./worldBarSamples.js";
+export { collectNameplateSamples, collectWorldBarSamples, paintWorldBarSamples } from "./worldBarSamples.js";
 export { telegraphPulseOpacity } from "./telegraphPulse.js";
 export declare function WorldEntityBars({ statId, height, roles, resolveRole, maxDistance, }: {
     statId: string;
@@ -11,6 +13,51 @@ export declare function WorldEntityBars({ statId, height, roles, resolveRole, ma
     /** Hide bars for entities farther than this from the player (world units). Default 60. */
     maxDistance?: number;
 }): import("react").JSX.Element;
+/** Props for `WorldNameplates` — entity filter, refresh rate, and headless className/render hooks. */
+export interface WorldNameplatesProps {
+    statId?: string;
+    height?: number;
+    roles?: readonly CatalogEntityRole[];
+    resolveRole?: (entity: SceneEntity) => CatalogEntityRole | undefined;
+    /** Hide nameplates for entities farther than this from the player (world units). Default 40. */
+    maxDistance?: number;
+    /** Minimum ms between position/health refreshes — trades smoothness for fewer re-renders at scale. Default 120. */
+    tickMs?: number;
+    className?: string;
+    nameplateClassName?: string;
+    nameClassName?: string;
+    barClassName?: string;
+    fillClassName?: string;
+    /** Full override for one nameplate's markup; receives the raw sample (name, percent, screen x/y). */
+    renderNameplate?: (sample: NameplateSample) => ReactNode;
+}
+/**
+ * Billboarded name + 78×6px HP bar over every nearby non-local entity that
+ * passes `roles`/`maxDistance` — headless (className/data-* slots on every
+ * part, `renderNameplate` for a full swap), turned on declaratively via
+ * `defineGame({ nameplates })` rather than mounted by hand.
+ *
+ * @capability nameplates billboarded name + HP bar over nearby entities
+ */
+export declare function WorldNameplates({ statId, height, roles, resolveRole, maxDistance, tickMs, className, nameplateClassName, nameClassName, barClassName, fillClassName, renderNameplate, }: WorldNameplatesProps): import("react").JSX.Element;
+/** Props for {@link WorldObjectHighlights}. */
+export interface WorldObjectHighlightsProps {
+    /** Ring tint. Default a construction-select amber. */
+    color?: string;
+    /** Fixed ring radius; omitted derives one from the object's catalog `halfExtents` (falls back to 1.2). */
+    radius?: number;
+    /** Ground offset so the ring doesn't z-fight the object's base. Default 0.05. */
+    y?: number;
+}
+/**
+ * Ground ring over every `ctx.scene.object.selection`-ed placed object — the object-layer counterpart
+ * to `WorldEntityBars`/`WorldNameplates`. Mount it once in the game's scene (headless: no defaults are
+ * imposed beyond a visible ring) instead of hand-rolling a selection highlight through `WorldOverlay`
+ * against external state.
+ *
+ * @capability world-object-highlights ground-ring highlight over every selected placed object
+ */
+export declare function WorldObjectHighlights({ color, radius, y }: WorldObjectHighlightsProps): import("react").JSX.Element;
 export declare function WorldFloatText({ height, lifeMs }: {
     height?: number;
     lifeMs?: number;

package/dist/world/WorldHud.js

@@ -5,11 +5,12 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import * as THREE from "three";
 import { useGameContext } from "@jgengine/react/provider";
 import { useCameraShake } from "../camera/shakeChannel.js";
+import { CALIBRATED_TRAUMA_SHAKE_DECAY_PER_SECOND } from "../camera/rigMath.js";
 import { readFirstPersonMuzzle } from "../camera/GameFirstPersonCamera.js";
 import { resolveFloatTextStyle } from "./floatTextStyle.js";
-import { collectWorldBarSamples, paintWorldBarSamples, } from "./worldBarSamples.js";
+import { collectNameplateSamples, collectWorldBarSamples, paintWorldBarSamples, } from "./worldBarSamples.js";
 import { telegraphPulseOpacity } from "./telegraphPulse.js";
-export { collectWorldBarSamples, paintWorldBarSamples } from "./worldBarSamples.js";
+export { collectNameplateSamples, collectWorldBarSamples, paintWorldBarSamples } from "./worldBarSamples.js";
 export { telegraphPulseOpacity } from "./telegraphPulse.js";
 function pinOverlayToViewport(_el, _camera, size) {
     return [size.width / 2, size.height / 2];
@@ -41,6 +42,86 @@ export function WorldEntityBars({ statId, height = 2.2, roles, resolveRole, maxD
     });
     return (_jsx(Html, { fullscreen: true, calculatePosition: pinOverlayToViewport, zIndexRange: [20, 0], style: { pointerEvents: "none" }, children: _jsx("canvas", { ref: canvasRef, style: { width: "100%", height: "100%", display: "block", pointerEvents: "none" } }) }));
 }
+/**
+ * Billboarded name + 78×6px HP bar over every nearby non-local entity that
+ * passes `roles`/`maxDistance` — headless (className/data-* slots on every
+ * part, `renderNameplate` for a full swap), turned on declaratively via
+ * `defineGame({ nameplates })` rather than mounted by hand.
+ *
+ * @capability nameplates billboarded name + HP bar over nearby entities
+ */
+export function WorldNameplates({ statId = "health", height = 2.3, roles, resolveRole, maxDistance = 40, tickMs = 120, className, nameplateClassName, nameClassName, barClassName, fillClassName, renderNameplate, }) {
+    const ctx = useGameContext();
+    const camera = useThree((state) => state.camera);
+    const size = useThree((state) => state.size);
+    const [samples, setSamples] = useState([]);
+    const samplesRef = useRef([]);
+    const projectRef = useRef(new THREE.Vector3());
+    const lastTickRef = useRef(0);
+    useFrame((state) => {
+        const nowMs = state.clock.elapsedTime * 1000;
+        if (nowMs - lastTickRef.current < tickMs)
+            return;
+        lastTickRef.current = nowMs;
+        camera.updateMatrixWorld();
+        collectNameplateSamples(ctx, statId, height, roles, resolveRole, camera, { width: size.width, height: size.height }, samplesRef.current, projectRef.current, maxDistance);
+        setSamples([...samplesRef.current]);
+    });
+    return (_jsx(Html, { fullscreen: true, calculatePosition: pinOverlayToViewport, zIndexRange: [19, 0], style: { pointerEvents: "none" }, children: _jsx("div", { className: className, "data-nameplates": true, children: samples.map((sample) => renderNameplate !== undefined ? (_jsx("div", { style: { position: "absolute", left: sample.x, top: sample.y }, children: renderNameplate(sample) }, sample.id)) : (_jsxs("div", { className: nameplateClassName, "data-nameplate": sample.id, style: {
+                    position: "absolute",
+                    left: sample.x,
+                    top: sample.y,
+                    transform: "translate(-50%, -100%)",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 2,
+                    fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                }, children: [_jsx("span", { className: nameClassName, "data-nameplate-name": true, style: {
+                            fontSize: 12,
+                            fontWeight: 700,
+                            color: "#f1f5f9",
+                            textShadow: "0 1px 3px rgba(0,0,0,0.9)",
+                            whiteSpace: "nowrap",
+                        }, children: sample.name }), sample.percent !== null ? (_jsx("span", { className: barClassName, "data-nameplate-bar": true, style: {
+                            display: "block",
+                            width: 78,
+                            height: 6,
+                            borderRadius: 2,
+                            background: "rgba(0,0,0,0.65)",
+                            border: "1px solid rgba(0,0,0,0.8)",
+                            overflow: "hidden",
+                        }, children: _jsx("span", { className: fillClassName, "data-nameplate-fill": true, style: {
+                                display: "block",
+                                width: `${sample.percent * 100}%`,
+                                height: "100%",
+                                background: sample.percent > 0.5 ? "#22c55e" : sample.percent > 0.25 ? "#f59e0b" : "#ef4444",
+                            } }) })) : null] }, sample.id))) }) }));
+}
+/**
+ * Ground ring over every `ctx.scene.object.selection`-ed placed object — the object-layer counterpart
+ * to `WorldEntityBars`/`WorldNameplates`. Mount it once in the game's scene (headless: no defaults are
+ * imposed beyond a visible ring) instead of hand-rolling a selection highlight through `WorldOverlay`
+ * against external state.
+ *
+ * @capability world-object-highlights ground-ring highlight over every selected placed object
+ */
+export function WorldObjectHighlights({ color = "#facc15", radius, y = 0.05 }) {
+    const ctx = useGameContext();
+    const [ids, setIds] = useState(() => ctx.scene.object.selection.list());
+    useEffect(() => {
+        setIds(ctx.scene.object.selection.list());
+        return ctx.subscribe(() => setIds(ctx.scene.object.selection.list()));
+    }, [ctx]);
+    return (_jsx(_Fragment, { children: ids.map((id) => {
+            const object = ctx.scene.object.get(id);
+            if (object === null)
+                return null;
+            const halfExtents = ctx.scene.object.catalog(id)?.halfExtents;
+            const ringRadius = radius ?? (halfExtents === undefined ? 1.2 : Math.max(halfExtents[0], halfExtents[2]) * 1.35);
+            return (_jsxs("mesh", { position: [object.position[0], object.position[1] + y, object.position[2]], rotation: [-Math.PI / 2, 0, 0], renderOrder: 998, children: [_jsx("ringGeometry", { args: [ringRadius * 0.82, ringRadius, 40] }), _jsx("meshBasicMaterial", { color: color, transparent: true, opacity: 0.85, side: THREE.DoubleSide, depthWrite: false, toneMapped: false })] }, id));
+        }) }));
+}
 function FloatTextItem({ event, lifeMs }) {
     const [shown, setShown] = useState(false);
     const style = useMemo(() => resolveFloatTextStyle(event), [event]);
@@ -142,6 +223,10 @@ export function CombatCameraShake() {
     const shake = useCameraShake();
     useEffect(() => {
         return ctx.game.events.on("combat.hitReaction", (event) => {
+            if (event.trauma !== undefined) {
+                shake.shake(event.trauma, CALIBRATED_TRAUMA_SHAKE_DECAY_PER_SECOND);
+                return;
+            }
             if (event.shake === undefined)
                 return;
             shake.shake(event.shake.amplitude, event.shake.decay);

package/dist/world/WorldScene.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentType, type ReactNode } from "react";
+import type { AssetCatalog } from "@jgengine/core/scene/assetCatalog";
+import type { SceneEntity } from "@jgengine/core/scene/entityStore";
+import { type SceneObject } from "@jgengine/core/scene/objectStore";
+import type { EntitySpriteConfig, ModelConfig, ObjectStyle } from "@jgengine/core/game/playableGame";
+import type { PresencePoseRow } from "@jgengine/core/runtime/transport";
+export declare function WorldView({ entitySprites, entityModels, objectModels, objectStyles, environment, assets, renderEntity, renderObject, selectedIds, hideLocalActor, }: {
+    entitySprites: Record<string, EntitySpriteConfig> | undefined;
+    entityModels: Record<string, string | ModelConfig> | undefined;
+    objectModels: Record<string, string | ModelConfig> | undefined;
+    objectStyles: Record<string, ObjectStyle> | undefined;
+    environment: ComponentType | undefined;
+    assets: AssetCatalog;
+    renderEntity: ((entity: SceneEntity) => ReactNode) | undefined;
+    renderObject: ((object: SceneObject) => ReactNode) | undefined;
+    selectedIds: ReadonlySet<string>;
+    hideLocalActor: boolean;
+}): import("react").JSX.Element;
+export declare function RemotePlayers({ rows }: {
+    rows: PresencePoseRow[];
+}): import("react").JSX.Element;

package/dist/world/WorldScene.js

@@ -0,0 +1,159 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+import { objectVisualScale } from "@jgengine/core/scene/objectStore";
+import { WORLD_ITEM_ENTITY_NAME } from "@jgengine/core/game/worldItem";
+import { useGameContext } from "@jgengine/react/provider";
+import { useSceneEntityIds, useSceneObjectIds, useGameStore, usePlayer, useTarget } from "@jgengine/react/hooks";
+import { colorFromId } from "../worldSky.js";
+import { DefaultSurface, detailMaps } from "../render/defaultSurface.js";
+import { EntitySprite, IsolatedEntityModel } from "../render/SceneModels.js";
+import { resolveModel, resolveEntityModel, tryResolveCatalogModel } from "../render/resolveModel.js";
+import { useRenderVisibility } from "../visibility/CullingProvider.js";
+import { writeEntityPose } from "./entityPose.js";
+import { POINTER_ENTITY_KEY, POINTER_OBJECT_KEY } from "../pointer/pointerService.js";
+const GROUND_SIZE = 160;
+const GROUND_SEGMENTS = 80;
+function EntityMarker({ entity, custom, model, sprite, isLocal, targeted, selected, onSelect, }) {
+    const groupRef = useRef(null);
+    const ctx = useGameContext();
+    const visibleRef = useRenderVisibility();
+    const entityId = entity.id;
+    const role = entity.role;
+    const name = entity.name;
+    const color = isLocal ? "#4ade80" : role === "npc" ? colorFromId(name) : "#9ca3af";
+    useFrame(() => {
+        const group = groupRef.current;
+        if (group === null)
+            return;
+        const live = ctx.scene.entity.get(entityId);
+        if (live === null)
+            return;
+        writeEntityPose(group, live);
+        group.visible = visibleRef.current(entityId);
+    });
+    return (_jsxs("group", { ref: groupRef, userData: { [POINTER_ENTITY_KEY]: entityId }, onPointerDown: (event) => {
+            event.stopPropagation();
+            if (isLocal)
+                return;
+            const live = ctx.scene.entity.get(entityId);
+            if (live !== null)
+                onSelect(live);
+        }, children: [selected ? (_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.02, children: [_jsx("ringGeometry", { args: [0.8, 0.95, 32] }), _jsx("meshBasicMaterial", { color: "#34d399", transparent: true, opacity: 0.9 })] })) : null, custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(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, castShadow: true, receiveShadow: true, children: [_jsx("sphereGeometry", { args: [0.45, 24, 24] }), _jsx(DefaultSurface, { color: color })] })) : (_jsxs("group", { scale: ctx.scene.entity.visualScaleOf(entityId), children: [_jsxs("mesh", { "position-y": 0.95, castShadow: true, receiveShadow: true, children: [_jsx("capsuleGeometry", { args: [0.35, 1.1, 6, 14] }), _jsx(DefaultSurface, { color: color, roughness: 0.6 })] }), _jsxs("mesh", { position: [0, 1.35, 0.32], children: [_jsx("boxGeometry", { args: [0.16, 0.16, 0.16] }), _jsx("meshStandardMaterial", { color: "#f8fafc" })] })] })), targeted ? (_jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.03, children: [_jsx("ringGeometry", { args: [0.6, 0.75, 28] }), _jsx("meshBasicMaterial", { color: "#f87171" })] })) : null] }));
+}
+function ObjectMarker({ object, custom, model, style, }) {
+    const groupRef = useRef(null);
+    const ctx = useGameContext();
+    const visibleRef = useRenderVisibility();
+    const instanceId = object.instanceId;
+    const [scaleX, scaleY, scaleZ] = objectVisualScale(object.visual);
+    const color = object.visual?.color ?? style?.color ?? colorFromId(object.catalogId);
+    const opacity = object.visual?.opacity ?? style?.opacity ?? 1;
+    useFrame(() => {
+        const group = groupRef.current;
+        if (group === null)
+            return;
+        const live = ctx.scene.object.get(instanceId);
+        if (live === null)
+            return;
+        writeEntityPose(group, live);
+        group.visible = visibleRef.current(instanceId);
+    });
+    return (_jsx("group", { ref: groupRef, userData: { [POINTER_OBJECT_KEY]: instanceId }, children: custom !== undefined && custom !== null ? (custom) : model !== undefined ? (_jsx(IsolatedEntityModel, { model: model, instanceId: instanceId })) : style?.hidden === true ? null : (_jsxs("mesh", { "position-y": 0.5 * scaleY, scale: [scaleX, scaleY, scaleZ], castShadow: true, receiveShadow: true, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx(DefaultSurface, { color: color, transparent: opacity < 1, opacity: opacity })] })) }));
+}
+function GroundPlane() {
+    const geometry = useMemo(() => {
+        const next = new THREE.PlaneGeometry(GROUND_SIZE, GROUND_SIZE, GROUND_SEGMENTS, GROUND_SEGMENTS);
+        const positions = next.attributes.position;
+        const base = new THREE.Color("#33452f");
+        const high = new THREE.Color("#4a5c3a");
+        const colors = new Float32Array(positions.count * 3);
+        const tmp = new THREE.Color();
+        for (let index = 0; index < positions.count; index += 1) {
+            const x = positions.getX(index);
+            const y = positions.getY(index);
+            const height = Math.sin(x * 0.16) * 0.12 +
+                Math.cos(y * 0.11) * 0.1 +
+                Math.sin((x + y) * 0.05) * 0.16;
+            positions.setZ(index, height);
+            const blend = 0.5 + Math.sin(x * 0.21) * 0.25 + Math.cos(y * 0.17) * 0.25;
+            tmp.copy(base).lerp(high, Math.min(1, Math.max(0, blend)));
+            colors[index * 3] = tmp.r;
+            colors[index * 3 + 1] = tmp.g;
+            colors[index * 3 + 2] = tmp.b;
+        }
+        next.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+        next.computeVertexNormals();
+        return next;
+    }, []);
+    const material = useMemo(() => {
+        const normal = detailMaps().normal.clone();
+        normal.repeat.set(48, 48);
+        normal.needsUpdate = true;
+        return new THREE.MeshStandardMaterial({
+            vertexColors: true,
+            roughness: 0.95,
+            metalness: 0,
+            normalMap: normal,
+            normalScale: new THREE.Vector2(0.8, 0.8),
+            envMapIntensity: 0.4,
+        });
+    }, []);
+    useEffect(() => () => material.dispose(), [material]);
+    return _jsx("mesh", { "rotation-x": -Math.PI / 2, geometry: geometry, material: material, receiveShadow: true });
+}
+function RockField() {
+    const rocks = useMemo(() => Array.from({ length: 18 }, (_, index) => {
+        const angle = index * 2.399963229728653;
+        const radius = 10 + ((index * 17) % 58);
+        return {
+            id: `rock-${index}`,
+            x: Math.cos(angle) * radius,
+            z: Math.sin(angle) * radius,
+            scale: 0.45 + ((index * 13) % 11) / 10,
+            rotation: angle,
+        };
+    }), []);
+    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], castShadow: true, receiveShadow: true, children: [_jsx("dodecahedronGeometry", { args: [0.8, 1] }), _jsx(DefaultSurface, { color: "#6b6f63", roughness: 0.95 })] }, rock.id))) }));
+}
+function WorldEnvironment({ environment: Environment }) {
+    if (Environment !== undefined)
+        return _jsx(Environment, {});
+    return (_jsxs(_Fragment, { children: [_jsx(GroundPlane, {}), _jsx(RockField, {})] }));
+}
+function WorldActors({ entitySprites, entityModels, objectModels, objectStyles, assets, renderEntity, renderObject, selectedIds, hideLocalActor, }) {
+    const ctx = useGameContext();
+    const entityIds = useSceneEntityIds();
+    const objectIds = useSceneObjectIds();
+    const player = usePlayer();
+    const targetId = useTarget(player.userId);
+    const controlledId = useGameStore((c) => c.player.possession.active(player.userId));
+    const handleSelect = (entity) => {
+        const relation = ctx.scene.entity.canReceive(entity.id, "damage") === null ? "hostile" : "friendly";
+        ctx.scene.entity.setTarget(controlledId, relation === "hostile" || entity.role === "npc" ? entity.id : null);
+    };
+    return (_jsxs(_Fragment, { children: [entityIds.map((entityId) => {
+                const entity = ctx.scene.entity.get(entityId);
+                if (entity === null || entity.name === WORLD_ITEM_ENTITY_NAME)
+                    return null;
+                if (hideLocalActor && entityId === controlledId)
+                    return null;
+                return (_jsx(EntityMarker, { entity: entity, custom: renderEntity?.(entity), model: resolveEntityModel(entityModels?.[entity.name], assets, entity.name), sprite: entitySprites?.[entity.name], isLocal: entityId === controlledId, targeted: entityId === targetId, selected: selectedIds.has(entityId), onSelect: handleSelect }, entityId));
+            }), objectIds.map((instanceId) => {
+                const object = ctx.scene.object.get(instanceId);
+                if (object === null)
+                    return null;
+                const model = resolveModel(objectModels?.[object.catalogId], assets, {
+                    seam: "objectModels",
+                    key: object.catalogId,
+                }) ?? tryResolveCatalogModel(object.catalogId, assets);
+                return (_jsx(ObjectMarker, { object: object, custom: renderObject?.(object), model: model, style: objectStyles?.[object.catalogId] }, instanceId));
+            })] }));
+}
+export 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 })] }));
+}
+export 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))) }));
+}

package/dist/world/WorldVfx.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Renders `combat.vfx` bursts as additive sprite-particle effects in the world scene. Auto-mounted by the
+ * player shell alongside the other world overlays; games emit effects via `ctx.scene.entity.vfx(...)`.
+ *
+ * @internal
+ */
+export declare function WorldSpellVfx({ tailMs }: {
+    tailMs?: number;
+}): import("react").JSX.Element;