@port60/template-kit 0.8.0 → 0.10.0

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

@@ -0,0 +1,97 @@
+// The `site` tree for validator and preview renders (content model v1 — contract/v1/
+// content-model.json): ONE realistic organisation assembled from the canonical fixtures, with
+// `site.content.about` composed per-template from the section catalogue's samples for the
+// manifest's declared sections — the admin-authored page composition, previewed honestly.
+import contextContract from '../contract/v1/context.json' with { type: 'json' };
+import sectionCatalogue from '../contract/v1/sections.json' with { type: 'json' };
+
+export { contentModel, extractContentFootprint } from '../engine/content-footprint.mjs';
+import { contentModel } from '../engine/content-footprint.mjs';
+
+/** The canonical site fixture with `about` composed for this manifest's declared sections. */
+export function buildSiteFixture(manifest) {
+  const base = contextContract.fixtures.site;
+  const catalogueByType = new Map(sectionCatalogue.sections.map((s) => [s.type, s]));
+  const about = (manifest?.supports?.sections ?? [])
+    .map((type) => {
+      const entry = catalogueByType.get(type);
+      return entry ? { type, content: entry.sample ?? {} } : null;
+    })
+    .filter(Boolean);
+  return { ...base, content: { ...base.content, about } };
+}
+
+// ── preview-content.json (author-editable data) ────────────────────────────────
+// Data is free, SHAPE is fixed: a collection override must be an array of items whose fields all
+// exist in the model, within the collection's cap. Proofs always run on the canonical fixtures,
+// so custom data can never dodge a gate; this file only feeds the dev preview.
+
+const BRAND_FIELDS = new Set(['name', 'tagline', 'logoUrl', 'logoType', 'footerLogoUrl']);
+
+export function validatePreviewContent(json) {
+  const errors = [];
+  if (json === null || typeof json !== 'object' || Array.isArray(json)) {
+    return ['preview-content.json: must be an object of { collection: [items] } overrides'];
+  }
+  for (const [name, items] of Object.entries(json)) {
+    // `brand` is the one non-collection override: the organisation's own name and marks.
+    if (name === 'brand') {
+      if (items === null || typeof items !== 'object' || Array.isArray(items)) {
+        errors.push('preview-content.json: brand must be an object');
+        continue;
+      }
+      for (const field of Object.keys(items)) {
+        if (!BRAND_FIELDS.has(field)) {
+          errors.push(`preview-content.json: brand.${field} does not exist — brand carries ${[...BRAND_FIELDS].join(', ')}`);
+        }
+      }
+      continue;
+    }
+    const model = contentModel.collections[name];
+    if (!model) {
+      errors.push(`preview-content.json: '${name}' is not a content collection (see contract/v1/content-model.json)`);
+      continue;
+    }
+    if (!Array.isArray(items)) {
+      errors.push(`preview-content.json: '${name}' must be an array`);
+      continue;
+    }
+    if (items.length > model.cap) {
+      errors.push(`preview-content.json: '${name}' holds ${items.length} items — the collection is bounded at ${model.cap}`);
+    }
+    items.forEach((item, i) => {
+      if (item === null || typeof item !== 'object' || Array.isArray(item)) {
+        errors.push(`preview-content.json: ${name}[${i}] must be an object`);
+        return;
+      }
+      for (const field of Object.keys(item)) {
+        if (!model.item[field]) {
+          errors.push(`preview-content.json: ${name}[${i}].${field} does not exist in the model — a field that does not exist in production cannot exist in a preview`);
+        }
+      }
+      for (const [field, spec] of Object.entries(model.item)) {
+        const value = item[field];
+        if (value == null) continue;
+        const kind = spec.type === 'string[]' ? 'array' : spec.type;
+        const actual = Array.isArray(value) ? 'array' : typeof value;
+        if (kind !== 'object' && actual !== kind) {
+          errors.push(`preview-content.json: ${name}[${i}].${field} should be ${spec.type}`);
+        }
+      }
+    });
+  }
+  return errors;
+}
+
+/** Overlay validated preview content onto a site fixture (collections replaced wholesale). */
+export function applyPreviewContent(site, json) {
+  if (!json || typeof json !== 'object') return site;
+  const content = { ...site.content };
+  for (const [name, items] of Object.entries(json)) {
+    if (contentModel.collections[name] && Array.isArray(items)) content[name] = items;
+  }
+  const brand = json.brand && typeof json.brand === 'object' && !Array.isArray(json.brand)
+    ? { ...site.brand, ...json.brand }
+    : site.brand;
+  return { ...site, brand, content };
+}

package/src/vendor/validator/validate.mjs

@@ -20,10 +20,25 @@ import islandRegistry from '../contract/v1/islands.json' with { type: 'json' };
 import manifestSchema from '../contract/v1/manifest.schema.json' with { type: 'json' };
 import contextContract from '../contract/v1/context.json' with { type: 'json' };
 import fontCatalogue from '../contract/v1/fonts.json' with { type: 'json' };
+import layoutContract from '../contract/v1/layout.json' with { type: 'json' };
+import behaviourCatalogue from '../contract/v1/behaviours.json' with { type: 'json' };
+import { buildSiteFixture, extractContentFootprint, contentModel } from './site-context.mjs';
 
 const Ajv = Ajv2020.default ?? Ajv2020;
 
-export { dialect as contractDialect, sectionCatalogue, islandRegistry, contextContract };
+export { dialect as contractDialect, sectionCatalogue, islandRegistry, contextContract, behaviourCatalogue };
+
+// Templates are markup and attributes, NEVER code (docs/template-behaviours.md). These are hard
+// errors over the RAW liquid source — even inside comments, because there is no legitimate reason
+// for the tokens to appear at all. The handler pattern names real DOM event families rather than
+// matching any on* word, so attributes like `once` or `online` never false-positive.
+const FORBIDDEN_MARKUP = [
+  [/<script\b/i, 'a <script> tag'],
+  [/<(iframe|object|embed)\b/i, 'an embedded frame or plugin element'],
+  [/\son(?:click|dbl|aux|load|error|abort|unload|mouse|pointer|touch|drag|drop|wheel|scroll|key|focus|blur|input|change|submit|reset|invalid|select|toggle|copy|paste|cut|context|play|pause|ended|seek|stall|suspend|time|volume|waiting|canplay|animation|transition|message|resize|hashchange|popstate|storage|got|lost)[a-z]*\s*=/i,
+    'an inline event handler'],
+  [/javascript\s*:/i, 'a javascript: URL'],
+];
 
 export async function validateArtifact(files) {
   const errors = [];
@@ -41,6 +56,18 @@ export async function validateArtifact(files) {
   } catch (e) {
     return { errors: [`manifest.json unreadable: ${e.message}`], warnings, manifest: null };
   }
+  // preview-content.json is a DEV-ONLY data override: package excludes it and the intake
+  // refuses it — an artifact must never carry data, only shape.
+  if (has('preview-content.json')) {
+    errors.push('preview-content.json: development preview data never ships in an artifact — remove it (package excludes it automatically)');
+  }
+
+  // Content model v1: the footprint is decidable from the sources (closed dialect); unknown
+  // paths, dynamic indexing and tree aliasing are errors from site-context.mjs.
+  const contentAnalysis = extractContentFootprint(files);
+  errors.push(...contentAnalysis.errors);
+  const siteFx = buildSiteFixture(manifest);
+
   const ajv = new Ajv({ allErrors: true });
   const validateManifest = ajv.compile(manifestSchema);
   if (!validateManifest(manifest)) {
@@ -49,6 +76,96 @@ export async function validateArtifact(files) {
     }
   }
 
+  // Capability declarations are catalogue MATCHING metadata, not an entitlement shortcut. Keep
+  // them honest by requiring one corresponding template-facing surface. The mapping is deliberately
+  // structural: it proves the design can present a capability without inspecting tenant data or
+  // crossing the platform-owned transaction, identity and consent boundaries.
+  {
+    const sections = new Set(manifest?.supports?.sections ?? []);
+    const islands = new Set(manifest?.supports?.islands ?? []);
+    const pages = new Set(manifest?.supports?.pageTemplates ?? []);
+    const hasAny = (values, expected) => expected.some((value) => values.has(value));
+    const capabilitySurface = {
+      giving: () => islands.has('donation_widget'),
+      appeals: () => hasAny(sections, ['appealGrid', 'emergency']) || islands.has('donation_widget'),
+      worship: () => manifest?.supports?.worship === true || islands.has('next_prayer'),
+      courses: () => pages.has('course') || islands.has('course_enrol'),
+      membership: () => islands.has('member_menu'),
+      events: () => sections.has('events') || pages.has('events') || islands.has('events_carousel'),
+      articles: () => sections.has('articles') || hasAny(pages, ['articles', 'article']) || islands.has('latest_articles'),
+      services: () => sections.has('programmes'),
+      volunteering: () => sections.has('volunteering') || islands.has('volunteer_signup'),
+      forms: () => islands.has('form'),
+      resources: () => sections.has('resources'),
+      locations: () => sections.has('locations'),
+      newsletter: () => islands.has('newsletter_signup'),
+      i18n: () => islands.has('language_switch'),
+      search: () => islands.has('search'),
+      media: () => sections.has('media')
+    };
+    for (const capability of manifest?.requiresCapabilities ?? []) {
+      if (!capabilitySurface[capability]?.()) {
+        errors.push(`manifest: requiresCapabilities '${capability}' has no corresponding declared section, page template or island`);
+      }
+    }
+  }
+
+  // Markup and attributes, NEVER code — the machine-enforced JavaScript ban over every liquid
+  // source (docs/template-behaviours.md). Behaviour is engine-owned; a template wanting motion
+  // declares supports.behaviors and uses the data-p60-* grammar.
+  for (const [path, source] of Object.entries(files)) {
+    if (!path.endsWith('.liquid')) continue;
+    for (const [pattern, what] of FORBIDDEN_MARKUP) {
+      if (pattern.test(source)) {
+        errors.push(`${path}: contains ${what} — templates are markup and attributes, never code (behaviour is engine-owned; see the behaviour catalogue)`);
+      }
+    }
+  }
+
+  // Behaviour declaration and usage must agree in BOTH directions. Source-level, deliberately:
+  // usage often sits inside content-dependent branches the fixtures never take, so the grammar's
+  // presence in the source is the honest minimal proof.
+  {
+    const declaredBehaviours = new Set(manifest?.supports?.behaviors ?? []);
+    const liquidSource = Object.entries(files)
+      .filter(([path]) => path.endsWith('.liquid'))
+      .map(([, source]) => source)
+      .join('\n');
+    const PRIMARY_ATTR = {
+      reveal: [/data-p60-reveal\b/, 'data-p60-reveal'],
+      counter: [/data-p60-count\b/, 'data-p60-count'],
+      progress: [/data-p60-progress\b/, 'data-p60-progress'],
+      countdown: [/data-p60-countdown\b/, 'data-p60-countdown'],
+      accordion: [/data-p60-accordion\b/, 'data-p60-accordion'],
+      carousel: [/data-p60-carousel\b/, 'data-p60-carousel'],
+      stickyHeader: [/data-p60-sticky-header\b/, 'data-p60-sticky-header'],
+      stickyCta: [/data-p60-sticky-cta\b/, 'data-p60-sticky-cta'],
+      lightbox: [/data-p60-lightbox\b/, 'data-p60-lightbox'],
+      tabs: [/data-p60-tabs\b/, 'data-p60-tabs'],
+    };
+    for (const name of declaredBehaviours) {
+      const primary = PRIMARY_ATTR[name];
+      if (primary && !primary[0].test(liquidSource)) {
+        errors.push(`manifest: supports.behaviors declares '${name}' but no ${primary[1]} attribute appears in any liquid source`);
+      }
+    }
+    for (const [name, [pattern, attr]] of Object.entries(PRIMARY_ATTR)) {
+      if (pattern.test(liquidSource) && !declaredBehaviours.has(name)) {
+        errors.push(`behaviour '${name}': ${attr} appears in the markup but supports.behaviors does not declare it`);
+      }
+    }
+    if (/data-p60-carousel(?!-)\b/.test(liquidSource) && !/data-p60-slide\b/.test(liquidSource)) {
+      errors.push("behaviour 'carousel': a data-p60-carousel container needs data-p60-slide children");
+    }
+    if (/data-p60-lightbox(?!-)\b/.test(liquidSource) && !/data-p60-lightbox-item\b/.test(liquidSource)) {
+      errors.push("behaviour 'lightbox': a data-p60-lightbox group needs data-p60-lightbox-item anchors");
+    }
+    if (/data-p60-tabs\b/.test(liquidSource)
+        && (!/data-p60-tab(?!s)\b/.test(liquidSource) || !/data-p60-panel\b/.test(liquidSource))) {
+      errors.push("behaviour 'tabs': a data-p60-tabs container needs data-p60-tab controls and data-p60-panel panels");
+    }
+  }
+
   // Font knobs: the default family must be a real catalogue entry (the tenant-unset render uses
   // it), and the slot must declare the weights the template's typographic system needs.
   {
@@ -108,10 +225,20 @@ export async function validateArtifact(files) {
   // the data itself — in which case both directions are proven behaviourally (the worship
   // pattern): the populated fixture's sentinel must appear, and the EMPTY context must render it
   // away (derive or omit — nothing invented, nothing dangling).
+  // Sentinels are DERIVED from the canonical fixtures (the first item's display field), never
+  // hardcoded — the fixture data is free to become richer without touching a proof, and a proof
+  // can never drift from the data it renders.
+  const sentinelOf = (type, dataKey, field) =>
+    (contextContract.fixtures.sections?.[type]?.[dataKey] ?? [])[0]?.[field] ?? null;
   const WIDGET_SECTIONS = {
-    events: { island: 'events_carousel', dataKey: 'events', sentinel: 'Fixture Lantern Gala' },
-    whatsOn: { island: 'whats_on_strip', dataKey: 'infoEvents', sentinel: 'Fixture Open Morning' },
-    articles: { island: 'latest_articles', dataKey: 'latestArticles', sentinel: 'Fixture Winter Diary' }
+    events: { island: 'events_carousel', dataKey: 'events', sentinel: sentinelOf('events', 'events', 'name') },
+    whatsOn: { island: 'whats_on_strip', dataKey: 'infoEvents', sentinel: sentinelOf('whatsOn', 'infoEvents', 'name') },
+    articles: { island: 'latest_articles', dataKey: 'latestArticles', sentinel: sentinelOf('articles', 'latestArticles', 'title') },
+    campaigns: { island: null, dataKey: 'campaigns', sentinel: sentinelOf('campaigns', 'campaigns', 'title') },
+    resources: { island: null, dataKey: 'resources', sentinel: sentinelOf('resources', 'resources', 'title') },
+    locations: { island: null, dataKey: 'locations', sentinel: sentinelOf('locations', 'locations', 'name') },
+    volunteering: { island: 'volunteer_signup', dataKey: 'opportunities', sentinel: sentinelOf('volunteering', 'opportunities', 'title') },
+    media: { island: null, dataKey: 'media', sentinel: sentinelOf('media', 'media', 'title') }
   };
 
   // 2–4. Sections: catalogue membership, parse, fixture renders.
@@ -142,21 +269,26 @@ export async function validateArtifact(files) {
         const populated = await liquid.render(parsed, {
           section: {},
           brand: contextContract.fixtures.brand,
+          site: siteFx,
           ...dataFixture
         });
-        const placesIsland = splitIslandParts(populated).some((p) => p.island === widget.island);
+        const placesIsland = widget.island !== null
+          && splitIslandParts(populated).some((p) => p.island === widget.island);
         if (!placesIsland) {
-          if (!populated.includes(widget.sentinel)) {
+          if (widget.sentinel && !populated.includes(widget.sentinel)) {
             errors.push(
-              `section '${type}': neither places the ${widget.island} island nor renders the ${widget.dataKey} context — render the data (the fixture's "${widget.sentinel}" must appear) or place the island`
+              widget.island
+                ? `section '${type}': neither places the ${widget.island} island nor renders the ${widget.dataKey} context — render the data (the fixture's "${widget.sentinel}" must appear) or place the island`
+                : `section '${type}': does not render the ${widget.dataKey} context — the fixture's "${widget.sentinel}" must appear`
             );
           }
           const empty = await liquid.render(parsed, {
             section: {},
             brand: contextContract.fixtures.brand,
+            site: { ...siteFx, content: Object.fromEntries(Object.keys(siteFx.content).map((k) => [k, []])) },
             [widget.dataKey]: []
           });
-          if (empty.includes(widget.sentinel)) {
+          if (widget.sentinel && empty.includes(widget.sentinel)) {
             errors.push(`section '${type}': still shows fixture content with an empty ${widget.dataKey} — content must come from the context`);
           }
           if (/\bundefined\b|\bnull\b/.test(empty.replace(/data-[a-z-]+="[^"]*"/g, ''))) {
@@ -173,19 +305,23 @@ export async function validateArtifact(files) {
         const html = await liquid.render(parsed, {
           section: fixture,
           brand: contextContract.fixtures.brand,
+          site: siteFx,
           // Widget data rides the ordinary fixture renders too, so a hand-rendering section
           // doesn't fail the generic pass for want of its context.
           ...(widget ? (contextContract.fixtures.sections?.[type] ?? {}) : {})
         });
         if (type === 'homeHero' && fixtureName === 'sample') {
-          const probe = 'Hero photo one';
+          // The sample's own first image reference is the probe: `p60fixture:` refs are quote-free
+          // and survive HTML escaping, so "does the hero display the photos?" stays a substring check.
+          const probe = (fixture.images ?? [])[0]?.imageUrl ?? 'p60fixture:';
           homeHeroMultiShows = html.includes(probe)
             || splitIslandParts(html).some((p) => p.island === 'hero_carousel');
           // The single-photo path proven separately: same fixture, first photo only.
           try {
             const single = await liquid.render(parsed, {
               section: { ...fixture, images: (fixture.images ?? []).slice(0, 1) },
-              brand: contextContract.fixtures.brand
+              brand: contextContract.fixtures.brand,
+              site: siteFx
             });
             homeHeroSingleShows = single.includes(probe);
           } catch {
@@ -247,10 +383,12 @@ export async function validateArtifact(files) {
       if (parsedLayout) {
         try {
           const html = await liquid.render(parsedLayout, {
+            site: siteFx,
             brand: contextContract.fixtures.brand,
             nav: contextContract.fixtures.layout.nav,
             socials: contextContract.fixtures.layout.socials ?? [],
-            worship: contextContract.fixtures.layout.worship ?? null
+            worship: contextContract.fixtures.layout.worship ?? null,
+            locale: contextContract.fixtures.layout.locale
           });
           let contentSlots = 0;
           const layoutIslands = [];
@@ -281,10 +419,13 @@ export async function validateArtifact(files) {
             }
             if (manifest?.supports?.worship) {
               const nullHtml = await liquid.render(parsedLayout, {
+                site: siteFx,
                 brand: contextContract.fixtures.brand,
                 nav: contextContract.fixtures.layout.nav,
                 socials: contextContract.fixtures.layout.socials ?? [],
-                worship: null
+                worship: null,
+                site: { ...siteFx, content: { ...siteFx.content, schedules: [] } },
+                locale: contextContract.fixtures.layout.locale
               });
               if (nullHtml.includes(worshipProbe)) {
                 errors.push('layout: worship rail content appears even when `worship` is null — always branch on it (tenants without a schedule must not see a rail)');
@@ -320,7 +461,7 @@ export async function validateArtifact(files) {
       continue;
     }
     try {
-      const html = await liquid.render(parsedPage, { ...fixture, brand: contextContract.fixtures.brand });
+      const html = await liquid.render(parsedPage, { ...fixture, site: siteFx, brand: contextContract.fixtures.brand });
       for (const part of splitIslandParts(html)) {
         if (part.island === CONTENT_SLOT) {
           errors.push(`page template '${pageName}': uses {% content %} — that tag is layout-only`);
@@ -352,5 +493,64 @@ export async function validateArtifact(files) {
     errors.push('assets/theme.css missing or empty — a template must ship its look');
   }
 
-  return { errors, warnings, manifest };
+  // 6b. Layout contract (contract/v1/layout.json). Platform pages render through the content SEAM
+  // (.container / .full); a template STYLES those to place content, never a parallel content container.
+  // The rule is DATA — the seam token, the allowed selectors and the message all come from the contract
+  // file; this only implements the check KIND (a non-seam selector sizing its width off the token).
+  {
+    const css = has('assets/theme.css') ? read('assets/theme.css') : '';
+    const stripped = css.replace(/\/\*[\s\S]*?\*\//g, ' '); // drop comments so an example can't trip it
+    const RULE = /([^{}]+)\{([^{}]*)\}/g;
+    for (const rule of layoutContract.rules ?? []) {
+      if (rule.kind !== 'css-width-off-token') continue;
+      const token = rule.token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const sizesOffToken = new RegExp(`\\b(?:min-|max-)?(?:width|inline-size)\\s*:[^;]*var\\(\\s*${token}\\b`);
+      const isSeam = new RegExp(`\\.(?:${rule.allow.join('|')})(?![\\w-])`);
+      const offenders = new Set();
+      let m;
+      RULE.lastIndex = 0;
+      while ((m = RULE.exec(stripped)) !== null) {
+        if (!sizesOffToken.test(m[2])) continue; // only rules that size a box off the token
+        for (const sel of m[1].split(',')) {
+          const s = sel.trim();
+          if (s && !isSeam.test(s)) offenders.add(s);
+        }
+      }
+      for (const sel of [...offenders].sort()) {
+        errors.push(`theme: selector '${sel}' ${rule.message}`);
+      }
+    }
+  }
+
+  // Open enums, proven survivable (content model v1 discipline 2): a template whose footprint
+  // reads site.content.events must survive a registration mode it has never heard of — new modes
+  // WILL arrive within the major. No throw, and no undefined/null literal leaking into markup.
+  if (contentAnalysis.footprint.includes('content.events')) {
+    const futureEvent = {
+      ...(siteFx.content.events[0] ?? {}),
+      id: 'ffffffff-ffff-4fff-8fff-ffffffffffff',
+      name: 'Open Enum Probe Event',
+      registrationMode: 'X_FUTURE_MODE',
+      detailHref: '/events?event=ffffffff-ffff-4fff-8fff-ffffffffffff'
+    };
+    const doctored = { ...siteFx, content: { ...siteFx.content, events: [...siteFx.content.events, futureEvent] } };
+    for (const type of manifest?.supports?.sections ?? []) {
+      const file = `sections/${type}.liquid`;
+      if (!has(file) || !/\bsite\s*[.[]/.test(read(file))) continue;
+      try {
+        const html = await liquid.render(liquid.parse(read(file)), {
+          section: catalogueByType.get(type)?.sample ?? {},
+          brand: contextContract.fixtures.brand,
+          site: doctored
+        });
+        if (/\bundefined\b|\bnull\b/.test(html.replace(/data-[a-z-]+="[^"]*"/g, ''))) {
+          errors.push(`section '${type}': renders 'undefined'/'null' literals for an unknown event registrationMode — the enum is OPEN, branch on the modes you style and fall back for the rest`);
+        }
+      } catch (e) {
+        errors.push(`section '${type}': failed rendering an unknown event registrationMode — the enum is OPEN and new modes will arrive (${e.message})`);
+      }
+    }
+  }
+
+  return { errors, warnings, manifest, contentFootprint: contentAnalysis.footprint, minContentVersion: contentAnalysis.minModelVersion };
 }

package/starter/assets/theme.css

@@ -1,4 +1,4 @@
-/* starter theme — a deliberately distinct look (midnight/emerald) proving the artifact owns the skin */
+/* starter theme, a deliberately distinct look (midnight/emerald) proving the artifact owns the skin */
 :root:root {
   --bg: #0e1614;
   --bg-tint: #14201d;
@@ -39,13 +39,13 @@ strong { color: var(--ink); }
 .lq-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
 @media (max-width: 900px) { .lq-cta-grid { grid-template-columns: 1fr; } }
 
-/* The one font slot — headings above already follow it; body text too. */
+/* The one font slot, headings above already follow it; body text too. */
 body { font-family: ' IBM Plex Sans Arabic', var(--p60s-siteFont, 'Inter'), ui-sans-serif, system-ui, sans-serif; }
 
-/* ── Home hero (supports.heroImagery — the reference treatment) ─────────────────────────────
+/* ── Home hero (supports.heroImagery, the reference treatment) ─────────────────────────────
    The no-photo state is a DESIGNED gradient (rule: derive or omit, never a placeholder image).
    Photos get a scrim built from the palette itself via color-mix, so uploads tone into the
-   template — and any palette change re-tones them for free. Never place a hero photo raw. */
+   template, and any palette change re-tones them for free. Never place a hero photo raw. */
 .lq-homehero {
   position: relative;
   padding: 4.5rem 0;
@@ -73,7 +73,7 @@ body { font-family: ' IBM Plex Sans Arabic', var(--p60s-siteFont, 'Inter'), ui-s
 .lq-homehero-lead { color: var(--muted); max-width: 46ch; margin: 0.9rem 0 1.4rem; }
 .lq-homehero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
 
-/* The platform hero_carousel island, styled through its class API — the island owns motion
+/* The platform hero_carousel island, styled through its class API, the island owns motion
    (auto-advance, swipe, reduced-motion), this owns the look. Each slide's .hero-slide-scrim is
    the same palette treatment as a single photo. */
 .lq-homehero--carousel { overflow: hidden; }
@@ -114,7 +114,7 @@ body { font-family: ' IBM Plex Sans Arabic', var(--p60s-siteFont, 'Inter'), ui-s
 }
 .lq-homehero--carousel .hero-dot--active { background: var(--accent); }
 
-/* ── Vista framing (photoFraming 'whole') — the hero adapts to the PHOTO's shape ───────────── */
+/* ── Vista framing (photoFraming 'whole'), the hero adapts to the PHOTO's shape ───────────── */
 .lq-homehero--vista { padding-top: 0; }
 .lq-vista { position: relative; overflow: hidden; }
 .lq-vista-sizer { display: block; width: 100%; height: auto; max-height: 74vh; object-fit: cover; }
@@ -153,7 +153,7 @@ body { font-family: ' IBM Plex Sans Arabic', var(--p60s-siteFont, 'Inter'), ui-s
   .lq-vista-sizer { min-height: 160px; }
 }
 
-/* Vista + form (1.5.2): the widget rides the seam — grid pulled up over the band (under the
+/* Vista + form (1.5.2): the widget rides the seam, grid pulled up over the band (under the
    280px floor), gradient filling where the image ends; narrow screens stack back underneath. */
 .lq-homehero--vista-form { padding-bottom: 2.6rem; }
 .lq-vista-overlap { position: relative; z-index: 1; margin-top: -240px; align-items: start; }
@@ -161,7 +161,7 @@ body { font-family: ' IBM Plex Sans Arabic', var(--p60s-siteFont, 'Inter'), ui-s
   .lq-vista-overlap { margin-top: 0; padding-top: 1.6rem; }
 }
 
-/* People / team cards — grid to single column on phones. */
+/* People / team cards, grid to single column on phones. */
 .lq-people {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
@@ -187,3 +187,49 @@ body { font-family: ' IBM Plex Sans Arabic', var(--p60s-siteFont, 'Inter'), ui-s
 @media (max-width: 640px) {
   .lq-people { grid-template-columns: 1fr; }
 }
+
+/* Campaigns, the same quiet rail as values: title, summary, one action. */
+.lq-campaigns { padding: 3.5rem 0; }
+.lq-campaign-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; max-width: 700px; }
+.lq-campaign h3 { margin: 0 0 0.25rem; }
+.lq-campaign p { margin: 0 0 0.6rem; }
+
+/* Behaviours (engine-wired via data-p60-*, docs: Motion and behaviour guide). Everything that
+   hides pre-behaviour content is .p60-js-scoped: the no-JS render stays complete. */
+
+/* Reveal: the values rail rises in with a stagger. */
+.p60-js .lq-value-rail li {
+  opacity: 0;
+  transform: translateY(0.6rem);
+  transition: opacity 480ms ease, transform 480ms ease;
+  transition-delay: calc(var(--p60-reveal-index, 0) * 90ms);
+}
+.p60-js .lq-value-rail.is-revealed li { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: reduce) {
+  .p60-js .lq-value-rail li { opacity: 1; transform: none; transition: none; }
+}
+
+/* Behaviour carousel: the standard hero's photo stack (the vista framings use the island). */
+.lq-hero-slides { position: absolute; inset: 0; overflow: hidden; }
+.lq-hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.p60-js .lq-hero-slide { opacity: 0; transition: opacity 700ms ease; }
+.p60-js .lq-hero-slide.is-active { opacity: 1; }
+.lq-hero-slides .p60-carousel-dots {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0.9rem;
+  display: flex;
+  justify-content: center;
+  gap: 0.45rem;
+  z-index: 2;
+}
+.lq-hero-slides .p60-carousel-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+.lq-hero-slides .p60-carousel-dot--active { background: rgba(255, 255, 255, 0.95); }

package/starter/layout.liquid

@@ -1,22 +1,21 @@
 {% comment %}
-  The starter's chrome — header/nav/footer around the {% content %} slot. It reuses the platform
+  The starter's chrome, header/nav/footer around the {% content %} slot. It reuses the platform
   chrome classes (.site-header/.site-nav/…) so the base mechanics (sticky header, burger
   breakpoint, dropdown hover) apply, and emits the documented behaviour attributes
   (data-nav-burger, #site-nav) so the platform tail script wires the mobile burger. Identity is
-  PLACED, never rebuilt: {% island 'member_menu' %}. The footer derives everything from brand/nav —
-  no fabricated copy (derive or omit).
+  PLACED, never rebuilt: {% island 'member_menu' %}. The footer derives everything from brand/nav, no fabricated copy (derive or omit).
 {% endcomment %}
 <header class="site-header">
   <div class="container header-inner">
     <a class="brand-lockup" href="/">
-      {% if brand.logoUrl and brand.logoType != 'icon' %}
-        <img class="brand-logo" src="{{ brand.logoUrl }}" alt="{{ brand.name }}">
-      {% elsif brand.logoUrl %}
-        <img class="brand-logo-icon" src="{{ brand.logoUrl }}" alt="">
-        <strong>{{ brand.name }}</strong>
+      {% if site.brand.logoUrl and site.brand.logoType != 'icon' %}
+        <img class="brand-logo" src="{{ site.brand.logoUrl }}" alt="{{ site.brand.name }}">
+      {% elsif site.brand.logoUrl %}
+        <img class="brand-logo-icon" src="{{ site.brand.logoUrl }}" alt="">
+        <strong>{{ site.brand.name }}</strong>
       {% else %}
         <span class="brand-mark" aria-hidden="true">♥</span>
-        <strong>{{ brand.name }}</strong>
+        <strong>{{ site.brand.name }}</strong>
       {% endif %}
     </a>
 
@@ -27,7 +26,7 @@
     </button>
 
     <nav class="site-nav" id="site-nav" aria-label="Primary">
-      {% for item in nav.items %}
+      {% for item in site.nav.items %}
         {% if item.children %}
           <span class="nav-dropdown">
             <a href="{{ item.href }}" class="nav-dropdown-toggle" aria-haspopup="true">{{ item.label }} ▾</a>
@@ -55,20 +54,20 @@
 <footer class="site-footer">
   <div class="container footer-grid">
     <div>
-      <p class="lq-kicker">{{ brand.name }}</p>
-      {% if brand.tagline %}<h2>{{ brand.tagline }}</h2>{% endif %}
+      <p class="lq-kicker">{{ site.brand.name }}</p>
+      {% if site.brand.tagline %}<h2>{{ site.brand.tagline }}</h2>{% endif %}
     </div>
     <div class="footer-links">
-      {% comment %} A tenant-curated footer menu when they've built one, else the main nav. {% endcomment %}
-      {% if nav.footer.size > 0 %}
-        {% for item in nav.footer %}
+      {% comment %} A tenant-curated footer menu when they've built one, else the main site.nav. {% endcomment %}
+      {% if site.nav.footer.size > 0 %}
+        {% for item in site.nav.footer %}
           <a href="{{ item.href }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }}</a>
           {% for child in item.children %}
             <a href="{{ child.href }}"{% if child.external %} target="_blank" rel="noopener"{% endif %}>{{ child.label }}</a>
           {% endfor %}
         {% endfor %}
       {% else %}
-        {% for item in nav.items %}
+        {% for item in site.nav.items %}
           <a href="{{ item.href }}">{{ item.label }}</a>
         {% endfor %}
       {% endif %}

package/starter/manifest.json

@@ -1,9 +1,9 @@
 {
   "name": "starter",
-  "version": "1.6.0",
+  "version": "1.9.0",
   "format": "port60-liquid@1",
   "label": "Starter",
-  "description": "The reference template for the Port60 dialect — the developer docs' worked example and the base to copy when building your own. 1.1.0 adds the layout slot: the template owns the header, navigation and footer chrome.",
+  "description": "The reference template for the Port60 dialect, the developer docs' worked example and the base to copy when building your own. 1.1.0 adds the layout slot: the template owns the header, navigation and footer chrome.",
   "supports": {
     "pages": [
       "home",
@@ -14,7 +14,8 @@
       "hero",
       "values",
       "cta",
-      "people"
+      "people",
+      "campaigns"
     ],
     "islands": [
       "donation_widget",
@@ -22,7 +23,11 @@
       "hero_carousel"
     ],
     "layout": true,
-    "heroImagery": true
+    "heroImagery": true,
+    "behaviors": [
+      "reveal",
+      "carousel"
+    ]
   },
   "settings": {
     "schema": [
@@ -41,7 +46,7 @@
       }
     ]
   },
-  "changelog": "Versionless source workflow — no content changes.",
+  "changelog": "Demonstrates the behaviour catalogue: the values rail reveals with a stagger and a multi-photo standard hero becomes an engine-wired carousel.",
   "imagery": {
     "hero": {
       "idealAspect": "16:9",