@embeddables/cli 0.1.0

package/dist/workbench/AutofillPanel.js

@@ -0,0 +1,543 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+// Generate realistic test data based on input type
+function generateTestValue(comp) {
+    const inputComp = comp;
+    const inputType = inputComp.input_type || 'text';
+    switch (inputType) {
+        case 'email':
+            return 'test@example.com';
+        case 'phone':
+            return '+1 (555) 123-4567';
+        case 'number':
+            const min = inputComp.range_min !== undefined ? Number(inputComp.range_min) : 0;
+            const max = inputComp.range_max !== undefined ? Number(inputComp.range_max) : 100;
+            return String(Math.floor((min + max) / 2));
+        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':
+            const rangeMin = inputComp.range_min !== undefined ? Number(inputComp.range_min) : 0;
+            const rangeMax = inputComp.range_max !== undefined ? Number(inputComp.range_max) : 100;
+            return String(Math.floor((rangeMin + rangeMax) / 2));
+        case 'switch':
+        case 'checkbox':
+            return 'checked';
+        case 'text':
+        default:
+            // Generate contextual text based on key or label
+            const key = comp.key.toLowerCase();
+            const label = (comp.label || '').toLowerCase();
+            const context = `${key} ${label}`;
+            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('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('company') || context.includes('business'))
+                return 'Acme Inc.';
+            if (context.includes('title') || context.includes('job'))
+                return 'Software Engineer';
+            if (context.includes('website') || context.includes('url'))
+                return 'https://example.com';
+            if (context.includes('age'))
+                return '30';
+            if (context.includes('comment') || context.includes('message') || context.includes('note'))
+                return 'This is a test message for autofill purposes.';
+            return 'Test input';
+    }
+}
+// Fill an InputBox component
+function fillInputBox(componentId, value, inputType) {
+    const element = document.querySelector(`.cid-${componentId}`);
+    if (!element)
+        return false;
+    if (inputType === 'switch' || inputType === 'checkbox') {
+        const checkbox = element.querySelector('input[type="checkbox"]');
+        if (checkbox && !checkbox.checked) {
+            checkbox.click();
+            return true;
+        }
+        return false;
+    }
+    const input = element.querySelector('input, textarea');
+    if (!input)
+        return false;
+    // Focus and set value
+    input.focus();
+    // Use native value setter to trigger React's onChange
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+    const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set;
+    if (input instanceof HTMLTextAreaElement && nativeTextAreaValueSetter) {
+        nativeTextAreaValueSetter.call(input, value);
+    }
+    else if (nativeInputValueSetter) {
+        nativeInputValueSetter.call(input, value);
+    }
+    else {
+        input.value = value;
+    }
+    // Dispatch input event
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    // Blur to trigger validation
+    input.blur();
+    return true;
+}
+// Fill an OptionSelector component by clicking the first (or a random) option
+function fillOptionSelector(componentId, buttons, random = false) {
+    const element = document.querySelector(`.cid-${componentId}`);
+    if (!element)
+        return false;
+    // Check if it's a dropdown
+    const select = element.querySelector('select');
+    if (select) {
+        const options = Array.from(select.options).filter((opt) => opt.value);
+        if (options.length === 0)
+            return false;
+        const optionIndex = random ? Math.floor(Math.random() * options.length) : 0;
+        select.value = options[optionIndex].value;
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+        return true;
+    }
+    // Look for ButtonCard elements (the main clickable elements in OptionSelector)
+    // These are divs with data-action that handle clicks via Stimulus controller
+    const buttonCards = element.querySelectorAll('.ButtonCard:not(.selected), [data-components--option-selector-target="option"]:not(.selected)');
+    if (buttonCards.length > 0) {
+        const cardIndex = random ? Math.floor(Math.random() * buttonCards.length) : 0;
+        const card = buttonCards[cardIndex];
+        if (card) {
+            card.click();
+            return true;
+        }
+    }
+    // Fallback: try clicking any button element
+    const buttonElements = element.querySelectorAll('button:not([disabled])');
+    if (buttonElements.length > 0) {
+        const buttonIndex = random ? Math.floor(Math.random() * buttonElements.length) : 0;
+        const button = buttonElements[buttonIndex];
+        if (button) {
+            button.click();
+            return true;
+        }
+    }
+    return false;
+}
+export function AutofillPanel({ embeddableId }) {
+    const [inputComponents, setInputComponents] = useState([]);
+    const [currentPageKey, setCurrentPageKey] = useState('');
+    const [error, setError] = useState(null);
+    const [isAutofilling, setIsAutofilling] = useState(false);
+    const [lastAutofillTime, setLastAutofillTime] = useState(null);
+    const [useRandomOptions, setUseRandomOptions] = useState(false);
+    const savvy = window.Savvy;
+    // Scan current page for input components
+    const scanPage = useCallback(() => {
+        setError(null);
+        if (!savvy?.getFlowJson) {
+            setError('window.Savvy.getFlowJson is not available.');
+            return;
+        }
+        if (!savvy?.getUserData) {
+            setError('window.Savvy.getUserData is not available.');
+            return;
+        }
+        const flowJson = savvy.getFlowJson(embeddableId);
+        if (!flowJson) {
+            setError('Could not retrieve flow JSON.');
+            return;
+        }
+        const userData = savvy.getUserData(embeddableId);
+        if (!userData) {
+            setError('Could not retrieve user data.');
+            return;
+        }
+        const currentPageId = userData.current_page_id;
+        setCurrentPageKey(userData.current_page_key || '');
+        // Find the current page
+        const currentPage = flowJson.pages?.find((p) => p.id === currentPageId);
+        if (!currentPage) {
+            setError(`Current page "${currentPageId}" not found in flow.`);
+            return;
+        }
+        // Collect all input components from the current page
+        const inputs = [];
+        const processComponent = (comp) => {
+            if (comp.type === 'InputBox') {
+                const inputComp = comp;
+                const element = document.querySelector(`.cid-${comp.id}`);
+                const input = element?.querySelector('input, textarea');
+                const inputType = inputComp.input_type || 'text';
+                // Get current value
+                let currentValue;
+                if (inputType === 'switch' || inputType === 'checkbox') {
+                    const checkbox = element?.querySelector('input[type="checkbox"]');
+                    currentValue = checkbox?.checked ? 'checked' : undefined;
+                }
+                else if (input?.value) {
+                    currentValue = input.value;
+                }
+                inputs.push({
+                    id: comp.id,
+                    key: comp.key,
+                    type: comp.type,
+                    label: comp.label,
+                    inputType,
+                    filled: !!input?.value ||
+                        (inputType === 'checkbox' || inputType === 'switch'
+                            ? !!element?.querySelector('input[type="checkbox"]')?.checked
+                            : false),
+                    currentValue,
+                });
+            }
+            else if (comp.type === 'OptionSelector') {
+                const optComp = comp;
+                const element = document.querySelector(`.cid-${comp.id}`);
+                // Check if an option is selected by looking for the 'selected' class on button elements
+                // This is the most reliable indicator of the visual selection state
+                let hasSelection = false;
+                let currentValue;
+                if (element) {
+                    // Check for button-style OptionSelector (ButtonCard with 'selected' class)
+                    const selectedButton = element.querySelector('.ButtonCard.selected, [data-components--option-selector-target="option"].selected');
+                    if (selectedButton) {
+                        hasSelection = true;
+                        // Try to get the text content of the selected button
+                        currentValue = selectedButton.textContent?.trim() || undefined;
+                    }
+                    // Check for dropdown-style OptionSelector
+                    if (!hasSelection) {
+                        const select = element.querySelector('select');
+                        if (select && select.value) {
+                            hasSelection = true;
+                            currentValue = select.options[select.selectedIndex]?.text || select.value;
+                        }
+                    }
+                    // Check for checkbox/radio style
+                    if (!hasSelection) {
+                        const checkedInput = element.querySelector('input[type="checkbox"]:checked, input[type="radio"]:checked');
+                        if (checkedInput) {
+                            hasSelection = true;
+                            // Try to get label text
+                            const label = checkedInput.closest('label')?.textContent?.trim();
+                            currentValue = label || checkedInput.value || 'selected';
+                        }
+                    }
+                }
+                inputs.push({
+                    id: comp.id,
+                    key: comp.key,
+                    type: comp.type,
+                    label: comp.label,
+                    buttons: optComp.buttons?.map((b) => ({ key: b.key, text: b.text })) || [],
+                    filled: hasSelection,
+                    currentValue,
+                });
+            }
+            else if (comp.type === 'FileUpload') {
+                const element = document.querySelector(`.cid-${comp.id}`);
+                const input = element?.querySelector('input[type="file"]');
+                const hasFiles = !!(input?.files && input.files.length > 0);
+                // Get filename(s) if any
+                let currentValue;
+                if (hasFiles && input?.files) {
+                    const fileNames = Array.from(input.files).map((f) => f.name);
+                    currentValue = fileNames.join(', ');
+                }
+                inputs.push({
+                    id: comp.id,
+                    key: comp.key,
+                    type: comp.type,
+                    label: comp.label,
+                    filled: hasFiles,
+                    currentValue,
+                });
+            }
+            // Process nested components (e.g., in Container)
+            if (comp.components) {
+                comp.components.forEach(processComponent);
+            }
+        };
+        currentPage.components?.forEach(processComponent);
+        // Also check global components that might be visible
+        flowJson.components?.forEach(processComponent);
+        setInputComponents(inputs);
+    }, [embeddableId, savvy]);
+    useEffect(() => {
+        // Initial scan with a small delay to ensure DOM is ready
+        const timer = setTimeout(scanPage, 300);
+        return () => clearTimeout(timer);
+    }, [scanPage]);
+    // Re-scan when page changes
+    useEffect(() => {
+        const handleUserDataUpdate = () => {
+            setTimeout(scanPage, 100);
+        };
+        window.addEventListener('embeddables:userdata_updated', handleUserDataUpdate);
+        return () => window.removeEventListener('embeddables:userdata_updated', handleUserDataUpdate);
+    }, [scanPage]);
+    const handleAutofill = async () => {
+        setIsAutofilling(true);
+        setError(null);
+        let filledCount = 0;
+        for (const comp of inputComponents) {
+            if (comp.filled)
+                continue; // Skip already filled
+            try {
+                if (comp.type === 'InputBox') {
+                    const testValue = generateTestValue({
+                        key: comp.key,
+                        label: comp.label,
+                        input_type: comp.inputType,
+                    });
+                    if (fillInputBox(comp.id, testValue, comp.inputType || 'text')) {
+                        filledCount++;
+                    }
+                }
+                else if (comp.type === 'OptionSelector' && comp.buttons && comp.buttons.length > 0) {
+                    if (fillOptionSelector(comp.id, comp.buttons, useRandomOptions)) {
+                        filledCount++;
+                    }
+                }
+                // FileUpload is skipped as it requires actual file selection
+                // Small delay between fills
+                await new Promise((resolve) => setTimeout(resolve, 50));
+            }
+            catch (err) {
+                console.error(`Error filling component ${comp.id}:`, err);
+            }
+        }
+        setLastAutofillTime(Date.now());
+        setIsAutofilling(false);
+        // Re-scan to update filled status
+        setTimeout(scanPage, 200);
+        return filledCount;
+    };
+    const handleClearPage = () => {
+        setError(null);
+        // Collect OptionSelector keys to clear via setUserData
+        const optionSelectorKeys = [];
+        for (const comp of inputComponents) {
+            try {
+                const element = document.querySelector(`.cid-${comp.id}`);
+                if (!element)
+                    continue;
+                if (comp.type === 'InputBox') {
+                    const inputType = comp.inputType || 'text';
+                    if (inputType === 'switch' || inputType === 'checkbox') {
+                        const checkbox = element.querySelector('input[type="checkbox"]');
+                        if (checkbox && checkbox.checked) {
+                            checkbox.click();
+                        }
+                    }
+                    else {
+                        const input = element.querySelector('input, textarea');
+                        if (input) {
+                            input.focus();
+                            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+                            const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set;
+                            if (input instanceof HTMLTextAreaElement && nativeTextAreaValueSetter) {
+                                nativeTextAreaValueSetter.call(input, '');
+                            }
+                            else if (nativeInputValueSetter) {
+                                nativeInputValueSetter.call(input, '');
+                            }
+                            else {
+                                input.value = '';
+                            }
+                            input.dispatchEvent(new Event('input', { bubbles: true }));
+                            input.dispatchEvent(new Event('change', { bubbles: true }));
+                            input.blur();
+                        }
+                    }
+                }
+                else if (comp.type === 'OptionSelector') {
+                    // For dropdowns, reset to first (empty) option
+                    const select = element.querySelector('select');
+                    if (select) {
+                        select.value = '';
+                        select.dispatchEvent(new Event('change', { bubbles: true }));
+                    }
+                    // For button cards, we need to clear via setUserData since clicking
+                    // a selected option doesn't deselect it (no toggle behavior)
+                    if (comp.filled) {
+                        optionSelectorKeys.push(comp.key);
+                    }
+                    // For checkbox/radio inputs
+                    const checkedInputs = element.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked');
+                    checkedInputs.forEach((input) => {
+                        input.click();
+                    });
+                }
+            }
+            catch (err) {
+                console.error(`Error clearing component ${comp.id}:`, err);
+            }
+        }
+        // Clear OptionSelector values via setUserData
+        if (optionSelectorKeys.length > 0 && savvy?.getUserData && savvy?.setUserData) {
+            const userData = savvy.getUserData(embeddableId);
+            if (userData) {
+                const clearedFields = {};
+                for (const key of optionSelectorKeys) {
+                    clearedFields[key] = null;
+                }
+                savvy.setUserData(embeddableId, clearedFields);
+            }
+        }
+        // Re-scan to update filled status
+        setTimeout(scanPage, 200);
+    };
+    const handleClearSingle = (comp) => {
+        setError(null);
+        try {
+            const element = document.querySelector(`.cid-${comp.id}`);
+            if (!element)
+                return;
+            if (comp.type === 'InputBox') {
+                const inputType = comp.inputType || 'text';
+                if (inputType === 'switch' || inputType === 'checkbox') {
+                    const checkbox = element.querySelector('input[type="checkbox"]');
+                    if (checkbox && checkbox.checked) {
+                        checkbox.click();
+                    }
+                }
+                else {
+                    const input = element.querySelector('input, textarea');
+                    if (input) {
+                        input.focus();
+                        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+                        const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set;
+                        if (input instanceof HTMLTextAreaElement && nativeTextAreaValueSetter) {
+                            nativeTextAreaValueSetter.call(input, '');
+                        }
+                        else if (nativeInputValueSetter) {
+                            nativeInputValueSetter.call(input, '');
+                        }
+                        else {
+                            input.value = '';
+                        }
+                        input.dispatchEvent(new Event('input', { bubbles: true }));
+                        input.dispatchEvent(new Event('change', { bubbles: true }));
+                        input.blur();
+                    }
+                }
+            }
+            else if (comp.type === 'OptionSelector') {
+                // For dropdowns, reset to first (empty) option
+                const select = element.querySelector('select');
+                if (select) {
+                    select.value = '';
+                    select.dispatchEvent(new Event('change', { bubbles: true }));
+                }
+                // For button cards, we need to clear via setUserData since clicking
+                // a selected option doesn't deselect it (no toggle behavior)
+                if (comp.filled && savvy?.getUserData && savvy?.setUserData) {
+                    const userData = savvy.getUserData(embeddableId);
+                    if (userData) {
+                        savvy.setUserData(embeddableId, { [comp.key]: null });
+                    }
+                }
+                // For checkbox/radio inputs
+                const checkedInputs = element.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked');
+                checkedInputs.forEach((input) => {
+                    input.click();
+                });
+            }
+            // Re-scan to update filled status
+            setTimeout(scanPage, 200);
+        }
+        catch (err) {
+            setError(err?.message || String(err));
+        }
+    };
+    const handleAutofillAndNext = async () => {
+        await handleAutofill();
+        // Wait a bit for the DOM to update after autofill
+        await new Promise((resolve) => setTimeout(resolve, 150));
+        // Find the first CustomButton with next-page or page-* action
+        const nextButton = document.querySelector('[data-components--custom-button-action-value="next-page"], ' +
+            '[data-components--custom-button-action-value^="page-"]');
+        if (nextButton) {
+            nextButton.click();
+        }
+        else {
+            setError('No next page button found on this page.');
+        }
+    };
+    const handleFillSingle = (comp) => {
+        setError(null);
+        try {
+            if (comp.type === 'InputBox') {
+                const testValue = generateTestValue({
+                    key: comp.key,
+                    label: comp.label,
+                    input_type: comp.inputType,
+                });
+                fillInputBox(comp.id, testValue, comp.inputType || 'text');
+            }
+            else if (comp.type === 'OptionSelector' && comp.buttons && comp.buttons.length > 0) {
+                fillOptionSelector(comp.id, comp.buttons, useRandomOptions);
+            }
+            // Re-scan to update filled status
+            setTimeout(scanPage, 200);
+        }
+        catch (err) {
+            setError(err?.message || String(err));
+        }
+    };
+    const getInputTypeIcon = (type, inputType) => {
+        if (type === 'OptionSelector')
+            return '☰';
+        if (type === 'FileUpload')
+            return '📎';
+        switch (inputType) {
+            case 'email':
+                return '✉';
+            case 'phone':
+                return '☎';
+            case 'number':
+                return '#';
+            case 'date':
+                return '📅';
+            case 'time':
+                return '⏰';
+            case 'month':
+                return '📆';
+            case 'password':
+            case 'confirm':
+                return '🔒';
+            case 'checkbox':
+            case 'switch':
+                return '☑';
+            case 'range':
+                return '↔';
+            default:
+                return '𝐓';
+        }
+    };
+    const unfilledCount = inputComponents.filter((c) => !c.filled && c.type !== 'FileUpload').length;
+    return (_jsxs("div", { className: "mx-auto flex h-full w-full max-w-6xl flex-col", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-semibold tracking-wide text-slate-100", children: "Autofill Components" }), _jsx("div", { className: "mt-0.5 text-[11px] text-slate-400", children: "Automatically fill input components on the current page with test data." })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-start gap-2 flex-2 sm:justify-end", children: [_jsxs("label", { className: "flex cursor-pointer items-center gap-1.5 text-[11px] text-slate-400", children: [_jsx("input", { type: "checkbox", checked: useRandomOptions, onChange: (e) => setUseRandomOptions(e.target.checked), className: "h-3 w-3 rounded border-slate-600 bg-slate-800 text-sky-500 focus:ring-sky-500/50" }), "Random options"] }), _jsx("button", { type: "button", onClick: scanPage, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white", children: "Rescan" }), _jsxs("button", { type: "button", onClick: handleClearPage, disabled: isAutofilling || inputComponents.length === 0, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx("span", { className: "text-sm", children: "\uD83D\uDDD1" }), "Clear Page"] }), _jsx("button", { type: "button", onClick: handleAutofill, disabled: isAutofilling || unfilledCount === 0, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-emerald-600 px-2.5 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-emerald-500 hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-60", children: isAutofilling ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "inline-block h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent" }), "Filling..."] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-sm", children: "\u26A1" }), "Autofill All (", unfilledCount, ")"] })) }), _jsxs("button", { type: "button", onClick: handleAutofillAndNext, disabled: isAutofilling, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-sky-600 px-2.5 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-sky-500 hover:bg-sky-500 disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx("span", { className: "text-sm", children: "\u26A1\u2192" }), "Autofill All + Next"] })] })] }), error && (_jsx("div", { className: "mt-3 rounded-xl bg-rose-500/10 px-3 py-2 text-xs text-rose-200 ring-1 ring-inset ring-rose-500/20", children: error })), lastAutofillTime && (_jsx("div", { className: "mt-3 rounded-xl bg-emerald-500/10 px-3 py-2 text-xs text-emerald-200 ring-1 ring-inset ring-emerald-500/20", children: "Autofill completed. Components have been filled with test data." })), _jsxs("div", { className: "mt-4 flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-slate-400", children: "Input Components" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-500/20 px-2 py-0.5 text-[11px] font-medium text-emerald-300 ring-1 ring-inset ring-emerald-500/30", children: [_jsx("span", { className: "text-emerald-400", children: inputComponents.filter((c) => c.filled).length }), _jsx("span", { className: "text-emerald-300/60", children: "filled" })] }), _jsx("span", { className: "text-slate-300 text-[12px]", children: "of" }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-slate-700/50 px-2 py-0.5 text-[11px] font-medium text-slate-300 ring-1 ring-inset ring-slate-600/50", children: [_jsx("span", { children: inputComponents.length }), _jsx("span", { className: "text-slate-400", children: "total" })] })] })] }), inputComponents.length === 0 ? (_jsx("div", { className: "flex flex-1 items-center justify-center text-[11px] text-slate-500", children: "No input components found on the current page." })) : (_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-1", children: inputComponents.map((comp) => (_jsxs("div", { className: `flex items-center justify-between gap-2 rounded-lg px-2.5 py-2 ${comp.filled
+                                    ? '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", title: comp.inputType || comp.type, children: getInputTypeIcon(comp.type, comp.inputType) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-xs font-medium text-slate-100", children: comp.label || comp.key }), _jsxs("div", { className: "flex items-center gap-2 text-[10px] text-slate-500", children: [_jsx("span", { children: comp.type }), comp.inputType && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u2022" }), _jsx("span", { className: "font-mono", children: comp.inputType })] })), comp.buttons && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u2022" }), _jsxs("span", { children: [comp.buttons.length, " options"] })] }))] })] }), comp.currentValue && (_jsx("div", { className: "min-w-0 max-w-[200px] shrink-0", children: _jsx("div", { className: "truncate rounded bg-slate-800/80 px-2 py-1 text-[10px] font-mono text-sky-300", title: comp.currentValue, children: comp.currentValue }) }))] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: comp.type === 'FileUpload' ? (_jsx("span", { className: "text-[10px] text-slate-500", children: "Manual only" })) : comp.filled ? (_jsx("button", { type: "button", onClick: () => handleClearSingle(comp), 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: () => handleFillSingle(comp), 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" })) })] }, comp.id))) }) }))] })] }));
+}

package/dist/workbench/ComputedFieldsPanel.d.ts

@@ -0,0 +1,6 @@
+type ComputedFieldsPanelProps = {
+    embeddableId: string;
+};
+export declare function ComputedFieldsPanel({ embeddableId }: ComputedFieldsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ComputedFieldsPanel.d.ts.map

package/dist/workbench/ComputedFieldsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComputedFieldsPanel.d.ts","sourceRoot":"","sources":["../../src/workbench/ComputedFieldsPanel.tsx"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AASD,wBAAgB,mBAAmB,CAAC,EAAE,YAAY,EAAE,EAAE,wBAAwB,2CA4I7E"}

package/dist/workbench/ComputedFieldsPanel.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+export function ComputedFieldsPanel({ embeddableId }) {
+    const [computedFields, setComputedFields] = useState([]);
+    const [selectedField, setSelectedField] = useState(null);
+    const [error, setError] = useState(null);
+    const savvy = window.Savvy;
+    const refresh = useCallback(() => {
+        if (!savvy?.getFlowJson)
+            return;
+        try {
+            const flowJson = savvy.getFlowJson(embeddableId);
+            const list = flowJson?.computedFields ?? [];
+            setComputedFields(list);
+            setSelectedField((prev) => {
+                const stillExists = prev && list.some((cf) => cf.id === prev.id);
+                return stillExists ? prev : (list[0] ?? null);
+            });
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    }, [embeddableId, savvy]);
+    useEffect(() => {
+        refresh();
+    }, [refresh]);
+    return (_jsxs("div", { className: "mx-auto flex h-full w-full max-w-6xl flex-col", children: [_jsxs("div", { className: "mb-3", children: [_jsx("div", { className: "text-xs font-semibold tracking-wide text-slate-100", children: "Computed Fields" }), _jsx("div", { className: "mt-0.5 text-[11px] text-slate-400", children: "View computed field metadata and code. Computed values are derived from user data." })] }), error && (_jsx("div", { className: "mb-3 rounded-xl bg-rose-500/10 px-3 py-2 text-xs text-rose-200 ring-1 ring-inset ring-rose-500/20", children: error })), _jsxs("div", { className: "flex min-h-0 flex-1 gap-3 overflow-hidden", children: [_jsxs("div", { className: "flex w-1/3 min-w-0 shrink-0 flex-col", children: [_jsx("div", { className: "mb-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400", children: "Computed Fields" }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-xl bg-slate-950/60 ring-1 ring-inset ring-white/10", children: computedFields.length === 0 ? (_jsx("div", { className: "p-3 text-[11px] italic text-slate-500", children: "No computed fields defined." })) : (_jsx("div", { className: "p-1", children: computedFields.map((field) => (_jsxs("button", { type: "button", onClick: () => setSelectedField(field), className: `w-full rounded-lg px-2.5 py-2 text-left text-xs transition-colors ${selectedField?.id === field.id
+                                            ? 'bg-white/15 text-slate-100 ring-1 ring-inset ring-white/20'
+                                            : 'text-slate-300 hover:bg-white/5 hover:text-slate-100'}`, children: [_jsx("span", { className: "block truncate font-medium", children: field.key || field.id }), _jsx("span", { className: "mt-0.5 block truncate font-mono text-[10px] text-slate-500", children: field.id })] }, field.id))) })) })] }), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsx("div", { className: "mb-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400", children: selectedField ? selectedField.key || selectedField.id : 'Select a computed field' }), selectedField ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs("span", { className: "inline-flex items-center rounded-md bg-slate-700/80 px-2 py-1 font-mono text-[10px] text-slate-200 ring-1 ring-inset ring-slate-600", children: ["id: ", selectedField.id] }), _jsxs("span", { className: "inline-flex items-center rounded-md bg-slate-700/80 px-2 py-1 font-mono text-[10px] text-slate-200 ring-1 ring-inset ring-slate-600", children: ["key: ", selectedField.key] }), _jsx("span", { className: "inline-flex items-center rounded-md bg-amber-500/20 px-2 py-1 text-[10px] font-medium text-amber-300 ring-1 ring-inset ring-amber-500/30", children: selectedField.formula }), selectedField.inputs && selectedField.inputs.length > 0 && (_jsxs("span", { className: "inline-flex items-center rounded-md bg-teal-500/20 px-2 py-1 text-[10px] text-teal-300 ring-1 ring-inset ring-teal-500/30", children: ["inputs: [", selectedField.inputs.join(', '), "]"] })), selectedField.async && (_jsx("span", { className: "inline-flex items-center rounded-md bg-sky-500/20 px-2 py-1 text-[10px] font-medium text-sky-300 ring-1 ring-inset ring-sky-500/30", children: "async" })), selectedField.doNotSave && (_jsxs("span", { className: "inline-flex items-center rounded-md bg-rose-500/20 px-2 py-1 text-[10px] font-medium text-rose-300 ring-1 ring-inset ring-rose-500/30", children: ["doNotSave: ", String(selectedField.doNotSave)] })), selectedField.use_full_user_data && (_jsx("span", { className: "inline-flex items-center rounded-md bg-purple-500/20 px-2 py-1 text-[10px] font-medium text-purple-300 ring-1 ring-inset ring-purple-500/30", children: "use_full_user_data" })), selectedField.cache_data && (_jsx("span", { className: "inline-flex items-center rounded-md bg-emerald-500/20 px-2 py-1 text-[10px] font-medium text-emerald-300 ring-1 ring-inset ring-emerald-500/30", children: "cache_data" }))] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsx("pre", { className: "min-h-0 flex-1 overflow-auto rounded-xl bg-slate-950/60 p-3 font-mono text-xs leading-5 text-slate-100 ring-1 ring-inset ring-white/10", children: selectedField.code?.trim() || '(no code)' }) })] })) : (_jsx("div", { className: "flex flex-1 items-center justify-center rounded-xl bg-slate-950/60 ring-1 ring-inset ring-white/10", children: _jsx("span", { className: "text-[11px] text-slate-500", children: "Select a computed field from the list" }) }))] })] })] }));
+}

package/dist/workbench/ExperimentsPanel.d.ts

@@ -0,0 +1,6 @@
+type ExperimentsPanelProps = {
+    embeddableId: string;
+};
+export declare function ExperimentsPanel({ embeddableId }: ExperimentsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExperimentsPanel.d.ts.map

package/dist/workbench/ExperimentsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExperimentsPanel.d.ts","sourceRoot":"","sources":["../../src/workbench/ExperimentsPanel.tsx"],"names":[],"mappings":"AAGA,KAAK,qBAAqB,GAAG;IAC3B,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAwED,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE,EAAE,qBAAqB,2CAgQvE"}