@cronus-ui/ui 0.6.0

package/dist/charts/sunburst-data.d.ts

@@ -0,0 +1,9 @@
+export interface SunburstNode {
+    name: string;
+    value?: number;
+    color?: string;
+    /** Optional fill override for patterns/gradients (e.g., "url(#patternId)") */
+    fill?: string;
+    children?: SunburstNode[];
+}
+//# sourceMappingURL=sunburst-data.d.ts.map

package/dist/charts/sunburst-data.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sunburst-data.js.map

package/dist/charts/sunburst-hint.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import type { ArcDatum, Focus } from "./sunburst.js";
+export interface SunburstHintContext {
+    hintText: string;
+    hoveredArc: ArcDatum | null;
+    focus: Focus;
+}
+export interface SunburstHintProps {
+    className?: string;
+    children?: ReactNode | ((context: SunburstHintContext) => ReactNode);
+}
+export declare const SunburstHint: import("react").MemoExoticComponent<({ className, children }: SunburstHintProps) => import("react").JSX.Element>;
+//# sourceMappingURL=sunburst-hint.d.ts.map

package/dist/charts/sunburst-hint.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { useSunburstHover, useSunburstStable } from "./sunburst-context.js";
+export const SunburstHint = memo(function SunburstHint({ className, children }) {
+    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 = { hintText, hoveredArc, focus };
+    let content;
+    if (typeof children === "function") {
+        content = children(context);
+    }
+    else if (children == null) {
+        content = hintText;
+    }
+    else {
+        content = children;
+    }
+    return (_jsx("div", { "aria-live": "polite", className: className ?? "mt-3 min-h-5 text-center text-muted-foreground text-sm", style: { minHeight: 20 }, children: content }));
+});
+SunburstHint.displayName = "SunburstHint";
+//# sourceMappingURL=sunburst-hint.js.map

package/dist/charts/sunburst-labels.d.ts

@@ -0,0 +1,9 @@
+export interface SunburstLabelsProps {
+    fontSize?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    className?: string;
+}
+export declare const SunburstLabels: import("react").MemoExoticComponent<({ fontSize, fill, stroke, strokeWidth, className, }: SunburstLabelsProps) => import("react").JSX.Element>;
+//# sourceMappingURL=sunburst-labels.d.ts.map

package/dist/charts/sunburst-labels.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useTransform } from "motion/react";
+import { memo } from "react";
+import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation.js";
+import { applyHoverGrow, geomCentroidAngle, geomCentroidRadius, transitionGeometry, } from "./sunburst.js";
+import { sunburstCssVars, useSunburstStable } from "./sunburst-context.js";
+import { useEnterComplete } from "./use-enter-complete.js";
+import { useMountProgress } from "./use-mount-progress.js";
+export const SunburstLabels = memo(function SunburstLabels({ fontSize = 11, fill = sunburstCssVars.label, stroke = sunburstCssVars.background, strokeWidth = 2.5, className, }) {
+    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;
+    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 (_jsx("g", { className: className, children: 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 = {
+                fill,
+                fontFamily: "inherit",
+                fontSize,
+                fontWeight: 600,
+            };
+            if (strokeWidth > 0) {
+                labelStyle.paintOrder = "stroke";
+                labelStyle.stroke = stroke;
+                labelStyle.strokeLinejoin = "round";
+                labelStyle.strokeWidth = strokeWidth;
+            }
+            if (showLabels) {
+                return (_jsx("text", { dominantBaseline: "middle", pointerEvents: "none", style: { ...labelStyle, opacity: 1 }, textAnchor: "middle", transform: `rotate(${deg} ${x} ${y})`, x: x, y: y, children: arc.name }, `label-${arc.id}`));
+            }
+            return (_jsx(motion.text, { dominantBaseline: "middle", pointerEvents: "none", style: { ...labelStyle, opacity: labelOpacity }, textAnchor: "middle", transform: `rotate(${deg} ${x} ${y})`, x: x, y: y, children: arc.name }, `label-${arc.id}`));
+        }) }));
+});
+SunburstLabels.displayName = "SunburstLabels";
+//# sourceMappingURL=sunburst-labels.js.map

package/dist/charts/sunburst-segment.d.ts

@@ -0,0 +1,11 @@
+export interface SunburstSegmentProps {
+    index: number;
+    /** Optional color override */
+    color?: string;
+    /** Optional fill override (patterns/gradients) */
+    fill?: string;
+    /** Optional fill opacity override */
+    fillOpacity?: number;
+}
+export declare const SunburstSegment: import("react").MemoExoticComponent<({ index, color: colorProp, fill: fillProp, fillOpacity: fillOpacityProp, }: SunburstSegmentProps) => import("react").JSX.Element | null>;
+//# sourceMappingURL=sunburst-segment.d.ts.map

package/dist/charts/sunburst-segment.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useTransform } from "motion/react";
+import { memo, useMemo } from "react";
+import { applyHoverGrow, arcPath, transitionGeometry } from "./sunburst.js";
+import { sunburstCssVars, useSunburstHover, useSunburstStable } from "./sunburst-context.js";
+import { useEnterComplete } from "./use-enter-complete.js";
+import { useMountProgress } from "./use-mount-progress.js";
+const HOVER_DIM_TRANSITION = { duration: 0.16, ease: "easeOut" };
+export const SunburstSegment = memo(function SunburstSegment({ index, color: colorProp, fill: fillProp, fillOpacity: fillOpacityProp, }) {
+    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" : "default",
+        transformOrigin: "0px 0px",
+    };
+    const hitHandlers = {
+        onClick: () => arc.hasChildren && zoomTo(arc.id),
+        onPointerEnter: () => {
+            setHoveredArc(arc);
+            setHoveredArcIndex(index);
+        },
+    };
+    const visualPathProps = {
+        fill: segmentFill,
+        fillOpacity,
+        pointerEvents: "none",
+        stroke: sunburstCssVars.ring,
+        strokeLinejoin: "round",
+        strokeWidth: 1,
+    };
+    if (showStatic) {
+        return (_jsxs(motion.g, { animate: { opacity: layerOpacity }, initial: false, onClick: hitHandlers.onClick, onPointerEnter: hitHandlers.onPointerEnter, style: groupStyle, transition: { opacity: HOVER_DIM_TRANSITION }, children: [_jsx("path", { d: fullHitPath, fill: "transparent" }), _jsx("path", { d: fullVisualPath, ...visualPathProps })] }));
+    }
+    return (_jsxs(motion.g, { animate: { opacity: layerOpacity }, initial: false, onClick: hitHandlers.onClick, onPointerEnter: hitHandlers.onPointerEnter, style: {
+            ...groupStyle,
+            scale: enterScale,
+        }, transition: { opacity: HOVER_DIM_TRANSITION }, children: [_jsx(motion.path, { d: animatedHitPath, fill: "transparent" }), _jsx(motion.path, { d: animatedVisualPath, ...visualPathProps })] }));
+});
+SunburstSegment.displayName = "SunburstSegment";
+//# sourceMappingURL=sunburst-segment.js.map

package/dist/charts/sunburst.d.ts

@@ -0,0 +1,101 @@
+import type { SunburstNode } from "./sunburst-data.js";
+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;
+}
+export declare function sumValues(node: SunburstNode): number;
+export declare function buildArcs(data: SunburstNode): {
+    arcs: ArcDatum[];
+    maxDepth: number;
+    total: number;
+    focusById: Map<string, Focus>;
+    rootId: string;
+};
+export declare function ringOptions(focusDepth: number, maxDepth: number, radius: number): {
+    centerR: number;
+    ringWidth: number;
+};
+export declare function geometryFor(arc: ArcDatum, focus: Focus, maxDepth: number, radius: number): ArcGeometry | null;
+export declare function lerpGeometry(from: ArcGeometry, to: ArcGeometry, progress: number): ArcGeometry;
+/** Zoom morph — lerps matching arcs; entering/exiting arcs collapse to a point. */
+export declare function transitionGeometry(arc: ArcDatum, fromFocus: Focus, toFocus: Focus, maxDepth: number, radius: number, progress: number): ArcGeometry | null;
+/** Normalized clockwise angle from 12 o'clock (0 → 1). */
+export declare function clockwiseFraction(angle: number): number;
+/** Ring-chart-style enter delay (seconds) — scale from center. */
+export interface SunburstSegmentEnterDelays {
+    delay: number;
+}
+export interface SunburstEnterTiming {
+    segmentDelays: Map<string, SunburstSegmentEnterDelays>;
+    maxDelay: number;
+}
+/** Matches ring chart expand — each ring/segment grows from the chart center. */
+export declare function buildSunburstEnterTiming(arcs: ArcDatum[], staggerScale?: number): SunburstEnterTiming;
+/** @deprecated Use buildSunburstEnterTiming */
+export interface SunburstRevealSchedule {
+    ringStarts: Map<number, number>;
+    ringDuration: number;
+    segmentsCompleteAt: number;
+    labelsStart: number;
+    labelDuration: number;
+}
+/** @deprecated Use buildSunburstEnterTiming */
+export declare function buildRevealSchedule(arcs: ArcDatum[], staggerScale?: number): SunburstRevealSchedule;
+/** @deprecated Ring sweep reveal — use expand + sweep enter instead. */
+export declare function segmentRevealFromRingSweep(ringProgress: number, a0: number, a1: number): {
+    angular: number;
+    radial: number;
+};
+/** @deprecated Use buildSunburstEnterTiming */
+export declare function buildRevealDelays(arcs: ArcDatum[]): Map<string, number>;
+export declare function arcPath(geometry: ArcGeometry, progress: number, radialProgress?: number): string | null;
+export declare function centroidAngle(arc: ArcDatum): number;
+export declare function geomCentroidAngle(geometry: ArcGeometry): number;
+export declare function geomCentroidRadius(geometry: ArcGeometry): number;
+/** Visible path length from focus to hovered arc (in ring count). */
+export declare function visibleHoverPathLength(hoveredDepth: number, focusDepth: number): number;
+/** Scale hover grow so deep paths and wide drill-down rings stay within budget. */
+export declare function hoverGrowForPathSegment(hoverPop: number, ringWidth: number, pathLength: number): number;
+/**
+ * Max radial thickness for a hovered segment — matches one expanded ring at the
+ * first drill level (e.g. Enterprise under Product).
+ */
+export declare function maxHoverSegmentThickness(maxDepth: number, radius: number, hoverPop: number, referenceFocusDepth?: number): number;
+export declare function buildHoverGrowTargets(arcs: ArcDatum[], hoveredArc: ArcDatum, focus: Focus, maxDepth: number, radius: number, hoverPop: number, isOnHoverPath: (arc: ArcDatum, hoveredId: string) => boolean): Map<string, number>;
+/** Inset reserved around the drawable chart so hover growth stays inside the view box. */
+export declare function defaultSunburstGrowPadding(maxDepth: number, size: number, hoverPop: number): number;
+/** Sum of hover grow from ancestors on the path to this arc (excludes self). */
+export declare function ancestorGrowOffset(arcId: string, growAmountForArc: (id: string) => number): number;
+/** Shift descendants outward and expand the hovered segment on its outer edge. */
+export declare function applyHoverGrow(base: ArcGeometry, arcId: string, growAmountForArc: (id: string) => number, maxExpandedThickness: number): ArcGeometry;
+export declare function localProgress(progress: number, delay: number, duration: number): number;
+//# sourceMappingURL=sunburst.d.ts.map