@jgengine/editor 0.13.0 → 0.15.0-next.0

package/dist/ClipPreviewLayer.d.ts

@@ -0,0 +1,15 @@
+import type { EditorHostApi } from "./session.js";
+import type { EditorUiStore } from "./uiStore.js";
+/**
+ * Viewport layer that renders the active clip-preview asset playing the selected clip, mounted by
+ * `EditorApp` inside the editor's R3F scene + GameContext. Reuses the shell's shared GLTF loader,
+ * scene clone, and `useModelAnimation` mixer — the same driver `EntityModel` runs at play time — so
+ * the preview IS the runtime playback. Reads the live session from the editor UI store and publishes
+ * the selected clip's measured duration back so the dock scrubber can normalize.
+ *
+ * @internal — not a game-author entry point.
+ */
+export declare function ClipPreviewLayer({ api, ui }: {
+    api: EditorHostApi;
+    ui: EditorUiStore;
+}): import("react").JSX.Element | null;

package/dist/ClipPreviewLayer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useEffect, useMemo } from "react";
+import { useLoader } from "@react-three/fiber";
+import * as THREE from "three";
+import { sharedGltfLoader } from "@jgengine/shell/render/modelLoad";
+import { cloneModelScene, disposeClonedMaterials } from "@jgengine/shell/render/modelRender";
+import { useModelAnimation } from "@jgengine/shell/render/useModelAnimation";
+import { previewAnimationConfig } from "./shell/clipPreview.js";
+import { useStoreSelector } from "./useStoreSelector.js";
+/** World-unit height the previewed model is normalized to, so tiny/huge rigs are both framed. */
+const PREVIEW_TARGET_HEIGHT = 2;
+/**
+ * Viewport layer that renders the active clip-preview asset playing the selected clip, mounted by
+ * `EditorApp` inside the editor's R3F scene + GameContext. Reuses the shell's shared GLTF loader,
+ * scene clone, and `useModelAnimation` mixer — the same driver `EntityModel` runs at play time — so
+ * the preview IS the runtime playback. Reads the live session from the editor UI store and publishes
+ * the selected clip's measured duration back so the dock scrubber can normalize.
+ *
+ * @internal — not a game-author entry point.
+ */
+export function ClipPreviewLayer({ api, ui }) {
+    const session = useStoreSelector(ui, (state) => state.clipPreview);
+    if (session === null)
+        return null;
+    return (_jsx(Suspense, { fallback: null, children: _jsx(ClipPreviewModel, { session: session, api: api, ui: ui }, session.source.assetId) }));
+}
+function ClipPreviewModel({ session, api, ui, }) {
+    const { source, driver } = session;
+    const gltf = useLoader(sharedGltfLoader, source.url);
+    const scene = useMemo(() => cloneModelScene(gltf.scene), [gltf]);
+    useEffect(() => () => disposeClonedMaterials(scene), [scene]);
+    // Normalize height and center/ground so any rig frames nicely at the camera focus point.
+    const placement = useMemo(() => {
+        const box = new THREE.Box3().setFromObject(scene);
+        const height = box.max.y - box.min.y;
+        if (!Number.isFinite(height) || height <= 0)
+            return { scale: 1, minY: 0, centerX: 0, centerZ: 0 };
+        return {
+            scale: PREVIEW_TARGET_HEIGHT / height,
+            minY: box.min.y,
+            centerX: (box.min.x + box.max.x) / 2,
+            centerZ: (box.min.z + box.max.z) / 2,
+        };
+    }, [scene]);
+    const config = useMemo(() => previewAnimationConfig(driver), [driver]);
+    useModelAnimation(scene, gltf.animations, config, undefined);
+    // Publish the selected clip's duration once loaded so the dock scrubber can span it (0 = unknown).
+    const clipName = driver.clipName;
+    useEffect(() => {
+        const clip = clipName === null ? undefined : gltf.animations.find((entry) => entry.name === clipName);
+        const duration = clip?.duration ?? 0;
+        const current = ui.getState().clipPreview;
+        if (current !== null && current.source.assetId === source.assetId && current.duration !== duration) {
+            ui.patch({ clipPreview: { ...current, duration } });
+        }
+    }, [gltf, clipName, ui, source.assetId]);
+    const focus = api.getFocusTarget() ?? { x: 0, y: 0, z: 0 };
+    const s = placement.scale;
+    return (_jsx("group", { position: [focus.x, focus.y, focus.z], children: _jsx("primitive", { object: scene, scale: s, position: [-s * placement.centerX, -s * placement.minY, -s * placement.centerZ] }) }));
+}

package/dist/EditorApp.js

@@ -15,6 +15,7 @@ import { MaterialDropZone } from "./MaterialDropZone.js";
 import { PerfProbe } from "./PerfProbe.js";
 import { ScatterPreview } from "./ScatterPreview.js";
 import { CityPreview } from "./CityPreview.js";
+import { ClipPreviewLayer } from "./ClipPreviewLayer.js";
 import { SelectionGizmo, ViewportSelect } from "./SelectionGizmo.js";
 import { TerrainReadout } from "./TerrainReadout.js";
 import { TerrainReadoutHud } from "./TerrainReadoutHud.js";
@@ -153,7 +154,7 @@ function EditorWorldOverlay({ api, ui, world, readout, }) {
             unsubscribe();
         };
     }, [session, readoutActive]);
-    return (_jsxs(_Fragment, { children: [_jsx(PerfProbe, { api: api }), _jsx(EditorCameraDriver, { api: api }), _jsx(ViewportSelect, { api: api, ui: ui }), _jsx(MaterialDropZone, { api: api }), _jsx(AssetDropZone, { api: api }), _jsx(TerrainSculpt, { api: api, ui: ui, world: world }), _jsx(ScatterPreview, { api: api }), _jsx(CityPreview, { api: api }), showGrid ? _jsx("gridHelper", { args: [400, 80, "#3b4252", "#20242e"], position: [0, 0.05, 0] }) : null, readoutActive ? (_jsx(TerrainReadout, { groundHeightAt: groundHeightAt, region: readoutRegion, showContours: showContours, showSurfaceGrid: showSurfaceGrid, version: terrainVersion, readout: readout })) : null, _jsx(EditorLayerOverlays, { document: document, visibility: visibility, selection: selection, hoverId: hoverId, onSelect: (id) => session.dispatch({ type: "select", ids: [id] }), activePathPoint: pathPoint, groundHeightAt: groundHeightAt }), pathDraft.length > 0 ? _jsx(PathDraftPreview, { points: pathDraft }) : null, _jsx(SelectionGizmo, { session: session, ui: ui, groundSnap: groundHeightAt })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(PerfProbe, { api: api }), _jsx(EditorCameraDriver, { api: api }), _jsx(ViewportSelect, { api: api, ui: ui }), _jsx(MaterialDropZone, { api: api }), _jsx(AssetDropZone, { api: api }), _jsx(TerrainSculpt, { api: api, ui: ui, world: world }), _jsx(ScatterPreview, { api: api }), _jsx(CityPreview, { api: api }), _jsx(ClipPreviewLayer, { api: api, ui: ui }), showGrid ? _jsx("gridHelper", { args: [400, 80, "#3b4252", "#20242e"], position: [0, 0.05, 0] }) : null, readoutActive ? (_jsx(TerrainReadout, { groundHeightAt: groundHeightAt, region: readoutRegion, showContours: showContours, showSurfaceGrid: showSurfaceGrid, version: terrainVersion, readout: readout })) : null, _jsx(EditorLayerOverlays, { document: document, visibility: visibility, selection: selection, hoverId: hoverId, onSelect: (id) => session.dispatch({ type: "select", ids: [id] }), activePathPoint: pathPoint, groundHeightAt: groundHeightAt }), pathDraft.length > 0 ? _jsx(PathDraftPreview, { points: pathDraft }) : null, _jsx(SelectionGizmo, { session: session, ui: ui, groundSnap: groundHeightAt })] }));
 }
 /** Default skin for the play/walk escape chip; swap via `EditorAppProps.modeChip`, or pass `null` to hide it (F2+E still exits). */
 function EditorModeChip({ mode, onExit }) {
@@ -260,7 +261,6 @@ export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip,
     if (readoutStoreRef.current === null)
         readoutStoreRef.current = createTerrainReadoutStore();
     const readout = readoutStoreRef.current;
-    const [mode, setModeState] = useState("edit");
     const catalogAssets = useMemo(() => {
         try {
             const ids = playable.game.assets.ids();
@@ -285,7 +285,8 @@ export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip,
         };
     }, [gameId, resolvedLayers, catalogs, catalogAssets]);
     useEffect(() => host.dispose, [host]);
-    useEffect(() => host.api.subscribeMode(setModeState), [host]);
+    const modeStore = useMemo(() => ({ getState: host.api.getMode, subscribe: host.api.subscribeMode }), [host]);
+    const mode = useStoreSelector(modeStore, (m) => m);
     const [pendingDraft, setPendingDraft] = useState(null);
     useEffect(() => {
         const draft = readDraft(gameId);

package/dist/EditorCameraDriver.d.ts

@@ -1,5 +1,10 @@
 import type { EditorHostApi } from "./session.js";
-/** Smoothly pans the orbit camera to the editor host's focus target when it changes. */
+/**
+ * Drives the editor orbit camera from the host's focus target. When the target carries only a
+ * point, the camera pans to keep it centered (the historical behavior). When it also carries
+ * placement (`distance`/`pitch`/`yaw`/`height`), the camera is repositioned to that orbit pose —
+ * how `camera_goto`/`camera_frame` compose an aerial without the KeyF-buries-in-terrain problem.
+ */
 export declare const EditorCameraDriver: import("react").MemoExoticComponent<({ api }: {
     api: EditorHostApi;
 }) => null>;

package/dist/EditorCameraDriver.js

@@ -1,6 +1,12 @@
 import { useThree } from "@react-three/fiber";
 import { memo, useEffect } from "react";
-/** Smoothly pans the orbit camera to the editor host's focus target when it changes. */
+import { orbitCameraPosition } from "./camera/orbitFraming.js";
+/**
+ * Drives the editor orbit camera from the host's focus target. When the target carries only a
+ * point, the camera pans to keep it centered (the historical behavior). When it also carries
+ * placement (`distance`/`pitch`/`yaw`/`height`), the camera is repositioned to that orbit pose —
+ * how `camera_goto`/`camera_frame` compose an aerial without the KeyF-buries-in-terrain problem.
+ */
 export const EditorCameraDriver = memo(function EditorCameraDriver({ api }) {
     const controls = useThree((state) => state.controls);
     const camera = useThree((state) => state.camera);
@@ -8,6 +14,24 @@ export const EditorCameraDriver = memo(function EditorCameraDriver({ api }) {
         return api.subscribeFocus((target) => {
             if (target === null || controls === null || controls.target === undefined)
                 return;
+            const hasPlacement = target.distance !== undefined ||
+                target.pitch !== undefined ||
+                target.yaw !== undefined ||
+                target.height !== undefined;
+            if (hasPlacement) {
+                controls.target.set(target.x, target.y, target.z);
+                const distance = target.distance ?? camera.position.distanceTo(controls.target);
+                const pose = orbitCameraPosition({
+                    target,
+                    distance,
+                    pitchDeg: target.pitch ?? 45,
+                    yawDeg: target.yaw,
+                    height: target.height,
+                });
+                camera.position.set(pose.x, pose.y, pose.z);
+                controls.update();
+                return;
+            }
             const previous = controls.target.clone();
             controls.target.set(target.x, target.y, target.z);
             camera.position.add(controls.target.clone().sub(previous));

package/dist/EditorChrome.js

@@ -15,6 +15,7 @@ import { buildOutlinerGroups } from "./outlinerModel.js";
 import { importAssetToHost, loadDroppedAssets, } from "./assetImport.js";
 import { newPlacementId } from "./uiStore.js";
 import { useF2Chord } from "./useF2Chord.js";
+import { useStoreVersion } from "./useStoreSelector.js";
 import { TerrainPanel } from "./TerrainPanel.js";
 import { LightingPanel } from "./LightingPanel.js";
 import { InspectorPanel } from "./InspectorPanel.js";
@@ -112,10 +113,10 @@ const LEFT_PAGES = [
  * and host RPC. Mounted by `EditorApp`; not a game-author entry point.
  */
 export function EditorChrome({ gameId, session, api, assets, ui, baselineDocument, save, networkSnapshot, importAsset = importAssetToHost, onRegisterAsset, onExitEditor, }) {
-    const [, setTick] = useState(0);
     const layoutRef = useRef(null);
     layoutRef.current ??= createShellLayoutStore(gameId);
     const layout = layoutRef.current;
+    useStoreVersion(session, ui, layout);
     const consoleRef = useRef(null);
     consoleRef.current ??= createEditorConsoleStore();
     const consoleStore = consoleRef.current;
@@ -171,9 +172,6 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineDocumen
     useF2Chord("KeyE", () => api.setMode("play"));
     // F2+Q leaves the editor entirely (back to the game) — only meaningful when summoned over one.
     useF2Chord("KeyQ", useCallback(() => onExitEditor?.(), [onExitEditor]));
-    useEffect(() => session.subscribe(() => setTick((value) => value + 1)), [session]);
-    useEffect(() => ui.subscribe(() => setTick((value) => value + 1)), [ui]);
-    useEffect(() => layout.subscribe(() => setTick((value) => value + 1)), [layout]);
     const copySelection = useCallback(() => {
         const current = session.getState();
         if (current.selection.length === 0)
@@ -745,11 +743,11 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineDocumen
                                                     ? `Parented to ${parentId}`
                                                     : `Parented ${ids.length} objects to ${parentId}`);
                                             }
-                                        }, onClose: () => setParentPicker(null) })) : null] }), layoutState.bottomOpen ? (_jsxs(_Fragment, { children: [_jsx(PanelResizer, { orientation: "horizontal", label: "Resize bottom dock", sign: -1, onResize: (delta) => layout.resize("bottomHeight", delta) }), _jsx("div", { className: "flex shrink-0 flex-col", style: { height: layoutState.bottomHeight }, children: _jsx(BottomDock, { tab: layoutState.bottomTab, onSelectTab: (tab) => layout.patch({ bottomTab: tab }), onClose: () => layout.patch({ bottomOpen: false }), assets: liveAssets, session: session, api: api, consoleStore: consoleStore, perfHistory: perfHistory, browserView: layoutState.browserView, onSetBrowserView: (view) => layout.patch({ browserView: view }), onPlaceAsset: placeAsset, onImportModels: importModels, importBusy: importBusy }) })] })) : (_jsxs("div", { className: `pointer-events-auto flex h-7 shrink-0 items-center gap-1 border-t ${BORDER} bg-[#0e1014] px-1.5`, children: [[
+                                        }, onClose: () => setParentPicker(null) })) : null] }), layoutState.bottomOpen ? (_jsxs(_Fragment, { children: [_jsx(PanelResizer, { orientation: "horizontal", label: "Resize bottom dock", sign: -1, onResize: (delta) => layout.resize("bottomHeight", delta) }), _jsx("div", { className: "flex shrink-0 flex-col", style: { height: layoutState.bottomHeight }, children: _jsx(BottomDock, { tab: layoutState.bottomTab, onSelectTab: (tab) => layout.patch({ bottomTab: tab }), onClose: () => layout.patch({ bottomOpen: false }), assets: liveAssets, session: session, api: api, ui: ui, consoleStore: consoleStore, perfHistory: perfHistory, browserView: layoutState.browserView, onSetBrowserView: (view) => layout.patch({ browserView: view }), onPlaceAsset: placeAsset, onImportModels: importModels, importBusy: importBusy }) })] })) : (_jsxs("div", { className: `pointer-events-auto flex h-7 shrink-0 items-center gap-1 border-t ${BORDER} bg-[#0e1014] px-1.5`, children: [[
                                         ["content", "Content Browser"],
                                         ["console", "Console"],
                                         ["profiler", "Profiler"],
                                         ["animation", "Animation"],
                                         ["assistant", "AI Assistant"],
-                                    ].map(([id, label]) => (_jsx("button", { type: "button", onClick: () => openBottomTab(id), className: `rounded-[4px] px-2 py-0.5 text-[10px] text-neutral-500 transition-colors hover:bg-white/[0.05] hover:text-neutral-300 ${FOCUS_RING}`, children: label }, id))), _jsx("span", { className: "ml-auto text-[9px] text-neutral-600", children: "Ctrl+B opens the content browser" })] }))] }), layoutState.rightOpen ? (_jsxs(_Fragment, { children: [_jsx(PanelResizer, { orientation: "vertical", label: "Resize inspector panel", sign: -1, onResize: (delta) => layout.resize("rightWidth", delta) }), _jsx("aside", { className: `pointer-events-auto hidden min-h-0 flex-col overflow-hidden border-l ${BORDER} bg-[#111318] md:flex`, style: { width: layoutState.rightWidth }, "aria-label": "Inspector dock", children: _jsx(InspectorPanel, { session: session, ui: ui, api: api, tab: layoutState.inspectorTab, onSelectTab: (tab) => layout.patch({ inspectorTab: tab }), collapsed: layoutState.collapsed, onToggleSection: (id) => layout.toggleSection(id), onClose: () => layout.patch({ rightOpen: false }) }) })] })) : null] }), _jsx(StatusBar, { api: api, history: perfHistory, objects: sceneStats.objects, foliage: sceneStats.foliage, selectionCount: state.selection.length, autosave: true }), paletteQuery !== null ? (_jsx(CommandPalette, { commands: paletteCommands, initialQuery: paletteQuery, onClose: () => setPaletteQuery(null) })) : null, helpOpen ? (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-[70] flex items-center justify-center bg-black/50 backdrop-blur-[2px]", onClick: () => setHelpOpen(false), children: _jsxs("div", { className: "w-[28rem] max-w-[90vw] rounded-[10px] border border-white/10 bg-[#14171d] p-5 shadow-2xl shadow-black/60", onClick: (event) => event.stopPropagation(), role: "dialog", "aria-label": "Keyboard shortcuts", children: [_jsxs("div", { className: "mb-3 flex items-center", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold tracking-wide text-neutral-100", children: [_jsx(Icon, { name: "command", size: 15, className: "text-cyan-300" }), "Keyboard shortcuts"] }), _jsx(IconButton, { icon: "close", label: "Close shortcuts", tone: "ghost", className: "ml-auto", onClick: () => setHelpOpen(false) })] }), _jsx("div", { className: "grid max-h-[60vh] grid-cols-[auto_1fr] items-center gap-x-4 gap-y-1.5 overflow-auto", children: shortcuts.map((entry) => (_jsxs("div", { className: "contents", children: [_jsx("span", { className: "justify-self-start", children: _jsx(Kbd, { children: entry.keys }) }), _jsx("span", { className: "text-neutral-300", children: entry.action })] }, entry.keys))) })] }) })) : null] }));
+                                    ].map(([id, label]) => (_jsx("button", { type: "button", onClick: () => openBottomTab(id), className: `rounded-[4px] px-2 py-0.5 text-[10px] text-neutral-500 transition-colors hover:bg-white/[0.05] hover:text-neutral-300 ${FOCUS_RING}`, children: label }, id))), _jsx("span", { className: "ml-auto text-[9px] text-neutral-600", children: "Ctrl+B opens the content browser" })] }))] }), layoutState.rightOpen ? (_jsxs(_Fragment, { children: [_jsx(PanelResizer, { orientation: "vertical", label: "Resize inspector panel", sign: -1, onResize: (delta) => layout.resize("rightWidth", delta) }), _jsx("aside", { className: `pointer-events-auto hidden min-h-0 flex-col overflow-hidden border-l ${BORDER} bg-[#111318] md:flex`, style: { width: layoutState.rightWidth }, "aria-label": "Inspector dock", children: _jsx(InspectorPanel, { session: session, ui: ui, api: api, assets: liveAssets, tab: layoutState.inspectorTab, onSelectTab: (tab) => layout.patch({ inspectorTab: tab }), collapsed: layoutState.collapsed, onToggleSection: (id) => layout.toggleSection(id), onClose: () => layout.patch({ rightOpen: false }) }) })] })) : null] }), _jsx(StatusBar, { api: api, history: perfHistory, objects: sceneStats.objects, foliage: sceneStats.foliage, selectionCount: state.selection.length, autosave: true }), paletteQuery !== null ? (_jsx(CommandPalette, { commands: paletteCommands, initialQuery: paletteQuery, onClose: () => setPaletteQuery(null) })) : null, helpOpen ? (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-[70] flex items-center justify-center bg-black/50 backdrop-blur-[2px]", onClick: () => setHelpOpen(false), children: _jsxs("div", { className: "w-[28rem] max-w-[90vw] rounded-[10px] border border-white/10 bg-[#14171d] p-5 shadow-2xl shadow-black/60", onClick: (event) => event.stopPropagation(), role: "dialog", "aria-label": "Keyboard shortcuts", children: [_jsxs("div", { className: "mb-3 flex items-center", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold tracking-wide text-neutral-100", children: [_jsx(Icon, { name: "command", size: 15, className: "text-cyan-300" }), "Keyboard shortcuts"] }), _jsx(IconButton, { icon: "close", label: "Close shortcuts", tone: "ghost", className: "ml-auto", onClick: () => setHelpOpen(false) })] }), _jsx("div", { className: "grid max-h-[60vh] grid-cols-[auto_1fr] items-center gap-x-4 gap-y-1.5 overflow-auto", children: shortcuts.map((entry) => (_jsxs("div", { className: "contents", children: [_jsx("span", { className: "justify-self-start", children: _jsx(Kbd, { children: entry.keys }) }), _jsx("span", { className: "text-neutral-300", children: entry.action })] }, entry.keys))) })] }) })) : null] }));
 }

package/dist/InspectorPanel.d.ts

@@ -1,4 +1,5 @@
 import { type EditorSession } from "@jgengine/core/editor/index";
+import { type EditorAssetEntry } from "./AssetBrowser.js";
 import type { EditorHostApi } from "./session.js";
 import type { EditorUiStore } from "./uiStore.js";
 import type { InspectorTab } from "./shell/layoutStore.js";
@@ -9,12 +10,14 @@ import type { InspectorTab } from "./shell/layoutStore.js";
  * `pathPoint` slice, so UI-only churn never rerenders it on `EditorChrome`'s render tick.
  * @internal — mounted by `EditorChrome` inside the right dock.
  */
-export declare function InspectorPanel({ session, ui, onClose, api, tab, onSelectTab, collapsed, onToggleSection, }: {
+export declare function InspectorPanel({ session, ui, onClose, api, assets, tab, onSelectTab, collapsed, onToggleSection, }: {
     session: EditorSession;
     ui: EditorUiStore;
     onClose?: () => void;
     /** Host API for RPC-backed actions (material assignment, camera). */
     api?: EditorHostApi;
+    /** Live browser asset list, used to resolve a placed marker's rig clips for animation authoring. */
+    assets?: readonly EditorAssetEntry[];
     /** Controlled active tab; omit for local state. */
     tab?: InspectorTab;
     onSelectTab?: (tab: InspectorTab) => void;

package/dist/InspectorPanel.js

@@ -4,10 +4,14 @@ import { editorParentOf, findEditorNote, findEditorPath, isEditorObjectLocked, }
 import { readVegetationSettings, vegetationFootprint } from "@jgengine/core/world/vegetation";
 import { getSceneKind, isSceneKind, parseParams, } from "@jgengine/core/scene/sceneKinds";
 import { getAssetGenerator } from "@jgengine/core/scene/assetGenerator";
+import { markerCatalogId } from "@jgengine/core/world/authoredObjects";
 import { useGameContext } from "@jgengine/react/provider";
+import { useDebouncedCommit } from "@jgengine/react/useDebouncedCommit";
 import { canAuthorTrigger, clearMaterialAssignmentPatch, clearTriggerInstallPatch, defaultTriggerInstallPatch, hasAuthoredTrigger, hasMaterialAssignment, } from "./authoredComponentMeta.js";
 import { SchemaInspector } from "./SchemaInspector.js";
 import { TriggerInspector } from "./TriggerInspector.js";
+import { describeClipRoles } from "./AssetBrowser.js";
+import { animationMode, animationMetaPatch, LOCOMOTION_ROLES, ONE_SHOT_EVENTS, readAnimationSetting, setAnimationMode, setLocomotionClip, setLocomotionNumber, setOneShotClip, } from "./modelAnimationAuthoring.js";
 import { listParentCandidates } from "./parentCandidates.js";
 import { TERRAIN_MATERIALS } from "./uiStore.js";
 import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
@@ -15,8 +19,19 @@ import { INPUT } from "./chromeStyles.js";
 import { NumberField } from "./chromeFields.js";
 import { AxisNumberField, FieldRow, SectionAction } from "./shell/fields.js";
 import { Icon, kindIcon } from "./shell/icons.js";
+import { CoverageSection } from "./shell/scatterCoverage.js";
 import { FOCUS_RING, INPUT_CLS, NUMERIC } from "./shell/theme.js";
 import { CollapsibleSection, EmptyState, IconButton, PanelTabs } from "./shell/ui.js";
+/** Live-mirrored, debounced density slider — grass regen only fires on pause/release, not per step (#1372). */
+function VegetationDensitySlider({ density, sliderMax, onMeta, }) {
+    const { value: local, onInput, flush } = useDebouncedCommit(density, (next) => onMeta({ density: next }, "veg:density"));
+    return (_jsxs("label", { className: "block space-y-1", children: [_jsxs("span", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "density /m\u00B2" }), _jsx("span", { className: "text-cyan-200", children: local.toFixed(2) })] }), _jsx("input", { type: "range", min: 0, max: sliderMax, step: sliderMax / 200, className: "w-full accent-emerald-400", value: Math.min(local, sliderMax), onChange: (event) => onInput(Number(event.target.value)), onPointerUp: flush, onKeyUp: flush, onBlur: flush })] }));
+}
+/** Live-mirrored, debounced item/seed text — avoids a scene patch (and grass regen) per keystroke (#1372). */
+function VegetationTextField({ label, field, value, placeholder, onMeta, }) {
+    const { value: local, onInput, flush } = useDebouncedCommit(value, (next) => onMeta({ [field]: next }, `veg:${field}`));
+    return (_jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: label }), _jsx("input", { className: `w-32 ${INPUT}`, value: local, placeholder: placeholder, onChange: (event) => onInput(event.target.value), onBlur: flush })] }));
+}
 function VegetationFields({ volume, onMeta, }) {
     const settings = readVegetationSettings(volume);
     if (settings === null)
@@ -25,7 +40,7 @@ function VegetationFields({ volume, onMeta, }) {
     const areaM2 = (footprint.maxX - footprint.minX) * (footprint.maxZ - footprint.minZ);
     const sliderMax = settings.item === "grass" ? 12 : 1;
     const estimated = Math.floor(areaM2 * settings.density);
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "item" }), _jsx("input", { className: `w-32 ${INPUT}`, value: settings.item, placeholder: "grass", onChange: (event) => onMeta({ item: event.target.value }, "veg:item") })] }), _jsxs("label", { className: "block space-y-1", children: [_jsxs("span", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "density /m\u00B2" }), _jsx("span", { className: "text-cyan-200", children: settings.density.toFixed(2) })] }), _jsx("input", { type: "range", min: 0, max: sliderMax, step: sliderMax / 200, className: "w-full accent-emerald-400", value: Math.min(settings.density, sliderMax), onChange: (event) => onMeta({ density: Number(event.target.value) }, "veg:density") })] }), _jsx(NumberField, { label: "density", step: 0.01, value: settings.density, onCommit: (value) => onMeta({ density: Math.max(0, value) }, "veg:density") }), _jsx(NumberField, { label: "min scale", step: 0.05, value: settings.minScale, onCommit: (value) => onMeta({ minScale: value }, "veg:minScale") }), _jsx(NumberField, { label: "max scale", step: 0.05, value: settings.maxScale, onCommit: (value) => onMeta({ maxScale: value }, "veg:maxScale") }), _jsx(NumberField, { label: "spacing", step: 0.25, value: settings.minDistance, onCommit: (value) => onMeta({ minDistance: Math.max(0, value) }, "veg:minDistance") }), _jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "seed" }), _jsx("input", { className: `w-32 ${INPUT}`, value: settings.seed, placeholder: "reroll\u2026", onChange: (event) => onMeta({ seed: event.target.value }, "veg:seed") })] }), _jsxs("div", { className: "text-[10px] text-neutral-500", children: ["\u2248 ", estimated.toLocaleString(), " ", settings.item === "grass" ? "blades" : "placements", " over ", Math.round(areaM2).toLocaleString(), " m\u00B2"] })] }));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(VegetationTextField, { label: "item", field: "item", value: settings.item, placeholder: "grass", onMeta: onMeta }), _jsx(VegetationDensitySlider, { density: settings.density, sliderMax: sliderMax, onMeta: onMeta }), _jsx(NumberField, { label: "density", step: 0.01, value: settings.density, onCommit: (value) => onMeta({ density: Math.max(0, value) }, "veg:density") }), _jsx(NumberField, { label: "min scale", step: 0.05, value: settings.minScale, onCommit: (value) => onMeta({ minScale: value }, "veg:minScale") }), _jsx(NumberField, { label: "max scale", step: 0.05, value: settings.maxScale, onCommit: (value) => onMeta({ maxScale: value }, "veg:maxScale") }), _jsx(NumberField, { label: "spacing", step: 0.25, value: settings.minDistance, onCommit: (value) => onMeta({ minDistance: Math.max(0, value) }, "veg:minDistance") }), _jsx(VegetationTextField, { label: "seed", field: "seed", value: settings.seed, placeholder: "reroll\u2026", onMeta: onMeta }), _jsxs("div", { className: "text-[10px] text-neutral-500", children: ["\u2248 ", estimated.toLocaleString(), " ", settings.item === "grass" ? "blades" : "placements", " over ", Math.round(areaM2).toLocaleString(), " m\u00B2"] })] }));
 }
 /** Builds the resolver-facing view of a document object for a registered scene kind's inspector. */
 function markerObject(marker) {
@@ -49,8 +64,11 @@ function KindInspector({ object, meta, onMeta }) {
     const definition = getSceneKind(object.kind);
     if (definition === undefined)
         return null;
-    const note = definition.note?.(object, parseParams(definition.schema, object.meta));
-    return (_jsx(SchemaInspector, { schema: definition.schema, label: definition.label, meta: meta, onMeta: onMeta, ...(definition.accent === undefined ? {} : { accent: definition.accent }), ...(note === undefined ? {} : { note }) }));
+    const params = parseParams(definition.schema, object.meta);
+    const note = definition.note?.(object, params);
+    const coverage = definition.coverage;
+    const accent = definition.accent ?? "#34d399";
+    return (_jsxs("div", { className: "space-y-2", children: [coverage !== undefined ? (_jsx(CoverageSection, { schema: definition.schema, coverage: coverage, object: object, params: params, accent: accent, onMeta: onMeta, ...(note === undefined ? {} : { note }) })) : null, _jsx(SchemaInspector, { schema: definition.schema, label: definition.label, meta: meta, onMeta: onMeta, ...(definition.accent === undefined ? {} : { accent: definition.accent }), ...(coverage === undefined && note !== undefined ? { note } : {}), ...(coverage === undefined ? {} : { hideKeys: [coverage.densityKey] }) })] }));
 }
 /** Auto-generated inspector for a placed generator asset's params (building/bookcase/…). */
 function GeneratorInspector({ meta, onMeta }) {
@@ -107,6 +125,26 @@ function ComponentAddBar({ target, meta, onMeta, api, selectionIds, }) {
                                     event.currentTarget.value = "";
                                 }, children: [_jsx("option", { value: "", children: "+ Material\u2026" }), TERRAIN_MATERIALS.map((material) => (_jsx("option", { value: material.id, children: material.label }, material.id)))] })] })) : null] })] }));
 }
+/** A labeled clip dropdown (never free-text) for a role/event; "— none —" clears the binding. */
+function ClipSelectRow({ label, clips, value, onChange, }) {
+    return (_jsx(FieldRow, { label: label, children: _jsxs("select", { className: `h-6.5 w-full min-w-0 px-1.5 ${INPUT_CLS}`, value: value ?? "", "aria-label": `${label} clip`, onChange: (event) => onChange(event.target.value === "" ? null : event.target.value), children: [_jsx("option", { value: "", children: "\u2014 none \u2014" }), clips.map((clip) => (_jsx("option", { value: clip, children: clip }, clip)))] }) }));
+}
+const ANIMATION_MODE_HINT = {
+    default: "Inherits the catalog default: a rigged asset auto-animates from its clip roles.",
+    auto: "Forces derivation of idle/walk/run + hit/death/attack from this rig's clip names.",
+    none: "Renders the bind pose — no clip playback.",
+    custom: "Author explicit role→clip bindings below; unset roles fall back to the rig's defaults.",
+};
+/**
+ * Inspector section authoring a placement's `ModelConfig.animation` for a rigged catalog asset.
+ * Persists to `marker.meta.animation` through the passed `onChange` (an undoable `setMarker` dispatch).
+ * All clip picks are dropdowns over the asset's real clip list — never free-text.
+ */
+function ModelAnimationSection({ clips, setting, onChange, }) {
+    const mode = animationMode(setting);
+    const config = mode === "custom" && typeof setting === "object" ? setting : null;
+    return (_jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "text-[10px] text-neutral-500", children: [clips.length, " clips \u00B7 ", describeClipRoles(clips)] }), _jsx(FieldRow, { label: "Mode", children: _jsxs("select", { className: `h-6.5 w-full min-w-0 px-1.5 ${INPUT_CLS}`, value: mode, "aria-label": "Animation mode", onChange: (event) => onChange(setAnimationMode(setting, event.target.value, clips)), children: [_jsx("option", { value: "default", children: "Default (catalog)" }), _jsx("option", { value: "auto", children: "Auto (derive)" }), _jsx("option", { value: "none", children: "None (bind pose)" }), _jsx("option", { value: "custom", children: "Custom" })] }) }), config === null ? (_jsx("div", { className: "text-[10px] leading-relaxed text-neutral-600", children: ANIMATION_MODE_HINT[mode] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "Locomotion states" }), LOCOMOTION_ROLES.map((role) => (_jsx(ClipSelectRow, { label: role, clips: clips, value: config.states?.[role] ?? null, onChange: (clip) => onChange(setLocomotionClip(setting, role, clip)) }, role))), _jsx(FieldRow, { label: "walkSpeed", title: "Speed (u/s) above which the entity counts as moving (walk).", children: _jsx(AxisNumberField, { label: "u/s", step: 0.1, value: config.states?.walkSpeed ?? 0.5, onCommit: (value) => onChange(setLocomotionNumber(setting, "walkSpeed", Math.max(0, value))) }) }), _jsx(FieldRow, { label: "runSpeed", title: "Speed above which the run clip plays (when a run clip is set).", children: _jsx(AxisNumberField, { label: "u/s", step: 0.5, value: config.states?.runSpeed ?? 6, onCommit: (value) => onChange(setLocomotionNumber(setting, "runSpeed", Math.max(0, value))) }) }), _jsx(FieldRow, { label: "fadeSec", title: "Crossfade duration (s) when the locomotion state changes.", children: _jsx(AxisNumberField, { label: "s", step: 0.05, value: config.states?.fadeSec ?? 0.2, onCommit: (value) => onChange(setLocomotionNumber(setting, "fadeSec", Math.max(0, value))) }) })] }), _jsxs("div", { className: "space-y-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "One-shot events" }), _jsx("div", { className: "text-[10px] text-neutral-600", children: "hit / death auto-fire on damage/death; others via playEntityAnimation." }), ONE_SHOT_EVENTS.map((event) => (_jsx(ClipSelectRow, { label: event, clips: clips, value: config.oneShots?.[event] ?? null, onChange: (clip) => onChange(setOneShotClip(setting, event, clip)) }, event)))] })] }))] }));
+}
 function Section({ id, title, icon, sections, children, trailing, }) {
     return (_jsx(CollapsibleSection, { title: title, ...(icon === undefined ? {} : { icon }), open: sections.collapsed[id] !== true, onToggle: () => sections.toggle(id), ...(trailing === undefined ? {} : { trailing }), children: children }));
 }
@@ -127,7 +165,7 @@ function MaterialsTab({ api, selection, meta, }) {
  * `pathPoint` slice, so UI-only churn never rerenders it on `EditorChrome`'s render tick.
  * @internal — mounted by `EditorChrome` inside the right dock.
  */
-export function InspectorPanel({ session, ui, onClose, api, tab, onSelectTab, collapsed, onToggleSection, }) {
+export function InspectorPanel({ session, ui, onClose, api, assets, tab, onSelectTab, collapsed, onToggleSection, }) {
     const document = useStoreSelector(session, (state) => state.document);
     const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
     const pathPoint = useStoreSelector(ui, (state) => state.pathPoint);
@@ -198,12 +236,16 @@ export function InspectorPanel({ session, ui, onClose, api, tab, onSelectTab, co
     else if (selectedMarker !== undefined) {
         const marker = selectedMarker;
         const onMeta = (patch, coalesce) => session.dispatch({ type: "setMarker", id: marker.id, patch: { meta: { ...marker.meta, ...patch } } }, { coalesce: `${coalesce}:${marker.id}` });
+        // Rig clips for animation authoring: this placement's catalog asset must carry animation clips.
+        const markerCatalog = markerCatalogId(marker);
+        const markerRigAsset = markerCatalog === null ? undefined : assets?.find((entry) => entry.id === markerCatalog);
+        const markerRigClips = markerRigAsset?.clips !== undefined && markerRigAsset.clips.length > 0 ? markerRigAsset.clips : null;
         const hasTrigger = hasAuthoredTrigger(marker.meta);
         const hasMaterial = hasMaterialAssignment(marker.meta);
         const hasGenerator = typeof marker.meta?.["assetId"] === "string" && getAssetGenerator(marker.meta["assetId"]) !== undefined;
         const hasKindParams = isSceneKind(marker.kind);
         const componentCards = (_jsxs(_Fragment, { children: [_jsx(ComponentAddBar, { target: "marker", meta: marker.meta, onMeta: onMeta, api: api, selectionIds: [marker.id] }), hasKindParams ? (_jsx(Section, { id: "kindParams", title: "Kind parameters", icon: "settings", sections: sections, children: _jsx(KindInspector, { object: markerObject(marker), meta: marker.meta, onMeta: onMeta }) })) : null, hasTrigger ? (_jsx(Section, { id: "trigger", title: "Trigger", icon: "target", sections: sections, trailing: _jsx(SectionAction, { label: "Remove trigger component", onClick: () => onMeta(clearTriggerInstallPatch(), "component:remove-trigger"), children: "remove" }), children: _jsx(TriggerInspector, { target: "marker", meta: marker.meta, onMeta: onMeta }) })) : null, hasMaterial ? (_jsx(Section, { id: "material", title: "Material", icon: "sphere", sections: sections, trailing: _jsx(SectionAction, { label: "Remove material assignment", onClick: () => onMeta(clearMaterialAssignmentPatch(), "component:remove-material"), children: "remove" }), children: _jsxs("div", { className: "text-[11px] text-neutral-300", children: ["materialId: ", _jsx("span", { className: NUMERIC, children: String(marker.meta?.["materialId"]) })] }) })) : null, hasGenerator ? (_jsx(Section, { id: "generator", title: "Generator", icon: "cube", sections: sections, children: _jsx(GeneratorInspector, { meta: marker.meta, onMeta: onMeta }) })) : null, !hasKindParams && !hasTrigger && !hasMaterial && !hasGenerator && !canAuthorTrigger("marker") ? (_jsx(EmptyState, { icon: "settings", title: "No components", description: "This marker has no optional components. Games that register trigger actions enable Add trigger here." })) : null] }));
-        body = (_jsxs("div", { className: "space-y-2 p-2.5", children: [_jsx(ObjectHeader, { kind: marker.kind, id: marker.id, label: marker.label ?? "", placeholder: marker.id, locked: isEditorObjectLocked(document, marker.id), onLabel: (value) => session.dispatch({ type: "setMarker", id: marker.id, patch: { label: value } }, { coalesce: `label:${marker.id}` }) }), activeTab === "inspector" ? (_jsxs(_Fragment, { children: [_jsx(Section, { id: "transform", title: "Transform", icon: "move", sections: sections, trailing: _jsx(SectionAction, { label: "Reset position to origin", onClick: () => session.dispatch({ type: "setTransform", id: marker.id, position: { x: 0, y: 0, z: 0 } }), children: "reset" }), children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(FieldRow, { label: "Position", children: ["x", "y", "z"].map((axis) => (_jsx(AxisNumberField, { axis: axis, label: axis, step: 0.5, value: marker.position[axis], onCommit: (value) => session.dispatch({ type: "setTransform", id: marker.id, position: { ...marker.position, [axis]: value } }, { coalesce: `pos:${axis}:${marker.id}` }) }, axis))) }), _jsx(FieldRow, { label: "Rotation", children: _jsx(AxisNumberField, { axis: "y", label: "y\u00B0", step: 5, precision: 1, value: Math.round((((marker.rotationY ?? 0) * 180) / Math.PI) * 10) / 10, onCommit: (value) => session.dispatch({ type: "setTransform", id: marker.id, rotationY: (value * Math.PI) / 180 }, { coalesce: `rot:${marker.id}` }) }) })] }) }), _jsx(Section, { id: "appearance", title: "Appearance", icon: "sphere", sections: sections, children: _jsx(KindColorFields, { kind: marker.kind, color: marker.color, onKind: (kind) => session.dispatch({ type: "setMarker", id: marker.id, patch: { kind } }, { coalesce: `kind:${marker.id}` }), onColor: (color) => session.dispatch({ type: "setMarker", id: marker.id, patch: { color } }, { coalesce: `color:${marker.id}` }) }) }), _jsx(Section, { id: "placement", title: "Placement", icon: "pin", sections: sections, children: _jsxs("div", { className: "space-y-2", children: [_jsx(ClearanceField, { meta: marker.meta, onMeta: onMeta }), _jsx(ParentField, { session: session, id: marker.id })] }) }), marker.meta !== undefined ? (_jsx(Section, { id: "meta", title: "Raw metadata", icon: "script", sections: sections, children: _jsx("pre", { className: "max-h-48 overflow-auto rounded-[5px] border border-white/[0.06] bg-black/40 p-2 text-[10px] text-neutral-400", children: JSON.stringify(marker.meta, null, 2) }) })) : null] })) : (componentCards)] }));
+        body = (_jsxs("div", { className: "space-y-2 p-2.5", children: [_jsx(ObjectHeader, { kind: marker.kind, id: marker.id, label: marker.label ?? "", placeholder: marker.id, locked: isEditorObjectLocked(document, marker.id), onLabel: (value) => session.dispatch({ type: "setMarker", id: marker.id, patch: { label: value } }, { coalesce: `label:${marker.id}` }) }), activeTab === "inspector" ? (_jsxs(_Fragment, { children: [_jsx(Section, { id: "transform", title: "Transform", icon: "move", sections: sections, trailing: _jsx(SectionAction, { label: "Reset position to origin", onClick: () => session.dispatch({ type: "setTransform", id: marker.id, position: { x: 0, y: 0, z: 0 } }), children: "reset" }), children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(FieldRow, { label: "Position", children: ["x", "y", "z"].map((axis) => (_jsx(AxisNumberField, { axis: axis, label: axis, step: 0.5, value: marker.position[axis], onCommit: (value) => session.dispatch({ type: "setTransform", id: marker.id, position: { ...marker.position, [axis]: value } }, { coalesce: `pos:${axis}:${marker.id}` }) }, axis))) }), _jsx(FieldRow, { label: "Rotation", children: _jsx(AxisNumberField, { axis: "y", label: "y\u00B0", step: 5, precision: 1, value: Math.round((((marker.rotationY ?? 0) * 180) / Math.PI) * 10) / 10, onCommit: (value) => session.dispatch({ type: "setTransform", id: marker.id, rotationY: (value * Math.PI) / 180 }, { coalesce: `rot:${marker.id}` }) }) })] }) }), _jsx(Section, { id: "appearance", title: "Appearance", icon: "sphere", sections: sections, children: _jsx(KindColorFields, { kind: marker.kind, color: marker.color, onKind: (kind) => session.dispatch({ type: "setMarker", id: marker.id, patch: { kind } }, { coalesce: `kind:${marker.id}` }), onColor: (color) => session.dispatch({ type: "setMarker", id: marker.id, patch: { color } }, { coalesce: `color:${marker.id}` }) }) }), _jsx(Section, { id: "placement", title: "Placement", icon: "pin", sections: sections, children: _jsxs("div", { className: "space-y-2", children: [_jsx(ClearanceField, { meta: marker.meta, onMeta: onMeta }), _jsx(ParentField, { session: session, id: marker.id })] }) }), markerRigClips !== null ? (_jsx(Section, { id: "modelAnimation", title: "Animation", icon: "film", sections: sections, children: _jsx(ModelAnimationSection, { clips: markerRigClips, setting: readAnimationSetting(marker.meta), onChange: (next) => onMeta(animationMetaPatch(next), "animation") }) })) : null, marker.meta !== undefined ? (_jsx(Section, { id: "meta", title: "Raw metadata", icon: "script", sections: sections, children: _jsx("pre", { className: "max-h-48 overflow-auto rounded-[5px] border border-white/[0.06] bg-black/40 p-2 text-[10px] text-neutral-400", children: JSON.stringify(marker.meta, null, 2) }) })) : null] })) : (componentCards)] }));
     }
     else if (selectedVolume !== undefined) {
         const volume = selectedVolume;

package/dist/ParentPickerMenu.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { FOCUS_RING, INPUT_CLS, NUMERIC } from "./shell/theme.js";
 /**
  * Searchable parent-target menu for hierarchy / viewport "Parent to…".
@@ -8,17 +8,13 @@ import { FOCUS_RING, INPUT_CLS, NUMERIC } from "./shell/theme.js";
  */
 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) => {
+    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", { autoFocus: true, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
                                 if (event.key === "Escape") {
                                     event.preventDefault();
                                     onClose();

package/dist/RuntimePlayBridge.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, 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";
+import { PlayModeBar, usePlayControl } from "./shell/PlayModeBar.js";
 const PUBLISH_MS = 100;
 function metaValues(meta) {
     if (meta === null || typeof meta !== "object" || Array.isArray(meta))
@@ -83,11 +83,9 @@ export function RuntimePlayPublisher({ api }) {
  * @internal
  */
 export function RuntimePlayInspectorChrome({ gameId, api, onExit, }) {
-    const [play, setPlay] = useState(() => api.getPlayControl());
+    const play = usePlayControl(api);
     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" });
@@ -99,17 +97,14 @@ export function RuntimePlayInspectorChrome({ gameId, api, onExit, }) {
         const timer = setInterval(tick, PUBLISH_MS);
         return () => clearInterval(timer);
     }, [api]);
-    useEffect(() => {
-        if (selectedId === null) {
-            setDetail("");
-            return;
-        }
+    const detail = useMemo(() => {
+        if (selectedId === null)
+            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));
+        if (!got.ok)
+            return got.error ?? "missing";
+        return JSON.stringify(got.result, null, 2);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- entityCount/play are poll-tick cache keys
     }, [api, selectedId, summary?.entityCount, play.pendingSteps, play.paused]);
     const nudgeSelected = (axis, delta) => {
         if (selectedId === null)

package/dist/SchemaInspector.d.ts

@@ -9,11 +9,13 @@ export type MetaPatch = (patch: Record<string, unknown>, coalesce: string) => vo
  * 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, }: {
+export declare function SchemaInspector({ schema, label, accent, note, meta, onMeta, hideKeys, }: {
     schema: ParamSchema;
     label: string;
     accent?: string;
     note?: string;
     meta: Record<string, unknown> | undefined;
     onMeta: MetaPatch;
+    /** Field keys to omit from this body — hoisted elsewhere (e.g. the density slider in `CoverageSection`). */
+    hideKeys?: readonly string[];
 }): import("react").JSX.Element;