@port60/template-kit 1.1.0 → 1.2.1

package/src/vendor/validator/heading-alignment.mjs

@@ -0,0 +1,148 @@
+// This is a structural render proof, not a CSS audit. The platform's desktop-only rule
+// aligns the marked heading; authors still check every Look at desktop/mobile and in RTL.
+import { HEADING_ALIGNMENTS } from '../engine/section-heading-alignment.mjs';
+
+const ATTRIBUTE = 'data-p60-heading-align';
+const VALUES = HEADING_ALIGNMENTS;
+const VOID = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+const NON_CONTENT = new Set(['script', 'style', 'template', 'noscript', 'textarea', 'xmp', 'plaintext', 'title', 'select']);
+const NON_HEADING = new Set(['img', 'picture', 'svg', 'video', 'audio', 'canvas', 'iframe', 'ul', 'ol', 'li', 'dl', 'table', 'form', 'button', 'input', 'article', 'aside']);
+const GROUPS = new Set(['div', 'header', 'hgroup', 'section']);
+const isHeading = node => /^h[1-6]$/.test(node.tag);
+
+function markup(html) {
+  const root = { tag: 'root', attrs: {}, children: [], parent: null };
+  const stack = [root];
+  const nodes = [];
+  for (const [token] of html.matchAll(/<!--[\s\S]*?-->|<(?:[^>"']|"[^"]*"|'[^']*')*>|[^<]+/g)) {
+    if (token.startsWith('<!--') || token.startsWith('<!')) continue;
+    const close = /^<\/\s*([\w:-]+)/.exec(token);
+    if (close) {
+      const index = stack.findLastIndex(node => node.tag === close[1].toLowerCase());
+      if (index > 0) stack.length = index;
+      continue;
+    }
+    const open = /^<\s*([\w:-]+)/.exec(token);
+    if (!open) { stack.at(-1).children.push(token); continue; }
+    const attrs = {};
+    for (const attribute of token.slice(open[0].length, -1).matchAll(/([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g)) {
+      const name = attribute[1].toLowerCase();
+      // HTML keeps the first duplicate attribute; do not prove a later value the browser ignores.
+      if (!Object.hasOwn(attrs, name)) attrs[name] = decodeEntities(attribute[2] ?? attribute[3] ?? attribute[4] ?? '');
+    }
+    const node = { tag: open[1].toLowerCase(), attrs, children: [], parent: stack.at(-1) };
+    node.parent.children.push(node);
+    nodes.push(node);
+    if (!VOID.has(node.tag) && !token.endsWith('/>')) stack.push(node);
+  }
+  return nodes;
+}
+
+function hidden(node) {
+  return NON_CONTENT.has(node.tag) || 'hidden' in node.attrs || node.attrs['aria-hidden'] === 'true' ||
+    /(?:display\s*:\s*none|visibility\s*:\s*hidden|opacity\s*:\s*0(?:[;\s]|$))/i.test(node.attrs.style ?? '');
+}
+
+function visible(node) {
+  for (let current = node; current; current = current.parent) if (hidden(current)) return false;
+  return true;
+}
+
+function decodeEntities(text) {
+  const entities = { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'", nbsp: ' ' };
+  return text.replace(/&(#x[\da-f]+|#\d+|amp|lt|gt|quot|apos|nbsp);/gi, (match, entity) => {
+    if (entity.startsWith('#')) {
+      const value = Number.parseInt(entity.slice(entity[1].toLowerCase() === 'x' ? 2 : 1), entity[1].toLowerCase() === 'x' ? 16 : 10);
+      return value > 0 && value <= 0x10ffff ? String.fromCodePoint(value) : match;
+    }
+    return entities[entity.toLowerCase()];
+  });
+}
+
+function normalise(text) {
+  return decodeEntities(text).replace(/\s+/g, ' ').trim();
+}
+
+function textOf(node) {
+  if (hidden(node)) return '';
+  return node.children.map(child => {
+    if (typeof child === 'string') return child;
+    if (child.tag === 'br') return ' ';
+    const text = textOf(child);
+    return isHeading(child) || GROUPS.has(child.tag) || child.tag === 'p' ? ` ${text} ` : text;
+  }).join('');
+}
+
+function inside(node) {
+  return [node, ...node.children.flatMap(child => typeof child === 'string' ? [] : inside(child))];
+}
+
+/** Every hook must target the section introduction, not cards, media, or the whole section. */
+export function inspectHeadingAlignment(html, requested, { heading = '', eyebrow = '', requireHook = false } = {}) {
+  const hooks = markup(html).filter(node => Object.hasOwn(node.attrs, ATTRIBUTE));
+  const errors = [];
+  if (requested === undefined) {
+    if (hooks.some(node => VALUES.includes(node.attrs[ATTRIBUTE]))) {
+      errors.push('default/unsupported alignment must not emit an active data-p60-heading-align override');
+    }
+    if (!requireHook) return errors;
+  }
+  const label = requested ?? 'default';
+  const matches = value => requested === undefined ? !VALUES.includes(value) : value === requested;
+  const headingText = normalise(heading);
+  const eyebrowText = normalise(eyebrow);
+  let alignedHeading = false;
+  if (!hooks.length) errors.push(`'${label}' must render a permanent data-p60-heading-align hook on the section heading, including an inactive hook at the template default`);
+  for (const hook of hooks) {
+    if (!matches(hook.attrs[ATTRIBUTE])) errors.push(`every heading hook must render the requested '${label}' value (found '${hook.attrs[ATTRIBUTE]}')`);
+    const descendants = inside(hook);
+    const text = normalise(textOf(hook));
+    const headings = descendants.filter(node => isHeading(node) && visible(node));
+    const containsHeading = headings.length === 1 && headingText !== '' && normalise(textOf(headings[0])) === headingText;
+    const isEyebrow = !headings.length && eyebrowText !== '' && text === eyebrowText && ['p', 'span', 'div', 'strong', 'small'].includes(hook.tag);
+    const onlyHeadingCopy = [headingText, `${eyebrowText} ${headingText}`, `${headingText} ${eyebrowText}`].map(normalise).includes(text);
+    const headingGroup = containsHeading && (isHeading(hook) || GROUPS.has(hook.tag)) && onlyHeadingCopy;
+    if (!visible(hook) || descendants.some(node => NON_HEADING.has(node.tag)) || (!headingGroup && !isEyebrow)) {
+      errors.push(`'${label}' hook must mark the real section heading, its eyebrow, or a heading-only group; not hidden/empty markup, body copy, media or cards`);
+    } else if (headingGroup && matches(hook.attrs[ATTRIBUTE])) alignedHeading = true;
+  }
+  if (!alignedHeading) errors.push(`'${label}' must mark a visible nonempty section heading (h1 to h6), not only its eyebrow or unrelated card headings`);
+  return [...new Set(errors)];
+}
+
+/** Canonical sample data, with optional introduction copy populated so every claim is exercised. */
+export function headingAlignmentFixture(entry) {
+  const content = structuredClone(entry.sample ?? {});
+  delete content.headingAlignment;
+  const headingField = entry.fields.find(field => field.name === 'title' || field.name === 'heading')?.name;
+  if (headingField && !content[headingField]) content[headingField] = `P60 ${entry.type} section heading`;
+  if (entry.fields.some(field => field.name === 'eyebrow') && !content.eyebrow) content.eyebrow = `P60 ${entry.type} eyebrow`;
+  return { content, heading: content[headingField] ?? '', eyebrow: content.eyebrow ?? '' };
+}
+
+/** render receives raw content; the caller uses the same manifest-aware resolver as preview. */
+export async function proveHeadingAlignment(render, entry, declared, { inheritedHeading } = {}) {
+  const values = Array.isArray(declared) ? declared.filter(value => VALUES.includes(value)) : [];
+  const fixture = headingAlignmentFixture(entry);
+  const fixtures = [{ ...fixture, name: 'authored' }];
+  if (typeof inheritedHeading === 'string' && inheritedHeading !== '') {
+    const content = { ...fixture.content };
+    delete content.title;
+    fixtures.push({ content, heading: inheritedHeading, eyebrow: fixture.eyebrow, name: 'inherited' });
+  }
+  const errors = [];
+  for (const fixture of fixtures) {
+    for (const requested of [undefined, ...VALUES, 'p60-unknown-alignment']) {
+      const content = { ...fixture.content, ...(requested === undefined ? {} : { headingAlignment: requested }) };
+      const expected = values.includes(requested) ? requested : undefined;
+      const label = `${fixture.name} ${requested ?? 'default'}`;
+      try {
+        const html = await render(content);
+        errors.push(...inspectHeadingAlignment(html, expected, { ...fixture, requireHook: values.length > 0 }).map(message => `${label}: ${message}`));
+      } catch (error) {
+        errors.push(`${label}: failed rendering headingAlignment fixture, ${error.message}`);
+      }
+    }
+  }
+  return errors.map(message => `section '${entry.type}' headingAlignment: ${message}`);
+}

package/src/vendor/validator/navigation-modes.mjs

@@ -0,0 +1,60 @@
+import { parsePresentationMarkup, presentationText, presentationVisible, presentationSignature } from './presentation-proof.mjs';
+
+const ATTRIBUTE = 'data-p60-navigation-mode';
+export const NAVIGATION_MODE_PROBES = [
+  { kind: 'link', label: 'P60 navigation parent', href: '/p60-nav-parent', children: [
+    { kind: 'link', label: 'P60 navigation child', href: '/p60-nav-child', children: [
+      { kind: 'link', label: 'P60 navigation grandchild', href: '/p60-nav-grandchild', children: [] }
+    ] },
+    { kind: 'group', label: 'P60 navigation child group', href: null, children: [
+      { kind: 'link', label: 'P60 grouped grandchild', href: '/p60-nav-grouped-grandchild', children: [] }
+    ] }
+  ] },
+  { kind: 'group', label: 'P60 navigation root group', href: null, children: [
+    { kind: 'link', label: 'P60 root-group child', href: '/p60-nav-group-child', children: [] }
+  ] },
+  { kind: 'link', label: 'P60 final navigation link', href: '/p60-nav-last', children: [] }
+];
+
+/** Structural proof of both presentations; author browser tests establish layout and usability. */
+export async function proveNavigationModes(render, declaration, css = '') {
+  const errors = [], signatures = new Map();
+  const declared = declaration && Array.isArray(declaration.options) && declaration.options.length === 2
+    && new Set(declaration.options).size === 2 && declaration.options.every(value => ['simple', 'mega'].includes(value))
+    && declaration.options.includes(declaration.default);
+  if (!declared) return errors;
+  const flatten = items => items.flatMap(node => [node, ...flatten(node.children ?? [])]);
+  const supplied = flatten(NAVIGATION_MODE_PROBES);
+  for (const requested of [undefined, 'simple', 'mega', 'p60-unknown-mode']) {
+    const expected = declaration.options.includes(requested) ? requested : declaration.default;
+    try {
+      const { root, nodes } = parsePresentationMarkup(await render(requested, NAVIGATION_MODE_PROBES));
+      const hooks = nodes.filter(node => Object.hasOwn(node.attrs, ATTRIBUTE));
+      if (!hooks.length) errors.push(`${requested ?? 'default'}: must mark a real navigation root with ${ATTRIBUTE}`);
+      for (const hook of hooks) {
+        if (!(hook.tag === 'nav' || hook.attrs.role === 'navigation' || Object.hasOwn(hook.attrs, 'data-p60-nav'))
+          || hook.attrs[ATTRIBUTE] !== expected || !presentationVisible(hook, { navigation: true })) {
+          errors.push(`${requested ?? 'default'}: navigation root must render the resolved '${expected}' mode`);
+        }
+        const contains = node => { for (let parent = node.parent; parent; parent = parent.parent) if (parent === hook) return true; return false; };
+        const nonLink = node => { for (let current = node; current && current !== hook; current = current.parent) if (current.tag === 'a') return false; return true; };
+        let lastIndex = -1;
+        for (const item of supplied) {
+          const index = nodes.findIndex(node => contains(node) && presentationVisible(node, { navigation: true })
+            && (item.href ? node.tag === 'a' && node.attrs.href === item.href && presentationText(node).includes(item.label)
+              : nonLink(node) && node.children.some(child => typeof child === 'string' && child.replace(/\s+/g, ' ').includes(item.label))));
+          if (index < 0) errors.push(`${requested ?? 'default'}: both navigation modes must retain '${item.label}' and its supplied destination or non-link group label at every supported depth`);
+          else if (index < lastIndex) errors.push(`${requested ?? 'default'}: both navigation modes must retain supplied navigation node order`);
+          else lastIndex = index;
+        }
+      }
+      signatures.set(requested ?? 'default', presentationSignature(root, () => [ATTRIBUTE]));
+    } catch (error) { errors.push(`${requested ?? 'default'}: failed rendering navigation fixture, ${error.message}`); }
+  }
+  if (signatures.get('default') !== signatures.get(declaration.default) || signatures.get('p60-unknown-mode') !== signatures.get(declaration.default)) {
+    errors.push('missing or unsupported preferences must use the declared default without altering navigation content');
+  }
+  const modeStyles = /\[data-p60-navigation-mode\s*=\s*["']?(?:simple|mega)["']?\s*\][^{]*\{[^}]*[a-z-]+\s*:\s*[^;}\s]+/i.test(css.replace(/\/\*[\s\S]*?\*\//g, ''));
+  if (signatures.get('simple') === signatures.get('mega') && !modeStyles) errors.push('simple and mega must implement distinct markup or explicit mode-scoped presentation, not only change a marker');
+  return [...new Set(errors)].map(message => `layout navigationModes: ${message}`);
+}

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

@@ -8,6 +8,29 @@
    template ships a themeCss injected at body-end. Fonts load from the layout <head> (preconnect +
    stylesheet link) instead of a CSS @import, an @import chains render-blocking requests. */
 
+/* Photo-only hero rotation. Templates style these hooks, not the campaign carousel. */
+.hero-carousel .hero-playback {
+  position: absolute; z-index: 5; inset-block-start: 12px; inset-inline-end: 12px;
+  display: grid; place-items: center; width: 44px; height: 44px; padding: 8px;
+  border: 1px solid #ffffffb3; border-radius: 50%; background: #14241ce6; color: #fff;
+  cursor: pointer; touch-action: manipulation;
+}
+.hero-carousel .hero-playback svg { width: 20px; height: 20px; fill: currentColor; }
+.hero-carousel .hero-playback:disabled { cursor: default; opacity: .65; }
+.hero-carousel:focus-visible, .hero-carousel .hero-playback:focus-visible {
+  outline: 2px solid var(--ink); outline-offset: 4px;
+}
+.hero-carousel .hero-playback[hidden], .hero-carousel .hero-dots[hidden] { display: none !important; }
+.hero-carousel-instructions {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .hero-carousel .hero-slide, .hero-carousel .hero-slide-img {
+    animation: none !important; transition: none !important;
+  }
+}
+
 :root {
   --bg: #fbf6ef;
   --bg-tint: #f4ece1;
@@ -122,6 +145,15 @@ img {
 /* Typography (heading scale/family, paragraph rhythm) is TEMPLATE territory, see
    templates/default/theme.ts for Classic's. The base deliberately styles no bare h1-h4/p. */
 
+/* Explicit per-section heading overrides. Only opt-in heading hooks participate; body copy,
+   cards, islands and grid placement are untouched. An empty hook means the template default.
+   Desktop overrides must not displace the template's mobile/tablet composition. */
+@media (min-width: 1024px) {
+  [data-p60-heading-align="start"] { text-align: start !important; }
+  [data-p60-heading-align="center"] { text-align: center !important; }
+  [data-p60-heading-align="end"] { text-align: end !important; }
+}
+
 input, button, textarea, select {
   font: inherit;
 }
@@ -3758,6 +3790,90 @@ html:has(.donation-giftaid-dialog[open]) { overflow: hidden; }
   font-size: 0.95rem;
   line-height: 1.5;
 }
+
+/* Image credits (docs/imagery, IM-11): platform chrome in every render path, themed from the same
+   surface and border tokens as the consent centre so it reads as the site's own. Closed, a dialog is
+   display:none; the :target rule is the no-JavaScript path, the list shows inline at the page end. */
+.p60-credits {
+  width: 100%;
+  max-width: min(640px, calc(100vw - 2rem));
+  padding: 0;
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
+  border-radius: 16px;
+  background: var(--surface, #fff);
+  color: inherit;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
+}
+.p60-credits::backdrop {
+  background: rgba(0, 0, 0, 0.45);
+}
+.p60-credits-inner {
+  padding: 1.1rem 1.3rem;
+}
+.p60-credits-title {
+  margin: 0 0 0.75rem;
+  font-size: 1.1rem;
+}
+.p60-credits-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.6rem;
+  max-height: 60vh;
+  overflow: auto;
+}
+.p60-credits-item {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+.p60-credits-thumb {
+  flex: none;
+  width: 3.2rem;
+  height: 2.2rem;
+  object-fit: cover;
+  border-radius: 6px;
+}
+.p60-credits-links {
+  display: block;
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+.p60-credits-links a + a::before {
+  content: ' \00b7 ';
+}
+.p60-credits-note {
+  opacity: 0.8;
+}
+.p60-credits-actions {
+  margin: 1rem 0 0;
+  display: flex;
+  justify-content: flex-end;
+}
+.p60-credits-close {
+  font: inherit;
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.2));
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.p60-credits-fallback {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+  text-align: center;
+  opacity: 0.75;
+}
+.p60-credits:target {
+  display: block;
+  position: static;
+  margin: 1rem auto;
+}
 .consent-actions {
   display: flex;
   flex-wrap: wrap;
@@ -5357,3 +5473,6 @@ html:has(.donation-giftaid-dialog[open]) { overflow: hidden; }
 .search-page-box .site-search-input {
   flex: 1 1 auto;
 }
+
+/* A template's inline-flex/block styling must not defeat an editor-hidden onward link. */
+[data-p60-collection-link][hidden] { display: none !important; }

package/src/vendor/validator/presentation-proof.mjs

@@ -0,0 +1,53 @@
+// Small structural parser for capability proofs. CSS geometry and accessibility still need browser QA.
+const VOID = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+export function parsePresentationMarkup(html) {
+  const root = { tag: 'root', attrs: {}, children: [], parent: null };
+  const nodes = [], stack = [root];
+  for (const [token] of html.matchAll(/<!--[\s\S]*?-->|<(?:[^>"']|"[^"]*"|'[^']*')*>|[^<]+/g)) {
+    if (token.startsWith('<!--') || token.startsWith('<!')) continue;
+    const close = /^<\/\s*([\w:-]+)/.exec(token);
+    if (close) {
+      const index = stack.findLastIndex(node => node.tag === close[1].toLowerCase());
+      if (index > 0) stack.length = index;
+      continue;
+    }
+    const open = /^<\s*([\w:-]+)/.exec(token);
+    if (!open) { stack.at(-1).children.push(token); continue; }
+    const attrs = {};
+    for (const attribute of token.slice(open[0].length, -1).matchAll(/([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g)) {
+      const name = attribute[1].toLowerCase();
+      if (!Object.hasOwn(attrs, name)) attrs[name] = decode(attribute[2] ?? attribute[3] ?? attribute[4] ?? '');
+    }
+    const node = { tag: open[1].toLowerCase(), attrs, children: [], parent: stack.at(-1) };
+    node.parent.children.push(node);
+    nodes.push(node);
+    if (!VOID.has(node.tag) && !token.endsWith('/>')) stack.push(node);
+  }
+  return { root, nodes };
+}
+function decode(text) {
+  return text.replace(/&(#x[\da-f]+|#\d+|amp|lt|gt|quot|apos|nbsp);/gi, (match, entity) => {
+    if (!entity.startsWith('#')) return { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'", nbsp: ' ' }[entity.toLowerCase()];
+    const hex = entity[1].toLowerCase() === 'x';
+    const value = Number.parseInt(entity.slice(hex ? 2 : 1), hex ? 16 : 10);
+    return value > 0 && value <= 0x10ffff ? String.fromCodePoint(value) : match;
+  });
+}
+export function presentationText(node) {
+  return node.children.map(child => typeof child === 'string' ? decode(child) : presentationText(child)).join(' ').replace(/\s+/g, ' ').trim();
+}
+export function presentationVisible(node, { navigation = false } = {}) {
+  for (let current = node; current; current = current.parent) {
+    if (['template', 'script', 'style', 'noscript', 'textarea', 'select'].includes(current.tag)) return false;
+    // Dropdown panels may start closed. Hidden links and their own fields may not.
+    if (navigation && current !== node && 'data-p60-nav-menu' in current.attrs) continue;
+    if ('hidden' in current.attrs || current.attrs['aria-hidden'] === 'true' || /(?:display\s*:\s*none|visibility\s*:\s*hidden|opacity\s*:\s*0(?:[;\s]|$))/i.test(current.attrs.style ?? '')) return false;
+  }
+  return true;
+}
+export function presentationSignature(root, ignoredAttributes = () => []) {
+  const visit = node => typeof node === 'string' ? node.replace(/\s+/g, ' ').trim() : [node.tag,
+    Object.entries(node.attrs).filter(([key]) => !ignoredAttributes(node).includes(key)).sort(([a], [b]) => a.localeCompare(b)),
+    node.children.map(visit).filter(value => value !== '')];
+  return JSON.stringify(visit(root));
+}

package/src/vendor/validator/preview-v2.mjs

@@ -17,6 +17,7 @@ import islandRegistry from '../contract/v2/islands.json' with { type: 'json' };
 import contextContract from '../contract/v2/context.json' with { type: 'json' };
 import { resolveFixtureArt } from './fixture-art.mjs';
 import { buildSiteFixture, applyPreviewContent, pageComposition, PAGE_KEYS, resolveSectionFixture } from './site-context-v2.mjs';
+import { resolvedNavigationMode } from '../engine/presentation-capabilities.mjs';
 import { withResolvedIcons } from './icons.mjs';
 import { FONT_PROVIDER_ORIGIN, fontCssHref, fontStackFor, knownFamily, toProvider } from './fonts.mjs';
 import { normaliseFocus, previewActions } from './focus.mjs';
@@ -114,6 +115,7 @@ function islandSkeleton(name, ctx = {}, fx = STUDIO_FX) {
       return `<section class="hero-carousel" data-p60-preview-island="hero_carousel">
         ${previewNote(name)}
         <div class="hero-slides">${slides}</div>
+        <button class="hero-playback" type="button" aria-label="Pause photographs" disabled><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 5h4v14H7zm6 0h4v14h-4z" /></svg></button>
         <div class="hero-dots" aria-hidden="true">${Array.from({ length: dots }, (_, i) => `<span class="hero-dot${i === 0 ? ' hero-dot--active' : ''}"></span>`).join('')}</div>
       </section>`;
     }
@@ -143,7 +145,7 @@ function islandSkeleton(name, ctx = {}, fx = STUDIO_FX) {
         </div>
       </section>`;
     case 'language_switch':
-      return `<label class="language-switch" data-p60-preview-island="language_switch">${previewNote(name)}<span class="language-switch-label">Language</span><select class="language-switch-select" disabled><option>English</option><option>Cymraeg</option><option>العربية</option></select></label>`;
+      return ''; // Compatibility slot, not a promise of translated tenant content.
     case 'search':
       return `<div class="site-search" data-p60-preview-island="search">${previewNote(name)}<form class="site-search-form"><label class="site-search-label">Search this site</label><div class="site-search-fields"><input class="site-search-input" type="search" disabled><button class="site-search-submit" type="button" disabled>Search</button></div></form><ul class="site-search-results"><li class="site-search-result"><span class="site-search-kind">Article</span><a class="site-search-link" href="#">The Community Garden Opens Its Gates</a><p class="site-search-summary">Two years of digging and Saturday mornings in the rain: the Foundry Lane garden is open.</p></li></ul></div>`;
     case 'map': {
@@ -465,6 +467,12 @@ export async function renderStudioPreview(files, options = {}) {
   const treePage = surface;
   const baseSite = buildSiteFixture(manifest, { page: treePage });
   const site = resolveFixtureArt(applyPreviewContent(baseSite, options.previewContent ?? null), artOptions ?? {});
+  // Author fixtures may still carry the old selector options. Match the public host without
+  // changing their chosen locale/direction or mutating their source data.
+  site.locale.languages = [];
+  const headerMode = resolvedNavigationMode(manifest, site.nav.headerMode);
+  if (headerMode === undefined) delete site.nav.headerMode;
+  else site.nav.headerMode = headerMode;
   site.page.sections = PAGE_KEYS.includes(surface) ? pageOf(surface) : [];
   const listingFixture = contextContract.fixtures.pages?.[surface]?.collection;
   if (listingFixture && site.content[surface] && !Object.hasOwn(options.previewContent ?? {}, surface)) {
@@ -525,7 +533,7 @@ export async function renderStudioPreview(files, options = {}) {
         const source = files[`sections/${type}.liquid`];
         if (!entry || source == null) continue;
         const base = artOptions ? resolveFixtureArt(content ?? {}, artOptions) : resolveFixtureArt(content ?? {});
-        const section = resolveSectionFixture({ type, content: base }, site);
+        const section = resolveSectionFixture({ type, content: base }, site, manifest);
         if (type === 'homeHero') {
           const hasAuthoredStyle = options.previewContent?.pages?.[surface]?.some(entry => entry.key === entryInPage.key && Object.hasOwn(entry.content ?? {}, 'actionStyle'));
           section.actionStyle = (hasAuthoredStyle && section.actionStyle === 'button') || site.actions.widget === 'none' ? 'button' : 'widget';

package/src/vendor/validator/site-context-v2.mjs

@@ -3,6 +3,8 @@ import context from '../contract/v2/context.json' with { type: 'json' };
 import sections from '../contract/v2/sections.json' with { type: 'json' };
 import schema from '../contract/v2/site.schema.json' with { type: 'json' };
 import contentModel from '../contract/v2/content-model.json' with { type: 'json' };
+import { withHeadingAlignment } from '../engine/section-heading-alignment.mjs';
+import { resolvedNavigationMode, withCollectionLinkVisibility } from '../engine/presentation-capabilities.mjs';
 export { extractContentFootprint } from '../engine/content-footprint.mjs';
 export { contentModel };
 
@@ -25,6 +27,10 @@ export function composePage(manifest, page) {
 
 export function buildSiteFixture(manifest, { page = 'home', path } = {}) {
   const site = structuredClone(context.fixtures.site);
+  site.locale.languages = []; // One site's language, not a visitor language catalogue.
+  const headerMode = resolvedNavigationMode(manifest, site.nav.headerMode);
+  if (headerMode === undefined) delete site.nav.headerMode;
+  else site.nav.headerMode = headerMode;
   site.page = { key: page, path: path ?? (page === 'home' ? '/' : `/${page}`), sections: PAGE_KEYS.includes(page) ? composePage(manifest, page) : [] };
   return site;
 }
@@ -56,6 +62,14 @@ function validatePageSections(value, path, errors) {
     for (const [name, fieldValue] of Object.entries(section.content)) {
       const field = fields.get(name);
       if (!field) { errors.push(`${at}.content.${name}: not an authored ${section.type} field`); continue; }
+      if (name === 'headingAlignment' && !field.options?.includes(fieldValue)) {
+        errors.push(`${at}.content.headingAlignment: must be start, center or end; omit it for the template default`);
+        continue;
+      }
+      if (name === 'showCollectionLink') {
+        if (typeof fieldValue !== 'boolean') errors.push(`${at}.content.showCollectionLink: must be a boolean; omit it for the template default`);
+        continue;
+      }
       if (field.kind === 'items') {
         if (!Array.isArray(fieldValue)) { errors.push(`${at}.content.${name}: must be an array`); continue; }
         const itemFields = new Set(field.itemFields.map(item => item.name));
@@ -104,8 +118,9 @@ export function pageComposition(manifest, page, json) {
 }
 
 /** Keep missing fields missing so a generated label never becomes an authored field marker. */
-export function resolveSectionFixture(section, _site) {
-  return structuredClone(section.content ?? {});
+export function resolveSectionFixture(section, _site, manifest) {
+  const content = structuredClone(section.content ?? {});
+  return manifest === undefined ? content : withCollectionLinkVisibility(withHeadingAlignment(content, section.type, manifest), section.type, manifest);
 }
 
 export function emptyCollections(site) {