@jgengine/shell 0.5.0 → 0.7.0

package/dist/map/terrainMap.js

@@ -0,0 +1,79 @@
+import { isRegionField } from "@jgengine/core/world/regions";
+function mix(a, b, t) {
+    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
+}
+const DEFAULT_LAND_LOW = [46, 74, 45];
+const DEFAULT_LAND_HIGH = [180, 172, 128];
+const DEFAULT_WATER = [28, 74, 108];
+/**
+ * Bake a top-down image of a `TerrainField` (or `RegionField`) over `bounds`
+ * for the react `Minimap` / `WorldMap` background. Runs in the browser via a
+ * 2D canvas; renderer-side, so it lives in the shell.
+ */
+export function bakeTerrainMap(field, bounds, options = {}) {
+    const res = options.resolution ?? 160;
+    if (typeof document === "undefined")
+        return null;
+    const canvas = document.createElement("canvas");
+    canvas.width = res;
+    canvas.height = res;
+    const context = canvas.getContext("2d");
+    if (context === null)
+        return null;
+    const region = isRegionField(field) ? field : null;
+    const waterLevel = field.waterLevel ?? Number.NEGATIVE_INFINITY;
+    const worldW = bounds.maxX - bounds.minX;
+    const worldD = bounds.maxZ - bounds.minZ;
+    const landLow = options.landLow ?? DEFAULT_LAND_LOW;
+    const landHigh = options.landHigh ?? DEFAULT_LAND_HIGH;
+    const water = options.water ?? DEFAULT_WATER;
+    const heights = new Float32Array(res * res);
+    let minHeight = Number.POSITIVE_INFINITY;
+    let maxHeight = Number.NEGATIVE_INFINITY;
+    for (let py = 0; py < res; py += 1) {
+        for (let px = 0; px < res; px += 1) {
+            const worldX = bounds.minX + ((px + 0.5) / res) * worldW;
+            const worldZ = bounds.minZ + ((py + 0.5) / res) * worldD;
+            const height = field.sampleHeight(worldX, worldZ);
+            heights[py * res + px] = height;
+            if (height < minHeight)
+                minHeight = height;
+            if (height > maxHeight)
+                maxHeight = height;
+        }
+    }
+    const span = maxHeight - minHeight || 1;
+    const image = context.createImageData(res, res);
+    for (let py = 0; py < res; py += 1) {
+        for (let px = 0; px < res; px += 1) {
+            const index = py * res + px;
+            const height = heights[index];
+            const normalized = (height - minHeight) / span;
+            let color;
+            if (height < waterLevel) {
+                color = [...water];
+            }
+            else if (region !== null) {
+                const worldX = bounds.minX + ((px + 0.5) / res) * worldW;
+                const worldZ = bounds.minZ + ((py + 0.5) / res) * worldD;
+                const sample = region.sampleRegion(worldX, worldZ);
+                const shade = 0.55 + normalized * 0.5;
+                color = [
+                    Math.min(255, sample.tint[0] * 255 * shade),
+                    Math.min(255, sample.tint[1] * 255 * shade),
+                    Math.min(255, sample.tint[2] * 255 * shade),
+                ];
+            }
+            else {
+                color = mix(landLow, landHigh, normalized);
+            }
+            const offset = index * 4;
+            image.data[offset] = color[0];
+            image.data[offset + 1] = color[1];
+            image.data[offset + 2] = color[2];
+            image.data[offset + 3] = 255;
+        }
+    }
+    context.putImageData(image, 0, 0);
+    return { url: canvas.toDataURL("image/png"), bounds };
+}

package/dist/pointer/PointerOverlays.d.ts

@@ -0,0 +1,12 @@
+import type { ContextMenu, ContextVerb } from "@jgengine/core/interaction/contextMenu";
+import type { ScreenRect } from "@jgengine/core/scene/selection";
+export declare function MarqueeBox({ rect }: {
+    rect: ScreenRect;
+}): import("react").JSX.Element;
+export declare function ContextMenuView({ menu, x, y, onPick, onClose, }: {
+    menu: ContextMenu;
+    x: number;
+    y: number;
+    onPick: (verb: ContextVerb) => void;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/pointer/PointerOverlays.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MarqueeBox({ rect }) {
+    return (_jsx("div", { className: "pointer-events-none absolute z-40 rounded-sm border border-emerald-300/80 bg-emerald-300/15", style: {
+            left: rect.minX,
+            top: rect.minY,
+            width: rect.maxX - rect.minX,
+            height: rect.maxY - rect.minY,
+        } }));
+}
+export function ContextMenuView({ menu, x, y, onPick, onClose, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onPointerDown: onClose, onContextMenu: (event) => event.preventDefault() }), _jsxs("div", { className: "pointer-events-auto absolute z-50 min-w-40 overflow-hidden rounded-md border border-white/15 bg-neutral-900/95 py-1 shadow-2xl backdrop-blur-sm", style: { left: x, top: y }, onContextMenu: (event) => event.preventDefault(), children: [_jsx("div", { className: "border-b border-white/10 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/45", children: menu.kind === "entity" ? "Unit" : "Object" }), menu.verbs.map((verb, index) => (_jsx("button", { type: "button", disabled: verb.disabled === true, onPointerDown: (event) => {
+                            event.stopPropagation();
+                            if (verb.disabled === true)
+                                return;
+                            onPick(verb);
+                        }, className: "flex w-full items-center px-3 py-1.5 text-left text-[13px] text-white/85 hover:bg-emerald-400/20 hover:text-white disabled:cursor-not-allowed disabled:text-white/30 disabled:hover:bg-transparent", children: verb.label }, `${verb.command}-${index}`)))] })] }));
+}

package/dist/pointer/PointerProbe.d.ts

@@ -0,0 +1,4 @@
+import type { PointerService } from "./pointerService.js";
+export declare function PointerProbe({ service }: {
+    service: PointerService;
+}): null;

package/dist/pointer/PointerProbe.js

@@ -0,0 +1,27 @@
+import { useThree } from "@react-three/fiber";
+import { useEffect } from "react";
+export function PointerProbe({ service }) {
+    const camera = useThree((state) => state.camera);
+    const scene = useThree((state) => state.scene);
+    const gl = useThree((state) => state.gl);
+    const size = useThree((state) => state.size);
+    service.bind({ camera, scene, width: size.width, height: size.height });
+    useEffect(() => {
+        const el = gl.domElement;
+        const onMove = (event) => {
+            const rect = el.getBoundingClientRect();
+            const x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            const y = -(((event.clientY - rect.top) / rect.height) * 2 - 1);
+            service.setCursor(x, y, true);
+        };
+        const onLeave = () => service.setCursor(0, 0, false);
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerleave", onLeave);
+        return () => {
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerleave", onLeave);
+            service.bind(null);
+        };
+    }, [gl, service]);
+    return null;
+}

package/dist/pointer/pointerService.d.ts

@@ -0,0 +1,24 @@
+import * as THREE from "three";
+import type { PointerHit, PointerVec3 } from "@jgengine/core/input/pointer";
+export declare const POINTER_ENTITY_KEY = "jgEntityId";
+export declare const POINTER_OBJECT_KEY = "jgObjectId";
+interface PointerDeps {
+    camera: THREE.Camera;
+    scene: THREE.Scene;
+    width: number;
+    height: number;
+}
+export interface PointerService {
+    /** Cast the current cursor into the world; null when the cursor is off-canvas. */
+    worldHit(): PointerHit | null;
+    /** Project a world point to CSS pixels for the marquee / HUD; null before the probe binds. */
+    screenOf(world: PointerVec3): {
+        x: number;
+        y: number;
+    } | null;
+    hasCursor(): boolean;
+    bind(deps: PointerDeps | null): void;
+    setCursor(ndcX: number, ndcY: number, present: boolean): void;
+}
+export declare function createPointerService(): PointerService;
+export {};

package/dist/pointer/pointerService.js

@@ -0,0 +1,68 @@
+import * as THREE from "three";
+export const POINTER_ENTITY_KEY = "jgEntityId";
+export const POINTER_OBJECT_KEY = "jgObjectId";
+function tagOf(object, key) {
+    let cursor = object;
+    while (cursor !== null) {
+        const value = cursor.userData[key];
+        if (typeof value === "string")
+            return value;
+        cursor = cursor.parent;
+    }
+    return null;
+}
+export function createPointerService() {
+    const raycaster = new THREE.Raycaster();
+    const ndc = new THREE.Vector2();
+    const scratch = new THREE.Vector3();
+    const normalMatrix = new THREE.Matrix3();
+    const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+    let deps = null;
+    let cursorPresent = false;
+    return {
+        hasCursor: () => cursorPresent,
+        bind: (next) => {
+            deps = next;
+        },
+        setCursor: (ndcX, ndcY, present) => {
+            ndc.set(ndcX, ndcY);
+            cursorPresent = present;
+        },
+        worldHit() {
+            if (deps === null || !cursorPresent)
+                return null;
+            raycaster.setFromCamera(ndc, deps.camera);
+            const intersects = raycaster.intersectObjects(deps.scene.children, true);
+            for (const hit of intersects) {
+                if (!hit.object.isMesh)
+                    continue;
+                const point = [hit.point.x, hit.point.y, hit.point.z];
+                let normal = [0, 1, 0];
+                if (hit.face !== null && hit.face !== undefined) {
+                    normalMatrix.getNormalMatrix(hit.object.matrixWorld);
+                    scratch.copy(hit.face.normal).applyMatrix3(normalMatrix).normalize();
+                    normal = [scratch.x, scratch.y, scratch.z];
+                }
+                return {
+                    point,
+                    normal,
+                    entity: tagOf(hit.object, POINTER_ENTITY_KEY),
+                    object: tagOf(hit.object, POINTER_OBJECT_KEY),
+                };
+            }
+            const grounded = raycaster.ray.intersectPlane(groundPlane, scratch);
+            if (grounded === null)
+                return null;
+            return { point: [grounded.x, grounded.y, grounded.z], normal: [0, 1, 0], entity: null, object: null };
+        },
+        screenOf(world) {
+            if (deps === null)
+                return null;
+            scratch.set(world[0], world[1], world[2]).project(deps.camera);
+            return {
+                x: (scratch.x * 0.5 + 0.5) * deps.width,
+                y: (-scratch.y * 0.5 + 0.5) * deps.height,
+            };
+        },
+    };
+}

package/dist/registry.d.ts

@@ -1,4 +1,6 @@
-import type { ComponentType } from "react";
+import type { ComponentType, ReactNode } from "react";
 import type { PlayableGame as EnginePlayableGame } from "@jgengine/core/game/playableGame";
-export type PlayableGame = EnginePlayableGame<ComponentType, ComponentType>;
+import type { SceneEntity } from "@jgengine/core/scene/entityStore";
+export type RenderEntity = (entity: SceneEntity) => ReactNode;
+export type PlayableGame = EnginePlayableGame<ComponentType, ComponentType, RenderEntity>;
 export type GameRegistry = Record<string, () => Promise<PlayableGame>>;

package/dist/replay/useSessionRecorder.d.ts

@@ -0,0 +1,14 @@
+import { type RecordingBuffer, type RecordingBufferOptions } from "@jgengine/core/sensor/recordingBuffer";
+import type { EntityPosition } from "@jgengine/core/scene/entityStore";
+export interface RecordedPose {
+    position: EntityPosition;
+    rotationY: number;
+}
+/**
+ * Session-recording buffer (#120) for replay / photo mode / kill-cam: records
+ * an entity's pose on game-time every frame into a `RecordingBuffer`, which a
+ * game can then `seek()` to scrub, drive an observer cam ghost, or export a
+ * kill-cam clip. Recording rides on `ctx.time.now()`, so pause/fast-forward
+ * scrub the recording exactly like the live sim.
+ */
+export declare function useSessionRecorder(entityId: string, options?: RecordingBufferOptions): RecordingBuffer<RecordedPose>;

package/dist/replay/useSessionRecorder.js

@@ -0,0 +1,22 @@
+import { useFrame } from "@react-three/fiber";
+import { useMemo } from "react";
+import { createRecordingBuffer } from "@jgengine/core/sensor/recordingBuffer";
+import { useGameContext } from "@jgengine/react/provider";
+/**
+ * Session-recording buffer (#120) for replay / photo mode / kill-cam: records
+ * an entity's pose on game-time every frame into a `RecordingBuffer`, which a
+ * game can then `seek()` to scrub, drive an observer cam ghost, or export a
+ * kill-cam clip. Recording rides on `ctx.time.now()`, so pause/fast-forward
+ * scrub the recording exactly like the live sim.
+ */
+export function useSessionRecorder(entityId, options) {
+    const ctx = useGameContext();
+    const buffer = useMemo(() => createRecordingBuffer(options), []);
+    useFrame(() => {
+        const entity = ctx.scene.entity.get(entityId);
+        if (entity === null)
+            return;
+        buffer.append(ctx.time.now(), { position: entity.position, rotationY: entity.rotationY });
+    });
+    return buffer;
+}

package/dist/structures/GeneratedBuilding.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+export type BuildingFacade = "front" | "back" | "left" | "right" | "roof";
+export type BuildingPartKind = "wall" | "window" | "awning" | "airConditioner" | "clothesline" | "storefront" | "shutter" | "storeSign" | "roof" | "roofProp" | "guardrail" | "corner";
+export interface BuildingPartPlacement {
+    id: string;
+    kind: BuildingPartKind;
+    facade: BuildingFacade;
+    position: readonly [number, number, number];
+    rotationY: number;
+    scale: readonly [number, number, number];
+}
+export interface GeneratedBuildingData {
+    id: string;
+    parts: readonly BuildingPartPlacement[];
+}
+export interface BuildingMaterialPalette {
+    wall?: string;
+    window?: string;
+    awning?: string;
+    airConditioner?: string;
+    clothesline?: string;
+    storefront?: string;
+    shutter?: string;
+    storeSign?: string;
+    roof?: string;
+    roofProp?: string;
+    guardrail?: string;
+    corner?: string;
+}
+export interface BuildingKitRenderer {
+    renderPart?: (part: BuildingPartPlacement) => ReactNode | undefined;
+}
+export interface BuildingBlockProps {
+    part: BuildingPartPlacement;
+    palette?: BuildingMaterialPalette;
+}
+export interface GeneratedBuildingProps {
+    building: GeneratedBuildingData;
+    palette?: BuildingMaterialPalette;
+    kit?: BuildingKitRenderer;
+    visibleKinds?: readonly BuildingPartKind[];
+}
+export declare function BuildingBlock({ part, palette }: BuildingBlockProps): import("react").JSX.Element;
+export declare function GeneratedBuilding({ building, palette, kit, visibleKinds }: GeneratedBuildingProps): import("react").JSX.Element;

package/dist/structures/GeneratedBuilding.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+const DEFAULT_PALETTE = {
+    wall: "#83766a",
+    window: "#8ecae6",
+    awning: "#c2410c",
+    airConditioner: "#d4d4d8",
+    clothesline: "#facc15",
+    storefront: "#3f3f46",
+    shutter: "#52525b",
+    storeSign: "#f97316",
+    roof: "#57534e",
+    roofProp: "#14b8a6",
+    guardrail: "#a8a29e",
+    corner: "#6b6258",
+};
+function colorFor(kind, palette) {
+    return palette?.[kind] ?? DEFAULT_PALETTE[kind];
+}
+function normalFor(facade) {
+    if (facade === "front")
+        return [0, 1];
+    if (facade === "back")
+        return [0, -1];
+    if (facade === "left")
+        return [-1, 0];
+    if (facade === "right")
+        return [1, 0];
+    return [0, 0];
+}
+function outwardOffset(part) {
+    if (part.kind === "wall" || part.kind === "roof" || part.kind === "corner")
+        return 0;
+    if (part.kind === "window" || part.kind === "shutter" || part.kind === "storefront")
+        return 0.025;
+    if (part.kind === "awning" || part.kind === "storeSign")
+        return 0.09;
+    return 0.12;
+}
+function materialFor(part, palette) {
+    const color = colorFor(part.kind, palette);
+    if (part.kind === "window" || part.kind === "storefront") {
+        return _jsx("meshPhysicalMaterial", { color: color, roughness: 0.12, metalness: 0, transparent: true, opacity: 0.56 });
+    }
+    if (part.kind === "storeSign") {
+        return _jsx("meshStandardMaterial", { color: color, emissive: color, emissiveIntensity: 0.6, roughness: 0.5 });
+    }
+    if (part.kind === "roofProp") {
+        return _jsx("meshStandardMaterial", { color: color, roughness: 0.65, metalness: 0.1 });
+    }
+    return _jsx("meshStandardMaterial", { color: color, roughness: 0.88, metalness: 0 });
+}
+function BlockMesh({ part, palette }) {
+    const [nx, nz] = normalFor(part.facade);
+    const offset = outwardOffset(part);
+    const position = [
+        part.position[0] + nx * offset,
+        part.position[1],
+        part.position[2] + nz * offset,
+    ];
+    return (_jsxs("mesh", { position: position, rotation: [0, part.rotationY, 0], castShadow: true, receiveShadow: true, children: [_jsx("boxGeometry", { args: [part.scale[0], part.scale[1], part.scale[2]] }), materialFor(part, palette)] }));
+}
+export function BuildingBlock({ part, palette }) {
+    if (part.kind === "clothesline") {
+        const [nx, nz] = normalFor(part.facade);
+        const offset = outwardOffset(part);
+        const position = [
+            part.position[0] + nx * offset,
+            part.position[1],
+            part.position[2] + nz * offset,
+        ];
+        return (_jsxs("group", { position: position, rotation: [0, part.rotationY, 0], children: [_jsxs("mesh", { position: [0, 0, -0.09], castShadow: true, children: [_jsx("boxGeometry", { args: [part.scale[0], Math.max(part.scale[1], 0.025), 0.025] }), materialFor(part, palette)] }), _jsxs("mesh", { position: [0, 0, 0.09], castShadow: true, children: [_jsx("boxGeometry", { args: [part.scale[0], Math.max(part.scale[1], 0.025), 0.025] }), materialFor(part, palette)] })] }));
+    }
+    return _jsx(BlockMesh, { part: part, palette: palette });
+}
+export function GeneratedBuilding({ building, palette, kit, visibleKinds }) {
+    const visible = useMemo(() => (visibleKinds === undefined ? null : new Set(visibleKinds)), [visibleKinds]);
+    return (_jsx("group", { name: building.id, children: building.parts.map((part) => {
+            if (visible !== null && !visible.has(part.kind))
+                return null;
+            const rendered = kit?.renderPart?.(part);
+            if (rendered !== undefined)
+                return _jsx("group", { children: rendered }, part.id);
+            return _jsx(BuildingBlock, { part: part, palette: palette }, part.id);
+        }) }));
+}

package/dist/structures/PlacementGhost.d.ts

@@ -0,0 +1,8 @@
+import type { PlacementPreview } from "@jgengine/core/world/placementController";
+export interface PlacementGhostProps {
+    preview: PlacementPreview | null;
+    height?: number;
+    validColor?: string;
+    invalidColor?: string;
+}
+export declare function PlacementGhost({ preview, height, validColor, invalidColor, }: PlacementGhostProps): import("react").JSX.Element | null;

package/dist/structures/PlacementGhost.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { quarterTurnsToRotationY } from "@jgengine/core/world/placementController";
+export function PlacementGhost({ preview, height = 1, validColor = "#34d399", invalidColor = "#f87171", }) {
+    const footprint = preview?.footprint;
+    const size = useMemo(() => [footprint?.w ?? 1, height, footprint?.d ?? 1], [footprint?.w, footprint?.d, height]);
+    if (preview === null)
+        return null;
+    const color = preview.valid ? validColor : invalidColor;
+    return (_jsxs("group", { position: [preview.center[0], preview.y, preview.center[1]], "rotation-y": quarterTurnsToRotationY(preview.quarterTurns), children: [_jsxs("mesh", { "position-y": height / 2, children: [_jsx("boxGeometry", { args: size }), _jsx("meshStandardMaterial", { color: color, transparent: true, opacity: 0.35, depthWrite: false, emissive: color, emissiveIntensity: 0.4 })] }), _jsxs("mesh", { "rotation-x": -Math.PI / 2, "position-y": 0.02, children: [_jsx("ringGeometry", { args: [Math.max(size[0], size[2]) * 0.5, Math.max(size[0], size[2]) * 0.5 + 0.12, 40] }), _jsx("meshBasicMaterial", { color: color, transparent: true, opacity: 0.85 })] })] }));
+}

package/dist/structures/index.d.ts

@@ -0,0 +1,2 @@
+export { BuildingBlock, GeneratedBuilding, type BuildingBlockProps, type GeneratedBuildingProps, } from "./GeneratedBuilding.js";
+export { PlacementGhost, type PlacementGhostProps } from "./PlacementGhost.js";

package/dist/structures/index.js

@@ -0,0 +1,2 @@
+export { BuildingBlock, GeneratedBuilding, } from "./GeneratedBuilding.js";
+export { PlacementGhost } from "./PlacementGhost.js";

package/dist/structures.d.ts

@@ -0,0 +1 @@
+export * from "./structures/index.js";

package/dist/structures.js

@@ -0,0 +1 @@
+export * from "./structures/index.js";

package/dist/terrain/CarvedTerrain.d.ts

@@ -0,0 +1,22 @@
+import { type ThreeElements } from "@react-three/fiber";
+import type { TerrainField } from "@jgengine/core/world/terrain";
+import { type FieldGroundOptions } from "./terrainMath.js";
+export interface CarvedTerrainProps extends Omit<ThreeElements["mesh"], "args" | "children" | "geometry" | "material"> {
+    /** The terrain field to mesh — a `CarvableField` renders its craters and mounds. */
+    field: TerrainField;
+    size?: FieldGroundOptions["size"];
+    segments?: FieldGroundOptions["segments"];
+    center?: FieldGroundOptions["center"];
+    colors?: FieldGroundOptions["colors"];
+    heightRange?: FieldGroundOptions["heightRange"];
+    roughness?: number;
+    metalness?: number;
+    /** Bump after a runtime carve/deposit to re-mesh the deformed surface. */
+    epoch?: number;
+}
+/**
+ * Renders a `TerrainField` as a deformed ground mesh — the crater/mound view for destructible terrain.
+ * Because the geometry samples `field.sampleHeight`, a `CarvableField.carve(...)` shows as a real bowl
+ * once `epoch` changes. Pair with `InstancedBodies` to see debris resting in the crater it blasted.
+ */
+export declare function CarvedTerrain({ field, size, segments, center, colors, heightRange, roughness, metalness, receiveShadow, epoch, ...meshProps }: CarvedTerrainProps): import("react").JSX.Element;

package/dist/terrain/CarvedTerrain.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "@react-three/fiber";
+import { useEffect, useMemo } from "react";
+import * as THREE from "three";
+import { createFieldGroundGeometry } from "./terrainMath.js";
+/**
+ * Renders a `TerrainField` as a deformed ground mesh — the crater/mound view for destructible terrain.
+ * Because the geometry samples `field.sampleHeight`, a `CarvableField.carve(...)` shows as a real bowl
+ * once `epoch` changes. Pair with `InstancedBodies` to see debris resting in the crater it blasted.
+ */
+export function CarvedTerrain({ field, size, segments, center, colors, heightRange, roughness = 0.95, metalness = 0, receiveShadow = true, epoch = 0, ...meshProps }) {
+    const geometry = useMemo(() => createFieldGroundGeometry(field, { size, segments, center, colors, heightRange }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [field, size, segments, center, colors, heightRange, epoch]);
+    const material = useMemo(() => new THREE.MeshStandardMaterial({ color: "#ffffff", roughness, metalness, vertexColors: true }), [metalness, roughness]);
+    useEffect(() => () => geometry.dispose(), [geometry]);
+    useEffect(() => () => material.dispose(), [material]);
+    return _jsx("mesh", { ...meshProps, geometry: geometry, material: material, receiveShadow: receiveShadow });
+}

package/dist/terrain/EditableGround.d.ts

@@ -0,0 +1,11 @@
+import type { Aabb } from "@jgengine/core/world/geometry";
+import type { EditableTerrain } from "@jgengine/core/world/terraform";
+export interface EditableGroundProps {
+    terrain: Pick<EditableTerrain, "sampleHeight" | "surfaceAt">;
+    bounds: Aabb;
+    segments?: number;
+    version?: number;
+    baseColor?: string;
+    surfaceColors?: Record<string, string>;
+}
+export declare function EditableGround({ terrain, bounds, segments, version, baseColor, surfaceColors, }: EditableGroundProps): import("react").JSX.Element;

package/dist/terrain/EditableGround.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import * as THREE from "three";
+const DEFAULT_SURFACE_COLORS = {
+    path: "#b8a06a",
+    gravel: "#8d8d84",
+    stone: "#7c7f86",
+    grass: "#4b7f3f",
+};
+export function EditableGround({ terrain, bounds, segments = 96, version = 0, baseColor = "#3f6b3a", surfaceColors = DEFAULT_SURFACE_COLORS, }) {
+    const geometry = useMemo(() => {
+        void version;
+        const width = bounds.maxX - bounds.minX;
+        const depth = bounds.maxZ - bounds.minZ;
+        const geo = new THREE.PlaneGeometry(width, depth, segments, segments);
+        geo.rotateX(-Math.PI / 2);
+        const position = geo.attributes.position;
+        const base = new THREE.Color(baseColor);
+        const colors = new Float32Array(position.count * 3);
+        const cx = (bounds.minX + bounds.maxX) / 2;
+        const cz = (bounds.minZ + bounds.maxZ) / 2;
+        for (let index = 0; index < position.count; index += 1) {
+            const x = position.getX(index) + cx;
+            const z = position.getZ(index) + cz;
+            position.setY(index, terrain.sampleHeight(x, z));
+            const surface = terrain.surfaceAt(x, z);
+            const color = surface !== null && surfaceColors[surface] !== undefined ? new THREE.Color(surfaceColors[surface]) : base;
+            colors[index * 3] = color.r;
+            colors[index * 3 + 1] = color.g;
+            colors[index * 3 + 2] = color.b;
+        }
+        geo.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+        geo.computeVertexNormals();
+        return geo;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [terrain, bounds, segments, version, baseColor, surfaceColors]);
+    return (_jsx("mesh", { geometry: geometry, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 0.95, metalness: 0 }) }));
+}

package/dist/terrain/GrassField.d.ts

@@ -0,0 +1,21 @@
+import { type ThreeElements } from "@react-three/fiber";
+import { type GrassBladeGeometryOptions, type GrassRange } from "./grassGeometry.js";
+import { type GrassMaterialOptions, type GrassWindOptions } from "./grassMaterial.js";
+import type { TerrainArea, TerrainHeightSampler } from "./terrainMath.js";
+export interface GrassFieldProps extends Omit<ThreeElements["mesh"], "args" | "children" | "geometry" | "material"> {
+    count?: number;
+    density?: number;
+    area?: TerrainArea;
+    seed?: GrassBladeGeometryOptions["seed"];
+    segments?: number;
+    bladeHeight?: GrassRange;
+    bladeWidth?: GrassRange;
+    bladeBend?: GrassRange;
+    heightAt?: TerrainHeightSampler;
+    colorBase?: GrassMaterialOptions["colorBase"];
+    colorTip?: GrassMaterialOptions["colorTip"];
+    colorVariation?: number;
+    wind?: GrassWindOptions | false;
+    roughness?: number;
+}
+export declare function GrassField({ count, density, area, seed, segments, bladeHeight, bladeWidth, bladeBend, heightAt, colorBase, colorTip, colorVariation, wind, roughness, castShadow, receiveShadow, frustumCulled, ...meshProps }: GrassFieldProps): import("react").JSX.Element;

package/dist/terrain/GrassField.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { useEffect, useMemo } from "react";
+import { createGrassBladeGeometry } from "./grassGeometry.js";
+import { createGrassMaterial } from "./grassMaterial.js";
+export function GrassField({ count = 6000, density = 1, area = 40, seed = 1, segments = 4, bladeHeight, bladeWidth, bladeBend, heightAt, colorBase, colorTip, colorVariation, wind, roughness, castShadow = false, receiveShadow = true, frustumCulled = false, ...meshProps }) {
+    const geometry = useMemo(() => createGrassBladeGeometry({
+        count,
+        area,
+        seed,
+        segments,
+        height: bladeHeight,
+        width: bladeWidth,
+        bend: bladeBend,
+        heightAt,
+    }), [area, bladeBend, bladeHeight, bladeWidth, count, heightAt, seed, segments]);
+    const handle = useMemo(() => createGrassMaterial({
+        colorBase,
+        colorTip,
+        colorVariation,
+        wind,
+        roughness,
+    }), [colorBase, colorTip, colorVariation, roughness, wind]);
+    geometry.instanceCount = Math.floor(Math.max(0, Math.min(1, density)) * count);
+    useFrame((state) => {
+        handle.uniforms.uTime.value = state.clock.elapsedTime;
+    });
+    useEffect(() => () => geometry.dispose(), [geometry]);
+    useEffect(() => () => handle.material.dispose(), [handle]);
+    return (_jsx("mesh", { ...meshProps, geometry: geometry, material: handle.material, castShadow: castShadow, receiveShadow: receiveShadow, frustumCulled: frustumCulled }));
+}

package/dist/terrain/ProceduralGround.d.ts

@@ -0,0 +1,9 @@
+import { type ThreeElements } from "@react-three/fiber";
+import { type ProceduralTerrainConfig, type TerrainVertexColorOptions } from "./terrainMath.js";
+export interface ProceduralGroundProps extends Omit<ThreeElements["mesh"], "args" | "children" | "geometry" | "material"> {
+    terrain?: ProceduralTerrainConfig;
+    colors?: TerrainVertexColorOptions;
+    roughness?: number;
+    metalness?: number;
+}
+export declare function ProceduralGround({ terrain, colors, roughness, metalness, receiveShadow, ...meshProps }: ProceduralGroundProps): import("react").JSX.Element;

package/dist/terrain/ProceduralGround.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "@react-three/fiber";
+import { useEffect, useMemo } from "react";
+import * as THREE from "three";
+import { createProceduralGroundGeometry } from "./terrainMath.js";
+export function ProceduralGround({ terrain, colors, roughness = 0.94, metalness = 0, receiveShadow = true, ...meshProps }) {
+    const geometry = useMemo(() => createProceduralGroundGeometry(terrain, colors), [colors, terrain]);
+    const material = useMemo(() => new THREE.MeshStandardMaterial({
+        color: "#ffffff",
+        roughness,
+        metalness,
+        vertexColors: true,
+    }), [metalness, roughness]);
+    useEffect(() => () => geometry.dispose(), [geometry]);
+    useEffect(() => () => material.dispose(), [material]);
+    return _jsx("mesh", { ...meshProps, geometry: geometry, material: material, receiveShadow: receiveShadow });
+}

package/dist/terrain/TerraformBrushCursor.d.ts

@@ -0,0 +1,8 @@
+import type { TerraformMode } from "@jgengine/core/world/terraform";
+export interface TerraformBrushCursorProps {
+    center: readonly [number, number] | null;
+    y?: number;
+    radius: number;
+    mode: TerraformMode;
+}
+export declare function TerraformBrushCursor({ center, y, radius, mode }: TerraformBrushCursorProps): import("react").JSX.Element | null;