@niekes/charts-3d 0.3.0 → 0.5.0

package/dist/index.js

@@ -26,108 +26,241 @@ const KEY_STEP = Math.PI / 36;
 const PAN_STEP = 20;
 const ZOOM_STEP = 1.2;
 const CLICK_DISTANCE = 4;
-const SHORTCUTS = [
-	{
-		hint: ["Drag"],
-		label: "Rotate"
+const ZOOM_CURSOR = 400;
+const SHORTCUTS = {
+	dragRotate: {
+		label: "Rotate",
+		hint: ["Mod", "Drag"]
 	},
-	{
-		hint: [
-			"←",
-			"→",
-			"↑",
-			"↓"
-		],
+	rotateLeft: {
 		label: "Rotate",
-		keys: {
-			ArrowLeft: { yaw: -KEY_STEP },
-			ArrowRight: { yaw: KEY_STEP },
-			ArrowUp: { tilt: -KEY_STEP },
-			ArrowDown: { tilt: KEY_STEP }
-		}
+		keys: ["ArrowLeft"],
+		move: { yaw: -KEY_STEP }
 	},
-	{
-		hint: ["Space", "Drag"],
-		label: "Pan"
+	rotateRight: {
+		label: "Rotate",
+		keys: ["ArrowRight"],
+		move: { yaw: KEY_STEP }
 	},
-	{
-		hint: [
-			"Shift",
-			"←",
-			"→",
-			"↑",
-			"↓"
-		],
+	rotateUp: {
+		label: "Rotate",
+		keys: ["ArrowUp"],
+		move: { tilt: -KEY_STEP }
+	},
+	rotateDown: {
+		label: "Rotate",
+		keys: ["ArrowDown"],
+		move: { tilt: KEY_STEP }
+	},
+	dragPan: {
 		label: "Pan",
-		keys: {
-			"Shift+ArrowLeft": { pan: {
-				x: -20,
-				y: 0
-			} },
-			"Shift+ArrowRight": { pan: {
-				x: PAN_STEP,
-				y: 0
-			} },
-			"Shift+ArrowUp": { pan: {
-				x: 0,
-				y: -20
-			} },
-			"Shift+ArrowDown": { pan: {
-				x: 0,
-				y: PAN_STEP
-			} }
-		}
+		hint: ["Alt", "Drag"]
 	},
-	{
-		hint: ["+", "−"],
+	panLeft: {
+		label: "Pan",
+		keys: ["Shift+ArrowLeft"],
+		move: { pan: {
+			x: -20,
+			y: 0
+		} }
+	},
+	panRight: {
+		label: "Pan",
+		keys: ["Shift+ArrowRight"],
+		move: { pan: {
+			x: PAN_STEP,
+			y: 0
+		} }
+	},
+	panUp: {
+		label: "Pan",
+		keys: ["Shift+ArrowUp"],
+		move: { pan: {
+			x: 0,
+			y: -20
+		} }
+	},
+	panDown: {
+		label: "Pan",
+		keys: ["Shift+ArrowDown"],
+		move: { pan: {
+			x: 0,
+			y: PAN_STEP
+		} }
+	},
+	zoomIn: {
 		label: "Zoom",
-		keys: {
-			"+": { zoom: ZOOM_STEP },
-			"=": { zoom: ZOOM_STEP },
-			"-": { zoom: 1 / ZOOM_STEP }
-		}
+		keys: ["Plus", "="],
+		move: { zoom: ZOOM_STEP }
 	},
-	{
-		hint: ["Ctrl", "Scroll"],
-		label: "Zoom"
+	zoomOut: {
+		label: "Zoom",
+		keys: ["-"],
+		move: { zoom: 1 / ZOOM_STEP }
 	},
-	{
-		hint: ["0"],
+	wheelZoom: {
+		label: "Zoom",
+		hint: ["Mod", "Scroll"]
+	},
+	reset: {
 		label: "Reset",
-		keys: { "0": { reset: true } }
+		keys: ["0"],
+		move: { reset: true }
 	},
-	{
-		hint: ["Double-click"],
-		label: "Reset"
+	doubleClickReset: {
+		label: "Reset",
+		hint: ["Double-click"]
 	},
-	{
-		hint: ["?"],
-		label: "Shortcuts"
+	help: {
+		label: "Keyboard shortcuts",
+		keys: ["?"]
 	}
+};
+const MODIFIERS = [
+	"Control",
+	"Alt",
+	"Meta",
+	"Shift"
 ];
-const KEYS = Object.assign({}, ...SHORTCUTS.map((s) => s.keys));
-const KEY_SHORTCUTS = Object.keys(KEYS).map((k) => k === "+" ? "Plus" : k).join(" ");
+/** 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: " "
+};
+const ARIA = {
+	"+": "Plus",
+	" ": "Space"
+};
+const KBD = {
+	ArrowLeft: "←",
+	ArrowRight: "→",
+	ArrowUp: "↑",
+	ArrowDown: "↓",
+	"-": "−",
+	" ": "Space",
+	Control: "Ctrl",
+	Meta: "⌘"
+};
+/** Keys split at `+`, which is the key itself at the end: `"Control++"` is Control and `+`. */
+const split = (keys) => keys.split(/\+(?!$)/);
+/**
+* Keys in the one form a binding and a press compare in: the modifiers in a
+* fixed order, then the key, Plus as `+` and Space as " ". Shift counts only
+* beside a named key; a character such as "?" or "A" is typed with it already.
+*/
+function combo(keys) {
+	const parts = split(keys);
+	const key = NAMED[parts.at(-1)] ?? parts.at(-1);
+	return [...MODIFIERS.filter((m) => parts.includes(m) && (m !== "Shift" || key.length > 1)), key].join("+");
+}
+/** The keys of a press, in the form of `combo`. */
+function pressed(e) {
+	return combo([...[
+		e.ctrlKey && "Control",
+		e.altKey && "Alt",
+		e.metaKey && "Meta",
+		e.shiftKey && "Shift"
+	], e.key].filter(Boolean).join("+"));
+}
+/** Keys in the form of `combo`, the way `aria-keyshortcuts` writes them. */
+function aria(keys) {
+	const parts = split(keys);
+	return [...parts.slice(0, -1), ARIA[parts.at(-1)] ?? parts.at(-1)].join("+");
+}
+/** Every action, `keymap` over its defaults: on unless it is off or a key action without keys. */
+function shortcutsOf(keymap) {
+	return Object.keys(SHORTCUTS).map((action) => {
+		const own = keymap && keymap[action];
+		const { keys = [], ...shortcut } = {
+			...SHORTCUTS[action],
+			...Array.isArray(own) ? { keys: own } : own || {}
+		};
+		const on = own !== false && (shortcut.hint !== void 0 || keys.length > 0);
+		return {
+			...shortcut,
+			action,
+			on,
+			keys: keys.map(combo)
+		};
+	});
+}
+/**
+* The rows of the shortcut panel: the actions by label, the keys of a row in
+* 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 { 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, row]) => ({
+		label,
+		keys: [...row.keys.values()],
+		gestures: row.gestures
+	}));
+}
+/**
+* What a keymap does: the actions that are on, the step of each key, the help
+* keys and the rows of the panel. Without the `panel`, the help keys have
+* nothing to open and are off.
+*/
+function keymapOf(keymap, panel) {
+	const all = shortcutsOf(keymap);
+	const on = all.filter((s) => s.on && (panel || s.action !== "help"));
+	return {
+		on: (action) => on.some((s) => s.action === action),
+		moves: Object.fromEntries(on.flatMap((s) => s.keys.map((k) => [k, s.move]))),
+		help: on.find((s) => s.action === "help")?.keys ?? [],
+		label: all.find((s) => s.action === "help").label,
+		aria: on.flatMap((s) => s.keys.map(aria)).join(" "),
+		rows: panel ? rowsOf(on) : []
+	};
+}
 function ChartContainer3D({ id, config, defaultView = {
 	yaw: Math.PI / 6,
 	tilt: Math.PI / 6
-}, width = 640, height = 400, legend = false, renderer: requested = "svg", shortcuts = true, className, children, "aria-label": ariaLabel = "3D chart. Drag to rotate it, press ? for all shortcuts.", ...props }) {
+}, width = 640, height = 400, animationDuration, legend = false, renderer: requested = "svg", shortcuts = true, keymap = {}, gizmo = "bottom-left", className, children, "aria-label": ariaLabel, ...props }) {
 	const uniqueId = React.useId();
 	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-	const [tooltip, setTooltip] = React.useState(null);
-	const { scene, renderer, canvas, repaint, hover, leave } = useScene(requested, width, height, setTooltip);
-	const { view, orbiting, handlers } = useOrbit(defaultView, width, leave, hover);
+	const { scene, renderer, canvas, repaint, hover, hide, leave, tooltip, focus } = useScene(requested, width, height);
+	const keys = keymapOf(keymap, shortcuts);
+	const { view, handlers } = useOrbit(defaultView, width, keys, hide, hover);
 	const camera = useCamera(view, width, height);
 	const context = React.useMemo(() => ({
 		config,
 		camera,
 		renderer,
 		scene,
-		repaint
+		repaint,
+		focus,
+		animationDuration
 	}), [
 		config,
 		camera,
 		renderer,
-		repaint
+		repaint,
+		focus,
+		animationDuration
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "chart-3d",
@@ -145,11 +278,7 @@ function ChartContainer3D({ id, config, defaultView = {
 					/* @__PURE__ */ jsx("svg", {
 						viewBox: `0 0 ${width} ${height}`,
 						role: "img",
-						"aria-label": ariaLabel,
-						"aria-keyshortcuts": shortcuts ? `${KEY_SHORTCUTS} ?` : KEY_SHORTCUTS,
-						tabIndex: 0,
-						className: "block h-auto w-full cursor-grab touch-none outline-hidden select-none mask-y-from-96% active:cursor-grabbing",
-						"data-orbiting": orbiting,
+						...keymapProps(keys, ariaLabel),
 						onPointerLeave: leave,
 						...handlers,
 						children: /* @__PURE__ */ jsx(Chart3DContext.Provider, {
@@ -163,6 +292,10 @@ function ChartContainer3D({ id, config, defaultView = {
 						width,
 						height
 					}),
+					/* @__PURE__ */ jsx(ChartGizmo3D, {
+						camera,
+						corner: gizmo
+					}),
 					/* @__PURE__ */ jsx(ChartTooltip3D, {
 						tooltip,
 						width,
@@ -170,27 +303,52 @@ function ChartContainer3D({ id, config, defaultView = {
 					})
 				]
 			}),
-			shortcuts && /* @__PURE__ */ jsx(ChartShortcuts3D, {}),
+			/* @__PURE__ */ jsx(ChartShortcuts3D, { ...keys }),
 			legend && /* @__PURE__ */ jsx(ChartLegend3D, { config })
 		]
 	});
 }
 /**
+* What the svg says about its keymap: a label that names the drag and the
+* help key if they are on, the keys, the focus only if a key does something
+* and the grab cursor only if a drag does; without one, a touch scrolls the page.
+*/
+function keymapProps(keys, label) {
+	const drag = keys.on("dragRotate") || keys.on("dragPan");
+	const help = keys.help[0];
+	const said = [
+		"3D chart.",
+		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-x-from-96% mask-y-from-96%", drag && "touch-none")
+	};
+}
+/**
 * The marks of the chart and what reads them: the renderer that draws them,
 * the canvas it paints them on and the hover that shows their tooltips.
 */
-function useScene(requested, width, height, setTooltip) {
+function useScene(requested, width, height) {
 	const scene = React.useRef([]);
+	const [tooltip, setTooltip] = React.useState(null);
+	const focus = useFocus();
 	const renderer = useRenderer(requested);
-	const { canvas, repaint } = useCanvas(scene, width);
-	const { hover, leave } = useHover(scene, width, height, setTooltip);
+	const { canvas, repaint } = useCanvas(scene, width, height, renderer);
+	const { hover, hide, leave } = useHover(scene, width, height, setTooltip, focus);
 	return {
 		scene,
 		renderer,
 		canvas,
 		repaint,
 		hover,
-		leave
+		hide,
+		leave,
+		tooltip,
+		focus
 	};
 }
 /** The camera of a view. The shapes of the chart hang on it, so a new view re-projects them all. */
@@ -204,6 +362,11 @@ function useCamera(view, width, height) {
 		height
 	]);
 }
+const clamp = (lo, hi, value) => Math.max(lo, Math.min(hi, value));
+const ZERO = {
+	x: 0,
+	y: 0
+};
 /** `view` moved by one step. The tilt stops at the zenith and the nadir, the zoom at 1/4 and 8. */
 function moved(view, move, initial) {
 	if (move.reset) return initial;
@@ -221,7 +384,6 @@ function moved(view, move, initial) {
 		x: 0,
 		y: 0
 	};
-	const clamp = (lo, hi, value) => Math.max(lo, Math.min(hi, value));
 	return {
 		...view,
 		yaw: view.yaw + step.yaw,
@@ -234,38 +396,230 @@ function moved(view, move, initial) {
 	};
 }
 /**
-* The view of the camera, and the handlers that move it: a drag turns it,
-* or pans it while Space is held, the keys of `SHORTCUTS` step it, Ctrl or ⌘
-* with the wheel zooms it and a double click resets it. `orbiting` is true
-* while the camera turns. `onDragStart` runs when a press becomes a drag,
-* `onHover` on a move without one.
+* Whether the chart may move on its own: only where the browser says the
+* reader has not asked for reduced motion. Where it cannot say, as on the
+* server and in jsdom, the chart jumps.
+*/
+function animates() {
+	return Boolean(globalThis.matchMedia?.("(prefers-reduced-motion: no-preference)").matches);
+}
+/**
+* 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 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 useOrbit(defaultView, width, onDragStart, onHover) {
+function useTween(values, enter) {
+	const { animationDuration: duration = 600 } = useChart3D();
+	const key = JSON.stringify(values);
+	const [tween, setTween] = React.useState({
+		key,
+		from: values,
+		to: values,
+		t: 1
+	});
+	const shown = tweenNumbers(tween, enter);
+	if (key !== tween.key) setTween({
+		key,
+		from: shown,
+		to: values,
+		t: duration > 0 && animates() ? 0 : 1
+	});
+	React.useEffect(() => {
+		if (tween.t >= 1) return;
+		let start = null;
+		let frame = 0;
+		const step = (now) => {
+			start ??= now;
+			const t = Math.min(1, (now - start) / duration);
+			setTween((tw) => ({
+				...tw,
+				t
+			}));
+			if (t < 1) frame = requestAnimationFrame(step);
+		};
+		frame = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(frame);
+	}, [tween.key, duration]);
+	return shown;
+}
+/** 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);
+	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 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 axes = [
+		"x",
+		"y",
+		"z"
+	];
+	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 [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,
+			span,
+			...leaving.length ? { leaving } : {}
+		};
+	};
+	return {
+		x: glided("x"),
+		y: glided("y"),
+		z: glided("z")
+	};
+}
+const GLIDE = 200;
+/**
+* The view of the camera, `jump`, which moves it at once, and `glide`, which
+* moves it there in `GLIDE` milliseconds, easing out. A glide under way
+* heads for the next view from where it is, so a held key turns the camera
+* smoothly; a jump stops it. Where the reader asks for reduced motion, or
+* the browser cannot say, a glide jumps.
+*/
+function useGlide(defaultView) {
 	const [view, setView] = React.useState(defaultView);
+	const now = React.useRef(defaultView);
+	const run = React.useRef(null);
+	const show = React.useCallback((v) => setView(now.current = v), []);
+	const stop = React.useCallback(() => {
+		cancelAnimationFrame(run.current?.frame ?? 0);
+		run.current = null;
+	}, []);
+	const jump = React.useCallback((to) => {
+		stop();
+		show(to(now.current));
+	}, [show, stop]);
+	React.useEffect(() => stop, [stop]);
+	const glide = (to) => {
+		if (!animates()) return jump(to);
+		const end = to(run.current?.to ?? now.current);
+		const from = {
+			...now.current,
+			yaw: end.yaw + remainder(now.current.yaw - end.yaw)
+		};
+		const start = performance.now();
+		stop();
+		const frame = (time) => {
+			const t = clamp(0, 1, (time - start) / GLIDE);
+			show(t < 1 ? between(from, end, 1 - (1 - t) ** 3) : end);
+			if (t < 1) run.current = {
+				to: end,
+				frame: requestAnimationFrame(frame)
+			};
+			else run.current = null;
+		};
+		run.current = {
+			to: end,
+			frame: requestAnimationFrame(frame)
+		};
+	};
+	return {
+		view,
+		jump,
+		glide
+	};
+}
+/** The angle `a` in the turn from -π to π. */
+function remainder(a) {
+	return a - 2 * Math.PI * Math.round(a / (2 * Math.PI));
+}
+/** The view the share `k` of the way from `from` to `to`. */
+function between(from, to, k) {
+	const mix = (a, b) => a + (b - a) * k;
+	const pan = from.pan ?? ZERO;
+	const goal = to.pan ?? ZERO;
+	return {
+		...to,
+		yaw: mix(from.yaw, to.yaw),
+		tilt: mix(from.tilt, to.tilt),
+		zoom: mix(from.zoom ?? 1, to.zoom ?? 1),
+		pan: {
+			x: mix(pan.x, goal.x),
+			y: mix(pan.y, goal.y)
+		}
+	};
+}
+/**
+* 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 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 space = React.useRef(false);
-	const ref = useWheelZoom(setView);
-	const move = (step) => setView((v) => moved(v, step, defaultView));
+	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 keyHandlers = useKeys(keys, step, setOrbiting);
 	const release = () => {
 		drag.current = null;
 		setOrbiting(false);
 	};
 	return {
 		view,
-		orbiting,
 		handlers: {
 			ref,
 			onPointerDown: (e) => {
-				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;
@@ -276,60 +630,120 @@ function useOrbit(defaultView, width, 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: () => move({ reset: true }),
-			onKeyDown: (e) => {
-				if (e.key === " ") space.current = true;
-				const step = e.shiftKey && KEYS[`Shift+${e.key}`] || KEYS[e.key];
-				if (!step && e.key !== " ") return;
-				e.preventDefault();
-				if (!step) return;
-				setOrbiting(Boolean(step.yaw || step.tilt));
-				move(step);
-			},
-			onKeyUp: (e) => {
-				if (e.key === " ") space.current = false;
-				setOrbiting(false);
-			}
+			onDoubleClick: keys.on("doubleClickReset") ? () => step({ reset: true }) : void 0,
+			...keyHandlers,
+			"data-orbiting": orbiting,
+			"data-mod": keys.on("dragRotate") && held.mod ? true : void 0,
+			"data-alt": keys.on("dragPan") && held.alt ? true : void 0
 		}
 	};
 }
 /**
-* A ref for the svg that zooms the view with Ctrl or ⌘ and the wheel, which
-* is also how a trackpad pinches. The wheel alone still scrolls the page.
+* 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 useWheelZoom(setView) {
+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 onKeyDown = (e) => {
+		const step = keys.moves[pressed(e)];
+		if (!step) return;
+		e.preventDefault();
+		setOrbiting(Boolean(step.yaw || step.tilt));
+		move(step);
+	};
+	const onKeyUp = () => setOrbiting(false);
+	return {
+		onKeyDown,
+		onKeyUp
+	};
+}
+/**
+* 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 || !svg) return;
+		let timer;
 		const onWheel = (e) => {
-			if (!e.ctrlKey && !e.metaKey) return;
+			if (!platformMod(e) && !e.ctrlKey) return;
 			e.preventDefault();
-			setView((v) => moved(v, { zoom: 2 ** (-e.deltaY / 200) }, v));
+			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);
-	}, [setView]);
+	}, [jump, on]);
 }
 /**
-* The tooltip of the mark under the pointer, the one painted last. `hover`
-* sets it only when the pointer moves onto another mark, so a move within
-* one does not render the chart again.
+* The tooltip of the mark under the pointer, the one painted last, and the
+* 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) {
+function useHover(scene, width, height, setTooltip, focus) {
 	const hovered = React.useRef(void 0);
 	const show = (mark) => {
+		focus.set(mark?.groups);
 		if (mark?.key === hovered.current?.key) return;
 		hovered.current = mark;
 		setTooltip(mark?.tooltip ?? null);
@@ -343,9 +757,39 @@ function useHover(scene, width, height, setTooltip) {
 			};
 			show(hit(scene.current, at));
 		},
+		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. */
+function useFocus() {
+	const [focus] = React.useState(() => {
+		let groups;
+		const listeners = /* @__PURE__ */ new Set();
+		return {
+			get: () => groups,
+			set: (next) => {
+				if (JSON.stringify(next) === JSON.stringify(groups)) return;
+				groups = next;
+				listeners.forEach((listener) => listener());
+			},
+			subscribe: (listener) => {
+				listeners.add(listener);
+				return () => listeners.delete(listener);
+			}
+		};
+	});
+	return focus;
+}
+/** 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);
+	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) {
 	for (let i = marks.length - 1; i >= 0; i -= 1) {
@@ -365,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;
@@ -378,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;
@@ -394,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;
@@ -404,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"] });
@@ -432,47 +891,236 @@ 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 = [
+	{
+		axis: "x",
+		x: 1,
+		y: 0,
+		z: 0
+	},
+	{
+		axis: "y",
+		x: 0,
+		y: -1,
+		z: 0
+	},
+	{
+		axis: "z",
+		x: 0,
+		y: 0,
+		z: 1
+	}
+];
+const CORNERS = {
+	"top-left": "top-2 left-2",
+	"top-right": "top-2 right-2",
+	"bottom-left": "bottom-2 left-2",
+	"bottom-right": "bottom-2 right-2"
+};
+/**
+* The axes of the world in a corner of the chart: turned with the camera,
+* neither panned nor zoomed, the axis nearest the camera on top. An axis
+* draws in `currentColor`, so a text color on its `data-axis` recolors it.
+*/
+function ChartGizmo3D({ camera, corner }) {
+	if (!corner) return null;
+	const eye = camera3D().origin({
+		x: 24,
+		y: 24
+	}).scale(18).rotateY(camera.rotateY()).rotateX(camera.rotateX());
+	const ends = points3D().camera(eye).data(GIZMO).sort(sort);
+	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": "chart-3d-gizmo",
+		viewBox: "0 0 48 48",
+		"aria-hidden": "true",
+		className: cn("pointer-events-none absolute size-12 text-muted-foreground", CORNERS[corner]),
+		children: ends.map(({ axis, projected: p }) => /* @__PURE__ */ jsxs("g", {
+			"data-axis": axis,
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: 24,
+				y1: 24,
+				x2: 24 + (p.x - 24) * .6,
+				y2: 24 + (p.y - 24) * .6,
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round"
+			}), /* @__PURE__ */ jsx("text", {
+				x: p.x,
+				y: p.y,
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				fill: "currentColor",
+				className: "text-[10px] font-medium",
+				children: axis.toUpperCase()
+			})]
+		}, axis))
 	});
 }
 /**
+* 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 lit = useLit(marks);
+	const drawn = marks.map((mark) => lit(mark) ? {
+		...mark,
+		stroke: mark.stroke && mark.stroke !== "var(--background)" ? mark.stroke : focusOf(mark.fill)
+	} : mark);
 	React.useLayoutEffect(() => {
-		scene.current = marks;
+		scene.current = drawn;
 		repaint();
 	});
-	if (renderer === "canvas") return null;
-	return marks.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
@@ -481,34 +1129,51 @@ function Marks3D({ marks }) {
 function Labels3D({ labels }) {
 	return /* @__PURE__ */ jsx("g", {
 		"data-slot": "chart-3d-labels",
-		children: labels.map(({ key, at, text, anchor }) => /* @__PURE__ */ jsx("text", {
-			x: at.x,
-			y: at.y,
-			textAnchor: anchor,
-			dominantBaseline: "central",
-			paintOrder: "stroke",
-			strokeWidth: 3,
-			strokeLinejoin: "round",
-			className: "fill-foreground stroke-background text-[10px] font-medium",
-			children: text
-		}, key))
+		children: labels.map((label) => {
+			const { x, y } = label.toward ? beside(label.at, label.toward, textWidth(label.text, 10), 10, 0) : label.at;
+			return /* @__PURE__ */ jsx("text", {
+				x,
+				y,
+				textAnchor: label.toward ? "middle" : label.anchor,
+				dominantBaseline: "central",
+				paintOrder: "stroke",
+				strokeWidth: 3,
+				strokeLinejoin: "round",
+				className: "fill-foreground stroke-background text-[10px] font-medium",
+				children: label.text
+			}, label.key);
+		})
 	});
 }
 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}%`,
@@ -537,50 +1202,90 @@ function ChartTooltip3D({ tooltip, width, height }) {
 	});
 }
 /**
-* A button in the corner of the chart that lists `SHORTCUTS`. `?` on the
-* chart opens and closes the list, Escape closes it.
+* A button in the corner of the chart, named `label`, that lists the rows of
+* its keymap. The `help` keys on the chart open and close the list, Escape
+* closes it.
 */
-function ChartShortcuts3D() {
+function ChartShortcuts3D({ rows, help, label }) {
 	const [open, setOpen] = React.useState(false);
 	const ref = React.useRef(null);
+	const id = React.useId();
+	const keys = help.join("\n");
 	React.useEffect(() => {
 		const chart = ref.current?.parentElement;
 		const onKeyDown = (e) => {
-			if (e.key === "?") setOpen((o) => !o);
+			if (keys.split("\n").includes(pressed(e))) setOpen((o) => !o);
 			if (e.key === "Escape") setOpen(false);
 		};
 		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",
-			"aria-label": "Keyboard shortcuts",
+			"data-slot": "chart-3d-shortcuts-trigger",
+			"aria-label": 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("div", {
-			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: SHORTCUTS.map(({ hint, label }, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
-				"data-slot": "kbd-group",
-				className: "flex gap-1",
-				children: hint.map((key) => /* @__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
-				}, key))
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground",
-				children: label
-			})] }, i))
+		}), open && /* @__PURE__ */ jsx(ChartShortcutList3D, {
+			id,
+			rows
 		})]
 	});
 }
+/** 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-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, 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",
@@ -593,104 +1298,348 @@ function ChartLegend3D({ config }) {
 }
 /**
 * The walls of the chart box that face away from the camera, with their
-* gridlines, and an axis with ticks on the outline of the box.
+* gridlines, the line of every axis along its edge with the mark of each of
+* its ticks, and the labels of every axis on each of its four edges. Only the
+* edge the axis sits on shows them, so when the axis moves to another edge,
+* its line, its marks and its labels fade from one to the other.
 */
 function Axes3D({ spec, world, format = {}, titles = {} }) {
 	const { camera } = useChart3D();
-	const box = axes3D().camera(camera).x((p) => world.x(p.x)).y((p) => world.y(p.y)).z((p) => world.z(p.z));
+	const box = intoWorld(axes3D().camera(camera), world);
+	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),
-			className: "fill-muted/40 stroke-border",
-			strokeWidth: .75
-		}, `${wall.axis}${wall.side}`)), labelAxes(box.axes(spec), format, titles).map((axis) => /* @__PURE__ */ jsx(AxisEdge3D, {
-			ticks: axis.ticks,
-			title: axis.title
-		}, axis.key))]
+		children: [
+			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.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",
+				width: 1.5
+			}, line.key)),
+			marks.map((mark) => /* @__PURE__ */ jsx(AxisLine3D, {
+				line: mark,
+				ink: "stroke-foreground/60",
+				width: 1
+			}, mark.key)),
+			labels.map((label) => /* @__PURE__ */ jsx(AxisLabel3D, { label }, label.key))
+		]
 	});
 }
+const GAP = 10;
+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 labels of one axis on the outline of the box: a label per tick, pushed
-* away from the box along the normal of the edge, and the title of the axis
-* further out. `key` names the edge, one of the four the axis moves between
-* as the camera turns.
+* 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 axisLabels(edge, format, title) {
-	const { normal: n } = edge;
-	const start = edge[0].projected;
-	const end = edge[edge.length - 1].projected;
-	const anchor = n.x > .3 ? "start" : n.x < -.3 ? "end" : "middle";
-	const label = (at, out, text, size) => ({
-		x: at.x + n.x * out,
-		y: at.y + n.y * out,
-		anchor,
-		text,
-		size
-	});
+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.
+* Every edge fits its own tick labels; then the labels of an axis give way to
+* those of an axis with fewer ticks, which say more each, and the titles give
+* way to the ticks.
+*/
+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);
+	}
+	for (const axis of axes) axis.marks.forEach((mark, i) => mark.opacity = axis.ticks[i].opacity);
+	return {
+		labels: axes.flatMap((axis) => [...axis.ticks, ...axis.title ? [axis.title] : []]),
+		lines: axes.map((axis) => axis.line),
+		marks: axes.flatMap((axis) => axis.marks)
+	};
+}
+/**
+* The labels of one edge: a label per tick beside it, away from the box, in
+* 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.
+*/
+/**
+* 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, value) => {
+		const w = textWidth(text, h);
+		return {
+			key,
+			axis,
+			value,
+			at: beside(at, n, w, h, gap),
+			w,
+			h,
+			shift: ZERO,
+			text,
+			opacity: 1
+		};
+	};
+	const id = `${axis}${edge.sides.join("")}`;
+	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(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
 	};
+	const head = title ? {
+		...label(`${id}-title`, middle, title, 12, GAP + depth + GAP),
+		title: true
+	} : void 0;
+	if (head && rows === 2) head.shift = row;
+	hideOffRange([...ticks, ...head ? [head] : []], range, chosen);
 	return {
-		key: `${edge.axis}:${edge[0].x},${edge[0].y},${edge[0].z}`,
-		ticks: edge.map((tick) => label(tick.projected, 10, format(tick[edge.axis]), 10)),
-		title: title ? label(middle, 44, title, 12) : void 0
+		chosen,
+		ticks,
+		title: head,
+		line: {
+			key: id,
+			from: start,
+			to: end,
+			opacity: chosen ? 1 : 0
+		},
+		marks: edge.map((tick, i) => ({
+			key: ticks[i].key,
+			from: tick.projected,
+			to: {
+				x: tick.projected.x + n.x * MARK,
+				y: tick.projected.y + n.y * MARK
+			},
+			opacity: ticks[i].opacity
+		}))
 	};
 }
 /**
-* The labels of the axes, with every tick label hidden that would cover a
-* title or a tick label before it, so an axis seen end on keeps its first
-* label and a short one every other.
+* Fits the tick labels of an edge into the space between its ticks: in one
+* row if they keep `PAD` apart, or slid along the edge if no label has to
+* slide further than `DODGE`, else every other label a `row` further out if
+* that is enough, else every `stride`-th label of one row, 2, 4, 8… The
+* labels of a stride are among those of the one before, so as the edge
+* shortens, a label only ever leaves and none comes in for it. Returns the rows.
 */
-function labelAxes(edges, format, titles) {
-	const axes = edges.filter((edge) => edge.length).map((edge) => axisLabels(edge, format[edge.axis] ?? String, titles[edge.axis]));
-	const placed = axes.flatMap((axis) => axis.title ? [bounds(axis.title)] : []);
-	for (const label of axes.flatMap((axis) => axis.ticks)) {
-		const b = bounds(label);
-		label.hidden = placed.some((p) => b.left < p.right && p.left < b.right && b.top < p.bottom && p.top < b.bottom);
-		if (!label.hidden) placed.push(b);
-	}
-	return axes;
-}
-/** The box a label covers, guessed from its text, as the browser lays it out only after the render. */
-function bounds({ x, y, anchor, text, size }) {
-	const width = (typeof text === "string" || typeof text === "number" ? String(text).length : 4) * size * .6;
-	const left = x - width * {
-		start: 0,
-		middle: .5,
-		end: 1
-	}[anchor];
+function fit(ticks, normal, row) {
+	if (clear(ticks, 1) || slide(ticks, normal)) return 1;
+	ticks.forEach((t, i) => t.shift = i % 2 ? row : ZERO);
+	if (clear(ticks, 2)) return 2;
+	ticks.forEach((t) => t.shift = ZERO);
+	let stride = 2;
+	while (stride < ticks.length && !clear(ticks, stride, stride)) stride *= 2;
+	ticks.forEach((t, i) => t.opacity = i % stride ? 0 : 1);
+	return 1;
+}
+/** Whether every label from every `every`-th keeps `PAD` apart from the one `step` after it. */
+function clear(ticks, step, every = 1) {
+	return ticks.every((t, i) => i % every > 0 || i + step >= ticks.length || apart(t, ticks[i + step]) > 1.999999);
+}
+/**
+* Slides the labels of an edge along it, square to its `normal`, as little
+* as they can until each has the room it needs. True if that is enough and
+* no label slides further than `DODGE`; the slide grows from nothing as the
+* labels near, so it follows the camera without a jump.
+*/
+function slide(ticks, normal) {
+	const t = {
+		x: -normal.y,
+		y: normal.x
+	};
+	const along = ({ at }) => at.x * t.x + at.y * t.y;
+	const line = [...ticks].sort((a, b) => along(a) - along(b));
+	const gaps = line.slice(1).map((b, i) => room(line[i], b, normal, t));
+	const placed = dodge(line.map(along), gaps);
+	line.forEach((label, i) => {
+		const d = placed[i] - along(label);
+		label.shift = {
+			x: t.x * d,
+			y: t.y * d
+		};
+	});
+	return line.every((label, i) => Math.abs(placed[i] - along(label)) <= DODGE) && clear(ticks, 1);
+}
+/**
+* How far along `t` the label `b` has to stand from `a`, which comes before
+* it there, for their boxes to keep `PAD` apart, as far as they stand apart
+* along `normal`, square to `t`.
+*/
+function room(a, b, normal, t) {
+	const off = (b.at.x - a.at.x) * normal.x + (b.at.y - a.at.y) * normal.y;
+	const x = ((a.w + b.w) / 2 + PAD - off * normal.x * Math.sign(t.x)) / Math.abs(t.x);
+	const y = ((a.h + b.h) / 2 + PAD - off * normal.y * Math.sign(t.y)) / Math.abs(t.y);
+	return Math.min(x, y);
+}
+/**
+* Places points on a line in their order, `gaps[i]` at least between the
+* i-th and the next, and moves them as little as it can: points that would
+* come too close move as one block, centred on the places they want.
+*/
+function dodge(want, gaps) {
+	const blocks = [];
+	want.forEach((at, start) => {
+		let block = {
+			start,
+			offsets: [0],
+			at
+		};
+		let last = blocks.at(-1);
+		while (last && last.at + last.offsets.at(-1) + gaps[block.start - 1] > block.at) {
+			blocks.pop();
+			const base = last.offsets.at(-1) + gaps[block.start - 1];
+			const offsets = [...last.offsets, ...block.offsets.map((o) => o + base)];
+			const first = last.start;
+			block = {
+				start: first,
+				offsets,
+				at: offsets.reduce((sum, o, k) => sum + want[first + k] - o, 0) / offsets.length
+			};
+			last = blocks.at(-1);
+		}
+		blocks.push(block);
+	});
+	return blocks.flatMap((block) => block.offsets.map((o) => block.at + o));
+}
+/**
+* How much of a label shows beside the labels placed before it: it fades as
+* it nears a label of another axis, by as much as that one shows. As this
+* follows the geometry, the label fades as smoothly as the camera turns.
+*/
+function shows(label, placed) {
+	return placed.reduce((opacity, p) => p.axis === label.axis ? opacity : Math.min(opacity, 1 - (1 - clamp(0, 1, apart(label, p) / FADE)) * p.opacity), label.opacity);
+}
+/** The space between the boxes of two labels, negative where they overlap. */
+function apart(a, b) {
+	const dx = Math.abs(a.at.x + a.shift.x - b.at.x - b.shift.x) - (a.w + b.w) / 2;
+	const dy = Math.abs(a.at.y + a.shift.y - b.at.y - b.shift.y) - (a.h + b.h) / 2;
+	return Math.max(dx, dy);
+}
+/**
+* The centre of a box `w`×`h` that lies `gap` from `at` towards `toward`, a
+* unit vector. As the vector turns, the box slides round `at` and keeps the
+* gap, where an anchor that switches from start to end would jump.
+*/
+function beside(at, toward, w, h, gap) {
+	const out = gap + (Math.abs(toward.x) * w + Math.abs(toward.y) * h) / 2;
 	return {
-		left,
-		right: left + width,
-		top: y - size / 2,
-		bottom: y + size / 2
+		x: at.x + toward.x * out,
+		y: at.y + toward.y * out
 	};
 }
+/** The width of a label at the font size `size`, guessed from its text, as the browser lays it out only after the render. */
+function textWidth(text, size) {
+	return (typeof text === "string" || typeof text === "number" ? String(text).length : 4) * size * .6;
+}
 /**
-* The labels of one axis, dimmed while the camera turns. When the axis jumps
-* to another edge of the box, its key changes, so they mount anew and fade in
-* there.
+* A line of the axes, in the ink of the kind it is: the line of an axis along
+* its edge, or the mark of one of its ticks. Its place follows the camera at
+* once; a change of edge fades it in a transition.
 */
-function AxisEdge3D({ ticks, title }) {
-	return /* @__PURE__ */ jsxs("g", {
-		className: "transition-opacity duration-300 starting:opacity-0 in-data-[orbiting=true]:opacity-50",
-		children: [ticks.map(({ x, y, anchor, text, hidden }, i) => /* @__PURE__ */ jsx("text", {
-			x,
-			y,
-			textAnchor: anchor,
-			dominantBaseline: "central",
-			className: cn("fill-muted-foreground text-[10px] transition-opacity", hidden && "opacity-0"),
-			children: text
-		}, i)), title && /* @__PURE__ */ jsx("text", {
-			x: title.x,
-			y: title.y,
-			textAnchor: title.anchor,
-			dominantBaseline: "central",
-			className: "fill-foreground font-medium",
-			children: title.text
-		})]
+function AxisLine3D({ line: { from, to, opacity }, ink, width }) {
+	return /* @__PURE__ */ jsx("line", {
+		x1: from.x,
+		y1: from.y,
+		x2: to.x,
+		y2: to.y,
+		strokeWidth: width,
+		style: { opacity: Math.round(opacity * 100) / 100 },
+		className: cn("transition-opacity duration-300 ease-out motion-reduce:transition-none", ink)
+	});
+}
+/**
+* A label of the chart box. Its place follows the camera at once; a change
+* of edge, of row or of the labels that fit fades and moves it in a transition.
+*/
+function AxisLabel3D({ label: { at, shift, opacity, text, title } }) {
+	return /* @__PURE__ */ jsx("text", {
+		x: at.x,
+		y: at.y,
+		textAnchor: "middle",
+		dominantBaseline: "central",
+		style: {
+			opacity: Math.round(opacity * 100) / 100,
+			translate: `${shift.x}px ${shift.y}px`
+		},
+		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
 	});
 }
 /** A nice axis from `lo` to `hi` with about `count` ticks. */
@@ -701,6 +1650,17 @@ function axis(lo, hi, count = 5) {
 		ticks: ticks(start, stop, count)
 	};
 }
+/**
+* The axis `spec` with its domain widened by half a `cell` on each side, so
+* the box keeps room between the outermost data and its walls. The ticks stay
+* where they were, on the data.
+*/
+function pad(spec, cell) {
+	return {
+		domain: [spec.domain[0] - cell / 2, spec.domain[1] + cell / 2],
+		ticks: spec.ticks
+	};
+}
 /** The linear map from `domain` to `range`. */
 function linear([d0, d1], [r0, r1]) {
 	return (value) => r0 + (value - d0) / (d1 - d0 || 1) * (r1 - r0);
@@ -713,6 +1673,13 @@ function worldBox(spec, depth = 1) {
 		z: linear(spec.z.domain, [-depth, depth])
 	};
 }
+/**
+* Hands the projection its accessors into the world box, so every chart maps
+* its shapes onto the screen the same way.
+*/
+function intoWorld(projection, world) {
+	return projection.x((p) => world.x(p.x)).y((p) => world.y(p.y)).z((p) => world.z(p.z));
+}
 const LIGHT = {
 	x: -.4,
 	y: -.8,
@@ -729,6 +1696,16 @@ 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` 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) {
 	const sum = points.reduce((s, p) => ({
@@ -761,62 +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 cells = data.flatMap((d, i) => series.map((key, j) => ({
-		i,
-		j,
-		key,
-		value: Number(d[key]) || 0
-	})));
-	const { spec, world, size } = barBox(data.length, series.length, cells.map((cell) => cell.value), barSize);
-	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 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
+	}))).map((bar) => Object.assign(bar, { bottom: bar.faces.find((f) => f.face === "bottom") })).sort((a, b) => sort(a.bottom, b.bottom));
+}
+/**
+* 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 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,
-* 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: {
-			domain: [-.5, entries - .5],
-			ticks: index(entries)
+	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)
 		},
-		y: axis(Math.min(0, ...values), Math.max(0, ...values)),
-		z: {
-			domain: [-.5, series - .5],
-			ticks: index(series)
-		}
-	};
-	const depth = Math.min(1, Math.max(.25, series / entries));
-	const size = {
-		width: 2 / entries * barSize,
-		depth: 2 * depth / series * barSize
+		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,
-		world: worldBox(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
 	};
 }
 /**
@@ -834,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,
@@ -844,64 +1858,136 @@ 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 read = (d, axis) => Number(d[fields[axis]]);
+	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 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,
+		format,
+		titles
+	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
+}
+/** The axes that hold every entry of `data`, a nice one per field. */
+function pointAxes(data, fields) {
 	const range = (a) => {
-		const [lo = 0, hi = 0] = extent(data, (d) => read(d, a));
+		const [lo = 0, hi = 0] = extent(data, (d) => Number(d[fields[a]]));
 		return axis(lo, hi);
 	};
-	const spec = {
+	return {
 		x: range("x"),
 		y: range("y"),
 		z: range("z")
 	};
-	const world = worldBox(spec);
-	const points = points3D().camera(camera).x(({ d }) => world.x(read(d, "x"))).y(({ d }) => world.y(read(d, "y"))).z(({ d }) => world.z(read(d, "z")));
+}
+/**
+* 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];
-	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.d, a)
-				}))
-			}
+	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
+		}];
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
-		spec,
-		world,
-		format,
-		titles
-	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
+	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}${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
 /**
@@ -913,41 +1999,41 @@ function ScatterChart3D({ data, x, y, z, series, radius = 4, format, titles }) {
 function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
 	const { config, camera } = useChart3D();
 	const [low, high = low] = colors ?? Object.keys(config);
+	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];
 	const [z0, z1] = domain.z ?? [0, rows - 1];
-	const [lo = 0, hi = 0] = extent(data.flat());
-	const spec = {
-		x: axis(x0, x1),
-		y: axis(lo, hi),
-		z: axis(z0, z1)
+	const cell = {
+		x: (x1 - x0) / Math.max(1, columns - 1),
+		z: (z1 - z0) / Math.max(1, rows - 1)
 	};
+	const [lo = 0, hi = 0] = extent(heights.flat());
+	const spec = useTweenAxes({
+		x: domain.x ? axis(x0, x1) : pad(axis(x0, x1), cell.x),
+		y: axis(floor, peak),
+		z: domain.z ? axis(z0, z1) : pad(axis(z0, z1), cell.z)
+	});
 	const world = worldBox(spec);
 	const toX = linear([0, columns - 1], [x0, x1]);
 	const toZ = linear([0, rows - 1], [z0, z1]);
-	const grid = gridPlanes3D().camera(camera).rows(Math.max(1, columns)).x((p) => world.x(p.x)).y((p) => world.y(p.y)).z((p) => world.z(p.z));
-	const points = data.flatMap((row, r) => row.map((y, c) => ({
+	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,
@@ -955,297 +2041,48 @@ function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
 		titles
 	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
 }
-// registry/new-york/ui/sankey-chart-3d.tsx
-const DEPTH = .4;
-const RIBBON = .7;
-const SEGMENTS = 16;
 /**
-* 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 { nodes, columns, ky } = sankeyLayout(data, 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)] : []);
-	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 marks of a piece, each with its tooltip: 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);
-		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
 			}]
-		});
-	}
-	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]
-	});
-}
-/** 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);
-	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 flows = data.filter((d) => d.value > 0).map((d, i) => ({
-		key: String(i),
-		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
-			};
-			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;
-		}
-	}
-}
-/**
-* 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 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 depth = node.flow ? RIBBON * DEPTH : DEPTH;
-		const box = slab(band - half, middle(node), band + half, middle(node), node.y1 - node.y0, depth);
-		return [Object.assign(box, own), ...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. Every hop
-* between the same two columns has the same slices.
-*/
-function hopPieces(hop, x0, x1, ky, share) {
-	const x = (k) => x0 + (x1 - x0) * k / SEGMENTS;
-	const y = (k) => {
-		const t = k / SEGMENTS;
-		return hop.y0 + (hop.y1 - hop.y0) * t * t * (3 - 2 * t);
-	};
-	return Array.from({ length: SEGMENTS }, (_, k) => {
-		const band = (x(k) + x(k + 1)) / 2;
-		return Object.assign(slab(x(k), y(k), x(k + 1), y(k + 1), hop.flow.value * ky, RIBBON * DEPTH), {
-			key: `hop:${hop.flow.key}:${hop.source.column}:${k}`,
-			band,
-			flow: hop.flow,
-			t: share(hop.flow, band)
-		});
-	});
-}
-/** The corners of a slab from `x0` to `x1`, its middle at `y0` and `y1`, `height` high and `depth` deep, in the order of box(). */
-function slab(x0, y0, x1, y1, height, depth) {
-	return [depth / 2, -depth / 2].flatMap((z) => [
-		{
-			x: x0,
-			y: y0 - height / 2,
-			z
-		},
-		{
-			x: x0,
-			y: y0 + height / 2,
-			z
-		},
-		{
-			x: x1,
-			y: y1 + height / 2,
-			z
-		},
-		{
-			x: x1,
-			y: y1 - height / 2,
-			z
-		}
-	]);
-}
-/**
-* The pieces in the order to paint them. The slabs of the columns and of the
-* slices lie between planes x = const, so they paint from the slab farthest
-* from the eye to the nearest, which is exact; within a slab, where the pieces
-* lie one above the other, by depth.
-*/
-function depthSort(pieces, camera) {
-	const { x: vx } = camera.viewDirection();
-	const eye = vx * camera.perspective();
-	const far = (x) => Number.isFinite(eye) ? Math.abs(x - eye) : -x * Math.sign(vx);
-	return pieces.sort((a, b) => far(b.band) - far(a.band) || 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.
+* 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) {
-	const side = (name) => center(faces.find((face) => face.face === name));
-	const at = side(outer);
-	const away = Math.sign(at.x - side(outer === "left" ? "right" : "left").x) || (outer === "left" ? -1 : 1);
-	return {
-		key,
-		at: {
-			x: at.x + 8 * away,
-			y: at.y
-		},
-		text,
-		anchor: away < 0 ? "end" : "start"
-	};
+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, linear, shade, useChart3D, 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