@embeddables/cli 0.1.0

package/dist/compiler/reverse.js

@@ -0,0 +1,1632 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import CSSJSON from 'cssjson';
+import pc from 'picocolors';
+import { TYPE_MAP } from './registry.js';
+import { generateRandomIdByType } from './helpers/duplicateIds.js';
+/**
+ * Deep clones an object or array while preserving the order of all properties
+ * at all nesting levels. Arrays preserve element order (already guaranteed),
+ * and objects preserve property insertion order.
+ */
+function deepClonePreservingOrder(value) {
+    if (value === null || value === undefined) {
+        return value;
+    }
+    if (Array.isArray(value)) {
+        // For arrays, recursively clone each element
+        return value.map((item) => deepClonePreservingOrder(item));
+    }
+    if (typeof value === 'object') {
+        // For objects, preserve property order by iterating through keys
+        const cloned = {};
+        const keys = Object.keys(value);
+        for (const key of keys) {
+            cloned[key] = deepClonePreservingOrder(value[key]);
+        }
+        return cloned;
+    }
+    // Primitive values (string, number, boolean) are returned as-is
+    return value;
+}
+// Reverse map: JSON type -> TSX tag name
+const REVERSE_TYPE_MAP = Object.fromEntries(Object.entries(TYPE_MAP).map(([k, v]) => [v, k]));
+// Component types to ignore during reverse compilation
+const IGNORED_COMPONENT_TYPES = new Set(['PageTitle']);
+// Component properties to ignore during reverse compilation
+const IGNORED_COMPONENT_PROPERTIES = new Set(['clearable', 'central_play_button']);
+// Base component properties (from BaseComponentProps)
+const BASE_COMPONENT_PROPS = new Set([
+    'id',
+    'key',
+    'parent_id',
+    '_location',
+    'hide',
+    'conditions',
+    'tags',
+    'repeater_key',
+    'element_id',
+    'tooltip',
+    'page_reactive_classes',
+    'conditional_tags',
+    'outputs_onmounted',
+    'outputs_onunmounted',
+    'outputs_onrepeatablerender',
+    'always_rerender',
+    'ignore_in_qa_tests',
+    'ignore_recording',
+]);
+// Input component properties (from InputComponentProps - extends BaseComponentProps)
+const INPUT_COMPONENT_PROPS = new Set([...BASE_COMPONENT_PROPS, 'isRequired', 'doNotSave']);
+// Required props for each component type (id and key are always required and handled separately)
+const REQUIRED_PROPS = {
+    PlainText: new Set(['text']),
+    RichText: new Set(['text']),
+    RichTextMarkdown: new Set(['text']),
+    CustomButton: new Set(),
+    BookMeeting: new Set(['service', 'embedUrl']),
+    StripeCheckout: new Set(['action', 'publishable_key', 'amount']),
+    // Add more as needed based on component interfaces
+};
+// Component-specific valid properties (extends base props)
+// This is a best-effort mapping - if a prop isn't here but matches common patterns, it's still allowed
+const COMPONENT_SPECIFIC_PROPS = {
+    OptionSelector: new Set([
+        ...INPUT_COMPONENT_PROPS,
+        'label',
+        'conversions',
+        'buttons',
+        'multiple',
+        'allow_deselect',
+        'dropdown',
+        'is_advanced_dropdown',
+        'maxSelection',
+        'block_selection_over_max',
+        'checkbox',
+        'layout',
+        'checkbox_location',
+        'allow_typing',
+        'defaultVal',
+        'preset_buttons',
+        'button_repeater_key',
+        'empty_invalid_message',
+        'invalid_message',
+        'validation_formula',
+        'outputs_onchange',
+        'fetch_uri',
+        'fetch_headers',
+        'fetch_transformer',
+        'fetch_debounce',
+        'outputs_onbuttonsrepeatablerender',
+        'richDescription',
+        'richText',
+        'randomize_buttons',
+        'always_disabled',
+    ]),
+    InputBox: new Set([
+        ...INPUT_COMPONENT_PROPS,
+        'input_type',
+        'label',
+        'placeholder',
+        'use_tel_input',
+        'mismatch_values_message',
+        'invalid_message',
+        'empty_invalid_message',
+        'max_length',
+        'icon',
+        'range_min',
+        'range_max',
+        'range_step',
+        'width',
+        'label_on_both_side',
+        'off_label',
+        'multiline',
+        'trim_whitespace_on_blur',
+        'format_email_on_blur',
+        'validation_formula',
+        'validate_on_blur',
+        'outputs_onchange',
+        'integer_only',
+        'debounce_time',
+        'disable_auto_next',
+        'validate_value',
+        'phone_display_format',
+        'phone_store_format',
+        'custom_validation_function',
+        'always_disabled',
+    ]),
+    CustomButton: new Set([
+        ...BASE_COMPONENT_PROPS,
+        'text',
+        'action',
+        'conversions',
+        'actionUrl',
+        'toggle',
+        'icon',
+        'emojiIcon',
+        'imageUrl',
+        'imageAltText',
+        'richText',
+        'description',
+        'richDescription',
+        'openUrlInNewTab',
+        'ariaLabel',
+        'info_box_key',
+        'allow_skip_validation',
+        'hide_if_no_nav_target',
+        'needs_validation_passed',
+        'validation_show_state',
+        'shouldDownloadUrl',
+        'downloadFilename',
+        'outputs_onclick',
+        'use_custom_code',
+        'custom_code',
+        'output_key',
+        'track_clicks',
+        'show_loading_until_actions_resolved',
+        'success_message',
+        'loading_message',
+        'fail_message',
+        'primary_button',
+        'always_disabled',
+    ]),
+    PlainText: new Set([...BASE_COMPONENT_PROPS, 'text']),
+    RichText: new Set([...BASE_COMPONENT_PROPS, 'text']),
+    RichTextMarkdown: new Set([...BASE_COMPONENT_PROPS, 'text']),
+    MediaImage: new Set([...BASE_COMPONENT_PROPS, 'src', 'caption', 'alt_text']),
+    MediaEmbed: new Set([...BASE_COMPONENT_PROPS, 'src', 'caption']),
+    Container: new Set([...BASE_COMPONENT_PROPS, 'container_type']),
+    FileUpload: new Set([
+        ...INPUT_COMPONENT_PROPS,
+        'label',
+        'upload_type',
+        'custom_upload_type',
+        'icon',
+        'files_max_limit',
+    ]),
+    Chart: new Set([
+        ...BASE_COMPONENT_PROPS,
+        'chart_type',
+        'data',
+        'options',
+        'scales',
+        'maintain_aspect_ratio',
+    ]),
+    Rive: new Set([
+        ...BASE_COMPONENT_PROPS,
+        'src',
+        'autoplay',
+        'artboard',
+        'animation',
+        'capture_events',
+    ]),
+    Lottie: new Set([...BASE_COMPONENT_PROPS, 'src', 'autoplay', 'loop']),
+    BookMeeting: new Set([
+        ...BASE_COMPONENT_PROPS,
+        'service',
+        'embedUrl',
+        'next_on_complete',
+        'next_on_complete_timeout',
+        'isTesting',
+    ]),
+    StripeCheckout: new Set([
+        ...INPUT_COMPONENT_PROPS,
+        'label',
+        'action',
+        'publishable_key',
+        'amount',
+        'currency',
+        'description',
+        'button_text',
+        'pay_button_text',
+        'use_new_stripe_elements',
+    ]),
+    StripeCheckout2: new Set([
+        ...INPUT_COMPONENT_PROPS,
+        'label',
+        'elements_to_display',
+        'checkout_session',
+        'init_checkout_options',
+        'on_payment_complete_conversions',
+    ]),
+    PaypalCheckout: new Set([
+        ...INPUT_COMPONENT_PROPS,
+        'label',
+        'action',
+        'amount',
+        'currency',
+        'description',
+    ]),
+    ProgressBar: new Set([...BASE_COMPONENT_PROPS, 'value', 'max', 'show_percentage']),
+    CustomHTML: new Set([...BASE_COMPONENT_PROPS, 'text']),
+};
+/**
+ * Checks if a component has all required props.
+ * Returns true if all required props are present, false otherwise.
+ * When fix is true: logs a warning and returns false if required props are missing.
+ * When fix is false/undefined: throws if required props are missing.
+ */
+function hasRequiredProps(component, fix) {
+    const tagName = getComponentName(component.type);
+    const requiredProps = REQUIRED_PROPS[tagName] || REQUIRED_PROPS[component.type];
+    if (!requiredProps || requiredProps.size === 0) {
+        // No required props for this component type
+        return true;
+    }
+    const missingProps = [];
+    for (const prop of requiredProps) {
+        const value = component[prop];
+        if (value === null || value === undefined || value === '') {
+            missingProps.push(prop);
+        }
+    }
+    if (missingProps.length > 0) {
+        if (fix) {
+            console.warn(`Removed ${component.type} component (id: ${component.id}, key: ${component.key}) missing required props: ${missingProps.join(', ')}.`);
+            return false;
+        }
+        throw new Error(`${component.type} component (id: ${component.id}, key: ${component.key}) missing required props: ${missingProps.join(', ')}.`);
+    }
+    return true;
+}
+/**
+ * Validates props for a component.
+ * Returns valid prop keys to include in the generated JSX, and any extra (non-schema) props
+ * to store in the `props` attribute as a JSON object for round-trip preservation.
+ */
+function validateComponentProps(component, validProps) {
+    const validPropKeys = new Set();
+    const extraProps = {};
+    // Always include id and key - these are handled separately but should be considered valid
+    const excludedProps = new Set([
+        'id',
+        'key',
+        'tags',
+        'type',
+        'parent_id',
+        'buttons',
+        ...IGNORED_COMPONENT_PROPERTIES,
+    ]);
+    for (const [key, value] of Object.entries(component)) {
+        // Skip excluded props (they're handled separately or ignored)
+        if (excludedProps.has(key)) {
+            continue;
+        }
+        // Skip null/undefined values
+        if (value === null || value === undefined) {
+            continue;
+        }
+        // Check if prop is valid
+        if (validProps.has(key)) {
+            validPropKeys.add(key);
+        }
+        else {
+            // Extra prop (not in schema) - store for round-trip via props={...}
+            extraProps[key] = value;
+        }
+    }
+    return { validPropKeys, extraProps };
+}
+// Fallback: if type not in map, use type name directly (component files match type names)
+function getComponentName(type) {
+    // First try exact match
+    if (REVERSE_TYPE_MAP[type]) {
+        return REVERSE_TYPE_MAP[type];
+    }
+    // If not found, try case-insensitive match against TYPE_MAP values
+    // to find the correct casing and return the corresponding TSX tag name
+    const typeLower = type.toLowerCase();
+    for (const [tsxName, jsonType] of Object.entries(TYPE_MAP)) {
+        if (jsonType.toLowerCase() === typeLower) {
+            return tsxName; // Return the TSX tag name (e.g., "CustomHTML")
+        }
+    }
+    // If still not found, return type as-is (for unknown types)
+    return type;
+}
+/**
+ * Collects all component and button IDs from all pages and checks for duplicates.
+ * Returns a map of occurrence key (pageKey:componentIndex:buttonIndex) -> new unique ID for any duplicates found.
+ *
+ * Note: This function only deduplicates IDs, not keys. Duplicate keys are intentional
+ * in many cases and should be preserved.
+ */
+function checkAndFixDuplicateIds(pages, fix) {
+    const idMapping = new Map(); // Maps occurrence key -> new unique ID
+    const idOccurrences = new Map();
+    const allIds = new Set();
+    // First pass: collect all IDs with their context
+    for (const page of pages) {
+        for (let compIndex = 0; compIndex < page.components.length; compIndex++) {
+            const component = page.components[compIndex];
+            // Handle components without type
+            if (!component.type) {
+                if (fix) {
+                    // Will be removed in buildTree, skip here
+                    continue;
+                }
+                throw new Error(`Component (id: ${component.id}, key: ${component.key}) is missing required type property.`);
+            }
+            // Skip ignored types
+            if (IGNORED_COMPONENT_TYPES.has(component.type)) {
+                continue;
+            }
+            const compId = component.id;
+            allIds.add(compId);
+            const occurrenceKey = `${page.key}:${compIndex}`;
+            if (!idOccurrences.has(compId)) {
+                idOccurrences.set(compId, []);
+            }
+            idOccurrences.get(compId).push({
+                pageKey: page.key,
+                type: `component (${component.type})`,
+                id: compId,
+                componentType: component.type,
+                componentIndex: compIndex,
+                occurrenceKey,
+            });
+            // Collect button IDs from OptionSelector components
+            if (component.type === 'OptionSelector' && component.buttons) {
+                const buttons = component.buttons;
+                if (Array.isArray(buttons)) {
+                    for (let btnIndex = 0; btnIndex < buttons.length; btnIndex++) {
+                        const button = buttons[btnIndex];
+                        if (button && typeof button === 'object' && button.id) {
+                            const buttonId = button.id;
+                            allIds.add(buttonId);
+                            const buttonOccurrenceKey = `${page.key}:${compIndex}:${btnIndex}`;
+                            if (!idOccurrences.has(buttonId)) {
+                                idOccurrences.set(buttonId, []);
+                            }
+                            idOccurrences.get(buttonId).push({
+                                pageKey: page.key,
+                                type: `button (in ${component.type} component)`,
+                                id: buttonId,
+                                componentType: component.type,
+                                componentIndex: compIndex,
+                                buttonIndex: btnIndex,
+                                occurrenceKey: buttonOccurrenceKey,
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // Second pass: find duplicates and create unique IDs
+    for (const [id, occurrences] of idOccurrences.entries()) {
+        if (occurrences.length > 1) {
+            // This ID is duplicated
+            const isButton = occurrences[0].buttonIndex !== undefined;
+            const suffix = isButton ? ' (OptionSelector button)' : '';
+            console.warn(`Found duplicate ID "${id}"${suffix} used ${occurrences.length} times:`);
+            for (let i = 0; i < occurrences.length; i++) {
+                const occ = occurrences[i];
+                const location = occ.buttonIndex !== undefined
+                    ? `button at index ${occ.buttonIndex}`
+                    : `component at index ${occ.componentIndex}`;
+                console.log(`  - Page "${occ.pageKey}": ${occ.type} (${location}) with ID "${occ.id}"`);
+            }
+            // Create unique IDs for all but the first occurrence (type-based: plaintext_xxx, button_xxx, option_xxx)
+            for (let i = 1; i < occurrences.length; i++) {
+                const occ = occurrences[i];
+                const isOptionButton = occ.buttonIndex !== undefined;
+                const newId = generateRandomIdByType(occ.componentType, isOptionButton, allIds, idMapping.values());
+                allIds.add(newId);
+                // Map the occurrence key (not the ID) to the new unique ID
+                idMapping.set(occ.occurrenceKey, newId);
+                const location = occ.buttonIndex !== undefined
+                    ? `button at index ${occ.buttonIndex}`
+                    : `component at index ${occ.componentIndex}`;
+                console.log(`  → Renamed duplicate ID "${occ.id}" to "${newId}" in page "${occ.pageKey}" (${location})`);
+            }
+        }
+    }
+    return idMapping;
+}
+/**
+ * Applies the ID mapping to all pages, updating component IDs and button IDs.
+ * The mapping uses occurrence keys (pageKey:componentIndex or pageKey:componentIndex:buttonIndex).
+ * Note: parent_id references are not automatically updated because we can't determine
+ * which specific occurrence a parent_id points to when there are duplicate IDs.
+ */
+function applyIdMapping(pages, idMapping) {
+    // Update component and button IDs using occurrence keys
+    for (const page of pages) {
+        for (let compIndex = 0; compIndex < page.components.length; compIndex++) {
+            const component = page.components[compIndex];
+            // Skip components without type or with ignored types
+            if (!component.type || IGNORED_COMPONENT_TYPES.has(component.type)) {
+                continue;
+            }
+            const occurrenceKey = `${page.key}:${compIndex}`;
+            if (idMapping.has(occurrenceKey)) {
+                component.id = idMapping.get(occurrenceKey);
+            }
+            // Update button IDs in OptionSelector components
+            if (component.type === 'OptionSelector' && component.buttons) {
+                const buttons = component.buttons;
+                if (Array.isArray(buttons)) {
+                    for (let btnIndex = 0; btnIndex < buttons.length; btnIndex++) {
+                        const button = buttons[btnIndex];
+                        if (button && typeof button === 'object' && button.id) {
+                            const buttonOccurrenceKey = `${page.key}:${compIndex}:${btnIndex}`;
+                            if (idMapping.has(buttonOccurrenceKey)) {
+                                button.id = idMapping.get(buttonOccurrenceKey);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+export async function reverseCompile(embeddable, embeddableId, opts) {
+    const fix = opts?.fix ?? false;
+    // Check for duplicate IDs across all pages and create a mapping
+    const idMapping = checkAndFixDuplicateIds(embeddable.pages, fix);
+    // Apply ID mapping to all pages
+    if (idMapping.size > 0) {
+        applyIdMapping(embeddable.pages, idMapping);
+    }
+    // Generate TSX pages
+    for (const page of embeddable.pages) {
+        await generatePageFile(page, embeddableId, fix);
+    }
+    // Generate CSS from styles
+    if (embeddable.styles && Object.keys(embeddable.styles).length > 0) {
+        await generateStylesFile(embeddable.styles, embeddableId);
+    }
+    // Generate config.json
+    await generateConfigFile(embeddable, embeddableId);
+    // Extract computedFields to JS files
+    if (embeddable.computedFields && embeddable.computedFields.length > 0) {
+        await extractComputedFields(embeddable.computedFields, embeddableId);
+    }
+    // Extract dataOutputs to JS files
+    if (embeddable.dataOutputs && embeddable.dataOutputs.length > 0) {
+        await extractDataOutputs(embeddable.dataOutputs, embeddableId);
+    }
+    // Extract global components to TSX files
+    if (embeddable.components &&
+        Array.isArray(embeddable.components) &&
+        embeddable.components.length > 0) {
+        await extractGlobalComponents(embeddable.components, embeddableId, fix);
+    }
+    console.log(`${pc.cyan(`✓ Generated ${embeddable.pages.length} page(s) and ${embeddable.styles && Object.keys(embeddable.styles).length > 0 ? 'styles' : 'no styles'}`)}`);
+}
+async function generatePageFile(page, embeddableId, fix) {
+    const pageKey = page.key;
+    const filePath = path.join('embeddables', embeddableId, 'pages', `${pageKey}.page.tsx`);
+    try {
+        // Build tree from flat component list
+        const tree = buildTree(page.components, pageKey, fix);
+        // Generate TSX code
+        const tsx = generateTSX(page, tree);
+        // Write to embeddables/<id>/pages/<pageKey>.page.tsx
+        fs.mkdirSync(path.dirname(filePath), { recursive: true });
+        fs.writeFileSync(filePath, tsx, 'utf8');
+        console.log(`${pc.gray(`Generated ${filePath}`)}`);
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            throw new Error(`Page "${pageKey}" (${filePath}): ${error.message}`);
+        }
+        throw error;
+    }
+}
+function buildTree(components, pageKey, fix) {
+    // Filter out components without type and ignored component types
+    let filteredComponents = components.filter((comp) => {
+        if (!comp.type) {
+            if (fix) {
+                console.warn(`Removed component (id: ${comp.id}, key: ${comp.key}) – missing type property.`);
+                return false;
+            }
+            throw new Error(`Component (id: ${comp.id}, key: ${comp.key}) is missing required type property.`);
+        }
+        return !IGNORED_COMPONENT_TYPES.has(comp.type);
+    });
+    // Filter out components missing required props
+    filteredComponents = filteredComponents.filter((comp) => {
+        return hasRequiredProps(comp, fix);
+    });
+    // Create a map of id -> component
+    const componentMap = new Map();
+    for (const comp of filteredComponents) {
+        componentMap.set(comp.id, comp);
+    }
+    // Find root components (no parent_id)
+    const roots = [];
+    for (const comp of filteredComponents) {
+        if (!comp.parent_id) {
+            roots.push(comp);
+        }
+    }
+    // Allow blank pages - return null if no components
+    if (roots.length === 0) {
+        return null;
+    }
+    // Build tree recursively for each root
+    const rootNodes = roots.map((root) => buildNode(root, componentMap, pageKey, fix));
+    // Return single node or array of nodes
+    return rootNodes.length === 1 ? rootNodes[0] : rootNodes;
+}
+function buildNode(component, componentMap, pageKey, fix) {
+    const children = [];
+    // Find all children of this component (excluding ignored types and those missing required props)
+    for (const comp of componentMap.values()) {
+        if (comp.parent_id === component.id &&
+            !IGNORED_COMPONENT_TYPES.has(comp.type) &&
+            hasRequiredProps(comp, fix)) {
+            children.push(buildNode(comp, componentMap, pageKey, fix));
+        }
+    }
+    return {
+        component,
+        children,
+    };
+}
+function generateTSX(page, tree) {
+    const pageName = capitalizeFirst(page.key) + 'Page';
+    const pageKey = page.key;
+    const imports = tree ? collectImports(tree) : [];
+    const hasButtons = tree ? hasButtonConstants(tree) : false;
+    const { constants, nameMap } = tree
+        ? generateButtonConstants(tree)
+        : { constants: '', nameMap: new Map() };
+    const jsx = generateJSXFromTree(tree, 4, pageKey, nameMap);
+    return `"use client";
+
+import React from "react";
+${imports
+        .map((imp) => `import { ${imp} } from "../../../src/components/primitives/${imp}";`)
+        .join('\n')}
+${hasButtons
+        ? `
+import type { OptionSelectorButton } from "../../../src/types-builder";`
+        : ''}
+
+export default function ${pageName}() {
+${constants}
+  return (
+${jsx}
+  );
+}
+`;
+}
+function collectImports(node) {
+    if (node === null) {
+        return [];
+    }
+    const imports = new Set();
+    const nodes = Array.isArray(node) ? node : [node];
+    for (const n of nodes) {
+        const type = n.component.type;
+        const tagName = getComponentName(type);
+        imports.add(tagName);
+        for (const child of n.children) {
+            for (const imp of collectImports(child)) {
+                imports.add(imp);
+            }
+        }
+    }
+    return Array.from(imports).sort();
+}
+function hasButtonConstants(node) {
+    if (node === null) {
+        return false;
+    }
+    function checkButtons(n) {
+        if (n.component.type === 'OptionSelector' && n.component.buttons) {
+            const buttons = n.component.buttons;
+            if (Array.isArray(buttons) && buttons.length > 0) {
+                return true;
+            }
+        }
+        for (const child of n.children) {
+            if (checkButtons(child)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    const nodes = Array.isArray(node) ? node : [node];
+    for (const n of nodes) {
+        if (checkButtons(n)) {
+            return true;
+        }
+    }
+    return false;
+}
+function generateButtonConstants(node) {
+    if (node === null) {
+        return { constants: '', nameMap: new Map() };
+    }
+    const constants = [];
+    const usedNames = new Set(); // Track used constant names
+    const nameMap = new Map(); // Map component ID -> constant name
+    function collectButtons(n) {
+        if (n.component.type === 'OptionSelector' && n.component.buttons) {
+            const buttons = n.component.buttons;
+            if (Array.isArray(buttons) && buttons.length > 0) {
+                // Generate a constant name based on the component key or id
+                let baseName = camelCase(n.component.key || n.component.id) + 'Buttons';
+                let constName = baseName;
+                // Ensure uniqueness by checking if name is already used
+                let suffix = 1;
+                if (usedNames.has(constName)) {
+                    // If name collision, append component ID suffix to ensure uniqueness
+                    const idSuffix = camelCase(n.component.id);
+                    constName = baseName.replace(/Buttons$/, '') + idSuffix + 'Buttons';
+                }
+                // If still not unique, add numeric suffix
+                while (usedNames.has(constName)) {
+                    constName = baseName.replace(/Buttons$/, '') + suffix + 'Buttons';
+                    suffix++;
+                }
+                usedNames.add(constName);
+                nameMap.set(n.component.id, constName);
+                const buttonArray = buttons
+                    .map((b) => {
+                    const props = [];
+                    // Always include id - preserve from JSON or generate if missing
+                    const buttonId = b.id || `option_${b.key}`;
+                    props.push(`id: ${escapeStringForJS(buttonId)}`);
+                    // Preserve key if present
+                    if (b.key)
+                        props.push(`key: ${escapeStringForJS(b.key)}`);
+                    // Preserve text if present
+                    if (b.text)
+                        props.push(`text: ${escapeStringForJS(b.text)}`);
+                    // Preserve other button properties from JSON (e.g., triggerEvent, description, imageUrl, etc.)
+                    const buttonPropertyKeys = new Set(['id', 'key', 'text']);
+                    for (const [key, value] of Object.entries(b)) {
+                        if (buttonPropertyKeys.has(key))
+                            continue;
+                        if (value === null || value === undefined)
+                            continue;
+                        if (typeof value === 'string') {
+                            props.push(`${key}: ${escapeStringForJS(value)}`);
+                        }
+                        else if (typeof value === 'number' || typeof value === 'boolean') {
+                            props.push(`${key}: ${value}`);
+                        }
+                        else if (Array.isArray(value) || typeof value === 'object') {
+                            // Handle arrays (e.g., conditions) and objects
+                            props.push(`${key}: ${JSON.stringify(value)}`);
+                        }
+                    }
+                    return `{ ${props.join(', ')} }`;
+                })
+                    .join(',\n    ');
+                constants.push(`  const ${constName}: OptionSelectorButton[] = [\n    ${buttonArray}\n  ];`);
+            }
+        }
+        for (const child of n.children) {
+            collectButtons(child);
+        }
+    }
+    const nodes = Array.isArray(node) ? node : [node];
+    for (const n of nodes) {
+        collectButtons(n);
+    }
+    return {
+        constants: constants.length > 0 ? constants.join('\n') + '\n' : '',
+        nameMap,
+    };
+}
+function generateJSXFromTree(tree, indent = 4, pageKey, nameMap) {
+    if (tree === null) {
+        // Blank page - return empty fragment
+        const indentStr = ' '.repeat(indent);
+        return `${indentStr}<> </>`;
+    }
+    else if (Array.isArray(tree)) {
+        // Multiple root components - wrap in fragment
+        const childrenJSX = tree
+            .map((node) => generateJSX(node, indent + 2, pageKey, node.component.id, nameMap))
+            .join('\n');
+        const indentStr = ' '.repeat(indent);
+        return `${indentStr}<>\n${childrenJSX}\n${indentStr}</>`;
+    }
+    else {
+        // Single root component
+        return generateJSX(tree, indent, pageKey, tree.component.id, nameMap);
+    }
+}
+function generateJSX(node, indent = 4, pageKey, componentId, nameMap) {
+    const comp = node.component;
+    const type = comp.type;
+    const tagName = getComponentName(type);
+    // Note: We don't throw errors here, but if we did, we'd use the context
+    // The context is available for future error handling if needed
+    // Get valid props for this component type (default to base props if unknown)
+    const validProps = COMPONENT_SPECIFIC_PROPS[tagName] || COMPONENT_SPECIFIC_PROPS[type] || BASE_COMPONENT_PROPS;
+    // Validate props; get valid keys and any extra (non-schema) props to store in props={}
+    const { validPropKeys, extraProps } = validateComponentProps(comp, validProps);
+    const props = [];
+    // Always preserve component ID from JSON
+    props.push(`id=${escapeStringForJSX(comp.id)}`);
+    props.push(`key=${escapeStringForJSX(comp.key)}`);
+    // Add tags if present
+    if (comp.tags && Array.isArray(comp.tags) && comp.tags.length > 0) {
+        props.push(`tags={[${comp.tags.map((t) => `"${t}"`).join(', ')}]}`);
+    }
+    // Add other props (only include validated props, excluding id, key, tags, type, parent_id, buttons, _location, and ignored properties)
+    // _location is excluded because it's derived from the filename (e.g., before_page.location.tsx)
+    const excludedProps = new Set([
+        'id',
+        'key',
+        'tags',
+        'type',
+        'parent_id',
+        'buttons',
+        '_location',
+        ...IGNORED_COMPONENT_PROPERTIES,
+    ]);
+    for (const [key, value] of Object.entries(comp)) {
+        if (excludedProps.has(key))
+            continue;
+        // Only include props that were validated as valid
+        if (!validPropKeys.has(key))
+            continue;
+        if (value === null || value === undefined)
+            continue;
+        if (typeof value === 'string') {
+            // Handle style prop: convert CSS string to JSX style object
+            if (key === 'style') {
+                const styleObj = cssStringToStyleObject(value);
+                const styleStr = styleObjectToJSX(styleObj);
+                props.push(`style={${styleStr}}`);
+            }
+            else if (value.includes('{{')) {
+                // Handle template variables: convert {{variable}} strings to template literals
+                // e.g., "{{first_name}}'s plan" -> {`{{first_name}}'s plan`}
+                const templateLiteral = stringToTemplateLiteral(value);
+                props.push(`${key}={${templateLiteral}}`);
+            }
+            else {
+                props.push(`${key}=${escapeStringForJSX(value)}`);
+            }
+        }
+        else if (typeof value === 'number' || typeof value === 'boolean') {
+            props.push(`${key}={${value}}`);
+        }
+        else if (Array.isArray(value)) {
+            // Handle arrays (e.g., conditions, conditional_tags, outputs_onmounted, etc.)
+            // buttons are excluded and handled separately below
+            const arrayExpression = valueToJSXExpression(value);
+            props.push(`${key}={${arrayExpression}}`);
+        }
+        else if (typeof value === 'object') {
+            // Handle objects (e.g., nested condition objects, etc.)
+            const objectExpression = valueToJSXExpression(value);
+            props.push(`${key}={${objectExpression}}`);
+        }
+    }
+    // Handle OptionSelector buttons - use the name from the map if available
+    if (type === 'OptionSelector' && comp.buttons) {
+        const buttons = comp.buttons;
+        if (Array.isArray(buttons) && buttons.length > 0) {
+            const constName = nameMap?.get(comp.id) || camelCase(comp.key || comp.id) + 'Buttons';
+            props.push(`buttons={${constName}}`);
+        }
+    }
+    // Store extra (non-schema) props in a props={...} JSON object for round-trip preservation
+    if (Object.keys(extraProps).length > 0) {
+        props.push(`props={${valueToJSXExpression(extraProps)}}`);
+    }
+    // Handle CustomHTML: convert text prop to JSX children
+    let customHTMLChildren = null;
+    if (type === 'CustomHTML' && comp.text && typeof comp.text === 'string') {
+        // Remove text from props (we'll use children instead)
+        const textIndex = props.findIndex((p) => p.startsWith('text='));
+        if (textIndex !== -1) {
+            props.splice(textIndex, 1);
+        }
+        // Convert HTML to JSX children
+        customHTMLChildren = htmlToJSXChildren(comp.text, indent + 2);
+    }
+    const indentStr = ' '.repeat(indent);
+    const childIndent = indent + 2;
+    // If CustomHTML has children from HTML conversion, use those
+    if (customHTMLChildren !== null) {
+        return `${indentStr}<${tagName} ${props.join(' ')}>\n${customHTMLChildren}\n${indentStr}</${tagName}>`;
+    }
+    if (node.children.length === 0) {
+        return `${indentStr}<${tagName} ${props.join(' ')} />`;
+    }
+    const childrenJSX = node.children
+        .map((child) => generateJSX(child, childIndent, pageKey, child.component.id, nameMap))
+        .join('\n');
+    return `${indentStr}<${tagName} ${props.join(' ')}>\n${childrenJSX}\n${indentStr}</${tagName}>`;
+}
+async function generateStylesFile(styles, embeddableId) {
+    try {
+        // Convert JSON back to CSS
+        // CSSJSON format: { children: { selector: { attributes: {...} } } }
+        const cssJson = {
+            children: {},
+        };
+        for (const [selector, attributes] of Object.entries(styles)) {
+            cssJson.children[selector] = {
+                attributes: attributes,
+            };
+        }
+        const css = CSSJSON.toCSS(cssJson);
+        // Write to embeddables/<id>/styles/index.css
+        const filePath = path.join('embeddables', embeddableId, 'styles', 'index.css');
+        fs.mkdirSync(path.dirname(filePath), { recursive: true });
+        fs.writeFileSync(filePath, css, 'utf8');
+        console.log(`${pc.gray(`Generated ${filePath}`)}`);
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            throw new Error(`Styles: ${error.message}`);
+        }
+        throw error;
+    }
+}
+// Helper functions
+function capitalizeFirst(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function camelCase(str) {
+    return str
+        .replace(/[^a-zA-Z0-9]/g, ' ')
+        .split(' ')
+        .map((word, index) => {
+        if (index === 0) {
+            return word.toLowerCase();
+        }
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    })
+        .join('')
+        .replace(/[^a-zA-Z0-9]/g, '');
+}
+function escapeString(str) {
+    // Escape backslashes first, then quotes, then all newline variants
+    return str
+        .replace(/\\/g, '\\\\')
+        .replace(/"/g, '\\"')
+        .replace(/\r\n/g, '\\n') // Windows line endings
+        .replace(/\r/g, '\\n') // Old Mac line endings
+        .replace(/\n/g, '\\n'); // Unix line endings
+}
+function escapeStringForJSX(str) {
+    // Check if string contains double quotes - if so, use template literals
+    const hasDoubleQuotes = str.includes('"');
+    if (hasDoubleQuotes) {
+        // Use template literals (backticks) - escape backticks, backslashes, and ${
+        let escaped = str
+            .replace(/\\/g, '\\\\') // Escape backslashes first
+            .replace(/`/g, '\\`') // Escape backticks
+            .replace(/\$\{/g, '\\${'); // Escape template literal expressions
+        // Escape newlines
+        escaped = escaped
+            .replace(/\r\n/g, '\\n') // Windows line endings
+            .replace(/\r/g, '\\n') // Old Mac line endings
+            .replace(/\n/g, '\\n'); // Unix line endings
+        return `{\`${escaped}\`}`;
+    }
+    // No double quotes - use regular quote selection
+    const doubleQuoteCount = (str.match(/"/g) || []).length;
+    const singleQuoteCount = (str.match(/'/g) || []).length;
+    // Escape backslashes first
+    let escaped = str.replace(/\\/g, '\\\\');
+    // Escape newlines
+    escaped = escaped
+        .replace(/\r\n/g, '\\n') // Windows line endings
+        .replace(/\r/g, '\\n') // Old Mac line endings
+        .replace(/\n/g, '\\n'); // Unix line endings
+    // Use single quotes if there are more double quotes, otherwise use double quotes
+    if (doubleQuoteCount > singleQuoteCount) {
+        // Use single quotes and escape single quotes
+        escaped = escaped.replace(/'/g, "\\'");
+        return `'${escaped}'`;
+    }
+    else {
+        // Use double quotes and escape double quotes
+        escaped = escaped.replace(/"/g, '\\"');
+        return `"${escaped}"`;
+    }
+}
+/**
+ * Converts HTML string to JSX children code.
+ * This is a simplified parser that handles common HTML cases.
+ */
+function htmlToJSXChildren(html, indent) {
+    const indentStr = ' '.repeat(indent);
+    const result = [];
+    // Simple HTML parser using regex (handles common cases)
+    // This is a basic implementation - for production, consider using a proper HTML parser
+    let pos = 0;
+    const len = html.length;
+    while (pos < len) {
+        // Skip whitespace at the start
+        const whitespaceMatch = html.slice(pos).match(/^\s+/);
+        if (whitespaceMatch) {
+            pos += whitespaceMatch[0].length;
+            continue;
+        }
+        // Check for HTML comment and skip it
+        if (html.slice(pos).startsWith('<!--')) {
+            const commentEnd = html.indexOf('-->', pos);
+            if (commentEnd !== -1) {
+                pos = commentEnd + 3; // Skip past -->
+                continue;
+            }
+            else {
+                // Malformed comment - skip to end
+                break;
+            }
+        }
+        // Check for HTML tag
+        const tagMatch = html.slice(pos).match(/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*)>/);
+        if (tagMatch) {
+            const isClosing = tagMatch[1] === '/';
+            const tagName = tagMatch[2];
+            const htmlAttrsStr = tagMatch[3];
+            const fullMatch = tagMatch[0];
+            if (isClosing) {
+                // Closing tag - we'll handle this in the opening tag logic
+                pos += fullMatch.length;
+                continue;
+            }
+            // Check if it's a self-closing tag
+            const isSelfClosing = htmlAttrsStr.endsWith('/') ||
+                [
+                    'img',
+                    'br',
+                    'hr',
+                    'input',
+                    'meta',
+                    'link',
+                    'area',
+                    'base',
+                    'col',
+                    'embed',
+                    'source',
+                    'track',
+                    'wbr',
+                ].includes(tagName.toLowerCase());
+            // Parse attributes
+            const attrs = [];
+            // First, find all attribute names (with or without values)
+            // Match: attr, attr=value, attr="value", attr='value'
+            // We need to handle attributes without values (like <img alt />) and skip them
+            const attrRegex = /(\w+)(?:="([^"]*)"|='([^']*)'|=(.+?)(?=[\s>]|$))?/g;
+            let attrMatch;
+            const seenAttrs = new Set();
+            while ((attrMatch = attrRegex.exec(htmlAttrsStr)) !== null) {
+                const attrName = attrMatch[1];
+                const attrValue = attrMatch[2] || attrMatch[3] || attrMatch[4] || '';
+                // Skip if we've already seen this attribute
+                if (seenAttrs.has(attrName))
+                    continue;
+                seenAttrs.add(attrName);
+                // Skip attributes without values (like <img alt />) - these should be removed
+                if (!attrMatch[0].includes('=')) {
+                    continue;
+                }
+                // Convert HTML attribute names to JSX (e.g., class -> className, for -> htmlFor)
+                let jsxAttrName = attrName;
+                if (attrName === 'class')
+                    jsxAttrName = 'className';
+                else if (attrName === 'for')
+                    jsxAttrName = 'htmlFor';
+                else if (attrName === 'tabindex')
+                    jsxAttrName = 'tabIndex';
+                // Handle style attribute: convert CSS string to JSX object
+                if (attrName === 'style' && attrValue) {
+                    const styleObj = cssStringToStyleObject(attrValue);
+                    const styleStr = styleObjectToJSX(styleObj);
+                    attrs.push(`style={${styleStr}}`);
+                    continue;
+                }
+                // Skip attributes with empty values (like alt="")
+                if (attrValue === '') {
+                    continue;
+                }
+                // Escape the attribute value for JSX
+                // JSX attribute strings don't support \" escaping like JS strings
+                // So if the value contains double quotes, use single quotes for the outer delimiter
+                const hasDoubleQuotes = attrValue.includes('"');
+                const hasSingleQuotes = attrValue.includes("'");
+                if (hasDoubleQuotes && !hasSingleQuotes) {
+                    // Use single quotes - only need to escape backslashes and newlines
+                    const escapedValue = attrValue
+                        .replace(/\\/g, '\\\\')
+                        .replace(/\n/g, '\\n')
+                        .replace(/\r/g, '\\r');
+                    attrs.push(`${jsxAttrName}='${escapedValue}'`);
+                }
+                else if (hasDoubleQuotes && hasSingleQuotes) {
+                    // Value has both quote types - use JSX expression with template literal
+                    const escapedValue = attrValue
+                        .replace(/\\/g, '\\\\')
+                        .replace(/`/g, '\\`')
+                        .replace(/\$\{/g, '\\${') // Escape template literal expressions
+                        .replace(/\n/g, '\\n')
+                        .replace(/\r/g, '\\r');
+                    attrs.push(`${jsxAttrName}={\`${escapedValue}\`}`);
+                }
+                else {
+                    // No double quotes - use double quotes as before
+                    const escapedValue = attrValue
+                        .replace(/\\/g, '\\\\')
+                        .replace(/\n/g, '\\n')
+                        .replace(/\r/g, '\\r');
+                    attrs.push(`${jsxAttrName}="${escapedValue}"`);
+                }
+            }
+            pos += fullMatch.length;
+            // Special handling for <style> and <script> tags: preserve content as raw text
+            const isRawTextTag = tagName.toLowerCase() === 'style' || tagName.toLowerCase() === 'script';
+            // Find the content and closing tag for non-self-closing tags
+            if (!isSelfClosing) {
+                // Find matching closing tag
+                const closingTag = `</${tagName}>`;
+                let depth = 1;
+                let searchPos = pos;
+                let contentEnd = -1;
+                while (depth > 0 && searchPos < len) {
+                    const nextOpen = html.indexOf(`<${tagName}`, searchPos);
+                    const nextClose = html.indexOf(closingTag, searchPos);
+                    if (nextClose === -1) {
+                        // No closing tag found - treat as self-closing
+                        break;
+                    }
+                    if (nextOpen !== -1 && nextOpen < nextClose) {
+                        // Found nested opening tag
+                        depth++;
+                        searchPos = nextOpen + 1;
+                    }
+                    else {
+                        // Found closing tag
+                        depth--;
+                        if (depth === 0) {
+                            contentEnd = nextClose;
+                        }
+                        else {
+                            searchPos = nextClose + closingTag.length;
+                        }
+                    }
+                }
+                if (contentEnd !== -1) {
+                    const content = html.slice(pos, contentEnd);
+                    const attrsStr = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+                    if (isRawTextTag) {
+                        // For <style> and <script>, preserve content as raw text without processing
+                        // In JSX, this content must be wrapped in a template literal string expression
+                        const rawContent = content;
+                        if (rawContent.trim()) {
+                            // Escape backticks and ${ in the content to prevent template literal issues
+                            const escapedContent = rawContent
+                                .replace(/\\/g, '\\\\') // Escape backslashes first
+                                .replace(/`/g, '\\`') // Escape backticks
+                                .replace(/\${/g, '\\${'); // Escape ${ to prevent interpolation
+                            // Output as a template literal wrapped in curly braces for JSX
+                            result.push(`${indentStr}<${tagName}${attrsStr}>{`);
+                            result.push(`${indentStr}  \`${escapedContent}\``);
+                            result.push(`${indentStr}}</${tagName}>`);
+                        }
+                        else {
+                            result.push(`${indentStr}<${tagName}${attrsStr} />`);
+                        }
+                    }
+                    else {
+                        // For other tags, process children recursively
+                        const childrenJSX = htmlToJSXChildren(content, indent + 2);
+                        if (childrenJSX.trim()) {
+                            result.push(`${indentStr}<${tagName}${attrsStr}>`);
+                            result.push(childrenJSX);
+                            result.push(`${indentStr}</${tagName}>`);
+                        }
+                        else {
+                            result.push(`${indentStr}<${tagName}${attrsStr} />`);
+                        }
+                    }
+                    pos = contentEnd + closingTag.length;
+                    continue;
+                }
+            }
+            // Self-closing tag or no closing tag found
+            const attrsStr = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+            result.push(`${indentStr}<${tagName}${attrsStr} />`);
+            continue;
+        }
+        // Text content
+        const textEnd = html.indexOf('<', pos);
+        if (textEnd === -1) {
+            // Rest is text
+            const text = html.slice(pos).trim();
+            if (text) {
+                // Unescape HTML entities
+                const unescapedText = text
+                    .replace(/&amp;/g, '&')
+                    .replace(/&lt;/g, '<')
+                    .replace(/&gt;/g, '>')
+                    .replace(/&quot;/g, '"')
+                    .replace(/&#39;/g, "'")
+                    .replace(/&nbsp;/g, ' ');
+                // Check if text contains template variables
+                if (unescapedText.includes('{{')) {
+                    // Convert to template literal expression
+                    const templateLiteral = stringToTemplateLiteral(unescapedText);
+                    result.push(`${indentStr}{${templateLiteral}}`);
+                }
+                else {
+                    // Escape special characters for JSX text content
+                    const escapedText = escapeTextForJSX(unescapedText);
+                    result.push(`${indentStr}${escapedText}`);
+                }
+            }
+            break;
+        }
+        else {
+            const text = html.slice(pos, textEnd).trim();
+            if (text) {
+                // Unescape HTML entities
+                const unescapedText = text
+                    .replace(/&amp;/g, '&')
+                    .replace(/&lt;/g, '<')
+                    .replace(/&gt;/g, '>')
+                    .replace(/&quot;/g, '"')
+                    .replace(/&#39;/g, "'")
+                    .replace(/&nbsp;/g, ' ');
+                // Check if text contains template variables
+                if (unescapedText.includes('{{')) {
+                    // Convert to template literal expression
+                    const templateLiteral = stringToTemplateLiteral(unescapedText);
+                    result.push(`${indentStr}{${templateLiteral}}`);
+                }
+                else {
+                    // Escape special characters for JSX text content
+                    const escapedText = escapeTextForJSX(unescapedText);
+                    result.push(`${indentStr}${escapedText}`);
+                }
+            }
+            pos = textEnd;
+        }
+    }
+    return result.join('\n');
+}
+/**
+ * Converts a CSS string to a style object.
+ * Example: "margin: 0; padding: 0; color: #171717;" -> { margin: 0, padding: 0, color: "#171717" }
+ */
+function cssStringToStyleObject(cssString) {
+    const styleObj = {};
+    // Normalize the CSS string: remove newlines, extra spaces, and trim
+    const normalized = cssString
+        .replace(/\r\n/g, ' ')
+        .replace(/\r/g, ' ')
+        .replace(/\n/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+    // Split by semicolon and process each declaration
+    const declarations = normalized.split(';').filter((decl) => decl.trim().length > 0);
+    for (const decl of declarations) {
+        const colonIndex = decl.indexOf(':');
+        if (colonIndex === -1)
+            continue;
+        const key = decl.slice(0, colonIndex).trim();
+        const value = decl.slice(colonIndex + 1).trim();
+        if (key && value) {
+            // Convert kebab-case to camelCase (e.g., line-height -> lineHeight)
+            const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+            styleObj[camelKey] = value;
+        }
+    }
+    return styleObj;
+}
+/**
+ * Converts a style object to JSX style expression string.
+ * Example: { margin: 0, padding: 0, color: "#171717" } -> "{ margin: 0, padding: 0, color: \"#171717\" }"
+ */
+function styleObjectToJSX(styleObj) {
+    const entries = [];
+    for (const [key, value] of Object.entries(styleObj)) {
+        // Convert camelCase to camelCase (already in camelCase from cssStringToStyleObject)
+        // Value might be a number string or a string that needs quotes
+        let jsxValue;
+        if (/^-?\d+(\.\d+)?$/.test(value.trim())) {
+            // It's a number (including decimals)
+            jsxValue = value.trim();
+        }
+        else {
+            // It's a string, wrap in quotes and escape
+            const escaped = value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+            jsxValue = `"${escaped}"`;
+        }
+        entries.push(`${key}: ${jsxValue}`);
+    }
+    return `{ ${entries.join(', ')} }`;
+}
+/**
+ * Escapes HTML/JSX special characters in text content for JSX.
+ * This prevents characters like <, >, and & from being interpreted as JSX tags or entities.
+ * Example: "< 18.5" -> "&lt; 18.5"
+ */
+function escapeTextForJSX(text) {
+    // Escape special characters that would break JSX/HTML
+    // Order matters: escape & first to avoid double-escaping
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+/**
+ * Converts a value to a JSX expression string.
+ * Handles arrays, objects, primitives, etc.
+ */
+function valueToJSXExpression(value) {
+    if (value === null || value === undefined) {
+        return 'null';
+    }
+    if (typeof value === 'string') {
+        return escapeStringForJS(value);
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return '[]';
+        }
+        const items = value.map((item) => valueToJSXExpression(item)).join(', ');
+        return `[${items}]`;
+    }
+    if (typeof value === 'object') {
+        const entries = [];
+        for (const [key, val] of Object.entries(value)) {
+            // Skip null/undefined values
+            if (val === null || val === undefined)
+                continue;
+            // Convert key to valid JS identifier or string literal
+            const jsKey = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : escapeStringForJS(key);
+            entries.push(`${jsKey}: ${valueToJSXExpression(val)}`);
+        }
+        return `{ ${entries.join(', ')} }`;
+    }
+    // Fallback: convert to string
+    return escapeStringForJS(String(value));
+}
+/**
+ * Converts a string with {{variable}} syntax to a template literal expression.
+ * Example: "{{first_name}}'s plan" -> "`{{first_name}}'s plan`"
+ */
+function stringToTemplateLiteral(str) {
+    // Escape backticks and backslashes for template literal
+    const escaped = str.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${'); // Escape ${ to prevent interpolation
+    return '`' + escaped + '`';
+}
+function escapeStringForJS(str) {
+    // Check if string contains double quotes - if so, use template literals
+    const hasDoubleQuotes = str.includes('"');
+    if (hasDoubleQuotes) {
+        // Use template literals (backticks) - escape backticks and backslashes
+        let escaped = str
+            .replace(/\\/g, '\\\\') // Escape backslashes first
+            .replace(/`/g, '\\`'); // Escape backticks
+        // Escape newlines
+        escaped = escaped
+            .replace(/\r\n/g, '\\n') // Windows line endings
+            .replace(/\r/g, '\\n') // Old Mac line endings
+            .replace(/\n/g, '\\n'); // Unix line endings
+        return `\`${escaped}\``;
+    }
+    // No double quotes - use regular quote selection
+    const doubleQuoteCount = (str.match(/"/g) || []).length;
+    const singleQuoteCount = (str.match(/'/g) || []).length;
+    // Escape backslashes first
+    let escaped = str.replace(/\\/g, '\\\\');
+    // Escape newlines
+    escaped = escaped
+        .replace(/\r\n/g, '\\n') // Windows line endings
+        .replace(/\r/g, '\\n') // Old Mac line endings
+        .replace(/\n/g, '\\n'); // Unix line endings
+    // Use single quotes if there are more double quotes, otherwise use double quotes
+    if (doubleQuoteCount > singleQuoteCount) {
+        // Use single quotes and escape single quotes
+        escaped = escaped.replace(/'/g, "\\'");
+        return `'${escaped}'`;
+    }
+    else {
+        // Use double quotes and escape double quotes
+        escaped = escaped.replace(/"/g, '\\"');
+        return `"${escaped}"`;
+    }
+}
+/**
+ * Generates config.json file from embeddable metadata.
+ * This file controls page ordering and stores embeddable-level metadata.
+ * Preserves the order of top-level properties from embeddable.json.
+ */
+async function generateConfigFile(embeddable, embeddableId) {
+    try {
+        const configPath = path.join('embeddables', embeddableId, 'config.json');
+        // Preserve the order of top-level properties from embeddable
+        const embeddableKeys = Object.keys(embeddable);
+        // Extract page metadata and order (excluding components which are in TSX files)
+        const pages = embeddable.pages.map((page) => {
+            const pageMetadata = {
+                key: page.key,
+            };
+            // Include page-level metadata (excluding components which are in TSX files)
+            // Preserve property order from the page object recursively
+            const pageKeys = Object.keys(page);
+            const excludePageProps = new Set(['components']);
+            for (const key of pageKeys) {
+                if (!excludePageProps.has(key) && key !== 'key') {
+                    const value = page[key];
+                    if (value !== undefined && value !== null) {
+                        pageMetadata[key] = deepClonePreservingOrder(value);
+                    }
+                }
+            }
+            return pageMetadata;
+        });
+        // Extract computedFields metadata (without code, as code is in JS files)
+        // Preserve order recursively in metadata objects
+        const computedFieldsMetadata = [];
+        if (embeddable.computedFields && Array.isArray(embeddable.computedFields)) {
+            for (const field of embeddable.computedFields) {
+                const cloned = deepClonePreservingOrder(field);
+                const { code, ...metadata } = cloned;
+                computedFieldsMetadata.push(metadata);
+            }
+        }
+        // Extract dataOutputs metadata (without code, as code is in JS files)
+        // Preserve order recursively in metadata objects
+        const dataOutputsMetadata = [];
+        if (embeddable.dataOutputs && Array.isArray(embeddable.dataOutputs)) {
+            for (const action of embeddable.dataOutputs) {
+                const cloned = deepClonePreservingOrder(action);
+                const { code, ...metadata } = cloned;
+                dataOutputsMetadata.push(metadata);
+            }
+        }
+        // Build config object preserving the order from embeddable
+        const config = {};
+        const excludeProps = new Set(['pages', 'styles', 'computedFields', 'dataOutputs', 'components']);
+        // Iterate through embeddable keys in order to preserve property order
+        for (const key of embeddableKeys) {
+            if (key === 'pages') {
+                // Replace pages with page metadata (without components)
+                config.pages = pages;
+            }
+            else if (key === 'styles') {
+                // Skip styles (they're in CSS files)
+                continue;
+            }
+            else if (key === 'computedFields') {
+                // Replace computedFields with metadata (without code)
+                if (computedFieldsMetadata.length > 0) {
+                    config.computedFields = computedFieldsMetadata;
+                }
+            }
+            else if (key === 'dataOutputs') {
+                // Replace dataOutputs with metadata (without code)
+                if (dataOutputsMetadata.length > 0) {
+                    config.dataOutputs = dataOutputsMetadata;
+                }
+            }
+            else if (key === 'components') {
+                // Skip components (they're in TSX files in global-components/)
+                continue;
+            }
+            else {
+                // Regular metadata property - preserve as-is, with order preserved recursively
+                const value = embeddable[key];
+                if (value !== undefined && value !== null) {
+                    config[key] = deepClonePreservingOrder(value);
+                }
+            }
+        }
+        // Ensure id is set if it wasn't already
+        if (!config.id) {
+            config.id = embeddableId;
+        }
+        fs.mkdirSync(path.dirname(configPath), { recursive: true });
+        fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8');
+        console.log(`${pc.gray(`Generated ${configPath}`)}`);
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            throw new Error(`Config: ${error.message}`);
+        }
+        throw error;
+    }
+}
+/**
+ * Extracts computedFields to JS files in computed-fields/ folder.
+ * Each computedField with code is saved as a separate JS file.
+ */
+async function extractComputedFields(computedFields, embeddableId) {
+    const computedFieldsDir = path.join('embeddables', embeddableId, 'computed-fields');
+    fs.mkdirSync(computedFieldsDir, { recursive: true });
+    for (const field of computedFields) {
+        if (!field.code) {
+            continue;
+        }
+        // Try using key or id as identifier
+        const identifier = field.key || field.id;
+        if (!identifier) {
+            continue;
+        }
+        const fileName = `${sanitizeFileName(identifier)}.js`;
+        const filePath = path.join(computedFieldsDir, fileName);
+        // Write the code as-is (it should be valid JavaScript)
+        fs.writeFileSync(filePath, field.code, 'utf8');
+        console.log(`${pc.gray(`Generated ${filePath}`)}`);
+    }
+}
+/**
+ * Extracts dataOutputs (actions) to JS files in actions/ folder.
+ * Each action with code is saved as a separate JS file.
+ */
+async function extractDataOutputs(dataOutputs, embeddableId) {
+    const actionsDir = path.join('embeddables', embeddableId, 'actions');
+    fs.mkdirSync(actionsDir, { recursive: true });
+    for (const action of dataOutputs) {
+        if (!action.code) {
+            continue;
+        }
+        // Use name as the filename, fallback to id if name doesn't exist
+        const identifier = action.name || action.id;
+        if (!identifier) {
+            continue;
+        }
+        const fileName = `${sanitizeFileName(identifier)}.js`;
+        const filePath = path.join(actionsDir, fileName);
+        // Write the code as-is (it should be valid JavaScript)
+        fs.writeFileSync(filePath, action.code, 'utf8');
+        console.log(`${pc.gray(`Generated ${filePath}`)}`);
+    }
+}
+/**
+ * Helper function to recursively find the _location of a component.
+ * If the component has a parent_id, it checks the parent's location recursively.
+ * Returns undefined if no location is found in the component or any parent.
+ */
+function findComponentLocation(component, componentMap) {
+    if (component._location) {
+        return component._location;
+    }
+    if (component.parent_id) {
+        const parent = componentMap.get(component.parent_id);
+        if (parent) {
+            return findComponentLocation(parent, componentMap);
+        }
+    }
+    return undefined;
+}
+/**
+ * Extracts global components to TSX files in global-components/ folder.
+ * Components are grouped by their _location (for root components without parent_id)
+ * or by their parent's location (for child components).
+ * File naming: <location>.location.tsx (e.g., before_page.location.tsx)
+ */
+async function extractGlobalComponents(components, embeddableId, fix) {
+    const globalComponentsDir = path.join('embeddables', embeddableId, 'global-components');
+    fs.mkdirSync(globalComponentsDir, { recursive: true });
+    if (components.length === 0) {
+        return;
+    }
+    // Create a map of id -> component for location resolution
+    const componentMap = new Map();
+    for (const comp of components) {
+        componentMap.set(comp.id, comp);
+    }
+    // Group components by location
+    // Components without parent_id must have _location and go in their location file
+    // Components with parent_id inherit location from parent and go in parent's location file
+    const componentsByLocation = new Map();
+    for (const component of components) {
+        const location = findComponentLocation(component, componentMap);
+        // Components without parent_id must have _location
+        if (!component.parent_id && !location) {
+            if (fix) {
+                console.warn(`Removed global component "${component.id}" (key: "${component.key}") – missing _location (no parent_id).`);
+                continue;
+            }
+            throw new Error(`Global component "${component.id}" (key: "${component.key}") must have _location since it has no parent_id.`);
+        }
+        if (location) {
+            if (!componentsByLocation.has(location)) {
+                componentsByLocation.set(location, []);
+            }
+            componentsByLocation.get(location).push(component);
+        }
+    }
+    // Generate TSX file for each location
+    for (const [location, locationComponents] of componentsByLocation) {
+        const fileName = `${location}.location.tsx`;
+        const filePath = path.join(globalComponentsDir, fileName);
+        // Build tree from flat component list (similar to buildTree for pages)
+        const tree = buildTreeForGlobalComponents(locationComponents, fix);
+        // Generate TSX code
+        const tsx = generateGlobalComponentTSX(locationComponents, tree);
+        // Write to file
+        fs.writeFileSync(filePath, tsx, 'utf8');
+        console.log(`${pc.gray(`Generated ${filePath}`)}`);
+    }
+}
+/**
+ * Builds a component tree from a flat list of components (similar to buildTree for pages).
+ */
+function buildTreeForGlobalComponents(components, fix) {
+    // Filter out components without type and ignored component types
+    let filteredComponents = components.filter((comp) => {
+        if (!comp.type) {
+            if (fix) {
+                console.warn(`Removed global component (id: ${comp.id}, key: ${comp.key}) – missing type property.`);
+                return false;
+            }
+            throw new Error(`Global component (id: ${comp.id}, key: ${comp.key}) is missing required type property.`);
+        }
+        return !IGNORED_COMPONENT_TYPES.has(comp.type);
+    });
+    // Filter out components missing required props
+    filteredComponents = filteredComponents.filter((comp) => {
+        return hasRequiredProps(comp, fix);
+    });
+    // Create a map of id -> component
+    const componentMap = new Map();
+    for (const comp of filteredComponents) {
+        componentMap.set(comp.id, comp);
+    }
+    // Find root components (no parent_id)
+    const roots = [];
+    for (const comp of filteredComponents) {
+        if (!comp.parent_id) {
+            roots.push(comp);
+        }
+    }
+    // Allow empty locations - return null if no components
+    if (roots.length === 0) {
+        return null;
+    }
+    // Build tree recursively for each root
+    const rootNodes = roots.map((root) => buildNode(root, componentMap, '', fix));
+    // Return single node or array of nodes
+    return rootNodes.length === 1 ? rootNodes[0] : rootNodes;
+}
+/**
+ * Generates TSX code for global components (similar to generateTSX for pages).
+ */
+function generateGlobalComponentTSX(components, tree) {
+    const imports = tree ? collectImports(tree) : [];
+    const hasButtons = tree ? hasButtonConstants(tree) : false;
+    const { constants, nameMap } = tree
+        ? generateButtonConstants(tree)
+        : { constants: '', nameMap: new Map() };
+    const jsx = generateJSXFromTree(tree, 2, undefined, nameMap);
+    return `"use client";
+
+import React from "react";
+${imports
+        .map((imp) => `import { ${imp} } from "../../../src/components/primitives/${imp}";`)
+        .join('\n')}
+${hasButtons
+        ? `
+import type { OptionSelectorButton } from "../../../src/types-builder";`
+        : ''}
+
+export default function GlobalComponents() {
+${constants}
+  return (
+${jsx}
+  );
+}
+`;
+}
+/**
+ * Sanitizes a string to be safe for use as a filename.
+ */
+export function sanitizeFileName(str) {
+    return str
+        .replace(/[^a-zA-Z0-9_-]/g, '_')
+        .replace(/^_+|_+$/g, '')
+        .replace(/_{2,}/g, '_');
+}