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