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

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

@@ -1,18 +1,21 @@
 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 { DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS, DEFAULT_EDITOR_TRANSFORM_TOOL_DESCRIPTORS, } from '@fps-games/editor-core';
-export { createLocalEditorHierarchyBlankMenu, createLocalEditorHierarchyCopyShortcutAction, createLocalEditorHierarchyDeleteShortcutAction, createLocalEditorHierarchyDuplicateShortcutAction, createLocalEditorHierarchyNodeMenu, createLocalEditorHierarchyPasteShortcutAction, } from './local-editor-ui-hierarchy-actions';
+export { createLocalEditorHierarchyBlankMenu, createLocalEditorHierarchyCopyShortcutAction, createLocalEditorHierarchyDeleteShortcutAction, createLocalEditorHierarchyDuplicateShortcutAction, createLocalEditorHierarchyNodeMenu, createLocalEditorHierarchyPasteShortcutAction, createLocalEditorHierarchySelectAllShortcutAction, } from './local-editor-ui-hierarchy-actions';
 export { createLocalEditorHierarchyController, } from './local-editor-ui-hierarchy-controller';
 export { canLocalEditorHierarchyNodeHaveChildren, createLocalEditorHierarchyTreeModel, isLocalEditorHierarchyNodeMovable, } from './local-editor-ui-hierarchy-tree';
 export { createLocalEditorContextMenuController, } from './local-editor-ui-context-menu';
+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';
-export { applyLocalEditorBrowserInspectorControlBinding, createLocalEditorBrowserInspectorControlRegistry, formatLocalEditorBrowserInspectorValue, resolveLocalEditorBrowserInspectorControlRegistration, } from './local-editor-ui-panels';
+import { createLocalEditorIcon } from './local-editor-ui-icons';
+export { applyLocalEditorBrowserInspectorControlBinding, createLocalEditorBrowserInspectorControlRegistry, formatLocalEditorBrowserInspectorValue, 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';
 function readInspectorInputValue(input) {
@@ -67,6 +70,84 @@ const PLACEMENT_MODE_ICONS = {
     ground: 'place-ground',
     surface: 'place-surface',
 };
+const PLACEMENT_MODE_DESCRIPTIONS = {
+    off: '关闭放置模式',
+    ground: '放置到 XZ 地面',
+    surface: '放置到场景表面',
+};
+const VIEW_PRESET_ICONS = {
+    perspective: 'view-perspective',
+    top: 'view-top',
+    front: 'view-front',
+    right: 'view-right',
+};
+const VIEW_PRESET_TOOLTIPS = {
+    perspective: '透视视图',
+    top: '顶视图 · 自动切换正交',
+    front: '前视图 · 自动切换正交',
+    right: '右视图 · 自动切换正交',
+};
+const VIEWPORT_OVERLAY_TOGGLE_LABELS = {
+    bounds: '包围盒',
+    dimensions: '尺寸摘要',
+    edgeLengths: '边长标注',
+    anchor: '锚点坐标',
+};
+const VIEWPORT_PROJECTION_LABELS = {
+    perspective: '透视',
+    orthographic: '正交',
+};
+const TRANSFORM_ACTION_GROUPS = [
+    {
+        title: '对齐到 Active Object',
+        hint: '需要至少 2 个选中对象',
+        actions: ['align-x', 'align-y', 'align-z', 'align-all'],
+    },
+    {
+        title: '均匀分布',
+        hint: '需要至少 3 个选中对象',
+        actions: ['distribute-x', 'distribute-y', 'distribute-z'],
+    },
+];
+const TRANSFORM_ACTION_LABELS = {
+    'align-x': '对齐 X',
+    'align-y': '对齐 Y',
+    'align-z': '对齐 Z',
+    'align-all': '对齐全',
+    'distribute-x': '分布 X',
+    'distribute-y': '分布 Y',
+    'distribute-z': '分布 Z',
+};
+function createTransformToolTooltip(descriptor) {
+    const toolLabel = descriptor.shortcut
+        ? `${descriptor.label}工具 (${descriptor.shortcut})`
+        : `${descriptor.label}工具`;
+    return `${toolLabel} · ${LocalEditorShared.toTransformMouseHint(descriptor.tool)}`;
+}
+function createToolbarIconButton(doc, label, icon, tooltip = label, toolbarRole = 'command') {
+    return LocalEditorShared.createButton(doc, label, {
+        icon,
+        labelMode: 'icon-only',
+        variant: 'toolbar-icon',
+        tooltip,
+        ariaLabel: tooltip,
+        toolbarRole,
+    });
+}
+function setToolbarButtonTooltip(button, tooltip) {
+    button.dataset.editorTooltip = tooltip;
+    button.setAttribute('aria-label', tooltip);
+}
+function setToolbarButtonIcon(doc, button, icon) {
+    const currentIcon = button.querySelector('[data-editor-icon]');
+    if (currentIcon?.dataset.editorIcon === icon)
+        return;
+    const nextIcon = createLocalEditorIcon(doc, icon);
+    if (currentIcon)
+        currentIcon.replaceWith(nextIcon);
+    else
+        button.prepend(nextIcon);
+}
 function readInspectorVectorInputValue(input) {
     const wrapper = input.closest('[data-inspector-vector-control]');
     const values = {};
@@ -112,6 +193,377 @@ function readInspectorImmediateSource(input) {
         return 'color';
     return 'input';
 }
+function createCoordinateAxesOverlay(doc) {
+    const root = doc.createElement('div');
+    root.dataset.editorCoordinateAxesOverlay = 'true';
+    root.style.cssText = [
+        'position:absolute',
+        'right:14px',
+        'bottom:14px',
+        'width:112px',
+        'height:112px',
+        'display:none',
+        'z-index:2',
+        'box-sizing:border-box',
+        'border:1px solid color-mix(in srgb, var(--fps-editor-border) 78%, transparent)',
+        'border-radius:8px',
+        'background:color-mix(in srgb, var(--fps-editor-chrome) 58%, transparent)',
+        'box-shadow:var(--fps-editor-shadow-panel)',
+        'pointer-events:none',
+        'overflow:hidden',
+    ].join(';');
+    const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 112 112');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.style.cssText = 'display:block;width:100%;height:100%';
+    root.appendChild(svg);
+    const lineLayer = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+    const labelLayer = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+    svg.appendChild(lineLayer);
+    svg.appendChild(labelLayer);
+    const axisGroups = new Map();
+    const axisLines = new Map();
+    const axisLabels = new Map();
+    const axisDiscs = new Map();
+    for (const axis of ['x', 'y', 'z']) {
+        const group = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+        const line = doc.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('stroke-width', '3.2');
+        line.setAttribute('stroke-linecap', 'round');
+        line.setAttribute('x1', '56');
+        line.setAttribute('y1', '56');
+        const disc = doc.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        disc.setAttribute('r', '7');
+        const label = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+        label.setAttribute('text-anchor', 'middle');
+        label.setAttribute('dominant-baseline', 'middle');
+        label.setAttribute('dy', '0.04em');
+        label.style.cssText = [
+            'fill:#172033',
+            'font-size:10px',
+            'font-weight:900',
+            'font-family:Arial, Helvetica, sans-serif',
+            'letter-spacing:0',
+        ].join(';');
+        group.appendChild(disc);
+        group.appendChild(label);
+        lineLayer.appendChild(line);
+        labelLayer.appendChild(group);
+        axisGroups.set(axis, group);
+        axisLines.set(axis, line);
+        axisLabels.set(axis, label);
+        axisDiscs.set(axis, disc);
+    }
+    const centerDot = doc.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    centerDot.setAttribute('cx', '56');
+    centerDot.setAttribute('cy', '56');
+    centerDot.setAttribute('r', '3.2');
+    centerDot.setAttribute('fill', 'color-mix(in srgb, var(--fps-editor-text) 82%, transparent)');
+    labelLayer.appendChild(centerDot);
+    return {
+        root,
+        lineLayer,
+        labelLayer,
+        axisGroups,
+        axisLines,
+        axisLabels,
+        axisDiscs,
+        centerDot,
+    };
+}
+function renderCoordinateAxesOverlay(overlay, state) {
+    if (!state?.axes?.length) {
+        overlay.root.style.display = 'none';
+        return;
+    }
+    overlay.root.style.display = '';
+    const center = 56;
+    const lineLength = 38;
+    const sortedAxes = [...state.axes].sort((left, right) => right.depth - left.depth);
+    for (const axis of sortedAxes) {
+        const group = overlay.axisGroups.get(axis.id);
+        const line = overlay.axisLines.get(axis.id);
+        const disc = overlay.axisDiscs.get(axis.id);
+        const label = overlay.axisLabels.get(axis.id);
+        if (!group || !line || !disc || !label)
+            continue;
+        const length = lineLength * axis.scale;
+        const endX = center + axis.x * length;
+        const endY = center + axis.y * length;
+        line.setAttribute('x2', formatSvgNumber(endX));
+        line.setAttribute('y2', formatSvgNumber(endY));
+        line.setAttribute('stroke', axis.color);
+        disc.setAttribute('cx', formatSvgNumber(endX));
+        disc.setAttribute('cy', formatSvgNumber(endY));
+        disc.setAttribute('fill', axis.color);
+        label.setAttribute('x', formatSvgNumber(endX));
+        label.setAttribute('y', formatSvgNumber(endY));
+        label.textContent = axis.label;
+        group.style.opacity = String(0.72 + axis.scale * 0.28);
+        overlay.lineLayer.appendChild(line);
+        overlay.labelLayer.appendChild(group);
+    }
+    overlay.labelLayer.appendChild(overlay.centerDot);
+}
+function createSpatialOverlay(doc) {
+    const root = doc.createElement('div');
+    root.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    root.dataset.editorSpatialOverlay = 'true';
+    root.style.cssText = [
+        'position:absolute',
+        'top:38px',
+        'left:0',
+        'right:0',
+        'bottom:0',
+        'z-index:1',
+        'display:none',
+        'pointer-events:none',
+        'font-family:var(--fps-editor-font)',
+        'color:var(--fps-editor-text)',
+        'overflow:hidden',
+    ].join(';');
+    const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.style.cssText = [
+        'position:absolute',
+        'inset:0',
+        'width:100%',
+        'height:100%',
+        'overflow:hidden',
+    ].join(';');
+    const lineLayer = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+    const markerLayer = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+    svg.appendChild(lineLayer);
+    svg.appendChild(markerLayer);
+    root.appendChild(svg);
+    const labelLayer = doc.createElement('div');
+    labelLayer.style.cssText = 'position:absolute;inset:0;pointer-events:none';
+    root.appendChild(labelLayer);
+    return {
+        root,
+        svg,
+        lineLayer,
+        markerLayer,
+        labelLayer,
+        lines: new Map(),
+        markers: new Map(),
+        labels: new Map(),
+    };
+}
+function renderSpatialOverlay(overlay, state) {
+    if (!state?.active) {
+        overlay.root.style.display = 'none';
+        clearSpatialOverlayElements(overlay);
+        return;
+    }
+    overlay.root.style.display = '';
+    const rect = overlay.root.getBoundingClientRect();
+    overlay.svg.setAttribute('width', formatSvgNumber(rect.width));
+    overlay.svg.setAttribute('height', formatSvgNumber(rect.height));
+    overlay.svg.setAttribute('viewBox', `0 0 ${formatSvgNumber(rect.width)} ${formatSvgNumber(rect.height)}`);
+    const visibleLineIds = new Set();
+    for (const lineState of state.lines) {
+        const line = ensureSpatialOverlayLine(overlay, lineState.id);
+        line.setAttribute('x1', formatSvgNumber(lineState.start.x - rect.left));
+        line.setAttribute('y1', formatSvgNumber(lineState.start.y - rect.top));
+        line.setAttribute('x2', formatSvgNumber(lineState.end.x - rect.left));
+        line.setAttribute('y2', formatSvgNumber(lineState.end.y - rect.top));
+        visibleLineIds.add(lineState.id);
+    }
+    for (const [id, line] of overlay.lines) {
+        if (!visibleLineIds.has(id)) {
+            line.remove();
+            overlay.lines.delete(id);
+        }
+    }
+    const visibleMarkerIds = new Set();
+    for (const markerState of state.markers) {
+        const marker = ensureSpatialOverlayMarker(overlay, markerState.id);
+        marker.setAttribute('cx', formatSvgNumber(markerState.position.x - rect.left));
+        marker.setAttribute('cy', formatSvgNumber(markerState.position.y - rect.top));
+        visibleMarkerIds.add(markerState.id);
+    }
+    for (const [id, marker] of overlay.markers) {
+        if (!visibleMarkerIds.has(id)) {
+            marker.remove();
+            overlay.markers.delete(id);
+        }
+    }
+    const visibleLabelIds = new Set();
+    for (const labelState of state.labels) {
+        const label = ensureSpatialOverlayLabel(overlay, labelState.id, labelState.kind);
+        label.textContent = labelState.text;
+        label.style.left = `${labelState.x - rect.left}px`;
+        label.style.top = `${labelState.y - rect.top}px`;
+        visibleLabelIds.add(labelState.id);
+    }
+    for (const [id, label] of overlay.labels) {
+        if (!visibleLabelIds.has(id)) {
+            label.remove();
+            overlay.labels.delete(id);
+        }
+    }
+}
+function clearSpatialOverlayElements(overlay) {
+    for (const line of overlay.lines.values())
+        line.remove();
+    for (const marker of overlay.markers.values())
+        marker.remove();
+    for (const label of overlay.labels.values())
+        label.remove();
+    overlay.lines.clear();
+    overlay.markers.clear();
+    overlay.labels.clear();
+}
+function ensureSpatialOverlayLine(overlay, id) {
+    const existing = overlay.lines.get(id);
+    if (existing)
+        return existing;
+    const line = overlay.root.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('stroke', 'color-mix(in srgb, var(--fps-editor-drop-target) 82%, white)');
+    line.setAttribute('stroke-width', '1.4');
+    line.setAttribute('stroke-linecap', 'round');
+    line.setAttribute('vector-effect', 'non-scaling-stroke');
+    line.style.filter = 'drop-shadow(0 1px 2px rgba(0,0,0,0.45))';
+    overlay.lineLayer.appendChild(line);
+    overlay.lines.set(id, line);
+    return line;
+}
+function ensureSpatialOverlayMarker(overlay, id) {
+    const existing = overlay.markers.get(id);
+    if (existing)
+        return existing;
+    const marker = overlay.root.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    marker.setAttribute('r', '4.5');
+    marker.setAttribute('fill', 'var(--fps-editor-drop-target)');
+    marker.setAttribute('stroke', 'var(--fps-editor-panel)');
+    marker.setAttribute('stroke-width', '2');
+    marker.style.filter = 'drop-shadow(0 1px 2px rgba(0,0,0,0.5))';
+    overlay.markerLayer.appendChild(marker);
+    overlay.markers.set(id, marker);
+    return marker;
+}
+function ensureSpatialOverlayLabel(overlay, id, kind) {
+    const existing = overlay.labels.get(id);
+    if (existing)
+        return existing;
+    const label = overlay.root.ownerDocument.createElement('div');
+    label.dataset.editorSpatialOverlayLabel = kind;
+    label.style.cssText = [
+        'position:absolute',
+        'transform:translate(-50%, -50%)',
+        'max-width:220px',
+        'padding:2px 5px',
+        'border:1px solid color-mix(in srgb, var(--fps-editor-border) 82%, transparent)',
+        'border-radius:3px',
+        'background:color-mix(in srgb, var(--fps-editor-panel) 88%, transparent)',
+        'box-shadow:0 1px 4px rgba(0,0,0,0.22)',
+        'color:var(--fps-editor-text-strong)',
+        'font-size:10px',
+        'font-weight:900',
+        'line-height:1.25',
+        'letter-spacing:0',
+        'white-space:nowrap',
+    ].join(';');
+    if (kind === 'anchor')
+        label.style.color = 'var(--fps-editor-drop-target)';
+    overlay.labelLayer.appendChild(label);
+    overlay.labels.set(id, label);
+    return label;
+}
+function createMeasurementOverlay(doc) {
+    const root = doc.createElement('div');
+    root.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    root.dataset.editorMeasurementOverlay = 'true';
+    root.style.cssText = [
+        'position:absolute',
+        'top:38px',
+        'left:0',
+        'right:0',
+        'bottom:0',
+        'z-index:2',
+        'display:none',
+        'pointer-events:none',
+        'overflow:hidden',
+        'font-family:var(--fps-editor-font)',
+    ].join(';');
+    const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;overflow:hidden';
+    const line = doc.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('stroke', 'var(--fps-editor-drop-target)');
+    line.setAttribute('stroke-width', '2');
+    line.setAttribute('stroke-linecap', 'round');
+    line.setAttribute('vector-effect', 'non-scaling-stroke');
+    line.style.filter = 'drop-shadow(0 1px 2px rgba(0,0,0,0.5))';
+    const startMarker = createMeasurementMarker(doc);
+    const endMarker = createMeasurementMarker(doc);
+    svg.appendChild(line);
+    svg.appendChild(startMarker);
+    svg.appendChild(endMarker);
+    root.appendChild(svg);
+    const label = doc.createElement('div');
+    label.dataset.editorMeasurementLabel = 'true';
+    label.style.cssText = [
+        'position:absolute',
+        'transform:translate(-50%, -50%)',
+        'padding:3px 6px',
+        'border:1px solid color-mix(in srgb, var(--fps-editor-drop-target) 72%, var(--fps-editor-border))',
+        'border-radius:3px',
+        'background:color-mix(in srgb, var(--fps-editor-panel) 90%, transparent)',
+        'box-shadow:0 1px 4px rgba(0,0,0,0.24)',
+        'color:var(--fps-editor-text-strong)',
+        'font-size:10px',
+        'font-weight:900',
+        'line-height:1.25',
+        'letter-spacing:0',
+        'white-space:nowrap',
+    ].join(';');
+    root.appendChild(label);
+    return { root, svg, line, startMarker, endMarker, label };
+}
+function createMeasurementMarker(doc) {
+    const marker = doc.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    marker.setAttribute('r', '4');
+    marker.setAttribute('fill', 'var(--fps-editor-drop-target)');
+    marker.setAttribute('stroke', 'var(--fps-editor-panel)');
+    marker.setAttribute('stroke-width', '2');
+    return marker;
+}
+function renderMeasurementOverlay(overlay, state) {
+    const start = state?.screenStart ?? null;
+    const end = state?.screenEnd ?? state?.screenPreview ?? null;
+    if (!start || !end) {
+        overlay.root.style.display = 'none';
+        return;
+    }
+    overlay.root.style.display = '';
+    const rect = overlay.root.getBoundingClientRect();
+    overlay.svg.setAttribute('width', formatSvgNumber(rect.width));
+    overlay.svg.setAttribute('height', formatSvgNumber(rect.height));
+    overlay.svg.setAttribute('viewBox', `0 0 ${formatSvgNumber(rect.width)} ${formatSvgNumber(rect.height)}`);
+    const startX = start.x - rect.left;
+    const startY = start.y - rect.top;
+    const endX = end.x - rect.left;
+    const endY = end.y - rect.top;
+    overlay.line.setAttribute('x1', formatSvgNumber(startX));
+    overlay.line.setAttribute('y1', formatSvgNumber(startY));
+    overlay.line.setAttribute('x2', formatSvgNumber(endX));
+    overlay.line.setAttribute('y2', formatSvgNumber(endY));
+    overlay.startMarker.setAttribute('cx', formatSvgNumber(startX));
+    overlay.startMarker.setAttribute('cy', formatSvgNumber(startY));
+    overlay.endMarker.setAttribute('cx', formatSvgNumber(endX));
+    overlay.endMarker.setAttribute('cy', formatSvgNumber(endY));
+    overlay.label.textContent = state?.label?.text ?? '';
+    overlay.label.style.display = state?.label ? '' : 'none';
+    if (state?.label) {
+        overlay.label.style.left = `${state.label.x - rect.left}px`;
+        overlay.label.style.top = `${state.label.y - rect.top}px`;
+    }
+}
+function formatSvgNumber(value) {
+    return Number.isFinite(value) ? value.toFixed(2) : '0';
+}
 export function createLocalEditorBrowserUi(options = {}) {
     const doc = options.document ?? document;
     const root = options.root ?? doc.body;
@@ -123,6 +575,10 @@ export function createLocalEditorBrowserUi(options = {}) {
     const contextMenu = createLocalEditorContextMenuController(doc, (open) => {
         inputRouter.setContextMenuOpen(open);
     }, activeTheme);
+    const tooltipSurfaces = new Set();
+    const tooltipController = createLocalEditorTooltipController(doc, root, activeTheme, {
+        scope: () => tooltipSurfaces,
+    });
     let currentState = null;
     let inspectorFilter = '';
     const workbenchLayout = createDefaultLocalEditorWorkbenchLayout();
@@ -161,26 +617,29 @@ export function createLocalEditorBrowserUi(options = {}) {
     hostChrome.appendChild(hostModeLabel);
     hostChrome.appendChild(enterEditorButton);
     root.appendChild(hostChrome);
+    tooltipSurfaces.add(hostChrome);
     const dirtyBadge = doc.createElement('span');
+    dirtyBadge.dataset.editorDirtyBadge = 'true';
+    dirtyBadge.dataset.editorTooltip = '有未保存更改';
+    dirtyBadge.setAttribute('role', 'status');
+    dirtyBadge.setAttribute('aria-label', '有未保存更改');
     dirtyBadge.style.cssText = [
         'display:none',
-        'height:20px',
+        'width:8px',
+        'height:8px',
         'align-items:center',
-        'padding:0 7px',
+        'justify-content:center',
+        'padding:0',
         'border-radius:999px',
-        'background:var(--fps-editor-danger-soft)',
+        'background:var(--fps-editor-danger-strong)',
         'border:1px solid var(--fps-editor-danger-border)',
-        'color:var(--fps-editor-danger-text)',
-        'font-size:11px',
-        'font-weight:800',
+        'box-shadow:0 0 0 3px var(--fps-editor-danger-soft)',
     ].join(';');
-    dirtyBadge.textContent = '未保存';
     const saveButton = LocalEditorShared.createButton(doc, '保存场景', { icon: 'save' });
     const saveAndRunButton = LocalEditorShared.createButton(doc, '保存并运行', { icon: 'execute' });
     const discardRunButton = LocalEditorShared.createButton(doc, '放弃并运行', { icon: 'discard' });
-    const localTestButton = LocalEditorShared.createButton(doc, '本地测试', { icon: 'execute' });
+    const localTestButton = createToolbarIconButton(doc, '本地测试', 'execute', '打开本地测试操作');
     localTestButton.dataset.editorLocalTestToggle = 'true';
-    localTestButton.title = '打开本地测试操作';
     const localTestMenu = doc.createElement('div');
     localTestMenu.classList.add(LOCAL_EDITOR_THEME_CLASS);
     localTestMenu.dataset.editorLocalTestMenu = 'true';
@@ -210,20 +669,12 @@ export function createLocalEditorBrowserUi(options = {}) {
         'gap:4px',
     ].join(';');
     localTestGroup.appendChild(localTestButton);
-    const undoButton = LocalEditorShared.createButton(doc, '撤销', { icon: 'undo' });
-    const redoButton = LocalEditorShared.createButton(doc, '重做', { icon: 'redo' });
+    const undoButton = createToolbarIconButton(doc, '撤销', 'undo', '撤销');
+    const redoButton = createToolbarIconButton(doc, '重做', 'redo', '重做');
     let helpOpen = false;
-    const status = doc.createElement('span');
-    status.style.cssText = [
-        'flex:0 1 300px',
-        'min-width:120px',
-        'max-width:320px',
-        'overflow:hidden',
-        'text-overflow:ellipsis',
-        'white-space:nowrap',
-        'color:var(--fps-editor-muted)',
-        'font-size:11px',
-    ].join(';');
+    const editorStatusButton = createToolbarIconButton(doc, '编辑器状态', 'status', '编辑器状态');
+    editorStatusButton.dataset.editorStatusButton = 'true';
+    editorStatusButton.style.cursor = 'help';
     const workbench = createLocalEditorWorkbench(doc);
     const hierarchyPanel = createWorkbenchPanelContent(doc);
     const assetPanel = workbench.bottomDock;
@@ -231,6 +682,7 @@ export function createLocalEditorBrowserUi(options = {}) {
     workbench.leftDock.appendChild(hierarchyPanel);
     workbench.rightDock.appendChild(inspectorPanel);
     root.appendChild(workbench.root);
+    tooltipSurfaces.add(workbench.root);
     const workbenchLayoutController = createLocalEditorWorkbenchLayoutController(doc, workbench);
     const sceneToolOverlay = createSceneHeaderToolbar(doc);
     const sceneTitle = doc.createElement('div');
@@ -268,14 +720,15 @@ export function createLocalEditorBrowserUi(options = {}) {
     const toolButtons = new Map();
     const transformToolDescriptors = Object.values(DEFAULT_EDITOR_TRANSFORM_TOOL_DESCRIPTORS);
     for (const descriptor of transformToolDescriptors) {
-        const shortcut = descriptor.shortcut ? `${descriptor.shortcut} ` : '';
-        const button = LocalEditorShared.createButton(doc, `${shortcut}${descriptor.label}`, {
+        const tooltip = createTransformToolTooltip(descriptor);
+        const button = LocalEditorShared.createButton(doc, descriptor.label, {
             icon: TRANSFORM_TOOL_ICONS[descriptor.tool],
+            labelMode: 'icon-only',
+            variant: 'toolbar-icon',
+            tooltip,
+            ariaLabel: tooltip,
         });
         button.dataset.transformTool = descriptor.tool;
-        button.title = descriptor.handles.length > 0
-            ? `${descriptor.label} · ${descriptor.handles.map(handle => handle.label).join(' / ')}`
-            : descriptor.label;
         toolButtons.set(descriptor.tool, button);
         toolGroup.appendChild(button);
     }
@@ -288,21 +741,13 @@ export function createLocalEditorBrowserUi(options = {}) {
         'border-left:1px solid var(--fps-editor-divider)',
     ].join(';');
     const spaceButtons = {
-        world: LocalEditorShared.createButton(doc, '世界', { icon: TRANSFORM_SPACE_ICONS.world }),
-        local: LocalEditorShared.createButton(doc, '本地', { icon: TRANSFORM_SPACE_ICONS.local }),
+        world: createToolbarIconButton(doc, '世界', TRANSFORM_SPACE_ICONS.world, '世界坐标空间'),
+        local: createToolbarIconButton(doc, '本地', TRANSFORM_SPACE_ICONS.local, '本地坐标空间'),
     };
     for (const [space, button] of Object.entries(spaceButtons)) {
         button.dataset.transformSpace = space;
         spaceGroup.appendChild(button);
     }
-    const handleGroup = doc.createElement('div');
-    handleGroup.style.cssText = [
-        'display:flex',
-        'align-items:center',
-        'gap:4px',
-        'padding-left:8px',
-        'border-left:1px solid var(--fps-editor-divider)',
-    ].join(';');
     const snapGroup = doc.createElement('div');
     snapGroup.style.cssText = [
         'display:flex',
@@ -311,24 +756,71 @@ export function createLocalEditorBrowserUi(options = {}) {
         'padding-left:8px',
         'border-left:1px solid var(--fps-editor-divider)',
     ].join(';');
-    const snapButton = LocalEditorShared.createButton(doc, '吸附', { icon: 'snap' });
+    const snapButton = createToolbarIconButton(doc, '吸附设置', 'snap', '吸附设置', 'settings');
     snapButton.dataset.transformSnapToggle = 'true';
-    snapButton.title = '移动 / 旋转 / 缩放吸附';
+    const snapSettingsPopover = doc.createElement('div');
+    snapSettingsPopover.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    snapSettingsPopover.dataset.transformSnapSettingsPopover = 'true';
+    snapSettingsPopover.setAttribute('role', 'dialog');
+    snapSettingsPopover.setAttribute('aria-label', '吸附设置');
+    snapSettingsPopover.style.cssText = [
+        'position:fixed',
+        'z-index:2147483641',
+        'display:none',
+        'flex-direction:column',
+        'gap:8px',
+        'width:220px',
+        'padding:10px',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-panel)',
+        'box-shadow:var(--fps-editor-shadow-popover)',
+        'pointer-events:auto',
+    ].join(';');
+    const snapSettingsHeader = doc.createElement('label');
+    snapSettingsHeader.style.cssText = [
+        'display:flex',
+        'align-items:center',
+        'justify-content:space-between',
+        'gap:8px',
+        'color:var(--fps-editor-text)',
+        'font-size:12px',
+        'font-weight:900',
+    ].join(';');
+    const snapSettingsHeaderText = doc.createElement('span');
+    snapSettingsHeaderText.textContent = '启用吸附';
+    const snapEnabledInput = doc.createElement('input');
+    snapEnabledInput.type = 'checkbox';
+    snapEnabledInput.dataset.transformSnapEnabled = 'true';
+    snapSettingsHeader.appendChild(snapSettingsHeaderText);
+    snapSettingsHeader.appendChild(snapEnabledInput);
+    snapSettingsPopover.appendChild(snapSettingsHeader);
     const snapStepInputs = new Map();
-    for (const [kind, label, title] of [
-        ['move', 'M', '移动吸附步长'],
-        ['rotate', 'R', '旋转吸附角度'],
-        ['scale', 'S', '缩放吸附步长'],
+    for (const [kind, label, unit] of [
+        ['move', '位移', '单位'],
+        ['rotate', '旋转', '度'],
+        ['scale', '缩放', '倍数'],
     ]) {
+        const row = doc.createElement('label');
+        row.style.cssText = [
+            'display:grid',
+            'grid-template-columns:54px 1fr 34px',
+            'align-items:center',
+            'gap:8px',
+            'color:var(--fps-editor-muted-strong)',
+            'font-size:11px',
+            'font-weight:800',
+        ].join(';');
+        const rowLabel = doc.createElement('span');
+        rowLabel.textContent = label;
         const input = doc.createElement('input');
         input.type = 'number';
         input.min = '0.0001';
         input.step = kind === 'rotate' ? '1' : '0.1';
         input.dataset.transformSnapStep = kind;
-        input.title = `${label} · ${title}`;
         input.style.cssText = [
-            'width:46px',
             'height:26px',
+            'min-width:0',
             'box-sizing:border-box',
             'border:1px solid var(--fps-editor-border)',
             'border-radius:3px',
@@ -338,11 +830,16 @@ export function createLocalEditorBrowserUi(options = {}) {
             'font-weight:800',
             'padding:0 4px',
         ].join(';');
+        const rowUnit = doc.createElement('span');
+        rowUnit.textContent = unit;
+        rowUnit.style.cssText = 'color:var(--fps-editor-muted);font-size:10px;font-weight:800';
+        row.appendChild(rowLabel);
+        row.appendChild(input);
+        row.appendChild(rowUnit);
+        snapSettingsPopover.appendChild(row);
         snapStepInputs.set(kind, input);
     }
     snapGroup.appendChild(snapButton);
-    for (const input of snapStepInputs.values())
-        snapGroup.appendChild(input);
     const placementGroup = doc.createElement('div');
     placementGroup.style.cssText = [
         'display:flex',
@@ -351,22 +848,40 @@ export function createLocalEditorBrowserUi(options = {}) {
         'padding-left:8px',
         'border-left:1px solid var(--fps-editor-divider)',
     ].join(';');
-    const placementLabel = doc.createElement('span');
-    placementLabel.textContent = '放置';
-    placementLabel.style.cssText = 'color:var(--fps-editor-muted);font-size:11px;font-weight:900;white-space:nowrap';
-    const placementButtons = {
-        off: LocalEditorShared.createButton(doc, '关', { icon: PLACEMENT_MODE_ICONS.off }),
-        ground: LocalEditorShared.createButton(doc, '地', { icon: PLACEMENT_MODE_ICONS.ground }),
-        surface: LocalEditorShared.createButton(doc, '表', { icon: PLACEMENT_MODE_ICONS.surface }),
-    };
-    placementButtons.off.title = '关闭放置模式';
-    placementButtons.ground.title = '放置到 XZ 地面';
-    placementButtons.surface.title = '放置到场景表面';
-    placementGroup.appendChild(placementLabel);
-    for (const [mode, button] of Object.entries(placementButtons)) {
+    const placementButton = createToolbarIconButton(doc, '放置模式', PLACEMENT_MODE_ICONS.off, '放置模式', 'settings');
+    placementButton.dataset.placementModeToggle = 'true';
+    const placementSettingsPopover = doc.createElement('div');
+    placementSettingsPopover.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    placementSettingsPopover.dataset.placementSettingsPopover = 'true';
+    placementSettingsPopover.setAttribute('role', 'dialog');
+    placementSettingsPopover.setAttribute('aria-label', '放置模式');
+    placementSettingsPopover.style.cssText = [
+        'position:fixed',
+        'z-index:2147483641',
+        'display:none',
+        'flex-direction:column',
+        'gap:5px',
+        'width:180px',
+        'padding:8px',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-panel)',
+        'box-shadow:var(--fps-editor-shadow-popover)',
+        'pointer-events:auto',
+    ].join(';');
+    const placementButtons = Object.fromEntries(Object.keys(PLACEMENT_MODE_ICONS).map((mode) => {
+        const button = LocalEditorShared.createButton(doc, PLACEMENT_MODE_DESCRIPTIONS[mode], {
+            icon: PLACEMENT_MODE_ICONS[mode],
+            tooltip: PLACEMENT_MODE_DESCRIPTIONS[mode],
+            ariaLabel: PLACEMENT_MODE_DESCRIPTIONS[mode],
+        });
         button.dataset.placementMode = mode;
-        placementGroup.appendChild(button);
-    }
+        button.style.justifyContent = 'flex-start';
+        button.style.width = '100%';
+        placementSettingsPopover.appendChild(button);
+        return [mode, button];
+    }));
+    placementGroup.appendChild(placementButton);
     const actionGroup = doc.createElement('div');
     actionGroup.style.cssText = [
         'display:flex',
@@ -375,70 +890,73 @@ export function createLocalEditorBrowserUi(options = {}) {
         'padding-left:8px',
         'border-left:1px solid var(--fps-editor-divider)',
     ].join(';');
-    const transformActionSelect = doc.createElement('select');
-    transformActionSelect.dataset.transformActionSelect = 'true';
-    transformActionSelect.title = '多选对齐 / 分布';
-    transformActionSelect.style.cssText = [
-        'height:26px',
+    const transformActionButton = createToolbarIconButton(doc, '对齐与分布', 'arrange', '对齐与分布', 'settings');
+    transformActionButton.dataset.transformActionToggle = 'true';
+    const transformActionPopover = doc.createElement('div');
+    transformActionPopover.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    transformActionPopover.dataset.transformActionPopover = 'true';
+    transformActionPopover.setAttribute('role', 'dialog');
+    transformActionPopover.setAttribute('aria-label', '对齐与分布');
+    transformActionPopover.style.cssText = [
+        'position:fixed',
+        'z-index:2147483641',
+        'display:none',
+        'flex-direction:column',
+        'gap:9px',
+        'width:236px',
+        'padding:10px',
         'border:1px solid var(--fps-editor-border)',
         'border-radius:3px',
-        'background:var(--fps-editor-field)',
-        'color:var(--fps-editor-text)',
-        'font-size:11px',
-        'font-weight:800',
-        'padding:0 4px',
+        'background:var(--fps-editor-panel)',
+        'box-shadow:var(--fps-editor-shadow-popover)',
+        'pointer-events:auto',
     ].join(';');
-    let selectedTransformAction = 'align-all';
-    for (const action of [
-        'align-x',
-        'align-y',
-        'align-z',
-        'align-all',
-        'distribute-x',
-        'distribute-y',
-        'distribute-z',
-    ]) {
-        const option = doc.createElement('option');
-        option.value = action;
-        option.textContent = LocalEditorShared.toTransformActionLabel(action);
-        transformActionSelect.appendChild(option);
+    const transformActionButtons = new Map();
+    for (const group of TRANSFORM_ACTION_GROUPS) {
+        const section = doc.createElement('section');
+        section.style.cssText = 'display:flex;flex-direction:column;gap:5px';
+        const heading = doc.createElement('div');
+        heading.textContent = group.title;
+        heading.style.cssText = [
+            'color:var(--fps-editor-text-strong)',
+            'font-size:11px',
+            'font-weight:900',
+        ].join(';');
+        const hint = doc.createElement('div');
+        hint.textContent = group.hint;
+        hint.style.cssText = [
+            'color:var(--fps-editor-muted)',
+            'font-size:10px',
+            'font-weight:700',
+            'margin-top:-3px',
+        ].join(';');
+        section.appendChild(heading);
+        section.appendChild(hint);
+        for (const action of group.actions) {
+            const button = LocalEditorShared.createButton(doc, TRANSFORM_ACTION_LABELS[action], {
+                icon: 'arrange',
+                tooltip: TRANSFORM_ACTION_LABELS[action],
+                ariaLabel: TRANSFORM_ACTION_LABELS[action],
+            });
+            button.dataset.transformAction = action;
+            button.style.justifyContent = 'flex-start';
+            button.style.width = '100%';
+            transformActionButtons.set(action, button);
+            section.appendChild(button);
+        }
+        transformActionPopover.appendChild(section);
     }
-    transformActionSelect.value = selectedTransformAction;
-    const transformActionButton = LocalEditorShared.createButton(doc, '执行', { icon: 'execute' });
-    transformActionButton.dataset.transformActionRun = 'true';
-    transformActionButton.title = '对当前多选执行 Transform 操作';
-    actionGroup.appendChild(transformActionSelect);
     actionGroup.appendChild(transformActionButton);
-    const sceneToolStatus = doc.createElement('span');
-    sceneToolStatus.style.cssText = [
-        'max-width:220px',
-        'overflow:hidden',
-        'text-overflow:ellipsis',
-        'white-space:nowrap',
-        'color:var(--fps-editor-muted-strong)',
-        'font-size:11px',
-    ].join(';');
-    const sceneMouseHint = doc.createElement('span');
-    sceneMouseHint.style.cssText = [
-        'padding-left:8px',
-        'border-left:1px solid var(--fps-editor-divider)',
-        'max-width:360px',
-        'overflow:hidden',
-        'text-overflow:ellipsis',
-        'white-space:nowrap',
-        'color:var(--fps-editor-muted)',
-        'font-size:11px',
-    ].join(';');
-    sceneMouseHint.textContent = '左键选择 · 空白拖拽框选 · 中键平移 · Alt+左键环绕 · 右键飞行 · 滚轮缩放';
-    const themeToggleButton = LocalEditorShared.createButton(doc, '主题', { icon: 'theme' });
+    const themeToggleButton = createToolbarIconButton(doc, '主题', 'theme', '切换主题');
     themeToggleButton.dataset.editorThemeToggle = 'true';
-    themeToggleButton.style.padding = '5px 7px';
-    const sceneHelpButton = LocalEditorShared.createButton(doc, '快捷键', { icon: 'help' });
-    sceneHelpButton.style.padding = '5px 7px';
+    const gridToggleButton = createToolbarIconButton(doc, '网格', 'grid', '显示 / 隐藏 Scene View 网格');
+    gridToggleButton.dataset.editorGridToggle = 'true';
+    const sceneHelpButton = createToolbarIconButton(doc, '快捷键', 'help', '快捷键与操作说明');
     sceneQuickActions.appendChild(localTestGroup);
     sceneQuickActions.appendChild(undoButton);
     sceneQuickActions.appendChild(redoButton);
     sceneQuickActions.appendChild(dirtyBadge);
+    sceneUtilityActions.appendChild(gridToggleButton);
     sceneUtilityActions.appendChild(themeToggleButton);
     sceneUtilityActions.appendChild(sceneHelpButton);
     const cameraPreviewGroup = doc.createElement('div');
@@ -449,13 +967,79 @@ export function createLocalEditorBrowserUi(options = {}) {
         'padding-left:8px',
         'border-left:1px solid var(--fps-editor-divider)',
     ].join(';');
-    const sceneCameraButton = LocalEditorShared.createButton(doc, 'Scene Camera', { icon: 'camera' });
+    const sceneCameraButton = createToolbarIconButton(doc, '从 Main Camera 查看场景', 'camera');
     sceneCameraButton.dataset.sceneCameraPreviewToggle = 'true';
-    sceneCameraButton.title = '从 Main Camera 查看当前场景';
     cameraPreviewGroup.appendChild(sceneCameraButton);
-    const toolbarOverflowButton = LocalEditorShared.createButton(doc, '更多', { icon: 'chevron-down' });
+    const viewportToolsGroup = doc.createElement('div');
+    viewportToolsGroup.style.cssText = [
+        'display:flex',
+        'align-items:center',
+        'gap:4px',
+        'padding-left:8px',
+        'border-left:1px solid var(--fps-editor-divider)',
+    ].join(';');
+    const viewportPresetButtons = new Map();
+    for (const preset of ['perspective', 'top', 'front', 'right']) {
+        const button = createToolbarIconButton(doc, VIEW_PRESET_TOOLTIPS[preset], VIEW_PRESET_ICONS[preset], VIEW_PRESET_TOOLTIPS[preset]);
+        button.dataset.viewportViewPreset = preset;
+        viewportPresetButtons.set(preset, button);
+        viewportToolsGroup.appendChild(button);
+    }
+    const projectionToggleButton = createToolbarIconButton(doc, '投影模式', 'projection-perspective', '切换投影模式');
+    projectionToggleButton.dataset.viewportProjectionToggle = 'true';
+    viewportToolsGroup.appendChild(projectionToggleButton);
+    const overlaySettingsButton = createToolbarIconButton(doc, '视口信息层设置', 'view-overlay', '视口信息层设置', 'settings');
+    overlaySettingsButton.dataset.viewportOverlaySettingsToggle = 'true';
+    viewportToolsGroup.appendChild(overlaySettingsButton);
+    const measureButton = createToolbarIconButton(doc, '测量距离', 'measure', '测量 XZ 地面距离', 'toggle');
+    measureButton.dataset.viewportMeasureToggle = 'true';
+    viewportToolsGroup.appendChild(measureButton);
+    const clearMeasurementButton = createToolbarIconButton(doc, '清除测量结果', 'discard', '清除测量结果');
+    clearMeasurementButton.dataset.viewportMeasurementClear = 'true';
+    viewportToolsGroup.appendChild(clearMeasurementButton);
+    const overlaySettingsPopover = doc.createElement('div');
+    overlaySettingsPopover.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    overlaySettingsPopover.dataset.viewportOverlaySettingsPopover = 'true';
+    overlaySettingsPopover.setAttribute('role', 'dialog');
+    overlaySettingsPopover.setAttribute('aria-label', '视口信息层设置');
+    overlaySettingsPopover.style.cssText = [
+        'position:fixed',
+        'z-index:2147483641',
+        'display:none',
+        'flex-direction:column',
+        'gap:7px',
+        'width:190px',
+        'padding:8px',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-panel)',
+        'box-shadow:var(--fps-editor-shadow-popover)',
+        'pointer-events:auto',
+    ].join(';');
+    const overlayInputs = new Map();
+    for (const key of Object.keys(VIEWPORT_OVERLAY_TOGGLE_LABELS)) {
+        const row = doc.createElement('label');
+        row.style.cssText = [
+            'display:flex',
+            'align-items:center',
+            'justify-content:space-between',
+            'gap:10px',
+            'color:var(--fps-editor-text)',
+            'font-size:11px',
+            'font-weight:800',
+        ].join(';');
+        const text = doc.createElement('span');
+        text.textContent = VIEWPORT_OVERLAY_TOGGLE_LABELS[key];
+        const input = doc.createElement('input');
+        input.type = 'checkbox';
+        input.dataset.viewportOverlaySetting = key;
+        row.appendChild(text);
+        row.appendChild(input);
+        overlaySettingsPopover.appendChild(row);
+        overlayInputs.set(key, input);
+    }
+    const toolbarOverflowButton = createToolbarIconButton(doc, '更多', 'chevron-down', '显示隐藏的工具栏命令');
     toolbarOverflowButton.dataset.editorToolbarOverflowToggle = 'true';
-    toolbarOverflowButton.title = '显示隐藏的工具栏命令';
     toolbarOverflowButton.style.display = 'none';
     const toolbarOverflowMenu = doc.createElement('div');
     toolbarOverflowMenu.classList.add(LOCAL_EDITOR_THEME_CLASS);
@@ -477,23 +1061,37 @@ export function createLocalEditorBrowserUi(options = {}) {
         'box-shadow:var(--fps-editor-shadow-popover)',
         'pointer-events:auto',
     ].join(';');
+    const coordinateAxesOverlay = createCoordinateAxesOverlay(doc);
+    const spatialOverlay = createSpatialOverlay(doc);
+    const measurementOverlay = createMeasurementOverlay(doc);
     sceneToolOverlay.appendChild(sceneTitle);
     sceneToolOverlay.appendChild(sceneQuickActions);
-    sceneToolOverlay.appendChild(sceneUtilityActions);
-    sceneToolOverlay.appendChild(cameraPreviewGroup);
     sceneToolOverlay.appendChild(toolGroup);
     sceneToolOverlay.appendChild(spaceGroup);
-    sceneToolOverlay.appendChild(handleGroup);
     sceneToolOverlay.appendChild(snapGroup);
     sceneToolOverlay.appendChild(placementGroup);
     sceneToolOverlay.appendChild(actionGroup);
-    sceneToolOverlay.appendChild(sceneToolStatus);
-    sceneToolOverlay.appendChild(sceneMouseHint);
-    sceneToolOverlay.appendChild(status);
+    sceneToolOverlay.appendChild(viewportToolsGroup);
+    sceneToolOverlay.appendChild(sceneUtilityActions);
+    sceneToolOverlay.appendChild(cameraPreviewGroup);
+    sceneToolOverlay.appendChild(editorStatusButton);
     sceneToolOverlay.appendChild(toolbarOverflowButton);
     workbench.sceneHeader.appendChild(sceneToolOverlay);
+    workbench.sceneFrame.appendChild(spatialOverlay.root);
+    workbench.sceneFrame.appendChild(measurementOverlay.root);
+    workbench.sceneFrame.appendChild(coordinateAxesOverlay.root);
     root.appendChild(localTestMenu);
     root.appendChild(toolbarOverflowMenu);
+    root.appendChild(snapSettingsPopover);
+    root.appendChild(placementSettingsPopover);
+    root.appendChild(transformActionPopover);
+    root.appendChild(overlaySettingsPopover);
+    tooltipSurfaces.add(localTestMenu);
+    tooltipSurfaces.add(toolbarOverflowMenu);
+    tooltipSurfaces.add(snapSettingsPopover);
+    tooltipSurfaces.add(placementSettingsPopover);
+    tooltipSurfaces.add(transformActionPopover);
+    tooltipSurfaces.add(overlaySettingsPopover);
     const boxSelectionOverlay = doc.createElement('div');
     boxSelectionOverlay.classList.add(LOCAL_EDITOR_THEME_CLASS);
     boxSelectionOverlay.style.cssText = [
@@ -506,23 +1104,32 @@ export function createLocalEditorBrowserUi(options = {}) {
         'pointer-events:none',
     ].join(';');
     root.appendChild(boxSelectionOverlay);
+    tooltipSurfaces.add(boxSelectionOverlay);
     const shortcutHelpPanel = createLocalEditorShortcutHelpPanel(doc);
     shortcutHelpPanel.classList.add(LOCAL_EDITOR_THEME_CLASS);
     root.appendChild(shortcutHelpPanel);
+    tooltipSurfaces.add(shortcutHelpPanel);
     function applyThemeToSurfaces() {
         applyLocalEditorTheme(hostChrome, activeTheme);
         applyLocalEditorTheme(workbench.root, activeTheme);
+        applyLocalEditorTheme(spatialOverlay.root, activeTheme);
+        applyLocalEditorTheme(measurementOverlay.root, activeTheme);
         applyLocalEditorTheme(shortcutHelpPanel, activeTheme);
         applyLocalEditorTheme(boxSelectionOverlay, activeTheme);
         applyLocalEditorTheme(localTestMenu, activeTheme);
         applyLocalEditorTheme(toolbarOverflowMenu, activeTheme);
+        applyLocalEditorTheme(snapSettingsPopover, activeTheme);
+        applyLocalEditorTheme(placementSettingsPopover, activeTheme);
+        applyLocalEditorTheme(transformActionPopover, activeTheme);
+        applyLocalEditorTheme(overlaySettingsPopover, activeTheme);
+        tooltipController.setTheme(activeTheme);
         contextMenu.setTheme?.(activeTheme);
     }
     function updateThemeToggleButton() {
         const nextTheme = activeTheme === 'dark' ? 'light' : 'dark';
         themeToggleButton.dataset.editorTheme = activeTheme;
         themeToggleButton.setAttribute('aria-pressed', activeTheme === 'light' ? 'true' : 'false');
-        themeToggleButton.title = nextTheme === 'light' ? '切换为浅色主题' : '切换为深色主题';
+        setToolbarButtonTooltip(themeToggleButton, nextTheme === 'light' ? '切换为浅色主题' : '切换为深色主题');
     }
     function setActiveTheme(theme) {
         activeTheme = normalizeLocalEditorThemeName(theme);
@@ -530,15 +1137,52 @@ export function createLocalEditorBrowserUi(options = {}) {
         updateThemeToggleButton();
     }
     let localTestMenuOpen = false;
+    let snapSettingsOpen = false;
+    let placementSettingsOpen = false;
+    let transformActionOpen = false;
+    let overlaySettingsOpen = false;
     function closeLocalTestMenu() {
         localTestMenuOpen = false;
         localTestMenu.style.display = 'none';
         LocalEditorShared.applyButtonActiveState(localTestButton, false);
     }
+    function closeSnapSettingsPopover() {
+        snapSettingsOpen = false;
+        snapSettingsPopover.style.display = 'none';
+        snapButton.setAttribute('aria-expanded', 'false');
+        const enabled = currentState?.transformOperations?.settings.snap.enabled
+            ?? DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS.snap.enabled;
+        LocalEditorShared.applyButtonActiveState(snapButton, enabled);
+    }
+    function closePlacementSettingsPopover() {
+        placementSettingsOpen = false;
+        placementSettingsPopover.style.display = 'none';
+        placementButton.setAttribute('aria-expanded', 'false');
+        const mode = currentState?.transformOperations?.settings.placementMode
+            ?? DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS.placementMode;
+        LocalEditorShared.applyButtonActiveState(placementButton, mode !== 'off');
+    }
+    function closeTransformActionPopover() {
+        transformActionOpen = false;
+        transformActionPopover.style.display = 'none';
+        transformActionButton.setAttribute('aria-expanded', 'false');
+        LocalEditorShared.applyButtonActiveState(transformActionButton, false);
+    }
+    function closeOverlaySettingsPopover() {
+        overlaySettingsOpen = false;
+        overlaySettingsPopover.style.display = 'none';
+        overlaySettingsButton.setAttribute('aria-expanded', 'false');
+        LocalEditorShared.applyButtonActiveState(overlaySettingsButton, false);
+    }
     function openLocalTestMenu() {
         if (!localTestActionsEnabled || localTestButton.style.display === 'none')
             return;
         closeToolbarOverflowMenu();
+        closeSnapSettingsPopover();
+        closePlacementSettingsPopover();
+        closeTransformActionPopover();
+        closeOverlaySettingsPopover();
+        closeOverlaySettingsPopover();
         const win = doc.defaultView;
         const rect = localTestButton.getBoundingClientRect();
         const viewportWidth = win?.innerWidth ?? doc.documentElement.clientWidth;
@@ -548,6 +1192,106 @@ export function createLocalEditorBrowserUi(options = {}) {
         localTestMenuOpen = true;
         LocalEditorShared.applyButtonActiveState(localTestButton, true);
     }
+    function openSnapSettingsPopover() {
+        if (snapButton.disabled || snapGroup.style.display === 'none')
+            return;
+        closeToolbarOverflowMenu();
+        closeLocalTestMenu();
+        closePlacementSettingsPopover();
+        closeTransformActionPopover();
+        closeOverlaySettingsPopover();
+        const win = doc.defaultView;
+        const rect = snapButton.getBoundingClientRect();
+        const viewportWidth = win?.innerWidth ?? doc.documentElement.clientWidth;
+        snapSettingsPopover.style.display = 'flex';
+        const popoverWidth = snapSettingsPopover.offsetWidth || 220;
+        snapSettingsPopover.style.top = `${Math.max(8, rect.bottom + 5)}px`;
+        snapSettingsPopover.style.left = `${Math.max(8, Math.min(rect.left, viewportWidth - popoverWidth - 8))}px`;
+        snapSettingsOpen = true;
+        snapButton.setAttribute('aria-expanded', 'true');
+        LocalEditorShared.applyButtonActiveState(snapButton, true);
+    }
+    function toggleSnapSettingsPopover() {
+        if (snapSettingsOpen)
+            closeSnapSettingsPopover();
+        else
+            openSnapSettingsPopover();
+    }
+    function openPlacementSettingsPopover() {
+        if (placementButton.disabled || placementGroup.style.display === 'none')
+            return;
+        closeToolbarOverflowMenu();
+        closeLocalTestMenu();
+        closeSnapSettingsPopover();
+        closeTransformActionPopover();
+        closeOverlaySettingsPopover();
+        const win = doc.defaultView;
+        const rect = placementButton.getBoundingClientRect();
+        const viewportWidth = win?.innerWidth ?? doc.documentElement.clientWidth;
+        placementSettingsPopover.style.display = 'flex';
+        const popoverWidth = placementSettingsPopover.offsetWidth || 180;
+        placementSettingsPopover.style.top = `${Math.max(8, rect.bottom + 5)}px`;
+        placementSettingsPopover.style.left = `${Math.max(8, Math.min(rect.left, viewportWidth - popoverWidth - 8))}px`;
+        placementSettingsOpen = true;
+        placementButton.setAttribute('aria-expanded', 'true');
+        LocalEditorShared.applyButtonActiveState(placementButton, true);
+    }
+    function togglePlacementSettingsPopover() {
+        if (placementSettingsOpen)
+            closePlacementSettingsPopover();
+        else
+            openPlacementSettingsPopover();
+    }
+    function openTransformActionPopover() {
+        if (transformActionButton.disabled || actionGroup.style.display === 'none')
+            return;
+        closeToolbarOverflowMenu();
+        closeLocalTestMenu();
+        closeSnapSettingsPopover();
+        closePlacementSettingsPopover();
+        closeOverlaySettingsPopover();
+        const win = doc.defaultView;
+        const rect = transformActionButton.getBoundingClientRect();
+        const viewportWidth = win?.innerWidth ?? doc.documentElement.clientWidth;
+        transformActionPopover.style.display = 'flex';
+        const popoverWidth = transformActionPopover.offsetWidth || 236;
+        transformActionPopover.style.top = `${Math.max(8, rect.bottom + 5)}px`;
+        transformActionPopover.style.left = `${Math.max(8, Math.min(rect.left, viewportWidth - popoverWidth - 8))}px`;
+        transformActionOpen = true;
+        transformActionButton.setAttribute('aria-expanded', 'true');
+        LocalEditorShared.applyButtonActiveState(transformActionButton, true);
+    }
+    function toggleTransformActionPopover() {
+        if (transformActionOpen)
+            closeTransformActionPopover();
+        else
+            openTransformActionPopover();
+    }
+    function openOverlaySettingsPopover() {
+        if (overlaySettingsButton.disabled || viewportToolsGroup.style.display === 'none')
+            return;
+        const win = doc.defaultView;
+        const rect = overlaySettingsButton.getBoundingClientRect();
+        const viewportWidth = win?.innerWidth ?? doc.documentElement.clientWidth;
+        closeLocalTestMenu();
+        closeSnapSettingsPopover();
+        closePlacementSettingsPopover();
+        closeTransformActionPopover();
+        closeToolbarOverflowMenu();
+        overlaySettingsPopover.style.display = 'flex';
+        const popoverWidth = overlaySettingsPopover.offsetWidth || 190;
+        overlaySettingsPopover.style.top = `${Math.max(8, rect.bottom + 5)}px`;
+        overlaySettingsPopover.style.left = `${Math.max(8, Math.min(rect.left, viewportWidth - popoverWidth - 8))}px`;
+        overlaySettingsOpen = true;
+        overlaySettingsButton.setAttribute('aria-expanded', 'true');
+        LocalEditorShared.applyButtonActiveState(overlaySettingsButton, true);
+    }
+    function toggleOverlaySettingsPopover() {
+        if (overlaySettingsOpen)
+            closeOverlaySettingsPopover();
+        else
+            openOverlaySettingsPopover();
+    }
     const onLocalTestButtonClick = (event) => {
         event.stopPropagation();
         if (localTestMenuOpen)
@@ -575,30 +1319,26 @@ export function createLocalEditorBrowserUi(options = {}) {
     const toolbarOrder = [
         sceneTitle,
         sceneQuickActions,
-        sceneUtilityActions,
-        cameraPreviewGroup,
         toolGroup,
         spaceGroup,
-        handleGroup,
         snapGroup,
         placementGroup,
         actionGroup,
-        sceneToolStatus,
-        sceneMouseHint,
-        status,
+        viewportToolsGroup,
+        sceneUtilityActions,
+        cameraPreviewGroup,
+        editorStatusButton,
         toolbarOverflowButton,
     ];
     const toolbarOverflowItems = [
-        { id: 'status', element: status, kind: 'text' },
-        { id: 'mouse-hint', element: sceneMouseHint, kind: 'text' },
-        { id: 'tool-status', element: sceneToolStatus, kind: 'text' },
+        { id: 'editor-status', element: editorStatusButton, kind: 'group' },
+        { id: 'scene-utilities', element: sceneUtilityActions, kind: 'group' },
+        { id: 'camera-preview', element: cameraPreviewGroup, kind: 'group' },
+        { id: 'viewport-tools', element: viewportToolsGroup, kind: 'group' },
         { id: 'transform-actions', element: actionGroup, kind: 'group' },
         { id: 'placement', element: placementGroup, kind: 'group' },
         { id: 'snap', element: snapGroup, kind: 'group' },
-        { id: 'handles', element: handleGroup, kind: 'group' },
         { id: 'space', element: spaceGroup, kind: 'group' },
-        { id: 'camera-preview', element: cameraPreviewGroup, kind: 'group' },
-        { id: 'scene-utilities', element: sceneUtilityActions, kind: 'group' },
     ];
     let toolbarOverflowOpen = false;
     let toolbarOverflowRaf = null;
@@ -636,6 +1376,8 @@ export function createLocalEditorBrowserUi(options = {}) {
         item.element.style.width = '100%';
     }
     function setToolbarButtonCompact(button, compact) {
+        if (button.dataset.editorButtonLabelMode === 'icon-only')
+            return;
         const label = button.querySelector('[data-editor-button-label]');
         if (!label)
             return;
@@ -668,6 +1410,10 @@ export function createLocalEditorBrowserUi(options = {}) {
         if (toolbarOverflowMenu.childElementCount === 0)
             return;
         closeLocalTestMenu();
+        closeSnapSettingsPopover();
+        closePlacementSettingsPopover();
+        closeTransformActionPopover();
+        closeOverlaySettingsPopover();
         const win = doc.defaultView;
         const rect = toolbarOverflowButton.getBoundingClientRect();
         const viewportWidth = win?.innerWidth ?? doc.documentElement.clientWidth;
@@ -744,8 +1490,20 @@ export function createLocalEditorBrowserUi(options = {}) {
             return;
         if (target.closest('[data-editor-toolbar-overflow-menu]') || target.closest('[data-editor-toolbar-overflow-toggle]'))
             return;
+        if (target.closest('[data-transform-snap-settings-popover]') || target.closest('[data-transform-snap-toggle]'))
+            return;
+        if (target.closest('[data-placement-settings-popover]') || target.closest('[data-placement-mode-toggle]'))
+            return;
+        if (target.closest('[data-transform-action-popover]') || target.closest('[data-transform-action-toggle]'))
+            return;
+        if (target.closest('[data-viewport-overlay-settings-popover]') || target.closest('[data-viewport-overlay-settings-toggle]'))
+            return;
         closeLocalTestMenu();
         closeToolbarOverflowMenu();
+        closeSnapSettingsPopover();
+        closePlacementSettingsPopover();
+        closeTransformActionPopover();
+        closeOverlaySettingsPopover();
     };
     const ResizeObserverCtor = doc.defaultView?.ResizeObserver;
     const toolbarResizeObserver = ResizeObserverCtor
@@ -776,10 +1534,46 @@ export function createLocalEditorBrowserUi(options = {}) {
     });
     undoButton.addEventListener('click', () => callbacks.onUndo?.());
     redoButton.addEventListener('click', () => callbacks.onRedo?.());
+    gridToggleButton.addEventListener('click', () => {
+        const visible = currentState?.grid?.visible ?? true;
+        callbacks.onGridVisibleChange?.(!visible);
+    });
     sceneCameraButton.addEventListener('click', () => {
         const enabled = currentState?.sceneCameraPreview?.enabled ?? false;
         callbacks.onSceneCameraPreviewToggle?.(!enabled);
     });
+    viewportToolsGroup.addEventListener('click', (event) => {
+        const target = event.target instanceof HTMLElement ? event.target : null;
+        const preset = target?.closest('[data-viewport-view-preset]')?.dataset.viewportViewPreset;
+        if (preset) {
+            callbacks.onViewportViewPresetChange?.(preset);
+            return;
+        }
+        const projectionToggle = target?.closest('[data-viewport-projection-toggle]');
+        if (projectionToggle) {
+            const currentMode = currentState?.viewportTools?.projectionMode ?? 'perspective';
+            const nextMode = currentMode === 'orthographic' ? 'perspective' : 'orthographic';
+            callbacks.onViewportProjectionModeChange?.(nextMode);
+            return;
+        }
+        const overlayToggle = target?.closest('[data-viewport-overlay-settings-toggle]');
+        if (overlayToggle) {
+            event.stopPropagation();
+            toggleOverlaySettingsPopover();
+            return;
+        }
+        const measureToggle = target?.closest('[data-viewport-measure-toggle]');
+        if (measureToggle) {
+            const currentTool = currentState?.viewportTools?.activeUtilityTool ?? 'none';
+            const nextTool = currentTool === 'measure-distance' ? 'none' : 'measure-distance';
+            callbacks.onViewportUtilityToolChange?.(nextTool);
+            return;
+        }
+        const clearMeasurement = target?.closest('[data-viewport-measurement-clear]');
+        if (clearMeasurement) {
+            callbacks.onViewportMeasurementClear?.();
+        }
+    });
     const setShortcutHelpOpen = (open) => {
         if (open)
             contextMenu.close();
@@ -812,12 +1606,18 @@ export function createLocalEditorBrowserUi(options = {}) {
         if (space)
             callbacks.onTransformSpaceChange?.(space);
     });
-    snapButton.addEventListener('click', () => {
-        const enabled = currentState?.transformOperations?.settings.snap.enabled
-            ?? DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS.snap.enabled;
-        callbacks.onTransformSnapEnabledChange?.(!enabled);
+    snapButton.addEventListener('click', (event) => {
+        event.stopPropagation();
+        toggleSnapSettingsPopover();
     });
-    snapGroup.addEventListener('change', (event) => {
+    snapSettingsPopover.addEventListener('change', (event) => {
+        const enabledInput = event.target instanceof HTMLInputElement
+            ? event.target.closest('[data-transform-snap-enabled]')
+            : null;
+        if (enabledInput) {
+            callbacks.onTransformSnapEnabledChange?.(enabledInput.checked);
+            return;
+        }
         const input = event.target instanceof HTMLInputElement ? event.target : null;
         const kind = input?.dataset.transformSnapStep;
         if (!input || !kind)
@@ -831,18 +1631,47 @@ export function createLocalEditorBrowserUi(options = {}) {
         callbacks.onTransformSnapStepChange?.({ kind, value });
     });
     placementGroup.addEventListener('click', (event) => {
+        event.stopPropagation();
+        togglePlacementSettingsPopover();
+    });
+    placementSettingsPopover.addEventListener('click', (event) => {
         const target = event.target instanceof HTMLElement ? event.target : null;
         const mode = target?.closest('[data-placement-mode]')?.dataset.placementMode;
-        if (mode)
-            callbacks.onPlacementModeChange?.(mode);
+        if (!mode)
+            return;
+        callbacks.onPlacementModeChange?.(mode);
+        closePlacementSettingsPopover();
+    });
+    actionGroup.addEventListener('click', (event) => {
+        event.stopPropagation();
+        toggleTransformActionPopover();
     });
-    transformActionSelect.addEventListener('change', () => {
-        selectedTransformAction = transformActionSelect.value;
-        if (currentState)
-            render(currentState);
+    transformActionPopover.addEventListener('click', (event) => {
+        const target = event.target instanceof HTMLElement ? event.target : null;
+        const action = target?.closest('[data-transform-action]')?.dataset.transformAction;
+        if (!action)
+            return;
+        const transformOperations = currentState?.transformOperations;
+        if (!transformOperations || !isTransformActionEnabled(action, transformOperations))
+            return;
+        callbacks.onTransformAction?.(action);
+        closeTransformActionPopover();
     });
-    transformActionButton.addEventListener('click', () => {
-        callbacks.onTransformAction?.(selectedTransformAction);
+    overlaySettingsPopover.addEventListener('change', (event) => {
+        const input = event.target instanceof HTMLInputElement
+            ? event.target.closest('[data-viewport-overlay-setting]')
+            : null;
+        const key = input?.dataset.viewportOverlaySetting;
+        if (!input || !key)
+            return;
+        const currentOverlay = currentState?.viewportTools?.overlay;
+        callbacks.onViewportOverlaySettingsChange?.({
+            bounds: currentOverlay?.bounds ?? true,
+            dimensions: currentOverlay?.dimensions ?? true,
+            edgeLengths: currentOverlay?.edgeLengths ?? false,
+            anchor: currentOverlay?.anchor ?? true,
+            [key]: input.checked,
+        });
     });
     assetPanel.addEventListener('click', (event) => {
         const target = event.target instanceof HTMLElement ? event.target : null;
@@ -930,6 +1759,26 @@ export function createLocalEditorBrowserUi(options = {}) {
         if (currentState?.mode !== 'editor' || currentState.busy)
             return;
         const key = event.key.toLowerCase();
+        if (key === 'escape' && snapSettingsOpen) {
+            event.preventDefault();
+            closeSnapSettingsPopover();
+            return;
+        }
+        if (key === 'escape' && placementSettingsOpen) {
+            event.preventDefault();
+            closePlacementSettingsPopover();
+            return;
+        }
+        if (key === 'escape' && transformActionOpen) {
+            event.preventDefault();
+            closeTransformActionPopover();
+            return;
+        }
+        if (key === 'escape' && overlaySettingsOpen) {
+            event.preventDefault();
+            closeOverlaySettingsPopover();
+            return;
+        }
         const primaryModifier = event.metaKey || event.ctrlKey;
         const handleDocumentShortcut = inputRouter.shouldHandleDocumentShortcut(event);
         const handleGlobalShortcut = inputRouter.shouldHandleGlobalShortcut(event);
@@ -975,7 +1824,10 @@ export function createLocalEditorBrowserUi(options = {}) {
         }
         if (key === 'escape') {
             event.preventDefault();
-            callbacks.onCancelActiveOperation?.();
+            if (callbacks.onCancelEditorIntent)
+                callbacks.onCancelEditorIntent();
+            else
+                callbacks.onCancelActiveOperation?.();
         }
     };
     doc.addEventListener('keydown', onKeyDown);
@@ -1028,33 +1880,6 @@ export function createLocalEditorBrowserUi(options = {}) {
             ? CSS.escape(value)
             : value.replace(/["\\]/g, '\\$&');
     }
-    function renderTransformHandleBadges(transformTool) {
-        LocalEditorShared.clearElement(handleGroup);
-        const tool = transformTool?.activeTool ?? 'select';
-        const descriptor = DEFAULT_EDITOR_TRANSFORM_TOOL_DESCRIPTORS[tool];
-        handleGroup.style.display = descriptor.handles.length > 0 ? 'flex' : 'none';
-        for (const handle of descriptor.handles) {
-            const badge = doc.createElement('span');
-            badge.dataset.transformHandle = handle.constraint;
-            badge.title = handle.description;
-            badge.textContent = handle.label;
-            badge.style.cssText = [
-                'height:22px',
-                'display:inline-flex',
-                'align-items:center',
-                'padding:0 7px',
-                'border:1px solid var(--fps-editor-border)',
-                'border-radius:3px',
-                'background:var(--fps-editor-field)',
-                'color:var(--fps-editor-muted-strong)',
-                'font-size:11px',
-                'font-weight:800',
-                'white-space:nowrap',
-                'pointer-events:none',
-            ].join(';');
-            handleGroup.appendChild(badge);
-        }
-    }
     function formatSnapStepInputValue(snap, kind) {
         const value = kind === 'move'
             ? snap.moveStep
@@ -1077,7 +1902,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]) {
+        for (const button of [saveButton, saveAndRunButton, discardRunButton, undoButton, redoButton, sceneHelpButton, sceneCameraButton, gridToggleButton]) {
             button.style.display = 'inline-flex';
             button.disabled = disabled;
         }
@@ -1091,13 +1916,63 @@ export function createLocalEditorBrowserUi(options = {}) {
         const transformTool = state.transformTool ?? null;
         workbench.root.style.display = inEditor ? '' : 'none';
         sceneToolOverlay.style.display = inEditor ? 'flex' : 'none';
+        if (!inEditor)
+            closeSnapSettingsPopover();
+        if (!inEditor)
+            closePlacementSettingsPopover();
+        if (!inEditor)
+            closeTransformActionPopover();
+        if (!inEditor)
+            closeOverlaySettingsPopover();
         const sceneCameraPreview = state.sceneCameraPreview ?? { enabled: false, available: false };
         cameraPreviewGroup.style.display = inEditor ? 'flex' : 'none';
         sceneCameraButton.disabled = disabled || !sceneCameraPreview.available;
-        sceneCameraButton.title = sceneCameraPreview.available
+        const sceneCameraTooltip = sceneCameraPreview.available
             ? '从 Main Camera 查看当前场景'
             : '当前场景没有可预览的 Main Camera';
+        setToolbarButtonTooltip(sceneCameraButton, sceneCameraTooltip);
         LocalEditorShared.applyButtonActiveState(sceneCameraButton, sceneCameraPreview.enabled);
+        const viewportTools = state.viewportTools ?? null;
+        const viewportControlsDisabled = disabled || sceneCameraPreview.enabled;
+        const viewportControlsTooltip = sceneCameraPreview.enabled
+            ? '请先关闭 Scene Camera 预览，再使用视口工具'
+            : '';
+        viewportToolsGroup.style.display = inEditor ? 'flex' : 'none';
+        for (const [preset, button] of viewportPresetButtons) {
+            button.disabled = viewportControlsDisabled;
+            setToolbarButtonTooltip(button, viewportControlsTooltip || VIEW_PRESET_TOOLTIPS[preset]);
+            LocalEditorShared.applyButtonActiveState(button, viewportTools?.viewPreset === preset);
+        }
+        projectionToggleButton.disabled = viewportControlsDisabled;
+        const projectionMode = viewportTools?.projectionMode ?? 'perspective';
+        const nextProjectionMode = projectionMode === 'orthographic' ? 'perspective' : 'orthographic';
+        setToolbarButtonIcon(doc, projectionToggleButton, projectionMode === 'orthographic' ? 'projection-ortho' : 'projection-perspective');
+        setToolbarButtonTooltip(projectionToggleButton, viewportControlsTooltip || `投影模式：${VIEWPORT_PROJECTION_LABELS[projectionMode]}。切换为${VIEWPORT_PROJECTION_LABELS[nextProjectionMode]}`);
+        LocalEditorShared.applyButtonActiveState(projectionToggleButton, projectionMode === 'orthographic');
+        overlaySettingsButton.disabled = disabled;
+        setToolbarButtonTooltip(overlaySettingsButton, '视口信息层设置');
+        LocalEditorShared.applyButtonActiveState(overlaySettingsButton, overlaySettingsOpen);
+        const overlaySettings = viewportTools?.overlay;
+        for (const [key, input] of overlayInputs) {
+            input.disabled = disabled;
+            input.checked = overlaySettings?.[key] ?? false;
+        }
+        measureButton.disabled = viewportControlsDisabled;
+        setToolbarButtonTooltip(measureButton, viewportControlsTooltip || '测量 XZ 地面距离');
+        LocalEditorShared.applyButtonActiveState(measureButton, viewportTools?.activeUtilityTool === 'measure-distance');
+        const hasMeasurement = !!(state.viewportMeasurement?.start
+            || state.viewportMeasurement?.end
+            || state.viewportMeasurement?.preview);
+        clearMeasurementButton.style.display = hasMeasurement ? 'inline-flex' : 'none';
+        clearMeasurementButton.disabled = disabled || !hasMeasurement;
+        setToolbarButtonTooltip(clearMeasurementButton, '清除测量结果');
+        LocalEditorShared.applyButtonActiveState(clearMeasurementButton, false);
+        if (!inEditor || disabled || viewportToolsGroup.style.display === 'none')
+            closeOverlaySettingsPopover();
+        const gridState = state.grid ?? { visible: false, available: false };
+        gridToggleButton.disabled = disabled || !gridState.available;
+        setToolbarButtonTooltip(gridToggleButton, gridState.visible ? '隐藏 Scene View 网格' : '显示 Scene View 网格');
+        LocalEditorShared.applyButtonActiveState(gridToggleButton, gridState.visible);
         for (const [tool, button] of toolButtons) {
             button.disabled = disabled;
             LocalEditorShared.applyButtonActiveState(button, transformTool?.activeTool === tool);
@@ -1107,7 +1982,6 @@ export function createLocalEditorBrowserUi(options = {}) {
             LocalEditorShared.applyButtonActiveState(button, transformTool?.activeSpace === space);
         }
         sceneHelpButton.disabled = disabled;
-        renderTransformHandleBadges(transformTool);
         const transformOperations = state.transformOperations ?? {
             settings: DEFAULT_EDITOR_TRANSFORM_OPERATION_SETTINGS,
             selectedCount: state.selectedIds.length,
@@ -1118,53 +1992,75 @@ export function createLocalEditorBrowserUi(options = {}) {
         const operationSettings = transformOperations.settings;
         snapGroup.style.display = inEditor ? 'flex' : 'none';
         snapButton.disabled = disabled;
-        LocalEditorShared.applyButtonActiveState(snapButton, operationSettings.snap.enabled);
+        snapEnabledInput.disabled = disabled;
+        snapEnabledInput.checked = operationSettings.snap.enabled;
+        LocalEditorShared.applyButtonActiveState(snapButton, operationSettings.snap.enabled || snapSettingsOpen);
+        setToolbarButtonTooltip(snapButton, `吸附设置 · 位移 ${formatSnapStepInputValue(operationSettings.snap, 'move')} · 旋转 ${formatSnapStepInputValue(operationSettings.snap, 'rotate')}° · 缩放 ${formatSnapStepInputValue(operationSettings.snap, 'scale')}`);
         for (const [kind, input] of snapStepInputs) {
             input.disabled = disabled;
             if (doc.activeElement !== input)
                 input.value = formatSnapStepInputValue(operationSettings.snap, kind);
         }
+        if (!inEditor || disabled || snapGroup.style.display === 'none')
+            closeSnapSettingsPopover();
         placementGroup.style.display = inEditor ? 'flex' : 'none';
+        placementButton.disabled = disabled;
+        setToolbarButtonIcon(doc, placementButton, PLACEMENT_MODE_ICONS[operationSettings.placementMode]);
+        setToolbarButtonTooltip(placementButton, `放置模式 · ${PLACEMENT_MODE_DESCRIPTIONS[operationSettings.placementMode]}`);
+        LocalEditorShared.applyButtonActiveState(placementButton, operationSettings.placementMode !== 'off' || placementSettingsOpen);
         for (const [mode, button] of Object.entries(placementButtons)) {
             button.disabled = disabled;
             LocalEditorShared.applyButtonActiveState(button, operationSettings.placementMode === mode);
         }
+        if (!inEditor || disabled || placementGroup.style.display === 'none')
+            closePlacementSettingsPopover();
         actionGroup.style.display = inEditor ? 'flex' : 'none';
-        transformActionSelect.disabled = disabled;
-        transformActionButton.disabled = disabled || !isTransformActionEnabled(selectedTransformAction, transformOperations);
-        transformActionButton.title = selectedTransformAction.startsWith('align-')
-            ? '需要至少 2 个选中对象，并以 active object 为目标'
-            : '需要至少 3 个选中对象';
+        const hasTransformAction = transformOperations.canAlign || transformOperations.canDistribute;
+        transformActionButton.disabled = disabled || !hasTransformAction;
+        setToolbarButtonTooltip(transformActionButton, hasTransformAction ? '对齐与分布' : '选择至少 2 个对象后可用');
+        LocalEditorShared.applyButtonActiveState(transformActionButton, transformActionOpen);
+        for (const [action, button] of transformActionButtons) {
+            const enabled = isTransformActionEnabled(action, transformOperations);
+            button.disabled = disabled || !enabled;
+            button.style.opacity = button.disabled ? '0.45' : '1';
+            button.style.cursor = button.disabled ? 'not-allowed' : 'pointer';
+        }
+        if (!inEditor || disabled || !hasTransformAction || actionGroup.style.display === 'none')
+            closeTransformActionPopover();
         undoButton.disabled = disabled || !state.session?.canUndo;
         redoButton.disabled = disabled || !state.session?.canRedo;
         LocalEditorShared.applyButtonActiveState(sceneHelpButton, inEditor && helpOpen);
         shortcutHelpPanel.style.display = inEditor && helpOpen ? '' : 'none';
         dirtyBadge.style.display = inEditor && state.session?.dirty ? 'inline-flex' : 'none';
-        const dragSuffix = transformTool?.dragPhase === 'dragging'
-            ? ` | dragging ${transformTool.draggingNodeId ?? 'selection'}`
-            : '';
-        status.textContent = [
+        const editorStatusText = [
             state.status,
-            state.session?.dirty ? '*' : '',
+            state.session?.dirty ? '有未保存更改' : '',
             LocalEditorShared.formatAuthoringSourceLabel(state.session?.source),
             state.summary,
         ].filter(Boolean).join(' | ');
-        status.textContent += dragSuffix;
-        status.title = state.statusDetails || status.textContent;
-        status.style.color = state.statusTone === 'error'
+        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)';
-        sceneToolStatus.textContent = transformTool?.dragPhase === 'dragging'
-            ? `正在拖拽 ${transformTool.draggingNodeId ?? '选择对象'}`
-            : LocalEditorShared.toTransformToolStatusLabel(transformTool?.activeTool ?? 'select', transformTool?.activeSpace ?? 'world');
-        sceneMouseHint.textContent = [
-            LocalEditorShared.toTransformMouseHint(transformTool?.activeTool ?? 'select'),
+        setToolbarButtonTooltip(editorStatusButton, [
+            `编辑器状态：${editorStatusText}`,
+            state.statusDetails && state.statusDetails !== state.status ? state.statusDetails : '',
+            transformStatusText,
             LocalEditorShared.toTransformOperationStatusLabel(operationSettings),
-        ].join(' · ');
+        ].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);
+        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 = '';
@@ -1212,10 +2108,17 @@ export function createLocalEditorBrowserUi(options = {}) {
             workbench.root.remove();
             localTestMenu.remove();
             toolbarOverflowMenu.remove();
+            snapSettingsPopover.remove();
+            placementSettingsPopover.remove();
+            transformActionPopover.remove();
+            overlaySettingsPopover.remove();
+            spatialOverlay.root.remove();
+            measurementOverlay.root.remove();
             boxSelectionOverlay.remove();
             shortcutHelpPanel.remove();
             hierarchyController.dispose();
             workbenchLayoutController.dispose();
+            tooltipController.dispose();
             contextMenu.dispose();
             inputRouter.dispose();
             doc.removeEventListener('keydown', onKeyDown);