@embeddables/cli 0.1.0

package/dist/workbench/SchemaPanel.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+// Component types that store data in user data
+const INPUT_COMPONENT_TYPES = ['InputBox', 'OptionSelector', 'FileUpload'];
+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',
+];
+function inferTypeFromInputType(inputType) {
+    switch (inputType) {
+        case 'number':
+        case 'range':
+            return 'number';
+        case 'switch':
+        case 'checkbox':
+            return 'boolean';
+        case 'date':
+        case 'time':
+        case 'month':
+        case 'email':
+        case 'phone':
+        case 'text':
+        case 'password':
+        case 'confirm':
+        default:
+            return 'string';
+    }
+}
+function escapeKey(key) {
+    // If the key contains special characters, wrap it in quotes
+    if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {
+        return key;
+    }
+    return `'${key}'`;
+}
+export function SchemaPanel({ embeddableId }) {
+    const [schema, setSchema] = useState('');
+    const [includeComments, setIncludeComments] = useState(false);
+    const savvy = window.Savvy;
+    const generateSchema = useCallback(() => {
+        const flowJson = savvy?.getFlowJson?.(embeddableId);
+        if (!flowJson) {
+            setSchema('// Unable to load flow JSON');
+            return;
+        }
+        // Collect component fields
+        const componentFields = new Map();
+        const processComponent = (comp) => {
+            if (!comp.key || !INPUT_COMPONENT_TYPES.includes(comp.type))
+                return;
+            const existing = componentFields.get(comp.key);
+            if (comp.type === 'InputBox') {
+                const inputComp = comp;
+                const tsType = inferTypeFromInputType(inputComp.input_type);
+                componentFields.set(comp.key, {
+                    key: comp.key,
+                    tsType: `${tsType} | null`,
+                    componentType: 'InputBox',
+                    inputType: inputComp.input_type,
+                    comment: comp.label ? `${comp.label}` : undefined,
+                });
+            }
+            else if (comp.type === 'OptionSelector') {
+                const optComp = comp;
+                const options = optComp.buttons?.map((b) => b.key).filter(Boolean);
+                let tsType;
+                if (options && options.length > 0) {
+                    tsType = options.map((o) => `'${o}'`).join(' | ');
+                    if (optComp.multiple) {
+                        tsType = `(${tsType})[]`;
+                    }
+                }
+                else {
+                    tsType = optComp.multiple ? 'string[]' : 'string';
+                }
+                componentFields.set(comp.key, {
+                    key: comp.key,
+                    tsType: `${tsType} | null`,
+                    componentType: 'OptionSelector',
+                    options,
+                    comment: comp.label ? `${comp.label}` : undefined,
+                });
+            }
+            else if (comp.type === 'FileUpload') {
+                componentFields.set(comp.key, {
+                    key: comp.key,
+                    tsType: 'string | null', // File uploads typically store a URL or file reference
+                    componentType: 'FileUpload',
+                    comment: comp.label ? `${comp.label}` : undefined,
+                });
+            }
+            // Process nested components
+            if (comp.components) {
+                comp.components.forEach(processComponent);
+            }
+        };
+        // Process all pages and global components
+        flowJson.pages?.forEach((page) => {
+            page.components?.forEach(processComponent);
+        });
+        flowJson.components?.forEach(processComponent);
+        // Collect computed fields
+        const computedFields = [];
+        flowJson.computedFields?.forEach((cf) => {
+            if (cf.key) {
+                computedFields.push({
+                    key: cf.key,
+                    tsType: 'unknown', // Computed fields can return any type
+                    comment: 'Computed field',
+                });
+            }
+        });
+        // Collect registered keys
+        const registeredFields = [];
+        if (flowJson.registered_keys) {
+            const keys = flowJson.registered_keys
+                .split(/[\n,]/)
+                .map((k) => k.trim())
+                .filter(Boolean);
+            keys.forEach((key) => {
+                if (!componentFields.has(key)) {
+                    registeredFields.push({
+                        key,
+                        tsType: 'unknown',
+                        comment: 'Registered key',
+                    });
+                }
+            });
+        }
+        // Generate TypeScript
+        const lines = [];
+        lines.push('/**');
+        lines.push(` * UserData schema for embeddable: ${flowJson.title || flowJson.name || embeddableId}`);
+        lines.push(' * Auto-generated from flow configuration');
+        lines.push(' */');
+        lines.push('type UserData = {');
+        // Built-in keys
+        lines.push('  // Built-in keys');
+        lines.push('  entryId: string');
+        lines.push('  current_page_id: string');
+        lines.push('  current_page_key: string');
+        lines.push('  current_page_index: number');
+        lines.push('  highest_page_reached_id: string');
+        lines.push('  highest_page_reached_key: string');
+        lines.push('  highest_page_reached_index: number');
+        lines.push('');
+        // Component fields
+        if (componentFields.size > 0) {
+            lines.push('  // Component fields');
+            const sortedFields = Array.from(componentFields.values()).sort((a, b) => a.key.localeCompare(b.key));
+            for (const field of sortedFields) {
+                if (includeComments) {
+                    if (field.comment) {
+                        lines.push(`  /** ${field.comment} (${field.componentType}${field.inputType ? `: ${field.inputType}` : ''}) */`);
+                    }
+                    else if (field.componentType) {
+                        lines.push(`  /** ${field.componentType}${field.inputType ? `: ${field.inputType}` : ''} */`);
+                    }
+                }
+                lines.push(`  ${escapeKey(field.key)}: ${field.tsType}`);
+            }
+            lines.push('');
+        }
+        // Computed fields
+        if (computedFields.length > 0) {
+            lines.push('  // Computed fields');
+            const sortedFields = computedFields.sort((a, b) => a.key.localeCompare(b.key));
+            for (const field of sortedFields) {
+                if (includeComments) {
+                    lines.push(`  /** ${field.comment} */`);
+                }
+                lines.push(`  ${escapeKey(field.key)}?: ${field.tsType}`);
+            }
+            lines.push('');
+        }
+        // Registered keys
+        if (registeredFields.length > 0) {
+            lines.push('  // Registered keys');
+            const sortedFields = registeredFields.sort((a, b) => a.key.localeCompare(b.key));
+            for (const field of sortedFields) {
+                lines.push(`  ${escapeKey(field.key)}?: ${field.tsType}`);
+            }
+            lines.push('');
+        }
+        // Index signature for any additional keys
+        lines.push('  // Additional dynamic keys');
+        lines.push('  [key: string]: unknown');
+        lines.push('}');
+        // Generate page keys type
+        const pageKeys = flowJson.pages?.map((p) => `'${p.key}'`) || [];
+        if (pageKeys.length > 0) {
+            lines.push('');
+            lines.push('/**');
+            lines.push(' * Available page keys in this flow');
+            lines.push(' */');
+            lines.push(`type PageKey = ${pageKeys.join(' | ')}`);
+        }
+        // Generate page IDs type
+        const pageIds = flowJson.pages?.map((p) => `'${p.id}'`) || [];
+        if (pageIds.length > 0) {
+            lines.push('');
+            lines.push('/**');
+            lines.push(' * Available page IDs in this flow');
+            lines.push(' */');
+            lines.push(`type PageId = ${pageIds.join(' | ')}`);
+        }
+        setSchema(lines.join('\n'));
+    }, [embeddableId, savvy, includeComments]);
+    useEffect(() => {
+        const timer = setTimeout(generateSchema, 100);
+        return () => clearTimeout(timer);
+    }, [generateSchema]);
+    const handleCopy = () => {
+        navigator.clipboard.writeText(schema);
+    };
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-[11px] text-slate-400", children: "TypeScript type definition" }), _jsxs("label", { className: "flex cursor-pointer items-center gap-1.5 text-[11px] text-slate-400", children: [_jsx("input", { type: "checkbox", checked: includeComments, onChange: (e) => setIncludeComments(e.target.checked), className: "h-3 w-3 rounded border-slate-600 bg-slate-800 text-sky-500 focus:ring-sky-500/50" }), "Include component-level comments"] })] }), _jsx("button", { type: "button", onClick: handleCopy, className: "cursor-pointer rounded-lg bg-slate-700 px-2 py-1 text-[10px] font-semibold text-slate-200 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white", children: "Copy" })] }), _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: schema })] }));
+}

package/dist/workbench/UserDataPanel.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserDataPanel.d.ts","sourceRoot":"","sources":["../../src/workbench/UserDataPanel.tsx"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAqGD,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,EAAE,kBAAkB,2CAmcjE"}

package/dist/workbench/UserDataPanel.js

@@ -0,0 +1,350 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { FieldEditorPanel } from './FieldEditorPanel';
+import { SchemaPanel } from './SchemaPanel';
+const STORAGE_KEY_PREFIX = 'embeddables:workbench:';
+const USERDATA_UPDATED_EVENT = 'embeddables:userdata_updated';
+const FIELD_UPDATE_DEBOUNCE_MS = 350;
+function getStorageKey(embeddableId) {
+    return `${STORAGE_KEY_PREFIX}${embeddableId}`;
+}
+function loadStorage(embeddableId) {
+    try {
+        const raw = window.localStorage.getItem(getStorageKey(embeddableId));
+        if (!raw)
+            return {};
+        return JSON.parse(raw);
+    }
+    catch {
+        return {};
+    }
+}
+function saveStorage(embeddableId, value) {
+    try {
+        window.localStorage.setItem(getStorageKey(embeddableId), JSON.stringify(value));
+    }
+    catch {
+        // ignore
+    }
+}
+function filterJsonByKey(obj, filterText) {
+    if (!filterText.trim())
+        return obj;
+    if (typeof obj !== 'object' || obj === null)
+        return obj;
+    const lowerFilter = filterText.toLowerCase();
+    // For arrays, filter each item and only keep non-empty results
+    if (Array.isArray(obj)) {
+        const filtered = obj
+            .map((item) => filterJsonByKey(item, filterText))
+            .filter((item) => {
+            if (typeof item !== 'object' || item === null)
+                return false;
+            if (Array.isArray(item))
+                return item.length > 0;
+            return Object.keys(item).length > 0;
+        });
+        return filtered;
+    }
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        if (key.toLowerCase().includes(lowerFilter)) {
+            // Key matches - include the entire value unfiltered
+            result[key] = value;
+        }
+        else if (typeof value === 'object' && value !== null) {
+            // Key doesn't match - recurse to find nested matches
+            const filtered = filterJsonByKey(value, filterText);
+            if (Array.isArray(filtered)) {
+                if (filtered.length > 0)
+                    result[key] = filtered;
+            }
+            else if (filtered !== null && Object.keys(filtered).length > 0) {
+                result[key] = filtered;
+            }
+        }
+    }
+    return result;
+}
+export function UserDataPanel({ embeddableId }) {
+    const [rawJson, setRawJson] = useState('');
+    const [error, setError] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const [personas, setPersonas] = useState([]);
+    const [personaError, setPersonaError] = useState(null);
+    const [keyFilter, setKeyFilter] = useState('');
+    const [activeTab, setActiveTab] = useState('fields');
+    const savvy = window.Savvy;
+    const pendingFieldUpdatesRef = useRef(new Map());
+    const refresh = useCallback(async () => {
+        setError(null);
+        if (!savvy?.getUserData) {
+            setError('window.Savvy.getUserData is not available.');
+            return null;
+        }
+        try {
+            const data = savvy.getUserData(embeddableId);
+            const merged = typeof data === 'object' && data !== null ? { ...data } : {};
+            // Overlay any pending (not-yet-sent) field updates so we don't overwrite in-progress typing
+            pendingFieldUpdatesRef.current.forEach((entry, key) => {
+                merged[key] = entry.value;
+            });
+            const nextRawJson = JSON.stringify(merged, null, 2);
+            setRawJson(nextRawJson);
+            return nextRawJson;
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+            return null;
+        }
+    }, [embeddableId, savvy]);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            void refresh();
+            const storage = loadStorage(embeddableId);
+            setPersonas(storage.personas ?? []);
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [embeddableId, refresh]);
+    useEffect(() => {
+        const handler = (event) => {
+            // Optional filtering: if the event includes an embeddableId, only react to ours.
+            const detail = event?.detail;
+            const eventEmbeddableId = detail?.embeddableId;
+            if (typeof eventEmbeddableId === 'string' &&
+                eventEmbeddableId.length > 0 &&
+                eventEmbeddableId !== embeddableId) {
+                return;
+            }
+            void refresh();
+        };
+        window.addEventListener(USERDATA_UPDATED_EVENT, handler);
+        return () => window.removeEventListener(USERDATA_UPDATED_EVENT, handler);
+    }, [embeddableId, refresh]);
+    // Cleanup pending debounce timers on unmount
+    useEffect(() => {
+        return () => {
+            pendingFieldUpdatesRef.current.forEach((entry) => clearTimeout(entry.timer));
+            pendingFieldUpdatesRef.current.clear();
+        };
+    }, []);
+    const handleSave = () => {
+        if (!savvy?.setUserData) {
+            setError('window.Savvy.setUserData is not available.');
+            return;
+        }
+        setIsSaving(true);
+        setError(null);
+        try {
+            const parsed = rawJson.trim() ? JSON.parse(rawJson) : {};
+            savvy.setUserData(embeddableId, parsed);
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const handleSaveAndGoToPage = () => {
+        let currentPageId = '';
+        try {
+            const parsed = rawJson.trim() ? JSON.parse(rawJson) : null;
+            currentPageId = parsed?.current_page_id ?? '';
+        }
+        catch {
+            // ignore parse errors for default value
+        }
+        const pageId = window.prompt('Enter the page ID to navigate to:', currentPageId);
+        if (!pageId)
+            return;
+        if (!savvy?.setUserData) {
+            setError('window.Savvy.setUserData is not available.');
+            return;
+        }
+        if (!savvy?.goToPage) {
+            setError('window.Savvy.goToPage is not available.');
+            return;
+        }
+        setIsSaving(true);
+        setError(null);
+        try {
+            const parsed = rawJson.trim() ? JSON.parse(rawJson) : {};
+            savvy.setUserData(embeddableId, parsed);
+            savvy.goToPage(embeddableId, pageId.trim());
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const handleReset = async () => {
+        await refresh();
+        if (!savvy?.resetUserData) {
+            setError('window.Savvy.resetUserData is not available.');
+            return;
+        }
+        setIsSaving(true);
+        setError(null);
+        try {
+            savvy.resetUserData(embeddableId);
+            // Hack - find all inputs inside the main page and set them to empty string
+            setTimeout(() => {
+                const inputs = document.querySelectorAll('savvy input');
+                for (const input of inputs) {
+                    ;
+                    input.value = '';
+                }
+                const textareas = document.querySelectorAll('savvy textarea');
+                for (const textarea of textareas) {
+                    ;
+                    textarea.value = '';
+                }
+            }, 100);
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const handleSavePersona = async () => {
+        const refreshedRawJson = await refresh();
+        const latestRawJson = refreshedRawJson ?? rawJson;
+        setPersonaError(null);
+        let name = window.prompt('Save current user data as persona name:', '');
+        if (!name)
+            return;
+        name = name.trim();
+        if (!name) {
+            setPersonaError('Persona name cannot be empty.');
+            return;
+        }
+        try {
+            const data = latestRawJson.trim() ? JSON.parse(latestRawJson) : {};
+            const existingIndex = personas.findIndex((p) => p.name === name);
+            let nextPersonas;
+            if (existingIndex >= 0) {
+                nextPersonas = personas.slice();
+                nextPersonas[existingIndex] = { name, data };
+            }
+            else {
+                nextPersonas = [...personas, { name, data }];
+            }
+            setPersonas(nextPersonas);
+            const storage = loadStorage(embeddableId);
+            saveStorage(embeddableId, {
+                ...storage,
+                personas: nextPersonas,
+            });
+        }
+        catch (err) {
+            setPersonaError(err?.message ?? String(err));
+        }
+    };
+    const applyPersona = async (persona) => {
+        await refresh();
+        if (!savvy?.setUserData) {
+            setPersonaError('window.Savvy.setUserData is not available.');
+            return;
+        }
+        setPersonaError(null);
+        try {
+            await savvy.setUserData(embeddableId, persona.data);
+            void refresh();
+        }
+        catch (err) {
+            setPersonaError(err?.message ?? String(err));
+        }
+    };
+    const applyPersonaAndGoToPage = async (persona) => {
+        const pageId = persona.data?.current_page_id;
+        if (!pageId)
+            return;
+        await refresh();
+        if (!savvy?.setUserData) {
+            setPersonaError('window.Savvy.setUserData is not available.');
+            return;
+        }
+        if (!savvy?.goToPage) {
+            setPersonaError('window.Savvy.goToPage is not available.');
+            return;
+        }
+        setPersonaError(null);
+        try {
+            await savvy.setUserData(embeddableId, persona.data);
+            savvy.goToPage(embeddableId, pageId.trim());
+            void refresh();
+        }
+        catch (err) {
+            setPersonaError(err?.message ?? String(err));
+        }
+    };
+    const deletePersona = (persona) => {
+        const nextPersonas = personas.filter((p) => p.name !== persona.name);
+        setPersonas(nextPersonas);
+        const storage = loadStorage(embeddableId);
+        saveStorage(embeddableId, {
+            ...storage,
+            personas: nextPersonas,
+        });
+    };
+    const handleFieldUpdate = useCallback((key, value) => {
+        if (!savvy?.setUserData) {
+            setError('window.Savvy.setUserData is not available.');
+            return;
+        }
+        try {
+            // Optimistic update: merge into rawJson immediately so the input doesn't lag
+            setRawJson((prev) => {
+                try {
+                    const obj = prev.trim() ? JSON.parse(prev) : {};
+                    obj[key] = value;
+                    return JSON.stringify(obj, null, 2);
+                }
+                catch {
+                    return prev;
+                }
+            });
+            // Debounce setUserData to avoid flooding the embeddable and prevent
+            // the userdata_updated event ping-pong from overwriting in-progress typing
+            const existing = pendingFieldUpdatesRef.current.get(key);
+            if (existing)
+                clearTimeout(existing.timer);
+            const timer = setTimeout(() => {
+                const entry = pendingFieldUpdatesRef.current.get(key);
+                const valueToSend = entry?.value;
+                pendingFieldUpdatesRef.current.delete(key);
+                try {
+                    savvy.setUserData(embeddableId, { [key]: valueToSend });
+                }
+                catch (err) {
+                    setError(err?.message ?? String(err));
+                }
+            }, FIELD_UPDATE_DEBOUNCE_MS);
+            pendingFieldUpdatesRef.current.set(key, { value, timer });
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+        }
+    }, [embeddableId, savvy]);
+    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: "User data" }), _jsx("div", { className: "mt-0.5 text-[11px] text-slate-400", children: "View and edit the JSON stored for this embeddable. Use personas to quickly switch states." })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-start gap-2 sm:justify-end", children: [_jsx("button", { type: "button", onClick: handleSavePersona, 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: "Save persona" }), _jsx("button", { type: "button", onClick: handleReset, disabled: isSaving, 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-rose-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-rose-200 disabled:cursor-not-allowed disabled:opacity-60", children: "Reset User Data" })] })] }), (error || personaError) && (_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 || personaError })), _jsxs("div", { className: "mt-4 flex min-h-0 flex-1 flex-col gap-4 lg:flex-row", children: [_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "mb-2 flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setActiveTab('fields'), className: `cursor-pointer rounded-lg px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider transition-colors ${activeTab === 'fields'
+                                                    ? 'bg-slate-700 text-slate-100 ring-1 ring-inset ring-slate-600'
+                                                    : 'text-slate-400 hover:bg-slate-800 hover:text-slate-300'}`, children: "Field Editor" }), _jsx("button", { type: "button", onClick: () => setActiveTab('json'), className: `cursor-pointer rounded-lg px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider transition-colors ${activeTab === 'json'
+                                                    ? 'bg-slate-700 text-slate-100 ring-1 ring-inset ring-slate-600'
+                                                    : 'text-slate-400 hover:bg-slate-800 hover:text-slate-300'}`, children: "JSON Editor" }), _jsx("button", { type: "button", onClick: () => setActiveTab('schema'), className: `cursor-pointer rounded-lg px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider transition-colors ${activeTab === 'schema'
+                                                    ? 'bg-slate-700 text-slate-100 ring-1 ring-inset ring-slate-600'
+                                                    : 'text-slate-400 hover:bg-slate-800 hover:text-slate-300'}`, children: "Schema" })] }), activeTab !== 'schema' && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "text", value: keyFilter, onChange: (e) => setKeyFilter(e.target.value), placeholder: "Filter by key...", className: "w-32 rounded-lg bg-slate-800 px-2 py-1.5 text-xs 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" }), activeTab === 'json' && (_jsx("button", { type: "button", onClick: handleSave, disabled: isSaving || rawJson.trim() === '' || keyFilter.trim() !== '', 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-teal-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-teal-200 disabled:cursor-not-allowed disabled:opacity-60", children: "Update" }))] }))] }), activeTab === 'json' ? (keyFilter.trim() ? (_jsx("pre", { className: "min-h-0 w-full 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: (() => {
+                                    try {
+                                        const parsed = rawJson.trim() ? JSON.parse(rawJson) : {};
+                                        const filtered = filterJsonByKey(parsed, keyFilter);
+                                        return JSON.stringify(filtered, null, 2);
+                                    }
+                                    catch {
+                                        return 'Invalid JSON';
+                                    }
+                                })() })) : (_jsx("textarea", { value: rawJson, onChange: (e) => setRawJson(e.target.value), spellCheck: false, className: "min-h-0 w-full flex-1 resize-none rounded-xl bg-slate-950/60 p-3 font-mono text-xs leading-5 text-slate-100 ring-1 ring-inset ring-white/10 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60" }))) : activeTab === 'fields' ? (_jsx(FieldEditorPanel, { embeddableId: embeddableId, rawJson: rawJson, onUpdateUserData: handleFieldUpdate, keyFilter: keyFilter })) : (_jsx(SchemaPanel, { embeddableId: embeddableId }))] }), personas.length > 0 && (_jsxs("div", { className: "lg:w-110 lg:shrink-0", children: [_jsx("div", { className: "mb-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400", children: "Personas" }), _jsx("div", { className: "flex flex-wrap gap-2 lg:grid lg:grid-cols-2 lg:gap-2", children: personas.map((persona) => (_jsxs("div", { className: "flex items-center gap-2 rounded-xl bg-white/5 px-2 py-1.5 ring-1 ring-inset ring-white/10 lg:flex-col lg:items-start lg:gap-1.5 lg:p-2", children: [_jsx("span", { className: "max-w-[220px] truncate text-xs text-slate-100 lg:max-w-full", children: persona.name }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: () => applyPersona(persona), className: "cursor-pointer rounded-lg bg-slate-700 px-2 py-1 text-[11px] font-semibold text-teal-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-teal-200", children: "Apply" }), _jsx("button", { type: "button", onClick: () => applyPersonaAndGoToPage(persona), className: "cursor-pointer whitespace-nowrap rounded-lg bg-slate-700 px-2 py-1 text-[11px] font-semibold text-slate-200 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white", children: "Apply + Page" }), _jsx("button", { type: "button", onClick: () => deletePersona(persona), className: "cursor-pointer rounded-lg bg-white/5 px-2 py-1 text-[11px] font-medium text-slate-200 ring-1 ring-inset ring-white/10 hover:bg-white/10", children: "Delete" })] })] }, persona.name))) })] }))] })] }));
+}

package/dist/workbench/WorkbenchApp.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"WorkbenchApp.d.ts","sourceRoot":"","sources":["../../src/workbench/WorkbenchApp.tsx"],"names":[],"mappings":"AAuBA,KAAK,iBAAiB,GAAG;IACvB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAqCD,wBAAgB,YAAY,CAAC,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CA6S/D"}