@fps-games/editor 0.2.0-beta.4 → 0.2.1-beta.1

package/node_modules/@fps-games/editor-ui/dist/editor-ui-controls.js

@@ -0,0 +1,770 @@
+import { BooleanInput, Button, ColorPicker, NumericInput, Panel, SelectInput, TextInput, VectorInput, } from '@playcanvas/pcui';
+import '@playcanvas/pcui/styles';
+let nextEditorUiControlId = 1;
+function createValueHub() {
+    const listeners = new Set();
+    return {
+        emit(event) {
+            for (const listener of listeners)
+                listener(event);
+        },
+        on(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        clear() {
+            listeners.clear();
+        },
+    };
+}
+function canUsePcui(document) {
+    return typeof globalThis.document !== 'undefined'
+        && typeof globalThis.Node !== 'undefined'
+        && document === globalThis.document;
+}
+function applyNativeState(element, inputs, state) {
+    toggleElementClass(element, 'fps-editor-ui-mixed', state.mixed === true);
+    toggleElementClass(element, 'fps-editor-ui-error', state.error === true);
+    element.dataset.editorUiReadonly = String(state.readOnly === true);
+    for (const input of inputs) {
+        input.disabled = state.disabled === true || state.readOnly === true;
+        if (state.placeholder !== undefined && 'placeholder' in input) {
+            input.placeholder = state.mixed ? '--' : state.placeholder;
+        }
+        if (state.mixed)
+            input.value = '';
+        input.setAttribute('aria-invalid', String(state.error === true));
+    }
+}
+function toggleElementClass(element, name, enabled) {
+    const classList = element.classList;
+    if (classList?.toggle)
+        classList.toggle(name, enabled);
+}
+function findPcuiInputs(element) {
+    return Array.from(element.querySelectorAll('input'));
+}
+function configureLegacyProxy(proxy) {
+    proxy.hidden = true;
+    proxy.tabIndex = -1;
+    proxy.setAttribute('aria-hidden', 'true');
+}
+function normalizeEditorUiNumberValue(value, options) {
+    let next = Number.isFinite(value) ? value : 0;
+    if (options.min != null)
+        next = Math.max(options.min, next);
+    if (options.max != null)
+        next = Math.min(options.max, next);
+    if (options.precision != null) {
+        const precision = Math.max(0, Math.min(20, Math.floor(options.precision)));
+        next = Number(next.toFixed(precision));
+    }
+    return next;
+}
+function createNativeTextControl(options) {
+    const input = options.document.createElement('input');
+    input.type = 'text';
+    input.value = options.mixed ? '' : options.value;
+    input.className = 'fps-editor-ui-native-input';
+    const hub = createValueHub();
+    const onInput = () => hub.emit({ phase: 'preview', value: input.value });
+    const onChange = () => hub.emit({ phase: 'commit', value: input.value });
+    input.addEventListener('input', onInput);
+    input.addEventListener('change', onChange);
+    applyNativeState(input, [input], options);
+    return {
+        element: input,
+        nativeInputs: [input],
+        getValue: () => input.value,
+        setValue(value) { input.value = value; },
+        setState(state) { applyNativeState(input, [input], state); },
+        onValue: hub.on,
+        dispose() {
+            input.removeEventListener('input', onInput);
+            input.removeEventListener('change', onChange);
+            hub.clear();
+            input.remove();
+        },
+    };
+}
+export function createEditorUiTextControl(options) {
+    if (!canUsePcui(options.document))
+        return createNativeTextControl(options);
+    // PCUI's `placeholder` is a persistent suffix label rendered on the right,
+    // while editor descriptors use placeholder with native empty-value semantics.
+    const pcui = new TextInput({ value: options.value });
+    const element = pcui.dom;
+    element.classList.add('fps-editor-ui-control', 'fps-editor-ui-text');
+    const input = findPcuiInputs(element)[0];
+    if (!input)
+        throw new Error('PCUI TextInput did not expose its native input.');
+    const hub = createValueHub();
+    pcui.on('change', (value) => hub.emit({ phase: 'preview', value }));
+    pcui.on('blur', () => hub.emit({ phase: 'commit', value: pcui.value }));
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter')
+            hub.emit({ phase: 'commit', value: pcui.value });
+    };
+    input.addEventListener('keydown', onKeyDown);
+    const setState = (state) => {
+        pcui.enabled = state.disabled !== true;
+        pcui.readOnly = state.readOnly === true;
+        pcui.error = state.error === true;
+        applyNativeState(element, [input], state);
+    };
+    setState(options);
+    return {
+        element,
+        nativeInputs: [input],
+        getValue: () => pcui.value,
+        setValue(value) { pcui.value = value; },
+        setState,
+        onValue: hub.on,
+        dispose() {
+            input.removeEventListener('keydown', onKeyDown);
+            hub.clear();
+            pcui.destroy();
+            element.remove();
+        },
+    };
+}
+export function createEditorUiNumberControl(options) {
+    if (!canUsePcui(options.document)) {
+        const normalize = (value) => normalizeEditorUiNumberValue(value, options);
+        const text = createNativeTextControl({ ...options, value: String(normalize(options.value)) });
+        return {
+            ...text,
+            getValue: () => normalize(Number(text.getValue())),
+            setValue(value) { text.setValue(String(normalize(value))); },
+            onValue(listener) {
+                return text.onValue(event => listener({ ...event, value: normalize(Number(event.value)) }));
+            },
+        };
+    }
+    const pcui = new NumericInput({
+        value: options.value,
+        min: options.min,
+        max: options.max,
+        step: options.step,
+        precision: options.precision,
+        stepPrecision: options.stepPrecision,
+    });
+    const element = pcui.dom;
+    element.classList.add('fps-editor-ui-control', 'fps-editor-ui-number');
+    const input = findPcuiInputs(element)[0];
+    if (!input)
+        throw new Error('PCUI NumericInput did not expose its native input.');
+    const hub = createValueHub();
+    pcui.on('change', (value) => hub.emit({ phase: 'preview', value }));
+    pcui.on('slider:mouseup', () => hub.emit({ phase: 'commit', value: pcui.value }));
+    pcui.on('blur', () => hub.emit({ phase: 'commit', value: pcui.value }));
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter')
+            hub.emit({ phase: 'commit', value: pcui.value });
+    };
+    input.addEventListener('keydown', onKeyDown);
+    const setState = (state) => {
+        pcui.enabled = state.disabled !== true;
+        pcui.readOnly = state.readOnly === true;
+        pcui.error = state.error === true;
+        applyNativeState(element, [input], state);
+    };
+    setState(options);
+    return {
+        element,
+        nativeInputs: [input],
+        getValue: () => pcui.value,
+        setValue(value) { pcui.value = value; },
+        setState,
+        onValue: hub.on,
+        dispose() {
+            input.removeEventListener('keydown', onKeyDown);
+            hub.clear();
+            pcui.destroy();
+            element.remove();
+        },
+    };
+}
+export function createEditorUiBooleanControl(options) {
+    const proxy = options.document.createElement('input');
+    proxy.type = 'checkbox';
+    proxy.checked = options.value;
+    proxy.className = 'fps-editor-ui-proxy-input';
+    if (!canUsePcui(options.document)) {
+        proxy.className = 'fps-editor-ui-native-checkbox';
+        const hub = createValueHub();
+        let mixed = options.mixed === true;
+        const applyBooleanState = (state) => {
+            mixed = state.mixed === true;
+            proxy.indeterminate = mixed;
+            proxy.setAttribute('aria-checked', mixed ? 'mixed' : String(proxy.checked));
+            applyNativeState(proxy, [proxy], state);
+        };
+        const onChange = () => {
+            mixed = false;
+            proxy.indeterminate = false;
+            proxy.setAttribute('aria-checked', String(proxy.checked));
+            hub.emit({ phase: 'commit', value: proxy.checked });
+        };
+        proxy.addEventListener('change', onChange);
+        applyBooleanState(options);
+        return {
+            element: proxy,
+            nativeInputs: [proxy],
+            getValue: () => proxy.checked,
+            setValue(value) {
+                proxy.checked = value;
+                proxy.setAttribute('aria-checked', mixed ? 'mixed' : String(value));
+            },
+            setState: applyBooleanState,
+            onValue: hub.on,
+            dispose() { proxy.removeEventListener('change', onChange); hub.clear(); proxy.remove(); },
+        };
+    }
+    const pcui = new BooleanInput({ type: 'toggle', value: options.value });
+    const element = options.document.createElement('span');
+    element.className = 'fps-editor-ui-control fps-editor-ui-boolean';
+    element.append(pcui.dom, proxy);
+    configureLegacyProxy(proxy);
+    pcui.dom.setAttribute('role', 'switch');
+    if (options.ariaLabel)
+        pcui.dom.setAttribute('aria-label', options.ariaLabel);
+    const hub = createValueHub();
+    let mixed = options.mixed === true;
+    let syncing = false;
+    const applyBooleanValueState = (value) => {
+        proxy.checked = value;
+        proxy.indeterminate = mixed;
+        pcui.dom.setAttribute('aria-checked', mixed ? 'mixed' : String(value));
+    };
+    pcui.on('change', (value) => {
+        if (syncing)
+            return;
+        mixed = false;
+        applyBooleanValueState(value);
+        hub.emit({ phase: 'commit', value });
+    });
+    const onProxyChange = () => {
+        if (proxy.dataset.editorUiBridgeDispatch === 'true')
+            return;
+        syncing = true;
+        pcui.value = proxy.checked;
+        syncing = false;
+    };
+    proxy.addEventListener('change', onProxyChange);
+    const setState = (state) => {
+        mixed = state.mixed === true;
+        pcui.enabled = state.disabled !== true;
+        pcui.readOnly = state.readOnly === true;
+        pcui.error = state.error === true;
+        pcui.dom.setAttribute('aria-disabled', String(state.disabled === true));
+        pcui.dom.setAttribute('aria-readonly', String(state.readOnly === true));
+        applyBooleanValueState(pcui.value);
+        applyNativeState(element, [proxy], state);
+    };
+    setState(options);
+    return {
+        element,
+        nativeInputs: [proxy],
+        getValue: () => pcui.value,
+        setValue(value) { syncing = true; pcui.value = value; applyBooleanValueState(value); syncing = false; },
+        setState,
+        onValue: hub.on,
+        dispose() { proxy.removeEventListener('change', onProxyChange); hub.clear(); pcui.destroy(); element.remove(); },
+    };
+}
+export function createEditorUiSelectControl(options) {
+    const proxy = options.document.createElement('select');
+    proxy.className = 'fps-editor-ui-proxy-input';
+    const encodedOptions = options.options.map((option, index) => ({
+        ...option,
+        encodedValue: `editor-ui-option-${index}`,
+    }));
+    for (const option of encodedOptions) {
+        const item = options.document.createElement('option');
+        item.value = option.encodedValue;
+        item.textContent = option.label;
+        item.disabled = option.disabled === true;
+        item.dataset.editorUiValue = JSON.stringify(option.value);
+        if (Object.is(option.value, options.value))
+            item.selected = true;
+        proxy.appendChild(item);
+    }
+    const readProxyValue = () => {
+        const selected = proxy.selectedOptions[0];
+        if (!selected?.dataset.editorUiValue)
+            return options.value;
+        return JSON.parse(selected.dataset.editorUiValue);
+    };
+    const createNativeControl = () => {
+        proxy.className = 'fps-editor-ui-native-input';
+        const hub = createValueHub();
+        const onChange = () => hub.emit({ phase: 'commit', value: readProxyValue() });
+        proxy.addEventListener('change', onChange);
+        applyNativeState(proxy, [proxy], options);
+        return {
+            element: proxy,
+            nativeInputs: [proxy],
+            getValue: readProxyValue,
+            setValue(value) {
+                proxy.value = encodedOptions.find(option => Object.is(option.value, value))?.encodedValue ?? '';
+            },
+            setState(state) { applyNativeState(proxy, [proxy], state); },
+            onValue: hub.on,
+            dispose() { proxy.removeEventListener('change', onChange); hub.clear(); proxy.remove(); },
+        };
+    };
+    if (!canUsePcui(options.document))
+        return createNativeControl();
+    const pcui = new SelectInput({
+        value: encodedOptions.find(option => Object.is(option.value, options.value))?.encodedValue ?? null,
+        options: encodedOptions.map(option => ({ t: option.label, v: option.encodedValue })),
+        disabledOptions: Object.fromEntries(encodedOptions.filter(option => option.disabled).map(option => [option.encodedValue, 'Unavailable'])),
+        allowNull: true,
+    });
+    const element = options.document.createElement('span');
+    element.className = 'fps-editor-ui-control fps-editor-ui-select';
+    element.append(pcui.dom, proxy);
+    const internals = pcui;
+    const optionContainer = internals._containerOptions;
+    const visibleInput = internals._labelValue?.dom;
+    if (!optionContainer || !visibleInput) {
+        pcui.destroy();
+        return createNativeControl();
+    }
+    configureLegacyProxy(proxy);
+    visibleInput.setAttribute('role', 'combobox');
+    visibleInput.setAttribute('aria-haspopup', 'listbox');
+    visibleInput.setAttribute('aria-expanded', 'false');
+    if (options.ariaLabel)
+        visibleInput.setAttribute('aria-label', options.ariaLabel);
+    optionContainer.dom.setAttribute('role', 'listbox');
+    if (!optionContainer.dom.id)
+        optionContainer.dom.id = `fps-editor-ui-select-options-${nextEditorUiControlId++}`;
+    visibleInput.setAttribute('aria-controls', optionContainer.dom.id);
+    const syncOptionAccessibility = (selectedValue) => {
+        for (const optionElement of Array.from(optionContainer.dom.children)) {
+            const option = encodedOptions.find(item => item.encodedValue === optionElement.id);
+            if (!option)
+                continue;
+            optionElement.setAttribute('role', 'option');
+            optionElement.setAttribute('aria-label', option.label);
+            optionElement.setAttribute('aria-selected', String(option.encodedValue === selectedValue));
+            optionElement.setAttribute('aria-disabled', String(option.disabled === true));
+        }
+    };
+    syncOptionAccessibility(pcui.value);
+    let layerLease = null;
+    if (options.layerHost) {
+        layerLease = options.layerHost.promote({
+            element: optionContainer.dom,
+            anchor: pcui.dom,
+            placement: 'anchored',
+            isOpen: () => !optionContainer.hidden,
+            close: () => pcui.close(),
+            stopPointerPropagation: true,
+        });
+    }
+    const onOpen = optionContainer.on('show', () => {
+        visibleInput.setAttribute('aria-expanded', 'true');
+        syncOptionAccessibility(pcui.value);
+        layerLease?.update();
+        options.document.defaultView?.requestAnimationFrame(() => layerLease?.update());
+    });
+    const onClose = optionContainer.on('hide', () => {
+        visibleInput.setAttribute('aria-expanded', 'false');
+    });
+    const hub = createValueHub();
+    let syncing = false;
+    pcui.on('change', (encodedValue) => {
+        if (syncing)
+            return;
+        const option = encodedOptions.find(item => item.encodedValue === encodedValue);
+        if (!option)
+            return;
+        proxy.value = option.encodedValue;
+        syncOptionAccessibility(encodedValue);
+        hub.emit({ phase: 'commit', value: option.value });
+    });
+    const onProxyChange = () => {
+        if (proxy.dataset.editorUiBridgeDispatch === 'true')
+            return;
+        const value = readProxyValue();
+        syncing = true;
+        pcui.value = encodedOptions.find(option => Object.is(option.value, value))?.encodedValue ?? null;
+        syncOptionAccessibility(pcui.value);
+        syncing = false;
+    };
+    proxy.addEventListener('change', onProxyChange);
+    const setState = (state) => {
+        pcui.enabled = state.disabled !== true;
+        pcui.readOnly = state.readOnly === true;
+        pcui.error = state.error === true;
+        visibleInput.setAttribute('aria-disabled', String(state.disabled === true));
+        visibleInput.setAttribute('aria-readonly', String(state.readOnly === true));
+        applyNativeState(element, [proxy], state);
+    };
+    setState(options);
+    return {
+        element,
+        nativeInputs: [proxy],
+        getValue: () => {
+            const option = encodedOptions.find(item => item.encodedValue === pcui.value);
+            return option?.value ?? options.value;
+        },
+        setValue(value) {
+            const encodedValue = encodedOptions.find(option => Object.is(option.value, value))?.encodedValue ?? null;
+            syncing = true;
+            pcui.value = encodedValue;
+            proxy.value = encodedValue ?? '';
+            syncOptionAccessibility(encodedValue);
+            syncing = false;
+        },
+        setState,
+        onValue: hub.on,
+        dispose() {
+            proxy.removeEventListener('change', onProxyChange);
+            onOpen.unbind();
+            onClose.unbind();
+            layerLease?.dispose();
+            hub.clear();
+            pcui.destroy();
+            element.remove();
+        },
+    };
+}
+export function createEditorUiVectorControl(options) {
+    if (!canUsePcui(options.document)) {
+        const wrapper = options.document.createElement('div');
+        wrapper.className = 'fps-editor-ui-native-vector';
+        const inputs = Array.from({ length: options.dimensions }, (_, index) => {
+            const input = options.document.createElement('input');
+            input.type = 'text';
+            input.value = String(normalizeEditorUiNumberValue(options.value[index] ?? 0, options));
+            wrapper.appendChild(input);
+            return input;
+        });
+        const hub = createValueHub();
+        const read = () => inputs.map(input => normalizeEditorUiNumberValue(Number(input.value), options));
+        const listeners = inputs.map(input => {
+            const onInput = () => hub.emit({ phase: 'preview', value: read() });
+            const onChange = () => hub.emit({ phase: 'commit', value: read() });
+            input.addEventListener('input', onInput);
+            input.addEventListener('change', onChange);
+            return () => { input.removeEventListener('input', onInput); input.removeEventListener('change', onChange); };
+        });
+        applyNativeState(wrapper, inputs, options);
+        return {
+            element: wrapper,
+            nativeInputs: inputs,
+            getValue: read,
+            setValue(value) {
+                inputs.forEach((input, index) => {
+                    input.value = String(normalizeEditorUiNumberValue(value[index] ?? 0, options));
+                });
+            },
+            setState(state) { applyNativeState(wrapper, inputs, state); },
+            onValue: hub.on,
+            dispose() { listeners.forEach(remove => remove()); hub.clear(); wrapper.remove(); },
+        };
+    }
+    const pcui = new VectorInput({
+        dimensions: options.dimensions,
+        value: options.value,
+        min: options.min,
+        max: options.max,
+        step: options.step,
+        precision: options.precision,
+        stepPrecision: options.stepPrecision,
+        placeholder: ['X', 'Y', 'Z', 'W'].slice(0, options.dimensions),
+    });
+    const element = pcui.dom;
+    element.classList.add('fps-editor-ui-control', 'fps-editor-ui-vector');
+    const inputs = findPcuiInputs(element).slice(0, options.dimensions);
+    const hub = createValueHub();
+    pcui.on('change', (value) => hub.emit({ phase: 'preview', value: [...value] }));
+    const children = pcui._inputs ?? [];
+    for (const child of children) {
+        child.on('slider:mouseup', () => hub.emit({ phase: 'commit', value: [...pcui.value] }));
+    }
+    pcui.on('blur', () => hub.emit({ phase: 'commit', value: [...pcui.value] }));
+    const setState = (state) => {
+        pcui.enabled = state.disabled !== true;
+        pcui.readOnly = state.readOnly === true;
+        pcui.error = state.error === true;
+        applyNativeState(element, inputs, state);
+    };
+    setState(options);
+    return {
+        element,
+        nativeInputs: inputs,
+        getValue: () => [...pcui.value],
+        setValue(value) { pcui.value = value; },
+        setState,
+        onValue: hub.on,
+        dispose() {
+            hub.clear();
+            // PCUI 6.1 VectorInput does not destroy its child NumericInputs. Those
+            // children own document-level pointerlockchange listeners, so the
+            // adapter must close the lifecycle gap before destroying the parent.
+            for (const child of children)
+                child.destroy();
+            pcui.destroy();
+            element.remove();
+        },
+    };
+}
+export function createEditorUiColorControl(options) {
+    const proxy = options.document.createElement('input');
+    proxy.type = 'color';
+    proxy.className = 'fps-editor-ui-proxy-input';
+    const toHex = (value) => `#${value.slice(0, 3).map(channel => Math.round(Math.max(0, Math.min(1, channel)) * 255).toString(16).padStart(2, '0')).join('')}`;
+    const fromHex = (value) => [1, 3, 5].map(index => Number.parseInt(value.slice(index, index + 2), 16) / 255).concat(options.channels === 4 ? [1] : []);
+    proxy.value = toHex(options.value);
+    const createNativeControl = () => {
+        proxy.className = 'fps-editor-ui-native-input';
+        const hub = createValueHub();
+        const onInput = () => hub.emit({ phase: 'preview', value: fromHex(proxy.value) });
+        const onChange = () => hub.emit({ phase: 'commit', value: fromHex(proxy.value) });
+        proxy.addEventListener('input', onInput);
+        proxy.addEventListener('change', onChange);
+        applyNativeState(proxy, [proxy], options);
+        return {
+            element: proxy,
+            nativeInputs: [proxy],
+            getValue: () => fromHex(proxy.value),
+            setValue(value) { proxy.value = toHex(value); },
+            setState(state) { applyNativeState(proxy, [proxy], state); },
+            onValue: hub.on,
+            dispose() { proxy.removeEventListener('input', onInput); proxy.removeEventListener('change', onChange); hub.clear(); proxy.remove(); },
+        };
+    };
+    if (!canUsePcui(options.document))
+        return createNativeControl();
+    const pcui = new ColorPicker({ channels: options.channels ?? 4, value: options.value });
+    pcui.value = options.value;
+    const element = options.document.createElement('span');
+    element.className = 'fps-editor-ui-control fps-editor-ui-color';
+    element.append(pcui.dom, proxy);
+    const internals = pcui;
+    const overlay = internals._overlay;
+    if (!overlay || typeof internals._openColorPicker !== 'function') {
+        for (const child of internals._pickerChannels ?? [])
+            child.destroy();
+        internals._fieldHex?.destroy();
+        overlay?.destroy();
+        pcui.destroy();
+        element.remove();
+        return createNativeControl();
+    }
+    configureLegacyProxy(proxy);
+    pcui.dom.tabIndex = 0;
+    pcui.dom.setAttribute('role', 'button');
+    pcui.dom.setAttribute('aria-haspopup', 'dialog');
+    pcui.dom.setAttribute('aria-expanded', 'false');
+    if (options.ariaLabel)
+        pcui.dom.setAttribute('aria-label', options.ariaLabel);
+    overlay.dom.setAttribute('role', 'dialog');
+    if (options.ariaLabel)
+        overlay.dom.setAttribute('aria-label', `${options.ariaLabel} color picker`);
+    const layerLease = options.layerHost?.promote({
+        element: overlay.dom,
+        anchor: pcui.dom,
+        placement: 'fill',
+        isOpen: () => !overlay.hidden,
+        close: () => { overlay.hidden = true; },
+    }) ?? null;
+    const onOverlayShow = overlay.on('show', () => {
+        pcui.dom.setAttribute('aria-expanded', 'true');
+        layerLease?.update();
+        options.document.defaultView?.requestAnimationFrame(() => layerLease?.update());
+    });
+    const onOverlayHide = overlay.on('hide', () => {
+        pcui.dom.setAttribute('aria-expanded', 'false');
+        if (pcui.dom.isConnected)
+            pcui.dom.focus();
+    });
+    const onPickerKeyDown = (event) => {
+        if (event.key !== 'Enter' || !pcui.enabled || pcui.readOnly || !overlay.hidden)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        internals._openColorPicker?.();
+    };
+    pcui.dom.addEventListener('keydown', onPickerKeyDown, true);
+    const hub = createValueHub();
+    let picking = false;
+    let suppressLateGestureValue = false;
+    let syncing = false;
+    const readPickerChannelValue = () => {
+        const channelCount = options.channels ?? 4;
+        const channels = internals._pickerChannels?.slice(0, channelCount) ?? [];
+        if (channels.length !== channelCount || channels.some(channel => !Number.isFinite(channel.value))) {
+            return [...pcui.value];
+        }
+        return channels.map(channel => Math.max(0, Math.min(255, channel.value)) / 255);
+    };
+    const sameColorValue = (left, right) => {
+        return left.length === right.length && left.every((channel, index) => channel === right[index]);
+    };
+    pcui.on('picker:color:start', () => {
+        picking = true;
+        suppressLateGestureValue = false;
+    });
+    pcui.on('change', (value) => {
+        if (syncing)
+            return;
+        proxy.value = toHex(value);
+        if (suppressLateGestureValue) {
+            suppressLateGestureValue = false;
+            return;
+        }
+        hub.emit({ phase: picking ? 'preview' : 'commit', value: [...value] });
+    });
+    pcui.on('picker:color:end', () => {
+        if (!picking)
+            return;
+        const finalValue = readPickerChannelValue();
+        picking = false;
+        // Picker channels update synchronously even though PCUI 6.1.4 throttles
+        // its public change event. Commit those exact channels at pointer-up, then
+        // absorb the matching late change so the descriptor path observes once.
+        suppressLateGestureValue = !sameColorValue(finalValue, pcui.value);
+        proxy.value = toHex(finalValue);
+        hub.emit({ phase: 'commit', value: finalValue });
+    });
+    const onProxyChange = () => {
+        if (proxy.dataset.editorUiBridgeDispatch === 'true')
+            return;
+        const value = fromHex(proxy.value);
+        syncing = true;
+        pcui.value = value;
+        syncing = false;
+    };
+    proxy.addEventListener('change', onProxyChange);
+    const setState = (state) => {
+        pcui.enabled = state.disabled !== true;
+        pcui.readOnly = state.readOnly === true;
+        pcui.error = state.error === true;
+        applyNativeState(element, [proxy], state);
+    };
+    setState(options);
+    return {
+        element,
+        nativeInputs: [proxy],
+        getValue: () => [...pcui.value],
+        setValue(value) { syncing = true; pcui.value = value; proxy.value = toHex(value); syncing = false; },
+        setState,
+        onValue: hub.on,
+        dispose() {
+            proxy.removeEventListener('change', onProxyChange);
+            hub.clear();
+            // PCUI 6.1 ColorPicker leaves its four NumericInput children alive when
+            // the parent is destroyed. Explicitly dispose the owned children and
+            // overlay so selection rerenders cannot accumulate document listeners.
+            pcui.dom.removeEventListener('keydown', onPickerKeyDown, true);
+            onOverlayShow.unbind();
+            onOverlayHide.unbind();
+            layerLease?.dispose();
+            overlay.hidden = true;
+            for (const child of internals._pickerChannels ?? [])
+                child.destroy();
+            const fieldHex = internals._fieldHex;
+            overlay.destroy();
+            pcui.destroy();
+            element.remove();
+            // ColorPicker schedules an anonymous 100 ms focus retry when opened.
+            // Keep only that detached field object alive until the callback settles;
+            // all visible DOM, overlay listeners, and other children are already gone.
+            if (fieldHex) {
+                const win = options.document.defaultView;
+                if (win)
+                    win.setTimeout(() => fieldHex.destroy(), 120);
+                else
+                    fieldHex.destroy();
+            }
+        },
+    };
+}
+export function createEditorUiButton(options) {
+    if (!canUsePcui(options.document)) {
+        const button = options.document.createElement('button');
+        button.type = 'button';
+        button.textContent = options.text;
+        button.disabled = options.disabled === true;
+        if (options.title)
+            button.title = options.title;
+        if (options.onClick)
+            button.addEventListener('click', options.onClick);
+        return { element: button, dispose() { if (options.onClick)
+                button.removeEventListener('click', options.onClick); button.remove(); } };
+    }
+    const pcui = new Button({ text: options.text, enabled: options.disabled !== true });
+    const element = pcui.dom;
+    element.classList.add('fps-editor-ui-control', 'fps-editor-ui-button');
+    if (options.title)
+        element.title = options.title;
+    if (options.onClick)
+        pcui.on('click', options.onClick);
+    return { element, dispose() { pcui.destroy(); element.remove(); } };
+}
+export function createEditorUiSection(options) {
+    if (!canUsePcui(options.document)) {
+        const element = options.document.createElement('section');
+        const header = options.document.createElement('button');
+        const content = options.document.createElement('div');
+        header.type = 'button';
+        header.textContent = options.title;
+        element.appendChild(header);
+        element.appendChild(content);
+        let collapsed = options.collapsed === true;
+        const render = () => { content.hidden = collapsed; };
+        const onClick = () => { if (options.collapsible !== false) {
+            collapsed = !collapsed;
+            render();
+        } };
+        header.addEventListener('click', onClick);
+        render();
+        return { element, header, content, setCollapsed(value) { collapsed = value; render(); }, dispose() { header.removeEventListener('click', onClick); element.remove(); } };
+    }
+    const pcui = new Panel({
+        headerText: options.title,
+        collapsible: options.collapsible !== false,
+        collapsed: options.collapsed === true,
+    });
+    pcui.dom.classList.add('fps-editor-ui-section');
+    return {
+        element: pcui.dom,
+        header: pcui.header.dom,
+        content: pcui.content.dom,
+        setCollapsed(value) { pcui.collapsed = value; },
+        dispose() { const element = pcui.dom; pcui.destroy(); element.remove(); },
+    };
+}
+export function createEditorUiReadonlyControl(options) {
+    const element = options.document.createElement('div');
+    element.className = 'fps-editor-ui-readonly';
+    element.textContent = options.value;
+    element.dataset.editorUiReadonly = 'true';
+    toggleElementClass(element, 'fps-editor-ui-error', options.error === true);
+    return { element, dispose() { element.remove(); } };
+}
+export function createEditorUiExpandableReadonlyControl(options) {
+    const element = options.document.createElement('details');
+    element.className = 'fps-editor-ui-expandable-readonly';
+    const summary = options.document.createElement('summary');
+    summary.className = 'fps-editor-ui-expandable-readonly__summary';
+    const summaryText = options.document.createElement('span');
+    summaryText.className = 'fps-editor-ui-expandable-readonly__summary-text';
+    summaryText.textContent = options.summary;
+    summary.appendChild(summaryText);
+    const content = options.document.createElement('pre');
+    content.className = 'fps-editor-ui-expandable-readonly__content';
+    content.textContent = options.value;
+    element.appendChild(summary);
+    element.appendChild(content);
+    toggleElementClass(element, 'fps-editor-ui-error', options.error === true);
+    toggleElementClass(element, 'fps-editor-ui-warning', options.warning === true);
+    return { element, summary, content, dispose() { element.remove(); } };
+}
+//# sourceMappingURL=editor-ui-controls.js.map