@defra/interactive-map 0.0.37-alpha → 0.0.38-alpha

package/plugins/draw/src/manifest.test.js

@@ -0,0 +1,147 @@
+import { manifest } from './manifest.js'
+
+const findButton = (id) => manifest.buttons.find((b) => b.id === id)
+const findMenuItem = (menuId, itemId) => findButton(menuId).menuItems.find((m) => m.id === itemId)
+
+describe('manifest structure', () => {
+  test('exposes the reducer, init component and api surface', () => {
+    expect(manifest.reducer).toHaveProperty('initialState')
+    expect(manifest.reducer).toHaveProperty('actions')
+    expect(manifest.InitComponent).toBeDefined()
+    expect(Object.keys(manifest.api)).toEqual(expect.arrayContaining([
+      'newPolygon', 'newLine', 'editFeature', 'addFeature', 'deleteFeature', 'split', 'merge'
+    ]))
+  })
+})
+
+describe('drawCancel', () => {
+  test('is hidden only when there is no active mode', () => {
+    expect(findButton('drawCancel').hiddenWhen({ pluginState: { mode: null } })).toBe(true)
+    expect(findButton('drawCancel').hiddenWhen({ pluginState: { mode: 'draw_line' } })).toBe(false)
+  })
+})
+
+describe('drawAddPoint', () => {
+  const hidden = (interfaceType, mode) =>
+    findButton('drawAddPoint').hiddenWhen({ appState: { interfaceType }, pluginState: { mode } })
+
+  test('is shown only while drawing on a touch interface', () => {
+    expect(hidden('touch', 'draw_polygon')).toBe(false)
+    expect(hidden('mouse', 'draw_polygon')).toBe(true)
+    expect(hidden('touch', 'edit_vertex')).toBe(true)
+  })
+
+  test('is disabled while placing at the crosshair would be vetoed', () => {
+    const btn = findButton('drawAddPoint')
+    expect(btn.enableWhen({ pluginState: { canAddPoint: true } })).toBe(true)
+    expect(btn.enableWhen({ pluginState: { canAddPoint: false } })).toBe(false)
+  })
+})
+
+describe('drawDone', () => {
+  const btn = () => findButton('drawDone')
+
+  test('is hidden outside draw/edit modes', () => {
+    expect(btn().hiddenWhen({ pluginState: { mode: null } })).toBe(true)
+    expect(btn().hiddenWhen({ pluginState: { mode: 'draw_polygon' } })).toBe(false)
+  })
+
+  test('enables in a draw/edit mode only when the geometry is valid', () => {
+    expect(btn().enableWhen({ pluginState: { mode: 'draw_polygon', geometryValid: true } })).toBe(true)
+    expect(btn().enableWhen({ pluginState: { mode: 'draw_line', geometryValid: true } })).toBe(true)
+    expect(btn().enableWhen({ pluginState: { mode: 'edit_vertex', geometryValid: true } })).toBe(true)
+    expect(btn().enableWhen({ pluginState: { mode: 'disabled', geometryValid: true } })).toBe(false)
+  })
+
+  test('stays disabled while the geometry is invalid', () => {
+    expect(btn().enableWhen({ pluginState: { mode: 'draw_polygon', geometryValid: false } })).toBe(false)
+    expect(btn().enableWhen({ pluginState: { mode: 'draw_line', geometryValid: false } })).toBe(false)
+    expect(btn().enableWhen({ pluginState: { mode: 'edit_vertex', geometryValid: false } })).toBe(false)
+  })
+})
+
+describe('drawMenu', () => {
+  test('is hidden outside draw/edit modes', () => {
+    expect(findButton('drawMenu').hiddenWhen({ pluginState: { mode: null } })).toBe(true)
+    expect(findButton('drawMenu').hiddenWhen({ pluginState: { mode: 'edit_vertex' } })).toBe(false)
+  })
+
+  test('labels "Edit actions" in edit mode, "Draw actions" otherwise', () => {
+    expect(findButton('drawMenu').label({ pluginState: { mode: 'edit_vertex' } })).toBe('Edit actions')
+    expect(findButton('drawMenu').label({ pluginState: { mode: 'draw_polygon' } })).toBe('Draw actions')
+    expect(findButton('drawMenu').label({ pluginState: { mode: 'draw_line' } })).toBe('Draw actions')
+  })
+
+  describe('drawUndo', () => {
+    const item = () => findMenuItem('drawMenu', 'drawUndo')
+
+    test('is hidden outside draw/edit modes', () => {
+      expect(item().hiddenWhen({ pluginState: { mode: null } })).toBe(true)
+      expect(item().hiddenWhen({ pluginState: { mode: 'draw_line' } })).toBe(false)
+    })
+
+    test('enables from vertex count while drawing and from the undo stack while editing', () => {
+      expect(item().enableWhen({ pluginState: { mode: 'draw_polygon', numVertices: 1 } })).toBe(true)
+      expect(item().enableWhen({ pluginState: { mode: 'draw_polygon', numVertices: 0 } })).toBe(false)
+      expect(item().enableWhen({ pluginState: { mode: 'edit_vertex', undoStackLength: 2 } })).toBe(true)
+      expect(item().enableWhen({ pluginState: { mode: 'edit_vertex', undoStackLength: 0 } })).toBe(false)
+    })
+  })
+
+  describe('drawSnap', () => {
+    const item = () => findMenuItem('drawMenu', 'drawSnap')
+
+    test('is hidden without a mode or snap layers', () => {
+      expect(item().hiddenWhen({ pluginState: { mode: null, hasSnapLayers: true } })).toBe(true)
+      expect(item().hiddenWhen({ pluginState: { mode: 'draw_line', hasSnapLayers: false } })).toBe(true)
+      expect(item().hiddenWhen({ pluginState: { mode: 'draw_line', hasSnapLayers: true } })).toBe(false)
+    })
+
+    test('is pressed when snapping is enabled', () => {
+      expect(item().pressedWhen({ pluginState: { snap: true } })).toBe(true)
+      expect(item().pressedWhen({ pluginState: { snap: false } })).toBe(false)
+    })
+  })
+
+  describe('drawDeletePoint', () => {
+    const item = () => findMenuItem('drawMenu', 'drawDeletePoint')
+
+    test('is hidden outside edit mode', () => {
+      expect(item().hiddenWhen({ pluginState: { mode: 'draw_polygon' } })).toBe(true)
+      expect(item().hiddenWhen({ pluginState: { mode: 'edit_vertex' } })).toBe(false)
+    })
+
+    test('enables only with a selection and enough vertices (polygon vs line)', () => {
+      expect(item().enableWhen({ pluginState: { selectedVertexIndex: -1 } })).toBe(false)
+      expect(item().enableWhen({ pluginState: { selectedVertexIndex: 0, feature: { geometry: { type: 'Polygon' } }, numVertices: 4 } })).toBe(true)
+      expect(item().enableWhen({ pluginState: { selectedVertexIndex: 0, feature: { geometry: { type: 'Polygon' } }, numVertices: 3 } })).toBe(false)
+      expect(item().enableWhen({ pluginState: { selectedVertexIndex: 0, feature: { geometry: { type: 'LineString' } }, numVertices: 3 } })).toBe(true)
+      expect(item().enableWhen({ pluginState: { selectedVertexIndex: 0, feature: { geometry: { type: 'LineString' } }, numVertices: 2 } })).toBe(false)
+    })
+  })
+})
+
+describe('drawUndo keyboard shortcut (platform-specific command)', () => {
+  const loadUndoCommand = (mac) => {
+    let command
+    jest.isolateModules(() => {
+      jest.doMock('../../../src/utils/isMac.js', () => ({ isMac: () => mac }))
+      const { manifest: reloaded } = require('./manifest.js')
+      command = reloaded.keyboardShortcuts.find((s) => s.id === 'drawUndo').command
+    })
+    return command
+  }
+
+  afterEach(() => {
+    jest.dontMock('../../../src/utils/isMac.js')
+    jest.resetModules()
+  })
+
+  test('uses Command on macOS', () => {
+    expect(loadUndoCommand(true)).toBe('<kbd>Command</kbd> + <kbd>Z</kbd>')
+  })
+
+  test('uses Ctrl on non-mac platforms', () => {
+    expect(loadUndoCommand(false)).toBe('<kbd>Ctrl</kbd> + <kbd>Z</kbd>')
+  })
+})

package/plugins/draw/src/reducer.js

@@ -0,0 +1,69 @@
+const initialState = {
+  mode: null,
+  action: null,
+  actionValid: false,
+  feature: null,
+  tempFeature: null,
+  selectedVertexIndex: -1,
+  numVertices: null,
+  geometryValid: true,
+  canAddPoint: true,
+  snap: false,
+  hasSnapLayers: false,
+  undoStackLength: 0
+}
+
+const DRAW_MODES = new Set(['draw_polygon', 'draw_line'])
+
+const setMode = (state, payload) => ({
+  ...state,
+  mode: payload,
+  numVertices: DRAW_MODES.has(payload) ? 0 : state.numVertices,
+  // A new/empty shape is never valid; validation flips this true once the geometry
+  // passes all soft rules (edit mode seeds it explicitly in api/editFeature).
+  geometryValid: false,
+  // A fresh mode can always place; the live placement gate flips this on veto.
+  canAddPoint: true
+})
+
+const setAction = (state, payload) => ({
+  ...state,
+  action: payload.name,
+  actionValid: payload.isValid
+})
+
+const setSelectedVertexIndex = (state, payload) => ({
+  ...state,
+  selectedVertexIndex: payload.index,
+  numVertices: payload.numVertices
+})
+
+const setFeature = (state, payload) => ({
+  ...state,
+  feature: payload.feature === undefined ? state.feature : payload.feature,
+  tempFeature: payload.tempFeature === undefined ? state.tempFeature : payload.tempFeature
+})
+
+const toggleSnap = (state) => ({ ...state, snap: !state.snap })
+
+const setHasSnapLayers = (state, payload) => ({ ...state, hasSnapLayers: !!payload })
+
+const setUndoStackLength = (state, payload) => ({ ...state, undoStackLength: payload })
+
+const setGeometryValid = (state, payload) => ({ ...state, geometryValid: !!payload })
+
+const setCanAddPoint = (state, payload) => ({ ...state, canAddPoint: !!payload })
+
+const actions = {
+  SET_MODE: setMode,
+  SET_ACTION: setAction,
+  SET_FEATURE: setFeature,
+  SET_SELECTED_VERTEX_INDEX: setSelectedVertexIndex,
+  TOGGLE_SNAP: toggleSnap,
+  SET_HAS_SNAP_LAYERS: setHasSnapLayers,
+  SET_UNDO_STACK_LENGTH: setUndoStackLength,
+  SET_GEOMETRY_VALID: setGeometryValid,
+  SET_CAN_ADD_POINT: setCanAddPoint
+}
+
+export { initialState, actions }

package/plugins/draw/src/reducer.test.js

@@ -0,0 +1,85 @@
+import { initialState, actions } from './reducer.js'
+
+describe('initialState', () => {
+  test('has sensible defaults', () => {
+    expect(initialState).toMatchObject({
+      mode: null,
+      action: null,
+      actionValid: false,
+      feature: null,
+      tempFeature: null,
+      selectedVertexIndex: -1,
+      numVertices: null,
+      snap: false,
+      hasSnapLayers: false,
+      undoStackLength: 0,
+      canAddPoint: true
+    })
+  })
+})
+
+describe('SET_MODE', () => {
+  test('resets numVertices to 0 for draw modes', () => {
+    expect(actions.SET_MODE(initialState, 'draw_polygon')).toMatchObject({ mode: 'draw_polygon', numVertices: 0 })
+    expect(actions.SET_MODE(initialState, 'draw_line')).toMatchObject({ mode: 'draw_line', numVertices: 0 })
+  })
+
+  test('a fresh mode can always place a point', () => {
+    const state = { ...initialState, canAddPoint: false }
+    expect(actions.SET_MODE(state, 'draw_polygon')).toMatchObject({ canAddPoint: true })
+  })
+
+  test('preserves numVertices for non-draw modes', () => {
+    const state = { ...initialState, numVertices: 5 }
+    expect(actions.SET_MODE(state, 'edit_vertex')).toMatchObject({ mode: 'edit_vertex', numVertices: 5 })
+    expect(actions.SET_MODE(state, null)).toMatchObject({ mode: null, numVertices: 5 })
+  })
+})
+
+describe('SET_ACTION', () => {
+  test('sets the action name and validity', () => {
+    expect(actions.SET_ACTION(initialState, { name: 'split', isValid: true }))
+      .toMatchObject({ action: 'split', actionValid: true })
+  })
+})
+
+describe('SET_FEATURE', () => {
+  test('updates provided fields and preserves undefined ones', () => {
+    const state = { ...initialState, feature: 'F', tempFeature: 'T' }
+    expect(actions.SET_FEATURE(state, { feature: 'F2' })).toMatchObject({ feature: 'F2', tempFeature: 'T' })
+    expect(actions.SET_FEATURE(state, { tempFeature: null })).toMatchObject({ feature: 'F', tempFeature: null })
+    expect(actions.SET_FEATURE(state, { feature: null, tempFeature: null })).toMatchObject({ feature: null, tempFeature: null })
+  })
+})
+
+describe('SET_SELECTED_VERTEX_INDEX', () => {
+  test('sets the index and numVertices', () => {
+    expect(actions.SET_SELECTED_VERTEX_INDEX(initialState, { index: 2, numVertices: 4 }))
+      .toMatchObject({ selectedVertexIndex: 2, numVertices: 4 })
+  })
+})
+
+describe('snap actions', () => {
+  test('TOGGLE_SNAP flips the snap flag', () => {
+    expect(actions.TOGGLE_SNAP({ ...initialState, snap: false }).snap).toBe(true)
+    expect(actions.TOGGLE_SNAP({ ...initialState, snap: true }).snap).toBe(false)
+  })
+
+  test('SET_HAS_SNAP_LAYERS coerces the payload to a boolean', () => {
+    expect(actions.SET_HAS_SNAP_LAYERS(initialState, ['x']).hasSnapLayers).toBe(true)
+    expect(actions.SET_HAS_SNAP_LAYERS(initialState, null).hasSnapLayers).toBe(false)
+  })
+})
+
+describe('SET_UNDO_STACK_LENGTH', () => {
+  test('sets the undo stack length', () => {
+    expect(actions.SET_UNDO_STACK_LENGTH(initialState, 3).undoStackLength).toBe(3)
+  })
+})
+
+describe('SET_CAN_ADD_POINT', () => {
+  test('coerces the payload to a boolean', () => {
+    expect(actions.SET_CAN_ADD_POINT(initialState, false).canAddPoint).toBe(false)
+    expect(actions.SET_CAN_ADD_POINT(initialState, 1).canAddPoint).toBe(true)
+  })
+})

package/plugins/draw/src/utils/debounce.js

@@ -0,0 +1,16 @@
+// --- Debounce Helper ---
+export const debounce = (fn, delay) => {
+  let timeout
+
+  const debounced = (...args) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => fn(...args), delay)
+  }
+
+  debounced.cancel = () => {
+    clearTimeout(timeout)
+    timeout = null
+  }
+
+  return debounced
+}

package/plugins/draw/src/utils/debounce.test.js

@@ -0,0 +1,40 @@
+import { debounce } from './debounce.js'
+
+jest.useFakeTimers()
+
+describe('debounce', () => {
+  test('invokes the function after the delay with the latest arguments', () => {
+    const fn = jest.fn()
+    const debounced = debounce(fn, 100)
+
+    debounced('a')
+    expect(fn).not.toHaveBeenCalled()
+
+    jest.advanceTimersByTime(100)
+    expect(fn).toHaveBeenCalledWith('a')
+  })
+
+  test('collapses rapid calls into a single trailing invocation', () => {
+    const fn = jest.fn()
+    const debounced = debounce(fn, 100)
+
+    debounced(1)
+    debounced(2)
+    debounced(3)
+    jest.advanceTimersByTime(100)
+
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(fn).toHaveBeenCalledWith(3)
+  })
+
+  test('cancel prevents a pending invocation', () => {
+    const fn = jest.fn()
+    const debounced = debounce(fn, 100)
+
+    debounced('x')
+    debounced.cancel()
+    jest.advanceTimersByTime(100)
+
+    expect(fn).not.toHaveBeenCalled()
+  })
+})

package/plugins/draw/src/utils/eventBus.js

@@ -0,0 +1,36 @@
+/**
+ * Simple pub-sub event bus for plugin-internal communication.
+ * Used to decouple components that need to communicate events.
+ *
+ * @returns {{on: Function, off: Function, emit: Function}}
+ */
+export const createEventBus = () => {
+  const listeners = new Map()
+
+  return {
+    on (type, handler) {
+      if (!listeners.has(type)) {
+        listeners.set(type, new Set())
+      }
+      listeners.get(type).add(handler)
+    },
+
+    off (type, handler) {
+      listeners.get(type)?.delete(handler)
+    },
+
+    emit (type, ...args) {
+      const handlers = listeners.get(type)
+      if (handlers) {
+        // Array.from, not [...handlers] — under Docusaurus's docs build, Babel
+        // compiles with `loose: true` (@docusaurus/babel/preset.js), which turns
+        // spread-of-non-array-iterable into `[].concat(handlers)`. concat() only
+        // flattens real arrays; for a Set it appends the whole Set as a single
+        // element, so every handler call becomes `set.apply(...)` and throws
+        // "h.apply is not a function". Array.from() is a plain function call, so
+        // it's untouched by that transform and always iterates correctly.
+        Array.from(handlers).forEach(h => h(...args))
+      }
+    }
+  }
+}

package/plugins/draw/src/utils/eventBus.test.js

@@ -0,0 +1,47 @@
+import { createEventBus } from './eventBus.js'
+
+describe('createEventBus', () => {
+  test('emits to a registered handler with the supplied arguments', () => {
+    const bus = createEventBus()
+    const handler = jest.fn()
+    bus.on('thing', handler)
+
+    bus.emit('thing', 1, 2)
+
+    expect(handler).toHaveBeenCalledWith(1, 2)
+  })
+
+  test('supports multiple handlers for the same type', () => {
+    const bus = createEventBus()
+    const a = jest.fn()
+    const b = jest.fn()
+    bus.on('thing', a)
+    bus.on('thing', b)
+
+    bus.emit('thing')
+
+    expect(a).toHaveBeenCalled()
+    expect(b).toHaveBeenCalled()
+  })
+
+  test('off removes a handler so it no longer fires', () => {
+    const bus = createEventBus()
+    const handler = jest.fn()
+    bus.on('thing', handler)
+    bus.off('thing', handler)
+
+    bus.emit('thing')
+
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  test('emitting a type with no listeners is a no-op', () => {
+    const bus = createEventBus()
+    expect(() => bus.emit('nothing')).not.toThrow()
+  })
+
+  test('off on an unknown type does not throw', () => {
+    const bus = createEventBus()
+    expect(() => bus.off('unknown', jest.fn())).not.toThrow()
+  })
+})

package/plugins/draw/src/utils/flattenStyleProperties.js

@@ -0,0 +1,25 @@
+const STYLE_PROPS = new Set(['stroke', 'fill', 'strokeWidth'])
+
+export const flattenStyleProperties = (props) => {
+  if (!props) {
+    return {}
+  }
+
+  const result = {}
+
+  for (const [key, value] of Object.entries(props)) {
+    if (STYLE_PROPS.has(key) && typeof value === 'object' && value !== null) {
+      const entries = Object.entries(value)
+      if (entries.length > 0) {
+        result[key] = entries[0][1]
+      }
+      for (const [styleId, styleValue] of entries) {
+        result[`${key}${styleId.charAt(0).toUpperCase() + styleId.slice(1)}`] = styleValue
+      }
+    } else {
+      result[key] = value
+    }
+  }
+
+  return result
+}

package/plugins/draw/src/utils/flattenStyleProperties.test.js

@@ -0,0 +1,33 @@
+import { flattenStyleProperties } from './flattenStyleProperties.js'
+
+describe('flattenStyleProperties', () => {
+  test('returns an empty object for nullish input', () => {
+    expect(flattenStyleProperties(null)).toEqual({})
+    expect(flattenStyleProperties(undefined)).toEqual({})
+  })
+
+  test('flattens a style-variant object into base + per-style keys', () => {
+    const result = flattenStyleProperties({ stroke: { light: 'red', dark: 'blue' } })
+    expect(result).toEqual({
+      stroke: 'red', // base = first variant value
+      strokeLight: 'red',
+      strokeDark: 'blue'
+    })
+  })
+
+  test('passes through a scalar style value unchanged', () => {
+    expect(flattenStyleProperties({ stroke: 'red' })).toEqual({ stroke: 'red' })
+  })
+
+  test('passes through a null style value unchanged', () => {
+    expect(flattenStyleProperties({ fill: null })).toEqual({ fill: null })
+  })
+
+  test('passes through non-style properties untouched', () => {
+    expect(flattenStyleProperties({ name: 'field', count: 3 })).toEqual({ name: 'field', count: 3 })
+  })
+
+  test('ignores an empty style-variant object (no base, no variants)', () => {
+    expect(flattenStyleProperties({ fill: {} })).toEqual({})
+  })
+})

package/plugins/draw/src/utils/getValueForStyle.js

@@ -0,0 +1,33 @@
+/**
+ * Resolve a configuration value which may be either a simple value (same for all styles)
+ * or an object with scheme/style variants.
+ *
+ * Useful for resolving any value (colors, sizes, etc.) across different map styles and color schemes.
+ * Can resolve based on both style ID and color scheme.
+ *
+ * Resolution order for objects:
+ * 1. Exact style ID match (e.g., { outdoor: '...', dark: '...' })
+ * 2. Scheme match (e.g., { light: '...', dark: '...' })
+ * 3. Fallback to 'light' property
+ * 4. First value in object
+ *
+ * @param {any} value - Simple value or variant object
+ * @param {string} scheme - Current color scheme ('light' or 'dark')
+ * @param {string|null} styleId - Map style ID for per-style customization
+ * @returns {any} Resolved value
+ */
+export const getValueForStyle = (value, scheme, styleId = null) => {
+  if (typeof value !== 'object' || value === null) {
+    return value
+  }
+  if (styleId && value[styleId] !== undefined) {
+    return value[styleId]
+  }
+  if (value[scheme] !== undefined) {
+    return value[scheme]
+  }
+  if (value.light !== undefined) {
+    return value.light
+  }
+  return Object.values(value)[0]
+}

package/plugins/draw/src/utils/getValueForStyle.test.js

@@ -0,0 +1,32 @@
+import { getValueForStyle } from './getValueForStyle.js'
+
+describe('getValueForStyle', () => {
+  test('returns primitive values unchanged', () => {
+    expect(getValueForStyle('red', 'light')).toBe('red')
+    expect(getValueForStyle(5, 'light')).toBe(5)
+  })
+
+  test('returns null unchanged', () => {
+    expect(getValueForStyle(null, 'light')).toBeNull()
+  })
+
+  test('prefers an exact style-id match', () => {
+    expect(getValueForStyle({ outdoor: 'green', light: 'red' }, 'light', 'outdoor')).toBe('green')
+  })
+
+  test('falls back to the scheme match when the style id is absent', () => {
+    expect(getValueForStyle({ light: 'red', dark: 'blue' }, 'dark', 'outdoor')).toBe('blue')
+  })
+
+  test('uses the scheme match when no style id is provided', () => {
+    expect(getValueForStyle({ light: 'red', dark: 'blue' }, 'dark')).toBe('blue')
+  })
+
+  test('falls back to the light property when the scheme is missing', () => {
+    expect(getValueForStyle({ light: 'red', dark: 'blue' }, 'sepia')).toBe('red')
+  })
+
+  test('falls back to the first value when neither scheme nor light exist', () => {
+    expect(getValueForStyle({ outdoor: 'green', satellite: 'grey' }, 'dark')).toBe('green')
+  })
+})

package/plugins/draw/src/utils/resolveColors.js

@@ -0,0 +1,39 @@
+import { COLORS, SIZES } from '../defaults.js'
+import { getValueForStyle } from './getValueForStyle.js'
+
+/**
+ * Resolve all draw colors for the given map style and plugin config overrides.
+ * Shared by both adapters (MapLibre and OpenLayers) — they draw from the same
+ * COLORS/SIZES palette (defaults.js), so a plugin-level override behaves
+ * identically regardless of which map provider is in use.
+ *
+ * Values in pluginConfig may be plain strings or variant objects (e.g. { light: '...', dark: '...' }).
+ * Variant resolution order: exact style ID match → color scheme → 'light' fallback → first value.
+ *
+ * @param {object|null} mapStyle - Current map style object (has .id and .mapColorScheme)
+ * @param {object} pluginConfig - Plugin-level user overrides (may override any COLORS key)
+ * @returns {object} Flat color values ready for use in each adapter's styles module
+ */
+export const resolveColors = (mapStyle, pluginConfig = {}) => {
+  const scheme = mapStyle?.mapColorScheme ?? 'light'
+  const styleId = mapStyle?.id ?? null
+  const resolveColor = (key) => getValueForStyle(pluginConfig[key] ?? COLORS[key], scheme, styleId)
+
+  return {
+    editStroke: resolveColor('editStroke'),
+    editFill: resolveColor('editFill'),
+    editVertex: resolveColor('editVertex'),
+    editMidpoint: resolveColor('editMidpoint'),
+    editActive: resolveColor('editActive'),
+    editHalo: resolveColor('editHalo'),
+    invalidStroke: resolveColor('invalidStroke'),
+    splitValid: resolveColor('splitValid'),
+    splitInvalid: resolveColor('splitInvalid'),
+    shapeStroke: resolveColor('shapeStroke'),
+    strokeWidth: pluginConfig.strokeWidth ?? SIZES.strokeWidth,
+    shapeFill: resolveColor('shapeFill'),
+    snapVertex: resolveColor('snapVertex'),
+    snapEdge: resolveColor('snapEdge'),
+    mapStyleId: styleId
+  }
+}

package/plugins/draw/src/utils/resolveColors.test.js

@@ -0,0 +1,34 @@
+import { resolveColors } from './resolveColors.js'
+import { COLORS, SIZES } from '../defaults.js'
+
+test('without a map style, colours resolve to their light variants and defaults', () => {
+  const colors = resolveColors(null)
+  expect(colors.editStroke).toBe(COLORS.editStroke.light)
+  expect(colors.shapeStroke).toBe(COLORS.shapeStroke) // plain value — no variants
+  expect(colors.strokeWidth).toBe(SIZES.strokeWidth)
+  expect(colors.mapStyleId).toBeNull()
+})
+
+test('splitter colours are resolved', () => {
+  const colors = resolveColors(null)
+  expect(colors.splitValid).toBe(COLORS.splitValid.light)
+  expect(colors.splitInvalid).toBe(COLORS.splitInvalid.light)
+})
+
+test('a dark map style resolves dark variants and carries its id through', () => {
+  const colors = resolveColors({ id: 'dark', mapColorScheme: 'dark' })
+  expect(colors.editStroke).toBe(COLORS.editStroke.dark)
+  expect(colors.mapStyleId).toBe('dark')
+})
+
+test('plugin config overrides beat the defaults, as strings or scheme variants', () => {
+  const colors = resolveColors({ id: 'road', mapColorScheme: 'dark' }, {
+    editStroke: '#custom',
+    editFill: { light: '#l', dark: '#d' },
+    strokeWidth: 9
+  })
+  expect(colors.editStroke).toBe('#custom')
+  expect(colors.editFill).toBe('#d')
+  expect(colors.strokeWidth).toBe(9)
+  expect(colors.editVertex).toBe(COLORS.editVertex.dark) // untouched keys still resolve
+})