@cronus-ui/ui 0.6.0

package/dist/charts/legend/legend-context.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+// CSS variable references for legend theming
+export const legendCssVars = {
+    background: "var(--legend)",
+    foreground: "var(--legend-foreground)",
+    muted: "var(--legend-muted)",
+    mutedForeground: "var(--legend-muted-foreground)",
+    track: "var(--legend-track)",
+};
+const LegendContext = createContext(null);
+const LegendItemContext = createContext(null);
+export function LegendProvider({ children, value, }) {
+    return _jsx(LegendContext.Provider, { value: value, children: children });
+}
+export function LegendItemProvider({ children, value, }) {
+    return _jsx(LegendItemContext.Provider, { value: value, children: children });
+}
+export function useLegend() {
+    const context = useContext(LegendContext);
+    if (!context) {
+        throw new Error("useLegend must be used within a <Legend> component.");
+    }
+    return context;
+}
+export function useLegendItem() {
+    const context = useContext(LegendItemContext);
+    if (!context) {
+        throw new Error("useLegendItem must be used within a <LegendItem> component.");
+    }
+    return context;
+}
+//# sourceMappingURL=legend-context.js.map

package/dist/charts/legend/legend-item.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export interface LegendItemProps {
+    /** Container class name */
+    className?: string;
+    /** Children components (LegendMarker, LegendLabel, LegendValue, LegendProgress) */
+    children: ReactNode;
+}
+export declare function LegendItem({ className, children }: LegendItemProps): import("react").JSX.Element;
+export declare namespace LegendItem {
+    var displayName: string;
+}
+//# sourceMappingURL=legend-item.d.ts.map

package/dist/charts/legend/legend-item.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useLegend, useLegendItem } from "./legend-context.js";
+export function LegendItem({ className = "", children }) {
+    const { setHoveredIndex } = useLegend();
+    const { index, isHovered, isFaded } = useLegendItem();
+    return (_jsx("div", { className: cn("cursor-pointer rounded-lg px-2 py-1.5 transition-all duration-150 ease-out", isHovered && "bg-legend-muted", isFaded && "opacity-40", className), "data-hovered": isHovered ? "" : undefined, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), children: children }));
+}
+LegendItem.displayName = "LegendItem";
+//# sourceMappingURL=legend-item.js.map

package/dist/charts/legend/legend-label.d.ts

@@ -0,0 +1,9 @@
+export interface LegendLabelProps {
+    /** Label class name. Default: "text-sm font-medium" */
+    className?: string;
+}
+export declare function LegendLabel({ className }: LegendLabelProps): import("react").JSX.Element;
+export declare namespace LegendLabel {
+    var displayName: string;
+}
+//# sourceMappingURL=legend-label.d.ts.map

package/dist/charts/legend/legend-label.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useLegendItem } from "./legend-context.js";
+export function LegendLabel({ className = "text-sm font-medium" }) {
+    const { item } = useLegendItem();
+    return _jsx("span", { className: cn("text-legend-foreground", className), children: item.label });
+}
+LegendLabel.displayName = "LegendLabel";
+//# sourceMappingURL=legend-label.js.map

package/dist/charts/legend/legend-marker.d.ts

@@ -0,0 +1,9 @@
+export interface LegendMarkerProps {
+    /** Marker size class. Default: "h-2.5 w-2.5" */
+    className?: string;
+}
+export declare function LegendMarker({ className }: LegendMarkerProps): import("react").JSX.Element;
+export declare namespace LegendMarker {
+    var displayName: string;
+}
+//# sourceMappingURL=legend-marker.d.ts.map

package/dist/charts/legend/legend-marker.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useLegendItem } from "./legend-context.js";
+export function LegendMarker({ className = "h-2.5 w-2.5" }) {
+    const { item } = useLegendItem();
+    // Note: backgroundColor must remain inline style as item.color is dynamic data
+    return (_jsx("div", { className: cn("shrink-0 rounded-full", className), style: { backgroundColor: item.color } }));
+}
+LegendMarker.displayName = "LegendMarker";
+//# sourceMappingURL=legend-marker.js.map

package/dist/charts/legend/legend-progress.d.ts

@@ -0,0 +1,13 @@
+export interface LegendProgressProps {
+    /** Track class name */
+    trackClassName?: string;
+    /** Indicator class name */
+    indicatorClassName?: string;
+    /** Track height. Default: "h-1.5" */
+    height?: string;
+}
+export declare function LegendProgress({ trackClassName, indicatorClassName, height, }: LegendProgressProps): import("react").JSX.Element | null;
+export declare namespace LegendProgress {
+    var displayName: string;
+}
+//# sourceMappingURL=legend-progress.d.ts.map

package/dist/charts/legend/legend-progress.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useLegendItem } from "./legend-context.js";
+export function LegendProgress({ trackClassName = "", indicatorClassName = "", height = "h-1.5", }) {
+    const { item } = useLegendItem();
+    if (!item.maxValue) {
+        return null;
+    }
+    // Note: item.color must remain inline style as it's dynamic data
+    const pct = Math.min(100, Math.max(0, (item.value / item.maxValue) * 100));
+    return (_jsx("div", { "aria-valuemax": item.maxValue, "aria-valuenow": item.value, className: cn("w-full overflow-hidden rounded-full bg-legend-track", height, trackClassName), role: "progressbar", children: _jsx("div", { className: cn("h-full rounded-full transition-all duration-500", indicatorClassName), style: { backgroundColor: item.color, width: `${pct}%` } }) }));
+}
+LegendProgress.displayName = "LegendProgress";
+//# sourceMappingURL=legend-progress.js.map

package/dist/charts/legend/legend-value.d.ts

@@ -0,0 +1,17 @@
+export interface LegendValueProps {
+    /** Value class name. Default: "text-sm tabular-nums" */
+    className?: string;
+    /** Show percentage alongside value. Default: false */
+    showPercentage?: boolean;
+    /** Percentage class name. Default: "text-xs tabular-nums" */
+    percentageClassName?: string;
+    /** Format function for the value. Default: toLocaleString() */
+    formatValue?: (value: number) => string;
+    /** Format function for percentage. Default: (p) => `${p.toFixed(0)}%` */
+    formatPercentage?: (percentage: number) => string;
+}
+export declare function LegendValue({ className, showPercentage, percentageClassName, formatValue, formatPercentage, }: LegendValueProps): import("react").JSX.Element;
+export declare namespace LegendValue {
+    var displayName: string;
+}
+//# sourceMappingURL=legend-value.d.ts.map

package/dist/charts/legend/legend-value.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { intFmt } from "../chart-formatters.js";
+import { useLegendItem } from "./legend-context.js";
+export function LegendValue({ className = "text-sm tabular-nums", showPercentage = false, percentageClassName = "text-xs tabular-nums", formatValue = intFmt, formatPercentage = (p) => `${p.toFixed(0)}%`, }) {
+    const { item, percentage } = useLegendItem();
+    return (_jsxs("span", { className: cn("flex items-center gap-2 text-legend-muted-foreground", className), children: [_jsx("span", { children: formatValue(item.value) }), showPercentage && item.maxValue && (_jsx("span", { className: percentageClassName, children: formatPercentage(percentage) }))] }));
+}
+LegendValue.displayName = "LegendValue";
+//# sourceMappingURL=legend-value.js.map

package/dist/charts/legend/legend.d.ts

@@ -0,0 +1,23 @@
+import { type ReactElement } from "react";
+import { type LegendItemData } from "./legend-context.js";
+export interface LegendProps {
+    /** Legend items data */
+    items: LegendItemData[];
+    /** Controlled hover state */
+    hoveredIndex?: number | null;
+    /** Hover state change callback */
+    onHoverChange?: (index: number | null) => void;
+    /** Title shown above the legend */
+    title?: string;
+    /** Title class name */
+    titleClassName?: string;
+    /** Container class name */
+    className?: string;
+    /** Children - should contain a single LegendItem that will be mapped for each item */
+    children: ReactElement;
+}
+export declare function Legend({ items, hoveredIndex: controlledHoveredIndex, onHoverChange, title, titleClassName, className, children, }: LegendProps): import("react").JSX.Element;
+export declare namespace Legend {
+    var displayName: string;
+}
+//# sourceMappingURL=legend.d.ts.map

package/dist/charts/legend/legend.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { LegendItemProvider, LegendProvider } from "./legend-context.js";
+export function Legend({ items, hoveredIndex: controlledHoveredIndex, onHoverChange, title, titleClassName = "text-sm font-semibold", className = "", children, }) {
+    const [internalHoveredIndex, setInternalHoveredIndex] = useState(null);
+    // Controlled or uncontrolled hover state
+    const isControlled = controlledHoveredIndex !== undefined;
+    const hoveredIndex = isControlled ? controlledHoveredIndex : internalHoveredIndex;
+    const setHoveredIndex = (index) => {
+        if (isControlled) {
+            onHoverChange?.(index);
+        }
+        else {
+            setInternalHoveredIndex(index);
+        }
+    };
+    const contextValue = {
+        items,
+        hoveredIndex,
+        setHoveredIndex,
+    };
+    return (_jsx(LegendProvider, { value: contextValue, children: _jsxs("div", { className: cn("legend-container flex flex-col gap-2", className), children: [title && _jsx("h3", { className: cn("mb-1 text-legend-foreground", titleClassName), children: title }), items.map((item, index) => {
+                    const isHovered = hoveredIndex === index;
+                    const isFaded = hoveredIndex !== null && hoveredIndex !== index;
+                    const percentage = item.maxValue ? (item.value / item.maxValue) * 100 : 0;
+                    const itemContext = {
+                        item,
+                        index,
+                        isHovered,
+                        isFaded,
+                        percentage,
+                    };
+                    // Clone the child element for each item
+                    if (isValidElement(children)) {
+                        return (_jsx(LegendItemProvider, { value: itemContext, children: cloneElement(children) }, item.label));
+                    }
+                    return null;
+                })] }) }));
+}
+Legend.displayName = "Legend";
+//# sourceMappingURL=legend.js.map

package/dist/charts/line-chart-loading.d.ts

@@ -0,0 +1,34 @@
+import type { Margin } from "./chart-context.js";
+import type { LoadingStyle } from "./chart-phase.js";
+export interface LineChartLoadingProps {
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Stroke color for the animated loading segment. */
+    stroke?: string;
+    /** Stroke opacity for the animated loading segment. Default: 0.5 */
+    strokeOpacity?: number;
+    /** Grid line stroke (color and opacity via color-mix or oklch alpha). */
+    gridStroke?: string;
+    /** Shimmer band stroke (color and opacity via color-mix or oklch alpha). */
+    gridShimmerStroke?: string;
+    /** Animate a shimmer band across grid lines. Default: true */
+    gridShimmer?: boolean;
+    /** Shimmer band width in pixels. Default: 140 */
+    gridShimmerLength?: number;
+    /** Shimmer speed multiplier (higher = faster). Default: 1 */
+    gridShimmerSpeed?: number;
+    /** Match shimmer loop to the loading line pulse (cycle + inter-loop pause). */
+    gridShimmerSync?: boolean;
+    /** Loading animation: `"pulse"` (default traveling pulse) or `"sweep"` (a
+     * diagonal shimmer across the skeleton line). Default: `"pulse"`. */
+    loadingStyle?: LoadingStyle;
+    /** Centered shimmer label text. Default: "Loading" */
+    label?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1" */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+}
+export declare function LineChartLoading({ margin, stroke, strokeOpacity, gridStroke, gridShimmerStroke, gridShimmer, gridShimmerLength, gridShimmerSpeed, gridShimmerSync, loadingStyle, label, aspectRatio, className, }: LineChartLoadingProps): import("react").JSX.Element;
+export default LineChartLoading;
+//# sourceMappingURL=line-chart-loading.d.ts.map

package/dist/charts/line-chart-loading.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { curveNatural } from "@visx/curve";
+import { useMemo } from "react";
+import { DEFAULT_SKELETON_DATA_KEY, DEFAULT_SKELETON_POINT_COUNT, generateChartSkeletonData, } from "./generate-chart-skeleton-data.js";
+import { Grid } from "./grid.js";
+import { Line } from "./line.js";
+import { LineChart } from "./line-chart.js";
+const LOADING_DATA_KEY = DEFAULT_SKELETON_DATA_KEY;
+const DEFAULT_LOADING_STROKE = "var(--foreground)";
+const DEFAULT_LOADING_GRID_STROKE = "color-mix(in oklch, var(--chart-grid) 50%, transparent)";
+const DEFAULT_LOADING_GRID_SHIMMER_STROKE = "color-mix(in oklch, var(--foreground) 68%, transparent)";
+const DEFAULT_LOADING_STROKE_OPACITY = 0.5;
+export function LineChartLoading({ margin, stroke = DEFAULT_LOADING_STROKE, strokeOpacity = DEFAULT_LOADING_STROKE_OPACITY, gridStroke = DEFAULT_LOADING_GRID_STROKE, gridShimmerStroke = DEFAULT_LOADING_GRID_SHIMMER_STROKE, gridShimmer = true, gridShimmerLength, gridShimmerSpeed, gridShimmerSync = false, loadingStyle = "pulse", label = "Loading", aspectRatio = "2 / 1", className = "", }) {
+    const data = useMemo(() => generateChartSkeletonData({
+        dataKey: DEFAULT_SKELETON_DATA_KEY,
+        pointCount: DEFAULT_SKELETON_POINT_COUNT,
+    }), []);
+    return (_jsxs(LineChart, { animationDuration: 0, aspectRatio: aspectRatio, className: className, data: data, loadingLabel: label, margin: margin, status: "loading", children: [_jsx(Grid, { horizontal: true, shimmer: loadingStyle === "sweep" ? false : gridShimmer, shimmerLength: gridShimmerLength, shimmerSpeed: gridShimmerSpeed, shimmerStroke: gridShimmerStroke, shimmerSync: gridShimmerSync, stroke: gridStroke }), _jsx(Line, { curve: curveNatural, dataKey: LOADING_DATA_KEY, fadeEdges: false, loadingStroke: stroke, loadingStrokeOpacity: strokeOpacity, loadingStyle: loadingStyle, showHighlight: false, stroke: "transparent", strokeWidth: 2.5 })] }));
+}
+export default LineChartLoading;
+//# sourceMappingURL=line-chart-loading.js.map

package/dist/charts/line-chart.d.ts

@@ -0,0 +1,46 @@
+import type { Transition } from "motion/react";
+import { type CSSProperties, type ReactNode } from "react";
+import type { Margin } from "./chart-context.js";
+import { type ChartPhase, type ChartStatus } from "./chart-phase.js";
+export interface LineChartProps {
+    /** Data array - each item should have a date field and numeric values */
+    data: Record<string, unknown>[];
+    /** Key in data for the x-axis (date). Default: "date" */
+    xDataKey?: string;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
+    animationEasing?: string;
+    enterTransition?: Transition;
+    revealSignature?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1". Omit to fill a sized parent. */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Loading vs ready — drives chart phase and loading chrome. Default: `"ready"`. */
+    status?: ChartStatus;
+    /** Centered shimmer label while loading. */
+    loadingLabel?: string;
+    /** Animate y-domain over this duration (ms) on status transitions. Default: 500. */
+    yDomainTweenDuration?: number;
+    /** Animate y-domain when status or target domain changes. Default: true */
+    yDomainTween?: boolean;
+    /** Visible x-domain for brush zoom. */
+    xDomain?: [Date, Date];
+    /** Full dataset length for x-scale padding when `xDomain` is set. */
+    xDomainSlotCount?: number;
+    /** Tween y-domain when brush changes the visible x-range. Default: false */
+    tweenYDomainOnXDomainChange?: boolean;
+    /** Inline container styles (e.g. fixed height for brush strip). */
+    style?: CSSProperties;
+    /** Fires when the internal chart phase changes (e.g. OG capture readiness). */
+    onPhaseChange?: (phase: ChartPhase) => void;
+    /** Child components (Line, Grid, ChartTooltip, etc.) */
+    children: ReactNode;
+}
+export declare function LineChart({ data, xDataKey, margin: marginProp, animationDuration, animationEasing, enterTransition, revealSignature, aspectRatio, className, status, loadingLabel, yDomainTweenDuration, yDomainTween, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange, style, onPhaseChange, children, }: LineChartProps): import("react").JSX.Element;
+export { Line, type LineProps } from "./line.js";
+export default LineChart;
+//# sourceMappingURL=line-chart.d.ts.map

package/dist/charts/line-chart.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ParentSize } from "@visx/responsive";
+import { Children, isValidElement, useCallback, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { ChartLoadingLabel } from "./chart-loading-label.js";
+import { DEFAULT_CHART_STATUS, DEFAULT_Y_DOMAIN_TWEEN_MS, resolveRestingChartPhase, } from "./chart-phase.js";
+import { Line } from "./line.js";
+import { TimeSeriesChartInner } from "./time-series-chart-shell.js";
+const DEFAULT_MARGIN = { top: 40, right: 40, bottom: 40, left: 40 };
+/** Series renderers that carry a dataKey but must not drive the shared y-domain. */
+const LINE_DOMAIN_EXCLUDED_NAMES = new Set([
+    "ProfitLossLine",
+    "LineSeriesTerminalMarker",
+    "Area",
+    "SeriesBar",
+    "Scatter",
+    "Candlestick",
+    "Bar",
+    "PatternArea",
+]);
+function getChildComponentName(child) {
+    const childType = child.type;
+    return typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+}
+function registersLineDomain(child, props) {
+    if (!props?.dataKey) {
+        return false;
+    }
+    const componentName = getChildComponentName(child);
+    if (componentName === "Line" || child.type === Line) {
+        return true;
+    }
+    if (LINE_DOMAIN_EXCLUDED_NAMES.has(componentName)) {
+        return false;
+    }
+    // MDX / duplicate bundle instances may not share the same `Line` reference.
+    return typeof props.dataKey === "string" && props.dataKey.length > 0;
+}
+function extractLineConfigs(children) {
+    const configs = [];
+    const visit = (node) => {
+        Children.forEach(node, (child) => {
+            if (!isValidElement(child)) {
+                return;
+            }
+            const props = child.props;
+            if (registersLineDomain(child, props) && props?.dataKey) {
+                configs.push({
+                    dataKey: props.dataKey,
+                    stroke: props.stroke || "var(--chart-line-primary)",
+                    strokeWidth: props.strokeWidth || 2.5,
+                    yAxisId: props.yAxisId,
+                });
+                return;
+            }
+            const childProps = child.props;
+            if (childProps?.children) {
+                visit(childProps.children);
+            }
+        });
+    };
+    visit(children);
+    return configs;
+}
+function ChartInner({ width, height, data, xDataKey, margin, animationDuration, animationEasing, enterTransition, revealSignature, chartStatus, loadingLabel, yDomainTweenDuration, yDomainTween, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange, children, containerRef, onPhaseChange, }) {
+    const lines = useMemo(() => extractLineConfigs(children), [children]);
+    return (_jsx(TimeSeriesChartInner, { animationDuration: animationDuration, animationEasing: animationEasing, chartStatus: chartStatus, clipPathId: "chart-grow-clip", containerRef: containerRef, data: data, enterTransition: enterTransition, height: height, lines: lines, loadingLabel: loadingLabel, margin: margin, onPhaseChange: onPhaseChange, revealSignature: revealSignature, tweenYDomainOnXDomainChange: tweenYDomainOnXDomainChange, width: width, xDataKey: xDataKey, xDomain: xDomain, xDomainSlotCount: xDomainSlotCount, yDomainTween: yDomainTween, yDomainTweenDuration: yDomainTweenDuration, children: children }));
+}
+export function LineChart({ data, xDataKey = "date", margin: marginProp, animationDuration = 1100, animationEasing, enterTransition, revealSignature, aspectRatio = "2 / 1", className = "", status = DEFAULT_CHART_STATUS, loadingLabel, yDomainTweenDuration = DEFAULT_Y_DOMAIN_TWEEN_MS, yDomainTween = true, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange = false, style, onPhaseChange, children, }) {
+    const containerRef = useRef(null);
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    const [chartPhase, setChartPhase] = useState(() => resolveRestingChartPhase(status));
+    const handlePhaseChange = useCallback((phase) => {
+        setChartPhase(phase);
+        onPhaseChange?.(phase);
+    }, [onPhaseChange]);
+    const showLoadingLabel = Boolean(loadingLabel?.trim() &&
+        (chartPhase === "loading" ||
+            chartPhase === "exiting" ||
+            chartPhase === "gridTweenReady" ||
+            chartPhase === "revealingLoading"));
+    return (_jsxs("div", { "data-slot": "line-chart", className: cn("relative w-full", className), ref: containerRef, style: {
+            ...(aspectRatio ? { aspectRatio } : undefined),
+            touchAction: "none",
+            ...style,
+        }, children: [_jsx(ParentSize, { debounceTime: 10, children: ({ width, height }) => (_jsx(ChartInner, { animationDuration: animationDuration, animationEasing: animationEasing, chartStatus: status, containerRef: containerRef, data: data, enterTransition: enterTransition, height: height, loadingLabel: loadingLabel, margin: margin, onPhaseChange: handlePhaseChange, revealSignature: revealSignature, tweenYDomainOnXDomainChange: tweenYDomainOnXDomainChange, width: width, xDataKey: xDataKey, xDomain: xDomain, xDomainSlotCount: xDomainSlotCount, yDomainTween: yDomainTween, yDomainTweenDuration: yDomainTweenDuration, children: children })) }), showLoadingLabel ? (_jsx(ChartLoadingLabel, { exiting: chartPhase !== "loading", text: loadingLabel })) : null] }));
+}
+export { Line } from "./line.js";
+export default LineChart;
+//# sourceMappingURL=line-chart.js.map

package/dist/charts/line-loading-pulse.d.ts

@@ -0,0 +1,20 @@
+import type { ChartPhase } from "./chart-phase.js";
+export type LineLoadingPulseMode = "loop" | "exit" | "enter";
+export declare function resolveLineLoadingPulseMode(phase: ChartPhase): LineLoadingPulseMode | null;
+export interface LineLoadingPulseStrokeProps {
+    pathD: string;
+    mode?: LineLoadingPulseMode;
+    /** Bumps to restart loop cycles without remounting the stroke. */
+    loopEpoch?: number;
+    stroke?: string;
+    /** Stroke opacity for the animated segment. Default: 0.5 */
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    onCycleComplete?: () => void;
+}
+export declare function LineLoadingPulseStroke({ pathD, mode, loopEpoch, stroke, strokeOpacity, strokeWidth, onCycleComplete, }: LineLoadingPulseStrokeProps): import("react").JSX.Element | null;
+export declare namespace LineLoadingPulseStroke {
+    var displayName: string;
+}
+export default LineLoadingPulseStroke;
+//# sourceMappingURL=line-loading-pulse.d.ts.map

package/dist/charts/line-loading-pulse.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { animate, motion, useMotionValue, useTransform } from "motion/react";
+import { useEffect, useId } from "react";
+import { chartCssVars, useChartStable } from "./chart-context.js";
+import { fadeGradientStops, resolveFadeSides, viewportFadeGradientAttrs } from "./fade-edges.js";
+import { LINE_LOADING_PULSE_CYCLE_S, LINE_LOADING_PULSE_EASE } from "./line-loading-timing.js";
+const CLIP_PADDING = 10;
+export function resolveLineLoadingPulseMode(phase) {
+    switch (phase) {
+        case "loading":
+            return "loop";
+        case "exiting":
+            return "exit";
+        case "revealingLoading":
+            return "enter";
+        default:
+            return null;
+    }
+}
+function useGrowExitClip(innerWidth, mode, loopEpoch, onComplete) {
+    const progress = useMotionValue(0);
+    const paddedFullWidth = innerWidth + CLIP_PADDING * 2;
+    const rightEdge = innerWidth + CLIP_PADDING;
+    const clipWidth = useTransform(progress, (p) => {
+        if (p <= 0.5) {
+            return (p / 0.5) * paddedFullWidth;
+        }
+        const shrink = (p - 0.5) / 0.5;
+        return (1 - shrink) * paddedFullWidth;
+    });
+    const clipX = useTransform(progress, (p) => {
+        if (p <= 0.5) {
+            return -CLIP_PADDING;
+        }
+        const shrink = (p - 0.5) / 0.5;
+        return rightEdge - (1 - shrink) * paddedFullWidth;
+    });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: loopEpoch restarts pulse when orchestrator advances
+    useEffect(() => {
+        if (innerWidth <= 0) {
+            return;
+        }
+        const halfCycleS = LINE_LOADING_PULSE_CYCLE_S / 2;
+        let cancelled = false;
+        let controls;
+        const finish = () => {
+            if (!cancelled) {
+                onComplete?.();
+            }
+        };
+        const runShrink = (from) => {
+            const shrinkDuration = halfCycleS * ((1 - from) / 0.5);
+            controls = animate(progress, 1, {
+                duration: Math.max(shrinkDuration, 0.01),
+                ease: [...LINE_LOADING_PULSE_EASE],
+                onComplete: finish,
+            });
+        };
+        if (mode === "loop") {
+            progress.set(0);
+            controls = animate(progress, 1, {
+                duration: LINE_LOADING_PULSE_CYCLE_S,
+                ease: [...LINE_LOADING_PULSE_EASE],
+                onComplete: finish,
+            });
+            return () => {
+                cancelled = true;
+                controls?.stop();
+            };
+        }
+        if (mode === "exit") {
+            const current = progress.get();
+            if (current < 0.5) {
+                const growDuration = halfCycleS * ((0.5 - current) / 0.5);
+                controls = animate(progress, 0.5, {
+                    duration: Math.max(growDuration, 0.01),
+                    ease: [...LINE_LOADING_PULSE_EASE],
+                    onComplete: () => {
+                        if (!cancelled) {
+                            runShrink(0.5);
+                        }
+                    },
+                });
+            }
+            else {
+                runShrink(current);
+            }
+            return () => {
+                cancelled = true;
+                controls?.stop();
+            };
+        }
+        if (mode === "enter") {
+            progress.set(0);
+            controls = animate(progress, 0.5, {
+                duration: halfCycleS,
+                ease: [...LINE_LOADING_PULSE_EASE],
+                onComplete: finish,
+            });
+            return () => {
+                cancelled = true;
+                controls?.stop();
+            };
+        }
+    }, [innerWidth, loopEpoch, mode, onComplete, progress]);
+    return { clipX, clipWidth };
+}
+export function LineLoadingPulseStroke({ pathD, mode = "loop", loopEpoch = 0, stroke = chartCssVars.foreground, strokeOpacity = 0.5, strokeWidth = 2.5, onCycleComplete, }) {
+    const { innerWidth, innerHeight } = useChartStable();
+    const reactId = useId();
+    const clipPathId = `line-loading-clip-${reactId}`;
+    const gradientId = `line-loading-gradient-${reactId}`;
+    const fadeStops = fadeGradientStops(resolveFadeSides(true));
+    const clipHeight = innerHeight + CLIP_PADDING * 2;
+    const { clipX, clipWidth } = useGrowExitClip(innerWidth, mode, loopEpoch, onCycleComplete);
+    if (innerWidth <= 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("defs", { children: [_jsx("clipPath", { id: clipPathId, children: _jsx(motion.rect, { height: clipHeight, style: { width: clipWidth, x: clipX }, y: -CLIP_PADDING }) }), _jsx("linearGradient", { id: gradientId, ...viewportFadeGradientAttrs(innerWidth), children: fadeStops.map((stop) => (_jsx("stop", { offset: stop.offset, stopColor: stroke, stopOpacity: stop.opacity }, stop.offset))) })] }), _jsx("path", { clipPath: `url(#${clipPathId})`, d: pathD, fill: "none", opacity: strokeOpacity, stroke: `url(#${gradientId})`, strokeLinecap: "round", strokeWidth: strokeWidth })] }));
+}
+LineLoadingPulseStroke.displayName = "LineLoadingPulseStroke";
+export default LineLoadingPulseStroke;
+//# sourceMappingURL=line-loading-pulse.js.map

package/dist/charts/line-loading-timing.d.ts

@@ -0,0 +1,10 @@
+/** Grow + exit timeline for `LineLoadingPulse` (seconds). */
+export declare const LINE_LOADING_PULSE_CYCLE_S = 2.2;
+/** Idle gap before the loading line pulse restarts (milliseconds). */
+export declare const LINE_LOADING_LOOP_PAUSE_MS = 280;
+/** Loading label exit on loading → ready (seconds). */
+export declare const LOADING_LABEL_EXIT_S = 0.45;
+/** Loading label drops this many pixels while exiting. */
+export declare const LOADING_LABEL_EXIT_Y_PX = 30;
+export declare const LINE_LOADING_PULSE_EASE: readonly [0.85, 0, 0.15, 1];
+//# sourceMappingURL=line-loading-timing.d.ts.map

package/dist/charts/line-loading-timing.js

@@ -0,0 +1,10 @@
+/** Grow + exit timeline for `LineLoadingPulse` (seconds). */
+export const LINE_LOADING_PULSE_CYCLE_S = 2.2;
+/** Idle gap before the loading line pulse restarts (milliseconds). */
+export const LINE_LOADING_LOOP_PAUSE_MS = 280;
+/** Loading label exit on loading → ready (seconds). */
+export const LOADING_LABEL_EXIT_S = 0.45;
+/** Loading label drops this many pixels while exiting. */
+export const LOADING_LABEL_EXIT_Y_PX = 30;
+export const LINE_LOADING_PULSE_EASE = [0.85, 0, 0.15, 1];
+//# sourceMappingURL=line-loading-timing.js.map

package/dist/charts/line-series-terminal-marker.d.ts

@@ -0,0 +1,16 @@
+export interface LineSeriesTerminalMarkerProps {
+    dataKey: string;
+    yAxisId?: string | number;
+    fill?: string;
+    stroke?: string;
+    radius?: number;
+    ringGap?: number;
+    strokeWidth?: number;
+}
+/** Hollow ring at the last data point — shared anchor for projection lines. */
+export declare function LineSeriesTerminalMarker({ dataKey, yAxisId, fill, stroke, radius, ringGap, strokeWidth, }: LineSeriesTerminalMarkerProps): import("react").JSX.Element | null;
+export declare namespace LineSeriesTerminalMarker {
+    var displayName: string;
+}
+export default LineSeriesTerminalMarker;
+//# sourceMappingURL=line-series-terminal-marker.d.ts.map