@jgengine/editor 0.10.0 → 0.12.0

package/dist/ParentPickerMenu.js

@@ -0,0 +1,33 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { FOCUS_RING, INPUT_CLS, NUMERIC } from "./shell/theme.js";
+/**
+ * Searchable parent-target menu for hierarchy / viewport "Parent to…".
+ * Parent owns candidate list (cycle-safe) and the set_parent write.
+ * @internal
+ */
+export function ParentPickerMenu({ x, y, candidates, onPick, onClose, }) {
+    const [query, setQuery] = useState("");
+    const inputRef = useRef(null);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (q.length === 0)
+            return candidates;
+        return candidates.filter((entry) => entry.label.toLowerCase().includes(q) || entry.id.toLowerCase().includes(q));
+    }, [candidates, query]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pointer-events-auto fixed inset-0 z-[60]", onPointerDown: onClose, onContextMenu: (event) => event.preventDefault() }), _jsxs("div", { role: "menu", "aria-label": "Parent to object", className: "pointer-events-auto fixed z-[61] flex max-h-72 w-64 flex-col overflow-hidden rounded-md border border-white/15 bg-neutral-900/95 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: "Parent to\u2026" }), _jsx("div", { className: "border-b border-white/10 p-1.5", children: _jsx("input", { ref: inputRef, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                                if (event.key === "Escape") {
+                                    event.preventDefault();
+                                    onClose();
+                                }
+                            }, placeholder: "Search objects\u2026", "aria-label": "Filter parent candidates", className: `h-7 w-full px-2 text-[12px] ${INPUT_CLS} ${FOCUS_RING}` }) }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto py-1", children: [_jsx("button", { type: "button", role: "menuitem", onPointerDown: (event) => {
+                                    event.stopPropagation();
+                                    onPick(null);
+                                }, className: "flex w-full items-center px-3 py-1.5 text-left text-[13px] text-white/85 hover:bg-cyan-400/20 hover:text-white", children: "\u2014 none (root) \u2014" }), filtered.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-[11px] text-white/40", children: candidates.length === 0 ? "No valid parents (would create a cycle)." : "No matches." })) : (filtered.map((entry) => (_jsxs("button", { type: "button", role: "menuitem", onPointerDown: (event) => {
+                                    event.stopPropagation();
+                                    onPick(entry.id);
+                                }, className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] text-white/85 hover:bg-cyan-400/20 hover:text-white", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.label }), entry.label !== entry.id ? (_jsx("span", { className: `shrink-0 text-[10px] text-white/35 ${NUMERIC}`, children: entry.id })) : null] }, entry.id))))] })] })] }));
+}

package/dist/PerfProbe.js

@@ -1,34 +1,101 @@
 import { useFrame, useThree } from "@react-three/fiber";
 import { memo, useRef } from "react";
+import { devtools } from "@jgengine/core/devtools/devtools";
 import { editorPerfMarks } from "./perfMarks.js";
+import { getCameraTelemetry } from "./shell/cameraTelemetry.js";
+import { frameBudgetFromStats } from "./shell/perfHistory.js";
 const SAMPLE_WINDOW_MS = 500;
+/** Sum-of-abs delta on camera position/orientation above which a frame counts as camera activity. */
+const CAMERA_MOVE_EPSILON = 1e-4;
 /** In-canvas frame counter: publishes fps/draw-call samples to the editor host every 500ms. */
 export const PerfProbe = memo(function PerfProbe({ api }) {
     const gl = useThree((state) => state.gl);
+    const camera = useThree((state) => state.camera);
     const framesRef = useRef(0);
     const windowStartRef = useRef(0);
+    const activeRef = useRef(false);
+    const lastCamRef = useRef({ px: 0, py: 0, pz: 0, qx: 0, qy: 0, qz: 0, qw: 1 });
+    const lastDrawRef = useRef(-1);
+    const lastTriRef = useRef(-1);
     useFrame(() => {
         const now = performance.now();
         if (windowStartRef.current === 0)
             windowStartRef.current = now;
         framesRef.current += 1;
+        // Detect camera activity frame-to-frame so a single moved frame inside the window still counts.
+        const cam = lastCamRef.current;
+        const dPos = Math.abs(camera.position.x - cam.px) +
+            Math.abs(camera.position.y - cam.py) +
+            Math.abs(camera.position.z - cam.pz);
+        const dRot = Math.abs(camera.quaternion.x - cam.qx) +
+            Math.abs(camera.quaternion.y - cam.qy) +
+            Math.abs(camera.quaternion.z - cam.qz) +
+            Math.abs(camera.quaternion.w - cam.qw);
+        if (dPos > CAMERA_MOVE_EPSILON || dRot > CAMERA_MOVE_EPSILON)
+            activeRef.current = true;
+        // Publish the camera basis for the DOM orientation widget (mutable channel, no React state).
+        const telemetry = getCameraTelemetry();
+        const m = camera.matrixWorld.elements;
+        telemetry.rightX = m[0];
+        telemetry.rightY = m[1];
+        telemetry.rightZ = m[2];
+        telemetry.upX = m[4];
+        telemetry.upY = m[5];
+        telemetry.upZ = m[6];
+        // Camera looks down -Z; store the viewing direction so depth<0 means "toward the camera".
+        telemetry.forwardX = -m[8];
+        telemetry.forwardY = -m[9];
+        telemetry.forwardZ = -m[10];
+        telemetry.azimuth = Math.atan2(-m[8], -m[10]);
+        telemetry.elevation = Math.asin(Math.max(-1, Math.min(1, -m[9])));
+        telemetry.version += 1;
+        cam.px = camera.position.x;
+        cam.py = camera.position.y;
+        cam.pz = camera.position.z;
+        cam.qx = camera.quaternion.x;
+        cam.qy = camera.quaternion.y;
+        cam.qz = camera.quaternion.z;
+        cam.qw = camera.quaternion.w;
         const elapsed = now - windowStartRef.current;
         if (elapsed < SAMPLE_WINDOW_MS)
             return;
         const fps = (framesRef.current * 1000) / elapsed;
         const authoring = editorPerfMarks.flush();
+        const drawCalls = gl.info.render.calls;
+        const triangles = gl.info.render.triangles;
+        // Edit activity: viewport raycasts / preview-mesh rebuilds, or the rendered scene changed.
+        const sceneChanged = lastDrawRef.current >= 0 && (drawCalls !== lastDrawRef.current || triangles !== lastTriRef.current);
+        const active = activeRef.current || authoring.authoringMs > 0 || sceneChanged;
+        lastDrawRef.current = drawCalls;
+        lastTriRef.current = triangles;
+        // Chromium-only; other browsers omit memory rather than fabricating a value.
+        const heap = performance.memory;
+        const memoryMb = heap === undefined ? undefined : Math.round((heap.usedJSHeapSize / (1024 * 1024)) * 10) / 10;
+        // Real sim / outside split from FrameDriver → devtools.frame (same as debug_snapshot). Omit when
+        // no runtime frames have been recorded yet — never invent a render series from viewport fps alone.
+        const budget = frameBudgetFromStats(devtools.frame.stats());
         api.setPerf({
             fps: Math.round(fps * 10) / 10,
             frameMs: Math.round((elapsed / framesRef.current) * 100) / 100,
-            drawCalls: gl.info.render.calls,
-            triangles: gl.info.render.triangles,
+            drawCalls,
+            triangles,
             sampledAt: now,
+            active,
             raycastMs: authoring.raycastMs,
             rebuildMs: authoring.rebuildMs,
             authoringMs: authoring.authoringMs,
+            ...(memoryMb === undefined ? {} : { memoryMb }),
+            ...(budget === null
+                ? {}
+                : {
+                    simMs: budget.simMs,
+                    outsideMs: budget.outsideMs,
+                    ...(budget.phases === undefined ? {} : { phases: budget.phases }),
+                }),
         });
         framesRef.current = 0;
         windowStartRef.current = now;
+        activeRef.current = false;
     });
     return null;
 });

package/dist/PrefabsPanel.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { CONTROL, INPUT_CLS, MICRO_LABEL } from "./shell/theme.js";
 import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
-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 BTN = "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 hover:text-neutral-100";
+const BTN = `${CONTROL} px-2 py-1 text-[11px] disabled:opacity-40`;
 function newPrefabId() {
     return `prefab_${Date.now().toString(36)}_${Math.floor(Math.random() * 1296).toString(36)}`;
 }
@@ -29,14 +29,14 @@ export function PrefabsPanel({ session, api }) {
         const focus = api.getFocusTarget() ?? { x: 0, y: 0, z: 0 };
         session.dispatch({ type: "insertPrefab", prefabId: prefab.id, at: focus });
     };
-    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 p-2", children: [_jsxs("div", { className: "flex gap-1", children: [_jsx("input", { className: `min-w-0 flex-1 ${INPUT}`, placeholder: "New prefab name\u2026", value: name, onChange: (event) => setName(event.target.value), onKeyDown: (event) => {
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 p-2", children: [_jsx("div", { className: MICRO_LABEL, children: "Prefabs" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("input", { className: `h-7 min-w-0 flex-1 px-2 ${INPUT_CLS}`, placeholder: "New prefab name\u2026", value: name, onChange: (event) => setName(event.target.value), onKeyDown: (event) => {
                             if (event.key === "Enter")
                                 makeFromSelection();
-                        } }), _jsx("button", { type: "button", className: BTN, disabled: selection.length === 0 || name.trim().length === 0, onClick: makeFromSelection, children: "Make prefab" })] }), selection.length === 0 ? (_jsx("div", { className: "text-[10px] text-neutral-500", children: "Select objects, name them, then make a prefab from the selection." })) : null, _jsx("div", { className: "min-h-0 flex-1 space-y-1 overflow-auto pr-1", children: prefabs.length === 0 ? (_jsx("div", { className: "text-neutral-600", children: "No prefabs yet." })) : (prefabs.map((prefab) => {
+                        } }), _jsx("button", { type: "button", className: BTN, disabled: selection.length === 0 || name.trim().length === 0, onClick: makeFromSelection, children: "Make prefab" })] }), selection.length === 0 ? (_jsx("div", { className: "text-[10px] text-neutral-500", children: "Select objects, name them, then make a prefab from the selection." })) : null, _jsx("div", { className: "min-h-0 flex-1 space-y-1.5 overflow-auto pr-1", children: prefabs.length === 0 ? (_jsx("div", { className: "text-[11px] text-neutral-600", children: "No prefabs yet." })) : (prefabs.map((prefab) => {
                     const count = prefab.fragment.markers.length +
                         prefab.fragment.volumes.length +
                         prefab.fragment.paths.length +
                         prefab.fragment.annotations.length;
-                    return (_jsxs("div", { className: "flex items-center gap-2 rounded-md bg-white/[0.03] p-1.5 ring-1 ring-inset ring-white/[0.06]", children: [_jsxs("div", { className: "min-w-0 flex-1 truncate", children: [_jsx("div", { className: "truncate text-neutral-100", children: prefab.name }), _jsxs("div", { className: "text-[10px] text-neutral-500", children: [count, " objects"] })] }), _jsx("button", { type: "button", className: "shrink-0 rounded-md bg-cyan-500/20 px-2 py-0.5 text-cyan-200 ring-1 ring-inset ring-cyan-400/30 transition-colors hover:bg-cyan-500/30", onClick: () => insertAt(prefab), children: "Insert" }), _jsx("button", { type: "button", className: "shrink-0 rounded-md bg-rose-500/15 px-2 py-0.5 text-rose-200 ring-1 ring-inset ring-rose-400/25 transition-colors hover:bg-rose-500/25", onClick: () => session.dispatch({ type: "deletePrefab", prefabId: prefab.id }), children: "Delete" })] }, prefab.id));
+                    return (_jsxs("div", { className: "flex items-center gap-2 rounded-[6px] border border-white/[0.07] bg-white/[0.02] p-2", children: [_jsxs("div", { className: "min-w-0 flex-1 truncate", children: [_jsx("div", { className: "truncate text-[12px] text-neutral-100", children: prefab.name }), _jsxs("div", { className: "text-[10px] text-neutral-500", children: [count, " objects"] })] }), _jsx("button", { type: "button", className: "shrink-0 rounded-[5px] border border-cyan-400/30 bg-cyan-500/15 px-2 py-0.5 text-[10px] text-cyan-200 transition-colors hover:bg-cyan-500/25", onClick: () => insertAt(prefab), children: "Insert" }), _jsx("button", { type: "button", className: "shrink-0 rounded-[5px] border border-rose-400/25 bg-rose-500/15 px-2 py-0.5 text-[10px] text-rose-200 transition-colors hover:bg-rose-500/25", onClick: () => session.dispatch({ type: "deletePrefab", prefabId: prefab.id }), children: "Delete" })] }, prefab.id));
                 })) })] }));
 }

package/dist/RuntimePlayBridge.d.ts

@@ -8,11 +8,13 @@ export declare function RuntimePlayPublisher({ api }: {
     api: EditorHostApi;
 }): 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).
+ * Play-mode chrome: slim shell app bar (Pause/Step/Exit via runtime play controls) plus a
+ * compact reverse-channel entity inspector. Transform nudges go through `runtime_set`
+ * (document write-back by default).
  * @internal
  */
-export declare function RuntimePlayInspectorChrome({ api, onExit, }: {
+export declare function RuntimePlayInspectorChrome({ gameId, api, onExit, }: {
+    gameId: string;
     api: EditorHostApi;
     onExit: () => void;
 }): import("react").JSX.Element;

package/dist/RuntimePlayBridge.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import { useGameContext } from "@jgengine/react/provider";
 import { MICRO } from "./chromeStyles.js";
+import { PlayModeBar } from "./shell/PlayModeBar.js";
 const PUBLISH_MS = 100;
 function metaValues(meta) {
     if (meta === null || typeof meta !== "object" || Array.isArray(meta))
@@ -76,11 +77,12 @@ export function RuntimePlayPublisher({ api }) {
     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).
+ * Play-mode chrome: slim shell app bar (Pause/Step/Exit via runtime play 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, }) {
+export function RuntimePlayInspectorChrome({ gameId, api, onExit, }) {
     const [play, setPlay] = useState(() => api.getPlayControl());
     const [summary, setSummary] = useState(null);
     const [selectedId, setSelectedId] = useState(null);
@@ -109,15 +111,6 @@ export function RuntimePlayInspectorChrome({ api, onExit, }) {
         }
         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;
@@ -136,5 +129,5 @@ export function RuntimePlayInspectorChrome({ api, onExit, }) {
             },
         });
     };
-    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] })] }));
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 z-50 flex flex-col", children: [_jsx(PlayModeBar, { gameId: gameId, api: api, onExit: onExit }), _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

@@ -3,7 +3,9 @@ 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.
+ * game uses to consume `resolveScatter` at runtime. Subscribes only to the document slices scatter
+ * actually reads (markers/volumes/paths for clearance, terrain for grounding), so selection changes
+ * and unrelated edits (notes, grids, catalogs) never re-resolve up to {@link MAX_INSTANCES} placements.
  * @internal — mounted by `EditorApp`; not a game-author entry point.
  */
 export declare const ScatterPreview: import("react").MemoExoticComponent<({ api }: {

package/dist/ScatterPreview.js

@@ -1,30 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useEffect, useMemo, useState } from "react";
+import { memo, useMemo } 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";
+import { useStoreSelector } from "./useStoreSelector.js";
 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.
+ * game uses to consume `resolveScatter` at runtime. Subscribes only to the document slices scatter
+ * actually reads (markers/volumes/paths for clearance, terrain for grounding), so selection changes
+ * and unrelated edits (notes, grids, catalogs) never re-resolve up to {@link MAX_INSTANCES} placements.
  * @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 markers = useStoreSelector(session, (state) => state.document.markers);
+    const volumes = useStoreSelector(session, (state) => state.document.volumes);
+    const paths = useStoreSelector(session, (state) => state.document.paths);
+    const snapshot = useStoreSelector(session, (state) => 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]);
+    const instances = useMemo(() => resolveScatter({ markers, volumes, paths }, terrain), [markers, volumes, paths, terrain]);
     return _jsx(InstancedScatter, { instances: instances, maxInstances: MAX_INSTANCES });
 });

package/dist/SchemaInspector.js

@@ -1,8 +1,21 @@
 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";
+import { BORDER, CONTROL, FOCUS_RING, INPUT_CLS, MICRO_LABEL } from "./shell/theme.js";
+const INPUT = `px-2 py-1 ${INPUT_CLS}`;
+const MICRO = MICRO_LABEL;
+const BTN = `${CONTROL} px-2 py-1 text-[10px] disabled:opacity-40`;
+/** One-click archetype bundles: picking a preset writes its whole value bag as a single meta patch. */
+function PresetRow({ schema, onMeta }) {
+    const presets = schema.presets ?? [];
+    if (presets.length === 0)
+        return null;
+    return (_jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: MICRO, children: "preset" }), _jsxs("select", { className: `w-32 ${INPUT}`, value: "", onChange: (event) => {
+                    const preset = presets.find((entry) => entry.id === event.target.value);
+                    if (preset !== undefined)
+                        onMeta({ ...preset.values }, `preset:${preset.id}`);
+                }, children: [_jsx("option", { value: "", disabled: true, children: "apply preset\u2026" }), presets.map((preset) => (_jsx("option", { value: preset.id, children: preset.label ?? preset.id }, preset.id)))] })] }));
+}
 function labelOf(field) {
     return field.label ?? field.key;
 }
@@ -32,7 +45,7 @@ function FieldRow({ field, meta, onMeta }) {
         }
         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) })] }));
+            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-[5px] border border-white/10 bg-black/40 ${FOCUS_RING}`, value: value, onChange: (event) => onMeta({ [field.key]: event.target.value }, coalesce) })] }));
         }
         case "text": {
             const value = params[field.key];
@@ -40,12 +53,12 @@ function FieldRow({ field, meta, onMeta }) {
         }
         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" })] }));
+            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: BTN, 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" })] }));
+            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: `${CONTROL} px-1.5 py-1 text-neutral-400 hover:bg-rose-500/20 hover:text-rose-200 disabled:opacity-40`, disabled: list.length <= 1, onClick: () => set(list.filter((_, i) => i !== index)), children: "\u00D7" })] }, index))), _jsx("button", { type: "button", className: `w-full ${BTN}`, 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.
@@ -54,12 +67,12 @@ function FieldRow({ field, meta, onMeta }) {
 /** 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)] }));
+    return (_jsxs("button", { type: "button", className: `w-full ${BTN} font-medium`, 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))) }))] }));
+    return (_jsxs("div", { className: `rounded-[6px] border ${BORDER}`, 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
@@ -74,5 +87,5 @@ export function SchemaInspector({ schema, label, accent = "#34d399", note, meta,
     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] }));
+    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 }), _jsx(PresetRow, { schema: schema, onMeta: onMeta }), 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/ScriptingPanel.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Scripting workspace: lists every document object with an authored behavior trigger, selects them
+ * for framing/inspection, and reuses {@link TriggerInspector} for edits. Writes go only through
+ * session `setMarker` / `setVolume` meta patches (same path as the inspector Components tab).
+ */
+import type { EditorSession } from "@jgengine/core/editor/index";
+import type { EditorHostApi } from "./session.js";
+/**
+ * Left-dock scripting workspace: document-wide trigger list + selected-object editor.
+ * @internal — mounted by `EditorChrome` when the scripting rail workspace is active.
+ */
+export declare const ScriptingPanel: import("react").MemoExoticComponent<({ session, api, }: {
+    session: EditorSession;
+    api: EditorHostApi;
+}) => import("react").JSX.Element>;

package/dist/ScriptingPanel.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Scripting workspace: lists every document object with an authored behavior trigger, selects them
+ * for framing/inspection, and reuses {@link TriggerInspector} for edits. Writes go only through
+ * session `setMarker` / `setVolume` meta patches (same path as the inspector Components tab).
+ */
+import { memo, useMemo } from "react";
+import { listDocumentTriggers } from "./listDocumentTriggers.js";
+import { TriggerInspector } from "./TriggerInspector.js";
+import { Icon } from "./shell/icons.js";
+import { BORDER, CONTROL, CONTROL_ACTIVE, FOCUS_RING, MICRO_LABEL, TEXT_MUTED } from "./shell/theme.js";
+import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
+function bindingSummary(entry) {
+    if (entry.bindings.length === 0)
+        return "—";
+    return entry.bindings.map((binding) => `${binding.on} → ${binding.action}`).join(" · ");
+}
+/**
+ * Left-dock scripting workspace: document-wide trigger list + selected-object editor.
+ * @internal — mounted by `EditorChrome` when the scripting rail workspace is active.
+ */
+export const ScriptingPanel = memo(function ScriptingPanel({ session, api, }) {
+    const document = useStoreSelector(session, (state) => state.document);
+    const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
+    const selectedId = selection[0];
+    const entries = useMemo(() => listDocumentTriggers(document), [document]);
+    const selectedEntry = selectedId === undefined ? undefined : entries.find((entry) => entry.sourceId === selectedId);
+    const selectedMarker = selectedEntry?.sourceKind === "marker" ? document.markers.find((marker) => marker.id === selectedId) : undefined;
+    const selectedVolume = selectedEntry?.sourceKind === "volume" ? document.volumes.find((volume) => volume.id === selectedId) : undefined;
+    const selectEntry = (entry) => {
+        session.dispatch({ type: "select", ids: [entry.sourceId] });
+        api.handle({ method: "camera_goto", id: entry.sourceId });
+    };
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "min-h-0 flex-1 space-y-1 overflow-auto p-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: MICRO_LABEL, children: "Authored triggers" }), _jsx("span", { className: `ml-auto tabular-nums ${TEXT_MUTED}`, children: entries.length })] }), entries.length === 0 ? (_jsxs("div", { className: "rounded-[6px] border border-dashed border-white/[0.08] bg-white/[0.02] px-3 py-4 text-[11px] leading-relaxed text-neutral-500", children: ["No behavior triggers on this scene yet. Select a marker or volume in the hierarchy, open the Components tab, and add a trigger \u2014 or place a zone and set ", _jsx("span", { className: "text-neutral-400", children: "on" }), " /", " ", _jsx("span", { className: "text-neutral-400", children: "action" }), " in the inspector."] })) : (entries.map((entry) => {
+                        const selected = entry.sourceId === selectedId;
+                        return (_jsxs("button", { type: "button", onClick: () => selectEntry(entry), className: `flex w-full flex-col gap-0.5 rounded-[6px] px-2.5 py-2 text-left transition-colors ${FOCUS_RING} ${selected ? CONTROL_ACTIVE : `${CONTROL} hover:bg-white/[0.06]`}`, children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Icon, { name: entry.sourceKind === "volume" ? "cube" : "target", size: 12 }), _jsx("span", { className: "min-w-0 flex-1 truncate text-[12px] text-neutral-100", children: entry.label }), _jsx("span", { className: `shrink-0 text-[10px] ${TEXT_MUTED}`, children: entry.sourceKind })] }), _jsxs("div", { className: `truncate pl-[18px] text-[10px] ${TEXT_MUTED}`, children: [entry.objectKind, " \u00B7 ", bindingSummary(entry)] })] }, `${entry.sourceKind}:${entry.sourceId}`));
+                    }))] }), selectedMarker !== undefined ? (_jsxs("div", { className: `shrink-0 space-y-2 border-t ${BORDER} p-2.5`, children: [_jsxs("div", { className: MICRO_LABEL, children: ["Edit \u00B7 ", selectedMarker.label ?? selectedMarker.id] }), _jsx(TriggerInspector, { target: "marker", meta: selectedMarker.meta, onMeta: (patch, coalesce) => session.dispatch({
+                            type: "setMarker",
+                            id: selectedMarker.id,
+                            patch: { meta: { ...selectedMarker.meta, ...patch } },
+                        }, { coalesce: `${coalesce}:${selectedMarker.id}` }) })] })) : null, selectedVolume !== undefined ? (_jsxs("div", { className: `shrink-0 space-y-2 border-t ${BORDER} p-2.5`, children: [_jsxs("div", { className: MICRO_LABEL, children: ["Edit \u00B7 ", selectedVolume.label ?? selectedVolume.id] }), _jsx(TriggerInspector, { target: "volume", meta: selectedVolume.meta, onMeta: (patch, coalesce) => session.dispatch({
+                            type: "setVolume",
+                            id: selectedVolume.id,
+                            patch: { meta: { ...selectedVolume.meta, ...patch } },
+                        }, { coalesce: `${coalesce}:${selectedVolume.id}` }) })] })) : null, selectedId !== undefined && selectedEntry === undefined ? (_jsx("div", { className: `shrink-0 border-t ${BORDER} px-2.5 py-2 text-[10px] text-neutral-500`, children: "Selection has no authored trigger. Pick a row above, or add a trigger on this object in the inspector." })) : null] }));
+});