@fps-games/editor 0.2.0-beta.4 → 0.2.1-beta.1

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

@@ -1,10 +1,53 @@
+import { createEditorUiBooleanControl, createEditorUiButton, createEditorUiColorControl, createEditorUiExpandableReadonlyControl, createEditorUiNumberControl, createEditorUiReadonlyControl, createEditorUiSection, createEditorUiSelectControl, createEditorUiTextControl, createEditorUiVectorControl, } from '@fps-games/editor-ui';
 import { createLocalEditorIcon, isLocalEditorIconName, } from './local-editor-ui-icons.js';
-import { createBadge, createAssetList, createDockTab, createEditorInputStyle, createEmptyState, createListItemBlock, createPanelHeader, createPropertyRow, createToolbarButton, createTreeView, createTreeViewItem, } from './local-editor-ui-primitives.js';
+import { createBadge, createAssetList, createDockTab, createEditorInputStyle, createEmptyState, createListItemBlock, createPanelHeader, createPropertyRow, createToolbarButton, } from './local-editor-ui-primitives.js';
 import { configureLocalEditorDockPanelContent, createLocalEditorDockPanelViewport, renderLocalEditorDockTabStrip, } from './local-editor-ui-dock-panel.js';
 import { clearElement, createButton, toTitle } from './local-editor-ui-shared.js';
 import { resolveLocalEditorAssetBrowserTab, resolveLocalEditorBrowserAssetKind, } from './local-editor-ui-asset-kind.js';
 import { createLocalEditorBrowserInspectorVectorCopyPayload, } from './local-editor-inspector-clipboard.js';
-import { resolveLocalEditorBrowserInspectorVectorGroupPathFromProperties, } from './local-editor-inspector-groups.js';
+import { resolveLocalEditorBrowserInspectorVectorGroupAxisFromPropertyPath, resolveLocalEditorBrowserInspectorVectorGroupPathFromProperties, } from './local-editor-inspector-groups.js';
+const inspectorUiMounts = new WeakMap();
+const inspectorPanelUiPendingDisposals = new WeakMap();
+export function registerInspectorUiMount(mount) {
+    mount.element.dataset.editorUiMount = 'inspector';
+    inspectorUiMounts.set(mount.element, mount);
+    return mount;
+}
+export function disposeInspectorPanelUi(panel) {
+    if (typeof panel.querySelectorAll !== 'function')
+        return;
+    let pending = inspectorPanelUiPendingDisposals.get(panel);
+    if (!pending) {
+        pending = new Map();
+        inspectorPanelUiPendingDisposals.set(panel, pending);
+    }
+    for (const root of panel.querySelectorAll('[data-editor-ui-mount="inspector"]')) {
+        const mount = inspectorUiMounts.get(root);
+        if (mount)
+            pending.set(root, mount);
+    }
+    const failures = [];
+    // DOM order registers a section before its nested controls. Reverse order
+    // disposes children first; the panel-owned pending registry keeps a failed
+    // child reachable even if a later parent disposal removes its DOM subtree.
+    for (const [root, mount] of Array.from(pending.entries()).reverse()) {
+        try {
+            mount.dispose();
+            inspectorUiMounts.delete(root);
+            pending.delete(root);
+        }
+        catch (error) {
+            failures.push(error);
+        }
+    }
+    if (pending.size === 0)
+        inspectorPanelUiPendingDisposals.delete(panel);
+    if (failures.length > 0) {
+        const error = new Error('Failed to dispose one or more Inspector UI mounts.');
+        error.causes = failures;
+        throw error;
+    }
+}
 const BOTTOM_DOCK_TAB_ICONS = {
     assets: 'asset',
     history: 'history',
@@ -25,64 +68,6 @@ const ASSET_BROWSER_TABS = [
     { id: 'materials', label: '材质', title: '显示项目材质资产' },
     { id: 'textures', label: '贴图', title: '显示贴图资产' },
 ];
-export function renderHierarchyPanel(doc, panel, state, rename, drop) {
-    clearElement(panel);
-    const createGroupButton = createToolbarButton(doc, '+ Empty', 'object');
-    createGroupButton.dataset.editorHierarchyCreateGroup = 'true';
-    createGroupButton.style.padding = '3px 7px';
-    createGroupButton.style.fontSize = '11px';
-    const createMarkerButton = createToolbarButton(doc, '+ Marker', 'view-overlay');
-    createMarkerButton.dataset.editorHierarchyCreateMarker = 'true';
-    createMarkerButton.style.padding = '3px 7px';
-    createMarkerButton.style.fontSize = '11px';
-    panel.appendChild(createPanelHeader(doc, 'Hierarchy', [createGroupButton, createMarkerButton], 'hierarchy'));
-    const list = createTreeView(doc);
-    for (const item of state.hierarchy) {
-        const isRenaming = rename?.id === item.id;
-        const selected = state.selectedIds.includes(item.id);
-        const active = state.activeId === item.id;
-        const dropPlacement = drop?.targetId === item.id ? drop.placement : null;
-        const button = createTreeViewItem(doc, {
-            id: item.id,
-            label: item.label,
-            depth: item.depth,
-            selected,
-            active,
-            locked: item.locked,
-            selectable: item.selectable,
-            draggable: item.draggable,
-            dropPlacement,
-        });
-        if (isRenaming) {
-            const input = doc.createElement('input');
-            input.dataset.editorHierarchyRenameInput = item.id;
-            input.value = rename.value;
-            input.style.cssText = [
-                'width:100%',
-                'height:22px',
-                'box-sizing:border-box',
-                'border:1px solid var(--fps-editor-accent-strong)',
-                'border-radius:2px',
-                'background:var(--fps-editor-field)',
-                'color:var(--fps-editor-text-strong)',
-                'font-size:12px',
-                'font-weight:700',
-                'padding:2px 5px',
-                'outline:none',
-            ].join(';');
-            button.appendChild(input);
-            setTimeout(() => {
-                input.focus();
-                input.select();
-            }, 0);
-        }
-        else {
-            button.textContent = item.locked ? `${item.label}  [locked]` : item.label;
-        }
-        list.appendChild(button);
-    }
-    panel.appendChild(list);
-}
 export function renderBottomDockPanel(doc, panel, state, activeTab, activeAssetBrowserTab = 'all') {
     clearElement(panel);
     appendDockTabs(doc, panel, activeTab);
@@ -184,6 +169,15 @@ export function renderMarkerPanel(doc, panel, state) {
     viewport.appendChild(list);
     panel.appendChild(viewport);
 }
+export function shouldShowPrefabModelAddAction(state, asset) {
+    return state.mode === 'editor'
+        && state.busy !== true
+        && !!state.prefabStage
+        && state.prefabStage.readonly !== true
+        && resolveLocalEditorBrowserAssetKind(asset) === 'model'
+        && asset.placeable !== false
+        && asset.disabled !== true;
+}
 export function renderWorkbenchLeftDockTabs(doc, panel, activeTab, panels = []) {
     renderLocalEditorDockTabStrip(doc, {
         activeId: activeTab,
@@ -673,7 +667,8 @@ function createMarkerTypeTextarea(doc, prefix, field, value) {
     ].join(';');
     return input;
 }
-export function renderRenderingPanel(doc, panel, state) {
+export function renderRenderingPanel(doc, panel, state, options = {}) {
+    disposeInspectorPanelUi(panel);
     clearElement(panel);
     configureLocalEditorDockPanelContent(panel);
     const rendering = state.renderingPanel ?? null;
@@ -723,7 +718,7 @@ export function renderRenderingPanel(doc, panel, state) {
         panel.appendChild(summary);
     }
     for (const section of rendering.sections) {
-        viewport.appendChild(createRenderingSectionBlock(doc, section));
+        viewport.appendChild(createRenderingSectionBlock(doc, section, options.layerHost));
     }
     panel.appendChild(viewport);
 }
@@ -779,7 +774,7 @@ function tabHeaderButtonStyle(button) {
     button.style.borderRadius = '0';
     button.style.minWidth = '0';
 }
-function createRenderingSectionBlock(doc, section) {
+function createRenderingSectionBlock(doc, section, layerHost) {
     const isListLayout = section.layout === 'list';
     const systemGroups = groupRenderingSystems(section.systems);
     const hasSystemGroups = systemGroups.some(group => group.group);
@@ -840,11 +835,11 @@ function createRenderingSectionBlock(doc, section) {
     ].join(';');
     for (const group of systemGroups) {
         if (group.group) {
-            list.appendChild(createRenderingSystemGroupBlock(doc, section.id, group.group, group.systems, section.layout, section.systemsCollapsible === true));
+            list.appendChild(createRenderingSystemGroupBlock(doc, section.id, group.group, group.systems, section.layout, section.systemsCollapsible === true, layerHost));
             continue;
         }
         for (const system of group.systems) {
-            list.appendChild(createRenderingSystemBlock(doc, section.id, system, section.layout, section.systemsCollapsible === true));
+            list.appendChild(createRenderingSystemBlock(doc, section.id, system, section.layout, section.systemsCollapsible === true, layerHost));
         }
     }
     content.appendChild(list);
@@ -865,7 +860,7 @@ function groupRenderingSystems(systems) {
     }
     return groups;
 }
-function createRenderingSystemGroupBlock(doc, sectionId, group, systems, layout = 'cards', systemsCollapsible = false) {
+function createRenderingSystemGroupBlock(doc, sectionId, group, systems, layout = 'cards', systemsCollapsible = false, layerHost) {
     const isListLayout = layout === 'list';
     const block = doc.createElement('section');
     block.dataset.editorRenderingSystemGroup = group.id;
@@ -925,7 +920,7 @@ function createRenderingSystemGroupBlock(doc, sectionId, group, systems, layout
         isListLayout ? '' : 'padding:8px',
     ].filter(Boolean).join(';');
     systems.forEach((system, index) => {
-        const systemBlock = createRenderingSystemBlock(doc, sectionId, system, layout, systemsCollapsible);
+        const systemBlock = createRenderingSystemBlock(doc, sectionId, system, layout, systemsCollapsible, layerHost);
         if (isListLayout && index === systems.length - 1)
             systemBlock.style.borderBottom = '0';
         body.appendChild(systemBlock);
@@ -942,7 +937,7 @@ function getRenderingSystemGroupAccent(groupId) {
         return 'var(--fps-editor-warn)';
     return 'var(--fps-editor-muted)';
 }
-function createRenderingSystemBlock(doc, sectionId, system, layout = 'cards', collapsible = false) {
+function createRenderingSystemBlock(doc, sectionId, system, layout = 'cards', collapsible = false, layerHost) {
     const isListLayout = layout === 'list';
     const block = collapsible ? doc.createElement('details') : createListItemBlock(doc);
     block.dataset.editorRenderingSystem = system.id;
@@ -1045,7 +1040,7 @@ function createRenderingSystemBlock(doc, sectionId, system, layout = 'cards', co
         ] : []),
     ].join(';');
     for (const property of system.properties) {
-        propertyGrid.appendChild(createRenderingPropertyRow(doc, sectionId, system.id, property, system.readOnly === true));
+        propertyGrid.appendChild(createRenderingPropertyRow(doc, sectionId, system.id, property, system.readOnly === true, layerHost));
     }
     block.appendChild(propertyGrid);
     return block;
@@ -1168,9 +1163,9 @@ function createRenderingDisclosureIcon(doc, block, id, datasetKey) {
     syncDisclosureIcon();
     return disclosure;
 }
-function createRenderingPropertyRow(doc, sectionId, systemId, property, systemReadOnly) {
+function createRenderingPropertyRow(doc, sectionId, systemId, property, systemReadOnly, layerHost) {
     const inspectorProperty = createInspectorPropertyFromRenderingProperty(property, systemReadOnly);
-    let control = createRenderingPropertyControl(doc, sectionId, systemId, property, inspectorProperty);
+    let control = createRenderingPropertyControl(doc, sectionId, systemId, property, inspectorProperty, layerHost);
     if (property.actions?.length) {
         const controlWithActions = doc.createElement('div');
         controlWithActions.style.cssText = 'display:flex;align-items:center;gap:5px;min-width:0';
@@ -1199,7 +1194,7 @@ function createRenderingPropertyRow(doc, sectionId, systemId, property, systemRe
         label.style.cssText = createInspectorPropertyLabelStyle(access, effect);
     return row;
 }
-function createRenderingPropertyControl(doc, sectionId, systemId, property, inspectorProperty) {
+function createRenderingPropertyControl(doc, sectionId, systemId, property, inspectorProperty, layerHost) {
     const target = createRenderingInspectorTarget(systemId);
     if (isInspectorPropertyEditable(inspectorProperty) && property.control === 'string-list') {
         return createRenderingStringListControl(doc, sectionId, systemId, property, inspectorProperty);
@@ -1210,7 +1205,7 @@ function createRenderingPropertyControl(doc, sectionId, systemId, property, insp
             input.dataset.renderingEditSource = 'asset';
         });
     }
-    let control = renderInspectorControl(doc, builtinInspectorControlRegistrations, target, inspectorProperty);
+    let control = renderInspectorControl(doc, createLocalEditorBrowserInspectorControlRegistry([], 'error', layerHost), target, inspectorProperty);
     bindRenderedInspectorControlsToRendering(control, sectionId, systemId, property);
     if (property.unit && isInspectorPropertyEditable(inspectorProperty) && property.control === 'number') {
         const wrapper = doc.createElement('div');
@@ -1319,7 +1314,7 @@ function createHeadingLabel(doc, text) {
 function renderAssetBrowserContent(doc, panel, state, variant = 'list', activeTab = 'all') {
     configureLocalEditorDockPanelContent(panel);
     const title = doc.createElement('h2');
-    title.style.cssText = 'display:flex;align-items:center;gap:6px;font-size:13px;margin:0 0 8px;font-weight:800;color:var(--fps-editor-text-strong)';
+    title.className = 'fps-editor-ui-panel-title';
     title.appendChild(createLocalEditorIcon(doc, 'asset'));
     title.appendChild(createHeadingLabel(doc, '资产浏览器'));
     panel.appendChild(title);
@@ -1339,21 +1334,11 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list', activeTa
         panel.appendChild(createMaterialButton);
     }
     const filter = doc.createElement('input');
+    filter.className = 'fps-editor-ui-search';
     filter.type = 'search';
     filter.placeholder = '筛选资产';
     filter.value = state.assetFilter;
     filter.dataset.editorAssetFilter = 'true';
-    filter.style.cssText = [
-        'width:100%',
-        'height:28px',
-        'border:1px solid var(--fps-editor-border)',
-        'border-radius:3px',
-        'background:var(--fps-editor-field)',
-        'color:var(--fps-editor-text)',
-        'font-size:12px',
-        'padding:0 8px',
-        'margin:0 0 8px',
-    ].join(';');
     panel.appendChild(filter);
     const tabAssets = filterAssetsByBrowserTab(state.assets, activeTab);
     const normalizedFilter = state.assetFilter.trim().toLowerCase();
@@ -1376,11 +1361,11 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list', activeTa
     })
         .slice(0, 80);
     const count = doc.createElement('div');
+    count.className = 'fps-editor-ui-asset-count';
     const activeTabLabel = ASSET_BROWSER_TABS.find(tab => tab.id === activeTab)?.label ?? '资产';
     count.textContent = activeTab === 'all' && state.assetCountLabel
         ? `${filteredAssets.length} / ${state.assetCountLabel}`
         : `${filteredAssets.length} / ${tabAssets.length} 个${activeTabLabel}资产`;
-    count.style.cssText = 'color:var(--fps-editor-muted);font-size:11px;margin-bottom:6px';
     panel.appendChild(count);
     const list = createAssetList(doc, variant === 'grid');
     list.dataset.editorAssetBrowserList = 'true';
@@ -1390,40 +1375,48 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list', activeTa
         const selected = state.selectedAssetId === asset.id;
         const hasPreview = !!asset.preview;
         const button = doc.createElement('button');
+        button.className = 'fps-editor-ui-asset-card';
         button.type = 'button';
         button.dataset.editorAssetId = asset.id;
         button.disabled = asset.disabled ?? false;
         button.setAttribute('aria-selected', selected ? 'true' : 'false');
-        button.style.cssText = [
-            'width:100%',
-            `min-height:${variant === 'grid' ? (hasPreview ? '66px' : '48px') : (hasPreview ? '38px' : '32px')}`,
-            'text-align:left',
-            `padding:${hasPreview ? '7px 8px' : '6px 8px'}`,
-            `border:1px solid ${selected ? 'var(--fps-editor-accent-strong)' : 'var(--fps-editor-border)'}`,
-            'border-radius:3px',
-            `background:${selected ? 'var(--fps-editor-accent-soft)' : 'var(--fps-editor-asset-card-bg)'}`,
-            'color:var(--fps-editor-text)',
-            'display:flex',
-            'align-items:center',
-            'gap:8px',
-            'font-size:12px',
-            asset.disabled ? 'cursor:not-allowed' : 'cursor:pointer',
-            asset.disabled ? 'opacity:0.72' : '',
-        ].join(';');
+        button.dataset.variant = variant;
+        button.dataset.hasPreview = hasPreview ? 'true' : 'false';
         const preview = createAssetPreviewElement(doc, asset, variant);
         const body = doc.createElement('div');
-        body.style.cssText = 'min-width:0;flex:1';
+        body.className = 'fps-editor-ui-asset-card-body';
         const label = doc.createElement('div');
+        label.className = 'fps-editor-ui-asset-card-label fps-editor-ui-ellipsis';
         label.textContent = asset.label;
-        label.style.cssText = 'font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
         const meta = doc.createElement('div');
+        meta.className = 'fps-editor-ui-asset-card-meta fps-editor-ui-ellipsis';
         meta.textContent = asset.meta ?? asset.id;
-        meta.style.cssText = 'color:var(--fps-editor-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
         body.appendChild(label);
         body.appendChild(meta);
         button.appendChild(preview);
         button.appendChild(body);
-        list.appendChild(button);
+        if (shouldShowPrefabModelAddAction(state, asset)) {
+            const shell = doc.createElement('div');
+            shell.dataset.editorAssetCardShell = asset.id;
+            shell.style.cssText = 'min-width:0;display:flex;flex-direction:column;gap:4px';
+            const addButton = createToolbarButton(doc, '添加到当前 Prefab', 'plus');
+            addButton.dataset.editorAssetAddToPrefab = asset.id;
+            addButton.title = `添加 ${asset.label} 到当前 Prefab`;
+            addButton.setAttribute('aria-label', addButton.title);
+            addButton.style.cssText = [
+                'width:100%',
+                'min-height:24px',
+                'justify-content:center',
+                'padding:2px 7px',
+                'font-size:11px',
+                'font-weight:800',
+            ].join(';');
+            shell.append(button, addButton);
+            list.appendChild(shell);
+        }
+        else {
+            list.appendChild(button);
+        }
     }
     if (filteredAssets.length === 0) {
         list.appendChild(createEmptyState(doc, normalizedFilter ? '没有匹配的资产。' : '暂无该类型资产。'));
@@ -1557,32 +1550,17 @@ function clampNumber(value, min, max) {
 }
 function appendAssetBrowserTabs(doc, panel, state, activeTab) {
     const tabs = doc.createElement('div');
-    tabs.style.cssText = [
-        'display:flex',
-        'align-items:center',
-        'gap:4px',
-        'margin:0 0 8px',
-        'min-height:26px',
-    ].join(';');
+    tabs.className = 'fps-editor-ui-segmented-tabs';
     for (const tab of ASSET_BROWSER_TABS) {
         const button = doc.createElement('button');
+        button.className = 'fps-editor-ui-button fps-editor-ui-segmented-tab';
         button.type = 'button';
         button.dataset.editorAssetBrowserTab = tab.id;
         button.title = tab.title;
         const active = activeTab === tab.id;
+        button.dataset.active = active ? 'true' : 'false';
         const count = filterAssetsByBrowserTab(state.assets, tab.id).length;
         button.textContent = `${tab.label} ${count}`;
-        button.style.cssText = [
-            'height:24px',
-            'padding:0 8px',
-            'border:1px solid var(--fps-editor-border)',
-            'border-radius:3px',
-            `background:${active ? 'var(--fps-editor-accent)' : 'var(--fps-editor-button-bg)'}`,
-            `color:${active ? 'var(--fps-editor-text-strong)' : 'var(--fps-editor-muted)'}`,
-            'font-size:11px',
-            'font-weight:800',
-            'cursor:pointer',
-        ].join(';');
         tabs.appendChild(button);
     }
     panel.appendChild(tabs);
@@ -1595,8 +1573,8 @@ function filterAssetsByBrowserTab(assets, tab) {
 function renderHistoryPanel(doc, panel, history) {
     configureLocalEditorDockPanelContent(panel);
     const title = doc.createElement('h2');
+    title.className = 'fps-editor-ui-panel-title';
     const entries = history?.entries ?? [];
-    title.style.cssText = 'display:flex;align-items:center;gap:6px;font-size:13px;margin:0 0 8px;font-weight:800;color:var(--fps-editor-text-strong)';
     title.appendChild(createLocalEditorIcon(doc, 'history'));
     title.appendChild(createHeadingLabel(doc, `历史记录 (${entries.length})`));
     panel.appendChild(title);
@@ -1610,15 +1588,15 @@ function appendHistoryEntries(doc, panel, entries) {
         return;
     }
     const list = doc.createElement('div');
-    list.style.cssText = 'display:flex;flex-direction:column;gap:4px';
+    list.className = 'fps-editor-ui-history-list';
     for (const entry of entries) {
         const item = createListItemBlock(doc);
         const label = doc.createElement('div');
+        label.className = 'fps-editor-ui-history-label fps-editor-ui-ellipsis';
         label.textContent = entry.label;
-        label.style.cssText = 'font-size:12px;font-weight:900;color:var(--fps-editor-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
         const meta = doc.createElement('div');
+        meta.className = 'fps-editor-ui-history-meta fps-editor-ui-ellipsis';
         meta.textContent = `${formatHistoryTimestamp(entry.createdAt)} · ${entry.commandType}`;
-        meta.style.cssText = 'font-size:11px;color:var(--fps-editor-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
         item.appendChild(label);
         item.appendChild(meta);
         list.appendChild(item);
@@ -1646,10 +1624,11 @@ function formatHistoryTimestamp(createdAt) {
 }
 export function renderInspectorPanel(doc, panel, state, filter = '', options = {}) {
     const renderSnapshot = captureInspectorPanelRenderSnapshot(doc, panel);
+    disposeInspectorPanelUi(panel);
     clearElement(panel);
     configureLocalEditorDockPanelContent(panel);
     const title = doc.createElement('h2');
-    title.style.cssText = 'display:flex;align-items:center;gap:6px;font-size:13px;margin:-8px -8px 8px;padding:7px 8px;border-bottom:1px solid var(--fps-editor-divider);background:var(--fps-editor-chrome-dark);font-weight:800;color:var(--fps-editor-text-strong)';
+    title.className = 'fps-editor-inspector-title';
     title.appendChild(createLocalEditorIcon(doc, 'inspector'));
     title.appendChild(createHeadingLabel(doc, options.title ?? 'Inspector'));
     panel.appendChild(title);
@@ -1669,7 +1648,7 @@ export function renderInspectorPanel(doc, panel, state, filter = '', options = {
         restoreInspectorPanelRenderSnapshot(panel, renderSnapshot);
         return;
     }
-    const controlRegistry = createLocalEditorBrowserInspectorControlRegistry(options.controls, options.controlConflict);
+    const controlRegistry = createLocalEditorBrowserInspectorControlRegistry(options.controls, options.controlConflict, options.layerHost);
     appendInspectorSummary(doc, viewport, inspectorObject, selectionCount, options.summaryTitle);
     const visibleSections = filterInspectorSections(inspectorObject.sections.filter(section => section.placement !== 'summary'), filter);
     if (visibleSections.length === 0) {
@@ -1712,30 +1691,27 @@ function restoreInspectorPanelRenderSnapshot(panel, snapshot) {
     scrollContainer.scrollLeft = snapshot.scrollLeft;
 }
 function createInspectorSearchInput(doc, value) {
-    const input = doc.createElement('input');
+    const control = registerInspectorUiMount(createEditorUiTextControl({
+        document: doc,
+        value,
+        placeholder: 'Search…',
+    }));
+    const input = control.nativeInputs[0];
     input.dataset.editorInspectorSearch = 'true';
-    input.value = value;
-    input.placeholder = 'Search...';
-    input.style.cssText = [
-        createEditorInputStyle(),
-        'width:100%',
-        'height:30px',
-        'margin:0 0 8px',
-        'outline:none',
-    ].join(';');
-    return input;
+    control.element.className = `${control.element.className || ''} fps-editor-inspector-search`.trim();
+    return control.element;
 }
 function appendInspectorSummary(doc, panel, inspectorObject, selectionCount, summaryTitle) {
     const block = createInspectorComponentBlock(doc);
     const header = doc.createElement('div');
-    header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px';
+    header.className = 'fps-editor-inspector-summary-header';
     const title = doc.createElement('h3');
     const targetKind = inspectorObject.selection.targetKind;
     const markerLike = targetKind === 'marker' || targetKind === 'marker-graph';
     title.textContent = summaryTitle ?? (selectionCount > 1
         ? markerLike ? 'Markers' : 'Selection'
         : targetKind === 'marker-graph' ? 'Marker Graph' : targetKind === 'marker' ? 'Marker' : 'GameObject');
-    title.style.cssText = 'font-size:12px;margin:0;font-weight:900;color:var(--fps-editor-text-strong)';
+    title.className = 'fps-editor-inspector-summary-title';
     header.appendChild(title);
     header.appendChild(createInspectorAccessBadge(doc, 'readonly'));
     block.appendChild(header);
@@ -1766,36 +1742,24 @@ function inspectorPropertyMatches(section, property, needle) {
             .some(value => String(value).toLowerCase().includes(needle));
 }
 function createInspectorSectionBlock(doc, inspectorObject, section, controlRegistry, options) {
-    const block = doc.createElement('details');
+    const sectionMount = registerInspectorUiMount(createEditorUiSection({
+        document: doc,
+        title: section.title,
+        collapsed: section.collapsedByDefault === true,
+        collapsible: true,
+    }));
+    const block = sectionMount.element;
     block.dataset.editorInspectorSection = section.id;
-    block.open = section.collapsedByDefault !== true;
     const status = resolveLocalEditorBrowserInspectorSectionStatus(section);
     const { access, effect } = status;
     block.dataset.editorInspectorAccess = access;
     block.dataset.editorInspectorEffect = effect;
-    block.style.cssText = createInspectorBlockStyle(access, effect);
-    const sectionTitle = doc.createElement('summary');
-    sectionTitle.style.cssText = [
-        'font-size:12px',
-        'margin:-2px 0 8px',
-        'font-weight:900',
-        'color:var(--fps-editor-text-strong)',
-        'display:flex',
-        'align-items:center',
-        'justify-content:space-between',
-        'gap:8px',
-        'cursor:pointer',
-        'list-style:none',
-    ].join(';');
-    const label = doc.createElement('span');
-    label.textContent = section.title;
-    sectionTitle.appendChild(label);
     const meta = doc.createElement('span');
-    meta.style.cssText = 'display:flex;align-items:center;gap:6px;min-width:0;color:var(--fps-editor-muted);font-size:10px;text-transform:uppercase;letter-spacing:0';
+    meta.className = 'fps-editor-inspector-section-meta';
     if (section.summary) {
         const summary = doc.createElement('span');
         summary.textContent = section.summary;
-        summary.style.cssText = 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;font-size:11px';
+        summary.className = 'fps-editor-inspector-section-summary';
         meta.appendChild(summary);
     }
     const badge = createInspectorAccessBadge(doc, access);
@@ -1806,9 +1770,8 @@ function createInspectorSectionBlock(doc, inspectorObject, section, controlRegis
         effectBadge.style.flex = '0 0 auto';
         meta.appendChild(effectBadge);
     }
-    sectionTitle.appendChild(meta);
-    block.appendChild(sectionTitle);
-    const content = doc.createElement('div');
+    sectionMount.header.appendChild(meta);
+    const content = sectionMount.content;
     content.dataset.editorInspectorSectionContent = section.id;
     for (const group of groupInspectorProperties(section.properties)) {
         if (group.kind === 'vector')
@@ -1816,14 +1779,13 @@ function createInspectorSectionBlock(doc, inspectorObject, section, controlRegis
         else
             appendInspectorPropertyRow(doc, content, inspectorObject, group.property, controlRegistry);
     }
-    block.appendChild(content);
     return block;
 }
 function createInspectorComponentBlock(doc) {
     const block = doc.createElement('div');
+    block.className = 'fps-editor-inspector-component';
     block.dataset.editorInspectorAccess = 'readonly';
     block.dataset.editorInspectorEffect = 'active';
-    block.style.cssText = createInspectorBlockStyle('readonly', 'active');
     return block;
 }
 export function resolveLocalEditorBrowserInspectorSectionStatus(section) {
@@ -1837,15 +1799,6 @@ export function resolveLocalEditorBrowserInspectorSectionStatus(section) {
             && !(effect === 'default' && inspectorSummaryLooksDefault(section.summary)),
     };
 }
-function createInspectorBlockStyle(_access, _effect = 'active') {
-    return [
-        'margin:0 0 8px',
-        'padding:9px',
-        'border:1px solid var(--fps-editor-inspector-section-border, var(--fps-editor-border))',
-        'border-radius:3px',
-        'background:var(--fps-editor-panel-soft)',
-    ].join(';');
-}
 function isInspectorPropertyEditable(property) {
     return property.readOnly !== true
         && property.persistence === 'document'
@@ -2045,123 +1998,125 @@ function resolveInspectorVectorGroupLabel(properties, fallback) {
         return first;
     return toTitle(fallback);
 }
-const builtinInspectorControlRegistrations = [
-    {
-        id: 'builtin.readonly',
-        order: 100,
-        control: 'readonly',
-        render: ({ doc, target, property }) => createInspectorReadonlyControl(doc, target, property),
-    },
-    {
-        id: 'builtin.string',
-        order: 100,
-        control: 'string',
-        render: ({ doc, target, property }) => createInspectorTextControl(doc, target, property),
-    },
-    {
-        id: 'builtin.number',
-        order: 100,
-        control: 'number',
-        render: ({ doc, target, property }) => createInspectorNumberControl(doc, target, property),
-    },
-    {
-        id: 'builtin.boolean',
-        order: 100,
-        control: 'boolean',
-        render: ({ doc, target, property }) => createInspectorBooleanControl(doc, target, property),
-    },
-    {
-        id: 'builtin.enum',
-        order: 100,
-        control: 'enum',
-        render: ({ doc, target, property }) => createInspectorEnumControl(doc, target, property),
-    },
-    {
-        id: 'builtin.vec2',
-        order: 100,
-        control: 'vec2',
-        render: ({ doc, target, property }) => createInspectorVectorControl(doc, target, property),
-    },
-    {
-        id: 'builtin.vec3',
-        order: 100,
-        control: 'vec3',
-        render: ({ doc, target, property }) => createInspectorVectorControl(doc, target, property),
-    },
-    {
-        id: 'builtin.color',
-        order: 100,
-        control: 'color',
-        render: ({ doc, target, property }) => createInspectorColorControl(doc, target, property),
-    },
-    {
-        id: 'builtin.open-right-dock-tab',
-        order: 90,
-        control: 'custom',
-        customControl: 'open-right-dock-tab',
-        render: ({ doc, property }) => createInspectorOpenRightDockTabControl(doc, property),
-    },
-    {
-        id: 'builtin.rendering-action-button',
-        order: 92,
-        control: 'custom',
-        customControl: 'rendering-action-button',
-        render: ({ doc, property }) => createInspectorRenderingActionButtonControl(doc, property),
-    },
-    {
-        id: 'builtin.inspector-action-button',
-        order: 93,
-        control: 'custom',
-        customControl: 'inspector-action-button',
-        render: ({ doc, target, property }) => createInspectorActionButtonControl(doc, target, property),
-    },
-    {
-        id: 'builtin.marker-relation-editor',
-        order: 91,
-        control: 'custom',
-        customControl: 'marker-relation-editor',
-        render: ({ doc, property }) => createInspectorMarkerRelationEditorControl(doc, property),
-    },
-    {
-        id: 'builtin.asset-picker-card',
-        order: 95,
-        control: 'custom',
-        customControl: 'asset-picker-card',
-        render: ({ doc, target, property, bindInput }) => createInspectorAssetPickerCardControl(doc, target, property, bindInput),
-    },
-    {
-        id: 'builtin.ground-decal-layout',
-        order: 96,
-        control: 'custom',
-        customControl: 'ground-decal-layout',
-        render: ({ doc, target, property, bindInput }) => createInspectorGroundDecalLayoutControl(doc, target, property, bindInput),
-    },
-    {
-        id: 'builtin.material-slot-list',
-        order: 97,
-        control: 'custom',
-        customControl: 'material-slot-list',
-        render: ({ doc, property }) => createInspectorMaterialSlotListControl(doc, property),
-    },
-    {
-        id: 'builtin.asset',
-        order: 100,
-        control: 'asset',
-        render: ({ doc, target, property }) => createInspectorTextControl(doc, target, property),
-    },
-    {
-        id: 'builtin.object',
-        order: 100,
-        control: 'object',
-        render: ({ doc, target, property }) => createInspectorReadonlyControl(doc, target, property),
-    },
-    {
-        id: 'builtin.custom',
-        order: 1000,
-        control: 'custom',
-        render: ({ doc, target, property }) => createInspectorReadonlyControl(doc, target, property),
-    },
-];
+function createBuiltinInspectorControlRegistrations(layerHost) {
+    return [
+        {
+            id: 'builtin.readonly',
+            order: 100,
+            control: 'readonly',
+            render: ({ doc, target, property }) => createInspectorReadonlyControl(doc, target, property),
+        },
+        {
+            id: 'builtin.string',
+            order: 100,
+            control: 'string',
+            render: ({ doc, target, property }) => createInspectorTextControl(doc, target, property),
+        },
+        {
+            id: 'builtin.number',
+            order: 100,
+            control: 'number',
+            render: ({ doc, target, property }) => createInspectorNumberControl(doc, target, property),
+        },
+        {
+            id: 'builtin.boolean',
+            order: 100,
+            control: 'boolean',
+            render: ({ doc, target, property }) => createInspectorBooleanControl(doc, target, property),
+        },
+        {
+            id: 'builtin.enum',
+            order: 100,
+            control: 'enum',
+            render: ({ doc, target, property }) => createInspectorEnumControl(doc, target, property, layerHost),
+        },
+        {
+            id: 'builtin.vec2',
+            order: 100,
+            control: 'vec2',
+            render: ({ doc, target, property }) => createInspectorVectorControl(doc, target, property),
+        },
+        {
+            id: 'builtin.vec3',
+            order: 100,
+            control: 'vec3',
+            render: ({ doc, target, property }) => createInspectorVectorControl(doc, target, property),
+        },
+        {
+            id: 'builtin.color',
+            order: 100,
+            control: 'color',
+            render: ({ doc, target, property }) => createInspectorColorControl(doc, target, property, layerHost),
+        },
+        {
+            id: 'builtin.open-right-dock-tab',
+            order: 90,
+            control: 'custom',
+            customControl: 'open-right-dock-tab',
+            render: ({ doc, property }) => createInspectorOpenRightDockTabControl(doc, property),
+        },
+        {
+            id: 'builtin.rendering-action-button',
+            order: 92,
+            control: 'custom',
+            customControl: 'rendering-action-button',
+            render: ({ doc, property }) => createInspectorRenderingActionButtonControl(doc, property),
+        },
+        {
+            id: 'builtin.inspector-action-button',
+            order: 93,
+            control: 'custom',
+            customControl: 'inspector-action-button',
+            render: ({ doc, target, property }) => createInspectorActionButtonControl(doc, target, property),
+        },
+        {
+            id: 'builtin.marker-relation-editor',
+            order: 91,
+            control: 'custom',
+            customControl: 'marker-relation-editor',
+            render: ({ doc, property }) => createInspectorMarkerRelationEditorControl(doc, property),
+        },
+        {
+            id: 'builtin.asset-picker-card',
+            order: 95,
+            control: 'custom',
+            customControl: 'asset-picker-card',
+            render: ({ doc, target, property, bindInput }) => createInspectorAssetPickerCardControl(doc, target, property, bindInput),
+        },
+        {
+            id: 'builtin.ground-decal-layout',
+            order: 96,
+            control: 'custom',
+            customControl: 'ground-decal-layout',
+            render: ({ doc, target, property, bindInput }) => createInspectorGroundDecalLayoutControl(doc, target, property, bindInput),
+        },
+        {
+            id: 'builtin.material-slot-list',
+            order: 97,
+            control: 'custom',
+            customControl: 'material-slot-list',
+            render: ({ doc, property }) => createInspectorMaterialSlotListControl(doc, property),
+        },
+        {
+            id: 'builtin.asset',
+            order: 100,
+            control: 'asset',
+            render: ({ doc, target, property }) => createInspectorTextControl(doc, target, property),
+        },
+        {
+            id: 'builtin.object',
+            order: 100,
+            control: 'object',
+            render: ({ doc, target, property }) => createInspectorReadonlyControl(doc, target, property),
+        },
+        {
+            id: 'builtin.custom',
+            order: 1000,
+            control: 'custom',
+            render: ({ doc, target, property }) => createInspectorReadonlyControl(doc, target, property),
+        },
+    ];
+}
 function appendInspectorPropertyRow(doc, parent, inspectorObject, property, controlRegistry) {
     const control = renderInspectorControl(doc, controlRegistry, inspectorObject, property);
     const access = getInspectorPropertyAccess(property);
@@ -2174,17 +2129,24 @@ function appendInspectorPropertyRow(doc, parent, inspectorObject, property, cont
         parent.appendChild(control);
         return;
     }
-    const row = createPropertyRow(doc, property.label, control);
+    const row = createInspectorPropertyRowShell(doc, property.label, control);
     row.dataset.editorInspectorAccess = access;
     row.dataset.editorInspectorEffect = effect;
     applyInspectorPropertyRowHierarchyStyle(row, property);
     row.title = createInspectorStatusTitle(access, effect, property.tooltip ?? property.disabledReason);
     row.dataset.editorTooltip = row.title;
-    const label = row.firstElementChild;
-    if (label)
-        label.style.cssText = createInspectorPropertyLabelStyle(access, effect);
     parent.appendChild(row);
 }
+function createInspectorPropertyRowShell(doc, labelText, control) {
+    const row = doc.createElement('div');
+    row.className = 'fps-editor-inspector-property-row';
+    const label = doc.createElement('span');
+    label.className = 'fps-editor-inspector-property-label';
+    label.textContent = labelText;
+    row.appendChild(label);
+    row.appendChild(control);
+    return row;
+}
 function applyInspectorPropertyRowHierarchyStyle(row, property) {
     const indentLevel = Math.max(0, Math.min(4, Math.floor(readInspectorControlOptionNumber(property, 'indentLevel'))));
     if (indentLevel <= 0)
@@ -2198,12 +2160,12 @@ function applyInspectorPropertyRowHierarchyStyle(row, property) {
         `margin-left:${indentLevel * 14}px`,
         'padding-left:8px',
         'border-left:2px solid var(--fps-editor-border)',
-        `grid-template-columns:${Math.max(68, 92 - indentLevel * 12)}px 1fr`,
+        `grid-template-columns:${Math.max(68, 96 - indentLevel * 12)}px minmax(0,1fr)`,
     ].filter(Boolean).join(';');
 }
-export function createLocalEditorBrowserInspectorControlRegistry(controls = [], conflict = 'error') {
+export function createLocalEditorBrowserInspectorControlRegistry(controls = [], conflict = 'error', layerHost) {
     const registrations = new Map();
-    for (const control of builtinInspectorControlRegistrations) {
+    for (const control of createBuiltinInspectorControlRegistrations(layerHost)) {
         registerInspectorControl(registrations, control, 'error');
     }
     for (const control of controls) {
@@ -2241,12 +2203,24 @@ function renderInspectorControl(doc, registrations, target, property) {
         },
     };
     const registration = resolveLocalEditorBrowserInspectorControlRegistration(registrations, context);
-    if (registration)
-        return registration.render(context);
+    if (registration) {
+        const rendered = registration.render(context);
+        if (isInspectorControlMount(doc, rendered))
+            return registerInspectorUiMount(rendered).element;
+        return rendered;
+    }
     if (!isInspectorPropertyEditable(normalizedProperty))
         return createInspectorReadonlyControl(doc, target, normalizedProperty);
     return createInspectorReadonlyControl(doc, target, normalizedProperty);
 }
+function isInspectorControlMount(doc, value) {
+    const HTMLElementConstructor = doc.defaultView?.HTMLElement;
+    if (HTMLElementConstructor && value instanceof HTMLElementConstructor)
+        return false;
+    if ('nodeType' in value && value.nodeType === 1)
+        return false;
+    return 'element' in value && typeof value.dispose === 'function';
+}
 export function resolveLocalEditorBrowserInspectorControlRegistration(registrations, context) {
     for (const registration of registrations) {
         if (localEditorBrowserInspectorControlSupports(registration, context))
@@ -2303,7 +2277,7 @@ function isInspectorCustomControlFallback(customControl, property) {
 }
 function appendInspectorVectorInputs(doc, parent, inspectorObject, label, properties, layout = 'block', options = {}) {
     const wrapper = doc.createElement('div');
-    wrapper.style.cssText = 'margin:8px 0';
+    wrapper.className = 'fps-editor-inspector-vector-group';
     const access = getInspectorPropertyGroupAccess(properties);
     const effect = getInspectorPropertyGroupEffect(properties);
     wrapper.dataset.editorInspectorAccess = access;
@@ -2311,30 +2285,35 @@ function appendInspectorVectorInputs(doc, parent, inspectorObject, label, proper
     wrapper.title = createInspectorStatusTitle(access, effect, getInspectorPropertyGroupTooltip(properties) ?? getInspectorPropertyGroupDisabledReason(properties));
     wrapper.dataset.editorTooltip = wrapper.title;
     const labelElement = doc.createElement('div');
-    labelElement.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px';
+    labelElement.className = 'fps-editor-inspector-vector-header';
     const labelText = doc.createElement('span');
     labelText.textContent = label;
-    labelText.style.cssText = createInspectorPropertyLabelStyle(access, effect);
+    labelText.className = 'fps-editor-inspector-property-label';
     labelElement.appendChild(labelText);
     const actions = doc.createElement('span');
-    actions.style.cssText = 'display:inline-flex;align-items:center;gap:5px;flex:0 0 auto';
+    actions.className = 'fps-editor-inspector-vector-actions';
     labelElement.appendChild(actions);
     const groupPath = resolveLocalEditorBrowserInspectorVectorGroupPathFromProperties(properties);
+    const localizedLabel = resolveInspectorVectorGroupChineseLabel(groupPath, label);
     const forceLocked = properties.some(property => readInspectorControlOptionBoolean(property, 'forceVectorLock'));
     const locked = forceLocked || (!!groupPath && options.lockedVectorGroups?.has(groupPath) === true);
-    if (groupPath && access === 'editable') {
-        const lockButton = createInspectorVectorHeaderButton(doc, forceLocked ? `${label} axes are locked` : locked ? `Unlock ${label} axes` : `Lock ${label} axes`, locked);
+    if (groupPath === 'transform.scale' && access === 'editable') {
+        const lockButton = createInspectorVectorHeaderButton(doc, forceLocked
+            ? '等比缩放已由当前属性强制开启'
+            : locked
+                ? '关闭等比缩放：恢复各轴独立调整'
+                : '开启等比缩放：调整任意一轴时，其他轴按当前比例同步变化', locked);
         if (!forceLocked)
             lockButton.dataset.editorInspectorVectorLock = groupPath;
         lockButton.disabled = forceLocked;
         lockButton.dataset.editorInspectorVectorLockState = locked ? 'locked' : 'unlocked';
         lockButton.setAttribute('aria-pressed', locked ? 'true' : 'false');
-        lockButton.appendChild(createLocalEditorIcon(doc, 'lock', { size: 12, strokeWidth: 2.2 }));
+        lockButton.appendChild(createLocalEditorIcon(doc, 'link', { size: 12, strokeWidth: 2.2 }));
         actions.appendChild(lockButton);
     }
     const copyPayload = createLocalEditorBrowserInspectorVectorCopyPayload(properties);
     if (copyPayload) {
-        const copyButton = createInspectorVectorHeaderButton(doc, `Copy ${label}`, false);
+        const copyButton = createInspectorVectorHeaderButton(doc, `复制${localizedLabel}三轴数值`, false);
         copyButton.dataset.editorInspectorVectorCopy = 'true';
         copyButton.dataset.editorInspectorVectorCopyValue = copyPayload;
         copyButton.appendChild(createLocalEditorIcon(doc, 'copy', { size: 12, strokeWidth: 2.2 }));
@@ -2353,21 +2332,34 @@ function appendInspectorVectorInputs(doc, parent, inspectorObject, label, proper
     const fields = doc.createElement('div');
     if (groupPath)
         wrapper.dataset.editorInspectorVectorGroupPath = groupPath;
-    fields.style.cssText = `display:grid;grid-template-columns:repeat(${Math.max(1, properties.length)},minmax(0,1fr));gap:6px;width:100%`;
+    fields.className = 'fps-editor-inspector-vector-fields';
+    fields.style.setProperty('--fps-editor-vector-dimensions', String(Math.max(1, properties.length)));
     for (const property of properties) {
-        fields.appendChild(isInspectorPropertyEditable(property)
+        const control = isInspectorPropertyEditable(property)
             ? createInspectorNumberControl(doc, inspectorObject, property)
-            : createInspectorReadonlyControl(doc, inspectorObject, property));
+            : createInspectorReadonlyControl(doc, inspectorObject, property);
+        const axis = resolveLocalEditorBrowserInspectorVectorGroupAxisFromPropertyPath(property.path)?.axis;
+        if (!axis) {
+            fields.appendChild(control);
+            continue;
+        }
+        const axisField = doc.createElement('div');
+        axisField.className = 'fps-editor-inspector-vector-axis-field';
+        axisField.dataset.editorInspectorVectorAxisField = axis;
+        const axisLabel = doc.createElement('span');
+        axisLabel.className = 'fps-editor-inspector-vector-axis-label';
+        axisLabel.textContent = axis.toUpperCase();
+        axisLabel.setAttribute('aria-hidden', 'true');
+        axisField.appendChild(axisLabel);
+        axisField.appendChild(control);
+        fields.appendChild(axisField);
     }
     if (layout === 'inline') {
-        const row = createPropertyRow(doc, label, fields);
+        const row = createInspectorPropertyRowShell(doc, label, fields);
         row.dataset.editorInspectorAccess = access;
         row.dataset.editorInspectorEffect = effect;
         row.title = wrapper.title;
         row.dataset.editorTooltip = wrapper.dataset.editorTooltip ?? wrapper.title;
-        const rowLabel = row.firstElementChild;
-        if (rowLabel)
-            rowLabel.style.cssText = createInspectorPropertyLabelStyle(access, effect);
         parent.appendChild(row);
         return;
     }
@@ -2375,25 +2367,22 @@ function appendInspectorVectorInputs(doc, parent, inspectorObject, label, proper
     wrapper.appendChild(fields);
     parent.appendChild(wrapper);
 }
+function resolveInspectorVectorGroupChineseLabel(groupPath, fallback) {
+    if (groupPath === 'transform.position')
+        return '位置';
+    if (groupPath === 'transform.rotation')
+        return '旋转';
+    if (groupPath === 'transform.scale')
+        return '缩放';
+    return fallback;
+}
 function createInspectorVectorHeaderButton(doc, title, active) {
-    const button = doc.createElement('button');
-    button.type = 'button';
+    const mount = registerInspectorUiMount(createEditorUiButton({ document: doc, text: '', title }));
+    const button = mount.element;
     button.title = title;
     button.dataset.editorTooltip = title;
-    button.style.cssText = [
-        'width:22px',
-        'height:22px',
-        'padding:0',
-        `border:1px solid ${active ? 'var(--fps-editor-accent)' : 'var(--fps-editor-border)'}`,
-        'border-radius:3px',
-        `background:${active ? 'var(--fps-editor-accent-soft)' : 'var(--fps-editor-button-bg)'}`,
-        `color:${active ? 'var(--fps-editor-accent)' : 'var(--fps-editor-text)'}`,
-        'display:inline-flex',
-        'align-items:center',
-        'justify-content:center',
-        'cursor:pointer',
-        'flex:0 0 auto',
-    ].join(';');
+    button.className = `${button.className || ''} fps-editor-inspector-icon-button`.trim();
+    button.dataset.editorUiActive = String(active);
     return button;
 }
 function getInspectorPropertyGroupAccess(properties) {
@@ -2451,31 +2440,6 @@ function createInspectorStatusTitle(access, effect, detail) {
         parts.push(detail);
     return [...new Set(parts)].join(' ');
 }
-function createInspectorReadonlyValueShell(doc, access, effect = 'active', title) {
-    const valueElement = doc.createElement('div');
-    valueElement.dataset.editorInspectorAccess = access;
-    valueElement.dataset.editorInspectorEffect = effect;
-    valueElement.title = title ?? createInspectorStatusTitle(access, effect);
-    const warningLike = effect === 'default' || effect === 'derived' || access === 'runtime' || effect === 'runtime';
-    const unsupported = effect === 'unsupported';
-    valueElement.style.cssText = [
-        'min-width:0',
-        'min-height:24px',
-        'display:flex',
-        'align-items:center',
-        'gap:5px',
-        'padding:3px 6px',
-        `border:1px solid ${unsupported ? 'var(--fps-editor-danger-border)' : warningLike ? 'var(--fps-editor-warn-border)' : 'var(--fps-editor-readonly-border)'}`,
-        'border-radius:3px',
-        `background:${unsupported ? 'var(--fps-editor-danger-soft)' : warningLike ? 'var(--fps-editor-warn-soft)' : 'var(--fps-editor-readonly-bg)'}`,
-        `color:${unsupported ? 'var(--fps-editor-danger-text)' : warningLike ? 'var(--fps-editor-warn)' : 'var(--fps-editor-readonly-text)'}`,
-        warningLike ? 'font-style:italic' : '',
-    ].filter(Boolean).join(';');
-    const icon = createLocalEditorIcon(doc, 'lock', { size: 11, strokeWidth: 2.3 });
-    icon.style.opacity = '0.78';
-    valueElement.appendChild(icon);
-    return valueElement;
-}
 function appendInspectorReadonlyTextValue(doc, parent, value, access, effect = 'active', title) {
     const valueText = doc.createElement('span');
     valueText.textContent = value;
@@ -2484,152 +2448,252 @@ function appendInspectorReadonlyTextValue(doc, parent, value, access, effect = '
     parent.title = title ?? createInspectorStatusTitle(access, effect);
 }
 function createInspectorReadonlyCopyButton(doc, value, label) {
-    const button = doc.createElement('button');
-    button.type = 'button';
+    const mount = registerInspectorUiMount(createEditorUiButton({ document: doc, text: '', title: `Copy ${label}` }));
+    const button = mount.element;
     button.dataset.editorInspectorReadonlyCopy = 'true';
     button.dataset.editorInspectorReadonlyCopyValue = value;
     button.dataset.editorTooltip = `Copy ${label}`;
     button.setAttribute('aria-label', `Copy ${label}`);
     button.title = `Copy ${label}`;
-    button.style.cssText = [
-        'width:20px',
-        'height:20px',
-        'min-width:20px',
-        'margin-left:auto',
-        'padding:0',
-        'border:1px solid transparent',
-        'border-radius:3px',
-        'background:transparent',
-        'color:currentColor',
-        'display:inline-flex',
-        'align-items:center',
-        'justify-content:center',
-        'cursor:pointer',
-        'opacity:0.72',
-        'flex:0 0 20px',
-    ].join(';');
+    button.className = `${button.className || ''} fps-editor-inspector-copy-button`.trim();
     button.appendChild(createLocalEditorIcon(doc, 'copy', { size: 12, strokeWidth: 2.2 }));
     return button;
 }
 function createInspectorReadonlyScalarControl(doc, value, access, effect = 'active', title, copyLabel = 'value') {
-    const valueElement = createInspectorReadonlyValueShell(doc, access, effect, title);
+    const mount = registerInspectorUiMount(createEditorUiReadonlyControl({
+        document: doc,
+        value: '',
+        error: effect === 'unsupported',
+    }));
+    const valueElement = mount.element;
+    valueElement.dataset.editorInspectorAccess = access;
+    valueElement.dataset.editorInspectorEffect = effect;
+    valueElement.title = title ?? createInspectorStatusTitle(access, effect);
+    valueElement.className = `${valueElement.className || ''} fps-editor-inspector-readonly-value`.trim();
+    if (effect === 'default' || effect === 'derived' || effect === 'runtime' || access === 'runtime') {
+        valueElement.className = `${valueElement.className} fps-editor-inspector-readonly-value--warning`.trim();
+    }
+    const icon = createLocalEditorIcon(doc, 'lock', { size: 11, strokeWidth: 2.3 });
+    icon.style.opacity = '0.78';
+    valueElement.appendChild(icon);
     appendInspectorReadonlyTextValue(doc, valueElement, value, access, effect, title);
     if (value)
         valueElement.appendChild(createInspectorReadonlyCopyButton(doc, value, copyLabel));
     return valueElement;
 }
-function createInspectorReadonlyDetailsShell(doc, property, access) {
-    const effect = getInspectorPropertyEffect(property);
-    const warningLike = effect === 'default' || effect === 'derived' || access === 'runtime' || effect === 'runtime';
-    const unsupported = effect === 'unsupported';
-    const details = doc.createElement('details');
-    details.dataset.editorInspectorAccess = access;
-    details.dataset.editorInspectorEffect = effect;
-    details.title = createInspectorStatusTitle(access, effect, property.tooltip ?? property.disabledReason);
-    details.style.cssText = [
-        'min-width:0',
-        'max-width:100%',
-        'padding:3px 6px',
-        `border:1px solid ${unsupported ? 'var(--fps-editor-danger-border)' : warningLike ? 'var(--fps-editor-warn-border)' : 'var(--fps-editor-readonly-border)'}`,
-        'border-radius:3px',
-        `background:${unsupported ? 'var(--fps-editor-danger-soft)' : warningLike ? 'var(--fps-editor-warn-soft)' : 'var(--fps-editor-readonly-bg)'}`,
-        `color:${unsupported ? 'var(--fps-editor-danger-text)' : warningLike ? 'var(--fps-editor-warn)' : 'var(--fps-editor-readonly-text)'}`,
-    ].join(';');
-    return details;
+function bindEditorUiValueControl(control, target, property, options) {
+    for (const input of control.nativeInputs) {
+        applyLocalEditorBrowserInspectorControlBinding(input, target, property, options);
+    }
+    const bridgeInput = control.nativeInputs.find(input => input.classList?.contains?.('fps-editor-ui-proxy-input'))
+        ?? control.nativeInputs[0];
+    const nativeEventListeners = [];
+    for (const input of control.nativeInputs) {
+        for (const type of ['input', 'change', 'blur', 'keydown']) {
+            const listener = (nativeEvent) => {
+                if (input.dataset.editorUiBridgeDispatch === 'true')
+                    return;
+                input.dataset.editorUiNativeEventActive = 'true';
+                if (type === 'keydown'
+                    && nativeEvent.key === 'Enter'
+                    && !nativeEvent.isComposing) {
+                    input.dataset.editorUiKeyboardCommitPending = 'true';
+                }
+                queueMicrotask(() => {
+                    delete input.dataset.editorUiNativeEventActive;
+                    delete input.dataset.editorUiKeyboardCommitPending;
+                });
+            };
+            input.addEventListener(type, listener, true);
+            nativeEventListeners.push({ input, type, listener });
+        }
+    }
+    const stopValueBridge = control.onValue(event => {
+        if (!bridgeInput)
+            return;
+        if (bridgeInput.dataset.editorUiBridgeDispatch === 'true'
+            || control.nativeInputs.some(input => (input.dataset.editorUiNativeEventActive === 'true'
+                || input.dataset.editorUiKeyboardCommitPending === 'true')))
+            return;
+        // PCUI owns the in-control visual preview. Forwarding a synthetic preview
+        // through the legacy property callback would synchronously rerender and
+        // destroy an active slider/color gesture. Only bridge its final commit,
+        // mapped back to the descriptor's existing native commit mode.
+        if (event.phase === 'preview')
+            return;
+        bridgeInput.dataset.editorUiBridgeDispatch = 'true';
+        const EventConstructor = bridgeInput.ownerDocument.defaultView?.Event ?? Event;
+        const eventType = property.commitMode === 'live'
+            ? 'input'
+            : property.commitMode === 'blur'
+                ? 'focusout'
+                : 'change';
+        bridgeInput.dispatchEvent(new EventConstructor(eventType, { bubbles: true }));
+        delete bridgeInput.dataset.editorUiBridgeDispatch;
+    });
+    const disposeControl = control.dispose.bind(control);
+    control.dispose = () => {
+        stopValueBridge();
+        for (const { input, type, listener } of nativeEventListeners) {
+            input.removeEventListener(type, listener, true);
+        }
+        disposeControl();
+    };
+    registerInspectorUiMount(control);
 }
 function createInspectorInputBase(doc, target, property) {
-    const input = doc.createElement('input');
-    input.value = property.mixed ? '' : formatInspectorEditableValue(property.value, property);
-    input.placeholder = property.mixed ? '--' : '';
-    applyLocalEditorBrowserInspectorControlBinding(input, target, property);
-    input.style.cssText = createInspectorInputStyle();
-    return input;
+    const control = createEditorUiTextControl({
+        document: doc,
+        value: property.mixed ? '' : formatInspectorEditableValue(property.value, property),
+        mixed: property.mixed,
+        placeholder: property.placeholder ?? '',
+        disabled: !isInspectorPropertyEditable(property),
+        readOnly: property.readOnly,
+    });
+    bindEditorUiValueControl(control, target, property);
+    return control.element;
 }
 function createInspectorNumberControl(doc, target, property) {
-    const input = createInspectorInputBase(doc, target, property);
-    input.type = 'text';
-    input.inputMode = 'decimal';
-    input.dataset.serializedNumberStep = String(property.step ?? 0.1);
-    if (property.min != null)
-        input.dataset.serializedNumberMin = String(property.min);
-    if (property.max != null)
-        input.dataset.serializedNumberMax = String(property.max);
-    return input;
+    const control = createEditorUiNumberControl({
+        document: doc,
+        value: typeof property.value === 'number' && Number.isFinite(property.value) ? property.value : 0,
+        mixed: property.mixed,
+        placeholder: property.placeholder ?? '',
+        min: property.min,
+        max: property.max,
+        step: property.step ?? 0.1,
+        precision: property.precision,
+        stepPrecision: property.stepPrecision,
+        disabled: !isInspectorPropertyEditable(property),
+        readOnly: property.readOnly,
+    });
+    for (const input of control.nativeInputs) {
+        input.inputMode = 'decimal';
+        input.dataset.serializedNumberStep = String(property.step ?? 0.1);
+        if (property.precision != null)
+            input.dataset.serializedNumberPrecision = String(property.precision);
+        if (property.stepPrecision != null)
+            input.dataset.serializedNumberStepPrecision = String(property.stepPrecision);
+        if (property.min != null)
+            input.dataset.serializedNumberMin = String(property.min);
+        if (property.max != null)
+            input.dataset.serializedNumberMax = String(property.max);
+    }
+    bindEditorUiValueControl(control, target, property);
+    if (property.path.startsWith('transform.scale.')
+        && typeof property.value === 'number'
+        && Number.isFinite(property.value)) {
+        for (const input of control.nativeInputs) {
+            input.dataset.serializedVectorBaseValue = String(property.value);
+        }
+    }
+    return control.element;
 }
 function createInspectorTextControl(doc, target, property) {
-    const input = createInspectorInputBase(doc, target, property);
-    input.type = 'text';
-    return input;
+    return createInspectorInputBase(doc, target, property);
 }
 function createInspectorBooleanControl(doc, target, property) {
-    const input = createInspectorInputBase(doc, target, property);
-    input.type = 'checkbox';
-    input.checked = property.value === true;
-    input.indeterminate = property.mixed === true;
-    input.style.cssText = [
-        'width:16px',
-        'height:16px',
-        'accent-color:var(--fps-editor-accent)',
-        'justify-self:start',
-        'cursor:pointer',
-        'box-shadow:0 0 0 1px var(--fps-editor-editable-border)',
-    ].join(';');
-    return input;
-}
-function createInspectorEnumControl(doc, target, property) {
-    const select = doc.createElement('select');
-    applyLocalEditorBrowserInspectorControlBinding(select, target, property);
-    select.style.cssText = createInspectorInputStyle();
-    for (const option of property.options ?? []) {
-        const item = doc.createElement('option');
-        item.value = String(option.value);
-        item.dataset.serializedOptionValue = JSON.stringify(option.value);
-        item.textContent = option.label;
-        item.disabled = option.disabled === true;
-        if (!property.mixed && option.value === property.value)
-            item.selected = true;
-        select.appendChild(item);
-    }
-    if (property.mixed) {
-        const mixed = doc.createElement('option');
-        mixed.value = '';
-        mixed.textContent = '--';
-        mixed.selected = true;
-        select.prepend(mixed);
+    const control = createEditorUiBooleanControl({
+        document: doc,
+        value: property.value === true,
+        mixed: property.mixed,
+        disabled: !isInspectorPropertyEditable(property),
+        readOnly: property.readOnly,
+        ariaLabel: property.label,
+    });
+    const proxy = control.nativeInputs[0];
+    if (proxy)
+        proxy.indeterminate = property.mixed === true;
+    bindEditorUiValueControl(control, target, property, { source: 'toggle' });
+    return control.element;
+}
+function createInspectorEnumControl(doc, target, property, layerHost) {
+    const options = property.options ?? [];
+    const control = createEditorUiSelectControl({
+        document: doc,
+        value: property.value,
+        options: options.map(option => ({
+            label: option.label,
+            value: option.value,
+            disabled: option.disabled,
+        })),
+        mixed: property.mixed,
+        disabled: !isInspectorPropertyEditable(property),
+        readOnly: property.readOnly,
+        ariaLabel: property.label,
+        layerHost,
+    });
+    const select = control.nativeInputs[0];
+    if (select) {
+        for (const [index, option] of options.entries()) {
+            const item = select.options[index];
+            if (item)
+                item.dataset.serializedOptionValue = JSON.stringify(option.value);
+        }
+        if (property.mixed) {
+            const mixed = doc.createElement('option');
+            mixed.value = '';
+            mixed.textContent = '--';
+            mixed.selected = true;
+            select.prepend(mixed);
+        }
     }
-    return select;
+    bindEditorUiValueControl(control, target, property, { source: 'select' });
+    return control.element;
 }
 function createInspectorVectorControl(doc, target, property) {
-    const wrapper = doc.createElement('div');
-    wrapper.dataset.inspectorVectorControl = 'true';
-    wrapper.style.cssText = 'display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%';
     const axes = property.control === 'vec2' ? ['x', 'y'] : ['x', 'y', 'z'];
-    if (property.control === 'vec2')
-        wrapper.style.gridTemplateColumns = 'repeat(2,minmax(0,1fr))';
     const value = isRecord(property.value) ? property.value : {};
-    for (const axis of axes) {
-        const input = createInspectorInputBase(doc, target, property);
-        input.type = 'text';
+    const control = createEditorUiVectorControl({
+        document: doc,
+        dimensions: property.control === 'vec2' ? 2 : 3,
+        value: axes.map(axis => typeof value[axis] === 'number' ? value[axis] : 0),
+        mixed: property.mixed,
+        min: property.min,
+        max: property.max,
+        step: property.step ?? 0.1,
+        precision: property.precision,
+        stepPrecision: property.stepPrecision,
+        disabled: !isInspectorPropertyEditable(property),
+        readOnly: property.readOnly,
+    });
+    control.element.dataset.inspectorVectorControl = 'true';
+    control.nativeInputs.forEach((input, index) => {
+        const axis = axes[index];
+        if (!axis || !('inputMode' in input))
+            return;
         input.inputMode = 'decimal';
         input.dataset.serializedNumberStep = String(property.step ?? 0.1);
+        if (property.precision != null)
+            input.dataset.serializedNumberPrecision = String(property.precision);
+        if (property.stepPrecision != null)
+            input.dataset.serializedNumberStepPrecision = String(property.stepPrecision);
         if (property.min != null)
             input.dataset.serializedNumberMin = String(property.min);
         if (property.max != null)
             input.dataset.serializedNumberMax = String(property.max);
         input.dataset.serializedVectorAxis = axis;
-        input.value = property.mixed ? '' : formatInspectorEditableValue(value[axis] ?? 0, property);
         input.title = property.tooltip ? `${axis.toUpperCase()}: ${property.tooltip}` : `${property.label}.${axis}`;
         input.dataset.editorTooltip = input.title;
-        wrapper.appendChild(input);
-    }
-    return wrapper;
-}
-function createInspectorColorControl(doc, target, property) {
-    const input = createInspectorInputBase(doc, target, property);
-    input.type = 'color';
-    input.value = colorValueToHex(property.value);
-    input.style.cssText = 'width:34px;height:26px;border:1px solid var(--fps-editor-editable-border);border-radius:3px;background:var(--fps-editor-editable-bg);padding:0;box-shadow:var(--fps-editor-editable-shadow)';
-    return input;
+    });
+    bindEditorUiValueControl(control, target, property);
+    return control.element;
+}
+function createInspectorColorControl(doc, target, property, layerHost) {
+    const hex = colorValueToHex(property.value);
+    const value = [1, 3, 5].map(index => Number.parseInt(hex.slice(index, index + 2), 16) / 255).concat([1]);
+    const control = createEditorUiColorControl({
+        document: doc,
+        value,
+        channels: 4,
+        mixed: property.mixed,
+        disabled: !isInspectorPropertyEditable(property),
+        readOnly: property.readOnly,
+        ariaLabel: property.label,
+        layerHost,
+    });
+    bindEditorUiValueControl(control, target, property, { source: 'color' });
+    return control.element;
 }
 function createInspectorOpenRightDockTabControl(doc, property) {
     const targetTabOption = readInspectorControlOptionString(property, 'targetTab');
@@ -2642,17 +2706,10 @@ function createInspectorOpenRightDockTabControl(doc, property) {
                 : 'rendering';
     const label = readInspectorControlOptionString(property, 'label')
         || (typeof property.value === 'string' ? property.value : property.label);
-    const button = createToolbarButton(doc, label, RIGHT_DOCK_TAB_ICONS[targetTab]);
-    button.type = 'button';
+    const button = createInspectorActionButtonMount(doc, label, RIGHT_DOCK_TAB_ICONS[targetTab], property.tooltip ?? label);
     button.dataset.editorOpenRightDockTab = targetTab;
     button.title = property.tooltip ?? label;
     button.dataset.editorTooltip = button.title;
-    button.style.cssText = [
-        button.style.cssText,
-        'width:100%',
-        'justify-content:center',
-        'height:28px',
-    ].filter(Boolean).join(';');
     return button;
 }
 function createInspectorRenderingActionButtonControl(doc, property) {
@@ -2662,8 +2719,7 @@ function createInspectorRenderingActionButtonControl(doc, property) {
     const icon = isLocalEditorIconName(iconName) ? iconName : 'save';
     const label = readInspectorControlOptionString(property, 'label')
         || (typeof property.value === 'string' ? property.value : property.label);
-    const button = createToolbarButton(doc, label, icon);
-    button.type = 'button';
+    const button = createInspectorActionButtonMount(doc, label, icon, property.tooltip ?? label);
     if (actionId)
         button.dataset.editorRenderingAction = actionId;
     button.disabled = property.readOnly === true
@@ -2672,12 +2728,6 @@ function createInspectorRenderingActionButtonControl(doc, property) {
         || !actionId;
     button.title = property.tooltip ?? label;
     button.dataset.editorTooltip = button.title;
-    button.style.cssText = [
-        button.style.cssText,
-        'width:100%',
-        'justify-content:center',
-        'height:28px',
-    ].filter(Boolean).join(';');
     return button;
 }
 function createInspectorActionButtonControl(doc, target, property) {
@@ -2687,8 +2737,7 @@ function createInspectorActionButtonControl(doc, target, property) {
     const icon = isLocalEditorIconName(iconName) ? iconName : 'asset';
     const label = readInspectorControlOptionString(property, 'label')
         || (typeof property.value === 'string' ? property.value : property.label);
-    const button = createToolbarButton(doc, label, icon);
-    button.type = 'button';
+    const button = createInspectorActionButtonMount(doc, label, icon, property.tooltip ?? label);
     if (actionId)
         button.dataset.editorInspectorAction = actionId;
     button.dataset.editorInspectorActionTargetId = target.activeId ?? '';
@@ -2703,18 +2752,19 @@ function createInspectorActionButtonControl(doc, target, property) {
         || !actionId;
     button.title = property.tooltip ?? label;
     button.dataset.editorTooltip = button.title;
-    button.style.cssText = [
-        button.style.cssText,
-        'width:100%',
-        'justify-content:center',
-        'height:28px',
-    ].filter(Boolean).join(';');
+    return button;
+}
+function createInspectorActionButtonMount(doc, label, icon, title) {
+    const mount = registerInspectorUiMount(createEditorUiButton({ document: doc, text: label, title }));
+    const button = mount.element;
+    button.className = `${button.className || ''} fps-editor-inspector-action-button`.trim();
+    button.prepend(createLocalEditorIcon(doc, icon, { size: 13, strokeWidth: 2.1 }));
     return button;
 }
 function createInspectorMarkerRelationEditorControl(doc, property) {
     const panel = readInspectorMarkerRelationPanelState(property);
     const wrapper = doc.createElement('div');
-    wrapper.style.cssText = 'display:flex;flex-direction:column;gap:8px;width:100%;min-width:0';
+    wrapper.className = 'fps-editor-inspector-special-control fps-editor-inspector-marker-relations';
     if (!panel) {
         wrapper.appendChild(createEmptyState(doc, '当前 marker 没有可编辑的关系数据。'));
         return wrapper;
@@ -2733,12 +2783,7 @@ function readInspectorMarkerRelationPanelState(property) {
 function createInspectorMaterialSlotListControl(doc, property) {
     const wrapper = doc.createElement('div');
     wrapper.dataset.editorInspectorMaterialSlotList = 'true';
-    wrapper.style.cssText = [
-        'min-width:0',
-        'display:flex',
-        'flex-direction:column',
-        'gap:6px',
-    ].join(';');
+    wrapper.className = 'fps-editor-inspector-special-control fps-editor-inspector-material-slots';
     const items = readInspectorMaterialSlotListItems(property);
     if (items.length === 0) {
         wrapper.appendChild(createEmptyState(doc, 'No material slots.'));
@@ -2752,30 +2797,15 @@ function createInspectorMaterialSlotListControl(doc, property) {
 }
 function createInspectorMaterialSlotListItem(doc, item, labels) {
     const details = doc.createElement('details');
+    details.className = 'fps-editor-inspector-material-slot';
     details.dataset.editorInspectorMaterialSlotItem = item.key;
     if (item.selectionTargetId) {
         details.dataset.editorInspectorMaterialSlotSelect = item.selectionTargetId;
     }
     details.dataset.editorInspectorAccess = 'readonly';
     details.dataset.editorInspectorEffect = 'active';
-    details.style.cssText = [
-        'min-width:0',
-        'border:1px solid var(--fps-editor-readonly-border)',
-        'border-radius:3px',
-        'background:var(--fps-editor-readonly-bg)',
-        'color:var(--fps-editor-readonly-text)',
-        'overflow:hidden',
-    ].join(';');
     const summary = doc.createElement('summary');
-    summary.style.cssText = [
-        'min-width:0',
-        'min-height:44px',
-        'display:flex',
-        'align-items:center',
-        'gap:8px',
-        'padding:6px 8px',
-        'cursor:pointer',
-    ].join(';');
+    summary.className = 'fps-editor-inspector-material-slot-summary';
     if (item.selectionTargetId) {
         summary.dataset.editorInspectorMaterialSlotSelect = item.selectionTargetId;
         summary.title = item.label;
@@ -2790,27 +2820,22 @@ function createInspectorMaterialSlotListItem(doc, item, labels) {
         preview: item.materialPreview,
     }, 'list'));
     const body = doc.createElement('div');
-    body.style.cssText = 'min-width:0;flex:1';
+    body.className = 'fps-editor-inspector-card-body';
     const title = doc.createElement('div');
     title.textContent = item.label;
-    title.style.cssText = 'font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fps-editor-text-strong)';
+    title.className = 'fps-editor-inspector-card-title';
     const subtitle = doc.createElement('div');
     subtitle.textContent = item.materialLabel
         ? `${labels.material}: ${item.materialLabel}`
         : labels.material;
-    subtitle.style.cssText = 'color:var(--fps-editor-muted);font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    subtitle.className = 'fps-editor-inspector-card-subtitle';
     body.appendChild(title);
     body.appendChild(subtitle);
     summary.appendChild(body);
     summary.appendChild(createBadge(doc, 'READONLY', { compact: true }));
     details.appendChild(summary);
     const content = doc.createElement('div');
-    content.style.cssText = [
-        'display:flex',
-        'flex-direction:column',
-        'gap:4px',
-        'padding:0 8px 8px',
-    ].join(';');
+    content.className = 'fps-editor-inspector-material-slot-content';
     appendMaterialSlotListDetailRow(doc, content, labels.material, item.materialMeta || item.materialAssetId || item.materialLabel || '');
     appendMaterialSlotListDetailRow(doc, content, labels.slotId, item.slotId ?? '');
     appendMaterialSlotListDetailRow(doc, content, labels.ownerNodePath, item.ownerNodePath ?? '');
@@ -2832,27 +2857,13 @@ function appendMaterialSlotListDetailRow(doc, parent, label, value) {
     if (!value)
         return;
     const row = doc.createElement('div');
-    row.style.cssText = [
-        'display:grid',
-        'grid-template-columns:88px minmax(0,1fr)',
-        'gap:8px',
-        'align-items:start',
-        'font-size:11px',
-        'line-height:1.35',
-    ].join(';');
+    row.className = 'fps-editor-inspector-material-slot-row';
     const labelElement = doc.createElement('div');
     labelElement.textContent = label;
-    labelElement.style.cssText = 'color:var(--fps-editor-muted);font-weight:800';
+    labelElement.className = 'fps-editor-inspector-material-slot-label';
     const valueElement = doc.createElement('div');
     valueElement.textContent = value;
-    valueElement.style.cssText = [
-        'min-width:0',
-        'overflow:hidden',
-        'text-overflow:ellipsis',
-        'white-space:nowrap',
-        'font-family:var(--fps-editor-mono-font)',
-        'color:var(--fps-editor-readonly-text)',
-    ].join(';');
+    valueElement.className = 'fps-editor-inspector-material-slot-value';
     valueElement.title = value;
     valueElement.dataset.editorTooltip = value;
     row.appendChild(labelElement);
@@ -2993,12 +3004,7 @@ function createInspectorGroundDecalLayoutControl(doc, _target, property, bindInp
     const surfaceMaxWidth = Math.max(96, Math.round(220 * aspectRatio));
     const wrapper = doc.createElement('div');
     wrapper.dataset.editorInspectorGroundDecalLayout = 'true';
-    wrapper.style.cssText = [
-        'display:flex',
-        'flex-direction:column',
-        'gap:8px',
-        'min-width:0',
-    ].join(';');
+    wrapper.className = 'fps-editor-inspector-special-control fps-editor-inspector-ground-decal';
     const input = doc.createElement('input');
     input.type = 'hidden';
     input.value = serializeInspectorGroundDecalLayoutValue(layers, composite);
@@ -3846,6 +3852,7 @@ function commitInspectorGroundDecalLayoutValue(input, layers, fieldInputsByLayer
 function createInspectorAssetPickerCardControl(doc, _target, property, bindInput) {
     const wrapper = doc.createElement('div');
     wrapper.dataset.editorInspectorAssetPickerControl = 'true';
+    wrapper.className = 'fps-editor-inspector-asset-picker';
     const hasCopyAction = !!readInspectorControlOptionString(property, 'copyActionValue');
     const isEditable = isInspectorPropertyEditable(property);
     const actionDisabledReason = readInspectorControlOptionString(property, 'actionDisabledReason')
@@ -3855,39 +3862,19 @@ function createInspectorAssetPickerCardControl(doc, _target, property, bindInput
     const coverageLabel = readInspectorControlOptionString(property, 'coverageLabel')
         || readInspectorControlOptionString(property, 'batchCoverageLabel')
         || '';
-    wrapper.style.cssText = [
-        'min-width:0',
-        'display:grid',
-        hasCopyAction ? 'grid-template-columns:1fr auto auto' : 'grid-template-columns:1fr auto',
-        'align-items:stretch',
-        'gap:6px',
-    ].join(';');
+    wrapper.dataset.editorInspectorAssetPickerActions = hasCopyAction ? 'two' : 'one';
     const input = doc.createElement('input');
     input.type = 'hidden';
     input.value = property.mixed ? '' : String(property.value ?? '');
     bindInput(input, { source: 'asset' });
     wrapper.appendChild(input);
-    const card = doc.createElement('button');
-    card.type = 'button';
+    const cardMount = registerInspectorUiMount(createEditorUiButton({ document: doc, text: '' }));
+    const card = cardMount.element;
+    card.className = `${card.className || ''} fps-editor-inspector-asset-card`.trim();
     card.dataset.editorInspectorAssetPicker = 'true';
     card.disabled = !isEditable;
     if (actionDisabledReason)
         card.title = actionDisabledReason;
-    card.style.cssText = [
-        'min-width:0',
-        'min-height:42px',
-        'display:flex',
-        'align-items:center',
-        'gap:8px',
-        'padding:6px 7px',
-        'border:1px solid var(--fps-editor-editable-border)',
-        'border-radius:3px',
-        'background:var(--fps-editor-field)',
-        'color:var(--fps-editor-text)',
-        'text-align:left',
-        card.disabled ? 'cursor:not-allowed' : 'cursor:pointer',
-        card.disabled ? 'opacity:0.72' : '',
-    ].filter(Boolean).join(';');
     const label = readInspectorControlOptionString(property, 'currentLabel')
         || readInspectorControlOptionString(property, 'placeholder')
         || (property.mixed ? '--' : String(property.value || 'None'));
@@ -3901,60 +3888,40 @@ function createInspectorAssetPickerCardControl(doc, _target, property, bindInput
         preview,
     }, 'list'));
     const body = doc.createElement('div');
-    body.style.cssText = 'min-width:0;flex:1';
+    body.className = 'fps-editor-inspector-card-body';
     const title = doc.createElement('div');
     title.textContent = label;
-    title.style.cssText = 'font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    title.className = 'fps-editor-inspector-card-title';
     const subtitle = doc.createElement('div');
     subtitle.textContent = meta;
-    subtitle.style.cssText = 'color:var(--fps-editor-muted);font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    subtitle.className = 'fps-editor-inspector-card-subtitle';
     body.appendChild(title);
     body.appendChild(subtitle);
     card.appendChild(body);
     wrapper.appendChild(card);
-    const action = doc.createElement('button');
-    action.type = 'button';
+    const actionMount = registerInspectorUiMount(createEditorUiButton({
+        document: doc,
+        text: readInspectorControlOptionString(property, 'actionLabel') || '替换',
+    }));
+    const action = actionMount.element;
+    action.className = `${action.className || ''} fps-editor-inspector-asset-action`.trim();
     action.dataset.editorInspectorAssetPicker = 'true';
     action.disabled = card.disabled;
-    action.textContent = readInspectorControlOptionString(property, 'actionLabel') || '替换';
     if (actionDisabledReason)
         action.title = actionDisabledReason;
-    action.style.cssText = [
-        'width:54px',
-        'min-height:42px',
-        'padding:0 8px',
-        'border:1px solid var(--fps-editor-editable-border)',
-        'border-radius:3px',
-        'background:var(--fps-editor-button-bg)',
-        'color:var(--fps-editor-text)',
-        'font-size:11px',
-        'font-weight:900',
-        action.disabled ? 'cursor:not-allowed' : 'cursor:pointer',
-        action.disabled ? 'opacity:0.72' : '',
-    ].filter(Boolean).join(';');
     wrapper.appendChild(action);
     const copyValue = readInspectorControlOptionString(property, 'copyActionValue');
     if (copyValue) {
-        const copyAction = doc.createElement('button');
-        copyAction.type = 'button';
+        const copyMount = registerInspectorUiMount(createEditorUiButton({
+            document: doc,
+            text: readInspectorControlOptionString(property, 'copyActionLabel') || '复制',
+        }));
+        const copyAction = copyMount.element;
+        copyAction.className = `${copyAction.className || ''} fps-editor-inspector-asset-action`.trim();
         copyAction.dataset.editorInspectorAssetCopy = 'true';
         copyAction.dataset.editorInspectorAssetCopyValue = copyValue;
         copyAction.disabled = card.disabled;
-        copyAction.textContent = readInspectorControlOptionString(property, 'copyActionLabel') || '复制';
         copyAction.title = readInspectorControlOptionString(property, 'copyActionTooltip');
-        copyAction.style.cssText = [
-            'width:48px',
-            'min-height:42px',
-            'padding:0 8px',
-            'border:1px solid var(--fps-editor-editable-border)',
-            'border-radius:3px',
-            'background:var(--fps-editor-button-bg)',
-            'color:var(--fps-editor-text)',
-            'font-size:11px',
-            'font-weight:900',
-            copyAction.disabled ? 'cursor:not-allowed' : 'cursor:pointer',
-            copyAction.disabled ? 'opacity:0.72' : '',
-        ].filter(Boolean).join(';');
         wrapper.appendChild(copyAction);
     }
     if (card.disabled && (coverageLabel || actionDisabledReason)) {
@@ -3988,36 +3955,24 @@ function createInspectorReadonlyControl(doc, _target, property) {
 function createInspectorObjectReadonlyControl(doc, property) {
     const access = getInspectorPropertyAccess(property);
     const effect = getInspectorPropertyEffect(property);
-    const details = createInspectorReadonlyDetailsShell(doc, property, access);
-    const summary = doc.createElement('summary');
-    summary.style.cssText = 'cursor:pointer;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap';
+    const formattedValue = formatLocalEditorBrowserInspectorValue(property.value);
+    const mount = registerInspectorUiMount(createEditorUiExpandableReadonlyControl({
+        document: doc,
+        summary: formatInspectorObjectSummary(property.value),
+        value: formattedValue,
+        error: effect === 'unsupported',
+        warning: effect === 'default' || effect === 'derived' || effect === 'runtime' || access === 'runtime',
+    }));
+    const details = mount.element;
+    details.dataset.editorInspectorAccess = access;
+    details.dataset.editorInspectorEffect = effect;
+    details.title = createInspectorStatusTitle(access, effect, property.tooltip ?? property.disabledReason);
+    const summary = mount.summary;
     const icon = createLocalEditorIcon(doc, 'lock', { size: 11, strokeWidth: 2.3 });
     icon.style.opacity = '0.78';
-    summary.appendChild(icon);
-    const summaryText = doc.createElement('span');
-    summaryText.textContent = formatInspectorObjectSummary(property.value);
-    summaryText.style.cssText = 'min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
-    summary.appendChild(summaryText);
-    const formattedValue = formatLocalEditorBrowserInspectorValue(property.value);
+    summary.prepend(icon);
     if (formattedValue)
         summary.appendChild(createInspectorReadonlyCopyButton(doc, formattedValue, property.label));
-    details.appendChild(summary);
-    const pre = doc.createElement('pre');
-    pre.textContent = formattedValue;
-    pre.style.cssText = [
-        'max-height:220px',
-        'overflow:auto',
-        'white-space:pre-wrap',
-        'word-break:break-word',
-        'margin:6px 0 0',
-        'padding:7px',
-        `border:1px solid ${effect === 'unsupported' ? 'var(--fps-editor-danger-border)' : effect === 'default' || effect === 'derived' || effect === 'runtime' || access === 'runtime' ? 'var(--fps-editor-warn-border)' : 'var(--fps-editor-readonly-border)'}`,
-        'border-radius:3px',
-        'background:var(--fps-editor-field)',
-        'font-size:11px',
-        'line-height:1.45',
-    ].join(';');
-    details.appendChild(pre);
     return details;
 }
 export function applyLocalEditorBrowserInspectorControlBinding(element, target, property, options) {
@@ -4058,11 +4013,8 @@ function createInspectorInputStyle() {
 }
 function appendReadOnlyRow(doc, parent, label, value) {
     const valueElement = createInspectorReadonlyScalarControl(doc, value, 'readonly', 'active', 'Read-only summary');
-    const row = createPropertyRow(doc, label, valueElement);
+    const row = createInspectorPropertyRowShell(doc, label, valueElement);
     row.dataset.editorInspectorAccess = 'readonly';
-    const labelElement = row.firstElementChild;
-    if (labelElement)
-        labelElement.style.cssText = createInspectorPropertyLabelStyle('readonly', 'active');
     parent.appendChild(row);
 }
 function createSelectionSummaryInspectorObject(state) {