@defra/interactive-map 0.0.11-alpha → 0.0.14-alpha

package/providers/maplibre/src/maplibreProvider.test.js

@@ -4,7 +4,7 @@ import { attachAppEvents } from './appEvents.js'
 import { createMapLabelNavigator } from './utils/labels.js'
 import { updateHighlightedFeatures } from './utils/highlightFeatures.js'
 import { queryFeatures } from './utils/queryFeatures.js'
-import { getAreaDimensions, getCardinalMove, getResolution, getPaddedBounds } from './utils/spatial.js'
+import { getAreaDimensions, getCardinalMove, getResolution, getPaddedBounds, isGeometryObscured } from './utils/spatial.js'
 
 jest.mock('./defaults.js', () => ({
   DEFAULTS: { animationDuration: 400, coordinatePrecision: 7 },
@@ -20,6 +20,7 @@ jest.mock('./utils/spatial.js', () => ({
   getAreaDimensions: jest.fn(() => '400m by 750m'),
   getCardinalMove: jest.fn(() => 'north'),
   getBboxFromGeoJSON: jest.fn(() => [-1, 50, 1, 52]),
+  isGeometryObscured: jest.fn(() => true),
   getResolution: jest.fn(() => 10),
   getPaddedBounds: jest.fn(() => [[0, 0], [1, 1]])
 }))
@@ -170,6 +171,18 @@ describe('MapLibreProvider', () => {
     expect(map.fitBounds).toHaveBeenCalledWith([-1, 50, 1, 52], { duration: 400 })
   })
 
+  test('isGeometryObscured delegates to spatial utility with map instance', async () => {
+    const p = makeProvider()
+    await doInitMap(p)
+    const geojson = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 52] }, properties: {} }
+    const panelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+
+    const result = p.isGeometryObscured(geojson, panelRect)
+
+    expect(isGeometryObscured).toHaveBeenCalledWith(geojson, panelRect, map)
+    expect(result).toBe(true)
+  })
+
   test('getCenter, getZoom, getBounds return formatted values', async () => {
     const p = makeProvider()
     await doInitMap(p)

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

@@ -196,10 +196,50 @@ const getPaddedBounds = (LngLatBounds, map) => {
  */
 const getBboxFromGeoJSON = (geojson) => turfBbox(geojson)
 
+/**
+ * Returns true if the geometry's screen bounding box overlaps the given panel rectangle.
+ * Used to decide whether to pan/zoom when a panel opens over a visibleGeometry target.
+ *
+ * @param {object} geojson - GeoJSON Feature, FeatureCollection, or geometry
+ * @param {DOMRect} panelRect - Bounding rect of the panel element (viewport coordinates)
+ * @param {object} map - MapLibre map instance
+ * @returns {boolean}
+ */
+const isGeometryObscured = (geojson, panelRect, map) => {
+  const containerRect = map.getContainer().getBoundingClientRect()
+  const [west, south, east, north] = getBboxFromGeoJSON(geojson)
+
+  const corners = [
+    map.project([west, south]),
+    map.project([west, north]),
+    map.project([east, south]),
+    map.project([east, north])
+  ]
+
+  const screenMinX = Math.min(...corners.map(c => c.x))
+  const screenMaxX = Math.max(...corners.map(c => c.x))
+  const screenMinY = Math.min(...corners.map(c => c.y))
+  const screenMaxY = Math.max(...corners.map(c => c.y))
+
+  // Convert panelRect from viewport coords to map-container-relative coords
+  const panelLeft = panelRect.left - containerRect.left
+  const panelTop = panelRect.top - containerRect.top
+  const panelRight = panelRect.right - containerRect.left
+  const panelBottom = panelRect.bottom - containerRect.top
+
+  return (
+    screenMinX < panelRight &&
+    screenMaxX > panelLeft &&
+    screenMinY < panelBottom &&
+    screenMaxY > panelTop
+  )
+}
+
 export {
   getAreaDimensions,
   getCardinalMove,
   getBboxFromGeoJSON,
+  isGeometryObscured,
   spatialNavigate,
   getResolution,
   getPaddedBounds,

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

@@ -105,4 +105,39 @@ describe('spatial utils', () => {
     expect(turfBbox).toHaveBeenCalledWith(feature)
     expect(result).toEqual([-1, 50, 1, 52])
   })
+
+  describe('isGeometryObscured', () => {
+    const geojson = { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 51] }, properties: {} }
+    // getBboxFromGeoJSON is mocked to always return [-1, 50, 1, 52]
+
+    // Container sits at viewport origin so container-relative coords equal viewport coords
+    const makeMap = (projectFn) => ({
+      getContainer: jest.fn(() => ({
+        getBoundingClientRect: jest.fn(() => ({ left: 0, top: 0, right: 1000, bottom: 800 }))
+      })),
+      project: jest.fn(projectFn)
+    })
+
+    // Panel occupies the right 400px of the viewport
+    const panelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+
+    test('returns true when geometry screen bbox overlaps the panel rect', () => {
+      // Corners project into the panel (x: 650 is between panelLeft 600 and panelRight 1000)
+      const map = makeMap(() => ({ x: 650, y: 400 }))
+      expect(spatial.isGeometryObscured(geojson, panelRect, map)).toBe(true)
+    })
+
+    test('returns false when geometry screen bbox does not overlap the panel rect', () => {
+      // Corners project to x: 300, entirely left of panelLeft (600)
+      const map = makeMap(() => ({ x: 300, y: 400 }))
+      expect(spatial.isGeometryObscured(geojson, panelRect, map)).toBe(false)
+    })
+
+    test('projects all four bbox corners', () => {
+      const map = makeMap(() => ({ x: 300, y: 400 }))
+      spatial.isGeometryObscured(geojson, panelRect, map)
+      // bbox is [-1, 50, 1, 52]: corners are [-1,50], [-1,52], [1,50], [1,52]
+      expect(map.project).toHaveBeenCalledTimes(4)
+    })
+  })
 })

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

@@ -244,6 +244,7 @@ export const MapButton = ({
   return (
     <div
       className={buildWrapperClassNames(buttonId, showLabel)}
+      data-button-slot={panelId ? `${stringToKebab(buttonId)}-button` : undefined}
       style={isHidden ? { display: 'none' } : undefined}
     >
       {showLabel ? buttonEl : <Tooltip content={label}>{buttonEl}</Tooltip>}

package/src/App/components/Panel/Panel.jsx

@@ -10,17 +10,17 @@ const computePanelState = (bpConfig, triggeringElement) => {
   const isAside = bpConfig.slot === 'side' && bpConfig.open && !bpConfig.modal
   const isDialog = !isAside && bpConfig.dismissible
   const isModal = bpConfig.modal === true
-  const isDismissable = bpConfig.dismissible !== false
+  const isDismissible = bpConfig.dismissible !== false
   const shouldFocus = Boolean(isModal || triggeringElement)
   const buttonContainerEl = bpConfig.slot.endsWith('button') ? triggeringElement?.parentNode : undefined
-  return { isAside, isDialog, isModal, isDismissable, shouldFocus, buttonContainerEl }
+  return { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl }
 }
 
-const getPanelRole = (isDialog, isDismissable) => {
+const getPanelRole = (isDialog, isDismissible) => {
   if (isDialog) {
     return 'dialog'
   }
-  if (isDismissable) {
+  if (isDismissible) {
     return 'complementary'
   }
   return 'region'
@@ -32,19 +32,20 @@ const buildPanelClassNames = (slot, showLabel) => [
   !showLabel && 'im-c-panel--no-heading'
 ].filter(Boolean).join(' ')
 
-const buildPanelBodyClassNames = (showLabel, isDismissable) => [
+const buildPanelBodyClassNames = (showLabel, isDismissible) => [
   'im-c-panel__body',
-  !showLabel && isDismissable && 'im-c-panel__body--offset'
+  !showLabel && isDismissible && 'im-c-panel__body--offset'
 ].filter(Boolean).join(' ')
 
-const buildPanelProps = ({ elementId, shouldFocus, isDialog, isDismissable, isModal, width, panelClass }) => ({
+const buildPanelProps = ({ elementId, shouldFocus, isDialog, isDismissible, isModal, width, panelClass, slot }) => ({
   id: elementId,
   'aria-labelledby': `${elementId}-label`,
   tabIndex: shouldFocus ? -1 : undefined, // nosonar
-  role: getPanelRole(isDialog, isDismissable),
+  role: getPanelRole(isDialog, isDismissible),
   'aria-modal': isDialog && isModal ? 'true' : undefined,
   style: width ? { width } : undefined,
-  className: panelClass
+  className: panelClass,
+  'data-slot': slot
 })
 
 const buildBodyProps = ({ bodyRef, panelBodyClass, isBodyScrollable, elementId }) => ({
@@ -65,7 +66,7 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
   const bpConfig = panelConfig[breakpoint]
   const elementId = `${id}-panel-${stringToKebab(panelId)}`
 
-  const { isAside, isDialog, isModal, isDismissable, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement)
+  const { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement)
 
   // For persistent panels, gate modal behaviour on open state
   const isModalActive = isModal && isOpen
@@ -97,10 +98,10 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
   }, [isOpen])
 
   const panelClass = buildPanelClassNames(bpConfig.slot, bpConfig.showLabel ?? true)
-  const panelBodyClass = buildPanelBodyClassNames(bpConfig.showLabel ?? true, isDismissable)
+  const panelBodyClass = buildPanelBodyClassNames(bpConfig.showLabel ?? true, isDismissible)
   const innerHtmlProp = useMemo(() => html ? { __html: html } : null, [html])
 
-  const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissable, isModal, width: bpConfig.width, panelClass })
+  const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissible, isModal, width: bpConfig.width, panelClass, slot: bpConfig.slot })
   const bodyProps = buildBodyProps({ bodyRef, panelBodyClass, isBodyScrollable, elementId })
 
   return (
@@ -115,7 +116,7 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
         {label}
       </h2>
 
-      {isDismissable && (
+      {isDismissible && (
         <button
           aria-label={`Close ${label}`}
           className='im-c-panel__close'

package/src/App/components/Viewport/MapController.jsx

@@ -6,6 +6,7 @@ import { useMapStateSync } from '../../hooks/useMapStateSync'
 import { useMapURLSync } from '../../hooks/useMapURLSync'
 import { useMapAnnouncements } from '../../hooks/useMapAnnouncements'
 import { useMapProviderOverrides } from '../../hooks/useMapProviderOverrides'
+import { useVisibleGeometry } from '../../hooks/useVisibleGeometry'
 import { getInitialMapState } from '../../../utils/mapStateSync'
 import { scaleFactor } from '../../../config/appConfig'
 import { scalePoints } from '../../../utils/scalePoints.js'
@@ -58,6 +59,9 @@ export const MapController = ({ mapContainerRef }) => {
   // Override mapProvider functions
   useMapProviderOverrides()
 
+  // Pan/zoom to keep visibleGeometry visible when panels open
+  useVisibleGeometry()
+
   // Update padding when breakpoint or mapSize change
   useEffect(() => {
     if (!isMapReady || !syncMapPadding) {

package/src/App/hooks/useLayoutMeasurements.js

@@ -4,6 +4,17 @@ import { useApp } from '../store/appContext.js'
 import { useMap } from '../store/mapContext.js'
 import { getSafeZoneInset } from '../../utils/getSafeZoneInset.js'
 
+const buttonHeight = (ref) => ref?.current?.offsetHeight ?? 0
+
+const topColWidth = (left, right) =>
+  left || right ? Math.max(left, right) : 0
+
+const subSlotMaxHeight = (columnHeight, siblingButtons, gap) =>
+  columnHeight - (siblingButtons ? siblingButtons + gap : 0)
+
+const calcOffsetLeft = (bottomOffsetTop, gap, insetBottom, inset) =>
+  bottomOffsetTop - gap > insetBottom ? 0 : inset.offsetLeft + inset.offsetWidth
+
 export function useLayoutMeasurements () {
   const { dispatch, breakpoint, layoutRefs } = useApp()
   const { mapSize, isMapReady } = useMap()
@@ -17,7 +28,11 @@ export function useLayoutMeasurements () {
     topRightColRef,
     insetRef,
     footerRef,
-    actionsRef
+    actionsRef,
+    leftTopRef,
+    leftBottomRef,
+    rightTopRef,
+    rightBottomRef
   } = layoutRefs
 
   // -----------------------------
@@ -33,36 +48,38 @@ export function useLayoutMeasurements () {
     const bottom = footerRef.current
     const actions = actionsRef.current
 
-    if (!main || !top || !inset || !bottom) {
+    if ([main, top, inset, bottom].some(r => !r)) {
       return
     }
 
     const root = document.documentElement
     const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
 
-    // === Inset offsets ===
-    const insetOffsetTop = topLeftCol.offsetHeight + top.offsetTop
-    const insetMaxHeight = main.offsetHeight - insetOffsetTop - top.offsetTop
-    appContainer.style.setProperty('--inset-offset-top', `${insetOffsetTop}px`)
-    appContainer.style.setProperty('--inset-max-height', `${insetMaxHeight}px`)
+    // === Top column width ===
+    appContainer.style.setProperty('--top-col-width', `${topColWidth(topLeftCol.offsetWidth, topRightCol.offsetWidth)}px`)
 
-    // === Bottom left offset ===
-    const insetBottom = inset.offsetHeight + insetOffsetTop
-    const bottomOffsetTop = Math.min(bottom.offsetTop, actions.offsetTop)
-    const bottomOffsetLeft = bottomOffsetTop - dividerGap > insetBottom ? 0 : inset.offsetLeft + inset.offsetWidth
-    appContainer.style.setProperty('--offset-left', `${bottomOffsetLeft}px`)
+    // === Left container offsets ===
+    const leftOffsetTop = topLeftCol.offsetHeight + top.offsetTop
+    const leftColumnHeight = bottom.offsetTop - leftOffsetTop - dividerGap
+    appContainer.style.setProperty('--left-offset-top', `${leftOffsetTop}px`)
+    appContainer.style.setProperty('--left-offset-bottom', `${main.offsetHeight - bottom.offsetTop + dividerGap}px`)
+    appContainer.style.setProperty('--left-top-max-height', `${leftColumnHeight}px`)
 
     // === Right container offsets ===
     const rightOffsetTop = topRightCol.offsetHeight + top.offsetTop
-    const rightOffsetBottom = main.offsetHeight - bottom.offsetTop + dividerGap
+    const rightColumnHeight = bottom.offsetTop - rightOffsetTop - dividerGap
     appContainer.style.setProperty('--right-offset-top', `${rightOffsetTop}px`)
-    appContainer.style.setProperty('--right-offset-bottom', `${rightOffsetBottom}px`)
+    appContainer.style.setProperty('--right-offset-bottom', `${main.offsetHeight - bottom.offsetTop + dividerGap}px`)
+    appContainer.style.setProperty('--right-top-max-height', `${rightColumnHeight}px`)
 
-    // === Top column width ===
-    const leftWidth = topLeftCol.offsetWidth || 0
-    const rightWidth = topRightCol.offsetWidth || 0
-    const finalWidth = leftWidth || rightWidth ? Math.max(leftWidth, rightWidth) : 0
-    appContainer.style.setProperty('--top-col-width', `${finalWidth}px`)
+    // === Sub-slot panel max-heights ===
+    appContainer.style.setProperty('--left-top-panel-max-height', `${subSlotMaxHeight(leftColumnHeight, buttonHeight(leftBottomRef), dividerGap)}px`)
+    appContainer.style.setProperty('--left-bottom-panel-max-height', `${subSlotMaxHeight(leftColumnHeight, buttonHeight(leftTopRef), dividerGap)}px`)
+    appContainer.style.setProperty('--right-top-panel-max-height', `${subSlotMaxHeight(rightColumnHeight, buttonHeight(rightBottomRef), dividerGap)}px`)
+    appContainer.style.setProperty('--right-bottom-panel-max-height', `${subSlotMaxHeight(rightColumnHeight, buttonHeight(rightTopRef), dividerGap)}px`)
+
+    // === Bottom left offset ===
+    appContainer.style.setProperty('--offset-left', `${calcOffsetLeft(Math.min(bottom.offsetTop, actions.offsetTop), dividerGap, inset.offsetHeight + leftOffsetTop, inset)}px`)
   }
 
   // --------------------------------
@@ -81,7 +98,7 @@ export function useLayoutMeasurements () {
   // --------------------------------
   // 3. Recaluclate CSS vars when elements resize
   // --------------------------------
-  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, footerRef], () => {
+  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, footerRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef], () => {
     requestAnimationFrame(() => {
       calculateLayout()
     })

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

@@ -26,7 +26,11 @@ const refs = (o = {}) => ({
   topRightColRef: { current: el({ offsetHeight: 40, offsetWidth: 180, ...o.topRightCol }) },
   insetRef: { current: o.inset === null ? null : el({ offsetHeight: 100, offsetLeft: 20, offsetWidth: 300, ...o.inset }) },
   footerRef: { current: o.footer === null ? null : el({ offsetTop: 400, ...o.footer }) },
-  actionsRef: { current: el({ offsetTop: 450, ...o.actions }) }
+  actionsRef: { current: el({ offsetTop: 450, ...o.actions }) },
+  leftTopRef: { current: el({ offsetHeight: 0, ...o.leftTop }) },
+  leftBottomRef: { current: el({ offsetHeight: 0, ...o.leftBottom }) },
+  rightTopRef: { current: el({ offsetHeight: 0, ...o.rightTop }) },
+  rightBottomRef: { current: el({ offsetHeight: 0, ...o.rightBottom }) }
 })
 
 const setup = (o = {}) => {
@@ -62,17 +66,18 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     const spy = layoutRefs.appContainerRef.current.style.setProperty
-    ;['--inset-offset-top', '--inset-max-height', '--offset-left', '--right-offset-top', '--right-offset-bottom', '--top-col-width']
+    ;['--offset-left', '--right-offset-top', '--right-offset-bottom', '--top-col-width']
       .forEach(prop => expect(spy).toHaveBeenCalledWith(prop, expect.any(String)))
   })
 
   test.each([
-    ['inset-offset-top', { main: { offsetHeight: 500 }, top: { offsetTop: 20 }, topLeftCol: { offsetHeight: 50 } }, '70px'],
-    ['inset-max-height', { main: { offsetHeight: 500 }, top: { offsetTop: 20 }, topLeftCol: { offsetHeight: 50 } }, '410px'],
     ['offset-left with overlap', { inset: { offsetHeight: 200, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 100 }, actions: { offsetTop: 120 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '180px'],
     ['offset-left without overlap', { inset: { offsetHeight: 50, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 200 }, actions: { offsetTop: 220 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '0px'],
     ['right-offset-top', { topRightCol: { offsetHeight: 80 }, top: { offsetTop: 15 } }, '95px'],
-    ['right-offset-bottom', { main: { offsetHeight: 600 }, footer: { offsetTop: 500 } }, '108px']
+    ['right-offset-bottom', { main: { offsetHeight: 600 }, footer: { offsetTop: 500 } }, '108px'],
+    // leftColumnHeight = 400 - (50+10) - 8 = 332; rightColumnHeight = 400 - (40+10) - 8 = 342
+    ['left-top-max-height', {}, '332px'],
+    ['right-top-max-height', {}, '342px']
   ])('calculates %s correctly', (name, refOverrides, expected) => {
     const { layoutRefs } = setup({ refs: refOverrides })
     renderHook(() => useLayoutMeasurements())
@@ -80,6 +85,21 @@ describe('useLayoutMeasurements', () => {
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith(varName, expected)
   })
 
+  test.each([
+    ['--left-top-panel-max-height', {}, '332px'],
+    ['--left-top-panel-max-height', { leftBottom: { offsetHeight: 50 } }, '274px'], // 332 - 50 - 8
+    ['--left-bottom-panel-max-height', {}, '332px'],
+    ['--left-bottom-panel-max-height', { leftTop: { offsetHeight: 40 } }, '284px'], // 332 - 40 - 8
+    ['--right-top-panel-max-height', {}, '342px'],
+    ['--right-top-panel-max-height', { rightBottom: { offsetHeight: 60 } }, '274px'], // 342 - 60 - 8
+    ['--right-bottom-panel-max-height', {}, '342px'],
+    ['--right-bottom-panel-max-height', { rightTop: { offsetHeight: 30 } }, '304px'] // 342 - 30 - 8
+  ])('calculates %s with sibling buttons=%o correctly', (varName, refOverrides, expected) => {
+    const { layoutRefs } = setup({ refs: refOverrides })
+    renderHook(() => useLayoutMeasurements())
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith(varName, expected)
+  })
+
   test.each([
     [{ offsetWidth: 250 }, { offsetWidth: 200 }, '250px'],
     [{ offsetWidth: 0 }, { offsetWidth: 200 }, '200px'],
@@ -90,6 +110,18 @@ describe('useLayoutMeasurements', () => {
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--top-col-width', expected)
   })
 
+  test('uses 0 when sub-slot refs have null current', () => {
+    const { layoutRefs } = setup()
+    layoutRefs.leftTopRef.current = null
+    layoutRefs.leftBottomRef.current = null
+    layoutRefs.rightTopRef.current = null
+    layoutRefs.rightBottomRef.current = null
+    renderHook(() => useLayoutMeasurements())
+    // With all sub-slot refs null, buttons = 0 ?? 0 = 0, so max-heights equal full column height
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--left-top-panel-max-height', '332px')
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--right-bottom-panel-max-height', '342px')
+  })
+
   test('dispatches safe zone inset', () => {
     const { dispatch, layoutRefs } = setup()
     getSafeZoneInset.mockReturnValue({ top: 10, right: 5, bottom: 15, left: 5 })
@@ -114,7 +146,7 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     expect(useResizeObserver).toHaveBeenCalledWith(
-      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.footerRef],
+      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.footerRef, layoutRefs.leftTopRef, layoutRefs.leftBottomRef, layoutRefs.rightTopRef, layoutRefs.rightBottomRef],
       expect.any(Function)
     )
     layoutRefs.appContainerRef.current.style.setProperty.mockClear()

package/src/App/hooks/useMarkersAPI.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { useConfig } from '../store/configContext.js'
 import { useMap } from '../store/mapContext.js'
 import { useService } from '../store/serviceContext.js'
@@ -99,8 +99,10 @@ export const useMarkers = () => {
   const { markers, dispatch, mapSize, isMapReady } = useMap()
   const markerRefs = useRef(new Map())
 
-  // Attach add, remove, and getMarker methods to the markers store object
-  useEffect(() => {
+  // Attach add, remove, and getMarker methods to the markers store object.
+  // useLayoutEffect ensures these are assigned before paint so rapid clicks can't
+  // arrive between a render (new markers object) and the async useEffect assignment.
+  useLayoutEffect(() => {
     if (!mapProvider) {
       return
     }

package/src/App/hooks/useModalPanelBehaviour.js

@@ -2,6 +2,65 @@ import { useEffect } from 'react'
 import { useResizeObserver } from './useResizeObserver.js'
 import { constrainKeyboardFocus } from '../../utils/constrainKeyboardFocus.js'
 import { toggleInertElements } from '../../utils/toggleInertElements.js'
+import { useApp } from '../store/appContext.js'
+
+// Left/right slots reuse the layout CSS vars set by useLayoutMeasurements — no DOM measurement needed.
+// CSS var references resolve correctly at the panel element (inside .im-o-app) even though
+// --modal-inset is set on :root.
+const SLOT_MODAL_VARS = {
+  'left-top': { inset: 'var(--left-offset-top) auto auto var(--primary-gap)', maxHeight: 'var(--left-top-max-height)' },
+  'left-bottom': { inset: 'auto auto var(--left-offset-bottom) var(--primary-gap)', maxHeight: 'var(--left-top-max-height)' },
+  'right-top': { inset: 'var(--right-offset-top) var(--primary-gap) auto auto', maxHeight: 'var(--right-top-max-height)' },
+  'right-bottom': { inset: 'auto var(--primary-gap) var(--right-offset-bottom) auto', maxHeight: 'var(--right-top-max-height)' }
+}
+
+const MODAL_INSET = '--modal-inset'
+const MODAL_MAX_HEIGHT = '--modal-max-height'
+
+const setButtonCSSVar = (effectiveContainer, mainRef, dividerGap) => {
+  const root = document.documentElement
+  const mainRect = mainRef.current.getBoundingClientRect()
+  const buttonRect = effectiveContainer.getBoundingClientRect()
+  const isBottomSlot = !!effectiveContainer.closest('.im-o-app__left-bottom, .im-o-app__right-bottom')
+  const isLeftSlot = !!effectiveContainer.closest('.im-o-app__left-top, .im-o-app__left-bottom')
+
+  const insetTop = isBottomSlot ? 'auto' : `${Math.round(buttonRect.top - mainRect.top)}px`
+  const insetBottom = isBottomSlot ? `${Math.round(mainRect.bottom - buttonRect.bottom)}px` : 'auto'
+  const insetRight = isLeftSlot ? 'auto' : `${Math.round(mainRect.right - buttonRect.left + dividerGap)}px`
+  const insetLeft = isLeftSlot ? `${Math.round(buttonRect.right - mainRect.left + dividerGap)}px` : 'auto'
+  const anchor = isBottomSlot ? Math.round(mainRect.bottom - buttonRect.bottom) : Math.round(buttonRect.top - mainRect.top)
+
+  root.style.setProperty(MODAL_INSET, `${insetTop} ${insetRight} ${insetBottom} ${insetLeft}`)
+  root.style.setProperty(MODAL_MAX_HEIGHT, `${mainRect.height - anchor - dividerGap}px`)
+}
+
+const setSlotCSSVar = (slot, layoutRefs, primaryMargin) => {
+  const root = document.documentElement
+
+  // Left/right slots: delegate entirely to existing layout CSS vars
+  const mapped = SLOT_MODAL_VARS[slot]
+  if (mapped) {
+    root.style.setProperty(MODAL_INSET, mapped.inset)
+    root.style.setProperty(MODAL_MAX_HEIGHT, mapped.maxHeight)
+    return
+  }
+
+  // Other slots (e.g. inset): measure position from DOM
+  const refKey = `${slot[0].toLowerCase() + slot.slice(1)}Ref` // single-part slots only
+  const slotRef = layoutRefs[refKey]?.current
+  const mainContainer = layoutRefs.mainRef?.current
+  if (!slotRef || !mainContainer) {
+    return
+  }
+
+  const slotRect = slotRef.getBoundingClientRect()
+  const mainRect = mainContainer.getBoundingClientRect()
+  const relLeft = slotRect.left - mainRect.left
+  const relTop = slotRect.top - mainRect.top
+
+  root.style.setProperty(MODAL_INSET, `${relTop}px auto auto ${relLeft}px`)
+  root.style.setProperty(MODAL_MAX_HEIGHT, `${mainRect.height - relTop - primaryMargin}px`)
+}
 
 const useModalKeyHandler = (panelRef, isModal, handleClose) => {
   useEffect(() => {
@@ -68,21 +127,43 @@ export function useModalPanelBehaviour ({
   buttonContainerEl,
   handleClose
 }) {
-  useModalKeyHandler(panelRef, isModal, handleClose)
+  const { layoutRefs } = useApp()
 
-  // === Set absolute offset positions and recalculate on mainRef resize === //
-  const root = document.documentElement
-  const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
+  useModalKeyHandler(panelRef, isModal, handleClose)
 
+  // === Set --modal-inset and --modal-max-height, recalculate on mainRef resize === //
   useResizeObserver([mainRef], () => {
-    if (!isModal || !buttonContainerEl || !mainRef.current) {
+    if (!isModal || !mainRef.current) {
       return
     }
-    const mainRect = mainRef.current.getBoundingClientRect()
-    const buttonRect = buttonContainerEl.getBoundingClientRect()
-    const offsetTop = buttonRect.top - mainRect.top
-    const offsetRight = Math.round(mainRect.right - buttonRect.right + buttonRect.width + dividerGap)
-    root.style.setProperty('--modal-inset', `${offsetTop}px ${offsetRight}px auto auto`)
+
+    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)
   })
 
   // === Click on modal backdrop to close === //