modviz 0.1.2

package/dist/server/assets/treemap-CrgWFoCF.js

@@ -0,0 +1,912 @@
+import { t as Button } from "./button-Bqnnid5i.js";
+import { i as TooltipTrigger, r as TooltipContent, t as Tooltip } from "./tooltip-Ck0DDfF7.js";
+import { c as getExternalPackageName, d as getWorkspacePackageNames, f as isModvizBundleReady, m as useModvizBundle, u as getNodeScope } from "./modviz-data-CUyTorv0.js";
+import { t as colors } from "./colors-DhAxrYua.js";
+import { t as Route$1 } from "./treemap-BbZ9M4GF.js";
+import { t as ModvizLayout } from "./modviz-layout-BAH2ogse.js";
+import { t as SetupView } from "./setup-view-DjI49Iqr.js";
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ExternalLink, FolderTree, Info } from "lucide-react";
+import { Portal } from "@ark-ui/react/portal";
+import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
+//#region src/utils/treemap.ts
+var ROOT_COLOR = "#94a3b8";
+var createTreeNode = (id, label, kind, parentId, color = ROOT_COLOR) => ({
+	id,
+	label,
+	kind,
+	color,
+	parentId,
+	children: [],
+	size: 0,
+	moduleCount: 0,
+	totalIncoming: 0,
+	totalOutgoing: 0,
+	totalNamedImports: 0
+});
+var getModuleWeight = (node) => Math.max(1, node.importees.length + node.importedBy.length);
+var getNodeColor = (node, colorMap) => {
+	const colorKey = node.cluster ?? node.package?.name ?? node.type ?? node.path;
+	return colorMap.get(colorKey) ?? ROOT_COLOR;
+};
+var getWorkspaceSegments = (node) => {
+	const segments = node.path.split(/[\\/]/).filter(Boolean);
+	return segments.length > 0 ? segments : [node.name];
+};
+var getExternalSegments = (node, packageName) => {
+	const segments = node.path.split(/[\\/]/).filter(Boolean);
+	const nodeModulesIndex = segments.lastIndexOf("node_modules");
+	if (nodeModulesIndex === -1) return [packageName, ...segments];
+	const scopeOrName = segments[nodeModulesIndex + 1];
+	const isScoped = Boolean(scopeOrName?.startsWith("@"));
+	const rest = segments.slice(nodeModulesIndex + (isScoped ? 3 : 2));
+	return rest.length > 0 ? [packageName, ...rest] : [packageName, node.name];
+};
+var ensureChild = (parent, nodesById, id, label, kind, color) => {
+	const existing = nodesById.get(id);
+	if (existing) return existing;
+	const child = createTreeNode(id, label, kind, parent.id, color);
+	parent.children.push(child);
+	nodesById.set(id, child);
+	return child;
+};
+var aggregateTree = (node) => {
+	if (node.kind === "module" && node.sourceNode) {
+		node.size = getModuleWeight(node.sourceNode);
+		node.moduleCount = 1;
+		node.totalIncoming = node.sourceNode.importedBy.length;
+		node.totalOutgoing = node.sourceNode.importees.length;
+		node.totalNamedImports = node.sourceNode.imports.length;
+		return node;
+	}
+	for (const child of node.children) {
+		aggregateTree(child);
+		node.size += child.size;
+		node.moduleCount += child.moduleCount;
+		node.totalIncoming += child.totalIncoming;
+		node.totalOutgoing += child.totalOutgoing;
+		node.totalNamedImports += child.totalNamedImports;
+	}
+	node.children.sort((left, right) => right.size - left.size || left.label.localeCompare(right.label));
+	if (node.children[0]) node.color = node.children[0].color;
+	return node;
+};
+var buildTreemapModel = (nodes, workspacePackageNames, colorMap) => {
+	const root = createTreeNode("root", "All Modules", "root", null, ROOT_COLOR);
+	const nodesById = new Map([[root.id, root]]);
+	const workspaceRoot = createTreeNode("scope:workspace", "Workspace", "scope", root.id, "#2563eb");
+	const externalRoot = createTreeNode("scope:external", "External", "scope", root.id, "#0f766e");
+	root.children.push(workspaceRoot, externalRoot);
+	nodesById.set(workspaceRoot.id, workspaceRoot);
+	nodesById.set(externalRoot.id, externalRoot);
+	for (const node of nodes) {
+		const scope = getNodeScope(node, workspacePackageNames);
+		const parentRoot = scope === "workspace" ? workspaceRoot : externalRoot;
+		const packageName = scope === "external" ? getExternalPackageName(node) : null;
+		const segments = scope === "workspace" ? getWorkspaceSegments(node) : getExternalSegments(node, packageName ?? "external");
+		const groupSegments = segments.slice(0, -1);
+		const leafLabel = segments.at(-1) ?? node.name;
+		const color = getNodeColor(node, colorMap);
+		let currentParent = parentRoot;
+		const keyParts = [scope];
+		for (const [index, segment] of groupSegments.entries()) {
+			keyParts.push(segment);
+			const groupKind = scope === "external" && index === 0 ? "package" : "folder";
+			const id = `${groupKind}:${keyParts.join("/")}`;
+			currentParent = ensureChild(currentParent, nodesById, id, segment, groupKind, color);
+		}
+		const leafId = `module:${node.path}`;
+		const leaf = ensureChild(currentParent, nodesById, leafId, leafLabel, "module", color);
+		leaf.sourceNode = node;
+		leaf.sourcePath = node.path;
+	}
+	aggregateTree(root);
+	root.children = root.children.filter((child) => child.moduleCount > 0);
+	return {
+		root,
+		nodesById
+	};
+};
+var getTreemapAncestors = (node, nodesById) => {
+	const ancestors = [];
+	let current = node;
+	while (current) {
+		ancestors.unshift(current);
+		current = current.parentId ? nodesById.get(current.parentId) : void 0;
+	}
+	return ancestors;
+};
+var collectTreemapModules = (node) => {
+	if (node.kind === "module") return [node];
+	return node.children.flatMap((child) => collectTreemapModules(child));
+};
+var partitionTreemap = (nodes, x, y, width, height) => {
+	if (nodes.length === 0 || width <= 0 || height <= 0) return [];
+	if (nodes.length === 1) return [{
+		id: nodes[0].id,
+		x,
+		y,
+		width,
+		height,
+		node: nodes[0]
+	}];
+	const total = nodes.reduce((sum, node) => sum + node.size, 0);
+	if (total <= 0) return [];
+	let splitIndex = 1;
+	let firstGroupSize = nodes[0].size;
+	while (splitIndex < nodes.length - 1 && firstGroupSize < total / 2) {
+		firstGroupSize += nodes[splitIndex].size;
+		splitIndex += 1;
+	}
+	const firstGroup = nodes.slice(0, splitIndex);
+	const secondGroup = nodes.slice(splitIndex);
+	if (secondGroup.length === 0) return nodes.map((node, index) => ({
+		id: node.id,
+		x: width >= height ? x + width / nodes.length * index : x,
+		y: width >= height ? y : y + height / nodes.length * index,
+		width: width >= height ? width / nodes.length : width,
+		height: width >= height ? height : height / nodes.length,
+		node
+	}));
+	if (width >= height) {
+		const firstWidth = width * (firstGroupSize / total);
+		return [...partitionTreemap(firstGroup, x, y, firstWidth, height), ...partitionTreemap(secondGroup, x + firstWidth, y, width - firstWidth, height)];
+	}
+	const firstHeight = height * (firstGroupSize / total);
+	return [...partitionTreemap(firstGroup, x, y, width, firstHeight), ...partitionTreemap(secondGroup, x, y + firstHeight, width, height - firstHeight)];
+};
+var layoutTreemap = (nodes, x, y, width, height) => partitionTreemap([...nodes].sort((left, right) => right.size - left.size), x, y, width, height);
+//#endregion
+//#region src/routes/treemap.tsx?tsr-split=component
+var TREEMAP_PAGE_SIZE = 18;
+var TREEMAP_LAYOUT_WIDTH = 1e3;
+var TREEMAP_LAYOUT_HEIGHT = 600;
+var INLINE_LABEL_HORIZONTAL_PADDING = 28;
+var INLINE_LABEL_TOP_OFFSET = 36;
+var INLINE_LABEL_BOTTOM_PADDING = 14;
+var INLINE_LABEL_MIN_WIDTH = 56;
+var INLINE_LABEL_MIN_HEIGHT = 42;
+var INLINE_LABEL_STACK_GAP = 4;
+var INLINE_LABEL_SECTION_GAP = 12;
+var INLINE_LABEL_TITLE_MAX_LINES = 3;
+var INLINE_LABEL_CAPTION_MAX_LINES = 2;
+var INLINE_LABEL_HINT_MAX_LINES = 2;
+var TITLE_LINE_HEIGHT = 18;
+var CAPTION_LINE_HEIGHT = 16;
+var HINT_LINE_HEIGHT = 14;
+var TITLE_FONT = "600 14px ui-sans-serif, system-ui, sans-serif";
+var CAPTION_FONT = "400 12px ui-sans-serif, system-ui, sans-serif";
+var HINT_FONT = "400 11px ui-sans-serif, system-ui, sans-serif";
+var formatCount = (value, singular, plural = `${singular}s`) => `${value} ${value === 1 ? singular : plural}`;
+var getNodeTitle = (node) => {
+	if (node.kind === "module") return node.sourcePath ?? node.label;
+	return node.label;
+};
+var getNodeSubtitle = (node) => {
+	if (node.kind === "module" && node.sourceNode) return `${node.sourceNode.type}${node.sourceNode.cluster ? ` • ${node.sourceNode.cluster}` : ""}`;
+	if (node.kind === "package") return `${formatCount(node.moduleCount, "module")} in package`;
+	if (node.kind === "scope") return `${formatCount(node.moduleCount, "module")} in ${node.label.toLowerCase()}`;
+	return `${formatCount(node.moduleCount, "module")} across this branch`;
+};
+var getRectCaption = (node) => {
+	if (node.kind === "module") return `${node.totalOutgoing} out • ${node.totalIncoming} in`;
+	return `${formatCount(node.moduleCount, "module")}`;
+};
+var getRectNumberVisibility = (width, height) => width > 32 && height > 24;
+var isDenseTailRect = (rect) => {
+	if (rect.inlineLabel) return false;
+	return rect.width * rect.height < 900 || rect.width < 28 || rect.height < 28;
+};
+var getOverlayStyle = (x, y, width, height) => ({
+	left: `${x / TREEMAP_LAYOUT_WIDTH * 100}%`,
+	top: `${y / TREEMAP_LAYOUT_HEIGHT * 100}%`,
+	width: `${width / TREEMAP_LAYOUT_WIDTH * 100}%`,
+	height: `${height / TREEMAP_LAYOUT_HEIGHT * 100}%`
+});
+var getTextLines = (text, font, maxWidth, lineHeight) => layoutWithLines(prepareWithSegments(text, font), Math.max(1, maxWidth), lineHeight);
+var getInlineLabelLayout = (node, width, height) => {
+	const availableWidth = width - INLINE_LABEL_HORIZONTAL_PADDING;
+	const availableHeight = height - INLINE_LABEL_TOP_OFFSET - INLINE_LABEL_BOTTOM_PADDING;
+	if (availableWidth < INLINE_LABEL_MIN_WIDTH || availableHeight < INLINE_LABEL_MIN_HEIGHT) return null;
+	const titleLayout = getTextLines(node.label, TITLE_FONT, availableWidth, TITLE_LINE_HEIGHT);
+	if (titleLayout.lineCount === 0 || titleLayout.lineCount > INLINE_LABEL_TITLE_MAX_LINES) return null;
+	const captionLayout = getTextLines(getRectCaption(node), CAPTION_FONT, availableWidth, CAPTION_LINE_HEIGHT);
+	if (captionLayout.lineCount === 0 || captionLayout.lineCount > INLINE_LABEL_CAPTION_MAX_LINES) return null;
+	const hintText = node.kind === "module" ? null : "Click to zoom deeper";
+	const hintLayout = hintText ? getTextLines(hintText, HINT_FONT, availableWidth, HINT_LINE_HEIGHT) : null;
+	if (hintLayout && hintLayout.lineCount > INLINE_LABEL_HINT_MAX_LINES) return null;
+	if (titleLayout.height + INLINE_LABEL_STACK_GAP + captionLayout.height + (hintLayout ? INLINE_LABEL_SECTION_GAP + hintLayout.height : 0) > availableHeight) return null;
+	return {
+		titleLines: titleLayout.lines.map((line) => line.text),
+		captionLines: captionLayout.lines.map((line) => line.text),
+		hintLines: hintLayout ? hintLayout.lines.map((line) => line.text) : []
+	};
+};
+var isNodeInBranch = (node, branchId, nodesById) => {
+	let current = node;
+	while (current) {
+		if (current.id === branchId) return true;
+		current = current.parentId ? nodesById.get(current.parentId) ?? null : null;
+	}
+	return false;
+};
+var getExplorerSearchForNode = (node, preservedModule) => {
+	const selected = preservedModule?.kind === "module" ? preservedModule.sourcePath ?? "" : "";
+	if (node.kind === "module" && node.sourcePath) return {
+		selected: node.sourcePath,
+		q: "",
+		scope: node.sourcePath.includes("node_modules") ? "external" : "workspace"
+	};
+	if (node.kind === "scope") return {
+		selected,
+		q: "",
+		scope: node.id === "scope:external" ? "external" : "workspace"
+	};
+	const [, encodedPath = ""] = node.id.split(":");
+	const [scope, ...segments] = encodedPath.split("/");
+	return {
+		selected,
+		q: segments.join("/"),
+		scope: scope === "external" ? "external" : "workspace"
+	};
+};
+function TreemapRoute() {
+	const bundle = useModvizBundle();
+	const search = Route$1.useSearch();
+	const navigate = Route$1.useNavigate();
+	const [hoveredNodeId, setHoveredNodeId] = useState(null);
+	if (!isModvizBundleReady(bundle)) return /* @__PURE__ */ jsx(ModvizLayout, {
+		projectTitle: bundle.projectTitle,
+		title: "Treemap",
+		description: "Package and module area map for wide snapshot exploration.",
+		children: /* @__PURE__ */ jsx(SetupView, { bundle })
+	});
+	const workspacePackageNames = useMemo(() => getWorkspacePackageNames(bundle.graph), [bundle.graph]);
+	const clusterColors = useMemo(() => {
+		const colorMap = /* @__PURE__ */ new Map();
+		bundle.graph.nodes.forEach((node) => {
+			const colorKey = node.cluster ?? node.package?.name ?? node.type ?? node.path;
+			if (!colorMap.has(colorKey)) colorMap.set(colorKey, colors.list[colorMap.size] ?? colors.deterministic(colorKey));
+		});
+		return colorMap;
+	}, [bundle.graph.nodes]);
+	const treemap = useMemo(() => buildTreemapModel(bundle.graph.nodes, workspacePackageNames, clusterColors), [
+		bundle.graph.nodes,
+		workspacePackageNames,
+		clusterColors
+	]);
+	const focusNodeId = search.focus || "root";
+	const activeNodeId = search.selected || focusNodeId;
+	const updateTreemapSearch = (patch, options) => {
+		navigate({
+			replace: options?.replace ?? false,
+			resetScroll: false,
+			search: (previous) => ({
+				...previous,
+				...patch
+			})
+		});
+	};
+	const resolvedFocusNode = treemap.nodesById.get(focusNodeId) ?? treemap.root;
+	const resolvedActiveNode = treemap.nodesById.get(activeNodeId) ?? resolvedFocusNode;
+	const breadcrumbs = useMemo(() => getTreemapAncestors(resolvedFocusNode, treemap.nodesById), [resolvedFocusNode, treemap.nodesById]);
+	const parentNode = resolvedFocusNode.parentId ? treemap.nodesById.get(resolvedFocusNode.parentId) ?? null : null;
+	const hoveredNode = hoveredNodeId ? treemap.nodesById.get(hoveredNodeId) ?? null : null;
+	const preservedExplorerModule = useMemo(() => {
+		if (hoveredNode?.kind === "module" && isNodeInBranch(hoveredNode, resolvedFocusNode.id, treemap.nodesById)) return hoveredNode;
+		if (resolvedActiveNode.kind === "module" && isNodeInBranch(resolvedActiveNode, resolvedFocusNode.id, treemap.nodesById)) return resolvedActiveNode;
+		return null;
+	}, [
+		hoveredNode,
+		resolvedActiveNode,
+		resolvedFocusNode.id,
+		treemap.nodesById
+	]);
+	const explorerSearch = useMemo(() => getExplorerSearchForNode(resolvedFocusNode, preservedExplorerModule), [preservedExplorerModule, resolvedFocusNode]);
+	const visibleNodes = resolvedFocusNode.children.length > 0 ? resolvedFocusNode.children : [resolvedFocusNode];
+	const sortedVisibleNodes = useMemo(() => [...visibleNodes].sort((left, right) => right.size - left.size), [visibleNodes]);
+	const paginationEnabled = search.paginate;
+	const totalPages = Math.max(1, Math.ceil(sortedVisibleNodes.length / TREEMAP_PAGE_SIZE));
+	const pageIndex = paginationEnabled ? Math.min(search.page, totalPages - 1) : 0;
+	const pageStart = paginationEnabled ? pageIndex * TREEMAP_PAGE_SIZE : 0;
+	const pagedVisibleNodes = useMemo(() => paginationEnabled ? sortedVisibleNodes.slice(pageStart, pageStart + TREEMAP_PAGE_SIZE) : sortedVisibleNodes, [
+		pageStart,
+		paginationEnabled,
+		sortedVisibleNodes
+	]);
+	useEffect(() => {
+		if (!paginationEnabled || search.page === pageIndex) return;
+		updateTreemapSearch({ page: pageIndex }, { replace: true });
+	}, [
+		pageIndex,
+		paginationEnabled,
+		search.page
+	]);
+	const rectangles = useMemo(() => layoutTreemap(pagedVisibleNodes, 0, 0, TREEMAP_LAYOUT_WIDTH, TREEMAP_LAYOUT_HEIGHT).map((rect, index) => ({
+		...rect,
+		legendIndex: pageStart + index + 1,
+		inlineLabel: getInlineLabelLayout(rect.node, rect.width, rect.height)
+	})), [pagedVisibleNodes, pageStart]);
+	const denseTailGrid = useMemo(() => {
+		if (paginationEnabled) return null;
+		const denseTailRects = rectangles.filter(isDenseTailRect);
+		if (denseTailRects.length < 8) return null;
+		const minX = Math.min(...denseTailRects.map((rect) => rect.x));
+		const minY = Math.min(...denseTailRects.map((rect) => rect.y));
+		const maxX = Math.max(...denseTailRects.map((rect) => rect.x + rect.width));
+		const maxY = Math.max(...denseTailRects.map((rect) => rect.y + rect.height));
+		const bounds = {
+			x: minX,
+			y: minY,
+			width: maxX - minX,
+			height: maxY - minY
+		};
+		const padding = 6;
+		const gap = 4;
+		const minTileSize = 18;
+		const availableWidth = Math.max(minTileSize, bounds.width - padding * 2);
+		const availableHeight = Math.max(minTileSize, bounds.height - padding * 2);
+		const maxColumns = Math.max(1, Math.floor((availableWidth + gap) / (minTileSize + gap)));
+		const maxRows = Math.max(1, Math.floor((availableHeight + gap) / (minTileSize + gap)));
+		const capacity = Math.max(1, maxColumns * maxRows);
+		const hiddenCount = Math.max(0, denseTailRects.length - capacity);
+		const visibleRects = hiddenCount > 0 ? denseTailRects.slice(0, capacity - 1) : denseTailRects.slice(0, capacity);
+		const tileCount = visibleRects.length + (hiddenCount > 0 ? 1 : 0);
+		const columns = Math.min(maxColumns, Math.max(1, Math.ceil(Math.sqrt(tileCount))));
+		const rows = Math.max(1, Math.ceil(tileCount / columns));
+		const tileSize = Math.floor(Math.min((availableWidth - gap * (columns - 1)) / columns, (availableHeight - gap * (rows - 1)) / rows));
+		const tiles = [];
+		visibleRects.forEach((rect, index) => {
+			const column = index % columns;
+			const row = Math.floor(index / columns);
+			tiles.push({
+				id: rect.node.id,
+				label: getNodeTitle(rect.node),
+				caption: getRectCaption(rect.node),
+				color: rect.node.color,
+				legendIndex: rect.legendIndex,
+				x: padding + column * (tileSize + gap),
+				y: padding + row * (tileSize + gap),
+				size: tileSize
+			});
+		});
+		if (hiddenCount > 0) {
+			const index = visibleRects.length;
+			const column = index % columns;
+			const row = Math.floor(index / columns);
+			tiles.push({
+				id: "dense-tail-more",
+				label: `+${hiddenCount} more`,
+				caption: "Enable pagination to reveal every tiny node",
+				color: "rgba(15,23,42,0.84)",
+				legendIndex: 0,
+				x: padding + column * (tileSize + gap),
+				y: padding + row * (tileSize + gap),
+				size: tileSize
+			});
+		}
+		return {
+			bounds,
+			tiles,
+			hiddenCount
+		};
+	}, [paginationEnabled, rectangles]);
+	const previewNode = hoveredNode ?? resolvedActiveNode;
+	const topModules = useMemo(() => collectTreemapModules(resolvedActiveNode).sort((left, right) => right.size - left.size).slice(0, 6), [resolvedActiveNode]);
+	const pageForNodeId = (nodeId) => {
+		const index = sortedVisibleNodes.findIndex((node) => node.id === nodeId);
+		if (index < 0) return 0;
+		return Math.floor(index / TREEMAP_PAGE_SIZE);
+	};
+	const handleRectClick = (node) => {
+		updateTreemapSearch({ selected: node.id });
+		if (node.children.length > 0) updateTreemapSearch({
+			focus: node.id,
+			page: 0,
+			selected: node.id
+		});
+	};
+	const handleDenseTileClick = (nodeId) => {
+		updateTreemapSearch({
+			paginate: true,
+			page: pageForNodeId(nodeId),
+			selected: nodeId
+		});
+	};
+	const handleNavigateTo = (nodeId) => {
+		updateTreemapSearch({
+			focus: nodeId,
+			page: 0,
+			selected: nodeId
+		});
+	};
+	const pageEnd = Math.min(sortedVisibleNodes.length, pageStart + TREEMAP_PAGE_SIZE);
+	return /* @__PURE__ */ jsx(ModvizLayout, {
+		projectTitle: bundle.projectTitle,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [
+						/* @__PURE__ */ jsx("h1", {
+							className: "text-2xl font-bold text-slate-900 dark:text-slate-100",
+							children: "Treemap Visualization"
+						}),
+						parentNode && /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => handleNavigateTo(parentNode.id),
+							className: "gap-2",
+							children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }), "Up one level"]
+						}),
+						resolvedFocusNode.id !== treemap.root.id && /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => handleNavigateTo(treemap.root.id),
+							children: "Reset view"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							asChild: true,
+							variant: "outline",
+							size: "sm",
+							children: /* @__PURE__ */ jsxs(Link, {
+								to: "/explorer",
+								search: explorerSearch,
+								children: [/* @__PURE__ */ jsx(ExternalLink, { className: "size-4" }), "Open current view in explorer"]
+							})
+						})
+					]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-slate-600 dark:text-slate-400",
+					children: "Size reflects total direct dependency edges for each branch or file. Click folders or packages to drill in, then click files to inspect the hotspot."
+				})] }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "rounded-[24px] border border-slate-200/70 bg-white/90 p-6 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "mb-4 flex flex-wrap items-center gap-2 text-sm text-slate-500 dark:text-slate-400",
+							children: [/* @__PURE__ */ jsx(FolderTree, { className: "size-4" }), breadcrumbs.map((node, index) => /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => handleNavigateTo(node.id),
+								className: "rounded-full px-2 py-1 transition hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-900 dark:hover:text-slate-100",
+								children: [index > 0 ? "/ " : "", node.label]
+							}, node.id))]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "mb-4 flex flex-wrap items-start justify-between gap-3 rounded-[20px] border border-slate-200/70 bg-slate-50/90 px-4 py-3 dark:border-slate-800 dark:bg-slate-900/70",
+							children: [/* @__PURE__ */ jsxs("div", { children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+									children: hoveredNode ? "Hover preview" : "Selection preview"
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "mt-1 text-sm font-semibold text-slate-900 dark:text-slate-100",
+									children: getNodeTitle(previewNode)
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "mt-1 text-xs text-slate-500 dark:text-slate-400",
+									children: getNodeSubtitle(previewNode)
+								})
+							] }), /* @__PURE__ */ jsxs("div", {
+								className: "text-right text-xs text-slate-500 dark:text-slate-400",
+								children: [/* @__PURE__ */ jsx("p", { children: getRectCaption(previewNode) }), /* @__PURE__ */ jsx("p", {
+									className: "mt-1",
+									children: formatCount(previewNode.totalNamedImports, "import statement")
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "mb-4 flex min-h-[84px] flex-wrap items-center justify-between gap-3 rounded-[20px] border border-slate-200/70 bg-white/80 px-4 py-3 text-sm dark:border-slate-800 dark:bg-slate-950/40",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium text-slate-900 dark:text-slate-100",
+								children: paginationEnabled ? totalPages > 1 ? "Dense level detected" : "Single-page level" : "Global overview enabled"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-slate-500 dark:text-slate-400",
+								children: paginationEnabled ? totalPages > 1 ? `Showing ${pageStart + 1}-${pageEnd} of ${sortedVisibleNodes.length} nodes so each page stays readable.` : `Showing all ${sortedVisibleNodes.length} nodes on a single page.` : `Showing all ${sortedVisibleNodes.length} nodes at once for a full branch overview.`
+							})] }), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(Button, {
+										variant: "outline",
+										size: "sm",
+										onClick: () => updateTreemapSearch({
+											paginate: !paginationEnabled,
+											page: 0
+										}, { replace: true }),
+										children: paginationEnabled ? "Show global overview" : "Enable pagination"
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										variant: "outline",
+										size: "sm",
+										onClick: () => updateTreemapSearch({ page: Math.max(0, pageIndex - 1) }, { replace: true }),
+										disabled: !paginationEnabled || totalPages <= 1 || pageIndex === 0,
+										children: "Previous page"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-24 px-2 text-center text-xs font-medium text-slate-500 dark:text-slate-400",
+										children: paginationEnabled ? `Page ${pageIndex + 1} / ${totalPages}` : "All nodes visible"
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										variant: "outline",
+										size: "sm",
+										onClick: () => updateTreemapSearch({ page: Math.min(totalPages - 1, pageIndex + 1) }, { replace: true }),
+										disabled: !paginationEnabled || totalPages <= 1 || pageIndex >= totalPages - 1,
+										children: "Next page"
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "relative aspect-[5/3] w-full overflow-hidden rounded-[20px] border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-900/60",
+							children: [/* @__PURE__ */ jsx("svg", {
+								viewBox: `0 0 ${TREEMAP_LAYOUT_WIDTH} ${TREEMAP_LAYOUT_HEIGHT}`,
+								className: "absolute inset-0 h-full w-full",
+								children: rectangles.map((rect) => {
+									if (denseTailGrid && isDenseTailRect(rect)) return null;
+									const isActive = rect.node.id === resolvedActiveNode.id;
+									const isHovered = rect.node.id === hoveredNodeId;
+									return /* @__PURE__ */ jsxs("g", {
+										onClick: () => handleRectClick(rect.node),
+										className: "cursor-pointer transition-opacity hover:opacity-90",
+										onMouseEnter: () => setHoveredNodeId(rect.node.id),
+										onMouseLeave: () => setHoveredNodeId((current) => current === rect.node.id ? null : current),
+										children: [
+											/* @__PURE__ */ jsxs("title", { children: [
+												"#",
+												rect.legendIndex,
+												" ",
+												getNodeTitle(rect.node),
+												`\n${getNodeSubtitle(rect.node)}`,
+												`\n${getRectCaption(rect.node)}`
+											] }),
+											/* @__PURE__ */ jsx("rect", {
+												x: rect.x + 2,
+												y: rect.y + 2,
+												width: Math.max(0, rect.width - 4),
+												height: Math.max(0, rect.height - 4),
+												fill: rect.node.color,
+												stroke: isActive || isHovered ? "#0f172a" : "rgba(255,255,255,0.92)",
+												strokeWidth: isActive ? 4 : isHovered ? 3 : 2,
+												rx: 10,
+												opacity: rect.node.kind === "module" ? .9 : .84
+											}),
+											getRectNumberVisibility(rect.width, rect.height) && /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+												x: rect.x + 10,
+												y: rect.y + 10,
+												width: Math.min(34, Math.max(24, rect.width - 20)),
+												height: 20,
+												rx: 10,
+												fill: "rgba(15,23,42,0.72)"
+											}), /* @__PURE__ */ jsxs("text", {
+												x: rect.x + 10 + Math.min(34, Math.max(24, rect.width - 20)) / 2,
+												y: rect.y + 24,
+												textAnchor: "middle",
+												fontSize: "11",
+												fontWeight: "700",
+												fill: "white",
+												children: ["#", rect.legendIndex]
+											})] }),
+											rect.inlineLabel && /* @__PURE__ */ jsx("foreignObject", {
+												x: rect.x + 14,
+												y: rect.y + 36,
+												width: Math.max(0, rect.width - 28),
+												height: Math.max(0, rect.height - 50),
+												children: /* @__PURE__ */ jsxs("div", {
+													className: "flex h-full flex-col justify-between overflow-hidden text-white",
+													children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+														className: "space-y-0 text-sm font-semibold",
+														style: { lineHeight: `${TITLE_LINE_HEIGHT}px` },
+														children: rect.inlineLabel.titleLines.map((line, index) => /* @__PURE__ */ jsx("p", {
+															className: "overflow-hidden text-ellipsis whitespace-nowrap",
+															children: line
+														}, `${rect.id}-title-${index}`))
+													}), /* @__PURE__ */ jsx("div", {
+														className: "mt-1 space-y-0 text-xs opacity-90",
+														style: { lineHeight: `${CAPTION_LINE_HEIGHT}px` },
+														children: rect.inlineLabel.captionLines.map((line, index) => /* @__PURE__ */ jsx("p", {
+															className: "overflow-hidden text-ellipsis whitespace-nowrap",
+															children: line
+														}, `${rect.id}-caption-${index}`))
+													})] }), rect.inlineLabel.hintLines.length > 0 && /* @__PURE__ */ jsx("div", {
+														className: "space-y-0 text-[11px] opacity-80",
+														style: { lineHeight: `${HINT_LINE_HEIGHT}px` },
+														children: rect.inlineLabel.hintLines.map((line, index) => /* @__PURE__ */ jsx("p", {
+															className: "overflow-hidden text-ellipsis whitespace-nowrap",
+															children: line
+														}, `${rect.id}-hint-${index}`))
+													})]
+												})
+											})
+										]
+									}, rect.id);
+								})
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "pointer-events-none absolute inset-0",
+								children: [rectangles.filter((rect) => !rect.inlineLabel).filter((rect) => !(denseTailGrid && isDenseTailRect(rect))).map((rect) => /* @__PURE__ */ jsx("div", {
+									className: "pointer-events-auto absolute",
+									style: getOverlayStyle(rect.x + 2, rect.y + 2, Math.max(0, rect.width - 4), Math.max(0, rect.height - 4)),
+									children: /* @__PURE__ */ jsxs(Tooltip, {
+										lazyMount: true,
+										openDelay: 70,
+										closeDelay: 0,
+										children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "block h-full w-full rounded-[10px]",
+												onClick: () => handleRectClick(rect.node),
+												onMouseEnter: () => setHoveredNodeId(rect.node.id),
+												onMouseLeave: () => setHoveredNodeId((current) => current === rect.node.id ? null : current),
+												"aria-label": `Open ${getNodeTitle(rect.node)}`
+											})
+										}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(TooltipContent, {
+											className: "max-w-80",
+											children: /* @__PURE__ */ jsxs("div", {
+												className: "space-y-1",
+												children: [
+													/* @__PURE__ */ jsxs("p", {
+														className: "font-semibold",
+														children: [
+															"#",
+															rect.legendIndex,
+															" ",
+															getNodeTitle(rect.node)
+														]
+													}),
+													/* @__PURE__ */ jsx("p", {
+														className: "text-xs opacity-80",
+														children: getNodeSubtitle(rect.node)
+													}),
+													/* @__PURE__ */ jsx("p", {
+														className: "text-xs opacity-80",
+														children: getRectCaption(rect.node)
+													})
+												]
+											})
+										}) })]
+									})
+								}, `${rect.id}-overlay`)), denseTailGrid && /* @__PURE__ */ jsx("div", {
+									className: "pointer-events-auto absolute",
+									style: getOverlayStyle(denseTailGrid.bounds.x, denseTailGrid.bounds.y, denseTailGrid.bounds.width, denseTailGrid.bounds.height),
+									children: /* @__PURE__ */ jsx("div", {
+										className: "relative h-full w-full rounded-[16px] border border-white/75 bg-white/18 p-1 shadow-[0_12px_32px_-22px_rgba(15,23,42,0.55)] backdrop-blur-[1px] dark:border-slate-700/80 dark:bg-slate-950/12",
+										children: denseTailGrid.tiles.map((tile) => {
+											if (tile.id === "dense-tail-more") return /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												onClick: () => updateTreemapSearch({
+													paginate: true,
+													page: 0
+												}, { replace: true }),
+												className: "absolute flex items-center justify-center rounded-[10px] text-[10px] font-semibold text-white shadow-sm transition hover:scale-[1.03]",
+												style: {
+													left: tile.x,
+													top: tile.y,
+													width: tile.size,
+													height: tile.size,
+													backgroundColor: tile.color
+												},
+												children: ["+", denseTailGrid.hiddenCount]
+											}, tile.id);
+											return /* @__PURE__ */ jsxs(Tooltip, {
+												lazyMount: true,
+												openDelay: 70,
+												closeDelay: 0,
+												children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+													asChild: true,
+													children: /* @__PURE__ */ jsx("button", {
+														type: "button",
+														onClick: () => handleDenseTileClick(tile.id),
+														className: "absolute rounded-[10px] border border-white/80 shadow-sm transition hover:scale-[1.03]",
+														style: {
+															left: tile.x,
+															top: tile.y,
+															width: tile.size,
+															height: tile.size,
+															backgroundColor: tile.color
+														},
+														"aria-label": `Open ${tile.label}`
+													})
+												}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(TooltipContent, {
+													className: "max-w-80",
+													children: /* @__PURE__ */ jsxs("div", {
+														className: "space-y-1",
+														children: [/* @__PURE__ */ jsxs("p", {
+															className: "font-semibold",
+															children: [
+																"#",
+																tile.legendIndex,
+																" ",
+																tile.label
+															]
+														}), /* @__PURE__ */ jsx("p", {
+															className: "text-xs opacity-80",
+															children: tile.caption
+														})]
+													})
+												}) })]
+											}, tile.id);
+										})
+									})
+								})]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "rounded-[24px] border border-slate-200/70 bg-white/90 p-6 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.22em] text-sky-700 dark:text-sky-300",
+								children: "Current selection"
+							}),
+							/* @__PURE__ */ jsx("h2", {
+								className: "mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100",
+								children: getNodeTitle(resolvedActiveNode)
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-sm text-slate-500 dark:text-slate-400",
+								children: getNodeSubtitle(resolvedActiveNode)
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "mt-4 grid gap-4 md:grid-cols-3",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "rounded-lg bg-slate-50/80 p-4 dark:bg-slate-900/50",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+											children: "Modules"
+										}), /* @__PURE__ */ jsx("p", {
+											className: "mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100",
+											children: resolvedActiveNode.moduleCount
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "rounded-lg bg-slate-50/80 p-4 dark:bg-slate-900/50",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+											children: "Outgoing imports"
+										}), /* @__PURE__ */ jsx("p", {
+											className: "mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100",
+											children: resolvedActiveNode.totalOutgoing
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "rounded-lg bg-slate-50/80 p-4 dark:bg-slate-900/50",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+											children: "Incoming imports"
+										}), /* @__PURE__ */ jsx("p", {
+											className: "mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100",
+											children: resolvedActiveNode.totalIncoming
+										})]
+									})
+								]
+							}),
+							resolvedActiveNode.kind === "module" && resolvedActiveNode.sourceNode && /* @__PURE__ */ jsxs("div", {
+								className: "mt-4 rounded-lg bg-slate-50/80 p-4 text-sm text-slate-600 dark:bg-slate-900/50 dark:text-slate-300",
+								children: [/* @__PURE__ */ jsxs("p", { children: ["Named imports in source: ", resolvedActiveNode.totalNamedImports] }), /* @__PURE__ */ jsxs("p", {
+									className: "mt-1",
+									children: [
+										"Imported by",
+										" ",
+										formatCount(resolvedActiveNode.sourceNode.importedBy.length, "module"),
+										"and imports",
+										" ",
+										formatCount(resolvedActiveNode.sourceNode.importees.length, "module"),
+										"."
+									]
+								})]
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "rounded-[24px] border border-slate-200/70 bg-white/90 p-6 shadow-[0_16px_50px_-32px_rgba(15,23,42,0.55)] dark:border-slate-800 dark:bg-slate-950/70",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.22em] text-slate-500 dark:text-slate-400",
+								children: "Nodes in current view"
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-sm text-slate-500 dark:text-slate-400",
+								children: paginationEnabled ? "Tiny tiles are numbered to match this page of the list." : "Tiny tiles are numbered to match the full list below."
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "mt-4 max-h-[26rem] space-y-3 overflow-auto pr-1",
+								children: [
+									rectangles.map((rect) => /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => handleRectClick(rect.node),
+										onMouseEnter: () => setHoveredNodeId(rect.node.id),
+										onMouseLeave: () => setHoveredNodeId((current) => current === rect.node.id ? null : current),
+										className: "block w-full rounded-2xl border border-slate-200/80 bg-slate-50/80 px-4 py-3 text-left transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-800 dark:bg-slate-900/60 dark:hover:border-slate-700 dark:hover:bg-slate-900",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "flex items-start gap-3",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "mt-0.5 flex items-center gap-2",
+												children: [/* @__PURE__ */ jsxs("span", {
+													className: "inline-flex min-w-8 items-center justify-center rounded-full bg-slate-900 px-2 py-1 text-[11px] font-semibold text-white dark:bg-slate-100 dark:text-slate-900",
+													children: ["#", rect.legendIndex]
+												}), /* @__PURE__ */ jsx("span", {
+													className: "mt-1 size-3 rounded-full",
+													style: { backgroundColor: rect.node.color }
+												})]
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "min-w-0 flex-1",
+												children: [
+													/* @__PURE__ */ jsx("p", {
+														className: "truncate text-sm font-semibold text-slate-900 dark:text-slate-100",
+														children: getNodeTitle(rect.node)
+													}),
+													/* @__PURE__ */ jsx("p", {
+														className: "mt-1 text-xs text-slate-500 dark:text-slate-400",
+														children: getNodeSubtitle(rect.node)
+													}),
+													/* @__PURE__ */ jsx("p", {
+														className: "mt-1 text-xs text-slate-500 dark:text-slate-400",
+														children: getRectCaption(rect.node)
+													})
+												]
+											})]
+										})
+									}, rect.id)),
+									rectangles.length === 0 && /* @__PURE__ */ jsx("p", {
+										className: "text-sm text-slate-500 dark:text-slate-400",
+										children: "No nodes are visible at this level."
+									}),
+									topModules.length > 0 && /* @__PURE__ */ jsxs("div", {
+										className: "pt-2",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400",
+											children: "Heaviest modules in selection"
+										}), /* @__PURE__ */ jsx("div", {
+											className: "mt-3 space-y-3",
+											children: topModules.map((node) => /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												onClick: () => updateTreemapSearch({ selected: node.id }),
+												className: "block w-full rounded-2xl border border-slate-200/80 bg-slate-50/80 px-4 py-3 text-left transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-800 dark:bg-slate-900/60 dark:hover:border-slate-700 dark:hover:bg-slate-900",
+												children: [/* @__PURE__ */ jsx("p", {
+													className: "truncate text-sm font-semibold text-slate-900 dark:text-slate-100",
+													children: node.sourcePath ?? node.label
+												}), /* @__PURE__ */ jsxs("p", {
+													className: "mt-1 text-xs text-slate-500 dark:text-slate-400",
+													children: [
+														node.totalOutgoing,
+														" outgoing • ",
+														node.totalIncoming,
+														" incoming"
+													]
+												})]
+											}, node.id))
+										})]
+									})
+								]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "rounded-[24px] border border-blue-200/70 bg-blue-50/80 p-4 dark:border-blue-900/30 dark:bg-blue-950/30",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ jsx(Info, { className: "mt-0.5 size-5 shrink-0 text-blue-900 dark:text-blue-100" }), /* @__PURE__ */ jsxs("div", {
+							className: "text-sm text-blue-800 dark:text-blue-200",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-semibold",
+								children: "About this view"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "mt-1",
+								children: "The treemap now groups workspace code by folders and third-party code by package, so the first click reveals structure instead of dropping you into a broken leaf. Area reflects direct dependency pressure using incoming plus outgoing edges."
+							})]
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { TreemapRoute as component };