ferst-core 0.6.1 → 0.7.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.
- package/bin/ferst-update.mjs +135 -6
- package/components/BlockRenderer.astro +107 -103
- package/components/blocks/Prose.astro +56 -39
- package/components/recipes/Documents.astro +146 -0
- package/components/recipes/Hero.astro +383 -191
- package/components/recipes/Tiles.astro +23 -4
- package/components/recipes/Video.astro +157 -0
- package/content/blocks.ts +773 -719
- package/content/cookies.ts +112 -103
- package/examples/primitives.ts +28 -28
- package/examples/recipes.ts +4 -0
- package/lib/documents.ts +62 -0
- package/lib/inline-markdown.ts +59 -52
- package/lib/prose.ts +29 -0
- package/lib/video.ts +56 -0
- package/package.json +1 -1
package/content/blocks.ts
CHANGED
|
@@ -1,719 +1,773 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* The block palette — the heart of the Ferst page model (see
|
|
5
|
-
* docs/BLOCK-ARCHITECTURE.md). A page is an ordered list of typed blocks stored
|
|
6
|
-
* as JSON; a Zod **discriminated union** on `type` is the single contract the AI
|
|
7
|
-
* composes against, the CMS validates, and the renderer's registry keys on.
|
|
8
|
-
*
|
|
9
|
-
* This is an original design of the *mechanism*, built from scratch. It starts
|
|
10
|
-
* with **Level-1 primitives** only; recipes (Level 2) and
|
|
11
|
-
* page templates (Level 3) layer on top later, and layout/container primitives
|
|
12
|
-
* (Section/Grid/Stack, which nest child blocks) are a deliberate next slice.
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
|
-
/** Every block shares a `type` discriminant and an `enabled` flag (keep a block
|
|
16
|
-
* in the page data without rendering it). */
|
|
17
|
-
export const headingBlock = z.object({
|
|
18
|
-
type: z.literal('heading'),
|
|
19
|
-
enabled: z.boolean().default(true),
|
|
20
|
-
text: z.string(),
|
|
21
|
-
level: z.number().int().min(1).max(6).default(2),
|
|
22
|
-
/** Explicit per-heading alignment. OMITTED ⇒ inherit the page/section
|
|
23
|
-
* `--content-align` cascade; set it only to override for this one heading. */
|
|
24
|
-
align: z.enum(['start', 'center', 'end']).optional(),
|
|
25
|
-
/** Paint the text with a brand → accent-2 gradient (falls back to solid ink
|
|
26
|
-
* where background-clip:text is unsupported). A per-block opt-in effect. */
|
|
27
|
-
gradient: z.boolean().default(false),
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
export const proseBlock = z.object({
|
|
31
|
-
type: z.literal('prose'),
|
|
32
|
-
enabled: z.boolean().default(true),
|
|
33
|
-
/**
|
|
34
|
-
*
|
|
35
|
-
text: z.string(),
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
export const imageBlock = z.object({
|
|
39
|
-
type: z.literal('image'),
|
|
40
|
-
enabled: z.boolean().default(true),
|
|
41
|
-
src: z.string(),
|
|
42
|
-
alt: z.string().default(''),
|
|
43
|
-
caption: z.string().optional(),
|
|
44
|
-
/** Canonical framing options — a small, clear set the AI or a client picks
|
|
45
|
-
* from, rather than free-form CSS. Corners follow the site by default. */
|
|
46
|
-
radius: z.enum(['none', 'soft', 'round']).default('soft'),
|
|
47
|
-
shadow: z.boolean().default(false),
|
|
48
|
-
border: z.boolean().default(false),
|
|
49
|
-
ratio: z.enum(['auto', 'square', '4/3', '3/2', '16/9', '21/9']).default('auto'),
|
|
50
|
-
/** Opt in to a soft clip-path reveal as the image scrolls into view
|
|
51
|
-
* (progressive: no motion under reduced-motion or unsupported browsers). */
|
|
52
|
-
reveal: z.boolean().default(false),
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
export const buttonBlock = z.object({
|
|
56
|
-
type: z.literal('button'),
|
|
57
|
-
enabled: z.boolean().default(true),
|
|
58
|
-
label: z.string(),
|
|
59
|
-
href: z.string(),
|
|
60
|
-
/** Role, not decoration: primary action, secondary action, filled CTA, or a
|
|
61
|
-
* quiet ghost. Shape (radius) is a site-wide token, not a per-button choice. */
|
|
62
|
-
variant: z.enum(['primary', 'secondary', 'cta', 'ghost']).default('primary'),
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
export const quoteBlock = z.object({
|
|
66
|
-
type: z.literal('quote'),
|
|
67
|
-
enabled: z.boolean().default(true),
|
|
68
|
-
text: z.string(),
|
|
69
|
-
cite: z.string().optional(),
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
export const dividerBlock = z.object({
|
|
73
|
-
type: z.literal('divider'),
|
|
74
|
-
enabled: z.boolean().default(true),
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
export const spacerBlock = z.object({
|
|
78
|
-
type: z.literal('spacer'),
|
|
79
|
-
enabled: z.boolean().default(true),
|
|
80
|
-
size: z.enum(['sm', 'md', 'lg']).default('md'),
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
export const badgeBlock = z.object({
|
|
84
|
-
type: z.literal('badge'),
|
|
85
|
-
enabled: z.boolean().default(true),
|
|
86
|
-
text: z.string(),
|
|
87
|
-
tone: z.enum(['neutral', 'accent']).default('accent'),
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
export const statBlock = z.object({
|
|
91
|
-
type: z.literal('stat'),
|
|
92
|
-
enabled: z.boolean().default(true),
|
|
93
|
-
value: z.string(),
|
|
94
|
-
label: z.string(),
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
export const listBlock = z.object({
|
|
98
|
-
type: z.literal('list'),
|
|
99
|
-
enabled: z.boolean().default(true),
|
|
100
|
-
/** bullet (disc) · number (ordered) · check (ticked, uses the check icon). */
|
|
101
|
-
style: z.enum(['bullet', 'number', 'check']).default('bullet'),
|
|
102
|
-
items: z.array(z.string()).default([]),
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
/* ── Level 2 — Recipes (curated, opinionated compositions of primitives) ─────
|
|
106
|
-
* A recipe is a first-class block in the same union, but it renders a *designed*
|
|
107
|
-
* layout (composing primitives internally) rather than a bare element. Locked
|
|
108
|
-
* components so quality can't drift (BLOCK-ARCHITECTURE §6). */
|
|
109
|
-
export const heroBlock = z.object({
|
|
110
|
-
type: z.literal('hero'),
|
|
111
|
-
enabled: z.boolean().default(true),
|
|
112
|
-
eyebrow: z.string().optional(),
|
|
113
|
-
title: z.string(),
|
|
114
|
-
subtitle: z.string().optional(),
|
|
115
|
-
cta: z.object({ label: z.string(), href: z.string() }).optional(),
|
|
116
|
-
image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
|
|
117
|
-
/**
|
|
118
|
-
*
|
|
119
|
-
* the darkening scrim so text stays legible; `poster` is
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
})
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
{
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
*
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
title: z.string()
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
intro
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
*
|
|
432
|
-
*
|
|
433
|
-
export const
|
|
434
|
-
type: z.literal('
|
|
435
|
-
enabled: z.boolean().default(true),
|
|
436
|
-
title: z.string().optional(),
|
|
437
|
-
intro: z.string().optional(),
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
*
|
|
555
|
-
*
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
| z.infer<typeof
|
|
580
|
-
| z.infer<typeof
|
|
581
|
-
| z.infer<typeof
|
|
582
|
-
| z.infer<typeof
|
|
583
|
-
| z.infer<typeof
|
|
584
|
-
| z.infer<typeof
|
|
585
|
-
| z.infer<typeof
|
|
586
|
-
| z.infer<typeof
|
|
587
|
-
| z.infer<typeof
|
|
588
|
-
| z.infer<typeof
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The block palette — the heart of the Ferst page model (see
|
|
5
|
+
* docs/BLOCK-ARCHITECTURE.md). A page is an ordered list of typed blocks stored
|
|
6
|
+
* as JSON; a Zod **discriminated union** on `type` is the single contract the AI
|
|
7
|
+
* composes against, the CMS validates, and the renderer's registry keys on.
|
|
8
|
+
*
|
|
9
|
+
* This is an original design of the *mechanism*, built from scratch. It starts
|
|
10
|
+
* with **Level-1 primitives** only; recipes (Level 2) and
|
|
11
|
+
* page templates (Level 3) layer on top later, and layout/container primitives
|
|
12
|
+
* (Section/Grid/Stack, which nest child blocks) are a deliberate next slice.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/** Every block shares a `type` discriminant and an `enabled` flag (keep a block
|
|
16
|
+
* in the page data without rendering it). */
|
|
17
|
+
export const headingBlock = z.object({
|
|
18
|
+
type: z.literal('heading'),
|
|
19
|
+
enabled: z.boolean().default(true),
|
|
20
|
+
text: z.string(),
|
|
21
|
+
level: z.number().int().min(1).max(6).default(2),
|
|
22
|
+
/** Explicit per-heading alignment. OMITTED ⇒ inherit the page/section
|
|
23
|
+
* `--content-align` cascade; set it only to override for this one heading. */
|
|
24
|
+
align: z.enum(['start', 'center', 'end']).optional(),
|
|
25
|
+
/** Paint the text with a brand → accent-2 gradient (falls back to solid ink
|
|
26
|
+
* where background-clip:text is unsupported). A per-block opt-in effect. */
|
|
27
|
+
gradient: z.boolean().default(false),
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
export const proseBlock = z.object({
|
|
31
|
+
type: z.literal('prose'),
|
|
32
|
+
enabled: z.boolean().default(true),
|
|
33
|
+
/** Blank lines separate paragraphs; `- ` / `1. ` lines make lists; inline
|
|
34
|
+
* `[links](href)` (incl. tel:/mailto:), `**bold**` and `*italic*` (lib/prose.ts). */
|
|
35
|
+
text: z.string(),
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
export const imageBlock = z.object({
|
|
39
|
+
type: z.literal('image'),
|
|
40
|
+
enabled: z.boolean().default(true),
|
|
41
|
+
src: z.string(),
|
|
42
|
+
alt: z.string().default(''),
|
|
43
|
+
caption: z.string().optional(),
|
|
44
|
+
/** Canonical framing options — a small, clear set the AI or a client picks
|
|
45
|
+
* from, rather than free-form CSS. Corners follow the site by default. */
|
|
46
|
+
radius: z.enum(['none', 'soft', 'round']).default('soft'),
|
|
47
|
+
shadow: z.boolean().default(false),
|
|
48
|
+
border: z.boolean().default(false),
|
|
49
|
+
ratio: z.enum(['auto', 'square', '4/3', '3/2', '16/9', '21/9']).default('auto'),
|
|
50
|
+
/** Opt in to a soft clip-path reveal as the image scrolls into view
|
|
51
|
+
* (progressive: no motion under reduced-motion or unsupported browsers). */
|
|
52
|
+
reveal: z.boolean().default(false),
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
export const buttonBlock = z.object({
|
|
56
|
+
type: z.literal('button'),
|
|
57
|
+
enabled: z.boolean().default(true),
|
|
58
|
+
label: z.string(),
|
|
59
|
+
href: z.string(),
|
|
60
|
+
/** Role, not decoration: primary action, secondary action, filled CTA, or a
|
|
61
|
+
* quiet ghost. Shape (radius) is a site-wide token, not a per-button choice. */
|
|
62
|
+
variant: z.enum(['primary', 'secondary', 'cta', 'ghost']).default('primary'),
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
export const quoteBlock = z.object({
|
|
66
|
+
type: z.literal('quote'),
|
|
67
|
+
enabled: z.boolean().default(true),
|
|
68
|
+
text: z.string(),
|
|
69
|
+
cite: z.string().optional(),
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
export const dividerBlock = z.object({
|
|
73
|
+
type: z.literal('divider'),
|
|
74
|
+
enabled: z.boolean().default(true),
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
export const spacerBlock = z.object({
|
|
78
|
+
type: z.literal('spacer'),
|
|
79
|
+
enabled: z.boolean().default(true),
|
|
80
|
+
size: z.enum(['sm', 'md', 'lg']).default('md'),
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
export const badgeBlock = z.object({
|
|
84
|
+
type: z.literal('badge'),
|
|
85
|
+
enabled: z.boolean().default(true),
|
|
86
|
+
text: z.string(),
|
|
87
|
+
tone: z.enum(['neutral', 'accent']).default('accent'),
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
export const statBlock = z.object({
|
|
91
|
+
type: z.literal('stat'),
|
|
92
|
+
enabled: z.boolean().default(true),
|
|
93
|
+
value: z.string(),
|
|
94
|
+
label: z.string(),
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
export const listBlock = z.object({
|
|
98
|
+
type: z.literal('list'),
|
|
99
|
+
enabled: z.boolean().default(true),
|
|
100
|
+
/** bullet (disc) · number (ordered) · check (ticked, uses the check icon). */
|
|
101
|
+
style: z.enum(['bullet', 'number', 'check']).default('bullet'),
|
|
102
|
+
items: z.array(z.string()).default([]),
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
/* ── Level 2 — Recipes (curated, opinionated compositions of primitives) ─────
|
|
106
|
+
* A recipe is a first-class block in the same union, but it renders a *designed*
|
|
107
|
+
* layout (composing primitives internally) rather than a bare element. Locked
|
|
108
|
+
* components so quality can't drift (BLOCK-ARCHITECTURE §6). */
|
|
109
|
+
export const heroBlock = z.object({
|
|
110
|
+
type: z.literal('hero'),
|
|
111
|
+
enabled: z.boolean().default(true),
|
|
112
|
+
eyebrow: z.string().optional(),
|
|
113
|
+
title: z.string(),
|
|
114
|
+
subtitle: z.string().optional(),
|
|
115
|
+
cta: z.object({ label: z.string(), href: z.string() }).optional(),
|
|
116
|
+
image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
|
|
117
|
+
/** Background media for the `media` layout, in order of precedence: a looping
|
|
118
|
+
* muted `video`, a slow crossfade through `images` (2+), or one `image`.
|
|
119
|
+
* `overlay` (0–100) is the darkening scrim so text stays legible; `poster` is
|
|
120
|
+
* the video's still (and what reduced-motion visitors see). Moving backgrounds
|
|
121
|
+
* get a pause button and stay still under prefers-reduced-motion. */
|
|
122
|
+
media: z
|
|
123
|
+
.object({
|
|
124
|
+
image: z.string().optional(),
|
|
125
|
+
images: z.array(z.string()).max(8).optional(),
|
|
126
|
+
video: z.string().optional(),
|
|
127
|
+
poster: z.string().optional(),
|
|
128
|
+
overlay: z.number().min(0).max(100).default(45),
|
|
129
|
+
/** Where the background leads: e.g. the full video on YouTube. The whole
|
|
130
|
+
* background becomes a link (opens in a new tab — the app on phones), with
|
|
131
|
+
* a visible "Watch the full video" cue; the text and CTA stay on top. */
|
|
132
|
+
link: z.string().optional(),
|
|
133
|
+
linkLabel: z.string().optional(),
|
|
134
|
+
})
|
|
135
|
+
.optional(),
|
|
136
|
+
layout: z.enum(['centered', 'split', 'media']).default('centered'),
|
|
137
|
+
/** How much of the screen a `media` hero takes: `standard` (a band), `tall`,
|
|
138
|
+
* or `screen` — the full first screen, edge to edge (e.g. a video opener). */
|
|
139
|
+
size: z.enum(['standard', 'tall', 'screen']).default('standard'),
|
|
140
|
+
/** Ambient background for centered/split heroes: `mesh` = a soft, slowly
|
|
141
|
+
* drifting brand gradient behind the text (static under reduced-motion). */
|
|
142
|
+
background: z.enum(['none', 'mesh']).default('none'),
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
export const featureCardsBlock = z.object({
|
|
146
|
+
type: z.literal('featureCards'),
|
|
147
|
+
enabled: z.boolean().default(true),
|
|
148
|
+
title: z.string().optional(),
|
|
149
|
+
intro: z.string().optional(),
|
|
150
|
+
columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).default(3),
|
|
151
|
+
cards: z
|
|
152
|
+
.array(
|
|
153
|
+
z.object({
|
|
154
|
+
icon: z.string().optional(),
|
|
155
|
+
title: z.string(),
|
|
156
|
+
text: z.string().optional(),
|
|
157
|
+
href: z.string().optional(),
|
|
158
|
+
})
|
|
159
|
+
)
|
|
160
|
+
.default([]),
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
export const ctaBlock = z.object({
|
|
164
|
+
type: z.literal('cta'),
|
|
165
|
+
enabled: z.boolean().default(true),
|
|
166
|
+
title: z.string(),
|
|
167
|
+
text: z.string().optional(),
|
|
168
|
+
cta: z.object({ label: z.string(), href: z.string() }),
|
|
169
|
+
background: z.enum(['muted', 'accent', 'mesh']).default('accent'),
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
export const faqBlock = z.object({
|
|
173
|
+
type: z.literal('faq'),
|
|
174
|
+
enabled: z.boolean().default(true),
|
|
175
|
+
title: z.string().optional(),
|
|
176
|
+
items: z.array(z.object({ question: z.string(), answer: z.string() })).default([]),
|
|
177
|
+
});
|
|
178
|
+
|
|
179
|
+
export const galleryBlock = z.object({
|
|
180
|
+
type: z.literal('gallery'),
|
|
181
|
+
enabled: z.boolean().default(true),
|
|
182
|
+
columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).default(3),
|
|
183
|
+
images: z
|
|
184
|
+
.array(z.object({ src: z.string(), alt: z.string().default(''), caption: z.string().optional() }))
|
|
185
|
+
.default([]),
|
|
186
|
+
});
|
|
187
|
+
|
|
188
|
+
export const testimonialBlock = z.object({
|
|
189
|
+
type: z.literal('testimonial'),
|
|
190
|
+
enabled: z.boolean().default(true),
|
|
191
|
+
quote: z.string(),
|
|
192
|
+
author: z.string(),
|
|
193
|
+
role: z.string().optional(),
|
|
194
|
+
avatar: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
/** A contact form recipe. `fields` is generic (any labelled input list) so the
|
|
198
|
+
* same recipe serves a contact page, an enquiry form, a sign-up, etc. `action`
|
|
199
|
+
* is optional: the core ships no backend, so with none it renders a standard
|
|
200
|
+
* semantic form a client later points at their own endpoint or a form service. */
|
|
201
|
+
export const contactFormBlock = z.object({
|
|
202
|
+
type: z.literal('contactForm'),
|
|
203
|
+
enabled: z.boolean().default(true),
|
|
204
|
+
title: z.string().optional(),
|
|
205
|
+
intro: z.string().optional(),
|
|
206
|
+
/** Form target. Omit for a non-wired form (e.g. the showcase demo). */
|
|
207
|
+
action: z.string().optional(),
|
|
208
|
+
method: z.enum(['post', 'get']).default('post'),
|
|
209
|
+
submitLabel: z.string().default('Send message'),
|
|
210
|
+
/** Small print under the form (a privacy line, a demo notice, …). */
|
|
211
|
+
note: z.string().optional(),
|
|
212
|
+
fields: z
|
|
213
|
+
.array(
|
|
214
|
+
z.object({
|
|
215
|
+
name: z.string(),
|
|
216
|
+
label: z.string(),
|
|
217
|
+
type: z.enum(['text', 'email', 'tel', 'textarea']).default('text'),
|
|
218
|
+
required: z.boolean().default(false),
|
|
219
|
+
placeholder: z.string().optional(),
|
|
220
|
+
})
|
|
221
|
+
)
|
|
222
|
+
.default([
|
|
223
|
+
{ name: 'name', label: 'Your name', type: 'text', required: true },
|
|
224
|
+
{ name: 'email', label: 'Email', type: 'email', required: true },
|
|
225
|
+
{ name: 'message', label: 'Message', type: 'textarea', required: true },
|
|
226
|
+
]),
|
|
227
|
+
});
|
|
228
|
+
|
|
229
|
+
/** Accordion — a generic expand/collapse list (title + body). Domain-free
|
|
230
|
+
* sibling of `faq` (which carries question/answer semantics). */
|
|
231
|
+
export const accordionBlock = z.object({
|
|
232
|
+
type: z.literal('accordion'),
|
|
233
|
+
enabled: z.boolean().default(true),
|
|
234
|
+
title: z.string().optional(),
|
|
235
|
+
items: z.array(z.object({ heading: z.string(), body: z.string() })).default([]),
|
|
236
|
+
});
|
|
237
|
+
|
|
238
|
+
/** Tiles — a curated card grid with five looks (outline / elevated / filled /
|
|
239
|
+
* gradient / image). The look is chosen per-block via `variant`; radius, stroke
|
|
240
|
+
* and elevation come from the global surface tokens, so tiles stay consistent
|
|
241
|
+
* with every other card on the page. Each tile can link (the whole tile is the
|
|
242
|
+
* target) and carry an icon, eyebrow, title, text and (for `image`) a photo. */
|
|
243
|
+
export const tilesBlock = z.object({
|
|
244
|
+
type: z.literal('tiles'),
|
|
245
|
+
enabled: z.boolean().default(true),
|
|
246
|
+
title: z.string().optional(),
|
|
247
|
+
intro: z.string().optional(),
|
|
248
|
+
columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).default(3),
|
|
249
|
+
variant: z.enum(['outline', 'elevated', 'filled', 'gradient', 'image']).default('elevated'),
|
|
250
|
+
/** Opt in to a pointer-following spotlight glow on hover (a small JS enhancement). */
|
|
251
|
+
spotlight: z.boolean().default(false),
|
|
252
|
+
tiles: z
|
|
253
|
+
.array(
|
|
254
|
+
z
|
|
255
|
+
.object({
|
|
256
|
+
icon: z.string().optional(),
|
|
257
|
+
eyebrow: z.string().optional(),
|
|
258
|
+
/** Optional only for a picture tile: with an image and no text, the tile is
|
|
259
|
+
* the picture alone (no scrim) — a linked poster/logo — named by its alt. */
|
|
260
|
+
title: z.string().optional(),
|
|
261
|
+
text: z.string().optional(),
|
|
262
|
+
href: z.string().optional(),
|
|
263
|
+
/** The link cue on a linking tile ("Learn more" by default). */
|
|
264
|
+
linkLabel: z.string().optional(),
|
|
265
|
+
image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
|
|
266
|
+
})
|
|
267
|
+
.refine((t) => !!t.title || !!t.image, { message: 'A tile needs a title or an image', path: ['title'] })
|
|
268
|
+
)
|
|
269
|
+
.default([]),
|
|
270
|
+
});
|
|
271
|
+
|
|
272
|
+
/** Banner — a full-bleed feature band: a fixed/parallax background image with a
|
|
273
|
+
* legibility scrim and a floating "shaded" content card (eyebrow + heading +
|
|
274
|
+
* text + optional CTA) drifting over it. `align` places the card; `parallax`
|
|
275
|
+
* pins the image so it slides under the content as you scroll (auto-disabled on
|
|
276
|
+
* touch and under reduced-motion). The showpiece "not-dull" effect. */
|
|
277
|
+
export const bannerBlock = z.object({
|
|
278
|
+
type: z.literal('banner'),
|
|
279
|
+
enabled: z.boolean().default(true),
|
|
280
|
+
image: z.string(),
|
|
281
|
+
eyebrow: z.string().optional(),
|
|
282
|
+
title: z.string(),
|
|
283
|
+
text: z.string().optional(),
|
|
284
|
+
cta: z.object({ label: z.string(), href: z.string() }).optional(),
|
|
285
|
+
overlay: z.number().min(0).max(100).default(50),
|
|
286
|
+
align: z.enum(['start', 'center', 'end']).default('start'),
|
|
287
|
+
parallax: z.boolean().default(true),
|
|
288
|
+
/** Break the band out to the full viewport width (edge-to-edge, no rounded
|
|
289
|
+
* corners); the card stays aligned to the page's content column. Great for a
|
|
290
|
+
* homepage hero. Off by default (the band sits inside the content column). */
|
|
291
|
+
fullBleed: z.boolean().default(false),
|
|
292
|
+
});
|
|
293
|
+
|
|
294
|
+
/** Stats — a band of headline numbers (value + label + optional note), over an
|
|
295
|
+
* optional heading/intro and a chosen background. Composes the Stat primitive. */
|
|
296
|
+
export const statsBlock = z.object({
|
|
297
|
+
type: z.literal('stats'),
|
|
298
|
+
enabled: z.boolean().default(true),
|
|
299
|
+
title: z.string().optional(),
|
|
300
|
+
intro: z.string().optional(),
|
|
301
|
+
background: z.enum(['none', 'muted', 'accent']).default('muted'),
|
|
302
|
+
columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).default(3),
|
|
303
|
+
items: z.array(z.object({ value: z.string(), label: z.string(), description: z.string().optional() })).default([]),
|
|
304
|
+
});
|
|
305
|
+
|
|
306
|
+
/** Steps — a numbered process (how-it-works). `horizontal` shows connected cards
|
|
307
|
+
* in a row; `vertical` a stacked timeline. Each step: title + optional text/icon. */
|
|
308
|
+
export const stepsBlock = z.object({
|
|
309
|
+
type: z.literal('steps'),
|
|
310
|
+
enabled: z.boolean().default(true),
|
|
311
|
+
title: z.string().optional(),
|
|
312
|
+
intro: z.string().optional(),
|
|
313
|
+
layout: z.enum(['horizontal', 'vertical']).default('horizontal'),
|
|
314
|
+
items: z.array(z.object({ title: z.string(), text: z.string().optional(), icon: z.string().optional() })).default([]),
|
|
315
|
+
});
|
|
316
|
+
|
|
317
|
+
/** Pricing — a row of plan cards (name, price, period, feature list, CTA). One
|
|
318
|
+
* plan may be `featured` (highlighted). */
|
|
319
|
+
export const pricingBlock = z.object({
|
|
320
|
+
type: z.literal('pricing'),
|
|
321
|
+
enabled: z.boolean().default(true),
|
|
322
|
+
title: z.string().optional(),
|
|
323
|
+
intro: z.string().optional(),
|
|
324
|
+
plans: z
|
|
325
|
+
.array(
|
|
326
|
+
z.object({
|
|
327
|
+
name: z.string(),
|
|
328
|
+
price: z.string(),
|
|
329
|
+
period: z.string().optional(),
|
|
330
|
+
description: z.string().optional(),
|
|
331
|
+
features: z.array(z.string()).default([]),
|
|
332
|
+
cta: z.object({ label: z.string(), href: z.string() }).optional(),
|
|
333
|
+
featured: z.boolean().default(false),
|
|
334
|
+
})
|
|
335
|
+
)
|
|
336
|
+
.default([]),
|
|
337
|
+
});
|
|
338
|
+
|
|
339
|
+
/** Logos — a "trusted by" wall of images; muted by default, colour on hover. */
|
|
340
|
+
export const logosBlock = z.object({
|
|
341
|
+
type: z.literal('logos'),
|
|
342
|
+
enabled: z.boolean().default(true),
|
|
343
|
+
title: z.string().optional(),
|
|
344
|
+
items: z.array(z.object({ src: z.string(), alt: z.string().default(''), href: z.string().optional() })).default([]),
|
|
345
|
+
});
|
|
346
|
+
|
|
347
|
+
/** Tabs — labelled panels; one open at a time. Progressive: the first panel is
|
|
348
|
+
* visible with no JS; a small script wires selection + ARIA. */
|
|
349
|
+
export const tabsBlock = z.object({
|
|
350
|
+
type: z.literal('tabs'),
|
|
351
|
+
enabled: z.boolean().default(true),
|
|
352
|
+
title: z.string().optional(),
|
|
353
|
+
items: z
|
|
354
|
+
.array(z.object({ label: z.string(), heading: z.string().optional(), text: z.string().optional(), image: z.object({ src: z.string(), alt: z.string().default('') }).optional() }))
|
|
355
|
+
.default([]),
|
|
356
|
+
});
|
|
357
|
+
|
|
358
|
+
/** Announcement — a thin full-width bar (message + optional link), optionally
|
|
359
|
+
* dismissible. Dismissal is remembered per `id` in localStorage. */
|
|
360
|
+
export const announcementBlock = z.object({
|
|
361
|
+
type: z.literal('announcement'),
|
|
362
|
+
enabled: z.boolean().default(true),
|
|
363
|
+
text: z.string(),
|
|
364
|
+
link: z.object({ label: z.string(), href: z.string() }).optional(),
|
|
365
|
+
tone: z.enum(['accent', 'neutral']).default('accent'),
|
|
366
|
+
dismissible: z.boolean().default(true),
|
|
367
|
+
/** localStorage key suffix so a dismissed bar stays dismissed. */
|
|
368
|
+
id: z.string().default('default'),
|
|
369
|
+
});
|
|
370
|
+
|
|
371
|
+
/** Bento — an asymmetric (mixed-span) grid of cards. Each item picks a `size`
|
|
372
|
+
* (sm / wide / tall / lg) and a `variant` look; the "living moodboard" layout. */
|
|
373
|
+
export const bentoBlock = z.object({
|
|
374
|
+
type: z.literal('bento'),
|
|
375
|
+
enabled: z.boolean().default(true),
|
|
376
|
+
title: z.string().optional(),
|
|
377
|
+
intro: z.string().optional(),
|
|
378
|
+
items: z
|
|
379
|
+
.array(
|
|
380
|
+
z.object({
|
|
381
|
+
size: z.enum(['sm', 'wide', 'tall', 'lg']).default('sm'),
|
|
382
|
+
variant: z.enum(['surface', 'filled', 'gradient', 'image']).default('surface'),
|
|
383
|
+
icon: z.string().optional(),
|
|
384
|
+
eyebrow: z.string().optional(),
|
|
385
|
+
title: z.string(),
|
|
386
|
+
text: z.string().optional(),
|
|
387
|
+
href: z.string().optional(),
|
|
388
|
+
image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
|
|
389
|
+
})
|
|
390
|
+
)
|
|
391
|
+
.default([]),
|
|
392
|
+
});
|
|
393
|
+
|
|
394
|
+
/** Marquee — an infinite horizontal scroll of short phrases (a feature strip).
|
|
395
|
+
* Pure-CSS transform loop (GPU); pauses on hover; static wrap under
|
|
396
|
+
* reduced-motion. Decorative, so the moving track is aria-hidden. */
|
|
397
|
+
export const marqueeBlock = z.object({
|
|
398
|
+
type: z.literal('marquee'),
|
|
399
|
+
enabled: z.boolean().default(true),
|
|
400
|
+
items: z.array(z.string()).default([]),
|
|
401
|
+
speed: z.enum(['slow', 'normal', 'fast']).default('normal'),
|
|
402
|
+
});
|
|
403
|
+
|
|
404
|
+
/** LatestPosts — a capability-backed recipe: the N most-recent published posts
|
|
405
|
+
* (optionally filtered to a `tag`) as a card grid or a compact list, with a
|
|
406
|
+
* "view all" link. Unlike other recipes it carries no content of its own — it
|
|
407
|
+
* queries the client's posts collection at build time — so it's the bridge from
|
|
408
|
+
* the posts capability into the page/block system (no per-client custom code). */
|
|
409
|
+
export const latestPostsBlock = z.object({
|
|
410
|
+
type: z.literal('latestPosts'),
|
|
411
|
+
enabled: z.boolean().default(true),
|
|
412
|
+
title: z.string().optional(),
|
|
413
|
+
intro: z.string().optional(),
|
|
414
|
+
limit: z.number().int().min(1).max(12).default(3),
|
|
415
|
+
/** Filter to a single tag slug; omit for the main index (minus excluded tags). */
|
|
416
|
+
tag: z.string().optional(),
|
|
417
|
+
/** `grid` = full image cards; `list` = a compact miniature index (thumbnail +
|
|
418
|
+
* category + date per row) that stays short even with many posts. */
|
|
419
|
+
layout: z.enum(['grid', 'list']).default('grid'),
|
|
420
|
+
/** In the `list` layout, badge the most-recent post as "New" when it was
|
|
421
|
+
* published within this many days (0 disables it). Only the newest row is ever
|
|
422
|
+
* flagged, so a frequently-posting site doesn't mark every row. Grid ignores it. */
|
|
423
|
+
newWithinDays: z.number().int().min(0).max(365).default(14),
|
|
424
|
+
/** "View all" target + label (the posts index by default). */
|
|
425
|
+
viewAllHref: z.string().default('/posts'),
|
|
426
|
+
viewAllLabel: z.string().default('All posts'),
|
|
427
|
+
});
|
|
428
|
+
|
|
429
|
+
/** MapEmbed — a consent-gated external map (e.g. Google Maps), the sibling of the
|
|
430
|
+
* calendar embed: nothing loads from the provider until the visitor opts in, so
|
|
431
|
+
* no third-party request fires on page load. `embedUrl` must be https; an unset
|
|
432
|
+
* or unsafe URL degrades to a friendly note + optional "open in Maps" link. */
|
|
433
|
+
export const mapEmbedBlock = z.object({
|
|
434
|
+
type: z.literal('mapEmbed'),
|
|
435
|
+
enabled: z.boolean().default(true),
|
|
436
|
+
title: z.string().optional(),
|
|
437
|
+
intro: z.string().optional(),
|
|
438
|
+
/** The map iframe src (an https embed URL). Blank → a "not set up yet" note. */
|
|
439
|
+
embedUrl: z.string().default(''),
|
|
440
|
+
/** Link to open the location in the provider's app/site (a no-embed fallback). */
|
|
441
|
+
publicUrl: z.string().default(''),
|
|
442
|
+
height: z.number().int().min(150).max(1200).default(450),
|
|
443
|
+
/** Provider name shown in the consent notice ("shared with …"). */
|
|
444
|
+
provider: z.string().default('Google Maps'),
|
|
445
|
+
});
|
|
446
|
+
|
|
447
|
+
/** Table — a simple data table (header row + body rows) for structured data our
|
|
448
|
+
* other blocks can't carry cleanly (fees, opening hours, a cookies list). Scrolls
|
|
449
|
+
* horizontally on narrow screens so it never breaks the page width. */
|
|
450
|
+
export const tableBlock = z.object({
|
|
451
|
+
type: z.literal('table'),
|
|
452
|
+
enabled: z.boolean().default(true),
|
|
453
|
+
title: z.string().optional(),
|
|
454
|
+
intro: z.string().optional(),
|
|
455
|
+
columns: z.array(z.string()).default([]),
|
|
456
|
+
rows: z.array(z.array(z.string())).default([]),
|
|
457
|
+
});
|
|
458
|
+
|
|
459
|
+
/** Notice — an inline highlighted info box (icon? + title? + body + link?) that
|
|
460
|
+
* sets a passage apart from prose ("reporting a concern", "please note"). Two
|
|
461
|
+
* tones (accent / neutral); the in-flow sibling of the corner StickyCallout. */
|
|
462
|
+
export const noticeBlock = z.object({
|
|
463
|
+
type: z.literal('notice'),
|
|
464
|
+
enabled: z.boolean().default(true),
|
|
465
|
+
tone: z.enum(['accent', 'neutral']).default('accent'),
|
|
466
|
+
icon: z.string().optional(),
|
|
467
|
+
title: z.string().optional(),
|
|
468
|
+
text: z.string(),
|
|
469
|
+
link: z.object({ label: z.string(), href: z.string() }).optional(),
|
|
470
|
+
});
|
|
471
|
+
|
|
472
|
+
/** MediaCards — a grid of rich content cards with the IMAGE as a header on top
|
|
473
|
+
* (cover-cropped), then an optional icon badge, title, meta line, description and
|
|
474
|
+
* CTA. The image-HEADER pattern (distinct from `tiles`, which puts the image
|
|
475
|
+
* BEHIND the text) — for groups, team, services, events where the photo AND copy
|
|
476
|
+
* must both stay legible. Whole card links when a card has `href`. */
|
|
477
|
+
export const mediaCardsBlock = z.object({
|
|
478
|
+
type: z.literal('mediaCards'),
|
|
479
|
+
enabled: z.boolean().default(true),
|
|
480
|
+
title: z.string().optional(),
|
|
481
|
+
intro: z.string().optional(),
|
|
482
|
+
columns: z.union([z.literal(2), z.literal(3)]).default(3),
|
|
483
|
+
cards: z
|
|
484
|
+
.array(
|
|
485
|
+
z.object({
|
|
486
|
+
image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
|
|
487
|
+
icon: z.string().optional(),
|
|
488
|
+
title: z.string(),
|
|
489
|
+
/** A short meta line shown as a pill (e.g. "Sundays 10:45 · Main hall"). */
|
|
490
|
+
meta: z.string().optional(),
|
|
491
|
+
text: z.string().optional(),
|
|
492
|
+
href: z.string().optional(),
|
|
493
|
+
/** CTA label when the card links (defaults to "Learn more"). */
|
|
494
|
+
linkLabel: z.string().optional(),
|
|
495
|
+
})
|
|
496
|
+
)
|
|
497
|
+
.default([]),
|
|
498
|
+
});
|
|
499
|
+
|
|
500
|
+
/** ContactCard — a branded "get in touch" band: display title + subtitle on the
|
|
501
|
+
* left, contact channels as tappable pills on the right, a note across the bottom. */
|
|
502
|
+
export const contactCardBlock = z.object({
|
|
503
|
+
type: z.literal('contactCard'),
|
|
504
|
+
enabled: z.boolean().default(true),
|
|
505
|
+
eyebrow: z.string().optional(),
|
|
506
|
+
title: z.string(),
|
|
507
|
+
subtitle: z.string().optional(),
|
|
508
|
+
note: z.string().optional(),
|
|
509
|
+
items: z
|
|
510
|
+
.array(
|
|
511
|
+
z.object({
|
|
512
|
+
icon: z.string().optional(),
|
|
513
|
+
value: z.string(),
|
|
514
|
+
href: z.string().optional(),
|
|
515
|
+
})
|
|
516
|
+
)
|
|
517
|
+
.default([]),
|
|
518
|
+
});
|
|
519
|
+
|
|
520
|
+
/** Locations ("Where to find us") — location tiles, each a consent-gated map over
|
|
521
|
+
* a name / address / directions. https embed URLs only (isSafeEmbedUrl). */
|
|
522
|
+
export const locationsBlock = z.object({
|
|
523
|
+
type: z.literal('locations'),
|
|
524
|
+
enabled: z.boolean().default(true),
|
|
525
|
+
title: z.string().optional(),
|
|
526
|
+
intro: z.string().optional(),
|
|
527
|
+
columns: z.union([z.literal(1), z.literal(2)]).default(2),
|
|
528
|
+
provider: z.string().default('Google Maps'),
|
|
529
|
+
items: z
|
|
530
|
+
.array(
|
|
531
|
+
z.object({
|
|
532
|
+
name: z.string(),
|
|
533
|
+
address: z.string().optional(),
|
|
534
|
+
embedUrl: z.string(),
|
|
535
|
+
directionsUrl: z.string().optional(),
|
|
536
|
+
})
|
|
537
|
+
)
|
|
538
|
+
.default([]),
|
|
539
|
+
});
|
|
540
|
+
|
|
541
|
+
/** Video — a consent-gated YouTube / Vimeo player (incl. a channel's live stream).
|
|
542
|
+
* `url` is the ordinary link an editor would paste; it becomes a privacy-friendly
|
|
543
|
+
* embed (lib/video). An unrecognised link shows as a plain "watch" link. */
|
|
544
|
+
export const videoBlock = z.object({
|
|
545
|
+
type: z.literal('video'),
|
|
546
|
+
enabled: z.boolean().default(true),
|
|
547
|
+
title: z.string().optional(),
|
|
548
|
+
caption: z.string().optional(),
|
|
549
|
+
url: z.string(),
|
|
550
|
+
ratio: z.enum(['16/9', '4/3', '1/1', '9/16']).default('16/9'),
|
|
551
|
+
});
|
|
552
|
+
|
|
553
|
+
/** Documents — a list of files (newsletters, minutes, policies, forms): type badge,
|
|
554
|
+
* title, date and note per row, newest first, optionally grouped by year. `date`
|
|
555
|
+
* is YYYY-MM-DD. Files open in the browser's own viewer, not an in-page one. */
|
|
556
|
+
export const documentsBlock = z.object({
|
|
557
|
+
type: z.literal('documents'),
|
|
558
|
+
enabled: z.boolean().default(true),
|
|
559
|
+
title: z.string().optional(),
|
|
560
|
+
intro: z.string().optional(),
|
|
561
|
+
groupByYear: z.boolean().default(false),
|
|
562
|
+
items: z
|
|
563
|
+
.array(
|
|
564
|
+
z.object({
|
|
565
|
+
title: z.string(),
|
|
566
|
+
file: z.string(),
|
|
567
|
+
date: z.string().optional(),
|
|
568
|
+
note: z.string().optional(),
|
|
569
|
+
})
|
|
570
|
+
)
|
|
571
|
+
.default([]),
|
|
572
|
+
});
|
|
573
|
+
|
|
574
|
+
export type RecipeBlock =
|
|
575
|
+
| z.infer<typeof heroBlock>
|
|
576
|
+
| z.infer<typeof featureCardsBlock>
|
|
577
|
+
| z.infer<typeof ctaBlock>
|
|
578
|
+
| z.infer<typeof faqBlock>
|
|
579
|
+
| z.infer<typeof galleryBlock>
|
|
580
|
+
| z.infer<typeof testimonialBlock>
|
|
581
|
+
| z.infer<typeof contactFormBlock>
|
|
582
|
+
| z.infer<typeof accordionBlock>
|
|
583
|
+
| z.infer<typeof tilesBlock>
|
|
584
|
+
| z.infer<typeof bannerBlock>
|
|
585
|
+
| z.infer<typeof statsBlock>
|
|
586
|
+
| z.infer<typeof stepsBlock>
|
|
587
|
+
| z.infer<typeof pricingBlock>
|
|
588
|
+
| z.infer<typeof logosBlock>
|
|
589
|
+
| z.infer<typeof tabsBlock>
|
|
590
|
+
| z.infer<typeof announcementBlock>
|
|
591
|
+
| z.infer<typeof bentoBlock>
|
|
592
|
+
| z.infer<typeof marqueeBlock>
|
|
593
|
+
| z.infer<typeof latestPostsBlock>
|
|
594
|
+
| z.infer<typeof mapEmbedBlock>
|
|
595
|
+
| z.infer<typeof tableBlock>
|
|
596
|
+
| z.infer<typeof noticeBlock>
|
|
597
|
+
| z.infer<typeof mediaCardsBlock>
|
|
598
|
+
| z.infer<typeof contactCardBlock>
|
|
599
|
+
| z.infer<typeof locationsBlock>
|
|
600
|
+
| z.infer<typeof videoBlock>
|
|
601
|
+
| z.infer<typeof documentsBlock>;
|
|
602
|
+
|
|
603
|
+
/* ── Level-1 layout / container primitives ─────────────────────────────────
|
|
604
|
+
* These hold child blocks, so the schema is **recursive** (a container's
|
|
605
|
+
* `blocks` field is the same block union). TypeScript can't infer a type through
|
|
606
|
+
* `z.lazy`, so the recursive `Block` type is declared explicitly and the union
|
|
607
|
+
* is cast to it. Containers are how primitives compose into layouts (and, later,
|
|
608
|
+
* recipes). */
|
|
609
|
+
export interface SectionBlock {
|
|
610
|
+
type: 'section';
|
|
611
|
+
enabled: boolean;
|
|
612
|
+
background: 'none' | 'muted' | 'accent';
|
|
613
|
+
width: 'normal' | 'wide' | 'full';
|
|
614
|
+
blocks: Block[];
|
|
615
|
+
}
|
|
616
|
+
export interface GridBlock {
|
|
617
|
+
type: 'grid';
|
|
618
|
+
enabled: boolean;
|
|
619
|
+
columns: 2 | 3 | 4;
|
|
620
|
+
gap: 'sm' | 'md' | 'lg';
|
|
621
|
+
blocks: Block[];
|
|
622
|
+
}
|
|
623
|
+
export interface StackBlock {
|
|
624
|
+
type: 'stack';
|
|
625
|
+
enabled: boolean;
|
|
626
|
+
gap: 'sm' | 'md' | 'lg';
|
|
627
|
+
blocks: Block[];
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
export type LeafBlock =
|
|
631
|
+
| z.infer<typeof headingBlock>
|
|
632
|
+
| z.infer<typeof proseBlock>
|
|
633
|
+
| z.infer<typeof imageBlock>
|
|
634
|
+
| z.infer<typeof buttonBlock>
|
|
635
|
+
| z.infer<typeof quoteBlock>
|
|
636
|
+
| z.infer<typeof dividerBlock>
|
|
637
|
+
| z.infer<typeof spacerBlock>
|
|
638
|
+
| z.infer<typeof badgeBlock>
|
|
639
|
+
| z.infer<typeof statBlock>
|
|
640
|
+
| z.infer<typeof listBlock>;
|
|
641
|
+
|
|
642
|
+
/** The full recursive block type: leaf primitives + layout containers. */
|
|
643
|
+
export type Block = LeafBlock | RecipeBlock | SectionBlock | GridBlock | StackBlock;
|
|
644
|
+
export type BlockType = Block['type'];
|
|
645
|
+
|
|
646
|
+
export const sectionBlock = z.object({
|
|
647
|
+
type: z.literal('section'),
|
|
648
|
+
enabled: z.boolean().default(true),
|
|
649
|
+
background: z.enum(['none', 'muted', 'accent']).default('none'),
|
|
650
|
+
width: z.enum(['normal', 'wide', 'full']).default('normal'),
|
|
651
|
+
/** Override the page's content alignment for this section's subtree. */
|
|
652
|
+
align: z.enum(['start', 'center', 'end']).optional(),
|
|
653
|
+
blocks: z.lazy(() => z.array(blockSchema)).default([]),
|
|
654
|
+
});
|
|
655
|
+
|
|
656
|
+
export const gridBlock = z.object({
|
|
657
|
+
type: z.literal('grid'),
|
|
658
|
+
enabled: z.boolean().default(true),
|
|
659
|
+
columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).default(2),
|
|
660
|
+
gap: z.enum(['sm', 'md', 'lg']).default('md'),
|
|
661
|
+
blocks: z.lazy(() => z.array(blockSchema)).default([]),
|
|
662
|
+
});
|
|
663
|
+
|
|
664
|
+
export const stackBlock = z.object({
|
|
665
|
+
type: z.literal('stack'),
|
|
666
|
+
enabled: z.boolean().default(true),
|
|
667
|
+
gap: z.enum(['sm', 'md', 'lg']).default('md'),
|
|
668
|
+
blocks: z.lazy(() => z.array(blockSchema)).default([]),
|
|
669
|
+
});
|
|
670
|
+
|
|
671
|
+
/** The block palette: leaf primitives + layout containers. A discriminated union
|
|
672
|
+
* on `type` — the AI's + CMS's contract and the renderer's registry key. Adding
|
|
673
|
+
* a member without a matching BlockRenderer registry entry is a TypeScript error
|
|
674
|
+
* (the exhaustiveness guard against a silent-undefined render crash). Cast to
|
|
675
|
+
* the recursive `Block` type because `z.lazy` fields can't be inferred. */
|
|
676
|
+
export const blockSchema = z.discriminatedUnion('type', [
|
|
677
|
+
headingBlock,
|
|
678
|
+
proseBlock,
|
|
679
|
+
imageBlock,
|
|
680
|
+
buttonBlock,
|
|
681
|
+
quoteBlock,
|
|
682
|
+
dividerBlock,
|
|
683
|
+
spacerBlock,
|
|
684
|
+
badgeBlock,
|
|
685
|
+
statBlock,
|
|
686
|
+
listBlock,
|
|
687
|
+
heroBlock,
|
|
688
|
+
featureCardsBlock,
|
|
689
|
+
ctaBlock,
|
|
690
|
+
faqBlock,
|
|
691
|
+
galleryBlock,
|
|
692
|
+
testimonialBlock,
|
|
693
|
+
contactFormBlock,
|
|
694
|
+
accordionBlock,
|
|
695
|
+
tilesBlock,
|
|
696
|
+
bannerBlock,
|
|
697
|
+
statsBlock,
|
|
698
|
+
stepsBlock,
|
|
699
|
+
pricingBlock,
|
|
700
|
+
logosBlock,
|
|
701
|
+
tabsBlock,
|
|
702
|
+
announcementBlock,
|
|
703
|
+
bentoBlock,
|
|
704
|
+
marqueeBlock,
|
|
705
|
+
latestPostsBlock,
|
|
706
|
+
mapEmbedBlock,
|
|
707
|
+
tableBlock,
|
|
708
|
+
noticeBlock,
|
|
709
|
+
mediaCardsBlock,
|
|
710
|
+
contactCardBlock,
|
|
711
|
+
locationsBlock,
|
|
712
|
+
videoBlock,
|
|
713
|
+
documentsBlock,
|
|
714
|
+
sectionBlock,
|
|
715
|
+
gridBlock,
|
|
716
|
+
stackBlock,
|
|
717
|
+
]) as unknown as z.ZodType<Block>;
|
|
718
|
+
|
|
719
|
+
/** A page = metadata + an ordered list of blocks. Stored as JSON in the client
|
|
720
|
+
* repo; the AI composes it, a human verifies. This is also the schema of the
|
|
721
|
+
* `pages` collection that the client's `[...slug].astro` catch-all routes over,
|
|
722
|
+
* so one page = one JSON file (its filename is the URL slug). */
|
|
723
|
+
export const pageSchema = z.object({
|
|
724
|
+
title: z.string(),
|
|
725
|
+
description: z.string().optional(),
|
|
726
|
+
/** Preloaded as the LCP image (passed to the layout) when set. */
|
|
727
|
+
heroImage: z.string().optional(),
|
|
728
|
+
/**
|
|
729
|
+
* Template-level content alignment — the default for text-bearing blocks on the
|
|
730
|
+
* page (headings, prose, quote). Cascades as `--content-align` so every recipe
|
|
731
|
+
* inherits one coherent alignment instead of each hard-coding its own. A
|
|
732
|
+
* `section` block can override it for its subtree; a `heading` can override per
|
|
733
|
+
* block. `start` (left) is the readable default for long-form; `center` suits
|
|
734
|
+
* short, hero-led pages.
|
|
735
|
+
*/
|
|
736
|
+
align: z.enum(['start', 'center', 'end']).default('start'),
|
|
737
|
+
/**
|
|
738
|
+
* Provenance — the ferst-library template this page was instantiated from.
|
|
739
|
+
* The triangular model (docs/BLOCK-ARCHITECTURE.md §5): lego box → a template
|
|
740
|
+
* stored in the library → each client page links a `templateId`. The client
|
|
741
|
+
* repo never depends on the library; this is just a design-time back-reference
|
|
742
|
+
* so a template's lineage/variants stay traceable platform-side. Optional — a
|
|
743
|
+
* bespoke page may have none.
|
|
744
|
+
*/
|
|
745
|
+
templateId: z.string().optional(),
|
|
746
|
+
/**
|
|
747
|
+
* Editor change-requests captured in the CMS — the seed of AI-driven editing
|
|
748
|
+
* ([[ferst_editing_ai_first_pdlc]]): rather than let editors edit block JSON
|
|
749
|
+
* directly (easy to break), they describe a desired change against the page and
|
|
750
|
+
* it's stored here for an agent to action later → PR → human verify. NEVER
|
|
751
|
+
* rendered; carried through the schema so a CMS save preserves it.
|
|
752
|
+
*/
|
|
753
|
+
requests: z
|
|
754
|
+
.array(
|
|
755
|
+
z.object({
|
|
756
|
+
text: z.string(),
|
|
757
|
+
at: z.string().optional(),
|
|
758
|
+
by: z.string().optional(),
|
|
759
|
+
status: z.enum(['open', 'done']).default('open'),
|
|
760
|
+
}),
|
|
761
|
+
)
|
|
762
|
+
.default([]),
|
|
763
|
+
/** Keep the JSON in the repo but exclude it from the build. */
|
|
764
|
+
draft: z.boolean().default(false),
|
|
765
|
+
blocks: z.array(blockSchema).default([]),
|
|
766
|
+
});
|
|
767
|
+
export type Page = z.infer<typeof pageSchema>;
|
|
768
|
+
|
|
769
|
+
/** Every block type id, derived from the union so it stays in sync — used for
|
|
770
|
+
* gallery coverage, CMS config generation, docs, etc. */
|
|
771
|
+
export const blockTypes = (
|
|
772
|
+
blockSchema as unknown as { options: ReadonlyArray<{ shape: { type: { value: BlockType } } }> }
|
|
773
|
+
).options.map((o) => o.shape.type.value);
|