@json-render/react-native 0.5.0 → 0.5.2

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.
Files changed (22) hide show
  1. package/README.md +1 -1
  2. package/dist/catalog.d.mts +56 -0
  3. package/dist/catalog.d.ts +56 -0
  4. package/dist/catalog.js +39 -13
  5. package/dist/catalog.js.map +1 -1
  6. package/dist/catalog.mjs +1 -1
  7. package/dist/{chunk-MP3Y6GEF.mjs → chunk-7PT5BNV7.mjs} +40 -14
  8. package/dist/chunk-7PT5BNV7.mjs.map +1 -0
  9. package/dist/{chunk-VBNJFRLI.mjs → chunk-MJPWQ6K7.mjs} +14 -12
  10. package/dist/chunk-MJPWQ6K7.mjs.map +1 -0
  11. package/dist/index.js +76 -26
  12. package/dist/index.js.map +1 -1
  13. package/dist/index.mjs +26 -4
  14. package/dist/index.mjs.map +1 -1
  15. package/dist/schema.d.mts +4 -0
  16. package/dist/schema.d.ts +4 -0
  17. package/dist/schema.js +13 -11
  18. package/dist/schema.js.map +1 -1
  19. package/dist/schema.mjs +1 -1
  20. package/package.json +2 -2
  21. package/dist/chunk-MP3Y6GEF.mjs.map +0 -1
  22. package/dist/chunk-VBNJFRLI.mjs.map +0 -1
package/dist/{chunk-MP3Y6GEF.mjs → chunk-7PT5BNV7.mjs} RENAMED
@@ -15,7 +15,8 @@ var standardComponentDefinitions = {
15
15
  flex: z.number().nullable()
16
16
  }),
17
17
  slots: ["default"],
18
- description: "Generic container wrapper. Use for grouping elements with padding, margin, and background color."
18
+ description: "Generic container wrapper. Use for grouping elements with padding, margin, and background color.",
19
+ example: { padding: 16, backgroundColor: "#FFFFFF" }
19
20
  },
20
21
  Row: {
21
22
  props: z.object({
@@ -34,7 +35,8 @@ var standardComponentDefinitions = {
34
35
  flex: z.number().nullable()
35
36
  }),
36
37
  slots: ["default"],
37
- description: "Horizontal flex layout. Use for placing elements side by side."
38
+ description: "Horizontal flex layout. Use for placing elements side by side.",
39
+ example: { gap: 12, alignItems: "center" }
38
40
  },
39
41
  Column: {
40
42
  props: z.object({
@@ -52,7 +54,8 @@ var standardComponentDefinitions = {
52
54
  flex: z.number().nullable()
53
55
  }),
54
56
  slots: ["default"],
55
- description: "Vertical flex layout. Use for stacking elements top to bottom."
57
+ description: "Vertical flex layout. Use for stacking elements top to bottom.",
58
+ example: { gap: 12, padding: 16 }
56
59
  },
57
60
  ScrollContainer: {
58
61
  props: z.object({
@@ -106,7 +109,8 @@ var standardComponentDefinitions = {
106
109
  align: z.enum(["left", "center", "right"]).nullable()
107
110
  }),
108
111
  slots: [],
109
- description: "Heading text at various levels. h1 is largest, h4 is smallest."
112
+ description: "Heading text at various levels. h1 is largest, h4 is smallest.",
113
+ example: { text: "Welcome", level: "h1" }
110
114
  },
111
115
  Paragraph: {
112
116
  props: z.object({
@@ -117,7 +121,8 @@ var standardComponentDefinitions = {
117
121
  fontSize: z.number().nullable()
118
122
  }),
119
123
  slots: [],
120
- description: "Body text paragraph. Use for descriptions and longer content."
124
+ description: "Body text paragraph. Use for descriptions and longer content.",
125
+ example: { text: "This is a paragraph of body text." }
121
126
  },
122
127
  Label: {
123
128
  props: z.object({
@@ -127,7 +132,8 @@ var standardComponentDefinitions = {
127
132
  size: z.enum(["xs", "sm", "md"]).nullable()
128
133
  }),
129
134
  slots: [],
130
- description: "Small utility text. Use for captions, form labels, and secondary information."
135
+ description: "Small utility text. Use for captions, form labels, and secondary information.",
136
+ example: { text: "Status", size: "sm" }
131
137
  },
132
138
  Image: {
133
139
  props: z.object({
@@ -139,7 +145,13 @@ var standardComponentDefinitions = {
139
145
  borderRadius: z.number().nullable()
140
146
  }),
141
147
  slots: [],
142
- description: "Image display. Provide a source URL and optional dimensions."
148
+ description: "Image display. Provide a source URL and optional dimensions.",
149
+ example: {
150
+ src: "https://picsum.photos/300/200",
151
+ alt: "Photo",
152
+ width: 300,
153
+ height: 200
154
+ }
143
155
  },
144
156
  Avatar: {
145
157
  props: z.object({
@@ -149,7 +161,8 @@ var standardComponentDefinitions = {
149
161
  backgroundColor: z.string().nullable()
150
162
  }),
151
163
  slots: [],
152
- description: "Circular avatar showing an image or initials. Use for user profiles and contacts."
164
+ description: "Circular avatar showing an image or initials. Use for user profiles and contacts.",
165
+ example: { initials: "JD", size: "md" }
153
166
  },
154
167
  Badge: {
155
168
  props: z.object({
@@ -157,7 +170,8 @@ var standardComponentDefinitions = {
157
170
  variant: z.enum(["default", "info", "success", "warning", "error"]).nullable()
158
171
  }),
159
172
  slots: [],
160
- description: "Small colored indicator with a label. Use for status, counts, and categories."
173
+ description: "Small colored indicator with a label. Use for status, counts, and categories.",
174
+ example: { label: "New", variant: "info" }
161
175
  },
162
176
  Chip: {
163
177
  props: z.object({
@@ -182,7 +196,8 @@ var standardComponentDefinitions = {
182
196
  }),
183
197
  events: ["press"],
184
198
  slots: [],
185
- description: "Pressable button with label. Set variant for styling. Bind on.press for the handler to call on press."
199
+ description: "Pressable button with label. Set variant for styling. Bind on.press for the handler to call on press.",
200
+ example: { label: "Submit", variant: "primary" }
186
201
  },
187
202
  TextInput: {
188
203
  props: z.object({
@@ -198,7 +213,12 @@ var standardComponentDefinitions = {
198
213
  }),
199
214
  events: ["submit", "focus", "blur"],
200
215
  slots: [],
201
- description: "Text input field. Use statePath to bind to the state model for two-way binding. The value typed by the user is stored at the statePath."
216
+ description: "Text input field. Use statePath to bind to the state model for two-way binding. The value typed by the user is stored at the statePath.",
217
+ example: {
218
+ placeholder: "Enter text...",
219
+ statePath: "/inputValue",
220
+ label: "Name"
221
+ }
202
222
  },
203
223
  Switch: {
204
224
  props: z.object({
@@ -279,7 +299,8 @@ var standardComponentDefinitions = {
279
299
  elevated: z.boolean().nullable()
280
300
  }),
281
301
  slots: ["default"],
282
- description: "Elevated card container with optional title. Use for grouping related content."
302
+ description: "Elevated card container with optional title. Use for grouping related content.",
303
+ example: { title: "Details", padding: 16, elevated: true }
283
304
  },
284
305
  ListItem: {
285
306
  props: z.object({
@@ -291,7 +312,12 @@ var standardComponentDefinitions = {
291
312
  }),
292
313
  events: ["press"],
293
314
  slots: [],
294
- description: "List row with title, subtitle, and optional leading/trailing text. Bind on.press for the press handler."
315
+ description: "List row with title, subtitle, and optional leading/trailing text. Bind on.press for the press handler.",
316
+ example: {
317
+ title: "Settings",
318
+ subtitle: "Manage your preferences",
319
+ showChevron: true
320
+ }
295
321
  },
296
322
  Modal: {
297
323
  props: z.object({
@@ -378,4 +404,4 @@ export {
378
404
  standardComponentDefinitions,
379
405
  standardActionDefinitions
380
406
  };
381
- //# sourceMappingURL=chunk-MP3Y6GEF.mjs.map
407
+ //# sourceMappingURL=chunk-7PT5BNV7.mjs.map
package/dist/chunk-7PT5BNV7.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/catalog.ts"],"sourcesContent":["import { z } from \"zod\";\n\n// =============================================================================\n// Standard Component Definitions for React Native\n// =============================================================================\n\n/**\n * Standard component definitions for React Native catalogs.\n *\n * These can be used directly or extended with custom components.\n * All components are built using React Native core primitives only.\n */\nexport const standardComponentDefinitions = {\n // ==========================================================================\n // Layout Components\n // ==========================================================================\n\n Container: {\n props: z.object({\n padding: z.number().nullable(),\n paddingHorizontal: z.number().nullable(),\n paddingVertical: z.number().nullable(),\n margin: z.number().nullable(),\n backgroundColor: z.string().nullable(),\n borderRadius: z.number().nullable(),\n flex: z.number().nullable(),\n }),\n slots: [\"default\"],\n description:\n \"Generic container wrapper. Use for grouping elements with padding, margin, and background color.\",\n example: { padding: 16, backgroundColor: \"#FFFFFF\" },\n },\n\n Row: {\n props: z.object({\n gap: z.number().nullable(),\n alignItems: z\n .enum([\"flex-start\", \"center\", \"flex-end\", \"stretch\", \"baseline\"])\n .nullable(),\n justifyContent: z\n .enum([\n \"flex-start\",\n \"center\",\n \"flex-end\",\n \"space-between\",\n \"space-around\",\n \"space-evenly\",\n ])\n .nullable(),\n flexWrap: z.enum([\"wrap\", \"nowrap\"]).nullable(),\n padding: z.number().nullable(),\n flex: z.number().nullable(),\n }),\n slots: [\"default\"],\n description:\n \"Horizontal flex layout. Use for placing elements side by side.\",\n example: { gap: 12, alignItems: \"center\" },\n },\n\n Column: {\n props: z.object({\n gap: z.number().nullable(),\n alignItems: z\n .enum([\"flex-start\", \"center\", \"flex-end\", \"stretch\", \"baseline\"])\n .nullable(),\n justifyContent: z\n .enum([\n \"flex-start\",\n \"center\",\n \"flex-end\",\n \"space-between\",\n \"space-around\",\n \"space-evenly\",\n ])\n .nullable(),\n padding: z.number().nullable(),\n flex: z.number().nullable(),\n }),\n slots: [\"default\"],\n description:\n \"Vertical flex layout. Use for stacking elements top to bottom.\",\n example: { gap: 12, padding: 16 },\n },\n\n ScrollContainer: {\n props: z.object({\n horizontal: z.boolean().nullable(),\n showsScrollIndicator: z.boolean().nullable(),\n padding: z.number().nullable(),\n backgroundColor: z.string().nullable(),\n }),\n slots: [\"default\"],\n description:\n \"Scrollable container. Use for content that may overflow the screen.\",\n },\n\n SafeArea: {\n props: z.object({\n backgroundColor: z.string().nullable(),\n }),\n slots: [\"default\"],\n description:\n \"Safe area container that respects device notches and system bars. Use as the outermost wrapper for screens.\",\n },\n\n Spacer: {\n props: z.object({\n size: z.number().nullable(),\n flex: z.number().nullable(),\n }),\n slots: [],\n description:\n \"Empty space between elements. Set size for fixed spacing or flex for flexible spacing.\",\n },\n\n Pressable: {\n props: z.object({}),\n events: [\"press\", \"longPress\"],\n slots: [\"default\"],\n description:\n \"Touchable wrapper that triggers events on press. Wrap any element to make it tappable. Bind on.press to setState to update state for visibility-driven UIs like tabs.\",\n },\n\n Divider: {\n props: z.object({\n direction: z.enum([\"horizontal\", \"vertical\"]).nullable(),\n color: z.string().nullable(),\n thickness: z.number().nullable(),\n margin: z.number().nullable(),\n }),\n slots: [],\n description: \"Thin line separator between content sections.\",\n },\n\n // ==========================================================================\n // Content Components\n // ==========================================================================\n\n Heading: {\n props: z.object({\n text: z.string(),\n level: z.enum([\"h1\", \"h2\", \"h3\", \"h4\"]).nullable(),\n color: z.string().nullable(),\n align: z.enum([\"left\", \"center\", \"right\"]).nullable(),\n }),\n slots: [],\n description:\n \"Heading text at various levels. h1 is largest, h4 is smallest.\",\n example: { text: \"Welcome\", level: \"h1\" },\n },\n\n Paragraph: {\n props: z.object({\n text: z.string(),\n color: z.string().nullable(),\n align: z.enum([\"left\", \"center\", \"right\"]).nullable(),\n numberOfLines: z.number().nullable(),\n fontSize: z.number().nullable(),\n }),\n slots: [],\n description:\n \"Body text paragraph. Use for descriptions and longer content.\",\n example: { text: \"This is a paragraph of body text.\" },\n },\n\n Label: {\n props: z.object({\n text: z.string(),\n color: z.string().nullable(),\n bold: z.boolean().nullable(),\n size: z.enum([\"xs\", \"sm\", \"md\"]).nullable(),\n }),\n slots: [],\n description:\n \"Small utility text. Use for captions, form labels, and secondary information.\",\n example: { text: \"Status\", size: \"sm\" },\n },\n\n Image: {\n props: z.object({\n src: z.string(),\n alt: z.string().nullable(),\n width: z.number().nullable(),\n height: z.number().nullable(),\n resizeMode: z.enum([\"cover\", \"contain\", \"stretch\", \"center\"]).nullable(),\n borderRadius: z.number().nullable(),\n }),\n slots: [],\n description: \"Image display. Provide a source URL and optional dimensions.\",\n example: {\n src: \"https://picsum.photos/300/200\",\n alt: \"Photo\",\n width: 300,\n height: 200,\n },\n },\n\n Avatar: {\n props: z.object({\n src: z.string().nullable(),\n initials: z.string().nullable(),\n size: z.enum([\"sm\", \"md\", \"lg\", \"xl\"]).nullable(),\n backgroundColor: z.string().nullable(),\n }),\n slots: [],\n description:\n \"Circular avatar showing an image or initials. Use for user profiles and contacts.\",\n example: { initials: \"JD\", size: \"md\" },\n },\n\n Badge: {\n props: z.object({\n label: z.string(),\n variant: z\n .enum([\"default\", \"info\", \"success\", \"warning\", \"error\"])\n .nullable(),\n }),\n slots: [],\n description:\n \"Small colored indicator with a label. Use for status, counts, and categories.\",\n example: { label: \"New\", variant: \"info\" },\n },\n\n Chip: {\n props: z.object({\n label: z.string(),\n selected: z.boolean().nullable(),\n backgroundColor: z.string().nullable(),\n }),\n events: [\"press\", \"remove\"],\n slots: [],\n description:\n \"Tag or filter chip. Bind on.remove for removable chips, on.press for selectable chips.\",\n },\n\n // ==========================================================================\n // Input Components\n // ==========================================================================\n\n Button: {\n props: z.object({\n label: z.string(),\n variant: z\n .enum([\"primary\", \"secondary\", \"danger\", \"outline\", \"ghost\"])\n .nullable(),\n size: z.enum([\"sm\", \"md\", \"lg\"]).nullable(),\n disabled: z.boolean().nullable(),\n loading: z.boolean().nullable(),\n }),\n events: [\"press\"],\n slots: [],\n description:\n \"Pressable button with label. Set variant for styling. Bind on.press for the handler to call on press.\",\n example: { label: \"Submit\", variant: \"primary\" },\n },\n\n TextInput: {\n props: z.object({\n placeholder: z.string().nullable(),\n value: z.string().nullable(),\n statePath: z.string().nullable(),\n secureTextEntry: z.boolean().nullable(),\n keyboardType: z\n .enum([\"default\", \"email-address\", \"numeric\", \"phone-pad\", \"url\"])\n .nullable(),\n multiline: z.boolean().nullable(),\n numberOfLines: z.number().nullable(),\n label: z.string().nullable(),\n flex: z.number().nullable(),\n }),\n events: [\"submit\", \"focus\", \"blur\"],\n slots: [],\n description:\n \"Text input field. Use statePath to bind to the state model for two-way binding. The value typed by the user is stored at the statePath.\",\n example: {\n placeholder: \"Enter text...\",\n statePath: \"/inputValue\",\n label: \"Name\",\n },\n },\n\n Switch: {\n props: z.object({\n value: z.boolean().nullable(),\n statePath: z.string().nullable(),\n label: z.string().nullable(),\n disabled: z.boolean().nullable(),\n }),\n events: [\"change\"],\n slots: [],\n description: \"Toggle switch. Use statePath to bind to the state model.\",\n },\n\n Checkbox: {\n props: z.object({\n checked: z.boolean().nullable(),\n statePath: z.string().nullable(),\n label: z.string().nullable(),\n disabled: z.boolean().nullable(),\n }),\n events: [\"change\"],\n slots: [],\n description:\n \"Checkbox for boolean selections. Use statePath to bind to the state model.\",\n },\n\n Slider: {\n props: z.object({\n min: z.number().nullable(),\n max: z.number().nullable(),\n step: z.number().nullable(),\n value: z.number().nullable(),\n statePath: z.string().nullable(),\n label: z.string().nullable(),\n color: z.string().nullable(),\n }),\n slots: [],\n description:\n \"Range slider for numeric values. Use statePath to bind to the state model.\",\n },\n\n SearchBar: {\n props: z.object({\n placeholder: z.string().nullable(),\n value: z.string().nullable(),\n statePath: z.string().nullable(),\n }),\n events: [\"submit\"],\n slots: [],\n description:\n \"Search input with icon. Bind on.submit to trigger search on submit.\",\n },\n\n // ==========================================================================\n // Feedback Components\n // ==========================================================================\n\n Spinner: {\n props: z.object({\n size: z.enum([\"small\", \"large\"]).nullable(),\n color: z.string().nullable(),\n }),\n slots: [],\n description: \"Loading spinner indicator. Use while content is loading.\",\n },\n\n ProgressBar: {\n props: z.object({\n progress: z.number(),\n color: z.string().nullable(),\n trackColor: z.string().nullable(),\n height: z.number().nullable(),\n }),\n slots: [],\n description: \"Horizontal progress bar. Set progress from 0 to 1.\",\n },\n\n // ==========================================================================\n // Composite Components\n // ==========================================================================\n\n Card: {\n props: z.object({\n title: z.string().nullable(),\n subtitle: z.string().nullable(),\n padding: z.number().nullable(),\n backgroundColor: z.string().nullable(),\n borderRadius: z.number().nullable(),\n elevated: z.boolean().nullable(),\n }),\n slots: [\"default\"],\n description:\n \"Elevated card container with optional title. Use for grouping related content.\",\n example: { title: \"Details\", padding: 16, elevated: true },\n },\n\n ListItem: {\n props: z.object({\n title: z.string(),\n subtitle: z.string().nullable(),\n leading: z.string().nullable(),\n trailing: z.string().nullable(),\n showChevron: z.boolean().nullable(),\n }),\n events: [\"press\"],\n slots: [],\n description:\n \"List row with title, subtitle, and optional leading/trailing text. Bind on.press for the press handler.\",\n example: {\n title: \"Settings\",\n subtitle: \"Manage your preferences\",\n showChevron: true,\n },\n },\n\n Modal: {\n props: z.object({\n visible: z.boolean(),\n title: z.string().nullable(),\n animationType: z.enum([\"slide\", \"fade\", \"none\"]).nullable(),\n statePath: z.string().nullable(),\n }),\n slots: [\"default\"],\n description:\n \"Modal overlay dialog. Use statePath to bind visibility to the state model.\",\n },\n};\n\n// =============================================================================\n// Standard Action Definitions for React Native\n// =============================================================================\n\n/**\n * Standard action definitions for React Native catalogs.\n *\n * These use React Native core APIs (Alert, Share, Linking) and\n * user-provided functions (navigate).\n */\nexport const standardActionDefinitions = {\n navigate: {\n params: z.object({\n screen: z.string(),\n params: z.record(z.string(), z.unknown()).nullable(),\n }),\n description:\n \"Navigate to a screen. Calls the user-provided navigation function.\",\n },\n\n goBack: {\n params: z.object({}),\n description: \"Navigate back to the previous screen.\",\n },\n\n showAlert: {\n params: z.object({\n title: z.string(),\n message: z.string().nullable(),\n buttons: z\n .array(\n z.object({\n text: z.string(),\n style: z.enum([\"default\", \"cancel\", \"destructive\"]).nullable(),\n action: z.string().nullable(),\n }),\n )\n .nullable(),\n }),\n description: \"Show a native alert dialog using Alert.alert().\",\n },\n\n share: {\n params: z.object({\n message: z.string(),\n url: z.string().nullable(),\n title: z.string().nullable(),\n }),\n description: \"Open the native share sheet using Share.share().\",\n },\n\n openURL: {\n params: z.object({\n url: z.string(),\n }),\n description: \"Open a URL in the default browser using Linking.openURL().\",\n },\n\n setState: {\n params: z.object({\n path: z.string(),\n value: z.unknown(),\n }),\n description: \"Update a value in the state model at the given path.\",\n },\n\n pushState: {\n params: z.object({\n path: z.string(),\n value: z.unknown(),\n clearPath: z.string().optional(),\n }),\n description:\n 'Append an item to an array in the state model. The value can contain { path: \"/statePath\" } references to read from current state, and \"$id\" to auto-generate a unique ID. Use clearPath to reset another path after pushing (e.g. clear an input field). Example: { path: \"/todos\", value: { id: \"$id\", title: { path: \"/newTodoText\" }, completed: false }, clearPath: \"/newTodoText\" }.',\n },\n\n removeState: {\n params: z.object({\n path: z.string(),\n index: z.number(),\n }),\n description:\n \"Remove an item from an array in the state model at the given index.\",\n },\n\n refresh: {\n params: z.object({\n target: z.string().nullable(),\n }),\n description:\n \"Trigger a data refresh. Optionally specify a target to refresh.\",\n },\n};\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/**\n * Type for a component definition\n */\nexport type ComponentDefinition = {\n props: z.ZodType;\n slots: string[];\n events?: string[];\n description: string;\n};\n\n/**\n * Type for an action definition\n */\nexport type ActionDefinition = {\n params: z.ZodType;\n description: string;\n};\n"],"mappings":"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","names":[]}
package/dist/{chunk-VBNJFRLI.mjs → chunk-MJPWQ6K7.mjs} RENAMED
@@ -29,7 +29,9 @@ var schema = defineSchema(
29
29
  /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */
30
30
  slots: s.array(s.string()),
31
31
  /** Description for AI generation hints */
32
- description: s.string()
32
+ description: s.string(),
33
+ /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
34
+ example: s.any()
33
35
  }),
34
36
  /** Action definitions (optional) */
35
37
  actions: s.map({
@@ -43,32 +45,32 @@ var schema = defineSchema(
43
45
  {
44
46
  defaultRules: [
45
47
  // Layout patterns
46
- "FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost Column must have flex:1 so it fills the SafeArea. The scrollable content area must also have flex:1. Structure: SafeArea > Column(flex:1, gap:0) > [header, Container(flex:1) > [ScrollContainer(...)], bottom-tabs]. Both the outer Column AND the content Container need flex:1.",
47
- "NEVER place a bottom tab bar or fixed footer inside a ScrollContainer. It must be a sibling AFTER the flex:1 container that holds the ScrollContainer.",
48
+ "FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost vertical layout component must have flex:1 so it fills the screen. The scrollable content area must also have flex:1. Structure: screen wrapper > vertical layout(flex:1, gap:0) > [header, content wrapper(flex:1) > [scroll container(...)], bottom-tabs]. Both the outer layout AND the content wrapper need flex:1. ONLY use components from the AVAILABLE COMPONENTS list.",
49
+ "NEVER place a bottom tab bar or fixed footer inside a scroll container. It must be a sibling AFTER the flex:1 container that holds the scroll content.",
48
50
  // Element integrity
49
51
  "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
50
52
  "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
51
- 'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the "repeat" field on the container element. Example: { "type": "Column", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
53
+ 'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the "repeat" field on a container element from the AVAILABLE COMPONENTS list. Example: { "type": "<ContainerComponent>", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
52
54
  // Visible field placement
53
- 'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"Column","props":{"gap":8},"visible":{"eq":[{"path":"/activeTab"},"home"]},"children":[...]}. WRONG: {"type":"Column","props":{"gap":8,"visible":{...}},"children":[...]}.',
55
+ 'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"eq":[{"path":"/activeTab"},"home"]},"children":[...]}. WRONG: {"type":"<ComponentName>","props":{},"visible":{...},"children":[...]} with visible inside props.',
54
56
  // Tab navigation pattern
55
- "TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use Pressable + setState action + visible conditions to make tabs functional.",
56
- 'Each tab button should be a Pressable wrapping its icon/label children, with action "setState" and actionParams { "path": "/activeTab", "value": "tabName" }.',
57
+ "TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use a pressable/tappable component + setState action + visible conditions to make tabs functional. ONLY use components from the AVAILABLE COMPONENTS list.",
58
+ 'Each tab button should be a pressable component wrapping its icon/label children, with action "setState" and actionParams { "path": "/activeTab", "value": "tabName" }.',
57
59
  `Each tab's content section should have a visible condition: { "eq": [{ "path": "/activeTab" }, "tabName"] }.`,
58
60
  "The first tab's content should NOT have a visible condition (so it shows by default when no tab is selected yet). All other tabs MUST have a visible condition.",
59
61
  // Tab active state highlighting (using dynamic props)
60
- "TAB ACTIVE STYLING: Use $cond dynamic props on the Icon inside each tab Pressable so a single Icon changes appearance based on the active tab.",
62
+ "TAB ACTIVE STYLING: Use $cond dynamic props on icon elements inside each tab button so a single icon changes appearance based on the active tab.",
61
63
  ' - For the icon name: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "home", "$else": "home-outline" }',
62
64
  ' - For the icon color: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "#007AFF", "$else": "#8E8E93" }',
63
65
  " - For labels, use $cond on the color prop similarly.",
64
66
  ' - For the FIRST/DEFAULT tab, use { "$cond": { "or": [{ "eq": [{ "path": "/activeTab" }, "thisTabName"] }, { "not": { "path": "/activeTab" } }] }, "$then": "#007AFF", "$else": "#8E8E93" } so it appears active before any tab is tapped.',
65
67
  // Push/pop screen navigation (all screens in one spec)
66
- 'SCREEN NAVIGATION: Use Pressable with action "push" and actionParams { "screen": "screenName" } to navigate to a new screen. Use action "pop" to go back. All screens must be defined in the SAME spec.',
68
+ 'SCREEN NAVIGATION: Use a pressable component with action "push" and actionParams { "screen": "screenName" } to navigate to a new screen. Use action "pop" to go back. All screens must be defined in the SAME spec. ONLY use components from the AVAILABLE COMPONENTS list.',
67
69
  'Each screen section uses a visible condition on /currentScreen: { "eq": [{ "path": "/currentScreen" }, "screenName"] }. The default/home screen should also be visible when /currentScreen is not set: { "or": [{ "eq": [{ "path": "/currentScreen" }, "home"] }, { "not": { "path": "/currentScreen" } }] }.',
68
70
  "push automatically maintains a /navStack in the state model so pop always returns to the previous screen.",
69
- 'Include a back button on pushed screens using action "pop". Example: Pressable(action:"pop") > Row > Icon(name:"chevron-back") + Label(text:"Back").',
71
+ 'Include a back button on pushed screens using action "pop". Example: pressable(action:"pop") > row layout > back icon + back label. ONLY use components from the AVAILABLE COMPONENTS list.',
70
72
  "Use push/pop for drill-down flows: tapping a list item to see details, opening a profile, etc. Use setState + visible conditions for tab switching within a screen.",
71
- 'Example: A list screen with items that push to detail: Pressable(action:"push", actionParams:{screen:"repo-detail"}) wrapping each list item card. The detail screen section has visible:{"eq":[{"path":"/currentScreen"},"repo-detail"]} and contains a back button with action:"pop".'
73
+ 'Example: A list screen with items that push to detail: a pressable component with action:"push" and actionParams:{screen:"detail"} wrapping each list item. The detail screen section has visible:{"eq":[{"path":"/currentScreen"},"detail"]} and contains a back button with action:"pop". ONLY use components from the AVAILABLE COMPONENTS list.'
72
74
  ]
73
75
  }
74
76
  );
@@ -78,4 +80,4 @@ export {
78
80
  schema,
79
81
  elementTreeSchema
80
82
  };
81
- //# sourceMappingURL=chunk-VBNJFRLI.mjs.map
83
+ //# sourceMappingURL=chunk-MJPWQ6K7.mjs.map
package/dist/chunk-MJPWQ6K7.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/schema.ts"],"sourcesContent":["import { defineSchema } from \"@json-render/core\";\n\n/**\n * The schema for @json-render/react-native\n *\n * Defines:\n * - Spec: A flat tree of elements with keys, types, props, and children references\n * - Catalog: Components with props schemas, and optional actions\n */\nexport const schema = defineSchema(\n (s) => ({\n // What the AI-generated SPEC looks like\n spec: s.object({\n /** Root element key */\n root: s.string(),\n /** Flat map of elements by key */\n elements: s.record(\n s.object({\n /** Component type from catalog */\n type: s.ref(\"catalog.components\"),\n /** Component props */\n props: s.propsOf(\"catalog.components\"),\n /** Child element keys (flat reference) */\n children: s.array(s.string()),\n /** Visibility condition */\n visible: s.any(),\n }),\n ),\n }),\n\n // What the CATALOG must provide\n catalog: s.object({\n /** Component definitions */\n components: s.map({\n /** Zod schema for component props */\n props: s.zod(),\n /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */\n slots: s.array(s.string()),\n /** Description for AI generation hints */\n description: s.string(),\n /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */\n example: s.any(),\n }),\n /** Action definitions (optional) */\n actions: s.map({\n /** Zod schema for action params */\n params: s.zod(),\n /** Description for AI generation hints */\n description: s.string(),\n }),\n }),\n }),\n {\n defaultRules: [\n // Layout patterns\n \"FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost vertical layout component must have flex:1 so it fills the screen. The scrollable content area must also have flex:1. Structure: screen wrapper > vertical layout(flex:1, gap:0) > [header, content wrapper(flex:1) > [scroll container(...)], bottom-tabs]. Both the outer layout AND the content wrapper need flex:1. ONLY use components from the AVAILABLE COMPONENTS list.\",\n \"NEVER place a bottom tab bar or fixed footer inside a scroll container. It must be a sibling AFTER the flex:1 container that holds the scroll content.\",\n\n // Element integrity\n \"CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.\",\n \"SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.\",\n 'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the \"repeat\" field on a container element from the AVAILABLE COMPONENTS list. Example: { \"type\": \"<ContainerComponent>\", \"props\": { \"gap\": 8 }, \"repeat\": { \"path\": \"/todos\", \"key\": \"id\" }, \"children\": [\"todo-item\"] }. Inside repeated children, use \"$item/field\" for per-item state paths and \"$index\" for the current array index. Do NOT hardcode individual elements for each array item.',\n\n // Visible field placement\n 'CRITICAL: The \"visible\" field goes on the ELEMENT object, NOT inside \"props\". Correct: {\"type\":\"<ComponentName>\",\"props\":{},\"visible\":{\"eq\":[{\"path\":\"/activeTab\"},\"home\"]},\"children\":[...]}. WRONG: {\"type\":\"<ComponentName>\",\"props\":{},\"visible\":{...},\"children\":[...]} with visible inside props.',\n\n // Tab navigation pattern\n \"TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use a pressable/tappable component + setState action + visible conditions to make tabs functional. ONLY use components from the AVAILABLE COMPONENTS list.\",\n 'Each tab button should be a pressable component wrapping its icon/label children, with action \"setState\" and actionParams { \"path\": \"/activeTab\", \"value\": \"tabName\" }.',\n 'Each tab\\'s content section should have a visible condition: { \"eq\": [{ \"path\": \"/activeTab\" }, \"tabName\"] }.',\n \"The first tab's content should NOT have a visible condition (so it shows by default when no tab is selected yet). All other tabs MUST have a visible condition.\",\n\n // Tab active state highlighting (using dynamic props)\n \"TAB ACTIVE STYLING: Use $cond dynamic props on icon elements inside each tab button so a single icon changes appearance based on the active tab.\",\n ' - For the icon name: { \"$cond\": { \"eq\": [{ \"path\": \"/activeTab\" }, \"thisTabName\"] }, \"$then\": \"home\", \"$else\": \"home-outline\" }',\n ' - For the icon color: { \"$cond\": { \"eq\": [{ \"path\": \"/activeTab\" }, \"thisTabName\"] }, \"$then\": \"#007AFF\", \"$else\": \"#8E8E93\" }',\n \" - For labels, use $cond on the color prop similarly.\",\n ' - For the FIRST/DEFAULT tab, use { \"$cond\": { \"or\": [{ \"eq\": [{ \"path\": \"/activeTab\" }, \"thisTabName\"] }, { \"not\": { \"path\": \"/activeTab\" } }] }, \"$then\": \"#007AFF\", \"$else\": \"#8E8E93\" } so it appears active before any tab is tapped.',\n\n // Push/pop screen navigation (all screens in one spec)\n 'SCREEN NAVIGATION: Use a pressable component with action \"push\" and actionParams { \"screen\": \"screenName\" } to navigate to a new screen. Use action \"pop\" to go back. All screens must be defined in the SAME spec. ONLY use components from the AVAILABLE COMPONENTS list.',\n 'Each screen section uses a visible condition on /currentScreen: { \"eq\": [{ \"path\": \"/currentScreen\" }, \"screenName\"] }. The default/home screen should also be visible when /currentScreen is not set: { \"or\": [{ \"eq\": [{ \"path\": \"/currentScreen\" }, \"home\"] }, { \"not\": { \"path\": \"/currentScreen\" } }] }.',\n \"push automatically maintains a /navStack in the state model so pop always returns to the previous screen.\",\n 'Include a back button on pushed screens using action \"pop\". Example: pressable(action:\"pop\") > row layout > back icon + back label. ONLY use components from the AVAILABLE COMPONENTS list.',\n \"Use push/pop for drill-down flows: tapping a list item to see details, opening a profile, etc. Use setState + visible conditions for tab switching within a screen.\",\n 'Example: A list screen with items that push to detail: a pressable component with action:\"push\" and actionParams:{screen:\"detail\"} wrapping each list item. The detail screen section has visible:{\"eq\":[{\"path\":\"/currentScreen\"},\"detail\"]} and contains a back button with action:\"pop\". ONLY use components from the AVAILABLE COMPONENTS list.',\n ],\n },\n);\n\n/**\n * Type for the React Native schema\n */\nexport type ReactNativeSchema = typeof schema;\n\n/**\n * Infer the spec type from a catalog\n */\nexport type ReactNativeSpec<TCatalog> = typeof schema extends {\n createCatalog: (catalog: TCatalog) => { _specType: infer S };\n}\n ? S\n : never;\n\n// Backward compatibility aliases\n/** @deprecated Use `schema` instead */\nexport const elementTreeSchema = schema;\n/** @deprecated Use `ReactNativeSchema` instead */\nexport type ElementTreeSchema = ReactNativeSchema;\n/** @deprecated Use `ReactNativeSpec` instead */\nexport type ElementTreeSpec<T> = ReactNativeSpec<T>;\n"],"mappings":";AAAA,SAAS,oBAAoB;AAStB,IAAM,SAAS;AAAA,EACpB,CAAC,OAAO;AAAA;AAAA,IAEN,MAAM,EAAE,OAAO;AAAA;AAAA,MAEb,MAAM,EAAE,OAAO;AAAA;AAAA,MAEf,UAAU,EAAE;AAAA,QACV,EAAE,OAAO;AAAA;AAAA,UAEP,MAAM,EAAE,IAAI,oBAAoB;AAAA;AAAA,UAEhC,OAAO,EAAE,QAAQ,oBAAoB;AAAA;AAAA,UAErC,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,UAE5B,SAAS,EAAE,IAAI;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA;AAAA,IAGD,SAAS,EAAE,OAAO;AAAA;AAAA,MAEhB,YAAY,EAAE,IAAI;AAAA;AAAA,QAEhB,OAAO,EAAE,IAAI;AAAA;AAAA,QAEb,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,QAEzB,aAAa,EAAE,OAAO;AAAA;AAAA,QAEtB,SAAS,EAAE,IAAI;AAAA,MACjB,CAAC;AAAA;AAAA,MAED,SAAS,EAAE,IAAI;AAAA;AAAA,QAEb,QAAQ,EAAE,IAAI;AAAA;AAAA,QAEd,aAAa,EAAE,OAAO;AAAA,MACxB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EACA;AAAA,IACE,cAAc;AAAA;AAAA,MAEZ;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAkBO,IAAM,oBAAoB;","names":[]}
package/dist/index.js CHANGED
@@ -691,7 +691,9 @@ var schema = (0, import_core5.defineSchema)(
691
691
  /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */
692
692
  slots: s.array(s.string()),
693
693
  /** Description for AI generation hints */
694
- description: s.string()
694
+ description: s.string(),
695
+ /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
696
+ example: s.any()
695
697
  }),
696
698
  /** Action definitions (optional) */
697
699
  actions: s.map({
@@ -705,39 +707,39 @@ var schema = (0, import_core5.defineSchema)(
705
707
  {
706
708
  defaultRules: [
707
709
  // Layout patterns
708
- "FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost Column must have flex:1 so it fills the SafeArea. The scrollable content area must also have flex:1. Structure: SafeArea > Column(flex:1, gap:0) > [header, Container(flex:1) > [ScrollContainer(...)], bottom-tabs]. Both the outer Column AND the content Container need flex:1.",
709
- "NEVER place a bottom tab bar or fixed footer inside a ScrollContainer. It must be a sibling AFTER the flex:1 container that holds the ScrollContainer.",
710
+ "FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost vertical layout component must have flex:1 so it fills the screen. The scrollable content area must also have flex:1. Structure: screen wrapper > vertical layout(flex:1, gap:0) > [header, content wrapper(flex:1) > [scroll container(...)], bottom-tabs]. Both the outer layout AND the content wrapper need flex:1. ONLY use components from the AVAILABLE COMPONENTS list.",
711
+ "NEVER place a bottom tab bar or fixed footer inside a scroll container. It must be a sibling AFTER the flex:1 container that holds the scroll content.",
710
712
  // Element integrity
711
713
  "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
712
714
  "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
713
- 'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the "repeat" field on the container element. Example: { "type": "Column", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
715
+ 'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the "repeat" field on a container element from the AVAILABLE COMPONENTS list. Example: { "type": "<ContainerComponent>", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
714
716
  // Visible field placement
715
- 'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"Column","props":{"gap":8},"visible":{"eq":[{"path":"/activeTab"},"home"]},"children":[...]}. WRONG: {"type":"Column","props":{"gap":8,"visible":{...}},"children":[...]}.',
717
+ 'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"eq":[{"path":"/activeTab"},"home"]},"children":[...]}. WRONG: {"type":"<ComponentName>","props":{},"visible":{...},"children":[...]} with visible inside props.',
716
718
  // Tab navigation pattern
717
- "TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use Pressable + setState action + visible conditions to make tabs functional.",
718
- 'Each tab button should be a Pressable wrapping its icon/label children, with action "setState" and actionParams { "path": "/activeTab", "value": "tabName" }.',
719
+ "TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use a pressable/tappable component + setState action + visible conditions to make tabs functional. ONLY use components from the AVAILABLE COMPONENTS list.",
720
+ 'Each tab button should be a pressable component wrapping its icon/label children, with action "setState" and actionParams { "path": "/activeTab", "value": "tabName" }.',
719
721
  `Each tab's content section should have a visible condition: { "eq": [{ "path": "/activeTab" }, "tabName"] }.`,
720
722
  "The first tab's content should NOT have a visible condition (so it shows by default when no tab is selected yet). All other tabs MUST have a visible condition.",
721
723
  // Tab active state highlighting (using dynamic props)
722
- "TAB ACTIVE STYLING: Use $cond dynamic props on the Icon inside each tab Pressable so a single Icon changes appearance based on the active tab.",
724
+ "TAB ACTIVE STYLING: Use $cond dynamic props on icon elements inside each tab button so a single icon changes appearance based on the active tab.",
723
725
  ' - For the icon name: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "home", "$else": "home-outline" }',
724
726
  ' - For the icon color: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "#007AFF", "$else": "#8E8E93" }',
725
727
  " - For labels, use $cond on the color prop similarly.",
726
728
  ' - For the FIRST/DEFAULT tab, use { "$cond": { "or": [{ "eq": [{ "path": "/activeTab" }, "thisTabName"] }, { "not": { "path": "/activeTab" } }] }, "$then": "#007AFF", "$else": "#8E8E93" } so it appears active before any tab is tapped.',
727
729
  // Push/pop screen navigation (all screens in one spec)
728
- 'SCREEN NAVIGATION: Use Pressable with action "push" and actionParams { "screen": "screenName" } to navigate to a new screen. Use action "pop" to go back. All screens must be defined in the SAME spec.',
730
+ 'SCREEN NAVIGATION: Use a pressable component with action "push" and actionParams { "screen": "screenName" } to navigate to a new screen. Use action "pop" to go back. All screens must be defined in the SAME spec. ONLY use components from the AVAILABLE COMPONENTS list.',
729
731
  'Each screen section uses a visible condition on /currentScreen: { "eq": [{ "path": "/currentScreen" }, "screenName"] }. The default/home screen should also be visible when /currentScreen is not set: { "or": [{ "eq": [{ "path": "/currentScreen" }, "home"] }, { "not": { "path": "/currentScreen" } }] }.',
730
732
  "push automatically maintains a /navStack in the state model so pop always returns to the previous screen.",
731
- 'Include a back button on pushed screens using action "pop". Example: Pressable(action:"pop") > Row > Icon(name:"chevron-back") + Label(text:"Back").',
733
+ 'Include a back button on pushed screens using action "pop". Example: pressable(action:"pop") > row layout > back icon + back label. ONLY use components from the AVAILABLE COMPONENTS list.',
732
734
  "Use push/pop for drill-down flows: tapping a list item to see details, opening a profile, etc. Use setState + visible conditions for tab switching within a screen.",
733
- 'Example: A list screen with items that push to detail: Pressable(action:"push", actionParams:{screen:"repo-detail"}) wrapping each list item card. The detail screen section has visible:{"eq":[{"path":"/currentScreen"},"repo-detail"]} and contains a back button with action:"pop".'
735
+ 'Example: A list screen with items that push to detail: a pressable component with action:"push" and actionParams:{screen:"detail"} wrapping each list item. The detail screen section has visible:{"eq":[{"path":"/currentScreen"},"detail"]} and contains a back button with action:"pop". ONLY use components from the AVAILABLE COMPONENTS list.'
734
736
  ]
735
737
  }
736
738
  );
737
739
  var elementTreeSchema = schema;
738
740
 
739
741
  // src/renderer.tsx
740
- var import_react6 = require("react");
742
+ var import_react6 = __toESM(require("react"));
741
743
  var import_core6 = require("@json-render/core");
742
744
 
743
745
  // src/components/standard.tsx
@@ -1555,6 +1557,28 @@ var modalStyles = import_react_native2.StyleSheet.create({
1555
1557
 
1556
1558
  // src/renderer.tsx
1557
1559
  var import_jsx_runtime7 = require("react/jsx-runtime");
1560
+ var ElementErrorBoundary = class extends import_react6.default.Component {
1561
+ constructor(props) {
1562
+ super(props);
1563
+ this.state = { hasError: false };
1564
+ }
1565
+ static getDerivedStateFromError() {
1566
+ return { hasError: true };
1567
+ }
1568
+ componentDidCatch(error, info) {
1569
+ console.error(
1570
+ `[json-render] Rendering error in <${this.props.elementType}>:`,
1571
+ error,
1572
+ info.componentStack
1573
+ );
1574
+ }
1575
+ render() {
1576
+ if (this.state.hasError) {
1577
+ return null;
1578
+ }
1579
+ return this.props.children;
1580
+ }
1581
+ };
1558
1582
  function ElementRenderer({
1559
1583
  element,
1560
1584
  spec,
@@ -1648,7 +1672,7 @@ function ElementRenderer({
1648
1672
  childKey
1649
1673
  );
1650
1674
  });
1651
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Component, { element: resolvedElement, emit, loading, children });
1675
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Component, { element: resolvedElement, emit, loading, children }) });
1652
1676
  }
1653
1677
  function RepeatChildren({
1654
1678
  element,
@@ -2288,7 +2312,8 @@ var standardComponentDefinitions = {
2288
2312
  flex: import_zod.z.number().nullable()
2289
2313
  }),
2290
2314
  slots: ["default"],
2291
- description: "Generic container wrapper. Use for grouping elements with padding, margin, and background color."
2315
+ description: "Generic container wrapper. Use for grouping elements with padding, margin, and background color.",
2316
+ example: { padding: 16, backgroundColor: "#FFFFFF" }
2292
2317
  },
2293
2318
  Row: {
2294
2319
  props: import_zod.z.object({
@@ -2307,7 +2332,8 @@ var standardComponentDefinitions = {
2307
2332
  flex: import_zod.z.number().nullable()
2308
2333
  }),
2309
2334
  slots: ["default"],
2310
- description: "Horizontal flex layout. Use for placing elements side by side."
2335
+ description: "Horizontal flex layout. Use for placing elements side by side.",
2336
+ example: { gap: 12, alignItems: "center" }
2311
2337
  },
2312
2338
  Column: {
2313
2339
  props: import_zod.z.object({
@@ -2325,7 +2351,8 @@ var standardComponentDefinitions = {
2325
2351
  flex: import_zod.z.number().nullable()
2326
2352
  }),
2327
2353
  slots: ["default"],
2328
- description: "Vertical flex layout. Use for stacking elements top to bottom."
2354
+ description: "Vertical flex layout. Use for stacking elements top to bottom.",
2355
+ example: { gap: 12, padding: 16 }
2329
2356
  },
2330
2357
  ScrollContainer: {
2331
2358
  props: import_zod.z.object({
@@ -2379,7 +2406,8 @@ var standardComponentDefinitions = {
2379
2406
  align: import_zod.z.enum(["left", "center", "right"]).nullable()
2380
2407
  }),
2381
2408
  slots: [],
2382
- description: "Heading text at various levels. h1 is largest, h4 is smallest."
2409
+ description: "Heading text at various levels. h1 is largest, h4 is smallest.",
2410
+ example: { text: "Welcome", level: "h1" }
2383
2411
  },
2384
2412
  Paragraph: {
2385
2413
  props: import_zod.z.object({
@@ -2390,7 +2418,8 @@ var standardComponentDefinitions = {
2390
2418
  fontSize: import_zod.z.number().nullable()
2391
2419
  }),
2392
2420
  slots: [],
2393
- description: "Body text paragraph. Use for descriptions and longer content."
2421
+ description: "Body text paragraph. Use for descriptions and longer content.",
2422
+ example: { text: "This is a paragraph of body text." }
2394
2423
  },
2395
2424
  Label: {
2396
2425
  props: import_zod.z.object({
@@ -2400,7 +2429,8 @@ var standardComponentDefinitions = {
2400
2429
  size: import_zod.z.enum(["xs", "sm", "md"]).nullable()
2401
2430
  }),
2402
2431
  slots: [],
2403
- description: "Small utility text. Use for captions, form labels, and secondary information."
2432
+ description: "Small utility text. Use for captions, form labels, and secondary information.",
2433
+ example: { text: "Status", size: "sm" }
2404
2434
  },
2405
2435
  Image: {
2406
2436
  props: import_zod.z.object({
@@ -2412,7 +2442,13 @@ var standardComponentDefinitions = {
2412
2442
  borderRadius: import_zod.z.number().nullable()
2413
2443
  }),
2414
2444
  slots: [],
2415
- description: "Image display. Provide a source URL and optional dimensions."
2445
+ description: "Image display. Provide a source URL and optional dimensions.",
2446
+ example: {
2447
+ src: "https://picsum.photos/300/200",
2448
+ alt: "Photo",
2449
+ width: 300,
2450
+ height: 200
2451
+ }
2416
2452
  },
2417
2453
  Avatar: {
2418
2454
  props: import_zod.z.object({
@@ -2422,7 +2458,8 @@ var standardComponentDefinitions = {
2422
2458
  backgroundColor: import_zod.z.string().nullable()
2423
2459
  }),
2424
2460
  slots: [],
2425
- description: "Circular avatar showing an image or initials. Use for user profiles and contacts."
2461
+ description: "Circular avatar showing an image or initials. Use for user profiles and contacts.",
2462
+ example: { initials: "JD", size: "md" }
2426
2463
  },
2427
2464
  Badge: {
2428
2465
  props: import_zod.z.object({
@@ -2430,7 +2467,8 @@ var standardComponentDefinitions = {
2430
2467
  variant: import_zod.z.enum(["default", "info", "success", "warning", "error"]).nullable()
2431
2468
  }),
2432
2469
  slots: [],
2433
- description: "Small colored indicator with a label. Use for status, counts, and categories."
2470
+ description: "Small colored indicator with a label. Use for status, counts, and categories.",
2471
+ example: { label: "New", variant: "info" }
2434
2472
  },
2435
2473
  Chip: {
2436
2474
  props: import_zod.z.object({
@@ -2455,7 +2493,8 @@ var standardComponentDefinitions = {
2455
2493
  }),
2456
2494
  events: ["press"],
2457
2495
  slots: [],
2458
- description: "Pressable button with label. Set variant for styling. Bind on.press for the handler to call on press."
2496
+ description: "Pressable button with label. Set variant for styling. Bind on.press for the handler to call on press.",
2497
+ example: { label: "Submit", variant: "primary" }
2459
2498
  },
2460
2499
  TextInput: {
2461
2500
  props: import_zod.z.object({
@@ -2471,7 +2510,12 @@ var standardComponentDefinitions = {
2471
2510
  }),
2472
2511
  events: ["submit", "focus", "blur"],
2473
2512
  slots: [],
2474
- description: "Text input field. Use statePath to bind to the state model for two-way binding. The value typed by the user is stored at the statePath."
2513
+ description: "Text input field. Use statePath to bind to the state model for two-way binding. The value typed by the user is stored at the statePath.",
2514
+ example: {
2515
+ placeholder: "Enter text...",
2516
+ statePath: "/inputValue",
2517
+ label: "Name"
2518
+ }
2475
2519
  },
2476
2520
  Switch: {
2477
2521
  props: import_zod.z.object({
@@ -2552,7 +2596,8 @@ var standardComponentDefinitions = {
2552
2596
  elevated: import_zod.z.boolean().nullable()
2553
2597
  }),
2554
2598
  slots: ["default"],
2555
- description: "Elevated card container with optional title. Use for grouping related content."
2599
+ description: "Elevated card container with optional title. Use for grouping related content.",
2600
+ example: { title: "Details", padding: 16, elevated: true }
2556
2601
  },
2557
2602
  ListItem: {
2558
2603
  props: import_zod.z.object({
@@ -2564,7 +2609,12 @@ var standardComponentDefinitions = {
2564
2609
  }),
2565
2610
  events: ["press"],
2566
2611
  slots: [],
2567
- description: "List row with title, subtitle, and optional leading/trailing text. Bind on.press for the press handler."
2612
+ description: "List row with title, subtitle, and optional leading/trailing text. Bind on.press for the press handler.",
2613
+ example: {
2614
+ title: "Settings",
2615
+ subtitle: "Manage your preferences",
2616
+ showChevron: true
2617
+ }
2568
2618
  },
2569
2619
  Modal: {
2570
2620
  props: import_zod.z.object({