@niekes/charts-3d 0.0.0-stage → 0.3.0

package/dist/index.js

@@ -0,0 +1,1251 @@
+"use client"
+import * as React from "react";
+import { extent, nice, ticks } from "d3-array";
+import { axes3D, box, camera3D, cubes3D, gridPlanes3D, normal, points3D, sort } from "d3-3d";
+import { KeyboardIcon } from "lucide-react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+// registry/new-york/ui/chart-3d.tsx
+const THEMES = {
+	light: "",
+	dark: ".dark"
+};
+const Chart3DContext = React.createContext(null);
+function useChart3D() {
+	const context = React.useContext(Chart3DContext);
+	if (!context) throw new Error("useChart3D must be used within a <ChartContainer3D />");
+	return context;
+}
+const DRAG = Math.PI / 230;
+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"
+	},
+	{
+		hint: [
+			"←",
+			"→",
+			"↑",
+			"↓"
+		],
+		label: "Rotate",
+		keys: {
+			ArrowLeft: { yaw: -KEY_STEP },
+			ArrowRight: { yaw: KEY_STEP },
+			ArrowUp: { tilt: -KEY_STEP },
+			ArrowDown: { tilt: KEY_STEP }
+		}
+	},
+	{
+		hint: ["Space", "Drag"],
+		label: "Pan"
+	},
+	{
+		hint: [
+			"Shift",
+			"←",
+			"→",
+			"↑",
+			"↓"
+		],
+		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: ["+", "−"],
+		label: "Zoom",
+		keys: {
+			"+": { zoom: ZOOM_STEP },
+			"=": { zoom: ZOOM_STEP },
+			"-": { zoom: 1 / ZOOM_STEP }
+		}
+	},
+	{
+		hint: ["Ctrl", "Scroll"],
+		label: "Zoom"
+	},
+	{
+		hint: ["0"],
+		label: "Reset",
+		keys: { "0": { reset: true } }
+	},
+	{
+		hint: ["Double-click"],
+		label: "Reset"
+	},
+	{
+		hint: ["?"],
+		label: "Shortcuts"
+	}
+];
+const KEYS = Object.assign({}, ...SHORTCUTS.map((s) => s.keys));
+const KEY_SHORTCUTS = Object.keys(KEYS).map((k) => k === "+" ? "Plus" : k).join(" ");
+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 }) {
+	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 camera = useCamera(view, width, height);
+	const context = React.useMemo(() => ({
+		config,
+		camera,
+		renderer,
+		scene,
+		repaint
+	}), [
+		config,
+		camera,
+		renderer,
+		repaint
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-3d",
+		"data-chart": chartId,
+		className: cn("relative w-full text-xs", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ChartStyle, {
+				id: chartId,
+				config
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative rounded-lg has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50",
+				children: [
+					/* @__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,
+						onPointerLeave: leave,
+						...handlers,
+						children: /* @__PURE__ */ jsx(Chart3DContext.Provider, {
+							value: context,
+							children
+						})
+					}),
+					/* @__PURE__ */ jsx(ChartCanvas3D, {
+						renderer,
+						canvas,
+						width,
+						height
+					}),
+					/* @__PURE__ */ jsx(ChartTooltip3D, {
+						tooltip,
+						width,
+						height
+					})
+				]
+			}),
+			shortcuts && /* @__PURE__ */ jsx(ChartShortcuts3D, {}),
+			legend && /* @__PURE__ */ jsx(ChartLegend3D, { config })
+		]
+	});
+}
+/**
+* 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) {
+	const scene = React.useRef([]);
+	const renderer = useRenderer(requested);
+	const { canvas, repaint } = useCanvas(scene, width);
+	const { hover, leave } = useHover(scene, width, height, setTooltip);
+	return {
+		scene,
+		renderer,
+		canvas,
+		repaint,
+		hover,
+		leave
+	};
+}
+/** The camera of a view. The shapes of the chart hang on it, so a new view re-projects them all. */
+function useCamera(view, width, height) {
+	return React.useMemo(() => camera3D().origin({
+		x: width / 2 + (view.pan?.x ?? 0),
+		y: height / 2 + (view.pan?.y ?? 0)
+	}).scale(Math.min(width, height) * .3 * (view.zoom ?? 1)).perspective(view.perspective ?? Infinity).rotateY(view.yaw).rotateX(-view.tilt), [
+		view,
+		width,
+		height
+	]);
+}
+/** `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;
+	const step = {
+		yaw: 0,
+		tilt: 0,
+		zoom: 1,
+		pan: {
+			x: 0,
+			y: 0
+		},
+		...move
+	};
+	const pan = view.pan ?? {
+		x: 0,
+		y: 0
+	};
+	const clamp = (lo, hi, value) => Math.max(lo, Math.min(hi, value));
+	return {
+		...view,
+		yaw: view.yaw + step.yaw,
+		tilt: clamp(-Math.PI / 2, Math.PI / 2, view.tilt + step.tilt),
+		zoom: clamp(.25, 8, (view.zoom ?? 1) * step.zoom),
+		pan: {
+			x: pan.x + step.pan.x,
+			y: pan.y + step.pan.y
+		}
+	};
+}
+/**
+* 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.
+*/
+function useOrbit(defaultView, width, onDragStart, onHover) {
+	const [view, setView] = React.useState(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 release = () => {
+		drag.current = null;
+		setOrbiting(false);
+	};
+	return {
+		view,
+		orbiting,
+		handlers: {
+			ref,
+			onPointerDown: (e) => {
+				drag.current = {
+					x: e.clientX,
+					y: e.clientY,
+					moved: false
+				};
+			},
+			onPointerMove: (e) => {
+				const d = drag.current;
+				if (!d) return onHover(e);
+				const dx = e.clientX - d.x;
+				const dy = e.clientY - d.y;
+				if (!d.moved && Math.hypot(dx, dy) < CLICK_DISTANCE) return;
+				if (!d.moved) {
+					e.currentTarget.setPointerCapture(e.pointerId);
+					onDragStart();
+				}
+				drag.current = {
+					x: e.clientX,
+					y: e.clientY,
+					moved: true
+				};
+				const k = width / e.currentTarget.getBoundingClientRect().width;
+				setOrbiting(!space.current);
+				move(space.current ? { pan: {
+					x: dx * k,
+					y: dy * k
+				} } : {
+					yaw: dx * DRAG,
+					tilt: dy * DRAG
+				});
+			},
+			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);
+			}
+		}
+	};
+}
+/**
+* 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.
+*/
+function useWheelZoom(setView) {
+	return React.useCallback((svg) => {
+		const onWheel = (e) => {
+			if (!e.ctrlKey && !e.metaKey) return;
+			e.preventDefault();
+			setView((v) => moved(v, { zoom: 2 ** (-e.deltaY / 200) }, v));
+		};
+		svg?.addEventListener("wheel", onWheel, { passive: false });
+		return () => svg?.removeEventListener("wheel", onWheel);
+	}, [setView]);
+}
+/**
+* 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.
+*/
+function useHover(scene, width, height, setTooltip) {
+	const hovered = React.useRef(void 0);
+	const show = (mark) => {
+		if (mark?.key === hovered.current?.key) return;
+		hovered.current = mark;
+		setTooltip(mark?.tooltip ?? null);
+	};
+	return {
+		hover: (e) => {
+			const rect = e.currentTarget.getBoundingClientRect();
+			const at = {
+				x: (e.clientX - rect.left) / rect.width * width,
+				y: (e.clientY - rect.top) / rect.height * height
+			};
+			show(hit(scene.current, at));
+		},
+		leave: () => show(void 0)
+	};
+}
+/** 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) {
+		const { points, r } = marks[i];
+		if (r === void 0 ? inside(points, at) : Math.hypot(points[0].x - at.x, points[0].y - at.y) <= r) return marks[i];
+	}
+}
+/** Whether `at` lies inside `polygon`: a ray from it crosses an odd number of its edges. */
+function inside(polygon, at) {
+	let odd = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i, i += 1) {
+		const a = polygon[i];
+		const b = polygon[j];
+		if (a.y > at.y !== b.y > at.y && at.x < (b.x - a.x) * (at.y - a.y) / (b.y - a.y) + a.x) odd = !odd;
+	}
+	return odd;
+}
+/**
+* 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.
+*/
+function useRenderer(requested) {
+	const [renderer, setRenderer] = React.useState("svg");
+	React.useEffect(() => {
+		const canvas = requested === "canvas" && document.createElement("canvas").getContext("2d");
+		setRenderer(canvas ? "canvas" : "svg");
+	}, [requested]);
+	return renderer;
+}
+/**
+* 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.
+*/
+function useCanvas(scene, width) {
+	const element = React.useRef(null);
+	const colors = React.useRef(/* @__PURE__ */ new Map());
+	const repaint = React.useCallback(() => {
+		const canvas = element.current;
+		if (!canvas) return;
+		paint(canvas, scene.current, width, (css) => {
+			let color = colors.current.get(css);
+			if (color === void 0) {
+				canvas.style.color = css;
+				color = getComputedStyle(canvas).color;
+				colors.current.set(css, color);
+			}
+			return color;
+		});
+	}, [scene, width]);
+	return {
+		canvas: React.useCallback((node) => {
+			element.current = node;
+			repaint();
+			const resize = new ResizeObserver(repaint);
+			resize.observe(node);
+			const theme = new MutationObserver(() => {
+				colors.current.clear();
+				repaint();
+			});
+			theme.observe(document.documentElement, { attributeFilter: ["class", "style"] });
+			return () => {
+				element.current = null;
+				resize.disconnect();
+				theme.disconnect();
+			};
+		}, [repaint]),
+		repaint
+	};
+}
+/** Paints `marks` on `canvas`, from the view box of `width` to the pixels of the canvas. */
+function paint(canvas, marks, width, color) {
+	canvas.width = Math.round(canvas.clientWidth * devicePixelRatio);
+	canvas.height = Math.round(canvas.clientHeight * devicePixelRatio);
+	const ctx = canvas.getContext("2d");
+	const scale = canvas.width / width;
+	ctx.setTransform(scale, 0, 0, scale, 0, 0);
+	ctx.lineJoin = "round";
+	for (const { points, r, fill, stroke } of marks) {
+		ctx.beginPath();
+		if (r === void 0) {
+			for (const p of points) ctx.lineTo(p.x, p.y);
+			ctx.closePath();
+		} 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;
+		if (!outline) continue;
+		ctx.strokeStyle = color(outline);
+		ctx.lineWidth = r === void 0 ? .5 : 1;
+		ctx.stroke();
+	}
+}
+/** 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;
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvas,
+		className: "pointer-events-none absolute top-0 left-0 w-full mask-y-from-96%",
+		style: { aspectRatio: `${width} / ${height}` }
+	});
+}
+/**
+* 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();
+	React.useLayoutEffect(() => {
+		scene.current = marks;
+		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));
+}
+/**
+* The labels of the marks of a chart, ringed by the background so that they
+* read on the marks. Like the labels of the box, they are SVG with every renderer.
+*/
+function Labels3D({ labels }) {
+	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))
+	});
+}
+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]) => `
+${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") } });
+}
+function ChartTooltip3D({ tooltip, width, height }) {
+	if (!tooltip) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		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}%`,
+			top: `${tooltip.at.y / height * 100}%`
+		},
+		children: [tooltip.title && /* @__PURE__ */ jsx("div", {
+			className: "font-medium",
+			children: tooltip.title
+		}), tooltip.items.map((item, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				item.color && /* @__PURE__ */ jsx("span", {
+					className: "size-2.5 shrink-0 rounded-[2px]",
+					style: { background: item.color }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: item.label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ml-auto font-mono font-medium text-foreground tabular-nums",
+					children: typeof item.value === "number" ? item.value.toLocaleString() : item.value
+				})
+			]
+		}, i))]
+	});
+}
+/**
+* A button in the corner of the chart that lists `SHORTCUTS`. `?` on the
+* chart opens and closes the list, Escape closes it.
+*/
+function ChartShortcuts3D() {
+	const [open, setOpen] = React.useState(false);
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		const chart = ref.current?.parentElement;
+		const onKeyDown = (e) => {
+			if (e.key === "?") setOpen((o) => !o);
+			if (e.key === "Escape") setOpen(false);
+		};
+		chart?.addEventListener("keydown", onKeyDown);
+		return () => chart?.removeEventListener("keydown", onKeyDown);
+	}, []);
+	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",
+			"aria-expanded": open,
+			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", {
+				"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))
+		})]
+	});
+}
+function ChartLegend3D({ config }) {
+	return /* @__PURE__ */ jsx("div", {
+		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",
+			children: [item.icon ? /* @__PURE__ */ jsx(item.icon, {}) : /* @__PURE__ */ jsx("span", {
+				className: "size-2 rounded-[2px]",
+				style: { background: `var(--color-${key})` }
+			}), item.label ?? key]
+		}, key))
+	});
+}
+/**
+* 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.
+*/
+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));
+	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))]
+	});
+}
+/**
+* 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.
+*/
+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
+	});
+	const middle = {
+		x: (start.x + end.x) / 2,
+		y: (start.y + end.y) / 2
+	};
+	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
+	};
+}
+/**
+* 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.
+*/
+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];
+	return {
+		left,
+		right: left + width,
+		top: y - size / 2,
+		bottom: y + size / 2
+	};
+}
+/**
+* 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.
+*/
+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
+		})]
+	});
+}
+/** A nice axis from `lo` to `hi` with about `count` ticks. */
+function axis(lo, hi, count = 5) {
+	const [start, stop] = nice(lo, lo === hi ? hi + 1 : hi, count);
+	return {
+		domain: [start, stop],
+		ticks: ticks(start, stop, count)
+	};
+}
+/** The linear map from `domain` to `range`. */
+function linear([d0, d1], [r0, r1]) {
+	return (value) => r0 + (value - d0) / (d1 - d0 || 1) * (r1 - r0);
+}
+/** The world box of `spec`: x from -1 to 1, y up from 1 to -1, z from -`depth` to `depth`. */
+function worldBox(spec, depth = 1) {
+	return {
+		x: linear(spec.x.domain, [-1, 1]),
+		y: linear(spec.y.domain, [1, -1]),
+		z: linear(spec.z.domain, [-depth, depth])
+	};
+}
+const LIGHT = {
+	x: -.4,
+	y: -.8,
+	z: .44
+};
+/**
+* `color` lit by the light from the upper left: the face that looks at it
+* keeps the color, one that turns away gets darker. A CSS color-mix, so the
+* shade follows the theme variables.
+*/
+function shade(face, color) {
+	const n = normal(face.map((p) => p.rotated));
+	const side = n.z < 0 ? -1 : 1;
+	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)`;
+}
+/** The mean of the projected points, where a tooltip points at. */
+function center(points) {
+	const sum = points.reduce((s, p) => ({
+		x: s.x + p.projected.x,
+		y: s.y + p.projected.y
+	}), {
+		x: 0,
+		y: 0
+	});
+	return {
+		x: sum.x / points.length,
+		y: sum.y / points.length
+	};
+}
+/** The marks of a cube: its faces that look at the camera, shaded in `color`, each with `tooltip` on hover. */
+function cubeMarks(id, faces, color, tooltip) {
+	return faces.filter((face) => face.ccw).map((face) => ({
+		key: `${id}-${face.face}`,
+		points: face.map((p) => p.projected),
+		fill: shade(face, color),
+		tooltip
+	}));
+}
+// registry/new-york/ui/bar-chart-3d.tsx
+/**
+* Bars on a floor: one row per entry of `data` along x, one per series
+* along z, the value as the height. The series are the keys of the chart
+* config unless `keys` names them.
+*/
+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));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
+		spec,
+		world,
+		titles,
+		format: {
+			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}`,
+		faces: bar.faces,
+		color: `var(--color-${bar.key})`,
+		title: String(data[bar.i][index]),
+		label: config[bar.key]?.label ?? bar.key,
+		value: bar.value
+	})) })] });
+}
+/**
+* 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.
+*/
+function barBox(entries, series, values, barSize) {
+	const index = (length) => Array.from({ length }, (_, i) => i);
+	const spec = {
+		x: {
+			domain: [-.5, entries - .5],
+			ticks: index(entries)
+		},
+		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
+	};
+	return {
+		spec,
+		world: worldBox(spec, depth),
+		size
+	};
+}
+/**
+* The corners of one bar, from the floor to its value, at row `x` and series
+* `z`. box() rises towards -y, so a negative bar starts at its value.
+*/
+function barCorners(world, x, z, value, size) {
+	const floor = world.y(0);
+	const top = world.y(value);
+	return box({
+		x: world.x(x),
+		y: Math.max(floor, top),
+		z: world.z(z),
+		...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 }) {
+	return cubeMarks(id, faces, color, {
+		at: center(faces.find((face) => face.face === "top")),
+		title,
+		items: [{
+			label,
+			value,
+			color
+		}]
+	});
+}
+// 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 }) {
+	const { config, camera } = useChart3D();
+	const fields = {
+		x,
+		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 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 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 /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
+		spec,
+		world,
+		format,
+		titles
+	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
+}
+// registry/new-york/ui/surface-chart-3d.tsx
+/**
+* A surface over a grid: `data[row][column]` is the height, the columns run
+* along x and the rows along z. The fill ramps from the first color of
+* `colors` at the lowest height to the second at the highest; both are keys
+* of the chart config, by default its first two.
+*/
+function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
+	const { config, camera } = useChart3D();
+	const [low, high = low] = colors ?? Object.keys(config);
+	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 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) => ({
+		x: toX(c),
+		y,
+		z: toZ(r)
+	})));
+	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
+				}]
+			}
+		};
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
+		spec,
+		world,
+		format,
+		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.
+*/
+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) {
+	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,
+			items: [{
+				label,
+				value: format(node.value),
+				color
+			}]
+		});
+	}
+	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 label of a node beside its `outer` face, pushed away from the other side,
+* so that it stays outside whichever way the camera turns.
+*/
+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"
+	};
+}
+export { Axes3D, BarChart3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, SankeyChart3D, ScatterChart3D, SurfaceChart3D, axis, center, cubeMarks, linear, shade, useChart3D, worldBox };
+
+//# sourceMappingURL=index.js.map