@bravostudioai/react 0.1.35 → 0.1.36

package/dist/codegen/generator.js

@@ -1,219 +1,228 @@
-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 t = m(o.groupName);
-    p.push(`  ${t}?: string;`), p.push(
+import { sanitizePropName as u, getComponentPropType as H, getComponentPropName as L } from "./parser.js";
+function _(O, w, v, E, $, h, y, b, m, d = "dynamic", I) {
+  const P = [], p = [], r = [], N = [], D = [], M = [];
+  $.forEach((e) => {
+    P.push(`  ${e.propName}?: ${e.propType};`);
+  }), h.forEach((e) => {
+    const t = u(e.groupName);
+    r.push(`  ${t}?: string;`), r.push(
       `  on${t[0].toUpperCase()}${t.slice(
         1
       )}Change?: (value: string) => void;`
     );
   });
-  const w = [];
-  N.forEach((o) => {
-    const t = m(o.formName), s = `${t[0].toUpperCase()}${t.slice(
+  const j = [];
+  y.forEach((e) => {
+    const t = u(e.formName), i = `${t[0].toUpperCase()}${t.slice(
       1
-    )}FormData`, r = [];
-    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(`
+    )}FormData`, s = [];
+    e.inputs.forEach((f) => {
+      const U = f.propName, C = H(f.type, f.name);
+      s.push(`  ${U}: ${C};`);
+    }), j.push(`export interface ${i} {
+${s.join(`
 `)}
-}`), f.push(
+}`), N.push(
       `  on${t[0].toUpperCase()}${t.slice(
         1
-      )}Submit?: (formData: ${s}) => void;`
+      )}Submit?: (formData: ${i}) => void;`
     );
-  }), v.forEach((o) => {
-    const t = o.propName, s = t[0].toUpperCase() + t.slice(1);
+  }), b.forEach((e) => {
+    const t = e.propName, i = 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;`
+      `  on${i}Change?: (value: string) => void;`
     );
-  }), l.forEach((o) => {
-    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(
+  }), m.forEach((e) => {
+    const t = e.propName, i = t[0].toUpperCase() + t.slice(1);
+    M.push(`  on${i}Click?: () => void;`);
+  }), E.forEach((e) => {
+    if (e.arrayContainer && e.arrayContainer.components.length > 0) {
+      const i = e.arrayContainer, s = `${i.propName[0].toUpperCase()}${i.propName.slice(
         1
       )}Item`;
-      y.push(`  ${s.propName}: ${r}[];`);
+      P.push(`  ${i.propName}: ${s}[];`);
     }
-    const t = m(o.name || "container");
-    a.push(`  ${t}CurrentIndex?: number;`), a.push(
+    const t = u(e.name || "container");
+    p.push(`  ${t}CurrentIndex?: number;`), p.push(
       `  on${t[0].toUpperCase()}${t.slice(
         1
       )}IndexChange?: (index: number) => void;`
     );
   });
-  const O = [
-    ...y,
-    ...a,
+  const B = [
+    ...P,
     ...p,
-    ...f,
+    ...r,
+    ...N,
     ...D,
-    ...z
-  ], j = O.length > 0, M = j ? `export interface ${P}Props {
-${O.join(`
+    ...M
+  ], S = B.length > 0, F = S ? `export interface ${v}Props {
+${B.join(`
 `)}
-}` : "", 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(
+}` : "", G = E.filter((e) => e.arrayContainer && e.arrayContainer.components.length > 0).map((e) => {
+    const t = e.arrayContainer, i = `${t.propName[0].toUpperCase()}${t.propName.slice(
       1
-    )}Item`, r = t.components.map((d) => `  ${d.propName}: ${d.propType};`).join(`
+    )}Item`, s = t.components.map((f) => `  ${f.propName}: ${f.propType};`).join(`
 `);
-    return `export interface ${s} {
-${r}
+    return `export interface ${i} {
+${s}
 }`;
   }).join(`
 
-`), F = w.join(`
-
-`), S = [], k = [];
-  u.forEach((o) => {
-    const t = H(o.type);
-    S.push(`    // ${o.name}
-    ...(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) && { 
-      "${o.id}": { 
-        ...(props.${o.propName} !== undefined && { value: props.${o.propName} }),
-        ...(props.${o.propName}Options !== undefined && { options: props.${o.propName}Options }),
+`), W = j.join(`
+
+`), x = [], k = [], T = [];
+  $.forEach((e) => {
+    const t = L(e.type);
+    e.type === "component:webview" ? x.push(`    // ${e.name}
+    ...(props.${e.propName} !== undefined && { "${e.id}": { params: { url: props.${e.propName} } } as any }),`) : e.type === "component:embed" ? k.push(`    // ${e.name}
+    ...(props.${e.propName} !== undefined && { "${e.id}": props.${e.propName} }),`) : x.push(`    // ${e.name}
+    ...(props.${e.propName} !== undefined && { "${e.id}": { ${t}: props.${e.propName} } as any }),`);
+  }), b.forEach((e) => {
+    x.push(`    // ${e.name}
+    ...((props.${e.propName} !== undefined || props.${e.propName}Options !== undefined) && { 
+      "${e.id}": { 
+        ...(props.${e.propName} !== undefined && { value: props.${e.propName} }),
+        ...(props.${e.propName}Options !== undefined && { options: props.${e.propName}Options }),
       } as any 
     }),`);
-  }), E.forEach((o) => {
-    if (o.arrayContainer && o.arrayContainer.components.length > 0) {
-      const d = o.arrayContainer, U = d.components.map((b) => {
-        const W = H(b.type);
-        return `        // ${b.name}
-        "${b.id}": {
-          ${W}: item.${b.propName},
+  }), E.forEach((e) => {
+    if (e.arrayContainer && e.arrayContainer.components.length > 0) {
+      const f = e.arrayContainer, U = f.components.map((C) => {
+        const R = L(C.type);
+        return C.type === "component:webview" ? `        // ${C.name}
+        "${C.id}": {
+          params: { url: item.${C.propName} },
+        }` : `        // ${C.name}
+        "${C.id}": {
+          ${R}: item.${C.propName},
         }`;
       }).join(`,
 `);
-      S.push(`    // ${d.name}
-    "${d.id}": props.${d.propName}.map((item) => ({
+      x.push(`    // ${f.name}
+    "${f.id}": props.${f.propName}.map((item) => ({
 ${U}
       })),`);
     }
-    const t = m(o.name || "container"), s = `${t[0].toUpperCase()}${t.slice(
+    const t = u(e.name || "container"), i = `${t[0].toUpperCase()}${t.slice(
       1
-    )}IndexChange`, r = [];
-    o.id && (r.push(`      // ${o.name}`), r.push(`      "${o.id}": {`), r.push(
+    )}IndexChange`, s = [];
+    e.id && (s.push(`      // ${e.name}`), s.push(`      "${e.id}": {`), s.push(
       `        currentIndex: props.${t}CurrentIndex,`
-    ), r.push(`        onIndexChange: props.on${s},`), r.push("      }")), r.length > 0 && k.push(r.join(`
+    ), s.push(`        onIndexChange: props.on${i},`), s.push("      }")), s.length > 0 && T.push(s.join(`
 `));
   });
-  const G = k.length > 0 ? `
+  const n = T.length > 0 ? `
       repeatingContainerControls={{
-${k.join(`,
+${T.join(`,
 `)}
-      }}` : "", 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(
+      }}` : "", a = [], o = [];
+  (h.length > 0 || y.length > 0 || b.length > 0 || m.length > 0) && (o.push("  const handleAction = (payload: any) => {"), o.push("    const { action } = payload?.bravo || {};"), o.push(""), b.length > 0 && (o.push("    // Handle select input changes"), o.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 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(
+  ), o.push("      const nodeId = action?.nodeId;"), o.push("      const value = action?.params?.value;"), o.push(""), b.forEach((e) => {
+    const t = e.propName, s = `on${t[0].toUpperCase() + t.slice(1)}Change`;
+    o.push(`      // ${e.name}`), o.push(
+      `      if (nodeId === "${e.id}" && props.${s}) {`
+    ), o.push(`        props.${s}(value);`), o.push("        return;"), o.push("      }");
+  }), o.push("    }"), o.push("")), m.length > 0 && (o.push("    // Handle button clicks"), o.push(
     '    if (action?.action === "remote" || action?.action === "tap" || action?.action === "link") {'
-  ), e.push("      const nodeId = action?.nodeId;"), e.push(""), l.forEach((o) => {
-    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("      }");
-  }), e.push("    }"), e.push("")), c.length > 0 && (e.push(
+  ), o.push("      const nodeId = action?.nodeId;"), o.push(""), m.forEach((e) => {
+    const t = e.propName, s = `on${t[0].toUpperCase() + t.slice(1)}Click`;
+    o.push(`      // ${e.name}`), o.push(
+      `      if (nodeId === "${e.id}" && props.${s}) {`
+    ), o.push(`        props.${s}();`), o.push("        return;"), o.push("      }");
+  }), o.push("    }"), o.push("")), h.length > 0 && (o.push(
     '    if (action?.action === "input-group-change") {'
-  ), e.push(
+  ), o.push(
     "      const { groupName, value } = action.params;"
-  ), c.forEach((o) => {
-    const t = m(o.groupName), s = `on${t[0].toUpperCase()}${t.slice(
+  ), h.forEach((e) => {
+    const t = u(e.groupName), i = `on${t[0].toUpperCase()}${t.slice(
       1
     )}Change`;
-    e.push(
-      `      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, t) => {
-    const s = m(o.formName), r = `on${s[0].toUpperCase()}${s.slice(
+    o.push(
+      `      if (groupName === "${e.groupName}" && props.${i}) {`
+    ), o.push(`        props.${i}(value);`), o.push("        return;"), o.push("      }");
+  }), o.push("    }"), o.push("")), y.length > 0 && (o.push('    if (action?.action === "submit") {'), o.push("      // Get form inputs from Encore state"), o.push(
+    `      const formInputs = useEncoreState.getState().formInputs["${w}"] || {};`
+  ), o.push("      const submitNodeId = action?.nodeId;"), o.push(""), y.forEach((e, t) => {
+    const i = u(e.formName), s = `on${i[0].toUpperCase()}${i.slice(
       1
     )}Submit`;
-    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 d = `${s[0].toUpperCase()}${s.slice(
+    t > 0 && o.push(""), o.push(
+      `      // Form: ${e.formName} (${e.formId})`
+    ), e.submitButtonId ? o.push(
+      `      if (submitNodeId === "${e.submitButtonId}" && props.${s}) {`
+    ) : y.length === 1 ? o.push(`      if (props.${s}) {`) : o.push(`      if (props.${s}) {`), o.push("        // Extract form inputs for this form");
+    const f = `${i[0].toUpperCase()}${i.slice(
       1
     )}FormData`;
-    e.push(
-      `        const formData: ${d} = {`
+    o.push(
+      `        const formData: ${f} = {`
     );
     const U = [];
-    o.inputs.forEach((b) => {
-      const W = b.propName;
+    e.inputs.forEach((C) => {
+      const R = C.propName;
       U.push(
-        `          ${W}: formInputs["${b.id}"]`
+        `          ${R}: formInputs["${C.id}"]`
       );
-    }), e.push(U.join(`,
-`)), e.push("        };"), e.push(`        props.${r}(formData);`), e.push(
+    }), o.push(U.join(`,
+`)), o.push("        };"), o.push(`        props.${s}(formData);`), o.push(
       "        // Note: Default form submission will still proceed after callback"
-    ), e.push("      }");
-  }), e.push("    }")), e.push("  };")), c.forEach((o) => {
-    const t = m(o.groupName);
-    n.push(
+    ), o.push("      }");
+  }), o.push("    }")), o.push("  };")), h.forEach((e) => {
+    const t = u(e.groupName);
+    a.push(
       `    ...(props.${t} !== undefined && { ${t}: props.${t} }),`
     );
   });
-  const C = n.length > 0 ? `
+  const c = a.length > 0 ? `
       inputGroups={{
-${n.join(`
+${a.join(`
+`)}
+      }}` : "", g = o.length > 0 ? `
+      onAction={handleAction}` : "", l = k.length > 0 ? `
+      embeds={{
+${k.join(`
 `)}
-      }}` : "", i = e.length > 0 ? `
-      onAction={handleAction}` : "", g = j ? `props: ${P}Props` : "", h = M ? `${M}
+      }}` : "", A = S ? `props: ${v}Props` : "", z = F ? `${F}
 
-` : "", T = $ === "production" || $ === "optimistic";
+` : "", K = d === "production" || d === "optimistic";
   return `/**
- * ${P}
+ * ${v}
  * 
  * Wrapper component for Encore Studio app.
  * See README.md for detailed documentation.
  */
 
-import { EncoreApp${N.length > 0 ? ", useEncoreState" : ""} } from "@bravostudioai/react";
-${T ? 'import productionData from "./data.json";' : ""}
+import { EncoreApp${y.length > 0 ? ", useEncoreState" : ""} } from "@bravostudioai/react";
+${K ? 'import productionData from "./data.json";' : ""}
 
-${B ? `${B}
+${G ? `${G}
 
-` : ""}${F ? `${F}
+` : ""}${W ? `${W}
 
-` : ""}${h}export function ${P}(${g}) {
-${e.length > 0 ? e.join(`
+` : ""}${z}export function ${v}(${A}) {
+${o.length > 0 ? o.join(`
 `) : ""}
   return (
     <EncoreApp
-      appId="${A}"
-      pageId="${x}"
-      mode="${$}"
-      ${T ? `appDefinition={productionData.app}
+      appId="${O}"
+      pageId="${w}"
+      mode="${d}"
+      ${K ? `appDefinition={productionData.app}
       pageDefinition={productionData.page}
       componentCode={productionData.componentCode}` : ""}
       data={{
-${S.join(`
+${x.join(`
 `)}
-      }}${G}${C}${i}
+      }}${n}${c}${g}${l}
     />
   );
 }
 
-export default ${P};
+export default ${v};
 
 export const PageMeta = {
   width: ${I?.width ?? "undefined"},
@@ -222,93 +231,93 @@ export const PageMeta = {
 };
 `;
 }
-function Y(A, x, P, E, u, c, N, v, l, $, I) {
-  const y = [], a = [], p = [], f = [];
-  N.forEach((n) => {
-    y.push(`### \`${n.propName}\` (${n.propType}, optional)
+function q(O, w, v, E, $, h, y, b, m, d, I) {
+  const P = [], p = [], r = [], N = [];
+  y.forEach((n) => {
+    P.push(`### \`${n.propName}\` (${n.propType}, optional)
 
 ${n.name} (${n.type}) - Component ID: ${n.id}`);
-  }), c.forEach((n) => {
+  }), h.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(`
+      const c = n.arrayContainer, g = c.components.map((l) => `- \`${l.propName}\` (${l.propType}): ${l.name} (${l.type}) - Component ID: ${l.id}`).join(`
 `);
-      y.push(`### \`${i.propName}\` (${i.propName[0].toUpperCase()}${i.propName.slice(
+      P.push(`### \`${c.propName}\` (${c.propName[0].toUpperCase()}${c.propName.slice(
         1
       )}Item[])
 
-Array of items for "${i.name}" container (ID: ${i.id})
+Array of items for "${c.name}" container (ID: ${c.id})
 
 **Properties:**
 
 ${g}`);
     }
-    const e = m(n.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
+    const a = u(n.name || "container"), o = `${a[0].toUpperCase()}${a.slice(
       1
     )}IndexChange`;
-    a.push(`### \`${e}CurrentIndex\` (number, optional)
+    p.push(`### \`${a}CurrentIndex\` (number, optional)
 
 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.
 
-### \`on${C}\` ((index: number) => void, optional)
+### \`on${o}\` ((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 D = y.length > 0 ? y.join(`
+  const D = P.length > 0 ? P.join(`
 
-`) : "This component currently has no data-bound props.", z = a.length > 0 ? `## Control Props
+`) : "This component currently has no data-bound props.", M = p.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(`
+${p.join(`
 
-`)}` : "", w = [];
-  v.forEach((n) => {
-    const e = m(n.groupName), C = `on${e[0].toUpperCase()}${e.slice(
+`)}` : "", j = [];
+  b.forEach((n) => {
+    const a = u(n.groupName), o = `on${a[0].toUpperCase()}${a.slice(
       1
-    )}Change`, i = n.elements.map((g) => `- "${g.name}"`).join(`
+    )}Change`, c = n.elements.map((g) => `- "${g.name}"`).join(`
 `);
-    w.push(`### \`${e}\` (string, optional)
+    j.push(`### \`${a}\` (string, optional)
 
 Sets which element is active in the "${n.groupName}" input group (type: ${n.groupType}).
 
 **Available elements:**
-${i}
+${c}
 
-### \`${C}\` ((value: string) => void, optional)
+### \`${o}\` ((value: string) => void, optional)
 
 Callback fired when the user selects a different element in the "${n.groupName}" input group. Called with the name of the selected element.`);
   });
-  const O = w.length > 0 ? `## Input Group Props
+  const B = j.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.join(`
 
-`)}` : "", j = [];
-  l.forEach((n) => {
-    const e = m(n.formName), C = `on${e[0].toUpperCase()}${e.slice(
+`)}` : "", S = [];
+  m.forEach((n) => {
+    const a = u(n.formName), o = `on${a[0].toUpperCase()}${a.slice(
       1
-    )}Submit`, i = `${e[0].toUpperCase()}${e.slice(
+    )}Submit`, c = `${a[0].toUpperCase()}${a.slice(
       1
-    )}FormData`, g = n.inputs.map((h) => {
-      const T = h.propName, o = R(h.type, h.name);
-      return `- \`${T}\` (${o}) - ${h.name}`;
+    )}FormData`, g = n.inputs.map((l) => {
+      const A = l.propName, z = H(l.type, l.name);
+      return `- \`${A}\` (${z}) - ${l.name}`;
     }).join(`
 `);
-    j.push(`### \`${C}\` ((formData: ${i}) => void, optional)
+    S.push(`### \`${o}\` ((formData: ${c}) => void, optional)
 
 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} {
-${n.inputs.map((h) => {
-      const T = h.propName, o = R(h.type, h.name);
-      return `  ${T}: ${o};`;
+interface ${c} {
+${n.inputs.map((l) => {
+      const A = l.propName, z = H(l.type, l.name);
+      return `  ${A}: ${z};`;
     }).join(`
 `)}
 }
@@ -317,16 +326,16 @@ ${n.inputs.map((h) => {
 **Form inputs:**
 ${g}`);
   });
-  const M = j.length > 0 ? `## Form Submission Props
+  const F = S.length > 0 ? `## Form Submission Props
 
 These props allow you to handle form submissions and access form input values.
 
-${j.join(`
+${S.join(`
 
 `)}` : "";
-  $.forEach((n) => {
-    const e = n.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Change`, g = `${e}Options`;
-    p.push(`### \`${e}\` (string, optional)
+  d.forEach((n) => {
+    const a = n.propName, c = `on${a[0].toUpperCase() + a.slice(1)}Change`, g = `${a}Options`;
+    r.push(`### \`${a}\` (string, optional)
 
 Controls the selected value of the "${n.name}" dropdown (Component ID: ${n.id}).
 
@@ -348,70 +357,70 @@ ${g}={[
 ]}
 \`\`\`
 
-### \`${i}\` ((value: string) => void, optional)
+### \`${c}\` ((value: string) => void, optional)
 
 Callback fired when the user selects a different option in the "${n.name}" dropdown. Called with the selected value.`);
   });
-  const B = p.length > 0 ? `## Select Input Props
+  const G = r.length > 0 ? `## Select Input Props
 
 These props allow you to control select/dropdown inputs and respond to value changes.
 
-${p.join(`
+${r.join(`
 
 `)}` : "";
   I.forEach((n) => {
-    const e = n.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Click`;
-    f.push(`### \`${i}\` (() => void, optional)
+    const a = n.propName, c = `on${a[0].toUpperCase() + a.slice(1)}Click`;
+    N.push(`### \`${c}\` (() => void, optional)
 
 Callback fired when the "${n.name}" button is clicked (Component ID: ${n.id}).
 
 Action type: \`${n.actionType}\``);
   });
-  const F = f.length > 0 ? `## Action Button Props
+  const W = N.length > 0 ? `## Action Button Props
 
 These props allow you to respond to button clicks and other user interactions.
 
-${f.join(`
+${N.join(`
 
-`)}` : "", S = `## Props
+`)}` : "", x = `## Props
 
 ### Data Props
 
 ${D}
 
-${z}
-
-${O}
-
 ${M}
 
 ${B}
 
-${F}`, k = c.length > 0 && c[0].arrayContainer ? `<${u}
-  ${c.map(
+${F}
+
+${G}
+
+${W}`, k = h.length > 0 && h[0].arrayContainer ? `<${$}
+  ${h.map(
     (n) => n.arrayContainer ? `${n.arrayContainer.propName}={[
     {
       ${n.arrayContainer?.components.map(
-      (e) => `${e.propName}: "${e.type === "component:image" ? "https://example.com/image.jpg" : "Example value"}"`
+      (a) => `${a.propName}: "${a.type === "component:image" ? "https://example.com/image.jpg" : "Example value"}"`
     ).join(`,
       `)}
     }
   ]}` : ""
   ).filter(Boolean).join(`
   `)}
-/>` : `<${u} />`;
-  let G = "";
-  if (c.length > 0 && c[0]) {
-    const n = c[0], e = m(n.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
+/>` : `<${$} />`;
+  let T = "";
+  if (h.length > 0 && h[0]) {
+    const n = h[0], a = u(n.name || "container"), o = `${a[0].toUpperCase()}${a.slice(
       1
     )}IndexChange`;
-    G = `## Controlling Slides
+    T = `## Controlling Slides
 
 You can imperatively control which slide is displayed and listen for slide changes:
 
 \`\`\`tsx
 import { useState } from "react";
-import { ${u} } from "./${u}";
+import { ${$} } from "./${$}";
 
 function MyComponent() {
   const [currentSlide, setCurrentSlide] = useState(0);
@@ -424,38 +433,38 @@ function MyComponent() {
       <button onClick={() => setCurrentSlide((prev) => prev + 1)}>
         Next
       </button>
-      <${u}
-        ${c.map(
-      (i) => i.arrayContainer ? `${i.arrayContainer.propName}={[/* array of items */]}` : ""
+      <${$}
+        ${h.map(
+      (c) => c.arrayContainer ? `${c.arrayContainer.propName}={[/* array of items */]}` : ""
     ).filter(Boolean).join(`
         `)}
-        ${e}CurrentIndex={currentSlide}
-        on${C}={(index) => setCurrentSlide(index)}
+        ${a}CurrentIndex={currentSlide}
+        on${o}={(index) => setCurrentSlide(index)}
       />
     </>
   );
 }
 \`\`\``;
   }
-  return `# ${u}
+  return `# ${$}
 
 Encore App Wrapper Component
 
-This component wraps the Encore Studio app **"${P}"** (App ID: \`${A}\`) for the page **"${E}"** (Page ID: \`${x}\`).
+This component wraps the Encore Studio app **"${v}"** (App ID: \`${O}\`) for the page **"${E}"** (Page ID: \`${w}\`).
 
 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.
 
-${S}
+${x}
 
 ## Usage
 
 \`\`\`tsx
-import { ${u} } from "./${u}";
+import { ${$} } from "./${$}";
 
 function MyComponent() {
   return (
-    <${u}
-      ${c.map(
+    <${$}
+      ${h.map(
     (n) => n.arrayContainer ? `${n.arrayContainer.propName}={[/* array of items */]}` : ""
   ).filter(Boolean).join(`
       `)}
@@ -470,49 +479,49 @@ function MyComponent() {
 ${k}
 \`\`\`
 
-${G}
+${T}
 `;
 }
-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), $.push(`on${p[0].toUpperCase()}${p.slice(1)}Change`);
-  }), c.forEach((a) => {
-    const p = m(a.formName);
-    $.push(
-      `on${p[0].toUpperCase()}${p.slice(1)}Submit`
+function J(O, w, v, E, $, h, y, b) {
+  const m = [], d = [], I = u(w);
+  E.forEach((p) => {
+    m.push(p.propName);
+  }), $.forEach((p) => {
+    const r = u(p.groupName);
+    m.push(r), d.push(`on${r[0].toUpperCase()}${r.slice(1)}Change`);
+  }), h.forEach((p) => {
+    const r = u(p.formName);
+    d.push(
+      `on${r[0].toUpperCase()}${r.slice(1)}Submit`
     );
-  }), N.forEach((a) => {
-    const p = a.propName, f = p[0].toUpperCase() + p.slice(1);
-    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);
-    $.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(
+  }), y.forEach((p) => {
+    const r = p.propName, N = r[0].toUpperCase() + r.slice(1);
+    m.push(r), m.push(`${r}Options`), d.push(`on${N}Change`);
+  }), b.forEach((p) => {
+    const r = p.propName, N = r[0].toUpperCase() + r.slice(1);
+    d.push(`on${N}Click`);
+  }), v.forEach((p) => {
+    p.arrayContainer && p.arrayContainer.components.length > 0 && m.push(p.arrayContainer.propName);
+    const r = u(p.name || "container"), N = `${r[0].toUpperCase()}${r.slice(
       1
     )}IndexChange`;
-    l.push(`${p}CurrentIndex`), $.push(`on${f}`);
+    m.push(`${r}CurrentIndex`), d.push(`on${N}`);
   });
-  const y = `<${I}
-  ${l.map((a) => `${a}={${a}}`).join(`
+  const P = `<${I}
+  ${m.map((p) => `${p}={${p}}`).join(`
   `)}
-  ${$.map((a) => `${a}={${a}}`).join(`
+  ${d.map((p) => `${p}={${p}}`).join(`
   `)}
 />`;
   return {
-    props: l,
-    events: $,
-    jsx: y
+    props: m,
+    events: d,
+    jsx: P
   };
 }
 export {
-  L as generateComponentCode,
-  _ as generateComponentMetadata,
-  Y as generateReadme
+  _ as generateComponentCode,
+  J as generateComponentMetadata,
+  q as generateReadme
 };
 //# sourceMappingURL=generator.js.map