@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/treemap/treemap.js

@@ -0,0 +1,699 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { REVEAL, SWELL, tween } from "../lib/spring-tween.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/treemap/treemap.tsx
+/** Top level branches take chart-1 to chart-4 in order; a fifth and beyond stay neutral rather than reuse a hue. */
+const hueOf = (index) => index < 0 ? "var(--color-chart-1)" : index < 4 ? `var(--color-chart-${index + 1})` : "var(--color-foreground)";
+/** The gap between tiles, the padding of a branch, the height of a branch header, the gap to the tooltip, and the shading steps. */
+const GAP = 2;
+const PAD = 3;
+const HEADER = 22;
+const TIP = 14;
+const STEPS = 5;
+const GROUPED = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const PERCENT = new Intl.NumberFormat("en-US", {
+	style: "percent",
+	maximumFractionDigits: 1
+});
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const mix = (a, b, t) => a + (b - a) * t;
+const inset = (r, top, side) => ({
+	x: r.x + side,
+	y: r.y + top,
+	w: Math.max(0, r.w - side * 2),
+	h: Math.max(0, r.h - top - side)
+});
+function flatten(root) {
+	const flat = /* @__PURE__ */ new Map();
+	const visit = (node, depth, parent, path) => {
+		const kids = node.children ?? [];
+		let value = 0;
+		let weighted = 0;
+		let colored = 0;
+		if (kids.length) for (const kid of kids) {
+			const r = visit(kid, depth + 1, node.id, depth === 0 ? [] : [...path, node.label]);
+			value += r.value;
+			weighted += r.weighted;
+			colored += r.colored;
+		}
+		else {
+			value = Math.max(0, node.value ?? 0);
+			if (node.color !== void 0 && Number.isFinite(node.color)) {
+				weighted = node.color * value;
+				colored = value;
+			}
+		}
+		flat.set(node.id, {
+			id: node.id,
+			label: node.label,
+			value,
+			color: colored ? weighted / colored : null,
+			depth,
+			parent,
+			children: kids.map((kid) => kid.id),
+			path: depth === 0 ? [node.label] : [...path, node.label]
+		});
+		return {
+			value,
+			weighted,
+			colored
+		};
+	};
+	visit(root, 0, null, []);
+	return flat;
+}
+/** Squarified layout: rows of tiles along the short side, each row closed when adding a tile would make the worst aspect ratio worse. */
+function squarify(items, rect, out) {
+	const list = items.filter((item) => item.value > 0).sort((a, b) => b.value - a.value);
+	const total = list.reduce((sum, item) => sum + item.value, 0);
+	if (!total || rect.w <= 0 || rect.h <= 0) {
+		for (const item of items) out.set(item.id, {
+			x: rect.x,
+			y: rect.y,
+			w: 0,
+			h: 0
+		});
+		return;
+	}
+	const scale = rect.w * rect.h / total;
+	let { x, y, w, h } = rect;
+	let i = 0;
+	const worst = (row, side) => {
+		const sum = row.reduce((a, b) => a + b, 0);
+		return Math.max(side * side * Math.max(...row) / (sum * sum), sum * sum / (side * side * Math.min(...row)));
+	};
+	while (i < list.length) {
+		const side = Math.min(w, h);
+		const row = [list[i].value * scale];
+		let j = i + 1;
+		while (j < list.length) {
+			if (worst([...row, list[j].value * scale], side) > worst(row, side)) break;
+			row.push(list[j].value * scale);
+			j++;
+		}
+		const sum = row.reduce((a, b) => a + b, 0);
+		if (w >= h) {
+			const cw = sum / h;
+			let cy = y;
+			for (let k = i; k < j; k++) {
+				const th = list[k].value * scale / cw;
+				out.set(list[k].id, {
+					x,
+					y: cy,
+					w: cw,
+					h: th
+				});
+				cy += th;
+			}
+			x += cw;
+			w -= cw;
+		} else {
+			const rh = sum / w;
+			let cx = x;
+			for (let k = i; k < j; k++) {
+				const tw = list[k].value * scale / rh;
+				out.set(list[k].id, {
+					x: cx,
+					y,
+					w: tw,
+					h: rh
+				});
+				cx += tw;
+			}
+			y += rh;
+			h -= rh;
+		}
+		i = j;
+	}
+	for (const item of items) if (!out.has(item.id)) out.set(item.id, {
+		x: rect.x,
+		y: rect.y,
+		w: 0,
+		h: 0
+	});
+}
+/** Rects of every descendant when `focus` fills the view: its children fill the view, and each branch holds its own children under a header. */
+function layoutFrom(flat, focus, view) {
+	const out = /* @__PURE__ */ new Map();
+	const nest = (id, rect, top) => {
+		const node = flat.get(id);
+		if (!node.children.length) return;
+		const room = top ? rect : inset(rect, rect.h > 48 && rect.w > 64 ? HEADER : PAD, PAD);
+		const placed = /* @__PURE__ */ new Map();
+		squarify(node.children.map((child) => ({
+			id: child,
+			value: flat.get(child).value
+		})), room, placed);
+		for (const [child, r] of placed) {
+			const gapped = {
+				x: r.x + GAP / 2,
+				y: r.y + GAP / 2,
+				w: Math.max(0, r.w - GAP),
+				h: Math.max(0, r.h - GAP)
+			};
+			out.set(child, gapped);
+			nest(child, gapped, false);
+		}
+	};
+	nest(focus, view, true);
+	return out;
+}
+/** The affine map that carries rect `from` onto rect `to`, applied to `r`. */
+const carry = (r, from, to) => {
+	const sx = to.w / (from.w || 1);
+	const sy = to.h / (from.h || 1);
+	return {
+		x: to.x + (r.x - from.x) * sx,
+		y: to.y + (r.y - from.y) * sy,
+		w: r.w * sx,
+		h: r.h * sy
+	};
+};
+const Treemap = forwardRef(function Treemap({ data, label, formatValue = (value) => GROUPED.format(value), colorLabel, formatColor = (value) => GROUPED.format(value), colorDomain, focus, defaultFocus, onFocusChange, height = 420, emptyLabel = "No data yet", className }, ref) {
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const stage = useRef(null);
+	const tip = useRef(null);
+	const tiles = useRef(/* @__PURE__ */ new Map());
+	const signature = JSON.stringify(data);
+	const flat = useMemo(() => flatten(data), [signature]);
+	const root = flat.get(data.id);
+	const nodes = useMemo(() => [...flat.values()].filter((node) => node.depth > 0), [flat]);
+	const [ownFocus, setOwnFocus] = useState(defaultFocus ?? data.id);
+	const wanted = flat.get(focus ?? ownFocus);
+	const center = wanted && wanted.children.length ? wanted : root;
+	const zoomTo = (id) => {
+		if (focus === void 0) setOwnFocus(id);
+		onFocusChange?.(id);
+	};
+	const [active, setActive] = useState(null);
+	const [pointer, setPointer] = useState(null);
+	const [width, setWidth] = useState(0);
+	useIsomorphicLayoutEffect(() => {
+		const node = stage.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => setWidth(node.clientWidth));
+		observer.observe(node);
+		setWidth(node.clientWidth);
+		return () => observer.disconnect();
+	}, []);
+	const view = useMemo(() => ({
+		x: 0,
+		y: 0,
+		w: width,
+		h: height
+	}), [width, height]);
+	const target = useMemo(() => layoutFrom(flat, center.id, view), [
+		flat,
+		center.id,
+		view
+	]);
+	const levelOf = (node) => node.depth - center.depth;
+	const leaves = nodes.filter((node) => !node.children.length && node.color !== null);
+	const [lo, hi] = colorDomain ?? (leaves.length ? [Math.min(...leaves.map((node) => node.color)), Math.max(...leaves.map((node) => node.color))] : [0, 1]);
+	const colored = colorLabel !== void 0 && leaves.length > 0;
+	const shade = (value) => {
+		if (!colored || value === null) return 34;
+		const t = clamp((value - lo) / (hi - lo || 1), 0, 1);
+		return Math.round(14 + Math.round(t * 4) / 4 * 44);
+	};
+	const branchOf = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		root.children.forEach((id, index) => {
+			const walk = (at) => {
+				map.set(at, index);
+				flat.get(at)?.children.forEach(walk);
+			};
+			walk(id);
+		});
+		return map;
+	}, [flat, root]);
+	const drawn = useRef(/* @__PURE__ */ new Map());
+	const levels = useRef(/* @__PURE__ */ new Map());
+	const lastFocus = useRef(null);
+	const nodesRef = useRef(nodes);
+	useIsomorphicLayoutEffect(() => {
+		nodesRef.current = nodes;
+	});
+	const paint = useCallback(() => {
+		for (const node of nodesRef.current) {
+			const el = tiles.current.get(node.id);
+			const d = drawn.current.get(node.id);
+			if (!el) continue;
+			if (!d || d.o < .01 || d.w < .5 || d.h < .5) {
+				el.style.visibility = "hidden";
+				el.style.pointerEvents = "none";
+				continue;
+			}
+			el.style.visibility = "visible";
+			el.style.transform = `translate3d(${d.x.toFixed(2)}px, ${d.y.toFixed(2)}px, 0)`;
+			el.style.width = `${d.w.toFixed(2)}px`;
+			el.style.height = `${d.h.toFixed(2)}px`;
+			el.style.opacity = d.o.toFixed(3);
+			el.style.pointerEvents = d.o > .6 ? "auto" : "none";
+			el.dataset.level = String(levels.current.get(node.id) ?? 0);
+			el.dataset.room = d.w > 64 && d.h > 38 ? d.h > 54 ? "full" : "name" : "none";
+		}
+	}, []);
+	useIsomorphicLayoutEffect(paint);
+	const [inView, setInView] = useState(false);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setInView(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setInView(true);
+		}, { threshold: .25 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const shown = inView && width > 0;
+	useEffect(() => {
+		if (!shown) return;
+		const prev = lastFocus.current;
+		const isUnder = (id, ancestor) => {
+			for (let at = flat.get(id); at; at = at.parent ? flat.get(at.parent) : void 0) if (at.id === ancestor) return true;
+			return false;
+		};
+		const visible = (node) => {
+			const l = node.depth - center.depth;
+			return l >= 1 && l <= 2 && isUnder(node.id, center.id);
+		};
+		const nextVisible = new Set(nodes.filter(visible).map((node) => node.id));
+		const before = new Map(drawn.current);
+		const wasVisible = new Set([...before].filter(([, d]) => d.o > .5).map(([id]) => id));
+		let toOld = null;
+		let toNew = null;
+		if (prev && prev.id !== center.id && before.size) {
+			if (isUnder(center.id, prev.id)) {
+				const inOld = prev.layout.get(center.id);
+				if (inOld) {
+					toOld = (r) => carry(r, view, inOld);
+					toNew = (r) => carry(r, inOld, view);
+				}
+			} else if (isUnder(prev.id, center.id)) {
+				const inNew = target.get(prev.id);
+				if (inNew) {
+					toOld = (r) => carry(r, inNew, view);
+					toNew = (r) => carry(r, view, inNew);
+				}
+			}
+		}
+		const from = /* @__PURE__ */ new Map();
+		const to = /* @__PURE__ */ new Map();
+		const first = !before.size;
+		for (const node of nodes) {
+			const goal = target.get(node.id);
+			const now = before.get(node.id);
+			const inNext = nextVisible.has(node.id);
+			const inPrev = wasVisible.has(node.id);
+			if (inNext && goal) {
+				to.set(node.id, {
+					...goal,
+					o: 1
+				});
+				if (inPrev && now) from.set(node.id, now);
+				else if (first) from.set(node.id, {
+					x: goal.x + goal.w / 2,
+					y: goal.y + goal.h / 2,
+					w: 0,
+					h: 0,
+					o: 0
+				});
+				else from.set(node.id, {
+					...toOld ? toOld(goal) : goal,
+					o: 0
+				});
+				levels.current.set(node.id, levelOf(node));
+			} else if (inPrev && now) {
+				from.set(node.id, now);
+				to.set(node.id, {
+					...toNew ? toNew(now) : now,
+					o: 0
+				});
+			}
+		}
+		for (const node of nodes) if (!from.has(node.id)) drawn.current.set(node.id, {
+			x: 0,
+			y: 0,
+			w: 0,
+			h: 0,
+			o: 0
+		});
+		lastFocus.current = {
+			id: center.id,
+			layout: target
+		};
+		return tween(first ? SWELL : REVEAL, (t) => {
+			for (const [id, a] of from) {
+				const b = to.get(id);
+				const local = first ? clamp((t - Math.min(.3, (1 - b.w * b.h / (view.w * view.h || 1)) * .3)) / .7, 0, 1) : t;
+				drawn.current.set(id, {
+					x: mix(a.x, b.x, local),
+					y: mix(a.y, b.y, local),
+					w: mix(a.w, b.w, local),
+					h: mix(a.h, b.h, local),
+					o: mix(a.o, b.o, local)
+				});
+			}
+			paint();
+		}, () => {
+			for (const [id, d] of to) drawn.current.set(id, d);
+			paint();
+		});
+	}, [shown, target]);
+	const activeNode = active ? flat.get(active) ?? null : null;
+	const parentOf = (node) => node.parent ? flat.get(node.parent) : node;
+	const share = (node, of) => of.value ? node.value / of.value : 0;
+	const shownBefore = useRef(false);
+	useIsomorphicLayoutEffect(() => {
+		const bubble = tip.current;
+		if (!bubble || !activeNode || !width) {
+			shownBefore.current = false;
+			return;
+		}
+		const r = target.get(activeNode.id);
+		const ax = pointer?.x ?? (r ? r.x + r.w / 2 : 0);
+		const ay = pointer?.y ?? (r ? r.y + Math.min(r.h / 2, 28) : 0);
+		const tw = bubble.offsetWidth;
+		const th = bubble.offsetHeight;
+		let left = ax + TIP;
+		if (left + tw > width) left = ax - TIP - tw;
+		let top = ay + TIP;
+		if (top + th > height) top = ay - TIP - th;
+		if (!shownBefore.current) bubble.style.transition = "none";
+		bubble.style.translate = `${clamp(left, 0, Math.max(0, width - tw))}px ${clamp(top, 0, Math.max(0, height - th))}px`;
+		if (!shownBefore.current) {
+			bubble.offsetWidth;
+			bubble.style.transition = "";
+		}
+		shownBefore.current = true;
+	});
+	const topTiles = center.children.map((id) => flat.get(id)).filter((node) => node.value > 0);
+	const topOf = (node) => {
+		let at = node;
+		while (at && at.parent && at.parent !== center.id) at = flat.get(at.parent) ?? null;
+		return at && at.parent === center.id ? at : null;
+	};
+	const onKeyDown = (event) => {
+		const current = topOf(activeNode);
+		const dirs = {
+			ArrowRight: [1, 0],
+			ArrowLeft: [-1, 0],
+			ArrowDown: [0, 1],
+			ArrowUp: [0, -1]
+		};
+		if (event.key in dirs) {
+			event.preventDefault();
+			setPointer(null);
+			if (!current) {
+				setActive(topTiles[0]?.id ?? null);
+				return;
+			}
+			const [dx, dy] = dirs[event.key];
+			const o = target.get(current.id);
+			const ox = o.x + o.w / 2;
+			const oy = o.y + o.h / 2;
+			let best = null;
+			let score = Infinity;
+			for (const node of topTiles) {
+				if (node.id === current.id) continue;
+				const r = target.get(node.id);
+				if (!r) continue;
+				const vx = r.x + r.w / 2 - ox;
+				const vy = r.y + r.h / 2 - oy;
+				const along = vx * dx + vy * dy;
+				const across = Math.abs(vx * dy - vy * dx);
+				if (along <= 1) continue;
+				const s = along + across * 1.5;
+				if (s < score) {
+					score = s;
+					best = node;
+				}
+			}
+			if (best) setActive(best.id);
+		} else if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			setPointer(null);
+			setActive((event.key === "Home" ? topTiles[0] : topTiles[topTiles.length - 1])?.id ?? null);
+		} else if (event.key === "Enter" || event.key === " ") {
+			if (current?.children.length) {
+				event.preventDefault();
+				zoomTo(current.id);
+				setActive(current.children[0]);
+			}
+		} else if (event.key === "Escape" || event.key === "Backspace") {
+			if (center.parent) {
+				event.preventDefault();
+				zoomTo(center.parent);
+				setActive(center.id);
+			} else if (active) {
+				event.preventDefault();
+				setActive(null);
+			}
+		}
+	};
+	const onTilePointerMove = (event, id) => {
+		if (event.pointerType !== "mouse") return;
+		const rect = stage.current?.getBoundingClientRect();
+		if (rect) setPointer({
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		});
+		setActive(id);
+	};
+	const onTileClick = (node) => {
+		const top = topOf(node);
+		if (top?.children.length) zoomTo(top.id);
+		else if (!activeNode || activeNode.id !== node.id) setActive(node.id);
+	};
+	const trail = [];
+	for (let at = center; at; at = at.parent ? flat.get(at.parent) : void 0) trail.unshift(at);
+	const empty = !root.value;
+	const describe = (node) => `${node.path.join(", ")}, ${formatValue(node.value)}, ${PERCENT.format(share(node, parentOf(node)))} of ${parentOf(node).label}${colored && node.color !== null ? `, ${colorLabel} ${formatColor(node.color)}` : ""}`;
+	const focusTop = topOf(activeNode);
+	const summary = `${label}, ${center.label}, ${formatValue(center.value)}`;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "treemap",
+		"aria-label": label,
+		className: cn("treemap box-border font-sans text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("nav", {
+					"aria-label": `${label} path`,
+					className: "-ms-1 min-w-0",
+					children: /* @__PURE__ */ jsx("ol", {
+						className: "m-0 flex min-h-8 min-w-0 list-none flex-wrap items-center p-0",
+						children: trail.map((node, index) => /* @__PURE__ */ jsxs("li", {
+							className: "inline-flex min-w-0 items-center motion-safe:animate-fade-in",
+							children: [index > 0 ? /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "px-1 text-sm text-muted-foreground",
+								children: "/"
+							}) : null, index < trail.length - 1 ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "treemap-crumb",
+								onClick: () => {
+									zoomTo(node.id);
+									setActive(null);
+								},
+								children: node.label
+							}) : /* @__PURE__ */ jsx("span", {
+								"aria-current": "location",
+								className: "px-1 text-sm font-medium whitespace-nowrap",
+								children: node.label
+							})]
+						}, node.id))
+					})
+				}), /* @__PURE__ */ jsx("p", {
+					"data-slot": "treemap-total",
+					className: "m-0 flex-none text-sm font-medium tabular-nums",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: formatValue(center.value),
+						motion: "rise",
+						children: formatValue(center.value)
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: stage,
+				"data-slot": "treemap-stage",
+				"data-active": activeNode ? "" : void 0,
+				"data-scrubbing": activeNode ? "" : void 0,
+				role: empty ? void 0 : "application",
+				tabIndex: empty ? void 0 : 0,
+				"aria-roledescription": empty ? void 0 : "treemap",
+				"aria-label": empty ? void 0 : `${label}, ${center.label}. Arrow keys move between tiles, Enter zooms in, Escape zooms out.`,
+				className: "treemap-stage",
+				style: { height },
+				onKeyDown,
+				onBlur: () => setActive(null),
+				onPointerLeave: () => {
+					setActive(null);
+					setPointer(null);
+				},
+				children: [
+					nodes.map((node) => {
+						const top = topOf(node);
+						const hue = hueOf(branchOf.get(node.id) ?? -1);
+						return /* @__PURE__ */ jsxs("div", {
+							ref: (element) => {
+								if (element) tiles.current.set(node.id, element);
+								else tiles.current.delete(node.id);
+							},
+							"aria-hidden": "true",
+							"data-tile": node.id,
+							"data-branch": node.children.length > 0 || void 0,
+							"data-active": active === node.id || void 0,
+							"data-lineage": focusTop?.id === node.id && active !== node.id || void 0,
+							"data-dim": focusTop !== null && top !== null && focusTop.id !== top.id || void 0,
+							className: "treemap-tile",
+							style: {
+								"--hue": hue,
+								"--fill": `color-mix(in oklab, ${hue} ${shade(node.color)}%, var(--color-surface))`,
+								zIndex: node.depth
+							},
+							onPointerMove: (event) => {
+								event.stopPropagation();
+								onTilePointerMove(event, node.id);
+							},
+							onClick: (event) => {
+								event.stopPropagation();
+								onTileClick(node);
+							},
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "treemap-tile-label",
+								children: node.label
+							}), /* @__PURE__ */ jsx("span", {
+								className: "treemap-tile-value",
+								children: formatValue(node.value)
+							})]
+						}, node.id);
+					}),
+					empty ? /* @__PURE__ */ jsx("p", {
+						className: "pointer-events-none absolute inset-0 m-0 grid place-items-center text-sm text-muted-foreground",
+						children: emptyLabel
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none absolute inset-0 z-50",
+						children: /* @__PURE__ */ jsx("div", {
+							ref: tip,
+							"aria-hidden": "true",
+							"data-slot": "treemap-tooltip",
+							className: "line-chart-tooltip",
+							children: activeNode ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "m-0 truncate text-xs text-muted-foreground",
+									children: activeNode.path.slice(0, -1).join(" / ") || root.label
+								}),
+								/* @__PURE__ */ jsxs("p", {
+									className: "m-0 flex items-baseline justify-between gap-3 text-sm",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 truncate",
+										children: activeNode.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: "flex-none font-medium tabular-nums",
+										children: formatValue(activeNode.value)
+									})]
+								}),
+								/* @__PURE__ */ jsxs("p", {
+									className: "m-0 text-xs tabular-nums text-muted-foreground",
+									children: [
+										PERCENT.format(share(activeNode, parentOf(activeNode))),
+										" of ",
+										parentOf(activeNode).label
+									]
+								}),
+								colored && activeNode.color !== null ? /* @__PURE__ */ jsxs("p", {
+									className: "m-0 text-xs tabular-nums text-muted-foreground",
+									children: [
+										colorLabel,
+										" ",
+										formatColor(activeNode.color)
+									]
+								}) : null
+							] }) : null
+						})
+					})
+				]
+			}),
+			colored ? /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "flex min-w-0 flex-wrap items-center gap-2 text-xs tabular-nums text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "me-1 text-text-secondary",
+						children: colorLabel
+					}),
+					/* @__PURE__ */ jsx("span", { children: formatColor(lo) }),
+					/* @__PURE__ */ jsx("span", {
+						className: "inline-flex gap-0.5",
+						children: Array.from({ length: STEPS }, (_, i) => /* @__PURE__ */ jsx("span", {
+							className: "treemap-step",
+							style: { "--fill": `color-mix(in oklab, ${center.depth === 0 ? "var(--color-foreground)" : hueOf(branchOf.get(center.id) ?? -1)} ${Math.round(14 + i / 4 * 44)}%, var(--color-surface))` }
+						}, i))
+					}),
+					/* @__PURE__ */ jsx("span", { children: formatColor(hi) })
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				children: summary
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: activeNode ? describe(activeNode) : ""
+			}),
+			empty ? null : /* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				children: /* @__PURE__ */ jsxs("table", { children: [
+					/* @__PURE__ */ jsx("caption", { children: label }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Path"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Value"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Share of parent"
+						}),
+						colored ? /* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: colorLabel
+						}) : null
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: nodes.map((node) => /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							children: node.path.join(" / ")
+						}),
+						/* @__PURE__ */ jsx("td", { children: formatValue(node.value) }),
+						/* @__PURE__ */ jsx("td", { children: PERCENT.format(share(node, parentOf(node))) }),
+						colored ? /* @__PURE__ */ jsx("td", { children: node.color === null ? "" : formatColor(node.color) }) : null
+					] }, node.id)) })
+				] })
+			})
+		]
+	});
+});
+//#endregion
+export { Treemap };
+
+//# sourceMappingURL=treemap.js.map