50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T19c8,"use client"; import { useEffect, useRef, type ReactNode, type KeyboardEvent } from "react"; import { line, curveMonotoneX } from "d3-shape"; import "./chart-parts.css"; export type ChartSeries = { id: string; label: string; color?: string }; export type ChartDatum = { id: string; label: string; values: Record; x?: number; event?: string; }; export type ChartPart = { id: string; label: string; value: number; color?: string; }; export const chartColor = (index: number) => `var(--chart-${(index % 6) + 1})`; export const numberText = (value: number) => new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(value); export function useChartReveal() { const root = useRef(null); useEffect(() => { const element = root.current; if (!element) return; const observer = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting) { element.dataset.visible = "true"; observer.disconnect(); } }, { threshold: 0.3 }, ); observer.observe(element); return () => observer.disconnect(); }, []); return root; } export function ChartTable({ label, headers, rows, }: { label: string; headers: string[]; rows: (string | number)[][]; }) { return (

{headers.map((header) => ( ))} {rows.map((row, index) => ( {row.map((cell, column) => column === 0 ? ( ) : ( ), )} ))}

{label}
{header}
{cell}	{cell}

); } export function ChartMessage({ loading, error, empty, }: { loading?: boolean; error?: string; empty?: boolean; }) { return error || empty ? (

{error ?? (loading ? "Loading chart…" : "No data for this range.")}

) : loading ? (

Updating chart…

) : null; } export function ChartLegend({ series, hidden, onToggle, active, onActive, }: { series: readonly ChartSeries[]; hidden: readonly string[]; onToggle: (id: string) => void; active?: string | null; onActive?: (id: string | null) => void; }) { return (

legendKeys(event)} > {series.map((item, index) => ( ))}

); } export function legendKeys(event: KeyboardEvent) { const nodes = [ ...event.currentTarget.querySelectorAll("button"), ]; const index = nodes.indexOf(document.activeElement as HTMLButtonElement); const target = event.key === "Home" ? 0 : event.key === "End" ? nodes.length - 1 : ["ArrowRight", "ArrowDown"].includes(event.key) ? (index + 1) % nodes.length : ["ArrowLeft", "ArrowUp"].includes(event.key) ? (index - 1 + nodes.length) % nodes.length : -1; if (target >= 0) { event.preventDefault(); nodes[target]?.focus(); } } export function pointKey( event: KeyboardEvent, active: number | null, length: number, ) { const index = active ?? length - 1; const step = Math.max(1, Math.floor(length / 6)); const next = event.key === "Home" ? 0 : event.key === "End" ? length - 1 : event.key === "PageUp" ? index + step : event.key === "PageDown" ? index - step : ["ArrowRight", "ArrowUp"].includes(event.key) ? index + 1 : ["ArrowLeft", "ArrowDown"].includes(event.key) ? index - 1 : event.key === "Escape" ? null : undefined; if (next !== undefined) event.preventDefault(); return next == null ? next : Math.max(0, Math.min(length - 1, next)); } export function pathFor( data: readonly ChartDatum[], id: string, minimum: number, maximum: number, hidden = false, ) { if (!data.length) return ""; const first = data[0].x ?? 0, last = data[data.length - 1].x ?? data.length - 1; const points = data.map((item, index) => ({ x: (600 * ((item.x ?? index) - first)) / (last - first || 1), y: item.values[id], })); const samples = Array.from({ length: 97 }, (_, index) => { const x = (index / 96) * 600; let right = points.findIndex((point) => point.x >= x); if (right < 0) right = points.length - 1; const a = points[Math.max(0, right - 1)], b = points[right]; const valid = a.y !== undefined && b.y !== undefined && Number.isFinite(a.y) && Number.isFinite(b.y); const value = valid ? a.y! + ((b.y! - a.y!) * (x - a.x)) / (b.x - a.x || 1) : Number.NaN; return [ x, hidden ? 210 : 210 - ((value - minimum) / (maximum - minimum || 1)) * 200, ] as [number, number]; }); return ( line<[number, number]>() .defined((point) => Number.isFinite(point[1])) .x((point) => point[0]) .y((point) => point[1]) .curve(curveMonotoneX)(samples) ?? "" ); } export function ChartReadout({ children }: { children: ReactNode }) { return ( ); } 53:T3b0e,"use client"; import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type KeyboardEvent, } from "react"; import { ChartMessage, ChartReadout, ChartTable, chartColor, numberText, useChartReveal, } from "./chart-parts"; import { cn } from "./lib/cn"; import "./treemap.css"; export type TreemapNode = { id: string; label: string; /** Leaves carry a value; a group's value is the sum of its children. */ value?: number; children?: readonly TreemapNode[]; color?: string; }; type Rect = { x: number; y: number; w: number; h: number }; const total = (node: TreemapNode): number => node.children?.length ? node.children.reduce((sum, child) => sum + total(child), 0) : Number.isFinite(node.value) ? Math.max(0, node.value!) : 0; /** Squarified layout: tiles stay close to square so every value is readable. */ export function layoutTreemap( items: readonly { id: string; value: number }[], width: number, height: number, ) { const sum = items.reduce((acc, item) => acc + Math.max(0, item.value), 0); const out = new Map(); if (!sum) return out; const queue = items .filter((item) => item.value > 0) .sort((a, b) => b.value - a.value) .map((item) => ({ id: item.id, area: (item.value / sum) * width * height })); let x = 0, y = 0, rw = width, rh = height, row: typeof queue = []; const worst = (areas: number[], side: number) => { const s = areas.reduce((acc, value) => acc + value, 0); return Math.max( (side * side * Math.max(...areas)) / (s * s), (s * s) / (side * side * Math.min(...areas)), ); }; const place = () => { const s = row.reduce((acc, item) => acc + item.area, 0); if (rw >= rh) { const cw = s / rh; let cy = y; for (const item of row) { const ch = item.area / cw; out.set(item.id, { x, y: cy, w: cw, h: ch }); cy += ch; } x += cw; rw -= cw; } else { const ch = s / rw; let cx = x; for (const item of row) { const cw = item.area / ch; out.set(item.id, { x: cx, y, w: cw, h: ch }); cx += cw; } y += ch; rh -= ch; } row = []; }; for (const item of queue) { const side = Math.min(rw, rh); if ( row.length && worst([...row, item].map((r) => r.area), side) > worst(row.map((r) => r.area), side) ) place(); row.push(item); } if (row.length) place(); return out; } const walk = ( nodes: readonly TreemapNode[], trail: string[] = [], ): { trail: string[]; node: TreemapNode }[] => nodes.flatMap((node) => node.children?.length ? walk(node.children, [...trail, node.label]) : [{ trail, node }], ); export function Treemap({ label, data, rootLabel = "All", unit = "", formatValue = numberText, onSelect, loading, error, className, }: { label: string; data: readonly TreemapNode[]; rootLabel?: string; unit?: string; formatValue?: (value: number) => string; /** Called when a leaf is chosen, with the groups that contain it. */ onSelect?: (node: TreemapNode, trail: readonly string[]) => void; loading?: boolean; error?: string; className?: string; }) { const root = useChartReveal(); const stage = useRef(null); const focusAfter = useRef(null); const [path, setPath] = useState([]), [reading, setReading] = useState(null), [selected, setSelected] = useState(null), [size, setSize] = useState({ w: 720, h: 400 }), [nav, setNav] = useState<{ dir: "in" | "out"; ox: number; oy: number; scale: number; } | null>(null); // Drop a drilled path that no longer exists after the data changes. const trail: TreemapNode[] = []; let level: readonly TreemapNode[] = data; for (const id of path) { const next = level.find((node) => node.id === id && node.children?.length); if (!next) break; trail.push(next); level = next.children!; } const rootIndex = trail.length ? data.findIndex((node) => node.id === trail[0].id) : -1; const sum = level.reduce((acc, node) => acc + total(node), 0); const tiles = level.filter((node) => total(node) > 0); const layout = layoutTreemap( tiles.map((node) => ({ id: node.id, value: total(node) })), 100, (100 * size.h) / size.w, ); const heightUnits = (100 * size.h) / size.w; const maxValue = Math.max(1, ...tiles.map(total)); const ordered = tiles.filter((node) => layout.has(node.id)); const hasTiles = tiles.length > 0; useLayoutEffect(() => { const element = stage.current; if (!element) return; const measure = () => { const w = element.clientWidth; if (w > 0) setSize({ w, h: Math.round(Math.max(260, Math.min(440, w < 520 ? w * 0.95 : w * 0.55))), }); }; measure(); const observer = new ResizeObserver(measure); observer.observe(element); return () => observer.disconnect(); }, [error, loading, hasTiles]); useEffect(() => { const wanted = focusAfter.current; if (!wanted) return; focusAfter.current = null; const tiles = stage.current?.querySelectorAll("[data-tile-id]"); const target = wanted === "__first" ? tiles?.[0] : [...(tiles ?? [])].find((tile) => tile.dataset.tileId === wanted); target?.focus(); }, [path]); const open = (node: TreemapNode) => { const box = layout.get(node.id); setNav({ dir: "in", ox: box ? box.x + box.w / 2 : 50, oy: box ? ((box.y + box.h / 2) / heightUnits) * 100 : 50, scale: box ? Math.max(0.2, Math.min(0.9, Math.sqrt((box.w * box.h) / (100 * heightUnits)))) : 0.5, }); focusAfter.current = "__first"; setPath([...trail.map((item) => item.id), node.id]); setReading(null); }; const goTo = (depth: number) => { if (depth >= trail.length) return; const from = trail[depth]; setNav({ dir: "out", ox: 50, oy: 50, scale: 1.14 }); focusAfter.current = from.id; setPath(trail.slice(0, depth).map((item) => item.id)); setReading(null); }; const move = (event: KeyboardEvent) => { if (event.key === "Escape" || event.key === "Backspace") { if (trail.length) { event.preventDefault(); goTo(trail.length - 1); } return; } const nodes = [...event.currentTarget.querySelectorAll("[data-tile-id]")]; const index = nodes.indexOf(document.activeElement as HTMLElement); if (index < 0) return; let target: HTMLElement | undefined; if (event.key === "Home") target = nodes[0]; else if (event.key === "End") target = nodes.at(-1); else { const dx = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0; const dy = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0; if (!dx && !dy) return; const here = layout.get(nodes[index].dataset.tileId!)!; const cx = here.x + here.w / 2, cy = here.y + here.h / 2; let best = Infinity; for (const node of nodes) { const box = layout.get(node.dataset.tileId!); if (!box || node === nodes[index]) continue; const ax = box.x + box.w / 2 - cx, ay = box.y + box.h / 2 - cy; const along = ax * dx + ay * dy, across = Math.abs(dx ? ay : ax); if (along <= 0.5) continue; const cost = along + across * 2; if (cost < best) { best = cost; target = node; } } } if (target) { event.preventDefault(); target.focus(); } }; const active = ordered.find((node) => node.id === (reading ?? selected)); const share = (node: TreemapNode) => (sum ? (total(node) / sum) * 100 : 0); const container = trail.at(-1)?.label ?? rootLabel; const text = active ? `${active.label}: ${formatValue(total(active))} ${unit}, ${share(active).toFixed(1)} percent of ${container}.` : ""; const leaves = walk(data); const grand = leaves.reduce((acc, item) => acc + total(item.node), 0); return (

{label}

{!error && !!ordered.length && ( <>

{ordered.map((node, i) => { const box = layout.get(node.id)!; const px = { w: (box.w / 100) * size.w, h: (box.h / heightUnits) * size.h }; const group = !!node.children?.length; const color = node.color ?? chartColor(rootIndex >= 0 ? rootIndex : data.indexOf(node)); const strength = 14 + 22 * (total(node) / maxValue); return (

); })}

{active ? ( <> {active.label} · {formatValue(total(active))} {unit}

{share(active).toFixed(1)}% of {container} {active.children?.length ? ` · ${active.children.length} items · Enter to open` : ""}

) : ( Area is share. Open a group to see what it holds {trail.length ? ", or press Escape to go up" : ""}. )}

{text}

)} [ node.label, groups.join(" / ") || rootLabel, total(node), `${grand ? ((total(node) / grand) * 100).toFixed(1) : 0}%`, ])} /> ); } 54:Tbb2,/* treemap.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="treemap-crumb"] { padding: 0.125rem 0.375rem; border-radius: var(--radius-control); color: var(--muted-foreground); outline: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } [data-slot="treemap-crumb"]:not(:disabled):hover { background: var(--muted); color: var(--foreground); } [data-slot="treemap-crumb"]:disabled { color: var(--foreground); font-weight: 500; } [data-slot="treemap-crumb"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="treemap-cell"] { position: absolute; padding: 1.5px; transition: left var(--duration-travel) var(--ease-showcase), top var(--duration-travel) var(--ease-showcase), width var(--duration-travel) var(--ease-showcase), height var(--duration-travel) var(--ease-showcase); } [data-slot="treemap"][data-visible="true"] [data-slot="treemap-cell"] > button { animation: caliper-treemap-tile var(--duration-normal) var(--ease-out) backwards; animation-delay: var(--tile-delay, 0ms); } [data-slot="treemap-level"] { transform-origin: var(--treemap-ox, 50%) var(--treemap-oy, 50%); } [data-slot="treemap-level"]:not([data-nav="none"]) { animation: caliper-treemap-level var(--duration-travel) var(--ease-showcase); } [data-slot="treemap-tile"] { position: relative; display: flex; align-items: flex-start; width: 100%; height: 100%; padding: 0.5rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tile) 45%, transparent); border-radius: var(--radius-control); outline: none; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), outline-color var(--duration-fast) var(--ease-out); } [data-slot="treemap-tile"][data-group="true"] { cursor: zoom-in; } [data-slot="treemap-tile"]:hover { border-color: var(--tile); } [data-slot="treemap-tile"][data-selected="true"] { border-color: var(--foreground); outline: 2px solid var(--foreground); outline-offset: -3px; } [data-slot="treemap-tile"]:focus-visible { border-color: var(--tile); outline: 2px solid var(--ring); outline-offset: -3px; } [data-slot="treemap"][aria-busy="true"] [data-slot="treemap-stage"] { opacity: 0.5; } @media (prefers-reduced-motion: reduce) { [data-slot="treemap-cell"], [data-slot="treemap-level"] { transition: none; animation: none !important; } [data-slot="treemap-cell"] > button { animation: none !important; } } @keyframes caliper-treemap-tile { from { opacity: 0; } } @keyframes caliper-treemap-level { from { scale: var(--treemap-from, 0.5); opacity: 0; } } } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","d3-shape",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-shape","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"d3-shape"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/chart-parts.tsx","content":"$52","type":"registry:ui","target":"components/ui/chart-parts.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/treemap.tsx","content":"$53","type":"registry:ui","target":"components/ui/treemap.tsx"},{"path":"ui/chart-parts.css","content":"/* chart-parts.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"chart-legend-item\"] {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-height: var(--control-height);\n padding: 0.25rem 0.5rem;\n border-radius: var(--radius-control);\n font-size: 0.75rem;\n color: var(--muted-foreground);\n outline: none;\n transition:\n background-color var(--duration-fast) var(--ease-out),\n color var(--duration-fast) var(--ease-out);\n }\n [data-slot=\"chart-legend-item\"]:hover,\n [data-slot=\"chart-legend-item\"][data-active=\"true\"] {\n background: var(--muted);\n color: var(--foreground);\n }\n [data-slot=\"chart-legend-item\"]:focus-visible {\n outline: 2px solid var(--ring);\n outline-offset: 2px;\n }\n [data-slot=\"chart-legend-item\"][aria-pressed=\"false\"] {\n opacity: 0.45;\n text-decoration: line-through;\n }\n}\n","type":"registry:file","target":"components/ui/chart-parts.css"},{"path":"ui/treemap.css","content":"$54","type":"registry:file","target":"components/ui/treemap.css"}],"className":"h-[70svh] min-h-80"}]]}]