@defra/interactive-map 0.0.49-alpha → 0.0.50-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/interactive-map",
-  "version": "0.0.49-alpha",
+  "version": "0.0.50-alpha",
   "description": "An accessible map component",
   "repository": {
     "type": "git",

package/plugins/search/dist/css/index.css

@@ -1 +1 @@
-.im-c-search-form{border-radius:0;display:none;filter:var(--search-drop-shadow);min-height:auto;padding:0}.im-c-search-form:before{border-radius:0;box-shadow:none}.im-o-app--mobile .im-c-search-form{margin:calc(var(--primary-gap)*-1) calc(var(--primary-gap)*-1) 0;overflow:visible;position:relative}.im-o-app--desktop .im-c-search-form,.im-o-app--tablet .im-c-search-form{border-radius:var(--button-border-radius);box-shadow:none;overflow:visible;position:relative}.im-o-app--desktop .im-c-search-form:before,.im-o-app--tablet .im-c-search-form:before{border-radius:var(--button-border-radius)}.im-o-app--desktop .im-c-search-form .im-c-search-suggestions,.im-o-app--tablet .im-c-search-form .im-c-search-suggestions{left:0;position:absolute;right:0;top:calc(100% + 2px);z-index:1}.im-c-search__status{background-color:var(--background-color);border-bottom-left-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius);border-top:1px solid var(--button-hover-color);left:0;padding:var(--divider-gap) calc(var(--divider-gap) + 2px);position:absolute;right:0;top:100%}.im-o-app--mobile .im-c-search-form--default-expanded .im-c-search-suggestions{left:0;position:absolute;top:100%;width:100%}.im-c-search-close-button{position:relative}.im-c-search-close-button:before{box-shadow:none}.im-c-search-close-button:hover,.im-c-search-close-button[data-focus-visible=true]{z-index:1}.im-c-search-submit-button{position:relative}.im-c-search-submit-button:before{box-shadow:none}.im-c-search-submit-button[data-focus-visible=true]{z-index:1}.im-c-search-suggestions{background-color:var(--background-color);list-style:none;margin:0;max-height:calc(100vh - 66px);overflow-y:auto;padding:0;scroll-padding:0}.im-c-search-suggestions__item{border-top:1px solid var(--button-hover-color);color:var(--secondary-text-color);cursor:pointer;margin:0;padding:calc(var(--divider-gap) + 2px) var(--primary-gap);position:relative;user-select:none}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search-suggestions__item{color:Highlight}}.im-c-search-suggestions__item mark{background-color:transparent;color:var(--foreground-color);font-weight:700;pointer-events:none}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search-suggestions__item mark{color:Highlight}}@media (hover:hover) and (pointer:fine){.im-c-search-suggestions__item:hover:not([aria-selected=true]){background-color:var(--button-hover-color)}}.im-c-search-suggestions__item[aria-selected=true]{background-color:var(--button-hover-color)}.im-c-search-suggestions__item[aria-selected=true] mark{color:var(--fixed-foreground-color)}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search-suggestions__item[aria-selected=true] mark{color:Highlight}}.im-c-search-suggestions__item:hover:not([aria-selected=true]) .im-c-search-suggestions__label{text-decoration:underline;text-decoration-color:var(--foreground-color);text-decoration-skip-ink:none;text-decoration-thickness:2px;text-underline-offset:2px}.im-c-search-suggestions__item[aria-selected=true] .im-c-search-suggestions__label{background-color:var(--focus-outline-color);box-shadow:0 -2px var(--focus-outline-color),0 4px var(--focus-border-color);color:var(--focus-border-color);outline:3px solid transparent;text-decoration:none}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search-suggestions__item[aria-selected=true] .im-c-search-suggestions__label{color:Highlight;outline-color:Highlight}}.im-c-search-suggestions__label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.im-o-app--mobile .im-c-search-form--default-expanded .im-c-search-suggestions{box-shadow:var(--panel-box-shadow);clip-path:inset(0 0 -20px 0)}.im-o-app--desktop .im-c-search-suggestions,.im-o-app--tablet .im-c-search-suggestions{border-bottom-left-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius)}.im-o-app--desktop .im-c-search-suggestions__item,.im-o-app--tablet .im-c-search-suggestions__item{padding:var(--divider-gap) calc(var(--divider-gap) + 2px)}:root{--search-drop-shadow:drop-shadow(0 -2px 20px rgba(0,0,0,.1)) drop-shadow(0 0 12px rgba(0,0,0,.1))}.im-c-search{display:flow-root}.im-c-search--collapsed{display:none}.im-o-app__header:has(>.im-c-search--collapsed:only-child){margin-bottom:0}.im-c-search__input-container{display:flex;flex:1 1 auto;height:var(--button-size);min-height:auto;position:relative}.im-c-search__input-container:before{border:2px solid var(--foreground-color);border-radius:var(--button-border-radius);bottom:-2px;content:"";left:-2px;pointer-events:none;position:absolute;right:-2px;top:-2px;z-index:1}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search__input-container:before{border-color:ButtonText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search__input-container:hover:not(:has(.im-c-search-close-button:hover)):before{border-color:Highlight}}.im-c-search__input-container:after{border:var(--focus-border-width) solid var(--focus-border-color);border-radius:calc(var(--button-border-radius) - 2px);bottom:-1px;content:"";left:-1px;opacity:0;outline:var(--focus-box-shadow-width) solid var(--focus-outline-color);pointer-events:none;position:absolute;right:-1px;top:-1px;z-index:99}@media (prefers-reduced-motion:no-preference){.im-c-search__input-container:after{transition:opacity var(--duration) ease}}.im-o-app .im-c-search__input{background-color:transparent;border:0;color:var(--foreground-color);font-size:1rem;outline:0;padding:var(--divider-gap) calc(var(--divider-gap) + 2px);width:100%}.im-o-app .im-c-search__input:focus{box-shadow:none;outline:3px solid transparent}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-o-app .im-c-search__input:focus{outline:none}}.im-o-app .im-c-search__input::placeholder{color:var(--foreground-color)}.im-o-app .im-c-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}.im-o-app .im-c-search__input::-moz-search-clear{display:none}.im-c-search__hint{display:none}.im-o-app--exclusive-control .im-o-app__right .im-c-button-wrapper,.im-o-app--exclusive-control .im-o-app__top .im-c-button-wrapper{opacity:0;z-index:-1}.im-o-app--exclusive-control .im-c-button-wrapper--search{pointer-events:none;position:absolute}.im-o-app--exclusive-control .im-o-app__left-bottom .im-c-panel,.im-o-app--exclusive-control .im-o-app__left-top .im-c-panel,.im-o-app--exclusive-control .im-o-app__right-bottom .im-c-panel,.im-o-app--exclusive-control .im-o-app__right-top .im-c-panel{opacity:0;z-index:-1}.im-o-app--exclusive-control .im-o-app__banner{opacity:0;z-index:-1}.im-o-app--mobile .im-c-search__input-container{margin:var(--primary-gap)}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search__input-container--keyboard-focus-within:before{border-color:Highlight}}.im-c-search__input-container--keyboard-focus-within:after{opacity:1}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search__input-container--keyboard-focus-within:after{opacity:0}.im-c-search__input-container--keyboard-focus-within{outline:var(--focus-highlight-width) solid Highlight}}
+.im-c-search-form{border-radius:0;display:none;filter:var(--search-drop-shadow);min-height:auto;padding:0}.im-c-search-form:before{border-radius:0;box-shadow:none}.im-o-app--mobile .im-c-search-form{margin:calc(var(--primary-gap)*-1) calc(var(--primary-gap)*-1) 0;overflow:visible;position:relative}.im-o-app--desktop .im-c-search-form,.im-o-app--tablet .im-c-search-form{border-radius:var(--button-border-radius);box-shadow:none;overflow:visible;position:relative}.im-o-app--desktop .im-c-search-form:before,.im-o-app--tablet .im-c-search-form:before{border-radius:var(--button-border-radius)}.im-o-app--desktop .im-c-search-form .im-c-search-suggestions,.im-o-app--tablet .im-c-search-form .im-c-search-suggestions{left:0;position:absolute;right:0;top:calc(100% + 2px);z-index:1}.im-c-search__status{background-color:var(--background-color);border-bottom-left-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius);border-top:1px solid var(--button-hover-color);left:0;padding:var(--divider-gap) calc(var(--divider-gap) + 2px);position:absolute;right:0;top:100%}.im-o-app--mobile .im-c-search-form--default-expanded .im-c-search-suggestions{left:0;position:absolute;top:100%;width:100%}.im-o-app--mobile .im-c-search-form:not(.im-c-search-form--default-expanded) .im-c-search-suggestions{left:0;position:absolute;top:100%;width:100%;z-index:1}.im-c-search-close-button{position:relative}.im-c-search-close-button:before{box-shadow:none}.im-c-search-close-button:hover,.im-c-search-close-button[data-focus-visible=true]{z-index:1}.im-c-search-submit-button{position:relative}.im-c-search-submit-button:before{box-shadow:none}.im-c-search-submit-button[data-focus-visible=true]{z-index:1}.im-c-search-suggestions{background-color:var(--background-color);list-style:none;margin:0;max-height:calc(100vh - 66px);overflow-y:auto;padding:0;scroll-padding:0}.im-c-search-suggestions__item{border-top:1px solid var(--button-hover-color);color:var(--secondary-text-color);cursor:pointer;margin:0;padding:calc(var(--divider-gap) + 2px) var(--primary-gap);position:relative;user-select:none}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search-suggestions__item{color:Highlight}}.im-c-search-suggestions__item mark{background-color:transparent;color:var(--foreground-color);font-weight:700;pointer-events:none}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search-suggestions__item mark{color:Highlight}}@media (hover:hover) and (pointer:fine){.im-c-search-suggestions__item:hover:not([aria-selected=true]){background-color:var(--button-hover-color)}}.im-c-search-suggestions__item[aria-selected=true]{background-color:var(--button-hover-color)}.im-c-search-suggestions__item[aria-selected=true] mark{color:var(--fixed-foreground-color)}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search-suggestions__item[aria-selected=true] mark{color:Highlight}}.im-c-search-suggestions__item:hover:not([aria-selected=true]) .im-c-search-suggestions__label{text-decoration:underline;text-decoration-color:var(--foreground-color);text-decoration-skip-ink:none;text-decoration-thickness:2px;text-underline-offset:2px}.im-c-search-suggestions__item[aria-selected=true] .im-c-search-suggestions__label{background-color:var(--focus-outline-color);box-shadow:0 -2px var(--focus-outline-color),0 4px var(--focus-border-color);color:var(--focus-border-color);outline:3px solid transparent;text-decoration:none}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search-suggestions__item[aria-selected=true] .im-c-search-suggestions__label{color:Highlight;outline-color:Highlight}}.im-c-search-suggestions__label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.im-o-app--mobile .im-c-search-form--default-expanded .im-c-search-suggestions{box-shadow:var(--panel-box-shadow);clip-path:inset(0 0 -20px 0)}.im-o-app--desktop .im-c-search-suggestions,.im-o-app--tablet .im-c-search-suggestions{border-bottom-left-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius)}.im-o-app--desktop .im-c-search-suggestions__item,.im-o-app--tablet .im-c-search-suggestions__item{padding:var(--divider-gap) calc(var(--divider-gap) + 2px)}:root{--search-drop-shadow:drop-shadow(0 -2px 20px rgba(0,0,0,.1)) drop-shadow(0 0 12px rgba(0,0,0,.1))}.im-c-search{display:flow-root}.im-c-search--collapsed{display:none}.im-o-app__header:has(>.im-c-search--collapsed:only-child){margin-bottom:0}.im-c-search__input-container{display:flex;flex:1 1 auto;height:var(--button-size);min-height:auto;position:relative}.im-c-search__input-container:before{border:2px solid var(--foreground-color);border-radius:var(--button-border-radius);bottom:-2px;content:"";left:-2px;pointer-events:none;position:absolute;right:-2px;top:-2px;z-index:1}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search__input-container:before{border-color:ButtonText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search__input-container:hover:not(:has(.im-c-search-close-button:hover)):before{border-color:Highlight}}.im-c-search__input-container:after{border:var(--focus-border-width) solid var(--focus-border-color);border-radius:calc(var(--button-border-radius) - 2px);bottom:-1px;content:"";left:-1px;opacity:0;outline:var(--focus-box-shadow-width) solid var(--focus-outline-color);pointer-events:none;position:absolute;right:-1px;top:-1px;z-index:99}@media (prefers-reduced-motion:no-preference){.im-c-search__input-container:after{transition:opacity var(--duration) ease}}.im-o-app .im-c-search__input{background-color:transparent;border:0;color:var(--foreground-color);font-size:1rem;outline:0;padding:var(--divider-gap) calc(var(--divider-gap) + 2px);width:100%}.im-o-app .im-c-search__input:focus{box-shadow:none;outline:3px solid transparent}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-o-app .im-c-search__input:focus{outline:none}}.im-o-app .im-c-search__input::placeholder{color:var(--foreground-color)}.im-o-app .im-c-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}.im-o-app .im-c-search__input::-moz-search-clear{display:none}.im-c-search__hint{display:none}.im-o-app--exclusive-control .im-o-app__right .im-c-button-wrapper,.im-o-app--exclusive-control .im-o-app__top .im-c-button-wrapper{opacity:0;z-index:-1}.im-o-app--exclusive-control .im-c-button-wrapper--search{pointer-events:none;position:absolute}.im-o-app--exclusive-control .im-o-app__left-bottom .im-c-panel,.im-o-app--exclusive-control .im-o-app__left-top .im-c-panel,.im-o-app--exclusive-control .im-o-app__right-bottom .im-c-panel,.im-o-app--exclusive-control .im-o-app__right-top .im-c-panel{opacity:0;z-index:-1}.im-o-app--exclusive-control .im-o-app__banner{opacity:0;z-index:-1}.im-o-app--mobile .im-c-search__input-container{margin:var(--primary-gap)}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search__input-container--keyboard-focus-within:before{border-color:Highlight}}.im-c-search__input-container--keyboard-focus-within:after{opacity:1}@media (-ms-high-contrast:active),screen and (forced-colors:active){.im-c-search__input-container--keyboard-focus-within:after{opacity:0}.im-c-search__input-container--keyboard-focus-within{outline:var(--focus-highlight-width) solid Highlight}}

package/plugins/search/src/components/Form/Form.module.scss

@@ -57,4 +57,13 @@
   top: 100%;
   width: 100%;
   left: 0;
-}
+}
+
+// Tap-to-open mobile search reflows the header otherwise, inflating the safe zone while suggestions are open.
+.im-o-app--mobile .im-c-search-form:not(.im-c-search-form--default-expanded) .im-c-search-suggestions {
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  left: 0;
+  z-index: 1;
+}

package/src/App/hooks/useLayoutMeasurements.js

@@ -148,7 +148,7 @@ function applyAttributionsLayout ({ appContainer, bottom, attributions, dividerG
  * for `fitBounds`/`setView`. Waits for `arePluginsEvaluated` so the inset reflects final
  * button visibility rather than a mid-evaluation state, which would make the map jump.
  */
-function calculateLayout (layoutRefs, breakpoint) {
+export function calculateLayout (layoutRefs, breakpoint) {
   const {
     appContainerRef, mainRef, topRef, topLeftColRef, topRightColRef,
     bottomRef, attributionsRef, bottomRightRef, leftTopRef, leftBottomRef,

package/src/App/hooks/useMapProviderOverrides.js

@@ -4,18 +4,26 @@ import { useApp } from '../store/appContext.js'
 import { useMap } from '../store/mapContext.js'
 import { EVENTS as events } from '../../config/events.js'
 import { getSafeZoneInset } from '../../utils/getSafeZoneInset.js'
+import { calculateLayout } from './useLayoutMeasurements.js'
 import { scalePoints } from '../../utils/scalePoints.js'
 import { scaleFactor } from '../../config/appConfig.js'
 
 export const useMapProviderOverrides = () => {
   const { mapProvider, eventBus } = useConfig()
-  const { dispatch: appDispatch, layoutRefs } = useApp()
+  const { dispatch: appDispatch, layoutRefs, breakpoint } = useApp()
   const { mapSize } = useMap()
 
   const latestMapSize = useRef(mapSize)
   latestMapSize.current = mapSize
+  const latestBreakpoint = useRef(breakpoint)
+  latestBreakpoint.current = breakpoint
 
   const updatePadding = () => {
+    // Refresh the derived layout CSS vars (e.g. --left-offset-top) before reading them —
+    // callers often trigger this right after a state change that resizes the header/columns
+    // (e.g. collapsing mobile search), and those vars are only otherwise refreshed by a
+    // separate ResizeObserver callback that isn't guaranteed to have run yet.
+    calculateLayout(layoutRefs, latestBreakpoint.current)
     const safeZoneInset = getSafeZoneInset(layoutRefs)
     const padding = scalePoints(safeZoneInset, scaleFactor[latestMapSize.current])
 
@@ -43,12 +51,18 @@ export const useMapProviderOverrides = () => {
         return undefined
       }
 
-      // Calculate and set safe zone padding unless explicitly skipped
-      if (!skipPaddingCalc) {
-        updatePadding()
+      if (skipPaddingCalc) {
+        return originalFitToBounds.call(mapProvider, bounds)
       }
 
-      return originalFitToBounds.call(mapProvider, bounds)
+      // Callers often dispatch layout-affecting state (e.g. collapsing the mobile search
+      // form) immediately before calling this, so measuring on the same tick can capture
+      // the DOM mid-transition. Wait a frame so React has painted first.
+      requestAnimationFrame(() => {
+        updatePadding()
+        originalFitToBounds.call(mapProvider, bounds)
+      })
+      return undefined
     }
 
     const originalSetView = mapProvider.setView
@@ -58,9 +72,11 @@ export const useMapProviderOverrides = () => {
         return undefined
       }
 
-      updatePadding()
-
-      return originalSetView.call(mapProvider, { center, zoom })
+      requestAnimationFrame(() => {
+        updatePadding()
+        originalSetView.call(mapProvider, { center, zoom })
+      })
+      return undefined
     }
 
     return () => {

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

@@ -4,6 +4,7 @@ import { useConfig } from '../store/configContext.js'
 import { useApp } from '../store/appContext.js'
 import { useMap } from '../store/mapContext.js'
 import { getSafeZoneInset } from '../../utils/getSafeZoneInset.js'
+import { calculateLayout } from './useLayoutMeasurements.js'
 import { scalePoints } from '../../utils/scalePoints.js'
 import { scaleFactor } from '../../config/appConfig.js'
 
@@ -11,6 +12,7 @@ jest.mock('../store/configContext.js')
 jest.mock('../store/appContext.js')
 jest.mock('../store/mapContext.js')
 jest.mock('../../utils/getSafeZoneInset.js')
+jest.mock('./useLayoutMeasurements.js')
 jest.mock('../../utils/scalePoints.js')
 
 const setup = (overrides = {}) => {
@@ -30,7 +32,7 @@ const setup = (overrides = {}) => {
   }
 
   useConfig.mockReturnValue({ mapProvider, eventBus, ...overrides.config })
-  useApp.mockReturnValue({ dispatch, layoutRefs, ...overrides.app })
+  useApp.mockReturnValue({ dispatch, layoutRefs, breakpoint: 'mobile', ...overrides.app })
   useMap.mockReturnValue({ mapSize: 'md', ...overrides.map })
 
   getSafeZoneInset.mockReturnValue({ top: 10, right: 5, bottom: 15, left: 5 })
@@ -40,7 +42,13 @@ const setup = (overrides = {}) => {
 }
 
 describe('useMapProviderOverrides', () => {
-  beforeEach(jest.clearAllMocks)
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => cb())
+  })
+  afterEach(() => {
+    global.requestAnimationFrame.mockRestore()
+  })
 
   test('early returns when mapProvider is null', () => {
     setup({ config: { mapProvider: null } })
@@ -57,6 +65,7 @@ describe('useMapProviderOverrides', () => {
 
     mapProvider.fitToBounds([0, 0, 1, 1])
 
+    expect(calculateLayout).toHaveBeenCalledWith(layoutRefs, 'mobile')
     expect(getSafeZoneInset).toHaveBeenCalledWith(layoutRefs)
     expect(scalePoints).toHaveBeenCalledWith(safeZone, scaleFactor.lg)
     expect(dispatch).toHaveBeenCalledWith({

package/src/utils/getSafeZoneInset.js

@@ -6,22 +6,15 @@
  *
  * Each edge inset is driven by:
  *   - A structural baseline from the button columns, footer, and action bar.
- *   - A panel contribution when panels on that edge cover more than 1/RATIO
- *     of the available map dimension along that edge.
+ *   - A panel contribution once a panel (or the two panels stacked in a side's
+ *     slots) covers more than 1/RATIO of the available map height (widening
+ *     that side's left/right inset) and/or more than 1/RATIO of the available
+ *     map width (pushing the top/bottom inset down/up). Both can trigger at
+ *     once for a panel that's both tall and wide — independently, not
+ *     exclusively, since the MAX_RATIO cap below already bounds each edge.
  *   - A cap so no single inset exceeds 1/MAX_RATIO of the map dimension,
  *     preventing fitBounds from zooming out to a corner when panels are large.
  *
- * Trigger logic per edge:
- *   - left / right : combined HEIGHT of panels in that column vs available height
- *   - top / bottom : WIDTH of panels in that row vs available width
- *
- * When a panel individually exceeds BOTH the height and width thresholds it
- * would otherwise trigger both adjacent edges, pushing the safe zone into the
- * opposite corner. To prevent this, such panels are classified as either
- * "column-primary" (h/availableH ≥ w/availableW) or "row-primary" and only
- * contribute to their dominant edge. Panels that exceed at most one threshold
- * are never in conflict and contribute to both axes freely.
- *
  * @param {Object} refs - React refs from layoutRefs.
  * @param {React.RefObject}  refs.mainRef          - Main map container.
  * @param {React.RefObject}  refs.leftRef          - Left button column.
@@ -36,7 +29,7 @@
  *   Pixel insets from each edge of the main area, or undefined if any required ref is missing.
  */
 
-const RATIO = 2 // panels covering more than 1/RATIO of an edge trigger that edge's inset
+const RATIO = 2 // panels covering more than 1/RATIO of the available height/width trigger that edge's inset
 const MAX_RATIO = 3 // each inset is capped at 1/MAX_RATIO of its map dimension
 
 // Query the panel element directly within its slot container.
@@ -61,50 +54,24 @@ const getButtonColWidth = (colRef) => {
   return group ? group.offsetWidth : 0
 }
 
-// Returns the panel's contribution to column (left/right) and row (top/bottom) edges.
-//
-// A panel can only trigger BOTH adjacent edges simultaneously when it individually
-// exceeds both the height threshold (h > availableH/RATIO) and the width threshold
-// (w > availableW/RATIO). In that case, only the dominant direction is used, preventing
-// a corner panel from pushing the safe zone into the opposite corner.
-// When only one (or neither) threshold is individually exceeded, the panel contributes
-// its dimensions to both axes freely (combined thresholds still apply later).
-const panelContrib = (w, h, availableW, availableH) => {
-  const hFrac = h / availableH
-  const wFrac = w / availableW
-  if (hFrac >= 1 / RATIO && wFrac >= 1 / RATIO) {
-    return hFrac >= wFrac
-      ? { colH: h, colW: w, rowW: 0, rowH: 0 } // column-primary (left/right)
-      : { colH: 0, colW: 0, rowW: w, rowH: h } // row-primary (top/bottom)
-  }
-  return { colH: h, colW: w, rowW: w, rowH: h }
-}
-
-// Determines the column (left/right) inset and the row-axis contributions for both panels.
-//
-// Column coverage uses raw heights so that two panels whose combined height exceeds the
-// threshold always trigger the column inset, even if one is individually row-primary.
-// Exception: a single row-primary panel (no sibling, colH=0) is suppressed so it
-// contributes to top/bottom instead — giving a larger safe zone in the horizontal direction.
-// When triggered, row contributions for both panels are zeroed to prevent double-padding.
-const computeColumn = (panelA, panelB, availableW, availableH, hThreshold, columnLeft, gap) => {
-  const a = panelContrib(panelA.offsetWidth, panelA.offsetHeight, availableW, availableH)
-  const b = panelContrib(panelB.offsetWidth, panelB.offsetHeight, availableW, availableH)
-  const aSingleRowPrimary = panelB.offsetHeight === 0 && a.colH === 0
-  const bSingleRowPrimary = panelA.offsetHeight === 0 && b.colH === 0
+// Determines the column (left/right) inset from the two panels stacked in that side's
+// slots. Combined height exceeding the threshold triggers the inset, widened to fit
+// whichever panel is wider.
+const computeColumn = (panelA, panelB, hThreshold, columnLeft, gap) => {
   const coverage = panelA.offsetHeight + panelB.offsetHeight + (panelA.offsetHeight > 0 && panelB.offsetHeight > 0 ? gap : 0)
-  const triggered = coverage > hThreshold && !aSingleRowPrimary && !bSingleRowPrimary
-  return {
-    panelInset: triggered ? columnLeft + Math.max(panelA.offsetWidth, panelB.offsetWidth) + gap : 0,
-    rowA: triggered ? { w: 0, h: 0 } : { w: a.rowW, h: a.rowH },
-    rowB: triggered ? { w: 0, h: 0 } : { w: b.rowW, h: b.rowH }
-  }
+  const triggered = coverage > hThreshold
+  return triggered ? columnLeft + Math.max(panelA.offsetWidth, panelB.offsetWidth) + gap : 0
 }
 
-// Determines the row-axis (top/bottom) panel inset driven by combined panel width.
-// The combined width test subsumes the individual checks (dimensions are non-negative).
-const computeRow = (leftW, rightW, leftH, rightH, wThreshold, baseInset, gap) =>
-  leftW + rightW > wThreshold ? baseInset + Math.max(leftH, rightH) + gap : 0
+// Determines the row (top/bottom) inset from the panels docked in the left and right
+// columns' near slot (both top, or both bottom). Combined width exceeding the threshold
+// triggers the inset, deepened to fit whichever panel is taller. Evaluated independently
+// of computeColumn — a panel can widen its own column AND push top/bottom down at once.
+const computeRow = (leftPanel, rightPanel, wThreshold, baseInset, gap) => {
+  const coverage = leftPanel.offsetWidth + rightPanel.offsetWidth + (leftPanel.offsetWidth > 0 && rightPanel.offsetWidth > 0 ? gap : 0)
+  const triggered = coverage > wThreshold
+  return triggered ? baseInset + Math.max(leftPanel.offsetHeight, rightPanel.offsetHeight) + gap : 0
+}
 
 export const getSafeZoneInset = ({
   mainRef, leftRef, rightRef, actionsRef, bottomRef,
@@ -135,13 +102,10 @@ export const getSafeZoneInset = ({
   const availableH = main.offsetHeight - baseTop - baseBottom
   const availableW = main.offsetWidth - (baseLeft - main.offsetLeft) - baseRight
 
-  const leftCol = computeColumn(rawTL, rawBL, availableW, availableH, availableH / RATIO, main.offsetLeft + left.offsetLeft, gap)
-  const rightCol = computeColumn(rawTR, rawBR, availableW, availableH, availableH / RATIO, left.offsetLeft, gap)
-
-  const leftPanelInset = leftCol.panelInset
-  const rightPanelInset = rightCol.panelInset
-  const topPanelInset = computeRow(leftCol.rowA.w, rightCol.rowA.w, leftCol.rowA.h, rightCol.rowA.h, availableW / RATIO, baseTop, gap)
-  const bottomPanelInset = computeRow(leftCol.rowB.w, rightCol.rowB.w, leftCol.rowB.h, rightCol.rowB.h, availableW / RATIO, bottomInset, gap)
+  const leftPanelInset = computeColumn(rawTL, rawBL, availableH / RATIO, main.offsetLeft + left.offsetLeft, gap)
+  const rightPanelInset = computeColumn(rawTR, rawBR, availableH / RATIO, left.offsetLeft, gap)
+  const topPanelInset = computeRow(rawTL, rawTR, availableW / RATIO, baseTop, gap)
+  const bottomPanelInset = computeRow(rawBL, rawBR, availableW / RATIO, bottomInset, gap)
 
   const usableW = main.offsetWidth - 2 * gap
   const usableH = main.offsetHeight - 2 * gap

package/src/utils/getSafeZoneInset.test.js

@@ -25,13 +25,10 @@ const COMBINED_BELOW = 100 // two × 100 + gap = 208 < 236
 
 // Width threshold: availableWidth / RATIO = (900-58-58)/2 = 392
 const ABOVE_W_THRESHOLD = 400
-const COMBINED_ABOVE_W = 200 // two × 200 = 400 > 392 → triggers combined
-const COMBINED_BELOW_W = 180 // two × 180 = 360 < 392 → does not trigger
-const PANEL_H_TALL = 150
-const PANEL_H_SHORT = 100
+const COMBINED_BELOW_W = 180
 
-const ABOVE_CAP_TOP = 330 // 60+330+8=398 > CAP_HEIGHT ≈ 389.3 → capped
 const BOTTOM_INSET = MAIN_HEIGHT - BOTTOM_TOP + GAP // 48: divider-gap above top of bottom container
+const ABOVE_CAP_TOP = 330 // 60+330+8=398 > CAP_HEIGHT ≈ 389.3 → capped
 const ABOVE_CAP_BOTTOM = 342 // 48+342+8=398 > CAP_HEIGHT → capped
 
 const PANEL_W_STANDARD = 200
@@ -42,6 +39,7 @@ const PANEL_W_XLARGE = 600 // 10+600+8=618 > CAP_WIDTH ≈ 589.3 → capped
 const leftInset = w => LEFT_LEFT + w + GAP
 const rightInset = w => LEFT_LEFT + w + GAP
 const topInset = h => BASE_TOP + h + GAP
+const bottomInset = h => BOTTOM_INSET + h + GAP
 
 const MAX_RATIO = 3
 const CAP_WIDTH = (MAIN_WIDTH - 2 * GAP) * (MAX_RATIO - 1) / MAX_RATIO
@@ -192,46 +190,22 @@ describe('getSafeZoneInset — right edge', () => {
 })
 
 // ─── Top edge ────────────────────────────────────────────────────────────────
-// Trigger is WIDTH-based. A narrow panel must not add top padding even if tall.
+// Trigger is WIDTH-based, evaluated independently of the column (height-based) trigger.
 
 describe('getSafeZoneInset — top edge', () => {
   it('does not trigger when top panel is narrow, even if tall', () => {
-    // PANEL_W_STANDARD (200) < width threshold (392)
     expect(getSafeZoneInset({ ...base(), rightTopRef: panel(PANEL_W_STANDARD, ABOVE_THRESHOLD) }).top).toBe(BASE_TOP)
   })
-  it('triggers when a top panel width exceeds threshold', () => {
-    expect(getSafeZoneInset({ ...base(), leftTopRef: panel(ABOVE_W_THRESHOLD, ABOVE_THRESHOLD) }).top)
-      .toBe(topInset(ABOVE_THRESHOLD))
-  })
-  it('column-primary wide-and-tall top panel triggers left inset, not top', () => {
-    // panel(400,330): h/availableH≈0.699 > w/availableW≈0.510 → column-primary
+  it('triggers when a top panel is wide enough, capped at (MAX_RATIO-1)/MAX_RATIO of usable height', () => {
     const result = getSafeZoneInset({ ...base(), leftTopRef: panel(ABOVE_W_THRESHOLD, ABOVE_CAP_TOP) })
+    expect(result.top).toBe(CAP_HEIGHT)
     expect(result.left).toBe(leftInset(ABOVE_W_THRESHOLD))
-    expect(result.top).toBe(BASE_TOP)
-  })
-  it('when top panels have mixed primaries, each contributes to its own edge', () => {
-    // tl(400,100): row-primary → top; tr(400,330): column-primary → right
-    const result = getSafeZoneInset({
-      ...base(),
-      leftTopRef: panel(ABOVE_W_THRESHOLD, COMBINED_BELOW),
-      rightTopRef: panel(ABOVE_W_THRESHOLD, ABOVE_CAP_TOP)
-    })
-    expect(result.top).toBe(topInset(COMBINED_BELOW))
-    expect(result.right).toBe(rightInset(ABOVE_W_THRESHOLD))
-  })
-  it('triggers when combined width of two top panels exceeds threshold; uses max height', () => {
-    // each COMBINED_ABOVE_W (200) < threshold (392), but 200+200=400 > 392
-    expect(getSafeZoneInset({
-      ...base(),
-      leftTopRef: panel(COMBINED_ABOVE_W, PANEL_H_TALL),
-      rightTopRef: panel(COMBINED_ABOVE_W, PANEL_H_SHORT)
-    }).top).toBe(topInset(PANEL_H_TALL))
   })
-  it('does not trigger when both top panels are below combined width threshold', () => {
+  it('does not trigger when combined width of two top panels is below threshold', () => {
     expect(getSafeZoneInset({
       ...base(),
-      leftTopRef: panel(COMBINED_BELOW_W, ABOVE_THRESHOLD),
-      rightTopRef: panel(COMBINED_BELOW_W, ABOVE_THRESHOLD)
+      leftTopRef: panel(COMBINED_BELOW_W, BELOW_THRESHOLD),
+      rightTopRef: panel(COMBINED_BELOW_W, BELOW_THRESHOLD)
     }).top).toBe(BASE_TOP)
   })
 })
@@ -242,28 +216,21 @@ describe('getSafeZoneInset — bottom edge', () => {
   it('does not trigger when bottom panel is narrow, even if tall', () => {
     expect(getSafeZoneInset({ ...base(), rightBottomRef: panel(PANEL_W_STANDARD, ABOVE_THRESHOLD) }).bottom).toBe(BASE_BOTTOM)
   })
-  it('triggers when a bottom panel width exceeds threshold', () => {
-    expect(getSafeZoneInset({ ...base(), leftBottomRef: panel(ABOVE_W_THRESHOLD, ABOVE_THRESHOLD) }).bottom)
-      .toBe(Math.min(BOTTOM_INSET + ABOVE_THRESHOLD + GAP, CAP_HEIGHT))
-  })
-  it('column-primary wide-and-tall bottom panel triggers left inset, not bottom', () => {
-    // panel(400,342): h/availableH≈0.724 > w/availableW≈0.510 → column-primary
+  it('triggers when a bottom panel is wide enough, capped at (MAX_RATIO-1)/MAX_RATIO of usable height', () => {
     const result = getSafeZoneInset({ ...base(), leftBottomRef: panel(ABOVE_W_THRESHOLD, ABOVE_CAP_BOTTOM) })
+    expect(result.bottom).toBe(CAP_HEIGHT)
     expect(result.left).toBe(leftInset(ABOVE_W_THRESHOLD))
-    expect(result.bottom).toBe(BASE_BOTTOM)
   })
-  it('triggers when combined width of two bottom panels exceeds threshold; uses max height', () => {
-    expect(getSafeZoneInset({
-      ...base(),
-      leftBottomRef: panel(COMBINED_ABOVE_W, PANEL_H_TALL),
-      rightBottomRef: panel(COMBINED_ABOVE_W, PANEL_H_SHORT)
-    }).bottom).toBe(Math.min(BOTTOM_INSET + PANEL_H_TALL + GAP, CAP_HEIGHT))
+  it('triggers when a bottom panel is wide enough, using the taller of the two slots', () => {
+    const result = getSafeZoneInset({ ...base(), rightBottomRef: panel(ABOVE_W_THRESHOLD, ABOVE_THRESHOLD) })
+    expect(result.bottom).toBe(bottomInset(ABOVE_THRESHOLD))
+    expect(result.right).toBe(rightInset(ABOVE_W_THRESHOLD))
   })
-  it('does not trigger when both bottom panels are below combined width threshold', () => {
+  it('does not trigger when combined width of two bottom panels is below threshold', () => {
     expect(getSafeZoneInset({
       ...base(),
-      leftBottomRef: panel(COMBINED_BELOW_W, ABOVE_THRESHOLD),
-      rightBottomRef: panel(COMBINED_BELOW_W, ABOVE_THRESHOLD)
+      leftBottomRef: panel(COMBINED_BELOW_W, BELOW_THRESHOLD),
+      rightBottomRef: panel(COMBINED_BELOW_W, BELOW_THRESHOLD)
     }).bottom).toBe(BASE_BOTTOM)
   })
 })
@@ -279,30 +246,35 @@ describe('getSafeZoneInset — MAX_RATIO cap', () => {
   })
 })
 
-// ─── Corner panel independence ────────────────────────────────────────────────
+// ─── Row/column independence ───────────────────────────────────────────────────
+// A panel that is both tall enough and wide enough triggers BOTH its column (left/
+// right) and row (top/bottom) insets at once — not an exclusive either/or pick.
+// MAX_RATIO (tested above) is what keeps this from consuming the whole viewport.
 
-describe('getSafeZoneInset — corner panel independence', () => {
-  it('narrow-but-tall corner panel triggers side inset only (not top)', () => {
-    // PANEL_W_STANDARD (200): tall enough for right, too narrow for top (< 392)
+describe('getSafeZoneInset — row/column independence', () => {
+  it('narrow-but-tall panel triggers only its column inset, not the row', () => {
     const result = getSafeZoneInset({ ...base(), rightTopRef: panel(PANEL_W_STANDARD, ABOVE_THRESHOLD) })
     expect(result.right).toBe(rightInset(PANEL_W_STANDARD))
     expect(result.top).toBe(BASE_TOP)
   })
-  it('wide-and-tall corner panel triggers only its primary (row) edge inset', () => {
-    // panel(400, 240): w/availableW≈0.510, h/availableH≈0.508 → row-primary → top only
-    const result = getSafeZoneInset({ ...base(), leftTopRef: panel(ABOVE_W_THRESHOLD, ABOVE_THRESHOLD) })
+  it('wide-but-short panel triggers only its row inset, not the column', () => {
+    const result = getSafeZoneInset({ ...base(), leftTopRef: panel(ABOVE_W_THRESHOLD, BELOW_THRESHOLD) })
+    expect(result.top).toBe(topInset(BELOW_THRESHOLD))
     expect(result.left).toBe(BASE_LEFT)
+  })
+  it('wide-and-tall panel triggers both its column and row insets at once', () => {
+    const result = getSafeZoneInset({ ...base(), leftTopRef: panel(ABOVE_W_THRESHOLD, ABOVE_THRESHOLD) })
+    expect(result.left).toBe(leftInset(ABOVE_W_THRESHOLD))
     expect(result.top).toBe(topInset(ABOVE_THRESHOLD))
   })
-  it('two wide panels in the same column collectively trigger left but not top or bottom', () => {
-    // Each h=COMBINED_ABOVE (120) < hThreshold individually, combined 248 > 236
-    // Each w=ABOVE_W_THRESHOLD (400) > wThreshold → left column triggers, excluding from top/bottom
+  it('two narrow panels in the same column collectively trigger left, independent of row', () => {
+    // Each h=COMBINED_ABOVE (120) < hThreshold individually, combined 248 > 236 → left triggers
     const result = getSafeZoneInset({
       ...base(),
-      leftTopRef: panel(ABOVE_W_THRESHOLD, COMBINED_ABOVE),
-      leftBottomRef: panel(ABOVE_W_THRESHOLD, COMBINED_ABOVE)
+      leftTopRef: panel(PANEL_W_STANDARD, COMBINED_ABOVE),
+      leftBottomRef: panel(PANEL_W_STANDARD, COMBINED_ABOVE)
     })
-    expect(result.left).toBe(leftInset(ABOVE_W_THRESHOLD))
+    expect(result.left).toBe(leftInset(PANEL_W_STANDARD))
     expect(result.top).toBe(BASE_TOP)
     expect(result.bottom).toBe(BASE_BOTTOM)
   })