@bicharts/chart-host 0.5.38 → 0.5.40

package/dist/{chunk-KT4RNDZ3.mjs → chunk-XEVWH2RK.mjs}

@@ -20,8 +20,15 @@ var CONTAINER_SLOT_UI_STATE = "__lchUiState";
 var HOST_CONTAINER_CLASS = "bic-chart-host";
 var SELECTION_ACTIVE_CLASS = "lch-has-selection";
 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;
+function chartOwnsTimeline(container) {
+  return !!container && (!!container[CONTAINER_SLOT_XF_CLEAR] || !!container[CONTAINER_SLOT_ANIM_STOP]);
+}
+function periodTickSuppressesFeedback(isAxisTick, ownsTimeline) {
+  return isAxisTick && ownsTimeline;
+}
 var ANIM_PLAY_SPEED_DEFAULT = 1e3;
 var ANIM_PLAY_SPEED_MIN = 250;
 var ANIM_PLAY_SPEED_MAX = 5e3;
@@ -1000,6 +1007,85 @@ function createMarkResolver(env) {
   return { isInvisibleStrokePath, distToPathCenterline, refineHitCorridor, findMark, rowIdxsFromMark, penetrateOverlayAt, resolveByGeometry };
 }
 
+// src/hitTargets.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var HIT_ATTR = "data-lch-hit";
+var ELEMENT_CAP = 5e3;
+function ensureCrossfilterHitTargets(container, doc) {
+  const report = { tagged: 0, hitRects: 0, peFlips: 0, peStrokeOnly: 0 };
+  try {
+    if (!container || typeof container.querySelectorAll !== "function") return report;
+    const els = container.querySelectorAll(
+      `.${MARK_CLASS}, .${LEGEND_MARK_CLASS}, .${AXIS_FILTER_CLASS}`
+    );
+    report.tagged = els.length;
+    if (els.length === 0 || els.length > ELEMENT_CAP) return report;
+    const ownerDoc = doc ?? container.ownerDocument;
+    const view = ownerDoc?.defaultView;
+    const computed = (el) => {
+      try {
+        return view?.getComputedStyle ? view.getComputedStyle(el) : null;
+      } catch {
+        return null;
+      }
+    };
+    for (const el of Array.from(els)) {
+      const tag = String(el.tagName || "").toLowerCase();
+      if (tag === "g") {
+        if (!el.hasAttribute?.(ROW_IDX_ATTR)) continue;
+        if (el.querySelector?.(`rect[${HIT_ATTR}="1"]`)) continue;
+        const cls = el.getAttribute?.("class") || "";
+        const isFurniture = cls.indexOf(LEGEND_MARK_CLASS) >= 0 || cls.indexOf(AXIS_FILTER_CLASS) >= 0;
+        if (!isFurniture) {
+          let hasHittableChild = false;
+          const kids = el.querySelectorAll?.("*") ?? [];
+          for (const kid of Array.from(kids)) {
+            const ktag = String(kid.tagName || "").toLowerCase();
+            if (ktag === "g" || ktag === "tspan" || ktag === "title" || ktag === "defs") continue;
+            const cs = computed(kid);
+            if (!cs || cs.pointerEvents !== "none") {
+              hasHittableChild = true;
+              break;
+            }
+          }
+          if (hasHittableChild) continue;
+        }
+        let bb = null;
+        try {
+          bb = el.getBBox?.();
+        } catch {
+          bb = null;
+        }
+        if (!bb || !(bb.width > 0) || !(bb.height > 0)) continue;
+        const rect = ownerDoc.createElementNS(SVG_NS, "rect");
+        rect.setAttribute("x", String(bb.x));
+        rect.setAttribute("y", String(bb.y));
+        rect.setAttribute("width", String(bb.width));
+        rect.setAttribute("height", String(bb.height));
+        rect.setAttribute("fill", "transparent");
+        rect.setAttribute(HIT_ATTR, "1");
+        if (rect.style) {
+          rect.style.pointerEvents = "all";
+          rect.style.cursor = "pointer";
+        }
+        el.insertBefore(rect, el.firstChild);
+        report.hitRects++;
+      } else {
+        const cs = computed(el);
+        if (cs && cs.pointerEvents === "none") {
+          const fill = String(el.getAttribute?.("fill") ?? cs.fill ?? "").trim().toLowerCase();
+          const unfilled = fill === "none" || fill === "transparent" || fill === "rgba(0, 0, 0, 0)";
+          if (el.style) el.style.pointerEvents = unfilled ? "stroke" : "all";
+          report.peFlips++;
+          if (unfilled) report.peStrokeOnly++;
+        }
+      }
+    }
+  } catch {
+  }
+  return report;
+}
+
 // src/host.ts
 var parseRowIdxs = (s) => (s || "").split(",").map((x2) => parseInt(x2, 10)).filter((n) => Number.isFinite(n));
 var D3_PLUGIN_PACKAGES = {
@@ -1101,6 +1187,8 @@ function createChartHost(container, config) {
   let destroyed = false;
   let warnedGeo = false;
   let current = null;
+  let activeTickEl = null;
+  let selectionIsPeriod = false;
   const subs = /* @__PURE__ */ new Set();
   const ensureAffordanceStyles = () => {
     try {
@@ -1118,13 +1206,33 @@ function createChartHost(container, config) {
    a host SHOULD be able to theme. Found 2026-07-26 in the React demo, on a chart that
    renders perfectly inside Power BI. */
 .${HOST_CONTAINER_CLASS} { line-height: normal; letter-spacing: normal; }
+/* BACKGROUND MARKS ARE NOT DATA. A mark whose ${ROW_IDX_ATTR} is EMPTY has no rows in the
+   CURRENT frame \u2014 an animated map's region before its country enters the series. Every
+   affordance below therefore skips it: brightening or dimming it manufactures a shade
+   that appears in no legend, and at 25% grey over white it comes out LIGHTER than plain
+   land, which reads as a real bottom-of-scale value rather than as absence. The guard is
+   exactly [${ROW_IDX_ATTR}=""] \u2014 an ABSENT attribute is a tagged companion layer (an
+   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}:hover { filter: brightness(1.1) drop-shadow(0 0 1.5px rgba(0,0,0,0.5)) !important; }
-.${HOST_CONTAINER_CLASS}:has(.${MARK_CLASS}:hover) .${MARK_CLASS}:not(:hover) { opacity: 0.55; }
-.${HOST_CONTAINER_CLASS}.${SELECTION_ACTIVE_CLASS} .${MARK_CLASS}:not(.${MARK_SELECTED_CLASS}) {
+.${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}.${SELECTION_ACTIVE_CLASS} .${MARK_CLASS}:not(.${MARK_SELECTED_CLASS}):not([${ROW_IDX_ATTR}=""]) {
     opacity: var(${DIM_OPACITY_VAR}, ${DIM_OPACITY_DEFAULT}) !important;
 }
-.${HOST_CONTAINER_CLASS} .${LEGEND_MARK_CLASS} { cursor: pointer; }`;
+.${HOST_CONTAINER_CLASS} .${LEGEND_MARK_CLASS} { cursor: pointer; }
+/* An axis/group header that filters when clicked LOOKS like inert text, and until it is
+   marked there is no way to tell a landed filter from a dead label \u2014 the report reads
+   "the axis labels are not clickable" even when every click resolved. Weight + underline
+   rather than a colour: these labels sit wherever the host page's theme puts them, and
+   the host has no reliable contrast partner out in the axis gutter. This paints NO marks,
+   so it is the one acknowledgement a PERIOD tick can have without breaking the rule that
+   a timeline never dims its own chart. */
+.${HOST_CONTAINER_CLASS} .${AXIS_FILTER_CLASS} { cursor: pointer; }
+.${HOST_CONTAINER_CLASS} .${ACTIVE_TICK_CLASS},
+.${HOST_CONTAINER_CLASS} .${ACTIVE_TICK_CLASS} text {
+    font-weight: 700 !important;
+    text-decoration: underline !important;
+}`;
       (doc.head || doc.documentElement)?.appendChild(st);
     } catch {
     }
@@ -1133,7 +1241,12 @@ function createChartHost(container, config) {
     try {
       const sel = current;
       const active = !!sel && sel.length > 0;
-      container.classList?.[active ? "add" : "remove"](SELECTION_ACTIVE_CLASS);
+      const dim = active && !selectionIsPeriod;
+      container.classList?.[dim ? "add" : "remove"](SELECTION_ACTIVE_CLASS);
+      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);
+      if (active && tickStillDrawn) activeTickEl.classList?.add(ACTIVE_TICK_CLASS);
       const wanted = new Set(sel ?? []);
       const marks = container.querySelectorAll(`.${MARK_CLASS}[${ROW_IDX_ATTR}], .${LEGEND_MARK_CLASS}[${ROW_IDX_ATTR}]`);
       for (const m2 of Array.from(marks)) {
@@ -1144,8 +1257,10 @@ function createChartHost(container, config) {
     } catch {
     }
   };
-  const notify = (rowIdxs, source) => {
+  const notify = (rowIdxs, source, tick) => {
     current = rowIdxs;
+    activeTickEl = rowIdxs.length ? tick ?? null : null;
+    selectionIsPeriod = rowIdxs.length > 0 && periodTickSuppressesFeedback(!!tick, chartOwnsTimeline(container));
     paintSelection();
     for (const cb of subs) {
       try {
@@ -1160,7 +1275,7 @@ function createChartHost(container, config) {
     const d = e?.detail || {};
     xfAt = Date.now();
     if (d.clear) notify([], d.source || "chart");
-    else if (d.mark) notify(parseRowIdxs(d.mark.getAttribute?.(ROW_IDX_ATTR)), d.source || "chart");
+    else if (d.mark) notify(parseRowIdxs(d.mark.getAttribute?.(ROW_IDX_ATTR)), d.source || "chart", d.mark);
   };
   const resolver = createMarkResolver({
     root: container,
@@ -1180,17 +1295,18 @@ function createChartHost(container, config) {
     }
     const rows = parseRowIdxs(el.getAttribute(ROW_IDX_ATTR));
     if (!rows.length) return;
+    const tick = el.classList?.contains?.(AXIS_FILTER_CLASS) ? el : null;
     if (e?.ctrlKey || e?.metaKey || e?.shiftKey) {
       const next = new Set(current ?? []);
       for (const r of rows) {
         if (next.has(r)) next.delete(r);
         else next.add(r);
       }
-      notify(Array.from(next), "user");
+      notify(Array.from(next), "user", tick);
       return;
     }
     const same = !!current && current.length === rows.length && rows.every((r) => current.includes(r));
-    notify(same ? [] : rows, "user");
+    notify(same ? [] : rows, "user", same ? null : tick);
   };
   container.addEventListener(XFILTER_REFRESH_EVENT, onXf);
   container.addEventListener("click", onClick);
@@ -1235,6 +1351,7 @@ function createChartHost(container, config) {
       } catch (err) {
         throw explainRenderFailure(err, d3);
       }
+      ensureCrossfilterHitTargets(container, doc);
       paintSelection();
     },
     setOptions(partial) {
@@ -1303,8 +1420,11 @@ export {
   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,
@@ -1327,6 +1447,7 @@ export {
   L3,
   buildRenderPayload,
   createMarkResolver,
+  ensureCrossfilterHitTargets,
   requiredD3Plugins,
   explainRenderFailure,
   stripEsmExports,

package/dist/index.mjs

@@ -1,5 +1,6 @@
 /*! @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 {
+  ACTIVE_TICK_CLASS,
   ANIM_LOOP_DELAY_DEFAULT,
   ANIM_LOOP_DELAY_MIN,
   ANIM_MAX_IDEAL_FRAMES_DEFAULT,
@@ -30,20 +31,23 @@ import {
   SELECTION_ACTIVE_CLASS,
   XFILTER_REFRESH_EVENT,
   buildRenderPayload,
+  chartOwnsTimeline,
   clearGeoCache,
   compileRenderFn,
   createChartHost,
   createMarkResolver,
+  ensureCrossfilterHitTargets,
   explainRenderFailure,
   geoAssetFor,
   geoFromCache,
   loadGeo,
+  periodTickSuppressesFeedback,
   registerGeo,
   registerGeoAsset,
   requiredD3Plugins,
   resolveOptions,
   stripEsmExports
-} from "./chunk-KT4RNDZ3.mjs";
+} from "./chunk-XEVWH2RK.mjs";
 import "./chunk-A2GMXZP7.mjs";
 
 // src/trivial.ts
@@ -739,6 +743,7 @@ function registerCityTable(packed) {
   L3(packed);
 }
 export {
+  ACTIVE_TICK_CLASS,
   ANIM_LOOP_DELAY_DEFAULT,
   ANIM_LOOP_DELAY_MIN,
   ANIM_MAX_IDEAL_FRAMES_DEFAULT,
@@ -773,18 +778,21 @@ export {
   buildRenderPayload,
   buildReviewWire,
   captureSvgSnapshot,
+  chartOwnsTimeline,
   clearGeoCache,
   compileRenderFn,
   compileTrivialSource,
   computeSelectionCard,
   createChartHost,
   createMarkResolver,
+  ensureCrossfilterHitTargets,
   explainRenderFailure,
   geoAssetFor,
   geoFromCache,
   loadGeo,
   newQualifyGroupState,
   normaliseAggregation,
+  periodTickSuppressesFeedback,
   planTrivialChart,
   qualifyGroupHeadingFor,
   rasterizeSvgToPngDataUrl,

package/dist/react.mjs

@@ -4,7 +4,7 @@ import {
   createChartHost,
   geoFromCache,
   loadGeo
-} from "./chunk-KT4RNDZ3.mjs";
+} from "./chunk-XEVWH2RK.mjs";
 import "./chunk-A2GMXZP7.mjs";
 
 // src/react.tsx

package/dist/types/contract.d.ts

@@ -19,8 +19,11 @@ export declare const CONTAINER_SLOT_UI_STATE = "__lchUiState";
 export declare const HOST_CONTAINER_CLASS = "bic-chart-host";
 export declare const SELECTION_ACTIVE_CLASS = "lch-has-selection";
 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 function chartOwnsTimeline(container: any): boolean;
+export declare function periodTickSuppressesFeedback(isAxisTick: boolean, ownsTimeline: boolean): boolean;
 export declare const ANIM_PLAY_SPEED_DEFAULT = 1000;
 export declare const ANIM_PLAY_SPEED_MIN = 250;
 export declare const ANIM_PLAY_SPEED_MAX = 5000;

package/dist/types/hitTargets.d.ts

@@ -0,0 +1,15 @@
+export interface HitTargetReport {
+    /** tagged elements examined */
+    tagged: number;
+    /** transparent hit rects injected into inert <g> marks */
+    hitRects: number;
+    /** painted elements flipped off pointer-events:none */
+    peFlips: number;
+    /** of those, how many were UNFILLED and so got 'stroke' rather than 'all' */
+    peStrokeOnly: number;
+}
+/**
+ * Make every declared cross-filter mark inside `container` actually hittable.
+ * Safe to call repeatedly; returns what it changed (all zeros = nothing needed doing).
+ */
+export declare function ensureCrossfilterHitTargets(container: any, doc?: any): HitTargetReport;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./contract";
+export { HOST_CONTRACT_VERSION, GEO_POINT_PRECISIONS, MARK_CLASS, LEGEND_MARK_CLASS, AXIS_FILTER_CLASS, ROW_IDX_ATTR, XFILTER_REFRESH_EVENT, CONTAINER_SLOT_ANIM_STOP, CONTAINER_SLOT_XF_CLEAR, CONTAINER_SLOT_INITIAL_XF_MARK, CONTAINER_SLOT_UI_STATE, 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, COLOR_SCALE_SELF_CLAMP_PCT_DEFAULT, COLOR_SCALE_SELF_CLAMP_PCT_MIN, COLOR_SCALE_SELF_CLAMP_PCT_MAX, FLIP_MODE_DEFAULT, type GeoPointPrecision, type GeoMapKind, type TimelineStyle, type FlipMode, type ColorScaleScope, type RenderOptions, } from "./contract";
 export { resolveOptions, type ResolveOptionsInput } from "./defaults";
 export { loadGeo, geoFromCache, registerGeo, registerGeoAsset, geoAssetFor, clearGeoCache, type GeoAssetName, } from "./geoLazy";
 /** REPLACE the bundled city gazetteer with another packed table. Rarely needed — see the
@@ -13,3 +13,4 @@ export { shouldReview, buildReviewWire, bareBase64, actionFor, type ReviewGate,
 export { askApplyImprovements, type ReviewDialogOptions, type ReviewDialogText } from "./reviewDialog";
 export { qualifyGroupHeadingFor, newQualifyGroupState, type QualifyGroupRow, type QualifyGroupState, type QualifyGroupHeading, } from "./qualifyGroups";
 export { computeSelectionCard, normaliseAggregation, type SelectionCardModel, type SelectionCardLine, type SelectionCardOptions, } from "./selectionCard";
+export { ensureCrossfilterHitTargets, type HitTargetReport } from "./hitTargets";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bicharts/chart-host",
-  "version": "0.5.38",
+  "version": "0.5.40",
   "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",