@fps-games/editor 0.1.3-beta.4 → 0.1.4-beta.1

package/dist/local-editor-harness.js

@@ -1,13 +1,18 @@
-import { createEditorSession, createInspectorRegistry, DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS, DEFAULT_EDITOR_VIEWPORT_TOOL_STATE, createEmptyEditorViewportSpatialOverlayState, cloneEditorViewportToolState, cloneEditorViewportSpatialOverlayState, createInspectorEditPayload, computeEditorTransformActionTargets, mergeInspectorSections, normalizeEditorTransformConstraint, resolveEditorSelectionCommand, serializedMultiObjectToInspectorObject, serializedObjectToInspectorObject, validateSceneGraphDelete, validateSceneGraphDrop, validateSceneGraphGroupSelection, validateSceneGraphMove, validateSceneGraphRename, } from '@fps-games/editor-core';
-import { createLocalEditorBrowserUi, } from '@fps-games/editor-browser';
+import { createEditorSession, createInspectorRegistry, DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS, DEFAULT_EDITOR_VIEWPORT_TOOL_STATE, createEmptyEditorViewportSpatialOverlayState, cloneEditorViewportToolState, cloneEditorViewportSpatialOverlayState, aggregateInspectorObjectsToMultiObject, createInspectorEditPayload, compareInspectorSections, computeEditorTransformActionTargets, mergeInspectorSections, normalizeEditorTransformConstraint, resolveEditorSelectionCommand, serializedMultiObjectToInspectorObject, serializedObjectToInspectorObject, validateSceneGraphDelete, validateSceneGraphDrop, validateSceneGraphGroupSelection, validateSceneGraphMove, validateSceneGraphRename, } from '@fps-games/editor-core';
+import { createLocalEditorBrowserUi, toTransformOperationPolicyStatusLabel, } from '@fps-games/editor-browser';
+import { createBabylonEnvironmentTextureController, createBabylonDefaultPostProcessPipelineController, } from '@fps-games/babylon-renderer';
 import { createBabylonEditorProjection, createBabylonEditorWorld, createBabylonProjectionSelectionController, createBabylonSceneCameraPreviewController, createBabylonSceneViewCameraController, createBabylonSceneViewInputController, createBabylonSceneViewMeasurementController, createBabylonSceneViewSpatialOverlayController, createBabylonEditorShadowPreviewController, createBabylonTransformGizmoController, focusEditorViewportSelection, } from '@fps-games/editor-babylon';
-import { createLocalEditorSceneRenderScheduler, } from './local-editor-scene-render-scheduler';
-import { createLocalEditorViewportRenderCoordinator, } from './local-editor-viewport-render-coordinator';
-import { createLocalEditorSceneViewInteractionRuntime, } from './local-editor-scene-view-interaction-runtime';
+import { createLocalEditorSceneRenderScheduler, } from './local-editor-scene-render-scheduler.js';
+import { createPlayableBabylonOutlineInspectorSection, createPlayableBabylonOutlineInspectorSeedPatchValue, isPlayableBabylonOutlineInspectorPatchPath, } from './playable-babylon-outline-inspector.js';
+import { createLocalEditorViewportRenderCoordinator, } from './local-editor-viewport-render-coordinator.js';
+import { createLocalEditorSceneViewInteractionRuntime, } from './local-editor-scene-view-interaction-runtime.js';
+const BATCH_EDIT_REQUIRES_MULTI_PATCH_REASON = 'Batch edit requires multi-property patch support.';
 export function createLocalEditorHarness(options) {
     const root = options.root ?? document.body;
     const state = {
         mode: 'game',
+        editorStateRevision: 0,
+        sceneArtifactRevision: 0,
         busy: false,
         session: null,
         source: null,
@@ -21,6 +26,8 @@ export function createLocalEditorHarness(options) {
         gridVisible: true,
         projection: null,
         shadowPreview: null,
+        environmentTexture: null,
+        postProcess: null,
         projectionShadowPreviewRebuildFrame: null,
         gizmo: null,
         sceneCameraPreview: null,
@@ -45,6 +52,7 @@ export function createLocalEditorHarness(options) {
         viewportMeasurement: createEmptyViewportMeasurement(),
         viewportSpatialOverlay: createEmptyEditorViewportSpatialOverlayState(),
         duplicateDrag: null,
+        activeTransformPreview: null,
         armedPlacement: null,
         resizeHandler: null,
         status: 'Game running',
@@ -99,12 +107,14 @@ export function createLocalEditorHarness(options) {
                     harness.render();
             },
             onSelectHierarchyItem: (input) => {
-                if (selectItem(state, options, input))
+                selectItem(state, options, input, harness.render);
+            },
+            onHierarchyItemEnabledChange: (input) => {
+                if (patchHierarchyItemEnabled(state, options, input))
                     harness.render();
             },
             onSelectionCommand: (command) => {
-                if (dispatchSelectionCommand(state, options, command))
-                    harness.render();
+                dispatchSelectionCommand(state, options, command, harness.render);
             },
             onSceneGraphRename: (intent) => {
                 if (renameSceneGraphNode(state, options, intent))
@@ -178,64 +188,69 @@ export function createLocalEditorHarness(options) {
                 }
                 : undefined,
             onTransformToolChange: (tool) => {
-                state.transformTool = tool;
-                state.transformConstraint = normalizeTransformConstraint(tool, state.transformConstraint);
-                state.gizmo?.setTool(tool);
-                state.gizmo?.setConstraint(state.transformConstraint);
-                harness.render();
-                requestEditorSceneFrame(state, 'transform-tool-change');
+                commitEditorStateChange(state, harness.render, 'transform-tool-change', () => {
+                    state.transformTool = tool;
+                    state.transformConstraint = normalizeTransformConstraint(tool, state.transformConstraint);
+                }, {
+                    syncTransformArtifacts: true,
+                });
             },
             onTransformSpaceChange: (space) => {
-                state.transformSpace = space;
-                state.gizmo?.setSpace(space);
-                harness.render();
-                requestEditorSceneFrame(state, 'transform-space-change');
+                commitEditorStateChange(state, harness.render, 'transform-space-change', () => {
+                    state.transformSpace = space;
+                }, {
+                    syncTransformArtifacts: true,
+                });
             },
             onTransformConstraintChange: (constraint) => {
-                state.transformConstraint = normalizeTransformConstraint(state.transformTool, constraint);
-                state.gizmo?.setConstraint(state.transformConstraint);
-                harness.render();
-                requestEditorSceneFrame(state, 'transform-constraint-change');
+                commitEditorStateChange(state, harness.render, 'transform-constraint-change', () => {
+                    state.transformConstraint = normalizeTransformConstraint(state.transformTool, constraint);
+                }, {
+                    syncTransformArtifacts: true,
+                });
             },
             onTransformSnapEnabledChange: (enabled) => {
-                state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, {
-                    snap: {
-                        ...state.transformOperationSettings.snap,
-                        enabled,
-                    },
+                commitEditorStateChange(state, harness.render, 'transform-operation-settings-change', () => {
+                    state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, {
+                        snap: {
+                            ...state.transformOperationSettings.snap,
+                            enabled,
+                        },
+                    });
+                    state.status = enabled ? 'Transform snap enabled' : 'Transform snap disabled';
+                }, {
+                    syncTransformOperationArtifacts: true,
                 });
-                state.gizmo?.setOperationSettings(state.transformOperationSettings);
-                state.status = enabled ? 'Transform snap enabled' : 'Transform snap disabled';
-                harness.render();
-                requestEditorSceneFrame(state, 'transform-operation-settings-change');
             },
             onTransformSnapStepChange: (input) => {
                 const value = normalizePositiveStep(input.value);
                 if (value == null)
                     return;
-                const snap = { ...state.transformOperationSettings.snap };
-                if (input.kind === 'move')
-                    snap.moveStep = value;
-                else if (input.kind === 'rotate')
-                    snap.rotateStepDegrees = value;
-                else
-                    snap.scaleStep = value;
-                state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, { snap });
-                state.gizmo?.setOperationSettings(state.transformOperationSettings);
-                state.status = `Transform snap ${input.kind} step ${value}`;
-                harness.render();
-                requestEditorSceneFrame(state, 'transform-operation-settings-change');
+                commitEditorStateChange(state, harness.render, 'transform-operation-settings-change', () => {
+                    const snap = { ...state.transformOperationSettings.snap };
+                    if (input.kind === 'move')
+                        snap.moveStep = value;
+                    else if (input.kind === 'rotate')
+                        snap.rotateStepDegrees = value;
+                    else
+                        snap.scaleStep = value;
+                    state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, { snap });
+                    state.status = `Transform snap ${input.kind} step ${value}`;
+                }, {
+                    syncTransformOperationArtifacts: true,
+                });
             },
             onPlacementModeChange: (mode) => {
-                state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, {
-                    placementMode: normalizePlacementMode(mode),
+                commitEditorStateChange(state, harness.render, 'placement-mode-change', () => {
+                    state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, {
+                        placementMode: normalizePlacementMode(mode),
+                    });
+                    if (state.transformOperationSettings.placementMode === 'off')
+                        clearArmedPlacement(state);
+                    state.status = `Placement mode: ${state.transformOperationSettings.placementMode}`;
+                }, {
+                    syncTransformOperationArtifacts: true,
                 });
-                state.gizmo?.setOperationSettings(state.transformOperationSettings);
-                if (state.transformOperationSettings.placementMode === 'off')
-                    clearArmedPlacement(state);
-                state.status = `Placement mode: ${state.transformOperationSettings.placementMode}`;
-                harness.render();
-                requestEditorSceneFrame(state, 'placement-mode-change');
             },
             onTransformAction: (action) => {
                 if (executeTransformAction(state, options, action))
@@ -374,7 +389,12 @@ export function createLocalEditorHarness(options) {
                 reduceDocument: options.documentAdapter.reduceDocument,
             });
             await options.worldAdapter.disposeGameWorld();
-            await createEditorWorld(state, options, harness.render, stats => ui.updateSceneFrameStats?.(stats));
+            await createEditorWorld(state, options, harness.render, previewState => {
+                if (ui.updatePreview)
+                    ui.updatePreview(previewState);
+                else
+                    ui.update(createUiState(state, options));
+            }, stats => ui.updateSceneFrameStats?.(stats));
             state.mode = 'editor';
             state.summary = loadedSource?.summary ?? summarizeDocument(options, preparedDocument, source);
             state.status = `GameWorld disposed; EditorWorld active; assets=${assets.length}`;
@@ -496,6 +516,13 @@ function cloneTransformOperationSettings(settings) {
         placementMode: settings.placementMode,
     };
 }
+function cloneEditorTransformSnapshot(transform) {
+    return {
+        position: { ...transform.position },
+        rotation: { ...transform.rotation },
+        scale: { ...transform.scale },
+    };
+}
 function updateTransformOperationSettings(current, patch) {
     return {
         ...current,
@@ -747,12 +774,15 @@ function validateTransformActionSelection(state, action) {
         ? { ok: true }
         : { ok: false, message: 'Distribute needs at least 3 selected objects' };
 }
-async function createEditorWorld(state, options, renderUi, updateSceneFrameStats) {
+async function createEditorWorld(state, options, renderUi, renderPreviewUi, updateSceneFrameStats) {
     disposeEditorWorld(state);
     const render = (reason = 'editor-world-update') => {
         renderUi();
         requestEditorSceneFrame(state, reason);
     };
+    const preview = (reason) => {
+        requestEditorPreviewFrame(state, options, renderPreviewUi, reason);
+    };
     const canvas = options.worldAdapter.getCanvas();
     if (!canvas)
         throw new Error('Editor canvas not found');
@@ -804,15 +834,16 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         babylon,
         scene: world.scene,
         importModel: options.worldAdapter.importProjectionModel,
+        resolveTextureUrl: options.worldAdapter.resolveMaterialTextureUrl,
         logger: console,
         onProjectionReady(event) {
-            syncCurrentSelectionToSceneArtifacts(state);
+            syncCurrentSelectionToSceneArtifacts(state, `projection-${event.nodeId}-ready-selection`);
             viewportRenderCoordinator.invalidateScene(`projection-${event.nodeId}-ready`);
         },
         onProjectionBatchSettled(event) {
             if (event.asyncNodeIds.length === 0)
                 return;
-            syncCurrentSelectionToSceneArtifacts(state);
+            syncCurrentSelectionToSceneArtifacts(state, `projection-batch-${event.batchId}-settled-selection`);
             scheduleProjectionShadowPreviewRebuild(state, `projection-batch-${event.batchId}-settled`);
         },
     });
@@ -822,19 +853,26 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         projection,
         initialTool: state.transformTool,
         initialSpace: state.transformSpace,
+        documentCapabilities: options.transformDocumentCapabilities,
         logger: console,
         onDragStart(event) {
             sceneViewInteraction.beginGizmoDrag();
-            state.status = event.targetIds.length > 1
+            const policyStatus = toTransformOperationPolicyStatusLabel(event.operationPolicy);
+            state.status = policyStatus || (event.targetIds.length > 1
                 ? `Dragging ${event.duplicate ? 'duplicate ' : ''}${event.tool} ${event.targetIds.length} objects`
-                : `Dragging ${event.duplicate ? 'duplicate ' : ''}${event.tool} ${event.nodeId ?? event.activeId ?? 'selection'}`;
+                : `Dragging ${event.duplicate ? 'duplicate ' : ''}${event.tool} ${event.nodeId ?? event.activeId ?? 'selection'}`);
+            state.statusTone = policyStatus ? 'warning' : 'default';
+            state.statusToneStatus = state.status;
+            state.statusDetails = '';
             render();
         },
-        onDragUpdate() {
-            render();
+        onDragUpdate(event) {
+            updateActiveTransformPreview(state, event);
+            preview('gizmo-drag-update');
         },
         onDragEnd(event) {
             sceneViewInteraction.endGizmoDrag();
+            clearActiveTransformPreview(state);
             const changed = commitGizmoTransform(state, options, event);
             if (!changed)
                 requestEditorSceneFrame(state, 'gizmo-drag-end');
@@ -842,6 +880,7 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         },
         onDragCancel(event) {
             sceneViewInteraction.endGizmoDrag();
+            clearActiveTransformPreview(state);
             if (event.duplicate && cancelDuplicateDrag(state, options)) {
                 render();
                 return;
@@ -853,6 +892,7 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         },
         onDragBlocked(event) {
             sceneViewInteraction.endGizmoDrag();
+            clearActiveTransformPreview(state);
             if (event.duplicate)
                 cancelDuplicateDrag(state, options);
             requestEditorSceneFrame(state, 'gizmo-drag-blocked');
@@ -877,8 +917,7 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         isLocked: (nodeId) => isDocumentNodeLocked(state, options, nodeId),
         isOperationBlocked: () => state.gizmo?.getState().dragPhase === 'dragging',
         onSelectionCommand(command) {
-            if (dispatchSelectionCommand(state, options, command))
-                render();
+            dispatchSelectionCommand(state, options, command, render);
         },
         onFocusIntent(nodeId) {
             if (focusProjectionNode(state, nodeId))
@@ -886,7 +925,7 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         },
         onBoxSelectionChange(box) {
             state.boxSelection = box;
-            render();
+            preview('viewport-box-selection-preview');
         },
     });
     const sceneViewMeasurement = createBabylonSceneViewMeasurementController({
@@ -930,26 +969,26 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         onPointerIntentMove(event) {
             if (event.state.intent === 'measurement') {
                 if (handleViewportMeasurementMove(state, event.originalEvent))
-                    render();
+                    preview('viewport-measurement-preview');
                 return;
             }
             if (event.state.intent === 'placement') {
                 if (previewArmedPlacement(state, event.originalEvent))
-                    render();
+                    preview('placement-preview');
                 return;
             }
             if (event.state.intent === 'view-plane-move') {
                 if (gizmo.updateViewPlaneMove(event.originalEvent))
-                    render();
+                    preview('view-plane-move-update');
                 return;
             }
             if (!state.sceneCameraPreviewEnabled && state.sceneViewCamera?.handlePointerIntentMove(event)) {
-                render();
+                preview('viewport-camera-pointer-move');
                 return;
             }
             if (event.state.intent === 'selection-click' || event.state.intent === 'box-select') {
                 selectionController.updatePointerSelection(event.originalEvent, event.state.intent);
-                requestEditorSceneFrame(state, 'viewport-pointer-selection-update');
+                preview('viewport-pointer-selection-update');
             }
         },
         onPointerIntentEnd(event) {
@@ -999,8 +1038,9 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
             selectionController.handleDoubleClick(event);
         },
         onWheel(event) {
-            if (!state.sceneCameraPreviewEnabled && state.sceneViewCamera?.handleWheel(event))
-                render();
+            if (!state.sceneCameraPreviewEnabled && state.sceneViewCamera?.handleWheel(event)) {
+                preview('viewport-camera-wheel');
+            }
         },
         onMovementKeysChange(event) {
             sceneViewInteraction.updateMovementKeys(event.pressedMovementKeys);
@@ -1022,17 +1062,13 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         babylon,
         scene: world.scene,
     });
-    if (document) {
-        projection.projectNodes(options.documentAdapter.getProjectionNodes(document));
-        const selection = state.session?.getState().selection ?? { selectedIds: [], activeId: null };
-        projection.syncSelection(selection);
-        gizmo.setSelection(selection);
-    }
     const shadowPreview = createBabylonEditorShadowPreviewController({
         scene: world.scene,
         projection,
         options: initialRendering.shadowPreview,
     });
+    const environmentTexture = createBabylonEnvironmentTextureController(world.scene, initialRendering.environment ?? null);
+    const postProcess = createBabylonDefaultPostProcessPipelineController(world.scene, [world.camera], initialRendering.postProcess ?? null, { name: 'editorDefaultPostProcessPipeline' });
     const resize = () => {
         engine.resize?.();
         viewportRenderCoordinator.requestFrame('resize');
@@ -1044,6 +1080,8 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
     state.grid = grid;
     state.projection = projection;
     state.shadowPreview = shadowPreview;
+    state.environmentTexture = environmentTexture;
+    state.postProcess = postProcess;
     state.gizmo = gizmo;
     state.sceneCameraPreview = sceneCameraPreview;
     state.sceneViewInput = sceneViewInput;
@@ -1057,9 +1095,14 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
     state.worldAppearanceKey = initialAppearanceKey;
     state.worldRenderingKey = initialRenderingKey;
     state.resizeHandler = resize;
+    if (document) {
+        projection.projectNodes(options.documentAdapter.getProjectionNodes(document));
+    }
+    syncCurrentSelectionToSceneArtifacts(state, 'editor-world-initial-selection');
     viewportRenderCoordinator.requestFrame('editor-world-created');
 }
 function disposeEditorWorld(state) {
+    state.activeTransformPreview = null;
     state.sceneViewInteraction?.dispose();
     state.sceneViewInteraction = null;
     if (state.resizeHandler) {
@@ -1099,6 +1142,10 @@ function disposeEditorWorld(state) {
     }
     state.shadowPreview?.dispose();
     state.shadowPreview = null;
+    state.environmentTexture?.dispose();
+    state.environmentTexture = null;
+    state.postProcess?.dispose();
+    state.postProcess = null;
     state.projection?.dispose();
     state.projection = null;
     state.grid?.dispose();
@@ -1113,6 +1160,30 @@ function disposeEditorWorld(state) {
 function requestEditorSceneFrame(state, reason) {
     state.viewportRenderCoordinator?.requestFrame(reason);
 }
+function requestEditorPreviewFrame(state, options, renderPreviewUi, reason) {
+    syncViewportCameraState(state);
+    syncViewportMeasurementState(state);
+    syncViewportSpatialOverlay(state);
+    renderPreviewUi(createUiPreviewState(state, options));
+    requestEditorSceneFrame(state, reason);
+}
+function updateActiveTransformPreview(state, event) {
+    const activeId = event.activeId ?? event.nodeId ?? event.targetIds[0] ?? null;
+    if (!activeId) {
+        state.activeTransformPreview = null;
+        return;
+    }
+    state.activeTransformPreview = {
+        targetIds: [...event.targetIds],
+        activeId,
+        transforms: {
+            [activeId]: cloneEditorTransformSnapshot(event.current),
+        },
+    };
+}
+function clearActiveTransformPreview(state) {
+    state.activeTransformPreview = null;
+}
 function scheduleProjectionShadowPreviewRebuild(state, reason) {
     if (state.projectionShadowPreviewRebuildFrame !== null) {
         window.cancelAnimationFrame(state.projectionShadowPreviewRebuildFrame);
@@ -1143,7 +1214,7 @@ async function runExclusive(state, render, action) {
         render();
     }
 }
-function selectItem(state, options, input) {
+function selectItem(state, options, input, renderUi) {
     if (state.mode !== 'editor')
         return false;
     if (!isDocumentNodeSelectable(state, options, input.id))
@@ -1158,7 +1229,7 @@ function selectItem(state, options, input) {
     });
     if (!command)
         return false;
-    return dispatchSelectionCommand(state, options, command);
+    return dispatchSelectionCommand(state, options, command, renderUi);
 }
 function createBrowserHierarchyContextActions(state, options) {
     return (options.hierarchy?.contextActions ?? []).map((registration) => ({
@@ -1295,7 +1366,7 @@ function handleContextAction(state, options, action) {
     }
     return false;
 }
-function dispatchSelectionCommand(state, options, command) {
+function dispatchSelectionCommand(state, options, command, renderUi) {
     if (state.mode !== 'editor')
         return false;
     cancelActiveOperation(state);
@@ -1305,8 +1376,19 @@ function dispatchSelectionCommand(state, options, command) {
     const result = session.dispatch(command);
     const sanitized = sanitizeSelection(state, options, result.workingDocument, result.selection);
     const selection = sanitized ?? result.selection;
-    syncSelectionToProjection(state, selection);
-    return result.selectionChanged || !!sanitized;
+    const changed = result.selectionChanged || !!sanitized;
+    if (!changed)
+        return false;
+    if (renderUi) {
+        commitEditorStateChange(state, renderUi, 'selection-command', () => { }, {
+            syncSelectionArtifacts: selection,
+        });
+    }
+    else {
+        state.editorStateRevision += 1;
+        syncSelectionToProjection(state, selection, 'selection-command', state.editorStateRevision);
+    }
+    return true;
 }
 function renameSceneGraphNode(state, options, intent) {
     const document = state.session?.getState().workingDocument;
@@ -1650,14 +1732,60 @@ function sanitizeSelection(state, options, document, selection) {
     });
     return result?.selection ?? { selectedIds, activeId };
 }
-function syncSelectionToProjection(state, selection) {
+function commitEditorStateChange(state, renderUi, reason, mutate, options = {}) {
+    const beforeRevision = state.editorStateRevision;
+    mutate();
+    const revision = beforeRevision + 1;
+    state.editorStateRevision = revision;
+    renderUi();
+    if (options.syncSelectionArtifacts) {
+        const selection = typeof options.syncSelectionArtifacts === 'boolean'
+            ? state.session?.getState().selection ?? { selectedIds: [], activeId: null }
+            : options.syncSelectionArtifacts;
+        syncSelectionToProjection(state, selection, reason, revision);
+    }
+    else if (options.syncTransformOperationArtifacts) {
+        syncTransformOperationSettingsToSceneArtifacts(state, reason, revision);
+    }
+    else if (options.syncTransformArtifacts) {
+        syncTransformGizmoToSceneArtifacts(state, reason, revision);
+    }
+    return revision;
+}
+function syncSelectionToProjection(state, selection, reason = 'projection-selection', revision = state.editorStateRevision) {
+    if (!beginSceneArtifactSync(state, reason, revision))
+        return;
     state.projection?.syncSelection(selection);
     state.gizmo?.setSelection(selection);
-    state.gizmo?.refreshSelection();
-    requestEditorSceneFrame(state, 'projection-selection');
+    syncTransformGizmoToSceneArtifacts(state, reason, revision, false);
+}
+function syncCurrentSelectionToSceneArtifacts(state, reason = 'projection-selection-current', revision = state.editorStateRevision) {
+    syncSelectionToProjection(state, state.session?.getState().selection ?? { selectedIds: [], activeId: null }, reason, revision);
+}
+function syncTransformGizmoToSceneArtifacts(state, reason, revision = state.editorStateRevision, beginSync = true) {
+    if (beginSync && !beginSceneArtifactSync(state, reason, revision))
+        return;
+    const gizmo = state.gizmo;
+    if (gizmo) {
+        gizmo.setTool(state.transformTool);
+        gizmo.setSpace(state.transformSpace);
+        gizmo.setConstraint(state.transformConstraint);
+        gizmo.refreshSelection();
+    }
+    requestEditorArtifactRevealFrame(state, reason);
 }
-function syncCurrentSelectionToSceneArtifacts(state) {
-    syncSelectionToProjection(state, state.session?.getState().selection ?? { selectedIds: [], activeId: null });
+function syncTransformOperationSettingsToSceneArtifacts(state, reason, revision = state.editorStateRevision) {
+    if (!beginSceneArtifactSync(state, reason, revision))
+        return;
+    state.gizmo?.setOperationSettings(state.transformOperationSettings);
+    requestEditorSceneFrame(state, reason);
+}
+function beginSceneArtifactSync(state, reason, revision) {
+    if (revision < state.sceneArtifactRevision) {
+        return false;
+    }
+    state.sceneArtifactRevision = revision;
+    return true;
 }
 function invalidateEditorScene(state, reason, options) {
     if (options && state.sceneCameraPreviewEnabled) {
@@ -1665,6 +1793,13 @@ function invalidateEditorScene(state, reason, options) {
     }
     state.viewportRenderCoordinator?.invalidateScene(reason);
 }
+function requestEditorArtifactRevealFrame(state, reason) {
+    const coordinator = state.viewportRenderCoordinator;
+    if (!coordinator)
+        return;
+    coordinator.invalidateScene(reason);
+    coordinator.requestRevealFrame(`${reason}-artifact-reveal`);
+}
 function syncEditorWorldAppearanceFromDocument(state, options, document, reason) {
     const appearance = resolveLocalEditorWorldAppearance(options, document);
     const key = serializeLocalEditorWorldAppearance(appearance);
@@ -1688,6 +1823,8 @@ function syncEditorWorldRenderingFromDocument(state, options, document, reason,
     }
     state.worldRenderingKey = key;
     state.shadowPreview?.setOptions(rendering.shadowPreview);
+    state.environmentTexture?.setProfile(rendering.environment);
+    state.postProcess?.setProfile(rendering.postProcess);
     requestEditorSceneFrame(state, reason);
 }
 function resolveLocalEditorWorldAppearance(options, document) {
@@ -1705,7 +1842,9 @@ function resolveLocalEditorWorldRendering(options, document) {
         ? options.documentAdapter.getWorldRendering?.(document) ?? null
         : null;
     return {
+        environment: documentRendering?.environment ?? null,
         shadowPreview: documentRendering?.shadowPreview ?? null,
+        postProcess: documentRendering?.postProcess ?? null,
     };
 }
 function hasEditorWorldAppearanceSky(appearance) {
@@ -1720,7 +1859,9 @@ function serializeLocalEditorWorldAppearance(appearance) {
 }
 function serializeLocalEditorWorldRendering(rendering) {
     return JSON.stringify({
+        environment: rendering.environment ?? null,
         shadowPreview: rendering.shadowPreview ?? null,
+        postProcess: rendering.postProcess ?? null,
     });
 }
 function executeTransformAction(state, options, action) {
@@ -1779,8 +1920,7 @@ function executeTransformAction(state, options, action) {
         state.status = `Transform action unchanged: ${action}`;
         return true;
     }
-    const changedIds = patch.changedIds ?? changedTargets.map(target => target.id);
-    syncProjectionForChangedIds(state, options, result.workingDocument, changedIds);
+    syncProjectionForChangedIds(state, options, result.workingDocument, changedTargets.map(target => target.id));
     state.summary = summarizeDocument(options, result.workingDocument, state.session.getSource());
     state.status = patch.label ?? formatTransformActionStatus(action, changedTargets.length);
     return true;
@@ -1828,11 +1968,14 @@ function selectBrowserAsset(state, assetId) {
     return true;
 }
 function handleBrowserAssetAction(state, options, input) {
-    state.selectedAssetId = input.browserAssetId;
+    if (input.browserAssetId)
+        state.selectedAssetId = input.browserAssetId;
     if (input.actionId === 'asset.add-to-scene') {
-        return addAssetToDocument(state, options, input.assetId).ok;
+        return input.assetId ? addAssetToDocument(state, options, input.assetId).ok : false;
     }
     if (input.actionId === 'asset.place') {
+        if (!input.assetId)
+            return false;
         if (state.transformOperationSettings.placementMode === 'off') {
             state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, {
                 placementMode: 'ground',
@@ -1854,7 +1997,7 @@ function patchBrowserAssetAction(state, options, input) {
     const document = session?.getState().workingDocument ?? null;
     if (!session || !document || !options.documentAdapter.createAssetActionPatch)
         return false;
-    const asset = findAssetByResolvedId(state, options, input.assetId);
+    const asset = input.assetId ? findAssetByResolvedId(state, options, input.assetId) : null;
     const patch = options.documentAdapter.createAssetActionPatch({
         ...input,
         document,
@@ -1878,8 +2021,23 @@ function patchBrowserAssetAction(state, options, input) {
         reprojectProjectionForChangedIds(state, options, result.workingDocument, patch.reprojectIds);
     else if (patch.changedIds)
         syncProjectionForChangedIds(state, options, result.workingDocument, patch.changedIds);
+    if (input.actionId === 'asset.delete-material' && input.browserAssetId && state.selectedAssetId === input.browserAssetId) {
+        state.selectedAssetId = null;
+    }
+    selectCreatedBrowserAssetFromPatch(state, options, patch.createdId ?? null, input);
     return true;
 }
+function selectCreatedBrowserAssetFromPatch(state, options, createdId, input) {
+    if (!createdId)
+        return;
+    const browserAssetId = resolveBrowserAssetItemId(state, options, createdId)
+        ?? resolveBrowserAssetItemId(state, options, `material:${createdId}`);
+    if (browserAssetId)
+        state.selectedAssetId = browserAssetId;
+    else if (input.actionId === 'asset.create-material' || input.actionId === 'asset.duplicate-material') {
+        state.selectedAssetId = `material:${createdId}`;
+    }
+}
 function armAssetPlacement(state, options, assetId) {
     if (state.mode !== 'editor')
         return false;
@@ -2044,6 +2202,7 @@ function patchSerializedProperty(state, options, input) {
         return false;
     }
     const payload = transaction.payload;
+    const shouldReprojectInspectorEdit = shouldReprojectEditorInspectorEditPath(payload.path);
     if (targetIds.length > 1) {
         const patch = options.documentAdapter.createSerializedMultiPropertyPatch?.({
             document,
@@ -2068,11 +2227,14 @@ function patchSerializedProperty(state, options, input) {
         if (!result.documentChanged)
             return false;
         const changedIds = patch.changedIds ?? targetIds;
+        const projectionSyncIds = isSerializedTransformPath(payload.path) ? targetIds : changedIds;
         const workingDocument = result.workingDocument;
         if (patch.reprojectIds?.length)
             reprojectProjectionForChangedIds(state, options, workingDocument, patch.reprojectIds);
+        else if (shouldReprojectInspectorEdit)
+            reprojectProjectionForChangedIds(state, options, workingDocument, changedIds);
         else
-            syncProjectionForChangedIds(state, options, workingDocument, changedIds);
+            syncProjectionForChangedIds(state, options, workingDocument, projectionSyncIds);
         state.summary = summarizeDocument(options, workingDocument, state.session.getSource());
         state.status = patch.label ?? `Patch ${payload.path} on ${targetIds.length} objects`;
         return true;
@@ -2098,6 +2260,11 @@ function patchSerializedProperty(state, options, input) {
     });
     if (patch.reprojectIds?.length)
         reprojectProjectionForChangedIds(state, options, result.workingDocument, patch.reprojectIds);
+    else if (shouldReprojectInspectorEdit) {
+        reprojectProjectionForChangedIds(state, options, result.workingDocument, patch.changedIds ?? [patch.changedId ?? payload.targetId]);
+    }
+    else if (isSerializedTransformPath(payload.path))
+        syncProjectionForChangedIds(state, options, result.workingDocument, [patch.changedId ?? payload.targetId]);
     else if (patch.changedIds)
         syncProjectionForChangedIds(state, options, result.workingDocument, patch.changedIds);
     else
@@ -2106,6 +2273,18 @@ function patchSerializedProperty(state, options, input) {
     state.status = patch.label ?? `Patched ${payload.path}`;
     return true;
 }
+function patchHierarchyItemEnabled(state, options, input) {
+    return patchSerializedProperty(state, options, {
+        targetId: input.id,
+        path: 'enabled',
+        value: input.enabled,
+        control: 'boolean',
+        valueType: 'boolean',
+        commitMode: 'immediate',
+        persistence: 'document',
+        source: 'toggle',
+    });
+}
 async function applyRenderingPropertyChange(state, options, input) {
     if (state.mode !== 'editor')
         return false;
@@ -2211,7 +2390,10 @@ function createInspectorEditTransaction(state, options, document, input, targetI
     });
     if (!result.ok)
         return { ok: false, message: result.message };
-    return { ok: true, payload: result.value };
+    return {
+        ok: true,
+        payload: createPlayableBabylonOutlineInspectorPatchPayload(state, options, document, result.value),
+    };
 }
 function findInspectorPropertyForEdit(state, options, document, input, targetIds) {
     const inspector = createInspectorObjectForEdit(state, options, document, input, targetIds);
@@ -2222,20 +2404,17 @@ function findInspectorPropertyForEdit(state, options, document, input, targetIds
 function createInspectorObjectForEdit(state, options, document, input, targetIds) {
     if (targetIds.length > 1) {
         const activeId = state.session?.getState().selection.activeId ?? input.targetId ?? null;
-        const inspector = options.documentAdapter.getInspectorMultiObject?.(document, targetIds, activeId) ?? null;
+        const inspector = createInspectorMultiObjectBase(state, options, document, targetIds, activeId);
         if (inspector)
-            return withInspectorComponentSections(state, options, document, inspector);
-        const serializedMultiObject = options.documentAdapter.getSerializedMultiObject?.(document, targetIds, activeId) ?? null;
-        return serializedMultiObject
-            ? withInspectorComponentSections(state, options, document, serializedMultiObjectToInspectorObject(serializedMultiObject, document))
-            : null;
+            return withDefaultEditorInspectorSections(state, options, document, inspector);
+        return null;
     }
     const inspector = options.documentAdapter.getInspectorObject?.(document, input.targetId) ?? null;
     if (inspector)
-        return withInspectorComponentSections(state, options, document, inspector);
+        return withDefaultEditorInspectorSections(state, options, document, inspector);
     const serializedObject = options.documentAdapter.getSerializedObject(document, input.targetId);
     return serializedObject
-        ? withInspectorComponentSections(state, options, document, serializedObjectToInspectorObject(serializedObject, document))
+        ? withDefaultEditorInspectorSections(state, options, document, serializedObjectToInspectorObject(serializedObject, document))
         : null;
 }
 function findInspectorPropertyByPath(inspector, path) {
@@ -2246,6 +2425,40 @@ function findInspectorPropertyByPath(inspector, path) {
     }
     return null;
 }
+function createPlayableBabylonOutlineInspectorPatchPayload(_state, options, document, payload) {
+    if (!isPlayableBabylonOutlineInspectorPatchPath(payload.path) || (payload.targetIds?.length ?? 1) > 1) {
+        return payload;
+    }
+    const projectionNode = options.documentAdapter.getProjectionNode(document, payload.targetId);
+    if (!projectionNode)
+        return payload;
+    const seedValue = createPlayableBabylonOutlineInspectorSeedPatchValue({
+        existingOutline: readPlayableBabylonProjectionOutline(projectionNode.outline),
+        path: payload.path,
+        value: payload.value,
+    });
+    if (!seedValue)
+        return payload;
+    return {
+        ...payload,
+        path: 'overrides.outline',
+        value: seedValue,
+        control: 'object',
+        valueType: 'object',
+        commitMode: 'immediate',
+    };
+}
+function shouldReprojectEditorInspectorEditPath(path) {
+    return isPlayableBabylonOutlineInspectorPatchPath(path);
+}
+function isSerializedTransformPath(path) {
+    return path === 'transform.position'
+        || path === 'transform.rotation'
+        || path === 'transform.scale'
+        || path.startsWith('transform.position.')
+        || path.startsWith('transform.rotation.')
+        || path.startsWith('transform.scale.');
+}
 function beginDuplicateDrag(state, options, input) {
     if (state.mode !== 'editor' || !state.session)
         return null;
@@ -2351,15 +2564,19 @@ function commitGizmoTransform(state, options, event) {
             mergeWithPrevious: event.targetIds.some(id => state.duplicateDrag?.createdIds.includes(id)) === true,
         });
         syncProjectionForDispatchResult(state, options, result);
-        syncProjectionForChangedIds(state, options, result.workingDocument, patch.changedIds ?? event.targetIds);
+        if (patch.reprojectIds?.length)
+            reprojectProjectionForChangedIds(state, options, result.workingDocument, patch.reprojectIds);
+        else
+            syncProjectionForChangedIds(state, options, result.workingDocument, event.targetIds);
         state.summary = summarizeDocument(options, result.workingDocument, state.session.getSource());
         state.status = patch.label ?? `${event.tool} ${event.targetIds.length} objects`;
         state.duplicateDrag = null;
         return result.documentChanged;
     }
+    const targetId = event.nodeId;
     const patch = options.documentAdapter.createTransformPatch?.({
         document,
-        targetId: event.nodeId,
+        targetId,
         tool: event.tool,
         space: event.space,
         constraint: event.constraint,
@@ -2368,25 +2585,25 @@ function commitGizmoTransform(state, options, event) {
     });
     if (!patch) {
         if (!cancelDuplicateDrag(state, options)) {
-            state.projection?.setNodeTransformPreview(event.nodeId, event.before);
-            state.status = `Ignored ${event.tool} ${event.nodeId}`;
+            state.projection?.setNodeTransformPreview(targetId, event.before);
+            state.status = `Ignored ${event.tool} ${targetId}`;
         }
         return false;
     }
     const result = state.session.dispatch({
         type: 'document.patch',
-        label: patch.label ?? `${event.tool} ${event.nodeId}`,
+        label: patch.label ?? `${event.tool} ${targetId}`,
         patch: patch.patch,
-        targetId: event.nodeId,
+        targetId,
     }, {
-        mergeWithPrevious: state.duplicateDrag?.createdIds.includes(event.nodeId) === true,
+        mergeWithPrevious: state.duplicateDrag?.createdIds.includes(targetId) === true,
     });
-    if (patch.changedIds)
-        syncProjectionForChangedIds(state, options, result.workingDocument, patch.changedIds);
+    if (patch.reprojectIds?.length)
+        reprojectProjectionForChangedIds(state, options, result.workingDocument, patch.reprojectIds);
     else
-        syncProjectionForDispatchResult(state, options, result, patch.changedId ?? event.nodeId);
+        syncProjectionForChangedIds(state, options, result.workingDocument, [patch.changedId ?? targetId]);
     state.summary = summarizeDocument(options, result.workingDocument, state.session.getSource());
-    state.status = patch.label ?? `${event.tool} ${event.nodeId}`;
+    state.status = patch.label ?? `${event.tool} ${targetId}`;
     state.duplicateDrag = null;
     return result.documentChanged;
 }
@@ -2653,6 +2870,60 @@ function hasSceneCameraPreviewRig(state, options) {
     const document = state.session?.getState().workingDocument ?? null;
     return !!document && !!options.documentAdapter.getSceneCameraPreviewRig?.(document);
 }
+function applyActiveTransformPreviewToInspectorObject(state, inspectorObject) {
+    const preview = state.activeTransformPreview;
+    if (!preview || !inspectorObject || inspectorObject.targetIds.length !== 1)
+        return inspectorObject;
+    const targetId = inspectorObject.activeId ?? inspectorObject.targetIds[0] ?? null;
+    if (!targetId || targetId !== preview.activeId)
+        return inspectorObject;
+    const transform = preview.transforms[targetId];
+    if (!transform)
+        return inspectorObject;
+    let changed = false;
+    const sections = inspectorObject.sections.map(section => {
+        let sectionChanged = false;
+        const properties = section.properties.map(property => {
+            const previewValue = readActiveTransformPreviewPropertyValue(transform, property.path);
+            if (previewValue === undefined)
+                return property;
+            sectionChanged = true;
+            return {
+                ...property,
+                value: previewValue,
+                mixed: false,
+            };
+        });
+        if (!sectionChanged)
+            return section;
+        changed = true;
+        return { ...section, properties };
+    });
+    return changed ? { ...inspectorObject, sections } : inspectorObject;
+}
+function readActiveTransformPreviewPropertyValue(transform, path) {
+    const vectorMatch = path.match(/^transform\.(position|rotation|scale)$/);
+    if (vectorMatch) {
+        const group = vectorMatch[1];
+        return group === 'rotation'
+            ? {
+                x: radiansToInspectorDegrees(transform.rotation.x),
+                y: radiansToInspectorDegrees(transform.rotation.y),
+                z: radiansToInspectorDegrees(transform.rotation.z),
+            }
+            : { ...transform[group] };
+    }
+    const axisMatch = path.match(/^transform\.(position|rotation|scale)\.(x|y|z)$/);
+    if (!axisMatch)
+        return undefined;
+    const group = axisMatch[1];
+    const axis = axisMatch[2];
+    const value = transform[group][axis];
+    return group === 'rotation' ? radiansToInspectorDegrees(value) : value;
+}
+function radiansToInspectorDegrees(value) {
+    return (value * 180) / Math.PI;
+}
 function createUiState(state, options) {
     const sessionState = state.session?.getState();
     const document = sessionState?.workingDocument ?? null;
@@ -2668,7 +2939,7 @@ function createUiState(state, options) {
         ? options.documentAdapter.getInspectorObject?.(document, activeId) ?? (serializedObject ? serializedObjectToInspectorObject(serializedObject, document) : null)
         : null;
     const inspectorMultiObjectBase = document && selectedIds.length > 1
-        ? options.documentAdapter.getInspectorMultiObject?.(document, selectedIds, activeId) ?? (serializedMultiObject ? serializedMultiObjectToInspectorObject(serializedMultiObject, document) : null)
+        ? createInspectorMultiObjectBase(state, options, document, selectedIds, activeId, serializedMultiObject)
         : null;
     const inspectorObject = document && inspectorObjectBase
         ? withRuntimeInspectorSections(state, options, document, inspectorObjectBase)
@@ -2676,6 +2947,8 @@ function createUiState(state, options) {
     const inspectorMultiObject = document && inspectorMultiObjectBase
         ? withRuntimeInspectorSections(state, options, document, inspectorMultiObjectBase)
         : inspectorMultiObjectBase;
+    const previewInspectorObject = applyActiveTransformPreviewToInspectorObject(state, inspectorObject);
+    const previewInspectorMultiObject = applyActiveTransformPreviewToInspectorObject(state, inspectorMultiObject);
     const documentAssetItems = document
         ? options.documentAdapter.getBrowserAssetItems?.(document) ?? []
         : [];
@@ -2703,17 +2976,17 @@ function createUiState(state, options) {
         },
         serializedObject,
         serializedMultiObject,
-        inspectorObject,
-        inspectorMultiObject,
+        inspectorObject: previewInspectorObject,
+        inspectorMultiObject: previewInspectorMultiObject,
         renderingPanel: document ? options.documentAdapter.getRenderingPanelState?.(document) ?? null : null,
         boxSelection: state.boxSelection,
         coordinateAxes: options.world?.coordinateAxes === false
             ? null
             : createSceneViewCoordinateAxesState(state),
         transformTool: {
-            activeTool: state.gizmo?.getState().tool ?? state.transformTool,
-            activeSpace: state.gizmo?.getState().space ?? state.transformSpace,
-            activeConstraint: state.gizmo?.getState().constraint ?? state.transformConstraint,
+            activeTool: state.transformTool,
+            activeSpace: state.transformSpace,
+            activeConstraint: state.transformConstraint,
             dragPhase: state.gizmo?.getState().dragPhase ?? 'idle',
             draggingNodeId: state.gizmo?.getState().draggingNodeId ?? null,
         },
@@ -2749,6 +3022,53 @@ function createUiState(state, options) {
             : null,
     };
 }
+function createUiPreviewState(state, options) {
+    const selection = state.session?.getState().selection;
+    const document = state.session?.getState().workingDocument ?? null;
+    const selectedIds = selection?.selectedIds ?? [];
+    const activeId = selection?.activeId ?? null;
+    const shouldPreviewInspector = !!state.activeTransformPreview && document && activeId && selectedIds.length === 1;
+    const inspectorObjectBase = shouldPreviewInspector
+        ? options.documentAdapter.getInspectorObject?.(document, activeId)
+            ?? (() => {
+                const serializedObject = options.documentAdapter.getSerializedObject(document, activeId);
+                return serializedObject ? serializedObjectToInspectorObject(serializedObject, document) : null;
+            })()
+        : null;
+    const inspectorObject = shouldPreviewInspector && document && inspectorObjectBase
+        ? applyActiveTransformPreviewToInspectorObject(state, withRuntimeInspectorSections(state, options, document, inspectorObjectBase))
+        : null;
+    return {
+        status: state.status,
+        statusTone: state.statusToneStatus === state.status ? state.statusTone : 'default',
+        statusDetails: state.statusToneStatus === state.status ? state.statusDetails : '',
+        ...(inspectorObject ? { inspectorObject } : {}),
+        boxSelection: state.boxSelection,
+        coordinateAxes: options.world?.coordinateAxes === false
+            ? null
+            : createSceneViewCoordinateAxesState(state),
+        transformTool: {
+            activeTool: state.transformTool,
+            activeSpace: state.transformSpace,
+            activeConstraint: state.transformConstraint,
+            dragPhase: state.gizmo?.getState().dragPhase ?? 'idle',
+            draggingNodeId: state.gizmo?.getState().draggingNodeId ?? null,
+        },
+        transformOperations: {
+            settings: cloneTransformOperationSettings(state.transformOperationSettings),
+            selectedCount: selectedIds.length,
+            activeId,
+            canAlign: selectedIds.length >= 2 && activeId != null,
+            canDistribute: selectedIds.length >= 3,
+        },
+        viewportTools: cloneEditorViewportToolState(state.viewportTools),
+        viewportMeasurement: cloneViewportMeasurement(state.viewportMeasurement),
+        viewportSpatialOverlay: cloneEditorViewportSpatialOverlayState(state.viewportSpatialOverlay),
+        sceneFrameStats: state.sceneFrameStats
+            ? { ...state.sceneFrameStats, activeReasons: [...state.sceneFrameStats.activeReasons] }
+            : null,
+    };
+}
 function createSceneViewCoordinateAxesState(state) {
     if (state.mode !== 'editor')
         return null;
@@ -2842,8 +3162,141 @@ function clampNumber(value, min, max) {
         return min;
     return Math.min(max, Math.max(min, value));
 }
+function createInspectorMultiObjectBase(state, options, document, selectedIds, activeId, serializedMultiObject) {
+    const targetIds = [...selectedIds];
+    if (targetIds.length <= 1)
+        return null;
+    const adapterMultiObject = options.documentAdapter.getInspectorMultiObject?.(document, targetIds, activeId) ?? null;
+    const serializedMulti = serializedMultiObject !== undefined
+        ? serializedMultiObject
+        : options.documentAdapter.getSerializedMultiObject?.(document, targetIds, activeId) ?? null;
+    const serializedInspector = serializedMulti ? serializedMultiObjectToInspectorObject(serializedMulti, document) : null;
+    const baseInspector = adapterMultiObject ?? serializedInspector;
+    const aggregatedInspector = createAggregatedInspectorMultiObjectBase(state, options, document, targetIds, activeId);
+    if (!baseInspector)
+        return aggregatedInspector;
+    if (!aggregatedInspector)
+        return baseInspector;
+    return {
+        ...baseInspector,
+        targetIds,
+        activeId,
+        label: baseInspector.label ?? aggregatedInspector.label,
+        document,
+        selection: {
+            ...baseInspector.selection,
+            targetIds,
+            activeId,
+            document,
+        },
+        sections: mergeInspectorSections(baseInspector.sections, aggregatedInspector.sections, {
+            propertyConflict: 'ignore',
+        }),
+    };
+}
+function createAggregatedInspectorMultiObjectBase(_state, options, document, selectedIds, activeId) {
+    const inspectorObjects = selectedIds.map((id) => createSingleInspectorObjectBase(options, document, id));
+    if (inspectorObjects.some(object => !object))
+        return null;
+    const aggregatedInspector = aggregateInspectorObjectsToMultiObject({
+        targetIds: selectedIds,
+        activeId,
+        inspectorObjects: inspectorObjects,
+        label: `${selectedIds.length} objects`,
+        document,
+    });
+    return options.documentAdapter.createSerializedMultiPropertyPatch
+        ? applyAggregatedBatchInspectorCapabilityGate(options, document, aggregatedInspector)
+        : disableAggregatedBatchInspectorObject(aggregatedInspector);
+}
+function createSingleInspectorObjectBase(options, document, targetId) {
+    const inspectorObject = options.documentAdapter.getInspectorObject?.(document, targetId) ?? null;
+    if (inspectorObject)
+        return inspectorObject;
+    const serializedObject = options.documentAdapter.getSerializedObject(document, targetId);
+    return serializedObject ? serializedObjectToInspectorObject(serializedObject, document) : null;
+}
+function disableAggregatedBatchInspectorObject(inspectorObject) {
+    if (!inspectorObject)
+        return null;
+    const coverageLabel = `${inspectorObject.targetIds.length} selected`;
+    return {
+        ...inspectorObject,
+        sections: inspectorObject.sections.map(section => ({
+            ...section,
+            effect: 'unsupported',
+            disabledReason: section.disabledReason ?? BATCH_EDIT_REQUIRES_MULTI_PATCH_REASON,
+            properties: section.properties.map(property => ({
+                ...property,
+                controlOptions: {
+                    ...property.controlOptions,
+                    coverageLabel: readInspectorControlOptionString(property, 'coverageLabel') ?? coverageLabel,
+                    actionDisabledReason: readInspectorControlOptionString(property, 'actionDisabledReason')
+                        ?? BATCH_EDIT_REQUIRES_MULTI_PATCH_REASON,
+                },
+                readOnly: true,
+                effect: 'unsupported',
+                disabledReason: property.disabledReason ?? BATCH_EDIT_REQUIRES_MULTI_PATCH_REASON,
+            })),
+        })),
+    };
+}
+function applyAggregatedBatchInspectorCapabilityGate(options, document, inspectorObject) {
+    if (!inspectorObject || !options.documentAdapter.canCreateSerializedMultiPropertyPatch)
+        return inspectorObject;
+    const coverageLabel = `${inspectorObject.targetIds.length} selected`;
+    return {
+        ...inspectorObject,
+        sections: inspectorObject.sections.map((section) => {
+            const properties = section.properties.map((property) => {
+                const supported = options.documentAdapter.canCreateSerializedMultiPropertyPatch?.({
+                    document,
+                    targetIds: inspectorObject.targetIds,
+                    activeId: inspectorObject.activeId,
+                    path: property.path,
+                    control: property.control,
+                    valueType: property.valueType,
+                    commitMode: property.commitMode,
+                    persistence: property.persistence,
+                }) === true;
+                return supported
+                    ? property
+                    : disableAggregatedBatchInspectorProperty(property, coverageLabel);
+            });
+            const disabledCount = properties.filter(property => property.effect === 'unsupported' && property.readOnly).length;
+            if (disabledCount === 0)
+                return { ...section, properties };
+            return {
+                ...section,
+                effect: disabledCount === properties.length ? 'unsupported' : section.effect,
+                disabledReason: disabledCount === properties.length
+                    ? section.disabledReason ?? BATCH_EDIT_REQUIRES_MULTI_PATCH_REASON
+                    : section.disabledReason,
+                properties,
+            };
+        }),
+    };
+}
+function disableAggregatedBatchInspectorProperty(property, coverageLabel) {
+    return {
+        ...property,
+        controlOptions: {
+            ...property.controlOptions,
+            coverageLabel: readInspectorControlOptionString(property, 'coverageLabel') ?? coverageLabel,
+            actionDisabledReason: readInspectorControlOptionString(property, 'actionDisabledReason')
+                ?? BATCH_EDIT_REQUIRES_MULTI_PATCH_REASON,
+        },
+        readOnly: true,
+        effect: 'unsupported',
+        disabledReason: property.disabledReason ?? BATCH_EDIT_REQUIRES_MULTI_PATCH_REASON,
+    };
+}
+function readInspectorControlOptionString(property, key) {
+    const value = property.controlOptions?.[key];
+    return typeof value === 'string' && value.trim() ? value : undefined;
+}
 function withRuntimeInspectorSections(state, options, document, inspectorObject) {
-    const baseInspectorObject = withInspectorComponentSections(state, options, document, inspectorObject);
+    const baseInspectorObject = withDefaultEditorInspectorSections(state, options, document, inspectorObject);
     const activeId = inspectorObject.activeId;
     const projectionNode = activeId ? options.documentAdapter.getProjectionNode(document, activeId) : null;
     const projectedRoot = activeId ? state.projection?.getProjectedNode(activeId)?.root ?? null : null;
@@ -2867,6 +3320,65 @@ function withRuntimeInspectorSections(state, options, document, inspectorObject)
         sections,
     };
 }
+function withDefaultEditorInspectorSections(state, options, document, inspectorObject) {
+    const componentInspectorObject = withInspectorComponentSections(state, options, document, inspectorObject);
+    return withPlayableBabylonOutlineInspectorSection(state, options, document, componentInspectorObject);
+}
+function withPlayableBabylonOutlineInspectorSection(_state, options, document, inspectorObject) {
+    if (inspectorObject.targetIds.length !== 1 || !inspectorObject.activeId)
+        return inspectorObject;
+    const projectionNode = options.documentAdapter.getProjectionNode(document, inspectorObject.activeId);
+    if (!projectionNode)
+        return inspectorObject;
+    const outlineSection = createPlayableBabylonOutlineInspectorSection({
+        document,
+        nodeKind: inferPlayableBabylonOutlineNodeKind(projectionNode),
+        outline: readPlayableBabylonProjectionOutline(projectionNode.outline),
+        language: readPlayableBabylonInspectorLanguage(inspectorObject),
+    });
+    const sections = [
+        ...inspectorObject.sections.filter(section => section.id !== outlineSection.id),
+        outlineSection,
+    ].sort(compareInspectorSections);
+    return {
+        ...inspectorObject,
+        sections,
+    };
+}
+function inferPlayableBabylonOutlineNodeKind(projectionNode) {
+    if (projectionNode.primitive)
+        return 'primitive';
+    if (projectionNode.asset)
+        return 'instance';
+    return 'transform';
+}
+function readPlayableBabylonProjectionOutline(value) {
+    if (!isObjectRecord(value))
+        return null;
+    const outline = {};
+    if (value.strategy === 'babylon-default')
+        outline.strategy = value.strategy;
+    if (typeof value.renderOutline === 'boolean')
+        outline.renderOutline = value.renderOutline;
+    if (typeof value.outlineWidth === 'number' && Number.isFinite(value.outlineWidth)) {
+        outline.outlineWidth = value.outlineWidth;
+    }
+    const color = value.outlineColor;
+    if (isObjectRecord(color)
+        && typeof color.r === 'number'
+        && typeof color.g === 'number'
+        && typeof color.b === 'number'
+        && Number.isFinite(color.r)
+        && Number.isFinite(color.g)
+        && Number.isFinite(color.b)) {
+        outline.outlineColor = { r: color.r, g: color.g, b: color.b };
+    }
+    return Object.keys(outline).length > 0 ? outline : {};
+}
+function readPlayableBabylonInspectorLanguage(inspectorObject) {
+    const languageProperty = findInspectorPropertyByPath(inspectorObject, 'metadata.artistMaterialInspectorLanguage');
+    return languageProperty?.value === 'en' ? 'en' : 'zh';
+}
 function withInspectorComponentSections(state, options, document, inspectorObject) {
     const context = createHarnessInspectorSelectionContext(state, document, inspectorObject);
     return mergeLocalEditorHarnessInspectorComponentSections({
@@ -3048,6 +3560,17 @@ function findAssetByResolvedId(state, options, assetId) {
     }
     return selected?.asset ?? null;
 }
+function resolveBrowserAssetItemId(state, options, assetId) {
+    let selected = null;
+    for (const asset of state.assets) {
+        const item = toBrowserAssetItem(options, asset);
+        if (item.id !== assetId && item.assetId !== assetId && resolveAssetId(options, asset) !== assetId)
+            continue;
+        if (!selected || shouldReplaceBrowserAssetItem(selected, item))
+            selected = item;
+    }
+    return selected?.id ?? null;
+}
 function toBrowserAssetItem(options, asset) {
     return options.worldAdapter.toBrowserAssetItem?.(asset)
         ?? {