feat(ui): render the map source chips and status badge from the store

createMapSourceControls() (./ui/maps) no longer builds the chip row or
writes the status badge: it presents both and hands them to its publish
option, so the entry stays Vue-free. The shell publishes them to the
gev-display store and connects the controls, and the dock renders the
chips and calls select() for an available one. renderMapStackChips and
syncMapStackChips are deprecated. The map source QA harnesses wait for
the dock to render and no longer read the removed element refs.

src/ui/mapSourceControls.js

@@ -1,37 +1,48 @@
-import { renderMapStackChips, syncMapStackChips } from '../mapStackChips.js';
+import { mapStackChipModels } from '../mapStackChips.js';
 import { t } from '../i18n/index.js';
 
 /**
  * Own Map Source presentation and selection without constructing map providers.
  * The supplied controller remains authoritative for availability and active state.
+ * The chip row and the status badge are presented as a plain view and handed to
+ * `publish`; Core's dock renders them and calls `select()` for a chip.
  */
 export function createMapSourceControls({
-  container,
-  statusElement,
   controller,
   subscribe,
+  publish = () => {},
   claimSelection = () => {},
   onStateChanged = () => {},
   onError = () => {},
 }) {
   let destroyed = false;
   let generation = 0;
-  const removers = [];
-  const bind = (element, type, listener) => {
-    element.addEventListener(type, listener);
-    removers.push(() => element.removeEventListener(type, listener));
-  };
+  // Availability tracks the ion token, so the stacks are read on refresh only.
+  let stacks = [];
+  function present(state) {
+    const stack = state.activeStack;
+    return {
+      chips: mapStackChipModels(stacks, state.activeId).map((model) => ({
+        ...model,
+        ariaLabel: model.available
+          ? null
+          : t('{label} unavailable: {hint}', {
+              label: model.label,
+              hint: model.unavailableHint,
+            }),
+      })),
+      status: {
+        text:
+          state.status === 'switching'
+            ? '...'
+            : stack?.shortLabel || stack?.label || t('MAP'),
+        warn: !!state.lastError,
+      },
+    };
+  }
   function render(state) {
     if (destroyed || !state) return;
-    syncMapStackChips(container, state.activeId);
-    if (statusElement) {
-      const stack = state.activeStack;
-      statusElement.textContent =
-        state.status === 'switching'
-          ? '...'
-          : stack?.shortLabel || stack?.label || t('MAP');
-      statusElement.classList.toggle('warn', !!state.lastError);
-    }
+    publish(present(state));
   }
   async function select(stackId, { syncShare = true } = {}) {
     if (destroyed) return null;
@@ -58,14 +69,7 @@ export function createMapSourceControls({
   }
   function refresh() {
     if (destroyed) return;
-    for (const remove of removers.splice(0)) remove();
-    renderMapStackChips(container, controller.getStacks(), {
-      activeId: controller.getActiveId(),
-      onSelect: (id) => {
-        void select(id).catch(() => {});
-      },
-      bind,
-    });
+    stacks = controller.getStacks();
     render(controller.getState());
   }
   const unsubscribe = subscribe(() => {
@@ -83,7 +87,6 @@ export function createMapSourceControls({
       destroyed = true;
       generation++;
       unsubscribe?.();
-      for (const remove of removers.splice(0)) remove();
     },
   };
 }