@port60/template-kit 0.21.0 → 1.0.0

package/src/vendor/engine/content-footprint.mjs

@@ -3,8 +3,11 @@
 // the production loader computes the same footprint the validator stamps, the render path
 // fetches precisely what a template reads, and the two can never disagree.
 import contentModel from '../contract/v1/content-model.json' with { type: 'json' };
+import contentModelV2 from '../contract/v2/content-model.json' with { type: 'json' };
+import siteSchemaV2 from '../contract/v2/site.schema.json' with { type: 'json' };
 
 export { contentModel };
+export { contentModelV2 };
 
 // ── Extraction ─────────────────────────────────────────────────────────
 // The dialect is closed, so the site paths a template reads are decidable from its sources: every
@@ -29,7 +32,7 @@ function segmentsOf(chain) {
  * Returns { footprint: string[], minModelVersion: string|null, errors: string[] }, footprint
  * entries are 'brand' | 'nav' | 'socials' | 'locale' | 'content.<collection>'.
  */
-export function extractContentFootprint(files) {
+function extractV1ContentFootprint(files) {
   const errors = [];
   const touched = new Set();
   const siblings = new Set(contentModel.siblings.keys);
@@ -77,3 +80,75 @@ export function extractContentFootprint(files) {
   return { footprint: [...touched].sort(), minModelVersion, errors };
 }
 
+/** Metadata-only collection reads do not require fetching the collection's records. */
+export function needsCollectionData(footprint, name) {
+  return footprint.includes(`content.${name}`);
+}
+
+function artifactFormat(files) {
+  try { return JSON.parse(files['manifest.json'] ?? '{}').format ?? 'port60-liquid@1'; }
+  catch { return 'port60-liquid@1'; }
+}
+
+/** The same explicit major decision is used by validation and the public host. */
+export function extractContentFootprint(files, options = {}) {
+  const format = options.format ?? artifactFormat(files);
+  if (format === 'port60-liquid@1') return extractV1ContentFootprint(files);
+  if (format !== 'port60-liquid@2') return { footprint: [], minModelVersion: null, errors: [`Unsupported content-model format '${format}'.`] };
+  const errors = [];
+  const touched = new Set();
+  const siblings = new Set(contentModelV2.siblings.keys);
+  for (const [path, source] of Object.entries(files)) {
+    if (!path.endsWith('.liquid')) continue;
+    const code = source.replace(/\{%[-]?\s*comment\s*[-]?%\}[\s\S]*?\{%[-]?\s*endcomment\s*[-]?%\}/g, '');
+    const bindings = new Set([...code.matchAll(/\b(?:assign|for)\s+([A-Za-z_][A-Za-z0-9_]*)\s+(?:=|in)\s+/g)].map(match => match[1]));
+    for (const token of code.matchAll(/\{(?:\{[\s\S]*?\}\}|%[\s\S]*?%\})/g)) {
+      for (const match of token[0].matchAll(/(?<![.\w])\b(brand|nav|socials|locale|worship|focus|events|infoEvents|latestArticles|campaigns|campaignsLabel|causes|services|courses|resources|locations|relatedArticles|backHref)(?=\.|\[|\s*(?:%\}|\}\}|\|))/g)) {
+        if (!bindings.has(match[1])) errors.push(`${path}: flat context '${match[1]}' is not available in v2; read the canonical site tree.`);
+      }
+    }
+    if (DYNAMIC_INDEX.test(source)) errors.push(`${path}: dynamic indexing into site.* is refused; use a named path.`);
+    if (BARE_SITE.test(source)) errors.push(`${path}: aliasing the bare site tree is refused; use a named path.`);
+    for (const match of source.matchAll(new RegExp(CHAIN.source, 'g'))) {
+      const [head, member, ...rest] = segmentsOf(match[1]);
+      if (head === 'content') {
+        const collection = contentModelV2.collections[member];
+        if (!collection) {
+          errors.push(`${path}: site.content.${member ?? ''} is not in content model 2.0. Use the canonical collection or site.page.`);
+          continue;
+        }
+        if (collection.shape === 'array') {
+          touched.add(`content.${member}`);
+          continue;
+        }
+        const field = rest[0];
+        if (field && !['label', 'href', 'items', 'pagination'].includes(field)) {
+          errors.push(`${path}: site.content.${member} is an envelope with label, href, items and pagination; '${field}' is not a member.`);
+          continue;
+        }
+        if (field === 'items') {
+          const itemField = ['first', 'last'].includes(rest[1]) ? rest[2] : rest[1];
+          if (itemField && !['size', 'first', 'last'].includes(itemField) && !collection.item[itemField]) errors.push(`${path}: '${itemField}' is not a ${member} item field.`);
+          touched.add(`content.${member}`);
+        } else {
+          if (field === 'pagination' && rest[1] && !['page', 'size', 'totalElements', 'totalPages', 'nextHref', 'previousHref'].includes(rest[1])) errors.push(`${path}: '${rest[1]}' is not a pagination field.`);
+          touched.add(field ? `content.${member}.${field}` : `content.${member}`);
+        }
+      } else if (siblings.has(head)) {
+        const properties = siteSchemaV2.properties[head]?.properties;
+        if (member && properties && !properties[member]) errors.push(`${path}: site.${head}.${member} is not part of the v2 model.`);
+        touched.add(head);
+      } else errors.push(`${path}: site.${head} is not part of the v2 model.`);
+    }
+    // Local aliases of nav/collection objects are valid. Retired members are not.
+    const retired = [
+      [/\b(?:site\.)?nav\.(?:items|derived)\b/, 'nav.header and nav.footer replace nav.items/nav.derived'],
+      [/\b(?:site\.)?actions\.(?:primary|secondary)\b/, 'actions.header, actions.hero and actions.widget replace action aliases'],
+      [/\bsection\.(?:primary|secondary)\b/, 'use site.actions rather than section action aliases'],
+      [/\bmegaMenu\.columns\b|\.megaMenu\.columns\b/, 'the template owns responsive menu columns'],
+      [/\b(?:item|link|child|node|navItem)\.cta\b/, 'navigation CTA flags are retired; use site.actions.header']
+    ];
+    for (const [pattern, advice] of retired) if (pattern.test(source)) errors.push(`${path}: ${advice}.`);
+  }
+  return { footprint: [...touched].sort(), minModelVersion: touched.size ? '2.0' : null, errors };
+}

package/src/vendor/engine/majors.mjs

@@ -0,0 +1,42 @@
+// The CONTRACT MAJORS registry (roadmap 8.6, multi-major engine support): the engine resolves a
+// template's declared `format` to the contract set that renders it, so `port60-liquid@1` keeps
+// rendering after `@2` ships. Today one major exists; when `@2` arrives it gets its own entry
+// (own dialect/catalogues, own configured Liquid instance) and @1 artifacts keep resolving here
+// untouched, with the published deprecation window governing how long.
+import dialect from '../contract/v1/dialect.json' with { type: 'json' };
+import sections from '../contract/v1/sections.json' with { type: 'json' };
+import islands from '../contract/v1/islands.json' with { type: 'json' };
+import context from '../contract/v1/context.json' with { type: 'json' };
+import dialectV2 from '../contract/v2/dialect.json' with { type: 'json' };
+import sectionsV2 from '../contract/v2/sections.json' with { type: 'json' };
+import islandsV2 from '../contract/v2/islands.json' with { type: 'json' };
+import contextV2 from '../contract/v2/context.json' with { type: 'json' };
+
+const MAJORS = {
+  1: { format: dialect.format, dialect, sections, islands, context },
+  2: { format: dialectV2.format, dialect: dialectV2, sections: sectionsV2, islands: islandsV2, context: contextV2 }
+};
+
+/** Parse "port60-liquid@N" → N, or null when the string isn't even format-shaped. */
+export function parseFormatMajor(format) {
+  const m = /^port60-liquid@(\d+)$/.exec(String(format ?? ''));
+  return m ? Number(m[1]) : null;
+}
+
+/**
+ * Resolve the contract set for a declared format. Throws a NAMED error for unknown majors,
+ * callers (the artifact loader) let that ride their normal artifact-failure fallback, so a
+ * template declaring a future major degrades the site to the built-in chrome, never downs it.
+ */
+export function resolveMajor(format) {
+  const major = parseFormatMajor(format);
+  const entry = major === null ? undefined : MAJORS[major];
+  if (!entry) {
+    throw new Error(
+      `unsupported template format '${format}', this engine speaks major(s) [${Object.keys(MAJORS).join(', ')}]`
+    );
+  }
+  return entry;
+}
+
+export const SUPPORTED_MAJORS = Object.freeze(Object.keys(MAJORS).map(Number));

package/src/vendor/validator/gift-aid-logo.svg

@@ -0,0 +1,6 @@
+<!-- Static preview copy of components/GiftAidLogo.tsx. Provenance: docs/living-templates/gift-aid-logo-source.md. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 671.722 236.156"
+      class="donation-giftaid-logo" aria-hidden="true" focusable="false">
+      <path fill="currentColor" d="M425.721,293c18.637-29.194,9.291-33.682,8.339-33.142-18.131,10.215-31.939,40.964-30.78,51.206,1.6,14.1,12.543-2.569,22.441-18.064m70.606-26.791a53.62,53.62,0,0,0-6.419,19.5c-.477,3.424-1.033,18.3-.91,20.322a70.845,70.845,0,0,0,1.253,9.775c.443,1.611,3.206,7.4-5.661,8.623-5.218.718-5.116-12.339-5.218-14.476-.2-4.554.555-20.554,1.038-22.929.51-2.429-.507.145-1.467,1.735-2.211,3.7-4.784,8.706-7.865,13.635-4.047,6.481-13.073,21.919-25.383,21-4.605-.348-9.289-.941-11.965-13.775-1.026-4.919-.628-11.386-.523-15.268-.128-.8-.019-1.717-.688-1.343C428.159,303.18,414,333.158,398,326.419c-7.41-3.112-11.061-12.678-2.881-31.358,7.969-18.206,28.071-40.784,36.078-42.3,7.137-1.355,7.879,2.24,7.879,2.24.651-1.327,5.1-1.171,6.073.732,1.3,2.545,2.168,2.986,1.3,9.7-.491,3.872-4.088,28.092-3.467,36.414.286,3.9.955,13.509,4.919,13.972,6.924.829,15.315-13.9,16.268-15.439,1.865-3.009,16.805-28.056,18.644-31.713,1.979-3.943,3.23-6.822,4.507-9.332s5.126-2.789,8.481-.5S497.476,264.27,496.327,266.211ZM180.189,278.478c-8.784.946-24.8,22.18-28.1,29.721-3.374,7.7-4.592,15.123-.588,18.22,8.285,6.433,16.856-4.472,19.375-7.007,1.559-1.56,12.459-13.45,15.2-25.526C187.888,285.912,188.727,277.564,180.189,278.478Zm4.578,94.246q-.909,1.625-1.869,3.221c-6.472,10.744-14.962,20.331-25.489,27.241-14.258,9.356-27.649,12.95-42.611,12.77-8.7-.1-17.09-1.509-24.244-6.059-5.864-3.73-6.7-9.562-4.924-13.412,2.469-5.363,10.176-4.841,13.455-1.763,8.187,7.677,13.074,10.654,23.6,10.144a56.707,56.707,0,0,0,24.69-7.26c43.542-25.427,43.144-71.137,44.912-98.68.187-1.675-.723-.457-1.031.455a108.567,108.567,0,0,1-7.775,16.943,58.19,58.19,0,0,1-18.424,20.1c-5.514,3.642-14.469,5.405-20.775,1.294-2.286-1.5-15.654-9.325-4.324-32.638,7.125-14.668,22.118-24.843,25.5-27,8.27-5.282,14.18-7.794,20.377-7.318,3.156.23,3.611,1.472,5.957,1.41,1.336-1.568,2.073-2.72,4.27-3.327,2.95-.471,6.453,2,7.8,6.683s-2.161,12.206-3.047,15.824C200.822,291.35,203.938,338.277,184.767,372.724Zm49.607-105.731c-5.337.1-4.9,3.952-6.019,7.322-1.083,3.36-10.28,33.575-11.448,38.992s-1.969,10.282-.28,17.716c1.718,7.6,10.429,5.379,11.353,4.045,4.256-5.96.486-7.716.349-11.879-.109-4.351,1.082-8.915,1.981-14.806.32-2.1.962-11.649,1.277-12.945.355-1.4,3.36-12.033,7.689-18.5C241.129,274.166,242.76,266.848,234.374,266.993ZM248.9,231.656c-.73-1.5-4.7-6.225-9.882-2.557-7.708,5.458,1.18,13,2.607,16.7s9.132,6.8,8.007-.5C249.468,244.249,251.02,236,248.9,231.656Zm85.108,35.59c-2.509.559-7.516,1.569-10.666,2.1-4.77.8-7.369,3.8-7.189,6.832.18,3.054,1.225,4.493,5.481,3.685,3.848-.728,7.132-4,10.5-4.014,0,0-6.954,29.319-7.409,33.248s-2.512,14.678,1.713,20.777c9.4,13.576,28.2-1.985,29.957-3.68,1.291-1.253,13.168-11.668,17.194-20.021,2.04-4.239-1.433-5.175-3.784-6.04s-7.318.63-8.012,3.73c-1.512,6.734-17.96,24.9-26.1,21.258-9.594-4.3,7.713-52.479,7.713-52.479,2.064-.926,12.517-3.62,22.413-6.165,11.417-2.925,46.312-9.815,38.436-20.24-3.854-5.1-13.816,2.666-17.192,4.292-12.095,5.8-41.7,14.315-41.7,14.315s3.844-17.32,5.088-20.732c1.429-3.905,6.7-6.46,7.467-13.412.905-8.086-8.835-11.768-13.484-2.915-.962,1.817-2.287,6.832-2.417,6.957-1.249,1.2-12,5.493-22.571,10.533-3.332,1.588-22.256,8.469-22.291,8.424.026-.144,5.746-18.281,12.374-33.412,4.41-10.061,10.623-24.066,21.63-26.909,10.308-2.657,5.448,8.08,10.086,10.871,5.883,3.538,9.492-.924,10.393-5.191.706-3.342.519-20.879-17.31-19.126-16.965,1.673-30.484,27.571-47.2,75.964-.18.194-13.457,8.77-24.464,10.974-5.443,1.088-7.851,1.559-8.571,3.5a8.571,8.571,0,0,0,2,9.168c3.137,3.744,27.646-12.479,27.62-12.367-.5.661-20.609,77.281-20.77,78.175-1.159,6.381-7.642,23.206-7.291,30.843.194,3.929,1.734,12.107,7.391,11.742,11.846.777,9.561-15.865,8.765-18.917-1.659-6.313,6.851-48.045,14.488-78.8,1.557-6.273,4.756-16.566,5.313-19.014a11.455,11.455,0,0,1,6.22-8.233s42.583-20.073,42.979-19.957C340.811,243.054,334.008,267.246,334.008,267.246Zm291.747,38.3C634,313.343,642.2,308.4,646.421,305c12.945-10.41,39.635-57.853,39.635-57.853.152,1.588-11.121,56,3.95,62.033,9.664,3.86,32.156-15.33,34.732-17.107,14.851-10.251,5.751-14,2.886-14-7.658-.024-6.279,5.521-8.374,8.011-3.455,4.114-17.341,18.4-24.14,14.607-3.661-2.052-2.758-14.14-2.393-16.926,2.14-28.8,2.711-34,4.389-40.624.94-3.682,5.426-3.585,8.173-4.089,37.08-6.851,43.732-4.088,48.355-6.342,3.67-1.805,4.327-9.575-.879-11.246-2.382-.749-5.4,1.064-10.858,3.1-5.431,2.007-32.791,8.057-36.815,8.654-3.706.536-4.5.014-5.4-1.147-.886-1.149.82-14.663,6.135-25.865,2.313-4.848,2.374-12.267-5.178-12.841-3.106-.223-5.744.661-6.924,3.308-1.175,2.63-3.438,26.63-3.967,28.228-.535,1.578-3.4,2.81-4.033,5.549s-.192,4.448-2.035,5.064c-1.863.633-6.965,1.123-9.064,1.628-2.209.538-3.519,4.763-3.6,7.206s3.86.991,5.761.714c2.17-.316,7.476-2.967,3.7,1.578-1.431,1.737-27.17,41.973-37.222,50.258-11.566,9.521-10.739-9.2-10.45-12.389,1.748-19.092,10.1-31.9,11.3-34.94,1.18-3.055,1.677-12.107-8.183-10.107a6.979,6.979,0,0,0-4.938,4.637.992.992,0,0,0-.029.2C629.964,253.222,612.841,293.331,625.755,305.549Zm15.029-93.416c3.038,5.924,8.229,3.829,9.113,2.3.887-1.517,1.595-1.832,4.112-2.846,4.621-1.846-3.358-10.14-10.948-7.8a2.9,2.9,0,0,0-1.737,2.466C641.53,207.986,639.75,210.149,640.784,212.133ZM547.7,258.685s4.981-4.292,7.09-4.181c.979.048-.728,2.759,2.694,4.434,1.818.9-1.988,13.007-9.512,24.628-17.279,26.682-25.471,25.478-26.182,17.374C520.329,284.033,542.689,262.128,547.7,258.685Zm8.772,21.876s-.064,5.749.384,10.664c.4,4.412,1.908,13.644,3.462,16.63,2.408,4.6,7.514,4.6,11.446,2.346,5.147-2.957,2.713-8.488.753-10.329-1.711-1.621-5.869-3.7-7.128-10.645-.741-4.111-.135-22.637,1.083-29.118a86.628,86.628,0,0,1,5.621-17.3c2.05-4.045,14.4-27.206,14.581-34.981.075-3.393-3.42-6.206-9.131-5.618s-7.132,5.161-7.142,8.159c-.014,2.981-6.061,23.973-6.374,24.928-.5,1.434-1.491,10.029-4.441,10.048a28.671,28.671,0,0,0-18.159,6.078c-2.846,2.156-12.509,9.673-18.087,17.516-2.531,3.55-14.038,18.342-12.737,36,1.185,16.056,12.419,13.215,15.642,12.7,14.661-2.355,24.969-26.469,26.462-29.426C555.348,282.964,554.455,284.376,556.471,280.561ZM498.716,221.9c-1.074,1.32-.806,5.509,1.533,7.675,1.761,1.633,2.007,1.934,2.064,3.254.1,2.434,1.654,2.569,4.047,2.535,2.927-.042,5.32-2.073,5.616-6.206s-3.708-7.668-6.931-8.464S500.109,220.173,498.716,221.9Z"
+        transform="translate(-84.802 -179.806)" />
+</svg>

package/src/vendor/validator/model-reference-v2.mjs

@@ -0,0 +1,95 @@
+// THE MODEL, VISIBLE (content model v2): a self-contained reference page the kit's dev server
+// serves at /model, the registry's shape beside the LIVE example data the preview is rendering
+// right now (preview-content.json overlay included), so "what can I read?" is answered where the
+// developer already lives. Network-dead like every preview document.
+import { contentModelV2 as contentModel } from '../engine/content-footprint.mjs';
+
+const escapeHtml = (s) =>
+  String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+function fieldRows(item) {
+  return Object.entries(item)
+    .map(([name, spec]) => {
+      const notes = [];
+      if (spec.nullable) notes.push('nullable, always branch');
+      if (spec.enumOpen) {
+        notes.push(spec.enumOpen.length
+          ? `open enum: ${spec.enumOpen.join(', ')} today, more will arrive`
+          : 'open enum');
+      }
+      if (spec.max) notes.push(`max ${spec.max} chars`);
+      return `<tr><td><code>${escapeHtml(name)}</code></td><td>${escapeHtml(spec.type)}</td>` +
+        `<td>${escapeHtml(notes.join(' · '))}</td><td>${escapeHtml(spec.since)}</td></tr>`;
+    })
+    .join('');
+}
+
+function exampleOf(site, name) {
+  const value = site?.content?.[name];
+  const items = Array.isArray(value) ? value : value?.items;
+  if (!Array.isArray(items) || items.length === 0) return null;
+  return JSON.stringify(items[0], null, 2);
+}
+
+/** The /model page: registry + the live example values of THIS preview's site tree. */
+export function renderModelReferenceHtml(site) {
+  const sectionsHtml = Object.entries(contentModel.collections)
+    .map(([name, model]) => {
+      const example = exampleOf(site, name);
+      const envelope = model.shape === "envelope" ? `<p>Envelope: <code>label</code>, nullable <code>href</code>, <code>items</code>, nullable <code>pagination</code>. Iterate <code>site.content.${name}.items</code>. Metadata reads do not fetch rows.</p>` : "<p>A bounded array.</p>";
+      return `<section id="${escapeHtml(name)}">
+  <h2><code>site.content.${escapeHtml(name)}</code></h2>
+  <p class="meta">bounded at <strong>${model.cap}</strong>${model.moreHref ? ` · more at <code>${escapeHtml(model.moreHref)}</code>` : ''} · since ${escapeHtml(model.since)}</p>
+  <p>${escapeHtml(model.description)}</p>
+  ${envelope}
+  <table><thead><tr><th>Field</th><th>Type</th><th>Notes</th><th>Since</th></tr></thead>
+  <tbody>${fieldRows(model.item)}</tbody></table>
+  ${example ? `<details><summary>Live example (item 0 of what this preview is rendering)</summary><pre>${escapeHtml(example)}</pre></details>` : '<p class="meta">No items in the current preview data.</p>'}
+</section>`;
+    })
+    .join('\n');
+
+  const toc = Object.keys(contentModel.collections)
+    .map((name) => `<a href="#${escapeHtml(name)}">${escapeHtml(name)}</a>`)
+    .join(' · ');
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>site.content, the content model</title>
+<style>
+  body { font: 15px/1.6 system-ui, sans-serif; margin: 0 auto; max-width: 56rem; padding: 24px 20px 64px; color: #172029; background: #fbfbf9; }
+  h1 { margin: 0 0 4px; } h2 { margin: 40px 0 2px; font-size: 20px; }
+  .meta { color: #5a6672; font-size: 13px; margin: 2px 0 8px; }
+  .lede { color: #3c4854; max-width: 46rem; }
+  nav.toc { font-size: 13px; margin: 14px 0 6px; color: #5a6672; }
+  table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
+  th, td { text-align: left; border-bottom: 1px solid #e3e3dc; padding: 5px 10px 5px 0; vertical-align: top; }
+  th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #5a6672; }
+  code { background: #eeeee6; border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
+  pre { background: #10161c; color: #dbe4ec; border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 12.5px; }
+  details { margin: 8px 0 0; } summary { cursor: pointer; font-size: 13px; color: #5a6672; }
+  .rules { background: #f0f0e8; border-radius: 10px; padding: 14px 18px; font-size: 13.5px; }
+  .back { font-size: 13px; }
+</style>
+</head>
+<body>
+<p class="back"><a href="/">← back to the preview</a></p>
+<h1>The content model</h1>
+<p class="lede">Everything your template reads lives on one tree: <code>site.brand</code>, <code>site.nav</code>, <code>site.socials</code>, <code>site.locale</code>, <code>site.actions</code>, <code>site.page</code> and the typed collections below. Model version <strong>${escapeHtml(contentModel.version)}</strong>. The validator computes your content footprint from the paths you read and stamps the minimum model version at publish, you never declare versions.</p>
+<div class="rules">
+  <strong>Four rules the model never breaks (so neither should you):</strong>
+  every collection is bounded (cap + supplied <code>href</code> and <code>pagination</code>), link onward, never assume you have everything;
+  enum fields are open, branch on the values you style, fall back for the rest;
+  optional fields are explicitly nullable, always branch;
+  the model only grows, nothing you read today is ever removed within the major.
+  Replace the preview data with your own via <code>preview-content.json</code> (shape fixed, hot-reloaded, never packaged).
+</div>
+<nav class="toc">${toc}</nav>
+${sectionsHtml}
+</body>
+</html>`;
+}

package/src/vendor/validator/platform-base.css

@@ -1403,6 +1403,232 @@ textarea.p60-form-control {
   color: var(--primary-strong);
 }
 
+/* The donation island can sit in a narrow desktop column or a wide checkout.
+   Size its fields from their available space, without changing other islands. */
+.donate-card.donation-widget {
+  padding: 1.25rem;
+  gap: 0.75rem;
+}
+
+.donation-widget .donor-fields {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+}
+
+.donation-widget .giftaid-grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+}
+
+.donation-widget .donor-fields > .marketing-optin,
+.donation-widget .giftaid-name-grid > .giftaid-title {
+  grid-column: 1 / -1;
+}
+
+.donation-widget .giftaid-title {
+  inline-size: min(100%, 10rem);
+}
+
+.donation-widget .field,
+.donation-widget .field input,
+.donation-widget .field select,
+.donation-widget .freq-tab {
+  min-inline-size: 0;
+}
+
+.donation-widget .field select {
+  inline-size: 100%;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.85rem 0.95rem;
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.donation-widget .field select:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.donation-widget .freq-tabs {
+  grid-template-columns: none;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+}
+
+.donation-widget .freq-tab {
+  overflow-wrap: anywhere;
+}
+
+.donation-widget .donate-change {
+  white-space: normal;
+}
+
+.donation-widget .donation-giftaid-controls {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.donation-widget .donation-giftaid-summary {
+  margin: 0;
+  color: var(--ink);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  font-weight: 600;
+}
+
+.donation-widget .donation-giftaid-summary-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* One button surrounds the action and intact wordmark, preserving its clear space. */
+.donation-widget .donation-giftaid-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  min-block-size: 44px;
+  padding: 15px;
+  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.donation-widget .donation-giftaid-logo {
+  display: block;
+  flex: 0 0 auto;
+  inline-size: 72px;
+  block-size: auto;
+}
+
+.donation-widget .donation-giftaid-action {
+  text-decoration: none;
+}
+
+.donation-widget .donation-giftaid-trigger:hover:not(:disabled) {
+  border-color: var(--ink);
+  background: color-mix(in srgb, var(--ink) 5%, transparent);
+}
+
+.donation-widget .donation-giftaid-trigger:focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 2px;
+}
+
+.donation-widget .donation-giftaid-trigger:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Native top layer keeps the optional details clear of template hero clipping and motion. */
+.donation-widget .donation-giftaid-dialog {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  inline-size: min(42rem, calc(100% - 2rem));
+  max-inline-size: none;
+  max-block-size: calc(100dvh - 2rem);
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--ink);
+  font: inherit;
+  text-align: start;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.donation-widget .donation-giftaid-dialog:not([open]) { display: none; }
+.donation-widget .donation-giftaid-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
+html:has(.donation-giftaid-dialog[open]) { overflow: hidden; }
+
+.donation-widget .donation-giftaid-dialog > form {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  max-block-size: calc(100dvh - 2rem);
+  margin: 0;
+}
+
+.donation-widget .donation-giftaid-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.5rem;
+  border-block-end: 1px solid var(--line);
+}
+
+.donation-widget .donation-giftaid-heading h2 {
+  font-size: clamp(1.25rem, 3vw, 1.6rem);
+  line-height: 1.2;
+  margin: 0;
+}
+
+.donation-widget .donation-giftaid-heading p {
+  color: var(--muted);
+  margin: 0.5rem 0 0;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.donation-widget .donation-giftaid-close {
+  display: grid;
+  place-items: center;
+  flex: none;
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  padding: 0;
+  border: 1px solid var(--line-strong);
+  border-radius: 50%;
+  background: var(--surface);
+  color: var(--ink);
+  font: inherit;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+.donation-widget .donation-giftaid-body {
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.5rem;
+  min-block-size: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.donation-widget .donation-giftaid-dialog .giftaid-declaration { font-size: 0.875rem; line-height: 1.6; }
+
+.donation-widget .donation-giftaid-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-block-start: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.donation-widget .donation-giftaid-actions .button { min-block-size: 2.75rem; }
+.donation-widget .donation-giftaid-dialog :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
+
+@media (max-width: 480px) {
+  .donation-widget .donation-giftaid-dialog {
+    inline-size: calc(100% - 1rem);
+    max-block-size: calc(100dvh - 1rem);
+  }
+  .donation-widget .donation-giftaid-dialog > form { max-block-size: calc(100dvh - 1rem); }
+  .donation-widget .donation-giftaid-heading,
+  .donation-widget .donation-giftaid-body,
+  .donation-widget .donation-giftaid-actions { padding: 1rem; }
+  .donation-widget .donation-giftaid-actions .button { flex: 1; }
+}
+
 .card-host {
   min-height: 2.5rem;
   margin: 0.25rem 0 0.5rem;
@@ -1623,6 +1849,49 @@ textarea.p60-form-control {
   color: var(--ink);
   margin: 0 0 1rem;
 }
+/* Side by side content from the rich-text editor (articles, events, courses). Structure only, and
+   deliberately unscoped so a template page that renders a body with the raw filter gets the same
+   floor: the theme owns the typography inside a pane and may restyle the gap, the breakpoint or the
+   boxed look. Under 720px of page width the panes stack in reading order. Nothing about width or
+   colour is stored with the content; the classes are exact tokens the sanitiser allow-lists. */
+.p60-cols {
+  display: grid;
+  gap: 1.5rem;
+  margin: 1.25rem 0;
+  align-items: start;
+}
+.p60-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.p60-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.p60-col > :first-child {
+  margin-top: 0;
+}
+.p60-col > :last-child {
+  margin-bottom: 0;
+}
+/* A floated image never escapes its pane. */
+.p60-col img,
+.p60-col figure {
+  float: none;
+  max-width: 100%;
+}
+/* The one named look: a box drawn from the theme's own tokens. */
+.p60-col-boxed {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--bg-tint);
+  padding: 1rem 1.15rem;
+}
+@media (max-width: 720px) {
+  .p60-cols {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
 .service-body {
   color: var(--ink);
   line-height: 1.7;
@@ -4164,6 +4433,47 @@ textarea.p60-form-control {
 }
 .member-course-feedback-toggle:hover { opacity: 1; text-decoration: underline; }
 .member-course-feedback-body { margin-top: 0.6rem; display: grid; gap: 0.75rem; }
+/* The course's structure as a family reads it: parts in order, where the class is, whether their
+   learner was there, and the marks the course lets through. Indentation is the only thing that
+   says which level a part sits at, because the composer named the levels. */
+.member-course-structure { margin-top: 0.6rem; display: grid; gap: 0.4rem; }
+.member-course-structure-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
+.member-course-structure-node { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0; }
+.member-course-structure-node.is-heading .member-course-structure-name { font-weight: 600; }
+.member-course-structure-node.is-leaf:not(.is-covered) { opacity: 0.6; }
+.member-course-structure-node.is-current .member-course-structure-name { font-weight: 600; }
+.member-course-structure-now { font-style: normal; font-size: 0.8em; margin-inline-start: 0.4rem; padding: 0 0.4rem; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
+.member-course-structure-state { display: inline-flex; gap: 0.5rem; align-items: baseline; white-space: nowrap; font-size: 0.9em; }
+.member-course-structure-mark { font-style: normal; font-weight: 600; }
+.member-course-structure-completion { margin: 0; font-weight: 600; }
+/* The progress meter: one segment per module, one cell per unit. Fills are the theme's primary so
+   every template recolours it; every state also carries a word, a tick or a hatch, never colour
+   alone. A 2px surface gap separates fills, and the current unit is lit rather than recoloured. */
+.member-course-meter { display: grid; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: color-mix(in srgb, var(--primary) 6%, transparent); }
+.member-course-meter-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.5rem 1.25rem; }
+.member-course-meter-hero { display: flex; align-items: baseline; gap: 0.6rem; }
+.member-course-meter-number { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--primary); }
+.member-course-meter-caption { font-size: 0.9rem; color: var(--muted); }
+.member-course-meter-now { display: grid; gap: 0.15rem; font-size: 0.9rem; font-weight: 600; text-align: end; }
+.member-course-meter-presence { font-weight: 400; color: var(--muted); }
+.member-course-meter-bar { display: flex; gap: 0.5rem; align-items: flex-start; }
+.member-course-meter-seg { display: grid; gap: 0.4rem; min-inline-size: 0; }
+.member-course-meter-cells { display: flex; gap: 2px; }
+.member-course-meter-cell { flex: 1 1 0; display: inline-block; min-inline-size: 0.6rem; block-size: 0.85rem; border-radius: 4px; background: color-mix(in srgb, currentColor 14%, transparent); }
+.member-course-meter-cell.is-covered { background: var(--primary); }
+.member-course-meter-cell.is-covered.is-away { background: repeating-linear-gradient(135deg, var(--primary) 0 3px, color-mix(in srgb, var(--primary) 35%, transparent) 3px 6px); }
+.member-course-meter-cell.is-current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); animation: member-course-meter-pulse 2.4s ease-in-out infinite; }
+@keyframes member-course-meter-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); } 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .member-course-meter-cell.is-current { animation: none; } }
+.member-course-meter-seg-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-size: 0.8rem; min-inline-size: 0; }
+.member-course-meter-seg-name { font-weight: 600; overflow-wrap: anywhere; }
+.member-course-meter-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.75rem; color: var(--muted); }
+.member-course-meter-legend i { display: inline-block; inline-size: 0.9rem; block-size: 0.6rem; vertical-align: middle; margin-inline-end: 0.15rem; }
+.member-course-meter-legend i.is-current { animation: none; }
+.member-course-structure-details summary { cursor: pointer; }
+.member-course-mini { display: block; inline-size: min(14rem, 100%); block-size: 4px; margin-block-start: 0.35rem; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; }
+.member-course-mini-fill { display: block; block-size: 100%; background: var(--primary); border-radius: inherit; }
+@media (max-width: 560px) { .member-course-meter-bar { flex-direction: column; gap: 0.6rem; } .member-course-meter-now { text-align: start; } }
 .member-course-feedback-note {
   border-left: 3px solid currentColor;
   padding: 0.35rem 0 0.35rem 0.75rem;