diff --git a/demo/map-test/.gitignore b/demo/map-test/.gitignore
new file mode 100644
index 00000000..f9d72a20
--- /dev/null
+++ b/demo/map-test/.gitignore
@@ -0,0 +1,15 @@
+# Node.js ignores
+node_modules/
+
+# Prototype ignores - per-user
+.tmp/
+.env
+migrate.log
+
+# General ignores
+.DS_Store
+.idea
+
+# Local consumer-install artifacts (regenerate with scripts/install-local-packages.sh)
+.tarballs/
+package-lock.json
diff --git a/demo/map-test/.npmrc b/demo/map-test/.npmrc
new file mode 100644
index 00000000..f5fc3a7f
--- /dev/null
+++ b/demo/map-test/.npmrc
@@ -0,0 +1,3 @@
+audit=false
+ignore-scripts=true
+allow-git=none
diff --git a/demo/map-test/LICENCE.txt b/demo/map-test/LICENCE.txt
new file mode 100644
index 00000000..036ee249
--- /dev/null
+++ b/demo/map-test/LICENCE.txt
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (C) 2014 Crown Copyright (Government Digital Service)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/demo/map-test/README.md b/demo/map-test/README.md
new file mode 100644
index 00000000..3bdd1230
--- /dev/null
+++ b/demo/map-test/README.md
@@ -0,0 +1,25 @@
+# Defra Interactive Map Test
+
+A GOV.UK Prototype Kit site with a collection of examples using the DEFRA InteractiveMap component, imported from [defra-design/map-test](https://github.com/defra-design/map-test).
+
+The purpose of this site is **accessibility testing only**. It provides a consistent set of scenarios to verify accessibility behaviour, identify issues, and validate fixes across different browsers, assistive technologies, and devices.
+
+It also validates the UMD builds through the exact consumer path: each provider and plugin is installed as its own packed npm package (`@defra/interactive-map-provider-maplibre`, `@defra/interactive-map-plugin-search`, …) so npm resolves peer dependencies for real. Every package ships a `govuk-prototype-kit.config.json`, so the prototype kit serves each package's `dist` at `/plugin-assets/<encoded package name>/dist/…` and every page loads the bundles from there with standard `<script src>` tags — no bundler involved.
+
+## Running locally
+
+```bash
+./scripts/install-local-packages.sh   # build monorepo, pack each package,
+                                      # npm install the tarballs
+cp ../../.env .env                    # OS vector tile style URLs (OS_API_KEY needed
+                                      # for tiles to render)
+npm run dev
+```
+
+The script is the local stand-in for `npm install @defra/interactive-map @defra/interactive-map-provider-maplibre …` from the registry: the packages aren't published yet on this branch, so it packs them from the monorepo instead. Everything downstream of `npm pack` — tarball contents, peer dependency resolution, file layout, prototype kit plugin registration — is what a real consumer gets. Re-run the script after changing library source.
+
+## Public Test Site
+
+The public test site (built from the original repository) is available here:
+
+[Defra Interactive Map Test Site](https://map-test-63a349157ea3.herokuapp.com/)
diff --git a/demo/map-test/app/assets/images/black-and-white-map-thumb.jpg b/demo/map-test/app/assets/images/black-and-white-map-thumb.jpg
new file mode 100644
index 00000000..8d19119a
Binary files /dev/null and b/demo/map-test/app/assets/images/black-and-white-map-thumb.jpg differ
diff --git a/demo/map-test/app/assets/images/dark-map-thumb.jpg b/demo/map-test/app/assets/images/dark-map-thumb.jpg
new file mode 100644
index 00000000..fdc3aad8
Binary files /dev/null and b/demo/map-test/app/assets/images/dark-map-thumb.jpg differ
diff --git a/demo/map-test/app/assets/images/outdoor-map-thumb.jpg b/demo/map-test/app/assets/images/outdoor-map-thumb.jpg
new file mode 100644
index 00000000..05c0bc1c
Binary files /dev/null and b/demo/map-test/app/assets/images/outdoor-map-thumb.jpg differ
diff --git a/demo/map-test/app/assets/javascripts/application.js b/demo/map-test/app/assets/javascripts/application.js
new file mode 100644
index 00000000..15723dae
--- /dev/null
+++ b/demo/map-test/app/assets/javascripts/application.js
@@ -0,0 +1,8 @@
+//
+// For guidance on how to add JavaScript see:
+// https://prototype-kit.service.gov.uk/docs/adding-css-javascript-and-images
+//
+
+window.GOVUKPrototypeKit.documentReady(() => {
+  // Add JavaScript here
+})
diff --git a/demo/map-test/app/assets/sass/application.scss b/demo/map-test/app/assets/sass/application.scss
new file mode 100644
index 00000000..5ada7327
--- /dev/null
+++ b/demo/map-test/app/assets/sass/application.scss
@@ -0,0 +1,6 @@
+//
+// For guidance on how to add CSS and SCSS see:
+// https://prototype-kit.service.gov.uk/docs/adding-css-javascript-and-images
+// 
+
+// Add extra styles here
diff --git a/demo/map-test/app/config.json b/demo/map-test/app/config.json
new file mode 100644
index 00000000..7469a024
--- /dev/null
+++ b/demo/map-test/app/config.json
@@ -0,0 +1,9 @@
+{
+  "serviceName": "InteractiveMap",
+  "useServiceNavigation": false,
+  "plugins": {
+    "govuk-frontend": {
+      "rebrand": true
+    }
+  }
+}
diff --git a/demo/map-test/app/data/session-data-defaults.js b/demo/map-test/app/data/session-data-defaults.js
new file mode 100644
index 00000000..97840452
--- /dev/null
+++ b/demo/map-test/app/data/session-data-defaults.js
@@ -0,0 +1,5 @@
+module.exports = {
+
+  // Insert values here
+
+}
diff --git a/demo/map-test/app/filters.js b/demo/map-test/app/filters.js
new file mode 100644
index 00000000..1a63b675
--- /dev/null
+++ b/demo/map-test/app/filters.js
@@ -0,0 +1,10 @@
+//
+// For guidance on how to create filters see:
+// https://prototype-kit.service.gov.uk/docs/filters
+//
+
+const govukPrototypeKit = require('govuk-prototype-kit')
+const addFilter = govukPrototypeKit.views.addFilter
+
+// Add your filters here
+
diff --git a/demo/map-test/app/routes.js b/demo/map-test/app/routes.js
new file mode 100644
index 00000000..fdba4a24
--- /dev/null
+++ b/demo/map-test/app/routes.js
@@ -0,0 +1,78 @@
+//
+// For guidance on how to create routes see:
+// https://prototype-kit.service.gov.uk/docs/create-routes
+//
+
+const govukPrototypeKit = require('govuk-prototype-kit')
+const router = govukPrototypeKit.requests.setupRouter()
+
+// Add your routes here
+
+// Ordnance Survey Vector Tile API stylesheets, keyed by the style id used in the views
+const OS_VECTOR_TILE_STYLES = {
+  outdoor: process.env.VTS_OUTDOOR_URL,
+  dark: process.env.VTS_DARK_URL,
+  'black-and-white': process.env.VTS_BLACK_AND_WHITE_URL
+}
+
+// Cache the upstream stylesheets so we only fetch each one from GitHub once
+const styleCache = {}
+
+// Inject the OS API key into a stylesheet's tile, glyph and sprite endpoints.
+// The key is kept in the .env file and added server-side so it is never committed
+// to the views.
+function applyOsApiKey (style, apiKey) {
+  const styleWithKey = structuredClone(style)
+
+  Object.values(styleWithKey.sources || {}).forEach((source) => {
+    if (source.url?.includes('api.os.uk')) {
+      source.tiles = [`https://api.os.uk/maps/vector/v1/vts/tile/{z}/{y}/{x}.pbf?srs=3857&key=${apiKey}`]
+      delete source.url
+    }
+  })
+
+  if (styleWithKey.glyphs?.includes('api.os.uk')) {
+    styleWithKey.glyphs += `${styleWithKey.glyphs.includes('?') ? '&' : '?'}key=${apiKey}`
+  }
+
+  styleWithKey.sprite = `https://api.os.uk/maps/vector/v1/vts/resources/sprites/sprite?key=${apiKey}`
+
+  return styleWithKey
+}
+
+// This runs on ALL pages and passes variables to Nunjucks
+router.use((req, res, next) => {
+  res.locals.OS_API_KEY = process.env.OS_API_KEY
+  res.locals.OS_NEAREST_URL = process.env.OS_NEAREST_URL
+  
+  // next() tells Express to move on to loading the actual page
+  next() 
+})
+
+// Serve an OS Vector Tile API stylesheet with the API key applied, e.g.
+// /os-vector-tile-styles/outdoor
+router.get('/os-vector-tile-styles/:style', async (req, res) => {
+  const styleId = req.params.style
+  const sourceUrl = OS_VECTOR_TILE_STYLES[styleId]
+
+  if (!sourceUrl) {
+    return res.status(404).json({ error: `Unknown map style '${styleId}'` })
+  }
+
+  try {
+    if (!styleCache[styleId]) {
+      const response = await fetch(sourceUrl)
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch stylesheet (${response.status})`)
+      }
+
+      styleCache[styleId] = await response.json()
+    }
+
+    res.json(applyOsApiKey(styleCache[styleId], process.env.OS_API_KEY))
+  } catch (error) {
+    console.error(`Unable to load OS Vector Tile stylesheet '${styleId}':`, error)
+    res.status(502).json({ error: 'Unable to load map style' })
+  }
+})
diff --git a/demo/map-test/app/views/add-polygons.html b/demo/map-test/app/views/add-polygons.html
new file mode 100644
index 00000000..e36217a7
--- /dev/null
+++ b/demo/map-test/app/views/add-polygons.html
@@ -0,0 +1,143 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  11. Add polygons – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map-plugin-datasets/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      11. Add polygons
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-datasets/dist/umd/index.js"></script>
+
+  <script>
+    // GeoJSON can also be loaded from a URL; use the tiles property for vector tile sources
+    const geojson = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        id: 1,
+        properties: { name: 'Feature 1', land_use: 'Permanent grassland' },
+        geometry: { type: 'Polygon', coordinates: [[[-2.4691585,54.5552164],[-2.4692202,54.5553906],[-2.4690646,54.5554155],[-2.4690002,54.5555088],[-2.4690297,54.5556690],[-2.4690995,54.5557919],[-2.4669269,54.5566971],[-2.4662375,54.5562819],[-2.4637780,54.5574391],[-2.4628580,54.5568169],[-2.4607612,54.5560985],[-2.4608248,54.5560719],[-2.4611789,54.5558914],[-2.4613774,54.5558168],[-2.4615973,54.5557577],[-2.4617475,54.5557297],[-2.4618816,54.5556519],[-2.4620104,54.5556115],[-2.4624771,54.5555275],[-2.4627131,54.5555150],[-2.4628741,54.5554839],[-2.4630082,54.5554404],[-2.4632335,54.5553346],[-2.4633944,54.5552164],[-2.4634749,54.5551106],[-2.4635178,54.5550235],[-2.4635285,54.5548213],[-2.4635768,54.5546346],[-2.4635875,54.5544884],[-2.4636090,54.5544075],[-2.4636465,54.5543515],[-2.4636573,54.5542769],[-2.4636358,54.5541804],[-2.4637377,54.5540155],[-2.4639094,54.5538724],[-2.4643493,54.5535831],[-2.4645370,54.5535084],[-2.4647141,54.5534804],[-2.4648052,54.5534836],[-2.4648213,54.5535116],[-2.4648750,54.5535396],[-2.4650842,54.5535893],[-2.4652451,54.5536516],[-2.4652719,54.5536796],[-2.4653900,54.5537355],[-2.4655455,54.5537853],[-2.4658459,54.5539502],[-2.4663556,54.5542738],[-2.4668008,54.5545164],[-2.4668330,54.5545506],[-2.4668437,54.5546782],[-2.4668598,54.5547031],[-2.4670798,54.5548306],[-2.4671817,54.5549053],[-2.4674177,54.5549364],[-2.4677664,54.5550484],[-2.4681956,54.5551448],[-2.4684101,54.5551759],[-2.4691129,54.5552195],[-2.4691585,54.5552164]]] }
+      }, {
+        type: 'Feature',
+        id: 2,
+        properties: { name: 'Feature 2', land_use: 'Arable' },
+        geometry: { type: 'Polygon', coordinates: [[[-2.4611682,54.5562375],[-2.4628580,54.5568161],[-2.4636841,54.5573753],[-2.4637793,54.5574398],[-2.4641401,54.5576751],[-2.4642567,54.5577999],[-2.4641307,54.5578823],[-2.4636841,54.5582502],[-2.4624221,54.5592884],[-2.4623376,54.5592534],[-2.4615370,54.5586429],[-2.4611869,54.5582852],[-2.4605258,54.5581071],[-2.4598472,54.5578186],[-2.4611682,54.5562375]]] }
+      }, {
+        type: 'Feature',
+        id: 3,
+        properties: { name: 'Feature 3', land_use: 'Arable' },
+        geometry: { type: 'Polygon', coordinates: [[[-2.4598472,54.5578186],[-2.4605258,54.5581067],[-2.4611869,54.5582852],[-2.4615376,54.5586433],[-2.4623108,54.5592332],[-2.4623376,54.5592534],[-2.4624221,54.5592884],[-2.4623108,54.5594120],[-2.4616731,54.5601189],[-2.4586053,54.5601189],[-2.4584410,54.5600299],[-2.4580038,54.5596574],[-2.4581815,54.5593953],[-2.4585778,54.5590702],[-2.4587287,54.5589353],[-2.4589198,54.5586736],[-2.4591116,54.5582136],[-2.4598472,54.5578186]]] }
+      }, {
+        type: 'Feature',
+        id: 4,
+        properties: { name: 'Feature 4', land_use: 'Permanent grassland' },
+        geometry: { type: 'Polygon', coordinates: [[[-2.4633756,54.5612877],[-2.4613908,54.5604315],[-2.4624221,54.5592884],[-2.4641307,54.5578823],[-2.4642567,54.5577999],[-2.4653631,54.5591733],[-2.4659613,54.5597013],[-2.4633756,54.5612877]]] }
+      }, {
+        type: 'Feature',
+        id: 5,
+        properties: { name: 'Feature 5', land_use: 'Arable' },
+        geometry: { type: 'Polygon', coordinates: [[[-2.4678040,54.5590679],[-2.4661879,54.5595952],[-2.4659613,54.5597013],[-2.4653638,54.5591737],[-2.4642567,54.5577999],[-2.4641401,54.5576751],[-2.4637793,54.5574398],[-2.4662369,54.5562822],[-2.4669282,54.5566975],[-2.4678040,54.5563320],[-2.4678040,54.5590679]]] }
+      }, {
+        type: 'Feature',
+        id: 6,
+        properties: { name: 'Feature 6', land_use: 'Permanent grassland' },
+        geometry: { type: 'Polygon', coordinates: [[[-2.4669316,54.5603767],[-2.4676430,54.5613102],[-2.4673292,54.5614556],[-2.4671616,54.5617468],[-2.4658446,54.5625528],[-2.4651546,54.5621528],[-2.4639215,54.5633040],[-2.4633146,54.5633040],[-2.4628372,54.5630921],[-2.4631195,54.5628195],[-2.4643741,54.5618374],[-2.4665071,54.5604793],[-2.4667056,54.5604187],[-2.4669316,54.5603767]]] }
+      }, {
+        type: 'Feature',
+        id: 7,
+        properties: { name: 'Feature 7', land_use: 'Woodland' },
+        geometry: { type: 'Polygon', coordinates: [[[-2.4599129,54.5564203],[-2.4599773,54.5565478],[-2.4599773,54.5565852],[-2.4599344,54.5566256],[-2.4596876,54.5566069],[-2.4594945,54.5566132],[-2.4593657,54.5566505],[-2.4592584,54.5567158],[-2.4592048,54.5567780],[-2.4591780,54.5568496],[-2.4591887,54.5569616],[-2.4591297,54.5570829],[-2.4590009,54.5572726],[-2.4589419,54.5573162],[-2.4588561,54.5574686],[-2.4587435,54.5575588],[-2.4586684,54.5575837],[-2.4585879,54.5575962],[-2.4584001,54.5575837],[-2.4583304,54.5575899],[-2.4580836,54.5576397],[-2.4579817,54.5576895],[-2.4579227,54.5576988],[-2.4578154,54.5576988],[-2.4576384,54.5576739],[-2.4574614,54.5576739],[-2.4573044,54.5577050],[-2.4563093,54.5573092],[-2.4563871,54.5569849],[-2.4564891,54.5560664],[-2.4565601,54.5559039],[-2.4567747,54.5559412],[-2.4571985,54.5559817],[-2.4573219,54.5560097],[-2.4576116,54.5560936],[-2.4582446,54.5562181],[-2.4584913,54.5562959],[-2.4590331,54.5563705],[-2.4599129,54.5564203]]] }
+      }]
+    }
+
+    const datasetsPlugin = defra.datasetsPlugin({
+      datasets: [{
+        id: 'field-geojson',
+        label: 'Field geojson',
+        geojson: geojson,
+        minZoom: 10,
+        maxZoom: 24,
+        showInKey: true,
+        showInMenu: true,
+        sublayers: [{
+          id: 'arable',
+          label: 'Arable',
+          filter: ['==', ['get', 'land_use'], 'Arable'],
+          style: {
+            stroke: '#6D4C41',
+            fillPattern: 'horizontal-hatch',
+            fillPatternForegroundColor: '#6D4C41',
+            fillPatternBackgroundColor: 'transparent'
+          }
+        }, {
+          id: 'permanent-grassland',
+          label: 'Permanent grassland',
+          filter: ['==', ['get', 'land_use'], 'Permanent grassland'],
+          style: {
+            stroke: '#00897B',
+            fillPattern: 'diagonal-cross-hatch',
+            fillPatternForegroundColor: '#00897B',
+            fillPatternBackgroundColor: 'transparent'
+          }
+        }, {
+          id: 'woodland',
+          label: 'Woodland',
+          filter: ['==', ['get', 'land_use'], 'Woodland'],
+          style: {
+            stroke: '#2E7D32',
+            fillPattern: 'dot',
+            fillPatternForegroundColor: '#2E7D32',
+            fillPatternBackgroundColor: 'transparent'
+          }
+        }]
+      }]
+    })
+
+    new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [datasetsPlugin]
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/add-symbols.html b/demo/map-test/app/views/add-symbols.html
new file mode 100644
index 00000000..4921c708
--- /dev/null
+++ b/demo/map-test/app/views/add-symbols.html
@@ -0,0 +1,119 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  10. Add symbols – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map-plugin-datasets/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      10. Add symbols
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-datasets/dist/umd/index.js"></script>
+
+  <script>
+    const symbolGraphic = 'M3 15H1V1h2v2h2V1h2v5h2V4h2v2h2V4h2v11H6V9H3v6z'
+
+    // GeoJSON can also be loaded from a URL; use the tiles property for vector tile sources
+    const geojson = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: { category: 'prehistoric', name: 'Prehistoric feature' },
+        geometry: { type: 'Point', coordinates: [-2.4615, 54.5616] }
+      }, {
+        type: 'Feature',
+        properties: { category: 'roman', name: 'Roman feature' },
+        geometry: { type: 'Point', coordinates: [-2.4628, 54.5541] }
+      }, {
+        type: 'Feature',
+        properties: { category: 'medieval', name: 'Medieval feature' },
+        geometry: { type: 'Point', coordinates: [-2.4578, 54.5569] }
+      }]
+    }
+
+    const datasetsPlugin = defra.datasetsPlugin({
+      datasets: [{
+        id: 'historic-monuments',
+        label: 'Historic monuments',
+        geojson: geojson,
+        minZoom: 10,
+        maxZoom: 24,
+        showInKey: true,
+        showInMenu: true,
+        sublayers: [{
+          id: 'prehistoric',
+          label: 'Prehistoric',
+          filter: ['in', ['get', 'category'], 'prehistoric'],
+          style: {
+            symbol: 'square',
+            symbolGraphic,
+            symbolBackgroundColor: '#00897B'
+          }
+        }, {
+          id: 'roman',
+          label: 'Roman',
+          filter: ['in', ['get', 'category'], 'roman'],
+          style: {
+            symbol: 'square',
+            symbolGraphic,
+            symbolBackgroundColor: '#ca3535'
+          }
+        }, {
+          id: 'medieval',
+          label: 'Medieval',
+          filter: ['in', ['get', 'category'], 'medieval'],
+          style: {
+            symbol: 'square',
+            symbolGraphic,
+            symbolBackgroundColor: '#1565C0'
+          }
+        }]
+      }]
+    })
+
+    new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [datasetsPlugin]
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/basic-map.html b/demo/map-test/app/views/basic-map.html
new file mode 100644
index 00000000..76a47375
--- /dev/null
+++ b/demo/map-test/app/views/basic-map.html
@@ -0,0 +1,60 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  1. Basic map – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      1. Basic map
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-open-names/dist/umd/index.js"></script>
+
+  <script>
+    new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      reverseGeocodeProvider: defra.openNamesProvider({
+        url: "{{ OS_NEAREST_URL | safe }}&key={{ OS_API_KEY | safe }}",
+      }),
+      mapStyle: {
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      containerHeight: '516px'
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/button-map.html b/demo/map-test/app/views/button-map.html
new file mode 100644
index 00000000..6adc3343
--- /dev/null
+++ b/demo/map-test/app/views/button-map.html
@@ -0,0 +1,56 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  2. Button-triggered map – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      2. Button-triggered map
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+
+  <script>
+    new defra.InteractiveMap('map', {
+      behaviour: 'buttonFirst',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      hasExitButton: true
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/draw-tools.html b/demo/map-test/app/views/draw-tools.html
new file mode 100644
index 00000000..0ea89246
--- /dev/null
+++ b/demo/map-test/app/views/draw-tools.html
@@ -0,0 +1,167 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  9. Draw tools – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      9. Draw tools
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-interact/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-draw-ml/dist/umd/index.js"></script>
+
+  <script>
+    const DRAW_LAYERS = ['fill-inactive.cold', 'stroke-inactive.cold']
+
+    const interactPlugin = defra.interactPlugin({
+      layers: [
+        { layerId: 'fill-inactive.cold', idProperty: 'id' },
+        { layerId: 'stroke-inactive.cold', idProperty: 'id' }
+      ],
+      interactionModes: ['selectFeature'],
+      multiSelect: true,
+      deselectOnClickOutside: true
+    })
+
+    const drawPlugin = defra.drawMLPlugin({
+      snapLayers: ['building-3d']
+    })
+
+    const interactiveMap = new defra.InteractiveMap('map', {
+      behaviour: 'hybrid',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        id: 'default',
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [interactPlugin, drawPlugin],
+      hasExitButton: true
+    })
+
+    let selectedFeatureIds = []
+
+    interactiveMap.on('map:ready', function () {
+      interactPlugin.enable()
+
+      interactiveMap.addButton('drawTools', {
+        label: 'Draw tools',
+        mobile: { slot: 'bottom-right' },
+        tablet: { slot: 'top-middle' },
+        desktop: { slot: 'top-middle' },
+        menuItems: [
+          {
+            id: 'drawPolygon',
+            label: 'Draw polygon',
+            iconSvgContent: '<path d="M19.5 7v10M4.5 7v10M7 19.5h10M7 4.5h10"/><path d="M22 18v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zm0-15v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 18v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 3v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1z"/>',
+            onClick: function () {
+              interactiveMap.toggleButtonState('drawTools', 'hidden', true)
+              drawPlugin.newPolygon(crypto.randomUUID())
+            }
+          },
+          {
+            id: 'drawLine',
+            label: 'Draw line',
+            iconSvgContent: '<path d="M5.706 16.294L16.294 5.706"/><path d="M21 2v3c0 .549-.451 1-1 1h-3c-.549 0-1-.451-1-1V2c0-.549.451-1 1-1h3c.549 0 1 .451 1 1zM6 17v3c0 .549-.451 1-1 1H2c-.549 0-1-.451-1-1v-3c0-.549.451-1 1-1h3c.549 0 1 .451 1 1z"/>',
+            onClick: function () {
+              interactiveMap.toggleButtonState('drawTools', 'hidden', true)
+              drawPlugin.newLine(crypto.randomUUID())
+            }
+          },
+          {
+            id: 'editFeature',
+            label: 'Edit feature',
+            iconSvgContent: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
+            isDisabled: true,
+            onClick: function () {
+              if (!drawPlugin.editFeature(selectedFeatureIds[0])) return
+              interactiveMap.toggleButtonState('drawTools', 'hidden', true)
+              interactPlugin.disable()
+            }
+          },
+          {
+            id: 'deleteFeature',
+            label: 'Delete feature',
+            iconSvgContent: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
+            isDisabled: true,
+            onClick: function () {
+              drawPlugin.deleteFeature(selectedFeatureIds)
+              interactPlugin.clear()
+              interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+              interactiveMap.toggleButtonState('drawPolygon', 'disabled', false)
+              interactiveMap.toggleButtonState('drawLine', 'disabled', false)
+              interactiveMap.toggleButtonState('editFeature', 'disabled', true)
+              interactiveMap.toggleButtonState('deleteFeature', 'disabled', true)
+            }
+          }
+        ]
+      })
+    })
+
+    interactiveMap.on('draw:started', function () {
+      interactPlugin.disable()
+    })
+
+    interactiveMap.on('draw:created', function () {
+      interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+      interactPlugin.enable()
+    })
+
+    interactiveMap.on('draw:edited', function () {
+      interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+      interactPlugin.enable()
+    })
+
+    interactiveMap.on('draw:cancelled', function () {
+      interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+      interactPlugin.enable()
+    })
+
+    interactiveMap.on('interact:selectionchange', function (e) {
+      var singleFeature = e.selectedFeatures.length === 1
+      var anyFeature = e.selectedFeatures.length > 0
+      var isDrawFeature = singleFeature && DRAW_LAYERS.includes(e.selectedFeatures[0].layerId)
+      var allDrawFeatures = anyFeature && e.selectedFeatures.every(function (f) { return DRAW_LAYERS.includes(f.layerId) })
+      selectedFeatureIds = e.selectedFeatures.map(function (f) { return f.featureId })
+      interactiveMap.toggleButtonState('drawPolygon', 'disabled', singleFeature)
+      interactiveMap.toggleButtonState('drawLine', 'disabled', singleFeature)
+      interactiveMap.toggleButtonState('editFeature', 'disabled', !isDrawFeature)
+      interactiveMap.toggleButtonState('deleteFeature', 'disabled', !allDrawFeatures)
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/index.html b/demo/map-test/app/views/index.html
new file mode 100644
index 00000000..ac4d1a78
--- /dev/null
+++ b/demo/map-test/app/views/index.html
@@ -0,0 +1,77 @@
+{% extends "layouts/main.html" %}
+
+{% set pageName="Home" %}
+
+{% block content %}
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-xl">
+      {{ serviceName }}
+    </h1>
+
+    <p class="govuk-body">
+      This prototype contains a set of Defra InteractiveMap examples. Each page
+      demonstrates a single map feature or interaction in isolation, so it can be
+      tested on its own. Select an example to open its page and test the map.
+    </p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/basic-map">1. Basic map</a>
+    </h2>
+    <p class="govuk-body">A simple inline map with no interaction.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/button-map">2. Button-triggered map</a>
+    </h2>
+    <p class="govuk-body">A map that opens from a button rather than loading inline.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/style-switcher">3. Change map style</a>
+    </h2>
+    <p class="govuk-body">Switch between the Outdoor, Dark and Black and white base maps.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/marker-panel">4. Map with marker and panel</a>
+    </h2>
+    <p class="govuk-body">A marker that opens an information panel when selected.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/toggle-marker-label">5. Toggle marker label</a>
+    </h2>
+    <p class="govuk-body">Show or hide the text label on a marker.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/place-marker">6. Place a marker to continue</a>
+    </h2>
+    <p class="govuk-body">Place a marker on the map, then continue in a task flow.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/search-control">7. Add a search control</a>
+    </h2>
+    <p class="govuk-body">Search for and locate places on the map.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/select-feature">8. Select a feature</a>
+    </h2>
+    <p class="govuk-body">Select a map feature to reveal information about it.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/draw-tools">9. Draw tools</a>
+    </h2>
+    <p class="govuk-body">Draw and edit polygons and lines on the map.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/add-symbols">10. Add symbols</a>
+    </h2>
+    <p class="govuk-body">Display point symbols from a dataset.</p>
+
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-1">
+      <a class="govuk-link" href="/add-polygons">11. Add polygons</a>
+    </h2>
+    <p class="govuk-body">Display polygon data on the map.</p>
+  </div>
+</div>
+
+{% endblock %}
diff --git a/demo/map-test/app/views/layouts/main.html b/demo/map-test/app/views/layouts/main.html
new file mode 100644
index 00000000..59b50ba3
--- /dev/null
+++ b/demo/map-test/app/views/layouts/main.html
@@ -0,0 +1,8 @@
+{#
+For guidance on how to use layouts see:
+https://prototype-kit.service.gov.uk/docs/how-to-use-layouts
+#}
+
+{% extends "govuk-prototype-kit/layouts/govuk-branded.njk" %}
+
+{% block govukServiceNavigation %}{% endblock %}
diff --git a/demo/map-test/app/views/marker-panel.html b/demo/map-test/app/views/marker-panel.html
new file mode 100644
index 00000000..84c52159
--- /dev/null
+++ b/demo/map-test/app/views/marker-panel.html
@@ -0,0 +1,91 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  4. Map with marker and panel – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      4. Map with marker and panel
+    </h1>
+
+    <div id="map" data-zoom="15" data-center="[-2.9631689, 54.4323129]"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-interact/dist/umd/index.js"></script>
+
+  <script>
+    const interactPlugin = defra.interactPlugin({
+      deselectOnClickOutside: true
+    })
+
+    const map = new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [interactPlugin]
+    })
+
+    map.on('map:ready', () => {
+      map.addMarker('my-marker', [-2.9631689, 54.4323129])
+      interactPlugin.enable()
+      interactPlugin.selectMarker('my-marker')
+
+      map.addPanel('marker-info', {
+        focus: false,
+        label: 'Marker',
+        html: '<p class="govuk-body">Information about the selected marker</p>',
+        mobile: { slot: 'drawer', dismissible: true },
+        tablet: { slot: 'left-top', dismissible: true, width: '280px' },
+        desktop: { slot: 'left-top', dismissible: true, width: '280px' }
+      })
+    })
+
+    map.on('interact:selectionchange', ({ selectedMarkers }) => {
+      if (selectedMarkers.length > 0) {
+        map.showPanel('marker-info')
+      } else {
+        map.hidePanel('marker-info')
+      }
+    })
+
+    map.on('app:panelclosed', ({ panelId }) => {
+      if (panelId === 'marker-info') {
+        interactPlugin.unselectMarker('my-marker')
+      }
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/place-marker.html b/demo/map-test/app/views/place-marker.html
new file mode 100644
index 00000000..3da7e543
--- /dev/null
+++ b/demo/map-test/app/views/place-marker.html
@@ -0,0 +1,104 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  6. Place a marker to continue – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      6. Place a marker to continue
+    </h1>
+
+    <div id="map"></div>
+
+    <div id="external-buttons" hidden>
+      <button class="govuk-button govuk-!-margin-top-4" id="continue-btn" disabled>Continue</button>
+    </div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-interact/dist/umd/index.js"></script>
+
+  <script>
+    var interactPlugin = defra.interactPlugin({
+      interactionModes: ['placeMarker']
+    })
+
+    var map = new defra.InteractiveMap('map', {
+      behaviour: 'hybrid',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [interactPlugin],
+      backAndContinue: {
+        backLabel: 'Back',
+        continueLabel: 'Continue',
+        continueEnabledWhen: function (context) {
+          return context.mapState.markers.items.some(function (m) { return m.id === 'location' })
+        }
+      }
+    })
+
+    map.on('map:ready', function () {
+      interactPlugin.enable()
+    })
+
+    map.on('app:continue', function (context) {
+      var marker = context.mapState.markers.items.find(function (m) { return m.id === 'location' })
+      // navigate to next step with marker.coords
+      if (marker) {
+        console.log('Continuing with marker at:', marker.coords)
+      }
+    })
+
+    var continueBtn = document.getElementById('continue-btn')
+    var externalButtons = document.getElementById('external-buttons')
+
+    function setInline(isFullscreen) {
+      externalButtons.hidden = isFullscreen
+    }
+
+    map.on('app:opened', function (e) { setInline(e.isFullscreen) })
+    map.on('app:closed', function () { externalButtons.hidden = true })
+    map.on('app:fullscreenchange', function (e) { setInline(e.isFullscreen) })
+
+    map.on('interact:markerchange', function () {
+      continueBtn.disabled = false
+    })
+
+    continueBtn.addEventListener('click', function () {
+      // navigate to next step
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/search-control.html b/demo/map-test/app/views/search-control.html
new file mode 100644
index 00000000..2f1d4708
--- /dev/null
+++ b/demo/map-test/app/views/search-control.html
@@ -0,0 +1,98 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  7. Add a search control – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map-plugin-search/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      7. Add a search control
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-search/dist/umd/index.js"></script>
+
+  <script>
+    const SETTLEMENT_TYPES = new Set(['city', 'town', 'village', 'hamlet', 'suburb', 'quarter', 'neighbourhood', 'municipality', 'borough', 'district', 'county'])
+
+    const nominatimDataset = {
+      name: 'nominatim',
+      buildRequest: function (query) {
+        const params = new URLSearchParams({
+          q: query,
+          format: 'json',
+          limit: '8',
+          countrycodes: 'gb'
+        })
+        return new Request('https://nominatim.openstreetmap.org/search?' + params, {
+          headers: { 'Accept-Language': 'en' }
+        })
+      },
+      parseResults: function (json, query) {
+        if (!Array.isArray(json)) return []
+        const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        const results = json
+          .filter(function (item) { return SETTLEMENT_TYPES.has(item.addresstype) })
+          .map(function (item) {
+            const bb = item.boundingbox.map(Number)
+            return {
+              id: String(item.place_id),
+              text: item.display_name,
+              marked: item.display_name.replace(new RegExp('(' + escaped + ')', 'i'), '<mark>$1</mark>'),
+              point: [Number(item.lon), Number(item.lat)],
+              bounds: [bb[2], bb[0], bb[3], bb[1]]
+            }
+          })
+        return Array.from(new Map(results.map(function (r) { return [r.text, r] })).values())
+      }
+    }
+
+    const searchPlugin = defra.searchPlugin({
+      customDatasets: [nominatimDataset],
+      width: '300px'
+    })
+
+    new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [searchPlugin]
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/select-feature.html b/demo/map-test/app/views/select-feature.html
new file mode 100644
index 00000000..243b6d25
--- /dev/null
+++ b/demo/map-test/app/views/select-feature.html
@@ -0,0 +1,101 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  8. Select a feature – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      8. Select a feature
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-interact/dist/umd/index.js"></script>
+
+  <script>
+    const PANEL_ID = 'building-info'
+
+    const interactPlugin = defra.interactPlugin({
+      interactionModes: ['selectFeature'],
+      deselectOnClickOutside: true,
+      layers: [
+        { layerId: 'buildings 3D', idProperty: 'uuid' }
+      ]
+    })
+
+    const map = new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      maxZoom: 15,
+      containerHeight: '516px',
+      plugins: [interactPlugin]
+    })
+
+    map.on('map:ready', () => {
+      interactPlugin.enable()
+
+      map.addPanel(PANEL_ID, {
+        focus: false,
+        label: 'Selected building',
+        html: '<div id="building-info-content"></div>',
+        mobile: { slot: 'drawer', dismissible: true, open: false },
+        tablet: { slot: 'left-top', dismissible: true, width: '300px', open: false },
+        desktop: { slot: 'left-top', dismissible: true, width: '300px', open: false }
+      })
+    })
+
+    map.on('interact:selectionchange', ({ selectedFeatures }) => {
+      if (selectedFeatures.length > 0) {
+        let html = ''
+        for (const [k, v] of Object.entries(selectedFeatures[0].properties)) {
+          html += '<p class="govuk-body govuk-!-margin-bottom-1"><strong>' + k + ':</strong> ' + v + '</p>'
+        }
+        document.getElementById('building-info-content').innerHTML = html
+        map.showPanel(PANEL_ID)
+      } else {
+        map.hidePanel(PANEL_ID)
+      }
+    })
+
+    map.on('app:panelclosed', ({ panelId }) => {
+      if (panelId === PANEL_ID) {
+        interactPlugin.clear()
+      }
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/style-switcher.html b/demo/map-test/app/views/style-switcher.html
new file mode 100644
index 00000000..2f24957f
--- /dev/null
+++ b/demo/map-test/app/views/style-switcher.html
@@ -0,0 +1,87 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  3. Change map style – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map-plugin-map-styles/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      3. Change map style
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-map-styles/dist/umd/index.js"></script>
+
+  <script>
+    const attribution = `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`
+
+    const mapStyles = [
+      {
+        id: 'outdoor',
+        label: 'Outdoor',
+        url: '/os-vector-tile-styles/outdoor',
+        thumbnail: '/public/images/outdoor-map-thumb.jpg',
+        attribution,
+        backgroundColor: '#f5f5f0'
+      },
+      {
+        id: 'dark',
+        label: 'Dark',
+        url: '/os-vector-tile-styles/dark',
+        thumbnail: '/public/images/dark-map-thumb.jpg',
+        attribution,
+        mapColorScheme: 'dark',
+        appColorScheme: 'dark'
+      },
+      {
+        id: 'black-and-white',
+        label: 'Black and white',
+        url: '/os-vector-tile-styles/black-and-white',
+        thumbnail: '/public/images/black-and-white-map-thumb.jpg',
+        attribution,
+        backgroundColor: '#f5f5f0'
+      }
+    ]
+
+    const mapStylesPlugin = defra.mapStylesPlugin({ mapStyles })
+
+    new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: mapStyles[0],
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [mapStylesPlugin]
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/app/views/toggle-marker-label.html b/demo/map-test/app/views/toggle-marker-label.html
new file mode 100644
index 00000000..d30fece2
--- /dev/null
+++ b/demo/map-test/app/views/toggle-marker-label.html
@@ -0,0 +1,74 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  5. Toggle marker label – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      5. Toggle marker label
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-provider-maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map-plugin-interact/dist/umd/index.js"></script>
+
+  <script>
+    const interactPlugin = defra.interactPlugin({
+      deselectOnClickOutside: true
+    })
+
+    const map = new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: '/os-vector-tile-styles/outdoor',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.9631689, 54.4323129],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [interactPlugin]
+    })
+
+    map.on('map:ready', () => {
+      map.addMarker('my-marker', [-2.96, 54.43], {
+        label: 'My location',
+        showLabel: false
+      })
+      interactPlugin.enable()
+    })
+
+    map.on('interact:selectionchange', ({ selectedMarkers }) => {
+      map.updateMarker('my-marker', { showLabel: selectedMarkers.includes('my-marker') })
+    })
+  </script>
+{% endblock %}
diff --git a/demo/map-test/package.json b/demo/map-test/package.json
new file mode 100644
index 00000000..549cac9d
--- /dev/null
+++ b/demo/map-test/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "map-test",
+  "private": true,
+  "scripts": {
+    "dev": "govuk-prototype-kit dev",
+    "serve": "govuk-prototype-kit serve",
+    "start": "govuk-prototype-kit start"
+  },
+  "dependencies": {
+    "@defra/interactive-map": "file:.tarballs/defra-interactive-map-0.0.0-development.tgz",
+    "@defra/interactive-map-plugin-datasets": "file:.tarballs/defra-interactive-map-plugin-datasets-0.0.0-development.tgz",
+    "@defra/interactive-map-plugin-draw-ml": "file:.tarballs/defra-interactive-map-plugin-draw-ml-0.0.0-development.tgz",
+    "@defra/interactive-map-plugin-interact": "file:.tarballs/defra-interactive-map-plugin-interact-0.0.0-development.tgz",
+    "@defra/interactive-map-plugin-map-styles": "file:.tarballs/defra-interactive-map-plugin-map-styles-0.0.0-development.tgz",
+    "@defra/interactive-map-plugin-search": "file:.tarballs/defra-interactive-map-plugin-search-0.0.0-development.tgz",
+    "@defra/interactive-map-provider-maplibre": "file:.tarballs/defra-interactive-map-provider-maplibre-0.0.0-development.tgz",
+    "@defra/interactive-map-provider-open-names": "file:.tarballs/defra-interactive-map-provider-open-names-0.0.0-development.tgz",
+    "@govuk-prototype-kit/common-templates": "3.0.0",
+    "govuk-frontend": "6.3.0",
+    "govuk-prototype-kit": "13.20.2"
+  }
+}
diff --git a/demo/map-test/scripts/install-local-packages.sh b/demo/map-test/scripts/install-local-packages.sh
new file mode 100755
index 00000000..51f9e2e7
--- /dev/null
+++ b/demo/map-test/scripts/install-local-packages.sh
@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+# Install the @defra/interactive-map packages exactly as a consumer would:
+# build the monorepo, pack each package this app uses into a tarball, and
+# npm-install the tarballs (so npm resolves peer dependencies for real).
+# Each package ships a govuk-prototype-kit.config.json, so the prototype kit
+# serves its dist under /plugin-assets/<encoded package name>/dist/... and
+# pages load the UMD bundles from there with standard <script src> tags.
+set -euo pipefail
+
+APP_DIR="$(cd "$(dirname "$0")/.." && pwd)"
+REPO_ROOT="$(cd "$APP_DIR/../.." && pwd)"
+TARBALL_DIR="$APP_DIR/.tarballs"
+
+WORKSPACES=(
+  "."
+  "providers/maplibre"
+  "providers/open-names"
+  "plugins/interact"
+  "plugins/search"
+  "plugins/datasets"
+  "plugins/map-styles"
+  "plugins/draw-ml"
+)
+
+echo "==> Building UMD/ESM bundles"
+(cd "$REPO_ROOT" && npm run build)
+
+echo "==> Packing tarballs"
+rm -rf "$TARBALL_DIR"
+mkdir -p "$TARBALL_DIR"
+for ws in "${WORKSPACES[@]}"; do
+  if [ "$ws" = "." ]; then
+    (cd "$REPO_ROOT" && npm pack --pack-destination "$TARBALL_DIR")
+  else
+    (cd "$REPO_ROOT" && npm pack --workspace "$ws" --pack-destination "$TARBALL_DIR")
+  fi
+done
+
+echo "==> Installing packed tarballs"
+(cd "$APP_DIR" && npm install "$TARBALL_DIR"/*.tgz)
+
+echo "==> Done. Start the app with: npm run dev"
diff --git a/plugins/datasets/govuk-prototype-kit.config.json b/plugins/datasets/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..9391ea97
--- /dev/null
+++ b/plugins/datasets/govuk-prototype-kit.config.json
@@ -0,0 +1,6 @@
+{
+  "assets": [
+    "/dist/umd",
+    "/dist/css"
+  ]
+}
diff --git a/plugins/datasets/package.json b/plugins/datasets/package.json
index e6b514c5..4fe9bca8 100644
--- a/plugins/datasets/package.json
+++ b/plugins/datasets/package.json
@@ -18,9 +18,17 @@
     "./css": "./dist/css/index.css"
   },
   "type": "module",
-  "files": ["dist"],
-  "sideEffects": ["**/*.css", "**/*.scss"],
-  "publishConfig": { "tag": "beta" },
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "tag": "beta"
+  },
   "dependencies": {
     "preact": "^10.27.2",
     "@babel/runtime": "^7.28.6"
diff --git a/plugins/draw-ml/govuk-prototype-kit.config.json b/plugins/draw-ml/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..fdf21c22
--- /dev/null
+++ b/plugins/draw-ml/govuk-prototype-kit.config.json
@@ -0,0 +1,5 @@
+{
+  "assets": [
+    "/dist/umd"
+  ]
+}
diff --git a/plugins/draw-ml/package.json b/plugins/draw-ml/package.json
index c24f1dd5..9496bdb0 100644
--- a/plugins/draw-ml/package.json
+++ b/plugins/draw-ml/package.json
@@ -16,9 +16,17 @@
     }
   },
   "type": "module",
-  "files": ["dist"],
-  "sideEffects": ["**/*.css", "**/*.scss"],
-  "publishConfig": { "tag": "beta" },
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "tag": "beta"
+  },
   "dependencies": {
     "preact": "^10.27.2",
     "@babel/runtime": "^7.28.6"
diff --git a/plugins/draw-ol/govuk-prototype-kit.config.json b/plugins/draw-ol/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..9391ea97
--- /dev/null
+++ b/plugins/draw-ol/govuk-prototype-kit.config.json
@@ -0,0 +1,6 @@
+{
+  "assets": [
+    "/dist/umd",
+    "/dist/css"
+  ]
+}
diff --git a/plugins/draw-ol/package.json b/plugins/draw-ol/package.json
index 7292c7a9..155c4faa 100644
--- a/plugins/draw-ol/package.json
+++ b/plugins/draw-ol/package.json
@@ -17,9 +17,16 @@
     "./css": "./dist/css/index.css"
   },
   "type": "module",
-  "files": ["dist"],
-  "sideEffects": ["**/*.scss"],
-  "publishConfig": { "tag": "beta" },
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
+  "sideEffects": [
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "tag": "beta"
+  },
   "dependencies": {
     "preact": "^10.27.2",
     "@babel/runtime": "^7.28.6"
diff --git a/plugins/frame/govuk-prototype-kit.config.json b/plugins/frame/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..9391ea97
--- /dev/null
+++ b/plugins/frame/govuk-prototype-kit.config.json
@@ -0,0 +1,6 @@
+{
+  "assets": [
+    "/dist/umd",
+    "/dist/css"
+  ]
+}
diff --git a/plugins/frame/package.json b/plugins/frame/package.json
index f3f90a28..4976b1cb 100644
--- a/plugins/frame/package.json
+++ b/plugins/frame/package.json
@@ -17,9 +17,17 @@
     "./css": "./dist/css/index.css"
   },
   "type": "module",
-  "files": ["dist"],
-  "sideEffects": ["**/*.css", "**/*.scss"],
-  "publishConfig": { "tag": "beta" },
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "tag": "beta"
+  },
   "dependencies": {
     "preact": "^10.27.2",
     "@babel/runtime": "^7.28.6"
diff --git a/plugins/interact/govuk-prototype-kit.config.json b/plugins/interact/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..fdf21c22
--- /dev/null
+++ b/plugins/interact/govuk-prototype-kit.config.json
@@ -0,0 +1,5 @@
+{
+  "assets": [
+    "/dist/umd"
+  ]
+}
diff --git a/plugins/interact/package.json b/plugins/interact/package.json
index 726e8938..aef041c8 100644
--- a/plugins/interact/package.json
+++ b/plugins/interact/package.json
@@ -16,7 +16,10 @@
     }
   },
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
   "sideEffects": false,
   "dependencies": {
     "preact": "^10.27.2",
diff --git a/plugins/map-styles/govuk-prototype-kit.config.json b/plugins/map-styles/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..9391ea97
--- /dev/null
+++ b/plugins/map-styles/govuk-prototype-kit.config.json
@@ -0,0 +1,6 @@
+{
+  "assets": [
+    "/dist/umd",
+    "/dist/css"
+  ]
+}
diff --git a/plugins/map-styles/package.json b/plugins/map-styles/package.json
index eb582cef..a5b0b03c 100644
--- a/plugins/map-styles/package.json
+++ b/plugins/map-styles/package.json
@@ -17,9 +17,17 @@
     "./css": "./dist/css/index.css"
   },
   "type": "module",
-  "files": ["dist"],
-  "sideEffects": ["**/*.css", "**/*.scss"],
-  "publishConfig": { "tag": "beta" },
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "tag": "beta"
+  },
   "dependencies": {
     "preact": "^10.27.2",
     "@babel/runtime": "^7.28.6"
diff --git a/plugins/scale-bar/govuk-prototype-kit.config.json b/plugins/scale-bar/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..9391ea97
--- /dev/null
+++ b/plugins/scale-bar/govuk-prototype-kit.config.json
@@ -0,0 +1,6 @@
+{
+  "assets": [
+    "/dist/umd",
+    "/dist/css"
+  ]
+}
diff --git a/plugins/scale-bar/package.json b/plugins/scale-bar/package.json
index 8a43d8a9..2b54c239 100644
--- a/plugins/scale-bar/package.json
+++ b/plugins/scale-bar/package.json
@@ -17,9 +17,17 @@
     "./css": "./dist/css/index.css"
   },
   "type": "module",
-  "files": ["dist"],
-  "sideEffects": ["**/*.css", "**/*.scss"],
-  "publishConfig": { "tag": "beta" },
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "tag": "beta"
+  },
   "dependencies": {
     "preact": "^10.27.2",
     "@babel/runtime": "^7.28.6"
diff --git a/plugins/search/govuk-prototype-kit.config.json b/plugins/search/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..9391ea97
--- /dev/null
+++ b/plugins/search/govuk-prototype-kit.config.json
@@ -0,0 +1,6 @@
+{
+  "assets": [
+    "/dist/umd",
+    "/dist/css"
+  ]
+}
diff --git a/plugins/search/package.json b/plugins/search/package.json
index ee5e6f59..31168a6c 100644
--- a/plugins/search/package.json
+++ b/plugins/search/package.json
@@ -17,8 +17,14 @@
     "./css": "./dist/css/index.css"
   },
   "type": "module",
-  "files": ["dist"],
-  "sideEffects": ["**/*.css", "**/*.scss"],
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "dependencies": {
     "preact": "^10.27.2",
     "@babel/runtime": "^7.28.6"
diff --git a/plugins/use-location/govuk-prototype-kit.config.json b/plugins/use-location/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..fdf21c22
--- /dev/null
+++ b/plugins/use-location/govuk-prototype-kit.config.json
@@ -0,0 +1,5 @@
+{
+  "assets": [
+    "/dist/umd"
+  ]
+}
diff --git a/plugins/use-location/package.json b/plugins/use-location/package.json
index 44b32b61..d9b0efaf 100644
--- a/plugins/use-location/package.json
+++ b/plugins/use-location/package.json
@@ -16,9 +16,14 @@
     }
   },
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
   "sideEffects": false,
-  "publishConfig": { "tag": "beta" },
+  "publishConfig": {
+    "tag": "beta"
+  },
   "dependencies": {
     "preact": "^10.27.2",
     "@babel/runtime": "^7.28.6"
diff --git a/providers/maplibre/govuk-prototype-kit.config.json b/providers/maplibre/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..fdf21c22
--- /dev/null
+++ b/providers/maplibre/govuk-prototype-kit.config.json
@@ -0,0 +1,5 @@
+{
+  "assets": [
+    "/dist/umd"
+  ]
+}
diff --git a/providers/maplibre/package.json b/providers/maplibre/package.json
index c0531579..cc82330b 100644
--- a/providers/maplibre/package.json
+++ b/providers/maplibre/package.json
@@ -16,7 +16,10 @@
     }
   },
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
   "sideEffects": false,
   "dependencies": {
     "@babel/runtime": "^7.28.6"
diff --git a/providers/open-names/govuk-prototype-kit.config.json b/providers/open-names/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..fdf21c22
--- /dev/null
+++ b/providers/open-names/govuk-prototype-kit.config.json
@@ -0,0 +1,5 @@
+{
+  "assets": [
+    "/dist/umd"
+  ]
+}
diff --git a/providers/open-names/package.json b/providers/open-names/package.json
index 644e57f0..8ddb91eb 100644
--- a/providers/open-names/package.json
+++ b/providers/open-names/package.json
@@ -16,9 +16,14 @@
     }
   },
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
   "sideEffects": false,
-  "publishConfig": { "tag": "beta" },
+  "publishConfig": {
+    "tag": "beta"
+  },
   "dependencies": {
     "@babel/runtime": "^7.28.6"
   },
diff --git a/providers/openlayers/govuk-prototype-kit.config.json b/providers/openlayers/govuk-prototype-kit.config.json
new file mode 100644
index 00000000..fdf21c22
--- /dev/null
+++ b/providers/openlayers/govuk-prototype-kit.config.json
@@ -0,0 +1,5 @@
+{
+  "assets": [
+    "/dist/umd"
+  ]
+}
diff --git a/providers/openlayers/package.json b/providers/openlayers/package.json
index 0b5ba81a..36f73a6f 100644
--- a/providers/openlayers/package.json
+++ b/providers/openlayers/package.json
@@ -16,9 +16,14 @@
     }
   },
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist",
+    "govuk-prototype-kit.config.json"
+  ],
   "sideEffects": false,
-  "publishConfig": { "tag": "beta" },
+  "publishConfig": {
+    "tag": "beta"
+  },
   "dependencies": {
     "@babel/runtime": "^7.28.6"
   },