@fps-games/editor 0.1.8 → 0.2.0-beta.2

package/node_modules/@fps-games/editor-browser/dist/local-editor-ui.js

@@ -1,5 +1,7 @@
 import * as LocalEditorPanels from './local-editor-ui-panels.js';
+import { renderLocalEditorPluginPanel } from './local-editor-ui-plugin-panel.js';
 import { createLocalEditorHierarchyController } from './local-editor-ui-hierarchy-controller.js';
+import { createLocalEditorRootOwnership } from './local-editor-root-ownership.js';
 import { createLocalEditorContextMenuController } from './local-editor-ui-context-menu.js';
 import { createLocalEditorTooltipController } from './local-editor-ui-tooltip.js';
 import { createLocalEditorViewportRevealController } from './local-editor-ui-dock-panel.js';
@@ -473,7 +475,7 @@ function readRenderingCommitMode(input) {
     return input.dataset.renderingCommitMode ?? 'live';
 }
 function isLocalEditorRightDockTab(value) {
-    return value === 'inspector' || value === 'rendering' || value === 'markers';
+    return value === 'inspector' || value === 'rendering' || value === 'markers' || value === 'plugins';
 }
 function resolveLocalEditorRightDockContentKey(state, tab, inspectorFilter) {
     if (tab === 'markers') {
@@ -506,6 +508,20 @@ function resolveLocalEditorRightDockContentKey(state, tab, inspectorFilter) {
             ].join('=')).join(';'),
         ].join(':');
     }
+    if (tab === 'plugins') {
+        const plugins = state.pluginPanel;
+        if (!plugins)
+            return 'plugins:none';
+        return [
+            'plugins',
+            plugins.environment,
+            plugins.scope,
+            plugins.hostState,
+            plugins.transitioning ? 'transitioning' : 'idle',
+            plugins.plugins.map(plugin => [plugin.id, plugin.version, plugin.lifecycle].join('=')).join(';'),
+            plugins.diagnostics.map(diagnostic => [diagnostic.pluginId ?? '', diagnostic.code, diagnostic.severity].join('=')).join(';'),
+        ].join(':');
+    }
     if (tab === 'rendering') {
         const rendering = state.renderingPanel;
         if (!rendering)
@@ -530,22 +546,36 @@ function resolveLocalEditorRightDockContentKey(state, tab, inspectorFilter) {
         inspectorFilter,
     ].join(':');
 }
-function findLocalEditorRightDockScrollViewport(tab, inspectorPanel, renderingPanel, markersPanel) {
-    const panel = tab === 'inspector' ? inspectorPanel : tab === 'rendering' ? renderingPanel : markersPanel;
+function findLocalEditorRightDockScrollViewport(tab, inspectorPanel, renderingPanel, markersPanel, pluginsPanel) {
+    const panel = tab === 'inspector'
+        ? inspectorPanel
+        : tab === 'rendering'
+            ? renderingPanel
+            : tab === 'markers'
+                ? markersPanel
+                : pluginsPanel;
     const selector = tab === 'inspector'
         ? '[data-editor-inspector-scroll-viewport]'
         : tab === 'rendering'
             ? '[data-editor-rendering-scroll-viewport]'
-            : '[data-editor-markers-scroll-viewport]';
+            : tab === 'markers'
+                ? '[data-editor-markers-scroll-viewport]'
+                : '[data-editor-plugins-scroll-viewport]';
     return panel.querySelector(selector) ?? panel;
 }
-function captureLocalEditorRightDockScrollSnapshot(state, tab, inspectorFilter, inspectorPanel, renderingPanel, markersPanel) {
+function captureLocalEditorRightDockScrollSnapshot(state, tab, inspectorFilter, inspectorPanel, renderingPanel, markersPanel, pluginsPanel) {
     if (!state || state.mode !== 'editor')
         return null;
-    const viewport = findLocalEditorRightDockScrollViewport(tab, inspectorPanel, renderingPanel, markersPanel);
+    const viewport = findLocalEditorRightDockScrollViewport(tab, inspectorPanel, renderingPanel, markersPanel, pluginsPanel);
     if (!viewport)
         return null;
-    const panel = tab === 'inspector' ? inspectorPanel : tab === 'rendering' ? renderingPanel : markersPanel;
+    const panel = tab === 'inspector'
+        ? inspectorPanel
+        : tab === 'rendering'
+            ? renderingPanel
+            : tab === 'markers'
+                ? markersPanel
+                : pluginsPanel;
     return {
         tab,
         contentKey: resolveLocalEditorRightDockContentKey(state, tab, inspectorFilter),
@@ -554,15 +584,21 @@ function captureLocalEditorRightDockScrollSnapshot(state, tab, inspectorFilter,
         scrollTop: viewport.scrollTop,
     };
 }
-function restoreLocalEditorRightDockScrollSnapshot(snapshot, state, tab, inspectorFilter, inspectorPanel, renderingPanel, markersPanel) {
+function restoreLocalEditorRightDockScrollSnapshot(snapshot, state, tab, inspectorFilter, inspectorPanel, renderingPanel, markersPanel, pluginsPanel) {
     if (!snapshot || snapshot.tab !== tab || state.mode !== 'editor')
         return;
-    const panel = tab === 'inspector' ? inspectorPanel : tab === 'rendering' ? renderingPanel : markersPanel;
+    const panel = tab === 'inspector'
+        ? inspectorPanel
+        : tab === 'rendering'
+            ? renderingPanel
+            : tab === 'markers'
+                ? markersPanel
+                : pluginsPanel;
     if ((panel.dataset.editorPanelId ?? tab) !== snapshot.panelId)
         return;
     if (resolveLocalEditorRightDockContentKey(state, tab, inspectorFilter) !== snapshot.contentKey)
         return;
-    const viewport = findLocalEditorRightDockScrollViewport(tab, inspectorPanel, renderingPanel, markersPanel);
+    const viewport = findLocalEditorRightDockScrollViewport(tab, inspectorPanel, renderingPanel, markersPanel, pluginsPanel);
     if (!viewport)
         return;
     viewport.scrollLeft = snapshot.scrollLeft;
@@ -1025,6 +1061,72 @@ const PERFORMANCE_MONITOR_METRIC_GROUPS = [
             },
         ],
     },
+    {
+        title: 'Projection roles · active/total',
+        description: '按编辑器 projection 角色细分，值格式为 active/total。',
+        metrics: [
+            {
+                key: 'projectionRoleAssetInstanceMesh',
+                label: 'Asset instance',
+                description: '资产 InstancedMesh：共享 source mesh 的可渲染模型实例。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'assetInstanceMesh'),
+            },
+            {
+                key: 'projectionRoleAssetSourceMesh',
+                label: 'Asset source',
+                description: '资产 source mesh：被 InstancedMesh 引用的源 mesh，通常不应作为可见实例压力解读。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'assetSourceMesh'),
+            },
+            {
+                key: 'projectionRoleAssetWrapperMesh',
+                label: 'Asset wrapper',
+                description: '资产 wrapper mesh：GLB 层级里的 0 顶点 Mesh。Babylon 无法将这类节点 instance，会保留为 clone 层级。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'assetWrapperMesh'),
+            },
+            {
+                key: 'projectionRoleAssetCloneMesh',
+                label: 'Asset clone',
+                description: '资产 clone mesh：有几何、不是 source mesh、也不是 InstancedMesh 的资产 Mesh。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'assetCloneMesh'),
+            },
+            {
+                key: 'projectionRoleAssetGeneratedMesh',
+                label: 'Asset generated',
+                description: '资产适配生成的非 InstancedMesh 几何，例如 texture/decal projection mesh。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'assetGeneratedMesh'),
+            },
+            {
+                key: 'projectionRoleAssetSelectionProxy',
+                label: 'Selection proxy',
+                description: '资产选择代理 mesh：用于编辑器 picking / bounds，不代表真实模型渲染几何。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'assetSelectionProxy'),
+            },
+            {
+                key: 'projectionRolePrimitiveMesh',
+                label: 'Primitive',
+                description: '编辑器基础体 projection mesh。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'primitiveMesh'),
+            },
+            {
+                key: 'projectionRoleStaticProjectedShadow',
+                label: 'Shadow',
+                description: '静态投影阴影相关 mesh。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'staticProjectedShadow'),
+            },
+            {
+                key: 'projectionRoleHelperMesh',
+                label: 'Helper',
+                description: '编辑器辅助 mesh，例如网格、天空、相机和灯光 helper。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'helperMesh'),
+            },
+            {
+                key: 'projectionRoleUncategorized',
+                label: 'Other',
+                description: '暂未识别 projection 角色的 mesh。',
+                format: stats => formatPerformanceProjectionRoleBreakdown(stats, 'uncategorized'),
+            },
+        ],
+    },
 ];
 const PREFAB_IMPORT_STATS_METRICS = [
     {
@@ -1653,6 +1755,9 @@ function formatPerformanceClassBreakdown(stats, key) {
 function formatPerformanceCategoryBreakdown(stats, key) {
     return formatPerformanceActiveTotal(stats?.activeMeshCategoryCounts?.[key] ?? null, stats?.meshCategoryCounts?.[key] ?? null);
 }
+function formatPerformanceProjectionRoleBreakdown(stats, key) {
+    return formatPerformanceActiveTotal(stats?.activeProjectionRoleCounts?.[key] ?? null, stats?.projectionRoleCounts?.[key] ?? null);
+}
 function formatPerformanceActiveTotal(active, total) {
     if (!isFinitePerformanceNumber(active) || !isFinitePerformanceNumber(total))
         return '--';
@@ -2367,6 +2472,66 @@ function findRenderingPropertyForInput(state, input) {
     };
 }
 export function createLocalEditorBrowserUi(options = {}) {
+    const doc = options.document ?? document;
+    const root = options.root ?? doc.body;
+    const rootOwnership = createLocalEditorRootOwnership(root);
+    const completedCleanup = new Set();
+    const removeMountedRootChildren = () => rootOwnership.removeAll();
+    const cleanupOperations = [{
+            key: 'root-children',
+            operation: removeMountedRootChildren,
+        }];
+    const construction = {
+        addCleanup(key, operation) {
+            cleanupOperations.push({ key, operation });
+        },
+        appendRootChild(child) {
+            return rootOwnership.append(child);
+        },
+        removeMountedRootChildren,
+    };
+    const retryCleanup = () => {
+        const errors = [];
+        for (let index = cleanupOperations.length - 1; index >= 0; index -= 1) {
+            const cleanup = cleanupOperations[index];
+            if (completedCleanup.has(cleanup.key))
+                continue;
+            try {
+                cleanup.operation();
+                completedCleanup.add(cleanup.key);
+            }
+            catch (error) {
+                errors.push(error);
+            }
+        }
+        if (errors.length > 0) {
+            const error = new Error('Local Editor browser UI construction cleanup failed.');
+            error.errors = errors;
+            throw error;
+        }
+    };
+    try {
+        const ui = createLocalEditorBrowserUiImplementation(options, construction);
+        cleanupOperations.length = 0;
+        completedCleanup.clear();
+        return ui;
+    }
+    catch (constructionError) {
+        try {
+            retryCleanup();
+        }
+        catch (cleanupError) {
+            const error = new Error('Local Editor browser UI construction and rollback failed.');
+            Object.defineProperties(error, {
+                errors: { value: [constructionError, cleanupError], enumerable: true },
+                retryCleanup: { value: retryCleanup, enumerable: false },
+            });
+            throw error;
+        }
+        throw constructionError;
+    }
+}
+function createLocalEditorBrowserUiImplementation(options, construction) {
     const doc = options.document ?? document;
     const root = options.root ?? doc.body;
     const callbacks = options.callbacks ?? {};
@@ -2376,19 +2541,23 @@ export function createLocalEditorBrowserUi(options = {}) {
     const inputRouter = createLocalEditorWorkbenchInputRouter(doc, {
         isShortcutReserved: options.input?.isShortcutReserved,
     });
+    construction.addCleanup('input-router', () => inputRouter.dispose());
     const modalDialog = createLocalEditorModalDialog({
         doc,
         host: root,
         getTheme: () => activeTheme,
         onOpenChange: open => inputRouter.setModalOpen(open, 'data-safety'),
     });
+    construction.addCleanup('modal-dialog', () => modalDialog.dispose());
     const contextMenu = createLocalEditorContextMenuController(doc, (open) => {
         inputRouter.setContextMenuOpen(open);
     }, activeTheme);
+    construction.addCleanup('context-menu', () => contextMenu.dispose());
     const tooltipSurfaces = new Set();
     const tooltipController = createLocalEditorTooltipController(doc, root, activeTheme, {
         scope: () => tooltipSurfaces,
     });
+    construction.addCleanup('tooltip-controller', () => tooltipController.dispose());
     let currentState = null;
     let inspectorFilter = '';
     const lockedInspectorVectorGroups = new Set();
@@ -2428,7 +2597,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     const enterEditorButton = LocalEditorShared.createButton(doc, '进入编辑场景', { icon: 'execute' });
     hostChrome.appendChild(hostModeLabel);
     hostChrome.appendChild(enterEditorButton);
-    root.appendChild(hostChrome);
+    construction.appendRootChild(hostChrome);
     tooltipSurfaces.add(hostChrome);
     const dirtyBadge = doc.createElement('span');
     dirtyBadge.dataset.editorDirtyBadge = 'true';
@@ -2509,13 +2678,15 @@ export function createLocalEditorBrowserUi(options = {}) {
     const inspectorPanel = createWorkbenchPanelContent(doc);
     const renderingPanel = createWorkbenchPanelContent(doc);
     const markersPanel = createWorkbenchPanelContent(doc);
+    const pluginsPanel = createWorkbenchPanelContent(doc);
     workbench.leftDock.appendChild(leftDockTabs);
     workbench.leftDock.appendChild(hierarchyPanel);
     workbench.rightDock.appendChild(rightDockTabs);
     workbench.rightDock.appendChild(inspectorPanel);
     workbench.rightDock.appendChild(renderingPanel);
     workbench.rightDock.appendChild(markersPanel);
-    root.appendChild(workbench.root);
+    workbench.rightDock.appendChild(pluginsPanel);
+    construction.appendRootChild(workbench.root);
     tooltipSurfaces.add(workbench.root);
     const workbenchLayoutController = createLocalEditorWorkbenchLayoutController(doc, workbench, {
         onAfterApply(layout) {
@@ -2524,6 +2695,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             }
         },
     });
+    construction.addCleanup('workbench-layout-controller', () => workbenchLayoutController.dispose());
     const findAssetBrowserScrollViewport = () => (assetPanel.querySelector('[data-editor-asset-browser-scroll-viewport]'));
     const assetBrowserViewportReveal = createLocalEditorViewportRevealController({
         getViewport: findAssetBrowserScrollViewport,
@@ -3149,13 +3321,13 @@ export function createLocalEditorBrowserUi(options = {}) {
     workbench.sceneFrame.appendChild(performanceMonitorOverlay.root);
     workbench.sceneFrame.appendChild(prefabStagePreviewLayout.root);
     workbench.sceneFrame.appendChild(coordinateAxesOverlay.root);
-    root.appendChild(localTestMenu);
-    root.appendChild(toolbarOverflowMenu);
-    root.appendChild(staticShadowBakePopover);
-    root.appendChild(snapSettingsPopover);
-    root.appendChild(placementSettingsPopover);
-    root.appendChild(transformActionPopover);
-    root.appendChild(overlaySettingsPopover);
+    construction.appendRootChild(localTestMenu);
+    construction.appendRootChild(toolbarOverflowMenu);
+    construction.appendRootChild(staticShadowBakePopover);
+    construction.appendRootChild(snapSettingsPopover);
+    construction.appendRootChild(placementSettingsPopover);
+    construction.appendRootChild(transformActionPopover);
+    construction.appendRootChild(overlaySettingsPopover);
     tooltipSurfaces.add(localTestMenu);
     tooltipSurfaces.add(toolbarOverflowMenu);
     tooltipSurfaces.add(staticShadowBakePopover);
@@ -3174,11 +3346,11 @@ export function createLocalEditorBrowserUi(options = {}) {
         'box-shadow:var(--fps-editor-box-select-shadow)',
         'pointer-events:none',
     ].join(';');
-    root.appendChild(boxSelectionOverlay);
+    construction.appendRootChild(boxSelectionOverlay);
     tooltipSurfaces.add(boxSelectionOverlay);
     const shortcutHelpPanel = createLocalEditorShortcutHelpPanel(doc);
     shortcutHelpPanel.classList.add(LOCAL_EDITOR_THEME_CLASS);
-    root.appendChild(shortcutHelpPanel);
+    construction.appendRootChild(shortcutHelpPanel);
     tooltipSurfaces.add(shortcutHelpPanel);
     const assetPreviewModal = doc.createElement('div');
     assetPreviewModal.classList.add(LOCAL_EDITOR_THEME_CLASS);
@@ -3255,7 +3427,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     assetPreviewDialog.appendChild(assetPreviewBody);
     assetPreviewDialog.appendChild(assetPreviewMeta);
     assetPreviewModal.appendChild(assetPreviewDialog);
-    root.appendChild(assetPreviewModal);
+    construction.appendRootChild(assetPreviewModal);
     tooltipSurfaces.add(assetPreviewModal);
     const assetPickerModal = doc.createElement('div');
     assetPickerModal.classList.add(LOCAL_EDITOR_THEME_CLASS);
@@ -3336,7 +3508,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     assetPickerDialog.appendChild(assetPickerSearch);
     assetPickerDialog.appendChild(assetPickerList);
     assetPickerModal.appendChild(assetPickerDialog);
-    root.appendChild(assetPickerModal);
+    construction.appendRootChild(assetPickerModal);
     tooltipSurfaces.add(assetPickerModal);
     function applyThemeToSurfaces() {
         applyLocalEditorTheme(hostChrome, activeTheme);
@@ -3585,6 +3757,12 @@ export function createLocalEditorBrowserUi(options = {}) {
     let toolbarOverflowOpen = false;
     let toolbarOverflowRaf = null;
     let staticShadowBakePopoverOpen = false;
+    construction.addCleanup('toolbar-overflow-frame', () => {
+        if (toolbarOverflowRaf != null) {
+            doc.defaultView?.cancelAnimationFrame(toolbarOverflowRaf);
+            toolbarOverflowRaf = null;
+        }
+    });
     function restoreToolbarOverflowItemStyle(item) {
         const original = toolbarOverflowOriginalStyles.get(item.element);
         if (!original)
@@ -3842,11 +4020,18 @@ export function createLocalEditorBrowserUi(options = {}) {
     const toolbarResizeObserver = ResizeObserverCtor
         ? new ResizeObserverCtor(() => scheduleToolbarOverflowLayout())
         : null;
+    construction.addCleanup('toolbar-resize-observer', () => toolbarResizeObserver?.disconnect());
     toolbarOverflowButton.addEventListener('click', onToolbarOverflowButtonClick);
     localTestButton.addEventListener('click', onLocalTestButtonClick);
     doc.addEventListener('pointerdown', onToolbarOverflowPointerDown);
+    construction.addCleanup('toolbar-overflow-pointerdown', () => {
+        doc.removeEventListener('pointerdown', onToolbarOverflowPointerDown);
+    });
     toolbarResizeObserver?.observe(sceneToolOverlay);
     doc.defaultView?.addEventListener('resize', scheduleToolbarOverflowLayout);
+    construction.addCleanup('toolbar-overflow-resize', () => {
+        doc.defaultView?.removeEventListener('resize', scheduleToolbarOverflowLayout);
+    });
     applyThemeToSurfaces();
     updateThemeToggleButton();
     enterEditorButton.addEventListener('click', () => callbacks.onEnterEditor?.());
@@ -4829,6 +5014,7 @@ export function createLocalEditorBrowserUi(options = {}) {
                 closeAssetPreviewModal();
         },
     });
+    construction.addCleanup('hierarchy-controller', () => hierarchyController.dispose());
     assetPanel.addEventListener('input', (event) => {
         const input = event.target instanceof HTMLInputElement ? event.target : null;
         if (input?.dataset.editorAssetFilter == null)
@@ -5263,6 +5449,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         }
     };
     doc.addEventListener('keydown', onKeyDown);
+    construction.addCleanup('document-keydown', () => doc.removeEventListener('keydown', onKeyDown));
     function formatSnapStepInputValue(snap, kind) {
         const value = kind === 'move'
             ? snap.moveStep
@@ -5331,8 +5518,6 @@ export function createLocalEditorBrowserUi(options = {}) {
                     count: stage.inspectorObject.targetIds.length,
                     activeId: stage.inspectorObject.activeId,
                 },
-                serializedObject: null,
-                serializedMultiObject: null,
                 inspectorObject: stage.inspectorObject,
                 inspectorMultiObject: null,
             }, inspectorFilter, {
@@ -5555,18 +5740,18 @@ export function createLocalEditorBrowserUi(options = {}) {
         };
         renderPreviewState(currentState);
         if (shouldRenderInspectorPreview && panelRegistry.getRightDockTab() === 'inspector') {
-            const rightDockScrollSnapshot = captureLocalEditorRightDockScrollSnapshot(currentState, 'inspector', inspectorFilter, inspectorPanel, renderingPanel, markersPanel);
+            const rightDockScrollSnapshot = captureLocalEditorRightDockScrollSnapshot(currentState, 'inspector', inspectorFilter, inspectorPanel, renderingPanel, markersPanel, pluginsPanel);
             LocalEditorPanels.renderInspectorPanel(doc, inspectorPanel, currentState, inspectorFilter, {
                 ...options.inspector,
                 lockedVectorGroups: lockedInspectorVectorGroups,
             });
-            restoreLocalEditorRightDockScrollSnapshot(rightDockScrollSnapshot, currentState, 'inspector', inspectorFilter, inspectorPanel, renderingPanel, markersPanel);
+            restoreLocalEditorRightDockScrollSnapshot(rightDockScrollSnapshot, currentState, 'inspector', inspectorFilter, inspectorPanel, renderingPanel, markersPanel, pluginsPanel);
         }
     };
     const render = (state) => {
         const previousState = currentState;
         const previousRightTab = panelRegistry.getRightDockTab();
-        const rightDockScrollSnapshot = captureLocalEditorRightDockScrollSnapshot(previousState, previousRightTab, inspectorFilter, inspectorPanel, renderingPanel, markersPanel);
+        const rightDockScrollSnapshot = captureLocalEditorRightDockScrollSnapshot(previousState, previousRightTab, inspectorFilter, inspectorPanel, renderingPanel, markersPanel, pluginsPanel);
         currentState = state;
         const focusSnapshot = captureLocalEditorEditableFocus(doc);
         const inEditor = state.mode === 'editor';
@@ -5804,6 +5989,8 @@ export function createLocalEditorBrowserUi(options = {}) {
             rightDockTabs.style.display = rightDockVisibility.tabsDisplay;
             inspectorPanel.style.display = rightDockVisibility.inspectorDisplay;
             renderingPanel.style.display = rightDockVisibility.renderingDisplay;
+            markersPanel.style.display = rightDockVisibility.markersDisplay;
+            pluginsPanel.style.display = rightDockVisibility.pluginsDisplay;
             hierarchyController.render(state);
             renderPrefabStagePropertiesPanel(prefabStage);
             LocalEditorPanels.renderWorkbenchBottomDockPanel(doc, assetPanel, state, activeBottomTab, panelRegistry.getPanels('bottom'), assetBrowserTab);
@@ -5841,9 +6028,11 @@ export function createLocalEditorBrowserUi(options = {}) {
         inspectorPanel.dataset.editorPanelId = activeRightTab === 'inspector' ? rightDescriptor?.id ?? 'inspector' : 'inspector';
         renderingPanel.dataset.editorPanelId = activeRightTab === 'rendering' ? rightDescriptor?.id ?? 'rendering' : 'rendering';
         markersPanel.dataset.editorPanelId = activeRightTab === 'markers' ? rightDescriptor?.id ?? 'markers' : 'markers';
+        pluginsPanel.dataset.editorPanelId = activeRightTab === 'plugins' ? rightDescriptor?.id ?? 'plugins' : 'plugins';
         inspectorPanel.style.display = rightDockVisibility.inspectorDisplay;
         renderingPanel.style.display = rightDockVisibility.renderingDisplay;
-        markersPanel.style.display = activeRightTab === 'markers' ? '' : 'none';
+        markersPanel.style.display = rightDockVisibility.markersDisplay;
+        pluginsPanel.style.display = rightDockVisibility.pluginsDisplay;
         LocalEditorPanels.renderWorkbenchLeftDockTabs(doc, leftDockTabs, 'hierarchy', panelRegistry.getPanels('left'));
         hierarchyController.render(state);
         LocalEditorPanels.renderWorkbenchBottomDockPanel(doc, assetPanel, state, activeBottomTab, panelRegistry.getPanels('bottom'), assetBrowserTab);
@@ -5869,12 +6058,17 @@ export function createLocalEditorBrowserUi(options = {}) {
         else if (activeRightTab === 'rendering') {
             LocalEditorPanels.renderRenderingPanel(doc, renderingPanel, state);
         }
-        else {
+        else if (activeRightTab === 'markers') {
             LocalEditorPanels.renderMarkerPanel(doc, markersPanel, state);
         }
+        else {
+            renderLocalEditorPluginPanel(doc, pluginsPanel, state.pluginPanel ?? null);
+        }
         restoreLocalEditorEditableFocus(doc, focusSnapshot);
-        restoreLocalEditorRightDockScrollSnapshot(rightDockScrollSnapshot, state, activeRightTab, inspectorFilter, inspectorPanel, renderingPanel, markersPanel);
+        restoreLocalEditorRightDockScrollSnapshot(rightDockScrollSnapshot, state, activeRightTab, inspectorFilter, inspectorPanel, renderingPanel, markersPanel, pluginsPanel);
     };
+    const completedCleanup = new Set();
+    let uiDisposed = false;
     return {
         update(state) {
             render(state);
@@ -5906,39 +6100,69 @@ export function createLocalEditorBrowserUi(options = {}) {
             return activeTheme;
         },
         dispose() {
-            if (toolbarOverflowRaf != null) {
-                doc.defaultView?.cancelAnimationFrame(toolbarOverflowRaf);
-                toolbarOverflowRaf = null;
+            if (uiDisposed)
+                return;
+            const errors = [];
+            const run = (key, operation) => {
+                if (completedCleanup.has(key))
+                    return;
+                try {
+                    operation();
+                    completedCleanup.add(key);
+                }
+                catch (error) {
+                    errors.push(error);
+                }
+            };
+            run('toolbar-overflow-frame', () => {
+                if (toolbarOverflowRaf != null) {
+                    doc.defaultView?.cancelAnimationFrame(toolbarOverflowRaf);
+                    toolbarOverflowRaf = null;
+                }
+            });
+            run('toolbar-resize-observer', () => toolbarResizeObserver?.disconnect());
+            run('toolbar-overflow-click', () => {
+                toolbarOverflowButton.removeEventListener('click', onToolbarOverflowButtonClick);
+            });
+            run('local-test-click', () => localTestButton.removeEventListener('click', onLocalTestButtonClick));
+            run('toolbar-overflow-pointerdown', () => {
+                doc.removeEventListener('pointerdown', onToolbarOverflowPointerDown);
+            });
+            run('toolbar-overflow-resize', () => {
+                doc.defaultView?.removeEventListener('resize', scheduleToolbarOverflowLayout);
+            });
+            run('host-chrome', () => hostChrome.remove());
+            run('workbench-root', () => workbench.root.remove());
+            run('local-test-menu', () => localTestMenu.remove());
+            run('toolbar-overflow-menu', () => toolbarOverflowMenu.remove());
+            run('static-shadow-bake-popover', () => staticShadowBakePopover.remove());
+            run('snap-settings-popover', () => snapSettingsPopover.remove());
+            run('placement-settings-popover', () => placementSettingsPopover.remove());
+            run('transform-action-popover', () => transformActionPopover.remove());
+            run('overlay-settings-popover', () => overlaySettingsPopover.remove());
+            run('spatial-overlay', () => spatialOverlay.root.remove());
+            run('measurement-overlay', () => measurementOverlay.root.remove());
+            run('scene-frame-rate-overlay', () => sceneFrameRateOverlay.root.remove());
+            run('performance-monitor-overlay', () => performanceMonitorOverlay.root.remove());
+            run('prefab-stage-preview-layout', () => prefabStagePreviewLayout.root.remove());
+            run('box-selection-overlay', () => boxSelectionOverlay.remove());
+            run('shortcut-help-panel', () => shortcutHelpPanel.remove());
+            run('asset-preview-modal', () => assetPreviewModal.remove());
+            run('asset-picker-modal', () => assetPickerModal.remove());
+            run('hierarchy-controller', () => hierarchyController.dispose());
+            run('workbench-layout-controller', () => workbenchLayoutController.dispose());
+            run('tooltip-controller', () => tooltipController.dispose());
+            run('context-menu', () => contextMenu.dispose());
+            run('modal-dialog', () => modalDialog.dispose());
+            run('input-router', () => inputRouter.dispose());
+            run('document-keydown', () => doc.removeEventListener('keydown', onKeyDown));
+            run('owned-root-children', () => construction.removeMountedRootChildren());
+            if (errors.length > 0) {
+                const error = new Error('Local Editor browser UI cleanup failed.');
+                error.errors = errors;
+                throw error;
             }
-            toolbarResizeObserver?.disconnect();
-            toolbarOverflowButton.removeEventListener('click', onToolbarOverflowButtonClick);
-            localTestButton.removeEventListener('click', onLocalTestButtonClick);
-            doc.removeEventListener('pointerdown', onToolbarOverflowPointerDown);
-            doc.defaultView?.removeEventListener('resize', scheduleToolbarOverflowLayout);
-            hostChrome.remove();
-            workbench.root.remove();
-            localTestMenu.remove();
-            toolbarOverflowMenu.remove();
-            snapSettingsPopover.remove();
-            placementSettingsPopover.remove();
-            transformActionPopover.remove();
-            overlaySettingsPopover.remove();
-            spatialOverlay.root.remove();
-            measurementOverlay.root.remove();
-            sceneFrameRateOverlay.root.remove();
-            performanceMonitorOverlay.root.remove();
-            prefabStagePreviewLayout.root.remove();
-            boxSelectionOverlay.remove();
-            shortcutHelpPanel.remove();
-            assetPreviewModal.remove();
-            assetPickerModal.remove();
-            hierarchyController.dispose();
-            workbenchLayoutController.dispose();
-            tooltipController.dispose();
-            contextMenu.dispose();
-            modalDialog.dispose();
-            inputRouter.dispose();
-            doc.removeEventListener('keydown', onKeyDown);
+            uiDisposed = true;
         },
     };
 }