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

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
   }
 

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

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, useMemo } from 'react'
 import { useResizeObserver } from './useResizeObserver.js'
 import { useApp } from '../store/appContext.js'
 import { useMap } from '../store/mapContext.js'
@@ -153,9 +153,15 @@ export function useLayoutMeasurements () {
   //    actions buttons, etc.). Safe zone is intentionally not dispatched here —
   //    that is Effect 2's responsibility.
   // --------------------------------
-  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, bottomRef, bottomRightRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef], () => {
-    requestAnimationFrame(() => {
-      calculateLayout(layoutRefs)
-    })
+  // Stable reference — all entries are ref objects from useApp that never change.
+  // Prevents useResizeObserver's effect from re-running (and cancelling its RAF)
+  // on every render due to a new array literal being passed each time.
+  const observedRefs = useMemo(
+    () => [bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, bottomRef, bottomRightRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef],
+    []
+  )
+
+  useResizeObserver(observedRefs, () => {
+    calculateLayout(layoutRefs)
   })
 }

package/src/App/hooks/useResizeObserver.js

@@ -3,6 +3,8 @@ import { useEffect, useRef } from 'react'
 export function useResizeObserver (targetRefs, callback) {
   const frameRef = useRef()
   const prevSizes = useRef(new WeakMap()) // track sizes per element
+  const callbackRef = useRef(callback)
+  callbackRef.current = callback
 
   useEffect(() => {
     const refs = Array.isArray(targetRefs) ? targetRefs : [targetRefs]
@@ -13,6 +15,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 +26,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) { callbackRef.current(entry) }
+        })
       }
     })
 
@@ -35,7 +48,7 @@ export function useResizeObserver (targetRefs, callback) {
         cancelAnimationFrame(frameRef.current)
       }
     }
-  }, [targetRefs, callback])
+  }, [targetRefs]) // callback intentionally omitted — always read from callbackRef
 
   return { frameRef }
 }

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

@@ -225,8 +225,8 @@ export default class InteractiveMap {
         }
       })
 
-      updateDOMState(this)
-      this.eventBus.emit(events.APP_OPENED, { statePreserved: false })
+      const { isFullscreen } = updateDOMState(this)
+      this.eventBus.emit(events.APP_OPENED, { statePreserved: false, isFullscreen })
     } catch (err) {
       this._openButton?.removeAttribute('style')
       renderError(this.rootEl, this.config.genericErrorText)
@@ -304,9 +304,9 @@ export default class InteractiveMap {
       this._openButton.style.display = 'none'
     }
 
-    updateDOMState(this)
+    const { isFullscreen } = updateDOMState(this)
 
-    this.eventBus.emit(events.APP_OPENED, { statePreserved: true })
+    this.eventBus.emit(events.APP_OPENED, { statePreserved: true, isFullscreen })
   }
 
   /**
@@ -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

@@ -23,7 +23,7 @@ jest.mock('./behaviourController.js', () => ({
   setupBehavior: jest.fn(),
   shouldLoadComponent: jest.fn(() => true)
 }))
-jest.mock('./domStateManager.js', () => ({ updateDOMState: jest.fn(), removeLoadingState: jest.fn() }))
+jest.mock('./domStateManager.js', () => ({ updateDOMState: jest.fn().mockReturnValue({ isFullscreen: false }), removeLoadingState: jest.fn() }))
 jest.mock('./renderError.js', () => ({ renderError: jest.fn() }))
 jest.mock('../config/mergeConfig.js', () => ({ mergeConfig: jest.fn(cfg => cfg) }))
 const mockBreakpointDetector = {
@@ -183,7 +183,7 @@ describe('InteractiveMap — loadApp', () => {
     await map.loadApp()
     expect(map.on).toBe(originalOn)
     expect(typeof map.someMethod).toBe('function')
-    expect(map.eventBus.emit).toHaveBeenCalledWith('app:opened', { statePreserved: false })
+    expect(map.eventBus.emit).toHaveBeenCalledWith('app:opened', { statePreserved: false, isFullscreen: false })
   })
 })
 
@@ -436,7 +436,7 @@ describe('InteractiveMap — hideApp and showApp', () => {
     expect(map.rootEl.style.display).toBe('')
     expect(mockButtonInstance.style.display).toBe('none')
     expect(updateDOMState).toHaveBeenCalledWith(map)
-    expect(map.eventBus.emit).toHaveBeenCalledWith('app:opened', { statePreserved: true })
+    expect(map.eventBus.emit).toHaveBeenCalledWith('app:opened', { statePreserved: true, isFullscreen: false })
   })
 
   it('showApp: works without _openButton', () => {
@@ -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/InteractiveMap/behaviourController.js

@@ -1,6 +1,7 @@
 import { getQueryParam } from '../utils/queryString.js'
 import { isHybridFullscreen } from '../utils/getIsFullscreen.js'
 import { updateDOMState } from './domStateManager.js'
+import { EVENTS } from '../config/events.js'
 
 // -----------------------------------------------------------------------------
 // Public API
@@ -62,7 +63,8 @@ function setupBehavior (mapInstance) {
           mapInstance.loadApp()
         } else {
           // Map is showing - update DOM state for fullscreen/inline transition
-          updateDOMState(mapInstance)
+          const { isFullscreen } = updateDOMState(mapInstance)
+          mapInstance.eventBus.emit(EVENTS.APP_FULLSCREEN_CHANGE, { isFullscreen })
         }
       } else if (mapInstance._root) {
         mapInstance.hideApp()

package/src/InteractiveMap/behaviourController.test.js

@@ -7,7 +7,7 @@ import * as queryString from '../utils/queryString.js'
 import { updateDOMState } from './domStateManager.js'
 
 jest.mock('../utils/queryString.js')
-jest.mock('./domStateManager.js', () => ({ updateDOMState: jest.fn() }))
+jest.mock('./domStateManager.js', () => ({ updateDOMState: jest.fn().mockReturnValue({ isFullscreen: false }) }))
 
 describe('shouldLoadComponent', () => {
   beforeEach(() => {
@@ -67,7 +67,8 @@ describe('setupBehavior', () => {
       loadApp: jest.fn(),
       removeApp: jest.fn(),
       hideApp: jest.fn(),
-      showApp: jest.fn()
+      showApp: jest.fn(),
+      eventBus: { emit: jest.fn() }
     }
     // Default: viewport is wide
     window.matchMedia = jest.fn().mockImplementation(() => ({
@@ -187,14 +188,16 @@ describe('setupBehavior', () => {
       expect(mockMapInstance.showApp).not.toHaveBeenCalled()
     })
 
-    it('calls updateDOMState when map is showing and should load', () => {
+    it('calls updateDOMState and emits APP_FULLSCREEN_CHANGE when map is showing and should load', () => {
       mockMapInstance._isHidden = false
       mockMapInstance._root = {} // has root
       queryString.getQueryParam.mockReturnValue(null)
+      updateDOMState.mockReturnValue({ isFullscreen: false })
 
       handleChange()
 
       expect(updateDOMState).toHaveBeenCalledWith(mockMapInstance)
+      expect(mockMapInstance.eventBus.emit).toHaveBeenCalledWith('app:fullscreenchange', { isFullscreen: false })
       expect(mockMapInstance.loadApp).not.toHaveBeenCalled()
       expect(mockMapInstance.showApp).not.toHaveBeenCalled()
     })

package/src/InteractiveMap/domStateManager.js

@@ -70,6 +70,8 @@ function updateDOMState (mapInstance, { isFullscreen: isFullscreenOverride } = {
     ? 'auto'
     : containerHeight
   rootEl.style.height = isFullscreen ? '100%' : height
+
+  return { isFullscreen }
 }
 
 /**