@defra/interactive-map 0.0.43-fmp-experimental → 0.0.45-alpha

package/src/App/controls/keyboardMappings.js

@@ -1,3 +1,8 @@
+import { isMac } from '../../utils/isMac.js'
+
+// getInfo uses Ctrl on Windows/Linux (Alt+letter is reserved for menu mnemonics there) and Alt/Option on Mac — keep in sync with keyboardShortcuts.js's `infoKeyHtml`.
+const infoModifier = isMac() ? 'Alt' : 'Ctrl'
+
 export const keyboardMappings = {
   keydown: {
     ArrowUp: 'panUp',
@@ -17,8 +22,8 @@ export const keyboardMappings = {
     'Alt+ArrowUp': 'highlightNextLabel',
     'Alt+ArrowDown': 'highlightNextLabel',
     'Alt+Enter': 'highlightLabelAtCenter',
-    'Alt+i': 'getInfo',
-    'Alt+I': 'getInfo',
+    [`${infoModifier}+i`]: 'getInfo',
+    [`${infoModifier}+I`]: 'getInfo',
     Escape: 'clearSelection'
   }
 }

package/src/App/controls/keyboardMappings.test.js

@@ -0,0 +1,21 @@
+describe('keyboardMappings', () => {
+  beforeEach(() => jest.resetModules())
+
+  const load = () => require('./keyboardMappings.js').keyboardMappings
+
+  it('binds getInfo to Alt+i/Alt+I on Mac', () => {
+    Object.defineProperty(navigator, 'platform', { value: 'MacIntel', configurable: true })
+    const { keyup } = load()
+    expect(keyup['Alt+i']).toBe('getInfo')
+    expect(keyup['Alt+I']).toBe('getInfo')
+    expect(keyup['Ctrl+i']).toBeUndefined()
+  })
+
+  it('binds getInfo to Ctrl+i/Ctrl+I on non-Mac', () => {
+    Object.defineProperty(navigator, 'platform', { value: 'Win32', configurable: true })
+    const { keyup } = load()
+    expect(keyup['Ctrl+i']).toBe('getInfo')
+    expect(keyup['Ctrl+I']).toBe('getInfo')
+    expect(keyup['Alt+i']).toBeUndefined()
+  })
+})

package/src/App/controls/keyboardShortcuts.js

@@ -1,6 +1,9 @@
 // src/controls/keyboardShortcuts.js
-const isMac = /mac/i.test(navigator.userAgentData?.platform ?? navigator.platform)
-const altKeyHtml = isMac ? '<kbd>Option</kbd>' : '<kbd>Alt</kbd>'
+import { isMac } from '../../utils/isMac.js'
+
+const altKeyHtml = isMac() ? '<kbd>Option</kbd>' : '<kbd>Alt</kbd>'
+// getInfo uses Ctrl on Windows/Linux instead of Alt, which is reserved there for menu mnemonics.
+const infoKeyHtml = isMac() ? '<kbd>Option</kbd>' : '<kbd>Ctrl</kbd>'
 
 export const coreShortcuts = [
   {
@@ -10,6 +13,17 @@ export const coreShortcuts = [
     context: 'global',
     enabled: true
   },
+  {
+    id: 'getInfo',
+    title: 'Get current location and visible area',
+    command: `${infoKeyHtml} + <kbd>I</kbd>`,
+    enabled: true,
+    // No visual equivalent, so hide the row from sighted users but keep it discoverable via assistive tech.
+    visuallyHidden: true,
+    // Only needs getCenter/getZoom, which every map provider implements, so no adapter needs to declare it.
+    mapProviderAgnostic: true,
+    requiredConfig: ['reverseGeocodeProvider']
+  },
   {
     id: 'moveLarge',
     title: 'Move in large steps',

package/src/App/controls/keyboardShortcuts.test.js

@@ -21,4 +21,25 @@ describe('keyboardShortcuts', () => {
       expect(s.command).toContain('<kbd>Alt</kbd>')
     })
   })
+
+  it('marks getInfo as visuallyHidden, map-provider-agnostic and requiring reverseGeocodeProvider', () => {
+    const shortcuts = load()
+    const getInfo = shortcuts.find(s => s.id === 'getInfo')
+    expect(getInfo).toMatchObject({
+      visuallyHidden: true,
+      mapProviderAgnostic: true,
+      requiredConfig: ['reverseGeocodeProvider']
+    })
+  })
+
+  it('uses Ctrl for getInfo on non-Mac and Option on Mac', () => {
+    Object.defineProperty(navigator, 'platform', { value: 'MacIntel', configurable: true })
+    let getInfo = load().find(s => s.id === 'getInfo')
+    expect(getInfo.command).toContain('<kbd>Option</kbd>')
+
+    jest.resetModules()
+    Object.defineProperty(navigator, 'platform', { value: 'Win32', configurable: true })
+    getInfo = load().find(s => s.id === 'getInfo')
+    expect(getInfo.command).toContain('<kbd>Ctrl</kbd>')
+  })
 })

package/src/App/hooks/useCrossHairAPI.js

@@ -32,7 +32,19 @@ const assignCrossHairAPI = (crossHair, el, mapProvider, dispatch, updatePosition
     dispatch({ type: 'UPDATE_CROSS_HAIR', payload: { isVisible: true } })
   }
 
+  // Fully hidden — display:none, not just faded — rather than staying in the accessibility
+  // tree while invisible. An earlier version kept it ax-tree-present here so Voice Control
+  // could re-summon it by name, but that made "Show Names" put a "Target" label over
+  // nothing whenever it was genuinely hidden, which is more confusing than helpful. Voice
+  // Control's real route back is opening MapControls (a normal, always-visible, always-named
+  // button) — see isMapControlsOpen below — so the crosshair itself doesn't need to stay
+  // discoverable while it's not actually there. Blocked outright while MapControls is open:
+  // that panel is a deliberate, explicit "I can't drag/pinch this map" signal from the user,
+  // which should win over whatever mouse-vs-touch/keyboard inference would otherwise decide.
   crossHair.hide = () => {
+    if (crossHair.isMapControlsOpen) {
+      return
+    }
     el.style.display = 'none'
     dispatch({ type: 'UPDATE_CROSS_HAIR', payload: { isVisible: false } })
   }
@@ -55,7 +67,7 @@ const assignCrossHairAPI = (crossHair, el, mapProvider, dispatch, updatePosition
 
 export const useCrossHair = () => {
   const { mapProvider } = useConfig()
-  const { safeZoneInset } = useApp()
+  const { safeZoneInset, expandedButtons } = useApp()
   const { eventBus } = useService()
   const { crossHair, dispatch, mapSize } = useMap()
 
@@ -98,6 +110,22 @@ export const useCrossHair = () => {
     }
   }, [mapSize])
 
+  // A plain property on the shared crossHair object, not dispatched state — every owner
+  // (draw's per-adapter modes, interact's useCrossHairVisibility) already holds this same
+  // object, so mutating it here is all that's needed for hide()'s own guard above to see the
+  // current value live, however long ago it was last set. This alone never shows or hides
+  // anything by itself — it only ever blocks a hide() call already in flight — so it's safe to
+  // run unconditionally even when no plugin that cares about it is loaded at all.
+  //
+  // Deliberately NOT a useEffect: this component's own effects and interact's/draw's own
+  // updateCrossHair effects both react to the same expandedButtons change, and React gives no
+  // ordering guarantee between two different components' effects — if the consumer's effect
+  // (which decides to call hide()) ran before this one updated the flag, hide()'s guard would
+  // read the stale value and incorrectly block itself. Setting it directly in the render body
+  // (matches DrawInit.jsx's shouldShowCrosshairRef convention) guarantees it's current before
+  // ANY component's effects run, since React finishes rendering the whole tree first.
+  crossHair.isMapControlsOpen = expandedButtons?.has('mapControls')
+
   return {
     crossHair,
     crossHairRef

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

@@ -35,7 +35,7 @@ describe('useCrossHair', () => {
     eventBus.off = jest.fn()
 
     useConfig.mockReturnValue({ mapProvider: mockMapProvider })
-    useApp.mockReturnValue({ safeZoneInset: { left: 10, top: 20 } })
+    useApp.mockReturnValue({ safeZoneInset: { left: 10, top: 20 }, expandedButtons: new Set() })
     useService.mockReturnValue({ eventBus: mockEventBus })
     useMap.mockReturnValue({
       crossHair: mockCrossHair,
@@ -98,6 +98,22 @@ describe('useCrossHair', () => {
     expect(mockElement.style.display).toBe('none')
   })
 
+  it('hide() is a no-op while isMapControlsOpen is set', () => {
+    setup()
+    act(() => mockCrossHair.show())
+    mockCrossHair.isMapControlsOpen = true
+
+    act(() => mockCrossHair.hide())
+    expect(mockElement.style.display).toBe('block')
+    expect(mockDispatch).not.toHaveBeenCalledWith({ type: 'UPDATE_CROSS_HAIR', payload: { isVisible: false } })
+  })
+
+  it('keeps crossHair.isMapControlsOpen synced with expandedButtons, set synchronously during render (not a useEffect) so it is never stale relative to another component\'s own effect reacting to the same change', () => {
+    useApp.mockReturnValue({ safeZoneInset: { left: 10, top: 20 }, expandedButtons: new Set(['mapControls']) })
+    setup()
+    expect(mockCrossHair.isMapControlsOpen).toBe(true)
+  })
+
   it('setStyle updates state', () => {
     setup()
     act(() => mockCrossHair.setStyle('highlighted'))

package/src/App/hooks/useHintsAPI.js

@@ -32,9 +32,9 @@ export const useHintsAPI = () => {
   }, [eventBus, hints])
 
   // Escape dismisses the active hint when the keypress originates inside this
-  // map instance. The viewport and features listbox already dismiss hints on
+  // map instance. The viewport and spatial listbox already dismiss hints on
   // Escape within their own narrower focus scope (useKeyboardHint.js /
-  // useFeatureFocus.js) — this covers hints shown via the public showHint()
+  // useSpatialListFocus.js) — this covers hints shown via the public showHint()
   // API from anywhere else in the same map's UI (e.g. a plugin button).
   //
   // Listening on document (rather than the map's own container) and checking
@@ -51,12 +51,12 @@ export const useHintsAPI = () => {
   }, [hints])
 
   useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key !== 'Escape' || !isHintActiveRef.current) {
+    const handleKeyDown = (event) => {
+      if (event.key !== 'Escape' || !isHintActiveRef.current) {
         return
       }
       const container = layoutRefs.appContainerRef?.current
-      if (container && !container.contains(e.target)) {
+      if (container && !container.contains(event.target)) {
         return
       }
       hints.dismiss()

package/src/App/hooks/useInterfaceAPI.js

@@ -58,7 +58,8 @@ export const useInterfaceAPI = () => {
     const handleAppClosed = () => dispatchRef.current({ type: 'TOGGLE_APP_VISIBLE', payload: false })
     const handleAddPanel = ({ id, config }) => dispatchRef.current({ type: 'ADD_PANEL', payload: { id, config } })
     const handleRemovePanel = (id) => dispatchRef.current({ type: 'REMOVE_PANEL', payload: id })
-    const handleShowPanel = ({ id, focus = true }) => dispatchRef.current({ type: 'OPEN_PANEL', payload: { panelId: id, focusOnOpen: focus } })
+    const handleShowPanel = ({ id, focus = true, triggeringElement }) =>
+      dispatchRef.current({ type: 'OPEN_PANEL', payload: { panelId: id, focusOnOpen: focus, props: triggeringElement ? { triggeringElement } : undefined } })
     const handleHidePanel = (id) => dispatchRef.current({ type: 'CLOSE_PANEL', payload: id })
     const handleAddControl = ({ id, config }) => dispatchRef.current({ type: 'ADD_CONTROL', payload: { id, config } })
 

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

@@ -92,6 +92,15 @@ describe('useInterfaceAPI', () => {
     expect(mockDispatch).toHaveBeenCalledWith({ type: 'OPEN_PANEL', payload: { panelId: 'panel1', focusOnOpen: false } })
   })
 
+  it('dispatches OPEN_PANEL with props.triggeringElement when one is given, so Panel can return focus to it on close', () => {
+    const triggeringElement = document.createElement('button')
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:showpanel', { id: 'panel1', triggeringElement }))
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: 'OPEN_PANEL', payload: { panelId: 'panel1', focusOnOpen: true, props: { triggeringElement } }
+    })
+  })
+
   it('dispatches CLOSE_PANEL on app:hidepanel', () => {
     renderHook(() => useInterfaceAPI())
     act(() => mockEventBus.emit('app:hidepanel', 'panel1'))

package/src/App/hooks/useKeyboardShortcuts.js

@@ -5,6 +5,71 @@ import { useConfig } from '../store/configContext.js'
 import { useApp } from '../store/appContext.js'
 import { useService } from '../store/serviceContext.js'
 
+const normalizeKey = (e) => {
+  let key
+
+  // Use e.code for letters to avoid 'dead' keys with Alt/AltGr
+  if (/^Key[A-Z]$/.test(e.code)) {
+    key = e.code.slice(3) // NOSONAR: strip "Key" prefix, e.g. "KeyI" -> "I"
+  } else {
+    key = e.key // works for arrows, numpad, punctuation
+  }
+
+  // Normalize numpad add/subtract to symbols
+  if (key === 'Add' || key === 'NumpadAdd') {
+    key = '+'
+  } else if (key === 'Subtract' || key === 'NumpadSubtract') {
+    key = '-'
+  } else {
+    // No action
+  }
+
+  // Check altKey first: AltGr (used on many non-US keyboards) reports both altKey
+  // and ctrlKey as true, and should still resolve to the Alt+ binding, not Ctrl+.
+  if (e.altKey) {
+    return `Alt+${key}`
+  }
+  if (e.ctrlKey) {
+    return `Ctrl+${key}`
+  }
+  return key
+}
+
+const resolveAction = (actions, type, key) => {
+  const actionName = keyboardMappings[type][key]
+  return actionName && actions[actionName] ? actionName : null
+}
+
+// keydown (pan/zoom) stays on the viewport so arrows only fire when the map has focus.
+// keyup (Alt+K and other global shortcuts) attaches to the app container so it fires
+// from anywhere within the app, including the features listbox.
+const createKeyEventHandlers = (actions) => {
+  const handleKeyDown = (e) => {
+    const key = normalizeKey(e)
+    const actionName = resolveAction(actions, 'keydown', key)
+    if (actionName) {
+      actions[actionName](e)
+      e.preventDefault()
+      return
+    }
+    // A keyup-bound shortcut (e.g. Alt+Arrow label navigation) still acts on release,
+    // but its browser default (e.g. arrow-key scroll) must be suppressed now or it's too late.
+    if (resolveAction(actions, 'keyup', key)) {
+      e.preventDefault()
+    }
+  }
+
+  const handleKeyUp = (e) => {
+    const actionName = resolveAction(actions, 'keyup', normalizeKey(e))
+    if (actionName) {
+      actions[actionName](e)
+      e.preventDefault()
+    }
+  }
+
+  return { handleKeyDown, handleKeyUp }
+}
+
 export function useKeyboardShortcuts (containerRef) {
   const { mapProvider, panDelta, nudgePanDelta, zoomDelta, nudgeZoomDelta, readMapText } = useConfig()
   const { dispatch, layoutRefs } = useApp()
@@ -27,42 +92,8 @@ export function useKeyboardShortcuts (containerRef) {
       readMapText
     })
 
-    const normalizeKey = (e) => {
-      let key
-
-      // Use e.code for letters to avoid 'dead' keys with Alt/AltGr
-      if (/^Key[A-Z]$/.test(e.code)) {
-        key = e.code.slice(3) // NOSONAR: strip "Key" prefix, e.g. "KeyI" -> "I"
-      } else {
-        key = e.key // works for arrows, numpad, punctuation
-      }
-
-      // Normalize numpad add/subtract to symbols
-      if (key === 'Add' || key === 'NumpadAdd') {
-        key = '+'
-      } else if (key === 'Subtract' || key === 'NumpadSubtract') {
-        key = '-'
-      } else {
-        // No action
-      }
-
-      return e.altKey ? `Alt+${key}` : key
-    }
-
-    const handle = (type) => (e) => {
-      const actionName = keyboardMappings[type][normalizeKey(e)]
-      if (actionName && actions[actionName]) {
-        actions[actionName](e)
-        e.preventDefault()
-      }
-    }
-
-    const handleKeyDown = handle('keydown')
-    const handleKeyUp = handle('keyup')
+    const { handleKeyDown, handleKeyUp } = createKeyEventHandlers(actions)
 
-    // keydown (pan/zoom) stays on the viewport so arrows only fire when the map has focus.
-    // keyup (Alt+K and other global shortcuts) attaches to the app container so it fires
-    // from anywhere within the app, including the features listbox.
     el.addEventListener('keydown', handleKeyDown)
     appEl.addEventListener('keyup', handleKeyUp)
 

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

@@ -138,6 +138,58 @@ describe('useKeyboardShortcuts', () => {
     expect(actions.stopPan).toHaveBeenCalled()
   })
 
+  test('does nothing on keyup when the key has no mapped action', () => {
+    const { appContainerRef, actions } = setup({ keyup: { ArrowUp: 'stopPan' }, actions: { stopPan: jest.fn() } })
+    renderHook(() => useKeyboardShortcuts({ current: document.createElement('div') }))
+
+    const evt = new KeyboardEvent('keyup', { key: 'Z' })
+    const spy = jest.spyOn(evt, 'preventDefault')
+    appContainerRef.current.dispatchEvent(evt)
+
+    expect(spy).not.toHaveBeenCalled()
+    expect(actions.stopPan).not.toHaveBeenCalled()
+  })
+
+  test('suppresses the browser default on keydown for a keyup-bound shortcut, without firing the action early', () => {
+    const { containerRef, appContainerRef, actions } = setup({
+      keyup: { 'Alt+ArrowUp': 'highlightNextLabel' },
+      actions: { highlightNextLabel: jest.fn() }
+    })
+    renderHook(() => useKeyboardShortcuts(containerRef))
+
+    const keydownEvt = new KeyboardEvent('keydown', { key: 'ArrowUp', altKey: true })
+    const keydownSpy = jest.spyOn(keydownEvt, 'preventDefault')
+    containerRef.current.dispatchEvent(keydownEvt)
+    expect(keydownSpy).toHaveBeenCalled()
+    expect(actions.highlightNextLabel).not.toHaveBeenCalled()
+
+    appContainerRef.current.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp', altKey: true }))
+    expect(actions.highlightNextLabel).toHaveBeenCalled()
+  })
+
+  test('normalizes Ctrl+key combinations', () => {
+    const { containerRef, actions } = setup({
+      keydown: { 'Ctrl+I': 'getInfo' },
+      actions: { getInfo: jest.fn() }
+    })
+    renderHook(() => useKeyboardShortcuts(containerRef))
+
+    containerRef.current.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyI', key: 'i', ctrlKey: true }))
+    expect(actions.getInfo).toHaveBeenCalled()
+  })
+
+  test('treats AltGr (altKey + ctrlKey both true) as Alt+, not Ctrl+', () => {
+    const { containerRef, actions } = setup({
+      keydown: { 'Alt+I': 'getInfo', 'Ctrl+I': 'zoomIn' },
+      actions: { getInfo: jest.fn(), zoomIn: jest.fn() }
+    })
+    renderHook(() => useKeyboardShortcuts(containerRef))
+
+    containerRef.current.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyI', key: 'i', altKey: true, ctrlKey: true }))
+    expect(actions.getInfo).toHaveBeenCalled()
+    expect(actions.zoomIn).not.toHaveBeenCalled()
+  })
+
   test('prevents default when action exists, does nothing otherwise', () => {
     const { containerRef } = setup({ keydown: { I: 'zoomIn', X: 'nonExistent' } })
     renderHook(() => useKeyboardShortcuts(containerRef))

package/src/App/hooks/useModalPanelBehaviour.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 import { useResizeObserver } from './useResizeObserver.js'
 import { constrainKeyboardFocus } from '../../utils/constrainKeyboardFocus.js'
 import { toggleInertElements } from '../../utils/toggleInertElements.js'
@@ -62,6 +62,44 @@ const setSlotCSSVar = (slot, layoutRefs, primaryMargin) => {
   root.style.setProperty(MODAL_MAX_HEIGHT, `${mainRect.height - relTop - primaryMargin}px`)
 }
 
+// Computes and applies --modal-inset/--modal-max-height for the panel's current slot. Shared by
+// the resize observer (keeps position correct across later layout changes while open) and the
+// open-triggered layout effect below (panels stay permanently mounted — see mapPanels.js — so
+// opening one doesn't itself resize mainRef and wouldn't otherwise trigger a recalc).
+const recalcModalPosition = ({ isModal, mainRef, panelRef, buttonContainerEl, layoutRefs }) => {
+  if (!isModal || !mainRef.current) {
+    return
+  }
+
+  const root = document.documentElement
+  const styles = getComputedStyle(root)
+  const dividerGap = Number.parseInt(styles.getPropertyValue('--divider-gap'), 10)
+  const primaryMargin = Number.parseInt(styles.getPropertyValue('--primary-gap'), 10)
+  const slot = panelRef.current.dataset.slot
+
+  // Button-adjacent panels: position next to the controlling button.
+  // Use slot name (not buttonContainerEl) as the gate — buttonContainerEl may be undefined
+  // when there is no triggeringElement (e.g. panel opened programmatically).
+  // Dynamically query via aria-controls to handle stale triggeringElement after breakpoint changes.
+  if (slot?.endsWith('-button')) {
+    const panelElId = panelRef.current?.id
+    const currentButtonEl = panelElId ? document.querySelector(`[aria-controls="${panelElId}"]`) : null
+    const effectiveContainer = currentButtonEl?.parentElement ??
+      (buttonContainerEl?.isConnected ? buttonContainerEl : null) ??
+      document.querySelector(`[data-button-slot="${slot}"]`)
+
+    if (!effectiveContainer) {
+      return
+    }
+
+    setButtonCSSVar(effectiveContainer, mainRef, dividerGap)
+    return
+  }
+
+  // Slot-based panels: derive position from the slot container element
+  setSlotCSSVar(slot, layoutRefs, primaryMargin)
+}
+
 const useModalKeyHandler = (panelRef, isModal, handleClose) => {
   useEffect(() => {
     if (!isModal) {
@@ -131,40 +169,16 @@ export function useModalPanelBehaviour ({
 
   useModalKeyHandler(panelRef, isModal, handleClose)
 
-  // === Set --modal-inset and --modal-max-height, recalculate on mainRef resize === //
-  useResizeObserver([mainRef], () => {
-    if (!isModal || !mainRef.current) {
-      return
-    }
-
-    const root = document.documentElement
-    const styles = getComputedStyle(root)
-    const dividerGap = Number.parseInt(styles.getPropertyValue('--divider-gap'), 10)
-    const primaryMargin = Number.parseInt(styles.getPropertyValue('--primary-gap'), 10)
-    const slot = panelRef.current.dataset.slot
-
-    // Button-adjacent panels: position next to the controlling button.
-    // Use slot name (not buttonContainerEl) as the gate — buttonContainerEl may be undefined
-    // when there is no triggeringElement (e.g. panel opened programmatically).
-    // Dynamically query via aria-controls to handle stale triggeringElement after breakpoint changes.
-    if (slot?.endsWith('-button')) {
-      const panelElId = panelRef.current?.id
-      const currentButtonEl = panelElId ? document.querySelector(`[aria-controls="${panelElId}"]`) : null
-      const effectiveContainer = currentButtonEl?.parentElement ??
-        (buttonContainerEl?.isConnected ? buttonContainerEl : null) ??
-        document.querySelector(`[data-button-slot="${slot}"]`)
-
-      if (!effectiveContainer) {
-        return
-      }
-
-      setButtonCSSVar(effectiveContainer, mainRef, dividerGap)
-      return
-    }
+  // === Recalculate on mainRef resize (keeps position correct while already open) === //
+  useResizeObserver([mainRef], () => recalcModalPosition({ isModal, mainRef, panelRef, buttonContainerEl, layoutRefs }))
 
-    // Slot-based panels: derive position from the slot container element
-    setSlotCSSVar(slot, layoutRefs, primaryMargin)
-  })
+  // === Recalculate the moment the panel opens === //
+  // The resize observer above won't fire on its own here: its size cache persists across
+  // opens/closes (the panel no longer mounts fresh each time), and opening a panel doesn't
+  // itself resize mainRef. This is what actually positions the panel at open time.
+  useLayoutEffect(() => {
+    recalcModalPosition({ isModal, mainRef, panelRef, buttonContainerEl, layoutRefs })
+  }, [isModal, mainRef, panelRef, buttonContainerEl, layoutRefs])
 
   // === Click on modal backdrop to close === //
   useEffect(() => {

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

@@ -218,6 +218,65 @@ describe('useModalPanelBehaviour', () => {
     })
   })
 
+  // Regression: panels are mounted permanently and only toggle `hidden` (see mapPanels.js), so
+  // opening one doesn't itself resize mainRef. This uses the *real* useResizeObserver (backed by
+  // a fake ResizeObserver, not the blanket `(_, cb) => cb()` mock used above) so its size-change
+  // dedupe is actually exercised — that dedupe is what silently swallowed the reposition on open.
+  describe('repositioning on open when mainRef never resizes', () => {
+    const buttonSlot = 'map-styles-button'
+
+    beforeEach(() => {
+      const { useResizeObserver: actualUseResizeObserver } = jest.requireActual('./useResizeObserver.js')
+      useResizeObserverModule.useResizeObserver.mockImplementation(actualUseResizeObserver)
+
+      // Real ResizeObserver always delivers once per observe() call — mirror that, and let the
+      // real hook's own prevSizes dedupe decide whether the wrapped callback actually runs.
+      global.ResizeObserver = jest.fn(function (cb) {
+        this.observe = (target) => {
+          const entries = [{ target, contentRect: { width: 100, height: 50 } }]
+          cb(entries)
+        }
+        this.disconnect = jest.fn()
+      })
+      jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => { cb(); return 0 })
+      jest.spyOn(global, 'cancelAnimationFrame').mockImplementation(() => {})
+      jest.spyOn(globalThis, 'getComputedStyle').mockReturnValue({ getPropertyValue: () => '8' })
+
+      Object.defineProperty(refs.main.current, 'getBoundingClientRect', {
+        value: () => ({ top: 0, right: 100, bottom: 50, left: 0, width: 100, height: 50 }),
+        configurable: true
+      })
+      Object.defineProperty(elements.buttonContainer, 'getBoundingClientRect', {
+        value: () => ({ top: 10, right: 80, bottom: 40, left: 20, width: 60, height: 30 }),
+        configurable: true
+      })
+
+      refs.panel.current.dataset.slot = buttonSlot
+      const button = document.createElement('button')
+      button.setAttribute(ARIA_CONTROLS, PANEL_ID)
+      elements.buttonContainer.appendChild(button)
+      document.body.appendChild(elements.buttonContainer)
+    })
+
+    afterEach(() => {
+      jest.restoreAllMocks()
+    })
+
+    it('positions the panel the moment it opens, not just when mainRef resizes', () => {
+      // Mounted closed, as it would be permanently — mainRef's size gets recorded but the
+      // calc no-ops on the isModal guard.
+      const { rerender } = render(<TestComponent isModal={false} />)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('')
+
+      // Open it. mainRef hasn't resized, so the resize observer's own delivery is deduped
+      // away — only the open-triggered layout effect can position it here.
+      rerender(<TestComponent isModal />)
+
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT)).toContain('px')
+    })
+  })
+
   describe('focus management', () => {
     it('redirects focus into panel when focus enters app but outside panel', () => {
       refs.panel.current.focus = jest.fn()