ferst-core 0.4.3 → 0.4.8

package/cms/theme-preview.js

@@ -0,0 +1,108 @@
+/**
+ * CMS design-tokens live preview (PDLC Phase 1 / WS4) — SPIKE artifact.
+ *
+ * Registers a Sveltia/Decap preview template for the `theme` file collection that
+ * embeds an iframe of the live site (?preview=1) and pushes the editor's CURRENT
+ * (unsaved) token values to it over postMessage — same-origin, since /admin and
+ * the site share the client domain. Re-themes live via ferst-core's site-side
+ * listener (lib/theme-preview.ts). Save is the CMS's existing git-proxy write.
+ *
+ * STATUS: unverified against the deployed Sveltia (pre-1.0; docs warn of Decap
+ * preview-template compat gaps). It is fully GUARDED — if the API isn't present or
+ * differs, it logs once and no-ops, so it can never break the CMS. The portal
+ * Theme Studio is the guaranteed token surface until the dev spike confirms this.
+ *
+ * Include from a client's public/admin/index.html AFTER the Sveltia bundle:
+ *   <script src="/ferst/theme-preview.js"></script>   (copied from ferst-core/cms)
+ */
+(function () {
+  'use strict';
+
+  var MSG = { theme: 'ferst:preview:theme', ready: 'ferst:preview:ready' };
+  // Match the CMS theme collection's fields (config.yml `theme` file).
+  var FIELDS = ['brand', 'ink', 'surface', 'corners', 'elevation', 'stroke', 'fields', 'darkDepth', 'darkChroma'];
+
+  function log(msg) {
+    try {
+      console.info('[ferst theme-preview] ' + msg);
+    } catch (_) {}
+  }
+
+  // Read the live entry into a themeSettings-shaped draft (Immutable Map API).
+  function draftFromEntry(entry) {
+    var get = function (k) {
+      try {
+        return entry && entry.getIn ? entry.getIn(['data', k]) : undefined;
+      } catch (_) {
+        return undefined;
+      }
+    };
+    var fonts = get('fonts') || {};
+    var ov = get('darkOverrides') || {};
+    var pick = function (o, k) {
+      return o && typeof o.get === 'function' ? o.get(k) : o ? o[k] : '';
+    };
+    return {
+      brand: get('brand') || '',
+      ink: get('ink') || '',
+      surface: get('surface') || '',
+      fonts: { heading: pick(fonts, 'heading') || '', body: pick(fonts, 'body') || '', display: pick(fonts, 'display') || '' },
+      corners: get('corners') || 'rounded',
+      elevation: get('elevation') || 'raised',
+      stroke: get('stroke') || 'on',
+      fields: get('fields') || 'boxed',
+      darkDepth: typeof get('darkDepth') === 'number' ? get('darkDepth') : 0.21,
+      darkChroma: typeof get('darkChroma') === 'number' ? get('darkChroma') : 0.05,
+      darkOverrides: { ground: pick(ov, 'ground') || '', text: pick(ov, 'text') || '', accent: pick(ov, 'accent') || '' },
+    };
+  }
+
+  function register(CMS, React) {
+    var Preview = function (props) {
+      // Keep one iframe of the live site in the preview pane; push the draft on
+      // every render (Sveltia re-renders as the editor types) and on ready.
+      var doc = props.document || document;
+      var frame = doc.getElementById('ferst-preview-frame');
+      if (!frame) {
+        frame = doc.createElement('iframe');
+        frame.id = 'ferst-preview-frame';
+        frame.src = '/?preview=1';
+        frame.style.cssText = 'width:100%;height:100%;min-height:80vh;border:0';
+        (doc.body || doc.documentElement).appendChild(frame);
+        (props.window || window).addEventListener('message', function (e) {
+          if (e && e.data && e.data.type === MSG.ready) postDraft();
+        });
+      }
+      function postDraft() {
+        try {
+          frame.contentWindow.postMessage({ type: MSG.theme, theme: draftFromEntry(props.entry) }, window.location.origin);
+        } catch (_) {}
+      }
+      postDraft();
+      // Render nothing of our own into React's tree — we own the iframe directly.
+      return React && React.createElement ? React.createElement('div', { style: { display: 'none' } }) : null;
+    };
+    CMS.registerPreviewTemplate('theme', Preview);
+    log('registered live preview for the theme collection');
+    void FIELDS; // documents the fields this mirrors
+  }
+
+  var tries = 0;
+  (function wait() {
+    var CMS = window.CMS;
+    var React = window.React || window.h || (CMS && CMS.React);
+    if (CMS && typeof CMS.registerPreviewTemplate === 'function') {
+      try {
+        register(CMS, React);
+      } catch (err) {
+        log('registerPreviewTemplate failed — in-pane preview disabled (use the portal Theme Studio). ' + (err && err.message));
+      }
+      return;
+    }
+    if (tries++ < 40) {
+      setTimeout(wait, 250); // CMS loads async as an ES module
+    } else {
+      log('CMS.registerPreviewTemplate not found — in-pane preview unavailable in this CMS build.');
+    }
+  })();
+})();

package/components/CookiePolicy.astro

@@ -0,0 +1,157 @@
+---
+/**
+ * CookiePolicy — the auto-generated cookie policy page body. It does NOT decide
+ * what to show: the consumer scans its own pages (scanCookieUses in
+ * content/cookies) and passes the resulting model, so the categories and items
+ * always reflect the recipes/templates the site actually uses (functionality-
+ * driven, not client-specific).
+ *
+ * Necessary items are the site's own functional storage (always on). Additional
+ * items are third-party embeds gated behind the shared embed consent; one
+ * category toggle turns them on/off, wired to the SAME consent as the cookie
+ * banner and footer panel, so all three stay in sync. Token-driven.
+ */
+import type { CookiePolicyModel } from '../content/cookies';
+
+interface Props {
+  model: CookiePolicyModel;
+  title?: string;
+  intro?: string;
+}
+const {
+  model,
+  title = 'Cookie Policy',
+  intro = 'This page explains the cookies and similar storage this website uses. It is generated from the features actually in use here, so it always reflects what is really on the site. You can turn additional (third-party) content on or off at any time — your choice is remembered on this device.',
+} = Astro.props;
+const hasAdditional = model.additional.length > 0;
+---
+
+<section class="b-cookie-policy">
+  <h1 class="b-cookie-policy__title">{title}</h1>
+  <p class="b-cookie-policy__intro">{intro}</p>
+
+  <div class="b-cookie-policy__cat ferst-tile">
+    <div class="b-cookie-policy__cat-head">
+      <h2 class="b-cookie-policy__cat-title">Necessary</h2>
+      <span class="b-cookie-policy__badge">Always on</span>
+    </div>
+    <p class="b-cookie-policy__cat-note">These keep the site working and remember your choices. They stay on your device only and are never shared, so they can’t be switched off.</p>
+    <ul class="b-cookie-policy__list">
+      {model.necessary.map((u) => (
+        <li class="b-cookie-policy__item">
+          <p class="b-cookie-policy__item-name">{u.name}</p>
+          <p class="b-cookie-policy__item-purpose">{u.purpose}</p>
+          <p class="b-cookie-policy__item-storage">{u.storage}</p>
+        </li>
+      ))}
+    </ul>
+  </div>
+
+  <div class="b-cookie-policy__cat ferst-tile">
+    <div class="b-cookie-policy__cat-head">
+      <h2 class="b-cookie-policy__cat-title">Additional</h2>
+      {hasAdditional && (
+        <label class="b-cookie-policy__switch">
+          <span class="b-cookie-policy__switch-state" data-on="On" data-off="Off">Off</span>
+          <input type="checkbox" id="cookie-policy-additional" class="b-cookie-policy__switch-input" />
+          <span class="b-cookie-policy__switch-track" aria-hidden="true"></span>
+        </label>
+      )}
+    </div>
+    {hasAdditional ? (
+      <>
+        <p class="b-cookie-policy__cat-note">These let third-party content load, which may set that provider’s cookies. Nothing loads until you turn this on.</p>
+        <ul class="b-cookie-policy__list">
+          {model.additional.map((u) => (
+            <li class="b-cookie-policy__item">
+              <p class="b-cookie-policy__item-name">{u.name}{u.provider && <span class="b-cookie-policy__item-provider"> · {u.provider}</span>}</p>
+              <p class="b-cookie-policy__item-purpose">{u.purpose}</p>
+              <p class="b-cookie-policy__item-storage">{u.storage}</p>
+            </li>
+          ))}
+        </ul>
+      </>
+    ) : (
+      <p class="b-cookie-policy__cat-note">This site currently uses no additional or third-party cookies.</p>
+    )}
+  </div>
+</section>
+
+<script>
+  // Wire the Additional toggle to the shared embed consent so it stays in sync
+  // with the cookie banner and footer panel (accept there → this shows On, and
+  // vice-versa). Turning it on/off here records the same site-wide choice.
+  import { hasConsent, setConsent, onConsentChange } from '../lib/consent-client';
+  const box = document.getElementById('cookie-policy-additional') as HTMLInputElement | null;
+  if (box) {
+    const state = box.closest('.b-cookie-policy__switch')?.querySelector<HTMLElement>('.b-cookie-policy__switch-state');
+    const sync = (on: boolean) => {
+      box.checked = on;
+      if (state) state.textContent = on ? state.dataset.on ?? 'On' : state.dataset.off ?? 'Off';
+    };
+    sync(hasConsent());
+    box.addEventListener('change', () => setConsent(box.checked));
+    onConsentChange((allowed) => sync(allowed));
+  }
+</script>
+
+<style>
+  .b-cookie-policy {
+    max-width: 52rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  .b-cookie-policy__title { margin: 0; }
+  .b-cookie-policy__intro { margin: 0; color: var(--muted); line-height: 1.7; max-width: 46rem; }
+
+  /* .ferst-tile supplies the surface (bg/border/radius/shadow). */
+  .b-cookie-policy__cat { padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 0.9rem; }
+  .b-cookie-policy__cat-head {
+    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
+  }
+  .b-cookie-policy__cat-title { margin: 0; font-size: 1.3rem; }
+  .b-cookie-policy__cat-note { margin: 0; color: var(--muted); line-height: 1.6; }
+  .b-cookie-policy__badge {
+    font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
+    letter-spacing: 0.08em; text-transform: uppercase;
+    color: var(--gold);
+    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
+    border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap;
+  }
+
+  .b-cookie-policy__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
+  .b-cookie-policy__item {
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--border);
+  }
+  .b-cookie-policy__item:first-child { padding-top: 0; border-top: none; }
+  .b-cookie-policy__item-name { margin: 0; font-family: var(--font-heading); font-weight: 700; }
+  .b-cookie-policy__item-provider { color: var(--muted); font-weight: 400; }
+  .b-cookie-policy__item-purpose { margin: 0.15rem 0 0; line-height: 1.55; }
+  .b-cookie-policy__item-storage { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted); }
+
+  /* Accessible toggle: a real checkbox drives a styled track. */
+  .b-cookie-policy__switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; }
+  .b-cookie-policy__switch-state {
+    font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--muted); min-width: 1.6rem; text-align: right;
+  }
+  .b-cookie-policy__switch-input {
+    position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer;
+  }
+  .b-cookie-policy__switch-track {
+    position: relative; width: 44px; height: 26px; border-radius: 999px; flex: 0 0 auto;
+    background: color-mix(in srgb, var(--muted) 45%, transparent);
+    transition: background 0.15s ease;
+  }
+  .b-cookie-policy__switch-track::after {
+    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
+    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    transition: transform 0.15s ease;
+  }
+  .b-cookie-policy__switch-input:checked ~ .b-cookie-policy__switch-track { background: var(--gold); }
+  .b-cookie-policy__switch-input:checked ~ .b-cookie-policy__switch-track::after { transform: translateX(18px); }
+  .b-cookie-policy__switch-input:focus-visible ~ .b-cookie-policy__switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }
+</style>

package/components/recipes/FeatureCards.astro

@@ -17,6 +17,9 @@ interface Props {
   cards?: { icon?: string; title: string; text?: string; href?: string }[];
 }
 const { title, intro, columns = 3, cards = [] } = Astro.props;
+// Never reserve more columns than there are cards (a lone card in a 3-col grid
+// would strand two empty cells); `data-single` centres a solitary card.
+const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3 | 4;
 ---
 
 <section class="b-feature-cards">
@@ -26,7 +29,7 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
       {intro && <p class="b-feature-cards__intro">{intro}</p>}
     </div>
   )}
-  <div class="b-feature-cards__grid" data-cols={columns}>
+  <div class="b-feature-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
     {cards.map((card) => (
       <Card>
         {card.icon && isIconKey(card.icon) && (
@@ -77,6 +80,9 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
     .b-feature-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
     .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
   }
+  /* A solitary card is a centred feature, not a full-width slab. */
+  .b-feature-cards__grid[data-single] { max-width: 26rem; margin-inline: auto;
+  }
   @media (min-width: 64em) {
     .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
   }

package/components/recipes/Gallery.astro

@@ -7,9 +7,11 @@ interface Props {
   images?: { src: string; alt?: string; caption?: string }[];
 }
 const { columns = 3, images = [] } = Astro.props;
+// Never reserve more columns than there are images; `data-single` centres a lone one.
+const cols = Math.min(columns, Math.max(images.length, 1)) as 1 | 2 | 3 | 4;
 ---
 
-<div class="b-gallery" data-cols={columns}>
+<div class="b-gallery" data-cols={cols} data-single={images.length === 1 ? 'true' : undefined}>
   {images.map((img) => (
     <figure class="b-gallery__item">
       <img src={img.src} alt={img.alt ?? ''} loading="lazy" decoding="async" />
@@ -27,6 +29,8 @@ const { columns = 3, images = [] } = Astro.props;
     margin-inline: auto;
     padding-inline: 1rem;
   }
+  /* A solitary image is a centred feature, not a full-bleed slab. */
+  .b-gallery[data-single] { max-width: 34rem; }
   @media (min-width: 48em) {
     .b-gallery[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
     .b-gallery[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }

package/components/recipes/Locations.astro

@@ -25,6 +25,9 @@ interface Props {
   items?: Item[];
 }
 const { title, intro, columns = 2, provider = 'Google Maps', items = [] } = Astro.props;
+// A single location shouldn't sit in one half of a two-column grid; `data-single`
+// centres a lone tile. (A deliberate columns=1 with several items is untouched.)
+const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2;
 ---
 
 <section class="b-locations">
@@ -34,9 +37,9 @@ const { title, intro, columns = 2, provider = 'Google Maps', items = [] } = Astr
       {intro && <p class="b-locations__intro">{intro}</p>}
     </div>
   )}
-  <div class="b-locations__grid" data-cols={columns}>
+  <div class="b-locations__grid" data-cols={cols} data-single={items.length === 1 ? 'true' : undefined}>
     {items.map((item) => (
-      <article class="b-locations__card">
+      <article class="b-locations__card ferst-tile ferst-tile--sm">
         <div class="b-locations__map">
           {isSafeEmbedUrl(item.embedUrl) ? (
             <div class="b-loc-map" data-embed-url={item.embedUrl} data-title={`Map — ${item.name}`}>
@@ -92,16 +95,15 @@ const { title, intro, columns = 2, provider = 'Google Maps', items = [] } = Astr
   .b-locations__head { display: flex; flex-direction: column; gap: 0.6rem; }
   .b-locations__intro { margin: 0; color: var(--muted); max-width: var(--max); }
   .b-locations__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
+  /* A solitary location is a centred feature, not a full-width slab. */
+  .b-locations__grid[data-single] { max-width: 32rem; margin-inline: auto; }
   @media (min-width: 44em) {
     .b-locations__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
   }
   .b-locations__card {
     display: flex;
     flex-direction: column;
-    background: var(--bg-surface);
-    border: var(--card-border);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-sm);
+    /* surface comes from .ferst-tile .ferst-tile--sm (bg/border/radius/shadow-sm) */
     overflow: hidden;
   }
   /* Map region — uniform ratio; the consent card fills it until the iframe loads. */

package/components/recipes/MediaCards.astro

@@ -28,6 +28,8 @@ interface Props {
   cards?: Card[];
 }
 const { title, intro, columns = 3, cards = [] } = Astro.props;
+// Never reserve more columns than there are cards; `data-single` centres a lone one.
+const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3;
 ---
 
 <section class="b-media-cards">
@@ -37,9 +39,14 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
       {intro && <p class="b-media-cards__intro">{intro}</p>}
     </div>
   )}
-  <div class="b-media-cards__grid" data-cols={columns}>
-    {cards.map((card) => (
-      <article class:list={['b-media-cards__card', card.href && 'is-link']}>
+  <div class="b-media-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
+    {cards.map((card) => {
+      // Surface a mailto:/tel: as visible, copyable text — a plain mailto does
+      // nothing on a device with no mail app, so the address must be readable too.
+      const email = card.href?.startsWith('mailto:') ? card.href.slice(7).split('?')[0] : null;
+      const phone = card.href?.startsWith('tel:') ? card.href.slice(4) : null;
+      return (
+      <article class:list={['b-media-cards__card', 'ferst-tile', 'ferst-tile--sm', card.href && 'is-link']}>
         {card.image && (
           <div class="b-media-cards__media">
             <img src={card.image.src} alt={card.image.alt ?? ''} loading="lazy" />
@@ -54,12 +61,16 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
           </h3>
           {card.meta && <p class="b-media-cards__meta">{card.meta}</p>}
           {card.text && <p class="b-media-cards__text">{card.text}</p>}
-          {card.href && (
+          {(email || phone) && (
+            <span class="b-media-cards__contact">{email ?? phone}</span>
+          )}
+          {card.href && !email && !phone && (
             <span class="b-media-cards__cta" aria-hidden="true">{card.linkLabel ?? 'Learn more'} →</span>
           )}
         </div>
       </article>
-    ))}
+      );
+    })}
   </div>
 </section>
 
@@ -89,6 +100,8 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
     grid-template-columns: 1fr;
     gap: 1.5rem;
   }
+  /* A solitary card is a centred feature, not a full-width slab. */
+  .b-media-cards__grid[data-single] { max-width: 28rem; margin-inline: auto; }
   @media (min-width: 40em) {
     .b-media-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
     .b-media-cards__grid[data-cols='3'] { grid-template-columns: repeat(2, 1fr); }
@@ -100,10 +113,7 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
     position: relative;
     display: flex;
     flex-direction: column;
-    background: var(--bg-surface);
-    border: var(--card-border);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-sm);
+    /* surface comes from .ferst-tile .ferst-tile--sm (bg/border/radius/shadow-sm) */
     overflow: hidden;
     transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
   }
@@ -189,4 +199,14 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
     font-weight: 600;
     color: var(--gold);
   }
+  /* A mailto/tel shown as visible, copyable text (below any description). */
+  .b-media-cards__contact {
+    margin-top: auto;
+    padding-top: 0.5rem;
+    font-family: var(--font-heading);
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--gold);
+    overflow-wrap: anywhere;
+  }
 </style>

package/components/recipes/Pricing.astro

@@ -32,7 +32,7 @@ const { title, intro, plans = [] } = Astro.props;
   )}
   <div class="b-pricing__grid" data-count={plans.length}>
     {plans.map((plan) => (
-      <div class="b-pricing__plan" data-featured={plan.featured ? 'true' : 'false'}>
+      <div class="b-pricing__plan ferst-tile" data-featured={plan.featured ? 'true' : 'false'}>
         {plan.featured && <span class="b-pricing__badge">Most popular</span>}
         <p class="b-pricing__name">{plan.name}</p>
         <p class="b-pricing__price">
@@ -94,10 +94,8 @@ const { title, intro, plans = [] } = Astro.props;
     flex-direction: column;
     gap: 0.75rem;
     padding: 1.75rem;
-    border-radius: var(--radius);
-    border: var(--card-border);
-    background: var(--bg-surface);
-    box-shadow: var(--shadow-md);
+    /* surface (bg/border/radius/shadow) comes from .ferst-tile; the featured
+       variant below overrides border-colour + shadow at higher specificity. */
   }
   .b-pricing__plan[data-featured='true'] {
     border-color: var(--gold);

package/components/recipes/Stats.astro

@@ -34,7 +34,7 @@ const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2 | 3 | 4;
     )}
     <div class="b-stats__grid" data-cols={cols}>
       {items.map((item) => (
-        <div class="b-stats__item">
+        <div class="b-stats__item ferst-tile">
           <span class="b-stats__value">{item.value}</span>
           {item.label && <span class="b-stats__label">{item.label}</span>}
           {item.description && <span class="b-stats__desc">{item.description}</span>}
@@ -93,10 +93,7 @@ const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2 | 3 | 4;
     text-align: center;
     gap: 0.5rem;
     padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
-    border-radius: var(--radius);
-    background: var(--bg-surface);
-    border: var(--card-border);
-    box-shadow: var(--shadow-md);
+    /* surface (bg/border/radius/shadow) comes from .ferst-tile */
   }
   .b-stats__value {
     font-family: var(--font-heading);

package/components/recipes/Tiles.astro

@@ -34,6 +34,8 @@ interface Props {
   tiles?: Tile[];
 }
 const { title, intro, columns = 3, variant = 'elevated', spotlight = false, tiles = [] } = Astro.props;
+// Never reserve more columns than there are tiles; `data-single` centres a lone one.
+const cols = Math.min(columns, Math.max(tiles.length, 1)) as 1 | 2 | 3 | 4;
 ---
 
 <section class="b-tiles">
@@ -43,7 +45,7 @@ const { title, intro, columns = 3, variant = 'elevated', spotlight = false, tile
       {intro && <p class="b-tiles__intro">{intro}</p>}
     </div>
   )}
-  <div class="b-tiles__grid" data-cols={columns} data-variant={variant} data-spotlight={spotlight ? 'true' : 'false'}>
+  <div class="b-tiles__grid" data-cols={cols} data-single={tiles.length === 1 ? 'true' : undefined} data-variant={variant} data-spotlight={spotlight ? 'true' : 'false'}>
     {tiles.map((tile) => {
       const Tag = tile.href ? 'a' : 'div';
       const bg =
@@ -93,6 +95,8 @@ const { title, intro, columns = 3, variant = 'elevated', spotlight = false, tile
     grid-template-columns: 1fr;
     gap: 1.25rem;
   }
+  /* A solitary tile is a centred feature, not a full-width slab. */
+  .b-tiles__grid[data-single] { max-width: 26rem; margin-inline: auto; }
   @media (min-width: 48em) {
     .b-tiles__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
     .b-tiles__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }

package/content/cookies.ts

@@ -0,0 +1,103 @@
+/**
+ * Cookie / third-party-storage registry + a scanner that reports which uses are
+ * actually active on a given site. This powers the auto-generated cookie policy
+ * page: its categories and items are DERIVED from the recipes/templates the site
+ * uses — functionality-driven, never hand-written or client-specific.
+ *
+ * Two canonical categories:
+ *   • necessary  — the site's OWN functional storage (no third parties). Always
+ *                  on; can't be switched off. Present on every site.
+ *   • additional — third-party embeds that may set the provider's cookies when
+ *                  they load. Gated behind the site's shared embed consent, and
+ *                  listed only when a recipe/template that uses them is present.
+ *
+ * Adding a new cookie-using recipe = one entry here (its `blocks` and/or a
+ * detection flag); the policy page then lists it automatically wherever it's used.
+ * Pure + framework-free so it's unit-testable without a render.
+ */
+
+export type CookieCategory = 'necessary' | 'additional';
+
+export interface CookieUse {
+  /** Stable id (also the consent grouping key in future per-item models). */
+  id: string;
+  category: CookieCategory;
+  /** Human name shown on the policy page, e.g. "Google Maps". */
+  name: string;
+  /** Third-party provider, when applicable. */
+  provider?: string;
+  /** One-line plain-English purpose. */
+  purpose: string;
+  /** What is stored and where. */
+  storage: string;
+}
+
+/** Additional uses carry detection rules; stripped before returning to the view. */
+interface AdditionalUse extends CookieUse {
+  /** Present if any of these block `type`s appears anywhere on the site. */
+  blocks?: string[];
+  /** Present if the site has a Google Calendar configured (a dedicated page). */
+  calendar?: boolean;
+}
+
+/** The site's own functional storage — always present, always on. */
+const NECESSARY: readonly CookieUse[] = [
+  {
+    id: 'consent-choice',
+    category: 'necessary',
+    name: 'Cookie preference',
+    purpose: 'Remembers whether you allowed or declined additional content, so you are not asked again.',
+    storage: 'Stored on your device only (local storage), never shared.',
+  },
+  {
+    id: 'theme',
+    category: 'necessary',
+    name: 'Appearance',
+    purpose: 'Remembers your light or dark theme choice.',
+    storage: 'Stored on your device only (local storage), never shared.',
+  },
+];
+
+/** Third-party embeds — listed only when a site actually uses them. */
+const ADDITIONAL: readonly AdditionalUse[] = [
+  {
+    id: 'google-maps',
+    category: 'additional',
+    name: 'Google Maps',
+    provider: 'Google',
+    purpose: 'Shows embedded maps of where to find us. Google may set cookies when a map loads.',
+    storage: 'Third-party cookies set by Google.',
+    blocks: ['locations', 'mapEmbed'],
+  },
+  {
+    id: 'google-calendar',
+    category: 'additional',
+    name: 'Google Calendar',
+    provider: 'Google',
+    purpose: 'Shows the parish calendar. Google may set cookies when the calendar loads.',
+    storage: 'Third-party cookies set by Google.',
+    blocks: ['calendar'],
+    calendar: true,
+  },
+];
+
+export interface CookieScanInput {
+  /** Every block `type` that appears anywhere on the site. */
+  blockTypes: Iterable<string>;
+  /** True when the site has a Google Calendar configured (dedicated calendar page). */
+  calendarConfigured?: boolean;
+}
+
+export interface CookiePolicyModel {
+  necessary: CookieUse[];
+  additional: CookieUse[];
+}
+
+/** Report the cookie uses actually active on a site, grouped by category. */
+export function scanCookieUses(input: CookieScanInput): CookiePolicyModel {
+  const types = new Set(input.blockTypes);
+  const additional = ADDITIONAL.filter(
+    (u) => (u.blocks?.some((b) => types.has(b)) ?? false) || (u.calendar === true && !!input.calendarConfigured),
+  ).map(({ blocks, calendar, ...use }) => use); // drop detection fields from the view model
+  return { necessary: NECESSARY.map((u) => ({ ...u })), additional };
+}

package/layouts/Base.astro

@@ -142,6 +142,44 @@ const metaDescription = description ?? identity.description;
         }
       }) as EventListener);
     </script>
+    <script>
+      // Open external links in a new tab — site-wide and future-proof. Any <a>
+      // pointing to a DIFFERENT origin over http(s) gets target=_blank +
+      // rel="noopener noreferrer"; mailto:/tel:/anchors and same-site links are
+      // left untouched. Runs on load and after every view-transition navigation,
+      // so it covers every component AND markdown-authored links (e.g. FAQ
+      // answers, prose) without each one having to opt in. Idempotent, so
+      // components that already set target/rel are unaffected.
+      function ferstMarkExternalLinks() {
+        const host = location.host;
+        document.querySelectorAll<HTMLAnchorElement>('a[href]').forEach((a) => {
+          let url: URL;
+          try {
+            url = new URL(a.href, location.href);
+          } catch {
+            return;
+          }
+          if (url.protocol !== 'http:' && url.protocol !== 'https:') return; // skip mailto/tel/etc.
+          if (url.host === host) return; // same-site
+          if (!a.target) a.target = '_blank';
+          const rel = new Set((a.getAttribute('rel') || '').split(/\s+/).filter(Boolean));
+          rel.add('noopener');
+          rel.add('noreferrer');
+          a.setAttribute('rel', Array.from(rel).join(' '));
+        });
+      }
+      ferstMarkExternalLinks();
+      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());
+      }
+    </script>
   </head>
   <body>
     <SiteHeader

package/lib/theme-preview.ts

@@ -0,0 +1,89 @@
+/**
+ * Live theme preview (client-side). Lets an external editing surface — the portal
+ * Theme Studio, or the CMS design-tokens pane — push DRAFT theme settings into a
+ * loaded page over `postMessage`, so the whole site re-themes instantly with no
+ * rebuild. This is the "instant" preview lane of the Change-Request loop (see
+ * myai4-webdev/docs/PDLC-PREVIEW-ARCHITECTURE.md).
+ *
+ * Robust for ANY site: it re-runs the core's own `buildThemeStyle(draft)` in the
+ * browser and swaps a dedicated `<style id="ferst-preview">` — the same output the
+ * server emits at build time — instead of only setting inline `--brand/--ink/
+ * --surface` (which re-derive nothing on a not-yet-themed site). Injected late in
+ * <head>, it out-specifies the server theme block (`:root:root`), so the draft wins.
+ *
+ * Import ONLY from a component <script> (touches window/document). Gated by the
+ * caller to preview mode so it never runs for normal visitors.
+ */
+import { buildThemeStyle } from './themeTokens';
+import type { ThemeSettings } from '../content/schemas';
+
+/** postMessage protocol shared with the portal / CMS preview surfaces. */
+export const PREVIEW_MESSAGES = {
+  /** surface → page: apply this draft theme */
+  theme: 'ferst:preview:theme',
+  /** surface → page: switch light/dark */
+  mode: 'ferst:preview:mode',
+  /** page → surface: listener is live, send the current draft */
+  ready: 'ferst:preview:ready',
+} as const;
+
+const STYLE_ID = 'ferst-preview';
+
+/** Origins allowed to drive the preview (besides same-origin, i.e. the CMS pane). */
+const PORTAL_ORIGINS = [
+  'https://portal.ferst.co.uk',
+  'https://portal-dev.ferst.co.uk',
+  'https://signin.ferst.co.uk',
+  'https://signin-dev.ferst.co.uk',
+];
+
+/** True for same-origin (CMS design-tokens pane) or a known Ferst portal origin. */
+export function isAllowedPreviewOrigin(origin: string): boolean {
+  try {
+    if (origin === window.location.origin) return true;
+  } catch {
+    /* no window (SSR/tests) — fall through to the allowlist */
+  }
+  return PORTAL_ORIGINS.includes(origin);
+}
+
+/** Re-theme the current document from a draft, via the core's own derivation. */
+export function applyPreviewTheme(theme: ThemeSettings): void {
+  const { css, field } = buildThemeStyle(theme);
+  const head = document.head;
+  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+  if (!style) {
+    style = document.createElement('style');
+    style.id = STYLE_ID;
+    head.appendChild(style);
+  } else if (style !== head.lastElementChild) {
+    head.appendChild(style); // keep it last so it always wins over the server block
+  }
+  style.textContent = css;
+  if (field) document.documentElement.dataset.field = field;
+  else delete document.documentElement.dataset.field;
+}
+
+/** Wire the page to receive drafts from an allowed surface, and announce readiness. */
+export function initThemePreviewListener(): void {
+  window.addEventListener('message', (event: MessageEvent) => {
+    if (!isAllowedPreviewOrigin(event.origin)) return;
+    const data = event.data as { type?: string; theme?: ThemeSettings; mode?: string } | null;
+    if (!data || typeof data !== 'object') return;
+    if (data.type === PREVIEW_MESSAGES.theme && data.theme) {
+      try {
+        applyPreviewTheme(data.theme);
+      } catch {
+        /* a malformed draft must never break the preview page */
+      }
+    } else if (data.type === PREVIEW_MESSAGES.mode) {
+      document.documentElement.dataset.theme = data.mode === 'dark' ? 'dark' : 'light';
+    }
+  });
+  // Tell whoever framed us that we're listening, so it can push the current draft.
+  try {
+    window.parent?.postMessage({ type: PREVIEW_MESSAGES.ready }, '*');
+  } catch {
+    /* no parent / blocked — the surface can still push on its own timer */
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.4.3",
+  "version": "0.4.8",
   "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",
@@ -32,6 +32,7 @@
   ],
   "files": [
     "bin",
+    "cms",
     "components",
     "layouts",
     "content",

package/styles/theme.css

@@ -130,3 +130,29 @@
   --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
   --accent-2: color-mix(in oklch, var(--gold) 82%, #fff);
 }
+
+/* ── Global utilities ────────────────────────────────────────────────────────
+   Unscoped helpers usable from any component — including from inside an Astro
+   scoped style, where a parent can't reach a child element's root. */
+
+/* Overlay convention: an element hidden via the `hidden` attribute must never
+   linger in the layout intercepting pointer events. An author `display` rule
+   (e.g. `display:flex` on a fixed banner) otherwise beats the UA `[hidden]`
+   rule, leaving an invisible click-blocker — the cookie-banner / map-tile
+   footgun we hit twice. This is the site-wide safety net; components need no
+   per-element guard of their own. */
+[hidden] { display: none !important; }
+
+/* Card/tile surface — the single home for the "tile" look, driven by the global
+   surface knobs (--radius / --card-border / --shadow-*) so every tile restyles
+   at once, in both themes. Add `.ferst-tile` to a recipe's card element instead
+   of re-inlining these four properties; `.ferst-tile--sm` swaps to the lighter
+   shadow for denser grids. Recipes with a genuinely different surface (image /
+   gradient tiles, tinted panels) keep their own styling. */
+.ferst-tile {
+  background: var(--bg-surface);
+  border: var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+}
+.ferst-tile--sm { box-shadow: var(--shadow-sm); }