@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/core/ChartViewport.js

@@ -0,0 +1,401 @@
+import { AxisWindow } from "./AxisWindow.js";
+import { ChartBrush } from "./ChartBrush.js";
+import { ZoomControls } from "./ZoomControls.js";
+import { ZoomTransform, zoom, zoomIdentity, zoomTransform } from "d3";
+// src/core/ChartViewport.ts
+var ZoomAxis = /* @__PURE__ */ function(ZoomAxis) {
+	ZoomAxis["X"] = "x";
+	ZoomAxis["Y"] = "y";
+	ZoomAxis["XY"] = "xy";
+	return ZoomAxis;
+}({});
+var MOST = 64;
+var STEP = 2;
+var CLIP_SLACK = 40;
+var CLIP_OPEN = 1e4;
+/** Less than this share of a layer inside the plot puts it in the margin. */
+var IN_MARGIN = .1;
+/** Groups in the root that are not marks. */
+var CHROME = ".m-axis-x,.m-axis-y,.m-axis-title,.m-zoom-hit,.m-view-clip,.m-brush,.m-zoom-controls";
+var TRANSLATE = /^translate\(\s*(-?[\d.e+-]+)(?:[ ,]+(-?[\d.e+-]+))?\s*\)$/;
+var shiftOf = (node) => {
+	const [, x = 0, y = 0] = TRANSLATE.exec(node.getAttribute("transform") ?? "") ?? [];
+	return [+x, +y];
+};
+var shareInside = (start, span, size) => span ? (Math.min(start + span, size) - Math.max(start, 0)) / span : 1;
+var PRESS = /* @__PURE__ */ new Set([
+	"mousedown",
+	"touchstart",
+	"dblclick"
+]);
+var ZOOM_AXES = Object.values(ZoomAxis);
+var asked = (choice) => choice === true || ZOOM_AXES.includes(choice);
+var axisOf = (choice, x, y, allowed) => {
+	const along = choice === true ? AxisWindow.kind(y) === "band" && AxisWindow.kind(x) !== "band" ? "y" : "x" : choice;
+	if (!ZOOM_AXES.includes(along)) return null;
+	const open = (plane) => allowed === "xy" || allowed === plane;
+	const hasX = along !== "y" && open("x") && AxisWindow.kind(x), hasY = along !== "x" && open("y") && AxisWindow.kind(y);
+	return hasX && hasY ? "xy" : hasX ? "x" : hasY ? "y" : null;
+};
+var clips = 0;
+/**
+* Zoom, pan and brush for a `CartesianChart`, in the manner of `GeoViewport`. Every move repaints the
+* chart through rescaled axes, so ticks, marks and bars are redrawn rather than stretched.
+*/
+var ChartViewport = class {
+	#host;
+	#clipId = `chart-view-${++clips}`;
+	#brush;
+	#rescaled = /* @__PURE__ */ new Set();
+	/** Layers that sat beside the plot at rest, by class: a second axis, end labels, column headers. */
+	#margins = /* @__PURE__ */ new Map();
+	#behavior = null;
+	#root = null;
+	#bound = null;
+	#active = false;
+	#zoomAxis = null;
+	#brushAxis = null;
+	#shown = null;
+	#base = null;
+	#size = [0, 0];
+	#moving = false;
+	#dirty = false;
+	#frameId = 0;
+	#seen = false;
+	#warned = false;
+	#ctx = null;
+	constructor(host) {
+		this.#host = host;
+		this.#brush = new ChartBrush({
+			gesture: (active) => this.#gesture(active),
+			brushed: (range, settled) => {
+				this.#host.options().onBrush?.(range, settled);
+				if (settled) this.#controls();
+			}
+		});
+	}
+	/** True while a gesture runs, when the chart must not animate. */
+	get moving() {
+		return this.#moving;
+	}
+	get scale() {
+		return this.transform.k;
+	}
+	get transform() {
+		const node = this.#root?.node();
+		return node ? zoomTransform(node) : zoomIdentity;
+	}
+	get zoomed() {
+		return this.#active && this.scale !== 1;
+	}
+	/** False when `zoom` or `brush` was asked for but this chart's axes or layout cannot honour it. */
+	get supported() {
+		return !!(this.#zoomAxis || this.#brushAxis);
+	}
+	/** The range each axis currently shows, in data terms. */
+	get domain() {
+		const [width, height] = this.#size, x = this.#shown?.x, y = this.#shown?.y;
+		return {
+			...AxisWindow.kind(x) && { x: AxisWindow.range(x, 0, width) },
+			...AxisWindow.kind(y) && { y: AxisWindow.range(y, 0, height) }
+		};
+	}
+	get brushed() {
+		return this.#brush.range;
+	}
+	/** Where the buttons sit, or will once a selection adds its own. Labels should leave this free. */
+	get controlsBox() {
+		const count = (this.#zoomAxis ? 3 : 0) + (this.#brushAxis ? 1 : 0);
+		return this.#active && count ? ZoomControls.box(this.#size[0], count) : null;
+	}
+	/** Readies the layer marks draw into and rescales `axes` in place. With both options off it does nothing. */
+	attach(ctx, axes) {
+		const { zoom: zoomChoice, brush: brushChoice } = this.#host.options();
+		const wanted = asked(zoomChoice) || asked(brushChoice);
+		this.#seen ||= wanted;
+		const allowed = this.#host.zoomAxes();
+		this.#zoomAxis = axisOf(zoomChoice, axes.x, axes.y, allowed);
+		this.#brushAxis = axisOf(brushChoice === true ? this.#zoomAxis ?? true : brushChoice, axes.x, axes.y, allowed);
+		const enabled = this.supported;
+		if (enabled !== this.#active) {
+			ctx.root.selectAll("*").remove();
+			if (!enabled) this.#unbind(ctx);
+			this.#bound = null;
+			this.#active = enabled;
+		}
+		if (!enabled) {
+			if (wanted) this.#warn();
+			return ctx;
+		}
+		this.#ctx = ctx;
+		this.#root = ctx.root;
+		this.#bind(ctx);
+		this.#fitSize(ctx);
+		this.#window(axes);
+		ctx.marks("zoom-hit", "rect", [0]).attr("width", ctx.plot.width).attr("height", ctx.plot.height).attr("fill", "transparent").style("cursor", this.#brushAxis ? "crosshair" : "grab");
+		return ctx;
+	}
+	/** Call after drawing: trims band ticks to the plot and draws the brush and buttons. */
+	finish(ctx) {
+		if (!this.#active) return;
+		this.#trim(ctx);
+		this.#clip(ctx);
+		if (this.#brushAxis) {
+			const { x, y } = this.#shown, along = this.#brushAxis;
+			this.#brush.draw(ctx, along === "y" ? null : x, along === "x" ? null : y);
+		}
+		this.#controls();
+		this.#raise(ctx);
+	}
+	/** The chart left the page: a gesture still under way must not repaint or report. */
+	release() {
+		if (this.#frameId) cancelAnimationFrame(this.#frameId);
+		this.#frameId = 0;
+		this.#dirty = this.#moving = false;
+		this.#root = this.#ctx = this.#shown = this.#base = this.#bound = null;
+		this.#brush.release();
+	}
+	/** Says so once when a chart with its own `draw` never reached `attach`. */
+	audit() {
+		const { zoom: zoomChoice, brush: brushChoice } = this.#host.options();
+		if ((asked(zoomChoice) || asked(brushChoice)) && !this.#seen) this.#warn();
+	}
+	/** Tick text for an axis this view has moved, or `null` to keep the chart's own. */
+	format(scale) {
+		return this.#rescaled.has(scale) ? AxisWindow.format(scale) : null;
+	}
+	/** `format` for an axis of `count` ticks, swapped only if this view moved it past what `format` can show. */
+	legible(scale, format, count) {
+		return this.#rescaled.has(scale) ? AxisWindow.legible(scale, format, count) : format;
+	}
+	zoomIn() {
+		this.#scaleBy(STEP);
+	}
+	zoomOut() {
+		this.#scaleBy(1 / STEP);
+	}
+	reset() {
+		this.#go(zoomIdentity);
+	}
+	/** Zooms so the given data range fills the plot. Axes this view does not zoom are ignored. */
+	fit(range) {
+		const [width, height] = this.#size, base = this.#base, along = this.#zoomAxis;
+		if (!base || !along) return;
+		const span = (scale, part, size) => scale && part ? AxisWindow.pixels(scale, part, size) : null;
+		const xs = along !== "y" ? span(base.x, range.x, width) : null;
+		const ys = along !== "x" ? span(base.y, range.y, height) : null;
+		if (!xs && !ys) return;
+		const k = Math.max(1, Math.min(MOST, xs ? width / (xs[1] - xs[0]) : Infinity, ys ? height / (ys[1] - ys[0]) : Infinity));
+		const offset = (pixels, size) => (size - k * (pixels ? pixels[0] + pixels[1] : size)) / 2;
+		this.#go(new ZoomTransform(k, offset(xs, width), offset(ys, height)));
+	}
+	/** Sets the selection from code, in data terms, and reports it through `onBrush`. Needs `brush` on. */
+	brush(range) {
+		if (this.#brushAxis && this.#root) this.#brush.set(range);
+	}
+	clearBrush() {
+		if (this.#brush.range) this.#brush.set(null);
+	}
+	#warn() {
+		if (this.#warned) return;
+		this.#warned = true;
+		console.warn(`${this.#host.name()}: zoom and brush need a band or invertible x or y scale drawn by CartesianChart; this chart has none, so they are off.`);
+	}
+	#scaleBy(factor) {
+		const root = this.#root, behavior = this.#behavior;
+		if (root && behavior && this.#zoomAxis) root.call(behavior.scaleBy, factor);
+	}
+	#go(transform) {
+		const root = this.#root, behavior = this.#behavior;
+		if (!root || !behavior || !this.#zoomAxis) return;
+		const [width, height] = this.#size, extent = [[0, 0], [width, height]];
+		root.call(behavior.transform, behavior.constrain()(transform, extent, extent));
+	}
+	#bind(ctx) {
+		const node = ctx.root.node();
+		if (this.#zoomAxis) {
+			const behavior = this.#behavior ??= zoom().duration(0).filter((event) => {
+				if (this.#brushAxis && PRESS.has(event.type) && !event.shiftKey) return false;
+				return (!event.ctrlKey || event.type === "wheel") && !event.button;
+			}).on("start", () => this.#gesture(true)).on("zoom", (event) => this.#zooming(!!event.sourceEvent)).on("end", () => this.#settle());
+			const { width, height } = ctx.plot, extent = [[0, 0], [width, height]];
+			behavior.extent(extent).scaleExtent([1, MOST]).translateExtent(extent);
+			if (this.#bound !== node) {
+				ctx.root.call(behavior);
+				this.#bound = node;
+			}
+		} else if (this.#bound) {
+			ctx.root.on(".zoom", null).property("__zoom", zoomIdentity);
+			this.#bound = null;
+		}
+		if (!this.#brushAxis) this.#brush.remove(ctx.root);
+	}
+	#unbind(ctx) {
+		ctx.root.on(".zoom", null).property("__zoom", zoomIdentity);
+		this.#brush.remove(ctx.root);
+		this.#shown = this.#base = null;
+		this.#rescaled.clear();
+	}
+	/** A resize keeps the same data in view: pixels are the only thing that changed. */
+	#fitSize(ctx) {
+		const { width, height } = ctx.plot, [oldWidth, oldHeight] = this.#size, { k, x, y } = this.transform;
+		if (oldWidth && k !== 1 && (oldWidth !== width || oldHeight !== height)) ctx.root.node().__zoom = new ZoomTransform(k, x * width / oldWidth, y * height / oldHeight);
+		this.#size = [width, height];
+	}
+	#window({ x, y }) {
+		const copy = (scale) => AxisWindow.kind(scale) ? scale.copy() : null;
+		this.#base = {
+			x: copy(x),
+			y: copy(y)
+		};
+		this.#shown = {
+			x,
+			y
+		};
+		this.#rescaled.clear();
+		const along = this.#zoomAxis, transform = this.transform;
+		if (!along || transform.k === 1) return;
+		for (const [plane, scale] of [["x", x], ["y", y]]) {
+			if (along !== "xy" && along !== plane) continue;
+			AxisWindow.rescale(scale, plane, transform);
+			this.#rescaled.add(scale);
+		}
+	}
+	/**
+	* Marks stay in the root, where charts look for their axes and grid, so each group is clipped by itself.
+	* Clipping starts only once zoomed, so an unzoomed chart keeps marks that sit on the plot's edge.
+	*/
+	#clip(ctx) {
+		const { width, height } = ctx.plot, along = this.#zoomAxis, clipping = this.zoomed;
+		const layers = this.#layers().nodes();
+		if (along && !clipping) this.#measure(layers, width, height);
+		const zone = (layer) => {
+			const margin = this.#margins.get(layer.getAttribute("class") ?? ""), [shiftX, shiftY] = shiftOf(layer);
+			const wideX = margin === "x" ? CLIP_OPEN : along === "y" ? CLIP_SLACK : 0;
+			const wideY = margin === "y" ? CLIP_OPEN : along === "x" ? CLIP_SLACK : 0;
+			return {
+				x: -wideX - shiftX,
+				y: -wideY - shiftY,
+				width: width + 2 * wideX,
+				height: height + 2 * wideY
+			};
+		};
+		const idOf = (box) => `${this.#clipId}_${Object.values(box).join("_")}`;
+		const zones = new Map(clipping ? layers.map((layer) => [idOf(zone(layer)), zone(layer)]) : []);
+		ctx.marks("view-clip", "clipPath", [...zones], ([id]) => id).attr("id", ([id]) => id).selectAll("rect").data(([, box]) => [box]).join("rect").attr("x", (box) => box.x).attr("y", (box) => box.y).attr("width", (box) => box.width).attr("height", (box) => box.height);
+		for (const layer of layers) if (clipping) layer.setAttribute("clip-path", `url(#${idOf(zone(layer))})`);
+		else layer.removeAttribute("clip-path");
+	}
+	/** Measured unzoomed, when a layer is where the chart meant it. A margin layer is only cut along the side the plot shares. */
+	#measure(layers, width, height) {
+		for (const layer of layers) {
+			const box = layer.getBBox?.();
+			if (!box?.width && !box?.height) continue;
+			const [shiftX, shiftY] = shiftOf(layer), name = layer.getAttribute("class") ?? "";
+			const beside = shareInside(box.x + shiftX, box.width, width) < IN_MARGIN ? "x" : shareInside(box.y + shiftY, box.height, height) < IN_MARGIN ? "y" : null;
+			if (beside) this.#margins.set(name, beside);
+			else this.#margins.delete(name);
+		}
+	}
+	/** Marks can join the root after the brush and buttons were drawn. Moved only when needed: moving a button drops its keyboard focus. */
+	#raise(ctx) {
+		const root = ctx.root.node();
+		const top = [":scope > g.m-brush", ":scope > g.m-zoom-controls"].flatMap((chrome) => root.querySelector(chrome) ?? []);
+		const last = [...root.children].slice(-top.length);
+		if (top.some((node, i) => node !== last[i])) root.append(...top);
+	}
+	/** Every group of marks: whatever in the root is not chrome. */
+	#layers() {
+		return this.#root.selectAll(":scope > g").filter(function() {
+			return !this.matches(CHROME);
+		});
+	}
+	/** Bands grown past the plot leave ticks and an axis line outside it. */
+	#trim(ctx) {
+		const { width, height } = ctx.plot;
+		const planes = [{
+			scale: this.#shown.x,
+			size: width,
+			group: ctx.group("axis-x"),
+			line: `M0,0.5H${width}`
+		}, {
+			scale: this.#shown.y,
+			size: height,
+			group: ctx.group("axis-y"),
+			line: null
+		}];
+		for (const { scale, size, group, line } of planes) {
+			if (AxisWindow.kind(scale) !== "band") continue;
+			group.selectAll(".tick").attr("display", (name) => {
+				const at = AxisWindow.position(scale, name);
+				return at >= 0 && at <= size ? null : "none";
+			});
+			if (line) group.select(".domain").attr("d", line);
+		}
+	}
+	#gesture(active) {
+		this.#moving = active;
+		if (active) {
+			this.#root?.selectAll("*").interrupt();
+			this.#host.hideTip();
+		}
+		if (this.#root) this.#layers().style("pointer-events", active ? "none" : null);
+	}
+	#zooming(fromInput) {
+		if (!this.#root) return;
+		this.#dirty = true;
+		if (!fromInput) {
+			this.#paint();
+			return;
+		}
+		this.#frameId ||= requestAnimationFrame(() => {
+			this.#frameId = 0;
+			if (this.#dirty) this.#paint();
+		});
+	}
+	#settle() {
+		if (this.#frameId) {
+			cancelAnimationFrame(this.#frameId);
+			this.#frameId = 0;
+		}
+		if (this.#dirty) this.#paint();
+		this.#gesture(false);
+	}
+	#paint() {
+		this.#dirty = false;
+		this.#host.redraw();
+	}
+	#controls() {
+		const ctx = this.#ctx;
+		if (!ctx || !this.#active) return;
+		const items = [];
+		if (this.#zoomAxis) {
+			items.push({
+				key: "in",
+				glyph: "+",
+				label: "Zoom in",
+				run: () => this.zoomIn()
+			});
+			items.push({
+				key: "out",
+				glyph: "−",
+				label: "Zoom out",
+				run: () => this.zoomOut()
+			});
+			items.push({
+				key: "reset",
+				glyph: "⟲",
+				label: "Reset view",
+				run: () => this.reset()
+			});
+		}
+		if (this.#brush.range) items.push({
+			key: "clear",
+			glyph: "×",
+			label: "Clear selection",
+			run: () => this.clearBrush()
+		});
+		ZoomControls.draw(ctx, this.#size[0], items);
+	}
+};
+export { ChartViewport, ZoomAxis };

package/dist/core/ColumnCheck.js

@@ -0,0 +1,53 @@
+// src/core/ColumnCheck.ts
+/** Bundlers replace this expression; a page with no bundler has no `process`. */
+var DEV = (() => {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return false;
+	}
+})();
+/** Enough rows to see every column, even where the first rows leave some out. */
+var SCAN = 500;
+var namesOf = (value) => {
+	if (typeof value === "string") return [value];
+	return Array.isArray(value) && value.every((item) => typeof item === "string") ? value : [];
+};
+var columnsOf = (data) => {
+	const columns = /* @__PURE__ */ new Set();
+	if (Array.isArray(data)) {
+		for (const row of data.slice(0, SCAN)) if (row !== null && typeof row === "object") for (const name in row) columns.add(name);
+	}
+	return columns;
+};
+/** Tells developers when an option names a column their rows lack, which would otherwise draw an empty chart. */
+var ColumnCheck = class {
+	static #options = /* @__PURE__ */ new WeakMap();
+	static #warned = /* @__PURE__ */ new Set();
+	/**
+	* Which options name columns. By the authoring contract their defaults are `meta.sample` column
+	* names, so a default found there marks one. Variant axes are enums, even when a value looks like a column.
+	*/
+	static #columnOptions(meta, defaults) {
+		let keys = this.#options.get(meta);
+		if (!keys) {
+			const sample = columnsOf(meta.sample(1));
+			keys = Object.keys(defaults).filter((key) => !(key in (meta.variants ?? {})) && namesOf(defaults[key]).length > 0 && namesOf(defaults[key]).every((name) => sample.has(name)));
+			this.#options.set(meta, keys);
+		}
+		return keys;
+	}
+	/** Warns once per chart, option and name. Does nothing in a production build. */
+	static run(meta, defaults, options) {
+		if (!DEV) return;
+		const columns = columnsOf(options.data);
+		if (!columns.size) return;
+		for (const key of this.#columnOptions(meta, defaults)) for (const name of namesOf(options[key])) {
+			const id = `${meta.id}/${key}/${name}`;
+			if (columns.has(name) || this.#warned.has(id)) continue;
+			this.#warned.add(id);
+			console.warn(`${meta.name}: option "${key}" names column "${name}", but the data has no such column. Columns found: ${[...columns].join(", ")}.`);
+		}
+	}
+};
+export { ColumnCheck };

package/dist/core/Context2D.js

@@ -0,0 +1,178 @@
+import { pathMorph } from "./pathMorph.js";
+import { easeCubicOut } from "d3";
+import "d3-transition";
+// src/core/Context2D.ts
+var PLACED = "__placed";
+/** Groups that frame the plot rather than mark data, by `group` name. They stay out of a sliding layer. */
+var FRAMING = /^(axis-|grid$)/;
+/** Plot groups that frame the marks. */
+var FRAME = ".m-axis-x,.m-axis-y,.m-axis-title,.m-grid,.m-zoom-hit,.m-view-clip,.m-domain-clip,.m-brush,.m-zoom-controls";
+var hovered = /* @__PURE__ */ new WeakMap();
+/** Everything a 2D chart needs while drawing. `root` is a `<g>` already translated to the plot area. */
+var Context2D = class Context2D {
+	svg;
+	root;
+	plot;
+	theme;
+	palette;
+	animated;
+	tipper;
+	untipper;
+	selecter;
+	registrar;
+	/** Repaints may come every frame, so staggers and reveals would never get to finish. */
+	live = false;
+	/** Set while `chartStyle` changes attributes, so transitions land on the styled values. */
+	marking = null;
+	constructor(svg, root, plot, theme, palette, animated, tipper, untipper, selecter, registrar) {
+		this.svg = svg;
+		this.root = root;
+		this.plot = plot;
+		this.theme = theme;
+		this.palette = palette;
+		this.animated = animated;
+		this.tipper = tipper;
+		this.untipper = untipper;
+		this.selecter = selecter;
+		this.registrar = registrar;
+	}
+	/** Keyed join of one mark kind. Re-renders update in place so transitions run between states. */
+	marks(name, tag, data, key, parent = this.root) {
+		const group = this.group(name, parent);
+		return (key ? group.selectAll(tag).data(data, key) : group.selectAll(tag).data(data)).join(tag);
+	}
+	/** A named `<g>` under `parent`, created once. */
+	group(name, parent = this.root) {
+		let group = parent.select(`:scope > g.m-${name}`);
+		if (group.empty()) group = parent.append("g").attr("class", `m-${name}`);
+		return group;
+	}
+	/**
+	* Sets final attributes, animating when enabled. New elements first take `from`, so bars can
+	* grow from a baseline and dots from radius 0. Anything in `from` but not `final` returns to the
+	* value the element already had. `stagger` delays by index, in ms.
+	*/
+	set(selection, final, from = {}, stagger = 0) {
+		if (!this.animated) {
+			if (this.live) selection.property(PLACED, true);
+			apply(selection, final);
+			this.marking?.placed(selection, Object.keys(final));
+			return selection;
+		}
+		const fresh = selection.filter(function() {
+			return !this[PLACED];
+		});
+		const restore = Object.keys(from).filter((name) => !(name in final));
+		const resting = /* @__PURE__ */ new Map();
+		fresh.each(function() {
+			const el = this;
+			resting.set(el, Object.fromEntries(restore.map((name) => [name, el.getAttribute(name)])));
+			el[PLACED] = true;
+		});
+		apply(fresh, from);
+		const rest = Object.fromEntries(restore.map((name) => [name, function() {
+			return resting.has(this) ? resting.get(this)[name] : this.getAttribute(name);
+		}]));
+		const ends = this.marking?.ends(selection, {
+			...final,
+			...rest
+		});
+		const motion = selection.transition().duration(650).ease(easeCubicOut).delay((_, i) => this.live ? 0 : i * stagger);
+		for (const [name, value] of Object.entries(final)) if (name === "d") {
+			const ends = resolve(selection, value);
+			motion.attrTween("d", function() {
+				return pathMorph(this.getAttribute("d") ?? "", ends.get(this));
+			});
+		} else motion.attr(name, ends?.[name] ?? value);
+		for (const name of restore) motion.attr(name, ends?.[name] ?? rest[name]);
+		return selection;
+	}
+	/** Draws a line on from its start. */
+	drawOn(path) {
+		if (this.live) path.property(PLACED, true);
+		if (!this.animated || this.live) return;
+		path.each(function() {
+			const el = this;
+			if (el[PLACED]) return;
+			el[PLACED] = true;
+			const length = el.getTotalLength?.() ?? 0;
+			if (!length) return;
+			el.style.strokeDasharray = `${length}`;
+			el.style.strokeDashoffset = `${length}`;
+			el.getBoundingClientRect();
+			el.style.transition = "stroke-dashoffset 900ms cubic-bezier(.22,1,.36,1)";
+			el.style.strokeDashoffset = "0";
+			el.addEventListener("transitionend", () => {
+				el.style.strokeDasharray = el.style.strokeDashoffset = el.style.transition = "";
+			}, { once: true });
+		});
+	}
+	/** Hover tooltip, plus click selection, on any marks. Dims siblings while hovered. */
+	hover(selection, content) {
+		const { tipper, untipper, selecter } = this;
+		const surface = this.svg.node();
+		const clear = () => {
+			untipper();
+			selection.style("opacity", null);
+			hovered.delete(surface);
+		};
+		this.registrar?.(selection, content);
+		return selection.style("cursor", "pointer").on("pointermove", function(event, datum) {
+			tipper(event, content(datum, selection.nodes().indexOf(this)));
+			selection.style("opacity", function() {
+				return this === event.currentTarget ? null : .45;
+			});
+			hovered.set(surface, {
+				node: this,
+				datum,
+				clear
+			});
+		}).on("pointerleave", clear).on("click", (_, datum) => selecter(datum));
+	}
+	/** Same context drawing into a transformed child group, for polar and faceted layouts. */
+	nest(transform, name = "nest") {
+		const child = Object.create(this);
+		Object.defineProperty(child, "root", { value: this.group(name).attr("transform", transform) });
+		return child;
+	}
+	/** Same context drawing into an existing group, such as a zoomable layer. */
+	within(root) {
+		const child = Object.create(this);
+		Object.defineProperty(child, "root", { value: root });
+		return child;
+	}
+	/** Same context with new mark groups going into `layer`, while framing groups stay in the plot root. */
+	sliding(layer) {
+		const child = Object.create(this), home = this.root.node();
+		child.group = function(name, parent = this.root) {
+			return Context2D.prototype.group.call(this, name, parent.node() === home && !FRAMING.test(name) ? layer : parent);
+		};
+		return child;
+	}
+	/** A mark can leave or change under a still pointer, which fires no `pointerleave`. Drops its tooltip and dimming. */
+	static releaseHover(svg) {
+		const hover = hovered.get(svg);
+		if (hover && (!hover.node.isConnected || hover.node.__data__ !== hover.datum)) hover.clear();
+	}
+	/** Short text for an axis or label; never wears a series colour. */
+	text(selection, size = 11, tone = "secondary") {
+		const fill = {
+			ink: this.theme.ink,
+			secondary: this.theme.inkSecondary,
+			muted: this.theme.inkMuted
+		}[tone];
+		return selection.attr("fill", fill).attr("font-size", size).attr("font-family", this.theme.fontFamily);
+	}
+};
+/** Values for each element now, as `transition.attr` does: a chart may have moved on by the time a delayed tween starts. */
+function resolve(selection, value) {
+	const ends = /* @__PURE__ */ new Map();
+	selection.each(function(datum, index) {
+		ends.set(this, String((typeof value === "function" ? value(datum, index) : value) ?? ""));
+	});
+	return ends;
+}
+function apply(selection, attrs) {
+	for (const [name, value] of Object.entries(attrs)) selection.attr(name, value);
+}
+export { Context2D, FRAME, FRAMING };