openink 0.1.0

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 (52) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/LICENSE +21 -0
  3. package/README.md +164 -0
  4. package/bin/openink.js +4 -0
  5. package/docs/ai-assistants.md +35 -0
  6. package/docs/architecture.md +50 -0
  7. package/docs/blocks.md +604 -0
  8. package/docs/extending.md +86 -0
  9. package/docs/getting-started.md +97 -0
  10. package/docs/spec.md +215 -0
  11. package/package.json +38 -0
  12. package/schema/spec.schema.json +2641 -0
  13. package/src/build.js +82 -0
  14. package/src/cli.js +133 -0
  15. package/src/dev.js +53 -0
  16. package/src/export.js +68 -0
  17. package/src/icons.js +47 -0
  18. package/src/index.js +14 -0
  19. package/src/render/blocks/actions.js +68 -0
  20. package/src/render/blocks/content.js +86 -0
  21. package/src/render/blocks/data.js +24 -0
  22. package/src/render/blocks/feedback.js +29 -0
  23. package/src/render/blocks/forms.js +86 -0
  24. package/src/render/blocks/index.js +42 -0
  25. package/src/render/blocks/layout.js +102 -0
  26. package/src/render/blocks/media.js +65 -0
  27. package/src/render/blocks/navigation.js +67 -0
  28. package/src/render/blocks/overlay.js +18 -0
  29. package/src/render/blocks/shared.js +20 -0
  30. package/src/render/blocks/text.js +49 -0
  31. package/src/render/context.js +63 -0
  32. package/src/render/page.js +76 -0
  33. package/src/runtime/chart.js +85 -0
  34. package/src/runtime/dom.js +21 -0
  35. package/src/runtime/i18n.js +24 -0
  36. package/src/runtime/icon.js +28 -0
  37. package/src/runtime/index.js +64 -0
  38. package/src/runtime/navigation.js +27 -0
  39. package/src/runtime/placeholder.js +88 -0
  40. package/src/spec/docs.js +65 -0
  41. package/src/spec/schema.js +110 -0
  42. package/src/spec/validate.js +219 -0
  43. package/src/styles/openink.css +250 -0
  44. package/src/styles/themes/blueprint.css +31 -0
  45. package/src/styles/themes/color.css +28 -0
  46. package/src/styles/themes/dark.css +31 -0
  47. package/src/styles/themes/pastel.css +26 -0
  48. package/src/themes.js +10 -0
  49. package/templates/starter/AGENTS.md +18 -0
  50. package/templates/starter/README.md +11 -0
  51. package/templates/starter/gitignore +3 -0
  52. package/templates/starter/spec.yaml +55 -0
package/schema/spec.schema.json ADDED
@@ -0,0 +1,2641 @@
1
+ {
2
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
3
+ "$id": "https://unpkg.com/openink/schema/spec.schema.json",
4
+ "title": "openink spec",
5
+ "type": "object",
6
+ "required": [
7
+ "name",
8
+ "screens"
9
+ ],
10
+ "additionalProperties": false,
11
+ "patternProperties": {
12
+ "^x-": {
13
+ "description": "Free-form: define YAML anchors here to reuse blocks."
14
+ }
15
+ },
16
+ "properties": {
17
+ "name": {
18
+ "type": "string",
19
+ "description": "Title shown in the header and browser tab."
20
+ },
21
+ "languages": {
22
+ "type": "array",
23
+ "items": {
24
+ "type": "string",
25
+ "pattern": "^[A-Za-z]{2,3}$"
26
+ },
27
+ "description": "Language codes. The first is the default."
28
+ },
29
+ "footer": {
30
+ "type": "string"
31
+ },
32
+ "theme": {
33
+ "anyOf": [
34
+ {
35
+ "enum": [
36
+ "sketch",
37
+ "color",
38
+ "pastel",
39
+ "blueprint",
40
+ "dark"
41
+ ]
42
+ },
43
+ {
44
+ "type": "string",
45
+ "pattern": "\\.css$"
46
+ }
47
+ ],
48
+ "description": "Colour theme: a preset (sketch, color, pastel, blueprint, dark) or the path of your own .css file. Default: sketch."
49
+ },
50
+ "colors": {
51
+ "type": "object",
52
+ "additionalProperties": false,
53
+ "properties": {
54
+ "ink": {
55
+ "type": "string",
56
+ "description": "CSS colour for the `ink` design token."
57
+ },
58
+ "paper": {
59
+ "type": "string",
60
+ "description": "CSS colour for the `paper` design token."
61
+ },
62
+ "muted": {
63
+ "type": "string",
64
+ "description": "CSS colour for the `muted` design token."
65
+ },
66
+ "line": {
67
+ "type": "string",
68
+ "description": "CSS colour for the `line` design token."
69
+ },
70
+ "accent": {
71
+ "type": "string",
72
+ "description": "CSS colour for the `accent` design token."
73
+ },
74
+ "note": {
75
+ "type": "string",
76
+ "description": "CSS colour for the `note` design token."
77
+ },
78
+ "card": {
79
+ "type": "string",
80
+ "description": "CSS colour for the `card` design token."
81
+ }
82
+ },
83
+ "description": "Override individual design tokens, on top of the theme."
84
+ },
85
+ "nav": {
86
+ "description": "Header buttons: a list, or an object of named lists (screens choose one with `nav:`).",
87
+ "anyOf": [
88
+ {
89
+ "type": "array",
90
+ "items": {
91
+ "$ref": "#/$defs/navItem"
92
+ }
93
+ },
94
+ {
95
+ "type": "object",
96
+ "additionalProperties": {
97
+ "type": "array",
98
+ "items": {
99
+ "$ref": "#/$defs/navItem"
100
+ }
101
+ }
102
+ }
103
+ ]
104
+ },
105
+ "modals": {
106
+ "type": "array",
107
+ "description": "Dialogs that any screen can open with `open: <id>`. Same properties as a `modal` block.",
108
+ "items": {
109
+ "type": "object",
110
+ "required": [
111
+ "id"
112
+ ],
113
+ "additionalProperties": false,
114
+ "properties": {
115
+ "id": {
116
+ "type": "string",
117
+ "description": "Unique id; other blocks use it in `open:`."
118
+ },
119
+ "title": {
120
+ "$ref": "#/$defs/text",
121
+ "description": "Heading of the dialog."
122
+ },
123
+ "width": {
124
+ "enum": [
125
+ "narrow",
126
+ "medium",
127
+ "wide"
128
+ ],
129
+ "description": "Dialog width (default `medium`)."
130
+ },
131
+ "tone": {
132
+ "enum": [
133
+ "blue",
134
+ "green",
135
+ "yellow",
136
+ "red",
137
+ "purple",
138
+ "pink",
139
+ "orange",
140
+ "teal",
141
+ "gray"
142
+ ],
143
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
144
+ },
145
+ "fill": {
146
+ "type": "boolean",
147
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
148
+ },
149
+ "children": {
150
+ "type": "array",
151
+ "items": {
152
+ "$ref": "#/$defs/block"
153
+ }
154
+ }
155
+ }
156
+ }
157
+ },
158
+ "screens": {
159
+ "type": "array",
160
+ "minItems": 1,
161
+ "items": {
162
+ "type": "object",
163
+ "required": [
164
+ "id",
165
+ "blocks"
166
+ ],
167
+ "additionalProperties": false,
168
+ "properties": {
169
+ "id": {
170
+ "type": "string",
171
+ "pattern": "^[A-Za-z][\\w-]*$",
172
+ "description": "Unique id, used by `go:` links."
173
+ },
174
+ "title": {
175
+ "$ref": "#/$defs/text"
176
+ },
177
+ "nav": {
178
+ "type": "string",
179
+ "description": "Name of the nav set to show on this screen."
180
+ },
181
+ "note": {
182
+ "$ref": "#/$defs/text",
183
+ "description": "Sticky-note annotation shown at the top of the screen."
184
+ },
185
+ "tone": {
186
+ "enum": [
187
+ "blue",
188
+ "green",
189
+ "yellow",
190
+ "red",
191
+ "purple",
192
+ "pink",
193
+ "orange",
194
+ "teal",
195
+ "gray"
196
+ ],
197
+ "description": "Tint the whole screen with a colour."
198
+ },
199
+ "width": {
200
+ "enum": [
201
+ "narrow",
202
+ "medium",
203
+ "wide"
204
+ ],
205
+ "description": "Page width: narrow (~520px, phone-like), medium (~760px) or wide (default, full width)."
206
+ },
207
+ "blocks": {
208
+ "type": "array",
209
+ "items": {
210
+ "$ref": "#/$defs/block"
211
+ }
212
+ }
213
+ }
214
+ }
215
+ }
216
+ },
217
+ "$defs": {
218
+ "text": {
219
+ "anyOf": [
220
+ {
221
+ "type": [
222
+ "string",
223
+ "number"
224
+ ]
225
+ },
226
+ {
227
+ "type": "object",
228
+ "additionalProperties": {
229
+ "type": [
230
+ "string",
231
+ "number"
232
+ ]
233
+ }
234
+ }
235
+ ]
236
+ },
237
+ "navItem": {
238
+ "type": "object",
239
+ "properties": {
240
+ "icon": {
241
+ "enum": [
242
+ "home",
243
+ "search",
244
+ "heart",
245
+ "comment",
246
+ "share",
247
+ "bookmark",
248
+ "plus",
249
+ "bell",
250
+ "user",
251
+ "users",
252
+ "mail",
253
+ "settings",
254
+ "camera",
255
+ "image",
256
+ "video",
257
+ "star",
258
+ "menu",
259
+ "more",
260
+ "close",
261
+ "check",
262
+ "arrow-right",
263
+ "arrow-left",
264
+ "chevron-down",
265
+ "chevron-right",
266
+ "play",
267
+ "pin",
268
+ "trash",
269
+ "edit",
270
+ "upload",
271
+ "download",
272
+ "lock",
273
+ "cart",
274
+ "chart",
275
+ "calendar",
276
+ "filter",
277
+ "info",
278
+ "send"
279
+ ]
280
+ },
281
+ "label": {
282
+ "$ref": "#/$defs/text"
283
+ },
284
+ "go": {
285
+ "type": "string"
286
+ },
287
+ "toast": {
288
+ "$ref": "#/$defs/text"
289
+ },
290
+ "open": {
291
+ "type": "string"
292
+ }
293
+ },
294
+ "additionalProperties": false
295
+ },
296
+ "cell": {
297
+ "anyOf": [
298
+ {
299
+ "type": [
300
+ "string",
301
+ "number"
302
+ ]
303
+ },
304
+ {
305
+ "type": "object",
306
+ "additionalProperties": {
307
+ "type": [
308
+ "string",
309
+ "number"
310
+ ]
311
+ }
312
+ },
313
+ {
314
+ "$ref": "#/$defs/block"
315
+ }
316
+ ]
317
+ },
318
+ "block": {
319
+ "anyOf": [
320
+ {
321
+ "type": "string",
322
+ "description": "Shorthand for a `text` block."
323
+ },
324
+ {
325
+ "type": "object",
326
+ "description": "Vertical stack of blocks.",
327
+ "required": [
328
+ "type"
329
+ ],
330
+ "additionalProperties": false,
331
+ "properties": {
332
+ "type": {
333
+ "const": "stack"
334
+ },
335
+ "center": {
336
+ "type": "boolean",
337
+ "description": "Center the children horizontally."
338
+ },
339
+ "tone": {
340
+ "enum": [
341
+ "blue",
342
+ "green",
343
+ "yellow",
344
+ "red",
345
+ "purple",
346
+ "pink",
347
+ "orange",
348
+ "teal",
349
+ "gray"
350
+ ],
351
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
352
+ },
353
+ "fill": {
354
+ "type": "boolean",
355
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
356
+ },
357
+ "children": {
358
+ "type": "array",
359
+ "items": {
360
+ "$ref": "#/$defs/block"
361
+ }
362
+ }
363
+ }
364
+ },
365
+ {
366
+ "type": "object",
367
+ "description": "Horizontal row that wraps on small screens.",
368
+ "required": [
369
+ "type"
370
+ ],
371
+ "additionalProperties": false,
372
+ "properties": {
373
+ "type": {
374
+ "const": "row"
375
+ },
376
+ "between": {
377
+ "type": "boolean",
378
+ "description": "Push the first and last child to opposite ends."
379
+ },
380
+ "center": {
381
+ "type": "boolean",
382
+ "description": "Center the children."
383
+ },
384
+ "tone": {
385
+ "enum": [
386
+ "blue",
387
+ "green",
388
+ "yellow",
389
+ "red",
390
+ "purple",
391
+ "pink",
392
+ "orange",
393
+ "teal",
394
+ "gray"
395
+ ],
396
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
397
+ },
398
+ "fill": {
399
+ "type": "boolean",
400
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
401
+ },
402
+ "children": {
403
+ "type": "array",
404
+ "items": {
405
+ "$ref": "#/$defs/block"
406
+ }
407
+ }
408
+ }
409
+ },
410
+ {
411
+ "type": "object",
412
+ "description": "Equal-width columns. Collapses to one column on phones.",
413
+ "required": [
414
+ "type"
415
+ ],
416
+ "additionalProperties": false,
417
+ "properties": {
418
+ "type": {
419
+ "const": "grid"
420
+ },
421
+ "cols": {
422
+ "type": "number",
423
+ "description": "Number of columns (default 2)."
424
+ },
425
+ "tone": {
426
+ "enum": [
427
+ "blue",
428
+ "green",
429
+ "yellow",
430
+ "red",
431
+ "purple",
432
+ "pink",
433
+ "orange",
434
+ "teal",
435
+ "gray"
436
+ ],
437
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
438
+ },
439
+ "fill": {
440
+ "type": "boolean",
441
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
442
+ },
443
+ "children": {
444
+ "type": "array",
445
+ "items": {
446
+ "$ref": "#/$defs/block"
447
+ }
448
+ }
449
+ }
450
+ },
451
+ {
452
+ "type": "object",
453
+ "description": "Hand-drawn box around related blocks. Clickable when `go` is set.",
454
+ "required": [
455
+ "type"
456
+ ],
457
+ "additionalProperties": false,
458
+ "properties": {
459
+ "type": {
460
+ "const": "card"
461
+ },
462
+ "title": {
463
+ "$ref": "#/$defs/text",
464
+ "description": "Small heading at the top of the card."
465
+ },
466
+ "dash": {
467
+ "type": "boolean",
468
+ "description": "No fill (a lighter, secondary card)."
469
+ },
470
+ "center": {
471
+ "type": "boolean",
472
+ "description": "Center the content horizontally."
473
+ },
474
+ "elevation": {
475
+ "type": "number",
476
+ "description": "Shadow layers, 1 to 5 (default 1)."
477
+ },
478
+ "go": {
479
+ "type": "string",
480
+ "description": "Id of the screen to open when clicked."
481
+ },
482
+ "toast": {
483
+ "$ref": "#/$defs/text",
484
+ "description": "Message shown in a toast when clicked."
485
+ },
486
+ "open": {
487
+ "type": "string",
488
+ "description": "Id of a `modal` block to open when clicked."
489
+ },
490
+ "close": {
491
+ "type": "boolean",
492
+ "description": "Close the modal this block is inside when clicked."
493
+ },
494
+ "tone": {
495
+ "enum": [
496
+ "blue",
497
+ "green",
498
+ "yellow",
499
+ "red",
500
+ "purple",
501
+ "pink",
502
+ "orange",
503
+ "teal",
504
+ "gray"
505
+ ],
506
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
507
+ },
508
+ "fill": {
509
+ "type": "boolean",
510
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
511
+ },
512
+ "children": {
513
+ "type": "array",
514
+ "items": {
515
+ "$ref": "#/$defs/block"
516
+ }
517
+ }
518
+ }
519
+ },
520
+ {
521
+ "type": "object",
522
+ "description": "Collapsible sections (FAQ, filters, settings groups).",
523
+ "required": [
524
+ "type",
525
+ "items"
526
+ ],
527
+ "additionalProperties": false,
528
+ "properties": {
529
+ "type": {
530
+ "const": "accordion"
531
+ },
532
+ "items": {
533
+ "type": "array",
534
+ "items": {
535
+ "type": "object",
536
+ "required": [
537
+ "label"
538
+ ],
539
+ "properties": {
540
+ "label": {
541
+ "$ref": "#/$defs/text"
542
+ },
543
+ "children": {
544
+ "type": "array",
545
+ "items": {
546
+ "$ref": "#/$defs/block"
547
+ }
548
+ }
549
+ },
550
+ "additionalProperties": false
551
+ },
552
+ "description": "List of `{ label, children }`."
553
+ },
554
+ "open": {
555
+ "type": "number",
556
+ "description": "Index of the section open at first (default: all closed)."
557
+ },
558
+ "tone": {
559
+ "enum": [
560
+ "blue",
561
+ "green",
562
+ "yellow",
563
+ "red",
564
+ "purple",
565
+ "pink",
566
+ "orange",
567
+ "teal",
568
+ "gray"
569
+ ],
570
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
571
+ },
572
+ "fill": {
573
+ "type": "boolean",
574
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
575
+ }
576
+ }
577
+ },
578
+ {
579
+ "type": "object",
580
+ "description": "Wrap screens in a phone, tablet or browser frame. Ideal for mobile-app and responsive sketches.",
581
+ "required": [
582
+ "type"
583
+ ],
584
+ "additionalProperties": false,
585
+ "properties": {
586
+ "type": {
587
+ "const": "device"
588
+ },
589
+ "kind": {
590
+ "enum": [
591
+ "phone",
592
+ "tablet",
593
+ "browser"
594
+ ],
595
+ "description": "Frame type (default `phone`)."
596
+ },
597
+ "title": {
598
+ "$ref": "#/$defs/text",
599
+ "description": "Address shown in the browser bar."
600
+ },
601
+ "tone": {
602
+ "enum": [
603
+ "blue",
604
+ "green",
605
+ "yellow",
606
+ "red",
607
+ "purple",
608
+ "pink",
609
+ "orange",
610
+ "teal",
611
+ "gray"
612
+ ],
613
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
614
+ },
615
+ "fill": {
616
+ "type": "boolean",
617
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
618
+ },
619
+ "children": {
620
+ "type": "array",
621
+ "items": {
622
+ "$ref": "#/$defs/block"
623
+ }
624
+ }
625
+ }
626
+ },
627
+ {
628
+ "type": "object",
629
+ "description": "Hand-drawn horizontal line.",
630
+ "required": [
631
+ "type"
632
+ ],
633
+ "additionalProperties": false,
634
+ "properties": {
635
+ "type": {
636
+ "const": "divider"
637
+ },
638
+ "tone": {
639
+ "enum": [
640
+ "blue",
641
+ "green",
642
+ "yellow",
643
+ "red",
644
+ "purple",
645
+ "pink",
646
+ "orange",
647
+ "teal",
648
+ "gray"
649
+ ],
650
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
651
+ },
652
+ "fill": {
653
+ "type": "boolean",
654
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
655
+ }
656
+ }
657
+ },
658
+ {
659
+ "type": "object",
660
+ "description": "Empty vertical space.",
661
+ "required": [
662
+ "type"
663
+ ],
664
+ "additionalProperties": false,
665
+ "properties": {
666
+ "type": {
667
+ "const": "spacer"
668
+ },
669
+ "h": {
670
+ "type": "number",
671
+ "description": "Height in px (default 16)."
672
+ },
673
+ "tone": {
674
+ "enum": [
675
+ "blue",
676
+ "green",
677
+ "yellow",
678
+ "red",
679
+ "purple",
680
+ "pink",
681
+ "orange",
682
+ "teal",
683
+ "gray"
684
+ ],
685
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
686
+ },
687
+ "fill": {
688
+ "type": "boolean",
689
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
690
+ }
691
+ }
692
+ },
693
+ {
694
+ "type": "object",
695
+ "description": "Level 1 heading.",
696
+ "required": [
697
+ "type",
698
+ "text"
699
+ ],
700
+ "additionalProperties": false,
701
+ "properties": {
702
+ "type": {
703
+ "const": "h1"
704
+ },
705
+ "text": {
706
+ "$ref": "#/$defs/text",
707
+ "description": "Heading text."
708
+ },
709
+ "tone": {
710
+ "enum": [
711
+ "blue",
712
+ "green",
713
+ "yellow",
714
+ "red",
715
+ "purple",
716
+ "pink",
717
+ "orange",
718
+ "teal",
719
+ "gray"
720
+ ],
721
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
722
+ },
723
+ "fill": {
724
+ "type": "boolean",
725
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
726
+ }
727
+ }
728
+ },
729
+ {
730
+ "type": "object",
731
+ "description": "Level 2 heading.",
732
+ "required": [
733
+ "type",
734
+ "text"
735
+ ],
736
+ "additionalProperties": false,
737
+ "properties": {
738
+ "type": {
739
+ "const": "h2"
740
+ },
741
+ "text": {
742
+ "$ref": "#/$defs/text",
743
+ "description": "Heading text."
744
+ },
745
+ "tone": {
746
+ "enum": [
747
+ "blue",
748
+ "green",
749
+ "yellow",
750
+ "red",
751
+ "purple",
752
+ "pink",
753
+ "orange",
754
+ "teal",
755
+ "gray"
756
+ ],
757
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
758
+ },
759
+ "fill": {
760
+ "type": "boolean",
761
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
762
+ }
763
+ }
764
+ },
765
+ {
766
+ "type": "object",
767
+ "description": "Level 3 heading.",
768
+ "required": [
769
+ "type",
770
+ "text"
771
+ ],
772
+ "additionalProperties": false,
773
+ "properties": {
774
+ "type": {
775
+ "const": "h3"
776
+ },
777
+ "text": {
778
+ "$ref": "#/$defs/text",
779
+ "description": "Heading text."
780
+ },
781
+ "tone": {
782
+ "enum": [
783
+ "blue",
784
+ "green",
785
+ "yellow",
786
+ "red",
787
+ "purple",
788
+ "pink",
789
+ "orange",
790
+ "teal",
791
+ "gray"
792
+ ],
793
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
794
+ },
795
+ "fill": {
796
+ "type": "boolean",
797
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
798
+ }
799
+ }
800
+ },
801
+ {
802
+ "type": "object",
803
+ "description": "Paragraph. A bare string in a `children` list is shorthand for this block.",
804
+ "required": [
805
+ "type",
806
+ "text"
807
+ ],
808
+ "additionalProperties": false,
809
+ "properties": {
810
+ "type": {
811
+ "const": "text"
812
+ },
813
+ "text": {
814
+ "$ref": "#/$defs/text",
815
+ "description": "Paragraph text."
816
+ },
817
+ "muted": {
818
+ "type": "boolean",
819
+ "description": "Grey, smaller text."
820
+ },
821
+ "bold": {
822
+ "type": "boolean",
823
+ "description": "Bold text."
824
+ },
825
+ "tone": {
826
+ "enum": [
827
+ "blue",
828
+ "green",
829
+ "yellow",
830
+ "red",
831
+ "purple",
832
+ "pink",
833
+ "orange",
834
+ "teal",
835
+ "gray"
836
+ ],
837
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
838
+ },
839
+ "fill": {
840
+ "type": "boolean",
841
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
842
+ }
843
+ }
844
+ },
845
+ {
846
+ "type": "object",
847
+ "description": "Bulleted list.",
848
+ "required": [
849
+ "type",
850
+ "items"
851
+ ],
852
+ "additionalProperties": false,
853
+ "properties": {
854
+ "type": {
855
+ "const": "list"
856
+ },
857
+ "items": {
858
+ "type": "array",
859
+ "items": {
860
+ "$ref": "#/$defs/text"
861
+ },
862
+ "description": "List items."
863
+ },
864
+ "tone": {
865
+ "enum": [
866
+ "blue",
867
+ "green",
868
+ "yellow",
869
+ "red",
870
+ "purple",
871
+ "pink",
872
+ "orange",
873
+ "teal",
874
+ "gray"
875
+ ],
876
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
877
+ },
878
+ "fill": {
879
+ "type": "boolean",
880
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
881
+ }
882
+ }
883
+ },
884
+ {
885
+ "type": "object",
886
+ "description": "Yellow sticky-note annotation. Use it for behaviour a sketch cannot show.",
887
+ "required": [
888
+ "type",
889
+ "text"
890
+ ],
891
+ "additionalProperties": false,
892
+ "properties": {
893
+ "type": {
894
+ "const": "note"
895
+ },
896
+ "text": {
897
+ "$ref": "#/$defs/text",
898
+ "description": "Note text."
899
+ },
900
+ "tone": {
901
+ "enum": [
902
+ "blue",
903
+ "green",
904
+ "yellow",
905
+ "red",
906
+ "purple",
907
+ "pink",
908
+ "orange",
909
+ "teal",
910
+ "gray"
911
+ ],
912
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
913
+ },
914
+ "fill": {
915
+ "type": "boolean",
916
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
917
+ }
918
+ }
919
+ },
920
+ {
921
+ "type": "object",
922
+ "description": "Small status pill.",
923
+ "required": [
924
+ "type",
925
+ "text"
926
+ ],
927
+ "additionalProperties": false,
928
+ "properties": {
929
+ "type": {
930
+ "const": "badge"
931
+ },
932
+ "text": {
933
+ "$ref": "#/$defs/text",
934
+ "description": "Badge text."
935
+ },
936
+ "status": {
937
+ "enum": [
938
+ "on",
939
+ "wait",
940
+ "off"
941
+ ],
942
+ "description": "Colour: `on` green, `wait` orange, `off` grey."
943
+ },
944
+ "tone": {
945
+ "enum": [
946
+ "blue",
947
+ "green",
948
+ "yellow",
949
+ "red",
950
+ "purple",
951
+ "pink",
952
+ "orange",
953
+ "teal",
954
+ "gray"
955
+ ],
956
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
957
+ },
958
+ "fill": {
959
+ "type": "boolean",
960
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
961
+ }
962
+ }
963
+ },
964
+ {
965
+ "type": "object",
966
+ "description": "Hand-drawn icon.",
967
+ "required": [
968
+ "type",
969
+ "name"
970
+ ],
971
+ "additionalProperties": false,
972
+ "properties": {
973
+ "type": {
974
+ "const": "icon"
975
+ },
976
+ "name": {
977
+ "enum": [
978
+ "home",
979
+ "search",
980
+ "heart",
981
+ "comment",
982
+ "share",
983
+ "bookmark",
984
+ "plus",
985
+ "bell",
986
+ "user",
987
+ "users",
988
+ "mail",
989
+ "settings",
990
+ "camera",
991
+ "image",
992
+ "video",
993
+ "star",
994
+ "menu",
995
+ "more",
996
+ "close",
997
+ "check",
998
+ "arrow-right",
999
+ "arrow-left",
1000
+ "chevron-down",
1001
+ "chevron-right",
1002
+ "play",
1003
+ "pin",
1004
+ "trash",
1005
+ "edit",
1006
+ "upload",
1007
+ "download",
1008
+ "lock",
1009
+ "cart",
1010
+ "chart",
1011
+ "calendar",
1012
+ "filter",
1013
+ "info",
1014
+ "send"
1015
+ ],
1016
+ "description": "Icon name."
1017
+ },
1018
+ "size": {
1019
+ "type": "number",
1020
+ "description": "Size in px (default 22)."
1021
+ },
1022
+ "filled": {
1023
+ "type": "boolean",
1024
+ "description": "Solid instead of outline (heart, star, bookmark…)."
1025
+ },
1026
+ "tone": {
1027
+ "enum": [
1028
+ "blue",
1029
+ "green",
1030
+ "yellow",
1031
+ "red",
1032
+ "purple",
1033
+ "pink",
1034
+ "orange",
1035
+ "teal",
1036
+ "gray"
1037
+ ],
1038
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1039
+ },
1040
+ "fill": {
1041
+ "type": "boolean",
1042
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1043
+ }
1044
+ }
1045
+ },
1046
+ {
1047
+ "type": "object",
1048
+ "description": "Round profile picture with an optional name and sub-line. Clickable.",
1049
+ "required": [
1050
+ "type"
1051
+ ],
1052
+ "additionalProperties": false,
1053
+ "properties": {
1054
+ "type": {
1055
+ "const": "avatar"
1056
+ },
1057
+ "name": {
1058
+ "$ref": "#/$defs/text",
1059
+ "description": "Bold name next to the picture."
1060
+ },
1061
+ "sub": {
1062
+ "$ref": "#/$defs/text",
1063
+ "description": "Smaller line under the name."
1064
+ },
1065
+ "size": {
1066
+ "type": "number",
1067
+ "description": "Picture size in px (default 44)."
1068
+ },
1069
+ "go": {
1070
+ "type": "string",
1071
+ "description": "Id of the screen to open when clicked."
1072
+ },
1073
+ "toast": {
1074
+ "$ref": "#/$defs/text",
1075
+ "description": "Message shown in a toast when clicked."
1076
+ },
1077
+ "open": {
1078
+ "type": "string",
1079
+ "description": "Id of a `modal` block to open when clicked."
1080
+ },
1081
+ "close": {
1082
+ "type": "boolean",
1083
+ "description": "Close the modal this block is inside when clicked."
1084
+ },
1085
+ "tone": {
1086
+ "enum": [
1087
+ "blue",
1088
+ "green",
1089
+ "yellow",
1090
+ "red",
1091
+ "purple",
1092
+ "pink",
1093
+ "orange",
1094
+ "teal",
1095
+ "gray"
1096
+ ],
1097
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1098
+ },
1099
+ "fill": {
1100
+ "type": "boolean",
1101
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1102
+ }
1103
+ }
1104
+ },
1105
+ {
1106
+ "type": "object",
1107
+ "description": "Big headline block for landing pages. Put call-to-action buttons (or an image) in `children`.",
1108
+ "required": [
1109
+ "type",
1110
+ "title"
1111
+ ],
1112
+ "additionalProperties": false,
1113
+ "properties": {
1114
+ "type": {
1115
+ "const": "hero"
1116
+ },
1117
+ "title": {
1118
+ "$ref": "#/$defs/text",
1119
+ "description": "Headline."
1120
+ },
1121
+ "text": {
1122
+ "$ref": "#/$defs/text",
1123
+ "description": "Supporting sentence."
1124
+ },
1125
+ "align": {
1126
+ "enum": [
1127
+ "left",
1128
+ "center"
1129
+ ],
1130
+ "description": "Text alignment (default `center`)."
1131
+ },
1132
+ "tone": {
1133
+ "enum": [
1134
+ "blue",
1135
+ "green",
1136
+ "yellow",
1137
+ "red",
1138
+ "purple",
1139
+ "pink",
1140
+ "orange",
1141
+ "teal",
1142
+ "gray"
1143
+ ],
1144
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1145
+ },
1146
+ "fill": {
1147
+ "type": "boolean",
1148
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1149
+ },
1150
+ "children": {
1151
+ "type": "array",
1152
+ "items": {
1153
+ "$ref": "#/$defs/block"
1154
+ }
1155
+ }
1156
+ }
1157
+ },
1158
+ {
1159
+ "type": "object",
1160
+ "description": "Number card for dashboards: label, big value and a change indicator.",
1161
+ "required": [
1162
+ "type",
1163
+ "label",
1164
+ "value"
1165
+ ],
1166
+ "additionalProperties": false,
1167
+ "properties": {
1168
+ "type": {
1169
+ "const": "stat"
1170
+ },
1171
+ "label": {
1172
+ "$ref": "#/$defs/text",
1173
+ "description": "What is measured."
1174
+ },
1175
+ "value": {
1176
+ "$ref": "#/$defs/text",
1177
+ "description": "The number."
1178
+ },
1179
+ "delta": {
1180
+ "$ref": "#/$defs/text",
1181
+ "description": "Change, e.g. `+8%`."
1182
+ },
1183
+ "trend": {
1184
+ "enum": [
1185
+ "up",
1186
+ "down",
1187
+ "flat"
1188
+ ],
1189
+ "description": "Colours the change: `up` green, `down` orange, `flat` grey (default `up`)."
1190
+ },
1191
+ "tone": {
1192
+ "enum": [
1193
+ "blue",
1194
+ "green",
1195
+ "yellow",
1196
+ "red",
1197
+ "purple",
1198
+ "pink",
1199
+ "orange",
1200
+ "teal",
1201
+ "gray"
1202
+ ],
1203
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1204
+ },
1205
+ "fill": {
1206
+ "type": "boolean",
1207
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1208
+ }
1209
+ }
1210
+ },
1211
+ {
1212
+ "type": "object",
1213
+ "description": "Star rating.",
1214
+ "required": [
1215
+ "type"
1216
+ ],
1217
+ "additionalProperties": false,
1218
+ "properties": {
1219
+ "type": {
1220
+ "const": "rating"
1221
+ },
1222
+ "value": {
1223
+ "type": "number",
1224
+ "description": "Filled stars (default 4)."
1225
+ },
1226
+ "max": {
1227
+ "type": "number",
1228
+ "description": "Total stars (default 5)."
1229
+ },
1230
+ "text": {
1231
+ "$ref": "#/$defs/text",
1232
+ "description": "Text after the stars, e.g. `(128 reviews)`."
1233
+ },
1234
+ "tone": {
1235
+ "enum": [
1236
+ "blue",
1237
+ "green",
1238
+ "yellow",
1239
+ "red",
1240
+ "purple",
1241
+ "pink",
1242
+ "orange",
1243
+ "teal",
1244
+ "gray"
1245
+ ],
1246
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1247
+ },
1248
+ "fill": {
1249
+ "type": "boolean",
1250
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1251
+ }
1252
+ }
1253
+ },
1254
+ {
1255
+ "type": "object",
1256
+ "description": "Underlined text link.",
1257
+ "required": [
1258
+ "type",
1259
+ "text"
1260
+ ],
1261
+ "additionalProperties": false,
1262
+ "properties": {
1263
+ "type": {
1264
+ "const": "link"
1265
+ },
1266
+ "text": {
1267
+ "$ref": "#/$defs/text",
1268
+ "description": "Link text."
1269
+ },
1270
+ "go": {
1271
+ "type": "string",
1272
+ "description": "Id of the screen to open when clicked."
1273
+ },
1274
+ "toast": {
1275
+ "$ref": "#/$defs/text",
1276
+ "description": "Message shown in a toast when clicked."
1277
+ },
1278
+ "open": {
1279
+ "type": "string",
1280
+ "description": "Id of a `modal` block to open when clicked."
1281
+ },
1282
+ "close": {
1283
+ "type": "boolean",
1284
+ "description": "Close the modal this block is inside when clicked."
1285
+ },
1286
+ "tone": {
1287
+ "enum": [
1288
+ "blue",
1289
+ "green",
1290
+ "yellow",
1291
+ "red",
1292
+ "purple",
1293
+ "pink",
1294
+ "orange",
1295
+ "teal",
1296
+ "gray"
1297
+ ],
1298
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1299
+ },
1300
+ "fill": {
1301
+ "type": "boolean",
1302
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1303
+ }
1304
+ }
1305
+ },
1306
+ {
1307
+ "type": "object",
1308
+ "description": "Image placeholder: hand-drawn box with a cross. Use `round` for avatars.",
1309
+ "required": [
1310
+ "type"
1311
+ ],
1312
+ "additionalProperties": false,
1313
+ "properties": {
1314
+ "type": {
1315
+ "const": "image"
1316
+ },
1317
+ "h": {
1318
+ "type": "number",
1319
+ "description": "Height in px."
1320
+ },
1321
+ "label": {
1322
+ "$ref": "#/$defs/text",
1323
+ "description": "Caption centered in the box."
1324
+ },
1325
+ "round": {
1326
+ "type": "boolean",
1327
+ "description": "Draw a circle instead of a box."
1328
+ },
1329
+ "tone": {
1330
+ "enum": [
1331
+ "blue",
1332
+ "green",
1333
+ "yellow",
1334
+ "red",
1335
+ "purple",
1336
+ "pink",
1337
+ "orange",
1338
+ "teal",
1339
+ "gray"
1340
+ ],
1341
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1342
+ },
1343
+ "fill": {
1344
+ "type": "boolean",
1345
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1346
+ }
1347
+ }
1348
+ },
1349
+ {
1350
+ "type": "object",
1351
+ "description": "Map placeholder with a pin.",
1352
+ "required": [
1353
+ "type"
1354
+ ],
1355
+ "additionalProperties": false,
1356
+ "properties": {
1357
+ "type": {
1358
+ "const": "map"
1359
+ },
1360
+ "h": {
1361
+ "type": "number",
1362
+ "description": "Height in px."
1363
+ },
1364
+ "label": {
1365
+ "$ref": "#/$defs/text",
1366
+ "description": "Caption centered in the box."
1367
+ },
1368
+ "tone": {
1369
+ "enum": [
1370
+ "blue",
1371
+ "green",
1372
+ "yellow",
1373
+ "red",
1374
+ "purple",
1375
+ "pink",
1376
+ "orange",
1377
+ "teal",
1378
+ "gray"
1379
+ ],
1380
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1381
+ },
1382
+ "fill": {
1383
+ "type": "boolean",
1384
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1385
+ }
1386
+ }
1387
+ },
1388
+ {
1389
+ "type": "object",
1390
+ "description": "Generic hand-drawn box, for ads, embeds, anything else.",
1391
+ "required": [
1392
+ "type"
1393
+ ],
1394
+ "additionalProperties": false,
1395
+ "properties": {
1396
+ "type": {
1397
+ "const": "box"
1398
+ },
1399
+ "h": {
1400
+ "type": "number",
1401
+ "description": "Height in px."
1402
+ },
1403
+ "label": {
1404
+ "$ref": "#/$defs/text",
1405
+ "description": "Caption centered in the box."
1406
+ },
1407
+ "tone": {
1408
+ "enum": [
1409
+ "blue",
1410
+ "green",
1411
+ "yellow",
1412
+ "red",
1413
+ "purple",
1414
+ "pink",
1415
+ "orange",
1416
+ "teal",
1417
+ "gray"
1418
+ ],
1419
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1420
+ },
1421
+ "fill": {
1422
+ "type": "boolean",
1423
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1424
+ }
1425
+ }
1426
+ },
1427
+ {
1428
+ "type": "object",
1429
+ "description": "Video placeholder with a play button.",
1430
+ "required": [
1431
+ "type"
1432
+ ],
1433
+ "additionalProperties": false,
1434
+ "properties": {
1435
+ "type": {
1436
+ "const": "video"
1437
+ },
1438
+ "h": {
1439
+ "type": "number",
1440
+ "description": "Height in px."
1441
+ },
1442
+ "label": {
1443
+ "$ref": "#/$defs/text",
1444
+ "description": "Caption centered in the box."
1445
+ },
1446
+ "tone": {
1447
+ "enum": [
1448
+ "blue",
1449
+ "green",
1450
+ "yellow",
1451
+ "red",
1452
+ "purple",
1453
+ "pink",
1454
+ "orange",
1455
+ "teal",
1456
+ "gray"
1457
+ ],
1458
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1459
+ },
1460
+ "fill": {
1461
+ "type": "boolean",
1462
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1463
+ }
1464
+ }
1465
+ },
1466
+ {
1467
+ "type": "object",
1468
+ "description": "Swipeable gallery: image placeholder with arrows and page dots.",
1469
+ "required": [
1470
+ "type"
1471
+ ],
1472
+ "additionalProperties": false,
1473
+ "properties": {
1474
+ "type": {
1475
+ "const": "carousel"
1476
+ },
1477
+ "h": {
1478
+ "type": "number",
1479
+ "description": "Height in px."
1480
+ },
1481
+ "label": {
1482
+ "$ref": "#/$defs/text",
1483
+ "description": "Caption centered in the box."
1484
+ },
1485
+ "count": {
1486
+ "type": "number",
1487
+ "description": "Number of slides shown as dots (default 4)."
1488
+ },
1489
+ "tone": {
1490
+ "enum": [
1491
+ "blue",
1492
+ "green",
1493
+ "yellow",
1494
+ "red",
1495
+ "purple",
1496
+ "pink",
1497
+ "orange",
1498
+ "teal",
1499
+ "gray"
1500
+ ],
1501
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1502
+ },
1503
+ "fill": {
1504
+ "type": "boolean",
1505
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1506
+ }
1507
+ }
1508
+ },
1509
+ {
1510
+ "type": "object",
1511
+ "description": "Dashed upload area with an arrow.",
1512
+ "required": [
1513
+ "type"
1514
+ ],
1515
+ "additionalProperties": false,
1516
+ "properties": {
1517
+ "type": {
1518
+ "const": "dropzone"
1519
+ },
1520
+ "h": {
1521
+ "type": "number",
1522
+ "description": "Height in px."
1523
+ },
1524
+ "label": {
1525
+ "$ref": "#/$defs/text",
1526
+ "description": "Caption centered in the box."
1527
+ },
1528
+ "tone": {
1529
+ "enum": [
1530
+ "blue",
1531
+ "green",
1532
+ "yellow",
1533
+ "red",
1534
+ "purple",
1535
+ "pink",
1536
+ "orange",
1537
+ "teal",
1538
+ "gray"
1539
+ ],
1540
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1541
+ },
1542
+ "fill": {
1543
+ "type": "boolean",
1544
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1545
+ }
1546
+ }
1547
+ },
1548
+ {
1549
+ "type": "object",
1550
+ "description": "Hand-drawn chart with sample data. It shows where a chart goes and what kind it is.",
1551
+ "required": [
1552
+ "type"
1553
+ ],
1554
+ "additionalProperties": false,
1555
+ "properties": {
1556
+ "type": {
1557
+ "const": "chart"
1558
+ },
1559
+ "kind": {
1560
+ "enum": [
1561
+ "line",
1562
+ "area",
1563
+ "bar",
1564
+ "pie",
1565
+ "donut"
1566
+ ],
1567
+ "description": "Chart type (default `line`)."
1568
+ },
1569
+ "h": {
1570
+ "type": "number",
1571
+ "description": "Height in px."
1572
+ },
1573
+ "values": {
1574
+ "type": "array",
1575
+ "items": {
1576
+ "type": "number"
1577
+ },
1578
+ "description": "Your own data points. Leave out for sample data."
1579
+ },
1580
+ "label": {
1581
+ "$ref": "#/$defs/text",
1582
+ "description": "Caption in the corner."
1583
+ },
1584
+ "tone": {
1585
+ "enum": [
1586
+ "blue",
1587
+ "green",
1588
+ "yellow",
1589
+ "red",
1590
+ "purple",
1591
+ "pink",
1592
+ "orange",
1593
+ "teal",
1594
+ "gray"
1595
+ ],
1596
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1597
+ },
1598
+ "fill": {
1599
+ "type": "boolean",
1600
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1601
+ }
1602
+ }
1603
+ },
1604
+ {
1605
+ "type": "object",
1606
+ "description": "Single-line text field.",
1607
+ "required": [
1608
+ "type"
1609
+ ],
1610
+ "additionalProperties": false,
1611
+ "properties": {
1612
+ "type": {
1613
+ "const": "input"
1614
+ },
1615
+ "label": {
1616
+ "$ref": "#/$defs/text",
1617
+ "description": "Label shown above the control."
1618
+ },
1619
+ "placeholder": {
1620
+ "$ref": "#/$defs/text",
1621
+ "description": "Placeholder text."
1622
+ },
1623
+ "value": {
1624
+ "$ref": "#/$defs/text",
1625
+ "description": "Pre-filled value."
1626
+ },
1627
+ "inputType": {
1628
+ "type": "string",
1629
+ "description": "HTML input type: `text`, `email`, `password`, `number`…"
1630
+ },
1631
+ "disabled": {
1632
+ "type": "boolean",
1633
+ "description": "Grey out the field."
1634
+ },
1635
+ "tone": {
1636
+ "enum": [
1637
+ "blue",
1638
+ "green",
1639
+ "yellow",
1640
+ "red",
1641
+ "purple",
1642
+ "pink",
1643
+ "orange",
1644
+ "teal",
1645
+ "gray"
1646
+ ],
1647
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1648
+ },
1649
+ "fill": {
1650
+ "type": "boolean",
1651
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1652
+ }
1653
+ }
1654
+ },
1655
+ {
1656
+ "type": "object",
1657
+ "description": "Search field with a magnifier.",
1658
+ "required": [
1659
+ "type"
1660
+ ],
1661
+ "additionalProperties": false,
1662
+ "properties": {
1663
+ "type": {
1664
+ "const": "search"
1665
+ },
1666
+ "placeholder": {
1667
+ "$ref": "#/$defs/text",
1668
+ "description": "Placeholder text."
1669
+ },
1670
+ "tone": {
1671
+ "enum": [
1672
+ "blue",
1673
+ "green",
1674
+ "yellow",
1675
+ "red",
1676
+ "purple",
1677
+ "pink",
1678
+ "orange",
1679
+ "teal",
1680
+ "gray"
1681
+ ],
1682
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1683
+ },
1684
+ "fill": {
1685
+ "type": "boolean",
1686
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1687
+ }
1688
+ }
1689
+ },
1690
+ {
1691
+ "type": "object",
1692
+ "description": "Multi-line text field.",
1693
+ "required": [
1694
+ "type"
1695
+ ],
1696
+ "additionalProperties": false,
1697
+ "properties": {
1698
+ "type": {
1699
+ "const": "textarea"
1700
+ },
1701
+ "label": {
1702
+ "$ref": "#/$defs/text",
1703
+ "description": "Label shown above the control."
1704
+ },
1705
+ "placeholder": {
1706
+ "$ref": "#/$defs/text",
1707
+ "description": "Placeholder text."
1708
+ },
1709
+ "rows": {
1710
+ "type": "number",
1711
+ "description": "Visible rows (default 3)."
1712
+ },
1713
+ "tone": {
1714
+ "enum": [
1715
+ "blue",
1716
+ "green",
1717
+ "yellow",
1718
+ "red",
1719
+ "purple",
1720
+ "pink",
1721
+ "orange",
1722
+ "teal",
1723
+ "gray"
1724
+ ],
1725
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1726
+ },
1727
+ "fill": {
1728
+ "type": "boolean",
1729
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1730
+ }
1731
+ }
1732
+ },
1733
+ {
1734
+ "type": "object",
1735
+ "description": "Dropdown.",
1736
+ "required": [
1737
+ "type",
1738
+ "options"
1739
+ ],
1740
+ "additionalProperties": false,
1741
+ "properties": {
1742
+ "type": {
1743
+ "const": "select"
1744
+ },
1745
+ "label": {
1746
+ "$ref": "#/$defs/text",
1747
+ "description": "Label shown above the control."
1748
+ },
1749
+ "options": {
1750
+ "type": "array",
1751
+ "items": {
1752
+ "$ref": "#/$defs/text"
1753
+ },
1754
+ "description": "Choices."
1755
+ },
1756
+ "selected": {
1757
+ "type": "number",
1758
+ "description": "Index of the pre-selected option (default 0)."
1759
+ },
1760
+ "tone": {
1761
+ "enum": [
1762
+ "blue",
1763
+ "green",
1764
+ "yellow",
1765
+ "red",
1766
+ "purple",
1767
+ "pink",
1768
+ "orange",
1769
+ "teal",
1770
+ "gray"
1771
+ ],
1772
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1773
+ },
1774
+ "fill": {
1775
+ "type": "boolean",
1776
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1777
+ }
1778
+ }
1779
+ },
1780
+ {
1781
+ "type": "object",
1782
+ "description": "Checkbox with a label.",
1783
+ "required": [
1784
+ "type",
1785
+ "label"
1786
+ ],
1787
+ "additionalProperties": false,
1788
+ "properties": {
1789
+ "type": {
1790
+ "const": "checkbox"
1791
+ },
1792
+ "label": {
1793
+ "$ref": "#/$defs/text",
1794
+ "description": "Label shown above the control."
1795
+ },
1796
+ "checked": {
1797
+ "type": "boolean",
1798
+ "description": "Start ticked."
1799
+ },
1800
+ "tone": {
1801
+ "enum": [
1802
+ "blue",
1803
+ "green",
1804
+ "yellow",
1805
+ "red",
1806
+ "purple",
1807
+ "pink",
1808
+ "orange",
1809
+ "teal",
1810
+ "gray"
1811
+ ],
1812
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1813
+ },
1814
+ "fill": {
1815
+ "type": "boolean",
1816
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1817
+ }
1818
+ }
1819
+ },
1820
+ {
1821
+ "type": "object",
1822
+ "description": "On/off switch with a label.",
1823
+ "required": [
1824
+ "type",
1825
+ "label"
1826
+ ],
1827
+ "additionalProperties": false,
1828
+ "properties": {
1829
+ "type": {
1830
+ "const": "toggle"
1831
+ },
1832
+ "label": {
1833
+ "$ref": "#/$defs/text",
1834
+ "description": "Label shown above the control."
1835
+ },
1836
+ "checked": {
1837
+ "type": "boolean",
1838
+ "description": "Start switched on."
1839
+ },
1840
+ "tone": {
1841
+ "enum": [
1842
+ "blue",
1843
+ "green",
1844
+ "yellow",
1845
+ "red",
1846
+ "purple",
1847
+ "pink",
1848
+ "orange",
1849
+ "teal",
1850
+ "gray"
1851
+ ],
1852
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1853
+ },
1854
+ "fill": {
1855
+ "type": "boolean",
1856
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1857
+ }
1858
+ }
1859
+ },
1860
+ {
1861
+ "type": "object",
1862
+ "description": "Radio group.",
1863
+ "required": [
1864
+ "type",
1865
+ "options"
1866
+ ],
1867
+ "additionalProperties": false,
1868
+ "properties": {
1869
+ "type": {
1870
+ "const": "radio"
1871
+ },
1872
+ "label": {
1873
+ "$ref": "#/$defs/text",
1874
+ "description": "Label shown above the control."
1875
+ },
1876
+ "options": {
1877
+ "type": "array",
1878
+ "items": {
1879
+ "$ref": "#/$defs/text"
1880
+ },
1881
+ "description": "Choices."
1882
+ },
1883
+ "selected": {
1884
+ "type": "number",
1885
+ "description": "Index of the pre-selected option (default 0)."
1886
+ },
1887
+ "tone": {
1888
+ "enum": [
1889
+ "blue",
1890
+ "green",
1891
+ "yellow",
1892
+ "red",
1893
+ "purple",
1894
+ "pink",
1895
+ "orange",
1896
+ "teal",
1897
+ "gray"
1898
+ ],
1899
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1900
+ },
1901
+ "fill": {
1902
+ "type": "boolean",
1903
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1904
+ }
1905
+ }
1906
+ },
1907
+ {
1908
+ "type": "object",
1909
+ "description": "Range slider.",
1910
+ "required": [
1911
+ "type"
1912
+ ],
1913
+ "additionalProperties": false,
1914
+ "properties": {
1915
+ "type": {
1916
+ "const": "slider"
1917
+ },
1918
+ "label": {
1919
+ "$ref": "#/$defs/text",
1920
+ "description": "Label shown above the control."
1921
+ },
1922
+ "value": {
1923
+ "type": "number",
1924
+ "description": "Start position, 0 to 100 (default 30)."
1925
+ },
1926
+ "tone": {
1927
+ "enum": [
1928
+ "blue",
1929
+ "green",
1930
+ "yellow",
1931
+ "red",
1932
+ "purple",
1933
+ "pink",
1934
+ "orange",
1935
+ "teal",
1936
+ "gray"
1937
+ ],
1938
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
1939
+ },
1940
+ "fill": {
1941
+ "type": "boolean",
1942
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
1943
+ }
1944
+ }
1945
+ },
1946
+ {
1947
+ "type": "object",
1948
+ "description": "Button, optionally with an icon. Navigates with `go`, opens a `modal` with `open`, shows a message with `toast`.",
1949
+ "required": [
1950
+ "type"
1951
+ ],
1952
+ "additionalProperties": false,
1953
+ "properties": {
1954
+ "type": {
1955
+ "const": "button"
1956
+ },
1957
+ "label": {
1958
+ "$ref": "#/$defs/text",
1959
+ "description": "Button text. Leave out for an icon-only button."
1960
+ },
1961
+ "icon": {
1962
+ "enum": [
1963
+ "home",
1964
+ "search",
1965
+ "heart",
1966
+ "comment",
1967
+ "share",
1968
+ "bookmark",
1969
+ "plus",
1970
+ "bell",
1971
+ "user",
1972
+ "users",
1973
+ "mail",
1974
+ "settings",
1975
+ "camera",
1976
+ "image",
1977
+ "video",
1978
+ "star",
1979
+ "menu",
1980
+ "more",
1981
+ "close",
1982
+ "check",
1983
+ "arrow-right",
1984
+ "arrow-left",
1985
+ "chevron-down",
1986
+ "chevron-right",
1987
+ "play",
1988
+ "pin",
1989
+ "trash",
1990
+ "edit",
1991
+ "upload",
1992
+ "download",
1993
+ "lock",
1994
+ "cart",
1995
+ "chart",
1996
+ "calendar",
1997
+ "filter",
1998
+ "info",
1999
+ "send"
2000
+ ],
2001
+ "description": "Icon shown before the label."
2002
+ },
2003
+ "primary": {
2004
+ "type": "boolean",
2005
+ "description": "Heavier border: the main action on the screen."
2006
+ },
2007
+ "disabled": {
2008
+ "type": "boolean",
2009
+ "description": "Grey out the button."
2010
+ },
2011
+ "go": {
2012
+ "type": "string",
2013
+ "description": "Id of the screen to open when clicked."
2014
+ },
2015
+ "toast": {
2016
+ "$ref": "#/$defs/text",
2017
+ "description": "Message shown in a toast when clicked."
2018
+ },
2019
+ "open": {
2020
+ "type": "string",
2021
+ "description": "Id of a `modal` block to open when clicked."
2022
+ },
2023
+ "close": {
2024
+ "type": "boolean",
2025
+ "description": "Close the modal this block is inside when clicked."
2026
+ },
2027
+ "tone": {
2028
+ "enum": [
2029
+ "blue",
2030
+ "green",
2031
+ "yellow",
2032
+ "red",
2033
+ "purple",
2034
+ "pink",
2035
+ "orange",
2036
+ "teal",
2037
+ "gray"
2038
+ ],
2039
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2040
+ },
2041
+ "fill": {
2042
+ "type": "boolean",
2043
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2044
+ }
2045
+ }
2046
+ },
2047
+ {
2048
+ "type": "object",
2049
+ "description": "Filter pills. Clicking one selects it and shows a “Results updated” toast.",
2050
+ "required": [
2051
+ "type",
2052
+ "options"
2053
+ ],
2054
+ "additionalProperties": false,
2055
+ "properties": {
2056
+ "type": {
2057
+ "const": "chips"
2058
+ },
2059
+ "options": {
2060
+ "type": "array",
2061
+ "items": {
2062
+ "$ref": "#/$defs/text"
2063
+ },
2064
+ "description": "Pill labels."
2065
+ },
2066
+ "active": {
2067
+ "type": "number",
2068
+ "description": "Index of the selected pill (default 0)."
2069
+ },
2070
+ "tone": {
2071
+ "enum": [
2072
+ "blue",
2073
+ "green",
2074
+ "yellow",
2075
+ "red",
2076
+ "purple",
2077
+ "pink",
2078
+ "orange",
2079
+ "teal",
2080
+ "gray"
2081
+ ],
2082
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2083
+ },
2084
+ "fill": {
2085
+ "type": "boolean",
2086
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2087
+ }
2088
+ }
2089
+ },
2090
+ {
2091
+ "type": "object",
2092
+ "description": "Tab strip. Each tab has its own list of blocks.",
2093
+ "required": [
2094
+ "type",
2095
+ "tabs"
2096
+ ],
2097
+ "additionalProperties": false,
2098
+ "properties": {
2099
+ "type": {
2100
+ "const": "tabs"
2101
+ },
2102
+ "tabs": {
2103
+ "type": "array",
2104
+ "items": {
2105
+ "type": "object",
2106
+ "required": [
2107
+ "label"
2108
+ ],
2109
+ "properties": {
2110
+ "label": {
2111
+ "$ref": "#/$defs/text"
2112
+ },
2113
+ "children": {
2114
+ "type": "array",
2115
+ "items": {
2116
+ "$ref": "#/$defs/block"
2117
+ }
2118
+ }
2119
+ },
2120
+ "additionalProperties": false
2121
+ },
2122
+ "description": "List of `{ label, children }`."
2123
+ },
2124
+ "tone": {
2125
+ "enum": [
2126
+ "blue",
2127
+ "green",
2128
+ "yellow",
2129
+ "red",
2130
+ "purple",
2131
+ "pink",
2132
+ "orange",
2133
+ "teal",
2134
+ "gray"
2135
+ ],
2136
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2137
+ },
2138
+ "fill": {
2139
+ "type": "boolean",
2140
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2141
+ }
2142
+ }
2143
+ },
2144
+ {
2145
+ "type": "object",
2146
+ "description": "“Next →” strip at the bottom of a screen. Hidden in the PDF.",
2147
+ "required": [
2148
+ "type"
2149
+ ],
2150
+ "additionalProperties": false,
2151
+ "properties": {
2152
+ "type": {
2153
+ "const": "nextbar"
2154
+ },
2155
+ "label": {
2156
+ "$ref": "#/$defs/text",
2157
+ "description": "Bold lead-in (default “Next →”)."
2158
+ },
2159
+ "text": {
2160
+ "$ref": "#/$defs/text",
2161
+ "description": "What happens next."
2162
+ },
2163
+ "button": {
2164
+ "$ref": "#/$defs/text",
2165
+ "description": "Button text (default “Continue →”)."
2166
+ },
2167
+ "go": {
2168
+ "type": "string",
2169
+ "description": "Id of the screen to open when clicked."
2170
+ },
2171
+ "toast": {
2172
+ "$ref": "#/$defs/text",
2173
+ "description": "Message shown in a toast when clicked."
2174
+ },
2175
+ "open": {
2176
+ "type": "string",
2177
+ "description": "Id of a `modal` block to open when clicked."
2178
+ },
2179
+ "close": {
2180
+ "type": "boolean",
2181
+ "description": "Close the modal this block is inside when clicked."
2182
+ },
2183
+ "tone": {
2184
+ "enum": [
2185
+ "blue",
2186
+ "green",
2187
+ "yellow",
2188
+ "red",
2189
+ "purple",
2190
+ "pink",
2191
+ "orange",
2192
+ "teal",
2193
+ "gray"
2194
+ ],
2195
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2196
+ },
2197
+ "fill": {
2198
+ "type": "boolean",
2199
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2200
+ }
2201
+ }
2202
+ },
2203
+ {
2204
+ "type": "object",
2205
+ "description": "Path to the current page. The last item is the current one.",
2206
+ "required": [
2207
+ "type",
2208
+ "items"
2209
+ ],
2210
+ "additionalProperties": false,
2211
+ "properties": {
2212
+ "type": {
2213
+ "const": "breadcrumb"
2214
+ },
2215
+ "items": {
2216
+ "type": "array",
2217
+ "items": {
2218
+ "$ref": "#/$defs/text"
2219
+ },
2220
+ "description": "Path segments."
2221
+ },
2222
+ "tone": {
2223
+ "enum": [
2224
+ "blue",
2225
+ "green",
2226
+ "yellow",
2227
+ "red",
2228
+ "purple",
2229
+ "pink",
2230
+ "orange",
2231
+ "teal",
2232
+ "gray"
2233
+ ],
2234
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2235
+ },
2236
+ "fill": {
2237
+ "type": "boolean",
2238
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2239
+ }
2240
+ }
2241
+ },
2242
+ {
2243
+ "type": "object",
2244
+ "description": "Previous / page numbers / next.",
2245
+ "required": [
2246
+ "type"
2247
+ ],
2248
+ "additionalProperties": false,
2249
+ "properties": {
2250
+ "type": {
2251
+ "const": "pagination"
2252
+ },
2253
+ "pages": {
2254
+ "type": "number",
2255
+ "description": "Number of pages (default 5)."
2256
+ },
2257
+ "active": {
2258
+ "type": "number",
2259
+ "description": "Current page, starting at 1 (default 1)."
2260
+ },
2261
+ "tone": {
2262
+ "enum": [
2263
+ "blue",
2264
+ "green",
2265
+ "yellow",
2266
+ "red",
2267
+ "purple",
2268
+ "pink",
2269
+ "orange",
2270
+ "teal",
2271
+ "gray"
2272
+ ],
2273
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2274
+ },
2275
+ "fill": {
2276
+ "type": "boolean",
2277
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2278
+ }
2279
+ }
2280
+ },
2281
+ {
2282
+ "type": "object",
2283
+ "description": "Numbered progress through a multi-step flow (checkout, onboarding).",
2284
+ "required": [
2285
+ "type",
2286
+ "items"
2287
+ ],
2288
+ "additionalProperties": false,
2289
+ "properties": {
2290
+ "type": {
2291
+ "const": "steps"
2292
+ },
2293
+ "items": {
2294
+ "type": "array",
2295
+ "items": {
2296
+ "$ref": "#/$defs/text"
2297
+ },
2298
+ "description": "Step names."
2299
+ },
2300
+ "active": {
2301
+ "type": "number",
2302
+ "description": "Index of the current step, starting at 0 (default 0)."
2303
+ },
2304
+ "tone": {
2305
+ "enum": [
2306
+ "blue",
2307
+ "green",
2308
+ "yellow",
2309
+ "red",
2310
+ "purple",
2311
+ "pink",
2312
+ "orange",
2313
+ "teal",
2314
+ "gray"
2315
+ ],
2316
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2317
+ },
2318
+ "fill": {
2319
+ "type": "boolean",
2320
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2321
+ }
2322
+ }
2323
+ },
2324
+ {
2325
+ "type": "object",
2326
+ "description": "Bottom tab bar of a mobile app: icons with small labels.",
2327
+ "required": [
2328
+ "type",
2329
+ "items"
2330
+ ],
2331
+ "additionalProperties": false,
2332
+ "properties": {
2333
+ "type": {
2334
+ "const": "tabbar"
2335
+ },
2336
+ "items": {
2337
+ "type": "array",
2338
+ "items": {
2339
+ "type": "object",
2340
+ "properties": {
2341
+ "icon": {
2342
+ "enum": [
2343
+ "home",
2344
+ "search",
2345
+ "heart",
2346
+ "comment",
2347
+ "share",
2348
+ "bookmark",
2349
+ "plus",
2350
+ "bell",
2351
+ "user",
2352
+ "users",
2353
+ "mail",
2354
+ "settings",
2355
+ "camera",
2356
+ "image",
2357
+ "video",
2358
+ "star",
2359
+ "menu",
2360
+ "more",
2361
+ "close",
2362
+ "check",
2363
+ "arrow-right",
2364
+ "arrow-left",
2365
+ "chevron-down",
2366
+ "chevron-right",
2367
+ "play",
2368
+ "pin",
2369
+ "trash",
2370
+ "edit",
2371
+ "upload",
2372
+ "download",
2373
+ "lock",
2374
+ "cart",
2375
+ "chart",
2376
+ "calendar",
2377
+ "filter",
2378
+ "info",
2379
+ "send"
2380
+ ]
2381
+ },
2382
+ "label": {
2383
+ "$ref": "#/$defs/text"
2384
+ },
2385
+ "go": {
2386
+ "type": "string"
2387
+ },
2388
+ "toast": {
2389
+ "$ref": "#/$defs/text"
2390
+ },
2391
+ "open": {
2392
+ "type": "string"
2393
+ }
2394
+ },
2395
+ "additionalProperties": false
2396
+ },
2397
+ "description": "List of `{ icon, label, go, toast, open }`."
2398
+ },
2399
+ "active": {
2400
+ "type": "number",
2401
+ "description": "Index of the highlighted item (default 0)."
2402
+ },
2403
+ "tone": {
2404
+ "enum": [
2405
+ "blue",
2406
+ "green",
2407
+ "yellow",
2408
+ "red",
2409
+ "purple",
2410
+ "pink",
2411
+ "orange",
2412
+ "teal",
2413
+ "gray"
2414
+ ],
2415
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2416
+ },
2417
+ "fill": {
2418
+ "type": "boolean",
2419
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2420
+ }
2421
+ }
2422
+ },
2423
+ {
2424
+ "type": "object",
2425
+ "description": "Banner for information, success, warnings and errors.",
2426
+ "required": [
2427
+ "type",
2428
+ "text"
2429
+ ],
2430
+ "additionalProperties": false,
2431
+ "properties": {
2432
+ "type": {
2433
+ "const": "alert"
2434
+ },
2435
+ "text": {
2436
+ "$ref": "#/$defs/text",
2437
+ "description": "Message."
2438
+ },
2439
+ "title": {
2440
+ "$ref": "#/$defs/text",
2441
+ "description": "Bold first line."
2442
+ },
2443
+ "kind": {
2444
+ "enum": [
2445
+ "info",
2446
+ "success",
2447
+ "warning",
2448
+ "error"
2449
+ ],
2450
+ "description": "Type and colour (default `info`)."
2451
+ },
2452
+ "tone": {
2453
+ "enum": [
2454
+ "blue",
2455
+ "green",
2456
+ "yellow",
2457
+ "red",
2458
+ "purple",
2459
+ "pink",
2460
+ "orange",
2461
+ "teal",
2462
+ "gray"
2463
+ ],
2464
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2465
+ },
2466
+ "fill": {
2467
+ "type": "boolean",
2468
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2469
+ }
2470
+ }
2471
+ },
2472
+ {
2473
+ "type": "object",
2474
+ "description": "Progress bar.",
2475
+ "required": [
2476
+ "type",
2477
+ "value"
2478
+ ],
2479
+ "additionalProperties": false,
2480
+ "properties": {
2481
+ "type": {
2482
+ "const": "progress"
2483
+ },
2484
+ "value": {
2485
+ "type": "number",
2486
+ "description": "Percent complete, 0 to 100."
2487
+ },
2488
+ "label": {
2489
+ "$ref": "#/$defs/text",
2490
+ "description": "Caption above the bar."
2491
+ },
2492
+ "tone": {
2493
+ "enum": [
2494
+ "blue",
2495
+ "green",
2496
+ "yellow",
2497
+ "red",
2498
+ "purple",
2499
+ "pink",
2500
+ "orange",
2501
+ "teal",
2502
+ "gray"
2503
+ ],
2504
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2505
+ },
2506
+ "fill": {
2507
+ "type": "boolean",
2508
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2509
+ }
2510
+ }
2511
+ },
2512
+ {
2513
+ "type": "object",
2514
+ "description": "Dialog that opens over the screen when a button, card or link has `open: <id>`. Close with a `close: true` button, the X, or a click outside.",
2515
+ "required": [
2516
+ "type",
2517
+ "id"
2518
+ ],
2519
+ "additionalProperties": false,
2520
+ "properties": {
2521
+ "type": {
2522
+ "const": "modal"
2523
+ },
2524
+ "id": {
2525
+ "type": "string",
2526
+ "description": "Unique id; other blocks use it in `open:`."
2527
+ },
2528
+ "title": {
2529
+ "$ref": "#/$defs/text",
2530
+ "description": "Heading of the dialog."
2531
+ },
2532
+ "width": {
2533
+ "enum": [
2534
+ "narrow",
2535
+ "medium",
2536
+ "wide"
2537
+ ],
2538
+ "description": "Dialog width (default `medium`)."
2539
+ },
2540
+ "tone": {
2541
+ "enum": [
2542
+ "blue",
2543
+ "green",
2544
+ "yellow",
2545
+ "red",
2546
+ "purple",
2547
+ "pink",
2548
+ "orange",
2549
+ "teal",
2550
+ "gray"
2551
+ ],
2552
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2553
+ },
2554
+ "fill": {
2555
+ "type": "boolean",
2556
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2557
+ },
2558
+ "children": {
2559
+ "type": "array",
2560
+ "items": {
2561
+ "$ref": "#/$defs/block"
2562
+ }
2563
+ }
2564
+ }
2565
+ },
2566
+ {
2567
+ "type": "object",
2568
+ "description": "Table. A cell is text or a block (e.g. `badge`, `button`). A row can be `{ cells, go }` to make it clickable.",
2569
+ "required": [
2570
+ "type",
2571
+ "columns",
2572
+ "rows"
2573
+ ],
2574
+ "additionalProperties": false,
2575
+ "properties": {
2576
+ "type": {
2577
+ "const": "table"
2578
+ },
2579
+ "columns": {
2580
+ "type": "array",
2581
+ "items": {
2582
+ "$ref": "#/$defs/text"
2583
+ },
2584
+ "description": "Column headings."
2585
+ },
2586
+ "rows": {
2587
+ "type": "array",
2588
+ "items": {
2589
+ "anyOf": [
2590
+ {
2591
+ "type": "array",
2592
+ "items": {
2593
+ "$ref": "#/$defs/cell"
2594
+ }
2595
+ },
2596
+ {
2597
+ "type": "object",
2598
+ "required": [
2599
+ "cells"
2600
+ ],
2601
+ "properties": {
2602
+ "cells": {
2603
+ "type": "array",
2604
+ "items": {
2605
+ "$ref": "#/$defs/cell"
2606
+ }
2607
+ },
2608
+ "go": {
2609
+ "type": "string"
2610
+ }
2611
+ },
2612
+ "additionalProperties": false
2613
+ }
2614
+ ]
2615
+ },
2616
+ "description": "List of rows: `[cell, cell]` or `{ cells: [...], go: screenId }`."
2617
+ },
2618
+ "tone": {
2619
+ "enum": [
2620
+ "blue",
2621
+ "green",
2622
+ "yellow",
2623
+ "red",
2624
+ "purple",
2625
+ "pink",
2626
+ "orange",
2627
+ "teal",
2628
+ "gray"
2629
+ ],
2630
+ "description": "Colour this block and everything inside it: outlines, text and drawn shapes."
2631
+ },
2632
+ "fill": {
2633
+ "type": "boolean",
2634
+ "description": "Give the block a tinted background (uses `tone`, or a neutral tint)."
2635
+ }
2636
+ }
2637
+ }
2638
+ ]
2639
+ }
2640
+ }
2641
+ }