@defra/interactive-map 0.0.39-alpha → 0.0.41-alpha

package/providers/maplibre/src/utils/symbolImages.js

@@ -36,10 +36,48 @@ export const anchorToMaplibre = ([ax, ay]) => {
   return (y + (x && y ? '-' : '') + x) || 'center'
 }
 
+// The discrete fraction (0, 0.5 or 1) icon-anchor actually renders a given axis at — the
+// same left/right/top/bottom/center snapping xAnchor/yAnchor above already do, expressed as
+// a number instead of a string so it can be compared against the true, unsnapped fraction.
+const discreteFraction = (a) => {
+  if (a <= ANCHOR_LOW) { return 0 }
+  if (a >= ANCHOR_HIGH) { return 1 }
+  return 0.5
+}
+
+/**
+ * MapLibre's icon-anchor only has 9 discrete positions — anchorToMaplibre above snaps a
+ * fractional anchor to the nearest one, which loses precision for anything off-grid (e.g.
+ * pin's [0.5, 0.9] renders as if it were 1.0/'bottom', shifting the whole icon ~10% of its
+ * height off from where a DOM marker using the same anchor value would place it —
+ * SymbolMarker.jsx positions markers with the exact fraction via CSS margins, with no such
+ * snapping). icon-offset corrects this: the pixel distance, in the icon's own display-space
+ * dimensions (derived from its viewBox), between the true anchor and the discrete one it
+ * snapped to — applied on top of icon-anchor, on both provider and dataset symbol layers.
+ *
+ * @param {number[]} anchor - [x, y] in 0–1 space (the true, unsnapped anchor)
+ * @param {string} viewBox - SVG viewBox string, e.g. '0 0 44 44'
+ * @returns {number[]} [offsetX, offsetY] in pixels, for the icon-offset layout property
+ */
+// Rounded to 2dp: sub-hundredth-of-a-pixel precision is meaningless for rendering, and
+// without it fractions like 0.8 produce float noise (8.799999999999997, not 8.8).
+const round2dp = (n) => Math.round(n * 100) / 100
+
+export const anchorToMaplibreOffset = ([ax, ay], viewBox) => {
+  const [,, width, height] = viewBox.split(' ').map(Number)
+  return [
+    round2dp((discreteFraction(ax) - ax) * width),
+    round2dp((discreteFraction(ay) - ay) * height)
+  ]
+}
+
 /**
  * Register normal, active (both rings) and selected (black ring) symbol images.
  * Skips images that are already registered (safe to call on style change).
- * Updates `map._activeSymbolImageMap` (normal→active) and `map._selectedSymbolImageMap` (normal→selected).
+ * Merges into `map._activeSymbolImageMap` (normal→active) and `map._selectedSymbolImageMap`
+ * (normal→selected) rather than replacing them — more than one caller (e.g. the datasets
+ * and draw plugins) can register symbols on the same map, and each call must add to that
+ * shared registry, not wipe out whatever another caller already registered there.
  *
  * @param {Object} map - MapLibre map instance
  * @param {Object[]} styleArray - an array of symbol configs
@@ -53,8 +91,8 @@ export const addSymbolsToMap = async (map, styleArray, mapStyle, symbolRegistry,
     return
   }
 
-  map._activeSymbolImageMap = {}
-  map._selectedSymbolImageMap = {}
+  map._activeSymbolImageMap ??= {}
+  map._selectedSymbolImageMap ??= {}
 
   await Promise.all(styleArray.flatMap(config => {
     const normalId = symbolRegistry.getSymbolImageId(config, mapStyle, false, pixelRatio)

package/providers/maplibre/src/utils/symbolImages.test.js

@@ -1,4 +1,4 @@
-import { anchorToMaplibre, addSymbolsToMap } from './symbolImages.js'
+import { anchorToMaplibre, anchorToMaplibreOffset, addSymbolsToMap } from './symbolImages.js'
 import { symbolRegistry } from '../../../../src/services/symbolRegistry.js'
 
 beforeAll(() => {
@@ -84,6 +84,36 @@ describe('anchorToMaplibre', () => {
   })
 })
 
+// ─── anchorToMaplibreOffset ───────────────────────────────────────────────────
+
+describe('anchorToMaplibreOffset', () => {
+  const VIEW_BOX = '0 0 44 44'
+
+  it('is zero for an anchor that already sits exactly on a discrete position', () => {
+    expect(anchorToMaplibreOffset([0.5, 0.5], VIEW_BOX)).toEqual([0, 0]) // center
+    expect(anchorToMaplibreOffset([0, 0], VIEW_BOX)).toEqual([0, 0]) // top-left
+    expect(anchorToMaplibreOffset([1, 1], VIEW_BOX)).toEqual([0, 0]) // bottom-right
+  })
+
+  it('corrects for pin-style [0.5, 0.9] snapping to bottom (1.0)', () => {
+    expect(anchorToMaplibreOffset([0.5, 0.9], VIEW_BOX)).toEqual([0, 4.4])
+  })
+
+  it('corrects both axes when both are off-grid', () => {
+    // 0.1 snaps to 'left'/'top' (0), 0.9 snaps to 'right'/'bottom' (1)
+    expect(anchorToMaplibreOffset([0.1, 0.1], VIEW_BOX)).toEqual([-4.4, -4.4])
+    expect(anchorToMaplibreOffset([0.9, 0.9], VIEW_BOX)).toEqual([4.4, 4.4])
+  })
+
+  it('still corrects a value inside the centre band that is not exactly 0.5 — the whole band snaps to 0.5, not just its edges', () => {
+    expect(anchorToMaplibreOffset([0.4, 0.6], VIEW_BOX)).toEqual([4.4, -4.4])
+  })
+
+  it('scales with the viewBox, not just the anchor fraction', () => {
+    expect(anchorToMaplibreOffset([0.5, 0.9], '0 0 100 100')).toEqual([0, 10])
+  })
+})
+
 // ─── addSymbolsToMap ──────────────────────────────────────────────────────────
 
 const makeMap = (existingIds = []) => ({
@@ -103,13 +133,17 @@ describe('addSymbolsToMap — registration', () => {
     expect(map.addImage).not.toHaveBeenCalled()
   })
 
-  it('resets _activeSymbolImageMap and _selectedSymbolImageMap before processing', async () => {
+  it('merges into existing _activeSymbolImageMap/_selectedSymbolImageMap rather than replacing them', async () => {
+    // More than one caller (datasets, draw, ...) can register symbols on the same map —
+    // a later call must add to the shared registry, not wipe an earlier caller's entries.
     const map = makeMap()
-    map._activeSymbolImageMap = { stale: 'entry' }
-    map._selectedSymbolImageMap = { stale: 'entry' }
+    map._activeSymbolImageMap = { 'other-normal-id': 'other-active-id' }
+    map._selectedSymbolImageMap = { 'other-normal-id': 'other-selected-id' }
     await addSymbolsToMap(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
-    expect(map._activeSymbolImageMap).not.toHaveProperty('stale')
-    expect(map._selectedSymbolImageMap).not.toHaveProperty('stale')
+    expect(map._activeSymbolImageMap['other-normal-id']).toBe('other-active-id')
+    expect(map._selectedSymbolImageMap['other-normal-id']).toBe('other-selected-id')
+    const normalId = symbolRegistry.getSymbolImageId({ symbol: 'pin' }, mapStyle, false)
+    expect(map._activeSymbolImageMap).toHaveProperty(normalId)
   })
 
   it('calls addImage for normal, active and selected variants', async () => {

package/rollup.esm.mjs

@@ -182,7 +182,7 @@ const createESMConfig = (entryPath, outDir, isCore = false, manualChunks = null,
         open: false,
         gzipSize: true
       })]
-      : [])
+        : [])
     ],
 
     output: {
@@ -303,6 +303,16 @@ const ALL_BUILDS = [
     entryPath: './plugins/beta/frame/src/index.js',
     outDir: 'plugins/beta/frame/dist/esm',
     manualChunks: (id) => id.includes('/manifest') ? 'im-frame-plugin' : undefined
+  },
+  {
+    entryPath: './plugins/map-key/src/index.js',
+    outDir: 'plugins/map-key/dist/esm',
+    manualChunks: (id) => id.includes('/manifest') ? 'im-map-key-plugin' : undefined
+  },
+  {
+    entryPath: './plugins/menu/src/index.js',
+    outDir: 'plugins/menu/dist/esm',
+    manualChunks: (id) => id.includes('/manifest') ? 'im-menu-plugin' : undefined
   }
 ]
 

package/sonar-project.properties

@@ -17,7 +17,7 @@ sonar.test.inclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**
 sonar.cpd.exclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**,**/__helpers__/**
 
 # Ignored rules
-sonar.issue.ignore.multicriteria=reactPropsJs,reactPropsJsx,preferGlobalThisJs,preferGlobalThisJsx,preferAtJs,preferAtJsx,replaceAllJs,replaceAllJsx,stringReplaceAllJs,stringReplaceAllJsx,pascalCaseFunctionsJs,pascalCaseFunctionsJsx,pascalCaseFunctionsTs,pascalCaseFunctionsTsx,cssScopingRootMixins
+sonar.issue.ignore.multicriteria=reactPropsJs,reactPropsJsx,preferGlobalThisJs,preferGlobalThisJsx,preferAtJs,preferAtJsx,replaceAllJs,replaceAllJsx,stringReplaceAllJs,stringReplaceAllJsx,pascalCaseFunctionsJs,pascalCaseFunctionsJsx,pascalCaseFunctionsTs,pascalCaseFunctionsTsx,cssScopingRootMixins,parameterizedTestsJs,parameterizedTestsJsx
 
 # S6774: React props validation - using TypeScript/JSDoc for prop types instead
 sonar.issue.ignore.multicriteria.reactPropsJs.ruleKey=javascript:S6774
@@ -59,6 +59,12 @@ sonar.issue.ignore.multicriteria.pascalCaseFunctionsTs.resourceKey=**/*.ts
 sonar.issue.ignore.multicriteria.pascalCaseFunctionsTsx.ruleKey=javascript:S100
 sonar.issue.ignore.multicriteria.pascalCaseFunctionsTsx.resourceKey=**/*.tsx
 
+# S5976: Replace these N tests with a single Parameterized one - jest.each is preferred over parameterized tests
+sonar.issue.ignore.multicriteria.parameterizedTestsJs.ruleKey=javascript:S5976
+sonar.issue.ignore.multicriteria.parameterizedTestsJs.resourceKey=**/*.test.js
+sonar.issue.ignore.multicriteria.parameterizedTestsJsx.ruleKey=javascript:S5976
+sonar.issue.ignore.multicriteria.parameterizedTestsJsx.resourceKey=**/*.test.jsx
+
 # S8776: Missing scoping root for & - false positive on Sass mixins, which are always
 # @included inside a real selector so & resolves correctly once compiled
 sonar.issue.ignore.multicriteria.cssScopingRootMixins.ruleKey=css:S8776

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

@@ -1,11 +1,16 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { Actions } from './Actions.jsx'
+import { mapButtons } from '../../renderer/mapButtons.js'
 import * as AppContext from '../../store/appContext' // import the module to mock
 
 // Simple child component to handle isHidden
 const TestChild = ({ isHidden, children, ...props }) => <div {...props}>{children}</div>
 
+jest.mock('../MapButton/MapButton.jsx', () => ({
+  MapButton: ({ isHidden }) => <button data-testid='map-button' hidden={isHidden} />
+}))
+
 const ACTIONS_SELECTOR = '.im-c-actions'
 const HIDDEN_CLASS = 'im-c-actions--hidden'
 
@@ -80,4 +85,46 @@ describe('Actions component', () => {
     const container = screen.getByTestId('child1').closest(ACTIONS_SELECTOR)
     expect(container).toHaveClass(HIDDEN_CLASS)
   })
+
+  // Integration with the real mapButtons() output, not just the TestChild stand-in above —
+  // guards the isHidden/variant contract at the actual seam between the two modules, since
+  // mapButtons.js's own unit tests can't catch a break here on their own.
+  describe('with real mapButtons() output', () => {
+    const evaluateProp = (prop) => (typeof prop === 'function' ? prop() : prop)
+    const appConfig = { id: 'test' }
+    const baseAppState = {
+      breakpoint: 'desktop',
+      mode: 'view',
+      isFullscreen: true,
+      openPanels: {},
+      dispatch: jest.fn(),
+      disabledButtons: new Set(),
+      hiddenButtons: new Set(),
+      pressedButtons: new Set(),
+      expandedButtons: new Set(),
+      panelConfig: {},
+      layoutRefs: { viewportRef: { current: { focus: jest.fn() } } }
+    }
+
+    const renderActionsWith = (appState) => {
+      const items = mapButtons({ slot: 'actions', appState, appConfig, evaluateProp })
+      return render(<Actions slot='actions'>{items.map(i => i.element)}</Actions>)
+    }
+
+    it('shows the actions bar when a real mapButtons() button is visible', () => {
+      const appState = { ...baseAppState, buttonConfig: { cancel: { label: 'Cancel', desktop: { slot: 'actions' } } } }
+      renderActionsWith(appState)
+      expect(screen.getByTestId('map-button').closest(ACTIONS_SELECTOR)).not.toHaveClass(HIDDEN_CLASS)
+    })
+
+    it('hides the actions bar when the only real mapButtons() button is hidden', () => {
+      const appState = {
+        ...baseAppState,
+        hiddenButtons: new Set(['cancel']),
+        buttonConfig: { cancel: { label: 'Cancel', desktop: { slot: 'actions' } } }
+      }
+      renderActionsWith(appState)
+      expect(screen.getByTestId('map-button').closest(ACTIONS_SELECTOR)).toHaveClass(HIDDEN_CLASS)
+    })
+  })
 })

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

@@ -1,3 +1,5 @@
+@use '../../../scss/tools/index' as tools;
+
 .im-c-attributions {
     color: var(--attributions-foreground-color);
     background-color: var(--attributions-background-color);
@@ -7,4 +9,12 @@
     overflow: hidden;
     text-overflow: ellipsis;
     pointer-events: auto;
+}
+
+.im-c-attributions a {
+    color: inherit;
+
+    &[data-focus-visible="true"] {
+        @include tools.link-focus;
+    }
 }

package/src/App/components/Hints/Hints.jsx

@@ -17,7 +17,7 @@ import { htmlToPlainText } from '../../../utils/htmlToPlainText.js'
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
 export const Hints = () => {
-  const { id, keyboardHintText } = useConfig()
+  const { id, keyboardHintText, enableMoveControls, moveControlsHintText } = useConfig()
   const { hints } = useService()
   const { layoutRefs } = useApp()
   const [activeHint, setActiveHint] = useState(null)
@@ -32,6 +32,11 @@ export const Hints = () => {
     return null
   }
 
+  // Composed at render time so overriding one text doesn't drop the other.
+  const keyboardDescriptionHtml = enableMoveControls
+    ? `${keyboardHintText} ${moveControlsHintText}`
+    : keyboardHintText
+
   return createPortal(
     <div className='im-o-hints'>
       <div id={`${id}-hints`} className='im-c-hints'>
@@ -45,7 +50,7 @@ export const Hints = () => {
       <div
         id={`${id}-keyboard-desc`}
         className='im-u-visually-hidden'
-        dangerouslySetInnerHTML={{ __html: htmlToPlainText(keyboardHintText) }}
+        dangerouslySetInnerHTML={{ __html: htmlToPlainText(keyboardDescriptionHtml) }}
       />
     </div>,
     layoutRefs.mainRef.current

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

@@ -52,6 +52,19 @@ describe('Hints — rendering', () => {
     expect(desc.innerHTML).toBe('Shift + ?')
   })
 
+  it('appends the move-controls hint text when enableMoveControls is true', () => {
+    const mainEl = setup()
+    useConfig.mockReturnValue({
+      id: 'test-map',
+      keyboardHintText: '<kbd>Shift</kbd> + <kbd>?</kbd>',
+      enableMoveControls: true,
+      moveControlsHintText: '<kbd>Arrow keys</kbd> to move'
+    })
+    render(<Hints />)
+    const desc = mainEl.querySelector('#test-map-keyboard-desc')
+    expect(desc.innerHTML).toBe('Shift + ? Arrow keys to move')
+  })
+
   it('renders no hint content when there is no active hint', () => {
     const mainEl = setup()
     render(<Hints />)

package/src/App/components/KeyboardHelp/KeyboardHelp.jsx

@@ -2,7 +2,6 @@
 import React from 'react'
 import { useConfig } from '../../store/configContext'
 import { useApp } from '../../store/appContext.js'
-import { getKeyboardShortcuts } from '../../registry/keyboardShortcutRegistry.js'
 import { Tabs } from '../Tabs/Tabs.jsx'
 
 const ShortcutList = ({ items }) => (
@@ -42,8 +41,8 @@ const getDefaultTab = (groupEntries, context) => {
 // sonarjs/disable-next-line function-name
 export const KeyboardHelp = ({ context = 'viewport' }) => { // NOSONAR: project does not use PropTypes
   const appConfig = useConfig()
-  const { listboxIsActive } = useApp()
-  const allShortcuts = getKeyboardShortcuts(appConfig)
+  const { listboxIsActive, keyboardShortcutRegistry } = useApp()
+  const allShortcuts = keyboardShortcutRegistry.getKeyboardShortcuts(appConfig)
   const shortcuts = listboxIsActive
     ? allShortcuts
     : allShortcuts.filter(s => s.context !== 'listbox')

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

@@ -2,13 +2,10 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { KeyboardHelp } from './KeyboardHelp'
-import { getKeyboardShortcuts } from '../../registry/keyboardShortcutRegistry.js'
 import { useConfig } from '../../store/configContext'
 import { useApp } from '../../store/appContext.js'
 
-jest.mock('../../registry/keyboardShortcutRegistry.js', () => ({
-  getKeyboardShortcuts: jest.fn()
-}))
+const getKeyboardShortcuts = jest.fn()
 
 jest.mock('../../store/configContext', () => ({
   useConfig: jest.fn()
@@ -40,7 +37,7 @@ const GLOBAL_SHORTCUTS = [
 
 beforeEach(() => {
   useConfig.mockReturnValue({})
-  useApp.mockReturnValue({ listboxIsActive: false })
+  useApp.mockReturnValue({ listboxIsActive: false, keyboardShortcutRegistry: { getKeyboardShortcuts } })
 })
 
 afterEach(() => {
@@ -79,7 +76,7 @@ describe('KeyboardHelp — tabs', () => {
   const allShortcuts = [...GLOBAL_SHORTCUTS, ...VIEWPORT_SHORTCUTS, ...LISTBOX_SHORTCUTS]
 
   beforeEach(() => {
-    useApp.mockReturnValue({ listboxIsActive: true })
+    useApp.mockReturnValue({ listboxIsActive: true, keyboardShortcutRegistry: { getKeyboardShortcuts } })
   })
 
   it('renders a tab for each group when listboxIsActive is true', () => {

package/src/App/components/{MoveControl/MoveControl.jsx → MoveControls/MoveControls.jsx}

@@ -18,13 +18,13 @@ const ZOOM_ACTIONS = [
   { id: 'nudgeZoomOut', label: 'Zoom out', announceLabel: 'Zoomed out', method: 'zoomOut' }
 ]
 
-export const MoveControl = () => {
+export const MoveControls = () => {
   const { id: appId, mapProvider, panDelta, nudgePanDelta, zoomDelta, nudgeZoomDelta } = useConfig()
   const { dispatch, expandedButtons, nudgeStepSize, interfaceType, layoutRefs } = useApp()
   const { isAtMaxZoom, isAtMinZoom } = useMap()
   const { announce } = useService()
 
-  const isOpen = expandedButtons.has('moveControl')
+  const isOpen = expandedButtons.has('moveControls')
   const firstDirectionButtonId = `${appId}-pan-up`
 
   useEffect(() => {
@@ -41,7 +41,7 @@ export const MoveControl = () => {
   // Registry buttons (declared via a plugin's manifest) auto-return focus to the map
   // viewport after a click (see createButtonClickHandler in mapButtons.js) unless
   // marked keepFocus — which is how e.g. draw's own toolbar buttons never leave
-  // keyboard shortcuts (like arrow-key vertex nudging) stranded afterward. MoveControl
+  // keyboard shortcuts (like arrow-key vertex nudging) stranded afterward. MoveControls
   // renders its own buttons directly, bypassing that mechanism entirely, so it has to
   // replicate the same return-to-viewport behaviour itself. But unlike a one-off
   // action button, the D-pad is meant to be pressed repeatedly — a keyboard/switch
@@ -70,7 +70,7 @@ export const MoveControl = () => {
 
     // Any plugin can claim the D-pad for something other than panning the map (e.g.
     // moving a selected draw vertex) by setting mapProvider.activeMoveTarget — a
-    // generic { move(dx, dy, isLargeStep), label? } contract. MoveControl doesn't
+    // generic { move(dx, dy, isLargeStep), label? } contract. MoveControls doesn't
     // know or care what's claiming it; it just checks for a claimant before
     // defaulting to its own panBy behaviour. Read fresh on every click rather than
     // subscribed to reactively, since it's a plain mapProvider property, not state.
@@ -107,7 +107,7 @@ export const MoveControl = () => {
   // first tabbing all the way back to the map. Handling arrow keys here — while
   // focus is anywhere within this control, not just on a direction button — covers
   // that directly, without needing draw's (or the app's own) keyboard-shortcut
-  // guards to special-case MoveControl's buttons. Only arrow keys are handled;
+  // guards to special-case MoveControls' buttons. Only arrow keys are handled;
   // other shortcuts (delete/escape/undo) still require focus on the viewport,
   // which mouse/touch users already get back automatically after any click here.
   const handleContainerKeyDown = (e) => {
@@ -120,12 +120,12 @@ export const MoveControl = () => {
   }
 
   const containerClassName = [
-    'im-c-move-control',
-    !isOpen && 'im-c-move-control--collapsed'
+    'im-c-move-controls',
+    !isOpen && 'im-c-move-controls--collapsed'
   ].filter(Boolean).join(' ')
 
   const directionsGroup = (
-    <div key='directions' role='group' aria-label='Direction controls' className='im-c-move-control__directions'>{/* NOSONAR - div with role="group" is correct for a button group */}
+    <div key='directions' role='group' aria-label='Direction controls' className='im-c-move-controls__directions'>{/* NOSONAR - div with role="group" is correct for a button group */}
       {DIRECTIONS.map(({ id, verb, dx, dy }) => (
         <MapButton
           key={id}
@@ -154,7 +154,7 @@ export const MoveControl = () => {
   )
 
   const zoomGroup = (
-    <div key='zoom' role='group' aria-label='Zoom controls' className='im-c-move-control__zoom'>{/* NOSONAR - div with role="group" is correct for a button group */}
+    <div key='zoom' role='group' aria-label='Zoom controls' className='im-c-move-controls__zoom'>{/* NOSONAR - div with role="group" is correct for a button group */}
       {ZOOM_ACTIONS.map(({ id, label, announceLabel, method }) => (
         <MapButton
           key={id}
@@ -169,7 +169,7 @@ export const MoveControl = () => {
   )
 
   return (
-    <div id={`${appId}-move-control-content`} className={containerClassName} onKeyDown={handleContainerKeyDown}>{/* NOSONAR - only catches arrow-key bubbling from the real, already-focusable button descendants below; the div itself needs no role/tabIndex */}
+    <div id={`${appId}-move-controls-content`} className={containerClassName} onKeyDown={handleContainerKeyDown} data-map-keyboard-scope>{/* NOSONAR - only catches arrow-key bubbling from the real, already-focusable button descendants below; the div itself needs no role/tabIndex */}
       {directionsGroup}
       {zoomGroup}
     </div>

package/src/App/components/{MoveControl/MoveControl.module.scss → MoveControls/MoveControls.module.scss}

@@ -1,62 +1,63 @@
 @use '../../../scss/tools/index' as tools;
 
 // ===================================================
-// Component: MoveControl
+// Component: MoveControls
 // ===================================================
 
 // 1. Base styles
-.im-c-move-control {
+.im-c-move-controls {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--divider-gap);
 }
 
-.im-c-move-control.im-c-move-control--collapsed {
+.im-c-move-controls.im-c-move-controls--collapsed {
     display: none;
 }
 
 // 2. Elements
-.im-c-move-control__directions {
+.im-c-move-controls__directions {
     display: grid;
     grid-template-columns: repeat(3, var(--button-size));
     grid-template-rows: repeat(3, var(--button-size));
 }
 
-.im-c-move-control__directions .im-c-button-wrapper--pan-up {
+.im-c-move-controls__directions .im-c-button-wrapper--pan-up {
     grid-column: 2;
     grid-row: 1;
 }
 
-.im-c-move-control__directions .im-c-button-wrapper--pan-left {
+.im-c-move-controls__directions .im-c-button-wrapper--pan-left {
     grid-column: 1;
     grid-row: 2;
 }
 
-.im-c-move-control__directions .im-c-button-wrapper--pan-right {
+.im-c-move-controls__directions .im-c-button-wrapper--pan-right {
     grid-column: 3;
     grid-row: 2;
 }
 
-.im-c-move-control__directions .im-c-button-wrapper--pan-down {
+.im-c-move-controls__directions .im-c-button-wrapper--pan-down {
     grid-column: 2;
     grid-row: 3;
 }
 
-.im-c-move-control__directions .im-c-button-wrapper--nudge-step-toggle {
+.im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle {
     grid-column: 2;
     grid-row: 2;
+    z-index: 1;
 }
 
-.im-c-move-control__directions .im-c-map-button--pan-up svg {
+.im-c-move-controls__directions .im-c-map-button--pan-up svg {
     transform: rotate(180deg);
 }
 
-.im-c-move-control__directions .im-c-map-button--pan-left svg {
+.im-c-move-controls__directions .im-c-map-button--pan-left svg {
     transform: rotate(90deg);
 }
 
-.im-c-move-control__directions .im-c-map-button--pan-right svg {
+.im-c-move-controls__directions .im-c-map-button--pan-right svg {
     transform: rotate(-90deg);
 }
 
@@ -66,35 +67,60 @@
 // express a plus-shaped grid where the centre button touches all four neighbours —
 // clip-path is set directly per button instead, clipping only the side(s) where it
 // touches another button and leaving the exposed side(s) showing the shadow as normal.
-.im-c-move-control__directions .im-c-button-wrapper--pan-up .im-c-map-button::before {
-    clip-path: inset(-20px -20px 0 -20px); // touches nudge-step-toggle below
+.im-c-move-controls__directions .im-c-button-wrapper--pan-up .im-c-map-button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &::before {
+        clip-path: inset(-20px -20px 0 -20px); // touches nudge-step-toggle below
+    }
 }
 
-.im-c-move-control__directions .im-c-button-wrapper--pan-left .im-c-map-button::before {
-    clip-path: inset(-20px 0 -20px -20px); // touches nudge-step-toggle to the right
+.im-c-move-controls__directions .im-c-button-wrapper--pan-left .im-c-map-button {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &::before {
+        clip-path: inset(-20px 0 -20px -20px); // touches nudge-step-toggle to the right
+    }
 }
 
-.im-c-move-control__directions .im-c-button-wrapper--pan-right .im-c-map-button::before {
-    clip-path: inset(-20px -20px -20px 0); // touches nudge-step-toggle to the left
+.im-c-move-controls__directions .im-c-button-wrapper--pan-right .im-c-map-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &::before {
+        clip-path: inset(-20px -20px -20px 0); // touches nudge-step-toggle to the left
+    }
 }
 
-.im-c-move-control__directions .im-c-button-wrapper--pan-down .im-c-map-button::before {
-    clip-path: inset(0 -20px -20px -20px); // touches nudge-step-toggle above
+.im-c-move-controls__directions .im-c-button-wrapper--pan-down .im-c-map-button {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    &::before {
+        clip-path: inset(0 -20px -20px -20px); // touches nudge-step-toggle above
+    }
 }
 
-.im-c-move-control__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button::before {
-    clip-path: inset(0); // touches all four neighbours
+.im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
+    border-radius: 0;
+    outline: 1px solid var(--button-hover-color);
+
+    &::before {
+        clip-path: inset(0); // touches all four neighbours
+    }
 }
 
 // Same inverted "pressed" treatment already used for actions-slot toggle buttons
 // (e.g. draw's Snap toggle) — reused here so Nudge mode reads consistently active.
-.im-c-move-control .im-c-map-button[aria-pressed="true"] {
+.im-c-move-controls .im-c-map-button[aria-pressed="true"] {
     color: var(--pressed-button-foreground-color);
     border-color: var(--pressed-button-border-color);
     background-color: var(--pressed-button-background-color);
 }
 
-// The trigger lives in the right-top slot, outside .im-c-move-control, so this is
+// The trigger lives in the right-top slot, outside .im-c-move-controls, so this is
 // its own top-level rule. Same colour treatment as above, but keyed off
 // aria-expanded rather than aria-pressed — the trigger is correctly a disclosure
 // button (it reveals the control below), not a toggle button, so it doesn't carry
@@ -106,26 +132,31 @@
 // hovering the expanded trigger button was a coin-flip decided by cascade order —
 // one cssnano mergeRules reshuffle in production and hover started winning,
 // showing the hover tint instead of the pressed colours. The sibling
-// .im-c-move-control .im-c-map-button[aria-pressed="true"] rule above never had
+// .im-c-move-controls .im-c-map-button[aria-pressed="true"] rule above never had
 // this problem (it's already (0,3,0), safely ahead of hover); this one needed the
 // same headroom.
-.im-c-map-button.im-c-map-button--move-control[aria-expanded="true"] {
+.im-c-map-button.im-c-map-button--move-controls[aria-expanded="true"] {
     color: var(--pressed-button-foreground-color);
     border-color: var(--pressed-button-border-color);
     background-color: var(--pressed-button-background-color);
 }
 
-.im-c-move-control__zoom {
+.im-c-move-controls__zoom {
     display: flex;
     flex-direction: row;
 }
 
 // A simple two-item linear row, so the standard button-group corner/shadow treatment
 // applies directly (matches .im-o-app__top's first/last-child pattern).
-.im-c-move-control__zoom .im-c-button-wrapper--nudge-zoom-in .im-c-map-button {
+.im-c-move-controls__zoom .im-c-button-wrapper--nudge-zoom-in .im-c-map-button {
     @include tools.border-focus-corner-override($corners: 'left');
 }
 
-.im-c-move-control__zoom .im-c-button-wrapper--nudge-zoom-out .im-c-map-button {
+.im-c-move-controls__zoom .im-c-button-wrapper--nudge-zoom-out .im-c-map-button {
     @include tools.border-focus-corner-override($corners: 'right');
 }
+
+// App dark modifiers
+.im-o-app--dark-app .im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
+    outline-offset: -1px;
+}