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

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

@@ -153,6 +153,11 @@
   left: var(--primary-gap);
   top: var(--left-offset-top);
   bottom: var(--left-offset-bottom);
+  gap: var(--divider-gap);
+
+  & > *:empty {
+    display: none;
+  }
 
   @media (prefers-reduced-motion: no-preference) {
     transition: bottom 0.15s ease;
@@ -162,34 +167,21 @@
 .im-o-app__left-top {
   display: flex;
   flex-direction: column;
-  flex: 0 0 auto;
-  align-items: flex-end;
+  align-items: flex-start;
+  min-height: 0;
   position: relative;
   gap: var(--divider-gap);
-
-  .im-c-panel {
-    position: absolute;
-    top: 0;
-    left: 0;
-    max-height: var(--left-top-panel-max-height);
-  }
 }
 
 .im-o-app__left-bottom {
   display: flex;
   flex-direction: column;
-  flex: 0 0 auto;
+  align-items: flex-start;
+  justify-content: flex-end;
+  min-height: 0;
   margin-top: auto;
-  align-items: flex-end;
   position: relative;
   gap: var(--divider-gap);
-
-  .im-c-panel {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    max-height: var(--left-bottom-panel-max-height);
-  }
 }
 
 // ---------------------------------------------------
@@ -219,6 +211,7 @@
   right: var(--primary-gap);
   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;
@@ -232,13 +225,6 @@
   align-items: flex-end;
   position: relative;
   gap: var(--divider-gap);
-
-  .im-c-panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    max-height: var(--right-top-panel-max-height);
-  }
 }
 
 .im-o-app__right-bottom {
@@ -249,57 +235,6 @@
   align-items: flex-end;
   position: relative;
   gap: var(--divider-gap);
-
-  .im-c-panel {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    max-height: var(--right-bottom-panel-max-height);
-  }
-}
-
-// When both left sub-slots have panels, split the column proportionally
-// so panels don't overlap. flex: 1 1 auto gives each sub-slot a share of the
-// column; max-height: 100% caps the panel at its sub-slot height (not forced).
-.im-o-app__left:has(.im-o-app__left-top > .im-c-panel:not([style*="display: none"])):has(.im-o-app__left-bottom > .im-c-panel:not([style*="display: none"])) {
-  gap: var(--divider-gap);
-
-  .im-o-app__left-top,
-  .im-o-app__left-bottom {
-    flex: 1 1 auto;
-    min-height: 0;
-  }
-
-  .im-o-app__left-bottom {
-    margin-top: 0;
-    justify-content: flex-end;
-  }
-
-  .im-o-app__left-top .im-c-panel,
-  .im-o-app__left-bottom .im-c-panel {
-    max-height: 100%;
-  }
-}
-
-// Same for right column
-.im-o-app__right:has(.im-o-app__right-top > .im-c-panel:not([style*="display: none"])):has(.im-o-app__right-bottom > .im-c-panel:not([style*="display: none"])) {
-  gap: var(--divider-gap);
-
-  .im-o-app__right-top,
-  .im-o-app__right-bottom {
-    flex: 1 1 auto;
-    min-height: 0;
-  }
-
-  .im-o-app__right-bottom {
-    margin-top: 0;
-    justify-content: flex-end;
-  }
-
-  .im-o-app__right-top .im-c-panel,
-  .im-o-app__right-bottom .im-c-panel {
-    max-height: 100%;
-  }
 }
 
 // ---------------------------------------------------
@@ -517,7 +452,6 @@
     width: 100%;
     left: 0;
     bottom: calc(var(--primary-gap) * 2);
-    padding-left: var(--offset-left);
     
     .im-c-panel {
       max-width: var(--action-bar-max-width);

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 '../../utils/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

@@ -14,7 +14,6 @@ export const getSlotRef = (slot, layoutRefs) => {
     banner: layoutRefs.bannerRef,
     'top-left': layoutRefs.topLeftColRef,
     'top-right': layoutRefs.topRightColRef,
-    inset: layoutRefs.insetRef,
     'left-top': layoutRefs.leftTopRef,
     'left-bottom': layoutRefs.leftBottomRef,
     middle: layoutRefs.middleRef,

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

@@ -14,8 +14,8 @@ jest.mock('../components/Panel/Panel.jsx', () => ({
 }))
 jest.mock('./slots.js', () => ({
   allowedSlots: {
-    panel: ['inset', 'side', 'modal', 'bottom'],
-    control: ['inset', 'banner', 'bottom', 'actions']
+    panel: ['left-top', 'side', 'modal', 'bottom'],
+    control: ['left-top', 'banner', 'bottom', 'actions']
   }
 }))
 
@@ -25,7 +25,7 @@ jest.mock('./slots.js', () => ({
  */
 const SlotHarness = ({ layoutRefs, children }) => (
   <div>
-    <div ref={layoutRefs.insetRef} data-slot='inset' />
+    <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' />
@@ -45,7 +45,7 @@ describe('HtmlElementHost', () => {
       bannerRef: { current: null },
       topLeftColRef: { current: null },
       topRightColRef: { current: null },
-      insetRef: { current: null },
+      leftTopRef: { current: null },
       middleRef: { current: null },
       bottomRef: { current: null },
       actionsRef: { current: null },
@@ -105,10 +105,10 @@ describe('HtmlElementHost', () => {
 
   it('projects open panel into correct slot', () => {
     const { container } = renderWithSlots({
-      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'inset' } } },
+      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'left-top' } } },
       openPanels: { p1: { props: {} } }
     })
-    expect(container.querySelector('[data-slot="inset"] [data-testid="panel-p1"]')).toBeTruthy()
+    expect(container.querySelector('[data-slot="left-top"] [data-testid="panel-p1"]')).toBeTruthy()
   })
 
   it('hides panel when closed and passes isOpen=false', () => {
@@ -130,19 +130,28 @@ describe('HtmlElementHost', () => {
 
   it('hides panel with inline:false when not fullscreen', () => {
     const { getByTestId } = renderWithSlots({
-      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'inset' }, inline: false } },
+      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'left-top' }, inline: false } },
       openPanels: { p1: { props: {} } },
       isFullscreen: false
     })
     expect(getByTestId('panel-p1').style.display).toBe('none')
   })
 
-  it('resolves bottom slot to inset on desktop', () => {
+  it('shows panel with inline:false when fullscreen', () => {
+    const { getByTestId } = renderWithSlots({
+      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'left-top' }, inline: false } },
+      openPanels: { p1: { props: {} } },
+      isFullscreen: true
+    })
+    expect(getByTestId('panel-p1').dataset.open).toBe('true')
+  })
+
+  it('resolves bottom slot to left-top on desktop', () => {
     const { container } = renderWithSlots({
       panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'bottom' } } },
       openPanels: { p1: { props: {} } }
     })
-    expect(container.querySelector('[data-slot="inset"] [data-testid="panel-p1"]')).toBeTruthy()
+    expect(container.querySelector('[data-slot="left-top"] [data-testid="panel-p1"]')).toBeTruthy()
     expect(container.querySelector('[data-slot="bottom"] [data-testid="panel-p1"]')).toBeNull()
   })
 
@@ -169,9 +178,9 @@ describe('HtmlElementHost', () => {
 
   it('projects visible control into correct slot', () => {
     const { container } = renderWithSlots({
-      controlConfig: { c1: { id: 'c1', html: '<input type="checkbox">', desktop: { slot: 'inset' } } }
+      controlConfig: { c1: { id: 'c1', html: '<input type="checkbox">', desktop: { slot: 'left-top' } } }
     })
-    const control = container.querySelector('[data-slot="inset"] .im-c-control')
+    const control = container.querySelector('[data-slot="left-top"] .im-c-control')
     expect(control).toBeTruthy()
     expect(control.innerHTML).toBe('<input type="checkbox">')
   })

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 '../../utils/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

@@ -7,7 +7,7 @@ jest.mock('../registry/panelRegistry.js')
 jest.mock('../registry/pluginRegistry.js', () => ({ registeredPlugins: [] }))
 jest.mock('./pluginWrapper.js', () => ({ withPluginContexts: jest.fn((c) => c) }))
 jest.mock('../components/Panel/Panel.jsx', () => ({ Panel: (props) => <div data-testid='panel' {...props} /> }))
-jest.mock('./slots.js', () => ({ allowedSlots: { panel: ['header', 'modal', 'inset'] } }))
+jest.mock('./slots.js', () => ({ allowedSlots: { panel: ['header', 'modal', 'left-top'] } }))
 
 describe('mapPanels', () => {
   const baseConfig = {
@@ -145,7 +145,7 @@ describe('mapPanels', () => {
     expect(map()).toHaveLength(1)
   })
 
-  it('replaces bottom slot with inset on non-mobile breakpoints', () => {
+  it('replaces bottom slot with left-top on non-mobile breakpoints', () => {
     defaultAppState.panelConfig = ({
       p1: {
         desktop: { slot: 'bottom' },
@@ -153,7 +153,7 @@ describe('mapPanels', () => {
       }
     })
 
-    const result = map(defaultAppState, 'inset')
+    const result = map(defaultAppState, 'left-top')
     expect(result).toHaveLength(1)
     expect(result[0].id).toBe('p1')
   })

package/src/App/renderer/slotHelpers.js

@@ -4,14 +4,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
- * is only available on mobile — tablet and desktop fall back to 'inset'.
+ * 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)) {
-    return 'inset'
+    return 'left-top'
   }
   return bpConfig.slot
 }

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

@@ -7,9 +7,9 @@ describe('resolveTargetSlot', () => {
     expect(resolveTargetSlot({ modal: true, slot: 'side' }, 'desktop')).toBe('modal')
   })
 
-  it('replaces bottom with inset on tablet and desktop', () => {
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'tablet')).toBe('inset')
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'desktop')).toBe('inset')
+  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('keeps bottom on mobile', () => {

package/src/App/renderer/slots.js

@@ -5,7 +5,6 @@ export const layoutSlots = Object.freeze({
   TOP_LEFT: 'top-left',
   TOP_MIDDLE: 'top-middle',
   TOP_RIGHT: 'top-right',
-  INSET: 'inset',
   LEFT_TOP: 'left-top',
   LEFT_BOTTOM: 'left-bottom',
   MIDDLE: 'middle',
@@ -22,7 +21,6 @@ export const allowedSlots = Object.freeze({
     layoutSlots.BANNER,
     layoutSlots.TOP_LEFT,
     layoutSlots.TOP_RIGHT,
-    layoutSlots.INSET,
     layoutSlots.MIDDLE,
     layoutSlots.FOOTER_RIGHT,
     layoutSlots.BOTTOM,
@@ -31,7 +29,6 @@ export const allowedSlots = Object.freeze({
   panel: [
     layoutSlots.SIDE,
     layoutSlots.BANNER,
-    layoutSlots.INSET, // Deprecate
     layoutSlots.LEFT_TOP,
     layoutSlots.LEFT_BOTTOM,
     layoutSlots.MIDDLE,

package/src/App/store/AppProvider.jsx

@@ -19,7 +19,6 @@ export const AppProvider = ({ options, children }) => {
     topRef: useRef(null),
     topLeftColRef: useRef(null),
     topRightColRef: useRef(null),
-    insetRef: useRef(null),
     leftRef: useRef(null),
     leftTopRef: useRef(null),
     leftBottomRef: useRef(null),

package/src/App/store/appDispatchMiddleware.js

@@ -1,7 +1,11 @@
 // src/App/store/dispatchMiddleware.js
 import { EVENTS as events } from '../../config/events.js'
-import { defaultPanelConfig } from '../../config/appConfig.js'
+import { defaultPanelConfig, defaultButtonConfig, defaultControlConfig } from '../../config/appConfig.js'
 import { deepMerge } from '../../utils/deepMerge.js'
+import { allowedSlots } from '../renderer/slots.js'
+import { logger } from '../../utils/logger.js'
+
+const BREAKPOINTS = ['mobile', 'tablet', 'desktop']
 
 /**
  * Determines which panels were implicitly closed when opening a new panel
@@ -81,9 +85,37 @@ export function handleActionSideEffects (action, previousState, panelConfig, eve
     })
   }
 
+  if (type === 'ADD_BUTTON') {
+    const { id, config } = payload
+    const mergedConfig = deepMerge(defaultButtonConfig, config)
+    BREAKPOINTS.forEach(bp => {
+      const slot = mergedConfig[bp]?.slot
+      if (slot && !allowedSlots.button.includes(slot)) {
+        logger.warn(`button "${id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowedSlots.button.join(', ')}.`)
+      }
+    })
+  }
+
+  if (type === 'ADD_CONTROL') {
+    const { id, config } = payload
+    const mergedConfig = deepMerge(defaultControlConfig, config)
+    BREAKPOINTS.forEach(bp => {
+      const slot = mergedConfig[bp]?.slot
+      if (slot && !allowedSlots.control.includes(slot)) {
+        logger.warn(`control "${id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowedSlots.control.join(', ')}.`)
+      }
+    })
+  }
+
   if (type === 'ADD_PANEL') {
     const { id, config } = payload
     const mergedConfig = deepMerge(defaultPanelConfig, config)
+    BREAKPOINTS.forEach(bp => {
+      const slot = mergedConfig[bp]?.slot
+      if (slot && !allowedSlots.panel.includes(slot) && !slot.endsWith('-button')) {
+        logger.warn(`panel "${id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowedSlots.panel.join(', ')}.`)
+      }
+    })
     const bpConfig = mergedConfig[previousState.breakpoint]
     if (bpConfig?.open) {
       queueMicrotask(() => {