view-contracts 0.3.3 → 0.3.5

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 (37) hide show
  1. package/README.md +6 -6
  2. package/cli-contract.yaml +1 -1
  3. package/dist/view-contracts.bundle.mjs +169 -153
  4. package/dist/view-contracts.bundle.mjs.map +4 -4
  5. package/docs/cli-reference.md +1 -1
  6. package/package.json +1 -1
  7. package/renderers/NATIVE_THEME_EMIT.md +73 -0
  8. package/renderers/compose/README.md +7 -0
  9. package/renderers/compose/templates/Screen.kt.hbs +3 -5
  10. package/renderers/compose/templates/VcTheme.kt.hbs +7 -13
  11. package/renderers/react/defaults/theme.yaml +7 -0
  12. package/renderers/react/defaults/tokens.yaml +11 -0
  13. package/renderers/react/lowering/foldStyle.ts +87 -0
  14. package/renderers/react/lowering/lowerToJsx.ts +58 -69
  15. package/renderers/react/renderComponents.ts +180 -24
  16. package/renderers/react/renderRuntime.ts +36 -43
  17. package/renderers/react/routes.yaml +2 -2
  18. package/renderers/react/runtime/index.ts +1 -1
  19. package/renderers/react/runtime/style.ts +3 -55
  20. package/renderers/react/runtime/theme.css +1 -1
  21. package/renderers/react/runtime/types.ts +0 -24
  22. package/renderers/react/style/foldLiterals.ts +129 -0
  23. package/renderers/react/syncGeneratedRuntime.ts +35 -47
  24. package/renderers/react/templates/components-index.ts.hbs +2 -2
  25. package/renderers/react/templates/runtime.ts.hbs +10 -0
  26. package/renderers/react/templates/style-helpers.ts.hbs +2 -2
  27. package/renderers/swiftui/README.md +7 -0
  28. package/renderers/swiftui/templates/Screen.swift.hbs +3 -5
  29. package/renderers/swiftui/templates/VcTheme.swift.hbs +8 -16
  30. package/spec/ui-dsl.schema.json +1331 -345
  31. package/src/generated/schema/allowed-components.ts +1 -1
  32. package/src/generated/schema/dsl-enums.ts +1 -1
  33. package/src/generated/schema/dsl-properties.ts +1 -1
  34. package/src/generated/schema/index.ts +1 -1
  35. package/src/generated/schema/lowering-style-properties.ts +9 -2
  36. package/src/generated/schema/react-renderer-element-config.ts +1 -1
  37. package/src/generated/schema/schema-document.ts +1 -1
@@ -1,24 +1,109 @@
1
1
  {
2
2
  "$schema": "./ui-dsl.meta.json",
3
3
  "tokens": {
4
- "role": ["button", "link", "heading", "list", "listitem", "main", "dialog", "status"],
5
- "widthSize": ["wrap", "fill"],
6
- "heightSize": ["wrap", "fill"],
7
- "align": ["start", "center", "end", "stretch"],
8
- "justify": ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"],
9
- "contentAlign": ["topStart", "top", "topEnd", "start", "center", "end", "bottomStart", "bottom", "bottomEnd"],
10
- "axis": ["vertical", "horizontal"],
11
- "direction": ["ltr", "rtl", "system"],
12
- "scroll": ["none", "vertical", "horizontal", "both"],
13
- "border": ["none"],
14
- "shadow": ["none", "sm", "md", "lg"],
15
- "textAlign": ["start", "center", "end"],
16
- "lineLimit": ["none"],
17
- "textOverflow": ["clip", "ellipsis"],
18
- "fontWeight": ["regular", "medium", "bold"],
19
- "imageFit": ["contain", "cover", "fill", "none"],
20
- "keyboardType": ["text", "number", "email", "url", "password", "tel"],
21
- "clip": ["none", "bounds", "shape"]
4
+ "role": [
5
+ "button",
6
+ "link",
7
+ "heading",
8
+ "list",
9
+ "listitem",
10
+ "main",
11
+ "dialog",
12
+ "status"
13
+ ],
14
+ "widthSize": [
15
+ "wrap",
16
+ "fill"
17
+ ],
18
+ "heightSize": [
19
+ "wrap",
20
+ "fill"
21
+ ],
22
+ "align": [
23
+ "start",
24
+ "center",
25
+ "end",
26
+ "stretch"
27
+ ],
28
+ "justify": [
29
+ "start",
30
+ "center",
31
+ "end",
32
+ "spaceBetween",
33
+ "spaceAround",
34
+ "spaceEvenly"
35
+ ],
36
+ "contentAlign": [
37
+ "topStart",
38
+ "top",
39
+ "topEnd",
40
+ "start",
41
+ "center",
42
+ "end",
43
+ "bottomStart",
44
+ "bottom",
45
+ "bottomEnd"
46
+ ],
47
+ "axis": [
48
+ "vertical",
49
+ "horizontal"
50
+ ],
51
+ "direction": [
52
+ "ltr",
53
+ "rtl",
54
+ "system"
55
+ ],
56
+ "scroll": [
57
+ "none",
58
+ "vertical",
59
+ "horizontal",
60
+ "both"
61
+ ],
62
+ "border": [
63
+ "none"
64
+ ],
65
+ "shadow": [
66
+ "none",
67
+ "sm",
68
+ "md",
69
+ "lg"
70
+ ],
71
+ "textAlign": [
72
+ "start",
73
+ "center",
74
+ "end"
75
+ ],
76
+ "lineLimit": [
77
+ "none"
78
+ ],
79
+ "textOverflow": [
80
+ "clip",
81
+ "ellipsis"
82
+ ],
83
+ "fontWeight": [
84
+ "regular",
85
+ "medium",
86
+ "bold"
87
+ ],
88
+ "imageFit": [
89
+ "contain",
90
+ "cover",
91
+ "fill",
92
+ "none"
93
+ ],
94
+ "keyboardType": [
95
+ "text",
96
+ "number",
97
+ "email",
98
+ "url",
99
+ "password",
100
+ "tel"
101
+ ],
102
+ "clip": [
103
+ "none",
104
+ "bounds",
105
+ "shape"
106
+ ]
22
107
  },
23
108
  "properties": {
24
109
  "id": {
@@ -45,198 +130,448 @@
45
130
  "enabled": {
46
131
  "type": "boolean",
47
132
  "x-category": "state",
48
- "x-appliesTo": ["Button", "IconButton", "TextInput", "TextArea", "Select", "Checkbox", "Radio", "Switch"]
133
+ "x-appliesTo": [
134
+ "Button",
135
+ "IconButton",
136
+ "TextInput",
137
+ "TextArea",
138
+ "Select",
139
+ "Checkbox",
140
+ "Radio",
141
+ "Switch"
142
+ ]
49
143
  },
50
144
  "selected": {
51
145
  "type": "boolean",
52
146
  "x-category": "state",
53
- "x-appliesTo": ["ListItem"]
147
+ "x-appliesTo": [
148
+ "ListItem"
149
+ ]
54
150
  },
55
151
  "checked": {
56
152
  "type": "boolean",
57
153
  "x-category": "state",
58
- "x-appliesTo": ["Checkbox", "Radio", "Switch"]
154
+ "x-appliesTo": [
155
+ "Checkbox",
156
+ "Radio",
157
+ "Switch"
158
+ ]
59
159
  },
60
160
  "readonly": {
61
161
  "type": "boolean",
62
162
  "x-category": "state",
63
- "x-appliesTo": ["TextInput", "TextArea"]
163
+ "x-appliesTo": [
164
+ "TextInput",
165
+ "TextArea"
166
+ ]
64
167
  },
65
168
  "required": {
66
169
  "type": "boolean",
67
170
  "x-category": "state",
68
- "x-appliesTo": ["TextInput", "TextArea", "Select", "Checkbox", "Field"]
171
+ "x-appliesTo": [
172
+ "TextInput",
173
+ "TextArea",
174
+ "Select",
175
+ "Checkbox",
176
+ "Field"
177
+ ]
69
178
  },
70
179
  "width": {
71
- "type": ["string", "number"],
180
+ "type": [
181
+ "string",
182
+ "number"
183
+ ],
72
184
  "enum": "widthSize",
73
185
  "x-category": "size",
74
186
  "x-notes": "string: wrap|fill; number: fixed px/dp/pt; flex ratio uses weight property"
75
187
  },
76
188
  "height": {
77
- "type": ["string", "number"],
189
+ "type": [
190
+ "string",
191
+ "number"
192
+ ],
78
193
  "enum": "heightSize",
79
194
  "x-category": "size",
80
195
  "x-notes": "string: wrap|fill; number: fixed px/dp/pt; flex ratio uses weight property"
81
196
  },
82
- "minWidth": { "type": "number", "x-category": "size" },
83
- "maxWidth": { "type": ["string", "number"], "x-category": "size", "x-notes": "number or fill" },
84
- "minHeight": { "type": "number", "x-category": "size" },
85
- "maxHeight": { "type": ["string", "number"], "x-category": "size", "x-notes": "number or fill" },
86
- "aspectRatio": { "type": "number", "x-category": "size", "x-appliesTo": ["Image"] },
197
+ "minWidth": {
198
+ "type": "number",
199
+ "x-category": "size"
200
+ },
201
+ "maxWidth": {
202
+ "type": [
203
+ "string",
204
+ "number"
205
+ ],
206
+ "x-category": "size",
207
+ "x-notes": "number or fill"
208
+ },
209
+ "minHeight": {
210
+ "type": "number",
211
+ "x-category": "size"
212
+ },
213
+ "maxHeight": {
214
+ "type": [
215
+ "string",
216
+ "number"
217
+ ],
218
+ "x-category": "size",
219
+ "x-notes": "number or fill"
220
+ },
221
+ "aspectRatio": {
222
+ "type": "number",
223
+ "x-category": "size",
224
+ "x-appliesTo": [
225
+ "Image"
226
+ ]
227
+ },
87
228
  "weight": {
88
229
  "type": "number",
89
230
  "x-category": "size",
90
231
  "x-notes": "Flex ratio among Row/Column direct children; Spacer is the primary use case"
91
232
  },
92
- "padding": { "type": ["string", "number"], "x-category": "spacing", "x-notes": "space token or per-side" },
233
+ "padding": {
234
+ "type": [
235
+ "string",
236
+ "number"
237
+ ],
238
+ "x-category": "spacing",
239
+ "x-notes": "space token or per-side"
240
+ },
93
241
  "gap": {
94
- "type": ["string", "number"],
242
+ "type": [
243
+ "string",
244
+ "number"
245
+ ],
95
246
  "x-category": "spacing",
96
- "x-appliesTo": ["Row", "Column", "List"]
247
+ "x-appliesTo": [
248
+ "Row",
249
+ "Column",
250
+ "List"
251
+ ]
97
252
  },
98
253
  "align": {
99
254
  "type": "string",
100
255
  "enum": "align",
101
256
  "x-category": "alignment",
102
- "x-appliesTo": ["Row", "Column"]
257
+ "x-appliesTo": [
258
+ "Row",
259
+ "Column"
260
+ ]
103
261
  },
104
262
  "justify": {
105
263
  "type": "string",
106
264
  "enum": "justify",
107
265
  "x-category": "alignment",
108
- "x-appliesTo": ["Row", "Column"]
266
+ "x-appliesTo": [
267
+ "Row",
268
+ "Column"
269
+ ]
270
+ },
271
+ "selfAlign": {
272
+ "type": "string",
273
+ "enum": "align",
274
+ "x-category": "alignment"
109
275
  },
110
- "selfAlign": { "type": "string", "enum": "align", "x-category": "alignment" },
111
276
  "contentAlign": {
112
277
  "type": "string",
113
278
  "enum": "contentAlign",
114
279
  "x-category": "alignment",
115
- "x-appliesTo": ["Box", "Stack"]
280
+ "x-appliesTo": [
281
+ "Box",
282
+ "Stack"
283
+ ]
116
284
  },
117
285
  "axis": {
118
286
  "type": "string",
119
287
  "enum": "axis",
120
288
  "x-category": "direction",
121
- "x-appliesTo": ["ScrollArea", "List", "Divider"]
289
+ "x-appliesTo": [
290
+ "ScrollArea",
291
+ "List",
292
+ "Divider"
293
+ ]
122
294
  },
123
295
  "direction": {
124
296
  "type": "string",
125
297
  "enum": "direction",
126
298
  "x-category": "direction",
127
- "x-appliesTo": ["App", "Page"],
299
+ "x-appliesTo": [
300
+ "App",
301
+ "Page"
302
+ ],
128
303
  "description": "Text/layout direction; set at app or screen root, not per layout container"
129
304
  },
130
305
  "scroll": {
131
306
  "type": "string",
132
307
  "enum": "scroll",
133
308
  "x-category": "overflow",
134
- "x-appliesTo": ["ScrollArea"]
309
+ "x-appliesTo": [
310
+ "ScrollArea"
311
+ ]
312
+ },
313
+ "background": {
314
+ "type": "string",
315
+ "x-category": "visual",
316
+ "x-notes": "color token"
135
317
  },
136
- "background": { "type": "string", "x-category": "visual", "x-notes": "color token" },
137
318
  "foreground": {
138
319
  "type": "string",
139
320
  "x-category": "visual",
140
- "x-appliesTo": ["Text", "Icon", "Button"],
321
+ "x-appliesTo": [
322
+ "Text",
323
+ "Icon",
324
+ "Button"
325
+ ],
141
326
  "x-notes": "color token"
142
327
  },
143
- "border": { "type": ["string", "object"], "enum": "border", "x-category": "visual", "x-notes": "none|token|{width,color}" },
144
- "radius": { "type": "string", "x-category": "visual", "x-notes": "radius token" },
145
- "shadow": { "type": "string", "enum": "shadow", "x-category": "visual" },
146
- "opacity": { "type": "number", "x-category": "visual", "x-notes": "0..1" },
147
- "clip": { "type": "string", "enum": "clip", "x-category": "visual" },
148
- "textStyle": { "type": "string", "x-category": "text", "x-appliesTo": ["Text", "Heading"], "x-notes": "typography token" },
149
- "textAlign": { "type": "string", "enum": "textAlign", "x-category": "text", "x-appliesTo": ["Text", "Heading"] },
150
- "lineLimit": { "type": ["string", "number"], "enum": "lineLimit", "x-category": "text", "x-appliesTo": ["Text"] },
151
- "textOverflow": { "type": "string", "enum": "textOverflow", "x-category": "text", "x-appliesTo": ["Text"] },
152
- "fontWeight": { "type": "string", "enum": "fontWeight", "x-category": "text", "x-appliesTo": ["Text"] },
328
+ "border": {
329
+ "type": [
330
+ "string",
331
+ "object"
332
+ ],
333
+ "enum": "border",
334
+ "x-category": "visual",
335
+ "x-notes": "none|token|{width,color}"
336
+ },
337
+ "radius": {
338
+ "type": "string",
339
+ "x-category": "visual",
340
+ "x-notes": "radius token"
341
+ },
342
+ "shadow": {
343
+ "type": "string",
344
+ "enum": "shadow",
345
+ "x-category": "visual"
346
+ },
347
+ "opacity": {
348
+ "type": "number",
349
+ "x-category": "visual",
350
+ "x-notes": "0..1"
351
+ },
352
+ "clip": {
353
+ "type": "string",
354
+ "enum": "clip",
355
+ "x-category": "visual"
356
+ },
357
+ "textStyle": {
358
+ "type": "string",
359
+ "x-category": "text",
360
+ "x-appliesTo": [
361
+ "Text",
362
+ "Heading"
363
+ ],
364
+ "x-notes": "typography token"
365
+ },
366
+ "textAlign": {
367
+ "type": "string",
368
+ "enum": "textAlign",
369
+ "x-category": "text",
370
+ "x-appliesTo": [
371
+ "Text",
372
+ "Heading"
373
+ ]
374
+ },
375
+ "lineLimit": {
376
+ "type": [
377
+ "string",
378
+ "number"
379
+ ],
380
+ "enum": "lineLimit",
381
+ "x-category": "text",
382
+ "x-appliesTo": [
383
+ "Text"
384
+ ]
385
+ },
386
+ "textOverflow": {
387
+ "type": "string",
388
+ "enum": "textOverflow",
389
+ "x-category": "text",
390
+ "x-appliesTo": [
391
+ "Text"
392
+ ]
393
+ },
394
+ "fontWeight": {
395
+ "type": "string",
396
+ "enum": "fontWeight",
397
+ "x-category": "text",
398
+ "x-appliesTo": [
399
+ "Text"
400
+ ]
401
+ },
153
402
  "headingLevel": {
154
403
  "type": "number",
155
404
  "x-category": "text",
156
- "x-appliesTo": ["Heading"],
405
+ "x-appliesTo": [
406
+ "Heading"
407
+ ],
157
408
  "description": "Semantic heading level (1–6) for h1/h2 mapping and accessibility hierarchy"
158
409
  },
159
- "fit": { "type": "string", "enum": "imageFit", "x-category": "image", "x-appliesTo": ["Image"] },
410
+ "fit": {
411
+ "type": "string",
412
+ "enum": "imageFit",
413
+ "x-category": "image",
414
+ "x-appliesTo": [
415
+ "Image"
416
+ ]
417
+ },
160
418
  "src": {
161
419
  "type": "string",
162
420
  "x-category": "image",
163
- "x-appliesTo": ["Image"],
421
+ "x-appliesTo": [
422
+ "Image"
423
+ ],
164
424
  "description": "Image source URL or asset reference"
165
425
  },
166
- "alt": { "type": "string", "x-category": "image", "x-appliesTo": ["Image", "Icon"], "description": "Alternative text; not a source reference" },
426
+ "alt": {
427
+ "type": "string",
428
+ "x-category": "image",
429
+ "x-appliesTo": [
430
+ "Image",
431
+ "Icon"
432
+ ],
433
+ "description": "Alternative text; not a source reference"
434
+ },
167
435
  "name": {
168
436
  "type": "string",
169
437
  "x-category": "image",
170
- "x-appliesTo": ["Icon"],
438
+ "x-appliesTo": [
439
+ "Icon"
440
+ ],
171
441
  "description": "Icon token or asset name in the renderer icon set"
172
442
  },
173
443
  "onClick": {
174
444
  "type": "action",
175
445
  "x-category": "interaction",
176
- "x-appliesTo": ["Button", "IconButton", "Link"],
446
+ "x-appliesTo": [
447
+ "Button",
448
+ "IconButton",
449
+ "Link"
450
+ ],
177
451
  "description": "Action id, not arbitrary code"
178
452
  },
179
453
  "onSubmit": {
180
454
  "type": "action",
181
455
  "x-category": "interaction",
182
- "x-appliesTo": ["Form"],
456
+ "x-appliesTo": [
457
+ "Form"
458
+ ],
183
459
  "description": "Form submit/validation action id"
184
460
  },
185
461
  "onChange": {
186
462
  "type": "action",
187
463
  "x-category": "interaction",
188
- "x-appliesTo": ["TextInput", "TextArea", "Select", "Checkbox", "Radio", "Switch"]
464
+ "x-appliesTo": [
465
+ "TextInput",
466
+ "TextArea",
467
+ "Select",
468
+ "Checkbox",
469
+ "Radio",
470
+ "Switch"
471
+ ]
472
+ },
473
+ "focusable": {
474
+ "type": "boolean",
475
+ "x-category": "interaction"
189
476
  },
190
- "focusable": { "type": "boolean", "x-category": "interaction" },
191
477
  "autoFocus": {
192
478
  "type": "boolean",
193
479
  "x-category": "interaction",
194
- "x-appliesTo": ["Modal", "TextInput"]
480
+ "x-appliesTo": [
481
+ "Modal",
482
+ "TextInput"
483
+ ]
195
484
  },
196
485
  "keyboardType": {
197
486
  "type": "string",
198
487
  "enum": "keyboardType",
199
488
  "x-category": "interaction",
200
- "x-appliesTo": ["TextInput"]
489
+ "x-appliesTo": [
490
+ "TextInput"
491
+ ]
201
492
  },
202
493
  "value": {
203
- "type": ["string", "number", "boolean"],
494
+ "type": [
495
+ "string",
496
+ "number",
497
+ "boolean"
498
+ ],
204
499
  "x-category": "data",
205
- "x-appliesTo": ["TextInput", "TextArea", "Select", "Radio", "Checkbox", "Switch"]
500
+ "x-appliesTo": [
501
+ "TextInput",
502
+ "TextArea",
503
+ "Select",
504
+ "Radio",
505
+ "Checkbox",
506
+ "Switch"
507
+ ]
206
508
  },
207
509
  "binding": {
208
510
  "type": "string",
209
511
  "x-category": "data",
210
- "x-appliesTo": ["TextInput", "TextArea", "Select", "Checkbox", "Radio", "Switch"],
512
+ "x-appliesTo": [
513
+ "TextInput",
514
+ "TextArea",
515
+ "Select",
516
+ "Checkbox",
517
+ "Radio",
518
+ "Switch"
519
+ ],
211
520
  "description": "ViewModel or form state field identifier"
212
521
  },
213
- "placeholder": { "type": "string", "x-category": "data", "x-appliesTo": ["TextInput", "TextArea"] },
522
+ "placeholder": {
523
+ "type": "string",
524
+ "x-category": "data",
525
+ "x-appliesTo": [
526
+ "TextInput",
527
+ "TextArea"
528
+ ]
529
+ },
214
530
  "options": {
215
531
  "type": "array",
216
532
  "x-category": "data",
217
- "x-appliesTo": ["Select"],
533
+ "x-appliesTo": [
534
+ "Select"
535
+ ],
218
536
  "x-notes": "array<{value,label}>"
219
537
  },
220
538
  "error": {
221
- "type": ["string", "null"],
539
+ "type": [
540
+ "string",
541
+ "null"
542
+ ],
222
543
  "x-category": "validation",
223
- "x-appliesTo": ["Field", "TextInput", "TextArea", "Select"]
544
+ "x-appliesTo": [
545
+ "Field",
546
+ "TextInput",
547
+ "TextArea",
548
+ "Select"
549
+ ]
224
550
  },
225
551
  "help": {
226
- "type": ["string", "null"],
552
+ "type": [
553
+ "string",
554
+ "null"
555
+ ],
227
556
  "x-category": "validation",
228
- "x-appliesTo": ["Field", "TextInput", "TextArea", "Select"]
557
+ "x-appliesTo": [
558
+ "Field",
559
+ "TextInput",
560
+ "TextArea",
561
+ "Select"
562
+ ]
229
563
  },
230
564
  "variant": {
231
565
  "type": "string",
232
566
  "x-category": "visual",
233
- "x-appliesTo": ["Button", "IconButton", "Box", "Text", "Heading"],
234
567
  "x-notes": "design token variant"
235
568
  },
236
569
  "theme": {
237
570
  "type": "string",
238
571
  "x-category": "visual",
239
- "x-appliesTo": ["App"],
572
+ "x-appliesTo": [
573
+ "App"
574
+ ],
240
575
  "x-notes": "active theme id for runtime theme switching"
241
576
  }
242
577
  },
@@ -247,116 +582,282 @@
247
582
  "description": "App root; holds theme/token/navigation context",
248
583
  "x-notes": "Optional; not required for single-screen DSL",
249
584
  "properties": {
250
- "id": { "$ref": "#/properties/id" },
251
- "padding": { "$ref": "#/properties/padding" },
252
- "direction": { "$ref": "#/properties/direction" },
253
- "theme": { "$ref": "#/properties/theme" }
585
+ "id": {
586
+ "$ref": "#/properties/id"
587
+ },
588
+ "padding": {
589
+ "$ref": "#/properties/padding"
590
+ },
591
+ "direction": {
592
+ "$ref": "#/properties/direction"
593
+ },
594
+ "theme": {
595
+ "$ref": "#/properties/theme"
596
+ },
597
+ "variant": {
598
+ "$ref": "#/properties/variant"
599
+ }
254
600
  },
255
- "_children": { "x-kind": "list", "x-items": ["Page"] }
601
+ "_children": {
602
+ "x-kind": "list",
603
+ "x-items": [
604
+ "Page"
605
+ ]
606
+ }
256
607
  },
257
608
  "Page": {
258
609
  "x-tier": "core",
259
610
  "x-category": "structure",
260
611
  "description": "Screen root; viewport and safe-area boundary",
261
612
  "properties": {
262
- "id": { "$ref": "#/properties/id" },
263
- "visible": { "$ref": "#/properties/visible" },
264
- "padding": { "$ref": "#/properties/padding" },
265
- "direction": { "$ref": "#/properties/direction" }
613
+ "id": {
614
+ "$ref": "#/properties/id"
615
+ },
616
+ "visible": {
617
+ "$ref": "#/properties/visible"
618
+ },
619
+ "padding": {
620
+ "$ref": "#/properties/padding"
621
+ },
622
+ "direction": {
623
+ "$ref": "#/properties/direction"
624
+ },
625
+ "variant": {
626
+ "$ref": "#/properties/variant"
627
+ }
266
628
  },
267
- "_children": { "x-kind": "list", "x-items": ["Column", "Row", "Stack", "Box"] }
629
+ "_children": {
630
+ "x-kind": "list",
631
+ "x-items": [
632
+ "Column",
633
+ "Row",
634
+ "Stack",
635
+ "Box"
636
+ ]
637
+ }
268
638
  },
269
639
  "SafeArea": {
270
640
  "x-tier": "core",
271
641
  "x-category": "structure",
272
642
  "description": "Insets for OS/browser safe areas",
273
643
  "properties": {
274
- "id": { "$ref": "#/properties/id" },
275
- "padding": { "$ref": "#/properties/padding" }
644
+ "id": {
645
+ "$ref": "#/properties/id"
646
+ },
647
+ "padding": {
648
+ "$ref": "#/properties/padding"
649
+ },
650
+ "variant": {
651
+ "$ref": "#/properties/variant"
652
+ }
276
653
  },
277
- "_children": { "x-kind": "list", "x-items": ["Box", "Column", "Row"] }
654
+ "_children": {
655
+ "x-kind": "list",
656
+ "x-items": [
657
+ "Box",
658
+ "Column",
659
+ "Row"
660
+ ]
661
+ }
278
662
  },
279
663
  "Box": {
280
664
  "x-tier": "core",
281
665
  "x-category": "layout",
282
666
  "description": "Single region; background, bounds, child placement",
283
667
  "properties": {
284
- "id": { "$ref": "#/properties/id" },
285
- "visible": { "$ref": "#/properties/visible" },
286
- "width": { "$ref": "#/properties/width" },
287
- "height": { "$ref": "#/properties/height" },
288
- "minWidth": { "$ref": "#/properties/minWidth" },
289
- "maxWidth": { "$ref": "#/properties/maxWidth" },
290
- "minHeight": { "$ref": "#/properties/minHeight" },
291
- "maxHeight": { "$ref": "#/properties/maxHeight" },
292
- "padding": { "$ref": "#/properties/padding" },
293
- "contentAlign": { "$ref": "#/properties/contentAlign" },
294
- "background": { "$ref": "#/properties/background" },
295
- "foreground": { "$ref": "#/properties/foreground" },
296
- "border": { "$ref": "#/properties/border" },
297
- "radius": { "$ref": "#/properties/radius" },
298
- "shadow": { "$ref": "#/properties/shadow" },
299
- "opacity": { "$ref": "#/properties/opacity" },
300
- "clip": { "$ref": "#/properties/clip" },
301
- "selfAlign": { "$ref": "#/properties/selfAlign" },
302
- "variant": { "$ref": "#/properties/variant" }
303
- },
304
- "_children": { "x-kind": "any" }
668
+ "id": {
669
+ "$ref": "#/properties/id"
670
+ },
671
+ "visible": {
672
+ "$ref": "#/properties/visible"
673
+ },
674
+ "width": {
675
+ "$ref": "#/properties/width"
676
+ },
677
+ "height": {
678
+ "$ref": "#/properties/height"
679
+ },
680
+ "minWidth": {
681
+ "$ref": "#/properties/minWidth"
682
+ },
683
+ "maxWidth": {
684
+ "$ref": "#/properties/maxWidth"
685
+ },
686
+ "minHeight": {
687
+ "$ref": "#/properties/minHeight"
688
+ },
689
+ "maxHeight": {
690
+ "$ref": "#/properties/maxHeight"
691
+ },
692
+ "padding": {
693
+ "$ref": "#/properties/padding"
694
+ },
695
+ "contentAlign": {
696
+ "$ref": "#/properties/contentAlign"
697
+ },
698
+ "background": {
699
+ "$ref": "#/properties/background"
700
+ },
701
+ "foreground": {
702
+ "$ref": "#/properties/foreground"
703
+ },
704
+ "border": {
705
+ "$ref": "#/properties/border"
706
+ },
707
+ "radius": {
708
+ "$ref": "#/properties/radius"
709
+ },
710
+ "shadow": {
711
+ "$ref": "#/properties/shadow"
712
+ },
713
+ "opacity": {
714
+ "$ref": "#/properties/opacity"
715
+ },
716
+ "clip": {
717
+ "$ref": "#/properties/clip"
718
+ },
719
+ "selfAlign": {
720
+ "$ref": "#/properties/selfAlign"
721
+ },
722
+ "variant": {
723
+ "$ref": "#/properties/variant"
724
+ }
725
+ },
726
+ "_children": {
727
+ "x-kind": "any"
728
+ }
305
729
  },
306
730
  "Row": {
307
731
  "x-tier": "core",
308
732
  "x-category": "layout",
309
733
  "description": "Horizontal child layout",
310
734
  "properties": {
311
- "id": { "$ref": "#/properties/id" },
312
- "visible": { "$ref": "#/properties/visible" },
313
- "gap": { "$ref": "#/properties/gap" },
314
- "align": { "$ref": "#/properties/align" },
315
- "justify": { "$ref": "#/properties/justify" },
316
- "padding": { "$ref": "#/properties/padding" },
317
- "width": { "$ref": "#/properties/width" },
318
- "height": { "$ref": "#/properties/height" },
319
- "minWidth": { "$ref": "#/properties/minWidth" },
320
- "maxWidth": { "$ref": "#/properties/maxWidth" },
321
- "minHeight": { "$ref": "#/properties/minHeight" },
322
- "maxHeight": { "$ref": "#/properties/maxHeight" }
323
- },
324
- "_children": { "x-kind": "any" }
735
+ "id": {
736
+ "$ref": "#/properties/id"
737
+ },
738
+ "visible": {
739
+ "$ref": "#/properties/visible"
740
+ },
741
+ "gap": {
742
+ "$ref": "#/properties/gap"
743
+ },
744
+ "align": {
745
+ "$ref": "#/properties/align"
746
+ },
747
+ "justify": {
748
+ "$ref": "#/properties/justify"
749
+ },
750
+ "padding": {
751
+ "$ref": "#/properties/padding"
752
+ },
753
+ "width": {
754
+ "$ref": "#/properties/width"
755
+ },
756
+ "height": {
757
+ "$ref": "#/properties/height"
758
+ },
759
+ "minWidth": {
760
+ "$ref": "#/properties/minWidth"
761
+ },
762
+ "maxWidth": {
763
+ "$ref": "#/properties/maxWidth"
764
+ },
765
+ "minHeight": {
766
+ "$ref": "#/properties/minHeight"
767
+ },
768
+ "maxHeight": {
769
+ "$ref": "#/properties/maxHeight"
770
+ },
771
+ "variant": {
772
+ "$ref": "#/properties/variant"
773
+ }
774
+ },
775
+ "_children": {
776
+ "x-kind": "any"
777
+ }
325
778
  },
326
779
  "Column": {
327
780
  "x-tier": "core",
328
781
  "x-category": "layout",
329
782
  "description": "Vertical child layout",
330
783
  "properties": {
331
- "id": { "$ref": "#/properties/id" },
332
- "visible": { "$ref": "#/properties/visible" },
333
- "gap": { "$ref": "#/properties/gap" },
334
- "align": { "$ref": "#/properties/align" },
335
- "justify": { "$ref": "#/properties/justify" },
336
- "padding": { "$ref": "#/properties/padding" },
337
- "width": { "$ref": "#/properties/width" },
338
- "height": { "$ref": "#/properties/height" },
339
- "minWidth": { "$ref": "#/properties/minWidth" },
340
- "maxWidth": { "$ref": "#/properties/maxWidth" },
341
- "minHeight": { "$ref": "#/properties/minHeight" },
342
- "maxHeight": { "$ref": "#/properties/maxHeight" }
343
- },
344
- "_children": { "x-kind": "any" }
784
+ "id": {
785
+ "$ref": "#/properties/id"
786
+ },
787
+ "visible": {
788
+ "$ref": "#/properties/visible"
789
+ },
790
+ "gap": {
791
+ "$ref": "#/properties/gap"
792
+ },
793
+ "align": {
794
+ "$ref": "#/properties/align"
795
+ },
796
+ "justify": {
797
+ "$ref": "#/properties/justify"
798
+ },
799
+ "padding": {
800
+ "$ref": "#/properties/padding"
801
+ },
802
+ "width": {
803
+ "$ref": "#/properties/width"
804
+ },
805
+ "height": {
806
+ "$ref": "#/properties/height"
807
+ },
808
+ "minWidth": {
809
+ "$ref": "#/properties/minWidth"
810
+ },
811
+ "maxWidth": {
812
+ "$ref": "#/properties/maxWidth"
813
+ },
814
+ "minHeight": {
815
+ "$ref": "#/properties/minHeight"
816
+ },
817
+ "maxHeight": {
818
+ "$ref": "#/properties/maxHeight"
819
+ },
820
+ "variant": {
821
+ "$ref": "#/properties/variant"
822
+ }
823
+ },
824
+ "_children": {
825
+ "x-kind": "any"
826
+ }
345
827
  },
346
828
  "Stack": {
347
829
  "x-tier": "core",
348
830
  "x-category": "layout",
349
831
  "description": "Overlay children by z-order (not absolute positioning)",
350
832
  "properties": {
351
- "id": { "$ref": "#/properties/id" },
352
- "visible": { "$ref": "#/properties/visible" },
353
- "contentAlign": { "$ref": "#/properties/contentAlign" },
354
- "padding": { "$ref": "#/properties/padding" },
355
- "width": { "$ref": "#/properties/width" },
356
- "height": { "$ref": "#/properties/height" },
357
- "background": { "$ref": "#/properties/background" }
833
+ "id": {
834
+ "$ref": "#/properties/id"
835
+ },
836
+ "visible": {
837
+ "$ref": "#/properties/visible"
838
+ },
839
+ "contentAlign": {
840
+ "$ref": "#/properties/contentAlign"
841
+ },
842
+ "padding": {
843
+ "$ref": "#/properties/padding"
844
+ },
845
+ "width": {
846
+ "$ref": "#/properties/width"
847
+ },
848
+ "height": {
849
+ "$ref": "#/properties/height"
850
+ },
851
+ "background": {
852
+ "$ref": "#/properties/background"
853
+ },
854
+ "variant": {
855
+ "$ref": "#/properties/variant"
856
+ }
358
857
  },
359
- "_children": { "x-kind": "any" }
858
+ "_children": {
859
+ "x-kind": "any"
860
+ }
360
861
  },
361
862
  "Spacer": {
362
863
  "x-tier": "core",
@@ -364,258 +865,597 @@
364
865
  "description": "Occupies remaining flex space",
365
866
  "x-notes": "Direct child of Row/Column only",
366
867
  "properties": {
367
- "id": { "$ref": "#/properties/id" },
368
- "width": { "$ref": "#/properties/width" },
369
- "height": { "$ref": "#/properties/height" },
370
- "weight": { "$ref": "#/properties/weight" }
868
+ "id": {
869
+ "$ref": "#/properties/id"
870
+ },
871
+ "width": {
872
+ "$ref": "#/properties/width"
873
+ },
874
+ "height": {
875
+ "$ref": "#/properties/height"
876
+ },
877
+ "weight": {
878
+ "$ref": "#/properties/weight"
879
+ },
880
+ "variant": {
881
+ "$ref": "#/properties/variant"
882
+ }
371
883
  },
372
- "_children": { "x-kind": "none" }
884
+ "_children": {
885
+ "x-kind": "none"
886
+ }
373
887
  },
374
888
  "Divider": {
375
889
  "x-tier": "core",
376
890
  "x-category": "layout",
377
891
  "description": "Horizontal or vertical separator",
378
892
  "properties": {
379
- "id": { "$ref": "#/properties/id" },
380
- "axis": { "$ref": "#/properties/axis" }
893
+ "id": {
894
+ "$ref": "#/properties/id"
895
+ },
896
+ "axis": {
897
+ "$ref": "#/properties/axis"
898
+ },
899
+ "variant": {
900
+ "$ref": "#/properties/variant"
901
+ }
381
902
  },
382
- "_children": { "x-kind": "none" }
903
+ "_children": {
904
+ "x-kind": "none"
905
+ }
383
906
  },
384
907
  "ScrollArea": {
385
908
  "x-tier": "core",
386
909
  "x-category": "scroll",
387
910
  "description": "Internal scroll boundary",
388
911
  "properties": {
389
- "id": { "$ref": "#/properties/id" },
390
- "axis": { "$ref": "#/properties/axis" },
391
- "scroll": { "$ref": "#/properties/scroll" },
392
- "width": { "$ref": "#/properties/width" },
393
- "height": { "$ref": "#/properties/height" },
394
- "minHeight": { "$ref": "#/properties/minHeight" },
395
- "maxHeight": { "$ref": "#/properties/maxHeight" },
396
- "padding": { "$ref": "#/properties/padding" }
912
+ "id": {
913
+ "$ref": "#/properties/id"
914
+ },
915
+ "axis": {
916
+ "$ref": "#/properties/axis"
917
+ },
918
+ "scroll": {
919
+ "$ref": "#/properties/scroll"
920
+ },
921
+ "width": {
922
+ "$ref": "#/properties/width"
923
+ },
924
+ "height": {
925
+ "$ref": "#/properties/height"
926
+ },
927
+ "minHeight": {
928
+ "$ref": "#/properties/minHeight"
929
+ },
930
+ "maxHeight": {
931
+ "$ref": "#/properties/maxHeight"
932
+ },
933
+ "padding": {
934
+ "$ref": "#/properties/padding"
935
+ },
936
+ "variant": {
937
+ "$ref": "#/properties/variant"
938
+ }
397
939
  },
398
- "_children": { "x-kind": "single" }
940
+ "_children": {
941
+ "x-kind": "single"
942
+ }
399
943
  },
400
944
  "List": {
401
945
  "x-tier": "core",
402
946
  "x-category": "scroll",
403
947
  "description": "Homogeneous list of items",
404
948
  "properties": {
405
- "id": { "$ref": "#/properties/id" },
406
- "gap": { "$ref": "#/properties/gap" },
407
- "axis": { "$ref": "#/properties/axis" },
408
- "role": { "$ref": "#/properties/role" },
409
- "visible": { "$ref": "#/properties/visible" }
949
+ "id": {
950
+ "$ref": "#/properties/id"
951
+ },
952
+ "gap": {
953
+ "$ref": "#/properties/gap"
954
+ },
955
+ "axis": {
956
+ "$ref": "#/properties/axis"
957
+ },
958
+ "role": {
959
+ "$ref": "#/properties/role"
960
+ },
961
+ "visible": {
962
+ "$ref": "#/properties/visible"
963
+ },
964
+ "variant": {
965
+ "$ref": "#/properties/variant"
966
+ }
410
967
  },
411
- "_children": { "x-kind": "list", "x-items": ["ListItem"] }
968
+ "_children": {
969
+ "x-kind": "list",
970
+ "x-items": [
971
+ "ListItem"
972
+ ]
973
+ }
412
974
  },
413
975
  "ListItem": {
414
976
  "x-tier": "core",
415
977
  "x-category": "scroll",
416
978
  "description": "One row/cell in a list",
417
979
  "properties": {
418
- "id": { "$ref": "#/properties/id" },
419
- "selected": { "$ref": "#/properties/selected" },
420
- "padding": { "$ref": "#/properties/padding" },
421
- "gap": { "$ref": "#/properties/gap" },
422
- "role": { "$ref": "#/properties/role" },
423
- "visible": { "$ref": "#/properties/visible" }
980
+ "id": {
981
+ "$ref": "#/properties/id"
982
+ },
983
+ "selected": {
984
+ "$ref": "#/properties/selected"
985
+ },
986
+ "padding": {
987
+ "$ref": "#/properties/padding"
988
+ },
989
+ "gap": {
990
+ "$ref": "#/properties/gap"
991
+ },
992
+ "role": {
993
+ "$ref": "#/properties/role"
994
+ },
995
+ "visible": {
996
+ "$ref": "#/properties/visible"
997
+ },
998
+ "variant": {
999
+ "$ref": "#/properties/variant"
1000
+ }
424
1001
  },
425
- "_children": { "x-kind": "any" }
1002
+ "_children": {
1003
+ "x-kind": "any"
1004
+ }
426
1005
  },
427
1006
  "Text": {
428
1007
  "x-tier": "core",
429
1008
  "x-category": "text",
430
1009
  "description": "Text display",
431
1010
  "properties": {
432
- "id": { "$ref": "#/properties/id" },
433
- "visible": { "$ref": "#/properties/visible" },
434
- "textStyle": { "$ref": "#/properties/textStyle" },
435
- "textAlign": { "$ref": "#/properties/textAlign" },
436
- "lineLimit": { "$ref": "#/properties/lineLimit" },
437
- "textOverflow": { "$ref": "#/properties/textOverflow" },
438
- "fontWeight": { "$ref": "#/properties/fontWeight" },
439
- "foreground": { "$ref": "#/properties/foreground" },
440
- "opacity": { "$ref": "#/properties/opacity" },
441
- "role": { "$ref": "#/properties/role" },
442
- "variant": { "$ref": "#/properties/variant" }
1011
+ "id": {
1012
+ "$ref": "#/properties/id"
1013
+ },
1014
+ "visible": {
1015
+ "$ref": "#/properties/visible"
1016
+ },
1017
+ "textStyle": {
1018
+ "$ref": "#/properties/textStyle"
1019
+ },
1020
+ "textAlign": {
1021
+ "$ref": "#/properties/textAlign"
1022
+ },
1023
+ "lineLimit": {
1024
+ "$ref": "#/properties/lineLimit"
1025
+ },
1026
+ "textOverflow": {
1027
+ "$ref": "#/properties/textOverflow"
1028
+ },
1029
+ "fontWeight": {
1030
+ "$ref": "#/properties/fontWeight"
1031
+ },
1032
+ "foreground": {
1033
+ "$ref": "#/properties/foreground"
1034
+ },
1035
+ "opacity": {
1036
+ "$ref": "#/properties/opacity"
1037
+ },
1038
+ "role": {
1039
+ "$ref": "#/properties/role"
1040
+ },
1041
+ "variant": {
1042
+ "$ref": "#/properties/variant"
1043
+ }
443
1044
  },
444
- "_children": { "x-kind": "text" }
1045
+ "_children": {
1046
+ "x-kind": "text"
1047
+ }
445
1048
  },
446
1049
  "Heading": {
447
1050
  "x-tier": "core",
448
1051
  "x-category": "text",
449
1052
  "description": "Heading text; visual style via textStyle, semantic level via headingLevel",
450
1053
  "properties": {
451
- "id": { "$ref": "#/properties/id" },
452
- "visible": { "$ref": "#/properties/visible" },
453
- "headingLevel": { "$ref": "#/properties/headingLevel" },
454
- "textStyle": { "$ref": "#/properties/textStyle" },
455
- "textAlign": { "$ref": "#/properties/textAlign" },
456
- "foreground": { "$ref": "#/properties/foreground" },
457
- "role": { "$ref": "#/properties/role" },
458
- "variant": { "$ref": "#/properties/variant" }
1054
+ "id": {
1055
+ "$ref": "#/properties/id"
1056
+ },
1057
+ "visible": {
1058
+ "$ref": "#/properties/visible"
1059
+ },
1060
+ "headingLevel": {
1061
+ "$ref": "#/properties/headingLevel"
1062
+ },
1063
+ "textStyle": {
1064
+ "$ref": "#/properties/textStyle"
1065
+ },
1066
+ "textAlign": {
1067
+ "$ref": "#/properties/textAlign"
1068
+ },
1069
+ "foreground": {
1070
+ "$ref": "#/properties/foreground"
1071
+ },
1072
+ "role": {
1073
+ "$ref": "#/properties/role"
1074
+ },
1075
+ "variant": {
1076
+ "$ref": "#/properties/variant"
1077
+ }
459
1078
  },
460
- "_children": { "x-kind": "text" }
1079
+ "_children": {
1080
+ "x-kind": "text"
1081
+ }
461
1082
  },
462
1083
  "Link": {
463
1084
  "x-tier": "optional",
464
1085
  "x-category": "text",
465
1086
  "description": "Navigable text or region",
466
1087
  "properties": {
467
- "id": { "$ref": "#/properties/id" },
468
- "visible": { "$ref": "#/properties/visible" },
469
- "onClick": { "$ref": "#/properties/onClick" },
470
- "label": { "$ref": "#/properties/label" },
471
- "foreground": { "$ref": "#/properties/foreground" },
472
- "role": { "$ref": "#/properties/role" }
1088
+ "id": {
1089
+ "$ref": "#/properties/id"
1090
+ },
1091
+ "visible": {
1092
+ "$ref": "#/properties/visible"
1093
+ },
1094
+ "onClick": {
1095
+ "$ref": "#/properties/onClick"
1096
+ },
1097
+ "label": {
1098
+ "$ref": "#/properties/label"
1099
+ },
1100
+ "foreground": {
1101
+ "$ref": "#/properties/foreground"
1102
+ },
1103
+ "role": {
1104
+ "$ref": "#/properties/role"
1105
+ },
1106
+ "variant": {
1107
+ "$ref": "#/properties/variant"
1108
+ }
473
1109
  },
474
- "_children": { "x-kind": "text" }
1110
+ "_children": {
1111
+ "x-kind": "text"
1112
+ }
475
1113
  },
476
1114
  "Image": {
477
1115
  "x-tier": "core",
478
1116
  "x-category": "media",
479
1117
  "description": "Image display",
480
1118
  "properties": {
481
- "id": { "$ref": "#/properties/id" },
482
- "visible": { "$ref": "#/properties/visible" },
483
- "src": { "$ref": "#/properties/src" },
484
- "fit": { "$ref": "#/properties/fit" },
485
- "alt": { "$ref": "#/properties/alt" },
486
- "width": { "$ref": "#/properties/width" },
487
- "height": { "$ref": "#/properties/height" },
488
- "aspectRatio": { "$ref": "#/properties/aspectRatio" },
489
- "radius": { "$ref": "#/properties/radius" }
1119
+ "id": {
1120
+ "$ref": "#/properties/id"
1121
+ },
1122
+ "visible": {
1123
+ "$ref": "#/properties/visible"
1124
+ },
1125
+ "src": {
1126
+ "$ref": "#/properties/src"
1127
+ },
1128
+ "fit": {
1129
+ "$ref": "#/properties/fit"
1130
+ },
1131
+ "alt": {
1132
+ "$ref": "#/properties/alt"
1133
+ },
1134
+ "width": {
1135
+ "$ref": "#/properties/width"
1136
+ },
1137
+ "height": {
1138
+ "$ref": "#/properties/height"
1139
+ },
1140
+ "aspectRatio": {
1141
+ "$ref": "#/properties/aspectRatio"
1142
+ },
1143
+ "radius": {
1144
+ "$ref": "#/properties/radius"
1145
+ },
1146
+ "variant": {
1147
+ "$ref": "#/properties/variant"
1148
+ }
490
1149
  },
491
- "_children": { "x-kind": "none" }
1150
+ "_children": {
1151
+ "x-kind": "none"
1152
+ }
492
1153
  },
493
1154
  "Icon": {
494
1155
  "x-tier": "core",
495
1156
  "x-category": "media",
496
1157
  "description": "Icon display; asset set referenced by name token at renderer",
497
1158
  "properties": {
498
- "id": { "$ref": "#/properties/id" },
499
- "visible": { "$ref": "#/properties/visible" },
500
- "name": { "$ref": "#/properties/name" },
501
- "alt": { "$ref": "#/properties/alt" },
502
- "foreground": { "$ref": "#/properties/foreground" },
503
- "opacity": { "$ref": "#/properties/opacity" }
1159
+ "id": {
1160
+ "$ref": "#/properties/id"
1161
+ },
1162
+ "visible": {
1163
+ "$ref": "#/properties/visible"
1164
+ },
1165
+ "name": {
1166
+ "$ref": "#/properties/name"
1167
+ },
1168
+ "alt": {
1169
+ "$ref": "#/properties/alt"
1170
+ },
1171
+ "foreground": {
1172
+ "$ref": "#/properties/foreground"
1173
+ },
1174
+ "opacity": {
1175
+ "$ref": "#/properties/opacity"
1176
+ },
1177
+ "variant": {
1178
+ "$ref": "#/properties/variant"
1179
+ }
504
1180
  },
505
- "_children": { "x-kind": "none" }
1181
+ "_children": {
1182
+ "x-kind": "none"
1183
+ }
506
1184
  },
507
1185
  "Button": {
508
1186
  "x-tier": "core",
509
1187
  "x-category": "input",
510
1188
  "description": "Pressable action; label or children required (label is a11y name when both present)",
511
1189
  "properties": {
512
- "id": { "$ref": "#/properties/id" },
513
- "visible": { "$ref": "#/properties/visible" },
514
- "enabled": { "$ref": "#/properties/enabled" },
515
- "onClick": { "$ref": "#/properties/onClick" },
516
- "label": { "$ref": "#/properties/label" },
517
- "foreground": { "$ref": "#/properties/foreground" },
518
- "background": { "$ref": "#/properties/background" },
519
- "variant": { "$ref": "#/properties/variant" },
520
- "role": { "$ref": "#/properties/role" }
1190
+ "id": {
1191
+ "$ref": "#/properties/id"
1192
+ },
1193
+ "visible": {
1194
+ "$ref": "#/properties/visible"
1195
+ },
1196
+ "enabled": {
1197
+ "$ref": "#/properties/enabled"
1198
+ },
1199
+ "onClick": {
1200
+ "$ref": "#/properties/onClick"
1201
+ },
1202
+ "label": {
1203
+ "$ref": "#/properties/label"
1204
+ },
1205
+ "foreground": {
1206
+ "$ref": "#/properties/foreground"
1207
+ },
1208
+ "background": {
1209
+ "$ref": "#/properties/background"
1210
+ },
1211
+ "variant": {
1212
+ "$ref": "#/properties/variant"
1213
+ },
1214
+ "role": {
1215
+ "$ref": "#/properties/role"
1216
+ }
521
1217
  },
522
- "_children": { "x-kind": "list", "x-items": ["Text", "Icon", "Row"] }
1218
+ "_children": {
1219
+ "x-kind": "list",
1220
+ "x-items": [
1221
+ "Text",
1222
+ "Icon",
1223
+ "Row"
1224
+ ]
1225
+ }
523
1226
  },
524
1227
  "IconButton": {
525
1228
  "x-tier": "optional",
526
1229
  "x-category": "input",
527
1230
  "description": "Icon-primary button; label required for accessibility",
528
1231
  "properties": {
529
- "id": { "$ref": "#/properties/id" },
530
- "visible": { "$ref": "#/properties/visible" },
531
- "enabled": { "$ref": "#/properties/enabled" },
532
- "onClick": { "$ref": "#/properties/onClick" },
533
- "label": { "$ref": "#/properties/label" },
534
- "variant": { "$ref": "#/properties/variant" }
1232
+ "id": {
1233
+ "$ref": "#/properties/id"
1234
+ },
1235
+ "visible": {
1236
+ "$ref": "#/properties/visible"
1237
+ },
1238
+ "enabled": {
1239
+ "$ref": "#/properties/enabled"
1240
+ },
1241
+ "onClick": {
1242
+ "$ref": "#/properties/onClick"
1243
+ },
1244
+ "label": {
1245
+ "$ref": "#/properties/label"
1246
+ },
1247
+ "variant": {
1248
+ "$ref": "#/properties/variant"
1249
+ }
535
1250
  },
536
- "_children": { "x-kind": "list", "x-items": ["Icon"] }
1251
+ "_children": {
1252
+ "x-kind": "list",
1253
+ "x-items": [
1254
+ "Icon"
1255
+ ]
1256
+ }
537
1257
  },
538
1258
  "TextInput": {
539
1259
  "x-tier": "core",
540
1260
  "x-category": "input",
541
1261
  "description": "Single-line text input",
542
1262
  "properties": {
543
- "id": { "$ref": "#/properties/id" },
544
- "visible": { "$ref": "#/properties/visible" },
545
- "enabled": { "$ref": "#/properties/enabled" },
546
- "readonly": { "$ref": "#/properties/readonly" },
547
- "required": { "$ref": "#/properties/required" },
548
- "value": { "$ref": "#/properties/value" },
549
- "binding": { "$ref": "#/properties/binding" },
550
- "placeholder": { "$ref": "#/properties/placeholder" },
551
- "onChange": { "$ref": "#/properties/onChange" },
552
- "error": { "$ref": "#/properties/error" },
553
- "help": { "$ref": "#/properties/help" },
554
- "keyboardType": { "$ref": "#/properties/keyboardType" },
555
- "focusable": { "$ref": "#/properties/focusable" },
556
- "autoFocus": { "$ref": "#/properties/autoFocus" },
557
- "width": { "$ref": "#/properties/width" },
558
- "label": { "$ref": "#/properties/label" }
559
- },
560
- "_children": { "x-kind": "none" }
1263
+ "id": {
1264
+ "$ref": "#/properties/id"
1265
+ },
1266
+ "visible": {
1267
+ "$ref": "#/properties/visible"
1268
+ },
1269
+ "enabled": {
1270
+ "$ref": "#/properties/enabled"
1271
+ },
1272
+ "readonly": {
1273
+ "$ref": "#/properties/readonly"
1274
+ },
1275
+ "required": {
1276
+ "$ref": "#/properties/required"
1277
+ },
1278
+ "value": {
1279
+ "$ref": "#/properties/value"
1280
+ },
1281
+ "binding": {
1282
+ "$ref": "#/properties/binding"
1283
+ },
1284
+ "placeholder": {
1285
+ "$ref": "#/properties/placeholder"
1286
+ },
1287
+ "onChange": {
1288
+ "$ref": "#/properties/onChange"
1289
+ },
1290
+ "error": {
1291
+ "$ref": "#/properties/error"
1292
+ },
1293
+ "help": {
1294
+ "$ref": "#/properties/help"
1295
+ },
1296
+ "keyboardType": {
1297
+ "$ref": "#/properties/keyboardType"
1298
+ },
1299
+ "focusable": {
1300
+ "$ref": "#/properties/focusable"
1301
+ },
1302
+ "autoFocus": {
1303
+ "$ref": "#/properties/autoFocus"
1304
+ },
1305
+ "width": {
1306
+ "$ref": "#/properties/width"
1307
+ },
1308
+ "label": {
1309
+ "$ref": "#/properties/label"
1310
+ },
1311
+ "variant": {
1312
+ "$ref": "#/properties/variant"
1313
+ }
1314
+ },
1315
+ "_children": {
1316
+ "x-kind": "none"
1317
+ }
561
1318
  },
562
1319
  "TextArea": {
563
1320
  "x-tier": "core",
564
1321
  "x-category": "input",
565
1322
  "description": "Multi-line text input",
566
1323
  "properties": {
567
- "id": { "$ref": "#/properties/id" },
568
- "visible": { "$ref": "#/properties/visible" },
569
- "enabled": { "$ref": "#/properties/enabled" },
570
- "readonly": { "$ref": "#/properties/readonly" },
571
- "required": { "$ref": "#/properties/required" },
572
- "value": { "$ref": "#/properties/value" },
573
- "binding": { "$ref": "#/properties/binding" },
574
- "placeholder": { "$ref": "#/properties/placeholder" },
575
- "onChange": { "$ref": "#/properties/onChange" },
576
- "error": { "$ref": "#/properties/error" },
577
- "help": { "$ref": "#/properties/help" },
578
- "focusable": { "$ref": "#/properties/focusable" },
579
- "minHeight": { "$ref": "#/properties/minHeight" },
580
- "label": { "$ref": "#/properties/label" }
581
- },
582
- "_children": { "x-kind": "none" }
1324
+ "id": {
1325
+ "$ref": "#/properties/id"
1326
+ },
1327
+ "visible": {
1328
+ "$ref": "#/properties/visible"
1329
+ },
1330
+ "enabled": {
1331
+ "$ref": "#/properties/enabled"
1332
+ },
1333
+ "readonly": {
1334
+ "$ref": "#/properties/readonly"
1335
+ },
1336
+ "required": {
1337
+ "$ref": "#/properties/required"
1338
+ },
1339
+ "value": {
1340
+ "$ref": "#/properties/value"
1341
+ },
1342
+ "binding": {
1343
+ "$ref": "#/properties/binding"
1344
+ },
1345
+ "placeholder": {
1346
+ "$ref": "#/properties/placeholder"
1347
+ },
1348
+ "onChange": {
1349
+ "$ref": "#/properties/onChange"
1350
+ },
1351
+ "error": {
1352
+ "$ref": "#/properties/error"
1353
+ },
1354
+ "help": {
1355
+ "$ref": "#/properties/help"
1356
+ },
1357
+ "focusable": {
1358
+ "$ref": "#/properties/focusable"
1359
+ },
1360
+ "minHeight": {
1361
+ "$ref": "#/properties/minHeight"
1362
+ },
1363
+ "label": {
1364
+ "$ref": "#/properties/label"
1365
+ },
1366
+ "variant": {
1367
+ "$ref": "#/properties/variant"
1368
+ }
1369
+ },
1370
+ "_children": {
1371
+ "x-kind": "none"
1372
+ }
583
1373
  },
584
1374
  "Select": {
585
1375
  "x-tier": "core",
586
1376
  "x-category": "input",
587
1377
  "description": "Single selection",
588
1378
  "properties": {
589
- "id": { "$ref": "#/properties/id" },
590
- "visible": { "$ref": "#/properties/visible" },
591
- "enabled": { "$ref": "#/properties/enabled" },
592
- "required": { "$ref": "#/properties/required" },
593
- "value": { "$ref": "#/properties/value" },
594
- "binding": { "$ref": "#/properties/binding" },
595
- "options": { "$ref": "#/properties/options" },
596
- "onChange": { "$ref": "#/properties/onChange" },
597
- "error": { "$ref": "#/properties/error" },
598
- "help": { "$ref": "#/properties/help" },
599
- "width": { "$ref": "#/properties/width" },
600
- "label": { "$ref": "#/properties/label" }
601
- },
602
- "_children": { "x-kind": "none" }
1379
+ "id": {
1380
+ "$ref": "#/properties/id"
1381
+ },
1382
+ "visible": {
1383
+ "$ref": "#/properties/visible"
1384
+ },
1385
+ "enabled": {
1386
+ "$ref": "#/properties/enabled"
1387
+ },
1388
+ "required": {
1389
+ "$ref": "#/properties/required"
1390
+ },
1391
+ "value": {
1392
+ "$ref": "#/properties/value"
1393
+ },
1394
+ "binding": {
1395
+ "$ref": "#/properties/binding"
1396
+ },
1397
+ "options": {
1398
+ "$ref": "#/properties/options"
1399
+ },
1400
+ "onChange": {
1401
+ "$ref": "#/properties/onChange"
1402
+ },
1403
+ "error": {
1404
+ "$ref": "#/properties/error"
1405
+ },
1406
+ "help": {
1407
+ "$ref": "#/properties/help"
1408
+ },
1409
+ "width": {
1410
+ "$ref": "#/properties/width"
1411
+ },
1412
+ "label": {
1413
+ "$ref": "#/properties/label"
1414
+ },
1415
+ "variant": {
1416
+ "$ref": "#/properties/variant"
1417
+ }
1418
+ },
1419
+ "_children": {
1420
+ "x-kind": "none"
1421
+ }
603
1422
  },
604
1423
  "Checkbox": {
605
1424
  "x-tier": "core",
606
1425
  "x-category": "input",
607
1426
  "description": "Boolean or multi-select toggle",
608
1427
  "properties": {
609
- "id": { "$ref": "#/properties/id" },
610
- "visible": { "$ref": "#/properties/visible" },
611
- "enabled": { "$ref": "#/properties/enabled" },
612
- "checked": { "$ref": "#/properties/checked" },
613
- "required": { "$ref": "#/properties/required" },
614
- "binding": { "$ref": "#/properties/binding" },
615
- "label": { "$ref": "#/properties/label" },
616
- "onChange": { "$ref": "#/properties/onChange" }
1428
+ "id": {
1429
+ "$ref": "#/properties/id"
1430
+ },
1431
+ "visible": {
1432
+ "$ref": "#/properties/visible"
1433
+ },
1434
+ "enabled": {
1435
+ "$ref": "#/properties/enabled"
1436
+ },
1437
+ "checked": {
1438
+ "$ref": "#/properties/checked"
1439
+ },
1440
+ "required": {
1441
+ "$ref": "#/properties/required"
1442
+ },
1443
+ "binding": {
1444
+ "$ref": "#/properties/binding"
1445
+ },
1446
+ "label": {
1447
+ "$ref": "#/properties/label"
1448
+ },
1449
+ "onChange": {
1450
+ "$ref": "#/properties/onChange"
1451
+ },
1452
+ "variant": {
1453
+ "$ref": "#/properties/variant"
1454
+ }
617
1455
  },
618
- "_children": { "x-kind": "none" }
1456
+ "_children": {
1457
+ "x-kind": "none"
1458
+ }
619
1459
  },
620
1460
  "Radio": {
621
1461
  "x-tier": "core",
@@ -623,58 +1463,130 @@
623
1463
  "description": "Single choice in a group (use Row/Column to group; binding identifies group)",
624
1464
  "x-notes": "RadioGroup is expressed via layout Group, not a separate element",
625
1465
  "properties": {
626
- "id": { "$ref": "#/properties/id" },
627
- "visible": { "$ref": "#/properties/visible" },
628
- "enabled": { "$ref": "#/properties/enabled" },
629
- "checked": { "$ref": "#/properties/checked" },
630
- "binding": { "$ref": "#/properties/binding" },
631
- "label": { "$ref": "#/properties/label" },
632
- "value": { "$ref": "#/properties/value" },
633
- "onChange": { "$ref": "#/properties/onChange" }
1466
+ "id": {
1467
+ "$ref": "#/properties/id"
1468
+ },
1469
+ "visible": {
1470
+ "$ref": "#/properties/visible"
1471
+ },
1472
+ "enabled": {
1473
+ "$ref": "#/properties/enabled"
1474
+ },
1475
+ "checked": {
1476
+ "$ref": "#/properties/checked"
1477
+ },
1478
+ "binding": {
1479
+ "$ref": "#/properties/binding"
1480
+ },
1481
+ "label": {
1482
+ "$ref": "#/properties/label"
1483
+ },
1484
+ "value": {
1485
+ "$ref": "#/properties/value"
1486
+ },
1487
+ "onChange": {
1488
+ "$ref": "#/properties/onChange"
1489
+ },
1490
+ "variant": {
1491
+ "$ref": "#/properties/variant"
1492
+ }
634
1493
  },
635
- "_children": { "x-kind": "none" }
1494
+ "_children": {
1495
+ "x-kind": "none"
1496
+ }
636
1497
  },
637
1498
  "Switch": {
638
1499
  "x-tier": "core",
639
1500
  "x-category": "input",
640
1501
  "description": "On/off toggle",
641
1502
  "properties": {
642
- "id": { "$ref": "#/properties/id" },
643
- "visible": { "$ref": "#/properties/visible" },
644
- "enabled": { "$ref": "#/properties/enabled" },
645
- "checked": { "$ref": "#/properties/checked" },
646
- "binding": { "$ref": "#/properties/binding" },
647
- "label": { "$ref": "#/properties/label" },
648
- "onChange": { "$ref": "#/properties/onChange" }
1503
+ "id": {
1504
+ "$ref": "#/properties/id"
1505
+ },
1506
+ "visible": {
1507
+ "$ref": "#/properties/visible"
1508
+ },
1509
+ "enabled": {
1510
+ "$ref": "#/properties/enabled"
1511
+ },
1512
+ "checked": {
1513
+ "$ref": "#/properties/checked"
1514
+ },
1515
+ "binding": {
1516
+ "$ref": "#/properties/binding"
1517
+ },
1518
+ "label": {
1519
+ "$ref": "#/properties/label"
1520
+ },
1521
+ "onChange": {
1522
+ "$ref": "#/properties/onChange"
1523
+ },
1524
+ "variant": {
1525
+ "$ref": "#/properties/variant"
1526
+ }
649
1527
  },
650
- "_children": { "x-kind": "none" }
1528
+ "_children": {
1529
+ "x-kind": "none"
1530
+ }
651
1531
  },
652
1532
  "Form": {
653
1533
  "x-tier": "core",
654
1534
  "x-category": "form",
655
1535
  "description": "Input group submit/validation boundary",
656
1536
  "properties": {
657
- "id": { "$ref": "#/properties/id" },
658
- "visible": { "$ref": "#/properties/visible" },
659
- "gap": { "$ref": "#/properties/gap" },
660
- "onSubmit": { "$ref": "#/properties/onSubmit" }
1537
+ "id": {
1538
+ "$ref": "#/properties/id"
1539
+ },
1540
+ "visible": {
1541
+ "$ref": "#/properties/visible"
1542
+ },
1543
+ "gap": {
1544
+ "$ref": "#/properties/gap"
1545
+ },
1546
+ "onSubmit": {
1547
+ "$ref": "#/properties/onSubmit"
1548
+ },
1549
+ "variant": {
1550
+ "$ref": "#/properties/variant"
1551
+ }
661
1552
  },
662
- "_children": { "x-kind": "any" }
1553
+ "_children": {
1554
+ "x-kind": "any"
1555
+ }
663
1556
  },
664
1557
  "Field": {
665
1558
  "x-tier": "core",
666
1559
  "x-category": "form",
667
1560
  "description": "label/help/error/input unit",
668
1561
  "properties": {
669
- "id": { "$ref": "#/properties/id" },
670
- "visible": { "$ref": "#/properties/visible" },
671
- "label": { "$ref": "#/properties/label" },
672
- "help": { "$ref": "#/properties/help" },
673
- "error": { "$ref": "#/properties/error" },
674
- "required": { "$ref": "#/properties/required" },
675
- "gap": { "$ref": "#/properties/gap" }
1562
+ "id": {
1563
+ "$ref": "#/properties/id"
1564
+ },
1565
+ "visible": {
1566
+ "$ref": "#/properties/visible"
1567
+ },
1568
+ "label": {
1569
+ "$ref": "#/properties/label"
1570
+ },
1571
+ "help": {
1572
+ "$ref": "#/properties/help"
1573
+ },
1574
+ "error": {
1575
+ "$ref": "#/properties/error"
1576
+ },
1577
+ "required": {
1578
+ "$ref": "#/properties/required"
1579
+ },
1580
+ "gap": {
1581
+ "$ref": "#/properties/gap"
1582
+ },
1583
+ "variant": {
1584
+ "$ref": "#/properties/variant"
1585
+ }
676
1586
  },
677
- "_children": { "x-kind": "any" }
1587
+ "_children": {
1588
+ "x-kind": "any"
1589
+ }
678
1590
  },
679
1591
  "Modal": {
680
1592
  "x-tier": "core",
@@ -682,12 +1594,29 @@
682
1594
  "description": "Primary transient dialog",
683
1595
  "x-notes": "Direct child of Page or App; role defaults to dialog at renderer",
684
1596
  "properties": {
685
- "id": { "$ref": "#/properties/id" },
686
- "visible": { "$ref": "#/properties/visible" },
687
- "role": { "$ref": "#/properties/role" },
688
- "autoFocus": { "$ref": "#/properties/autoFocus" }
1597
+ "id": {
1598
+ "$ref": "#/properties/id"
1599
+ },
1600
+ "visible": {
1601
+ "$ref": "#/properties/visible"
1602
+ },
1603
+ "role": {
1604
+ "$ref": "#/properties/role"
1605
+ },
1606
+ "autoFocus": {
1607
+ "$ref": "#/properties/autoFocus"
1608
+ },
1609
+ "variant": {
1610
+ "$ref": "#/properties/variant"
1611
+ }
689
1612
  },
690
- "_children": { "x-kind": "list", "x-items": ["Box", "Column"] }
1613
+ "_children": {
1614
+ "x-kind": "list",
1615
+ "x-items": [
1616
+ "Box",
1617
+ "Column"
1618
+ ]
1619
+ }
691
1620
  },
692
1621
  "Drawer": {
693
1622
  "x-tier": "extension",
@@ -695,52 +1624,109 @@
695
1624
  "description": "Edge panel overlay",
696
1625
  "x-notes": "Placement limited to start/end/bottom at renderer",
697
1626
  "properties": {
698
- "id": { "$ref": "#/properties/id" },
699
- "visible": { "$ref": "#/properties/visible" }
1627
+ "id": {
1628
+ "$ref": "#/properties/id"
1629
+ },
1630
+ "visible": {
1631
+ "$ref": "#/properties/visible"
1632
+ },
1633
+ "variant": {
1634
+ "$ref": "#/properties/variant"
1635
+ }
700
1636
  },
701
- "_children": { "x-kind": "list", "x-items": ["Box", "Column"] }
1637
+ "_children": {
1638
+ "x-kind": "list",
1639
+ "x-items": [
1640
+ "Box",
1641
+ "Column"
1642
+ ]
1643
+ }
702
1644
  },
703
1645
  "Popover": {
704
1646
  "x-tier": "extension",
705
1647
  "x-category": "overlay",
706
1648
  "description": "Small anchored panel",
707
1649
  "properties": {
708
- "id": { "$ref": "#/properties/id" },
709
- "visible": { "$ref": "#/properties/visible" }
1650
+ "id": {
1651
+ "$ref": "#/properties/id"
1652
+ },
1653
+ "visible": {
1654
+ "$ref": "#/properties/visible"
1655
+ },
1656
+ "variant": {
1657
+ "$ref": "#/properties/variant"
1658
+ }
710
1659
  },
711
- "_children": { "x-kind": "list", "x-items": ["Box", "Column"] }
1660
+ "_children": {
1661
+ "x-kind": "list",
1662
+ "x-items": [
1663
+ "Box",
1664
+ "Column"
1665
+ ]
1666
+ }
712
1667
  },
713
1668
  "Tooltip": {
714
1669
  "x-tier": "extension",
715
1670
  "x-category": "overlay",
716
1671
  "description": "Supplementary description",
717
1672
  "properties": {
718
- "id": { "$ref": "#/properties/id" },
719
- "visible": { "$ref": "#/properties/visible" },
720
- "label": { "$ref": "#/properties/label" }
1673
+ "id": {
1674
+ "$ref": "#/properties/id"
1675
+ },
1676
+ "visible": {
1677
+ "$ref": "#/properties/visible"
1678
+ },
1679
+ "label": {
1680
+ "$ref": "#/properties/label"
1681
+ },
1682
+ "variant": {
1683
+ "$ref": "#/properties/variant"
1684
+ }
721
1685
  },
722
- "_children": { "x-kind": "text" }
1686
+ "_children": {
1687
+ "x-kind": "text"
1688
+ }
723
1689
  },
724
1690
  "Progress": {
725
1691
  "x-tier": "core",
726
1692
  "x-category": "feedback",
727
1693
  "description": "Determinate progress",
728
1694
  "properties": {
729
- "id": { "$ref": "#/properties/id" },
730
- "visible": { "$ref": "#/properties/visible" },
731
- "value": { "$ref": "#/properties/value" }
1695
+ "id": {
1696
+ "$ref": "#/properties/id"
1697
+ },
1698
+ "visible": {
1699
+ "$ref": "#/properties/visible"
1700
+ },
1701
+ "value": {
1702
+ "$ref": "#/properties/value"
1703
+ },
1704
+ "variant": {
1705
+ "$ref": "#/properties/variant"
1706
+ }
732
1707
  },
733
- "_children": { "x-kind": "none" }
1708
+ "_children": {
1709
+ "x-kind": "none"
1710
+ }
734
1711
  },
735
1712
  "Spinner": {
736
1713
  "x-tier": "core",
737
1714
  "x-category": "feedback",
738
1715
  "description": "Indeterminate loading",
739
1716
  "properties": {
740
- "id": { "$ref": "#/properties/id" },
741
- "visible": { "$ref": "#/properties/visible" }
1717
+ "id": {
1718
+ "$ref": "#/properties/id"
1719
+ },
1720
+ "visible": {
1721
+ "$ref": "#/properties/visible"
1722
+ },
1723
+ "variant": {
1724
+ "$ref": "#/properties/variant"
1725
+ }
742
1726
  },
743
- "_children": { "x-kind": "none" }
1727
+ "_children": {
1728
+ "x-kind": "none"
1729
+ }
744
1730
  }
745
1731
  }
746
1732
  }