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

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

@@ -1,7 +1,7 @@
 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 { clearElement, createButton, 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 = {
@@ -219,18 +219,50 @@ export function renderRenderingPanel(doc, panel, state) {
     panel.appendChild(viewport);
 }
 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;
+    return (rendering?.actions ?? []).map(action => createRenderingActionButton(doc, action, {
+        buttonKind: 'toolbar',
+    }));
+}
+function createRenderingActionButton(doc, action, context = {}) {
+    const icon = action.icon && isLocalEditorIconName(action.icon) ? action.icon : 'world';
+    const button = context.buttonKind === 'icon'
+        ? createButton(doc, action.label, {
+            icon,
+            labelMode: 'icon-only',
+            tooltip: action.tooltip ?? action.label,
+            ariaLabel: action.label,
+            variant: 'toolbar-icon',
+        })
+        : createToolbarButton(doc, action.label, icon);
+    button.type = 'button';
+    button.dataset.editorRenderingAction = action.id;
+    if (context.sectionId)
+        button.dataset.renderingSectionId = context.sectionId;
+    if (context.systemId)
+        button.dataset.renderingSystemId = context.systemId;
+    if (context.path)
+        button.dataset.renderingPath = context.path;
+    if (action.params)
+        button.dataset.renderingActionParams = JSON.stringify(action.params);
+    button.disabled = action.disabled === true;
+    button.title = action.tooltip ?? action.label;
+    button.dataset.editorTooltip = button.title;
+    if (context.buttonKind === 'toolbar') {
         button.style.padding = '3px 7px';
         button.style.fontSize = '11px';
-        return button;
-    });
+    }
+    else if (context.buttonKind === 'compact') {
+        button.style.padding = '2px 6px';
+        button.style.height = '22px';
+        button.style.fontSize = '11px';
+    }
+    else {
+        button.style.width = '24px';
+        button.style.minWidth = '24px';
+        button.style.height = '24px';
+        button.style.flexBasis = '24px';
+    }
+    return button;
 }
 function tabHeaderButtonStyle(button) {
     button.style.borderTop = '0';
@@ -239,17 +271,32 @@ function tabHeaderButtonStyle(button) {
     button.style.minWidth = '0';
 }
 function createRenderingSectionBlock(doc, section) {
-    const block = doc.createElement('section');
+    const isListLayout = section.layout === 'list';
+    const systemGroups = groupRenderingSystems(section.systems);
+    const hasSystemGroups = systemGroups.some(group => group.group);
+    const block = doc.createElement('details');
     block.dataset.editorRenderingSection = section.id;
+    block.open = section.collapsedByDefault !== true;
     block.style.cssText = [
         'margin:0 0 10px',
-        'padding:8px',
+        `padding:${isListLayout ? '6px' : '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 header = doc.createElement('summary');
+    header.style.cssText = [
+        'display:flex',
+        'align-items:flex-start',
+        'justify-content:space-between',
+        'gap:8px',
+        'cursor:pointer',
+        'list-style:none',
+        'margin:0',
+    ].join(';');
+    const titleGroup = doc.createElement('div');
+    titleGroup.style.cssText = 'display:flex;align-items:flex-start;gap:6px;min-width:0';
+    const disclosure = createRenderingDisclosureIcon(doc, block, section.id, 'editorRenderingSectionDisclosure');
     const title = doc.createElement('div');
     title.style.cssText = 'min-width:0';
     const heading = doc.createElement('h3');
@@ -262,57 +309,375 @@ function createRenderingSectionBlock(doc, section) {
         summary.style.cssText = 'margin-top:3px;color:var(--fps-editor-muted);font-size:11px;line-height:1.35';
         title.appendChild(summary);
     }
-    header.appendChild(title);
+    titleGroup.appendChild(disclosure);
+    titleGroup.appendChild(title);
+    header.appendChild(titleGroup);
     header.appendChild(createBadge(doc, `${section.systems.length}`, { compact: true }));
     block.appendChild(header);
+    const content = doc.createElement('div');
+    content.dataset.editorRenderingSectionContent = section.id;
+    content.style.cssText = 'margin-top:8px';
     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));
+    list.style.cssText = [
+        'display:flex',
+        'flex-direction:column',
+        `gap:${hasSystemGroups ? '8px' : isListLayout ? '0' : '8px'}`,
+        ...(isListLayout && !hasSystemGroups ? [
+            'border:1px solid var(--fps-editor-border)',
+            'border-radius:3px',
+            'overflow:hidden',
+            'background:rgba(0,0,0,0.08)',
+        ] : []),
+    ].join(';');
+    for (const group of systemGroups) {
+        if (group.group) {
+            list.appendChild(createRenderingSystemGroupBlock(doc, section.id, group.group, group.systems, section.layout, section.systemsCollapsible === true));
+            continue;
+        }
+        for (const system of group.systems) {
+            list.appendChild(createRenderingSystemBlock(doc, section.id, system, section.layout, section.systemsCollapsible === true));
+        }
+    }
+    content.appendChild(list);
+    block.appendChild(content);
+    return block;
+}
+function groupRenderingSystems(systems) {
+    const groups = [];
+    for (const system of systems) {
+        const group = system.group ?? null;
+        const key = group?.id ?? `system:${system.id}`;
+        const activeGroup = groups[groups.length - 1];
+        if (activeGroup?.key === key) {
+            activeGroup.systems.push(system);
+            continue;
+        }
+        groups.push({ key, group, systems: [system] });
+    }
+    return groups;
+}
+function createRenderingSystemGroupBlock(doc, sectionId, group, systems, layout = 'cards', systemsCollapsible = false) {
+    const isListLayout = layout === 'list';
+    const block = doc.createElement('section');
+    block.dataset.editorRenderingSystemGroup = group.id;
+    block.style.cssText = [
+        'min-width:0',
+        'border:1px solid var(--fps-editor-border)',
+        `border-left:3px solid ${getRenderingSystemGroupAccent(group.id)}`,
+        'border-radius:3px',
+        'background:rgba(0,0,0,0.08)',
+        'overflow:hidden',
+    ].join(';');
+    const header = doc.createElement('div');
+    header.style.cssText = [
+        'display:flex',
+        'align-items:flex-start',
+        'justify-content:space-between',
+        'gap:8px',
+        'padding:8px',
+        'border-bottom:1px solid var(--fps-editor-divider)',
+        'background:rgba(255,255,255,0.025)',
+    ].join(';');
+    const title = doc.createElement('div');
+    title.style.cssText = 'min-width:0;display:flex;flex-direction:column;gap:3px';
+    const label = doc.createElement('div');
+    label.textContent = group.label;
+    label.style.cssText = [
+        'color:var(--fps-editor-text-strong)',
+        'font-size:12px',
+        'font-weight:900',
+        'line-height:1.25',
+        'min-width:0',
+        'overflow:hidden',
+        'text-overflow:ellipsis',
+        'white-space:nowrap',
+    ].join(';');
+    title.appendChild(label);
+    if (group.summary) {
+        const summary = doc.createElement('div');
+        summary.textContent = group.summary;
+        summary.style.cssText = [
+            'color:var(--fps-editor-muted)',
+            'font-size:10px',
+            'font-weight:700',
+            'line-height:1.35',
+            'overflow-wrap:anywhere',
+        ].join(';');
+        title.appendChild(summary);
     }
-    block.appendChild(list);
+    header.appendChild(title);
+    header.appendChild(createBadge(doc, `${systems.length}`, { compact: true }));
+    block.appendChild(header);
+    const body = doc.createElement('div');
+    body.style.cssText = [
+        'display:flex',
+        'flex-direction:column',
+        `gap:${isListLayout ? '0' : '8px'}`,
+        isListLayout ? '' : 'padding:8px',
+    ].filter(Boolean).join(';');
+    systems.forEach((system, index) => {
+        const systemBlock = createRenderingSystemBlock(doc, sectionId, system, layout, systemsCollapsible);
+        if (isListLayout && index === systems.length - 1)
+            systemBlock.style.borderBottom = '0';
+        body.appendChild(systemBlock);
+    });
+    block.appendChild(body);
     return block;
 }
-function createRenderingSystemBlock(doc, sectionId, system) {
-    const block = createListItemBlock(doc);
+function getRenderingSystemGroupAccent(groupId) {
+    if (groupId.includes('moving'))
+        return 'var(--fps-editor-accent)';
+    if (groupId.includes('static'))
+        return 'var(--fps-editor-success)';
+    if (groupId.includes('planar'))
+        return 'var(--fps-editor-warn)';
+    return 'var(--fps-editor-muted)';
+}
+function createRenderingSystemBlock(doc, sectionId, system, layout = 'cards', collapsible = false) {
+    const isListLayout = layout === 'list';
+    const block = collapsible ? doc.createElement('details') : 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';
+    if (collapsible) {
+        const details = block;
+        details.open = system.collapsedByDefault !== true;
+        details.style.cssText = [
+            'padding:7px 8px',
+            'border:1px solid var(--fps-editor-border-soft)',
+            'border-radius:3px',
+            'background:var(--fps-editor-panel-soft)',
+        ].join(';');
+    }
+    if (isListLayout) {
+        block.style.margin = '0';
+        block.style.border = '0';
+        block.style.borderRadius = '0';
+        block.style.borderBottom = '1px solid var(--fps-editor-border)';
+        block.style.background = 'transparent';
+        block.style.padding = '8px';
+    }
+    const header = doc.createElement(collapsible ? 'summary' : 'div');
+    header.style.cssText = [
+        'display:flex',
+        'align-items:flex-start',
+        'justify-content:space-between',
+        'gap:8px',
+        'min-width:0',
+        `margin:${collapsible ? '0' : `0 0 ${isListLayout ? '6px' : '8px'}`}`,
+        ...(collapsible ? [
+            'cursor:pointer',
+            'list-style:none',
+        ] : []),
+    ].join(';');
+    const titleGroup = doc.createElement('div');
+    titleGroup.style.cssText = collapsible
+        ? 'display:flex;align-items:flex-start;gap:6px;min-width:0'
+        : 'min-width:0';
     const title = doc.createElement('div');
-    title.style.cssText = 'min-width:0';
+    title.style.cssText = 'min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px';
     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';
+    label.style.cssText = [
+        'color:var(--fps-editor-text-strong)',
+        'font-size:12px',
+        'font-weight:900',
+        'line-height:1.25',
+        'min-width:0',
+        'overflow:hidden',
+        'text-overflow:ellipsis',
+        'white-space:nowrap',
+    ].join(';');
     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';
+        summary.style.cssText = 'color:var(--fps-editor-muted);font-size:11px;line-height:1.35';
         title.appendChild(summary);
     }
-    header.appendChild(title);
+    if (collapsible) {
+        titleGroup.appendChild(createRenderingDisclosureIcon(doc, block, system.id, 'editorRenderingSystemDisclosure'));
+    }
+    titleGroup.appendChild(title);
+    header.appendChild(titleGroup);
     const badges = doc.createElement('div');
-    badges.style.cssText = 'display:flex;align-items:center;gap:4px;flex:0 0 auto';
+    badges.style.cssText = 'display:flex;align-items:center;justify-content:flex-end;gap:4px;flex:0 0 auto;max-width:55%;flex-wrap:wrap';
     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' }));
+    for (const action of system.actions ?? []) {
+        badges.appendChild(createRenderingActionButton(doc, action, {
+            sectionId,
+            systemId: system.id,
+            buttonKind: 'compact',
+        }));
+    }
     header.appendChild(badges);
     block.appendChild(header);
+    if (system.progress) {
+        block.appendChild(createRenderingProgressBlock(doc, system.progress));
+    }
+    if (system.details?.length) {
+        block.appendChild(createRenderingDetailsBlock(doc, system.details));
+    }
     const propertyGrid = doc.createElement('div');
-    propertyGrid.style.cssText = 'display:flex;flex-direction:column;gap:6px';
+    propertyGrid.dataset.editorRenderingSystemContent = system.id;
+    propertyGrid.style.cssText = [
+        'display:flex',
+        'flex-direction:column',
+        `gap:${isListLayout ? '5px' : '6px'}`,
+        ...(collapsible ? [
+            `margin-top:${isListLayout ? '6px' : '8px'}`,
+        ] : []),
+        ...(isListLayout ? [
+            'padding-left:0',
+        ] : []),
+    ].join(';');
     for (const property of system.properties) {
         propertyGrid.appendChild(createRenderingPropertyRow(doc, sectionId, system.id, property, system.readOnly === true));
     }
     block.appendChild(propertyGrid);
     return block;
 }
+function createRenderingProgressBlock(doc, progress) {
+    const value = typeof progress.value === 'number' && Number.isFinite(progress.value)
+        ? Math.max(0, Math.min(1, progress.value))
+        : progress.indeterminate ? 0.42 : 0;
+    const block = doc.createElement('div');
+    block.dataset.editorRenderingProgress = 'true';
+    block.style.cssText = [
+        'display:flex',
+        'flex-direction:column',
+        'gap:4px',
+        'margin:0 0 8px',
+    ].join(';');
+    const label = doc.createElement('div');
+    label.textContent = progress.label;
+    label.style.cssText = [
+        'color:var(--fps-editor-muted)',
+        'font-size:10px',
+        'font-weight:800',
+        'line-height:1.2',
+        'overflow:hidden',
+        'text-overflow:ellipsis',
+        'white-space:nowrap',
+    ].join(';');
+    const track = doc.createElement('div');
+    track.style.cssText = [
+        'height:6px',
+        'border-radius:999px',
+        'border:1px solid var(--fps-editor-border)',
+        'background:rgba(0,0,0,0.22)',
+        'overflow:hidden',
+    ].join(';');
+    const fill = doc.createElement('div');
+    fill.style.cssText = [
+        `width:${Math.round(value * 100)}%`,
+        'height:100%',
+        'border-radius:999px',
+        'background:linear-gradient(90deg, var(--fps-editor-accent), var(--fps-editor-accent-strong))',
+        'transition:width 120ms linear',
+    ].join(';');
+    if (progress.indeterminate && progress.value == null) {
+        fill.style.background = 'linear-gradient(90deg, transparent, var(--fps-editor-accent), transparent)';
+    }
+    track.appendChild(fill);
+    block.appendChild(label);
+    block.appendChild(track);
+    return block;
+}
+function createRenderingDetailsBlock(doc, details) {
+    const block = doc.createElement('div');
+    block.dataset.editorRenderingDetails = 'true';
+    block.style.cssText = [
+        'display:grid',
+        'grid-template-columns:repeat(2,minmax(0,1fr))',
+        'gap:4px',
+        'margin:0 0 8px',
+    ].join(';');
+    for (const detail of details) {
+        const item = doc.createElement('div');
+        item.style.cssText = [
+            'min-width:0',
+            'padding:5px 6px',
+            'border:1px solid var(--fps-editor-border)',
+            'border-radius:3px',
+            'background:rgba(0,0,0,0.12)',
+        ].join(';');
+        const label = doc.createElement('div');
+        label.textContent = detail.label;
+        label.style.cssText = [
+            'color:var(--fps-editor-muted)',
+            'font-size:9px',
+            'font-weight:800',
+            'line-height:1.1',
+            'overflow:hidden',
+            'text-overflow:ellipsis',
+            'white-space:nowrap',
+        ].join(';');
+        const value = doc.createElement('div');
+        value.textContent = detail.value;
+        value.style.cssText = [
+            `color:${detail.tone === 'warning' ? 'var(--fps-editor-warn)' : detail.tone === 'error' ? 'var(--fps-editor-danger-text)' : detail.tone === 'success' ? 'var(--fps-editor-success)' : 'var(--fps-editor-text-strong)'}`,
+            'font-size:11px',
+            'font-weight:900',
+            'line-height:1.25',
+            'margin-top:2px',
+            'overflow:hidden',
+            'text-overflow:ellipsis',
+            'white-space:nowrap',
+        ].join(';');
+        item.appendChild(label);
+        item.appendChild(value);
+        block.appendChild(item);
+    }
+    return block;
+}
+function createRenderingDisclosureIcon(doc, block, id, datasetKey) {
+    const disclosure = doc.createElement('span');
+    disclosure.dataset[datasetKey] = id;
+    disclosure.style.cssText = [
+        'display:inline-flex',
+        'align-items:center',
+        'justify-content:center',
+        'width:14px',
+        'height:14px',
+        'margin-top:1px',
+        'flex:0 0 auto',
+        'color:var(--fps-editor-muted)',
+    ].join(';');
+    const syncDisclosureIcon = () => {
+        clearElement(disclosure);
+        disclosure.appendChild(createLocalEditorIcon(doc, block.open ? 'chevron-down' : 'chevron-right', {
+            size: 14,
+            strokeWidth: 2.4,
+        }));
+    };
+    block.addEventListener('toggle', syncDisclosureIcon);
+    syncDisclosureIcon();
+    return disclosure;
+}
 function createRenderingPropertyRow(doc, sectionId, systemId, property, systemReadOnly) {
     const inspectorProperty = createInspectorPropertyFromRenderingProperty(property, systemReadOnly);
-    const control = createRenderingPropertyControl(doc, sectionId, systemId, property, inspectorProperty);
+    let control = createRenderingPropertyControl(doc, sectionId, systemId, property, inspectorProperty);
+    if (property.actions?.length) {
+        const controlWithActions = doc.createElement('div');
+        controlWithActions.style.cssText = 'display:flex;align-items:center;gap:5px;min-width:0';
+        control.style.minWidth = '0';
+        control.style.flex = '1 1 auto';
+        controlWithActions.appendChild(control);
+        for (const action of property.actions) {
+            controlWithActions.appendChild(createRenderingActionButton(doc, action, {
+                sectionId,
+                systemId,
+                path: property.path,
+                buttonKind: 'icon',
+            }));
+        }
+        control = controlWithActions;
+    }
     const access = getInspectorPropertyAccess(inspectorProperty);
     const effect = getInspectorPropertyEffect(inspectorProperty);
     const row = createPropertyRow(doc, inspectorProperty.label, control);
@@ -1218,6 +1583,13 @@ const builtinInspectorControlRegistrations = [
         customControl: 'open-right-dock-tab',
         render: ({ doc, property }) => createInspectorOpenRightDockTabControl(doc, property),
     },
+    {
+        id: 'builtin.rendering-action-button',
+        order: 92,
+        control: 'custom',
+        customControl: 'rendering-action-button',
+        render: ({ doc, property }) => createInspectorRenderingActionButtonControl(doc, property),
+    },
     {
         id: 'builtin.asset-picker-card',
         order: 95,
@@ -1300,23 +1672,24 @@ function compareInspectorControlRegistrations(left, right) {
     return (left.order ?? 0) - (right.order ?? 0) || left.id.localeCompare(right.id);
 }
 function renderInspectorControl(doc, registrations, target, property) {
-    const canRenderCustomAction = property.control === 'custom' && !!property.customControl;
-    if (!isInspectorPropertyEditable(property) && !canRenderCustomAction)
-        return createInspectorReadonlyControl(doc, target, property);
+    const normalizedProperty = normalizeInspectorRenderingActionProperty(property);
+    const canRenderCustomAction = normalizedProperty.control === 'custom' && !!normalizedProperty.customControl;
+    if (!isInspectorPropertyEditable(normalizedProperty) && !canRenderCustomAction)
+        return createInspectorReadonlyControl(doc, target, normalizedProperty);
     const context = {
         doc,
         target,
-        property,
+        property: normalizedProperty,
         bindInput(element, options) {
-            applyLocalEditorBrowserInspectorControlBinding(element, target, property, options);
+            applyLocalEditorBrowserInspectorControlBinding(element, target, normalizedProperty, options);
         },
     };
     const registration = resolveLocalEditorBrowserInspectorControlRegistration(registrations, context);
     if (registration)
         return registration.render(context);
-    if (!isInspectorPropertyEditable(property))
-        return createInspectorReadonlyControl(doc, target, property);
-    return createInspectorReadonlyControl(doc, target, property);
+    if (!isInspectorPropertyEditable(normalizedProperty))
+        return createInspectorReadonlyControl(doc, target, normalizedProperty);
+    return createInspectorReadonlyControl(doc, target, normalizedProperty);
 }
 export function resolveLocalEditorBrowserInspectorControlRegistration(registrations, context) {
     for (const registration of registrations) {
@@ -1326,12 +1699,48 @@ export function resolveLocalEditorBrowserInspectorControlRegistration(registrati
     return null;
 }
 function localEditorBrowserInspectorControlSupports(registration, context) {
-    if (registration.control && registration.control !== context.property.control)
-        return false;
-    if (registration.customControl && registration.customControl !== context.property.customControl)
+    const renderingActionFallback = registration.customControl === 'rendering-action-button'
+        && !!readInspectorRenderingActionId(context.property);
+    if (registration.control && registration.control !== context.property.control && !renderingActionFallback)
         return false;
+    if (registration.customControl && registration.customControl !== context.property.customControl) {
+        if (!isInspectorCustomControlFallback(registration.customControl, context.property))
+            return false;
+    }
     return registration.supports?.(context) ?? true;
 }
+function normalizeInspectorRenderingActionProperty(property) {
+    const actionId = readInspectorRenderingActionId(property);
+    if (!actionId)
+        return property;
+    return {
+        ...property,
+        control: 'custom',
+        customControl: 'rendering-action-button',
+        controlOptions: {
+            ...property.controlOptions,
+            actionId,
+            label: readInspectorControlOptionString(property, 'label') || property.label,
+            icon: readInspectorControlOptionString(property, 'icon') || 'save',
+        },
+        readOnly: false,
+        persistence: property.persistence === 'runtime' ? 'runtime' : 'document',
+    };
+}
+function readInspectorRenderingActionId(property) {
+    const explicit = readInspectorControlOptionString(property, 'actionId');
+    if (explicit)
+        return explicit;
+    if (typeof property.value !== 'string')
+        return '';
+    const value = property.value.trim();
+    return value && property.path.startsWith('actions.') ? value : '';
+}
+function isInspectorCustomControlFallback(customControl, property) {
+    if (customControl !== 'rendering-action-button')
+        return false;
+    return !!readInspectorRenderingActionId(property);
+}
 function appendInspectorVectorInputs(doc, parent, inspectorObject, label, properties, layout = 'block', options = {}) {
     const wrapper = doc.createElement('div');
     wrapper.style.cssText = 'margin:8px 0';
@@ -1676,6 +2085,31 @@ function createInspectorOpenRightDockTabControl(doc, property) {
     ].filter(Boolean).join(';');
     return button;
 }
+function createInspectorRenderingActionButtonControl(doc, property) {
+    const actionId = readInspectorControlOptionString(property, 'actionId')
+        || (typeof property.value === 'string' ? property.value : '');
+    const iconName = readInspectorControlOptionString(property, 'icon');
+    const icon = isLocalEditorIconName(iconName) ? iconName : 'save';
+    const label = readInspectorControlOptionString(property, 'label')
+        || (typeof property.value === 'string' ? property.value : property.label);
+    const button = createToolbarButton(doc, label, icon);
+    button.type = 'button';
+    if (actionId)
+        button.dataset.editorRenderingAction = actionId;
+    button.disabled = property.readOnly === true
+        || property.effect === 'unsupported'
+        || property.controlOptions?.disabled === true
+        || !actionId;
+    button.title = property.tooltip ?? label;
+    button.dataset.editorTooltip = button.title;
+    button.style.cssText = [
+        button.style.cssText,
+        'width:100%',
+        'justify-content:center',
+        'height:28px',
+    ].filter(Boolean).join(';');
+    return button;
+}
 function createInspectorMaterialSlotListControl(doc, property) {
     const wrapper = doc.createElement('div');
     wrapper.dataset.editorInspectorMaterialSlotList = 'true';
@@ -2084,11 +2518,22 @@ function createLegacyInspectorSections(properties) {
     for (const [index, property] of properties.entries()) {
         const id = property.path.split('.')[0] || 'properties';
         const section = sections.get(id) ?? { order: sections.size, properties: [] };
+        const renderingActionId = readLegacyRenderingActionId(property);
         section.properties.push({
             path: property.path,
             label: property.label,
             valueType: property.valueType,
-            control: inferLegacyInspectorControl(property),
+            control: renderingActionId ? 'custom' : inferLegacyInspectorControl(property),
+            ...(renderingActionId
+                ? {
+                    customControl: 'rendering-action-button',
+                    controlOptions: {
+                        actionId: renderingActionId,
+                        label: property.label,
+                        icon: 'save',
+                    },
+                }
+                : {}),
             value: property.value,
             mixed: property.mixed,
             readOnly: property.readOnly === true,
@@ -2108,6 +2553,12 @@ function createLegacyInspectorSections(properties) {
         properties: section.properties,
     }));
 }
+function readLegacyRenderingActionId(property) {
+    if (typeof property.value !== 'string')
+        return '';
+    const value = property.value.trim();
+    return value && property.path.startsWith('actions.') ? value : '';
+}
 function createSelectionSummaryInspectorObject(state) {
     const targetIds = state.selectedIds;
     if (targetIds.length === 0)