@jgengine/editor 0.19.0 → 0.21.0

package/dist/session.d.ts

@@ -1,7 +1,11 @@
+import type { EditorSimulation } from "@jgengine/core/editor/simulation";
+import type { MaterialAsset, MaterialSelector } from "@jgengine/core/material/materialAsset";
+import type { StaticPrefabBake } from "@jgengine/core/editor/staticPrefab";
 import { type DocumentLiveSync, type DocumentPatch, type EditorCatalogDefinition, type EditorCommand, type EditorDocument, type EditorGridPaletteEntry, type EditorKindVisibility, type EditorLayersInput, type EditorSession, type EditorSessionState, type RuntimeEntityState, type RuntimePlayControl } from "@jgengine/core/editor/index";
 import type { TerraformMode, TerrainMaterialLayer } from "@jgengine/core/world/terraform";
 import type { ParamSchema } from "@jgengine/core/scene/sceneKinds";
 import type { TerrainField } from "@jgengine/core/world/terrain";
+import type { ModelMaterialSlotInfo } from "@jgengine/shell/render/materialAsset";
 /** How the editor hosts the game: frozen placement view, roamable world, the real game, or HUD-layout authoring. */
 export type EditorRunMode = "edit" | "walk" | "play" | "hud";
 /** The accepted run modes, in canonical order — the runtime guard behind {@link EditorRunMode}. @internal */
@@ -152,6 +156,11 @@ export type EditorBridgeRequest = {
     height?: number;
 } | {
     method: "scene_summary";
+} | {
+    method: "get_simulation";
+} | {
+    method: "set_simulation";
+    simulation: EditorSimulation | null;
 } | {
     method: "export_document";
 } | {
@@ -294,6 +303,10 @@ export type EditorBridgeRequest = {
 } | {
     method: "delete_prefab";
     prefabId: string;
+} | {
+    method: "set_prefab_static_bake";
+    prefabId: string;
+    bake: StaticPrefabBake | null;
 } | {
     method: "list_collections";
 } | {
@@ -340,6 +353,26 @@ export type EditorBridgeRequest = {
     color?: string;
     label?: string;
     meta?: Record<string, unknown>;
+} | {
+    method: "list_material_assets";
+} | {
+    method: "list_material_slots";
+    id: string;
+} | {
+    method: "upsert_material_asset";
+    asset: MaterialAsset;
+    coalesce?: string;
+} | {
+    method: "remove_material_asset";
+    id: string;
+} | {
+    method: "assign_material_asset";
+    ids: string[];
+    materialId: string;
+    selector: MaterialSelector;
+} | {
+    method: "clear_material_assets";
+    ids: string[];
 } | {
     method: "assign_material";
     ids: string[];
@@ -498,6 +531,25 @@ export interface EditorAssetInfo {
     kind: string;
     url?: string;
 }
+/** Canonical imported slot names and mesh prerequisites reported by the loaded model. */
+export type EditorMaterialSlotInfo = Readonly<Omit<ModelMaterialSlotInfo, "uvSets">> & {
+    readonly uvSets: readonly number[];
+};
+/** A live model-source observation; loading and unavailable reports never contain fabricated slots. */
+export type EditorMaterialSlotReport = {
+    status: "ready";
+    slots: readonly EditorMaterialSlotInfo[];
+} | {
+    status: "loading";
+} | {
+    status: "unavailable";
+    reason: string;
+};
+/** A marker's current imported-model inventory, including an explicit availability state. */
+export type EditorMaterialSlotInventory = EditorMaterialSlotReport & {
+    id: string;
+    sourceUrl?: string;
+};
 /** Rolling frame-rate sample published by the in-canvas PerfProbe. */
 export interface EditorPerfSample {
     /**
@@ -575,6 +627,10 @@ export interface EditorHostApi {
     subscribeFocus(listener: (target: EditorFocusTarget | null) => void): () => void;
     getAssets(): readonly EditorAssetInfo[];
     setAssets(assets: readonly EditorAssetInfo[]): void;
+    /** Read observed slot data for the marker's current model URL; headless or unloaded sources are unavailable. */
+    getMaterialSlots(id: string): EditorMaterialSlotInventory;
+    /** Publish a loaded-model observation only while its marker still resolves to this source URL. */
+    reportMaterialSlots(id: string, sourceUrl: string, report: EditorMaterialSlotReport): boolean;
     getCatalogDefinitions(): readonly EditorCatalogDefinition[];
     getPerf(): EditorPerfSample | null;
     setPerf(sample: EditorPerfSample): void;
@@ -586,6 +642,8 @@ export interface EditorHostApi {
     getTerrainSampler(): TerrainField | null;
     setTerrainSampler(field: TerrainField | null): void;
     getMode(): EditorRunMode;
+    /** Immutable authored snapshot captured on entering an isolated playtest. */
+    getPlayDocument(): EditorDocument | null;
     setMode(mode: EditorRunMode): void;
     subscribeMode(listener: (mode: EditorRunMode) => void): () => void;
     /** Play-mode pause/step gate consumed by the runtime publisher. */
@@ -611,6 +669,10 @@ export declare function createEditorHost(options: {
         y: number;
         z: number;
     } | null) => void;
+    validateDocument?: (document: EditorDocument) => void;
+    isolatedPlaytest?: boolean;
+    publishGlobal?: boolean;
+    persistAssetUrls?: boolean;
 }): {
     session: EditorSession;
     api: EditorHostApi;

package/dist/session.js

@@ -1,4 +1,4 @@
-import { createDocumentLiveSync, createEditorSession, createRuntimePlayControl, installDocumentLiveSync, listEditorKinds, normalizeEditorLayers, resolveCatalogDefinitions, seedEditorCatalogs, } from "@jgengine/core/editor/index";
+import { createDocumentLiveSync, cloneEditorDocument, createEditorSession, createRuntimePlayControl, installDocumentLiveSync, listEditorKinds, normalizeEditorLayers, resolveCatalogDefinitions, seedEditorCatalogs, } from "@jgengine/core/editor/index";
 import { registerBuiltinSceneKinds } from "@jgengine/core/scene/builtinSceneKinds";
 import { EDITOR_RPC_HANDLERS } from "./handlers/index.js";
 import { warmNavBake } from "./handlers/navmesh.js";
@@ -26,9 +26,16 @@ export function createEditorHost(options) {
     warmNavBake();
     const catalogDefinitions = options.catalogs ?? [];
     const document = seedEditorCatalogs(normalizeEditorLayers(options.layers), catalogDefinitions);
-    const session = createEditorSession(document);
+    let mode = "edit";
+    const session = createEditorSession(document, 100, (candidate) => {
+        if (options.isolatedPlaytest && mode === "play")
+            throw new Error("Return to editor before changing the authored scene");
+        options.validateDocument?.(candidate);
+    });
     const liveSync = createDocumentLiveSync(document);
-    const uninstallLiveSync = installDocumentLiveSync(liveSync);
+    let uninstallLiveSync = installDocumentLiveSync(liveSync);
+    let playDocument = null;
+    let playSync = null;
     let lastMirroredDocument = session.getState().document;
     const unsubscribeSessionMirror = session.subscribe((state) => {
         if (state.document === lastMirroredDocument)
@@ -39,9 +46,17 @@ export function createEditorHost(options) {
     let visibility = {};
     let focusTarget = null;
     let assets = [...(options.assets ?? [])];
+    const materialSlotReports = new Map();
+    const materialSource = (id) => {
+        const marker = session.getState().document.markers.find((item) => item.id === id);
+        if (!marker)
+            return { reason: `No authored model marker ${id}.` };
+        const catalogId = marker.catalogId ?? marker.meta?.catalogId;
+        const sourceUrl = assets.find((asset) => asset.id === catalogId)?.url;
+        return sourceUrl ? { sourceUrl } : { reason: `Marker ${id} has no URL-backed catalog model.` };
+    };
     let perf = null;
     let terrainSampler = null;
-    let mode = "edit";
     let playControl = createRuntimePlayControl(false);
     const visibilityListeners = new Set();
     const focusListeners = new Set();
@@ -72,7 +87,7 @@ export function createEditorHost(options) {
     const api = {
         gameId: options.gameId,
         getSession: () => session,
-        getLiveSync: () => liveSync,
+        getLiveSync: () => playSync ?? liveSync,
         getVisibility: () => visibility,
         setVisibility(next) {
             visibility = { ...next };
@@ -101,6 +116,31 @@ export function createEditorHost(options) {
         getAssets: () => assets,
         setAssets(next) {
             assets = [...next];
+            for (const [id, inventory] of materialSlotReports) {
+                if (materialSource(id).sourceUrl !== inventory.sourceUrl)
+                    materialSlotReports.delete(id);
+            }
+        },
+        getMaterialSlots(id) {
+            const source = materialSource(id);
+            const inventory = materialSlotReports.get(id);
+            if (source.sourceUrl === undefined || inventory?.sourceUrl !== source.sourceUrl) {
+                materialSlotReports.delete(id);
+                return { id, ...source, status: "unavailable", reason: source.reason ?? "This model has no loaded slot inventory. Select it and open the Materials workspace." };
+            }
+            return structuredClone(inventory);
+        },
+        reportMaterialSlots(id, sourceUrl, report) {
+            if (materialSource(id).sourceUrl !== sourceUrl)
+                return false;
+            const previous = materialSlotReports.get(id);
+            if (previous?.sourceUrl === sourceUrl && previous.status !== "loading" && report.status === "loading")
+                return true;
+            materialSlotReports.delete(id);
+            materialSlotReports.set(id, structuredClone({ ...report, id, sourceUrl }));
+            if (materialSlotReports.size > 64)
+                materialSlotReports.delete(materialSlotReports.keys().next().value);
+            return true;
         },
         getCatalogDefinitions: () => resolveCatalogDefinitions(session.getState().document, catalogDefinitions),
         getPerf: () => perf,
@@ -112,9 +152,16 @@ export function createEditorHost(options) {
             terrainSampler = field;
         },
         getMode: () => mode,
+        getPlayDocument: () => playDocument === null ? null : cloneEditorDocument(playDocument),
         setMode(next) {
             if (next === mode)
                 return;
+            if (options.isolatedPlaytest) {
+                uninstallLiveSync();
+                playDocument = next === "play" ? cloneEditorDocument(session.getState().document) : null;
+                playSync = playDocument === null ? null : createDocumentLiveSync(playDocument);
+                uninstallLiveSync = installDocumentLiveSync(playSync ?? liveSync);
+            }
             mode = next;
             if (next === "play") {
                 playControl = createRuntimePlayControl(false);
@@ -157,7 +204,8 @@ export function createEditorHost(options) {
             const ctx = {
                 api,
                 session,
-                liveSync,
+                liveSync: playSync ?? liveSync,
+                persistAssetUrls: options.persistAssetUrls,
                 gameId: options.gameId,
                 catalogDefinitions: defs,
                 catalogById: new Map(defs.map((definition) => [definition.id, definition])),
@@ -181,8 +229,9 @@ export function createEditorHost(options) {
             }
         },
     };
-    const uninstallHost = installEditorHost(api);
+    const uninstallHost = options.publishGlobal === false ? () => { } : installEditorHost(api);
     const dispose = () => {
+        materialSlotReports.clear();
         unsubscribeSessionMirror();
         uninstallLiveSync();
         uninstallHost();

package/dist/shell/AnimationGraphPanel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { markerCatalogId } from "@jgengine/core/world/authoredObjects";
-import { animationMetaPatch, clearAnimGraph, effectiveAnimGraph, readAnimationSetting, setTransitionDuration, storeAnimGraph, } from "../modelAnimationAuthoring.js";
+import { animationMetaPatch, clearAnimGraph, effectiveAnimGraph, readAnimationSettingResult, setTransitionDuration, storeAnimGraph, } from "../modelAnimationAuthoring.js";
 import { shallowArrayEqual, useStoreSelector } from "../useStoreSelector.js";
 import { graphParamControls, graphTriggers, MAX_PREVIEW_SECONDS, recordTrigger, simulateGraphPreview, } from "./animGraphPreview.js";
 import { initialClipPreviewState } from "./clipPreview.js";
@@ -38,6 +38,8 @@ export function AnimationGraphPanel({ session, ui, rigged, }) {
             const marker = markers.find((entry) => entry.id === id);
             if (marker === undefined)
                 continue;
+            if (readAnimationSettingResult({ markers }, marker.id).diagnostics.length > 0)
+                return { marker, asset: undefined };
             const catalogId = markerCatalogId(marker);
             const asset = catalogId === null ? undefined : rigged.find((entry) => entry.id === catalogId);
             if (asset?.url !== undefined && asset.clips !== undefined)
@@ -51,9 +53,11 @@ export function AnimationGraphPanel({ session, ui, rigged, }) {
     return _jsx(GraphInspector, { session: session, ui: ui, marker: target.marker, asset: target.asset }, target.marker.id);
 }
 function GraphInspector({ session, ui, marker, asset, }) {
-    const clips = asset.clips ?? [];
-    const setting = readAnimationSetting(marker.meta);
-    const effective = useMemo(() => effectiveAnimGraph(setting, clips), [JSON.stringify(setting), clips]);
+    const clips = asset?.clips ?? [];
+    const document = useStoreSelector(session, (state) => state.document);
+    const { setting, diagnostics } = readAnimationSettingResult(document, marker.id);
+    const invalid = diagnostics.length > 0;
+    const effective = useMemo(() => invalid || asset === undefined ? null : effectiveAnimGraph(setting, clips), [JSON.stringify(setting), invalid, asset, clips]);
     const graph = effective?.graph ?? null;
     const controls = useMemo(() => (graph === null ? [] : graphParamControls(graph)), [graph]);
     const triggerNames = useMemo(() => (graph === null ? [] : graphTriggers(graph)), [graph]);
@@ -61,6 +65,8 @@ function GraphInspector({ session, ui, marker, asset, }) {
     const [playing, setPlaying] = useState(false);
     const [params, setParams] = useState({});
     const [triggers, setTriggers] = useState([]);
+    useEffect(() => { if (invalid)
+        setPlaying(false); }, [invalid]);
     const durations = useStoreSelector(ui, (state) => state.clipPreview?.clipDurations);
     const frame = useMemo(() => {
         if (graph === null)
@@ -71,7 +77,7 @@ function GraphInspector({ session, ui, marker, asset, }) {
         return simulateGraphPreview({ graph, durations: durations ?? {}, time, params: merged, triggers });
     }, [graph, controls, params, triggers, time, durations]);
     useEffect(() => {
-        if (asset.url === undefined)
+        if (asset?.url === undefined)
             return;
         const current = ui.getState().clipPreview;
         const sameAsset = current?.source.assetId === asset.id;
@@ -87,18 +93,18 @@ function GraphInspector({ session, ui, marker, asset, }) {
             if (ui.getState().clipPreview?.source.assetId === asset.id)
                 ui.patch({ clipPreview: null });
         };
-    }, [asset.id, asset.url, asset.label, clips, ui]);
+    }, [asset?.id, asset?.url, asset?.label, clips, ui]);
     useEffect(() => {
         const current = ui.getState().clipPreview;
-        if (current === null || current.source.assetId !== asset.id)
+        if (asset === undefined || current === null || current.source.assetId !== asset.id)
             return;
         if (graph === null || frame === null) {
             if (current.graphPose !== undefined)
                 ui.patch({ clipPreview: { ...current, graphPose: undefined } });
             return;
         }
-        ui.patch({ clipPreview: { ...current, graphPose: { graph, clips: frame.clips } } });
-    }, [graph, frame, asset.id, ui, durations]);
+        ui.patch({ clipPreview: { ...current, graphPose: { graph, clips: frame.clips, ...(frame.rootMotion === true ? { rootMotion: true } : {}) } } });
+    }, [graph, frame, asset?.id, ui, durations]);
     const timeRef = useRef(time);
     timeRef.current = time;
     useEffect(() => {
@@ -121,7 +127,9 @@ function GraphInspector({ session, ui, marker, asset, }) {
         return () => cancelAnimationFrame(handle);
     }, [playing]);
     const commit = (next) => session.dispatch({ type: "setMarker", id: marker.id, patch: { meta: { ...marker.meta, ...animationMetaPatch(next) } } }, { coalesce: `animation:${marker.id}` });
-    if (graph === null || effective === null || frame === null) {
+    if (invalid)
+        return (_jsxs("div", { className: "space-y-2 p-3 text-[11px]", children: [_jsxs("div", { role: "alert", "aria-label": "Animation diagnostics", className: "space-y-1 text-amber-200", children: [_jsx("p", { children: "The saved animation override is invalid. Its graph cannot be previewed or edited until repaired or replaced." }), diagnostics.map((entry) => _jsxs("div", { children: [_jsxs("div", { className: "break-all", children: [entry.path, ": ", entry.message] }), _jsx("div", { children: entry.repair })] }, `${entry.path}:${entry.message}`))] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", className: SMALL_BUTTON, onClick: () => commit(undefined), children: "Remove invalid animation override" }), _jsx("button", { type: "button", className: SMALL_BUTTON, onClick: () => commit("auto"), children: "Replace invalid override with Auto" })] }), _jsx("p", { className: "text-neutral-500", children: "Replacement discards the invalid override and can be undone. Repair its saved fields through the existing marker metadata API to retain the intended graph." })] }));
+    if (graph === null || effective === null || frame === null || asset === undefined) {
         return (_jsx(EmptyState, { icon: "film", title: "No graph", badge: marker.label ?? marker.id, description: "This placement plays no graph: its animation is off, a single clip, or the rig has no idle clip. Pick Custom or Auto in the inspector's Animation section." }));
     }
     const weights = new Map(frame.clips.map((clip) => [`${clip.layer}:${clip.clip}`, clip.weight]));

package/dist/shell/PlayModeBar.d.ts

@@ -12,8 +12,9 @@ export declare function usePlayControl(api: EditorHostApi): RuntimePlayControl;
  * controls (`runtime_pause` / `runtime_resume` / `runtime_step`); Exit returns to edit.
  * @internal
  */
-export declare function PlayModeBar({ gameId, api, onExit, }: {
+export declare function PlayModeBar({ gameId, api, onExit, exitLabel, }: {
     gameId: string;
     api: EditorHostApi;
     onExit: () => void;
+    exitLabel?: string;
 }): import("react").JSX.Element;

package/dist/shell/PlayModeBar.js

@@ -19,7 +19,7 @@ export function usePlayControl(api) {
  * controls (`runtime_pause` / `runtime_resume` / `runtime_step`); Exit returns to edit.
  * @internal
  */
-export function PlayModeBar({ gameId, api, onExit, }) {
+export function PlayModeBar({ gameId, api, onExit, exitLabel = "Editor", }) {
     const play = usePlayControl(api);
     const pause = () => {
         api.handle({ method: "runtime_pause" });
@@ -32,5 +32,5 @@ export function PlayModeBar({ gameId, api, onExit, }) {
     };
     return (_jsxs("header", { className: `pointer-events-auto relative z-[60] flex h-12 shrink-0 items-center gap-2 border-b ${BORDER} bg-[#111318] px-2.5`, role: "banner", "aria-label": "Play mode", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] bg-gradient-to-br from-emerald-500/30 to-cyan-500/25 text-[11px] font-bold tracking-wide text-emerald-200 ring-1 ring-inset ring-emerald-400/30", "aria-hidden": "true", children: "JG" }), _jsxs("div", { className: "min-w-0 leading-tight", children: [_jsx("div", { className: "truncate text-[13px] font-semibold text-neutral-100", children: gameId }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "Play mode" })] }), _jsxs("span", { className: `ml-1 hidden items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] sm:flex ${play.paused
                             ? "bg-amber-500/15 text-amber-200 ring-1 ring-inset ring-amber-400/25"
-                            : "bg-emerald-500/15 text-emerald-200 ring-1 ring-inset ring-emerald-400/25"}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${play.paused ? "bg-amber-400" : "bg-emerald-400 animate-pulse"}` }), play.paused ? "Paused" : "Playing"] })] }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [_jsx(IconButton, { icon: play.paused ? "play" : "pause", label: play.paused ? "Resume simulation" : "Pause simulation", onClick: () => (play.paused ? resume() : pause()), active: play.paused }), _jsx(IconButton, { icon: "step", label: "Step one frame (pause required)", onClick: step, disabled: !play.paused }), _jsx(ToolbarDivider, {}), _jsxs("button", { type: "button", onClick: onExit, title: "Return to the editor (F2+E)", className: `flex h-8 items-center gap-1.5 rounded-[6px] border border-white/[0.07] bg-[#191d24] px-3 text-[12px] font-medium text-neutral-200 transition-colors hover:bg-[#1f242d] ${FOCUS_RING}`, children: [_jsx(Icon, { name: "panel", size: 12 }), "Editor"] })] })] }));
+                            : "bg-emerald-500/15 text-emerald-200 ring-1 ring-inset ring-emerald-400/25"}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${play.paused ? "bg-amber-400" : "bg-emerald-400 animate-pulse"}` }), play.paused ? "Paused" : "Playing"] })] }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [_jsx(IconButton, { icon: play.paused ? "play" : "pause", label: play.paused ? "Resume simulation" : "Pause simulation", onClick: () => (play.paused ? resume() : pause()), active: play.paused }), _jsx(IconButton, { icon: "step", label: "Step one frame (pause required)", onClick: step, disabled: !play.paused }), _jsx(ToolbarDivider, {}), _jsxs("button", { type: "button", onClick: onExit, title: "Return to the editor (F2+E)", className: `flex h-8 items-center gap-1.5 rounded-[6px] border border-white/[0.07] bg-[#191d24] px-3 text-[12px] font-medium text-neutral-200 transition-colors hover:bg-[#1f242d] ${FOCUS_RING}`, children: [_jsx(Icon, { name: "panel", size: 12 }), exitLabel] })] })] }));
 }

package/dist/shell/SceneToolbar.d.ts

@@ -8,7 +8,7 @@ export declare const ADD_VOLUME_ENTRIES: readonly {
  * Contextual scene toolbar under the app bar: tools, gizmo modes, gizmo space, pivot,
  * snapping, viewport overlays, framing, projection, and the Add menu.
  */
-export declare function SceneToolbar({ tool, gizmoMode, gizmoSpace, gizmoPivot, snapMode, gridSize, rotationSnapDeg, scaleSnap, cameraProjection, showGrid, showContours, showSurfaceGrid, showElevation, placementActive, onSetTool, onSetGizmoMode, onSetGizmoSpace, onSetGizmoPivot, onSetSnapMode, onSetGridSize, onSetRotationSnapDeg, onSetScaleSnap, onSetCameraProjection, onToggleGrid, onToggleContours, onToggleSurfaceGrid, onToggleElevation, onFrame, onStartPlacement, onOpenAssistant, assistantOpen, }: {
+export declare function SceneToolbar({ tool, gizmoMode, gizmoSpace, gizmoPivot, snapMode, gridSize, rotationSnapDeg, scaleSnap, cameraProjection, showGrid, showContours, showSurfaceGrid, showElevation, placementActive, onSetTool, onSetGizmoMode, onSetGizmoSpace, onSetGizmoPivot, onSetSnapMode, onSetGridSize, onSetRotationSnapDeg, onSetScaleSnap, onSetCameraProjection, onToggleGrid, onToggleContours, onToggleSurfaceGrid, onToggleElevation, onFrame, onStartPlacement, onOpenAssistant, assistantOpen, allowedKinds, }: {
     tool: EditorTool;
     gizmoMode: GizmoMode;
     gizmoSpace: GizmoSpace;
@@ -40,4 +40,5 @@ export declare function SceneToolbar({ tool, gizmoMode, gizmoSpace, gizmoPivot,
     onStartPlacement: (tool: PlacementTool) => void;
     onOpenAssistant: () => void;
     assistantOpen: boolean;
+    allowedKinds?: readonly string[];
 }): import("react").JSX.Element;

package/dist/shell/SceneToolbar.js

@@ -70,7 +70,7 @@ const PIVOT_LABEL = {
  * Contextual scene toolbar under the app bar: tools, gizmo modes, gizmo space, pivot,
  * snapping, viewport overlays, framing, projection, and the Add menu.
  */
-export function SceneToolbar({ tool, gizmoMode, gizmoSpace, gizmoPivot, snapMode, gridSize, rotationSnapDeg, scaleSnap, cameraProjection, showGrid, showContours, showSurfaceGrid, showElevation, placementActive, onSetTool, onSetGizmoMode, onSetGizmoSpace, onSetGizmoPivot, onSetSnapMode, onSetGridSize, onSetRotationSnapDeg, onSetScaleSnap, onSetCameraProjection, onToggleGrid, onToggleContours, onToggleSurfaceGrid, onToggleElevation, onFrame, onStartPlacement, onOpenAssistant, assistantOpen, }) {
+export function SceneToolbar({ tool, gizmoMode, gizmoSpace, gizmoPivot, snapMode, gridSize, rotationSnapDeg, scaleSnap, cameraProjection, showGrid, showContours, showSurfaceGrid, showElevation, placementActive, onSetTool, onSetGizmoMode, onSetGizmoSpace, onSetGizmoPivot, onSetSnapMode, onSetGridSize, onSetRotationSnapDeg, onSetScaleSnap, onSetCameraProjection, onToggleGrid, onToggleContours, onToggleSurfaceGrid, onToggleElevation, onFrame, onStartPlacement, onOpenAssistant, assistantOpen, allowedKinds, }) {
     const [addOpen, setAddOpen] = useState(false);
     const [snapOpen, setSnapOpen] = useState(false);
     const [pivotOpen, setPivotOpen] = useState(false);
@@ -79,7 +79,8 @@ export function SceneToolbar({ tool, gizmoMode, gizmoSpace, gizmoPivot, snapMode
         lastSnapRef.current = snapMode;
     // Recomputed every render (opening the menu rerenders): studios may register after the chrome
     // mounts (game modules load lazily), and a once-on-mount snapshot would silently hide them.
-    const studioKinds = listSceneKinds().filter((definition) => definition.addCategory !== undefined);
+    const allowed = (kind) => allowedKinds === undefined || allowedKinds.includes(kind);
+    const studioKinds = listSceneKinds().filter((definition) => definition.addCategory !== undefined && allowed(definition.kind));
     const pick = (placement) => {
         setAddOpen(false);
         onStartPlacement(placement);
@@ -112,7 +113,7 @@ export function SceneToolbar({ tool, gizmoMode, gizmoSpace, gizmoPivot, snapMode
                     ? "border-cyan-400/30 bg-cyan-500/15 text-cyan-100"
                     : "border-white/[0.07] bg-[#191d24] text-neutral-300 hover:bg-[#1f242d]"}`, children: [_jsx(Icon, { name: "camera", size: 12 }), cameraProjection === "perspective" ? "Persp" : "Ortho"] }), _jsx(ToolbarDivider, {}), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setAddOpen((value) => !value), "aria-expanded": addOpen, className: `flex h-7 items-center gap-1.5 rounded-[5px] px-2.5 text-[12px] font-medium transition-colors ${FOCUS_RING} ${addOpen || placementActive
                             ? "bg-cyan-600 text-white shadow-sm shadow-cyan-950/40"
-                            : "border border-white/[0.07] bg-[#191d24] text-neutral-200 hover:bg-[#1f242d]"}`, children: [_jsx(Icon, { name: "plus", size: 12 }), "Add"] }), _jsxs(MenuShell, { open: addOpen, onClose: () => setAddOpen(false), children: [_jsx("div", { className: `px-2 pb-1 pt-1.5 ${MICRO_LABEL}`, children: "Markers" }), WELL_KNOWN_MARKER_KINDS.map((kind) => (_jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "marker", kind }), children: kind }, kind))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO_LABEL}`, children: "Volumes" }), ADD_VOLUME_ENTRIES.map((entry) => (_jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick(entry.tool), children: entry.label }, entry.label))), [...studioKinds.reduce((groups, definition) => {
+                            : "border border-white/[0.07] bg-[#191d24] text-neutral-200 hover:bg-[#1f242d]"}`, children: [_jsx(Icon, { name: "plus", size: 12 }), "Add"] }), _jsxs(MenuShell, { open: addOpen, onClose: () => setAddOpen(false), children: [_jsx("div", { className: `px-2 pb-1 pt-1.5 ${MICRO_LABEL}`, children: "Markers" }), WELL_KNOWN_MARKER_KINDS.filter(allowed).map((kind) => (_jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "marker", kind }), children: kind }, kind))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO_LABEL}`, children: "Volumes" }), ADD_VOLUME_ENTRIES.filter((entry) => ("kind" in entry.tool && allowed(entry.tool.kind))).map((entry) => (_jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick(entry.tool), children: entry.label }, entry.label))), [...studioKinds.reduce((groups, definition) => {
                                     const category = definition.addCategory ?? "Studios";
                                     (groups.get(category) ?? groups.set(category, []).get(category)).push(definition);
                                     return groups;
@@ -120,7 +121,7 @@ export function SceneToolbar({ tool, gizmoMode, gizmoSpace, gizmoPivot, snapMode
                                             ? { tool: "path", kind: definition.kind }
                                             : definition.target === "volume"
                                                 ? { tool: "volume", kind: definition.kind, shape: "box" }
-                                                : { tool: "marker", kind: definition.kind }), children: [definition.label, definition.target === "path" ? (definition.pathShape === "line" ? " (draw line)" : " (lasso)") : ""] }, definition.kind)))] }, category))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO_LABEL}`, children: "Paths & notes" }), _jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "path", kind: "route" }), children: "Draw path (route)" }), _jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "path", kind: "road" }), children: "Draw road" }), _jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "note" }), children: "Note" })] })] }), _jsx("div", { className: "ml-auto flex items-center gap-1", children: _jsxs("button", { type: "button", onClick: onOpenAssistant, className: `flex h-7 items-center gap-1.5 rounded-[5px] px-2.5 text-[12px] transition-colors ${FOCUS_RING} ${assistantOpen
+                                                : { tool: "marker", kind: definition.kind }), children: [definition.label, definition.target === "path" ? (definition.pathShape === "line" ? " (draw line)" : " (lasso)") : ""] }, definition.kind)))] }, category))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO_LABEL}`, children: "Paths & notes" }), _jsx("button", { type: "button", disabled: !allowed("route"), className: MENU_ITEM, onClick: () => pick({ tool: "path", kind: "route" }), children: "Draw path (route)" }), _jsx("button", { type: "button", disabled: !allowed("road"), className: MENU_ITEM, onClick: () => pick({ tool: "path", kind: "road" }), children: "Draw road" }), _jsx("button", { type: "button", className: MENU_ITEM, onClick: () => pick({ tool: "note" }), children: "Note" })] })] }), _jsx("div", { className: "ml-auto flex items-center gap-1", children: _jsxs("button", { type: "button", onClick: onOpenAssistant, className: `flex h-7 items-center gap-1.5 rounded-[5px] px-2.5 text-[12px] transition-colors ${FOCUS_RING} ${assistantOpen
                         ? "border border-violet-400/40 bg-violet-500/20 text-violet-100"
                         : "border border-white/[0.07] bg-[#191d24] text-neutral-300 hover:bg-[#1f242d] hover:text-neutral-100"}`, title: "AI assistant \u2014 drives the scene through the same RPC and undo as the toolbar", children: [_jsx(Icon, { name: "sparkle", size: 13 }), "AI"] }) })] }));
 }

package/dist/shell/TopAppBar.d.ts

@@ -8,10 +8,11 @@ export type TopBarSaveState = "idle" | "saving" | "saved" | "error";
  * edit mode; Play mode mounts {@link PlayModeBar}, which wires the same controls to the
  * runtime pause/step RPCs so mode switches keep shell chrome.
  */
-export declare function TopAppBar({ gameId, onExitToGame, dirty, saveState, lastSavedAt, saveAvailable, saveError, canUndo, canRedo, onUndo, onRedo, onSave, onPlay, onWalk, onHud, onImport, onExport, onCopyJson, onOpenPalette, onToggleHelp, onResetLayout, }: {
+export declare function TopAppBar({ gameId, onExitToGame, exitLabel, dirty, saveState, lastSavedAt, saveAvailable, saveError, canUndo, canRedo, onUndo, onRedo, onSave, onPlay, onWalk, onHud, onImport, onExport, onCopyJson, onOpenPalette, onToggleHelp, onResetLayout, }: {
     gameId: string;
     /** When set (editor summoned over a game), renders an "Exit to game" control that closes the editor. */
     onExitToGame?: () => void;
+    exitLabel?: string;
     dirty: boolean;
     saveState: TopBarSaveState;
     /** Epoch ms of the last successful save this session; omit/null when never saved. */

package/dist/shell/TopAppBar.js

@@ -34,7 +34,7 @@ function SaveStatus({ dirty, saveState, lastSavedAt, }) {
  * edit mode; Play mode mounts {@link PlayModeBar}, which wires the same controls to the
  * runtime pause/step RPCs so mode switches keep shell chrome.
  */
-export function TopAppBar({ gameId, onExitToGame, dirty, saveState, lastSavedAt = null, saveAvailable, saveError, canUndo, canRedo, onUndo, onRedo, onSave, onPlay, onWalk, onHud, onImport, onExport, onCopyJson, onOpenPalette, onToggleHelp, onResetLayout, }) {
+export function TopAppBar({ gameId, onExitToGame, exitLabel = "Exit to game", dirty, saveState, lastSavedAt = null, saveAvailable, saveError, canUndo, canRedo, onUndo, onRedo, onSave, onPlay, onWalk, onHud, onImport, onExport, onCopyJson, onOpenPalette, onToggleHelp, onResetLayout, }) {
     const [menuOpen, setMenuOpen] = useState(false);
     const menuRef = useRef(null);
     useEffect(() => {
@@ -56,7 +56,7 @@ export function TopAppBar({ gameId, onExitToGame, dirty, saveState, lastSavedAt
         };
     }, [menuOpen]);
     const menuItem = `flex w-full items-center gap-2 rounded-[5px] px-2.5 py-1.5 text-left text-[12px] text-neutral-300 transition-colors hover:bg-cyan-500/15 hover:text-cyan-100 ${FOCUS_RING}`;
-    return (_jsxs("header", { className: `pointer-events-auto relative z-[60] flex h-12 shrink-0 items-center gap-2 border-b ${BORDER} bg-[#111318] px-2.5`, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [onExitToGame !== undefined ? (_jsxs("button", { type: "button", onClick: onExitToGame, title: "Close the editor and return to the game (F2+Q)", className: `flex h-8 shrink-0 items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-black/30 pl-2 pr-2.5 text-[12px] text-neutral-300 transition-colors hover:border-white/[0.16] hover:bg-white/[0.06] hover:text-neutral-100 ${FOCUS_RING}`, children: [_jsx(Icon, { name: "chevronRight", size: 14, className: "rotate-180" }), "Exit to game"] })) : null, _jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] bg-gradient-to-br from-cyan-500/30 to-indigo-500/25 text-[11px] font-bold tracking-wide text-cyan-200 ring-1 ring-inset ring-cyan-400/30", "aria-hidden": "true", children: "JG" }), _jsxs("div", { className: "min-w-0 leading-tight", children: [_jsx("div", { className: "truncate text-[13px] font-semibold text-neutral-100", children: gameId }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "Scene Editor" })] }), _jsx("div", { className: "ml-1 hidden md:block", children: _jsx(SaveStatus, { dirty: dirty, saveState: saveState, lastSavedAt: lastSavedAt }) })] }), _jsx("div", { className: "flex flex-1 justify-center px-2", children: _jsxs("button", { type: "button", onClick: onOpenPalette, "aria-label": "Open command palette", className: `flex h-8 w-full max-w-[420px] items-center gap-2 rounded-[6px] border border-white/[0.08] bg-black/30 px-3 text-[12px] text-neutral-500 transition-colors hover:border-white/[0.14] hover:text-neutral-400 ${FOCUS_RING}`, children: [_jsx(Icon, { name: "search", size: 13 }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: "Search or run a command\u2026" }), _jsxs("span", { className: "hidden items-center gap-0.5 sm:flex", children: [_jsx(Kbd, { children: "Ctrl" }), _jsx(Kbd, { children: "K" })] })] }) }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(IconButton, { icon: "undo", label: "Undo (Ctrl+Z)", onClick: onUndo, disabled: !canUndo, tone: "ghost" }), _jsx(IconButton, { icon: "redo", label: "Redo (Ctrl+Y)", onClick: onRedo, disabled: !canRedo, tone: "ghost" }), _jsx(ToolbarDivider, {}), _jsxs("button", { type: "button", onClick: onPlay, className: `flex h-8 items-center gap-1.5 rounded-[6px] bg-emerald-600 px-3.5 text-[12px] font-semibold text-white shadow-sm shadow-emerald-950/40 transition-colors hover:bg-emerald-500 ${FOCUS_RING}`, title: "Enter Play mode (F2+E toggles back)", children: [_jsx(Icon, { name: "play", size: 12 }), "Play"] }), _jsx(IconButton, { icon: "pause", label: "Pause \u2014 available in Play mode", disabled: true }), _jsx(IconButton, { icon: "step", label: "Step one frame \u2014 available in Play mode", disabled: true }), _jsx(ToolbarDivider, {}), _jsx(IconButton, { icon: "walk", label: "Walk the world", onClick: onWalk, tone: "ghost" }), _jsx(IconButton, { icon: "panel", label: "Lay out HUD panels", onClick: onHud, tone: "ghost" }), _jsx(ToolbarDivider, {}), saveAvailable ? (_jsxs("button", { type: "button", onClick: onSave, disabled: saveState === "saving", title: saveError ?? "Write the scene to the game's editor.scene.json (Ctrl+S)", className: `flex h-8 items-center gap-1.5 rounded-[6px] px-3 text-[12px] font-medium transition-colors ${FOCUS_RING} ${saveState === "error"
+    return (_jsxs("header", { className: `pointer-events-auto relative z-[60] flex h-12 shrink-0 items-center gap-2 border-b ${BORDER} bg-[#111318] px-2.5`, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [onExitToGame !== undefined ? (_jsxs("button", { type: "button", onClick: onExitToGame, title: `${exitLabel} (F2+Q)`, className: `flex h-8 shrink-0 items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-black/30 pl-2 pr-2.5 text-[12px] text-neutral-300 transition-colors hover:border-white/[0.16] hover:bg-white/[0.06] hover:text-neutral-100 ${FOCUS_RING}`, children: [_jsx(Icon, { name: "chevronRight", size: 14, className: "rotate-180" }), exitLabel] })) : null, _jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] bg-gradient-to-br from-cyan-500/30 to-indigo-500/25 text-[11px] font-bold tracking-wide text-cyan-200 ring-1 ring-inset ring-cyan-400/30", "aria-hidden": "true", children: "JG" }), _jsxs("div", { className: "min-w-0 leading-tight", children: [_jsx("div", { className: "truncate text-[13px] font-semibold text-neutral-100", children: gameId }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "Scene Editor" })] }), _jsx("div", { className: "ml-1 hidden md:block", children: _jsx(SaveStatus, { dirty: dirty, saveState: saveState, lastSavedAt: lastSavedAt }) })] }), _jsx("div", { className: "flex flex-1 justify-center px-2", children: _jsxs("button", { type: "button", onClick: onOpenPalette, "aria-label": "Open command palette", className: `flex h-8 w-full max-w-[420px] items-center gap-2 rounded-[6px] border border-white/[0.08] bg-black/30 px-3 text-[12px] text-neutral-500 transition-colors hover:border-white/[0.14] hover:text-neutral-400 ${FOCUS_RING}`, children: [_jsx(Icon, { name: "search", size: 13 }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: "Search or run a command\u2026" }), _jsxs("span", { className: "hidden items-center gap-0.5 sm:flex", children: [_jsx(Kbd, { children: "Ctrl" }), _jsx(Kbd, { children: "K" })] })] }) }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(IconButton, { icon: "undo", label: "Undo (Ctrl+Z)", onClick: onUndo, disabled: !canUndo, tone: "ghost" }), _jsx(IconButton, { icon: "redo", label: "Redo (Ctrl+Y)", onClick: onRedo, disabled: !canRedo, tone: "ghost" }), _jsx(ToolbarDivider, {}), _jsxs("button", { type: "button", onClick: onPlay, className: `flex h-8 items-center gap-1.5 rounded-[6px] bg-emerald-600 px-3.5 text-[12px] font-semibold text-white shadow-sm shadow-emerald-950/40 transition-colors hover:bg-emerald-500 ${FOCUS_RING}`, title: "Enter Play mode (F2+E toggles back)", children: [_jsx(Icon, { name: "play", size: 12 }), "Play"] }), _jsx(IconButton, { icon: "pause", label: "Pause \u2014 available in Play mode", disabled: true }), _jsx(IconButton, { icon: "step", label: "Step one frame \u2014 available in Play mode", disabled: true }), _jsx(ToolbarDivider, {}), _jsx(IconButton, { icon: "walk", label: "Walk the world", onClick: onWalk, tone: "ghost" }), _jsx(IconButton, { icon: "panel", label: "Lay out HUD panels", onClick: onHud, tone: "ghost" }), _jsx(ToolbarDivider, {}), saveAvailable ? (_jsxs("button", { type: "button", onClick: onSave, disabled: saveState === "saving", title: saveError ?? "Write the scene to the game's editor.scene.json (Ctrl+S)", className: `flex h-8 items-center gap-1.5 rounded-[6px] px-3 text-[12px] font-medium transition-colors ${FOCUS_RING} ${saveState === "error"
                             ? "bg-rose-600/90 text-white hover:bg-rose-500"
                             : dirty
                                 ? "bg-cyan-600 text-white shadow-sm shadow-cyan-950/40 hover:bg-cyan-500"

package/dist/shell/animGraphPreview.d.ts

@@ -34,6 +34,8 @@ export interface GraphPreviewFrame {
         name: string;
         clip: string;
     }[];
+    /** Active root-motion playback stays in place in the editor, matching the collision-authoritative shell. */
+    rootMotion?: true;
 }
 /** Longest preview timeline the scrubber offers, in seconds. */
 export declare const MAX_PREVIEW_SECONDS = 20;

package/dist/shell/animGraphPreview.js

@@ -31,15 +31,18 @@ export function simulateGraphPreview(input) {
     const states = {};
     for (const layer of input.graph.layers)
         states[layer.id] = runtime.stateOf(layer.id) ?? layer.entry;
-    return { time, states, clips: out.clips, events };
+    return { time, states, clips: out.clips, events, ...(out.rootMotion === true ? { rootMotion: true } : {}) };
 }
 /** Every clip name a graph plays. */
 export function graphClipNames(graph) {
     const names = new Set();
     for (const layer of graph.layers) {
         for (const state of Object.values(layer.states)) {
-            if (state.kind === "clip")
+            if (state.kind === "clip") {
                 names.add(state.clip);
+                for (const clip of state.variants ?? [])
+                    names.add(clip);
+            }
             else
                 for (const point of state.points)
                     names.add(point.clip);

package/dist/shell/clipPreview.d.ts

@@ -46,6 +46,7 @@ export interface ClipPreviewSession {
     readonly graphPose?: {
         readonly graph: AnimGraph;
         readonly clips: readonly AnimClipOutput[];
+        readonly rootMotion?: true;
     };
 }
 /** Playback state of the clip preview driver. `time` is seconds into the clip. */

package/dist/useDocumentSave.d.ts

@@ -0,0 +1,20 @@
+import type { EditorSession } from "@jgengine/core/editor/commands";
+/** Document save lifecycle owned by the mounted authoring session, across viewport modes. */
+export interface EditorDocumentSave {
+    available: boolean;
+    dirty: boolean;
+    saveState: "idle" | "saving" | "saved" | "error";
+    saveError: string | null;
+    lastSavedAt: number | null;
+    doSave(): void;
+}
+/** Save status shared with editor chrome without changing the viewport component identity. @internal */
+export declare const EditorDocumentSaveContext: import("react").Context<EditorDocumentSave | undefined>;
+type SaveFn = (json: string) => Promise<{
+    ok: boolean;
+    path?: string;
+    error?: string;
+}>;
+/** Keep the acknowledged document and pending/error status alive while editor chrome unmounts. @internal */
+export declare function useDocumentSave(session: EditorSession, save: SaveFn | undefined, onResult?: (ok: boolean, detail: string) => void): EditorDocumentSave;
+export {};

package/dist/useDocumentSave.js

@@ -0,0 +1,33 @@
+import { createContext, useCallback, useMemo, useRef, useState, useSyncExternalStore } from "react";
+/** Save status shared with editor chrome without changing the viewport component identity. @internal */
+export const EditorDocumentSaveContext = createContext(undefined);
+/** Keep the acknowledged document and pending/error status alive while editor chrome unmounts. @internal */
+export function useDocumentSave(session, save, onResult) {
+    const store = useMemo(() => ({ subscribe: (listener) => session.subscribe(listener), getSnapshot: () => session.getState().document }), [session]);
+    const document = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+    const [status, setStatus] = useState(() => ({ document, state: "idle", error: null, at: null }));
+    const currentJson = useMemo(() => JSON.stringify(document), [document]);
+    const savedJson = useMemo(() => JSON.stringify(status.document), [status.document]);
+    const pending = useRef(false);
+    const result = useRef(onResult);
+    result.current = onResult;
+    const doSave = useCallback(() => {
+        if (save === undefined || pending.current)
+            return;
+        const savedDocument = session.getState().document;
+        const json = session.exportJson(true);
+        pending.current = true;
+        setStatus((previous) => ({ ...previous, state: "saving" }));
+        void Promise.resolve().then(() => save(json)).then((value) => {
+            if (!value.ok)
+                throw new Error(value.error ?? "save failed");
+            setStatus({ document: savedDocument, state: "saved", error: null, at: Date.now() });
+            result.current?.(true, value.path === undefined ? "Scene saved" : `Scene saved to ${value.path}`);
+        }).catch((failure) => {
+            const message = failure instanceof Error ? failure.message : String(failure);
+            setStatus((previous) => ({ ...previous, state: "error", error: message }));
+            result.current?.(false, `Save failed: ${message}`);
+        }).finally(() => { pending.current = false; });
+    }, [session, save]);
+    return { available: save !== undefined, dirty: currentJson !== savedJson, saveState: status.state, saveError: status.error, lastSavedAt: status.at, doSave };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jgengine/editor",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Scene/world/asset editor for JGengine — loaded lazily by the runner; never import from game entrypoints.",
   "license": "Apache-2.0",
   "type": "module",
@@ -31,10 +31,10 @@
     "test": "bun test src"
   },
   "dependencies": {
-    "@jgengine/core": "^0.19.0",
-    "@jgengine/navbake": "^0.19.0",
-    "@jgengine/react": "^0.19.0",
-    "@jgengine/shell": "^0.19.0"
+    "@jgengine/core": "^0.21.0",
+    "@jgengine/navbake": "^0.21.0",
+    "@jgengine/react": "^0.21.0",
+    "@jgengine/shell": "^0.21.0"
   },
   "peerDependencies": {
     "@react-three/drei": "^10.0.0",
@@ -46,6 +46,7 @@
   "devDependencies": {
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
+    "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/three": "^0.182.0",

package/skills/ce-handoff/SKILL.md

@@ -25,7 +25,7 @@ Create one immutable handoff at the destination the user requested, or use the m
 ### Build the handoff
 
 1. Distill the current objective and the user's latest intent. If a focus was supplied, make it the `resume_focus`.
-2. Inspect only the workspace state needed to explain what exists now. Use JGengine project instructions already in context (`AGENTS.md` / `CLAUDE.md`, `workflow`, domain skills).
+2. Inspect only the workspace state needed to explain what exists now. Use JGengine project instructions already in context (`AGENTS.md`, `workflow`, domain skills).
 3. Point to plans, issues, commits, diffs, documentation, and relevant files instead of reproducing their contents. Prefer repository-relative paths (`docs/plans/…`, `packages/…`, `Games/…`).
 4. Redact secrets, credentials, tokens, and unrelated personal information. Preserve operational paths only when the next agent needs them.
 5. Write or publish with existing tools. If the user named another path, folder, format, or publication destination, honor it. Do not also create a managed-store copy unless asked.