@bicharts/chart-host 0.6.87 → 0.6.89

package/README.md

@@ -267,6 +267,51 @@ would show its selected lines at 38%, which the eye reads as dimmed. Such a char
 painted at full opacity. Undeclared charts are unchanged, so alpha used as an encoding (a depth
 cue, a hierarchy level) is never flattened by a fix meant for another chart.
 
+**How far the rest dims, per chart.** `options.dimOpacity` (a share of full opacity, `0.01`-`1`;
+`DIM_OPACITY_MIN` is the floor) sets the level for one host without writing CSS, and it is live
+through `setOptions`. The host writes it as `--lch-dim-opacity` on its own container and removes
+only what it wrote, so with the option absent nothing is written and the CSS above decides: the
+stylesheet's `0.25`, or whatever your page sets on the variable.
+
+```js
+createChartHost(el, { code, data, options: { dimOpacity: 0.15 } });
+```
+
+**A glyph on each selected mark.** `options.selectionGlyph` (`"dot"` or `"check"`; absent or
+`"none"` draws nothing, the default) puts a small glyph on every selected mark, in a layer the host
+owns inside the container (`.bic-selection-glyphs`, each glyph `.lch-sel-glyph`, never hit-tested).
+It is painted after every selection change and, on a redraw, after the layout pass and the fit, so
+nothing measures it as part of the chart. Only a mark the reader can see gets one: a mark hidden by
+`visibility` or `opacity` (a legend toggle) and a mark outside its svg's frame or its plot's
+`clip-path` (a point panned into the axis margin) get none. While a selection is lit, a mark that
+moves or hides without a redraw (a pan or zoom, a transition, an animation frame, a legend toggle)
+takes its glyph with it on the next frame; a write that holds no mark (a hover dot, a tooltip)
+repaints nothing, and that repaint is not reported again. Where the browser has a `ResizeObserver`,
+a container resized without a redraw (a responsive chart, a hidden tab shown) is repainted too, and
+reported when it drew a different count. The layer clips at the container's scroll area, so a
+glyph never widens what the container scrolls, and it sits under the note badges, under a chart's
+own tooltip or control that sets a `z-index` above 1, and under a pinned axis, so a glyph on a row
+scrolled beneath the axis is covered with its row. When the page left the container
+`position: static`, the host makes it `relative` so the layer scrolls and clips with the marks, and
+`destroy()` puts back what the page had. A period picked on a chart's own timeline dims nothing and
+marks nothing.
+
+Some charts never take a glyph: on a flow or relationship chart a selected series would get one on
+every point. The generate answer says so (`suppressSelectionGlyph`, read by shape-core's
+`parseGenerateResponse`); pass it as `options.suppressSelectionGlyph`, or leave it in the payload's
+`meta` (`data.meta.suppressSelectionGlyph`) and the host promotes it, the way it promotes
+`geoPoint`. Keep it with the chart's code, so a redraw from a cache honors it too.
+`onSelectionGlyphs` reports what each paint did (`{ mode, drawn, total, suppressed }`), and is
+called only when a glyph mode is set:
+
+```js
+createChartHost(el, {
+  code, data,
+  options: { selectionGlyph: "dot", suppressSelectionGlyph: answer.suppressSelectionGlyph },
+  onSelectionGlyphs: r => console.debug("glyphs", r),
+});
+```
+
 **Which marks count as selected.** By default a mark is selected when *any* of the rows in its
 `data-row-idx` list is selected, which is what lights a legend swatch together with its series. A
 chart whose marks share rows declares the other rule by stamping

package/dist/adapters.mjs

@@ -3,7 +3,7 @@ import {
   censusHitBands,
   ensureCrossfilterHitTargets,
   hitBandFlag
-} from "./chunk-7HKVV5T5.mjs";
+} from "./chunk-XNS34AMM.mjs";
 import {
   clickWasDrag,
   collectD3GlyphCenters,
@@ -12,13 +12,13 @@ import {
   markKeyOf,
   rowIdxsFromMark,
   selectionRuleOf
-} from "./chunk-IURROJT7.mjs";
+} from "./chunk-DJ5IJV57.mjs";
 import {
   AXIS_FILTER_CLASS,
   LEGEND_MARK_CLASS,
   MARK_CLASS,
   ROW_IDX_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/adapters/types.ts

package/dist/{chunk-HZNMMRQ3.mjs → chunk-562LF7XM.mjs}

@@ -2,30 +2,33 @@
 import {
   LASSO_OUTLINE_CLASS,
   installLasso
-} from "./chunk-QIRLWJBI.mjs";
+} from "./chunk-OG6RR2AJ.mjs";
 import {
   censusHitBands,
   ensureCrossfilterHitTargets
-} from "./chunk-7HKVV5T5.mjs";
+} from "./chunk-XNS34AMM.mjs";
 import {
   clearPress,
+  clearSelectionGlyphs,
   clickWasDrag,
+  collectGlyphCentersWhere,
   createMarkResolver,
   isInsideControl,
   markKeyOf,
   nextClickedMarks,
   nextSelection,
+  paintSelectionGlyphs,
   planSelectionPaint,
   sameRowSet,
   selectionRuleOf,
   trackPress,
   validRowSet
-} from "./chunk-IURROJT7.mjs";
+} from "./chunk-DJ5IJV57.mjs";
 import {
   clipWindowOf,
   fitRenderedChart,
   unpinScrolledAxis
-} from "./chunk-BQFG5HWZ.mjs";
+} from "./chunk-QHIPRAZK.mjs";
 import {
   Fn,
   J3,
@@ -60,6 +63,7 @@ import {
   CONTAINER_SLOT_XF_CLEAR,
   CONTROL_CLASS,
   DIM_OPACITY_DEFAULT,
+  DIM_OPACITY_MIN,
   DIM_OPACITY_VAR,
   FLIP_DIRECTION_DEFAULT,
   FLIP_MODE_DEFAULT,
@@ -78,7 +82,7 @@ import {
   XFILTER_REFRESH_EVENT,
   chartOwnsTimeline,
   periodTickSuppressesFeedback
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/labelContrast.ts
 function parseRGBA(c) {
@@ -608,6 +612,20 @@ function resolveOptions(p) {
     cultureCode: p.cultureCode,
     allowTooltips: p.allowTooltips,
     noDataText: p.noDataText,
+    // A finite number is clamped to DIM_OPACITY_MIN-1; absent, blank or junk stays undefined so the stylesheet - and a
+    // page's own CSS override - still decides. Never defaulted here: that would override every page's CSS.
+    dimOpacity: (() => {
+      const n = numberOr(p.dimOpacity, 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.
+    selectionGlyph: (() => {
+      const v = (p.selectionGlyph == null ? "" : String(p.selectionGlyph)).toLowerCase();
+      return v === "dot" || v === "check" ? v : void 0;
+    })(),
+    // A host FACT from the generate answer, true only for a literal true: silence never suppresses anything.
+    suppressSelectionGlyph: p.suppressSelectionGlyph === 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.
@@ -2077,6 +2095,7 @@ function createChartHost(container, config) {
     p.catch(() => {
     });
   };
+  let dimVarSet = false;
   let current = null;
   let activeTickEl = null;
   let selectionIsPeriod = false;
@@ -2153,6 +2172,14 @@ function createChartHost(container, config) {
       const active = !!sel && sel.length > 0;
       const dim = active && !selectionIsPeriod;
       container.classList?.[dim ? "add" : "remove"](SELECTION_ACTIVE_CLASS);
+      const want = resolved.dimOpacity;
+      if (typeof want === "number") {
+        container.style?.setProperty(DIM_OPACITY_VAR, String(want));
+        dimVarSet = true;
+      } else if (dimVarSet) {
+        container.style?.removeProperty(DIM_OPACITY_VAR);
+        dimVarSet = false;
+      }
       const lit = container.querySelectorAll(`.${ACTIVE_TICK_CLASS}`);
       for (const t of Array.from(lit)) t.classList?.remove(ACTIVE_TICK_CLASS);
       const tickStillDrawn = !!activeTickEl && (typeof container.contains === "function" ? container.contains(activeTickEl) : activeTickEl.isConnected !== false);
@@ -2192,12 +2219,209 @@ function createChartHost(container, config) {
     } catch {
     }
   };
+  const GLYPH_LAYER_CLASS = "bic-selection-glyphs";
+  let glyphPositionWas = null;
+  let glyphObserver = null;
+  let glyphResize = null;
+  let glyphSize = "";
+  let glyphQueued = false;
+  let glyphQueuedReport = 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 markShown = (m) => {
+    try {
+      const cv = m.checkVisibility;
+      if (typeof cv === "function") return cv.call(m, { visibilityProperty: true, opacityProperty: true }) !== false;
+      const cs = win?.getComputedStyle;
+      if (typeof cs !== "function") return true;
+      const own = cs.call(win, m);
+      if (own.visibility === "hidden" || own.visibility === "collapse") return false;
+      for (let el = m; el && el !== container; el = el.parentElement) {
+        const s = el === m ? own : cs.call(win, el);
+        if (s.display === "none" || s.opacity !== "" && parseFloat(s.opacity) === 0) return false;
+      }
+    } catch {
+    }
+    return true;
+  };
+  const glyphWindows = () => {
+    const windowOf = /* @__PURE__ */ new Map();
+    const read = (el) => {
+      if (!windowOf.has(el)) {
+        let w = null;
+        try {
+          if ((el.tagName || "").toLowerCase() === "svg") {
+            const r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) w = r;
+          } else if (el.hasAttribute?.("clip-path")) w = clipWindowOf(el);
+        } catch {
+          w = null;
+        }
+        windowOf.set(el, w);
+      }
+      return windowOf.get(el) ?? null;
+    };
+    const EPS2 = 0.5;
+    return (m, x, y) => {
+      for (let el = m; el && el !== container; el = el.parentElement) {
+        const w = read(el);
+        if (w && (x < w.left - EPS2 || x > w.right + EPS2 || y < w.top - EPS2 || y > w.bottom + EPS2)) return false;
+      }
+      return true;
+    };
+  };
+  const paintGlyphLayer = (report = true) => {
+    if (destroyed) return;
+    let follow = false;
+    try {
+      let layer = container.querySelector(`:scope > .${GLYPH_LAYER_CLASS}`);
+      clearSelectionGlyphs(layer);
+      const mode = resolved.selectionGlyph;
+      if (mode !== "dot" && mode !== "check") {
+        glyphReported = "";
+        return;
+      }
+      const active = !!current && current.length > 0 && !selectionIsPeriod;
+      if (!active) {
+        glyphReported = "";
+        return;
+      }
+      if (resolved.suppressSelectionGlyph) {
+        if (report === true) try {
+          config.onSelectionGlyphs?.({ mode, drawn: 0, total: 0, suppressed: true });
+        } catch {
+        }
+        glyphReported = "";
+        return;
+      }
+      follow = true;
+      if (!layer) {
+        layer = doc.createElement("div");
+        layer.className = GLYPH_LAYER_CLASS;
+        layer.setAttribute("aria-hidden", "true");
+        Object.assign(layer.style, {
+          position: "absolute",
+          left: "0",
+          top: "0",
+          width: "0",
+          height: "0",
+          overflow: "hidden",
+          pointerEvents: "none",
+          zIndex: "1"
+        });
+        try {
+          const pos = win?.getComputedStyle?.(container)?.position || container.style.position;
+          if (!pos || pos === "static") {
+            const was = container.style.position;
+            container.style.position = "relative";
+            if (glyphPositionWas === null) glyphPositionWas = was;
+          }
+        } catch {
+        }
+        container.appendChild(layer);
+      }
+      layer.style.width = "0";
+      layer.style.height = "0";
+      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() });
+      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}`;
+      if (report === true || report === "if-changed" && said !== glyphReported) {
+        glyphReported = said;
+        try {
+          config.onSelectionGlyphs?.({ mode, drawn, total: centers.length, suppressed: false });
+        } catch {
+        }
+      }
+    } catch {
+    } finally {
+      try {
+        followGlyphs(follow);
+        glyphObserver?.takeRecords();
+      } catch {
+      }
+    }
+  };
   const notify = (rowIdxs, source, tick, fromChart = false) => {
     current = rowIdxs;
     selectionFromChart = rowIdxs.length > 0 && fromChart;
     activeTickEl = rowIdxs.length ? tick ?? null : null;
     selectionIsPeriod = rowIdxs.length > 0 && periodTickSuppressesFeedback(!!tick, chartOwnsTimeline(container));
     paintSelection();
+    paintGlyphLayer();
     for (const cb of subs) {
       try {
         cb(rowIdxs, source);
@@ -2395,6 +2619,7 @@ function createChartHost(container, config) {
       drawAnnotations();
     } catch {
     }
+    paintGlyphLayer();
     try {
       lasso = installLasso({
         container,
@@ -2421,6 +2646,7 @@ function createChartHost(container, config) {
       if (destroyed) return;
       const seq2 = ++renderSeq;
       stopAnim();
+      followGlyphs(false);
       disposeLasso();
       flushZoom();
       container.innerHTML = "";
@@ -2445,6 +2671,8 @@ function createChartHost(container, config) {
       if (resolved.geoPoint === void 0 && data.geoPoint) resolved = { ...resolved, geoPoint: data.geoPoint };
       if (resolved.geoPointDest === void 0 && data.geoPointDest) resolved = { ...resolved, geoPointDest: data.geoPointDest };
       if (resolved.dateCellsAreUtcDays === void 0 && data.dateCellsAreUtcDays) resolved = { ...resolved, dateCellsAreUtcDays: true };
+      if (resolved.suppressSelectionGlyph === void 0 && data.meta?.suppressSelectionGlyph === true)
+        resolved = { ...resolved, suppressSelectionGlyph: true };
       let outcome;
       zoomCap = null;
       if (zoomMemory && config.code && !config.renderFn) {
@@ -2580,10 +2808,25 @@ function createChartHost(container, config) {
       clearPress(container);
       disposeLasso();
       subs.clear();
+      if (dimVarSet) {
+        try {
+          container.style?.removeProperty(DIM_OPACITY_VAR);
+        } catch {
+        }
+        dimVarSet = false;
+      }
       annotationLayer.destroy();
       unpinScrolledAxis(container);
       flushZoom();
+      followGlyphs(false);
       container.innerHTML = "";
+      if (glyphPositionWas !== null) {
+        try {
+          if (container.style.position === "relative") container.style.position = glyphPositionWas;
+        } catch {
+        }
+        glyphPositionWas = null;
+      }
     }
   };
   return host;

package/dist/{chunk-IURROJT7.mjs → chunk-DJ5IJV57.mjs}

@@ -8,7 +8,7 @@ import {
   SELECTION_RULE_ATTR,
   SELECTION_RULE_CLICKED_MARKS,
   XFILTER_REFRESH_EVENT
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/selection.ts
 function rowIdxsFromMark(el) {
@@ -304,8 +304,12 @@ function createMarkResolver(env) {
   return { isInvisibleStrokePath, distToPathCenterline, refineHitCorridor, findMark, rowIdxsFromMark, penetrateOverlayAt, resolveByGeometry };
 }
 function collectD3GlyphCenters(container, baseRect, out) {
+  collectGlyphCentersWhere(container, baseRect, out);
+}
+function collectGlyphCentersWhere(container, baseRect, out, filter) {
   const Point = container.ownerDocument?.defaultView?.DOMPoint ?? globalThis.DOMPoint;
-  const marks = container.querySelectorAll(`.${MARK_CLASS}.${MARK_SELECTED_CLASS}`);
+  let marks = container.querySelectorAll(`.${MARK_CLASS}.${MARK_SELECTED_CLASS}`);
+  if (filter?.shown) marks = Array.from(marks).filter((m) => filter.shown(m));
   const rects = [];
   for (let i = 0; i < marks.length; i++) {
     const r = marks[i].getBoundingClientRect();
@@ -385,6 +389,7 @@ function collectD3GlyphCenters(container, baseRect, out) {
       sx = isRect ? r.left + r.width * 0.8 : r.left + r.width / 2;
       sy = isRect ? r.top + r.height * 0.2 : r.top + r.height / 2;
     }
+    if (filter?.at && !filter.at(el, sx, sy)) continue;
     out.push({ x: sx - baseRect.left, y: sy - baseRect.top });
   }
 }
@@ -439,6 +444,7 @@ export {
   clickWasDrag,
   createMarkResolver,
   collectD3GlyphCenters,
+  collectGlyphCentersWhere,
   SELECTION_GLYPH_CLASS,
   clearSelectionGlyphs,
   paintSelectionGlyphs

package/dist/{chunk-DTOGTKAJ.mjs → chunk-GOIG756B.mjs}

@@ -1,7 +1,7 @@
 /*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
 import {
   LASSO_KNOB_KEY
-} from "./chunk-QIRLWJBI.mjs";
+} from "./chunk-OG6RR2AJ.mjs";
 
 // src/filterScope.ts
 function viewToken(view) {

package/dist/{chunk-QIRLWJBI.mjs → chunk-OG6RR2AJ.mjs}

@@ -4,7 +4,7 @@ import {
   gestureWasDrag,
   isInsideControl,
   rowIdxsFromMark
-} from "./chunk-IURROJT7.mjs";
+} from "./chunk-DJ5IJV57.mjs";
 import {
   AXIS_FILTER_CLASS,
   CONTROL_CLASS,
@@ -12,7 +12,7 @@ import {
   MARK_CLASS,
   ROW_IDX_ATTR,
   SNAPSHOT_SVG_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/lasso.ts
 var LASSO_ROW_CAP = 5e3;

package/dist/{chunk-BQFG5HWZ.mjs → chunk-QHIPRAZK.mjs}

@@ -1,7 +1,7 @@
 /*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
 import {
   SNAPSHOT_SVG_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/fit.ts
 var SCROLL_SLACK_PX = 8;

package/dist/{chunk-ZGQURBRJ.mjs → chunk-UBB5LNH4.mjs}

@@ -1,7 +1,7 @@
 /*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
 import {
   SNAPSHOT_SVG_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/snapshot.ts
 var DEFAULT_TIMEOUT_MS = 2e3;

package/dist/{chunk-7HKVV5T5.mjs → chunk-XNS34AMM.mjs}

@@ -4,7 +4,7 @@ import {
   LEGEND_MARK_CLASS,
   MARK_CLASS,
   ROW_IDX_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 
 // src/hitTargets.ts
 var SVG_NS = "http://www.w3.org/2000/svg";

package/dist/{chunk-MR6TL7QZ.mjs → chunk-YDHXOIAI.mjs}

@@ -34,6 +34,7 @@ var MARK_SELECTED_CLASS = "lch-mark-selected";
 var ACTIVE_TICK_CLASS = "lch-tick-active";
 var DIM_OPACITY_VAR = "--lch-dim-opacity";
 var DIM_OPACITY_DEFAULT = 0.25;
+var DIM_OPACITY_MIN = 0.01;
 function chartOwnsTimeline(container) {
   return !!container && (!!container[CONTAINER_SLOT_XF_CLEAR] || !!container[CONTAINER_SLOT_ANIM_STOP]);
 }
@@ -97,6 +98,7 @@ export {
   ACTIVE_TICK_CLASS,
   DIM_OPACITY_VAR,
   DIM_OPACITY_DEFAULT,
+  DIM_OPACITY_MIN,
   chartOwnsTimeline,
   periodTickSuppressesFeedback,
   ANIM_PLAY_SPEED_DEFAULT,

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
   svgNaturalSize,
   svgToDataUrl,
   tableHostOf
-} from "./chunk-ZGQURBRJ.mjs";
+} from "./chunk-UBB5LNH4.mjs";
 import {
   ANNOTATION_CLASS,
   ANNOTATION_LAYER_CLASS,
@@ -97,7 +97,7 @@ import {
   toRGBA,
   toSourceRows,
   valuePlacementFlag
-} from "./chunk-HZNMMRQ3.mjs";
+} from "./chunk-562LF7XM.mjs";
 import {
   LASSO_AXES_SLOT,
   LASSO_COUNT_CLASS,
@@ -122,13 +122,13 @@ import {
   lassoVerdict,
   pointInShape,
   registerLassoAction
-} from "./chunk-QIRLWJBI.mjs";
+} from "./chunk-OG6RR2AJ.mjs";
 import {
   MIN_HIT_BAND_PX,
   censusHitBands,
   ensureCrossfilterHitTargets,
   hitBandFlag
-} from "./chunk-7HKVV5T5.mjs";
+} from "./chunk-XNS34AMM.mjs";
 import {
   CONTAINER_SLOT_PRESS_AT,
   DRAG_NOT_CLICK_PX,
@@ -153,7 +153,7 @@ import {
   selectionRuleOf,
   trackPress,
   validRowSet
-} from "./chunk-IURROJT7.mjs";
+} from "./chunk-DJ5IJV57.mjs";
 import {
   AXIS_PIN_BAND_PAD_PX,
   AXIS_PIN_MAX_BAND_FRACTION,
@@ -179,7 +179,7 @@ import {
   scrollFitFor,
   svgInkReach,
   unpinScrolledAxis
-} from "./chunk-BQFG5HWZ.mjs";
+} from "./chunk-QHIPRAZK.mjs";
 import {
   _3,
   l,
@@ -209,6 +209,7 @@ import {
   CONTAINER_SLOT_XF_CLEAR,
   CONTROL_CLASS,
   DIM_OPACITY_DEFAULT,
+  DIM_OPACITY_MIN,
   DIM_OPACITY_VAR,
   FLIP_DIRECTION_DEFAULT,
   FLIP_INTERVAL_MAX_MS,
@@ -236,7 +237,7 @@ import {
   chartOwnsTimeline,
   periodTickSuppressesFeedback,
   withoutViewOnlyKeys
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/optionsVocabulary.ts
@@ -2161,6 +2162,7 @@ export {
   DEFAULT_FILTER_MATCH_STYLE,
   DEFAULT_MODEL_SUFFIX,
   DIM_OPACITY_DEFAULT,
+  DIM_OPACITY_MIN,
   DIM_OPACITY_VAR,
   DRAG_NOT_CLICK_PX,
   DUPLICATE_GENERATE_WINDOW_MS,

package/dist/legend-fit.mjs

@@ -2,13 +2,13 @@
 import {
   chartSvgOf,
   tableHostOf
-} from "./chunk-ZGQURBRJ.mjs";
+} from "./chunk-UBB5LNH4.mjs";
 import {
   FIT_CONTENT_SELECTOR,
   ctmScaleOf,
   isPhantomBox
-} from "./chunk-BQFG5HWZ.mjs";
-import "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-QHIPRAZK.mjs";
+import "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/legendFit/legendReconcile.ts

package/dist/page.mjs

@@ -14,10 +14,10 @@ import {
   readControls,
   viewFromToken,
   viewToken
-} from "./chunk-DTOGTKAJ.mjs";
-import "./chunk-QIRLWJBI.mjs";
-import "./chunk-IURROJT7.mjs";
-import "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-GOIG756B.mjs";
+import "./chunk-OG6RR2AJ.mjs";
+import "./chunk-DJ5IJV57.mjs";
+import "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 export {
   LINKED_HOVER_CLASS,

package/dist/react.mjs

@@ -13,7 +13,7 @@ import {
   payloadRowReader,
   viewFromToken,
   viewToken
-} from "./chunk-DTOGTKAJ.mjs";
+} from "./chunk-GOIG756B.mjs";
 import {
   assembleD3,
   createChartGroup,
@@ -22,14 +22,14 @@ import {
   loadGeo,
   syncMemberSelection,
   toSourceRows
-} from "./chunk-HZNMMRQ3.mjs";
-import "./chunk-QIRLWJBI.mjs";
-import "./chunk-7HKVV5T5.mjs";
-import "./chunk-IURROJT7.mjs";
-import "./chunk-BQFG5HWZ.mjs";
+} from "./chunk-562LF7XM.mjs";
+import "./chunk-OG6RR2AJ.mjs";
+import "./chunk-XNS34AMM.mjs";
+import "./chunk-DJ5IJV57.mjs";
+import "./chunk-QHIPRAZK.mjs";
 import "./chunk-KQN5C7SZ.mjs";
 import "./chunk-A2GMXZP7.mjs";
-import "./chunk-MR6TL7QZ.mjs";
+import "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/react.tsx
@@ -70,6 +70,7 @@ function BicChart(props) {
     zoomMemory,
     labelContrast,
     onLabelContrast,
+    onSelectionGlyphs,
     layoutPass,
     onInvalidSentinel,
     id,
@@ -116,6 +117,8 @@ function BicChart(props) {
   onSelectRef.current = onSelect;
   const onLabelContrastRef = useRef(onLabelContrast);
   onLabelContrastRef.current = onLabelContrast;
+  const onSelectionGlyphsRef = useRef(onSelectionGlyphs);
+  onSelectionGlyphsRef.current = onSelectionGlyphs;
   const onInvalidSentinelRef = useRef(onInvalidSentinel);
   onInvalidSentinelRef.current = onInvalidSentinel;
   const onAnnotationClickRef = useRef(onAnnotationClick);
@@ -155,6 +158,7 @@ function BicChart(props) {
       labelContrast,
       layoutPass,
       onLabelContrast: (r) => onLabelContrastRef.current?.(r),
+      onSelectionGlyphs: (r) => onSelectionGlyphsRef.current?.(r),
       // A GETTER, not a wrapper: the host decides whether to
       // swallow the sentinel throw by whether this is SET, so
       // an always-present wrapper would hide the throw from a

package/dist/testing.mjs

@@ -4,7 +4,7 @@ import {
   MARK_CLASS,
   MARK_SELECTED_CLASS,
   ROW_IDX_ATTR
-} from "./chunk-MR6TL7QZ.mjs";
+} from "./chunk-YDHXOIAI.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/testing/interact.ts

package/dist/types/contract.d.ts

@@ -72,6 +72,7 @@ export declare const MARK_SELECTED_CLASS = "lch-mark-selected";
 export declare const ACTIVE_TICK_CLASS = "lch-tick-active";
 export declare const DIM_OPACITY_VAR = "--lch-dim-opacity";
 export declare const DIM_OPACITY_DEFAULT = 0.25;
+export declare const DIM_OPACITY_MIN = 0.01;
 export declare function chartOwnsTimeline(container: any): boolean;
 export declare function periodTickSuppressesFeedback(isAxisTick: boolean, ownsTimeline: boolean): boolean;
 export declare const ANIM_PLAY_SPEED_DEFAULT = 1000;
@@ -159,6 +160,13 @@ export interface RenderOptions {
     cultureCode?: string;
     allowTooltips?: boolean;
     noDataText?: string;
+    /** How far a selection dims the marks outside it, as a share of full opacity (DIM_OPACITY_MIN-1). Absent: the
+     *  stylesheet decides - DIM_OPACITY_DEFAULT, or whatever the page sets on --lch-dim-opacity. */
+    dimOpacity?: number;
+    /** A small glyph on each selected mark: "dot" or "check". Absent or "none": no glyph (the default). */
+    selectionGlyph?: "none" | "dot" | "check";
+    /** A host FACT from the generate answer: this chart's family never takes a selection glyph. */
+    suppressSelectionGlyph?: boolean;
     animAutoPlay?: boolean;
     animPlaySpeedMs?: number;
     animLoopDelaySec?: number;

package/dist/types/host.d.ts

@@ -62,6 +62,9 @@ export interface ChartHostConfig {
         meta?: {
             hostContract?: string;
             chart?: string;
+            /** The generate answer's fact that this chart's family never takes a selection glyph. Promoted into
+             *  options.suppressSelectionGlyph, so a host that hands over the whole payload honors it unasked. */
+            suppressSelectionGlyph?: boolean;
         };
     };
     /** Generated render() source — compiled exactly like the visual/preview/exec-gate. */
@@ -199,6 +202,18 @@ export interface ChartHostConfig {
     labelContrast?: boolean | LabelContrastOptions;
     /** What the label-contrast pass did after each render - counts, so a host can log them. */
     onLabelContrast?: (report: LabelContrastReport) => void;
+    /**
+     * What the selection-glyph pass did after each paint of an active selection - counts, so a host can log them.
+     * Called only when options.selectionGlyph is "dot" or "check"; `suppressed` is true when the chart's family never
+     * takes a glyph (options.suppressSelectionGlyph, or the same fact in data.meta). A repaint that only follows marks
+     * moving without a render (a pan, a transition) is not reported again.
+     */
+    onSelectionGlyphs?: (report: {
+        mode: "dot" | "check";
+        drawn: number;
+        total: number;
+        suppressed: boolean;
+    }) => void;
     /**
      * A LAYOUT PASS the host brings, run after every render (both the synchronous and the promise lane, and every
      * setOptions / setData re-render) AFTER the label-contrast pass and BEFORE the hit-target heal, the selection

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { HOST_CONTRACT_VERSION, GEO_POINT_PRECISIONS, MARK_CLASS, LEGEND_MARK_CLASS, AXIS_FILTER_CLASS, ROW_IDX_ATTR, LIFT_SELECTED_CLASS, CONTROL_CLASS, NO_ROW_MARKS_ATTR, SELECTION_RULE_ATTR, SELECTION_RULE_CLICKED_MARKS, MARK_KEY_ATTR, CONTAINER_SLOT_CLICKED_MARKS, SNAPSHOT_SVG_ATTR, XFILTER_REFRESH_EVENT, CONTAINER_SLOT_ANIM_STOP, CONTAINER_SLOT_XF_CLEAR, CONTAINER_SLOT_INITIAL_XF_MARK, CONTAINER_SLOT_UI_STATE, VIEW_ONLY_UI_STATE_KEYS, withoutViewOnlyKeys, HOST_CONTAINER_CLASS, SELECTION_ACTIVE_CLASS, MARK_SELECTED_CLASS, ACTIVE_TICK_CLASS, DIM_OPACITY_VAR, DIM_OPACITY_DEFAULT, chartOwnsTimeline, periodTickSuppressesFeedback, ANIM_PLAY_SPEED_DEFAULT, ANIM_PLAY_SPEED_MIN, ANIM_PLAY_SPEED_MAX, ANIM_LOOP_DELAY_DEFAULT, ANIM_LOOP_DELAY_MIN, ANIM_MAX_IDEAL_FRAMES_DEFAULT, ANIM_MAX_IDEAL_FRAMES_MIN, ANIM_MAX_IDEAL_FRAMES_MAX, ANIMATION_OPTION_KEYS, COLOR_SCALE_SELF_CLAMP_PCT_DEFAULT, COLOR_SCALE_SELF_CLAMP_PCT_MIN, COLOR_SCALE_SELF_CLAMP_PCT_MAX, FLIP_MODE_DEFAULT, FLIP_INTERVAL_MIN_MS, FLIP_INTERVAL_MAX_MS, FLIP_DIRECTION_DEFAULT, APPROXIMATE_POSITIONS_DEFAULT, VALUE_AXIS_BASELINE_DEFAULT, SEASONAL_MARKERS_DEFAULT, MAX_MAP_POINTS_DEFAULT, type GeoPointPrecision, type GeoMapKind, type TimelineStyle, type FlipMode, type FlipDirection, type ApproximatePositions, type ValueAxisBaseline, type SeasonalMarkers, type ColorScaleScope, type RenderOptions, type ViewStateProvider, type ChartControlChange, type XfilterRefreshDetail, } from "./contract";
+export { HOST_CONTRACT_VERSION, GEO_POINT_PRECISIONS, MARK_CLASS, LEGEND_MARK_CLASS, AXIS_FILTER_CLASS, ROW_IDX_ATTR, LIFT_SELECTED_CLASS, CONTROL_CLASS, NO_ROW_MARKS_ATTR, SELECTION_RULE_ATTR, SELECTION_RULE_CLICKED_MARKS, MARK_KEY_ATTR, CONTAINER_SLOT_CLICKED_MARKS, SNAPSHOT_SVG_ATTR, XFILTER_REFRESH_EVENT, CONTAINER_SLOT_ANIM_STOP, CONTAINER_SLOT_XF_CLEAR, CONTAINER_SLOT_INITIAL_XF_MARK, CONTAINER_SLOT_UI_STATE, VIEW_ONLY_UI_STATE_KEYS, withoutViewOnlyKeys, HOST_CONTAINER_CLASS, SELECTION_ACTIVE_CLASS, MARK_SELECTED_CLASS, ACTIVE_TICK_CLASS, DIM_OPACITY_VAR, DIM_OPACITY_DEFAULT, DIM_OPACITY_MIN, chartOwnsTimeline, periodTickSuppressesFeedback, ANIM_PLAY_SPEED_DEFAULT, ANIM_PLAY_SPEED_MIN, ANIM_PLAY_SPEED_MAX, ANIM_LOOP_DELAY_DEFAULT, ANIM_LOOP_DELAY_MIN, ANIM_MAX_IDEAL_FRAMES_DEFAULT, ANIM_MAX_IDEAL_FRAMES_MIN, ANIM_MAX_IDEAL_FRAMES_MAX, ANIMATION_OPTION_KEYS, COLOR_SCALE_SELF_CLAMP_PCT_DEFAULT, COLOR_SCALE_SELF_CLAMP_PCT_MIN, COLOR_SCALE_SELF_CLAMP_PCT_MAX, FLIP_MODE_DEFAULT, FLIP_INTERVAL_MIN_MS, FLIP_INTERVAL_MAX_MS, FLIP_DIRECTION_DEFAULT, APPROXIMATE_POSITIONS_DEFAULT, VALUE_AXIS_BASELINE_DEFAULT, SEASONAL_MARKERS_DEFAULT, MAX_MAP_POINTS_DEFAULT, type GeoPointPrecision, type GeoMapKind, type TimelineStyle, type FlipMode, type FlipDirection, type ApproximatePositions, type ValueAxisBaseline, type SeasonalMarkers, type ColorScaleScope, type RenderOptions, type ViewStateProvider, type ChartControlChange, type XfilterRefreshDetail, } from "./contract";
 export { resolveOptions, type ResolveOptionsInput } from "./defaults";
 export { OPTIONS_VOCABULARY, LIVE_OPTION_KEYS, MAX_MAP_POINTS_MIN, MAX_MAP_POINTS_MAX, LIMIT_COUNT_MAX, wireLimitCount, codeReadsOption, type OptionVocabularyEntry, type OptionTiming, type OptionWire, type OptionKey, } from "./optionsVocabulary";
 export { loadGeo, geoFromCache, registerGeo, registerGeoAsset, geoAssetFor, clearGeoCache, type GeoAssetName, } from "./geoLazy";

package/dist/types/react.d.ts

@@ -48,6 +48,9 @@ export interface BicChartProps {
     labelContrast?: ChartHostConfig["labelContrast"];
     /** What the label-contrast pass did after each render - counts, for a page that logs. */
     onLabelContrast?: ChartHostConfig["onLabelContrast"];
+    /** What the selection-glyph pass did after each paint, when `options.selectionGlyph` is set - counts, for a page
+     *  that logs. The glyph itself, the dim level and the suppression fact ride the `options` prop. */
+    onSelectionGlyphs?: ChartHostConfig["onSelectionGlyphs"];
     /**
      * A LAYOUT PASS run after every render, after label contrast and before the fit - e.g.
      * `createLegendFitPass()` from "@bicharts/chart-host/legend-fit", which slides a legend clear of

package/dist/types/selection.d.ts

@@ -169,6 +169,18 @@ export declare function collectD3GlyphCenters(container: Element, baseRect: {
     left: number;
     top: number;
 }, out: GlyphCenter[]): void;
+/** Which selected marks get a glyph, for a host that draws its own layer: `shown` drops a mark before anything is
+ *  measured against it (a mark the reader can't see), `at` drops one by where its glyph would go, in client
+ *  coordinates (a mark panned or zoomed out of its plot). Either absent keeps every mark. */
+export interface GlyphCenterFilter {
+    shown?(mark: Element): boolean;
+    at?(mark: Element, clientX: number, clientY: number): boolean;
+}
+/** collectD3GlyphCenters with a filter. Package-internal: the exported function keeps every mark, as it always has. */
+export declare function collectGlyphCentersWhere(container: Element, baseRect: {
+    left: number;
+    top: number;
+}, out: GlyphCenter[], filter?: GlyphCenterFilter): void;
 /** The class every painted selection glyph carries. */
 export declare const SELECTION_GLYPH_CLASS = "lch-sel-glyph";
 /** Removes every glyph (every child) from the overlay. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bicharts/chart-host",
-  "version": "0.6.87",
+  "version": "0.6.89",
   "description": "Run a BIC-generated D3 chart in any web host: compiles the generated render() function, applies the shared option defaults, resolves mark clicks (through tooltip overlays), owns the selection affordance, and translates row indices between cross-filtered charts. The same contract the BIC Power BI visual implements, minus Power BI. React bindings at @bicharts/chart-host/react.",
   "license": "Apache-2.0",
   "type": "module",