@embeddables/cli 0.6.0 → 0.6.2

package/.prompts/embeddables-cli.md

@@ -77,7 +77,7 @@ All component types are derived from `src/types-builder.ts`. The relevant typing
 **Key Base Properties** (all components have these):
 
 - `id: string` - Unique identifier - this must be unique across the entire Embeddable JSON. Always snake_case.
-- `key: string` - Unique identifier, used in React as key prop - unique in general but duplicate keys can be used in certain cases (e.g. two `email` fields, each hidden by conditions). Always snake_case.
+- `key: string` - Unique identifier, used in React as key prop - unique in general but duplicate keys can be used in certain cases (e.g. two `email` fields, each hidden by conditions). Always snake_case. **Keys must not start with a digit** (invalid in JS/JSON). When deriving a key from text that would start with a number (e.g. "1 to 2 weeks" → "1_to_2_weeks"), use a semantic prefix instead: e.g. `range_1_to_2_weeks`, `option_1_to_2_weeks`, or the component key like `delivery_time_1_to_2_weeks`.
 - `type: ComponentType` - Component type
 - `tags?: string[]` - Used for CSS styling
 - `parent_id?: string` - For nested components
@@ -98,7 +98,7 @@ All component types are derived from `src/types-builder.ts`. The relevant typing
   - `outputs_onchange`
   - etc.
 - `OptionSelector`
-  - `buttons`
+  - `buttons` - each button has a `key` (and optional `text`, `description`, etc.). **Button keys must not start with a digit.** If the option label would slug to a key starting with a number (e.g. "1 to 2 weeks" → "1_to_2_weeks"), use a prefix such as the component key (e.g. `delivery_range_1_to_2_weeks`) or a short semantic prefix (e.g. `range_1_to_2_weeks`, `option_1_to_2_weeks`).
   - `multiple` - whether to allow multi-select
   - `dropdown`
   - `checkbox` - whether to add a (square/round) visual checkbox in each button (the checkbox will be added for you, no need to add it manually)

package/dist/cli.js

@@ -33,6 +33,7 @@ program
     .option('-i, --id <id>', 'Embeddable ID (will prompt if not provided)')
     .option('-p, --pages <glob>', 'Pages glob')
     .option('-o, --out <path>', 'Output json path')
+    .option('--fix', 'Apply lint fixes (duplicate IDs, keys/IDs starting with a number)')
     .option('--pageKeyFrom <mode>', 'filename|export', 'filename')
     .action(async (opts) => {
     await runBuild(opts);
@@ -42,6 +43,7 @@ program
     .option('-i, --id <id>', 'Embeddable ID (will prompt if not provided)')
     .option('-p, --pages <glob>', 'Pages glob')
     .option('-o, --out <path>', 'Output json path')
+    .option('--fix', 'Apply lint fixes (duplicate IDs, keys/IDs starting with a number)')
     .option('-L, --local', 'Use local engine (http://localhost:8787)')
     .option('-e, --engine <url>', 'Engine origin', 'https://engine.embeddables.com')
     .option('--port <n>', 'Dev proxy port', '3000')

package/dist/commands/build.d.ts

@@ -2,6 +2,7 @@ export declare function runBuild(opts: {
     id?: string;
     pages?: string;
     out?: string;
+    fix?: boolean;
     pageKeyFrom: 'filename' | 'export';
 }): Promise<void>;
 //# sourceMappingURL=build.d.ts.map

package/dist/commands/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/commands/build.ts"],"names":[],"mappings":"AAKA,wBAAsB,QAAQ,CAAC,IAAI,EAAE;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAA;CACnC,iBA4BA"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/commands/build.ts"],"names":[],"mappings":"AAKA,wBAAsB,QAAQ,CAAC,IAAI,EAAE;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAA;CACnC,iBA6BA"}

package/dist/commands/build.js

@@ -23,6 +23,7 @@ export async function runBuild(opts) {
             pageKeyFrom: opts.pageKeyFrom,
             stylesDir,
             embeddableId,
+            fixLint: opts.fix ? true : 'prompt',
         });
     }
     catch (e) {

package/dist/commands/dev.d.ts

@@ -2,6 +2,7 @@ export declare function runDev(opts: {
     id?: string;
     pages?: string;
     out?: string;
+    fix?: boolean;
     local?: boolean;
     engine: string;
     port: string;

package/dist/commands/dev.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/commands/dev.ts"],"names":[],"mappings":"AAmHA,wBAAsB,MAAM,CAAC,IAAI,EAAE;IACjC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAA;CACnC,iBA4GA"}
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/commands/dev.ts"],"names":[],"mappings":"AAmHA,wBAAsB,MAAM,CAAC,IAAI,EAAE;IACjC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAA;CACnC,iBA+GA"}

package/dist/commands/dev.js

@@ -108,6 +108,7 @@ export async function runDev(opts) {
     const globalComponentsGlob = `embeddables/${embeddableId}/global-components/**/*.location.tsx`;
     const computedFieldsGlob = `embeddables/${embeddableId}/computed-fields/**/*.js`;
     const actionsGlob = `embeddables/${embeddableId}/actions/**/*.js`;
+    const fixLint = opts.fix ? true : 'prompt';
     // Initial build
     try {
         await compileAllPages({
@@ -117,6 +118,7 @@ export async function runDev(opts) {
             stylesDir,
             embeddableId,
             configPath,
+            fixLint,
         });
     }
     catch (e) {
@@ -158,6 +160,7 @@ export async function runDev(opts) {
                 stylesDir,
                 embeddableId,
                 configPath,
+                fixLint,
             });
             proxy.broadcastReload();
         }

package/dist/commands/pull.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pull.d.ts","sourceRoot":"","sources":["../../src/commands/pull.ts"],"names":[],"mappings":"AAyEA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,cAAc,iBAkPjD"}
+{"version":3,"file":"pull.d.ts","sourceRoot":"","sources":["../../src/commands/pull.ts"],"names":[],"mappings":"AA+GA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,cAAc,iBAqPjD"}

package/dist/commands/pull.js

@@ -6,6 +6,44 @@ import { reverseCompile } from '../compiler/reverse.js';
 import { getAccessToken, isLoggedIn } from '../auth/index.js';
 import { getProjectId, writeProjectConfig } from '../config/index.js';
 import { promptForProject, promptForEmbeddable, fetchEmbeddableMetadata } from '../prompts/index.js';
+/**
+ * Normalize custom_validation_function strings so literal "\\n" (backslash-n) becomes real newline.
+ * The API sometimes returns these double-escaped; dataOutputs/computedFields code is written
+ * as raw file content so they don't get double-escaped when written to embeddable.json.
+ */
+function normalizeCustomValidationFunctionsInFlow(flow) {
+    function walkComponent(comp) {
+        const v = comp.custom_validation_function;
+        if (typeof v === 'string') {
+            comp.custom_validation_function = v.replace(/\\n/g, '\n');
+        }
+        const children = comp.components ?? comp.buttons;
+        if (Array.isArray(children)) {
+            for (const c of children) {
+                if (c && typeof c === 'object')
+                    walkComponent(c);
+            }
+        }
+    }
+    const pages = flow.pages;
+    if (Array.isArray(pages)) {
+        for (const page of pages) {
+            if (page && typeof page === 'object' && Array.isArray(page.components)) {
+                for (const comp of page.components) {
+                    if (comp && typeof comp === 'object')
+                        walkComponent(comp);
+                }
+            }
+        }
+    }
+    const components = flow.components;
+    if (Array.isArray(components)) {
+        for (const comp of components) {
+            if (comp && typeof comp === 'object')
+                walkComponent(comp);
+        }
+    }
+}
 /** Slug for branch name/id for use in filenames (e.g. "my branch" -> "my_branch"). */
 function slugForBranch(nameOrId) {
     return String(nameOrId).replace(/[^a-zA-Z0-9_.-]/g, '_').replace(/_+/g, '_') || 'main';
@@ -145,6 +183,8 @@ export async function runPull(opts) {
         if (!flow) {
             throw new Error("Response does not contain a 'flow' property");
         }
+        // Normalize custom_validation_function: literal \n (backslash-n) -> real newline (so embeddable.json is correct)
+        normalizeCustomValidationFunctionsInFlow(flow);
         // Save to embeddables/<id>/.generated/embeddable.json
         fs.mkdirSync(path.dirname(outPath), { recursive: true });
         const flowJson = JSON.stringify(flow, null, 2);

package/dist/compiler/helpers/numericLeadingKeys.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Keys and IDs must not start with a digit (invalid in JS/JSON).
+ * This helper produces a safe key by prefixing when needed.
+ */
+/** Returns a key safe for use (prefix applied if key starts with a digit). */
+export declare function normalizeKeyIfStartsWithDigit(key: string | null, prefix: string): string | null;
+export declare function keyOrIdStartsWithDigit(value: string | null | undefined): boolean;
+//# sourceMappingURL=numericLeadingKeys.d.ts.map

package/dist/compiler/helpers/numericLeadingKeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numericLeadingKeys.d.ts","sourceRoot":"","sources":["../../../src/compiler/helpers/numericLeadingKeys.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,8EAA8E;AAC9E,wBAAgB,6BAA6B,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAI/F;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAIhF"}

package/dist/compiler/helpers/numericLeadingKeys.js

@@ -0,0 +1,17 @@
+/**
+ * Keys and IDs must not start with a digit (invalid in JS/JSON).
+ * This helper produces a safe key by prefixing when needed.
+ */
+/** Returns a key safe for use (prefix applied if key starts with a digit). */
+export function normalizeKeyIfStartsWithDigit(key, prefix) {
+    if (key === null || typeof key !== 'string' || key === '')
+        return key;
+    if (!/^\d/.test(key))
+        return key;
+    return `${prefix}_${key}`;
+}
+export function keyOrIdStartsWithDigit(value) {
+    if (value === null || value === undefined || typeof value !== 'string' || value === '')
+        return false;
+    return /^\d/.test(value);
+}

package/dist/compiler/index.d.ts

@@ -12,5 +12,7 @@ export declare function compileAllPages(opts: {
     stylesDir?: string;
     embeddableId?: string;
     configPath?: string;
+    /** When true, apply lint fixes (duplicate IDs, keys/IDs starting with a digit). When 'prompt', ask user to fix. */
+    fixLint?: true | 'prompt';
 }): Promise<void>;
 //# sourceMappingURL=index.d.ts.map

package/dist/compiler/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compiler/index.ts"],"names":[],"mappings":"AA+CA;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO,CA2DlF;AAED,wBAAsB,eAAe,CAAC,IAAI,EAAE;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,iBAoXA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compiler/index.ts"],"names":[],"mappings":"AAmDA;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO,CA2DlF;AAED,wBAAsB,eAAe,CAAC,IAAI,EAAE;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mHAAmH;IACnH,OAAO,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAA;CAC1B,iBA4cA"}

package/dist/compiler/index.js

@@ -6,6 +6,7 @@ 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';
@@ -103,16 +104,13 @@ export async function compileAllPages(opts) {
     if (files.length === 0) {
         throw new CompileError(`No pages found for glob: ${opts.pagesGlob}`);
     }
-    // First pass: collect all IDs from pages and detect duplicates
-    // Note: We check pages first, then global components are checked separately in loadGlobalComponents
+    // First pass: parse and collect lint issues (duplicate IDs, keys/IDs starting with a digit)
     const idOccurrences = new Map();
     const filePages = [];
-    // Parse all page files first to collect IDs
     for (const file of files) {
         const code = fs.readFileSync(file, 'utf8');
         const pageKey = derivePageKey(file, opts.pageKeyFrom);
         const page = parsePageFromFile({ code, filePath: file, pageKey });
-        // Collect component and button IDs with their locations
         for (let compIndex = 0; compIndex < page.components.length; compIndex++) {
             const component = page.components[compIndex];
             const compId = component.id;
@@ -126,7 +124,6 @@ export async function compileAllPages(opts) {
                 componentIndex: compIndex,
                 id: compId,
             });
-            // Collect button IDs from OptionSelector components
             if (component.type === 'OptionSelector' && Array.isArray(component.buttons)) {
                 for (let btnIndex = 0; btnIndex < component.buttons.length; btnIndex++) {
                     const button = component.buttons[btnIndex];
@@ -149,20 +146,16 @@ export async function compileAllPages(opts) {
         }
         filePages.push({ file, pageKey, page });
     }
-    // Detect duplicates and generate fixes
-    const idFixes = new Map(); // Maps "file:componentIndex" or "file:componentIndex:buttonIndex" -> newId
+    // Collect duplicate ID fixes (do not apply yet)
+    const idFixes = new Map();
     const allIds = new Set();
-    // Collect all existing IDs
     for (const occurrences of idOccurrences.values()) {
         for (const occ of occurrences) {
             allIds.add(occ.id);
         }
     }
-    // Find duplicates and generate unique replacements
     for (const [id, occurrences] of idOccurrences.entries()) {
         if (occurrences.length > 1) {
-            console.warn(`Found duplicate ID "${id}" used ${occurrences.length} times. Fixing...`);
-            // Keep first occurrence, fix the rest (type-based: plaintext_xxx, button_xxx, option_xxx)
             for (let i = 1; i < occurrences.length; i++) {
                 const occ = occurrences[i];
                 const fixKey = occ.buttonIndex !== undefined
@@ -172,65 +165,154 @@ export async function compileAllPages(opts) {
                 const newId = generateRandomIdByType(occ.componentType, isOptionButton, allIds, idFixes.values());
                 allIds.add(newId);
                 idFixes.set(fixKey, newId);
-                console.warn(`  → Fixing duplicate ID "${id}" to "${newId}" in ${occ.file} (component ${occ.componentIndex}${occ.buttonIndex !== undefined ? `, button ${occ.buttonIndex}` : ''})`);
             }
         }
     }
-    // Apply fixes to source files if any duplicates were found
-    if (idFixes.size > 0) {
-        // Fix page files
+    // 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) {
+            console.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}`;
+                console.warn(`  → ${file}: ${loc} → "${newId}"`);
+            }
+        }
+        if (numericLeadingFixes.length > 0) {
+            console.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})`;
+                console.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 fixesForFile = Array.from(idFixes.entries()).filter(([key]) => key.startsWith(file + ':'));
-            if (fixesForFile.length > 0) {
-                const code = fs.readFileSync(file, 'utf8');
-                const updatedCode = fixIdsInSourceFile(code, file, fixesForFile);
-                fs.writeFileSync(file, updatedCode, 'utf8');
-                console.log(`  ✓ Updated ${file} with fixed IDs`);
+            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');
+                console.log(`  ✓ 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 });
+        }
     }
-    // Second pass: re-parse all files (now with fixed IDs) and compile
-    // If no duplicates were found, reuse the already-parsed pages
     const pages = [];
     const seenIds = new Map();
-    // Map of pageKey -> PageJson for applying metadata later
     const pageMap = new Map();
-    if (idFixes.size > 0) {
-        // Re-parse files if we fixed any duplicates
-        for (const { file, pageKey } of filePages) {
-            const code = fs.readFileSync(file, 'utf8');
-            const page = parsePageFromFile({ code, filePath: file, pageKey });
-            // Global ID uniqueness: components + option ids
-            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);
-        }
-    }
-    else {
-        // No duplicates found, reuse already-parsed pages
-        for (const filePage of filePages) {
-            const { page, pageKey, file } = filePage;
-            // Global ID uniqueness: components + option ids
-            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 });
-                    }
+    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);
         }
+        pages.push(page);
+        pageMap.set(pageKey, page);
     }
     // Read config.json if it exists
     let config = null;
@@ -559,6 +641,172 @@ function fixIdsInSourceFile(code, filePath, fixes) {
     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) {

package/dist/compiler/parsePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parsePage.d.ts","sourceRoot":"","sources":["../../src/compiler/parsePage.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAezD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB,GAAG,QAAQ,CA+GX;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;CACjB,GAAG,aAAa,EAAE,CAmGlB"}
+{"version":3,"file":"parsePage.d.ts","sourceRoot":"","sources":["../../src/compiler/parsePage.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAezD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB,GAAG,QAAQ,CAuHX;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;CACjB,GAAG,aAAa,EAAE,CAqGlB"}