@fps-games/editor 0.1.4-beta.5 → 0.1.5-beta.2

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

@@ -10,16 +10,18 @@ export { createLocalEditorViewportRevealController, isLocalEditorElementVisibleI
 export { createLocalEditorHierarchyBlankMenu, createLocalEditorHierarchyCopyShortcutAction, createLocalEditorHierarchyDeleteShortcutAction, createLocalEditorHierarchyDuplicateShortcutAction, createLocalEditorHierarchyNodeMenu, createLocalEditorHierarchyPasteShortcutAction, createLocalEditorHierarchySelectAllShortcutAction, } from './local-editor-ui-hierarchy-actions.js';
 export { createLocalEditorHierarchyController, } from './local-editor-ui-hierarchy-controller.js';
 export { resolveLocalEditorHierarchySearchRows, } from './local-editor-ui-hierarchy-view.js';
+export { createLocalEditorHierarchyAttachDialog, resolveLocalEditorHierarchyAttachTargets, } from './local-editor-ui-hierarchy-attach-dialog.js';
 export { canLocalEditorHierarchyNodeHaveChildren, createLocalEditorHierarchyTreeModel, isLocalEditorHierarchyNodeSelectable, isLocalEditorHierarchyNodeMovable, } from './local-editor-ui-hierarchy-tree.js';
 export { createLocalEditorContextMenuController, } from './local-editor-ui-context-menu.js';
 export { createLocalEditorTooltipController, } from './local-editor-ui-tooltip.js';
 import { createLocalEditorWorkbenchInputRouter } from './local-editor-ui-input-router.js';
 import { createLocalEditorPanelRegistry } from './local-editor-ui-panel-registry.js';
 import * as LocalEditorShared from './local-editor-ui-shared.js';
+import { findLocalEditorRenderingAction } from './local-editor-rendering-actions.js';
 import { createShortcutHelpPanel as createLocalEditorShortcutHelpPanel } from './local-editor-ui-shortcuts.js';
 import { applyLocalEditorTheme, ensureLocalEditorTheme, LOCAL_EDITOR_THEME_CLASS, normalizeLocalEditorThemeName, } from './local-editor-ui-theme.js';
 import { createDefaultLocalEditorWorkbenchLayout, createLocalEditorWorkbenchLayoutController, createLocalEditorWorkbench, createSceneHeaderToolbar, createWorkbenchPanelContent, } from './local-editor-ui-workbench.js';
-import { createLocalEditorIcon } from './local-editor-ui-icons.js';
+import { createLocalEditorIcon, isLocalEditorIconName } from './local-editor-ui-icons.js';
 export { applyLocalEditorBrowserInspectorControlBinding, createLocalEditorBrowserInspectorControlRegistry, formatLocalEditorBrowserInspectorNumberValue, formatLocalEditorBrowserInspectorValue, parseLocalEditorBrowserInspectorNumberValue, resolveLocalEditorBrowserInspectorSectionStatus, resolveLocalEditorBrowserInspectorControlRegistration, } from './local-editor-ui-panels.js';
 export { createLocalEditorBrowserInspectorGroupValueClipboardPayload, createLocalEditorBrowserInspectorVectorCopyPayload, parseLocalEditorBrowserInspectorGroupValueClipboardPayload, } from './local-editor-inspector-clipboard.js';
 export { LOCAL_EDITOR_BROWSER_INSPECTOR_VEC3_AXES, isLocalEditorBrowserInspectorTransformVectorGroupPath, resolveLocalEditorBrowserInspectorVectorGroupAxisFromPropertyPath, resolveLocalEditorBrowserInspectorVectorGroupPathFromPropertyPath, resolveLocalEditorBrowserInspectorVectorGroupPathFromProperties, } from './local-editor-inspector-groups.js';
@@ -108,6 +110,7 @@ const VIEWPORT_PROJECTION_LABELS = {
     perspective: '透视',
     orthographic: '正交',
 };
+const STATIC_SHADOW_BAKE_ACTION_ID = 'bake-static-shadows';
 const TRANSFORM_ACTION_GROUPS = [
     {
         title: '对齐到 Active Object',
@@ -336,6 +339,32 @@ function createRenderingPropertyInput(input, source) {
         source,
     };
 }
+function createRenderingActionInput(button) {
+    const actionId = button.dataset.editorRenderingAction;
+    if (!actionId)
+        return null;
+    const params = parseRenderingActionParams(button.dataset.renderingActionParams);
+    return {
+        actionId,
+        sectionId: button.dataset.renderingSectionId,
+        systemId: button.dataset.renderingSystemId,
+        path: button.dataset.renderingPath,
+        ...(params ? { params } : {}),
+    };
+}
+function parseRenderingActionParams(value) {
+    if (!value)
+        return null;
+    try {
+        const parsed = JSON.parse(value);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+            ? parsed
+            : null;
+    }
+    catch {
+        return null;
+    }
+}
 function readInspectorCommitMode(input) {
     return input.dataset.serializedCommitMode ?? 'live';
 }
@@ -596,6 +625,145 @@ function cssEscape(value) {
         ? CSS.escape(value)
         : value.replace(/["\\]/g, '\\$&');
 }
+const PERFORMANCE_MONITOR_METRIC_GROUPS = [
+    {
+        title: null,
+        metrics: [
+            {
+                key: 'fps',
+                label: 'FPS',
+                description: '每秒渲染帧数。打开性能浮窗时会启用连续渲染，所以这里显示实时值。',
+                format: stats => formatPerformanceInteger(stats?.fps ?? null),
+            },
+            {
+                key: 'frame',
+                label: 'Frame',
+                description: '最近一帧耗时，单位毫秒。16.7ms 约等于 60 FPS。',
+                format: stats => formatPerformanceFrameMs(stats?.frameMs ?? null),
+            },
+            {
+                key: 'drawCalls',
+                label: 'Draw calls',
+                description: 'Babylon 当前帧提交的绘制调用数量。它受材质、mesh、阴影、辅助层和合批状态影响。',
+                format: stats => formatPerformanceInteger(stats?.drawCalls ?? null),
+            },
+            {
+                key: 'objects',
+                label: 'Objects',
+                description: '编辑器层级中的 authored 对象数量，不包含 root 行，不等同于 Babylon mesh 数。',
+                format: stats => formatPerformanceInteger(stats?.objectCount ?? null),
+            },
+            {
+                key: 'meshes',
+                label: 'Meshes',
+                description: 'Babylon scene.meshes 总数，包含资产 mesh、primitive、阴影预览和编辑器辅助 mesh。',
+                format: stats => formatPerformanceInteger(stats?.meshCount ?? null),
+            },
+            {
+                key: 'activeMeshes',
+                label: 'Active meshes',
+                description: '当前相机和裁剪结果下参与本帧 active mesh 评估的 mesh 数。',
+                format: stats => formatPerformanceInteger(stats?.activeMeshCount ?? null),
+            },
+            {
+                key: 'materials',
+                label: 'Materials',
+                description: 'Babylon scene.materials 数量。材质越分散，越难形成低 draw call。',
+                format: stats => formatPerformanceInteger(stats?.materialCount ?? null),
+            },
+            {
+                key: 'textures',
+                label: 'Textures',
+                description: 'Babylon scene.textures 数量，包含材质贴图和部分 runtime 生成纹理。',
+                format: stats => formatPerformanceInteger(stats?.textureCount ?? null),
+            },
+            {
+                key: 'lights',
+                label: 'Lights',
+                description: 'Babylon scene.lights 数量。',
+                format: stats => formatPerformanceInteger(stats?.lightCount ?? null),
+            },
+            {
+                key: 'cameras',
+                label: 'Cameras',
+                description: 'Babylon scene.cameras 数量。',
+                format: stats => formatPerformanceInteger(stats?.cameraCount ?? null),
+            },
+        ],
+    },
+    {
+        title: 'Mesh 类别 · active/total',
+        description: '按 Babylon mesh class 统计，值格式为 active/total。',
+        metrics: [
+            {
+                key: 'meshClassMesh',
+                label: 'Mesh',
+                description: '普通 Mesh：独立几何网格，通常会独立参与一次渲染批次判断。',
+                format: stats => formatPerformanceClassBreakdown(stats, 'mesh'),
+            },
+            {
+                key: 'meshClassInstancedMesh',
+                label: 'Instance',
+                description: 'InstancedMesh：共享 source mesh 的实例，但仍会进入 active mesh 统计。',
+                format: stats => formatPerformanceClassBreakdown(stats, 'instancedMesh'),
+            },
+            {
+                key: 'meshClassLinesMesh',
+                label: 'Lines',
+                description: 'LinesMesh：线框/辅助线 mesh，常见于相机视锥、灯光方向、编辑器辅助显示。',
+                format: stats => formatPerformanceClassBreakdown(stats, 'linesMesh'),
+            },
+            {
+                key: 'meshClassGroundMesh',
+                label: 'Ground',
+                description: 'GroundMesh：Babylon ground 类型 mesh，常用于地面或平面。',
+                format: stats => formatPerformanceClassBreakdown(stats, 'groundMesh'),
+            },
+            {
+                key: 'meshClassOther',
+                label: 'Other',
+                description: '其他 Babylon mesh 子类，表示未归入 Mesh/Instance/Lines/Ground 的类型。',
+                format: stats => formatPerformanceClassBreakdown(stats, 'other'),
+            },
+        ],
+    },
+    {
+        title: '来源 · active/total',
+        description: '按编辑器 runtime 来源粗分类，值格式为 active/total。',
+        metrics: [
+            {
+                key: 'meshCategoryAssetMesh',
+                label: 'Asset',
+                description: '资产 Mesh：由 GLB/模型资产实例化或克隆出来的可渲染子 mesh。',
+                format: stats => formatPerformanceCategoryBreakdown(stats, 'assetMesh'),
+            },
+            {
+                key: 'meshCategoryPrimitiveMesh',
+                label: 'Primitive',
+                description: 'Primitive Mesh：编辑器基础体生成的 mesh，例如 Cube、Sphere、Capsule、Plane。',
+                format: stats => formatPerformanceCategoryBreakdown(stats, 'primitiveMesh'),
+            },
+            {
+                key: 'meshCategoryStaticProjectedShadow',
+                label: 'Shadow',
+                description: '静态投影阴影预览 mesh。数量高时通常会显著抬高 draw calls。',
+                format: stats => formatPerformanceCategoryBreakdown(stats, 'staticProjectedShadow'),
+            },
+            {
+                key: 'meshCategoryEditorHelper',
+                label: 'Helper',
+                description: '编辑器辅助 mesh，例如网格、天空、相机/灯光 helper、gizmo 辅助显示。',
+                format: stats => formatPerformanceCategoryBreakdown(stats, 'editorHelper'),
+            },
+            {
+                key: 'meshCategoryUncategorized',
+                label: 'Other',
+                description: '未能归入资产、基础体、阴影预览或编辑器辅助层的 mesh。',
+                format: stats => formatPerformanceCategoryBreakdown(stats, 'uncategorized'),
+            },
+        ],
+    },
+];
 function createSceneFrameRateOverlay(doc) {
     const root = doc.createElement('div');
     root.classList.add(LOCAL_EDITOR_THEME_CLASS);
@@ -686,6 +854,154 @@ function renderSceneFrameRateOverlay(overlay, stats) {
         stats.activeReasons.length ? `active: ${stats.activeReasons.join(', ')}` : '',
     ].filter(Boolean).join(' | ');
 }
+function createPerformanceMonitorOverlay(doc) {
+    const root = doc.createElement('section');
+    root.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    root.dataset.editorPerformanceMonitorOverlay = 'true';
+    root.setAttribute('aria-label', '编辑器性能监控');
+    root.style.cssText = [
+        'position:absolute',
+        'right:14px',
+        'top:48px',
+        'z-index:4',
+        'display:none',
+        'width:226px',
+        'box-sizing:border-box',
+        'padding:10px',
+        'border:1px solid color-mix(in srgb, var(--fps-editor-border) 78%, transparent)',
+        'border-radius:6px',
+        'background:color-mix(in srgb, var(--fps-editor-chrome) 88%, transparent)',
+        'box-shadow:var(--fps-editor-shadow-panel)',
+        'backdrop-filter:blur(6px)',
+        'font-family:var(--fps-editor-font)',
+        'font-size:11px',
+        'font-weight:800',
+        'color:var(--fps-editor-text)',
+        'pointer-events:auto',
+        'max-height:calc(100% - 64px)',
+        'overflow:auto',
+    ].join(';');
+    const header = doc.createElement('div');
+    header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;';
+    const title = doc.createElement('div');
+    title.textContent = 'Performance';
+    title.style.cssText = 'min-width:0;color:var(--fps-editor-text-strong);font-size:12px;font-weight:900;line-height:1.2;';
+    const modeLabel = doc.createElement('span');
+    modeLabel.textContent = 'IDLE';
+    modeLabel.style.cssText = [
+        'flex:0 0 auto',
+        'padding:2px 5px',
+        'border:1px solid var(--fps-editor-border-soft)',
+        'border-radius:4px',
+        'background:color-mix(in srgb, var(--fps-editor-field) 72%, transparent)',
+        'color:var(--fps-editor-muted)',
+        'font-size:9px',
+        'line-height:1',
+        'font-weight:900',
+    ].join(';');
+    header.append(title, modeLabel);
+    const grid = doc.createElement('div');
+    grid.style.cssText = [
+        'display:grid',
+        'grid-template-columns:minmax(0,1fr) minmax(48px,auto)',
+        'gap:5px 10px',
+        'align-items:center',
+    ].join(';');
+    const values = {};
+    for (const group of PERFORMANCE_MONITOR_METRIC_GROUPS) {
+        if (group.title) {
+            const groupTitle = doc.createElement('div');
+            groupTitle.textContent = group.title;
+            groupTitle.title = group.description ?? group.title;
+            groupTitle.setAttribute('aria-label', group.description ?? group.title);
+            groupTitle.style.cssText = [
+                'grid-column:1/-1',
+                'margin-top:3px',
+                'padding-top:6px',
+                'border-top:1px solid color-mix(in srgb, var(--fps-editor-border-soft) 72%, transparent)',
+                'color:var(--fps-editor-text-strong)',
+                'font-size:10px',
+                'font-weight:900',
+                'line-height:1',
+                'cursor:help',
+            ].join(';');
+            grid.appendChild(groupTitle);
+        }
+        for (const metric of group.metrics) {
+            const rowLabel = doc.createElement('span');
+            rowLabel.textContent = metric.label;
+            rowLabel.title = metric.description;
+            rowLabel.setAttribute('aria-label', `${metric.label}: ${metric.description}`);
+            rowLabel.style.cssText = [
+                'min-width:0',
+                'overflow:hidden',
+                'text-overflow:ellipsis',
+                'white-space:nowrap',
+                'color:var(--fps-editor-muted-strong)',
+                'cursor:help',
+            ].join(';');
+            const value = doc.createElement('span');
+            value.textContent = '--';
+            value.title = metric.description;
+            value.setAttribute('aria-label', `${metric.label}: --。${metric.description}`);
+            value.style.cssText = [
+                'min-width:48px',
+                'justify-self:end',
+                'font-variant-numeric:tabular-nums',
+                'color:var(--fps-editor-text-strong)',
+                'text-align:right',
+                'cursor:help',
+            ].join(';');
+            values[metric.key] = value;
+            grid.append(rowLabel, value);
+        }
+    }
+    root.append(header, grid);
+    return { root, modeLabel, values };
+}
+function renderPerformanceMonitorOverlay(overlay, stats, open) {
+    if (!open) {
+        overlay.root.style.display = 'none';
+        return;
+    }
+    overlay.root.style.display = 'block';
+    overlay.modeLabel.textContent = stats?.mode === 'continuous' ? 'LIVE' : 'IDLE';
+    overlay.modeLabel.style.color = stats?.mode === 'continuous'
+        ? 'var(--fps-editor-success)'
+        : 'var(--fps-editor-muted)';
+    for (const group of PERFORMANCE_MONITOR_METRIC_GROUPS) {
+        for (const metric of group.metrics) {
+            const value = metric.format(stats);
+            overlay.values[metric.key].textContent = value;
+            overlay.values[metric.key].setAttribute('aria-label', `${metric.label}: ${value}。${metric.description}`);
+        }
+    }
+    overlay.root.title = [
+        '悬停各项查看中文解释',
+        stats ? `mode: ${stats.mode}` : 'mode: unknown',
+        stats?.activeReasons.length ? `active: ${stats.activeReasons.join(', ')}` : '',
+    ].filter(Boolean).join(' | ');
+}
+function formatPerformanceInteger(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? String(Math.round(value)) : '--';
+}
+function formatPerformanceFrameMs(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? `${value.toFixed(1)}ms` : '--';
+}
+function formatPerformanceClassBreakdown(stats, key) {
+    return formatPerformanceActiveTotal(stats?.activeMeshClassCounts?.[key] ?? null, stats?.meshClassCounts?.[key] ?? null);
+}
+function formatPerformanceCategoryBreakdown(stats, key) {
+    return formatPerformanceActiveTotal(stats?.activeMeshCategoryCounts?.[key] ?? null, stats?.meshCategoryCounts?.[key] ?? null);
+}
+function formatPerformanceActiveTotal(active, total) {
+    if (!isFinitePerformanceNumber(active) || !isFinitePerformanceNumber(total))
+        return '--';
+    return `${Math.round(active)}/${Math.round(total)}`;
+}
+function isFinitePerformanceNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
 function createCoordinateAxesOverlay(doc) {
     const root = doc.createElement('div');
     root.dataset.editorCoordinateAxesOverlay = 'true';
@@ -1438,6 +1754,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     const undoButton = createToolbarIconButton(doc, '撤销', 'undo', '撤销');
     const redoButton = createToolbarIconButton(doc, '重做', 'redo', '重做');
     let helpOpen = false;
+    let performanceMonitorOpen = false;
     let assetPreviewOpen = false;
     let previewedAsset = null;
     let assetPreviewMode = 'preview';
@@ -1734,8 +2051,105 @@ export function createLocalEditorBrowserUi(options = {}) {
         transformActionPopover.appendChild(section);
     }
     actionGroup.appendChild(transformActionButton);
+    const staticShadowBakeGroup = doc.createElement('div');
+    staticShadowBakeGroup.style.cssText = [
+        'display:none',
+        'align-items:center',
+        'gap:4px',
+        'padding-left:8px',
+        'border-left:1px solid var(--fps-editor-divider)',
+    ].join(';');
+    const staticShadowBakeButton = createToolbarIconButton(doc, '烘焙静态阴影', 'save', '烘焙静态阴影');
+    staticShadowBakeButton.dataset.editorToolbarStaticShadowBake = 'true';
+    staticShadowBakeButton.dataset.editorRenderingAction = STATIC_SHADOW_BAKE_ACTION_ID;
+    staticShadowBakeGroup.appendChild(staticShadowBakeButton);
+    const staticShadowBakePopover = doc.createElement('div');
+    staticShadowBakePopover.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    staticShadowBakePopover.dataset.editorToolbarStaticShadowBakePopover = 'true';
+    staticShadowBakePopover.setAttribute('role', 'dialog');
+    staticShadowBakePopover.setAttribute('aria-label', '静态阴影烘焙进度');
+    staticShadowBakePopover.style.cssText = [
+        'position:fixed',
+        'z-index:2147483641',
+        'display:none',
+        'flex-direction:column',
+        'gap:9px',
+        'width:360px',
+        'max-width:calc(100vw - 16px)',
+        'padding:10px',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-panel)',
+        'box-shadow:var(--fps-editor-shadow-popover)',
+        'font-family:var(--fps-editor-font)',
+        'color:var(--fps-editor-text)',
+        'font-size:12px',
+        'pointer-events:auto',
+    ].join(';');
+    const staticShadowBakePopoverHeader = doc.createElement('div');
+    staticShadowBakePopoverHeader.style.cssText = [
+        'display:flex',
+        'align-items:center',
+        'justify-content:space-between',
+        'gap:8px',
+    ].join(';');
+    const staticShadowBakePopoverTitle = doc.createElement('div');
+    staticShadowBakePopoverTitle.textContent = '静态阴影烘焙';
+    staticShadowBakePopoverTitle.style.cssText = [
+        'min-width:0',
+        'overflow:hidden',
+        'text-overflow:ellipsis',
+        'white-space:nowrap',
+        'font-size:12px',
+        'font-weight:900',
+        'color:var(--fps-editor-text-strong)',
+    ].join(';');
+    const staticShadowBakePopoverClose = createToolbarIconButton(doc, '关闭', 'discard', '关闭烘焙信息');
+    staticShadowBakePopoverClose.dataset.editorToolbarStaticShadowBakePopoverClose = 'true';
+    staticShadowBakePopoverHeader.appendChild(staticShadowBakePopoverTitle);
+    staticShadowBakePopoverHeader.appendChild(staticShadowBakePopoverClose);
+    const staticShadowBakePopoverStatus = doc.createElement('div');
+    staticShadowBakePopoverStatus.dataset.editorToolbarStaticShadowBakePopoverStatus = 'true';
+    staticShadowBakePopoverStatus.style.cssText = [
+        'color:var(--fps-editor-muted-strong)',
+        'font-size:11px',
+        'font-weight:800',
+        'line-height:1.35',
+        'overflow-wrap:anywhere',
+    ].join(';');
+    const staticShadowBakeProgress = doc.createElement('div');
+    staticShadowBakeProgress.dataset.editorToolbarStaticShadowBakePopoverProgress = 'true';
+    staticShadowBakeProgress.style.cssText = [
+        'height:8px',
+        'overflow:hidden',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-chrome-dark)',
+    ].join(';');
+    const staticShadowBakeProgressFill = doc.createElement('div');
+    staticShadowBakeProgressFill.style.cssText = [
+        'height:100%',
+        'width:0%',
+        'border-radius:2px',
+        'background:var(--fps-editor-accent-strong)',
+        'transition:width 140ms ease',
+    ].join(';');
+    staticShadowBakeProgress.appendChild(staticShadowBakeProgressFill);
+    const staticShadowBakeDetails = doc.createElement('div');
+    staticShadowBakeDetails.dataset.editorToolbarStaticShadowBakePopoverDetails = 'true';
+    staticShadowBakeDetails.style.cssText = [
+        'display:grid',
+        'grid-template-columns:repeat(2, minmax(0, 1fr))',
+        'gap:6px',
+    ].join(';');
+    staticShadowBakePopover.appendChild(staticShadowBakePopoverHeader);
+    staticShadowBakePopover.appendChild(staticShadowBakePopoverStatus);
+    staticShadowBakePopover.appendChild(staticShadowBakeProgress);
+    staticShadowBakePopover.appendChild(staticShadowBakeDetails);
     const themeToggleButton = createToolbarIconButton(doc, '主题', 'theme', '切换主题');
     themeToggleButton.dataset.editorThemeToggle = 'true';
+    const performanceMonitorButton = createToolbarIconButton(doc, '性能监控', 'performance', '性能监控', 'toggle');
+    performanceMonitorButton.dataset.performanceMonitorToggle = 'true';
     const gridToggleButton = createToolbarIconButton(doc, '网格', 'grid', '显示 / 隐藏 Scene View 网格');
     gridToggleButton.dataset.editorGridToggle = 'true';
     const sceneHelpButton = createToolbarIconButton(doc, '快捷键', 'help', '快捷键与操作说明');
@@ -1743,6 +2157,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     sceneQuickActions.appendChild(undoButton);
     sceneQuickActions.appendChild(redoButton);
     sceneQuickActions.appendChild(dirtyBadge);
+    sceneUtilityActions.appendChild(performanceMonitorButton);
     sceneUtilityActions.appendChild(gridToggleButton);
     sceneUtilityActions.appendChild(themeToggleButton);
     sceneUtilityActions.appendChild(sceneHelpButton);
@@ -1850,6 +2265,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     ].join(';');
     const coordinateAxesOverlay = createCoordinateAxesOverlay(doc);
     const sceneFrameRateOverlay = createSceneFrameRateOverlay(doc);
+    const performanceMonitorOverlay = createPerformanceMonitorOverlay(doc);
     const spatialOverlay = createSpatialOverlay(doc);
     const measurementOverlay = createMeasurementOverlay(doc);
     sceneToolOverlay.appendChild(sceneTitle);
@@ -1859,6 +2275,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     sceneToolOverlay.appendChild(snapGroup);
     sceneToolOverlay.appendChild(placementGroup);
     sceneToolOverlay.appendChild(actionGroup);
+    sceneToolOverlay.appendChild(staticShadowBakeGroup);
     sceneToolOverlay.appendChild(viewportToolsGroup);
     sceneToolOverlay.appendChild(sceneUtilityActions);
     sceneToolOverlay.appendChild(cameraPreviewGroup);
@@ -1868,15 +2285,18 @@ export function createLocalEditorBrowserUi(options = {}) {
     workbench.sceneFrame.appendChild(spatialOverlay.root);
     workbench.sceneFrame.appendChild(measurementOverlay.root);
     workbench.sceneFrame.appendChild(sceneFrameRateOverlay.root);
+    workbench.sceneFrame.appendChild(performanceMonitorOverlay.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);
     tooltipSurfaces.add(localTestMenu);
     tooltipSurfaces.add(toolbarOverflowMenu);
+    tooltipSurfaces.add(staticShadowBakePopover);
     tooltipSurfaces.add(snapSettingsPopover);
     tooltipSurfaces.add(placementSettingsPopover);
     tooltipSurfaces.add(transformActionPopover);
@@ -2062,12 +2482,14 @@ export function createLocalEditorBrowserUi(options = {}) {
         applyLocalEditorTheme(spatialOverlay.root, activeTheme);
         applyLocalEditorTheme(measurementOverlay.root, activeTheme);
         applyLocalEditorTheme(sceneFrameRateOverlay.root, activeTheme);
+        applyLocalEditorTheme(performanceMonitorOverlay.root, activeTheme);
         applyLocalEditorTheme(shortcutHelpPanel, activeTheme);
         applyLocalEditorTheme(assetPreviewModal, activeTheme);
         applyLocalEditorTheme(assetPickerModal, activeTheme);
         applyLocalEditorTheme(boxSelectionOverlay, activeTheme);
         applyLocalEditorTheme(localTestMenu, activeTheme);
         applyLocalEditorTheme(toolbarOverflowMenu, activeTheme);
+        applyLocalEditorTheme(staticShadowBakePopover, activeTheme);
         applyLocalEditorTheme(snapSettingsPopover, activeTheme);
         applyLocalEditorTheme(placementSettingsPopover, activeTheme);
         applyLocalEditorTheme(transformActionPopover, activeTheme);
@@ -2274,6 +2696,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         snapGroup,
         placementGroup,
         actionGroup,
+        staticShadowBakeGroup,
         viewportToolsGroup,
         sceneUtilityActions,
         cameraPreviewGroup,
@@ -2289,9 +2712,11 @@ export function createLocalEditorBrowserUi(options = {}) {
         { id: 'placement', element: placementGroup, kind: 'group' },
         { id: 'snap', element: snapGroup, kind: 'group' },
         { id: 'space', element: spaceGroup, kind: 'group' },
+        { id: 'static-shadow-bake', element: staticShadowBakeGroup, kind: 'group' },
     ];
     let toolbarOverflowOpen = false;
     let toolbarOverflowRaf = null;
+    let staticShadowBakePopoverOpen = false;
     function restoreToolbarOverflowItemStyle(item) {
         const original = toolbarOverflowOriginalStyles.get(item.element);
         if (!original)
@@ -2356,6 +2781,94 @@ export function createLocalEditorBrowserUi(options = {}) {
         toolbarOverflowMenu.style.display = 'none';
         LocalEditorShared.applyButtonActiveState(toolbarOverflowButton, false);
     }
+    function closeStaticShadowBakePopover() {
+        staticShadowBakePopoverOpen = false;
+        staticShadowBakePopover.style.display = 'none';
+    }
+    function openStaticShadowBakePopover() {
+        staticShadowBakePopoverOpen = true;
+        renderStaticShadowBakePopover(currentState);
+    }
+    function positionStaticShadowBakePopover() {
+        const rect = staticShadowBakeButton.getBoundingClientRect();
+        const win = doc.defaultView;
+        const viewportWidth = win?.innerWidth ?? doc.documentElement.clientWidth;
+        const width = Math.min(360, Math.max(240, viewportWidth - 16));
+        const left = Math.min(Math.max(8, rect.left + rect.width * 0.5 - width * 0.5), Math.max(8, viewportWidth - width - 8));
+        staticShadowBakePopover.style.width = `${width}px`;
+        staticShadowBakePopover.style.left = `${left}px`;
+        staticShadowBakePopover.style.top = `${Math.max(38, rect.bottom + 6)}px`;
+    }
+    function renderStaticShadowBakePopover(state) {
+        if (!staticShadowBakePopoverOpen || !state || state.mode !== 'editor') {
+            staticShadowBakePopover.style.display = 'none';
+            return;
+        }
+        const match = findLocalEditorRenderingAction(state.renderingPanel, STATIC_SHADOW_BAKE_ACTION_ID);
+        if (!match) {
+            staticShadowBakePopover.style.display = 'none';
+            return;
+        }
+        positionStaticShadowBakePopover();
+        staticShadowBakePopover.style.display = 'flex';
+        staticShadowBakePopoverTitle.textContent = match.system?.label ?? match.action.label ?? '静态阴影烘焙';
+        const progress = match.system?.progress;
+        const status = match.system?.status || progress?.label || match.action.tooltip || '准备烘焙静态阴影...';
+        staticShadowBakePopoverStatus.textContent = status;
+        if (progress) {
+            staticShadowBakeProgress.style.display = 'block';
+            const value = typeof progress.value === 'number' && Number.isFinite(progress.value)
+                ? Math.max(0, Math.min(1, progress.value))
+                : progress.indeterminate
+                    ? 1
+                    : 0;
+            staticShadowBakeProgressFill.style.width = `${Math.round(value * 100)}%`;
+            staticShadowBakeProgressFill.style.opacity = progress.indeterminate ? '0.55' : '1';
+        }
+        else {
+            staticShadowBakeProgress.style.display = 'none';
+            staticShadowBakeProgressFill.style.width = '0%';
+            staticShadowBakeProgressFill.style.opacity = '1';
+        }
+        LocalEditorShared.clearElement(staticShadowBakeDetails);
+        const details = match.system?.details ?? [];
+        staticShadowBakeDetails.style.display = details.length > 0 ? 'grid' : 'none';
+        for (const detail of details) {
+            const item = doc.createElement('div');
+            item.style.cssText = [
+                'min-width:0',
+                'padding:6px',
+                'border:1px solid var(--fps-editor-border)',
+                'border-radius:3px',
+                'background:var(--fps-editor-chrome)',
+            ].join(';');
+            const label = doc.createElement('div');
+            label.textContent = detail.label;
+            label.style.cssText = [
+                'color:var(--fps-editor-muted)',
+                'font-size:10px',
+                'font-weight:800',
+                'line-height:1.25',
+                'overflow:hidden',
+                'text-overflow:ellipsis',
+                'white-space:nowrap',
+            ].join(';');
+            const value = doc.createElement('div');
+            value.textContent = detail.value;
+            value.style.cssText = [
+                `color:${detail.tone === 'warning' ? 'var(--fps-editor-warn)' : detail.tone === 'error' ? 'var(--fps-editor-danger-strong)' : detail.tone === 'success' ? 'var(--fps-editor-success)' : 'var(--fps-editor-text-strong)'}`,
+                'font-size:12px',
+                'font-weight:900',
+                'line-height:1.35',
+                'overflow:hidden',
+                'text-overflow:ellipsis',
+                'white-space:nowrap',
+            ].join(';');
+            item.appendChild(label);
+            item.appendChild(value);
+            staticShadowBakeDetails.appendChild(item);
+        }
+    }
     function openToolbarOverflowMenu() {
         if (toolbarOverflowMenu.childElementCount === 0)
             return;
@@ -2450,6 +2963,8 @@ export function createLocalEditorBrowserUi(options = {}) {
             return;
         closeLocalTestMenu();
         closeToolbarOverflowMenu();
+        if (!target.closest('[data-editor-toolbar-static-shadow-bake-popover]'))
+            closeStaticShadowBakePopover();
         closeSnapSettingsPopover();
         closePlacementSettingsPopover();
         closeTransformActionPopover();
@@ -2484,6 +2999,9 @@ export function createLocalEditorBrowserUi(options = {}) {
     });
     undoButton.addEventListener('click', () => callbacks.onUndo?.());
     redoButton.addEventListener('click', () => callbacks.onRedo?.());
+    performanceMonitorButton.addEventListener('click', () => {
+        setPerformanceMonitorOpen(!performanceMonitorOpen);
+    });
     gridToggleButton.addEventListener('click', () => {
         const visible = currentState?.grid?.visible ?? true;
         callbacks.onGridVisibleChange?.(!visible);
@@ -2492,6 +3010,16 @@ export function createLocalEditorBrowserUi(options = {}) {
         const enabled = currentState?.sceneCameraPreview?.enabled ?? false;
         callbacks.onSceneCameraPreviewToggle?.(!enabled);
     });
+    staticShadowBakeButton.addEventListener('click', () => {
+        if (staticShadowBakeButton.disabled)
+            return;
+        const action = findLocalEditorRenderingAction(currentState?.renderingPanel, STATIC_SHADOW_BAKE_ACTION_ID);
+        if (!action || action.action.disabled)
+            return;
+        openStaticShadowBakePopover();
+        callbacks.onRenderingAction?.({ actionId: STATIC_SHADOW_BAKE_ACTION_ID });
+    });
+    staticShadowBakePopoverClose.addEventListener('click', () => closeStaticShadowBakePopover());
     const toggleCoordinateAxesProjection = (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -2553,6 +3081,17 @@ export function createLocalEditorBrowserUi(options = {}) {
         shortcutHelpPanel.style.display = helpOpen ? 'flex' : 'none';
         LocalEditorShared.applyButtonActiveState(sceneHelpButton, helpOpen);
     };
+    const setPerformanceMonitorOpen = (open, notify = true) => {
+        if (performanceMonitorOpen === open)
+            return;
+        if (open)
+            contextMenu.close();
+        performanceMonitorOpen = open;
+        LocalEditorShared.applyButtonActiveState(performanceMonitorButton, performanceMonitorOpen);
+        renderPerformanceMonitorOverlay(performanceMonitorOverlay, currentState?.mode === 'editor' ? currentState.performanceStats ?? null : null, currentState?.mode === 'editor' && performanceMonitorOpen);
+        if (notify)
+            callbacks.onPerformanceMonitorOpenChange?.(performanceMonitorOpen);
+    };
     const openAssetPreviewModal = (asset) => {
         if (!asset.preview)
             return;
@@ -3326,6 +3865,23 @@ export function createLocalEditorBrowserUi(options = {}) {
     });
     inspectorPanel.addEventListener('click', (event) => {
         const target = event.target instanceof HTMLElement ? event.target : null;
+        const renderingActionButton = target?.closest('[data-editor-rendering-action]');
+        if (renderingActionButton) {
+            if (renderingActionButton.disabled)
+                return;
+            const actionInput = createRenderingActionInput(renderingActionButton);
+            if (!actionInput)
+                return;
+            const action = findLocalEditorRenderingAction(currentState?.renderingPanel, actionInput.actionId);
+            if (!action || action.action.disabled)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (actionInput.actionId === STATIC_SHADOW_BAKE_ACTION_ID)
+                openStaticShadowBakePopover();
+            callbacks.onRenderingAction?.(actionInput);
+            return;
+        }
         const vectorLockButton = target?.closest('[data-editor-inspector-vector-lock]');
         if (vectorLockButton) {
             const groupPath = vectorLockButton.dataset.editorInspectorVectorLock;
@@ -3520,11 +4076,13 @@ export function createLocalEditorBrowserUi(options = {}) {
             return;
         if (actionButton.disabled)
             return;
-        const actionId = actionButton.dataset.editorRenderingAction;
-        if (!actionId)
+        const actionInput = createRenderingActionInput(actionButton);
+        if (!actionInput)
             return;
         event.preventDefault();
-        callbacks.onRenderingAction?.({ actionId });
+        if (actionInput.actionId === STATIC_SHADOW_BAKE_ACTION_ID)
+            openStaticShadowBakePopover();
+        callbacks.onRenderingAction?.(actionInput);
     });
     const onKeyDown = (event) => {
         if (event.defaultPrevented)
@@ -3562,6 +4120,11 @@ export function createLocalEditorBrowserUi(options = {}) {
             closeOverlaySettingsPopover();
             return;
         }
+        if (key === 'escape' && staticShadowBakePopoverOpen) {
+            event.preventDefault();
+            closeStaticShadowBakePopover();
+            return;
+        }
         const primaryModifier = event.metaKey || event.ctrlKey;
         const handleDocumentShortcut = inputRouter.shouldHandleDocumentShortcut(event);
         const handleGlobalShortcut = inputRouter.shouldHandleGlobalShortcut(event);
@@ -3673,6 +4236,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             : statusToneColor;
         renderCoordinateAxesOverlay(coordinateAxesOverlay, inEditor ? state.coordinateAxes ?? null : null);
         renderSceneFrameRateOverlay(sceneFrameRateOverlay, inEditor ? state.sceneFrameStats ?? null : null);
+        renderPerformanceMonitorOverlay(performanceMonitorOverlay, inEditor ? state.performanceStats ?? null : null, inEditor && performanceMonitorOpen);
         renderSpatialOverlay(spatialOverlay, inEditor ? state.viewportSpatialOverlay ?? null : null);
         renderMeasurementOverlay(measurementOverlay, inEditor ? state.viewportMeasurement ?? null : null);
         const boxSelection = state.boxSelection;
@@ -3719,7 +4283,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             contextMenu.close();
         hostChrome.style.display = !inEditor && localTestActionsEnabled ? 'flex' : 'none';
         enterEditorButton.disabled = disabled;
-        for (const button of [saveButton, saveAndRunButton, discardRunButton, undoButton, redoButton, sceneHelpButton, sceneCameraButton, gridToggleButton]) {
+        for (const button of [saveButton, saveAndRunButton, discardRunButton, undoButton, redoButton, sceneHelpButton, sceneCameraButton, performanceMonitorButton, gridToggleButton]) {
             button.style.display = 'inline-flex';
             button.disabled = disabled;
         }
@@ -3729,6 +4293,8 @@ export function createLocalEditorBrowserUi(options = {}) {
             closeLocalTestMenu();
         if (!inEditor)
             helpOpen = false;
+        if (!inEditor && performanceMonitorOpen)
+            setPerformanceMonitorOpen(false);
         if (!inEditor || disabled) {
             assetPreviewOpen = false;
             previewedAsset = null;
@@ -3749,6 +4315,20 @@ export function createLocalEditorBrowserUi(options = {}) {
             closeTransformActionPopover();
         if (!inEditor)
             closeOverlaySettingsPopover();
+        if (!inEditor)
+            closeStaticShadowBakePopover();
+        const staticShadowBakeAction = findLocalEditorRenderingAction(state.renderingPanel, STATIC_SHADOW_BAKE_ACTION_ID);
+        const staticShadowBakeVisible = inEditor && !!staticShadowBakeAction;
+        staticShadowBakeGroup.style.display = staticShadowBakeVisible ? 'flex' : 'none';
+        const staticShadowBakeDisabled = disabled || !staticShadowBakeAction || staticShadowBakeAction.action.disabled === true;
+        staticShadowBakeButton.disabled = staticShadowBakeDisabled;
+        staticShadowBakeButton.style.opacity = staticShadowBakeDisabled ? '0.62' : '1';
+        staticShadowBakeButton.style.cursor = staticShadowBakeDisabled ? 'not-allowed' : 'pointer';
+        const staticShadowBakeIcon = staticShadowBakeAction?.action.icon;
+        setToolbarButtonIcon(doc, staticShadowBakeButton, isLocalEditorIconName(staticShadowBakeIcon) ? staticShadowBakeIcon : 'save');
+        setToolbarButtonTooltip(staticShadowBakeButton, staticShadowBakeAction?.action.tooltip ?? staticShadowBakeAction?.action.label ?? '烘焙静态阴影');
+        LocalEditorShared.applyButtonActiveState(staticShadowBakeButton, !!staticShadowBakeAction?.system?.progress);
+        renderStaticShadowBakePopover(state);
         const sceneCameraPreview = state.sceneCameraPreview ?? { enabled: false, available: false };
         cameraPreviewGroup.style.display = inEditor ? 'flex' : 'none';
         sceneCameraButton.disabled = disabled || !sceneCameraPreview.available;
@@ -3798,6 +4378,9 @@ export function createLocalEditorBrowserUi(options = {}) {
         if (!inEditor || disabled || viewportToolsGroup.style.display === 'none')
             closeOverlaySettingsPopover();
         const gridState = state.grid ?? { visible: false, available: false };
+        performanceMonitorButton.disabled = disabled;
+        setToolbarButtonTooltip(performanceMonitorButton, performanceMonitorOpen ? '隐藏性能监控' : '显示性能监控');
+        LocalEditorShared.applyButtonActiveState(performanceMonitorButton, performanceMonitorOpen);
         gridToggleButton.disabled = disabled || !gridState.available;
         setToolbarButtonTooltip(gridToggleButton, gridState.visible ? '隐藏 Scene View 网格' : '显示 Scene View 网格');
         LocalEditorShared.applyButtonActiveState(gridToggleButton, gridState.visible);
@@ -3915,8 +4498,15 @@ export function createLocalEditorBrowserUi(options = {}) {
         },
         updatePreview,
         updateSceneFrameStats(stats) {
+            if (currentState)
+                currentState = { ...currentState, sceneFrameStats: stats };
             renderSceneFrameRateOverlay(sceneFrameRateOverlay, currentState?.mode === 'editor' ? stats : null);
         },
+        updatePerformanceStats(stats) {
+            if (currentState)
+                currentState = { ...currentState, performanceStats: stats };
+            renderPerformanceMonitorOverlay(performanceMonitorOverlay, currentState?.mode === 'editor' ? stats : null, currentState?.mode === 'editor' && performanceMonitorOpen);
+        },
         setTheme(theme) {
             setActiveTheme(theme);
         },
@@ -3944,6 +4534,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             spatialOverlay.root.remove();
             measurementOverlay.root.remove();
             sceneFrameRateOverlay.root.remove();
+            performanceMonitorOverlay.root.remove();
             boxSelectionOverlay.remove();
             shortcutHelpPanel.remove();
             assetPreviewModal.remove();