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

package/CHANGELOG.md

@@ -7,6 +7,20 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meri-imperiumi/signalk-dead-reckoning",
-  "version": "0.12.1",
+  "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

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/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,