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

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

@@ -10,8 +10,16 @@ const pointFeature = { type: 'Feature', geometry: { type: 'Point', coordinates:
 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 APP_ID = 'test'
+const panelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+
+// Creates a panel DOM element with id matching what useVisibleGeometry queries.
+const makePanelEl = (panelId, rect = panelRect) => {
+  const el = document.createElement('div')
+  el.id = `${APP_ID}-panel-${panelId}`
+  el.getBoundingClientRect = jest.fn(() => rect)
+  return el
+}
 
 const setup = (overrides = {}) => {
   const capturedHandlers = {}
@@ -27,19 +35,18 @@ const setup = (overrides = {}) => {
     ...overrides.eventBus
   }
 
-  const insetEl = document.createElement('div')
-  insetEl.getBoundingClientRect = jest.fn(() => insetPanelRect)
-  const bottomEl = document.createElement('div')
-  bottomEl.getBoundingClientRect = jest.fn(() => bottomPanelRect)
+  // appContainerRef holds panel elements that the hook queries by id
+  const appContainer = document.createElement('div')
+  const myPanelEl = makePanelEl('myPanel')
+  appContainer.appendChild(myPanelEl)
 
   const layoutRefs = {
     mainRef: { current: document.createElement('div') },
-    insetRef: { current: insetEl },
-    bottomRef: { current: bottomEl },
+    appContainerRef: { current: appContainer },
     ...overrides.layoutRefs
   }
   const panelConfig = {
-    myPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'inset' } },
+    myPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'left-top' } },
     emptyPanel: {},
     ...overrides.panelConfig
   }
@@ -48,10 +55,10 @@ const setup = (overrides = {}) => {
     ...overrides.panelRegistry
   }
 
-  useConfig.mockReturnValue({ mapProvider, eventBus, ...overrides.config })
+  useConfig.mockReturnValue({ id: APP_ID, mapProvider, eventBus, ...overrides.config })
   useApp.mockReturnValue({ layoutRefs, panelConfig, panelRegistry, breakpoint: 'desktop', ...overrides.app })
 
-  return { mapProvider, eventBus, capturedHandlers, layoutRefs, panelConfig, insetEl, bottomEl }
+  return { mapProvider, eventBus, capturedHandlers, layoutRefs, panelConfig, myPanelEl, appContainer }
 }
 
 describe('useVisibleGeometry', () => {
@@ -102,12 +109,14 @@ describe('useVisibleGeometry', () => {
     expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
   })
 
-  test('does nothing when panel has visibleGeometry but no slot config', () => {
+  test('does nothing when panel element is not in the DOM', () => {
+    // Panel has visibleGeometry and slot config but its DOM element is not mounted yet
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { noSlotPanel: { visibleGeometry: polygonFeature } }
+      panelConfig: { noElPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'left-top' } } }
     })
     renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'noSlotPanel' })
+    capturedHandlers['app:panelopened']({ panelId: 'noElPanel' })
+    jest.runAllTimers()
     expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
   })
 
@@ -118,19 +127,20 @@ describe('useVisibleGeometry', () => {
     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 }))
+  test('does nothing when panel element has zero dimensions (panel not yet visible)', () => {
+    const zeroRect = { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('myPanel', zeroRect))
     const { mapProvider, capturedHandlers } = setup({
       layoutRefs: {
         mainRef: { current: document.createElement('div') },
-        insetRef: { current: zeroEl }
+        appContainerRef: { current: appContainer }
       }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
 
-    // Run the current pending animation frame
+    // Run only the first pending animation frame — panel has zero size so it reschedules
     jest.runOnlyPendingTimers()
 
     expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
@@ -151,14 +161,17 @@ describe('useVisibleGeometry', () => {
     capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
     jest.runAllTimers()
 
-    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, insetPanelRect)
+    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, panelRect)
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
     expect(mapProvider.setView).not.toHaveBeenCalled()
   })
 
   test('calls setView with center for Point geometry when obscured', () => {
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('pointPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { pointPanel: { visibleGeometry: pointFeature, desktop: { slot: 'inset' } } }
+      panelConfig: { pointPanel: { visibleGeometry: pointFeature, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'pointPanel' })
@@ -169,8 +182,11 @@ describe('useVisibleGeometry', () => {
   })
 
   test('calls setView with first coordinate for MultiPoint geometry when obscured', () => {
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('mpPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { mpPanel: { visibleGeometry: multiPointFeature, desktop: { slot: 'inset' } } }
+      panelConfig: { mpPanel: { visibleGeometry: multiPointFeature, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'mpPanel' })
@@ -182,8 +198,11 @@ describe('useVisibleGeometry', () => {
 
   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 appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('geoPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { geoPanel: { visibleGeometry: rawPolygon, desktop: { slot: 'inset' } } }
+      panelConfig: { geoPanel: { visibleGeometry: rawPolygon, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'geoPanel' })
@@ -194,8 +213,11 @@ describe('useVisibleGeometry', () => {
 
   test('calls setView for a raw Point geometry (not Feature-wrapped) when obscured', () => {
     const rawPoint = { type: 'Point', coordinates: [1, 51] }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('rawPointPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { rawPointPanel: { visibleGeometry: rawPoint, desktop: { slot: 'inset' } } }
+      panelConfig: { rawPointPanel: { visibleGeometry: rawPoint, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'rawPointPanel' })
@@ -206,8 +228,11 @@ describe('useVisibleGeometry', () => {
 
   test('does not call setView when Point feature has null coordinates', () => {
     const nullCoordsFeature = { type: 'Feature', geometry: { type: 'Point', coordinates: null }, properties: {} }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('nullPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { nullPanel: { visibleGeometry: nullCoordsFeature, desktop: { slot: 'inset' } } }
+      panelConfig: { nullPanel: { visibleGeometry: nullCoordsFeature, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'nullPanel' })
@@ -216,26 +241,14 @@ describe('useVisibleGeometry', () => {
     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 { mapProvider, capturedHandlers, appContainer } = 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' } } }
+    const updatedPanelConfig = { myPanel: { visibleGeometry: updatedGeometry, desktop: { slot: 'left-top' } } }
     useApp.mockReturnValue({
-      layoutRefs: { mainRef: { current: document.createElement('div') }, insetRef: { current: insetEl } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } },
       panelConfig: updatedPanelConfig,
       panelRegistry: { getPanelConfig: jest.fn(() => updatedPanelConfig) },
       breakpoint: 'desktop'
@@ -249,20 +262,26 @@ describe('useVisibleGeometry', () => {
 
   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 appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('freshPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry } })) }
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry } })) },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     // Event includes slot (as middleware provides for ADD_PANEL); registry config has no slot info
-    capturedHandlers['app:panelopened']({ panelId: 'freshPanel', slot: 'inset' })
+    capturedHandlers['app:panelopened']({ panelId: 'freshPanel', slot: 'left-top' })
     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 appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('freshPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry, desktop: { slot: 'inset' } } })) }
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry, desktop: { slot: 'left-top' } } })) },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'freshPanel' })
@@ -271,13 +290,16 @@ describe('useVisibleGeometry', () => {
   })
 
   test('falls back to config when panel not in panelConfig and registry returns null', () => {
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('missingPanel'))
     const { mapProvider, capturedHandlers } = setup({
       panelConfig: {}, // panel not present
-      panelRegistry: { getPanelConfig: jest.fn(() => null) } // registry returns null
+      panelRegistry: { getPanelConfig: jest.fn(() => null) }, // registry returns null
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
 
     renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'missingPanel', visibleGeometry: polygonFeature, slot: 'inset' })
+    capturedHandlers['app:panelopened']({ panelId: 'missingPanel', visibleGeometry: polygonFeature, slot: 'left-top' })
     jest.runAllTimers()
     // Should still call fitToBounds using visibleGeometry from event payload
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
@@ -285,11 +307,14 @@ describe('useVisibleGeometry', () => {
 
   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 appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('newPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelRegistry: { getPanelConfig: jest.fn(() => ({})) }
+      panelRegistry: { getPanelConfig: jest.fn(() => ({})) },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'newPanel', slot: 'inset', visibleGeometry: polygonFeature })
+    capturedHandlers['app:panelopened']({ panelId: 'newPanel', slot: 'left-top', visibleGeometry: polygonFeature })
     jest.runAllTimers()
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
   })

package/src/App/layout/Layout.jsx

@@ -63,9 +63,6 @@ export const Layout = () => {
               <SlotRenderer slot={layoutSlots.TOP_RIGHT} />
             </div>
           </div>
-          <div className='im-o-app__inset' ref={layoutRefs.insetRef}>
-            <SlotRenderer slot={layoutSlots.INSET} />
-          </div>
           <div className='im-o-app__left' ref={layoutRefs.leftRef}>
             <div className='im-o-app__left-top' ref={layoutRefs.leftTopRef}>
               <SlotRenderer slot={layoutSlots.LEFT_TOP} />

package/src/App/layout/Layout.test.jsx

@@ -37,7 +37,6 @@ describe('Layout', () => {
     topRef: React.createRef(),
     topLeftColRef: React.createRef(),
     topRightColRef: React.createRef(),
-    insetRef: React.createRef(),
     rightRef: React.createRef(),
     footerRef: React.createRef(),
     actionsRef: React.createRef()

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

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

package/src/App/renderer/HtmlElementHost.jsx

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

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

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

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

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

package/src/App/renderer/slotHelpers.js

@@ -4,14 +4,14 @@ import { allowedSlots } from './slots.js'
 /**
  * Resolves the target slot for a panel based on its breakpoint config.
  * Modal panels always render in the 'modal' slot, and the bottom slot
- * is only available on mobile — tablet and desktop fall back to 'inset'.
+ * is only available on mobile — tablet and desktop fall back to 'left-top'.
  */
 export const resolveTargetSlot = (bpConfig, breakpoint) => {
   if (bpConfig.modal) {
     return 'modal'
   }
   if (bpConfig.slot === 'bottom' && ['tablet', 'desktop'].includes(breakpoint)) {
-    return 'inset'
+    return 'left-top'
   }
   return bpConfig.slot
 }

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

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

package/src/App/renderer/slots.js

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

package/src/App/store/AppProvider.jsx

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

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

@@ -189,7 +189,7 @@ describe('appDispatchMiddleware', () => {
 
       expect(eventBus.emit).toHaveBeenCalledWith(
         events.APP_PANEL_OPENED,
-        { panelId: 'newPanel', slot: 'inset' }
+        { panelId: 'newPanel', slot: 'left-top' }
       )
     })
 
@@ -204,7 +204,7 @@ describe('appDispatchMiddleware', () => {
 
       expect(eventBus.emit).toHaveBeenCalledWith(
         events.APP_PANEL_OPENED,
-        { panelId: 'geoPanel', slot: 'inset', visibleGeometry }
+        { panelId: 'geoPanel', slot: 'left-top', visibleGeometry }
       )
     })
 

package/src/config/appConfig.js

@@ -120,14 +120,14 @@ export const defaultPanelConfig = {
     showLabel: true
   },
   tablet: {
-    slot: 'inset',
+    slot: 'left-top',
     open: true,
     dismissible: true,
     modal: false,
     showLabel: true
   },
   desktop: {
-    slot: 'inset',
+    slot: 'left-top',
     open: true,
     dismissible: true,
     modal: false,
@@ -144,10 +144,10 @@ export const defaultControlConfig = {
     slot: 'bottom'
   },
   tablet: {
-    slot: 'inset'
+    slot: 'left-top'
   },
   desktop: {
-    slot: 'inset'
+    slot: 'left-top'
   }
 }