@port60/template-kit 0.20.4 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@port60/template-kit",
-  "version": "0.20.4",
+  "version": "0.21.0",
   "description": "Build Port60 site templates locally: scaffold, live-preview, validate against the platform contract, and package for studio upload. AI-agent ready: every scaffold ships AGENTS.md and validate emits machine-readable JSON.",
   "type": "module",
   "bin": {

package/src/lib/agentsMd.mjs

@@ -134,6 +134,13 @@ excludes it, and conformance proofs always run on the canonical fixtures.
   \`imageUrl\`; no entity lookup belongs in a template. Preserve a text-only card when its image
   is absent, omit an absent card and keep normal navigation links. Validation proves the explicit
   declaration; missing declarations never enable the editor feature automatically.
+- Field markers are optional and additive: mark the node that shows a field with
+  \`data-p60-field="title"\`, or \`data-p60-field="items.{{ forloop.index0 }}.label"\` for an
+  entry in a list, and declare \`supports.fieldMarkers: true\`. The charity then types into the
+  real heading on the page instead of into a side panel. The address is the field's name inside
+  that section's own content, and the marked node holds that field and nothing else, so wrap the
+  value in a span when punctuation or other copy sits beside it. Mark what you like; the editor
+  puts a caret only in plain text, and a marker naming nothing is a warning, never a failure.
 - Dynamic sections include appeals (\`causes\`), programmes (\`services\`), resources and
   locations. Derive or omit when a collection is empty and use the supplied URLs rather than
   constructing routes.

package/src/vendor/contract/v1/context.json

@@ -591,7 +591,7 @@
       "availableIn": [
         "section:campaigns"
       ],
-      "description": "What the tenant calls their campaigns section (\"Campaigns\" by default), the heading fallback.",
+      "description": "The platform word for the campaigns collection (\"Campaigns\"), the section's heading fallback. It does not vary: a tenant's own word for a link lives in their menu.",
       "deprecated": true
     },
     {

package/src/vendor/contract/v1/manifest.schema.json

@@ -154,6 +154,12 @@
           "default": false,
           "description": "True when the layout displays the optional single site.nav.items[].megaMenu.promo card inside each expanded top-level menu. Requires supports.layout. The validator proves title, text, image and linked label render together; image-free and absent highlights must remain safe. The platform resolves linked courses, events and campaigns into the same promo fields as custom highlights. This flag does not enable a general mega menu or control column counts. Missing or false disables highlight editing for this exact template version."
         },
+        "fieldMarkers": {
+          "type": "boolean",
+          "default": false,
+          "description": "True when the sections mark which node shows which field with data-p60-field, so the editor can put the caret on the page instead of in a side panel. The address is inside that section's own content: data-p60-field=\"title\", or data-p60-field=\"items.{{ forloop.index0 }}.label\" for an entry in a list. Purely additive: the attribute is markup, the contract is untouched, and a template that marks nothing keeps the section-level editor. The validator reads the marks from the source and warns on any that does not name a field of that section. Missing or false leaves this exact template version editing in the panel.",
+          "$comment": "Follows the navigationHighlights pattern: declared honesty, proven by the validator."
+        },
         "heroImagery": {
           "type": "boolean",
           "default": false,

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

@@ -623,6 +623,32 @@ a.eyebrow:hover {
   max-width: 640px;
 }
 
+.campaign-form {
+  margin-block: 2rem;
+}
+
+/* An embedded form belongs to the campaign, not a second page inside it. */
+.p60-form--embedded {
+  padding: clamp(1rem, 3vw, 2rem);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm, 12px);
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.p60-form--embedded .p60-form-control {
+  background: var(--bg);
+  border-color: color-mix(in srgb, var(--ink) 35%, var(--surface));
+}
+
+.p60-form--embedded .p60-form-control:focus {
+  border-color: var(--primary);
+}
+
+.p60-form--embedded > :last-child {
+  margin-block-end: 0;
+}
+
 .p60-form-intro {
   color: var(--muted);
   margin: 0 0 1.5rem;
@@ -636,6 +662,18 @@ a.eyebrow:hover {
   margin-bottom: 1.15rem;
 }
 
+.p60-form-respondent {
+  min-inline-size: 0;
+  border: 0;
+  padding: 0 0 0.5rem;
+  margin: 0 0 1.5rem;
+  border-block-end: 1px solid var(--line);
+}
+
+.p60-form-respondent > legend {
+  margin-block-end: 1rem;
+}
+
 .p60-form-label {
   display: block;
   font-weight: 600;
@@ -717,11 +755,18 @@ textarea.p60-form-control {
   width: 1.05rem;
   height: 1.05rem;
   flex: 0 0 auto;
-  margin: 0.15rem 0 0;
-  accent-color: var(--primary);
+  margin: 0.25rem 0 0;
+  padding: 0;
+  accent-color: var(--accent, var(--primary));
   cursor: pointer;
 }
 
+.p60-form-check input:is([type='checkbox'], [type='radio']):focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 3px;
+  box-shadow: none;
+}
+
 .p60-form-check.has-error span {
   color: var(--danger);
 }
@@ -4162,6 +4207,8 @@ textarea.p60-form-control {
 }
 .member-course-attendance li:last-child { border-bottom: none; }
 .member-course-attendance li.is-absent { opacity: 0.7; }
+/* Which class this mark was, for a learner who attends more than one. */
+.member-course-attendance-class { display: block; font-size: 0.8em; font-style: normal; opacity: 0.75; }
 
 /* C1.9 breaks (informational) + C1.8 course materials (presigned downloads). */
 .member-course-breaks {

package/src/vendor/validator/validate.mjs

@@ -395,6 +395,48 @@ export async function validateArtifact(files) {
     }
   }
 
+  // 5. FIELD MARKERS: which node shows which field, so the editor can put the caret on the page
+  // instead of in a side panel. Source-level, like behaviours: a marker often sits inside a
+  // content-dependent branch the fixtures never take, and its presence in the source is the honest
+  // proof. A marker is an address inside that section's own content: `title`, or `items.0.label`
+  // for a list, where the index is usually a Liquid expression and stands for any position.
+  {
+    const MARKER = /data-p60-field="([^"]*)"/g;
+    const fieldsOf = (type) => new Map((catalogueByType.get(type)?.fields ?? []).map((f) => [f.name, f]));
+    const marked = [];
+    for (const type of manifest?.supports?.sections ?? []) {
+      const source = has(`sections/${type}.liquid`) ? read(`sections/${type}.liquid`) : '';
+      const fields = fieldsOf(type);
+      for (const [, raw] of source.matchAll(MARKER)) {
+        marked.push(type);
+        // An index written as Liquid stands for whichever item this is.
+        const steps = raw.replace(/\{\{[^}]*\}\}/g, '#').split('.');
+        const field = fields.get(steps[0]);
+        const named = steps.length === 1
+          ? Boolean(field) && field.kind !== 'items'
+          : steps.length === 3
+            && Boolean(field) && field.kind === 'items'
+            && (steps[1] === '#' || /^\d+$/.test(steps[1]))
+            && (field.itemFields ?? []).some((f) => f.name === steps[2]);
+        if (!named) {
+          warnings.push(`section '${type}': data-p60-field="${raw}" does not name a field of this section, the editor will ignore it (a field of ${type}, or items.<index>.<field> for a list)`);
+        }
+      }
+    }
+    for (const [path, source] of Object.entries(files)) {
+      if (path.endsWith('.liquid') && !path.startsWith('sections/') && MARKER.test(source)) {
+        warnings.push(`${path}: data-p60-field marks a section's own content, and there is none here; the editor ignores markers outside sections/`);
+      }
+      MARKER.lastIndex = 0;
+    }
+    if (manifest?.supports?.fieldMarkers && marked.length === 0) {
+      errors.push('manifest: supports.fieldMarkers is declared but no section marks a field, the editor would offer typing on the page and find nothing to type into');
+    }
+    if (!manifest?.supports?.fieldMarkers && marked.length > 0) {
+      warnings.push('manifest: sections carry data-p60-field markers but supports.fieldMarkers is not declared, declare it so the editor offers typing on the page');
+    }
+  }
+
   // Hero-imagery honesty, checked BEHAVIOURALLY (the worship pattern). The homeHero sample
   // fixture carries photographs whose data URIs embed a quote-free marker that survives HTML
   // escaping, so "does the rendered hero display the tenant's photos?" is a substring check,

package/starter/manifest.json

@@ -1,11 +1,12 @@
 {
   "name": "starter",
-  "version": "1.13.0",
+  "version": "1.14.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.",
   "supports": {
     "navigationHighlights": false,
+    "fieldMarkers": true,
     "pages": [
       "home",
       "about"
@@ -93,7 +94,7 @@
       }
     ]
   },
-  "changelog": "Places the site search box in the header: a typeahead across events, articles, services, campaigns, appeals, volunteering and documents, with the results page at /search.",
+  "changelog": "Marks which node shows which field (data-p60-field), so the editor puts the caret on the page itself instead of in a side panel.",
   "imagery": {
     "hero": {
       "idealAspect": "16:9",

package/starter/sections/campaigns.liquid

@@ -7,8 +7,8 @@
 {% if site.content.campaigns.size > 0 %}
 <section class="lq-site.content.campaigns">
   <div class="container">
-    <h2>{{ section.heading | default: campaignsLabel }}</h2>
-    {% if section.text %}<p>{{ section.text }}</p>{% endif %}
+    <h2 data-p60-field="heading">{{ section.heading | default: campaignsLabel }}</h2>
+    {% if section.text %}<p data-p60-field="text">{{ section.text }}</p>{% endif %}
     <ul class="lq-campaign-list">
       {% for campaign in site.content.campaigns %}
       <li class="lq-campaign">

package/starter/sections/cta.liquid

@@ -1,8 +1,8 @@
 <section class="lq-cta">
   <div class="container lq-cta-grid">
     <div>
-      <h2>{{ section.heading }}</h2>
-      {% if section.text %}<p>{{ section.text }}</p>{% endif %}
+      <h2 data-p60-field="heading">{{ section.heading }}</h2>
+      {% if section.text %}<p data-p60-field="text">{{ section.text }}</p>{% endif %}
       <a class="button button-primary" href="{{ section.buttonHref }}">{{ section.buttonLabel }}</a>
     </div>
     <div class="lq-cta-widget">

package/starter/sections/hero.liquid

@@ -1,7 +1,14 @@
+{% comment %}
+  FIELD MARKERS (supports.fieldMarkers): data-p60-field says which node shows which field, and the
+  editor puts the caret there instead of in a side panel. Two rules. The address is the field's
+  name inside this section's own content. The marked node holds that field and nothing else, so
+  wrap the value in a span when there is punctuation or other copy beside it (people.liquid shows
+  one). Marking is optional and additive: an unmarked template is edited in the panel as before.
+{% endcomment %}
 <section class="lq-hero">
   <div class="container">
-    {% if section.eyebrow %}<p class="lq-kicker">{{ section.eyebrow }}</p>{% endif %}
-    <h1>{{ section.title }}</h1>
+    {% if section.eyebrow %}<p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow }}</p>{% endif %}
+    <h1 data-p60-field="title">{{ section.title }}</h1>
     <div class="lq-hero-body">{{ section.bodyHtml | raw }}</div>
   </div>
 </section>

package/starter/sections/homeHero.liquid

@@ -38,9 +38,9 @@
     {% if heroCount > 1 %}{% island 'hero_carousel' %}{% else %}<div class="lq-vista-scrim" aria-hidden="true"></div>{% endif %}
     <div class="lq-vista-copy">
       <div class="container">
-        <p class="lq-kicker">{{ section.eyebrow | default: site.brand.name }}</p>
-        <h1>{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
-        {% if section.lead %}<p class="lq-homehero-lead">{{ section.lead }}</p>{% endif %}
+        <p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow | default: site.brand.name }}</p>
+        <h1 data-p60-field="title">{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
+        {% if section.lead %}<p class="lq-homehero-lead" data-p60-field="lead">{{ section.lead }}</p>{% endif %}
         <div class="lq-homehero-actions">
           <a class="button button-primary" href="{{ section.primaryHref | default: '/donate' }}">{{ section.primaryLabel | default: 'Donate now' }}</a>
           <a class="button" href="{{ section.secondaryHref | default: '/about' }}">{{ section.secondaryLabel | default: 'Our story' }}</a>
@@ -59,9 +59,9 @@
   </div>
   <div class="container lq-homehero-inner lq-vista-overlap">
     <div>
-      <p class="lq-kicker">{{ section.eyebrow | default: site.brand.name }}</p>
-      <h1>{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
-      {% if section.lead %}<p class="lq-homehero-lead">{{ section.lead }}</p>{% endif %}
+      <p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow | default: site.brand.name }}</p>
+      <h1 data-p60-field="title">{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
+      {% if section.lead %}<p class="lq-homehero-lead" data-p60-field="lead">{{ section.lead }}</p>{% endif %}
       <div class="lq-homehero-actions">
         {% if section.action or section.primaryLabel %}<a class="button button-primary" href="{{ section.primaryHref | default: section.action.href | default: '#donate' }}">{{ section.primaryLabel | default: section.action.label | default: 'Donate now' }}</a>{% endif %}
         <a class="button" href="{{ section.secondaryHref | default: '/about' }}">{{ section.secondaryLabel | default: 'Our story' }}</a>
@@ -94,9 +94,9 @@
   {% endif %}
   <div class="container lq-homehero-inner">
     <div>
-      <p class="lq-kicker">{{ section.eyebrow | default: site.brand.name }}</p>
-      <h1>{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
-      {% if section.lead %}<p class="lq-homehero-lead">{{ section.lead }}</p>{% endif %}
+      <p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow | default: site.brand.name }}</p>
+      <h1 data-p60-field="title">{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
+      {% if section.lead %}<p class="lq-homehero-lead" data-p60-field="lead">{{ section.lead }}</p>{% endif %}
       <div class="lq-homehero-actions">
         {% if section.actionStyle == 'button' or section.givingStyle == 'button' %}
         {% if section.action or section.primaryLabel %}<a class="button button-primary" href="{{ section.primaryHref | default: section.action.href | default: '/donate' }}">{{ section.primaryLabel | default: section.action.label | default: 'Donate now' }}</a>{% endif %}

package/starter/sections/people.liquid

@@ -7,18 +7,19 @@
   <div class="container">
     {% if section.eyebrow or section.heading or section.text %}
     <div class="lq-section-head">
-      {% if section.eyebrow %}<p class="lq-kicker">{{ section.eyebrow }}</p>{% endif %}
-      {% if section.heading %}<h2>{{ section.heading }}</h2>{% endif %}
-      {% if section.text %}<p class="lq-muted">{{ section.text }}</p>{% endif %}
+      {% if section.eyebrow %}<p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow }}</p>{% endif %}
+      {% if section.heading %}<h2 data-p60-field="heading">{{ section.heading }}</h2>{% endif %}
+      {% if section.text %}<p class="lq-muted" data-p60-field="text">{{ section.text }}</p>{% endif %}
     </div>
     {% endif %}
     <div class="lq-people">
       {% for person in section.items %}
       <article class="lq-person">
         {% if person.imageUrl %}<img class="lq-person-photo" src="{{ person.imageUrl }}" alt="" loading="lazy">{% endif %}
-        <h3>{{ person.name }}</h3>
-        <p class="lq-person-role">{{ person.role }}</p>
-        {% if person.statement %}<p class="lq-person-statement">“{{ person.statement }}”</p>{% endif %}
+        <h3 data-p60-field="items.{{ forloop.index0 }}.name">{{ person.name }}</h3>
+        <p class="lq-person-role" data-p60-field="items.{{ forloop.index0 }}.role">{{ person.role }}</p>
+        {%- comment -%} The quotation marks are ours, so the marker goes on a span holding the statement alone. {%- endcomment -%}
+        {% if person.statement %}<p class="lq-person-statement">“<span data-p60-field="items.{{ forloop.index0 }}.statement">{{ person.statement }}</span>”</p>{% endif %}
       </article>
       {% endfor %}
     </div>

package/starter/sections/values.liquid

@@ -1,6 +1,6 @@
 <section class="lq-values">
   <div class="container">
-    <h2>{{ section.heading | default: "What guides us" }}</h2>
+    <h2 data-p60-field="heading">{{ section.heading | default: "What guides us" }}</h2>
     {% comment %}
       data-p60-reveal-group: the engine stamps --p60-reveal-index on each child and adds
       is-revealed when the rail scrolls into view, the stagger and motion are OURS, in theme.css,
@@ -10,8 +10,8 @@
       {% for item in section.items %}
       <li>
         <span class="lq-value-dot"></span>
-        <h3>{{ item.title }}</h3>
-        <p>{{ item.description }}</p>
+        <h3 data-p60-field="items.{{ forloop.index0 }}.title">{{ item.title }}</h3>
+        <p data-p60-field="items.{{ forloop.index0 }}.description">{{ item.description }}</p>
       </li>
       {% endfor %}
     </ol>