ferst-core 0.2.3 → 0.2.5

package/bin/check-thin.mjs

@@ -15,7 +15,7 @@ const CORE_OWNED_DIRS = ['components', 'layouts', 'lib', 'utils', 'styles'];
 // Files under src/content/ that are the core's contract, not client data.
 // (Directories like content/posts/ and content/pages/ are client DATA — allowed;
 // these are the single-source contract FILES a client must import, never copy.)
-const CORE_OWNED_CONTENT_FILES = ['schemas.ts', 'collections.ts', 'blocks.ts', 'posts.ts', 'calendar.ts'];
+const CORE_OWNED_CONTENT_FILES = ['schemas.ts', 'collections.ts', 'blocks.ts', 'posts.ts', 'calendar.ts', 'callout.ts'];
 
 const toPosix = (s) => s.replace(/\\/g, '/');
 

package/components/BlockRenderer.astro

@@ -37,6 +37,10 @@ import Tabs from './recipes/Tabs.astro';
 import Announcement from './recipes/Announcement.astro';
 import Bento from './recipes/Bento.astro';
 import Marquee from './recipes/Marquee.astro';
+import LatestPosts from './recipes/LatestPosts.astro';
+import MapEmbed from './recipes/MapEmbed.astro';
+import Table from './recipes/Table.astro';
+import Notice from './recipes/Notice.astro';
 
 interface Props {
   blocks: Block[];
@@ -76,6 +80,10 @@ const registry: Record<BlockType, any> = {
   announcement: Announcement,
   bento: Bento,
   marquee: Marquee,
+  latestPosts: LatestPosts,
+  mapEmbed: MapEmbed,
+  table: Table,
+  notice: Notice,
 };
 ---
 

package/components/StickyCallout.astro

@@ -0,0 +1,202 @@
+---
+/**
+ * StickyCallout — site-level chrome: a fixed corner launcher that expands a small
+ * panel with one key piece of info + an optional link. The reusable, industry-
+ * standard form of a "mass times / opening hours / book now / contact" widget
+ * (like a support-chat launcher): pinned to the corner, on every page, staying put
+ * 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.
+ */
+import Icon from './Icon.astro';
+import { isIconKey } from '../lib/icons';
+
+interface Props {
+  enabled?: boolean;
+  label?: string;
+  icon?: string;
+  title?: string;
+  text?: string;
+  link?: { label: string; href: string };
+  position?: 'bottom-right' | 'bottom-left';
+  dismissible?: boolean;
+  id?: string;
+}
+const {
+  enabled = false,
+  label = 'Quick info',
+  icon = 'calendar',
+  title = '',
+  text = '',
+  link,
+  position = 'bottom-right',
+  dismissible = true,
+  id = 'default',
+} = Astro.props;
+
+const hasContent = enabled && (title.trim() !== '' || text.trim() !== '');
+// Blank lines separate paragraphs (same convention as the prose block).
+const paras = text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
+---
+
+{hasContent && (
+  <details class="b-callout" data-position={position} data-id={id}>
+    <summary class="b-callout__trigger">
+      {isIconKey(icon) && (
+        <span class="b-callout__trigger-icon" aria-hidden="true"><Icon name={icon} size={20} /></span>
+      )}
+      <span class="b-callout__trigger-label">{label}</span>
+    </summary>
+    <div class="b-callout__panel" role="group" aria-label={title || label}>
+      <div class="b-callout__head">
+        {title && <p class="b-callout__title">{title}</p>}
+        <button type="button" class="b-callout__close" aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+      {paras.map((p) => <p class="b-callout__text">{p}</p>)}
+      {link && (
+        <a class="b-callout__link" href={link.href}>{link.label}</a>
+      )}
+      {dismissible && (
+        <button type="button" class="b-callout__dismiss">Don’t show this again</button>
+      )}
+    </div>
+  </details>
+)}
+
+<script>
+  // Bundled (runs once). Each callout: honour a prior dismissal, wire close (sets
+  // the <details> shut) and "don't show again" (hide + remember per id).
+  document.querySelectorAll<HTMLDetailsElement>('.b-callout').forEach((el) => {
+    const id = el.dataset.id || 'default';
+    const KEY = 'ferst-callout-dismissed:' + id;
+    try {
+      if (localStorage.getItem(KEY) === '1') {
+        el.remove();
+        return;
+      }
+    } catch (_) {}
+
+    el.querySelector<HTMLButtonElement>('.b-callout__close')?.addEventListener('click', () => {
+      el.open = false;
+    });
+    el.querySelector<HTMLButtonElement>('.b-callout__dismiss')?.addEventListener('click', () => {
+      try {
+        localStorage.setItem(KEY, '1');
+      } catch (_) {}
+      el.remove();
+    });
+  });
+</script>
+
+<style>
+  .b-callout {
+    position: fixed;
+    bottom: clamp(1rem, 3vw, 1.5rem);
+    z-index: 60;
+    max-width: calc(100vw - 2rem);
+  }
+  .b-callout[data-position='bottom-right'] {
+    right: clamp(1rem, 3vw, 1.5rem);
+  }
+  .b-callout[data-position='bottom-left'] {
+    left: clamp(1rem, 3vw, 1.5rem);
+  }
+  /* Trigger — a rounded pill launcher (icon + label). */
+  .b-callout__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.6rem 1.05rem;
+    background: var(--gold);
+    color: var(--text-light);
+    border-radius: 999px;
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 0.95rem;
+    list-style: none;
+    user-select: none;
+    transition: filter 0.15s ease, transform 0.15s ease;
+  }
+  .b-callout__trigger::-webkit-details-marker { display: none; }
+  .b-callout__trigger:hover { filter: brightness(0.95); transform: translateY(-1px); }
+  .b-callout__trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
+  .b-callout__trigger-icon { display: inline-flex; }
+
+  /* Panel — a card floating above the pill; opens upward from the corner. */
+  .b-callout__panel {
+    position: absolute;
+    bottom: calc(100% + 0.6rem);
+    width: min(20rem, calc(100vw - 2rem));
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem 1.1rem 1.15rem;
+    background: var(--bg-surface);
+    color: var(--fg);
+    border: var(--card-border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-md);
+    text-align: start;
+  }
+  .b-callout[data-position='bottom-right'] .b-callout__panel { right: 0; }
+  .b-callout[data-position='bottom-left'] .b-callout__panel { left: 0; }
+
+  .b-callout__head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+  .b-callout__title {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 1.05rem;
+    color: var(--fg);
+  }
+  .b-callout__close {
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    color: var(--muted);
+    font-size: 1.4rem;
+    line-height: 1;
+    padding: 0 0.15rem;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+  }
+  .b-callout__close:hover { color: var(--fg); }
+  .b-callout__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
+  .b-callout__text {
+    margin: 0;
+    color: var(--muted);
+    font-size: 0.95rem;
+    line-height: 1.55;
+  }
+  .b-callout__link {
+    margin-top: 0.15rem;
+    color: var(--gold);
+    font-weight: 600;
+  }
+  .b-callout__dismiss {
+    margin-top: 0.35rem;
+    align-self: flex-start;
+    border: none;
+    background: transparent;
+    color: var(--muted);
+    font-size: 0.8rem;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  .b-callout__dismiss:hover { color: var(--fg); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .b-callout__trigger { transition: none; }
+  }
+</style>

package/components/recipes/LatestPosts.astro

@@ -0,0 +1,182 @@
+---
+/**
+ * LatestPosts — a Level-2 recipe that surfaces the posts capability inside a page:
+ * the N most-recent published posts (optionally filtered to a tag), as a card grid
+ * or a compact list, with a "view all" link. This is the block that bridges the
+ * posts *capability* into the block *system*, so a homepage "Latest news" needs no
+ * per-client custom code. The posts are queried at build time from the client's
+ * own posts collection (empty state renders when there are none).
+ */
+import PostCard from '../PostCard.astro';
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+import { getIndexPosts, getPostsByTag } from '../../lib/posts';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  limit?: number;
+  tag?: string;
+  layout?: 'grid' | 'list';
+  viewAllHref?: string;
+  viewAllLabel?: string;
+}
+const {
+  title,
+  intro,
+  limit = 3,
+  tag,
+  layout = 'grid',
+  viewAllHref = '/posts',
+  viewAllLabel = 'All posts',
+} = Astro.props;
+
+const all = tag ? await getPostsByTag(tag) : await getIndexPosts();
+const posts = all.slice(0, Math.max(1, limit));
+
+const fmt = (date: Date | string) => {
+  const d = date instanceof Date ? date : new Date(date);
+  return Number.isNaN(d.valueOf())
+    ? { iso: undefined as string | undefined, label: '' }
+    : { iso: d.toISOString().slice(0, 10), label: d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }) };
+};
+---
+
+<section class="b-latest-posts">
+  {(title || intro) && (
+    <div class="b-latest-posts__head">
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-latest-posts__intro">{intro}</p>}
+    </div>
+  )}
+
+  {posts.length === 0 ? (
+    <p class="b-latest-posts__empty">No posts yet.</p>
+  ) : layout === 'list' ? (
+    <ul class="b-latest-posts__list">
+      {posts.map((p) => {
+        const { iso, label } = fmt(p.data.date);
+        return (
+          <li class="b-latest-posts__row">
+            <a class="b-latest-posts__row-link" href={`/posts/${p.slug}`}>
+              <span class="b-latest-posts__row-title">{p.data.title}</span>
+              {label && <time class="b-latest-posts__row-date" datetime={iso}>{label}</time>}
+            </a>
+            {p.data.summary && <p class="b-latest-posts__row-summary">{p.data.summary}</p>}
+          </li>
+        );
+      })}
+    </ul>
+  ) : (
+    <div class="b-latest-posts__grid">
+      {posts.map((p) => (
+        <PostCard
+          href={`/posts/${p.slug}`}
+          title={p.data.title}
+          date={p.data.date}
+          summary={p.data.summary}
+          heroImage={p.data.heroImage}
+          tagLabels={p.data.tags}
+        />
+      ))}
+    </div>
+  )}
+
+  {posts.length > 0 && viewAllHref && (
+    <div class="b-latest-posts__more">
+      <Button href={viewAllHref} variant="secondary" size="sm">{viewAllLabel}</Button>
+    </div>
+  )}
+</section>
+
+<style>
+  .b-latest-posts {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-latest-posts__head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+  .b-latest-posts__intro {
+    margin: 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--max);
+  }
+  /* Grid — mirrors the posts index/tag layout (any image ratio cropped by PostCard). */
+  .b-latest-posts__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  @media (min-width: 40em) {
+    .b-latest-posts__grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (min-width: 60em) {
+    .b-latest-posts__grid { grid-template-columns: repeat(3, 1fr); }
+  }
+  /* Compact list — no images; a tidy dated index for sidebars or short homepages. */
+  .b-latest-posts__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .b-latest-posts__row {
+    padding: 0.9rem 0;
+    border-top: var(--card-border);
+  }
+  .b-latest-posts__row:first-child {
+    border-top: 0;
+  }
+  .b-latest-posts__row-link {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.25rem 1rem;
+    color: var(--fg);
+    text-decoration: none;
+  }
+  .b-latest-posts__row-link:hover .b-latest-posts__row-title {
+    color: var(--gold);
+  }
+  .b-latest-posts__row-title {
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 1.05rem;
+  }
+  .b-latest-posts__row-date {
+    color: var(--muted);
+    font-size: 0.85rem;
+    white-space: nowrap;
+  }
+  .b-latest-posts__row-summary {
+    margin: 0.35rem 0 0;
+    color: var(--muted);
+    font-size: 0.95rem;
+    line-height: 1.55;
+  }
+  .b-latest-posts__empty {
+    margin: 0;
+    color: var(--muted);
+  }
+  .b-latest-posts__more {
+    display: flex;
+  }
+  /* Follow the page's content-alignment for the "view all" action. */
+  :global([data-content-align='center']) .b-latest-posts__more {
+    justify-content: center;
+  }
+  :global([data-content-align='end']) .b-latest-posts__more {
+    justify-content: flex-end;
+  }
+</style>

package/components/recipes/MapEmbed.astro

@@ -0,0 +1,188 @@
+---
+/**
+ * MapEmbed — a consent-gated external map embed (e.g. Google Maps), the sibling of
+ * 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.
+ *
+ * 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.
+ */
+import { isSafeEmbedUrl } from '../../content/calendar';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  embedUrl?: string;
+  publicUrl?: string;
+  height?: number;
+  provider?: string;
+}
+const {
+  title = '',
+  intro = '',
+  embedUrl = '',
+  publicUrl = '',
+  height = 450,
+  provider = 'Google Maps',
+} = Astro.props;
+
+const safe = isSafeEmbedUrl(embedUrl);
+---
+
+<section class="b-map">
+  {title && <h2 class="b-map__title">{title}</h2>}
+  {intro && <p class="b-map__intro">{intro}</p>}
+
+  {!embedUrl ? (
+    <p class="b-map__note">The map isn't set up yet.</p>
+  ) : !safe ? (
+    <p class="b-map__note">
+      This map can't be displayed here.
+      {publicUrl && (
+        <> <a href={publicUrl} target="_blank" rel="noopener">Open it in a new tab</a>.</>
+      )}
+    </p>
+  ) : (
+    <div
+      class="b-map__embed"
+      data-embed-url={embedUrl}
+      data-height={String(height)}
+      data-title={title || 'Map'}
+    >
+      <div class="b-map__consent">
+        <p class="b-map__consent-text">
+          This map is provided by <strong>{provider}</strong>. Loading it shares your
+          device's data (such as your IP address) with {provider}.
+        </p>
+        <div class="b-map__actions">
+          <button type="button" class="b-map__load">Load map</button>
+          {publicUrl && (
+            <a class="b-map__link" href={publicUrl} target="_blank" rel="noopener">
+              Open in a new tab instead
+            </a>
+          )}
+        </div>
+      </div>
+      <div class="b-map__frame"></div>
+    </div>
+  )}
+</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) => {
+    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');
+    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 (_) {}
+
+    btn?.addEventListener('click', () => {
+      try {
+        localStorage.setItem(CONSENT_KEY, '1');
+      } catch (_) {}
+      load();
+    });
+  });
+</script>
+
+<style>
+  .b-map {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-map__title {
+    margin: 0;
+  }
+  .b-map__intro,
+  .b-map__note {
+    margin: 0;
+    color: var(--muted);
+  }
+  .b-map__note a,
+  .b-map__link {
+    color: var(--gold);
+    font-weight: 600;
+  }
+  .b-map__frame :global(iframe) {
+    display: block;
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+  }
+  .b-map__consent {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 2.5rem 1.5rem;
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-section);
+    text-align: center;
+    align-items: center;
+  }
+  .b-map__consent-text {
+    margin: 0;
+    max-width: 46ch;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-map__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1.25rem;
+    align-items: center;
+    justify-content: center;
+  }
+  .b-map__load {
+    font: inherit;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    padding: 0.6rem 1.4rem;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: var(--gold);
+    color: var(--text-light);
+    cursor: pointer;
+    transition: filter 0.15s ease;
+  }
+  .b-map__load:hover {
+    filter: brightness(0.94);
+  }
+  .b-map__load:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+  .b-map__consent[hidden] {
+    display: none;
+  }
+</style>

package/components/recipes/Notice.astro

@@ -0,0 +1,89 @@
+---
+/**
+ * Notice — a Level-2 recipe: an inline highlighted info box (optional icon +
+ * title + body + optional link) that sets a passage apart from the surrounding
+ * prose — a "reporting a concern", "please note", "how to book" callout. Two
+ * tones (accent / neutral) in keeping with badge/announcement; token-driven, so
+ * it follows the brand and both themes. The page-level sibling of the corner
+ * StickyCallout (this one sits in the content flow).
+ */
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+
+interface Props {
+  tone?: 'accent' | 'neutral';
+  icon?: string;
+  title?: string;
+  text: string;
+  link?: { label: string; href: string };
+}
+const { tone = 'accent', icon, title, text, link } = Astro.props;
+const paras = text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
+---
+
+<aside class="b-notice" data-tone={tone}>
+  {icon && isIconKey(icon) && (
+    <span class="b-notice__icon" aria-hidden="true"><Icon name={icon} size={22} /></span>
+  )}
+  <div class="b-notice__body">
+    {title && <p class="b-notice__title">{title}</p>}
+    {paras.map((p) => <p class="b-notice__text">{p}</p>)}
+    {link && <a class="b-notice__link" href={link.href}>{link.label}</a>}
+  </div>
+</aside>
+
+<style>
+  .b-notice {
+    display: flex;
+    gap: 0.85rem;
+    align-items: flex-start;
+    max-width: var(--max);
+    margin-inline: auto;
+    padding: 1.1rem 1.25rem;
+    border-radius: var(--radius);
+    border-inline-start: 4px solid var(--gold);
+  }
+  .b-notice[data-tone='accent'] {
+    background: var(--gold-light);
+    border-inline-start-color: var(--gold);
+  }
+  .b-notice[data-tone='neutral'] {
+    background: var(--bg-section);
+    border-inline-start-color: var(--accent);
+  }
+  /* On a centred page, keep the box a readable width but centre it as a block;
+     text inside stays left (a centred info box reads badly). */
+  :global([data-content-align='center']) .b-notice {
+    text-align: start;
+  }
+  .b-notice__icon {
+    display: inline-flex;
+    color: var(--gold);
+    margin-top: 0.1rem;
+    flex-shrink: 0;
+  }
+  .b-notice__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    min-width: 0;
+  }
+  .b-notice__title {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 1.05rem;
+    color: var(--fg);
+  }
+  .b-notice__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-notice__link {
+    margin-top: 0.1rem;
+    align-self: flex-start;
+    color: var(--gold);
+    font-weight: 600;
+  }
+</style>

package/components/recipes/Table.astro

@@ -0,0 +1,97 @@
+---
+/**
+ * Table — a Level-2 recipe: a simple data table (header row + body rows) under an
+ * optional heading/intro. Token-driven, striped, and horizontally scrollable on
+ * narrow screens so it never breaks the page width. For structured data our other
+ * blocks can't carry cleanly — fees, opening hours, a cookies list, comparisons.
+ */
+import Heading from '../blocks/Heading.astro';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  columns?: string[];
+  rows?: string[][];
+}
+const { title, intro, columns = [], rows = [] } = Astro.props;
+---
+
+<section class="b-table">
+  {(title || intro) && (
+    <div class="b-table__head">
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-table__intro">{intro}</p>}
+    </div>
+  )}
+  <div class="b-table__scroll">
+    <table class="b-table__table">
+      {columns.length > 0 && (
+        <thead>
+          <tr>{columns.map((c) => <th scope="col">{c}</th>)}</tr>
+        </thead>
+      )}
+      <tbody>
+        {rows.map((row) => (
+          <tr>{row.map((cell) => <td>{cell}</td>)}</tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+</section>
+
+<style>
+  .b-table {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-table__head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+  .b-table__intro {
+    margin: 0;
+    color: var(--muted);
+    max-width: var(--max);
+  }
+  /* Its own scroll container so a wide table scrolls sideways instead of forcing
+     the whole page to (the body never scrolls horizontally). */
+  .b-table__scroll {
+    overflow-x: auto;
+    border: var(--card-border);
+    border-radius: var(--radius);
+  }
+  .b-table__table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.95rem;
+  }
+  .b-table__table th,
+  .b-table__table td {
+    padding: 0.7rem 0.9rem;
+    text-align: start;
+    vertical-align: top;
+    border-bottom: 1px solid var(--line, var(--card-border-color, rgba(0,0,0,0.08)));
+  }
+  .b-table__table thead th {
+    font-family: var(--font-heading);
+    font-weight: 600;
+    color: var(--fg);
+    background: var(--bg-section);
+    white-space: nowrap;
+  }
+  .b-table__table tbody td {
+    color: var(--muted);
+    line-height: 1.55;
+  }
+  .b-table__table tbody tr:nth-child(even) td {
+    background: var(--bg-section);
+  }
+  .b-table__table tbody tr:last-child td {
+    border-bottom: 0;
+  }
+</style>

package/content/blocks.ts

@@ -380,6 +380,68 @@ export const marqueeBlock = z.object({
   speed: z.enum(['slow', 'normal', 'fast']).default('normal'),
 });
 
+/** LatestPosts — a capability-backed recipe: the N most-recent published posts
+ *  (optionally filtered to a `tag`) as a card grid or a compact list, with a
+ *  "view all" link. Unlike other recipes it carries no content of its own — it
+ *  queries the client's posts collection at build time — so it's the bridge from
+ *  the posts capability into the page/block system (no per-client custom code). */
+export const latestPostsBlock = z.object({
+  type: z.literal('latestPosts'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  limit: z.number().int().min(1).max(12).default(3),
+  /** Filter to a single tag slug; omit for the main index (minus excluded tags). */
+  tag: z.string().optional(),
+  layout: z.enum(['grid', 'list']).default('grid'),
+  /** "View all" target + label (the posts index by default). */
+  viewAllHref: z.string().default('/posts'),
+  viewAllLabel: z.string().default('All posts'),
+});
+
+/** MapEmbed — a consent-gated external map (e.g. Google Maps), the sibling of the
+ *  calendar embed: nothing loads from the provider until the visitor opts in, so
+ *  no third-party request fires on page load. `embedUrl` must be https; an unset
+ *  or unsafe URL degrades to a friendly note + optional "open in Maps" link. */
+export const mapEmbedBlock = z.object({
+  type: z.literal('mapEmbed'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  /** The map iframe src (an https embed URL). Blank → a "not set up yet" note. */
+  embedUrl: z.string().default(''),
+  /** Link to open the location in the provider's app/site (a no-embed fallback). */
+  publicUrl: z.string().default(''),
+  height: z.number().int().min(150).max(1200).default(450),
+  /** Provider name shown in the consent notice ("shared with …"). */
+  provider: z.string().default('Google Maps'),
+});
+
+/** Table — a simple data table (header row + body rows) for structured data our
+ *  other blocks can't carry cleanly (fees, opening hours, a cookies list). Scrolls
+ *  horizontally on narrow screens so it never breaks the page width. */
+export const tableBlock = z.object({
+  type: z.literal('table'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  columns: z.array(z.string()).default([]),
+  rows: z.array(z.array(z.string())).default([]),
+});
+
+/** Notice — an inline highlighted info box (icon? + title? + body + link?) that
+ *  sets a passage apart from prose ("reporting a concern", "please note"). Two
+ *  tones (accent / neutral); the in-flow sibling of the corner StickyCallout. */
+export const noticeBlock = z.object({
+  type: z.literal('notice'),
+  enabled: z.boolean().default(true),
+  tone: z.enum(['accent', 'neutral']).default('accent'),
+  icon: z.string().optional(),
+  title: z.string().optional(),
+  text: z.string(),
+  link: z.object({ label: z.string(), href: z.string() }).optional(),
+});
+
 export type RecipeBlock =
   | z.infer<typeof heroBlock>
   | z.infer<typeof featureCardsBlock>
@@ -398,7 +460,11 @@ export type RecipeBlock =
   | z.infer<typeof tabsBlock>
   | z.infer<typeof announcementBlock>
   | z.infer<typeof bentoBlock>
-  | z.infer<typeof marqueeBlock>;
+  | z.infer<typeof marqueeBlock>
+  | z.infer<typeof latestPostsBlock>
+  | z.infer<typeof mapEmbedBlock>
+  | z.infer<typeof tableBlock>
+  | z.infer<typeof noticeBlock>;
 
 /* ── Level-1 layout / container primitives ─────────────────────────────────
  * These hold child blocks, so the schema is **recursive** (a container's
@@ -502,6 +568,10 @@ export const blockSchema = z.discriminatedUnion('type', [
   announcementBlock,
   bentoBlock,
   marqueeBlock,
+  latestPostsBlock,
+  mapEmbedBlock,
+  tableBlock,
+  noticeBlock,
   sectionBlock,
   gridBlock,
   stackBlock,

package/content/callout.ts

@@ -0,0 +1,32 @@
+// 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
+// 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
+// every page as you scroll. Disabled by default — a client opts in via the CMS.
+import { z } from 'zod';
+
+/** Sticky-callout settings — one focused CMS pane (a singleton per site). */
+export const calloutSettingsSchema = z.object({
+  /** Off by default; a client turns it on when they have something to surface. */
+  enabled: z.boolean().default(false),
+  /** The launcher pill's text. */
+  label: z.string().default('Quick info'),
+  /** Launcher icon (an icon-registry key; unknown keys just render no icon). */
+  icon: z.string().default('calendar'),
+  /** Panel heading. */
+  title: z.string().default(''),
+  /** Panel body; blank lines separate paragraphs. Blank (with no title) ⇒ the
+   *  callout renders nothing even when enabled. */
+  text: z.string().default(''),
+  /** Optional call-to-action link in the panel (e.g. "See the full calendar"). */
+  link: z.object({ label: z.string(), href: z.string() }).optional(),
+  /** Which corner it pins to. */
+  position: z.enum(['bottom-right', 'bottom-left']).default('bottom-right'),
+  /** Offer a "don't show again" action (remembered per `id` in localStorage). */
+  dismissible: z.boolean().default(true),
+  /** localStorage key suffix so a dismissed callout stays dismissed. */
+  id: z.string().default('default'),
+});
+
+export type CalloutSettings = z.infer<typeof calloutSettingsSchema>;

package/content/collections.ts

@@ -16,6 +16,7 @@ import {
 import { pageSchema } from './blocks';
 import { postSchema, tagSchema, postsSettingsSchema } from './posts';
 import { calendarSettingsSchema } from './calendar';
+import { calloutSettingsSchema } from './callout';
 
 const siteSettings = defineCollection({ type: 'data', schema: siteSettingsSchema });
 const logoSettings = defineCollection({ type: 'data', schema: logoSettingsSchema });
@@ -37,6 +38,9 @@ const postsSettings = defineCollection({ type: 'data', schema: postsSettingsSche
 // The calendar capability (see content/calendar.ts): a consent-gated embed.
 const calendarSettings = defineCollection({ type: 'data', schema: calendarSettingsSchema });
 
+// The sticky-callout capability (see content/callout.ts): a corner launcher (chrome).
+const calloutSettings = defineCollection({ type: 'data', schema: calloutSettingsSchema });
+
 export const collections = {
   siteSettings,
   logoSettings,
@@ -48,4 +52,5 @@ export const collections = {
   tags,
   postsSettings,
   calendarSettings,
+  calloutSettings,
 };

package/layouts/Base.astro

@@ -24,8 +24,10 @@ import '../styles/fonts.css';
 import SiteHeader from '../components/SiteHeader.astro';
 import SiteFooter from '../components/SiteFooter.astro';
 import CookiePreferences from '../components/CookiePreferences.astro';
+import StickyCallout from '../components/StickyCallout.astro';
 import SecondaryLogo from '../components/SecondaryLogo.astro';
 import { loadSiteSettings } from '../lib/siteSettings';
+import { getCalloutSettings } from '../lib/callout';
 import { buildThemeStyle } from '../lib/themeTokens';
 
 interface Props {
@@ -56,6 +58,9 @@ const {
 const settings = await loadSiteSettings();
 const { identity, contact, navigation, theme } = settings;
 
+// Site-level corner launcher (chrome) — off unless a client configures it.
+const callout = await getCalloutSettings();
+
 const path = Astro.url.pathname;
 
 // The brand → an inline <style> that layers over the core's neutral defaults
@@ -166,6 +171,8 @@ const metaDescription = description ?? identity.description;
 
     <CookiePreferences />
 
+    <StickyCallout {...callout} />
+
     <style is:global>
       /* ── Global resets & typography ─────────────────────────────────────
          Anything that affects every page's body / typography / article

package/lib/callout.ts

@@ -0,0 +1,13 @@
+/**
+ * The sticky-callout capability's data side — a tiny loader so Base can render the
+ * corner launcher from settings. The launcher + panel live in
+ * components/StickyCallout.astro.
+ */
+import { getEntry } from 'astro:content';
+import { calloutSettingsSchema, type CalloutSettings } from '../content/callout';
+
+/** Callout settings (defaults applied, so a missing file is fine → disabled). */
+export async function getCalloutSettings(): Promise<CalloutSettings> {
+  const entry = await getEntry('calloutSettings', 'index');
+  return calloutSettingsSchema.parse(entry?.data ?? {});
+}

package/package.json

@@ -1,62 +1,62 @@
-{
-  "name": "ferst-core",
-  "version": "0.2.3",
-  "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",
-  "author": "MyAI4 Ltd (https://ferst.co.uk)",
-  "homepage": "https://ferst.co.uk",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MyAI4WebDev/myai4-ferst-core.git",
-    "directory": "packages/core"
-  },
-  "bugs": {
-    "url": "https://github.com/MyAI4WebDev/myai4-ferst-core/issues"
-  },
-  "keywords": [
-    "astro",
-    "astro-component",
-    "cms",
-    "sveltia",
-    "website",
-    "design-tokens",
-    "ferst"
-  ],
-  "scripts": {
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "files": [
-    "bin",
-    "components",
-    "layouts",
-    "content",
-    "lib",
-    "utils",
-    "styles",
-    "README.md",
-    "NOTICE",
-    "LICENSE",
-    "LICENSE-Apache-2.0"
-  ],
-  "bin": {
-    "ferst-check-thin": "bin/check-thin.mjs",
-    "ferst-set-cms-branch": "bin/set-cms-branch.mjs"
-  },
-  "dependencies": {
-    "zod": "^3.25.0"
-  },
-  "devDependencies": {
-    "vitest": "^3.0.0"
-  },
-  "peerDependencies": {
-    "astro": "^5.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "ferst-core",
+  "version": "0.2.5",
+  "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",
+  "author": "MyAI4 Ltd (https://ferst.co.uk)",
+  "homepage": "https://ferst.co.uk",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MyAI4WebDev/myai4-ferst-core.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/MyAI4WebDev/myai4-ferst-core/issues"
+  },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "cms",
+    "sveltia",
+    "website",
+    "design-tokens",
+    "ferst"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "bin",
+    "components",
+    "layouts",
+    "content",
+    "lib",
+    "utils",
+    "styles",
+    "README.md",
+    "NOTICE",
+    "LICENSE",
+    "LICENSE-Apache-2.0"
+  ],
+  "bin": {
+    "ferst-check-thin": "bin/check-thin.mjs",
+    "ferst-set-cms-branch": "bin/set-cms-branch.mjs"
+  },
+  "dependencies": {
+    "zod": "^3.25.0"
+  },
+  "devDependencies": {
+    "vitest": "^3.0.0"
+  },
+  "peerDependencies": {
+    "astro": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}