ferst-core 0.4.9 → 0.5.0

package/bin/cms-config.mjs

@@ -0,0 +1,118 @@
+#!/usr/bin/env node
+// ferst-cms-config — generate this build's Sveltia CMS config from the SINGLE-SOURCE
+// template shipped in ferst-core (cms/config.template.yml), so every client's
+// collections are identical and always match the engine — no bespoke CMS drift. Run
+// it AFTER `astro build`:
+//
+//   "build": "astro build && ferst-cms-config"
+//
+// It resolves the per-site backend (repo + git-proxy origin) and the deployment
+// branch from the environment, fills the template's placeholders and writes
+// dist/admin/config.yml. The client repo commits NO config.yml — it is a build
+// product, so it can never be hand-edited into drift. Supersedes ferst-set-cms-branch
+// for clients on this path (it also stamps the branch).
+//
+// Output path: dist/admin/config.yml under the CWD (the client repo root at build
+// time). Override with a first CLI arg.
+import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
+import { execSync } from 'node:child_process';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+export const TEMPLATE_PATH = resolve(HERE, '../cms/config.template.yml');
+
+function env(name) {
+  const v = process.env[name];
+  return v && v.trim() ? v.trim() : '';
+}
+
+/** Resolve the per-site backend repo (owner/name) from the environment / git remote. */
+export function repoSlug() {
+  // GitHub Actions sets GITHUB_REPOSITORY=owner/name.
+  const gh = env('GITHUB_REPOSITORY');
+  if (gh) return gh;
+  try {
+    const url = execSync('git config --get remote.origin.url', {
+      stdio: ['ignore', 'pipe', 'ignore'],
+    }).toString().trim();
+    const m = url.match(/[:/]([^/]+\/[^/]+?)(?:\.git)?$/);
+    if (m) return m[1];
+  } catch {
+    /* not a git checkout — fall through */
+  }
+  return '';
+}
+
+/** The deployment branch: CF Pages env → current git branch → main. */
+export function deploymentBranch() {
+  const cf = env('CF_PAGES_BRANCH');
+  if (cf) return cf;
+  try {
+    const git = execSync('git rev-parse --abbrev-ref HEAD', {
+      stdio: ['ignore', 'pipe', 'ignore'],
+    }).toString().trim();
+    if (git && git !== 'HEAD') return git;
+  } catch {
+    /* not a git checkout — fall through */
+  }
+  return 'main';
+}
+
+/**
+ * Fill the config template's placeholders. Pure — unit-testable.
+ * @param {string} tpl the template contents
+ * @param {{ repo: string, base: string, branch: string }} vars
+ * @returns {string}
+ */
+export function fillConfig(tpl, { repo, base, branch }) {
+  const out = tpl
+    .split('__REPO__').join(repo)
+    .split('__API_ROOT__').join(`${base}/git`)
+    .split('__BASE_URL__').join(base)
+    .split('__BRANCH__').join(branch);
+  const leftover = out.match(/__[A-Z][A-Z_]*__/);
+  if (leftover) {
+    throw new Error(`ferst-cms-config: unfilled placeholder ${leftover[0]} — add it to the filler.`);
+  }
+  return out;
+}
+
+function main() {
+  const outPath = resolve(process.cwd(), process.argv[2] ?? 'dist/admin/config.yml');
+
+  const repo = repoSlug();
+  if (!repo) {
+    console.error('ferst-cms-config: could not determine the repo — set GITHUB_REPOSITORY=owner/name.');
+    process.exit(1);
+  }
+  // The platform git-proxy origin. Identical for every managed client; overridable for
+  // dev/self-hosted via FERST_GIT_BASE.
+  const base = env('FERST_GIT_BASE') || 'https://signin.ferst.co.uk';
+  const branch = deploymentBranch();
+
+  let tpl;
+  try {
+    tpl = readFileSync(TEMPLATE_PATH, 'utf8');
+  } catch {
+    console.error(`ferst-cms-config: template not found at ${TEMPLATE_PATH} — is ferst-core installed?`);
+    process.exit(1);
+  }
+
+  let out;
+  try {
+    out = fillConfig(tpl, { repo, base, branch });
+  } catch (e) {
+    console.error(String(e.message ?? e));
+    process.exit(1);
+  }
+
+  mkdirSync(dirname(outPath), { recursive: true });
+  writeFileSync(outPath, out);
+  console.log(`ferst-cms-config: wrote ${outPath} (repo=${repo}, branch="${branch}", base=${base})`);
+}
+
+// Run only when invoked directly as a bin (not when imported by a test).
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  main();
+}

package/cms/config.template.yml

@@ -0,0 +1,206 @@
+# Sveltia CMS — the content editor for a Ferst site. SINGLE SOURCE: this file lives
+# in ferst-core and is written to dist/admin/config.yml at build by `ferst-cms-config`,
+# so every client's collections are identical and always match the engine. The client
+# repo commits NO config.yml — it is a build product, so it can never drift by hand.
+#
+# The backend repo (owner/name), git-proxy origin, its /git api_root and this
+# deployment's branch are injected at build by ferst-cms-config.
+backend:
+  name: github
+  repo: __REPO__
+  branch: __BRANCH__
+  base_url: __BASE_URL__
+  auth_endpoint: auth
+  api_root: __API_ROOT__
+
+media_folder: public/uploads
+public_folder: /uploads
+
+collections:
+  - name: settings
+    label: Site settings
+    files:
+      - name: theme
+        label: Design tokens
+        file: src/content/themeSettings/index.json
+        icon: palette
+        description: "Edit your brand in the Theme Studio, where you preview changes live before publishing — open portal.ferst.co.uk, choose this site, then the Design tab. The fields here still work as a fallback."
+        fields:
+          - { name: brand, label: Brand colour, widget: color, default: '#0E4D4A', hint: Buttons, links, icons, highlights. }
+          - { name: ink, label: Ink colour, widget: color, default: '#0C2123', hint: Headings and body text. }
+          - { name: surface, label: Surface colour, widget: color, default: '#FFFFFF', hint: Page background. }
+          - name: fonts
+            label: Typography
+            widget: object
+            collapsed: false
+            fields:
+              - name: heading
+                label: Heading font
+                widget: select
+                required: false
+                default: ''
+                options: &fonts
+                  - { label: 'Default (theme)', value: '' }
+                  - { label: 'Poppins', value: 'Poppins, system-ui, sans-serif' }
+                  - { label: 'Inter', value: 'Inter, system-ui, sans-serif' }
+                  - { label: 'Playfair Display', value: "'Playfair Display', Georgia, serif" }
+                  - { label: 'Georgia', value: "Georgia, 'Times New Roman', serif" }
+                  - { label: 'System', value: 'system-ui, sans-serif' }
+              - { name: body, label: Body font, widget: select, required: false, default: '', options: *fonts }
+              - { name: display, label: Display font, widget: select, required: false, default: '', options: *fonts }
+          - { name: corners, label: Corners, widget: select, default: rounded, options: [{ label: Sharp, value: sharp }, { label: Rounded, value: rounded }, { label: Soft, value: soft }] }
+          - { name: elevation, label: Elevation, widget: select, default: raised, options: [{ label: Raised, value: raised }, { label: Flat, value: flat }] }
+          - { name: stroke, label: Card stroke, widget: select, default: 'on', options: [{ label: 'On', value: 'on' }, { label: 'Off', value: 'off' }] }
+          - { name: fields, label: Input fields, widget: select, default: boxed, options: [{ label: Boxed, value: boxed }, { label: Filled, value: filled }, { label: Underline, value: underline }] }
+          - { name: darkDepth, label: Dark depth, widget: number, value_type: float, min: 0.14, max: 0.34, step: 0.01, default: 0.21 }
+          - { name: darkChroma, label: Dark colour intensity, widget: number, value_type: float, min: 0, max: 0.15, step: 0.01, default: 0.05 }
+          - name: darkOverrides
+            label: Dark colour overrides (optional)
+            widget: object
+            collapsed: true
+            fields:
+              - { name: ground, label: Ground, widget: string, required: false }
+              - { name: text, label: Text, widget: string, required: false }
+              - { name: accent, label: Accent, widget: string, required: false }
+
+      - name: identity
+        label: Identity & contact
+        file: src/content/siteSettings/index.json
+        icon: info
+        fields:
+          - name: identity
+            label: Identity
+            widget: object
+            fields:
+              - { name: siteTitle, label: Site title, widget: string }
+              - { name: shortName, label: Short name, widget: string }
+              - { name: description, label: Description, widget: text }
+              - { name: location, label: Location, widget: string, required: false }
+          - name: contact
+            label: Contact
+            widget: object
+            fields:
+              - { name: phoneDisplay, label: Phone (display), widget: string, required: false }
+              - { name: phoneTel, label: 'Phone (tel: digits)', widget: string, required: false }
+              - { name: email, label: Email, widget: string, required: false }
+              - { name: facebookUrl, label: Facebook URL, widget: string, required: false }
+
+      - name: logos
+        label: Logos
+        file: src/content/logoSettings/index.json
+        icon: image
+        fields:
+          - { name: primaryLogoLight, label: Header logo (light), widget: image, required: false }
+          - { name: primaryLogoDark, label: Header logo (dark), widget: image, required: false }
+          - { name: secondaryLogoLight, label: Footer logo (light), widget: image, required: false }
+          - { name: secondaryLogoDark, label: Footer logo (dark), widget: image, required: false }
+
+      - name: navbar
+        label: Navigation
+        file: src/content/navbarSettings/index.json
+        icon: menu
+        fields:
+          - name: primary
+            label: Primary links
+            widget: list
+            fields:
+              - { name: label, label: Label, widget: string }
+              - { name: href, label: Link, widget: string }
+
+      - name: footer
+        label: Footer
+        file: src/content/footerSettings/index.json
+        icon: table_rows
+        fields:
+          - name: footer
+            label: Footer links
+            widget: list
+            fields:
+              - { name: label, label: Label, widget: string }
+              - { name: href, label: Link, widget: string }
+
+      - name: calendar-settings
+        label: Calendar
+        file: src/content/calendarSettings/index.json
+        icon: calendar_today
+        fields:
+          - { name: title, label: Heading, widget: string, default: Calendar }
+          - { name: intro, label: Intro, widget: text, required: false }
+          - { name: embedUrl, label: Embed URL, widget: string, required: false }
+          - { name: publicUrl, label: Public link, widget: string, required: false }
+          - { name: height, label: Height (px), widget: number, default: 700, value_type: int, min: 200, max: 2000 }
+          - { name: provider, label: Provider name, widget: string, default: Google Calendar }
+          - { name: weekStart, label: Week starts on, widget: select, default: monday, options: [{ label: "Monday", value: monday }, { label: "Sunday", value: sunday }] }
+
+  - name: posts
+    label: Posts
+    label_singular: Post
+    folder: src/content/posts
+    create: true
+    slug: "{{slug}}"
+    extension: md
+    format: frontmatter
+    icon: article
+    summary: "{{title}} — {{date}}"
+    sortable_fields: [date, title]
+    fields:
+      - { name: title, label: Title, widget: string }
+      - { name: date, label: Date, widget: datetime, picker_utc: true }
+      - { name: summary, label: Summary, widget: text, required: false }
+      - name: tags
+        label: Tags
+        widget: relation
+        required: false
+        collection: tags
+        value_field: "{{slug}}"
+        display_fields: [label]
+        search_fields: [label]
+        multiple: true
+      - { name: heroImage, label: Hero image, widget: image, required: false }
+      - { name: attachment, label: Attachment (e.g. PDF), widget: file, required: false }
+      - { name: draft, label: Draft, widget: boolean, default: false, required: false }
+      - { name: body, label: Body, widget: markdown, required: false }
+
+  - name: tags
+    label: Tags
+    label_singular: Tag
+    folder: src/content/tags
+    create: true
+    slug: "{{slug}}"
+    extension: json
+    format: json
+    icon: label
+    identifier_field: label
+    fields:
+      - { name: label, label: Label, widget: string }
+      - { name: description, label: Description, widget: text, required: false }
+      - { name: hidden, label: Hidden, widget: boolean, default: false, required: false }
+
+  - name: pages
+    label: Pages
+    label_singular: Page
+    description: "See each page and request a change — our team makes it and sends it back for you to check. You don't edit the page layout here."
+    folder: src/content/pages
+    extension: json
+    format: json
+    icon: description
+    nested: { depth: 3, summary: "{{title}}" }
+    summary: "{{title}}"
+    identifier_field: title
+    fields:
+      - { name: title, label: Page title, widget: string }
+      - name: requests
+        label: Requested changes
+        label_singular: Request
+        widget: list
+        required: false
+        summary: "{{fields.text}}"
+        fields:
+          - { name: text, label: "What would you like changed?", widget: text }
+          - { name: status, label: Status, widget: select, default: open, options: [{ label: Open, value: open }, { label: Done, value: done }] }
+      - { name: description, label: SEO description, widget: hidden, required: false }
+      - { name: heroImage, widget: hidden, required: false }
+      - { name: align, widget: hidden, required: false }
+      - { name: templateId, widget: hidden, required: false }
+      - { name: draft, widget: hidden, required: false }
+      - { name: blocks, widget: hidden }

package/components/Button.astro

@@ -118,7 +118,7 @@ const {
   }
 
   /* CTA / compact variants — a filled button in the brand accent. Token-driven
-     (was a hardcoded CTK green) so it recolours with the site palette; hover
+     (was a hardcoded brand green) so it recolours with the site palette; hover
      darkens the accent via color-mix, which works for any brand colour. */
   .btn--cta {
     background: var(--gold);

package/components/CalendarEmbed.astro

@@ -4,7 +4,7 @@
  * Nothing loads from the provider until the visitor clicks "Load calendar", so no
  * third-party request fires on page load (privacy-first, matching the site's
  * cookie stance). Consent is remembered per visitor (localStorage), so it
- * auto-loads on later visits. White-room, token-driven.
+ * auto-loads on later visits. Token-driven.
  *
  * The embed URL is required to be https (isSafeEmbedUrl) before it can reach the
  * iframe; an unset or unsafe URL degrades to a friendly note + optional link.

package/components/PostArticle.astro

@@ -4,7 +4,7 @@
  * hero image, then a <slot /> for the rendered markdown body. The route calls
  * `entry.render()` and drops `<Content />` into the slot. Body typography (measure,
  * images, headings) is handled by Base's global `article` styles; this owns only
- * the post header. White-room (no CTK code).
+ * the post header.
  */
 interface Props {
   title: string;

package/components/PostCard.astro

@@ -2,7 +2,7 @@
 /**
  * PostCard — a post preview for the news index and tag pages. Token-driven (radius,
  * border, shadow, colours all from the theme), equal-height in a grid, with the
- * whole card clickable via a stretched title link. White-room (no CTK code).
+ * whole card clickable via a stretched title link.
  */
 interface Props {
   href: string;

package/components/StickyCallout.astro

@@ -7,7 +7,7 @@
  * as you scroll. Settings-driven (calloutSettings), rendered by Base. Renders
  * nothing unless enabled AND given a title or text. Progressive: it's a native
  * <details>, so open/close works with no JS; close + "don't show again" are JS
- * enhancements. White-room, token-driven.
+ * enhancements. Token-driven.
  */
 import Icon from './Icon.astro';
 import { isIconKey } from '../lib/icons';

package/components/recipes/MapEmbed.astro

@@ -4,7 +4,7 @@
  * CalendarEmbed. Nothing loads from the provider until the visitor clicks "Load
  * map", so no third-party request fires on page load (privacy-first, matching the
  * site's cookie stance). Consent is remembered per visitor (localStorage). A page
- * block (drop it on a contact/find-us page), white-room, token-driven.
+ * block (drop it on a contact/find-us page), token-driven.
  *
  * The embed URL must be https (isSafeEmbedUrl) before it can reach the iframe; an
  * unset or unsafe URL degrades to a friendly note + optional "open in Maps" link.

package/components/recipes/MediaCards.astro

@@ -2,7 +2,7 @@
 /**
  * MediaCards — a Level-2 recipe: a grid of rich content cards with the IMAGE as a
  * header on top (cover-cropped to a uniform ratio, like PostCard), then an optional
- * icon badge, a title, a meta line (e.g. "Sundays 10:45 · CTK"), a description, and
+ * icon badge, a title, a meta line (e.g. "Sundays 10:45 · Main hall"), a description, and
  * an optional CTA link. The image-HEADER pattern (distinct from `tiles`, which puts
  * the image BEHIND the text): use it for groups, team members, services or events —
  * anywhere the photo and the copy both need to be fully legible. Whole card links

package/content/blocks.ts

@@ -6,8 +6,8 @@ import { z } from 'zod';
  * as JSON; a Zod **discriminated union** on `type` is the single contract the AI
  * composes against, the CMS validates, and the renderer's registry keys on.
  *
- * This is a white-room design of the *mechanism* (not a copy of CTK's block
- * builder). It starts with **Level-1 primitives** only; recipes (Level 2) and
+ * This is an original design of the *mechanism*, built from scratch. It starts
+ * with **Level-1 primitives** only; recipes (Level 2) and
  * page templates (Level 3) layer on top later, and layout/container primitives
  * (Section/Grid/Stack, which nest child blocks) are a deliberate next slice.
  */
@@ -469,7 +469,7 @@ export const mediaCardsBlock = z.object({
         image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
         icon: z.string().optional(),
         title: z.string(),
-        /** A short meta line shown as a pill (e.g. "Sundays 10:45 · CTK"). */
+        /** A short meta line shown as a pill (e.g. "Sundays 10:45 · Main hall"). */
         meta: z.string().optional(),
         text: z.string().optional(),
         href: z.string().optional(),

package/content/calendar.ts

@@ -1,5 +1,5 @@
-// The calendar capability contract — white-room, block-system-era core (no CTK
-// code). A parish/club/venue embeds an external calendar (typically Google
+// The calendar capability contract — built from scratch on the block-system-era
+// core. A parish/club/venue embeds an external calendar (typically Google
 // Calendar) for its schedule (Mass times, events). Embedding an external calendar
 // sends the visitor's device data (e.g. IP) to the provider, so it is ALWAYS
 // consent-gated (CalendarEmbed.astro) — consistent with the site's no-silent-

package/content/callout.ts

@@ -1,5 +1,5 @@
-// The sticky-callout capability contract — white-room, block-system-era core (no
-// CTK code). A site-level launcher pinned to a screen corner, expanding a small
+// The sticky-callout capability contract — built from scratch on the block-system-era
+// core. A site-level launcher pinned to a screen corner, expanding a small
 // panel with one key piece of info + an optional link (mass times, opening hours,
 // "book now", contact). Reusable/replicable → public (Tier 1a). Site-wide chrome
 // (rendered by Base from calloutSettings), NOT a page block, so it stays put on

package/content/posts.ts

@@ -1,5 +1,5 @@
-// The posts/blog capability contract — white-room, rebuilt on the block-system-era
-// core (no CTK code). A capability owns its own content schema (this file), its
+// The posts/blog capability contract — rebuilt from scratch on the block-system-era
+// core. A capability owns its own content schema (this file), its
 // collections (collections.ts), its rendering (components/Post*.astro) and its
 // data helpers (lib/posts.ts); a client repo carries only the post/tag DATA + a
 // couple of thin routes. Posts are ubiquitous/replicable → public (Tier 1a).

package/examples/index.ts

@@ -0,0 +1,12 @@
+/**
+ * The block catalogue — a live example of every primitive and recipe, as block JSON.
+ *
+ * This is the **canonical, single-source** example data for the core's block palette:
+ * the reference showcase renders it, the platform renders it ("preview studio" gallery),
+ * and `tests/gallery-coverage.test.ts` fails the build if any block `type` lacks an
+ * example here. Kept as pure data (validated against `pageSchema`) so any consumer — Astro
+ * or not — can read it.
+ */
+export type { GalleryEntry } from './primitives';
+export { primitives } from './primitives';
+export { recipes } from './recipes';

package/examples/primitives.ts

@@ -0,0 +1,28 @@
+/** One catalogue entry: a block type, a short description, and a live example. */
+export interface GalleryEntry {
+  type: string;
+  description?: string;
+  block: Record<string, unknown>;
+}
+
+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.', block: { type: 'prose', text: 'A paragraph of prose.\n\nA second paragraph after a blank line.' } },
+  { 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' } },
+  { type: 'button', description: 'Primary action — the default. Variant is a role, not decoration; corner shape follows the global radius knob.', block: { type: 'button', label: 'Primary', href: '#' } },
+  { type: 'button', description: 'Secondary action — a quieter outline button.', block: { type: 'button', label: 'Secondary', href: '#', variant: 'secondary' } },
+  { 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: '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.' }] } },
+  { type: 'grid', description: 'A responsive N-column grid of child blocks.', block: { type: 'grid', columns: 3, blocks: [{ type: 'prose', text: 'Column one' }, { type: 'prose', text: 'Column two' }, { type: 'prose', text: 'Column three' }] } },
+  { type: 'stack', description: 'Stacks child blocks vertically with a consistent gap.', block: { type: 'stack', gap: 'sm', blocks: [{ type: 'prose', text: 'Stacked one' }, { type: 'prose', text: 'Stacked two' }] } },
+  { type: 'badge', description: 'A small pill label (accent or neutral tone).', block: { type: 'badge', text: 'New', tone: 'accent' } },
+  { type: 'stat', description: 'A headline number with a label.', block: { type: 'stat', value: '250+', label: 'families served' } },
+  { type: 'list', description: 'A bulleted, numbered, or checked list of lines.', block: { type: 'list', style: 'check', items: ['Everything shares one design language', 'Your brand, applied consistently', 'You own the output'] } },
+];

package/examples/recipes.ts

@@ -0,0 +1,32 @@
+import type { GalleryEntry } from './primitives';
+
+export const recipes: GalleryEntry[] = [
+  { type: 'hero', description: 'Page-opening band — centred preset.', block: { type: 'hero', eyebrow: 'Recipe', title: 'Hero (centered)', subtitle: 'A curated opening band composing Heading + Button.', cta: { label: 'Primary action', href: '#' }, layout: 'centered' } },
+  { type: 'hero', description: 'Page-opening band — split preset (text beside image).', block: { type: 'hero', title: 'Hero (split)', subtitle: 'Text beside an image.', cta: { label: 'Primary action', href: '#' }, image: { src: '/placeholder.svg', alt: 'Placeholder' }, layout: 'split' } },
+  { type: 'featureCards', description: 'An optional header over a responsive grid of icon + title + text cards.', block: { type: 'featureCards', title: 'Feature cards', columns: 3, cards: [{ icon: 'book-open', title: 'First feature', text: 'A short description.' }, { icon: 'shield', title: 'Second feature', text: 'A short description.' }, { icon: 'sparkle', title: 'Third feature', text: 'A short description.' }] } },
+  { type: 'cta', description: 'A centred call-to-action band (heading + text + button).', block: { type: 'cta', title: 'Ready to start?', text: 'A closing nudge with a single, clear action.', cta: { label: 'Get in touch', href: '#' }, background: 'accent' } },
+  { type: 'faq', description: 'Expandable question / answer list — native, accessible, no JavaScript.', block: { type: 'faq', title: 'Frequently asked', items: [{ question: 'How are pages built?', answer: 'From a curated set of blocks, composed into your pages and verified before they go live — see the [architecture notes](https://example.com/architecture).' }, { question: 'Can I use my own brand?', answer: 'Yes — colours and fonts are your config; the core is brand-agnostic.' }] } },
+  { type: 'gallery', description: 'A responsive grid of images with optional captions.', block: { type: 'gallery', columns: 3, images: [{ src: '/placeholder.svg', alt: 'One', caption: 'One' }, { src: '/placeholder.svg', alt: 'Two', caption: 'Two' }, { src: '/placeholder.svg', alt: 'Three', caption: 'Three' }] } },
+  { type: 'testimonial', description: 'A centred quotation with author, role and an optional avatar.', block: { type: 'testimonial', quote: 'The showcase made the whole model click in a minute.', author: 'A. Client', role: 'Parish administrator' } },
+  { type: 'contactForm', description: 'An accessible contact form in a centred column — labelled fields, a submit and an optional note. Fields are generic, so it also serves enquiry / sign-up forms.', block: { type: 'contactForm', title: 'Send us a message', intro: 'We usually reply within a day.', note: 'Demo form — the showcase has no backend; a real client points its action at their own endpoint.' } },
+  { type: 'accordion', description: 'Generic expand/collapse rows (title + body) — native, accessible, no JavaScript. FAQ’s domain-free sibling.', block: { type: 'accordion', title: 'How it works', items: [{ heading: 'Composable', body: 'Pages are ordered blocks stored as JSON.' }, { heading: 'Consistent', body: 'Recipes lock a good layout so quality can’t drift.' }] } },
+  { type: 'tiles', description: 'A card grid with five looks — here “elevated” (soft shadow, lifts on hover) with the optional pointer-following spotlight. Radius / stroke / elevation come from the global surface tokens.', block: { type: 'tiles', variant: 'elevated', columns: 3, spotlight: true, tiles: [{ icon: 'sparkle', eyebrow: 'Level 1', title: 'Primitives', text: 'The raw ingredients.', href: '#' }, { icon: 'book-open', eyebrow: 'Level 2', title: 'Recipes', text: 'Curated compositions.', href: '#' }, { icon: 'shield', eyebrow: 'Level 3', title: 'Templates', text: 'Whole pages.', href: '#' }] } },
+  { type: 'tiles', description: 'The “gradient” variant — brand → a derived accent-2 (an OKLCH hue-shift of your one brand colour), light text.', block: { type: 'tiles', variant: 'gradient', columns: 3, tiles: [{ icon: 'flame', title: 'Vibrant', text: 'One brand colour, a harmonious gradient.' }, { icon: 'sparkle', title: 'Derived', text: 'Accent-2 is computed, not configured.' }, { icon: 'heart', title: 'On-brand', text: 'Always harmonises with your hue.' }] } },
+  { type: 'tiles', description: 'The “image” variant — a full-bleed photo with a legibility scrim and light text; the whole tile links.', block: { type: 'tiles', variant: 'image', columns: 3, tiles: [{ eyebrow: 'Feature', title: 'Photo tile', text: 'Text stays legible over any image.', href: '#', image: { src: '/placeholder.svg', alt: 'Placeholder' } }, { title: 'Second', text: 'Cover-fit background.', href: '#', image: { src: '/placeholder.svg', alt: 'Placeholder' } }, { title: 'Third', text: 'With a gradient scrim.', href: '#', image: { src: '/placeholder.svg', alt: 'Placeholder' } }] } },
+  { type: 'banner', description: 'A full-bleed feature band — a fixed/parallax background image with a scrim and a floating “shaded glass” card. Pure-CSS parallax; disabled on touch and under reduced-motion.', block: { type: 'banner', image: '/showcase-hero.svg', eyebrow: 'Featured', title: 'A banner that moves', text: 'The image is pinned to the viewport, so it drifts under this card as you scroll.', cta: { label: 'Take a look', href: '#' }, align: 'start' } },
+  { type: 'stats', description: 'A band of headline numbers (value + label) over an optional heading — social proof at a glance.', block: { type: 'stats', title: 'By the numbers', background: 'muted', columns: 3, items: [{ value: '250+', label: 'projects shipped' }, { value: '99.9%', label: 'uptime', description: 'rolling 12 months' }, { value: '<1 day', label: 'average reply' }] } },
+  { type: 'steps', description: 'A numbered process — connected cards (horizontal) or a stacked timeline (vertical).', block: { type: 'steps', title: 'How it works', layout: 'horizontal', items: [{ icon: 'chat', title: 'Tell us the problem', text: 'A straight conversation about the work costing you time.' }, { icon: 'sparkle', title: 'We fit it to you', text: 'The platform, shaped around how you actually work.' }, { icon: 'shield', title: 'You run it', text: 'Yours to use; we keep it running.' }] } },
+  { type: 'pricing', description: 'Plan cards with price, feature list and CTA; one plan can be “featured”. Prices shown are placeholder sample data, not real offers.', block: { type: 'pricing', title: 'Pricing (layout example)', intro: 'Sample plans to show the layout — placeholder figures, not real prices.', plans: [{ name: 'Tier one', price: '$XX', period: '/mo', description: 'Example plan.', features: ['Example feature', 'Example feature', 'Example feature'], cta: { label: 'Example CTA', href: '#' } }, { name: 'Tier two', price: '$XX', period: '/mo', description: 'Example plan (featured).', features: ['Everything in tier one', 'Example feature', 'Example feature'], cta: { label: 'Example CTA', href: '#' }, featured: true }, { name: 'Tier three', price: 'Custom', description: 'Example plan.', features: ['Everything in tier two', 'Example feature', 'Example feature'], cta: { label: 'Example CTA', href: '#' } }] } },
+  { type: 'logos', description: 'A “trusted by” wall — greyscale and dimmed, coming to colour on hover. (Sample logos — fictional companies.)', block: { type: 'logos', title: 'Trusted by teams like yours', items: [{ src: '/logos/acme.svg', alt: 'Acme' }, { src: '/logos/nimbus.svg', alt: 'Nimbus' }, { src: '/logos/vertex.svg', alt: 'Vertex' }, { src: '/logos/harbor.svg', alt: 'Harbor' }, { src: '/logos/quanta.svg', alt: 'Quanta' }] } },
+  { type: 'tabs', description: 'Labelled panels, one open at a time — progressive (first panel shows with no JS), with ARIA + arrow-key nav.', block: { type: 'tabs', title: 'One system, many angles', items: [{ label: 'Design', heading: 'Design, once', text: 'Set colour, type and style once; every page follows.' }, { label: 'Build', heading: 'Built to last', text: 'A curated system, not a pile of one-offs.' }, { label: 'Own', heading: 'Yours to keep', text: 'Static output and plain content in your own repo.' }] } },
+  { type: 'announcement', description: 'A thin full-width bar (message + optional link), dismissible — the dismissal is remembered per id.', block: { type: 'announcement', text: 'New: five section recipes just landed.', link: { label: 'See the recipes', href: '#' }, tone: 'accent', id: 'gallery-demo' } },
+  { type: 'bento', description: 'An asymmetric grid — cards pick a size (sm / wide / tall / lg) and a look (surface / filled / gradient / image). Dense packing, the “living moodboard” layout.', block: { type: 'bento', items: [{ size: 'lg', variant: 'gradient', icon: 'sparkle', eyebrow: 'Flagship', title: 'The big idea', text: 'A 2×2 tile anchors the grid.' }, { size: 'sm', variant: 'surface', icon: 'shield', title: 'Trust' }, { size: 'sm', variant: 'filled', icon: 'heart', title: 'Care' }, { size: 'wide', variant: 'image', eyebrow: 'In use', title: 'A wide photo tile', image: { src: '/showcase-hero.svg', alt: 'Abstract' } }, { size: 'sm', variant: 'surface', icon: 'checklist', title: 'Simple' }, { size: 'sm', variant: 'surface', icon: 'book-open', title: 'Clear' }] } },
+  { type: 'marquee', description: 'An infinite feature strip — a pure-CSS scrolling loop that pauses on hover and wraps statically under reduced-motion. Hover it to pause.', block: { type: 'marquee', speed: 'normal', items: ['Design once', 'Apply everywhere', 'Unmistakably yours', 'You own it', 'One system'] } },
+  { type: 'latestPosts', description: 'Surfaces the posts capability inside a page — the most-recent posts as full image cards (`grid`) or a compact miniature index (`list`: thumbnail + category + date per row, staying short however many posts), with a “view all” link. Queried from the site’s own posts at build time, so a homepage “Latest news” needs no custom code.', block: { type: 'latestPosts', title: 'Latest from the showcase', limit: 4, layout: 'list' } },
+  { type: 'mapEmbed', description: 'A consent-gated map (e.g. Google Maps) — the sibling of the calendar embed. Nothing loads from the provider until the visitor clicks “Load map”, so no third-party request fires on page load; consent is remembered per visitor.', block: { type: 'mapEmbed', title: 'Find us', intro: 'Where to find the showcase.', embedUrl: 'https://www.google.com/maps/embed?pb=!demo', publicUrl: 'https://maps.google.com/', provider: 'Google Maps' } },
+  { type: 'table', description: 'A simple data table (header row + body rows) under an optional heading — for structured data the other blocks can’t carry cleanly (fees, opening hours, a cookies list). Striped, and scrolls horizontally on narrow screens.', block: { type: 'table', title: 'Hall hire', intro: 'Sample rates.', columns: ['Item', 'Rate', 'Notes'], rows: [['Hall (per hour)', '£20', 'Deposit confirms the booking'], ['Insurance', '£1.50/hr', 'Waived with your own public liability cover'], ['Cleaning deposit', '£50', 'Refundable']] } },
+  { type: 'notice', description: 'An inline highlighted info box (icon + title + body + optional link) that sets a passage apart from the surrounding prose. Two tones (accent / neutral); the in-flow sibling of the corner sticky callout.', block: { type: 'notice', tone: 'accent', icon: 'shield', title: 'Reporting a concern', text: 'The parish has a Safeguarding Representative you can contact through the Parish Office.', link: { label: 'Safeguarding policy', href: '#' } } },
+  { type: 'mediaCards', description: 'Rich content cards with the image as a HEADER on top (cover-cropped) + an icon badge, title, meta pill, description and CTA — the image and copy both stay fully legible (unlike the tiles image variant, which puts the image behind the text). For groups, team, services or events.', block: { type: 'mediaCards', title: 'Get involved', intro: 'Cards whose photo and copy both need to read clearly.', columns: 3, cards: [{ image: { src: '/placeholder.svg', alt: '' }, icon: 'heart', title: 'Prayer Group', meta: 'Sundays 10:45 · Parish hall', text: 'Praying together before the Sunday service — newcomers always welcome.', href: '#', linkLabel: 'Find out more' }, { image: { src: '/placeholder.svg', alt: '' }, icon: 'people', title: 'Community League', meta: 'First Wednesday · 7pm', text: 'Faith, friendship, service and mission.', href: '#' }, { image: { src: '/placeholder.svg', alt: '' }, icon: 'globe', title: 'Partner Community', meta: 'Your area', text: 'A neighbouring community we work closely with.', href: '#', linkLabel: 'Visit their site' }] } },
+  { 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.', items: [{ 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/' }] } },
+];

package/integration.mjs

@@ -0,0 +1,44 @@
+/**
+ * ferst() — the Astro integration that makes a client site's ROUTING package-owned.
+ *
+ * A thin client adds `integrations: [ferst()]` to astro.config.mjs and carries
+ * ZERO page files: the page catch-all (which also owns the home page) and the
+ * calendar route are injected from ferst-core. A routing fix then ships as a
+ * package bump + rebuild — the same channel component fixes travel through — instead
+ * of being hand-copied into every client repo.
+ *
+ * Irreducible caveat (Astro 5): content collections must be defined in the CONSUMER,
+ * so the one-line `src/content/config.ts` re-export stays. "Zero page files" is
+ * reachable; "zero files" is not. Explicit client `.astro` routes still win over
+ * these injected ones, so a one-off hand-built page is always possible.
+ *
+ * Blog routes (news index / posts / tags) are deliberately NOT injected yet — the
+ * listing component (NewsList) is not in the package. They join once it is promoted
+ * to core; individual routes would otherwise exist with no listing to reach them.
+ *
+ * @param {object} [options]
+ * @param {boolean} [options.calendar=true] Inject the `/calendar` route.
+ * @returns {import('astro').AstroIntegration}
+ */
+export default function ferst(options = {}) {
+  const { calendar = true } = options;
+  return {
+    name: 'ferst',
+    hooks: {
+      'astro:config:setup': ({ injectRoute }) => {
+        // Pages + home: the reserved `index` entry renders at `/`, every other
+        // `pages` entry at its own slug (see lib/pages.ts `getSiteRoutes`).
+        injectRoute({
+          pattern: '/[...slug]',
+          entrypoint: 'ferst-core/routes/[...slug].astro',
+        });
+        if (calendar) {
+          injectRoute({
+            pattern: '/calendar',
+            entrypoint: 'ferst-core/routes/calendar/index.astro',
+          });
+        }
+      },
+    },
+  };
+}

package/layouts/Base.astro

@@ -172,12 +172,23 @@ const metaDescription = description ?? identity.description;
       document.addEventListener('astro:page-load', ferstMarkExternalLinks);
     </script>
     <script>
-      // Live theme preview: only when this page is FRAMED with ?preview=1 (the
-      // portal Theme Studio or the CMS design-tokens pane), listen for draft theme
-      // settings over postMessage and re-theme live. Dynamically imported so the
-      // code never ships to normal visitors. Inert otherwise.
-      if (window.parent !== window && new URLSearchParams(location.search).has('preview')) {
-        import('../lib/theme-preview').then((m) => m.initThemePreviewListener());
+      // Live theme preview: only when this page is FRAMED and either loaded with
+      // ?preview=1 OR already in a preview session (so the draft survives clicking
+      // links inside the frame, which drop the query). Listens for draft theme
+      // settings over postMessage and re-themes live. Dynamically imported so the
+      // code never ships to normal visitors; never runs unframed.
+      try {
+        var inPreview =
+          new URLSearchParams(location.search).has('preview') ||
+          sessionStorage.getItem('ferst-preview-on') === '1';
+        if (window.parent !== window && inPreview) {
+          import('../lib/theme-preview').then((m) => m.initThemePreviewListener());
+        }
+      } catch (_) {
+        /* sessionStorage blocked — fall back to the ?preview query only */
+        if (window.parent !== window && new URLSearchParams(location.search).has('preview')) {
+          import('../lib/theme-preview').then((m) => m.initThemePreviewListener());
+        }
       }
     </script>
   </head>

package/lib/icons.ts

@@ -9,7 +9,7 @@
  * Keys are deliberately **business-agnostic** (`landmark`, not `church`;
  * `map-pin`, not `parish-office`) — this set is part of the reusable substrate.
  *
- * History: this merges CTK's two divergent registries (`lib/icons.ts` raw
+ * History: this merges two divergent icon registries (`lib/icons.ts` raw
  * markup + `lib/tagIcons` structured objects) into one — the seven shapes below
  * the divider were ported from the tag set (Lucide-derived), converted to the
  * same markup shape, with duplicates (calendar/heart/tag/people/email/book)

package/lib/pages.ts

@@ -40,3 +40,27 @@ export async function getPageRoutes() {
     props: { entry },
   }));
 }
+
+/**
+ * Map a `pages` entry id to its route params, treating the reserved `index`
+ * entry as the site root (`/`). Pure — the routing convention in one place, so
+ * it's unit-testable without `astro:content`.
+ */
+export function pageRouteParams(id: string): { slug: string | undefined } {
+  return { slug: id === 'index' ? undefined : id };
+}
+
+/**
+ * `getStaticPaths` for the site catch-all that ALSO owns the home page — used by
+ * the `ferst()` integration's injected `/[...slug]` route. The reserved `index`
+ * entry becomes `/`; every other page becomes `/<id>`. Home is therefore just
+ * another `pages` entry (content, not code), so a client carries zero page files
+ * AND can pick its home layout in the builder like any other page.
+ */
+export async function getSiteRoutes() {
+  const entries = await getPageEntries();
+  return entries.map((entry) => ({
+    params: pageRouteParams(entry.id),
+    props: { entry },
+  }));
+}

package/lib/theme-preview.ts

@@ -28,6 +28,27 @@ export const PREVIEW_MESSAGES = {
 } as const;
 
 const STYLE_ID = 'ferst-preview';
+/** Marks a live preview session so the draft survives navigation WITHIN the frame
+ *  (internal links drop ?preview=1). Base.astro's gate also checks this flag. */
+export const PREVIEW_SESSION_FLAG = 'ferst-preview-on';
+const PREVIEW_DRAFT_KEY = 'ferst-preview-draft';
+
+function rememberDraft(theme: ThemeSettings): void {
+  try {
+    sessionStorage.setItem(PREVIEW_DRAFT_KEY, JSON.stringify(theme));
+  } catch {
+    /* storage blocked — the page still themes from the live postMessage */
+  }
+}
+
+function recallDraft(): ThemeSettings | null {
+  try {
+    const raw = sessionStorage.getItem(PREVIEW_DRAFT_KEY);
+    return raw ? (JSON.parse(raw) as ThemeSettings) : null;
+  } catch {
+    return null;
+  }
+}
 
 /** Origins allowed to drive the preview (besides same-origin, i.e. the CMS pane).
  *  The Ferst portal — both its custom domains and the bare Cloudflare Pages URLs
@@ -66,8 +87,30 @@ export function applyPreviewTheme(theme: ThemeSettings): void {
   else delete document.documentElement.dataset.field;
 }
 
-/** Wire the page to receive drafts from an allowed surface, and announce readiness. */
+/** Wire the page to receive drafts from an allowed surface, and announce readiness.
+ *  Persists the draft for the session so it survives navigation inside the frame. */
 export function initThemePreviewListener(): void {
+  try {
+    sessionStorage.setItem(PREVIEW_SESSION_FLAG, '1'); // keep previewing across in-frame nav
+  } catch {
+    /* storage blocked — the portal re-push on ready still re-themes each new page */
+  }
+
+  const reapply = () => {
+    const draft = recallDraft();
+    if (draft) {
+      try {
+        applyPreviewTheme(draft);
+      } catch {
+        /* ignore a bad stored draft */
+      }
+    }
+  };
+
+  // A freshly-navigated page in the session: re-theme immediately from the stored
+  // draft (before the portal re-pushes), so tokens don't drop on link clicks.
+  reapply();
+
   window.addEventListener('message', (event: MessageEvent) => {
     if (!isAllowedPreviewOrigin(event.origin)) return;
     const data = event.data as { type?: string; theme?: ThemeSettings; mode?: string } | null;
@@ -75,6 +118,7 @@ export function initThemePreviewListener(): void {
     if (data.type === PREVIEW_MESSAGES.theme && data.theme) {
       try {
         applyPreviewTheme(data.theme);
+        rememberDraft(data.theme);
       } catch {
         /* a malformed draft must never break the preview page */
       }
@@ -82,10 +126,15 @@ export function initThemePreviewListener(): void {
       document.documentElement.dataset.theme = data.mode === 'dark' ? 'dark' : 'light';
     }
   });
-  // Tell whoever framed us that we're listening, so it can push the current draft.
+
+  // View-transition (ClientRouter) pages swap the DOM without a full load, which
+  // drops the injected <style> — re-apply after each swap.
+  document.addEventListener('astro:page-load', reapply);
+
+  // Tell whoever framed us that we're listening, so it can push the latest draft.
   try {
     window.parent?.postMessage({ type: PREVIEW_MESSAGES.ready }, '*');
   } catch {
-    /* no parent / blocked — the surface can still push on its own timer */
+    /* no parent / blocked — the stored draft already re-themed this page */
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",
@@ -34,9 +34,12 @@
     "bin",
     "cms",
     "components",
+    "integration.mjs",
     "layouts",
     "content",
+    "examples",
     "lib",
+    "routes",
     "utils",
     "styles",
     "README.md",
@@ -46,7 +49,8 @@
   ],
   "bin": {
     "ferst-check-thin": "bin/check-thin.mjs",
-    "ferst-set-cms-branch": "bin/set-cms-branch.mjs"
+    "ferst-set-cms-branch": "bin/set-cms-branch.mjs",
+    "ferst-cms-config": "bin/cms-config.mjs"
   },
   "dependencies": {
     "zod": "^3.25.0"

package/routes/[...slug].astro

@@ -0,0 +1,24 @@
+---
+/**
+ * The client site's page routes — INJECTED by the ferst() integration, so a
+ * client repo carries NO page files. Every entry in the `pages` collection
+ * becomes a route: the reserved `index` entry is the home page (`/`), every
+ * other JSON file its own slug. Content, not code.
+ *
+ * A client can still hand-build a one-off `.astro` page beside these — explicit
+ * routes always win over an injected catch-all.
+ */
+import Base from '../layouts/Base.astro';
+import BlockRenderer from '../components/BlockRenderer.astro';
+import { pageSchema } from '../content/blocks';
+import { getSiteRoutes } from '../lib/pages';
+
+export const getStaticPaths = getSiteRoutes;
+
+const { entry } = Astro.props;
+const page = pageSchema.parse(entry.data);
+---
+
+<Base title={page.title} description={page.description} heroImage={page.heroImage} align={page.align}>
+  <BlockRenderer blocks={page.blocks} />
+</Base>

package/routes/calendar/index.astro

@@ -0,0 +1,25 @@
+---
+/**
+ * The calendar page (`/calendar`) — INJECTED by the ferst() integration. Consent-
+ * gated by CalendarEmbed (nothing loads from Google until the visitor opts in).
+ * Configure it in the CMS (calendarSettings). Off by default until an embed URL is
+ * set, but the route always exists so nav links to it never 404.
+ */
+import Base from '../../layouts/Base.astro';
+import CalendarEmbed from '../../components/CalendarEmbed.astro';
+import { getCalendarSettings } from '../../lib/calendar';
+
+const cal = await getCalendarSettings();
+---
+
+<Base title={cal.title} description={cal.intro || undefined}>
+  <CalendarEmbed
+    title={cal.title}
+    intro={cal.intro}
+    embedUrl={cal.embedUrl}
+    publicUrl={cal.publicUrl}
+    height={cal.height}
+    provider={cal.provider}
+    weekStart={cal.weekStart}
+  />
+</Base>