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

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

@@ -1,6 +1,9 @@
-import { createLocalEditorIcon, isLocalEditorIconName, } from './local-editor-ui-icons';
-import { createBadge, createAssetList, createDockTab, createEditorInputStyle, createEmptyState, createListItemBlock, createPanelHeader, createPropertyRow, createToolbarButton, createTreeView, createTreeViewItem, } from './local-editor-ui-primitives';
-import { clearElement, toTitle } from './local-editor-ui-shared';
+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 { configureLocalEditorDockPanelContent, createLocalEditorDockPanelViewport, renderLocalEditorDockTabStrip, } from './local-editor-ui-dock-panel.js';
+import { clearElement, toTitle } from './local-editor-ui-shared.js';
+import { createLocalEditorBrowserInspectorVectorCopyPayload, } from './local-editor-inspector-clipboard.js';
+import { resolveLocalEditorBrowserInspectorVectorGroupPathFromProperties, } from './local-editor-inspector-groups.js';
 const BOTTOM_DOCK_TAB_ICONS = {
     assets: 'asset',
     history: 'history',
@@ -9,6 +12,9 @@ const RIGHT_DOCK_TAB_ICONS = {
     inspector: 'inspector',
     rendering: 'world',
 };
+const LEFT_DOCK_TAB_ICONS = {
+    hierarchy: 'hierarchy',
+};
 const ASSET_BROWSER_TABS = [
     { id: 'all', label: '全部', title: '显示全部项目资产' },
     { id: 'models', label: '模型', title: '显示模型资产' },
@@ -80,28 +86,23 @@ export function renderBottomDockPanel(doc, panel, state, activeTab, activeAssetB
 export function renderWorkbenchBottomDockPanel(doc, panel, state, activeTab, panels = [], activeAssetBrowserTab = 'all') {
     clearElement(panel);
     const tabHeader = doc.createElement('div');
-    tabHeader.style.cssText = [
-        'height:29px',
-        'display:flex',
-        'align-items:stretch',
-        'border-bottom:1px solid var(--fps-editor-divider)',
-        'background:var(--fps-editor-chrome-dark)',
-        'flex:0 0 auto',
-    ].join(';');
-    const dockTabs = panels.length > 0
-        ? panels.filter((panelDescriptor) => (panelDescriptor.id === 'assets' || panelDescriptor.id === 'history'))
-        : [
+    renderLocalEditorDockTabStrip(doc, {
+        activeId: activeTab,
+        area: 'bottom',
+        datasetKey: 'editorDockTab',
+        fallbackTabs: [
             { id: 'assets', title: '资产', area: 'bottom' },
             { id: 'history', title: '历史', area: 'bottom' },
-        ];
-    for (const tabPanel of dockTabs) {
-        const button = createDockTab(doc, tabPanel.title, activeTab === tabPanel.id, BOTTOM_DOCK_TAB_ICONS[tabPanel.id]);
-        button.dataset.editorDockTab = tabPanel.id;
-        tabHeader.appendChild(button);
-    }
+        ],
+        iconById: BOTTOM_DOCK_TAB_ICONS,
+        panel: tabHeader,
+        panels,
+    });
     panel.appendChild(tabHeader);
     const content = doc.createElement('div');
-    content.style.cssText = 'flex:1;min-height:0;overflow:auto;padding:8px';
+    content.dataset.editorPanelContent = 'true';
+    content.dataset.editorPanelId = activeTab;
+    content.style.cssText = 'flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:8px';
     panel.appendChild(content);
     if (activeTab === 'history')
         renderHistoryPanel(doc, content, state.session?.history ?? null);
@@ -135,34 +136,43 @@ function appendDockTabs(doc, panel, activeTab) {
     panel.appendChild(tabs);
 }
 export function renderWorkbenchRightDockTabs(doc, panel, activeTab, panels = []) {
-    clearElement(panel);
-    panel.style.cssText = [
-        'height:35px',
-        'display:flex',
-        'align-items:stretch',
-        'border-bottom:1px solid var(--fps-editor-divider)',
-        'background:var(--fps-editor-chrome-dark)',
-        'flex:0 0 auto',
-    ].join(';');
-    const dockTabs = panels.length > 0
-        ? panels.filter((panelDescriptor) => (panelDescriptor.id === 'inspector' || panelDescriptor.id === 'rendering'))
-        : [
+    renderLocalEditorDockTabStrip(doc, {
+        activeId: activeTab,
+        area: 'right',
+        datasetKey: 'editorRightDockTab',
+        fallbackTabs: [
             { id: 'inspector', title: '检查器', area: 'right' },
             { id: 'rendering', title: '渲染', area: 'right' },
-        ];
-    for (const tabPanel of dockTabs) {
-        const button = createDockTab(doc, tabPanel.title, activeTab === tabPanel.id, RIGHT_DOCK_TAB_ICONS[tabPanel.id]);
-        button.dataset.editorRightDockTab = tabPanel.id;
-        tabHeaderButtonStyle(button);
-        panel.appendChild(button);
-    }
+        ],
+        iconById: RIGHT_DOCK_TAB_ICONS,
+        panel,
+        panels,
+        tabStyle: tabHeaderButtonStyle,
+    });
+}
+export function renderWorkbenchLeftDockTabs(doc, panel, activeTab, panels = []) {
+    renderLocalEditorDockTabStrip(doc, {
+        activeId: activeTab,
+        area: 'left',
+        datasetKey: 'editorLeftDockTab',
+        fallbackTabs: [
+            { id: 'hierarchy', title: '层级', area: 'left' },
+        ],
+        iconById: LEFT_DOCK_TAB_ICONS,
+        panel,
+        panels,
+        tabStyle: tabHeaderButtonStyle,
+    });
 }
 export function renderRenderingPanel(doc, panel, state) {
     clearElement(panel);
+    configureLocalEditorDockPanelContent(panel);
     const rendering = state.renderingPanel ?? null;
     panel.appendChild(createPanelHeader(doc, rendering?.title ?? 'Rendering', createRenderingPanelActions(doc, rendering), 'world'));
+    const viewport = createLocalEditorDockPanelViewport(doc, 'editorRenderingScrollViewport');
     if (!rendering || rendering.sections.length === 0) {
-        panel.appendChild(createEmptyState(doc, '当前项目没有提供渲染设置。'));
+        viewport.appendChild(createEmptyState(doc, '当前项目没有提供渲染设置。'));
+        panel.appendChild(viewport);
         return;
     }
     if (rendering.dirty || rendering.status) {
@@ -204,8 +214,9 @@ export function renderRenderingPanel(doc, panel, state) {
         panel.appendChild(summary);
     }
     for (const section of rendering.sections) {
-        panel.appendChild(createRenderingSectionBlock(doc, section));
+        viewport.appendChild(createRenderingSectionBlock(doc, section));
     }
+    panel.appendChild(viewport);
 }
 function createRenderingPanelActions(doc, rendering) {
     return (rendering?.actions ?? []).map(action => {
@@ -319,6 +330,12 @@ function createRenderingPropertyControl(doc, sectionId, systemId, property, insp
     if (isInspectorPropertyEditable(inspectorProperty) && property.control === 'string-list') {
         return createRenderingStringListControl(doc, sectionId, systemId, property, inspectorProperty);
     }
+    if (property.control === 'asset-picker-card') {
+        return createInspectorAssetPickerCardControl(doc, target, inspectorProperty, (input) => {
+            bindRenderingControl(input, sectionId, systemId, property, 'asset-picker-card');
+            input.dataset.renderingEditSource = 'asset';
+        });
+    }
     let control = renderInspectorControl(doc, builtinInspectorControlRegistrations, target, inspectorProperty);
     bindRenderedInspectorControlsToRendering(control, sectionId, systemId, property);
     if (property.unit && isInspectorPropertyEditable(inspectorProperty) && property.control === 'number') {
@@ -351,9 +368,12 @@ function createInspectorPropertyFromRenderingProperty(property, systemReadOnly)
         path: property.path,
         label: property.label,
         valueType: property.valueType === 'string-list' ? 'string' : property.valueType,
-        control: property.control === 'string-list'
-            ? readOnly ? 'readonly' : 'string'
-            : property.control,
+        control: property.control === 'asset-picker-card'
+            ? readOnly ? 'readonly' : 'custom'
+            : property.control === 'string-list'
+                ? readOnly ? 'readonly' : 'string'
+                : property.control,
+        customControl: property.control === 'asset-picker-card' ? 'asset-picker-card' : undefined,
         value: property.value,
         readOnly,
         persistence: readOnly ? 'readonly' : 'document',
@@ -365,6 +385,8 @@ function createInspectorPropertyFromRenderingProperty(property, systemReadOnly)
         min: property.min,
         max: property.max,
         step: property.step,
+        options: property.options,
+        controlOptions: property.controlOptions,
         tags: property.tags,
     };
 }
@@ -385,7 +407,7 @@ function bindRenderedInspectorControlsToRendering(control, sectionId, systemId,
         ? [control]
         : Array.from(control.querySelectorAll('input, textarea, select'));
     for (const field of fields) {
-        if (!(field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement))
+        if (!(field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement || field instanceof HTMLSelectElement))
             continue;
         bindRenderingControl(field, sectionId, systemId, property, property.control);
     }
@@ -421,12 +443,27 @@ function createHeadingLabel(doc, text) {
     return label;
 }
 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.appendChild(createLocalEditorIcon(doc, 'asset'));
     title.appendChild(createHeadingLabel(doc, '资产浏览器'));
     panel.appendChild(title);
     appendAssetBrowserTabs(doc, panel, state, activeTab);
+    if (activeTab === 'materials') {
+        const createMaterialButton = createToolbarButton(doc, '+ 材质', 'asset');
+        createMaterialButton.dataset.editorCreateMaterialAsset = 'true';
+        createMaterialButton.title = '新建项目材质';
+        createMaterialButton.style.cssText = [
+            'height:28px',
+            'margin:0 0 8px',
+            'padding:0 10px',
+            'font-size:12px',
+            'font-weight:800',
+            'align-self:flex-start',
+        ].join(';');
+        panel.appendChild(createMaterialButton);
+    }
     const filter = doc.createElement('input');
     filter.type = 'search';
     filter.placeholder = '筛选资产';
@@ -472,6 +509,9 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list', activeTa
     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';
+    list.style.overflow = 'visible';
+    list.style.paddingRight = '0';
     for (const asset of filteredAssets) {
         const selected = state.selectedAssetId === asset.id;
         const hasPreview = !!asset.preview;
@@ -514,7 +554,9 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list', activeTa
     if (filteredAssets.length === 0) {
         list.appendChild(createEmptyState(doc, normalizedFilter ? '没有匹配的资产。' : '暂无该类型资产。'));
     }
-    panel.appendChild(list);
+    const viewport = createLocalEditorDockPanelViewport(doc, 'editorAssetBrowserScrollViewport');
+    viewport.appendChild(list);
+    panel.appendChild(viewport);
 }
 export function createAssetPreviewElement(doc, asset, variant) {
     const size = variant === 'modal' ? 220 : variant === 'grid' ? 46 : 24;
@@ -680,13 +722,16 @@ function resolveAssetBrowserTab(asset) {
     return 'models';
 }
 function renderHistoryPanel(doc, panel, history) {
+    configureLocalEditorDockPanelContent(panel);
     const title = doc.createElement('h2');
     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);
-    appendHistoryEntries(doc, panel, entries);
+    const viewport = createLocalEditorDockPanelViewport(doc, 'editorHistoryScrollViewport');
+    appendHistoryEntries(doc, viewport, entries);
+    panel.appendChild(viewport);
 }
 function appendHistoryEntries(doc, panel, entries) {
     if (entries.length === 0) {
@@ -731,6 +776,7 @@ function formatHistoryTimestamp(createdAt) {
 export function renderInspectorPanel(doc, panel, state, filter = '', options = {}) {
     const renderSnapshot = captureInspectorPanelRenderSnapshot(doc, 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.appendChild(createLocalEditorIcon(doc, 'inspector'));
@@ -738,6 +784,7 @@ export function renderInspectorPanel(doc, panel, state, filter = '', options = {
     panel.appendChild(title);
     const search = createInspectorSearchInput(doc, filter);
     panel.appendChild(search);
+    const viewport = createLocalEditorDockPanelViewport(doc, 'editorInspectorScrollViewport');
     const selectionCount = state.selectionSummary?.count ?? state.selectedIds.length;
     const inspectorObject = selectionCount > 1
         ? state.inspectorMultiObject
@@ -747,46 +794,52 @@ export function renderInspectorPanel(doc, panel, state, filter = '', options = {
         const empty = doc.createElement('div');
         empty.textContent = '请从层级树或 Scene View 中选择一个 GameObject。';
         empty.style.cssText = 'color:var(--fps-editor-muted);line-height:1.45';
-        panel.appendChild(empty);
+        viewport.appendChild(empty);
+        panel.appendChild(viewport);
         restoreInspectorPanelRenderSnapshot(panel, renderSnapshot);
         return;
     }
     const controlRegistry = createLocalEditorBrowserInspectorControlRegistry(options.controls, options.controlConflict);
-    appendInspectorSummary(doc, panel, inspectorObject, selectionCount);
+    appendInspectorSummary(doc, viewport, inspectorObject, selectionCount);
     const visibleSections = filterInspectorSections(inspectorObject.sections.filter(section => section.placement !== 'summary'), filter);
     if (visibleSections.length === 0) {
         if (!filter.trim() && inspectorObject.sections.length === 0) {
+            panel.appendChild(viewport);
             restoreInspectorPanelRenderSnapshot(panel, renderSnapshot);
             return;
         }
         const empty = doc.createElement('div');
         empty.textContent = '没有匹配的 Inspector 字段。';
         empty.style.cssText = 'color:var(--fps-editor-muted);line-height:1.45';
-        panel.appendChild(empty);
+        viewport.appendChild(empty);
+        panel.appendChild(viewport);
         restoreInspectorPanelRenderSnapshot(panel, renderSnapshot);
         return;
     }
     for (const section of visibleSections) {
-        panel.appendChild(createInspectorSectionBlock(doc, inspectorObject, section, controlRegistry));
+        viewport.appendChild(createInspectorSectionBlock(doc, inspectorObject, section, controlRegistry, options));
     }
+    panel.appendChild(viewport);
     restoreInspectorPanelRenderSnapshot(panel, renderSnapshot);
 }
 function captureInspectorPanelRenderSnapshot(doc, panel) {
     const activeElement = doc.activeElement;
     const elementConstructor = doc.defaultView?.HTMLElement;
+    const scrollContainer = panel.querySelector('[data-editor-inspector-scroll-viewport]') ?? panel;
     return {
         preserveScroll: !!activeElement
             && (elementConstructor ? activeElement instanceof elementConstructor : activeElement instanceof HTMLElement)
             && panel.contains(activeElement),
-        scrollTop: panel.scrollTop,
-        scrollLeft: panel.scrollLeft,
+        scrollTop: scrollContainer.scrollTop,
+        scrollLeft: scrollContainer.scrollLeft,
     };
 }
 function restoreInspectorPanelRenderSnapshot(panel, snapshot) {
     if (!snapshot.preserveScroll)
         return;
-    panel.scrollTop = snapshot.scrollTop;
-    panel.scrollLeft = snapshot.scrollLeft;
+    const scrollContainer = panel.querySelector('[data-editor-inspector-scroll-viewport]') ?? panel;
+    scrollContainer.scrollTop = snapshot.scrollTop;
+    scrollContainer.scrollLeft = snapshot.scrollLeft;
 }
 function createInspectorSearchInput(doc, value) {
     const input = doc.createElement('input');
@@ -838,7 +891,7 @@ function inspectorPropertyMatches(section, property, needle) {
         || [property.path, property.label, property.control, property.valueType, ...(property.tags ?? [])]
             .some(value => String(value).toLowerCase().includes(needle));
 }
-function createInspectorSectionBlock(doc, inspectorObject, section, controlRegistry) {
+function createInspectorSectionBlock(doc, inspectorObject, section, controlRegistry, options) {
     const block = doc.createElement('details');
     block.dataset.editorInspectorSection = section.id;
     block.open = section.collapsedByDefault !== true;
@@ -885,7 +938,7 @@ function createInspectorSectionBlock(doc, inspectorObject, section, controlRegis
     content.dataset.editorInspectorSectionContent = section.id;
     for (const group of groupInspectorProperties(section.properties)) {
         if (group.kind === 'vector')
-            appendInspectorVectorInputs(doc, content, inspectorObject, group.label, group.properties, group.layout);
+            appendInspectorVectorInputs(doc, content, inspectorObject, group.label, group.properties, group.layout, options);
         else
             appendInspectorPropertyRow(doc, content, inspectorObject, group.property, controlRegistry);
     }
@@ -1172,6 +1225,13 @@ const builtinInspectorControlRegistrations = [
         customControl: 'asset-picker-card',
         render: ({ doc, target, property, bindInput }) => createInspectorAssetPickerCardControl(doc, target, property, bindInput),
     },
+    {
+        id: 'builtin.material-slot-list',
+        order: 96,
+        control: 'custom',
+        customControl: 'material-slot-list',
+        render: ({ doc, property }) => createInspectorMaterialSlotListControl(doc, property),
+    },
     {
         id: 'builtin.asset',
         order: 100,
@@ -1195,6 +1255,14 @@ function appendInspectorPropertyRow(doc, parent, inspectorObject, property, cont
     const control = renderInspectorControl(doc, controlRegistry, inspectorObject, property);
     const access = getInspectorPropertyAccess(property);
     const effect = getInspectorPropertyEffect(property);
+    if (property.customControl === 'material-slot-list') {
+        control.dataset.editorInspectorAccess = access;
+        control.dataset.editorInspectorEffect = effect;
+        control.title = createInspectorStatusTitle(access, effect, property.tooltip ?? property.disabledReason);
+        control.dataset.editorTooltip = control.title;
+        parent.appendChild(control);
+        return;
+    }
     const row = createPropertyRow(doc, property.label, control);
     row.dataset.editorInspectorAccess = access;
     row.dataset.editorInspectorEffect = effect;
@@ -1264,7 +1332,7 @@ function localEditorBrowserInspectorControlSupports(registration, context) {
         return false;
     return registration.supports?.(context) ?? true;
 }
-function appendInspectorVectorInputs(doc, parent, inspectorObject, label, properties, layout = 'block') {
+function appendInspectorVectorInputs(doc, parent, inspectorObject, label, properties, layout = 'block', options = {}) {
     const wrapper = doc.createElement('div');
     wrapper.style.cssText = 'margin:8px 0';
     const access = getInspectorPropertyGroupAccess(properties);
@@ -1279,17 +1347,40 @@ function appendInspectorVectorInputs(doc, parent, inspectorObject, label, proper
     labelText.textContent = label;
     labelText.style.cssText = createInspectorPropertyLabelStyle(access, effect);
     labelElement.appendChild(labelText);
+    const actions = doc.createElement('span');
+    actions.style.cssText = 'display:inline-flex;align-items:center;gap:5px;flex:0 0 auto';
+    labelElement.appendChild(actions);
+    const groupPath = resolveLocalEditorBrowserInspectorVectorGroupPathFromProperties(properties);
+    const locked = !!groupPath && options.lockedVectorGroups?.has(groupPath) === true;
+    if (groupPath && access === 'editable') {
+        const lockButton = createInspectorVectorHeaderButton(doc, locked ? `Unlock ${label} axes` : `Lock ${label} axes`, locked);
+        lockButton.dataset.editorInspectorVectorLock = groupPath;
+        lockButton.dataset.editorInspectorVectorLockState = locked ? 'locked' : 'unlocked';
+        lockButton.setAttribute('aria-pressed', locked ? 'true' : 'false');
+        lockButton.appendChild(createLocalEditorIcon(doc, 'lock', { size: 12, strokeWidth: 2.2 }));
+        actions.appendChild(lockButton);
+    }
+    const copyPayload = createLocalEditorBrowserInspectorVectorCopyPayload(properties);
+    if (copyPayload) {
+        const copyButton = createInspectorVectorHeaderButton(doc, `Copy ${label}`, false);
+        copyButton.dataset.editorInspectorVectorCopy = 'true';
+        copyButton.dataset.editorInspectorVectorCopyValue = copyPayload;
+        copyButton.appendChild(createLocalEditorIcon(doc, 'copy', { size: 12, strokeWidth: 2.2 }));
+        actions.appendChild(copyButton);
+    }
     if (access !== 'editable') {
         const badge = createInspectorAccessBadge(doc, access);
         badge.style.flex = '0 0 auto';
-        labelElement.appendChild(badge);
+        actions.appendChild(badge);
     }
     const effectBadge = createInspectorEffectBadge(doc, effect, getInspectorPropertyGroupDisabledReason(properties));
     if (effectBadge && !(access === 'runtime' && effect === 'runtime')) {
         effectBadge.style.flex = '0 0 auto';
-        labelElement.appendChild(effectBadge);
+        actions.appendChild(effectBadge);
     }
     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%`;
     for (const property of properties) {
         fields.appendChild(isInspectorPropertyEditable(property)
@@ -1312,6 +1403,27 @@ function appendInspectorVectorInputs(doc, parent, inspectorObject, label, proper
     wrapper.appendChild(fields);
     parent.appendChild(wrapper);
 }
+function createInspectorVectorHeaderButton(doc, title, active) {
+    const button = doc.createElement('button');
+    button.type = 'button';
+    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(';');
+    return button;
+}
 function getInspectorPropertyGroupAccess(properties) {
     if (properties.some(property => property.persistence === 'runtime'))
         return 'runtime';
@@ -1534,13 +1646,189 @@ function createInspectorOpenRightDockTabControl(doc, property) {
     ].filter(Boolean).join(';');
     return button;
 }
+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(';');
+    const items = readInspectorMaterialSlotListItems(property);
+    if (items.length === 0) {
+        wrapper.appendChild(createEmptyState(doc, 'No material slots.'));
+        return wrapper;
+    }
+    const labels = readInspectorMaterialSlotListLabels(property);
+    for (const item of items) {
+        wrapper.appendChild(createInspectorMaterialSlotListItem(doc, item, labels));
+    }
+    return wrapper;
+}
+function createInspectorMaterialSlotListItem(doc, item, labels) {
+    const details = doc.createElement('details');
+    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(';');
+    if (item.selectionTargetId) {
+        summary.dataset.editorInspectorMaterialSlotSelect = item.selectionTargetId;
+        summary.title = item.label;
+        summary.dataset.editorTooltip = item.label;
+    }
+    summary.appendChild(createAssetPreviewElement(doc, {
+        id: item.materialAssetId ? `material:${item.materialAssetId}` : `material-slot:${item.key}`,
+        assetId: item.materialAssetId,
+        kind: 'material',
+        label: item.materialLabel || item.label,
+        meta: item.materialMeta || labels.material,
+        preview: item.materialPreview,
+    }, 'list'));
+    const body = doc.createElement('div');
+    body.style.cssText = 'min-width:0;flex:1';
+    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)';
+    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';
+    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(';');
+    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 ?? '');
+    appendMaterialSlotListDetailRow(doc, content, labels.sourceMaterial, [item.sourceMaterialIndex == null ? '' : `#${item.sourceMaterialIndex}`, item.sourceMaterialName ?? '']
+        .filter(Boolean)
+        .join(' '));
+    appendMaterialSlotListDetailRow(doc, content, labels.bindingPath, item.bindingPath ?? '');
+    details.appendChild(content);
+    return details;
+}
+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(';');
+    const labelElement = doc.createElement('div');
+    labelElement.textContent = label;
+    labelElement.style.cssText = 'color:var(--fps-editor-muted);font-weight:800';
+    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.title = value;
+    valueElement.dataset.editorTooltip = value;
+    row.appendChild(labelElement);
+    row.appendChild(valueElement);
+    parent.appendChild(row);
+}
+function readInspectorMaterialSlotListItems(property) {
+    const rawItems = property.controlOptions?.slots;
+    if (!Array.isArray(rawItems))
+        return [];
+    return rawItems
+        .map(readInspectorMaterialSlotListItem)
+        .filter((item) => !!item);
+}
+function readInspectorMaterialSlotListItem(value) {
+    if (!isRecord(value))
+        return null;
+    const key = readStringField(value, 'key') || readStringField(value, 'slotId') || readStringField(value, 'ownerNodePath');
+    const label = readStringField(value, 'label') || key;
+    if (!key || !label)
+        return null;
+    const sourceMaterialIndex = value.sourceMaterialIndex;
+    return {
+        key,
+        label,
+        selectionTargetId: readStringField(value, 'selectionTargetId') || undefined,
+        slotId: readStringField(value, 'slotId') || undefined,
+        ownerNodePath: readStringField(value, 'ownerNodePath') || undefined,
+        materialAssetId: readStringField(value, 'materialAssetId') || undefined,
+        materialLabel: readStringField(value, 'materialLabel') || undefined,
+        materialMeta: readStringField(value, 'materialMeta') || undefined,
+        materialPreview: isLocalEditorBrowserAssetPreview(value.materialPreview) ? value.materialPreview : undefined,
+        sourceMaterialIndex: typeof sourceMaterialIndex === 'number' && Number.isFinite(sourceMaterialIndex) ? sourceMaterialIndex : undefined,
+        sourceMaterialName: readStringField(value, 'sourceMaterialName') || undefined,
+        bindingPath: readStringField(value, 'bindingPath') || undefined,
+    };
+}
+function readInspectorMaterialSlotListLabels(property) {
+    const labels = isRecord(property.controlOptions?.labels) ? property.controlOptions.labels : {};
+    return {
+        material: readStringField(labels, 'material') || 'Material',
+        slotId: readStringField(labels, 'slotId') || 'Slot ID',
+        ownerNodePath: readStringField(labels, 'ownerNodePath') || 'Owner Node Path',
+        sourceMaterial: readStringField(labels, 'sourceMaterial') || 'Source Material',
+        bindingPath: readStringField(labels, 'bindingPath') || 'Binding Path',
+    };
+}
+function readStringField(record, key) {
+    const value = record[key];
+    return typeof value === 'string' ? value : '';
+}
 function createInspectorAssetPickerCardControl(doc, _target, property, bindInput) {
     const wrapper = doc.createElement('div');
     wrapper.dataset.editorInspectorAssetPickerControl = 'true';
+    const hasCopyAction = !!readInspectorControlOptionString(property, 'copyActionValue');
+    const isEditable = isInspectorPropertyEditable(property);
+    const actionDisabledReason = readInspectorControlOptionString(property, 'actionDisabledReason')
+        || readInspectorControlOptionString(property, 'disabledReason')
+        || property.disabledReason
+        || '';
+    const coverageLabel = readInspectorControlOptionString(property, 'coverageLabel')
+        || readInspectorControlOptionString(property, 'batchCoverageLabel')
+        || '';
     wrapper.style.cssText = [
         'min-width:0',
         'display:grid',
-        readInspectorControlOptionString(property, 'copyActionValue') ? 'grid-template-columns:1fr auto auto' : 'grid-template-columns:1fr auto',
+        hasCopyAction ? 'grid-template-columns:1fr auto auto' : 'grid-template-columns:1fr auto',
         'align-items:stretch',
         'gap:6px',
     ].join(';');
@@ -1552,7 +1840,9 @@ function createInspectorAssetPickerCardControl(doc, _target, property, bindInput
     const card = doc.createElement('button');
     card.type = 'button';
     card.dataset.editorInspectorAssetPicker = 'true';
-    card.disabled = !isInspectorPropertyEditable(property);
+    card.disabled = !isEditable;
+    if (actionDisabledReason)
+        card.title = actionDisabledReason;
     card.style.cssText = [
         'min-width:0',
         'min-height:42px',
@@ -1597,6 +1887,8 @@ function createInspectorAssetPickerCardControl(doc, _target, property, bindInput
     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',
@@ -1635,6 +1927,24 @@ function createInspectorAssetPickerCardControl(doc, _target, property, bindInput
         ].filter(Boolean).join(';');
         wrapper.appendChild(copyAction);
     }
+    if (card.disabled && (coverageLabel || actionDisabledReason)) {
+        const status = doc.createElement('div');
+        status.dataset.editorInspectorActionStatus = 'true';
+        status.textContent = [coverageLabel, actionDisabledReason].filter(Boolean).join(' · ');
+        status.style.cssText = [
+            'grid-column:1/-1',
+            'min-width:0',
+            'padding:5px 7px',
+            'border:1px solid var(--fps-editor-warn-border)',
+            'border-radius:3px',
+            'background:var(--fps-editor-warn-soft)',
+            'color:var(--fps-editor-warn)',
+            'font-size:11px',
+            'font-weight:800',
+            'line-height:1.35',
+        ].join(';');
+        wrapper.appendChild(status);
+    }
     return wrapper;
 }
 function createInspectorReadonlyControl(doc, _target, property) {