@bicharts/chart-host 0.6.84 → 0.6.86

package/README.md

@@ -351,6 +351,70 @@ const report = await assertViewStateConformance(service, {
 expect(report.skipped).toEqual([]);              // nothing went unchecked
 ```
 
+## Keeping a drawn chart readable inside its frame
+
+A generated chart cannot know how wide its own legend text will come out, where its tick labels will
+collide, or how far a label will hang past the frame, because none of that exists until the browser
+has laid the SVG out. `@bicharts/chart-host/legend-fit` measures the rendered chart and repairs what
+it finds. It is opt-in, and a separate entry so a host that never calls it never loads it.
+
+```ts
+import { chartSvgOf } from "@bicharts/chart-host";
+import { reconcileLegendInSvg, fitTextToFrame } from "@bicharts/chart-host/legend-fit";
+
+// After a render, once the SVG is in the document (layout must exist):
+const svg = chartSvgOf(container);
+const result = svg && reconcileLegendInSvg(svg);   // { applied, reason, dx, ext, fit, ... }
+fitTextToFrame(container);                         // grows the viewBox for text at the edge, fits the rest
+```
+
+What `reconcileLegendInSvg` does, in this order, each phase on its own and each leaving the chart as
+it was drawn when it has no evidence:
+
+1. **Legend slide.** A legend that overlaps the plot or runs off the right edge is slid clear and the
+   viewBox widened just enough to hold it. The legend is found by `.d3-legend-mark`, or by its measured
+   shape (a mark-free group of same-size swatches, each with a label) when the chart omitted the class.
+2. **Colorbar.** A gradient bar drawn over the marks, or over the x-axis, is pushed into the margin it
+   belongs in.
+3. **Axis and label thinning.** A horizontal axis whose tick labels collide loses every k-th label
+   (the tick lines stay). A nominal axis, where each label is the only record of its bar, is never
+   thinned: each label is shrunk, then shortened with the full name in a `<title>`.
+4. **Bottom text.** An axis title or caption sitting on top of the tick labels is pushed below them.
+5. **Content fit.** The viewBox is extended so nothing the chart painted is cut off, unless that
+   would shrink the smallest text past a legibility floor.
+
+`fitTextToFrame` is the sibling for text parked against the raw edge of the frame: a few units past
+it grow the viewBox, and a label too far out for that is shrunk and then cut to the widest prefix
+that fits, never inside a number.
+
+Both are idempotent per render (the SVG is stamped) and take no policy: pass
+`{ minOverlap, maxGutterFraction }` to `reconcileLegendInSvg` to make it act less often, and decide
+yourself when to call it. They are best-effort, so call them in a `try`/`catch` and log what you like:
+a throw must never fail a chart that already drew. The geometry behind each phase (`planLegendReconcile`, `planContentFit`,
+`planAxisTickThin`, `planFrameFit`, ...) is exported as plain functions over boxes, for a host that
+measures on its own terms.
+
+**Running them after every render.** `createLegendFitPass()` is both passes in the order that works
+(the legend first, then the frame fit, which measures what the legend pass left), with nothing to log
+and no policy. Hand it to the host as `layoutPass`, and the host runs it after every render, re-render
+and async settle, after the label colors are fixed and before anything measures the marks or the
+frame:
+
+```ts
+import { createChartHost } from "@bicharts/chart-host";
+import { createLegendFitPass } from "@bicharts/chart-host/legend-fit";
+
+const layoutPass = createLegendFitPass({
+    legend: true,            // or "narrow" to act only on large overlaps, or false
+    frameFit: true,
+    onReport: r => console.debug(r.legend, r.frame),   // what each run did; log what you like
+});
+const host = createChartHost(el, { code, data, d3, layoutPass });
+```
+
+In React it is the `layoutPass` prop of `<BicChart>`. Build the pass once, at module scope or in a
+`useMemo`: a new function on every render is a new host config, and the chart is rebuilt.
+
 ## Architecture — three layers, and why it matters if you contribute
 
 Read this before adding code. The package has **three** concerns, and they are independent.

package/dist/chunk-BQFG5HWZ.mjs

@@ -0,0 +1,582 @@
+/*! @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";
+
+// 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((b) => b && isFinite(b.right) && isFinite(b.bottom) && (b.right > 0 || b.bottom > 0));
+  if (usable.length === 0) return { w: 0, h: 0, source: "none" };
+  const inFlow = usable.filter((b) => !b.floating);
+  const counted = inFlow.length > 0 ? inFlow : usable;
+  let w = 0, h = 0;
+  for (const b of counted) {
+    if (b.right > w) w = b.right;
+    if (b.bottom > h) h = b.bottom;
+  }
+  return { w, h, 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, h, refW, refH) {
+  return w > refW * PHANTOM_FRACTION || h > 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" };
+}
+var AXIS_PIN_MIN_LABELS = 2;
+var AXIS_PIN_BAND_PAD_PX = 2;
+var AXIS_PIN_MAX_BAND_FRACTION = 0.4;
+var AXIS_PIN_TRACK_REACH_PX = 12;
+function isHorizontalLabelRow(boxes) {
+  if (!boxes || boxes.length < 2) return false;
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const b of boxes) {
+    const cx = (b.left + b.right) / 2, cy = (b.top + b.bottom) / 2;
+    if (!isFinite(cx) || !isFinite(cy)) return false;
+    if (cx < minX) minX = cx;
+    if (cx > maxX) maxX = cx;
+    if (cy < minY) minY = cy;
+    if (cy > maxY) maxY = cy;
+  }
+  return maxX - minX > maxY - minY;
+}
+function labelBand(boxes, tracks = [], pad = AXIS_PIN_BAND_PAD_PX, trackReach = AXIS_PIN_TRACK_REACH_PX) {
+  if (!boxes || boxes.length === 0) return null;
+  let top = Infinity, bottom = -Infinity;
+  for (const b of boxes) {
+    if (!isFinite(b.top) || !isFinite(b.bottom)) continue;
+    if (b.top < top) top = b.top;
+    if (b.bottom > bottom) bottom = b.bottom;
+  }
+  if (!isFinite(top) || !isFinite(bottom) || bottom <= top) return null;
+  for (const t of tracks || []) {
+    if (!isFinite(t.top) || !isFinite(t.bottom)) continue;
+    const gap = t.bottom < top ? top - t.bottom : t.top > bottom ? t.top - bottom : 0;
+    if (gap > trackReach) continue;
+    if (t.top < top) top = t.top;
+    if (t.bottom > bottom) bottom = t.bottom;
+  }
+  return { top: top - pad, bottom: bottom + pad };
+}
+function planAxisPin(candidates, viewportH, minLabels = AXIS_PIN_MIN_LABELS, maxFraction = AXIS_PIN_MAX_BAND_FRACTION) {
+  const none = (reason) => ({ pin: false, index: -1, band: null, reason });
+  if (!isFinite(viewportH) || viewportH <= 0) return none("unmeasurable");
+  let sawAxis = false, best = null;
+  for (const c of candidates || []) {
+    if (!c || !c.labels || c.labels.length < minLabels) continue;
+    sawAxis = true;
+    if (!isHorizontalLabelRow(c.labels)) continue;
+    if (!best || c.labels.length > best.labels.length) best = c;
+  }
+  if (!best) return none(sawAxis ? "vertical-only" : "no-axis");
+  const band = labelBand(best.labels, best.tracks || []);
+  if (!band) return none("unmeasurable");
+  if (band.bottom - band.top > viewportH * maxFraction) return none("band-too-tall");
+  return { pin: true, index: best.index, band, reason: "pinned" };
+}
+function axisPinPlacement(band, scrollTop, viewportH) {
+  if (!band || !isFinite(band.top) || !isFinite(band.bottom)) return null;
+  if (!isFinite(scrollTop) || !isFinite(viewportH) || viewportH <= 0) return null;
+  if (band.top < scrollTop) return "top";
+  if (band.bottom > scrollTop + viewportH) return "bottom";
+  return null;
+}
+
+// src/fitDom.ts
+var FIT_WALK_CAP = 8e3;
+function ctmScaleOf(m) {
+  if (!m) return 0;
+  const s = Math.hypot(m.a, m.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);
+    const clipOf = clipWindowReader(svg);
+    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;
+      let rr = r.right, rb = r.bottom;
+      const clip = clipOf(els[i]);
+      if (clip) {
+        if (r.left >= clip.right || r.top >= clip.bottom) continue;
+        rr = Math.min(rr, clip.right);
+        rb = Math.min(rb, clip.bottom);
+      }
+      seen++;
+      if (rr > right) right = rr;
+      if (rb > bottom) bottom = rb;
+    }
+    if (seen === 0) return null;
+    return { right: right - box.left, bottom: bottom - box.top };
+  } catch {
+    return null;
+  }
+}
+function clipWindowOf(el) {
+  try {
+    const m = /url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/.exec(el.getAttribute("clip-path") || "");
+    const cp = m ? (el.closest("svg") ?? el.ownerDocument).querySelector(`clipPath[id="${m[1].replace(/"/g, '\\"')}"]`) : null;
+    const ctm = cp ? el.getScreenCTM?.() : null;
+    if (!cp || !ctm || cp.getAttribute("clipPathUnits") === "objectBoundingBox") return null;
+    let l = Infinity, t = Infinity, r = -Infinity, b = -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 [x, y] 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 * x + ctm.c * y + ctm.e, sy = ctm.b * x + ctm.d * y + ctm.f;
+        l = Math.min(l, sx);
+        t = Math.min(t, sy);
+        r = Math.max(r, sx);
+        b = Math.max(b, sy);
+      }
+    }
+    return isFinite(r) && isFinite(b) ? { left: l, top: t, right: r, bottom: b } : null;
+  } catch {
+    return null;
+  }
+}
+function clipWindowReader(svg) {
+  const own = /* @__PURE__ */ new Map();
+  const windowOf = (el) => {
+    if (!own.has(el)) own.set(el, clipWindowOf(el));
+    return own.get(el);
+  };
+  return (el) => {
+    let acc = null;
+    for (let a = el; a && a !== svg; a = a.parentElement) {
+      const w = windowOf(a);
+      if (w) acc = acc ? { right: Math.min(acc.right, w.right), bottom: Math.min(acc.bottom, w.bottom) } : w;
+    }
+    return acc;
+  };
+}
+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((b) => b.floating).length,
+    scrollW: c.scrollWidth,
+    scrollH: c.scrollHeight
+  };
+}
+var noPin = (reason) => ({ pinned: false, reason, bandPx: 0, axisAt: "", labels: 0, carried: 0, edge: null });
+var CONTAINER_SLOT_AXIS_PIN = "__bicAxisPin";
+var SVG_NS = "http://www.w3.org/2000/svg";
+var AXIS_PIN_MAX_CARRIED = 12;
+function unpinScrolledAxis(container) {
+  if (!container) return;
+  const st = container[CONTAINER_SLOT_AXIS_PIN];
+  if (!st) return;
+  try {
+    container.removeEventListener("scroll", st.onScroll);
+  } catch {
+  }
+  try {
+    if (st.overlay.parentNode) st.overlay.parentNode.removeChild(st.overlay);
+  } catch {
+  }
+  try {
+    delete container[CONTAINER_SLOT_AXIS_PIN];
+  } catch {
+  }
+}
+function textHidden(t, view) {
+  if (t.getAttribute("display") === "none" || t.getAttribute("visibility") === "hidden") return true;
+  try {
+    const cs = view.getComputedStyle(t);
+    if (cs && (cs.display === "none" || cs.visibility === "hidden")) return true;
+  } catch {
+  }
+  return false;
+}
+function backdropFill(svg, container, view, svgBox) {
+  try {
+    const rects = svg.querySelectorAll("rect");
+    for (let i = 0; i < rects.length && i < 6; i++) {
+      const r = rects[i];
+      if (r.closest(".d3-mark")) continue;
+      const b = r.getBoundingClientRect();
+      if (b.width >= svgBox.width * 0.9 && b.height >= svgBox.height * 0.9) {
+        let fill = "";
+        try {
+          fill = view.getComputedStyle(r).fill || "";
+        } catch {
+        }
+        if (!fill || fill === "none") fill = r.getAttribute("fill") || "";
+        if (fill && fill !== "none" && fill !== "transparent") return fill;
+        break;
+      }
+    }
+  } catch {
+  }
+  try {
+    let el = container;
+    for (let hops = 0; el && hops < 12; hops++, el = el.parentElement) {
+      const bg = view.getComputedStyle(el).backgroundColor;
+      if (bg && bg !== "transparent" && bg !== "rgba(0, 0, 0, 0)") return bg;
+    }
+  } catch {
+  }
+  return "#ffffff";
+}
+function cloneWithChain(el, svg, root) {
+  const chain = [];
+  let n = el.parentElement;
+  while (n && n !== svg) {
+    chain.unshift(n);
+    n = n.parentElement;
+  }
+  let parent = root;
+  for (const anc of chain) {
+    const c = anc.cloneNode(false);
+    parent.appendChild(c);
+    parent = c;
+  }
+  parent.appendChild(el.cloneNode(true));
+  const ids = root.querySelectorAll("[id]");
+  for (let i = 0; i < ids.length; i++) ids[i].removeAttribute("id");
+}
+function pinScrolledAxis(container, svg) {
+  unpinScrolledAxis(container);
+  if (!container) return noPin("no-container");
+  if (!svg) return noPin("no-svg");
+  try {
+    const doc = svg.ownerDocument;
+    const view = doc && doc.defaultView || globalThis;
+    const svgBox = svg.getBoundingClientRect();
+    if (!(svgBox.width > 0) || !(svgBox.height > 0)) return noPin("unmeasurable");
+    const m = typeof svg.getScreenCTM === "function" ? svg.getScreenCTM() : null;
+    if (!m || !(m.a > 0) || !(m.d > 0) || !isFinite(m.e) || !isFinite(m.f)) return noPin("no-ctm");
+    const viewportH = container.clientHeight;
+    if (!(viewportH > 0)) return noPin("unmeasurable");
+    const rel = (r) => ({ left: r.left - svgBox.left, top: r.top - svgBox.top, right: r.right - svgBox.left, bottom: r.bottom - svgBox.top });
+    const ticks = svg.querySelectorAll(".tick");
+    const byAxis = /* @__PURE__ */ new Map();
+    for (let i = 0; i < ticks.length; i++) {
+      const t = ticks[i];
+      if (t.closest("svg") !== svg) continue;
+      const p = t.parentElement;
+      if (!p) continue;
+      const list = byAxis.get(p);
+      if (list) list.push(t);
+      else byAxis.set(p, [t]);
+    }
+    const axes = [];
+    const cands = [];
+    byAxis.forEach((group, axis2) => {
+      const labels = [];
+      for (const tick of group) {
+        const txt = tick.querySelector("text");
+        if (!txt || textHidden(txt, view)) continue;
+        const r = txt.getBoundingClientRect();
+        if (!(r.width > 0) || !(r.height > 0)) continue;
+        labels.push(rel(r));
+      }
+      const tracks = [];
+      for (let i = 0; i < axis2.children.length; i++) {
+        const ch = axis2.children[i];
+        if (ch.tagName.toLowerCase() !== "path" || !(ch.getAttribute("class") || "").split(/\s+/).includes("domain")) continue;
+        const r = ch.getBoundingClientRect();
+        if (r.width > 0 && r.height <= 4) tracks.push(rel(r));
+      }
+      cands.push({ index: axes.length, labels, tracks });
+      axes.push(axis2);
+    });
+    const plan = planAxisPin(cands, viewportH);
+    if (!plan.pin || !plan.band) return noPin(plan.reason);
+    const axis = axes[plan.index];
+    const band = { top: Math.max(0, plan.band.top), bottom: Math.min(svgBox.height, plan.band.bottom) };
+    const bandPx = band.bottom - band.top;
+    if (!(bandPx > 0)) return noPin("unmeasurable");
+    const carried = [];
+    const texts = svg.querySelectorAll("text");
+    for (let i = 0; i < texts.length && carried.length < AXIS_PIN_MAX_CARRIED; i++) {
+      const t = texts[i];
+      if (t.closest("svg") !== svg) continue;
+      if (t.closest(".tick") || t.closest(".d3-mark") || t.closest(".d3-legend-mark")) continue;
+      if (axis.contains(t) || textHidden(t, view)) continue;
+      const r = rel(t.getBoundingClientRect());
+      if (!(r.right > r.left) || !(r.bottom > r.top)) continue;
+      if (r.top >= band.top && r.bottom <= band.bottom) carried.push(t);
+    }
+    const pinSvg = doc.createElementNS(SVG_NS, "svg");
+    for (const a of ["font-family", "font-size", "font-weight", "font", "fill", "color", "text-rendering"]) {
+      const v = svg.getAttribute(a);
+      if (v) pinSvg.setAttribute(a, v);
+    }
+    const styles = svg.querySelectorAll("style");
+    for (let i = 0; i < styles.length; i++) pinSvg.appendChild(styles[i].cloneNode(true));
+    const vbX = (svgBox.left - m.e) / m.a, vbY = (svgBox.top + band.top - m.f) / m.d;
+    const vbW = svgBox.width / m.a, vbH = bandPx / m.d;
+    pinSvg.setAttribute("viewBox", `${vbX} ${vbY} ${vbW} ${vbH}`);
+    pinSvg.setAttribute("preserveAspectRatio", "none");
+    pinSvg.setAttribute("width", String(svgBox.width));
+    pinSvg.setAttribute("height", String(bandPx));
+    pinSvg.setAttribute("aria-hidden", "true");
+    pinSvg.style.display = "block";
+    pinSvg.style.pointerEvents = "none";
+    const back = doc.createElementNS(SVG_NS, "rect");
+    back.setAttribute("x", String(vbX));
+    back.setAttribute("y", String(vbY));
+    back.setAttribute("width", String(vbW));
+    back.setAttribute("height", String(vbH));
+    back.setAttribute("fill", backdropFill(svg, container, view, svgBox));
+    pinSvg.appendChild(back);
+    cloneWithChain(axis, svg, pinSvg);
+    for (const t of carried) cloneWithChain(t, svg, pinSvg);
+    const overlay = doc.createElement("div");
+    overlay.setAttribute("data-bic-axis-pin", "1");
+    const o = overlay.style;
+    o.position = "absolute";
+    o.margin = "0";
+    o.padding = "0";
+    o.border = "0";
+    o.width = `${svgBox.width}px`;
+    o.height = `${bandPx}px`;
+    o.overflow = "hidden";
+    o.pointerEvents = "none";
+    o.zIndex = "3";
+    o.display = "none";
+    overlay.appendChild(pinSvg);
+    try {
+      const cs = view.getComputedStyle(container);
+      const pos = cs && cs.position || container.style.position;
+      if (!pos || pos === "static") container.style.position = "relative";
+    } catch {
+      container.style.position = container.style.position || "relative";
+    }
+    const cRect = container.getBoundingClientRect();
+    const svgLeft = svgBox.left - cRect.left - container.clientLeft + container.scrollLeft;
+    const svgTop = svgBox.top - cRect.top - container.clientTop + container.scrollTop;
+    const contentBand = { top: svgTop + band.top, bottom: svgTop + band.bottom };
+    const place = () => {
+      const st = container.scrollTop, vh = container.clientHeight;
+      const edge2 = axisPinPlacement(contentBand, st, vh);
+      if (!edge2) {
+        o.display = "none";
+        return null;
+      }
+      o.display = "block";
+      o.left = `${svgLeft}px`;
+      o.top = `${edge2 === "top" ? st : st + vh - bandPx}px`;
+      return edge2;
+    };
+    const onScroll = () => {
+      try {
+        if (!overlay.isConnected) {
+          unpinScrolledAxis(container);
+          return;
+        }
+        place();
+      } catch {
+      }
+    };
+    container.appendChild(overlay);
+    container.addEventListener("scroll", onScroll, { passive: true });
+    container[CONTAINER_SLOT_AXIS_PIN] = { overlay, onScroll };
+    const edge = place();
+    const mid = (band.top + band.bottom) / 2 / svgBox.height;
+    return {
+      pinned: true,
+      reason: "pinned",
+      bandPx: Math.round(bandPx),
+      axisAt: mid < 1 / 3 ? "top" : mid > 2 / 3 ? "bottom" : "middle",
+      labels: cands[plan.index].labels.length,
+      carried: carried.length,
+      edge
+    };
+  } catch {
+    unpinScrolledAxis(container);
+    return noPin("threw");
+  }
+}
+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,
+    axisPin: noPin("no-container")
+  };
+  if (!container) return result;
+  try {
+    let svg = container.querySelector(`svg[${SNAPSHOT_SVG_ATTR}]`);
+    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 b = svg.viewBox.baseVal;
+            svg.setAttribute("viewBox", `${b.x} ${b.y} ${b.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;
+      if (fit.overflowY !== "auto") {
+        unpinScrolledAxis(container);
+        result.axisPin = noPin("not-scrolling");
+      } else if (opts.pinAxis === false) {
+        unpinScrolledAxis(container);
+        result.axisPin = noPin("disabled");
+      } else result.axisPin = pinScrolledAxis(container, svg);
+    } else {
+      unpinScrolledAxis(container);
+      result.axisPin = noPin("overflow-not-applied");
+    }
+  } catch {
+  }
+  return result;
+}
+
+export {
+  SCROLL_SLACK_PX,
+  needsScroll,
+  contentExtentOf,
+  scrollFitFor,
+  FIT_CONTENT_SELECTOR,
+  PHANTOM_FRACTION,
+  isPhantomBox,
+  MAX_FRAME_GROW_FACTOR,
+  planFrameGrow,
+  AXIS_PIN_MIN_LABELS,
+  AXIS_PIN_BAND_PAD_PX,
+  AXIS_PIN_MAX_BAND_FRACTION,
+  AXIS_PIN_TRACK_REACH_PX,
+  isHorizontalLabelRow,
+  labelBand,
+  planAxisPin,
+  axisPinPlacement,
+  ctmScaleOf,
+  svgInkReach,
+  clipWindowOf,
+  measureContainerBoxes,
+  fitReadingFor,
+  unpinScrolledAxis,
+  pinScrolledAxis,
+  fitRenderedChart
+};