@defra/interactive-map 0.0.43-fmp-experimental → 0.0.44-alpha

package/plugins/draw/src/adapters/openlayers/point/drawPointMode.js

@@ -7,10 +7,8 @@ import { TOLERANCES } from '../defaults.js'
 
 const MODE = 'draw_point'
 
-// A point has no ring/rubber-band to build a candidate from — just the coordinate about to
-// be placed. Mirrors validateGeometry.js's attemptPlacement, but that helper hardcodes
-// Polygon/LineString via MODE_BY_GEOMETRY, so a Point candidate is built and validated
-// directly (same approach as the MapLibre adapter's drawPointMode.js).
+// A point has no ring/rubber-band to build a candidate from, so it's built and validated
+// directly rather than via validateGeometry.js's Polygon/LineString-only attemptPlacement.
 const canPlaceVertex = (manager) => (coordinate) => {
   const candidate = { type: 'Feature', geometry: { type: 'Point', coordinates: coordinate }, properties: {} }
   const { valid, reason } = validatePlacement(
@@ -24,14 +22,9 @@ const canPlaceVertex = (manager) => (coordinate) => {
   return valid
 }
 
-// Commit a finished point to the store under the requested id and emit CREATE — mirrors
-// draw/DrawMode.js's finalizeDrawnFeature (identical shape, kept separate rather than
-// imported since draw/DrawMode.js isn't otherwise a shared dependency of this mode).
-// Symbol resolution runs after the feature is in the store (not before), matching the
-// MapLibre adapter's own ordering. The resolver itself is injected by OLDrawManager via
-// changeMode's options (mirrors the ML adapter's state.resolvePointSymbol convention — see
-// MaplibreDrawAdapter.js's changeMode) so this mode has no direct dependency on
-// symbolRegistry/mapProvider/pointSymbolImages.js.
+// Commit a finished point to the store under the requested id and emit CREATE. Symbol
+// resolution runs after the feature is in the store, and the resolver itself is injected by
+// OLDrawManager (mirrors the MapLibre adapter's own ordering and resolvePointSymbol convention).
 const finalizeDrawnFeature = (manager, resolvePointSymbol, olFeature, featureId, properties) => {
   olFeature.setId(String(featureId))
   olFeature.setProperties(properties)
@@ -41,45 +34,41 @@ const finalizeDrawnFeature = (manager, resolvePointSymbol, olFeature, featureId,
 }
 
 /**
- * Touch/keyboard/"Add point" input for draw_point — the same concerns as
- * draw/drawInput.js (crosshair, interface-type tracking, add-vertex-button/Enter), reused
- * directly, but with a much smaller placement step: a point has no rubber band to update
- * while positioning (the crosshair itself already shows where it'll land) and nothing to
- * undo before a single-click commit, so those callbacks are no-ops here.
+ * Touch/keyboard/"Add point" input for draw_point — reuses draw/drawInput.js's crosshair and
+ * interface-type wiring, but with no rubber band or undo since a point commits on one click.
  */
 const buildPointInput = ({ drawInteraction, options, canPlace }) => {
   const { container, addVertexButtonId, mapProvider, snap, crossHair } = options
   let interfaceType = options.interfaceType ?? 'mouse'
   const getInterfaceType = () => interfaceType
 
-  // appendCoordinates() only builds up LineString/Polygon rings — for a Point-type Draw
-  // interaction it does nothing beyond starting the sketch (confirmed by reading OL's own
-  // source), so finishDrawing() has to be called explicitly right after to actually commit.
+  // appendCoordinates() only starts the sketch for a Point-type Draw interaction, so
+  // finishDrawing() must be called explicitly to commit. Only ever reached via the crosshair
+  // path (Enter, the add-vertex button, or the crosshair's own click), never a real mouse
+  // click, so snap always applies here when available.
   const placePoint = () => {
     const raw = mapProvider.getCenter()
-    const coord = (getInterfaceType() !== 'mouse' && snap) ? snap.apply(raw) : raw
+    const coord = snap ? snap.apply(raw) : raw
     snap?.hideIndicator()
     if (!canPlace(coord)) { return }
     drawInteraction.appendCoordinates([coord])
     drawInteraction.finishDrawing()
   }
 
-  // Keeps the snap indicator visible at the crosshair while positioning via touch/keyboard
-  // (mouse hover is handled by the separate OL snap interaction already attached by
-  // OLDrawManager) — the closest point-shaped equivalent of updateRubberbanding.
+  // Keeps the snap indicator visible at the crosshair — the point-shaped equivalent of
+  // updateRubberbanding. Callers decide when this is worth calling (see applyInterfaceType
+  // below and draw/drawInput.js's onCenterChange).
   const updateSnapIndicator = () => {
-    if (getInterfaceType() !== 'mouse' && snap) { snap.apply(mapProvider.getCenter()) }
+    if (snap) { snap.apply(mapProvider.getCenter()) }
   }
 
-  // Mirrors draw/drawInput.js's createDrawInput: an interface-type switch to touch/keyboard
-  // must refresh the snap indicator immediately at the crosshair, not wait for the next
-  // pointermove/change:center — otherwise it stays hidden until the user first pans or drags
-  // after entering the mode (the same gap the MapLibre adapter's onInterfaceTypeChange already
-  // guards against by calling onMove(state) right after _setInterface).
+  // Mirrors draw/drawInput.js's createDrawInput: a switch to touch/keyboard refreshes the
+  // snap indicator immediately rather than waiting for the next pan. Switching back to mouse
+  // has no crosshair target to refresh.
   const applyInterfaceType = (type) => {
     interfaceType = type
     applyCrossHairVisibility(crossHair, type)
-    updateSnapIndicator()
+    if (type !== 'mouse') { updateSnapIndicator() }
   }
 
   const events = wireInputEvents({
@@ -96,29 +85,29 @@ const buildPointInput = ({ drawInteraction, options, canPlace }) => {
 
   applyCrossHairVisibility(crossHair, interfaceType)
 
+  // Shared "commit here" entry point for the crosshair button's own onClick — same action as
+  // Enter/the touch add-vertex button.
+  if (crossHair) {
+    crossHair.activate = placePoint
+  }
+
   return {
     getInterfaceType,
     setInterfaceType: applyInterfaceType,
-    destroy () { events.destroy() }
+    destroy () {
+      if (crossHair?.activate === placePoint) { crossHair.activate = null }
+      events.destroy()
+    }
   }
 }
 
 /**
- * Draw mode for placing a single point: mouse click, or crosshair + Enter/"Add point"
- * button for touch/keyboard. Commits immediately on the first placement — unlike
- * draw_line/draw_polygon, there is no rubber band, no multi-vertex undo, and no "Done"
- * step (mirrors the MapLibre adapter's drawPointMode.js decision).
- *
- * OL's own Draw({type:'Point'}) interaction already finishes a real mouse click
- * immediately (confirmed by reading its handleUpEvent — mode 'Point' always attempts
- * finishDrawing() on pointer-up, no second click needed), so the mouse path needs no
- * extra wiring beyond the placement-veto condition every mode already has. Deliberately
- * NOT built via draw/DrawMode.js's createDrawMode()/createVertexPlacement() — those are
- * parametrised around a ring of placed vertices + a trailing rubber-band coordinate,
- * which a single-click commit doesn't have (mirrors the same decision already made for
- * the MapLibre adapter, and the OL EditMode/DrawMode split noted in
- * feedback_adapter_parity.md: don't force point through machinery shaped for lines/polygons
- * just because they happen to share a file).
+ * Draw mode for placing a single point: mouse click, or crosshair + Enter/"Add point" button
+ * for touch/keyboard. Commits immediately, with no rubber band, undo, or "Done" step. OL's own
+ * Draw({type:'Point'}) interaction already finishes a real mouse click on pointer-up, so the
+ * mouse path needs no extra wiring. Deliberately not built via draw/DrawMode.js's
+ * createDrawMode()/createVertexPlacement() — those assume a ring of vertices plus a trailing
+ * rubber-band coordinate, which a single-click commit doesn't have.
  */
 export const createDrawPointMode = ({ map, manager, options }) => {
   const { featureId, properties = {} } = options
@@ -126,18 +115,15 @@ export const createDrawPointMode = ({ map, manager, options }) => {
 
   const drawInteraction = new Draw({
     type: 'Point',
-    // Without an explicit style, OL renders its own default sketch style (a blue circle)
-    // following the cursor before commit — core/styles.js's createSketchStyle() already
-    // suppresses this same default for the "ghost" Point sketch OL renders alongside a
-    // Polygon/LineString sketch (see its own comment); a real Point sketch needs the same
-    // treatment, since it commits on the very first click with nothing meaningful to preview.
+    // Suppresses OL's default sketch style (a blue circle following the cursor) — nothing
+    // meaningful to preview since this commits on the first click.
     style: () => [],
     snapTolerance: TOLERANCES.snapRadius,
-    condition: (e) => noModifierKeys(e) && canPlace(e.coordinate)
+    condition: (event) => noModifierKeys(event) && canPlace(event.coordinate)
   })
   map.addInteraction(drawInteraction)
 
-  drawInteraction.on('drawend', (e) => finalizeDrawnFeature(manager, options.resolvePointSymbol, e.feature, featureId, properties))
+  drawInteraction.on('drawend', (event) => finalizeDrawnFeature(manager, options.resolvePointSymbol, event.feature, featureId, properties))
   drawInteraction.on('drawabort', () => { manager.emit(ADAPTER_EVENTS.CANCEL) })
 
   const input = buildPointInput({ drawInteraction, options, canPlace })

package/plugins/draw/src/adapters/openlayers/point/drawPointMode.test.js

@@ -56,7 +56,7 @@ describe('createDrawPointMode', () => {
     const { interaction, manager, emitted } = setup()
     interaction.dispatchEvent({ type: 'drawend', feature: pointFeature([1, 2], 'ol-generated-id') })
 
-    const created = emitted().filter((e) => e.type === ADAPTER_EVENTS.CREATE)
+    const created = emitted().filter((event) => event.type === ADAPTER_EVENTS.CREATE)
     expect(created).toHaveLength(1)
     expect(created[0].payload.id).toBe('point-1') // re-id'd, not the OL-generated one
     expect(created[0].payload.geometry.coordinates).toEqual([1, 2])
@@ -82,7 +82,7 @@ describe('createDrawPointMode', () => {
   test('defaults properties to {} when none are supplied', () => {
     const { interaction, manager, emitted } = setup({ properties: undefined })
     interaction.dispatchEvent({ type: 'drawend', feature: pointFeature([1, 2], 'ol-generated-id') })
-    const created = emitted().filter((e) => e.type === ADAPTER_EVENTS.CREATE)
+    const created = emitted().filter((event) => event.type === ADAPTER_EVENTS.CREATE)
     // OL's GeoJSON writer reports no properties as null (not {}) — the meaningful
     // assertion is what setProperties() was actually called with, on the stored feature.
     expect(created[0].payload.properties).toBeNull()
@@ -96,7 +96,7 @@ describe('createDrawPointMode', () => {
     const condition = interaction.condition_
     const allowed = condition({ coordinate: [1, 2], originalEvent: {} })
     expect(allowed).toBe(false)
-    const blocked = emitted().filter((e) => e.type === ADAPTER_EVENTS.PLACEMENT_BLOCKED)
+    const blocked = emitted().filter((event) => event.type === ADAPTER_EVENTS.PLACEMENT_BLOCKED)
     expect(blocked).toHaveLength(1)
     expect(blocked[0].payload).toMatchObject({ reason: 'not allowed here', phase: 'place', mode: 'draw_point' })
   })
@@ -116,7 +116,7 @@ describe('createDrawPointMode', () => {
   test('drawabort emits CANCEL', () => {
     const { interaction, emitted } = setup()
     interaction.dispatchEvent({ type: 'drawabort' })
-    expect(emitted().some((e) => e.type === ADAPTER_EVENTS.CANCEL)).toBe(true)
+    expect(emitted().some((event) => event.type === ADAPTER_EVENTS.CANCEL)).toBe(true)
   })
 
   describe('touch/keyboard placement (via the wired placeVertex callback)', () => {
@@ -142,13 +142,13 @@ describe('createDrawPointMode', () => {
       expect(finish).toHaveBeenCalled()
     })
 
-    test('does not snap on mouse interface', () => {
-      const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
+    test('still snaps with interfaceType mouse — placeVertex is only ever reached via the crosshair path (Enter, the add-vertex button, or the crosshair\'s own click), never a real mouse click', () => {
+      const snap = { apply: jest.fn(() => [9, 9]), hideIndicator: jest.fn() }
       const { wireArgs, interaction } = setup({ snap, interfaceType: 'mouse' })
       const { append } = spyOnCommit(interaction)
       wireArgs.placeVertex()
-      expect(snap.apply).not.toHaveBeenCalled()
-      expect(append).toHaveBeenCalledWith([[5, 5]])
+      expect(snap.apply).toHaveBeenCalledWith([5, 5])
+      expect(append).toHaveBeenCalledWith([[9, 9]])
     })
 
     test('a vetoed crosshair placement never commits', () => {
@@ -158,7 +158,7 @@ describe('createDrawPointMode', () => {
       wireArgs.placeVertex()
       expect(append).not.toHaveBeenCalled()
       expect(finish).not.toHaveBeenCalled()
-      expect(emitted().filter((e) => e.type === ADAPTER_EVENTS.PLACEMENT_BLOCKED)).toHaveLength(1)
+      expect(emitted().filter((event) => event.type === ADAPTER_EVENTS.PLACEMENT_BLOCKED)).toHaveLength(1)
     })
 
     test('updateRubberbanding shows the snap indicator at the crosshair for touch/keyboard, not mouse', () => {
@@ -169,11 +169,12 @@ describe('createDrawPointMode', () => {
       expect(snap.apply).toHaveBeenCalledWith([7, 7])
     })
 
-    test('updateRubberbanding does nothing on mouse interface', () => {
+    test('updateRubberbanding still refreshes the indicator regardless of interfaceType — the caller decides when it\'s worth calling this at all', () => {
       const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
-      const { wireArgs } = setup({ snap, interfaceType: 'mouse' })
+      const mapProvider = { getCenter: () => [7, 7] }
+      const { wireArgs } = setup({ snap, mapProvider, interfaceType: 'mouse' })
       wireArgs.updateRubberbanding()
-      expect(snap.apply).not.toHaveBeenCalled()
+      expect(snap.apply).toHaveBeenCalledWith([7, 7])
     })
 
     // Regression: without this, switching to touch/keyboard left the indicator hidden until
@@ -239,8 +240,26 @@ describe('createDrawPointMode', () => {
       const { mode, map, interaction, emitted } = setup()
       const removeSpy = jest.spyOn(map, 'removeInteraction')
       mode.destroy()
-      expect(emitted().some((e) => e.type === ADAPTER_EVENTS.INTERFACE_TYPE_CHANGE)).toBe(true)
+      expect(emitted().some((event) => event.type === ADAPTER_EVENTS.INTERFACE_TYPE_CHANGE)).toBe(true)
       expect(removeSpy).toHaveBeenCalledWith(interaction)
     })
+
+    test('wires crossHair.activate to the same placeVertex callback given to wireInputEvents — the crosshair button\'s own onClick (CrossHair.jsx) does exactly what Enter/the touch add-vertex button already do', () => {
+      const crossHair = {}
+      const { wireArgs } = setup({ crossHair })
+      expect(crossHair.activate).toBe(wireArgs.placeVertex)
+    })
+
+    test('does not wire crossHair.activate when no crossHair is provided', () => {
+      expect(() => setup({ crossHair: null })).not.toThrow()
+    })
+
+    test('destroy clears crossHair.activate so a stale closure cannot fire after the mode has gone', () => {
+      const crossHair = {}
+      const { mode } = setup({ crossHair })
+      expect(typeof crossHair.activate).toBe('function')
+      mode.destroy()
+      expect(crossHair.activate).toBeNull()
+    })
   })
 })

package/plugins/draw/src/adapters/openlayers/point/editPointMode.js

@@ -250,7 +250,7 @@ export const createEditPointMode = ({ map, manager, options }) => {
     // Matches MaplibreDrawAdapter.deleteVertex's existing no-op precedent.
     deleteVertex () {},
 
-    // MoveControls' D-pad, routed here via mapProvider.activeMoveTarget (events.js) — claimed
+    // MapControls' D-pad, routed here via mapProvider.activeMoveTarget (events.js) — claimed
     // once at construction (pointSelectionState's VERTEX_SELECTION) and held for the session.
     nudgeSelectedVertex: keyboardHandler.nudgeByDelta,
 

package/plugins/draw/src/adapters/openlayers/point/editPointMode.test.js

@@ -208,7 +208,7 @@ describe('mouse hit-testing respects the icon\'s own rendered pixels, not a fixe
   })
 })
 
-test('nudgeSelectedVertex (MoveControls D-pad) moves the point and is undoable', () => {
+test('nudgeSelectedVertex (MapControls D-pad) moves the point and is undoable', () => {
   const { manager, mode, coord } = setup()
   mode.nudgeSelectedVertex(1, 0, true)
   expect(coord()).not.toEqual([5, 5])
@@ -249,6 +249,22 @@ test('keyboard: Delete is a no-op — there is no delete-vertex action for a poi
   expect(coord()).toEqual([5, 5])
 })
 
+// A point is "always selected" (pointSelectionState.js's selectedVertexIndex never leaves 0),
+// so the shared keyboardHandler.js's Alt+<key> shadow guard (gated on selectedVertexIndex >= 0)
+// stays unconditionally true here — unlike edit_vertex, where it only applies once a vertex is
+// actually selected.
+test('keyboard: Alt+Enter/Alt+Arrow keyup are shadowed from the app-wide label shortcuts for the whole session', () => {
+  setup()
+  const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', altKey: true, cancelable: true, bubbles: true })
+  const arrowEvent = new KeyboardEvent('keyup', { key: 'ArrowRight', altKey: true, cancelable: true, bubbles: true })
+  const enterSpy = jest.spyOn(enterEvent, 'stopPropagation')
+  const arrowSpy = jest.spyOn(arrowEvent, 'stopPropagation')
+  window.dispatchEvent(enterEvent)
+  window.dispatchEvent(arrowEvent)
+  expect(enterSpy).toHaveBeenCalled()
+  expect(arrowSpy).toHaveBeenCalled()
+})
+
 test('keyboard: Cmd/Ctrl+Z undoes via the same op-popping logic as mode.undo()', () => {
   const { manager, coord } = setup()
   key('keydown', { key: 'ArrowRight' })

package/plugins/draw/src/events.js

@@ -36,8 +36,8 @@ const createGeometryInvalidEmitter = (eventBus, hints) => (payload) => {
   if (payload.reason && !isIncompleteShape(payload.reason)) { hints.show(payload.reason) }
 }
 
-// Claims MoveControls' D-pad for the currently selected vertex — see the generic
-// mapProvider.activeMoveTarget contract (MoveControls.jsx). Any plugin could use
+// Claims MapControls' D-pad for the currently selected vertex — see the generic
+// mapProvider.activeMoveTarget contract (MapControls.jsx). Any plugin could use
 // this slot; the draw plugin is just its first consumer.
 const buildVertexMoveTarget = (draw) => ({
   move: (dx, dy, isLargeStep) => draw.nudgeSelectedVertex(dx, dy, isLargeStep),
@@ -45,7 +45,7 @@ const buildVertexMoveTarget = (draw) => ({
 })
 
 // Vertex-selection handlers: sync pluginState.selectedVertexIndex, and claim/release
-// MoveControls' D-pad via buildVertexMoveTarget above.
+// MapControls' D-pad via buildVertexMoveTarget above.
 const createVertexSelectionHandlers = ({ draw, pluginState, mapProvider, eventBus }) => ({
   onVertexSelection: (e) => {
     pluginState.dispatch({ type: 'SET_SELECTED_VERTEX_INDEX', payload: e })
@@ -233,7 +233,7 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
   const resetState = () => {
     pluginState.dispatch({ type: 'SET_MODE', payload: null })
     pluginState.dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null } })
-    // Release MoveControls' D-pad back to panning the map whenever a draw/edit
+    // Release MapControls' D-pad back to panning the map whenever a draw/edit
     // session ends — a stale claim here would silently hijack it for good.
     mapProvider.activeMoveTarget = null
   }

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

@@ -179,7 +179,7 @@ describe('draw event handlers', () => {
     expect(() => drawHandler(draw, 'cancel')()).not.toThrow()
   })
 
-  test('vertexselection dispatches, emits, and claims mapProvider.activeMoveTarget for MoveControls', () => {
+  test('vertexselection dispatches, emits, and claims mapProvider.activeMoveTarget for MapControls', () => {
     const { draw, dispatch, eventBus, mapProvider } = setup()
     drawHandler(draw, 'vertexselection')({ index: 2 })
     expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SELECTED_VERTEX_INDEX', payload: { index: 2 } })

package/plugins/draw/src/hooks/useSpatialList.js

@@ -0,0 +1,180 @@
+import { useEffect, useRef } from 'react'
+import { EVENTS } from '../../../../src/config/events.js'
+import { scaleFactor } from '../../../../src/config/appConfig.js'
+import { ADAPTER_EVENTS } from '../adapterEvents.js'
+
+const EDIT_VERTEX_MODE = 'edit_vertex'
+const DRAW_PROVIDER_ID = 'draw'
+
+// Mirrors interact's own projectToScreen (plugins/interact/src/hooks/useSpatialList.js) —
+// mapProvider.mapToScreen is the provider-agnostic projection every mapProvider implements,
+// not any adapter-internal pixel conversion.
+const projectToScreen = (mapProvider, mapSize, coord) => {
+  const { x, y } = mapProvider.mapToScreen(coord)
+  return { x: x * scaleFactor[mapSize], y: y * scaleFactor[mapSize] }
+}
+
+// ids stay flat vertices-then-midpoints indices — matches the mode's own selectedVertexIndex
+// convention on both adapters (see the adapters' getVertexItems() doc comments) and is what
+// selectVertex/insertVertexAtMidpoint expect, so it's unrelated to display order. The array
+// order below is interleaved for display only: Point 1, Insert 1-2, Point 2, ... The "between
+// N and M" label (and this interleave) only reads correctly for a single ring/part (the
+// common case); a shape with holes or multiple parts would need ring-aware numbering to stay
+// accurate, not done here.
+const buildVertexItems = (mapProvider, mapSize) => {
+  const { vertices, midpoints } = mapProvider.draw?.getVertexItems?.() ?? { vertices: [], midpoints: [] }
+  const toVertexItem = (coord, i) => ({
+    id: String(i),
+    label: `Point ${i + 1}`,
+    isMidpoint: false,
+    ...projectToScreen(mapProvider, mapSize, coord)
+  })
+  const toMidpointItem = (coord, i) => ({
+    id: String(vertices.length + i),
+    // Kept as short as possible — a voice user hears/reads this in full each time, and
+    // "Insert point between N and M" was long enough to lose.
+    label: `Insert ${i + 1}-${((i + 1) % vertices.length) + 1}`,
+    isMidpoint: true,
+    ...projectToScreen(mapProvider, mapSize, coord)
+  })
+  const items = []
+  vertices.forEach((coord, i) => {
+    items.push(toVertexItem(coord, i))
+    if (i < midpoints.length) {
+      items.push(toMidpointItem(midpoints[i], i))
+    }
+  })
+  return items
+}
+
+/**
+ * Rebuilds the vertex/midpoint item list whenever edit_vertex is entered/left, on every
+ * geometry change, and on every map move (pan/zoom moves each item's screen position even
+ * though the underlying geographic coordinate hasn't changed — same reason interact's own
+ * hook rebuilds on MAP_MOVE_END). Keeps the result in itemsRef for useConfirmHandler to
+ * resolve against later, and registers as an exclusive spatialListRegistry provider —
+ * claiming ownership while edit_vertex is active (interact's own items are excluded
+ * meanwhile, restored automatically once the claim is released) rather than contributing
+ * additively like interact does.
+ */
+function useVertexItemSync ({ pluginState, mapProvider, mapSize, spatialListRegistry, itemsRef, eventBus }) {
+  useEffect(() => {
+    const rebuild = () => {
+      itemsRef.current = pluginState.mode === EDIT_VERTEX_MODE ? buildVertexItems(mapProvider, mapSize) : []
+      spatialListRegistry.notifyItemsChanged(DRAW_PROVIDER_ID)
+    }
+    rebuild()
+    eventBus.on(EVENTS.MAP_MOVE_END, rebuild)
+    const { draw } = mapProvider
+    if (!draw) {
+      return () => eventBus.off(EVENTS.MAP_MOVE_END, rebuild)
+    }
+    draw.on(ADAPTER_EVENTS.UPDATE, rebuild)
+    return () => {
+      eventBus.off(EVENTS.MAP_MOVE_END, rebuild)
+      draw.off(ADAPTER_EVENTS.UPDATE, rebuild)
+    }
+  }, [pluginState.mode, mapProvider, mapSize, spatialListRegistry, itemsRef, eventBus])
+
+  // Registers once, for the lifetime of the hook — safe outside edit_vertex too, since an
+  // exclusive-capable provider only ever contributes while it holds the claim (see
+  // spatialListRegistry.js). Declared after the effect above for the same initial-recompute
+  // ordering reason interact's own hook documents.
+  useEffect(() => {
+    spatialListRegistry.registerItemProvider(DRAW_PROVIDER_ID, {
+      // focusable: false — Tab-only keyboard users already have a full path via the map's own
+      // arrow-key nudge/Alt+Arrow navigate, so this list exists purely for Voice Control and a
+      // screen reader's own virtual-cursor discovery + activation. See SpatialList.jsx's own
+      // comment on why forcing every item's tabIndex to -1 is deliberate here.
+      getItems: () => ({ items: itemsRef.current, multiselectable: false, label: 'Shape points', focusable: false }),
+      exclusive: true
+    })
+    return () => { spatialListRegistry.unregisterItemProvider(DRAW_PROVIDER_ID) }
+  }, [spatialListRegistry, itemsRef])
+
+  useEffect(() => {
+    if (pluginState.mode !== EDIT_VERTEX_MODE) {
+      return undefined
+    }
+    spatialListRegistry.claimExclusive(DRAW_PROVIDER_ID)
+    return () => spatialListRegistry.releaseExclusive(DRAW_PROVIDER_ID)
+  }, [pluginState.mode, spatialListRegistry])
+}
+
+/**
+ * Listens for MAP_SET_ACTIVE_ITEM and previews (non-destructively) whichever vertex or
+ * midpoint the listbox cursor is now on — every arrow-key move through the list, mirroring
+ * how mouse/touch/keyboard selection already behaves live elsewhere in edit_vertex. Unlike
+ * interact's real map features (which need an explicit Enter/Space confirm before anything
+ * happens), there's no separate "preview" step for a real vertex anywhere else in this mode —
+ * arrowing onto one already is the live selection. A midpoint is also just previewed here;
+ * confirming the actual insert is useConfirmHandler's job below.
+ */
+function useActiveVertexHandler ({ eventBus, mapProvider, pluginState, activeIdRef }) {
+  useEffect(() => {
+    const handle = ({ id }) => {
+      activeIdRef.current = id
+      if (id === null || pluginState.mode !== EDIT_VERTEX_MODE) {
+        return
+      }
+      mapProvider.draw?.selectVertex?.(Number(id))
+    }
+    eventBus.on(EVENTS.MAP_SET_ACTIVE_ITEM, handle)
+    return () => { eventBus.off(EVENTS.MAP_SET_ACTIVE_ITEM, handle) }
+  }, [eventBus, mapProvider, pluginState.mode, activeIdRef])
+}
+
+/**
+ * Handles MAP_SELECT_ITEM (Enter/Space, or a click/Voice-Control click — and, since none of
+ * these items are ever a real Tab stop, a screen reader's own virtual-cursor activation gesture
+ * too, which likewise fires as a click — all three arrive here identically). For a midpoint,
+ * this is the destructive step: commits a new vertex there (a real vertex is already the live
+ * selection the moment it's previewed, so confirming one doesn't change anything on the map).
+ * Either way, confirming announces what happened and hands keyboard focus back to the viewport
+ * — landing the user exactly where the pre-existing, untouched arrow-key nudge/Alt+Arrow flow
+ * already works, same as if they'd selected that point with a mouse click. This is deliberately
+ * unconditional (not just for midpoints) so every input path ends up in the same place.
+ */
+function useConfirmHandler ({ eventBus, mapProvider, pluginState, activeIdRef, itemsRef, viewportRef, announce }) {
+  useEffect(() => {
+    const handleConfirm = () => {
+      if (pluginState.mode !== EDIT_VERTEX_MODE || activeIdRef.current === null) {
+        return
+      }
+      const item = itemsRef.current.find(i => i.id === activeIdRef.current)
+      if (!item) {
+        return
+      }
+      if (item.isMidpoint) {
+        mapProvider.draw?.insertVertexAtMidpoint?.(Number(activeIdRef.current))
+        announce('New point inserted', 'action')
+      } else {
+        announce(`${item.label} selected`, 'action')
+      }
+      viewportRef.current?.focus()
+    }
+    eventBus.on(EVENTS.MAP_SELECT_ITEM, handleConfirm)
+    return () => { eventBus.off(EVENTS.MAP_SELECT_ITEM, handleConfirm) }
+  }, [eventBus, mapProvider, pluginState.mode, activeIdRef, itemsRef, viewportRef, announce])
+}
+
+/**
+ * Orchestrates the accessible (Voice Control / screen-reader-discoverable) vertex/midpoint
+ * targets for draw's edit_vertex mode. Mirrors plugins/interact/src/hooks/useSpatialList.js's
+ * structure (item-sync + active-item concerns), but claims the registry's exclusive slot
+ * instead of contributing additively, declares focusable: false (no real Tab stop — see
+ * useVertexItemSync's own comment on why), and splits "preview" (any listbox move, non-
+ * destructive) from "confirm" (inserts at a midpoint, then always hands focus back to the
+ * viewport) rather than interact's own "preview, then explicit confirm for everything" split.
+ *
+ * @param {{ mapState: object, pluginState: object, services: object, mapProvider: object, spatialListRegistry: object, viewportRef: React.RefObject }} params
+ */
+export function useSpatialList ({ mapState, pluginState, services, mapProvider, spatialListRegistry, viewportRef }) {
+  const { mapSize } = mapState
+  const { eventBus, announce } = services
+  const itemsRef = useRef([])
+  const activeIdRef = useRef(null)
+  useVertexItemSync({ pluginState, mapProvider, mapSize, spatialListRegistry, itemsRef, eventBus })
+  useActiveVertexHandler({ eventBus, mapProvider, pluginState, activeIdRef })
+  useConfirmHandler({ eventBus, mapProvider, pluginState, activeIdRef, itemsRef, viewportRef, announce })
+}