@jgengine/editor 0.10.0

package/dist/RuntimePlayBridge.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useGameContext } from "@jgengine/react/provider";
+import { MICRO } from "./chromeStyles.js";
+const PUBLISH_MS = 100;
+function metaValues(meta) {
+    if (meta === null || typeof meta !== "object" || Array.isArray(meta))
+        return undefined;
+    const out = {};
+    for (const [key, value] of Object.entries(meta)) {
+        if (typeof value === "number" ||
+            typeof value === "string" ||
+            typeof value === "boolean" ||
+            value === null) {
+            out[key] = value;
+        }
+    }
+    return Object.keys(out).length === 0 ? undefined : out;
+}
+/**
+ * Publishes live scene entities onto the editor reverse channel and gates `ctx.time` against the
+ * host play-control (pause / step). Mount only in editor play mode.
+ * @internal
+ */
+export function RuntimePlayPublisher({ api }) {
+    const ctx = useGameContext();
+    useEffect(() => {
+        const publish = () => {
+            const entities = ctx.scene.entity.list().map((entity) => {
+                const values = metaValues(entity.meta);
+                return {
+                    id: entity.id,
+                    position: { x: entity.position[0], y: entity.position[1], z: entity.position[2] },
+                    rotationY: entity.rotationY,
+                    ...(values === undefined ? {} : { values }),
+                };
+            });
+            const play = api.getPlayControl();
+            api.getLiveSync().pushRuntimeDelta({
+                at: Date.now(),
+                entities,
+                tunables: {
+                    paused: play.paused,
+                    pendingSteps: play.pendingSteps,
+                    now: ctx.time.now(),
+                },
+            });
+        };
+        publish();
+        const timer = setInterval(publish, PUBLISH_MS);
+        return () => clearInterval(timer);
+    }, [api, ctx]);
+    useFrame(() => {
+        const play = api.getPlayControl();
+        if (!play.paused) {
+            if (ctx.time.isPaused())
+                ctx.time.play();
+            return;
+        }
+        if (play.pendingSteps > 0) {
+            if (ctx.time.isPaused())
+                ctx.time.play();
+            api.setPlayControl({ paused: true, pendingSteps: play.pendingSteps - 1 });
+            return;
+        }
+        if (!ctx.time.isPaused())
+            ctx.time.pause();
+    }, -1);
+    useFrame(() => {
+        const play = api.getPlayControl();
+        if (play.paused && play.pendingSteps === 0 && !ctx.time.isPaused()) {
+            ctx.time.pause();
+        }
+    }, 1);
+    return null;
+}
+/**
+ * Play-mode chrome: pause/step controls plus a compact reverse-channel entity inspector.
+ * Transform nudges go through `runtime_set` (document write-back by default).
+ * @internal
+ */
+export function RuntimePlayInspectorChrome({ api, onExit, }) {
+    const [play, setPlay] = useState(() => api.getPlayControl());
+    const [summary, setSummary] = useState(null);
+    const [selectedId, setSelectedId] = useState(null);
+    const [detail, setDetail] = useState("");
+    useEffect(() => api.subscribePlayControl(setPlay), [api]);
+    useEffect(() => {
+        const tick = () => {
+            const result = api.handle({ method: "runtime_summary" });
+            if (result.ok) {
+                setSummary(result.result);
+            }
+        };
+        tick();
+        const timer = setInterval(tick, PUBLISH_MS);
+        return () => clearInterval(timer);
+    }, [api]);
+    useEffect(() => {
+        if (selectedId === null) {
+            setDetail("");
+            return;
+        }
+        const got = api.handle({ method: "runtime_get", id: selectedId });
+        if (!got.ok) {
+            setDetail(got.error ?? "missing");
+            return;
+        }
+        setDetail(JSON.stringify(got.result, null, 2));
+    }, [api, selectedId, summary?.entityCount, play.pendingSteps, play.paused]);
+    const pause = () => {
+        api.handle({ method: "runtime_pause" });
+    };
+    const resume = () => {
+        api.handle({ method: "runtime_resume" });
+    };
+    const step = () => {
+        api.handle({ method: "runtime_step", frames: 1 });
+    };
+    const nudgeSelected = (axis, delta) => {
+        if (selectedId === null)
+            return;
+        const got = api.handle({ method: "runtime_get", id: selectedId });
+        if (!got.ok)
+            return;
+        const entity = got.result.entity;
+        const position = entity?.position ?? { x: 0, y: 0, z: 0 };
+        api.handle({
+            method: "runtime_set",
+            id: selectedId,
+            position: {
+                x: position.x + (axis === "x" ? delta : 0),
+                y: position.y,
+                z: position.z + (axis === "z" ? delta : 0),
+            },
+        });
+    };
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 z-50 flex flex-col", children: [_jsx("div", { className: "pointer-events-none flex justify-center pt-2", children: _jsxs("div", { className: "pointer-events-auto flex items-center gap-2 rounded-full border border-white/10 bg-black/75 px-3 py-1.5 text-[11px] text-neutral-100 shadow-lg shadow-black/40 backdrop-blur-md", children: [_jsx("span", { className: "text-neutral-300", children: play.paused ? "❚❚ Paused" : "▶ Playing" }), _jsx("button", { type: "button", className: "rounded-md bg-white/[0.08] px-2 py-0.5 hover:bg-white/15", onClick: () => (play.paused ? resume() : pause()), children: play.paused ? "Resume" : "Pause" }), _jsxs("button", { type: "button", className: "rounded-md bg-white/[0.08] px-2 py-0.5 hover:bg-white/15 disabled:opacity-40", onClick: step, disabled: !play.paused, children: ["Step", play.pendingSteps > 0 ? ` (${play.pendingSteps})` : ""] }), _jsx("button", { type: "button", className: "rounded-md bg-white/[0.08] px-2 py-0.5 hover:bg-white/15", onClick: onExit, children: "Editor (F2+E)" })] }) }), _jsxs("aside", { className: "pointer-events-auto ml-auto mt-2 mr-2 flex w-72 max-h-[70vh] flex-col overflow-hidden rounded-xl border border-white/[0.08] bg-[#0d0f13]/95 text-[11px] text-neutral-200 shadow-2xl shadow-black/50 backdrop-blur-md", children: [_jsxs("div", { className: "flex items-center border-b border-white/[0.06] px-3 py-2", children: [_jsx("div", { className: MICRO, children: "Runtime" }), _jsxs("div", { className: "ml-auto text-neutral-500", children: [summary?.entityCount ?? 0, " entities"] })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: [(summary?.entities ?? []).map((entity) => (_jsxs("button", { type: "button", className: `mb-1 block w-full truncate rounded-md px-2 py-1 text-left ${selectedId === entity.id ? "bg-cyan-500/20 text-cyan-100" : "hover:bg-white/[0.06]"}`, onClick: () => setSelectedId(entity.id), children: [entity.id, entity.valueKeys.length > 0 ? (_jsx("span", { className: "ml-1 text-neutral-500", children: entity.valueKeys.join(",") })) : null] }, entity.id))), (summary?.entities.length ?? 0) === 0 ? (_jsx("div", { className: "px-2 py-3 text-neutral-500", children: "No live entities yet \u2014 play or push_runtime_delta." })) : null] }), selectedId !== null ? (_jsxs("div", { className: "border-t border-white/[0.06] p-2", children: [_jsxs("div", { className: "mb-1 flex gap-1", children: [_jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2 py-1 hover:bg-white/15", onClick: () => nudgeSelected("x", -1), children: "\u2212X" }), _jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2 py-1 hover:bg-white/15", onClick: () => nudgeSelected("x", 1), children: "+X" }), _jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2 py-1 hover:bg-white/15", onClick: () => nudgeSelected("z", -1), children: "\u2212Z" }), _jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2 py-1 hover:bg-white/15", onClick: () => nudgeSelected("z", 1), children: "+Z" })] }), _jsx("pre", { className: "max-h-40 overflow-auto rounded-md border border-white/[0.06] bg-black/40 p-2 text-[10px] text-neutral-400", children: detail }), _jsx("div", { className: "mt-1 text-[10px] text-neutral-500", children: "Tweaks write back to the scene document (undoable)." })] })) : null] })] }));
+}

package/dist/ScatterPreview.d.ts

@@ -0,0 +1,11 @@
+import type { EditorHostApi } from "./session.js";
+/**
+ * Deterministic instanced preview of every foliage/scatter region in the document, grounded on the
+ * sculpt terrain (or the game's ground) and rebuilt whenever a region or its density changes. Renders
+ * real per-species proxy models through the shared `InstancedScatter` primitive — the same renderer a
+ * game uses to consume `resolveScatter` at runtime.
+ * @internal — mounted by `EditorApp`; not a game-author entry point.
+ */
+export declare const ScatterPreview: import("react").MemoExoticComponent<({ api }: {
+    api: EditorHostApi;
+}) => import("react").JSX.Element>;

package/dist/ScatterPreview.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState } from "react";
+import { editableTerrainFromSnapshot } from "@jgengine/core/world/terraform";
+import { resolveScatter } from "@jgengine/core/world/scatterRegion";
+import { useGameContext } from "@jgengine/react/provider";
+import { InstancedScatter } from "@jgengine/shell/scatter";
+const MAX_INSTANCES = 20000;
+/**
+ * Deterministic instanced preview of every foliage/scatter region in the document, grounded on the
+ * sculpt terrain (or the game's ground) and rebuilt whenever a region or its density changes. Renders
+ * real per-species proxy models through the shared `InstancedScatter` primitive — the same renderer a
+ * game uses to consume `resolveScatter` at runtime.
+ * @internal — mounted by `EditorApp`; not a game-author entry point.
+ */
+export const ScatterPreview = memo(function ScatterPreview({ api }) {
+    const ctx = useGameContext();
+    const session = api.getSession();
+    const [, setTick] = useState(0);
+    useEffect(() => session.subscribe(() => setTick((value) => value + 1)), [session]);
+    const state = session.getState();
+    const snapshot = state.document.terrain ?? null;
+    const baseGround = ctx.world.ground;
+    const terrain = useMemo(() => {
+        if (snapshot !== null)
+            return editableTerrainFromSnapshot(snapshot, baseGround);
+        return { sampleHeight: baseGround.sampleHeight, sampleNormal: baseGround.sampleNormal };
+    }, [snapshot, baseGround]);
+    const instances = useMemo(() => resolveScatter(state.document, terrain), [state.document, terrain]);
+    return _jsx(InstancedScatter, { instances: instances, maxInstances: MAX_INSTANCES });
+});

package/dist/SchemaInspector.d.ts

@@ -0,0 +1,19 @@
+import { type ParamSchema } from "@jgengine/core/scene/sceneKinds";
+/** A patch to a single meta key, coalesced under a stable undo key. */
+export type MetaPatch = (patch: Record<string, unknown>, coalesce: string) => void;
+/**
+ * Renders any parameter schema as an inspector panel — one row per field
+ * (range/number/bool/select/color/text/seed/weighted-list) plus an optional `note` readout. Fully
+ * schema-driven: a new studio or asset generator needs no new JSX here. Drives both registered scene
+ * kinds (scatter, water, poles) and generator assets (building, bookcase) — the proof that the #809
+ * seam owns the inspector. Replaces the hand-written per-kind field blocks (`ScatterFields`).
+ * @internal — mounted by `EditorChrome`'s inspector; not a game-author entry point.
+ */
+export declare function SchemaInspector({ schema, label, accent, note, meta, onMeta, }: {
+    schema: ParamSchema;
+    label: string;
+    accent?: string;
+    note?: string;
+    meta: Record<string, unknown> | undefined;
+    onMeta: MetaPatch;
+}): import("react").JSX.Element;

package/dist/SchemaInspector.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { parseParams, randomizeGroupParams, resetGroupParams, } from "@jgengine/core/scene/sceneKinds";
+const INPUT = "rounded-md border border-white/10 bg-black/40 px-2 py-1 outline-none transition-colors placeholder:text-neutral-600 focus:border-cyan-400/60 focus:bg-black/60";
+const MICRO = "text-[9px] font-semibold uppercase tracking-wider text-neutral-500";
+function labelOf(field) {
+    return field.label ?? field.key;
+}
+function FieldRow({ field, meta, onMeta }) {
+    const params = parseParams({ fields: [field] }, meta);
+    const coalesce = `kind:${field.key}`;
+    switch (field.type) {
+        case "range": {
+            const value = params[field.key];
+            return (_jsxs("label", { className: "block space-y-1", children: [_jsxs("span", { className: "flex items-center justify-between", children: [_jsx("span", { className: MICRO, children: labelOf(field) }), _jsxs("span", { className: "text-cyan-200", children: [value.toFixed(field.step !== undefined && field.step >= 1 ? 0 : 2), field.unit ?? ""] })] }), _jsx("input", { type: "range", min: field.min, max: field.max, step: field.step ?? (field.max - field.min) / 100, value: value, className: "w-full accent-emerald-400", onChange: (event) => onMeta({ [field.key]: Number(event.target.value) }, coalesce) })] }));
+        }
+        case "number": {
+            const value = params[field.key];
+            return (_jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: MICRO, children: labelOf(field) }), _jsx("input", { type: "number", step: field.step ?? 1, className: `w-32 ${INPUT}`, value: value, onChange: (event) => {
+                            const next = Number(event.target.value);
+                            if (Number.isFinite(next))
+                                onMeta({ [field.key]: next }, coalesce);
+                        } })] }));
+        }
+        case "bool": {
+            const value = params[field.key];
+            return (_jsxs("label", { className: "flex items-center gap-1.5 text-[10px] text-neutral-400", children: [_jsx("input", { type: "checkbox", className: "accent-emerald-400", checked: value, onChange: (event) => onMeta({ [field.key]: event.target.checked }, coalesce) }), labelOf(field)] }));
+        }
+        case "select": {
+            const value = params[field.key];
+            return (_jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: MICRO, children: labelOf(field) }), _jsx("select", { className: `w-32 ${INPUT}`, value: value, onChange: (event) => onMeta({ [field.key]: event.target.value }, coalesce), children: field.options.map((option) => (_jsx("option", { value: option.value, children: option.label ?? option.value }, option.value))) })] }));
+        }
+        case "color": {
+            const value = params[field.key];
+            return (_jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: MICRO, children: labelOf(field) }), _jsx("input", { type: "color", className: "h-7 w-14 cursor-pointer rounded-md border border-white/10 bg-black/40", value: value, onChange: (event) => onMeta({ [field.key]: event.target.value }, coalesce) })] }));
+        }
+        case "text": {
+            const value = params[field.key];
+            return (_jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: MICRO, children: labelOf(field) }), _jsx("input", { className: `w-32 min-w-0 ${INPUT}`, value: value, onChange: (event) => onMeta({ [field.key]: event.target.value }, coalesce) })] }));
+        }
+        case "seed": {
+            const value = params[field.key];
+            return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: MICRO, children: labelOf(field) }), _jsx("input", { className: `w-full min-w-0 ${INPUT}`, value: value, placeholder: "reroll\u2026", onChange: (event) => onMeta({ [field.key]: event.target.value }, coalesce) })] }), _jsx("button", { type: "button", className: "shrink-0 rounded-md bg-white/[0.04] px-2 py-1 text-neutral-300 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/10", title: "Reroll seed", onClick: () => onMeta({ [field.key]: `r${Math.abs(Math.round((value.length + 1) * 2654435761)).toString(36).slice(0, 6)}${value.length}` }, coalesce), children: "\u27F3" })] }));
+        }
+        case "weightedList": {
+            const list = params[field.key];
+            const set = (next) => onMeta({ [field.key]: next }, coalesce);
+            return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: MICRO, children: labelOf(field) }), list.map((entry, index) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { className: `min-w-0 flex-1 ${INPUT}`, value: entry.item, placeholder: field.itemLabel ?? "id", onChange: (event) => set(list.map((e, i) => (i === index ? { ...e, item: event.target.value } : e))) }), _jsx("input", { type: "number", step: 1, min: 0, className: `w-14 ${INPUT}`, value: entry.weight, onChange: (event) => set(list.map((e, i) => (i === index ? { ...e, weight: Math.max(0, Number(event.target.value)) } : e))) }), _jsx("button", { type: "button", className: "rounded-md bg-white/[0.04] px-1.5 py-1 text-neutral-400 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-rose-500/20 hover:text-rose-200", disabled: list.length <= 1, onClick: () => set(list.filter((_, i) => i !== index)), children: "\u00D7" })] }, index))), _jsx("button", { type: "button", className: "w-full rounded-md bg-white/[0.04] px-2 py-1 text-[10px] text-neutral-300 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/10", onClick: () => set([...list, { item: "", weight: 1 }]), children: "+ row" })] }));
+        }
+        case "action":
+            return null; // Action buttons are rendered by the group section, which owns the whole schema.
+    }
+}
+/** A schema action button (randomize / reset a group) — computed patches from the core helpers. */
+function ActionButton({ field, schema, onMeta }) {
+    const run = () => onMeta(field.action === "randomize" ? randomizeGroupParams(schema, field.group, Math.random) : resetGroupParams(schema, field.group), `${field.action}:${field.group ?? "all"}`);
+    return (_jsxs("button", { type: "button", className: "w-full rounded-md bg-white/[0.06] px-2 py-1 text-[10px] font-medium text-neutral-200 ring-1 ring-inset ring-white/[0.08] transition-colors hover:bg-white/12", onClick: run, children: [field.action === "randomize" ? "🎲 " : "↺ ", labelOf(field)] }));
+}
+/** A collapsible group section: header (click to toggle) + its fields + any action buttons. */
+function GroupSection({ title, accent, fields, schema, meta, onMeta, defaultCollapsed, }) {
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    return (_jsxs("div", { className: "rounded-md border border-white/[0.06]", children: [_jsxs("button", { type: "button", className: "flex w-full items-center gap-1 px-2 py-1 text-left text-[9px] font-semibold uppercase tracking-[0.12em] text-neutral-300 transition-colors hover:bg-white/[0.04]", onClick: () => setCollapsed((value) => !value), children: [_jsx("span", { className: "text-neutral-500", children: collapsed ? "▸" : "▾" }), _jsx("span", { style: { color: accent }, children: title })] }), collapsed ? null : (_jsx("div", { className: "space-y-2 px-2 pb-2", children: fields.map((field) => field.type === "action" ? (_jsx(ActionButton, { field: field, schema: schema, onMeta: onMeta }, field.key)) : (_jsx(FieldRow, { field: field, meta: meta, onMeta: onMeta }, field.key))) }))] }));
+}
+/**
+ * Renders any parameter schema as an inspector panel — one row per field
+ * (range/number/bool/select/color/text/seed/weighted-list) plus an optional `note` readout. Fully
+ * schema-driven: a new studio or asset generator needs no new JSX here. Drives both registered scene
+ * kinds (scatter, water, poles) and generator assets (building, bookcase) — the proof that the #809
+ * seam owns the inspector. Replaces the hand-written per-kind field blocks (`ScatterFields`).
+ * @internal — mounted by `EditorChrome`'s inspector; not a game-author entry point.
+ */
+export function SchemaInspector({ schema, label, accent = "#34d399", note, meta, onMeta, }) {
+    const groups = schema.groups ?? [];
+    const grouped = new Set(groups.map((group) => group.id));
+    // Fields with no group (or a group not declared in schema.groups) render first, headerless.
+    const ungrouped = schema.fields.filter((field) => field.group === undefined || !grouped.has(field.group));
+    return (_jsxs("div", { className: "space-y-2 rounded-lg border p-2.5", style: { borderColor: `${accent}26`, backgroundColor: `${accent}10` }, children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-[0.14em]", style: { color: accent }, children: label }), ungrouped.map((field) => field.type === "action" ? (_jsx(ActionButton, { field: field, schema: schema, onMeta: onMeta }, field.key)) : (_jsx(FieldRow, { field: field, meta: meta, onMeta: onMeta }, field.key))), groups.map((group) => (_jsx(GroupSection, { title: group.label, accent: accent, fields: schema.fields.filter((field) => field.group === group.id), schema: schema, meta: meta, onMeta: onMeta, defaultCollapsed: group.collapsed ?? false }, group.id))), note !== undefined && note.length > 0 ? _jsx("div", { className: "text-[10px] text-neutral-500", children: note }) : null] }));
+}

package/dist/SelectionGizmo.d.ts

@@ -0,0 +1,25 @@
+import type { EditorSession } from "@jgengine/core/editor/index";
+import type { EditorHostApi } from "./session.js";
+import { type EditorUiStore } from "./uiStore.js";
+export type { GizmoMode } from "./uiStore.js";
+/**
+ * Canvas click-to-select and click-to-place. Document objects pick by screen proximity
+ * (registration always matches what you see) with click-cycling through stacked candidates
+ * and shift/ctrl additive selection; everything else picks by occlusion-ordered raycast
+ * against the tagged scene graph. When a placement tool is armed, clicks author new
+ * markers, volumes, notes, or path points at the ground hit instead of selecting.
+ */
+export declare const ViewportSelect: import("react").MemoExoticComponent<({ api, ui }: {
+    api: EditorHostApi;
+    ui: EditorUiStore;
+}) => null>;
+/**
+ * Drag-to-transform gizmo bound to the current selection, dispatching editor commands on
+ * release. Mounts the shared shell `TransformGizmo` and maps release poses onto editor
+ * commands (multi-select translate, volume scale, path vertex move).
+ */
+export declare const SelectionGizmo: import("react").MemoExoticComponent<({ session, ui, groundSnap, }: {
+    session: EditorSession;
+    ui: EditorUiStore;
+    groundSnap?: (x: number, z: number) => number;
+}) => import("react").JSX.Element | null>;