@defra/interactive-map 0.0.46-alpha → 0.0.46-fmp-2

package/providers/beta/openlayers/src/openlayersProvider.js

@@ -64,7 +64,7 @@ export default class OpenLayersProvider extends MapProvider {
       projection: CRS,
       center: center ?? (bounds ? getExtentCenter(bounds) : undefined),
       zoom: zoom ?? viewResolutions.defaultMinZoom,
-      minZoom: Math.max(minZoom ?? viewResolutions.defaultMinZoom, viewResolutions.defaultMinZoom),
+      minZoom: minZoom ?? viewResolutions.defaultMinZoom,
       maxZoom: maxZoom ?? viewResolutions.maxZoom,
       resolutions: viewResolutions.resolutions,
       constrainResolution: false,

package/providers/beta/openlayers/src/openlayersProvider.test.js

@@ -174,6 +174,28 @@ describe('OpenLayersProvider', () => {
       expect(View).toHaveBeenCalledWith(expect.objectContaining({ center: [400000, 300000] }))
     })
 
+    it('passes minZoom and maxZoom through to the View unchanged', async () => {
+      const { provider } = makeProvider({ zoomAlignment: 'world' })
+      await provider.initMap({ ...defaultInitConfig, minZoom: 8, maxZoom: 12 })
+      expect(View).toHaveBeenCalledWith(expect.objectContaining({ minZoom: 8, maxZoom: 12 }))
+    })
+
+    // Regression: minZoom used to be floored at the zoom alignment's default via Math.max(),
+    // silently overriding any caller-supplied minZoom that was more permissive (lower) than
+    // that default — e.g. a consumer trying to let people zoom out further than the 'world'
+    // alignment's default minZoom of 6 had their config ignored.
+    it('does not clamp a minZoom below the zoom alignment default', async () => {
+      const { provider } = makeProvider({ zoomAlignment: 'world' })
+      await provider.initMap({ ...defaultInitConfig, minZoom: 0 })
+      expect(View).toHaveBeenCalledWith(expect.objectContaining({ minZoom: 0 }))
+    })
+
+    it('falls back to the zoom alignment defaults when minZoom/maxZoom are not provided', async () => {
+      const { provider } = makeProvider({ zoomAlignment: 'world' })
+      await provider.initMap({ ...defaultInitConfig, minZoom: null, maxZoom: null })
+      expect(View).toHaveBeenCalledWith(expect.objectContaining({ minZoom: 6, maxZoom: 20 }))
+    })
+
     it('creates the initial layer from the map style', async () => {
       const { provider } = makeProvider()
       await provider.initMap(defaultInitConfig)

package/providers/beta/openlayers/src/utils/highlightFeatures.js

@@ -1,4 +1,3 @@
-import VectorTileLayer from 'ol/layer/VectorTile.js'
 import VectorLayer from 'ol/layer/Vector.js'
 import VectorSource from 'ol/source/Vector.js'
 import Feature from 'ol/Feature.js'
@@ -18,6 +17,11 @@ const geoJsonFormat = new GeoJSON({ dataProjection: CRS, featureProjection: CRS
 const HIGHLIGHT_MARKER = '_highlight'
 const HIGHLIGHT_Z = 999
 
+// Layers are classified by a `layerType` tag ('vector' | 'vectorTile') set at creation,
+// not `instanceof VectorLayer`/`VectorTileLayer` — a UMD consumer loads this provider and
+// other plugins (e.g. draw) as independently-bundled scripts, each with its own copy of
+// ol, so a class reference from this bundle never matches an instance built by another.
+
 const buildHighlightStyles = (styleEntry, isActive) => {
   if (!styleEntry) {
     return []
@@ -40,6 +44,13 @@ const buildHighlightStyles = (styleEntry, isActive) => {
 
 const hasSymbolStyle = (properties) => !!(properties?.symbol || properties?.symbolSvgContent)
 
+const toStyleArray = (style) => {
+  if (!style) {
+    return []
+  }
+  return Array.isArray(style) ? style : [style]
+}
+
 // A drawn point renders as a real symbol icon, not Stroke/Fill, so its selected/active ring is
 // the active/selected variant of that same icon instead. Returns null (not []) for a
 // non-symbol feature so the caller falls through to buildHighlightStyles.
@@ -83,7 +94,7 @@ const buildFeatureKeyIndex = (features) => {
 
 const wrapVtLayers = (map, selectedKeys, activeKeys, idPropsMap, stylesMap) => {
   map.getLayers().forEach(layer => {
-    if (!(layer instanceof VectorTileLayer)) {
+    if (layer.get('layerType') !== 'vectorTile') {
       return
     }
 
@@ -124,8 +135,7 @@ const wrapVtLayers = (map, selectedKeys, activeKeys, idPropsMap, stylesMap) => {
         return base
       }
 
-      const baseArr = base ? (Array.isArray(base) ? base : [base]) : []
-      return [...baseArr, ...highlightStyles]
+      return [...toStyleArray(base), ...highlightStyles]
     })
     // setStyle() calls layer.changed() internally — no source.changed() needed
     // (source.changed() works but causes a visible flicker on selection)
@@ -148,6 +158,7 @@ const getOrCreateHighlightLayer = (map) => {
   if (!layer) {
     layer = new VectorLayer({ source: new VectorSource(), zIndex: HIGHLIGHT_Z + 2 })
     layer.set(HIGHLIGHT_MARKER, true)
+    layer.set('layerType', 'vector')
     map.addLayer(layer)
   }
   return layer
@@ -162,7 +173,7 @@ const getLiveProperties = (map, layerId, featureId) => {
   }
   let properties
   map.getLayers().forEach(l => {
-    if (properties || !(l instanceof VectorLayer) || l.get(HIGHLIGHT_MARKER) || l.get('layerId') !== layerId) {
+    if (properties || l.get('layerType') !== 'vector' || l.get(HIGHLIGHT_MARKER) || l.get('layerId') !== layerId) {
       return
     }
     const feature = l.getSource()?.getFeatureById(String(featureId))
@@ -180,12 +191,11 @@ const addVectorHighlights = (map, source, features, isActive, stylesMap) => {
     }
     const liveProperties = getLiveProperties(map, layerId, featureId)
     const styles = buildSymbolHighlightStyle(liveProperties, isActive) ?? buildHighlightStyles(stylesMap?.[layerId], isActive)
-    if (!styles.length) {
-      continue
+    if (styles.length) {
+      const olFeature = new Feature({ geometry: geoJsonFormat.readGeometry(geometry) })
+      olFeature.setStyle(styles)
+      source.addFeature(olFeature)
     }
-    const olFeature = new Feature({ geometry: geoJsonFormat.readGeometry(geometry) })
-    olFeature.setStyle(styles)
-    source.addFeature(olFeature)
   }
 }
 
@@ -206,6 +216,8 @@ const expandBoundsFromGeometry = (geometry, cb) => {
     coordinates.forEach(visitRing)
   } else if (type === 'MultiPolygon') {
     coordinates.forEach(poly => poly.forEach(visitRing))
+  } else {
+    // unsupported/unrecognised geometry type — nothing to expand bounds by
   }
 }
 
@@ -260,7 +272,7 @@ export const updateHighlightedFeatures = (map, selectedFeatures, activeFeatures,
   // Determine which layerIds belong to plain VectorLayers vs VT layers
   const vectorLayerIds = new Set()
   map.getLayers().forEach(l => {
-    if (l instanceof VectorLayer && !l.get(HIGHLIGHT_MARKER)) {
+    if (l.get('layerType') === 'vector' && !l.get(HIGHLIGHT_MARKER)) {
       const id = l.get('layerId')
       if (id) {
         vectorLayerIds.add(id)

package/providers/beta/openlayers/src/utils/highlightFeatures.test.js

@@ -38,6 +38,7 @@ const drawLayer = (features = []) => {
   })
   const layer = new VectorLayer({ source })
   layer.set('layerId', 'draw')
+  layer.set('layerType', 'vector') // mirrors OLDrawManager.js's own tagging
   return layer
 }
 
@@ -170,6 +171,7 @@ describe('updateHighlightedFeatures', () => {
 describe('VectorTileLayer style-wrap (smoke test — pre-existing, undocumented path)', () => {
   test('does not throw when a VT layer is present alongside a draw VectorLayer', () => {
     const vt = new VectorTileLayer({})
+    vt.set('layerType', 'vectorTile')
     const map = createFakeMap([vt, drawLayer()])
     expect(() => updateHighlightedFeatures(map, [], [], {})).not.toThrow()
   })

package/providers/beta/openlayers/src/utils/hoverCursor.js

@@ -1,15 +1,16 @@
-import VectorTileLayer from 'ol/layer/VectorTile.js'
-import VectorLayer from 'ol/layer/Vector.js'
-
 const HIGHLIGHT_MARKER = '_highlight'
 const HIT_TOLERANCE = 8
 
+// Layers are classified by a `layerType` tag ('vector' | 'vectorTile') set at creation,
+// not `instanceof VectorLayer`/`VectorTileLayer` — a UMD consumer loads this provider and
+// other plugins (e.g. draw) as independently-bundled scripts, each with its own copy of
+// ol, so a class reference from this bundle never matches an instance built by another.
 const isInteractiveFeature = (feature, layer, layerSet) => {
-  if (layer instanceof VectorTileLayer) {
+  if (layer.get('layerType') === 'vectorTile') {
     const styleLayerId = feature.get('mapbox-layer')?.id
     return Boolean(styleLayerId && layerSet.has(styleLayerId))
   }
-  if (layer instanceof VectorLayer && !layer.get(HIGHLIGHT_MARKER)) {
+  if (layer.get('layerType') === 'vector' && !layer.get(HIGHLIGHT_MARKER)) {
     const layerId = layer.get('layerId')
     return Boolean(layerId && layerSet.has(layerId))
   }

package/providers/beta/openlayers/src/utils/hoverCursor.test.js

@@ -26,13 +26,14 @@ const makeVectorFeature = () => ({ get: () => undefined })
 
 const makeVTLayer = () => {
   const layer = new VectorTileLayer()
-  layer.get = () => undefined
+  layer.get = (key) => key === 'layerType' ? 'vectorTile' : undefined
   return layer
 }
 
 const makeVectorLayer = (layerId, isHighlight = false) => {
   const layer = new VectorLayer()
   layer.get = (key) => {
+    if (key === 'layerType') return 'vector'
     if (key === '_highlight') return isHighlight ? true : undefined
     if (key === 'layerId') return layerId
     return undefined

package/providers/beta/openlayers/src/utils/queryFeatures.js

@@ -1,5 +1,3 @@
-import VectorTileLayer from 'ol/layer/VectorTile.js'
-import VectorLayer from 'ol/layer/Vector.js'
 import GeoJSON from 'ol/format/GeoJSON.js'
 import TileState from 'ol/TileState.js'
 import { renderFeatureToGeoJSON } from './vtTileFragments.js'
@@ -8,6 +6,11 @@ const CRS = 'EPSG:27700'
 
 const geoJsonFormat = new GeoJSON({ dataProjection: CRS, featureProjection: CRS })
 
+// Layers are classified by a `layerType` tag ('vector' | 'vectorTile') set at creation,
+// not `instanceof VectorLayer`/`VectorTileLayer` — a UMD consumer loads this provider and
+// other plugins (e.g. draw) as independently-bundled scripts, each with its own copy of
+// ol, so a class reference from this bundle never matches an instance built by another.
+
 // Mirror MapLibre's fallback: use property hash when feature has no explicit MVT ID.
 // This deduplicates tile-split fragments that share the same properties.
 const getVtFeatureId = (feature) => {
@@ -32,7 +35,7 @@ export const queryFeatures = (map, point, options = {}) => {
   map.forEachFeatureAtPixel(
     pixel,
     (feature, layer) => {
-      if (layer instanceof VectorTileLayer) {
+      if (layer.get('layerType') === 'vectorTile') {
         const mapboxLayer = feature.get('mapbox-layer')
         const styleLayerId = mapboxLayer?.id
         // background-type layers have no features in MapLibre — skip to match behaviour
@@ -50,7 +53,7 @@ export const queryFeatures = (map, point, options = {}) => {
           geometry: renderFeatureToGeoJSON(feature),
           properties: feature.getProperties()
         })
-      } else if (layer instanceof VectorLayer) {
+      } else if (layer.get('layerType') === 'vector') {
         const layerId = layer.get('layerId')
         if (!layerId || layer.get('_highlight')) {
           return
@@ -98,7 +101,7 @@ export const getVisibleFeatures = (map, layerIds) => {
   const extent = map.getView().calculateExtent(map.getSize())
 
   map.getLayers().forEach(mapLayer => {
-    if (mapLayer instanceof VectorTileLayer) {
+    if (mapLayer.get('layerType') === 'vectorTile') {
       const sourceTiles = mapLayer.getSource()?.sourceTiles_
       if (!sourceTiles) {
         return
@@ -127,7 +130,7 @@ export const getVisibleFeatures = (map, layerIds) => {
           })
         })
       })
-    } else if (mapLayer instanceof VectorLayer) {
+    } else if (mapLayer.get('layerType') === 'vector') {
       const layerId = mapLayer.get('layerId')
       if (!layerId || !wanted.has(layerId) || mapLayer.get('_highlight')) {
         return

package/providers/beta/openlayers/src/utils/queryFeatures.test.js

@@ -24,7 +24,7 @@ const makeMap = (hits = []) => ({
   })
 })
 
-const makeVTLayer = () => Object.assign(new VectorTileLayer(), { get: () => undefined })
+const makeVTLayer = () => Object.assign(new VectorTileLayer(), { get: (key) => key === 'layerType' ? 'vectorTile' : undefined })
 
 const makeVTFeature = ({ id = undefined, styleLayerId = 'roads', type = 'fill', props = {} } = {}) => ({
   getId: () => id,
@@ -37,6 +37,7 @@ const makeVTFeature = ({ id = undefined, styleLayerId = 'roads', type = 'fill',
 
 const makeVectorLayer = (layerId, isHighlight = false) => Object.assign(new VectorLayer(), {
   get: (key) => {
+    if (key === 'layerType') return 'vector'
     if (key === 'layerId') return layerId
     if (key === '_highlight') return isHighlight || undefined
     return undefined
@@ -170,7 +171,7 @@ describe('queryFeatures', () => {
 
   it('skips features from other layer types', () => {
     const feature = makeVectorFeature('f1')
-    const map = makeMap([[feature, {}]]) // plain object, not VectorTileLayer or VectorLayer
+    const map = makeMap([[feature, { get: () => undefined }]]) // untagged, not a vector/vectorTile layer
     expect(queryFeatures(map, { x: 0, y: 0 })).toEqual([])
   })
 
@@ -199,6 +200,7 @@ describe('getVisibleFeatures', () => {
   })
 
   const makeVTLayerWithTiles = (tiles) => Object.assign(new VectorTileLayer(), {
+    get: (key) => key === 'layerType' ? 'vectorTile' : undefined,
     getSource: () => ({ sourceTiles_: tiles })
   })
 
@@ -206,6 +208,7 @@ describe('getVisibleFeatures', () => {
     const source = { getFeaturesInExtent: jest.fn(() => features) }
     return Object.assign(new VectorLayer(), {
       get: (key) => {
+        if (key === 'layerType') return 'vector'
         if (key === 'layerId') return layerId
         if (key === '_highlight') return isHighlight || undefined
         return undefined
@@ -290,7 +293,7 @@ describe('getVisibleFeatures', () => {
   /* ------------------------------------------------------------------ */
 
   it('skips layers that are neither VectorTileLayer nor VectorLayer', () => {
-    expect(getVisibleFeatures(makeExtentMap([{}]), ['draw'])).toEqual([])
+    expect(getVisibleFeatures(makeExtentMap([{ get: () => undefined }]), ['draw'])).toEqual([])
   })
 
   it('returns results from both VT and Vector layers in one call', () => {

package/providers/beta/openlayers/src/utils/spatial.js

@@ -1,5 +1,4 @@
 import turfBbox from '@turf/bbox'
-import { transformExtent } from 'ol/proj.js'
 
 // In EPSG:27700 coordinates are projected metres — distances are Pythagorean, no geodesy needed
 
@@ -63,18 +62,11 @@ const getCardinalMove = (from, to) => {
 }
 
 /**
- * Get a flat bbox [west, south, east, north] in WGS84 from any GeoJSON object.
+ * Get a flat extent [xmin, ymin, xmax, ymax] from any GeoJSON object.
+ * GeoJSON fed into the OL provider is already in EPSG:27700 (the view's native
+ * CRS), not WGS84, so this is a straight bbox — no reprojection.
  */
-const getBboxFromGeoJSON = (geojson) => turfBbox(geojson)
-
-/**
- * Get a flat extent [xmin, ymin, xmax, ymax] in EPSG:27700 from any GeoJSON object.
- * GeoJSON is always WGS84, so this transforms the bbox.
- */
-const getExtentFromGeoJSON = (geojson) => {
-  const wgs84Bbox = turfBbox(geojson)
-  return transformExtent(wgs84Bbox, 'EPSG:4326', 'EPSG:27700')
-}
+const getExtentFromGeoJSON = (geojson) => turfBbox(geojson)
 
 /**
  * Returns the visible (padded) extent [xmin, ymin, xmax, ymax] in EPSG:27700.
@@ -114,9 +106,9 @@ const isGeometryObscured = (geojson, panelRect, map) => {
   const scaleX = viewportRect.width / containerRect.width
   const scaleY = viewportRect.height / containerRect.height
 
-  const [west, south, east, north] = getBboxFromGeoJSON(geojson)
+  const [xmin, ymin, xmax, ymax] = getExtentFromGeoJSON(geojson)
 
-  const corners = [[west, south], [west, north], [east, south], [east, north]].map(coord => {
+  const corners = [[xmin, ymin], [xmin, ymax], [xmax, ymin], [xmax, ymax]].map(coord => {
     return map.getPixelFromCoordinate(coord)
   }).filter(Boolean)
 
@@ -140,7 +132,6 @@ const isGeometryObscured = (geojson, panelRect, map) => {
 export {
   getAreaDimensions,
   getCardinalMove,
-  getBboxFromGeoJSON,
   getExtentFromGeoJSON,
   getPaddedExtent,
   isGeometryObscured,

package/providers/beta/openlayers/src/utils/spatial.test.js

@@ -7,12 +7,6 @@ import {
   isGeometryObscured
 } from './spatial.js'
 
-jest.mock('ol/proj.js', () => ({
-  __esModule: true,
-  transform: (coord) => coord,
-  transformExtent: (extent) => extent
-}))
-
 describe('formatDimension', () => {
   it('formats sub-mile distances in metres', () => {
     expect(formatDimension(400)).toBe('400 metres')
@@ -65,9 +59,9 @@ describe('getCardinalMove', () => {
 })
 
 describe('getExtentFromGeoJSON', () => {
-  it('returns a 4-element extent from a GeoJSON point', () => {
-    const point = { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 51] } }
-    expect(getExtentFromGeoJSON(point)).toEqual([0, 51, 0, 51])
+  it('returns a 4-element extent from a GeoJSON point, unchanged (no reprojection)', () => {
+    const point = { type: 'Feature', geometry: { type: 'Point', coordinates: [432500, 250000] } }
+    expect(getExtentFromGeoJSON(point)).toEqual([432500, 250000, 432500, 250000])
   })
 })
 

package/providers/beta/openlayers/src/utils/tileLayers.js

@@ -139,6 +139,10 @@ export async function createVectorTileLayer (url, transformRequest, { renderMode
     tileGrid
   })
   const layer = new VectorTileLayer({ source, declutter: true, ...(renderMode && { renderMode }) })
+  // Tagged rather than left to `instanceof VectorTileLayer` — a UMD consumer loads this
+  // provider and other plugins as independently-bundled scripts, each with its own copy
+  // of ol, so a class reference from one bundle never matches an instance from another.
+  layer.set('layerType', 'vectorTile')
 
   stylefunction(layer, styleJson, sourceId, resolutions, spritesJson, sprite.pngUrl)
 
@@ -171,6 +175,7 @@ export async function createOGCVectorTileLayer (url, transformRequest, { renderM
   const tileGrid = new TileGrid({ resolutions, origin, tileSize })
   const source = new OGCVectorTile({ url: tilesUrl, format, tileGrid, projection: CRS })
   const layer = new VectorTileLayer({ source, declutter: true, ...(renderMode && { renderMode }) })
+  layer.set('layerType', 'vectorTile')
 
   stylefunction(layer, styleJson, sourceId, resolutions, spritesJson, sprite.pngUrl)
 

package/providers/beta/openlayers/src/utils/tileLayers.test.js

@@ -14,7 +14,7 @@ const mockWMSSourceInstance = {}
 const mockTileLayerInstance = {}
 const mockVectorTileSourceInstance = {}
 const mockOGCVectorTileSourceInstance = { supportedMediaTypes: [] }
-const mockVectorTileLayerInstance = {}
+const mockVectorTileLayerInstance = { set: jest.fn() }
 const mockMVTInstance = { supportedMediaTypes: [] }
 
 jest.mock('ol/source/XYZ.js', () => ({ __esModule: true, default: jest.fn(() => mockSourceInstance) }))

package/src/App/components/Attributions/Attributions.jsx

@@ -12,8 +12,10 @@ export const Attributions = () => {
     return null
   }
 
+  const isMobile = breakpoint === 'mobile'
+
   return (
-    breakpoint !== 'mobile' && (
+    (!isMobile || mapStyle.showAttributionOnMobile) && (
       <div className='im-c-attributions' dangerouslySetInnerHTML={{ __html: mapStyle.attribution }} />
     )
   )

package/src/App/components/Attributions/Attributions.module.scss

@@ -5,9 +5,13 @@
     background-color: var(--attributions-background-color);
     padding: var(--attributions-padding);
     font-size: var(--attributions-font-size);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    // Wraps rather than truncating so the text stays fully readable, capped to whatever
+    // width .im-o-app__attributions (layout.module.scss) currently gives it — the space
+    // beside the logo when docked, or the full row (--attributions--stacked) when it doesn't fit there.
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: break-word;
+    text-align: right;
     pointer-events: auto;
 }
 

package/src/App/components/Attributions/Attributions.test.jsx

@@ -42,4 +42,12 @@ describe('Attributions', () => {
     const { container } = render(<Attributions />)
     expect(container.firstChild).toBeNull()
   })
+
+  it('renders on mobile when the style opts in via showAttributionOnMobile', () => {
+    useApp.mockReturnValue({ breakpoint: 'mobile' })
+    useMap.mockReturnValue({ mapStyle: { attribution: '<span>© Test</span>', showAttributionOnMobile: true } })
+
+    render(<Attributions />)
+    expect(screen.getByText('© Test')).toBeInTheDocument()
+  })
 })

package/src/App/hooks/useLayoutMeasurements.js

@@ -6,6 +6,7 @@ import { getSafeZoneInset } from '../../utils/getSafeZoneInset.js'
 
 const BANNER_DOCKED_CLASS = 'im-o-app__banner--docked'
 const BANNER_PANEL_SELECTOR = '.im-c-panel--banner'
+const ATTRIBUTIONS_STACKED_CLASS = 'im-o-app__attributions--stacked'
 
 const buttonHeight = (ref) => ref?.current?.offsetHeight ?? 0
 const buttonWidth = (ref) => ref?.current?.offsetWidth ?? 0
@@ -19,12 +20,16 @@ const subSlotMaxHeight = (columnHeight, siblingButtons, gap) => columnHeight - (
 const rightOffsetBottom = (containerPad, bottomRightHeight, attributionsHeight, gap) =>
   containerPad + (bottomRightHeight > 0 ? bottomRightHeight + gap : attributionsHeight)
 
-// Mobile's actions bar sits in flow (already reflected in baseBottom); tablet/desktop's floats, so this clears it too.
+// Clears the bottom row's own TOP edge (not just its trailing gap below), so the hint
+// never overlaps the logo/attribution row itself, plus a gap above it. That trivially
+// also clears anything after the row in flow — mobile's in-flow actions bar included.
+// Tablet/desktop's floating actions bar can sit independently higher than the row, so
+// still needs its own explicit clearance, hence the Math.max with actionsOffset below.
 const hintBottom = (main, bottom, actionsEl, gap) => {
-  const baseBottom = main.offsetHeight - bottom.offsetTop - bottom.offsetHeight
+  const clearsBottomRow = main.offsetHeight - bottom.offsetTop + gap
   const actionsHeight = actionsEl?.offsetHeight ?? 0
   const actionsOffset = actionsHeight > 0 ? main.offsetHeight - actionsEl.offsetTop : 0
-  return Math.max(baseBottom, actionsOffset + gap)
+  return Math.max(clearsBottomRow, actionsOffset + gap)
 }
 
 // Space between .im-o-app__left/.im-o-app__right for the banner to dock in.
@@ -49,6 +54,81 @@ const clearBannerPanelWidths = (bannerEl) => {
 const bannerInset = (isDocked, primaryGap, sideColWidth, gap) =>
   isDocked ? primaryGap + sideColWidth + gap : primaryGap
 
+// Natural (unwrapped) width of the attribution text, measured by forcing nowrap just long
+// enough to read scrollWidth, then restoring — same "mutate, measure, restore" approach as
+// clearBannerPanelWidths/bannerConfiguredWidth above. Needed because once wrapping is
+// allowed, scrollWidth alone can't tell us how wide the text *would* be on one line.
+const attributionsNaturalWidth = (attributionsEl) => {
+  const textEl = attributionsEl?.firstElementChild
+  if (!textEl) {
+    return 0
+  }
+  const previousWhiteSpace = textEl.style.whiteSpace
+  textEl.style.whiteSpace = 'nowrap'
+  const width = textEl.scrollWidth
+  textEl.style.whiteSpace = previousWhiteSpace
+  return width
+}
+
+// Stacks (drops to its own full-width row below the logo) once the attribution text no
+// longer fits, at its natural width, in the space beside the logo column.
+const isAttributionsStacked = (naturalWidth, availableWidth) => naturalWidth > availableWidth
+
+// Docked, attributions bleeds primaryGap below the row's bottom edge then grows upward from
+// there by its own height — once that height exceeds primaryGap, it creeps back up into the
+// row itself, where .im-o-app__bottom-right shares the same horizontal space. This is how far
+// that needs pushing up to stay clear. Stacked already has its own clearance (the stacked
+// rule's margin-top), so none is needed there.
+const attributionsBottomRightClearance = (isStacked, attributionsHeight, dividerGap, primaryGap) =>
+  isStacked ? 0 : Math.max(0, attributionsHeight + dividerGap - primaryGap)
+
+// Docks centred between the side columns when there's room, otherwise stacks full-width
+// (mobile always stacks). Sets the banner's own CSS vars and returns what the side-column
+// offset calc below needs.
+function applyBannerLayout ({ appContainer, root, top, bannerRef, leftRef, rightRef, isMobile, dividerGap, primaryGap }) {
+  const banner = bannerRef?.current
+  if (isMobile) {
+    clearBannerPanelWidths(banner)
+  }
+  const bannerHeight = buttonHeight(bannerRef)
+  const hasBanner = bannerHeight > 0
+  const bannerSideColWidth = symmetricWidth(buttonWidth(leftRef), buttonWidth(rightRef))
+  const defaultPreferredWidth = Number.parseInt(getComputedStyle(root).getPropertyValue('--banner-preferred-width'), 10)
+  const preferredWidth = bannerConfiguredWidth(banner) ?? defaultPreferredWidth
+  appContainer.style.setProperty('--banner-preferred-width', `${preferredWidth}px`)
+  const gutterWidth = bannerGutterWidth(top.offsetWidth, bannerSideColWidth, dividerGap)
+  const isDocked = !isMobile && isBannerDocked(gutterWidth, preferredWidth)
+  banner?.classList.toggle(BANNER_DOCKED_CLASS, isDocked)
+
+  const bannerSideInset = `${bannerInset(isDocked, primaryGap, bannerSideColWidth, dividerGap)}px`
+  appContainer.style.setProperty('--banner-left', bannerSideInset)
+  appContainer.style.setProperty('--banner-right', bannerSideInset)
+
+  // Sits at the top row's bottom edge; top.offsetHeight already includes a trailing gap.
+  const isBannerStacked = hasBanner && !isDocked
+  const bannerTop = hasBanner ? top.offsetTop + top.offsetHeight : 0
+  appContainer.style.setProperty('--banner-top', `${bannerTop}px`)
+
+  return { isBannerStacked, bannerTop, bannerHeight }
+}
+
+// Docks attributions beside the logo when its natural width fits there, otherwise stacks it
+// onto its own full-width row below (im-o-app__attributions--stacked, in layout.module.scss),
+// genuinely growing .im-o-app__bottom and pushing the logo and bottom-right buttons up. Must
+// run before the offsets below, since toggling the stacked class changes
+// bottom.offsetTop/offsetHeight that they read.
+function applyAttributionsLayout ({ appContainer, bottom, attributions, dividerGap, primaryGap }) {
+  const attributionsCol = bottom.children[1] // the bottom-right column, a DOM sibling of attributions
+  const isStacked = isAttributionsStacked(attributionsNaturalWidth(attributions), attributionsCol?.offsetWidth ?? 0)
+  attributions.classList.toggle(ATTRIBUTIONS_STACKED_CLASS, isStacked)
+  // getBoundingClientRect, not offset math, because .im-o-app__bottom's `justify-content:
+  // space-between` gap between the two columns isn't a fixed value (unlike `gap`) to reconstruct.
+  const left = attributionsCol ? Math.round(attributionsCol.getBoundingClientRect().left - bottom.getBoundingClientRect().left) : 0
+  appContainer.style.setProperty('--attributions-left', `${left}px`)
+  const clearance = attributionsBottomRightClearance(isStacked, attributions.offsetHeight, dividerGap, primaryGap)
+  appContainer.style.setProperty('--bottom-right-clearance', `${clearance}px`)
+}
+
 /**
  * Computes layout CSS vars for the map overlay and dispatches the safe zone inset used
  * for `fitBounds`/`setView`. Waits for `arePluginsEvaluated` so the inset reflects final
@@ -68,7 +148,6 @@ function calculateLayout (layoutRefs, breakpoint) {
   const topRightCol = topRightColRef.current
   const bottom = bottomRef.current
   const attributions = attributionsRef.current
-  const banner = bannerRef?.current
 
   if ([main, top, bottom].some(r => !r)) {
     return
@@ -82,30 +161,12 @@ function calculateLayout (layoutRefs, breakpoint) {
   const topColWidthPx = symmetricWidth(topLeftCol.offsetWidth, topRightCol.offsetWidth)
   appContainer.style.setProperty('--top-col-width', `${topColWidthPx}px`)
 
-  // === Banner: docks centred between the side columns when there's room, otherwise
-  // stacks full-width. Mobile always stacks. ===
+  // Banner: docks centred between the side columns when there's room, otherwise stacks
+  // full-width. Mobile always stacks.
   const isMobile = breakpoint === 'mobile'
-  if (isMobile) {
-    clearBannerPanelWidths(banner)
-  }
-  const bannerHeight = buttonHeight(bannerRef)
-  const hasBanner = bannerHeight > 0
-  const bannerSideColWidth = symmetricWidth(buttonWidth(leftRef), buttonWidth(rightRef))
-  const defaultPreferredWidth = Number.parseInt(getComputedStyle(root).getPropertyValue('--banner-preferred-width'), 10)
-  const preferredWidth = bannerConfiguredWidth(banner) ?? defaultPreferredWidth
-  appContainer.style.setProperty('--banner-preferred-width', `${preferredWidth}px`)
-  const gutterWidth = bannerGutterWidth(top.offsetWidth, bannerSideColWidth, dividerGap)
-  const isDocked = !isMobile && isBannerDocked(gutterWidth, preferredWidth)
-  banner?.classList.toggle(BANNER_DOCKED_CLASS, isDocked)
-
-  const bannerSideInset = `${bannerInset(isDocked, primaryGap, bannerSideColWidth, dividerGap)}px`
-  appContainer.style.setProperty('--banner-left', bannerSideInset)
-  appContainer.style.setProperty('--banner-right', bannerSideInset)
-
-  // Sits at the top row's bottom edge; top.offsetHeight already includes a trailing gap.
-  const isBannerStacked = hasBanner && !isDocked
-  const bannerTop = hasBanner ? top.offsetTop + top.offsetHeight : 0
-  appContainer.style.setProperty('--banner-top', `${bannerTop}px`)
+  const { isBannerStacked, bannerTop, bannerHeight } = applyBannerLayout({
+    appContainer, root, top, bannerRef, leftRef, rightRef, isMobile, dividerGap, primaryGap
+  })
 
   // Stacked pushes the side columns below the banner plus a trailing gap — added here, not
   // via a CSS last-child margin, since closed consumer HTML panels stay in the DOM (display:none).
@@ -113,6 +174,8 @@ function calculateLayout (layoutRefs, breakpoint) {
     ? bannerTop + bannerHeight + dividerGap
     : colHeight + top.offsetTop
 
+  applyAttributionsLayout({ appContainer, bottom, attributions, dividerGap, primaryGap })
+
   // === Left container offsets ===
   const leftOffsetTop = sideOffsetTop(topLeftCol.offsetHeight)
   const leftColumnHeight = bottom.offsetTop - leftOffsetTop - dividerGap
@@ -144,7 +207,7 @@ export function useLayoutMeasurements () {
   const { dispatch, breakpoint, layoutRefs, arePluginsEvaluated, appVisible, isFullscreen } = useApp()
   const { mapSize, isMapReady } = useMap()
 
-  const { bannerRef, mainRef, headerRef, topRef, topLeftColRef, topRightColRef, bottomRef, bottomRightRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef, actionsRef, leftRef, rightRef } = layoutRefs
+  const { bannerRef, mainRef, headerRef, topRef, topLeftColRef, topRightColRef, bottomRef, bottomRightRef, attributionsRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef, actionsRef, leftRef, rightRef } = layoutRefs
 
   // 1. Clear the evaluated flag on structural changes, gating the safe zone until re-evaluated.
   useLayoutEffect(() => {
@@ -168,7 +231,9 @@ export function useLayoutMeasurements () {
   // 3. Recalculate CSS vars on resize; safe zone dispatch stays Effect 2's job.
   // Memoized so useResizeObserver doesn't re-run (and cancel its RAF) on every render.
   const observedRefs = useMemo(
-    () => [bannerRef, mainRef, headerRef, topRef, topLeftColRef, topRightColRef, actionsRef, bottomRef, bottomRightRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef, leftRef, rightRef],
+    // attributionsRef included so its height (now variable, since attribution text can wrap
+    // onto multiple lines) recalculates --right-offset-bottom when the wrap changes.
+    () => [bannerRef, mainRef, headerRef, topRef, topLeftColRef, topRightColRef, actionsRef, bottomRef, bottomRightRef, attributionsRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef, leftRef, rightRef],
     []
   )