ferst-core 0.7.2 → 0.7.4

package/components/recipes/Video.astro

@@ -1,157 +1,177 @@
----
-/**
- * Video — a consent-gated YouTube / Vimeo player (including a channel's live stream),
- * the sibling of the map embed. The editor pastes the ordinary link; lib/video turns it
- * into a privacy-friendly embed (youtube-nocookie, Vimeo dnt). Nothing loads from the
- * provider until the visitor agrees, then the player fills a fixed-ratio frame. An
- * unrecognised link degrades to a plain "watch" link.
- */
-import { videoEmbed } from '../../lib/video';
-
-interface Props {
-  title?: string;
-  caption?: string;
-  url: string;
-  ratio?: '16/9' | '4/3' | '1/1' | '9/16';
-}
-const { title = '', caption = '', url, ratio = '16/9' } = Astro.props;
-const v = videoEmbed(url);
-const safeLink = /^https:\/\//i.test(url) ? url : undefined;
----
-
-<section class="b-video">
-  {title && <h2 class="b-video__title">{title}</h2>}
-  {v ? (
-    <figure class="b-video__figure">
-      <div class="b-video__embed" style={`aspect-ratio: ${ratio}`} data-embed-url={v.embedUrl} data-title={title || `Video on ${v.provider}`}>
-        <div class="b-video__consent">
-          <p class="b-video__consent-text">
-            This video is provided by <strong>{v.provider}</strong>. Playing it here shares your
-            device's data (such as your IP address) with {v.provider}.
-          </p>
-          <div class="b-video__actions">
-            <button type="button" class="b-video__load">Show video</button>
-            <a class="b-video__link" href={v.watchUrl} target="_blank" rel="noopener">Watch on {v.provider} instead</a>
-          </div>
-        </div>
-        <div class="b-video__frame"></div>
-      </div>
-      {caption && <figcaption class="b-video__caption">{caption}</figcaption>}
-    </figure>
-  ) : (
-    <p class="b-video__note">
-      {safeLink ? <a href={safeLink} target="_blank" rel="noopener">Watch the video</a> : "The video isn't set up yet."}
-    </p>
-  )}
-</section>
-
-<script>
-  import { initEmbedConsent, makeEmbedFrame } from '../../lib/embed-consent';
-
-  initEmbedConsent({
-    root: '.b-video__embed',
-    frame: '.b-video__frame',
-    consent: '.b-video__consent',
-    button: '.b-video__load',
-    buildFrame: (el, url) => {
-      const f = makeEmbedFrame(url, { title: el.dataset.title || 'Video', height: '100%' });
-      f.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen';
-      f.allowFullscreen = true;
-      return f;
-    },
-  });
-</script>
-
-<style>
-  .b-video {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    max-width: 60rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-    width: 100%;
-  }
-  .b-video__title {
-    margin: 0;
-  }
-  .b-video__figure {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-  }
-  .b-video__embed {
-    position: relative;
-    width: 100%;
-    max-width: 100%;
-    border-radius: var(--radius);
-    overflow: hidden;
-    background: var(--bg-section);
-    border: var(--card-border);
-  }
-  .b-video__frame {
-    position: absolute;
-    inset: 0;
-  }
-  .b-video__frame :global(iframe) {
-    display: block;
-  }
-  .b-video__consent {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
-    text-align: center;
-  }
-  .b-video__consent[hidden] {
-    display: none;
-  }
-  .b-video__consent-text {
-    margin: 0;
-    max-width: 46ch;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  .b-video__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem 1.25rem;
-    align-items: center;
-    justify-content: center;
-  }
-  .b-video__load {
-    font: inherit;
-    font-family: var(--font-heading);
-    font-weight: 600;
-    padding: 0.6rem 1.4rem;
-    border: none;
-    border-radius: var(--radius-sm);
-    background: var(--gold);
-    color: var(--text-light);
-    cursor: pointer;
-  }
-  .b-video__load:hover {
-    filter: brightness(0.94);
-  }
-  .b-video__load:focus-visible {
-    outline: 2px solid var(--gold);
-    outline-offset: 2px;
-  }
-  .b-video__link,
-  .b-video__note a {
-    color: var(--gold);
-    font-weight: 600;
-  }
-  .b-video__caption,
-  .b-video__note {
-    margin: 0;
-    color: var(--muted);
-    font-size: 0.9375rem;
-  }
-</style>
+---
+/**
+ * Video — a consent-gated YouTube / Vimeo player (including a channel's live stream),
+ * the sibling of the map embed. The editor pastes the ordinary link; lib/video turns it
+ * into a privacy-friendly embed (youtube-nocookie, Vimeo dnt). Nothing loads from the
+ * provider until the visitor agrees, then the player fills a fixed-ratio frame. An
+ * unrecognised link degrades to a plain "watch" link.
+ */
+import { videoEmbed } from '../../lib/video';
+import { inlineMarkdown } from '../../lib/inline-markdown';
+
+interface Props {
+  title?: string;
+  caption?: string;
+  note?: string;
+  url: string;
+  ratio?: '16/9' | '4/3' | '1/1' | '9/16';
+}
+const { title = '', caption = '', note = '', url, ratio = '16/9' } = Astro.props;
+const v = videoEmbed(url);
+const safeLink = /^https:\/\//i.test(url) ? url : undefined;
+---
+
+<section class="b-video" data-live={v?.live ? 'true' : undefined}>
+  {title && <h2 class="b-video__title">{title}</h2>}
+  {v ? (
+    <>
+    <figure class="b-video__figure">
+      <div class="b-video__embed" style={`aspect-ratio: ${ratio}`} data-embed-url={v.embedUrl} data-title={title || `Video on ${v.provider}`} data-on-demand={v.live ? 'true' : undefined}>
+        <div class="b-video__consent">
+          <p class="b-video__consent-text">
+            {v.live ? 'This live stream' : 'This video'} is provided by <strong>{v.provider}</strong>. Playing it here
+            shares your device's data (such as your IP address) with {v.provider}.
+          </p>
+          <div class="b-video__actions">
+            <button type="button" class="b-video__load">{v.live ? 'Show the live stream' : 'Show video'}</button>
+          </div>
+        </div>
+        <div class="b-video__frame"></div>
+      </div>
+      {caption && <figcaption class="b-video__caption">{caption}</figcaption>}
+    </figure>
+    {/* Always visible, before AND after the player loads: the way to the provider. */}
+    <div class="b-video__footer">
+      {note && <p class="b-video__note-text" set:html={inlineMarkdown(note)} />}
+      <a class="b-video__link" href={v.watchUrl} target="_blank" rel="noopener">Watch on {v.provider} &#8599;</a>
+    </div>
+    </>
+  ) : (
+    <p class="b-video__note">
+      {safeLink ? <a href={safeLink} target="_blank" rel="noopener">Watch the video</a> : "The video isn't set up yet."}
+    </p>
+  )}
+</section>
+
+<script>
+  import { initEmbedConsent, makeEmbedFrame } from '../../lib/embed-consent';
+
+  initEmbedConsent({
+    root: '.b-video__embed',
+    frame: '.b-video__frame',
+    consent: '.b-video__consent',
+    button: '.b-video__load',
+    buildFrame: (el, url) => {
+      const f = makeEmbedFrame(url, { title: el.dataset.title || 'Video', height: '100%' });
+      f.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen';
+      f.allowFullscreen = true;
+      return f;
+    },
+  });
+</script>
+
+<style>
+  .b-video {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 60rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+    width: 100%;
+  }
+  .b-video__title {
+    margin: 0;
+  }
+  .b-video__figure {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+  .b-video__embed {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-section);
+    border: var(--card-border);
+  }
+  .b-video__frame {
+    position: absolute;
+    inset: 0;
+  }
+  .b-video__frame :global(iframe) {
+    display: block;
+  }
+  .b-video__consent {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    text-align: center;
+  }
+  .b-video__consent[hidden] {
+    display: none;
+  }
+  .b-video__consent-text {
+    margin: 0;
+    max-width: 46ch;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-video__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1.25rem;
+    align-items: center;
+    justify-content: center;
+  }
+  .b-video__load {
+    font: inherit;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    padding: 0.6rem 1.4rem;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: var(--gold);
+    color: var(--text-light);
+    cursor: pointer;
+  }
+  .b-video__load:hover {
+    filter: brightness(0.94);
+  }
+  .b-video__load:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+  .b-video__link,
+  .b-video__note a {
+    color: var(--gold);
+    font-weight: 600;
+  }
+  .b-video__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.5rem 1.25rem;
+  }
+  .b-video__note-text {
+    margin: 0;
+    color: var(--fg);
+    line-height: 1.6;
+  }
+  .b-video__caption,
+  .b-video__note {
+    margin: 0;
+    color: var(--muted);
+    font-size: 0.9375rem;
+  }
+</style>

package/content/blocks.ts

@@ -33,6 +33,9 @@ export const proseBlock = z.object({
   /** Blank lines separate paragraphs; `- ` / `1. ` lines make lists; inline
    *  `[links](href)` (incl. tel:/mailto:), `**bold**` and `*italic*` (lib/prose.ts). */
   text: z.string(),
+  /** `lead` = the page's introduction: larger and quieter than body text, for the
+   *  paragraph straight under the hero. */
+  variant: z.enum(['body', 'lead']).default('body'),
 });
 
 export const imageBlock = z.object({
@@ -139,6 +142,9 @@ export const heroBlock = z.object({
   /** How much of the screen a `media` hero takes: `standard` (a band), `tall`,
    *  or `screen` — the full first screen, edge to edge (e.g. a video opener). */
   size: z.enum(['standard', 'tall', 'screen']).default('standard'),
+  /** A `media` hero's background drifts more slowly than the page as it scrolls (any
+   *  background: image, slides or video). Off on touch devices and under reduced motion. */
+  parallax: z.boolean().default(false),
   /** Ambient background for centered/split heroes: `mesh` = a soft, slowly
    *  drifting brand gradient behind the text (static under reduced-motion). */
   background: z.enum(['none', 'mesh']).default('none'),
@@ -548,6 +554,8 @@ export const videoBlock = z.object({
   enabled: z.boolean().default(true),
   title: z.string().optional(),
   caption: z.string().optional(),
+  /** A short note under the player (inline markdown), e.g. a live stream's schedule. */
+  note: z.string().optional(),
   url: z.string(),
   ratio: z.enum(['16/9', '4/3', '1/1', '9/16']).default('16/9'),
 });
@@ -573,6 +581,56 @@ export const documentsBlock = z.object({
     .default([]),
 });
 
+/** LinkRow — a titled row of contact or reference links as tappable pills (phone, email,
+ *  web), each with the icon its link implies, plus an optional intro and footnote. For a
+ *  contact who isn't worth a whole contact card (e.g. "Vocations: phone · email · site"). */
+export const linkRowBlock = z.object({
+  type: z.literal('linkRow'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  links: z.array(z.object({ label: z.string(), href: z.string() })).min(1),
+  note: z.string().optional(),
+});
+
+/** Document — a policy or legal text as ONE block: sections numbered automatically, a
+ *  contents list linking to each (sticky beside the text on wide screens), an optional
+ *  "last updated" date (YYYY-MM-DD), and print-friendly. Section bodies take prose
+ *  formatting; `items` add a list. Replaces dozens of hand-numbered headings + paragraphs. */
+export const documentBlock = z.object({
+  type: z.literal('document'),
+  enabled: z.boolean().default(true),
+  intro: z.string().optional(),
+  updated: z.string().optional(),
+  numbered: z.boolean().default(true),
+  toc: z.boolean().default(true),
+  sections: z
+    .array(z.object({ title: z.string(), body: z.string().optional(), items: z.array(z.string()).optional() }))
+    .min(1),
+});
+
+/** Timetable — weekly times for one or more places (worship times, opening hours,
+ *  sessions, classes). `cards`: a card per place, days with no times left out, notes
+ *  (inline markdown) under each. `table`: places side by side, days down the side. */
+export const timetableBlock = z.object({
+  type: z.literal('timetable'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  layout: z.enum(['cards', 'table']).default('cards'),
+  places: z
+    .array(
+      z.object({
+        name: z.string(),
+        address: z.string().optional(),
+        href: z.string().optional(),
+        schedule: z.array(z.object({ day: z.string(), times: z.array(z.string()).default([]) })).default([]),
+        notes: z.string().optional(),
+      })
+    )
+    .min(1),
+});
+
 export type RecipeBlock =
   | z.infer<typeof heroBlock>
   | z.infer<typeof featureCardsBlock>
@@ -600,7 +658,10 @@ export type RecipeBlock =
   | z.infer<typeof contactCardBlock>
   | z.infer<typeof locationsBlock>
   | z.infer<typeof videoBlock>
-  | z.infer<typeof documentsBlock>;
+  | z.infer<typeof documentsBlock>
+  | z.infer<typeof linkRowBlock>
+  | z.infer<typeof documentBlock>
+  | z.infer<typeof timetableBlock>;
 
 /* ── Level-1 layout / container primitives ─────────────────────────────────
  * These hold child blocks, so the schema is **recursive** (a container's
@@ -713,6 +774,9 @@ export const blockSchema = z.discriminatedUnion('type', [
   locationsBlock,
   videoBlock,
   documentsBlock,
+  linkRowBlock,
+  documentBlock,
+  timetableBlock,
   sectionBlock,
   gridBlock,
   stackBlock,

package/content/cookies.ts

@@ -110,3 +110,13 @@ export function scanCookieUses(input: CookieScanInput): CookiePolicyModel {
   ).map(({ blocks, calendar, ...use }) => use); // drop detection fields from the view model
   return { necessary: NECESSARY.map((u) => ({ ...u })), additional };
 }
+
+/** Every block `type` used in a list of blocks, walking container children
+ *  (`section` / `grid` / `stack`), so the policy sees an embed nested in a grid. */
+export function blockTypesIn(blocks: ReadonlyArray<{ type: string; blocks?: unknown }>, acc = new Set<string>()): Set<string> {
+  for (const b of blocks) {
+    acc.add(b.type);
+    if (Array.isArray(b.blocks)) blockTypesIn(b.blocks as Array<{ type: string; blocks?: unknown }>, acc);
+  }
+  return acc;
+}

package/examples/primitives.ts

@@ -9,6 +9,7 @@ export const primitives: GalleryEntry[] = [
   { type: 'heading', description: 'A section title, levels 1–6, optionally aligned.', block: { type: 'heading', text: 'A heading', level: 2 } },
   { type: 'heading', description: 'Optional gradient text — brand → derived accent-2 (falls back to solid ink where unsupported).', block: { type: 'heading', text: 'A gradient heading', level: 2, gradient: true } },
   { type: 'prose', description: 'Body text: blank lines start new paragraphs, `- ` / `1. ` lines make lists, and inline links (incl. phone and email), bold and italic render safely.', block: { type: 'prose', text: 'A paragraph of prose with **bold**, *italic* and a [link to the recipes](/recipes).\n\nFor a quick answer, [phone the office](tel:01234567890).\n\n- Lists from simple lines\n- With a [link](/primitives) inside' } },
+  { type: 'prose', description: 'The `lead` variant: the paragraph straight under the hero that introduces the page, larger and quieter than body text.', block: { type: 'prose', variant: 'lead', text: 'A lead paragraph introduces the page and invites the reader in.' } },
   { type: 'image', description: 'A responsive image with an optional caption. Corners follow the site by default.', block: { type: 'image', src: '/placeholder.svg', alt: 'Placeholder', caption: 'An image with a caption.' } },
   { type: 'image', description: 'Canonical framing options: soft corners + drop shadow + a fixed 16/9 ratio (image is cover-fit).', block: { type: 'image', src: '/showcase-hero.svg', alt: 'Abstract', radius: 'soft', shadow: true, ratio: '16/9', caption: 'radius: soft · shadow · ratio 16/9' } },
   { type: 'image', description: 'Square ratio with an outline stroke and sharp corners — same block, different canonical options.', block: { type: 'image', src: '/showcase-hero.svg', alt: 'Abstract', radius: 'none', border: true, ratio: 'square', caption: 'radius: none · stroke · square' } },
@@ -17,6 +18,7 @@ export const primitives: GalleryEntry[] = [
   { type: 'button', description: 'Filled CTA — the brand-accent call to action.', block: { type: 'button', label: 'Get started', href: '#', variant: 'cta' } },
   { type: 'button', description: 'Ghost — a quiet, borderless text button for tertiary actions.', block: { type: 'button', label: 'Learn more', href: '#', variant: 'ghost' } },
   { type: 'quote', description: 'A pull quote with an optional citation.', block: { type: 'quote', text: 'A memorable quotation, set apart.', cite: 'Someone' } },
+  { type: 'quote', description: 'A prayer, verse or poem: line breaks are kept as written, and inline formatting works.', block: { type: 'quote', text: 'Lord, make me an instrument of your peace:\nwhere there is hatred, let me sow love;\nwhere there is injury, *pardon*.', cite: 'Prayer of St Francis' } },
   { type: 'divider', description: 'A horizontal rule between sections.', block: { type: 'divider' } },
   { type: 'spacer', description: 'Vertical space (sm / md / lg) — invisible by design.', block: { type: 'spacer', size: 'lg' } },
   { type: 'section', description: 'A full-width band (background + width) holding child blocks.', block: { type: 'section', background: 'muted', width: 'normal', blocks: [{ type: 'heading', text: 'Inside a section', level: 3 }, { type: 'prose', text: 'Sections hold child blocks.' }] } },

package/examples/recipes.ts

@@ -33,5 +33,10 @@ export const recipes: GalleryEntry[] = [
   { type: 'contactCard', description: 'A branded "get in touch" band — a theme-adaptive panel (a section surface with a soft brand-gold corner wash) carrying a display-type title + subtitle on the left, contact channels as tappable tiles on the right, and a closing note across the bottom. Composes in both light and dark. The polished alternative to a plain notice box.', block: { type: 'contactCard', eyebrow: 'Parish office', title: 'Get in touch', subtitle: 'Parish Priest: Fr John Doe', note: 'For a quick reply, phone the office directly — email is best for non-urgent matters. See our [Safeguarding policy](/safeguarding).', items: [{ icon: 'map-pin', value: '1 Example Street\nPlaceholdertown EX4 3PL' }, { icon: 'phone', value: '01234 567890', href: 'tel:01234567890' }, { icon: 'email', value: 'office@st-placeholder.example', href: 'mailto:office@st-placeholder.example' }, { icon: 'link', value: 'Follow us on Facebook', href: 'https://facebook.com/' }] } },
   { type: 'locations', description: 'A "where to find us" grid — one or more places, each a neat tile with a consent-gated map on top and its name / address / directions below. Maps load once the visitor accepts the site cookie banner (shared consent, no per-tile gate). Replaces stacking bare map embeds.', block: { type: 'locations', title: 'Where to find us', columns: 2, items: [{ name: "St Placeholder's", address: '1 Example Street\nPlaceholdertown EX4 3PL', embedUrl: 'https://www.google.com/maps/embed?pb=!demo1', directionsUrl: 'https://maps.google.com/' }, { name: "St Sample's", address: '2 Sample Road\nPlaceholdertown', embedUrl: 'https://www.google.com/maps/embed?pb=!demo2', directionsUrl: 'https://maps.google.com/' }] } },
   { type: 'video', description: 'A consent-gated video — paste an ordinary YouTube (incl. a channel’s live page) or Vimeo link; it plays through the privacy-friendly embed only once the visitor agrees, with a “watch on YouTube” alternative. Fixed ratio, never overflows.', block: { type: 'video', title: 'Watch', caption: 'Sample video link.', url: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ', ratio: '16/9' } },
+  { type: 'video', description: 'A channel’s live stream: it doesn’t auto-load (an off-air channel shows “unavailable”), so visitors see the schedule note, a link to the channel’s streams, and “Show the live stream”.', block: { type: 'video', title: 'Watch Mass live', url: 'https://www.youtube.com/channel/UCabcdefghijklmnopqrstuv/live', note: 'Live: **Sundays 10.15am** and holy days.' } },
   { type: 'documents', description: 'A list of files — newsletters, minutes, policies, forms — newest first, optionally grouped by year: type badge, title, date and note per row. Opens in the browser’s own viewer rather than an in-page one (better on phones).', block: { type: 'documents', title: 'Newsletters', intro: 'Every issue, newest first.', groupByYear: true, items: [{ title: 'Newsletter — Advent', file: '/files/sample-advent.pdf', date: '2026-11-30' }, { title: 'Newsletter — Harvest', file: '/files/sample-harvest.pdf', date: '2026-10-04', note: 'Includes the harvest appeal' }, { title: 'Newsletter — Christmas', file: '/files/sample-christmas.pdf', date: '2025-12-21' }, { title: 'Hall hire form', file: '/files/sample-hire-form.docx' }] } },
+  { type: 'linkRow', description: 'A titled row of contact links as pills: phone, email and web links each get the right icon from the link itself. With an optional intro and footnote. For a contact who doesn’t need a whole contact card.', block: { type: 'linkRow', title: 'Vocations', intro: 'Thinking about a vocation? Talk to the vocations director.', links: [{ label: '01234 567890', href: 'tel:01234567890' }, { label: 'vocations@example.org', href: 'mailto:vocations@example.org' }, { label: 'Vocations website', href: 'https://example.com/vocations' }], note: 'All enquiries are treated in confidence.' } },
+  { type: 'document', description: 'A policy or legal text as one block: sections numbered automatically, a contents list linking to each (sticky beside the text on wide screens), a “last updated” date, prose formatting in each section, print-friendly.', block: { type: 'document', intro: 'These conditions apply to every booking.', updated: '2026-10-04', sections: [{ title: 'Use of the hall', body: 'The hall may be used only for the purpose stated on the booking form.' }, { title: 'Bookings', body: 'Bookings are confirmed once the deposit is received.', items: ['Book through the office.', 'Bookings can’t be transferred.'] }, { title: 'Cancellation', body: 'Cancellations made less than **seven days** before the event forfeit the deposit.' }] } },
+  { type: 'timetable', description: 'Weekly times for one or more places (service times, opening hours, sessions): a card per place, days with no times left out, notes with links under each. Set `layout: "table"` to compare places side by side.', block: { type: 'timetable', title: 'Service times', places: [{ name: "St Placeholder's", address: '1 Example Street', schedule: [{ day: 'Saturday', times: ['6:00pm (vigil)'] }, { day: 'Sunday', times: ['8:30am', '10:30am'] }, { day: 'Weekdays', times: ['9:30am'] }], notes: 'Confessions on Saturdays from 5pm. See [how to find us](#find-us).' }, { name: "St Sample's", schedule: [{ day: 'Saturday', times: [] }, { day: 'Sunday', times: ['9:00am'] }], notes: 'No Saturday service.' }] } },
+  { type: 'timetable', description: 'The `table` layout: days down the side, one column per place; a day nobody uses is dropped.', block: { type: 'timetable', title: 'Opening hours', layout: 'table', places: [{ name: 'Library', schedule: [{ day: 'Monday', times: ['9am–5pm'] }, { day: 'Saturday', times: ['10am–1pm'] }] }, { name: 'Café', schedule: [{ day: 'Monday', times: ['8am–4pm'] }, { day: 'Sunday', times: [] }] }] } },
 ];