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

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

@@ -8,57 +8,50 @@ import * as serviceStore from '../store/serviceContext.js'
 import { PluginContext } from '../store/PluginProvider.jsx'
 import * as iconRegistryModule from '../registry/iconRegistry.js'
 
-// --- Mock the dependencies ---
 jest.mock('../store/configContext.js', () => ({ useConfig: jest.fn() }))
 jest.mock('../store/appContext.js', () => ({ useApp: jest.fn() }))
 jest.mock('../store/mapContext.js', () => ({ useMap: jest.fn() }))
 jest.mock('../store/serviceContext.js', () => ({ useService: jest.fn() }))
 jest.mock('../registry/iconRegistry.js', () => ({ getIconRegistry: jest.fn() }))
 
-describe('useEvaluateProp hook', () => {
-  const pluginDispatch = jest.fn()
-  const mockPluginRegistry = {
-    registeredPlugins: [],
-    registerPlugin: jest.fn(),
-    clear: jest.fn()
-  }
-
-  const pluginContextValue = {
-    state: { myPlugin: { foo: 'bar' } },
-    dispatch: pluginDispatch
-  }
-
-  beforeEach(() => {
-    jest.clearAllMocks()
-    mockPluginRegistry.registeredPlugins = []
-    configStore.useConfig.mockReturnValue({
-      mapProvider: { name: 'leaflet' },
-      pluginRegistry: mockPluginRegistry
-    })
-    appStore.useApp.mockReturnValue({ user: 'alice' })
-    mapStore.useMap.mockReturnValue({ zoom: 5 })
-    serviceStore.useService.mockReturnValue({ reverseGeocode: jest.fn() })
-    iconRegistryModule.getIconRegistry.mockReturnValue({ close: '<svg/>' })
-  })
+const RAW_VALUE = 'raw-test-value'
+const pluginDispatch = jest.fn()
+const pluginContextValue = {
+  state: { myPlugin: { foo: 'bar' } },
+  dispatch: pluginDispatch
+}
+const mockPluginRegistry = {
+  registeredPlugins: [],
+  registerPlugin: jest.fn(),
+  clear: jest.fn()
+}
+
+const withPluginContext = ({ children }) => (
+  <PluginContext.Provider value={pluginContextValue}>
+    {children}
+  </PluginContext.Provider>
+)
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  mockPluginRegistry.registeredPlugins = []
+  configStore.useConfig.mockReturnValue({ mapProvider: { name: 'leaflet' }, pluginRegistry: mockPluginRegistry })
+  appStore.useApp.mockReturnValue({ user: 'alice' })
+  mapStore.useMap.mockReturnValue({ zoom: 5 })
+  serviceStore.useService.mockReturnValue({ reverseGeocode: jest.fn() })
+  iconRegistryModule.getIconRegistry.mockReturnValue({ close: '<svg/>' })
+})
 
+describe('useEvaluateProp — basic evaluation', () => {
   it('returns the raw prop if it is not a function', () => {
     const { result } = renderHook(() => useEvaluateProp())
-    const evaluate = result.current
-    const value = evaluate(42)
-    expect(value).toBe(42)
+    expect(result.current(RAW_VALUE)).toBe(RAW_VALUE)
   })
 
   it('calls prop function with full context when no pluginId provided', () => {
     const { result } = renderHook(() => useEvaluateProp())
-    const evaluate = result.current
-
     const fn = jest.fn(ctx => ctx.appState.user)
-
-    const value = evaluate(fn)
-
-    expect(fn).toHaveBeenCalled()
-    expect(value).toBe('alice')
-
+    expect(result.current(fn)).toBe('alice')
     expect(fn.mock.calls[0][0]).toMatchObject({
       appConfig: { mapProvider: { name: 'leaflet' } },
       appState: { user: 'alice' },
@@ -69,56 +62,67 @@ describe('useEvaluateProp hook', () => {
     })
   })
 
-  it('includes pluginConfig and pluginState when pluginId provided', () => {
-    mockPluginRegistry.registeredPlugins.push({ id: 'myPlugin', config: { includeModes: ['edit'], excludeModes: ['view'] } })
+  it('exposes ctx property on the returned evaluateProp function', () => {
+    const { result } = renderHook(() => useEvaluateProp())
+    expect(result.current.ctx).toMatchObject({
+      appConfig: { mapProvider: { name: 'leaflet' } },
+      appState: { user: 'alice' },
+      mapState: { zoom: 5 },
+      services: { reverseGeocode: expect.any(Function) },
+      mapProvider: { name: 'leaflet' },
+      iconRegistry: { close: '<svg/>' }
+    })
+  })
+})
 
-    const wrapper = ({ children }) => (
-      <PluginContext.Provider value={pluginContextValue}>
-        {children}
-      </PluginContext.Provider>
-    )
+describe('useEvaluateProp — pluginStates (core/framework buttons)', () => {
+  it('includes pluginStates in context when no pluginId provided', () => {
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    expect(result.current(ctx => ctx.pluginStates)).toEqual({ myPlugin: { foo: 'bar' } })
+  })
 
-    const { result } = renderHook(() => useEvaluateProp(), { wrapper })
-    const evaluate = result.current
+  it('includes pluginStates for appConfig plugin (no reducer, not in state)', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'appConfig', config: {} })
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    expect(result.current(ctx => ctx.pluginStates, 'appConfig')).toEqual({ myPlugin: { foo: 'bar' } })
+  })
 
-    const fn = jest.fn(ctx => ctx.pluginState.foo)
-    const value = evaluate(fn, 'myPlugin')
+  it('falls back to empty pluginStates when PluginContext is not provided', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'appConfig', config: {} })
+    const { result } = renderHook(() => useEvaluateProp())
+    expect(result.current(ctx => ctx.pluginStates, 'appConfig')).toEqual({})
+  })
+})
 
-    expect(fn).toHaveBeenCalled()
-    expect(value).toBe('bar')
-    const ctxPassed = fn.mock.calls[0][0]
-    expect(ctxPassed.pluginConfig).toEqual({
-      pluginId: 'myPlugin',
-      includeModes: ['edit'],
-      excludeModes: ['view']
-    })
-    expect(ctxPassed.pluginState).toMatchObject({ foo: 'bar', dispatch: pluginDispatch })
+describe('useEvaluateProp — plugin state isolation', () => {
+  it('includes pluginConfig and pluginState for real plugin buttons', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'myPlugin', config: { includeModes: ['edit'], excludeModes: ['view'] } })
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    const ctx = result.current(c => c, 'myPlugin')
+    expect(ctx.pluginConfig).toEqual({ pluginId: 'myPlugin', includeModes: ['edit'], excludeModes: ['view'] })
+    expect(ctx.pluginState).toMatchObject({ foo: 'bar', dispatch: pluginDispatch })
+  })
+
+  it('does not include pluginStates for real plugin buttons', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'myPlugin', config: {} })
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    expect(result.current(ctx => ctx.pluginStates, 'myPlugin')).toBeUndefined()
   })
 
   it('returns empty pluginConfig if plugin not registered', () => {
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    expect(result.current(ctx => ctx.pluginConfig, 'unknownPlugin')).toEqual({})
+  })
+
+  it('falls back to empty object when plugin state entry is null', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'myPlugin', config: {} })
     const wrapper = ({ children }) => (
-      <PluginContext.Provider value={pluginContextValue}>
+      <PluginContext.Provider value={{ state: { myPlugin: null }, dispatch: pluginDispatch }}>
         {children}
       </PluginContext.Provider>
     )
     const { result } = renderHook(() => useEvaluateProp(), { wrapper })
-    const evaluate = result.current
-
-    const fn = jest.fn(ctx => ctx.pluginConfig)
-    const value = evaluate(fn, 'unknownPlugin')
-    expect(value).toEqual({})
-  })
-
-  it('exposes ctx property on the returned evaluateProp function', () => {
-    const { result } = renderHook(() => useEvaluateProp())
-    const evaluate = result.current
-    expect(evaluate.ctx).toMatchObject({
-      appConfig: { mapProvider: { name: 'leaflet' } },
-      appState: { user: 'alice' },
-      mapState: { zoom: 5 },
-      services: { reverseGeocode: expect.any(Function) },
-      mapProvider: { name: 'leaflet' },
-      iconRegistry: { close: '<svg/>' }
-    })
+    const ctx = result.current(c => c, 'myPlugin')
+    expect(ctx.pluginState).toMatchObject({ dispatch: pluginDispatch })
   })
 })

package/src/App/hooks/useLayoutMeasurements.js

@@ -154,8 +154,6 @@ export function useLayoutMeasurements () {
   //    that is Effect 2's responsibility.
   // --------------------------------
   useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, bottomRef, bottomRightRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef], () => {
-    requestAnimationFrame(() => {
-      calculateLayout(layoutRefs)
-    })
+    calculateLayout(layoutRefs)
   })
 }

package/src/App/hooks/useResizeObserver.js

@@ -13,6 +13,8 @@ export function useResizeObserver (targetRefs, callback) {
     }
 
     const observer = new window.ResizeObserver(entries => {
+      const changedEntries = []
+
       for (const entry of entries) {
         const { width, height } = entry.contentRect
         const prev = prevSizes.current.get(entry.target) || {}
@@ -22,8 +24,17 @@ export function useResizeObserver (targetRefs, callback) {
         }
 
         prevSizes.current.set(entry.target, { width, height })
+        changedEntries.push(entry)
+      }
 
-        callback(entry)
+      if (changedEntries.length) {
+        // Batch all entries into a single RAF — prevents multiple simultaneous
+        // resize events (e.g. panel open) from queueing separate callbacks and
+        // causing a ResizeObserver loop under synchronous renderers like preact.
+        cancelAnimationFrame(frameRef.current)
+        frameRef.current = requestAnimationFrame(() => {
+          for (const entry of changedEntries) { callback(entry) }
+        })
       }
     })
 

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

@@ -26,6 +26,7 @@ describe('useResizeObserver', () => {
       this.trigger = (entries) => cb(entries) // helper to simulate resize
     })
 
+    jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => { cb(); return 0 })
     jest.spyOn(global, 'cancelAnimationFrame').mockImplementation(() => {})
   })
 

package/src/App/renderer/PluginInits.jsx

@@ -7,6 +7,7 @@ import { useApp } from '../store/appContext.js'
 import { useConfig } from '../store/configContext.js'
 import { useEvaluateProp } from '../hooks/useEvaluateProp.js'
 import { useButtonStateEvaluator } from '../hooks/useButtonStateEvaluator.js'
+import { useContinueEnabledEvaluator } from '../hooks/useContinueEnabledEvaluator.js'
 
 // Create a component for each plugin to handle its hooks properly
 const PluginInit = ({ plugin, mode }) => {
@@ -55,6 +56,7 @@ export const PluginInits = () => {
   // Evaluate reactive button states globally
   const evaluateProp = useEvaluateProp()
   useButtonStateEvaluator(evaluateProp)
+  useContinueEnabledEvaluator()
 
   return (
     <>

package/src/App/renderer/mapButtons.js

@@ -116,6 +116,24 @@ function resolveGroupOrder (group) {
   return group.order ?? 0
 }
 
+function applySlotExclusivity (matching, appState) {
+  let exclusivePluginId = null
+
+  for (const [id, config] of matching) {
+    if (config.exclusiveSlot && !appState.hiddenButtons.has(id) && config.pluginId) {
+      if (exclusivePluginId !== null && exclusivePluginId !== config.pluginId) {
+        logger.warn(`Slot exclusivity conflict: plugins [${exclusivePluginId}, ${config.pluginId}] are both claiming exclusive slot ownership. Showing all buttons.`)
+        return matching
+      }
+      exclusivePluginId = config.pluginId
+    }
+  }
+
+  if (exclusivePluginId === null) { return matching }
+
+  return matching.filter(([_, config]) => config.pluginId === exclusivePluginId)
+}
+
 function renderButton ({ btn, appState, appConfig, evaluateProp }) {
   const [buttonId, config] = btn
   const bpConfig = config[appState.breakpoint] ?? {}
@@ -148,7 +166,8 @@ function renderButton ({ btn, appState, appConfig, evaluateProp }) {
 function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
   const { buttonConfig, breakpoint } = appState
 
-  const matching = getMatchingButtons({ appState, appConfig, buttonConfig, slot, evaluateProp })
+  const raw = getMatchingButtons({ appState, appConfig, buttonConfig, slot, evaluateProp })
+  const matching = applySlotExclusivity(raw, appState)
 
   if (!matching.length) {
     return []
@@ -243,6 +262,7 @@ function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
 export {
   mapButtons,
   getMatchingButtons,
+  applySlotExclusivity,
   renderButton,
   resolveGroupName,
   resolveGroupLabel,

package/src/App/renderer/mapButtons.test.js

@@ -1,7 +1,9 @@
 import React from 'react'
-import { mapButtons, getMatchingButtons, renderButton, resolveGroupName, resolveGroupLabel, resolveGroupOrder } from './mapButtons.js'
+import { mapButtons, getMatchingButtons, applySlotExclusivity, renderButton, resolveGroupName, resolveGroupLabel, resolveGroupOrder } from './mapButtons.js'
+import { logger } from '../../services/logger.js'
 import { getPanelConfig } from '../registry/panelRegistry.js'
 
+jest.mock('../../services/logger.js', () => ({ logger: { warn: jest.fn() } }))
 jest.mock('../registry/buttonRegistry.js')
 jest.mock('../registry/panelRegistry.js')
 jest.mock('../components/MapButton/MapButton.jsx', () => ({
@@ -350,6 +352,49 @@ describe('mapButtons module', () => {
       expect(map()[0].order).toBe(0)
     })
 
+    it('filters to exclusive plugin when one plugin has a visible exclusiveSlot button', () => {
+      appState.buttonConfig = {
+        drawCancel: { ...baseBtn, pluginId: 'draw', exclusiveSlot: true },
+        journeyBack: { ...baseBtn }
+      }
+      const matching = [['drawCancel', appState.buttonConfig.drawCancel], ['journeyBack', appState.buttonConfig.journeyBack]]
+      const result = applySlotExclusivity(matching, appState)
+      expect(result).toHaveLength(1)
+      expect(result[0][0]).toBe('drawCancel')
+    })
+
+    it('returns all buttons when no exclusiveSlot buttons are visible', () => {
+      appState.buttonConfig = {
+        drawCancel: { ...baseBtn, pluginId: 'draw', exclusiveSlot: true },
+        journeyBack: { ...baseBtn }
+      }
+      appState.hiddenButtons = new Set(['drawCancel'])
+      const matching = [['drawCancel', appState.buttonConfig.drawCancel], ['journeyBack', appState.buttonConfig.journeyBack]]
+      const result = applySlotExclusivity(matching, appState)
+      expect(result).toHaveLength(2)
+    })
+
+    it('returns all buttons when no buttons have exclusiveSlot', () => {
+      const matching = [['b1', { ...baseBtn }], ['b2', { ...baseBtn }]]
+      expect(applySlotExclusivity(matching, appState)).toHaveLength(2)
+    })
+
+    it('ignores exclusiveSlot on buttons without a pluginId', () => {
+      const matching = [['hostBtn', { ...baseBtn, exclusiveSlot: true }]]
+      expect(applySlotExclusivity(matching, appState)).toHaveLength(1)
+    })
+
+    it('warns and returns all when multiple plugins claim exclusivity', () => {
+      const matching = [
+        ['drawCancel', { ...baseBtn, pluginId: 'draw', exclusiveSlot: true }],
+        ['otherBtn', { ...baseBtn, pluginId: 'other', exclusiveSlot: true }]
+      ]
+      const result = applySlotExclusivity(matching, appState)
+      expect(result).toHaveLength(2)
+      expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('draw'))
+      expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('other'))
+    })
+
     it('excludes menu items from slot rendering even when they have a matching slot', () => {
       appState.buttonConfig = ({
         parent: baseBtn,

package/src/App/store/appReducer.js

@@ -40,7 +40,7 @@ export const initialState = (config) => {
     mode: mode || null,
     previousMode: null,
     safeZoneInset: null,
-    disabledButtons: new Set(),
+    disabledButtons: config.backAndContinue?.continueLabel ? new Set(['journeyContinue']) : new Set(),
     hiddenButtons: new Set(),
     pressedButtons: new Set(),
     expandedButtons: new Set(),

package/src/App/store/appReducer.test.js

@@ -70,6 +70,43 @@ describe('initialState', () => {
     expect(result.prefersReducedMotion).toBe(false)
   })
 
+  test('pre-disables journeyContinue when backAndContinue has a continueLabel', () => {
+    mockMedia()
+    mockPanels({})
+    mockFullscreen(false)
+
+    const config = {
+      behaviour: 'buttonFirst',
+      initialBreakpoint: 'md',
+      initialInterfaceType: 'desktop',
+      appColorScheme: 'light',
+      autoColorScheme: false,
+      backAndContinue: { continueLabel: 'Continue' },
+      ...createMockRegistries()
+    }
+
+    const result = initialState(config)
+    expect(result.disabledButtons.has('journeyContinue')).toBe(true)
+  })
+
+  test('does not pre-disable journeyContinue when backAndContinue is null', () => {
+    mockMedia()
+    mockPanels({})
+    mockFullscreen(false)
+
+    const config = {
+      behaviour: 'buttonFirst',
+      initialBreakpoint: 'md',
+      initialInterfaceType: 'desktop',
+      appColorScheme: 'light',
+      autoColorScheme: false,
+      ...createMockRegistries()
+    }
+
+    const result = initialState(config)
+    expect(result.disabledButtons.has('journeyContinue')).toBe(false)
+  })
+
   test('defaults mode to null when missing', () => {
     mockMedia({ prefersReducedMotion: false })
     mockPanels({})

package/src/InteractiveMap/InteractiveMap.js

@@ -415,6 +415,16 @@ export default class InteractiveMap {
     this.eventBus.emit(events.APP_TOGGLE_BUTTON_STATE, { id, prop, value })
   }
 
+  /**
+   * Enable or disable the journey continue button.
+   * Only has effect when backAndContinue is configured.
+   *
+   * @param {boolean} enabled
+   */
+  setContinueEnabled (enabled) {
+    this.toggleButtonState('journeyContinue', 'disabled', !enabled)
+  }
+
   /**
    * Add a panel to the UI.
    *

package/src/InteractiveMap/InteractiveMap.test.js

@@ -563,6 +563,14 @@ describe('InteractiveMap — Public API Methods', () => {
     expect(map.eventBus.emit).toHaveBeenCalledWith('app:togglebuttonstate', { id: 'btn-1', prop: 'disabled', value: true })
   })
 
+  it('setContinueEnabled enables and disables the journey continue button', () => {
+    map.setContinueEnabled(true)
+    expect(map.eventBus.emit).toHaveBeenCalledWith('app:togglebuttonstate', { id: 'journeyContinue', prop: 'disabled', value: false })
+
+    map.setContinueEnabled(false)
+    expect(map.eventBus.emit).toHaveBeenCalledWith('app:togglebuttonstate', { id: 'journeyContinue', prop: 'disabled', value: true })
+  })
+
   it('fitToBounds and setView emit correct events', () => {
     const bbox = [-0.489, 51.28, 0.236, 51.686]
     const center = [-0.1276, 51.5074]

package/src/config/appConfig.js

@@ -17,9 +17,34 @@ const exitButtonSlots = {
   showLabel: false
 }
 
+const journeyBackSlots = { slot: 'actions', showLabel: true }
+const journeyContinueSlots = { slot: 'actions', showLabel: true, order: 10 }
+
 // Default app buttons, panels and icons
 export const defaultAppConfig = {
   buttons: [{
+    id: 'journeyBack',
+    label: ({ appConfig }) => appConfig.backAndContinue?.backLabel,
+    variant: 'tertiary',
+    onClick: (_e, { appConfig, services }) =>
+      appConfig.behaviour === 'mapOnly' ? globalThis.history.back() : services.closeApp(),
+    excludeWhen: ({ appConfig, appState }) =>
+      !appConfig.backAndContinue?.backLabel ||
+      !appState.isFullscreen ||
+      (appConfig.behaviour === 'mapOnly' && globalThis.history.length <= 1),
+    mobile: journeyBackSlots,
+    tablet: journeyBackSlots,
+    desktop: journeyBackSlots
+  }, {
+    id: 'journeyContinue',
+    label: ({ appConfig }) => appConfig.backAndContinue?.continueLabel,
+    variant: 'primary',
+    onClick: (_e, { services, pluginStates, mapState }) => services.eventBus.emit('app:continue', { pluginStates, mapState }),
+    excludeWhen: ({ appConfig, appState }) => !appConfig.backAndContinue?.continueLabel || !appState.isFullscreen,
+    mobile: journeyContinueSlots,
+    tablet: journeyContinueSlots,
+    desktop: journeyContinueSlots
+  }, {
     id: 'exit',
     label: 'Exit',
     iconId: 'close',

package/src/config/appConfig.test.js

@@ -15,6 +15,8 @@ describe('defaultAppConfig', () => {
   const buttons = defaultAppConfig.buttons
   const fullscreenBtn = buttons.find(b => b.id === 'fullscreen')
   const exitBtn = buttons.find(b => b.id === 'exit')
+  const journeyBackBtn = buttons.find(b => b.id === 'journeyBack')
+  const journeyContinueBtn = buttons.find(b => b.id === 'journeyContinue')
   const zoomInBtn = buttons.find(b => b.id === 'zoomIn')
   const zoomOutBtn = buttons.find(b => b.id === 'zoomOut')
 
@@ -49,6 +51,54 @@ describe('defaultAppConfig', () => {
     expect(servicesMock.closeApp).toHaveBeenCalled()
   })
 
+  // --- JOURNEY BACK BUTTON ---
+  it('covers all branches of journeyBack excludeWhen', () => {
+    const base = { appConfig: { backAndContinue: { backLabel: 'Back' }, behaviour: 'buttonFirst' }, appState: { isFullscreen: true } }
+    expect(journeyBackBtn.excludeWhen({ appConfig: { backAndContinue: null, behaviour: 'buttonFirst' }, appState: { isFullscreen: true } })).toBe(true)
+    expect(journeyBackBtn.excludeWhen({ appConfig: { backAndContinue: { backLabel: 'Back' }, behaviour: 'buttonFirst' }, appState: { isFullscreen: false } })).toBe(true)
+    expect(journeyBackBtn.excludeWhen({ appConfig: { backAndContinue: { backLabel: 'Back' }, behaviour: 'mapOnly' }, appState: { isFullscreen: true } })).toBe(globalThis.history.length <= 1)
+    expect(journeyBackBtn.excludeWhen(base)).toBe(false)
+  })
+
+  it('journeyBack onClick calls history.back for mapOnly and closeApp otherwise', () => {
+    const historySpy = jest.spyOn(globalThis.history, 'back').mockImplementation(() => {})
+    const servicesMock = { closeApp: jest.fn() }
+
+    journeyBackBtn.onClick({}, { appConfig: { behaviour: 'mapOnly' }, services: servicesMock })
+    expect(historySpy).toHaveBeenCalled()
+    expect(servicesMock.closeApp).not.toHaveBeenCalled()
+
+    journeyBackBtn.onClick({}, { appConfig: { behaviour: 'buttonFirst' }, services: servicesMock })
+    expect(servicesMock.closeApp).toHaveBeenCalled()
+
+    historySpy.mockRestore()
+  })
+
+  // --- JOURNEY CONTINUE BUTTON ---
+  it('covers all branches of journeyContinue excludeWhen', () => {
+    expect(journeyContinueBtn.excludeWhen({ appConfig: { backAndContinue: null }, appState: { isFullscreen: true } })).toBe(true)
+    expect(journeyContinueBtn.excludeWhen({ appConfig: { backAndContinue: { continueLabel: 'Continue' } }, appState: { isFullscreen: false } })).toBe(true)
+    expect(journeyContinueBtn.excludeWhen({ appConfig: { backAndContinue: { continueLabel: 'Continue' } }, appState: { isFullscreen: true } })).toBe(false)
+  })
+
+  it('journeyBack label returns backLabel from config', () => {
+    expect(journeyBackBtn.label({ appConfig: { backAndContinue: { backLabel: 'Back' } } })).toBe('Back')
+    expect(journeyBackBtn.label({ appConfig: { backAndContinue: null } })).toBeUndefined()
+  })
+
+  it('journeyContinue label returns continueLabel from config', () => {
+    expect(journeyContinueBtn.label({ appConfig: { backAndContinue: { continueLabel: 'Continue' } } })).toBe('Continue')
+    expect(journeyContinueBtn.label({ appConfig: { backAndContinue: null } })).toBeUndefined()
+  })
+
+  it('journeyContinue onClick emits app:continue with pluginStates and mapState', () => {
+    const eventBusMock = { emit: jest.fn() }
+    const pluginStates = { interact: { selectedFeatures: [] } }
+    const mapState = { zoom: 12, center: [-1.5, 53.0] }
+    journeyContinueBtn.onClick({}, { services: { eventBus: eventBusMock }, pluginStates, mapState })
+    expect(eventBusMock.emit).toHaveBeenCalledWith('app:continue', { pluginStates, mapState })
+  })
+
   // --- FULLSCREEN BUTTON (Line 39 Coverage) ---
   it('evaluates fullscreen label and icon states', () => {
     const containerMock = { requestFullscreen: jest.fn() }

package/src/config/defaults.js

@@ -19,6 +19,7 @@ const defaults = {
   enableZoomControls: true,
   genericErrorText: 'There was a problem loading the map. Please try again later.',
   hasExitButton: false,
+  backAndContinue: null,
   hybridWidth: null, // Defaults to maxMobileWidth if not set
   keyboardHintText: '<span class="im-u-visually-hidden">Press </span><kbd>Shift</kbd> + <kbd>?</kbd> <span class="im-u-visually-hidden">to view </span>keyboard shortcuts',
   mapLabel: 'Interactive map application',

package/src/scss/settings/_dimensions.scss

@@ -43,6 +43,7 @@
 
     // Action bar (Needs to fit evently if tools are in right hand column)
     --action-bar-max-width: calc(100% - (var(--button-size) * 2) - (var(--primary-gap) * 4));
+    --action-button-min-width: 120px;
 
     // Attributions
     --attributions-padding: 2px 5px;

package/src/services/patternRegistry.js

@@ -41,6 +41,13 @@ export const patternRegistry = {
     patterns.clear()
   },
 
+  initialise () {
+    // Seed built-in patterns
+    Object.entries(BUILT_IN_PATTERNS).forEach(([id, svgContent]) => {
+      this.register(id, svgContent)
+    })
+  },
+
   /**
    * Returns the raw (un-coloured) inner SVG content for a style's pattern.
    * Precedence: inline fillPatternSvgContent → named fillPattern from registry.
@@ -102,7 +109,4 @@ export const patternRegistry = {
   }
 }
 
-// Seed built-in patterns
-Object.entries(BUILT_IN_PATTERNS).forEach(([id, svgContent]) => {
-  patternRegistry.register(id, svgContent)
-})
+patternRegistry.initialise() // Seed built-in patterns

package/src/types.js

@@ -680,6 +680,13 @@
  * @property {string} [genericErrorText]
  * Fallback error message shown when the map fails to load.
  *
+ * @property {{ backLabel?: string, continueLabel?: string, continueEnabledWhen?: function }} [backAndContinue=null]
+ * When set, shows Back and/or Continue buttons in the actions bar when the map is fullscreen.
+ * Omit `backLabel` to suppress the Back button; omit `continueLabel` to suppress the Continue button.
+ * `continueEnabledWhen({ pluginStates, mapState })` is a reactive predicate that controls the enabled
+ * state of the Continue button — use this instead of `setContinueEnabled()` for declarative control.
+ * In `mapOnly` behaviour the Back button is hidden when there is no browser history to go back to.
+ *
  * @property {boolean} [hasExitButton=false]
  * Whether an exit map button is displayed when the app is fullscreen.
  *

package/src/utils/patternUtils.js

@@ -8,8 +8,7 @@ export const getEffectivePixelRatio = (pixelRatio) => Math.max(PATTERN_MIN_PIXEL
 export const hashString = (str) => {
   let hash = 0
   for (const ch of str) {
-    hash = ((hash << 5) - hash) + ch.codePointAt(0)
-    hash = hash & hash
+    hash = Math.trunc(((hash << 5) - hash) + ch.codePointAt(0))
   }
   return Math.abs(hash).toString(36) // NOSONAR: base36 encoding for compact alphanumeric hash string
 }

package/src/utils/patternUtils.test.js

@@ -14,9 +14,18 @@ describe('hashString', () => {
     expect(hashString('hello')).toBe(hashString('hello'))
   })
 
+  it('returns the same hash for the same input', () => {
+    expect(hashString('https://tiles.example.com/{z}/{x}/{y}'))
+      .toBe(hashString('https://tiles.example.com/{z}/{x}/{y}'))
+  })
+
   test('produces different values for different inputs', () => {
     expect(hashString('a')).not.toBe(hashString('b'))
   })
+
+  it('handles an empty string without throwing', () => {
+    expect(() => hashString('')).not.toThrow()
+  })
 })
 
 describe('injectColors', () => {