@defra/interactive-map 0.0.39-alpha → 0.0.41-alpha

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

@@ -76,16 +76,41 @@
 }
 
 // ---------------------------------------------------
-// Banner: Panels only
+// Banner: docks centred between the side columns or stacks full-width; mode and position are set in JS.
 // ---------------------------------------------------
 
 .im-o-app__banner {
+  position: absolute;
+  top: var(--banner-top);
+  left: var(--banner-left);
+  right: var(--banner-right);
+  z-index: 9;
   display: flex;
   flex-direction: column;
   gap: var(--divider-gap);
 }
 
-.im-o-app__banner .im-c-panel:last-child {
+// Trailing gap below the banner is added in JS, not via a last-child margin, since closed consumer HTML panels stay in the DOM.
+
+// Stacked fills full width; docked caps the width and centres it.
+.im-o-app__banner--docked .im-c-panel--banner {
+  max-width: var(--banner-preferred-width);
+  margin-inline: auto;
+}
+
+// ---------------------------------------------------
+// Header: normal flow, above the top row — pushes everything below it down for free.
+// ---------------------------------------------------
+
+// z-index only, no position — flex items get stacking priority from z-index alone, and must stay above .im-o-app__top's since header comes first in the DOM.
+.im-o-app__header {
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.im-o-app__header:not(:empty) {
   margin-bottom: var(--divider-gap);
 }
 
@@ -93,7 +118,9 @@
 // Top: Includes a panel and buttons in colums
 // ---------------------------------------------------
 
+// z-index only (see .im-o-app__header's comment above) — must stay below its value.
 .im-o-app__top {
+  z-index: 10;
   display: flex;
   margin-bottom: auto;
   justify-content: space-between;
@@ -421,10 +448,6 @@
   .im-o-app__modal .im-c-panel--banner {
     margin: var(--primary-gap);
   }
-
-  .im-o-app__banner {
-    z-index: 9;
-  }
 }
 
 // Desktop modal banner margin
@@ -447,13 +470,6 @@
   opacity: 0;
 }
 
-// Banner on desktop
-.im-o-app--desktop .im-c-panel--banner {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--banner-max-desktop-width);
-}
-
 // Actions inset when width is greater
 .im-o-app--tablet, .im-o-app--desktop {
   .im-o-app__actions {
@@ -466,8 +482,7 @@
       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.
+    // Opacity-only so it fades in instead of visually sliding up.
     @media (prefers-reduced-motion: no-preference) {
       .im-c-actions {
         transition: opacity var(--duration) ease;
@@ -498,8 +513,7 @@
     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
+// Inset the focus ring so it isn't clipped by the parent's 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 {

package/src/App/registry/keyboardShortcutRegistry.js

@@ -1,15 +1,10 @@
 // src/core/registry/keyboardShortcutRegistry.js
 import { coreShortcuts } from '../controls/keyboardShortcuts.js'
 
-// Stores the actual shortcut objects in insertion order
-const pluginShortcutHelp = []
+// State is passed in explicitly, rather than held at module scope, so each map instance gets its own registry and can't leak shortcuts or provider support into another map's help panel.
 
-// Tracks only IDs for O(1) duplicate detection
-const pluginShortcutIds = new Set()
-
-let providerSupportedIds = new Set()
-
-export const registerKeyboardShortcut = ({ shortcut }) => {
+const _registerKeyboardShortcut = (state, { shortcut }) => {
+  const { pluginShortcutHelp, pluginShortcutIds } = state
   if (pluginShortcutIds.has(shortcut.id)) {
     pluginShortcutHelp[pluginShortcutHelp.findIndex(s => s.id === shortcut.id)] = shortcut
   } else {
@@ -18,14 +13,14 @@ export const registerKeyboardShortcut = ({ shortcut }) => {
   }
 }
 
-export const setProviderSupportedShortcuts = (ids = []) => {
-  providerSupportedIds = new Set(ids)
+const _setProviderSupportedShortcuts = (state, ids = []) => {
+  state.providerSupportedIds = new Set(ids)
 }
 
-export const getKeyboardShortcuts = (appConfig = {}) => {
+const _getKeyboardShortcuts = (state, appConfig = {}) => {
   const filteredCore = coreShortcuts.filter(s => {
     // Must be supported by provider
-    if (!providerSupportedIds.has(s.id)) {
+    if (!state.providerSupportedIds.has(s.id)) {
       return false
     }
     // Check requiredConfig - all specified config values must be truthy
@@ -37,6 +32,23 @@ export const getKeyboardShortcuts = (appConfig = {}) => {
 
   return [
     ...filteredCore, // supported core shortcuts
-    ...pluginShortcutHelp // plugin-defined shortcuts (deduped)
+    ...state.pluginShortcutHelp // plugin-defined shortcuts (deduped)
   ]
 }
+
+// One instance per map — see initialiseApp.js's getOrCreateRegistries.
+export function createKeyboardShortcutRegistry () {
+  const state = {
+    // Stores the actual shortcut objects in insertion order
+    pluginShortcutHelp: [],
+    // Tracks only IDs for O(1) duplicate detection
+    pluginShortcutIds: new Set(),
+    providerSupportedIds: new Set()
+  }
+
+  return {
+    registerKeyboardShortcut: (args) => _registerKeyboardShortcut(state, args),
+    setProviderSupportedShortcuts: (ids) => _setProviderSupportedShortcuts(state, ids),
+    getKeyboardShortcuts: (appConfig) => _getKeyboardShortcuts(state, appConfig)
+  }
+}

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

@@ -1,8 +1,6 @@
 // src/core/registry/keyboardShortcutRegistry.test.js
-describe('keyboardShortcutRegistry', () => {
-  let registerKeyboardShortcut
-  let setProviderSupportedShortcuts
-  let getKeyboardShortcuts
+describe('createKeyboardShortcutRegistry', () => {
+  let createKeyboardShortcutRegistry
   let coreShortcutsMock
 
   beforeEach(() => {
@@ -16,57 +14,55 @@ describe('keyboardShortcutRegistry', () => {
       coreShortcuts: coreShortcutsMock
     }))
 
-    const module = require('./keyboardShortcutRegistry.js')
-    registerKeyboardShortcut = module.registerKeyboardShortcut
-    setProviderSupportedShortcuts = module.setProviderSupportedShortcuts
-    getKeyboardShortcuts = module.getKeyboardShortcuts
+    createKeyboardShortcutRegistry = require('./keyboardShortcutRegistry.js').createKeyboardShortcutRegistry
   })
 
   test('registerKeyboardShortcut should add a plugin shortcut', () => {
+    const registry = createKeyboardShortcutRegistry()
     const shortcut = { id: 'pluginShortcut', description: 'Plugin Shortcut' }
-    registerKeyboardShortcut({ shortcut }) // Pass { shortcut }
-    const shortcuts = getKeyboardShortcuts()
-    expect(shortcuts).toContain(shortcut)
+    registry.registerKeyboardShortcut({ shortcut })
+    expect(registry.getKeyboardShortcuts()).toContain(shortcut)
   })
 
   test('registerKeyboardShortcut updates an existing shortcut when re-registered with the same id', () => {
+    const registry = createKeyboardShortcutRegistry()
     const shortcut = { id: 'duplicate', description: 'First' }
     const updatedShortcut = { id: 'duplicate', description: 'Second' }
-    registerKeyboardShortcut({ shortcut })
-    registerKeyboardShortcut({ shortcut: updatedShortcut })
-    const shortcuts = getKeyboardShortcuts()
+    registry.registerKeyboardShortcut({ shortcut })
+    registry.registerKeyboardShortcut({ shortcut: updatedShortcut })
+    const shortcuts = registry.getKeyboardShortcuts()
     expect(shortcuts).toContain(updatedShortcut)
     expect(shortcuts).not.toContain(shortcut)
     expect(shortcuts.filter(s => s.id === 'duplicate')).toHaveLength(1)
   })
 
   test('setProviderSupportedShortcuts should filter core shortcuts', () => {
-    setProviderSupportedShortcuts(['copy'])
-    const shortcuts = getKeyboardShortcuts()
-    expect(shortcuts).toEqual([{ id: 'copy', description: 'Copy' }])
+    const registry = createKeyboardShortcutRegistry()
+    registry.setProviderSupportedShortcuts(['copy'])
+    expect(registry.getKeyboardShortcuts()).toEqual([{ id: 'copy', description: 'Copy' }])
   })
 
   test('setProviderSupportedShortcuts with no argument defaults to empty set', () => {
-    setProviderSupportedShortcuts() // no arguments
-    const shortcuts = getKeyboardShortcuts()
-    expect(shortcuts).toEqual([]) // default empty
+    const registry = createKeyboardShortcutRegistry()
+    registry.setProviderSupportedShortcuts() // no ids argument
+    expect(registry.getKeyboardShortcuts()).toEqual([]) // default empty
   })
 
   test('getKeyboardShortcuts should merge core and plugin shortcuts', () => {
-    setProviderSupportedShortcuts(['copy'])
+    const registry = createKeyboardShortcutRegistry()
+    registry.setProviderSupportedShortcuts(['copy'])
     const pluginShortcut = { id: 'plugin', description: 'Plugin' }
-    registerKeyboardShortcut({ shortcut: pluginShortcut })
-    const shortcuts = getKeyboardShortcuts()
-    expect(shortcuts).toEqual([
+    registry.registerKeyboardShortcut({ shortcut: pluginShortcut })
+    expect(registry.getKeyboardShortcuts()).toEqual([
       { id: 'copy', description: 'Copy' },
       pluginShortcut
     ])
   })
 
   test('setProviderSupportedShortcuts with empty array returns no core shortcuts', () => {
-    setProviderSupportedShortcuts([])
-    const shortcuts = getKeyboardShortcuts()
-    expect(shortcuts).toEqual([])
+    const registry = createKeyboardShortcutRegistry()
+    registry.setProviderSupportedShortcuts([])
+    expect(registry.getKeyboardShortcuts()).toEqual([])
   })
 
   test('getKeyboardShortcuts filters by requiredConfig when appConfig provided', () => {
@@ -77,23 +73,44 @@ describe('keyboardShortcutRegistry', () => {
         { id: 'conditional', description: 'Conditional', requiredConfig: ['featureEnabled'] }
       ]
     }))
-    const module = require('./keyboardShortcutRegistry.js')
-    module.setProviderSupportedShortcuts(['always', 'conditional'])
+    const registry = require('./keyboardShortcutRegistry.js').createKeyboardShortcutRegistry()
+    registry.setProviderSupportedShortcuts(['always', 'conditional'])
 
     // Without config, conditional shortcut is excluded
-    expect(module.getKeyboardShortcuts()).toEqual([
+    expect(registry.getKeyboardShortcuts()).toEqual([
       { id: 'always', description: 'Always shown' }
     ])
 
     // With config false, conditional shortcut is excluded
-    expect(module.getKeyboardShortcuts({ featureEnabled: false })).toEqual([
+    expect(registry.getKeyboardShortcuts({ featureEnabled: false })).toEqual([
       { id: 'always', description: 'Always shown' }
     ])
 
     // With config true, conditional shortcut is included
-    expect(module.getKeyboardShortcuts({ featureEnabled: true })).toEqual([
+    expect(registry.getKeyboardShortcuts({ featureEnabled: true })).toEqual([
       { id: 'always', description: 'Always shown' },
       { id: 'conditional', description: 'Conditional', requiredConfig: ['featureEnabled'] }
     ])
   })
+
+  test('two registry instances are fully isolated from each other', () => {
+    // This is the multi-map-on-a-page scenario: a shortcut registered by one map
+    // (e.g. a plugin) must never leak into another map's help panel, and each map's
+    // provider-supported-shortcuts filtering must stay independent.
+    const registryA = createKeyboardShortcutRegistry()
+    const registryB = createKeyboardShortcutRegistry()
+
+    registryA.setProviderSupportedShortcuts(['copy'])
+    registryA.registerKeyboardShortcut({ shortcut: { id: 'onlyOnA', description: 'Only on A' } })
+
+    registryB.setProviderSupportedShortcuts(['paste'])
+
+    expect(registryA.getKeyboardShortcuts()).toEqual([
+      { id: 'copy', description: 'Copy' },
+      { id: 'onlyOnA', description: 'Only on A' }
+    ])
+    expect(registryB.getKeyboardShortcuts()).toEqual([
+      { id: 'paste', description: 'Paste' }
+    ])
+  })
 })

package/src/App/registry/pluginRegistry.js

@@ -1,6 +1,5 @@
 // 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'
 
@@ -12,13 +11,13 @@ 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'))) {
+    if (slot && !allowed.includes(slot) && !(type === 'panel' && slot.endsWith('-button')) && !(type === 'control' && slot.endsWith('-panel'))) {
       logger.warn(`${type} "${item.id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowed.join(', ')}.`)
     }
   })
 }
 
-export function createPluginRegistry ({ registerButton, registerPanel, registerControl }) {
+export function createPluginRegistry ({ registerButton, registerPanel, registerControl, registerKeyboardShortcut }) {
   const registeredPlugins = []
 
   function registerPlugin (plugin) {

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

@@ -5,7 +5,6 @@ jest.mock('./buttonRegistry.js', () => ({ registerButton: jest.fn() }))
 jest.mock('./panelRegistry.js', () => ({ registerPanel: jest.fn() }))
 jest.mock('./controlRegistry.js', () => ({ registerControl: jest.fn() }))
 jest.mock('./iconRegistry.js', () => ({ registerIcon: jest.fn() }))
-jest.mock('./keyboardShortcutRegistry.js', () => ({ registerKeyboardShortcut: jest.fn() }))
 
 describe('pluginRegistry', () => {
   let pluginRegistry
@@ -18,9 +17,11 @@ describe('pluginRegistry', () => {
     registerPanel = require('./panelRegistry.js').registerPanel
     registerControl = require('./controlRegistry.js').registerControl
     registerIcon = require('./iconRegistry.js').registerIcon
-    registerKeyboardShortcut = require('./keyboardShortcutRegistry.js').registerKeyboardShortcut
+    // registerKeyboardShortcut is injected (per-instance registry), not imported from a module —
+    // see keyboardShortcutRegistry.js's createKeyboardShortcutRegistry.
+    registerKeyboardShortcut = jest.fn()
 
-    pluginRegistry = createPluginRegistry({ registerButton, registerPanel, registerControl })
+    pluginRegistry = createPluginRegistry({ registerButton, registerPanel, registerControl, registerKeyboardShortcut })
   })
 
   it('registers plugin and pushes to registeredPlugins', () => {
@@ -170,6 +171,18 @@ describe('pluginRegistry', () => {
       pluginRegistry.registerPlugin(plugin)
       expect(console.warn).not.toHaveBeenCalled()
     })
+
+    it('does not warn for a control targeting a panel-body slot', () => {
+      const plugin = {
+        id: 'inject-plugin',
+        config: {},
+        manifest: {
+          controls: [{ id: 'ctrl1', desktop: { slot: 'map-styles-panel' } }]
+        }
+      }
+      pluginRegistry.registerPlugin(plugin)
+      expect(console.warn).not.toHaveBeenCalled()
+    })
   })
 
   it('clears all registered plugins', () => {

package/src/App/renderer/HtmlElementHost.jsx

@@ -28,6 +28,10 @@ export const getSlotRef = (slot, layoutRefs) => {
     const el = document.querySelector(`[data-button-slot="${slot}"]`)
     return el ? { current: el } : null
   }
+  if (slot?.endsWith('-panel')) {
+    const el = document.querySelector(`[data-panel-slot="${slot}"]`)
+    return el ? { current: el } : null
+  }
 
   return slotRefMap[slot] || null
 }
@@ -37,8 +41,13 @@ export const getSlotRef = (slot, layoutRefs) => {
  * Moves the wrapper into the target slot when visible, hides it otherwise.
  * Depends on breakpoint to handle conditionally rendered slot containers
  * (e.g. the banner slot swaps DOM nodes between mobile and desktop).
+ *
+ * `anchorKey` is an optional extra dependency for anchors that aren't always present in the
+ * DOM — e.g. a `-panel` target only exists while that panel is open — so the projection is
+ * re-attempted whenever it changes, rather than only on mount. Stable/persistent anchors
+ * (named layout slots, `-button` targets) don't need it since they never come and go.
  */
-export const useDomProjection = (wrapperRef, targetSlot, isVisible, layoutRefs, breakpoint) => {
+export const useDomProjection = (wrapperRef, targetSlot, isVisible, layoutRefs, breakpoint, anchorKey) => {
   const layoutRefsRef = useRef(layoutRefs)
   layoutRefsRef.current = layoutRefs
 
@@ -66,7 +75,7 @@ export const useDomProjection = (wrapperRef, targetSlot, isVisible, layoutRefs,
     return () => {
       wrapper.style.display = 'none'
     }
-  }, [isVisible, targetSlot, breakpoint, wrapperRef])
+  }, [isVisible, targetSlot, breakpoint, wrapperRef, anchorKey])
 }
 
 /**
@@ -126,13 +135,17 @@ const PersistentPanel = ({ panelId, config, isOpen, openPanelProps, focusOnOpen,
  */
 const PersistentControl = ({ control, appState }) => {
   const wrapperRef = useRef(null)
-  const { breakpoint, mode, isFullscreen, layoutRefs } = appState
+  const { breakpoint, mode, isFullscreen, layoutRefs, openPanels } = appState
 
   const bpConfig = control[breakpoint]
   const isVisible = isControlVisible(control, { breakpoint, mode, isFullscreen })
   const targetSlot = bpConfig?.slot || null
 
-  useDomProjection(wrapperRef, targetSlot, isVisible, layoutRefs, breakpoint)
+  // A control targeting a panel's body (`<panelId>-panel`) needs its DOM anchor re-resolved
+  // whenever panels open/close, since that anchor only exists while the target panel is open.
+  const anchorKey = targetSlot?.endsWith('-panel') ? Object.keys(openPanels || {}).sort((a, b) => a.localeCompare(b)).join(',') : null
+
+  useDomProjection(wrapperRef, targetSlot, isVisible, layoutRefs, breakpoint, anchorKey)
 
   const innerHtml = useMemo(() => ({ __html: control.html }), [control.html])
 
@@ -174,7 +187,7 @@ export const HtmlElementHost = () => {
       const cfg = panelConfig[panelId]?.[breakpoint]
       return cfg?.modal
     })
-    return modalPanels.length > 0 ? modalPanels[modalPanels.length - 1][0] : null
+    return modalPanels.length > 0 ? modalPanels[modalPanels.length - 1][0] : null // NOSONAR - .at() unsupported on Chrome < 92
   }, [openPanels, panelConfig, breakpoint])
 
   if (!htmlPanels.length && !htmlControls.length) {

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

@@ -313,6 +313,60 @@ describe('HtmlElementHost', () => {
     expect(getSlotRef('nonexistent-button', {})).toBeNull()
   })
 
+  test('getSlotRef returns wrapped element for panel slot when element exists', () => {
+    const el = document.createElement('div')
+    el.dataset.panelSlot = 'map-styles-panel'
+    document.body.appendChild(el)
+    expect(getSlotRef('map-styles-panel', {})).toEqual({ current: el })
+    el.remove()
+  })
+
+  test('getSlotRef returns null for panel slot when no element found', () => {
+    expect(getSlotRef('nonexistent-panel', {})).toBeNull()
+  })
+
+  it('re-attempts DOM projection into a panel-body slot once its anchor appears (panel opens)', () => {
+    const controlConfig = {
+      mapStylesNote: { id: 'mapStylesNote', desktop: { slot: 'map-styles-panel' }, html: '<p>Injected note</p>' }
+    }
+
+    // A real React-rendered node, mimicking the real Panel.jsx body div — present in the DOM
+    // throughout, but only gains the data-panel-slot marker once the panel "opens".
+    const panelBodyRef = React.createRef()
+
+    mockApp({ controlConfig, openPanels: {} })
+    const { rerender } = render(
+      <div>
+        <div ref={panelBodyRef} />
+        <HtmlElementHost />
+      </div>
+    )
+
+    // Anchor isn't marked yet (panel closed) — nothing to project into
+    expect(panelBodyRef.current.querySelector('.im-c-control')).toBeNull()
+
+    // Panel opens: its body anchor is marked, and openPanels changes (two entries, so the
+    // anchorKey sort's localeCompare comparator actually runs)
+    panelBodyRef.current.setAttribute('data-panel-slot', 'map-styles-panel')
+    mockApp({ controlConfig, openPanels: { mapStyles: { props: {} }, other: { props: {} } } })
+    rerender(
+      <div>
+        <div ref={panelBodyRef} />
+        <HtmlElementHost />
+      </div>
+    )
+
+    expect(panelBodyRef.current.querySelector('.im-c-control')).toBeTruthy()
+  })
+
+  it('does not crash a panel-targeting control when appState.openPanels is missing', () => {
+    const controlConfig = {
+      mapStylesNote: { id: 'mapStylesNote', desktop: { slot: 'map-styles-panel' }, html: '<p>Injected note</p>' }
+    }
+    mockApp({ controlConfig, openPanels: undefined })
+    expect(() => render(<HtmlElementHost />)).not.toThrow()
+  })
+
   it('does not append child if slotRef exists but current is null', () => {
     // 1. Setup refs where the slot exists in the map but the DOM node (current) is null
     const incompleteRefs = {

package/src/App/renderer/mapButtons.js

@@ -49,8 +49,7 @@ function getMatchingButtons ({ appState, buttonConfig, slot, evaluateProp }) {
   })
 }
 
-function createButtonClickHandler (btn, appState, evaluateProp) {
-  const [, config] = btn
+function createButtonClickHandler (config, appState, evaluateProp) {
   const isPanelOpen = !!(config.panelId && appState.openPanels[config.panelId])
   const isToggle = config.isPressed !== undefined || !!config.pressedWhen
 
@@ -134,15 +133,33 @@ function applySlotExclusivity (matching, appState) {
   return matching.filter(([_, config]) => config.pluginId === exclusivePluginId)
 }
 
-function renderButton ({ btn, appState, appConfig, evaluateProp }) {
-  const [buttonId, config] = btn
+/**
+ * Builds the props for a <SlotButton>. isHidden/variant are included here (not just derived
+ * inside SlotButton) because Actions.jsx also reads them directly off the 'actions' slot's
+ * immediate children via React.Children.toArray — they need to be top-level props on whatever
+ * element ends up there, not just used internally to build MapButton.
+ */
+const slotButtonProps = ({ buttonId, config, appState, appConfig, evaluateProp }) => ({
+  buttonId,
+  config,
+  appState,
+  appConfig,
+  evaluateProp,
+  isHidden: appState.hiddenButtons.has(buttonId),
+  variant: config.variant
+})
+
+/**
+ * Renders a single button's MapButton element for its slot, computing its click handler
+ * and derived state (panel-open, showLabel fallback, etc.) from its config and appState.
+ */
+function SlotButton ({ buttonId, config, appState, appConfig, evaluateProp }) {
   const bpConfig = config[appState.breakpoint] ?? {}
-  const handleClick = createButtonClickHandler(btn, appState, evaluateProp)
+  const handleClick = createButtonClickHandler(config, appState, evaluateProp)
   const isPanelOpen = !!(config.panelId && appState.openPanels[config.panelId])
 
   return (
     <MapButton
-      key={buttonId}
       buttonId={buttonId}
       iconId={evaluateProp(config.iconId, config.pluginId)}
       iconSvgContent={evaluateProp(config.iconSvgContent, config.pluginId)}
@@ -219,21 +236,20 @@ function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
       id: buttonId,
       type: 'button',
       order,
-      element: renderButton({ btn, appState, appConfig, evaluateProp })
+      element: <SlotButton key={buttonId} {...slotButtonProps({ buttonId, config, appState, appConfig, evaluateProp })} />
     })
   }
 
   for (const [groupName, { label, order: groupOrder, members }] of groupMap) {
     if (members.length < 2) {
       // Singleton group: degrade to a regular button using the group's slot order
-      const btn = members[0]
-      const [buttonId, config] = btn
+      const [buttonId, config] = members[0]
       const order = groupOrder || config[breakpoint]?.order || 0
       result.push({
         id: buttonId,
         type: 'button',
         order,
-        element: renderButton({ btn, appState, appConfig, evaluateProp })
+        element: <SlotButton key={buttonId} {...slotButtonProps({ buttonId, config, appState, appConfig, evaluateProp })} />
       })
       continue
     }
@@ -251,7 +267,7 @@ function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
       order: groupOrder,
       element: (
         <div key={`group-${groupName}`} role='group' aria-label={label} className='im-c-button-group'>{/* NOSONAR - div with role="group" is correct for a button group */}
-          {sorted.map(btn => renderButton({ btn, appState, appConfig, evaluateProp }))}
+          {sorted.map(([buttonId, config]) => <SlotButton key={buttonId} {...slotButtonProps({ buttonId, config, appState, appConfig, evaluateProp })} />)}
         </div>
       )
     })
@@ -264,7 +280,7 @@ export {
   mapButtons,
   getMatchingButtons,
   applySlotExclusivity,
-  renderButton,
+  SlotButton,
   resolveGroupName,
   resolveGroupLabel,
   resolveGroupOrder

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mapButtons, getMatchingButtons, applySlotExclusivity, renderButton, resolveGroupName, resolveGroupLabel, resolveGroupOrder } from './mapButtons.js'
+import { mapButtons, getMatchingButtons, applySlotExclusivity, SlotButton, resolveGroupName, resolveGroupLabel, resolveGroupOrder } from './mapButtons.js'
 import { logger } from '../../services/logger.js'
 import { getPanelConfig } from '../registry/panelRegistry.js'
 
@@ -156,11 +156,11 @@ describe('mapButtons module', () => {
   })
 
   // -------------------------
-  // renderButton tests
+  // SlotButton tests
   // -------------------------
-  describe('renderButton', () => {
+  describe('SlotButton', () => {
     const render = (config, state = appState) =>
-      renderButton({ btn: ['id', config], appState: state, appConfig, evaluateProp })
+      SlotButton({ buttonId: 'id', config, appState: state, appConfig, evaluateProp })
 
     it('renders a MapButton with correct basic props', () => {
       const result = render(baseBtn)
@@ -404,5 +404,18 @@ describe('mapButtons module', () => {
       expect(result).toHaveLength(1)
       expect(result[0].id).toBe('parent')
     })
+
+    // Actions.jsx (the 'actions' slot wrapper) reads isHidden/variant directly off each slot
+    // item's top-level element props via React.Children.toArray — these two guard that contract.
+    it('carries isHidden as a top-level prop on the slot element, not just inside MapButton', () => {
+      appState.buttonConfig = ({ b1: baseBtn })
+      appState.hiddenButtons = new Set(['b1'])
+      expect(map()[0].element.props.isHidden).toBe(true)
+    })
+
+    it('carries variant as a top-level prop on the slot element, not just inside MapButton', () => {
+      appState.buttonConfig = ({ b1: { ...baseBtn, variant: 'touch' } })
+      expect(map()[0].element.props.variant).toBe('touch')
+    })
   })
 })

package/src/App/renderer/mapControls.js

@@ -28,7 +28,9 @@ export function mapControls ({ slot, appState, evaluateProp }) {
         return false
       }
 
-      const slotAllowed = allowedSlots.control.includes(bpConfig.slot)
+      // A control may also target a panel's body directly via the `<panelId>-panel`
+      // slot convention (mirrors the `<buttonId>-button` convention panels already use).
+      const slotAllowed = allowedSlots.control.includes(bpConfig.slot) || bpConfig.slot?.endsWith('-panel')
       const inModeWhitelist = control.includeModes?.includes(mode) ?? true
       const inExcludeModes = control.excludeModes?.includes(mode) ?? false
 

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

@@ -164,4 +164,20 @@ describe('mapControls', () => {
     const result = mapControls({ slot: 'header', appState: defaultAppState, evaluateProp: (p) => p })
     expect(result.map(c => c.id)).toEqual(['ctrl1'])
   })
+
+  it('matches a control targeting a panel-body slot via the <panelId>-panel convention', () => {
+    defaultAppState.controlConfig = ({
+      ctrl1: { id: 'ctrl1', desktop: { slot: 'map-styles-panel', order: 1 }, includeModes: ['view'] }
+    })
+    const result = mapControls({ slot: 'map-styles-panel', appState: defaultAppState, evaluateProp: (p) => p })
+    expect(result.map(c => c.id)).toEqual(['ctrl1'])
+  })
+
+  it('does not match a panel-body-targeting control against an unrelated slot', () => {
+    defaultAppState.controlConfig = ({
+      ctrl1: { id: 'ctrl1', desktop: { slot: 'map-styles-panel', order: 1 }, includeModes: ['view'] }
+    })
+    const result = mapControls({ slot: 'header', appState: defaultAppState, evaluateProp: (p) => p })
+    expect(result).toEqual([])
+  })
 })