@cronus-ui/ui 0.6.0

package/dist/charts/line-series-terminal-marker.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useMemo } from "react";
+import { useChartStable, useYScale } from "./chart-context.js";
+import { StaticSeriesPointMarker } from "./series-point-marker.js";
+function isTerminalMarkerPhaseVisible(phase) {
+    return phase === "ready" || phase === "exitingReady";
+}
+/** Hollow ring at the last data point — shared anchor for projection lines. */
+export function LineSeriesTerminalMarker({ dataKey, yAxisId, fill = "transparent", stroke = "var(--chart-1)", radius = 5, ringGap = 0, strokeWidth = 1.5, }) {
+    const { data, xScale, xAccessor, chartPhase, revealEpoch, enterTransition } = useChartStable();
+    const yScale = useYScale(yAxisId);
+    const point = useMemo(() => {
+        const lastRow = data.at(-1);
+        if (!lastRow) {
+            return null;
+        }
+        const value = lastRow[dataKey];
+        if (typeof value !== "number") {
+            return null;
+        }
+        return {
+            cx: xScale(xAccessor(lastRow)) ?? 0,
+            cy: yScale(value) ?? 0,
+        };
+    }, [data, dataKey, xAccessor, xScale, yScale]);
+    const visible = isTerminalMarkerPhaseVisible(chartPhase);
+    const fadeTransition = enterTransition && typeof enterTransition === "object"
+        ? enterTransition
+        : { duration: 0.28, ease: [0.22, 1, 0.36, 1] };
+    if (!point) {
+        return null;
+    }
+    return (_jsx(motion.g, { animate: {
+            opacity: visible ? 1 : 0,
+            scale: visible ? 1 : 0.55,
+        }, initial: { opacity: 0, scale: 0.55 }, style: {
+            transformBox: "fill-box",
+            transformOrigin: `${point.cx}px ${point.cy}px`,
+        }, transition: fadeTransition, children: _jsx(StaticSeriesPointMarker, { cx: point.cx, cy: point.cy, fill: fill, radius: radius, ringGap: ringGap, stroke: stroke, strokeWidth: strokeWidth }) }, revealEpoch ?? 0));
+}
+LineSeriesTerminalMarker.displayName = "LineSeriesTerminalMarker";
+LineSeriesTerminalMarker.__isPostOverlay = true;
+export default LineSeriesTerminalMarker;
+//# sourceMappingURL=line-series-terminal-marker.js.map

package/dist/charts/line.d.ts

@@ -0,0 +1,64 @@
+type CurveFactory = any;
+import type { LoadingStyle } from "./chart-phase.js";
+import { type FadeEdges } from "./fade-edges.js";
+import { type LineLoadingPulseMode } from "./line-loading-pulse.js";
+import type { SeriesPointMarkerStyle } from "./series-point-marker.js";
+export interface LineProps {
+    /** Key in data to use for y values */
+    dataKey: string;
+    /** Y-scale group id (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Stroke color. Default: var(--chart-line-primary) */
+    stroke?: string;
+    /** Stroke width. Default: 2.5 */
+    strokeWidth?: number;
+    /** Curve function. Default: curveNatural */
+    curve?: CurveFactory;
+    /** Whether to animate the line. Default: true */
+    animate?: boolean;
+    /**
+     * Fade the line stroke toward transparent at the chart edges.
+     * - `true` fades both edges, `false` disables the fade entirely.
+     * - `"left"` / `"right"` fades only that side.
+     * Default: true
+     */
+    fadeEdges?: FadeEdges;
+    /** Whether to show highlight segment on hover. Default: true */
+    showHighlight?: boolean;
+    /** Render scatter-style circle markers at each data point. Default: false */
+    showMarkers?: boolean;
+    /** Marker styling (same options as Scatter). */
+    markers?: SeriesPointMarkerStyle;
+    /**
+     * Data index from which the line stroke becomes dashed (inclusive).
+     * Useful for projecting incomplete periods, e.g. dashed from yesterday through today.
+     */
+    dashFromIndex?: number;
+    /** Dash pattern for the tail segment when `dashFromIndex` is set. Default: "6,4" */
+    dashArray?: string;
+    /**
+     * Show the loading pulse overlay. Default: follows chart loading phase.
+     * Set `false` to disable even during loading.
+     */
+    loading?: boolean;
+    /** Stroke color for the loading pulse overlay. Default: var(--foreground) */
+    loadingStroke?: string;
+    /** Loading pulse stroke opacity. Default: 0.5 */
+    loadingStrokeOpacity?: number;
+    /** Override pulse animation mode (loop / exit / enter). */
+    loadingPulseMode?: LineLoadingPulseMode;
+    /** Called when a loop-mode pulse cycle completes. */
+    onLoadingPulseCycleComplete?: () => void;
+    /**
+     * Loading animation while the chart is in loading status: the default
+     * traveling `"pulse"`, or a diagonal `"sweep"` shimmer across the skeleton
+     * line. Default: `"pulse"`.
+     */
+    loadingStyle?: LoadingStyle;
+}
+export declare function Line({ dataKey, yAxisId, stroke, strokeWidth, curve, animate, fadeEdges, showHighlight, showMarkers, markers, dashFromIndex, dashArray, loading, loadingStroke, loadingStrokeOpacity, loadingPulseMode, onLoadingPulseCycleComplete, loadingStyle, }: LineProps): import("react").JSX.Element;
+export declare namespace Line {
+    var displayName: string;
+}
+export default Line;
+//# sourceMappingURL=line.d.ts.map

package/dist/charts/line.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { curveNatural } from "@visx/curve";
+import { LinePath } from "@visx/shape";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { chartCssVars, useChartStable, useYScale } from "./chart-context.js";
+import { fadeGradientStops, resolveFadeSides, viewportFadeGradientAttrs, } from "./fade-edges.js";
+import { LineLoadingPulseStroke, resolveLineLoadingPulseMode, } from "./line-loading-pulse.js";
+import { LINE_LOADING_LOOP_PAUSE_MS } from "./line-loading-timing.js";
+import { LineLoadingSweep } from "./loading-sweep.js";
+import { resolveDashTailBounds, usePathStrokeMetrics } from "./path-stroke-utils.js";
+import { SeriesDashTailOverlay } from "./series-dash-tail-overlay.js";
+import { SeriesHighlightLayer } from "./series-highlight-layer.js";
+import { SeriesHoverDim } from "./series-hover-dim.js";
+import { SeriesMarkers } from "./series-markers.js";
+import { useAnimatedSeriesPath } from "./use-animated-series-path.js";
+function LineSeriesStroke({ animatedPathD, curve, getY, pathRef, renderData, strokeWidth, useDataTransitionPath, visibleStroke, xAccessor, xScale, }) {
+    if (useDataTransitionPath && animatedPathD) {
+        return (_jsx("path", { d: animatedPathD, fill: "none", ref: pathRef, stroke: visibleStroke, strokeLinecap: "round", strokeWidth: strokeWidth }));
+    }
+    return (_jsx(LinePath, { curve: curve, data: renderData, innerRef: pathRef, stroke: visibleStroke, strokeLinecap: "round", strokeWidth: strokeWidth, x: (d) => xScale(xAccessor(d)) ?? 0, y: getY }));
+}
+function LineLoadingOverlays({ curve, handleLoadingPulseComplete, innerWidth, loadingStroke, loadingStrokeOpacity, loadingStyle, pathD, pulseEpoch, pulseMode, showLoadingPulse, strokeWidth, }) {
+    const sweepLoading = showLoadingPulse && innerWidth > 0 && loadingStyle === "sweep";
+    const pulseLoading = showLoadingPulse && innerWidth > 0 && !sweepLoading;
+    return (_jsxs(_Fragment, { children: [sweepLoading ? (_jsx(LineLoadingSweep, { curve: curve, mode: pulseMode ?? "loop", onTransitionComplete: handleLoadingPulseComplete, stroke: loadingStroke, strokeOpacity: loadingStrokeOpacity, strokeWidth: strokeWidth }, "loading-sweep")) : null, pulseLoading && pathD ? (_jsx(LineLoadingPulseStroke, { loopEpoch: pulseEpoch, mode: pulseMode ?? undefined, onCycleComplete: handleLoadingPulseComplete, pathD: pathD, stroke: loadingStroke, strokeOpacity: loadingStrokeOpacity, strokeWidth: strokeWidth }, "loading-pulse")) : null] }));
+}
+export function Line({ dataKey, yAxisId, stroke = chartCssVars.linePrimary, strokeWidth = 2.5, curve = curveNatural, animate = true, fadeEdges = true, showHighlight = true, showMarkers = false, markers, dashFromIndex, dashArray = "6,4", loading, loadingStroke = chartCssVars.foreground, loadingStrokeOpacity = 0.5, loadingPulseMode, onLoadingPulseCycleComplete, loadingStyle = "pulse", }) {
+    // Stable slice only: hover state lives inside `<SeriesHoverDim>` and
+    // `<SeriesHighlightLayer>` so this component (and its expensive
+    // <SeriesDashTailOverlay> child) does not re-render on cursor motion.
+    // The reveal-clip is now a single shared clipPath at the chart-shell
+    // level (`time-series-chart-shell.tsx`); we no longer render a per-line
+    // `<ChartRevealClip>` or read `revealEpoch` here.
+    const { data, renderData, xScale, innerHeight, innerWidth, xAccessor, lines, chartPhase, notifyLoadingPulseComplete, yDomainTweenDuration, } = useChartStable();
+    const yScale = useYScale(yAxisId);
+    const useDataTransitionPath = animate && chartPhase === "ready";
+    const { pathD: animatedPathD } = useAnimatedSeriesPath({
+        chartPhase,
+        curve,
+        dataKey,
+        durationMs: yDomainTweenDuration,
+        enabled: useDataTransitionPath,
+        innerWidth,
+        renderData,
+        xAccessor,
+        xScale,
+        yScale,
+    });
+    const phasePulseMode = resolveLineLoadingPulseMode(chartPhase);
+    const pulseMode = loading === false ? null : (loadingPulseMode ?? (loading === true ? "loop" : phasePulseMode));
+    const showLoadingPulse = pulseMode != null;
+    const [pulseEpoch, setPulseEpoch] = useState(0);
+    const effectiveShowHighlight = showHighlight && !showLoadingPulse;
+    const handleLoadingPulseComplete = useCallback(() => {
+        onLoadingPulseCycleComplete?.();
+        if (pulseMode === "loop") {
+            window.setTimeout(() => {
+                setPulseEpoch((epoch) => epoch + 1);
+            }, LINE_LOADING_LOOP_PAUSE_MS);
+            return;
+        }
+        notifyLoadingPulseComplete?.();
+    }, [notifyLoadingPulseComplete, onLoadingPulseCycleComplete, pulseMode]);
+    const seriesIndex = useMemo(() => {
+        const index = lines.findIndex((line) => line.dataKey === dataKey);
+        return index >= 0 ? index : 0;
+    }, [lines, dataKey]);
+    const pathRef = useRef(null);
+    const { pathLength, pathD } = usePathStrokeMetrics(pathRef, [
+        renderData,
+        innerWidth,
+        dashFromIndex,
+        animate,
+        useDataTransitionPath ? animatedPathD : null,
+    ]);
+    const reactId = useId();
+    const gradientId = `line-gradient-${dataKey}-${reactId}`;
+    const getY = useCallback((d) => {
+        const value = d[dataKey];
+        return typeof value === "number" ? (yScale(value) ?? 0) : 0;
+    }, [dataKey, yScale]);
+    const hasDashTail = resolveDashTailBounds(dashFromIndex, data.length);
+    const fadeSides = resolveFadeSides(fadeEdges);
+    const lineStroke = fadeSides.any ? `url(#${gradientId})` : stroke;
+    const fadeStops = fadeSides.any ? fadeGradientStops(fadeSides) : null;
+    const showSeriesStroke = chartPhase === "revealing" || chartPhase === "ready" || chartPhase === "exitingReady";
+    let visibleStroke = "transparent";
+    if (showSeriesStroke && !hasDashTail) {
+        visibleStroke = lineStroke;
+    }
+    return (_jsxs(_Fragment, { children: [fadeStops ? (_jsx("defs", { children: _jsx("linearGradient", { id: gradientId, ...viewportFadeGradientAttrs(innerWidth), children: fadeStops.map((stop) => (_jsx("stop", { offset: stop.offset, style: { stopColor: stroke, stopOpacity: stop.opacity } }, stop.offset))) }) })) : null, _jsxs(SeriesHoverDim, { dimOpacity: 0.3, enabled: effectiveShowHighlight, seriesIndex: seriesIndex, children: [_jsx(LineSeriesStroke, { animatedPathD: animatedPathD, curve: curve, getY: getY, pathRef: pathRef, renderData: renderData, strokeWidth: strokeWidth, useDataTransitionPath: useDataTransitionPath, visibleStroke: visibleStroke, xAccessor: xAccessor, xScale: xScale }), _jsx(SeriesDashTailOverlay, { dashArray: dashArray, dashFromIndex: dashFromIndex, data: data, innerHeight: innerHeight, innerWidth: innerWidth, pathD: pathD, pathLength: pathLength, stroke: lineStroke, strokeWidth: strokeWidth, xAccessor: xAccessor, xScale: xScale })] }), showMarkers ? (_jsx(SeriesMarkers, { animate: animate, dataKey: dataKey, ...markers, fill: markers?.fill ?? stroke, stroke: markers?.stroke ?? markers?.fill ?? stroke })) : null, _jsx(SeriesHighlightLayer, { enabled: effectiveShowHighlight, height: innerHeight, pathRef: pathRef, stroke: stroke, strokeWidth: strokeWidth }), _jsx(LineLoadingOverlays, { curve: curve, handleLoadingPulseComplete: handleLoadingPulseComplete, innerWidth: innerWidth, loadingStroke: loadingStroke, loadingStrokeOpacity: loadingStrokeOpacity, loadingStyle: loadingStyle, pathD: pathD, pulseEpoch: pulseEpoch, pulseMode: pulseMode, showLoadingPulse: showLoadingPulse, strokeWidth: strokeWidth })] }));
+}
+Line.displayName = "Line";
+export default Line;
+//# sourceMappingURL=line.js.map

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

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+import { type Margin } from "./chart-context.js";
+export interface LiveLinePoint {
+    time: number;
+    value: number;
+}
+export interface LiveLineChartProps {
+    /** Streaming data — array of { time: unixSeconds, value } */
+    data: LiveLinePoint[];
+    /** Latest value (smoothly interpolated to) */
+    value: number;
+    /** Key used for the value field in context data. Default: "value" */
+    dataKey?: string;
+    /** Visible time window in seconds. Default: 30 */
+    window?: number;
+    /** Number of X-axis ticks (used to compute leading offset). Default: 5 */
+    numXTicks?: number;
+    /** Leading offset in X-tick units (0 = now at right edge). Default: 0 */
+    nowOffsetUnits?: number;
+    /** Tight Y-axis. Default: false */
+    exaggerate?: boolean;
+    /** Interpolation speed (0–1). Default: 0.08 */
+    lerpSpeed?: number;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Freeze chart scrolling. Default: false */
+    paused?: boolean;
+    /** Child components (LiveLine, Grid, ChartTooltip, LiveXAxis, LiveYAxis, etc.) */
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function LiveLineChart({ data, value, dataKey, window: windowSecs, numXTicks, nowOffsetUnits, exaggerate, lerpSpeed, margin: marginProp, paused, children, className, style, }: LiveLineChartProps): import("react").JSX.Element;
+export default LiveLineChart;
+//# sourceMappingURL=live-line-chart.d.ts.map

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

@@ -0,0 +1,374 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { localPoint } from "@visx/event";
+import { ParentSize } from "@visx/responsive";
+import { scaleLinear, scaleTime } from "@visx/scale";
+import { bisector } from "d3-array";
+import { Children, isValidElement, memo, startTransition, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { isClipExcludedComponent, isUnderlayComponent } from "./chart-child-passthrough.js";
+import { ChartProvider } from "./chart-context.js";
+import { hmsTimeFmt } from "./chart-formatters.js";
+import { DEFAULT_CHART_LIFECYCLE } from "./chart-phase.js";
+import { extractReferenceAreaConfigs } from "./reference-area-config.js";
+import { wrapSingleYScale } from "./y-axis-scales.js";
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const LERP_SPEED = 0.08;
+const DEFAULT_MARGIN = { top: 16, right: 80, bottom: 40, left: 56 };
+/** React commit interval for the live animation loop (~30fps). */
+const LIVE_FRAME_COMMIT_MS = 32;
+function computeTargetRange(data, value, exaggerate) {
+    if (data.length === 0) {
+        return { yMin: 0, yMax: 100 };
+    }
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+    for (const d of data) {
+        if (d.value < min) {
+            min = d.value;
+        }
+        if (d.value > max) {
+            max = d.value;
+        }
+    }
+    if (value < min) {
+        min = value;
+    }
+    if (value > max) {
+        max = value;
+    }
+    const rawRange = max - min;
+    const paddingFactor = exaggerate ? 0.03 : 0.15;
+    const rangePad = rawRange * paddingFactor || (exaggerate ? 0.04 : 10);
+    return { yMin: min - rangePad, yMax: max + rangePad };
+}
+function nextAnimFrame(prev, targetRange, targetValue, speed, isPaused) {
+    const nextNow = isPaused ? prev.now : Date.now();
+    const nextYMin = targetRange.yMin < prev.yMin
+        ? targetRange.yMin
+        : prev.yMin + (targetRange.yMin - prev.yMin) * speed;
+    const nextYMax = targetRange.yMax > prev.yMax
+        ? targetRange.yMax
+        : prev.yMax + (targetRange.yMax - prev.yMax) * speed;
+    const nextValue = prev.displayValue + (targetValue - prev.displayValue) * speed;
+    return {
+        now: nextNow,
+        yMin: nextYMin,
+        yMax: nextYMax,
+        displayValue: nextValue,
+    };
+}
+function interpolateAtTime(points, timeSec) {
+    if (points.length === 0) {
+        return null;
+    }
+    const firstPt = points[0];
+    const lastPt = points.at(-1);
+    if (timeSec <= firstPt.time) {
+        return firstPt.value;
+    }
+    if (timeSec >= lastPt.time) {
+        return lastPt.value;
+    }
+    let lo = 0;
+    let hi = points.length - 1;
+    while (hi - lo > 1) {
+        const mid = Math.floor((lo + hi) / 2);
+        const midPt = points[mid];
+        if (midPt && midPt.time <= timeSec) {
+            lo = mid;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    const p1 = points[lo];
+    if (!p1) {
+        return null;
+    }
+    const p2 = points[hi];
+    if (!p2) {
+        return null;
+    }
+    const dt = p2.time - p1.time;
+    if (dt === 0) {
+        return p1.value;
+    }
+    const t = (timeSec - p1.time) / dt;
+    return p1.value + (p2.value - p1.value) * t;
+}
+const bisectTime = bisector((d) => d.time).left;
+function extractLiveLineConfigs(children) {
+    const configs = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        const childType = child.type;
+        const name = typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+        const props = child.props;
+        if ((name === "LiveLine" || (props && "dataKey" in props)) && props?.dataKey) {
+            configs.push({
+                dataKey: props.dataKey,
+                stroke: props.stroke || "var(--chart-line-primary)",
+                strokeWidth: props.strokeWidth || 2,
+            });
+        }
+    });
+    return configs;
+}
+// ---------------------------------------------------------------------------
+// Inner chart
+// ---------------------------------------------------------------------------
+function liveTooltipKey(tooltip, dataKey) {
+    if (!tooltip) {
+        return null;
+    }
+    return `${Math.round(tooltip.x)}:${Math.round(tooltip.yPositions[dataKey] ?? 0)}`;
+}
+function resolveLiveTooltip(cursorX, innerWidth, innerHeight, frame, leadingMs, windowMs, xTickUnitMs, data, dataKey) {
+    if (cursorX === null || innerWidth <= 0 || innerHeight <= 0) {
+        return null;
+    }
+    const domainEndMs = frame.now + leadingMs;
+    const xScaleNext = scaleTime({
+        domain: [new Date(domainEndMs - windowMs), new Date(domainEndMs)],
+        range: [0, innerWidth],
+    });
+    const yScaleNext = scaleLinear({
+        domain: [frame.yMin, frame.yMax],
+        range: [innerHeight, 0],
+        nice: true,
+    });
+    const timeMs = xScaleNext.invert(cursorX).getTime();
+    const timeSec = timeMs / 1000;
+    const visible = data.filter((p) => p.time >= (domainEndMs - windowMs) / 1000);
+    visible.push({ time: frame.now / 1000, value: frame.displayValue });
+    visible.push({
+        time: (frame.now + xTickUnitMs) / 1000,
+        value: frame.displayValue,
+    });
+    const val = interpolateAtTime(visible, timeSec);
+    if (val === null) {
+        return null;
+    }
+    return {
+        point: { date: new Date(timeMs), [dataKey]: val },
+        index: 0,
+        x: cursorX,
+        yPositions: { [dataKey]: yScaleNext(val) ?? 0 },
+    };
+}
+function shouldCommitLiveUpdates(now, lastFrameCommit, tooltipKey, lastTooltipKey) {
+    const commitFrame = now - lastFrameCommit >= LIVE_FRAME_COMMIT_MS;
+    const commitTooltip = tooltipKey !== lastTooltipKey;
+    return { commitFrame, commitTooltip };
+}
+function LiveLineChartInner(props) {
+    const { width, height, margin } = props;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    if (innerWidth <= 0 || innerHeight <= 0) {
+        return null;
+    }
+    return _jsx(LiveLineChartCore, { ...props });
+}
+const LiveLineChartCore = memo(function LiveLineChartCore({ data, value, dataKey, windowSecs, numXTicks, nowOffsetUnits, exaggerate, lerpSpeed, margin, paused, width, height, containerRef, children, }) {
+    const windowMs = windowSecs * 1000;
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    // ---- Animation state ----
+    const animRef = useRef({
+        now: Date.now(),
+        yMin: 0,
+        yMax: 100,
+        displayValue: value,
+    });
+    const [frame, setFrame] = useState({
+        now: Date.now(),
+        yMin: 0,
+        yMax: 100,
+        displayValue: value,
+    });
+    const pausedRef = useRef(paused);
+    const dataRef = useRef(data);
+    const dataKeyRef = useRef(dataKey);
+    dataRef.current = data;
+    dataKeyRef.current = dataKey;
+    useEffect(() => {
+        pausedRef.current = paused;
+    }, [paused]);
+    const targetRange = useMemo(() => computeTargetRange(data, value, exaggerate), [data, value, exaggerate]);
+    const lines = useMemo(() => extractLiveLineConfigs(children), [children]);
+    // Leading offset (used in rAF for tooltip)
+    const xTickUnitMs = windowMs / (numXTicks - 1);
+    const leadingMs = nowOffsetUnits * xTickUnitMs;
+    // ---- rAF loop: update frame and tooltip in one place to avoid effect→setState loops ----
+    const cursorXRef = useRef(null);
+    const [tooltipData, setTooltipData] = useState(null);
+    const lastFrameCommitRef = useRef(0);
+    const lastTooltipKeyRef = useRef(null);
+    useEffect(() => {
+        let raf;
+        const tick = () => {
+            const next = nextAnimFrame(animRef.current, targetRange, value, lerpSpeed, pausedRef.current);
+            animRef.current = next;
+            const nextTooltip = resolveLiveTooltip(cursorXRef.current, innerWidth, innerHeight, next, leadingMs, windowMs, xTickUnitMs, dataRef.current, dataKeyRef.current);
+            const now = performance.now();
+            const tooltipKey = liveTooltipKey(nextTooltip, dataKeyRef.current);
+            const { commitFrame, commitTooltip } = shouldCommitLiveUpdates(now, lastFrameCommitRef.current, tooltipKey, lastTooltipKeyRef.current);
+            if (!(commitFrame || commitTooltip)) {
+                raf = requestAnimationFrame(tick);
+                return;
+            }
+            if (commitFrame) {
+                lastFrameCommitRef.current = now;
+            }
+            if (commitTooltip) {
+                lastTooltipKeyRef.current = tooltipKey;
+            }
+            startTransition(() => {
+                if (commitFrame) {
+                    setFrame(next);
+                }
+                if (commitTooltip) {
+                    setTooltipData(nextTooltip);
+                }
+            });
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [targetRange, value, lerpSpeed, leadingMs, windowMs, xTickUnitMs, innerWidth, innerHeight]);
+    const domainEndMs = frame.now + leadingMs;
+    // ---- Scales ----
+    const xScale = useMemo(() => scaleTime({
+        domain: [new Date(domainEndMs - windowMs), new Date(domainEndMs)],
+        range: [0, innerWidth],
+    }), [domainEndMs, windowMs, innerWidth]);
+    const yScale = useMemo(() => scaleLinear({
+        domain: [frame.yMin, frame.yMax],
+        range: [innerHeight, 0],
+        nice: true,
+    }), [frame.yMin, frame.yMax, innerHeight]);
+    // ---- Build context-compatible data ----
+    // Convert LiveLinePoint[] to Record<string, unknown>[] with 2 virtual points:
+    // 1. At "now" — the live tip where the dot sits
+    // 2. At "now + 1 unit" — a queued point that the line fades into
+    const contextData = useMemo(() => {
+        const windowStart = domainEndMs - windowMs;
+        let startIdx = bisectTime(data, windowStart / 1000, 0);
+        if (startIdx > 0) {
+            startIdx--;
+        }
+        const sliced = data.slice(startIdx);
+        const records = sliced.map((p) => ({
+            date: new Date(p.time * 1000),
+            [dataKey]: p.value,
+        }));
+        // Virtual point 1: the "now" position (where the live dot sits)
+        records.push({
+            date: new Date(frame.now),
+            [dataKey]: frame.displayValue,
+        });
+        // Virtual point 2: queued ahead (the line extends and fades into this)
+        records.push({
+            date: new Date(frame.now + xTickUnitMs),
+            [dataKey]: frame.displayValue,
+        });
+        return records;
+    }, [data, frame.now, frame.displayValue, domainEndMs, windowMs, dataKey, xTickUnitMs]);
+    // ---- X accessor ----
+    const xAccessor = useCallback((d) => d.date instanceof Date ? d.date : new Date(d.date), []);
+    const handleMouseMove = useCallback((event) => {
+        const coords = localPoint(event);
+        if (!coords) {
+            return;
+        }
+        const x = coords.x - margin.left;
+        cursorXRef.current = x >= 0 && x <= innerWidth ? x : null;
+    }, [margin.left, innerWidth]);
+    const handleMouseLeave = useCallback(() => {
+        cursorXRef.current = null;
+        lastTooltipKeyRef.current = null;
+        setTooltipData(null);
+    }, []);
+    // Date labels (for ChartTooltip's DateTicker — not used in live but needed for context)
+    const dateLabels = useMemo(() => contextData.map((d) => hmsTimeFmt.format(xAccessor(d))), [contextData, xAccessor]);
+    const columnWidth = useMemo(() => {
+        if (contextData.length < 2) {
+            return 0;
+        }
+        return innerWidth / (contextData.length - 1);
+    }, [innerWidth, contextData.length]);
+    const clipExcludedChildren = [];
+    const underlayChildren = [];
+    const seriesChildren = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        if (isClipExcludedComponent(child)) {
+            clipExcludedChildren.push(child);
+        }
+        else if (isUnderlayComponent(child)) {
+            underlayChildren.push(child);
+        }
+        else {
+            seriesChildren.push(child);
+        }
+    });
+    const referenceAreas = useMemo(() => extractReferenceAreaConfigs(children), [children]);
+    const contextValue = useMemo(() => ({
+        ...DEFAULT_CHART_LIFECYCLE,
+        data: contextData,
+        renderData: contextData,
+        xScale,
+        yScale,
+        yScales: wrapSingleYScale(yScale),
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        columnWidth,
+        tooltipData,
+        setTooltipData,
+        containerRef,
+        lines,
+        referenceAreas,
+        isLoaded: true,
+        animationDuration: 0,
+        xAccessor,
+        dateLabels,
+    }), [
+        contextData,
+        xScale,
+        yScale,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        columnWidth,
+        tooltipData,
+        containerRef,
+        lines,
+        referenceAreas,
+        xAccessor,
+        dateLabels,
+    ]);
+    return (_jsx(ChartProvider, { value: contextValue, children: _jsx("svg", { "aria-hidden": "true", className: "overflow-visible", height: height, width: width, children: _jsxs("g", { onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, style: { cursor: "crosshair" }, transform: `translate(${margin.left},${margin.top})`, children: [_jsx("rect", { fill: "transparent", height: innerHeight, width: innerWidth, x: 0, y: 0 }), clipExcludedChildren, underlayChildren, seriesChildren] }) }) }));
+});
+// ---------------------------------------------------------------------------
+// Public component
+// ---------------------------------------------------------------------------
+export function LiveLineChart({ data, value, dataKey = "value", window: windowSecs = 30, numXTicks = 5, nowOffsetUnits = 0, exaggerate = false, lerpSpeed = LERP_SPEED, margin: marginProp, paused = false, children, className, style, }) {
+    const containerRef = useRef(null);
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    return (_jsx("div", { "data-slot": "live-line-chart", className: cn("relative w-full", className), ref: containerRef, style: { height: 300, touchAction: "none", ...style }, children: _jsx(ParentSize, { debounceTime: 10, children: ({ width, height }) => (_jsx(LiveLineChartInner, { containerRef: containerRef, data: data, dataKey: dataKey, exaggerate: exaggerate, height: height, lerpSpeed: lerpSpeed, margin: margin, nowOffsetUnits: nowOffsetUnits, numXTicks: numXTicks, paused: paused, value: value, width: width, windowSecs: windowSecs, children: children })) }) }));
+}
+export default LiveLineChart;
+//# sourceMappingURL=live-line-chart.js.map

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

@@ -0,0 +1,39 @@
+type CurveFactory = any;
+export type Momentum = "up" | "down" | "flat";
+export interface MomentumColors {
+    up: string;
+    down: string;
+    flat: string;
+}
+export declare function detectMomentum(data: Record<string, unknown>[], dataKey: string, lookback?: number): Momentum;
+export interface LiveLineProps {
+    /** Key in data to use for y values */
+    dataKey: string;
+    /** Stroke color. Default: var(--chart-line-primary) */
+    stroke?: string;
+    /** Stroke width. Default: 2 */
+    strokeWidth?: number;
+    /** Curve function. Default: curveMonotoneX */
+    curve?: CurveFactory;
+    /** Show gradient fill under the curve. Default: true */
+    fill?: boolean;
+    /** Show pulsing live dot at the right edge. Default: true */
+    pulse?: boolean;
+    /** Radius of the live dot. Default: 4 */
+    dotSize?: number;
+    /** Show value badge pill at the live tip. Default: true */
+    badge?: boolean;
+    /** Value label formatter for the badge */
+    formatValue?: (v: number) => string;
+    /**
+     * When set, the line/fill color changes based on momentum direction.
+     * Overrides `stroke` for the line and fill (dot always uses momentum colors).
+     */
+    momentumColors?: MomentumColors;
+}
+export declare function LiveLine({ dataKey, stroke, strokeWidth, curve, fill, pulse, dotSize, badge, formatValue, momentumColors, }: LiveLineProps): import("react").JSX.Element;
+export declare namespace LiveLine {
+    var displayName: string;
+}
+export default LiveLine;
+//# sourceMappingURL=live-line.d.ts.map