@fps-games/editor 0.1.0 → 0.1.1-beta.0

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

@@ -258,127 +258,185 @@ function formatHistoryTimestamp(createdAt) {
         pad(date.getSeconds()),
     ].join('');
 }
-export function renderInspectorPanel(doc, panel, state) {
+export function renderInspectorPanel(doc, panel, state, filter = '', options = {}) {
     clearElement(panel);
     const title = doc.createElement('h2');
     title.textContent = 'Inspector';
     title.style.cssText = 'font-size:13px;margin:-8px -8px 8px;padding:7px 8px;border-bottom:1px solid var(--fps-editor-divider);background:var(--fps-editor-chrome-dark);font-weight:800;color:var(--fps-editor-text-strong)';
     panel.appendChild(title);
+    const search = createInspectorSearchInput(doc, filter);
+    panel.appendChild(search);
     const selectionCount = state.selectionSummary?.count ?? state.selectedIds.length;
-    if (selectionCount > 1) {
-        appendMultiSelectionInspector(doc, panel, state);
+    const inspectorObject = selectionCount > 1
+        ? state.inspectorMultiObject
+            ?? (state.serializedMultiObject ? createLegacyInspectorObject(state.serializedMultiObject) : createSelectionSummaryInspectorObject(state))
+        : state.inspectorObject ?? (state.serializedObject ? createLegacyInspectorObject(state.serializedObject) : null);
+    if (!inspectorObject) {
+        const empty = doc.createElement('div');
+        empty.textContent = '请从层级树或 Scene View 中选择一个 GameObject。';
+        empty.style.cssText = 'color:var(--fps-editor-muted);line-height:1.45';
+        panel.appendChild(empty);
         return;
     }
-    const serializedObject = state.serializedObject;
-    if (!serializedObject) {
+    const controlRegistry = createLocalEditorBrowserInspectorControlRegistry(options.controls, options.controlConflict);
+    appendInspectorSummary(doc, panel, inspectorObject, selectionCount);
+    const visibleSections = filterInspectorSections(inspectorObject.sections.filter(section => section.placement !== 'summary'), filter);
+    if (visibleSections.length === 0) {
+        if (!filter.trim() && inspectorObject.sections.length === 0)
+            return;
         const empty = doc.createElement('div');
-        empty.textContent = '请从层级树或 Scene View 中选择一个 GameObject。';
+        empty.textContent = '没有匹配的 Inspector 字段。';
         empty.style.cssText = 'color:var(--fps-editor-muted);line-height:1.45';
         panel.appendChild(empty);
         return;
     }
-    appendGameObjectHeader(doc, panel, serializedObject);
-    const sections = groupSerializedProperties(serializedObject.properties.filter(property => !property.path.startsWith('gameObject.')));
-    for (const section of sections) {
-        const block = createInspectorComponentBlock(doc);
-        const sectionTitle = doc.createElement('h3');
-        sectionTitle.textContent = section.title;
-        sectionTitle.style.cssText = 'font-size:12px;margin:0 0 8px;font-weight:900;color:var(--fps-editor-text-strong)';
-        block.appendChild(sectionTitle);
-        for (const group of section.groups) {
-            if (group.kind === 'vec3')
-                appendSerializedVec3Inputs(doc, block, serializedObject, group.label, group.properties);
-            else
-                appendSerializedPropertyRow(doc, block, serializedObject, group.property);
-        }
-        panel.appendChild(block);
+    for (const section of visibleSections) {
+        panel.appendChild(createInspectorSectionBlock(doc, inspectorObject, section, controlRegistry));
     }
 }
-function appendMultiSelectionInspector(doc, panel, state) {
-    const block = createInspectorComponentBlock(doc);
-    const title = doc.createElement('h3');
-    title.textContent = '多选';
-    title.style.cssText = 'font-size:12px;margin:0 0 8px;font-weight:900;color:var(--fps-editor-text-strong)';
-    block.appendChild(title);
-    appendReadOnlyRow(doc, block, '已选', String(state.selectionSummary?.count ?? state.selectedIds.length));
-    appendReadOnlyRow(doc, block, '活动对象', state.selectionSummary?.activeId ?? state.activeId ?? '无');
-    panel.appendChild(block);
-    const serializedMultiObject = state.serializedMultiObject;
-    if (!serializedMultiObject)
-        return;
-    const sections = groupSerializedProperties(serializedMultiObject.properties.filter(property => property.path.startsWith('transform.')));
-    for (const section of sections) {
-        const sectionBlock = createInspectorComponentBlock(doc);
-        const sectionTitle = doc.createElement('h3');
-        sectionTitle.textContent = section.title;
-        sectionTitle.style.cssText = 'font-size:12px;margin:0 0 8px;font-weight:900;color:var(--fps-editor-text-strong)';
-        sectionBlock.appendChild(sectionTitle);
-        for (const group of section.groups) {
-            if (group.kind === 'vec3')
-                appendSerializedVec3Inputs(doc, sectionBlock, serializedMultiObject, group.label, group.properties);
-            else
-                appendSerializedPropertyRow(doc, sectionBlock, serializedMultiObject, group.property);
-        }
-        panel.appendChild(sectionBlock);
-    }
+function createInspectorSearchInput(doc, value) {
+    const input = doc.createElement('input');
+    input.dataset.editorInspectorSearch = 'true';
+    input.value = value;
+    input.placeholder = 'Search...';
+    input.style.cssText = [
+        'width:100%',
+        'height:30px',
+        'box-sizing:border-box',
+        'margin:0 0 8px',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-field)',
+        'color:var(--fps-editor-text)',
+        'font-size:12px',
+        'padding:0 8px',
+        'outline:none',
+    ].join(';');
+    return input;
 }
-function appendGameObjectHeader(doc, panel, serializedObject) {
+function appendInspectorSummary(doc, panel, inspectorObject, selectionCount) {
     const block = createInspectorComponentBlock(doc);
     const title = doc.createElement('h3');
-    title.textContent = 'GameObject';
+    title.textContent = selectionCount > 1 ? 'Selection' : 'GameObject';
     title.style.cssText = 'font-size:12px;margin:0 0 8px;font-weight:900;color:var(--fps-editor-text-strong)';
     block.appendChild(title);
-    const nameProperty = serializedObject.properties.find(property => property.path === 'gameObject.name');
-    const idProperty = serializedObject.properties.find(property => property.path === 'gameObject.id');
-    appendReadOnlyRow(doc, block, '名称', String(nameProperty?.value ?? serializedObject.label ?? serializedObject.targetId));
-    appendReadOnlyRow(doc, block, 'ID', String(idProperty?.value ?? serializedObject.targetId));
+    appendReadOnlyRow(doc, block, selectionCount > 1 ? 'Selected' : 'Name', inspectorObject.label ?? inspectorObject.activeId ?? inspectorObject.targetIds[0] ?? '无');
+    appendReadOnlyRow(doc, block, 'Active ID', inspectorObject.activeId ?? '无');
+    if (selectionCount > 1)
+        appendReadOnlyRow(doc, block, 'Count', String(selectionCount));
     panel.appendChild(block);
 }
+function filterInspectorSections(sections, filter) {
+    const needle = filter.trim().toLowerCase();
+    if (!needle)
+        return sections;
+    return sections
+        .map(section => ({
+        ...section,
+        properties: section.properties.filter(property => inspectorPropertyMatches(section, property, needle)),
+    }))
+        .filter(section => section.properties.length > 0 || inspectorSectionMatches(section, needle));
+}
+function inspectorSectionMatches(section, needle) {
+    return [section.id, section.title, section.summary ?? '', ...(section.tags ?? [])]
+        .some(value => value.toLowerCase().includes(needle));
+}
+function inspectorPropertyMatches(section, property, needle) {
+    return inspectorSectionMatches(section, needle)
+        || [property.path, property.label, property.control, property.valueType, ...(property.tags ?? [])]
+            .some(value => String(value).toLowerCase().includes(needle));
+}
+function createInspectorSectionBlock(doc, inspectorObject, section, controlRegistry) {
+    const block = doc.createElement('details');
+    block.dataset.editorInspectorSection = section.id;
+    block.open = section.collapsedByDefault !== true;
+    block.style.cssText = createInspectorBlockStyle();
+    const sectionTitle = doc.createElement('summary');
+    sectionTitle.style.cssText = [
+        'font-size:12px',
+        'margin:-2px 0 8px',
+        'font-weight:900',
+        'color:var(--fps-editor-text-strong)',
+        'display:flex',
+        'align-items:center',
+        'justify-content:space-between',
+        'gap:8px',
+        'cursor:pointer',
+        'list-style:none',
+    ].join(';');
+    const label = doc.createElement('span');
+    label.textContent = section.title;
+    sectionTitle.appendChild(label);
+    const meta = doc.createElement('span');
+    meta.style.cssText = 'display:flex;align-items:center;gap:6px;min-width:0;color:var(--fps-editor-muted);font-size:10px;text-transform:uppercase;letter-spacing:0';
+    if (section.summary) {
+        const summary = doc.createElement('span');
+        summary.textContent = section.summary;
+        summary.style.cssText = 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;font-size:11px';
+        meta.appendChild(summary);
+    }
+    if (section.persistence === 'runtime' || section.runtimeOnly || section.persistence === 'readonly') {
+        const badge = doc.createElement('span');
+        badge.textContent = section.persistence === 'runtime' || section.runtimeOnly ? 'Runtime' : 'Readonly';
+        badge.style.cssText = 'flex:0 0 auto';
+        meta.appendChild(badge);
+    }
+    sectionTitle.appendChild(meta);
+    block.appendChild(sectionTitle);
+    const content = doc.createElement('div');
+    content.dataset.editorInspectorSectionContent = section.id;
+    for (const group of groupInspectorProperties(section.properties)) {
+        if (group.kind === 'vector')
+            appendInspectorVectorInputs(doc, content, inspectorObject, group.label, group.properties);
+        else
+            appendInspectorPropertyRow(doc, content, inspectorObject, group.property, controlRegistry);
+    }
+    block.appendChild(content);
+    return block;
+}
 function createInspectorComponentBlock(doc) {
     const block = doc.createElement('div');
-    block.style.cssText = [
+    block.style.cssText = createInspectorBlockStyle();
+    return block;
+}
+function createInspectorBlockStyle() {
+    return [
         'margin:0 0 8px',
         'padding:9px',
         'border:1px solid var(--fps-editor-border)',
         'border-radius:3px',
         'background:var(--fps-editor-panel-soft)',
     ].join(';');
-    return block;
 }
-function groupSerializedProperties(properties) {
-    const bySection = new Map();
-    for (const property of properties) {
-        const sectionName = toTitle(property.path.split('.')[0] ?? 'Properties');
-        const entries = bySection.get(sectionName) ?? [];
-        entries.push(property);
-        bySection.set(sectionName, entries);
-    }
-    return [...bySection.entries()].map(([title, entries]) => ({
-        title,
-        groups: groupVectorProperties(entries),
-    }));
-}
-function groupVectorProperties(properties) {
+function groupInspectorProperties(properties) {
     const groups = [];
     const consumed = new Set();
     for (const property of properties) {
         if (consumed.has(property.path))
             continue;
-        const match = property.path.match(/^(.*)\.(x|y|z)$/);
+        if (property.control === 'vec2' || property.control === 'vec3') {
+            groups.push({ kind: 'property', property });
+            consumed.add(property.path);
+            continue;
+        }
+        const match = property.path.match(/^(.*)\.(x|y|z|r|g|b)$/);
         if (!match || property.valueType !== 'number') {
             groups.push({ kind: 'property', property });
             consumed.add(property.path);
             continue;
         }
         const basePath = match[1];
-        const vector = ['x', 'y', 'z']
+        const axes = ['x', 'y', 'z'].every(axis => properties.some(candidate => candidate.path === `${basePath}.${axis}`))
+            ? ['x', 'y', 'z']
+            : ['r', 'g', 'b'];
+        const vector = axes
             .map(axis => properties.find(candidate => candidate.path === `${basePath}.${axis}` && candidate.valueType === 'number'))
             .filter((candidate) => !!candidate);
         if (vector.length === 3) {
             for (const entry of vector)
                 consumed.add(entry.path);
             const parts = basePath.split('.');
-            groups.push({ kind: 'vec3', label: toTitle(parts[parts.length - 1] ?? basePath), properties: vector });
+            groups.push({ kind: 'vector', label: toTitle(parts[parts.length - 1] ?? basePath), properties: vector });
         }
         else {
             groups.push({ kind: 'property', property });
@@ -387,15 +445,135 @@ function groupVectorProperties(properties) {
     }
     return groups;
 }
-function appendSerializedPropertyRow(doc, parent, serializedObject, property) {
-    if (property.readOnly || property.valueType !== 'number') {
-        appendReadOnlyRow(doc, parent, property.label, String(property.value ?? ''));
-        return;
+const builtinInspectorControlRegistrations = [
+    {
+        id: 'builtin.readonly',
+        order: 100,
+        control: 'readonly',
+        render: ({ doc, target, property }) => createInspectorReadonlyControl(doc, target, property),
+    },
+    {
+        id: 'builtin.string',
+        order: 100,
+        control: 'string',
+        render: ({ doc, target, property }) => createInspectorTextControl(doc, target, property),
+    },
+    {
+        id: 'builtin.number',
+        order: 100,
+        control: 'number',
+        render: ({ doc, target, property }) => createInspectorNumberControl(doc, target, property),
+    },
+    {
+        id: 'builtin.boolean',
+        order: 100,
+        control: 'boolean',
+        render: ({ doc, target, property }) => createInspectorBooleanControl(doc, target, property),
+    },
+    {
+        id: 'builtin.enum',
+        order: 100,
+        control: 'enum',
+        render: ({ doc, target, property }) => createInspectorEnumControl(doc, target, property),
+    },
+    {
+        id: 'builtin.vec2',
+        order: 100,
+        control: 'vec2',
+        render: ({ doc, target, property }) => createInspectorVectorControl(doc, target, property),
+    },
+    {
+        id: 'builtin.vec3',
+        order: 100,
+        control: 'vec3',
+        render: ({ doc, target, property }) => createInspectorVectorControl(doc, target, property),
+    },
+    {
+        id: 'builtin.color',
+        order: 100,
+        control: 'color',
+        render: ({ doc, target, property }) => createInspectorColorControl(doc, target, property),
+    },
+    {
+        id: 'builtin.asset',
+        order: 100,
+        control: 'asset',
+        render: ({ doc, target, property }) => createInspectorTextControl(doc, target, property),
+    },
+    {
+        id: 'builtin.object',
+        order: 100,
+        control: 'object',
+        render: ({ doc, target, property }) => createInspectorReadonlyControl(doc, target, property),
+    },
+    {
+        id: 'builtin.custom',
+        order: 1000,
+        control: 'custom',
+        render: ({ doc, target, property }) => createInspectorReadonlyControl(doc, target, property),
+    },
+];
+function appendInspectorPropertyRow(doc, parent, inspectorObject, property, controlRegistry) {
+    const control = renderInspectorControl(doc, controlRegistry, inspectorObject, property);
+    parent.appendChild(createPropertyRow(doc, property.label, control));
+}
+export function createLocalEditorBrowserInspectorControlRegistry(controls = [], conflict = 'error') {
+    const registrations = new Map();
+    for (const control of builtinInspectorControlRegistrations) {
+        registerInspectorControl(registrations, control, 'error');
     }
-    const input = createPropertyInput(doc, serializedObject, property);
-    parent.appendChild(createPropertyRow(doc, property.label, input));
+    for (const control of controls) {
+        registerInspectorControl(registrations, control, conflict);
+    }
+    return [...registrations.values()].sort(compareInspectorControlRegistrations);
 }
-function appendSerializedVec3Inputs(doc, parent, serializedObject, label, properties) {
+function registerInspectorControl(registrations, registration, conflict) {
+    const id = registration.id.trim();
+    if (!id)
+        throw new Error('Inspector control id is required.');
+    const normalized = id === registration.id ? registration : { ...registration, id };
+    if (registrations.has(id)) {
+        if (conflict === 'error')
+            throw new Error(`Inspector control "${id}" is already registered.`);
+        if (conflict === 'ignore')
+            return;
+    }
+    registrations.set(id, normalized);
+}
+function compareInspectorControlRegistrations(left, right) {
+    return (left.order ?? 0) - (right.order ?? 0) || left.id.localeCompare(right.id);
+}
+function renderInspectorControl(doc, registrations, target, property) {
+    if (property.readOnly || property.persistence !== 'document')
+        return createInspectorReadonlyControl(doc, target, property);
+    const context = {
+        doc,
+        target,
+        property,
+        bindInput(element, options) {
+            applyLocalEditorBrowserInspectorControlBinding(element, target, property, options);
+        },
+    };
+    const registration = resolveLocalEditorBrowserInspectorControlRegistration(registrations, context);
+    if (registration)
+        return registration.render(context);
+    return createInspectorReadonlyControl(doc, target, property);
+}
+export function resolveLocalEditorBrowserInspectorControlRegistration(registrations, context) {
+    for (const registration of registrations) {
+        if (localEditorBrowserInspectorControlSupports(registration, context))
+            return registration;
+    }
+    return null;
+}
+function localEditorBrowserInspectorControlSupports(registration, context) {
+    if (registration.control && registration.control !== context.property.control)
+        return false;
+    if (registration.customControl && registration.customControl !== context.property.customControl)
+        return false;
+    return registration.supports?.(context) ?? true;
+}
+function appendInspectorVectorInputs(doc, parent, inspectorObject, label, properties) {
     const wrapper = doc.createElement('div');
     wrapper.style.cssText = 'margin:8px 0';
     const labelElement = doc.createElement('div');
@@ -405,25 +583,156 @@ function appendSerializedVec3Inputs(doc, parent, serializedObject, label, proper
     const fields = doc.createElement('div');
     fields.style.cssText = 'display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px';
     for (const property of properties) {
-        fields.appendChild(createPropertyInput(doc, serializedObject, property));
+        fields.appendChild(createInspectorNumberControl(doc, inspectorObject, property));
     }
     wrapper.appendChild(fields);
     parent.appendChild(wrapper);
 }
-function createPropertyInput(doc, target, property) {
+function createInspectorInputBase(doc, target, property) {
     const input = doc.createElement('input');
-    input.type = property.valueType === 'number' ? 'number' : 'text';
-    if (property.valueType === 'number')
-        input.step = '0.1';
     input.value = property.mixed ? '' : String(property.value);
     input.placeholder = property.mixed ? '--' : '';
-    input.dataset.serializedTargetId = 'targetId' in target ? target.targetId : target.activeId ?? target.targetIds[0] ?? '';
-    if ('targetIds' in target)
-        input.dataset.serializedTargetIds = target.targetIds.join(',');
-    input.dataset.serializedPath = property.path;
-    input.title = property.label;
-    input.disabled = property.readOnly === true;
-    input.style.cssText = [
+    applyLocalEditorBrowserInspectorControlBinding(input, target, property);
+    input.style.cssText = createInspectorInputStyle();
+    return input;
+}
+function createInspectorNumberControl(doc, target, property) {
+    const input = createInspectorInputBase(doc, target, property);
+    input.type = 'number';
+    input.step = String(property.step ?? 0.1);
+    if (property.min != null)
+        input.min = String(property.min);
+    if (property.max != null)
+        input.max = String(property.max);
+    return input;
+}
+function createInspectorTextControl(doc, target, property) {
+    const input = createInspectorInputBase(doc, target, property);
+    input.type = 'text';
+    return input;
+}
+function createInspectorBooleanControl(doc, target, property) {
+    const input = createInspectorInputBase(doc, target, property);
+    input.type = 'checkbox';
+    input.checked = property.mixed ? false : property.value === true;
+    input.style.cssText = 'width:16px;height:16px;accent-color:var(--fps-editor-accent);justify-self:start';
+    return input;
+}
+function createInspectorEnumControl(doc, target, property) {
+    const select = doc.createElement('select');
+    applyLocalEditorBrowserInspectorControlBinding(select, target, property);
+    select.style.cssText = createInspectorInputStyle();
+    for (const option of property.options ?? []) {
+        const item = doc.createElement('option');
+        item.value = String(option.value);
+        item.dataset.serializedOptionValue = JSON.stringify(option.value);
+        item.textContent = option.label;
+        item.disabled = option.disabled === true;
+        if (!property.mixed && option.value === property.value)
+            item.selected = true;
+        select.appendChild(item);
+    }
+    if (property.mixed) {
+        const mixed = doc.createElement('option');
+        mixed.value = '';
+        mixed.textContent = '--';
+        mixed.selected = true;
+        select.prepend(mixed);
+    }
+    return select;
+}
+function createInspectorVectorControl(doc, target, property) {
+    const wrapper = doc.createElement('div');
+    wrapper.dataset.inspectorVectorControl = 'true';
+    wrapper.style.cssText = 'display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%';
+    const axes = property.control === 'vec2' ? ['x', 'y'] : ['x', 'y', 'z'];
+    if (property.control === 'vec2')
+        wrapper.style.gridTemplateColumns = 'repeat(2,minmax(0,1fr))';
+    const value = isRecord(property.value) ? property.value : {};
+    for (const axis of axes) {
+        const input = createInspectorInputBase(doc, target, property);
+        input.type = 'number';
+        input.step = String(property.step ?? 0.1);
+        input.dataset.serializedVectorAxis = axis;
+        input.value = property.mixed ? '' : String(value[axis] ?? 0);
+        input.title = `${property.label}.${axis}`;
+        wrapper.appendChild(input);
+    }
+    return wrapper;
+}
+function createInspectorColorControl(doc, target, property) {
+    const input = createInspectorInputBase(doc, target, property);
+    input.type = 'color';
+    input.value = colorValueToHex(property.value);
+    input.style.cssText = 'width:34px;height:26px;border:1px solid var(--fps-editor-border);border-radius:3px;background:transparent;padding:0';
+    return input;
+}
+function createInspectorReadonlyControl(doc, _target, property) {
+    if (!property.mixed && isExpandableInspectorValue(property.value)) {
+        return createInspectorObjectReadonlyControl(doc, property);
+    }
+    const valueElement = doc.createElement('div');
+    valueElement.textContent = property.mixed ? '--' : formatLocalEditorBrowserInspectorValue(property.value);
+    valueElement.style.cssText = [
+        `color:${property.persistence === 'runtime' ? 'var(--fps-editor-muted)' : 'var(--fps-editor-text)'}`,
+        'overflow:hidden',
+        'text-overflow:ellipsis',
+        'white-space:nowrap',
+        property.persistence === 'runtime' ? 'font-style:italic' : '',
+    ].filter(Boolean).join(';');
+    if (property.persistence === 'runtime')
+        valueElement.title = 'Runtime-only context';
+    return valueElement;
+}
+function createInspectorObjectReadonlyControl(doc, property) {
+    const details = doc.createElement('details');
+    details.style.cssText = [
+        'min-width:0',
+        'max-width:100%',
+        `color:${property.persistence === 'runtime' ? 'var(--fps-editor-muted)' : 'var(--fps-editor-text)'}`,
+    ].join(';');
+    const summary = doc.createElement('summary');
+    summary.textContent = formatInspectorObjectSummary(property.value);
+    summary.style.cssText = 'cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    details.appendChild(summary);
+    const pre = doc.createElement('pre');
+    pre.textContent = formatLocalEditorBrowserInspectorValue(property.value);
+    pre.style.cssText = [
+        'max-height:220px',
+        'overflow:auto',
+        'white-space:pre-wrap',
+        'word-break:break-word',
+        'margin:6px 0 0',
+        'padding:7px',
+        'border:1px solid var(--fps-editor-border)',
+        'border-radius:3px',
+        'background:var(--fps-editor-field)',
+        'font-size:11px',
+        'line-height:1.45',
+    ].join(';');
+    details.appendChild(pre);
+    if (property.persistence === 'runtime')
+        details.title = 'Runtime-only context';
+    return details;
+}
+export function applyLocalEditorBrowserInspectorControlBinding(element, target, property, options) {
+    element.dataset.serializedTargetId = target.activeId ?? target.targetIds[0] ?? '';
+    if (target.targetIds.length > 1)
+        element.dataset.serializedTargetIds = target.targetIds.join(',');
+    element.dataset.serializedPath = property.path;
+    element.dataset.serializedControl = property.control;
+    element.dataset.serializedValueType = property.valueType;
+    element.dataset.serializedCommitMode = property.commitMode;
+    element.dataset.serializedPersistence = property.persistence;
+    if (options?.source)
+        element.dataset.serializedEditSource = options.source;
+    element.title = property.tooltip ?? property.label;
+    if ('disabled' in element) {
+        element.disabled = property.readOnly === true || property.persistence !== 'document';
+    }
+}
+function createInspectorInputStyle() {
+    return [
         'min-width:0',
         'height:28px',
         'border:1px solid var(--fps-editor-border)',
@@ -433,7 +742,6 @@ function createPropertyInput(doc, target, property) {
         'font-size:12px',
         'padding:0 6px',
     ].join(';');
-    return input;
 }
 function appendReadOnlyRow(doc, parent, label, value) {
     const valueElement = doc.createElement('div');
@@ -441,4 +749,157 @@ function appendReadOnlyRow(doc, parent, label, value) {
     valueElement.style.cssText = 'color:var(--fps-editor-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
     parent.appendChild(createPropertyRow(doc, label, valueElement));
 }
+function createLegacyInspectorObject(serializedObject) {
+    const targetIds = 'targetIds' in serializedObject ? serializedObject.targetIds : [serializedObject.targetId];
+    const activeId = 'targetId' in serializedObject ? serializedObject.targetId : serializedObject.activeId;
+    return {
+        targetIds,
+        activeId,
+        label: serializedObject.label,
+        document: serializedObject.document,
+        selection: {
+            targetIds,
+            activeId,
+            document: serializedObject.document,
+        },
+        sections: createLegacyInspectorSections(serializedObject.properties),
+    };
+}
+function createLegacyInspectorSections(properties) {
+    const sections = new Map();
+    for (const [index, property] of properties.entries()) {
+        const id = property.path.split('.')[0] || 'properties';
+        const section = sections.get(id) ?? { order: sections.size, properties: [] };
+        section.properties.push({
+            path: property.path,
+            label: property.label,
+            valueType: property.valueType,
+            control: inferLegacyInspectorControl(property),
+            value: property.value,
+            mixed: property.mixed,
+            readOnly: property.readOnly === true,
+            persistence: property.readOnly === true ? 'readonly' : 'document',
+            commitMode: inferLegacyInspectorCommitMode(property),
+            order: index,
+            document: property.document,
+        });
+        sections.set(id, section);
+    }
+    return [...sections.entries()].map(([id, section]) => ({
+        id,
+        title: toTitle(id),
+        order: section.order,
+        placement: id === 'gameObject' ? 'summary' : 'body',
+        persistence: section.properties.some(property => property.persistence === 'document') ? 'document' : 'readonly',
+        properties: section.properties,
+    }));
+}
+function createSelectionSummaryInspectorObject(state) {
+    const targetIds = state.selectedIds;
+    if (targetIds.length === 0)
+        return null;
+    const activeId = state.selectionSummary?.activeId ?? state.activeId ?? targetIds[0] ?? null;
+    return {
+        targetIds,
+        activeId,
+        label: `${targetIds.length} objects`,
+        selection: {
+            targetIds,
+            activeId,
+        },
+        sections: [],
+    };
+}
+function inferLegacyInspectorControl(property) {
+    if (property.readOnly)
+        return 'readonly';
+    if (property.valueType === 'string')
+        return 'string';
+    if (property.valueType === 'number')
+        return 'number';
+    if (property.valueType === 'boolean')
+        return 'boolean';
+    if (property.valueType === 'enum')
+        return 'enum';
+    if (property.valueType === 'asset')
+        return 'asset';
+    if (property.valueType === 'object')
+        return 'object';
+    return 'readonly';
+}
+function inferLegacyInspectorCommitMode(property) {
+    switch (property.valueType) {
+        case 'number':
+            return 'live';
+        case 'boolean':
+        case 'enum':
+        case 'asset':
+            return 'immediate';
+        default:
+            return 'blur';
+    }
+}
+export function formatLocalEditorBrowserInspectorValue(value) {
+    if (value == null)
+        return '';
+    if (typeof value === 'object')
+        return JSON.stringify(toStableInspectorJsonValue(value), null, 2);
+    if (typeof value === 'function')
+        return `[Function ${value.name || 'anonymous'}]`;
+    if (typeof value === 'symbol')
+        return String(value);
+    return String(value);
+}
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+function isExpandableInspectorValue(value) {
+    return !!value && typeof value === 'object';
+}
+function formatInspectorObjectSummary(value) {
+    if (Array.isArray(value))
+        return `Array(${value.length})`;
+    if (!isRecord(value))
+        return 'Object';
+    const keys = Object.keys(value).sort();
+    if (keys.length === 0)
+        return 'Object {}';
+    const shown = keys.slice(0, 4).join(', ');
+    return keys.length > 4 ? `Object { ${shown}, ... }` : `Object { ${shown} }`;
+}
+function toStableInspectorJsonValue(value, seen = new WeakSet(), depth = 0) {
+    if (value == null || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean')
+        return value;
+    if (typeof value === 'bigint')
+        return String(value);
+    if (typeof value === 'function')
+        return `[Function ${value.name || 'anonymous'}]`;
+    if (typeof value === 'symbol')
+        return String(value);
+    if (typeof value !== 'object')
+        return String(value);
+    if (seen.has(value))
+        return '[Circular]';
+    if (depth > 6)
+        return '[MaxDepth]';
+    seen.add(value);
+    if (Array.isArray(value))
+        return value.map(item => toStableInspectorJsonValue(item, seen, depth + 1));
+    const record = value;
+    const output = {};
+    for (const key of Object.keys(record).sort()) {
+        output[key] = toStableInspectorJsonValue(record[key], seen, depth + 1);
+    }
+    return output;
+}
+function colorValueToHex(value) {
+    if (!value || typeof value !== 'object')
+        return '#ffffff';
+    const color = value;
+    const toHex = (channel) => {
+        const value = typeof channel === 'number' && Number.isFinite(channel) ? channel : 1;
+        return Math.round(Math.max(0, Math.min(1, value)) * 255).toString(16).padStart(2, '0');
+    };
+    return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+}
 //# sourceMappingURL=local-editor-ui-panels.js.map