@jgengine/shell 0.8.0 → 0.10.0

package/dist/weather/FireSpreadLayer.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
 import { useFrame } from "@react-three/fiber";
 import * as THREE from "three";
+import { setBillboardQuaternion } from "./fireSpreadPose.js";
 const HIDDEN = new THREE.Matrix4().makeScale(0, 0, 0);
 export function FireSpreadLayer({ grid, cellSize, origin = [0, 0], heightAt, flameHeight = 1.6, burningColor = "#ff6a1a", emberColor = "#4a1206", }) {
     const flames = useRef(null);
@@ -24,6 +25,8 @@ export function FireSpreadLayer({ grid, cellSize, origin = [0, 0], heightAt, fla
     const matrix = useMemo(() => new THREE.Matrix4(), []);
     const position = useMemo(() => new THREE.Vector3(), []);
     const quaternion = useMemo(() => new THREE.Quaternion(), []);
+    const identityQuat = useMemo(() => new THREE.Quaternion(), []);
+    const euler = useMemo(() => new THREE.Euler(), []);
     const scale = useMemo(() => new THREE.Vector3(1, 1, 1), []);
     useFrame((state) => {
         const flameMesh = flames.current;
@@ -42,7 +45,7 @@ export function FireSpreadLayer({ grid, cellSize, origin = [0, 0], heightAt, fla
                 const groundY = heightAt?.(x, z) ?? 0;
                 if (cell.state === "burning") {
                     position.set(x, groundY + flameHeight * 0.5, z);
-                    quaternion.setFromEuler(new THREE.Euler(0, state.camera.rotation.y, 0));
+                    setBillboardQuaternion(quaternion, euler, state.camera.rotation.y);
                     scale.set(1, flicker, 1);
                     matrix.compose(position, quaternion, scale);
                     flameMesh.setMatrixAt(flameIndex, matrix);
@@ -50,7 +53,9 @@ export function FireSpreadLayer({ grid, cellSize, origin = [0, 0], heightAt, fla
                 }
                 else if (cell.state === "burnt") {
                     position.set(x, groundY + 0.05, z);
-                    scorchMesh.setMatrixAt(scorchIndex, matrix.compose(position, new THREE.Quaternion(), scale.set(1, 1, 1)));
+                    scale.set(1, 1, 1);
+                    matrix.compose(position, identityQuat, scale);
+                    scorchMesh.setMatrixAt(scorchIndex, matrix);
                     scorchIndex += 1;
                 }
             }

package/dist/weather/RainField.d.ts

@@ -3,6 +3,7 @@ import { type WeatherVector } from "./weatherUniforms.js";
 export interface RainFieldProps {
     count?: number;
     density?: number;
+    budget?: number;
     volume?: WeatherVector;
     wind?: WeatherVector;
     origin?: WeatherVector;
@@ -16,5 +17,6 @@ export interface RainFieldProps {
     timeScale?: number;
     seed?: number;
     renderOrder?: number;
+    frustumCulled?: boolean;
 }
-export declare function RainField({ count, density, volume, wind, origin, followCamera, speed, length, width, opacity, color, lightning, timeScale, seed, renderOrder, }: RainFieldProps): import("react").JSX.Element;
+export declare function RainField({ count, density, budget, volume, wind, origin, followCamera, speed, length, width, opacity, color, lightning, timeScale, seed, renderOrder, frustumCulled, }: RainFieldProps): import("react").JSX.Element;

package/dist/weather/RainField.js

@@ -3,12 +3,12 @@ import { useEffect, useMemo } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { createWeatherQuadGeometry } from "./weatherGeometry.js";
-import { resolveWeatherInstanceCount } from "./weatherMath.js";
+import { DEFAULT_RAIN_COUNT, DEFAULT_RAIN_DENSITY, resolveWeatherInstanceCount } from "./weatherMath.js";
 import { useWeatherUniformSet } from "./weatherUniforms.js";
 const DEFAULT_VOLUME = [56, 42, 56];
 const DEFAULT_ORIGIN = [0, 0, 0];
 const DEFAULT_RAIN_COLOR = "#b8c4d8";
-export function RainField({ count = 8000, density = 0.45, volume = DEFAULT_VOLUME, wind, origin = DEFAULT_ORIGIN, followCamera = true, speed = 22, length = 1.35, width = 0.018, opacity = 0.48, color = DEFAULT_RAIN_COLOR, lightning, timeScale, seed = 11939, renderOrder = 10, }) {
+export function RainField({ count = DEFAULT_RAIN_COUNT, density = DEFAULT_RAIN_DENSITY, budget, volume = DEFAULT_VOLUME, wind, origin = DEFAULT_ORIGIN, followCamera = true, speed = 22, length = 1.35, width = 0.018, opacity = 0.48, color = DEFAULT_RAIN_COLOR, lightning, timeScale, seed = 11939, renderOrder = 10, frustumCulled, }) {
     const { camera } = useThree();
     const shared = useWeatherUniformSet({ wind, lightning, timeScale });
     const geometry = useMemo(() => createWeatherQuadGeometry(count, seed), [count, seed]);
@@ -97,11 +97,11 @@ export function RainField({ count = 8000, density = 0.45, volume = DEFAULT_VOLUM
         uniforms.uWidth.value = width;
         uniforms.uOpacity.value = opacity;
         uniforms.uColor.value.set(color);
-        geometry.instanceCount = resolveWeatherInstanceCount(count, density);
+        geometry.instanceCount = resolveWeatherInstanceCount(count, density, budget);
     });
     useEffect(() => () => {
         geometry.dispose();
         material.dispose();
     }, [geometry, material]);
-    return _jsx("mesh", { geometry: geometry, material: material, frustumCulled: false, renderOrder: renderOrder });
+    return (_jsx("mesh", { geometry: geometry, material: material, frustumCulled: frustumCulled ?? !followCamera, renderOrder: renderOrder }));
 }

package/dist/weather/SnowField.d.ts

@@ -3,6 +3,7 @@ import { type WeatherVector } from "./weatherUniforms.js";
 export interface SnowFieldProps {
     count?: number;
     density?: number;
+    budget?: number;
     volume?: WeatherVector;
     wind?: WeatherVector;
     origin?: WeatherVector;
@@ -15,5 +16,6 @@ export interface SnowFieldProps {
     timeScale?: number;
     seed?: number;
     renderOrder?: number;
+    frustumCulled?: boolean;
 }
-export declare function SnowField({ count, density, volume, wind, origin, followCamera, speed, size, sway, opacity, color, timeScale, seed, renderOrder, }: SnowFieldProps): import("react").JSX.Element;
+export declare function SnowField({ count, density, budget, volume, wind, origin, followCamera, speed, size, sway, opacity, color, timeScale, seed, renderOrder, frustumCulled, }: SnowFieldProps): import("react").JSX.Element;

package/dist/weather/SnowField.js

@@ -3,12 +3,12 @@ import { useEffect, useMemo } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { createWeatherQuadGeometry } from "./weatherGeometry.js";
-import { resolveWeatherInstanceCount } from "./weatherMath.js";
+import { DEFAULT_SNOW_COUNT, DEFAULT_SNOW_DENSITY, resolveWeatherInstanceCount } from "./weatherMath.js";
 import { useWeatherUniformSet } from "./weatherUniforms.js";
 const DEFAULT_VOLUME = [52, 38, 52];
 const DEFAULT_ORIGIN = [0, 0, 0];
 const DEFAULT_SNOW_COLOR = "#ffffff";
-export function SnowField({ count = 6000, density = 0.5, volume = DEFAULT_VOLUME, wind, origin = DEFAULT_ORIGIN, followCamera = true, speed = 3.2, size = 0.11, sway = 0.62, opacity = 0.86, color = DEFAULT_SNOW_COLOR, timeScale, seed = 72931, renderOrder = 11, }) {
+export function SnowField({ count = DEFAULT_SNOW_COUNT, density = DEFAULT_SNOW_DENSITY, budget, volume = DEFAULT_VOLUME, wind, origin = DEFAULT_ORIGIN, followCamera = true, speed = 3.2, size = 0.11, sway = 0.62, opacity = 0.86, color = DEFAULT_SNOW_COLOR, timeScale, seed = 72931, renderOrder = 11, frustumCulled, }) {
     const { camera } = useThree();
     const shared = useWeatherUniformSet({ wind, timeScale });
     const geometry = useMemo(() => createWeatherQuadGeometry(count, seed), [count, seed]);
@@ -98,11 +98,11 @@ export function SnowField({ count = 6000, density = 0.5, volume = DEFAULT_VOLUME
         uniforms.uSway.value = sway;
         uniforms.uOpacity.value = opacity;
         uniforms.uColor.value.set(color);
-        geometry.instanceCount = resolveWeatherInstanceCount(count, density);
+        geometry.instanceCount = resolveWeatherInstanceCount(count, density, budget);
     });
     useEffect(() => () => {
         geometry.dispose();
         material.dispose();
     }, [geometry, material]);
-    return _jsx("mesh", { geometry: geometry, material: material, frustumCulled: false, renderOrder: renderOrder });
+    return (_jsx("mesh", { geometry: geometry, material: material, frustumCulled: frustumCulled ?? !followCamera, renderOrder: renderOrder }));
 }

package/dist/weather/fireSpreadPose.d.ts

@@ -0,0 +1,2 @@
+import type { Euler, Quaternion } from "three";
+export declare function setBillboardQuaternion(quaternion: Quaternion, euler: Euler, yaw: number): void;

package/dist/weather/fireSpreadPose.js

@@ -0,0 +1,4 @@
+export function setBillboardQuaternion(quaternion, euler, yaw) {
+    euler.set(0, yaw, 0);
+    quaternion.setFromEuler(euler);
+}

package/dist/weather/weatherMath.d.ts

@@ -1,5 +1,9 @@
+export declare const DEFAULT_RAIN_COUNT = 2000;
+export declare const DEFAULT_SNOW_COUNT = 1500;
+export declare const DEFAULT_RAIN_DENSITY = 0.45;
+export declare const DEFAULT_SNOW_DENSITY = 0.5;
 export declare function clampWeatherRatio(value: number): number;
-export declare function resolveWeatherInstanceCount(maxCount: number, density: number): number;
+export declare function resolveWeatherInstanceCount(maxCount: number, density: number, budget?: number): number;
 export interface WeatherSeedAttributes {
     spawn: Float32Array;
     drift: Float32Array;

package/dist/weather/weatherMath.js

@@ -1,3 +1,7 @@
+export const DEFAULT_RAIN_COUNT = 2000;
+export const DEFAULT_SNOW_COUNT = 1500;
+export const DEFAULT_RAIN_DENSITY = 0.45;
+export const DEFAULT_SNOW_DENSITY = 0.5;
 export function clampWeatherRatio(value) {
     if (!Number.isFinite(value))
         return 0;
@@ -7,9 +11,10 @@ export function clampWeatherRatio(value) {
         return 1;
     return value;
 }
-export function resolveWeatherInstanceCount(maxCount, density) {
+export function resolveWeatherInstanceCount(maxCount, density, budget) {
     const safeMax = Math.max(0, Math.floor(maxCount));
-    return Math.floor(safeMax * clampWeatherRatio(density));
+    const capped = budget === undefined ? safeMax : Math.min(safeMax, Math.max(0, Math.floor(budget)));
+    return Math.floor(capped * clampWeatherRatio(density));
 }
 export function createWeatherSeedAttributes(maxCount, seed) {
     const count = Math.max(0, Math.floor(maxCount));

package/dist/world/DataObjects.d.ts

@@ -41,4 +41,4 @@ export interface DataObjectsProps<T> {
         height: number;
     }) => ReactNode;
 }
-export declare function DataObjects<T>({ data, position, height, color, cellSize, hovered, hoverColor, onHover, grow, castShadow, receiveShadow, renderItem, }: DataObjectsProps<T>): import("react").JSX.Element;
+export declare function DataObjects<T>({ data, position, height, color, cellSize, hovered, hoverColor, onHover, grow, castShadow, receiveShadow, renderItem, }: DataObjectsProps<T>): import("react").JSX.Element | null;

package/dist/world/DataObjects.js

@@ -71,5 +71,7 @@ export function DataObjects({ data, position, height, color, cellSize = 0.28, ho
                 return (_jsx("group", { position: [x, 0, z], children: renderItem(item, i, { x, z, height: height(item, i) }) }, i));
             }) }));
     }
-    return (_jsx("instancedMesh", { ref: meshRef, args: [geometry, material, Math.max(capacity, 1)], castShadow: castShadow, receiveShadow: receiveShadow, frustumCulled: false, onPointerMove: onHover === undefined ? undefined : handleMove, onPointerOut: onHover === undefined ? undefined : () => onHover(null) }, capacity));
+    if (capacity === 0)
+        return null;
+    return (_jsx("instancedMesh", { ref: meshRef, args: [geometry, material, capacity], castShadow: castShadow, receiveShadow: receiveShadow, frustumCulled: false, onPointerMove: onHover === undefined ? undefined : handleMove, onPointerOut: onHover === undefined ? undefined : () => onHover(null) }, capacity));
 }

package/dist/world/SpriteBatch.d.ts

@@ -0,0 +1,44 @@
+export interface SpriteBatchInstance {
+    /** World X position. */
+    x: number;
+    /** World Y position. */
+    y: number;
+    /** World Z position. Defaults to 0. */
+    z?: number;
+    /** Atlas frame index, row-major from the sheet's top-left. Defaults to 0. */
+    frame?: number;
+    /** Uniform scale multiplier for the unit quad. Defaults to 1. */
+    scale?: number;
+    /** Rotation in radians about the plane's facing axis. Defaults to 0. */
+    rotation?: number;
+}
+export interface SpriteBatchProps {
+    /** Sprite sheet / atlas texture URL. */
+    url: string;
+    /** Atlas column count. Defaults to 1. */
+    columns?: number;
+    /** Atlas row count. Defaults to 1. */
+    rows?: number;
+    /** Max instances the InstancedMesh is allocated for. Defaults to 1024. */
+    capacity?: number;
+    /** Per-frame instance source, called once inside useFrame. */
+    instances: () => readonly SpriteBatchInstance[];
+    /** Facing plane when not billboarding: "xy" faces +Z (side-scroll/ortho), "xz" lies flat facing +Y. Defaults to "xy". */
+    plane?: "xy" | "xz";
+    /** When true, every instance orients to face the camera each frame, overriding `plane`. Defaults to false. */
+    billboard?: boolean;
+    /** Use nearest-neighbor filtering for crisp pixel art. Defaults to true. */
+    pixelated?: boolean;
+    /** Alpha test cutoff for transparent pixels. Defaults to 0.08. */
+    alphaTest?: number;
+    /** Material opacity. Defaults to 1. */
+    opacity?: number;
+}
+/**
+ * Renders a sprite sheet / tile atlas as a single InstancedMesh — one draw call for the whole
+ * batch. Each instance picks its atlas frame via a per-instance UV offset attribute patched into
+ * the material's vertex shader, so platformer/puzzle-grid presentation never needs one draw call
+ * per sprite. Transforms and UV offsets are written directly into the mesh's typed arrays each
+ * frame from a plain instance list (bodies never touch the per-entity React path).
+ */
+export declare function SpriteBatch({ url, columns, rows, capacity, instances, plane, billboard, pixelated, alphaTest, opacity, }: SpriteBatchProps): import("react").JSX.Element;

package/dist/world/SpriteBatch.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFrame, useLoader, useThree } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+const DEFAULT_CAPACITY = 1024;
+const DEFAULT_ALPHA_TEST = 0.08;
+const XZ_BASE_QUATERNION = new THREE.Quaternion().setFromEuler(new THREE.Euler(-Math.PI / 2, 0, 0));
+const LOCAL_NORMAL_AXIS = new THREE.Vector3(0, 0, 1);
+/**
+ * Renders a sprite sheet / tile atlas as a single InstancedMesh — one draw call for the whole
+ * batch. Each instance picks its atlas frame via a per-instance UV offset attribute patched into
+ * the material's vertex shader, so platformer/puzzle-grid presentation never needs one draw call
+ * per sprite. Transforms and UV offsets are written directly into the mesh's typed arrays each
+ * frame from a plain instance list (bodies never touch the per-entity React path).
+ */
+export function SpriteBatch({ url, columns = 1, rows = 1, capacity = DEFAULT_CAPACITY, instances, plane = "xy", billboard = false, pixelated = true, alphaTest = DEFAULT_ALPHA_TEST, opacity = 1, }) {
+    const meshRef = useRef(null);
+    const { camera } = useThree();
+    const texture = useLoader(THREE.TextureLoader, url);
+    useEffect(() => {
+        texture.colorSpace = THREE.SRGBColorSpace;
+        if (pixelated) {
+            texture.magFilter = THREE.NearestFilter;
+            texture.minFilter = THREE.NearestFilter;
+            texture.anisotropy = 1;
+        }
+        else {
+            texture.anisotropy = 4;
+        }
+        texture.needsUpdate = true;
+    }, [texture, pixelated]);
+    const geometry = useMemo(() => new THREE.PlaneGeometry(1, 1), []);
+    const spriteUvOffset = useMemo(() => new THREE.InstancedBufferAttribute(new Float32Array(capacity * 2), 2), [capacity]);
+    const material = useMemo(() => {
+        const mat = new THREE.MeshBasicMaterial({
+            map: texture,
+            transparent: true,
+            alphaTest,
+            depthWrite: false,
+            opacity,
+        });
+        mat.onBeforeCompile = (shader) => {
+            shader.uniforms.spriteUvScale = { value: new THREE.Vector2(1 / columns, 1 / rows) };
+            shader.vertexShader = shader.vertexShader
+                .replace("#include <common>", `#include <common>
+attribute vec2 spriteUvOffset;
+uniform vec2 spriteUvScale;`)
+                .replace("#include <uv_vertex>", `#include <uv_vertex>
+#ifdef USE_MAP
+  vMapUv = vMapUv * spriteUvScale + spriteUvOffset;
+#endif`);
+        };
+        mat.customProgramCacheKey = () => `jgengine-sprite-batch-${columns}x${rows}`;
+        return mat;
+    }, [texture, columns, rows, alphaTest, opacity]);
+    useEffect(() => {
+        const mesh = meshRef.current;
+        if (mesh === null)
+            return;
+        mesh.geometry.setAttribute("spriteUvOffset", spriteUvOffset);
+        mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+        spriteUvOffset.setUsage(THREE.DynamicDrawUsage);
+    }, [spriteUvOffset]);
+    const baseQuaternion = useMemo(() => (plane === "xz" ? XZ_BASE_QUATERNION.clone() : new THREE.Quaternion()), [plane]);
+    const position = useMemo(() => new THREE.Vector3(), []);
+    const quaternion = useMemo(() => new THREE.Quaternion(), []);
+    const rotationQuaternion = useMemo(() => new THREE.Quaternion(), []);
+    const scaleVector = useMemo(() => new THREE.Vector3(), []);
+    const matrix = useMemo(() => new THREE.Matrix4(), []);
+    useFrame(() => {
+        const mesh = meshRef.current;
+        if (mesh === null)
+            return;
+        const list = instances();
+        const count = Math.min(list.length, capacity);
+        mesh.count = count;
+        const matrixArray = mesh.instanceMatrix.array;
+        const uvArray = spriteUvOffset.array;
+        for (let i = 0; i < count; i += 1) {
+            const instance = list[i];
+            position.set(instance.x, instance.y, instance.z ?? 0);
+            if (billboard) {
+                quaternion.copy(camera.quaternion);
+            }
+            else {
+                quaternion.copy(baseQuaternion);
+            }
+            const rotation = instance.rotation ?? 0;
+            if (rotation !== 0) {
+                rotationQuaternion.setFromAxisAngle(LOCAL_NORMAL_AXIS, rotation);
+                quaternion.multiply(rotationQuaternion);
+            }
+            const scale = instance.scale ?? 1;
+            scaleVector.set(scale, scale, scale);
+            matrix.compose(position, quaternion, scaleVector);
+            matrix.toArray(matrixArray, i * 16);
+            const frame = instance.frame ?? 0;
+            const col = frame % columns;
+            const row = Math.floor(frame / columns);
+            const uo = i * 2;
+            uvArray[uo] = col / columns;
+            uvArray[uo + 1] = 1 - (row + 1) / rows;
+        }
+        mesh.instanceMatrix.needsUpdate = true;
+        spriteUvOffset.needsUpdate = true;
+    });
+    useEffect(() => () => {
+        geometry.dispose();
+        material.dispose();
+    }, [geometry, material]);
+    return (_jsx("instancedMesh", { ref: meshRef, args: [geometry, material, capacity], frustumCulled: false, castShadow: false, receiveShadow: false }));
+}

package/dist/world/WorldHud.d.ts

@@ -1,10 +1,15 @@
 import type { SceneEntity } from "@jgengine/core/scene/entityStore";
 import type { CatalogEntityRole } from "@jgengine/core/runtime/gameContext";
-export declare function WorldEntityBars({ statId, height, roles, resolveRole, }: {
+export type { WorldBarSample } from "./worldBarSamples.js";
+export { collectWorldBarSamples, paintWorldBarSamples } from "./worldBarSamples.js";
+export { telegraphPulseOpacity } from "./telegraphPulse.js";
+export declare function WorldEntityBars({ statId, height, roles, resolveRole, maxDistance, }: {
     statId: string;
     height?: number;
     roles?: readonly CatalogEntityRole[];
     resolveRole?: (entity: SceneEntity) => CatalogEntityRole | undefined;
+    /** Hide bars for entities farther than this from the player (world units). Default 60. */
+    maxDistance?: number;
 }): import("react").JSX.Element;
 export declare function WorldFloatText({ height, lifeMs }: {
     height?: number;

package/dist/world/WorldHud.js

@@ -3,27 +3,43 @@ import { Html, Line } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useEffect, useMemo, useRef, useState } from "react";
 import * as THREE from "three";
-import { worldHealthBarAllowsRole } from "@jgengine/core/game/playableGame";
 import { useGameContext } from "@jgengine/react/provider";
-import { useEntityStat, useSceneEntities } from "@jgengine/react/hooks";
+import { useCameraShake } from "../camera/shakeChannel.js";
+import { readFirstPersonMuzzle } from "../camera/GameFirstPersonCamera.js";
 import { resolveFloatTextStyle } from "./floatTextStyle.js";
-const MUZZLE_HEIGHT = 1.4;
-function EntityBar({ entity, statId, height }) {
-    const stat = useEntityStat(entity.id, statId);
-    if (stat === null)
-        return null;
-    const range = stat.max - stat.min;
-    const percent = range <= 0 ? 0 : Math.max(0, Math.min(1, (stat.current - stat.min) / range));
-    return (_jsx(Html, { position: [entity.position[0], entity.position[1] + height, entity.position[2]], center: true, distanceFactor: 12, zIndexRange: [20, 0], children: _jsx("div", { className: "h-2.5 w-28 overflow-hidden rounded-sm border border-black/70 bg-black/70 shadow", children: _jsx("div", { className: "h-full bg-gradient-to-r from-rose-600 to-red-400", style: { width: `${percent * 100}%` } }) }) }));
+import { collectWorldBarSamples, paintWorldBarSamples, } from "./worldBarSamples.js";
+import { telegraphPulseOpacity } from "./telegraphPulse.js";
+export { collectWorldBarSamples, paintWorldBarSamples } from "./worldBarSamples.js";
+export { telegraphPulseOpacity } from "./telegraphPulse.js";
+function pinOverlayToViewport(_el, _camera, size) {
+    return [size.width / 2, size.height / 2];
 }
-export function WorldEntityBars({ statId, height = 2.2, roles, resolveRole, }) {
+export function WorldEntityBars({ statId, height = 2.2, roles, resolveRole, maxDistance = 60, }) {
     const ctx = useGameContext();
-    const entities = useSceneEntities();
-    const playerId = ctx.player.userId;
-    return (_jsx(_Fragment, { children: entities
-            .filter((entity) => entity.id !== playerId)
-            .filter((entity) => worldHealthBarAllowsRole(roles, resolveRole?.(entity)))
-            .map((entity) => (_jsx(EntityBar, { entity: entity, statId: statId, height: height }, entity.id))) }));
+    const camera = useThree((state) => state.camera);
+    const size = useThree((state) => state.size);
+    const gl = useThree((state) => state.gl);
+    const canvasRef = useRef(null);
+    const samplesRef = useRef([]);
+    const projectRef = useRef(new THREE.Vector3());
+    useFrame(() => {
+        const canvas = canvasRef.current;
+        if (canvas === null)
+            return;
+        const dpr = Math.min(2, gl.getPixelRatio());
+        const cssW = size.width;
+        const cssH = size.height;
+        const pixelW = Math.max(1, Math.floor(cssW * dpr));
+        const pixelH = Math.max(1, Math.floor(cssH * dpr));
+        if (canvas.width !== pixelW || canvas.height !== pixelH) {
+            canvas.width = pixelW;
+            canvas.height = pixelH;
+        }
+        camera.updateMatrixWorld();
+        collectWorldBarSamples(ctx, statId, height, roles, resolveRole, camera, { width: cssW, height: cssH }, samplesRef.current, projectRef.current, maxDistance);
+        paintWorldBarSamples(canvas, samplesRef.current, dpr);
+    });
+    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" } }) }));
 }
 function FloatTextItem({ event, lifeMs }) {
     const [shown, setShown] = useState(false);
@@ -47,12 +63,24 @@ export function WorldFloatText({ height = 1.9, lifeMs = 950 }) {
     const ctx = useGameContext();
     const [floaters, setFloaters] = useState([]);
     const nextId = useRef(0);
+    const timers = useRef(new Set());
     useEffect(() => {
-        return ctx.game.events.on("entity.floatText", (event) => {
+        const pending = timers.current;
+        const off = ctx.game.events.on("entity.floatText", (event) => {
             const id = nextId.current++;
             setFloaters((current) => [...current, { id, position: event.position, event }]);
-            window.setTimeout(() => setFloaters((current) => current.filter((floater) => floater.id !== id)), lifeMs);
+            const timer = window.setTimeout(() => {
+                pending.delete(timer);
+                setFloaters((current) => current.filter((floater) => floater.id !== id));
+            }, lifeMs);
+            pending.add(timer);
         });
+        return () => {
+            off();
+            for (const timer of pending)
+                window.clearTimeout(timer);
+            pending.clear();
+        };
     }, [ctx, lifeMs]);
     return (_jsx(_Fragment, { children: floaters.map((floater) => (_jsx(Html, { position: [floater.position[0], floater.position[1] + height, floater.position[2]], center: true, distanceFactor: 12, zIndexRange: [30, 0], children: _jsx(FloatTextItem, { event: floater.event, lifeMs: lifeMs }) }, floater.id))) }));
 }
@@ -65,73 +93,92 @@ function TelegraphGeometry({ shape }) {
         return _jsx("circleGeometry", { args: [shape.radius, 40, -shape.angle / 2, shape.angle] });
     return _jsx("planeGeometry", { args: [shape.width, shape.length] });
 }
-function TelegraphDecal({ active, nowMs }) {
-    const progress = Math.max(0, Math.min(1, (nowMs - active.bornMs) / active.event.windupMs));
+function TelegraphDecal({ active }) {
+    const materialRef = useRef(null);
     const [x, y, z] = active.event.position;
     const dir = active.event.dir ?? 0;
     const shape = active.event.shape;
     const forwardOffset = shape.kind === "line" ? shape.length / 2 : 0;
     const color = active.event.kind === "danger" ? "#ef4444" : "#f59e0b";
-    const pulse = 0.45 + 0.5 * progress;
-    return (_jsxs("mesh", { position: [x + Math.sin(dir) * forwardOffset, y + 0.06, z + Math.cos(dir) * forwardOffset], rotation: [-Math.PI / 2, 0, shape.kind === "line" || shape.kind === "cone" ? -dir : 0], renderOrder: 999, children: [_jsx(TelegraphGeometry, { shape: shape }), _jsx("meshBasicMaterial", { color: color, transparent: true, opacity: pulse, side: THREE.DoubleSide, depthWrite: false, depthTest: false, toneMapped: false })] }));
+    useFrame(() => {
+        const material = materialRef.current;
+        if (material === null)
+            return;
+        material.opacity = telegraphPulseOpacity(active.bornMs, active.event.windupMs, performance.now());
+    });
+    return (_jsxs("mesh", { position: [x + Math.sin(dir) * forwardOffset, y + 0.06, z + Math.cos(dir) * forwardOffset], rotation: [-Math.PI / 2, 0, shape.kind === "line" || shape.kind === "cone" ? -dir : 0], renderOrder: 999, children: [_jsx(TelegraphGeometry, { shape: shape }), _jsx("meshBasicMaterial", { ref: materialRef, color: color, transparent: true, opacity: 0.45, side: THREE.DoubleSide, depthWrite: false, depthTest: false, toneMapped: false })] }));
 }
 export function WorldTelegraphs() {
     const ctx = useGameContext();
     const [telegraphs, setTelegraphs] = useState([]);
     const key = useRef(0);
-    const [nowMs, setNowMs] = useState(() => performance.now());
-    useFrame(() => setNowMs(performance.now()));
+    const timers = useRef(new Set());
     useEffect(() => {
-        return ctx.game.events.on("combat.telegraph", (event) => {
+        const pending = timers.current;
+        const off = ctx.game.events.on("combat.telegraph", (event) => {
             const entry = { key: key.current++, event, bornMs: performance.now() };
             setTelegraphs((current) => [...current, entry]);
-            window.setTimeout(() => setTelegraphs((current) => current.filter((t) => t.key !== entry.key)), event.windupMs + 120);
+            const timer = window.setTimeout(() => {
+                pending.delete(timer);
+                setTelegraphs((current) => current.filter((t) => t.key !== entry.key));
+            }, event.windupMs + 120);
+            pending.add(timer);
         });
+        const offCancel = ctx.game.events.on("combat.telegraphCancelled", (event) => {
+            setTelegraphs((current) => current.filter((t) => t.event.id !== event.id));
+        });
+        return () => {
+            off();
+            offCancel();
+            for (const timer of pending)
+                window.clearTimeout(timer);
+            pending.clear();
+        };
     }, [ctx]);
-    return (_jsx(_Fragment, { children: telegraphs.map((active) => (_jsx(TelegraphDecal, { active: active, nowMs: nowMs }, active.key))) }));
+    return (_jsx(_Fragment, { children: telegraphs.map((active) => (_jsx(TelegraphDecal, { active: active }, active.key))) }));
 }
 export function CombatCameraShake() {
     const ctx = useGameContext();
-    const camera = useThree((state) => state.camera);
-    const trauma = useRef(0);
-    const decay = useRef(4);
+    const shake = useCameraShake();
     useEffect(() => {
         return ctx.game.events.on("combat.hitReaction", (event) => {
             if (event.shake === undefined)
                 return;
-            trauma.current = Math.min(1, trauma.current + event.shake.amplitude);
-            decay.current = event.shake.decay;
+            shake.shake(event.shake.amplitude, event.shake.decay);
         });
-    }, [ctx]);
-    useFrame((_state, dt) => {
-        if (trauma.current <= 0.0001)
-            return;
-        const magnitude = trauma.current * trauma.current;
-        camera.position.x += (Math.random() * 2 - 1) * magnitude * 0.4;
-        camera.position.y += (Math.random() * 2 - 1) * magnitude * 0.4;
-        trauma.current = Math.max(0, trauma.current - decay.current * dt);
-    });
+    }, [ctx, shake]);
     return null;
 }
 export function ProjectileTracers({ lifeMs = 130 }) {
     const ctx = useGameContext();
     const [tracers, setTracers] = useState([]);
     const nextId = useRef(0);
+    const timers = useRef(new Set());
     useEffect(() => {
-        return ctx.game.events.on("projectile.settled", (event) => {
+        const unsub = ctx.game.events.on("projectile.settled", (event) => {
             const id = nextId.current++;
+            const start = new THREE.Vector3(event.origin[0], event.origin[1], event.origin[2]);
+            if (event.from === ctx.player.userId)
+                readFirstPersonMuzzle(start);
             setTracers((current) => [
                 ...current,
                 {
                     id,
-                    points: [
-                        new THREE.Vector3(event.origin[0], event.origin[1] + MUZZLE_HEIGHT, event.origin[2]),
-                        new THREE.Vector3(event.at[0], event.at[1], event.at[2]),
-                    ],
+                    points: [start, new THREE.Vector3(event.at[0], event.at[1], event.at[2])],
                 },
             ]);
-            window.setTimeout(() => setTracers((current) => current.filter((tracer) => tracer.id !== id)), lifeMs);
+            const handle = setTimeout(() => {
+                timers.current.delete(handle);
+                setTracers((current) => current.filter((tracer) => tracer.id !== id));
+            }, lifeMs);
+            timers.current.add(handle);
         });
+        return () => {
+            unsub();
+            for (const handle of timers.current)
+                clearTimeout(handle);
+            timers.current.clear();
+        };
     }, [ctx, lifeMs]);
     return (_jsx(_Fragment, { children: tracers.map((tracer) => (_jsx(Line, { points: tracer.points, color: "#fde68a", lineWidth: 2, transparent: true, opacity: 0.85 }, tracer.id))) }));
 }

package/dist/world/entityPose.d.ts

@@ -0,0 +1,14 @@
+export interface PoseWritable {
+    position: {
+        set(x: number, y: number, z: number): void;
+    };
+    rotation: {
+        y: number;
+    };
+}
+export interface PoseSource {
+    position: readonly [number, number, number];
+    rotationY: number;
+}
+export declare function writeEntityPose(target: PoseWritable, source: PoseSource): void;
+export declare function posesEqual(a: PoseSource, b: PoseSource): boolean;

package/dist/world/entityPose.js

@@ -0,0 +1,10 @@
+export function writeEntityPose(target, source) {
+    target.position.set(source.position[0], source.position[1], source.position[2]);
+    target.rotation.y = source.rotationY;
+}
+export function posesEqual(a, b) {
+    return (a.position[0] === b.position[0] &&
+        a.position[1] === b.position[1] &&
+        a.position[2] === b.position[2] &&
+        a.rotationY === b.rotationY);
+}

package/dist/world/telegraphPulse.d.ts

@@ -0,0 +1 @@
+export declare function telegraphPulseOpacity(bornMs: number, windupMs: number, nowMs: number): number;

package/dist/world/telegraphPulse.js

@@ -0,0 +1,4 @@
+export function telegraphPulseOpacity(bornMs, windupMs, nowMs) {
+    const progress = Math.max(0, Math.min(1, (nowMs - bornMs) / Math.max(1, windupMs)));
+    return 0.45 + 0.5 * progress;
+}