@bicharts/chart-host 0.6.112 → 0.6.115

package/dist/{chunk-TE54AFRN.mjs → chunk-7K3F3RZ6.mjs}

@@ -4,11 +4,11 @@ import {
   claimParkedLasso,
   installLasso,
   lassoEffect
-} from "./chunk-IL5M7K6Z.mjs";
+} from "./chunk-CVTCR7HQ.mjs";
 import {
   censusHitBands,
   ensureCrossfilterHitTargets
-} from "./chunk-AEO5SFEQ.mjs";
+} from "./chunk-YOCYWON4.mjs";
 import {
   clearPress,
   clearSelectionGlyphs,
@@ -24,26 +24,26 @@ import {
   selectionRuleOf,
   trackPress,
   validRowSet
-} from "./chunk-KGVNZR23.mjs";
+} from "./chunk-PQKLWYKK.mjs";
 import {
   clipWindowOf,
   fitRenderedChart,
   rememberScroll,
   takeScroll,
   unpinScrolledAxis
-} from "./chunk-7XT5OJ6M.mjs";
+} from "./chunk-AQO4ROMU.mjs";
 import {
   geoFromCache
 } from "./chunk-5YSZABCS.mjs";
 import {
   Fn,
+  Or,
   Q,
   Rt,
   Yn,
-  _r,
   tt,
   xt
-} from "./chunk-FIG5DIW7.mjs";
+} from "./chunk-VPFP35XI.mjs";
 import {
   ACTIVE_TICK_CLASS,
   ANIM_LOOP_DELAY_DEFAULT,
@@ -88,7 +88,7 @@ import {
   XFILTER_REFRESH_EVENT,
   chartOwnsTimeline,
   periodTickSuppressesFeedback
-} from "./chunk-KY4FI2HA.mjs";
+} from "./chunk-GXR7T6G5.mjs";
 
 // src/labelContrast.ts
 function parseRGBA(c) {
@@ -554,6 +554,252 @@ function resolveAutoColorScale(p) {
   return memoValue;
 }
 
+// src/selectionMarker.ts
+var SELECTION_MARKER_DEFAULT = "auto";
+var MAP_SELECTION_MARKER_DEFAULT = "outline";
+function readSelectionMarker(raw) {
+  const v = typeof raw === "string" ? raw.trim().toLowerCase() : "";
+  return v === "none" || v === "dot" || v === "check" || v === "outline" || v === "auto" ? v : SELECTION_MARKER_DEFAULT;
+}
+function readMapSelectionMarker(raw) {
+  const v = typeof raw === "string" ? raw.trim().toLowerCase() : "";
+  return v === "none" || v === "dot" || v === "check" || v === "outline" ? v : MAP_SELECTION_MARKER_DEFAULT;
+}
+var REGION_JOIN_COLUMN = "__geoIso__";
+function isRegionMapData(data) {
+  const cols = data?.columns;
+  if (!Array.isArray(cols)) return false;
+  return cols.some((c) => !!c && c.name === REGION_JOIN_COLUMN);
+}
+var NEUTRAL_CENTRE_RAMP_SELECTOR = '.llm-value-ramp[data-kind="diverging"]';
+function hasNeutralCentreRamp(container) {
+  try {
+    return !!container?.querySelector?.(NEUTRAL_CENTRE_RAMP_SELECTOR);
+  } catch {
+    return false;
+  }
+}
+function selectionMarkerFor(facts) {
+  if (facts.regionMap) return readMapSelectionMarker(facts.mapChoice);
+  const c = readSelectionMarker(facts.choice);
+  if (c !== "auto") return c;
+  return facts.neutralCentreRamp ? "outline" : "none";
+}
+var SELECTION_OUTLINE_CLASS = "lch-sel-outline";
+var SVG_NS = "http://www.w3.org/2000/svg";
+var AREA_TAGS = /* @__PURE__ */ new Set(["path", "rect", "polygon"]);
+var UNFILLED = /^(none|transparent|rgba\([^)]*,\s*0(\.0+)?\s*\))$/i;
+function isAreaMark(el) {
+  const tag = (el.localName || el.tagName || "").toLowerCase();
+  if (!AREA_TAGS.has(tag)) return false;
+  let fill = "", fillOpacity = "";
+  try {
+    const cs = el.ownerDocument?.defaultView?.getComputedStyle?.(el);
+    fill = (cs?.fill || "").trim();
+    fillOpacity = (cs?.fillOpacity || "").trim();
+  } catch {
+  }
+  const style = el.style;
+  if (!fill) fill = (style?.fill || el.getAttribute("fill") || "").trim();
+  if (!fillOpacity) fillOpacity = (style?.fillOpacity || el.getAttribute("fill-opacity") || "").trim();
+  if (fill && UNFILLED.test(fill)) return false;
+  if (fillOpacity !== "" && parseFloat(fillOpacity) === 0) return false;
+  return true;
+}
+function collectOutlineMarks(container, filter) {
+  const picked = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (el) => {
+    if (seen.has(el)) return;
+    seen.add(el);
+    if (isAreaMark(el)) picked.push(el);
+  };
+  for (const m of Array.from(container.querySelectorAll(`.${MARK_CLASS}.${MARK_SELECTED_CLASS}`))) {
+    if (filter?.shown && !filter.shown(m)) continue;
+    if ((m.localName || "").toLowerCase() === "g") {
+      for (const s of Array.from(m.querySelectorAll("path, rect, polygon"))) add(s);
+    } else add(m);
+  }
+  if (picked.length < 2 || picked.length > 300) return picked;
+  const EPS2 = 1;
+  const rects = picked.map((m) => {
+    try {
+      return m.getBoundingClientRect();
+    } catch {
+      return null;
+    }
+  });
+  return picked.filter((_, i) => {
+    const c = rects[i];
+    if (!c) return true;
+    const cArea = c.width * c.height;
+    if (!(cArea > 0)) return true;
+    for (let j = 0; j < rects.length; j++) {
+      const r = rects[j];
+      if (j === i || !r) continue;
+      const a = r.width * r.height;
+      if (!(a > 0) || a >= cArea) continue;
+      if (r.left >= c.left - EPS2 && r.right <= c.right + EPS2 && r.top >= c.top - EPS2 && r.bottom <= c.bottom + EPS2) return false;
+    }
+    return true;
+  });
+}
+function outlineWindowOf(mark, stop) {
+  let acc = null;
+  const narrow = (w) => {
+    if (!w) return;
+    acc = acc ? {
+      left: Math.max(acc.left, w.left),
+      top: Math.max(acc.top, w.top),
+      right: Math.min(acc.right, w.right),
+      bottom: Math.min(acc.bottom, w.bottom)
+    } : { ...w };
+  };
+  for (let el = mark; el && el !== stop; el = el.parentElement) {
+    try {
+      if ((el.localName || "").toLowerCase() === "svg") {
+        const r = el.getBoundingClientRect();
+        if (r.width > 0 && r.height > 0) narrow({ left: r.left, top: r.top, right: r.right, bottom: r.bottom });
+      } else if (el.hasAttribute?.("clip-path")) narrow(clipWindowOf(el));
+    } catch {
+    }
+  }
+  return acc;
+}
+function controlBoxesIn(root, opts = {}) {
+  const pad = opts.pad ?? 2, join = opts.join ?? 4;
+  let boxes = [];
+  try {
+    for (const el of Array.from(root?.querySelectorAll?.(`.${CONTROL_CLASS}`) ?? [])) {
+      const r = el.getBoundingClientRect();
+      if (!(r.width > 0) || !(r.height > 0)) continue;
+      boxes.push({ left: r.left - pad, top: r.top - pad, right: r.right + pad, bottom: r.bottom + pad });
+    }
+  } catch {
+    return [];
+  }
+  const near = (a, b) => a.left - join <= b.right && b.left - join <= a.right && a.top - join <= b.bottom && b.top - join <= a.bottom;
+  let merged = true;
+  while (merged) {
+    merged = false;
+    const out = [];
+    for (const b of boxes) {
+      const hit = out.find((o) => near(o, b));
+      if (hit) {
+        hit.left = Math.min(hit.left, b.left);
+        hit.top = Math.min(hit.top, b.top);
+        hit.right = Math.max(hit.right, b.right);
+        hit.bottom = Math.max(hit.bottom, b.bottom);
+        merged = true;
+      } else out.push({ ...b });
+    }
+    boxes = out;
+  }
+  return boxes;
+}
+function copyGeometry(doc, el) {
+  const tag = (el.localName || "").toLowerCase();
+  const keep = tag === "path" ? ["d"] : tag === "rect" ? ["x", "y", "width", "height", "rx", "ry"] : tag === "polygon" ? ["points"] : null;
+  if (!keep) return null;
+  const out = doc.createElementNS(SVG_NS, tag);
+  let any = false;
+  for (const a of keep) {
+    const v = el.getAttribute(a);
+    if (v != null && v !== "") {
+      out.setAttribute(a, v);
+      any = true;
+    }
+  }
+  return any ? out : null;
+}
+var num = (n) => String(Math.round(n * 1e3) / 1e3);
+var maskSeq = 0;
+function paintSelectionOutlines(overlay, marks, style) {
+  const doc = overlay.ownerDocument;
+  const base = overlay.getBoundingClientRect();
+  const width = style.width ?? 2;
+  const windowOf = style.windowOf ?? ((m) => outlineWindowOf(m));
+  const root = doc.createElementNS(SVG_NS, "svg");
+  root.setAttribute("class", SELECTION_OUTLINE_CLASS);
+  root.setAttribute("aria-hidden", "true");
+  root.setAttribute("focusable", "false");
+  root.setAttribute("style", "position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none");
+  let host = root;
+  const holes = (style.avoid ?? []).filter((b) => b.right > b.left && b.bottom > b.top);
+  if (holes.length) {
+    const id = `${SELECTION_OUTLINE_CLASS}-mask-${++maskSeq}`;
+    const defs = doc.createElementNS(SVG_NS, "defs");
+    const mask = doc.createElementNS(SVG_NS, "mask");
+    mask.setAttribute("id", id);
+    mask.setAttribute("maskUnits", "userSpaceOnUse");
+    const BIG = 1e5;
+    for (const [k, v] of [["x", -BIG], ["y", -BIG], ["width", 2 * BIG], ["height", 2 * BIG]]) mask.setAttribute(k, String(v));
+    const open = doc.createElementNS(SVG_NS, "rect");
+    for (const [k, v] of [["x", -BIG], ["y", -BIG], ["width", 2 * BIG], ["height", 2 * BIG]]) open.setAttribute(k, String(v));
+    open.setAttribute("fill", "#fff");
+    mask.appendChild(open);
+    for (const b of holes) {
+      const r = doc.createElementNS(SVG_NS, "rect");
+      r.setAttribute("class", `${SELECTION_OUTLINE_CLASS}-hole`);
+      r.setAttribute("x", num(b.left - base.left));
+      r.setAttribute("y", num(b.top - base.top));
+      r.setAttribute("width", num(b.right - b.left));
+      r.setAttribute("height", num(b.bottom - b.top));
+      r.setAttribute("fill", "#000");
+      mask.appendChild(r);
+    }
+    defs.appendChild(mask);
+    root.appendChild(defs);
+    host = doc.createElementNS(SVG_NS, "g");
+    host.setAttribute("mask", `url(#${id})`);
+    root.appendChild(host);
+  }
+  let drawn = 0;
+  const max = style.max ?? 600;
+  for (const m of marks) {
+    if (drawn >= max) break;
+    let ctm = null;
+    try {
+      ctm = m.getScreenCTM?.() ?? null;
+    } catch {
+      ctm = null;
+    }
+    if (!ctm) continue;
+    const shape = copyGeometry(doc, m);
+    if (!shape) continue;
+    let parent = host;
+    let ox = base.left, oy = base.top;
+    const w = windowOf(m);
+    if (w) {
+      if (!(w.right > w.left) || !(w.bottom > w.top)) continue;
+      const v = doc.createElementNS(SVG_NS, "svg");
+      v.setAttribute("x", num(w.left - base.left));
+      v.setAttribute("y", num(w.top - base.top));
+      v.setAttribute("width", num(w.right - w.left));
+      v.setAttribute("height", num(w.bottom - w.top));
+      v.setAttribute("overflow", "hidden");
+      host.appendChild(v);
+      parent = v;
+      ox = w.left;
+      oy = w.top;
+    }
+    const transform = `matrix(${num(ctm.a)} ${num(ctm.b)} ${num(ctm.c)} ${num(ctm.d)} ${num(ctm.e - ox)} ${num(ctm.f - oy)})`;
+    for (const [stroke, sw] of [[style.halo, width + 2], [style.color, width]]) {
+      const p = shape.cloneNode(false);
+      p.setAttribute("transform", transform);
+      p.setAttribute("fill", "none");
+      p.setAttribute("stroke", stroke);
+      p.setAttribute("stroke-width", String(sw));
+      p.setAttribute("stroke-linejoin", "round");
+      p.setAttribute("vector-effect", "non-scaling-stroke");
+      parent.appendChild(p);
+    }
+    drawn++;
+  }
+  if (drawn > 0) overlay.appendChild(root);
+  return drawn;
+}
+
 // src/exportTable.ts
 var EXPORT_FORMATS = Object.freeze(["xlsx", "csv"]);
 var XLSX_MIME = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
@@ -1169,12 +1415,20 @@ function resolveOptions(p) {
       const n = typeof v === "number" ? v : typeof v === "string" && v.trim() !== "" ? Number(v) : NaN;
       return Number.isFinite(n) ? clamp(n, DIM_OPACITY_MIN, 1) : void 0;
     })(),
-    // A recognised glyph or none: an unknown string must never reach the painter as a live mode, and "none" is
-    // undefined rather than a value, so a host that passes nothing and one that passes "none" resolve alike.
+    // A recognised marker or nothing: an unknown string must never reach the painter as a live mode. "none" and
+    // "auto" read undefined here, as a host that passes nothing does; what tells them apart is selectionMarker.
     selectionGlyph: (() => {
       const v = (p.selectionGlyph == null ? "" : String(p.selectionGlyph)).toLowerCase();
-      return v === "dot" || v === "check" ? v : void 0;
+      return v === "dot" || v === "check" || v === "outline" ? v : void 0;
+    })(),
+    // THE WHOLE CHOICE: absent, unknown and "auto" are the default ("auto"), and "none" is a reader's None. The map's
+    // choice beside it, its default "outline" when it made none.
+    selectionMarker: readSelectionMarker(p.selectionGlyph),
+    mapSelectionGlyph: (() => {
+      const v = (p.mapSelectionGlyph == null ? "" : String(p.mapSelectionGlyph)).toLowerCase();
+      return v === "none" || v === "dot" || v === "check" || v === "outline" ? v : void 0;
     })(),
+    mapSelectionMarker: readMapSelectionMarker(p.mapSelectionGlyph),
     // A host FACT from the generate answer, true only for a literal true: silence never suppresses anything.
     suppressSelectionGlyph: p.suppressSelectionGlyph === true ? true : void 0,
     // A host FACT (1.22.0): the chart works from the keyboard. True only for a literal true, like the one above.
@@ -1319,7 +1573,7 @@ function resolvePointChannel(cols, rowObjs, point) {
   let labelCol;
   if (bind) {
     const dims = cols.filter((c) => !c.isMeasure).map((c) => c.name);
-    const res = _r(dims, rowObjs, bind, point?.mapKind, cols.map((c) => c.name));
+    const res = Or(dims, rowObjs, bind, point?.mapKind, cols.map((c) => c.name));
     bind = res.bind;
     rolesBackfilled = res.backfilled;
     rolesRefused = res.refused;
@@ -1634,6 +1888,93 @@ function stripJsComments(code) {
   return out;
 }
 
+// src/markFollower.ts
+var MARK_MOVE_ATTRIBUTES = Object.freeze([
+  "transform",
+  "d",
+  "x",
+  "y",
+  "cx",
+  "cy",
+  "points",
+  "width",
+  "height",
+  "visibility",
+  "opacity",
+  "style",
+  "class"
+]);
+function followMarks(container, opts) {
+  const win = opts.win ?? container.ownerDocument?.defaultView ?? null;
+  let observer = null;
+  let resize = null;
+  let size = "";
+  let queued = false;
+  let queuedResize = false;
+  const sizeOf = () => `${container.offsetWidth ?? 0}x${container.offsetHeight ?? 0}`;
+  const movesAMark = (r) => {
+    const t = r.target;
+    if (!t || opts.blind && t.closest?.(opts.blind)) return false;
+    return !!(t.classList?.contains(MARK_CLASS) || t.querySelector?.(`.${MARK_CLASS}`));
+  };
+  const queue = (resized) => {
+    if (resized) queuedResize = true;
+    if (queued) return;
+    queued = true;
+    const run = () => {
+      const r = queuedResize;
+      queued = false;
+      queuedResize = false;
+      if (observer || resize) {
+        try {
+          opts.repaint(r);
+        } catch {
+        }
+      }
+    };
+    if (win?.requestAnimationFrame) win.requestAnimationFrame(run);
+    else setTimeout(run, 16);
+  };
+  return {
+    follow(on) {
+      if (!on) {
+        if (observer) {
+          observer.disconnect();
+          observer = null;
+        }
+        if (resize) {
+          resize.disconnect();
+          resize = null;
+        }
+        return;
+      }
+      const MO = win?.MutationObserver;
+      if (!observer && MO) {
+        observer = new MO((records) => {
+          if (!queued && records.some(movesAMark)) queue(false);
+        });
+        observer.observe(container, { subtree: true, attributes: true, attributeFilter: [...MARK_MOVE_ATTRIBUTES] });
+      }
+      const RO = win?.ResizeObserver;
+      if (!resize && RO) {
+        resize = new RO(() => {
+          if (sizeOf() !== size) queue(true);
+        });
+        resize.observe(container);
+      }
+    },
+    painted() {
+      size = sizeOf();
+    },
+    takeRecords() {
+      observer?.takeRecords();
+    },
+    get following() {
+      return !!(observer || resize);
+    }
+  };
+}
+
 // src/blankRender.ts
 var EMPTY2 = { markCount: 0, legendMarkCount: 0, containerKind: "empty", declaresNoRowMarks: false };
 function censusMarks(container) {
@@ -1722,7 +2063,7 @@ var FIT_SAMPLE = 90;
 var VALUE_AXIS_MIN_FIT = 0.8;
 var MIN_AXIS_SPAN_PX = 40;
 var EMPTY3 = { marks: 0, axis: "", column: "", fit: 0, offShare: 0, medianOffRadii: 0 };
-function num(el, name) {
+function num2(el, name) {
   const v = el.getAttribute?.(name);
   if (v === null || v === void 0 || String(v).trim() === "") return NaN;
   return parseFloat(String(v));
@@ -1767,7 +2108,7 @@ function censusValuePlacement(container, data) {
       if (!/^\d+$/.test(raw)) continue;
       const i = +raw;
       const row = rows[i];
-      const x = num(el, "cx"), y = num(el, "cy"), r = num(el, "r");
+      const x = num2(el, "cx"), y = num2(el, "cy"), r = num2(el, "r");
       if (!row || !Number.isFinite(x) || !Number.isFinite(y) || !(r > 0)) continue;
       seen.add(i);
       dots.push({ row, x, y, r });
@@ -1929,11 +2270,11 @@ function extendPillOver(pill, tr) {
     const inv = m.inverse();
     const toUser = (x2, y2) => ({ x: inv.a * x2 + inv.c * y2 + inv.e, y: inv.b * x2 + inv.d * y2 + inv.f });
     const a = toUser(tr.left, tr.top), b = toUser(tr.right, tr.bottom);
-    const num2 = (k) => {
+    const num3 = (k) => {
       const v = parseFloat(pill.getAttribute(k) || "");
       return isFinite(v) ? v : NaN;
     };
-    const x = num2("x"), y = num2("y"), w = num2("width"), h = num2("height");
+    const x = num3("x"), y = num3("y"), w = num3("width"), h = num3("height");
     if (![x, y, w, h].every((v) => isFinite(v)) || !(w > 0) || !(h > 0)) return false;
     const pad = 1 / m.a;
     const x0 = Math.min(x, Math.min(a.x, b.x) - pad), x1 = Math.max(x + w, Math.max(a.x, b.x) + pad);
@@ -2340,10 +2681,10 @@ function seenRight(el, right, stop) {
   }
   return right;
 }
-var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_NS2 = "http://www.w3.org/2000/svg";
 function overflowWindowOf(el) {
   const win = el.ownerDocument.defaultView;
-  if (!win || el.namespaceURI === SVG_NS) return null;
+  if (!win || el.namespaceURI === SVG_NS2) return null;
   try {
     const o = win.getComputedStyle(el);
     const clips = (v) => !!v && v !== "visible";
@@ -2426,17 +2767,22 @@ function createAnnotationLayer(container, onClick, opts) {
     const names = (data.columns || []).map((c) => typeof c === "string" ? c : c?.name);
     const marks = Array.from(container.querySelectorAll(`.${MARK_CLASS}[${ROW_IDX_ATTR}]`)).filter((m) => !m.closest(`.${ANNOTATION_LAYER_CLASS}`));
     const marksByRow = /* @__PURE__ */ new Map();
-    for (const m of marks) for (const r of parseIdxs(m.getAttribute(ROW_IDX_ATTR))) {
-      const at = marksByRow.get(r);
-      if (at) at.push(m);
-      else marksByRow.set(r, [m]);
+    const rowsOf = /* @__PURE__ */ new Map();
+    for (const m of marks) {
+      const own = new Set(parseIdxs(m.getAttribute(ROW_IDX_ATTR)));
+      rowsOf.set(m, own);
+      for (const r of own) {
+        const at = marksByRow.get(r);
+        if (at) at.push(m);
+        else marksByRow.set(r, [m]);
+      }
     }
     const origin = container.getBoundingClientRect();
     const open = origin.width > 0 && origin.height > 0 ? box(origin) : FREE;
     const clipOf = /* @__PURE__ */ new Map();
     const windowOf = (el) => {
       if (!clipOf.has(el)) {
-        if (el.namespaceURI === SVG_NS) {
+        if (el.namespaceURI === SVG_NS2) {
           const w = clipWindowOf(el);
           clipOf.set(el, w && box(w));
         } else clipOf.set(el, overflowWindowOf(el));
@@ -2451,7 +2797,7 @@ function createAnnotationLayer(container, onClick, opts) {
     const viewOf = (m) => {
       let v = inView;
       for (let el = m.parentElement; v && el && el !== container; el = el.parentElement) {
-        if (el.namespaceURI === SVG_NS && el.localName === "svg") {
+        if (el.namespaceURI === SVG_NS2 && el.localName === "svg") {
           const s = el.getBoundingClientRect();
           if (s.width > 0 && s.height > 0) v = cut(v, box(s));
         }
@@ -2546,16 +2892,31 @@ function createAnnotationLayer(container, onClick, opts) {
     for (const a of list) {
       const pairs = (a.where ? Object.entries(a.where) : a.column != null ? [[a.column, a.value]] : []).map(([c, v]) => [names.indexOf(c), text(v)]);
       const want = pairs.map((p) => p[1]).join(" / ");
-      const hits2 = /* @__PURE__ */ new Set();
+      const hits2 = /* @__PURE__ */ new Set(), keyRows = /* @__PURE__ */ new Set();
       if (pairs.length && pairs.every((p) => p[0] >= 0)) (data.rows || []).forEach((row, r) => {
-        if (pairs.every(([ci, v]) => text(row?.[ci]) === v)) for (const m of marksByRow.get(r) ?? []) hits2.add(m);
+        if (!pairs.every(([ci, v]) => text(row?.[ci]) === v)) return;
+        keyRows.add(r);
+        for (const m of marksByRow.get(r) ?? []) hits2.add(m);
       });
       if (!hits2.size) continue;
-      let best = null, bestWhole = null, bestMark = null, laidOut = false;
+      const rank = (m) => {
+        const own = rowsOf.get(m);
+        let out = 0;
+        for (const r of own) if (!keyRows.has(r)) out++;
+        const level = parseInt(m.getAttribute("aria-level") || "", 10);
+        return [out, out === 0 && own.size === keyRows.size ? 0 : 1, own.size, Number.isFinite(level) ? -level : 0];
+      };
+      const before = (p, q) => p[0] - q[0] || p[1] - q[1] || p[2] - q[2] || p[3] - q[3];
+      const drawn = [];
       for (const m of hits2) {
         const b = m.getBoundingClientRect();
-        if (!(b.width > 0 && b.height > 0)) continue;
-        laidOut = true;
+        if (b.width > 0 && b.height > 0) drawn.push({ m, b, k: rank(m) });
+      }
+      const laidOut = drawn.length > 0;
+      const most = drawn.reduce((k, d) => !k || before(d.k, k) < 0 ? d.k : k, null);
+      let best = null, bestWhole = null, bestMark = null;
+      for (const { m, b, k } of drawn) {
+        if (before(k, most) !== 0) continue;
         const v = cut(box(b), viewOf(m));
         if (v && (!best || area(v) > area(best))) {
           best = v;
@@ -2815,16 +3176,17 @@ function installKeyboard(env) {
   const { container } = env;
   let rovingKey = null;
   let destroyed = false;
-  const marksNow = () => {
-    if (env.inert()) return [];
-    return Array.from(container.querySelectorAll(env.markSelector)).filter((m) => !m.closest(env.skipSelector) && (m.getAttribute("data-row-idx") ?? "") !== "");
-  };
+  const ownRole = /* @__PURE__ */ new WeakSet();
+  const marksNow = () => Array.from(container.querySelectorAll(env.markSelector)).filter((m) => !m.closest(env.skipSelector) && (m.getAttribute("data-row-idx") ?? "") !== "");
   const wired = (el) => el.hasAttribute(WIRED_ATTR);
   const wire = (el, tabindex, role) => {
     if (el.hasAttribute("tabindex") && !wired(el)) return false;
     el.setAttribute(WIRED_ATTR, "");
     el.setAttribute("tabindex", tabindex);
-    if (!el.hasAttribute("role")) el.setAttribute("role", role);
+    if (!el.hasAttribute("role") || ownRole.has(el)) {
+      el.setAttribute("role", role);
+      ownRole.add(el);
+    }
     return true;
   };
   const setRoving = (list, to) => {
@@ -2835,22 +3197,17 @@ function installKeyboard(env) {
     if (destroyed) return;
     try {
       container.classList?.add(KEYBOARD_CLASS);
+      const inert = env.inert();
       const list = marksNow();
       for (const m of list) {
-        if (!wire(m, "-1", "button")) continue;
-        m.setAttribute("aria-pressed", env.isSelected(m) ? "true" : "false");
+        if (!wire(m, "-1", inert ? "img" : "button")) continue;
+        if (inert) m.removeAttribute("aria-pressed");
+        else m.setAttribute("aria-pressed", env.isSelected(m) ? "true" : "false");
         if (!m.hasAttribute("aria-label") && !m.querySelector(":scope > title")) {
           const name = env.labelOf(m);
           if (name) m.setAttribute("aria-label", name);
         }
       }
-      if (!list.length) {
-        for (const m of Array.from(container.querySelectorAll(`[${WIRED_ATTR}]`)))
-          if (m.matches(env.markSelector)) {
-            m.removeAttribute("tabindex");
-            m.removeAttribute(WIRED_ATTR);
-          }
-      }
       const own = list.filter(wired);
       if (own.length) {
         const keep = own.find((m) => env.keyOf(m) === rovingKey) ?? own.find((m) => env.isSelected(m)) ?? own[0];
@@ -2879,7 +3236,7 @@ function installKeyboard(env) {
         e.preventDefault();
         const ME = container.ownerDocument.defaultView?.MouseEvent ?? MouseEvent;
         press.dispatchEvent(new ME("click", { bubbles: true, cancelable: true }));
-      } else if (k === "Escape" && env.escapeClears !== false) env.clear();
+      } else if (k === "Escape" && env.escapeClears !== false && !env.inert()) env.clear();
       return;
     }
     const mark = t.closest?.(env.markSelector);
@@ -2921,9 +3278,10 @@ function installKeyboard(env) {
         rovingKey = env.keyOf(mark);
         env.select(mark, { ctrl: !!(e.ctrlKey || e.metaKey), shift: !!e.shiftKey });
         break;
+      // An inert chart's click on empty canvas clears nothing, so neither does its Escape.
       case "Escape":
         hideTip();
-        if (env.escapeClears !== false) env.clear();
+        if (env.escapeClears !== false && !env.inert()) env.clear();
         break;
     }
   };
@@ -3399,77 +3757,13 @@ function createChartHost(container, config) {
   };
   const GLYPH_LAYER_CLASS = "bic-selection-glyphs";
   let glyphPositionWas = null;
-  let glyphObserver = null;
-  let glyphResize = null;
-  let glyphSize = "";
-  let glyphQueued = false;
-  let glyphQueuedReport = false;
+  const glyphFollower = followMarks(container, {
+    win,
+    blind: `.${GLYPH_LAYER_CLASS}, .${LASSO_OUTLINE_CLASS}`,
+    repaint: (resized) => paintGlyphLayer(resized ? "if-changed" : false)
+  });
   let glyphReported = "";
-  const sizeOfContainer = () => `${container.offsetWidth ?? 0}x${container.offsetHeight ?? 0}`;
-  const glyphBlind = `.${GLYPH_LAYER_CLASS}, .${LASSO_OUTLINE_CLASS}`;
-  const movesAMark = (r) => {
-    const t = r.target;
-    if (!t || t.closest?.(glyphBlind)) return false;
-    return !!(t.classList?.contains(MARK_CLASS) || t.querySelector?.(`.${MARK_CLASS}`));
-  };
-  const queueGlyphs = (reportIfChanged) => {
-    if (reportIfChanged) glyphQueuedReport = true;
-    if (glyphQueued) return;
-    glyphQueued = true;
-    const run = () => {
-      const r = glyphQueuedReport;
-      glyphQueued = false;
-      glyphQueuedReport = false;
-      if (glyphObserver || glyphResize) paintGlyphLayer(r ? "if-changed" : false);
-    };
-    if (win?.requestAnimationFrame) win.requestAnimationFrame(run);
-    else setTimeout(run, 16);
-  };
-  const followGlyphs = (on) => {
-    if (!on) {
-      if (glyphObserver) {
-        glyphObserver.disconnect();
-        glyphObserver = null;
-      }
-      if (glyphResize) {
-        glyphResize.disconnect();
-        glyphResize = null;
-      }
-      return;
-    }
-    const MO = win?.MutationObserver;
-    if (!glyphObserver && MO) {
-      glyphObserver = new MO((records) => {
-        if (!glyphQueued && records.some(movesAMark)) queueGlyphs(false);
-      });
-      glyphObserver.observe(container, {
-        subtree: true,
-        attributes: true,
-        attributeFilter: [
-          "transform",
-          "d",
-          "x",
-          "y",
-          "cx",
-          "cy",
-          "points",
-          "width",
-          "height",
-          "visibility",
-          "opacity",
-          "style",
-          "class"
-        ]
-      });
-    }
-    const RO = win?.ResizeObserver;
-    if (!glyphResize && RO) {
-      glyphResize = new RO(() => {
-        if (sizeOfContainer() !== glyphSize) queueGlyphs(true);
-      });
-      glyphResize.observe(container);
-    }
-  };
+  const followGlyphs = (on) => glyphFollower.follow(on);
   const markShown = (m) => {
     try {
       const cv = m.checkVisibility;
@@ -3518,8 +3812,13 @@ function createChartHost(container, config) {
     try {
       let layer = container.querySelector(`:scope > .${GLYPH_LAYER_CLASS}`);
       clearSelectionGlyphs(layer);
-      const mode = resolved.selectionGlyph;
-      if (mode !== "dot" && mode !== "check") {
+      const mode = selectionMarkerFor({
+        choice: resolved.selectionMarker,
+        mapChoice: resolved.mapSelectionMarker,
+        regionMap: isRegionMapData(data),
+        neutralCentreRamp: hasNeutralCentreRamp(container)
+      });
+      if (mode !== "dot" && mode !== "check" && mode !== "outline") {
         glyphReported = "";
         return;
       }
@@ -3567,20 +3866,41 @@ function createChartHost(container, config) {
       const sw = container.scrollWidth || 0, sh = container.scrollHeight || 0;
       layer.style.width = `${sw}px`;
       layer.style.height = `${sh}px`;
-      glyphSize = sizeOfContainer();
-      const centers = [];
-      collectGlyphCentersWhere(container, layer.getBoundingClientRect(), centers, { shown: markShown, at: glyphWindows() });
+      glyphFollower.painted();
       const hc = !!resolved.isHighContrast;
-      const drawn = centers.length ? paintSelectionGlyphs(layer, centers, {
-        symbol: mode === "check" ? "\u2713" : "\u25CF",
-        color: hc ? resolved.themeFg || "#111" : "#111",
-        halo: hc ? resolved.themeBg || "#fff" : "#fff"
-      }) : 0;
-      const said = `${mode}:${drawn}:${centers.length}`;
+      let drawn = 0, total = 0;
+      if (mode === "outline") {
+        const marks = collectOutlineMarks(container, { shown: markShown });
+        total = marks.length;
+        let ink = resolved.themeFg || "";
+        if (!ink) {
+          try {
+            ink = win?.getComputedStyle?.(container)?.color || "";
+          } catch {
+            ink = "";
+          }
+        }
+        drawn = total ? paintSelectionOutlines(layer, marks, {
+          color: ink || "#111",
+          halo: resolved.themeBg || (hc ? "#000" : "#fff"),
+          windowOf: (m) => outlineWindowOf(m, container),
+          avoid: controlBoxesIn(container)
+        }) : 0;
+      } else {
+        const centers = [];
+        collectGlyphCentersWhere(container, layer.getBoundingClientRect(), centers, { shown: markShown, at: glyphWindows() });
+        total = centers.length;
+        drawn = centers.length ? paintSelectionGlyphs(layer, centers, {
+          symbol: mode === "check" ? "\u2713" : "\u25CF",
+          color: hc ? resolved.themeFg || "#111" : "#111",
+          halo: hc ? resolved.themeBg || "#fff" : "#fff"
+        }) : 0;
+      }
+      const said = `${mode}:${drawn}:${total}`;
       if (report === true || report === "if-changed" && said !== glyphReported) {
         glyphReported = said;
         try {
-          config.onSelectionGlyphs?.({ mode, drawn, total: centers.length, suppressed: false });
+          config.onSelectionGlyphs?.({ mode, drawn, total, suppressed: false });
         } catch {
         }
       }
@@ -3588,7 +3908,7 @@ function createChartHost(container, config) {
     } finally {
       try {
         followGlyphs(follow);
-        glyphObserver?.takeRecords();
+        glyphFollower.takeRecords();
       } catch {
       }
     }
@@ -3716,7 +4036,15 @@ function createChartHost(container, config) {
       { ctrl: !!(e?.ctrlKey || e?.metaKey), shift: !!e?.shiftKey }
     ));
     const fromLabel = !!tick && !multi && !toggledOff && !chartOwnsTimeline(container);
-    notify(next, "user", toggledOff ? null : tick, false, true, fromLabel ? { fromLabel: true } : void 0);
+    const fromMark = !tick && !multi && !toggledOff;
+    notify(
+      next,
+      "user",
+      toggledOff ? null : tick,
+      false,
+      true,
+      fromLabel ? { fromLabel: true } : fromMark ? { fromMark: true } : void 0
+    );
   };
   container.addEventListener(XFILTER_REFRESH_EVENT, onXf);
   const untrackPress = trackPress(container);
@@ -4390,6 +4718,21 @@ export {
   autoRampMinStep,
   autoRampCanvas,
   resolveAutoColorScale,
+  SELECTION_MARKER_DEFAULT,
+  MAP_SELECTION_MARKER_DEFAULT,
+  readSelectionMarker,
+  readMapSelectionMarker,
+  REGION_JOIN_COLUMN,
+  isRegionMapData,
+  NEUTRAL_CENTRE_RAMP_SELECTOR,
+  hasNeutralCentreRamp,
+  selectionMarkerFor,
+  SELECTION_OUTLINE_CLASS,
+  isAreaMark,
+  collectOutlineMarks,
+  outlineWindowOf,
+  controlBoxesIn,
+  paintSelectionOutlines,
   EXPORT_FORMATS,
   XLSX_MIME,
   CSV_MIME,
@@ -4409,6 +4752,8 @@ export {
   resolveOptions,
   buildRenderPayload,
   stripJsComments,
+  MARK_MOVE_ATTRIBUTES,
+  followMarks,
   censusMarks,
   isBlankRender,
   blankRenderFlag,