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

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([])
+  })
 })

package/src/App/renderer/mapPanels.js

@@ -4,6 +4,10 @@ import { withPluginContexts } from './pluginWrapper.js'
 import { Panel } from '../components/Panel/Panel.jsx'
 import { allowedSlots } from './slots.js'
 import { resolveTargetSlot, isModeAllowed, isConsumerHtml } from './slotHelpers.js'
+import { mapControls } from './mapControls.js'
+import { orderItems } from './orderItems.js'
+import { stringToKebab } from '../../utils/stringToKebab.js'
+import { logger } from '../../services/logger.js'
 
 /**
  * Determines whether a panel should be rendered in the given slot.
@@ -73,13 +77,7 @@ export function mapPanels ({ slot, appState, evaluateProp }) {
     const plugin = pluginRegistry.registeredPlugins.find(p => p.id === config.pluginId)
     const pluginId = plugin?.id
 
-    const WrappedChild = config.render
-      ? withPluginContexts(config.render, {
-        ...props,
-        pluginId,
-        pluginConfig: plugin?.config
-      })
-      : null
+    const html = pluginId ? evaluateProp(config.html, pluginId) : config.html
 
     return {
       id: panelId,
@@ -92,12 +90,49 @@ export function mapPanels ({ slot, appState, evaluateProp }) {
           panelConfig={config}
           props={props}
           focusOnOpen={focusOnOpen}
-          WrappedChild={WrappedChild}
+          items={buildPanelBodyItems({ panelId, config, props, plugin, pluginId, html, appState, evaluateProp })}
           label={evaluateProp(config.label, pluginId)}
-          html={pluginId ? evaluateProp(config.html, pluginId) : config.html}
+          html={html}
         />
       )
     }
   })
     .filter(Boolean)
 }
+
+/**
+ * Builds the ordered list of body items for a panel: its own render content (if any) plus
+ * any controls registered against its `<panelId>-panel` slot by other plugins. Static-html
+ * panels don't build an items list — dangerouslySetInnerHTML can't host injected controls,
+ * so any controls targeting one are silently skipped (with a dev warning).
+ */
+function buildPanelBodyItems ({ panelId, config, props, plugin, pluginId, html, appState, evaluateProp }) {
+  const injectedItems = mapControls({
+    slot: `${stringToKebab(panelId)}-panel`,
+    appState,
+    evaluateProp
+  })
+
+  if (html) {
+    /* istanbul ignore next */
+    if (process.env.NODE_ENV !== 'production' && injectedItems.length > 0) {
+      logger.warn(`Panel "${panelId}" uses static html — controls targeting its slot are not rendered.`)
+    }
+    return undefined
+  }
+
+  if (!config.render) {
+    return injectedItems
+  }
+
+  const WrappedChild = withPluginContexts(config.render, {
+    ...props,
+    pluginId,
+    pluginConfig: plugin?.config
+  })
+
+  return orderItems([
+    { id: panelId, order: 0, element: <WrappedChild {...props} /> },
+    ...injectedItems
+  ])
+}

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

@@ -2,10 +2,14 @@ import React from 'react'
 import { mapPanels } from './mapPanels.js'
 import { registeredPlugins } from '../registry/pluginRegistry.js'
 import { withPluginContexts } from './pluginWrapper.js'
+import { mapControls } from './mapControls.js'
+import { logger } from '../../services/logger.js'
 
+jest.mock('../../services/logger.js')
 jest.mock('../registry/panelRegistry.js')
 jest.mock('../registry/pluginRegistry.js', () => ({ registeredPlugins: [] }))
 jest.mock('./pluginWrapper.js', () => ({ withPluginContexts: jest.fn((c) => c) }))
+jest.mock('./mapControls.js', () => ({ mapControls: jest.fn(() => []) }))
 jest.mock('../components/Panel/Panel.jsx', () => ({ Panel: (props) => <div data-testid='panel' {...props} /> }))
 jest.mock('./slots.js', () => ({ allowedSlots: { panel: ['header', 'modal', 'left-top'] } }))
 
@@ -23,6 +27,7 @@ describe('mapPanels', () => {
 
   beforeEach(() => {
     jest.clearAllMocks()
+    mapControls.mockReturnValue([])
     registeredPlugins.length = 0
     defaultAppState = {
       breakpoint: 'desktop',
@@ -116,9 +121,53 @@ describe('mapPanels', () => {
     )
   })
 
-  it('sets WrappedChild null if no render function', () => {
+  it('builds an empty items list if there is no render function and no injected controls', () => {
     const result = map()
-    expect(result[0].element.props.WrappedChild).toBeNull()
+    expect(result[0].element.props.items).toEqual([])
+  })
+
+  it('builds a single-item items list for a panel with its own render content', () => {
+    const renderFn = () => <div>child</div>
+    defaultAppState.panelConfig = ({ p1: { ...baseConfig, render: renderFn } })
+    const result = map()
+    expect(result[0].element.props.items).toEqual([
+      { id: 'p1', order: 0, element: expect.anything() }
+    ])
+  })
+
+  it('requests injected controls using the <panelId>-panel slot convention', () => {
+    map()
+    expect(mapControls).toHaveBeenCalledWith(expect.objectContaining({ slot: 'p1-panel' }))
+  })
+
+  it('merges and orders the panel\'s own content with controls injected via mapControls', () => {
+    const renderFn = () => <div>child</div>
+    mapControls.mockReturnValue([{ id: 'injected1', order: 1, element: <span>injected</span> }])
+    defaultAppState.panelConfig = ({ p1: { ...baseConfig, render: renderFn } })
+    const result = map()
+    // injected1 has order 1, so it's spliced ahead of the panel's own (unordered) content
+    expect(result[0].element.props.items.map(i => i.id)).toEqual(['injected1', 'p1'])
+  })
+
+  it('returns just the injected controls when the panel has neither render nor html', () => {
+    mapControls.mockReturnValue([{ id: 'injected1', order: 0, element: <span>injected</span> }])
+    defaultAppState.panelConfig = ({ p1: { desktop: { slot: 'header' }, includeModes: ['view'] } })
+    const result = map()
+    expect(result[0].element.props.items.map(i => i.id)).toEqual(['injected1'])
+  })
+
+  it('does not build an items list for a static-html panel (dangerouslySetInnerHTML can\'t host injected controls)', () => {
+    defaultAppState.panelConfig = ({ p1: { desktop: { slot: 'header' }, includeModes: ['view'], pluginId: 'plug1', html: '<p>Hi</p>' } })
+    const result = map()
+    expect(result[0].element.props.items).toBeUndefined()
+    expect(result[0].element.props.html).toBe('<p>Hi</p>')
+  })
+
+  it('warns in dev when controls target a static-html panel', () => {
+    mapControls.mockReturnValue([{ id: 'injected1', order: 0, element: <span>injected</span> }])
+    defaultAppState.panelConfig = ({ p1: { desktop: { slot: 'header' }, includeModes: ['view'], pluginId: 'plug1', html: '<p>Hi</p>' } })
+    map()
+    expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('p1'))
   })
 
   it('returns correct structure and defaults', () => {

package/src/App/renderer/orderItems.js

@@ -0,0 +1,28 @@
+// src/core/renderers/orderItems.js
+
+/**
+ * Orders a list of `{ id, order, element }` items for a single render target
+ * (a layout slot, or a panel body).
+ *
+ * Items without an explicit `order` (or `order === 0`) keep their natural/registration
+ * sequence. Items with an explicit `order` are spliced into that 1-based position among
+ * the unordered items, clamped to the valid range.
+ */
+export function orderItems (items) {
+  // Start with items that have no explicit order (in their natural sequence)
+  const withoutOrder = items.filter(item => item.order == null || item.order === 0)
+  const withOrder = items.filter(item => item.order != null && item.order !== 0)
+
+  // Sort items with order by their order value (stable sort preserves ties)
+  withOrder.sort((a, b) => a.order - b.order)
+
+  // Insert each ordered item at its specified position
+  const result = [...withoutOrder]
+  for (const item of withOrder) {
+    // Clamp position to valid range (1-based, so subtract 1 for array index)
+    const pos = Math.min(Math.max(item.order - 1, 0), result.length)
+    result.splice(pos, 0, item)
+  }
+
+  return result
+}

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

@@ -0,0 +1,50 @@
+import { orderItems } from './orderItems.js'
+
+describe('orderItems', () => {
+  it('keeps unordered items in their natural sequence', () => {
+    const items = [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['a', 'b', 'c'])
+  })
+
+  it('treats order 0 the same as no order', () => {
+    const items = [{ id: 'a', order: 0 }, { id: 'b' }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['a', 'b'])
+  })
+
+  it('inserts an ordered item at its 1-based position among unordered items', () => {
+    const items = [{ id: 'a' }, { id: 'b' }, { id: 'c', order: 1 }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['c', 'a', 'b'])
+  })
+
+  it('splices ordered items in ascending order, each relative to the growing result', () => {
+    const items = [
+      { id: 'a' },
+      { id: 'b', order: 2 },
+      { id: 'c', order: 1 }
+    ]
+    // c (order 1) is spliced in first, ahead of 'a': [c, a]
+    // b (order 2) is then spliced at index 1 of that 2-item result: [c, b, a]
+    expect(orderItems(items).map(i => i.id)).toEqual(['c', 'b', 'a'])
+  })
+
+  it('clamps an order larger than the list to the end', () => {
+    const items = [{ id: 'a' }, { id: 'b' }, { id: 'c', order: 99 }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['a', 'b', 'c'])
+  })
+
+  it('splices equal-order items each at position 0, reversing their relative order', () => {
+    // The stable sort keeps a before b, but with no unordered items to anchor against,
+    // each splice(0, 0, item) inserts ahead of the previous one.
+    const items = [{ id: 'a', order: 1 }, { id: 'b', order: 1 }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['b', 'a'])
+  })
+
+  it('handles an all-ordered list', () => {
+    const items = [{ id: 'a', order: 2 }, { id: 'b', order: 1 }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['b', 'a'])
+  })
+
+  it('handles an empty list', () => {
+    expect(orderItems([])).toEqual([])
+  })
+})

package/src/App/renderer/slotAggregator.js

@@ -2,28 +2,12 @@
 import { mapControls } from './mapControls.js'
 import { mapPanels } from './mapPanels.js'
 import { mapButtons } from './mapButtons.js'
+import { orderItems } from './orderItems.js'
 
 export function getSlotItems ({ evaluateProp, ...args }) {
   const controls = mapControls({ evaluateProp, ...args })
   const panels = mapPanels({ evaluateProp, ...args })
   const buttons = mapButtons({ evaluateProp, ...args })
 
-  const items = [...controls, ...panels, ...buttons]
-
-  // Start with items that have no explicit order (in their natural sequence)
-  const withoutOrder = items.filter(item => item.order == null || item.order === 0)
-  const withOrder = items.filter(item => item.order != null && item.order !== 0)
-
-  // Sort items with order by their order value (stable sort preserves ties)
-  withOrder.sort((a, b) => a.order - b.order)
-
-  // Insert each ordered item at its specified position
-  const result = [...withoutOrder]
-  for (const item of withOrder) {
-    // Clamp position to valid range (1-based, so subtract 1 for array index)
-    const pos = Math.min(Math.max(item.order - 1, 0), result.length)
-    result.splice(pos, 0, item)
-  }
-
-  return result
+  return orderItems([...controls, ...panels, ...buttons])
 }

package/src/App/renderer/slotHelpers.js

@@ -39,7 +39,9 @@ export const isControlVisible = (control, { breakpoint, mode, isFullscreen }) =>
   if (!bpConfig) {
     return false
   }
-  if (!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).
+  if (!allowedSlots.control.includes(bpConfig.slot) && !bpConfig.slot?.endsWith('-panel')) {
     return false
   }
   if (!isModeAllowed(control, mode)) {

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

@@ -65,6 +65,11 @@ describe('isControlVisible', () => {
   it('returns true when inline:false and fullscreen', () => {
     expect(isControlVisible({ ...base, inline: false }, { breakpoint: 'desktop', mode: 'view', isFullscreen: true })).toBe(true)
   })
+
+  it('returns true for a control targeting a panel-body slot via the <panelId>-panel convention', () => {
+    const panelTargeting = { desktop: { slot: 'map-styles-panel' } }
+    expect(isControlVisible(panelTargeting, { breakpoint: 'desktop', mode: 'view', isFullscreen: false })).toBe(true)
+  })
 })
 
 describe('isConsumerHtml', () => {

package/src/App/renderer/slots.js

@@ -1,6 +1,7 @@
 // src/core/renderers/slots.js
 export const layoutSlots = Object.freeze({
   SIDE: 'side',
+  HEADER: 'header',
   BANNER: 'banner',
   TOP_LEFT: 'top-left',
   TOP_MIDDLE: 'top-middle',
@@ -19,6 +20,7 @@ export const layoutSlots = Object.freeze({
 
 export const allowedSlots = Object.freeze({
   control: [
+    layoutSlots.HEADER,
     layoutSlots.BANNER,
     layoutSlots.TOP_LEFT,
     layoutSlots.TOP_RIGHT,
@@ -31,6 +33,7 @@ export const allowedSlots = Object.freeze({
   ],
   panel: [
     layoutSlots.SIDE,
+    layoutSlots.HEADER,
     layoutSlots.BANNER,
     layoutSlots.LEFT_TOP,
     layoutSlots.LEFT_BOTTOM,

package/src/App/store/AppProvider.jsx

@@ -16,6 +16,7 @@ export const AppProvider = ({ options, children }) => {
     appContainerRef: useRef(null),
     sideRef: useRef(null),
     mainRef: useRef(null),
+    headerRef: useRef(null),
     topRef: useRef(null),
     topLeftColRef: useRef(null),
     topRightColRef: useRef(null),

package/src/App/store/appDispatchMiddleware.js

@@ -101,7 +101,7 @@ export function handleActionSideEffects (action, previousState, panelConfig, eve
     const mergedConfig = deepMerge(defaultControlConfig, config)
     BREAKPOINTS.forEach(bp => {
       const slot = mergedConfig[bp]?.slot
-      if (slot && !allowedSlots.control.includes(slot)) {
+      if (slot && !allowedSlots.control.includes(slot) && !slot.endsWith('-panel')) {
         logger.warn(`control "${id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowedSlots.control.join(', ')}.`)
       }
     })

package/src/App/store/appDispatchMiddleware.test.js

@@ -185,6 +185,14 @@ describe('ADD_CONTROL', () => {
     )
     expect(console.warn).not.toHaveBeenCalled()
   })
+
+  it('does not warn for a control targeting a panel-body slot', () => {
+    run(
+      { type: 'ADD_CONTROL', payload: { id: 'myCtrl', config: { desktop: { slot: 'map-styles-panel' } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).not.toHaveBeenCalled()
+  })
 })
 
 describe('ADD_PANEL', () => {

package/src/config/events.js

@@ -147,6 +147,8 @@ export const EVENTS = {
   MAP_SET_SIZE: 'map:setsize',
   /** @internal Set the accessible features list. Payload: { items: { id: string, label: string }[] } */
   MAP_SET_FEATURES: 'map:setfeatures',
+  /** @internal Suppress/restore the accessible features list. Payload: { suppressed: boolean } */
+  MAP_SET_FEATURES_SUPPRESSED: 'map:setfeaturessuppressed',
   /** @internal Set the active feature in the accessible features list. Payload: { id: string | null } */
   MAP_SET_ACTIVE_FEATURE: 'map:setactivefeature',
   /** @internal Select the active listbox feature as the real selection (Enter key). Payload: none */

package/src/scss/settings/_colors.scss

@@ -26,6 +26,7 @@
     // Tooltips
     --tooltip-background-color: #383F43;
     --tooltip-foreground-color: #ffffff;
+    --tooltip-hover-color: #505a5f;
 
     // Modals
     --modal-background-color: #0b0c0c;

package/src/scss/settings/_dimensions.scss

@@ -39,9 +39,8 @@
     --panel-close-button-gap: 4px;
     --panel-heading-margin-top: 12px;
     --panel-margin: 15px;
-    --banner-close-button-gap: 0px;
-    --banner-max-desktop-width: 400px;
-    --banner-collapse-margin: 14px;
+    --banner-preferred-width: 280px; // Docked max-width, and the gutter threshold JS docks/stacks against
+    --banner-border-radius: 0px; // Styled like a hint, not a panel
 
     // Popup menu
     --popup-menu-min-width: 200px;

package/src/scss/settings/_transition.scss

@@ -1,3 +1,3 @@
 :root {
-    --duration: 0.2s;
+    --duration: 0s;
 }

package/src/services/eventBus.js

@@ -108,6 +108,50 @@ class EventBus {
     return this.emit(eventName, ...args)
   }
 
+  /**
+   * Like `emit`, but also registers a listener for the corresponding `Required` event.
+   *
+   * Use this for events that may be requested before or after the emitter side is ready
+   * e.g. called from plugins that require a state reference from a different plugin like this:
+   * const removeRegistryListener = eventBus.emitWhenRequested('datasets:registry', datasetRegistry)
+   *
+   * @param {string} eventName
+   * @param {...*} args
+   * @returns {Function} A function to remove the listener for the `Required` event.
+   */
+  emitWhenRequested (eventName, ...args) {
+    const eventRequestedName = `${eventName}Requested`
+    const eventReadyName = `${eventName}Ready`
+    const handleOnRequired = () => this.emit(eventReadyName, ...args)
+    // Add a listener that will emit the event whenever requested
+    this.on(eventRequestedName, handleOnRequired)
+    // Also emit the event immediately, in case a listener is already waiting for it
+    handleOnRequired()
+    return () => this.off(eventRequestedName, handleOnRequired)
+  }
+
+  /**
+   * Like `emit`, but appends `Requested` to the event.
+   * used for events that require a response from another plugin,
+   * e.g. `datasets:registryRequested` will be emitted by the menu plugin,
+   * via `eventBus.requestOnce('datasets:registry')`, and the datasets plugin will respond with `datasets:registryReady`.
+   * and the datasets plugin will respond with `datasets:registryReady`.
+   * via `eventBus.emitWhenRequested('datasets:registry', datasetRegistry)`.
+   *
+   * @param {string} eventName
+   * @param {Function} eventHandler
+   * @returns {this}
+   */
+  requestOnce (eventName, eventHandler) {
+    const eventRequestedName = `${eventName}Requested`
+    const eventReadyName = `${eventName}Ready`
+    // Note - must register the once listener before emitting the requested event,
+    // otherwise the event won't emit, as there are no listeners yet.
+    this.once(eventReadyName, eventHandler)
+    this.emit(eventRequestedName, eventName)
+    return this
+  }
+
   /**
    * Remove all handlers and clear any queued events.
    */