@cronus-ui/ui 0.6.0

package/dist/charts/segment.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { useMemo } from "react";
+import { chartCssVars, useChart } from "./chart-context.js";
+function useSegmentVisibility() {
+    const { selection, innerHeight } = useChart();
+    const isVisible = selection?.active === true && Math.abs(selection.endX - selection.startX) > 5;
+    return { selection, innerHeight, isVisible };
+}
+export function SegmentBackground({ fill = chartCssVars.segmentBackground, }) {
+    const { selection, innerHeight, isVisible } = useSegmentVisibility();
+    return (_jsx(AnimatePresence, { children: isVisible && selection && (_jsx(motion.rect, { animate: { opacity: 1 }, exit: { opacity: 0 }, fill: fill, height: innerHeight, initial: { opacity: 0 }, transition: { duration: 0.15 }, width: selection.endX - selection.startX, x: selection.startX, y: 0 })) }));
+}
+SegmentBackground.displayName = "SegmentBackground";
+const gradientIdCounter = { current: 0 };
+function SegmentLine({ x, stroke = chartCssVars.segmentLine, strokeWidth = 1, variant = "dashed", visible, innerHeight, }) {
+    const gradientId = useMemo(() => {
+        gradientIdCounter.current += 1;
+        return `segment-line-grad-${gradientIdCounter.current}`;
+    }, []);
+    if (!visible) {
+        return null;
+    }
+    if (variant === "gradient") {
+        return (_jsxs("g", { children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", style: { stopColor: stroke, stopOpacity: 0 } }), _jsx("stop", { offset: "10%", style: { stopColor: stroke, stopOpacity: 1 } }), _jsx("stop", { offset: "90%", style: { stopColor: stroke, stopOpacity: 1 } }), _jsx("stop", { offset: "100%", style: { stopColor: stroke, stopOpacity: 0 } })] }) }), _jsx("line", { stroke: `url(#${gradientId})`, strokeWidth: strokeWidth, x1: x, x2: x, y1: 0, y2: innerHeight })] }));
+    }
+    return (_jsx("line", { stroke: stroke, strokeDasharray: variant === "dashed" ? "4,4" : undefined, strokeWidth: strokeWidth, x1: x, x2: x, y1: 0, y2: innerHeight }));
+}
+// --- SegmentLineFrom ---
+export function SegmentLineFrom(props) {
+    const { selection, innerHeight, isVisible } = useSegmentVisibility();
+    return (_jsx(SegmentLine, { ...props, innerHeight: innerHeight, visible: isVisible, x: selection?.startX ?? 0 }));
+}
+SegmentLineFrom.displayName = "SegmentLineFrom";
+// --- SegmentLineTo ---
+export function SegmentLineTo(props) {
+    const { selection, innerHeight, isVisible } = useSegmentVisibility();
+    return (_jsx(SegmentLine, { ...props, innerHeight: innerHeight, visible: isVisible, x: selection?.endX ?? 0 }));
+}
+SegmentLineTo.displayName = "SegmentLineTo";
+//# sourceMappingURL=segment.js.map

package/dist/charts/series-bar-layout.d.ts

@@ -0,0 +1,18 @@
+export declare function computeSeriesBarWidth(input: {
+    innerWidth: number;
+    dataLength: number;
+    columnWidth: number;
+    seriesCount: number;
+    composedBarSize?: number;
+    composedMaxBarSize?: number;
+    composedBarGap?: number;
+    stacked?: boolean;
+}): number;
+/** Half-width of the bar group at each x — used to pad reveal clips. */
+export declare function computeSeriesBarRevealClipPadding(input: {
+    barWidth: number;
+    seriesCount: number;
+    gap?: number;
+    stacked?: boolean;
+}): number;
+//# sourceMappingURL=series-bar-layout.d.ts.map

package/dist/charts/series-bar-layout.js

@@ -0,0 +1,31 @@
+export function computeSeriesBarWidth(input) {
+    const { innerWidth, dataLength, columnWidth, seriesCount, composedBarSize, composedMaxBarSize, composedBarGap = 4, stacked = false, } = input;
+    const gap = composedBarGap;
+    const groupCount = stacked ? 1 : Math.max(1, seriesCount);
+    let slot = columnWidth;
+    if (slot <= 0) {
+        slot = dataLength < 2 ? innerWidth : innerWidth / (dataLength - 1);
+    }
+    let width = composedBarSize ?? Math.min(slot * 0.88, composedMaxBarSize ?? Number.POSITIVE_INFINITY);
+    if (composedMaxBarSize != null) {
+        width = Math.min(width, composedMaxBarSize);
+    }
+    if (groupCount > 1) {
+        const maxGroup = slot * 0.92;
+        const needed = groupCount * width + (groupCount - 1) * gap;
+        if (needed > maxGroup && maxGroup > 0) {
+            width = Math.max(4, (maxGroup - (groupCount - 1) * gap) / groupCount);
+        }
+    }
+    return Math.max(2, width);
+}
+/** Half-width of the bar group at each x — used to pad reveal clips. */
+export function computeSeriesBarRevealClipPadding(input) {
+    const { barWidth, seriesCount, gap = 4, stacked = false } = input;
+    if (stacked || seriesCount <= 1) {
+        return Math.ceil(barWidth / 2);
+    }
+    const groupWidth = seriesCount * barWidth + (seriesCount - 1) * gap;
+    return Math.ceil(groupWidth / 2);
+}
+//# sourceMappingURL=series-bar-layout.js.map

package/dist/charts/series-bar.d.ts

@@ -0,0 +1,20 @@
+export interface SeriesBarProps {
+    /** Key in data for bar height (y value) */
+    dataKey: string;
+    /** Fill color. Default: var(--chart-line-primary) */
+    fill?: string;
+    /** Tooltip dot color when fill is gradient/pattern. Default: fill */
+    stroke?: string;
+    /** Corner radius for bar top corners. Default: 0 (square tops, similar to Bar lineCap="butt") */
+    radius?: number;
+    /** Animate grow from baseline. Default: true */
+    animate?: boolean;
+    /** Opacity for non-hovered bars when another point is hovered (matches BarChart). Default: 0.3 */
+    fadedOpacity?: number;
+}
+export declare function SeriesBar({ dataKey, fill, radius, animate, fadedOpacity, }: SeriesBarProps): import("react").JSX.Element | null;
+export declare namespace SeriesBar {
+    var displayName: string;
+}
+export default SeriesBar;
+//# sourceMappingURL=series-bar.d.ts.map

package/dist/charts/series-bar.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useMemo } from "react";
+import { chartCssVars, useChart } from "./chart-context.js";
+import { useChartLegendHover } from "./chart-legend-hover.js";
+import { transitionWithDelay } from "./motion-utils.js";
+import { computeSeriesBarWidth } from "./series-bar-layout.js";
+function computeSeriesBarLayout(input) {
+    const { stacked, composedStackOffsets, rowIndex, dataKey, value, yScale, innerHeight, xCenter, barWidth, seriesCount, gap, seriesIndex, stackGap, isLastSeries, radius, } = input;
+    if (stacked && composedStackOffsets) {
+        const offset = composedStackOffsets.get(rowIndex)?.get(dataKey) ?? 0;
+        const valuePos = yScale(value) ?? 0;
+        let barHeight = innerHeight - valuePos;
+        const offsetY = yScale(offset) ?? innerHeight;
+        const gapOffset = seriesIndex * stackGap;
+        const valueY = offsetY - barHeight - gapOffset;
+        if (!isLastSeries && stackGap > 0) {
+            barHeight = Math.max(0, barHeight - stackGap);
+        }
+        const barLeft = xCenter - barWidth / 2;
+        const applyRounding = stackGap > 0 || isLastSeries;
+        return {
+            barLeft,
+            barHeight,
+            effectiveRadius: applyRounding ? radius : 0,
+            valueY,
+        };
+    }
+    const groupWidth = seriesCount * barWidth + (seriesCount > 1 ? (seriesCount - 1) * gap : 0);
+    const valueY = yScale(value) ?? innerHeight;
+    return {
+        barLeft: xCenter - groupWidth / 2 + seriesIndex * (barWidth + gap),
+        barHeight: innerHeight - valueY,
+        effectiveRadius: radius,
+        valueY,
+    };
+}
+export function SeriesBar({ dataKey, fill = chartCssVars.linePrimary, radius = 0, animate = true, fadedOpacity = 0.3, }) {
+    const { data, xScale, yScale, xAccessor, innerHeight, innerWidth, columnWidth, isLoaded, animationDuration, enterTransition, revealEpoch = 0, barScale, composedBarDataKeys, composedBarSize, composedMaxBarSize, composedBarGap, composedStacked, composedStackOffsets, composedStackGap, tooltipData, } = useChart();
+    const barKeys = useMemo(() => {
+        if (composedBarDataKeys && composedBarDataKeys.length > 0) {
+            return composedBarDataKeys;
+        }
+        return [dataKey];
+    }, [composedBarDataKeys, dataKey]);
+    const seriesIndex = useMemo(() => {
+        const idx = barKeys.indexOf(dataKey);
+        return idx >= 0 ? idx : 0;
+    }, [barKeys, dataKey]);
+    const n = barKeys.length;
+    const gap = composedBarGap ?? 4;
+    const stackGap = composedStackGap ?? 0;
+    const stacked = Boolean(composedStacked) &&
+        composedStackOffsets != null &&
+        composedBarDataKeys != null &&
+        composedBarDataKeys.length > 0;
+    const isLastSeries = seriesIndex === n - 1;
+    const barWidth = useMemo(() => computeSeriesBarWidth({
+        innerWidth,
+        dataLength: data.length,
+        columnWidth,
+        seriesCount: n,
+        composedBarSize,
+        composedMaxBarSize,
+        composedBarGap: gap,
+        stacked,
+    }), [columnWidth, composedBarSize, composedMaxBarSize, data.length, gap, innerWidth, n, stacked]);
+    const totalAnimDuration = animationDuration || 1100;
+    const staggerSpread = totalAnimDuration * 0.4;
+    const calculatedStaggerDelay = data.length > 1 ? staggerSpread / 1000 / data.length : 0;
+    const { hoveredIndex: legendHoveredIndex } = useChartLegendHover();
+    const isLegendDimmed = legendHoveredIndex !== null && legendHoveredIndex !== seriesIndex;
+    const hoveredIndex = tooltipData?.index ?? null;
+    if (barScale) {
+        console.warn("SeriesBar is for time-based ComposedChart / LineChart context. Use Bar inside BarChart for categorical x.");
+        return null;
+    }
+    return (_jsx("g", { className: "series-bar", children: data.map((d, i) => {
+            const value = d[dataKey];
+            if (typeof value !== "number") {
+                return null;
+            }
+            const xCenter = xScale(xAccessor(d)) ?? 0;
+            const { barLeft, valueY, barHeight, effectiveRadius } = computeSeriesBarLayout({
+                stacked,
+                composedStackOffsets,
+                rowIndex: i,
+                dataKey,
+                value,
+                yScale,
+                innerHeight,
+                xCenter,
+                barWidth,
+                seriesCount: n,
+                gap,
+                seriesIndex,
+                stackGap,
+                isLastSeries,
+                radius,
+            });
+            const categoryLabel = String(xAccessor(d).getTime());
+            const isFaded = (hoveredIndex !== null && hoveredIndex !== i) || isLegendDimmed;
+            if (animate && !isLoaded) {
+                return (_jsx(SeriesBarRect, { barHeight: barHeight, barWidth: barWidth, calculatedStaggerDelay: calculatedStaggerDelay, enterTransition: enterTransition, fadedOpacity: fadedOpacity, fill: fill, index: i, innerHeight: innerHeight, isFaded: isFaded, radius: effectiveRadius, revealEpoch: revealEpoch, x: barLeft, y: valueY }, `${dataKey}-${categoryLabel}-${revealEpoch}`));
+            }
+            return (_jsx(motion.rect, { animate: { opacity: isFaded ? fadedOpacity : 1 }, fill: fill, height: barHeight, rx: effectiveRadius, ry: effectiveRadius, transition: { opacity: { duration: 0.12 } }, width: barWidth, x: barLeft, y: valueY }, `${dataKey}-${categoryLabel}`));
+        }) }));
+}
+SeriesBar.displayName = "SeriesBar";
+function SeriesBarRect({ x, y, barWidth, barHeight, fill, radius, index, innerHeight, calculatedStaggerDelay, enterTransition, revealEpoch, isFaded, fadedOpacity, }) {
+    const enterAnim = transitionWithDelay(enterTransition, index * calculatedStaggerDelay);
+    return (_jsx(motion.rect, { animate: {
+            height: barHeight,
+            y,
+            opacity: isFaded ? fadedOpacity : 1,
+        }, fill: fill, initial: { height: 0, y: innerHeight, opacity: 1 }, rx: radius, ry: radius, transition: enterAnim, width: barWidth, x: x }, `series-bar-${index}-${revealEpoch}`));
+}
+export default SeriesBar;
+//# sourceMappingURL=series-bar.js.map

package/dist/charts/series-dash-tail-overlay.d.ts

@@ -0,0 +1,17 @@
+interface SeriesDashTailOverlayProps {
+    dashFromIndex?: number;
+    dashArray: string;
+    data: Record<string, unknown>[];
+    pathD: string | null;
+    pathLength: number;
+    innerWidth: number;
+    innerHeight: number;
+    stroke: string;
+    strokeWidth: number;
+    xScale: (value: Date | number) => number | undefined;
+    xAccessor: (datum: Record<string, unknown>) => Date | number;
+}
+declare function SeriesDashTailOverlayImpl({ dashFromIndex, dashArray, data, pathD, pathLength, innerWidth, innerHeight, stroke, strokeWidth, xScale, xAccessor, }: SeriesDashTailOverlayProps): import("react").JSX.Element | null;
+export declare const SeriesDashTailOverlay: import("react").MemoExoticComponent<typeof SeriesDashTailOverlayImpl>;
+export {};
+//# sourceMappingURL=series-dash-tail-overlay.d.ts.map

package/dist/charts/series-dash-tail-overlay.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { DashTailStroke } from "./dash-tail-stroke.js";
+import { resolveDashStartX, resolveDashTailBounds } from "./path-stroke-utils.js";
+function SeriesDashTailOverlayImpl({ dashFromIndex, dashArray, data, pathD, pathLength, innerWidth, innerHeight, stroke, strokeWidth, xScale, xAccessor, }) {
+    const hasDashTail = resolveDashTailBounds(dashFromIndex, data.length);
+    const dashStartX = useMemo(() => {
+        if (!hasDashTail || dashFromIndex == null) {
+            return 0;
+        }
+        return resolveDashStartX(data, dashFromIndex, xScale, xAccessor);
+    }, [hasDashTail, dashFromIndex, data, xScale, xAccessor]);
+    // Linear (index-based) approximation of the path length at `dashFromIndex`.
+    // The accurate version (`findPathLengthAtX` binary search via
+    // `getPointAtLength`) is exact but cost ~40 ms per series on a 365-point
+    // bezier — for charts with ~10 series that synchronously blocks the main
+    // thread for ~400 ms on the post-measurement re-render, swallowing the first
+    // second of the entrance animation.
+    //
+    // For evenly-spaced time-series data — the standard case — this is exact at
+    // flat regions of the curve and only differs by a pixel or two where the
+    // curve has steep y-variation, which is imperceptible at the dash boundary.
+    const dashStartLength = useMemo(() => {
+        if (!hasDashTail || dashFromIndex == null || pathLength <= 0) {
+            return 0;
+        }
+        return (dashFromIndex / Math.max(1, data.length - 1)) * pathLength;
+    }, [hasDashTail, dashFromIndex, data.length, pathLength]);
+    if (!hasDashTail || dashFromIndex == null || pathLength <= 0) {
+        return null;
+    }
+    return (_jsx(DashTailStroke, { dashArray: dashArray, dashStartLength: dashStartLength, dashStartX: dashStartX, innerHeight: innerHeight, innerWidth: innerWidth, pathD: pathD, pathLength: pathLength, stroke: stroke, strokeWidth: strokeWidth }));
+}
+// All props originate from the chart's stable context slice (data, xScale,
+// xAccessor, …) or are mount-stable strings (gradient `url(#…)` ids). Shallow
+// compare lets us skip the path-length binary search on every cursor move.
+export const SeriesDashTailOverlay = memo(SeriesDashTailOverlayImpl);
+//# sourceMappingURL=series-dash-tail-overlay.js.map

package/dist/charts/series-highlight-layer.d.ts

@@ -0,0 +1,23 @@
+import type { RefObject } from "react";
+interface SeriesHighlightLayerProps {
+    /** Caller already gated `showHighlight && showLine`; this just routes through. */
+    enabled: boolean;
+    height: number;
+    pathRef: RefObject<SVGPathElement | null>;
+    stroke: string;
+    strokeWidth: number;
+}
+/**
+ * Self-contained hover-highlight band over a series stroke.
+ *
+ * Owns the `useHighlightSegment` subscription (which reads both stable + hover
+ * context) so the parent <Area> / <Line> can stay on the stable slice. This
+ * component still re-renders on hover — that's the price of driving the
+ * highlight band — but it's a tiny leaf so the cost is bounded to itself.
+ */
+export declare function SeriesHighlightLayer({ enabled, height, pathRef, stroke, strokeWidth, }: SeriesHighlightLayerProps): import("react").JSX.Element;
+export declare namespace SeriesHighlightLayer {
+    var displayName: string;
+}
+export default SeriesHighlightLayer;
+//# sourceMappingURL=series-highlight-layer.d.ts.map

package/dist/charts/series-highlight-layer.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChartStable } from "./chart-context.js";
+import { HighlightSegment } from "./highlight-segment.js";
+import { useHighlightSegment } from "./use-highlight-segment.js";
+/**
+ * Self-contained hover-highlight band over a series stroke.
+ *
+ * Owns the `useHighlightSegment` subscription (which reads both stable + hover
+ * context) so the parent <Area> / <Line> can stay on the stable slice. This
+ * component still re-renders on hover — that's the price of driving the
+ * highlight band — but it's a tiny leaf so the cost is bounded to itself.
+ */
+export function SeriesHighlightLayer({ enabled, height, pathRef, stroke, strokeWidth, }) {
+    const { isLoaded } = useChartStable();
+    const { xSpring, widthSpring, isActive } = useHighlightSegment({ enabled });
+    return (_jsx(HighlightSegment, { height: height, pathRef: pathRef, stroke: stroke, strokeWidth: strokeWidth, visible: enabled && isActive && isLoaded, width: widthSpring, x: xSpring }));
+}
+SeriesHighlightLayer.displayName = "SeriesHighlightLayer";
+export default SeriesHighlightLayer;
+//# sourceMappingURL=series-highlight-layer.js.map

package/dist/charts/series-hover-dim.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+interface SeriesHoverDimProps {
+    /** Skip the dim entirely. */
+    enabled?: boolean;
+    /** Opacity to fade to while the chart is being hovered. */
+    dimOpacity?: number;
+    /** Tween duration in seconds. */
+    durationSec?: number;
+    /** Series index for multi-series legend hover dimming. */
+    seriesIndex?: number;
+    /** Stable chart visuals — area fill, stroke line, dashed tail, etc. */
+    children: ReactNode;
+}
+/**
+ * Wraps stable series visuals with a hover-driven opacity animation.
+ *
+ * The wrapper subscribes to chart hover state internally so the parent (Area /
+ * Line) can stay on the stable context slice. Children come in as a React prop:
+ * because the parent is not re-rendering on hover, the children element
+ * reference stays identical and React skips re-rendering them when this
+ * wrapper re-renders. That keeps expensive subtrees (`SeriesDashTailOverlay`
+ * and its `getPointAtLength` binary search) quiescent on cursor motion.
+ */
+export declare function SeriesHoverDim({ enabled, dimOpacity, durationSec, seriesIndex, children, }: SeriesHoverDimProps): import("react").JSX.Element;
+export declare namespace SeriesHoverDim {
+    var displayName: string;
+}
+export default SeriesHoverDim;
+//# sourceMappingURL=series-hover-dim.d.ts.map

package/dist/charts/series-hover-dim.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useChartHover } from "./chart-context.js";
+import { useChartLegendHover } from "./chart-legend-hover.js";
+/**
+ * Wraps stable series visuals with a hover-driven opacity animation.
+ *
+ * The wrapper subscribes to chart hover state internally so the parent (Area /
+ * Line) can stay on the stable context slice. Children come in as a React prop:
+ * because the parent is not re-rendering on hover, the children element
+ * reference stays identical and React skips re-rendering them when this
+ * wrapper re-renders. That keeps expensive subtrees (`SeriesDashTailOverlay`
+ * and its `getPointAtLength` binary search) quiescent on cursor motion.
+ */
+export function SeriesHoverDim({ enabled = true, dimOpacity = 0.5, durationSec = 0.4, seriesIndex, children, }) {
+    const { tooltipData, selection } = useChartHover();
+    const { hoveredIndex: legendHoveredIndex } = useChartLegendHover();
+    const isChartHovering = tooltipData !== null || selection?.active === true;
+    const isLegendDimmed = legendHoveredIndex !== null && seriesIndex !== undefined && legendHoveredIndex !== seriesIndex;
+    const opacity = enabled && (isChartHovering || isLegendDimmed) ? dimOpacity : 1;
+    return (_jsx(motion.g, { animate: { opacity }, initial: { opacity: 1 }, transition: { duration: durationSec, ease: "easeInOut" }, children: children }));
+}
+SeriesHoverDim.displayName = "SeriesHoverDim";
+export default SeriesHoverDim;
+//# sourceMappingURL=series-hover-dim.js.map

package/dist/charts/series-markers.d.ts

@@ -0,0 +1,14 @@
+import { type SeriesPointMarkerStyle } from "./series-point-marker.js";
+export interface SeriesMarkersProps extends SeriesPointMarkerStyle {
+    dataKey: string;
+    /** Marker fill color. Defaults to series stroke or chart palette color. */
+    fill?: string;
+    /** Whether to animate markers with clip reveal. Default: true */
+    animate?: boolean;
+}
+export declare function SeriesMarkers({ dataKey, fill, stroke, strokeWidth, ringGap, outlineWidth, outlineColor, radius, animate, fadeOnHover, inactiveOpacity, inactiveBlur, enterBlur, showActiveHighlight, }: SeriesMarkersProps): import("react").JSX.Element;
+export declare namespace SeriesMarkers {
+    var displayName: string;
+}
+export default SeriesMarkers;
+//# sourceMappingURL=series-markers.d.ts.map

package/dist/charts/series-markers.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { clipRevealTransition } from "./animation.js";
+import { defaultScatterColors, useChartHover, useChartStable, useYScale } from "./chart-context.js";
+import { useChartLegendHover } from "./chart-legend-hover.js";
+import { getSeriesMarkerVisualExtent, SeriesPointMarker, StaticSeriesPointMarker, } from "./series-point-marker.js";
+export function SeriesMarkers({ dataKey, fill, stroke, strokeWidth = 2, ringGap = 2, outlineWidth = 0, outlineColor, radius = 5, animate = true, fadeOnHover = true, inactiveOpacity = 0.5, inactiveBlur = 2, enterBlur = 2, showActiveHighlight = true, }) {
+    // Stable slice only. Hover-driven dim + active-highlight live in the inner
+    // <SeriesMarkersDimWrapper> / <SeriesMarkersActiveHighlight> components, so
+    // mouse motion does not re-render the full point grid.
+    const { data, xScale, innerWidth, enterTransition, animationDuration, revealEpoch, isLoaded, xAccessor, lines, } = useChartStable();
+    const seriesIndex = useMemo(() => {
+        const index = lines.findIndex((line) => line.dataKey === dataKey);
+        return index >= 0 ? index : 0;
+    }, [lines, dataKey]);
+    const seriesConfig = lines[seriesIndex];
+    const yScale = useYScale(seriesConfig?.yAxisId);
+    const seriesColor = defaultScatterColors[seriesIndex % defaultScatterColors.length] ?? defaultScatterColors[0];
+    const resolvedFill = fill ?? seriesConfig?.stroke ?? seriesColor;
+    const resolvedStroke = stroke ?? resolvedFill;
+    const visualExtent = useMemo(() => getSeriesMarkerVisualExtent({
+        radius,
+        strokeWidth,
+        ringGap,
+        outlineWidth,
+        showActiveHighlight,
+    }), [radius, strokeWidth, ringGap, outlineWidth, showActiveHighlight]);
+    const revealDurationSec = clipRevealTransition(enterTransition).duration ?? animationDuration / 1000;
+    const enterDuration = 0.5;
+    const isRevealing = animate && !isLoaded;
+    const getY = useCallback((d) => {
+        const value = d[dataKey];
+        return typeof value === "number" ? (yScale(value) ?? 0) : null;
+    }, [dataKey, yScale]);
+    const points = useMemo(() => data.flatMap((d, index) => {
+        const cy = getY(d);
+        if (cy === null) {
+            return [];
+        }
+        const cx = xScale(xAccessor(d)) ?? 0;
+        const leadingEdge = Math.max(0, cx - visualExtent);
+        const revealDelay = innerWidth > 0 && isRevealing ? (leadingEdge / innerWidth) * revealDurationSec : 0;
+        return [{ index, cx, cy, revealDelay }];
+    }), [data, getY, xScale, xAccessor, innerWidth, isRevealing, revealDurationSec, visualExtent]);
+    // Memo so the inner <SeriesMarkersActiveHighlight> sees a stable prop and
+    // can be cheaply re-rendered on hover without re-creating the spread.
+    const markerStyle = useMemo(() => ({
+        fill: resolvedFill,
+        stroke: resolvedStroke,
+        strokeWidth,
+        ringGap,
+        outlineWidth,
+        outlineColor,
+        radius,
+    }), [resolvedFill, resolvedStroke, strokeWidth, ringGap, outlineWidth, outlineColor, radius]);
+    if (isRevealing) {
+        return (_jsx("g", { children: points.map((point) => (_jsx(SeriesPointMarker, { cx: point.cx, cy: point.cy, dataKey: dataKey, enterBlur: enterBlur, enterDuration: enterDuration, index: point.index, revealDelay: point.revealDelay, revealEpoch: revealEpoch ?? 0, ...markerStyle }, `${dataKey}-${point.index}`))) }));
+    }
+    // Stable base layer — its children come from the parent and stay
+    // referentially identical when the dim wrapper re-renders for hover.
+    const baseMarkers = points.map((point) => (_jsx(StaticSeriesPointMarker, { cx: point.cx, cy: point.cy, ...markerStyle }, `${dataKey}-${point.index}`)));
+    const activeScale = showActiveHighlight ? 1.35 : 1;
+    return (_jsxs("g", { children: [_jsx(SeriesMarkersDimWrapper, { enabled: fadeOnHover, inactiveBlur: inactiveBlur, inactiveOpacity: inactiveOpacity, seriesIndex: seriesIndex, children: baseMarkers }), _jsx(SeriesMarkersActiveHighlight, { activeScale: activeScale, enabled: fadeOnHover, markerStyle: markerStyle, points: points })] }));
+}
+SeriesMarkers.displayName = "SeriesMarkers";
+/**
+ * Wraps the stable point grid with hover-driven opacity + blur. Subscribes to
+ * hover internally so the grid (passed as `children`) keeps a stable reference
+ * and React skips reconciling it when this wrapper re-renders.
+ */
+function SeriesMarkersDimWrapper({ enabled, inactiveOpacity, inactiveBlur, seriesIndex, children, }) {
+    const { tooltipData } = useChartHover();
+    const { hoveredIndex: legendHoveredIndex } = useChartLegendHover();
+    const isLegendDimmed = legendHoveredIndex !== null && legendHoveredIndex !== seriesIndex;
+    const dimBase = enabled && (tooltipData !== null || isLegendDimmed);
+    return (_jsx("g", { opacity: dimBase ? inactiveOpacity : 1, style: {
+            transition: "opacity 0.15s ease-in-out, filter 0.15s ease-in-out",
+            filter: dimBase && inactiveBlur > 0 ? `blur(${inactiveBlur}px)` : "none",
+        }, children: children }));
+}
+/**
+ * Renders the scaled "active" marker on top of the base grid. Subscribes to
+ * hover internally; the parent doesn't re-render on cursor motion.
+ */
+function SeriesMarkersActiveHighlight({ enabled, points, markerStyle, activeScale, }) {
+    const { tooltipData } = useChartHover();
+    if (!enabled || tooltipData === null) {
+        return null;
+    }
+    const activePoint = points.find((point) => point.index === tooltipData.index);
+    if (!activePoint) {
+        return null;
+    }
+    return (_jsx(StaticSeriesPointMarker, { cx: activePoint.cx, cy: activePoint.cy, scale: activeScale, ...markerStyle }));
+}
+export default SeriesMarkers;
+//# sourceMappingURL=series-markers.js.map

package/dist/charts/series-path-utils.d.ts

@@ -0,0 +1,19 @@
+type CurveFactory = any;
+export interface SeriesPathPoint {
+    x: number;
+    y: number;
+    key: string;
+}
+export declare function computeSeriesPathPoints(data: Record<string, unknown>[], xAccessor: (datum: Record<string, unknown>) => Date, xScale: (value: Date) => number | undefined, yScale: (value: number) => number | undefined, dataKey: string): SeriesPathPoint[];
+export declare function interpolateSeriesPathPoints(from: SeriesPathPoint[], to: SeriesPathPoint[], progress: number): SeriesPathPoint[];
+export declare function seriesPathFromPoints(points: SeriesPathPoint[], curve: CurveFactory): string;
+export declare function seriesPathTransitionSignature({ renderData, xAccessor, dataKey, innerWidth, xDomainMin, xDomainMax, }: {
+    renderData: Record<string, unknown>[];
+    xAccessor: (datum: Record<string, unknown>) => Date;
+    dataKey: string;
+    innerWidth: number;
+    xDomainMin: number;
+    xDomainMax: number;
+}): string;
+export {};
+//# sourceMappingURL=series-path-utils.d.ts.map

package/dist/charts/series-path-utils.js

@@ -0,0 +1,60 @@
+import { line as d3Line } from "d3-shape";
+export function computeSeriesPathPoints(data, xAccessor, xScale, yScale, dataKey) {
+    return data.map((datum, index) => {
+        const xValue = xAccessor(datum);
+        const yValue = datum[dataKey];
+        return {
+            x: xScale(xValue) ?? 0,
+            y: typeof yValue === "number" ? (yScale(yValue) ?? 0) : 0,
+            key: String(xValue.getTime?.() ?? index),
+        };
+    });
+}
+export function interpolateSeriesPathPoints(from, to, progress) {
+    if (progress >= 1) {
+        return to;
+    }
+    if (progress <= 0) {
+        return from.length > 0 ? from : to;
+    }
+    const fromByKey = new Map(from.map((point) => [point.key, point]));
+    return to.map((target, index) => {
+        const source = fromByKey.get(target.key);
+        if (source) {
+            return {
+                key: target.key,
+                x: source.x + (target.x - source.x) * progress,
+                y: source.y + (target.y - source.y) * progress,
+            };
+        }
+        const previousTarget = index > 0 ? to[index - 1] : undefined;
+        const previousSource = previousTarget ? fromByKey.get(previousTarget.key) : undefined;
+        const nextTarget = index < to.length - 1 ? to[index + 1] : undefined;
+        const nextSource = nextTarget ? fromByKey.get(nextTarget.key) : undefined;
+        const anchor = previousSource ?? nextSource ?? from[0] ?? target;
+        return {
+            key: target.key,
+            x: anchor.x + (target.x - anchor.x) * progress,
+            y: anchor.y + (target.y - anchor.y) * progress,
+        };
+    });
+}
+export function seriesPathFromPoints(points, curve) {
+    if (points.length === 0) {
+        return "";
+    }
+    const generator = d3Line()
+        .x((point) => point.x)
+        .y((point) => point.y)
+        .curve(curve);
+    return generator(points) ?? "";
+}
+export function seriesPathTransitionSignature({ renderData, xAccessor, dataKey, innerWidth, xDomainMin, xDomainMax, }) {
+    const values = renderData.map((datum) => {
+        const xValue = xAccessor(datum);
+        const yValue = datum[dataKey];
+        return `${xValue.getTime()}:${typeof yValue === "number" ? yValue : ""}`;
+    });
+    return `${innerWidth}|${xDomainMin}|${xDomainMax}|${values.join(",")}`;
+}
+//# sourceMappingURL=series-path-utils.js.map

package/dist/charts/series-point-marker.d.ts

@@ -0,0 +1,48 @@
+export interface SeriesPointMarkerStyle {
+    /** Fill color for the inner circle */
+    fill?: string;
+    /** Outer ring stroke color. Default: same as `fill` */
+    stroke?: string;
+    /** Outer ring stroke width in px. Default: 2. Set to 0 to disable. */
+    strokeWidth?: number;
+    /** Gap between the inner fill and outer ring in px. Default: 2 */
+    ringGap?: number;
+    /** Optional outer outline beyond the ring. Default: 0 */
+    outlineWidth?: number;
+    /** Outer outline color. Default: same as `stroke` */
+    outlineColor?: string;
+    /** Point radius in px. Default: 5 */
+    radius?: number;
+    /** Dim non-active points while hovering. Default: true */
+    fadeOnHover?: boolean;
+    /** Opacity for non-hovered points when `fadeOnHover` is true. Default: 0.5 */
+    inactiveOpacity?: number;
+    /**
+     * Blur in px for non-hovered points when `fadeOnHover` is true.
+     * Applied once on the dimmed layer (not per dot) for performance. Default: 2
+     */
+    inactiveBlur?: number;
+    /** Initial blur in px during enter animation. Default: 2 */
+    enterBlur?: number;
+    /** Enlarge the active point while hovering. Default: true */
+    showActiveHighlight?: boolean;
+}
+export interface StaticSeriesPointMarkerProps extends SeriesPointMarkerStyle {
+    cx: number;
+    cy: number;
+    scale?: number;
+}
+export declare const StaticSeriesPointMarker: import("react").MemoExoticComponent<({ cx, cy, scale, fill, stroke, strokeWidth, ringGap, outlineWidth, outlineColor, radius, }: StaticSeriesPointMarkerProps) => import("react").JSX.Element>;
+export interface SeriesPointMarkerProps extends SeriesPointMarkerStyle {
+    dataKey: string;
+    index: number;
+    cx: number;
+    cy: number;
+    revealDelay: number;
+    revealEpoch: number;
+    enterDuration: number;
+}
+/** Motion enter marker — used only while the chart reveal is running. */
+export declare function SeriesPointMarker({ dataKey, index, cx, cy, enterBlur, revealDelay, revealEpoch, enterDuration, fill, stroke, strokeWidth, ringGap, outlineWidth, outlineColor, radius, }: SeriesPointMarkerProps): import("react").JSX.Element;
+export declare function getSeriesMarkerVisualExtent(style: Pick<SeriesPointMarkerStyle, "radius" | "strokeWidth" | "ringGap" | "outlineWidth" | "showActiveHighlight">): number;
+//# sourceMappingURL=series-point-marker.d.ts.map