@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/core/KeyboardNav.js

@@ -0,0 +1,437 @@
+// src/core/KeyboardNav.ts
+var STEPS = {
+	ArrowLeft: [-1, 0],
+	ArrowRight: [1, 0],
+	ArrowUp: [0, -1],
+	ArrowDown: [0, 1]
+};
+var MOVES = /* @__PURE__ */ new Set([
+	...Object.keys(STEPS),
+	"Home",
+	"End",
+	"PageUp",
+	"PageDown"
+]);
+var WATCHED = [
+	"d",
+	"x",
+	"y",
+	"width",
+	"height",
+	"cx",
+	"cy",
+	"r",
+	"x1",
+	"x2",
+	"y1",
+	"y2",
+	"points",
+	"transform"
+];
+var HINT = "Arrow keys move between data points. Up and Down change series when there are several. Shift with an arrow key steps through every point in order. Enter selects. Escape leaves.";
+var HIDDEN = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap"
+};
+var OFFERED = { "aria-roledescription": "interactive chart" };
+var SLACK = .5;
+var RING_GAP = 3;
+var hints = 0;
+var outside = (box, frame) => box.right < frame.left || box.left > frame.right || box.bottom < frame.top || box.top > frame.bottom;
+/** 1 or -1 when the run only ever moves one way along `axis`, 0 when it stays put, null when it goes both ways. */
+function trend(spots, axis) {
+	let rising = false, falling = false;
+	for (let i = 1; i < spots.length; i++) {
+		const delta = spots[i][axis] - spots[i - 1][axis];
+		if (delta > SLACK) rising = true;
+		if (delta < -.5) falling = true;
+	}
+	return rising && falling ? null : rising ? 1 : falling ? -1 : 0;
+}
+/** The closest spot in a direction, so free-form layouts such as maps and scatters move the way the arrow points. */
+function toward(spots, from, dx, dy) {
+	let best, score = Infinity;
+	for (const spot of spots) {
+		const x = spot.x - from.x, y = spot.y - from.y;
+		const along = x * dx + y * dy, off = Math.abs(x * dy - y * dx);
+		if (along <= SLACK || off > along * 2 || along + off * 2 >= score) continue;
+		best = spot;
+		score = along + off * 2;
+	}
+	return best;
+}
+function nearest(spots, from) {
+	let best, score = Infinity;
+	for (const spot of spots) {
+		const distance = (spot.x - from.x) ** 2 + (spot.y - from.y) ** 2;
+		if (distance < score) {
+			best = spot;
+			score = distance;
+		}
+	}
+	return best;
+}
+function speak({ title, rows = [] }) {
+	return [title, ...rows.map(([label, value]) => `${label}: ${typeof value === "number" ? value.toLocaleString() : value}`)].filter(Boolean).join(". ");
+}
+/**
+* Keyboard access to the marks a chart registers through `ctx.hover`, with `<svg>` as the single
+* tab stop. Focus stays on the svg and a cursor roves over the marks, so a mark that is redrawn
+* or removed cannot drop focus, and no mark is written to, which keeps `signature()` unchanged.
+* With marks to reach the svg becomes `role="application"`: `img` hides its children and takes no
+* keys, and browse-mode screen readers would otherwise swallow the arrows. A chart with none stays
+* an image, since a tab stop that answers no key is worse than none. A real click selects, so each
+* chart's own selection behaviour applies. Showing uses only the tooltip and hover's dimming, never
+* the mark's hover handlers, because those can write geometry such as a crosshair.
+*/
+var KeyboardNav = class {
+	#svg;
+	#plot;
+	#tooltip;
+	#tip;
+	#layer;
+	#halo;
+	#ring;
+	#hint;
+	#voice;
+	#watcher;
+	#palette = null;
+	#seriesField = "series";
+	#sets = [];
+	#groups = null;
+	#cursor = null;
+	#resume = null;
+	#placed = "";
+	#offered = false;
+	#tabStop = false;
+	#area = {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	constructor(svg, host, tooltip, tip) {
+		this.#svg = svg;
+		this.#plot = svg.querySelector("g.g-plot");
+		this.#tooltip = tooltip;
+		this.#tip = tip;
+		this.#layer = svg.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "g"));
+		this.#layer.setAttribute("class", "g-keyboard");
+		this.#layer.setAttribute("pointer-events", "none");
+		this.#layer.setAttribute("display", "none");
+		this.#halo = this.#layer.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "rect"));
+		this.#ring = this.#layer.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "rect"));
+		this.#hint = host.appendChild(document.createElement("div"));
+		this.#hint.id = `chart-keys-${++hints}`;
+		this.#hint.textContent = HINT;
+		this.#hint.hidden = true;
+		this.#voice = host.appendChild(document.createElement("div"));
+		this.#voice.setAttribute("aria-live", "polite");
+		this.#voice.setAttribute("aria-atomic", "true");
+		Object.assign(this.#voice.style, HIDDEN);
+		this.#watcher = new MutationObserver(() => this.#follow());
+		tooltip?.mute(true);
+		svg.addEventListener("keydown", this.#onKey, true);
+		svg.addEventListener("blur", this.#onBlur);
+	}
+	/** Forgets registered marks ahead of a draw. The cursor stays, and finds its mark again afterwards. */
+	reset(theme, palette, seriesField, area) {
+		this.#sets = [];
+		this.#area = area;
+		this.#groups = null;
+		this.#placed = "";
+		this.#palette = palette;
+		this.#seriesField = typeof seriesField === "string" ? seriesField : "series";
+		for (const [rect, stroke, width] of [[
+			this.#halo,
+			theme.surface,
+			5
+		], [
+			this.#ring,
+			theme.ink,
+			2
+		]]) {
+			rect.setAttribute("fill", "none");
+			rect.setAttribute("rx", "4");
+			rect.setAttribute("stroke", stroke);
+			rect.setAttribute("stroke-width", String(width));
+		}
+	}
+	/** Records a mark set. Marks redrawn outside `paint` take over from a set with nothing else still on the page. */
+	register = (selection, content) => {
+		const nodes = new Set(selection.nodes());
+		if (!nodes.size) return;
+		const same = this.#sets.findIndex(({ selection: other }) => other.nodes().every((el) => !el.isConnected || nodes.has(el)));
+		if (same < 0) this.#sets.push({
+			selection,
+			content
+		});
+		else this.#sets[same] = {
+			selection,
+			content
+		};
+		this.#groups = null;
+		this.#offer(true);
+	};
+	/** After a draw: a redraw that moved nothing writes no watched attribute, yet can change the data, the theme or the marks. */
+	settle() {
+		this.#offer(this.#sets.length > 0 || this.#svg.matches(":focus"));
+		this.#follow();
+	}
+	/** Takes the ring, tooltip and dimming away. Focus stays, and the next arrow resumes in place. */
+	leave() {
+		const cursor = this.#cursor;
+		if (!cursor) return;
+		this.#cursor = null;
+		this.#watcher.disconnect();
+		this.#undim(cursor);
+		this.#layer.setAttribute("display", "none");
+		this.#voice.textContent = "";
+	}
+	/** Removes from an exported copy's root what only a live, focusable chart needs. */
+	scrub(copy) {
+		copy.setAttribute("role", "img");
+		for (const name of [
+			"tabindex",
+			"aria-describedby",
+			...Object.keys(OFFERED)
+		]) copy.removeAttribute(name);
+	}
+	destroy() {
+		this.leave();
+		this.#svg.removeEventListener("keydown", this.#onKey, true);
+		this.#svg.removeEventListener("blur", this.#onBlur);
+		this.#offer(false);
+		this.#tooltip?.mute(false);
+		this.#layer.remove();
+		this.#hint.remove();
+		this.#voice.remove();
+	}
+	#onBlur = () => this.leave();
+	/** A tabindex the chart set for itself, as a drill map does, stays when the marks go. */
+	#offer(on) {
+		if (on === this.#offered) return;
+		this.#offered = on;
+		const svg = this.#svg;
+		svg.setAttribute("role", on ? "application" : "img");
+		if (on) {
+			svg.setAttribute("aria-describedby", this.#hint.id);
+			for (const [name, value] of Object.entries(OFFERED)) svg.setAttribute(name, value);
+			this.#tabStop = !svg.hasAttribute("tabindex");
+			if (this.#tabStop) svg.setAttribute("tabindex", "0");
+			return;
+		}
+		svg.removeAttribute("aria-describedby");
+		for (const name of Object.keys(OFFERED)) svg.removeAttribute(name);
+		if (this.#tabStop) svg.removeAttribute("tabindex");
+	}
+	/** Runs in the capture phase, so that a press which leaves the marks does not also reach chart handlers such as drill-up. */
+	#onKey = (event) => {
+		if (event.target !== this.#svg || event.altKey || event.ctrlKey || event.metaKey) return;
+		const { key } = event;
+		if (key === "Escape" || key === "Enter" || key === " ") {
+			if (!this.#cursor) return;
+			if (key === "Escape") this.leave();
+			else this.#select(this.#cursor);
+		} else if (!MOVES.has(key) || !this.#move(key, event.shiftKey)) return;
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	#marksIn() {
+		if (this.#groups) return this.#groups;
+		const marks = /* @__PURE__ */ new Map();
+		this.#sets.forEach(({ selection, content }, set) => selection.nodes().forEach((el, index) => {
+			if (el.isConnected) marks.set(el, {
+				selection,
+				el,
+				datum: el.__data__,
+				content,
+				index,
+				set
+			});
+		}));
+		const groups = /* @__PURE__ */ new Map();
+		for (const mark of marks.values()) {
+			const series = this.#seriesOf(mark);
+			const key = series ?? `\0${mark.set}`;
+			if (!groups.has(key)) groups.set(key, {
+				label: series ?? "",
+				marks: []
+			});
+			groups.get(key).marks.push(mark);
+		}
+		const list = groups.size > 1 && marks.size >= groups.size * 2 ? [...groups.values()] : [{
+			label: "",
+			marks: [...marks.values()]
+		}];
+		for (const group of list) group.marks.forEach((mark, at) => Object.assign(mark, {
+			group,
+			at
+		}));
+		return this.#groups = list;
+	}
+	/** The series column when the datum carries one, else the legend entry behind the tooltip's colour. */
+	#seriesOf({ datum, content, index }) {
+		const value = typeof datum === "object" && datum ? datum[this.#seriesField] : void 0;
+		if (typeof value === "number" || typeof value === "string" && value) return String(value);
+		const { color } = content(datum, index);
+		return color ? this.#palette?.items().find((item) => item.color === color)?.key : void 0;
+	}
+	/** Marks on screen right now, by group, with their centres. A zoomed map leaves out what has been panned away. */
+	#spots() {
+		const frame = this.#plotArea();
+		const place = (mark) => {
+			if (!mark.el.isConnected) return [];
+			const box = mark.el.getBoundingClientRect();
+			if (frame.width && (outside(box, frame) || !(box.width || box.height))) return [];
+			return [{
+				mark,
+				x: box.left + box.width / 2,
+				y: box.top + box.height / 2
+			}];
+		};
+		return this.#marksIn().map((group) => group.marks.flatMap(place)).filter((spots) => spots.length);
+	}
+	/** Where the viewBox sits on screen. `max-width` can narrow the svg alone, which scales the drawing and centres it in the height left over. */
+	#stage() {
+		const box = this.#svg.getBoundingClientRect(), { width, height } = this.#svg.viewBox.baseVal;
+		const unit = width && height ? Math.min(box.width / width, box.height / height) : 0;
+		return {
+			left: box.left + (box.width - width * unit) / 2,
+			top: box.top + (box.height - height * unit) / 2,
+			unit
+		};
+	}
+	/** The plot on screen: zoom clips marks to it, so a mark beyond it cannot be seen even when it is still inside the svg. */
+	#plotArea() {
+		const stage = this.#stage(), { x, y, width, height } = this.#area, { unit } = stage;
+		const left = stage.left + x * unit, top = stage.top + y * unit;
+		return {
+			left,
+			top,
+			right: left + width * unit,
+			bottom: top + height * unit,
+			width: width * unit
+		};
+	}
+	#move(key, inOrder) {
+		const groups = this.#spots();
+		if (!groups.length) return false;
+		let group = -1, index = -1;
+		while (index < 0 && ++group < groups.length) index = groups[group].findIndex(({ mark }) => mark.el === this.#cursor?.el);
+		if (index < 0) {
+			const back = groups.flat().find(({ mark }) => mark.el === this.#resume?.el);
+			this.#land((key === "End" ? groups[0].at(-1) : key === "Home" ? void 0 : back)?.mark ?? groups[0][0].mark);
+		} else {
+			const target = this.#target(key, groups, group, index, inOrder);
+			if (target) this.#land(target.mark);
+		}
+		return true;
+	}
+	/** Only a key press scrolls: a redraw must not pull the page back to a chart the reader has scrolled away from. */
+	#land(mark) {
+		this.#show(mark);
+		mark.el.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}
+	#target(key, groups, group, index, inOrder) {
+		const spots = groups[group], from = spots[index], jump = Math.ceil(spots.length / 10);
+		if (key === "Home") return spots[0];
+		if (key === "End") return spots.at(-1);
+		if (key === "PageUp") return spots[Math.max(0, index - jump)];
+		if (key === "PageDown") return spots[Math.min(spots.length - 1, index + jump)];
+		const [dx, dy] = STEPS[key];
+		if (inOrder) return spots[index + dx + dy];
+		if (dy && groups.length > 1) {
+			const next = groups[group + dy];
+			return next?.length === spots.length ? next[index] : next && nearest(next, from);
+		}
+		const across = trend(spots, "x"), down = trend(spots, "y");
+		if (across === null && down === null) return toward(spots, from, dx, dy);
+		return spots[index + (dx ? dx * (across || 1) : dy * (down || 1))];
+	}
+	#show(mark) {
+		if (this.#cursor && this.#cursor.selection !== mark.selection) this.#undim(this.#cursor);
+		this.#cursor = this.#resume = mark;
+		this.#placed = "";
+		this.#watcher.observe(this.#plot, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: WATCHED
+		});
+		this.#place();
+		this.#say(mark);
+	}
+	/** Draws the ring around the cursor, with the same tooltip and dimming as hover. */
+	#place() {
+		const mark = this.#cursor, { el, selection, content, datum, index } = mark;
+		const box = el.getBoundingClientRect(), shown = content(datum, index);
+		const key = `${box.left},${box.top},${box.width},${box.height},${speak(shown)}`;
+		if (key === this.#placed) return;
+		this.#placed = key;
+		const area = this.#plotArea();
+		if (area.width && outside(box, area)) {
+			this.#layer.setAttribute("display", "none");
+			this.#undim(mark);
+			return;
+		}
+		const view = this.#svg.viewBox.baseVal, stage = this.#stage(), unit = stage.unit ? 1 / stage.unit : 1;
+		const left = Math.max(2, (box.left - stage.left) * unit - RING_GAP), top = Math.max(2, (box.top - stage.top) * unit - RING_GAP);
+		const right = Math.min(view.width - 2, (box.right - stage.left) * unit + RING_GAP), bottom = Math.min(view.height - 2, (box.bottom - stage.top) * unit + RING_GAP);
+		for (const rect of [this.#halo, this.#ring]) {
+			rect.setAttribute("x", String(left));
+			rect.setAttribute("y", String(top));
+			rect.setAttribute("width", String(Math.max(0, right - left)));
+			rect.setAttribute("height", String(Math.max(0, bottom - top)));
+		}
+		this.#layer.removeAttribute("display");
+		this.#tip({
+			clientX: box.left + box.width / 2,
+			clientY: box.top + box.height / 2
+		}, shown);
+		selection.style("opacity", function() {
+			return this === el ? null : .45;
+		});
+	}
+	/** After marks change: keeps the ring on a moved mark, or finds a replaced one by its datum, its tooltip, then its place. */
+	#follow() {
+		const cursor = this.#cursor;
+		if (!cursor) return;
+		const marks = this.#marksIn().flatMap((group) => group.marks).filter(({ el }) => el.isConnected);
+		const text = speak(cursor.content(cursor.datum, cursor.index));
+		const next = marks.find(({ el }) => el === cursor.el) ?? marks.find(({ datum }) => datum === cursor.datum) ?? marks.find((mark) => speak(mark.content(mark.datum, mark.index)) === text) ?? marks[Math.min(cursor.at, marks.length - 1)];
+		if (!next) return this.leave();
+		if (next.el !== cursor.el) return this.#show(next);
+		this.#cursor = this.#resume = next;
+		this.#place();
+		this.#say(next);
+	}
+	/** Writes only on a change: a live region reads a rewrite aloud even when the words are the same. */
+	#say(mark) {
+		const { group, at, content, datum, index } = mark;
+		const place = `${at + 1} of ${group.marks.length}${group.label ? ` in ${group.label}` : ""}`;
+		const text = [speak(content(datum, index)), place].filter(Boolean).join(". ");
+		if (this.#voice.textContent !== text) this.#voice.textContent = text;
+	}
+	#select({ el }) {
+		const box = el.getBoundingClientRect();
+		el.dispatchEvent(new MouseEvent("click", {
+			bubbles: true,
+			cancelable: true,
+			clientX: box.left + box.width / 2,
+			clientY: box.top + box.height / 2
+		}));
+	}
+	#undim({ selection }) {
+		this.#tooltip?.hide();
+		selection.style("opacity", null);
+	}
+};
+export { KeyboardNav };

package/dist/core/LiveMotion.js

@@ -0,0 +1,200 @@
+import { FRAMING } from "./Context2D.js";
+import { cancelFrame, nextFrame } from "./LiveStream.js";
+import { extent } from "d3";
+// src/core/LiveMotion.ts
+var TAU = 200;
+var REACH = 2e3;
+var REST = .2;
+var FADE = 200;
+var FADE_MOST = 256;
+var SHAPES = "circle,ellipse,path,polygon,polyline,rect,line,text";
+var CLIP = {
+	left: 2,
+	right: 12,
+	y: 8
+};
+var TRANSLATE = /translate\(([^,)]+)(?:,\s*([^)]+))?\)/;
+var flat = () => ({
+	a: 1,
+	b: 0
+});
+var through = (outer, inner) => {
+	const a = outer.a * inner.a;
+	return a > 1 / REACH && a < REACH ? {
+		a,
+		b: outer.a * inner.b + outer.b
+	} : flat();
+};
+var place = ({ a, b }, at) => a * at + b;
+var continuous = (scale) => typeof scale.invert === "function" && scale.domain().length === 2;
+var keyOf = (datum) => String(datum instanceof Date ? +datum : datum);
+var fade = (node) => node.animate?.([{ opacity: 0 }, {}], { duration: FADE });
+var framing = (node) => [...node.classList].some((name) => name.startsWith("m-") && FRAMING.test(name.slice(2)));
+/** The affine step from `now`'s pixels to `then`'s. It is exact for linear, time, log and power scales alike. */
+function step(now, then) {
+	if (!continuous(now) || !continuous(then)) return flat();
+	const [from, to] = now.domain();
+	const p0 = now(from), p1 = now(to), q0 = then(from), q1 = then(to);
+	const a = (q1 - q0) / (p1 - p0), b = q0 - a * p0;
+	const [low, high] = extent(then.range());
+	return Math.max(q0, q1) >= low && Math.min(q0, q1) <= high && Number.isFinite(a) && Number.isFinite(b) && a > 1 / REACH && a < REACH ? {
+		a,
+		b
+	} : flat();
+}
+/**
+* Keeps a streaming chart moving instead of jumping. Each paint draws final geometry, then this
+* maps the marks and ticks back to where they last appeared and decays that map to identity, so
+* x axes slide and scales rescale from any point in an earlier move.
+*/
+var LiveMotion = class LiveMotion {
+	root;
+	axes;
+	static #ids = 0;
+	#layer = null;
+	#frame = null;
+	#clip = null;
+	#clipUrl = "";
+	#x = flat();
+	#y = flat();
+	#drift = 0;
+	#size = {
+		width: 0,
+		height: 0
+	};
+	#ticks = [];
+	#grid = [];
+	#seen = /* @__PURE__ */ new WeakSet();
+	#primed = false;
+	#tick = 0;
+	#last = 0;
+	/** True when both axes map data to pixels by a formula, which is what lets marks slide. */
+	static slides({ x, y }) {
+		return continuous(x) && continuous(y);
+	}
+	constructor(root, axes) {
+		this.root = root;
+		this.axes = axes;
+	}
+	/** Group that marks draw into while sliding, created on demand and clipped to the plot. */
+	get layer() {
+		return this.#layer;
+	}
+	/** Moves the drawn marks under the clipped layer and stops transitions that would overwrite it. */
+	slide() {
+		this.root.selectAll("*").interrupt();
+		if (this.#layer) return;
+		const id = `live-clip-${++LiveMotion.#ids}`;
+		const frame = this.#frame = this.root.append("g").attr("class", "live-frame");
+		this.#clipUrl = `url(#${id})`;
+		this.#clip = frame.append("clipPath").attr("id", id).append("rect");
+		const layer = this.#layer = frame.append("g").attr("class", "live-marks");
+		for (const child of [...this.root.node().children]) if (child !== frame.node() && !framing(child)) layer.node().appendChild(child);
+		layer.selectAll("path").style("stroke-dasharray", null).style("stroke-dashoffset", null).style("transition", null);
+	}
+	/** Call after every paint. A live paint carries on from the old picture; any other starts clean. */
+	settle(axes, size, live) {
+		this.#x = live ? through(this.#x, step(axes.x, this.axes.x)) : flat();
+		this.#y = live ? through(this.#y, step(axes.y, this.axes.y)) : flat();
+		this.axes = axes;
+		this.#size = size;
+		this.#clip?.attr("x", -CLIP.left).attr("y", -CLIP.y).attr("width", size.width + CLIP.left + CLIP.right).attr("height", size.height + CLIP.y * 2);
+		this.#collect(live);
+		if (this.#layer) this.#fadeIn(live);
+		this.#write();
+		if (this.#moving) this.#run();
+	}
+	destroy() {
+		if (this.#tick) cancelFrame(this.#tick);
+		this.#tick = 0;
+	}
+	#collect(live) {
+		const before = new Map(this.#ticks.map((tick) => [`${tick.axis}/${tick.key}`, this.#position(tick)]));
+		const scales = {
+			x: continuous(this.axes.x),
+			y: continuous(this.axes.y)
+		};
+		const shown = before.size > 0;
+		this.#ticks = ["x", "y"].flatMap((axis) => this.root.select(`:scope > g.m-axis-${axis}`).selectAll(".tick").nodes().map((node) => {
+			const [, x, y] = TRANSLATE.exec(node.getAttribute("transform") ?? "") ?? [];
+			const drawn = +(axis === "x" ? x ?? 0 : y ?? 0), datum = node.__data__, key = keyOf(datum);
+			const at = scales[axis] ? this.axes[axis](datum) : drawn;
+			const past = before.get(`${axis}/${key}`);
+			if (live && shown && past === void 0) fade(node);
+			return {
+				node,
+				axis,
+				at,
+				lift: drawn - at,
+				key,
+				drift: live && !scales[axis] && past !== void 0 ? past - drawn : 0
+			};
+		}));
+		this.#drift = live && this.#ticks.some((tick) => tick.drift) ? 1 : 0;
+		this.#grid = this.root.select(":scope > g.m-grid").selectAll("line").nodes().filter((node) => node.getAttribute("y1") === node.getAttribute("y2")).map((node) => ({
+			node,
+			at: +(node.getAttribute("y1") ?? 0)
+		}));
+	}
+	/** New marks arrive at full geometry, so they fade in. Web Animations leave no inline style behind. */
+	#fadeIn(live) {
+		let budget = this.#primed && live ? FADE_MOST : 0;
+		this.#primed = true;
+		for (const node of this.#layer.node().querySelectorAll(SHAPES)) {
+			if (this.#seen.has(node)) continue;
+			this.#seen.add(node);
+			node.setAttribute("vector-effect", "non-scaling-stroke");
+			if (budget-- > 0) fade(node);
+		}
+	}
+	#position(tick) {
+		return place(tick.axis === "x" ? this.#x : this.#y, tick.at) + tick.lift + tick.drift * this.#drift;
+	}
+	#write() {
+		const { width, height } = this.#size;
+		const still = this.#x.a === 1 && this.#x.b === 0 && this.#y.a === 1 && this.#y.b === 0;
+		this.#layer?.attr("transform", still ? null : `matrix(${this.#x.a},0,0,${this.#y.a},${this.#x.b},${this.#y.b})`);
+		this.#frame?.attr("clip-path", still ? null : this.#clipUrl);
+		for (const tick of this.#ticks) {
+			const at = this.#position(tick);
+			tick.node.setAttribute("transform", tick.axis === "x" ? `translate(${at},0)` : `translate(0,${at})`);
+			tick.node.setAttribute("opacity", at < -1 || at > (tick.axis === "x" ? width : height) + 1 ? "0" : "1");
+		}
+		for (const { node, at } of this.#grid) {
+			const y = place(this.#y, at);
+			node.setAttribute("transform", `translate(0,${y - at})`);
+			node.setAttribute("opacity", y < -1 || y > height + 1 ? "0" : "1");
+		}
+	}
+	get #moving() {
+		const { width, height } = this.#size;
+		const off = (t, reach) => Math.max(Math.abs(t.b), Math.abs((t.a - 1) * reach + t.b));
+		return off(this.#x, width) > REST || off(this.#y, height) > REST || this.#drift > .01;
+	}
+	#run() {
+		if (this.#tick) return;
+		this.#last = 0;
+		this.#tick = nextFrame(this.#step);
+	}
+	#step = (now) => {
+		const elapsed = this.#last ? Math.min(now - this.#last, 100) : 16;
+		this.#last = now;
+		const keep = Math.exp(-elapsed / TAU);
+		for (const t of [this.#x, this.#y]) {
+			t.a = 1 + (t.a - 1) * keep;
+			t.b *= keep;
+		}
+		this.#drift *= keep;
+		if (this.#moving) {
+			this.#write();
+			this.#tick = nextFrame(this.#step);
+			return;
+		}
+		this.#x = flat();
+		this.#y = flat();
+		this.#drift = 0;
+		this.#tick = 0;
+		this.#write();
+	};
+};
+export { LiveMotion };