ferst-core 0.2.9 → 0.3.0

package/components/CalendarEmbed.astro

@@ -76,42 +76,37 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
 </section>
 
 <script>
-  // Bundled (not is:inline), so it runs once even with multiple calendars on a
-  // page. Wires each embed's consent gate; auto-loads where consent was given.
-  const CONSENT_KEY = 'ferst-calendar-consent';
-  document.querySelectorAll<HTMLElement>('.b-calendar__embed').forEach((el) => {
+  // Bundled (runs once even with multiple calendars on a page). Consent is the
+  // shared site-wide embed consent: accepting the cookie banner (or the footer
+  // panel) auto-loads every embed. The per-embed button is a fallback that grants
+  // the same consent, so one click still loads everything and is remembered.
+  import { hasConsent, setConsent, onConsentChange } from '../lib/consent-client';
+
+  const embeds = document.querySelectorAll<HTMLElement>('.b-calendar__embed');
+
+  function load(el: HTMLElement) {
+    if (el.dataset.loaded === 'true') return;
     const url = el.dataset.embedUrl;
-    if (!url) return;
-    const height = el.dataset.height || '600';
-    const title = el.dataset.title || 'Calendar';
     const frameSlot = el.querySelector<HTMLElement>('.b-calendar__frame');
+    if (!url || !frameSlot) return;
+    const frame = document.createElement('iframe');
+    frame.src = url;
+    frame.title = el.dataset.title || 'Calendar';
+    frame.loading = 'lazy';
+    frame.style.width = '100%';
+    frame.style.height = (el.dataset.height || '600') + 'px';
+    frame.style.border = '0';
+    frameSlot.replaceChildren(frame);
+    el.dataset.loaded = 'true';
     const consent = el.querySelector<HTMLElement>('.b-calendar__consent');
-    const btn = el.querySelector<HTMLButtonElement>('.b-calendar__load');
-
-    function load() {
-      if (el.dataset.loaded === 'true' || !frameSlot) return;
-      const frame = document.createElement('iframe');
-      frame.src = url as string;
-      frame.title = title;
-      frame.loading = 'lazy';
-      frame.style.width = '100%';
-      frame.style.height = height + 'px';
-      frame.style.border = '0';
-      frameSlot.replaceChildren(frame);
-      el.dataset.loaded = 'true';
-      if (consent) consent.hidden = true;
-    }
-
-    try {
-      if (localStorage.getItem(CONSENT_KEY) === '1') load();
-    } catch (_) {}
+    if (consent) consent.hidden = true;
+  }
+  const loadAll = () => embeds.forEach(load);
 
-    btn?.addEventListener('click', () => {
-      try {
-        localStorage.setItem(CONSENT_KEY, '1');
-      } catch (_) {}
-      load();
-    });
+  if (hasConsent()) loadAll();
+  onConsentChange((allowed) => { if (allowed) loadAll(); });
+  embeds.forEach((el) => {
+    el.querySelector<HTMLButtonElement>('.b-calendar__load')?.addEventListener('click', () => setConsent(true));
   });
 </script>
 

package/components/CookieBanner.astro

@@ -0,0 +1,126 @@
+---
+/**
+ * CookieBanner — the site's single cookie consent prompt, shown once on the first
+ * visit until the visitor chooses. Accepting lets embedded third-party content
+ * (Google Calendar, Google Maps) load automatically wherever it appears — no
+ * separate per-embed gate. The footer's "Cookie preferences" panel lets them
+ * change their mind later. Site chrome, rendered by Base after the page.
+ *
+ * Hidden by default; the client script reveals it only when no choice is stored,
+ * so it never flashes for returning visitors.
+ */
+interface Props {
+  /** Link to the cookie policy page (omit to hide the link). */
+  policyHref?: string;
+}
+const { policyHref = '/cookie-policy/' } = Astro.props;
+---
+
+<div class="cookie-banner" id="cookie-banner" role="dialog" aria-label="Cookie notice" aria-live="polite" hidden>
+  <p class="cookie-banner__text">
+    We use a few cookies to run the site and to show embedded content like our
+    calendar and maps.{policyHref && (<> See our <a href={policyHref}>cookie policy</a>.</>)}
+  </p>
+  <div class="cookie-banner__actions">
+    <button type="button" class="cookie-banner__btn cookie-banner__btn--ghost" id="cookie-banner-decline">Decline</button>
+    <button type="button" class="cookie-banner__btn cookie-banner__btn--primary" id="cookie-banner-accept">Accept</button>
+  </div>
+</div>
+
+<script>
+  import { isDecided, setConsent } from '../lib/consent-client';
+
+  const banner = document.getElementById('cookie-banner');
+  if (banner && !isDecided()) {
+    banner.hidden = false;
+    // Next frame so the entry transition runs.
+    requestAnimationFrame(() => banner.classList.add('visible'));
+  }
+
+  function dismiss(granted: boolean) {
+    setConsent(granted);
+    banner?.classList.remove('visible');
+    if (banner) setTimeout(() => { banner.hidden = true; }, 400);
+  }
+
+  document.getElementById('cookie-banner-accept')?.addEventListener('click', () => dismiss(true));
+  document.getElementById('cookie-banner-decline')?.addEventListener('click', () => dismiss(false));
+</script>
+
+<style is:global>
+  .cookie-banner {
+    position: fixed;
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
+    z-index: 210;
+    max-width: 40rem;
+    margin-inline: auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem 1.25rem;
+    padding: 1rem 1.2rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
+    transform: translateY(12px);
+    opacity: 0;
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
+  }
+  .cookie-banner.visible {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cookie-banner { transition: opacity 0.2s ease; transform: none; }
+  }
+  .cookie-banner__text {
+    margin: 0;
+    flex: 1 1 18rem;
+    min-width: 0;
+    font-family: var(--font-body);
+    font-size: 0.85rem;
+    line-height: 1.55;
+    color: var(--muted);
+  }
+  .cookie-banner__text a {
+    color: var(--muted);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .cookie-banner__text a:hover { color: var(--fg); }
+  .cookie-banner__actions {
+    display: flex;
+    gap: 0.6rem;
+    flex-shrink: 0;
+  }
+  .cookie-banner__btn {
+    font: inherit;
+    font-family: var(--font-heading);
+    font-size: 0.85rem;
+    font-weight: 600;
+    padding: 0.5rem 1.1rem;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
+  }
+  .cookie-banner__btn--primary {
+    border: none;
+    background: var(--gold);
+    color: var(--text-light);
+  }
+  .cookie-banner__btn--primary:hover { filter: brightness(0.94); }
+  .cookie-banner__btn--ghost {
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--fg);
+  }
+  .cookie-banner__btn--ghost:hover { background: var(--bg-section); }
+  .cookie-banner__btn:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+</style>

package/components/CookiePreferences.astro

@@ -29,16 +29,16 @@
 
   <div class="cookie-prefs__row">
     <div class="cookie-prefs__row-text">
-      <p class="cookie-prefs__row-title">Google Calendar</p>
-      <p class="cookie-prefs__row-desc">Loads the embedded calendar on the <a href="/calendar/">Calendar</a> page. Google may set its own cookies once it's loaded.</p>
+      <p class="cookie-prefs__row-title">Embedded content</p>
+      <p class="cookie-prefs__row-desc">Lets our <a href="/calendar/">calendar</a> and maps load from Google. Google may set its own cookies once loaded.</p>
     </div>
     <button
       type="button"
       class="cookie-prefs__switch"
-      id="cookie-prefs-calendar-toggle"
+      id="cookie-prefs-embed-toggle"
       role="switch"
       aria-checked="false"
-      aria-label="Allow Google Calendar embed"
+      aria-label="Allow embedded content (maps and calendar)"
     >
       <span class="cookie-prefs__switch-thumb"></span>
     </button>
@@ -197,15 +197,14 @@
 </style>
 
 <script>
-  const CALENDAR_KEY = 'calendar-consent';
+  import { hasConsent, setConsent, onConsentChange } from '../lib/consent-client';
 
   const panel = document.getElementById('cookie-prefs') as HTMLElement;
   const closeBtn = document.getElementById('cookie-prefs-close') as HTMLButtonElement;
-  const calendarToggle = document.getElementById('cookie-prefs-calendar-toggle') as HTMLButtonElement;
+  const embedToggle = document.getElementById('cookie-prefs-embed-toggle') as HTMLButtonElement;
 
   function syncToggle() {
-    const allowed = localStorage.getItem(CALENDAR_KEY) === '1';
-    calendarToggle.setAttribute('aria-checked', String(allowed));
+    embedToggle.setAttribute('aria-checked', String(hasConsent()));
   }
 
   function open() {
@@ -217,13 +216,14 @@
     panel.classList.remove('visible');
   }
 
-  calendarToggle.addEventListener('click', () => {
-    const next = calendarToggle.getAttribute('aria-checked') !== 'true';
-    calendarToggle.setAttribute('aria-checked', String(next));
-    localStorage.setItem(CALENDAR_KEY, next ? '1' : '0');
-    document.dispatchEvent(new CustomEvent('calendar-consent-changed', { detail: { allowed: next } }));
+  embedToggle.addEventListener('click', () => {
+    setConsent(embedToggle.getAttribute('aria-checked') !== 'true');
+    syncToggle();
   });
 
+  // Keep the switch in sync if consent changes elsewhere (e.g. the banner).
+  onConsentChange(syncToggle);
+
   closeBtn.addEventListener('click', close);
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && panel.classList.contains('visible')) close();

package/components/recipes/Faq.astro

@@ -3,12 +3,16 @@
  *  question/answer items. Uses native <details>/<summary> — accessible and
  *  interactive with zero JavaScript. Composes the Heading primitive. */
 import Heading from '../blocks/Heading.astro';
+import { inlineMarkdown } from '../../lib/inline-markdown';
 
 interface Props {
   title?: string;
   items?: { question: string; answer: string }[];
 }
 const { title, items = [] } = Astro.props;
+// Answers may carry a link or bold via a tiny markdown subset (inlineMarkdown),
+// split into paragraphs on blank lines. Trusted editor/CMS text, sanitised.
+const paragraphs = (answer: string) => answer.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
 ---
 
 <section class="b-faq">
@@ -17,7 +21,9 @@ const { title, items = [] } = Astro.props;
     {items.map((item) => (
       <details class="b-faq__item">
         <summary class="b-faq__q">{item.question}</summary>
-        <div class="b-faq__a"><p>{item.answer}</p></div>
+        <div class="b-faq__a">
+          {paragraphs(item.answer).map((p) => <p set:html={inlineMarkdown(p)} />)}
+        </div>
       </details>
     ))}
   </div>

package/components/recipes/MapEmbed.astro

@@ -71,43 +71,37 @@ const safe = isSafeEmbedUrl(embedUrl);
 </section>
 
 <script>
-  // Bundled (not is:inline), so it runs once even with multiple maps on a page.
-  // Wires each embed's consent gate; auto-loads where consent was given.
-  const CONSENT_KEY = 'ferst-map-consent';
-  document.querySelectorAll<HTMLElement>('.b-map__embed').forEach((el) => {
+  // Bundled (runs once even with multiple maps on a page). Uses the shared site
+  // embed consent: accepting the cookie banner (or the footer panel) auto-loads
+  // every embed. The per-embed button grants that same consent as a fallback.
+  import { hasConsent, setConsent, onConsentChange } from '../../lib/consent-client';
+
+  const embeds = document.querySelectorAll<HTMLElement>('.b-map__embed');
+
+  function load(el: HTMLElement) {
+    if (el.dataset.loaded === 'true') return;
     const url = el.dataset.embedUrl;
-    if (!url) return;
-    const height = el.dataset.height || '450';
-    const title = el.dataset.title || 'Map';
     const frameSlot = el.querySelector<HTMLElement>('.b-map__frame');
+    if (!url || !frameSlot) return;
+    const frame = document.createElement('iframe');
+    frame.src = url;
+    frame.title = el.dataset.title || 'Map';
+    frame.loading = 'lazy';
+    frame.referrerPolicy = 'no-referrer-when-downgrade';
+    frame.style.width = '100%';
+    frame.style.height = (el.dataset.height || '450') + 'px';
+    frame.style.border = '0';
+    frameSlot.replaceChildren(frame);
+    el.dataset.loaded = 'true';
     const consent = el.querySelector<HTMLElement>('.b-map__consent');
-    const btn = el.querySelector<HTMLButtonElement>('.b-map__load');
-
-    function load() {
-      if (el.dataset.loaded === 'true' || !frameSlot) return;
-      const frame = document.createElement('iframe');
-      frame.src = url as string;
-      frame.title = title;
-      frame.loading = 'lazy';
-      frame.referrerPolicy = 'no-referrer-when-downgrade';
-      frame.style.width = '100%';
-      frame.style.height = height + 'px';
-      frame.style.border = '0';
-      frameSlot.replaceChildren(frame);
-      el.dataset.loaded = 'true';
-      if (consent) consent.hidden = true;
-    }
-
-    try {
-      if (localStorage.getItem(CONSENT_KEY) === '1') load();
-    } catch (_) {}
+    if (consent) consent.hidden = true;
+  }
+  const loadAll = () => embeds.forEach(load);
 
-    btn?.addEventListener('click', () => {
-      try {
-        localStorage.setItem(CONSENT_KEY, '1');
-      } catch (_) {}
-      load();
-    });
+  if (hasConsent()) loadAll();
+  onConsentChange((allowed) => { if (allowed) loadAll(); });
+  embeds.forEach((el) => {
+    el.querySelector<HTMLButtonElement>('.b-map__load')?.addEventListener('click', () => setConsent(true));
   });
 </script>
 

package/content/blocks.ts

@@ -644,6 +644,23 @@ export const pageSchema = z.object({
    * bespoke page may have none.
    */
   templateId: z.string().optional(),
+  /**
+   * Editor change-requests captured in the CMS — the seed of AI-driven editing
+   * ([[ferst_editing_ai_first_pdlc]]): rather than let editors edit block JSON
+   * directly (easy to break), they describe a desired change against the page and
+   * it's stored here for an agent to action later → PR → human verify. NEVER
+   * rendered; carried through the schema so a CMS save preserves it.
+   */
+  requests: z
+    .array(
+      z.object({
+        text: z.string(),
+        at: z.string().optional(),
+        by: z.string().optional(),
+        status: z.enum(['open', 'done']).default('open'),
+      }),
+    )
+    .default([]),
   /** Keep the JSON in the repo but exclude it from the build. */
   draft: z.boolean().default(false),
   blocks: z.array(blockSchema).default([]),

package/layouts/Base.astro

@@ -24,6 +24,7 @@ import '../styles/fonts.css';
 import SiteHeader from '../components/SiteHeader.astro';
 import SiteFooter from '../components/SiteFooter.astro';
 import CookiePreferences from '../components/CookiePreferences.astro';
+import CookieBanner from '../components/CookieBanner.astro';
 import StickyCallout from '../components/StickyCallout.astro';
 import SecondaryLogo from '../components/SecondaryLogo.astro';
 import { loadSiteSettings } from '../lib/siteSettings';
@@ -170,6 +171,7 @@ const metaDescription = description ?? identity.description;
     />
 
     <CookiePreferences />
+    <CookieBanner />
 
     <StickyCallout {...callout} />
 

package/lib/consent-client.ts

@@ -0,0 +1,46 @@
+/**
+ * Client-only consent state for embedded third-party content (Google Calendar,
+ * Google Maps). One shared key + event so the cookie banner, the footer's cookie
+ * preferences panel, and every embed on the page stay in sync: accept once (via
+ * the banner) and every embed loads — no separate per-embed gate.
+ *
+ * Import this ONLY from component `<script>` blocks (it touches localStorage /
+ * document). Every accessor is wrapped so a blocked/absent storage never throws.
+ */
+export const CONSENT_KEY = 'ferst-embed-consent';
+export const CONSENT_EVENT = 'ferst-embed-consent-changed';
+
+/** True once the visitor has explicitly accepted embedded content. */
+export function hasConsent(): boolean {
+  try {
+    return localStorage.getItem(CONSENT_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+/** True once the visitor has made ANY choice (accept or decline) — hides the banner. */
+export function isDecided(): boolean {
+  try {
+    return localStorage.getItem(CONSENT_KEY) !== null;
+  } catch {
+    return false;
+  }
+}
+
+/** Record a choice and broadcast it so open embeds react immediately. */
+export function setConsent(granted: boolean): void {
+  try {
+    localStorage.setItem(CONSENT_KEY, granted ? '1' : '0');
+  } catch {
+    /* storage blocked — the event below still drives this page */
+  }
+  document.dispatchEvent(new CustomEvent(CONSENT_EVENT, { detail: { allowed: granted } }));
+}
+
+/** Subscribe to consent changes (fires with the new allowed state). */
+export function onConsentChange(cb: (allowed: boolean) => void): void {
+  document.addEventListener(CONSENT_EVENT, (e) => {
+    cb((e as CustomEvent).detail?.allowed === true);
+  });
+}

package/lib/inline-markdown.ts

@@ -0,0 +1,52 @@
+/**
+ * inlineMarkdown — render a *tiny*, safe subset of markdown from trusted editor/CMS
+ * text: links `[label](href)`, bold `**text**`, and single newlines → `<br>`.
+ * Everything is HTML-escaped first, and only safe href schemes (http(s), root-
+ * relative, mailto, tel, in-page #anchors) become links — an unsafe href renders
+ * as literal text. The result is safe to drop into `set:html` for trusted content.
+ *
+ * This exists so recipes that show a line or two of editor copy (FAQ answers,
+ * notices) can carry a link without a full markdown pipeline — and without the
+ * `[text](url)` showing through as literal characters.
+ */
+const ESCAPE: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+};
+function escapeHtml(s: string): string {
+  return s.replace(/[&<>"']/g, (c) => ESCAPE[c]);
+}
+
+/** Only these href schemes are allowed to become real links. */
+const SAFE_HREF = /^(?:https?:\/\/|\/|mailto:|tel:|#)/i;
+
+const LINK_RE = /\[([^\]]+)\]\(([^)\s]+)\)/g;
+
+/** Bold + single-newline breaks, applied to already-escaped text. */
+function inlineFormat(escaped: string): string {
+  return escaped.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>');
+}
+
+export function inlineMarkdown(text: string | undefined | null): string {
+  if (!text) return '';
+  let out = '';
+  let last = 0;
+  let m: RegExpExecArray | null;
+  LINK_RE.lastIndex = 0;
+  while ((m = LINK_RE.exec(text))) {
+    out += inlineFormat(escapeHtml(text.slice(last, m.index)));
+    const label = inlineFormat(escapeHtml(m[1]));
+    const href = m[2];
+    if (SAFE_HREF.test(href)) {
+      out += `<a href="${escapeHtml(href)}">${label}</a>`;
+    } else {
+      out += inlineFormat(escapeHtml(m[0])); // unsafe scheme → keep literal
+    }
+    last = m.index + m[0].length;
+  }
+  out += inlineFormat(escapeHtml(text.slice(last)));
+  return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.2.9",
+  "version": "0.3.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",