@port60/template-kit 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@port60/template-kit",
-  "version": "0.10.0",
+  "version": "0.12.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

@@ -80,8 +80,8 @@ platform accepts it; if it fails here, the upload will fail identically.
 
 Everything you read comes from ONE tree: \`site\`, \`site.brand\`, \`site.nav\`,
 \`site.socials\`, \`site.locale\` and the typed collections under \`site.content.*\`
-(services, events, articles, campaigns, causes, courses, volunteering, media, resources,
-locations, schedules, about). Four rules it never breaks, so neither should you:
+(services, events, articles, campaigns, causes, courses, resources, locations,
+schedules, about). Four rules it never breaks, so neither should you:
 
 - Every collection is BOUNDED (a documented cap plus a \`moreHref\`), link onward, never
   assume you have everything.
@@ -121,11 +121,11 @@ excludes it, and conformance proofs always run on the canonical fixtures.
 - Navigation can contain two levels below a top item. Render every supplied child and branch on
   optional \`group\`, \`description\`, \`imageUrl\` and \`megaMenu\` promo metadata. Never hardcode
   menu groups that are not in \`nav\`.
-- Dynamic sections include appeals (\`causes\`), programmes (\`services\`), resources, locations,
-  volunteering opportunities and structured media. Derive or omit when a collection is empty and
-  use the supplied URLs rather than constructing routes.
-- Submission and behaviour surfaces such as \`newsletter_signup\`, \`volunteer_signup\`, \`form\`,
-  \`search\`, \`language_switch\` and \`next_prayer\` are platform islands. Place and style them;
+- 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.
+- Submission and behaviour surfaces such as \`newsletter_signup\`, \`form\`, \`search\`,
+  \`language_switch\` and \`next_prayer\` are platform islands. Place and style them;
   never reproduce their API calls or consent behaviour.
 - \`manifest.imagery.hero\` (optional but recommended): declare the photo shape YOUR hero
   composes best with (\`idealAspect\`, \`minWidth\`, a one-line \`note\`), the charity's editor

package/src/vendor/contract/v1/content-model.json

@@ -111,34 +111,6 @@
         "href": { "type": "string", "since": "1.0" }
       }
     },
-    "volunteering": {
-      "since": "1.0",
-      "cap": 12,
-      "moreHref": "/volunteering",
-      "description": "Open volunteering opportunities.",
-      "item": {
-        "id": { "type": "string", "since": "1.0" },
-        "slug": { "type": "string", "since": "1.0" },
-        "title": { "type": "string", "since": "1.0", "max": 200 },
-        "summary": { "type": "string", "since": "1.0", "nullable": true, "max": 500 },
-        "imageUrl": { "type": "string", "since": "1.0", "nullable": true },
-        "content": { "type": "object", "since": "1.0", "nullable": true }
-      }
-    },
-    "media": {
-      "since": "1.0",
-      "cap": 12,
-      "moreHref": "/media",
-      "description": "Published media items. `content.mediaType` is an OPEN enum (VIDEO and AUDIO today).",
-      "item": {
-        "id": { "type": "string", "since": "1.0" },
-        "slug": { "type": "string", "since": "1.0" },
-        "title": { "type": "string", "since": "1.0", "max": 200 },
-        "summary": { "type": "string", "since": "1.0", "nullable": true, "max": 500 },
-        "imageUrl": { "type": "string", "since": "1.0", "nullable": true },
-        "content": { "type": "object", "since": "1.0", "nullable": true }
-      }
-    },
     "resources": {
       "since": "1.0",
       "cap": 24,

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

@@ -47,7 +47,7 @@
         "section",
         "layout"
       ],
-      "description": "The typed collections: services, events, articles, campaigns, causes, courses, volunteering, media, resources, locations, schedules, about. EVERY collection is bounded (cap + moreHref in the model registry), every enum is open, every optional field explicitly nullable, and the model only ever grows. The validator computes your template's content footprint from the paths you read and stamps the required minimum model version at publish; dynamic indexing into site.content is refused so the footprint stays decidable."
+      "description": "The typed collections: services, events, articles, campaigns, causes, courses, resources, locations, schedules, about. EVERY collection is bounded (cap + moreHref in the model registry), every enum is open, every optional field explicitly nullable, and the model only ever grows. The validator computes your template's content footprint from the paths you read and stamps the required minimum model version at publish; dynamic indexing into site.content is refused so the footprint stays decidable."
     },
     {
       "path": "section",
@@ -430,22 +430,6 @@
       "description": "A public location with id, name, address, latitude, longitude, primary and directionsHref. Provider references and private notes are excluded.",
       "deprecated": true
     },
-    {
-      "path": "opportunities",
-      "availableIn": [
-        "section:volunteering"
-      ],
-      "description": "Published volunteering opportunities in display order. Each item contains id, slug, title, summary, imageUrl and content with location, schedule, commitment, dates, expected hours and shift dates. Sign-up remains the volunteer_signup island.",
-      "deprecated": true
-    },
-    {
-      "path": "media",
-      "availableIn": [
-        "section:media"
-      ],
-      "description": "Published structured media entries. Each item contains id, slug, title, summary, imageUrl and content with mediaType, mediaUrl, speaker, publishedAt and duration.",
-      "deprecated": true
-    },
     {
       "path": "infoEvents",
       "availableIn": [
@@ -1738,92 +1722,6 @@
           }
         ]
       },
-      "volunteering": {
-        "opportunities": [
-          {
-            "id": "aaaaaaaa-1111-4111-8111-111111111111",
-            "slug": "garden-volunteer",
-            "title": "Garden Volunteer",
-            "summary": "Keep the Foundry Lane beds thriving: sowing, watering, and showing first-timers where the trowels live.",
-            "imageUrl": "p60fixture:volunteer/garden",
-            "content": {
-              "location": "Foundry Lane Garden",
-              "schedule": "Saturday mornings",
-              "commitment": "Twice a month",
-              "hoursExpected": "3 hours"
-            }
-          },
-          {
-            "id": "aaaaaaaa-1111-4111-8111-111111111112",
-            "slug": "kitchen-crew",
-            "title": "Wednesday Kitchen Crew",
-            "summary": "Help cook and serve the weekly community meal. Full food hygiene training provided.",
-            "imageUrl": "p60fixture:volunteer/kitchen",
-            "content": {
-              "location": "St Chad's Hall",
-              "schedule": "Wednesdays 9am to 2pm",
-              "commitment": "Weekly",
-              "hoursExpected": "5 hours"
-            }
-          },
-          {
-            "id": "aaaaaaaa-1111-4111-8111-111111111113",
-            "slug": "food-bank-driver",
-            "title": "Food Bank Driver",
-            "summary": "Collect supermarket surplus on the morning round. A full licence and a friendly wave required.",
-            "imageUrl": null,
-            "content": {
-              "location": "Foundry Lane depot",
-              "schedule": "Weekday mornings",
-              "commitment": "One morning a week",
-              "hoursExpected": "2 hours"
-            }
-          }
-        ]
-      },
-      "media": {
-        "media": [
-          {
-            "id": "bbbbbbbb-2222-4222-8222-222222222221",
-            "slug": "garden-opening-film",
-            "title": "The Garden Opening, on Film",
-            "summary": "Four minutes from the gates opening, shot by the youth club media group.",
-            "imageUrl": "p60fixture:media/gardenfilm",
-            "content": {
-              "mediaType": "VIDEO",
-              "mediaUrl": "/fixture/garden-opening",
-              "speaker": null,
-              "duration": "4 minutes"
-            }
-          },
-          {
-            "id": "bbbbbbbb-2222-4222-8222-222222222222",
-            "slug": "trustee-talk-2030",
-            "title": "Where the Trust Goes Next",
-            "summary": "Chair of trustees Priya Sharma on the three-year plan, recorded at the spring members' evening.",
-            "imageUrl": "p60fixture:media/talk",
-            "content": {
-              "mediaType": "VIDEO",
-              "mediaUrl": "/fixture/trustee-talk",
-              "speaker": "Priya Sharma",
-              "duration": "18 minutes"
-            }
-          },
-          {
-            "id": "bbbbbbbb-2222-4222-8222-222222222223",
-            "slug": "sound-of-the-kitchen",
-            "title": "Sound of the Kitchen",
-            "summary": "An audio portrait of Wednesday lunchtime, best enjoyed hungry.",
-            "imageUrl": null,
-            "content": {
-              "mediaType": "AUDIO",
-              "mediaUrl": "/fixture/kitchen-audio",
-              "speaker": null,
-              "duration": "9 minutes"
-            }
-          }
-        ]
-      },
       "impactMap": {
         "impactMap": {
           "slug": "our-work",
@@ -2357,88 +2255,6 @@
             "href": "/courses"
           }
         ],
-        "volunteering": [
-          {
-            "id": "aaaaaaaa-1111-4111-8111-111111111111",
-            "slug": "garden-volunteer",
-            "title": "Garden Volunteer",
-            "summary": "Keep the Foundry Lane beds thriving: sowing, watering, and showing first-timers where the trowels live.",
-            "imageUrl": "p60fixture:volunteer/garden",
-            "content": {
-              "location": "Foundry Lane Garden",
-              "schedule": "Saturday mornings",
-              "commitment": "Twice a month",
-              "hoursExpected": "3 hours"
-            }
-          },
-          {
-            "id": "aaaaaaaa-1111-4111-8111-111111111112",
-            "slug": "kitchen-crew",
-            "title": "Wednesday Kitchen Crew",
-            "summary": "Help cook and serve the weekly community meal. Full food hygiene training provided.",
-            "imageUrl": "p60fixture:volunteer/kitchen",
-            "content": {
-              "location": "St Chad's Hall",
-              "schedule": "Wednesdays 9am to 2pm",
-              "commitment": "Weekly",
-              "hoursExpected": "5 hours"
-            }
-          },
-          {
-            "id": "aaaaaaaa-1111-4111-8111-111111111113",
-            "slug": "food-bank-driver",
-            "title": "Food Bank Driver",
-            "summary": "Collect supermarket surplus on the morning round. A full licence and a friendly wave required.",
-            "imageUrl": null,
-            "content": {
-              "location": "Foundry Lane depot",
-              "schedule": "Weekday mornings",
-              "commitment": "One morning a week",
-              "hoursExpected": "2 hours"
-            }
-          }
-        ],
-        "media": [
-          {
-            "id": "bbbbbbbb-2222-4222-8222-222222222221",
-            "slug": "garden-opening-film",
-            "title": "The Garden Opening, on Film",
-            "summary": "Four minutes from the gates opening, shot by the youth club media group.",
-            "imageUrl": "p60fixture:media/gardenfilm",
-            "content": {
-              "mediaType": "VIDEO",
-              "mediaUrl": "/fixture/garden-opening",
-              "speaker": null,
-              "duration": "4 minutes"
-            }
-          },
-          {
-            "id": "bbbbbbbb-2222-4222-8222-222222222222",
-            "slug": "trustee-talk-2030",
-            "title": "Where the Trust Goes Next",
-            "summary": "Chair of trustees Priya Sharma on the three-year plan, recorded at the spring members' evening.",
-            "imageUrl": "p60fixture:media/talk",
-            "content": {
-              "mediaType": "VIDEO",
-              "mediaUrl": "/fixture/trustee-talk",
-              "speaker": "Priya Sharma",
-              "duration": "18 minutes"
-            }
-          },
-          {
-            "id": "bbbbbbbb-2222-4222-8222-222222222223",
-            "slug": "sound-of-the-kitchen",
-            "title": "Sound of the Kitchen",
-            "summary": "An audio portrait of Wednesday lunchtime, best enjoyed hungry.",
-            "imageUrl": null,
-            "content": {
-              "mediaType": "AUDIO",
-              "mediaUrl": "/fixture/kitchen-audio",
-              "speaker": null,
-              "duration": "9 minutes"
-            }
-          }
-        ],
         "resources": [
           {
             "id": "88888888-8888-8888-8888-888888888881",

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

@@ -203,20 +203,6 @@
         ".site-search-empty"
       ]
     },
-    {
-      "name": "volunteer_signup",
-      "label": "Volunteer expression of interest",
-      "status": "available",
-      "description": "Lists published opportunities and captures a privacy-recorded expression of interest. Templates own placement and styling; validation, abuse checks and submission storage remain platform-owned.",
-      "params": [],
-      "stylingApi": [
-        ".volunteer-signup",
-        ".volunteer-field",
-        ".volunteer-privacy",
-        ".volunteer-submit",
-        ".volunteer-message"
-      ]
-    },
     {
       "name": "form",
       "label": "Public form",

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

@@ -36,14 +36,12 @@
           "events",
           "articles",
           "services",
-          "volunteering",
           "forms",
           "resources",
           "locations",
           "newsletter",
           "i18n",
-          "search",
-          "media"
+          "search"
         ]
       },
       "uniqueItems": true,

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

@@ -775,80 +775,6 @@
         "text": "Two front doors in the middle of Alderford, both step-free."
       }
     },
-    {
-      "type": "volunteering",
-      "label": "Volunteering opportunities",
-      "pages": [
-        "home"
-      ],
-      "description": "Published opportunities from the volunteering module. Templates render the cards and place volunteer_signup for the platform-owned, privacy-recorded expression-of-interest flow.",
-      "context": [
-        "opportunities"
-      ],
-      "fields": [
-        {
-          "name": "eyebrow",
-          "kind": "text",
-          "required": false,
-          "description": "Short kicker."
-        },
-        {
-          "name": "heading",
-          "kind": "text",
-          "required": false,
-          "description": "The section heading."
-        },
-        {
-          "name": "text",
-          "kind": "text",
-          "required": false,
-          "description": "Optional introduction."
-        }
-      ],
-      "minimal": {},
-      "sample": {
-        "eyebrow": "Get involved",
-        "heading": "Volunteer with us",
-        "text": "Two hours or twenty, there is a role that fits the time you have."
-      }
-    },
-    {
-      "type": "media",
-      "label": "Audio, video and livestreams",
-      "pages": [
-        "home"
-      ],
-      "description": "Structured public audio, video and livestream entries with titles, speakers, dates and safe media links.",
-      "context": [
-        "media"
-      ],
-      "fields": [
-        {
-          "name": "eyebrow",
-          "kind": "text",
-          "required": false,
-          "description": "Short kicker."
-        },
-        {
-          "name": "heading",
-          "kind": "text",
-          "required": false,
-          "description": "The section heading."
-        },
-        {
-          "name": "text",
-          "kind": "text",
-          "required": false,
-          "description": "Optional introduction."
-        }
-      ],
-      "minimal": {},
-      "sample": {
-        "eyebrow": "Media",
-        "heading": "Watch and listen",
-        "text": "Films, talks and the occasional kitchen soundscape from around the Trust."
-      }
-    },
     {
       "type": "people",
       "label": "People / team",
@@ -966,6 +892,12 @@
           "kind": "text",
           "required": false,
           "description": "Optional introduction."
+        },
+        {
+          "name": "mapSlug",
+          "kind": "text",
+          "required": false,
+          "description": "WHICH map renders here, by its address (the Pages editor's placement picker writes it; the Maps area is where maps exist). Absent = the tenant's first published map."
         }
       ],
       "minimal": {},

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

@@ -12,6 +12,9 @@
     { "name": "--accent", "description": "Action accent (the donate CTA family)." },
     { "name": "--accent-strong", "description": "Darker accent." },
     { "name": "--gold", "description": "Highlight tint (marks, ratings)." },
+    { "name": "--marker", "description": "Impact-map pin colour (the live-map markers are a zoom-scaling circle layer that take this colour). Defaults to --accent." },
+    { "name": "--map-mode", "description": "Impact-map basemap colour mode read by the map island: auto (derive the map's paper/ink from the theme), light, dark, or muted. Default auto." },
+    { "name": "--map-projection", "description": "Impact-map projection: flat (default) or globe — the planet as a rotatable sphere with atmosphere." },
     { "name": "--line", "description": "Hairline borders." },
     { "name": "--line-strong", "description": "Emphasised borders (selected, focus)." },
     { "name": "--danger", "description": "Errors and destructive affordances." },

package/src/vendor/validator/fixture-art.mjs

@@ -18,8 +18,6 @@ const PALETTES = {
   service: [['#2f4d3e', '#132a1f', '#9fc490'], ['#31495c', '#14222e', '#8fb8c9']],
   people: [['#4d4238', '#292019', '#d3a97c'], ['#3d4550', '#1f242b', '#b0a3c4']],
   course: [['#2d4a55', '#112530', '#83c1b0'], ['#4a3c2d', '#251d11', '#c1a583']],
-  media: [['#26243a', '#100e1e', '#8f7fd9'], ['#3a2430', '#1e0f18', '#d97fae']],
-  volunteer: [['#3e4a2d', '#1e2511', '#b7c183'], ['#2d3f4a', '#111e25', '#83a9c1']],
   impact: [['#44503c', '#232b1e', '#c2cf9f'], ['#503c46', '#2b1e25', '#cf9fb4']]
 };
 

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

@@ -20,6 +20,15 @@
   --accent: #ef6044;
   --accent-strong: #d94d33;
   --gold: #f3b13b;
+  /* Impact map. --marker = the map pin colour (a deliberate brand accent by default; the live-map
+     markers are a zoom-scaling MapLibre circle layer that takes this colour). --map-mode = the
+     basemap colour mode read by the map island: `auto` derives the map's paper/ink from the theme
+     neutrals below, `light`/`dark`/`muted` force a base. Template-owned — set in theme.css or exposed
+     as Appearance knobs; the tenant never edits map colour directly. */
+  --marker: var(--accent);
+  --map-mode: auto;
+  /* flat (default) or globe — MapLibre's own globe projection, a rotatable sphere. */
+  --map-projection: flat;
   --line: rgba(31, 42, 51, 0.1);
   --line-strong: rgba(18, 135, 122, 0.28);
   --danger: #c0392b;
@@ -953,6 +962,22 @@ textarea.p60-form-control {
   gap: 1rem;
 }
 
+/* MOBILE BREAKOUT (owner, 2026-08-17): on phones the nesting stack squashes the card badly —
+   measured on Sanctuary: 390px viewport → 346 container → 294 aside → 249px card → ~195px of
+   actual controls. A donate form is a working control surface; it gets the full screen width
+   (edge to edge, side borders/radius dropped, its own padding kept). The negative-margin trick
+   escapes ANY wrapper depth; layouts here are symmetric, so the sheet lands exactly 0..100vw. */
+@media (max-width: 640px) {
+  .donate-card {
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+    padding: 1.4rem 1.1rem;
+  }
+}
+
 /* Optional cause image banner at the top of the widget (set per-cause in tenant-admin). */
 .donate-cause-img {
   width: 100%;
@@ -1966,6 +1991,30 @@ textarea.p60-form-control {
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 1.5rem;
 }
+/* MOBILE: the stacked grid becomes an edge-to-edge SWIPE ROW with a peek (owner, 2026-08-17) —
+   the scroller bleeds to the screen edges, each card keeps its padding, the first card aligns to
+   the text gutter, and the cut-off next card IS the "swipe me" affordance (the reference maps'
+   card idiom). Snap keeps cards settling cleanly; the scrollbar is hidden, the peek replaces it. */
+@media (max-width: 640px) {
+  .article-grid {
+    display: flex;
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+    gap: 0.9rem;
+    padding: 0.2rem 22px 0.6rem;
+    scroll-padding-left: 22px;
+    scrollbar-width: none;
+  }
+  .article-grid::-webkit-scrollbar { display: none; }
+  .article-grid > .article-card {
+    flex: 0 0 78%;
+    max-width: 330px;
+    scroll-snap-align: start;
+  }
+}
 .article-card {
   display: flex;
   flex-direction: column;
@@ -2355,6 +2404,26 @@ textarea.p60-form-control {
   align-items: center;
   gap: 0.5rem;
 }
+/* MOBILE: the rotator is MEDIA — it bleeds edge to edge like the hero and the map, with the
+   arrows overlaid on the image instead of eating width beside it. */
+@media (max-width: 640px) {
+  .events-carousel {
+    position: relative;
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    gap: 0;
+  }
+  .events-carousel .carousel-slide { border-radius: 0; }
+  .events-carousel > .carousel-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    opacity: 0.9;
+  }
+  .events-carousel > .carousel-arrow:first-of-type { left: 10px; }
+  .events-carousel > .carousel-arrow:last-of-type { right: 10px; }
+}
 .carousel-slide {
   position: relative;
   flex: 1;
@@ -4228,23 +4297,80 @@ textarea.p60-form-control {
   .people-grid { grid-template-columns: 1fr; }
 }
 
-/* ── Impact map island (WP4) — baseline look; templates restyle via the styling API. Colours ride
-   currentColor and the theme's tokens so the island wears the template's clothes. */
+/* ── Impact map island (WP4) — the OVERLAY borrows the theme: pins wear --marker (a brand accent by
+   default), the card is a themed --surface. The BASEMAP colour is derived by the map island from the
+   theme + --map-mode (see lib/mapTheme.ts). Brand on the overlay, neutrals on the map — the recipe
+   that stays legible on any theme. Templates restyle any of this via the tokens or these classes. */
 .impact-map { margin: 24px 0; }
 .impact-map-head h2 { margin: 0 0 6px; }
 .impact-map-intro { margin: 0 0 14px; opacity: 0.85; }
-.impact-map-canvas { position: relative; min-height: 340px; border-radius: 14px; overflow: hidden;
-  background: linear-gradient(160deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.55)), currentColor; }
+.impact-map-stats { margin: 0 0 14px; color: var(--muted); font-weight: 600; letter-spacing: 0.01em; }
+/* The stable stage, shaped like THE WORLD BAND ITSELF: the island's planet view is all 360° of
+   longitude by 84°N–58°S (whole Greenland in, only the polar void and Antarctica trimmed), which in
+   Web Mercator is a 1.497:1 box — so a frame with that exact ratio holds the full planet edge to
+   edge, full width AND full height, at any screen size. A ratio wider than the band (a max-height
+   clamp once made it so on large screens) turns the fit height-constrained and the world renders
+   NARROWER than the frame — dead bars at the sides; a narrower ratio (min-height on phones) just
+   adds benign vertical margin. Relative + clipped so MapLibre always has a real box and can never
+   escape it. Keep this ratio in step with the island's planet bounds. */
+.impact-map-stage { position: relative; width: 100%; aspect-ratio: 1.497; min-height: 300px;
+  border-radius: 14px; overflow: hidden; }
+  /* width:100% is LOAD-BEARING: with height pinned by min-height and width left auto, CSS derives
+     width FROM the aspect-ratio (300 x 1.497 = 449px) — on phones the stage overflowed the page
+     sideways, shoving every other section into a lopsided "left with a right gutter" layout. Width
+     pinned, the ratio yields height and min-height only ever makes the stage TALLER. */
+/* MOBILE BREAKOUT: a map is a canvas — every pixel is information, nothing needs a margin — so on
+   phones it bleeds edge to edge (media bleeds, prose gutters: the hero already sets the rhythm).
+   Cooperative gestures keep page-scrolling safe over the full-width canvas. */
+@media (max-width: 640px) {
+  .impact-map-stage {
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    border-radius: 0;
+  }
+}
+.impact-map-canvas { position: absolute; inset: 0;
+  background: linear-gradient(160deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.55)), var(--muted); }
 .impact-map-pin { position: absolute; width: 16px; height: 16px; border-radius: 50%;
-  transform: translate(-50%, -50%); border: 2px solid #fff; background: currentColor;
+  transform: translate(-50%, -50%); border: 2px solid var(--surface); background: var(--marker);
   cursor: pointer; padding: 0; transition: transform 120ms ease; }
 .impact-map-pin:hover, .impact-map-pin:focus-visible { transform: translate(-50%, -50%) scale(1.35); }
-.impact-map-pin--active { box-shadow: 0 0 0 5px rgb(255 255 255 / 28%); }
-.impact-map-card { margin-top: 14px; border: 1px solid rgb(127 127 127 / 30%); border-radius: 12px;
+.impact-map-pin--active { box-shadow: 0 0 0 5px var(--primary-soft); }
+.impact-map-card { margin-top: 14px; background: var(--surface); color: var(--ink);
+  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
   padding: 16px 18px; max-width: 34rem; }
 .impact-map-card-kind { display: inline-block; font-size: 11px; font-weight: 700;
-  letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; margin-bottom: 4px; }
+  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
 .impact-map-card-title { margin: 0 0 6px; }
 .impact-map-card-summary { margin: 0 0 10px; opacity: 0.9; }
-.impact-map-card-cta { font-weight: 600; }
+.impact-map-card-cta { font-weight: 600; color: var(--primary); }
 .impact-map-empty { opacity: 0.7; }
+/* The live tile layer (slice 2): fills the stage from first render so MapLibre measures a real box;
+   the pin canvas overlays it until (unless) the map is ready, then unmounts to reveal the map.
+   Sized with width/height (NOT inset) because MapLibre forces position:relative on this element,
+   which would defeat absolute insets and collapse the box to zero height. */
+.impact-map-gl { width: 100%; height: 100%; }
+/* Live-map markers are a MapLibre circle layer (WebGL) — they scale with zoom and take their colour
+   from --marker (circle-color) — so there is no DOM marker element to style here. The pin canvas
+   fallback above keeps its own .impact-map-pin dots for the no-tiles case. */
+/* The INLINE marker card (a MapLibre popup anchored at the clicked marker — where "See more"
+   lives): the shell takes the theme's surface; the tip is recoloured per anchor side to match. */
+.impact-map-popup .maplibregl-popup-content { background: var(--surface); color: var(--ink);
+  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
+  padding: 14px 16px; }
+.impact-map-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
+.impact-map-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
+.impact-map-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
+.impact-map-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
+.impact-map-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
+.impact-map-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
+.impact-map-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
+.impact-map-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
+.impact-map-popup-card .impact-map-card-title { margin: 4px 0 6px; font-size: 1.02rem; }
+.impact-map-popup-card .impact-map-card-summary { margin: 0 0 8px; }
+/* The point's image (when it has one): bleeds to the popup's top edge; plain rounded in the
+   fallback card. Absent image = the card simply starts at the kind line. */
+.impact-map-card-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
+  border-radius: 10px; margin: 0 0 10px; }
+.impact-map-popup-card .impact-map-card-image { width: calc(100% + 32px); margin: -14px -16px 10px;
+  border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0; }

package/src/vendor/validator/preview.mjs

@@ -147,12 +147,6 @@ function islandSkeleton(name, ctx = {}, fx = STUDIO_FX) {
       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>`;
     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 'volunteer_signup': {
-      const opportunities = fx.sections?.volunteering?.opportunities ?? [];
-      const options = (opportunities.length ? opportunities : [{ title: 'Garden Volunteer' }])
-        .map((o) => `<option>${escapeHtml(o.title)}</option>`).join('');
-      return `<form class="volunteer-signup" data-p60-preview-island="volunteer_signup">${previewNote(name)}<label class="volunteer-field"><span>Opportunity</span><select disabled>${options}</select></label><label class="volunteer-field"><span>Name</span><input disabled></label><label class="volunteer-field"><span>Email address</span><input disabled></label><label class="volunteer-privacy"><input type="checkbox" disabled><span>I agree that the organisation may respond.</span></label><button class="volunteer-submit" type="button" disabled>Register my interest</button></form>`;
-    }
     case 'map': {
       // The impact-map skeleton: the fixture's points projected onto a token-themed canvas —
       // the same fallback rendering production uses until the platform tile layer is configured.
@@ -448,9 +442,7 @@ export async function renderStudioPreview(files, options = {}) {
         emergency: { causes: c.causes ?? [] },
         programmes: { services: c.services ?? [] },
         resources: { resources: c.resources ?? [] },
-        locations: { locations: c.locations ?? [] },
-        volunteering: { opportunities: c.volunteering ?? [] },
-        media: { media: c.media ?? [] }
+        locations: { locations: c.locations ?? [] }
       }
     };
   }

package/src/vendor/validator/validate.mjs

@@ -94,14 +94,12 @@ export async function validateArtifact(files) {
       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')
+      search: () => islands.has('search')
     };
     for (const capability of manifest?.requiresCapabilities ?? []) {
       if (!capabilitySurface[capability]?.()) {
@@ -236,9 +234,7 @@ export async function validateArtifact(files) {
     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') }
+    locations: { island: null, dataKey: 'locations', sentinel: sentinelOf('locations', 'locations', 'name') }
   };
 
   // 2–4. Sections: catalogue membership, parse, fixture renders.

package/starter/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "starter",
-  "version": "1.9.0",
+  "version": "1.10.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.",
@@ -15,12 +15,14 @@
       "values",
       "cta",
       "people",
-      "campaigns"
+      "campaigns",
+      "impactMap"
     ],
     "islands": [
       "donation_widget",
       "member_menu",
-      "hero_carousel"
+      "hero_carousel",
+      "map"
     ],
     "layout": true,
     "heroImagery": true,
@@ -46,7 +48,7 @@
       }
     ]
   },
-  "changelog": "Demonstrates the behaviour catalogue: the values rail reveals with a stagger and a multi-photo standard hero becomes an engine-wired carousel.",
+  "changelog": "Adds the impact map section: pin your located work on a themed map of where you work.",
   "imagery": {
     "hero": {
       "idealAspect": "16:9",

package/starter/sections/impactMap.liquid

@@ -0,0 +1,5 @@
+<section class="section">
+  <div class="container">
+    {% island 'map' %}
+  </div>
+</section>