@bicharts/chart-host 0.6.108 → 0.6.110

package/dist/{chunk-MO2GR56D.mjs → chunk-5VQ3IQF7.mjs}

@@ -4,11 +4,11 @@ import {
   claimParkedLasso,
   installLasso,
   lassoEffect
-} from "./chunk-ESBH2L6E.mjs";
+} from "./chunk-IL5M7K6Z.mjs";
 import {
   censusHitBands,
   ensureCrossfilterHitTargets
-} from "./chunk-UKXGOQMS.mjs";
+} from "./chunk-AEO5SFEQ.mjs";
 import {
   clearPress,
   clearSelectionGlyphs,
@@ -25,25 +25,25 @@ import {
   selectionRuleOf,
   trackPress,
   validRowSet
-} from "./chunk-LGWTV5PB.mjs";
+} from "./chunk-KGVNZR23.mjs";
 import {
   clipWindowOf,
   fitRenderedChart,
   rememberScroll,
   takeScroll,
   unpinScrolledAxis
-} from "./chunk-OSREEGBN.mjs";
+} from "./chunk-7XT5OJ6M.mjs";
 import {
   geoFromCache
-} from "./chunk-5WTQN5DL.mjs";
+} from "./chunk-S564YXNE.mjs";
 import {
-  Dt,
   Fn,
   Q,
   Rr,
   Yn,
-  tt
-} from "./chunk-SYUJ4TPX.mjs";
+  tt,
+  xt
+} from "./chunk-NJWR3DFK.mjs";
 import {
   ACTIVE_TICK_CLASS,
   ANIM_LOOP_DELAY_DEFAULT,
@@ -75,6 +75,7 @@ import {
   HOST_CONTRACT_VERSION,
   LEGEND_MARK_CLASS,
   LIFT_SELECTED_CLASS,
+  MARKS_INERT_CLASS,
   MARK_CLASS,
   MARK_SELECTED_CLASS,
   MAX_MAP_POINTS_DEFAULT,
@@ -87,7 +88,7 @@ import {
   XFILTER_REFRESH_EVENT,
   chartOwnsTimeline,
   periodTickSuppressesFeedback
-} from "./chunk-PHUUFCJY.mjs";
+} from "./chunk-KY4FI2HA.mjs";
 
 // src/labelContrast.ts
 function parseRGBA(c) {
@@ -1070,6 +1071,21 @@ function cleanHostSelection(v) {
   }
   return out;
 }
+function cleanFilterScope(v) {
+  if (!v || typeof v !== "object" || !Array.isArray(v.values)) return void 0;
+  const values = [];
+  for (const x of v.values) {
+    if (typeof x !== "string" && typeof x !== "number" && typeof x !== "boolean" && typeof x !== "bigint") continue;
+    const s = String(x).trim();
+    if (s && !values.includes(s)) values.push(s);
+  }
+  if (!values.length) return void 0;
+  const field = typeof v.field === "string" ? v.field.trim() : "";
+  const out = { field, values };
+  const label = typeof v.label === "string" ? v.label.trim() : "";
+  if (label) out.label = label;
+  return out;
+}
 var clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
 var numberOr = (raw, dflt) => {
   const n = raw == null || raw === "" ? NaN : Number(raw);
@@ -1104,6 +1120,8 @@ function resolveOptions(p) {
     rowsFilteredOut: p.rowsFilteredOut,
     // A host FACT about its selection (contract 1.21.0), cleaned, never invented: absent stays absent.
     hostSelection: cleanHostSelection(p.hostSelection),
+    // A host FACT about a filter applied before the rows arrived (contract 1.23.0), cleaned, never invented.
+    filterScope: cleanFilterScope(p.filterScope),
     // Host services (contract 1.18.0): a FUNCTION or nothing, so a junk value never reaches a chart as something
     // it would try to call. Passed through untouched otherwise: the host owns what opening or copying means.
     openUrl: typeof p.openUrl === "function" ? p.openUrl : void 0,
@@ -1159,6 +1177,8 @@ function resolveOptions(p) {
     })(),
     // 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.
+    keyboardMarks: p.keyboardMarks === true ? true : void 0,
     onSelect: p.onSelect,
     // Control gestures (1.10.0). Passed straight through like onSelect: the host owns what a gesture MEANS,
     // and a host that supplies nothing leaves every control behaving exactly as before.
@@ -1309,7 +1329,7 @@ function resolvePointChannel(cols, rowObjs, point) {
   const hasPointBind = !!bind && !!(bind.city || bind.state || bind.zip || bind.country || bind.lat && bind.lon);
   if (hasPointBind) {
     const p = bind;
-    const built = Dt(rowObjs.map((r) => ({
+    const built = xt(rowObjs.map((r) => ({
       lat: p.lat ? r[p.lat] : null,
       lon: p.lon ? r[p.lon] : null,
       city: p.city ? r[p.city] : null,
@@ -2322,7 +2342,7 @@ var DOT = 8;
 var RING = 1.5;
 var DOT_HALF = DOT / 2 + RING;
 var DOT_IN = 8;
-function createAnnotationLayer(container, onClick) {
+function createAnnotationLayer(container, onClick, opts) {
   let list = [];
   let report = { shown: 0, notShown: 0 };
   let last = null;
@@ -2446,7 +2466,7 @@ function createAnnotationLayer(container, onClick) {
       const after = own.filter((t) => t.b.l >= run.r && t.b.b > run.t && t.b.t < run.b).map((t) => t.b.l);
       return { r: Math.min(run.r, seen), y: (run.t + run.b) / 2, next: after.length ? Math.min(...after) : v.r };
     };
-    const clear = (v, len, mark) => {
+    const clear = (v, len, mark, whole = v) => {
       const hw = Math.max(16, len * 6 + 8) / 2, hh = 8, g = 2;
       const cx = (v.l + v.r) / 2, cy = (v.t + v.b) / 2;
       const at = (x, y) => ({ l: x - hw, t: y - hh, r: x + hw, b: y + hh });
@@ -2459,6 +2479,7 @@ function createAnnotationLayer(container, onClick) {
       const tries = [];
       const add = (x, y, px = x, py = y) => tries.push({ x: clampX(x, hw), y: clampY(y, hh), px, py });
       const label = rowLabel(v, mark);
+      if (!label && whole !== v && rowLabel(whole, mark)) return null;
       if (label) {
         const x = label.r + g + hw;
         if (x + hw <= label.next - g || label.next >= v.r) add(x, label.y, Math.min(x, v.r - 1), label.y);
@@ -2523,7 +2544,7 @@ function createAnnotationLayer(container, onClick) {
         }
       }
       const dot = wantsDot(bestMark ?? hits2.values().next().value ?? null);
-      const pt = !best ? null : dot ? dotSpot(best, bestWhole) : clear(best, (a.label ?? "\u2022").length, bestMark);
+      const pt = !best ? null : dot ? dotSpot(best, bestWhole) : clear(best, (a.label ?? "\u2022").length, bestMark, bestWhole ?? best);
       if (laidOut && !pt) continue;
       shown++;
       const badge = doc.createElement("div");
@@ -2564,6 +2585,15 @@ function createAnnotationLayer(container, onClick) {
         e.stopPropagation();
         onClick?.(a);
       });
+      if (opts?.keyboard?.()) {
+        badge.setAttribute("tabindex", "0");
+        badge.addEventListener("keydown", (e) => {
+          if (e.key !== "Enter" && e.key !== " " && e.key !== "Spacebar") return;
+          e.preventDefault();
+          e.stopPropagation();
+          onClick?.(a);
+        });
+      }
       layer.appendChild(badge);
     }
     report = { shown, notShown: list.length - shown };
@@ -2590,6 +2620,235 @@ function createAnnotationLayer(container, onClick) {
   };
 }
 
+// src/focusKeep.ts
+function signatureOf(el) {
+  const a = (n) => el.getAttribute(n) ?? "";
+  const cls = Array.from(el.classList ?? []).filter((c) => !/^lch-|^bic-/.test(c)).sort().join(" ");
+  return [el.localName, a("type"), cls, a("name"), a("placeholder"), a("aria-label"), a("role")].join("|");
+}
+function alike(container, sig) {
+  const tag = sig.split("|", 1)[0];
+  if (!tag) return [];
+  return Array.from(container.querySelectorAll(tag)).filter((e) => signatureOf(e) === sig);
+}
+function rememberFocus(container) {
+  try {
+    const active = container.ownerDocument?.activeElement;
+    if (!active || active === container || !container.contains(active)) return null;
+    const sig = signatureOf(active);
+    const nth = alike(container, sig).indexOf(active);
+    const t = active;
+    let start = null, end = null, dir = null;
+    try {
+      if (typeof t.selectionStart === "number") {
+        start = t.selectionStart;
+        end = t.selectionEnd;
+        dir = t.selectionDirection ?? null;
+      }
+    } catch {
+    }
+    return { sig, nth: Math.max(0, nth), start, end, dir };
+  } catch {
+    return null;
+  }
+}
+function restoreFocus(container, memory) {
+  if (!memory) return false;
+  try {
+    const active = container.ownerDocument?.activeElement;
+    if (active && active !== container && container.contains(active)) return false;
+    const list = alike(container, memory.sig);
+    const el = list[memory.nth] ?? (list.length === 1 ? list[0] : null);
+    if (!el || typeof el.focus !== "function") return false;
+    el.focus({ preventScroll: true });
+    const t = el;
+    if (memory.start != null && typeof t.setSelectionRange === "function") {
+      const len = typeof t.value === "string" ? t.value.length : 0;
+      try {
+        t.setSelectionRange(Math.min(memory.start, len), Math.min(memory.end ?? memory.start, len), memory.dir ?? void 0);
+      } catch {
+      }
+    }
+    return container.ownerDocument?.activeElement === el;
+  } catch {
+    return false;
+  }
+}
+
+// src/keyboardMarks.ts
+var KEYBOARD_STAMP = "// bic:keyboard-marks";
+var STAMP_RE = /^[ \t]*\/\/[ \t]*bic:keyboard-marks\b/;
+var STAMP_HEAD_LINES = 12;
+function codeHasKeyboardStamp(code) {
+  if (typeof code !== "string" || !code) return false;
+  let start = 0;
+  for (let n = 0; n < STAMP_HEAD_LINES && start <= code.length; n++) {
+    const end = code.indexOf("\n", start);
+    const line = code.slice(start, end < 0 ? code.length : end);
+    if (STAMP_RE.test(line)) return true;
+    if (end < 0) break;
+    start = end + 1;
+  }
+  return false;
+}
+var KEYBOARD_CLASS = "lch-keyboard";
+var WIRED_ATTR = "data-lch-kb";
+var isDate = (v) => Object.prototype.toString.call(v) === "[object Date]";
+function rowNameOf(columns, row, culture) {
+  if (!row) return null;
+  const parts = [];
+  (columns || []).forEach((c, i) => {
+    const name = typeof c === "string" ? c : c?.name;
+    const v = row[i];
+    if (parts.length >= 4 || v == null || v === "" || typeof name === "string" && name.startsWith("__")) return;
+    if (isDate(v)) {
+      if (!Number.isNaN(v.getTime())) parts.push(v.toLocaleDateString(culture || void 0));
+      return;
+    }
+    parts.push(typeof v === "number" ? v.toLocaleString(culture || void 0, { maximumFractionDigits: 2 }) : String(v));
+  });
+  return parts.length ? parts.join(", ") : null;
+}
+var isClearChord = (e) => !!e.ctrlKey && !!e.shiftKey && (e.key === "C" || e.key === "c");
+var NATIVE = /* @__PURE__ */ new Set(["input", "select", "textarea", "button", "a"]);
+var isNative = (el) => NATIVE.has((el.localName || "").toLowerCase()) || el.isContentEditable === true;
+var OWN_FOCUS = "input, select, textarea, button, a[href], [role=slider]";
+function isLeafControl(el, pressSelector) {
+  try {
+    return !el.querySelector(pressSelector) && !el.querySelector(OWN_FOCUS);
+  } catch {
+    return true;
+  }
+}
+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 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);
+    return true;
+  };
+  const setRoving = (list, to) => {
+    for (const m of list) if (wired(m)) m.setAttribute("tabindex", m === to ? "0" : "-1");
+    rovingKey = env.keyOf(to);
+  };
+  const refresh = () => {
+    if (destroyed) return;
+    try {
+      container.classList?.add(KEYBOARD_CLASS);
+      const list = marksNow();
+      for (const m of list) {
+        if (!wire(m, "-1", "button")) continue;
+        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];
+        setRoving(own, keep);
+      }
+      for (const c of Array.from(container.querySelectorAll(env.pressSelector))) {
+        if (isNative(c) || !isLeafControl(c, env.pressSelector)) continue;
+        wire(c, "0", "button");
+      }
+    } catch {
+    }
+  };
+  const onKey = (e) => {
+    if (destroyed || e.defaultPrevented) return;
+    const t = e.target;
+    if (!t || !container.contains(t)) return;
+    const k = e.key;
+    if (isClearChord(e)) {
+      e.preventDefault();
+      env.clear();
+      return;
+    }
+    const press = t.closest?.(env.pressSelector);
+    if (press && wired(press) && container.contains(press)) {
+      if (k === "Enter" || k === " " || k === "Spacebar") {
+        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();
+      return;
+    }
+    const mark = t.closest?.(env.markSelector);
+    if (!mark || !wired(mark) || !container.contains(mark)) return;
+    const list = marksNow().filter(wired);
+    const at = list.indexOf(mark);
+    const go = (i) => {
+      const to = list[Math.max(0, Math.min(list.length - 1, i))];
+      if (!to) return;
+      setRoving(list, to);
+      try {
+        to.focus({ preventScroll: false });
+      } catch {
+      }
+    };
+    switch (k) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault();
+        go(at + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault();
+        go(at - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        go(0);
+        break;
+      case "End":
+        e.preventDefault();
+        go(list.length - 1);
+        break;
+      case "Enter":
+      case " ":
+      case "Spacebar":
+        e.preventDefault();
+        rovingKey = env.keyOf(mark);
+        env.select(mark, { ctrl: !!(e.ctrlKey || e.metaKey), shift: !!e.shiftKey });
+        break;
+      case "Escape":
+        if (env.escapeClears !== false) env.clear();
+        break;
+    }
+  };
+  container.addEventListener("keydown", onKey);
+  return {
+    refresh,
+    destroy() {
+      destroyed = true;
+      container.removeEventListener("keydown", onKey);
+      try {
+        container.classList?.remove(KEYBOARD_CLASS);
+      } catch {
+      }
+    }
+  };
+}
+
 // src/host.ts
 function sessionViewStateProvider(container) {
   const holder = container;
@@ -2738,6 +2997,9 @@ function createChartHost(container, config) {
     }
   }
   let lassoClaimed = false;
+  let ownBag = null;
+  const seedKey = (s) => s && typeof s === "object" ? JSON.stringify(s) : void 0;
+  let lastSeed = seedKey(raw.uiState);
   if (typeof raw.setUiState !== "function") {
     const provider = config.viewState ?? sessionViewStateProvider(container);
     let bag;
@@ -2751,6 +3013,7 @@ function createChartHost(container, config) {
     if (raw.uiState && typeof raw.uiState === "object" && Object.keys(bag).length === 0)
       Object.assign(bag, raw.uiState);
     raw.uiState = bag;
+    ownBag = { bag, provider };
     raw.setUiState = (s) => {
       if (!s || typeof s !== "object") return;
       try {
@@ -2759,6 +3022,26 @@ function createChartHost(container, config) {
       }
     };
   }
+  const takeSeed = (partial) => {
+    if (typeof partial.setUiState === "function") {
+      ownBag = null;
+      return partial;
+    }
+    if (!ownBag || !("uiState" in partial)) return partial;
+    const { uiState: seed, ...rest } = partial;
+    const key = seedKey(seed);
+    if (key !== void 0 && key !== lastSeed) {
+      lastSeed = key;
+      const { bag, provider } = ownBag;
+      for (const k of Object.keys(bag)) delete bag[k];
+      Object.assign(bag, seed);
+      try {
+        provider.save({ ...bag });
+      } catch {
+      }
+    }
+    return rest;
+  };
   const resolveForHost = (input) => {
     const out = resolveOptions(input);
     return out.allowTooltips == null ? { ...out, allowTooltips: true } : out;
@@ -2773,7 +3056,9 @@ function createChartHost(container, config) {
   let warnedLassoNoFilter = false;
   const idScope = newIdScope();
   let renderSeq = 0;
-  const annotationLayer = createAnnotationLayer(container, (a) => config.onAnnotationClick?.(a));
+  const keyboardOn = codeHasKeyboardStamp(config.code);
+  let keyboard = null;
+  const annotationLayer = createAnnotationLayer(container, (a) => config.onAnnotationClick?.(a), { keyboard: () => keyboardOn });
   const drawAnnotations = () => annotationLayer.draw(
     { columns: data.columns, rows: data.rows },
     {
@@ -2809,6 +3094,8 @@ function createChartHost(container, config) {
   let selectionIsPeriod = false;
   let selectionFromChart = false;
   let selectionPublished = true;
+  let publishedRows = [];
+  let publishedFromChart = false;
   const clickedMarks = () => container[CONTAINER_SLOT_CLICKED_MARKS] ?? null;
   const setClickedMarks = (c) => {
     try {
@@ -2857,7 +3144,18 @@ function createChartHost(container, config) {
    anomaly badge, a highlight stroke) and must keep dimming with its datum. */
 .${HOST_CONTAINER_CLASS} .${MARK_CLASS} { cursor: pointer; transition: opacity 120ms ease-in-out, filter 100ms ease-in-out; }
 .${HOST_CONTAINER_CLASS} .${MARK_CLASS}:not([${ROW_IDX_ATTR}=""]):hover { filter: brightness(1.1) drop-shadow(0 0 1.5px rgba(0,0,0,0.5)) !important; }
-.${HOST_CONTAINER_CLASS}:has(.${MARK_CLASS}:not([${ROW_IDX_ATTR}=""]):hover) .${MARK_CLASS}:not(:hover):not([${ROW_IDX_ATTR}=""]) { opacity: 0.55; }
+.${HOST_CONTAINER_CLASS}:not(.${MARKS_INERT_CLASS}):has(.${MARK_CLASS}:not([${ROW_IDX_ATTR}=""]):hover) .${MARK_CLASS}:not(:hover):not([${ROW_IDX_ATTR}=""]) { opacity: 0.55; }
+/* A MARK THAT SELECTS NOTHING DOESN'T LOOK CLICKABLE: no pointer, over the inline cursor generated code
+   sets on its marks, and no dimming of the others on hover (the rule above). A control the chart draws keeps its own. */
+.${HOST_CONTAINER_CLASS}.${MARKS_INERT_CLASS} .${MARK_CLASS} { cursor: default !important; }
+/* THE KEYBOARD'S FOCUS: a ring on the mark, control or badge that holds keyboard focus, in the colour the
+   chart's text is drawn in, so it reads in either theme. A pointer's focus shows none. */
+.${HOST_CONTAINER_CLASS}.${KEYBOARD_CLASS} [${WIRED_ATTR}]:focus:not(:focus-visible) { outline: none; }
+.${HOST_CONTAINER_CLASS}.${KEYBOARD_CLASS} [${WIRED_ATTR}]:focus-visible,
+.${HOST_CONTAINER_CLASS} .bic-annotation:focus-visible { outline: 2px solid var(--lch-focus-ring, currentColor) !important; outline-offset: 2px; }
+/* A dimmed mark that takes keyboard focus is drawn at full strength while it has it, ring included: the dim would
+   otherwise fade the ring with the mark. */
+.${HOST_CONTAINER_CLASS}.${KEYBOARD_CLASS}.${SELECTION_ACTIVE_CLASS} .${MARK_CLASS}[${WIRED_ATTR}]:focus-visible:not(.${MARK_SELECTED_CLASS}) { opacity: 1 !important; }
 .${HOST_CONTAINER_CLASS}.${SELECTION_ACTIVE_CLASS} .${MARK_CLASS}:not(.${MARK_SELECTED_CLASS}):not([${ROW_IDX_ATTR}=""]) {
     opacity: var(${DIM_OPACITY_VAR}, ${DIM_OPACITY_DEFAULT}) !important;
 }
@@ -2890,9 +3188,18 @@ function createChartHost(container, config) {
     } catch {
     }
   };
+  const marksInert = () => {
+    if (typeof config.marksSelect !== "function") return false;
+    try {
+      return config.marksSelect() === false;
+    } catch {
+      return false;
+    }
+  };
   const paintSelection = () => {
     if (destroyed) return;
     try {
+      container.classList?.[marksInert() ? "add" : "remove"](MARKS_INERT_CLASS);
       const sel = current;
       const active = !!sel && sel.length > 0;
       const dim = active && !selectionIsPeriod;
@@ -3155,12 +3462,17 @@ function createChartHost(container, config) {
     current = rowIdxs;
     selectionFromChart = rowIdxs.length > 0 && fromChart;
     selectionPublished = publish;
+    if (publish) {
+      publishedRows = rowIdxs;
+      publishedFromChart = selectionFromChart;
+    }
     activeTickEl = rowIdxs.length ? tick ?? null : null;
     selectionIsPeriod = rowIdxs.length > 0 && periodTickSuppressesFeedback(!!tick, chartOwnsTimeline(container));
     if (!rowIdxs.length && !meta?.keepHidden) hiddenHeld = 0;
     factFresh = true;
     paintSelection();
     paintGlyphLayer();
+    keyboard?.refresh();
     if (publish) for (const cb of subs) {
       try {
         cb(rowIdxs, source, meta);
@@ -3169,6 +3481,10 @@ function createChartHost(container, config) {
     }
     tellSelection();
   };
+  const restorePublished = (source) => {
+    notify(publishedRows, source, void 0, publishedFromChart, false);
+    selectionPublished = true;
+  };
   const selectFromLasso = (rows) => {
     if (lassoEffect(resolved.lasso) === "highlight") {
       notify(rows, "user", null, true, false);
@@ -3195,7 +3511,10 @@ function createChartHost(container, config) {
   const onXf = (e) => {
     const d = e?.detail || {};
     xfAt = Date.now();
-    if (d.clear) notify([], d.source || "chart", void 0, false, selectionPublished || !(current && current.length));
+    if (d.clear) {
+      if (!selectionPublished && current && current.length) restorePublished(d.source || "chart");
+      else notify([], d.source || "chart", void 0, false, true);
+    } else if (marksInert()) return;
     else if (d.mark) notify(parseRowIdxs(d.mark.getAttribute?.(ROW_IDX_ATTR)), d.source || "chart", d.mark, true);
     else if (Array.isArray(d.rows)) notify(validRowSet(d.rows), d.source || "chart", null, true, true, d.keepHidden === true ? { keepHidden: true } : void 0);
   };
@@ -3207,6 +3526,7 @@ function createChartHost(container, config) {
   });
   const clearFromGesture = () => {
     if (current && current.length) {
+      const clearingHighlight = !selectionPublished;
       const slot = container[CONTAINER_SLOT_XF_CLEAR];
       if (selectionFromChart && typeof slot === "function") {
         try {
@@ -3214,7 +3534,9 @@ function createChartHost(container, config) {
         } catch {
         }
       }
-      if (current && current.length) notify([], "user", void 0, false, selectionPublished);
+      if (clearingHighlight) {
+        if (!selectionPublished) restorePublished("user");
+      } else if (current && current.length) notify([], "user", void 0, false, true);
     }
   };
   let lasso = null;
@@ -3231,6 +3553,9 @@ function createChartHost(container, config) {
     const wasDrag = clickWasDrag(container, e);
     clearPress(container);
     if (wasDrag) return;
+    const inert = marksInert();
+    container.classList?.[inert ? "add" : "remove"](MARKS_INERT_CLASS);
+    if (inert) return;
     if (Date.now() - xfAt < XF_ECHO_MS) return;
     if (isInsideControl(e?.target, container)) return;
     let el = resolver.findMark(e?.target, clickSel, e);
@@ -3244,11 +3569,12 @@ function createChartHost(container, config) {
     if (!rows.length) return;
     const tick = el.classList?.contains?.(AXIS_FILTER_CLASS) ? el : null;
     const multi = !!(e?.ctrlKey || e?.metaKey || e?.shiftKey);
-    const next = nextSelection(current, rows, { ctrl: !!(e?.ctrlKey || e?.metaKey), shift: !!e?.shiftKey });
+    const base = selectionPublished ? current : publishedRows;
+    const next = nextSelection(base, rows, { ctrl: !!(e?.ctrlKey || e?.metaKey), shift: !!e?.shiftKey });
     const toggledOff = !multi && next.length === 0;
     setClickedMarks(nextClickedMarks(
       clickedMarks(),
-      current,
+      base,
       markKeyOf(el),
       next,
       { ctrl: !!(e?.ctrlKey || e?.metaKey), shift: !!e?.shiftKey }
@@ -3258,6 +3584,27 @@ function createChartHost(container, config) {
   container.addEventListener(XFILTER_REFRESH_EVENT, onXf);
   const untrackPress = trackPress(container);
   container.addEventListener("click", onClick);
+  if (keyboardOn) {
+    const nameOfRow = (m) => {
+      const r = parseRowIdxs(m.getAttribute(ROW_IDX_ATTR))[0];
+      return rowNameOf(data.columns || [], r == null ? null : data.rows?.[r], resolved.cultureCode);
+    };
+    keyboard = installKeyboard({
+      container,
+      markSelector: clickSel,
+      pressSelector: `.${CONTROL_CLASS}`,
+      skipSelector: `.${ANNOTATION_LAYER_CLASS}, .${GLYPH_LAYER_CLASS}, .${LASSO_OUTLINE_CLASS}`,
+      inert: marksInert,
+      select: (m, mods) => {
+        const ME = win?.MouseEvent ?? MouseEvent;
+        m.dispatchEvent(new ME("click", { bubbles: true, cancelable: true, ctrlKey: mods.ctrl, shiftKey: mods.shift }));
+      },
+      clear: clearFromGesture,
+      isSelected: (m) => !!m.classList?.contains(MARK_SELECTED_CLASS),
+      labelOf: nameOfRow,
+      keyOf: (m) => m.getAttribute(ROW_IDX_ATTR) ?? ""
+    });
+  }
   container.classList?.add(HOST_CONTAINER_CLASS);
   ensureAffordanceStyles();
   const fitOpts = config.fit ?? true;
@@ -3405,6 +3752,15 @@ function createChartHost(container, config) {
     } catch {
     }
     paintGlyphLayer();
+    installLassoHere();
+    keyboard?.refresh();
+    const fw = focusWas;
+    focusWas = null;
+    restoreFocus(container, fw);
+    selfRedraw?.takeRecords();
+    watchSelfRedraw();
+  };
+  function installLassoHere() {
     try {
       lasso = installLasso({
         container,
@@ -3415,7 +3771,38 @@ function createChartHost(container, config) {
       });
     } catch {
     }
+  }
+  let selfRedraw = null;
+  let focusWas = null;
+  let notesHeld = (config.annotations ?? []).length > 0;
+  const takesMarks = (n) => n.nodeType === 1 && (!!n.classList?.contains(MARK_CLASS) || !!n.querySelector?.(`.${MARK_CLASS}`));
+  const lassoLost = () => !!lasso?.surface && !lasso.surface.isConnected;
+  const repaintAfterChart = () => {
+    if (destroyed) return;
+    try {
+      ensureCrossfilterHitTargets(container, doc);
+    } catch {
+    }
+    paintSelection();
+    try {
+      drawAnnotations();
+    } catch {
+    }
+    paintGlyphLayer(false);
+    if (lassoLost()) installLassoHere();
+    keyboard?.refresh();
+    selfRedraw?.takeRecords();
   };
+  function watchSelfRedraw() {
+    const MO = win?.MutationObserver;
+    if (selfRedraw || !MO || destroyed) return;
+    selfRedraw = new MO((records) => {
+      if (destroyed || !records.some((r) => Array.from(r.removedNodes).some(takesMarks))) return;
+      if (!(current && current.length) && !notesHeld && !lassoLost()) return;
+      repaintAfterChart();
+    });
+    selfRedraw.observe(container, { childList: true, subtree: true });
+  }
   const renderFailure = (err) => {
     const message = String(err?.message ?? err ?? "");
     if (config.onInvalidSentinel && isInvalidSentinelError(message)) {
@@ -3435,7 +3822,9 @@ function createChartHost(container, config) {
       disposeLasso();
       flushZoom();
       if (hasRendered && keepScroll) rememberScroll(container, scrollKey());
+      focusWas = rememberFocus(container);
       container.innerHTML = "";
+      selfRedraw?.takeRecords();
       hasRendered = true;
       if (!renderFn) {
         if (!config.code) throw new Error("createChartHost: provide code or renderFn");
@@ -3461,6 +3850,7 @@ function createChartHost(container, config) {
       if (resolved.dateCellsAreUtcDays === void 0 && data.dateCellsAreUtcDays) resolved = { ...resolved, dateCellsAreUtcDays: true };
       if (resolved.suppressSelectionGlyph === void 0 && data.meta?.suppressSelectionGlyph === true)
         resolved = { ...resolved, suppressSelectionGlyph: true };
+      if (keyboardOn) resolved = { ...resolved, keyboardMarks: true };
       let outcome;
       zoomCap = null;
       if (zoomMemory && config.code && !config.renderFn) {
@@ -3536,7 +3926,7 @@ function createChartHost(container, config) {
     // callback) must not clear, stop or annotate the chart that is on screen now.
     setOptions(partial) {
       if (destroyed) return;
-      raw = { ...raw, ...partial };
+      raw = { ...raw, ...takeSeed(partial ?? {}) };
       resolved = resolveForHost(raw);
       host.render();
     },
@@ -3551,6 +3941,7 @@ function createChartHost(container, config) {
     },
     setAnnotations(list) {
       if (destroyed) return;
+      notesHeld = (list ?? []).length > 0;
       annotationLayer.set(list);
       try {
         drawAnnotations();
@@ -3612,6 +4003,12 @@ function createChartHost(container, config) {
       if (destroyed) return;
       destroyed = true;
       stopAnim();
+      if (selfRedraw) {
+        selfRedraw.disconnect();
+        selfRedraw = null;
+      }
+      keyboard?.destroy();
+      keyboard = null;
       container.removeEventListener(XFILTER_REFRESH_EVENT, onXf);
       container.removeEventListener("click", onClick);
       untrackPress();
@@ -3836,6 +4233,7 @@ export {
   exportTableService,
   browserSaveFile,
   cleanHostSelection,
+  cleanFilterScope,
   resolveOptions,
   buildRenderPayload,
   stripJsComments,
@@ -3858,6 +4256,14 @@ export {
   invalidSentinelReason,
   ANNOTATION_LAYER_CLASS,
   ANNOTATION_CLASS,
+  rememberFocus,
+  restoreFocus,
+  KEYBOARD_STAMP,
+  codeHasKeyboardStamp,
+  KEYBOARD_CLASS,
+  WIRED_ATTR,
+  rowNameOf,
+  installKeyboard,
   sessionViewStateProvider,
   noopViewStateProvider,
   assembleD3,