@niekes/charts-3d 0.4.0 → 0.5.0

package/dist/index.js

@@ -26,10 +26,11 @@ const KEY_STEP = Math.PI / 36;
 const PAN_STEP = 20;
 const ZOOM_STEP = 1.2;
 const CLICK_DISTANCE = 4;
+const ZOOM_CURSOR = 400;
 const SHORTCUTS = {
 	dragRotate: {
 		label: "Rotate",
-		hint: ["Drag"]
+		hint: ["Mod", "Drag"]
 	},
 	rotateLeft: {
 		label: "Rotate",
@@ -53,7 +54,7 @@ const SHORTCUTS = {
 	},
 	dragPan: {
 		label: "Pan",
-		hint: ["Space", "Drag"]
+		hint: ["Alt", "Drag"]
 	},
 	panLeft: {
 		label: "Pan",
@@ -99,7 +100,7 @@ const SHORTCUTS = {
 	},
 	wheelZoom: {
 		label: "Zoom",
-		hint: ["Ctrl", "Scroll"]
+		hint: ["Mod", "Scroll"]
 	},
 	reset: {
 		label: "Reset",
@@ -121,6 +122,16 @@ const MODIFIERS = [
 	"Meta",
 	"Shift"
 ];
+/** Whether the reader is on a Mac, where the platform modifier is ⌘; elsewhere it is Ctrl. */
+const mac = () => /mac/i.test(globalThis.navigator?.userAgentData?.platform ?? globalThis.navigator?.platform ?? "");
+/** The label of the platform modifier: ⌘ on a Mac, Ctrl elsewhere. */
+const modLabel = () => mac() ? "⌘" : "Ctrl";
+/** The label of the Alt key: ⌥ on a Mac, Alt elsewhere. */
+const altLabel = () => mac() ? "⌥" : "Alt";
+/** Whether the platform modifier - ⌘ on a Mac, Ctrl elsewhere - is held in `e`. */
+const platformMod = (e) => mac() ? e.metaKey : e.ctrlKey;
+/** Whether `value` lies between the ends `lo` and `hi`. */
+const within = (lo, hi, value) => value >= lo && value <= hi;
 const NAMED = {
 	Plus: "+",
 	Space: " "
@@ -184,20 +195,28 @@ function shortcutsOf(keymap) {
 }
 /**
 * The rows of the shortcut panel: the actions by label, the keys of a row in
-* groups of the same modifiers, a gesture in a group of its own.
+* groups of the same modifiers, left of its gestures, each a group of its own.
 */
 function rowsOf(shortcuts) {
 	const rows = /* @__PURE__ */ new Map();
-	for (const { action, label, keys, hint } of shortcuts) {
-		const parts = hint ?? split(keys[0]).map((k) => KBD[k] ?? k);
-		const group = hint ? action : parts.slice(0, -1).join("+");
-		const groups = rows.get(label) ?? /* @__PURE__ */ new Map();
-		const known = groups.get(group);
-		rows.set(label, groups.set(group, known ? [...known, parts.at(-1)] : parts));
+	for (const { label, keys, hint } of shortcuts) {
+		const parts = (hint ?? split(keys[0])).map((k) => k === "Mod" ? modLabel() : k === "Alt" ? altLabel() : KBD[k] ?? k);
+		const row = rows.get(label) ?? {
+			keys: /* @__PURE__ */ new Map(),
+			gestures: []
+		};
+		if (hint) row.gestures.push(parts);
+		else {
+			const group = parts.slice(0, -1).join("+");
+			const known = row.keys.get(group);
+			row.keys.set(group, known ? [...known, parts.at(-1)] : parts);
+		}
+		rows.set(label, row);
 	}
-	return [...rows].map(([label, groups]) => ({
+	return [...rows].map(([label, row]) => ({
 		label,
-		groups: [...groups.values()]
+		keys: [...row.keys.values()],
+		gestures: row.gestures
 	}));
 }
 /**
@@ -299,14 +318,14 @@ function keymapProps(keys, label) {
 	const help = keys.help[0];
 	const said = [
 		"3D chart.",
-		keys.on("dragRotate") && "Drag to rotate it.",
+		keys.on("dragRotate") && `${modLabel()} and drag to rotate it.`,
 		help && `Press ${aria(help)} for all shortcuts.`
 	];
 	return {
 		"aria-label": label ?? said.filter(Boolean).join(" "),
 		"aria-keyshortcuts": keys.aria || void 0,
 		tabIndex: keys.aria ? 0 : void 0,
-		className: cn("block h-auto w-full outline-hidden select-none mask-y-from-96%", drag && "cursor-grab touch-none active:cursor-grabbing")
+		className: cn("block h-auto w-full outline-hidden select-none mask-x-from-96% mask-y-from-96%", drag && "touch-none")
 	};
 }
 /**
@@ -318,7 +337,7 @@ function useScene(requested, width, height) {
 	const [tooltip, setTooltip] = React.useState(null);
 	const focus = useFocus();
 	const renderer = useRenderer(requested);
-	const { canvas, repaint } = useCanvas(scene, width);
+	const { canvas, repaint } = useCanvas(scene, width, height, renderer);
 	const { hover, hide, leave } = useHover(scene, width, height, setTooltip, focus);
 	return {
 		scene,
@@ -387,8 +406,10 @@ function animates() {
 /**
 * Eases a chart into new data: the numbers of `values` glide from the ones
 * on screen to these over the animationDuration of the container. A key
-* that is new starts at `enter`, or where it ends; a key that is gone goes
-* at once. Without time, or with reduced motion, the numbers jump.
+* that is new starts at `enter`, or where it ends; a key that is gone glides
+* back to `enter`, the mirror of its entering - without one it stands where
+* it is - and leaves when the glide is done. Without time, or with reduced
+* motion, the numbers jump.
 */
 function useTween(values, enter) {
 	const { animationDuration: duration = 600 } = useChart3D();
@@ -424,32 +445,65 @@ function useTween(values, enter) {
 	}, [tween.key, duration]);
 	return shown;
 }
-/** The numbers of `tween` on screen: `from` eased into `to`, a new key from `enter` or where it ends. */
+/** The numbers of `tween` on screen: `from` eased into `to`, a new key from `enter` or where it ends, a gone one gliding back to `enter` until the glide is done. */
 function tweenNumbers({ from, to, t }, enter) {
 	const s = t * t * (3 - 2 * t);
-	return Object.fromEntries(Object.entries(to).map(([k, end]) => {
+	const gone = t >= 1 ? [] : Object.entries(from).filter(([k]) => !(k in to));
+	return Object.fromEntries([...Object.entries(to).map(([k, end]) => {
 		const start = from[k] ?? enter ?? end;
 		return [k, t >= 1 ? end : start + (end - start) * s];
-	}));
+	}), ...gone.map(([k, start]) => [k, start + ((enter ?? start) - start) * s])]);
 }
 /**
 * `spec` gliding into new data with the marks: the ends of every axis glide
 * as `useTween` glides the numbers, where ends rounded from the numbers on
 * screen would jump from one round number to the next, and the box with
-* them. The ticks are those of `spec` that lie between the ends.
+* them. The ticks stay those of `spec`; labels of ticks outside the gliding
+* ends fade out in `edgeLabels` instead of popping out of the range. The
+* outermost ticks glide too, so the line of the axis grows to a new tick and
+* shrinks from a dropped one instead of jumping when the glide is done.
 */
 function useTweenAxes(spec) {
-	const ends = useTween(Object.fromEntries([
+	const axes = [
 		"x",
 		"y",
 		"z"
-	].flatMap((a) => [[`${a}0`, spec[a].domain[0]], [`${a}1`, spec[a].domain[spec[a].domain.length - 1]]])));
+	];
+	const last = (domain) => domain[domain.length - 1];
+	const target = Object.fromEntries(axes.flatMap((a) => {
+		const { domain, ticks } = spec[a];
+		return [
+			[`${a}0`, domain[0]],
+			[`${a}1`, last(domain)],
+			[`${a}t0`, ticks.at(0) ?? domain[0]],
+			[`${a}t1`, ticks.at(-1) ?? last(domain)]
+		];
+	}));
+	const ends = useTween(target);
+	const gliding = Object.keys(target).some((k) => ends[k] !== target[k]);
+	const key = JSON.stringify(spec);
+	const memory = React.useRef({
+		key,
+		target: spec,
+		from: spec
+	});
+	if (memory.current.key !== key) memory.current = {
+		key,
+		target: spec,
+		from: memory.current.target
+	};
 	const glided = (a) => {
 		const [lo, hi] = [ends[`${a}0`], ends[`${a}1`]];
-		const inside = (t) => t >= Math.min(lo, hi) && t <= Math.max(lo, hi);
+		const [d0, d1] = [spec[a].domain[0], last(spec[a].domain)];
+		const gone = gliding ? memory.current.from[a].ticks.filter((t) => !spec[a].ticks.includes(t)) : [];
+		const ticks = gone.length ? [...spec[a].ticks, ...gone].sort((t, u) => t - u) : spec[a].ticks;
+		const leaving = gone.filter((t) => within(Math.min(d0, d1), Math.max(d0, d1), t));
+		const span = [ends[`${a}t0`], ends[`${a}t1`]];
 		return {
 			domain: [lo, hi],
-			ticks: spec[a].ticks.filter(inside)
+			ticks,
+			span,
+			...leaving.length ? { leaving } : {}
 		};
 	};
 	return {
@@ -531,19 +585,20 @@ function between(from, to, k) {
 }
 /**
 * The view of the camera, and the handlers that move it, as far as `keys`
-* has them on: a drag turns it, or pans it while Space is held, the keys
-* step it, Ctrl or ⌘ with the wheel zooms it and a double click resets it.
+* has them on: a drag turns it, or pans it while Alt is held, the keys step
+* it, Ctrl or ⌘ with the wheel zooms it and a double click resets it.
 * `data-orbiting` among them is true while the camera turns. `onDragStart`
 * runs when a press becomes a drag, `onHover` on a move without one.
 */
 function useOrbit(defaultView, width, keys, onDragStart, onHover) {
 	const { view, jump, glide } = useGlide(defaultView);
 	const [orbiting, setOrbiting] = React.useState(false);
+	const held = useModsHeld();
 	const drag = React.useRef(null);
 	const ref = useWheelZoom(jump, keys.on("wheelZoom"));
 	const move = (step) => jump((v) => moved(v, step, defaultView));
 	const step = (step) => glide((v) => moved(v, step, defaultView));
-	const { space, ...keyHandlers } = useKeys(keys, step, setOrbiting);
+	const keyHandlers = useKeys(keys, step, setOrbiting);
 	const release = () => {
 		drag.current = null;
 		setOrbiting(false);
@@ -553,15 +608,18 @@ function useOrbit(defaultView, width, keys, onDragStart, onHover) {
 		handlers: {
 			ref,
 			onPointerDown: (e) => {
-				if (space.current || keys.on("dragRotate")) drag.current = {
+				const pans = keys.on("dragPan") && e.altKey;
+				if (pans || keys.on("dragRotate") && platformMod(e)) drag.current = {
 					x: e.clientX,
 					y: e.clientY,
-					moved: false
+					moved: false,
+					rotate: !pans
 				};
 			},
 			onPointerMove: (e) => {
 				const d = drag.current;
 				if (!d) return onHover(e);
+				if (d.rotate ? !platformMod(e) : !e.altKey) return release();
 				const dx = e.clientX - d.x;
 				const dy = e.clientY - d.y;
 				if (!d.moved && Math.hypot(dx, dy) < CLICK_DISTANCE) return;
@@ -572,82 +630,120 @@ function useOrbit(defaultView, width, keys, onDragStart, onHover) {
 				drag.current = {
 					x: e.clientX,
 					y: e.clientY,
-					moved: true
+					moved: true,
+					rotate: d.rotate
 				};
 				const k = width / e.currentTarget.getBoundingClientRect().width;
-				setOrbiting(!space.current);
-				move(space.current ? { pan: {
-					x: dx * k,
-					y: dy * k
-				} } : {
+				setOrbiting(d.rotate);
+				move(d.rotate ? {
 					yaw: dx * DRAG,
 					tilt: dy * DRAG
-				});
+				} : { pan: {
+					x: dx * k,
+					y: dy * k
+				} });
 			},
 			onPointerUp: release,
 			onPointerCancel: release,
 			onDoubleClick: keys.on("doubleClickReset") ? () => step({ reset: true }) : void 0,
 			...keyHandlers,
-			"data-orbiting": orbiting
+			"data-orbiting": orbiting,
+			"data-mod": keys.on("dragRotate") && held.mod ? true : void 0,
+			"data-alt": keys.on("dragPan") && held.alt ? true : void 0
 		}
 	};
 }
 /**
-* The handlers that step the camera with the keys of `keys`, and `space`,
-* which is true while Space is held for a drag to pan. A key that turns the
-* camera marks it as orbiting until it is let go.
+* Whether the platform modifier or Alt is held, so the cursor shows a hand
+* before the drag rotates and the four arrows before it pans. A missed keyup
+* (window blur while held) must not stick either cursor.
+*/
+function useModsHeld() {
+	const [mod, setMod] = React.useState(false);
+	const [alt, setAlt] = React.useState(false);
+	React.useEffect(() => {
+		const modKey = mac() ? "Meta" : "Control";
+		const onKey = (e) => {
+			if (e.key === modKey) setMod(e.type === "keydown");
+			if (e.key === "Alt") setAlt(e.type === "keydown");
+		};
+		const onBlur = () => {
+			setMod(false);
+			setAlt(false);
+		};
+		window.addEventListener("keydown", onKey);
+		window.addEventListener("keyup", onKey);
+		window.addEventListener("blur", onBlur);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+			window.removeEventListener("keyup", onKey);
+			window.removeEventListener("blur", onBlur);
+		};
+	}, []);
+	return {
+		mod,
+		alt
+	};
+}
+/**
+* The handlers that step the camera with the keys of `keys`. A key that
+* turns the camera marks it as orbiting until it is let go.
 */
 function useKeys(keys, move, setOrbiting) {
-	const space = React.useRef(false);
 	const onKeyDown = (e) => {
-		const pan = e.key === " " && keys.on("dragPan");
-		if (pan) space.current = true;
 		const step = keys.moves[pressed(e)];
-		if (!step && !pan) return;
-		e.preventDefault();
 		if (!step) return;
+		e.preventDefault();
 		setOrbiting(Boolean(step.yaw || step.tilt));
 		move(step);
 	};
-	const onKeyUp = (e) => {
-		if (e.key === " ") space.current = false;
-		setOrbiting(false);
-	};
+	const onKeyUp = () => setOrbiting(false);
 	return {
-		space,
 		onKeyDown,
 		onKeyUp
 	};
 }
 /**
-* A ref for the svg that zooms the view with Ctrl or ⌘ and the wheel, which
-* is also how a trackpad pinches, if `on`. The wheel alone still scrolls the page.
+* A ref for the svg that zooms the view with the platform modifier and the
+* wheel, if `on`. Ctrl and the wheel zooms on a Mac too, because a trackpad
+* pinch arrives that way, indistinguishable from the keys. The wheel alone
+* still scrolls the page. While the wheel zooms, the svg says so in
+* `data-zoom` - `"in"` or `"out"`, the direction of its cursor - until
+* `ZOOM_CURSOR` after the last tick.
 */
 function useWheelZoom(jump, on) {
 	return React.useCallback((svg) => {
-		if (!on) return;
+		if (!on || !svg) return;
+		let timer;
 		const onWheel = (e) => {
-			if (!e.ctrlKey && !e.metaKey) return;
+			if (!platformMod(e) && !e.ctrlKey) return;
 			e.preventDefault();
 			jump((v) => moved(v, { zoom: 2 ** (-e.deltaY / 200) }, v));
+			svg.dataset.zoom = e.deltaY < 0 ? "in" : "out";
+			clearTimeout(timer);
+			timer = setTimeout(() => delete svg.dataset.zoom, ZOOM_CURSOR);
+		};
+		svg.addEventListener("wheel", onWheel, { passive: false });
+		return () => {
+			clearTimeout(timer);
+			svg.removeEventListener("wheel", onWheel);
 		};
-		svg?.addEventListener("wheel", onWheel, { passive: false });
-		return () => svg?.removeEventListener("wheel", onWheel);
 	}, [jump, on]);
 }
 /**
 * The tooltip of the mark under the pointer, the one painted last, and the
-* focus on its groups. `hover` sets the tooltip only when the pointer moves
-* onto another mark, and the focus only when the groups change, so a move
-* within a mark does not render the chart again. Off the marks and while a
-* drag turns the chart, `hide` drops the tooltip but keeps the focus, so a
-* flow does not flash in the gaps beside it and can be followed from every
-* side; `leave` drops both.
+* focus on its groups. The highlight follows the mark: `hover` sets the
+* tooltip only when the pointer moves onto another mark, and the focus only
+* when the groups change, so a move within a mark does not render the chart
+* again; off the mark and when the pointer leaves the chart, `leave` drops
+* both. While a drag turns the chart under the captured pointer, `hide`
+* drops the tooltip and keeps the focus, so a flow does not flash away and
+* can be followed from every side.
 */
 function useHover(scene, width, height, setTooltip, focus) {
 	const hovered = React.useRef(void 0);
 	const show = (mark) => {
-		if (mark?.groups) focus.set(mark.groups);
+		focus.set(mark?.groups);
 		if (mark?.key === hovered.current?.key) return;
 		hovered.current = mark;
 		setTooltip(mark?.tooltip ?? null);
@@ -661,11 +757,11 @@ function useHover(scene, width, height, setTooltip, focus) {
 			};
 			show(hit(scene.current, at));
 		},
-		hide: () => show(void 0),
-		leave: () => {
-			show(void 0);
-			focus.set(void 0);
-		}
+		hide: () => {
+			hovered.current = void 0;
+			setTooltip(null);
+		},
+		leave: () => show(void 0)
 	};
 }
 /** A store for the groups in focus, which tells its listeners only when the groups change. */
@@ -688,17 +784,11 @@ function useFocus() {
 	});
 	return focus;
 }
-/**
-* Whether an item fades under the focus: it has groups and shares none with
-* the focus, while some item of `items` does, so a focus on groups that are
-* gone fades nothing.
-*/
-function useFades(items) {
+/** Whether an item shares a group with the focus: the hover highlights those items with an edge. */
+function useLit(items) {
 	const { focus } = useChart3D();
 	const groups = React.useSyncExternalStore(focus.subscribe, focus.get, focus.get);
-	const lit = (of) => of?.some((group) => groups?.includes(group)) ?? false;
-	const on = items.some((item) => lit(item.groups));
-	return (item) => on && item.groups !== void 0 && !lit(item.groups);
+	return (item) => item.groups !== void 0 && (groups?.some((group) => item.groups.includes(group)) ?? false);
 }
 /** The topmost mark under `at`: the last one painted that holds it. */
 function hit(marks, at) {
@@ -719,12 +809,14 @@ function inside(polygon, at) {
 }
 /**
 * The renderer the chart draws with: SVG on the server and in the first
-* render on the client, then the requested one if the browser has it.
+* render on the client, then the requested one if the browser has it, with
+* "webgl" falling back to "canvas" and "canvas" to SVG.
 */
 function useRenderer(requested) {
 	const [renderer, setRenderer] = React.useState("svg");
 	React.useEffect(() => {
-		const canvas = requested === "canvas" && document.createElement("canvas").getContext("2d");
+		if (requested === "webgl" && document.createElement("canvas").getContext("webgl")) return setRenderer("webgl");
+		const canvas = requested !== "svg" && document.createElement("canvas").getContext("2d");
 		setRenderer(canvas ? "canvas" : "svg");
 	}, [requested]);
 	return renderer;
@@ -732,15 +824,18 @@ function useRenderer(requested) {
 /**
 * A ref for the canvas of the marks, and the repaint that paints them: on new
 * marks, when the canvas changes its size and when the theme changes. A color
-* resolves on the canvas itself, inside the chart, so the `--color-*` apply.
+* resolves on the canvas itself, inside the chart, so the `--color-*` apply;
+* webgl takes the resolved color as bytes from a 1×1 canvas.
 */
-function useCanvas(scene, width) {
+function useCanvas(scene, width, height, renderer) {
 	const element = React.useRef(null);
 	const colors = React.useRef(/* @__PURE__ */ new Map());
+	const bytes = React.useRef(/* @__PURE__ */ new Map());
+	const pixel = React.useRef(null);
 	const repaint = React.useCallback(() => {
 		const canvas = element.current;
 		if (!canvas) return;
-		paint(canvas, scene.current, width, (css) => {
+		const resolve = (css) => {
 			let color = colors.current.get(css);
 			if (color === void 0) {
 				canvas.style.color = css;
@@ -748,8 +843,17 @@ function useCanvas(scene, width) {
 				colors.current.set(css, color);
 			}
 			return color;
-		});
-	}, [scene, width]);
+		};
+		if (renderer === "webgl") {
+			pixel.current ??= onePixel();
+			paintGL(canvas, scene.current, width, height, (css) => colorBytes(resolve(css), pixel.current, bytes.current));
+		} else paint(canvas, scene.current, width, resolve);
+	}, [
+		scene,
+		width,
+		height,
+		renderer
+	]);
 	return {
 		canvas: React.useCallback((node) => {
 			element.current = node;
@@ -758,6 +862,7 @@ function useCanvas(scene, width) {
 			resize.observe(node);
 			const theme = new MutationObserver(() => {
 				colors.current.clear();
+				bytes.current.clear();
 				repaint();
 			});
 			theme.observe(document.documentElement, { attributeFilter: ["class", "style"] });
@@ -786,21 +891,132 @@ function paint(canvas, marks, width, color) {
 		} else ctx.arc(points[0].x, points[0].y, r, 0, 2 * Math.PI);
 		ctx.fillStyle = color(fill);
 		ctx.fill();
-		const outline = r === void 0 ? fill : stroke;
+		const outline = r === void 0 ? stroke ?? fill : stroke;
 		if (!outline) continue;
 		ctx.strokeStyle = color(outline);
 		ctx.lineWidth = r === void 0 ? .5 : 1;
 		ctx.stroke();
 	}
 }
+/** A 1×1 canvas whose 2D context resolves a color to bytes, for the webgl renderer. */
+function onePixel() {
+	const canvas = document.createElement("canvas");
+	canvas.width = 1;
+	canvas.height = 1;
+	return canvas.getContext("2d");
+}
+/** The resolved `color` as bytes, drawn on the 1×1 `pixel` and read back, cached per color. */
+function colorBytes(color, pixel, cache) {
+	let rgba = cache.get(color);
+	if (rgba === void 0) {
+		pixel.clearRect(0, 0, 1, 1);
+		pixel.fillStyle = color;
+		pixel.fillRect(0, 0, 1, 1);
+		rgba = [...pixel.getImageData(0, 0, 1, 1).data];
+		cache.set(color, rgba);
+	}
+	return rgba;
+}
+/**
+* Paints `marks` on a webgl `canvas`, from the view box of `width`×`height` to
+* the pixels of the canvas: a fan per polygon, a fan of 12 segments per
+* circle, in paint order and without a depth test, the color of each as bytes.
+*/
+function paintGL(canvas, marks, width, height, color) {
+	canvas.width = Math.round(canvas.clientWidth * devicePixelRatio);
+	canvas.height = Math.round(canvas.clientHeight * devicePixelRatio);
+	const gl = canvas.getContext("webgl");
+	gl.viewport(0, 0, canvas.width, canvas.height);
+	gl.disable(gl.DEPTH_TEST);
+	gl.enable(gl.BLEND);
+	gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+	const program = programOf(gl);
+	gl.useProgram(program);
+	gl.uniform2f(gl.getUniformLocation(program, "u_res"), 2 / width, 2 / height);
+	const where = gl.getAttribLocation(program, "a_pos");
+	gl.enableVertexAttribArray(where);
+	gl.bindBuffer(gl.ARRAY_BUFFER, bufferOf(gl));
+	gl.vertexAttribPointer(where, 2, gl.FLOAT, false, 0, 0);
+	const tint = (css) => {
+		const [r, g, b, a] = color(css);
+		gl.uniform4f(gl.getUniformLocation(program, "u_color"), r / 255, g / 255, b / 255, a / 255);
+	};
+	const draw = (mode, points) => {
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points.flatMap((p) => [p.x, p.y])), gl.DYNAMIC_DRAW);
+		gl.drawArrays(mode, 0, points.length);
+	};
+	const [, widest] = gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE) ?? [1, 1];
+	gl.lineWidth(Math.min(1.5 * devicePixelRatio, widest));
+	for (const mark of marks) {
+		tint(mark.fill);
+		draw(gl.TRIANGLES, trianglesOf(mark));
+		if (mark.stroke) {
+			tint(mark.stroke);
+			draw(gl.LINE_LOOP, outlineOf(mark));
+		}
+	}
+}
+/** The 12 points of the circle around `c` of radius `r`. */
+const ringOf = (c, r) => Array.from({ length: 12 }, (_, i) => ({
+	x: c.x + r * Math.cos(i / 12 * 2 * Math.PI),
+	y: c.y + r * Math.sin(i / 12 * 2 * Math.PI)
+}));
+/** The triangles of `mark` as view-box points: a fan per polygon, a fan of 12 segments per circle. */
+function trianglesOf(mark) {
+	const { points, r } = mark;
+	if (r !== void 0) {
+		const ring = ringOf(points[0], r);
+		return ring.flatMap((p, i) => [
+			points[0],
+			p,
+			ring[(i + 1) % 12]
+		]);
+	}
+	return points.slice(1, -1).flatMap((p, i) => [
+		points[0],
+		p,
+		points[i + 2]
+	]);
+}
+/** The outline of `mark` as view-box points: its polygon, or the ring of its circle. */
+const outlineOf = (mark) => mark.r === void 0 ? mark.points : ringOf(mark.points[0], mark.r);
+const programs = /* @__PURE__ */ new WeakMap();
+const buffers = /* @__PURE__ */ new WeakMap();
+/** The paint program of `gl`, compiled once: view-box points in, clip space out, one color per draw. */
+function programOf(gl) {
+	let program = programs.get(gl);
+	if (!program) {
+		program = gl.createProgram();
+		gl.attachShader(program, shaderOf(gl, gl.VERTEX_SHADER, "attribute vec2 a_pos; uniform vec2 u_res; void main() { gl_Position = vec4(a_pos.x * u_res.x - 1.0, 1.0 - a_pos.y * u_res.y, 0.0, 1.0); }"));
+		gl.attachShader(program, shaderOf(gl, gl.FRAGMENT_SHADER, "precision mediump float; uniform vec4 u_color; void main() { gl_FragColor = u_color; }"));
+		gl.linkProgram(program);
+		programs.set(gl, program);
+	}
+	return program;
+}
+function shaderOf(gl, type, source) {
+	const shader = gl.createShader(type);
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	return shader;
+}
+function bufferOf(gl) {
+	let buffer = buffers.get(gl);
+	if (!buffer) {
+		buffer = gl.createBuffer();
+		buffers.set(gl, buffer);
+	}
+	return buffer;
+}
 /** The canvas over the chart box that the marks are painted on, if the chart draws on one. */
 function ChartCanvas3D({ renderer, canvas, width, height }) {
-	if (renderer !== "canvas") return null;
+	if (renderer === "svg") return null;
 	return /* @__PURE__ */ jsx("canvas", {
+		"data-slot": "chart-3d-canvas",
 		ref: canvas,
-		className: "pointer-events-none absolute top-0 left-0 w-full mask-y-from-96%",
+		className: "pointer-events-none absolute top-0 left-0 w-full mask-x-from-96% mask-y-from-96%",
 		style: { aspectRatio: `${width} / ${height}` }
-	});
+	}, renderer);
 }
 const GIZMO = [
 	{
@@ -868,42 +1084,49 @@ function ChartGizmo3D({ camera, corner }) {
 	});
 }
 /**
+* The focus edge of a fill: `--chart-3d-focus`, or the fill itself lightened,
+* so the highlight carries the color of what it highlights.
+*/
+const focusOf = (fill) => `var(--chart-3d-focus, color-mix(in oklch, ${fill} 60%, white))`;
+/**
 * The marks of a chart, drawn by the renderer of the container: as SVG
 * elements, or on the canvas over the chart box. The hover reads them too.
 */
 function Marks3D({ marks }) {
 	const { renderer, scene, repaint } = useChart3D();
-	const fades = useFades(marks);
-	const drawn = marks.map((mark) => fades(mark) ? {
+	const lit = useLit(marks);
+	const drawn = marks.map((mark) => lit(mark) ? {
 		...mark,
-		fill: fade(mark.fill)
+		stroke: mark.stroke && mark.stroke !== "var(--background)" ? mark.stroke : focusOf(mark.fill)
 	} : mark);
 	React.useLayoutEffect(() => {
 		scene.current = drawn;
 		repaint();
 	});
-	if (renderer === "canvas") return null;
-	return drawn.map(({ key, points, r, fill, stroke }) => r === void 0 ? /* @__PURE__ */ jsx("path", {
-		d: `M${points.map((p) => `${+p.x.toFixed(2)},${+p.y.toFixed(2)}`).join("L")}Z`,
-		fill,
-		stroke: fill,
-		strokeWidth: .5,
-		strokeLinejoin: "round"
-	}, key) : /* @__PURE__ */ jsx("circle", {
-		cx: points[0].x,
-		cy: points[0].y,
-		r,
-		fill,
-		stroke,
-		strokeWidth: stroke ? 1 : void 0
-	}, key));
+	if (renderer !== "svg") return null;
+	return /* @__PURE__ */ jsx("g", {
+		"data-slot": "chart-3d-marks",
+		children: drawn.map(({ key, points, r, fill, stroke }) => r === void 0 ? /* @__PURE__ */ jsx("path", {
+			d: `M${points.map((p) => `${+p.x.toFixed(2)},${+p.y.toFixed(2)}`).join("L")}Z`,
+			fill,
+			stroke: stroke ?? fill,
+			strokeWidth: stroke === focusOf(fill) ? 1.5 : .5,
+			strokeLinejoin: "round"
+		}, key) : /* @__PURE__ */ jsx("circle", {
+			cx: points[0].x,
+			cy: points[0].y,
+			r,
+			fill,
+			stroke,
+			strokeWidth: stroke ? 1 : void 0
+		}, key))
+	});
 }
 /**
 * The labels of the marks of a chart, ringed by the background so that they
 * read on the marks. Like the labels of the box, they are SVG with every renderer.
 */
 function Labels3D({ labels }) {
-	const fades = useFades(labels);
 	return /* @__PURE__ */ jsx("g", {
 		"data-slot": "chart-3d-labels",
 		children: labels.map((label) => {
@@ -916,7 +1139,7 @@ function Labels3D({ labels }) {
 				paintOrder: "stroke",
 				strokeWidth: 3,
 				strokeLinejoin: "round",
-				className: cn("fill-foreground stroke-background text-[10px] font-medium", fades(label) && "opacity-25"),
+				className: "fill-foreground stroke-background text-[10px] font-medium",
 				children: label.text
 			}, label.key);
 		})
@@ -924,19 +1147,33 @@ function Labels3D({ labels }) {
 }
 function ChartStyle({ id, config }) {
 	const colorConfig = Object.entries(config).filter(([, c]) => c.theme || c.color);
-	if (!colorConfig.length) return null;
-	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
+	const entering = [
+		"text",
+		"line",
+		"path"
+	].map((el) => `[data-chart=${id}] [data-slot="chart-3d-axes"] ${el}`).join(", ");
+	const base = `@keyframes chart-3d-axes-in { from { opacity: 0; } }
+${entering} { animation: chart-3d-axes-in 300ms ease-out; }
+@media (prefers-reduced-motion: reduce) { ${entering} { animation: none; } }
+[data-chart=${id}] svg[data-mod="true"] { cursor: grab; }
+[data-chart=${id}] svg[data-alt="true"] { cursor: move; }
+[data-chart=${id}] svg[data-zoom="in"] { cursor: zoom-in; }
+[data-chart=${id}] svg[data-zoom="out"] { cursor: zoom-out; }
+[data-chart=${id}] svg[data-orbiting="true"] { cursor: grabbing; }`;
+	if (!colorConfig.length) return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: base } });
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: [base, ...Object.entries(THEMES).map(([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig.map(([key, item]) => {
 		const color = item.theme?.[theme] || item.color;
 		return color ? `  --color-${key}: ${color};` : null;
 	}).join("\n")}
 }
-`).join("\n") } });
+`)].join("\n") } });
 }
 function ChartTooltip3D({ tooltip, width, height }) {
 	if (!tooltip) return null;
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-3d-tooltip",
 		className: "pointer-events-none absolute z-10 grid min-w-32 -translate-x-1/2 -translate-y-[calc(100%+0.5rem)] gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
 		style: {
 			left: `${tooltip.at.x / width * 100}%`,
@@ -983,9 +1220,18 @@ function ChartShortcuts3D({ rows, help, label }) {
 		chart?.addEventListener("keydown", onKeyDown);
 		return () => chart?.removeEventListener("keydown", onKeyDown);
 	}, [keys]);
+	React.useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (e) => {
+			if (!ref.current?.contains(e.target)) setOpen(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	}, [open]);
 	if (!rows.length) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
+		"data-slot": "chart-3d-shortcuts",
 		className: "absolute top-2 right-2 z-10 flex flex-col items-end gap-1",
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
@@ -994,7 +1240,7 @@ function ChartShortcuts3D({ rows, help, label }) {
 			"aria-expanded": open,
 			"aria-controls": open ? id : void 0,
 			onClick: () => setOpen((o) => !o),
-			className: "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4",
+			className: "inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-background/60 text-muted-foreground outline-none transition-colors hover:bg-background hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4",
 			children: /* @__PURE__ */ jsx(KeyboardIcon, {})
 		}), open && /* @__PURE__ */ jsx(ChartShortcutList3D, {
 			id,
@@ -1002,31 +1248,44 @@ function ChartShortcuts3D({ rows, help, label }) {
 		})]
 	});
 }
-/** The list of the shortcut panel: per row, its groups of keys and its label. */
+/** One group of keys as chips. */
+function KbdGroup3D({ group }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "kbd-group",
+		className: "flex gap-1",
+		children: group.map((key, j) => /* @__PURE__ */ jsx("kbd", {
+			"data-slot": "kbd",
+			className: "pointer-events-none inline-flex h-5 min-w-5 items-center justify-center rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none",
+			children: key
+		}, j))
+	});
+}
+/** The list of the shortcut panel: per row its label, then its keys, a rule, and its gestures. */
 function ChartShortcutList3D({ id, rows }) {
 	return /* @__PURE__ */ jsx("dl", {
 		id,
-		"data-slot": "chart-3d-shortcuts",
+		"data-slot": "chart-3d-shortcuts-panel",
 		className: "grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-2 shadow-xl",
-		children: rows.map(({ label, groups }) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("dt", {
-			className: "flex flex-wrap gap-x-2 gap-y-1",
-			children: groups.map((group, i) => /* @__PURE__ */ jsx("span", {
-				"data-slot": "kbd-group",
-				className: "flex gap-1",
-				children: group.map((key, j) => /* @__PURE__ */ jsx("kbd", {
-					"data-slot": "kbd",
-					className: "pointer-events-none inline-flex h-5 min-w-5 items-center justify-center rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none",
-					children: key
-				}, j))
-			}, i))
-		}), /* @__PURE__ */ jsx("dd", {
+		children: rows.map(({ label, keys, gestures }) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+			"data-slot": "chart-3d-shortcuts-label",
 			className: "text-muted-foreground",
 			children: label
+		}), /* @__PURE__ */ jsxs("dd", {
+			className: "flex flex-wrap items-center justify-end gap-x-2 gap-y-1",
+			children: [
+				keys.map((group, i) => /* @__PURE__ */ jsx(KbdGroup3D, { group }, i)),
+				keys.length > 0 && gestures.length > 0 && /* @__PURE__ */ jsx("span", {
+					"data-slot": "chart-3d-shortcuts-rule",
+					className: "h-4 w-px bg-border"
+				}),
+				gestures.map((group, i) => /* @__PURE__ */ jsx(KbdGroup3D, { group }, i))
+			]
 		})] }, label))
 	});
 }
 function ChartLegend3D({ config }) {
 	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-3d-legend",
 		className: "flex items-center justify-center gap-4 pt-3",
 		children: Object.entries(config).map(([key, item]) => /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1.5",
@@ -1047,15 +1306,32 @@ function ChartLegend3D({ config }) {
 function Axes3D({ spec, world, format = {}, titles = {} }) {
 	const { camera } = useChart3D();
 	const box = intoWorld(axes3D().camera(camera), world);
-	const { labels, lines, marks } = labelAxes(box.edges(spec), format, titles);
+	const { labels, lines, marks } = labelAxes(box.edges(spec), spec, format, titles);
+	const leaving = new Set([
+		"x",
+		"y",
+		"z"
+	].flatMap((a) => (spec[a].leaving ?? []).map((value) => `${a}-${value}`)));
 	return /* @__PURE__ */ jsxs("g", {
 		"data-slot": "chart-3d-axes",
 		children: [
-			box.data(spec).filter((wall) => !wall.ccw).map((wall) => /* @__PURE__ */ jsx("path", {
-				d: box.draw(wall),
+			box.data(spec).filter((wall) => !wall.ccw).map((wall) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: quad(wall),
 				className: "fill-muted/40 stroke-border",
 				strokeWidth: .75
-			}, `${wall.axis}${wall.side}`)),
+			}), wall.grid.map((segment) => {
+				const [from, to] = [segment[0], segment[segment.length - 1]];
+				const key = gridKey(wall, from, to);
+				return /* @__PURE__ */ jsx("line", {
+					x1: from.projected.x,
+					y1: from.projected.y,
+					x2: to.projected.x,
+					y2: to.projected.y,
+					style: { opacity: leaving.has(key) ? 0 : 1 },
+					className: "stroke-border transition-opacity duration-300 ease-out motion-reduce:transition-none",
+					strokeWidth: .75
+				}, key);
+			})] }, `${wall.axis}${wall.side}`)),
 			lines.map((line) => /* @__PURE__ */ jsx(AxisLine3D, {
 				line,
 				ink: "stroke-foreground",
@@ -1075,6 +1351,25 @@ const PAD = 2;
 const FADE = 4;
 const DODGE = 12;
 const MARK = 6;
+/** The closed quad of a wall; its gridlines are their own lines, so a new one fades in. */
+function quad(wall) {
+	return `M${wall.map(({ projected }) => `${projected.x},${projected.y}`).join("L")}Z`;
+}
+/**
+* The key of a gridline: the axis and value of the tick it marks - the one
+* coordinate its ends share beside the wall's own axis - so the gridline of
+* a tick that stays glides on, and one of a new tick mounts and fades in.
+* Exactly one coordinate differs along the line, because a domain always has
+* width: `axis` widens an empty extent.
+*/
+function gridKey(wall, from, to) {
+	const axis = [
+		"x",
+		"y",
+		"z"
+	].find((a) => a !== wall.axis && from[a] === to[a]);
+	return `${axis}-${from[axis]}`;
+}
 /**
 * The labels of the axes on all their edges, the line of every axis along its
 * edge and the mark of each of its ticks, shown on the edges the axes sit on.
@@ -1082,11 +1377,12 @@ const MARK = 6;
 * those of an axis with fewer ticks, which say more each, and the titles give
 * way to the ticks.
 */
-function labelAxes(edges, format, titles) {
-	const axes = edges.filter((edge) => edge.length).map((edge) => edgeLabels(edge, format[edge.axis] ?? String, titles[edge.axis]));
+function labelAxes(edges, spec, format, titles) {
+	const axes = edges.filter((edge) => edge.length).map((edge) => edgeLabels(edge, spec[edge.axis], format[edge.axis] ?? String, titles[edge.axis]));
 	const shown = axes.filter((axis) => axis.chosen).sort((a, b) => a.ticks.length - b.ticks.length);
 	const placed = [];
 	for (const label of [...shown.flatMap((a) => a.ticks), ...shown.flatMap((a) => a.title ?? [])]) {
+		if (label.opacity === 0) continue;
 		label.opacity = shows(label, placed);
 		placed.push(label);
 	}
@@ -1102,13 +1398,47 @@ function labelAxes(edges, format, titles) {
 * the rows that `fit` finds, and the title of the axis beyond them. The
 * labels of an edge the axis does not sit on are there, but do not show.
 */
-function edgeLabels(edge, format, title) {
+/**
+* The point of `value` along `edge`, between the ticks that bracket it: the
+* projection keeps the edge straight, so the point lies on their line. An
+* axis of one tick is a point.
+*/
+function along(edge, value) {
+	if (edge.length === 1) return edge[0].projected;
+	let i = 0;
+	while (i < edge.length - 2 && edge[i + 1][edge.axis] < value) i += 1;
+	const [a, b] = [edge[i][edge.axis], edge[i + 1][edge.axis]];
+	const t = clamp(0, 1, (value - a) / (b - a));
+	const [p, q] = [edge[i].projected, edge[i + 1].projected];
+	return {
+		x: p.x + (q.x - p.x) * t,
+		y: p.y + (q.y - p.y) * t
+	};
+}
+/** The ticks whose value lies in `domain`, with the ends of `domain`. */
+function inRange(ticks, domain) {
+	const range = {
+		lo: Math.min(...domain),
+		hi: Math.max(...domain)
+	};
+	return {
+		ranged: ticks.filter((t) => t.value !== void 0 && within(range.lo, range.hi, t.value)),
+		range
+	};
+}
+/** An edge the axis does not sit on hides its labels; on a chosen one, the ticks outside the gliding ends fade out. */
+function hideOffRange(labels, range, chosen) {
+	if (!chosen) for (const l of labels) l.opacity = 0;
+	else for (const l of labels) if (l.value !== void 0 && !within(range.lo, range.hi, l.value)) l.opacity = 0;
+}
+function edgeLabels(edge, { domain, leaving = [], span }, format, title) {
 	const { axis, normal: n, chosen } = edge;
-	const label = (key, at, text, h, gap) => {
+	const label = (key, at, text, h, gap, value) => {
 		const w = textWidth(text, h);
 		return {
 			key,
 			axis,
+			value,
 			at: beside(at, n, w, h, gap),
 			w,
 			h,
@@ -1118,15 +1448,18 @@ function edgeLabels(edge, format, title) {
 		};
 	};
 	const id = `${axis}${edge.sides.join("")}`;
-	const ticks = edge.map((tick) => label(`${id}-${tick[axis]}`, tick.projected, format(tick[axis]), 10, GAP));
-	const depth = Math.max(...ticks.map((t) => Math.abs(n.x) * t.w + Math.abs(n.y) * t.h));
+	const ticks = edge.map((tick) => label(`${id}-${tick[axis]}`, tick.projected, format(tick[axis]), 10, GAP, tick[axis]));
+	for (const t of ticks) if (t.value !== void 0 && leaving.includes(t.value)) t.opacity = 0;
+	const { ranged, range } = inRange(ticks.filter((t) => t.opacity > 0), domain);
+	const depth = Math.max(0, ...ranged.map((t) => Math.abs(n.x) * t.w + Math.abs(n.y) * t.h));
 	const row = {
 		x: n.x * (depth + PAD),
 		y: n.y * (depth + PAD)
 	};
-	const rows = fit(ticks, n, row);
-	const start = edge[0].projected;
-	const end = edge[edge.length - 1].projected;
+	const rows = fit(ranged, n, row);
+	const [s0, s1] = span ?? [edge[0][axis], edge[edge.length - 1][axis]];
+	const start = along(edge, clamp(range.lo, range.hi, s0));
+	const end = along(edge, clamp(range.lo, range.hi, s1));
 	const middle = {
 		x: (start.x + end.x) / 2,
 		y: (start.y + end.y) / 2
@@ -1136,7 +1469,7 @@ function edgeLabels(edge, format, title) {
 		title: true
 	} : void 0;
 	if (head && rows === 2) head.shift = row;
-	if (!chosen) for (const l of [...ticks, ...head ? [head] : []]) l.opacity = 0;
+	hideOffRange([...ticks, ...head ? [head] : []], range, chosen);
 	return {
 		chosen,
 		ticks,
@@ -1288,7 +1621,7 @@ function AxisLine3D({ line: { from, to, opacity }, ink, width }) {
 		y2: to.y,
 		strokeWidth: width,
 		style: { opacity: Math.round(opacity * 100) / 100 },
-		className: cn("transition-opacity duration-200 ease-out motion-reduce:transition-none", ink)
+		className: cn("transition-opacity duration-300 ease-out motion-reduce:transition-none", ink)
 	});
 }
 /**
@@ -1305,7 +1638,7 @@ function AxisLabel3D({ label: { at, shift, opacity, text, title } }) {
 			opacity: Math.round(opacity * 100) / 100,
 			translate: `${shift.x}px ${shift.y}px`
 		},
-		className: cn("transition-[opacity,translate] duration-200 ease-out motion-reduce:transition-none", title ? "fill-foreground font-medium" : "fill-muted-foreground text-[10px]"),
+		className: cn("transition-[opacity,translate] duration-300 ease-out motion-reduce:transition-none", title ? "fill-foreground font-medium" : "fill-muted-foreground text-[10px]"),
 		children: text
 	});
 }
@@ -1363,9 +1696,15 @@ function shade(face, color) {
 	const light = Math.max(0, side * (n.x * LIGHT.x + n.y * LIGHT.y + n.z * LIGHT.z));
 	return `color-mix(in oklch, ${color} ${Math.round(65 + 35 * light)}%, black)`;
 }
-/** `color` out of focus: a quarter of it over the background, opaque, so the seams between faces stay closed. */
-function fade(color) {
-	return `color-mix(in oklch, ${color} 25%, var(--background))`;
+/**
+* `color` at `opacity`, from 0 to 1: a CSS color-mix with transparent, so a
+* mark fades on every renderer while its color stays in CSS. Rounded to a
+* percent, so the renderers that resolve colors cache a bounded few. Fade
+* after `shade`, which would mix a translucent color back towards opaque.
+*/
+function faded(color, opacity) {
+	const percent = Math.round(opacity * 100);
+	return percent >= 100 ? color : `color-mix(in oklab, ${color} ${percent}%, transparent)`;
 }
 /** The mean of the projected points, where a tooltip points at. */
 function center(points) {
@@ -1399,80 +1738,99 @@ function cubeMarks(id, faces, color, tooltip) {
 function BarChart3D({ data, index, keys, barSize = .6, format = {}, titles }) {
 	const { config, camera } = useChart3D();
 	const series = keys ?? Object.keys(config);
-	const target = barValues(data, series);
-	const cells = barCells(data, series, useTween(target, 0));
-	const box = barBox(data.length, series.length, Object.values(target), barSize);
-	const spec = {
-		...box.spec,
-		y: useTweenAxes(box.spec).y
-	};
-	const world = worldBox(spec, box.depth);
-	const { size } = box;
-	const bars = cubes3D().camera(camera).data(cells.map(({ i, j, key, value }) => Object.assign(barCorners(world, i, j, value, size), {
-		i,
-		key,
-		value
-	}))).map((bar) => Object.assign(bar, { bottom: bar.faces.find((f) => f.face === "bottom") })).sort((a, b) => sort(a.bottom, b.bottom));
+	const names = data.map((d) => String(d[index] ?? ""));
+	const target = barValues(names, data, series);
+	const values = useTween(target, 0);
+	const rows = useTween(Object.fromEntries(names.map((name, i) => [name, i])));
+	const opacity = useTween(Object.fromEntries(names.map((name) => [name, 1])), 0);
+	const cells = barCells(rows, series, values);
+	const box = barBox(data.length, series.length, Object.values(target));
+	const spec = useTweenAxes(box.spec);
+	const depth = useTween({ depth: box.depth }).depth;
+	const world = worldBox(spec, depth);
+	const bars = barShapes(camera, cells, world, cellSize(spec, depth, barSize));
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
 		spec,
 		world,
 		titles,
 		format: {
-			x: (i) => (format.x ?? String)(String(data[i][index] ?? "")),
+			x: (i) => (format.x ?? String)(String(data[i]?.[index] ?? "")),
 			y: format.y,
 			z: (j) => config[series[j]]?.label ?? series[j]
 		}
 	}), /* @__PURE__ */ jsx(Marks3D, { marks: bars.flatMap((bar) => barMarks({
-		id: `${bar.i}-${bar.key}`,
+		id: `${bar.name}-${bar.key}`,
 		faces: bar.faces,
 		color: `var(--color-${bar.key})`,
-		title: String(data[bar.i][index]),
+		title: bar.name,
 		label: config[bar.key]?.label ?? bar.key,
-		value: bar.value
+		value: bar.value,
+		opacity: opacity[bar.name]
 	})) })] });
 }
-/** The cell of every bar: the entry `i` along x, the series `key` along z, with its tweened value. */
-function barCells(data, series, values) {
-	return data.flatMap((_, i) => series.map((key, j) => ({
-		i,
-		j,
+/** The cubes of the cells, projected by `camera` and painted back to front by their footprint, as the bars stand on one floor. */
+function barShapes(camera, cells, world, size) {
+	return cubes3D().camera(camera).data(cells.map(({ name, x, j, key, value }) => Object.assign(barCorners(world, x, j, value, size), {
+		name,
 		key,
-		value: values[`${i}-${key}`]
-	})));
+		value
+	}))).map((bar) => Object.assign(bar, { bottom: bar.faces.find((f) => f.face === "bottom") })).sort((a, b) => sort(a.bottom, b.bottom));
 }
 /**
-* The value of every cell of the chart, keyed as its mark: the entry `i`
-* along x and the series `key` along z, standing as 0 where the entry holds none.
+* The cell of every bar, the rows still gliding away among them: the row
+* position along x, the series `key` along z, with the tweened value. A cell
+* only one of the tweens still knows is on its way out and stays unseen.
 */
-function barValues(data, series) {
-	return Object.fromEntries(data.flatMap((d, i) => series.map((key) => [`${i}-${key}`, Number(d[key]) || 0])));
+function barCells(rows, series, values) {
+	return Object.entries(rows).flatMap(([name, x]) => series.flatMap((key, j) => {
+		const value = values[`${name}-${key}`];
+		return value === void 0 ? [] : [{
+			name,
+			x,
+			j,
+			key,
+			value
+		}];
+	}));
+}
+/**
+* The value of every cell of the chart, keyed as its mark: the name of its
+* entry along x and the series `key` along z, standing as 0 where the entry
+* holds none. Keyed by name, not place, so a bar follows its entry when the
+* data reorders.
+*/
+function barValues(names, data, series) {
+	return Object.fromEntries(data.flatMap((d, i) => series.map((key) => [`${names[i]}-${key}`, Number(d[key]) || 0])));
 }
 /**
 * The box of a bar chart: a row per entry along x, a row per series along z,
-* with half a cell of room between the outer rows and the walls, and the
-* size of a bar, the share `barSize` of its cell.
+* with half a cell of room between the outer rows and the walls.
 */
-function barBox(entries, series, values, barSize) {
+function barBox(entries, series, values) {
 	const index = (length) => Array.from({ length }, (_, i) => i);
-	const spec = {
-		x: pad({
-			domain: [-.5, entries - .5],
-			ticks: index(entries)
-		}, 1),
-		y: axis(Math.min(0, ...values), Math.max(0, ...values)),
-		z: pad({
-			domain: [-.5, series - .5],
-			ticks: index(series)
-		}, 1)
+	return {
+		spec: {
+			x: pad({
+				domain: [-.5, entries - .5],
+				ticks: index(entries)
+			}, 1),
+			y: axis(Math.min(0, ...values), Math.max(0, ...values)),
+			z: pad({
+				domain: [-.5, series - .5],
+				ticks: index(series)
+			}, 1)
+		},
+		depth: Math.min(1, Math.max(.25, series / entries))
 	};
-	const depth = Math.min(1, Math.max(.25, series / entries));
+}
+/**
+* The size of a bar, the share `barSize` of its cell - of the gliding ends of
+* `spec`, so a bar eases into a new cell size as rows come and go.
+*/
+function cellSize(spec, depth, barSize) {
 	return {
-		spec,
-		depth,
-		size: {
-			width: 2 / (spec.x.domain[1] - spec.x.domain[0]) * barSize,
-			depth: 2 * depth / (spec.z.domain[1] - spec.z.domain[0]) * barSize
-		}
+		width: 2 / (spec.x.domain[1] - spec.x.domain[0]) * barSize,
+		depth: 2 * depth / (spec.z.domain[1] - spec.z.domain[0]) * barSize
 	};
 }
 /**
@@ -1490,8 +1848,8 @@ function barCorners(world, x, z, value, size) {
 		height: Math.abs(floor - top)
 	});
 }
-/** The marks of one bar: the faces that look at the camera, shaded, each with its entry and value on hover. */
-function barMarks({ id, faces, color, title, label, value }) {
+/** The marks of one bar: the faces that look at the camera, shaded and faded to `opacity`, each with its entry and value on hover. Its group is the bar alone, so hovering highlights one bar, not its series. */
+function barMarks({ id, faces, color, title, label, value, opacity }) {
 	return cubeMarks(id, faces, color, {
 		at: center(faces.find((face) => face.face === "top")),
 		title,
@@ -1500,51 +1858,49 @@ function barMarks({ id, faces, color, title, label, value }) {
 			value,
 			color
 		}]
-	});
+	}).map((mark) => ({
+		...mark,
+		fill: faded(mark.fill, opacity),
+		groups: [id]
+	}));
 }
 // registry/new-york/ui/scatter-chart-3d.tsx
 /**
 * Points in the chart box, at the fields `x`, `y` and `z` of each entry.
 * `series` names the field whose value is the config key of the color.
 */
-function ScatterChart3D({ data, x, y, z, series, radius = 4, format, titles }) {
+function ScatterChart3D({ data, x, y, z, id, series, radius = 4, format, titles }) {
 	const { config, camera } = useChart3D();
 	const fields = {
 		x,
 		y,
 		z
 	};
-	const values = useTween(pointValues(data, fields));
-	const read = (i, axis) => values[`${axis}${i}`];
+	const names = data.map((d, i) => id ? String(d[id]) : String(i));
+	const { radii, opacity, read, key } = usePointTweens(names, data, fields, series, config, radius);
 	const spec = useTweenAxes(pointAxes(data, fields));
 	const world = worldBox(spec);
-	const points = points3D().camera(camera).x(({ i }) => world.x(read(i, "x"))).y(({ i }) => world.y(read(i, "y"))).z(({ i }) => world.z(read(i, "z")));
-	const fallback = Object.keys(config)[0];
-	const marks = points.data(data.map((d, i) => ({
-		d,
-		i
-	}))).sort(sort).map((p) => {
-		const key = series ? String(p.d[series]) : fallback;
-		return {
-			key: String(p.i),
-			points: [p.projected],
-			r: radius,
-			fill: `var(--color-${key})`,
-			stroke: "var(--background)",
-			tooltip: {
-				at: p.projected,
-				title: series ? config[key]?.label ?? key : void 0,
-				items: [
-					"x",
-					"y",
-					"z"
-				].map((a) => ({
-					label: titles?.[a] ?? fields[a],
-					value: read(p.i, a)
-				}))
-			}
-		};
-	});
+	const placed = usePointPlaces(names, radii, read, world);
+	const marks = points3D().camera(camera).x((p) => p.x).y((p) => p.y).z((p) => p.z).data(placed).sort(sort).map((p) => ({
+		key: p.name,
+		points: [p.projected],
+		r: radii[p.name],
+		fill: faded(`var(--color-${key(p.name)})`, opacity[p.name]),
+		groups: [p.name],
+		stroke: faded("var(--background)", opacity[p.name]),
+		tooltip: {
+			at: p.projected,
+			title: series ? config[key(p.name)]?.label ?? key(p.name) : void 0,
+			items: [
+				"x",
+				"y",
+				"z"
+			].map((a) => ({
+				label: titles?.[a] ?? fields[a],
+				value: read(p.name, a)
+			}))
+		}
+	}));
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
 		spec,
 		world,
@@ -1564,13 +1920,74 @@ function pointAxes(data, fields) {
 		z: range("z")
 	};
 }
-/** The position of every entry, keyed by its axis and index, gliding into new data. */
-function pointValues(data, fields) {
+/**
+* The tweened numbers of the chart, by the name of each entry: the positions
+* glide entry by entry - a gone point stands in place - and the radius and
+* the opacity enter from 0, so a new point grows as it fades in and a gone
+* one shrinks as it fades away. `read` and `key` look them up, also for a
+* point still leaving.
+*/
+function usePointTweens(names, data, fields, series, config, radius) {
+	const values = useTween(pointValues(names, data, fields));
+	const radii = useTween(Object.fromEntries(names.map((name) => [name, radius])), 0);
+	const opacity = useTween(Object.fromEntries(names.map((name) => [name, 1])), 0);
+	const fallback = Object.keys(config)[0];
+	return {
+		radii,
+		opacity,
+		read: (name, axis) => values[`${axis}${name}`],
+		key: usePointKeys(names, data, series, fallback, radii)
+	};
+}
+/**
+* The place of every point in the world box, by name. A living point follows
+* its gliding numbers through the gliding axes; a gone one stays frozen where
+* it was, so it shrinks away in place instead of riding the rescaling axes
+* out of the box. A point only one of the tweens still knows stays unseen.
+*/
+function usePointPlaces(names, alive, read, world) {
+	const places = React.useRef(/* @__PURE__ */ new Map());
+	const live = new Set(names);
+	const placed = Object.keys(alive).flatMap((name) => {
+		if (!live.has(name)) {
+			const held = places.current.get(name);
+			return held ? [{
+				name,
+				...held
+			}] : [];
+		}
+		const p = {
+			x: world.x(read(name, "x")),
+			y: world.y(read(name, "y")),
+			z: world.z(read(name, "z"))
+		};
+		places.current.set(name, p);
+		return [{
+			name,
+			...p
+		}];
+	});
+	for (const name of places.current.keys()) if (!(name in alive)) places.current.delete(name);
+	return placed;
+}
+/** The position of every entry, keyed by its axis and name, gliding into new data. */
+function pointValues(names, data, fields) {
 	return Object.fromEntries(data.flatMap((d, i) => [
 		"x",
 		"y",
 		"z"
-	].map((a) => [`${a}${i}`, Number(d[fields[a]])])));
+	].map((a) => [`${a}${names[i]}`, Number(d[fields[a]])])));
+}
+/**
+* The config key of every point's color, by name - remembered while a gone
+* point shrinks away, since its entry has already left the data - and
+* forgotten with the point, so the memory stays the size of the chart.
+*/
+function usePointKeys(names, data, series, fallback, alive) {
+	const known = React.useRef(/* @__PURE__ */ new Map());
+	data.forEach((d, i) => known.current.set(names[i], series ? String(d[series]) : fallback));
+	for (const name of known.current.keys()) if (!(name in alive) && !names.includes(name)) known.current.delete(name);
+	return (name) => known.current.get(name) ?? fallback;
 }
 // registry/new-york/ui/surface-chart-3d.tsx
 /**
@@ -1582,8 +1999,10 @@ function pointValues(data, fields) {
 function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
 	const { config, camera } = useChart3D();
 	const [low, high = low] = colors ?? Object.keys(config);
-	const tweened = useTween(gridValues(data));
-	const heights = data.map((row, r) => row.map((_, c) => tweened[`${r}-${c}`]));
+	const [floor = 0, peak = 0] = extent(data.flat());
+	const target = gridValues(data);
+	const heights = gridHeights(useTween(target), floor);
+	const fade = useTween(Object.fromEntries(Object.keys(target).map((k) => [k, 1])), 0);
 	const rows = data.length;
 	const columns = data[0]?.length ?? 0;
 	const [x0, x1] = domain.x ?? [0, columns - 1];
@@ -1593,7 +2012,6 @@ function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
 		z: (z1 - z0) / Math.max(1, rows - 1)
 	};
 	const [lo = 0, hi = 0] = extent(heights.flat());
-	const [floor = 0, peak = 0] = extent(data.flat());
 	const spec = useTweenAxes({
 		x: domain.x ? axis(x0, x1) : pad(axis(x0, x1), cell.x),
 		y: axis(floor, peak),
@@ -1602,28 +2020,20 @@ function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
 	const world = worldBox(spec);
 	const toX = linear([0, columns - 1], [x0, x1]);
 	const toZ = linear([0, rows - 1], [z0, z1]);
-	const grid = intoWorld(gridPlanes3D().camera(camera), world).rows(Math.max(1, columns));
+	const grid = intoWorld(gridPlanes3D().camera(camera), world).rows(Math.max(1, heights[0]?.length ?? 0));
 	const points = heights.flatMap((row, r) => row.map((y, c) => ({
 		x: toX(c),
 		y,
-		z: toZ(r)
+		z: toZ(r),
+		r,
+		c
 	})));
-	const marks = grid.data(points).sort(sort).map((quad) => {
-		const height = quad.reduce((sum, p) => sum + p.y, 0) / quad.length;
-		const t = Math.round((height - lo) / (hi - lo || 1) * 100);
-		return {
-			key: quad.plane,
-			points: quad.map((p) => p.projected),
-			fill: shade(quad, `color-mix(in oklch, var(--color-${high}) ${t}%, var(--color-${low}))`),
-			tooltip: {
-				at: center(quad),
-				items: [{
-					label: titles?.y ?? "value",
-					value: height
-				}]
-			}
-		};
-	});
+	const marks = grid.data(points).sort(sort).map((quad) => quadMark(quad, fade, {
+		lo,
+		hi,
+		low,
+		high
+	}, titles?.y));
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
 		spec,
 		world,
@@ -1631,460 +2041,48 @@ function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
 		titles
 	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
 }
-/** The height of every cell, keyed by its row and column, gliding into new data. */
-function gridValues(data) {
-	return Object.fromEntries(data.flatMap((row, r) => row.map((y, c) => [`${r}-${c}`, y])));
-}
-// registry/new-york/ui/sankey-chart-3d.tsx
-const DEPTH = .4;
-const RIBBON = .7;
-const SEGMENTS = 16;
-const STEEPEST = 1.5;
-const SWING = 8;
 /**
-* Flows from left to right: every node a box in its column, as high as the
-* larger of what flows in and what flows out, and every flow a band from node
-* to node, as thick as its value, that turns from the color of its source to
-* the color of its target.
+* The mark of one cell: its quad, shaded by the color ramp at its height and
+* faded in place by `fade` while the cell enters or leaves.
 */
-function SankeyChart3D({ data, nodeWidth = .2, nodePadding = .05, format = (value) => value }) {
-	const { config, camera } = useChart3D();
-	const values = useTween(Object.fromEntries(data.map((d, i) => [String(i), d.value])), 0);
-	const { nodes, columns, ky } = sankeyLayout(data.map((d, i) => ({
-		...d,
-		value: values[String(i)]
-	})), nodePadding);
-	const pieces = depthSort(cubes3D().camera(camera).data(sankeyPieces(nodes, columns, ky, nodeWidth)), camera);
-	const labels = pieces.flatMap(({ key, faces, node }) => node ? [nodeLabel(key, faces, node.column < (columns - 1) / 2 ? "left" : "right", style(config, node).label, links(node))] : []);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Marks3D, { marks: pieces.flatMap((piece) => pieceMarks(piece, config, format)) }), /* @__PURE__ */ jsx(Labels3D, { labels })] });
-}
-/** The label and the color of a node, from the chart config. */
-function style(config, node) {
+function quadMark(quad, fade, ramp, title) {
+	const height = quad.reduce((sum, p) => sum + p.y, 0) / quad.length;
+	const t = Math.round((height - ramp.lo) / (ramp.hi - ramp.lo || 1) * 100);
+	const shaded = shade(quad, `color-mix(in oklch, var(--color-${ramp.high}) ${t}%, var(--color-${ramp.low}))`);
+	const seen = Math.min(...quad.map((p) => fade[`${p.r}-${p.c}`] ?? 0));
 	return {
-		label: config[node.id]?.label ?? node.id,
-		color: config[node.id] ? `var(--color-${node.id})` : "var(--muted-foreground)"
-	};
-}
-/**
-* The keys of the flows at a node. Its marks and its label carry them, so the
-* focus on the node lights its flows and the nodes at their other ends, and
-* the focus on a flow lights its two nodes.
-*/
-function links(node) {
-	return [...new Set([...node.incoming, ...node.outgoing].map((hop) => hop.flow.key))];
-}
-/**
-* The marks of a piece, each with its tooltip and its groups: the faces of a
-* node, or the faces of a slice of a flow, in the color it has turned to there.
-*/
-function pieceMarks({ key, faces, node, flow, t }, config, format) {
-	const at = center(faces.find((face) => face.face === "top"));
-	if (node) {
-		const { label, color } = style(config, node);
-		const groups = links(node);
-		return cubeMarks(key, faces, color, {
-			at,
+		key: quad.plane,
+		points: quad.map((p) => p.projected),
+		fill: seen < 1 ? `color-mix(in srgb, ${shaded} ${Math.round(seen * 100)}%, transparent)` : shaded,
+		groups: [quad.plane],
+		tooltip: {
+			at: center(quad),
 			items: [{
-				label,
-				value: format(node.value),
-				color
+				label: title ?? "value",
+				value: height
 			}]
-		}).map((mark) => ({
-			...mark,
-			groups
-		}));
-	}
-	const source = style(config, flow.source);
-	const target = style(config, flow.target);
-	const item = {
-		label: /* @__PURE__ */ jsxs(Fragment, { children: [
-			source.label,
-			" → ",
-			target.label
-		] }),
-		value: format(flow.value),
-		color: source.color
-	};
-	return cubeMarks(key, faces.filter((face) => face.face !== "left" && face.face !== "right"), `color-mix(in oklch, color-mix(in oklch, ${target.color} ${t}%, ${source.color}) 75%, var(--background))`, {
-		at,
-		items: [item]
-	}).map((mark) => ({
-		...mark,
-		groups: [flow.key]
-	}));
-}
-/** The nodes of `data`, waypoints included, stacked in their columns, and `ky`, the world units per value. */
-function sankeyLayout(data, nodePadding) {
-	const { nodes, flows, columns } = sankeyColumns(data);
-	const all = sankeyHops(nodes, flows);
-	const ky = stackColumns(all, columns, nodePadding);
-	stackHops(all, ky);
-	weaveHops(all, columns, ky);
-	return {
-		nodes: all,
-		columns,
-		ky
-	};
-}
-function newNode(id, column, flow) {
-	return {
-		id,
-		column,
-		value: 0,
-		y0: 0,
-		y1: 0,
-		incoming: [],
-		outgoing: [],
-		flow
-	};
-}
-function middle(node) {
-	return (node.y0 + node.y1) / 2;
-}
-/**
-* The nodes of `data` in the order they first appear, and the flows between
-* them, without the ones of no value. The column of a node is the longest
-* path to it from a source; the sinks move to the last column.
-*/
-function sankeyColumns(data) {
-	const nodes = /* @__PURE__ */ new Map();
-	const node = (id) => {
-		if (!nodes.has(id)) nodes.set(id, newNode(id, 0));
-		return nodes.get(id);
-	};
-	const seen = /* @__PURE__ */ new Map();
-	const flows = data.filter((d) => d.value > 0).map((d) => {
-		const ends = JSON.stringify([d.source, d.target]);
-		const count = seen.get(ends) ?? 0;
-		seen.set(ends, count + 1);
-		return {
-			key: count ? `${ends}#${count}` : ends,
-			source: node(d.source),
-			target: node(d.target),
-			value: d.value
-		};
-	});
-	for (let pass = 0; flows.some((f) => f.target.column <= f.source.column); pass += 1) {
-		if (pass === nodes.size) throw new Error("SankeyChart3D: the flows form a cycle");
-		for (const f of flows) f.target.column = Math.max(f.target.column, f.source.column + 1);
-	}
-	const last = Math.max(0, ...flows.map((f) => f.target.column));
-	const sources = new Set(flows.map((f) => f.source));
-	for (const n of nodes.values()) if (!sources.has(n)) n.column = last;
-	return {
-		nodes: [...nodes.values()],
-		flows,
-		columns: last + 1
-	};
-}
-/**
-* Splits every flow into hops from one column to the next. A flow that skips a
-* column passes it at a waypoint, a node of its own, so it has a slot in every
-* column it crosses and never runs through another node.
-*/
-function sankeyHops(nodes, flows) {
-	const all = [...nodes];
-	for (const flow of flows) {
-		let source = flow.source;
-		for (let column = source.column + 1; column <= flow.target.column; column += 1) {
-			const target = column < flow.target.column ? newNode(`${flow.key}:${column}`, column, flow) : flow.target;
-			if (target.flow) all.push(target);
-			const hop = {
-				flow,
-				source,
-				target,
-				y0: 0,
-				y1: 0,
-				z: 0
-			};
-			source.outgoing.push(hop);
-			target.incoming.push(hop);
-			source = target;
 		}
-	}
-	return all;
-}
-/**
-* Sizes the nodes to the largest scale at which every column fits, and stacks
-* each column from the top, centered. A column after the first orders its nodes
-* by the mean height of their sources, which uncrosses most flows. Returns the
-* scale, world units per value.
-*/
-function stackColumns(nodes, columns, nodePadding) {
-	const total = (hops) => hops.reduce((sum, hop) => sum + hop.flow.value, 0);
-	for (const node of nodes) node.value = Math.max(total(node.incoming), total(node.outgoing));
-	const stacks = Array.from({ length: columns }, (_, c) => nodes.filter((n) => n.column === c));
-	const sum = (stack) => stack.reduce((s, n) => s + n.value, 0);
-	const pad = Math.min(2 * nodePadding, 2 / Math.max(1, ...stacks.map((s) => s.length)));
-	const ky = Math.min(...stacks.map((s) => (2 - pad * (s.length - 1)) / sum(s)));
-	const mean = (node) => node.incoming.reduce((s, hop) => s + hop.flow.value * middle(hop.source), 0) / total(node.incoming);
-	for (const [c, stack] of stacks.entries()) {
-		if (c > 0) stack.sort((a, b) => mean(a) - mean(b));
-		let y = -(sum(stack) * ky + pad * (stack.length - 1)) / 2;
-		for (const node of stack) {
-			node.y0 = y;
-			node.y1 = y + node.value * ky;
-			y = node.y1 + pad;
-		}
-	}
-	return ky;
-}
-/**
-* Stacks the hops at every node from its top: the ones that leave it in the
-* order of their targets, the ones that arrive in the order of their sources,
-* so that the hops of a node do not cross.
-*/
-function stackHops(nodes, ky) {
-	for (const node of nodes) {
-		let y = node.y0;
-		for (const hop of node.outgoing.sort((a, b) => middle(a.target) - middle(b.target))) {
-			hop.y0 = y + hop.flow.value * ky / 2;
-			y += hop.flow.value * ky;
-		}
-		y = node.y0;
-		for (const hop of node.incoming.sort((a, b) => middle(a.source) - middle(b.source))) {
-			hop.y1 = y + hop.flow.value * ky / 2;
-			y += hop.flow.value * ky;
-		}
-	}
-}
-/**
-* Parts the hops that cross, gap by gap. The hops of a gap that cross, directly
-* or through one another, form a knot. The knots of a gap lie one above the
-* other across the whole gap; only the hops within a knot share their depth in lanes.
-*/
-function weaveHops(nodes, columns, ky) {
-	for (let column = 0; column < columns - 1; column += 1) {
-		const hops = nodes.filter((node) => node.column === column).flatMap((node) => node.outgoing).sort((a, b) => a.y0 - b.y0);
-		const rank = new Map([...hops].sort((a, b) => a.y1 - b.y1).map((hop, i) => [hop, i]));
-		let start = 0;
-		let reach = 0;
-		hops.forEach((hop, i) => {
-			reach = Math.max(reach, rank.get(hop));
-			if (reach > i) return;
-			if (i > start) knotHops(hops.slice(start, i + 1), ky);
-			start = i + 1;
-		});
-	}
-}
-/**
-* The lanes of a knot. Every hop takes the lowest lane that no hop crossing it
-* holds, which needs the fewest, and the lightest lane goes to the front. The
-* lanes share the depth of a flow, a third of a lane apart, so nothing reaches
-* out of it. The hops hold their lanes over the slices where any two of them
-* overlap, so their depth is constant there, and leave the rest for the way in
-* and out.
-*/
-function knotHops(hops, ky) {
-	const lanes = [];
-	for (const [i, hop] of hops.entries()) {
-		const taken = hops.slice(0, i).flatMap((above, j) => above.y1 > hop.y1 ? [lanes[j]] : []);
-		let lane = 0;
-		while (taken.includes(lane)) lane += 1;
-		lanes.push(lane);
-	}
-	const count = Math.max(...lanes) + 1;
-	const load = (lane) => hops.reduce((sum, hop, i) => sum + (lanes[i] === lane ? hop.flow.value : 0), 0);
-	const front = Array.from({ length: count }, (_, lane) => lane).sort((a, b) => load(a) - load(b));
-	const slices = hops.flatMap((a, i) => hops.slice(i + 1).flatMap((b) => a.y1 > b.y1 ? overlaps(a, b, ky) : []));
-	const ribbon = RIBBON * DEPTH;
-	const depth = 3 * ribbon / (4 * count - 1);
-	const knot = {
-		from: Math.min(...slices),
-		to: Math.max(...slices) + 1,
-		first: hops[0],
-		depth
 	};
-	for (const [i, hop] of hops.entries()) {
-		hop.z = (ribbon - depth) / 2 - front.indexOf(lanes[i]) * 4 * depth / 3;
-		hop.knot = knot;
-	}
-}
-/**
-* The slices in which two hops, `a` and `b`, overlap in height. Along a slice
-* their distance runs straight from one cross-section to the next, so they
-* overlap in it if they are closer than half their thicknesses at one of its
-* ends, or pass each other within it.
-*/
-function overlaps(a, b, ky) {
-	const apart = (k) => a.y0 - b.y0 + (a.y1 - b.y1 - (a.y0 - b.y0)) * ease(k / SEGMENTS);
-	const near = (a.flow.value + b.flow.value) * ky / 2;
-	return Array.from({ length: SEGMENTS }, (_, k) => k).filter((k) => Math.abs(apart(k)) < near || Math.abs(apart(k + 1)) < near || Math.sign(apart(k)) !== Math.sign(apart(k + 1)));
 }
-/** The S-curve of a flow, from 0 at t = 0 to 1 at t = 1, level at both ends. */
-function ease(t) {
-	return t * t * (3 - 2 * t);
-}
-/**
-* How far a hop of `knot` has moved into its lane at the cross-section `k`:
-* not at all at a node, fully between the borders of the knot, and along the
-* S-curve in between. A knot that starts at a node starts there in its lanes.
-*/
-function bump(k, knot) {
-	if (!knot) return 0;
-	if (k < knot.from) return ease(k / knot.from);
-	if (k > knot.to) return ease((SEGMENTS - k) / (SEGMENTS - knot.to));
-	return 1;
-}
-/**
-* The pieces of the chart: a box per node, a flat slice of its flow per
-* waypoint and `SEGMENTS` slices per hop. The columns stand from x = -1 to 1,
-* a node the share `nodeWidth` of the distance between two of them wide.
-*/
-function sankeyPieces(nodes, columns, ky, nodeWidth) {
-	const step = 2 / Math.max(1, columns - 1);
-	const x = (column) => -1 + column * step;
-	const half = nodeWidth * step / 2;
-	const share = (flow, at) => {
-		const from = x(flow.source.column) + half;
-		return Math.round((at - from) / (x(flow.target.column) - half - from) * 100);
-	};
-	return nodes.flatMap((node) => {
-		const band = x(node.column);
-		const y = middle(node);
-		const own = node.flow ? {
-			key: `way:${node.id}`,
-			band,
-			flow: node.flow,
-			t: share(node.flow, band)
-		} : {
-			key: `node:${node.id}`,
-			band,
-			node,
-			t: 0
-		};
-		const d = node.flow ? RIBBON * DEPTH : DEPTH;
-		const box = slab({
-			x: band - half,
-			y,
-			z: 0,
-			d
-		}, {
-			x: band + half,
-			y,
-			z: 0,
-			d
-		}, node.y1 - node.y0);
-		return [Object.assign(box, own, {
-			row: y,
-			lane: 0,
-			level: y
-		}), ...node.outgoing.flatMap((hop) => hopPieces(hop, band + half, x(node.column + 1) - half, ky, share))];
-	});
-}
-/**
-* The slices of a hop from `x0` to `x1`, along an S-curve that leaves and
-* arrives level, so that the hops of a flow join without a kink. A hop of a
-* knot narrows into its lane and widens back along the same curve. Every hop
-* between the same two columns has the same slices.
-*/
-function hopPieces(hop, x0, x1, ky, share) {
-	const ribbon = RIBBON * DEPTH;
-	const gentle = (slices, depth) => (ribbon - depth) * 1.5 / (slices * (x1 - x0) / SEGMENTS) <= STEEPEST;
-	const knot = hop.knot && {
-		...hop.knot,
-		from: gentle(hop.knot.from, hop.knot.depth) ? hop.knot.from : 0,
-		to: gentle(SEGMENTS - hop.knot.to, hop.knot.depth) ? hop.knot.to : SEGMENTS
-	};
-	const at = (of, k) => {
-		const into = bump(k, knot);
-		return {
-			x: x0 + (x1 - x0) * k / SEGMENTS,
-			y: of.y0 + (of.y1 - of.y0) * ease(k / SEGMENTS),
-			z: of.z * into,
-			d: ribbon + ((knot?.depth ?? ribbon) - ribbon) * into
-		};
-	};
-	return Array.from({ length: SEGMENTS }, (_, k) => {
-		const [from, to] = [at(hop, k), at(hop, k + 1)];
-		const first = knot ? [at(knot.first, k), at(knot.first, k + 1)] : [from, to];
-		const band = (from.x + to.x) / 2;
-		return Object.assign(slab(from, to, hop.flow.value * ky), {
-			key: `hop:${hop.flow.key}:${hop.source.column}:${k}`,
-			band,
-			flow: hop.flow,
-			t: share(hop.flow, band),
-			row: (first[0].y + first[1].y) / 2,
-			lane: knot && k >= knot.from && k < knot.to ? hop.z : 0,
-			level: (from.y + to.y) / 2
-		});
-	});
-}
-/**
-* The corners of a slab from the cross-section around `from` to the one around
-* `to`, `height` high and each `d` deep, in the order of box(). Two rectangles
-* of one height keep the faces planar and the slab convex.
-*/
-function slab(from, to, height) {
-	return [1, -1].flatMap((side) => [
-		{
-			x: from.x,
-			y: from.y - height / 2,
-			z: from.z + side * from.d / 2
-		},
-		{
-			x: from.x,
-			y: from.y + height / 2,
-			z: from.z + side * from.d / 2
-		},
-		{
-			x: to.x,
-			y: to.y + height / 2,
-			z: to.z + side * to.d / 2
-		},
-		{
-			x: to.x,
-			y: to.y - height / 2,
-			z: to.z + side * to.d / 2
-		}
-	]);
-}
-/**
-* The pieces in the order to paint them, by the first plane that parts two of
-* them: the slabs of the columns and slices lie between planes x = const; the
-* knots of a slice, one above the other; the lanes of a knot, where its hops
-* hold them, one behind the other; and the hops of a lane, or of a knot
-* outside its borders, which do not overlap there, one above the other. Each
-* key paints the part farther from the eye first, so the order is exact for
-* every eye, and keys of numbers cannot form a cycle.
-*/
-function depthSort(pieces, camera) {
-	const view = camera.viewDirection();
-	const perspective = camera.perspective();
-	const far = (at, v) => {
-		const eye = v * perspective;
-		return Number.isFinite(eye) ? Math.abs(at - eye) : -at * Math.sign(v);
-	};
-	return pieces.sort((a, b) => far(b.band, view.x) - far(a.band, view.x) || far(b.row, view.y) - far(a.row, view.y) || far(b.lane, view.z) - far(a.lane, view.z) || far(b.level, view.y) - far(a.level, view.y) || sort(a, b));
+/** The height of every cell, keyed by its row and column, gliding into new data. */
+function gridValues(data) {
+	return Object.fromEntries(data.flatMap((row, r) => row.map((y, c) => [`${r}-${c}`, y])));
 }
 /**
-* The label of a node beside its `outer` face, pushed away from the other side,
-* so that it stays outside whichever way the camera turns. Seen edge on, where
-* the two sides meet and away has no direction, the label lifts over the node,
-* so it swings round to the other side instead of jumping across. It carries
-* the groups of the node, so it fades with the node.
+* The gliding heights as a lattice. It spans the cells still leaving too, so
+* a shrunken grid sinks away instead of popping; a corner only one dimension
+* kept stands at the floor until it goes.
 */
-function nodeLabel(key, faces, outer, text, groups) {
-	const side = (name) => center(faces.find((face) => face.face === name));
-	const at = side(outer);
-	const away = at.x - side(outer === "left" ? "right" : "left").x;
-	const lift = Math.max(0, SWING - Math.abs(away));
-	const length = Math.hypot(away, lift);
-	const toward = {
-		x: away / length,
-		y: -lift / length
-	};
-	return {
-		key,
-		at: {
-			x: at.x + 8 * toward.x,
-			y: at.y + 8 * toward.y
-		},
-		text,
-		toward,
-		groups
-	};
+function gridHeights(tweened, floor) {
+	let rows = 0;
+	let columns = 0;
+	for (const key of Object.keys(tweened)) {
+		const [r, c] = key.split("-").map(Number);
+		rows = Math.max(rows, r + 1);
+		columns = Math.max(columns, c + 1);
+	}
+	return Array.from({ length: rows }, (_, r) => Array.from({ length: columns }, (_, c) => tweened[`${r}-${c}`] ?? floor));
 }
-export { Axes3D, BarChart3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, SankeyChart3D, ScatterChart3D, SurfaceChart3D, axis, center, cubeMarks, intoWorld, linear, pad, shade, useChart3D, useTween, useTweenAxes, worldBox };
+export { Axes3D, BarChart3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, ScatterChart3D, SurfaceChart3D, axis, center, cubeMarks, faded, intoWorld, linear, pad, shade, useChart3D, useTween, useTweenAxes, worldBox };
 
 //# sourceMappingURL=index.js.map