@niekes/charts-3d 0.3.0 → 0.4.0

package/dist/index.js

@@ -26,108 +26,222 @@ 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 SHORTCUTS = {
+	dragRotate: {
+		label: "Rotate",
+		hint: ["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: ["Space", "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: ["Ctrl", "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(" ");
+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, a gesture in 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));
+	}
+	return [...rows].map(([label, groups]) => ({
+		label,
+		groups: [...groups.values()]
+	}));
+}
+/**
+* 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 +259,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 +273,10 @@ function ChartContainer3D({ id, config, defaultView = {
 						width,
 						height
 					}),
+					/* @__PURE__ */ jsx(ChartGizmo3D, {
+						camera,
+						corner: gizmo
+					}),
 					/* @__PURE__ */ jsx(ChartTooltip3D, {
 						tooltip,
 						width,
@@ -170,27 +284,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") && "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")
+	};
+}
+/**
 * 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 { 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 +343,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 +365,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,30 +377,183 @@ 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 goes
+* at once. 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. */
+function tweenNumbers({ from, to, t }, enter) {
+	const s = t * t * (3 - 2 * t);
+	return Object.fromEntries(Object.entries(to).map(([k, end]) => {
+		const start = from[k] ?? enter ?? end;
+		return [k, t >= 1 ? end : start + (end - 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.
+*/
+function useTweenAxes(spec) {
+	const ends = useTween(Object.fromEntries([
+		"x",
+		"y",
+		"z"
+	].flatMap((a) => [[`${a}0`, spec[a].domain[0]], [`${a}1`, spec[a].domain[spec[a].domain.length - 1]]])));
+	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);
+		return {
+			domain: [lo, hi],
+			ticks: spec[a].ticks.filter(inside)
+		};
+	};
+	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 Space 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 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 { space, ...keyHandlers } = useKeys(keys, step, setOrbiting);
 	const release = () => {
 		drag.current = null;
 		setOrbiting(false);
 	};
 	return {
 		view,
-		orbiting,
 		handlers: {
 			ref,
 			onPointerDown: (e) => {
-				drag.current = {
+				if (space.current || keys.on("dragRotate")) drag.current = {
 					x: e.clientX,
 					y: e.clientY,
 					moved: false
@@ -290,46 +586,68 @@ function useOrbit(defaultView, width, onDragStart, onHover) {
 			},
 			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
 		}
 	};
 }
 /**
+* 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.
+*/
+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;
+		setOrbiting(Boolean(step.yaw || step.tilt));
+		move(step);
+	};
+	const onKeyUp = (e) => {
+		if (e.key === " ") space.current = false;
+		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. The wheel alone still scrolls the page.
+* is also how a trackpad pinches, if `on`. The wheel alone still scrolls the page.
 */
-function useWheelZoom(setView) {
+function useWheelZoom(jump, on) {
 	return React.useCallback((svg) => {
+		if (!on) return;
 		const onWheel = (e) => {
 			if (!e.ctrlKey && !e.metaKey) return;
 			e.preventDefault();
-			setView((v) => moved(v, { zoom: 2 ** (-e.deltaY / 200) }, v));
+			jump((v) => moved(v, { zoom: 2 ** (-e.deltaY / 200) }, v));
 		};
 		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. `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.
 */
-function useHover(scene, width, height, setTooltip) {
+function useHover(scene, width, height, setTooltip, focus) {
 	const hovered = React.useRef(void 0);
 	const show = (mark) => {
+		if (mark?.groups) focus.set(mark.groups);
 		if (mark?.key === hovered.current?.key) return;
 		hovered.current = mark;
 		setTooltip(mark?.tooltip ?? null);
@@ -343,9 +661,45 @@ function useHover(scene, width, height, setTooltip) {
 			};
 			show(hit(scene.current, at));
 		},
-		leave: () => show(void 0)
+		hide: () => show(void 0),
+		leave: () => {
+			show(void 0);
+			focus.set(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 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) {
+	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);
+}
 /** 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) {
@@ -448,18 +802,88 @@ function ChartCanvas3D({ renderer, canvas, width, height }) {
 		style: { aspectRatio: `${width} / ${height}` }
 	});
 }
+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 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) ? {
+		...mark,
+		fill: fade(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", {
+	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,
@@ -479,19 +903,23 @@ function Marks3D({ marks }) {
 * 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(({ 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: cn("fill-foreground stroke-background text-[10px] font-medium", fades(label) && "opacity-25"),
+				children: label.text
+			}, label.key);
+		})
 	});
 }
 function ChartStyle({ id, config }) {
@@ -537,46 +965,64 @@ 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]);
+	if (!rows.length) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		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",
 			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", {
+		}), open && /* @__PURE__ */ jsx(ChartShortcutList3D, {
+			id,
+			rows
+		})]
+	});
+}
+/** The list of the shortcut panel: per row, its groups of keys and its label. */
+function ChartShortcutList3D({ id, rows }) {
+	return /* @__PURE__ */ jsx("dl", {
+		id,
+		"data-slot": "chart-3d-shortcuts",
+		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: hint.map((key) => /* @__PURE__ */ jsx("kbd", {
+				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
-				}, key))
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground",
-				children: label
-			})] }, i))
-		})]
+				}, j))
+			}, i))
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "text-muted-foreground",
+			children: label
+		})] }, label))
 	});
 }
 function ChartLegend3D({ config }) {
@@ -593,104 +1039,274 @@ 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), format, titles);
 	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__ */ jsx("path", {
+				d: box.draw(wall),
+				className: "fill-muted/40 stroke-border",
+				strokeWidth: .75
+			}, `${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 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 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 axisLabels(edge, format, title) {
-	const { normal: n } = edge;
+function labelAxes(edges, format, titles) {
+	const axes = edges.filter((edge) => edge.length).map((edge) => edgeLabels(edge, 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 ?? [])]) {
+		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.
+*/
+function edgeLabels(edge, format, title) {
+	const { axis, normal: n, chosen } = edge;
+	const label = (key, at, text, h, gap) => {
+		const w = textWidth(text, h);
+		return {
+			key,
+			axis,
+			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));
+	const depth = Math.max(...ticks.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 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
-	});
 	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;
+	if (!chosen) for (const l of [...ticks, ...head ? [head] : []]) l.opacity = 0;
 	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-200 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-200 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 +1317,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 +1340,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 +1363,10 @@ 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))`;
+}
 /** The mean of the projected points, where a tooltip points at. */
 function center(points) {
 	const sum = points.reduce((s, p) => ({
@@ -761,13 +1399,15 @@ 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 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,
@@ -791,32 +1431,48 @@ function BarChart3D({ data, index, keys, barSize = .6, format = {}, titles }) {
 		value: bar.value
 	})) })] });
 }
+/** 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,
+		key,
+		value: values[`${i}-${key}`]
+	})));
+}
+/**
+* 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.
+*/
+function barValues(data, series) {
+	return Object.fromEntries(data.flatMap((d, i) => series.map((key) => [`${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, and the
+* size of a bar, the share `barSize` of its cell.
 */
 function barBox(entries, series, values, barSize) {
 	const index = (length) => Array.from({ length }, (_, i) => i);
 	const spec = {
-		x: {
+		x: pad({
 			domain: [-.5, entries - .5],
 			ticks: index(entries)
-		},
+		}, 1),
 		y: axis(Math.min(0, ...values), Math.max(0, ...values)),
-		z: {
+		z: pad({
 			domain: [-.5, series - .5],
 			ticks: index(series)
-		}
+		}, 1)
 	};
 	const depth = Math.min(1, Math.max(.25, series / entries));
-	const size = {
-		width: 2 / entries * barSize,
-		depth: 2 * depth / series * barSize
-	};
 	return {
 		spec,
-		world: worldBox(spec, depth),
-		size
+		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
+		}
 	};
 }
 /**
@@ -858,18 +1514,11 @@ function ScatterChart3D({ data, x, y, z, series, radius = 4, format, titles }) {
 		y,
 		z
 	};
-	const read = (d, axis) => Number(d[fields[axis]]);
-	const range = (a) => {
-		const [lo = 0, hi = 0] = extent(data, (d) => read(d, a));
-		return axis(lo, hi);
-	};
-	const spec = {
-		x: range("x"),
-		y: range("y"),
-		z: range("z")
-	};
+	const values = useTween(pointValues(data, fields));
+	const read = (i, axis) => values[`${axis}${i}`];
+	const spec = useTweenAxes(pointAxes(data, fields));
 	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")));
+	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,
@@ -891,7 +1540,7 @@ function ScatterChart3D({ data, x, y, z, series, radius = 4, format, titles }) {
 					"z"
 				].map((a) => ({
 					label: titles?.[a] ?? fields[a],
-					value: read(p.d, a)
+					value: read(p.i, a)
 				}))
 			}
 		};
@@ -903,6 +1552,26 @@ function ScatterChart3D({ data, x, y, z, series, radius = 4, format, titles }) {
 		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) => Number(d[fields[a]]));
+		return axis(lo, hi);
+	};
+	return {
+		x: range("x"),
+		y: range("y"),
+		z: range("z")
+	};
+}
+/** The position of every entry, keyed by its axis and index, gliding into new data. */
+function pointValues(data, fields) {
+	return Object.fromEntries(data.flatMap((d, i) => [
+		"x",
+		"y",
+		"z"
+	].map((a) => [`${a}${i}`, Number(d[fields[a]])])));
+}
 // registry/new-york/ui/surface-chart-3d.tsx
 /**
 * A surface over a grid: `data[row][column]` is the height, the columns run
@@ -913,21 +1582,28 @@ 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 tweened = useTween(gridValues(data));
+	const heights = data.map((row, r) => row.map((_, c) => tweened[`${r}-${c}`]));
 	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 [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),
+		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, columns));
+	const points = heights.flatMap((row, r) => row.map((y, c) => ({
 		x: toX(c),
 		y,
 		z: toZ(r)
@@ -955,10 +1631,16 @@ 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
@@ -967,9 +1649,13 @@ const SEGMENTS = 16;
 */
 function SankeyChart3D({ data, nodeWidth = .2, nodePadding = .05, format = (value) => value }) {
 	const { config, camera } = useChart3D();
-	const { nodes, columns, ky } = sankeyLayout(data, nodePadding);
+	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)] : []);
+	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. */
@@ -980,13 +1666,22 @@ function style(config, node) {
 	};
 }
 /**
-* 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.
+* 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,
 			items: [{
@@ -994,7 +1689,10 @@ function pieceMarks({ key, faces, node, flow, t }, config, format) {
 				value: format(node.value),
 				color
 			}]
-		});
+		}).map((mark) => ({
+			...mark,
+			groups
+		}));
 	}
 	const source = style(config, flow.source);
 	const target = style(config, flow.target);
@@ -1010,7 +1708,10 @@ function pieceMarks({ key, faces, node, flow, t }, config, format) {
 	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) {
@@ -1018,6 +1719,7 @@ function sankeyLayout(data, nodePadding) {
 	const all = sankeyHops(nodes, flows);
 	const ky = stackColumns(all, columns, nodePadding);
 	stackHops(all, ky);
+	weaveHops(all, columns, ky);
 	return {
 		nodes: all,
 		columns,
@@ -1050,12 +1752,18 @@ function sankeyColumns(data) {
 		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
-	}));
+	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);
@@ -1086,7 +1794,8 @@ function sankeyHops(nodes, flows) {
 				source,
 				target,
 				y0: 0,
-				y1: 0
+				y1: 0,
+				z: 0
 			};
 			source.outgoing.push(hop);
 			target.incoming.push(hop);
@@ -1140,6 +1849,84 @@ function stackHops(nodes, 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.
@@ -1154,6 +1941,7 @@ function sankeyPieces(nodes, columns, ky, nodeWidth) {
 	};
 	return nodes.flatMap((node) => {
 		const band = x(node.column);
+		const y = middle(node);
 		const own = node.flow ? {
 			key: `way:${node.id}`,
 			band,
@@ -1165,87 +1953,138 @@ function sankeyPieces(nodes, columns, ky, nodeWidth) {
 			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))];
+		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. Every hop
+* 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 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);
+	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 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), {
+		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)
+			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 `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) => [
+/**
+* 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: x0,
-			y: y0 - height / 2,
-			z
+			x: from.x,
+			y: from.y - height / 2,
+			z: from.z + side * from.d / 2
 		},
 		{
-			x: x0,
-			y: y0 + height / 2,
-			z
+			x: from.x,
+			y: from.y + height / 2,
+			z: from.z + side * from.d / 2
 		},
 		{
-			x: x1,
-			y: y1 + height / 2,
-			z
+			x: to.x,
+			y: to.y + height / 2,
+			z: to.z + side * to.d / 2
 		},
 		{
-			x: x1,
-			y: y1 - height / 2,
-			z
+			x: to.x,
+			y: to.y - height / 2,
+			z: to.z + side * to.d / 2
 		}
 	]);
 }
 /**
-* 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.
+* 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 { 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));
+	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 label of a node beside its `outer` face, pushed away from the other side,
-* so that it stays outside whichever way the camera turns.
+* 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.
 */
-function nodeLabel(key, faces, outer, text) {
+function nodeLabel(key, faces, outer, text, groups) {
 	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);
+	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 * away,
-			y: at.y
+			x: at.x + 8 * toward.x,
+			y: at.y + 8 * toward.y
 		},
 		text,
-		anchor: away < 0 ? "end" : "start"
+		toward,
+		groups
 	};
 }
-export { Axes3D, BarChart3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, SankeyChart3D, ScatterChart3D, SurfaceChart3D, axis, center, cubeMarks, linear, shade, useChart3D, worldBox };
+export { Axes3D, BarChart3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, SankeyChart3D, ScatterChart3D, SurfaceChart3D, axis, center, cubeMarks, intoWorld, linear, pad, shade, useChart3D, useTween, useTweenAxes, worldBox };
 
 //# sourceMappingURL=index.js.map