@defra/interactive-map 0.0.30-alpha → 0.0.31-alpha

package/providers/maplibre/src/utils/highlightFeatures.js

@@ -64,7 +64,8 @@ const clearPrefixSources = (map, prefix) => {
 }
 
 const applyHighlightLayer = (map, id, type, sourceId, srcLayer, paint, filter) => {
-  if (!map.getLayer(id)) {
+  const existed = !!map.getLayer(id)
+  if (!existed) {
     map.addLayer({
       id,
       type,
@@ -122,49 +123,89 @@ const applySymbolGeomHighlight = (map, base, sourceId, srcLayer, layerId, filter
   }
 }
 
+// Always draws a line ring. Only draws a fill when isSelected — active (cursor) features get
+// the ring only, so the fill isn't shown for every keyboard-navigated item.
 const applyFillGeomHighlight = (map, base, sourceId, srcLayer, { isSelected, idExpression, fillIds, fill, lineColor, lineWidth, filter }) => {
   if (isSelected) {
-    const fillFilter = ['in', idExpression, ['literal', [...fillIds]]]
+    const fillIdsArray = []
+    fillIds.forEach(id => fillIdsArray.push(id))
+    const fillFilter = ['in', idExpression, ['literal', fillIdsArray]]
     // Only apply fill highlight to polygon features, not to any co-selected line features
     applyHighlightLayer(map, `${base}-fill`, 'fill', sourceId, srcLayer, { 'fill-color': fill }, fillFilter)
   }
   applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, { 'line-color': lineColor, 'line-width': lineWidth }, filter)
 }
 
+const applyFillExtrusionHighlight = (map, base, layerId, { ids, lineColor, lineWidth, idExpression }) => {
+  // forEach bypasses broken Set iterator polyfill in the Docusaurus/core-js environment
+  const newIds = []
+  ids.forEach(id => newIds.push(id))
+
+  const filter = ['in', idExpression, ['literal', newIds]]
+  const { source, sourceLayer } = map.getLayer(layerId)
+
+  // A line layer moved to the top of the stack renders above the fill-extrusion 3D pass.
+  // fill-extrusion has no outline/stroke property, so this is the only way to show a stroke.
+  applyHighlightLayer(map, `${base}-line`, 'line', source, sourceLayer, { 'line-color': lineColor, 'line-width': lineWidth }, filter)
+}
+
+const resolveLineStyle = (style, selectedStyle) => ({
+  lineColor: selectedStyle ? style.selectionStroke : style.stroke,
+  lineWidth: selectedStyle ? style.strokeWidth : style.activeStrokeWidth
+})
+
+const applyLineHighlight = (map, base, sourceId, srcLayer, lineColor, lineWidth, filter) => {
+  if (map.getLayer(`${base}-fill`)) {
+    map.setFilter(`${base}-fill`, ['==', 'id', ''])
+  }
+  applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, { 'line-color': lineColor, 'line-width': lineWidth }, filter)
+}
+
+const applySymbolHighlight = (map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId) => {
+  applySymbolGeomHighlight(map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId)
+}
+
+// Orchestrates highlight layers for a single source. prefix drives which visual style is used:
+//   active-highlight        → yellow active ring (stroke only)
+//   active-highlight-inner  → black thin ring drawn on top of active
+//   selected-highlight      → black thin ring + fill for polygon features
 const applySourceHighlight = (map, sourceId, featuresBySource, stylesMap, prefix, getSymbolImageId) => {
   const { ids, fillIds, idProperty, layerId, hasFillGeometry } = featuresBySource[sourceId]
   const baseLayer = map.getLayer(layerId)
-  const srcLayer = baseLayer.sourceLayer
-  const geom = hasFillGeometry ? 'fill' : baseLayer.type
-  const base = `${prefix}-${sourceId}`
-  const style = stylesMap[layerId]
 
-  if (!style) {
+  if (!baseLayer || !stylesMap[layerId]) {
     return
   }
 
-  const { stroke, selectionStroke, strokeWidth, activeStrokeWidth, fill } = style
+  const style = stylesMap[layerId]
+  const srcLayer = baseLayer.sourceLayer
+  const geom = hasFillGeometry ? 'fill' : baseLayer.type
+  const base = `${prefix}-${sourceId}`
+  const { fill } = style
   const isSelected = prefix === SELECTED_PREFIX
   const selectedStyle = usesSelectedStyle(prefix)
-  const lineColor = selectedStyle ? selectionStroke : stroke
-  const lineWidth = selectedStyle ? strokeWidth : activeStrokeWidth
+  const { lineColor, lineWidth } = resolveLineStyle(style, selectedStyle)
   const idExpression = idProperty ? ['get', idProperty] : ['id']
-  const filter = ['in', idExpression, ['literal', [...ids]]]
-
-  if (geom === 'fill') {
-    applyFillGeomHighlight(map, base, sourceId, srcLayer, { isSelected, idExpression, fillIds, fill, lineColor, lineWidth, filter })
-  }
+  const idsArray = Array.from(ids)
+  const filter = ['in', idExpression, ['literal', idsArray]]
 
-  if (geom === 'line') {
-    if (map.getLayer(`${base}-fill`)) {
-      // Clear any fill highlight from a previous polygon on the same source
-      map.setFilter(`${base}-fill`, ['==', 'id', ''])
-    }
-    applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, { 'line-color': lineColor, 'line-width': lineWidth }, filter)
+  if (baseLayer.type === 'fill-extrusion') {
+    applyFillExtrusionHighlight(map, base, layerId, { ids, lineColor, lineWidth, idExpression })
+    return
   }
 
-  if (geom === 'symbol') {
-    applySymbolGeomHighlight(map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId)
+  switch (geom) {
+    case 'fill':
+      applyFillGeomHighlight(map, base, sourceId, srcLayer, { isSelected, idExpression, fillIds, fill, lineColor, lineWidth, filter })
+      break
+    case 'line':
+      applyLineHighlight(map, base, sourceId, srcLayer, lineColor, lineWidth, filter)
+      break
+    case 'symbol':
+      applySymbolHighlight(map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId)
+      break
+    default:
+      break
   }
 }
 
@@ -182,16 +223,24 @@ const applyFeatureHighlights = (map, features, stylesMap, prefix, getSymbolImage
 }
 
 /**
- * Update highlighted features using pure filters.
+ * Update highlighted features using pure filters (no cloned sources).
  * activeFeatures (keyboard cursor) render with the active ring (yellow) plus a selected ring inner (black).
  * selectedFeatures render with the selected ring (black) only.
  * Supports fill, line and symbol geometry, multi-source, cleanup, and bounds.
+ *
+ * @param {object} opts
+ * @param {Function} opts.LngLatBounds - MapLibre LngLatBounds constructor
+ * @param {object} opts.map - MapLibre map instance
+ * @param {Array}  opts.selectedFeatures - committed selection features
+ * @param {Array}  opts.activeFeatures   - keyboard-cursor features
+ * @param {object} opts.stylesMap        - keyed by layerId; each value is
+ *   { stroke, selectionStroke, strokeWidth, activeStrokeWidth, fill }
+ * @returns {number[]|null} [west, south, east, north] bounds or null if nothing is selected
  */
 export function updateHighlightedFeatures ({ LngLatBounds, map, selectedFeatures, activeFeatures, stylesMap }) {
   if (!map) {
     return null
   }
-
   // Active cursor features — rendered first so selected layers appear on top
   if (activeFeatures?.length) {
     applyFeatureHighlights(map, activeFeatures, stylesMap, ACTIVE_PREFIX, getActiveImageId)

package/providers/maplibre/src/utils/highlightFeatures.test.js

@@ -300,6 +300,95 @@ describe('Highlighting Utils — symbol layers (committed selection)', () => {
   })
 })
 
+// ─── fill-extrusion layers (3D buildings) ────────────────────────────────────
+
+describe('Highlighting Utils — fill-extrusion layers', () => {
+  const LAYER_ID = 'buildings 3D'
+  const STYLES = { [LAYER_ID]: { stroke: '#aaa', selectionStroke: '#0073cc', strokeWidth: 3, activeStrokeWidth: 6 } }
+  const LINE_LAYER_ID = 'selected-highlight-composite-line'
+
+  let map
+
+  beforeEach(() => {
+    map = makeMap()
+    map.getLayer.mockImplementation(id => {
+      if (id === LAYER_ID) return { source: 'composite', sourceLayer: 'building', type: 'fill-extrusion' }
+      return null
+    })
+  })
+
+  test('adds a line overlay layer above the extrusion pass', () => {
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [{ featureId: 'uuid-abc', layerId: LAYER_ID, idProperty: 'uuid' }],
+      stylesMap: STYLES
+    })
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      id: LINE_LAYER_ID,
+      type: 'line',
+      source: 'composite',
+      'source-layer': 'building'
+    }))
+    expect(map.moveLayer).toHaveBeenCalledWith(LINE_LAYER_ID)
+  })
+
+  test('filters by idProperty expression when set', () => {
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [{ featureId: 'uuid-abc', layerId: LAYER_ID, idProperty: 'uuid' }],
+      stylesMap: STYLES
+    })
+    expect(map.setFilter).toHaveBeenCalledWith(
+      LINE_LAYER_ID,
+      ['in', ['get', 'uuid'], ['literal', ['uuid-abc']]]
+    )
+  })
+
+  test('filters by feature id when no idProperty', () => {
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [{ featureId: 42, layerId: LAYER_ID }],
+      stylesMap: STYLES
+    })
+    expect(map.setFilter).toHaveBeenCalledWith(
+      LINE_LAYER_ID,
+      ['in', ['id'], ['literal', [42]]]
+    )
+  })
+
+  test('paints the line overlay with selectionStroke colour', () => {
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [{ featureId: 'uuid-abc', layerId: LAYER_ID, idProperty: 'uuid' }],
+      stylesMap: STYLES
+    })
+    const colorCall = map.setPaintProperty.mock.calls.find(
+      c => c[0] === LINE_LAYER_ID && c[1] === 'line-color'
+    )
+    expect(colorCall?.[2]).toBe('#0073cc')
+  })
+
+  test('reuses existing line layer without re-adding', () => {
+    map.getLayer.mockImplementation(id => {
+      if (id === LAYER_ID) return { source: 'composite', sourceLayer: 'building', type: 'fill-extrusion' }
+      if (id === LINE_LAYER_ID) return { type: 'line' }
+      return null
+    })
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [{ featureId: 'uuid-abc', layerId: LAYER_ID, idProperty: 'uuid' }],
+      stylesMap: STYLES
+    })
+    expect(map.addLayer).not.toHaveBeenCalled()
+    expect(map.setPaintProperty).toHaveBeenCalledWith(LINE_LAYER_ID, 'line-color', '#0073cc')
+  })
+})
+
 describe('Highlighting Utils — missing style entry', () => {
   test('skips highlight when feature layerId has no entry in stylesMap', () => {
     const map = makeMap()
@@ -315,4 +404,47 @@ describe('Highlighting Utils — missing style entry', () => {
     expect(map.addLayer).not.toHaveBeenCalled()
     expect(map.setFilter).not.toHaveBeenCalled()
   })
+
+  test('returns early when base layer is not found', () => {
+    const map = makeMap()
+    let callCount = 0
+    map.getLayer.mockImplementation((id) => {
+      // First call from groupFeaturesBySource - return a valid layer
+      if (id === 'l1' && callCount === 0) {
+        callCount++
+        return { source: 's1', type: 'line' }
+      }
+      // Subsequent calls from applySourceHighlight - return null to trigger early return
+      return null
+    })
+
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [{ featureId: 1, layerId: 'l1' }],
+      stylesMap: { l1: { stroke: 'red' } }
+    })
+
+    expect(map.addLayer).not.toHaveBeenCalled()
+  })
+
+  test('handles unexpected geometry type gracefully', () => {
+    const map = makeMap()
+    map.getLayer.mockImplementation((id) => {
+      if (id === 'l1') {
+        return { source: 's1', type: 'raster' }
+      }
+      return null
+    })
+
+    updateHighlightedFeatures({
+      LngLatBounds,
+      map,
+      selectedFeatures: [{ featureId: 1, layerId: 'l1' }],
+      stylesMap: { l1: { stroke: 'red' } }
+    })
+
+    // Should not throw and not apply any highlighting for unexpected type
+    expect(map.addLayer).not.toHaveBeenCalled()
+  })
 })

package/providers/maplibre/src/utils/patternImages.js

@@ -45,11 +45,9 @@ const rasterisePattern = async (dataset, mapStyleId, patternRegistry, pixelRatio
 /**
  * Register pattern images for the given pre-resolved pattern configs.
  * Skips images that are already registered (safe to call on style change).
- * Callers are responsible for sublayer merging before passing configs here
- * (see `getPatternConfigs` in the datasets plugin adapter).
  *
  * @param {Object} map - MapLibre map instance
- * @param {Object[]} styleArray - Flat list of datasets/merged-sublayers with a pattern config
+ * @param {Object[]} styleArray - an array of pattern style configs
  * @param {string} mapStyleId
  * @param {Object} patternRegistry
  * @param {number} pixelRatio
@@ -67,7 +65,7 @@ export const addPatternsToMap = async (map, styleArray, mapStyleId, patternRegis
     if (imageId && !imagesToAdd[imageId] && !map.hasImage(imageId)) {
       imagesToAdd[imageId] = async () => {
         const result = await rasterisePattern(style, mapStyleId, patternRegistry, pixelRatio)
-        if (result) {
+        if (result && !map.hasImage(result.imageId)) {
           map.addImage(result.imageId, result.imageData, { pixelRatio: effectiveRatio })
         }
       }

package/providers/maplibre/src/utils/symbolImages.js

@@ -41,11 +41,8 @@ export const anchorToMaplibre = ([ax, ay]) => {
  * Skips images that are already registered (safe to call on style change).
  * Updates `map._activeSymbolImageMap` (normal→active) and `map._selectedSymbolImageMap` (normal→selected).
  *
- * Callers are responsible for resolving sublayers before calling this function
- * (see `getSymbolConfigs` in the datasets plugin adapter).
- *
  * @param {Object} map - MapLibre map instance
- * @param {Object[]} styleArray - Flat list of datasets/merged-sublayers that have a symbol config
+ * @param {Object[]} styleArray - an array of symbol configs
  * @param {Object} mapStyle - Current map style config (provides id, selectedColor, haloColor)
  * @param {Object} symbolRegistry
  * @param {number} [pixelRatio=2] - Device pixel ratio × map size scale factor (computed by caller)

package/rollup.esm.mjs

@@ -264,15 +264,9 @@ const ALL_BUILDS = [
   {
     entryPath: './plugins/beta/datasets/src/index.js',
     outDir: 'plugins/beta/datasets/dist/esm',
-    manualChunks: (id) => { if (id.includes('/manifest')) return 'im-datasets-plugin' }
-  },
-  {
-    entryPath: './plugins/beta/datasets/src/adapters/maplibre/index.js',
-    outDir: 'plugins/beta/datasets/dist/adapters/maplibre/esm',
     manualChunks: (id) => {
-      if (id.includes('maplibreLayerAdapter')) {
-        return 'im-datasets-ml-adapter'
-      }
+      if (id.includes('/manifest')) return 'im-datasets-plugin'
+      if (id.includes('maplibreLayerAdapter')) return 'im-datasets-ml-adapter'
     }
   },
   {

package/src/App/components/MapButton/MapButton.jsx

@@ -54,6 +54,18 @@ const captureMenuRect = (buttonRefs, buttonId, setMenuRect) => {
   setMenuRect(btn.getBoundingClientRect().toJSON())
 }
 
+/**
+ * Returns a keydown handler for buttons that control a popup menu.
+ * Prevents default scrolling behavior for ArrowDown and ArrowUp keys.
+ * @param {boolean} hasMenu - Whether the button has a popup menu
+ * @returns {Function} Keyboard event handler
+ */
+const makePopupKeyDownHandler = (hasMenu) => (e) => {
+  if (hasMenu && ['ArrowDown', 'ArrowUp'].includes(e.key)) {
+    e.preventDefault()
+  }
+}
+
 /**
  * Returns a keyup handler for buttons that control a popup menu.
  * ArrowDown opens the menu at the first item; ArrowUp opens at the last.
@@ -67,7 +79,6 @@ const captureMenuRect = (buttonRefs, buttonId, setMenuRect) => {
  */
 const makePopupKeyUpHandler = (hasMenu, buttonRefs, buttonId, setMenuStartPos, setMenuRect, setIsPopupOpen) => (e) => {
   if (hasMenu && ['ArrowDown', 'ArrowUp'].includes(e.key)) {
-    e.preventDefault()
     setMenuStartPos(e.key === 'ArrowUp' ? 'last' : 'first')
     captureMenuRect(buttonRefs, buttonId, setMenuRect)
     setIsPopupOpen(true)
@@ -121,6 +132,7 @@ const buildButtonProps = ({
   className,
   onClick,
   onKeyUp,
+  onKeyDown,
   buttonRefs,
   isDisabled,
   isPressed,
@@ -146,6 +158,7 @@ const buildButtonProps = ({
     className,
     onClick,
     onKeyUp,
+    onKeyDown,
     ref: (el) => {
       if (buttonRefs.current && buttonId) {
         buttonRefs.current[buttonId] = el
@@ -242,6 +255,7 @@ export const MapButton = ({
   }
 
   const handleButtonKeyUp = makePopupKeyUpHandler(hasMenu, buttonRefs, buttonId, setMenuStartPos, setMenuRect, setIsPopupOpen)
+  const handleButtonKeyDown = makePopupKeyDownHandler(hasMenu)
 
   const buttonProps = buildButtonProps({
     appId,
@@ -249,6 +263,7 @@ export const MapButton = ({
     className: buildButtonClassNames(buttonId, variant, showLabel),
     onClick: handleButtonClick,
     onKeyUp: handleButtonKeyUp,
+    onKeyDown: handleButtonKeyDown,
     buttonRefs,
     isDisabled,
     isPressed,

package/src/App/components/MapButton/MapButton.module.scss

@@ -189,4 +189,15 @@
     background-color: var(--pressed-button-background-color);
 }
 
-// 5. Responsive tweaks
+// 5. Responsive tweaks
+
+.im-o-app--tablet, .im-o-app--desktop {
+    .im-c-map-button--journey-back,
+    .im-c-map-button--journey-continue,
+    .im-c-map-button--select-at-target,
+    .im-c-map-button--draw-cancel,
+    .im-c-map-button--draw-done,
+    .im-c-map-button--draw-add-point {
+        min-width: var(--action-button-min-width);
+    }
+}

package/src/App/components/MapButton/MapButton.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, createEvent } from '@testing-library/react'
 import { MapButton } from './MapButton'
 
 jest.mock('../../../utils/stringToKebab', () => ({
@@ -153,6 +153,45 @@ describe('MapButton', () => {
     expect(menu).toHaveAttribute('data-selected-index', String(expectedIndex))
   })
 
+  it('prevents default on keyDown for arrow keys with menu', () => {
+    renderButton({ menuItems: [{ label: 'Item' }] })
+    const button = getButton()
+
+    const event = createEvent.keyDown(button, { key: 'ArrowDown' })
+    const preventDefaultSpy = jest.spyOn(event, 'preventDefault')
+
+    fireEvent(button, event)
+    expect(preventDefaultSpy).toHaveBeenCalled()
+    preventDefaultSpy.mockRestore()
+  })
+
+  it.each([
+    ['Enter'],
+    ['Escape']
+  ])('does not prevent default on keyDown for key %s', (key) => {
+    renderButton({ menuItems: [{ label: 'Item' }] })
+    const button = getButton()
+
+    const event = createEvent.keyDown(button, { key })
+    const preventDefaultSpy = jest.spyOn(event, 'preventDefault')
+
+    fireEvent(button, event)
+    expect(preventDefaultSpy).not.toHaveBeenCalled()
+    preventDefaultSpy.mockRestore()
+  })
+
+  it('does not prevent default on keyDown for arrow keys without menu', () => {
+    renderButton()
+    const button = getButton()
+
+    const event = createEvent.keyDown(button, { key: 'ArrowDown' })
+    const preventDefaultSpy = jest.spyOn(event, 'preventDefault')
+
+    fireEvent(button, event)
+    expect(preventDefaultSpy).not.toHaveBeenCalled()
+    preventDefaultSpy.mockRestore()
+  })
+
   it('passes buttonRect to popup menu on open', () => {
     renderButton({ menuItems: [{ label: 'Item' }] })
     fireEvent.click(getButton())

package/src/App/hooks/useContinueEnabledEvaluator.js

@@ -0,0 +1,31 @@
+import { useLayoutEffect, useContext, useRef } from 'react'
+import { useApp } from '../store/appContext.js'
+import { useConfig } from '../store/configContext.js'
+import { useMap } from '../store/mapContext.js'
+import { PluginContext } from '../store/PluginProvider.jsx'
+
+export function useContinueEnabledEvaluator () {
+  const backAndContinue = useConfig()?.backAndContinue
+  const { dispatch } = useApp()
+  const mapState = useMap()
+  const pluginContext = useContext(PluginContext)
+  const lastIsDisabledRef = useRef(true)
+
+  useLayoutEffect(() => {
+    if (typeof backAndContinue?.continueEnabledWhen !== 'function') { return }
+    let isEnabled = false
+    try {
+      isEnabled = backAndContinue.continueEnabledWhen({
+        pluginStates: pluginContext?.state ?? {},
+        mapState
+      })
+    } catch (err) {
+      console.warn('continueEnabledWhen error:', err)
+    }
+    const isDisabled = !isEnabled
+    if (lastIsDisabledRef.current !== isDisabled) {
+      lastIsDisabledRef.current = isDisabled
+      dispatch({ type: 'TOGGLE_BUTTON_DISABLED', payload: { id: 'journeyContinue', isDisabled } })
+    }
+  }, [backAndContinue, pluginContext, mapState, dispatch])
+}

package/src/App/hooks/useContinueEnabledEvaluator.test.js

@@ -0,0 +1,118 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react'
+import { useContinueEnabledEvaluator } from './useContinueEnabledEvaluator.js'
+import { PluginContext } from '../store/PluginProvider.jsx'
+import * as configStore from '../store/configContext.js'
+import * as appStore from '../store/appContext.js'
+import * as mapStore from '../store/mapContext.js'
+
+jest.mock('../store/configContext.js', () => ({ useConfig: jest.fn() }))
+jest.mock('../store/appContext.js', () => ({ useApp: jest.fn() }))
+jest.mock('../store/mapContext.js', () => ({ useMap: jest.fn() }))
+
+const pluginStates = { interact: { selectedFeatures: ['f1', 'f2'] } }
+const mockMapState = { zoom: 10, center: [0, 0] }
+
+const wrapper = ({ children }) => (
+  <PluginContext.Provider value={{ state: pluginStates, dispatch: jest.fn() }}>
+    {children}
+  </PluginContext.Provider>
+)
+
+let dispatch
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  dispatch = jest.fn()
+  appStore.useApp.mockReturnValue({ dispatch })
+  mapStore.useMap.mockReturnValue(mockMapState)
+})
+
+describe('useContinueEnabledEvaluator — no-op cases', () => {
+  it('does nothing when continueEnabledWhen is not provided', () => {
+    configStore.useConfig.mockReturnValue({ backAndContinue: { continueLabel: 'Continue' } })
+    renderHook(() => useContinueEnabledEvaluator(), { wrapper })
+    expect(dispatch).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when backAndContinue is null', () => {
+    configStore.useConfig.mockReturnValue({ backAndContinue: null })
+    renderHook(() => useContinueEnabledEvaluator(), { wrapper })
+    expect(dispatch).not.toHaveBeenCalled()
+  })
+})
+
+describe('useContinueEnabledEvaluator — dispatching', () => {
+  it('dispatches enable on first render when continueEnabledWhen returns true', () => {
+    configStore.useConfig.mockReturnValue({
+      backAndContinue: { continueEnabledWhen: ({ pluginStates: ps }) => ps.interact.selectedFeatures.length > 1 }
+    })
+    renderHook(() => useContinueEnabledEvaluator(), { wrapper })
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_BUTTON_DISABLED',
+      payload: { id: 'journeyContinue', isDisabled: false }
+    })
+  })
+
+  it('does not dispatch on first render when continueEnabledWhen returns false (already disabled)', () => {
+    configStore.useConfig.mockReturnValue({
+      backAndContinue: { continueEnabledWhen: () => false }
+    })
+    renderHook(() => useContinueEnabledEvaluator(), { wrapper })
+    expect(dispatch).not.toHaveBeenCalled()
+  })
+
+  it('dispatches disable after button was enabled', () => {
+    let enabled = true
+    configStore.useConfig.mockReturnValue({
+      backAndContinue: { continueEnabledWhen: () => enabled }
+    })
+    const { rerender } = renderHook(() => useContinueEnabledEvaluator(), { wrapper })
+    dispatch.mockClear()
+    enabled = false
+    rerender()
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_BUTTON_DISABLED',
+      payload: { id: 'journeyContinue', isDisabled: true }
+    })
+  })
+
+  it('does not dispatch again if the enabled state has not changed', () => {
+    configStore.useConfig.mockReturnValue({
+      backAndContinue: { continueEnabledWhen: () => true }
+    })
+    const { rerender } = renderHook(() => useContinueEnabledEvaluator(), { wrapper })
+    dispatch.mockClear()
+    rerender()
+    expect(dispatch).not.toHaveBeenCalled()
+  })
+})
+
+describe('useContinueEnabledEvaluator — no PluginContext', () => {
+  it('passes empty pluginStates when PluginContext is not provided', () => {
+    const continueEnabledWhen = jest.fn(() => true)
+    configStore.useConfig.mockReturnValue({ backAndContinue: { continueEnabledWhen } })
+    renderHook(() => useContinueEnabledEvaluator())
+    expect(continueEnabledWhen).toHaveBeenCalledWith({ pluginStates: {}, mapState: mockMapState })
+  })
+})
+
+describe('useContinueEnabledEvaluator — error handling and context', () => {
+  it('warns and leaves button disabled if continueEnabledWhen throws on first render', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    configStore.useConfig.mockReturnValue({
+      backAndContinue: { continueEnabledWhen: () => { throw new Error('oops') } }
+    })
+    renderHook(() => useContinueEnabledEvaluator(), { wrapper })
+    expect(console.warn).toHaveBeenCalledWith('continueEnabledWhen error:', expect.any(Error))
+    expect(dispatch).not.toHaveBeenCalled()
+    console.warn.mockRestore()
+  })
+
+  it('passes pluginStates and mapState to continueEnabledWhen', () => {
+    const continueEnabledWhen = jest.fn(() => true)
+    configStore.useConfig.mockReturnValue({ backAndContinue: { continueEnabledWhen } })
+    renderHook(() => useContinueEnabledEvaluator(), { wrapper })
+    expect(continueEnabledWhen).toHaveBeenCalledWith({ pluginStates, mapState: mockMapState })
+  })
+})

package/src/App/hooks/useEvaluateProp.js

@@ -23,25 +23,25 @@ export function useEvaluateProp () {
     iconRegistry: getIconRegistry()
   }
 
-  function evaluateProp (prop, pluginId) {
-    let pluginConfig
-    let pluginState
-
-    if (pluginId) {
-      const pluginEntry = appConfig.pluginRegistry.registeredPlugins.find(p => p.id === pluginId)
-      pluginConfig = pluginEntry
-        ? {
-            pluginId: pluginEntry.id,
-            ...pluginEntry.config
-          }
-        : {}
-      // Only include this plugin's state + dispatch
+  function buildPluginContext (pluginId) {
+    if (!pluginId) { return { pluginStates: pluginContext?.state ?? {} } }
+
+    const pluginEntry = appConfig.pluginRegistry.registeredPlugins.find(p => p.id === pluginId)
+    const pluginConfig = pluginEntry ? { pluginId: pluginEntry.id, ...pluginEntry.config } : {}
+
+    // Only include isolated plugin state when the plugin has registered a reducer.
+    // Framework entries like 'appConfig' have no reducer so their buttons get pluginStates instead.
+    if (Object.hasOwn(pluginContext?.state ?? {}, pluginId)) {
       const stateForPlugin = pluginContext?.state?.[pluginId] ?? {}
-      pluginState = { ...stateForPlugin, dispatch: pluginContext?.dispatch }
+      const pluginState = { ...stateForPlugin, dispatch: pluginContext?.dispatch }
+      return { pluginConfig, pluginState }
     }
 
-    const fullContext = { ...ctx, pluginConfig, pluginState }
+    return { pluginConfig, pluginStates: pluginContext?.state ?? {} }
+  }
 
+  function evaluateProp (prop, pluginId) {
+    const fullContext = { ...ctx, ...buildPluginContext(pluginId) }
     return typeof prop === 'function' ? prop(fullContext) : prop
   }