@fps-games/editor 0.1.2-beta.2 → 0.1.3-beta.2

package/dist/local-editor-harness.js

@@ -1,6 +1,6 @@
 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 { createBabylonEditorProjection, createBabylonEditorWorld, createBabylonProjectionSelectionController, createBabylonMainCameraPreviewController, createBabylonSceneViewCameraController, createBabylonSceneViewInputController, createBabylonSceneViewMeasurementController, createBabylonSceneViewSpatialOverlayController, createBabylonTransformGizmoController, focusEditorViewportSelection, } from '@fps-games/editor-babylon';
+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';
@@ -13,21 +13,28 @@ export function createLocalEditorHarness(options) {
         source: null,
         assets: [],
         assetFilter: '',
+        selectedAssetId: null,
         babylon: null,
         engine: null,
         world: null,
         grid: null,
         gridVisible: true,
         projection: null,
+        shadowPreview: null,
         gizmo: null,
-        mainCameraPreview: null,
-        mainCameraPreviewEnabled: false,
+        sceneCameraPreview: null,
+        sceneCameraPreviewEnabled: false,
         sceneViewInput: null,
         sceneViewCamera: null,
         sceneViewInteraction: null,
         sceneViewMeasurement: null,
         sceneViewSpatialOverlay: null,
         selectionController: null,
+        sceneRenderScheduler: null,
+        viewportRenderCoordinator: null,
+        sceneFrameStats: null,
+        worldAppearanceKey: '',
+        worldRenderingKey: '',
         boxSelection: null,
         transformTool: 'select',
         transformSpace: 'world',
@@ -38,9 +45,6 @@ export function createLocalEditorHarness(options) {
         viewportSpatialOverlay: createEmptyEditorViewportSpatialOverlayState(),
         duplicateDrag: null,
         armedPlacement: null,
-        sceneRenderScheduler: null,
-        viewportRenderCoordinator: null,
-        sceneFrameStats: null,
         resizeHandler: null,
         status: 'Game running',
         statusTone: 'default',
@@ -85,6 +89,14 @@ export function createLocalEditorHarness(options) {
                 if (createAssetFromBrowserIntent(state, options, assetId))
                     harness.render();
             },
+            onSelectAsset: (assetId) => {
+                if (selectBrowserAsset(state, assetId))
+                    harness.render();
+            },
+            onAssetAction: (input) => {
+                if (handleBrowserAssetAction(state, options, input))
+                    harness.render();
+            },
             onSelectHierarchyItem: (input) => {
                 if (selectItem(state, options, input))
                     harness.render();
@@ -146,25 +158,43 @@ export function createLocalEditorHarness(options) {
                 if (patched || state.status !== previousStatus)
                     harness.render();
             },
+            onRenderingPropertyChange: options.documentAdapter.onRenderingPropertyChange
+                ? (input) => {
+                    void applyRenderingPropertyChange(state, options, input)
+                        .then((changed) => {
+                        if (changed)
+                            harness.render();
+                    });
+                }
+                : undefined,
+            onRenderingAction: options.documentAdapter.onRenderingAction
+                ? (input) => {
+                    void applyRenderingAction(state, options, input)
+                        .then((changed) => {
+                        if (changed)
+                            harness.render();
+                    });
+                }
+                : undefined,
             onTransformToolChange: (tool) => {
                 state.transformTool = tool;
                 state.transformConstraint = normalizeTransformConstraint(tool, state.transformConstraint);
                 state.gizmo?.setTool(tool);
                 state.gizmo?.setConstraint(state.transformConstraint);
-                requestEditorSceneFrame(state, 'transform-tool-change');
                 harness.render();
+                requestEditorSceneFrame(state, 'transform-tool-change');
             },
             onTransformSpaceChange: (space) => {
                 state.transformSpace = space;
                 state.gizmo?.setSpace(space);
-                requestEditorSceneFrame(state, 'transform-space-change');
                 harness.render();
+                requestEditorSceneFrame(state, 'transform-space-change');
             },
             onTransformConstraintChange: (constraint) => {
                 state.transformConstraint = normalizeTransformConstraint(state.transformTool, constraint);
                 state.gizmo?.setConstraint(state.transformConstraint);
-                requestEditorSceneFrame(state, 'transform-constraint-change');
                 harness.render();
+                requestEditorSceneFrame(state, 'transform-constraint-change');
             },
             onTransformSnapEnabledChange: (enabled) => {
                 state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, {
@@ -175,8 +205,8 @@ export function createLocalEditorHarness(options) {
                 });
                 state.gizmo?.setOperationSettings(state.transformOperationSettings);
                 state.status = enabled ? 'Transform snap enabled' : 'Transform snap disabled';
-                requestEditorSceneFrame(state, 'transform-operation-settings-change');
                 harness.render();
+                requestEditorSceneFrame(state, 'transform-operation-settings-change');
             },
             onTransformSnapStepChange: (input) => {
                 const value = normalizePositiveStep(input.value);
@@ -192,8 +222,8 @@ export function createLocalEditorHarness(options) {
                 state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, { snap });
                 state.gizmo?.setOperationSettings(state.transformOperationSettings);
                 state.status = `Transform snap ${input.kind} step ${value}`;
-                requestEditorSceneFrame(state, 'transform-operation-settings-change');
                 harness.render();
+                requestEditorSceneFrame(state, 'transform-operation-settings-change');
             },
             onPlacementModeChange: (mode) => {
                 state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, {
@@ -203,8 +233,8 @@ export function createLocalEditorHarness(options) {
                 if (state.transformOperationSettings.placementMode === 'off')
                     clearArmedPlacement(state);
                 state.status = `Placement mode: ${state.transformOperationSettings.placementMode}`;
-                requestEditorSceneFrame(state, 'placement-mode-change');
                 harness.render();
+                requestEditorSceneFrame(state, 'placement-mode-change');
             },
             onTransformAction: (action) => {
                 if (executeTransformAction(state, options, action))
@@ -230,8 +260,8 @@ export function createLocalEditorHarness(options) {
                 if (clearViewportMeasurement(state))
                     harness.render();
             },
-            onMainCameraPreviewToggle: (enabled) => {
-                if (setMainCameraPreviewEnabled(state, options, enabled))
+            onSceneCameraPreviewToggle: (enabled) => {
+                if (setSceneCameraPreviewEnabled(state, options, enabled))
                     harness.render();
             },
             onGridVisibleChange: (visible) => {
@@ -248,20 +278,17 @@ export function createLocalEditorHarness(options) {
             },
             onCancelActiveOperation: () => {
                 cancelActiveOperation(state);
-                requestEditorSceneFrame(state, 'cancel-active-operation');
                 harness.render();
             },
         },
     });
-    const renderUi = () => {
-        syncViewportCameraState(state);
-        syncViewportMeasurementState(state);
-        syncViewportSpatialOverlay(state);
-        ui.update(createUiState(state, options));
-    };
     harness = {
         render() {
-            renderUi();
+            syncSceneCameraPreview(state, options);
+            syncViewportCameraState(state);
+            syncViewportMeasurementState(state);
+            syncViewportSpatialOverlay(state);
+            ui.update(createUiState(state, options));
         },
         notifyViewportRevealed(reason = 'viewport-revealed') {
             state.viewportRenderCoordinator?.requestRevealFrame(reason);
@@ -512,11 +539,11 @@ function cloneViewportMeasurement(measurement) {
     };
 }
 function setViewportViewPreset(state, preset) {
-    if (state.mainCameraPreviewEnabled) {
-        state.status = 'Viewport view unavailable during Main Camera preview';
+    if (state.sceneCameraPreviewEnabled) {
+        state.status = 'Viewport view unavailable during Scene Camera preview';
         state.statusTone = 'warning';
         state.statusToneStatus = state.status;
-        state.statusDetails = 'Disable Main Camera preview before switching editor viewport views.';
+        state.statusDetails = 'Disable Scene Camera preview before switching editor viewport views.';
         return true;
     }
     const nextPreset = normalizeViewportViewPreset(preset);
@@ -535,15 +562,15 @@ function setViewportViewPreset(state, preset) {
     state.statusTone = 'default';
     state.statusToneStatus = state.status;
     state.statusDetails = '';
-    requestEditorSceneFrame(state, 'viewport-view-preset-change');
+    requestEditorSceneFrame(state, 'viewport-view-preset');
     return true;
 }
 function setViewportProjectionMode(state, mode) {
-    if (state.mainCameraPreviewEnabled) {
-        state.status = 'Viewport projection unavailable during Main Camera preview';
+    if (state.sceneCameraPreviewEnabled) {
+        state.status = 'Viewport projection unavailable during Scene Camera preview';
         state.statusTone = 'warning';
         state.statusToneStatus = state.status;
-        state.statusDetails = 'Disable Main Camera preview before switching editor viewport projection.';
+        state.statusDetails = 'Disable Scene Camera preview before switching editor viewport projection.';
         return true;
     }
     const nextMode = normalizeViewportProjectionMode(mode);
@@ -559,7 +586,7 @@ function setViewportProjectionMode(state, mode) {
     state.statusTone = 'default';
     state.statusToneStatus = state.status;
     state.statusDetails = '';
-    requestEditorSceneFrame(state, 'viewport-projection-mode-change');
+    requestEditorSceneFrame(state, 'viewport-projection-mode');
     return true;
 }
 function setViewportOverlaySettings(state, settings) {
@@ -608,6 +635,7 @@ function setViewportUtilityTool(state, tool) {
     state.statusTone = 'default';
     state.statusToneStatus = state.status;
     state.statusDetails = '';
+    requestEditorSceneFrame(state, 'viewport-utility-tool');
     return true;
 }
 function clearViewportMeasurement(state) {
@@ -620,6 +648,7 @@ function clearViewportMeasurement(state) {
     state.statusTone = 'default';
     state.statusToneStatus = state.status;
     state.statusDetails = '';
+    requestEditorSceneFrame(state, 'viewport-measurement-clear');
     return true;
 }
 export function applyLocalEditorHarnessViewportMeasurementPointerStart(state, event) {
@@ -713,19 +742,28 @@ function validateTransformActionSelection(state, action) {
 }
 async function createEditorWorld(state, options, renderUi, updateSceneFrameStats) {
     disposeEditorWorld(state);
+    const render = (reason = 'editor-world-update') => {
+        renderUi();
+        requestEditorSceneFrame(state, reason);
+    };
     const canvas = options.worldAdapter.getCanvas();
     if (!canvas)
         throw new Error('Editor canvas not found');
     const babylon = await options.worldAdapter.loadBabylon();
     const engine = options.worldAdapter.createEngine(babylon, canvas);
+    const document = state.session?.getState().workingDocument;
+    const initialAppearance = resolveLocalEditorWorldAppearance(options, document);
+    const initialAppearanceKey = serializeLocalEditorWorldAppearance(initialAppearance);
+    const initialRendering = resolveLocalEditorWorldRendering(options, document);
+    const initialRenderingKey = serializeLocalEditorWorldRendering(initialRendering);
     const world = createBabylonEditorWorld({
         engine,
         canvas,
         babylon,
         cameraTarget: options.world?.cameraTarget,
         cameraRadius: options.world?.cameraRadius,
-        clearColor: options.world?.clearColor,
-        sky: options.world?.sky,
+        clearColor: initialAppearance.clearColor,
+        sky: initialAppearance.sky,
         useRightHandedSystem: options.world?.useRightHandedSystem,
         enableDefaultCameraControls: false,
     });
@@ -752,6 +790,8 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         getCamera: () => world.scene?.activeCamera ?? world.camera ?? null,
         getEditorCamera: () => world.camera ?? null,
     }) ?? null;
+    if (initialAppearance.grid)
+        grid?.setColors(initialAppearance.grid);
     grid?.setVisible(state.gridVisible);
     const projection = createBabylonEditorProjection({
         babylon,
@@ -775,10 +815,10 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
             state.status = 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'}`;
-            renderUi();
+            render();
         },
         onDragUpdate() {
-            renderUi();
+            render();
         },
         onDragEnd(event) {
             sceneViewInteraction.endGizmoDrag();
@@ -790,14 +830,13 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         onDragCancel(event) {
             sceneViewInteraction.endGizmoDrag();
             if (event.duplicate && cancelDuplicateDrag(state, options)) {
-                renderUi();
+                render();
                 return;
             }
-            requestEditorSceneFrame(state, 'gizmo-drag-cancel');
             state.status = event.targetIds.length > 1
                 ? `Canceled ${event.tool} ${event.targetIds.length} objects`
                 : `Canceled ${event.tool} ${event.nodeId ?? event.activeId ?? 'selection'}`;
-            renderUi();
+            render();
         },
         onDragBlocked(event) {
             sceneViewInteraction.endGizmoDrag();
@@ -826,15 +865,15 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         isOperationBlocked: () => state.gizmo?.getState().dragPhase === 'dragging',
         onSelectionCommand(command) {
             if (dispatchSelectionCommand(state, options, command))
-                renderUi();
+                render();
         },
         onFocusIntent(nodeId) {
             if (focusProjectionNode(state, nodeId))
-                renderUi();
+                render();
         },
         onBoxSelectionChange(box) {
             state.boxSelection = box;
-            renderUi();
+            render();
         },
     });
     const sceneViewMeasurement = createBabylonSceneViewMeasurementController({
@@ -853,7 +892,7 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
             sceneViewInteraction.beginPointerIntent(event.state.intent);
             if (event.state.intent === 'measurement') {
                 if (handleViewportMeasurementStart(state, event.originalEvent))
-                    renderUi();
+                    render();
                 return;
             }
             if (event.state.intent === 'gizmo-drag') {
@@ -862,100 +901,93 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
             }
             if (event.state.intent === 'placement') {
                 if (previewArmedPlacement(state, event.originalEvent))
-                    renderUi();
+                    render();
                 return;
             }
             if (event.state.intent === 'view-plane-move') {
                 if (gizmo.beginViewPlaneMove(event.originalEvent))
-                    renderUi();
+                    render();
                 return;
             }
             if (event.state.intent === 'selection-click' || event.state.intent === 'box-select') {
                 selectionController.beginPointerSelection(event.originalEvent);
-                requestEditorSceneFrame(state, `pointer-${event.state.intent}-start`);
+                requestEditorSceneFrame(state, 'viewport-pointer-selection-start');
             }
         },
         onPointerIntentMove(event) {
             if (event.state.intent === 'measurement') {
                 if (handleViewportMeasurementMove(state, event.originalEvent))
-                    renderUi();
+                    render();
                 return;
             }
             if (event.state.intent === 'placement') {
                 if (previewArmedPlacement(state, event.originalEvent))
-                    renderUi();
+                    render();
                 return;
             }
             if (event.state.intent === 'view-plane-move') {
                 if (gizmo.updateViewPlaneMove(event.originalEvent))
-                    renderUi();
+                    render();
                 return;
             }
-            if (!state.mainCameraPreviewEnabled && state.sceneViewCamera?.handlePointerIntentMove(event)) {
-                renderUi();
+            if (!state.sceneCameraPreviewEnabled && state.sceneViewCamera?.handlePointerIntentMove(event)) {
+                render();
                 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');
             }
-            requestEditorSceneFrame(state, `pointer-${event.state.intent}`);
         },
         onPointerIntentEnd(event) {
             sceneViewInteraction.endPointerIntent(event.state.intent);
             if (event.state.intent === 'measurement') {
                 if (handleViewportMeasurementEnd(state))
-                    renderUi();
+                    render();
                 return;
             }
             if (event.state.intent === 'placement') {
                 if (commitArmedPlacement(state, options, event.originalEvent))
-                    renderUi();
+                    render();
                 return;
             }
             if (event.state.intent === 'view-plane-move') {
-                if (gizmo.endViewPlaneMove(event.originalEvent)) {
-                    requestEditorSceneFrame(state, 'view-plane-move-end');
-                    renderUi();
-                }
+                if (gizmo.endViewPlaneMove(event.originalEvent))
+                    render();
                 return;
             }
             if (event.state.intent === 'selection-click' || event.state.intent === 'box-select') {
                 selectionController.endPointerSelection(event.originalEvent, event.state.intent);
+                requestEditorSceneFrame(state, 'viewport-pointer-selection-end');
             }
-            requestEditorSceneFrame(state, `pointer-${event.state.intent}-end`);
         },
         onPointerIntentCancel(event) {
             sceneViewInteraction.cancelPointerIntent(event.state.intent);
             if (event.state.intent === 'measurement') {
-                renderUi();
+                render();
                 return;
             }
             if (event.state.intent === 'placement') {
                 state.gizmo?.setPlacementMarker(null);
-                requestEditorSceneFrame(state, 'placement-marker-clear');
-                renderUi();
+                render();
                 return;
             }
             if (event.state.intent === 'view-plane-move') {
                 gizmo.cancelDrag();
-                requestEditorSceneFrame(state, 'view-plane-move-cancel');
-                renderUi();
+                render();
                 return;
             }
             if (event.state.intent === 'selection-click' || event.state.intent === 'box-select') {
                 selectionController.cancelBoxSelection();
-                renderUi();
+                render();
             }
-            requestEditorSceneFrame(state, `pointer-${event.state.intent}-cancel`);
         },
         onDoubleClick(event) {
             selectionController.handleDoubleClick(event);
         },
         onWheel(event) {
-            if (!state.mainCameraPreviewEnabled && state.sceneViewCamera?.handleWheel(event)) {
-                requestEditorSceneFrame(state, 'camera-wheel');
-                renderUi();
-            }
+            if (!state.sceneCameraPreviewEnabled && state.sceneViewCamera?.handleWheel(event))
+                render();
         },
         onMovementKeysChange(event) {
             sceneViewInteraction.updateMovementKeys(event.pressedMovementKeys);
@@ -968,7 +1000,7 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         camera: world.camera,
         input: sceneViewInput,
     });
-    const mainCameraPreview = createBabylonMainCameraPreviewController({
+    const sceneCameraPreview = createBabylonSceneCameraPreviewController({
         babylon,
         scene: world.scene,
         editorCamera: world.camera,
@@ -977,13 +1009,17 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
         babylon,
         scene: world.scene,
     });
-    const document = state.session?.getState().workingDocument;
     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 resize = () => {
         engine.resize?.();
         viewportRenderCoordinator.requestFrame('resize');
@@ -994,8 +1030,9 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
     state.world = world;
     state.grid = grid;
     state.projection = projection;
+    state.shadowPreview = shadowPreview;
     state.gizmo = gizmo;
-    state.mainCameraPreview = mainCameraPreview;
+    state.sceneCameraPreview = sceneCameraPreview;
     state.sceneViewInput = sceneViewInput;
     state.sceneViewCamera = sceneViewCamera;
     state.sceneViewMeasurement = sceneViewMeasurement;
@@ -1004,24 +1041,21 @@ async function createEditorWorld(state, options, renderUi, updateSceneFrameStats
     state.sceneRenderScheduler = sceneRenderScheduler;
     state.viewportRenderCoordinator = viewportRenderCoordinator;
     state.sceneFrameStats = sceneRenderScheduler.getStats();
+    state.worldAppearanceKey = initialAppearanceKey;
+    state.worldRenderingKey = initialRenderingKey;
     state.resizeHandler = resize;
-    await sceneRenderScheduler.waitForNextFrame('editor-world-created');
+    viewportRenderCoordinator.requestFrame('editor-world-created');
 }
 function disposeEditorWorld(state) {
     state.sceneViewInteraction?.dispose();
     state.sceneViewInteraction = null;
-    state.viewportRenderCoordinator?.dispose();
-    state.viewportRenderCoordinator = null;
-    state.sceneRenderScheduler?.dispose();
-    state.sceneRenderScheduler = null;
-    state.sceneFrameStats = null;
     if (state.resizeHandler) {
         window.removeEventListener('resize', state.resizeHandler);
         state.resizeHandler = null;
     }
-    state.mainCameraPreview?.dispose();
-    state.mainCameraPreview = null;
-    state.mainCameraPreviewEnabled = false;
+    state.sceneCameraPreview?.dispose();
+    state.sceneCameraPreview = null;
+    state.sceneCameraPreviewEnabled = false;
     state.sceneViewCamera?.dispose();
     state.sceneViewCamera = null;
     state.sceneViewMeasurement?.dispose();
@@ -1032,6 +1066,11 @@ function disposeEditorWorld(state) {
     state.sceneViewInput = null;
     state.selectionController?.dispose();
     state.selectionController = null;
+    state.viewportRenderCoordinator?.dispose();
+    state.viewportRenderCoordinator = null;
+    state.sceneRenderScheduler?.dispose();
+    state.sceneRenderScheduler = null;
+    state.sceneFrameStats = null;
     state.boxSelection = null;
     state.viewportSpatialOverlay = createEmptyEditorViewportSpatialOverlayState();
     state.viewportMeasurement = createEmptyViewportMeasurement();
@@ -1041,10 +1080,13 @@ function disposeEditorWorld(state) {
     };
     state.gizmo?.dispose();
     state.gizmo = null;
+    state.shadowPreview?.dispose();
+    state.shadowPreview = null;
     state.projection?.dispose();
     state.projection = null;
     state.grid?.dispose();
     state.grid = null;
+    state.engine?.stopRenderLoop?.();
     state.world?.dispose();
     state.engine?.dispose?.();
     state.babylon = null;
@@ -1054,11 +1096,11 @@ function disposeEditorWorld(state) {
 function requestEditorSceneFrame(state, reason) {
     state.viewportRenderCoordinator?.requestFrame(reason);
 }
-async function runExclusive(state, renderUi, action) {
+async function runExclusive(state, render, action) {
     if (state.busy)
         return;
     state.busy = true;
-    renderUi();
+    render();
     try {
         await action();
     }
@@ -1071,7 +1113,7 @@ async function runExclusive(state, renderUi, action) {
     }
     finally {
         state.busy = false;
-        renderUi();
+        render();
     }
 }
 function selectItem(state, options, input) {
@@ -1591,11 +1633,69 @@ function syncCurrentSelectionToSceneArtifacts(state) {
     syncSelectionToProjection(state, state.session?.getState().selection ?? { selectedIds: [], activeId: null });
 }
 function invalidateEditorScene(state, reason, options) {
-    if (options && state.mainCameraPreviewEnabled) {
-        syncMainCameraPreview(state, options);
+    if (options && state.sceneCameraPreviewEnabled) {
+        syncSceneCameraPreview(state, options);
     }
     state.viewportRenderCoordinator?.invalidateScene(reason);
 }
+function syncEditorWorldAppearanceFromDocument(state, options, document, reason) {
+    const appearance = resolveLocalEditorWorldAppearance(options, document);
+    const key = serializeLocalEditorWorldAppearance(appearance);
+    if (key === state.worldAppearanceKey)
+        return;
+    state.worldAppearanceKey = key;
+    state.world?.setAppearance({
+        clearColor: appearance.clearColor,
+        sky: appearance.sky,
+    });
+    state.grid?.setColors(appearance.grid ?? {});
+    requestEditorSceneFrame(state, reason);
+}
+function syncEditorWorldRenderingFromDocument(state, options, document, reason, refreshProjection = false) {
+    const rendering = resolveLocalEditorWorldRendering(options, document);
+    const key = serializeLocalEditorWorldRendering(rendering);
+    if (key === state.worldRenderingKey) {
+        if (refreshProjection)
+            state.shadowPreview?.refresh();
+        return;
+    }
+    state.worldRenderingKey = key;
+    state.shadowPreview?.setOptions(rendering.shadowPreview);
+    requestEditorSceneFrame(state, reason);
+}
+function resolveLocalEditorWorldAppearance(options, document) {
+    const documentAppearance = document
+        ? options.documentAdapter.getWorldAppearance?.(document) ?? null
+        : null;
+    return {
+        clearColor: documentAppearance?.clearColor ?? options.world?.clearColor,
+        sky: hasEditorWorldAppearanceSky(documentAppearance) ? documentAppearance.sky : options.world?.sky,
+        grid: documentAppearance?.grid ?? options.world?.grid,
+    };
+}
+function resolveLocalEditorWorldRendering(options, document) {
+    const documentRendering = document
+        ? options.documentAdapter.getWorldRendering?.(document) ?? null
+        : null;
+    return {
+        shadowPreview: documentRendering?.shadowPreview ?? null,
+    };
+}
+function hasEditorWorldAppearanceSky(appearance) {
+    return !!appearance && Object.prototype.hasOwnProperty.call(appearance, 'sky');
+}
+function serializeLocalEditorWorldAppearance(appearance) {
+    return JSON.stringify({
+        clearColor: appearance.clearColor ?? null,
+        sky: hasEditorWorldAppearanceSky(appearance) ? appearance.sky : null,
+        grid: appearance.grid ?? null,
+    });
+}
+function serializeLocalEditorWorldRendering(rendering) {
+    return JSON.stringify({
+        shadowPreview: rendering.shadowPreview ?? null,
+    });
+}
 function executeTransformAction(state, options, action) {
     if (state.mode !== 'editor' || !state.session)
         return false;
@@ -1693,6 +1793,66 @@ function createAssetFromBrowserIntent(state, options, assetId) {
     }
     return armAssetPlacement(state, options, assetId);
 }
+function selectBrowserAsset(state, assetId) {
+    if (state.selectedAssetId === assetId)
+        return false;
+    state.selectedAssetId = assetId;
+    state.status = `Selected asset ${assetId}`;
+    return true;
+}
+function handleBrowserAssetAction(state, options, input) {
+    state.selectedAssetId = input.browserAssetId;
+    if (input.actionId === 'asset.add-to-scene') {
+        return addAssetToDocument(state, options, input.assetId).ok;
+    }
+    if (input.actionId === 'asset.place') {
+        if (state.transformOperationSettings.placementMode === 'off') {
+            state.transformOperationSettings = updateTransformOperationSettings(state.transformOperationSettings, {
+                placementMode: 'ground',
+            });
+            state.gizmo?.setOperationSettings(state.transformOperationSettings);
+        }
+        return armAssetPlacement(state, options, input.assetId);
+    }
+    const patched = patchBrowserAssetAction(state, options, input);
+    if (patched)
+        return true;
+    state.status = `Asset action unavailable: ${input.actionId}`;
+    state.statusTone = 'warning';
+    state.statusToneStatus = state.status;
+    return true;
+}
+function patchBrowserAssetAction(state, options, input) {
+    const session = state.session;
+    const document = session?.getState().workingDocument ?? null;
+    if (!session || !document || !options.documentAdapter.createAssetActionPatch)
+        return false;
+    const asset = findAssetByResolvedId(state, options, input.assetId);
+    const patch = options.documentAdapter.createAssetActionPatch({
+        ...input,
+        document,
+        asset,
+        activeId: session.getState().selection.activeId,
+        selectedIds: [...session.getState().selection.selectedIds],
+    });
+    if (!patch)
+        return false;
+    const result = session.dispatch({
+        type: 'document.patch',
+        label: patch.label ?? `Asset action ${input.actionId}`,
+        patch: patch.patch,
+    });
+    state.summary = summarizeDocument(options, result.workingDocument, session.getSource());
+    state.status = patch.label ?? `Asset action ${input.actionId}`;
+    state.statusTone = 'success';
+    state.statusToneStatus = state.status;
+    state.statusDetails = '';
+    if (patch.reprojectIds?.length)
+        reprojectProjectionForChangedIds(state, options, result.workingDocument, patch.reprojectIds);
+    else if (patch.changedIds)
+        syncProjectionForChangedIds(state, options, result.workingDocument, patch.changedIds);
+    return true;
+}
 function armAssetPlacement(state, options, assetId) {
     if (state.mode !== 'editor')
         return false;
@@ -1702,7 +1862,6 @@ function armAssetPlacement(state, options, assetId) {
         return false;
     state.armedPlacement = { assetId, asset };
     state.gizmo?.setPlacementMarker(null);
-    requestEditorSceneFrame(state, 'placement-arm-change');
     state.status = `Placement armed: ${formatAssetLabel(asset, assetId)} (${state.transformOperationSettings.placementMode})`;
     return true;
 }
@@ -1732,7 +1891,6 @@ function commitArmedPlacement(state, options, event) {
     if (!armed || !hit) {
         state.gizmo?.setPlacementMarker(null);
         state.status = 'Placement rejected: no hit';
-        requestEditorSceneFrame(state, 'placement-marker-clear');
         return true;
     }
     const patch = options.documentAdapter.createPlacedAssetPatch?.({
@@ -1782,11 +1940,8 @@ function pickArmedPlacementHit(state, event) {
         : state.gizmo?.pickPlacementHit(event.clientX, event.clientY, mode) ?? null;
 }
 function clearArmedPlacement(state) {
-    const hadArmedPlacement = !!state.armedPlacement;
     state.armedPlacement = null;
     state.gizmo?.setPlacementMarker(null);
-    if (hadArmedPlacement)
-        requestEditorSceneFrame(state, 'placement-clear');
 }
 function addAssetToDocument(state, options, assetId, createOptions = {}) {
     if (state.mode !== 'editor') {
@@ -1837,7 +1992,7 @@ function addAssetToDocument(state, options, assetId, createOptions = {}) {
             state.projection?.projectNode(projectedNode);
             if (selectionResult)
                 syncSelectionToProjection(state, selectionResult.selection);
-            invalidateEditorScene(state, 'projection-project-node', options);
+            invalidateEditorScene(state, 'projection-project-node');
         }
     }
     return {
@@ -1924,6 +2079,93 @@ function patchSerializedProperty(state, options, input) {
     state.status = patch.label ?? `Patched ${payload.path}`;
     return true;
 }
+async function applyRenderingPropertyChange(state, options, input) {
+    if (state.mode !== 'editor')
+        return false;
+    if (!state.session || !options.documentAdapter.onRenderingPropertyChange)
+        return false;
+    const document = state.session.getState().workingDocument;
+    try {
+        const result = await options.documentAdapter.onRenderingPropertyChange({
+            document,
+            sectionId: input.sectionId,
+            systemId: input.systemId,
+            path: input.path,
+            value: input.value,
+            control: input.control,
+            valueType: input.valueType,
+            commitMode: input.commitMode,
+            source: input.source,
+        });
+        const resultObject = typeof result === 'object' && result != null ? result : null;
+        const changed = result === true || resultObject?.changed === true || resultObject?.refreshWorldRendering === true;
+        if (resultObject?.status) {
+            state.status = resultObject.status;
+            state.statusTone = resultObject.statusTone ?? 'default';
+            state.statusToneStatus = state.status;
+            state.statusDetails = resultObject.statusDetails ?? '';
+        }
+        else if (changed) {
+            state.status = `Updated rendering: ${input.path}`;
+            state.statusTone = 'success';
+            state.statusToneStatus = state.status;
+            state.statusDetails = '';
+        }
+        if (changed) {
+            syncEditorWorldRenderingFromDocument(state, options, document, 'rendering-panel-change', true);
+            requestEditorSceneFrame(state, 'rendering-panel-change');
+        }
+        return changed || !!resultObject?.status;
+    }
+    catch (error) {
+        state.status = error instanceof Error ? error.message : String(error);
+        state.statusTone = 'error';
+        state.statusToneStatus = state.status;
+        state.statusDetails = state.status;
+        console.error('[LocalEditorHarness] rendering property change failed', error);
+        return true;
+    }
+}
+async function applyRenderingAction(state, options, input) {
+    if (state.mode !== 'editor')
+        return false;
+    if (!state.session || !options.documentAdapter.onRenderingAction)
+        return false;
+    const document = state.session.getState().workingDocument;
+    try {
+        const result = await options.documentAdapter.onRenderingAction({
+            document,
+            actionId: input.actionId,
+        });
+        const resultObject = typeof result === 'object' && result != null ? result : null;
+        const changed = result === true || resultObject?.changed === true || resultObject?.refreshWorldRendering === true;
+        if (resultObject?.status) {
+            state.status = resultObject.status;
+            state.statusTone = resultObject.statusTone ?? 'default';
+            state.statusToneStatus = state.status;
+            state.statusDetails = resultObject.statusDetails ?? '';
+        }
+        else if (changed) {
+            state.status = `Rendering action: ${input.actionId}`;
+            state.statusTone = 'success';
+            state.statusToneStatus = state.status;
+            state.statusDetails = '';
+        }
+        if (changed) {
+            syncEditorWorldRenderingFromDocument(state, options, document, 'rendering-panel-action', true);
+            requestEditorSceneFrame(state, 'rendering-panel-action');
+        }
+        return changed || !!resultObject?.status;
+    }
+    catch (error) {
+        state.status = error instanceof Error ? error.message : String(error);
+        state.statusTone = 'error';
+        state.statusToneStatus = state.status;
+        state.statusDetails = state.status;
+        console.error('[LocalEditorHarness] rendering action failed', error);
+        return true;
+    }
+}
 function createInspectorEditTransaction(state, options, document, input, targetIds) {
     const property = findInspectorPropertyForEdit(state, options, document, input, targetIds);
     if (!property) {
@@ -2241,7 +2483,9 @@ function rebuildProjectionFromDocument(state, options, document, selection) {
     state.projection?.rebuild(options.documentAdapter.getProjectionNodes(document));
     const sanitized = sanitizeSelection(state, options, document, selection);
     syncSelectionToProjection(state, sanitized ?? selection);
-    invalidateEditorScene(state, 'projection-rebuild', options);
+    syncEditorWorldAppearanceFromDocument(state, options, document, 'world-appearance-rebuild');
+    syncEditorWorldRenderingFromDocument(state, options, document, 'world-rendering-rebuild', true);
+    invalidateEditorScene(state, 'projection-rebuild');
 }
 function syncProjectionForDispatchResult(state, options, result, changedId) {
     if (result.documentChanged && changedId && result.workingDocument) {
@@ -2257,8 +2501,12 @@ function syncProjectionForDispatchResult(state, options, result, changedId) {
         const sanitized = result.workingDocument ? sanitizeSelection(state, options, result.workingDocument, selection) : null;
         syncSelectionToProjection(state, sanitized ?? selection);
     }
+    if (result.documentChanged && result.workingDocument) {
+        syncEditorWorldAppearanceFromDocument(state, options, result.workingDocument, 'world-appearance-dispatch-result');
+        syncEditorWorldRenderingFromDocument(state, options, result.workingDocument, 'world-rendering-dispatch-result', true);
+    }
     if (result.documentChanged || result.selectionChanged) {
-        invalidateEditorScene(state, 'projection-dispatch-result', options);
+        invalidateEditorScene(state, 'projection-dispatch-result');
     }
 }
 function syncProjectionForChangedIds(state, options, document, changedIds) {
@@ -2269,7 +2517,9 @@ function syncProjectionForChangedIds(state, options, document, changedIds) {
     }
     const selection = state.session?.getState().selection ?? { selectedIds: [], activeId: null };
     syncSelectionToProjection(state, selection);
-    invalidateEditorScene(state, 'projection-sync-changed-ids', options);
+    syncEditorWorldAppearanceFromDocument(state, options, document, 'world-appearance-sync-changed-ids');
+    syncEditorWorldRenderingFromDocument(state, options, document, 'world-rendering-sync-changed-ids', true);
+    invalidateEditorScene(state, 'projection-sync-changed-ids');
 }
 function reprojectProjectionForChangedIds(state, options, document, changedIds) {
     for (const changedId of changedIds) {
@@ -2278,28 +2528,29 @@ function reprojectProjectionForChangedIds(state, options, document, changedIds)
             state.projection?.projectNode(projectedNode);
     }
     syncCurrentSelectionToSceneArtifacts(state);
+    syncEditorWorldAppearanceFromDocument(state, options, document, 'world-appearance-reproject-changed-ids');
+    syncEditorWorldRenderingFromDocument(state, options, document, 'world-rendering-reproject-changed-ids', true);
     invalidateEditorScene(state, 'projection-reproject-changed-ids', options);
 }
-function setMainCameraPreviewEnabled(state, options, enabled) {
+function setSceneCameraPreviewEnabled(state, options, enabled) {
     if (!enabled) {
-        state.mainCameraPreviewEnabled = false;
-        state.mainCameraPreview?.setActive(false);
-        state.status = 'Main Camera preview disabled';
-        requestEditorSceneFrame(state, 'main-camera-preview-toggle');
+        state.sceneCameraPreviewEnabled = false;
+        state.sceneCameraPreview?.setActive(false);
+        state.status = 'Scene Camera preview disabled';
+        requestEditorSceneFrame(state, 'scene-camera-preview-toggle');
         return true;
     }
-    state.mainCameraPreviewEnabled = true;
-    if (!syncMainCameraPreview(state, options)) {
-        state.mainCameraPreviewEnabled = false;
-        state.status = 'Main Camera preview unavailable';
+    state.sceneCameraPreviewEnabled = true;
+    if (!syncSceneCameraPreview(state, options)) {
+        state.sceneCameraPreviewEnabled = false;
+        state.status = 'Scene Camera preview unavailable';
         state.statusTone = 'warning';
         state.statusToneStatus = state.status;
         state.statusDetails = 'The current document did not provide a Main Camera preview rig.';
-        requestEditorSceneFrame(state, 'main-camera-preview-toggle');
         return true;
     }
-    state.status = 'Main Camera preview enabled';
-    requestEditorSceneFrame(state, 'main-camera-preview-toggle');
+    state.status = 'Scene Camera preview enabled';
+    requestEditorSceneFrame(state, 'scene-camera-preview-toggle');
     return true;
 }
 function setGridVisible(state, visible) {
@@ -2315,16 +2566,16 @@ function setGridVisible(state, visible) {
     requestEditorSceneFrame(state, 'grid-visible-change');
     return true;
 }
-function syncMainCameraPreview(state, options) {
-    const controller = state.mainCameraPreview;
+function syncSceneCameraPreview(state, options) {
+    const controller = state.sceneCameraPreview;
     if (!controller)
         return false;
-    if (!state.mainCameraPreviewEnabled) {
+    if (!state.sceneCameraPreviewEnabled) {
         controller.setActive(false);
         return false;
     }
     const document = state.session?.getState().workingDocument ?? null;
-    const rig = document ? options.documentAdapter.getMainCameraPreviewRig?.(document) ?? null : null;
+    const rig = document ? options.documentAdapter.getSceneCameraPreviewRig?.(document) ?? null : null;
     if (!rig) {
         controller.setActive(false);
         return false;
@@ -2371,9 +2622,9 @@ function syncViewportMeasurementState(state) {
     if (measurement)
         state.viewportMeasurement = measurement;
 }
-function hasMainCameraPreviewRig(state, options) {
+function hasSceneCameraPreviewRig(state, options) {
     const document = state.session?.getState().workingDocument ?? null;
-    return !!document && !!options.documentAdapter.getMainCameraPreviewRig?.(document);
+    return !!document && !!options.documentAdapter.getSceneCameraPreviewRig?.(document);
 }
 function createUiState(state, options) {
     const sessionState = state.session?.getState();
@@ -2398,8 +2649,13 @@ function createUiState(state, options) {
     const inspectorMultiObject = document && inspectorMultiObjectBase
         ? withRuntimeInspectorSections(state, options, document, inspectorMultiObjectBase)
         : inspectorMultiObjectBase;
-    const assets = dedupeLocalEditorBrowserAssetItems(state.assets
-        .map(asset => toBrowserAssetItem(options, asset)));
+    const documentAssetItems = document
+        ? options.documentAdapter.getBrowserAssetItems?.(document) ?? []
+        : [];
+    const assets = dedupeLocalEditorBrowserAssetItems([
+        ...state.assets.map(asset => toBrowserAssetItem(options, asset)),
+        ...documentAssetItems,
+    ]);
     return {
         mode: state.mode,
         busy: state.busy,
@@ -2409,6 +2665,7 @@ function createUiState(state, options) {
         summary: state.summary,
         assetFilter: state.assetFilter,
         assets,
+        selectedAssetId: state.selectedAssetId,
         assetCountLabel: `${assets.length} assets`,
         hierarchy: document ? options.documentAdapter.getHierarchyItems(document) : [],
         selectedIds,
@@ -2421,6 +2678,7 @@ function createUiState(state, options) {
         serializedMultiObject,
         inspectorObject,
         inspectorMultiObject,
+        renderingPanel: document ? options.documentAdapter.getRenderingPanelState?.(document) ?? null : null,
         boxSelection: state.boxSelection,
         coordinateAxes: options.world?.coordinateAxes === false
             ? null
@@ -2445,9 +2703,9 @@ function createUiState(state, options) {
         sceneFrameStats: state.sceneFrameStats
             ? { ...state.sceneFrameStats, activeReasons: [...state.sceneFrameStats.activeReasons] }
             : null,
-        mainCameraPreview: {
-            enabled: state.mainCameraPreviewEnabled,
-            available: hasMainCameraPreviewRig(state, options),
+        sceneCameraPreview: {
+            enabled: state.sceneCameraPreviewEnabled,
+            available: hasSceneCameraPreviewRig(state, options),
         },
         grid: {
             visible: state.gridVisible,
@@ -2479,7 +2737,7 @@ function createSceneViewCoordinateAxesState(state) {
         return null;
     return {
         projectionMode: readSceneViewFreeCameraProjectionMode(state, camera),
-        projectionToggleDisabled: state.mainCameraPreviewEnabled,
+        projectionToggleDisabled: state.sceneCameraPreviewEnabled,
         axes: [
             createSceneViewCoordinateAxis('x', 'X', '#ff4b70', { x: 1, y: 0, z: 0 }, right, up, forward),
             createSceneViewCoordinateAxis('y', 'Y', '#75ff42', { x: 0, y: 1, z: 0 }, right, up, forward),
@@ -2761,7 +3019,7 @@ function findAssetByResolvedId(state, options, assetId) {
             selected = { asset, item };
         }
     }
-    return selected?.asset;
+    return selected?.asset ?? null;
 }
 function toBrowserAssetItem(options, asset) {
     return options.worldAdapter.toBrowserAssetItem?.(asset)
@@ -2775,6 +3033,8 @@ function toBrowserAssetItem(options, asset) {
             origin: asset.origin,
             dedupeKey: asset.dedupeKey,
             placeable: asset.placeable,
+            preview: asset.preview,
+            material: asset.material,
             meta: asset.meta,
             disabled: asset.disabled ?? asset.placeable === false,
         };