@embeddables/cli 0.7.13 → 0.7.14

package/dist/compiler/index.js

@@ -1,1245 +0,0 @@
-import fg from 'fast-glob';
-import fs from 'node:fs';
-import path from 'node:path';
-import * as stdout from '../stdout.js';
-import { parsePageFromFile } from './parsePage.js';
-import { CompileError } from './errors.js';
-import CSSJSON from 'cssjson';
-import { sanitizeFileName } from './reverse.js';
-import { generateRandomIdByType } from './helpers/duplicateIds.js';
-import { normalizeKeyIfStartsWithDigit, keyOrIdStartsWithDigit, } from './helpers/numericLeadingKeys.js';
-import { parse } from '@babel/parser';
-import traverseImport from '@babel/traverse';
-import * as generator from '@babel/generator';
-import * as t from '@babel/types';
-import { ALLOWED_PRIMITIVES } from './registry.js';
-const traverse = (traverseImport.default ?? traverseImport);
-const generate = generator.default.generate;
-/**
- * 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;
-}
-/**
- * Returns a copy of newVal with object key order (recursively) matching oldVal
- * where possible. Keeps existing keys in old order; appends new keys at the end.
- * Arrays are not reordered; we recurse into elements by index for nested objects.
- * Used so embeddable.json diffs show only actual changes, not reordering noise.
- */
-export function reorderObjectKeysToMatch(oldVal, newVal) {
-    if (newVal === null || newVal === undefined) {
-        return newVal;
-    }
-    if (Array.isArray(newVal)) {
-        const oldArr = Array.isArray(oldVal) ? oldVal : [];
-        // If array contains objects with 'id' properties, match by id instead of index
-        // This handles cases where components are removed (e.g., invalid parent_id)
-        if (newVal.length > 0 &&
-            typeof newVal[0] === 'object' &&
-            newVal[0] !== null &&
-            'id' in newVal[0]) {
-            // Build a map of old items by id for efficient lookup
-            const oldById = new Map();
-            for (const oldItem of oldArr) {
-                if (typeof oldItem === 'object' && oldItem !== null && 'id' in oldItem) {
-                    oldById.set(oldItem.id, oldItem);
-                }
-            }
-            // Match new items with old items by id, fallback to index if id not found
-            return newVal.map((newItem, i) => {
-                if (typeof newItem === 'object' && newItem !== null && 'id' in newItem) {
-                    const id = newItem.id;
-                    const oldItem = oldById.get(id);
-                    if (oldItem !== undefined) {
-                        return reorderObjectKeysToMatch(oldItem, newItem);
-                    }
-                }
-                // Fallback to index-based matching if no id or id not found
-                return reorderObjectKeysToMatch(oldArr[i], newItem);
-            });
-        }
-        // For arrays without id-based objects, use index-based matching
-        return newVal.map((item, i) => reorderObjectKeysToMatch(oldArr[i], item));
-    }
-    if (typeof newVal === 'object' && newVal !== null) {
-        const oldObj = oldVal !== null && typeof oldVal === 'object' && !Array.isArray(oldVal)
-            ? oldVal
-            : {};
-        const newObj = newVal;
-        const oldKeys = Object.keys(oldObj);
-        const newKeysSet = new Set(Object.keys(newObj));
-        const orderedKeys = [
-            ...oldKeys.filter((k) => newKeysSet.has(k)),
-            ...Object.keys(newObj).filter((k) => !oldKeys.includes(k)),
-        ];
-        const result = {};
-        for (const k of orderedKeys) {
-            result[k] = reorderObjectKeysToMatch(oldObj[k], newObj[k]);
-        }
-        return result;
-    }
-    return newVal;
-}
-/**
- * Orders an array of items with an `id` property to match the given id list.
- * Items whose id is in the list appear first in that order; items not in the list appear at the end.
- */
-function orderByIdList(items, idList) {
-    if (!Array.isArray(idList) || idList.length === 0)
-        return items;
-    const byId = new Map();
-    for (const item of items) {
-        if (item.id !== undefined && item.id !== null)
-            byId.set(item.id, item);
-    }
-    const ordered = [];
-    const orderedIds = new Set(idList);
-    for (const id of idList) {
-        const item = byId.get(id);
-        if (item)
-            ordered.push(item);
-    }
-    for (const item of items) {
-        if (item.id === undefined || item.id === null || !orderedIds.has(item.id)) {
-            ordered.push(item);
-        }
-    }
-    return ordered;
-}
-export async function compileAllPages(opts) {
-    const files = await fg(opts.pagesGlob, { dot: false });
-    if (files.length === 0) {
-        throw new CompileError(`No pages found for glob: ${opts.pagesGlob}`);
-    }
-    // First pass: parse and collect lint issues (duplicate IDs, keys/IDs starting with a digit)
-    const idOccurrences = new Map();
-    const filePages = [];
-    for (const file of files) {
-        const code = fs.readFileSync(file, 'utf8');
-        const pageKey = derivePageKey(file, opts.pageKeyFrom);
-        const page = parsePageFromFile({ code, filePath: file, pageKey });
-        for (let compIndex = 0; compIndex < page.components.length; compIndex++) {
-            const component = page.components[compIndex];
-            const compId = component.id;
-            if (!idOccurrences.has(compId)) {
-                idOccurrences.set(compId, []);
-            }
-            idOccurrences.get(compId).push({
-                file,
-                pageKey,
-                componentType: component.type,
-                componentIndex: compIndex,
-                id: compId,
-            });
-            if (component.type === 'OptionSelector' && Array.isArray(component.buttons)) {
-                for (let btnIndex = 0; btnIndex < component.buttons.length; btnIndex++) {
-                    const button = component.buttons[btnIndex];
-                    if (button?.id) {
-                        const buttonId = button.id;
-                        if (!idOccurrences.has(buttonId)) {
-                            idOccurrences.set(buttonId, []);
-                        }
-                        idOccurrences.get(buttonId).push({
-                            file,
-                            pageKey,
-                            componentType: component.type,
-                            componentIndex: compIndex,
-                            buttonIndex: btnIndex,
-                            id: buttonId,
-                        });
-                    }
-                }
-            }
-        }
-        filePages.push({ file, pageKey, page });
-    }
-    // Collect duplicate ID fixes (do not apply yet)
-    const idFixes = new Map();
-    const allIds = new Set();
-    for (const occurrences of idOccurrences.values()) {
-        for (const occ of occurrences) {
-            allIds.add(occ.id);
-        }
-    }
-    for (const [id, occurrences] of idOccurrences.entries()) {
-        if (occurrences.length > 1) {
-            for (let i = 1; i < occurrences.length; i++) {
-                const occ = occurrences[i];
-                const fixKey = occ.buttonIndex !== undefined
-                    ? `${occ.file}:${occ.componentIndex}:${occ.buttonIndex}`
-                    : `${occ.file}:${occ.componentIndex}`;
-                const isOptionButton = occ.buttonIndex !== undefined;
-                const newId = generateRandomIdByType(occ.componentType, isOptionButton, allIds, idFixes.values());
-                allIds.add(newId);
-                idFixes.set(fixKey, newId);
-            }
-        }
-    }
-    // Collect numeric-leading key/id fixes (component key, component id, button key, button id)
-    const numericLeadingFixes = [];
-    for (const { file, pageKey, page } of filePages) {
-        for (let compIndex = 0; compIndex < page.components.length; compIndex++) {
-            const comp = page.components[compIndex];
-            if (keyOrIdStartsWithDigit(comp.key)) {
-                const newKey = normalizeKeyIfStartsWithDigit(comp.key, pageKey);
-                if (newKey)
-                    numericLeadingFixes.push({
-                        file,
-                        componentIndex: compIndex,
-                        kind: 'componentKey',
-                        oldValue: comp.key,
-                        newValue: newKey,
-                    });
-            }
-            if (keyOrIdStartsWithDigit(comp.id)) {
-                const newId = normalizeKeyIfStartsWithDigit(comp.id, 'comp');
-                if (newId)
-                    numericLeadingFixes.push({
-                        file,
-                        componentIndex: compIndex,
-                        kind: 'componentId',
-                        oldValue: comp.id,
-                        newValue: newId,
-                    });
-            }
-            if (comp.type === 'OptionSelector' && Array.isArray(comp.buttons)) {
-                const prefix = comp.key ?? 'option';
-                for (let btnIndex = 0; btnIndex < comp.buttons.length; btnIndex++) {
-                    const btn = comp.buttons[btnIndex];
-                    if (btn && keyOrIdStartsWithDigit(btn.key)) {
-                        const newKey = normalizeKeyIfStartsWithDigit(btn.key, prefix);
-                        if (newKey)
-                            numericLeadingFixes.push({
-                                file,
-                                componentIndex: compIndex,
-                                buttonIndex: btnIndex,
-                                kind: 'buttonKey',
-                                oldValue: btn.key,
-                                newValue: newKey,
-                            });
-                    }
-                    if (btn && keyOrIdStartsWithDigit(btn.id)) {
-                        const safeKey = normalizeKeyIfStartsWithDigit(btn.key, prefix);
-                        const newId = btn.key != null && btn.id === `option_${btn.key}`
-                            ? safeKey != null
-                                ? `option_${safeKey}`
-                                : normalizeKeyIfStartsWithDigit(btn.id, 'option')
-                            : normalizeKeyIfStartsWithDigit(btn.id, 'option');
-                        if (newId)
-                            numericLeadingFixes.push({
-                                file,
-                                componentIndex: compIndex,
-                                buttonIndex: btnIndex,
-                                kind: 'buttonId',
-                                oldValue: btn.id,
-                                newValue: newId,
-                            });
-                    }
-                }
-            }
-        }
-    }
-    const totalLintIssues = idFixes.size + numericLeadingFixes.length;
-    let shouldApplyFixes = false;
-    if (totalLintIssues > 0) {
-        // Report all issues
-        if (idFixes.size > 0) {
-            stdout.warn(`Found ${idFixes.size} duplicate ID(s). Keys and IDs must be unique across the embeddable.`);
-            for (const [fixKey, newId] of idFixes) {
-                const parts = fixKey.split(':');
-                const file = parts[0];
-                const compIdx = parts[1];
-                const btnIdx = parts[2];
-                const loc = btnIdx !== undefined ? `component ${compIdx}, button ${btnIdx}` : `component ${compIdx}`;
-                stdout.warn(`  → ${file}: ${loc} → "${newId}"`);
-            }
-        }
-        if (numericLeadingFixes.length > 0) {
-            stdout.warn(`Found ${numericLeadingFixes.length} key(s)/ID(s) that start with a number. Use a prefix (e.g. range_1_to_2_weeks).`);
-            for (const f of numericLeadingFixes) {
-                const loc = f.buttonIndex !== undefined
-                    ? `component ${f.componentIndex}, button ${f.buttonIndex} (${f.kind})`
-                    : `component ${f.componentIndex} (${f.kind})`;
-                stdout.warn(`  → ${f.file}: "${f.oldValue}" → "${f.newValue}" (${loc})`);
-            }
-        }
-        if (opts.fixLint === true) {
-            shouldApplyFixes = true;
-        }
-        else if (opts.fixLint === 'prompt') {
-            const { default: prompts } = await import('prompts');
-            const res = await prompts({
-                type: 'confirm',
-                name: 'apply',
-                message: `Apply ${totalLintIssues} fix(es) to source files?`,
-                initial: true,
-            });
-            shouldApplyFixes = res.apply === true;
-        }
-        if (!shouldApplyFixes) {
-            throw new CompileError(`Build failed: ${totalLintIssues} lint issue(s) (duplicate IDs and/or keys/IDs starting with a number). Run with --fix or answer 'y' when prompted to fix.`, { file: files[0] });
-        }
-        // Apply fixes
-        for (const { file } of filePages) {
-            const idFixesForFile = Array.from(idFixes.entries()).filter(([key]) => key.startsWith(file + ':'));
-            const numericForFile = numericLeadingFixes.filter((f) => f.file === file);
-            if (idFixesForFile.length > 0 || numericForFile.length > 0) {
-                let code = fs.readFileSync(file, 'utf8');
-                if (idFixesForFile.length > 0) {
-                    code = fixIdsInSourceFile(code, file, idFixesForFile);
-                }
-                if (numericForFile.length > 0) {
-                    code = fixNumericLeadingInSourceFile(code, file, numericForFile);
-                }
-                fs.writeFileSync(file, code, 'utf8');
-                stdout.print(`  ✓ Updated ${file}`);
-            }
-        }
-        // Re-parse after fixes
-        filePages.length = 0;
-        for (const file of files) {
-            const code = fs.readFileSync(file, 'utf8');
-            const pageKey = derivePageKey(file, opts.pageKeyFrom);
-            const page = parsePageFromFile({ code, filePath: file, pageKey });
-            filePages.push({ file, pageKey, page });
-        }
-    }
-    const pages = [];
-    const seenIds = new Map();
-    const pageMap = new Map();
-    for (const filePage of filePages) {
-        const { page, pageKey, file } = filePage;
-        for (const c of page.components) {
-            checkUniqueId(seenIds, c.id, { file, pageKey });
-            if (c.type === 'OptionSelector' && Array.isArray(c.buttons)) {
-                for (const b of c.buttons) {
-                    if (b?.id)
-                        checkUniqueId(seenIds, b.id, { file, pageKey });
-                }
-            }
-        }
-        pages.push(page);
-        pageMap.set(pageKey, page);
-    }
-    // Read config.json if it exists
-    let config = null;
-    if (opts.configPath && fs.existsSync(opts.configPath)) {
-        try {
-            const configContent = fs.readFileSync(opts.configPath, 'utf8');
-            config = JSON.parse(configContent);
-        }
-        catch (error) {
-            stdout.warn(`Failed to parse config.json: ${error}`);
-        }
-    }
-    else if (opts.embeddableId) {
-        // Try to infer config path from embeddableId
-        const inferredConfigPath = path.join('embeddables', opts.embeddableId, 'config.json');
-        if (fs.existsSync(inferredConfigPath)) {
-            try {
-                const configContent = fs.readFileSync(inferredConfigPath, 'utf8');
-                config = JSON.parse(configContent);
-            }
-            catch (error) {
-                stdout.warn(`Failed to parse config.json: ${error}`);
-            }
-        }
-    }
-    // Apply page ordering and metadata from config
-    let orderedPages = pages;
-    if (config && config.pages && Array.isArray(config.pages)) {
-        // Create a map for quick lookup
-        const orderedPageMap = new Map();
-        for (const pageMetadata of config.pages) {
-            orderedPageMap.set(pageMetadata.key, pageMetadata);
-        }
-        // Sort pages according to config order
-        const orderedPageKeys = config.pages.map((p) => p.key);
-        const unorderedPages = [];
-        orderedPages = orderedPageKeys
-            .map((key) => {
-            const page = pageMap.get(key);
-            if (page) {
-                // Apply metadata from config (preserving nested object order)
-                const pageMetadata = orderedPageMap.get(key);
-                if (pageMetadata) {
-                    // Merge metadata (excluding key, components, and components_order which is used only for ordering)
-                    const pageMetadataKeys = Object.keys(pageMetadata);
-                    for (const metaKey of pageMetadataKeys) {
-                        if (metaKey !== 'key' &&
-                            metaKey !== 'components' &&
-                            metaKey !== 'components_order') {
-                            ;
-                            page[metaKey] = deepClonePreservingOrder(pageMetadata[metaKey]);
-                        }
-                    }
-                    // If components_order is present (from pull --preserve), order page.components to match
-                    const orderIds = pageMetadata.components_order;
-                    if (Array.isArray(orderIds) &&
-                        orderIds.length > 0 &&
-                        page.components &&
-                        page.components.length > 0) {
-                        page.components = orderByIdList(page.components, orderIds);
-                    }
-                }
-                return page;
-            }
-            return null;
-        })
-            .filter((p) => p !== null);
-        // Add any pages not in the config order
-        for (const page of pages) {
-            if (!orderedPageKeys.includes(page.key)) {
-                unorderedPages.push(page);
-            }
-        }
-        orderedPages = [...orderedPages, ...unorderedPages];
-    }
-    // Compile styles from CSS files
-    const styles = await compileStyles(opts.stylesDir || 'styles');
-    // Build embeddable object preserving the order from config
-    const embeddable = {};
-    // Read computedFields from JS files
-    let computedFields = [];
-    if (opts.embeddableId) {
-        computedFields = await loadComputedFields(opts.embeddableId);
-    }
-    // Read dataOutputs from JS files
-    let dataOutputs = [];
-    if (opts.embeddableId) {
-        dataOutputs = await loadDataOutputs(opts.embeddableId, config);
-    }
-    // Read global components from TSX files
-    let globalComponents = [];
-    if (opts.embeddableId) {
-        globalComponents = await loadGlobalComponents(opts.embeddableId, config);
-    }
-    // Preserve the order of top-level properties from config
-    if (config) {
-        const configKeys = Object.keys(config);
-        // Iterate through config keys in order to preserve property order
-        for (const key of configKeys) {
-            if (key === 'pages') {
-                // Replace pages with orderedPages (which include components)
-                embeddable.pages = orderedPages;
-            }
-            else if (key === 'styles') {
-                // Skip styles from config - they will be added from compiled CSS files later
-                continue;
-            }
-            else if (key === '_version') {
-                // Skip _version - this is CLI metadata (tracked version number), not part of the embeddable
-                continue;
-            }
-            else if (key === '_branch_id' || key === '_branch_name') {
-                // Skip _branch_id / _branch_name - CLI metadata (current branch), not part of the embeddable
-                continue;
-            }
-            else if (key === 'components_order') {
-                // Skip components_order - used only to order global components when building, not part of output
-                continue;
-            }
-            else if (key === 'computedFields') {
-                // Replace computedFields with loaded computedFields (which include code)
-                if (computedFields.length > 0) {
-                    embeddable.computedFields = computedFields;
-                }
-            }
-            else if (key === 'dataOutputs') {
-                // Replace dataOutputs with loaded dataOutputs (which include code)
-                if (dataOutputs.length > 0) {
-                    embeddable.dataOutputs = dataOutputs;
-                }
-            }
-            else if (key === 'components') {
-                // Replace components with loaded global components (optionally ordered by config.components_order)
-                if (globalComponents.length > 0) {
-                    const orderIds = config.components_order;
-                    embeddable.components =
-                        Array.isArray(orderIds) && orderIds.length > 0
-                            ? orderByIdList(globalComponents, orderIds)
-                            : globalComponents;
-                }
-            }
-            else {
-                // Regular metadata property - preserve as-is, with order preserved recursively
-                const value = config[key];
-                if (value !== undefined && value !== null) {
-                    embeddable[key] = deepClonePreservingOrder(value);
-                }
-            }
-        }
-    }
-    // If no config or pages not in config, add pages at the beginning
-    if (!embeddable.pages) {
-        embeddable.pages = orderedPages;
-    }
-    // If styles exist, insert them after pages (since styles are not in config.json)
-    // This preserves the logical grouping while maintaining order for other properties
-    if (Object.keys(styles).length > 0) {
-        const embeddableKeys = Object.keys(embeddable);
-        const pagesIndex = embeddableKeys.indexOf('pages');
-        if (pagesIndex !== -1) {
-            // Insert styles after pages by rebuilding the object
-            const newEmbeddable = {};
-            let stylesInserted = false;
-            for (const key of embeddableKeys) {
-                newEmbeddable[key] = embeddable[key];
-                if (key === 'pages' && !stylesInserted) {
-                    newEmbeddable.styles = styles;
-                    stylesInserted = true;
-                }
-            }
-            // If pages was the last key, add styles after it
-            if (!stylesInserted && pagesIndex === embeddableKeys.length - 1) {
-                newEmbeddable.styles = styles;
-            }
-            // Rebuild embeddable in the correct order by clearing and rebuilding
-            Object.keys(embeddable).forEach((key) => delete embeddable[key]);
-            Object.assign(embeddable, newEmbeddable);
-        }
-        else {
-            // Pages doesn't exist in embeddable, add styles at the end
-            embeddable.styles = styles;
-        }
-    }
-    // If computedFields or dataOutputs don't exist in config but we have them, add them at the end
-    if (computedFields.length > 0 && !embeddable.computedFields) {
-        embeddable.computedFields = computedFields;
-    }
-    if (dataOutputs.length > 0 && !embeddable.dataOutputs) {
-        embeddable.dataOutputs = dataOutputs;
-    }
-    if (globalComponents.length > 0 && !embeddable.components) {
-        const orderIds = config?.components_order;
-        embeddable.components =
-            Array.isArray(orderIds) && orderIds.length > 0
-                ? orderByIdList(globalComponents, orderIds)
-                : globalComponents;
-    }
-    let toWrite = embeddable;
-    if (fs.existsSync(opts.outPath)) {
-        try {
-            const existing = fs.readFileSync(opts.outPath, 'utf8');
-            const oldEmbeddable = JSON.parse(existing);
-            toWrite = reorderObjectKeysToMatch(oldEmbeddable, embeddable);
-        }
-        catch {
-            // If read/parse fails, keep embeddable as-is
-        }
-    }
-    writeAtomic(opts.outPath, JSON.stringify(toWrite, null, 2));
-    stdout.print(`Wrote ${opts.outPath} (${orderedPages.length} pages, ${Object.keys(styles).length > 0 ? 'with styles' : 'no styles'})`);
-}
-function derivePageKey(file, mode) {
-    if (mode === 'filename') {
-        const base = path.basename(file);
-        // email.page.tsx -> email
-        return base.replace(/\.page\.tsx$/, '').replace(/\.tsx$/, '');
-    }
-    // v1: export-based not implemented here
-    return path
-        .basename(file)
-        .replace(/\.page\.tsx$/, '')
-        .replace(/\.tsx$/, '');
-}
-/**
- * Fixes duplicate IDs in a React source file by updating JSX attributes.
- * @param code Original source code
- * @param filePath File path (for error reporting)
- * @param fixes Array of [fixKey, newId] tuples where fixKey is "file:componentIndex" or "file:componentIndex:buttonIndex"
- */
-function fixIdsInSourceFile(code, filePath, fixes) {
-    // Parse the file
-    let ast;
-    try {
-        ast = parse(code, {
-            sourceType: 'module',
-            plugins: ['typescript', 'jsx'],
-            sourceFilename: filePath,
-        });
-    }
-    catch (error) {
-        throw new CompileError(`Failed to parse file for ID fixing: ${error.message}`, {
-            file: filePath,
-        });
-    }
-    // Build a map of component index -> new ID, and component index + button index -> new ID
-    const componentIdMap = new Map();
-    const buttonIdMap = new Map(); // "componentIndex:buttonIndex" -> newId
-    for (const [fixKey, newId] of fixes) {
-        // fixKey format is "file:componentIndex" or "file:componentIndex:buttonIndex"
-        // Since we filtered by file prefix, remove the file prefix to get just the indices
-        const filePrefix = filePath + ':';
-        if (!fixKey.startsWith(filePrefix)) {
-            // This shouldn't happen since we filtered, but skip just in case
-            continue;
-        }
-        const indicesStr = fixKey.substring(filePrefix.length);
-        const parts = indicesStr.split(':');
-        if (parts.length === 1) {
-            // Component ID fix: "componentIndex"
-            const componentIndex = parseInt(parts[0], 10);
-            componentIdMap.set(componentIndex, newId);
-        }
-        else if (parts.length === 2) {
-            // Button ID fix: "componentIndex:buttonIndex"
-            const componentIndex = parseInt(parts[0], 10);
-            const buttonIndex = parseInt(parts[1], 10);
-            buttonIdMap.set(`${componentIndex}:${buttonIndex}`, newId);
-        }
-    }
-    let componentIndex = -1;
-    // Traverse AST to find and update IDs
-    traverse(ast, {
-        JSXElement(path) {
-            const opening = path.node.openingElement;
-            const tagName = opening.name.type === 'JSXIdentifier' ? opening.name.name : null;
-            // Only process allowed primitives (components), not regular HTML elements
-            if (!tagName || !ALLOWED_PRIMITIVES.has(tagName))
-                return;
-            // Check if this component has an id attribute
-            const hasIdAttr = opening.attributes.some((attr) => attr.type === 'JSXAttribute' &&
-                attr.name.type === 'JSXIdentifier' &&
-                attr.name.name === 'id');
-            if (hasIdAttr) {
-                componentIndex++;
-                // Check if we need to fix this component's ID
-                if (componentIdMap.has(componentIndex)) {
-                    const newId = componentIdMap.get(componentIndex);
-                    // Find and update the id attribute
-                    for (const attr of opening.attributes) {
-                        if (attr.type === 'JSXAttribute' &&
-                            attr.name.type === 'JSXIdentifier' &&
-                            attr.name.name === 'id') {
-                            if (attr.value?.type === 'StringLiteral') {
-                                attr.value.value = newId;
-                            }
-                            else if (attr.value?.type === 'JSXExpressionContainer') {
-                                // Replace expression with string literal
-                                attr.value = t.stringLiteral(newId);
-                            }
-                            break;
-                        }
-                    }
-                }
-                // Check if this is an OptionSelector and we need to fix button IDs
-                if (tagName === 'OptionSelector') {
-                    // Find the buttons prop
-                    for (const attr of opening.attributes) {
-                        if (attr.type === 'JSXAttribute' &&
-                            attr.name.type === 'JSXIdentifier' &&
-                            attr.name.name === 'buttons' &&
-                            attr.value?.type === 'JSXExpressionContainer') {
-                            // The buttons prop is an array expression
-                            const expr = attr.value.expression;
-                            if (expr.type === 'ArrayExpression') {
-                                let buttonIndex = 0;
-                                for (const element of expr.elements) {
-                                    if (element &&
-                                        element.type === 'ObjectExpression' &&
-                                        buttonIdMap.has(`${componentIndex}:${buttonIndex}`)) {
-                                        const newButtonId = buttonIdMap.get(`${componentIndex}:${buttonIndex}`);
-                                        // Find the id property in this button object
-                                        for (const prop of element.properties) {
-                                            if (prop.type === 'ObjectProperty' &&
-                                                prop.key.type === 'Identifier' &&
-                                                prop.key.name === 'id') {
-                                                if (prop.value.type === 'StringLiteral') {
-                                                    prop.value.value = newButtonId;
-                                                }
-                                                else {
-                                                    prop.value = t.stringLiteral(newButtonId);
-                                                }
-                                                break;
-                                            }
-                                        }
-                                    }
-                                    buttonIndex++;
-                                }
-                            }
-                            break;
-                        }
-                    }
-                }
-            }
-        },
-    });
-    // Generate updated code
-    const result = generate(ast, {}, code);
-    return result.code;
-}
-function fixNumericLeadingInSourceFile(code, filePath, fixes) {
-    let ast;
-    try {
-        ast = parse(code, {
-            sourceType: 'module',
-            plugins: ['typescript', 'jsx'],
-            sourceFilename: filePath,
-        });
-    }
-    catch (error) {
-        throw new CompileError(`Failed to parse file for key/id fixing: ${error.message}`, {
-            file: filePath,
-        });
-    }
-    const componentKeyMap = new Map();
-    const componentIdMap = new Map();
-    const buttonKeyMap = new Map();
-    const buttonIdMap = new Map();
-    for (const f of fixes) {
-        if (f.buttonIndex !== undefined) {
-            const k = `${f.componentIndex}:${f.buttonIndex}`;
-            if (f.kind === 'buttonKey')
-                buttonKeyMap.set(k, f.newValue);
-            else if (f.kind === 'buttonId')
-                buttonIdMap.set(k, f.newValue);
-        }
-        else {
-            if (f.kind === 'componentKey')
-                componentKeyMap.set(f.componentIndex, f.newValue);
-            else if (f.kind === 'componentId')
-                componentIdMap.set(f.componentIndex, f.newValue);
-        }
-    }
-    // Map from buttons variable name (e.g. "genderButtons") -> OptionSelector key (e.g. "gender") for fixing const arrays
-    const buttonsConstNameToPrefix = new Map();
-    // Collect (start, end, newText) replacements so we can patch the source without reformatting (preserves line breaks, etc.)
-    const replacements = [];
-    const pushReplacement = (node, newValue) => {
-        if (node.start == null || node.end == null)
-            return;
-        replacements.push({ start: node.start, end: node.end, newText: JSON.stringify(newValue) });
-    };
-    let componentIndex = -1;
-    traverse(ast, {
-        JSXElement(path) {
-            const opening = path.node.openingElement;
-            const tagName = opening.name.type === 'JSXIdentifier' ? opening.name.name : null;
-            if (!tagName || !ALLOWED_PRIMITIVES.has(tagName))
-                return;
-            const hasIdAttr = opening.attributes.some((a) => a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier' && a.name.name === 'id');
-            const hasKeyAttr = opening.attributes.some((a) => a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier' && a.name.name === 'key');
-            if (hasIdAttr || hasKeyAttr) {
-                componentIndex++;
-            }
-            const recordAttrReplacement = (name, newValue) => {
-                for (const attr of opening.attributes) {
-                    if (attr.type === 'JSXAttribute' &&
-                        attr.name.type === 'JSXIdentifier' &&
-                        attr.name.name === name) {
-                        const valueNode = attr.value?.type === 'JSXExpressionContainer'
-                            ? attr.value.expression
-                            : attr.value;
-                        if (valueNode?.type === 'StringLiteral') {
-                            pushReplacement(valueNode, newValue);
-                        }
-                        break;
-                    }
-                }
-            };
-            if (componentKeyMap.has(componentIndex)) {
-                recordAttrReplacement('key', componentKeyMap.get(componentIndex));
-            }
-            if (componentIdMap.has(componentIndex)) {
-                recordAttrReplacement('id', componentIdMap.get(componentIndex));
-            }
-            if (tagName === 'OptionSelector') {
-                let componentKey;
-                for (const attr of opening.attributes) {
-                    if (attr.type === 'JSXAttribute' &&
-                        attr.name.type === 'JSXIdentifier' &&
-                        attr.name.name === 'key' &&
-                        attr.value?.type === 'StringLiteral') {
-                        componentKey = attr.value.value;
-                        break;
-                    }
-                }
-                const prefix = componentKey ?? 'option';
-                for (const attr of opening.attributes) {
-                    if (attr.type === 'JSXAttribute' &&
-                        attr.name.type === 'JSXIdentifier' &&
-                        attr.name.name === 'buttons' &&
-                        attr.value?.type === 'JSXExpressionContainer') {
-                        const expr = attr.value.expression;
-                        if (expr.type === 'ArrayExpression') {
-                            let buttonIndex = 0;
-                            for (const element of expr.elements) {
-                                if (element && element.type === 'ObjectExpression') {
-                                    const key = `${componentIndex}:${buttonIndex}`;
-                                    for (const prop of element.properties) {
-                                        if (prop.type === 'ObjectProperty' && prop.key.type === 'Identifier') {
-                                            if (prop.key.name === 'key' && buttonKeyMap.has(key)) {
-                                                pushReplacement(prop.value, buttonKeyMap.get(key));
-                                            }
-                                            else if (prop.key.name === 'id' && buttonIdMap.has(key)) {
-                                                pushReplacement(prop.value, buttonIdMap.get(key));
-                                            }
-                                        }
-                                    }
-                                }
-                                buttonIndex++;
-                            }
-                        }
-                        else if (expr.type === 'Identifier') {
-                            if (!buttonsConstNameToPrefix.has(expr.name)) {
-                                buttonsConstNameToPrefix.set(expr.name, prefix);
-                            }
-                        }
-                        break;
-                    }
-                }
-            }
-        },
-    });
-    // Fix button key/id in const arrays (e.g. const genderButtons = [{ id: "1_...", key: "..." }])
-    traverse(ast, {
-        VariableDeclarator(path) {
-            const id = path.node.id;
-            const init = path.node.init;
-            if (id.type !== 'Identifier' || init?.type !== 'ArrayExpression')
-                return;
-            const constName = id.name;
-            const prefix = buttonsConstNameToPrefix.get(constName) ?? 'option';
-            for (const element of init.elements) {
-                if (!element || element.type !== 'ObjectExpression')
-                    continue;
-                for (const prop of element.properties) {
-                    if (prop.type !== 'ObjectProperty' || prop.key.type !== 'Identifier')
-                        continue;
-                    if (prop.key.name !== 'key' && prop.key.name !== 'id')
-                        continue;
-                    const val = prop.value;
-                    let current = null;
-                    if (val.type === 'StringLiteral') {
-                        current = val.value;
-                    }
-                    else if (val.type === 'TemplateLiteral' && val.quasis.length === 1 && !val.quasis[0].value.raw.includes('$')) {
-                        current = val.quasis[0].value.raw;
-                    }
-                    if (current === null || !keyOrIdStartsWithDigit(current))
-                        continue;
-                    const newValue = normalizeKeyIfStartsWithDigit(current, prefix);
-                    if (newValue === null)
-                        continue;
-                    pushReplacement(val, newValue);
-                }
-            }
-        },
-    });
-    // Apply replacements from end to start so indices stay valid; preserves all other formatting
-    replacements.sort((a, b) => b.start - a.start);
-    let result = code;
-    for (const { start, end, newText } of replacements) {
-        result = result.slice(0, start) + newText + result.slice(end);
-    }
-    return result;
-}
-function checkUniqueId(seen, id, loc) {
-    const prev = seen.get(id);
-    if (prev) {
-        throw new CompileError(`Duplicate id "${id}"\n- first: ${prev.file} (page: ${prev.pageKey})\n- second: ${loc.file} (page: ${loc.pageKey})\nIDs must be globally unique across all pages.`, { file: loc.file });
-    }
-    seen.set(id, loc);
-}
-async function compileStyles(stylesDir) {
-    const stylesPath = path.resolve(stylesDir);
-    // Check if styles directory exists
-    if (!fs.existsSync(stylesPath)) {
-        return {};
-    }
-    // Find all CSS files in the styles directory
-    const cssFiles = await fg('**/*.css', {
-        cwd: stylesPath,
-        dot: false,
-    });
-    if (cssFiles.length === 0) {
-        return {};
-    }
-    // Combine all CSS files into a single JSON object
-    const combinedStyles = {};
-    for (const cssFile of cssFiles) {
-        const fullPath = path.join(stylesPath, cssFile);
-        const cssContent = fs.readFileSync(fullPath, 'utf8');
-        // Skip empty files
-        if (!cssContent.trim()) {
-            continue;
-        }
-        // Convert CSS to JSON
-        const cssJson = CSSJSON.toJSON(cssContent);
-        // Flatten the structure: extract selectors and their attributes
-        // cssjson returns { children: { selector: { children: {}, attributes: {...} } } }
-        if (cssJson && cssJson.children) {
-            for (const [selector, rule] of Object.entries(cssJson.children)) {
-                if (rule && typeof rule === 'object' && 'attributes' in rule) {
-                    // Extract just the attributes (styles) for each selector
-                    combinedStyles[selector] = rule.attributes || {};
-                }
-            }
-        }
-    }
-    return combinedStyles;
-}
-function writeAtomic(outPath, content) {
-    fs.mkdirSync(path.dirname(outPath), { recursive: true });
-    const tmp = `${outPath}.tmp`;
-    fs.writeFileSync(tmp, content, 'utf8');
-    fs.renameSync(tmp, outPath);
-}
-/**
- * Loads computedFields from JS files in computed-fields/ folder.
- * Each JS file corresponds to one computedField.
- */
-async function loadComputedFields(embeddableId) {
-    const computedFieldsDir = path.join('embeddables', embeddableId, 'computed-fields');
-    if (!fs.existsSync(computedFieldsDir)) {
-        return [];
-    }
-    // Find all JS files in computed-fields directory
-    const jsFiles = await fg('**/*.js', {
-        cwd: computedFieldsDir,
-        dot: false,
-    });
-    if (jsFiles.length === 0) {
-        return [];
-    }
-    const computedFields = [];
-    // Read config.json to get computedField metadata (if available)
-    const configPath = path.join('embeddables', embeddableId, 'config.json');
-    let config = null;
-    if (fs.existsSync(configPath)) {
-        try {
-            const configContent = fs.readFileSync(configPath, 'utf8');
-            config = JSON.parse(configContent);
-        }
-        catch (error) {
-            // Ignore config parsing errors
-        }
-    }
-    // Build a map of computed fields by key/id for quick lookup
-    const computedFieldsMap = new Map();
-    for (const jsFile of jsFiles) {
-        const filePath = path.join(computedFieldsDir, jsFile);
-        const code = fs.readFileSync(filePath, 'utf8');
-        // Extract key from filename (remove .js extension)
-        const key = path.basename(jsFile, '.js');
-        // Build computedField object
-        const computedField = {
-            id: key, // Use key as id if not specified in config
-            key,
-            formula: 'custom',
-            code,
-        };
-        // If config has computedFields metadata, try to find matching field
-        if (config && config.computedFields) {
-            const configField = config.computedFields.find((cf) => cf.key === key || cf.id === key);
-            if (configField) {
-                // Merge metadata from config (but keep code from file)
-                // Preserve order by cloning the config field first
-                const clonedConfigField = deepClonePreservingOrder(configField);
-                Object.assign(computedField, clonedConfigField);
-                computedField.code = code; // Ensure code comes from file
-            }
-        }
-        // Store in map using both key and id as lookup keys
-        computedFieldsMap.set(key, computedField);
-        if (computedField.id && computedField.id !== key) {
-            computedFieldsMap.set(computedField.id, computedField);
-        }
-    }
-    // If config has computedFields, preserve order from config
-    if (config && config.computedFields && Array.isArray(config.computedFields)) {
-        const orderedFields = [];
-        const processedKeys = new Set();
-        // First, add fields in config order
-        for (const configField of config.computedFields) {
-            const lookupKey = configField.key || configField.id;
-            if (lookupKey) {
-                const field = computedFieldsMap.get(lookupKey);
-                if (field) {
-                    orderedFields.push(field);
-                    processedKeys.add(lookupKey);
-                    if (field.id && field.id !== lookupKey) {
-                        processedKeys.add(field.id);
-                    }
-                }
-            }
-        }
-        // Then, add any fields not in config (in filesystem order)
-        for (const jsFile of jsFiles) {
-            const key = path.basename(jsFile, '.js');
-            if (!processedKeys.has(key)) {
-                const field = computedFieldsMap.get(key);
-                if (field) {
-                    orderedFields.push(field);
-                    processedKeys.add(key);
-                }
-            }
-        }
-        return orderedFields;
-    }
-    // No config or no computedFields in config, return in filesystem order
-    // Use a Set to deduplicate since we may have multiple keys pointing to the same field
-    const seenFields = new Set();
-    const orderedFields = [];
-    for (const jsFile of jsFiles) {
-        const key = path.basename(jsFile, '.js');
-        const field = computedFieldsMap.get(key);
-        if (field && !seenFields.has(field)) {
-            orderedFields.push(field);
-            seenFields.add(field);
-        }
-    }
-    return orderedFields;
-}
-/**
- * Loads dataOutputs (actions) from JS files in actions/ folder.
- * Each JS file corresponds to one action.
- */
-async function loadDataOutputs(embeddableId, config = null) {
-    const actionsDir = path.join('embeddables', embeddableId, 'actions');
-    const hasActionsDir = fs.existsSync(actionsDir);
-    // Find all JS files in actions directory
-    let jsFiles = [];
-    if (hasActionsDir) {
-        jsFiles = await fg('**/*.js', {
-            cwd: actionsDir,
-            dot: false,
-        });
-    }
-    // Use provided config or read it if not provided
-    if (!config) {
-        const configPath = path.join('embeddables', embeddableId, 'config.json');
-        if (fs.existsSync(configPath)) {
-            try {
-                const configContent = fs.readFileSync(configPath, 'utf8');
-                config = JSON.parse(configContent);
-            }
-            catch (error) {
-                // Ignore config parsing errors
-            }
-        }
-    }
-    const hasConfigDataOutputs = config && config.dataOutputs && Array.isArray(config.dataOutputs) && config.dataOutputs.length > 0;
-    if (jsFiles.length === 0 && !hasConfigDataOutputs) {
-        return [];
-    }
-    // Build a map of actions by various identifiers for quick lookup
-    const dataOutputsMap = new Map();
-    for (const jsFile of jsFiles) {
-        const filePath = path.join(actionsDir, jsFile);
-        const code = fs.readFileSync(filePath, 'utf8');
-        // Extract key/name from filename (remove .js extension)
-        const identifier = path.basename(jsFile, '.js');
-        // Build action object
-        const action = {
-            id: identifier, // Use identifier as id if not specified
-            name: identifier,
-            output: 'custom',
-            code,
-        };
-        // If config has dataOutputs metadata, try to find matching action
-        // Match by comparing sanitized names since filenames are based on sanitized action names
-        if (config && config.dataOutputs) {
-            const configAction = config.dataOutputs.find((act) => {
-                // Compare sanitized versions since filename is based on sanitized name
-                const sanitizedName = act.name ? sanitizeFileName(act.name) : null;
-                return act.name === identifier || act.id === identifier || sanitizedName === identifier;
-            });
-            if (configAction) {
-                // Merge metadata from config (but keep code from file)
-                // Preserve order by cloning the config action first
-                const clonedConfigAction = deepClonePreservingOrder(configAction);
-                Object.assign(action, clonedConfigAction);
-                action.code = code; // Ensure code comes from file
-                // Preserve the original name from config, not the sanitized filename
-                if (configAction.name) {
-                    action.name = configAction.name;
-                }
-            }
-            delete action.key; // name is enough; don't emit key
-        }
-        // Store in map using identifier (filename) as the primary key
-        // Also store by id, key, name, and sanitized name for lookup
-        dataOutputsMap.set(identifier, action);
-        if (action.id && action.id !== identifier) {
-            dataOutputsMap.set(action.id, action);
-        }
-        if (action.name && action.name !== identifier && action.name !== action.id) {
-            const sanitizedName = sanitizeFileName(action.name);
-            if (sanitizedName !== identifier) {
-                dataOutputsMap.set(sanitizedName, action);
-            }
-        }
-    }
-    // If config has dataOutputs, preserve order from config
-    if (config && config.dataOutputs && Array.isArray(config.dataOutputs)) {
-        const orderedOutputs = [];
-        const processedIdentifiers = new Set();
-        // First, add actions in config order
-        for (const configAction of config.dataOutputs) {
-            // Try multiple matching strategies (name is enough; no key)
-            let matchedAction;
-            const possibleKeys = [
-                configAction.id,
-                configAction.name,
-                configAction.name ? sanitizeFileName(configAction.name) : null,
-            ].filter(Boolean);
-            for (const key of possibleKeys) {
-                const action = dataOutputsMap.get(key);
-                if (action && !processedIdentifiers.has(key)) {
-                    matchedAction = action;
-                    // Mark all possible identifiers as processed
-                    processedIdentifiers.add(key);
-                    if (action.id)
-                        processedIdentifiers.add(action.id);
-                    if (action.name) {
-                        processedIdentifiers.add(action.name);
-                        processedIdentifiers.add(sanitizeFileName(action.name));
-                    }
-                    break;
-                }
-            }
-            if (matchedAction) {
-                orderedOutputs.push(matchedAction);
-            }
-            else {
-                // No .js file for this action (e.g. metadata-only / code-less action like diahook).
-                // Preserve it from config so round-trip does not drop it.
-                orderedOutputs.push(deepClonePreservingOrder(configAction));
-            }
-        }
-        // Then, add any actions not in config (in filesystem order)
-        for (const jsFile of jsFiles) {
-            const identifier = path.basename(jsFile, '.js');
-            if (!processedIdentifiers.has(identifier)) {
-                const action = dataOutputsMap.get(identifier);
-                if (action) {
-                    orderedOutputs.push(action);
-                    processedIdentifiers.add(identifier);
-                    if (action.id)
-                        processedIdentifiers.add(action.id);
-                    if (action.name) {
-                        processedIdentifiers.add(action.name);
-                        processedIdentifiers.add(sanitizeFileName(action.name));
-                    }
-                }
-            }
-        }
-        return orderedOutputs;
-    }
-    // No config or no dataOutputs in config, return in filesystem order
-    // Use a Set to deduplicate since we may have multiple keys pointing to the same action
-    const seenActions = new Set();
-    const orderedOutputs = [];
-    for (const jsFile of jsFiles) {
-        const identifier = path.basename(jsFile, '.js');
-        const action = dataOutputsMap.get(identifier);
-        if (action && !seenActions.has(action)) {
-            orderedOutputs.push(action);
-            seenActions.add(action);
-        }
-    }
-    return orderedOutputs;
-}
-/**
- * Loads global components from TSX files in global-components/ folder.
- * Each TSX file corresponds to components at a specific location.
- * File naming: <location>.location.tsx (e.g., before_page.location.tsx)
- * The _location is derived from the filename - no need for _location props in TSX or config.
- */
-async function loadGlobalComponents(embeddableId, _config = null // config.components is no longer used - location comes from filename
-) {
-    const globalComponentsDir = path.join('embeddables', embeddableId, 'global-components');
-    if (!fs.existsSync(globalComponentsDir)) {
-        return [];
-    }
-    // Find all TSX files in global-components directory
-    const tsxFiles = await fg('**/*.location.tsx', {
-        cwd: globalComponentsDir,
-        dot: false,
-    });
-    if (tsxFiles.length === 0) {
-        return [];
-    }
-    const allComponents = [];
-    const seenIds = new Map();
-    // Build a component map for parent resolution
-    const componentMap = new Map();
-    // Map component ID to file location (derived from filename)
-    const componentToFileLocation = new Map();
-    for (const tsxFile of tsxFiles) {
-        const filePath = path.join(globalComponentsDir, tsxFile);
-        const code = fs.readFileSync(filePath, 'utf8');
-        // Extract location from filename (e.g., "before_page.location.tsx" -> "before_page")
-        const locationMatch = tsxFile.match(/^(.+)\.location\.tsx$/);
-        if (!locationMatch) {
-            stdout.warn(`Global component file "${tsxFile}" doesn't match expected pattern <location>.location.tsx`);
-            continue;
-        }
-        const fileLocation = locationMatch[1];
-        // Parse components from the file
-        const { parseGlobalComponentsFromFile } = await import('./parsePage.js');
-        const fileComponents = parseGlobalComponentsFromFile({
-            code,
-            filePath,
-        });
-        // Add components to map and validate
-        for (const component of fileComponents) {
-            // Store file location for this component (derived from filename)
-            componentToFileLocation.set(component.id, fileLocation);
-            // Global ID uniqueness check (using file location as pageKey for global components)
-            checkUniqueId(seenIds, component.id, {
-                file: filePath,
-                pageKey: `global-${fileLocation}`,
-            });
-            // Validate OptionSelector buttons
-            if (component.type === 'OptionSelector' && Array.isArray(component.buttons)) {
-                for (const b of component.buttons) {
-                    if (b?.id)
-                        checkUniqueId(seenIds, b.id, {
-                            file: filePath,
-                            pageKey: `global-${fileLocation}`,
-                        });
-                }
-            }
-            componentMap.set(component.id, component);
-        }
-    }
-    // Set _location for root components (no parent_id) based on filename
-    for (const [componentId, component] of componentMap) {
-        // Remove any _location prop that might have been in the TSX (we derive it from filename)
-        delete component._location;
-        // Root components (no parent_id) get _location from their filename
-        if (!component.parent_id) {
-            const fileLocation = componentToFileLocation.get(componentId);
-            if (!fileLocation) {
-                throw new CompileError(`Global component "${component.id}" (key: "${component.key}") has no parent_id but couldn't determine location from file.`);
-            }
-            component._location = fileLocation;
-        }
-        // Child components inherit location from parent - they don't need _location
-        allComponents.push(component);
-    }
-    return allComponents;
-}