@bravostudioai/react 0.1.31 → 0.1.34

package/dist/cli.js

@@ -1,25 +1,22 @@
-import { runDownload as n } from "./cli/commands/download.js";
-import { runGenerate as t } from "./cli/commands/generate.js";
-async function r() {
-  const e = process.argv.slice(2);
-  (e.length === 0 || e.includes("--help") || e.includes("-h")) && (console.log(`
-Usage: encore-lib <command> [options]
-
-Commands:
-  download <appId> <pageId> <targetPath>   Download Encore page data
-  generate <appId> [pageId] <outputPath>   Generate React wrapper components
-`), process.exit(0));
-  const a = e[0], o = e.slice(1);
-  switch (a) {
-    case "download":
-      await n(o);
-      break;
-    case "generate":
-      await t(o);
-      break;
-    default:
-      console.error(`Unknown command: ${a}`), process.exit(1);
-  }
-}
-r();
+import { Command as i } from "commander";
+import { runDownload as p } from "./cli/commands/download.js";
+import { runGenerate as c } from "./cli/commands/generate.js";
+const o = new i();
+o.name("encore-lib").description("Encore CLI tools").version("0.1.32");
+o.command("download").description("Download Encore page data").argument("<appId>", "The Encore app ID").argument("<pageId>", "The Encore page ID").argument("<targetPath>", "Path where files should be saved").action(async (n, e, a) => {
+  await p(n, e, a);
+});
+o.command("generate").description("Generate React wrapper components").argument("<appId>", "The Encore app ID").argument("[pageId]", "The Encore page ID (optional)").argument(
+  "[outputPath]",
+  "Path where the generated TSX file(s) should be saved"
+).option(
+  "--mode <mode>",
+  "Deployment mode: dynamic (default), optimistic, or production"
+).action(async (n, e, a, m) => {
+  let t = e, r = a;
+  e && !a && (r = e, t = void 0);
+  const d = m.mode || "dynamic";
+  await c(n, t, r, d);
+});
+o.parse();
 //# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sources":["../src/cli/index.ts"],"sourcesContent":["\nimport { runDownload } from \"./commands/download\";\nimport { runGenerate } from \"./commands/generate\";\n\nasync function main() {\n  const args = process.argv.slice(2);\n\n  if (args.length === 0 || args.includes(\"--help\") || args.includes(\"-h\")) {\n    console.log(`\nUsage: encore-lib <command> [options]\n\nCommands:\n  download <appId> <pageId> <targetPath>   Download Encore page data\n  generate <appId> [pageId] <outputPath>   Generate React wrapper components\n`);\n    process.exit(0);\n  }\n\n  const command = args[0];\n  const commandArgs = args.slice(1);\n\n  switch (command) {\n    case \"download\":\n      await runDownload(commandArgs);\n      break;\n    case \"generate\":\n      await runGenerate(commandArgs);\n      break;\n    default:\n      console.error(`Unknown command: ${command}`);\n      process.exit(1);\n  }\n}\n\nmain();\n"],"names":["main","args","command","commandArgs","runDownload","runGenerate"],"mappings":";;AAIA,eAAeA,IAAO;AACpB,QAAMC,IAAO,QAAQ,KAAK,MAAM,CAAC;AAEjC,GAAIA,EAAK,WAAW,KAAKA,EAAK,SAAS,QAAQ,KAAKA,EAAK,SAAS,IAAI,OACpE,QAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAMf,GACG,QAAQ,KAAK,CAAC;AAGhB,QAAMC,IAAUD,EAAK,CAAC,GAChBE,IAAcF,EAAK,MAAM,CAAC;AAEhC,UAAQC,GAAA;AAAA,IACN,KAAK;AACH,YAAME,EAAYD,CAAW;AAC7B;AAAA,IACF,KAAK;AACH,YAAME,EAAYF,CAAW;AAC7B;AAAA,IACF;AACE,cAAQ,MAAM,oBAAoBD,CAAO,EAAE,GAC3C,QAAQ,KAAK,CAAC;AAAA,EAAA;AAEpB;AAEAF,EAAA;"}
+{"version":3,"file":"cli.js","sources":["../src/cli/index.ts"],"sourcesContent":["import { Command } from \"commander\";\nimport { runDownload } from \"./commands/download\";\nimport { runGenerate } from \"./commands/generate\";\n\nconst program = new Command();\n\nprogram\n  .name(\"encore-lib\")\n  .description(\"Encore CLI tools\")\n  // We'll read version from package.json in build or hardcode for now to avoid async import issues in simple CLI\n  .version(\"0.1.32\");\n\nprogram\n  .command(\"download\")\n  .description(\"Download Encore page data\")\n  .argument(\"<appId>\", \"The Encore app ID\")\n  .argument(\"<pageId>\", \"The Encore page ID\")\n  .argument(\"<targetPath>\", \"Path where files should be saved\")\n  .action(async (appId, pageId, targetPath) => {\n    await runDownload(appId, pageId, targetPath);\n  });\n\nprogram\n  .command(\"generate\")\n  .description(\"Generate React wrapper components\")\n  .argument(\"<appId>\", \"The Encore app ID\")\n  .argument(\"[pageId]\", \"The Encore page ID (optional)\")\n  .argument(\n    \"[outputPath]\",\n    \"Path where the generated TSX file(s) should be saved\"\n  )\n  .option(\n    \"--mode <mode>\",\n    \"Deployment mode: dynamic (default), optimistic, or production\"\n  )\n  .action(async (appId, pageId, outputPath, options) => {\n    // Handle overload: generate <appId> <outputPath> vs generate <appId> <pageId> <outputPath>\n    let finalPageId = pageId;\n    let finalOutputPath = outputPath;\n\n    // If only 2 arguments provided (appId and pageId/outputPath), the second one is outputPath\n    if (pageId && !outputPath) {\n      finalOutputPath = pageId;\n      finalPageId = undefined;\n    }\n\n    const mode = options.mode || \"dynamic\";\n\n    await runGenerate(appId, finalPageId, finalOutputPath, mode);\n  });\n\nprogram.parse();\n"],"names":["program","Command","appId","pageId","targetPath","runDownload","outputPath","options","finalPageId","finalOutputPath","mode","runGenerate"],"mappings":";;;AAIA,MAAMA,IAAU,IAAIC,EAAA;AAEpBD,EACG,KAAK,YAAY,EACjB,YAAY,kBAAkB,EAE9B,QAAQ,QAAQ;AAEnBA,EACG,QAAQ,UAAU,EAClB,YAAY,2BAA2B,EACvC,SAAS,WAAW,mBAAmB,EACvC,SAAS,YAAY,oBAAoB,EACzC,SAAS,gBAAgB,kCAAkC,EAC3D,OAAO,OAAOE,GAAOC,GAAQC,MAAe;AAC3C,QAAMC,EAAYH,GAAOC,GAAQC,CAAU;AAC7C,CAAC;AAEHJ,EACG,QAAQ,UAAU,EAClB,YAAY,mCAAmC,EAC/C,SAAS,WAAW,mBAAmB,EACvC,SAAS,YAAY,+BAA+B,EACpD;AAAA,EACC;AAAA,EACA;AACF,EACC;AAAA,EACC;AAAA,EACA;AACF,EACC,OAAO,OAAOE,GAAOC,GAAQG,GAAYC,MAAY;AAEpD,MAAIC,IAAcL,GACdM,IAAkBH;AAGtB,EAAIH,KAAU,CAACG,MACbG,IAAkBN,GAClBK,IAAc;AAGhB,QAAME,IAAOH,EAAQ,QAAQ;AAE7B,QAAMI,EAAYT,GAAOM,GAAaC,GAAiBC,CAAI;AAC7D,CAAC;AAEHV,EAAQ,MAAA;"}

package/dist/codegen/generator.js

@@ -1,42 +1,42 @@
-import { sanitizePropName as m, getComponentPropType as W, getComponentPropName as R } from "./parser.js";
-function K(k, x, P, E, u, c, N, v, l, d = !1, I) {
-  const y = [], a = [], p = [], f = [], D = [], A = [];
+import { sanitizePropName as m, getComponentPropType as R, getComponentPropName as H } from "./parser.js";
+function L(A, x, P, E, u, c, N, v, l, $ = "dynamic", I) {
+  const y = [], a = [], p = [], f = [], D = [], z = [];
   u.forEach((o) => {
     y.push(`  ${o.propName}?: ${o.propType};`);
   }), c.forEach((o) => {
-    const n = m(o.groupName);
-    p.push(`  ${n}?: string;`), p.push(
-      `  on${n[0].toUpperCase()}${n.slice(
+    const t = m(o.groupName);
+    p.push(`  ${t}?: string;`), p.push(
+      `  on${t[0].toUpperCase()}${t.slice(
         1
       )}Change?: (value: string) => void;`
     );
   });
   const w = [];
   N.forEach((o) => {
-    const n = m(o.formName), s = `${n[0].toUpperCase()}${n.slice(
+    const t = m(o.formName), s = `${t[0].toUpperCase()}${t.slice(
       1
     )}FormData`, r = [];
-    o.inputs.forEach(($) => {
-      const T = $.propName, b = W($.type, $.name);
-      r.push(`  ${T}: ${b};`);
+    o.inputs.forEach((d) => {
+      const U = d.propName, b = R(d.type, d.name);
+      r.push(`  ${U}: ${b};`);
     }), w.push(`export interface ${s} {
 ${r.join(`
 `)}
 }`), f.push(
-      `  on${n[0].toUpperCase()}${n.slice(
+      `  on${t[0].toUpperCase()}${t.slice(
         1
       )}Submit?: (formData: ${s}) => void;`
     );
   }), v.forEach((o) => {
-    const n = o.propName, s = n[0].toUpperCase() + n.slice(1);
-    D.push(`  ${n}?: string;`), D.push(
-      `  ${n}Options?: Array<string | { value: string; label: string }>;`
+    const t = o.propName, s = t[0].toUpperCase() + t.slice(1);
+    D.push(`  ${t}?: string;`), D.push(
+      `  ${t}Options?: Array<string | { value: string; label: string }>;`
     ), D.push(
       `  on${s}Change?: (value: string) => void;`
     );
   }), l.forEach((o) => {
-    const n = o.propName, s = n[0].toUpperCase() + n.slice(1);
-    A.push(`  on${s}Click?: () => void;`);
+    const t = o.propName, s = t[0].toUpperCase() + t.slice(1);
+    z.push(`  on${s}Click?: () => void;`);
   }), E.forEach((o) => {
     if (o.arrayContainer && o.arrayContainer.components.length > 0) {
       const s = o.arrayContainer, r = `${s.propName[0].toUpperCase()}${s.propName.slice(
@@ -44,27 +44,27 @@ ${r.join(`
       )}Item`;
       y.push(`  ${s.propName}: ${r}[];`);
     }
-    const n = m(o.name || "container");
-    a.push(`  ${n}CurrentIndex?: number;`), a.push(
-      `  on${n[0].toUpperCase()}${n.slice(
+    const t = m(o.name || "container");
+    a.push(`  ${t}CurrentIndex?: number;`), a.push(
+      `  on${t[0].toUpperCase()}${t.slice(
         1
       )}IndexChange?: (index: number) => void;`
     );
   });
-  const z = [
+  const O = [
     ...y,
     ...a,
     ...p,
     ...f,
     ...D,
-    ...A
-  ], j = z.length > 0, O = j ? `export interface ${P}Props {
-${z.join(`
+    ...z
+  ], j = O.length > 0, M = j ? `export interface ${P}Props {
+${O.join(`
 `)}
-}` : "", M = E.filter((o) => o.arrayContainer && o.arrayContainer.components.length > 0).map((o) => {
-    const n = o.arrayContainer, s = `${n.propName[0].toUpperCase()}${n.propName.slice(
+}` : "", B = E.filter((o) => o.arrayContainer && o.arrayContainer.components.length > 0).map((o) => {
+    const t = o.arrayContainer, s = `${t.propName[0].toUpperCase()}${t.propName.slice(
       1
-    )}Item`, r = n.components.map(($) => `  ${$.propName}: ${$.propType};`).join(`
+    )}Item`, r = t.components.map((d) => `  ${d.propName}: ${d.propType};`).join(`
 `);
     return `export interface ${s} {
 ${r}
@@ -73,11 +73,11 @@ ${r}
 
 `), F = w.join(`
 
-`), S = [], U = [];
+`), S = [], k = [];
   u.forEach((o) => {
-    const n = R(o.type);
+    const t = H(o.type);
     S.push(`    // ${o.name}
-    ...(props.${o.propName} !== undefined && { "${o.id}": { ${n}: props.${o.propName} } as any }),`);
+    ...(props.${o.propName} !== undefined && { "${o.id}": { ${t}: props.${o.propName} } as any }),`);
   }), v.forEach((o) => {
     S.push(`    // ${o.name}
     ...((props.${o.propName} !== undefined || props.${o.propName}Options !== undefined) && { 
@@ -88,43 +88,43 @@ ${r}
     }),`);
   }), E.forEach((o) => {
     if (o.arrayContainer && o.arrayContainer.components.length > 0) {
-      const $ = o.arrayContainer, T = $.components.map((b) => {
-        const G = R(b.type);
+      const d = o.arrayContainer, U = d.components.map((b) => {
+        const W = H(b.type);
         return `        // ${b.name}
         "${b.id}": {
-          ${G}: item.${b.propName},
+          ${W}: item.${b.propName},
         }`;
       }).join(`,
 `);
-      S.push(`    // ${$.name}
-    "${$.id}": props.${$.propName}.map((item) => ({
-${T}
+      S.push(`    // ${d.name}
+    "${d.id}": props.${d.propName}.map((item) => ({
+${U}
       })),`);
     }
-    const n = m(o.name || "container"), s = `${n[0].toUpperCase()}${n.slice(
+    const t = m(o.name || "container"), s = `${t[0].toUpperCase()}${t.slice(
       1
     )}IndexChange`, r = [];
     o.id && (r.push(`      // ${o.name}`), r.push(`      "${o.id}": {`), r.push(
-      `        currentIndex: props.${n}CurrentIndex,`
-    ), r.push(`        onIndexChange: props.on${s},`), r.push("      }")), r.length > 0 && U.push(r.join(`
+      `        currentIndex: props.${t}CurrentIndex,`
+    ), r.push(`        onIndexChange: props.on${s},`), r.push("      }")), r.length > 0 && k.push(r.join(`
 `));
   });
-  const B = U.length > 0 ? `
+  const G = k.length > 0 ? `
       repeatingContainerControls={{
-${U.join(`,
+${k.join(`,
 `)}
-      }}` : "", t = [], e = [];
+      }}` : "", n = [], e = [];
   (c.length > 0 || N.length > 0 || v.length > 0 || l.length > 0) && (e.push("  const handleAction = (payload: any) => {"), e.push("    const { action } = payload?.bravo || {};"), e.push(""), v.length > 0 && (e.push("    // Handle select input changes"), e.push(
     '    if (action?.action === "input-change" || action?.action === "select-change") {'
   ), e.push("      const nodeId = action?.nodeId;"), e.push("      const value = action?.params?.value;"), e.push(""), v.forEach((o) => {
-    const n = o.propName, r = `on${n[0].toUpperCase() + n.slice(1)}Change`;
+    const t = o.propName, r = `on${t[0].toUpperCase() + t.slice(1)}Change`;
     e.push(`      // ${o.name}`), e.push(
       `      if (nodeId === "${o.id}" && props.${r}) {`
     ), e.push(`        props.${r}(value);`), e.push("        return;"), e.push("      }");
   }), e.push("    }"), e.push("")), l.length > 0 && (e.push("    // Handle button clicks"), e.push(
     '    if (action?.action === "remote" || action?.action === "tap" || action?.action === "link") {'
   ), e.push("      const nodeId = action?.nodeId;"), e.push(""), l.forEach((o) => {
-    const n = o.propName, r = `on${n[0].toUpperCase() + n.slice(1)}Click`;
+    const t = o.propName, r = `on${t[0].toUpperCase() + t.slice(1)}Click`;
     e.push(`      // ${o.name}`), e.push(
       `      if (nodeId === "${o.id}" && props.${r}) {`
     ), e.push(`        props.${r}();`), e.push("        return;"), e.push("      }");
@@ -133,7 +133,7 @@ ${U.join(`,
   ), e.push(
     "      const { groupName, value } = action.params;"
   ), c.forEach((o) => {
-    const n = m(o.groupName), s = `on${n[0].toUpperCase()}${n.slice(
+    const t = m(o.groupName), s = `on${t[0].toUpperCase()}${t.slice(
       1
     )}Change`;
     e.push(
@@ -141,45 +141,45 @@ ${U.join(`,
     ), e.push(`        props.${s}(value);`), e.push("        return;"), e.push("      }");
   }), e.push("    }"), e.push("")), N.length > 0 && (e.push('    if (action?.action === "submit") {'), e.push("      // Get form inputs from Encore state"), e.push(
     `      const formInputs = useEncoreState.getState().formInputs["${x}"] || {};`
-  ), e.push("      const submitNodeId = action?.nodeId;"), e.push(""), N.forEach((o, n) => {
+  ), e.push("      const submitNodeId = action?.nodeId;"), e.push(""), N.forEach((o, t) => {
     const s = m(o.formName), r = `on${s[0].toUpperCase()}${s.slice(
       1
     )}Submit`;
-    n > 0 && e.push(""), e.push(
+    t > 0 && e.push(""), e.push(
       `      // Form: ${o.formName} (${o.formId})`
     ), o.submitButtonId ? e.push(
       `      if (submitNodeId === "${o.submitButtonId}" && props.${r}) {`
     ) : N.length === 1 ? e.push(`      if (props.${r}) {`) : e.push(`      if (props.${r}) {`), e.push("        // Extract form inputs for this form");
-    const $ = `${s[0].toUpperCase()}${s.slice(
+    const d = `${s[0].toUpperCase()}${s.slice(
       1
     )}FormData`;
     e.push(
-      `        const formData: ${$} = {`
+      `        const formData: ${d} = {`
     );
-    const T = [];
+    const U = [];
     o.inputs.forEach((b) => {
-      const G = b.propName;
-      T.push(
-        `          ${G}: formInputs["${b.id}"]`
+      const W = b.propName;
+      U.push(
+        `          ${W}: formInputs["${b.id}"]`
       );
-    }), e.push(T.join(`,
+    }), e.push(U.join(`,
 `)), e.push("        };"), e.push(`        props.${r}(formData);`), e.push(
       "        // Note: Default form submission will still proceed after callback"
     ), e.push("      }");
   }), e.push("    }")), e.push("  };")), c.forEach((o) => {
-    const n = m(o.groupName);
-    t.push(
-      `    ...(props.${n} !== undefined && { ${n}: props.${n} }),`
+    const t = m(o.groupName);
+    n.push(
+      `    ...(props.${t} !== undefined && { ${t}: props.${t} }),`
     );
   });
-  const C = t.length > 0 ? `
+  const C = n.length > 0 ? `
       inputGroups={{
-${t.join(`
+${n.join(`
 `)}
       }}` : "", i = e.length > 0 ? `
-      onAction={handleAction}` : "", g = j ? `props: ${P}Props` : "", h = O ? `${O}
+      onAction={handleAction}` : "", g = j ? `props: ${P}Props` : "", h = M ? `${M}
 
-` : "";
+` : "", T = $ === "production" || $ === "optimistic";
   return `/**
  * ${P}
  * 
@@ -188,9 +188,9 @@ ${t.join(`
  */
 
 import { EncoreApp${N.length > 0 ? ", useEncoreState" : ""} } from "@bravostudioai/react";
-${d ? 'import productionData from "./data.json";' : ""}
+${T ? 'import productionData from "./data.json";' : ""}
 
-${M ? `${M}
+${B ? `${B}
 
 ` : ""}${F ? `${F}
 
@@ -199,15 +199,16 @@ ${e.length > 0 ? e.join(`
 `) : ""}
   return (
     <EncoreApp
-      appId="${k}"
+      appId="${A}"
       pageId="${x}"
-      ${d ? `appDefinition={productionData.app}
+      mode="${$}"
+      ${T ? `appDefinition={productionData.app}
       pageDefinition={productionData.page}
       componentCode={productionData.componentCode}` : ""}
       data={{
 ${S.join(`
 `)}
-      }}${B}${C}${i}
+      }}${G}${C}${i}
     />
   );
 }
@@ -221,15 +222,15 @@ export const PageMeta = {
 };
 `;
 }
-function L(k, x, P, E, u, c, N, v, l, d, I) {
+function Y(A, x, P, E, u, c, N, v, l, $, I) {
   const y = [], a = [], p = [], f = [];
-  N.forEach((t) => {
-    y.push(`### \`${t.propName}\` (${t.propType}, optional)
+  N.forEach((n) => {
+    y.push(`### \`${n.propName}\` (${n.propType}, optional)
 
-${t.name} (${t.type}) - Component ID: ${t.id}`);
-  }), c.forEach((t) => {
-    if (t.arrayContainer && t.arrayContainer.components.length > 0) {
-      const i = t.arrayContainer, g = i.components.map((h) => `- \`${h.propName}\` (${h.propType}): ${h.name} (${h.type}) - Component ID: ${h.id}`).join(`
+${n.name} (${n.type}) - Component ID: ${n.id}`);
+  }), c.forEach((n) => {
+    if (n.arrayContainer && n.arrayContainer.components.length > 0) {
+      const i = n.arrayContainer, g = i.components.map((h) => `- \`${h.propName}\` (${h.propType}): ${h.name} (${h.type}) - Component ID: ${h.id}`).join(`
 `);
       y.push(`### \`${i.propName}\` (${i.propName[0].toUpperCase()}${i.propName.slice(
         1
@@ -241,12 +242,12 @@ Array of items for "${i.name}" container (ID: ${i.id})
 
 ${g}`);
     }
-    const e = m(t.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
+    const e = m(n.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
       1
     )}IndexChange`;
     a.push(`### \`${e}CurrentIndex\` (number, optional)
 
-Controls the currently visible slide/index for the "${t.name}" container (ID: ${t.id}).
+Controls the currently visible slide/index for the "${n.name}" container (ID: ${n.id}).
 
 When provided, the slider operates in controlled mode - the parent component controls which slide is displayed. When not provided, the slider manages its own state.
 
@@ -258,56 +259,56 @@ This event fires whenever the slide changes, whether by user interaction, automa
   });
   const D = y.length > 0 ? y.join(`
 
-`) : "This component currently has no data-bound props.", A = a.length > 0 ? `## Control Props
+`) : "This component currently has no data-bound props.", z = a.length > 0 ? `## Control Props
 
 These props allow you to imperatively control repeating containers (sliders, lists, etc.) and receive notifications when the current index changes.
 
 ${a.join(`
 
 `)}` : "", w = [];
-  v.forEach((t) => {
-    const e = m(t.groupName), C = `on${e[0].toUpperCase()}${e.slice(
+  v.forEach((n) => {
+    const e = m(n.groupName), C = `on${e[0].toUpperCase()}${e.slice(
       1
-    )}Change`, i = t.elements.map((g) => `- "${g.name}"`).join(`
+    )}Change`, i = n.elements.map((g) => `- "${g.name}"`).join(`
 `);
     w.push(`### \`${e}\` (string, optional)
 
-Sets which element is active in the "${t.groupName}" input group (type: ${t.groupType}).
+Sets which element is active in the "${n.groupName}" input group (type: ${n.groupType}).
 
 **Available elements:**
 ${i}
 
 ### \`${C}\` ((value: string) => void, optional)
 
-Callback fired when the user selects a different element in the "${t.groupName}" input group. Called with the name of the selected element.`);
+Callback fired when the user selects a different element in the "${n.groupName}" input group. Called with the name of the selected element.`);
   });
-  const z = w.length > 0 ? `## Input Group Props
+  const O = w.length > 0 ? `## Input Group Props
 
 These props allow you to control input groups (radio button-like behavior) and receive notifications when the selection changes.
 
 ${w.join(`
 
 `)}` : "", j = [];
-  l.forEach((t) => {
-    const e = m(t.formName), C = `on${e[0].toUpperCase()}${e.slice(
+  l.forEach((n) => {
+    const e = m(n.formName), C = `on${e[0].toUpperCase()}${e.slice(
       1
     )}Submit`, i = `${e[0].toUpperCase()}${e.slice(
       1
-    )}FormData`, g = t.inputs.map((h) => {
-      const o = h.propName, n = W(h.type, h.name);
-      return `- \`${o}\` (${n}) - ${h.name}`;
+    )}FormData`, g = n.inputs.map((h) => {
+      const T = h.propName, o = R(h.type, h.name);
+      return `- \`${T}\` (${o}) - ${h.name}`;
     }).join(`
 `);
     j.push(`### \`${C}\` ((formData: ${i}) => void, optional)
 
-Callback fired when the "${t.formName}" form is submitted. Called with a typed object containing all form input values with human-readable property names.
+Callback fired when the "${n.formName}" form is submitted. Called with a typed object containing all form input values with human-readable property names.
 
 **Form data shape:**
 \`\`\`typescript
 interface ${i} {
-${t.inputs.map((h) => {
-      const o = h.propName, n = W(h.type, h.name);
-      return `  ${o}: ${n};`;
+${n.inputs.map((h) => {
+      const T = h.propName, o = R(h.type, h.name);
+      return `  ${T}: ${o};`;
     }).join(`
 `)}
 }
@@ -316,24 +317,24 @@ ${t.inputs.map((h) => {
 **Form inputs:**
 ${g}`);
   });
-  const O = j.length > 0 ? `## Form Submission Props
+  const M = j.length > 0 ? `## Form Submission Props
 
 These props allow you to handle form submissions and access form input values.
 
 ${j.join(`
 
 `)}` : "";
-  d.forEach((t) => {
-    const e = t.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Change`, g = `${e}Options`;
+  $.forEach((n) => {
+    const e = n.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Change`, g = `${e}Options`;
     p.push(`### \`${e}\` (string, optional)
 
-Controls the selected value of the "${t.name}" dropdown (Component ID: ${t.id}).
+Controls the selected value of the "${n.name}" dropdown (Component ID: ${n.id}).
 
 When provided, the select input operates in controlled mode - the parent component controls the current value.
 
 ### \`${g}\` (Array<string | { value: string; label: string }>, optional)
 
-Sets the available options for the "${t.name}" dropdown. Can be an array of strings (used as both value and label) or an array of objects with \`value\` and \`label\` properties.
+Sets the available options for the "${n.name}" dropdown. Can be an array of strings (used as both value and label) or an array of objects with \`value\` and \`label\` properties.
 
 **Example:**
 \`\`\`tsx
@@ -349,22 +350,22 @@ ${g}={[
 
 ### \`${i}\` ((value: string) => void, optional)
 
-Callback fired when the user selects a different option in the "${t.name}" dropdown. Called with the selected value.`);
+Callback fired when the user selects a different option in the "${n.name}" dropdown. Called with the selected value.`);
   });
-  const M = p.length > 0 ? `## Select Input Props
+  const B = p.length > 0 ? `## Select Input Props
 
 These props allow you to control select/dropdown inputs and respond to value changes.
 
 ${p.join(`
 
 `)}` : "";
-  I.forEach((t) => {
-    const e = t.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Click`;
+  I.forEach((n) => {
+    const e = n.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Click`;
     f.push(`### \`${i}\` (() => void, optional)
 
-Callback fired when the "${t.name}" button is clicked (Component ID: ${t.id}).
+Callback fired when the "${n.name}" button is clicked (Component ID: ${n.id}).
 
-Action type: \`${t.actionType}\``);
+Action type: \`${n.actionType}\``);
   });
   const F = f.length > 0 ? `## Action Button Props
 
@@ -378,19 +379,19 @@ ${f.join(`
 
 ${D}
 
-${A}
-
 ${z}
 
 ${O}
 
 ${M}
 
-${F}`, U = c.length > 0 && c[0].arrayContainer ? `<${u}
+${B}
+
+${F}`, k = c.length > 0 && c[0].arrayContainer ? `<${u}
   ${c.map(
-    (t) => t.arrayContainer ? `${t.arrayContainer.propName}={[
+    (n) => n.arrayContainer ? `${n.arrayContainer.propName}={[
     {
-      ${t.arrayContainer?.components.map(
+      ${n.arrayContainer?.components.map(
       (e) => `${e.propName}: "${e.type === "component:image" ? "https://example.com/image.jpg" : "Example value"}"`
     ).join(`,
       `)}
@@ -399,12 +400,12 @@ ${F}`, U = c.length > 0 && c[0].arrayContainer ? `<${u}
   ).filter(Boolean).join(`
   `)}
 />` : `<${u} />`;
-  let B = "";
+  let G = "";
   if (c.length > 0 && c[0]) {
-    const t = c[0], e = m(t.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
+    const n = c[0], e = m(n.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
       1
     )}IndexChange`;
-    B = `## Controlling Slides
+    G = `## Controlling Slides
 
 You can imperatively control which slide is displayed and listen for slide changes:
 
@@ -440,7 +441,7 @@ function MyComponent() {
 
 Encore App Wrapper Component
 
-This component wraps the Encore Studio app **"${P}"** (App ID: \`${k}\`) for the page **"${E}"** (Page ID: \`${x}\`).
+This component wraps the Encore Studio app **"${P}"** (App ID: \`${A}\`) for the page **"${E}"** (Page ID: \`${x}\`).
 
 The component automatically maps props to data-bound components within the app. Components marked with \`encore:data\` tags are exposed as props, allowing you to dynamically populate content.
 
@@ -455,7 +456,7 @@ function MyComponent() {
   return (
     <${u}
       ${c.map(
-    (t) => t.arrayContainer ? `${t.arrayContainer.propName}={[/* array of items */]}` : ""
+    (n) => n.arrayContainer ? `${n.arrayContainer.propName}={[/* array of items */]}` : ""
   ).filter(Boolean).join(`
       `)}
     />
@@ -466,52 +467,52 @@ function MyComponent() {
 ## Example
 
 \`\`\`tsx
-${U}
+${k}
 \`\`\`
 
-${B}
+${G}
 `;
 }
-function Y(k, x, P, E, u, c, N, v) {
-  const l = [], d = [], I = m(x);
+function _(A, x, P, E, u, c, N, v) {
+  const l = [], $ = [], I = m(x);
   E.forEach((a) => {
     l.push(a.propName);
   }), u.forEach((a) => {
     const p = m(a.groupName);
-    l.push(p), d.push(`on${p[0].toUpperCase()}${p.slice(1)}Change`);
+    l.push(p), $.push(`on${p[0].toUpperCase()}${p.slice(1)}Change`);
   }), c.forEach((a) => {
     const p = m(a.formName);
-    d.push(
+    $.push(
       `on${p[0].toUpperCase()}${p.slice(1)}Submit`
     );
   }), N.forEach((a) => {
     const p = a.propName, f = p[0].toUpperCase() + p.slice(1);
-    l.push(p), l.push(`${p}Options`), d.push(`on${f}Change`);
+    l.push(p), l.push(`${p}Options`), $.push(`on${f}Change`);
   }), v.forEach((a) => {
     const p = a.propName, f = p[0].toUpperCase() + p.slice(1);
-    d.push(`on${f}Click`);
+    $.push(`on${f}Click`);
   }), P.forEach((a) => {
     a.arrayContainer && a.arrayContainer.components.length > 0 && l.push(a.arrayContainer.propName);
     const p = m(a.name || "container"), f = `${p[0].toUpperCase()}${p.slice(
       1
     )}IndexChange`;
-    l.push(`${p}CurrentIndex`), d.push(`on${f}`);
+    l.push(`${p}CurrentIndex`), $.push(`on${f}`);
   });
   const y = `<${I}
   ${l.map((a) => `${a}={${a}}`).join(`
   `)}
-  ${d.map((a) => `${a}={${a}}`).join(`
+  ${$.map((a) => `${a}={${a}}`).join(`
   `)}
 />`;
   return {
     props: l,
-    events: d,
+    events: $,
     jsx: y
   };
 }
 export {
-  K as generateComponentCode,
-  Y as generateComponentMetadata,
-  L as generateReadme
+  L as generateComponentCode,
+  _ as generateComponentMetadata,
+  Y as generateReadme
 };
 //# sourceMappingURL=generator.js.map