@defra/interactive-map 0.0.16-alpha → 0.0.18-alpha

package/src/App/hooks/useLayoutMeasurements.js

@@ -12,8 +12,47 @@ const topColWidth = (left, right) =>
 const subSlotMaxHeight = (columnHeight, siblingButtons, gap) =>
   columnHeight - (siblingButtons ? siblingButtons + gap : 0)
 
+/**
+ * Manages all layout measurements for the map overlay and dispatches the safe
+ * zone inset used by the map to pad `fitBounds` / `setView` operations.
+ *
+ * ## Lifecycle
+ *
+ * The safe zone must only be dispatched once every plugin button's reactive
+ * props (`hiddenWhen`, `enableWhen`, `pressedWhen`, `expandedWhen`) have been
+ * evaluated for the current app/map state. Dispatching too early — before
+ * buttons that affect layout (e.g. the actions bar) have their correct
+ * visibility — produces a stale inset that causes the map to jump when the UI
+ * then settles into its real state.
+ *
+ * ### Trigger events
+ * The following state changes can alter which buttons are visible and therefore
+ * how much space the UI occupies:
+ *   - `breakpoint`   — responsive layout changes (desktop ↔ mobile / tablet)
+ *   - `mapSize`      — map container size variant changes
+ *   - `isMapReady`   — plugins are enabled on `map:ready`, changing button visibility
+ *   - `isFullscreen` — fullscreen entry/exit changes which buttons are visible
+ *   - `appVisible`   — app shown/hidden by parent HTML outside React (hybrid mode)
+ *
+ * When any of these change, `CLEAR_PLUGINS_EVALUATED` is dispatched (Effect 2),
+ * which prevents the safe zone from being re-dispatched until
+ * `useButtonStateEvaluator` has completed a full pass with no button state
+ * changes and sets `PLUGINS_EVALUATED` again.
+ *
+ * ### Safe zone dispatch
+ * Effect 3 fires whenever `arePluginsEvaluated` transitions to `true`, at which
+ * point DOM dimensions are stable and `getSafeZoneInset` can be read reliably.
+ * A `requestAnimationFrame` is used to ensure the browser has committed all
+ * layout changes before measuring.
+ *
+ * ### Resize observer
+ * Effect 4 keeps CSS custom properties up to date whenever any observed element
+ * resizes (e.g. panels opening, banner appearing, actions buttons toggling).
+ * It does not dispatch the safe zone — safe zone dispatch is owned entirely by
+ * Effect 3 to prevent jumps on panel open/close and other non-structural resizes.
+ */
 export function useLayoutMeasurements () {
-  const { dispatch, breakpoint, layoutRefs } = useApp()
+  const { dispatch, breakpoint, layoutRefs, arePluginsEvaluated, appVisible, isFullscreen } = useApp()
   const { mapSize, isMapReady } = useMap()
 
   const {
@@ -23,24 +62,28 @@ export function useLayoutMeasurements () {
     topRef,
     topLeftColRef,
     topRightColRef,
-    footerRef,
-    actionsRef,
     leftTopRef,
     leftBottomRef,
     rightTopRef,
-    rightBottomRef
+    rightBottomRef,
+    bottomRef,
+    bottomRightRef,
+    attributionsRef,
+    drawerRef,
+    actionsRef
   } = layoutRefs
 
-  // -----------------------------
-  // 1. Calculate layout CSS vars (side effect)
-  // -----------------------------
+  // --------------------------------
+  // 1. Calculate layout CSS vars (pure side effect, no dispatch)
+  // --------------------------------
   const calculateLayout = () => {
     const appContainer = appContainerRef.current
     const main = mainRef.current
     const top = topRef.current
     const topLeftCol = topLeftColRef.current
     const topRightCol = topRightColRef.current
-    const bottom = footerRef.current
+    const bottom = bottomRef.current
+    const attributions = attributionsRef.current
 
     if ([main, top, bottom].some(r => !r)) {
       return
@@ -60,10 +103,17 @@ export function useLayoutMeasurements () {
     appContainer.style.setProperty('--left-top-max-height', `${leftColumnHeight}px`)
 
     // === Right container offsets ===
+    // Mirrors the top formula (topRightCol.offsetHeight + top.offsetTop):
+    // bottomRight.offsetHeight is 0 when no buttons so the offset collapses to just
+    // the padding between the bottom of the bottom container and the bottom of main.
+    const bottomRightHeight = bottomRightRef?.current?.offsetHeight ?? 0
+    const bottomContainerPad = main.offsetHeight - bottom.offsetTop - bottom.offsetHeight
     const rightOffsetTop = topRightCol.offsetHeight + top.offsetTop
-    const rightColumnHeight = bottom.offsetTop - rightOffsetTop - dividerGap
+    const rightEffectiveBottom = bottom.offsetTop + bottom.offsetHeight - bottomRightHeight
+    const rightColumnHeight = rightEffectiveBottom - rightOffsetTop - dividerGap
+    const rightOffsetBottom = bottomContainerPad + (bottomRightHeight > 0 ? (bottomRightHeight + dividerGap) : attributions.offsetHeight)
     appContainer.style.setProperty('--right-offset-top', `${rightOffsetTop}px`)
-    appContainer.style.setProperty('--right-offset-bottom', `${main.offsetHeight - bottom.offsetTop + dividerGap}px`)
+    appContainer.style.setProperty('--right-offset-bottom', `${rightOffsetBottom}px`)
     appContainer.style.setProperty('--right-top-max-height', `${rightColumnHeight}px`)
 
     // === Sub-slot panel max-heights ===
@@ -74,22 +124,38 @@ export function useLayoutMeasurements () {
   }
 
   // --------------------------------
-  // 2. Run when breakpoint and mapSize change
+  // 2. Clear the evaluated flag when structural inputs change so the safe zone
+  //    is not dispatched until useButtonStateEvaluator has completed a full
+  //    pass with the new app/map state and set PLUGINS_EVALUATED.
   // --------------------------------
   useLayoutEffect(() => {
-    requestAnimationFrame(() => { // Required for Preact
-      calculateLayout()
+    dispatch({ type: 'CLEAR_PLUGINS_EVALUATED' })
+  }, [breakpoint, mapSize, isMapReady, appVisible, isFullscreen])
 
-      // === Set safe zone inset ===
+  // --------------------------------
+  // 3. Once all plugin button props have been evaluated (arePluginsEvaluated),
+  //    recalculate layout and dispatch the safe zone inset.
+  //    RAF required to ensure browser layout is committed before measuring.
+  // --------------------------------
+  useLayoutEffect(() => {
+    if (!arePluginsEvaluated) {
+      return
+    }
+    requestAnimationFrame(() => {
+      calculateLayout()
       const safeZoneInset = getSafeZoneInset(layoutRefs)
-      dispatch({ type: 'SET_SAFE_ZONE_INSET', payload: { safeZoneInset } })
+      if (safeZoneInset) {
+        dispatch({ type: 'SET_SAFE_ZONE_INSET', payload: { safeZoneInset } })
+      }
     })
-  }, [breakpoint, mapSize, isMapReady])
+  }, [arePluginsEvaluated])
 
   // --------------------------------
-  // 3. Recaluclate CSS vars when elements resize
+  // 4. Recalculate CSS vars whenever observed elements resize (panels, banner,
+  //    actions buttons, etc.). Safe zone is intentionally not dispatched here —
+  //    that is Effect 3's responsibility.
   // --------------------------------
-  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, footerRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef], () => {
+  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, bottomRef, bottomRightRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef], () => {
     requestAnimationFrame(() => {
       calculateLayout()
     })

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

@@ -24,18 +24,21 @@ const refs = (o = {}) => ({
   topRef: { current: o.top === null ? null : el({ offsetTop: 10, ...o.top }) },
   topLeftColRef: { current: el({ offsetHeight: 50, offsetWidth: 200, ...o.topLeftCol }) },
   topRightColRef: { current: el({ offsetHeight: 40, offsetWidth: 180, ...o.topRightCol }) },
-  footerRef: { current: o.footer === null ? null : el({ offsetTop: 400, ...o.footer }) },
-  actionsRef: { current: el({ offsetTop: 450, ...o.actions }) },
+  bottomRef: { current: o.bottom === null ? null : el({ offsetTop: 400, ...o.bottom }) },
+  bottomRightRef: { current: el({ offsetTop: 400, ...o.bottomRight }) },
   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 }) }
+  rightBottomRef: { current: el({ offsetHeight: 0, ...o.rightBottom }) },
+  attributionsRef: { current: el({ offsetHeight: 16, ...o.attributions }) },
+  drawerRef: { current: el(o.drawer) },
+  actionsRef: { current: el({ offsetTop: 450, ...o.actions }) }
 })
 
 const setup = (o = {}) => {
   const dispatch = jest.fn()
   const layoutRefs = refs(o.refs)
-  useApp.mockReturnValue({ dispatch, breakpoint: 'desktop', layoutRefs, ...o.app })
+  useApp.mockReturnValue({ dispatch, breakpoint: 'desktop', layoutRefs, arePluginsEvaluated: true, ...o.app })
   useMap.mockReturnValue({ mapSize: { width: 800, height: 600 }, isMapReady: true, ...o.map })
   getSafeZoneInset.mockReturnValue({ top: 0, right: 0, bottom: 0, left: 0 })
   return { dispatch, layoutRefs }
@@ -56,7 +59,7 @@ describe('useLayoutMeasurements', () => {
   })
 
   test('early return when required refs are null', () => {
-    const { layoutRefs } = setup({ refs: { main: null, top: null, footer: null } })
+    const { layoutRefs } = setup({ refs: { main: null, top: null, bottom: null } })
     renderHook(() => useLayoutMeasurements())
     expect(layoutRefs.appContainerRef.current.style.setProperty).not.toHaveBeenCalled()
   })
@@ -71,7 +74,7 @@ describe('useLayoutMeasurements', () => {
 
   test.each([
     ['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 }, bottom: { offsetTop: 500 } }, '116px'],
     // leftColumnHeight = 400 - (50+10) - 8 = 332; rightColumnHeight = 400 - (40+10) - 8 = 342
     ['left-top-max-height', {}, '332px'],
     ['right-top-max-height', {}, '342px']
@@ -107,6 +110,26 @@ describe('useLayoutMeasurements', () => {
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--top-col-width', expected)
   })
 
+  test('uses 0 when bottomRightRef current is null', () => {
+    const { layoutRefs } = setup()
+    layoutRefs.bottomRightRef.current = null
+    renderHook(() => useLayoutMeasurements())
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--right-offset-bottom', '116px')
+  })
+
+  test('uses bottomRight height when bottomRightHeight > 0', () => {
+    const { layoutRefs } = setup({
+      refs: {
+        bottomRight: { offsetHeight: 20 } // 👈 triggers TRUE branch
+      }
+    })
+    renderHook(() => useLayoutMeasurements())
+    // bottomContainerPad = 500 - 400 - 0 = 100
+    // expected = 100 + (20 + 8) = 128
+    expect(layoutRefs.appContainerRef.current.style.setProperty)
+      .toHaveBeenCalledWith('--right-offset-bottom', '128px')
+  })
+
   test('uses 0 when sub-slot refs have null current', () => {
     const { layoutRefs } = setup()
     layoutRefs.leftTopRef.current = null
@@ -119,31 +142,100 @@ describe('useLayoutMeasurements', () => {
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--right-bottom-panel-max-height', '342px')
   })
 
-  test('dispatches safe zone inset', () => {
-    const { dispatch, layoutRefs } = setup()
+  test('dispatches safe zone inset on desktop (post-batch RAF read only)', () => {
+    const { dispatch, layoutRefs } = setup({ app: { breakpoint: 'desktop' } })
     getSafeZoneInset.mockReturnValue({ top: 10, right: 5, bottom: 15, left: 5 })
     renderHook(() => useLayoutMeasurements())
     expect(getSafeZoneInset).toHaveBeenCalledWith(layoutRefs)
     expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SAFE_ZONE_INSET', payload: { safeZoneInset: { top: 10, right: 5, bottom: 15, left: 5 } } })
   })
 
-  test('recalculates on dependency changes', () => {
+  test('dispatches safe zone inset on mobile', () => {
+    const { dispatch } = setup({ app: { breakpoint: 'mobile' } })
+    getSafeZoneInset.mockReturnValue({ top: 10, right: 5, bottom: 40, left: 5 })
+    renderHook(() => useLayoutMeasurements())
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_SAFE_ZONE_INSET',
+      payload: { safeZoneInset: { top: 10, right: 5, bottom: 40, left: 5 } }
+    })
+  })
+
+  test('does not dispatch SET_SAFE_ZONE_INSET when getSafeZoneInset returns undefined', () => {
+    const { dispatch } = setup()
+    getSafeZoneInset.mockReturnValue(undefined)
+    renderHook(() => useLayoutMeasurements())
+    expect(dispatch).not.toHaveBeenCalledWith(expect.objectContaining({ type: 'SET_SAFE_ZONE_INSET' }))
+  })
+
+  test('does not dispatch safe zone when arePluginsEvaluated is false', () => {
+    const { dispatch } = setup({ app: { arePluginsEvaluated: false } })
+    renderHook(() => useLayoutMeasurements())
+    expect(dispatch).not.toHaveBeenCalledWith(expect.objectContaining({ type: 'SET_SAFE_ZONE_INSET' }))
+    expect(layoutRefs => layoutRefs).toBeDefined() // no layout calculation
+  })
+
+  test('re-dispatches safe zone when arePluginsEvaluated becomes true', () => {
+    setup({ app: { arePluginsEvaluated: false } })
+    const { rerender } = renderHook(() => useLayoutMeasurements())
+    const { dispatch } = setup({ app: { arePluginsEvaluated: true } })
+    getSafeZoneInset.mockReturnValue({ top: 5, right: 5, bottom: 60, left: 5 })
+    rerender()
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_SAFE_ZONE_INSET',
+      payload: { safeZoneInset: { top: 5, right: 5, bottom: 60, left: 5 } }
+    })
+  })
+
+  test('dispatches CLEAR_PLUGINS_EVALUATED when breakpoint changes', () => {
+    setup()
+    const { rerender } = renderHook(() => useLayoutMeasurements())
+    const { dispatch } = setup({ app: { breakpoint: 'mobile' } })
+    dispatch.mockClear()
+    rerender()
+    expect(dispatch).toHaveBeenCalledWith({ type: 'CLEAR_PLUGINS_EVALUATED' })
+  })
+
+  test('dispatches CLEAR_PLUGINS_EVALUATED when isMapReady changes', () => {
     setup()
     const { rerender } = renderHook(() => useLayoutMeasurements())
-    ;[{ app: { breakpoint: 'mobile' } }, { map: { mapSize: { width: 1000, height: 800 } } }, { map: { isMapReady: false } }]
-      .forEach(change => {
-        const { layoutRefs } = setup(change)
-        layoutRefs.appContainerRef.current.style.setProperty.mockClear()
-        rerender()
-        expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalled()
-      })
+    const { dispatch } = setup({ map: { isMapReady: false } })
+    dispatch.mockClear()
+    rerender()
+    expect(dispatch).toHaveBeenCalledWith({ type: 'CLEAR_PLUGINS_EVALUATED' })
+  })
+
+  test('dispatches CLEAR_PLUGINS_EVALUATED when isFullscreen changes', () => {
+    setup({ app: { isFullscreen: false } })
+    const { rerender } = renderHook(() => useLayoutMeasurements())
+    const { dispatch } = setup({ app: { isFullscreen: true } })
+    dispatch.mockClear()
+    rerender()
+    expect(dispatch).toHaveBeenCalledWith({ type: 'CLEAR_PLUGINS_EVALUATED' })
+  })
+
+  test('dispatches CLEAR_PLUGINS_EVALUATED when appVisible changes', () => {
+    setup({ app: { appVisible: false } })
+    const { rerender } = renderHook(() => useLayoutMeasurements())
+    const { dispatch } = setup({ app: { appVisible: true } })
+    dispatch.mockClear()
+    rerender()
+    expect(dispatch).toHaveBeenCalledWith({ type: 'CLEAR_PLUGINS_EVALUATED' })
+  })
+
+  test('recalculates layout when arePluginsEvaluated becomes true', () => {
+    setup({ app: { arePluginsEvaluated: false } })
+    const { rerender } = renderHook(() => useLayoutMeasurements())
+    const { layoutRefs } = setup({ app: { arePluginsEvaluated: true } })
+    layoutRefs.appContainerRef.current.style.setProperty.mockClear()
+    rerender()
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalled()
   })
 
   test('sets up resize observer', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     expect(useResizeObserver).toHaveBeenCalledWith(
-      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.footerRef, layoutRefs.leftTopRef, layoutRefs.leftBottomRef, layoutRefs.rightTopRef, layoutRefs.rightBottomRef],
+      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.bottomRef, layoutRefs.bottomRightRef, layoutRefs.leftTopRef, layoutRefs.leftBottomRef, layoutRefs.rightTopRef, layoutRefs.rightBottomRef, layoutRefs.drawerRef],
       expect.any(Function)
     )
     layoutRefs.appContainerRef.current.style.setProperty.mockClear()
@@ -151,4 +243,19 @@ describe('useLayoutMeasurements', () => {
     expect(rafSpy).toHaveBeenCalled()
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalled()
   })
+
+  test('resize observer does not dispatch safe zone (safe zone is Effect 3 only)', () => {
+    const { dispatch } = setup()
+    renderHook(() => useLayoutMeasurements())
+    dispatch.mockClear()
+    useResizeObserver.mock.calls[0][1]()
+    expect(dispatch).not.toHaveBeenCalledWith(expect.objectContaining({ type: 'SET_SAFE_ZONE_INSET' }))
+  })
+
+  test('resize observer handles null mainRef without throwing', () => {
+    const { layoutRefs } = setup()
+    renderHook(() => useLayoutMeasurements())
+    layoutRefs.mainRef.current = null
+    expect(() => useResizeObserver.mock.calls[0][1]()).not.toThrow()
+  })
 })

package/src/App/hooks/useMarkersAPI.js

@@ -5,12 +5,9 @@ import { useService } from '../store/serviceContext.js'
 import { scaleFactor } from '../../config/appConfig.js'
 import { EVENTS as events } from '../../config/events.js'
 
-// Vertical offset to align the marker tip with the coordinate point
-const MARKER_ANCHOR_OFFSET_Y = 19
-
 /**
  * Projects geographic coordinates to screen pixel position, scaled for the
- * current map size and offset so the marker tip aligns with the point.
+ * current map size. Anchor alignment is handled in CSS by the Markers component.
  *
  * @param {Array<number>} coords - [lng, lat] geographic coordinates
  * @param {Object} mapProvider - Map provider instance with `mapToScreen` method
@@ -25,7 +22,7 @@ export const projectCoords = (coords, mapProvider, mapSize, isMapReady) => {
   const { x, y } = mapProvider.mapToScreen(coords)
   return {
     x: x * scaleFactor[mapSize],
-    y: y * scaleFactor[mapSize] - MARKER_ANCHOR_OFFSET_Y
+    y: y * scaleFactor[mapSize]
   }
 }
 

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

@@ -19,7 +19,7 @@ describe('projectCoords', () => {
   const mockProvider = { mapToScreen: jest.fn(() => ({ x: 100, y: 200 })) }
 
   it('returns scaled coordinates when ready', () => {
-    expect(projectCoords({ lat: 1, lng: 1 }, mockProvider, 'medium', true)).toEqual({ x: 200, y: 381 })
+    expect(projectCoords({ lat: 1, lng: 1 }, mockProvider, 'medium', true)).toEqual({ x: 200, y: 400 })
   })
 
   it('returns zero when not ready or no provider', () => {
@@ -102,7 +102,7 @@ describe('useMarkers', () => {
 
     const renderCallback = mockEventBus.on.mock.calls.find(call => call[0] === 'map:render')[1]
     act(() => renderCallback())
-    expect(mockElement.style.transform).toBe('translate(200px, 381px)')
+    expect(mockElement.style.transform).toBe('translate(200px, 400px)')
   })
 
   it('skips map:render when not ready or no provider (line 60)', () => {
@@ -126,7 +126,7 @@ describe('useMarkers', () => {
       isMapReady: true
     })
     rerender()
-    expect(mockElement.style.transform).toBe('translate(300px, 581px)')
+    expect(mockElement.style.transform).toBe('translate(300px, 600px)')
   })
 
   it('handles app:addmarker safely', () => {
@@ -137,7 +137,7 @@ describe('useMarkers', () => {
     act(() => handleAddMarker(addPayload))
     expect(mockDispatch).toHaveBeenCalledWith({
       type: 'UPSERT_LOCATION_MARKER',
-      payload: { id: 'm1', coords: { lat: 1, lng: 1 }, label: 'Test', x: 200, y: 381, isVisible: true }
+      payload: { id: 'm1', coords: { lat: 1, lng: 1 }, label: 'Test', x: 200, y: 400, isVisible: true }
     })
   })
 

package/src/App/layout/Layout.jsx

@@ -10,6 +10,7 @@ import { Attributions } from '../components/Attributions/Attributions'
 import { layoutSlots } from '../renderer/slots'
 import { SlotRenderer } from '../renderer/SlotRenderer'
 import { HtmlElementHost } from '../renderer/HtmlElementHost'
+import { getMapThemeVars } from '../../config/mapTheme.js'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
@@ -30,10 +31,9 @@ export const Layout = () => {
         `im-o-app--${interfaceType}`,
         `im-o-app--${isFullscreen ? 'fullscreen' : 'inline'}`,
         `im-o-app--${mapStyle?.appColorScheme || preferredColorScheme}-app`,
-        `im-o-app--${mapStyle?.mapColorScheme || 'light'}-map`,
         hasExclusiveControl && 'im-o-app--exclusive-control'
       ].filter(Boolean).join(' ')}
-      style={{ backgroundColor: mapStyle?.backgroundColor || undefined }}
+      style={{ backgroundColor: mapStyle?.backgroundColor || undefined, ...getMapThemeVars(mapStyle) }}
       ref={layoutRefs.appContainerRef}
     >
       <Viewport keyboardHintPortalRef={layoutRefs.topRef} />
@@ -82,19 +82,24 @@ export const Layout = () => {
               <SlotRenderer slot={layoutSlots.RIGHT_BOTTOM} />
             </div>
           </div>
-          <div className='im-o-app__footer' ref={layoutRefs.footerRef}>
-            <div className='im-o-app__footer-col'>
+          <div className='im-o-app__bottom' ref={layoutRefs.bottomRef}>
+            <div className='im-o-app__bottom-col'>
               <Logo />
+              <div className='im-o-app__bottom-left'>
+                <SlotRenderer slot={layoutSlots.BOTTOM_LEFT} />
+              </div>
             </div>
-            <div className='im-o-app__footer-col'>
-              <SlotRenderer slot={layoutSlots.FOOTER_RIGHT} />
-              <div className='im-o-app__attributions'>
+            <div className='im-o-app__bottom-col'>
+              <div className='im-o-app__bottom-right' ref={layoutRefs.bottomRightRef}>
+                <SlotRenderer slot={layoutSlots.BOTTOM_RIGHT} />
+              </div>
+              <div className='im-o-app__attributions' ref={layoutRefs.attributionsRef}>
                 <Attributions />
               </div>
             </div>
           </div>
-          <div className='im-o-app__bottom' ref={layoutRefs.bottomRef}>
-            <SlotRenderer slot={layoutSlots.BOTTOM} />
+          <div className='im-o-app__drawer' ref={layoutRefs.drawerRef}>
+            <SlotRenderer slot={layoutSlots.DRAWER} />
           </div>
           <div className='im-o-app__actions' ref={layoutRefs.actionsRef}>
             <SlotRenderer slot={layoutSlots.ACTIONS} />

package/src/App/layout/Layout.test.jsx

@@ -38,7 +38,7 @@ describe('Layout', () => {
     topLeftColRef: React.createRef(),
     topRightColRef: React.createRef(),
     rightRef: React.createRef(),
-    footerRef: React.createRef(),
+    bottomRef: React.createRef(),
     actionsRef: React.createRef()
   }
 
@@ -72,9 +72,11 @@ describe('Layout', () => {
     expect(root.className).toContain('im-o-app--map')
     expect(root.className).toContain('im-o-app--inline')
     expect(root.className).toContain('im-o-app--light-app')
-    expect(root.className).toContain('im-o-app--dark-map')
     expect(root.className).toContain('im-o-app--exclusive-control')
     expect(root.style.backgroundColor).toBe('pink')
+    expect(root.style.getPropertyValue('--map-overlay-halo-color')).toBe('#0b0c0c')
+    expect(root.style.getPropertyValue('--map-overlay-selected-color')).toBe('#ffffff')
+    expect(root.style.getPropertyValue('--map-overlay-foreground-color')).toBe('#ffffff')
 
     const overlay = root.querySelector('.im-o-app__overlay')
     expect(overlay.className).not.toContain('not-ready')
@@ -86,7 +88,7 @@ describe('Layout', () => {
     expect(screen.getByTestId('slot-side')).toBeInTheDocument()
     expect(screen.getByTestId('slot-banner')).toBeInTheDocument()
     expect(screen.getByTestId('slot-top-left')).toBeInTheDocument()
-    expect(screen.getByTestId('slot-footer-right')).toBeInTheDocument()
+    expect(screen.getByTestId('slot-bottom-right')).toBeInTheDocument()
     expect(screen.getByTestId('slot-modal')).toBeInTheDocument()
   })
 
@@ -123,7 +125,7 @@ describe('Layout', () => {
 
     const root = document.getElementById('myApp-im-app')
     expect(root.className).toContain('im-o-app--dark-app')
-    expect(root.className).toContain('im-o-app--light-map') // fallback
+    expect(root.className).not.toContain('im-o-app--light-map')
     expect(root.style.backgroundColor).toBe('')
     expect(root.className).not.toContain('exclusive-control')
   })