@fps-games/editor 0.1.5-beta.5 → 0.1.7-beta.1

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

@@ -2,6 +2,7 @@ import { createLocalEditorIcon, isLocalEditorIconName, } from './local-editor-ui
 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, createButton, toTitle } from './local-editor-ui-shared.js';
+import { resolveLocalEditorAssetBrowserTab, resolveLocalEditorBrowserAssetKind, } from './local-editor-ui-asset-kind.js';
 import { createLocalEditorBrowserInspectorVectorCopyPayload, } from './local-editor-inspector-clipboard.js';
 import { resolveLocalEditorBrowserInspectorVectorGroupPathFromProperties, } from './local-editor-inspector-groups.js';
 const BOTTOM_DOCK_TAB_ICONS = {
@@ -11,6 +12,7 @@ const BOTTOM_DOCK_TAB_ICONS = {
 const RIGHT_DOCK_TAB_ICONS = {
     inspector: 'inspector',
     rendering: 'world',
+    markers: 'view-overlay',
 };
 const LEFT_DOCK_TAB_ICONS = {
     hierarchy: 'hierarchy',
@@ -18,6 +20,7 @@ const LEFT_DOCK_TAB_ICONS = {
 const ASSET_BROWSER_TABS = [
     { id: 'all', label: '全部', title: '显示全部项目资产' },
     { id: 'models', label: '模型', title: '显示模型资产' },
+    { id: 'prefabs', label: '预制体', title: '显示预制体资产' },
     { id: 'materials', label: '材质', title: '显示项目材质资产' },
     { id: 'textures', label: '贴图', title: '显示贴图资产' },
 ];
@@ -27,7 +30,11 @@ export function renderHierarchyPanel(doc, panel, state, rename, drop) {
     createGroupButton.dataset.editorHierarchyCreateGroup = 'true';
     createGroupButton.style.padding = '3px 7px';
     createGroupButton.style.fontSize = '11px';
-    panel.appendChild(createPanelHeader(doc, 'Hierarchy', [createGroupButton], 'hierarchy'));
+    const createMarkerButton = createToolbarButton(doc, '+ Marker', 'view-overlay');
+    createMarkerButton.dataset.editorHierarchyCreateMarker = 'true';
+    createMarkerButton.style.padding = '3px 7px';
+    createMarkerButton.style.fontSize = '11px';
+    panel.appendChild(createPanelHeader(doc, 'Hierarchy', [createGroupButton, createMarkerButton], 'hierarchy'));
     const list = createTreeView(doc);
     for (const item of state.hierarchy) {
         const isRenaming = rename?.id === item.id;
@@ -143,6 +150,7 @@ export function renderWorkbenchRightDockTabs(doc, panel, activeTab, panels = [])
         fallbackTabs: [
             { id: 'inspector', title: '检查器', area: 'right' },
             { id: 'rendering', title: '渲染', area: 'right' },
+            { id: 'markers', title: '标记', area: 'right' },
         ],
         iconById: RIGHT_DOCK_TAB_ICONS,
         panel,
@@ -150,6 +158,30 @@ export function renderWorkbenchRightDockTabs(doc, panel, activeTab, panels = [])
         tabStyle: tabHeaderButtonStyle,
     });
 }
+export function renderMarkerPanel(doc, panel, state) {
+    clearElement(panel);
+    configureLocalEditorDockPanelContent(panel);
+    const markerPanel = state.markerPanel ?? null;
+    panel.appendChild(createPanelHeader(doc, markerPanel?.title ?? 'Markers', [], 'view-overlay'));
+    const viewport = createLocalEditorDockPanelViewport(doc, 'editorMarkersScrollViewport', { gap: '8px' });
+    if (!markerPanel) {
+        viewport.appendChild(createEmptyState(doc, '当前项目没有提供 marker graph capability。'));
+        panel.appendChild(viewport);
+        return;
+    }
+    viewport.appendChild(createMarkerPanelSummary(doc, markerPanel));
+    viewport.appendChild(createMarkerRelationCreateBlock(doc, markerPanel));
+    viewport.appendChild(createMarkerRelationListBlock(doc, markerPanel.relations ?? []));
+    viewport.appendChild(createMarkerTypeCreateBlock(doc));
+    const list = doc.createElement('div');
+    list.style.cssText = 'display:flex;flex-direction:column;gap:6px';
+    for (const markerType of markerPanel.markerTypes)
+        list.appendChild(createMarkerTypeRow(doc, markerType));
+    if (markerPanel.markerTypes.length === 0)
+        list.appendChild(createEmptyState(doc, '还没有 marker type。'));
+    viewport.appendChild(list);
+    panel.appendChild(viewport);
+}
 export function renderWorkbenchLeftDockTabs(doc, panel, activeTab, panels = []) {
     renderLocalEditorDockTabStrip(doc, {
         activeId: activeTab,
@@ -164,6 +196,481 @@ export function renderWorkbenchLeftDockTabs(doc, panel, activeTab, panels = [])
         tabStyle: tabHeaderButtonStyle,
     });
 }
+function createMarkerPanelSummary(doc, panel) {
+    const block = createListItemBlock(doc);
+    block.style.cssText = [
+        block.style.cssText,
+        'display:flex',
+        'flex-direction:column',
+        'gap:7px',
+    ].filter(Boolean).join(';');
+    const counters = doc.createElement('div');
+    counters.style.cssText = 'display:flex;align-items:center;gap:5px;flex-wrap:wrap';
+    counters.appendChild(createBadge(doc, `${panel.markersCount ?? 0} markers`, { compact: true, icon: 'view-overlay' }));
+    counters.appendChild(createBadge(doc, `${panel.relationsCount ?? 0} relations`, { compact: true, icon: 'hierarchy' }));
+    counters.appendChild(createBadge(doc, `${panel.markerTypes.length} types`, { compact: true, icon: 'object' }));
+    block.appendChild(counters);
+    if (panel.summary || panel.status) {
+        const summary = doc.createElement('div');
+        summary.textContent = panel.status ?? panel.summary ?? '';
+        const statusColor = panel.statusTone === 'error'
+            ? 'var(--fps-editor-danger-text)'
+            : panel.statusTone === 'warning'
+                ? 'var(--fps-editor-warn)'
+                : panel.statusTone === 'success'
+                    ? 'var(--fps-editor-success)'
+                    : 'var(--fps-editor-muted)';
+        summary.style.cssText = [
+            `color:${statusColor}`,
+            'font-size:11px',
+            'font-weight:700',
+            'line-height:1.45',
+        ].join(';');
+        block.appendChild(summary);
+    }
+    return block;
+}
+function createMarkerRelationCreateBlock(doc, panel) {
+    const block = createListItemBlock(doc);
+    block.dataset.editorMarkerRelationCreate = 'true';
+    block.style.cssText = [
+        block.style.cssText,
+        'display:flex',
+        'flex-direction:column',
+        'gap:7px',
+    ].filter(Boolean).join(';');
+    const header = createMarkerPanelSectionHeader(doc, '关系');
+    header.appendChild(createBadge(doc, panel.activeMarkerId ? '当前标记' : '未选中标记', {
+        compact: true,
+        tone: panel.activeMarkerId ? 'success' : 'default',
+    }));
+    block.appendChild(header);
+    if (panel.markersVisible === false) {
+        block.appendChild(createMarkerRelationVisibilityHint(doc, '标记视图已关闭，关系线暂不显示'));
+    }
+    const endpoints = panel.relationEndpointOptions ?? [];
+    const relationTypes = panel.relationTypes ?? [];
+    const grid = doc.createElement('div');
+    grid.style.cssText = 'display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 8px;align-items:center';
+    grid.appendChild(createMarkerTypeFieldLabel(doc, '起点'));
+    grid.appendChild(createMarkerRelationEndpointSelect(doc, 'from', endpoints, panel.activeMarkerId ?? null));
+    grid.appendChild(createMarkerTypeFieldLabel(doc, '关系'));
+    grid.appendChild(createMarkerRelationTypeSelect(doc, relationTypes));
+    grid.appendChild(createMarkerTypeFieldLabel(doc, '终点'));
+    grid.appendChild(createMarkerRelationEndpointSelect(doc, 'to', endpoints, null));
+    grid.appendChild(createMarkerTypeFieldLabel(doc, '方向'));
+    grid.appendChild(createMarkerRelationDirectionSelect(doc));
+    block.appendChild(grid);
+    if (panel.relationPick?.active) {
+        block.appendChild(createMarkerRelationPickStatus(doc, panel));
+    }
+    const actions = doc.createElement('div');
+    actions.style.cssText = 'display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap';
+    const selectedRelationCount = (panel.relations ?? []).filter(relation => relation.selected).length;
+    const deleteConnectedButton = createToolbarButton(doc, '删除当前标记全部关系', 'discard');
+    deleteConnectedButton.type = 'button';
+    deleteConnectedButton.dataset.editorMarkerRelationAction = 'delete-connected';
+    if (panel.activeMarkerId)
+        deleteConnectedButton.dataset.editorMarkerRelationMarkerId = panel.activeMarkerId;
+    deleteConnectedButton.disabled = !panel.activeMarkerId || selectedRelationCount === 0;
+    deleteConnectedButton.title = deleteConnectedButton.disabled
+        ? '当前标记没有可删除的一跳关系。'
+        : '删除当前标记的一跳关系，不删除标记或对象。';
+    deleteConnectedButton.dataset.editorTooltip = deleteConnectedButton.title;
+    deleteConnectedButton.style.padding = '4px 8px';
+    actions.appendChild(deleteConnectedButton);
+    const pickButton = createToolbarButton(doc, '视口拾取', 'view-overlay');
+    pickButton.type = 'button';
+    pickButton.dataset.editorMarkerRelationAction = 'pick-start';
+    pickButton.disabled = endpoints.length === 0 || relationTypes.length === 0;
+    pickButton.title = pickButton.disabled
+        ? '至少需要一个端点和一个关系类型。'
+        : '进入视口拾取关系端点模式。';
+    pickButton.dataset.editorTooltip = pickButton.title;
+    pickButton.style.padding = '4px 8px';
+    actions.appendChild(pickButton);
+    if (panel.relationPick?.active) {
+        const cancelPickButton = createToolbarButton(doc, '取消拾取', 'discard');
+        cancelPickButton.type = 'button';
+        cancelPickButton.dataset.editorMarkerRelationAction = 'pick-cancel';
+        cancelPickButton.title = '退出关系端点拾取。';
+        cancelPickButton.dataset.editorTooltip = cancelPickButton.title;
+        cancelPickButton.style.padding = '4px 8px';
+        actions.appendChild(cancelPickButton);
+    }
+    const button = createToolbarButton(doc, '创建关系', 'hierarchy');
+    button.type = 'button';
+    button.dataset.editorMarkerRelationAction = 'create';
+    button.disabled = endpoints.length < 2 || relationTypes.length === 0;
+    button.title = button.disabled
+        ? '至少需要两个端点和一个关系类型。'
+        : '创建 marker 关系';
+    button.dataset.editorTooltip = button.title;
+    button.style.padding = '4px 8px';
+    actions.appendChild(button);
+    block.appendChild(actions);
+    return block;
+}
+function createMarkerRelationVisibilityHint(doc, text) {
+    const hint = doc.createElement('div');
+    hint.textContent = text;
+    hint.style.cssText = [
+        'color:var(--fps-editor-warn)',
+        'border:1px solid rgba(251, 191, 36, 0.45)',
+        'border-radius:6px',
+        'background:rgba(251, 191, 36, 0.10)',
+        'padding:6px 8px',
+        'font-size:11px',
+        'font-weight:800',
+        'line-height:1.35',
+    ].join(';');
+    return hint;
+}
+function createMarkerRelationPickStatus(doc, panel) {
+    const relationPick = panel.relationPick;
+    const status = doc.createElement('div');
+    const tone = relationPick?.statusTone ?? 'success';
+    const color = tone === 'warning'
+        ? 'var(--fps-editor-warn)'
+        : tone === 'error'
+            ? 'var(--fps-editor-danger-text)'
+            : tone === 'success'
+                ? 'var(--fps-editor-success)'
+                : 'var(--fps-editor-muted)';
+    status.textContent = relationPick?.status
+        ?? (relationPick?.from
+            ? '正在拾取关系终点。'
+            : '正在拾取关系起点。');
+    status.style.cssText = [
+        `color:${color}`,
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:6px',
+        'background:rgba(42, 125, 255, 0.10)',
+        'padding:6px 8px',
+        'font-size:11px',
+        'font-weight:800',
+        'line-height:1.35',
+    ].join(';');
+    return status;
+}
+function createMarkerRelationListBlock(doc, relations) {
+    const block = createListItemBlock(doc);
+    block.style.cssText = [
+        block.style.cssText,
+        'display:flex',
+        'flex-direction:column',
+        'gap:7px',
+    ].filter(Boolean).join(';');
+    const header = createMarkerPanelSectionHeader(doc, '关系列表');
+    header.appendChild(createBadge(doc, `${relations.length}`, { compact: true, icon: 'hierarchy' }));
+    block.appendChild(header);
+    if (relations.length === 0) {
+        block.appendChild(createEmptyState(doc, '还没有关系。'));
+        return block;
+    }
+    const list = doc.createElement('div');
+    list.style.cssText = 'display:flex;flex-direction:column;gap:6px';
+    const sortedRelations = [...relations].sort((left, right) => {
+        if (left.selected !== right.selected)
+            return left.selected ? -1 : 1;
+        return left.typeLabel.localeCompare(right.typeLabel) || left.id.localeCompare(right.id);
+    });
+    for (const relation of sortedRelations)
+        list.appendChild(createMarkerRelationRow(doc, relation));
+    block.appendChild(list);
+    return block;
+}
+function createMarkerRelationRow(doc, relation) {
+    const row = doc.createElement('div');
+    row.dataset.editorMarkerRelationRow = relation.id;
+    row.dataset.editorMarkerRelationAction = 'select';
+    row.tabIndex = 0;
+    row.style.cssText = [
+        `border:1px solid ${relation.active ? 'var(--fps-editor-accent-strong)' : 'var(--fps-editor-border)'}`,
+        'border-radius:6px',
+        `background:${relation.active ? 'rgba(42, 125, 255, 0.16)' : 'var(--fps-editor-surface-subtle)'}`,
+        'padding:7px',
+        'display:flex',
+        'flex-direction:column',
+        'gap:6px',
+        'cursor:pointer',
+        relation.selected ? 'box-shadow:inset 3px 0 0 var(--fps-editor-accent)' : '',
+        relation.active ? 'outline:1px solid rgba(90, 170, 255, 0.35)' : '',
+    ].filter(Boolean).join(';');
+    row.title = '点击高亮这条关系线';
+    row.dataset.editorTooltip = row.title;
+    const header = doc.createElement('div');
+    header.style.cssText = 'display:flex;align-items:center;gap:6px;min-width:0';
+    const title = doc.createElement('div');
+    title.textContent = relation.typeLabel;
+    title.style.cssText = 'flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fps-editor-text-strong);font-size:12px;font-weight:900';
+    header.appendChild(title);
+    header.appendChild(createBadge(doc, relation.directed ? '有方向' : '无方向', { compact: true }));
+    if (relation.selected)
+        header.appendChild(createBadge(doc, '一跳', { compact: true, tone: 'success' }));
+    if (relation.active)
+        header.appendChild(createBadge(doc, '高亮', { compact: true, tone: 'success' }));
+    row.appendChild(header);
+    const body = doc.createElement('div');
+    body.style.cssText = 'display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;font-size:11px;font-weight:800';
+    body.appendChild(createMarkerRelationEndpointPill(doc, relation.from));
+    const arrow = doc.createElement('div');
+    arrow.textContent = relation.directed ? '->' : '--';
+    arrow.style.cssText = 'color:var(--fps-editor-muted);font-family:var(--fps-editor-mono-font);font-weight:900';
+    body.appendChild(arrow);
+    body.appendChild(createMarkerRelationEndpointPill(doc, relation.to));
+    row.appendChild(body);
+    if (relation.status) {
+        const status = doc.createElement('div');
+        status.textContent = relation.status;
+        status.style.cssText = [
+            `color:${relation.statusTone === 'warning' ? 'var(--fps-editor-warn)' : 'var(--fps-editor-danger-text)'}`,
+            'font-size:11px',
+            'font-weight:800',
+            'line-height:1.35',
+        ].join(';');
+        row.appendChild(status);
+    }
+    const actions = doc.createElement('div');
+    actions.style.cssText = 'display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap';
+    const reverseButton = createToolbarButton(doc, '反转', 'rotate');
+    reverseButton.type = 'button';
+    reverseButton.dataset.editorMarkerRelationAction = 'reverse';
+    reverseButton.style.padding = '4px 8px';
+    reverseButton.title = '交换关系起点和终点。';
+    reverseButton.dataset.editorTooltip = reverseButton.title;
+    actions.appendChild(reverseButton);
+    const deleteButton = createToolbarButton(doc, '删除', 'discard');
+    deleteButton.type = 'button';
+    deleteButton.dataset.editorMarkerRelationAction = 'delete';
+    deleteButton.style.padding = '4px 8px';
+    actions.appendChild(deleteButton);
+    row.appendChild(actions);
+    return row;
+}
+function createMarkerRelationEndpointPill(doc, endpoint) {
+    const pill = doc.createElement('div');
+    const kindLabel = endpoint.kind === 'marker'
+        ? '标记'
+        : endpoint.kind === 'scene-object'
+            ? '对象'
+            : endpoint.kind;
+    const hidden = endpoint.visibility === 'hidden';
+    const label = `${kindLabel} · ${endpoint.label || endpoint.id}${hidden ? ' · 已隐藏' : ''}`;
+    pill.textContent = label;
+    pill.title = endpoint.status ? `${label} · ${endpoint.status}` : label;
+    pill.dataset.editorTooltip = pill.title;
+    pill.style.cssText = [
+        'min-width:0',
+        'overflow:hidden',
+        'text-overflow:ellipsis',
+        'white-space:nowrap',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:999px',
+        'padding:3px 6px',
+        `color:${endpoint.disabled ? 'var(--fps-editor-warn)' : hidden ? 'var(--fps-editor-muted)' : 'var(--fps-editor-text)'}`,
+        `background:${hidden ? 'var(--fps-editor-surface-subtle)' : 'var(--fps-editor-surface)'}`,
+        hidden ? 'opacity:0.72' : '',
+    ].join(';');
+    return pill;
+}
+function createMarkerRelationEndpointSelect(doc, field, endpoints, preferredMarkerId) {
+    const select = doc.createElement('select');
+    select.dataset.editorMarkerRelationField = field;
+    select.style.cssText = createInspectorInputStyle();
+    for (const endpoint of endpoints) {
+        const option = doc.createElement('option');
+        option.value = encodeMarkerRelationEndpointValue(endpoint.kind, endpoint.id);
+        option.textContent = formatMarkerRelationEndpointOptionLabel(endpoint);
+        option.dataset.editorMarkerRelationEndpointKind = endpoint.kind;
+        option.dataset.editorMarkerRelationEndpointId = endpoint.id;
+        option.disabled = endpoint.disabled === true;
+        if (preferredMarkerId && endpoint.kind === 'marker' && endpoint.id === preferredMarkerId)
+            option.selected = true;
+        select.appendChild(option);
+    }
+    select.disabled = endpoints.length === 0;
+    return select;
+}
+function createMarkerRelationTypeSelect(doc, relationTypes) {
+    const select = doc.createElement('select');
+    select.dataset.editorMarkerRelationField = 'type';
+    select.style.cssText = createInspectorInputStyle();
+    for (const relationType of relationTypes) {
+        const option = doc.createElement('option');
+        option.value = relationType.type;
+        option.textContent = relationType.label || relationType.type;
+        option.dataset.editorMarkerRelationDirected = String(relationType.directed ?? true);
+        if (relationType.description)
+            option.title = relationType.description;
+        select.appendChild(option);
+    }
+    select.disabled = relationTypes.length === 0;
+    return select;
+}
+function createMarkerRelationDirectionSelect(doc) {
+    const select = doc.createElement('select');
+    select.dataset.editorMarkerRelationField = 'directed';
+    select.style.cssText = createInspectorInputStyle();
+    for (const [value, label] of [
+        ['default', '按类型默认'],
+        ['true', '有方向'],
+        ['false', '无方向'],
+    ]) {
+        const option = doc.createElement('option');
+        option.value = value;
+        option.textContent = label;
+        select.appendChild(option);
+    }
+    return select;
+}
+function createMarkerPanelSectionHeader(doc, text) {
+    const header = doc.createElement('div');
+    header.style.cssText = 'display:flex;align-items:center;gap:6px;min-width:0;color:var(--fps-editor-text-strong);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:0';
+    const title = doc.createElement('div');
+    title.textContent = text;
+    title.style.cssText = 'flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    header.appendChild(title);
+    return header;
+}
+function formatMarkerRelationEndpointOptionLabel(endpoint) {
+    const kindLabel = endpoint.kind === 'marker'
+        ? '标记'
+        : endpoint.kind === 'scene-object'
+            ? '对象'
+            : endpoint.kind;
+    return `${kindLabel} · ${endpoint.label || endpoint.id}${endpoint.status ? ` · ${endpoint.status}` : ''}`;
+}
+function encodeMarkerRelationEndpointValue(kind, id) {
+    return `${kind}:${encodeURIComponent(id)}`;
+}
+function createMarkerTypeCreateBlock(doc) {
+    const block = createListItemBlock(doc);
+    block.dataset.editorMarkerTypeCreate = 'true';
+    block.style.cssText = [
+        block.style.cssText,
+        'display:flex',
+        'flex-direction:column',
+        'gap:7px',
+    ].filter(Boolean).join(';');
+    const header = doc.createElement('div');
+    header.textContent = 'New Marker Type';
+    header.style.cssText = 'color:var(--fps-editor-text-strong);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:0';
+    block.appendChild(header);
+    block.appendChild(createMarkerTypeFieldGrid(doc, {
+        prefix: 'create',
+        type: '',
+        label: '',
+        kind: 'region',
+        description: '',
+        typeReadOnly: false,
+    }));
+    const actions = doc.createElement('div');
+    actions.style.cssText = 'display:flex;justify-content:flex-end';
+    const button = createToolbarButton(doc, 'Create', 'object');
+    button.type = 'button';
+    button.dataset.editorMarkerTypeAction = 'create';
+    button.style.padding = '4px 8px';
+    actions.appendChild(button);
+    block.appendChild(actions);
+    return block;
+}
+function createMarkerTypeRow(doc, markerType) {
+    const block = createListItemBlock(doc);
+    block.dataset.editorMarkerTypeRow = markerType.type;
+    block.style.cssText = [
+        block.style.cssText,
+        'display:flex',
+        'flex-direction:column',
+        'gap:7px',
+    ].filter(Boolean).join(';');
+    const header = doc.createElement('div');
+    header.style.cssText = 'display:flex;align-items:center;gap:6px;min-width:0';
+    const title = doc.createElement('div');
+    title.textContent = markerType.type;
+    title.style.cssText = 'flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fps-editor-text-strong);font-size:12px;font-weight:900';
+    header.appendChild(title);
+    if (markerType.builtIn)
+        header.appendChild(createBadge(doc, 'BUILT IN', { compact: true, tone: 'warning' }));
+    if ((markerType.usedByCount ?? 0) > 0)
+        header.appendChild(createBadge(doc, `${markerType.usedByCount} used`, { compact: true }));
+    block.appendChild(header);
+    block.appendChild(createMarkerTypeFieldGrid(doc, {
+        prefix: 'row',
+        type: markerType.type,
+        label: markerType.label,
+        kind: markerType.kind ?? '',
+        description: markerType.description ?? '',
+        typeReadOnly: true,
+    }));
+    const actions = doc.createElement('div');
+    actions.style.cssText = 'display:flex;align-items:center;justify-content:flex-end;gap:6px';
+    const updateButton = createToolbarButton(doc, 'Update', 'save');
+    updateButton.type = 'button';
+    updateButton.dataset.editorMarkerTypeAction = 'update';
+    updateButton.style.padding = '4px 8px';
+    actions.appendChild(updateButton);
+    const deleteButton = createToolbarButton(doc, 'Delete', 'discard');
+    deleteButton.type = 'button';
+    deleteButton.dataset.editorMarkerTypeAction = 'delete';
+    deleteButton.disabled = markerType.deletable === false;
+    deleteButton.title = markerType.deletable === false
+        ? (markerType.builtIn ? 'Built-in marker types cannot be deleted.' : 'Marker types currently in use cannot be deleted.')
+        : 'Delete marker type';
+    deleteButton.dataset.editorTooltip = deleteButton.title;
+    deleteButton.style.padding = '4px 8px';
+    actions.appendChild(deleteButton);
+    block.appendChild(actions);
+    return block;
+}
+function createMarkerTypeFieldGrid(doc, input) {
+    const grid = doc.createElement('div');
+    grid.style.cssText = 'display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 8px;align-items:center';
+    grid.appendChild(createMarkerTypeFieldLabel(doc, 'Type'));
+    grid.appendChild(createMarkerTypeTextInput(doc, input.prefix, 'type', input.type, input.typeReadOnly));
+    grid.appendChild(createMarkerTypeFieldLabel(doc, 'Label'));
+    grid.appendChild(createMarkerTypeTextInput(doc, input.prefix, 'label', input.label, false));
+    grid.appendChild(createMarkerTypeFieldLabel(doc, 'Kind'));
+    grid.appendChild(createMarkerTypeTextInput(doc, input.prefix, 'kind', input.kind, false));
+    grid.appendChild(createMarkerTypeFieldLabel(doc, 'Description'));
+    grid.appendChild(createMarkerTypeTextarea(doc, input.prefix, 'description', input.description));
+    return grid;
+}
+function createMarkerTypeFieldLabel(doc, text) {
+    const label = doc.createElement('div');
+    label.textContent = text;
+    label.style.cssText = 'color:var(--fps-editor-muted);font-size:11px;font-weight:800';
+    return label;
+}
+function createMarkerTypeTextInput(doc, prefix, field, value, readOnly) {
+    const input = doc.createElement('input');
+    input.type = 'text';
+    input.value = value;
+    input.dataset.editorMarkerTypeField = field;
+    input.dataset.editorMarkerTypeFieldPrefix = prefix;
+    input.readOnly = readOnly;
+    input.style.cssText = [
+        createInspectorInputStyle(),
+        readOnly ? 'opacity:0.72' : '',
+    ].filter(Boolean).join(';');
+    return input;
+}
+function createMarkerTypeTextarea(doc, prefix, field, value) {
+    const input = doc.createElement('textarea');
+    input.value = value;
+    input.rows = 2;
+    input.dataset.editorMarkerTypeField = field;
+    input.dataset.editorMarkerTypeFieldPrefix = prefix;
+    input.style.cssText = [
+        createInspectorInputStyle(),
+        'height:auto',
+        'min-height:46px',
+        'resize:vertical',
+        'padding:6px',
+        'line-height:1.35',
+    ].join(';');
+    return input;
+}
 export function renderRenderingPanel(doc, panel, state) {
     clearElement(panel);
     configureLocalEditorDockPanelContent(panel);
@@ -926,8 +1433,17 @@ function renderAssetBrowserContent(doc, panel, state, variant = 'list', activeTa
 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 });
+    if (!preview) {
+        const kind = resolveLocalEditorBrowserAssetKind(asset);
+        const icon = kind === 'prefab'
+            ? 'prefab'
+            : kind === 'material'
+                ? 'material-slot'
+                : kind === 'texture'
+                    ? 'asset'
+                    : 'object';
+        return createLocalEditorIcon(doc, icon, { size: variant === 'grid' ? 18 : 16 });
+    }
     const frame = doc.createElement('div');
     frame.style.cssText = [
         `width:${size}px`,
@@ -1072,19 +1588,7 @@ function appendAssetBrowserTabs(doc, panel, state, activeTab) {
 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';
+    return assets.filter(asset => resolveLocalEditorAssetBrowserTab(asset) === tab);
 }
 function renderHistoryPanel(doc, panel, history) {
     configureLocalEditorDockPanelContent(panel);
@@ -1145,7 +1649,7 @@ export function renderInspectorPanel(doc, panel, state, filter = '', options = {
     const title = doc.createElement('h2');
     title.style.cssText = 'display:flex;align-items:center;gap:6px;font-size:13px;margin:-8px -8px 8px;padding:7px 8px;border-bottom:1px solid var(--fps-editor-divider);background:var(--fps-editor-chrome-dark);font-weight:800;color:var(--fps-editor-text-strong)';
     title.appendChild(createLocalEditorIcon(doc, 'inspector'));
-    title.appendChild(createHeadingLabel(doc, 'Inspector'));
+    title.appendChild(createHeadingLabel(doc, options.title ?? 'Inspector'));
     panel.appendChild(title);
     const search = createInspectorSearchInput(doc, filter);
     panel.appendChild(search);
@@ -1157,7 +1661,7 @@ export function renderInspectorPanel(doc, panel, state, filter = '', options = {
         : state.inspectorObject ?? (state.serializedObject ? createLegacyInspectorObject(state.serializedObject) : null);
     if (!inspectorObject) {
         const empty = doc.createElement('div');
-        empty.textContent = '请从层级树或 Scene View 中选择一个 GameObject。';
+        empty.textContent = options.emptyText ?? '请从层级树或 Scene View 中选择一个 GameObject 或 Marker。';
         empty.style.cssText = 'color:var(--fps-editor-muted);line-height:1.45';
         viewport.appendChild(empty);
         panel.appendChild(viewport);
@@ -1165,7 +1669,7 @@ export function renderInspectorPanel(doc, panel, state, filter = '', options = {
         return;
     }
     const controlRegistry = createLocalEditorBrowserInspectorControlRegistry(options.controls, options.controlConflict);
-    appendInspectorSummary(doc, viewport, inspectorObject, selectionCount);
+    appendInspectorSummary(doc, viewport, inspectorObject, selectionCount, options.summaryTitle);
     const visibleSections = filterInspectorSections(inspectorObject.sections.filter(section => section.placement !== 'summary'), filter);
     if (visibleSections.length === 0) {
         if (!filter.trim() && inspectorObject.sections.length === 0) {
@@ -1220,17 +1724,21 @@ function createInspectorSearchInput(doc, value) {
     ].join(';');
     return input;
 }
-function appendInspectorSummary(doc, panel, inspectorObject, selectionCount) {
+function appendInspectorSummary(doc, panel, inspectorObject, selectionCount, summaryTitle) {
     const block = createInspectorComponentBlock(doc);
     const header = doc.createElement('div');
     header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px';
     const title = doc.createElement('h3');
-    title.textContent = selectionCount > 1 ? 'Selection' : 'GameObject';
+    const targetKind = inspectorObject.selection.targetKind;
+    const markerLike = targetKind === 'marker' || targetKind === 'marker-graph';
+    title.textContent = summaryTitle ?? (selectionCount > 1
+        ? markerLike ? 'Markers' : 'Selection'
+        : targetKind === 'marker-graph' ? 'Marker Graph' : targetKind === 'marker' ? 'Marker' : 'GameObject');
     title.style.cssText = 'font-size:12px;margin:0;font-weight:900;color:var(--fps-editor-text-strong)';
     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, selectionCount > 1 ? 'Selected' : targetKind === 'marker' ? 'Label' : 'Name', inspectorObject.label ?? inspectorObject.activeId ?? inspectorObject.targetIds[0] ?? '无');
     appendReadOnlyRow(doc, block, 'Active ID', inspectorObject.activeId ?? '无');
     if (selectionCount > 1)
         appendReadOnlyRow(doc, block, 'Count', String(selectionCount));
@@ -1505,6 +2013,15 @@ function readInspectorControlOptionNumber(property, key) {
     const value = property.controlOptions?.[key];
     return typeof value === 'number' && Number.isFinite(value) ? value : 0;
 }
+function readInspectorControlOptionBoolean(property, key) {
+    return property.controlOptions?.[key] === true;
+}
+function readInspectorControlOptionRecord(property, key) {
+    const value = property.controlOptions?.[key];
+    return value && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : null;
+}
 function readInspectorAssetPickerPreview(property, key) {
     const value = property.controlOptions?.[key];
     return isLocalEditorBrowserAssetPreview(value) ? value : undefined;
@@ -1590,6 +2107,20 @@ const builtinInspectorControlRegistrations = [
         customControl: 'rendering-action-button',
         render: ({ doc, property }) => createInspectorRenderingActionButtonControl(doc, property),
     },
+    {
+        id: 'builtin.inspector-action-button',
+        order: 93,
+        control: 'custom',
+        customControl: 'inspector-action-button',
+        render: ({ doc, target, property }) => createInspectorActionButtonControl(doc, target, property),
+    },
+    {
+        id: 'builtin.marker-relation-editor',
+        order: 91,
+        control: 'custom',
+        customControl: 'marker-relation-editor',
+        render: ({ doc, property }) => createInspectorMarkerRelationEditorControl(doc, property),
+    },
     {
         id: 'builtin.asset-picker-card',
         order: 95,
@@ -1598,9 +2129,16 @@ const builtinInspectorControlRegistrations = [
         render: ({ doc, target, property, bindInput }) => createInspectorAssetPickerCardControl(doc, target, property, bindInput),
     },
     {
-        id: 'builtin.material-slot-list',
+        id: 'builtin.ground-decal-layout',
         order: 96,
         control: 'custom',
+        customControl: 'ground-decal-layout',
+        render: ({ doc, target, property, bindInput }) => createInspectorGroundDecalLayoutControl(doc, target, property, bindInput),
+    },
+    {
+        id: 'builtin.material-slot-list',
+        order: 97,
+        control: 'custom',
         customControl: 'material-slot-list',
         render: ({ doc, property }) => createInspectorMaterialSlotListControl(doc, property),
     },
@@ -1627,7 +2165,7 @@ function appendInspectorPropertyRow(doc, parent, inspectorObject, property, cont
     const control = renderInspectorControl(doc, controlRegistry, inspectorObject, property);
     const access = getInspectorPropertyAccess(property);
     const effect = getInspectorPropertyEffect(property);
-    if (property.customControl === 'material-slot-list') {
+    if (property.customControl === 'material-slot-list' || property.customControl === 'marker-relation-editor') {
         control.dataset.editorInspectorAccess = access;
         control.dataset.editorInspectorEffect = effect;
         control.title = createInspectorStatusTitle(access, effect, property.tooltip ?? property.disabledReason);
@@ -1710,6 +2248,8 @@ function localEditorBrowserInspectorControlSupports(registration, context) {
     return registration.supports?.(context) ?? true;
 }
 function normalizeInspectorRenderingActionProperty(property) {
+    if (property.customControl && property.customControl !== 'rendering-action-button')
+        return property;
     const actionId = readInspectorRenderingActionId(property);
     if (!actionId)
         return property;
@@ -1739,6 +2279,8 @@ function readInspectorRenderingActionId(property) {
 function isInspectorCustomControlFallback(customControl, property) {
     if (customControl !== 'rendering-action-button')
         return false;
+    if (property.customControl)
+        return false;
     return !!readInspectorRenderingActionId(property);
 }
 function appendInspectorVectorInputs(doc, parent, inspectorObject, label, properties, layout = 'block', options = {}) {
@@ -1760,10 +2302,13 @@ function appendInspectorVectorInputs(doc, parent, inspectorObject, label, proper
     actions.style.cssText = 'display:inline-flex;align-items:center;gap:5px;flex:0 0 auto';
     labelElement.appendChild(actions);
     const groupPath = resolveLocalEditorBrowserInspectorVectorGroupPathFromProperties(properties);
-    const locked = !!groupPath && options.lockedVectorGroups?.has(groupPath) === true;
+    const forceLocked = properties.some(property => readInspectorControlOptionBoolean(property, 'forceVectorLock'));
+    const locked = forceLocked || (!!groupPath && options.lockedVectorGroups?.has(groupPath) === true);
     if (groupPath && access === 'editable') {
-        const lockButton = createInspectorVectorHeaderButton(doc, locked ? `Unlock ${label} axes` : `Lock ${label} axes`, locked);
-        lockButton.dataset.editorInspectorVectorLock = groupPath;
+        const lockButton = createInspectorVectorHeaderButton(doc, forceLocked ? `${label} axes are locked` : locked ? `Unlock ${label} axes` : `Lock ${label} axes`, locked);
+        if (!forceLocked)
+            lockButton.dataset.editorInspectorVectorLock = groupPath;
+        lockButton.disabled = forceLocked;
         lockButton.dataset.editorInspectorVectorLockState = locked ? 'locked' : 'unlocked';
         lockButton.setAttribute('aria-pressed', locked ? 'true' : 'false');
         lockButton.appendChild(createLocalEditorIcon(doc, 'lock', { size: 12, strokeWidth: 2.2 }));
@@ -2001,7 +2546,8 @@ function createInspectorTextControl(doc, target, property) {
 function createInspectorBooleanControl(doc, target, property) {
     const input = createInspectorInputBase(doc, target, property);
     input.type = 'checkbox';
-    input.checked = property.mixed ? false : property.value === true;
+    input.checked = property.value === true;
+    input.indeterminate = property.mixed === true;
     input.style.cssText = [
         'width:16px',
         'height:16px',
@@ -2069,7 +2615,11 @@ function createInspectorColorControl(doc, target, property) {
 }
 function createInspectorOpenRightDockTabControl(doc, property) {
     const targetTabOption = readInspectorControlOptionString(property, 'targetTab');
-    const targetTab = targetTabOption === 'inspector' ? 'inspector' : 'rendering';
+    const targetTab = targetTabOption === 'inspector'
+        ? 'inspector'
+        : targetTabOption === 'markers'
+            ? 'markers'
+            : 'rendering';
     const label = readInspectorControlOptionString(property, 'label')
         || (typeof property.value === 'string' ? property.value : property.label);
     const button = createToolbarButton(doc, label, RIGHT_DOCK_TAB_ICONS[targetTab]);
@@ -2110,6 +2660,56 @@ function createInspectorRenderingActionButtonControl(doc, property) {
     ].filter(Boolean).join(';');
     return button;
 }
+function createInspectorActionButtonControl(doc, target, property) {
+    const actionId = readInspectorControlOptionString(property, 'actionId')
+        || (typeof property.value === 'string' ? property.value : '');
+    const iconName = readInspectorControlOptionString(property, 'icon');
+    const icon = isLocalEditorIconName(iconName) ? iconName : 'asset';
+    const label = readInspectorControlOptionString(property, 'label')
+        || (typeof property.value === 'string' ? property.value : property.label);
+    const button = createToolbarButton(doc, label, icon);
+    button.type = 'button';
+    if (actionId)
+        button.dataset.editorInspectorAction = actionId;
+    button.dataset.editorInspectorActionTargetId = target.activeId ?? '';
+    button.dataset.editorInspectorActionTargetIds = JSON.stringify(target.targetIds);
+    button.dataset.editorInspectorActionPath = property.path;
+    const params = readInspectorControlOptionRecord(property, 'params');
+    if (params)
+        button.dataset.editorInspectorActionParams = JSON.stringify(params);
+    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 createInspectorMarkerRelationEditorControl(doc, property) {
+    const panel = readInspectorMarkerRelationPanelState(property);
+    const wrapper = doc.createElement('div');
+    wrapper.style.cssText = 'display:flex;flex-direction:column;gap:8px;width:100%;min-width:0';
+    if (!panel) {
+        wrapper.appendChild(createEmptyState(doc, '当前 marker 没有可编辑的关系数据。'));
+        return wrapper;
+    }
+    wrapper.appendChild(createMarkerRelationCreateBlock(doc, panel));
+    wrapper.appendChild(createMarkerRelationListBlock(doc, (panel.relations ?? []).filter(relation => relation.selected)));
+    return wrapper;
+}
+function readInspectorMarkerRelationPanelState(property) {
+    const value = property.controlOptions?.markerPanel ?? property.value;
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const panel = value;
+    return Array.isArray(panel.markerTypes) ? panel : null;
+}
 function createInspectorMaterialSlotListControl(doc, property) {
     const wrapper = doc.createElement('div');
     wrapper.dataset.editorInspectorMaterialSlotList = 'true';
@@ -2277,6 +2877,846 @@ function readStringField(record, key) {
     const value = record[key];
     return typeof value === 'string' ? value : '';
 }
+const inspectorGroundDecalLayoutImageCache = new Map();
+const INSPECTOR_GROUND_DECAL_LAYOUT_MIN_SIZE = 0.02;
+const INSPECTOR_GROUND_DECAL_LAYOUT_MAX_SIZE = 1.5;
+function createInspectorGroundDecalLayoutControl(doc, _target, property, bindInput) {
+    const editable = isInspectorPropertyEditable(property);
+    const layers = readInspectorGroundDecalLayoutLayers(property);
+    const composite = isInspectorGroundDecalLayoutCompositeValue(property.value);
+    const textureSize = readInspectorGroundDecalLayoutTextureSize(property.value);
+    const mask = readInspectorGroundDecalLayoutMask(property.value);
+    const aspectRatio = Math.max(0.2, Math.min(4, readInspectorControlOptionNumber(property, 'aspectRatio') || 1));
+    const surfaceMaxWidth = Math.max(96, Math.round(220 * aspectRatio));
+    const wrapper = doc.createElement('div');
+    wrapper.dataset.editorInspectorGroundDecalLayout = 'true';
+    wrapper.style.cssText = [
+        'display:flex',
+        'flex-direction:column',
+        'gap:8px',
+        'min-width:0',
+    ].join(';');
+    const input = doc.createElement('input');
+    input.type = 'hidden';
+    input.value = serializeInspectorGroundDecalLayoutValue(layers, composite);
+    bindInput(input, { source: 'custom' });
+    input.dataset.serializedJsonValue = 'true';
+    wrapper.appendChild(input);
+    const surface = doc.createElement('div');
+    surface.dataset.editorInspectorGroundDecalLayoutSurface = 'true';
+    surface.style.cssText = [
+        'position:relative',
+        `width:min(100%, ${surfaceMaxWidth}px)`,
+        'max-width:100%',
+        'align-self:center',
+        `aspect-ratio:${aspectRatio} / 1`,
+        'border:1px solid var(--fps-editor-editable-border)',
+        'border-radius:4px',
+        'background:linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px), var(--fps-editor-field)',
+        'background-size:20px 20px',
+        'overflow:hidden',
+        editable ? 'cursor:grab' : 'cursor:not-allowed',
+    ].join(';');
+    wrapper.appendChild(surface);
+    const previewCanvas = doc.createElement('canvas');
+    previewCanvas.width = textureSize.width;
+    previewCanvas.height = textureSize.height;
+    previewCanvas.dataset.editorInspectorGroundDecalLayoutPreview = 'true';
+    previewCanvas.style.cssText = [
+        'position:absolute',
+        'inset:0',
+        'width:100%',
+        'height:100%',
+        'pointer-events:none',
+    ].join(';');
+    surface.appendChild(previewCanvas);
+    const guide = doc.createElement('div');
+    guide.style.cssText = [
+        'position:absolute',
+        'inset:8px',
+        'border:1px solid var(--fps-editor-border-soft)',
+        'border-radius:8px',
+        'pointer-events:none',
+    ].join(';');
+    surface.appendChild(guide);
+    const fields = doc.createElement('div');
+    fields.style.cssText = [
+        'display:flex',
+        'flex-direction:column',
+        'gap:6px',
+        'min-width:0',
+    ].join(';');
+    wrapper.appendChild(fields);
+    const boxByLayer = new Map();
+    const fieldInputsByLayer = new Map();
+    const editableLayers = layers.filter(isInspectorGroundDecalLayoutLayerEditable);
+    const scaleLockedByLayer = new Map();
+    for (const layer of editableLayers) {
+        scaleLockedByLayer.set(layer, isInspectorGroundDecalLayoutUniformScaleLayer(layer));
+    }
+    let previewRenderVersion = 0;
+    const renderPreview = () => {
+        const version = ++previewRenderVersion;
+        void renderInspectorGroundDecalLayoutPreview(previewCanvas, layers, textureSize, mask, () => version === previewRenderVersion);
+    };
+    const updateLayerRect = (layer, rect) => {
+        layer.rect = normalizeInspectorGroundDecalLayoutRect(rect);
+        const layerFieldInputs = fieldInputsByLayer.get(layer);
+        if (layerFieldInputs)
+            updateInspectorGroundDecalLayoutFieldInputs(layerFieldInputs, layer.rect);
+        const layerBox = boxByLayer.get(layer);
+        if (layerBox)
+            renderInspectorGroundDecalLayoutBox(layerBox, layer.rect);
+        renderPreview();
+    };
+    const commitLayout = () => {
+        commitInspectorGroundDecalLayoutValue(input, layers, fieldInputsByLayer, composite);
+    };
+    let dragActive = false;
+    const beginDrag = (event, layer, box, mode) => {
+        if (!editable)
+            return;
+        if ('button' in event && event.button !== 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (dragActive)
+            return;
+        dragActive = true;
+        const bounds = surface.getBoundingClientRect();
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const start = layer.rect;
+        const captureTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : box;
+        const pointerId = 'pointerId' in event ? event.pointerId : null;
+        if (pointerId !== null) {
+            try {
+                captureTarget.setPointerCapture(pointerId);
+            }
+            catch {
+                // Capture can fail if the browser has already ended the pointer stream.
+            }
+        }
+        surface.style.cursor = mode === 'move' ? 'grabbing' : 'nwse-resize';
+        box.style.cursor = surface.style.cursor;
+        const move = (moveEvent) => {
+            moveEvent.preventDefault();
+            const dx = bounds.width > 0 ? (moveEvent.clientX - startX) / bounds.width : 0;
+            const dy = bounds.height > 0 ? (moveEvent.clientY - startY) / bounds.height : 0;
+            const nextRect = mode === 'move'
+                ? normalizeInspectorGroundDecalLayoutRect({
+                    ...start,
+                    x: start.x + dx,
+                    z: start.z - dy,
+                })
+                : resizeInspectorGroundDecalLayoutRect(layer, start, dx, dy, scaleLockedByLayer.get(layer) === true);
+            updateLayerRect(layer, nextRect);
+        };
+        const end = () => {
+            doc.defaultView?.removeEventListener('pointermove', move);
+            doc.defaultView?.removeEventListener('mousemove', move);
+            doc.defaultView?.removeEventListener('pointerup', end);
+            doc.defaultView?.removeEventListener('mouseup', end);
+            if (pointerId !== null) {
+                try {
+                    captureTarget.releasePointerCapture(pointerId);
+                }
+                catch {
+                    // Ignore capture release errors after pointer cancellation.
+                }
+            }
+            dragActive = false;
+            surface.style.cursor = editable ? 'grab' : 'not-allowed';
+            box.style.cursor = editable ? 'grab' : 'not-allowed';
+            commitLayout();
+        };
+        doc.defaultView?.addEventListener('pointermove', move);
+        doc.defaultView?.addEventListener('pointerup', end, { once: true });
+        doc.defaultView?.addEventListener('mousemove', move);
+        doc.defaultView?.addEventListener('mouseup', end, { once: true });
+    };
+    for (const layer of editableLayers) {
+        const box = createInspectorGroundDecalLayoutBox(doc, layer, editable);
+        surface.appendChild(box);
+        boxByLayer.set(layer, box);
+        const handle = box.querySelector('[data-editor-inspector-ground-decal-layout-resize]');
+        box.addEventListener('pointerdown', (event) => {
+            const target = event.target instanceof HTMLElement ? event.target : null;
+            if (target?.closest('[data-editor-inspector-ground-decal-layout-resize]'))
+                return;
+            beginDrag(event, layer, box, 'move');
+        });
+        box.addEventListener('mousedown', (event) => {
+            const target = event.target instanceof HTMLElement ? event.target : null;
+            if (target?.closest('[data-editor-inspector-ground-decal-layout-resize]'))
+                return;
+            beginDrag(event, layer, box, 'move');
+        });
+        handle?.addEventListener('pointerdown', (event) => beginDrag(event, layer, box, 'resize'));
+        handle?.addEventListener('mousedown', (event) => beginDrag(event, layer, box, 'resize'));
+        let layerInputs;
+        layerInputs = createInspectorGroundDecalLayoutLayerFields(doc, fields, layer, editable, (changedKey) => {
+            const next = readRectFromLayoutFieldInputs(layerInputs, layer.rect, layer, changedKey, scaleLockedByLayer.get(layer) === true);
+            if (!next)
+                return;
+            updateLayerRect(layer, next);
+        }, (changedKey) => {
+            const next = readRectFromLayoutFieldInputs(layerInputs, layer.rect, layer, changedKey, scaleLockedByLayer.get(layer) === true);
+            if (!next)
+                return;
+            updateLayerRect(layer, next);
+            commitLayout();
+        }, isInspectorGroundDecalLayoutUniformScaleLayer(layer) ? {
+            locked: scaleLockedByLayer.get(layer) === true,
+            onChange: (locked) => {
+                scaleLockedByLayer.set(layer, locked);
+                if (!locked)
+                    return;
+                updateLayerRect(layer, normalizeInspectorGroundDecalLayoutUniformRect(layer, layer.rect, 'width'));
+                commitLayout();
+            },
+        } : undefined);
+        fieldInputsByLayer.set(layer, layerInputs);
+        renderInspectorGroundDecalLayoutBox(box, layer.rect);
+    }
+    renderPreview();
+    return wrapper;
+}
+function readInspectorGroundDecalLayoutLayers(property) {
+    if (isInspectorGroundDecalLayoutCompositeValue(property.value)) {
+        const layers = property.value.layers
+            .map((layer, fallbackIndex) => readInspectorGroundDecalLayoutLayer(layer, fallbackIndex))
+            .filter((layer) => !!layer);
+        if (layers.length > 0)
+            return layers;
+    }
+    const label = readInspectorControlOptionString(property, 'layerLabel') || property.label || 'Ground decal layer';
+    return [{
+            index: 0,
+            id: 'layer_0',
+            role: 'layer',
+            kind: 'unknown',
+            label,
+            rect: readInspectorGroundDecalLayoutRect(property.value),
+            enabled: true,
+            editable: true,
+            zOrder: 0,
+        }];
+}
+function isInspectorGroundDecalLayoutCompositeValue(value) {
+    return isRecord(value) && Array.isArray(value.layers);
+}
+function readInspectorGroundDecalLayoutLayer(value, fallbackIndex) {
+    if (!isRecord(value))
+        return null;
+    const index = Number.isInteger(value.index) && typeof value.index === 'number' && value.index >= 0
+        ? value.index
+        : fallbackIndex;
+    const label = readStringField(value, 'label') || `Layer ${index + 1}`;
+    return {
+        index,
+        id: readStringField(value, 'id') || `layer_${index}`,
+        role: readStringField(value, 'role') || 'layer',
+        kind: readStringField(value, 'kind') || 'unknown',
+        label,
+        rect: readInspectorGroundDecalLayoutRect(value.rect),
+        enabled: readOptionalBooleanField(value, 'enabled') ?? true,
+        editable: readOptionalBooleanField(value, 'editable') ?? true,
+        zOrder: readOptionalNumberField(value, 'zOrder') ?? index,
+        opacity: readOptionalNumberField(value, 'opacity') ?? undefined,
+        scaleMode: readInspectorGroundDecalLayoutScaleMode(value.scaleMode),
+        aspectRatio: readInspectorGroundDecalLayoutAspectRatio(value.aspectRatio),
+        text: readStringField(value, 'text') || undefined,
+        preview: readInspectorGroundDecalLayoutPreview(value.preview),
+    };
+}
+function readInspectorGroundDecalLayoutScaleMode(value) {
+    return value === 'uniform' || value === 'free' ? value : undefined;
+}
+function readInspectorGroundDecalLayoutAspectRatio(value) {
+    return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : undefined;
+}
+function readInspectorGroundDecalLayoutPreview(value) {
+    if (!isRecord(value))
+        return undefined;
+    if (value.kind === 'image') {
+        const url = readStringField(value, 'url');
+        if (!url)
+            return undefined;
+        return {
+            kind: 'image',
+            url,
+            alt: readStringField(value, 'alt') || undefined,
+            tint: readInspectorGroundDecalLayoutColor(value.tint),
+        };
+    }
+    if (value.kind === 'text') {
+        return {
+            kind: 'text',
+            text: readStringField(value, 'text'),
+            fontFamily: readStringField(value, 'fontFamily') || undefined,
+            fontSize: readOptionalNumberField(value, 'fontSize') ?? undefined,
+            fontWeight: readStringField(value, 'fontWeight') || undefined,
+            color: readInspectorGroundDecalLayoutColor(value.color),
+            strokeColor: readInspectorGroundDecalLayoutColor(value.strokeColor),
+            strokeWidth: readOptionalNumberField(value, 'strokeWidth') ?? undefined,
+            align: readInspectorGroundDecalLayoutTextAlign(value.align),
+            baseline: readInspectorGroundDecalLayoutTextBaseline(value.baseline),
+        };
+    }
+    if (value.kind === 'color') {
+        const color = readInspectorGroundDecalLayoutColor(value.color);
+        return color ? { kind: 'color', color } : undefined;
+    }
+    if (value.kind === 'progress') {
+        const color = readInspectorGroundDecalLayoutColor(value.color);
+        if (!color)
+            return undefined;
+        return {
+            kind: 'progress',
+            value: readOptionalNumberField(value, 'value') ?? 0,
+            direction: readInspectorGroundDecalLayoutProgressDirection(value.direction),
+            color,
+        };
+    }
+    return undefined;
+}
+function readInspectorGroundDecalLayoutTextureSize(value) {
+    if (!isRecord(value) || !isRecord(value.textureSize))
+        return { width: 512, height: 512 };
+    const width = readOptionalNumberField(value.textureSize, 'width') ?? 512;
+    const height = readOptionalNumberField(value.textureSize, 'height') ?? 512;
+    return {
+        width: Math.max(1, Math.round(width)),
+        height: Math.max(1, Math.round(height)),
+    };
+}
+function readInspectorGroundDecalLayoutMask(value) {
+    if (!isRecord(value) || !isRecord(value.mask))
+        return undefined;
+    return {
+        enabled: readOptionalBooleanField(value.mask, 'enabled') ?? true,
+        source: readStringField(value.mask, 'source') || undefined,
+        cornerRadius: readOptionalNumberField(value.mask, 'cornerRadius') ?? undefined,
+        padding: readOptionalNumberField(value.mask, 'padding') ?? undefined,
+    };
+}
+function readInspectorGroundDecalLayoutColor(value) {
+    if (!isRecord(value))
+        return undefined;
+    const r = readOptionalNumberField(value, 'r');
+    const g = readOptionalNumberField(value, 'g');
+    const b = readOptionalNumberField(value, 'b');
+    if (r === null || g === null || b === null)
+        return undefined;
+    const a = readOptionalNumberField(value, 'a');
+    return {
+        r,
+        g,
+        b,
+        ...(a === null ? {} : { a }),
+    };
+}
+function readOptionalNumberField(record, key) {
+    const value = record[key];
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function readOptionalBooleanField(record, key) {
+    const value = record[key];
+    return typeof value === 'boolean' ? value : null;
+}
+function readInspectorGroundDecalLayoutTextAlign(value) {
+    return value === 'left' || value === 'center' || value === 'right' ? value : undefined;
+}
+function readInspectorGroundDecalLayoutTextBaseline(value) {
+    return value === 'top' || value === 'middle' || value === 'bottom' ? value : undefined;
+}
+function readInspectorGroundDecalLayoutProgressDirection(value) {
+    return value === 'leftToRight' || value === 'rightToLeft' || value === 'bottomToTop' || value === 'topToBottom'
+        ? value
+        : undefined;
+}
+function isInspectorGroundDecalLayoutLayerEditable(layer) {
+    return layer.enabled && layer.editable;
+}
+function isInspectorGroundDecalLayoutUniformScaleLayer(layer) {
+    return layer.scaleMode === 'uniform';
+}
+function createInspectorGroundDecalLayoutBox(doc, layer, editable) {
+    const box = doc.createElement('div');
+    box.dataset.editorInspectorGroundDecalLayoutBox = 'true';
+    box.dataset.editorInspectorGroundDecalLayoutLayer = layer.id;
+    box.title = layer.label;
+    box.style.cssText = [
+        'position:absolute',
+        'box-sizing:border-box',
+        'border:2px solid var(--fps-editor-accent-strong)',
+        'background:rgba(65,145,255,0.08)',
+        'box-shadow:inset 0 0 0 1px rgba(0,0,0,0.32)',
+        'border-radius:3px',
+        'overflow:visible',
+        editable ? 'cursor:grab' : 'cursor:not-allowed',
+        'touch-action:none',
+    ].join(';');
+    const handle = doc.createElement('button');
+    handle.type = 'button';
+    handle.dataset.editorInspectorGroundDecalLayoutResize = 'true';
+    handle.disabled = !editable;
+    handle.title = `Resize ${layer.label}`;
+    handle.style.cssText = [
+        'position:absolute',
+        'right:0',
+        'bottom:0',
+        'width:10px',
+        'height:10px',
+        'box-sizing:border-box',
+        'padding:0',
+        'border:1px solid var(--fps-editor-accent-strong)',
+        'border-radius:3px',
+        'background:var(--fps-editor-panel)',
+        editable ? 'cursor:nwse-resize' : 'cursor:not-allowed',
+        'touch-action:none',
+    ].join(';');
+    box.appendChild(handle);
+    return box;
+}
+function createInspectorGroundDecalLayoutLayerFields(doc, parent, layer, editable, onInput, onCommit, scaleLock) {
+    const row = doc.createElement('div');
+    row.style.cssText = [
+        'display:grid',
+        'grid-template-columns:minmax(52px,0.9fr) repeat(4,minmax(0,1fr))',
+        'gap:6px',
+        'align-items:end',
+        'min-width:0',
+    ].join(';');
+    parent.appendChild(row);
+    const name = doc.createElement('div');
+    name.title = layer.label;
+    name.style.cssText = [
+        'min-width:0',
+        'display:flex',
+        'align-items:center',
+        'gap:4px',
+        'color:var(--fps-editor-muted)',
+        'font-size:10px',
+        'font-weight:900',
+        'line-height:24px',
+    ].join(';');
+    const nameText = doc.createElement('span');
+    nameText.textContent = layer.label;
+    nameText.style.cssText = 'min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    name.appendChild(nameText);
+    if (scaleLock) {
+        let locked = scaleLock.locked;
+        const lockButton = createInspectorVectorHeaderButton(doc, '', locked);
+        lockButton.style.width = '20px';
+        lockButton.style.height = '20px';
+        lockButton.style.flex = '0 0 auto';
+        lockButton.disabled = !editable;
+        lockButton.appendChild(createLocalEditorIcon(doc, 'lock', { size: 11, strokeWidth: 2.2 }));
+        const applyLockState = () => {
+            updateInspectorGroundDecalLayoutScaleLockButton(lockButton, layer, locked);
+        };
+        lockButton.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!editable)
+                return;
+            locked = !locked;
+            applyLockState();
+            scaleLock.onChange(locked);
+        });
+        applyLockState();
+        name.appendChild(lockButton);
+    }
+    row.appendChild(name);
+    const inputs = new Map();
+    for (const key of ['x', 'z', 'width', 'depth']) {
+        const fieldLabel = key === 'width' ? 'W' : key === 'depth' ? 'D' : key.toUpperCase();
+        const accessibleLabel = `${layer.label} ${key === 'width' ? 'width' : key === 'depth' ? 'depth' : key}`;
+        const field = doc.createElement('label');
+        field.style.cssText = [
+            'display:flex',
+            'flex-direction:column',
+            'gap:3px',
+            'min-width:0',
+            'color:var(--fps-editor-muted)',
+            'font-size:10px',
+            'font-weight:900',
+            'text-transform:uppercase',
+            'letter-spacing:0',
+        ].join(';');
+        field.textContent = fieldLabel;
+        const fieldInput = doc.createElement('input');
+        fieldInput.type = 'text';
+        fieldInput.inputMode = 'decimal';
+        fieldInput.setAttribute('aria-label', accessibleLabel);
+        fieldInput.title = accessibleLabel;
+        fieldInput.disabled = !editable;
+        fieldInput.value = formatLocalEditorBrowserInspectorNumberValue(layer.rect[key]);
+        fieldInput.style.cssText = createInspectorInputStyle();
+        fieldInput.addEventListener('input', () => onInput(key));
+        fieldInput.addEventListener('change', () => onCommit(key));
+        fieldInput.addEventListener('keydown', (event) => {
+            if (event.key !== 'Enter' || event.isComposing)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            onCommit(key);
+        });
+        field.appendChild(fieldInput);
+        row.appendChild(field);
+        inputs.set(key, fieldInput);
+    }
+    return inputs;
+}
+function updateInspectorGroundDecalLayoutScaleLockButton(button, layer, locked) {
+    const title = locked ? `Unlock ${layer.label} size ratio` : `Lock ${layer.label} size ratio`;
+    button.title = title;
+    button.dataset.editorTooltip = title;
+    button.dataset.editorInspectorVectorLockState = locked ? 'locked' : 'unlocked';
+    button.setAttribute('aria-pressed', locked ? 'true' : 'false');
+    button.style.borderColor = locked ? 'var(--fps-editor-accent)' : 'var(--fps-editor-border)';
+    button.style.background = locked ? 'var(--fps-editor-accent-soft)' : 'var(--fps-editor-button-bg)';
+    button.style.color = locked ? 'var(--fps-editor-accent)' : 'var(--fps-editor-text)';
+}
+async function renderInspectorGroundDecalLayoutPreview(canvas, layers, textureSize, mask, shouldContinue) {
+    if (canvas.width !== textureSize.width)
+        canvas.width = textureSize.width;
+    if (canvas.height !== textureSize.height)
+        canvas.height = textureSize.height;
+    const imageByLayer = new Map();
+    await Promise.all(layers.map(async (layer) => {
+        if (layer.preview?.kind !== 'image')
+            return;
+        imageByLayer.set(layer, await loadInspectorGroundDecalLayoutImage(canvas.ownerDocument, layer.preview.url));
+    }));
+    if (!shouldContinue())
+        return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    ctx.clearRect(0, 0, textureSize.width, textureSize.height);
+    ctx.save();
+    applyInspectorGroundDecalLayoutMask(ctx, textureSize, mask);
+    const sortedLayers = [...layers]
+        .filter(layer => layer.enabled)
+        .sort((left, right) => left.zOrder - right.zOrder || left.index - right.index);
+    for (const layer of sortedLayers) {
+        drawInspectorGroundDecalLayoutLayer(ctx, layer, textureSize, imageByLayer.get(layer) ?? null);
+    }
+    ctx.restore();
+}
+function applyInspectorGroundDecalLayoutMask(ctx, textureSize, mask) {
+    if (mask?.enabled === false)
+        return;
+    const minSize = Math.min(textureSize.width, textureSize.height);
+    const padding = Math.max(0, minSize * (mask?.padding ?? 0));
+    const radius = Math.max(0, minSize * (mask?.cornerRadius ?? 0.18));
+    roundedInspectorGroundDecalLayoutRectPath(ctx, padding, padding, textureSize.width - padding * 2, textureSize.height - padding * 2, radius);
+    ctx.clip();
+}
+function drawInspectorGroundDecalLayoutLayer(ctx, layer, textureSize, image) {
+    const preview = layer.preview;
+    if (!preview)
+        return;
+    const rect = resolveInspectorGroundDecalLayoutPixelRect(layer.rect, textureSize);
+    ctx.save();
+    ctx.globalAlpha = layer.opacity ?? 1;
+    if (preview.kind === 'color') {
+        ctx.fillStyle = inspectorGroundDecalLayoutColorToCss(preview.color);
+        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    }
+    else if (preview.kind === 'progress') {
+        drawInspectorGroundDecalLayoutProgress(ctx, preview, rect);
+    }
+    else if (preview.kind === 'image') {
+        if (image) {
+            drawInspectorGroundDecalLayoutImage(ctx, image, rect, preview.tint);
+        }
+        else {
+            drawInspectorGroundDecalLayoutMissingTexture(ctx, rect);
+        }
+    }
+    else if (preview.kind === 'text') {
+        drawInspectorGroundDecalLayoutText(ctx, preview, rect);
+    }
+    ctx.restore();
+}
+function drawInspectorGroundDecalLayoutImage(ctx, image, rect, tint) {
+    if (!tint) {
+        ctx.drawImage(image, rect.x, rect.y, rect.width, rect.height);
+        return;
+    }
+    const inheritedAlpha = ctx.globalAlpha;
+    const tintAlpha = Math.max(0, Math.min(1, tint.a ?? 1));
+    const totalAlpha = inheritedAlpha * tintAlpha;
+    if (isInspectorGroundDecalLayoutWhiteTint(tint)) {
+        ctx.globalAlpha = totalAlpha;
+        ctx.drawImage(image, rect.x, rect.y, rect.width, rect.height);
+        ctx.globalAlpha = inheritedAlpha;
+        return;
+    }
+    const ownerDocument = ctx.canvas.ownerDocument;
+    const canvas = ownerDocument.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(rect.width));
+    canvas.height = Math.max(1, Math.round(rect.height));
+    const tintContext = canvas.getContext('2d');
+    if (!tintContext) {
+        ctx.globalAlpha = totalAlpha;
+        ctx.drawImage(image, rect.x, rect.y, rect.width, rect.height);
+        ctx.globalAlpha = inheritedAlpha;
+        return;
+    }
+    try {
+        tintContext.drawImage(image, 0, 0, canvas.width, canvas.height);
+        const imageData = tintContext.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+        const r = Math.max(0, Math.min(1, tint.r));
+        const g = Math.max(0, Math.min(1, tint.g));
+        const b = Math.max(0, Math.min(1, tint.b));
+        for (let index = 0; index < data.length; index += 4) {
+            data[index] = Math.round(data[index] * r);
+            data[index + 1] = Math.round(data[index + 1] * g);
+            data[index + 2] = Math.round(data[index + 2] * b);
+            data[index + 3] = Math.round(data[index + 3] * totalAlpha);
+        }
+        tintContext.putImageData(imageData, 0, 0);
+        ctx.globalAlpha = 1;
+        ctx.drawImage(canvas, rect.x, rect.y, rect.width, rect.height);
+        ctx.globalAlpha = inheritedAlpha;
+    }
+    catch {
+        ctx.globalAlpha = totalAlpha;
+        ctx.drawImage(image, rect.x, rect.y, rect.width, rect.height);
+        ctx.globalAlpha = inheritedAlpha;
+    }
+}
+function isInspectorGroundDecalLayoutWhiteTint(tint) {
+    return tint.r >= 0.999 && tint.g >= 0.999 && tint.b >= 0.999;
+}
+function drawInspectorGroundDecalLayoutProgress(ctx, preview, rect) {
+    const value = Math.max(0, Math.min(1, preview.value));
+    const direction = preview.direction ?? 'bottomToTop';
+    ctx.fillStyle = inspectorGroundDecalLayoutColorToCss(preview.color);
+    if (direction === 'leftToRight') {
+        ctx.fillRect(rect.x, rect.y, rect.width * value, rect.height);
+    }
+    else if (direction === 'rightToLeft') {
+        const width = rect.width * value;
+        ctx.fillRect(rect.x + rect.width - width, rect.y, width, rect.height);
+    }
+    else if (direction === 'topToBottom') {
+        ctx.fillRect(rect.x, rect.y, rect.width, rect.height * value);
+    }
+    else {
+        const height = rect.height * value;
+        ctx.fillRect(rect.x, rect.y + rect.height - height, rect.width, height);
+    }
+}
+function drawInspectorGroundDecalLayoutText(ctx, preview, rect) {
+    const fontSize = preview.fontSize ?? Math.floor(rect.height * 0.72);
+    const fontWeight = preview.fontWeight ?? '800';
+    const fontFamily = preview.fontFamily ?? 'system-ui, Arial, sans-serif';
+    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    ctx.textAlign = preview.align ?? 'center';
+    ctx.textBaseline = preview.baseline ?? 'middle';
+    const x = resolveInspectorGroundDecalLayoutTextX(rect, ctx.textAlign);
+    const y = resolveInspectorGroundDecalLayoutTextY(rect, ctx.textBaseline);
+    if (preview.strokeColor && preview.strokeWidth) {
+        ctx.lineWidth = preview.strokeWidth;
+        ctx.strokeStyle = inspectorGroundDecalLayoutColorToCss(preview.strokeColor);
+        ctx.strokeText(preview.text, x, y);
+    }
+    ctx.fillStyle = inspectorGroundDecalLayoutColorToCss(preview.color ?? { r: 1, g: 1, b: 1, a: 1 });
+    ctx.fillText(preview.text, x, y);
+}
+function resolveInspectorGroundDecalLayoutPixelRect(rect, textureSize) {
+    const width = rect.width * textureSize.width;
+    const height = rect.depth * textureSize.height;
+    const centerX = textureSize.width * (0.5 + rect.x);
+    const centerY = textureSize.height * (0.5 - rect.z);
+    return {
+        x: centerX - width / 2,
+        y: centerY - height / 2,
+        width,
+        height,
+    };
+}
+function resolveInspectorGroundDecalLayoutTextX(rect, align) {
+    if (align === 'left' || align === 'start')
+        return rect.x;
+    if (align === 'right' || align === 'end')
+        return rect.x + rect.width;
+    return rect.x + rect.width / 2;
+}
+function resolveInspectorGroundDecalLayoutTextY(rect, baseline) {
+    if (baseline === 'top' || baseline === 'hanging')
+        return rect.y;
+    if (baseline === 'bottom' || baseline === 'alphabetic' || baseline === 'ideographic')
+        return rect.y + rect.height;
+    return rect.y + rect.height / 2;
+}
+function drawInspectorGroundDecalLayoutMissingTexture(ctx, rect) {
+    ctx.fillStyle = 'rgba(255,0,80,0.55)';
+    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    ctx.strokeStyle = 'rgba(255,255,255,0.9)';
+    ctx.lineWidth = 4;
+    ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+}
+function roundedInspectorGroundDecalLayoutRectPath(ctx, x, y, width, height, radius) {
+    const r = Math.max(0, Math.min(radius, width / 2, height / 2));
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+    ctx.lineTo(x + r, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+}
+function inspectorGroundDecalLayoutColorToCss(color) {
+    const r = Math.round(Math.max(0, Math.min(1, color.r)) * 255);
+    const g = Math.round(Math.max(0, Math.min(1, color.g)) * 255);
+    const b = Math.round(Math.max(0, Math.min(1, color.b)) * 255);
+    const a = Math.max(0, Math.min(1, color.a ?? 1));
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+function loadInspectorGroundDecalLayoutImage(doc, url) {
+    const cached = inspectorGroundDecalLayoutImageCache.get(url);
+    if (cached)
+        return cached;
+    const promise = new Promise((resolve) => {
+        const image = doc.createElement('img');
+        image.onload = () => resolve(image);
+        image.onerror = () => resolve(null);
+        image.src = url;
+    });
+    inspectorGroundDecalLayoutImageCache.set(url, promise);
+    return promise;
+}
+function readInspectorGroundDecalLayoutRect(value) {
+    if (!isRecord(value))
+        return { x: 0, z: 0, width: 0.25, depth: 0.25 };
+    return normalizeInspectorGroundDecalLayoutRect({
+        x: readFiniteRecordNumber(value, 'x', 0),
+        z: readFiniteRecordNumber(value, 'z', 0),
+        width: readFiniteRecordNumber(value, 'width', 0.25),
+        depth: readFiniteRecordNumber(value, 'depth', 0.25),
+    });
+}
+function readFiniteRecordNumber(record, key, fallback) {
+    const value = record[key];
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+function normalizeInspectorGroundDecalLayoutRect(rect) {
+    return {
+        x: clampNumber(roundInspectorGroundDecalLayoutValue(rect.x), -1, 1),
+        z: clampNumber(roundInspectorGroundDecalLayoutValue(rect.z), -1, 1),
+        width: clampNumber(roundInspectorGroundDecalLayoutValue(rect.width), INSPECTOR_GROUND_DECAL_LAYOUT_MIN_SIZE, INSPECTOR_GROUND_DECAL_LAYOUT_MAX_SIZE),
+        depth: clampNumber(roundInspectorGroundDecalLayoutValue(rect.depth), INSPECTOR_GROUND_DECAL_LAYOUT_MIN_SIZE, INSPECTOR_GROUND_DECAL_LAYOUT_MAX_SIZE),
+    };
+}
+function resizeInspectorGroundDecalLayoutRect(layer, start, dx, dy, locked) {
+    if (!locked) {
+        return normalizeInspectorGroundDecalLayoutRect({
+            ...start,
+            width: start.width + dx * 2,
+            depth: start.depth + dy * 2,
+        });
+    }
+    const source = Math.abs(dx) >= Math.abs(dy) ? 'width' : 'depth';
+    return normalizeInspectorGroundDecalLayoutUniformRect(layer, {
+        ...start,
+        width: start.width + dx * 2,
+        depth: start.depth + dy * 2,
+    }, source);
+}
+function normalizeInspectorGroundDecalLayoutUniformRect(layer, rect, source) {
+    const aspectRatio = resolveInspectorGroundDecalLayoutAspectRatio(layer);
+    const normalizedPosition = normalizeInspectorGroundDecalLayoutRect(rect);
+    const candidateDepth = source === 'width' ? rect.width / aspectRatio : rect.depth;
+    const minDepth = Math.max(INSPECTOR_GROUND_DECAL_LAYOUT_MIN_SIZE, INSPECTOR_GROUND_DECAL_LAYOUT_MIN_SIZE / aspectRatio);
+    const maxDepth = Math.min(INSPECTOR_GROUND_DECAL_LAYOUT_MAX_SIZE, INSPECTOR_GROUND_DECAL_LAYOUT_MAX_SIZE / aspectRatio);
+    const depth = clampNumber(candidateDepth, minDepth, maxDepth);
+    return {
+        ...normalizedPosition,
+        width: roundInspectorGroundDecalLayoutValue(depth * aspectRatio),
+        depth: roundInspectorGroundDecalLayoutValue(depth),
+    };
+}
+function resolveInspectorGroundDecalLayoutAspectRatio(layer) {
+    if (typeof layer.aspectRatio === 'number' && Number.isFinite(layer.aspectRatio) && layer.aspectRatio > 0) {
+        return layer.aspectRatio;
+    }
+    if (layer.rect.depth > 0)
+        return Math.max(0.001, layer.rect.width / layer.rect.depth);
+    return 1;
+}
+function roundInspectorGroundDecalLayoutValue(value) {
+    return Math.round(value * 1000) / 1000;
+}
+function renderInspectorGroundDecalLayoutBox(box, rect) {
+    const left = (0.5 + rect.x - rect.width / 2) * 100;
+    const top = (0.5 - rect.z - rect.depth / 2) * 100;
+    box.style.left = `${left}%`;
+    box.style.top = `${top}%`;
+    box.style.width = `${rect.width * 100}%`;
+    box.style.height = `${rect.depth * 100}%`;
+}
+function updateInspectorGroundDecalLayoutFieldInputs(inputs, rect) {
+    for (const key of ['x', 'z', 'width', 'depth']) {
+        const input = inputs.get(key);
+        if (input)
+            input.value = formatLocalEditorBrowserInspectorNumberValue(rect[key]);
+    }
+}
+function readRectFromLayoutFieldInputs(inputs, fallback, layer, changedKey, locked) {
+    const next = { ...fallback };
+    for (const key of ['x', 'z', 'width', 'depth']) {
+        const input = inputs.get(key);
+        if (!input)
+            continue;
+        const value = parseLocalEditorBrowserInspectorNumberValue(input.value, 'final');
+        if (value == null)
+            return null;
+        next[key] = value;
+    }
+    if (locked && (changedKey === 'width' || changedKey === 'depth')) {
+        return normalizeInspectorGroundDecalLayoutUniformRect(layer, next, changedKey);
+    }
+    return normalizeInspectorGroundDecalLayoutRect(next);
+}
+function serializeInspectorGroundDecalLayoutValue(layers, composite) {
+    if (!composite && layers.length === 1)
+        return JSON.stringify(normalizeInspectorGroundDecalLayoutRect(layers[0].rect));
+    return JSON.stringify({
+        layers: layers.map(layer => ({
+            index: layer.index,
+            id: layer.id,
+            role: layer.role,
+            kind: layer.kind,
+            label: layer.label,
+            rect: normalizeInspectorGroundDecalLayoutRect(layer.rect),
+        })),
+    });
+}
+function commitInspectorGroundDecalLayoutValue(input, layers, fieldInputsByLayer, composite) {
+    for (const layer of layers) {
+        layer.rect = normalizeInspectorGroundDecalLayoutRect(layer.rect);
+        const fieldInputs = fieldInputsByLayer.get(layer);
+        if (fieldInputs)
+            updateInspectorGroundDecalLayoutFieldInputs(fieldInputs, layer.rect);
+    }
+    const nextValue = serializeInspectorGroundDecalLayoutValue(layers, composite);
+    if (input.value === nextValue)
+        return;
+    input.value = nextValue;
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+}
 function createInspectorAssetPickerCardControl(doc, _target, property, bindInput) {
     const wrapper = doc.createElement('div');
     wrapper.dataset.editorInspectorAssetPickerControl = 'true';
@@ -2464,6 +3904,8 @@ export function applyLocalEditorBrowserInspectorControlBinding(element, target,
     element.dataset.serializedCommitMode = property.commitMode;
     element.dataset.serializedPersistence = property.persistence;
     element.dataset.serializedEffect = getInspectorPropertyEffect(property);
+    if (readInspectorControlOptionBoolean(property, 'forceVectorLock'))
+        element.dataset.serializedForceVectorLock = 'true';
     if (property.disabledReason)
         element.dataset.serializedDisabledReason = property.disabledReason;
     if (options?.source)