@meri-imperiumi/signalk-dead-reckoning 0.12.0 → 0.12.2

package/CHANGELOG.md

@@ -7,6 +7,67 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.12.2] - 2026-09-28
+
+### Fixed
+- **The top-right plotter-extension area now behaves as a top-right
+  anchor.** Two defects made it read as "top left of the GPS status
+  bar": the area rode its column's left edge instead of the GPS
+  panel's right edge (it now shares the panel's right alignment), and
+  the widget grid rendered logical col 0 at the physical left for
+  every anchor — so the first placed widget sat farthest from the
+  viewport corner with the free slots between it and the edge.
+  Right-hand anchors now mirror the column axis: col 0 hugs the
+  right-hand corner and widgets pack corner-inward, symmetric with
+  the top-left area.
+
+## [0.12.1] - 2026-09-28
+
+### Changed
+- **Notes plot by default.** The Notes overlay started detached — the
+  markers were fetched and cached, but the layer only mounted when the
+  layers-control checkbox was flipped, so chart annotations (often
+  navigational warnings, e.g. METAREA gale warnings delivered by
+  signalk-passage-briefing) never showed until manually enabled.
+  Notes now mount with the map like AIS traffic and the active route;
+  the checkbox remains for decluttering, and a previously stored
+  "off" pick is still honored.
+- **Own-ship boat glyphs are bigger and bolder.** The GPS and DR boats
+  grew from 20 to 26 px, the hull fill is near-solid (0.92 opacity, was
+  0.35) under a heavier stroke, and the hull rides on a dark casing
+  outline — the same cartographic trick as the ghost track — so own
+  ship stays legible over light raster charts and chart clutter. The
+  navigator's X inside the DR hull got a matching weight bump.
+
+### Fixed
+- **Notes show their full text.** The note detail surface (and the
+  edit form) read only the v2 notes `body` field — provider-shaped
+  notes (metarea warnings via signalk-passage-briefing) carry their
+  text in `description`, with the title truncated by the source, so
+  they opened with a "…" headline and no text at all. The text now
+  falls back to `description`. Editing such a note seeds the form with
+  the real text, and a save merges the stored resource so provider
+  metadata (properties, synoptic-chart `url`) survives the PUT.
+- **Notes now load for the area being viewed.** The webapp fetched the
+  notes collection exactly once (boot and stream reconnect) with no
+  viewport information; resource-provider backends filter the
+  collection themselves, so the answer could be limited to the
+  provider's default area — zooming out showed no notes at all. The
+  chart now re-fetches notes for the visible area whenever the view
+  moves beyond the already-fetched region: Freeboard-SK's wire format
+  (`GET /signalk/v2/api/resources/notes?position=[lon,lat]&distance=<m>`
+  — view center plus a covering radius to the view corner), debounced,
+  with follow-mode re-centers not re-issuing the request. Scoped
+  responses merge into the notes cache, so notes from previously
+  viewed areas stay on the chart.
+
+### Added
+- **The layers control remembers your choices.** Base chart and
+  overlay toggles (AIS traffic, active route, vectors, range rings,
+  laylines, notes) persist in localStorage (`dr-layers`) and are
+  restored on the next session — remembered picks that still mount
+  outrank the defaults; un-flipped toggles keep their built-in state.
+
 ## [0.12.0] - 2026-09-21
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meri-imperiumi/signalk-dead-reckoning",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "Offline-first dead reckoning and sensor fusion engine for Signal K",
   "main": "plugin/index.js",
   "scripts": {
@@ -27,7 +27,7 @@
   "signalk-plugin-enabled-by-default": false,
   "signalk": {
     "displayName": "Dead Reckoning",
-    "appIcon": "./icon.png",
+    "appIcon": "./icon-256.png",
     "requires": [
       "@meri-imperiumi/signalk-internet"
     ],

package/public/dr-app.js

@@ -256,7 +256,13 @@ template.innerHTML = /* html */ `
       gap: 0.5rem;
       align-items: flex-start;
     }
-    .dr-top-col > .dr-gps {
+    /* The right column is as wide as its widest child (usually the GPS
+       panel), so without this both the panel and the top-right widget
+       area would need explicit right edges: the panel rides the right
+       edge, and the top-right area must follow it — left-aligned it
+       would park under the panel's left half, reading as "top left". */
+    .dr-top-col > .dr-gps,
+    .dr-top-col > dr-ext-widget-area[anchor="top-right"] {
       align-self: flex-end;
     }
     /* Water-track readout: bottom-right panel — figures + the manual
@@ -524,6 +530,12 @@ class DrApp extends HTMLElement {
       openSight();
       this.sight?.seedObjectPosition(lat, lng, mode, label, tMs);
     });
+    // Chart view moved/zoomed: re-fetch notes for the visible area
+    // (work doc #30). Debounced + margin-guarded in fetchNotesInView —
+    // follow-mode re-centers must not turn into a request per GPS fix.
+    this.map?.addEventListener("dr-view-changed", (e) =>
+      this.fetchNotesInView(e.detail),
+    );
     // 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
@@ -771,6 +783,12 @@ class DrApp extends HTMLElement {
      * source of truth is the server's v2 resources API; the cache lets
      * saves update markers without a full refetch. */
     this.notesById = new Map();
+    /** Bounds the last in-view notes fetch covered (fetchNotesInView
+     * margin guard) — null until the first view-driven fetch.
+     * @type {{west: number, south: number, east: number, north: number}|null} */
+    this._notesBoundsFetched = null;
+    /** @type {ReturnType<typeof setTimeout>|null} */
+    this._notesViewTimer = 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} */
@@ -1207,20 +1225,64 @@ class DrApp extends HTMLElement {
    * pattern as the active route. Notes without a position are skipped
    * by the viewmodel shaping (region-only notes don't plot).
    *
+   * With a `view` the request is viewport-scoped — the Freeboard-SK
+   * wire format `?position=[lon,lat]&distance=<meters>`: the view
+   * center plus a covering radius to the view corner. (The Resources
+   * API docs' `distance` alone is vessel-anchored, which can't express
+   * "the area I'm looking at"; `position` re-anchors it to the map
+   * view.) The result MERGES into the cache: a scoped response only
+   * covers the fetched area, replacing the cache would drop notes
+   * outside the current view. Without a view (boot, reconnect) the
+   * response is the whole collection and replaces the cache. View-
+   * scoped fetches matter because resource-provider backends filter
+   * the collection themselves — an area-less query can legitimately
+   * come back limited to the provider's default area.
+   *
+   * @param {{west: number, south: number, east: number,
+   *   north: number}} [view]
    * @returns {Promise<void>}
    */
-  async fetchNotes() {
+  async fetchNotes(view) {
     try {
-      const res = await fetch("/signalk/v2/api/resources/notes");
+      const query = view ? `?${vm.notesViewQuery(view)}` : "";
+      const res = await fetch(`/signalk/v2/api/resources/notes${query}`);
       if (!res.ok) return;
       const collection = await res.json();
-      this.notesById = new Map(Object.entries(collection ?? {}));
+      if (view) {
+        for (const [id, note] of Object.entries(collection ?? {})) {
+          this.notesById.set(id, note);
+        }
+      } else {
+        this.notesById = new Map(Object.entries(collection ?? {}));
+      }
       this.renderNotes();
     } catch {
       /* REST unavailable — retry on the next reconnect */
     }
   }
 
+  /**
+   * Schedules an in-view notes fetch after a chart move/zoom
+   * (dr-view-changed from the map). Debounced, and skipped entirely
+   * while the view stays within the last fetched area plus a 25%
+   * margin — follow-mode re-centers track the boat without re-issuing
+   * the request; panning into unseen water or zooming out re-fetches.
+   *
+   * @param {{west: number, south: number, east: number,
+   *   north: number}} bounds
+   * @returns {void}
+   */
+  fetchNotesInView(bounds) {
+    if (!bounds || !vm.notesRefetchNeeded(bounds, this._notesBoundsFetched)) {
+      return;
+    }
+    clearTimeout(this._notesViewTimer ?? undefined);
+    this._notesViewTimer = setTimeout(() => {
+      this._notesBoundsFetched = bounds;
+      this.fetchNotes(bounds);
+    }, 500);
+  }
+
   /** @returns {void} */
   renderNotes() {
     const collection = Object.fromEntries(this.notesById);
@@ -1238,7 +1300,13 @@ class DrApp extends HTMLElement {
    * @returns {Promise<void>}
    */
   async saveNote(detail) {
-    const { id, resource } = detail;
+    const { id, resource: formResource } = detail;
+    // An edit rides on the stored resource: fields the form doesn't
+    // own (provider metadata — properties, url, description) must
+    // survive the PUT, or editing a provider-shaped note would strip
+    // e.g. its synoptic-chart link.
+    const stored = id ? this.notesById.get(id) : null;
+    const resource = stored ? { ...stored, ...formResource } : formResource;
     try {
       const res = await fetch(
         id

package/public/dr-ext-host-core.js

@@ -151,6 +151,38 @@ export function occupiedCells(placements) {
   return occ;
 }
 
+/**
+ * Do placements in this anchor mirror their column axis? Right-hand
+ * anchors render mirrored: logical col 0 is the viewport corner (the
+ * RIGHT edge), so widgets pack corner-inward — symmetric with left
+ * anchors, where col 0 is the left edge. Without the mirror the first
+ * placed widget lands in the cell farthest from the corner and the
+ * free space sits between it and the edge.
+ *
+ * @param {string} anchor
+ * @returns {boolean}
+ */
+export function isMirroredAnchor(anchor) {
+  return typeof anchor === "string" && anchor.endsWith("-right");
+}
+
+/**
+ * CSS grid column line (1-based, physical left→right) where a
+ * placement's left edge renders for the given anchor. Mirrored
+ * (right-hand) anchors flip the column axis: a placement at logical
+ * column `col` spans lines `GRID_COLS - col - cols + 1 ..
+ * GRID_COLS - col`.
+ *
+ * @param {string} anchor
+ * @param {number} col - 0-based logical column (0 = the anchor corner)
+ * @param {number} cols - placement column span
+ * @returns {number} 1-based CSS grid column line
+ */
+export function gridColLine(anchor, col, cols) {
+  if (isMirroredAnchor(anchor)) return GRID_COLS - col - cols + 1;
+  return col + 1;
+}
+
 /**
  * First position (packing from the grid origin, row-major) where a
  * widget of this size fits without overlapping existing placements.

package/public/dr-ext-host.js

@@ -1032,7 +1032,11 @@ export class DrExtWidgetArea extends AreaBase {
         const size = core.parseSize(p.size) ?? { cols: 1, rows: 1 };
         cell = document.createElement("div");
         cell.className = "cell";
-        cell.style.gridArea = `${p.row + 1} / ${p.col + 1} / span ${size.rows} / span ${size.cols}`;
+        // Column line via core.gridColLine: right-hand anchors mirror
+        // the column axis so col 0 renders at the viewport corner.
+        cell.style.gridArea =
+          `${p.row + 1} / ${core.gridColLine(this.anchor, p.col, size.cols)} ` +
+          `/ span ${size.rows} / span ${size.cols}`;
         this.grid.appendChild(cell);
         this.cells.set(p.instanceId, cell);
       }

package/public/dr-map-view.js

@@ -360,14 +360,19 @@ class DrMapView extends HTMLElement {
       // Wind laylines (work doc #30) — layers-control toggle like the
       // other overlays.
       laylines: null,
-      // Signal K notes (work doc #30) — layers-control toggle.
+      // Signal K notes (work doc #30) — mounted by default: notes are
+      // chart annotations and often navigational warnings (METAREA
+      // gale warnings etc.), so they must not hide behind a toggle.
+      // Still removable through the layers control when decluttering.
       notes: null,
       // Measure tool geometry (work doc #30) — transient, always on.
       measure: null,
     };
     /** Layer keys that mount through the layers control instead of
-     * always-on (work doc #30). */
-    this.toggleableLayers = new Set(["vectors", "rings", "laylines", "notes"]);
+     * always-on (work doc #30). Notes stay always-on by default —
+     * they carry navigational warnings — but remain removable
+     * through the control. */
+    this.toggleableLayers = new Set(["vectors", "rings", "laylines"]);
     this.tileLayers = {};
     this.follow = true;
     /**
@@ -424,11 +429,27 @@ class DrMapView extends HTMLElement {
     this._scaleCtrl = new NauticalScaleControl();
     this._scaleCtrl.addTo(this.map);
     // Range rings re-space with zoom (their spacing derives from the
-    // current scale); the scale bar re-reads it too.
+    // current scale); the scale bar re-reads it too. dr-app listens
+    // for the view change to re-fetch notes for the visible area
+    // (work doc #30): resource-provider backends answer the bare
+    // collection query with a provider-shaped area, so view-scoped
+    // fetches (position + covering radius, Freeboard's wire format)
+    // are the only honest way to cover a zoomed-out view.
     this.map.on("zoomend moveend", () => {
       this._scaleCtrl.update(this.map);
       this.renderRangeRings();
       this.renderLaylines();
+      const b = this.map.getBounds();
+      this.dispatchEvent(
+        new CustomEvent("dr-view-changed", {
+          detail: {
+            west: b.getWest(),
+            south: b.getSouth(),
+            east: b.getEast(),
+            north: b.getNorth(),
+          },
+        }),
+      );
     });
     this.map.on("dragstart", () => {
       this.follow = false;
@@ -582,33 +603,73 @@ class DrMapView extends HTMLElement {
           addBase(c.name, layer);
         }
         // Default: the mirrored/composed vector chart when present, else
-        // the first configured provider (list is name-sorted).
-        const first =
+        // the first configured provider (list is name-sorted). A
+        // remembered base choice (localStorage "dr-layers") outranks
+        // the default when it still mounts.
+        const defaultBase =
           this.tileLayers.__chart_mirror__ ??
           this.tileLayers[charts[0].identifier] ??
           ordered[0];
-        first?.addTo(this.map);
+        const prefs = vm.parseLayerPrefs(this._loadLayerPrefs());
+        const base = this.tileLayers[prefs.base ?? ""] ?? defaultBase;
+        base?.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, and the active Signal K route too (a route
         // crossing the leg being sailed shouldn't be forced on top of
         // the chartwork). Work doc #30 adds the plotter overlays:
         // predictor vectors and range rings (off by default — declutter
-        // first, enable on demand).
+        // first, enable on demand) and notes (on by default — they are
+        // chart annotations, often navigational warnings). Keyed by
+        // layer id so the persisted prefs survive label renames.
+        const overlays = {
+          ais: ["AIS traffic", this.layers.ais],
+          route: ["Active route", this.layers.route],
+          vectors: ["Vectors", this.layers.vectors],
+          rings: ["Range rings", this.layers.rings],
+          laylines: ["Laylines", this.layers.laylines],
+          notes: ["Notes", this.layers.notes],
+        };
+        const controlOverlays = {};
+        for (const [label, layer] of Object.values(overlays)) {
+          controlOverlays[label] = layer;
+        }
         L.control
-          .layers(
-            bases,
-            {
-              "AIS traffic": this.layers.ais,
-              "Active route": this.layers.route,
-              Vectors: this.layers.vectors,
-              "Range rings": this.layers.rings,
-              Laylines: this.layers.laylines,
-              Notes: this.layers.notes,
-            },
-            { collapsed: true, position: "bottomleft" },
-          )
+          .layers(bases, controlOverlays, {
+            collapsed: true,
+            position: "bottomleft",
+          })
           .addTo(this.map);
+        // Restore remembered overlay toggles — only keys the user has
+        // actually flipped are applied; the rest keep their built-in
+        // defaults (AIS/route on, declutter toggles off).
+        for (const [key, [, layer]] of Object.entries(overlays)) {
+          const want = prefs.overlays[key];
+          if (want === undefined) continue;
+          if (want && !this.map.hasLayer(layer)) layer.addTo(this.map);
+          if (!want && this.map.hasLayer(layer)) this.map.removeLayer(layer);
+        }
+        // Remember the user's layer choices (base chart + overlays)
+        // across sessions. Restoring above re-fires these events for the
+        // restored layers, which just re-writes the same values.
+        this.map.on("baselayerchange", (e) => {
+          const key = Object.keys(this.tileLayers).find(
+            (k) => this.tileLayers[k] === e.layer,
+          );
+          if (key) {
+            prefs.base = key;
+            this._saveLayerPrefs(prefs);
+          }
+        });
+        this.map.on("overlayadd overlayremove", (e) => {
+          const key = Object.keys(overlays).find(
+            (k) => overlays[k][1] === e.layer,
+          );
+          if (key) {
+            prefs.overlays[key] = e.type === "overlayadd";
+            this._saveLayerPrefs(prefs);
+          }
+        });
       })
       .catch((e) => {
         // Offline stays tile-less by design, but a chart that fails to
@@ -618,6 +679,36 @@ class DrMapView extends HTMLElement {
       });
   }
 
+  /** localStorage key for the layers-control preferences (base chart
+   * + overlay toggles) — same "dr-*" convention as the sight panel's
+   * timezone and bearing-reference keys. */
+  static get LAYERS_KEY() {
+    return "dr-layers";
+  }
+
+  /**
+   * @returns {string|null} raw stored JSON, null when unavailable
+   */
+  _loadLayerPrefs() {
+    try {
+      return localStorage.getItem(DrMapView.LAYERS_KEY);
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * @param {{base: string|null, overlays: Record<string, boolean>}} prefs
+   * @returns {void}
+   */
+  _saveLayerPrefs(prefs) {
+    try {
+      localStorage.setItem(DrMapView.LAYERS_KEY, JSON.stringify(prefs));
+    } catch {
+      /* storage unavailable — keep the session values */
+    }
+  }
+
   /**
    * Builds the Leaflet layer for a parsed chart: `L.maplibreGL` with a
    * client-built vector style for `.pbf` charts (work doc #20), plain
@@ -871,8 +962,11 @@ class DrMapView extends HTMLElement {
       const body = document.createElement("div");
       body.className = "dr-note-body";
       // renderNoteBody escapes all input before any markup — the body
-      // is other clients' content, synced through the server.
-      body.innerHTML = vm.renderNoteBody(note.body, note.mimeType);
+      // is other clients' content, synced through the server. The text
+      // itself falls back to `description`: provider-shaped notes
+      // (metarea warnings) carry the full text there — the title is
+      // truncated by the source.
+      body.innerHTML = vm.renderNoteBody(vm.noteBodyText(note), note.mimeType);
       info.appendChild(body);
       if (note.timestamp) {
         const when = document.createElement("span");
@@ -1037,11 +1131,23 @@ class DrMapView extends HTMLElement {
         menu.appendChild(btn);
       }
     }
-    // Position the menu at the screen point of the click.
+    // Position the menu at the screen point of the pick — mounted
+    // first (its size isn't known until it's in the DOM), then placed
+    // via the viewmodel: flipped up/left near the container edges and
+    // clamped inside, so picks near the bottom or right stay on screen
+    // instead of opening outside the viewport.
     const point = this.map.latLngToContainerPoint(latlng);
-    menu.style.left = `${point.x}px`;
-    menu.style.top = `${point.y}px`;
     this.mapEl.appendChild(menu);
+    const place = vm.menuPlacement(
+      { x: point.x, y: point.y },
+      { w: menu.offsetWidth, h: menu.offsetHeight },
+      {
+        width: this.mapEl.clientWidth,
+        height: this.mapEl.clientHeight,
+      },
+    );
+    menu.style.left = `${place.left}px`;
+    menu.style.top = `${place.top}px`;
     this._pickMenu = menu;
     // Dismiss on the next map click / pan / zoom.
     const dismiss = () => this.hidePickMenu();
@@ -1651,23 +1757,33 @@ class DrMapView extends HTMLElement {
    * @returns {object} Leaflet divIcon
    */
   _boatIcon(rotationDeg, color, opts = {}) {
-    const size = opts.size ?? 20;
+    const size = opts.size ?? 26;
     const rot =
       rotationDeg != null
         ? `transform:rotate(${Math.round(rotationDeg)}deg);`
         : "";
     // Pointed hull pointing up (north): bow at top, stern at bottom,
-    // slightly rounded bilge — reads as a vessel at 20 px without
+    // slightly rounded bilge — reads as a vessel at 26 px without
     // covering the chart.
+    const hullPath =
+      "M10 1.5 C14 5.5 16 11 16 17 L10 14.2 L4 17 C4 11 6 5.5 10 1.5 Z";
+    // Cartographic casing (same trick as the ghost track): a dark
+    // hull-shaped outline under the colored hull keeps the boat legible
+    // over light raster charts and chart clutter alike.
+    const casing =
+      `<path d="${hullPath}" fill="none" ` +
+      `stroke="${vm.STYLE.track.casingColor}" stroke-width="4.2" ` +
+      `stroke-linejoin="round"/>`;
+    // Near-solid fill and a heavy stroke — own ship must dominate the
+    // marks drawn around it, not whisper from underneath them.
     const hull =
-      `<path d="M10 1.5 C14 5.5 16 11 16 17 L10 14.2 L4 17 " ` +
-      `C4 11 6 5.5 10 1.5 Z" fill="${color}" fill-opacity="0.35" ` +
-      `stroke="${color}" stroke-width="1.4" stroke-linejoin="round"/>`;
-    // The navigator's X — small, centered in the hull, in the marker
-    // white so it reads on the tinted hull over any tileset.
+      `<path d="${hullPath}" fill="${color}" fill-opacity="0.92" ` +
+      `stroke="${color}" stroke-width="2" stroke-linejoin="round"/>`;
+    // The navigator's X — centered in the hull, in the marker white so
+    // it reads on the tinted hull over any tileset.
     const x = opts.x
-      ? `<path d="M7.6 8 L12.4 11.8 M12.4 8 L7.6 11.8" ` +
-        `stroke="${vm.STYLE.drMarker}" stroke-width="1.1" fill="none"/>`
+      ? `<path d="M7.2 7.4 L12.8 12.2 M12.8 7.4 L7.2 12.2" ` +
+        `stroke="${vm.STYLE.drMarker}" stroke-width="1.8" fill="none"/>`
       : "";
     return L.divIcon({
       className: "dr-ais-marker",
@@ -1676,7 +1792,7 @@ class DrMapView extends HTMLElement {
       html:
         `<div class="dr-ais-glyph" style="${rot}">` +
         `<svg width="${size}" height="${size}" viewBox="0 0 20 20" ` +
-        `xmlns="http://www.w3.org/2000/svg">${hull}${x}</svg></div>`,
+        `xmlns="http://www.w3.org/2000/svg">${casing}${hull}${x}</svg></div>`,
     });
   }
 

package/public/dr-note-panel.js

@@ -135,7 +135,10 @@ class DrNotePanel extends HTMLElement {
     this.position = seed.position ?? null;
     this.editId = seed.note?.id ?? null;
     this.titleEl.value = (seed.note ? seed.note.title : "") ?? "";
-    this.bodyEl.value = (seed.note ? seed.note.body : "") ?? "";
+    // The text falls back to `description` — provider-shaped notes
+    // (metarea warnings) carry it there, so editing doesn't start from
+    // an empty form.
+    this.bodyEl.value = seed.note ? vm.noteBodyText(seed.note) : "";
     this.heading.childNodes[0].textContent = this.editId
       ? "Edit note "
       : "New note ";

package/public/dr-viewmodel.js

@@ -2800,6 +2800,137 @@ export function notesRenderSpecs(collection) {
   return specs;
 }
 
+/**
+ * Formats the viewport-scoped notes query the v2 resources API accepts
+ * — the same parameters Freeboard-SK sends (observed on a live server):
+ * `position=[lon,lat]&distance=<meters>`. The position is the view
+ * center in GeoJSON coordinate order (longitude first — Freeboard's
+ * wire format, server- and provider-established), and the distance is
+ * a covering radius from the center to the view corner, so the whole
+ * visible area comes back. Center and corner clamp to the valid
+ * lat/lon range: at low zooms Leaflet reports out-of-range edges and
+ * resource providers filter on raw coordinates.
+ *
+ * @param {{west: number, south: number, east: number, north: number}} bounds
+ * @returns {string} e.g. "position=[-175.15,-21.15]&distance=37985"
+ */
+export function notesViewQuery(bounds) {
+  const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+  const lat = clamp((Number(bounds.north) + Number(bounds.south)) / 2, -90, 90);
+  const lon = clamp((Number(bounds.east) + Number(bounds.west)) / 2, -180, 180);
+  const cornerLat = clamp(Number(bounds.north), -90, 90);
+  const cornerLon = clamp(Number(bounds.west), -180, 180);
+  const radiusM = Math.max(
+    1,
+    Math.ceil(distanceNm([cornerLat, cornerLon], [lat, lon]) * 1852),
+  );
+  return `position=[${lon},${lat}]&distance=${radiusM}`;
+}
+
+/**
+ * Whether a moved chart view needs a fresh in-view notes fetch: yes
+ * when nothing has been fetched yet, or the view now reaches beyond
+ * the last fetched area with a 25% margin (panned into unseen water,
+ * or zoomed out past it). Follow-mode re-centers land inside the
+ * margin, so tracking the boat doesn't re-issue the request.
+ *
+ * @param {{west: number, south: number, east: number, north: number}} bounds
+ * @param {{west: number, south: number, east: number, north: number}|null} last
+ *   bounds the last fetch covered
+ * @returns {boolean}
+ */
+export function notesRefetchNeeded(bounds, last) {
+  if (!last) return true;
+  const latPad = (last.north - last.south) * 0.25;
+  const lonPad = (last.east - last.west) * 0.25;
+  return (
+    bounds.west < last.west - lonPad ||
+    bounds.east > last.east + lonPad ||
+    bounds.south < last.south - latPad ||
+    bounds.north > last.north + latPad
+  );
+}
+
+/**
+ * Parses the persisted layers-control preference (localStorage JSON):
+ * a base-layer key plus per-overlay enabled booleans. Storage data is
+ * not gospel — malformed or wrongly-typed entries are dropped, so the
+ * caller can fall back to the built-in defaults per key.
+ *
+ * @param {string|null} raw
+ * @returns {{base: string|null, overlays: Record<string, boolean>}}
+ */
+export function parseLayerPrefs(raw) {
+  const prefs = { base: null, overlays: {} };
+  if (!raw) return prefs;
+  let data = null;
+  try {
+    data = JSON.parse(raw);
+  } catch {
+    return prefs;
+  }
+  if (!data || typeof data !== "object") return prefs;
+  if (typeof data.base === "string" && data.base) prefs.base = data.base;
+  if (data.overlays && typeof data.overlays === "object") {
+    for (const [key, value] of Object.entries(data.overlays)) {
+      if (typeof value === "boolean") prefs.overlays[key] = value;
+    }
+  }
+  return prefs;
+}
+
+/**
+ * Placement for a floating context menu anchored at a screen point:
+ * opens down-right of the anchor, flips up / left near the container
+ * edges, and clamps inside with a kept-clear margin — a pick near the
+ * bottom of the screen must not open the menu outside the viewport.
+ * A menu bigger than the container pins to the margin.
+ *
+ * @param {{x: number, y: number}} point - anchor in container px
+ * @param {{w: number, h: number}} size - menu size in px
+ * @param {{width: number, height: number}} bounds - container size in px
+ * @param {number} [margin=8] - gap kept clear at the container edges
+ * @returns {{left: number, top: number}} menu position in container px
+ */
+export function menuPlacement(point, size, bounds, margin = 8) {
+  let left = point.x;
+  let top = point.y;
+  // Flip up near the bottom edge (the common miss: picks low on the
+  // chart), left near the right edge.
+  if (point.y + size.h + margin > bounds.height) {
+    top = point.y - size.h - margin;
+  }
+  if (point.x + size.w + margin > bounds.width) {
+    left = point.x - size.w - margin;
+  }
+  // Clamp inside — covers anchors near the top/left and menus taller
+  // or wider than the flip space.
+  const maxTop = Math.max(margin, bounds.height - size.h - margin);
+  const maxLeft = Math.max(margin, bounds.width - size.w - margin);
+  return {
+    left: Math.min(Math.max(left, margin), maxLeft),
+    top: Math.min(Math.max(top, margin), maxTop),
+  };
+}
+
+/**
+ * The displayable text of a note resource: the v2 notes `body` when
+ * present, else the `description` field — provider-shaped notes
+ * (metarea warnings via signalk-passage-briefing, Freeboard-SK's
+ * resource shape) carry their text there, with the title truncated by
+ * the source. Empty string when neither exists.
+ *
+ * @param {object|null|undefined} note
+ * @returns {string}
+ */
+export function noteBodyText(note) {
+  if (typeof note?.body === "string" && note.body) return note.body;
+  if (typeof note?.description === "string" && note.description) {
+    return note.description;
+  }
+  return "";
+}
+
 /**
  * Builds the resource body for POST/PUT to `/resources/notes` from the
  * creation/edit form (work doc #30): title, body, mimeType and the

package/tests/dr-app-layout.test.js

@@ -224,7 +224,7 @@ test("dr-map-view: Leaflet controls relocated to the bottom-left stack", () => {
   assert.match(mapSrc, /L\.control\.zoom\(\{ position: "bottomleft" \}\)/);
   assert.match(
     mapSrc,
-    /\{ collapsed: true, position: "bottomleft" \}/,
+    /collapsed: true,\s*\n\s*position: "bottomleft"/,
     "layers control bottom-left",
   );
   // The control container must clear the (non-Leaflet) re-center

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

@@ -101,6 +101,23 @@ test("firstFreeSlot: packs row-major, skips overlaps", () => {
   assert.equal(core.firstFreeSlot(full, "1x1"), null);
 });
 
+test("gridColLine: right-hand anchors mirror the column axis", () => {
+  // Left anchor: col 0 is the leftmost CSS column (the corner).
+  assert.equal(core.isMirroredAnchor("top-left"), false);
+  assert.equal(core.gridColLine("top-left", 0, 1), 1);
+  assert.equal(core.gridColLine("top-left", 1, 1), 2);
+  // Right anchor: col 0 is the RIGHTMOST CSS column (the corner), so
+  // the first placed widget hugs the viewport edge and free space
+  // extends inward.
+  assert.equal(core.isMirroredAnchor("top-right"), true);
+  assert.equal(core.gridColLine("top-right", 0, 1), 2);
+  assert.equal(core.gridColLine("top-right", 1, 1), 1);
+  // Full-width spans cover both columns either way; a 1x2 in the
+  // corner column stays on the right edge for both rows.
+  assert.equal(core.gridColLine("top-right", 0, 2), 1);
+  assert.equal(core.gridColLine("top-right", 0, 1), core.GRID_COLS);
+});
+
 test("layoutFromJSON: validates shape, ignores unknown anchors", () => {
   const good = core.layoutFromJSON({
     version: 1,

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

@@ -353,6 +353,16 @@ test("dr-app: widget areas sit below the app's own top panels", () => {
   );
   assert.ok(colRight, "top-right area follows the GPS panel in its column");
   assert.match(appSrc, /\.dr-top-col \{[^}]*flex-direction: column/s);
+  assert.match(
+    appSrc,
+    /\.dr-top-col > \.dr-gps,\s*\.dr-top-col > dr-ext-widget-area\[anchor="top-right"\]\s*\{\s*align-self: flex-end;/s,
+    "top-right area right-aligns with the GPS panel in its column",
+  );
+  assert.match(
+    hostSrc,
+    /core\.gridColLine\(this\.anchor, p\.col, size\.cols\)/,
+    "cell columns route through the anchor-aware mirroring helper",
+  );
   assert.match(
     appSrc,
     /new PlotterExtHost\(\{\s*stream: window\.drSignalkStream,\s*mount: root,/s,

package/tests/dr-notes.test.js

@@ -57,6 +57,28 @@ test("notesRenderSpecs: positioned notes shape, position-less skipped", async ()
   assert.equal(untitled[0].title, "Note");
 });
 
+test("noteBodyText: body preferred, description fallback (provider notes)", async () => {
+  const vm = await loadVm();
+  assert.equal(
+    vm.noteBodyText({ body: "v2 body", description: "desc" }),
+    "v2 body",
+  );
+  // Metarea/passage-briefing shape: text in description, title
+  // truncated by the source.
+  assert.equal(
+    vm.noteBodyText({
+      title: "IN THE AREA SOUTH OF 10S AND WEST OF 165W,…",
+      description:
+        "IN THE AREA SOUTH OF 10S AND WEST OF 165W, EXPECT SOUTHEAST WINDS 20\nTO 30 KNOTS.",
+    }),
+    "IN THE AREA SOUTH OF 10S AND WEST OF 165W, EXPECT SOUTHEAST WINDS 20\nTO 30 KNOTS.",
+  );
+  assert.equal(vm.noteBodyText({ title: "only" }), "");
+  assert.equal(vm.noteBodyText(null), "");
+  // Non-string junk is ignored, not stringified.
+  assert.equal(vm.noteBodyText({ body: 5, description: {} }), "");
+});
+
 test("noteResourceFromForm: trims title, defaults, position object", async () => {
   const vm = await loadVm();
   const r = vm.noteResourceFromForm({
@@ -117,13 +139,116 @@ test("renderNoteBody: markdown gets minimal structure, still escaped", async ()
   );
 });
 
+test("parseLayerPrefs: malformed storage data falls back per key", async () => {
+  const vm = await loadVm();
+  assert.deepEqual(vm.parseLayerPrefs(null), { base: null, overlays: {} });
+  assert.deepEqual(vm.parseLayerPrefs(""), { base: null, overlays: {} });
+  assert.deepEqual(vm.parseLayerPrefs("not json"), {
+    base: null,
+    overlays: {},
+  });
+  assert.deepEqual(vm.parseLayerPrefs("42"), { base: null, overlays: {} });
+  // Wrong-typed entries dropped individually, valid ones kept.
+  assert.deepEqual(
+    vm.parseLayerPrefs(
+      JSON.stringify({
+        base: "__chart_mirror__",
+        overlays: { notes: true, ais: "yes", rings: 1, vectors: false },
+      }),
+    ),
+    { base: "__chart_mirror__", overlays: { notes: true, vectors: false } },
+  );
+  assert.deepEqual(vm.parseLayerPrefs(JSON.stringify({ base: 7 })), {
+    base: null,
+    overlays: {},
+  });
+});
+
+test("layer prefs: remembered base + overlay toggles across sessions", () => {
+  // Storage key follows the dr-* convention; reads and writes are
+  // guarded (localStorage can throw in private modes).
+  assert.match(mapSrc, /LAYERS_KEY\(\) \{[\s\S]*?return "dr-layers";/);
+  assert.match(mapSrc, /_loadLayerPrefs\(\) \{/);
+  assert.match(mapSrc, /_saveLayerPrefs\(prefs\) \{/);
+  // Restore: parsed prefs select the base (only when still mounted)
+  // and apply per-overlay toggles without disturbing un-flipped keys.
+  assert.match(mapSrc, /vm\.parseLayerPrefs\(this\._loadLayerPrefs\(\)\)/);
+  assert.match(
+    mapSrc,
+    /this\.tileLayers\[prefs\.base \?\? ""\] \?\? defaultBase/,
+  );
+  assert.match(mapSrc, /prefs\.overlays\[key\];/);
+  assert.match(mapSrc, /if \(want === undefined\) continue;/);
+  // Persist on the layers-control's own events — base picks and
+  // overlay add/remove both land in storage.
+  assert.match(mapSrc, /this\.map\.on\("baselayerchange"/);
+  assert.match(mapSrc, /this\.map\.on\("overlayadd overlayremove"/);
+  assert.match(mapSrc, /this\._saveLayerPrefs\(prefs\)/);
+});
+
+test("notesViewQuery: Freeboard wire format position=[lon,lat]&distance=m", async () => {
+  const vm = await loadVm();
+  // A Tonga-area view: position is the view center in [lon, lat]
+  // (GeoJSON) order, distance a whole-meter covering radius from the
+  // center to the view corner — the request Freeboard-SK sends.
+  const view = { west: -175.4, south: -21.4, east: -174.9, north: -20.9 };
+  const expectedM = Math.ceil(
+    vm.distanceNm([-20.9, -175.4], [-21.15, -175.15]) * 1852,
+  );
+  assert.equal(
+    vm.notesViewQuery(view),
+    `position=[-175.15,-21.15]&distance=${expectedM}`,
+  );
+  // Low-zoom Leaflet views report out-of-range edges; center and
+  // corner clamp so the query stays in the valid lat/lon range.
+  const wideM = Math.ceil(vm.distanceNm([-90, -180], [0, 0]) * 1852);
+  assert.equal(
+    vm.notesViewQuery({ west: -260, south: -95, east: 260, north: 95 }),
+    `position=[0,0]&distance=${wideM}`,
+  );
+});
+
+test("notesRefetchNeeded: first fetch, margin containment, pan/zoom out", async () => {
+  const vm = await loadVm();
+  const view = { west: 24, south: 60, east: 25, north: 60.5 };
+  assert.equal(vm.notesRefetchNeeded(view, null), true, "nothing fetched yet");
+  // Inside the fetched area (or its 25% margin) — no refetch.
+  assert.equal(vm.notesRefetchNeeded(view, view), false);
+  assert.equal(
+    vm.notesRefetchNeeded(
+      { west: 24.2, south: 60.5 - 0.125 - 0.01, east: 24.8, north: 60.5 },
+      view,
+    ),
+    false,
+    "slight pan stays within the margin",
+  );
+  // Panning into unseen water, or zooming out past the fetched area.
+  assert.equal(
+    vm.notesRefetchNeeded({ ...view, east: 25.5 }, view),
+    true,
+    "pan past the margin",
+  );
+  assert.equal(
+    vm.notesRefetchNeeded({ west: 10, south: 59, east: 40, north: 62 }, view),
+    true,
+    "zoomed-out view exceeds the fetched area",
+  );
+});
+
 test("notes wiring: v2 resources API, layers-control toggle, pick menu integration", () => {
-  // Layer toggle.
-  assert.match(mapSrc, /Notes: this\.layers\.notes/);
-  assert.match(mapSrc, /"notes"/);
+  // Layer wiring: notes has a layers-control entry, but mounts by
+  // default (not in the start-detached toggleableLayers set) —
+  // navigational warnings must not hide behind a toggle.
+  assert.match(mapSrc, /notes: \["Notes", this\.layers\.notes\]/);
+  assert.match(
+    mapSrc,
+    /toggleableLayers = new Set\(\["vectors", "rings", "laylines"\]\)/,
+  );
   // Markers + detail surface.
   assert.match(mapSrc, /renderNotes\(specs, resourcesById\) \{/);
   assert.match(mapSrc, /_noteIcon\(\)/);
+  // Full note text: the surface shapes body → description fallback.
+  assert.match(mapSrc, /renderNoteBody\(vm\.noteBodyText\(note\)/);
   assert.match(mapSrc, /vm\.renderNoteBody\(/);
   assert.match(mapSrc, /"dr-note-new"/);
   assert.match(mapSrc, /"dr-note-edit"/);
@@ -136,9 +261,25 @@ test("notes wiring: v2 resources API, layers-control toggle, pick menu integrati
     appSrc,
     /renderLinkStatus\(status\) \{[\s\S]*this\.fetchNotes\(\);/,
   );
+  // Viewport-aware fetching: the map reports view changes, dr-app
+  // re-fetches the visible area with Freeboard's position+distance
+  // query and merges the result into the cache (providers answer the
+  // bare collection query with a provider-shaped area — wider views
+  // must fetch for themselves).
+  assert.match(mapSrc, /dr-view-changed/);
+  assert.match(mapSrc, /getBounds\(\)/);
+  assert.match(appSrc, /addEventListener\("dr-view-changed"/);
+  assert.match(appSrc, /notesViewQuery\(/);
+  assert.match(appSrc, /notesRefetchNeeded\(/);
+  assert.match(appSrc, /this\.notesById\.set\(id, note\)/);
   // Panel: quick hazard preset, error surfacing, save dispatch.
   assert.match(panelSrc, /dr-note-hazard/);
   assert.match(panelSrc, /showError\(message\)/);
   assert.match(panelSrc, /vm\.noteResourceFromForm\(/);
   assert.match(panelSrc, /No position/);
+  // Edit form seeds from the shaped text (description fallback) and
+  // dr-app's save merges the stored resource so provider metadata
+  // (properties, url, description) survives the PUT.
+  assert.match(panelSrc, /vm\.noteBodyText\(seed\.note\)/);
+  assert.match(appSrc, /\{ \.\.\.stored, \.\.\.formResource \}/);
 });

package/tests/dr-plotter-map.test.js

@@ -63,18 +63,37 @@ test("predictor vectors: separate layer, both references, tick marks", () => {
 });
 
 test("layers control: vectors and range rings are toggleable overlays", () => {
-  const controlStart = mapSrc.indexOf(".layers(");
+  const controlStart = mapSrc.indexOf("const overlays = {");
   const control = mapSrc.slice(
     controlStart,
-    mapSrc.indexOf(".addTo(this.map);", controlStart),
+    mapSrc.indexOf(".addTo(this.map);", mapSrc.indexOf(".layers(")),
   );
-  assert.match(control, /Vectors: this\.layers\.vectors/);
-  assert.match(control, /"Range rings": this\.layers\.rings/);
+  assert.match(control, /vectors: \["Vectors", this\.layers\.vectors\]/);
+  assert.match(control, /rings: \["Range rings", this\.layers\.rings\]/);
   // Toggleable layers start detached (unchecked) — not in the
   // always-on addTo loop.
   assert.match(mapSrc, /toggleableLayers\.has\(key\)/);
 });
 
+test("notes: plot by default, removable through the layers control", () => {
+  // Notes are chart annotations and often navigational warnings —
+  // they must not hide behind a toggle. The layer mounts with the
+  // always-on group (not listed in toggleableLayers) while keeping
+  // its layers-control checkbox, so decluttering still works and a
+  // persisted "off" pick removes it.
+  assert.match(
+    mapSrc,
+    /toggleableLayers = new Set\(\["vectors", "rings", "laylines"\]\)/,
+    "notes not a start-detached toggle",
+  );
+  const controlStart = mapSrc.indexOf("const overlays = {");
+  const control = mapSrc.slice(
+    controlStart,
+    mapSrc.indexOf(".addTo(this.map);", mapSrc.indexOf(".layers(")),
+  );
+  assert.match(control, /notes: \["Notes", this\.layers\.notes\]/);
+});
+
 test("nautical scale bar: custom control, ladder from the view-model", () => {
   assert.match(mapSrc, /class NauticalScaleControl extends L\.Control/);
   assert.match(mapSrc, /vm\.scaleBarSpec\(/);
@@ -136,10 +155,11 @@ test("measure tool: pick-menu start, click legs, Esc/dblclick/right-click end",
 
 test("laylines: toggleable layer, DR origin, sailing-gated, zoom-relative", () => {
   const control = mapSrc.slice(
-    mapSrc.indexOf(".layers("),
+    mapSrc.indexOf("const overlays = {"),
     mapSrc.indexOf(".addTo(this.map);", mapSrc.indexOf(".layers(")),
   );
-  assert.match(control, /Laylines: this\.layers\.laylines/);
+  assert.match(control, /laylines: \["Laylines", this\.layers\.laylines\]/);
+  assert.match(control, /L\.control\s*\n?\s*\.layers\(bases, controlOverlays/);
   assert.match(mapSrc, /"laylines"/, "toggleable registration");
   const render = mapSrc.slice(
     mapSrc.indexOf("renderLaylines(snap) {"),
@@ -155,7 +175,7 @@ test("laylines: toggleable layer, DR origin, sailing-gated, zoom-relative", () =
   assert.match(render, /metersPerPixel\(/);
   assert.match(
     mapSrc,
-    /this\.renderLaylines\(\);\s*\n\s*\}\);/,
+    /zoomend moveend", \(\) => \{[\s\S]*?this\.renderLaylines\(\);/,
     "zoomend re-render",
   );
   // Tack colors follow the navigation-light convention.

package/tests/dr-viewmodel.test.js

@@ -939,3 +939,66 @@ test("relativeTimeText: watchkeeper-granularity ages", async () => {
     "3d ago",
   );
 });
+
+test("menuPlacement: opens down-right, flips up at the bottom edge", async () => {
+  const vm = await loadVm();
+  // Room below: menu opens at the anchor, down-right.
+  assert.deepEqual(
+    vm.menuPlacement(
+      { x: 400, y: 300 },
+      { w: 200, h: 150 },
+      { width: 1000, height: 800 },
+    ),
+    { left: 400, top: 300 },
+  );
+  // The reported miss: pick near the bottom — the menu flips above the
+  // anchor with the kept-clear margin instead of leaving the viewport.
+  assert.deepEqual(
+    vm.menuPlacement(
+      { x: 400, y: 700 },
+      { w: 200, h: 150 },
+      { width: 1000, height: 800 },
+    ),
+    { left: 400, top: 542 },
+  );
+});
+
+test("menuPlacement: flips left at the right edge, clamps top/left", async () => {
+  const vm = await loadVm();
+  // Near the right edge: opens to the left of the anchor.
+  assert.deepEqual(
+    vm.menuPlacement(
+      { x: 900, y: 300 },
+      { w: 200, h: 150 },
+      { width: 1000, height: 800 },
+    ),
+    { left: 692, top: 300 },
+  );
+  // Bottom-right corner: flips both ways.
+  assert.deepEqual(
+    vm.menuPlacement(
+      { x: 950, y: 750 },
+      { w: 200, h: 150 },
+      { width: 1000, height: 800 },
+    ),
+    { left: 742, top: 592 },
+  );
+  // Anchor near the top/left: clamped to the margin, never negative.
+  assert.deepEqual(
+    vm.menuPlacement(
+      { x: 2, y: 3 },
+      { w: 200, h: 150 },
+      { width: 1000, height: 800 },
+    ),
+    { left: 8, top: 8 },
+  );
+  // A menu taller/wider than the container pins to the margin.
+  assert.deepEqual(
+    vm.menuPlacement(
+      { x: 500, y: 400 },
+      { w: 1200, h: 2000 },
+      { width: 1000, height: 800 },
+    ),
+    { left: 8, top: 8 },
+  );
+});