fix(s52): stack chart area fills by band so finer cells win (§10.1.3)

Layers expanded template-outer/band-inner, emitting every band's plain
`areas` before every band's `areas-scamin`. A SCAMIN-bearing coarse area
(e.g. a coastal BUAARE) then drew above a finer band's plain fill (a
harbor DEPARE), so coastal docks painted over harbor water and looked
like land. Group each base layer with its *_scamin clone and expand the
pair per band (coarse→fine) so the larger-scale cell's fill wins, per
S-52 data-overlap handling. Also filter the cursor-pick to the finest
covering cell so buried coarser objects don't pollute the report.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: beetlebugorg

web/src/chart-canvas/chart-style.mjs

@@ -272,6 +272,19 @@ export function buildChartLayers({
   const layerBase = {}, variants = {}, layerVis = {};
   const tmpl = buildLayers(mariner, palette, atlasPpu, osm);
   const out = [];
+  // Group each base template layer with the *_scamin clone that _withScamin placed
+  // immediately after it (tagged _baseId), so the pair expands TOGETHER per band
+  // below — both fill paths iterate group-outer, band-mid, member-inner. Expanding
+  // them as two independent template entries (every band's plain `areas`, THEN every
+  // band's `areas_scamin`) let a COARSE band's SCAMIN area — e.g. a coastal BUAARE —
+  // stack ABOVE a FINER band's plain fill (a harbor DEPARE), so coastal docks painted
+  // over harbor water and read as land. Grouping keeps cross-band coarse→fine intact
+  // within each fill tier while still drawing all fills below lines/symbols/text.
+  const groups = [];
+  for (const L of tmpl) {
+    if (L._baseId && groups.length) groups[groups.length - 1].push(L);
+    else groups.push([L]);
+  }
   // Server mode: one source per active per-band set (chart-<district>-<band>).
   // Iterate template-outer, set-inner — and serverSets is ordered coarse→fine —
   // so the global draw order is by S-52 class (all fills, then lines, then symbols,
@@ -283,9 +296,10 @@ export function buildChartLayers({
   // "<id>@<set>" so scheme/mariner updates by base id hit every set's copy.
   if (server) {
     const lat = scaminLat;
-    for (const L of tmpl) {
-      const base = L.filter ?? null;
+    for (const group of groups) {
       for (const set of serverSets) {
+        for (const L of group) {
+        const base = L.filter ?? null;
         const dmin = BAND_DISPLAY_MIN[set.band];
         const capped = (set.band === "overview" || set.band === "general") && _capsAtBand(L);
         // mk pushes one variant of L for this set — same shape as the pmtiles path's
@@ -344,6 +358,7 @@ export function buildChartLayers({
         // data exists — the hatch is left only on the coarse-only (overscale) patches
         // such as open water shown enlarged. S-52 §10.1.10.2.
         if (L.id === "areas") _pushOverscale(out, "chart-" + set.name, set.band, layerVis, undefined, bandsHidden);
+        }
       }
     }
     _pushScaminProbes(out, server);
@@ -358,8 +373,9 @@ export function buildChartLayers({
   // WITHIN each class preserves best-available (finer fill covers coarser fill),
   // while symbols/text now always sit above every band's fills.
   const lat = scaminLat;
-  for (const L of tmpl) {
+  for (const group of groups) {
     for (const band of CHART_BANDS) {
+      for (const L of group) {
       const base = L.filter ?? null;
       const dmin = BAND_DISPLAY_MIN[band.slug];
       const capped = (band.slug === "overview" || band.slug === "general") && _capsAtBand(L);
@@ -407,6 +423,7 @@ export function buildChartLayers({
       }
       if (L.id === "areas") _pushOverscale(out, "chart-" + band.slug, band.slug, layerVis, undefined, bandsHidden);
     }
+    }
   }
   _pushScaminProbes(out, server);
   return { layers: out, layerBase, variants, layerVis };

web/src/chartplotter.mjs

@@ -157,6 +157,17 @@ function pickCmp(a, b) {
   return pickGeomRank(a.sourceLayer) - pickGeomRank(b.sourceLayer);
 }
 
+// S-57 cell names encode the usage band as the 3rd character (e.g. US[1-6]…):
+// 1 overview, 2 general, 3 coastal, 4 approach, 5 harbor, 6 berthing — a higher
+// digit is a larger-scale (finer) chart. Returns 0 when the name doesn't follow
+// the pattern (imported/non-NOAA cells), which the overlap filter treats as
+// "unknown band" and never suppresses.
+function cellBand(f) {
+  const c = f.properties && f.properties.cell;
+  const m = c && /^[A-Za-z]{2}([1-6])/.exec(c);
+  return m ? +m[1] : 0;
+}
+
 // Richness of a feature's geometry for *highlighting*: an area outlines better
 // than a line, which outlines better than a centred symbol's anchor point. Used
 // to pick which of an object's co-located representations the pick circle/outline
@@ -590,9 +601,13 @@ export class ChartPlotter extends HTMLElement {
       // Pinned scale-band pills (pill/cell clicks land inside their wrap).
       root.querySelectorAll(".sb-band-wrap.open").forEach((w) => { if (!inside(w)) w.classList.remove("open"); });
       // Charts/Settings drawer — but not while the NOAA agreement gate is up (it
-      // owns the interaction; Escape or its buttons resolve it), and not on its
-      // own rail buttons (those toggle it via toggleSection()).
+      // owns the interaction; Escape or its buttons resolve it), not on its own
+      // rail buttons (those toggle it via toggleSection()), and NOT while the dev
+      // feature-inspector is armed: it lives in the drawer but its interaction is
+      // clicking/dragging the MAP, so dismissing the drawer here would disarm it
+      // (closeDrawer → setInspectMode(false)) and hand the click to the cursor-pick.
       if (this._drawerOpen() && !(this._chartLib && this._chartLib.agreementOpen)
+          && !(this._devTools && this._devTools.inspecting)
           && !inside(root.getElementById("drawer"))
           && !inside(root.getElementById("charts-btn"))
           && !inside(root.getElementById("settings-btn"))) {
@@ -1094,8 +1109,18 @@ export class ChartPlotter extends HTMLElement {
     // ordering is unchanged) plus the richest geometry under the cursor
     // (area > line > point) on `_hiGeom`, so the highlight traces an area's
     // extent instead of dropping a dot on a centred symbol's anchor.
+    // S-52 PresLib §10.1.3 (data overlaps): where cells of different navigational
+    // purpose overlap, only ONE cell is displayed for the overlap area — the
+    // largest-scale (finest usage band) cell whose coverage applies. query-
+    // RenderedFeatures returns every band stacked at the point (a finer cell's
+    // opaque fill paints over a coarser one), so a coarser cell's now-hidden
+    // objects — e.g. a coastal BUAARE beneath a harbor LNDARE — would otherwise
+    // pollute the pick. Keep only the finest band present; coarser bands are
+    // suppressed there (unknown-band imports are always kept).
+    const finestBand = feats.reduce((m, f) => Math.max(m, cellBand(f)), 0);
+    const picked = finestBand ? feats.filter((f) => { const b = cellBand(f); return b === 0 || b >= finestBand; }) : feats;
     const groups = new Map();
-    for (const f of feats) {
+    for (const f of picked) {
       const p = f.properties || {};
       const key = (p.class || "") + "|" + (p.cell || "") + "|" + (p.s57 || "") + "|" + (p.objnam || "");
       const g = groups.get(key);