@bicharts/chart-host 0.6.63 → 0.6.64

package/dist/{chunk-ZTTBWP3I.mjs → chunk-VPGFFVWA.mjs}

@@ -567,15 +567,15 @@ function decideLabelColor(textColor, fill, fillOpacity, pageBg, minContrast = MI
   return useLight ? { fix: true, color: LIGHT_TEXT, reason: "fixed-light" } : { fix: true, color: DARK_TEXT, reason: "fixed-dark" };
 }
 var GLYPH_SAMPLE_N = 3;
-function glyphSampleGrid(box, n = GLYPH_SAMPLE_N) {
+function glyphSampleGrid(box2, n = GLYPH_SAMPLE_N) {
   const out = [];
-  if (!box || !(box.width > 0) || !(box.height > 0) || !(n >= 1)) return out;
+  if (!box2 || !(box2.width > 0) || !(box2.height > 0) || !(n >= 1)) return out;
   const k3 = Math.floor(n);
   for (let i = 0; i < k3; i++) {
     for (let j4 = 0; j4 < k3; j4++) {
       out.push({
-        x: box.left + box.width * (i + 0.5) / k3,
-        y: box.top + box.height * (j4 + 0.5) / k3
+        x: box2.left + box2.width * (i + 0.5) / k3,
+        y: box2.top + box2.height * (j4 + 0.5) / k3
       });
     }
   }
@@ -586,14 +586,14 @@ var STRADDLE_ROWS = 2;
 var STRADDLE_MIN_SHARE = 0.125;
 var STRADDLE_TARGET_CONTRAST = 4.5;
 var STRADDLE_PILL_ALPHA = 0.9;
-function straddleSampleGrid(box) {
+function straddleSampleGrid(box2) {
   const out = [];
-  if (!box || !(box.width > 0) || !(box.height > 0)) return out;
+  if (!box2 || !(box2.width > 0) || !(box2.height > 0)) return out;
   for (let i = 0; i < STRADDLE_COLS; i++) {
     for (let j4 = 0; j4 < STRADDLE_ROWS; j4++) {
       out.push({
-        x: box.left + box.width * (i + 0.5) / STRADDLE_COLS,
-        y: box.top + box.height * (j4 + 0.5) / STRADDLE_ROWS
+        x: box2.left + box2.width * (i + 0.5) / STRADDLE_COLS,
+        y: box2.top + box2.height * (j4 + 0.5) / STRADDLE_ROWS
       });
     }
   }
@@ -2451,9 +2451,9 @@ function createMarkResolver(env) {
           const r2 = el.getBoundingClientRect ? el.getBoundingClientRect() : null;
           if (!r2 || r2.width <= 0 || r2.height <= 0) continue;
           if (x3 < r2.left || x3 > r2.right || y2 < r2.top || y2 > r2.bottom) continue;
-          const area = r2.width * r2.height;
-          if (area < bestArea) {
-            bestArea = area;
+          const area2 = r2.width * r2.height;
+          if (area2 < bestArea) {
+            bestArea = area2;
             best = el;
           }
         }
@@ -3062,15 +3062,15 @@ function ctmScaleOf(m4) {
 }
 function svgInkReach(svg) {
   try {
-    const box = svg.getBoundingClientRect();
-    if (!(box.width > 0) || !(box.height > 0)) return null;
+    const box2 = svg.getBoundingClientRect();
+    if (!(box2.width > 0) || !(box2.height > 0)) return null;
     const els = svg.querySelectorAll(FIT_CONTENT_SELECTOR);
     const clipOf = clipWindowReader(svg);
     let right = -Infinity, bottom = -Infinity, seen = 0;
     for (let i = 0; i < els.length && seen < FIT_WALK_CAP; i++) {
       const r2 = els[i].getBoundingClientRect();
       if (r2.width <= 0 && r2.height <= 0) continue;
-      if (isPhantomBox(r2.width, r2.height, box.width, box.height)) continue;
+      if (isPhantomBox(r2.width, r2.height, box2.width, box2.height)) continue;
       let rr = r2.right, rb = r2.bottom;
       const clip = clipOf(els[i]);
       if (clip) {
@@ -3083,51 +3083,39 @@ function svgInkReach(svg) {
       if (rb > bottom) bottom = rb;
     }
     if (seen === 0) return null;
-    return { right: right - box.left, bottom: bottom - box.top };
+    return { right: right - box2.left, bottom: bottom - box2.top };
+  } catch {
+    return null;
+  }
+}
+function clipWindowOf(el) {
+  try {
+    const m4 = /url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/.exec(el.getAttribute("clip-path") || "");
+    const cp = m4 ? (el.closest("svg") ?? el.ownerDocument).querySelector(`clipPath[id="${m4[1].replace(/"/g, '\\"')}"]`) : null;
+    const ctm = cp ? el.getScreenCTM?.() : null;
+    if (!cp || !ctm || cp.getAttribute("clipPathUnits") === "objectBoundingBox") return null;
+    let l2 = Infinity, t = Infinity, r2 = -Infinity, b4 = -Infinity;
+    for (let i = 0; i < cp.children.length; i++) {
+      const bb = cp.children[i].getBBox?.();
+      if (!bb || !(bb.width > 0) || !(bb.height > 0)) continue;
+      for (const [x3, y2] of [[bb.x, bb.y], [bb.x + bb.width, bb.y], [bb.x, bb.y + bb.height], [bb.x + bb.width, bb.y + bb.height]]) {
+        const sx = ctm.a * x3 + ctm.c * y2 + ctm.e, sy = ctm.b * x3 + ctm.d * y2 + ctm.f;
+        l2 = Math.min(l2, sx);
+        t = Math.min(t, sy);
+        r2 = Math.max(r2, sx);
+        b4 = Math.max(b4, sy);
+      }
+    }
+    return isFinite(r2) && isFinite(b4) ? { left: l2, top: t, right: r2, bottom: b4 } : null;
   } catch {
     return null;
   }
 }
 function clipWindowReader(svg) {
   const own = /* @__PURE__ */ new Map();
-  const byId = (id) => {
-    try {
-      return svg.querySelector(`clipPath[id="${id.replace(/"/g, '\\"')}"]`);
-    } catch {
-      return null;
-    }
-  };
   const windowOf = (el) => {
-    if (own.has(el)) return own.get(el);
-    let win = null;
-    try {
-      const ref = el.getAttribute("clip-path") || "";
-      const m4 = /url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/.exec(ref);
-      const cp = m4 ? byId(m4[1]) : null;
-      const ctm = cp ? el.getScreenCTM?.() : null;
-      if (cp && ctm && cp.getAttribute("clipPathUnits") !== "objectBoundingBox") {
-        let r2 = -Infinity, b4 = -Infinity;
-        for (let i = 0; i < cp.children.length; i++) {
-          const bb = cp.children[i].getBBox?.();
-          if (!bb || !(bb.width > 0) || !(bb.height > 0)) continue;
-          for (const [x3, y2] of [
-            [bb.x, bb.y],
-            [bb.x + bb.width, bb.y],
-            [bb.x, bb.y + bb.height],
-            [bb.x + bb.width, bb.y + bb.height]
-          ]) {
-            const sx = ctm.a * x3 + ctm.c * y2 + ctm.e, sy = ctm.b * x3 + ctm.d * y2 + ctm.f;
-            if (sx > r2) r2 = sx;
-            if (sy > b4) b4 = sy;
-          }
-        }
-        if (isFinite(r2) && isFinite(b4)) win = { right: r2, bottom: b4 };
-      }
-    } catch {
-      win = null;
-    }
-    own.set(el, win);
-    return win;
+    if (!own.has(el)) own.set(el, clipWindowOf(el));
+    return own.get(el);
   };
   return (el) => {
     let acc = null;
@@ -3895,7 +3883,34 @@ function invalidSentinelReason(text2, max = 240) {
 // src/annotations.ts
 var ANNOTATION_LAYER_CLASS = "bic-annotations";
 var ANNOTATION_CLASS = "bic-annotation";
+var ZOOM_PAD_CLASS = "llm-zoom-pad";
 var text = (v) => v == null ? "" : String(v).trim();
+var FREE = { l: -Infinity, t: -Infinity, r: Infinity, b: Infinity };
+var box = (r2) => ({ l: r2.left, t: r2.top, r: r2.right, b: r2.bottom });
+var area = (b4) => (b4.r - b4.l) * (b4.b - b4.t);
+var cut = (a3, b4) => {
+  if (!a3) return null;
+  const c2 = { l: Math.max(a3.l, b4.l), t: Math.max(a3.t, b4.t), r: Math.min(a3.r, b4.r), b: Math.min(a3.b, b4.b) };
+  return c2.r > c2.l && c2.b > c2.t ? c2 : null;
+};
+function shapeTest(mark) {
+  const g5 = mark;
+  let inv = null;
+  try {
+    inv = g5?.isPointInFill ? g5.getScreenCTM?.()?.inverse() ?? null : null;
+  } catch {
+    inv = null;
+  }
+  if (!g5 || !inv) return () => true;
+  const m4 = inv;
+  return (x3, y2) => {
+    try {
+      return g5.isPointInFill({ x: m4.a * x3 + m4.c * y2 + m4.e, y: m4.b * x3 + m4.d * y2 + m4.f });
+    } catch {
+      return true;
+    }
+  };
+}
 var parseIdxs = (s2) => (s2 || "").split(",").map((x3) => parseInt(x3, 10)).filter((n) => Number.isFinite(n));
 function createAnnotationLayer(container, onClick) {
   let list = [];
@@ -3952,6 +3967,37 @@ function createAnnotationLayer(container, onClick) {
       else marksByRow.set(r2, [m4]);
     }
     const origin = container.getBoundingClientRect();
+    const open = origin.width > 0 && origin.height > 0 ? box(origin) : FREE;
+    const clipOf = /* @__PURE__ */ new Map();
+    const viewOf = (m4) => {
+      let v = open;
+      const svg = m4.closest("svg");
+      if (svg) {
+        const s2 = svg.getBoundingClientRect();
+        if (s2.width > 0 && s2.height > 0) v = cut(v, box(s2));
+      }
+      for (let el = m4.parentElement; v && el && el !== svg && el !== container; el = el.parentElement) {
+        if (!clipOf.has(el)) {
+          const w4 = clipWindowOf(el);
+          clipOf.set(el, w4 && box(w4));
+        }
+        const w3 = clipOf.get(el);
+        if (w3) v = cut(v, w3);
+      }
+      return v;
+    };
+    const controls = Array.from(container.querySelectorAll(`.${CONTROL_CLASS}, .${ZOOM_PAD_CLASS}`)).map((c2) => c2.getBoundingClientRect()).filter((r2) => r2.width > 0 && r2.height > 0).map(box);
+    const clear = (v, len, mark) => {
+      const hw = Math.max(16, len * 6 + 8) / 2, hh = 8, g5 = 2;
+      const cx = (v.l + v.r) / 2, cy = (v.t + v.b) / 2;
+      const free = (x3, y2) => x3 >= v.l && x3 <= v.r && y2 >= v.t && y2 <= v.b && controls.every((c2) => x3 + hw <= c2.l || x3 - hw >= c2.r || y2 + hh <= c2.t || y2 - hh >= c2.b);
+      const onShape = shapeTest(mark);
+      const tries = [[cx, cy]];
+      for (let i = 0; i <= 8; i++) for (let j4 = 0; j4 <= 6; j4++) tries.push([v.l + (v.r - v.l) * i / 8, v.t + (v.b - v.t) * j4 / 6]);
+      tries.sort((p4, q2) => Math.hypot(p4[0] - cx, p4[1] - cy) - Math.hypot(q2[0] - cx, q2[1] - cy));
+      for (const c2 of controls) tries.push([cx, c2.b + hh + g5], [cx, c2.t - hh - g5], [c2.l - hw - g5, cy], [c2.r + hw + g5, cy]);
+      return tries.find(([x3, y2]) => free(x3, y2) && onShape(x3, y2)) ?? tries.find(([x3, y2]) => free(x3, y2)) ?? null;
+    };
     let shown = 0;
     for (const a3 of list) {
       const pairs = (a3.where ? Object.entries(a3.where) : a3.column != null ? [[a3.column, a3.value]] : []).map(([c2, v]) => [names.indexOf(c2), text(v)]);
@@ -3961,23 +4007,30 @@ function createAnnotationLayer(container, onClick) {
         if (pairs.every(([ci, v]) => text(row?.[ci]) === v)) for (const m4 of marksByRow.get(r2) ?? []) hits.add(m4);
       });
       if (!hits.size) continue;
-      shown++;
-      let best = null;
+      let best = null, bestMark = null, laidOut = false;
       for (const m4 of hits) {
         const b4 = m4.getBoundingClientRect();
-        if (!best || b4.width * b4.height > best.width * best.height) best = b4;
+        if (!(b4.width > 0 && b4.height > 0)) continue;
+        laidOut = true;
+        const v = cut(box(b4), viewOf(m4));
+        if (v && (!best || area(v) > area(best))) {
+          best = v;
+          bestMark = m4;
+        }
       }
+      const pt2 = best ? clear(best, (a3.label ?? "\u2022").length, bestMark) : null;
+      if (laidOut && !pt2) continue;
+      shown++;
       const badge = doc.createElement("div");
       badge.className = ANNOTATION_CLASS;
       badge.textContent = a3.label ?? "\u2022";
       if (a3.title) badge.setAttribute("title", a3.title);
       badge.setAttribute("role", "button");
       badge.setAttribute("aria-label", a3.title ? `Note: ${a3.title}` : `Note on ${want}`);
-      const laidOut = !!best && best.width > 0 && best.height > 0;
       Object.assign(badge.style, {
         position: "absolute",
-        left: `${Math.round(laidOut ? best.left - origin.left + best.width / 2 : 0)}px`,
-        top: `${Math.round(laidOut ? best.top - origin.top + best.height / 2 : 0)}px`,
+        left: `${Math.round(pt2 ? pt2[0] - origin.left : 0)}px`,
+        top: `${Math.round(pt2 ? pt2[1] - origin.top : 0)}px`,
         transform: "translate(-50%, -50%)",
         minWidth: "16px",
         height: "16px",

package/dist/index.mjs

@@ -122,7 +122,7 @@ import {
   toSourceRows,
   unpinScrolledAxis,
   valuePlacementFlag
-} from "./chunk-ZTTBWP3I.mjs";
+} from "./chunk-VPGFFVWA.mjs";
 import "./chunk-A2GMXZP7.mjs";
 import {
   ACTIVE_TICK_CLASS,

package/dist/react.mjs

@@ -22,7 +22,7 @@ import {
   loadGeo,
   syncMemberSelection,
   toSourceRows
-} from "./chunk-ZTTBWP3I.mjs";
+} from "./chunk-VPGFFVWA.mjs";
 import "./chunk-A2GMXZP7.mjs";
 import "./chunk-WNGJUPEI.mjs";
 import "./chunk-GHODWOAL.mjs";

package/dist/types/annotations.d.ts

@@ -23,6 +23,9 @@ export interface AnnotationReport {
 }
 export declare const ANNOTATION_LAYER_CLASS = "bic-annotations";
 export declare const ANNOTATION_CLASS = "bic-annotation";
+/** The class the d3.llmGeoZoom helper gives its button pad - a control drawn by a generated chart without the
+ *  contract's CONTROL_CLASS, so the badge layer names it too. */
+export declare const ZOOM_PAD_CLASS = "llm-zoom-pad";
 export interface AnnotationLayer {
     set(list: MarkAnnotation[]): void;
     /** Redraw against the container's current marks and the given data. */

package/dist/types/fitDom.d.ts

@@ -7,6 +7,15 @@ export declare function svgInkReach(svg: SVGSVGElement): {
     right: number;
     bottom: number;
 } | null;
+/** The window ONE element's own clip-path attribute opens, in screen coordinates - or null: no clip, a clip in
+ *  objectBoundingBox units, or one that won't measure. Shared by the frame fit (right/bottom) and the note badges
+ *  (the whole window). The clipPath is looked up within the element's own svg. */
+export declare function clipWindowOf(el: Element): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+} | null;
 export type InkReach = (el: Element) => {
     right: number;
     bottom: number;

package/package.json

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