@fps-games/editor 0.1.1-beta.4 → 0.1.1-beta.6

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

@@ -2,7 +2,7 @@ import * as LocalEditorPanels from './local-editor-ui-panels';
 import { createLocalEditorHierarchyController } from './local-editor-ui-hierarchy-controller';
 import { createLocalEditorContextMenuController } from './local-editor-ui-context-menu';
 import { DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS, DEFAULT_EDITOR_TRANSFORM_TOOL_DESCRIPTORS, } from '@fps-games/editor-core';
-export { createLocalEditorHierarchyBlankMenu, createLocalEditorHierarchyDeleteShortcutAction, createLocalEditorHierarchyNodeMenu, } from './local-editor-ui-hierarchy-actions';
+export { createLocalEditorHierarchyBlankMenu, createLocalEditorHierarchyCopyShortcutAction, createLocalEditorHierarchyDeleteShortcutAction, createLocalEditorHierarchyDuplicateShortcutAction, createLocalEditorHierarchyNodeMenu, createLocalEditorHierarchyPasteShortcutAction, } from './local-editor-ui-hierarchy-actions';
 export { createLocalEditorHierarchyController, } from './local-editor-ui-hierarchy-controller';
 export { canLocalEditorHierarchyNodeHaveChildren, createLocalEditorHierarchyTreeModel, isLocalEditorHierarchyNodeMovable, } from './local-editor-ui-hierarchy-tree';
 export { createLocalEditorContextMenuController, } from './local-editor-ui-context-menu';
@@ -10,9 +10,11 @@ import { createLocalEditorWorkbenchInputRouter } from './local-editor-ui-input-r
 import { createLocalEditorPanelRegistry } from './local-editor-ui-panel-registry';
 import * as LocalEditorShared from './local-editor-ui-shared';
 import { createShortcutHelpPanel as createLocalEditorShortcutHelpPanel } from './local-editor-ui-shortcuts';
-import { ensureLocalEditorTheme, LOCAL_EDITOR_THEME_CLASS } from './local-editor-ui-theme';
-import { createDefaultLocalEditorWorkbenchLayout, createLocalEditorWorkbench, createSceneHeaderToolbar, createWorkbenchPanelContent, } from './local-editor-ui-workbench';
+import { applyLocalEditorTheme, ensureLocalEditorTheme, LOCAL_EDITOR_THEME_CLASS, normalizeLocalEditorThemeName, } from './local-editor-ui-theme';
+import { createDefaultLocalEditorWorkbenchLayout, createLocalEditorWorkbenchLayoutController, createLocalEditorWorkbench, createSceneHeaderToolbar, createWorkbenchPanelContent, } from './local-editor-ui-workbench';
 export { applyLocalEditorBrowserInspectorControlBinding, createLocalEditorBrowserInspectorControlRegistry, formatLocalEditorBrowserInspectorValue, resolveLocalEditorBrowserInspectorControlRegistration, } from './local-editor-ui-panels';
+export { DEFAULT_LOCAL_EDITOR_THEME, LOCAL_EDITOR_THEME_CLASS, applyLocalEditorTheme, normalizeLocalEditorThemeName, } from './local-editor-ui-theme';
+export { LOCAL_EDITOR_ICON_NAMES, createLocalEditorIcon, isLocalEditorIconName, resolveLocalEditorIconName, } from './local-editor-ui-icons';
 function readInspectorInputValue(input) {
     const control = input.dataset.serializedControl;
     const valueType = input.dataset.serializedValueType;
@@ -50,6 +52,21 @@ function readInspectorInputValue(input) {
     }
     return input.value;
 }
+const TRANSFORM_TOOL_ICONS = {
+    select: 'select',
+    move: 'move',
+    rotate: 'rotate',
+    scale: 'scale',
+};
+const TRANSFORM_SPACE_ICONS = {
+    world: 'world',
+    local: 'local',
+};
+const PLACEMENT_MODE_ICONS = {
+    off: 'place-off',
+    ground: 'place-ground',
+    surface: 'place-surface',
+};
 function readInspectorVectorInputValue(input) {
     const wrapper = input.closest('[data-inspector-vector-control]');
     const values = {};
@@ -99,11 +116,13 @@ export function createLocalEditorBrowserUi(options = {}) {
     const doc = options.document ?? document;
     const root = options.root ?? doc.body;
     const callbacks = options.callbacks ?? {};
+    const localTestActionsEnabled = options.localTestActions === true;
     ensureLocalEditorTheme(doc);
+    let activeTheme = normalizeLocalEditorThemeName(options.theme);
     const inputRouter = createLocalEditorWorkbenchInputRouter(doc);
     const contextMenu = createLocalEditorContextMenuController(doc, (open) => {
         inputRouter.setContextMenuOpen(open);
-    });
+    }, activeTheme);
     let currentState = null;
     let inspectorFilter = '';
     const workbenchLayout = createDefaultLocalEditorWorkbenchLayout();
@@ -125,7 +144,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         'border:1px solid var(--fps-editor-border)',
         'border-radius:3px',
         'background:var(--fps-editor-chrome)',
-        'box-shadow:0 10px 28px rgba(0,0,0,0.24)',
+        'box-shadow:var(--fps-editor-shadow-panel)',
         'font-family:var(--fps-editor-font)',
         'color:var(--fps-editor-text)',
         'font-size:12px',
@@ -138,7 +157,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         'font-weight:800',
         'white-space:nowrap',
     ].join(';');
-    const enterEditorButton = LocalEditorShared.createButton(doc, '进入编辑场景');
+    const enterEditorButton = LocalEditorShared.createButton(doc, '进入编辑场景', { icon: 'execute' });
     hostChrome.appendChild(hostModeLabel);
     hostChrome.appendChild(enterEditorButton);
     root.appendChild(hostChrome);
@@ -149,18 +168,50 @@ export function createLocalEditorBrowserUi(options = {}) {
         'align-items:center',
         'padding:0 7px',
         'border-radius:999px',
-        'background:rgba(248,81,73,0.16)',
-        'border:1px solid rgba(248,81,73,0.45)',
-        'color:#ffd7d5',
+        'background:var(--fps-editor-danger-soft)',
+        'border:1px solid var(--fps-editor-danger-border)',
+        'color:var(--fps-editor-danger-text)',
         'font-size:11px',
         'font-weight:800',
     ].join(';');
     dirtyBadge.textContent = '未保存';
-    const saveButton = LocalEditorShared.createButton(doc, '保存场景');
-    const saveAndRunButton = LocalEditorShared.createButton(doc, '保存并运行');
-    const discardRunButton = LocalEditorShared.createButton(doc, '放弃并运行');
-    const undoButton = LocalEditorShared.createButton(doc, '撤销');
-    const redoButton = LocalEditorShared.createButton(doc, '重做');
+    const saveButton = LocalEditorShared.createButton(doc, '保存场景', { icon: 'save' });
+    const saveAndRunButton = LocalEditorShared.createButton(doc, '保存并运行', { icon: 'execute' });
+    const discardRunButton = LocalEditorShared.createButton(doc, '放弃并运行', { icon: 'discard' });
+    const localTestButton = LocalEditorShared.createButton(doc, '本地测试', { icon: 'execute' });
+    localTestButton.dataset.editorLocalTestToggle = 'true';
+    localTestButton.title = '打开本地测试操作';
+    const localTestMenu = doc.createElement('div');
+    localTestMenu.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    localTestMenu.dataset.editorLocalTestMenu = 'true';
+    localTestMenu.style.cssText = [
+        'position:fixed',
+        'z-index:2147483641',
+        'display:none',
+        'flex-direction:column',
+        'gap:6px',
+        'min-width:150px',
+        'padding:8px',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-panel)',
+        'box-shadow:var(--fps-editor-shadow-popover)',
+        'pointer-events:auto',
+    ].join(';');
+    for (const button of [saveButton, saveAndRunButton, discardRunButton]) {
+        button.style.justifyContent = 'flex-start';
+        button.style.width = '100%';
+        localTestMenu.appendChild(button);
+    }
+    const localTestGroup = doc.createElement('div');
+    localTestGroup.style.cssText = [
+        `display:${localTestActionsEnabled ? 'flex' : 'none'}`,
+        'align-items:center',
+        'gap:4px',
+    ].join(';');
+    localTestGroup.appendChild(localTestButton);
+    const undoButton = LocalEditorShared.createButton(doc, '撤销', { icon: 'undo' });
+    const redoButton = LocalEditorShared.createButton(doc, '重做', { icon: 'redo' });
     let helpOpen = false;
     const status = doc.createElement('span');
     status.style.cssText = [
@@ -180,6 +231,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     workbench.leftDock.appendChild(hierarchyPanel);
     workbench.rightDock.appendChild(inspectorPanel);
     root.appendChild(workbench.root);
+    const workbenchLayoutController = createLocalEditorWorkbenchLayoutController(doc, workbench);
     const sceneToolOverlay = createSceneHeaderToolbar(doc);
     const sceneTitle = doc.createElement('div');
     sceneTitle.textContent = 'Preview';
@@ -197,6 +249,14 @@ export function createLocalEditorBrowserUi(options = {}) {
     ].join(';');
     const sceneQuickActions = doc.createElement('div');
     sceneQuickActions.style.cssText = 'display:flex;align-items:center;gap:4px';
+    const sceneUtilityActions = doc.createElement('div');
+    sceneUtilityActions.style.cssText = [
+        'display:flex',
+        'align-items:center',
+        'gap:4px',
+        'padding-left:8px',
+        'border-left:1px solid var(--fps-editor-divider)',
+    ].join(';');
     const toolGroup = doc.createElement('div');
     toolGroup.style.cssText = [
         'display:flex',
@@ -209,7 +269,9 @@ export function createLocalEditorBrowserUi(options = {}) {
     const transformToolDescriptors = Object.values(DEFAULT_EDITOR_TRANSFORM_TOOL_DESCRIPTORS);
     for (const descriptor of transformToolDescriptors) {
         const shortcut = descriptor.shortcut ? `${descriptor.shortcut} ` : '';
-        const button = LocalEditorShared.createButton(doc, `${shortcut}${descriptor.label}`);
+        const button = LocalEditorShared.createButton(doc, `${shortcut}${descriptor.label}`, {
+            icon: TRANSFORM_TOOL_ICONS[descriptor.tool],
+        });
         button.dataset.transformTool = descriptor.tool;
         button.title = descriptor.handles.length > 0
             ? `${descriptor.label} · ${descriptor.handles.map(handle => handle.label).join(' / ')}`
@@ -226,8 +288,8 @@ export function createLocalEditorBrowserUi(options = {}) {
         'border-left:1px solid var(--fps-editor-divider)',
     ].join(';');
     const spaceButtons = {
-        world: LocalEditorShared.createButton(doc, '世界'),
-        local: LocalEditorShared.createButton(doc, '本地'),
+        world: LocalEditorShared.createButton(doc, '世界', { icon: TRANSFORM_SPACE_ICONS.world }),
+        local: LocalEditorShared.createButton(doc, '本地', { icon: TRANSFORM_SPACE_ICONS.local }),
     };
     for (const [space, button] of Object.entries(spaceButtons)) {
         button.dataset.transformSpace = space;
@@ -249,7 +311,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         'padding-left:8px',
         'border-left:1px solid var(--fps-editor-divider)',
     ].join(';');
-    const snapButton = LocalEditorShared.createButton(doc, '吸附');
+    const snapButton = LocalEditorShared.createButton(doc, '吸附', { icon: 'snap' });
     snapButton.dataset.transformSnapToggle = 'true';
     snapButton.title = '移动 / 旋转 / 缩放吸附';
     const snapStepInputs = new Map();
@@ -293,9 +355,9 @@ export function createLocalEditorBrowserUi(options = {}) {
     placementLabel.textContent = '放置';
     placementLabel.style.cssText = 'color:var(--fps-editor-muted);font-size:11px;font-weight:900;white-space:nowrap';
     const placementButtons = {
-        off: LocalEditorShared.createButton(doc, '关'),
-        ground: LocalEditorShared.createButton(doc, '地'),
-        surface: LocalEditorShared.createButton(doc, '表'),
+        off: LocalEditorShared.createButton(doc, '关', { icon: PLACEMENT_MODE_ICONS.off }),
+        ground: LocalEditorShared.createButton(doc, '地', { icon: PLACEMENT_MODE_ICONS.ground }),
+        surface: LocalEditorShared.createButton(doc, '表', { icon: PLACEMENT_MODE_ICONS.surface }),
     };
     placementButtons.off.title = '关闭放置模式';
     placementButtons.ground.title = '放置到 XZ 地面';
@@ -342,7 +404,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         transformActionSelect.appendChild(option);
     }
     transformActionSelect.value = selectedTransformAction;
-    const transformActionButton = LocalEditorShared.createButton(doc, '执行');
+    const transformActionButton = LocalEditorShared.createButton(doc, '执行', { icon: 'execute' });
     transformActionButton.dataset.transformActionRun = 'true';
     transformActionButton.title = '对当前多选执行 Transform 操作';
     actionGroup.appendChild(transformActionSelect);
@@ -368,15 +430,17 @@ export function createLocalEditorBrowserUi(options = {}) {
         'font-size:11px',
     ].join(';');
     sceneMouseHint.textContent = '左键选择 · 空白拖拽框选 · 中键平移 · Alt+左键环绕 · 右键飞行 · 滚轮缩放';
-    const sceneHelpButton = LocalEditorShared.createButton(doc, '快捷键');
+    const themeToggleButton = LocalEditorShared.createButton(doc, '主题', { icon: 'theme' });
+    themeToggleButton.dataset.editorThemeToggle = 'true';
+    themeToggleButton.style.padding = '5px 7px';
+    const sceneHelpButton = LocalEditorShared.createButton(doc, '快捷键', { icon: 'help' });
     sceneHelpButton.style.padding = '5px 7px';
-    sceneQuickActions.appendChild(saveButton);
-    sceneQuickActions.appendChild(saveAndRunButton);
-    sceneQuickActions.appendChild(discardRunButton);
+    sceneQuickActions.appendChild(localTestGroup);
     sceneQuickActions.appendChild(undoButton);
     sceneQuickActions.appendChild(redoButton);
     sceneQuickActions.appendChild(dirtyBadge);
-    sceneQuickActions.appendChild(sceneHelpButton);
+    sceneUtilityActions.appendChild(themeToggleButton);
+    sceneUtilityActions.appendChild(sceneHelpButton);
     const cameraPreviewGroup = doc.createElement('div');
     cameraPreviewGroup.style.cssText = [
         'display:flex',
@@ -385,12 +449,37 @@ export function createLocalEditorBrowserUi(options = {}) {
         'padding-left:8px',
         'border-left:1px solid var(--fps-editor-divider)',
     ].join(';');
-    const sceneCameraButton = LocalEditorShared.createButton(doc, 'Scene Camera');
+    const sceneCameraButton = LocalEditorShared.createButton(doc, 'Scene Camera', { icon: 'camera' });
     sceneCameraButton.dataset.sceneCameraPreviewToggle = 'true';
     sceneCameraButton.title = '从 Main Camera 查看当前场景';
     cameraPreviewGroup.appendChild(sceneCameraButton);
+    const toolbarOverflowButton = LocalEditorShared.createButton(doc, '更多', { icon: 'chevron-down' });
+    toolbarOverflowButton.dataset.editorToolbarOverflowToggle = 'true';
+    toolbarOverflowButton.title = '显示隐藏的工具栏命令';
+    toolbarOverflowButton.style.display = 'none';
+    const toolbarOverflowMenu = doc.createElement('div');
+    toolbarOverflowMenu.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    toolbarOverflowMenu.dataset.editorToolbarOverflowMenu = 'true';
+    toolbarOverflowMenu.style.cssText = [
+        'position:fixed',
+        'z-index:2147483641',
+        'display:none',
+        'flex-direction:column',
+        'gap:6px',
+        'min-width:220px',
+        'max-width:min(420px, calc(100vw - 16px))',
+        'max-height:calc(100vh - 72px)',
+        'overflow:auto',
+        'padding:8px',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-panel)',
+        'box-shadow:var(--fps-editor-shadow-popover)',
+        'pointer-events:auto',
+    ].join(';');
     sceneToolOverlay.appendChild(sceneTitle);
     sceneToolOverlay.appendChild(sceneQuickActions);
+    sceneToolOverlay.appendChild(sceneUtilityActions);
     sceneToolOverlay.appendChild(cameraPreviewGroup);
     sceneToolOverlay.appendChild(toolGroup);
     sceneToolOverlay.appendChild(spaceGroup);
@@ -401,25 +490,290 @@ export function createLocalEditorBrowserUi(options = {}) {
     sceneToolOverlay.appendChild(sceneToolStatus);
     sceneToolOverlay.appendChild(sceneMouseHint);
     sceneToolOverlay.appendChild(status);
+    sceneToolOverlay.appendChild(toolbarOverflowButton);
     workbench.sceneHeader.appendChild(sceneToolOverlay);
+    root.appendChild(localTestMenu);
+    root.appendChild(toolbarOverflowMenu);
     const boxSelectionOverlay = doc.createElement('div');
+    boxSelectionOverlay.classList.add(LOCAL_EDITOR_THEME_CLASS);
     boxSelectionOverlay.style.cssText = [
         'position:fixed',
         'z-index:2147483637',
         'display:none',
-        'border:1px solid rgba(88,166,255,0.95)',
-        'background:rgba(56,139,253,0.18)',
-        'box-shadow:0 0 0 1px rgba(10,15,23,0.55) inset',
+        'border:1px solid var(--fps-editor-drop-target)',
+        'background:var(--fps-editor-box-select-bg)',
+        'box-shadow:var(--fps-editor-box-select-shadow)',
         'pointer-events:none',
     ].join(';');
     root.appendChild(boxSelectionOverlay);
     const shortcutHelpPanel = createLocalEditorShortcutHelpPanel(doc);
     shortcutHelpPanel.classList.add(LOCAL_EDITOR_THEME_CLASS);
     root.appendChild(shortcutHelpPanel);
+    function applyThemeToSurfaces() {
+        applyLocalEditorTheme(hostChrome, activeTheme);
+        applyLocalEditorTheme(workbench.root, activeTheme);
+        applyLocalEditorTheme(shortcutHelpPanel, activeTheme);
+        applyLocalEditorTheme(boxSelectionOverlay, activeTheme);
+        applyLocalEditorTheme(localTestMenu, activeTheme);
+        applyLocalEditorTheme(toolbarOverflowMenu, activeTheme);
+        contextMenu.setTheme?.(activeTheme);
+    }
+    function updateThemeToggleButton() {
+        const nextTheme = activeTheme === 'dark' ? 'light' : 'dark';
+        themeToggleButton.dataset.editorTheme = activeTheme;
+        themeToggleButton.setAttribute('aria-pressed', activeTheme === 'light' ? 'true' : 'false');
+        themeToggleButton.title = nextTheme === 'light' ? '切换为浅色主题' : '切换为深色主题';
+    }
+    function setActiveTheme(theme) {
+        activeTheme = normalizeLocalEditorThemeName(theme);
+        applyThemeToSurfaces();
+        updateThemeToggleButton();
+    }
+    let localTestMenuOpen = false;
+    function closeLocalTestMenu() {
+        localTestMenuOpen = false;
+        localTestMenu.style.display = 'none';
+        LocalEditorShared.applyButtonActiveState(localTestButton, false);
+    }
+    function openLocalTestMenu() {
+        if (!localTestActionsEnabled || localTestButton.style.display === 'none')
+            return;
+        closeToolbarOverflowMenu();
+        const win = doc.defaultView;
+        const rect = localTestButton.getBoundingClientRect();
+        const viewportWidth = win?.innerWidth ?? doc.documentElement.clientWidth;
+        localTestMenu.style.top = `${Math.max(8, rect.bottom + 5)}px`;
+        localTestMenu.style.right = `${Math.max(8, viewportWidth - rect.right)}px`;
+        localTestMenu.style.display = 'flex';
+        localTestMenuOpen = true;
+        LocalEditorShared.applyButtonActiveState(localTestButton, true);
+    }
+    const onLocalTestButtonClick = (event) => {
+        event.stopPropagation();
+        if (localTestMenuOpen)
+            closeLocalTestMenu();
+        else
+            openLocalTestMenu();
+    };
+    const toolbarOverflowStyleProperties = [
+        'alignSelf',
+        'borderLeft',
+        'display',
+        'flex',
+        'height',
+        'maxWidth',
+        'minHeight',
+        'minWidth',
+        'overflow',
+        'paddingLeft',
+        'textOverflow',
+        'whiteSpace',
+        'width',
+    ];
+    const toolbarButtonOriginalPadding = new WeakMap();
+    const toolbarOverflowOriginalStyles = new WeakMap();
+    const toolbarOrder = [
+        sceneTitle,
+        sceneQuickActions,
+        sceneUtilityActions,
+        cameraPreviewGroup,
+        toolGroup,
+        spaceGroup,
+        handleGroup,
+        snapGroup,
+        placementGroup,
+        actionGroup,
+        sceneToolStatus,
+        sceneMouseHint,
+        status,
+        toolbarOverflowButton,
+    ];
+    const toolbarOverflowItems = [
+        { id: 'status', element: status, kind: 'text' },
+        { id: 'mouse-hint', element: sceneMouseHint, kind: 'text' },
+        { id: 'tool-status', element: sceneToolStatus, kind: 'text' },
+        { id: 'transform-actions', element: actionGroup, kind: 'group' },
+        { id: 'placement', element: placementGroup, kind: 'group' },
+        { id: 'snap', element: snapGroup, kind: 'group' },
+        { id: 'handles', element: handleGroup, kind: 'group' },
+        { id: 'space', element: spaceGroup, kind: 'group' },
+        { id: 'camera-preview', element: cameraPreviewGroup, kind: 'group' },
+        { id: 'scene-utilities', element: sceneUtilityActions, kind: 'group' },
+    ];
+    let toolbarOverflowOpen = false;
+    let toolbarOverflowRaf = null;
+    function restoreToolbarOverflowItemStyle(item) {
+        const original = toolbarOverflowOriginalStyles.get(item.element);
+        if (!original)
+            return;
+        for (const property of toolbarOverflowStyleProperties) {
+            item.element.style[property] = original[property] ?? '';
+        }
+        toolbarOverflowOriginalStyles.delete(item.element);
+        item.element.dataset.editorToolbarOverflowPlacement = 'toolbar';
+    }
+    function applyToolbarOverflowMenuStyle(item) {
+        if (!toolbarOverflowOriginalStyles.has(item.element)) {
+            const original = {};
+            for (const property of toolbarOverflowStyleProperties) {
+                original[property] = item.element.style[property];
+            }
+            toolbarOverflowOriginalStyles.set(item.element, original);
+        }
+        item.element.dataset.editorToolbarOverflowPlacement = 'menu';
+        item.element.style.alignSelf = 'stretch';
+        item.element.style.borderLeft = '0';
+        item.element.style.display = item.kind === 'group' ? 'flex' : 'block';
+        item.element.style.flex = '0 0 auto';
+        item.element.style.height = '';
+        item.element.style.maxWidth = 'none';
+        item.element.style.minHeight = '0';
+        item.element.style.minWidth = '0';
+        item.element.style.overflow = item.kind === 'group' ? 'visible' : 'hidden';
+        item.element.style.paddingLeft = '0';
+        item.element.style.textOverflow = item.kind === 'text' ? 'ellipsis' : '';
+        item.element.style.whiteSpace = item.kind === 'text' ? 'nowrap' : '';
+        item.element.style.width = '100%';
+    }
+    function setToolbarButtonCompact(button, compact) {
+        const label = button.querySelector('[data-editor-button-label]');
+        if (!label)
+            return;
+        if (!toolbarButtonOriginalPadding.has(button)) {
+            toolbarButtonOriginalPadding.set(button, button.style.padding);
+        }
+        const accessibleLabel = button.dataset.editorToolbarLabel || label.textContent || button.title;
+        button.dataset.editorToolbarLabel = accessibleLabel;
+        button.setAttribute('aria-label', accessibleLabel);
+        if (!button.title)
+            button.title = accessibleLabel;
+        button.style.padding = compact ? '4px 6px' : toolbarButtonOriginalPadding.get(button) ?? '';
+        label.style.display = compact ? 'inline-block' : '';
+        label.style.width = compact ? '0' : '';
+        label.style.maxWidth = compact ? '0' : '';
+        label.style.opacity = compact ? '0' : '';
+        label.style.marginLeft = compact ? '-5px' : '';
+    }
+    function setToolbarCompact(compact) {
+        for (const button of Array.from(sceneToolOverlay.querySelectorAll('button'))) {
+            setToolbarButtonCompact(button, compact);
+        }
+    }
+    function closeToolbarOverflowMenu() {
+        toolbarOverflowOpen = false;
+        toolbarOverflowMenu.style.display = 'none';
+        LocalEditorShared.applyButtonActiveState(toolbarOverflowButton, false);
+    }
+    function openToolbarOverflowMenu() {
+        if (toolbarOverflowMenu.childElementCount === 0)
+            return;
+        closeLocalTestMenu();
+        const win = doc.defaultView;
+        const rect = toolbarOverflowButton.getBoundingClientRect();
+        const viewportWidth = win?.innerWidth ?? doc.documentElement.clientWidth;
+        toolbarOverflowMenu.style.top = `${Math.max(8, rect.bottom + 5)}px`;
+        toolbarOverflowMenu.style.right = `${Math.max(8, viewportWidth - rect.right)}px`;
+        toolbarOverflowMenu.style.display = 'flex';
+        toolbarOverflowOpen = true;
+        LocalEditorShared.applyButtonActiveState(toolbarOverflowButton, true);
+    }
+    function resetToolbarOverflowLayout() {
+        setToolbarCompact(false);
+        for (const item of toolbarOverflowItems)
+            restoreToolbarOverflowItemStyle(item);
+        for (const item of toolbarOrder) {
+            item.dataset.editorToolbarOverflowed = 'false';
+            sceneToolOverlay.appendChild(item);
+        }
+        LocalEditorShared.clearElement(toolbarOverflowMenu);
+        toolbarOverflowButton.style.display = 'none';
+        sceneToolOverlay.style.overflowX = 'hidden';
+        closeToolbarOverflowMenu();
+    }
+    function layoutToolbarOverflow() {
+        toolbarOverflowRaf = null;
+        resetToolbarOverflowLayout();
+        if (sceneToolOverlay.style.display === 'none')
+            return;
+        const availableWidth = sceneToolOverlay.clientWidth;
+        if (availableWidth <= 0)
+            return;
+        const isOverflowing = () => sceneToolOverlay.scrollWidth > availableWidth + 1;
+        if (!isOverflowing())
+            return;
+        toolbarOverflowButton.style.display = 'inline-flex';
+        for (const item of toolbarOverflowItems) {
+            if (!isOverflowing())
+                break;
+            if (item.element.style.display === 'none')
+                continue;
+            item.element.dataset.editorToolbarOverflowed = 'true';
+            applyToolbarOverflowMenuStyle(item);
+            toolbarOverflowMenu.appendChild(item.element);
+        }
+        if (toolbarOverflowMenu.childElementCount === 0) {
+            toolbarOverflowButton.style.display = 'none';
+        }
+        if (isOverflowing()) {
+            setToolbarCompact(true);
+        }
+        sceneToolOverlay.style.overflowX = isOverflowing() ? 'auto' : 'hidden';
+    }
+    function scheduleToolbarOverflowLayout() {
+        const win = doc.defaultView;
+        if (!win) {
+            layoutToolbarOverflow();
+            return;
+        }
+        if (toolbarOverflowRaf != null)
+            win.cancelAnimationFrame(toolbarOverflowRaf);
+        toolbarOverflowRaf = win.requestAnimationFrame(layoutToolbarOverflow);
+    }
+    const onToolbarOverflowButtonClick = (event) => {
+        event.stopPropagation();
+        if (toolbarOverflowOpen)
+            closeToolbarOverflowMenu();
+        else
+            openToolbarOverflowMenu();
+    };
+    const onToolbarOverflowPointerDown = (event) => {
+        const target = event.target instanceof HTMLElement ? event.target : null;
+        if (!target)
+            return;
+        if (target.closest('[data-editor-local-test-menu]') || target.closest('[data-editor-local-test-toggle]'))
+            return;
+        if (target.closest('[data-editor-toolbar-overflow-menu]') || target.closest('[data-editor-toolbar-overflow-toggle]'))
+            return;
+        closeLocalTestMenu();
+        closeToolbarOverflowMenu();
+    };
+    const ResizeObserverCtor = doc.defaultView?.ResizeObserver;
+    const toolbarResizeObserver = ResizeObserverCtor
+        ? new ResizeObserverCtor(() => scheduleToolbarOverflowLayout())
+        : null;
+    toolbarOverflowButton.addEventListener('click', onToolbarOverflowButtonClick);
+    localTestButton.addEventListener('click', onLocalTestButtonClick);
+    doc.addEventListener('pointerdown', onToolbarOverflowPointerDown);
+    toolbarResizeObserver?.observe(sceneToolOverlay);
+    doc.defaultView?.addEventListener('resize', scheduleToolbarOverflowLayout);
+    applyThemeToSurfaces();
+    updateThemeToggleButton();
     enterEditorButton.addEventListener('click', () => callbacks.onEnterEditor?.());
-    saveButton.addEventListener('click', () => callbacks.onSaveScene?.());
-    saveAndRunButton.addEventListener('click', () => callbacks.onSaveAndRunGame?.());
-    discardRunButton.addEventListener('click', () => callbacks.onDiscardAndRunGame?.());
+    saveButton.addEventListener('click', () => {
+        closeLocalTestMenu();
+        if (localTestActionsEnabled)
+            callbacks.onSaveScene?.();
+    });
+    saveAndRunButton.addEventListener('click', () => {
+        closeLocalTestMenu();
+        if (localTestActionsEnabled)
+            callbacks.onSaveAndRunGame?.();
+    });
+    discardRunButton.addEventListener('click', () => {
+        closeLocalTestMenu();
+        if (localTestActionsEnabled)
+            callbacks.onDiscardAndRunGame?.();
+    });
     undoButton.addEventListener('click', () => callbacks.onUndo?.());
     redoButton.addEventListener('click', () => callbacks.onRedo?.());
     sceneCameraButton.addEventListener('click', () => {
@@ -437,6 +791,9 @@ export function createLocalEditorBrowserUi(options = {}) {
     sceneHelpButton.addEventListener('click', () => {
         setShortcutHelpOpen(!helpOpen);
     });
+    themeToggleButton.addEventListener('click', () => {
+        setActiveTheme(activeTheme === 'dark' ? 'light' : 'dark');
+    });
     shortcutHelpPanel.addEventListener('click', (event) => {
         const target = event.target instanceof HTMLElement ? event.target : null;
         if (!target?.closest('[data-editor-shortcut-help-close]'))
@@ -576,7 +933,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         const primaryModifier = event.metaKey || event.ctrlKey;
         const handleDocumentShortcut = inputRouter.shouldHandleDocumentShortcut(event);
         const handleGlobalShortcut = inputRouter.shouldHandleGlobalShortcut(event);
-        if (handleDocumentShortcut && primaryModifier && key === 's') {
+        if (handleDocumentShortcut && localTestActionsEnabled && primaryModifier && key === 's') {
             event.preventDefault();
             callbacks.onSaveScene?.();
             return;
@@ -594,8 +951,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             callbacks.onRedo?.();
             return;
         }
-        if (handleGlobalShortcut && (key === 'delete' || key === 'backspace')) {
-            hierarchyController.handleDeleteShortcut(event);
+        if (handleGlobalShortcut && hierarchyController.handleEditShortcut(event)) {
             return;
         }
         if (!handleGlobalShortcut || event.metaKey || event.ctrlKey || event.altKey)
@@ -719,12 +1075,16 @@ export function createLocalEditorBrowserUi(options = {}) {
         const disabled = state.busy;
         if (!inEditor || disabled)
             contextMenu.close();
-        hostChrome.style.display = inEditor ? 'none' : 'flex';
+        hostChrome.style.display = !inEditor && localTestActionsEnabled ? 'flex' : 'none';
         enterEditorButton.disabled = disabled;
         for (const button of [saveButton, saveAndRunButton, discardRunButton, undoButton, redoButton, sceneHelpButton, sceneCameraButton]) {
-            button.style.display = '';
+            button.style.display = 'inline-flex';
             button.disabled = disabled;
         }
+        localTestGroup.style.display = inEditor && localTestActionsEnabled ? 'flex' : 'none';
+        localTestButton.disabled = disabled;
+        if (!inEditor || !localTestActionsEnabled)
+            closeLocalTestMenu();
         if (!inEditor)
             helpOpen = false;
         inputRouter.setModalOpen(inEditor && helpOpen);
@@ -792,11 +1152,11 @@ export function createLocalEditorBrowserUi(options = {}) {
         status.textContent += dragSuffix;
         status.title = state.statusDetails || status.textContent;
         status.style.color = state.statusTone === 'error'
-            ? '#ff8f87'
+            ? 'var(--fps-editor-danger-strong)'
             : state.statusTone === 'warning'
-                ? '#d29922'
+                ? 'var(--fps-editor-warn)'
                 : state.statusTone === 'success'
-                    ? '#7ee787'
+                    ? 'var(--fps-editor-success)'
                     : 'var(--fps-editor-muted)';
         sceneToolStatus.textContent = transformTool?.dragPhase === 'dragging'
             ? `正在拖拽 ${transformTool.draggingNodeId ?? '选择对象'}`
@@ -816,6 +1176,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         else {
             boxSelectionOverlay.style.display = 'none';
         }
+        scheduleToolbarOverflowLayout();
         if (!inEditor)
             return;
         const hierarchyDescriptor = panelRegistry.getActivePanel('left');
@@ -831,12 +1192,30 @@ export function createLocalEditorBrowserUi(options = {}) {
         update(state) {
             render(state);
         },
+        setTheme(theme) {
+            setActiveTheme(theme);
+        },
+        getTheme() {
+            return activeTheme;
+        },
         dispose() {
+            if (toolbarOverflowRaf != null) {
+                doc.defaultView?.cancelAnimationFrame(toolbarOverflowRaf);
+                toolbarOverflowRaf = null;
+            }
+            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();
             boxSelectionOverlay.remove();
             shortcutHelpPanel.remove();
             hierarchyController.dispose();
+            workbenchLayoutController.dispose();
             contextMenu.dispose();
             inputRouter.dispose();
             doc.removeEventListener('keydown', onKeyDown);