@embeddables/cli 0.1.0

package/dist/workbench/FieldEditorPanel.js

@@ -0,0 +1,650 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+const BUILT_IN_KEYS = [
+    'entryId',
+    'current_page_id',
+    'current_page_key',
+    'current_page_index',
+    'highest_page_reached_id',
+    'highest_page_reached_key',
+    'highest_page_reached_index',
+];
+// Component types that store data in user data
+const INPUT_COMPONENT_TYPES = ['InputBox', 'OptionSelector', 'FileUpload'];
+function getComponentTypeIcon(componentType) {
+    switch (componentType) {
+        case 'InputBox':
+            return '𝐓';
+        case 'OptionSelector':
+            return '☰';
+        case 'FileUpload':
+            return '📎';
+        case 'Multiple Types':
+            return '⊕';
+        default:
+            return '•';
+    }
+}
+function getInputTypeLabel(inputType) {
+    if (!inputType)
+        return null;
+    const labels = {
+        text: 'text',
+        email: 'email',
+        phone: 'phone',
+        number: 'number',
+        date: 'date',
+        time: 'time',
+        month: 'month',
+        password: 'password',
+        confirm: 'confirm',
+        range: 'range',
+        switch: 'switch',
+        checkbox: 'checkbox',
+    };
+    return labels[inputType] || inputType;
+}
+function getCategoryLabel(category) {
+    switch (category) {
+        case 'built-in':
+            return 'Built-in Keys';
+        case 'component':
+            return 'Component Fields';
+        case 'computed':
+            return 'Computed Fields';
+        case 'registered':
+            return 'Registered Keys';
+        case 'extra':
+            return 'Other Keys';
+    }
+}
+function getCategoryColor(category) {
+    switch (category) {
+        case 'built-in':
+            return 'text-purple-300';
+        case 'component':
+            return 'text-sky-300';
+        case 'computed':
+            return 'text-amber-300';
+        case 'registered':
+            return 'text-teal-300';
+        case 'extra':
+            return 'text-slate-300';
+    }
+}
+/** Restore cursor position after a parent update that would otherwise move it to the end */
+function restoreCursorAfterUpdate(input, fn) {
+    const start = input.selectionStart ?? 0;
+    const end = input.selectionEnd ?? 0;
+    fn();
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            input.setSelectionRange(start, end);
+        });
+    });
+}
+function formatValue(value) {
+    if (value === null)
+        return 'null';
+    if (value === undefined)
+        return '';
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return String(value);
+    if (Array.isArray(value))
+        return JSON.stringify(value, null, 2);
+    if (typeof value === 'object')
+        return JSON.stringify(value, null, 2);
+    return String(value);
+}
+function detectValueType(value) {
+    if (value === null || value === undefined)
+        return 'null';
+    if (typeof value === 'boolean')
+        return 'boolean';
+    if (typeof value === 'number')
+        return 'number';
+    if (typeof value === 'string')
+        return 'text';
+    return 'json';
+}
+function generateTestValue(field) {
+    const key = field.key.toLowerCase();
+    const label = (field.label || '').toLowerCase();
+    const context = `${key} ${label}`;
+    // Handle OptionSelector - return first option key
+    if (field.options && field.options.length > 0) {
+        const firstOption = field.options[0];
+        return firstOption.key ?? '';
+    }
+    // Handle InputBox types
+    switch (field.inputType) {
+        case 'email':
+            return 'test@example.com';
+        case 'phone':
+            return '+1 (555) 123-4567';
+        case 'number':
+            return '42';
+        case 'date':
+            return new Date().toISOString().split('T')[0];
+        case 'time':
+            return '12:00';
+        case 'month':
+            const now = new Date();
+            return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
+        case 'password':
+        case 'confirm':
+            return 'TestPassword123!';
+        case 'range':
+            return '50';
+        case 'switch':
+        case 'checkbox':
+            return 'true';
+    }
+    // Context-based text generation
+    if (context.includes('name') && context.includes('first'))
+        return 'John';
+    if (context.includes('name') && context.includes('last'))
+        return 'Doe';
+    if (context.includes('name') && context.includes('full'))
+        return 'John Doe';
+    if (context.includes('name'))
+        return 'John Doe';
+    if (context.includes('email'))
+        return 'test@example.com';
+    if (context.includes('phone'))
+        return '+1 (555) 123-4567';
+    if (context.includes('address') || context.includes('street'))
+        return '123 Main Street';
+    if (context.includes('city'))
+        return 'San Francisco';
+    if (context.includes('state'))
+        return 'California';
+    if (context.includes('zip') || context.includes('postal'))
+        return '94102';
+    if (context.includes('country'))
+        return 'United States';
+    if (context.includes('age'))
+        return '30';
+    if (context.includes('weight'))
+        return '150';
+    if (context.includes('height'))
+        return '5\'10"';
+    return 'Test value';
+}
+export function FieldEditorPanel({ embeddableId, rawJson, onUpdateUserData, keyFilter, }) {
+    const [fields, setFields] = useState([]);
+    const [allComponentFields, setAllComponentFields] = useState([]);
+    const [expandedCategories, setExpandedCategories] = useState(new Set(['built-in', 'component', 'computed', 'registered', 'extra']));
+    const [componentFilter, setComponentFilter] = useState('filled');
+    const [fieldTypes, setFieldTypes] = useState({});
+    const [currentPageId, setCurrentPageId] = useState('');
+    const savvy = window.Savvy;
+    const analyzeFields = useCallback(() => {
+        // Parse user data
+        let userData;
+        try {
+            userData = rawJson.trim() ? JSON.parse(rawJson) : {};
+        }
+        catch {
+            return;
+        }
+        // Get flow JSON for metadata
+        const flowJson = savvy?.getFlowJson?.(embeddableId);
+        // Store current page ID
+        setCurrentPageId(userData.current_page_id || '');
+        // Build component metadata map: key -> { types, inputType, options, label, pageIds, isMultiple }
+        const componentMeta = new Map();
+        const processComponent = (comp, pageId) => {
+            if (!comp.key)
+                return;
+            // Only track input-y components
+            if (!INPUT_COMPONENT_TYPES.includes(comp.type))
+                return;
+            const existing = componentMeta.get(comp.key) || { types: new Set(), pageIds: new Set() };
+            existing.types.add(comp.type);
+            if (pageId)
+                existing.pageIds.add(pageId);
+            if (comp.type === 'InputBox') {
+                const inputComp = comp;
+                existing.inputType = inputComp.input_type;
+                existing.label = comp.label;
+            }
+            else if (comp.type === 'OptionSelector') {
+                const optComp = comp;
+                existing.options = optComp.buttons?.map((b) => ({ key: b.key, text: b.text })) || [];
+                existing.label = comp.label;
+                existing.isMultiple = optComp.multiple;
+            }
+            else if (comp.label) {
+                existing.label = comp.label;
+            }
+            componentMeta.set(comp.key, existing);
+            // Process nested components
+            if (comp.components) {
+                comp.components.forEach((c) => processComponent(c, pageId));
+            }
+        };
+        // Process all pages and global components
+        flowJson?.pages?.forEach((page) => {
+            page.components?.forEach((c) => processComponent(c, page.id));
+        });
+        flowJson?.components?.forEach((c) => processComponent(c));
+        // Build computed fields set
+        const computedFieldKeys = new Set();
+        flowJson?.computedFields?.forEach((cf) => {
+            if (cf.key)
+                computedFieldKeys.add(cf.key);
+        });
+        // Build registered keys set
+        const registeredKeys = new Set();
+        if (flowJson?.registered_keys) {
+            const keys = flowJson.registered_keys.split(/[\n,]/).map((k) => k.trim());
+            keys.forEach((k) => {
+                if (k)
+                    registeredKeys.add(k);
+            });
+        }
+        // Build pages list for dropdowns
+        const pagesList = [];
+        flowJson?.pages?.forEach((page, index) => {
+            pagesList.push({
+                id: page.id,
+                key: page.key,
+                index,
+            });
+        });
+        // Build ALL component fields
+        const allCompFields = [];
+        componentMeta.forEach((meta, key) => {
+            const value = userData[key];
+            // For multi-select, check if array has items
+            const hasValue = meta.isMultiple
+                ? Array.isArray(value) && value.length > 0
+                : value !== null && value !== undefined && value !== '';
+            allCompFields.push({
+                key,
+                value: hasValue ? value : undefined,
+                category: 'component',
+                componentType: meta.types.size > 1 ? 'Multiple Types' : Array.from(meta.types)[0],
+                inputType: meta.inputType,
+                options: meta.options,
+                label: meta.label,
+                hasValue,
+                pageIds: Array.from(meta.pageIds),
+                isMultiple: meta.isMultiple,
+            });
+        });
+        allCompFields.sort((a, b) => a.key.localeCompare(b.key));
+        setAllComponentFields(allCompFields);
+        // Categorize each key in userData (for non-component fields)
+        const fieldsList = [];
+        const processedKeys = new Set();
+        for (const [key, value] of Object.entries(userData)) {
+            let category = 'extra';
+            let componentType;
+            let inputType;
+            let options;
+            let label;
+            const hasValue = value !== null && value !== undefined && value !== '';
+            if (BUILT_IN_KEYS.includes(key)) {
+                category = 'built-in';
+                // Add page options for page-related keys (both current_page_* and highest_page_reached_*)
+                if (key === 'current_page_id' || key === 'highest_page_reached_id') {
+                    options = pagesList.map((p) => ({ key: p.id, text: `${p.key} (${p.id})` }));
+                }
+                else if (key === 'current_page_key' || key === 'highest_page_reached_key') {
+                    options = pagesList.map((p) => ({ key: p.key, text: p.key }));
+                }
+                else if (key === 'current_page_index' || key === 'highest_page_reached_index') {
+                    options = pagesList.map((p) => ({ key: String(p.index), text: `${p.index} (${p.key})` }));
+                }
+            }
+            else if (componentMeta.has(key)) {
+                // Skip component fields - they're handled separately
+                processedKeys.add(key);
+                continue;
+            }
+            else if (computedFieldKeys.has(key)) {
+                category = 'computed';
+            }
+            else if (registeredKeys.has(key)) {
+                category = 'registered';
+            }
+            processedKeys.add(key);
+            fieldsList.push({
+                key,
+                value,
+                category,
+                componentType,
+                inputType,
+                options,
+                label,
+                hasValue,
+            });
+        }
+        // Sort fields by category and then by key
+        const categoryOrder = [
+            'component',
+            'computed',
+            'registered',
+            'built-in',
+            'extra',
+        ];
+        fieldsList.sort((a, b) => {
+            const catDiff = categoryOrder.indexOf(a.category) - categoryOrder.indexOf(b.category);
+            if (catDiff !== 0)
+                return catDiff;
+            return a.key.localeCompare(b.key);
+        });
+        setFields(fieldsList);
+    }, [rawJson, embeddableId, savvy]);
+    useEffect(() => {
+        analyzeFields();
+    }, [analyzeFields]);
+    // Switch to "This Page" on initial load if no component fields are filled
+    const hasAutoSwitched = useRef(false);
+    useEffect(() => {
+        if (hasAutoSwitched.current)
+            return;
+        if (allComponentFields.length > 0) {
+            const hasFilledFields = allComponentFields.some((f) => f.hasValue);
+            if (!hasFilledFields) {
+                setComponentFilter('thisPage');
+            }
+            hasAutoSwitched.current = true;
+        }
+    }, [allComponentFields]);
+    const toggleCategory = (category) => {
+        setExpandedCategories((prev) => {
+            const next = new Set(prev);
+            if (next.has(category)) {
+                next.delete(category);
+            }
+            else {
+                next.add(category);
+            }
+            return next;
+        });
+    };
+    const handleClear = (field) => {
+        // For multi-select fields, clear to empty array instead of null
+        if (field.isMultiple) {
+            onUpdateUserData(field.key, []);
+        }
+        else {
+            onUpdateUserData(field.key, null);
+        }
+    };
+    const handleFill = (field) => {
+        const value = generateTestValue(field);
+        // Convert to appropriate type
+        let typedValue = value;
+        // For multi-select, wrap in array
+        if (field.isMultiple && field.options && field.options.length > 0) {
+            typedValue = [value];
+        }
+        else if (field.inputType === 'number' || field.inputType === 'range') {
+            typedValue = Number(value);
+        }
+        else if (field.inputType === 'switch' || field.inputType === 'checkbox') {
+            typedValue = value === 'true';
+        }
+        else if (field.key.includes('page_index') || field.key.includes('_index')) {
+            typedValue = Number(value);
+        }
+        onUpdateUserData(field.key, typedValue);
+    };
+    const handleValueChange = (field, newValue) => {
+        let typedValue = newValue;
+        // Try to parse as JSON for complex values
+        if (newValue.startsWith('{') || newValue.startsWith('[')) {
+            try {
+                typedValue = JSON.parse(newValue);
+            }
+            catch {
+                typedValue = newValue;
+            }
+        }
+        else if (newValue === 'null') {
+            typedValue = null;
+        }
+        else if (newValue === 'true') {
+            typedValue = true;
+        }
+        else if (newValue === 'false') {
+            typedValue = false;
+        }
+        else if (newValue === '' || newValue === 'undefined') {
+            typedValue = null;
+        }
+        else if (field.inputType === 'number' ||
+            field.inputType === 'range' ||
+            field.key.includes('_index')) {
+            const num = Number(newValue);
+            if (!isNaN(num)) {
+                typedValue = num;
+            }
+        }
+        onUpdateUserData(field.key, typedValue);
+    };
+    const handleTypedValueChange = (key, valueType, newValue) => {
+        let typedValue;
+        switch (valueType) {
+            case 'null':
+                typedValue = null;
+                break;
+            case 'boolean':
+                typedValue = newValue === 'true';
+                break;
+            case 'number':
+                typedValue = newValue === '' ? null : Number(newValue);
+                if (isNaN(typedValue))
+                    typedValue = null;
+                break;
+            case 'json':
+                try {
+                    typedValue = JSON.parse(newValue);
+                }
+                catch {
+                    typedValue = newValue;
+                }
+                break;
+            case 'text':
+            default:
+                typedValue = newValue === '' ? null : newValue;
+                break;
+        }
+        onUpdateUserData(key, typedValue);
+    };
+    const handleTypeChange = (key, newType, currentValue) => {
+        setFieldTypes((prev) => ({ ...prev, [key]: newType }));
+        // Convert value to new type
+        let convertedValue;
+        switch (newType) {
+            case 'null':
+                convertedValue = null;
+                break;
+            case 'boolean':
+                convertedValue = Boolean(currentValue);
+                break;
+            case 'number':
+                const num = Number(currentValue);
+                convertedValue = isNaN(num) ? 0 : num;
+                break;
+            case 'json':
+                if (typeof currentValue === 'object') {
+                    convertedValue = currentValue;
+                }
+                else {
+                    try {
+                        convertedValue = JSON.parse(String(currentValue));
+                    }
+                    catch {
+                        convertedValue = {};
+                    }
+                }
+                break;
+            case 'text':
+            default:
+                convertedValue = String(currentValue ?? '');
+                break;
+        }
+        onUpdateUserData(key, convertedValue);
+    };
+    // Get the display component fields based on filter mode
+    const displayComponentFields = (() => {
+        switch (componentFilter) {
+            case 'all':
+                return allComponentFields;
+            case 'thisPage':
+                return allComponentFields.filter((f) => f.pageIds?.includes(currentPageId));
+            case 'filled':
+            default:
+                return allComponentFields.filter((f) => f.hasValue);
+        }
+    })();
+    // Filter fields
+    const filteredFields = keyFilter.trim()
+        ? fields.filter((f) => f.key.toLowerCase().includes(keyFilter.toLowerCase()))
+        : fields;
+    const filteredComponentFields = keyFilter.trim()
+        ? displayComponentFields.filter((f) => f.key.toLowerCase().includes(keyFilter.toLowerCase()))
+        : displayComponentFields;
+    // Group fields by category (excluding component fields which are handled separately)
+    const groupedFields = {
+        'built-in': [],
+        component: [], // Will be replaced by filteredComponentFields
+        computed: [],
+        registered: [],
+        extra: [],
+    };
+    filteredFields.forEach((field) => {
+        groupedFields[field.category].push(field);
+    });
+    // Render built-in field (no clear button)
+    const renderBuiltInField = (field) => {
+        const hasOptions = field.options && field.options.length > 0;
+        const isFilled = field.value !== null && field.value !== undefined && field.value !== '';
+        return (_jsxs("div", { className: `flex items-center gap-2 rounded-lg px-2.5 py-2 ${isFilled
+                ? 'bg-emerald-500/10 ring-1 ring-inset ring-emerald-500/20'
+                : 'bg-white/5 ring-1 ring-inset ring-white/10'}`, children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded bg-slate-800 text-xs", children: "\u2022" }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate text-xs font-medium text-slate-100", title: field.key, children: field.key }) })] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: hasOptions ? (_jsxs("select", { value: formatValue(field.value), onChange: (e) => handleValueChange(field, e.target.value), className: "max-w-[200px] truncate rounded-lg bg-slate-800 px-2 py-1.5 text-[11px] text-slate-100 ring-1 ring-inset ring-slate-600 focus:outline-none focus:ring-2 focus:ring-sky-500/60", children: [_jsx("option", { value: "", children: "-- Select --" }), field.options.map((opt, idx) => (_jsx("option", { value: opt.key ?? '', children: opt.text || opt.key || '(empty)' }, opt.key ?? idx)))] })) : (_jsx("input", { type: "text", value: formatValue(field.value), onChange: (e) => {
+                            const input = e.target;
+                            const value = input.value;
+                            restoreCursorAfterUpdate(input, () => handleValueChange(field, value));
+                        }, className: "w-40 rounded-lg bg-slate-800 px-2 py-1.5 text-[11px] font-mono text-slate-100 ring-1 ring-inset ring-slate-600 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60", placeholder: "null" })) })] }, field.key));
+    };
+    // Handle adding a value to a multi-select field
+    const handleMultiSelectAdd = (field, keyToAdd) => {
+        if (!keyToAdd)
+            return;
+        const currentValues = Array.isArray(field.value) ? field.value : [];
+        if (!currentValues.includes(keyToAdd)) {
+            onUpdateUserData(field.key, [...currentValues, keyToAdd]);
+        }
+    };
+    // Handle removing a value from a multi-select field
+    const handleMultiSelectRemove = (field, keyToRemove) => {
+        const currentValues = Array.isArray(field.value) ? field.value : [];
+        onUpdateUserData(field.key, currentValues.filter((v) => v !== keyToRemove));
+    };
+    // Get display text for an option key
+    const getOptionText = (field, optionKey) => {
+        const option = field.options?.find((opt) => opt.key === optionKey);
+        return option?.text || option?.key || optionKey || '(empty)';
+    };
+    // Render component field (with clear/fill buttons)
+    const renderComponentField = (field) => {
+        const hasOptions = field.options && field.options.length > 0;
+        const isFilled = field.hasValue;
+        const isMultiSelect = field.isMultiple && hasOptions;
+        // For multi-select, get the selected values as array
+        const selectedValues = isMultiSelect
+            ? Array.isArray(field.value)
+                ? field.value
+                : []
+            : [];
+        // Get available options (not yet selected) for multi-select dropdown
+        const availableOptions = isMultiSelect
+            ? field.options.filter((opt) => !selectedValues.includes(opt.key ?? ''))
+            : field.options;
+        return (_jsxs("div", { className: `flex flex-col gap-2 rounded-lg px-2.5 py-2 ${isFilled
+                ? 'bg-emerald-500/10 ring-1 ring-inset ring-emerald-500/20'
+                : 'bg-white/5 ring-1 ring-inset ring-white/10'}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded bg-slate-800 text-xs", title: field.componentType || field.category, children: getComponentTypeIcon(field.componentType) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: `truncate text-xs font-medium text-slate-100 ${!field.label ? 'font-mono' : ''}`, title: field.key, children: field.label || field.key }), _jsxs("div", { className: "flex items-center gap-2 text-[10px] text-slate-500", children: [field.label && field.label !== field.key && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-slate-300", children: field.key }), _jsx("span", { children: "\u2022" })] })), field.componentType && (_jsxs(_Fragment, { children: [_jsx("span", { children: field.componentType }), field.isMultiple && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u2022" }), _jsx("span", { children: "Multi-select" })] })), field.inputType && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u2022" }), _jsx("span", { className: "font-mono", children: getInputTypeLabel(field.inputType) })] }))] })), field.options && field.options.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u2022" }), _jsxs("span", { children: [field.options.length, " options"] })] }))] })] })] }), !isMultiSelect && (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [hasOptions ? (_jsxs("select", { value: formatValue(field.value), onChange: (e) => handleValueChange(field, e.target.value), className: "max-w-[180px] truncate rounded-lg bg-slate-800 px-2 py-1.5 text-[11px] text-slate-100 ring-1 ring-inset ring-slate-600 focus:outline-none focus:ring-2 focus:ring-sky-500/60", children: [_jsx("option", { value: "", children: "-- Select --" }), field.options.map((opt, idx) => (_jsx("option", { value: opt.key ?? '', children: opt.text || opt.key || '(empty)' }, opt.key ?? idx)))] })) : (_jsx("input", { type: "text", value: formatValue(field.value), onChange: (e) => {
+                                        const input = e.target;
+                                        const value = input.value;
+                                        restoreCursorAfterUpdate(input, () => handleValueChange(field, value));
+                                    }, className: "w-32 rounded-lg bg-slate-800 px-2 py-1.5 text-[11px] font-mono text-slate-100 ring-1 ring-inset ring-slate-600 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60", placeholder: "null" })), isFilled ? (_jsx("button", { type: "button", onClick: () => handleClear(field), className: "cursor-pointer rounded-lg bg-slate-700 px-2 py-1 text-[10px] font-semibold text-rose-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-rose-200", children: "Clear" })) : (_jsx("button", { type: "button", onClick: () => handleFill(field), className: "cursor-pointer rounded-lg bg-slate-700 px-2 py-1 text-[10px] font-semibold text-teal-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-teal-200", children: "Fill" }))] })), isMultiSelect && (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsxs("select", { value: "", onChange: (e) => handleMultiSelectAdd(field, e.target.value), className: "max-w-[180px] truncate rounded-lg bg-slate-800 px-2 py-1.5 text-[11px] text-slate-100 ring-1 ring-inset ring-slate-600 focus:outline-none focus:ring-2 focus:ring-sky-500/60", children: [_jsx("option", { value: "", children: "+ Add..." }), availableOptions.map((opt, idx) => (_jsx("option", { value: opt.key ?? '', children: opt.text || opt.key || '(empty)' }, opt.key ?? idx)))] }), isFilled && (_jsx("button", { type: "button", onClick: () => handleClear(field), className: "cursor-pointer rounded-lg bg-slate-700 px-2 py-1 text-[10px] font-semibold text-rose-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-rose-200", children: "Clear All" }))] }))] }), isMultiSelect && selectedValues.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 pl-8", children: selectedValues.map((val) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md bg-emerald-500/20 px-2 py-0.5 text-[11px] font-medium text-emerald-200 ring-1 ring-inset ring-emerald-500/30", children: [getOptionText(field, val), _jsx("button", { type: "button", onClick: () => handleMultiSelectRemove(field, val), className: "ml-0.5 cursor-pointer rounded hover:bg-sky-500/30 hover:text-sky-100", title: "Remove", children: _jsx("svg", { className: "h-3 w-3", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M3 3l6 6M9 3l-6 6" }) }) })] }, val))) }))] }, field.key));
+    };
+    // Render typed field (for computed, registered, extra)
+    const renderTypedField = (field) => {
+        const currentType = fieldTypes[field.key] ?? detectValueType(field.value);
+        const isFilled = field.hasValue;
+        return (_jsxs("div", { className: `flex items-center gap-2 rounded-lg px-2.5 py-2 ${isFilled
+                ? 'bg-emerald-500/10 ring-1 ring-inset ring-emerald-500/20'
+                : 'bg-white/5 ring-1 ring-inset ring-white/10'}`, children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded bg-slate-800 text-xs", children: "\u2022" }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate text-xs font-medium text-slate-100", title: field.key, children: field.key }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsxs("select", { value: currentType, onChange: (e) => handleTypeChange(field.key, e.target.value, field.value), className: "w-20 rounded-lg bg-slate-800 px-2 py-1.5 text-[11px] text-slate-100 ring-1 ring-inset ring-slate-600 focus:outline-none focus:ring-2 focus:ring-sky-500/60", children: [_jsx("option", { value: "null", children: "null" }), _jsx("option", { value: "boolean", children: "boolean" }), _jsx("option", { value: "text", children: "text" }), _jsx("option", { value: "number", children: "number" }), _jsx("option", { value: "json", children: "JSON" })] }), currentType === 'null' ? (_jsx("span", { className: "w-24 rounded-lg bg-slate-800/50 px-2 py-1.5 text-center text-[11px] font-mono text-slate-500 ring-1 ring-inset ring-slate-700", children: "null" })) : currentType === 'boolean' ? (_jsxs("select", { value: String(field.value ?? false), onChange: (e) => handleTypedValueChange(field.key, 'boolean', e.target.value), className: "w-24 rounded-lg bg-slate-800 px-2 py-1.5 text-[11px] text-slate-100 ring-1 ring-inset ring-slate-600 focus:outline-none focus:ring-2 focus:ring-sky-500/60", children: [_jsx("option", { value: "true", children: "true" }), _jsx("option", { value: "false", children: "false" })] })) : currentType === 'number' ? (_jsx("input", { type: "number", value: field.value === null || field.value === undefined ? '' : String(field.value), onChange: (e) => {
+                                const input = e.target;
+                                const value = input.value;
+                                restoreCursorAfterUpdate(input, () => handleTypedValueChange(field.key, 'number', value));
+                            }, className: "w-24 rounded-lg bg-slate-800 px-2 py-1.5 text-[11px] font-mono text-slate-100 ring-1 ring-inset ring-slate-600 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60", placeholder: "0" })) : currentType === 'json' ? (_jsx("textarea", { value: formatValue(field.value), onChange: (e) => {
+                                const input = e.target;
+                                const value = input.value;
+                                restoreCursorAfterUpdate(input, () => handleTypedValueChange(field.key, 'json', value));
+                            }, className: "h-8 w-32 resize-none rounded-lg bg-slate-800 px-2 py-1 text-[10px] font-mono text-slate-100 ring-1 ring-inset ring-slate-600 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60", placeholder: "{}" })) : (_jsx("input", { type: "text", value: field.value === null || field.value === undefined ? '' : String(field.value), onChange: (e) => {
+                                const input = e.target;
+                                const value = input.value;
+                                restoreCursorAfterUpdate(input, () => handleTypedValueChange(field.key, 'text', value));
+                            }, className: "w-32 rounded-lg bg-slate-800 px-2 py-1.5 text-[11px] font-mono text-slate-100 ring-1 ring-inset ring-slate-600 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60", placeholder: "" })), isFilled && (_jsx("button", { type: "button", onClick: () => handleClear(field), className: "cursor-pointer rounded-lg bg-slate-700 px-2 py-1 text-[10px] font-semibold text-rose-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-rose-200", children: "Clear" }))] })] }, field.key));
+    };
+    const categories = ['component', 'computed', 'registered', 'built-in', 'extra'];
+    return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-xl bg-slate-950/60 p-2 ring-1 ring-inset ring-white/10", children: _jsx("div", { className: "space-y-3", children: categories.map((category) => {
+                    // Special handling for component fields
+                    if (category === 'component') {
+                        if (allComponentFields.length === 0)
+                            return null;
+                        const isExpanded = expandedCategories.has(category);
+                        const filledCount = allComponentFields.filter((f) => f.hasValue).length;
+                        const thisPageFields = allComponentFields.filter((f) => f.pageIds?.includes(currentPageId));
+                        const thisPageFilledCount = thisPageFields.filter((f) => f.hasValue).length;
+                        return (_jsxs("div", { children: [_jsxs("div", { className: "flex w-full items-center justify-between rounded-lg bg-slate-800/50 px-2.5 py-2 hover:bg-slate-800", children: [_jsxs("button", { type: "button", onClick: () => toggleCategory(category), className: "flex cursor-pointer items-center gap-2", children: [_jsx("span", { className: "text-[11px] text-slate-400", children: isExpanded ? '▼' : '▶' }), _jsx("span", { className: `text-[11px] font-semibold uppercase tracking-wider ${getCategoryColor(category)}`, children: getCategoryLabel(category) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center rounded-lg bg-slate-900/50 p-0.5 ring-1 ring-inset ring-slate-700", children: [_jsx("button", { type: "button", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                setComponentFilter('filled');
+                                                            }, className: `cursor-pointer rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${componentFilter === 'filled'
+                                                                ? 'bg-slate-700 text-slate-100'
+                                                                : 'text-slate-400 hover:text-slate-300'}`, children: "Filled" }), _jsx("button", { type: "button", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                setComponentFilter('thisPage');
+                                                            }, className: `cursor-pointer rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${componentFilter === 'thisPage'
+                                                                ? 'bg-slate-700 text-slate-100'
+                                                                : 'text-slate-400 hover:text-slate-300'}`, children: "This Page" }), _jsx("button", { type: "button", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                setComponentFilter('all');
+                                                            }, className: `cursor-pointer rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${componentFilter === 'all'
+                                                                ? 'bg-slate-700 text-slate-100'
+                                                                : 'text-slate-400 hover:text-slate-300'}`, children: "All" })] }), _jsxs("div", { className: "flex items-center justify-end gap-1.5 min-w-18", children: [_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-500/20 px-2 py-0.5 text-[10px] font-medium text-emerald-300 ring-1 ring-inset ring-emerald-500/30", children: componentFilter === 'thisPage' ? thisPageFilledCount : filledCount }), _jsx("span", { className: "text-[10px] text-slate-500", children: "/" }), _jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-slate-700/50 px-2 py-0.5 text-[10px] font-medium text-slate-300 ring-1 ring-inset ring-slate-600/50", children: componentFilter === 'thisPage'
+                                                                ? thisPageFields.length
+                                                                : allComponentFields.length })] })] })] }), isExpanded && (_jsx("div", { className: "mt-1 space-y-1", children: filteredComponentFields.length === 0 ? (_jsx("div", { className: "px-2 py-2 text-[11px] text-slate-500", children: componentFilter === 'filled'
+                                            ? 'No components with values'
+                                            : componentFilter === 'thisPage'
+                                                ? 'No components on this page'
+                                                : 'No components match the filter' })) : (filteredComponentFields.map(renderComponentField)) }))] }, category));
+                    }
+                    // Built-in fields
+                    if (category === 'built-in') {
+                        const categoryFields = groupedFields[category];
+                        if (categoryFields.length === 0)
+                            return null;
+                        const isExpanded = expandedCategories.has(category);
+                        return (_jsxs("div", { children: [_jsx("button", { type: "button", onClick: () => toggleCategory(category), className: "flex w-full cursor-pointer items-center justify-between rounded-lg bg-slate-800/50 px-2.5 py-2 hover:bg-slate-800", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[11px] text-slate-400", children: isExpanded ? '▼' : '▶' }), _jsx("span", { className: `text-[11px] font-semibold uppercase tracking-wider ${getCategoryColor(category)}`, children: getCategoryLabel(category) })] }) }), isExpanded && (_jsx("div", { className: "mt-1 space-y-1", children: categoryFields.map(renderBuiltInField) }))] }, category));
+                    }
+                    // Computed, registered, and extra fields with type dropdowns
+                    const categoryFields = groupedFields[category];
+                    if (categoryFields.length === 0)
+                        return null;
+                    const isExpanded = expandedCategories.has(category);
+                    const filledCount = categoryFields.filter((f) => f.hasValue).length;
+                    const showCounts = category !== 'extra';
+                    return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => toggleCategory(category), className: "flex w-full cursor-pointer items-center justify-between rounded-lg bg-slate-800/50 px-2.5 py-2 hover:bg-slate-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[11px] text-slate-400", children: isExpanded ? '▼' : '▶' }), _jsx("span", { className: `text-[11px] font-semibold uppercase tracking-wider ${getCategoryColor(category)}`, children: getCategoryLabel(category) })] }), showCounts && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-500/20 px-2 py-0.5 text-[10px] font-medium text-emerald-300 ring-1 ring-inset ring-emerald-500/30", children: filledCount }), _jsx("span", { className: "text-[10px] text-slate-500", children: "/" }), _jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-slate-700/50 px-2 py-0.5 text-[10px] font-medium text-slate-300 ring-1 ring-inset ring-slate-600/50", children: categoryFields.length })] }))] }), isExpanded && (_jsx("div", { className: "mt-1 space-y-1", children: categoryFields.map(renderTypedField) }))] }, category));
+                }) }) }) }));
+}