@mstone6969/graph 0.1.0 → 0.2.0

package/dist/core/Chart2D.js

@@ -1,17 +1,31 @@
 import { Chart } from "./Chart.js";
 import { ChartExporter, ExportFormat } from "./ChartExporter.js";
 import { Context2D } from "./Context2D.js";
-import { LegendPosition } from "./enums.js";
+import { LegendPosition, RenderType } from "./enums.js";
 import { KeyboardNav } from "./KeyboardNav.js";
+import { MarkOrigin } from "./MarkOrigin.js";
+import { MarkStyle } from "./MarkStyle.js";
+import { TextFit } from "./TextFit.js";
 import { select } from "d3";
 // src/core/Chart2D.ts
 var ROW = 22;
 var CHAR = 6.4;
+/** Swatch and gap before an entry's text. */
+var INDENT = 15;
+/** Empty space kept between a legend's text and the edge of the chart. */
+var EDGE = 8;
+/** How far in from the right edge a right legend starts. */
+var RAIL = 112;
 /** Layout, title, legend and SVG root for all d3 charts. Subclasses implement `draw`. */
-var Chart2D = class extends Chart {
+var Chart2D = class Chart2D extends Chart {
 	svg = null;
 	#legendRows = 1;
 	#keyboard = null;
+	#marks = null;
+	/** Canvas when the marks live outside the SVG, which is what `finishCopy` has to add back to an export. */
+	get renderer() {
+		return this.finishCopy === Chart2D.prototype.finishCopy ? RenderType.Svg : RenderType.Canvas;
+	}
 	/** Room the marks need around the plot, excluding title and legend. */
 	plotMargin() {
 		return {
@@ -33,14 +47,25 @@ var Chart2D = class extends Chart {
 	}
 	/** The legend's size depends on what `draw` colours, so a change of row count lays out once more. */
 	paint() {
+		this.#readyMarks();
 		this.#layoutOnce();
 		const rows = this.#fitLegend();
 		if (rows !== this.#legendRows) {
 			this.#legendRows = rows;
 			this.#layoutOnce();
 		}
+		this.#marks?.apply(this.svg.node());
 		if (this.liveFrame) Context2D.releaseHover(this.svg.node());
 	}
+	/** Drawing starts from the chart's own values, and with no style there is nothing to keep. */
+	#readyMarks() {
+		const style = this.options.chartStyle;
+		if (MarkStyle.wanted(style)) (this.#marks ??= new MarkStyle()).begin(style, this.theme);
+		else if (this.#marks) {
+			this.#marks.end();
+			this.#marks = null;
+		}
+	}
 	#shownLegend() {
 		if (this.legendPosition === LegendPosition.None) return [];
 		const items = this.legendItems();
@@ -52,7 +77,7 @@ var Chart2D = class extends Chart {
 		const room = this.size.width - 24;
 		let rows = items.length ? 1 : 0, x = 0;
 		for (const item of items) {
-			const cost = legendCost(item);
+			const cost = this.#legendCost(this.#legendText(item));
 			if (x && x + cost > room) {
 				rows++;
 				x = 0;
@@ -61,6 +86,14 @@ var Chart2D = class extends Chart {
 		}
 		return rows;
 	}
+	/** An entry's text, cut to what is left beside its swatch. */
+	#legendText(item) {
+		const room = this.legendPosition === LegendPosition.Right ? 97 : this.size.width - 16 - INDENT - EDGE;
+		return TextFit.fit(item.label ?? item.key, room, CHAR * this.fontScale);
+	}
+	#legendCost(text) {
+		return 32 + TextFit.width(text, CHAR * this.fontScale);
+	}
 	#layoutOnce() {
 		const { width, height } = this.size;
 		const { title, subtitle } = this.options;
@@ -74,10 +107,10 @@ var Chart2D = class extends Chart {
 		const svg = this.svg;
 		svg.attr("viewBox", `0 0 ${width} ${height}`).attr("width", width).attr("height", height).attr("aria-label", this.label).style("background", this.theme.surface).style("font-family", this.theme.fontFamily);
 		svg.select("title").text(this.label);
-		const headerHeight = (title ? 24 : 0) + (subtitle ? 18 : 0);
+		const headerHeight = ((title ? 24 : 0) + (subtitle ? 18 : 0)) * this.textRoom;
 		const margin = this.margin(this.plotMargin());
 		const position = this.legendPosition;
-		const reserve = position === LegendPosition.Top || position === LegendPosition.Bottom ? ROW * this.#legendRows : 0;
+		const reserve = position === LegendPosition.Top || position === LegendPosition.Bottom ? ROW * this.textRoom * this.#legendRows : 0;
 		const rail = position === LegendPosition.Right && this.#legendRows ? 120 : 0;
 		const top = headerHeight + margin.top + (position === LegendPosition.Top ? reserve : 0);
 		const plot = {
@@ -87,12 +120,13 @@ var Chart2D = class extends Chart {
 			height: Math.max(10, height - top - margin.bottom - (position === LegendPosition.Bottom ? reserve : 0))
 		};
 		const root = svg.select("g.g-plot").attr("transform", `translate(${margin.left},${top})`);
-		const ctx = new Context2D(svg, root, plot, this.theme, this.palette, this.animated, (event, content) => this.tip(event, content), () => this.untip(), (datum) => this.options.onSelect?.(datum), this.#readyKeyboard({
+		const ctx = new Context2D(svg, root, plot, this.theme, this.palette, this.animated, (event, content) => this.tip(event, content), () => this.untip(), (datum) => this.options.onSelect?.(MarkOrigin.of(datum, this.options)), this.#readyKeyboard({
 			...plot,
 			x: margin.left,
 			y: top
 		})?.register);
 		ctx.live = this.liveFrame;
+		ctx.marking = this.#marks;
 		this.drawHeader(svg, width);
 		if (this.options.data != null) this.draw(ctx);
 		else root.selectAll("*").remove();
@@ -188,46 +222,49 @@ var Chart2D = class extends Chart {
 			fill: this.theme.inkSecondary,
 			y: this.options.title ? 37 : 14
 		}].filter(Boolean);
-		svg.select("g.g-header").selectAll("text").data(lines).join("text").attr("x", 16).attr("y", (d) => d.y).attr("font-size", (d) => d.size).attr("font-weight", (d) => d.weight).attr("fill", (d) => d.fill).attr("textLength", (d) => d.text.length * d.size * .6 > width - 32 ? width - 32 : null).text((d) => d.text);
+		const room = this.textRoom, scale = this.fontScale;
+		svg.select("g.g-header").selectAll("text").data(lines).join("text").attr("x", 16).attr("y", (d) => d.y * room).attr("font-size", (d) => d.size).attr("font-weight", (d) => d.weight).attr("fill", (d) => d.fill).attr("textLength", (d) => d.text.length * d.size * scale * .6 > width - 32 ? width - 32 : null).text((d) => d.text);
 	}
 	drawLegend(svg, width, height, headerHeight, plotHeight, top, margin) {
 		const position = this.legendPosition;
 		const shown = this.#shownLegend();
-		let x = 16, y = headerHeight + 15;
-		if (position === LegendPosition.Bottom) y = top + plotHeight + margin.bottom + 14;
+		const room = this.textRoom, row = ROW * room;
+		let x = 16, y = headerHeight + 15 * room;
+		if (position === LegendPosition.Bottom) y = top + plotHeight + margin.bottom + 14 * room;
 		if (position === LegendPosition.Right) {
-			x = width - 112;
+			x = width - RAIL;
 			y = top + 10;
 		}
 		const left = x;
 		const placed = shown.map((item) => {
-			const name = item.label ?? item.key, cost = legendCost(item);
-			if (position !== LegendPosition.Right && x > left && x + cost > width - 8) {
+			const name = item.label ?? item.key, shown = this.#legendText(item), cost = this.#legendCost(shown);
+			if (position !== LegendPosition.Right && x > left && x + cost > width - EDGE) {
 				x = left;
-				y += ROW;
+				y += row;
 			}
 			const at = {
 				...item,
 				name,
+				shown,
 				x,
 				y
 			};
-			if (position === LegendPosition.Right) y += 18;
+			if (position === LegendPosition.Right) y += row - 4;
 			else x += cost;
 			return at;
 		});
 		const legend = svg.select("g.g-legend").selectAll("g").data(placed, (d) => d.key).join((enter) => {
 			const g = enter.append("g");
 			g.append("rect").attr("width", 10).attr("height", 10).attr("rx", 3).attr("y", -9);
-			g.append("text").attr("x", 15).attr("font-size", 11.5);
+			g.append("text").attr("x", INDENT).attr("font-size", 11.5);
 			return g;
 		});
 		legend.attr("transform", (d) => `translate(${d.x},${d.y})`);
 		legend.select("rect").attr("fill", (d) => d.color);
-		legend.select("text").attr("fill", this.theme.inkSecondary).text((d) => d.name);
+		legend.select("text").attr("fill", this.theme.inkSecondary).text((d) => d.shown);
+		TextFit.hint(legend, (d) => d.title ?? (d.shown === d.name ? void 0 : d.name));
 	}
 };
-var legendCost = (item) => 32 + (item.label ?? item.key).length * CHAR;
 var GEOMETRY = [
 	"d",
 	"x",

package/dist/core/Chart3D.js

@@ -2,17 +2,19 @@ import { Chart } from "./Chart.js";
 import { ChartExportError, ExportErrorCode } from "./ChartExportError.js";
 import { ChartExporter } from "./ChartExporter.js";
 import { Context3D } from "./Context3D.js";
-import { LegendPosition } from "./enums.js";
+import { LegendPosition, RenderType } from "./enums.js";
 import { SceneOverlay } from "./SceneOverlay.js";
-import { AmbientLight, Color, DirectionalLight, Group, HemisphereLight, Mesh, PCFSoftShadowMap, PerspectiveCamera, Raycaster, Scene, Timer, Vector2, WebGLRenderer } from "three";
+import { AmbientLight, Color, DirectionalLight, Group, HemisphereLight, Mesh, PCFSoftShadowMap, PerspectiveCamera, Raycaster, Scene, ShaderMaterial, Timer, Vector2, WebGLRenderer } from "three";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { CSS2DRenderer } from "three/addons/renderers/CSS2DRenderer.js";
 // src/core/Chart3D.ts
 var rad = Math.PI / 180;
+/** The most `chartStyle.pixelRatio` can ask for: past this a large chart costs far more than it shows. */
+var RATIO_LIMIT = 3;
 /** three.js stage: renderer, camera, lights, orbit controls, picking, HTML overlay and disposal. Subclasses implement `build`. */
 var Chart3D = class Chart3D extends Chart {
 	static shared = null;
-	renderer = null;
+	webgl = null;
 	overlay = null;
 	controls = null;
 	camera = new PerspectiveCamera(38, 1.6, .01, 100);
@@ -22,18 +24,48 @@ var Chart3D = class Chart3D extends Chart {
 	timer = new Timer();
 	ray = new Raycaster();
 	legendEl = null;
+	#antialias = true;
+	get renderer() {
+		return RenderType.WebGL;
+	}
 	compose(animated) {
 		const scene = new Scene();
 		scene.background = new Color(this.theme.surface);
-		const ctx = new Context3D(new Group(), this.theme, this.palette, animated);
+		const ctx = new Context3D(new Group(), this.theme, this.palette, animated, this.fontScale, this.#opacity);
 		scene.add(ctx.root);
 		this.light(scene);
 		if (this.options.data != null) this.build(ctx);
+		this.#restyle(scene);
 		return {
 			scene,
 			ctx
 		};
 	}
+	/** A class may share one material between builds, so opacity is always taken from the value it first had. */
+	#restyle(scene) {
+		const { wireframe, opacity } = this.options.chartStyle ?? {};
+		if (wireframe === void 0 && opacity === void 0) return;
+		const share = this.#opacity;
+		scene.traverse((object) => {
+			for (const material of [object.material].flat()) {
+				if (!material) continue;
+				if (wireframe !== void 0 && "wireframe" in material) material.wireframe = wireframe;
+				if (opacity === void 0) continue;
+				material.opacity = (material.userData.opacity ??= material.opacity) * share;
+				material.transparent ||= share < 1;
+				if (material instanceof ShaderMaterial && material.uniforms.uOpacity) material.uniforms.uOpacity.value = share;
+			}
+		});
+	}
+	/** `chartStyle.opacity`, the share of every material's own opacity that shows. */
+	get #opacity() {
+		const { opacity = 1 } = this.options.chartStyle ?? {};
+		return Number.isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
+	}
+	get #pixelRatio() {
+		const asked = this.options.chartStyle?.pixelRatio;
+		return asked && asked > 0 && Number.isFinite(asked) ? Math.min(asked, RATIO_LIMIT) : Math.min(devicePixelRatio, 2);
+	}
 	light(scene) {
 		const key = new DirectionalLight("#ffffff", 2.2);
 		key.position.set(2.5, 4, 3);
@@ -57,9 +89,11 @@ var Chart3D = class Chart3D extends Chart {
 	paint() {
 		const { width, height } = this.size;
 		this.clearScene();
-		if (!this.renderer) {
-			const renderer = this.renderer = new WebGLRenderer({ antialias: true });
-			renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+		const antialias = this.options.chartStyle?.antialias ?? true;
+		if (this.webgl && antialias !== this.#antialias) this.teardown();
+		this.#antialias = antialias;
+		if (!this.webgl) {
+			const renderer = this.webgl = new WebGLRenderer({ antialias });
 			renderer.shadowMap.enabled = true;
 			renderer.shadowMap.type = PCFSoftShadowMap;
 			this.host.appendChild(renderer.domElement);
@@ -83,8 +117,9 @@ var Chart3D = class Chart3D extends Chart {
 			this.place(this.camera);
 			renderer.setAnimationLoop(() => this.tick());
 		}
-		this.renderer.domElement.setAttribute("aria-label", this.label);
-		this.renderer.setSize(width, height);
+		if (this.webgl.getPixelRatio() !== this.#pixelRatio) this.webgl.setPixelRatio(this.#pixelRatio);
+		this.webgl.domElement.setAttribute("aria-label", this.label);
+		this.webgl.setSize(width, height);
 		this.overlay.setSize(width, height);
 		this.camera.aspect = width / height;
 		this.camera.updateProjectionMatrix();
@@ -96,12 +131,12 @@ var Chart3D = class Chart3D extends Chart {
 		this.drawLegend();
 	}
 	tick() {
-		if (!this.scene || !this.renderer) return;
+		if (!this.scene || !this.webgl) return;
 		this.timer.update();
 		const t = this.timer.getElapsed();
 		for (const fn of this.ctx.frames) fn(t);
 		this.controls.update();
-		this.renderer.render(this.scene, this.camera);
+		this.webgl.render(this.scene, this.camera);
 		this.overlay.render(this.scene, this.camera);
 	}
 	onPointer = (event) => {
@@ -119,12 +154,12 @@ var Chart3D = class Chart3D extends Chart {
 		const items = this.palette.items();
 		const header = [this.options.title, this.options.subtitle].filter(Boolean);
 		if (!header.length && (items.length < 2 || this.legendPosition === LegendPosition.None)) return;
-		const el = this.legendEl = document.createElement("div");
+		const el = this.legendEl = document.createElement("div"), scale = this.fontScale;
 		Object.assign(el.style, {
 			position: "absolute",
 			top: "10px",
 			left: "14px",
-			font: `12px ${this.theme.fontFamily}`,
+			font: `${12 * scale}px ${this.theme.fontFamily}`,
 			color: this.theme.inkSecondary,
 			pointerEvents: "none"
 		});
@@ -132,7 +167,7 @@ var Chart3D = class Chart3D extends Chart {
 			const line = el.appendChild(document.createElement("div"));
 			line.textContent = text;
 			if (i === 0 && this.options.title) Object.assign(line.style, {
-				font: `600 15px ${this.theme.fontFamily}`,
+				font: `600 ${15 * scale}px ${this.theme.fontFamily}`,
 				color: this.theme.ink
 			});
 		});
@@ -171,14 +206,14 @@ var Chart3D = class Chart3D extends Chart {
 		this.ctx = null;
 	}
 	teardown() {
-		this.renderer?.setAnimationLoop(null);
+		this.webgl?.setAnimationLoop(null);
 		this.clearScene();
 		this.controls?.dispose();
 		this.legendEl?.remove();
 		this.overlay?.domElement.remove();
-		this.renderer?.domElement.remove();
-		this.renderer?.dispose();
-		this.renderer = this.overlay = this.controls = null;
+		this.webgl?.domElement.remove();
+		this.webgl?.dispose();
+		this.webgl = this.overlay = this.controls = null;
 	}
 	/** Works without WebGL: builds the scene and hashes its geometry and transforms. */
 	signature() {
@@ -216,7 +251,7 @@ var Chart3D = class Chart3D extends Chart {
 	*/
 	async rasterize(scale) {
 		await this.ready();
-		const { renderer, scene, camera } = this;
+		const { webgl: renderer, scene, camera } = this;
 		if (!renderer || !scene) return this.#rasterizeOffscreen(scale);
 		this.ctx.settle();
 		const ratio = renderer.getPixelRatio();
@@ -275,7 +310,8 @@ var Chart3D = class Chart3D extends Chart {
 		}, output.width / width, this.theme, {
 			title,
 			subtitle,
-			items
+			items,
+			fontScale: this.fontScale
 		});
 		return output;
 	}

package/dist/core/ChartExportError.js

@@ -8,6 +8,8 @@ var ExportErrorCode = /* @__PURE__ */ function(ExportErrorCode) {
 	ExportErrorCode["Tainted"] = "tainted";
 	/** The browser could not draw or encode the image, usually because it is too large. */
 	ExportErrorCode["Encoding"] = "encoding";
+	/** The code for a format loads on first use, and that load failed. */
+	ExportErrorCode["Unavailable"] = "unavailable";
 	/** The React handle has no chart mounted yet. */
 	ExportErrorCode["Unmounted"] = "unmounted";
 	return ExportErrorCode;

package/dist/core/ChartExporter.js

@@ -4,6 +4,8 @@ var ExportFormat = /* @__PURE__ */ function(ExportFormat) {
 	ExportFormat["SVG"] = "svg";
 	ExportFormat["PNG"] = "png";
 	ExportFormat["CSV"] = "csv";
+	ExportFormat["PDF"] = "pdf";
+	ExportFormat["Excel"] = "xlsx";
 	return ExportFormat;
 }({});
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -58,9 +60,11 @@ var LIVE_ROOT = [
 /** On-screen controls, hit areas and the keyboard cursor. None of them belongs in a picture of the chart. */
 var CHROME = "[role=\"button\"], .m-zoom-hit, .g-keyboard";
 var TIMEOUT = 2e4;
+var HELD_STROKE = "non-scaling-stroke";
 /** Characters XML has no way to write, which would make the whole file unreadable. */
 var UNWRITABLE = /[^\t\n\r\x20-\uD7FF\uE000-\uFFFD\u{10000}-\u{10FFFF}]/gu;
 var FORMULA = /^[=+\-@\t\r]/;
+var SHEET_ROWS = 1048576;
 var quoteless = (name) => name.trim().replace(/^['"]|['"]$/g, "").toLowerCase();
 /**
 * Turns a chart into files. Builds on what every chart already has: its SVG root or a canvas, and `table()`.
@@ -72,17 +76,29 @@ var ChartExporter = class ChartExporter {
 		if (!rows.length) throw new ChartExportError(ExportErrorCode.NoData, "CSV export needs rows, and this chart's data has no flat table view.");
 		return [columns, ...rows].map((row) => row.map((cell) => ChartExporter.#cell(cell)).join(",")).join("\r\n");
 	}
+	/** The formats built from rows. A worksheet has a fixed height, and one row of it is the header. */
+	static tabular(rows) {
+		return rows ? ["csv", ...rows < SHEET_ROWS ? ["xlsx"] : []] : [];
+	}
+	/** Awaits a writer's dynamic import, so a chunk that fails to load rejects like any other export. */
+	static async load(format, load) {
+		try {
+			return await load();
+		} catch (cause) {
+			throw new ChartExportError(ExportErrorCode.Unavailable, `The ${format} writer could not be loaded: ${cause.message}`, { cause });
+		}
+	}
 	static #cell(cell) {
-		const text = ChartExporter.#text(cell);
-		return /[",\r\n]/.test(text) ? `"${text.replaceAll("\"", "\"\"")}"` : text;
+		const text = ChartExporter.text(cell);
+		const guarded = typeof cell === "string" && FORMULA.test(text) && !Number.isFinite(+text) ? `'${text}` : text;
+		return /[",\r\n]/.test(guarded) ? `"${guarded.replaceAll("\"", "\"\"")}"` : guarded;
 	}
-	static #text(cell) {
+	/** A cell as plain text. */
+	static text(cell) {
 		if (cell === null || cell === void 0) return "";
 		if (cell instanceof Date) return Number.isNaN(+cell) ? "" : cell.toISOString();
 		if (typeof cell === "number") return Number.isNaN(cell) ? "" : String(cell);
-		if (typeof cell === "object") return ChartExporter.#json(cell);
-		const text = String(cell);
-		return typeof cell === "string" && FORMULA.test(text) && !Number.isFinite(+text) ? `'${text}` : text;
+		return typeof cell === "object" ? ChartExporter.#json(cell) : String(cell);
 	}
 	/** Layouts leave cycles in the objects they are handed, which JSON cannot write. */
 	static #json(cell) {
@@ -217,11 +233,18 @@ var ChartExporter = class ChartExporter {
 		return out;
 	}
 	static serialize(svg) {
-		return new XMLSerializer().serializeToString(svg).replace(UNWRITABLE, "");
+		return ChartExporter.writable(new XMLSerializer().serializeToString(svg));
+	}
+	/** `text` without the characters XML cannot hold. */
+	static writable(text) {
+		return text.replace(UNWRITABLE, "");
 	}
 	/** Draws SVG text onto a canvas filled with `surface`. The SVG must already be embedded: an SVG image cannot load links. */
 	static async raster(svg, { width, height }, scale, surface) {
-		const url = URL.createObjectURL(ChartExporter.blob(svg, "svg"));
+		const url = URL.createObjectURL(ChartExporter.blob(ChartExporter.#atScale(svg, {
+			width,
+			height
+		}, scale), "svg"));
 		try {
 			const image = await ChartExporter.#load(url);
 			const canvas = ChartExporter.canvas(width * scale, height * scale);
@@ -234,6 +257,25 @@ var ChartExporter = class ChartExporter {
 			URL.revokeObjectURL(url);
 		}
 	}
+	/**
+	* A held stroke is sized in screen pixels, and engines disagree on what those are in an image drawn larger:
+	* Chromium keeps it thin, WebKit scales it. In an image already at full size they agree, so that is what they get.
+	*/
+	static #atScale(svg, { width, height }, scale) {
+		if (scale === 1 || !svg.includes(HELD_STROKE)) return svg;
+		const root = new DOMParser().parseFromString(svg, "image/svg+xml").documentElement;
+		for (const [name, value] of Object.entries({
+			viewBox: `0 0 ${width} ${height}`,
+			width: width * scale,
+			height: height * scale
+		})) root.setAttribute(name, `${value}`);
+		for (const el of root.querySelectorAll(`[vector-effect="${HELD_STROKE}"]`)) {
+			el.style.setProperty("stroke-width", `${parseFloat(el.closest("[stroke-width]")?.getAttribute("stroke-width") ?? "1") * scale}px`);
+			const dash = el.getAttribute("stroke-dasharray");
+			if (dash && dash !== "none") el.setAttribute("stroke-dasharray", dash.split(/[\s,]+/).map((length) => parseFloat(length) * scale).join(" "));
+		}
+		return ChartExporter.serialize(root);
+	}
 	static #load(url) {
 		return new Promise((resolve, reject) => {
 			const image = new Image();

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

@@ -1,9 +1,12 @@
-import { easeCubicOut, interpolateString } from "d3";
+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 {
@@ -19,6 +22,8 @@ var Context2D = class Context2D {
 	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;
@@ -51,6 +56,7 @@ var Context2D = class Context2D {
 		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() {
@@ -64,12 +70,21 @@ var Context2D = class Context2D {
 			el[PLACED] = true;
 		});
 		apply(fresh, from);
-		const motion = selection.transition().duration(650).ease(easeCubicOut).delay((_, i) => this.live ? 0 : i * stagger);
-		for (const [name, value] of Object.entries(final)) if (this.live && name === "d") motion.attrTween("d", pathMorph(value));
-		else motion.attr(name, value);
-		for (const name of restore) motion.attr(name, function() {
+		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. */
@@ -149,16 +164,15 @@ var Context2D = class Context2D {
 		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);
 }
-var arcFlags = (d) => [...d.matchAll(/A[^A-Za-z]*?,[^,]*,([01]),([01]),/g)].map((flag) => flag[1] + flag[2]).join();
-/** Tweens a path, snapping when an arc changes flags: those cannot take in-between values. */
-function pathMorph(value) {
-	return function(datum, index) {
-		const from = this.getAttribute("d") ?? "";
-		const to = String((typeof value === "function" ? value(datum, index) : value) ?? "");
-		return arcFlags(from) === arcFlags(to) ? interpolateString(from, to) : () => to;
-	};
-}
-export { Context2D, FRAMING };
+export { Context2D, FRAME, FRAMING };

package/dist/core/Context3D.js

@@ -7,15 +7,20 @@ var Context3D = class {
 	theme;
 	palette;
 	animated;
+	fontScale;
+	opacity;
 	/** Per-frame callbacks; `t` is seconds since the chart was built. */
 	frames = [];
 	picks = /* @__PURE__ */ new Map();
 	#reveals = /* @__PURE__ */ new Set();
-	constructor(root, theme, palette, animated) {
+	/** `fontScale` is `chartStyle.fontSize`. `opacity` is `chartStyle.opacity`: `onFrame` code that writes `material.opacity` multiplies by it. */
+	constructor(root, theme, palette, animated, fontScale = 1, opacity = 1) {
 		this.root = root;
 		this.theme = theme;
 		this.palette = palette;
 		this.animated = animated;
+		this.fontScale = fontScale;
+		this.opacity = opacity;
 	}
 	color(value) {
 		return new Color(value);
@@ -58,7 +63,7 @@ var Context3D = class {
 		const el = document.createElement("div");
 		el.textContent = text;
 		Object.assign(el.style, {
-			font: `${size}px ${this.theme.fontFamily}`,
+			font: `${size * this.fontScale}px ${this.theme.fontFamily}`,
 			whiteSpace: "nowrap",
 			pointerEvents: "none",
 			color: {