@defra/interactive-map 0.0.15-alpha → 0.0.17-alpha

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/layout/Layout.jsx

@@ -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()
   }
 
@@ -86,7 +86,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()
   })
 

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

@@ -158,10 +158,6 @@
   & > *:empty {
     display: none;
   }
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: bottom 0.15s ease;
-  }
 }
 
 .im-o-app__left-top {
@@ -212,10 +208,6 @@
   top: var(--right-offset-top);
   bottom: var(--right-offset-bottom);
   gap: var(--divider-gap);
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: bottom 0.15s ease;
-  }
 }
 
 .im-o-app__right-top {
@@ -238,55 +230,74 @@
 }
 
 // ---------------------------------------------------
-// Footer: Logo, scalebar, copyright etc
+// Bottom: Logo, scalebar, copyright etc
 // ---------------------------------------------------
 
-.im-o-app__footer {
+.im-o-app__bottom {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   z-index: -2; // Support masking the viewport
 }
 
-.im-o-app__footer-col {
+.im-o-app__bottom-col {
   display: flex;
-  flex-direction: column;
   min-width: auto;
 }
 
-.im-o-app__footer-col:first-child {
-  justify-content: flex-start;
+.im-o-app__bottom-col:first-child {
+  flex-direction: row;
+  align-items: flex-end;
   flex-shrink: 0;
+  gap: var(--divider-gap);
 }
 
-.im-o-app__footer-col:last-child {
+.im-o-app__bottom-col:last-child {
+  position: relative; // anchor for absolutely-positioned attributions
   flex: 1 1 auto;
-  justify-content: flex-end;
-  text-align: right;
+  flex-direction: column;
+  align-items: flex-end;
   min-width: 0;
 }
 
+// Horizontal button rows within the bottom area
+.im-o-app__bottom-left,
+.im-o-app__bottom-right {
+  display: flex;
+  flex-direction: row;
+  gap: var(--divider-gap);
+}
+
+.im-o-app__bottom-right {
+  justify-content: flex-end;
+}
+
 // ---------------------------------------------------
 // Attributions:
 // ---------------------------------------------------
 
 .im-o-app__attributions:not(:empty) {
+  position: absolute;
+  bottom: calc(var(--primary-gap) * -1);
+  right: calc(var(--primary-gap) * -1);
   display: flex;
   justify-content: flex-end;
-  position: relative;
-  padding-top: var(--divider-gap);
-  margin-bottom: calc(var(--primary-gap) * -1);
-  margin-right: calc(var(--primary-gap) * -1);
 }
 
 // ---------------------------------------------------
-// Bottom:
+// Drawer:
 // ---------------------------------------------------
 
-.im-o-app__bottom {
+.im-o-app__drawer {
   z-index: 1;
 }
 
+.im-o-app__drawer .im-c-panel {
+  @include tools.border-focus-corner-override(
+    $corners: 'top'
+  );
+}
+
 // ---------------------------------------------------
 // Actions:
 // ---------------------------------------------------
@@ -387,10 +398,14 @@
     max-height: calc(100% - (var(--primary-gap) * 2));
   }
 
-  .im-c-panel--bottom {
+  .im-c-panel--drawer {
     top: auto;
     bottom: 0;
     max-height: 85%;
+
+    @include tools.border-focus-corner-override(
+      $corners: 'top'
+    );
   }
 
   [class*="im-c-panel--"][class*="-button"] { // Adjacent to button
@@ -452,15 +467,27 @@
     width: 100%;
     left: 0;
     bottom: calc(var(--primary-gap) * 2);
-    
+
     .im-c-panel {
       max-width: var(--action-bar-max-width);
     }
+
+    // max-height animation on a bottom-anchored element grows upward, looking like
+    // a slide-up. Override to opacity-only so the bar fades in instead.
+    @media (prefers-reduced-motion: no-preference) {
+      .im-c-actions {
+        transition: opacity var(--duration) ease;
+      }
+    }
+
+    .im-c-actions--hidden {
+      opacity: 0;
+    }
   }
 }
 
-// Bottom panels corners removed on mobile
-.im-o-app--mobile .im-o-app__bottom,
+// Drawer panels corners removed on mobile
+.im-o-app--mobile .im-o-app__drawer,
 .im-o-app--mobile .im-o-app__actions {
   margin: var(--primary-gap) calc(var(--primary-gap) * -1) calc(var(--primary-gap) * -1) calc(var(--primary-gap) * -1);
 
@@ -473,10 +500,21 @@
   }
 }
 
-.im-o-app--mobile .im-o-app__bottom .im-c-panel {
+.im-o-app--mobile .im-o-app__drawer .im-c-panel {
     clip-path: inset(-20px 0 0 0);
 }
 
+// Inset focus ring on panels that are flush with the container edge,
+// so the ::after ring isn't clipped by the parent overflow:hidden
+.im-o-app--mobile .im-o-app__drawer .im-c-panel::after,
+.im-o-app--mobile .im-o-app__actions .im-c-panel::after,
+.im-o-app__modal .im-c-panel--drawer::after {
+  top: var(--focus-border-width);
+  right: var(--focus-border-width);
+  bottom: var(--focus-border-width);
+  left: var(--focus-border-width);
+}
+
 // 4. State styles
 
 // 5. Responsive tweaks
@@ -488,4 +526,4 @@
   width: 100%;
   max-width: 80%;
   pointer-events: none;
-}
+}

package/src/App/registry/pluginRegistry.js

@@ -1,9 +1,23 @@
 // src/core/registry/pluginRegistry.js
 import { registerIcon } from './iconRegistry.js'
 import { registerKeyboardShortcut } from './keyboardShortcutRegistry.js'
+import { allowedSlots } from '../renderer/slots.js'
+import { logger } from '../../services/logger.js'
 
 const asArray = (value) => Array.isArray(value) ? value : [value]
 
+const BREAKPOINTS = ['mobile', 'tablet', 'desktop']
+
+function validateSlots (item, type) {
+  const allowed = allowedSlots[type]
+  BREAKPOINTS.forEach(bp => {
+    const slot = item[bp]?.slot
+    if (slot && !allowed.includes(slot) && !(type === 'panel' && slot.endsWith('-button'))) {
+      logger.warn(`${type} "${item.id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowed.join(', ')}.`)
+    }
+  })
+}
+
 export function createPluginRegistry ({ registerButton, registerPanel, registerControl }) {
   const registeredPlugins = []
 
@@ -18,6 +32,7 @@ export function createPluginRegistry ({ registerButton, registerPanel, registerC
 
     if (manifest.buttons) {
       asArray(manifest.buttons).forEach(button => {
+        validateSlots(button, 'button')
         registerButton({ [button.id]: { ...pluginConfig, ...button } })
         // Flat button registry including any menu items (isMenuItem prevents slot rendering)
         button?.menuItems?.forEach(menuItem => {
@@ -28,12 +43,14 @@ export function createPluginRegistry ({ registerButton, registerPanel, registerC
 
     if (manifest.panels) {
       asArray(manifest.panels).forEach(panel => {
+        validateSlots(panel, 'panel')
         registerPanel({ [panel.id]: { ...pluginConfig, ...panel } })
       })
     }
 
     if (manifest.controls) {
       asArray(manifest.controls).forEach(control => {
+        validateSlots(control, 'control')
         registerControl({ [control.id]: { ...pluginConfig, ...control } })
       })
     }

package/src/App/registry/pluginRegistry.test.js

@@ -139,6 +139,39 @@ describe('pluginRegistry', () => {
     expect(pluginRegistry.registeredPlugins).toEqual([pluginA, pluginB])
   })
 
+  describe('slot validation', () => {
+    const INVALID_SLOT = 'invalid-slot'
+
+    beforeEach(() => jest.spyOn(console, 'warn').mockImplementation(() => {}))
+    afterEach(() => jest.restoreAllMocks())
+
+    it('warns when a manifest item has an invalid slot', () => {
+      const plugin = {
+        id: 'bad-plugin',
+        config: {},
+        manifest: {
+          buttons: [{ id: 'btn1', desktop: { slot: INVALID_SLOT } }],
+          panels: [{ id: 'panel1', desktop: { slot: INVALID_SLOT } }],
+          controls: [{ id: 'ctrl1', desktop: { slot: INVALID_SLOT } }]
+        }
+      }
+      pluginRegistry.registerPlugin(plugin)
+      expect(console.warn).toHaveBeenCalledWith('[interactive-map]', expect.stringContaining(INVALID_SLOT))
+    })
+
+    it('does not warn for a panel with a button-adjacent slot', () => {
+      const plugin = {
+        id: 'adj-plugin',
+        config: {},
+        manifest: {
+          panels: [{ id: 'panel1', desktop: { slot: 'left-top-button' } }]
+        }
+      }
+      pluginRegistry.registerPlugin(plugin)
+      expect(console.warn).not.toHaveBeenCalled()
+    })
+  })
+
   it('clears all registered plugins', () => {
     const pluginA = { id: 'A', config: {}, manifest: {} }
     const pluginB = { id: 'B', config: {}, manifest: {} }

package/src/App/renderer/HtmlElementHost.jsx

@@ -19,7 +19,8 @@ export const getSlotRef = (slot, layoutRefs) => {
     middle: layoutRefs.middleRef,
     'right-top': layoutRefs.rightTopRef,
     'right-bottom': layoutRefs.rightBottomRef,
-    bottom: layoutRefs.bottomRef,
+    'bottom-right': layoutRefs.bottomRightRef,
+    drawer: layoutRefs.drawerRef,
     actions: layoutRefs.actionsRef,
     modal: layoutRefs.modalRef
   }

package/src/App/renderer/HtmlElementHost.test.jsx

@@ -14,8 +14,8 @@ jest.mock('../components/Panel/Panel.jsx', () => ({
 }))
 jest.mock('./slots.js', () => ({
   allowedSlots: {
-    panel: ['left-top', 'side', 'modal', 'bottom'],
-    control: ['left-top', 'banner', 'bottom', 'actions']
+    panel: ['left-top', 'side', 'modal', 'drawer'],
+    control: ['left-top', 'banner', 'drawer', 'actions']
   }
 }))
 
@@ -28,7 +28,7 @@ const SlotHarness = ({ layoutRefs, children }) => (
     <div ref={layoutRefs.leftTopRef} data-slot='left-top' />
     <div ref={layoutRefs.sideRef} data-slot='side' />
     <div ref={layoutRefs.modalRef} data-slot='modal' />
-    <div ref={layoutRefs.bottomRef} data-slot='bottom' />
+    <div ref={layoutRefs.drawerRef} data-slot='drawer' />
     <div ref={layoutRefs.bannerRef} data-slot='banner' />
     <div ref={layoutRefs.actionsRef} data-slot='actions' />
     {children}
@@ -47,7 +47,7 @@ describe('HtmlElementHost', () => {
       topRightColRef: { current: null },
       leftTopRef: { current: null },
       middleRef: { current: null },
-      bottomRef: { current: null },
+      drawerRef: { current: null },
       actionsRef: { current: null },
       modalRef: { current: null },
       viewportRef: { current: null },
@@ -146,13 +146,13 @@ describe('HtmlElementHost', () => {
     expect(getByTestId('panel-p1').dataset.open).toBe('true')
   })
 
-  it('resolves bottom slot to left-top on desktop', () => {
+  it('resolves drawer slot to left-top on desktop', () => {
     const { container } = renderWithSlots({
-      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'bottom' } } },
+      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'drawer' } } },
       openPanels: { p1: { props: {} } }
     })
     expect(container.querySelector('[data-slot="left-top"] [data-testid="panel-p1"]')).toBeTruthy()
-    expect(container.querySelector('[data-slot="bottom"] [data-testid="panel-p1"]')).toBeNull()
+    expect(container.querySelector('[data-slot="drawer"] [data-testid="panel-p1"]')).toBeNull()
   })
 
   it('only shows topmost modal panel', () => {

package/src/App/renderer/mapButtons.js

@@ -1,6 +1,7 @@
 // src/core/renderers/mapButtons.js
 import { MapButton } from '../components/MapButton/MapButton.jsx'
 import { allowedSlots } from './slots.js'
+import { logger } from '../../services/logger.js'
 
 function getMatchingButtons ({ appState, buttonConfig, slot, evaluateProp }) {
   const { breakpoint, mode } = appState
@@ -163,7 +164,7 @@ function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
 
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production' && typeof group === 'string') {
-      console.warn(`[interactive-map] Button "${buttonId}": group should be an object { name, label?, order? } — string groups are deprecated.`)
+      logger.warn(`Button "${buttonId}": group should be an object { name, label?, order? } — string groups are deprecated.`)
     }
 
     const name = resolveGroupName(group)
@@ -174,7 +175,7 @@ function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
       const existing = groupMap.get(name)
       /* istanbul ignore next */
       if (process.env.NODE_ENV !== 'production' && existing.order !== order) {
-        console.warn(`[interactive-map] Group "${name}" has inconsistent order values (${existing.order} vs ${order}). Using the lower value.`)
+        logger.warn(`Group "${name}" has inconsistent order values (${existing.order} vs ${order}). Using the lower value.`)
         existing.order = Math.min(existing.order, order)
       }
     } else {

package/src/App/renderer/mapPanels.test.js

@@ -145,10 +145,10 @@ describe('mapPanels', () => {
     expect(map()).toHaveLength(1)
   })
 
-  it('replaces bottom slot with left-top on non-mobile breakpoints', () => {
+  it('replaces drawer slot with left-top on non-mobile breakpoints', () => {
     defaultAppState.panelConfig = ({
       p1: {
-        desktop: { slot: 'bottom' },
+        desktop: { slot: 'drawer' },
         includeModes: ['view']
       }
     })

package/src/App/renderer/slotHelpers.js

@@ -3,14 +3,14 @@ import { allowedSlots } from './slots.js'
 
 /**
  * Resolves the target slot for a panel based on its breakpoint config.
- * Modal panels always render in the 'modal' slot, and the bottom slot
+ * Modal panels always render in the 'modal' slot, and the drawer slot
  * is only available on mobile — tablet and desktop fall back to 'left-top'.
  */
 export const resolveTargetSlot = (bpConfig, breakpoint) => {
   if (bpConfig.modal) {
     return 'modal'
   }
-  if (bpConfig.slot === 'bottom' && ['tablet', 'desktop'].includes(breakpoint)) {
+  if (bpConfig.slot === 'drawer' && ['tablet', 'desktop'].includes(breakpoint)) {
     return 'left-top'
   }
   return bpConfig.slot

package/src/App/renderer/slotHelpers.test.js

@@ -7,13 +7,13 @@ describe('resolveTargetSlot', () => {
     expect(resolveTargetSlot({ modal: true, slot: 'side' }, 'desktop')).toBe('modal')
   })
 
-  it('replaces bottom with left-top on tablet and desktop', () => {
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'tablet')).toBe('left-top')
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'desktop')).toBe('left-top')
+  it('replaces drawer with left-top on tablet and desktop', () => {
+    expect(resolveTargetSlot({ slot: 'drawer' }, 'tablet')).toBe('left-top')
+    expect(resolveTargetSlot({ slot: 'drawer' }, 'desktop')).toBe('left-top')
   })
 
-  it('keeps bottom on mobile', () => {
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'mobile')).toBe('bottom')
+  it('keeps drawer on mobile', () => {
+    expect(resolveTargetSlot({ slot: 'drawer' }, 'mobile')).toBe('drawer')
   })
 
   it('returns slot as-is otherwise', () => {