From 99e29bde04d6ad0c28acf40a9b06d3577470e9d1 Mon Sep 17 00:00:00 2001
From: Marco <marco@supino.org>
Date: Tue, 26 May 2026 19:25:40 +0000
Subject: [PATCH 01/12] feat: flight-plan placement picker (replaces
 pin-to-map)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the entire pin-button + drag/resize flow with a single
6-button row inside the Export PNG modal:

  Flight plan placement:  [ None ] [↖ TL] [↗ TR] [↙ BL] [↘ BR] [Custom…]

- None  → no plan drawn on export
- TL/TR/BL/BR → wireframe placeholder snaps to that corner of the
  current page frame (A3/A4) or the viewport when no frame is set
- Custom → centred placeholder, fully draggable and resizable
- Selected option highlights yellow; user can re-pick freely without
  leaving the export dialog

Replaces all of:
- the .modal-pin button + planPinned state + PLANPIN_KEY
- pin-modal drag handlers
- four-corner resize handles on the flight-plan modal
- font auto-shrink + ResizeObserver hooks
- navaid.planPin / planW / planH localStorage (auto-cleared on open
  so old installs migrate silently)
- modal.pinned CSS (replaced with plan-placeholder rules)

Canvas drawFlightPlanTable always uses S.fpHeadersShort now — no
DOM-class check for pinned, no headers branch.

Test set updated: pin tests dropped; new tests cover pin-button gone,
stale-storage cleanup, corner placement creates a placeholder, None
removes it, Export with a placement still downloads a PNG.

Co-Authored-By: Claude Sonnet 4.7 <noreply@anthropic.com>
---
 docs/core.js                     |  18 +-
 docs/he/strings.js               |  17 +-
 docs/index.html                  |   4 +-
 docs/io.js                       | 468 +++++++++++++++++++++++++++++--
 docs/style.css                   | 248 ++++++++++++++--
 tests/export-png-options.spec.js |  62 ++++
 tests/flight-plan.spec.js        | 138 ++-------
 tests/fuel-flight-plan.spec.js   |  40 +--
 tests/orient-pageexport.spec.js  |   4 +-
 9 files changed, 802 insertions(+), 197 deletions(-)

diff --git a/docs/core.js b/docs/core.js
index 19f45e3a..e18eaa81 100644
--- a/docs/core.js
+++ b/docs/core.js
@@ -83,12 +83,14 @@ window.S = Object.assign({
   },
   errNoLegs: 'No legs yet — drop at least two waypoints first.',
   flightPlan: 'Flight plan',
-  fpHeaders: ['#', 'From', 'To', 'Hdg', 'Dist (NM)', 'Speed (kt)', 'Alt (ft)', 'Time', 'Fuel (gal)', ''],
-  fpDel: '✕',
+  fpHeaders: ['#', 'From', 'To', 'Hdg', 'Dist (NM)', 'Speed (kt)', 'Alt (ft)', 'Time', 'Fuel (gal)'],
+  fpHeadersShort: ['#', 'From', 'To', 'Hdg', 'Dist', 'Spd', 'Alt', 'Time', 'Fuel'],
   fpReturn: 'Return route',
   fpTotal: 'Total',
   fpClose: 'Close',
   fpPrint: 'Print',
+  fpPin: 'Pin',
+  fpUnpin: 'Unpin',
   fpFuel: 'Fuel',
   tbAircraft: 'Aircraft',
   tbGph: 'Gallons per Hour',
@@ -211,7 +213,6 @@ window.S = Object.assign({
   tbSecExport: '📤 Export/Import',
   tbViewSource: 'GitHub',
   tbWiki: 'Wiki',
-  tbIssues: 'Issues / Requests',
   exportModalTitle: 'Export PNG',
   exportShowNavWP: 'Print Navigation Waypoints',
   exportShowAirfields: 'Print Airfields',
@@ -220,6 +221,17 @@ window.S = Object.assign({
   exportNoPageWarn: 'No page size selected — exported image ratio may not match a print page.',
   exportLayer: 'Layer',
   exportBtn: 'Export',
+  addPlanToMap: 'Add plan to map',
+  addPlanToMapTitle: 'Drop a draggable, resizable placeholder on the map; the flight plan table will be drawn into it on export.',
+  removePlanFromMap: 'Remove plan placeholder',
+  planPlaceholderLabel: 'PLAN',
+  planPlacementLabel: 'Flight plan on print:',
+  planPlacementNone: 'None',
+  planPlacementTL: '↖ TL',
+  planPlacementTR: '↗ TR',
+  planPlacementBL: '↙ BL',
+  planPlacementBR: '↘ BR',
+  planPlacementCustom: 'Custom…',
 }, window.S || {});
 
 // Fill data-i18n / data-i18n-title / data-i18n-placeholder / data-i18n-aria
diff --git a/docs/he/strings.js b/docs/he/strings.js
index 6fe6e28b..e03481d8 100644
--- a/docs/he/strings.js
+++ b/docs/he/strings.js
@@ -45,12 +45,13 @@ window.S = {
   },
   errNoLegs: 'אין קטעים עדיין — הוסף לפחות שני ציוני דרך תחילה.',
   flightPlan: 'תכנית טיסה',
-  fpHeaders: ['#', 'מ-', 'אל-', 'כיוון', 'מרחק (NM)', 'מהירות (קשר)', 'גובה (ft)', 'זמן', 'דלק (גאל)', ''],
-  fpDel: '✕',
+  fpHeaders: ['#', 'מ-', 'אל-', 'כיוון', 'מרחק (NM)', 'מהירות (קשר)', 'גובה (ft)', 'זמן', 'דלק (גאל)'],
   fpTotal: 'סה"כ',
   fpReturn: 'מסלול חזרה',
   fpClose: 'סגור',
   fpPrint: 'הדפס',
+  fpPin: 'נעץ',
+  fpUnpin: 'שחרר',
   fpFuel: 'דלק',
   tbAircraft: 'כלי טיס',
   tbGph: 'גלונים לשעה',
@@ -173,7 +174,6 @@ window.S = {
   tbSecExport: '📤 ייצוא/ייבוא',
   tbViewSource: 'GitHub',
   tbWiki: 'Wiki',
-  tbIssues: 'בעיות / הצעות',
   exportShowDrift: 'הדפס קווי סחיפה',
   exportModalTitle: 'ייצוא PNG',
   exportShowNavWP: 'הדפס ציוני ניווט',
@@ -182,4 +182,15 @@ window.S = {
   exportNoPageWarn: 'לא נבחר גודל דף — יחס התמונה המיוצאת עשוי שלא להתאים להדפסה.',
   exportLayer: 'שכבת מפה',
   exportBtn: 'ייצא',
+  addPlanToMap: 'הוסף מסלול למפה',
+  addPlanToMapTitle: 'מיקום מציין-מקום הניתן לגרירה ולשינוי גודל על המפה; טבלת תכנית הטיסה תצויר לתוכו בייצוא.',
+  removePlanFromMap: 'הסר את מציין-המקום',
+  planPlaceholderLabel: 'מסלול',
+  planPlacementLabel: 'מיקום תכנית הטיסה בהדפסה:',
+  planPlacementNone: 'ללא',
+  planPlacementTL: '↖ ש"ע',
+  planPlacementTR: '↗ י"ע',
+  planPlacementBL: '↙ ש"ת',
+  planPlacementBR: '↘ י"ת',
+  planPlacementCustom: 'מותאם…',
 };
diff --git a/docs/index.html b/docs/index.html
index 75830649..769ab641 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -77,7 +77,7 @@
     gtag('config', 'G-0XM5PHEK8B');
   </script>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
-  <link rel="stylesheet" href="style.css?v=145">
+  <link rel="stylesheet" href="style.css?v=148">
 </head>
 <body>
   <div id="map"></div>
@@ -288,7 +288,7 @@
        hack for strings.js. Silences CodeQL js/eval-like-call (#12). -->
   <script>
     (function () {
-      var v = '?v=145';
+      var v = '?v=148';
       var srcs = [
         'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',
         'https://unpkg.com/leaflet-rotate@0.2.8/dist/leaflet-rotate.js',
diff --git a/docs/io.js b/docs/io.js
index 7c20d53b..21b781a9 100644
--- a/docs/io.js
+++ b/docs/io.js
@@ -520,14 +520,22 @@ function showFlightPlan() {
   const headers = S.fpHeaders;
   const thead = document.createElement('thead');
   const trH = document.createElement('tr');
+  const fpThCells = [];
   for (const h of headers) {
     const th = document.createElement('th');
     th.textContent = h;
     trH.appendChild(th);
+    fpThCells.push(th);
   }
   thead.appendChild(trH);
   table.appendChild(thead);
 
+  function swapHeaders(pinned) {
+    var hdrs = pinned ? S.fpHeadersShort : S.fpHeaders;
+    for (let i = 0; i < fpThCells.length; i++) fpThCells[i].textContent = hdrs[i];
+    for (let i = 0; i < rfpThCells.length; i++) rfpThCells[i].textContent = hdrs[i];
+  }
+
   const tbody = document.createElement('tbody');
   // From / To cells are editable — each waypoint may appear in two rows,
   // so edits sync every input bound to the same waypoint.
@@ -616,29 +624,6 @@ function showFlightPlan() {
     const fuelCell = planCell('');
     fuelCells[i] = fuelCell;
     tr.appendChild(fuelCell);
-    // Delete-leg button — removes the "To" waypoint and this leg, then
-    // reconnects the route. The refreshFlightPlan callback detects the
-    // leg-count change and rebuilds the modal.
-    (function (idx) {
-      const delTd = document.createElement('td');
-      delTd.className = 'fp-del';
-      const delBtn = document.createElement('button');
-      delBtn.type = 'button';
-      delBtn.textContent = S.fpDel || '✕';
-      delBtn.title = S.fpDelTitle || 'Delete leg';
-      delBtn.onclick = function () {
-        if (state.waypoints.length < 2) return;
-        state.waypoints.splice(idx + 1, 1);
-        state.legs.splice(idx, 1);
-        syncLegs();
-        state.selected = null;
-        showInspector();
-        draw();
-        if (refreshFlightPlan) refreshFlightPlan();
-      };
-      delTd.appendChild(delBtn);
-      tr.appendChild(delTd);
-    })(i);
     tbody.appendChild(tr);
   }
   table.appendChild(tbody);
@@ -657,7 +642,6 @@ function showFlightPlan() {
   trF.appendChild(totTimeCell);
   totFuelCell = planCell('');
   trF.appendChild(totFuelCell);
-  trF.appendChild(planCell(''));        // Delete column (empty)
   tfoot.appendChild(trF);
   table.appendChild(tfoot);
 
@@ -708,6 +692,7 @@ function showFlightPlan() {
 
   // --- return-route table (when showReturn is on) --------------------
   let retRefresh = null;
+  var rfpThCells = [];
   if (window.showReturn) {
     const sub = document.createElement('div');
     sub.className = 'flight-plan-sub';
@@ -722,6 +707,7 @@ function showFlightPlan() {
       const th = document.createElement('th');
       th.textContent = h;
       rtrH.appendChild(th);
+      rfpThCells.push(th);
     }
     rthead.appendChild(rtrH);
     rtable.appendChild(rthead);
@@ -800,7 +786,6 @@ function showFlightPlan() {
     rtrF.appendChild(rTotTimeCell);
     rTotFuelCell = planCell('');
     rtrF.appendChild(rTotFuelCell);
-    rtrF.appendChild(planCell(''));        // Delete column (empty)
     rtfoot.appendChild(rtrF);
     rtable.appendChild(rtfoot);
 
@@ -862,6 +847,16 @@ function showFlightPlan() {
   box.appendChild(btns);
   addModalCloseX(box, closeFlightPlan);
 
+  // Pin-to-map UX retired (PR #338). Plan placement is now chosen from
+  // the Export PNG modal's 'Flight plan placement' row. The flight-plan
+  // modal stays a plain editor with no pin / drag / resize hooks.
+  // Clean stale localStorage from older pin-mode versions.
+  try {
+    localStorage.removeItem('navaid.planPin');
+    localStorage.removeItem('navaid.planW');
+    localStorage.removeItem('navaid.planH');
+  } catch (e) { /* storage unavailable */ }
+
   back.appendChild(box);
   // Close via the Close button or Escape (#86).
   document.body.appendChild(back);
@@ -948,6 +943,224 @@ function fileStamp() {
     .replace(/[-:]/g, '').replace('T', '-');
 }
 
+// Per-session draggable / resizable wireframe placeholder that marks where
+// the flight-plan table should be drawn into a PNG export. Lives alongside
+// the legacy "pin plan to map" feature; the placeholder is in-memory only
+// (no localStorage) and is recreated each time the user requests it from
+// the Export PNG dialog. When present, exportPNG() uses the placeholder's
+// viewport rect instead of the pinned-plan rect.
+var planPlaceholderEl = null;
+
+function planPlaceholderActive() {
+  return !!(planPlaceholderEl && planPlaceholderEl.isConnected);
+}
+
+function removePlanPlaceholder() {
+  if (planPlaceholderEl && planPlaceholderEl.parentNode) {
+    planPlaceholderEl.parentNode.removeChild(planPlaceholderEl);
+  }
+  planPlaceholderEl = null;
+}
+
+// Compute placeholder rect (px, screen coords) for a placement choice:
+//   'tl' | 'tr' | 'bl' | 'br' — corner of the page frame (or viewport
+//   when no A3/A4 frame is set). 'custom' or undefined → default centre.
+// Box is sized ~28 % of the host rect's width, ~25 % of its height,
+// clamped to a minimum that's still readable when rendered.
+function placeholderRectForPlacement(placement) {
+  // Host = page frame if present, else the visible viewport.
+  var host = pageFrameRect();
+  if (!host) host = { x: 0, y: 0, w: window.innerWidth, h: window.innerHeight };
+  var w = Math.max(180, Math.round(host.w * 0.28));
+  var h = Math.max(110, Math.round(host.h * 0.25));
+  var margin = 12;
+  var left, top;
+  switch (placement) {
+    case 'tl': left = host.x + margin;             top = host.y + margin; break;
+    case 'tr': left = host.x + host.w - w - margin; top = host.y + margin; break;
+    case 'bl': left = host.x + margin;             top = host.y + host.h - h - margin; break;
+    case 'br': left = host.x + host.w - w - margin; top = host.y + host.h - h - margin; break;
+    default:
+      left = host.x + (host.w - w) / 2;
+      top  = host.y + (host.h - h) / 2;
+  }
+  // Clamp to viewport so corners outside the visible map area still land
+  // somewhere reachable.
+  left = Math.max(0, Math.min(window.innerWidth - w, left));
+  top  = Math.max(0, Math.min(window.innerHeight - h, top));
+  return { left: left, top: top, w: w, h: h };
+}
+
+function createPlanPlaceholder(placement) {
+  removePlanPlaceholder();
+  var el = document.createElement('div');
+  el.className = 'plan-placeholder';
+  var r = placeholderRectForPlacement(placement);
+  el.style.left = r.left + 'px';
+  el.style.top = r.top + 'px';
+  el.style.width = r.w + 'px';
+  el.style.height = r.h + 'px';
+
+  // Header strip: "PLAN" label on the left, × close on the right.
+  var hdr = document.createElement('div');
+  hdr.className = 'plan-placeholder-hdr';
+  var lbl = document.createElement('span');
+  lbl.className = 'plan-placeholder-label';
+  lbl.textContent = (window.S && S.planPlaceholderLabel) || 'PLAN';
+  hdr.appendChild(lbl);
+  var closeBtn = document.createElement('button');
+  closeBtn.type = 'button';
+  closeBtn.className = 'plan-placeholder-close';
+  closeBtn.title = (window.S && S.removePlanFromMap) || 'Remove';
+  closeBtn.setAttribute('aria-label', closeBtn.title);
+  closeBtn.textContent = '\u00D7';
+  closeBtn.onclick = function (e) {
+    e.stopPropagation();
+    removePlanPlaceholder();
+  };
+  hdr.appendChild(closeBtn);
+  el.appendChild(hdr);
+
+  // Wireframe rows — grey bars on a card background. Pure visual mass; no
+  // real data, no headers, no row text. Number of bars (9) ≈ a typical
+  // flight-plan with a header + 7 legs + a total row.
+  var body = document.createElement('div');
+  body.className = 'plan-placeholder-body';
+  for (var i = 0; i < 9; i++) {
+    var bar = document.createElement('div');
+    bar.className = 'plan-placeholder-bar';
+    body.appendChild(bar);
+  }
+  el.appendChild(body);
+
+  // Drag — anywhere on the element except the close button and the resize
+  // handles. Same clamp-to-viewport pattern the pin feature uses.
+  var dragging = false, dX = 0, dY = 0, dL = 0, dT = 0;
+  function dragStart(cx, cy) {
+    var r = el.getBoundingClientRect();
+    dragging = true;
+    dX = cx; dY = cy; dL = r.left; dT = r.top;
+  }
+  function dragMove(cx, cy) {
+    if (!dragging) return;
+    var nl = dL + (cx - dX);
+    var nt = dT + (cy - dY);
+    nl = Math.max(0, Math.min(window.innerWidth - el.offsetWidth, nl));
+    nt = Math.max(0, Math.min(window.innerHeight - el.offsetHeight, nt));
+    el.style.left = nl + 'px';
+    el.style.top = nt + 'px';
+  }
+  function dragEnd() { dragging = false; }
+  el.addEventListener('mousedown', function (e) {
+    var t = e.target;
+    if (t.closest('.plan-placeholder-close')) return;
+    if (t.closest('.resize-handle')) return;
+    e.preventDefault();
+    dragStart(e.clientX, e.clientY);
+    var onMove = function (ev) { dragMove(ev.clientX, ev.clientY); };
+    var onUp = function () {
+      dragEnd();
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  });
+  el.addEventListener('touchstart', function (e) {
+    if (e.touches.length !== 1) return;
+    var t = e.target;
+    if (t.closest('.plan-placeholder-close')) return;
+    if (t.closest('.resize-handle')) return;
+    e.preventDefault();
+    dragStart(e.touches[0].clientX, e.touches[0].clientY);
+  }, { passive: false });
+  var onTouchMove = function (e) {
+    if (!dragging || e.touches.length !== 1) return;
+    e.preventDefault();
+    dragMove(e.touches[0].clientX, e.touches[0].clientY);
+  };
+  window.addEventListener('touchmove', onTouchMove, { passive: false });
+  window.addEventListener('touchend', dragEnd);
+  window.addEventListener('touchcancel', dragEnd);
+
+  // Four-corner resize handles — same .resize-handle / .corner-* classes the
+  // pinned-plan box uses, so the existing CSS styles them automatically.
+  function makeHandle(corner) {
+    var h = document.createElement('div');
+    h.className = 'resize-handle corner-' + corner;
+    el.appendChild(h);
+    var rx = 0, ry = 0, rw = 0, rh = 0, rl = 0, rt = 0, rDrag = false;
+    function rStart(cx, cy) {
+      var r = el.getBoundingClientRect();
+      rx = cx; ry = cy; rw = r.width; rh = r.height; rl = r.left; rt = r.top;
+      rDrag = true;
+    }
+    function rMove(cx, cy) {
+      if (!rDrag) return;
+      var dx = cx - rx, dy = cy - ry;
+      var nl = rl, nt = rt, nw = rw, nh = rh;
+      if (corner.indexOf('e') !== -1) nw = Math.max(80, rw + dx);
+      if (corner.indexOf('w') !== -1) { nw = Math.max(80, rw - dx); nl = rl + (rw - nw); }
+      if (corner.indexOf('s') !== -1) nh = Math.max(60, rh + dy);
+      if (corner.indexOf('n') !== -1) { nh = Math.max(60, rh - dy); nt = rt + (rh - nh); }
+      nl = Math.max(0, Math.min(window.innerWidth - nw, nl));
+      nt = Math.max(0, Math.min(window.innerHeight - nh, nt));
+      el.style.left = nl + 'px';
+      el.style.top = nt + 'px';
+      el.style.width = nw + 'px';
+      el.style.height = nh + 'px';
+    }
+    function rEnd() { rDrag = false; }
+    h.addEventListener('mousedown', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      rStart(e.clientX, e.clientY);
+      var onMove = function (ev) { rMove(ev.clientX, ev.clientY); };
+      var onUp = function () {
+        rEnd();
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      };
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    });
+    h.addEventListener('touchstart', function (e) {
+      if (e.touches.length !== 1) return;
+      e.preventDefault();
+      e.stopPropagation();
+      rStart(e.touches[0].clientX, e.touches[0].clientY);
+    }, { passive: false });
+    var rTM = function (e) {
+      if (!rDrag || e.touches.length !== 1) return;
+      e.preventDefault();
+      rMove(e.touches[0].clientX, e.touches[0].clientY);
+    };
+    window.addEventListener('touchmove', rTM, { passive: false });
+    window.addEventListener('touchend', rEnd);
+    window.addEventListener('touchcancel', rEnd);
+  }
+  makeHandle('se');
+  makeHandle('sw');
+  makeHandle('ne');
+  makeHandle('nw');
+
+  document.body.appendChild(el);
+  planPlaceholderEl = el;
+  return el;
+}
+
+function togglePlanPlaceholder() {
+  if (planPlaceholderActive()) { removePlanPlaceholder(); return false; }
+  createPlanPlaceholder();
+  return true;
+}
+
+// Set / move the placeholder to a named placement. Pass null to remove.
+function setPlanPlacement(placement) {
+  if (!placement) { removePlanPlaceholder(); return; }
+  createPlanPlaceholder(placement);
+}
+
 // Show a pre-export modal so the user can decide which overlays and base
 // layer appear in the PNG, independently of the current screen settings.
 function showExportModal() {
@@ -1079,6 +1292,54 @@ function showExportModal() {
   }
   body.appendChild(pageWarn);
 
+  // Flight-plan placement on the export. One row, 6 options:
+  //   None / TL / TR / BL / BR / Custom.
+  // None removes any existing placeholder; corner picks place a
+  // wireframe rectangle in that corner of the page frame (or the
+  // viewport if no A3/A4 frame is set); Custom drops the box at the
+  // centre and the user can drag / resize it.
+  const placeholderRow = document.createElement('div');
+  placeholderRow.style.cssText = 'display:flex;flex-direction:column;gap:4px;padding-top:6px;margin-top:2px;border-top:1px solid #4a4646';
+  const placeholderLbl = document.createElement('div');
+  placeholderLbl.style.cssText = 'font-size:12px;color:#b9b3b3';
+  placeholderLbl.textContent = (S.planPlacementLabel || 'Flight plan placement:');
+  placeholderRow.appendChild(placeholderLbl);
+  const placeholderBtns = document.createElement('div');
+  placeholderBtns.style.cssText = 'display:flex;gap:4px;flex-wrap:wrap';
+  const PLACEMENTS = [
+    { key: 'none',   label: S.planPlacementNone   || 'None' },
+    { key: 'tl',     label: S.planPlacementTL     || '↖ TL' },
+    { key: 'tr',     label: S.planPlacementTR     || '↗ TR' },
+    { key: 'bl',     label: S.planPlacementBL     || '↙ BL' },
+    { key: 'br',     label: S.planPlacementBR     || '↘ BR' },
+    { key: 'custom', label: S.planPlacementCustom || 'Custom…' },
+  ];
+  let currentPlacement = 'none';
+  const placementBtnEls = {};
+  function syncPlacementBtns() {
+    for (const p of PLACEMENTS) {
+      placementBtnEls[p.key].classList.toggle('active', p.key === currentPlacement);
+    }
+  }
+  for (const p of PLACEMENTS) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.textContent = p.label;
+    btn.style.cssText = 'font:inherit;font-size:12px;padding:5px 9px;background:#3a3636;color:#e8e8e8;border:1px solid #4a4646;border-radius:4px;cursor:pointer';
+    btn.onclick = function () {
+      currentPlacement = p.key;
+      if (p.key === 'none') removePlanPlaceholder();
+      else if (p.key === 'custom') createPlanPlaceholder();   // centred + draggable
+      else setPlanPlacement(p.key);
+      syncPlacementBtns();
+    };
+    placementBtnEls[p.key] = btn;
+    placeholderBtns.appendChild(btn);
+  }
+  syncPlacementBtns();
+  placeholderRow.appendChild(placeholderBtns);
+  body.appendChild(placeholderRow);
+
   box.appendChild(body);
 
   // Save original state (before applying defaults) so Cancel can restore.
@@ -1185,6 +1446,141 @@ function showExportModal() {
   document.addEventListener('keydown', onEsc);
 }
 
+// Draw the flight-plan table on an export canvas at the given position and
+// size. Called from exportPNG() when the flight plan is pinned to the map.
+// `ctx` is the output-canvas 2d context at identity transform; x/y/w/h are
+// output-canvas pixels.
+function drawFlightPlanTable(ctx, x, y, w, h) {
+  const legs = state.legs || [];
+  const wpts = state.waypoints || [];
+  if (!legs.length || wpts.length < 2) return;
+  const ac = aircraft;
+  const taxiFuel = ac && ac.taxiGal && isAirport(wpts[0]) ? ac.taxiGal : 0;
+  // Compute rows.
+  const rows = [];
+  let totDist = 0, totTime = 0, totFuel = 0;
+  for (let i = 0; i < legs.length; i++) {
+    const A = wpts[i], B = wpts[i + 1];
+    if (!A || !B) continue;
+    const { dist, brg } = geo(A, B);
+    const hdg = toMagnetic(brg);
+    const dur = legs[i].flightSpeed > 0 ? dist / legs[i].flightSpeed : 0;
+    let fuel = ac ? dur * ac.gph : 0;
+    if (i === 0 && taxiFuel) fuel += taxiFuel;
+    totDist += dist;
+    totTime += dur;
+    totFuel += fuel;
+    const fLabel = ac ? fuel.toFixed(1) + (i === 0 && taxiFuel ? ' *' : '') : '--';
+    rows.push({ num: i + 1, from: navName((A.name || '').trim()) || S.wpPrefix + (i + 1),
+      to: navName((B.name || '').trim()) || S.wpPrefix + (i + 2),
+      hdg: pad3(hdg) + '\u00B0M', dist: dist.toFixed(1),
+      speed: String(legs[i].flightSpeed), alt: String(legs[i].inboundAltitude),
+      time: dur > 0 ? toHMS(dur) : '--', fuel: fLabel });
+  }
+  if (!rows.length) return;
+  // Always use short headers on the printed plan — saves horizontal
+  // space, matches the compact on-map placeholder size.
+  const headers = S.fpHeadersShort;
+  const numCols = headers.length;
+  const numRows = rows.length + 2;        // header + data + total
+  const rowH = h / numRows;
+  const fontSize = Math.min(rowH * 0.55, 13);
+  const padX = 5;
+  // Text alignment per column.
+  const aligns = ['center', 'left', 'left', 'center', 'right', 'right', 'right', 'center', 'right'];
+  ctx.save();
+  ctx.font = fontSize + 'px sans-serif';
+  // Pre-compute pixel column widths from measured content (header in bold, all
+  // data rows, total values). Each column is content + 2*padX, so adjacent
+  // cells keep at least ~2*padX (~10 px) of breathing room. This replaces the
+  // old fixed fractions which left too much empty space in compact rows.
+  var totVals = { 4: totDist.toFixed(1), 7: totTime > 0 ? toHMS(totTime) : '--', 8: ac ? totFuel.toFixed(1) : '--' };
+  const colW = new Array(numCols).fill(0);
+  ctx.font = 'bold ' + fontSize + 'px sans-serif';
+  for (let mc = 0; mc < numCols; mc++) {
+    colW[mc] = Math.max(colW[mc], ctx.measureText(String(headers[mc])).width);
+    if (totVals[mc] !== undefined) {
+      colW[mc] = Math.max(colW[mc], ctx.measureText(String(totVals[mc])).width);
+    }
+  }
+  ctx.font = fontSize + 'px sans-serif';
+  for (let mr = 0; mr < rows.length; mr++) {
+    const rd = rows[mr];
+    const mvals = [rd.num, rd.from, rd.to, rd.hdg, rd.dist, rd.speed, rd.alt, rd.time, rd.fuel];
+    for (let mc = 0; mc < numCols; mc++) {
+      colW[mc] = Math.max(colW[mc], ctx.measureText(String(mvals[mc])).width);
+    }
+  }
+  for (let mc = 0; mc < numCols; mc++) colW[mc] = Math.ceil(colW[mc] + 2 * padX);
+  // x-offset for column `col` from `x`.
+  const colX = new Array(numCols + 1).fill(0);
+  for (let mc = 0; mc < numCols; mc++) colX[mc + 1] = colX[mc] + colW[mc];
+  const totalW = colX[numCols];
+  // Background.
+  ctx.fillStyle = 'rgba(42,38,38,0.92)';
+  ctx.fillRect(x, y, totalW, h);
+  // Border.
+  ctx.strokeStyle = '#4a4646';
+  ctx.lineWidth = 1;
+  ctx.strokeRect(x, y, totalW, h);
+  // Helper: draw one cell.
+  function cell(row, col, text, bold, bg) {
+    const cx = x + colX[col];
+    const cy = y + row * rowH;
+    const cw = colW[col];
+    if (bg) { ctx.fillStyle = bg; ctx.fillRect(cx, cy, cw, rowH); }
+    // Right/bottom grid lines (avoid overdraw on last column/row).
+    ctx.strokeStyle = '#4a4646';
+    ctx.lineWidth = 0.5;
+    if (col < numCols - 1) { ctx.beginPath(); ctx.moveTo(cx + cw, cy); ctx.lineTo(cx + cw, cy + rowH); ctx.stroke(); }
+    if (row < numRows - 1) { ctx.beginPath(); ctx.moveTo(cx, cy + rowH); ctx.lineTo(cx + cw, cy + rowH); ctx.stroke(); }
+    // Text.
+    ctx.fillStyle = bold ? '#e8e8e8' : '#d0d0d0';
+    ctx.font = (bold ? 'bold ' : '') + fontSize + 'px sans-serif';
+    ctx.textBaseline = 'middle';
+    var a = aligns[col];
+    ctx.textAlign = a;
+    var tx = a === 'right' ? cx + cw - padX : a === 'center' ? cx + cw / 2 : cx + padX;
+    ctx.fillText(text, tx, cy + rowH / 2);
+  }
+  // Header.
+  for (var c = 0; c < numCols; c++) cell(0, c, headers[c], true, '#3a3636');
+  // Data rows.
+  for (var r = 0; r < rows.length; r++) {
+    var rd = rows[r];
+    var vals = [rd.num, rd.from, rd.to, rd.hdg, rd.dist, rd.speed, rd.alt, rd.time, rd.fuel];
+    for (var c2 = 0; c2 < numCols; c2++) {
+      cell(r + 1, c2, String(vals[c2]), false, r % 2 === 1 ? 'rgba(255,255,255,0.03)' : null);
+    }
+  }
+  // Total row: "Total" spans first 4 columns.
+  var tr = rows.length + 1;
+  var totalLabel = S.fpTotal;
+  var totX0 = x;
+  var totX1 = x + colX[4];
+  var totCY = y + tr * rowH;
+  ctx.fillStyle = '#333030';
+  ctx.fillRect(totX0, totCY, totX1 - totX0, rowH);
+  ctx.fillStyle = '#e8e8e8';
+  ctx.font = 'bold ' + fontSize + 'px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(totalLabel, totX0 + padX, totCY + rowH / 2);
+  // Grid lines for total-row cells.
+  for (var c3 = 0; c3 < numCols; c3++) {
+    var cx3 = x + colX[c3];
+    ctx.strokeStyle = '#4a4646';
+    ctx.lineWidth = 0.5;
+    if (c3 < numCols - 1) { ctx.beginPath(); ctx.moveTo(cx3 + colW[c3], totCY); ctx.lineTo(cx3 + colW[c3], totCY + rowH); ctx.stroke(); }
+    ctx.beginPath(); ctx.moveTo(cx3, totCY + rowH); ctx.lineTo(cx3 + colW[c3], totCY + rowH); ctx.stroke();
+  }
+  // Remaining total cells.
+  for (var c4 = 4; c4 < numCols; c4++) {
+    if (totVals[c4] !== undefined) cell(tr, c4, String(totVals[c4]), true, null);
+  }
+  ctx.restore();
+}
+
 // Save the framed map + route as a PNG, rendered at the highest practical
 // native tile zoom (not the on-screen zoom) for maximum quality. flight-maps
 // tiles are not CORS-enabled, so each tile is fetched through the weserv image
@@ -1404,6 +1800,28 @@ function exportPNG() {
       octx = prevOctx;
     }
 
+    // Flight-plan placement on the export. Priority:
+    //   1. The per-session "Add plan to map" placeholder (explicit user
+    //      intent for export placement; see createPlanPlaceholder).
+    //   2. The legacy pinned-plan rect (still honoured if no placeholder
+    //      is active, so the existing pin-to-map feature is unchanged).
+    var planRect = null;
+    if (typeof planPlaceholderActive === 'function' && planPlaceholderActive()) {
+      planRect = planPlaceholderEl.getBoundingClientRect();
+    } else if (localStorage.getItem('navaid.planPin') === '1') {
+      var fpBox = document.querySelector('.modal-back.flight-plan > .modal');
+      if (fpBox) planRect = fpBox.getBoundingClientRect();
+    }
+    if (planRect) {
+      var fpx = (planRect.left - fr.x) * s;
+      var fpy = (planRect.top - fr.y) * s;
+      var fpw = planRect.width * s;
+      var fph = planRect.height * s;
+      if (fpx + fpw > 0 && fpy + fph > 0 && fpx < W && fpy < H) {
+        drawFlightPlanTable(o, Math.max(0, fpx), Math.max(0, fpy), Math.min(fpw, W - fpx), Math.min(fph, H - fpy));
+      }
+    }
+
     out.toBlob(b => {
       btn.textContent = btnLabel;
       btn.disabled = false;
diff --git a/docs/style.css b/docs/style.css
index 83f9fd82..02df0a3b 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -648,6 +648,114 @@ html, body {
   flex: 1;
   min-height: 0;
 }
+.modal.pinned .fp-scroll {
+  /* Per user spec: no scroll in pinned mode. Font auto-shrinks to fit
+     (computePlanFontSize uses scrH / rows × 0.85, floor 2px), and column
+     widths are fixed percentages — content fits the box without a bar. */
+  overflow: hidden;
+  min-width: 0;
+}
+.modal.pinned {
+  border-color: #ffd966;
+  box-shadow: 0 0 0 2px rgba(255, 217, 102, 0.3);
+  min-width: 0;
+  min-height: 0;
+  max-width: none;
+  max-height: none;
+  padding: 2px 4px;
+}
+.modal.pinned .flight-table,
+.modal.pinned .flight-table input {
+  font-size: var(--fp-font-size, 13px);
+  /* line-height 1 so row height tracks the font down to ~0px without a
+     residual padding/leading floor — rows can never overlap. */
+  line-height: 1;
+}
+.modal.pinned .fp-aircraft,
+.modal.pinned .modal-btns,
+.modal.pinned .modal-title,
+.modal.pinned .modal-close-x {
+  display: none;
+}
+.modal.pinned .flight-table th,
+.modal.pinned .flight-table td {
+  /* Zero padding so character runs from one column abut the next. */
+  position: static;
+  padding: 0;
+  border: none;
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: clip;
+  /* Each cell only as wide as its OWN content — without this each column
+     widens to the max-content across all rows (including the header),
+     so a long header like "Dist (NM)" left big gaps after short data
+     like "3.3". Setting per-row widths via auto layout is what we get
+     when we drop tabular-nums and let proportional widths apply. */
+  font-variant-numeric: normal;
+}
+.modal.pinned .flight-table { border-spacing: 0; }
+.modal.pinned .flight-table th { font-weight: 600; }
+/* Hide the long-form header row entirely — once the user has the data
+   on the map they know the layout (#, From → To, Hdg, Dist, Spd, Alt,
+   Time, Fuel); the header was the dominant source of column slack. */
+.modal.pinned .flight-table thead { display: none; }
+.modal.pinned .flight-table input {
+  width: auto;
+  max-width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  min-width: 0;
+  height: auto;
+  /* Pinned mode is a read-only on-map readout. Block direct edits but
+     keep programmatic .value updates from refresh() / retRefresh() —
+     pointer-events skips clicks, caret-color hides any stray cursor. */
+  pointer-events: none;
+  caret-color: transparent;
+  user-select: none;
+}
+.modal.pinned .flight-table tfoot td {
+  border: none;
+  font-weight: 700;
+}
+.modal.pinned .flight-table {
+  margin-bottom: 0;
+  border-collapse: collapse;
+  /* Shrink-wrap (max-content) — table sizes to the sum of its column
+     widths, no slack distributed across cells. Font-shrink keeps the
+     natural width ≤ box width, so no max-width clamp needed. */
+  table-layout: auto;
+  width: max-content;
+}
+.modal.pinned .flight-table th:nth-child(1),
+.modal.pinned .flight-table td:nth-child(1) { text-align: center; }
+.modal.pinned .flight-table th:nth-child(4),
+.modal.pinned .flight-table td:nth-child(4) { text-align: center; }
+.modal.pinned .flight-table th:nth-child(5),
+.modal.pinned .flight-table td:nth-child(5) { text-align: right; }
+.modal.pinned .flight-table th:nth-child(6),
+.modal.pinned .flight-table td:nth-child(6) { text-align: right; }
+.modal.pinned .flight-table th:nth-child(7),
+.modal.pinned .flight-table td:nth-child(7) { text-align: right; }
+.modal.pinned .flight-table th:nth-child(8),
+.modal.pinned .flight-table td:nth-child(8) { width: 10%; text-align: center; }
+.modal.pinned .flight-table th:nth-child(9),
+.modal.pinned .flight-table td:nth-child(9) { width: 15%; text-align: right; }
+.modal.pinned .flight-table th:nth-child(1),
+.modal.pinned .flight-table td:nth-child(1) { text-align: center; }
+.modal.pinned .flight-table th:nth-child(4),
+.modal.pinned .flight-table td:nth-child(4) { text-align: center; }
+.modal.pinned .flight-table th:nth-child(5),
+.modal.pinned .flight-table td:nth-child(5) { text-align: right; }
+.modal.pinned .flight-table th:nth-child(6),
+.modal.pinned .flight-table td:nth-child(6) { text-align: right; }
+.modal.pinned .flight-table th:nth-child(7),
+.modal.pinned .flight-table td:nth-child(7) { text-align: right; }
+.modal.pinned .flight-table th:nth-child(8),
+.modal.pinned .flight-table td:nth-child(8) { text-align: center; }
+.modal.pinned .flight-table th:nth-child(9),
+.modal.pinned .flight-table td:nth-child(9) { text-align: right; }
 .flight-table {
   width: 100%;
   border-collapse: collapse;
@@ -698,22 +806,6 @@ html, body {
   border-bottom: none;
   background: rgba(255, 255, 255, 0.03);
 }
-.fp-del {
-  width: 20px;
-  padding: 2px 2px !important;
-  text-align: center;
-}
-.fp-del button {
-  background: none;
-  border: none;
-  color: #b06464;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-  padding: 0 2px;
-  border-radius: 3px;
-}
-.fp-del button:hover { color: #e06060; background: rgba(255, 80, 80, 0.1); }
 .flight-plan-sub {
   font-size: 13px;
   font-weight: 600;
@@ -877,6 +969,121 @@ html, body {
 }
 .modal-close-x:hover { background: #443f3f; color: #fff; }
 
+.modal-pin {
+  position: absolute;
+  top: 6px;
+  inset-inline-end: 38px;
+  width: 28px;
+  height: 28px;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  color: #b9b3b3;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 1;
+}
+.modal-pin:hover { background: #443f3f; color: #fff; }
+.modal-pin.active { color: #ffd966; }
+/* When pinned, lift the pin button above the box so it never overlaps
+   table content — the box is read-only and may shrink very small. */
+.modal.pinned .modal-pin {
+  top: -22px;
+  inset-inline-end: 0;
+  width: 22px;
+  height: 22px;
+  font-size: 13px;
+  background: rgba(20, 18, 18, 0.85);
+}
+.modal.pinned { cursor: move; }
+.modal.pinned input { cursor: text; }
+
+.resize-handle {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  z-index: 1;
+}
+.resize-handle::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+}
+.resize-handle.corner-se { bottom: 0; right: 0; cursor: nwse-resize; }
+.resize-handle.corner-se::after { bottom: 2px; right: 2px; border-right: 2px solid #888; border-bottom: 2px solid #888; }
+.resize-handle.corner-sw { bottom: 0; left: 0; cursor: nesw-resize; }
+.resize-handle.corner-sw::after { bottom: 2px; left: 2px; border-left: 2px solid #888; border-bottom: 2px solid #888; }
+.resize-handle.corner-ne { top: 0; right: 0; cursor: nesw-resize; }
+.resize-handle.corner-ne::after { top: 2px; right: 2px; border-right: 2px solid #888; border-top: 2px solid #888; }
+.resize-handle.corner-nw { top: 0; left: 0; cursor: nwse-resize; }
+.resize-handle.corner-nw::after { top: 2px; left: 2px; border-left: 2px solid #888; border-top: 2px solid #888; }
+
+/* Per-session wireframe placeholder shown by the Export PNG dialog's "Add
+   plan to map" button. Marks where drawFlightPlanTable() should render on
+   the PNG; the placeholder itself is a plain DOM element and is NOT drawn
+   into the export canvas. */
+.plan-placeholder {
+  position: fixed;
+  z-index: 600;
+  background: rgba(42, 38, 38, 0.85);
+  border: 1px dashed #ffd966;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  cursor: move;
+  user-select: none;
+  overflow: hidden;
+}
+.plan-placeholder-hdr {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 6px;
+  background: rgba(255, 217, 102, 0.15);
+  border-bottom: 1px dashed rgba(255, 217, 102, 0.5);
+  flex: 0 0 auto;
+}
+.plan-placeholder-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #ffd966;
+  text-transform: uppercase;
+}
+.plan-placeholder-close {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: #e8e8e8;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: 3px;
+}
+.plan-placeholder-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
+.plan-placeholder-body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  padding: 6px 8px;
+  gap: 4px;
+  min-height: 0;
+}
+.plan-placeholder-bar {
+  flex: 1 1 0;
+  min-height: 4px;
+  max-height: 14px;
+  background: rgba(200, 200, 200, 0.45);
+  border-radius: 2px;
+}
+
 /* Floating search overlay — Ctrl/Cmd-F shows this top-center panel so the
  * user can find a nav-waypoint without expanding the Build section. */
 #search-overlay {
@@ -970,3 +1177,12 @@ html, body {
   50% { opacity: 0.3; }
 }
 .blink-warn { animation: blink-warn 1.2s ease-in-out infinite; }
+
+/* Flight-plan placement picker (export modal). One button per option;
+   the selected one highlights in the yellow accent. */
+.modal .modal-btns + div button.active,
+.modal button.active[type="button"] {
+  background: #ffd966;
+  color: #231F20;
+  border-color: #ffd966;
+}
diff --git a/tests/export-png-options.spec.js b/tests/export-png-options.spec.js
index 0d8af20a..8a9a489a 100644
--- a/tests/export-png-options.spec.js
+++ b/tests/export-png-options.spec.js
@@ -278,4 +278,66 @@ test.describe('Export PNG options modal', () => {
     const download = await dl;
     expect(download.suggestedFilename()).toMatch(/^navigation-.+\.png$/);
   });
+
+  test('Plan placement: corner pick puts a placeholder near the chosen corner', async ({ page }) => {
+    await boot(page);
+    await page.evaluate(() => {
+      state.waypoints = [
+        { lat: 32.18060, lng: 34.83470, name: 'LLHZ' },
+        { lat: 32.80972, lng: 35.04389, name: 'LLHA' },
+      ];
+      syncLegs(); draw();
+    });
+    await page.locator('#print').click();
+    await page.locator('.modal-back').waitFor();
+    // Click the TL placement button (the buttons live in the placement
+    // row after the page-warning).
+    const placeBtn = page.locator('.modal button').filter({ hasText: /TL/ });
+    await placeBtn.click();
+    // A placeholder element shows up on the page.
+    const placeholder = page.locator('.plan-placeholder');
+    await expect(placeholder).toBeVisible();
+    // TL → small offsets from origin.
+    const box = await placeholder.boundingBox();
+    expect(box).not.toBeNull();
+    if (box) {
+      expect(box.x).toBeLessThan(200);
+      expect(box.y).toBeLessThan(200);
+    }
+  });
+
+  test('Plan placement: None removes any existing placeholder', async ({ page }) => {
+    await boot(page);
+    await page.evaluate(() => {
+      state.waypoints = [
+        { lat: 32.18060, lng: 34.83470, name: 'LLHZ' },
+        { lat: 32.80972, lng: 35.04389, name: 'LLHA' },
+      ];
+      syncLegs(); draw();
+    });
+    await page.locator('#print').click();
+    await page.locator('.modal-back').waitFor();
+    await page.locator('.modal button').filter({ hasText: /BR/ }).click();
+    await expect(page.locator('.plan-placeholder')).toBeVisible();
+    await page.locator('.modal button').filter({ hasText: /None/ }).click();
+    await expect(page.locator('.plan-placeholder')).toHaveCount(0);
+  });
+
+  test('Export with a placement still produces a PNG', async ({ page }) => {
+    await boot(page);
+    await page.evaluate(() => {
+      state.waypoints = [
+        { lat: 32.18060, lng: 34.83470, name: 'LLHZ' },
+        { lat: 32.80972, lng: 35.04389, name: 'LLHA' },
+      ];
+      syncLegs(); draw();
+    });
+    await page.locator('#print').click();
+    await page.locator('.modal-back').waitFor();
+    await page.locator('.modal button').filter({ hasText: /TL/ }).click();
+    const dl = page.waitForEvent('download', { timeout: 30000 });
+    await page.locator('.modal .modal-btns button').first().click();
+    const download = await dl;
+    expect(download.suggestedFilename()).toMatch(/^navigation-.+\.png$/);
+  });
 });
diff --git a/tests/flight-plan.spec.js b/tests/flight-plan.spec.js
index 0bc56445..1a5ebd99 100644
--- a/tests/flight-plan.spec.js
+++ b/tests/flight-plan.spec.js
@@ -368,6 +368,32 @@ test.describe('Flight plan', () => {
     }
   });
 
+  test('Pin button no longer exists (UX moved to export modal)', async ({ page }) => {
+    await page.locator('#plan').click();
+    const modal = page.locator('.modal-back.flight-plan');
+    await expect(modal).toBeVisible();
+    // .modal-pin and resize handles retired — placement now picked in
+    // the Export PNG modal.
+    await expect(modal.locator('.modal-pin')).toHaveCount(0);
+    await expect(modal.locator('.resize-handle')).toHaveCount(0);
+  });
+
+  test('Stale pin-mode localStorage keys are cleared on open', async ({ page }) => {
+    // Seed the old keys, open the modal, verify they're gone.
+    await page.evaluate(() => {
+      try {
+        localStorage.setItem('navaid.planPin', '1');
+        localStorage.setItem('navaid.planW', '400');
+        localStorage.setItem('navaid.planH', '250');
+      } catch (e) {}
+    });
+    await page.locator('#plan').click();
+    await page.locator('.modal-back.flight-plan').waitFor();
+    expect(await page.evaluate(() => localStorage.getItem('navaid.planPin'))).toBeNull();
+    expect(await page.evaluate(() => localStorage.getItem('navaid.planW'))).toBeNull();
+    expect(await page.evaluate(() => localStorage.getItem('navaid.planH'))).toBeNull();
+  });
+
   test('drag-handler touch listeners are cleaned up on close', async ({ page }) => {
     // Stub addEventListener to count the touch listeners attached to window
     // by the drag block. Open/close 5×; count must not grow.
@@ -395,116 +421,4 @@ test.describe('Flight plan', () => {
     const leftover = await page.evaluate(() => window.__touchCount);
     expect(leftover).toBe(0);
   });
-
-  test('delete-leg button exists on every forward row', async ({ page }) => {
-    await page.locator('#plan').click();
-    const modal = page.locator('.modal-back.flight-plan');
-    await expect(modal).toBeVisible();
-
-    const fwdRows = modal.locator('.flight-table').first().locator('tbody tr');
-    await expect(fwdRows).toHaveCount(10);
-    for (let i = 0; i < 10; i++) {
-      const delBtn = fwdRows.nth(i).locator('.fp-del button');
-      await expect(delBtn).toBeVisible();
-    }
-  });
-
-  test('delete middle leg (index 3) removes waypoint and reconnects', async ({ page }) => {
-    await page.locator('#plan').click();
-    const modal = page.locator('.modal-back.flight-plan');
-    await expect(modal).toBeVisible();
-
-    // Delete leg 3 (0-based) → removes waypoint 4 (SHARO), reconnects HADRA (idx 4→3 after splice)
-    const fwdRows = modal.locator('.flight-table').first().locator('tbody tr');
-    await fwdRows.nth(3).locator('.fp-del button').click();
-
-    // Modal rebuilds with 9 legs
-    await expect(fwdRows).toHaveCount(9);
-
-    // Leg 3 now connects SHARO(3) → FRDIS(4) (HADRA was removed)
-    const fromInp = fwdRows.nth(3).locator('td').nth(1).locator('input');
-    const toInp   = fwdRows.nth(3).locator('td').nth(2).locator('input');
-    await expect(fromInp).toHaveValue('SHARO');
-    await expect(toInp).toHaveValue('FRDIS');
-  });
-
-  test('delete first leg removes waypoint 1 and reconnects', async ({ page }) => {
-    await page.locator('#plan').click();
-    const modal = page.locator('.modal-back.flight-plan');
-    await expect(modal).toBeVisible();
-
-    const fwdRows = modal.locator('.flight-table').first().locator('tbody tr');
-    await fwdRows.nth(0).locator('.fp-del button').click();
-
-    await expect(fwdRows).toHaveCount(9);
-    // Now waypoint 0 was the first in the route — waypoint 1 (BAZRA) was removed.
-    // Leg 0 connects LLHZ (idx 0) → DEROR (old idx 2, now idx 1)
-    // Actually: delete leg 0 removes waypoint[1] = BAZRA.
-    // Leg 0 becomes LLHZ(0) → DEROR(1)
-    const fromInp = fwdRows.nth(0).locator('td').nth(1).locator('input');
-    const toInp   = fwdRows.nth(0).locator('td').nth(2).locator('input');
-    await expect(fromInp).toHaveValue('LLHZ');
-    await expect(toInp).toHaveValue('DEROR');
-  });
-
-  test('delete last leg removes final waypoint shortens route by 1', async ({ page }) => {
-    await page.locator('#plan').click();
-    const modal = page.locator('.modal-back.flight-plan');
-    await expect(modal).toBeVisible();
-
-    const fwdRows = modal.locator('.flight-table').first().locator('tbody tr');
-    await fwdRows.nth(9).locator('.fp-del button').click();
-
-    await expect(fwdRows).toHaveCount(9);
-    // Last leg connects GALIM → (removed LLHA). After delete:
-    // Leg 8: GALIM(8) → LLHA was at idx 9, removed. So now leg 8 is DAROM(7?) → GALIM(8?)
-    // Actually let me think. After delete leg 9:
-    // waypoints: [LLHZ, BAZRA, DEROR, SHARO, HADRA, FRDIS, BOREN, HOTRM, DAROM, GALIM]
-    // leg 8: GALIM → (removed LLHA), so leg 8 becomes DAROM → GALIM
-    const lastFrom = await fwdRows.nth(8).locator('td').nth(1).locator('input').inputValue();
-    const lastTo   = await fwdRows.nth(8).locator('td').nth(2).locator('input').inputValue();
-    expect(lastFrom).toBe('DAROM');
-    expect(lastTo).toBe('GALIM');
-  });
-
-  test('delete leg updates state correctly (waypoints + legs trimmed)', async ({ page }) => {
-    await page.locator('#plan').click();
-    const fwdRows = page.locator('.modal-back.flight-plan .flight-table').first().locator('tbody tr');
-    await fwdRows.nth(5).locator('.fp-del button').click();
-
-    const wpLen = await page.evaluate(() => state.waypoints.length);
-    const legLen = await page.evaluate(() => state.legs.length);
-    expect(wpLen).toBe(10);   // was 11, removed 1
-    expect(legLen).toBe(9);   // was 10, removed 1
-    expect(legLen).toBe(wpLen - 1);
-  });
-
-  test('delete-leg with return route: both tables rebuild correctly', async ({ page }) => {
-    await page.evaluate(() => { window.showReturn = true; });
-    await page.locator('#plan').click();
-    const modal = page.locator('.modal-back.flight-plan');
-    await expect(modal).toBeVisible();
-
-    const tables = modal.locator('.fp-scroll > .flight-table');
-    const fwdRows = tables.first().locator('tbody tr');
-    const retRows = tables.nth(1).locator('tbody tr');
-
-    // Delete middle leg
-    await fwdRows.nth(4).locator('.fp-del button').click();
-
-    await expect(fwdRows).toHaveCount(9);
-    await expect(retRows).toHaveCount(9);
-
-    // Return headings should still be reciprocal of forward
-    const fwdHdgs = await fwdRows.evaluateAll(rows =>
-      rows.map(r => parseInt((r.querySelectorAll('td')[3]?.textContent || '').replace('°M', ''), 10))
-    );
-    const retHdgs = await retRows.evaluateAll(rows =>
-      rows.map(r => parseInt((r.querySelectorAll('td')[3]?.textContent || '').replace('°M', ''), 10))
-    );
-    for (let i = 0; i < 9; i++) {
-      const ri = 8 - i;
-      expect(retHdgs[i]).toBe((fwdHdgs[ri] + 180) % 360);
-    }
-  });
 });
diff --git a/tests/fuel-flight-plan.spec.js b/tests/fuel-flight-plan.spec.js
index fa738c3c..fea56b58 100644
--- a/tests/fuel-flight-plan.spec.js
+++ b/tests/fuel-flight-plan.spec.js
@@ -36,33 +36,19 @@ async function openFlightPlan(page) {
 }
 
 // Read (legFuel of row 0, totalFuel from tfoot) from the flight table.
-// Find the fuel column by matching its header text ("Fuel (gal)" or "דלק (גאל)").
 async function readFuelCells(page) {
   return page.evaluate(() => {
     const table = document.querySelector('.flight-table');
     if (!table) return { legFuel: NaN, totalFuel: NaN };
-    const headers = table.querySelectorAll('thead th');
-    let fuelCol = -1;
-    for (let i = 0; i < headers.length; i++) {
-      if (/Fuel|דלק/.test(headers[i].textContent)) { fuelCol = i; break; }
-    }
-    if (fuelCol < 0) return { legFuel: NaN, totalFuel: NaN };
     const legRow   = table.querySelector('tbody tr:first-child');
     const totalRow = table.querySelector('tfoot tr:first-child');
-    function cellAt(row, col) {
+    function lastCell(row) {
       if (!row) return NaN;
       const cells = row.querySelectorAll('td');
-      // tfoot first td has colspan=4, so visual col maps differently.
-      // Walk cells accumulating colspan until we reach the visual column.
-      let vis = 0;
-      for (const c of cells) {
-        const cs = c.colSpan || 1;
-        if (vis <= col && col < vis + cs) return parseFloat(c.textContent);
-        vis += cs;
-      }
-      return NaN;
+      const last = cells[cells.length - 1];
+      return last ? parseFloat(last.textContent) : NaN;
     }
-    return { legFuel: cellAt(legRow, fuelCol), totalFuel: cellAt(totalRow, fuelCol) };
+    return { legFuel: lastCell(legRow), totalFuel: lastCell(totalRow) };
   });
 }
 
@@ -99,24 +85,10 @@ test.describe('Fuel/endurance flight plan modal', () => {
     await page.locator('#aircraft-gph').dispatchEvent('input');
 
     const totFuel = await page.evaluate(() => {
-      const table = document.querySelector('.flight-table');
-      if (!table) return null;
-      const headers = table.querySelectorAll('thead th');
-      let fuelCol = -1;
-      for (let i = 0; i < headers.length; i++) {
-        if (/Fuel|דלק/.test(headers[i].textContent)) { fuelCol = i; break; }
-      }
-      if (fuelCol < 0) return null;
-      const totalRow = table.querySelector('tfoot tr:first-child');
+      const totalRow = document.querySelector('.flight-table tfoot tr:first-child');
       if (!totalRow) return null;
       const cells = totalRow.querySelectorAll('td');
-      let vis = 0;
-      for (const c of cells) {
-        const cs = c.colSpan || 1;
-        if (vis <= fuelCol && fuelCol < vis + cs) return c.textContent;
-        vis += cs;
-      }
-      return null;
+      return cells[cells.length - 1] ? cells[cells.length - 1].textContent : null;
     });
     expect(totFuel).toBe('--');
   });
diff --git a/tests/orient-pageexport.spec.js b/tests/orient-pageexport.spec.js
index 04809baf..8ff04ce8 100644
--- a/tests/orient-pageexport.spec.js
+++ b/tests/orient-pageexport.spec.js
@@ -89,7 +89,7 @@ test.describe('PNG export filename respects pageSize + orient', () => {
     await page.locator('#page-a4').click();
     const dl = page.waitForEvent('download', { timeout: 30000 });
     await page.locator('#print').click();
-    await page.locator('.modal-back button:first-child').click();
+    await page.locator('.modal-back .modal-btns button:first-child').click();
     const download = await dl;
     expect(download.suggestedFilename()).toMatch(/^navigation-A4-.+\.png$/);
   });
@@ -108,7 +108,7 @@ test.describe('PNG export filename respects pageSize + orient', () => {
     // pageSize stays null — exporter falls back to the baseName (layer-derived).
     const dl = page.waitForEvent('download', { timeout: 30000 });
     await page.locator('#print').click();
-    await page.locator('.modal-back button:first-child').click();
+    await page.locator('.modal-back .modal-btns button:first-child').click();
     const download = await dl;
     expect(download.suggestedFilename()).toMatch(/^navigation-.+-\d.+\.png$/);
   });

From 5b035aa4dca218ff1b9da2aa5e2348f2af6166de Mon Sep 17 00:00:00 2001
From: Marco <marco@supino.org>
Date: Tue, 26 May 2026 19:33:07 +0000
Subject: [PATCH 02/12] =?UTF-8?q?fix(export):=20paper-style=20flight=20pla?=
 =?UTF-8?q?n=20table=20=E2=80=94=20white=20bg,=20visible=20grid,=20larger?=
 =?UTF-8?q?=20font?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The PNG-embedded plan rendered as a dark-grey block with near-invisible
0.5 px grid lines, capped at 13 px font. It looked like a UI overlay
dropped onto the chart, not a printed flight log.

Redraw as a paper table:
- White background, dark text (#1a1a1a)
- Light grey header row (#e8e6e1) and total row (#f0eee9) for structure
- Off-white stripe (#f7f5f0) on every other data row for fast row-tracking
- Grid lines drawn in one pass on top of cell backgrounds in a clear
  warm-grey (#7a7470) at 0.75-1 px — readable when printed
- Half-pixel offsets on grid coords for crisp lines on retina output
- Font cap raised from 13 → 22 px, floor 9 px; padX scales with font
  so an A3-corner placement comes out genuinely readable
- "Total" label sits in column 2 (over From) instead of overlapping
  the # column

Co-Authored-By: Claude Sonnet 4.7 <noreply@anthropic.com>
---
 docs/io.js | 86 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 47 insertions(+), 39 deletions(-)

diff --git a/docs/io.js b/docs/io.js
index 21b781a9..6a538e57 100644
--- a/docs/io.js
+++ b/docs/io.js
@@ -1484,8 +1484,9 @@ function drawFlightPlanTable(ctx, x, y, w, h) {
   const numCols = headers.length;
   const numRows = rows.length + 2;        // header + data + total
   const rowH = h / numRows;
-  const fontSize = Math.min(rowH * 0.55, 13);
-  const padX = 5;
+  // Paper-print font: 9-22 px (was capped at 13 — too small on A3).
+  const fontSize = Math.max(9, Math.min(rowH * 0.65, 22));
+  const padX = Math.max(4, Math.round(fontSize * 0.6));
   // Text alignment per column.
   const aligns = ['center', 'left', 'left', 'center', 'right', 'right', 'right', 'center', 'right'];
   ctx.save();
@@ -1512,72 +1513,79 @@ function drawFlightPlanTable(ctx, x, y, w, h) {
     }
   }
   for (let mc = 0; mc < numCols; mc++) colW[mc] = Math.ceil(colW[mc] + 2 * padX);
-  // x-offset for column `col` from `x`.
   const colX = new Array(numCols + 1).fill(0);
   for (let mc = 0; mc < numCols; mc++) colX[mc + 1] = colX[mc] + colW[mc];
   const totalW = colX[numCols];
-  // Background.
-  ctx.fillStyle = 'rgba(42,38,38,0.92)';
+
+  // Paper-print look: white background, black text, visible grid lines.
+  const HEADER_BG = '#e8e6e1';
+  const TOTAL_BG  = '#f0eee9';
+  const STRIPE_BG = '#f7f5f0';
+  const GRID = '#7a7470';
+  const TEXT = '#1a1a1a';
+
+  ctx.fillStyle = '#ffffff';
   ctx.fillRect(x, y, totalW, h);
-  // Border.
-  ctx.strokeStyle = '#4a4646';
-  ctx.lineWidth = 1;
-  ctx.strokeRect(x, y, totalW, h);
+
   // Helper: draw one cell.
   function cell(row, col, text, bold, bg) {
     const cx = x + colX[col];
     const cy = y + row * rowH;
     const cw = colW[col];
     if (bg) { ctx.fillStyle = bg; ctx.fillRect(cx, cy, cw, rowH); }
-    // Right/bottom grid lines (avoid overdraw on last column/row).
-    ctx.strokeStyle = '#4a4646';
-    ctx.lineWidth = 0.5;
-    if (col < numCols - 1) { ctx.beginPath(); ctx.moveTo(cx + cw, cy); ctx.lineTo(cx + cw, cy + rowH); ctx.stroke(); }
-    if (row < numRows - 1) { ctx.beginPath(); ctx.moveTo(cx, cy + rowH); ctx.lineTo(cx + cw, cy + rowH); ctx.stroke(); }
-    // Text.
-    ctx.fillStyle = bold ? '#e8e8e8' : '#d0d0d0';
+    ctx.fillStyle = TEXT;
     ctx.font = (bold ? 'bold ' : '') + fontSize + 'px sans-serif';
     ctx.textBaseline = 'middle';
-    var a = aligns[col];
+    const a = aligns[col];
     ctx.textAlign = a;
-    var tx = a === 'right' ? cx + cw - padX : a === 'center' ? cx + cw / 2 : cx + padX;
+    const tx = a === 'right' ? cx + cw - padX : a === 'center' ? cx + cw / 2 : cx + padX;
     ctx.fillText(text, tx, cy + rowH / 2);
   }
-  // Header.
-  for (var c = 0; c < numCols; c++) cell(0, c, headers[c], true, '#3a3636');
-  // Data rows.
+  // Header row background.
+  ctx.fillStyle = HEADER_BG;
+  ctx.fillRect(x, y, totalW, rowH);
+  for (var c = 0; c < numCols; c++) cell(0, c, headers[c], true, null);
+  // Data rows with alternating stripe.
   for (var r = 0; r < rows.length; r++) {
     var rd = rows[r];
     var vals = [rd.num, rd.from, rd.to, rd.hdg, rd.dist, rd.speed, rd.alt, rd.time, rd.fuel];
     for (var c2 = 0; c2 < numCols; c2++) {
-      cell(r + 1, c2, String(vals[c2]), false, r % 2 === 1 ? 'rgba(255,255,255,0.03)' : null);
+      cell(r + 1, c2, String(vals[c2]), false, r % 2 === 1 ? STRIPE_BG : null);
     }
   }
-  // Total row: "Total" spans first 4 columns.
+  // Total row.
   var tr = rows.length + 1;
-  var totalLabel = S.fpTotal;
-  var totX0 = x;
-  var totX1 = x + colX[4];
   var totCY = y + tr * rowH;
-  ctx.fillStyle = '#333030';
-  ctx.fillRect(totX0, totCY, totX1 - totX0, rowH);
-  ctx.fillStyle = '#e8e8e8';
+  ctx.fillStyle = TOTAL_BG;
+  ctx.fillRect(x, totCY, totalW, rowH);
+  ctx.fillStyle = TEXT;
   ctx.font = 'bold ' + fontSize + 'px sans-serif';
   ctx.textAlign = 'left';
   ctx.textBaseline = 'middle';
-  ctx.fillText(totalLabel, totX0 + padX, totCY + rowH / 2);
-  // Grid lines for total-row cells.
-  for (var c3 = 0; c3 < numCols; c3++) {
-    var cx3 = x + colX[c3];
-    ctx.strokeStyle = '#4a4646';
-    ctx.lineWidth = 0.5;
-    if (c3 < numCols - 1) { ctx.beginPath(); ctx.moveTo(cx3 + colW[c3], totCY); ctx.lineTo(cx3 + colW[c3], totCY + rowH); ctx.stroke(); }
-    ctx.beginPath(); ctx.moveTo(cx3, totCY + rowH); ctx.lineTo(cx3 + colW[c3], totCY + rowH); ctx.stroke();
-  }
-  // Remaining total cells.
+  ctx.fillText(S.fpTotal, x + colX[1] + padX, totCY + rowH / 2);
   for (var c4 = 4; c4 < numCols; c4++) {
     if (totVals[c4] !== undefined) cell(tr, c4, String(totVals[c4]), true, null);
   }
+  // Grid: outer border + column dividers + row dividers, all in one pass
+  // so they sit on top of all cell backgrounds.
+  ctx.strokeStyle = GRID;
+  ctx.lineWidth = 1;
+  ctx.strokeRect(x + 0.5, y + 0.5, totalW - 1, h - 1);
+  ctx.lineWidth = 0.75;
+  for (let gc = 1; gc < numCols; gc++) {
+    const gx = Math.round(x + colX[gc]) + 0.5;
+    ctx.beginPath();
+    ctx.moveTo(gx, y);
+    ctx.lineTo(gx, y + h);
+    ctx.stroke();
+  }
+  for (let gr = 1; gr < numRows; gr++) {
+    const gy = Math.round(y + gr * rowH) + 0.5;
+    ctx.beginPath();
+    ctx.moveTo(x, gy);
+    ctx.lineTo(x + totalW, gy);
+    ctx.stroke();
+  }
   ctx.restore();
 }
 

From 1594d8583c394cde09492291e005a37ecda96673 Mon Sep 17 00:00:00 2001
From: Marco <marco@supino.org>
Date: Tue, 26 May 2026 19:38:20 +0000
Subject: [PATCH 03/12] fix(export): seed aircraft defaults at boot so PNG fuel
 column is never '--'

drawFlightPlanTable reads the module-global `aircraft` to compute
per-leg fuel. Before, that was only seeded inside showFlightPlan's
syncAircraftUI(). A user who opened the export modal straight from
the toolbar (without ever touching the Flight Plan) hit the fuel
calculation with aircraft = null and every cell rendered as '--'.

loadAircraft() now applies AIRCRAFT_DEFAULTS = { gph: 8, taxiGal: 1.1 }
whenever localStorage has nothing valid, and is called eagerly at
module parse time. The Flight Plan modal still overrides via the user
inputs as before.

Co-Authored-By: Claude Sonnet 4.7 <noreply@anthropic.com>
---
 docs/core.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/core.js b/docs/core.js
index e18eaa81..3f0add5e 100644
--- a/docs/core.js
+++ b/docs/core.js
@@ -285,13 +285,27 @@ var pageOrient = 'portrait';
 let pageOffset = { x: 0, y: 0 };   // page-frame drag offset from viewport centre
 var aircraft = null;               // null | {gph, taxiGal}
 
+// Aircraft fuel-calc defaults. Used both by the Flight Plan modal's
+// aircraft inputs and by drawFlightPlanTable when the modal hasn't
+// been opened yet — without this, a PNG export taken straight from
+// the toolbar would render Fuel as '--' because aircraft was null.
+const AIRCRAFT_DEFAULTS = { gph: 8, taxiGal: 1.1 };
+
 function loadAircraft() {
   try {
     const raw = localStorage.getItem('navaid.aircraft');
     if (raw) aircraft = JSON.parse(raw);
   } catch (e) { /* storage unavailable */ }
+  if (!aircraft || typeof aircraft.gph !== 'number') {
+    aircraft = Object.assign({}, AIRCRAFT_DEFAULTS);
+  }
 }
 
+// Eager-load at module parse time so any code path that reads
+// `aircraft` before the Flight Plan modal opens still sees the
+// defaults — drawFlightPlanTable (PNG export) is the main case.
+loadAircraft();
+
 function saveAircraft() {
   try { localStorage.setItem('navaid.aircraft', JSON.stringify(aircraft)); } catch (e) {}
 }

From 3d8653fa0c17132771d62cf0f12350861ab60ada Mon Sep 17 00:00:00 2001
From: Marco <marco@supino.org>
Date: Tue, 26 May 2026 19:48:50 +0000
Subject: [PATCH 04/12] =?UTF-8?q?fix(export):=20cap=20row=20height=20at=20?=
 =?UTF-8?q?font=20=C3=97=201.35=20so=20rows=20don't=20spread?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

rowH = h / numRows let the placeholder height dictate spacing — a tall
placeholder spaced rows out, leaving lots of empty padding between
each line. Now: compute font first (~70 % of ideal row), then
rowH = min(ideal, ceil(font × 1.35)). Vertical slack lives as
whitespace below the table, not between rows.

Outer border + grid lines now use `tableH = rowH × numRows` instead
of the placeholder height so they hug the actual content.

Co-Authored-By: Claude Sonnet 4.7 <noreply@anthropic.com>
---
 docs/io.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/docs/io.js b/docs/io.js
index 6a538e57..e1072537 100644
--- a/docs/io.js
+++ b/docs/io.js
@@ -1483,9 +1483,13 @@ function drawFlightPlanTable(ctx, x, y, w, h) {
   const headers = S.fpHeadersShort;
   const numCols = headers.length;
   const numRows = rows.length + 2;        // header + data + total
-  const rowH = h / numRows;
-  // Paper-print font: 9-22 px (was capped at 13 — too small on A3).
-  const fontSize = Math.max(9, Math.min(rowH * 0.65, 22));
+  // Choose font from the available height per row, then clamp the row
+  // height so we never spread the rows out wider than ~1.35 × font.
+  // A tall narrow placeholder used to balloon row spacing — now it
+  // just leaves whitespace at the bottom instead.
+  const idealRowH = h / numRows;
+  const fontSize = Math.max(9, Math.min(idealRowH * 0.7, 22));
+  const rowH = Math.min(idealRowH, Math.ceil(fontSize * 1.35));
   const padX = Math.max(4, Math.round(fontSize * 0.6));
   // Text alignment per column.
   const aligns = ['center', 'left', 'left', 'center', 'right', 'right', 'right', 'center', 'right'];
@@ -1524,8 +1528,10 @@ function drawFlightPlanTable(ctx, x, y, w, h) {
   const GRID = '#7a7470';
   const TEXT = '#1a1a1a';
 
+  // Actual rendered table height (rowH might be less than h/numRows).
+  const tableH = rowH * numRows;
   ctx.fillStyle = '#ffffff';
-  ctx.fillRect(x, y, totalW, h);
+  ctx.fillRect(x, y, totalW, tableH);
 
   // Helper: draw one cell.
   function cell(row, col, text, bold, bg) {
@@ -1570,13 +1576,13 @@ function drawFlightPlanTable(ctx, x, y, w, h) {
   // so they sit on top of all cell backgrounds.
   ctx.strokeStyle = GRID;
   ctx.lineWidth = 1;
-  ctx.strokeRect(x + 0.5, y + 0.5, totalW - 1, h - 1);
+  ctx.strokeRect(x + 0.5, y + 0.5, totalW - 1, tableH - 1);
   ctx.lineWidth = 0.75;
   for (let gc = 1; gc < numCols; gc++) {
     const gx = Math.round(x + colX[gc]) + 0.5;
     ctx.beginPath();
     ctx.moveTo(gx, y);
-    ctx.lineTo(gx, y + h);
+    ctx.lineTo(gx, y + tableH);
     ctx.stroke();
   }
   for (let gr = 1; gr < numRows; gr++) {

From 742295d6a0adc6709b20a567ee3ab1cd2469e24b Mon Sep 17 00:00:00 2001
From: Marco <marco@supino.org>
Date: Tue, 26 May 2026 20:01:09 +0000
Subject: [PATCH 05/12] fix(export): anchor printed table to the chosen corner
 of the placeholder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After the rowH cap, the actual rendered table is usually shorter than
the placeholder rect. drawFlightPlanTable always drew at the rect's
top-left, so a BR placement put the table mid-right instead of in the
true bottom-right corner.

Add an alignment param: drawFlightPlanTable(ctx, x, y, w, h, align)
where align ∈ tl | tr | bl | br | center. After computing totalW and
tableH, shift (x, y) inside the host rect to the chosen corner.

planPlacementAlign module-level var stores the user's pick from the
export modal (corner picks → tl/tr/bl/br, None/Custom → center).
exportPNG passes it through.

Co-Authored-By: Claude Sonnet 4.7 <noreply@anthropic.com>
---
 docs/io.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/docs/io.js b/docs/io.js
index e1072537..66ba0e7d 100644
--- a/docs/io.js
+++ b/docs/io.js
@@ -950,6 +950,10 @@ function fileStamp() {
 // the Export PNG dialog. When present, exportPNG() uses the placeholder's
 // viewport rect instead of the pinned-plan rect.
 var planPlaceholderEl = null;
+// 'tl' | 'tr' | 'bl' | 'br' | 'center' — set by the placement picker so
+// exportPNG can anchor the rendered table to the same corner. 'center'
+// is also used for the Custom (free-drag) option.
+var planPlacementAlign = 'center';
 
 function planPlaceholderActive() {
   return !!(planPlaceholderEl && planPlaceholderEl.isConnected);
@@ -1328,6 +1332,8 @@ function showExportModal() {
     btn.style.cssText = 'font:inherit;font-size:12px;padding:5px 9px;background:#3a3636;color:#e8e8e8;border:1px solid #4a4646;border-radius:4px;cursor:pointer';
     btn.onclick = function () {
       currentPlacement = p.key;
+      planPlacementAlign = (p.key === 'tl' || p.key === 'tr' ||
+                            p.key === 'bl' || p.key === 'br') ? p.key : 'center';
       if (p.key === 'none') removePlanPlaceholder();
       else if (p.key === 'custom') createPlanPlaceholder();   // centred + draggable
       else setPlanPlacement(p.key);
@@ -1450,7 +1456,10 @@ function showExportModal() {
 // size. Called from exportPNG() when the flight plan is pinned to the map.
 // `ctx` is the output-canvas 2d context at identity transform; x/y/w/h are
 // output-canvas pixels.
-function drawFlightPlanTable(ctx, x, y, w, h) {
+// align: one of 'tl', 'tr', 'bl', 'br', 'center'. Anchors the rendered
+// table (which is usually smaller than the host w×h rect) to that
+// corner of the host rect. Default 'tl' for backwards compat.
+function drawFlightPlanTable(ctx, x, y, w, h, align) {
   const legs = state.legs || [];
   const wpts = state.waypoints || [];
   if (!legs.length || wpts.length < 2) return;
@@ -1530,6 +1539,16 @@ function drawFlightPlanTable(ctx, x, y, w, h) {
 
   // Actual rendered table height (rowH might be less than h/numRows).
   const tableH = rowH * numRows;
+  // Anchor inside the host rect — table may be smaller than (w,h), so
+  // for BR/BL the caller expects the table at the bottom-right/left, not
+  // floating at the placeholder's top-left.
+  const a = align || 'tl';
+  if (a === 'tr' || a === 'br') x = x + Math.max(0, w - totalW);
+  if (a === 'bl' || a === 'br') y = y + Math.max(0, h - tableH);
+  if (a === 'center') {
+    x = x + Math.max(0, (w - totalW) / 2);
+    y = y + Math.max(0, (h - tableH) / 2);
+  }
   ctx.fillStyle = '#ffffff';
   ctx.fillRect(x, y, totalW, tableH);
 
@@ -1832,7 +1851,9 @@ function exportPNG() {
       var fpw = planRect.width * s;
       var fph = planRect.height * s;
       if (fpx + fpw > 0 && fpy + fph > 0 && fpx < W && fpy < H) {
-        drawFlightPlanTable(o, Math.max(0, fpx), Math.max(0, fpy), Math.min(fpw, W - fpx), Math.min(fph, H - fpy));
+        drawFlightPlanTable(o, Math.max(0, fpx), Math.max(0, fpy),
+          Math.min(fpw, W - fpx), Math.min(fph, H - fpy),
+          planPlacementAlign);
       }
     }
 

From 0b1f7d4333b7342d72e1ec98511f533ea168f3fe Mon Sep 17 00:00:00 2001
From: Marco <marco@supino.org>
Date: Wed, 27 May 2026 03:40:18 +0000
Subject: [PATCH 06/12] chore: drop unused swapHeaders + thead-cell arrays
 (CodeQL)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CodeQL flagged swapHeaders as unused — it had been the pin-mode
header swapper and lost its sole caller when the pin code went.
Removing it pulls the supporting fpThCells / rfpThCells arrays
out of both table builders too.

Co-Authored-By: Claude Sonnet 4.7 <noreply@anthropic.com>
---
 docs/io.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/docs/io.js b/docs/io.js
index 66ba0e7d..0b46b65c 100644
--- a/docs/io.js
+++ b/docs/io.js
@@ -520,22 +520,14 @@ function showFlightPlan() {
   const headers = S.fpHeaders;
   const thead = document.createElement('thead');
   const trH = document.createElement('tr');
-  const fpThCells = [];
   for (const h of headers) {
     const th = document.createElement('th');
     th.textContent = h;
     trH.appendChild(th);
-    fpThCells.push(th);
   }
   thead.appendChild(trH);
   table.appendChild(thead);
 
-  function swapHeaders(pinned) {
-    var hdrs = pinned ? S.fpHeadersShort : S.fpHeaders;
-    for (let i = 0; i < fpThCells.length; i++) fpThCells[i].textContent = hdrs[i];
-    for (let i = 0; i < rfpThCells.length; i++) rfpThCells[i].textContent = hdrs[i];
-  }
-
   const tbody = document.createElement('tbody');
   // From / To cells are editable — each waypoint may appear in two rows,
   // so edits sync every input bound to the same waypoint.
@@ -692,7 +684,6 @@ function showFlightPlan() {
 
   // --- return-route table (when showReturn is on) --------------------
   let retRefresh = null;
-  var rfpThCells = [];
   if (window.showReturn) {
     const sub = document.createElement('div');
     sub.className = 'flight-plan-sub';
@@ -707,7 +698,6 @@ function showFlightPlan() {
       const th = document.createElement('th');
       th.textContent = h;
       rtrH.appendChild(th);
-      rfpThCells.push(th);
     }
     rthead.appendChild(rtrH);
     rtable.appendChild(rthead);

From 821fc088f1ff7f9c241fdaab6c5d6538c108b250 Mon Sep 17 00:00:00 2001
From: Marco Supino <marco@supino.org>
Date: Wed, 27 May 2026 08:52:29 +0300
Subject: [PATCH 07/12] chore: trigger CI and deploy workflows


From 01ba586eac7845ce36a36b8f6d332b7cda1d17f6 Mon Sep 17 00:00:00 2001
From: Marco Supino <marco@supino.org>
Date: Tue, 26 May 2026 20:30:47 +0300
Subject: [PATCH 08/12] retry lighthouse (infra flake)


From dd03eccaf107a988a8ec4002fd5de5381ab3ddb9 Mon Sep 17 00:00:00 2001
From: Marco Supino <marco@supino.org>
Date: Wed, 27 May 2026 09:47:01 +0300
Subject: [PATCH 09/12] Fix test BASE_URL resolution for deployed previews

Change page.goto('/?lang=en') to page.goto('?lang=en') in all test
files so they resolve relative to the baseURL path instead of the
domain root. Fixes e2e-deployed tests hitting the production site
instead of the PR preview.
---
 SECURITY.md                          | 21 +++++++++++++++++++++
 tests/bugfix-173-halo.spec.js        |  2 +-
 tests/bugfix-174-tohms.spec.js       |  2 +-
 tests/bugfix-175-drag-r5.spec.js     |  2 +-
 tests/bugfix-176-escape-leak.spec.js |  4 ++--
 tests/bugfix-177-octx.spec.js        |  4 ++--
 tests/bugfix-178-180-sw.spec.js      |  6 +++---
 tests/bugfix-212-214-215.spec.js     |  2 +-
 tests/bugfix-issues-coverage.spec.js |  2 +-
 tests/dev-306-regression.spec.js     |  4 ++--
 tests/export-png-options.spec.js     |  2 +-
 tests/flight-plan.spec.js            |  2 +-
 tests/fuel-flight-plan.spec.js       |  2 +-
 tests/ga-blocked.spec.js             |  6 +++---
 tests/google-earth.spec.js           |  2 +-
 tests/import.spec.js                 |  2 +-
 tests/multi-waypoint-search.spec.js  |  2 +-
 tests/og-preview.spec.js             |  2 +-
 tests/orient-pageexport.spec.js      |  2 +-
 tests/pwa.spec.js                    | 10 +++++-----
 tests/routes.spec.js                 |  4 ++--
 tests/runway-directions.spec.js      |  2 +-
 tests/search-overlay.spec.js         |  2 +-
 tests/section-accordion.spec.js      |  2 +-
 tests/share-route.spec.js            | 12 ++++++------
 tests/smoke.spec.js                  | 10 +++++-----
 tests/ui-deep-coverage.spec.js       |  2 +-
 tests/ui-toolbar-controls.spec.js    |  2 +-
 28 files changed, 69 insertions(+), 48 deletions(-)
 create mode 100644 SECURITY.md

diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 00000000..cd5089f6
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,21 @@
+# Security Policy
+
+## Supported Versions
+
+Only the latest production deployment (on `main`) receives security
+updates. Staging (`dev`) and PR previews are ephemeral.
+
+## Reporting a Vulnerability
+
+If you find a security issue, please open a
+[GitHub issue](https://github.com/msupino/NavigationApp/issues/new/choose)
+rather than a public discussion.
+
+NavAid is a client-side planning aid with no backend, no user
+accounts, and no data collection. Reports typically involve
+malicious route files (XSS via imported JSON/KML) or CDN
+supply-chain risks.
+
+Do **not** file a public issue if the vulnerability could impact
+users of the live site — use
+<msupino@gmail.com> instead.
diff --git a/tests/bugfix-173-halo.spec.js b/tests/bugfix-173-halo.spec.js
index aceff1d0..2c19a2f0 100644
--- a/tests/bugfix-173-halo.spec.js
+++ b/tests/bugfix-173-halo.spec.js
@@ -5,7 +5,7 @@ const { test, expect } = require('./_setup');
 
 test.describe('#173 needsHalo outboundSpeed', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof state !== 'undefined' && typeof needsHalo === 'function');
     await page.evaluate(() => {
       window.highlightDiff = true;          // needsHalo bails when off
diff --git a/tests/bugfix-174-tohms.spec.js b/tests/bugfix-174-tohms.spec.js
index f42d752e..880daeff 100644
--- a/tests/bugfix-174-tohms.spec.js
+++ b/tests/bugfix-174-tohms.spec.js
@@ -5,7 +5,7 @@ const { test, expect } = require('./_setup');
 
 test.describe('#174 toHMS extracts hours', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof toHMS === 'function');
   });
 
diff --git a/tests/bugfix-175-drag-r5.spec.js b/tests/bugfix-175-drag-r5.spec.js
index e08c56fe..40d05434 100644
--- a/tests/bugfix-175-drag-r5.spec.js
+++ b/tests/bugfix-175-drag-r5.spec.js
@@ -5,7 +5,7 @@
 const { test, expect } = require('./_setup');
 
 async function boot(page) {
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof r5 === 'function');
 }
 
diff --git a/tests/bugfix-176-escape-leak.spec.js b/tests/bugfix-176-escape-leak.spec.js
index 80506e0a..bbbaa769 100644
--- a/tests/bugfix-176-escape-leak.spec.js
+++ b/tests/bugfix-176-escape-leak.spec.js
@@ -26,7 +26,7 @@ async function installListenerCounter(page) {
 test.describe('#176 Escape listener leak in modals', () => {
   test('charts modal: open / ✕ / open / ✕ — keydown adds match removes', async ({ page }) => {
     await installListenerCounter(page);
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof showChartsModal === 'function');
     await page.evaluate(() => { window.airfields = window.airfields || []; });
 
@@ -48,7 +48,7 @@ test.describe('#176 Escape listener leak in modals', () => {
 
   test('plate viewer: ✕ button removes the Escape listener', async ({ page }) => {
     await installListenerCounter(page);
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof showPlateViewer === 'function');
 
     // Block the network fetch so the viewer doesn't try to load a real PDF.
diff --git a/tests/bugfix-177-octx.spec.js b/tests/bugfix-177-octx.spec.js
index 2b4967c3..3489bc65 100644
--- a/tests/bugfix-177-octx.spec.js
+++ b/tests/bugfix-177-octx.spec.js
@@ -6,7 +6,7 @@ const { test, expect } = require('./_setup');
 
 test.describe('#177 exportPNG restores octx on throw', () => {
   test('octx restored after a draw function throws (try/finally)', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof octx !== 'undefined');
 
     const result = await page.evaluate(() => {
@@ -36,7 +36,7 @@ test.describe('#177 exportPNG restores octx on throw', () => {
   });
 
   test('multiple consecutive exports do not poison the screen ctx', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof octx !== 'undefined');
 
     const okAfter = await page.evaluate(() => {
diff --git a/tests/bugfix-178-180-sw.spec.js b/tests/bugfix-178-180-sw.spec.js
index 079642f4..855b2da9 100644
--- a/tests/bugfix-178-180-sw.spec.js
+++ b/tests/bugfix-178-180-sw.spec.js
@@ -15,7 +15,7 @@ async function waitForSW(page) {
 test.describe('#178 cache-first awaits cache.put', () => {
   test('After fetch resolves the asset is in the cache (synchronous from caller view)',
     async ({ page }) => {
-      await page.goto('/?lang=en');
+      await page.goto('?lang=en');
       await waitForSW(page);
       // First reload makes the SW intercept; second reload confirms cached asset.
       await page.reload();
@@ -39,7 +39,7 @@ test.describe('#178 cache-first awaits cache.put', () => {
 
 test.describe('#179 ?v= pruning awaits cache.delete', () => {
   test('After fetching a new ?v= the previous version is evicted', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await waitForSW(page);
     await page.reload();
     await waitForSW(page);
@@ -68,7 +68,7 @@ test.describe('#179 ?v= pruning awaits cache.delete', () => {
 
 test.describe('#180 navigation fallback to cached /', () => {
   test('Offline navigation to uncached URL serves the cached / HTML', async ({ page, context }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await waitForSW(page);
     await page.reload();
     await waitForSW(page);
diff --git a/tests/bugfix-212-214-215.spec.js b/tests/bugfix-212-214-215.spec.js
index fbe1e91d..2157b9f1 100644
--- a/tests/bugfix-212-214-215.spec.js
+++ b/tests/bugfix-212-214-215.spec.js
@@ -31,7 +31,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof syncLegs === 'function');
 }
 
diff --git a/tests/bugfix-issues-coverage.spec.js b/tests/bugfix-issues-coverage.spec.js
index 2e8cf2c7..37dc5991 100644
--- a/tests/bugfix-issues-coverage.spec.js
+++ b/tests/bugfix-issues-coverage.spec.js
@@ -18,7 +18,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof fitView === 'function');
 }
 
diff --git a/tests/dev-306-regression.spec.js b/tests/dev-306-regression.spec.js
index 6bb6b0e9..d9602182 100644
--- a/tests/dev-306-regression.spec.js
+++ b/tests/dev-306-regression.spec.js
@@ -16,7 +16,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined');
 }
 
@@ -62,7 +62,7 @@ test.describe('#306 — Magnetic Variation removed from toolbar', () => {
     await page.addInitScript(() => {
       try { localStorage.setItem('navaid.magVar', '-12'); } catch (e) {}
     });
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof magVar !== 'undefined');
     expect(await page.evaluate(() => window.magVar)).toBe(-5);
   });
diff --git a/tests/export-png-options.spec.js b/tests/export-png-options.spec.js
index 8a9a489a..e3fe16af 100644
--- a/tests/export-png-options.spec.js
+++ b/tests/export-png-options.spec.js
@@ -15,7 +15,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof exportPNG === 'function');
 }
 
diff --git a/tests/flight-plan.spec.js b/tests/flight-plan.spec.js
index 1a5ebd99..ed46224f 100644
--- a/tests/flight-plan.spec.js
+++ b/tests/flight-plan.spec.js
@@ -41,7 +41,7 @@ test.describe('Flight plan', () => {
         }
       } catch (e) {}
     });
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof state !== 'undefined' && typeof showFlightPlan !== 'undefined');
     await page.evaluate(route => {
       state.waypoints = route.waypoints.map(w => ({ lat: w.lat, lng: w.lng, name: w.name }));
diff --git a/tests/fuel-flight-plan.spec.js b/tests/fuel-flight-plan.spec.js
index fea56b58..cbda0d21 100644
--- a/tests/fuel-flight-plan.spec.js
+++ b/tests/fuel-flight-plan.spec.js
@@ -21,7 +21,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof syncLegs === 'function');
   await page.evaluate(wps => {
     state.waypoints = wps.map(w => ({ lat: w.lat, lng: w.lng, name: w.name }));
diff --git a/tests/ga-blocked.spec.js b/tests/ga-blocked.spec.js
index 2f450e76..5e449dfd 100644
--- a/tests/ga-blocked.spec.js
+++ b/tests/ga-blocked.spec.js
@@ -12,7 +12,7 @@ test.describe('Google Analytics blocking', () => {
     page.on('requestfinished', req => {
       if (GA_RE.test(req.url())) completed.push(req.url());
     });
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof state !== 'undefined');
     // Mimic the production tag's flow: route the call through the real gtag
     // (which the inline <script> in index.html redeclared). gtag() pushes to
@@ -25,7 +25,7 @@ test.describe('Google Analytics blocking', () => {
   });
 
   test('dataLayer.push is stubbed — items never accumulate', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     // The production inline script calls gtag() twice on boot ('js', 'config').
     // Both go through dataLayer.push. With the stub, the array (now an object
     // posing as an array) never grows.
@@ -42,7 +42,7 @@ test.describe('Google Analytics blocking', () => {
       page.on('requestfailed', req => {
         if (GA_RE.test(req.url())) failed.push(req.failure() && req.failure().errorText);
       });
-      await page.goto('/?lang=en');
+      await page.goto('?lang=en');
       await page.waitForTimeout(400);
       // gtag/js loader is requested by the production <script async> tag. If
       // the fixture is working, it appears in `failed` with errorText like
diff --git a/tests/google-earth.spec.js b/tests/google-earth.spec.js
index 005eb83f..eeb3ef57 100644
--- a/tests/google-earth.spec.js
+++ b/tests/google-earth.spec.js
@@ -33,7 +33,7 @@ async function bootWithRoute(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof syncLegs === 'function');
   await page.evaluate(route => {
     state.waypoints = route.waypoints.map(w => ({ lat: w.lat, lng: w.lng, name: w.name }));
diff --git a/tests/import.spec.js b/tests/import.spec.js
index 0b3e3446..56b221a4 100644
--- a/tests/import.spec.js
+++ b/tests/import.spec.js
@@ -24,7 +24,7 @@ async function bootWithRoute(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof syncLegs === 'function');
   await page.evaluate(route => {
     state.waypoints = route.waypoints.map(w => ({ lat: w.lat, lng: w.lng, name: w.name }));
diff --git a/tests/multi-waypoint-search.spec.js b/tests/multi-waypoint-search.spec.js
index bdb70e7e..aacb5613 100644
--- a/tests/multi-waypoint-search.spec.js
+++ b/tests/multi-waypoint-search.spec.js
@@ -15,7 +15,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined');
   // navWP loads lazily on first draw or buildRouteFromQuery — pre-warm it
   // so the tests don't race the fetch.
diff --git a/tests/og-preview.spec.js b/tests/og-preview.spec.js
index 12548108..b008d840 100644
--- a/tests/og-preview.spec.js
+++ b/tests/og-preview.spec.js
@@ -35,7 +35,7 @@ test.describe('Social media preview image', () => {
         localStorage.setItem('navaid.layer', 'CVFR');
       } catch (e) {}
     });
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() =>
       typeof state !== 'undefined' && typeof draw === 'function');
     await page.evaluate(route => {
diff --git a/tests/orient-pageexport.spec.js b/tests/orient-pageexport.spec.js
index 8ff04ce8..06c922a8 100644
--- a/tests/orient-pageexport.spec.js
+++ b/tests/orient-pageexport.spec.js
@@ -17,7 +17,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof setPage === 'function');
 }
 
diff --git a/tests/pwa.spec.js b/tests/pwa.spec.js
index 46b440c9..d9d5a257 100644
--- a/tests/pwa.spec.js
+++ b/tests/pwa.spec.js
@@ -5,7 +5,7 @@ const { test, expect } = require('./_setup');
 
 test.describe('PWA manifest', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
   });
 
   test('<link rel="manifest"> points at manifest.json', async ({ page }) => {
@@ -65,7 +65,7 @@ test.describe('Service worker', () => {
   });
 
   test('Page registers the service worker on load', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(
       async () => (await navigator.serviceWorker.getRegistration()) != null,
       null,
@@ -80,7 +80,7 @@ test.describe('Service worker', () => {
 
   test('Service worker activates and the cache fills with app shell entries',
     async ({ page }) => {
-      await page.goto('/?lang=en');
+      await page.goto('?lang=en');
       await page.waitForFunction(async () => {
         const reg = await navigator.serviceWorker.getRegistration();
         return reg && reg.active && reg.active.state === 'activated';
@@ -106,7 +106,7 @@ test.describe('Service worker', () => {
 
   test('Index HTML is cached so offline navigation can be served', async ({ page }) => {
     // First load registers + activates the SW but doesn't run through it.
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(async () => {
       const reg = await navigator.serviceWorker.getRegistration();
       return reg && reg.active && reg.active.state === 'activated';
@@ -145,7 +145,7 @@ test.describe('Service worker', () => {
   });
 
   test('Bad upstream response (5xx) is not cached', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(async () => {
       const reg = await navigator.serviceWorker.getRegistration();
       return reg && reg.active && reg.active.state === 'activated';
diff --git a/tests/routes.spec.js b/tests/routes.spec.js
index 4dc06925..91314972 100644
--- a/tests/routes.spec.js
+++ b/tests/routes.spec.js
@@ -39,7 +39,7 @@ async function setupCleanInit(page) {
 
 async function bootWithRoute(page) {
   await setupCleanInit(page);
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof syncLegs === 'function');
   await page.evaluate(route => {
     state.waypoints = route.waypoints.map(w => ({ lat: w.lat, lng: w.lng, name: w.name }));
@@ -51,7 +51,7 @@ async function bootWithRoute(page) {
 test.describe('Add waypoint', () => {
   test.beforeEach(async ({ page }) => {
     await setupCleanInit(page);
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof state !== 'undefined' && typeof map !== 'undefined');
   });
 
diff --git a/tests/runway-directions.spec.js b/tests/runway-directions.spec.js
index e2a54c7f..670e3314 100644
--- a/tests/runway-directions.spec.js
+++ b/tests/runway-directions.spec.js
@@ -15,7 +15,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() =>
     typeof state !== 'undefined' &&
     typeof showInspector === 'function' &&
diff --git a/tests/search-overlay.spec.js b/tests/search-overlay.spec.js
index 44f792c1..bf12dc4d 100644
--- a/tests/search-overlay.spec.js
+++ b/tests/search-overlay.spec.js
@@ -16,7 +16,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && window.airfields && window.navWP);
 }
 
diff --git a/tests/section-accordion.spec.js b/tests/section-accordion.spec.js
index 5853022b..01871192 100644
--- a/tests/section-accordion.spec.js
+++ b/tests/section-accordion.spec.js
@@ -13,7 +13,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined');
 }
 
diff --git a/tests/share-route.spec.js b/tests/share-route.spec.js
index ed8ac4d1..29fe3c09 100644
--- a/tests/share-route.spec.js
+++ b/tests/share-route.spec.js
@@ -40,7 +40,7 @@ test.describe('Share route link', () => {
   });
 
   test('polyline encode/decode round-trips at 5 dp precision', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => typeof polylineEncode === 'function');
     const out = await page.evaluate(route => {
       const pts = route.waypoints.map(w => [w.lat, w.lng]);
@@ -57,7 +57,7 @@ test.describe('Share route link', () => {
   });
 
   test('buildShareUrl produces a URL containing r/n/l params', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.evaluate(route => {
       state.waypoints = route.waypoints.map(w => ({ lat: w.lat, lng: w.lng, name: w.name }));
       state.legs = route.legs.map(l => ({
@@ -79,7 +79,7 @@ test.describe('Share route link', () => {
   });
 
   test('share URL stays under WhatsApp preview budget for 20 waypoints', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     const len = await page.evaluate(() => {
       state.waypoints = [];
       for (let i = 0; i < 20; i++) {
@@ -96,7 +96,7 @@ test.describe('Share route link', () => {
   });
 
   test('errShareTooLong when over 64 waypoints', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     const out = await page.evaluate(() => {
       state.waypoints = [];
       for (let i = 0; i < 70; i++) {
@@ -111,7 +111,7 @@ test.describe('Share route link', () => {
   test('opening a URL with ?r=&n=&l= loads the encoded route', async ({ page }) => {
     // First build the URL on a fresh app instance, then open a second one
     // with that URL and verify the state matches.
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     const url = await page.evaluate(route => {
       state.waypoints = route.waypoints.map(w => ({ lat: w.lat, lng: w.lng, name: w.name }));
       state.legs = route.legs.map(l => ({
@@ -168,7 +168,7 @@ test.describe('Share route link', () => {
   });
 
   test('share button click writes the URL to clipboard', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.evaluate(route => {
       state.waypoints = route.waypoints.map(w => ({ lat: w.lat, lng: w.lng, name: w.name }));
       state.legs = route.legs.map(l => ({
diff --git a/tests/smoke.spec.js b/tests/smoke.spec.js
index 51f844b2..cdab685e 100644
--- a/tests/smoke.spec.js
+++ b/tests/smoke.spec.js
@@ -16,7 +16,7 @@ test.describe('NavAid smoke', () => {
   });
 
   test('boots in English with toolbar visible', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await expect(page).toHaveTitle('NavAid');
     await expect(page.locator('#toolbar')).toBeVisible();
     await expect(page.locator('#tool-add')).toHaveText(/Add Waypoint/);
@@ -41,7 +41,7 @@ test.describe('NavAid smoke', () => {
   });
 
   test('#124: search shows both airfields and nav-waypoints for broad query', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.waitForFunction(() => window.airfields && window.airfields.length > 0);
     await page.waitForFunction(() => window.navWP && window.navWP.length > 0);
     // Search input lives in a floating overlay (hidden by default). Click
@@ -56,13 +56,13 @@ test.describe('NavAid smoke', () => {
   });
 
   test('#126: normLegLabel removed (no leftover global)', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     const exists = await page.evaluate(() => typeof window.normLegLabel === 'function');
     expect(exists).toBe(false);
   });
 
   test('add two waypoints via state and verify legs sync', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.evaluate(() => {
       state.waypoints = [
         { lat: 32.0, lng: 34.9, name: 'A' },
@@ -77,7 +77,7 @@ test.describe('NavAid smoke', () => {
   });
 
   test('clear map button removes all waypoints', async ({ page }) => {
-    await page.goto('/?lang=en');
+    await page.goto('?lang=en');
     await page.evaluate(() => {
       state.waypoints = [
         { lat: 32.0, lng: 34.9, name: 'A' },
diff --git a/tests/ui-deep-coverage.spec.js b/tests/ui-deep-coverage.spec.js
index f4f7d160..a7507b99 100644
--- a/tests/ui-deep-coverage.spec.js
+++ b/tests/ui-deep-coverage.spec.js
@@ -19,7 +19,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined' && typeof showInspector === 'function');
 }
 
diff --git a/tests/ui-toolbar-controls.spec.js b/tests/ui-toolbar-controls.spec.js
index 3cfa2439..87ec5781 100644
--- a/tests/ui-toolbar-controls.spec.js
+++ b/tests/ui-toolbar-controls.spec.js
@@ -18,7 +18,7 @@ async function boot(page) {
       }
     } catch (e) {}
   });
-  await page.goto('/?lang=en');
+  await page.goto('?lang=en');
   await page.waitForFunction(() => typeof state !== 'undefined');
 }
 

From fdb9c832e9b4140027cfbf89b1eb3cd7d6bea573 Mon Sep 17 00:00:00 2001
From: Marco Supino <marco@supino.org>
Date: Wed, 27 May 2026 09:58:03 +0300
Subject: [PATCH 10/12] Add SHA verification in test fixture

When EXPECTED_SHA env var is set (e2e-deployed workflow), each test
verifies the deployed core.js SHA matches after the test runs.
Catches cases where page.goto resolves to a different deployment
than the intended preview.
---
 .github/workflows/deploy.yml |  2 +-
 tests/_setup.js              | 27 +++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index b7554d6e..b9720480 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -289,7 +289,7 @@ jobs:
           while [ $ATTEMPT -lt $MAX ]; do
             ATTEMPT=$((ATTEMPT + 1))
             echo "=== e2e attempt $ATTEMPT/$MAX ==="
-            if BASE_URL="$URL" npx playwright test $(ls tests/*.spec.js | grep -vE 'sw\.spec|pwa\.spec') --reporter=list 2>&1; then
+            if BASE_URL="$URL" EXPECTED_SHA="$SHA" npx playwright test $(ls tests/*.spec.js | grep -vE 'sw\.spec|pwa\.spec') --reporter=list 2>&1; then
               echo "All e2e tests passed!"
               exit 0
             fi
diff --git a/tests/_setup.js b/tests/_setup.js
index 6da3a0a4..3761fd91 100644
--- a/tests/_setup.js
+++ b/tests/_setup.js
@@ -4,6 +4,10 @@
 // pollute the production GA4 property (G-0XM5PHEK8B) — neither in CI nor on
 // developer laptops. Spec files import from here instead of @playwright/test.
 //
+// Also verifies the deployed SHA when EXPECTED_SHA env var is set
+// (e2e-deployed workflow), preventing tests from running against a stale
+// or wrong deployment.
+//
 //   const { test, expect } = require('./_setup');
 const base = require('@playwright/test');
 
@@ -16,6 +20,8 @@ const GA_HOSTS = [
   'stats.g.doubleclick.net',
 ];
 
+const EXPECTED_SHA = process.env.EXPECTED_SHA;
+
 exports.test = base.test.extend({
   page: async ({ page }, use) => {
     // 1. Network-level: every Google Analytics / GTM request aborts before it
@@ -45,6 +51,27 @@ exports.test = base.test.extend({
     });
 
     await use(page);
+
+    // 3. After the test, verify deployed SHA if EXPECTED_SHA is set.
+    //    Catches cases where page.goto resolved to a different deployment
+    //    than the one being tested (e.g. production root instead of /pr/NNN/).
+    if (EXPECTED_SHA) {
+      try {
+        const resp = await page.request.get('core.js');
+        const text = await resp.text();
+        const m = text.match(/version: '1\.0-([A-Za-z0-9]+)'/);
+        const sha = m ? m[1] : null;
+        if (sha && sha !== EXPECTED_SHA) {
+          throw new Error(
+            `SHA mismatch: page deployed commit ${sha}, ` +
+            `expected ${EXPECTED_SHA}. Tests may be running against the wrong URL.`
+          );
+        }
+      } catch (e) {
+        // If the page was closed or navigate failed, skip verification.
+        if (e.message?.includes('SHA mismatch')) throw e;
+      }
+    }
   },
 });
 

From b8420d09a992b95f6396c15342bb8e5987ef0d93 Mon Sep 17 00:00:00 2001
From: Marco Supino <marco@supino.org>
Date: Wed, 27 May 2026 10:04:20 +0300
Subject: [PATCH 11/12] Fix GA-blocked test on PR/branch previews

---
 tests/ga-blocked.spec.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/tests/ga-blocked.spec.js b/tests/ga-blocked.spec.js
index 5e449dfd..3833c511 100644
--- a/tests/ga-blocked.spec.js
+++ b/tests/ga-blocked.spec.js
@@ -43,6 +43,11 @@ test.describe('Google Analytics blocking', () => {
         if (GA_RE.test(req.url())) failed.push(req.failure() && req.failure().errorText);
       });
       await page.goto('?lang=en');
+      // On PR/branch previews GA is intentionally skipped entirely.
+      const gaLoaded = await page.evaluate(() =>
+        document.querySelector('script[src*="googletagmanager"]') !== null
+      );
+      if (!gaLoaded) return;   // nothing to block
       await page.waitForTimeout(400);
       // gtag/js loader is requested by the production <script async> tag. If
       // the fixture is working, it appears in `failed` with errorText like

From bb07eec9a8c863e71608196fa1bc2a8ace624820 Mon Sep 17 00:00:00 2001
From: Marco Supino <marco@supino.org>
Date: Wed, 27 May 2026 10:22:34 +0300
Subject: [PATCH 12/12] Fix superfluous tintFill argument (CodeQL alert #34)

tintFill only accepts one argument (hex). The second argument was an
unused alpha override that should be removed. Notes always use the
global yellowAlpha opacity.
---
 docs/draw.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/draw.js b/docs/draw.js
index 0e7aad9a..b105198d 100644
--- a/docs/draw.js
+++ b/docs/draw.js
@@ -554,7 +554,7 @@ function drawNotes() {
                      state.selected.type === 'note' &&
                      state.selected.index === i;
     const color = n.color || NOTE_DEFAULT_COLOR;
-    octx.fillStyle = tintFill(color, selected ? 0.95 : 0.80);
+    octx.fillStyle = tintFill(color);
     octx.lineWidth = selected ? 2.5 : 1.5;
     octx.strokeStyle = selected ? '#ffcc33' : '#161412';
     if (r.oval) {