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

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

@@ -1,24 +1,30 @@
-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 { createLocalEditorTooltipController } from './local-editor-ui-tooltip';
+import * as LocalEditorPanels from './local-editor-ui-panels.js';
+import { createLocalEditorHierarchyController } from './local-editor-ui-hierarchy-controller.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';
+import { parseLocalEditorBrowserInspectorGroupValueClipboardPayload, } from './local-editor-inspector-clipboard.js';
+import { LOCAL_EDITOR_BROWSER_INSPECTOR_VEC3_AXES, resolveLocalEditorBrowserInspectorVectorGroupPathFromPropertyPath, } from './local-editor-inspector-groups.js';
 import { DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS, DEFAULT_EDITOR_TRANSFORM_TOOL_DESCRIPTORS, } from '@fps-games/editor-core';
-export { createLocalEditorHierarchyBlankMenu, createLocalEditorHierarchyCopyShortcutAction, createLocalEditorHierarchyDeleteShortcutAction, createLocalEditorHierarchyDuplicateShortcutAction, createLocalEditorHierarchyNodeMenu, createLocalEditorHierarchyPasteShortcutAction, createLocalEditorHierarchySelectAllShortcutAction, } from './local-editor-ui-hierarchy-actions';
-export { createLocalEditorHierarchyController, } from './local-editor-ui-hierarchy-controller';
-export { resolveLocalEditorHierarchySearchRows, } from './local-editor-ui-hierarchy-view';
-export { canLocalEditorHierarchyNodeHaveChildren, createLocalEditorHierarchyTreeModel, isLocalEditorHierarchyNodeMovable, } from './local-editor-ui-hierarchy-tree';
-export { createLocalEditorContextMenuController, } from './local-editor-ui-context-menu';
-export { createLocalEditorTooltipController, } from './local-editor-ui-tooltip';
-import { createLocalEditorWorkbenchInputRouter } from './local-editor-ui-input-router';
-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 { applyLocalEditorTheme, ensureLocalEditorTheme, LOCAL_EDITOR_THEME_CLASS, normalizeLocalEditorThemeName, } from './local-editor-ui-theme';
-import { createDefaultLocalEditorWorkbenchLayout, createLocalEditorWorkbenchLayoutController, createLocalEditorWorkbench, createSceneHeaderToolbar, createWorkbenchPanelContent, } from './local-editor-ui-workbench';
-import { createLocalEditorIcon } from './local-editor-ui-icons';
-export { applyLocalEditorBrowserInspectorControlBinding, createLocalEditorBrowserInspectorControlRegistry, formatLocalEditorBrowserInspectorNumberValue, formatLocalEditorBrowserInspectorValue, parseLocalEditorBrowserInspectorNumberValue, resolveLocalEditorBrowserInspectorSectionStatus, 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';
+export { createLocalEditorViewportRevealController, isLocalEditorElementVisibleInViewport, resolveLocalEditorViewportRevealScrollTop, revealLocalEditorElementInViewport, } from './local-editor-ui-dock-panel.js';
+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 { 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 { 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';
+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';
+export { DEFAULT_LOCAL_EDITOR_THEME, LOCAL_EDITOR_THEME_CLASS, applyLocalEditorTheme, normalizeLocalEditorThemeName, } from './local-editor-ui-theme.js';
+export { LOCAL_EDITOR_ICON_NAMES, createLocalEditorIcon, isLocalEditorIconName, resolveLocalEditorIconName, } from './local-editor-ui-icons.js';
 const PENDING_NUMERIC_PROPERTY_INPUT = Symbol('pending-numeric-property-input');
 function readInspectorInputValue(input, source) {
     const control = input.dataset.serializedControl;
@@ -192,9 +198,96 @@ function createInspectorPropertyInput(input, source) {
         source: input.dataset.serializedEditSource ?? source,
     };
 }
+function createInspectorPropertyInputs(input, source, lockedVectorGroups) {
+    const propertyInput = createInspectorPropertyInput(input, source);
+    if (!propertyInput)
+        return null;
+    const groupPath = resolveLocalEditorBrowserInspectorVectorGroupPathFromPropertyPath(propertyInput.path);
+    if (!groupPath || !lockedVectorGroups.has(groupPath))
+        return [propertyInput];
+    if (propertyInput.control !== 'number' || propertyInput.valueType !== 'number')
+        return [propertyInput];
+    if (typeof propertyInput.value !== 'number' || !Number.isFinite(propertyInput.value))
+        return [propertyInput];
+    return LOCAL_EDITOR_BROWSER_INSPECTOR_VEC3_AXES.map(axis => ({
+        ...propertyInput,
+        path: `${groupPath}.${axis}`,
+    }));
+}
+function createInspectorVectorPastePropertyInputs(input, payload) {
+    const targetGroupPath = resolveLocalEditorBrowserInspectorVectorGroupPathFromPropertyPath(input.dataset.serializedPath);
+    if (!targetGroupPath || payload.groupPath !== targetGroupPath)
+        return null;
+    if (!input.dataset.serializedTargetId)
+        return null;
+    const targetIds = input.dataset.serializedTargetIds
+        ? input.dataset.serializedTargetIds.split(',').filter(Boolean)
+        : undefined;
+    return LOCAL_EDITOR_BROWSER_INSPECTOR_VEC3_AXES.map(axis => ({
+        targetId: input.dataset.serializedTargetId,
+        targetIds,
+        path: `${targetGroupPath}.${axis}`,
+        value: payload.value[axis],
+        control: 'number',
+        valueType: 'number',
+        commitMode: input.dataset.serializedCommitMode,
+        persistence: input.dataset.serializedPersistence,
+        source: 'input',
+    }));
+}
+function applyInspectorVectorPasteToDom(input, payload) {
+    const group = input.closest('[data-editor-inspector-vector-group-path]');
+    const fields = group
+        ? Array.from(group.querySelectorAll('input[data-serialized-path]'))
+        : [input];
+    for (const field of fields) {
+        const groupPath = resolveLocalEditorBrowserInspectorVectorGroupPathFromPropertyPath(field.dataset.serializedPath);
+        if (groupPath !== payload.groupPath)
+            continue;
+        const axis = field.dataset.serializedPath?.slice(groupPath.length + 1);
+        if (axis !== 'x' && axis !== 'y' && axis !== 'z')
+            continue;
+        field.value = LocalEditorPanels.formatLocalEditorBrowserInspectorNumberValue(payload.value[axis]);
+    }
+}
+function applyInspectorLockedVectorInputToDom(input, propertyInputs) {
+    if (!(input instanceof HTMLInputElement))
+        return;
+    const first = propertyInputs[0];
+    if (!first || propertyInputs.length !== LOCAL_EDITOR_BROWSER_INSPECTOR_VEC3_AXES.length)
+        return;
+    if (typeof first.value !== 'number' || !Number.isFinite(first.value))
+        return;
+    const groupPath = resolveLocalEditorBrowserInspectorVectorGroupPathFromPropertyPath(first.path);
+    if (!groupPath)
+        return;
+    const group = input.closest('[data-editor-inspector-vector-group-path]');
+    const fields = group
+        ? Array.from(group.querySelectorAll('input[data-serialized-path]'))
+        : [input];
+    const formatted = LocalEditorPanels.formatLocalEditorBrowserInspectorNumberValue(first.value);
+    for (const field of fields) {
+        if (resolveLocalEditorBrowserInspectorVectorGroupPathFromPropertyPath(field.dataset.serializedPath) === groupPath) {
+            field.value = formatted;
+        }
+    }
+}
 function readRenderingInputValue(input, source) {
     const control = input.dataset.renderingControl;
     const valueType = input.dataset.renderingValueType;
+    if (control === 'enum' && input instanceof HTMLSelectElement) {
+        const option = input.selectedOptions.item(0);
+        const encoded = option?.dataset.serializedOptionValue;
+        if (encoded != null) {
+            try {
+                return JSON.parse(encoded);
+            }
+            catch {
+                return option?.value ?? input.value;
+            }
+        }
+        return input.value;
+    }
     if (input instanceof HTMLInputElement && input.type === 'checkbox')
         return input.checked;
     if (input instanceof HTMLInputElement && input.type === 'color') {
@@ -259,6 +352,11 @@ function readInspectorImmediateSource(input) {
     return 'input';
 }
 function readRenderingImmediateSource(input) {
+    const explicitSource = input.dataset.renderingEditSource;
+    if (explicitSource)
+        return explicitSource;
+    if (input instanceof HTMLSelectElement)
+        return 'select';
     if (input instanceof HTMLInputElement && input.type === 'checkbox')
         return 'toggle';
     if (input instanceof HTMLInputElement && input.type === 'color')
@@ -267,6 +365,133 @@ function readRenderingImmediateSource(input) {
         return 'list';
     return 'input';
 }
+export function captureLocalEditorEditableFocus(doc) {
+    const active = doc.activeElement;
+    if (!(active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLSelectElement)) {
+        return null;
+    }
+    const selector = createLocalEditorEditableFocusSelector(active);
+    if (!selector)
+        return null;
+    return {
+        selector,
+        value: readLocalEditorEditableDraftValue(active),
+        ...readLocalEditorEditableSelection(active),
+    };
+}
+export function restoreLocalEditorEditableFocus(doc, snapshot) {
+    if (!snapshot)
+        return;
+    const element = doc.querySelector(snapshot.selector);
+    if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {
+        return;
+    }
+    if (snapshot.value != null && canRestoreLocalEditorEditableDraftValue(element)) {
+        element.value = snapshot.value;
+    }
+    element.focus({ preventScroll: true });
+    restoreLocalEditorEditableSelection(element, snapshot);
+}
+function createLocalEditorEditableFocusSelector(element) {
+    if (element instanceof HTMLInputElement && element.dataset.editorHierarchyRenameInput) {
+        return [
+            'input',
+            `[data-editor-hierarchy-rename-input="${cssEscape(element.dataset.editorHierarchyRenameInput)}"]`,
+        ].join('');
+    }
+    if ((element instanceof HTMLInputElement || element instanceof HTMLSelectElement) && element.dataset.serializedPath && element.dataset.serializedTargetId) {
+        return [
+            element instanceof HTMLSelectElement ? 'select' : 'input',
+            `[data-serialized-path="${cssEscape(element.dataset.serializedPath)}"]`,
+            `[data-serialized-target-id="${cssEscape(element.dataset.serializedTargetId)}"]`,
+            element.dataset.serializedVectorAxis
+                ? `[data-serialized-vector-axis="${cssEscape(element.dataset.serializedVectorAxis)}"]`
+                : '',
+        ].join('');
+    }
+    if ((element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) && element.dataset.editorRenderingProperty) {
+        const sectionId = element.dataset.renderingSectionId;
+        const systemId = element.dataset.renderingSystemId;
+        const path = element.dataset.renderingPath;
+        if (!sectionId || !systemId || !path)
+            return null;
+        return [
+            element instanceof HTMLTextAreaElement ? 'textarea' : 'input',
+            '[data-editor-rendering-property="true"]',
+            `[data-rendering-section-id="${cssEscape(sectionId)}"]`,
+            `[data-rendering-system-id="${cssEscape(systemId)}"]`,
+            `[data-rendering-path="${cssEscape(path)}"]`,
+            element.dataset.serializedVectorAxis
+                ? `[data-serialized-vector-axis="${cssEscape(element.dataset.serializedVectorAxis)}"]`
+                : '',
+        ].join('');
+    }
+    if (element instanceof HTMLInputElement && element.dataset.editorInspectorSearch != null) {
+        return 'input[data-editor-inspector-search]';
+    }
+    if (element instanceof HTMLInputElement && element.dataset.editorHierarchySearch != null) {
+        return 'input[data-editor-hierarchy-search]';
+    }
+    if (element instanceof HTMLInputElement && element.dataset.editorAssetFilter != null) {
+        return 'input[data-editor-asset-filter]';
+    }
+    return null;
+}
+function readLocalEditorEditableDraftValue(element) {
+    return canRestoreLocalEditorEditableDraftValue(element) ? element.value : null;
+}
+function canRestoreLocalEditorEditableDraftValue(element) {
+    if (element instanceof HTMLTextAreaElement)
+        return true;
+    if (!(element instanceof HTMLInputElement))
+        return false;
+    return element.type !== 'checkbox'
+        && element.type !== 'radio'
+        && element.type !== 'color'
+        && element.type !== 'button'
+        && element.type !== 'submit'
+        && element.type !== 'reset';
+}
+function readLocalEditorEditableSelection(element) {
+    if (!canRestoreLocalEditorEditableDraftValue(element)) {
+        return {
+            selectionStart: null,
+            selectionEnd: null,
+            selectionDirection: null,
+        };
+    }
+    try {
+        return {
+            selectionStart: element.selectionStart,
+            selectionEnd: element.selectionEnd,
+            selectionDirection: element.selectionDirection,
+        };
+    }
+    catch {
+        return {
+            selectionStart: null,
+            selectionEnd: null,
+            selectionDirection: null,
+        };
+    }
+}
+function restoreLocalEditorEditableSelection(element, snapshot) {
+    if (!canRestoreLocalEditorEditableDraftValue(element))
+        return;
+    const start = snapshot.selectionStart ?? snapshot.value?.length ?? element.value.length;
+    const end = snapshot.selectionEnd ?? start;
+    try {
+        element.setSelectionRange(start, end, snapshot.selectionDirection ?? 'none');
+    }
+    catch {
+        // Some input types reject text selection APIs even when they carry editable text.
+    }
+}
+function cssEscape(value) {
+    return typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
+        ? CSS.escape(value)
+        : value.replace(/["\\]/g, '\\$&');
+}
 function createSceneFrameRateOverlay(doc) {
     const root = doc.createElement('div');
     root.classList.add(LOCAL_EDITOR_THEME_CLASS);
@@ -776,12 +1001,27 @@ function createAssetBrowserMenuItems(state, asset) {
     const activeId = state.activeId;
     const items = [];
     if (assetKind === 'material') {
+        const deleteDisabledReason = getMaterialAssetDeleteDisabledReason(asset);
         items.push({
             id: 'asset.edit-material',
             label: '编辑材质球',
             disabled: !asset.material,
             disabledReason: '该材质资产缺少可编辑参数。',
         });
+        items.push({
+            id: 'asset.duplicate-material',
+            label: '复制材质',
+            disabled: !asset.assetId,
+            disabledReason: '该材质资产缺少可复制的材质 ID。',
+        });
+        items.push({
+            id: 'asset.delete-material',
+            label: '删除材质',
+            danger: true,
+            separatorBefore: true,
+            disabled: !!deleteDisabledReason,
+            disabledReason: deleteDisabledReason,
+        });
     }
     else if (assetKind === 'texture' && asset.preview) {
         items.push({
@@ -860,6 +1100,18 @@ function createAssetBrowserMenuItems(state, asset) {
     });
     return items;
 }
+function getMaterialAssetDeleteDisabledReason(asset) {
+    if (!asset.assetId)
+        return '该材质资产缺少可删除的材质 ID。';
+    if (!asset.material)
+        return '该材质资产缺少可删除的材质数据。';
+    if (asset.material.readonly)
+        return '系统默认材质不可删除。';
+    const usageCount = asset.material.usage?.count ?? 0;
+    if (usageCount > 0)
+        return `该材质正在被 ${usageCount} 处使用，请先替换或解绑。`;
+    return undefined;
+}
 function resolveBrowserAssetKind(asset) {
     const kind = `${asset.kind ?? ''}`.trim().toLowerCase();
     const id = `${asset.id ?? ''}`.trim().toLowerCase();
@@ -931,6 +1183,45 @@ function findInspectorPropertyForInput(state, input) {
     }
     return null;
 }
+function findRenderingPropertyForInput(state, input) {
+    const sectionId = input.dataset.renderingSectionId;
+    const systemId = input.dataset.renderingSystemId;
+    const path = input.dataset.renderingPath;
+    if (!sectionId || !systemId || !path)
+        return null;
+    const renderingPanel = state.renderingPanel;
+    const section = renderingPanel?.sections.find(candidate => candidate.id === sectionId);
+    const system = section?.systems.find(candidate => candidate.id === systemId);
+    const property = system?.properties.find(candidate => candidate.path === path);
+    if (!property)
+        return null;
+    const readOnly = system?.readOnly === true || property.readOnly === true || property.disabled === true;
+    return {
+        path: property.path,
+        label: property.label,
+        valueType: property.valueType === 'string-list' ? 'string' : property.valueType,
+        control: property.control === 'asset-picker-card'
+            ? readOnly ? 'readonly' : 'custom'
+            : property.control === 'string-list'
+                ? readOnly ? 'readonly' : 'string'
+                : property.control,
+        customControl: property.control === 'asset-picker-card' ? 'asset-picker-card' : undefined,
+        value: property.value,
+        readOnly,
+        persistence: readOnly ? 'readonly' : 'document',
+        commitMode: property.commitMode ?? (property.control === 'string-list' ? 'blur' : 'live'),
+        tooltip: property.tooltip,
+        effect: property.disabled ? 'unsupported' : undefined,
+        disabledReason: property.disabledReason,
+        placeholder: property.placeholder,
+        min: property.min,
+        max: property.max,
+        step: property.step,
+        options: property.options,
+        controlOptions: property.controlOptions,
+        tags: property.tags,
+    };
+}
 export function createLocalEditorBrowserUi(options = {}) {
     const doc = options.document ?? document;
     const root = options.root ?? doc.body;
@@ -950,6 +1241,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     });
     let currentState = null;
     let inspectorFilter = '';
+    const lockedInspectorVectorGroups = new Set();
     let assetBrowserTab = 'all';
     const workbenchLayout = createDefaultLocalEditorWorkbenchLayout();
     const panelRegistry = createLocalEditorPanelRegistry(workbenchLayout);
@@ -1053,11 +1345,13 @@ export function createLocalEditorBrowserUi(options = {}) {
     editorStatusButton.dataset.editorStatusButton = 'true';
     editorStatusButton.style.cursor = 'help';
     const workbench = createLocalEditorWorkbench(doc);
+    const leftDockTabs = doc.createElement('div');
     const hierarchyPanel = createWorkbenchPanelContent(doc);
     const assetPanel = workbench.bottomDock;
     const rightDockTabs = doc.createElement('div');
     const inspectorPanel = createWorkbenchPanelContent(doc);
     const renderingPanel = createWorkbenchPanelContent(doc);
+    workbench.leftDock.appendChild(leftDockTabs);
     workbench.leftDock.appendChild(hierarchyPanel);
     workbench.rightDock.appendChild(rightDockTabs);
     workbench.rightDock.appendChild(inspectorPanel);
@@ -1065,6 +1359,14 @@ export function createLocalEditorBrowserUi(options = {}) {
     root.appendChild(workbench.root);
     tooltipSurfaces.add(workbench.root);
     const workbenchLayoutController = createLocalEditorWorkbenchLayoutController(doc, workbench);
+    const findAssetBrowserScrollViewport = () => (assetPanel.querySelector('[data-editor-asset-browser-scroll-viewport]'));
+    const assetBrowserViewportReveal = createLocalEditorViewportRevealController({
+        getViewport: findAssetBrowserScrollViewport,
+        margin: 4,
+    });
+    let lastRenderedAssetBrowserTab;
+    let lastRenderedBottomDockTab;
+    let lastRenderedSelectedAssetId;
     const sceneToolOverlay = createSceneHeaderToolbar(doc);
     const sceneTitle = doc.createElement('div');
     sceneTitle.textContent = 'Preview';
@@ -2144,7 +2446,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             contextMenu.close();
         helpOpen = open;
         syncInputModalOpen();
-        shortcutHelpPanel.style.display = helpOpen ? '' : 'none';
+        shortcutHelpPanel.style.display = helpOpen ? 'flex' : 'none';
         LocalEditorShared.applyButtonActiveState(sceneHelpButton, helpOpen);
     };
     const openAssetPreviewModal = (asset) => {
@@ -2264,6 +2566,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         assetPreviewMeta.textContent = [
             material.name || asset.label,
             materialKind === 'standard' ? 'Standard' : 'PBR',
+            `被 ${material.usage?.count ?? 0} 处使用`,
             readonly ? '只读系统材质' : '共享资产参数',
             material.id,
         ].filter(Boolean).join(' · ');
@@ -2290,16 +2593,17 @@ export function createLocalEditorBrowserUi(options = {}) {
             : '修改会影响所有使用该材质球的物体。';
         previewMeta.style.cssText = 'color:var(--fps-editor-muted);font-size:11px;font-weight:800;line-height:1.45';
         previewColumn.appendChild(previewMeta);
+        appendMaterialEditorUsageSummary(previewColumn, material.usage ?? { count: 0, items: [] });
         const form = doc.createElement('div');
         form.style.cssText = 'display:grid;grid-template-columns:minmax(96px,140px) minmax(0,1fr);gap:7px 10px;align-items:center;min-width:0';
-        appendMaterialEditorReadonlyRow(form, '名称', material.name || asset.label);
+        appendMaterialEditorTextField(form, '名称', 'name', material.name || asset.label, readonly);
         appendMaterialEditorReadonlyRow(form, '类型', materialKind === 'standard' ? 'Standard 标准材质球' : 'PBR 标准材质球');
-        appendMaterialEditorColorField(form, '基础颜色', 'profile.baseColor.color', baseColor.color ?? { r: 1, g: 1, b: 1 }, readonly);
         appendMaterialEditorTextureField(form, '基础贴图', 'profile.baseColor.texture.url', baseColor.texture?.url ?? '', readonly);
-        appendMaterialEditorNumberField(form, '亮度', 'profile.baseColor.brightness', baseColor.brightness ?? 1, readonly, 0, 2, 0.05);
-        appendMaterialEditorNumberField(form, '饱和度', 'profile.baseColor.saturation', baseColor.saturation ?? 1, readonly, 0, 2, 0.05);
-        appendMaterialEditorNumberField(form, '对比度', 'profile.baseColor.contrast', baseColor.contrast ?? 1, readonly, 0, 2, 0.05);
-        appendMaterialEditorNumberField(form, '色相', 'profile.baseColor.hue', baseColor.hue ?? 0, readonly, -180, 180, 1);
+        appendMaterialEditorNumberField(form, '贴图亮度', 'profile.baseColor.brightness', baseColor.brightness ?? 1, readonly, 0, 2, 0.05);
+        appendMaterialEditorNumberField(form, '贴图饱和度', 'profile.baseColor.saturation', baseColor.saturation ?? 1, readonly, 0, 2, 0.05);
+        appendMaterialEditorNumberField(form, '贴图对比度', 'profile.baseColor.contrast', baseColor.contrast ?? 1, readonly, 0, 2, 0.05);
+        appendMaterialEditorNumberField(form, '贴图色相', 'profile.baseColor.hue', baseColor.hue ?? 0, readonly, -180, 180, 1);
+        appendMaterialEditorColorField(form, '基础色', 'profile.baseColor.color', baseColor.color ?? { r: 1, g: 1, b: 1 }, readonly);
         if (materialKind === 'pbr') {
             appendMaterialEditorNumberField(form, '金属度', 'profile.metallic', profile.metallic ?? 0, readonly, 0, 1, 0.05);
             appendMaterialEditorNumberField(form, '粗糙度', 'profile.roughness', profile.roughness ?? 1, readonly, 0, 1, 0.05);
@@ -2332,6 +2636,69 @@ export function createLocalEditorBrowserUi(options = {}) {
         ].join(';');
         container.appendChild(output);
     }
+    function appendMaterialEditorTextField(container, label, fieldPath, value, readonly) {
+        appendMaterialEditorLabel(container, label);
+        const input = doc.createElement('input');
+        input.type = 'text';
+        input.value = value;
+        input.disabled = readonly;
+        input.spellcheck = false;
+        input.dataset.editorAssetMaterialField = fieldPath;
+        input.dataset.editorAssetMaterialFieldKind = 'text';
+        input.style.cssText = createMaterialEditorFieldCss(readonly);
+        container.appendChild(input);
+    }
+    function appendMaterialEditorUsageSummary(container, usage) {
+        const panel = doc.createElement('div');
+        panel.style.cssText = [
+            'border:1px solid var(--fps-editor-border)',
+            'border-radius:3px',
+            'background:var(--fps-editor-field)',
+            'padding:8px',
+            'display:flex',
+            'flex-direction:column',
+            'gap:6px',
+            'min-width:0',
+        ].join(';');
+        const title = doc.createElement('div');
+        title.textContent = `被 ${usage.count} 处使用`;
+        title.style.cssText = 'font-size:12px;font-weight:900;color:var(--fps-editor-text-strong)';
+        panel.appendChild(title);
+        if (usage.items.length === 0) {
+            const empty = doc.createElement('div');
+            empty.textContent = '未被场景使用';
+            empty.style.cssText = 'font-size:11px;font-weight:800;color:var(--fps-editor-muted)';
+            panel.appendChild(empty);
+        }
+        else {
+            const list = doc.createElement('div');
+            list.style.cssText = 'display:flex;flex-direction:column;gap:4px;min-width:0';
+            for (const item of usage.items) {
+                const row = doc.createElement('div');
+                row.textContent = item.label;
+                row.title = item.bindingPath || item.label;
+                row.style.cssText = [
+                    'min-height:22px',
+                    'display:flex',
+                    'align-items:center',
+                    'min-width:0',
+                    'padding:0 6px',
+                    'border:1px solid var(--fps-editor-border-soft)',
+                    'border-radius:3px',
+                    'background:var(--fps-editor-panel-soft)',
+                    'color:var(--fps-editor-muted-strong)',
+                    'font-size:11px',
+                    'font-weight:800',
+                    'overflow:hidden',
+                    'text-overflow:ellipsis',
+                    'white-space:nowrap',
+                ].join(';');
+                list.appendChild(row);
+            }
+            panel.appendChild(list);
+        }
+        container.appendChild(panel);
+    }
     function appendMaterialEditorColorField(container, label, fieldPath, color, readonly) {
         appendMaterialEditorLabel(container, label);
         const input = doc.createElement('input');
@@ -2680,6 +3047,21 @@ export function createLocalEditorBrowserUi(options = {}) {
             [key]: input.checked,
         });
     });
+    function suppressAssetBrowserRevealIfVisible(assetButton) {
+        const assetId = assetButton.dataset.editorAssetId;
+        if (assetId && assetBrowserViewportReveal.isElementVisible(assetButton)) {
+            assetBrowserViewportReveal.suppressNextReveal(assetId);
+        }
+    }
+    function revealSelectedAssetBrowserItem(assetId) {
+        const buttons = assetPanel.querySelectorAll('[data-editor-asset-id]');
+        for (const button of buttons) {
+            if (button.dataset.editorAssetId !== assetId)
+                continue;
+            assetBrowserViewportReveal.revealElement(button);
+            return;
+        }
+    }
     assetPanel.addEventListener('click', (event) => {
         const target = event.target instanceof HTMLElement ? event.target : null;
         const tabButton = target?.closest('[data-editor-dock-tab]');
@@ -2698,8 +3080,17 @@ export function createLocalEditorBrowserUi(options = {}) {
                 render(currentState);
             return;
         }
+        const createMaterialButton = target?.closest('[data-editor-create-material-asset]');
+        if (createMaterialButton) {
+            callbacks.onAssetAction?.({
+                actionId: 'asset.create-material',
+                assetKind: 'material',
+            });
+            return;
+        }
         const assetButton = target?.closest('[data-editor-asset-id]');
         if (assetButton?.dataset.editorAssetId) {
+            suppressAssetBrowserRevealIfVisible(assetButton);
             callbacks.onSelectAsset?.(assetButton.dataset.editorAssetId);
             return;
         }
@@ -2715,6 +3106,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             return;
         event.preventDefault();
         event.stopPropagation();
+        suppressAssetBrowserRevealIfVisible(assetButton);
         callbacks.onSelectAsset?.(browserAssetId);
         contextMenu.open({
             x: event.clientX,
@@ -2755,6 +3147,16 @@ export function createLocalEditorBrowserUi(options = {}) {
                 render(currentState);
         }
     });
+    workbench.leftDock.addEventListener('click', (event) => {
+        const target = event.target instanceof HTMLElement ? event.target : null;
+        const tabButton = target?.closest('[data-editor-left-dock-tab]');
+        const tab = tabButton?.dataset.editorLeftDockTab;
+        if (tab === 'hierarchy') {
+            panelRegistry.setActivePanel('left', tab);
+            if (currentState)
+                render(currentState);
+        }
+    });
     const hierarchyController = createLocalEditorHierarchyController({
         doc,
         panel: hierarchyPanel,
@@ -2794,12 +3196,67 @@ export function createLocalEditorBrowserUi(options = {}) {
             return;
         if (readInspectorCommitMode(input) !== 'live')
             return;
-        const propertyInput = createInspectorPropertyInput(input, 'input');
-        if (propertyInput)
+        const propertyInputs = createInspectorPropertyInputs(input, 'input', lockedInspectorVectorGroups);
+        if (!propertyInputs)
+            return;
+        applyInspectorLockedVectorInputToDom(input, propertyInputs);
+        for (const propertyInput of propertyInputs)
+            callbacks.onPropertyInput?.(propertyInput);
+    });
+    inspectorPanel.addEventListener('paste', (event) => {
+        const input = event.target instanceof HTMLInputElement ? event.target : null;
+        const text = event.clipboardData?.getData('text/plain') ?? event.clipboardData?.getData('text') ?? '';
+        if (!input || !text)
+            return;
+        const payload = parseLocalEditorBrowserInspectorGroupValueClipboardPayload(text);
+        if (!payload)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const propertyInputs = createInspectorVectorPastePropertyInputs(input, payload);
+        if (!propertyInputs)
+            return;
+        applyInspectorVectorPasteToDom(input, payload);
+        for (const propertyInput of propertyInputs)
             callbacks.onPropertyInput?.(propertyInput);
     });
     inspectorPanel.addEventListener('click', (event) => {
         const target = event.target instanceof HTMLElement ? event.target : null;
+        const vectorLockButton = target?.closest('[data-editor-inspector-vector-lock]');
+        if (vectorLockButton) {
+            const groupPath = vectorLockButton.dataset.editorInspectorVectorLock;
+            if (!groupPath)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (lockedInspectorVectorGroups.has(groupPath))
+                lockedInspectorVectorGroups.delete(groupPath);
+            else
+                lockedInspectorVectorGroups.add(groupPath);
+            if (currentState)
+                render(currentState);
+            return;
+        }
+        const vectorCopyButton = target?.closest('[data-editor-inspector-vector-copy]');
+        if (vectorCopyButton) {
+            const value = vectorCopyButton.dataset.editorInspectorVectorCopyValue;
+            if (!value)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            copyTextToClipboard(doc.defaultView, value);
+            return;
+        }
+        const materialSlotSelectTarget = target?.closest('[data-editor-inspector-material-slot-select]');
+        const materialSlotSelectionId = materialSlotSelectTarget?.dataset.editorInspectorMaterialSlotSelect;
+        if (materialSlotSelectionId) {
+            callbacks.onSelectHierarchyItem?.({
+                id: materialSlotSelectionId,
+                additive: event.shiftKey && !event.metaKey && !event.ctrlKey,
+                toggle: event.metaKey || event.ctrlKey,
+            });
+            return;
+        }
         const copyButton = target?.closest('[data-editor-inspector-asset-copy]');
         if (copyButton) {
             const control = copyButton.closest('[data-editor-inspector-asset-picker-control]');
@@ -2836,8 +3293,11 @@ export function createLocalEditorBrowserUi(options = {}) {
             if (readInspectorCommitMode(input) !== 'change')
                 return;
         }
-        const propertyInput = createInspectorPropertyInput(input, readInspectorImmediateSource(input));
-        if (propertyInput)
+        const propertyInputs = createInspectorPropertyInputs(input, readInspectorImmediateSource(input), lockedInspectorVectorGroups);
+        if (!propertyInputs)
+            return;
+        applyInspectorLockedVectorInputToDom(input, propertyInputs);
+        for (const propertyInput of propertyInputs)
             callbacks.onPropertyInput?.(propertyInput);
     });
     inspectorPanel.addEventListener('focusout', (event) => {
@@ -2846,16 +3306,21 @@ export function createLocalEditorBrowserUi(options = {}) {
             return;
         if (readInspectorCommitMode(input) !== 'blur')
             return;
-        const propertyInput = createInspectorPropertyInput(input, 'input');
-        if (propertyInput)
+        const propertyInputs = createInspectorPropertyInputs(input, 'input', lockedInspectorVectorGroups);
+        if (!propertyInputs)
+            return;
+        applyInspectorLockedVectorInputToDom(input, propertyInputs);
+        for (const propertyInput of propertyInputs)
             callbacks.onPropertyInput?.(propertyInput);
     });
     renderingPanel.addEventListener('input', (event) => {
-        const input = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement
+        const input = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement
             ? event.target
             : null;
         if (!input?.dataset.editorRenderingProperty)
             return;
+        if (input instanceof HTMLSelectElement)
+            return;
         if (input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'color'))
             return;
         if (readRenderingCommitMode(input) !== 'live')
@@ -2865,7 +3330,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             callbacks.onRenderingPropertyChange?.(propertyInput);
     });
     renderingPanel.addEventListener('change', (event) => {
-        const input = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement
+        const input = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement
             ? event.target
             : null;
         if (!input?.dataset.editorRenderingProperty)
@@ -2879,11 +3344,13 @@ export function createLocalEditorBrowserUi(options = {}) {
             callbacks.onRenderingPropertyChange?.(propertyInput);
     });
     renderingPanel.addEventListener('focusout', (event) => {
-        const input = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement
+        const input = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement
             ? event.target
             : null;
         if (!input?.dataset.editorRenderingProperty)
             return;
+        if (input instanceof HTMLSelectElement)
+            return;
         if (readRenderingCommitMode(input) !== 'blur')
             return;
         const propertyInput = createRenderingPropertyInput(input, input instanceof HTMLTextAreaElement ? 'list' : 'input');
@@ -2891,14 +3358,27 @@ export function createLocalEditorBrowserUi(options = {}) {
             callbacks.onRenderingPropertyChange?.(propertyInput);
     });
     renderingPanel.addEventListener('click', (event) => {
-        const target = event.target instanceof Element
-            ? event.target.closest('[data-editor-rendering-action]')
-            : null;
-        if (!(target instanceof HTMLButtonElement))
+        const eventTarget = event.target instanceof HTMLElement ? event.target : null;
+        const pickerButton = eventTarget?.closest('[data-editor-inspector-asset-picker]');
+        if (pickerButton) {
+            const control = pickerButton.closest('[data-editor-inspector-asset-picker-control]');
+            const input = control?.querySelector('input[data-editor-rendering-property]');
+            if (!input || !currentState)
+                return;
+            const property = findRenderingPropertyForInput(currentState, input);
+            if (!property)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            openInspectorAssetPicker(input, property);
+            return;
+        }
+        const actionButton = eventTarget?.closest('[data-editor-rendering-action]');
+        if (!actionButton)
             return;
-        if (target.disabled)
+        if (actionButton.disabled)
             return;
-        const actionId = target.dataset.editorRenderingAction;
+        const actionId = actionButton.dataset.editorRenderingAction;
         if (!actionId)
             return;
         event.preventDefault();
@@ -2992,58 +3472,6 @@ export function createLocalEditorBrowserUi(options = {}) {
         }
     };
     doc.addEventListener('keydown', onKeyDown);
-    function captureEditableFocus(doc) {
-        const active = doc.activeElement instanceof HTMLInputElement ? doc.activeElement : null;
-        if (!active)
-            return null;
-        if (active.dataset.editorHierarchyRenameInput) {
-            return {
-                selector: `[data-editor-hierarchy-rename-input="${cssEscape(active.dataset.editorHierarchyRenameInput)}"]`,
-                value: active.value,
-            };
-        }
-        if (active.dataset.serializedPath && active.dataset.serializedTargetId) {
-            return {
-                selector: [
-                    `input[data-serialized-path="${cssEscape(active.dataset.serializedPath)}"]`,
-                    `[data-serialized-target-id="${cssEscape(active.dataset.serializedTargetId)}"]`,
-                ].join(''),
-                value: active.value,
-            };
-        }
-        if (active.dataset.editorInspectorSearch != null) {
-            return { selector: 'input[data-editor-inspector-search]', value: active.value };
-        }
-        if (active.dataset.editorHierarchySearch != null) {
-            return { selector: 'input[data-editor-hierarchy-search]', value: active.value };
-        }
-        if (active.dataset.editorAssetFilter != null) {
-            return { selector: 'input[data-editor-asset-filter]', value: active.value };
-        }
-        return null;
-    }
-    function restoreEditableFocus(doc, snapshot) {
-        if (!snapshot)
-            return;
-        const input = doc.querySelector(snapshot.selector);
-        if (!input)
-            return;
-        input.focus({ preventScroll: true });
-        if (snapshot.value != null && input.value === snapshot.value) {
-            const position = input.value.length;
-            try {
-                input.setSelectionRange(position, position);
-            }
-            catch {
-                // Number/search inputs may reject text selection APIs.
-            }
-        }
-    }
-    function cssEscape(value) {
-        return typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
-            ? CSS.escape(value)
-            : value.replace(/["\\]/g, '\\$&');
-    }
     function formatSnapStepInputValue(snap, kind) {
         const value = kind === 'move'
             ? snap.moveStep
@@ -3057,9 +3485,87 @@ export function createLocalEditorBrowserUi(options = {}) {
             ? operationState.canAlign
             : operationState.canDistribute;
     }
+    const renderPreviewState = (state) => {
+        const inEditor = state.mode === 'editor';
+        const disabled = state.busy;
+        const transformTool = state.transformTool ?? null;
+        const transformOperations = state.transformOperations ?? {
+            settings: DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS,
+            selectedCount: state.selectedIds.length,
+            activeId: state.activeId,
+            canAlign: false,
+            canDistribute: false,
+        };
+        const hasMeasurement = !!(state.viewportMeasurement?.start
+            || state.viewportMeasurement?.end
+            || state.viewportMeasurement?.preview);
+        const nextClearMeasurementDisplay = hasMeasurement ? 'inline-flex' : 'none';
+        const clearMeasurementDisplayChanged = clearMeasurementButton.style.display !== nextClearMeasurementDisplay;
+        clearMeasurementButton.style.display = nextClearMeasurementDisplay;
+        clearMeasurementButton.disabled = disabled || !hasMeasurement;
+        const editorStatusText = [
+            state.status,
+            state.session?.dirty ? '有未保存更改' : '',
+            LocalEditorShared.formatAuthoringSourceLabel(state.session?.source),
+            state.summary,
+        ].filter(Boolean).join(' | ');
+        const transformStatusText = transformTool?.dragPhase === 'dragging'
+            ? `正在拖拽 ${transformTool.draggingNodeId ?? '选择对象'}`
+            : LocalEditorShared.toTransformToolStatusLabel(transformTool?.activeTool ?? 'select', transformTool?.activeSpace ?? 'world');
+        const statusToneColor = state.statusTone === 'error'
+            ? 'var(--fps-editor-danger-strong)'
+            : state.statusTone === 'warning'
+                ? 'var(--fps-editor-warn)'
+                : state.statusTone === 'success'
+                    ? 'var(--fps-editor-success)'
+                    : 'var(--fps-editor-muted)';
+        setToolbarButtonTooltip(editorStatusButton, [
+            `编辑器状态：${editorStatusText}`,
+            state.statusDetails && state.statusDetails !== state.status ? state.statusDetails : '',
+            transformStatusText,
+            LocalEditorShared.toTransformOperationStatusLabel(transformOperations.settings),
+        ].filter(Boolean).join(' · '));
+        editorStatusButton.style.color = statusToneColor;
+        editorStatusButton.style.borderColor = state.statusTone == null || state.statusTone === 'default'
+            ? 'var(--fps-editor-border)'
+            : statusToneColor;
+        renderCoordinateAxesOverlay(coordinateAxesOverlay, inEditor ? state.coordinateAxes ?? null : null);
+        renderSceneFrameRateOverlay(sceneFrameRateOverlay, inEditor ? state.sceneFrameStats ?? null : null);
+        renderSpatialOverlay(spatialOverlay, inEditor ? state.viewportSpatialOverlay ?? null : null);
+        renderMeasurementOverlay(measurementOverlay, inEditor ? state.viewportMeasurement ?? null : null);
+        const boxSelection = state.boxSelection;
+        if (inEditor && boxSelection?.active) {
+            boxSelectionOverlay.style.display = '';
+            boxSelectionOverlay.style.left = `${boxSelection.left}px`;
+            boxSelectionOverlay.style.top = `${boxSelection.top}px`;
+            boxSelectionOverlay.style.width = `${boxSelection.width}px`;
+            boxSelectionOverlay.style.height = `${boxSelection.height}px`;
+        }
+        else {
+            boxSelectionOverlay.style.display = 'none';
+        }
+        if (clearMeasurementDisplayChanged)
+            scheduleToolbarOverflowLayout();
+    };
+    const updatePreview = (preview) => {
+        if (!currentState)
+            return;
+        const shouldRenderInspectorPreview = 'inspectorObject' in preview || 'inspectorMultiObject' in preview;
+        currentState = {
+            ...currentState,
+            ...preview,
+        };
+        renderPreviewState(currentState);
+        if (shouldRenderInspectorPreview && panelRegistry.getRightDockTab() === 'inspector') {
+            LocalEditorPanels.renderInspectorPanel(doc, inspectorPanel, currentState, inspectorFilter, {
+                ...options.inspector,
+                lockedVectorGroups: lockedInspectorVectorGroups,
+            });
+        }
+    };
     const render = (state) => {
         currentState = state;
-        const focusSnapshot = captureEditableFocus(doc);
+        const focusSnapshot = captureLocalEditorEditableFocus(doc);
         const inEditor = state.mode === 'editor';
         const disabled = state.busy;
         if (!inEditor || disabled)
@@ -3205,77 +3711,61 @@ export function createLocalEditorBrowserUi(options = {}) {
         undoButton.disabled = disabled || !state.session?.canUndo;
         redoButton.disabled = disabled || !state.session?.canRedo;
         LocalEditorShared.applyButtonActiveState(sceneHelpButton, inEditor && helpOpen);
-        shortcutHelpPanel.style.display = inEditor && helpOpen ? '' : 'none';
+        shortcutHelpPanel.style.display = inEditor && helpOpen ? 'flex' : 'none';
         renderAssetPreviewModal();
         renderAssetPickerModal();
         dirtyBadge.style.display = inEditor && state.session?.dirty ? 'inline-flex' : 'none';
-        const editorStatusText = [
-            state.status,
-            state.session?.dirty ? '有未保存更改' : '',
-            LocalEditorShared.formatAuthoringSourceLabel(state.session?.source),
-            state.summary,
-        ].filter(Boolean).join(' | ');
-        const transformStatusText = transformTool?.dragPhase === 'dragging'
-            ? `正在拖拽 ${transformTool.draggingNodeId ?? '选择对象'}`
-            : LocalEditorShared.toTransformToolStatusLabel(transformTool?.activeTool ?? 'select', transformTool?.activeSpace ?? 'world');
-        const statusToneColor = state.statusTone === 'error'
-            ? 'var(--fps-editor-danger-strong)'
-            : state.statusTone === 'warning'
-                ? 'var(--fps-editor-warn)'
-                : state.statusTone === 'success'
-                    ? 'var(--fps-editor-success)'
-                    : 'var(--fps-editor-muted)';
-        setToolbarButtonTooltip(editorStatusButton, [
-            `编辑器状态：${editorStatusText}`,
-            state.statusDetails && state.statusDetails !== state.status ? state.statusDetails : '',
-            transformStatusText,
-            LocalEditorShared.toTransformOperationStatusLabel(operationSettings),
-        ].filter(Boolean).join(' · '));
-        editorStatusButton.style.color = statusToneColor;
-        editorStatusButton.style.borderColor = state.statusTone == null || state.statusTone === 'default'
-            ? 'var(--fps-editor-border)'
-            : statusToneColor;
-        renderCoordinateAxesOverlay(coordinateAxesOverlay, inEditor ? state.coordinateAxes ?? null : null);
-        renderSceneFrameRateOverlay(sceneFrameRateOverlay, inEditor ? state.sceneFrameStats ?? null : null);
-        renderSpatialOverlay(spatialOverlay, inEditor ? state.viewportSpatialOverlay ?? null : null);
-        renderMeasurementOverlay(measurementOverlay, inEditor ? state.viewportMeasurement ?? null : null);
-        const boxSelection = state.boxSelection;
-        if (inEditor && boxSelection?.active) {
-            boxSelectionOverlay.style.display = '';
-            boxSelectionOverlay.style.left = `${boxSelection.left}px`;
-            boxSelectionOverlay.style.top = `${boxSelection.top}px`;
-            boxSelectionOverlay.style.width = `${boxSelection.width}px`;
-            boxSelectionOverlay.style.height = `${boxSelection.height}px`;
-        }
-        else {
-            boxSelectionOverlay.style.display = 'none';
-        }
+        renderPreviewState(state);
         scheduleToolbarOverflowLayout();
         if (!inEditor)
             return;
         const hierarchyDescriptor = panelRegistry.getActivePanel('left');
         const rightDescriptor = panelRegistry.getActivePanel('right');
         const activeRightTab = panelRegistry.getRightDockTab();
+        const activeBottomTab = panelRegistry.getBottomDockTab();
+        const assetBrowserTabChanged = assetBrowserTab !== lastRenderedAssetBrowserTab;
+        const bottomDockTabChanged = activeBottomTab !== lastRenderedBottomDockTab;
+        const selectedAssetChanged = state.selectedAssetId !== lastRenderedSelectedAssetId;
+        const assetBrowserScrollSnapshot = activeBottomTab === 'assets'
+            ? assetBrowserViewportReveal.captureScrollSnapshot()
+            : { scrollTop: null };
         hierarchyPanel.dataset.editorPanelId = hierarchyDescriptor?.id ?? 'hierarchy';
         inspectorPanel.dataset.editorPanelId = activeRightTab === 'inspector' ? rightDescriptor?.id ?? 'inspector' : 'inspector';
         renderingPanel.dataset.editorPanelId = activeRightTab === 'rendering' ? rightDescriptor?.id ?? 'rendering' : 'rendering';
         inspectorPanel.style.display = activeRightTab === 'inspector' ? '' : 'none';
         renderingPanel.style.display = activeRightTab === 'rendering' ? '' : 'none';
+        LocalEditorPanels.renderWorkbenchLeftDockTabs(doc, leftDockTabs, 'hierarchy', panelRegistry.getPanels('left'));
         hierarchyController.render(state);
-        LocalEditorPanels.renderWorkbenchBottomDockPanel(doc, assetPanel, state, panelRegistry.getBottomDockTab(), panelRegistry.getPanels('bottom'), assetBrowserTab);
+        LocalEditorPanels.renderWorkbenchBottomDockPanel(doc, assetPanel, state, activeBottomTab, panelRegistry.getPanels('bottom'), assetBrowserTab);
+        if (activeBottomTab === 'assets' && !assetBrowserTabChanged && !bottomDockTabChanged) {
+            assetBrowserViewportReveal.restoreScrollSnapshot(assetBrowserScrollSnapshot);
+        }
+        const suppressAssetScroll = state.selectedAssetId
+            ? assetBrowserViewportReveal.consumeRevealSuppression(state.selectedAssetId, { clearWhenDifferent: selectedAssetChanged })
+            : false;
+        if (activeBottomTab === 'assets' && selectedAssetChanged && state.selectedAssetId && !suppressAssetScroll) {
+            revealSelectedAssetBrowserItem(state.selectedAssetId);
+        }
+        lastRenderedAssetBrowserTab = assetBrowserTab;
+        lastRenderedBottomDockTab = activeBottomTab;
+        lastRenderedSelectedAssetId = state.selectedAssetId;
         LocalEditorPanels.renderWorkbenchRightDockTabs(doc, rightDockTabs, activeRightTab, panelRegistry.getPanels('right'));
         if (activeRightTab === 'inspector') {
-            LocalEditorPanels.renderInspectorPanel(doc, inspectorPanel, state, inspectorFilter, options.inspector);
+            LocalEditorPanels.renderInspectorPanel(doc, inspectorPanel, state, inspectorFilter, {
+                ...options.inspector,
+                lockedVectorGroups: lockedInspectorVectorGroups,
+            });
         }
         else {
             LocalEditorPanels.renderRenderingPanel(doc, renderingPanel, state);
         }
-        restoreEditableFocus(doc, focusSnapshot);
+        restoreLocalEditorEditableFocus(doc, focusSnapshot);
     };
     return {
         update(state) {
             render(state);
         },
+        updatePreview,
         updateSceneFrameStats(stats) {
             renderSceneFrameRateOverlay(sceneFrameRateOverlay, currentState?.mode === 'editor' ? stats : null);
         },