@embeddables/cli 0.7.11 → 0.7.14

package/dist/compiler/reverse.js

@@ -1,1906 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import CSSJSON from 'cssjson';
-import pc from 'picocolors';
-import * as stdout from '../stdout.js';
-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) {
-            stdout.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',
-        'parent_key',
-        '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)' : '';
-            stdout.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}`;
-                stdout.print(`  - 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}`;
-                stdout.print(`  → Renamed duplicate ID "${occ.id}" to "${newId}" in page "${occ.pageKey}" (${location})`);
-            }
-        }
-    }
-    return idMapping;
-}
-/**
- * Fixes deprecated parent_key: resolves to parent_id using first component with matching key,
- * removes parent_key, and removes components that still have no parent_id after resolution.
- * Only runs when fix is enabled.
- */
-function fixParentKeyDeprecation(components, fix) {
-    if (!fix || components.length === 0)
-        return;
-    // Build key -> id map (first occurrence wins, exclude ignored types)
-    const keyToId = new Map();
-    for (const comp of components) {
-        if (comp.key &&
-            comp.id &&
-            !keyToId.has(comp.key) &&
-            comp.type &&
-            !IGNORED_COMPONENT_TYPES.has(comp.type)) {
-            keyToId.set(comp.key, comp.id);
-        }
-    }
-    // Resolve parent_key -> parent_id, remove parent_key, track components to remove
-    const toRemove = new Map(); // id -> parent_key for warning
-    for (const comp of components) {
-        const parentKey = comp.parent_key;
-        if (!parentKey)
-            continue;
-        if (!comp.parent_id) {
-            const resolvedId = keyToId.get(parentKey);
-            if (resolvedId) {
-                comp.parent_id = resolvedId;
-                stdout.warn(`Fixed parent_key on component (id: ${comp.id}, key: ${comp.key}) – resolved parent_key "${parentKey}" to parent_id.`);
-            }
-            else {
-                toRemove.set(comp.id, parentKey);
-            }
-        }
-        else {
-            stdout.warn(`Fixed parent_key on component (id: ${comp.id}, key: ${comp.key}) – removed deprecated parent_key (already has parent_id).`);
-        }
-        delete comp.parent_key;
-    }
-    // Remove components that couldn't resolve parent
-    if (toRemove.size > 0) {
-        let i = 0;
-        while (i < components.length) {
-            const comp = components[i];
-            if (toRemove.has(comp.id)) {
-                stdout.warn(`Removed component (id: ${comp.id}, key: ${comp.key}) – parent_key "${toRemove.get(comp.id)}" not found, no parent_id.`);
-                components.splice(i, 1);
-            }
-            else {
-                i++;
-            }
-        }
-    }
-}
-/**
- * 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);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-function hasDeprecatedParentKey(components) {
-    return components.some((comp) => comp.parent_key != null);
-}
-export async function reverseCompile(embeddable, embeddableId, opts) {
-    const fix = opts?.fix ?? false;
-    const preserve = opts?.preserve ?? false;
-    const pullMetadata = opts?.pullMetadata;
-    // When fix is disabled, throw on deprecated parent_key so user gets interactive retry prompt
-    if (!fix) {
-        for (const page of embeddable.pages) {
-            if (hasDeprecatedParentKey(page.components)) {
-                const count = page.components.filter((c) => c.parent_key != null).length;
-                throw new Error(`Found deprecated parent_key on ${count} component(s) in page "${page.key}". Run with --fix to resolve.`);
-            }
-        }
-        if (embeddable.components && Array.isArray(embeddable.components)) {
-            if (hasDeprecatedParentKey(embeddable.components)) {
-                const count = embeddable.components.filter((c) => c.parent_key != null).length;
-                throw new Error(`Found deprecated parent_key on ${count} global component(s). Run with --fix to resolve.`);
-            }
-        }
-    }
-    // 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);
-    }
-    // Fix deprecated parent_key (resolve to parent_id, remove parent_key, drop orphans).
-    // Must run before extractGlobalComponents so resolved parent_id avoids "must have _location since it has no parent_id" errors.
-    if (fix) {
-        for (const page of embeddable.pages) {
-            fixParentKeyDeprecation(page.components, fix);
-        }
-        if (embeddable.components && Array.isArray(embeddable.components)) {
-            fixParentKeyDeprecation(embeddable.components, fix);
-        }
-    }
-    // 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, { pullMetadata, preserve });
-    // 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);
-    }
-    stdout.print(`${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');
-        stdout.print(`${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) {
-                stdout.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 { declarations: validationFunctions, validationFunctionNameMap, identifierToGeneratedName, } = tree
-        ? generateCustomValidationFunctions(tree)
-        : {
-            declarations: '',
-            validationFunctionNameMap: new Map(),
-            identifierToGeneratedName: new Map(),
-        };
-    const jsx = generateJSXFromTree(tree, 4, pageKey, nameMap, validationFunctionNameMap, identifierToGeneratedName);
-    return `"use client";
-
-${imports.map((imp) => `import { ${imp} } from "@embeddables/cli/components";`).join('\n')}
-${hasButtons
-        ? `
-import type { OptionSelectorButton } from "@embeddables/cli/types";`
-        : ''}
-
-export default function ${pageName}() {
-${constants}${validationFunctions}
-  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;
-}
-/** True if the string is a valid JS identifier (used as function name only). */
-function isSimpleIdentifier(str) {
-    return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(str) && str.length > 0;
-}
-/**
- * Extract the body of a function from source like "function name(value) { ... }".
- * Returns the inner content between the first { and its matching }, or null if not found.
- */
-function extractFunctionBody(source) {
-    const open = source.indexOf('{');
-    if (open === -1)
-        return null;
-    let depth = 1;
-    let i = open + 1;
-    while (depth > 0 && i < source.length) {
-        if (source[i] === '{')
-            depth++;
-        else if (source[i] === '}')
-            depth--;
-        i++;
-    }
-    return depth === 0 ? source.slice(open + 1, i - 1).trim() : null;
-}
-/**
- * Generate custom validation function declarations and a map from component id to function name.
- * - If value is a simple identifier (e.g. "customValidate"): emit a stub and reference it by name.
- * - If value is function code: emit one named function per component with the actual body; map component id -> name.
- */
-function generateCustomValidationFunctions(node) {
-    const validationFunctionNameMap = new Map();
-    const identifierNames = new Set();
-    const codeByComponentId = new Map();
-    if (node === null) {
-        return {
-            declarations: '',
-            validationFunctionNameMap: new Map(),
-            identifierToGeneratedName: new Map(),
-        };
-    }
-    function collect(n) {
-        if (n.component.type === 'InputBox') {
-            if (n.component.validation_formula !== 'custom') {
-                for (const child of n.children)
-                    collect(child);
-                return;
-            }
-            const value = n.component.custom_validation_function;
-            if (typeof value !== 'string' || !value)
-                return;
-            if (isSimpleIdentifier(value)) {
-                identifierNames.add(value);
-            }
-            else {
-                codeByComponentId.set(n.component.id, value);
-            }
-        }
-        for (const child of n.children)
-            collect(child);
-    }
-    const nodes = Array.isArray(node) ? node : [node];
-    for (const n of nodes)
-        collect(n);
-    const lines = [];
-    // Use hardcoded "validate" (then validate2, validate3 ...) and emit JS, not TS
-    let usedValidateIndex = 0;
-    const nextValidateName = () => {
-        const n = usedValidateIndex;
-        usedValidateIndex++;
-        return n === 0 ? 'validate' : `validate${n + 1}`;
-    };
-    const identifierToGeneratedName = new Map();
-    // Stubs for identifier-only names: all named "validate", "validate2", ...
-    for (const name of Array.from(identifierNames).sort()) {
-        const fnName = nextValidateName();
-        identifierToGeneratedName.set(name, fnName);
-        lines.push(`  function ${fnName}(value) {\n    return true\n  }`);
-    }
-    // One function per component with inline code; name is "validate", "validate2", ...
-    for (const [compId, code] of codeByComponentId) {
-        const fnName = nextValidateName();
-        validationFunctionNameMap.set(compId, fnName);
-        const body = extractFunctionBody(code);
-        if (body !== null) {
-            const indentedBody = body
-                .split('\n')
-                .map((l) => '    ' + l.trimStart())
-                .join('\n');
-            lines.push(`  function ${fnName}(value) {\n${indentedBody}\n  }`);
-        }
-        else {
-            lines.push(`  function ${fnName}(value) {\n    return (${code})\n  }`);
-        }
-    }
-    const declarations = lines.length > 0 ? lines.join('\n') + '\n' : '';
-    return { declarations, validationFunctionNameMap, identifierToGeneratedName };
-}
-function findComponentNodeById(node, id) {
-    if (node === null)
-        return null;
-    const nodes = Array.isArray(node) ? node : [node];
-    for (const n of nodes) {
-        if (n.component.id === id)
-            return n;
-        for (const child of n.children) {
-            const found = findComponentNodeById(child, id);
-            if (found)
-                return found;
-        }
-    }
-    return null;
-}
-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, validationFunctionNameMap, identifierToGeneratedName) {
-    if (tree === null) {
-        const indentStr = ' '.repeat(indent);
-        return `${indentStr}<> </>`;
-    }
-    else if (Array.isArray(tree)) {
-        const childrenJSX = tree
-            .map((node) => generateJSX(node, indent + 2, pageKey, node.component.id, nameMap, validationFunctionNameMap, identifierToGeneratedName))
-            .join('\n');
-        const indentStr = ' '.repeat(indent);
-        return `${indentStr}<>\n${childrenJSX}\n${indentStr}</>`;
-    }
-    else {
-        return generateJSX(tree, indent, pageKey, tree.component.id, nameMap, validationFunctionNameMap, identifierToGeneratedName);
-    }
-}
-function generateJSX(node, indent = 4, pageKey, componentId, nameMap, validationFunctionNameMap, identifierToGeneratedName) {
-    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',
-        'parent_key',
-        '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') {
-            // custom_validation_function: only emit when validation_formula is "custom"; otherwise ignore (removed on save).
-            if (key === 'custom_validation_function') {
-                if (comp.validation_formula !== 'custom')
-                    continue;
-                const fnName = validationFunctionNameMap?.get(comp.id) ?? identifierToGeneratedName?.get(value) ?? value;
-                props.push(`custom_validation_function={${fnName}}`);
-                continue;
-            }
-            // 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, validationFunctionNameMap, identifierToGeneratedName))
-        .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');
-        stdout.print(`${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;
-                }
-                // In CustomHTML we emit HTML-like attribute names (class, for, tabindex) so the
-                // TSX matches the serialized HTML. Normalize classname (wrong serialization) to class.
-                let jsxAttrName = attrName;
-                const attrLower = attrName.toLowerCase();
-                if (attrLower === 'class' || attrLower === 'classname')
-                    jsxAttrName = 'class';
-                else if (attrLower === 'for')
-                    jsxAttrName = 'for';
-                else if (attrLower === '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) {
-            // Preserve CSS custom properties (e.g., --ta, --my-variable) as-is
-            if (key.startsWith('--')) {
-                styleObj[key] = value;
-            }
-            else {
-                // 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}"`;
-        }
-        // Quote keys that aren't valid JS identifiers (e.g., CSS custom properties like --ta)
-        const jsxKey = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : `"${key}"`;
-        entries.push(`${jsxKey}: ${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, backslashes, and ${ (template interpolation)
-        let escaped = str
-            .replace(/\\/g, '\\\\') // Escape backslashes first
-            .replace(/\$\{/g, '\\${') // Escape ${ so literal ${{ ... }} (e.g. product_data) is preserved
-            .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, opts) {
-    const pullMetadata = opts?.pullMetadata;
-    const preserve = opts?.preserve ?? false;
-    try {
-        const configPath = path.join('embeddables', embeddableId, 'config.json');
-        // CLI-only fields: from pull (when branching/saving) or from existing config file.
-        let preservedVersion;
-        let preservedBranchId;
-        let preservedBranchName;
-        if (fs.existsSync(configPath)) {
-            try {
-                const existing = JSON.parse(fs.readFileSync(configPath, 'utf8'));
-                if (typeof existing._version === 'number')
-                    preservedVersion = existing._version;
-                if (typeof existing._branch_id === 'string' && existing._branch_id)
-                    preservedBranchId = existing._branch_id;
-                if (typeof existing._branch_name === 'string' && existing._branch_name)
-                    preservedBranchName = existing._branch_name;
-            }
-            catch {
-                /* ignore */
-            }
-        }
-        // 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);
-                    }
-                }
-            }
-            // When --preserve: record component order for forward compile
-            if (preserve && Array.isArray(page.components) && page.components.length > 0) {
-                pageMetadata.components_order = page.components.map((c) => c.id);
-            }
-            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/)
-                // When --preserve: record global component order for forward compile
-                if (preserve && embeddable.components && Array.isArray(embeddable.components)) {
-                    config.components_order = embeddable.components.map((c) => c.id);
-                }
-                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;
-        }
-        // Restore CLI-only fields: prefer pullMetadata (passed by pull/branch) so branch is never lost.
-        const versionToWrite = pullMetadata?.version ?? preservedVersion;
-        if (versionToWrite !== undefined)
-            config._version = versionToWrite;
-        if (pullMetadata !== undefined) {
-            if (pullMetadata.branchId !== undefined) {
-                config._branch_id = pullMetadata.branchId;
-                if (pullMetadata.branchName !== undefined)
-                    config._branch_name = pullMetadata.branchName;
-                else
-                    delete config._branch_name;
-            }
-            else {
-                delete config._branch_id;
-                delete config._branch_name;
-            }
-        }
-        else {
-            if (preservedBranchId !== undefined)
-                config._branch_id = preservedBranchId;
-            if (preservedBranchName !== undefined)
-                config._branch_name = preservedBranchName;
-        }
-        fs.mkdirSync(path.dirname(configPath), { recursive: true });
-        fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8');
-        stdout.print(`${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');
-        stdout.print(`${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');
-        stdout.print(`${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) {
-                stdout.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');
-        stdout.print(`${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) {
-                stdout.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 { declarations: validationFunctions, validationFunctionNameMap, identifierToGeneratedName, } = tree
-        ? generateCustomValidationFunctions(tree)
-        : {
-            declarations: '',
-            validationFunctionNameMap: new Map(),
-            identifierToGeneratedName: new Map(),
-        };
-    const jsx = generateJSXFromTree(tree, 2, undefined, nameMap, validationFunctionNameMap, identifierToGeneratedName);
-    return `"use client";
-
-${imports.map((imp) => `import { ${imp} } from "@embeddables/cli/components";`).join('\n')}
-${hasButtons
-        ? `
-import type { OptionSelectorButton } from "@embeddables/cli/types";`
-        : ''}
-
-export default function GlobalComponents() {
-${constants}${validationFunctions}
-  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, '_');
-}