4f: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"] 50: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"] 51:T342a,"use client"; import type { Transition } from "motion/react"; import { animate, motion } from "motion/react"; import { Children, isValidElement, memo, type ReactElement, type ReactNode, useCallback, useEffect, useMemo, useRef, useState, } from "react"; import { type ArcDatum, buildArcs, buildHoverGrowTargets, buildSunburstEnterTiming, defaultSunburstGrowPadding, maxHoverSegmentThickness, } from "./sunburst"; import { defaultSunburstColors, opacityForRelativeDepth, type SunburstContextValue, SunburstProvider, } from "./sunburst-context"; import type { SunburstNode } from "./sunburst-data"; export type { ArcDatum, Focus } from "./sunburst"; export type { SunburstNode } from "./sunburst-data"; const DEFAULT_HOVER_POP = 8; function componentDisplayName(child: ReactElement): string { return ( (child.type as { displayName?: string }).displayName || (child.type as { name?: string }).name || "" ); } function isDefsComponent(child: ReactElement): boolean { const name = componentDisplayName(child); return ( name.includes("Gradient") || name.includes("Pattern") || name === "LinearGradient" || name === "RadialGradient" ); } function isOutsideSvgComponent(name: string): boolean { return name === "SunburstBreadcrumb" || name === "SunburstHint"; } function isSunburstSegment( child: ReactNode ): child is ReactElement<{ index: number }> { return ( isValidElement(child) && componentDisplayName(child) === "SunburstSegment" ); } /** Inner rings last so parent segments win hit testing at ring boundaries. */ function sortSunburstSegments( segments: ReactElement<{ index: number }>[], arcs: ArcDatum[] ): ReactElement<{ index: number }>[] { return [...segments].sort((a, b) => { const arcA = arcs[a.props.index]; const arcB = arcs[b.props.index]; const depthA = arcA?.depth ?? 0; const depthB = arcB?.depth ?? 0; if (depthA !== depthB) { return depthB - depthA; } return (b.props.index ?? 0) - (a.props.index ?? 0); }); } export interface SunburstChartProps { data: SunburstNode; size?: number; /** Bump to replay the initialization animation. */ playKey?: number; className?: string; /** Controlled focus node id for drill-down. */ focusId?: string; /** Called when focus changes via segment click or breadcrumb. */ onFocusChange?: (focusId: string) => void; /** Controlled hover — arc index in the arcs array. */ hoveredIndex?: number | null; onHoverChange?: (index: number | null) => void; hoverPop?: number; /** Inset reserved for hover growth; defaults from layout depth and hoverPop. */ padding?: number; enterTransition?: Transition; enterStaggerScale?: number; children: ReactNode; } const SunburstChartCore = memo(function SunburstChartCore({ data, size = 520, playKey = 0, className, focusId: focusIdProp, onFocusChange, hoveredIndex: hoveredIndexProp, onHoverChange, hoverPop = DEFAULT_HOVER_POP, padding: paddingProp, enterTransition, enterStaggerScale = 1, children, }: SunburstChartProps) { const fullRadius = size / 2; const containerRef = useRef(null); const { arcs, maxDepth, focusById, rootId } = useMemo( () => buildArcs(data), [data] ); const growPadding = useMemo( () => paddingProp ?? defaultSunburstGrowPadding(maxDepth, size, hoverPop), [paddingProp, maxDepth, size, hoverPop] ); const radius = Math.max(8, fullRadius - growPadding); const [skipEnterAnimation, setSkipEnterAnimation] = useState(false); const [internalHoveredArc, setInternalHoveredArc] = useState( null ); const [internalHoveredIndex, setInternalHoveredIndex] = useState< number | null >(null); const growRef = useRef>(new Map()); const [growTick, setGrowTick] = useState(0); const [internalFocusId, setInternalFocusId] = useState(rootId); const [prevFocusId, setPrevFocusId] = useState(rootId); const [zoomT, setZoomT] = useState(1); const isFocusControlled = focusIdProp !== undefined; const focusId = isFocusControlled ? focusIdProp : internalFocusId; const isHoverControlled = hoveredIndexProp !== undefined; const hoveredArcIndex = isHoverControlled ? hoveredIndexProp : internalHoveredIndex; const hoveredArc = useMemo(() => { if (hoveredArcIndex != null) { return arcs[hoveredArcIndex] ?? null; } return internalHoveredArc; }, [arcs, hoveredArcIndex, internalHoveredArc]); const setHoveredArcIndex = useCallback( (index: number | null) => { if (isHoverControlled) { onHoverChange?.(index); } else { setInternalHoveredIndex(index); setInternalHoveredArc(index == null ? null : (arcs[index] ?? null)); } }, [arcs, isHoverControlled, onHoverChange] ); const setHoveredArc = useCallback( (arc: ArcDatum | null) => { setHoveredArcIndex(arc ? arc.arcIndex : null); }, [setHoveredArcIndex] ); const setFocusId = useCallback( (nextId: string) => { if (isFocusControlled) { onFocusChange?.(nextId); } else { setInternalFocusId(nextId); } }, [isFocusControlled, onFocusChange] ); const rootFocus = focusById.get(rootId); const focus = focusById.get(focusId) ?? rootFocus; const prevFocus = focusById.get(prevFocusId) ?? focus; useEffect(() => { if (!isFocusControlled) { setInternalFocusId(rootId); } setPrevFocusId(rootId); setZoomT(1); }, [rootId, isFocusControlled]); const enterTiming = useMemo( () => buildSunburstEnterTiming(arcs, enterStaggerScale), [arcs, enterStaggerScale] ); // biome-ignore lint/correctness/useExhaustiveDependencies: replay when data or playKey changes useEffect(() => { setSkipEnterAnimation( typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true ); }, [playKey, arcs]); const prefersReduced = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches; const growControls = useRef | null>(null); const zoomControls = useRef | null>(null); const zoomGen = useRef(0); // biome-ignore lint/correctness/useExhaustiveDependencies: prefersReduced reads matchMedia at call time const zoomTo = useCallback( (nextId: string) => { if (nextId === focusId) { return; } setHoveredArc(null); growControls.current?.stop(); growRef.current = new Map(); setGrowTick((n) => n + 1); setPrevFocusId(focusId); setFocusId(nextId); zoomControls.current?.stop(); const gen = ++zoomGen.current; if (prefersReduced()) { setZoomT(1); return; } setZoomT(0); zoomControls.current = animate(0, 1, { duration: 0.75, ease: [0.22, 1, 0.36, 1], onUpdate: (value) => { if (zoomGen.current === gen) { setZoomT(value); } }, onComplete: () => { if (zoomGen.current === gen) { setZoomT(1); setPrevFocusId(nextId); } }, }); }, [focusId, setFocusId, setHoveredArc] ); const isDescendant = useCallback( (d: ArcDatum, ancestorId: string) => d.id === ancestorId || d.id.startsWith(`${ancestorId} / `), [] ); const isOnHoverPath = useCallback( (d: ArcDatum, hoveredId: string) => d.id === hoveredId || hoveredId.startsWith(`${d.id} / `), [] ); const isRelated = useCallback( (d: ArcDatum) => { if (!hoveredArc) { return true; } return ( isDescendant(d, hoveredArc.id) || hoveredArc.id.startsWith(`${d.id} / `) ); }, [hoveredArc, isDescendant] ); // biome-ignore lint/correctness/useExhaustiveDependencies: grow targets from visible hover path useEffect(() => { const targets = hoveredArc && focus ? buildHoverGrowTargets( arcs, hoveredArc, focus, maxDepth, radius, hoverPop, isOnHoverPath ) : new Map(); const starts = new Map(growRef.current); const ids = new Set([...starts.keys(), ...targets.keys()]); growControls.current?.stop(); if (prefersReduced()) { growRef.current = targets; setGrowTick((n) => n + 1); return; } growControls.current = animate(0, 1, { duration: 0.42, ease: [0.22, 1, 0.36, 1], onUpdate: (p) => { const next = new Map(); for (const id of ids) { const start = starts.get(id) ?? 0; const target = targets.get(id) ?? 0; const val = start + (target - start) * p; if (val > 0.01) { next.set(id, val); } } growRef.current = next; setGrowTick((n) => n + 1); }, }); return () => growControls.current?.stop(); }, [hoveredArc, arcs, hoverPop, isOnHoverPath, focus, maxDepth, radius]); const getColor = useCallback((categoryIndex: number, nodeColor?: string) => { if (nodeColor) { return nodeColor; } return defaultSunburstColors[ categoryIndex % defaultSunburstColors.length ] as string; }, []); const getFill = useCallback( (arcIndex: number, fillOverride?: string, colorOverride?: string) => { if (fillOverride) { return fillOverride; } const arc = arcs[arcIndex]; if (!arc) { return defaultSunburstColors[0] as string; } return ( colorOverride ?? arc.fill ?? arc.color ?? getColor(arc.categoryIndex) ); }, [arcs, getColor] ); const getFillOpacity = useCallback( (relativeDepth: number, override?: number) => override ?? opacityForRelativeDepth(relativeDepth), [] ); // biome-ignore lint/correctness/useExhaustiveDependencies: growTick forces re-read from growRef const growAmountForArc = useCallback( (arcId: string) => growRef.current.get(arcId) ?? 0, [growTick] ); const maxExpandedThickness = useMemo( () => maxHoverSegmentThickness(maxDepth, radius, hoverPop), [maxDepth, radius, hoverPop] ); if (!(focus && prevFocus)) { return null; } const childArray = Children.toArray(children); const defsChildren = childArray.filter( (child): child is ReactElement => isValidElement(child) && isDefsComponent(child) ); const outsideChildren: ReactNode[] = []; const svgChildren: ReactNode[] = []; for (const child of childArray) { if (!isValidElement(child)) { svgChildren.push(child); continue; } if (isDefsComponent(child)) { continue; } const name = componentDisplayName(child); if (isOutsideSvgComponent(name)) { outsideChildren.push(child); } else { svgChildren.push(child); } } const segmentChildren = svgChildren.filter(isSunburstSegment); const otherSvgChildren = svgChildren.filter( (child) => !isSunburstSegment(child) ); const orderedSegments = sortSunburstSegments(segmentChildren, arcs); const orderedSvgChildren = [...orderedSegments, ...otherSvgChildren]; const providerValue: SunburstContextValue = { data, arcs, focusById, rootId, maxDepth, radius, size, focus, prevFocus, focusId, zoomTo, zoomT, enterTiming, skipEnterAnimation, growAmountForArc, getColor, getFill, getFillOpacity, isRelated, isDescendant, enterTransition, enterStaggerScale, playKey, hoverPop, maxExpandedThickness, containerRef, hoveredArcIndex, setHoveredArcIndex, hoveredArc, setHoveredArc, }; return (

{outsideChildren.filter( (child) => isValidElement(child) && componentDisplayName(child) === "SunburstBreadcrumb" )}

setHoveredArc(null)} role="img" style={{ display: "block", overflow: "visible" }} transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }} viewBox={`${-fullRadius} ${-fullRadius} ${size} ${size}`} width="100%" > {defsChildren.length > 0 ? {defsChildren} : null} {orderedSvgChildren}

{outsideChildren.filter( (child) => isValidElement(child) && componentDisplayName(child) === "SunburstHint" )}

); }); export function SunburstChart(props: SunburstChartProps) { return ; } SunburstChart.displayName = "SunburstChart"; 52:T14df,"use client"; import type { Transition } from "motion/react"; import { createContext, type ReactNode, type RefObject, useContext, useMemo, } from "react"; import type { ArcDatum, Focus, SunburstEnterTiming } from "./sunburst"; import type { SunburstNode } from "./sunburst-data"; export const sunburstCssVars = { background: "var(--chart-background)", foreground: "var(--chart-foreground)", foregroundMuted: "var(--chart-foreground-muted)", label: "var(--chart-label)", ring: "var(--chart-background)", slice1: "var(--chart-1)", slice2: "var(--chart-2)", slice3: "var(--chart-3)", slice4: "var(--chart-4)", slice5: "var(--chart-5)", }; export const defaultSunburstColors = [ sunburstCssVars.slice1, sunburstCssVars.slice2, sunburstCssVars.slice3, sunburstCssVars.slice4, sunburstCssVars.slice5, ]; const OPACITY_STEP = 0.15; const OPACITY_FLOOR = 0.45; /** Relative depth within the current focus view (1 = innermost visible ring). */ export function opacityForRelativeDepth(relativeDepth: number): number { if (relativeDepth <= 1) { return 1; } return Math.max(OPACITY_FLOOR, 1 - (relativeDepth - 1) * OPACITY_STEP); } export interface SunburstHoverContextValue { hoveredArcIndex: number | null; setHoveredArcIndex: (index: number | null) => void; hoveredArc: ArcDatum | null; setHoveredArc: (arc: ArcDatum | null) => void; } export interface SunburstStableContextValue { data: SunburstNode; arcs: ArcDatum[]; focusById: Map; rootId: string; maxDepth: number; radius: number; size: number; focus: Focus; prevFocus: Focus; focusId: string; zoomTo: (nextId: string) => void; zoomT: number; enterTiming: SunburstEnterTiming; skipEnterAnimation: boolean; growAmountForArc: (arcId: string) => number; getColor: (categoryIndex: number, nodeColor?: string) => string; getFill: ( arcIndex: number, fillOverride?: string, colorOverride?: string ) => string; getFillOpacity: (relativeDepth: number, override?: number) => number; isRelated: (arc: ArcDatum) => boolean; isDescendant: (arc: ArcDatum, ancestorId: string) => boolean; enterTransition?: Transition; enterStaggerScale: number; playKey: number; hoverPop: number; maxExpandedThickness: number; containerRef: RefObject; } export type SunburstContextValue = SunburstStableContextValue & SunburstHoverContextValue; const SunburstStableContext = createContext( null ); const SunburstHoverContext = createContext( null ); export function SunburstProvider({ children, value, }: { children: ReactNode; value: SunburstContextValue; }) { const stable = useMemo( () => ({ data: value.data, arcs: value.arcs, focusById: value.focusById, rootId: value.rootId, maxDepth: value.maxDepth, radius: value.radius, size: value.size, focus: value.focus, prevFocus: value.prevFocus, focusId: value.focusId, zoomTo: value.zoomTo, zoomT: value.zoomT, enterTiming: value.enterTiming, skipEnterAnimation: value.skipEnterAnimation, growAmountForArc: value.growAmountForArc, getColor: value.getColor, getFill: value.getFill, getFillOpacity: value.getFillOpacity, isRelated: value.isRelated, isDescendant: value.isDescendant, enterTransition: value.enterTransition, enterStaggerScale: value.enterStaggerScale, playKey: value.playKey, hoverPop: value.hoverPop, maxExpandedThickness: value.maxExpandedThickness, containerRef: value.containerRef, }), [ value.data, value.arcs, value.focusById, value.rootId, value.maxDepth, value.radius, value.size, value.focus, value.prevFocus, value.focusId, value.zoomTo, value.zoomT, value.enterTiming, value.skipEnterAnimation, value.growAmountForArc, value.getColor, value.getFill, value.getFillOpacity, value.isRelated, value.isDescendant, value.enterTransition, value.enterStaggerScale, value.playKey, value.hoverPop, value.maxExpandedThickness, value.containerRef, ] ); const hover = useMemo( () => ({ hoveredArcIndex: value.hoveredArcIndex, setHoveredArcIndex: value.setHoveredArcIndex, hoveredArc: value.hoveredArc, setHoveredArc: value.setHoveredArc, }), [ value.hoveredArcIndex, value.setHoveredArcIndex, value.hoveredArc, value.setHoveredArc, ] ); return ( {children} ); } export function useSunburstStable() { const ctx = useContext(SunburstStableContext); if (!ctx) { throw new Error("useSunburstStable must be used within SunburstChart"); } return ctx; } export function useSunburstHover() { const ctx = useContext(SunburstHoverContext); if (!ctx) { throw new Error("useSunburstHover must be used within SunburstChart"); } return ctx; } 53:T1136,"use client"; import { motion, useTransform } from "motion/react"; import { memo, useMemo } from "react"; import { applyHoverGrow, arcPath, transitionGeometry } from "./sunburst"; import { sunburstCssVars, useSunburstHover, useSunburstStable, } from "./sunburst-context"; import { useEnterComplete } from "./use-enter-complete"; import { useMountProgress } from "./use-mount-progress"; const HOVER_DIM_TRANSITION = { duration: 0.16, ease: "easeOut" as const }; export interface SunburstSegmentProps { index: number; /** Optional color override */ color?: string; /** Optional fill override (patterns/gradients) */ fill?: string; /** Optional fill opacity override */ fillOpacity?: number; } export const SunburstSegment = memo(function SunburstSegment({ index, color: colorProp, fill: fillProp, fillOpacity: fillOpacityProp, }: SunburstSegmentProps) { const { arcs, focus, prevFocus, maxDepth, radius, zoomT, enterTiming, enterTransition, playKey, skipEnterAnimation, growAmountForArc, getFill, getFillOpacity, isRelated, maxExpandedThickness, zoomTo, } = useSunburstStable(); const { setHoveredArc, setHoveredArcIndex } = useSunburstHover(); const arc = arcs[index]; const segmentDelay = (arc ? enterTiming.segmentDelays.get(arc.id)?.delay : undefined) ?? 0; const replayId = arc?.id ?? `missing-${index}`; const base = useMemo(() => { if (!arc) { return null; } return transitionGeometry(arc, prevFocus, focus, maxDepth, radius, zoomT); }, [arc, prevFocus, focus, maxDepth, radius, zoomT]); const visualGeometry = useMemo(() => { if (!(arc && base)) { return null; } return applyHoverGrow(base, arc.id, growAmountForArc, maxExpandedThickness); }, [arc, base, growAmountForArc, maxExpandedThickness]); const enterProgress = useMountProgress( enterTransition, segmentDelay, `${playKey}-enter-${replayId}` ); const enterComplete = useEnterComplete(enterProgress); const enterScale = useTransform(enterProgress, [0, 1], [0, 1]); const animatedHitPath = useTransform(enterProgress, (value) => base ? (arcPath(base, value, 1) ?? "") : "" ); const animatedVisualPath = useTransform(enterProgress, (value) => visualGeometry ? (arcPath(visualGeometry, value, 1) ?? "") : "" ); if (!arc) { return null; } if (!base) { return null; } const showStatic = skipEnterAnimation || enterComplete; const fullHitPath = arcPath(base, 1, 1); const fullVisualPath = visualGeometry ? arcPath(visualGeometry, 1, 1) : null; if (!(fullHitPath && fullVisualPath)) { return null; } const relativeDepth = arc.depth - focus.depth; const segmentFill = getFill(index, fillProp, colorProp); const fillOpacity = fillOpacityProp ?? getFillOpacity(relativeDepth); const related = isRelated(arc); const layerOpacity = related ? 1 : 0.25; const groupStyle = { cursor: arc.hasChildren ? ("pointer" as const) : ("default" as const), transformOrigin: "0px 0px", }; const hitHandlers = { onClick: () => arc.hasChildren && zoomTo(arc.id), onPointerEnter: () => { setHoveredArc(arc); setHoveredArcIndex(index); }, }; const visualPathProps = { fill: segmentFill, fillOpacity, pointerEvents: "none" as const, stroke: sunburstCssVars.ring, strokeLinejoin: "round" as const, strokeWidth: 1, }; if (showStatic) { return ( ); } return ( ); }); SunburstSegment.displayName = "SunburstSegment"; 54:T4e6,"use client"; import { memo } from "react"; import { ringOptions } from "./sunburst"; import { sunburstCssVars, useSunburstStable } from "./sunburst-context"; export interface SunburstCenterProps { className?: string; } export const SunburstCenter = memo(function SunburstCenter({ className, }: SunburstCenterProps) { const { focus, prevFocus, maxDepth, radius, zoomT, zoomTo, getColor } = useSunburstStable(); const { centerR } = ringOptions(focus.depth, maxDepth, radius); const liveCenterR = centerR * zoomT + ringOptions(prevFocus.depth, maxDepth, radius).centerR * (1 - zoomT); if (liveCenterR <= 1) { return null; } const centerColor = focus.depth === 0 ? sunburstCssVars.background : getColor(focus.categoryIndex); return ( /* biome-ignore lint/a11y/noStaticElementInteractions: Center zoom-out control */ focus.parentId && zoomTo(focus.parentId)} r={Math.max(liveCenterR - 2, 0)} stroke={sunburstCssVars.ring} strokeWidth={1} style={{ cursor: focus.parentId ? "pointer" : "default" }} /> ); }); SunburstCenter.displayName = "SunburstCenter"; 55:T4f2,"use client"; import { memo, type ReactNode, useMemo } from "react"; import type { Focus } from "./sunburst"; import { useSunburstStable } from "./sunburst-context"; export interface SunburstBreadcrumbItem { id: string; label: string; isCurrent: boolean; } export function useSunburstBreadcrumbItems() { const { data, focus, focusById, rootId, zoomTo } = useSunburstStable(); const items = useMemo((): SunburstBreadcrumbItem[] => { const crumbs: Focus[] = []; let cur: Focus | undefined = focus; while (cur) { crumbs.unshift(cur); cur = cur.parentId ? focusById.get(cur.parentId) : undefined; } return crumbs.map((c, index) => ({ id: c.id, label: c.id === rootId ? data.name : c.name, isCurrent: index === crumbs.length - 1, })); }, [data.name, focus, focusById, rootId]); return { items, zoomTo }; } export interface SunburstBreadcrumbProps { className?: string; children: ReactNode; } export const SunburstBreadcrumb = memo(function SunburstBreadcrumb({ className, children, }: SunburstBreadcrumbProps) { return ( ); }); SunburstBreadcrumb.displayName = "SunburstBreadcrumb"; 56:T584,"use client"; import { memo, type ReactNode } from "react"; import type { ArcDatum, Focus } from "./sunburst"; import { useSunburstHover, useSunburstStable } from "./sunburst-context"; export interface SunburstHintContext { hintText: string; hoveredArc: ArcDatum | null; focus: Focus; } export interface SunburstHintProps { className?: string; children?: ReactNode | ((context: SunburstHintContext) => ReactNode); } export const SunburstHint = memo(function SunburstHint({ className, children, }: SunburstHintProps) { const { focus } = useSunburstStable(); const { hoveredArc } = useSunburstHover(); const hintText = (() => { if (hoveredArc) { return hoveredArc.trail.join(" › "); } if (focus.depth === 0) { return "Click a segment to zoom in · hover to inspect"; } return "Click the center to zoom out"; })(); const context: SunburstHintContext = { hintText, hoveredArc, focus }; let content: ReactNode; if (typeof children === "function") { content = children(context); } else if (children == null) { content = hintText; } else { content = children; } return (

{content}

); }); SunburstHint.displayName = "SunburstHint"; 57:Teee,"use client"; import { motion, useTransform } from "motion/react"; import { memo } from "react"; import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation"; import { applyHoverGrow, geomCentroidAngle, geomCentroidRadius, transitionGeometry, } from "./sunburst"; import { sunburstCssVars, useSunburstStable } from "./sunburst-context"; import { useEnterComplete } from "./use-enter-complete"; import { useMountProgress } from "./use-mount-progress"; export interface SunburstLabelsProps { fontSize?: number; fill?: string; stroke?: string; strokeWidth?: number; className?: string; } export const SunburstLabels = memo(function SunburstLabels({ fontSize = 11, fill = sunburstCssVars.label, stroke = sunburstCssVars.background, strokeWidth = 2.5, className, }: SunburstLabelsProps) { const { arcs, focus, prevFocus, maxDepth, radius, zoomT, enterTiming, enterTransition, playKey, skipEnterAnimation, growAmountForArc, isRelated, maxExpandedThickness, } = useSunburstStable(); const enterDuration = typeof enterTransition?.duration === "number" ? enterTransition.duration : (DEFAULT_CHART_ENTER_TRANSITION.duration as number); const labelsDelay = enterTiming.maxDelay + enterDuration * 0.85; const labelsProgress = useMountProgress( enterTransition, labelsDelay, `${playKey}-labels` ); const labelsComplete = useEnterComplete(labelsProgress); const labelOpacity = useTransform(labelsProgress, [0, 1], [0, 1]); const showLabels = skipEnterAnimation || labelsComplete; return ( {arcs.map((arc) => { const base = transitionGeometry( arc, prevFocus, focus, maxDepth, radius, zoomT ); if (!base) { return null; } const g = applyHoverGrow( base, arc.id, growAmountForArc, maxExpandedThickness ); const angleSpan = g.a1 - g.a0; const r = geomCentroidRadius(g); if (angleSpan * r < 26 || g.outerR - g.innerR < 16) { return null; } if (!isRelated(arc)) { return null; } const mid = geomCentroidAngle(g); const x = Math.sin(mid) * r; const y = -Math.cos(mid) * r; let deg = (mid * 180) / Math.PI - 90; if (deg > 90) { deg -= 180; } if (deg < -90) { deg += 180; } const labelStyle: React.CSSProperties = { fill, fontFamily: "inherit", fontSize, fontWeight: 600, }; if (strokeWidth > 0) { labelStyle.paintOrder = "stroke"; labelStyle.stroke = stroke; labelStyle.strokeLinejoin = "round"; labelStyle.strokeWidth = strokeWidth; } if (showLabels) { return ( {arc.name} ); } return ( {arc.name} ); })} ); }); SunburstLabels.displayName = "SunburstLabels"; 58:T4225,import type { SunburstNode } from "./sunburst-data"; export interface ArcDatum { id: string; name: string; depth: number; value: number; categoryIndex: number; hasChildren: boolean; trail: string[]; parentId: string | null; a0: number; a1: number; /** Stable index for Studio layer wiring. */ arcIndex: number; /** Optional color override from data node. */ color?: string; /** Optional fill override from data node (patterns). */ fill?: string; } export interface Focus { id: string; name: string; depth: number; parentId: string | null; categoryIndex: number; a0: number; a1: number; } export interface ArcGeometry { a0: number; a1: number; innerR: number; outerR: number; } const TOP = -Math.PI / 2; const TWO_PI = 2 * Math.PI; const ID_SEP = " / "; /** Drill-down navigation hub is smaller than one ring to leave room for hover grow. */ const DRILL_CENTER_SCALE = 0.65; /** Extra hub shrink per focus level beyond the first drill. */ const DRILL_CENTER_DEPTH_SHRINK = 0.08; /** Max total radial hover grow as a fraction of the current ring width. */ const HOVER_GROW_RING_BUDGET = 0.28; /** Per-segment hover grow cap as a fraction of ring width. */ const HOVER_GROW_SEGMENT_CAP = 0.1; function nodeId(parentId: string | null, name: string): string { return parentId ? `${parentId}${ID_SEP}${name}` : name; } export function sumValues(node: SunburstNode): number { if (node.children?.length) { return node.children.reduce((sum, child) => sum + sumValues(child), 0); } return node.value ?? 0; } interface BuildContext { arcs: ArcDatum[]; focusById: Map; maxDepth: number; rootId: string; arcIndex: number; } function layoutNode( node: SunburstNode, id: string, depth: number, a0: number, a1: number, parentId: string | null, categoryIndex: number, trail: string[], ctx: BuildContext ) { const value = sumValues(node); const hasChildren = Boolean(node.children?.length); if (depth > 0) { ctx.arcs.push({ id, name: node.name, depth, value, categoryIndex, hasChildren, trail: [...trail, node.name], parentId, a0, a1, arcIndex: ctx.arcIndex, color: node.color, fill: node.fill, }); ctx.arcIndex += 1; } ctx.focusById.set(id, { id, name: node.name, depth, parentId, categoryIndex, a0, a1, }); ctx.maxDepth = Math.max(ctx.maxDepth, depth); if (!(hasChildren && node.children?.length)) { return; } const span = a1 - a0; let cursor = a0; for (const [index, child] of node.children.entries()) { const childValue = sumValues(child); const childSpan = value > 0 ? (childValue / value) * span : 0; const childId = nodeId(id, child.name); const childCategory = depth === 0 ? index : categoryIndex; layoutNode( child, childId, depth + 1, cursor, cursor + childSpan, id, childCategory, depth === 0 ? [node.name] : trail, ctx ); cursor += childSpan; } } function toRadians(normalized: number): number { return TOP + normalized * TWO_PI; } export function buildArcs(data: SunburstNode) { const rootId = data.name; const ctx: BuildContext = { arcs: [], focusById: new Map(), maxDepth: 0, rootId, arcIndex: 0, }; layoutNode(data, rootId, 0, 0, 1, null, 0, [], ctx); for (const arc of ctx.arcs) { arc.a0 = toRadians(arc.a0); arc.a1 = toRadians(arc.a1); } for (const focus of ctx.focusById.values()) { focus.a0 = toRadians(focus.a0); focus.a1 = toRadians(focus.a1); } return { arcs: ctx.arcs, maxDepth: ctx.maxDepth, total: sumValues(data), focusById: ctx.focusById, rootId, }; } export function ringOptions( focusDepth: number, maxDepth: number, radius: number ) { const oneLevelCenterR = radius / maxDepth; if (focusDepth === 0) { // Root view — segments fill from the center, no navigation hub gap. return { centerR: 0, ringWidth: oneLevelCenterR }; } // Hub shrinks on drill-down; shrinks further when focus moves deeper. const depthPastFirstDrill = Math.max(0, focusDepth - 1); const centerScale = Math.max( 0.45, DRILL_CENTER_SCALE - depthPastFirstDrill * DRILL_CENTER_DEPTH_SHRINK ); const centerR = oneLevelCenterR * centerScale; const visibleRings = Math.max(1, maxDepth - focusDepth); const ringWidth = (radius - centerR) / visibleRings; return { centerR, ringWidth }; } export function geometryFor( arc: ArcDatum, focus: Focus, maxDepth: number, radius: number ): ArcGeometry | null { if (arc.depth <= focus.depth) { return null; } if (arc.id !== focus.id && !arc.id.startsWith(`${focus.id}${ID_SEP}`)) { return null; } const { centerR, ringWidth } = ringOptions(focus.depth, maxDepth, radius); const relativeDepth = arc.depth - focus.depth; const focusSpan = focus.a1 - focus.a0; const mapAngle = (angle: number) => { if (focusSpan <= 1e-9) { return TOP; } return TOP + ((angle - focus.a0) / focusSpan) * TWO_PI; }; return { a0: mapAngle(arc.a0), a1: mapAngle(arc.a1), innerR: centerR + (relativeDepth - 1) * ringWidth, outerR: centerR + relativeDepth * ringWidth, }; } export function lerpGeometry( from: ArcGeometry, to: ArcGeometry, progress: number ): ArcGeometry { const t = Math.min(1, Math.max(0, progress)); const fromMid = (from.a0 + from.a1) / 2; const toMid = (to.a0 + to.a1) / 2; const fromHalf = (from.a1 - from.a0) / 2; const toHalf = (to.a1 - to.a0) / 2; const mid = lerpAngle(fromMid, toMid, t); const half = fromHalf + (toHalf - fromHalf) * t; return { a0: mid - half, a1: mid + half, innerR: from.innerR + (to.innerR - from.innerR) * t, outerR: from.outerR + (to.outerR - from.outerR) * t, }; } function lerpAngle(from: number, to: number, progress: number): number { let delta = to - from; while (delta > Math.PI) { delta -= TWO_PI; } while (delta < -Math.PI) { delta += TWO_PI; } return from + delta * progress; } function pointGeometry(source: ArcGeometry): ArcGeometry { const mid = (source.a0 + source.a1) / 2; const radius = (source.innerR + source.outerR) / 2; const pin = Math.max(0, Math.min(radius * 0.12, source.innerR)); return { a0: mid, a1: mid, innerR: pin, outerR: pin }; } /** Zoom morph — lerps matching arcs; entering/exiting arcs collapse to a point. */ export function transitionGeometry( arc: ArcDatum, fromFocus: Focus, toFocus: Focus, maxDepth: number, radius: number, progress: number ): ArcGeometry | null { const from = geometryFor(arc, fromFocus, maxDepth, radius); const to = geometryFor(arc, toFocus, maxDepth, radius); if (!(from || to)) { return null; } if (from && to) { return lerpGeometry(from, to, progress); } if (from) { return lerpGeometry(from, pointGeometry(from), progress); } if (to) { return lerpGeometry(pointGeometry(to), to, progress); } return null; } /** Normalized clockwise angle from 12 o'clock (0 → 1). */ export function clockwiseFraction(angle: number): number { let normalized = angle - TOP; if (normalized < 0) { normalized += TWO_PI; } return normalized / TWO_PI; } /** Ring-chart-style enter delay (seconds) — scale from center. */ export interface SunburstSegmentEnterDelays { delay: number; } export interface SunburstEnterTiming { segmentDelays: Map; maxDelay: number; } /** Matches ring chart expand — each ring/segment grows from the chart center. */ export function buildSunburstEnterTiming( arcs: ArcDatum[], staggerScale = 1 ): SunburstEnterTiming { const scale = Math.max(0.25, staggerScale); const byDepth = new Map(); for (const arc of arcs) { const list = byDepth.get(arc.depth) ?? []; list.push(arc); byDepth.set(arc.depth, list); } const segmentDelays = new Map(); let maxDelay = 0; for (const [, ringArcs] of byDepth) { const sorted = [...ringArcs].sort( (a, b) => clockwiseFraction(a.a0) - clockwiseFraction(b.a0) ); const ringIndex = (sorted[0]?.depth ?? 1) - 1; for (const [index, arc] of sorted.entries()) { const delay = (ringIndex * 0.12 + index * 0.08) * scale; segmentDelays.set(arc.id, { delay }); maxDelay = Math.max(maxDelay, delay); } } return { segmentDelays, maxDelay }; } /** @deprecated Use buildSunburstEnterTiming */ export interface SunburstRevealSchedule { ringStarts: Map; ringDuration: number; segmentsCompleteAt: number; labelsStart: number; labelDuration: number; } /** @deprecated Use buildSunburstEnterTiming */ export function buildRevealSchedule( arcs: ArcDatum[], staggerScale = 1 ): SunburstRevealSchedule { const timing = buildSunburstEnterTiming(arcs, staggerScale); const ringStarts = new Map(); for (const arc of arcs) { const delays = timing.segmentDelays.get(arc.id); if (delays) { ringStarts.set(arc.depth, delays.delay); } } return { ringStarts, ringDuration: 0.6, segmentsCompleteAt: timing.maxDelay, labelsStart: timing.maxDelay + 0.12, labelDuration: 0.2, }; } /** @deprecated Ring sweep reveal — use expand + sweep enter instead. */ export function segmentRevealFromRingSweep( ringProgress: number, a0: number, a1: number ): { angular: number; radial: number } { const radial = Math.min(1, Math.max(0, ringProgress)); const startF = clockwiseFraction(a0); const endF = clockwiseFraction(a1); if (ringProgress <= startF) { return { angular: 0, radial }; } if (ringProgress >= endF) { return { angular: 1, radial }; } const angular = (ringProgress - startF) / Math.max(endF - startF, 1e-9); return { angular, radial }; } /** @deprecated Use buildSunburstEnterTiming */ export function buildRevealDelays(arcs: ArcDatum[]): Map { const timing = buildSunburstEnterTiming(arcs); const map = new Map(); for (const arc of arcs) { map.set(arc.id, timing.segmentDelays.get(arc.id)?.delay ?? 0); } return map; } export function arcPath( geometry: ArcGeometry, progress: number, radialProgress = progress ): string | null { if (progress <= 0 && radialProgress <= 0) { return null; } const p = Math.min(1, Math.max(0, progress)); const radialP = Math.min(1, Math.max(0, radialProgress)); const { a0, a1, innerR, outerR } = geometry; if (p >= 1 && radialP >= 1) { return arcPathFromGeometry(geometry); } const span = a1 - a0; // Clockwise sweep from the segment's leading edge (matches pie chart enter). const currentA0 = a0; const currentA1 = a0 + span * p; const currentInner = innerR < 1 ? 0 : innerR; const currentOuter = innerR < 1 ? outerR * radialP : innerR + (outerR - innerR) * radialP; return arcPathFromRadii(currentA0, currentA1, currentInner, currentOuter); } function arcPathFromGeometry(geometry: ArcGeometry): string | null { const { a0, a1, innerR, outerR } = geometry; return arcPathFromRadii(a0, a1, innerR, outerR); } function arcPathFromRadii( currentA0: number, currentA1: number, currentInner: number, currentOuter: number ): string | null { if (currentOuter - currentInner < 0.5 || currentA1 - currentA0 < 0.001) { return null; } const largeArc = currentA1 - currentA0 > Math.PI ? 1 : 0; const outerX0 = Math.sin(currentA0) * currentOuter; const outerY0 = -Math.cos(currentA0) * currentOuter; const outerX1 = Math.sin(currentA1) * currentOuter; const outerY1 = -Math.cos(currentA1) * currentOuter; if (currentInner < 1) { return `M 0 0 L ${outerX0} ${outerY0} A ${currentOuter} ${currentOuter} 0 ${largeArc} 1 ${outerX1} ${outerY1} Z`; } const innerX1 = Math.sin(currentA1) * currentInner; const innerY1 = -Math.cos(currentA1) * currentInner; const innerX0 = Math.sin(currentA0) * currentInner; const innerY0 = -Math.cos(currentA0) * currentInner; return `M ${outerX0} ${outerY0} A ${currentOuter} ${currentOuter} 0 ${largeArc} 1 ${outerX1} ${outerY1} L ${innerX1} ${innerY1} A ${currentInner} ${currentInner} 0 ${largeArc} 0 ${innerX0} ${innerY0} Z`; } export function centroidAngle(arc: ArcDatum): number { return (arc.a0 + arc.a1) / 2; } export function geomCentroidAngle(geometry: ArcGeometry): number { return (geometry.a0 + geometry.a1) / 2; } export function geomCentroidRadius(geometry: ArcGeometry): number { return (geometry.innerR + geometry.outerR) / 2; } /** Visible path length from focus to hovered arc (in ring count). */ export function visibleHoverPathLength( hoveredDepth: number, focusDepth: number ): number { return Math.max(1, hoveredDepth - focusDepth); } /** Scale hover grow so deep paths and wide drill-down rings stay within budget. */ export function hoverGrowForPathSegment( hoverPop: number, ringWidth: number, pathLength: number ): number { const maxTotalGrow = ringWidth * HOVER_GROW_RING_BUDGET; const budgetPerSegment = maxTotalGrow / pathLength; const perSegmentCap = ringWidth * HOVER_GROW_SEGMENT_CAP; return Math.min(hoverPop, perSegmentCap, budgetPerSegment); } /** * Max radial thickness for a hovered segment — matches one expanded ring at the * first drill level (e.g. Enterprise under Product). */ export function maxHoverSegmentThickness( maxDepth: number, radius: number, hoverPop: number, referenceFocusDepth = 1 ): number { const { ringWidth } = ringOptions(referenceFocusDepth, maxDepth, radius); const grow = hoverGrowForPathSegment(hoverPop, ringWidth, 1); return ringWidth + grow; } export function buildHoverGrowTargets( arcs: ArcDatum[], hoveredArc: ArcDatum, focus: Focus, maxDepth: number, radius: number, hoverPop: number, isOnHoverPath: (arc: ArcDatum, hoveredId: string) => boolean ): Map { const targets = new Map(); const { ringWidth } = ringOptions(focus.depth, maxDepth, radius); const pathLength = visibleHoverPathLength(hoveredArc.depth, focus.depth); const segmentGrow = hoverGrowForPathSegment(hoverPop, ringWidth, pathLength); const maxExpandedThickness = maxHoverSegmentThickness( maxDepth, radius, hoverPop ); for (const d of arcs) { if (!isOnHoverPath(d, hoveredArc.id) || d.depth <= focus.depth) { continue; } const base = geometryFor(d, focus, maxDepth, radius); const baseThickness = base ? base.outerR - base.innerR : maxExpandedThickness; const allowedGrow = baseThickness >= maxExpandedThickness ? 0 : Math.min(segmentGrow, maxExpandedThickness - baseThickness); targets.set(d.id, allowedGrow); } return targets; } /** Inset reserved around the drawable chart so hover growth stays inside the view box. */ export function defaultSunburstGrowPadding( maxDepth: number, size: number, hoverPop: number ): number { const fullRadius = size / 2; const rootRingWidth = fullRadius / Math.max(1, maxDepth); const pathLength = Math.max(1, maxDepth - 1); const segmentGrow = hoverGrowForPathSegment( hoverPop, rootRingWidth, pathLength ); return Math.ceil(segmentGrow * pathLength + segmentGrow); } /** Sum of hover grow from ancestors on the path to this arc (excludes self). */ export function ancestorGrowOffset( arcId: string, growAmountForArc: (id: string) => number ): number { const parts = arcId.split(ID_SEP); let push = 0; for (let i = 1; i < parts.length; i++) { push += growAmountForArc(parts.slice(0, i).join(ID_SEP)); } return push; } /** Shift descendants outward and expand the hovered segment on its outer edge. */ export function applyHoverGrow( base: ArcGeometry, arcId: string, growAmountForArc: (id: string) => number, maxExpandedThickness: number ): ArcGeometry { const push = ancestorGrowOffset(arcId, growAmountForArc); const ownGrow = growAmountForArc(arcId); if (push <= 0 && ownGrow <= 0) { return base; } const baseThickness = base.outerR - base.innerR; if (baseThickness >= maxExpandedThickness) { if (push <= 0) { return base; } return { ...base, innerR: base.innerR + push, outerR: base.outerR + push, }; } const innerR = base.innerR + push; let outerR = base.outerR + push + ownGrow; const thickness = outerR - innerR; if (thickness > maxExpandedThickness) { outerR = innerR + maxExpandedThickness; } return { ...base, innerR, outerR, }; } export function localProgress( progress: number, delay: number, duration: number ): number { if (progress <= delay) { return 0; } if (duration <= 0) { return 1; } return Math.min(1, (progress - delay) / duration); } 4e:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@bklit","registryDependencies":["@bklit/chart-animation","@bklit/utils"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/charts/sunburst-chart.tsx","content":"$51","type":"registry:component","target":"components/charts/sunburst-chart.tsx"},{"path":"src/charts/sunburst-context.tsx","content":"$52","type":"registry:component","target":"components/charts/sunburst-context.tsx"},{"path":"src/charts/sunburst-segment.tsx","content":"$53","type":"registry:component","target":"components/charts/sunburst-segment.tsx"},{"path":"src/charts/sunburst-center.tsx","content":"$54","type":"registry:component","target":"components/charts/sunburst-center.tsx"},{"path":"src/charts/sunburst-breadcrumb.tsx","content":"$55","type":"registry:component","target":"components/charts/sunburst-breadcrumb.tsx"},{"path":"src/charts/sunburst-hint.tsx","content":"$56","type":"registry:component","target":"components/charts/sunburst-hint.tsx"},{"path":"src/charts/sunburst-labels.tsx","content":"$57","type":"registry:component","target":"components/charts/sunburst-labels.tsx"},{"path":"src/charts/sunburst.ts","content":"$58","type":"registry:component","target":"components/charts/sunburst.ts"},{"path":"src/charts/sunburst-data.ts","content":"export interface SunburstNode {\n name: string;\n value?: number;\n color?: string;\n /** Optional fill override for patterns/gradients (e.g., \"url(#patternId)\") */\n fill?: string;\n children?: SunburstNode[];\n}\n","type":"registry:component","target":"components/charts/sunburst-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]