@embeddables/cli 0.8.0 → 0.8.1

package/dist/compiler/index.js

@@ -0,0 +1,1272 @@
+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 { ALLOWED_PRIMITIVES } from './registry.js';
+const traverse = (traverseImport.default ?? traverseImport);
+/**
+ * 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 { prompt: promptWithCancel } = await import('../helpers/prompt.js');
+            const res = await promptWithCancel({
+                type: 'confirm',
+                name: 'apply',
+                message: `Apply ${totalLintIssues} fix(es) to source files?`,
+                initial: true,
+            });
+            shouldApplyFixes = res.apply === true;
+        }
+        if (!shouldApplyFixes) {
+            stdout.warn(`${totalLintIssues} lint issue(s) found — run with --fix to auto-fix`);
+            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) {
+                const originalCode = fs.readFileSync(file, 'utf8');
+                let code = originalCode;
+                if (idFixesForFile.length > 0) {
+                    code = fixIdsInSourceFile(code, file, idFixesForFile);
+                }
+                if (numericForFile.length > 0) {
+                    code = fixNumericLeadingInSourceFile(code, file, numericForFile);
+                }
+                if (code !== originalCode) {
+                    fs.writeFileSync(file, code, 'utf8');
+                    stdout.success(`Updated ${file}`);
+                }
+                else {
+                    stdout.warn(`  Could not auto-fix duplicate IDs in ${file}. Please fix them manually.`);
+                }
+            }
+        }
+        // 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 applying targeted text replacements.
+ * Preserves original formatting (no Babel code generation) so unchanged files are not rewritten.
+ * Handles both inline button arrays and const-referenced button arrays.
+ * @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) {
+        const filePrefix = filePath + ':';
+        if (!fixKey.startsWith(filePrefix)) {
+            continue;
+        }
+        const indicesStr = fixKey.substring(filePrefix.length);
+        const parts = indicesStr.split(':');
+        if (parts.length === 1) {
+            const componentIndex = parseInt(parts[0], 10);
+            componentIdMap.set(componentIndex, newId);
+        }
+        else if (parts.length === 2) {
+            const componentIndex = parseInt(parts[0], 10);
+            const buttonIndex = parseInt(parts[1], 10);
+            buttonIdMap.set(`${componentIndex}:${buttonIndex}`, newId);
+        }
+    }
+    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) });
+    };
+    // Track const variable names referenced by OptionSelector buttons props
+    const constNameToComponentIndex = new Map();
+    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((attr) => attr.type === 'JSXAttribute' &&
+                attr.name.type === 'JSXIdentifier' &&
+                attr.name.name === 'id');
+            if (hasIdAttr) {
+                componentIndex++;
+                if (componentIdMap.has(componentIndex)) {
+                    const newId = componentIdMap.get(componentIndex);
+                    for (const attr of opening.attributes) {
+                        if (attr.type === 'JSXAttribute' &&
+                            attr.name.type === 'JSXIdentifier' &&
+                            attr.name.name === 'id') {
+                            const valueNode = attr.value?.type === 'JSXExpressionContainer' ? attr.value.expression : attr.value;
+                            if (valueNode?.type === 'StringLiteral') {
+                                pushReplacement(valueNode, newId);
+                            }
+                            break;
+                        }
+                    }
+                }
+                if (tagName === 'OptionSelector') {
+                    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') {
+                                collectButtonIdReplacements(expr, componentIndex, buttonIdMap, pushReplacement);
+                            }
+                            else if (expr.type === 'Identifier') {
+                                constNameToComponentIndex.set(expr.name, componentIndex);
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+        },
+    });
+    // Second pass: fix button IDs in const declarations referenced by OptionSelector buttons props
+    if (constNameToComponentIndex.size > 0) {
+        traverse(ast, {
+            VariableDeclarator(path) {
+                const id = path.node.id;
+                const init = path.node.init;
+                if (id.type !== 'Identifier')
+                    return;
+                const compIndex = constNameToComponentIndex.get(id.name);
+                if (compIndex === undefined)
+                    return;
+                if (init?.type !== 'ArrayExpression')
+                    return;
+                collectButtonIdReplacements(init, compIndex, buttonIdMap, pushReplacement);
+            },
+        });
+    }
+    if (replacements.length === 0)
+        return code;
+    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;
+}
+/**
+ * Collects text replacements for button IDs in an ArrayExpression node.
+ */
+function collectButtonIdReplacements(arrayExpr, componentIndex, buttonIdMap, pushReplacement) {
+    let buttonIndex = 0;
+    for (const element of arrayExpr.elements) {
+        if (element && element.type === 'ObjectExpression') {
+            const key = `${componentIndex}:${buttonIndex}`;
+            if (buttonIdMap.has(key)) {
+                const newButtonId = buttonIdMap.get(key);
+                for (const prop of element.properties) {
+                    if (prop.type === 'ObjectProperty' &&
+                        prop.key.type === 'Identifier' &&
+                        prop.key.name === 'id') {
+                        if (prop.value.type === 'StringLiteral') {
+                            pushReplacement(prop.value, newButtonId);
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        buttonIndex++;
+    }
+}
+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;
+}