@meri-imperiumi/signalk-dead-reckoning 0.11.0 → 0.11.2

package/CHANGELOG.md

@@ -7,6 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.11.2] - 2026-09-21
+
+### Added
+- **The active Signal K route renders on the chart.** When the
+  own-vessel course state carries an active route
+  (`navigation.course.activeRoute.href` — the discovery pattern
+  Freeboard-SK uses), the webapp fetches the route resource from
+  `/signalk/v1/api/resources/routes/{id}` and draws it in the
+  chartplotter convention: a magenta leg line over a dark casing,
+  one waypoint marker per point, and the point currently being
+  navigated to (`pointIndex`) emphasized with a filled marker and a
+  "— next" tooltip. Waypoint names from the route's
+  `coordinatesMeta` label the markers; the layer is toggleable via
+  the map's layers control ("Active route"). The route clears when
+  the course is cancelled, re-renders from cache on waypoint
+  advances (no refetch), and seeds from the REST self snapshot so a
+  route activated before the page loaded shows immediately.
+
+## [0.11.1] - 2026-09-20
+
+### Changed
+- **Widget placement moved into the chart's context menu.** The
+  hosted-widget areas no longer carry their own "＋ EXT" buttons —
+  right-clicking the chart where a widget area sits (below the entry
+  tools or the GPS panel — the full 2×2 footprint is reserved and
+  stays pointer-transparent) shows the existing pick menu with an
+  added "Plotter widgets" entry that opens the placement picker for
+  that area. Only placed cells capture pointer events, so the chart
+  keeps dragging and right-clicking through the gaps.
+
 ## [0.11.0] - 2026-09-20
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meri-imperiumi/signalk-dead-reckoning",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "Offline-first dead reckoning and sensor fusion engine for Signal K",
   "main": "plugin/index.js",
   "scripts": {

package/public/dr-app.js

@@ -243,9 +243,11 @@ template.innerHTML = /* html */ `
     /* Widget areas for hosted plotter extensions (work doc #27) ride
        below the webapp's own panels in the same column — anchored,
        not at the literal viewport corner, so they can never cover
-       the entry tools or GPS status. The area is pointer-transparent
-       except its own interactive parts, so the chart still drags
-       around it. */
+       the entry tools or GPS status. The area reserves its 2×2
+       footprint but is pointer-transparent except its cells, so the
+       chart still drags through; placement is offered by the chart
+       context menu (right-click on the footprint), not by any
+       on-chart button. */
     .dr-top-col {
       display: flex;
       flex-direction: column;
@@ -516,6 +518,24 @@ class DrApp extends HTMLElement {
       openSight();
       this.sight?.seedObjectPosition(lat, lng, mode, label, tMs);
     });
+    // Hosted plotter-widget areas (work doc #27) carry no buttons: the
+    // chart context menu offers placement when the pick lands on a
+    // reserved area footprint. dr-app owns the hit test (the areas
+    // live in this shadow root) and opens the ext host's picker.
+    if (this.map) {
+      this.map.areaAt = (x, y) => {
+        for (const el of root.querySelectorAll("dr-ext-widget-area")) {
+          const r = el.getBoundingClientRect();
+          if (x >= r.left && x < r.right && y >= r.top && y < r.bottom) {
+            return el.getAttribute("anchor") ?? "top-left";
+          }
+        }
+        return null;
+      };
+      this.map.addEventListener("dr-open-ext-picker", (e) => {
+        this.extHost?.openPicker(e.detail.anchor);
+      });
+    }
 
     /** @type {HTMLDialogElement|null} */
     this.sightDialog = root.querySelector("#sight-dialog");
@@ -687,6 +707,22 @@ class DrApp extends HTMLElement {
      * @type {string|null}
      */
     this.shadowContext = null;
+    /**
+     * Active Signal K route (navigation.course.activeRoute), discovered
+     * the Freeboard-SK way: the course state carries a resource href,
+     * the route geometry is fetched from `/resources/routes/{id}`.
+     * @type {{id: string, pointIndex: number}|null}
+     */
+    this.activeRoute = null;
+    /** Route resources fetched this session — pointIndex deltas
+     * re-render from cache without a refetch. @type {Map<string, object>} */
+    this.routeCache = new Map();
+    /** Cache-buster key of the route spec currently on the map. */
+    this.routeRenderedKey = null;
+    /** Route ids with a fetch in progress — the 1 Hz course stream
+     * would otherwise re-issue the request until it lands.
+     * @type {Set<string>|null} */
+    this.routeFetchInFlight = null;
     this.snap = {
       drPosition: null,
       gpsPosition: null,
@@ -809,6 +845,12 @@ class DrApp extends HTMLElement {
       "environment.mode",
       "environment.current.setTrue",
       "environment.current.drift",
+      // Active route (Freeboard-SK's discovery pattern): the course
+      // provider publishes the whole activeRoute object — href, name,
+      // pointIndex, pointTotal — as ONE delta value at this path (not
+      // leaf paths; verified on the wire), pointing at
+      // `/resources/routes/{id}`.
+      "navigation.course.activeRoute",
     ]);
     // AIS targets (work doc #23): same socket, `vessels.*` scope — the
     // protocol scopes each subscribe message to its context. Static
@@ -922,12 +964,68 @@ class DrApp extends HTMLElement {
           hdop: pick("horizontalDilution"),
         });
       }
+      // Active route seed (Freeboard-SK pattern): the REST self snapshot
+      // carries the full course subtree, so a route activated before the
+      // page loaded shows immediately without waiting for a delta.
+      const active = vm.activeRouteFromCourse(nav?.navigation?.course);
+      if (active && active.id !== this.activeRoute?.id) {
+        this.activeRoute = active;
+        this.refreshActiveRoute();
+      }
       this.render();
     } catch {
       /* REST unavailable — stream will drive when it can */
     }
   }
 
+  /**
+   * Fetches and renders the currently active Signal K route. The course
+   * state names the route by href (Freeboard-SK's discovery pattern);
+   * the geometry — a GeoJSON Feature per Signal K's route resources —
+   * comes from `/resources/routes/{id}` and is cached for the session
+   * so pointIndex advances re-render without a refetch. A null route
+   * (course cleared, single-waypoint destination) clears the map layer.
+   *
+   * @returns {Promise<void>}
+   */
+  async refreshActiveRoute() {
+    const active = this.activeRoute;
+    if (!active) {
+      this.routeRenderedKey = null;
+      this.map?.renderRoute(null);
+      return;
+    }
+    let resource = this.routeCache.get(active.id);
+    if (!resource) {
+      if (this.routeFetchInFlight?.has(active.id)) return; // already fetching
+      // Signal K v2 resources API — route/waypoint resources with a
+      // resource-provider backend are served under /signalk/v2 (the v1
+      // path 404s; Freeboard-SK also uses v2).
+      (this.routeFetchInFlight ??= new Set()).add(active.id);
+      try {
+        const res = await fetch(
+          `/signalk/v2/api/resources/routes/${encodeURIComponent(active.id)}`,
+        );
+        if (!res.ok) return; // resource unavailable — next course delta retries
+        resource = await res.json();
+        this.routeCache.set(active.id, resource);
+      } catch {
+        return; // REST unavailable — next course delta retries
+      } finally {
+        this.routeFetchInFlight.delete(active.id);
+      }
+    }
+    const spec = vm.routeRenderSpec(resource, active.id, active.pointIndex);
+    if (!spec) return;
+    // Skip re-renders for course updates that don't change anything
+    // visible (the stream repeats the whole course subtree at 1 Hz).
+    const key = `${active.id}:${active.pointIndex}:${spec.points.length}`;
+    if (key === this.routeRenderedKey) return;
+    this.routeRenderedKey = key;
+    spec.labels = vm.routeWaypointLabels(resource, spec.points.length);
+    this.map?.renderRoute(spec);
+  }
+
   /**
    * Seeds the AIS target store from the REST vessel snapshot (work doc
    * #23): static data (name/mmsi) arrives here; live motion rides the
@@ -1121,6 +1219,24 @@ class DrApp extends HTMLElement {
           this.sight?.setMagneticVariation(vm.radToDeg(value));
         }
         break;
+      case "navigation.course.activeRoute": {
+        // Route activation / advancement / cancellation (null when the
+        // course clears). The value carries href, pointIndex and
+        // pointTotal together — one parse covers all three; only an
+        // actual change triggers work (the stream repeats the subtree).
+        const next = vm.activeRouteFromCourse({ activeRoute: value });
+        const prev = this.activeRoute;
+        if (
+          (next?.id ?? null) === (prev?.id ?? null) &&
+          (next?.pointIndex ?? -1) === (prev?.pointIndex ?? -1)
+        ) {
+          break;
+        }
+        this.activeRoute = next;
+        this.refreshActiveRoute();
+        break;
+      }
+      case "environment.current.setTrue":
       case "environment.current.setTrue":
         // Bus value is radians; the snap (and /status) carry degrees.
         if (Number.isFinite(value)) {

package/public/dr-ext-host.js

@@ -903,9 +903,10 @@ const AreaBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {};
  * webapp's own floating panels. Pure chrome: the frames are owned by
  * the manager; the visual language (translucent panel, corner
  * brackets) comes from dr-theme.js so hosted widgets sit in the same
- * frame as `.dr-tools`/`.dr-gps`. Empty cells stay pointer-transparent
- * so the chart keeps dragging through the gaps; the compact "＋ EXT"
- * affordance opens the placement picker.
+ * frame as `.dr-tools`/`.dr-gps`. The element carries no buttons —
+ * it stays pointer-transparent everywhere except its cells, and the
+ * host reserves the full 2×2 footprint so the chart's context menu
+ * (see dr-map-view) can offer widget placement over it.
  */
 export class DrExtWidgetArea extends AreaBase {
   constructor() {
@@ -918,13 +919,19 @@ export class DrExtWidgetArea extends AreaBase {
         --theme-color: var(--color-teal, #4b8b99);
         pointer-events: none; /* chart drags through empty space */
         display: block;
+        /* Reserve the full 2×2 grid footprint even while empty: the
+           chart context menu offers widget placement here (dr-app
+           hit-tests this rect), so the area needs a stable location
+           without carrying any on-chart button of its own. */
+        min-width: calc(2 * ${CELL_CSS} + 6px);
+        min-height: calc(2 * ${CELL_CSS} + 6px);
       }
       .grid {
         display: none; /* only with placements */
         grid-template-columns: repeat(2, ${CELL_CSS});
         grid-auto-rows: ${CELL_CSS};
         gap: 6px;
-        pointer-events: auto;
+        pointer-events: none; /* only the cells are interactive */
       }
       .grid.active { display: grid; }
       .cell {
@@ -935,6 +942,7 @@ export class DrExtWidgetArea extends AreaBase {
         overflow: hidden;
         min-width: 0;
         min-height: 0;
+        pointer-events: auto;
       }
       /* Corner brackets — same hardware-mounting language as the app
          panels, but thinner so the widget content dominates. */
@@ -963,25 +971,12 @@ export class DrExtWidgetArea extends AreaBase {
         border: 0;
         background: transparent;
       }
-      .add {
-        pointer-events: auto;
-        margin-top: 6px;
-        min-height: 32px;
-        padding: 0 0.6rem;
-        font-size: 0.7rem;
-      }
     `;
     root.appendChild(style);
     const grid = document.createElement("div");
     grid.className = "grid";
-    const add = document.createElement("button");
-    add.className = "add";
-    add.type = "button";
-    add.textContent = "＋ EXT";
-    add.title = "Place a plotter-extension widget";
-    root.append(grid, add);
+    root.appendChild(grid);
     this.grid = grid;
-    this.addButton = add;
     /** @type {Map<string, HTMLDivElement>} instanceId → cell */
     this.cells = new Map();
     /** @type {Array<object>} current placements */
@@ -996,9 +991,6 @@ export class DrExtWidgetArea extends AreaBase {
   }
 
   connectedCallback() {
-    this.addButton.addEventListener("click", () => {
-      this.manager?.openPicker(this.anchor);
-    });
     this.render();
   }
 

package/public/dr-map-view.js

@@ -275,6 +275,7 @@ class DrMapView extends HTMLElement {
       candidate: null,
       advancements: null,
       ais: null,
+      route: null,
     };
     this.tileLayers = {};
     this.follow = true;
@@ -469,11 +470,16 @@ class DrMapView extends HTMLElement {
         first?.addTo(this.map);
         // Always mounted (even single-chart installs): the AIS traffic
         // overlay (work doc #23) needs its checkbox so the chart can be
-        // de-cluttered.
+        // de-cluttered, and the active Signal K route too (a route
+        // crossing the leg being sailed shouldn't be forced on top of
+        // the chartwork).
         L.control
           .layers(
             bases,
-            { "AIS traffic": this.layers.ais },
+            {
+              "AIS traffic": this.layers.ais,
+              "Active route": this.layers.route,
+            },
             { collapsed: true, position: "bottomleft" },
           )
           .addTo(this.map);
@@ -642,6 +648,17 @@ class DrMapView extends HTMLElement {
     return best;
   }
 
+  /**
+   * Hosted-widget-area hit test, registered by dr-app: given a client
+   * point, returns the `<dr-ext-widget-area>` anchor it lands on (or
+   * null). The areas carry no buttons of their own — widget placement
+   * rides the pick menu when the right-click lands on a reserved area
+   * footprint.
+   *
+   * @type {((clientX: number, clientY: number) => (string|null))|null}
+   */
+  areaAt = null;
+
   /**
    * Shows a small context menu at a chart point offering to pre-seed a
    * sight form with that position as the object. Dispatches
@@ -649,7 +666,9 @@ class DrMapView extends HTMLElement {
    * label, tMs }` — `label` carries the picked symbol's charted name
    * (or an AIS target's name, work doc #23), `tMs` the pick instant the
    * position is valid for (an AIS target's predicted position is
-   * anchored to it).
+   * anchored to it). When the pick lands on a hosted widget-area
+   * footprint (`areaAt`), the menu also offers widget placement via a
+   * `dr-open-ext-picker` event.
    *
    * @param {L.LatLng|[number, number]} latlng
    * @param {L.Point|null|undefined} [containerPoint]
@@ -691,6 +710,31 @@ class DrMapView extends HTMLElement {
       });
       menu.appendChild(btn);
     }
+    // Hosted plotter widgets (dr-app registers the hit test): a pick
+    // landing on a widget-area footprint offers placement there in
+    // the same menu — the areas carry no on-chart buttons.
+    if (containerPoint && this.areaAt) {
+      const r = this.mapEl.getBoundingClientRect();
+      const anchor = this.areaAt(
+        r.left + containerPoint.x,
+        r.top + containerPoint.y,
+      );
+      if (anchor) {
+        const btn = document.createElement("button");
+        btn.textContent = ` Plotter widgets (${anchor})…`;
+        btn.addEventListener("click", () => {
+          this.hidePickMenu();
+          this.dispatchEvent(
+            new CustomEvent("dr-open-ext-picker", {
+              bubbles: true,
+              composed: true,
+              detail: { anchor },
+            }),
+          );
+        });
+        menu.appendChild(btn);
+      }
+    }
     // Position the menu at the screen point of the click.
     const point = this.map.latLngToContainerPoint(latlng);
     menu.style.left = `${point.x}px`;
@@ -1193,6 +1237,55 @@ class DrMapView extends HTMLElement {
     });
   }
 
+  /**
+   * Renders the currently active Signal K route
+   * (`navigation.course.activeRoute`, discovered the Freeboard-SK
+   * way — href → `/resources/routes/{id}` fetch): a magenta leg line
+   * through the route's waypoints with one marker per waypoint, the
+   * point currently being navigated to emphasized. Dr-app pushes a
+   * `routeRenderSpec`; null (course cleared, or a destination that
+   * isn't a route) empties the layer. The whole layer is toggleable
+   * via the layers control ("Active route").
+   *
+   * @param {{name: string, points: Array<[number, number]>,
+   *   targetIndex: number, labels?: Array<string>}|null} spec
+   * @returns {void}
+   */
+  renderRoute(spec) {
+    const layer = this.layers.route;
+    if (!layer) return;
+    layer.clearLayers();
+    if (!spec || spec.points?.length < 2) return;
+    // Route line over a dark casing — same cartographic trick as the
+    // ghost track so the magenta stays legible over light raster tiles.
+    L.polyline(spec.points, {
+      color: vm.STYLE.track.casingColor,
+      weight: 4.5,
+      opacity: 0.85,
+      interactive: false,
+    }).addTo(layer);
+    L.polyline(spec.points, {
+      color: vm.STYLE.route,
+      weight: 2.5,
+      opacity: 0.95,
+    })
+      .bindTooltip(spec.name, { direction: "top" })
+      .addTo(layer);
+    for (let i = 0; i < spec.points.length; i++) {
+      const target = i === spec.targetIndex;
+      const label = spec.labels?.[i] ?? `WP ${i + 1}`;
+      L.circleMarker(spec.points[i], {
+        radius: target ? 6 : 4,
+        color: vm.STYLE.route,
+        fillColor: target ? vm.STYLE.route : "transparent",
+        fillOpacity: target ? 0.9 : 0,
+        weight: 2,
+      })
+        .bindTooltip(target ? `${label} — next` : label, { direction: "top" })
+        .addTo(layer);
+    }
+  }
+
   /**
    * Dispatches a map-click inspection event (work doc #13): the app
    * opens the detail popover for the clicked record.

package/public/dr-viewmodel.js

@@ -47,6 +47,10 @@ export const STYLE = {
   ais: "#c77bd9",
   aisBuddy: "#6b9e78",
   aisExpiring: "#888899",
+  // Active Signal K route (navigation.course.activeRoute): the
+  // chartplotter convention — routes draw magenta, distinct from
+  // every DR-family color above so own track never reads as plan.
+  route: "#d05fa2",
   fix: {
     gps: "#6b9e78",
     celestial: "#c77b28",
@@ -2025,3 +2029,125 @@ export function aisTargetsForRender(store, nowMs, own, opts = {}) {
   if (own) specs.sort((a, b) => (a.rangeNm ?? 0) - (b.rangeNm ?? 0));
   return specs;
 }
+
+/**
+ * Extracts the resource id from a Signal K resource href —
+ * `/resources/routes/{id}` → `{id}`, `/resources/waypoints/{id}` →
+ * `{id}`. Freeboard-SK parses the same trailing segment off
+ * `navigation.course.activeRoute.href` to look the route up.
+ *
+ * @param {string|null|undefined} href
+ * @returns {string|null} resource id, or null when not a resource href
+ */
+export function resourceIdFromHref(href) {
+  if (typeof href !== "string" || href.length === 0) return null;
+  const segs = href.split("/").filter((s) => s.length > 0);
+  return segs.length > 0 ? segs[segs.length - 1] : null;
+}
+
+/**
+ * Unwraps a Signal K value node: the REST tree wraps leaves as
+ * `{value, timestamp, $source}`, stream deltas carry bare values.
+ * The course subtree arrives both ways (REST self-snapshot seed,
+ * stream deltas), so both shapes must parse.
+ *
+ * @param {unknown} v
+ * @returns {unknown} the bare value
+ */
+function unwrapValue(v) {
+  return v && typeof v === "object" && "value" in v ? v.value : v;
+}
+
+/**
+ * Parses the own-vessel course state (`navigation.course.*` value
+ * object, or the same subtree from the REST self snapshot) into the
+ * active-route state the webapp tracks: which route is the current
+ * destination, and which of its points the boat is steering toward.
+ * A course without an activeRoute (single-waypoint destination) or a
+ * missing/null subtree yields null — the route layer clears.
+ *
+ * @param {object|null|undefined} course - `navigation.course` value
+ * @returns {{id: string, pointIndex: number}|null}
+ */
+export function activeRouteFromCourse(course) {
+  // Both REST shapes occur: the whole activeRoute node wrapped
+  // ({value: {href…}}) and/or individual leaves wrapped
+  // ({href: {value…}}). Unwrap both.
+  const active = unwrapValue(course?.activeRoute);
+  const href = unwrapValue(active?.href);
+  const id = resourceIdFromHref(href);
+  if (!id) return null;
+  const idx = unwrapValue(active?.pointIndex);
+  return {
+    id,
+    pointIndex: Number.isFinite(idx) && idx >= 0 ? idx : -1,
+  };
+}
+
+/**
+ * Shapes a Signal K route resource (`GET /signalk/v1/api/resources/routes/{id}`
+ * — a GeoJSON Feature whose LineString geometry carries the leg
+ * vertices as [lon, lat]) into the map's render spec: Leaflet-order
+ * points, the route name, and the index of the point currently being
+ * navigated to. Mirrors Freeboard-SK's route normalization: name
+ * falls back to a short-id label when the resource carries none, and
+ * a target index outside the point list degrades to "no highlight"
+ * rather than pointing at a wrong waypoint.
+ *
+ * @param {object|null|undefined} routeResource - route resource value
+ * @param {string} id - resource id (for the fallback name)
+ * @param {number} [pointIndex=-1] - active point index from the course
+ * @returns {{name: string, points: Array<[number, number]>,
+ *   targetIndex: number}|null} null when the resource has no geometry
+ */
+export function routeRenderSpec(routeResource, id, pointIndex = -1) {
+  const coords = routeResource?.feature?.geometry?.coordinates;
+  if (!Array.isArray(coords) || coords.length < 2) return null;
+  const points = [];
+  for (const c of coords) {
+    if (!Array.isArray(c) || !Number.isFinite(c[0]) || !Number.isFinite(c[1])) {
+      continue;
+    }
+    // GeoJSON order is [lon, lat]; the map wants [lat, lon].
+    points.push([c[1], c[0]]);
+  }
+  if (points.length < 2) return null;
+  const name =
+    typeof routeResource?.name === "string" && routeResource.name.length > 0
+      ? routeResource.name
+      : typeof routeResource?.feature?.properties?.name === "string" &&
+          routeResource.feature.properties.name.length > 0
+        ? routeResource.feature.properties.name
+        : `Route ${id.slice(-6)}`;
+  const targetIndex =
+    Number.isFinite(pointIndex) && pointIndex >= 0 && pointIndex < points.length
+      ? pointIndex
+      : -1;
+  return { name, points, targetIndex };
+}
+
+/**
+ * Waypoint labels for the active route, from the resource's
+ * coordinatesMeta (Freeboard-SK's per-point metadata — name carried
+ * per waypoint). Unnamed or absent metadata falls back to the
+ * traditional "WP n" numbering, 1-based.
+ *
+ * @param {object|null|undefined} routeResource
+ * @param {number} count - number of route points
+ * @returns {Array<string>} one label per point
+ */
+export function routeWaypointLabels(routeResource, count) {
+  const meta = Array.isArray(
+    routeResource?.feature?.properties?.coordinatesMeta,
+  )
+    ? routeResource.feature.properties.coordinatesMeta
+    : [];
+  const labels = [];
+  for (let i = 0; i < count; i++) {
+    const name = meta[i]?.name;
+    labels.push(
+      typeof name === "string" && name.length > 0 ? name : `WP ${i + 1}`,
+    );
+  }
+  return labels;
+}

package/tests/dr-ext-host.test.js

@@ -21,6 +21,7 @@ const read = (f) =>
   });
 const hostSrc = read("dr-ext-host.js");
 const appSrc = read("dr-app.js");
+const mapSrc = read("dr-map-view.js");
 const streamSrc = read("dr-signalk-stream.js");
 
 // ---- fakes --------------------------------------------------------------
@@ -385,6 +386,28 @@ test("dr-ext-host: widget cells reuse the theme's visual language", () => {
   assert.match(hostSrc, /:host \{[^}]*pointer-events: none/s);
 });
 
+test("placement rides the chart context menu, not an on-chart button", () => {
+  // No “＋ EXT” button stuck to the chart.
+  assert.doesNotMatch(hostSrc, /＋ EXT/);
+  assert.doesNotMatch(hostSrc, /\.add \{/);
+  // The empty area still reserves its 2×2 footprint so there is a
+  // stable region for the context-menu hit test.
+  assert.match(hostSrc, /min-width: calc\(2 \* \$\{CELL_CSS\} \+ 6px\)/);
+  assert.match(hostSrc, /min-height: calc\(2 \* \$\{CELL_CSS\} \+ 6px\)/);
+  // Only the cells capture pointer events — gaps and empty cells
+  // stay clickable as chart (right-click reaches the map).
+  assert.match(hostSrc, /\.grid \{[\s\S]*?pointer-events: none/s);
+  assert.match(hostSrc, /\.cell \{[^}]*pointer-events: auto/s);
+  // The pick menu grows the placement entry over an area footprint.
+  assert.match(mapSrc, /areaAt = null;/);
+  assert.match(mapSrc, /this\.areaAt\(/);
+  assert.match(mapSrc, / Plotter widgets \(\$\{anchor\}\)…/);
+  assert.match(mapSrc, /dr-open-ext-picker/);
+  // dr-app owns the hit test and opens the host's picker.
+  assert.match(appSrc, /this\.map\.areaAt = /);
+  assert.match(appSrc, /this\.extHost\?\.openPicker\(e\.detail\.anchor\)/);
+});
+
 test("dr-ext-host: dialogs are persistent for panels, transient for removal", () => {
   // Panel contexts own their dialog; closing must not destroy it.
   assert.match(hostSrc, /ctx\.dialog = dlg;/);

package/tests/dr-route.test.js

@@ -0,0 +1,213 @@
+/**
+ * Tests for the active-route layer's pure helpers: resource-href
+ * parsing (Freeboard-SK's discovery pattern — the trailing segment of
+ * `navigation.course.activeRoute.href`), the course→active-route
+ * state reducer, the route-resource → map render-spec shaping
+ * (GeoJSON [lon, lat] → Leaflet [lat, lon], name fallbacks, target
+ * waypoint index), and waypoint labeling from coordinatesMeta.
+ * Loads the browser ESM module directly, like dr-ais.test.js.
+ * @file dr-route.test.js
+ */
+
+const test = require("node:test");
+const assert = require("node:assert/strict");
+
+const vmPromise = import("../public/dr-viewmodel.js");
+
+async function loadVm() {
+  return vmPromise;
+}
+
+const ROUTE_RESOURCE = {
+  name: "Summer cruise",
+  feature: {
+    type: "Feature",
+    geometry: {
+      type: "LineString",
+      coordinates: [
+        [24.9, 60.1],
+        [24.8, 60.2],
+        [24.7, 60.3],
+      ],
+    },
+    properties: {
+      coordinatesMeta: [{ name: "Helsinki" }, { name: "Porkkala" }, {}],
+    },
+  },
+};
+
+test("resourceIdFromHref extracts the trailing segment", async () => {
+  const vm = await loadVm();
+  assert.equal(
+    vm.resourceIdFromHref(
+      "/resources/routes/9d4e6a1c-1111-2222-3333-444455556666",
+    ),
+    "9d4e6a1c-1111-2222-3333-444455556666",
+  );
+  assert.equal(vm.resourceIdFromHref("resources/routes/abc"), "abc");
+  assert.equal(vm.resourceIdFromHref("/resources/waypoints/w1"), "w1");
+});
+
+test("resourceIdFromHref rejects non-hrefs", async () => {
+  const vm = await loadVm();
+  assert.equal(vm.resourceIdFromHref(null), null);
+  assert.equal(vm.resourceIdFromHref(undefined), null);
+  assert.equal(vm.resourceIdFromHref(""), null);
+  assert.equal(vm.resourceIdFromHref(42), null);
+});
+
+test("activeRouteFromCourse parses href and pointIndex", async () => {
+  const vm = await loadVm();
+  const active = vm.activeRouteFromCourse({
+    activeRoute: {
+      href: "/resources/routes/rte-1",
+      pointIndex: 2,
+      reverse: false,
+    },
+  });
+  assert.deepEqual(active, { id: "rte-1", pointIndex: 2 });
+});
+
+test("activeRouteFromCourse tolerates a null pointIndex", async () => {
+  const vm = await loadVm();
+  const active = vm.activeRouteFromCourse({
+    activeRoute: { href: "/resources/routes/rte-1", pointIndex: null },
+  });
+  assert.deepEqual(active, { id: "rte-1", pointIndex: -1 });
+});
+
+test("activeRouteFromCourse unwraps REST {value} nodes", async () => {
+  const vm = await loadVm();
+  const active = vm.activeRouteFromCourse({
+    activeRoute: {
+      href: { value: "/resources/routes/rte-1", $source: "course.provider" },
+      pointIndex: { value: 1 },
+    },
+  });
+  assert.deepEqual(active, { id: "rte-1", pointIndex: 1 });
+});
+
+test("activeRouteFromCourse parses the wire delta object (whole activeRoute as one value)", async () => {
+  const vm = await loadVm();
+  // Verbatim shape observed on the stream: the course provider emits
+  // the whole activeRoute object as one delta value at
+  // `navigation.course.activeRoute`.
+  const active = vm.activeRouteFromCourse({
+    activeRoute: {
+      href: "/resources/routes/7e59b216-d65f-4fca-a215-04e31de2ea1c",
+      name: "Orca route",
+      reverse: false,
+      pointIndex: 0,
+      pointTotal: 14,
+    },
+  });
+  assert.deepEqual(active, {
+    id: "7e59b216-d65f-4fca-a215-04e31de2ea1c",
+    pointIndex: 0,
+  });
+  // A whole-node REST wrap also parses.
+  const wrapped = vm.activeRouteFromCourse({
+    activeRoute: {
+      value: { href: "/resources/routes/rte-1", pointIndex: 2 },
+      $source: "course.provider",
+    },
+  });
+  assert.deepEqual(wrapped, { id: "rte-1", pointIndex: 2 });
+});
+
+test("activeRouteFromCourse returns null without a route", async () => {
+  const vm = await loadVm();
+  assert.equal(vm.activeRouteFromCourse(null), null);
+  assert.equal(vm.activeRouteFromCourse({}), null);
+  assert.equal(
+    vm.activeRouteFromCourse({
+      nextPoint: { position: { latitude: 60, longitude: 25 } },
+    }),
+    null,
+  );
+  // A single-waypoint destination is not a route.
+  assert.equal(
+    vm.activeRouteFromCourse({
+      nextPoint: { href: "/resources/waypoints/w1" },
+    }),
+    null,
+  );
+});
+
+test("routeRenderSpec swaps GeoJSON order to Leaflet [lat, lon]", async () => {
+  const vm = await loadVm();
+  const spec = vm.routeRenderSpec(ROUTE_RESOURCE, "rte-1", 1);
+  assert.deepEqual(spec.points, [
+    [60.1, 24.9],
+    [60.2, 24.8],
+    [60.3, 24.7],
+  ]);
+  assert.equal(spec.name, "Summer cruise");
+  assert.equal(spec.targetIndex, 1);
+});
+
+test("routeRenderSpec falls back to properties.name then short-id label", async () => {
+  const vm = await loadVm();
+  const noName = {
+    feature: {
+      geometry: {
+        coordinates: [
+          [25, 60],
+          [25.1, 60.1],
+        ],
+      },
+      properties: { name: "From properties" },
+    },
+  };
+  assert.equal(vm.routeRenderSpec(noName, "rte-2").name, "From properties");
+  const bare = {
+    feature: {
+      geometry: {
+        coordinates: [
+          [25, 60],
+          [25.1, 60.1],
+        ],
+      },
+    },
+  };
+  assert.equal(vm.routeRenderSpec(bare, "9d4e6a1c").name, "Route 4e6a1c");
+});
+
+test("routeRenderSpec clamps an out-of-range target index", async () => {
+  const vm = await loadVm();
+  assert.equal(vm.routeRenderSpec(ROUTE_RESOURCE, "rte-1", 99).targetIndex, -1);
+  assert.equal(vm.routeRenderSpec(ROUTE_RESOURCE, "rte-1", -5).targetIndex, -1);
+  assert.equal(
+    vm.routeRenderSpec(ROUTE_RESOURCE, "rte-1", null).targetIndex,
+    -1,
+  );
+});
+
+test("routeRenderSpec returns null without usable geometry", async () => {
+  const vm = await loadVm();
+  assert.equal(vm.routeRenderSpec(null, "rte-1"), null);
+  assert.equal(vm.routeRenderSpec({}, "rte-1"), null);
+  assert.equal(
+    vm.routeRenderSpec({ feature: { geometry: { coordinates: [] } } }, "rte-1"),
+    null,
+  );
+  // A single point is a line that isn't there yet.
+  assert.equal(
+    vm.routeRenderSpec(
+      { feature: { geometry: { coordinates: [[25, 60]] } } },
+      "rte-1",
+    ),
+    null,
+  );
+});
+
+test("routeWaypointLabels uses coordinatesMeta names, 1-based WP fallback", async () => {
+  const vm = await loadVm();
+  assert.deepEqual(vm.routeWaypointLabels(ROUTE_RESOURCE, 3), [
+    "Helsinki",
+    "Porkkala",
+    "WP 3",
+  ]);
+  assert.deepEqual(vm.routeWaypointLabels(null, 2), ["WP 1", "WP 2"]);
+  assert.deepEqual(vm.routeWaypointLabels({}, 1), ["WP 1"]);
+});