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

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

@@ -17,12 +17,17 @@ describe('useModalPanelBehaviour', () => {
       main: { current: document.createElement('div') },
       panel: { current: document.createElement('div') }
     }
+    // Give panel an ID for aria-controls tests
+    refs.panel.current.id = 'modal-panel-id'
+
     elements = {
       buttonContainer: document.createElement('div'),
       root: document.createElement('div')
     }
+
     elements.root.appendChild(refs.panel.current)
     document.body.appendChild(elements.root)
+
     handleClose = jest.fn()
     jest.clearAllMocks()
     document.documentElement.style.setProperty('--modal-inset', '')
@@ -32,13 +37,17 @@ describe('useModalPanelBehaviour', () => {
     document.body.innerHTML = ''
   })
 
-  const TestComponent = ({ isModal = true }) => {
+  const TestComponent = ({
+    isModal = true,
+    buttonContainerEl,
+    rootEl = elements.root
+  }) => {
     useModalPanelBehaviour({
       mainRef: refs.main,
       panelRef: refs.panel,
       isModal,
-      rootEl: elements.root,
-      buttonContainerEl: elements.buttonContainer,
+      rootEl,
+      buttonContainerEl,
       handleClose
     })
     return null
@@ -63,66 +72,51 @@ describe('useModalPanelBehaviour', () => {
     )
   })
 
-  it('updates --modal-inset on resize', () => {
-    useResizeObserverModule.useResizeObserver.mockImplementation((_, cb) => cb())
-    Object.defineProperty(refs.main.current, 'getBoundingClientRect', {
-      value: () => ({ top: 0, right: 100, bottom: 50, left: 0, width: 100, height: 50 })
+  describe('positioning (--modal-inset)', () => {
+    beforeEach(() => {
+      // Force ResizeObserver to run the callback immediately
+      useResizeObserverModule.useResizeObserver.mockImplementation((_, cb) => cb())
+
+      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
+      })
     })
-    Object.defineProperty(elements.buttonContainer, 'getBoundingClientRect', {
-      value: () => ({ top: 10, right: 80, bottom: 40, left: 20, width: 60, height: 30 })
-    })
-
-    render(<TestComponent />)
-
-    const inset = getComputedStyle(document.documentElement).getPropertyValue('--modal-inset')
-    expect(inset).toContain('10px')
-  })
-
-  describe('backdrop clicks', () => {
-    const createBackdrop = (appendTo) => {
-      const backdrop = document.createElement('div')
-      backdrop.className = 'im-o-app__modal-backdrop'
-      appendTo.appendChild(backdrop)
-      return backdrop
-    }
 
-    it('calls handleClose when backdrop inside rootEl is clicked', () => {
-      const backdrop = createBackdrop(elements.root)
+    it('hits the buttonContainerEl === undefined branch', () => {
+      refs.main.current = document.createElement('div') // mainRef must exist
       render(<TestComponent />)
-      fireEvent.click(backdrop)
-      expect(handleClose).toHaveBeenCalled()
-    })
 
-    it('does not call handleClose when backdrop outside rootEl is clicked', () => {
-      const backdrop = createBackdrop(document.body)
-      render(<TestComponent />)
-      fireEvent.click(backdrop)
-      expect(handleClose).not.toHaveBeenCalled()
-    })
+      // Manually trigger ResizeObserver callback (if mocked)
+      const callback = useResizeObserverModule.useResizeObserver.mock.calls[0][1]
+      callback()
 
-    it('does not call handleClose when non-backdrop element is clicked', () => {
-      elements.root.appendChild(document.createElement('div'))
-      render(<TestComponent />)
-      fireEvent.click(elements.root.firstChild)
-      expect(handleClose).not.toHaveBeenCalled()
+      // Expect CSS variable not set, just to assert callback ran
+      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
+      expect(inset).toBe('')
     })
-  })
 
-  it('toggles inert elements on mount and cleanup', () => {
-    const { unmount } = render(<TestComponent />)
+    it('updates --modal-inset via aria-controls when buttonContainerEl is stale', () => {
+      const button = document.createElement('button')
+      button.setAttribute('aria-controls', 'modal-panel-id')
+      elements.buttonContainer.appendChild(button)
+      document.body.appendChild(elements.buttonContainer)
 
-    expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith({
-      containerEl: refs.panel.current,
-      isFullscreen: true,
-      boundaryEl: elements.root
-    })
+      const staleEl = document.createElement('div') // detached
+      render(<TestComponent buttonContainerEl={staleEl} />)
 
-    unmount()
+      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
+      expect(inset).toContain('10px')
+    })
 
-    expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith({
-      containerEl: refs.panel.current,
-      isFullscreen: false,
-      boundaryEl: elements.root
+    it('skips update when effectiveContainer cannot be resolved', () => {
+      render(<TestComponent buttonContainerEl={null} />)
+      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
+      expect(inset).toBe('')
     })
   })
 
@@ -138,6 +132,20 @@ describe('useModalPanelBehaviour', () => {
       expect(refs.panel.current.focus).toHaveBeenCalled()
     })
 
+    // COVERS LINE 44 (The early return branch)
+    it('does not redirect focus when focus moves completely outside the app root', () => {
+      refs.panel.current.focus = jest.fn()
+      render(<TestComponent />)
+
+      const externalEl = document.createElement('button')
+      document.body.appendChild(externalEl) // Outside elements.root
+
+      dispatchFocusIn(externalEl)
+
+      // Since isInsideApp is false, it should hit the "return" and not call focus()
+      expect(refs.panel.current.focus).not.toHaveBeenCalled()
+    })
+
     it('does not redirect focus when focus is already inside panel', () => {
       refs.panel.current.focus = jest.fn()
       render(<TestComponent />)
@@ -149,23 +157,39 @@ describe('useModalPanelBehaviour', () => {
       expect(refs.panel.current.focus).not.toHaveBeenCalled()
     })
 
-    it('handles edge cases gracefully', () => {
+    it('handles null focus targets gracefully', () => {
       render(<TestComponent />)
-
       dispatchFocusIn(null)
+      expect(true).toBe(true)
+    })
+  })
+
+  describe('backdrop and inert', () => {
+    it('calls handleClose when backdrop inside rootEl is clicked', () => {
+      const backdrop = document.createElement('div')
+      backdrop.className = 'im-o-app__modal-backdrop'
+      elements.root.appendChild(backdrop)
 
-      refs.panel.current = null
-      dispatchFocusIn(document.body)
+      render(<TestComponent />)
+      fireEvent.click(backdrop)
+      expect(handleClose).toHaveBeenCalled()
+    })
 
-      expect(true).toBe(true) // No errors thrown
+    it('toggles inert elements on mount and cleanup', () => {
+      const { unmount } = render(<TestComponent />)
+      expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith(
+        expect.objectContaining({ isFullscreen: true })
+      )
+      unmount()
+      expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith(
+        expect.objectContaining({ isFullscreen: false })
+      )
     })
   })
 
   it('does nothing when isModal is false', () => {
     render(<TestComponent isModal={false} />)
-
     fireEvent.keyDown(refs.panel.current, { key: 'Escape' })
     expect(handleClose).not.toHaveBeenCalled()
-    expect(toggleInertModule.toggleInertElements).not.toHaveBeenCalled()
   })
 })

package/src/App/hooks/useVisibleGeometry.js

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from 'react'
+import { useConfig } from '../store/configContext.js'
+import { useApp } from '../store/appContext.js'
+import { EVENTS as events } from '../../config/events.js'
+
+export const getGeometryType = (geojson) => {
+  if (!geojson) {
+    return null
+  }
+  if (geojson.type === 'Feature') {
+    return geojson.geometry?.type
+  }
+  return geojson.type
+}
+
+const isPointGeometry = (geojson) => {
+  const type = getGeometryType(geojson)
+  return type === 'Point' || type === 'MultiPoint'
+}
+
+export const getPointCoordinates = (geojson) => {
+  if (geojson.type === 'Feature') {
+    return getPointCoordinates(geojson.geometry)
+  }
+  if (geojson.type === 'Point') {
+    return geojson.coordinates
+  }
+  if (geojson.type === 'MultiPoint') {
+    return geojson.coordinates[0]
+  }
+  return null
+}
+
+const SLOT_REFS = {
+  inset: 'insetRef',
+  bottom: 'bottomRef',
+  side: 'sideRef'
+}
+
+export const useVisibleGeometry = () => {
+  const { mapProvider, eventBus } = useConfig()
+  const { layoutRefs, panelConfig, panelRegistry, breakpoint } = useApp()
+
+  const latestRef = useRef({ layoutRefs, panelConfig, panelRegistry, breakpoint })
+  latestRef.current = { layoutRefs, panelConfig, panelRegistry, breakpoint }
+
+  useEffect(() => {
+    if (!mapProvider || !eventBus) {
+      return undefined
+    }
+
+    const handlePanelOpened = ({ panelId, slot: eventSlot, visibleGeometry: eventVisibleGeometry }) => {
+      const { panelConfig: config, panelRegistry: registry, layoutRefs: refs, breakpoint: bp } = latestRef.current
+      const resolvedConfig = config?.[panelId] ? config : (registry?.getPanelConfig() ?? config)
+      const visibleGeometry = eventVisibleGeometry ?? resolvedConfig?.[panelId]?.visibleGeometry
+      const slot = eventSlot ?? resolvedConfig?.[panelId]?.[bp]?.slot
+      const slotRef = refs[SLOT_REFS[slot]]
+
+      if (!visibleGeometry || !slotRef) {
+        return
+      }
+      if (typeof mapProvider.isGeometryObscured !== 'function') {
+        return
+      }
+
+      const waitForPanel = () => {
+        const panelRect = slotRef.current?.getBoundingClientRect()
+
+        if (!panelRect || panelRect.width === 0 || panelRect.height === 0) {
+          // Not ready yet, check on the next animation frame
+          requestAnimationFrame(waitForPanel)
+          return
+        }
+
+        // Panel now exists and has size, safe to measure
+        if (!mapProvider.isGeometryObscured(visibleGeometry, panelRect)) {
+          return
+        }
+
+        if (isPointGeometry(visibleGeometry)) {
+          const center = getPointCoordinates(visibleGeometry)
+          if (center) {
+            mapProvider.setView({ center })
+          }
+        } else {
+          mapProvider.fitToBounds(visibleGeometry)
+        }
+      }
+
+      // Start waiting for panel to exist with a measurable size
+      requestAnimationFrame(waitForPanel)
+    }
+
+    eventBus.on(events.APP_PANEL_OPENED, handlePanelOpened)
+
+    return () => {
+      eventBus.off(events.APP_PANEL_OPENED, handlePanelOpened)
+    }
+  }, [mapProvider, eventBus])
+}

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

@@ -0,0 +1,331 @@
+import { renderHook } from '@testing-library/react'
+import { useVisibleGeometry, getGeometryType, getPointCoordinates } from './useVisibleGeometry'
+import { useConfig } from '../store/configContext.js'
+import { useApp } from '../store/appContext.js'
+
+jest.mock('../store/configContext.js')
+jest.mock('../store/appContext.js')
+
+const pointFeature = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 51] }, properties: {} }
+const multiPointFeature = { type: 'Feature', geometry: { type: 'MultiPoint', coordinates: [[1, 51], [2, 52]] }, properties: {} }
+const polygonFeature = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+
+const insetPanelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+const bottomPanelRect = { left: 0, top: 500, right: 1000, bottom: 800, width: 1000, height: 300 }
+
+const setup = (overrides = {}) => {
+  const capturedHandlers = {}
+  const mapProvider = {
+    isGeometryObscured: jest.fn(() => true),
+    fitToBounds: jest.fn(),
+    setView: jest.fn(),
+    ...overrides.mapProvider
+  }
+  const eventBus = {
+    on: jest.fn((event, handler) => { capturedHandlers[event] = handler }),
+    off: jest.fn(),
+    ...overrides.eventBus
+  }
+
+  const insetEl = document.createElement('div')
+  insetEl.getBoundingClientRect = jest.fn(() => insetPanelRect)
+  const bottomEl = document.createElement('div')
+  bottomEl.getBoundingClientRect = jest.fn(() => bottomPanelRect)
+
+  const layoutRefs = {
+    mainRef: { current: document.createElement('div') },
+    insetRef: { current: insetEl },
+    bottomRef: { current: bottomEl },
+    ...overrides.layoutRefs
+  }
+  const panelConfig = {
+    myPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'inset' } },
+    emptyPanel: {},
+    ...overrides.panelConfig
+  }
+  const panelRegistry = {
+    getPanelConfig: jest.fn(() => panelConfig),
+    ...overrides.panelRegistry
+  }
+
+  useConfig.mockReturnValue({ mapProvider, eventBus, ...overrides.config })
+  useApp.mockReturnValue({ layoutRefs, panelConfig, panelRegistry, breakpoint: 'desktop', ...overrides.app })
+
+  return { mapProvider, eventBus, capturedHandlers, layoutRefs, panelConfig, insetEl, bottomEl }
+}
+
+describe('useVisibleGeometry', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.useFakeTimers()
+  })
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  test('early returns when mapProvider is null', () => {
+    setup({ config: { mapProvider: null } })
+    const { result } = renderHook(() => useVisibleGeometry())
+    expect(result.error).toBeUndefined()
+  })
+
+  test('early returns when eventBus is null', () => {
+    setup({ config: { eventBus: null } })
+    const { result } = renderHook(() => useVisibleGeometry())
+    expect(result.error).toBeUndefined()
+  })
+
+  test('subscribes to APP_PANEL_OPENED on eventBus', () => {
+    const { eventBus } = setup()
+    renderHook(() => useVisibleGeometry())
+    expect(eventBus.on).toHaveBeenCalledWith('app:panelopened', expect.any(Function))
+  })
+
+  test('unsubscribes from APP_PANEL_OPENED on unmount', () => {
+    const { eventBus } = setup()
+    const { unmount } = renderHook(() => useVisibleGeometry())
+    unmount()
+    expect(eventBus.off).toHaveBeenCalledWith('app:panelopened', expect.any(Function))
+  })
+
+  test('does nothing when panel has no visibleGeometry', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'emptyPanel' })
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when panel does not exist in config', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'unknownPanel' })
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when panel has visibleGeometry but no slot config', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { noSlotPanel: { visibleGeometry: polygonFeature } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'noSlotPanel' })
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when mapProvider has no isGeometryObscured method', () => {
+    const { capturedHandlers, mapProvider } = setup({ mapProvider: { isGeometryObscured: null, fitToBounds: jest.fn(), setView: jest.fn() } })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when slot ref has zero dimensions (panel not visible)', () => {
+    const zeroEl = document.createElement('div')
+    zeroEl.getBoundingClientRect = jest.fn(() => ({ left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 }))
+    const { mapProvider, capturedHandlers } = setup({
+      layoutRefs: {
+        mainRef: { current: document.createElement('div') },
+        insetRef: { current: zeroEl }
+      }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+
+    // Run the current pending animation frame
+    jest.runOnlyPendingTimers()
+
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when geometry is not obscured', () => {
+    const { mapProvider, capturedHandlers } = setup({ mapProvider: { isGeometryObscured: jest.fn(() => false), fitToBounds: jest.fn(), setView: jest.fn() } })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+  })
+
+  test('calls fitToBounds with visibleGeometry for non-point geometry when obscured', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, insetPanelRect)
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+  })
+
+  test('calls setView with center for Point geometry when obscured', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { pointPanel: { visibleGeometry: pointFeature, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'pointPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.setView).toHaveBeenCalledWith({ center: [1, 51] })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('calls setView with first coordinate for MultiPoint geometry when obscured', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { mpPanel: { visibleGeometry: multiPointFeature, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'mpPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.setView).toHaveBeenCalledWith({ center: [1, 51] })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('calls fitToBounds for a raw non-Feature geometry (e.g. Polygon) when obscured', () => {
+    const rawPolygon = { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { geoPanel: { visibleGeometry: rawPolygon, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'geoPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(rawPolygon)
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+  })
+
+  test('calls setView for a raw Point geometry (not Feature-wrapped) when obscured', () => {
+    const rawPoint = { type: 'Point', coordinates: [1, 51] }
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { rawPointPanel: { visibleGeometry: rawPoint, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'rawPointPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.setView).toHaveBeenCalledWith({ center: [1, 51] })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('does not call setView when Point feature has null coordinates', () => {
+    const nullCoordsFeature = { type: 'Feature', geometry: { type: 'Point', coordinates: null }, properties: {} }
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { nullPanel: { visibleGeometry: nullCoordsFeature, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'nullPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('uses bottom slot ref when panel is in bottom slot', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { bottomPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'bottom' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'bottomPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, bottomPanelRect)
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+  })
+
+  test('uses latest panelConfig via ref when it changes between renders', () => {
+    const { mapProvider, capturedHandlers, insetEl } = setup()
+    const { rerender } = renderHook(() => useVisibleGeometry())
+
+    const updatedGeometry = { type: 'Feature', geometry: { type: 'LineString', coordinates: [[0, 0], [1, 1]] }, properties: {} }
+    const updatedPanelConfig = { myPanel: { visibleGeometry: updatedGeometry, desktop: { slot: 'inset' } } }
+    useApp.mockReturnValue({
+      layoutRefs: { mainRef: { current: document.createElement('div') }, insetRef: { current: insetEl } },
+      panelConfig: updatedPanelConfig,
+      panelRegistry: { getPanelConfig: jest.fn(() => updatedPanelConfig) },
+      breakpoint: 'desktop'
+    })
+    rerender()
+
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(updatedGeometry)
+  })
+
+  test('uses slot from event payload when registry config lacks slot info', () => {
+    const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const { mapProvider, capturedHandlers } = setup({
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry } })) }
+    })
+    renderHook(() => useVisibleGeometry())
+    // Event includes slot (as middleware provides for ADD_PANEL); registry config has no slot info
+    capturedHandlers['app:panelopened']({ panelId: 'freshPanel', slot: 'inset' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(freshGeometry)
+  })
+
+  test('falls back to panelRegistry for panels not yet in stale panelConfig', () => {
+    const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const { mapProvider, capturedHandlers } = setup({
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry, desktop: { slot: 'inset' } } })) }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'freshPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(freshGeometry)
+  })
+
+  test('falls back to config when panel not in panelConfig and registry returns null', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: {}, // panel not present
+      panelRegistry: { getPanelConfig: jest.fn(() => null) } // registry returns null
+    })
+
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'missingPanel', visibleGeometry: polygonFeature, slot: 'inset' })
+    jest.runAllTimers()
+    // Should still call fitToBounds using visibleGeometry from event payload
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+  })
+
+  test('uses visibleGeometry from event payload directly, bypassing registry (ADD_PANEL first-click case)', () => {
+    // Registry is empty — simulates first ADD_PANEL before React has processed the reducer
+    const { mapProvider, capturedHandlers } = setup({
+      panelRegistry: { getPanelConfig: jest.fn(() => ({})) }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'newPanel', slot: 'inset', visibleGeometry: polygonFeature })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+  })
+})
+
+describe('getGeometryType', () => {
+  test('returns null for falsy input', () => {
+    expect(getGeometryType(null)).toBeNull()
+    expect(getGeometryType(undefined)).toBeNull()
+  })
+
+  test('returns geometry type for a Feature', () => {
+    expect(getGeometryType({ type: 'Feature', geometry: { type: 'Polygon' } })).toBe('Polygon')
+  })
+
+  test('returns type directly for a raw geometry', () => {
+    expect(getGeometryType({ type: 'Point' })).toBe('Point')
+    expect(getGeometryType({ type: 'FeatureCollection' })).toBe('FeatureCollection')
+  })
+})
+
+describe('getPointCoordinates', () => {
+  test('returns null for unrecognised geometry type', () => {
+    expect(getPointCoordinates({ type: 'Polygon', coordinates: [] })).toBeNull()
+    expect(getPointCoordinates({ type: 'LineString', coordinates: [] })).toBeNull()
+  })
+
+  test('returns coordinates for a Point', () => {
+    expect(getPointCoordinates(pointFeature.geometry)).toEqual(pointFeature.geometry.coordinates)
+  })
+
+  test('returns first coordinate for a MultiPoint', () => {
+    expect(getPointCoordinates(multiPointFeature.geometry)).toEqual(multiPointFeature.geometry.coordinates[0])
+  })
+
+  test('recurses into Feature geometry', () => {
+    expect(getPointCoordinates(pointFeature)).toEqual(pointFeature.geometry.coordinates)
+  })
+})

package/src/App/layout/Layout.jsx

@@ -70,7 +70,7 @@ export const Layout = () => {
             <div className='im-o-app__right-top'>
               <SlotRenderer slot={layoutSlots.RIGHT_TOP} />
             </div>
-            <div className='im-o-app__right-bottom'>
+            <div className='im-o-app__right-bottom' ref={layoutRefs.rightBottomRef}>
               <SlotRenderer slot={layoutSlots.RIGHT_BOTTOM} />
             </div>
           </div>

package/src/App/layout/layout.module.scss

@@ -322,10 +322,7 @@
   }
 
   [class*="im-c-panel--"][class*="-button"] { // Adjacent to button
-    top: var(--modal-inset);
-    right: var(--modal-inset);
-    bottom: var(--modal-inset);
-    left: var(--modal-inset);
+    inset: var(--modal-inset);
   }
 }
 

package/src/App/renderer/HtmlElementHost.jsx

@@ -18,6 +18,7 @@ export const getSlotRef = (slot, layoutRefs) => {
     inset: layoutRefs.insetRef,
     middle: layoutRefs.middleRef,
     bottom: layoutRefs.bottomRef,
+    'right-bottom': layoutRefs.rightBottomRef,
     actions: layoutRefs.actionsRef,
     modal: layoutRefs.modalRef
   }