@bravostudioai/react 0.1.14 → 0.1.16

package/dist/codegen/generator.js

@@ -1,231 +1,237 @@
-import { sanitizePropName as l, getComponentPropType as G, getComponentPropName as W } from "./parser.js";
-function K(U, I, y, b, m, c, g, P, h, d = !1) {
-  const E = [], N = [], a = [], r = [], u = [], k = [];
-  m.forEach((o) => {
-    E.push(`  ${o.propName}?: ${o.propType};`);
+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 = [];
+  u.forEach((o) => {
+    y.push(`  ${o.propName}?: ${o.propType};`);
   }), c.forEach((o) => {
-    const n = l(o.groupName);
-    a.push(`  ${n}?: string;`), a.push(
+    const n = m(o.groupName);
+    p.push(`  ${n}?: string;`), p.push(
       `  on${n[0].toUpperCase()}${n.slice(
         1
       )}Change?: (value: string) => void;`
     );
   });
-  const A = [];
-  g.forEach((o) => {
-    const n = l(o.formName), p = `${n[0].toUpperCase()}${n.slice(
+  const w = [];
+  N.forEach((o) => {
+    const n = m(o.formName), s = `${n[0].toUpperCase()}${n.slice(
       1
-    )}FormData`, s = [];
+    )}FormData`, r = [];
     o.inputs.forEach(($) => {
-      const S = $.propName, v = G($.type, $.name);
-      s.push(`  ${S}: ${v};`);
-    }), A.push(`export interface ${p} {
-${s.join(`
+      const T = $.propName, b = W($.type, $.name);
+      r.push(`  ${T}: ${b};`);
+    }), w.push(`export interface ${s} {
+${r.join(`
 `)}
-}`), r.push(
+}`), f.push(
       `  on${n[0].toUpperCase()}${n.slice(
         1
-      )}Submit?: (formData: ${p}) => void;`
+      )}Submit?: (formData: ${s}) => void;`
     );
-  }), P.forEach((o) => {
-    const n = o.propName, p = n[0].toUpperCase() + n.slice(1);
-    u.push(`  ${n}?: string;`), u.push(
+  }), 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 }>;`
-    ), u.push(
-      `  on${p}Change?: (value: string) => void;`
+    ), D.push(
+      `  on${s}Change?: (value: string) => void;`
     );
-  }), h.forEach((o) => {
-    const n = o.propName, p = n[0].toUpperCase() + n.slice(1);
-    k.push(`  on${p}Click?: () => void;`);
-  }), b.forEach((o) => {
+  }), l.forEach((o) => {
+    const n = o.propName, s = n[0].toUpperCase() + n.slice(1);
+    A.push(`  on${s}Click?: () => void;`);
+  }), E.forEach((o) => {
     if (o.arrayContainer && o.arrayContainer.components.length > 0) {
-      const p = o.arrayContainer, s = `${p.propName[0].toUpperCase()}${p.propName.slice(
+      const s = o.arrayContainer, r = `${s.propName[0].toUpperCase()}${s.propName.slice(
         1
       )}Item`;
-      E.push(`  ${p.propName}: ${s}[];`);
+      y.push(`  ${s.propName}: ${r}[];`);
     }
-    const n = l(o.name || "container");
-    N.push(`  ${n}CurrentIndex?: number;`), N.push(
+    const n = m(o.name || "container");
+    a.push(`  ${n}CurrentIndex?: number;`), a.push(
       `  on${n[0].toUpperCase()}${n.slice(
         1
       )}IndexChange?: (index: number) => void;`
     );
   });
-  const x = [
-    ...E,
-    ...N,
+  const z = [
+    ...y,
     ...a,
-    ...r,
-    ...u,
-    ...k
-  ], z = x.length > 0, D = z ? `export interface ${y}Props {
-${x.join(`
+    ...p,
+    ...f,
+    ...D,
+    ...A
+  ], j = z.length > 0, O = j ? `export interface ${P}Props {
+${z.join(`
 `)}
-}` : "", O = b.filter((o) => o.arrayContainer && o.arrayContainer.components.length > 0).map((o) => {
-    const n = o.arrayContainer, p = `${n.propName[0].toUpperCase()}${n.propName.slice(
+}` : "", 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(
       1
-    )}Item`, s = n.components.map(($) => `  ${$.propName}: ${$.propType};`).join(`
+    )}Item`, r = n.components.map(($) => `  ${$.propName}: ${$.propType};`).join(`
 `);
-    return `export interface ${p} {
-${s}
+    return `export interface ${s} {
+${r}
 }`;
   }).join(`
 
-`), M = A.join(`
+`), F = w.join(`
 
-`), j = [], T = [];
-  m.forEach((o) => {
-    const n = W(o.type);
-    j.push(`    // ${o.name}
+`), S = [], U = [];
+  u.forEach((o) => {
+    const n = R(o.type);
+    S.push(`    // ${o.name}
     ...(props.${o.propName} !== undefined && { "${o.id}": { ${n}: props.${o.propName} } as any }),`);
-  }), P.forEach((o) => {
-    j.push(`    // ${o.name}
+  }), v.forEach((o) => {
+    S.push(`    // ${o.name}
     ...((props.${o.propName} !== undefined || props.${o.propName}Options !== undefined) && { 
       "${o.id}": { 
         ...(props.${o.propName} !== undefined && { value: props.${o.propName} }),
         ...(props.${o.propName}Options !== undefined && { options: props.${o.propName}Options }),
       } as any 
     }),`);
-  }), b.forEach((o) => {
+  }), E.forEach((o) => {
     if (o.arrayContainer && o.arrayContainer.components.length > 0) {
-      const $ = o.arrayContainer, S = $.components.map((v) => {
-        const B = W(v.type);
-        return `        // ${v.name}
-        "${v.id}": {
-          ${B}: item.${v.propName},
+      const $ = o.arrayContainer, T = $.components.map((b) => {
+        const G = R(b.type);
+        return `        // ${b.name}
+        "${b.id}": {
+          ${G}: item.${b.propName},
         }`;
       }).join(`,
 `);
-      j.push(`    // ${$.name}
+      S.push(`    // ${$.name}
     "${$.id}": props.${$.propName}.map((item) => ({
-${S}
+${T}
       })),`);
     }
-    const n = l(o.name || "container"), p = `${n[0].toUpperCase()}${n.slice(
+    const n = m(o.name || "container"), s = `${n[0].toUpperCase()}${n.slice(
       1
-    )}IndexChange`, s = [];
-    o.id && (s.push(`      // ${o.name}`), s.push(`      "${o.id}": {`), s.push(
+    )}IndexChange`, r = [];
+    o.id && (r.push(`      // ${o.name}`), r.push(`      "${o.id}": {`), r.push(
       `        currentIndex: props.${n}CurrentIndex,`
-    ), s.push(`        onIndexChange: props.on${p},`), s.push("      }")), s.length > 0 && T.push(s.join(`
+    ), r.push(`        onIndexChange: props.on${s},`), r.push("      }")), r.length > 0 && U.push(r.join(`
 `));
   });
-  const F = T.length > 0 ? `
+  const B = U.length > 0 ? `
       repeatingContainerControls={{
-${T.join(`,
+${U.join(`,
 `)}
-      }}` : "", w = [], e = [];
-  (c.length > 0 || g.length > 0 || P.length > 0 || h.length > 0) && (e.push("  const handleAction = (payload: any) => {"), e.push("    const { action } = payload?.bravo || {};"), e.push(""), P.length > 0 && (e.push("    // Handle select input changes"), e.push(
+      }}` : "", t = [], 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(""), P.forEach((o) => {
-    const n = o.propName, s = `on${n[0].toUpperCase() + n.slice(1)}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`;
     e.push(`      // ${o.name}`), e.push(
-      `      if (nodeId === "${o.id}" && props.${s}) {`
-    ), e.push(`        props.${s}(value);`), e.push("        return;"), e.push("      }");
-  }), e.push("    }"), e.push("")), h.length > 0 && (e.push("    // Handle button clicks"), 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(""), h.forEach((o) => {
-    const n = o.propName, s = `on${n[0].toUpperCase() + n.slice(1)}Click`;
+  ), e.push("      const nodeId = action?.nodeId;"), e.push(""), l.forEach((o) => {
+    const n = o.propName, r = `on${n[0].toUpperCase() + n.slice(1)}Click`;
     e.push(`      // ${o.name}`), e.push(
-      `      if (nodeId === "${o.id}" && props.${s}) {`
-    ), e.push(`        props.${s}();`), e.push("        return;"), e.push("      }");
+      `      if (nodeId === "${o.id}" && props.${r}) {`
+    ), e.push(`        props.${r}();`), e.push("        return;"), e.push("      }");
   }), e.push("    }"), e.push("")), c.length > 0 && (e.push(
     '    if (action?.action === "input-group-change") {'
   ), e.push(
     "      const { groupName, value } = action.params;"
   ), c.forEach((o) => {
-    const n = l(o.groupName), p = `on${n[0].toUpperCase()}${n.slice(
+    const n = m(o.groupName), s = `on${n[0].toUpperCase()}${n.slice(
       1
     )}Change`;
     e.push(
-      `      if (groupName === "${o.groupName}" && props.${p}) {`
-    ), e.push(`        props.${p}(value);`), e.push("        return;"), e.push("      }");
-  }), e.push("    }"), e.push("")), g.length > 0 && (e.push('    if (action?.action === "submit") {'), e.push("      // Get form inputs from Encore state"), e.push(
-    `      const formInputs = useEncoreState.getState().formInputs["${I}"] || {};`
-  ), e.push("      const submitNodeId = action?.nodeId;"), e.push(""), g.forEach((o, n) => {
-    const p = l(o.formName), s = `on${p[0].toUpperCase()}${p.slice(
+      `      if (groupName === "${o.groupName}" && props.${s}) {`
+    ), 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) => {
+    const s = m(o.formName), r = `on${s[0].toUpperCase()}${s.slice(
       1
     )}Submit`;
     n > 0 && e.push(""), e.push(
       `      // Form: ${o.formName} (${o.formId})`
     ), o.submitButtonId ? e.push(
-      `      if (submitNodeId === "${o.submitButtonId}" && props.${s}) {`
-    ) : g.length === 1 ? e.push(`      if (props.${s}) {`) : e.push(`      if (props.${s}) {`), e.push("        // Extract form inputs for this form");
-    const $ = `${p[0].toUpperCase()}${p.slice(
+      `      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(
       1
     )}FormData`;
     e.push(
       `        const formData: ${$} = {`
     );
-    const S = [];
-    o.inputs.forEach((v) => {
-      const B = v.propName;
-      S.push(
-        `          ${B}: formInputs["${v.id}"]`
+    const T = [];
+    o.inputs.forEach((b) => {
+      const G = b.propName;
+      T.push(
+        `          ${G}: formInputs["${b.id}"]`
       );
-    }), e.push(S.join(`,
-`)), e.push("        };"), e.push(`        props.${s}(formData);`), e.push(
+    }), e.push(T.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 = l(o.groupName);
-    w.push(
+    const n = m(o.groupName);
+    t.push(
       `    ...(props.${n} !== undefined && { ${n}: props.${n} }),`
     );
   });
-  const t = w.length > 0 ? `
+  const C = t.length > 0 ? `
       inputGroups={{
-${w.join(`
+${t.join(`
 `)}
-      }}` : "", f = e.length > 0 ? `
-      onAction={handleAction}` : "", i = z ? `props: ${y}Props` : "", C = D ? `${D}
+      }}` : "", i = e.length > 0 ? `
+      onAction={handleAction}` : "", g = j ? `props: ${P}Props` : "", h = O ? `${O}
 
 ` : "";
   return `/**
- * ${y}
+ * ${P}
  * 
  * Wrapper component for Encore Studio app.
  * See README.md for detailed documentation.
  */
 
-import { EncoreApp${g.length > 0 ? ", useEncoreState" : ""} } from "@bravostudioai/react";
+import { EncoreApp${N.length > 0 ? ", useEncoreState" : ""} } from "@bravostudioai/react";
 ${d ? 'import productionData from "./data.json";' : ""}
 
-${O ? `${O}
+${M ? `${M}
 
-` : ""}${M ? `${M}
+` : ""}${F ? `${F}
 
-` : ""}${C}export function ${y}(${i}) {
+` : ""}${h}export function ${P}(${g}) {
 ${e.length > 0 ? e.join(`
 `) : ""}
   return (
     <EncoreApp
-      appId="${U}"
-      pageId="${I}"
+      appId="${k}"
+      pageId="${x}"
       ${d ? `appDefinition={productionData.app}
       pageDefinition={productionData.page}
       componentCode={productionData.componentCode}` : ""}
       data={{
-${j.join(`
+${S.join(`
 `)}
-      }}${F}${t}${f}
+      }}${B}${C}${i}
     />
   );
 }
 
-export default ${y};
+export default ${P};
+
+export const PageMeta = {
+  width: ${I?.width ?? "undefined"},
+  height: ${I?.height ?? "undefined"},
+  aspectRatio: ${I?.aspectRatio ?? "undefined"},
+};
 `;
 }
-function L(U, I, y, b, m, c, g, P, h, d, E) {
-  const N = [], a = [], r = [], u = [];
-  g.forEach((e) => {
-    N.push(`### \`${e.propName}\` (${e.propType}, optional)
-
-${e.name} (${e.type}) - Component ID: ${e.id}`);
-  }), c.forEach((e) => {
-    if (e.arrayContainer && e.arrayContainer.components.length > 0) {
-      const i = e.arrayContainer, C = i.components.map((o) => `- \`${o.propName}\` (${o.propType}): ${o.name} (${o.type}) - Component ID: ${o.id}`).join(`
+function L(k, x, P, E, u, c, N, v, l, d, I) {
+  const y = [], a = [], p = [], f = [];
+  N.forEach((t) => {
+    y.push(`### \`${t.propName}\` (${t.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.push(`### \`${i.propName}\` (${i.propName[0].toUpperCase()}${i.propName.slice(
+      y.push(`### \`${i.propName}\` (${i.propName[0].toUpperCase()}${i.propName.slice(
         1
       )}Item[])
 
@@ -233,24 +239,24 @@ Array of items for "${i.name}" container (ID: ${i.id})
 
 **Properties:**
 
-${C}`);
+${g}`);
     }
-    const t = l(e.name || "container"), f = `${t[0].toUpperCase()}${t.slice(
+    const e = m(t.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
       1
     )}IndexChange`;
-    a.push(`### \`${t}CurrentIndex\` (number, optional)
+    a.push(`### \`${e}CurrentIndex\` (number, optional)
 
-Controls the currently visible slide/index for the "${e.name}" container (ID: ${e.id}).
+Controls the currently visible slide/index for the "${t.name}" container (ID: ${t.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.
 
-### \`on${f}\` ((index: number) => void, optional)
+### \`on${C}\` ((index: number) => void, optional)
 
 Callback fired when the user navigates to a different slide. Called with the new slide index (0-based).
 
 This event fires whenever the slide changes, whether by user interaction, automatic advancement, or programmatic control.`);
   });
-  const k = N.length > 0 ? N.join(`
+  const D = y.length > 0 ? y.join(`
 
 `) : "This component currently has no data-bound props.", A = a.length > 0 ? `## Control Props
 
@@ -258,84 +264,84 @@ These props allow you to imperatively control repeating containers (sliders, lis
 
 ${a.join(`
 
-`)}` : "", x = [];
-  P.forEach((e) => {
-    const t = l(e.groupName), f = `on${t[0].toUpperCase()}${t.slice(
+`)}` : "", w = [];
+  v.forEach((t) => {
+    const e = m(t.groupName), C = `on${e[0].toUpperCase()}${e.slice(
       1
-    )}Change`, i = e.elements.map((C) => `- "${C.name}"`).join(`
+    )}Change`, i = t.elements.map((g) => `- "${g.name}"`).join(`
 `);
-    x.push(`### \`${t}\` (string, optional)
+    w.push(`### \`${e}\` (string, optional)
 
-Sets which element is active in the "${e.groupName}" input group (type: ${e.groupType}).
+Sets which element is active in the "${t.groupName}" input group (type: ${t.groupType}).
 
 **Available elements:**
 ${i}
 
-### \`${f}\` ((value: string) => void, optional)
+### \`${C}\` ((value: string) => void, optional)
 
-Callback fired when the user selects a different element in the "${e.groupName}" input group. Called with the name of the selected element.`);
+Callback fired when the user selects a different element in the "${t.groupName}" input group. Called with the name of the selected element.`);
   });
-  const z = x.length > 0 ? `## Input Group Props
+  const z = 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.
 
-${x.join(`
+${w.join(`
 
-`)}` : "", D = [];
-  h.forEach((e) => {
-    const t = l(e.formName), f = `on${t[0].toUpperCase()}${t.slice(
+`)}` : "", j = [];
+  l.forEach((t) => {
+    const e = m(t.formName), C = `on${e[0].toUpperCase()}${e.slice(
       1
-    )}Submit`, i = `${t[0].toUpperCase()}${t.slice(
+    )}Submit`, i = `${e[0].toUpperCase()}${e.slice(
       1
-    )}FormData`, C = e.inputs.map((o) => {
-      const n = o.propName, p = G(o.type, o.name);
-      return `- \`${n}\` (${p}) - ${o.name}`;
+    )}FormData`, g = t.inputs.map((h) => {
+      const o = h.propName, n = W(h.type, h.name);
+      return `- \`${o}\` (${n}) - ${h.name}`;
     }).join(`
 `);
-    D.push(`### \`${f}\` ((formData: ${i}) => void, optional)
+    j.push(`### \`${C}\` ((formData: ${i}) => void, optional)
 
-Callback fired when the "${e.formName}" form is submitted. Called with a typed object containing all form input values with human-readable property names.
+Callback fired when the "${t.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} {
-${e.inputs.map((o) => {
-      const n = o.propName, p = G(o.type, o.name);
-      return `  ${n}: ${p};`;
+${t.inputs.map((h) => {
+      const o = h.propName, n = W(h.type, h.name);
+      return `  ${o}: ${n};`;
     }).join(`
 `)}
 }
 \`\`\`
 
 **Form inputs:**
-${C}`);
+${g}`);
   });
-  const O = D.length > 0 ? `## Form Submission Props
+  const O = j.length > 0 ? `## Form Submission Props
 
 These props allow you to handle form submissions and access form input values.
 
-${D.join(`
+${j.join(`
 
 `)}` : "";
-  d.forEach((e) => {
-    const t = e.propName, i = `on${t[0].toUpperCase() + t.slice(1)}Change`, C = `${t}Options`;
-    r.push(`### \`${t}\` (string, optional)
+  d.forEach((t) => {
+    const e = t.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Change`, g = `${e}Options`;
+    p.push(`### \`${e}\` (string, optional)
 
-Controls the selected value of the "${e.name}" dropdown (Component ID: ${e.id}).
+Controls the selected value of the "${t.name}" dropdown (Component ID: ${t.id}).
 
 When provided, the select input operates in controlled mode - the parent component controls the current value.
 
-### \`${C}\` (Array<string | { value: string; label: string }>, optional)
+### \`${g}\` (Array<string | { value: string; label: string }>, optional)
 
-Sets the available options for the "${e.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 "${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.
 
 **Example:**
 \`\`\`tsx
 // Simple string array
-${C}={["Option 1", "Option 2", "Option 3"]}
+${g}={["Option 1", "Option 2", "Option 3"]}
 
 // Object array with separate values and labels
-${C}={[
+${g}={[
   { value: "opt1", label: "Option 1" },
   { value: "opt2", label: "Option 2" },
 ]}
@@ -343,34 +349,34 @@ ${C}={[
 
 ### \`${i}\` ((value: string) => void, optional)
 
-Callback fired when the user selects a different option in the "${e.name}" dropdown. Called with the selected value.`);
+Callback fired when the user selects a different option in the "${t.name}" dropdown. Called with the selected value.`);
   });
-  const M = r.length > 0 ? `## Select Input Props
+  const M = p.length > 0 ? `## Select Input Props
 
 These props allow you to control select/dropdown inputs and respond to value changes.
 
-${r.join(`
+${p.join(`
 
 `)}` : "";
-  E.forEach((e) => {
-    const t = e.propName, i = `on${t[0].toUpperCase() + t.slice(1)}Click`;
-    u.push(`### \`${i}\` (() => void, optional)
+  I.forEach((t) => {
+    const e = t.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Click`;
+    f.push(`### \`${i}\` (() => void, optional)
 
-Callback fired when the "${e.name}" button is clicked (Component ID: ${e.id}).
+Callback fired when the "${t.name}" button is clicked (Component ID: ${t.id}).
 
-Action type: \`${e.actionType}\``);
+Action type: \`${t.actionType}\``);
   });
-  const j = u.length > 0 ? `## Action Button Props
+  const F = f.length > 0 ? `## Action Button Props
 
 These props allow you to respond to button clicks and other user interactions.
 
-${u.join(`
+${f.join(`
 
-`)}` : "", T = `## Props
+`)}` : "", S = `## Props
 
 ### Data Props
 
-${k}
+${D}
 
 ${A}
 
@@ -380,31 +386,31 @@ ${O}
 
 ${M}
 
-${j}`, F = c.length > 0 && c[0].arrayContainer ? `<${m}
+${F}`, U = c.length > 0 && c[0].arrayContainer ? `<${u}
   ${c.map(
-    (e) => e.arrayContainer ? `${e.arrayContainer.propName}={[
+    (t) => t.arrayContainer ? `${t.arrayContainer.propName}={[
     {
-      ${e.arrayContainer?.components.map(
-      (t) => `${t.propName}: "${t.type === "component:image" ? "https://example.com/image.jpg" : "Example value"}"`
+      ${t.arrayContainer?.components.map(
+      (e) => `${e.propName}: "${e.type === "component:image" ? "https://example.com/image.jpg" : "Example value"}"`
     ).join(`,
       `)}
     }
   ]}` : ""
   ).filter(Boolean).join(`
   `)}
-/>` : `<${m} />`;
-  let w = "";
+/>` : `<${u} />`;
+  let B = "";
   if (c.length > 0 && c[0]) {
-    const e = c[0], t = l(e.name || "container"), f = `${t[0].toUpperCase()}${t.slice(
+    const t = c[0], e = m(t.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
       1
     )}IndexChange`;
-    w = `## Controlling Slides
+    B = `## Controlling Slides
 
 You can imperatively control which slide is displayed and listen for slide changes:
 
 \`\`\`tsx
 import { useState } from "react";
-import { ${m} } from "./${m}";
+import { ${u} } from "./${u}";
 
 function MyComponent() {
   const [currentSlide, setCurrentSlide] = useState(0);
@@ -417,39 +423,39 @@ function MyComponent() {
       <button onClick={() => setCurrentSlide((prev) => prev + 1)}>
         Next
       </button>
-      <${m}
+      <${u}
         ${c.map(
       (i) => i.arrayContainer ? `${i.arrayContainer.propName}={[/* array of items */]}` : ""
     ).filter(Boolean).join(`
         `)}
-        ${t}CurrentIndex={currentSlide}
-        on${f}={(index) => setCurrentSlide(index)}
+        ${e}CurrentIndex={currentSlide}
+        on${C}={(index) => setCurrentSlide(index)}
       />
     </>
   );
 }
 \`\`\``;
   }
-  return `# ${m}
+  return `# ${u}
 
 Encore App Wrapper Component
 
-This component wraps the Encore Studio app **"${y}"** (App ID: \`${U}\`) for the page **"${b}"** (Page ID: \`${I}\`).
+This component wraps the Encore Studio app **"${P}"** (App ID: \`${k}\`) 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.
 
-${T}
+${S}
 
 ## Usage
 
 \`\`\`tsx
-import { ${m} } from "./${m}";
+import { ${u} } from "./${u}";
 
 function MyComponent() {
   return (
-    <${m}
+    <${u}
       ${c.map(
-    (e) => e.arrayContainer ? `${e.arrayContainer.propName}={[/* array of items */]}` : ""
+    (t) => t.arrayContainer ? `${t.arrayContainer.propName}={[/* array of items */]}` : ""
   ).filter(Boolean).join(`
       `)}
     />
@@ -460,52 +466,52 @@ function MyComponent() {
 ## Example
 
 \`\`\`tsx
-${F}
+${U}
 \`\`\`
 
-${w}
+${B}
 `;
 }
-function R(U, I, y, b, m, c, g, P) {
-  const h = [], d = [], E = l(I);
-  b.forEach((a) => {
-    h.push(a.propName);
-  }), m.forEach((a) => {
-    const r = l(a.groupName);
-    h.push(r), d.push(`on${r[0].toUpperCase()}${r.slice(1)}Change`);
+function Y(k, x, P, E, u, c, N, v) {
+  const l = [], d = [], 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`);
   }), c.forEach((a) => {
-    const r = l(a.formName);
+    const p = m(a.formName);
     d.push(
-      `on${r[0].toUpperCase()}${r.slice(1)}Submit`
+      `on${p[0].toUpperCase()}${p.slice(1)}Submit`
     );
-  }), g.forEach((a) => {
-    const r = a.propName, u = r[0].toUpperCase() + r.slice(1);
-    h.push(r), h.push(`${r}Options`), d.push(`on${u}Change`);
+  }), 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`);
+  }), v.forEach((a) => {
+    const p = a.propName, f = p[0].toUpperCase() + p.slice(1);
+    d.push(`on${f}Click`);
   }), P.forEach((a) => {
-    const r = a.propName, u = r[0].toUpperCase() + r.slice(1);
-    d.push(`on${u}Click`);
-  }), y.forEach((a) => {
-    a.arrayContainer && a.arrayContainer.components.length > 0 && h.push(a.arrayContainer.propName);
-    const r = l(a.name || "container"), u = `${r[0].toUpperCase()}${r.slice(
+    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`;
-    h.push(`${r}CurrentIndex`), d.push(`on${u}`);
+    l.push(`${p}CurrentIndex`), d.push(`on${f}`);
   });
-  const N = `<${E}
-  ${h.map((a) => `${a}={${a}}`).join(`
+  const y = `<${I}
+  ${l.map((a) => `${a}={${a}}`).join(`
   `)}
   ${d.map((a) => `${a}={${a}}`).join(`
   `)}
 />`;
   return {
-    props: h,
+    props: l,
     events: d,
-    jsx: N
+    jsx: y
   };
 }
 export {
   K as generateComponentCode,
-  R as generateComponentMetadata,
+  Y as generateComponentMetadata,
   L as generateReadme
 };
 //# sourceMappingURL=generator.js.map