@cronus-ui/ui 0.6.0

package/dist/charts/use-animated-y-domains.js

@@ -0,0 +1,150 @@
+"use client";
+import { animate, useReducedMotion } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing.js";
+import { domainsEqual, isYDomainTweenPhase, resolveAnimatedYDestinationDomains, shouldTweenYDomain, } from "./y-domain-utils.js";
+function lerpDomain(from, to, progress) {
+    return [from[0] + (to[0] - from[0]) * progress, from[1] + (to[1] - from[1]) * progress];
+}
+function snapDomains(domains, setAnimatedByAxis, animatedRef) {
+    if (domainsEqual(animatedRef.current, domains)) {
+        return;
+    }
+    setAnimatedByAxis(domains);
+    animatedRef.current = domains;
+}
+function tweenDomains({ destination, durationMs, enabled, reducedMotion, animatedRef, setAnimatedByAxis, onSettled, }) {
+    if (domainsEqual(animatedRef.current, destination)) {
+        onSettled?.();
+        return;
+    }
+    if (!enabled || reducedMotion) {
+        snapDomains(destination, setAnimatedByAxis, animatedRef);
+        onSettled?.();
+        return;
+    }
+    const axisIds = Object.keys(destination);
+    const fromSnapshot = animatedRef.current;
+    let needsTween = false;
+    for (const axisId of axisIds) {
+        const from = fromSnapshot[axisId] ?? destination[axisId] ?? [0, 100];
+        const to = destination[axisId] ?? from;
+        if (shouldTweenYDomain(from, to)) {
+            needsTween = true;
+            break;
+        }
+    }
+    if (!needsTween) {
+        snapDomains(destination, setAnimatedByAxis, animatedRef);
+        onSettled?.();
+        return;
+    }
+    const fromByAxis = {};
+    for (const axisId of axisIds) {
+        fromByAxis[axisId] = fromSnapshot[axisId] ?? destination[axisId] ?? [0, 100];
+    }
+    const control = animate(0, 1, {
+        duration: durationMs / 1000,
+        ease: [...LINE_LOADING_PULSE_EASE],
+        onUpdate: (progress) => {
+            const next = {};
+            for (const axisId of axisIds) {
+                const from = fromByAxis[axisId] ?? destination[axisId] ?? [0, 100];
+                const to = destination[axisId] ?? from;
+                next[axisId] = shouldTweenYDomain(from, to) ? lerpDomain(from, to, progress) : to;
+            }
+            animatedRef.current = next;
+            setAnimatedByAxis(next);
+        },
+        onComplete: () => {
+            snapDomains(destination, setAnimatedByAxis, animatedRef);
+            onSettled?.();
+        },
+    });
+    return control;
+}
+export function useAnimatedYDomains({ enabled, durationMs, chartPhase, skeletonByAxis, targetByAxis, onSettled, tweenOnTargetChange = false, }) {
+    const reducedMotion = useReducedMotion();
+    const destinationByAxis = resolveAnimatedYDestinationDomains(chartPhase, skeletonByAxis, targetByAxis);
+    const destinationRef = useRef(destinationByAxis);
+    destinationRef.current = destinationByAxis;
+    const skeletonRef = useRef(skeletonByAxis);
+    skeletonRef.current = skeletonByAxis;
+    const targetRef = useRef(targetByAxis);
+    targetRef.current = targetByAxis;
+    const [animatedByAxis, setAnimatedByAxis] = useState(destinationByAxis);
+    const animatedRef = useRef(animatedByAxis);
+    const prevPhaseRef = useRef(chartPhase);
+    const onSettledRef = useRef(onSettled);
+    onSettledRef.current = onSettled;
+    useEffect(() => {
+        animatedRef.current = animatedByAxis;
+    }, [animatedByAxis]);
+    useEffect(() => {
+        if (prevPhaseRef.current === chartPhase) {
+            return;
+        }
+        prevPhaseRef.current = chartPhase;
+        const settle = () => {
+            onSettledRef.current?.();
+        };
+        // Keep grid spacing frozen while the series exits the viewport.
+        if (chartPhase === "exiting") {
+            snapDomains(skeletonRef.current, setAnimatedByAxis, animatedRef);
+            return;
+        }
+        if (chartPhase === "exitingReady") {
+            snapDomains(targetRef.current, setAnimatedByAxis, animatedRef);
+            return;
+        }
+        if (chartPhase === "loading") {
+            snapDomains(skeletonRef.current, setAnimatedByAxis, animatedRef);
+            return;
+        }
+        if (chartPhase === "revealing" || chartPhase === "ready") {
+            snapDomains(targetRef.current, setAnimatedByAxis, animatedRef);
+            return;
+        }
+        if (!isYDomainTweenPhase(chartPhase)) {
+            return;
+        }
+        const control = tweenDomains({
+            destination: destinationRef.current,
+            durationMs,
+            enabled,
+            reducedMotion,
+            animatedRef,
+            setAnimatedByAxis,
+            onSettled: settle,
+        });
+        return () => control?.stop();
+    }, [chartPhase, durationMs, enabled, reducedMotion]);
+    const targetSignature = JSON.stringify(targetByAxis);
+    const prevTargetSignatureRef = useRef(targetSignature);
+    useEffect(() => {
+        const inLivePhase = chartPhase === "ready" || chartPhase === "revealing";
+        if (!inLivePhase) {
+            prevTargetSignatureRef.current = targetSignature;
+            return;
+        }
+        if (prevTargetSignatureRef.current === targetSignature) {
+            return;
+        }
+        prevTargetSignatureRef.current = targetSignature;
+        if (tweenOnTargetChange && chartPhase === "ready") {
+            const control = tweenDomains({
+                destination: targetRef.current,
+                durationMs,
+                enabled,
+                reducedMotion,
+                animatedRef,
+                setAnimatedByAxis,
+                onSettled: () => onSettledRef.current?.(),
+            });
+            return () => control?.stop();
+        }
+        snapDomains(targetRef.current, setAnimatedByAxis, animatedRef);
+    }, [chartPhase, durationMs, enabled, reducedMotion, targetSignature, tweenOnTargetChange]);
+    return animatedByAxis;
+}
+//# sourceMappingURL=use-animated-y-domains.js.map

package/dist/charts/use-chart-interaction.d.ts

@@ -0,0 +1,41 @@
+import type { scaleLinear, scaleTime } from "@visx/scale";
+import type { LineConfig, Margin, TooltipData } from "./chart-context.js";
+type ScaleTime = ReturnType<typeof scaleTime<number>>;
+type ScaleLinear = ReturnType<typeof scaleLinear<number>>;
+export interface ChartSelection {
+    startX: number;
+    endX: number;
+    startIndex: number;
+    endIndex: number;
+    active: boolean;
+}
+interface UseChartInteractionParams {
+    xScale: ScaleTime;
+    yScale: ScaleLinear;
+    yScales: Record<string, ScaleLinear>;
+    data: Record<string, unknown>[];
+    lines: LineConfig[];
+    margin: Margin;
+    xAccessor: (d: Record<string, unknown>) => Date;
+    bisectDate: (data: Record<string, unknown>[], date: Date, lo: number) => number;
+    canInteract: boolean;
+}
+interface ChartInteractionResult {
+    tooltipData: TooltipData | null;
+    setTooltipData: React.Dispatch<React.SetStateAction<TooltipData | null>>;
+    selection: ChartSelection | null;
+    clearSelection: () => void;
+    interactionHandlers: {
+        onMouseMove?: (event: React.MouseEvent<SVGGElement>) => void;
+        onMouseLeave?: () => void;
+        onMouseDown?: (event: React.MouseEvent<SVGGElement>) => void;
+        onMouseUp?: () => void;
+        onTouchStart?: (event: React.TouchEvent<SVGGElement>) => void;
+        onTouchMove?: (event: React.TouchEvent<SVGGElement>) => void;
+        onTouchEnd?: () => void;
+    };
+    interactionStyle: React.CSSProperties;
+}
+export declare function useChartInteraction({ xScale, yScale, yScales, data, lines, margin, xAccessor, bisectDate, canInteract, }: UseChartInteractionParams): ChartInteractionResult;
+export {};
+//# sourceMappingURL=use-chart-interaction.d.ts.map

package/dist/charts/use-chart-interaction.js

@@ -0,0 +1,244 @@
+"use client";
+import { localPoint } from "@visx/event";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useScheduledTooltip } from "./use-scheduled-tooltip.js";
+import { normalizeYAxisId } from "./y-axis-scales.js";
+export function useChartInteraction({ xScale, yScale, yScales, data, lines, margin, xAccessor, bisectDate, canInteract, }) {
+    const [selection, setSelection] = useState(null);
+    const { tooltipData, setTooltipData, scheduleTooltip, clearTooltip, resetTooltipDedupe } = useScheduledTooltip();
+    const isDraggingRef = useRef(false);
+    const dragStartXRef = useRef(0);
+    const lastHoveredXRef = useRef(null);
+    const resolveTooltipFromX = useCallback((pixelX) => {
+        const x0 = xScale.invert(pixelX);
+        const index = bisectDate(data, x0, 1);
+        const d0 = data[index - 1];
+        const d1 = data[index];
+        if (!d0) {
+            return null;
+        }
+        let d = d0;
+        let finalIndex = index - 1;
+        if (d1) {
+            const d0Time = xAccessor(d0).getTime();
+            const d1Time = xAccessor(d1).getTime();
+            if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+                d = d1;
+                finalIndex = index;
+            }
+        }
+        const yPositions = {};
+        for (const line of lines) {
+            const value = d[line.dataKey];
+            if (typeof value === "number") {
+                const axisScale = yScales[normalizeYAxisId(line.yAxisId)] ?? yScale;
+                yPositions[line.dataKey] = axisScale(value) ?? 0;
+            }
+        }
+        return {
+            point: d,
+            index: finalIndex,
+            x: xScale(xAccessor(d)) ?? 0,
+            yPositions,
+        };
+    }, [xScale, yScale, yScales, data, lines, xAccessor, bisectDate]);
+    const resolveIndexFromX = useCallback((pixelX) => {
+        const x0 = xScale.invert(pixelX);
+        const index = bisectDate(data, x0, 1);
+        const d0 = data[index - 1];
+        const d1 = data[index];
+        if (!d0) {
+            return 0;
+        }
+        if (d1) {
+            const d0Time = xAccessor(d0).getTime();
+            const d1Time = xAccessor(d1).getTime();
+            if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+                return index;
+            }
+        }
+        return index - 1;
+    }, [xScale, data, xAccessor, bisectDate]);
+    const getChartX = useCallback((event, touchIndex = 0) => {
+        let point = null;
+        if ("touches" in event) {
+            const touch = event.touches[touchIndex];
+            if (!touch) {
+                return null;
+            }
+            const svg = event.currentTarget.ownerSVGElement;
+            if (!svg) {
+                return null;
+            }
+            point = localPoint(svg, touch);
+        }
+        else {
+            point = localPoint(event);
+        }
+        if (!point) {
+            return null;
+        }
+        return point.x - margin.left;
+    }, [margin.left]);
+    const handleMouseMove = useCallback((event) => {
+        const chartX = getChartX(event);
+        if (chartX === null) {
+            return;
+        }
+        if (isDraggingRef.current) {
+            const startX = Math.min(dragStartXRef.current, chartX);
+            const endX = Math.max(dragStartXRef.current, chartX);
+            setSelection({
+                startX,
+                endX,
+                startIndex: resolveIndexFromX(startX),
+                endIndex: resolveIndexFromX(endX),
+                active: true,
+            });
+            return;
+        }
+        lastHoveredXRef.current = chartX;
+        const tooltip = resolveTooltipFromX(chartX);
+        if (tooltip) {
+            scheduleTooltip(tooltip);
+        }
+    }, [getChartX, resolveTooltipFromX, resolveIndexFromX, scheduleTooltip]);
+    const handleMouseLeave = useCallback(() => {
+        lastHoveredXRef.current = null;
+        clearTooltip();
+        if (isDraggingRef.current) {
+            isDraggingRef.current = false;
+        }
+        setSelection(null);
+    }, [clearTooltip]);
+    const handleMouseDown = useCallback((event) => {
+        const chartX = getChartX(event);
+        if (chartX === null) {
+            return;
+        }
+        isDraggingRef.current = true;
+        dragStartXRef.current = chartX;
+        clearTooltip();
+        setSelection(null);
+    }, [getChartX, clearTooltip]);
+    const handleMouseUp = useCallback(() => {
+        if (isDraggingRef.current) {
+            isDraggingRef.current = false;
+        }
+        setSelection(null);
+    }, []);
+    const handleTouchStart = useCallback((event) => {
+        if (event.touches.length === 1) {
+            event.preventDefault();
+            const chartX = getChartX(event, 0);
+            if (chartX === null) {
+                return;
+            }
+            lastHoveredXRef.current = chartX;
+            const tooltip = resolveTooltipFromX(chartX);
+            if (tooltip) {
+                scheduleTooltip(tooltip);
+            }
+        }
+        else if (event.touches.length === 2) {
+            event.preventDefault();
+            resetTooltipDedupe();
+            clearTooltip();
+            const x0 = getChartX(event, 0);
+            const x1 = getChartX(event, 1);
+            if (x0 === null || x1 === null) {
+                return;
+            }
+            const startX = Math.min(x0, x1);
+            const endX = Math.max(x0, x1);
+            setSelection({
+                startX,
+                endX,
+                startIndex: resolveIndexFromX(startX),
+                endIndex: resolveIndexFromX(endX),
+                active: true,
+            });
+        }
+    }, [
+        getChartX,
+        resolveTooltipFromX,
+        resolveIndexFromX,
+        scheduleTooltip,
+        resetTooltipDedupe,
+        clearTooltip,
+    ]);
+    const handleTouchMove = useCallback((event) => {
+        if (event.touches.length === 1) {
+            event.preventDefault();
+            const chartX = getChartX(event, 0);
+            if (chartX === null) {
+                return;
+            }
+            lastHoveredXRef.current = chartX;
+            const tooltip = resolveTooltipFromX(chartX);
+            if (tooltip) {
+                scheduleTooltip(tooltip);
+            }
+        }
+        else if (event.touches.length === 2) {
+            event.preventDefault();
+            const x0 = getChartX(event, 0);
+            const x1 = getChartX(event, 1);
+            if (x0 === null || x1 === null) {
+                return;
+            }
+            const startX = Math.min(x0, x1);
+            const endX = Math.max(x0, x1);
+            setSelection({
+                startX,
+                endX,
+                startIndex: resolveIndexFromX(startX),
+                endIndex: resolveIndexFromX(endX),
+                active: true,
+            });
+        }
+    }, [getChartX, resolveTooltipFromX, resolveIndexFromX, scheduleTooltip]);
+    const handleTouchEnd = useCallback(() => {
+        clearTooltip();
+        setSelection(null);
+    }, [clearTooltip]);
+    const clearSelection = useCallback(() => {
+        setSelection(null);
+    }, []);
+    // Re-anchor tooltip/crosshair when x-scale or visible data changes (e.g. brush zoom commit).
+    useEffect(() => {
+        if (!canInteract || lastHoveredXRef.current === null) {
+            return;
+        }
+        const tooltip = resolveTooltipFromX(lastHoveredXRef.current);
+        if (tooltip) {
+            scheduleTooltip(tooltip, `${tooltip.index}:${Math.round(tooltip.x)}`);
+            return;
+        }
+        clearTooltip();
+    }, [canInteract, clearTooltip, resolveTooltipFromX, scheduleTooltip]);
+    const interactionHandlers = canInteract
+        ? {
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            onMouseDown: handleMouseDown,
+            onMouseUp: handleMouseUp,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+        }
+        : {};
+    const interactionStyle = {
+        cursor: canInteract ? "crosshair" : "default",
+        touchAction: "none",
+    };
+    return {
+        tooltipData,
+        setTooltipData,
+        selection,
+        clearSelection,
+        interactionHandlers,
+        interactionStyle,
+    };
+}
+//# sourceMappingURL=use-chart-interaction.js.map

package/dist/charts/use-chart-phase-orchestrator.d.ts

@@ -0,0 +1,23 @@
+import { type ChartPhase, type ChartStatus } from "./chart-phase.js";
+export interface UseChartPhaseOrchestratorOptions {
+    chartStatus: ChartStatus;
+    targetData: Record<string, unknown>[];
+    skeletonData: Record<string, unknown>[];
+    animationDuration: number;
+    yDomainTweenDuration: number;
+    /** Signature of motion URL state — replays clip reveal in Studio. */
+    revealSignature?: string;
+    /** Skip mount/signature enter reveal (static docs previews). */
+    skipEnterReveal?: boolean;
+}
+export declare function useChartPhaseOrchestrator({ chartStatus, targetData, skeletonData, animationDuration, yDomainTweenDuration, revealSignature, skipEnterReveal, }: UseChartPhaseOrchestratorOptions): {
+    chartPhase: ChartPhase;
+    plotData: Record<string, unknown>[];
+    revealEpoch: number;
+    concealEpoch: number;
+    isLoaded: boolean;
+    notifyLoadingPulseComplete: () => void;
+    notifyRevealConcealComplete: () => void;
+    notifyYDomainTweenComplete: () => void;
+};
+//# sourceMappingURL=use-chart-phase-orchestrator.d.ts.map

package/dist/charts/use-chart-phase-orchestrator.js

@@ -0,0 +1,139 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { resolveRestingChartPhase } from "./chart-phase.js";
+export function useChartPhaseOrchestrator({ chartStatus, targetData, skeletonData, animationDuration, yDomainTweenDuration, revealSignature = "", skipEnterReveal = false, }) {
+    const [chartPhase, setChartPhase] = useState(() => resolveRestingChartPhase(chartStatus));
+    const [plotData, setPlotData] = useState(() => chartStatus === "loading" ? skeletonData : targetData);
+    const [revealEpoch, setRevealEpoch] = useState(0);
+    const [concealEpoch, setConcealEpoch] = useState(0);
+    const [isLoaded, setIsLoaded] = useState(() => chartStatus === "ready");
+    const prevStatusRef = useRef(chartStatus);
+    const phaseRef = useRef(chartPhase);
+    phaseRef.current = chartPhase;
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: status transition branches for animation durations
+    useEffect(() => {
+        const prevStatus = prevStatusRef.current;
+        if (prevStatus === chartStatus) {
+            return;
+        }
+        prevStatusRef.current = chartStatus;
+        if (chartStatus === "ready" && prevStatus === "loading") {
+            setIsLoaded(false);
+            if (animationDuration <= 0) {
+                if (yDomainTweenDuration <= 0) {
+                    setPlotData(targetData);
+                    setChartPhase("revealing");
+                }
+                else {
+                    setChartPhase("gridTweenReady");
+                }
+            }
+            else {
+                setChartPhase("exiting");
+            }
+            return;
+        }
+        if (chartStatus === "loading" && prevStatus === "ready") {
+            setIsLoaded(false);
+            if (animationDuration <= 0) {
+                if (yDomainTweenDuration <= 0) {
+                    setPlotData(skeletonData);
+                    setChartPhase("loading");
+                }
+                else {
+                    setChartPhase("gridTweenLoading");
+                }
+            }
+            else {
+                setConcealEpoch((epoch) => epoch + 1);
+                setChartPhase("exitingReady");
+            }
+        }
+    }, [animationDuration, chartStatus, skeletonData, targetData, yDomainTweenDuration]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: revealSignature replays enter
+    useEffect(() => {
+        if (skipEnterReveal) {
+            return;
+        }
+        if (chartStatus !== "ready") {
+            return;
+        }
+        if (phaseRef.current !== "ready") {
+            return;
+        }
+        setChartPhase("revealing");
+        setIsLoaded(false);
+    }, [animationDuration, chartStatus, revealSignature, skipEnterReveal]);
+    useEffect(() => {
+        switch (chartPhase) {
+            case "loading":
+                if (chartStatus === "loading") {
+                    setPlotData(skeletonData);
+                }
+                break;
+            case "exiting":
+                setPlotData(skeletonData);
+                break;
+            case "exitingReady":
+            case "gridTweenLoading":
+            case "gridTweenReady":
+            case "revealing":
+            case "ready":
+                setPlotData(targetData);
+                break;
+            default:
+                break;
+        }
+    }, [chartPhase, chartStatus, skeletonData, targetData]);
+    /** Loading pulse exit finished — tween grid to ready spacing next. */
+    const notifyLoadingPulseComplete = useCallback(() => {
+        if (phaseRef.current !== "exiting") {
+            return;
+        }
+        setChartPhase("gridTweenReady");
+    }, []);
+    /** Ready series conceal finished — tween grid to loading spacing next. */
+    const notifyRevealConcealComplete = useCallback(() => {
+        if (phaseRef.current !== "exitingReady") {
+            return;
+        }
+        setChartPhase("gridTweenLoading");
+    }, []);
+    /** Grid tween finished — enter the next resting phase. */
+    const notifyYDomainTweenComplete = useCallback(() => {
+        if (phaseRef.current === "gridTweenLoading") {
+            setChartPhase("loading");
+            return;
+        }
+        if (phaseRef.current === "gridTweenReady") {
+            setChartPhase("revealing");
+        }
+    }, []);
+    useEffect(() => {
+        if (chartPhase !== "revealing") {
+            return;
+        }
+        setRevealEpoch((epoch) => epoch + 1);
+        if (animationDuration <= 0) {
+            setChartPhase("ready");
+            setIsLoaded(true);
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            setChartPhase("ready");
+            setIsLoaded(true);
+        }, animationDuration);
+        return () => window.clearTimeout(timer);
+    }, [animationDuration, chartPhase]);
+    return {
+        chartPhase,
+        plotData,
+        revealEpoch,
+        concealEpoch,
+        isLoaded,
+        notifyLoadingPulseComplete,
+        notifyRevealConcealComplete,
+        notifyYDomainTweenComplete,
+    };
+}
+//# sourceMappingURL=use-chart-phase-orchestrator.js.map

package/dist/charts/use-enter-complete.d.ts

@@ -0,0 +1,8 @@
+import type { MotionValue } from "motion/react";
+/**
+ * Returns true once a mount-progress MotionValue reaches 1.
+ * Use to swap animated MotionValue-driven props for static values after
+ * enter completes — drops per-frame subscriptions during pan/hover.
+ */
+export declare function useEnterComplete(mountProgress: MotionValue<number>): boolean;
+//# sourceMappingURL=use-enter-complete.d.ts.map

package/dist/charts/use-enter-complete.js

@@ -0,0 +1,23 @@
+"use client";
+import { useEffect, useState } from "react";
+/**
+ * Returns true once a mount-progress MotionValue reaches 1.
+ * Use to swap animated MotionValue-driven props for static values after
+ * enter completes — drops per-frame subscriptions during pan/hover.
+ */
+export function useEnterComplete(mountProgress) {
+    const [complete, setComplete] = useState(() => mountProgress.get() >= 1);
+    useEffect(() => {
+        if (mountProgress.get() >= 1) {
+            setComplete(true);
+            return;
+        }
+        return mountProgress.on("change", (value) => {
+            if (value >= 1) {
+                setComplete(true);
+            }
+        });
+    }, [mountProgress]);
+    return complete;
+}
+//# sourceMappingURL=use-enter-complete.js.map

package/dist/charts/use-grid-shimmer.d.ts

@@ -0,0 +1,16 @@
+export interface UseGridShimmerOptions {
+    innerWidth: number;
+    shimmer: boolean;
+    shimmerLength: number;
+    shimmerSpeed: number;
+    shimmerSync: boolean;
+    /** When false, shimmer animation is paused (e.g. during exit transition). */
+    active: boolean;
+    /** Run a single synced sweep (loading → ready handoff). */
+    oneShot?: boolean;
+}
+export declare function useGridShimmer({ innerWidth, shimmer, shimmerLength, shimmerSpeed, shimmerSync, active, oneShot, }: UseGridShimmerOptions): {
+    shimmerEnabled: boolean;
+    shimmerTransform: import("motion/react").MotionValue<string>;
+};
+//# sourceMappingURL=use-grid-shimmer.d.ts.map