@bravostudioai/react 0.1.32 → 0.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,42 +1,42 @@
1
- import { sanitizePropName as m, getComponentPropType as W, getComponentPropName as R } from "./parser.js";
2
- function K(k, x, P, E, u, c, N, v, l, d = !1, I) {
3
- const y = [], a = [], p = [], f = [], D = [], A = [];
1
+ import { sanitizePropName as m, getComponentPropType as R, getComponentPropName as H } from "./parser.js";
2
+ function L(A, x, P, E, u, c, N, v, l, $ = "dynamic", I) {
3
+ const y = [], a = [], p = [], f = [], D = [], z = [];
4
4
  u.forEach((o) => {
5
5
  y.push(` ${o.propName}?: ${o.propType};`);
6
6
  }), c.forEach((o) => {
7
- const n = m(o.groupName);
8
- p.push(` ${n}?: string;`), p.push(
9
- ` on${n[0].toUpperCase()}${n.slice(
7
+ const t = m(o.groupName);
8
+ p.push(` ${t}?: string;`), p.push(
9
+ ` on${t[0].toUpperCase()}${t.slice(
10
10
  1
11
11
  )}Change?: (value: string) => void;`
12
12
  );
13
13
  });
14
14
  const w = [];
15
15
  N.forEach((o) => {
16
- const n = m(o.formName), s = `${n[0].toUpperCase()}${n.slice(
16
+ const t = m(o.formName), s = `${t[0].toUpperCase()}${t.slice(
17
17
  1
18
18
  )}FormData`, r = [];
19
- o.inputs.forEach(($) => {
20
- const T = $.propName, b = W($.type, $.name);
21
- r.push(` ${T}: ${b};`);
19
+ o.inputs.forEach((d) => {
20
+ const U = d.propName, b = R(d.type, d.name);
21
+ r.push(` ${U}: ${b};`);
22
22
  }), w.push(`export interface ${s} {
23
23
  ${r.join(`
24
24
  `)}
25
25
  }`), f.push(
26
- ` on${n[0].toUpperCase()}${n.slice(
26
+ ` on${t[0].toUpperCase()}${t.slice(
27
27
  1
28
28
  )}Submit?: (formData: ${s}) => void;`
29
29
  );
30
30
  }), v.forEach((o) => {
31
- const n = o.propName, s = n[0].toUpperCase() + n.slice(1);
32
- D.push(` ${n}?: string;`), D.push(
33
- ` ${n}Options?: Array<string | { value: string; label: string }>;`
31
+ const t = o.propName, s = t[0].toUpperCase() + t.slice(1);
32
+ D.push(` ${t}?: string;`), D.push(
33
+ ` ${t}Options?: Array<string | { value: string; label: string }>;`
34
34
  ), D.push(
35
35
  ` on${s}Change?: (value: string) => void;`
36
36
  );
37
37
  }), l.forEach((o) => {
38
- const n = o.propName, s = n[0].toUpperCase() + n.slice(1);
39
- A.push(` on${s}Click?: () => void;`);
38
+ const t = o.propName, s = t[0].toUpperCase() + t.slice(1);
39
+ z.push(` on${s}Click?: () => void;`);
40
40
  }), E.forEach((o) => {
41
41
  if (o.arrayContainer && o.arrayContainer.components.length > 0) {
42
42
  const s = o.arrayContainer, r = `${s.propName[0].toUpperCase()}${s.propName.slice(
@@ -44,27 +44,27 @@ ${r.join(`
44
44
  )}Item`;
45
45
  y.push(` ${s.propName}: ${r}[];`);
46
46
  }
47
- const n = m(o.name || "container");
48
- a.push(` ${n}CurrentIndex?: number;`), a.push(
49
- ` on${n[0].toUpperCase()}${n.slice(
47
+ const t = m(o.name || "container");
48
+ a.push(` ${t}CurrentIndex?: number;`), a.push(
49
+ ` on${t[0].toUpperCase()}${t.slice(
50
50
  1
51
51
  )}IndexChange?: (index: number) => void;`
52
52
  );
53
53
  });
54
- const z = [
54
+ const O = [
55
55
  ...y,
56
56
  ...a,
57
57
  ...p,
58
58
  ...f,
59
59
  ...D,
60
- ...A
61
- ], j = z.length > 0, O = j ? `export interface ${P}Props {
62
- ${z.join(`
60
+ ...z
61
+ ], j = O.length > 0, M = j ? `export interface ${P}Props {
62
+ ${O.join(`
63
63
  `)}
64
- }` : "", M = E.filter((o) => o.arrayContainer && o.arrayContainer.components.length > 0).map((o) => {
65
- const n = o.arrayContainer, s = `${n.propName[0].toUpperCase()}${n.propName.slice(
64
+ }` : "", B = E.filter((o) => o.arrayContainer && o.arrayContainer.components.length > 0).map((o) => {
65
+ const t = o.arrayContainer, s = `${t.propName[0].toUpperCase()}${t.propName.slice(
66
66
  1
67
- )}Item`, r = n.components.map(($) => ` ${$.propName}: ${$.propType};`).join(`
67
+ )}Item`, r = t.components.map((d) => ` ${d.propName}: ${d.propType};`).join(`
68
68
  `);
69
69
  return `export interface ${s} {
70
70
  ${r}
@@ -73,11 +73,11 @@ ${r}
73
73
 
74
74
  `), F = w.join(`
75
75
 
76
- `), S = [], U = [];
76
+ `), S = [], k = [];
77
77
  u.forEach((o) => {
78
- const n = R(o.type);
78
+ const t = H(o.type);
79
79
  S.push(` // ${o.name}
80
- ...(props.${o.propName} !== undefined && { "${o.id}": { ${n}: props.${o.propName} } as any }),`);
80
+ ...(props.${o.propName} !== undefined && { "${o.id}": { ${t}: props.${o.propName} } as any }),`);
81
81
  }), v.forEach((o) => {
82
82
  S.push(` // ${o.name}
83
83
  ...((props.${o.propName} !== undefined || props.${o.propName}Options !== undefined) && {
@@ -88,43 +88,43 @@ ${r}
88
88
  }),`);
89
89
  }), E.forEach((o) => {
90
90
  if (o.arrayContainer && o.arrayContainer.components.length > 0) {
91
- const $ = o.arrayContainer, T = $.components.map((b) => {
92
- const G = R(b.type);
91
+ const d = o.arrayContainer, U = d.components.map((b) => {
92
+ const W = H(b.type);
93
93
  return ` // ${b.name}
94
94
  "${b.id}": {
95
- ${G}: item.${b.propName},
95
+ ${W}: item.${b.propName},
96
96
  }`;
97
97
  }).join(`,
98
98
  `);
99
- S.push(` // ${$.name}
100
- "${$.id}": props.${$.propName}.map((item) => ({
101
- ${T}
99
+ S.push(` // ${d.name}
100
+ "${d.id}": props.${d.propName}.map((item) => ({
101
+ ${U}
102
102
  })),`);
103
103
  }
104
- const n = m(o.name || "container"), s = `${n[0].toUpperCase()}${n.slice(
104
+ const t = m(o.name || "container"), s = `${t[0].toUpperCase()}${t.slice(
105
105
  1
106
106
  )}IndexChange`, r = [];
107
107
  o.id && (r.push(` // ${o.name}`), r.push(` "${o.id}": {`), r.push(
108
- ` currentIndex: props.${n}CurrentIndex,`
109
- ), r.push(` onIndexChange: props.on${s},`), r.push(" }")), r.length > 0 && U.push(r.join(`
108
+ ` currentIndex: props.${t}CurrentIndex,`
109
+ ), r.push(` onIndexChange: props.on${s},`), r.push(" }")), r.length > 0 && k.push(r.join(`
110
110
  `));
111
111
  });
112
- const B = U.length > 0 ? `
112
+ const G = k.length > 0 ? `
113
113
  repeatingContainerControls={{
114
- ${U.join(`,
114
+ ${k.join(`,
115
115
  `)}
116
- }}` : "", t = [], e = [];
116
+ }}` : "", n = [], e = [];
117
117
  (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(
118
118
  ' if (action?.action === "input-change" || action?.action === "select-change") {'
119
119
  ), e.push(" const nodeId = action?.nodeId;"), e.push(" const value = action?.params?.value;"), e.push(""), v.forEach((o) => {
120
- const n = o.propName, r = `on${n[0].toUpperCase() + n.slice(1)}Change`;
120
+ const t = o.propName, r = `on${t[0].toUpperCase() + t.slice(1)}Change`;
121
121
  e.push(` // ${o.name}`), e.push(
122
122
  ` if (nodeId === "${o.id}" && props.${r}) {`
123
123
  ), e.push(` props.${r}(value);`), e.push(" return;"), e.push(" }");
124
124
  }), e.push(" }"), e.push("")), l.length > 0 && (e.push(" // Handle button clicks"), e.push(
125
125
  ' if (action?.action === "remote" || action?.action === "tap" || action?.action === "link") {'
126
126
  ), e.push(" const nodeId = action?.nodeId;"), e.push(""), l.forEach((o) => {
127
- const n = o.propName, r = `on${n[0].toUpperCase() + n.slice(1)}Click`;
127
+ const t = o.propName, r = `on${t[0].toUpperCase() + t.slice(1)}Click`;
128
128
  e.push(` // ${o.name}`), e.push(
129
129
  ` if (nodeId === "${o.id}" && props.${r}) {`
130
130
  ), e.push(` props.${r}();`), e.push(" return;"), e.push(" }");
@@ -133,7 +133,7 @@ ${U.join(`,
133
133
  ), e.push(
134
134
  " const { groupName, value } = action.params;"
135
135
  ), c.forEach((o) => {
136
- const n = m(o.groupName), s = `on${n[0].toUpperCase()}${n.slice(
136
+ const t = m(o.groupName), s = `on${t[0].toUpperCase()}${t.slice(
137
137
  1
138
138
  )}Change`;
139
139
  e.push(
@@ -141,45 +141,45 @@ ${U.join(`,
141
141
  ), e.push(` props.${s}(value);`), e.push(" return;"), e.push(" }");
142
142
  }), e.push(" }"), e.push("")), N.length > 0 && (e.push(' if (action?.action === "submit") {'), e.push(" // Get form inputs from Encore state"), e.push(
143
143
  ` const formInputs = useEncoreState.getState().formInputs["${x}"] || {};`
144
- ), e.push(" const submitNodeId = action?.nodeId;"), e.push(""), N.forEach((o, n) => {
144
+ ), e.push(" const submitNodeId = action?.nodeId;"), e.push(""), N.forEach((o, t) => {
145
145
  const s = m(o.formName), r = `on${s[0].toUpperCase()}${s.slice(
146
146
  1
147
147
  )}Submit`;
148
- n > 0 && e.push(""), e.push(
148
+ t > 0 && e.push(""), e.push(
149
149
  ` // Form: ${o.formName} (${o.formId})`
150
150
  ), o.submitButtonId ? e.push(
151
151
  ` if (submitNodeId === "${o.submitButtonId}" && props.${r}) {`
152
152
  ) : N.length === 1 ? e.push(` if (props.${r}) {`) : e.push(` if (props.${r}) {`), e.push(" // Extract form inputs for this form");
153
- const $ = `${s[0].toUpperCase()}${s.slice(
153
+ const d = `${s[0].toUpperCase()}${s.slice(
154
154
  1
155
155
  )}FormData`;
156
156
  e.push(
157
- ` const formData: ${$} = {`
157
+ ` const formData: ${d} = {`
158
158
  );
159
- const T = [];
159
+ const U = [];
160
160
  o.inputs.forEach((b) => {
161
- const G = b.propName;
162
- T.push(
163
- ` ${G}: formInputs["${b.id}"]`
161
+ const W = b.propName;
162
+ U.push(
163
+ ` ${W}: formInputs["${b.id}"]`
164
164
  );
165
- }), e.push(T.join(`,
165
+ }), e.push(U.join(`,
166
166
  `)), e.push(" };"), e.push(` props.${r}(formData);`), e.push(
167
167
  " // Note: Default form submission will still proceed after callback"
168
168
  ), e.push(" }");
169
169
  }), e.push(" }")), e.push(" };")), c.forEach((o) => {
170
- const n = m(o.groupName);
171
- t.push(
172
- ` ...(props.${n} !== undefined && { ${n}: props.${n} }),`
170
+ const t = m(o.groupName);
171
+ n.push(
172
+ ` ...(props.${t} !== undefined && { ${t}: props.${t} }),`
173
173
  );
174
174
  });
175
- const C = t.length > 0 ? `
175
+ const C = n.length > 0 ? `
176
176
  inputGroups={{
177
- ${t.join(`
177
+ ${n.join(`
178
178
  `)}
179
179
  }}` : "", i = e.length > 0 ? `
180
- onAction={handleAction}` : "", g = j ? `props: ${P}Props` : "", h = O ? `${O}
180
+ onAction={handleAction}` : "", g = j ? `props: ${P}Props` : "", h = M ? `${M}
181
181
 
182
- ` : "";
182
+ ` : "", T = $ === "production" || $ === "optimistic";
183
183
  return `/**
184
184
  * ${P}
185
185
  *
@@ -188,9 +188,9 @@ ${t.join(`
188
188
  */
189
189
 
190
190
  import { EncoreApp${N.length > 0 ? ", useEncoreState" : ""} } from "@bravostudioai/react";
191
- ${d ? 'import productionData from "./data.json";' : ""}
191
+ ${T ? 'import productionData from "./data.json";' : ""}
192
192
 
193
- ${M ? `${M}
193
+ ${B ? `${B}
194
194
 
195
195
  ` : ""}${F ? `${F}
196
196
 
@@ -199,15 +199,16 @@ ${e.length > 0 ? e.join(`
199
199
  `) : ""}
200
200
  return (
201
201
  <EncoreApp
202
- appId="${k}"
202
+ appId="${A}"
203
203
  pageId="${x}"
204
- ${d ? `appDefinition={productionData.app}
204
+ mode="${$}"
205
+ ${T ? `appDefinition={productionData.app}
205
206
  pageDefinition={productionData.page}
206
207
  componentCode={productionData.componentCode}` : ""}
207
208
  data={{
208
209
  ${S.join(`
209
210
  `)}
210
- }}${B}${C}${i}
211
+ }}${G}${C}${i}
211
212
  />
212
213
  );
213
214
  }
@@ -221,15 +222,15 @@ export const PageMeta = {
221
222
  };
222
223
  `;
223
224
  }
224
- function L(k, x, P, E, u, c, N, v, l, d, I) {
225
+ function Y(A, x, P, E, u, c, N, v, l, $, I) {
225
226
  const y = [], a = [], p = [], f = [];
226
- N.forEach((t) => {
227
- y.push(`### \`${t.propName}\` (${t.propType}, optional)
227
+ N.forEach((n) => {
228
+ y.push(`### \`${n.propName}\` (${n.propType}, optional)
228
229
 
229
- ${t.name} (${t.type}) - Component ID: ${t.id}`);
230
- }), c.forEach((t) => {
231
- if (t.arrayContainer && t.arrayContainer.components.length > 0) {
232
- const i = t.arrayContainer, g = i.components.map((h) => `- \`${h.propName}\` (${h.propType}): ${h.name} (${h.type}) - Component ID: ${h.id}`).join(`
230
+ ${n.name} (${n.type}) - Component ID: ${n.id}`);
231
+ }), c.forEach((n) => {
232
+ if (n.arrayContainer && n.arrayContainer.components.length > 0) {
233
+ const i = n.arrayContainer, g = i.components.map((h) => `- \`${h.propName}\` (${h.propType}): ${h.name} (${h.type}) - Component ID: ${h.id}`).join(`
233
234
  `);
234
235
  y.push(`### \`${i.propName}\` (${i.propName[0].toUpperCase()}${i.propName.slice(
235
236
  1
@@ -241,12 +242,12 @@ Array of items for "${i.name}" container (ID: ${i.id})
241
242
 
242
243
  ${g}`);
243
244
  }
244
- const e = m(t.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
245
+ const e = m(n.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
245
246
  1
246
247
  )}IndexChange`;
247
248
  a.push(`### \`${e}CurrentIndex\` (number, optional)
248
249
 
249
- Controls the currently visible slide/index for the "${t.name}" container (ID: ${t.id}).
250
+ Controls the currently visible slide/index for the "${n.name}" container (ID: ${n.id}).
250
251
 
251
252
  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.
252
253
 
@@ -258,56 +259,56 @@ This event fires whenever the slide changes, whether by user interaction, automa
258
259
  });
259
260
  const D = y.length > 0 ? y.join(`
260
261
 
261
- `) : "This component currently has no data-bound props.", A = a.length > 0 ? `## Control Props
262
+ `) : "This component currently has no data-bound props.", z = a.length > 0 ? `## Control Props
262
263
 
263
264
  These props allow you to imperatively control repeating containers (sliders, lists, etc.) and receive notifications when the current index changes.
264
265
 
265
266
  ${a.join(`
266
267
 
267
268
  `)}` : "", w = [];
268
- v.forEach((t) => {
269
- const e = m(t.groupName), C = `on${e[0].toUpperCase()}${e.slice(
269
+ v.forEach((n) => {
270
+ const e = m(n.groupName), C = `on${e[0].toUpperCase()}${e.slice(
270
271
  1
271
- )}Change`, i = t.elements.map((g) => `- "${g.name}"`).join(`
272
+ )}Change`, i = n.elements.map((g) => `- "${g.name}"`).join(`
272
273
  `);
273
274
  w.push(`### \`${e}\` (string, optional)
274
275
 
275
- Sets which element is active in the "${t.groupName}" input group (type: ${t.groupType}).
276
+ Sets which element is active in the "${n.groupName}" input group (type: ${n.groupType}).
276
277
 
277
278
  **Available elements:**
278
279
  ${i}
279
280
 
280
281
  ### \`${C}\` ((value: string) => void, optional)
281
282
 
282
- Callback fired when the user selects a different element in the "${t.groupName}" input group. Called with the name of the selected element.`);
283
+ Callback fired when the user selects a different element in the "${n.groupName}" input group. Called with the name of the selected element.`);
283
284
  });
284
- const z = w.length > 0 ? `## Input Group Props
285
+ const O = w.length > 0 ? `## Input Group Props
285
286
 
286
287
  These props allow you to control input groups (radio button-like behavior) and receive notifications when the selection changes.
287
288
 
288
289
  ${w.join(`
289
290
 
290
291
  `)}` : "", j = [];
291
- l.forEach((t) => {
292
- const e = m(t.formName), C = `on${e[0].toUpperCase()}${e.slice(
292
+ l.forEach((n) => {
293
+ const e = m(n.formName), C = `on${e[0].toUpperCase()}${e.slice(
293
294
  1
294
295
  )}Submit`, i = `${e[0].toUpperCase()}${e.slice(
295
296
  1
296
- )}FormData`, g = t.inputs.map((h) => {
297
- const o = h.propName, n = W(h.type, h.name);
298
- return `- \`${o}\` (${n}) - ${h.name}`;
297
+ )}FormData`, g = n.inputs.map((h) => {
298
+ const T = h.propName, o = R(h.type, h.name);
299
+ return `- \`${T}\` (${o}) - ${h.name}`;
299
300
  }).join(`
300
301
  `);
301
302
  j.push(`### \`${C}\` ((formData: ${i}) => void, optional)
302
303
 
303
- Callback fired when the "${t.formName}" form is submitted. Called with a typed object containing all form input values with human-readable property names.
304
+ Callback fired when the "${n.formName}" form is submitted. Called with a typed object containing all form input values with human-readable property names.
304
305
 
305
306
  **Form data shape:**
306
307
  \`\`\`typescript
307
308
  interface ${i} {
308
- ${t.inputs.map((h) => {
309
- const o = h.propName, n = W(h.type, h.name);
310
- return ` ${o}: ${n};`;
309
+ ${n.inputs.map((h) => {
310
+ const T = h.propName, o = R(h.type, h.name);
311
+ return ` ${T}: ${o};`;
311
312
  }).join(`
312
313
  `)}
313
314
  }
@@ -316,24 +317,24 @@ ${t.inputs.map((h) => {
316
317
  **Form inputs:**
317
318
  ${g}`);
318
319
  });
319
- const O = j.length > 0 ? `## Form Submission Props
320
+ const M = j.length > 0 ? `## Form Submission Props
320
321
 
321
322
  These props allow you to handle form submissions and access form input values.
322
323
 
323
324
  ${j.join(`
324
325
 
325
326
  `)}` : "";
326
- d.forEach((t) => {
327
- const e = t.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Change`, g = `${e}Options`;
327
+ $.forEach((n) => {
328
+ const e = n.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Change`, g = `${e}Options`;
328
329
  p.push(`### \`${e}\` (string, optional)
329
330
 
330
- Controls the selected value of the "${t.name}" dropdown (Component ID: ${t.id}).
331
+ Controls the selected value of the "${n.name}" dropdown (Component ID: ${n.id}).
331
332
 
332
333
  When provided, the select input operates in controlled mode - the parent component controls the current value.
333
334
 
334
335
  ### \`${g}\` (Array<string | { value: string; label: string }>, optional)
335
336
 
336
- 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.
337
+ 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.
337
338
 
338
339
  **Example:**
339
340
  \`\`\`tsx
@@ -349,22 +350,22 @@ ${g}={[
349
350
 
350
351
  ### \`${i}\` ((value: string) => void, optional)
351
352
 
352
- Callback fired when the user selects a different option in the "${t.name}" dropdown. Called with the selected value.`);
353
+ Callback fired when the user selects a different option in the "${n.name}" dropdown. Called with the selected value.`);
353
354
  });
354
- const M = p.length > 0 ? `## Select Input Props
355
+ const B = p.length > 0 ? `## Select Input Props
355
356
 
356
357
  These props allow you to control select/dropdown inputs and respond to value changes.
357
358
 
358
359
  ${p.join(`
359
360
 
360
361
  `)}` : "";
361
- I.forEach((t) => {
362
- const e = t.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Click`;
362
+ I.forEach((n) => {
363
+ const e = n.propName, i = `on${e[0].toUpperCase() + e.slice(1)}Click`;
363
364
  f.push(`### \`${i}\` (() => void, optional)
364
365
 
365
- Callback fired when the "${t.name}" button is clicked (Component ID: ${t.id}).
366
+ Callback fired when the "${n.name}" button is clicked (Component ID: ${n.id}).
366
367
 
367
- Action type: \`${t.actionType}\``);
368
+ Action type: \`${n.actionType}\``);
368
369
  });
369
370
  const F = f.length > 0 ? `## Action Button Props
370
371
 
@@ -378,19 +379,19 @@ ${f.join(`
378
379
 
379
380
  ${D}
380
381
 
381
- ${A}
382
-
383
382
  ${z}
384
383
 
385
384
  ${O}
386
385
 
387
386
  ${M}
388
387
 
389
- ${F}`, U = c.length > 0 && c[0].arrayContainer ? `<${u}
388
+ ${B}
389
+
390
+ ${F}`, k = c.length > 0 && c[0].arrayContainer ? `<${u}
390
391
  ${c.map(
391
- (t) => t.arrayContainer ? `${t.arrayContainer.propName}={[
392
+ (n) => n.arrayContainer ? `${n.arrayContainer.propName}={[
392
393
  {
393
- ${t.arrayContainer?.components.map(
394
+ ${n.arrayContainer?.components.map(
394
395
  (e) => `${e.propName}: "${e.type === "component:image" ? "https://example.com/image.jpg" : "Example value"}"`
395
396
  ).join(`,
396
397
  `)}
@@ -399,12 +400,12 @@ ${F}`, U = c.length > 0 && c[0].arrayContainer ? `<${u}
399
400
  ).filter(Boolean).join(`
400
401
  `)}
401
402
  />` : `<${u} />`;
402
- let B = "";
403
+ let G = "";
403
404
  if (c.length > 0 && c[0]) {
404
- const t = c[0], e = m(t.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
405
+ const n = c[0], e = m(n.name || "container"), C = `${e[0].toUpperCase()}${e.slice(
405
406
  1
406
407
  )}IndexChange`;
407
- B = `## Controlling Slides
408
+ G = `## Controlling Slides
408
409
 
409
410
  You can imperatively control which slide is displayed and listen for slide changes:
410
411
 
@@ -440,7 +441,7 @@ function MyComponent() {
440
441
 
441
442
  Encore App Wrapper Component
442
443
 
443
- This component wraps the Encore Studio app **"${P}"** (App ID: \`${k}\`) for the page **"${E}"** (Page ID: \`${x}\`).
444
+ This component wraps the Encore Studio app **"${P}"** (App ID: \`${A}\`) for the page **"${E}"** (Page ID: \`${x}\`).
444
445
 
445
446
  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.
446
447
 
@@ -455,7 +456,7 @@ function MyComponent() {
455
456
  return (
456
457
  <${u}
457
458
  ${c.map(
458
- (t) => t.arrayContainer ? `${t.arrayContainer.propName}={[/* array of items */]}` : ""
459
+ (n) => n.arrayContainer ? `${n.arrayContainer.propName}={[/* array of items */]}` : ""
459
460
  ).filter(Boolean).join(`
460
461
  `)}
461
462
  />
@@ -466,52 +467,52 @@ function MyComponent() {
466
467
  ## Example
467
468
 
468
469
  \`\`\`tsx
469
- ${U}
470
+ ${k}
470
471
  \`\`\`
471
472
 
472
- ${B}
473
+ ${G}
473
474
  `;
474
475
  }
475
- function Y(k, x, P, E, u, c, N, v) {
476
- const l = [], d = [], I = m(x);
476
+ function _(A, x, P, E, u, c, N, v) {
477
+ const l = [], $ = [], I = m(x);
477
478
  E.forEach((a) => {
478
479
  l.push(a.propName);
479
480
  }), u.forEach((a) => {
480
481
  const p = m(a.groupName);
481
- l.push(p), d.push(`on${p[0].toUpperCase()}${p.slice(1)}Change`);
482
+ l.push(p), $.push(`on${p[0].toUpperCase()}${p.slice(1)}Change`);
482
483
  }), c.forEach((a) => {
483
484
  const p = m(a.formName);
484
- d.push(
485
+ $.push(
485
486
  `on${p[0].toUpperCase()}${p.slice(1)}Submit`
486
487
  );
487
488
  }), N.forEach((a) => {
488
489
  const p = a.propName, f = p[0].toUpperCase() + p.slice(1);
489
- l.push(p), l.push(`${p}Options`), d.push(`on${f}Change`);
490
+ l.push(p), l.push(`${p}Options`), $.push(`on${f}Change`);
490
491
  }), v.forEach((a) => {
491
492
  const p = a.propName, f = p[0].toUpperCase() + p.slice(1);
492
- d.push(`on${f}Click`);
493
+ $.push(`on${f}Click`);
493
494
  }), P.forEach((a) => {
494
495
  a.arrayContainer && a.arrayContainer.components.length > 0 && l.push(a.arrayContainer.propName);
495
496
  const p = m(a.name || "container"), f = `${p[0].toUpperCase()}${p.slice(
496
497
  1
497
498
  )}IndexChange`;
498
- l.push(`${p}CurrentIndex`), d.push(`on${f}`);
499
+ l.push(`${p}CurrentIndex`), $.push(`on${f}`);
499
500
  });
500
501
  const y = `<${I}
501
502
  ${l.map((a) => `${a}={${a}}`).join(`
502
503
  `)}
503
- ${d.map((a) => `${a}={${a}}`).join(`
504
+ ${$.map((a) => `${a}={${a}}`).join(`
504
505
  `)}
505
506
  />`;
506
507
  return {
507
508
  props: l,
508
- events: d,
509
+ events: $,
509
510
  jsx: y
510
511
  };
511
512
  }
512
513
  export {
513
- K as generateComponentCode,
514
- Y as generateComponentMetadata,
515
- L as generateReadme
514
+ L as generateComponentCode,
515
+ _ as generateComponentMetadata,
516
+ Y as generateReadme
516
517
  };
517
518
  //# sourceMappingURL=generator.js.map