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

package/src/App/hooks/useVisibleGeometry.test.js

@@ -0,0 +1,331 @@
+import { renderHook } from '@testing-library/react'
+import { useVisibleGeometry, getGeometryType, getPointCoordinates } from './useVisibleGeometry'
+import { useConfig } from '../store/configContext.js'
+import { useApp } from '../store/appContext.js'
+
+jest.mock('../store/configContext.js')
+jest.mock('../store/appContext.js')
+
+const pointFeature = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 51] }, properties: {} }
+const multiPointFeature = { type: 'Feature', geometry: { type: 'MultiPoint', coordinates: [[1, 51], [2, 52]] }, properties: {} }
+const polygonFeature = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+
+const insetPanelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+const bottomPanelRect = { left: 0, top: 500, right: 1000, bottom: 800, width: 1000, height: 300 }
+
+const setup = (overrides = {}) => {
+  const capturedHandlers = {}
+  const mapProvider = {
+    isGeometryObscured: jest.fn(() => true),
+    fitToBounds: jest.fn(),
+    setView: jest.fn(),
+    ...overrides.mapProvider
+  }
+  const eventBus = {
+    on: jest.fn((event, handler) => { capturedHandlers[event] = handler }),
+    off: jest.fn(),
+    ...overrides.eventBus
+  }
+
+  const insetEl = document.createElement('div')
+  insetEl.getBoundingClientRect = jest.fn(() => insetPanelRect)
+  const bottomEl = document.createElement('div')
+  bottomEl.getBoundingClientRect = jest.fn(() => bottomPanelRect)
+
+  const layoutRefs = {
+    mainRef: { current: document.createElement('div') },
+    insetRef: { current: insetEl },
+    bottomRef: { current: bottomEl },
+    ...overrides.layoutRefs
+  }
+  const panelConfig = {
+    myPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'inset' } },
+    emptyPanel: {},
+    ...overrides.panelConfig
+  }
+  const panelRegistry = {
+    getPanelConfig: jest.fn(() => panelConfig),
+    ...overrides.panelRegistry
+  }
+
+  useConfig.mockReturnValue({ mapProvider, eventBus, ...overrides.config })
+  useApp.mockReturnValue({ layoutRefs, panelConfig, panelRegistry, breakpoint: 'desktop', ...overrides.app })
+
+  return { mapProvider, eventBus, capturedHandlers, layoutRefs, panelConfig, insetEl, bottomEl }
+}
+
+describe('useVisibleGeometry', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.useFakeTimers()
+  })
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  test('early returns when mapProvider is null', () => {
+    setup({ config: { mapProvider: null } })
+    const { result } = renderHook(() => useVisibleGeometry())
+    expect(result.error).toBeUndefined()
+  })
+
+  test('early returns when eventBus is null', () => {
+    setup({ config: { eventBus: null } })
+    const { result } = renderHook(() => useVisibleGeometry())
+    expect(result.error).toBeUndefined()
+  })
+
+  test('subscribes to APP_PANEL_OPENED on eventBus', () => {
+    const { eventBus } = setup()
+    renderHook(() => useVisibleGeometry())
+    expect(eventBus.on).toHaveBeenCalledWith('app:panelopened', expect.any(Function))
+  })
+
+  test('unsubscribes from APP_PANEL_OPENED on unmount', () => {
+    const { eventBus } = setup()
+    const { unmount } = renderHook(() => useVisibleGeometry())
+    unmount()
+    expect(eventBus.off).toHaveBeenCalledWith('app:panelopened', expect.any(Function))
+  })
+
+  test('does nothing when panel has no visibleGeometry', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'emptyPanel' })
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when panel does not exist in config', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'unknownPanel' })
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when panel has visibleGeometry but no slot config', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { noSlotPanel: { visibleGeometry: polygonFeature } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'noSlotPanel' })
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when mapProvider has no isGeometryObscured method', () => {
+    const { capturedHandlers, mapProvider } = setup({ mapProvider: { isGeometryObscured: null, fitToBounds: jest.fn(), setView: jest.fn() } })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when slot ref has zero dimensions (panel not visible)', () => {
+    const zeroEl = document.createElement('div')
+    zeroEl.getBoundingClientRect = jest.fn(() => ({ left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 }))
+    const { mapProvider, capturedHandlers } = setup({
+      layoutRefs: {
+        mainRef: { current: document.createElement('div') },
+        insetRef: { current: zeroEl }
+      }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+
+    // Run the current pending animation frame
+    jest.runOnlyPendingTimers()
+
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when geometry is not obscured', () => {
+    const { mapProvider, capturedHandlers } = setup({ mapProvider: { isGeometryObscured: jest.fn(() => false), fitToBounds: jest.fn(), setView: jest.fn() } })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+  })
+
+  test('calls fitToBounds with visibleGeometry for non-point geometry when obscured', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, insetPanelRect)
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+  })
+
+  test('calls setView with center for Point geometry when obscured', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { pointPanel: { visibleGeometry: pointFeature, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'pointPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.setView).toHaveBeenCalledWith({ center: [1, 51] })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('calls setView with first coordinate for MultiPoint geometry when obscured', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { mpPanel: { visibleGeometry: multiPointFeature, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'mpPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.setView).toHaveBeenCalledWith({ center: [1, 51] })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('calls fitToBounds for a raw non-Feature geometry (e.g. Polygon) when obscured', () => {
+    const rawPolygon = { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { geoPanel: { visibleGeometry: rawPolygon, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'geoPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(rawPolygon)
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+  })
+
+  test('calls setView for a raw Point geometry (not Feature-wrapped) when obscured', () => {
+    const rawPoint = { type: 'Point', coordinates: [1, 51] }
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { rawPointPanel: { visibleGeometry: rawPoint, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'rawPointPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.setView).toHaveBeenCalledWith({ center: [1, 51] })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('does not call setView when Point feature has null coordinates', () => {
+    const nullCoordsFeature = { type: 'Feature', geometry: { type: 'Point', coordinates: null }, properties: {} }
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { nullPanel: { visibleGeometry: nullCoordsFeature, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'nullPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('uses bottom slot ref when panel is in bottom slot', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { bottomPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'bottom' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'bottomPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, bottomPanelRect)
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+  })
+
+  test('uses latest panelConfig via ref when it changes between renders', () => {
+    const { mapProvider, capturedHandlers, insetEl } = setup()
+    const { rerender } = renderHook(() => useVisibleGeometry())
+
+    const updatedGeometry = { type: 'Feature', geometry: { type: 'LineString', coordinates: [[0, 0], [1, 1]] }, properties: {} }
+    const updatedPanelConfig = { myPanel: { visibleGeometry: updatedGeometry, desktop: { slot: 'inset' } } }
+    useApp.mockReturnValue({
+      layoutRefs: { mainRef: { current: document.createElement('div') }, insetRef: { current: insetEl } },
+      panelConfig: updatedPanelConfig,
+      panelRegistry: { getPanelConfig: jest.fn(() => updatedPanelConfig) },
+      breakpoint: 'desktop'
+    })
+    rerender()
+
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(updatedGeometry)
+  })
+
+  test('uses slot from event payload when registry config lacks slot info', () => {
+    const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const { mapProvider, capturedHandlers } = setup({
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry } })) }
+    })
+    renderHook(() => useVisibleGeometry())
+    // Event includes slot (as middleware provides for ADD_PANEL); registry config has no slot info
+    capturedHandlers['app:panelopened']({ panelId: 'freshPanel', slot: 'inset' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(freshGeometry)
+  })
+
+  test('falls back to panelRegistry for panels not yet in stale panelConfig', () => {
+    const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const { mapProvider, capturedHandlers } = setup({
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry, desktop: { slot: 'inset' } } })) }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'freshPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(freshGeometry)
+  })
+
+  test('falls back to config when panel not in panelConfig and registry returns null', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: {}, // panel not present
+      panelRegistry: { getPanelConfig: jest.fn(() => null) } // registry returns null
+    })
+
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'missingPanel', visibleGeometry: polygonFeature, slot: 'inset' })
+    jest.runAllTimers()
+    // Should still call fitToBounds using visibleGeometry from event payload
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+  })
+
+  test('uses visibleGeometry from event payload directly, bypassing registry (ADD_PANEL first-click case)', () => {
+    // Registry is empty — simulates first ADD_PANEL before React has processed the reducer
+    const { mapProvider, capturedHandlers } = setup({
+      panelRegistry: { getPanelConfig: jest.fn(() => ({})) }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'newPanel', slot: 'inset', visibleGeometry: polygonFeature })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+  })
+})
+
+describe('getGeometryType', () => {
+  test('returns null for falsy input', () => {
+    expect(getGeometryType(null)).toBeNull()
+    expect(getGeometryType(undefined)).toBeNull()
+  })
+
+  test('returns geometry type for a Feature', () => {
+    expect(getGeometryType({ type: 'Feature', geometry: { type: 'Polygon' } })).toBe('Polygon')
+  })
+
+  test('returns type directly for a raw geometry', () => {
+    expect(getGeometryType({ type: 'Point' })).toBe('Point')
+    expect(getGeometryType({ type: 'FeatureCollection' })).toBe('FeatureCollection')
+  })
+})
+
+describe('getPointCoordinates', () => {
+  test('returns null for unrecognised geometry type', () => {
+    expect(getPointCoordinates({ type: 'Polygon', coordinates: [] })).toBeNull()
+    expect(getPointCoordinates({ type: 'LineString', coordinates: [] })).toBeNull()
+  })
+
+  test('returns coordinates for a Point', () => {
+    expect(getPointCoordinates(pointFeature.geometry)).toEqual(pointFeature.geometry.coordinates)
+  })
+
+  test('returns first coordinate for a MultiPoint', () => {
+    expect(getPointCoordinates(multiPointFeature.geometry)).toEqual(multiPointFeature.geometry.coordinates[0])
+  })
+
+  test('recurses into Feature geometry', () => {
+    expect(getPointCoordinates(pointFeature)).toEqual(pointFeature.geometry.coordinates)
+  })
+})

package/src/App/layout/Layout.jsx

@@ -66,17 +66,25 @@ export const Layout = () => {
           <div className='im-o-app__inset' ref={layoutRefs.insetRef}>
             <SlotRenderer slot={layoutSlots.INSET} />
           </div>
-          <div className='im-o-app__right' ref={layoutRefs.rightRef}>
-            <div className='im-o-app__right-top'>
-              <SlotRenderer slot={layoutSlots.RIGHT_TOP} />
+          <div className='im-o-app__left' ref={layoutRefs.leftRef}>
+            <div className='im-o-app__left-top' ref={layoutRefs.leftTopRef}>
+              <SlotRenderer slot={layoutSlots.LEFT_TOP} />
             </div>
-            <div className='im-o-app__right-bottom'>
-              <SlotRenderer slot={layoutSlots.RIGHT_BOTTOM} />
+            <div className='im-o-app__left-bottom' ref={layoutRefs.leftBottomRef}>
+              <SlotRenderer slot={layoutSlots.LEFT_BOTTOM} />
             </div>
           </div>
           <div className='im-o-app__middle' ref={layoutRefs.middleRef}>
             <SlotRenderer slot={layoutSlots.MIDDLE} />
           </div>
+          <div className='im-o-app__right' ref={layoutRefs.rightRef}>
+            <div className='im-o-app__right-top' ref={layoutRefs.rightTopRef}>
+              <SlotRenderer slot={layoutSlots.RIGHT_TOP} />
+            </div>
+            <div className='im-o-app__right-bottom' ref={layoutRefs.rightBottomRef}>
+              <SlotRenderer slot={layoutSlots.RIGHT_BOTTOM} />
+            </div>
+          </div>
           <div className='im-o-app__footer' ref={layoutRefs.footerRef}>
             <div className='im-o-app__footer-col'>
               <Logo />

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

@@ -139,12 +139,57 @@
   flex-direction: column;
   position: absolute;
   gap: var(--divider-gap);
-  top: var(--inset-offset-top);
+  top: var(--left-offset-top);
 }
 
-.im-o-app__inset .im-c-panel {
-  height: 100%;
-  max-height: var(--inset-max-height);
+// ---------------------------------------------------
+// Left: Buttons and panels
+// ---------------------------------------------------
+
+.im-o-app__left {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  left: var(--primary-gap);
+  top: var(--left-offset-top);
+  bottom: var(--left-offset-bottom);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: bottom 0.15s ease;
+  }
+}
+
+.im-o-app__left-top {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  align-items: flex-end;
+  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;
+  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);
+  }
 }
 
 // ---------------------------------------------------
@@ -164,7 +209,7 @@
 }
 
 // ---------------------------------------------------
-// Right: Buttons and inset panel
+// Right: Buttons and panels
 // ---------------------------------------------------
 
 .im-o-app__right {
@@ -174,18 +219,87 @@
   right: var(--primary-gap);
   top: var(--right-offset-top);
   bottom: var(--right-offset-bottom);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: bottom 0.15s ease;
+  }
 }
 
 .im-o-app__right-top {
   display: flex;
   flex-direction: column;
-  flex-shrink: 0;
+  flex: 0 0 auto;
   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 {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
   margin-top: auto;
+  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%;
+  }
 }
 
 // ---------------------------------------------------
@@ -301,10 +415,33 @@
   }
 
   .im-c-panel--inset {
-    top: var(--inset-offset-top);
-    left: var(--primary-gap);
+    inset: var(--modal-inset);
     max-width: calc(100% - (var(--primary-gap) * 2));
-    max-height: calc(100% - var(--inset-offset-top) - var(--primary-gap));
+    max-height: var(--modal-max-height);
+  }
+
+  .im-c-panel--left-top,
+  .im-c-panel.im-c-panel--left-top-button {
+    inset: var(--left-offset-top) auto auto var(--primary-gap);
+    max-height: calc(100% - var(--left-offset-top) - var(--primary-gap));
+  }
+
+  .im-c-panel--left-bottom,
+  .im-c-panel.im-c-panel--left-bottom-button {
+    inset: auto auto var(--left-offset-bottom) var(--primary-gap);
+    max-height: calc(100% - var(--left-offset-bottom) - var(--primary-gap));
+  }
+
+  .im-c-panel--right-top,
+  .im-c-panel.im-c-panel--right-top-button {
+    inset: var(--right-offset-top) var(--primary-gap) auto auto;
+    max-height: calc(100% - var(--right-offset-top) - var(--primary-gap));
+  }
+
+  .im-c-panel--right-bottom,
+  .im-c-panel.im-c-panel--right-bottom-button {
+    inset: auto var(--primary-gap) var(--right-offset-bottom) auto;
+    max-height: calc(100% - var(--right-offset-bottom) - var(--primary-gap));
   }
 
   .im-c-panel--middle {
@@ -322,11 +459,10 @@
   }
 
   [class*="im-c-panel--"][class*="-button"] { // Adjacent to button
-    top: var(--modal-inset);
-    right: var(--modal-inset);
-    bottom: var(--modal-inset);
-    left: var(--modal-inset);
+    inset: var(--modal-inset);
+    max-height: var(--modal-max-height);
   }
+
 }
 
 // Mobile and tablet

package/src/App/renderer/HtmlElementHost.jsx

@@ -4,7 +4,6 @@ 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 { stringToKebab } from '../../utils/stringToKebab.js'
 
 /**
  * Maps slot names to their corresponding layout refs.
@@ -16,11 +15,20 @@ export const getSlotRef = (slot, layoutRefs) => {
     'top-left': layoutRefs.topLeftColRef,
     'top-right': layoutRefs.topRightColRef,
     inset: layoutRefs.insetRef,
+    'left-top': layoutRefs.leftTopRef,
+    'left-bottom': layoutRefs.leftBottomRef,
     middle: layoutRefs.middleRef,
+    'right-top': layoutRefs.rightTopRef,
+    'right-bottom': layoutRefs.rightBottomRef,
     bottom: layoutRefs.bottomRef,
     actions: layoutRefs.actionsRef,
     modal: layoutRefs.modalRef
   }
+  if (slot?.endsWith('-button')) {
+    const el = document.querySelector(`[data-button-slot="${slot}"]`)
+    return el ? { current: el } : null
+  }
+
   return slotRefMap[slot] || null
 }
 
@@ -78,7 +86,7 @@ const PersistentPanel = ({ panelId, config, isOpen, openPanelProps, allowedModal
     }
 
     // 2. Slot Validation
-    const isNextToButton = `${stringToKebab(panelId)}-button` === targetSlot
+    const isNextToButton = targetSlot.endsWith('-button')
     const isSlotAllowed = allowedSlots.panel.includes(targetSlot) || isNextToButton
 
     if (!isSlotAllowed) {

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

@@ -292,6 +292,18 @@ describe('HtmlElementHost', () => {
     expect(getSlotRef('unknown-slot', {})).toBeNull()
   })
 
+  test('getSlotRef returns wrapped element for button slot when element exists', () => {
+    const el = document.createElement('div')
+    el.dataset.buttonSlot = 'my-panel-button'
+    document.body.appendChild(el)
+    expect(getSlotRef('my-panel-button', {})).toEqual({ current: el })
+    el.remove()
+  })
+
+  test('getSlotRef returns null for button slot when no element found', () => {
+    expect(getSlotRef('nonexistent-button', {})).toBeNull()
+  })
+
   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/SlotRenderer.jsx

@@ -24,7 +24,7 @@ export const SlotRenderer = ({ slot }) => {
     <>
       {slot === 'actions'
         ? (
-          <Actions slot={slot}>
+          <Actions slot='actions'>
             {slotItems.map(item => item.element)}
           </Actions>
           )

package/src/App/renderer/mapPanels.js

@@ -1,6 +1,5 @@
 // src/core/renderers/mapPanels.js
 import React from 'react'
-import { stringToKebab } from '../../utils/stringToKebab.js'
 import { withPluginContexts } from './pluginWrapper.js'
 import { Panel } from '../components/Panel/Panel.jsx'
 import { allowedSlots } from './slots.js'
@@ -12,7 +11,7 @@ import { resolveTargetSlot, isModeAllowed, isConsumerHtml } from './slotHelpers.
  * and ensures only the topmost modal panel is shown.
  */
 const isPanelVisible = (panelId, config, bpConfig, { targetSlot, slot, mode, isFullscreen, allowedModalPanelId }) => {
-  const isNextToButton = `${stringToKebab(panelId)}-button` === targetSlot
+  const isNextToButton = targetSlot.endsWith('-button')
   if (!allowedSlots.panel.includes(targetSlot) && !isNextToButton) {
     return false
   }

package/src/App/renderer/pluginWrapper.js

@@ -1,4 +1,5 @@
 // src/core/renderers/pluginWrapper.js
+import { useMemo } from 'react'
 import { useConfig } from '../store/configContext.js'
 import { useApp } from '../store/appContext.js'
 import { useMap } from '../store/mapContext.js'
@@ -59,11 +60,11 @@ export function withPluginContexts (Component, { pluginId, pluginConfig }) {
           services={services}
           mapProvider={appConfig.mapProvider}
           iconRegistry={getIconRegistry()}
-          buttonConfig={Object.fromEntries(
+          buttonConfig={useMemo(() => Object.fromEntries(
             Object.entries(appState.buttonConfig).filter(
               ([_, btn]) => btn.pluginId === pluginId
             )
-          )}
+          ), [appState.buttonConfig])}
         />
       )
     })