@fps-games/editor 0.1.1-beta.1 → 0.1.1-beta.10

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

@@ -1,12 +1,17 @@
-import { createAssetList, createDockTab, createPanelHeader, createPropertyRow, createToolbarButton, createTreeView, createTreeViewItem, } from './local-editor-ui-primitives';
+import { createLocalEditorIcon } 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 = {
+    assets: 'asset',
+    history: 'history',
+};
 export function renderHierarchyPanel(doc, panel, state, rename, drop) {
     clearElement(panel);
-    const createGroupButton = createToolbarButton(doc, '+ Group');
+    const createGroupButton = createToolbarButton(doc, '+ Empty', 'object');
     createGroupButton.dataset.editorHierarchyCreateGroup = 'true';
     createGroupButton.style.padding = '3px 7px';
     createGroupButton.style.fontSize = '11px';
-    panel.appendChild(createPanelHeader(doc, 'Graph', [createGroupButton]));
+    panel.appendChild(createPanelHeader(doc, 'Hierarchy', [createGroupButton], 'hierarchy'));
     const list = createTreeView(doc);
     for (const item of state.hierarchy) {
         const isRenaming = rename?.id === item.id;
@@ -35,7 +40,7 @@ export function renderHierarchyPanel(doc, panel, state, rename, drop) {
                 'border:1px solid var(--fps-editor-accent-strong)',
                 'border-radius:2px',
                 'background:var(--fps-editor-field)',
-                'color:#fff',
+                'color:var(--fps-editor-text-strong)',
                 'font-size:12px',
                 'font-weight:700',
                 'padding:2px 5px',
@@ -80,7 +85,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);
+        const button = createDockTab(doc, tabPanel.title, activeTab === tabPanel.id, DOCK_TAB_ICONS[tabPanel.id]);
         button.dataset.editorDockTab = tabPanel.id;
         tabHeader.appendChild(button);
     }
@@ -107,30 +112,29 @@ function appendDockTabs(doc, panel, activeTab) {
         history: '历史',
     };
     for (const tab of ['assets', 'history']) {
-        const button = doc.createElement('button');
-        button.type = 'button';
-        button.dataset.editorDockTab = tab;
-        button.textContent = labels[tab];
         const active = activeTab === tab;
-        button.style.cssText = [
-            'border:0',
-            'border-bottom:2px solid transparent',
-            `border-bottom-color:${active ? '#58a6ff' : 'transparent'}`,
-            'background:transparent',
-            `color:${active ? 'var(--fps-editor-text-strong)' : 'var(--fps-editor-muted)'}`,
-            'font-size:12px',
-            'font-weight:900',
-            'padding:0 8px 8px',
-            'cursor:pointer',
-        ].join(';');
+        const button = createDockTab(doc, labels[tab], active, DOCK_TAB_ICONS[tab]);
+        button.dataset.editorDockTab = tab;
+        button.style.border = '0';
+        button.style.borderBottom = `2px solid ${active ? 'var(--fps-editor-accent-strong)' : 'transparent'}`;
+        button.style.background = 'transparent';
+        button.style.color = active ? 'var(--fps-editor-text-strong)' : 'var(--fps-editor-muted)';
+        button.style.padding = '0 8px 8px';
         tabs.appendChild(button);
     }
     panel.appendChild(tabs);
 }
+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') {
     const title = doc.createElement('h2');
-    title.textContent = '资产浏览器';
-    title.style.cssText = 'font-size:13px;margin:0 0 8px;font-weight:800;color:var(--fps-editor-text-strong)';
+    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);
     const filter = doc.createElement('input');
     filter.type = 'search';
@@ -177,19 +181,27 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list') {
             'padding:6px 8px',
             'border:1px solid var(--fps-editor-border)',
             'border-radius:3px',
-            'background:#243426',
+            'background:var(--fps-editor-asset-card-bg)',
             'color:var(--fps-editor-text)',
+            'display:flex',
+            'align-items:center',
+            'gap:8px',
             'font-size:12px',
             'cursor:pointer',
         ].join(';');
+        const icon = createLocalEditorIcon(doc, 'asset', { size: 16 });
+        const body = doc.createElement('div');
+        body.style.cssText = 'min-width:0;flex:1';
         const label = doc.createElement('div');
         label.textContent = asset.label;
         label.style.cssText = 'font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
         const meta = doc.createElement('div');
         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';
-        button.appendChild(label);
-        button.appendChild(meta);
+        body.appendChild(label);
+        body.appendChild(meta);
+        button.appendChild(icon);
+        button.appendChild(body);
         list.appendChild(button);
     }
     panel.appendChild(list);
@@ -197,36 +209,21 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list') {
 function renderHistoryPanel(doc, panel, history) {
     const title = doc.createElement('h2');
     const entries = history?.entries ?? [];
-    title.textContent = `历史记录 (${entries.length})`;
-    title.style.cssText = 'font-size:13px;margin:0 0 8px;font-weight:800;color:var(--fps-editor-text-strong)';
+    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);
 }
 function appendHistoryEntries(doc, panel, entries) {
     if (entries.length === 0) {
-        const empty = doc.createElement('div');
-        empty.textContent = '暂无文档修改。';
-        empty.style.cssText = [
-            'padding:8px',
-            'border:1px solid var(--fps-editor-border-soft)',
-            'border-radius:3px',
-            'background:var(--fps-editor-field)',
-            'color:var(--fps-editor-muted)',
-            'font-size:11px',
-        ].join(';');
-        panel.appendChild(empty);
+        panel.appendChild(createEmptyState(doc, '暂无文档修改。'));
         return;
     }
     const list = doc.createElement('div');
     list.style.cssText = 'display:flex;flex-direction:column;gap:4px';
     for (const entry of entries) {
-        const item = doc.createElement('div');
-        item.style.cssText = [
-            'padding:7px 8px',
-            'border:1px solid var(--fps-editor-border-soft)',
-            'border-radius:3px',
-            'background:var(--fps-editor-panel-soft)',
-        ].join(';');
+        const item = createListItemBlock(doc);
         const label = doc.createElement('div');
         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';
@@ -259,10 +256,12 @@ function formatHistoryTimestamp(createdAt) {
     ].join('');
 }
 export function renderInspectorPanel(doc, panel, state, filter = '', options = {}) {
+    const renderSnapshot = captureInspectorPanelRenderSnapshot(doc, panel);
     clearElement(panel);
     const title = doc.createElement('h2');
-    title.textContent = 'Inspector';
-    title.style.cssText = '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.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'));
+    title.appendChild(createHeadingLabel(doc, 'Inspector'));
     panel.appendChild(title);
     const search = createInspectorSearchInput(doc, filter);
     panel.appendChild(search);
@@ -276,23 +275,45 @@ export function renderInspectorPanel(doc, panel, state, filter = '', options = {
         empty.textContent = '请从层级树或 Scene View 中选择一个 GameObject。';
         empty.style.cssText = 'color:var(--fps-editor-muted);line-height:1.45';
         panel.appendChild(empty);
+        restoreInspectorPanelRenderSnapshot(panel, renderSnapshot);
         return;
     }
     const controlRegistry = createLocalEditorBrowserInspectorControlRegistry(options.controls, options.controlConflict);
     appendInspectorSummary(doc, panel, inspectorObject, selectionCount);
     const visibleSections = filterInspectorSections(inspectorObject.sections.filter(section => section.placement !== 'summary'), filter);
     if (visibleSections.length === 0) {
-        if (!filter.trim() && inspectorObject.sections.length === 0)
+        if (!filter.trim() && inspectorObject.sections.length === 0) {
+            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);
+        restoreInspectorPanelRenderSnapshot(panel, renderSnapshot);
         return;
     }
     for (const section of visibleSections) {
         panel.appendChild(createInspectorSectionBlock(doc, inspectorObject, section, controlRegistry));
     }
+    restoreInspectorPanelRenderSnapshot(panel, renderSnapshot);
+}
+function captureInspectorPanelRenderSnapshot(doc, panel) {
+    const activeElement = doc.activeElement;
+    const elementConstructor = doc.defaultView?.HTMLElement;
+    return {
+        preserveScroll: !!activeElement
+            && (elementConstructor ? activeElement instanceof elementConstructor : activeElement instanceof HTMLElement)
+            && panel.contains(activeElement),
+        scrollTop: panel.scrollTop,
+        scrollLeft: panel.scrollLeft,
+    };
+}
+function restoreInspectorPanelRenderSnapshot(panel, snapshot) {
+    if (!snapshot.preserveScroll)
+        return;
+    panel.scrollTop = snapshot.scrollTop;
+    panel.scrollLeft = snapshot.scrollLeft;
 }
 function createInspectorSearchInput(doc, value) {
     const input = doc.createElement('input');
@@ -300,26 +321,24 @@ function createInspectorSearchInput(doc, value) {
     input.value = value;
     input.placeholder = 'Search...';
     input.style.cssText = [
+        createEditorInputStyle(),
         'width:100%',
         'height:30px',
-        'box-sizing:border-box',
         'margin:0 0 8px',
-        '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',
         'outline:none',
     ].join(';');
     return input;
 }
 function appendInspectorSummary(doc, panel, inspectorObject, selectionCount) {
     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';
     const title = doc.createElement('h3');
     title.textContent = selectionCount > 1 ? 'Selection' : 'GameObject';
-    title.style.cssText = 'font-size:12px;margin:0 0 8px;font-weight:900;color:var(--fps-editor-text-strong)';
-    block.appendChild(title);
+    title.style.cssText = 'font-size:12px;margin:0;font-weight:900;color:var(--fps-editor-text-strong)';
+    header.appendChild(title);
+    header.appendChild(createInspectorAccessBadge(doc, 'readonly'));
+    block.appendChild(header);
     appendReadOnlyRow(doc, block, selectionCount > 1 ? 'Selected' : 'Name', inspectorObject.label ?? inspectorObject.activeId ?? inspectorObject.targetIds[0] ?? '无');
     appendReadOnlyRow(doc, block, 'Active ID', inspectorObject.activeId ?? '无');
     if (selectionCount > 1)
@@ -350,7 +369,11 @@ function createInspectorSectionBlock(doc, inspectorObject, section, controlRegis
     const block = doc.createElement('details');
     block.dataset.editorInspectorSection = section.id;
     block.open = section.collapsedByDefault !== true;
-    block.style.cssText = createInspectorBlockStyle();
+    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',
@@ -375,11 +398,13 @@ function createInspectorSectionBlock(doc, inspectorObject, section, controlRegis
         summary.style.cssText = 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;font-size:11px';
         meta.appendChild(summary);
     }
-    if (section.persistence === 'runtime' || section.runtimeOnly || section.persistence === 'readonly') {
-        const badge = doc.createElement('span');
-        badge.textContent = section.persistence === 'runtime' || section.runtimeOnly ? 'Runtime' : 'Readonly';
-        badge.style.cssText = 'flex:0 0 auto';
-        meta.appendChild(badge);
+    const badge = createInspectorAccessBadge(doc, access);
+    badge.style.flex = '0 0 auto';
+    meta.appendChild(badge);
+    const effectBadge = createInspectorEffectBadge(doc, effect, section.disabledReason);
+    if (effectBadge && status.showEffectBadge) {
+        effectBadge.style.flex = '0 0 auto';
+        meta.appendChild(effectBadge);
     }
     sectionTitle.appendChild(meta);
     block.appendChild(sectionTitle);
@@ -396,18 +421,133 @@ function createInspectorSectionBlock(doc, inspectorObject, section, controlRegis
 }
 function createInspectorComponentBlock(doc) {
     const block = doc.createElement('div');
-    block.style.cssText = createInspectorBlockStyle();
+    block.dataset.editorInspectorAccess = 'readonly';
+    block.dataset.editorInspectorEffect = 'active';
+    block.style.cssText = createInspectorBlockStyle('readonly', 'active');
     return block;
 }
-function createInspectorBlockStyle() {
+export function resolveLocalEditorBrowserInspectorSectionStatus(section) {
+    const access = getInspectorSectionAccess(section);
+    const effect = getInspectorSectionEffect(section);
+    return {
+        access,
+        effect,
+        showEffectBadge: effect !== 'active'
+            && !(access === 'runtime' && effect === 'runtime')
+            && !(effect === 'default' && inspectorSummaryLooksDefault(section.summary)),
+    };
+}
+function createInspectorBlockStyle(_access, _effect = 'active') {
     return [
         'margin:0 0 8px',
         'padding:9px',
-        'border:1px solid var(--fps-editor-border)',
+        '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'
+        && getInspectorPropertyEffect(property) === 'active';
+}
+function getInspectorPropertyAccess(property) {
+    if (property.persistence === 'runtime')
+        return 'runtime';
+    if (getInspectorPropertyEffect(property) === 'runtime')
+        return 'runtime';
+    return isInspectorPropertyEditable(property) ? 'editable' : 'readonly';
+}
+function getInspectorSectionAccess(section) {
+    if (section.runtimeOnly || section.persistence === 'runtime' || getInspectorSectionEffect(section) === 'runtime')
+        return 'runtime';
+    const editableCount = section.properties.filter(isInspectorPropertyEditable).length;
+    if (editableCount === 0)
+        return 'readonly';
+    if (editableCount === section.properties.length)
+        return 'editable';
+    return 'mixed';
+}
+function getInspectorPropertyEffect(property) {
+    if (property.effect)
+        return property.effect;
+    if (property.persistence === 'runtime')
+        return 'runtime';
+    return 'active';
+}
+function getInspectorSectionEffect(section) {
+    if (section.effect)
+        return section.effect;
+    if (section.runtimeOnly || section.persistence === 'runtime')
+        return 'runtime';
+    if (section.properties.some(isInspectorPropertyEditable))
+        return 'active';
+    const effects = new Set(section.properties.map(getInspectorPropertyEffect));
+    if (effects.size === 1)
+        return [...effects][0] ?? 'active';
+    if (effects.has('unsupported'))
+        return 'unsupported';
+    if (effects.has('default'))
+        return 'default';
+    if (effects.has('derived'))
+        return 'derived';
+    if (effects.has('runtime'))
+        return 'runtime';
+    return 'active';
+}
+function createInspectorAccessBadge(doc, access) {
+    const labels = {
+        editable: 'EDITABLE',
+        mixed: 'MIXED',
+        readonly: 'READONLY',
+        runtime: 'RUNTIME',
+    };
+    const badge = createBadge(doc, labels[access], {
+        compact: true,
+        tone: access === 'editable' ? 'success' : access === 'mixed' || access === 'runtime' ? 'warning' : 'default',
+    });
+    badge.title = access === 'editable'
+        ? 'This section writes to the document.'
+        : access === 'mixed'
+            ? 'This section contains both editable and read-only fields.'
+            : access === 'runtime'
+                ? 'Runtime-only context, not saved to the document.'
+                : 'Read-only information.';
+    return badge;
+}
+function createInspectorEffectBadge(doc, effect, disabledReason) {
+    if (effect === 'active')
+        return null;
+    const labels = {
+        default: 'DEFAULTS',
+        derived: 'DERIVED',
+        runtime: 'RUNTIME',
+        unsupported: 'NO EFFECT',
+    };
+    const badge = createBadge(doc, labels[effect], {
+        compact: true,
+        tone: effect === 'unsupported' ? 'danger' : 'warning',
+    });
+    badge.title = disabledReason ?? createInspectorEffectTitle(effect);
+    return badge;
+}
+function createInspectorEffectTitle(effect) {
+    switch (effect) {
+        case 'default':
+            return 'Default values are being shown; edits do not affect this object until an override is configured.';
+        case 'derived':
+            return 'Derived from document or runtime state.';
+        case 'runtime':
+            return 'Runtime-only context, not saved to the document.';
+        case 'unsupported':
+            return 'This field is visible but editing is not supported for the current object.';
+        default:
+            return 'Editable field.';
+    }
+}
+function inspectorSummaryLooksDefault(summary) {
+    return summary?.trim().toLowerCase() === 'defaults';
+}
 function groupInspectorProperties(properties) {
     const groups = [];
     const consumed = new Set();
@@ -436,7 +576,7 @@ function groupInspectorProperties(properties) {
             for (const entry of vector)
                 consumed.add(entry.path);
             const parts = basePath.split('.');
-            groups.push({ kind: 'vector', label: toTitle(parts[parts.length - 1] ?? basePath), properties: vector });
+            groups.push({ kind: 'vector', label: resolveInspectorVectorGroupLabel(vector, parts[parts.length - 1] ?? basePath), properties: vector });
         }
         else {
             groups.push({ kind: 'property', property });
@@ -445,6 +585,16 @@ function groupInspectorProperties(properties) {
     }
     return groups;
 }
+function resolveInspectorVectorGroupLabel(properties, fallback) {
+    const labels = properties.map(property => {
+        const match = property.label.match(/^(.*)\.(x|y|z|r|g|b)$/);
+        return match?.[1]?.trim() ?? '';
+    });
+    const first = labels[0];
+    if (first && labels.every(label => label === first))
+        return first;
+    return toTitle(fallback);
+}
 const builtinInspectorControlRegistrations = [
     {
         id: 'builtin.readonly',
@@ -515,7 +665,16 @@ const builtinInspectorControlRegistrations = [
 ];
 function appendInspectorPropertyRow(doc, parent, inspectorObject, property, controlRegistry) {
     const control = renderInspectorControl(doc, controlRegistry, inspectorObject, property);
-    parent.appendChild(createPropertyRow(doc, property.label, control));
+    const access = getInspectorPropertyAccess(property);
+    const effect = getInspectorPropertyEffect(property);
+    const row = createPropertyRow(doc, property.label, control);
+    row.dataset.editorInspectorAccess = access;
+    row.dataset.editorInspectorEffect = effect;
+    row.title = createInspectorStatusTitle(access, effect, property.tooltip ?? property.disabledReason);
+    const label = row.firstElementChild;
+    if (label)
+        label.style.cssText = createInspectorPropertyLabelStyle(access, effect);
+    parent.appendChild(row);
 }
 export function createLocalEditorBrowserInspectorControlRegistry(controls = [], conflict = 'error') {
     const registrations = new Map();
@@ -544,7 +703,7 @@ function compareInspectorControlRegistrations(left, right) {
     return (left.order ?? 0) - (right.order ?? 0) || left.id.localeCompare(right.id);
 }
 function renderInspectorControl(doc, registrations, target, property) {
-    if (property.readOnly || property.persistence !== 'document')
+    if (!isInspectorPropertyEditable(property))
         return createInspectorReadonlyControl(doc, target, property);
     const context = {
         doc,
@@ -576,18 +735,145 @@ function localEditorBrowserInspectorControlSupports(registration, context) {
 function appendInspectorVectorInputs(doc, parent, inspectorObject, label, properties) {
     const wrapper = doc.createElement('div');
     wrapper.style.cssText = 'margin:8px 0';
+    const access = getInspectorPropertyGroupAccess(properties);
+    const effect = getInspectorPropertyGroupEffect(properties);
+    wrapper.dataset.editorInspectorAccess = access;
+    wrapper.dataset.editorInspectorEffect = effect;
     const labelElement = doc.createElement('div');
-    labelElement.textContent = label;
-    labelElement.style.cssText = 'color:var(--fps-editor-muted);font-weight:800;margin-bottom:5px';
+    labelElement.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px';
+    const labelText = doc.createElement('span');
+    labelText.textContent = label;
+    labelText.style.cssText = createInspectorPropertyLabelStyle(access, effect);
+    labelElement.appendChild(labelText);
+    if (access !== 'editable') {
+        const badge = createInspectorAccessBadge(doc, access);
+        badge.style.flex = '0 0 auto';
+        labelElement.appendChild(badge);
+    }
+    const effectBadge = createInspectorEffectBadge(doc, effect, getInspectorPropertyGroupDisabledReason(properties));
+    if (effectBadge && !(access === 'runtime' && effect === 'runtime')) {
+        effectBadge.style.flex = '0 0 auto';
+        labelElement.appendChild(effectBadge);
+    }
     wrapper.appendChild(labelElement);
     const fields = doc.createElement('div');
     fields.style.cssText = 'display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px';
     for (const property of properties) {
-        fields.appendChild(createInspectorNumberControl(doc, inspectorObject, property));
+        fields.appendChild(isInspectorPropertyEditable(property)
+            ? createInspectorNumberControl(doc, inspectorObject, property)
+            : createInspectorReadonlyControl(doc, inspectorObject, property));
     }
     wrapper.appendChild(fields);
     parent.appendChild(wrapper);
 }
+function getInspectorPropertyGroupAccess(properties) {
+    if (properties.some(property => property.persistence === 'runtime'))
+        return 'runtime';
+    const editableCount = properties.filter(isInspectorPropertyEditable).length;
+    if (editableCount === 0)
+        return 'readonly';
+    if (editableCount === properties.length)
+        return 'editable';
+    return 'mixed';
+}
+function getInspectorPropertyGroupEffect(properties) {
+    const effects = new Set(properties.map(getInspectorPropertyEffect));
+    if (effects.size === 1)
+        return [...effects][0] ?? 'active';
+    if (effects.has('unsupported'))
+        return 'unsupported';
+    if (effects.has('default'))
+        return 'default';
+    if (effects.has('derived'))
+        return 'derived';
+    if (effects.has('runtime'))
+        return 'runtime';
+    return 'active';
+}
+function getInspectorPropertyGroupDisabledReason(properties) {
+    return properties.find(property => property.disabledReason)?.disabledReason;
+}
+function createInspectorPropertyLabelStyle(access, effect = 'active') {
+    return [
+        `color:${effect === 'unsupported' ? 'var(--fps-editor-danger-text)' : effect === 'default' || effect === 'derived' || access === 'runtime' ? 'var(--fps-editor-warn)' : access === 'editable' ? 'var(--fps-editor-muted-strong)' : 'var(--fps-editor-muted)'}`,
+        'font-weight:800',
+        access === 'readonly' ? 'opacity:0.82' : '',
+    ].filter(Boolean).join(';');
+}
+function createInspectorAccessTitle(access, tooltip) {
+    const accessLabel = access === 'editable'
+        ? 'Editable'
+        : access === 'mixed'
+            ? 'Mixed editable and read-only'
+            : access === 'runtime'
+                ? 'Runtime-only'
+                : 'Read-only';
+    return tooltip ? `${accessLabel}: ${tooltip}` : accessLabel;
+}
+function createInspectorStatusTitle(access, effect, detail) {
+    const parts = [createInspectorAccessTitle(access)];
+    if (effect !== 'active')
+        parts.push(createInspectorEffectTitle(effect));
+    if (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;
+    valueText.style.cssText = 'min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    parent.appendChild(valueText);
+    parent.title = title ?? createInspectorStatusTitle(access, effect);
+}
+function createInspectorReadonlyScalarControl(doc, value, access, effect = 'active', title) {
+    const valueElement = createInspectorReadonlyValueShell(doc, access, effect, title);
+    appendInspectorReadonlyTextValue(doc, valueElement, value, access, effect, title);
+    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 createInspectorInputBase(doc, target, property) {
     const input = doc.createElement('input');
     input.value = property.mixed ? '' : String(property.value);
@@ -615,7 +901,14 @@ function createInspectorBooleanControl(doc, target, property) {
     const input = createInspectorInputBase(doc, target, property);
     input.type = 'checkbox';
     input.checked = property.mixed ? false : property.value === true;
-    input.style.cssText = 'width:16px;height:16px;accent-color:var(--fps-editor-accent);justify-self:start';
+    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) {
@@ -664,36 +957,30 @@ 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-border);border-radius:3px;background:transparent;padding:0';
+    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 createInspectorReadonlyControl(doc, _target, property) {
     if (!property.mixed && isExpandableInspectorValue(property.value)) {
         return createInspectorObjectReadonlyControl(doc, property);
     }
-    const valueElement = doc.createElement('div');
-    valueElement.textContent = property.mixed ? '--' : formatLocalEditorBrowserInspectorValue(property.value);
-    valueElement.style.cssText = [
-        `color:${property.persistence === 'runtime' ? 'var(--fps-editor-muted)' : 'var(--fps-editor-text)'}`,
-        'overflow:hidden',
-        'text-overflow:ellipsis',
-        'white-space:nowrap',
-        property.persistence === 'runtime' ? 'font-style:italic' : '',
-    ].filter(Boolean).join(';');
-    if (property.persistence === 'runtime')
-        valueElement.title = 'Runtime-only context';
-    return valueElement;
+    const access = getInspectorPropertyAccess(property);
+    const effect = getInspectorPropertyEffect(property);
+    return createInspectorReadonlyScalarControl(doc, property.mixed ? '--' : formatLocalEditorBrowserInspectorValue(property.value), access, effect, createInspectorStatusTitle(access, effect, property.tooltip ?? property.disabledReason));
 }
 function createInspectorObjectReadonlyControl(doc, property) {
-    const details = doc.createElement('details');
-    details.style.cssText = [
-        'min-width:0',
-        'max-width:100%',
-        `color:${property.persistence === 'runtime' ? 'var(--fps-editor-muted)' : 'var(--fps-editor-text)'}`,
-    ].join(';');
+    const access = getInspectorPropertyAccess(property);
+    const effect = getInspectorPropertyEffect(property);
+    const details = createInspectorReadonlyDetailsShell(doc, property, access);
     const summary = doc.createElement('summary');
-    summary.textContent = formatInspectorObjectSummary(property.value);
-    summary.style.cssText = 'cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    summary.style.cssText = 'cursor:pointer;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap';
+    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);
     details.appendChild(summary);
     const pre = doc.createElement('pre');
     pre.textContent = formatLocalEditorBrowserInspectorValue(property.value);
@@ -704,15 +991,13 @@ function createInspectorObjectReadonlyControl(doc, property) {
         'word-break:break-word',
         'margin:6px 0 0',
         'padding:7px',
-        'border:1px solid var(--fps-editor-border)',
+        `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);
-    if (property.persistence === 'runtime')
-        details.title = 'Runtime-only context';
     return details;
 }
 export function applyLocalEditorBrowserInspectorControlBinding(element, target, property, options) {
@@ -724,30 +1009,38 @@ export function applyLocalEditorBrowserInspectorControlBinding(element, target,
     element.dataset.serializedValueType = property.valueType;
     element.dataset.serializedCommitMode = property.commitMode;
     element.dataset.serializedPersistence = property.persistence;
+    element.dataset.serializedEffect = getInspectorPropertyEffect(property);
+    if (property.disabledReason)
+        element.dataset.serializedDisabledReason = property.disabledReason;
     if (options?.source)
         element.dataset.serializedEditSource = options.source;
-    element.title = property.tooltip ?? property.label;
+    const access = getInspectorPropertyAccess(property);
+    const effect = getInspectorPropertyEffect(property);
+    element.title = access === 'editable' && effect === 'active'
+        ? property.tooltip ?? property.label
+        : createInspectorStatusTitle(access, effect, property.tooltip ?? property.disabledReason ?? property.label);
     if ('disabled' in element) {
-        element.disabled = property.readOnly === true || property.persistence !== 'document';
+        element.disabled = !isInspectorPropertyEditable(property);
     }
 }
 function createInspectorInputStyle() {
     return [
-        'min-width:0',
-        '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',
+        createEditorInputStyle(),
         'padding:0 6px',
+        'background:var(--fps-editor-editable-bg)',
+        'border-color:var(--fps-editor-editable-border)',
+        'color:var(--fps-editor-text-strong)',
+        'box-shadow:var(--fps-editor-editable-shadow)',
     ].join(';');
 }
 function appendReadOnlyRow(doc, parent, label, value) {
-    const valueElement = doc.createElement('div');
-    valueElement.textContent = value;
-    valueElement.style.cssText = 'color:var(--fps-editor-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
-    parent.appendChild(createPropertyRow(doc, label, valueElement));
+    const valueElement = createInspectorReadonlyScalarControl(doc, value, 'readonly', 'active', 'Read-only summary');
+    const row = createPropertyRow(doc, label, valueElement);
+    row.dataset.editorInspectorAccess = 'readonly';
+    const labelElement = row.firstElementChild;
+    if (labelElement)
+        labelElement.style.cssText = createInspectorPropertyLabelStyle('readonly', 'active');
+    parent.appendChild(row);
 }
 function createLegacyInspectorObject(serializedObject) {
     const targetIds = 'targetIds' in serializedObject ? serializedObject.targetIds : [serializedObject.targetId];