@defra/interactive-map 0.0.43-fmp-experimental → 0.0.44-alpha

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

@@ -0,0 +1,218 @@
+import { createSpatialListRegistry } from './spatialListRegistry.js'
+
+const SET_FEATURES = 'map:setspatiallist'
+
+const makeEventBus = () => ({ emit: jest.fn() })
+
+const lastEmit = (eventBus) => eventBus.emit.mock.calls.at(-1)[1]
+
+describe('createSpatialListRegistry', () => {
+  test('registering a provider recomputes and emits its items immediately', () => {
+    const eventBus = makeEventBus()
+    const registry = createSpatialListRegistry({ eventBus })
+    registry.registerItemProvider('a', { getItems: () => ({ items: [{ id: '1' }], multiselectable: false }) })
+    expect(eventBus.emit).toHaveBeenCalledWith(SET_FEATURES, { items: [{ id: '1' }], multiselectable: false })
+  })
+
+  test('concatenates items from every registered provider when no exclusive claim is held', () => {
+    const eventBus = makeEventBus()
+    const registry = createSpatialListRegistry({ eventBus })
+    registry.registerItemProvider('a', { getItems: () => ({ items: [{ id: '1' }] }) })
+    registry.registerItemProvider('b', { getItems: () => ({ items: [{ id: '2' }] }) })
+    expect(lastEmit(eventBus)).toEqual({ items: [{ id: '1' }, { id: '2' }], multiselectable: false })
+  })
+
+  test('multiselectable is true if any additive provider wants it', () => {
+    const eventBus = makeEventBus()
+    const registry = createSpatialListRegistry({ eventBus })
+    registry.registerItemProvider('a', { getItems: () => ({ items: [], multiselectable: false }) })
+    registry.registerItemProvider('b', { getItems: () => ({ items: [], multiselectable: true }) })
+    expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: true })
+  })
+
+  test('getItems is called fresh on every recompute, not snapshotted at registration', () => {
+    const eventBus = makeEventBus()
+    const registry = createSpatialListRegistry({ eventBus })
+    let current = [{ id: 'first' }]
+    registry.registerItemProvider('a', { getItems: () => ({ items: current }) })
+    expect(lastEmit(eventBus)).toEqual({ items: [{ id: 'first' }], multiselectable: false })
+
+    current = [{ id: 'second' }]
+    registry.notifyItemsChanged('a')
+    expect(lastEmit(eventBus)).toEqual({ items: [{ id: 'second' }], multiselectable: false })
+  })
+
+  test('unregistering a provider removes its items from the next recompute', () => {
+    const eventBus = makeEventBus()
+    const registry = createSpatialListRegistry({ eventBus })
+    registry.registerItemProvider('a', { getItems: () => ({ items: [{ id: '1' }] }) })
+    registry.registerItemProvider('b', { getItems: () => ({ items: [{ id: '2' }] }) })
+    registry.unregisterItemProvider('a')
+    expect(lastEmit(eventBus)).toEqual({ items: [{ id: '2' }], multiselectable: false })
+  })
+
+  test('notifyItemsChanged for an unregistered id is a no-op', () => {
+    const eventBus = makeEventBus()
+    const registry = createSpatialListRegistry({ eventBus })
+    registry.notifyItemsChanged('ghost')
+    expect(eventBus.emit).not.toHaveBeenCalled()
+  })
+
+  describe('exclusive claims', () => {
+    test('claiming exclusive ownership excludes every other provider\'s items', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('interact', { getItems: () => ({ items: [{ id: 'feature-1' }] }) })
+      registry.registerItemProvider('draw', { getItems: () => ({ items: [{ id: 'vertex-1' }] }), exclusive: true })
+
+      registry.claimExclusive('draw')
+      expect(lastEmit(eventBus)).toEqual({ items: [{ id: 'vertex-1' }], multiselectable: false })
+    })
+
+    test('releasing the exclusive claim reverts to the additive merge of everyone else', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('interact', { getItems: () => ({ items: [{ id: 'feature-1' }] }) })
+      registry.registerItemProvider('draw', { getItems: () => ({ items: [{ id: 'vertex-1' }] }), exclusive: true })
+      registry.claimExclusive('draw')
+
+      registry.releaseExclusive('draw')
+      expect(lastEmit(eventBus)).toEqual({ items: [{ id: 'feature-1' }], multiselectable: false })
+    })
+
+    test('releaseExclusive from a provider that does not currently hold the claim is a no-op', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('interact', { getItems: () => ({ items: [{ id: 'feature-1' }] }) })
+      eventBus.emit.mockClear()
+
+      registry.releaseExclusive('draw') // never claimed it
+      expect(eventBus.emit).not.toHaveBeenCalled()
+    })
+
+    test('a non-exclusive-owning provider\'s own changes are ignored while someone else holds the claim', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      let interactItems = [{ id: 'feature-1' }]
+      registry.registerItemProvider('interact', { getItems: () => ({ items: interactItems }) })
+      registry.registerItemProvider('draw', { getItems: () => ({ items: [{ id: 'vertex-1' }] }), exclusive: true })
+      registry.claimExclusive('draw')
+      eventBus.emit.mockClear()
+
+      interactItems = [{ id: 'feature-2' }] // changed while draw holds exclusive ownership
+      registry.notifyItemsChanged('interact')
+      expect(eventBus.emit).not.toHaveBeenCalled()
+    })
+
+    test('unregistering the current exclusive owner clears the claim and reverts to additive', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('interact', { getItems: () => ({ items: [{ id: 'feature-1' }] }) })
+      registry.registerItemProvider('draw', { getItems: () => ({ items: [{ id: 'vertex-1' }] }), exclusive: true })
+      registry.claimExclusive('draw')
+
+      registry.unregisterItemProvider('draw')
+      expect(lastEmit(eventBus)).toEqual({ items: [{ id: 'feature-1' }], multiselectable: false })
+    })
+  })
+
+  describe('label', () => {
+    test('passes through the exclusive claimant\'s own label while its claim is held', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('interact', { getItems: () => ({ items: [], label: 'Map features' }) })
+      registry.registerItemProvider('draw', { getItems: () => ({ items: [], label: 'Shape points' }), exclusive: true })
+
+      registry.claimExclusive('draw')
+      expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false, label: 'Shape points' })
+    })
+
+    test('uses the first additive provider\'s label (in registration order) when more than one contributes', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('a', { getItems: () => ({ items: [], label: 'First' }) })
+      registry.registerItemProvider('b', { getItems: () => ({ items: [], label: 'Second' }) })
+      expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false, label: 'First' })
+    })
+
+    test('falls back to a later provider\'s label when an earlier one declares none', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('a', { getItems: () => ({ items: [] }) }) // no label
+      registry.registerItemProvider('b', { getItems: () => ({ items: [], label: 'Second' }) })
+      expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false, label: 'Second' })
+    })
+
+    test('label is undefined when nothing is registered', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('a', { getItems: () => ({ items: [] }) })
+      expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false })
+    })
+  })
+
+  describe('focusable', () => {
+    test('passes through the exclusive claimant\'s own focusable: false while its claim is held', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('interact', { getItems: () => ({ items: [] }) }) // focusable defaults true
+      registry.registerItemProvider('draw', { getItems: () => ({ items: [], focusable: false }), exclusive: true })
+
+      registry.claimExclusive('draw')
+      expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false, focusable: false })
+    })
+
+    test('reverts to undefined (consumer default: focusable) once the claim is released', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('interact', { getItems: () => ({ items: [] }) })
+      registry.registerItemProvider('draw', { getItems: () => ({ items: [], focusable: false }), exclusive: true })
+      registry.claimExclusive('draw')
+
+      registry.releaseExclusive('draw')
+      expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false })
+    })
+
+    test('uses the first additive provider\'s explicit focusable value when more than one contributes', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('a', { getItems: () => ({ items: [] }) }) // no explicit value
+      registry.registerItemProvider('b', { getItems: () => ({ items: [], focusable: false }) })
+      expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false, focusable: false })
+    })
+
+    test('focusable is undefined when nothing declares it', () => {
+      const eventBus = makeEventBus()
+      const registry = createSpatialListRegistry({ eventBus })
+      registry.registerItemProvider('a', { getItems: () => ({ items: [] }) })
+      expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false })
+    })
+  })
+
+  test('clear removes every provider and any exclusive claim', () => {
+    const eventBus = makeEventBus()
+    const registry = createSpatialListRegistry({ eventBus })
+    registry.registerItemProvider('a', { getItems: () => ({ items: [{ id: '1' }] }), exclusive: true })
+    registry.claimExclusive('a')
+
+    registry.clear()
+    eventBus.emit.mockClear()
+    registry.notifyItemsChanged('a') // 'a' is no longer registered
+    expect(eventBus.emit).not.toHaveBeenCalled()
+  })
+
+  test('a provider whose getItems returns nothing contributes no items and does not throw', () => {
+    const eventBus = makeEventBus()
+    const registry = createSpatialListRegistry({ eventBus })
+    expect(() => registry.registerItemProvider('a', { getItems: () => undefined })).not.toThrow()
+    expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false })
+  })
+
+  test('an exclusive provider whose getItems returns nothing contributes no items while holding the claim', () => {
+    const eventBus = makeEventBus()
+    const registry = createSpatialListRegistry({ eventBus })
+    registry.registerItemProvider('draw', { getItems: () => undefined, exclusive: true })
+    expect(() => registry.claimExclusive('draw')).not.toThrow()
+    expect(lastEmit(eventBus)).toEqual({ items: [], multiselectable: false })
+  })
+})

package/src/App/renderer/HtmlElementHost.jsx

@@ -2,8 +2,7 @@
 import React, { useRef, useLayoutEffect, useMemo } from 'react'
 import { useApp } from '../store/appContext.js'
 import { Panel } from '../components/Panel/Panel.jsx'
-import { resolveTargetSlot, isModeAllowed, isControlVisible, isConsumerHtml } from './slotHelpers.js'
-import { allowedSlots } from './slots.js'
+import { resolveTargetSlot, isControlVisible, isConsumerHtml, isPanelSlotEligible, getAllowedModalPanelId } from './slotHelpers.js'
 
 /**
  * Maps slot names to their corresponding layout refs.
@@ -90,28 +89,13 @@ const PersistentPanel = ({ panelId, config, isOpen, openPanelProps, focusOnOpen,
   const bpConfig = config[breakpoint]
   const targetSlot = bpConfig ? resolveTargetSlot(bpConfig, breakpoint) : null
 
-  // Determine visibility using the same logic as mapPanels
-  const isVisible = (() => {
-    // 1. Initial Guard: Basic requirements
-    if (!isOpen || !bpConfig || !targetSlot) {
-      return false
-    }
-
-    // 2. Slot Validation
-    const isNextToButton = targetSlot.endsWith('-button')
-    const isSlotAllowed = allowedSlots.panel.includes(targetSlot) || isNextToButton
-
-    if (!isSlotAllowed) {
-      return false
-    }
-
-    // 3. Business Logic: Combine remaining conditions into a single "fail" check
-    const isForbiddenModal = bpConfig.modal && panelId !== allowedModalPanelId
-    const isForbiddenInline = config.inline === false && !isFullscreen
-    const isInvalidMode = !isModeAllowed(config, mode)
-
-    return !(isForbiddenModal || isForbiddenInline || isInvalidMode)
-  })()
+  // Same eligibility/modal-exclusivity rules as mapPanels.js (see slotHelpers.js), combined into
+  // one boolean since isVisible alone decides whether useDomProjection shows it.
+  const isVisible = Boolean(
+    isOpen && bpConfig && targetSlot &&
+    isPanelSlotEligible(config, { targetSlot, mode, isFullscreen }) &&
+    (!bpConfig.modal || panelId === allowedModalPanelId)
+  )
 
   useDomProjection(panelRootRef, targetSlot, isVisible, layoutRefs, breakpoint)
 
@@ -181,14 +165,10 @@ export const HtmlElementHost = () => {
   )
 
   // Determine which modal panel is allowed (topmost open modal)
-  const allowedModalPanelId = useMemo(() => {
-    const openPanelEntries = Object.entries(openPanels)
-    const modalPanels = openPanelEntries.filter(([panelId]) => {
-      const cfg = panelConfig[panelId]?.[breakpoint]
-      return cfg?.modal
-    })
-    return modalPanels.length > 0 ? modalPanels[modalPanels.length - 1][0] : null // NOSONAR - .at() unsupported on Chrome < 92
-  }, [openPanels, panelConfig, breakpoint])
+  const allowedModalPanelId = useMemo(
+    () => getAllowedModalPanelId(openPanels, panelConfig, breakpoint),
+    [openPanels, panelConfig, breakpoint]
+  )
 
   if (!htmlPanels.length && !htmlControls.length) {
     return null

package/src/App/renderer/mapButtons.js

@@ -3,6 +3,7 @@ import { MapButton } from '../components/MapButton/MapButton.jsx'
 import { allowedSlots } from './slots.js'
 import { groupByKey } from './groupByKey.js'
 import { orderItems } from './orderItems.js'
+import { classifyPanel, getPanelRole } from '../../utils/getPanelRole.js'
 import { logger } from '../../services/logger.js'
 
 function getMatchingButtons ({ appState, buttonConfig, slot, evaluateProp }) {
@@ -118,6 +119,8 @@ function SlotButton ({ buttonId, config, appState, appConfig, evaluateProp }) {
   const bpConfig = config[appState.breakpoint] ?? {}
   const handleClick = createButtonClickHandler(config, appState, evaluateProp)
   const isPanelOpen = !!(config.panelId && appState.openPanels[config.panelId])
+  const panelBpConfig = config.panelId ? appState.panelConfig?.[config.panelId]?.[appState.breakpoint] : undefined
+  const panelRole = panelBpConfig ? getPanelRole(classifyPanel(panelBpConfig)) : undefined
 
   return (
     <MapButton
@@ -133,6 +136,7 @@ function SlotButton ({ buttonId, config, appState, appConfig, evaluateProp }) {
       isPressed={(config.isPressed !== undefined || config.pressedWhen) ? appState.pressedButtons.has(buttonId) : undefined}
       isExpanded={(config.isExpanded !== undefined || config.expandedWhen) ? appState.expandedButtons.has(buttonId) : undefined}
       isPanelOpen={isPanelOpen}
+      panelRole={panelRole}
       onClick={handleClick}
       panelId={config.panelId}
       menuItems={config.menuItems}

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

@@ -170,6 +170,26 @@ describe('mapButtons module', () => {
       expect(result.props).toMatchObject({ isDisabled: true, isHidden: true, isPressed: true, isExpanded: true })
     })
 
+    it.each([
+      [{ slot: 'right-top', open: false }, 'dialog'],
+      [{ slot: 'right-top', open: false, dismissible: false }, 'region'],
+      [{ slot: 'side', open: true }, 'complementary']
+    ])('derives panelRole %j -> %s from the target panel\'s breakpoint config', (panelBpConfig, expectedRole) => {
+      const state = { ...appState, panelConfig: { p1: { desktop: panelBpConfig } } }
+      const result = render({ ...baseBtn, panelId: 'p1' }, state)
+      expect(result.props.panelRole).toBe(expectedRole)
+    })
+
+    it('leaves panelRole undefined when the button has no panelId', () => {
+      const result = render(baseBtn)
+      expect(result.props.panelRole).toBeUndefined()
+    })
+
+    it('leaves panelRole undefined when the target panel has no config at this breakpoint', () => {
+      const result = render({ ...baseBtn, panelId: 'missing' })
+      expect(result.props.panelRole).toBeUndefined()
+    })
+
     it('uses empty object fallback for missing breakpoint config', () => {
       const result = render(baseBtn, { ...appState, breakpoint: 'mobile' })
       expect(result.props.showLabel).toBe(true)

package/src/App/renderer/mapPanels.js

@@ -2,8 +2,7 @@
 import React from 'react'
 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 { resolveTargetSlot, isConsumerHtml, isPanelSlotEligible, getAllowedModalPanelId } from './slotHelpers.js'
 import { mapControls } from './mapControls.js'
 import { orderItems } from './orderItems.js'
 import { groupIntoTabs } from './groupIntoTabs.js'
@@ -11,69 +10,49 @@ import { stringToKebab } from '../../utils/stringToKebab.js'
 import { logger } from '../../services/logger.js'
 
 /**
- * Determines whether a panel should be rendered in the given slot.
- * Checks slot eligibility, mode restrictions, inline/fullscreen constraints,
- * and ensures only the topmost modal panel is shown.
+ * Maps every configured panel eligible for the given layout slot to a renderable entry — open or
+ * closed alike, so a button's aria-controls id always resolves to a stable, permanently-mounted
+ * <Panel> (hidden when closed). buildPanelBody only runs while open, so nothing expensive mounts
+ * before then.
  */
-const isPanelVisible = (panelId, config, bpConfig, { targetSlot, slot, mode, isFullscreen, allowedModalPanelId }) => {
-  const isNextToButton = targetSlot.endsWith('-button')
-  if (!allowedSlots.panel.includes(targetSlot) && !isNextToButton) {
-    return false
+// Consumer HTML panels are managed by HtmlElementHost; the rest need a breakpoint config and to
+// be eligible for this slot. Returns null (skip) or the pieces the caller needs.
+const getEligiblePanelConfig = (panelId, panelConfig, breakpoint, { slot, mode, isFullscreen }) => {
+  const config = panelConfig[panelId]
+  if (!config || isConsumerHtml(config)) {
+    return null
   }
-  if (!isModeAllowed(config, mode)) {
-    return false
+  const bpConfig = config[breakpoint]
+  if (!bpConfig) {
+    return null
   }
-  if (config.inline === false && !isFullscreen) {
-    return false
+  const targetSlot = resolveTargetSlot(bpConfig, breakpoint)
+  if (!isPanelSlotEligible(config, { targetSlot, slot, mode, isFullscreen })) {
+    return null
   }
-  if (targetSlot !== slot) {
-    return false
-  }
-  if (bpConfig.modal && panelId !== allowedModalPanelId) {
-    return false
-  }
-  return true
+  return { config, bpConfig }
 }
 
-/**
- * Maps open panels to renderable entries for a given layout slot.
- * Filters panels by slot, breakpoint, mode, and modal state, then wraps
- * each panel's render function with the appropriate plugin contexts.
- */
+// A losing modal panel (see getAllowedModalPanelId) still gets a shell — it's just not open.
+const resolveIsOpen = (openEntry, bpConfig, panelId, allowedModalPanelId) =>
+  Boolean(openEntry) && (!bpConfig.modal || panelId === allowedModalPanelId)
+
 export function mapPanels ({ slot, appState, evaluateProp }) {
   const { breakpoint, pluginRegistry, panelConfig, mode, openPanels } = appState
 
-  const openPanelEntries = Object.entries(openPanels)
-
-  const modalPanels = openPanelEntries.filter(([panelId]) => {
-    const cfg = panelConfig[panelId]?.[breakpoint]
-    return cfg?.modal
-  })
-  const allowedModalPanelId = modalPanels.length > 0 ? modalPanels[modalPanels.length - 1][0] : null // NOSONAR, .at() is only Chrome 90+
-
-  return openPanelEntries.map(([panelId, { props, focusOnOpen }]) => {
-    const config = panelConfig[panelId]
-    if (!config) {
-      return null
-    }
-
-    // Consumer HTML panels are managed by HtmlElementHost
-    if (isConsumerHtml(config)) {
-      return null
-    }
+  // Only the most-recently-opened modal panel is ever actually shown — see isOpen below.
+  const allowedModalPanelId = getAllowedModalPanelId(openPanels, panelConfig, breakpoint)
 
-    const bpConfig = config[breakpoint]
-    if (!bpConfig) {
+  return Object.keys(panelConfig).map((panelId) => {
+    const eligible = getEligiblePanelConfig(panelId, panelConfig, breakpoint, { slot, mode, isFullscreen: appState.isFullscreen })
+    if (!eligible) {
       return null
     }
+    const { config, bpConfig } = eligible
 
-    const targetSlot = resolveTargetSlot(bpConfig, breakpoint)
-
-    if (!isPanelVisible(panelId, config, bpConfig, {
-      targetSlot, slot, mode, isFullscreen: appState.isFullscreen, allowedModalPanelId
-    })) {
-      return null
-    }
+    const openEntry = openPanels[panelId]
+    const isOpen = resolveIsOpen(openEntry, bpConfig, panelId, allowedModalPanelId)
+    const { props = {}, focusOnOpen } = openEntry ?? {}
 
     const plugin = pluginRegistry.registeredPlugins.find(p => p.id === config.pluginId)
     const pluginId = plugin?.id
@@ -92,7 +71,8 @@ export function mapPanels ({ slot, appState, evaluateProp }) {
           panelConfig={config}
           props={props}
           focusOnOpen={focusOnOpen}
-          {...buildPanelBody({ panelId, config, bpConfig, props, plugin, pluginId, html, label, appState, evaluateProp })}
+          isOpen={isOpen}
+          {...(isOpen ? buildPanelBody({ panelId, config, bpConfig, props, plugin, pluginId, html, label, appState, evaluateProp }) : {})}
           label={label}
           html={html}
         />

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

@@ -40,8 +40,25 @@ describe('mapPanels', () => {
     defaultAppState.panelConfig = ({ p1: baseConfig })
   })
 
-  it('returns empty array when no panels are open', () => {
-    expect(map({ ...defaultAppState, openPanels: {} })).toEqual([])
+  it('renders a closed shell (not nothing) for an eligible panel that is not open', () => {
+    const result = map({ ...defaultAppState, openPanels: {} })
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ id: 'p1', type: 'panel', order: 1 })
+    expect(result[0].element.props.isOpen).toBe(false)
+  })
+
+  it('does not build a closed panel\'s body before it opens', () => {
+    const renderFn = jest.fn(() => <div>child</div>)
+    defaultAppState.panelConfig = ({ p1: { ...baseConfig, render: renderFn } })
+    const result = map({ ...defaultAppState, openPanels: {} })
+    expect(mapControls).not.toHaveBeenCalled()
+    expect(withPluginContexts).not.toHaveBeenCalled()
+    expect(result[0].element.props.items).toBeUndefined()
+    expect(result[0].element.props.tabs).toBeUndefined()
+  })
+
+  it('returns an empty array only when there is nothing eligible for the slot at all', () => {
+    expect(map({ ...defaultAppState, panelConfig: {} })).toEqual([])
   })
 
   it('skips panel if config is missing', () => {
@@ -49,6 +66,11 @@ describe('mapPanels', () => {
     expect(map()).toEqual([])
   })
 
+  it('skips a registered panelId whose config is falsy', () => {
+    defaultAppState.panelConfig = ({ p1: null })
+    expect(map()).toEqual([])
+  })
+
   it('skips panel if breakpoint config is missing', () => {
     defaultAppState.panelConfig = ({ p1: {} })
     expect(map()).toEqual([])
@@ -92,7 +114,7 @@ describe('mapPanels', () => {
     expect(result).toEqual([])
   })
 
-  it('only allows last opened modal panel', () => {
+  it('renders both modal panels\' shells but only marks the last-opened one as open', () => {
     defaultAppState.panelConfig = ({
       p1: { desktop: { modal: true }, includeModes: ['view'] },
       p2: { desktop: { modal: true }, includeModes: ['view'] }
@@ -101,7 +123,10 @@ describe('mapPanels', () => {
       ...defaultAppState,
       openPanels: { p1: { props: {} }, p2: { props: {} } }
     }
-    expect(map(state, 'modal').map(r => r.id)).toEqual(['p2'])
+    const result = map(state, 'modal')
+    expect(result.map(r => r.id).sort()).toEqual(['p1', 'p2'])
+    expect(result.find(r => r.id === 'p1').element.props.isOpen).toBe(false)
+    expect(result.find(r => r.id === 'p2').element.props.isOpen).toBe(true)
   })
 
   it('wraps render function with plugin context', () => {

package/src/App/renderer/slotHelpers.js

@@ -60,3 +60,36 @@ export const isControlVisible = (control, { breakpoint, mode, isFullscreen }) =>
 export const isConsumerHtml = (config) => {
   return typeof config.html === 'string' && !config.pluginId
 }
+
+/**
+ * Whether a panel is eligible for a target slot (slot type, mode, inline/fullscreen) —
+ * independent of open state and modal exclusivity (see getAllowedModalPanelId). `slot`, if
+ * given, also requires an exact match to the panel's resolved targetSlot.
+ */
+export const isPanelSlotEligible = (config, { targetSlot, slot, mode, isFullscreen }) => {
+  const isNextToButton = targetSlot.endsWith('-button')
+  if (!allowedSlots.panel.includes(targetSlot) && !isNextToButton) {
+    return false
+  }
+  if (!isModeAllowed(config, mode)) {
+    return false
+  }
+  if (config.inline === false && !isFullscreen) {
+    return false
+  }
+  if (slot !== undefined && targetSlot !== slot) {
+    return false
+  }
+  return true
+}
+
+// The id of the most-recently-opened modal panel — the only one actually allowed to show.
+export const getAllowedModalPanelId = (openPanels, panelConfig, breakpoint) => {
+  const openModalPanelIds = Object.keys(openPanels).filter(panelId => panelConfig[panelId]?.[breakpoint]?.modal)
+  return openModalPanelIds.length > 0 ? openModalPanelIds[openModalPanelIds.length - 1] : null // NOSONAR, .at() is only Chrome 90+
+}
+
+// Whether any modal-configured panel is open — drives the modal backdrop's visibility.
+export const hasOpenModalPanel = (openPanels, panelConfig, breakpoint) => {
+  return getAllowedModalPanelId(openPanels, panelConfig, breakpoint) !== null
+}

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

@@ -1,6 +1,6 @@
-import { resolveTargetSlot, isModeAllowed, isControlVisible, isConsumerHtml } from './slotHelpers.js'
+import { resolveTargetSlot, isModeAllowed, isControlVisible, isConsumerHtml, isPanelSlotEligible, getAllowedModalPanelId, hasOpenModalPanel } from './slotHelpers.js'
 
-jest.mock('./slots.js', () => ({ allowedSlots: { control: ['inset', 'banner', 'actions'] } }))
+jest.mock('./slots.js', () => ({ allowedSlots: { control: ['inset', 'banner', 'actions'], panel: ['header', 'modal', 'left-top'] } }))
 
 describe('resolveTargetSlot', () => {
   it('returns modal for modal panels', () => {
@@ -85,3 +85,80 @@ describe('isConsumerHtml', () => {
     expect(isConsumerHtml({ render: () => {} })).toBe(false)
   })
 })
+
+describe('isPanelSlotEligible', () => {
+  const base = { includeModes: ['view'] }
+  const ctx = { targetSlot: 'header', mode: 'view', isFullscreen: false }
+
+  it('returns true for a panel in an allowed slot', () => {
+    expect(isPanelSlotEligible(base, ctx)).toBe(true)
+  })
+
+  it('returns false when the target slot is not an allowed panel slot', () => {
+    expect(isPanelSlotEligible(base, { ...ctx, targetSlot: 'invalid' })).toBe(false)
+  })
+
+  it('allows a target slot next to a button even though it is not a named panel slot', () => {
+    expect(isPanelSlotEligible(base, { ...ctx, targetSlot: 'my-button-button' })).toBe(true)
+  })
+
+  it('returns false when mode is not allowed', () => {
+    expect(isPanelSlotEligible({ includeModes: ['edit'] }, ctx)).toBe(false)
+  })
+
+  it('returns false when inline:false and not fullscreen', () => {
+    expect(isPanelSlotEligible({ ...base, inline: false }, ctx)).toBe(false)
+  })
+
+  it('returns true when inline:false and fullscreen', () => {
+    expect(isPanelSlotEligible({ ...base, inline: false }, { ...ctx, isFullscreen: true })).toBe(true)
+  })
+
+  it('returns false when a specific requested slot is given and the target slot does not match it', () => {
+    expect(isPanelSlotEligible(base, { ...ctx, slot: 'left-top' })).toBe(false)
+  })
+
+  it('returns true when a specific requested slot is given and matches the target slot', () => {
+    expect(isPanelSlotEligible(base, { ...ctx, slot: 'header' })).toBe(true)
+  })
+
+  it('skips the requested-slot check entirely when slot is omitted (HtmlElementHost usage)', () => {
+    expect(isPanelSlotEligible(base, { targetSlot: 'header', mode: 'view', isFullscreen: false })).toBe(true)
+  })
+})
+
+describe('getAllowedModalPanelId', () => {
+  const panelConfig = {
+    p1: { desktop: { modal: true } },
+    p2: { desktop: { modal: true } },
+    p3: { desktop: {} }
+  }
+
+  it('returns null when no modal panel is open', () => {
+    expect(getAllowedModalPanelId({ p3: { props: {} } }, panelConfig, 'desktop')).toBeNull()
+  })
+
+  it('returns the only open modal panel', () => {
+    expect(getAllowedModalPanelId({ p1: { props: {} } }, panelConfig, 'desktop')).toBe('p1')
+  })
+
+  it('returns the most recently opened modal panel when more than one is open', () => {
+    expect(getAllowedModalPanelId({ p1: { props: {} }, p2: { props: {} } }, panelConfig, 'desktop')).toBe('p2')
+  })
+
+  it('returns null when there are no open panels at all', () => {
+    expect(getAllowedModalPanelId({}, panelConfig, 'desktop')).toBeNull()
+  })
+})
+
+describe('hasOpenModalPanel', () => {
+  const panelConfig = { p1: { desktop: { modal: true } }, p2: { desktop: {} } }
+
+  it('returns false when no modal panel is open', () => {
+    expect(hasOpenModalPanel({ p2: { props: {} } }, panelConfig, 'desktop')).toBe(false)
+  })
+
+  it('returns true when a modal panel is open', () => {
+    expect(hasOpenModalPanel({ p1: { props: {} } }, panelConfig, 'desktop')).toBe(true)
+  })
+})