@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/core/LiveStream.js

@@ -0,0 +1,179 @@
+import { DataShape, Dimension } from "./enums.js";
+// src/core/LiveStream.ts
+var SWEEP = 1024;
+/** Runs `fn` on the next animation frame, or a timer where there is none. */
+var nextFrame = (fn) => typeof requestAnimationFrame === "function" ? requestAnimationFrame(fn) : setTimeout(() => fn(Date.now()), 16);
+var cancelFrame = (id) => {
+	if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(id);
+	else clearTimeout(id);
+};
+var stamp = (cell) => {
+	if (cell instanceof Date) return +cell;
+	if (typeof cell === "number") return cell;
+	return typeof cell === "string" ? Date.parse(cell) : NaN;
+};
+/**
+* Rows arriving over time: holds the live buffer, slides the window, and commits at most once per
+* animation frame. Supports flat rows and long-form series rows, on 2D table charts only.
+*/
+var LiveStream = class {
+	columns;
+	mounted;
+	commit;
+	#rows;
+	#window;
+	#keep;
+	#x;
+	#sweepAt = SWEEP;
+	#series = /* @__PURE__ */ new Set();
+	#frame = 0;
+	#dirty = false;
+	#paused = false;
+	#stopped = false;
+	/** Throws when a chart cannot take appended rows, naming what it can do instead. */
+	static assert(meta, data) {
+		const why = meta.dimension !== Dimension.Two ? "it is a 3D chart" : meta.shape !== DataShape.Table ? `its data shape is "${meta.shape}"` : data != null && !Array.isArray(data) ? "its data is not an array of rows" : "";
+		if (why) throw new Error(`${meta.name} (${meta.id}) cannot append: ${why}. append() supports rows and long-form series rows on 2D table charts. Use update({ data }) to replace the data.`);
+	}
+	constructor(seed, columns, mounted, commit) {
+		this.columns = columns;
+		this.mounted = mounted;
+		this.commit = commit;
+		this.#rows = [...seed ?? []];
+		this.#learn(this.#rows);
+	}
+	get paused() {
+		return this.#paused;
+	}
+	get stopped() {
+		return this.#stopped;
+	}
+	/** Rows held now, committed or not. */
+	get size() {
+		return this.#rows.length;
+	}
+	push(rows, { window, keep, x } = {}) {
+		if (this.#stopped) return;
+		const incoming = Array.isArray(rows) ? rows : [rows];
+		if (keep !== void 0 && !(Number.isInteger(keep) && keep > 0)) throw new RangeError(`append: keep must be a positive integer, got ${keep}`);
+		if (window !== void 0 && !(window > 0 && Number.isFinite(window))) throw new RangeError(`append: window must be a positive span, got ${window}`);
+		const span = window ?? this.#window, column = x ?? this.#x ?? this.columns().x;
+		if (span !== void 0 && column === void 0) throw new Error("append: window needs an x column; pass { x } naming it");
+		for (const row of incoming) this.#check(row, span === void 0 ? void 0 : column);
+		this.#window = span;
+		this.#keep = keep ?? this.#keep;
+		this.#x = x ?? this.#x;
+		for (const row of incoming) this.#rows.push(row);
+		this.#learn(incoming);
+		if (this.#rows.length > this.#sweepAt) this.#trim();
+		this.#dirty = true;
+		this.#schedule();
+	}
+	/** Commits now instead of on the next frame. Does nothing while paused. */
+	flush() {
+		if (this.#frame) cancelFrame(this.#frame);
+		this.#frame = 0;
+		if (!this.#dirty || this.#paused || this.#stopped) return;
+		this.#dirty = false;
+		this.#trim();
+		this.commit(this.#steady());
+	}
+	/** Freezes the picture. Rows keep arriving and sliding out of the window. */
+	pause() {
+		this.#paused = true;
+		if (this.#frame) cancelFrame(this.#frame);
+		this.#frame = 0;
+	}
+	resume() {
+		this.#paused = false;
+		this.#schedule();
+	}
+	/** The chart's data was replaced from outside. */
+	reset(rows) {
+		this.#rows = Array.isArray(rows) ? [...rows] : [];
+		this.#series.clear();
+		this.#learn(this.#rows);
+		this.#sweepAt = SWEEP;
+		this.#dirty = false;
+		if (this.#frame) cancelFrame(this.#frame);
+		this.#frame = 0;
+	}
+	/** Cancels pending work and, unless `open`, ignores later rows, as when a socket outlives its chart. */
+	stop(open = false) {
+		this.#stopped = !open;
+		if (this.#frame) cancelFrame(this.#frame);
+		this.#frame = 0;
+	}
+	/** Reopens a stopped stream for a chart being mounted, carrying rows held so far. */
+	start() {
+		this.#stopped = false;
+		this.flush();
+	}
+	#schedule() {
+		if (this.#frame || !this.#dirty || this.#paused || this.#stopped || !this.mounted()) return;
+		this.#frame = nextFrame(() => {
+			this.#frame = 0;
+			this.flush();
+		});
+	}
+	get #xColumn() {
+		return this.#x ?? this.columns().x;
+	}
+	#check(row, column) {
+		if (row === null || typeof row !== "object" || Array.isArray(row)) throw new TypeError(`append: expected row objects, got ${JSON.stringify(row)}`);
+		if (column === void 0) return;
+		const cell = row[column];
+		if (cell != null && !Number.isFinite(stamp(cell))) throw new TypeError(`append: window needs dates or numbers in column "${column}", got ${String(cell)}`);
+	}
+	#trim() {
+		if (this.#window !== void 0) this.#slide(this.#window);
+		if (this.#keep !== void 0) this.#cap(this.#keep);
+		this.#sweepAt = Math.max(SWEEP, this.#rows.length * 2);
+	}
+	#slide(span) {
+		const column = this.#xColumn;
+		let newest = -Infinity;
+		for (const row of this.#rows) {
+			const at = stamp(row[column]);
+			if (at > newest) newest = at;
+		}
+		this.#rows = this.#rows.filter((row) => stamp(row[column]) >= newest - span);
+	}
+	/**
+	* Charts read series in first-seen order, and trimming rotates which series is oldest, so colours
+	* and stacks would swap every frame. Once that happens, each series' oldest row leads, in the order series arrived.
+	*/
+	#steady() {
+		const { series } = this.columns();
+		if (series === void 0) return this.#rows.slice();
+		const first = /* @__PURE__ */ new Map();
+		this.#rows.forEach((row, i) => {
+			if (!first.has(row[series])) first.set(row[series], i);
+		});
+		for (const key of first.keys()) this.#series.add(key);
+		for (const key of this.#series) if (!first.has(key)) this.#series.delete(key);
+		const leads = [...this.#series].map((key) => first.get(key)), led = new Set(leads);
+		if (leads.every((at, i) => !i || leads[i - 1] < at)) return this.#rows.slice();
+		return [...leads.map((i) => this.#rows[i]), ...this.#rows.filter((_, i) => !led.has(i))];
+	}
+	#learn(rows) {
+		const { series } = this.columns();
+		if (series !== void 0) for (const row of rows) this.#series.add(row[series]);
+	}
+	/** Walks back from the newest row, so each series keeps its latest `limit`. */
+	#cap(limit) {
+		const { series } = this.columns();
+		const counts = /* @__PURE__ */ new Map();
+		const kept = [];
+		for (let i = this.#rows.length - 1; i >= 0; i--) {
+			const row = this.#rows[i];
+			const key = series === void 0 ? void 0 : row[series];
+			const count = counts.get(key) ?? 0;
+			if (count >= limit) continue;
+			counts.set(key, count + 1);
+			kept.push(row);
+		}
+		this.#rows = kept.reverse();
+	}
+};
+export { LiveStream, cancelFrame, nextFrame };

package/dist/core/MarkOrigin.js

@@ -0,0 +1,88 @@
+// src/core/MarkOrigin.ts
+/** Where derived marks keep the record they were drawn from, most direct first. */
+var POINTERS = [
+	"row",
+	"record",
+	"datum",
+	"data",
+	"raw",
+	"source",
+	"node",
+	"link",
+	"feature",
+	"region",
+	"sample"
+];
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** Text form of a cell. Charts often turn dates into timestamps. */
+var cell = (value) => String(value instanceof Date ? value.getTime() : value);
+/** A graph layout works on copies, so its nodes and links are known by id and by their two ends. */
+var nameOf = (record) => {
+	const end = (value) => isRecord(value) ? value.id : value;
+	return "source" in record && "target" in record ? `${end(record.source)}>${end(record.target)}` : record.id;
+};
+var held = /* @__PURE__ */ new WeakMap();
+/** Finds the record a mark stands for, so `onSelect` hands back what the user passed in rather than layout state. */
+var MarkOrigin = class {
+	/** The row, node or feature behind `mark`, or `mark` when it has no single source. */
+	static of(mark, { data, ...options }) {
+		if (typeof mark !== "object" || mark === null || typeof data !== "object" || data === null) return mark;
+		const known = this.#held(data), derived = mark;
+		return this.#known(derived, known) ?? this.#pointedAt(derived, known, 2) ?? (Array.isArray(data) ? this.#matched(derived, data, options) : void 0) ?? mark;
+	}
+	static #held(data) {
+		let known = held.get(data);
+		if (!known) {
+			known = {
+				records: /* @__PURE__ */ new Set(),
+				named: /* @__PURE__ */ new Map()
+			};
+			held.set(data, known);
+			this.#collect(data, known.records);
+			if (!Array.isArray(data)) for (const record of known.records) known.named.set(nameOf(record), record);
+			known.named.delete(void 0);
+		}
+		return known;
+	}
+	static #known(candidate, { records, named }) {
+		return records.has(candidate) ? candidate : named.get(nameOf(candidate));
+	}
+	/** Rows, tree nodes, graph nodes and links, and map features. Arrays of numbers or coordinates hold no records. */
+	static #collect(value, into) {
+		if (Array.isArray(value)) {
+			if (isRecord(value.find((item) => item !== null && item !== void 0))) for (const item of value) this.#collect(item, into);
+		} else if (isRecord(value) && !into.has(value)) {
+			into.add(value);
+			for (const child of Object.values(value)) if (Array.isArray(child)) this.#collect(child, into);
+		}
+	}
+	static #pointedAt(mark, known, depth) {
+		const links = POINTERS.filter((key) => key !== "source" || !("target" in mark)).map((key) => mark[key]).filter(isRecord);
+		for (const link of links) {
+			const found = this.#known(link, known);
+			if (found) return found;
+		}
+		if (depth === 1) return void 0;
+		for (const link of links) {
+			const deeper = this.#pointedAt(link, known, depth - 1);
+			if (deeper) return deeper;
+		}
+	}
+	/**
+	* For marks built by pivoting rows: the one row whose named columns all appear on the mark. Summed
+	* rows fail on the value, so a second pass ignores numbers. More than one match means a real aggregate.
+	*/
+	static #matched(mark, rows, options) {
+		const table = rows.filter(isRecord);
+		const first = table[0];
+		if (!first) return void 0;
+		const columns = Object.values(options).flat().filter((name) => typeof name === "string" && name in first);
+		const shown = new Set(Object.values(mark).flatMap((value) => isRecord(value) ? Object.values(value) : [value]).map(cell));
+		const unique = (names) => {
+			const hits = names.length ? table.filter((row) => names.every((name) => shown.has(cell(row[name])))) : [];
+			return hits.length === 1 ? hits[0] : void 0;
+		};
+		return unique(columns) ?? unique(columns.filter((name) => typeof first[name] !== "number"));
+	}
+};
+export { MarkOrigin };

package/dist/core/MarkStyle.js

@@ -0,0 +1,294 @@
+import { FRAMING } from "./Context2D.js";
+import { EdgeRendering, StrokeDash } from "./enums.js";
+import { color } from "d3";
+// src/core/MarkStyle.ts
+var SHAPES = "path,line,polyline,polygon,rect,circle,ellipse";
+var UNDRAWN = "defs,clipPath,mask,pattern,marker,symbol,.tick,.domain";
+/** Mark-less groups that the shared layer and chart modules name, past what `FRAME` and `FRAMING` list. */
+var FRAMED = /(^|-)(axis|grid|clip|brush(es)?|zoom|annotations?|crosshair|hair)(-|$)/;
+/** Path groups that fill their layout, however small each shape is: cells, tiles, and the keys read against them. */
+var TILED = /^(cells(-\d+)?|tiles|nonzeros|before|after|size-key)$/;
+var MEASURED = [
+	"strokeWidth",
+	"strokeDash",
+	"strokeCap",
+	"strokeJoin",
+	"opacity",
+	"markSize",
+	"edges",
+	"fontSize"
+];
+/** Past this radius a circle is layout, such as a packed node or a dial, not a marker. */
+var MARKER_RADIUS = 24;
+/** The longest `d` a d3 symbol writes. */
+var SYMBOL_PATH = 300;
+var SYMBOL_REACH = 30;
+var SCALE = /scale\(\s*([-\d.e]+)\s*\)/;
+var NUMBER = /-?\d*\.?\d+(?:e-?\d+)?/gi;
+var DASHES = {
+	[StrokeDash.Dashed]: [6, 4],
+	[StrokeDash.Dotted]: [2, 3]
+};
+var EDGES = {
+	[EdgeRendering.Crisp]: "crispEdges",
+	[EdgeRendering.Precise]: "geometricPrecision"
+};
+var round = (value) => String(+value.toFixed(4));
+var positive = (value) => value !== void 0 && value > 0 && Number.isFinite(value) ? value : void 0;
+var write = (el, name, value) => {
+	if (value === null) el.removeAttribute(name);
+	else el.setAttribute(name, value);
+};
+var inFlight = (el) => !!el.__transition;
+var groupNames = (group) => [...group.classList].filter((name) => name.startsWith("m-")).map((name) => name.slice(2));
+/** `base` times `by`, reading `fallback` when the element has no value of its own. A value that is no number stays. */
+var times = (by, fallback) => (base) => {
+	const value = parseFloat(base ?? fallback ?? "");
+	return Number.isFinite(value) ? round(value * by) : base;
+};
+/** True for a path drawn around the origin and small enough to be a glyph, which is how d3 symbols come. */
+var glyph = (d) => {
+	if (!d || d.length > SYMBOL_PATH) return false;
+	const numbers = (d.match(NUMBER) ?? []).map(Number);
+	return numbers.length > 0 && Math.max(...numbers) <= SYMBOL_REACH && Math.min(...numbers) >= -30 && numbers.some((value) => value < 0) && numbers.some((value) => value > 0);
+};
+/** Adds to a glyph's own `scale()`, which entry animations use, or starts one after its `translate()`. */
+var scaled = (by) => (base) => {
+	if (base === null) return `scale(${by})`;
+	return SCALE.test(base) ? base.replace(SCALE, (_, own) => `scale(${round(parseFloat(own) * by)})`) : `${base} scale(${by})`;
+};
+/**
+* The `chartStyle` options that attributes carry. Attributes go back to what the chart drew before each
+* paint, so a chart always draws from clean values, and take the style again after it. A transition
+* owns the attributes it moves: `ends` gives it styled targets, and they count as held until it lands.
+*/
+var MarkStyle = class {
+	#held = /* @__PURE__ */ new Map();
+	/** What running transitions are heading for, since a mark is classed by how it will end up. */
+	#planned = /* @__PURE__ */ new Map();
+	#framed = /* @__PURE__ */ new WeakMap();
+	/** Whether a group's shapes of one tag can size, which holds for all of them or none. */
+	#sizing = /* @__PURE__ */ new Map();
+	#style = {};
+	#theme = null;
+	#key = "";
+	#bare = /* @__PURE__ */ new Set();
+	/** True when `style` has anything this pass does. Colour and the 3D options do not need it. */
+	static wanted(style) {
+		return !!style && MEASURED.some((key) => style[key] !== void 0);
+	}
+	/** Sets what the next paint draws and puts back what the last one styled. A new style also takes back what is moving. */
+	begin(style, theme) {
+		const key = JSON.stringify([
+			style,
+			theme.surface,
+			theme.grid,
+			theme.axis
+		]);
+		this.end(key !== this.#key);
+		this.#sizing.clear();
+		this.#key = key;
+		this.#style = style;
+		this.#theme = theme;
+		this.#bare = new Set([
+			theme.surface,
+			theme.grid,
+			theme.axis
+		].map(hex));
+	}
+	/** Puts back every styled attribute, leaving those a transition is still moving unless `all`. */
+	end(all = true) {
+		for (const [el, held] of this.#held) {
+			for (const [name, { value, moving }] of held) {
+				if (moving && !all && inFlight(el)) continue;
+				write(el, name, value);
+				held.delete(name);
+			}
+			if (!held.size) this.#held.delete(el);
+		}
+		for (const el of this.#planned.keys()) if (all || !inFlight(el)) this.#planned.delete(el);
+	}
+	/** Styles the finished drawing. Marks only under `g-plot`; text anywhere in the chart. */
+	apply(svg) {
+		const plot = svg.querySelector("g.g-plot");
+		if (plot) {
+			for (const el of plot.querySelectorAll(SHAPES)) if (this.#isMark(el)) this.#restyle(el);
+		}
+		if (positive(this.#style.fontSize)) for (const el of svg.querySelectorAll("text")) this.#restyle(el);
+	}
+	/** The values a transition should land on, for the attributes this style changes. Call before the transition exists. */
+	ends(selection, attrs) {
+		const names = Object.keys(attrs), landing = /* @__PURE__ */ new Map(), targets = /* @__PURE__ */ new Map(), claimed = /* @__PURE__ */ new Set();
+		const land = (el, datum, index) => {
+			const raw = {};
+			for (const name of names) {
+				const value = attrs[name];
+				const end = typeof value === "function" ? value.call(el, datum, index) : value;
+				raw[name] = end === null ? null : String(end);
+			}
+			landing.set(el, raw);
+			this.#planned.set(el, {
+				...this.#planned.get(el),
+				...raw
+			});
+		};
+		selection.each(function(datum, index) {
+			land(this, datum, index);
+		});
+		this.#sizing.clear();
+		for (const [el, raw] of landing) {
+			const styled = this.#claim(el, raw);
+			for (const name in styled) claimed.add(name);
+			targets.set(el, {
+				...raw,
+				...styled
+			});
+		}
+		const ends = {};
+		for (const name of claimed) ends[name] = function() {
+			return targets.get(this)[name];
+		};
+		return ends;
+	}
+	/** `names` were just written without a transition, so whatever was moving them no longer speaks for them. */
+	placed(selection, names) {
+		selection.each((_, index, nodes) => {
+			const el = nodes[index], held = this.#held.get(el), planned = this.#planned.get(el);
+			for (const name of names) {
+				if (held?.get(name)?.moving) held.delete(name);
+				if (planned) delete planned[name];
+			}
+		});
+	}
+	#claim(el, raw) {
+		const target = {};
+		if (el.tagName !== "text" && !(el.matches(SHAPES) && this.#isMark(el))) return target;
+		const rules = this.#rules(el);
+		let held = this.#held.get(el);
+		for (const name of Object.keys(raw)) {
+			const rule = rules[name];
+			if (!rule) continue;
+			held ??= /* @__PURE__ */ new Map();
+			this.#held.set(el, held);
+			if (!held.get(name)?.moving) write(el, name, rule(el.getAttribute(name)));
+			held.set(name, {
+				value: raw[name],
+				moving: true
+			});
+			target[name] = rule(raw[name]);
+		}
+		return target;
+	}
+	#restyle(el) {
+		for (const [name, rule] of Object.entries(this.#rules(el))) {
+			const held = this.#held.get(el);
+			if (held?.has(name)) continue;
+			const base = el.getAttribute(name), next = rule(base);
+			if (next === base) continue;
+			if (!held) this.#held.set(el, /* @__PURE__ */ new Map([[name, {
+				value: base,
+				moving: false
+			}]]));
+			else held.set(name, {
+				value: base,
+				moving: false
+			});
+			write(el, name, next);
+		}
+	}
+	#rules(el) {
+		if (el.tagName === "text") {
+			const by = positive(this.#style.fontSize);
+			return by ? { "font-size": times(by, this.#inherited(el, "font-size") ?? "16") } : {};
+		}
+		const { strokeDash, strokeCap, strokeJoin, edges } = this.#style;
+		const strokeWidth = positive(this.#style.strokeWidth), markSize = positive(this.#style.markSize);
+		const opacity = this.#style.opacity === void 0 || Number.isNaN(this.#style.opacity) ? void 0 : Math.max(0, Math.min(1, this.#style.opacity));
+		const paint = this.#inherited(el, "stroke") ?? "none";
+		const stroke = this.#ink(paint), fill = el.tagName === "line" ? 0 : this.#ink(this.#inherited(el, "fill") ?? "#000");
+		const rules = {};
+		if (stroke === 0 && fill === 0) return rules;
+		if (stroke === 2) {
+			if (strokeWidth) rules["stroke-width"] = times(strokeWidth, this.#inherited(el, "stroke-width") ?? "1");
+			const dash = strokeDash && DASHES[strokeDash];
+			if (dash && !this.#painted(this.#inherited(el, "stroke-dasharray"))) {
+				const pattern = dash.map((step) => round(step * (strokeWidth ?? 1))).join(" ");
+				rules["stroke-dasharray"] = () => pattern;
+			}
+			if (strokeCap) rules["stroke-linecap"] = () => strokeCap;
+			if (strokeJoin) rules["stroke-linejoin"] = () => strokeJoin;
+			if (opacity !== void 0) rules["stroke-opacity"] = times(opacity, this.#inherited(el, "stroke-opacity") ?? "1");
+		}
+		if (fill === 2 && opacity !== void 0) rules["fill-opacity"] = times(opacity, this.#inherited(el, "fill-opacity") ?? "1");
+		const guide = fill === 0 && hex(paint) === hex(this.#theme.grid);
+		if (markSize && !guide) this.#size(el, markSize, stroke, rules);
+		const rendering = edges && EDGES[edges];
+		if (rendering && (stroke === 2 || fill === 2)) rules["shape-rendering"] = () => rendering;
+		return rules;
+	}
+	#size(el, by, stroke, rules) {
+		if (el.tagName === "circle") {
+			if (this.#sizes(el)) rules.r = times(by, null);
+		} else if (el.tagName === "path") {
+			if (!(this.#planned.get(el) && "d" in this.#planned.get(el))) this.#whenLanded(el);
+			if (!this.#sizes(el)) return;
+			const transform = this.#read(el, "transform");
+			if (transform !== null && !transform.startsWith("translate(")) return;
+			rules.transform = scaled(by);
+			if (stroke !== 0) rules["vector-effect"] = () => "non-scaling-stroke";
+		}
+	}
+	/** One shape past the limit makes its whole group layout: sizing only the small ones would stop size reading as value. */
+	#sizes(el) {
+		const group = el.parentElement;
+		if (!group) return false;
+		let tags = this.#sizing.get(group);
+		if (!tags) this.#sizing.set(group, tags = /* @__PURE__ */ new Map());
+		let sizes = tags.get(el.tagName);
+		if (sizes === void 0) {
+			const peers = [...group.children].filter((peer) => peer.tagName === el.tagName);
+			sizes = el.tagName === "circle" ? peers.every((peer) => !(parseFloat(this.#read(peer, "r") ?? "") > MARKER_RADIUS)) : !groupNames(group).some((name) => TILED.test(name)) && peers.every((peer) => glyph(this.#read(peer, "d")));
+			tags.set(el.tagName, sizes);
+		}
+		return sizes;
+	}
+	/** A chart's own transition keeps its end to itself, so the shape it lands on is only known then. */
+	#whenLanded(el) {
+		for (const schedule of Object.values(el.__transition ?? {})) schedule.on = schedule.on.copy().on("end.mark-style", () => {
+			this.#sizing.delete(el.parentElement);
+			this.#restyle(el);
+		});
+	}
+	#read(el, name) {
+		const planned = this.#planned.get(el);
+		if (planned && name in planned) return planned[name];
+		return this.#held.get(el)?.get(name)?.value ?? el.getAttribute(name);
+	}
+	#inherited(el, name) {
+		return this.#read(el, name) ?? el.parentElement?.closest(`[${name}]`)?.getAttribute(name) ?? null;
+	}
+	#painted(dash) {
+		return !!dash && dash !== "none" && dash !== "0";
+	}
+	#ink(paint) {
+		if (paint === "none" || paint === "transparent") return 0;
+		return this.#bare.has(hex(paint)) ? 1 : 2;
+	}
+	#isMark(el) {
+		return !el.closest(UNDRAWN) && !this.#inFrame(el.parentElement);
+	}
+	#inFrame(group) {
+		if (!group || group.classList.contains("g-plot")) return false;
+		let framed = this.#framed.get(group);
+		if (framed === void 0) {
+			const names = groupNames(group);
+			framed = group.matches(".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") || names.some((name) => FRAMING.test(name) || FRAMED.test(name)) || this.#inFrame(group.parentElement);
+			this.#framed.set(group, framed);
+		}
+		return framed;
+	}
+};
+function hex(paint) {
+	return color(paint)?.formatHex() ?? paint;
+}
+export { MarkStyle };

package/dist/core/Palette.js

@@ -0,0 +1,69 @@
+import { color, interpolateRgb, interpolateRgbBasis } from "d3";
+// src/core/Palette.ts
+/** Assigns colours by job. Categorical colour follows the entity in first-seen order and never cycles: series past the validated list share `inkMuted`, and the legend folds them into "Other". */
+var Palette = class {
+	tokens;
+	seats;
+	pins;
+	opacity;
+	keys = /* @__PURE__ */ new Map();
+	ramp;
+	ranked = 0;
+	/**
+	* `seats` holds each key's place across palettes, for a stream whose series come and go. `pins`
+	* gives series their own colour: a pinned series takes no place in the order, so the others keep theirs.
+	* `opacity` is `chartStyle.opacity`: `inkOn` picks ink for the colour a mark ends up on the surface.
+	*/
+	constructor(tokens, seats, pins = {}, opacity = 1) {
+		this.tokens = tokens;
+		this.seats = seats;
+		this.pins = pins;
+		this.opacity = opacity;
+		this.ramp = interpolateRgbBasis([...tokens.sequential]);
+	}
+	color = (key) => {
+		let hit = this.keys.get(key);
+		if (!hit) {
+			hit = Object.hasOwn(this.pins, key) ? this.pins[key] : this.tokens.categorical[this.seat(key)] ?? this.tokens.inkMuted;
+			this.keys.set(key, hit);
+		}
+		return hit;
+	};
+	seat(key) {
+		const { seats, tokens: { categorical: { length } } } = this;
+		if (!seats) return this.ranked++;
+		if (!seats.has(key) && seats.size < length) seats.set(key, seats.size);
+		return seats.get(key) ?? length;
+	}
+	/** Magnitude: `t` in 0..1, one hue from near-surface to strong. */
+	sequential = (t) => this.ramp(Math.max(0, Math.min(1, t)));
+	/** Polarity: `t` in -1..1, grey at zero. */
+	diverging = (t) => {
+		const pole = t < 0 ? this.tokens.divergingLow : this.tokens.divergingHigh;
+		return interpolateRgb(this.tokens.divergingMid, pole)(Math.min(1, Math.abs(t)));
+	};
+	/** Ink that stays legible on top of a filled mark. */
+	inkOn = (fill) => {
+		const rgb = color(fill)?.rgb();
+		if (!rgb) return "#ffffff";
+		const share = Number.isNaN(this.opacity) ? 1 : Math.max(0, Math.min(1, this.opacity)), surface = color(this.tokens.surface)?.rgb() ?? rgb;
+		const seen = (channel) => rgb[channel] * share + surface[channel] * (1 - share);
+		return .299 * seen("r") + .587 * seen("g") + .114 * seen("b") > 150 ? "#0b0b0b" : "#ffffff";
+	};
+	/** Series that look the same get one entry, naming them in `title`. A lone muted series is still told apart, so it keeps its name. */
+	items() {
+		const items = [...this.keys].map(([key, color]) => ({
+			key,
+			color
+		}));
+		const folded = (item) => item.color === this.tokens.inkMuted && !Object.hasOwn(this.pins, item.key);
+		const muted = items.filter(folded);
+		if (muted.length < 2) return items;
+		return [...items.filter((item) => !folded(item)), {
+			key: `Other (${muted.length})`,
+			color: this.tokens.inkMuted,
+			title: muted.map((item) => item.key).join(", ")
+		}];
+	}
+};
+export { Palette };

package/dist/core/PdfPage.js

@@ -0,0 +1,13 @@
+// src/core/PdfPage.ts
+var PdfPageSize = /* @__PURE__ */ function(PdfPageSize) {
+	PdfPageSize["A4"] = "a4";
+	PdfPageSize["Letter"] = "letter";
+	return PdfPageSize;
+}({});
+var PdfOrientation = /* @__PURE__ */ function(PdfOrientation) {
+	PdfOrientation["Auto"] = "auto";
+	PdfOrientation["Portrait"] = "portrait";
+	PdfOrientation["Landscape"] = "landscape";
+	return PdfOrientation;
+}({});
+export { PdfOrientation, PdfPageSize };