@bicharts/chart-host 0.5.62 → 0.5.64

package/dist/{chunk-WG4NTR5H.mjs → chunk-YDFJF2UG.mjs}

@@ -1308,6 +1308,210 @@ function hitBandFlag(c) {
   return c.uncovered > 0 ? "hitband:d3:thin" : "hitband:d3:ok";
 }
 
+// src/fit.ts
+var SCROLL_SLACK_PX = 8;
+function needsScroll(contentPx, viewportPx, slackPx = SCROLL_SLACK_PX) {
+  if (!isFinite(contentPx) || !isFinite(viewportPx)) return false;
+  if (contentPx <= 0 || viewportPx <= 0) return false;
+  return contentPx - viewportPx > slackPx;
+}
+function contentExtentOf(boxes) {
+  if (!boxes || boxes.length === 0) return { w: 0, h: 0, source: "none" };
+  const usable = boxes.filter((b2) => b2 && isFinite(b2.right) && isFinite(b2.bottom) && (b2.right > 0 || b2.bottom > 0));
+  if (usable.length === 0) return { w: 0, h: 0, source: "none" };
+  const inFlow = usable.filter((b2) => !b2.floating);
+  const counted = inFlow.length > 0 ? inFlow : usable;
+  let w = 0, h3 = 0;
+  for (const b2 of counted) {
+    if (b2.right > w) w = b2.right;
+    if (b2.bottom > h3) h3 = b2.bottom;
+  }
+  return { w, h: h3, source: inFlow.length > 0 ? "in-flow" : "all-floating" };
+}
+function scrollFitFor(contentW, contentH, viewportW, viewportH, slackPx = SCROLL_SLACK_PX) {
+  return {
+    overflowX: needsScroll(contentW, viewportW, slackPx) ? "auto" : "hidden",
+    overflowY: needsScroll(contentH, viewportH, slackPx) ? "auto" : "hidden"
+  };
+}
+var FIT_CONTENT_SELECTOR = "text, .d3-mark, .d3-legend-mark";
+var PHANTOM_FRACTION = 0.95;
+function isPhantomBox(w, h3, refW, refH) {
+  return w > refW * PHANTOM_FRACTION || h3 > refH * PHANTOM_FRACTION;
+}
+var MAX_FRAME_GROW_FACTOR = 20;
+function planFrameGrow(inkBottomPx, elHeightPx, viewBoxH, ctmScale, slackPx = SCROLL_SLACK_PX, maxFactor = MAX_FRAME_GROW_FACTOR) {
+  const none = (reason) => ({ grow: false, heightPx: elHeightPx, viewBoxH, reason });
+  if (!isFinite(inkBottomPx) || !isFinite(elHeightPx) || elHeightPx <= 0) return none("unmeasurable");
+  if (!needsScroll(inkBottomPx, elHeightPx, slackPx)) return none("fits");
+  if (inkBottomPx > elHeightPx * maxFactor) return none("beyond-ceiling");
+  const heightPx = Math.ceil(inkBottomPx);
+  const delta = heightPx - elHeightPx;
+  if (!(viewBoxH > 0)) return { grow: true, heightPx, viewBoxH, reason: "grow-no-viewbox" };
+  if (!(ctmScale > 0) || !isFinite(ctmScale)) return none("no-scale");
+  return { grow: true, heightPx, viewBoxH: viewBoxH + delta / ctmScale, reason: "grow" };
+}
+
+// src/fitDom.ts
+var FIT_WALK_CAP = 8e3;
+function ctmScaleOf(m2) {
+  if (!m2) return 0;
+  const s = Math.hypot(m2.a, m2.b);
+  return isFinite(s) && s > 0 ? s : 0;
+}
+function svgInkReach(svg) {
+  try {
+    const box = svg.getBoundingClientRect();
+    if (!(box.width > 0) || !(box.height > 0)) return null;
+    const els = svg.querySelectorAll(FIT_CONTENT_SELECTOR);
+    let right = -Infinity, bottom = -Infinity, seen = 0;
+    for (let i = 0; i < els.length && seen < FIT_WALK_CAP; i++) {
+      const r = els[i].getBoundingClientRect();
+      if (r.width <= 0 && r.height <= 0) continue;
+      if (isPhantomBox(r.width, r.height, box.width, box.height)) continue;
+      seen++;
+      if (r.right > right) right = r.right;
+      if (r.bottom > bottom) bottom = r.bottom;
+    }
+    if (seen === 0) return null;
+    return { right: right - box.left, bottom: bottom - box.top };
+  } catch {
+    return null;
+  }
+}
+function measureContainerBoxes(c, inkOf) {
+  const boxes = [];
+  if (!c || !c.children) return boxes;
+  const view = c.ownerDocument && c.ownerDocument.defaultView || globalThis;
+  const cRect = c.getBoundingClientRect();
+  for (let i = 0; i < c.children.length; i++) {
+    const el = c.children[i];
+    let floating = false;
+    try {
+      const cs = view.getComputedStyle(el);
+      if (cs.display === "none") continue;
+      floating = cs.position === "absolute" || cs.position === "fixed";
+    } catch {
+    }
+    const r = el.getBoundingClientRect();
+    let right = r.right - cRect.left - c.clientLeft + c.scrollLeft;
+    let bottom = r.bottom - cRect.top - c.clientTop + c.scrollTop;
+    if (inkOf) {
+      try {
+        const ink = inkOf(el);
+        if (ink) {
+          const originX = r.left - cRect.left - c.clientLeft + c.scrollLeft;
+          const originY = r.top - cRect.top - c.clientTop + c.scrollTop;
+          if (isFinite(ink.right)) right = Math.max(right, originX + ink.right);
+          if (isFinite(ink.bottom)) bottom = Math.max(bottom, originY + ink.bottom);
+        }
+      } catch {
+      }
+    }
+    boxes.push({ right, bottom, floating });
+  }
+  return boxes;
+}
+function fitReadingFor(lane, c, slackPx = SCROLL_SLACK_PX, inkOf) {
+  if (!c) return null;
+  const viewW = c.clientWidth, viewH = c.clientHeight;
+  if (!(viewW > 0) || !(viewH > 0)) return null;
+  const boxes = measureContainerBoxes(c, inkOf);
+  const extent = contentExtentOf(boxes);
+  const contentW = extent.source === "none" ? c.scrollWidth : extent.w;
+  const contentH = extent.source === "none" ? c.scrollHeight : extent.h;
+  if (!isFinite(contentW) || !isFinite(contentH)) return null;
+  return {
+    lane,
+    contentW: Math.round(contentW),
+    contentH: Math.round(contentH),
+    viewW,
+    viewH,
+    overflowsX: needsScroll(contentW, viewW, slackPx),
+    overflowsY: needsScroll(contentH, viewH, slackPx),
+    extentSource: extent.source,
+    boxes: boxes.length,
+    floating: boxes.filter((b2) => b2.floating).length,
+    scrollW: c.scrollWidth,
+    scrollH: c.scrollHeight
+  };
+}
+function fitRenderedChart(container, opts = {}) {
+  const slackPx = opts.slackPx ?? SCROLL_SLACK_PX;
+  const result = {
+    grew: false,
+    growFrom: 0,
+    growTo: 0,
+    growReason: "no-container",
+    overflowX: "hidden",
+    overflowY: "hidden",
+    reading: null
+  };
+  if (!container) return result;
+  try {
+    let svg = null;
+    for (let i = 0; i < container.children.length && !svg; i++) {
+      const el = container.children[i];
+      if (el.tagName && el.tagName.toLowerCase() === "svg") svg = el;
+    }
+    if (!svg) svg = container.querySelector("svg");
+    let inkCache;
+    const svgInk = (el) => {
+      if (inkCache === void 0) inkCache = svgInkReach(el);
+      return inkCache;
+    };
+    const inkOf = (el) => el && el.tagName && el.tagName.toLowerCase() === "svg" ? svgInk(el) : null;
+    if (svg && opts.grow !== false) {
+      try {
+        const ink = svgInk(svg);
+        const elH = svg.getBoundingClientRect().height;
+        const vb = svg.viewBox && svg.viewBox.baseVal ? svg.viewBox.baseVal.height : 0;
+        const ctm = typeof svg.getScreenCTM === "function" ? svg.getScreenCTM() : null;
+        const plan = planFrameGrow(
+          ink ? ink.bottom : NaN,
+          elH,
+          vb,
+          ctmScaleOf(ctm),
+          slackPx
+        );
+        result.growFrom = Math.round(elH);
+        result.growTo = plan.heightPx;
+        result.growReason = plan.reason;
+        if (plan.grow) {
+          svg.setAttribute("height", String(plan.heightPx));
+          if (vb > 0) {
+            const b2 = svg.viewBox.baseVal;
+            svg.setAttribute("viewBox", `${b2.x} ${b2.y} ${b2.width} ${plan.viewBoxH}`);
+          }
+          result.grew = true;
+        }
+      } catch {
+        result.growReason = "grow-threw";
+      }
+    } else if (!svg) {
+      result.growReason = "no-svg";
+    } else {
+      result.growReason = "grow-disabled";
+    }
+    const reading = fitReadingFor(opts.lane ?? "chart", container, slackPx, inkOf);
+    result.reading = reading;
+    const boxes = measureContainerBoxes(container, inkOf);
+    const extent = contentExtentOf(boxes);
+    const svgBox = svg ? svg.getBoundingClientRect() : null;
+    const contentW = extent.source === "none" ? Math.max(container.scrollWidth, svgBox ? svgBox.width : 0) : extent.w;
+    const contentH = extent.source === "none" ? Math.max(container.scrollHeight, svgBox ? svgBox.height : 0) : extent.h;
+    const fit = scrollFitFor(contentW, contentH, container.clientWidth, container.clientHeight, slackPx);
+    result.overflowX = fit.overflowX;
+    result.overflowY = fit.overflowY;
+    if (opts.applyOverflow !== false) {
+      container.style.overflowX = fit.overflowX;
+      container.style.overflowY = fit.overflowY;
+    }
+  } catch {
+  }
+  return result;
+}
+
 // src/host.ts
 function sessionViewStateProvider(container) {
   const holder = container;
@@ -1569,6 +1773,7 @@ function createChartHost(container, config) {
   container.addEventListener("click", onClick);
   container.classList?.add(HOST_CONTAINER_CLASS);
   ensureAffordanceStyles();
+  const fitOpts = config.fit ?? true;
   const stopAnim = () => {
     const s = container[CONTAINER_SLOT_ANIM_STOP];
     if (typeof s === "function") {
@@ -1637,6 +1842,13 @@ function createChartHost(container, config) {
         } catch {
         }
       }
+      if (fitOpts !== false) {
+        try {
+          const r = fitRenderedChart(container, fitOpts === true ? {} : fitOpts);
+          config.onFit?.(r);
+        } catch {
+        }
+      }
     },
     setOptions(partial) {
       raw = { ...raw, ...partial };
@@ -1745,6 +1957,20 @@ export {
   MIN_HIT_BAND_PX,
   censusHitBands,
   hitBandFlag,
+  SCROLL_SLACK_PX,
+  needsScroll,
+  contentExtentOf,
+  scrollFitFor,
+  FIT_CONTENT_SELECTOR,
+  PHANTOM_FRACTION,
+  isPhantomBox,
+  MAX_FRAME_GROW_FACTOR,
+  planFrameGrow,
+  ctmScaleOf,
+  svgInkReach,
+  measureContainerBoxes,
+  fitReadingFor,
+  fitRenderedChart,
   sessionViewStateProvider,
   noopViewStateProvider,
   requiredD3Plugins,

package/dist/index.mjs

@@ -21,6 +21,7 @@ import {
   D,
   DIM_OPACITY_DEFAULT,
   DIM_OPACITY_VAR,
+  FIT_CONTENT_SELECTOR,
   FLIP_MODE_DEFAULT,
   G,
   GEO_POINT_PRECISIONS,
@@ -31,8 +32,11 @@ import {
   LIFT_SELECTED_CLASS,
   MARK_CLASS,
   MARK_SELECTED_CLASS,
+  MAX_FRAME_GROW_FACTOR,
   MIN_HIT_BAND_PX,
+  PHANTOM_FRACTION,
   ROW_IDX_ATTR,
+  SCROLL_SLACK_PX,
   SELECTION_ACTIVE_CLASS,
   VALUE_AXIS_BASELINE_DEFAULT,
   XFILTER_REFRESH_EVENT,
@@ -43,26 +47,36 @@ import {
   chartOwnsTimeline,
   clearGeoCache,
   compileRenderFn,
+  contentExtentOf,
   createChartHost,
   createMarkResolver,
+  ctmScaleOf,
   ensureCrossfilterHitTargets,
   explainRenderFailure,
+  fitReadingFor,
+  fitRenderedChart,
   geoAssetFor,
   geoFromCache,
   hitBandFlag,
   isBlankRender,
+  isPhantomBox,
   loadGeo,
+  measureContainerBoxes,
   ne,
+  needsScroll,
   noopViewStateProvider,
   periodTickSuppressesFeedback,
+  planFrameGrow,
   registerGeo,
   registerGeoAsset,
   requiredD3Plugins,
   resolveOptions,
+  scrollFitFor,
   sessionViewStateProvider,
   stripEsmExports,
+  svgInkReach,
   te
-} from "./chunk-WG4NTR5H.mjs";
+} from "./chunk-YDFJF2UG.mjs";
 import "./chunk-A2GMXZP7.mjs";
 
 // src/trivial.ts
@@ -1011,6 +1025,7 @@ export {
   FILTER_MIN_TERM_CHARS,
   FILTER_MIN_WIDTH_PX,
   FILTER_ROW_PX,
+  FIT_CONTENT_SELECTOR,
   FLIP_MODE_DEFAULT,
   GEO_POINT_PRECISIONS,
   HOST_CONTAINER_CLASS,
@@ -1020,8 +1035,11 @@ export {
   LIFT_SELECTED_CLASS,
   MARK_CLASS,
   MARK_SELECTED_CLASS,
+  MAX_FRAME_GROW_FACTOR,
   MIN_HIT_BAND_PX,
+  PHANTOM_FRACTION,
   ROW_IDX_ATTR,
+  SCROLL_SLACK_PX,
   SELECTION_ACTIVE_CLASS,
   VALUE_AXIS_BASELINE_DEFAULT,
   XFILTER_REFRESH_EVENT,
@@ -1043,22 +1061,29 @@ export {
   computeQualifyFilterView,
   computeSelectionCard,
   confirmLaunch,
+  contentExtentOf,
   createChartHost,
   createMarkResolver,
+  ctmScaleOf,
   ensureCrossfilterHitTargets,
   explainRenderFailure,
   filterFitsChooser,
   filterQualifyRows,
+  fitReadingFor,
+  fitRenderedChart,
   geoAssetFor,
   geoFromCache,
   hasRefusalsToShow,
   hitBandFlag,
   inlineFilterGate,
   isBlankRender,
+  isPhantomBox,
   launchFavorStyle,
   launchGenerates,
   listNeedsFilter,
   loadGeo,
+  measureContainerBoxes,
+  needsScroll,
   newQualifyGroupState,
   newQualifyRefusalGroupState,
   noopViewStateProvider,
@@ -1066,6 +1091,7 @@ export {
   normalizeFilterTerm,
   orderRefusalsForDisplay,
   periodTickSuppressesFeedback,
+  planFrameGrow,
   planTrivialChart,
   qualifyAuto,
   qualifyCancel,
@@ -1084,11 +1110,13 @@ export {
   registerGeoAsset,
   requiredD3Plugins,
   resolveOptions,
+  scrollFitFor,
   sessionViewStateProvider,
   shouldOpenChooserOnGenerate,
   shouldOpenInlineChooserOnGenerate,
   shouldReview,
   stripEsmExports,
+  svgInkReach,
   svgNaturalSize,
   svgToDataUrl
 };

package/dist/react.mjs

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

package/dist/types/fit.d.ts

@@ -0,0 +1,36 @@
+export declare const SCROLL_SLACK_PX = 8;
+export declare function needsScroll(contentPx: number, viewportPx: number, slackPx?: number): boolean;
+export interface MeasuredBox {
+    right: number;
+    bottom: number;
+    floating: boolean;
+}
+export interface ContentExtent {
+    w: number;
+    h: number;
+    source: "in-flow" | "all-floating" | "none";
+}
+export declare function contentExtentOf(boxes: MeasuredBox[]): ContentExtent;
+export interface ScrollFit {
+    overflowX: "hidden" | "auto";
+    overflowY: "hidden" | "auto";
+}
+export declare function scrollFitFor(contentW: number, contentH: number, viewportW: number, viewportH: number, slackPx?: number): ScrollFit;
+export declare const FIT_CONTENT_SELECTOR = "text, .d3-mark, .d3-legend-mark";
+export declare const PHANTOM_FRACTION = 0.95;
+export declare function isPhantomBox(w: number, h: number, refW: number, refH: number): boolean;
+export declare const MAX_FRAME_GROW_FACTOR = 20;
+export interface FrameGrowPlan {
+    grow: boolean;
+    heightPx: number;
+    viewBoxH: number;
+    reason: string;
+}
+/**
+ * @param inkBottomPx  how far the chart's ink reaches below the element's top, in px
+ * @param elHeightPx   the element's current rendered height, in px
+ * @param viewBoxH     the current viewBox height in user units, or 0 when there is no viewBox
+ *                     (then user units ARE px and only the element moves)
+ * @param ctmScale     px per user unit, from the live screen CTM
+ */
+export declare function planFrameGrow(inkBottomPx: number, elHeightPx: number, viewBoxH: number, ctmScale: number, slackPx?: number, maxFactor?: number): FrameGrowPlan;

package/dist/types/fitDom.d.ts

@@ -0,0 +1,59 @@
+import type { ContentExtent, MeasuredBox } from "./fit";
+export declare function ctmScaleOf(m: {
+    a: number;
+    b: number;
+} | null | undefined): number;
+export declare function svgInkReach(svg: SVGSVGElement): {
+    right: number;
+    bottom: number;
+} | null;
+export type InkReach = (el: Element) => {
+    right: number;
+    bottom: number;
+} | null;
+export declare function measureContainerBoxes(c: HTMLElement, inkOf?: InkReach): MeasuredBox[];
+export interface FitReading {
+    lane: string;
+    contentW: number;
+    contentH: number;
+    viewW: number;
+    viewH: number;
+    overflowsX: boolean;
+    overflowsY: boolean;
+    extentSource: ContentExtent["source"];
+    boxes: number;
+    floating: number;
+    scrollW: number;
+    scrollH: number;
+}
+export declare function fitReadingFor(lane: string, c: HTMLElement | null | undefined, slackPx?: number, inkOf?: InkReach): FitReading | null;
+export interface FitRenderedChartOptions {
+    /** Name for this container in the returned reading. Purely descriptive. */
+    lane?: string;
+    /** How far content must exceed the viewport before it counts. Defaults to SCROLL_SLACK_PX. */
+    slackPx?: number;
+    /**
+     * Grow the chart's <svg> to whatever it actually drew, so the container has something to
+     * scroll TO. Default true - it is the half of this pass that recovers content that is
+     * otherwise unreachable. Set false to take the READING without touching the chart.
+     */
+    grow?: boolean;
+    /**
+     * Set `overflowX` / `overflowY` on the container. Default true. Set false when the host owns
+     * its own scrolling and only wants to be told.
+     */
+    applyOverflow?: boolean;
+}
+export interface FitRenderedChartResult {
+    /** The frame was grown, so content that was being clipped is now painted. */
+    grew: boolean;
+    growFrom: number;
+    growTo: number;
+    growReason: string;
+    /** What the container's overflow was set to (or would have been). */
+    overflowX: "hidden" | "auto";
+    overflowY: "hidden" | "auto";
+    /** The post-grow reading, or null when nothing could be measured. */
+    reading: FitReading | null;
+}
+export declare function fitRenderedChart(container: HTMLElement | null | undefined, opts?: FitRenderedChartOptions): FitRenderedChartResult;

package/dist/types/host.d.ts

@@ -2,6 +2,7 @@ import { type RenderOptions, type ViewStateProvider } from "./contract";
 import { type ResolveOptionsInput } from "./defaults";
 import { type MarkCensus } from "./blankRender";
 import { type HitBandCensus } from "./hitBands";
+import { type FitRenderedChartOptions, type FitRenderedChartResult } from "./fitDom";
 export type RenderFn = (container: HTMLElement, data: any, options: RenderOptions) => void;
 /**
  * THE SESSION PROVIDER — what every host got hard-coded before contract 1.6.0, now named.
@@ -96,6 +97,24 @@ export interface ChartHostConfig {
     /** The chart's marks are not tagged with the shared contract (a Vega lane names its own
      *  marks), so a mark count proves nothing and the blank verdict is suppressed. */
     contractUntagged?: boolean;
+    /**
+     * DOES THE RENDERED CHART FIT ITS FRAME (2026-09-03)? Runs after every render.
+     *
+     * The outermost <svg> clips at its own viewport in every browser, so a chart that sets
+     * `svg height = options.height` and draws a taller body loses the overflow OUTRIGHT - the
+     * rows past the fold are never painted, and the container's scrollHeight agrees that
+     * everything fits, so nothing anywhere offers a scrollbar. This grows the frame to the ink
+     * the chart actually drew and THEN sets the container's overflow, in that order, because a
+     * scrollbar on an un-grown frame scrolls to nothing.
+     *
+     * DEFAULT ON, because the alternative is silent data loss and the pass only acts when ink is
+     * measurably outside the frame (8px of slack, and a 20x ceiling against a mark parked in the
+     * weeds). Pass `false` for a host that owns its own layout, or an options object to take the
+     * reading without touching the chart (`grow: false`, `applyOverflow: false`).
+     */
+    fit?: boolean | FitRenderedChartOptions;
+    /** The fit result after each render - what was grown, and how the chart measured. */
+    onFit?: (result: FitRenderedChartResult) => void;
 }
 export interface ChartHost {
     render(): void;

package/dist/types/index.d.ts

@@ -18,3 +18,5 @@ export { computeSelectionCard, normaliseAggregation, type SelectionCardModel, ty
 export { ensureCrossfilterHitTargets, type HitTargetReport } from "./hitTargets";
 export { censusMarks, isBlankRender, blankRenderFlag, type MarkCensus, type BlankVerdictInput } from "./blankRender";
 export { censusHitBands, hitBandFlag, MIN_HIT_BAND_PX, type HitBandCensus } from "./hitBands";
+export { SCROLL_SLACK_PX, MAX_FRAME_GROW_FACTOR, PHANTOM_FRACTION, FIT_CONTENT_SELECTOR, needsScroll, contentExtentOf, scrollFitFor, planFrameGrow, isPhantomBox, type MeasuredBox, type ContentExtent, type ScrollFit, type FrameGrowPlan, } from "./fit";
+export { fitRenderedChart, fitReadingFor, measureContainerBoxes, svgInkReach, ctmScaleOf, type FitReading, type InkReach, type FitRenderedChartOptions, type FitRenderedChartResult, } from "./fitDom";

package/package.json

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