@fps-games/editor 0.1.2-beta.1 → 0.1.3-beta.1

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

@@ -1,10 +1,20 @@
-import { createLocalEditorIcon } from './local-editor-ui-icons';
+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';
-const DOCK_TAB_ICONS = {
+const BOTTOM_DOCK_TAB_ICONS = {
     assets: 'asset',
     history: 'history',
 };
+const RIGHT_DOCK_TAB_ICONS = {
+    inspector: 'inspector',
+    rendering: 'world',
+};
+const ASSET_BROWSER_TABS = [
+    { id: 'all', label: '全部', title: '显示全部项目资产' },
+    { id: 'models', label: '模型', title: '显示模型资产' },
+    { id: 'materials', label: '材质', title: '显示项目材质资产' },
+    { id: 'textures', label: '贴图', title: '显示贴图资产' },
+];
 export function renderHierarchyPanel(doc, panel, state, rename, drop) {
     clearElement(panel);
     const createGroupButton = createToolbarButton(doc, '+ Empty', 'object');
@@ -59,15 +69,15 @@ export function renderHierarchyPanel(doc, panel, state, rename, drop) {
     }
     panel.appendChild(list);
 }
-export function renderBottomDockPanel(doc, panel, state, activeTab) {
+export function renderBottomDockPanel(doc, panel, state, activeTab, activeAssetBrowserTab = 'all') {
     clearElement(panel);
     appendDockTabs(doc, panel, activeTab);
     if (activeTab === 'history')
         renderHistoryPanel(doc, panel, state.session?.history ?? null);
     else
-        renderAssetBrowserContent(doc, panel, state);
+        renderAssetBrowserContent(doc, panel, state, 'list', activeAssetBrowserTab);
 }
-export function renderWorkbenchBottomDockPanel(doc, panel, state, activeTab, panels = []) {
+export function renderWorkbenchBottomDockPanel(doc, panel, state, activeTab, panels = [], activeAssetBrowserTab = 'all') {
     clearElement(panel);
     const tabHeader = doc.createElement('div');
     tabHeader.style.cssText = [
@@ -85,7 +95,7 @@ export function renderWorkbenchBottomDockPanel(doc, panel, state, activeTab, pan
             { id: 'history', title: '历史', area: 'bottom' },
         ];
     for (const tabPanel of dockTabs) {
-        const button = createDockTab(doc, tabPanel.title, activeTab === tabPanel.id, DOCK_TAB_ICONS[tabPanel.id]);
+        const button = createDockTab(doc, tabPanel.title, activeTab === tabPanel.id, BOTTOM_DOCK_TAB_ICONS[tabPanel.id]);
         button.dataset.editorDockTab = tabPanel.id;
         tabHeader.appendChild(button);
     }
@@ -96,7 +106,7 @@ export function renderWorkbenchBottomDockPanel(doc, panel, state, activeTab, pan
     if (activeTab === 'history')
         renderHistoryPanel(doc, content, state.session?.history ?? null);
     else
-        renderAssetBrowserContent(doc, content, state, 'grid');
+        renderAssetBrowserContent(doc, content, state, 'grid', activeAssetBrowserTab);
 }
 function appendDockTabs(doc, panel, activeTab) {
     const tabs = doc.createElement('div');
@@ -113,7 +123,7 @@ function appendDockTabs(doc, panel, activeTab) {
     };
     for (const tab of ['assets', 'history']) {
         const active = activeTab === tab;
-        const button = createDockTab(doc, labels[tab], active, DOCK_TAB_ICONS[tab]);
+        const button = createDockTab(doc, labels[tab], active, BOTTOM_DOCK_TAB_ICONS[tab]);
         button.dataset.editorDockTab = tab;
         button.style.border = '0';
         button.style.borderBottom = `2px solid ${active ? 'var(--fps-editor-accent-strong)' : 'transparent'}`;
@@ -124,18 +134,299 @@ 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'))
+        : [
+            { 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);
+    }
+}
+export function renderRenderingPanel(doc, panel, state) {
+    clearElement(panel);
+    const rendering = state.renderingPanel ?? null;
+    panel.appendChild(createPanelHeader(doc, rendering?.title ?? 'Rendering', createRenderingPanelActions(doc, rendering), 'world'));
+    if (!rendering || rendering.sections.length === 0) {
+        panel.appendChild(createEmptyState(doc, '当前项目没有提供渲染设置。'));
+        return;
+    }
+    if (rendering.dirty || rendering.status) {
+        const status = doc.createElement('div');
+        status.style.cssText = [
+            'display:flex',
+            'align-items:center',
+            'gap:6px',
+            'margin:0 0 8px',
+            'min-height:20px',
+        ].join(';');
+        if (rendering.dirty)
+            status.appendChild(createBadge(doc, 'UNSAVED', { compact: true, tone: 'warning' }));
+        if (rendering.status) {
+            const message = doc.createElement('span');
+            message.textContent = rendering.status;
+            message.style.cssText = [
+                `color:${rendering.statusTone === 'error' ? 'var(--fps-editor-danger-text)' : rendering.statusTone === 'warning' ? 'var(--fps-editor-warn)' : 'var(--fps-editor-muted)'}`,
+                'font-size:11px',
+                'font-weight:800',
+                'min-width:0',
+                'overflow:hidden',
+                'text-overflow:ellipsis',
+                'white-space:nowrap',
+            ].join(';');
+            status.appendChild(message);
+        }
+        panel.appendChild(status);
+    }
+    if (rendering.summary) {
+        const summary = doc.createElement('div');
+        summary.textContent = rendering.summary;
+        summary.style.cssText = [
+            'margin:0 0 8px',
+            'color:var(--fps-editor-muted)',
+            'font-size:11px',
+            'line-height:1.45',
+        ].join(';');
+        panel.appendChild(summary);
+    }
+    for (const section of rendering.sections) {
+        panel.appendChild(createRenderingSectionBlock(doc, section));
+    }
+}
+function createRenderingPanelActions(doc, rendering) {
+    return (rendering?.actions ?? []).map(action => {
+        const icon = action.icon && isLocalEditorIconName(action.icon) ? action.icon : 'world';
+        const button = createToolbarButton(doc, action.label, icon);
+        button.type = 'button';
+        button.dataset.editorRenderingAction = action.id;
+        button.disabled = action.disabled === true;
+        button.title = action.tooltip ?? action.label;
+        button.dataset.editorTooltip = button.title;
+        button.style.padding = '3px 7px';
+        button.style.fontSize = '11px';
+        return button;
+    });
+}
+function tabHeaderButtonStyle(button) {
+    button.style.borderTop = '0';
+    button.style.borderLeft = '0';
+    button.style.borderRadius = '0';
+    button.style.minWidth = '0';
+}
+function createRenderingSectionBlock(doc, section) {
+    const block = doc.createElement('section');
+    block.dataset.editorRenderingSection = section.id;
+    block.style.cssText = [
+        'margin:0 0 10px',
+        'padding:8px',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-panel-soft)',
+    ].join(';');
+    const header = doc.createElement('div');
+    header.style.cssText = 'display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0 0 8px';
+    const title = doc.createElement('div');
+    title.style.cssText = 'min-width:0';
+    const heading = doc.createElement('h3');
+    heading.textContent = section.title;
+    heading.style.cssText = 'margin:0;color:var(--fps-editor-text-strong);font-size:12px;font-weight:900';
+    title.appendChild(heading);
+    if (section.summary) {
+        const summary = doc.createElement('div');
+        summary.textContent = section.summary;
+        summary.style.cssText = 'margin-top:3px;color:var(--fps-editor-muted);font-size:11px;line-height:1.35';
+        title.appendChild(summary);
+    }
+    header.appendChild(title);
+    header.appendChild(createBadge(doc, `${section.systems.length}`, { compact: true }));
+    block.appendChild(header);
+    const list = doc.createElement('div');
+    list.style.cssText = 'display:flex;flex-direction:column;gap:8px';
+    for (const system of section.systems) {
+        list.appendChild(createRenderingSystemBlock(doc, section.id, system));
+    }
+    block.appendChild(list);
+    return block;
+}
+function createRenderingSystemBlock(doc, sectionId, system) {
+    const block = createListItemBlock(doc);
+    block.dataset.editorRenderingSystem = system.id;
+    block.dataset.editorRenderingSystemKind = system.kind;
+    const header = doc.createElement('div');
+    header.style.cssText = 'display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0 0 8px';
+    const title = doc.createElement('div');
+    title.style.cssText = 'min-width:0';
+    const label = doc.createElement('div');
+    label.textContent = system.label;
+    label.style.cssText = 'color:var(--fps-editor-text-strong);font-size:12px;font-weight:900;line-height:1.25';
+    title.appendChild(label);
+    if (system.summary) {
+        const summary = doc.createElement('div');
+        summary.textContent = system.summary;
+        summary.style.cssText = 'margin-top:3px;color:var(--fps-editor-muted);font-size:11px;line-height:1.35';
+        title.appendChild(summary);
+    }
+    header.appendChild(title);
+    const badges = doc.createElement('div');
+    badges.style.cssText = 'display:flex;align-items:center;gap:4px;flex:0 0 auto';
+    if (system.active != null)
+        badges.appendChild(createBadge(doc, system.active ? 'ON' : 'OFF', { compact: true, tone: system.active ? 'success' : 'default' }));
+    if (system.readOnly)
+        badges.appendChild(createBadge(doc, 'READONLY', { compact: true }));
+    if (system.status)
+        badges.appendChild(createBadge(doc, system.status, { compact: true, tone: system.active === false ? 'warning' : 'default' }));
+    header.appendChild(badges);
+    block.appendChild(header);
+    const propertyGrid = doc.createElement('div');
+    propertyGrid.style.cssText = 'display:flex;flex-direction:column;gap:6px';
+    for (const property of system.properties) {
+        propertyGrid.appendChild(createRenderingPropertyRow(doc, sectionId, system.id, property, system.readOnly === true));
+    }
+    block.appendChild(propertyGrid);
+    return block;
+}
+function createRenderingPropertyRow(doc, sectionId, systemId, property, systemReadOnly) {
+    const inspectorProperty = createInspectorPropertyFromRenderingProperty(property, systemReadOnly);
+    const control = createRenderingPropertyControl(doc, sectionId, systemId, property, inspectorProperty);
+    const access = getInspectorPropertyAccess(inspectorProperty);
+    const effect = getInspectorPropertyEffect(inspectorProperty);
+    const row = createPropertyRow(doc, inspectorProperty.label, control);
+    row.dataset.editorInspectorAccess = access;
+    row.dataset.editorInspectorEffect = effect;
+    row.title = createInspectorStatusTitle(access, effect, inspectorProperty.tooltip ?? inspectorProperty.disabledReason);
+    row.dataset.editorTooltip = row.title;
+    const label = row.firstElementChild;
+    if (label)
+        label.style.cssText = createInspectorPropertyLabelStyle(access, effect);
+    return row;
+}
+function createRenderingPropertyControl(doc, sectionId, systemId, property, inspectorProperty) {
+    const target = createRenderingInspectorTarget(systemId);
+    if (isInspectorPropertyEditable(inspectorProperty) && property.control === 'string-list') {
+        return createRenderingStringListControl(doc, sectionId, systemId, property, inspectorProperty);
+    }
+    let control = renderInspectorControl(doc, builtinInspectorControlRegistrations, target, inspectorProperty);
+    bindRenderedInspectorControlsToRendering(control, sectionId, systemId, property);
+    if (property.unit && isInspectorPropertyEditable(inspectorProperty) && property.control === 'number') {
+        const wrapper = doc.createElement('div');
+        wrapper.style.cssText = 'display:flex;align-items:center;gap:6px;min-width:0';
+        control.style.minWidth = '0';
+        control.style.flex = '1 1 auto';
+        wrapper.appendChild(control);
+        wrapper.appendChild(createPropertyUnitLabel(doc, property.unit));
+        return wrapper;
+    }
+    return control;
+}
+function bindRenderingControl(element, sectionId, systemId, property, control) {
+    element.dataset.editorRenderingProperty = 'true';
+    element.dataset.renderingSectionId = sectionId;
+    element.dataset.renderingSystemId = systemId;
+    element.dataset.renderingPath = property.path;
+    element.dataset.renderingControl = control;
+    element.dataset.renderingValueType = property.valueType;
+    element.dataset.renderingCommitMode = property.commitMode ?? (control === 'string-list' ? 'blur' : 'live');
+    if (property.disabled) {
+        element.disabled = true;
+        element.title = property.disabledReason ?? '';
+    }
+}
+function createInspectorPropertyFromRenderingProperty(property, systemReadOnly) {
+    const readOnly = systemReadOnly || property.readOnly === true || property.control === 'readonly' || property.disabled === true;
+    return {
+        path: property.path,
+        label: property.label,
+        valueType: property.valueType === 'string-list' ? 'string' : property.valueType,
+        control: property.control === 'string-list'
+            ? readOnly ? 'readonly' : 'string'
+            : property.control,
+        value: property.value,
+        readOnly,
+        persistence: readOnly ? 'readonly' : 'document',
+        commitMode: property.commitMode ?? (property.control === 'string-list' ? 'blur' : 'live'),
+        tooltip: property.tooltip,
+        effect: property.disabled ? 'unsupported' : undefined,
+        disabledReason: property.disabledReason,
+        placeholder: property.placeholder,
+        min: property.min,
+        max: property.max,
+        step: property.step,
+        tags: property.tags,
+    };
+}
+function createRenderingInspectorTarget(systemId) {
+    return {
+        targetIds: [systemId],
+        activeId: systemId,
+        selection: {
+            targetIds: [systemId],
+            activeId: systemId,
+            targetKind: 'rendering-system',
+        },
+        sections: [],
+    };
+}
+function bindRenderedInspectorControlsToRendering(control, sectionId, systemId, property) {
+    const fields = control.matches('input, textarea, select')
+        ? [control]
+        : Array.from(control.querySelectorAll('input, textarea, select'));
+    for (const field of fields) {
+        if (!(field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement))
+            continue;
+        bindRenderingControl(field, sectionId, systemId, property, property.control);
+    }
+}
+function createRenderingStringListControl(doc, sectionId, systemId, property, inspectorProperty) {
+    const input = doc.createElement('textarea');
+    input.value = Array.isArray(property.value) ? property.value.map(String).join('\n') : String(property.value ?? '');
+    input.placeholder = property.placeholder ?? 'One pattern per line';
+    input.rows = 3;
+    input.style.cssText = [
+        createInspectorInputStyle(),
+        'height:auto',
+        'min-height:66px',
+        'resize:vertical',
+        'padding:6px 8px',
+        'line-height:1.35',
+    ].join(';');
+    input.title = inspectorProperty.tooltip ?? inspectorProperty.label;
+    input.dataset.editorTooltip = input.title;
+    bindRenderingControl(input, sectionId, systemId, property, 'string-list');
+    return input;
+}
+function createPropertyUnitLabel(doc, unit) {
+    const label = doc.createElement('span');
+    label.textContent = unit;
+    label.style.cssText = 'flex:0 0 auto;color:var(--fps-editor-muted);font-size:10px;font-weight:800';
+    return label;
+}
 function createHeadingLabel(doc, text) {
     const label = doc.createElement('span');
     label.textContent = text;
     label.style.cssText = 'min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
     return label;
 }
-function renderAssetBrowserContent(doc, panel, state, variant = 'list') {
+function renderAssetBrowserContent(doc, panel, state, variant = 'list', activeTab = 'all') {
     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);
     const filter = doc.createElement('input');
     filter.type = 'search';
     filter.placeholder = '筛选资产';
@@ -153,8 +444,9 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list') {
         'margin:0 0 8px',
     ].join(';');
     panel.appendChild(filter);
+    const tabAssets = filterAssetsByBrowserTab(state.assets, activeTab);
     const normalizedFilter = state.assetFilter.trim().toLowerCase();
-    const filteredAssets = state.assets
+    const filteredAssets = tabAssets
         .filter((asset) => {
         if (!normalizedFilter)
             return true;
@@ -173,33 +465,38 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list') {
     })
         .slice(0, 80);
     const count = doc.createElement('div');
-    count.textContent = state.assetCountLabel
+    const activeTabLabel = ASSET_BROWSER_TABS.find(tab => tab.id === activeTab)?.label ?? '资产';
+    count.textContent = activeTab === 'all' && state.assetCountLabel
         ? `${filteredAssets.length} / ${state.assetCountLabel}`
-        : `${filteredAssets.length} / ${state.assets.length} 个资产`;
+        : `${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');
     for (const asset of filteredAssets) {
+        const selected = state.selectedAssetId === asset.id;
+        const hasPreview = !!asset.preview;
         const button = doc.createElement('button');
         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' ? '48px' : '32px'}`,
+            `min-height:${variant === 'grid' ? (hasPreview ? '66px' : '48px') : (hasPreview ? '38px' : '32px')}`,
             'text-align:left',
-            'padding:6px 8px',
-            'border:1px solid var(--fps-editor-border)',
+            `padding:${hasPreview ? '7px 8px' : '6px 8px'}`,
+            `border:1px solid ${selected ? 'var(--fps-editor-accent-strong)' : 'var(--fps-editor-border)'}`,
             'border-radius:3px',
-            'background:var(--fps-editor-asset-card-bg)',
+            `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',
-            'cursor:pointer',
+            asset.disabled ? 'cursor:not-allowed' : 'cursor:pointer',
+            asset.disabled ? 'opacity:0.72' : '',
         ].join(';');
-        const icon = createLocalEditorIcon(doc, 'asset', { size: 16 });
+        const preview = createAssetPreviewElement(doc, asset, variant);
         const body = doc.createElement('div');
         body.style.cssText = 'min-width:0;flex:1';
         const label = doc.createElement('div');
@@ -210,12 +507,178 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list') {
         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(icon);
+        button.appendChild(preview);
         button.appendChild(body);
         list.appendChild(button);
     }
+    if (filteredAssets.length === 0) {
+        list.appendChild(createEmptyState(doc, normalizedFilter ? '没有匹配的资产。' : '暂无该类型资产。'));
+    }
     panel.appendChild(list);
 }
+export function createAssetPreviewElement(doc, asset, variant) {
+    const size = variant === 'modal' ? 220 : variant === 'grid' ? 46 : 24;
+    const preview = asset.preview;
+    if (!preview)
+        return createLocalEditorIcon(doc, 'asset', { size: variant === 'grid' ? 18 : 16 });
+    const frame = doc.createElement('div');
+    frame.style.cssText = [
+        `width:${size}px`,
+        `height:${size}px`,
+        `flex:0 0 ${size}px`,
+        'display:flex',
+        'align-items:center',
+        'justify-content:center',
+        'overflow:hidden',
+        'border:1px solid var(--fps-editor-border)',
+        `border-radius:${variant === 'modal' ? '6px' : '3px'}`,
+        'background:var(--fps-editor-field)',
+        'box-sizing:border-box',
+    ].join(';');
+    if (preview.kind === 'image') {
+        const image = doc.createElement('img');
+        image.src = preview.url;
+        image.alt = preview.alt ?? asset.label;
+        image.loading = 'lazy';
+        image.style.cssText = [
+            'width:100%',
+            'height:100%',
+            `object-fit:${preview.fit ?? 'cover'}`,
+            'display:block',
+        ].join(';');
+        frame.appendChild(image);
+        return frame;
+    }
+    const sphere = doc.createElement('div');
+    const metallic = clamp01(preview.metallic ?? 0);
+    const roughness = clamp01(preview.roughness ?? 0.55);
+    const emissionIntensity = clampNumber(preview.emissionIntensity ?? 0, 0, 8);
+    const baseColor = formatAssetPreviewColor(preview.baseColor, '#8f9aa8');
+    const emissionColor = formatAssetPreviewColor(preview.emissionColor, '#ffffff');
+    sphere.style.cssText = [
+        'position:relative',
+        'width:82%',
+        'height:82%',
+        'overflow:hidden',
+        'border-radius:999px',
+        `background:${baseColor}`,
+        'border:1px solid rgba(255,255,255,0.22)',
+        'box-shadow:' + [
+            `inset -5px -7px 12px rgba(0,0,0,${(0.26 + roughness * 0.14).toFixed(2)})`,
+            `inset 5px 5px 10px rgba(255,255,255,${(0.12 + metallic * 0.2).toFixed(2)})`,
+            emissionIntensity > 0 ? `0 0 ${Math.round(6 + emissionIntensity * 5)}px ${emissionColor}` : '0 1px 2px rgba(0,0,0,0.4)',
+        ].join(','),
+    ].join(';');
+    if (preview.textureUrl) {
+        const image = doc.createElement('img');
+        image.src = preview.textureUrl;
+        image.alt = '';
+        image.style.cssText = [
+            'position:absolute',
+            'inset:0',
+            'width:100%',
+            'height:100%',
+            'object-fit:cover',
+            'opacity:0.62',
+            'mix-blend-mode:multiply',
+        ].join(';');
+        sphere.appendChild(image);
+    }
+    const shading = doc.createElement('div');
+    const highlightAlpha = clampNumber(0.86 - roughness * 0.48 + metallic * 0.12, 0.25, 0.92);
+    const highlightEnd = Math.round(9 + roughness * 12);
+    const shadowAlpha = clampNumber(0.28 + roughness * 0.14 + metallic * 0.16, 0.2, 0.62);
+    const rimAlpha = clampNumber(0.12 + metallic * 0.36, 0.08, 0.52);
+    shading.style.cssText = [
+        'position:absolute',
+        'inset:0',
+        'border-radius:inherit',
+        'pointer-events:none',
+        'background:' + [
+            `radial-gradient(circle at 31% 23%, rgba(255,255,255,${highlightAlpha.toFixed(2)}) 0 ${highlightEnd}%, rgba(255,255,255,0) ${highlightEnd + 17}%)`,
+            `radial-gradient(circle at 70% 82%, rgba(0,0,0,${shadowAlpha.toFixed(2)}) 0 26%, rgba(0,0,0,0) 58%)`,
+            `radial-gradient(circle at 82% 22%, rgba(255,255,255,${rimAlpha.toFixed(2)}) 0 9%, rgba(255,255,255,0) 36%)`,
+            `linear-gradient(135deg, rgba(255,255,255,${(0.08 + metallic * 0.16).toFixed(2)}), rgba(0,0,0,${(0.12 + roughness * 0.1).toFixed(2)}))`,
+        ].join(','),
+    ].join(';');
+    sphere.appendChild(shading);
+    frame.appendChild(sphere);
+    return frame;
+}
+function formatAssetPreviewColor(value, fallback) {
+    if (!value)
+        return fallback;
+    if (typeof value === 'string')
+        return value;
+    const r = normalizeAssetPreviewColorChannel(value.r);
+    const g = normalizeAssetPreviewColorChannel(value.g);
+    const b = normalizeAssetPreviewColorChannel(value.b);
+    if (value.a === undefined)
+        return `rgb(${r}, ${g}, ${b})`;
+    return `rgba(${r}, ${g}, ${b}, ${clampNumber(value.a, 0, 1)})`;
+}
+function normalizeAssetPreviewColorChannel(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    return Math.round(clampNumber(value >= 0 && value <= 1 ? value * 255 : value, 0, 255));
+}
+function clamp01(value) {
+    return clampNumber(value, 0, 1);
+}
+function clampNumber(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(max, Math.max(min, value));
+}
+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(';');
+    for (const tab of ASSET_BROWSER_TABS) {
+        const button = doc.createElement('button');
+        button.type = 'button';
+        button.dataset.editorAssetBrowserTab = tab.id;
+        button.title = tab.title;
+        const active = activeTab === tab.id;
+        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);
+}
+function filterAssetsByBrowserTab(assets, tab) {
+    if (tab === 'all')
+        return [...assets];
+    return assets.filter(asset => resolveAssetBrowserTab(asset) === tab);
+}
+function resolveAssetBrowserTab(asset) {
+    const kind = `${asset.kind ?? ''}`.trim().toLowerCase();
+    const id = `${asset.id ?? ''}`.trim().toLowerCase();
+    const assetId = `${asset.assetId ?? ''}`.trim().toLowerCase();
+    if (kind === 'material' || kind === 'materials' || id.startsWith('material:') || assetId.startsWith('material:')) {
+        return 'materials';
+    }
+    if (kind === 'texture' || kind === 'image' || kind === 'textures' || id.startsWith('texture:') || assetId.startsWith('texture:')) {
+        return 'textures';
+    }
+    return 'models';
+}
 function renderHistoryPanel(doc, panel, history) {
     const title = doc.createElement('h2');
     const entries = history?.entries ?? [];
@@ -624,6 +1087,18 @@ function readInspectorControlOptionNumber(property, key) {
     const value = property.controlOptions?.[key];
     return typeof value === 'number' && Number.isFinite(value) ? value : 0;
 }
+function readInspectorAssetPickerPreview(property, key) {
+    const value = property.controlOptions?.[key];
+    return isLocalEditorBrowserAssetPreview(value) ? value : undefined;
+}
+function isLocalEditorBrowserAssetPreview(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return false;
+    const preview = value;
+    if (preview.kind === 'image')
+        return typeof preview.url === 'string' && preview.url.length > 0;
+    return preview.kind === 'material-sphere';
+}
 function resolveInspectorVectorGroupLabel(properties, fallback) {
     const labels = properties.map(property => {
         const match = property.label.match(/^(.*)\.(x|y|z|r|g|b)$/);
@@ -683,6 +1158,20 @@ const builtinInspectorControlRegistrations = [
         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.asset-picker-card',
+        order: 95,
+        control: 'custom',
+        customControl: 'asset-picker-card',
+        render: ({ doc, target, property, bindInput }) => createInspectorAssetPickerCardControl(doc, target, property, bindInput),
+    },
     {
         id: 'builtin.asset',
         order: 100,
@@ -743,7 +1232,8 @@ function compareInspectorControlRegistrations(left, right) {
     return (left.order ?? 0) - (right.order ?? 0) || left.id.localeCompare(right.id);
 }
 function renderInspectorControl(doc, registrations, target, property) {
-    if (!isInspectorPropertyEditable(property))
+    const canRenderCustomAction = property.control === 'custom' && !!property.customControl;
+    if (!isInspectorPropertyEditable(property) && !canRenderCustomAction)
         return createInspectorReadonlyControl(doc, target, property);
     const context = {
         doc,
@@ -756,6 +1246,8 @@ function renderInspectorControl(doc, registrations, target, property) {
     const registration = resolveLocalEditorBrowserInspectorControlRegistration(registrations, context);
     if (registration)
         return registration.render(context);
+    if (!isInspectorPropertyEditable(property))
+        return createInspectorReadonlyControl(doc, target, property);
     return createInspectorReadonlyControl(doc, target, property);
 }
 export function resolveLocalEditorBrowserInspectorControlRegistration(registrations, context) {
@@ -1024,6 +1516,127 @@ function createInspectorColorControl(doc, target, property) {
     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;
 }
+function createInspectorOpenRightDockTabControl(doc, property) {
+    const targetTabOption = readInspectorControlOptionString(property, 'targetTab');
+    const targetTab = targetTabOption === 'inspector' ? 'inspector' : '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';
+    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 createInspectorAssetPickerCardControl(doc, _target, property, bindInput) {
+    const wrapper = doc.createElement('div');
+    wrapper.dataset.editorInspectorAssetPickerControl = 'true';
+    wrapper.style.cssText = [
+        'min-width:0',
+        'display:grid',
+        readInspectorControlOptionString(property, 'copyActionValue') ? 'grid-template-columns:1fr auto auto' : 'grid-template-columns:1fr auto',
+        'align-items:stretch',
+        'gap:6px',
+    ].join(';');
+    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';
+    card.dataset.editorInspectorAssetPicker = 'true';
+    card.disabled = !isInspectorPropertyEditable(property);
+    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'));
+    const meta = readInspectorControlOptionString(property, 'currentMeta')
+        || readInspectorControlOptionString(property, 'pickerKind')
+        || property.label;
+    const preview = readInspectorAssetPickerPreview(property, 'currentPreview');
+    card.appendChild(createAssetPreviewElement(doc, {
+        id: `${property.path}:preview`,
+        label,
+        preview,
+    }, 'list'));
+    const body = doc.createElement('div');
+    body.style.cssText = 'min-width:0;flex:1';
+    const title = doc.createElement('div');
+    title.textContent = label;
+    title.style.cssText = 'font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    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';
+    body.appendChild(title);
+    body.appendChild(subtitle);
+    card.appendChild(body);
+    wrapper.appendChild(card);
+    const action = doc.createElement('button');
+    action.type = 'button';
+    action.dataset.editorInspectorAssetPicker = 'true';
+    action.disabled = card.disabled;
+    action.textContent = readInspectorControlOptionString(property, 'actionLabel') || '替换';
+    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';
+        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);
+    }
+    return wrapper;
+}
 function createInspectorReadonlyControl(doc, _target, property) {
     if (!property.mixed && isExpandableInspectorValue(property.value)) {
         return createInspectorObjectReadonlyControl(doc, property);
@@ -1218,6 +1831,18 @@ export function formatLocalEditorBrowserInspectorNumberValue(value) {
         return '0';
     return rounded.toFixed(3).replace(/\.?0+$/, '');
 }
+export function parseLocalEditorBrowserInspectorNumberValue(value, mode) {
+    const trimmed = value.trim();
+    if (trimmed === '')
+        return mode === 'final' ? 0 : null;
+    if (mode === 'live' && !isCompleteInspectorNumberInput(trimmed))
+        return null;
+    const numeric = Number(trimmed);
+    return Number.isFinite(numeric) ? numeric : null;
+}
+function isCompleteInspectorNumberInput(value) {
+    return /^[+-]?(?:\d+|\d*\.\d+)(?:[eE][+-]?\d+)?$/.test(value);
+}
 function formatInspectorEditableValue(value, property) {
     if (typeof value === 'number'
         && (property.control === 'number' || property.valueType === 'number' || property.control === 'vec2' || property.control === 'vec3')) {