@cronus-ui/ui 0.6.0

package/dist/charts/live-line.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { curveMonotoneX } from "@visx/curve";
+import { AreaClosed, LinePath } from "@visx/shape";
+import { motion } from "motion/react";
+import { useCallback, useId, useMemo } from "react";
+import { chartCssVars, useChart } from "./chart-context.js";
+export function detectMomentum(data, dataKey, lookback = 20) {
+    if (data.length < 5) {
+        return "flat";
+    }
+    const start = Math.max(0, data.length - lookback);
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+    for (let i = start; i < data.length; i++) {
+        const v = data[i]?.[dataKey];
+        if (typeof v === "number") {
+            if (v < min) {
+                min = v;
+            }
+            if (v > max) {
+                max = v;
+            }
+        }
+    }
+    const range = max - min;
+    if (range === 0) {
+        return "flat";
+    }
+    const tailStart = Math.max(start, data.length - 5);
+    const first = data[tailStart]?.[dataKey] ?? 0;
+    const last = data.at(-1)?.[dataKey] ?? 0;
+    const delta = last - first;
+    const threshold = range * 0.12;
+    if (delta > threshold) {
+        return "up";
+    }
+    if (delta < -threshold) {
+        return "down";
+    }
+    return "flat";
+}
+LiveLine.displayName = "LiveLine";
+export function LiveLine({ dataKey, stroke = chartCssVars.linePrimary, strokeWidth = 2, curve = curveMonotoneX, fill = true, pulse = true, dotSize = 4, badge = true, formatValue = (v) => v.toFixed(2), momentumColors, }) {
+    const { data, xScale, yScale, innerWidth, innerHeight, xAccessor, lines, tooltipData } = useChart();
+    const isScrubbing = tooltipData !== null;
+    const uid = useId();
+    const gradientId = `live-line-grad-${uid}`;
+    const areaGradientId = `live-area-grad-${uid}`;
+    const fadeId = `live-fade-${uid}`;
+    const fadeMaskId = `live-fade-mask-${uid}`;
+    const getX = useCallback((d) => xScale(xAccessor(d)) ?? 0, [xScale, xAccessor]);
+    const getY = useCallback((d) => {
+        const v = d[dataKey];
+        return typeof v === "number" ? (yScale(v) ?? 0) : 0;
+    }, [dataKey, yScale]);
+    // The second-to-last point is the "now" position (live tip).
+    // The last point is the queued future point for the fade-out zone.
+    const nowPoint = data.length >= 2 ? data.at(-2) : data.at(-1);
+    const liveValue = nowPoint && typeof nowPoint[dataKey] === "number" ? nowPoint[dataKey] : 0;
+    const liveDotX = nowPoint ? (xScale(xAccessor(nowPoint)) ?? 0) : innerWidth;
+    const liveDotY = yScale(liveValue) ?? 0;
+    const momentum = useMemo(() => detectMomentum(data, dataKey), [data, dataKey]);
+    const defaultMomentumColors = {
+        up: "var(--chart-1)",
+        down: "var(--chart-5)",
+        flat: stroke,
+    };
+    const dotMomentumColors = momentumColors ?? defaultMomentumColors;
+    const dotColor = dotMomentumColors[momentum];
+    // Find the line config for this dataKey to get the resolved stroke
+    const lineConfig = lines.find((l) => l.dataKey === dataKey);
+    const baseStroke = lineConfig?.stroke ?? stroke;
+    const resolvedStroke = momentumColors ? momentumColors[momentum] : baseStroke;
+    return (_jsxs(_Fragment, { children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: resolvedStroke, stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: resolvedStroke, stopOpacity: 0.6 })] }), _jsxs("linearGradient", { id: areaGradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: resolvedStroke, stopOpacity: 0.1 }), _jsx("stop", { offset: "100%", stopColor: resolvedStroke, stopOpacity: 0 })] }), _jsxs("linearGradient", { id: fadeId, x1: "0", x2: "1", y1: "0", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: 0 }), _jsx("stop", { offset: "4%", stopColor: "white", stopOpacity: 1 }), liveDotX < innerWidth - 1 ? (_jsxs(_Fragment, { children: [_jsx("stop", { offset: `${(liveDotX / innerWidth) * 100}%`, stopColor: "white", stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })] })) : (_jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: 1 }))] }), _jsx("mask", { id: fadeMaskId, children: _jsx("rect", { fill: `url(#${fadeId})`, height: innerHeight + 40, width: innerWidth, x: 0, y: -20 }) })] }), fill && data.length > 1 && (_jsx("g", { mask: `url(#${fadeMaskId})`, children: _jsx(AreaClosed, { curve: curve, data: data, fill: `url(#${areaGradientId})`, strokeWidth: 0, x: getX, y: getY, yScale: yScale }) })), data.length > 1 && (_jsx("g", { mask: `url(#${fadeMaskId})`, children: _jsx(LinePath, { curve: curve, data: data, stroke: `url(#${gradientId})`, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, x: getX, y: getY }) })), _jsx("line", { opacity: 0.25, stroke: resolvedStroke, strokeDasharray: "4,4", strokeWidth: 1, x1: 0, x2: innerWidth, y1: liveDotY, y2: liveDotY }), _jsxs(motion.g, { animate: { opacity: isScrubbing ? 0.25 : 1 }, transition: { duration: 0.3, ease: "easeInOut" }, children: [_jsxs("g", { children: [pulse && (_jsxs("circle", { cx: liveDotX, cy: liveDotY, fill: "none", opacity: 0.4, r: dotSize * 2, stroke: dotColor, strokeWidth: 1.5, children: [_jsx("animate", { attributeName: "r", dur: "1.5s", from: String(dotSize), repeatCount: "indefinite", to: String(dotSize * 3.5) }), _jsx("animate", { attributeName: "opacity", dur: "1.5s", from: "0.5", repeatCount: "indefinite", to: "0" })] })), _jsx("circle", { cx: liveDotX, cy: liveDotY, fill: dotColor, opacity: 0.1, r: dotSize + 2 }), _jsx("circle", { cx: liveDotX, cy: liveDotY, fill: dotColor, r: dotSize, stroke: chartCssVars.background, strokeWidth: 2 })] }), badge && (_jsxs("g", { transform: `translate(${liveDotX + 12},${liveDotY})`, children: [_jsx("rect", { fill: "var(--chart-tooltip-background)", height: 24, opacity: 0.95, rx: 6, width: formatValue(liveValue).length * 7.5 + 16, x: 0, y: -12 }), _jsx("text", { fill: "var(--chart-tooltip-foreground)", fontFamily: "SF Mono, Menlo, Monaco, monospace", fontSize: 11, fontWeight: 500, x: 8, y: 4, children: formatValue(liveValue) })] }))] })] }));
+}
+export default LiveLine;
+//# sourceMappingURL=live-line.js.map

package/dist/charts/live-x-axis.d.ts

@@ -0,0 +1,12 @@
+export interface LiveXAxisProps {
+    /** Number of time labels. Default: 5 */
+    numTicks?: number;
+    /** Time formatter. Default: HH:MM:SS */
+    formatTime?: (t: number) => string;
+}
+export declare function LiveXAxis(props: LiveXAxisProps): import("react").JSX.Element | null;
+export declare namespace LiveXAxis {
+    var displayName: string;
+}
+export default LiveXAxis;
+//# sourceMappingURL=live-x-axis.d.ts.map

package/dist/charts/live-x-axis.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useSpring } from "motion/react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useChart, useChartStable } from "./chart-context.js";
+import { liveHmsFmt } from "./chart-formatters.js";
+const TICKER_HALF_WIDTH = 50;
+const FADE_BUFFER = 20;
+const crosshairSpringConfig = { stiffness: 300, damping: 30 };
+function labelFadeOpacity(labelX, crosshairX, isHovering) {
+    if (!isHovering || crosshairX === null) {
+        return 1;
+    }
+    const distance = Math.abs(labelX - crosshairX);
+    if (distance < TICKER_HALF_WIDTH) {
+        return 0;
+    }
+    if (distance < TICKER_HALF_WIDTH + FADE_BUFFER) {
+        return (distance - TICKER_HALF_WIDTH) / FADE_BUFFER;
+    }
+    return 1;
+}
+const defaultFormatTime = (t) => liveHmsFmt.format(new Date(t));
+export function LiveXAxis(props) {
+    const { containerRef } = useChartStable();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    return _jsx(LiveXAxisInner, { ...props, container: container });
+}
+const LiveXAxisInner = memo(function LiveXAxisInner({ numTicks = 5, formatTime = defaultFormatTime, container, }) {
+    const { xScale, margin, tooltipData } = useChart();
+    const domain = xScale.domain();
+    const startMs = domain[0]?.getTime() ?? 0;
+    const endMs = domain[1]?.getTime() ?? 0;
+    const labels = useMemo(() => {
+        const step = (endMs - startMs) / (numTicks - 1);
+        return Array.from({ length: numTicks }, (_, i) => {
+            const t = startMs + i * step;
+            const x = (xScale(new Date(t)) ?? 0) + margin.left;
+            return { x, label: formatTime(t), stableKey: i };
+        });
+    }, [startMs, endMs, numTicks, xScale, margin.left, formatTime]);
+    const isHovering = tooltipData !== null;
+    const crosshairX = tooltipData ? tooltipData.x + margin.left : null;
+    // Time pill label
+    const pillLabel = useMemo(() => {
+        if (!tooltipData) {
+            return null;
+        }
+        const timeMs = xScale.invert(tooltipData.x).getTime();
+        return formatTime(timeMs);
+    }, [tooltipData, xScale, formatTime]);
+    // Spring-animated pill position — matches TooltipIndicator's spring config
+    // so the pill and crosshair line move in lockstep
+    const pillX = tooltipData ? tooltipData.x + margin.left : 0;
+    const animatedPillX = useSpring(pillX, crosshairSpringConfig);
+    const springRef = useRef(animatedPillX);
+    springRef.current = animatedPillX;
+    useEffect(() => {
+        springRef.current.set(pillX);
+    }, [pillX]);
+    return createPortal(_jsxs("div", { className: "pointer-events-none absolute inset-0", children: [labels.map((l) => (_jsx("div", { className: "absolute", style: {
+                    left: l.x,
+                    bottom: 12,
+                    width: 0,
+                    display: "flex",
+                    justifyContent: "center",
+                }, children: _jsx(motion.span, { animate: {
+                        opacity: labelFadeOpacity(l.x, crosshairX, isHovering),
+                    }, className: "whitespace-nowrap text-chart-label text-xs", transition: { duration: 0.15, ease: "easeOut" }, children: l.label }) }, l.stableKey))), isHovering && pillLabel && (_jsx(motion.div, { className: "absolute z-50", style: {
+                    left: animatedPillX,
+                    x: "-50%",
+                    bottom: 4,
+                }, children: _jsx("div", { className: "overflow-hidden rounded-full bg-zinc-900 px-4 py-1 text-white shadow-lg dark:bg-zinc-100 dark:text-zinc-900", children: _jsx("span", { className: "whitespace-nowrap font-medium text-sm", children: pillLabel }) }) }))] }), container);
+});
+LiveXAxis.displayName = "LiveXAxis";
+export default LiveXAxis;
+//# sourceMappingURL=live-x-axis.js.map

package/dist/charts/live-y-axis.d.ts

@@ -0,0 +1,16 @@
+export interface LiveYAxisProps {
+    /** Minimum pixel gap between labels. Default: 36 */
+    minGap?: number;
+    /** Position. Default: "left" */
+    position?: "left" | "right";
+    /** Value formatter */
+    formatValue?: (v: number) => string;
+    /** Allow decimal tick values. Default: true */
+    allowDecimals?: boolean;
+}
+export declare function LiveYAxis(props: LiveYAxisProps): import("react").JSX.Element | null;
+export declare namespace LiveYAxis {
+    var displayName: string;
+}
+export default LiveYAxis;
+//# sourceMappingURL=live-y-axis.d.ts.map

package/dist/charts/live-y-axis.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useChartStable } from "./chart-context.js";
+// ---------------------------------------------------------------------------
+// Interval picker (inspired by liveline's pickInterval)
+// Finds a "nice" step size that keeps labels ~minGap pixels apart.
+// Uses hysteresis: keeps the previous interval if it still fits, preventing
+// jittery step changes when the range oscillates near a boundary.
+// ---------------------------------------------------------------------------
+function pickNiceInterval(valRange, chartHeight, minGap, prevInterval) {
+    if (valRange <= 0 || chartHeight <= 0) {
+        return 1;
+    }
+    const pxPerUnit = chartHeight / valRange;
+    // Keep previous interval if it still produces reasonable spacing
+    if (prevInterval > 0) {
+        const px = prevInterval * pxPerUnit;
+        if (px >= minGap * 0.5 && px <= minGap * 3) {
+            return prevInterval;
+        }
+    }
+    // Try multiple divisor sequences to find the best nice step
+    const divisorSets = [
+        [2, 2.5, 2],
+        [2, 2, 2.5],
+        [2.5, 2, 2],
+    ];
+    let best = Number.POSITIVE_INFINITY;
+    for (const divs of divisorSets) {
+        let span = 10 ** Math.ceil(Math.log10(valRange));
+        let i = 0;
+        let d = divs[i % 3] ?? 2;
+        while ((span / d) * pxPerUnit >= minGap) {
+            span /= d;
+            i++;
+            d = divs[i % 3] ?? 2;
+        }
+        if (span < best) {
+            best = span;
+        }
+    }
+    return best === Number.POSITIVE_INFINITY ? valRange / 5 : best;
+}
+// ---------------------------------------------------------------------------
+// Edge fade: labels near the top/bottom of the chart area fade out
+// ---------------------------------------------------------------------------
+const EDGE_FADE_PX = 28;
+function edgeOpacity(y, chartHeight) {
+    const fromEdge = Math.min(y, chartHeight - y);
+    if (fromEdge >= EDGE_FADE_PX) {
+        return 1;
+    }
+    if (fromEdge <= 0) {
+        return 0;
+    }
+    return fromEdge / EDGE_FADE_PX;
+}
+const tickSpring = { type: "spring", stiffness: 180, damping: 24 };
+export function LiveYAxis(props) {
+    const { containerRef } = useChartStable();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    return _jsx(LiveYAxisInner, { ...props, container: container });
+}
+const LiveYAxisInner = memo(function LiveYAxisInner({ minGap = 36, position = "left", formatValue = (v) => v.toFixed(2), allowDecimals = true, container, }) {
+    const { yScale, margin, innerHeight } = useChartStable();
+    const intervalRef = useRef(0);
+    const domain = yScale.domain();
+    const minVal = domain[0];
+    const maxVal = domain[1];
+    const valRange = maxVal - minVal;
+    // Pick a nice interval with hysteresis
+    const interval = useMemo(() => {
+        const next = pickNiceInterval(valRange, innerHeight, minGap, intervalRef.current);
+        intervalRef.current = next;
+        return next;
+    }, [valRange, innerHeight, minGap]);
+    // Stabilize the tick VALUE set: only recompute which ticks exist when the
+    // domain crosses an interval boundary. We quantize min/max to interval
+    // boundaries so the set doesn't change on every sub-pixel lerp frame.
+    const quantizedMin = interval > 0 ? Math.floor(minVal / interval) : 0;
+    const quantizedMax = interval > 0 ? Math.ceil(maxVal / interval) : 0;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: quantized values are intentional coarse-grained deps for stability
+    const stableTickValues = useMemo(() => {
+        if (interval <= 0 || valRange <= 0) {
+            return [];
+        }
+        const expandedMin = minVal - interval * 0.5;
+        const expandedMax = maxVal + interval * 0.5;
+        const first = Math.ceil(expandedMin / interval) * interval;
+        const values = [];
+        for (let v = first; v <= expandedMax; v += interval) {
+            const rounded = Math.round(v * 1e10) / 1e10;
+            const isDecimal = !Number.isInteger(rounded);
+            if (isDecimal && !allowDecimals) {
+                continue;
+            }
+            values.push(rounded);
+        }
+        return values;
+    }, [quantizedMin, quantizedMax, interval, minVal, maxVal, valRange, allowDecimals]);
+    // Pixel positions update every frame for smooth movement
+    const tickData = useMemo(() => stableTickValues
+        .map((value) => {
+        const y = yScale(value) ?? 0;
+        return {
+            value,
+            y,
+            label: formatValue(value),
+            key: value.toPrecision(10),
+            edgeAlpha: edgeOpacity(y, innerHeight),
+        };
+    })
+        .filter((t) => t.y >= -10 && t.y <= innerHeight + 10), [stableTickValues, yScale, innerHeight, formatValue]);
+    const isLeft = position === "left";
+    return createPortal(_jsx("div", { className: "pointer-events-none absolute inset-0", children: _jsx("div", { className: "absolute overflow-hidden", style: {
+                top: margin.top,
+                height: innerHeight,
+                ...(isLeft ? { left: 0, width: margin.left } : { right: 0, width: margin.right }),
+            }, children: _jsx(AnimatePresence, { initial: false, children: tickData.map((tick) => (_jsx(motion.div, { animate: { opacity: tick.edgeAlpha, y: tick.y }, className: "absolute w-full", exit: { opacity: 0 }, initial: { opacity: 0, y: tick.y }, style: {
+                        ...(isLeft
+                            ? { right: 0, paddingRight: 8, textAlign: "right" }
+                            : { left: 0, paddingLeft: 8, textAlign: "left" }),
+                    }, transition: tickSpring, children: _jsx("span", { className: "whitespace-nowrap font-mono text-chart-label text-xs", children: tick.label }) }, tick.key))) }) }) }), container);
+});
+LiveYAxis.displayName = "LiveYAxis";
+export default LiveYAxis;
+//# sourceMappingURL=live-y-axis.js.map

package/dist/charts/loading-sweep.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Shared "sweep" loading visuals. A soft diagonal shimmer band travels across a
+ * self-contained skeleton silhouette on a loop, painted via an SVG mask. The
+ * silhouette re-randomizes between passes (held steady during a pass, re-rolled
+ * once the band clears the right edge) so it reads as live and still loading,
+ * without warping mid-sweep. Used as the `loadingStyle="sweep"` alternative to
+ * the traveling pulse on `<Line>` and `<Area>`, and as the skeleton for
+ * `<BarChart status="loading">`.
+ */
+type CurveFactory = any;
+/** Deterministic heights (percentages of the available height) for a seed. */
+export declare function getSkeletonHeights(count: number, seed?: number, min?: number, max?: number): number[];
+export interface LineLoadingSweepProps {
+    /** Curve factory from the host `<Line>` / `<Area>`, so the silhouette matches
+     * the chart's interpolation (step, smooth, linear, …). */
+    curve: CurveFactory;
+    /** Fill the silhouette as an area (for `<Area>`); otherwise stroke only. */
+    withArea?: boolean;
+    /** Loading phase: `"loop"` (steady), `"exit"` (loading → ready), or `"enter"`
+     * (ready → loading). Exit/enter fade the silhouette and then signal the chart
+     * to continue its reveal. Default: `"loop"`. */
+    mode?: "loop" | "exit" | "enter";
+    /** Fired when an exit/enter transition finishes, to advance the chart phase. */
+    onTransitionComplete?: () => void;
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    pointCount?: number;
+    durationSeconds?: number;
+}
+/**
+ * Renders a placeholder line/area silhouette (its own, not the chart's skeleton)
+ * with the shimmer sweeping across it. The silhouette re-randomizes between
+ * passes. Reads inner dimensions from chart context.
+ */
+export declare function LineLoadingSweep({ curve, withArea, mode, onTransitionComplete, stroke, strokeOpacity, strokeWidth, pointCount, durationSeconds, }: LineLoadingSweepProps): import("react").JSX.Element | null;
+export declare namespace LineLoadingSweep {
+    var displayName: string;
+}
+export interface BarLoadingSkeletonProps {
+    innerWidth: number;
+    innerHeight: number;
+    /** Number of skeleton bars. Default: 12 */
+    barCount?: number;
+    /** Bar fill color. Default: `var(--foreground)` */
+    fill?: string;
+    /** Bar fill opacity. Default: 0.45 */
+    fillOpacity?: number;
+    /** Bars rise from the bottom or diverge from the vertical center. Default: `"bottom"` */
+    baseline?: "bottom" | "center";
+    /** Bar width as a fraction of its band (0–1). Default: 0.7 */
+    barFraction?: number;
+    /** One shimmer sweep, in seconds. Default: 2 */
+    durationSeconds?: number;
+}
+/**
+ * Skeleton bars masked by the shimmer sweep, re-randomizing between passes.
+ * Rendered in the chart's inner coordinate space (origin at the inner top-left),
+ * so a `BarChart` drops it inside its margin-translated group.
+ */
+export declare function BarLoadingSkeleton({ innerWidth, innerHeight, barCount, fill, fillOpacity, baseline, barFraction, durationSeconds, }: BarLoadingSkeletonProps): import("react").JSX.Element | null;
+export declare namespace BarLoadingSkeleton {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=loading-sweep.d.ts.map

package/dist/charts/loading-sweep.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { scaleLinear } from "@visx/scale";
+import { AreaClosed, LinePath } from "@visx/shape";
+import { motion, useReducedMotion } from "motion/react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { chartCssVars, useChartStable } from "./chart-context.js";
+import { LINE_LOADING_PULSE_EASE, LOADING_LABEL_EXIT_S } from "./line-loading-timing.js";
+/** One shimmer sweep, in seconds. */
+const DEFAULT_SWEEP_DURATION_S = 2;
+/** Sweep travel in objectBoundingBox space: off the left edge to off the right. */
+const SWEEP_START_X = -1;
+const SWEEP_END_X = 2;
+/** Diagonal tilt of the shimmer band, in degrees. */
+const SWEEP_ANGLE_DEG = 25;
+const HEIGHT_MIN_PCT = 20;
+const HEIGHT_MAX_PCT = 80;
+const DEFAULT_POINT_COUNT = 14;
+const BAR_CORNER_RADIUS = 2;
+const DEFAULT_BAR_COUNT = 12;
+const DEFAULT_FILL = "var(--foreground)";
+const DEFAULT_BAR_FILL_OPACITY = 0.45;
+const LINE_STROKE_OPACITY = 0.55;
+const AREA_FILL_TOP_OPACITY = 0.18;
+const AREA_FILL_BOTTOM_OPACITY = 0.02;
+/** Bar width as a fraction of its band (the rest is the inter-bar gap). */
+const DEFAULT_BAR_FRACTION = 0.7;
+// ─── Pure, SSR-safe helpers ──────────────────────────────────────────────
+// Heights come from a deterministic hash of (index, seed), never
+// `Math.random()`, so the first server render and first client render agree
+// (no Next.js hydration mismatch). Re-randomizing only bumps the numeric seed
+// on the client, after a sweep completes.
+/** Cheap deterministic hash to a fractional part in [0, 1). */
+function hashFract(n) {
+    const x = Math.sin(n) * 43_758.5453;
+    return x - Math.floor(x);
+}
+/** Deterministic heights (percentages of the available height) for a seed. */
+export function getSkeletonHeights(count, seed = 0, min = HEIGHT_MIN_PCT, max = HEIGHT_MAX_PCT) {
+    const range = max - min;
+    return Array.from({ length: count }, (_, i) => min + Math.floor(hashFract((i + 1) * 12.9898 + seed) * range));
+}
+/** Deterministic up/down (±1) per bar for the "center" baseline. */
+function getSkeletonSigns(count, seed = 0) {
+    return Array.from({ length: count }, (_, i) => hashFract((i + 1) * 78.233 + seed) < 0.5 ? -1 : 1);
+}
+/** Bell-curve opacity stops (sin squared) for the shimmer band's soft edges. */
+function generateEasedGradientStops(steps = 17, minOpacity = 0.05, maxOpacity = 0.9) {
+    return Array.from({ length: steps }, (_, i) => {
+        const t = i / (steps - 1);
+        const eased = Math.sin(t * Math.PI) ** 2;
+        const opacity = minOpacity + eased * (maxOpacity - minOpacity);
+        return {
+            offset: `${(t * 100).toFixed(0)}%`,
+            opacity: Number(opacity.toFixed(3)),
+        };
+    });
+}
+// ─── Shared mask defs (`${chartId}-mask` is the mask id) ─────────────────────
+function LoadingSweepMask({ chartId, width, height, durationSeconds, onSweepComplete, }) {
+    const gradientStops = useMemo(() => generateEasedGradientStops(), []);
+    const lastXRef = useRef(SWEEP_START_X);
+    const handleUpdate = useCallback((latest) => {
+        const xValue = typeof latest.x === "number" ? latest.x : SWEEP_START_X;
+        // Re-roll once the band has cleared the visible area (crossed past 1),
+        // so the silhouette never changes shape under the user's eye.
+        if (xValue >= 1 && lastXRef.current < 1) {
+            onSweepComplete();
+        }
+        lastXRef.current = xValue;
+    }, [onSweepComplete]);
+    return (_jsxs(_Fragment, { children: [_jsx("linearGradient", { id: `${chartId}-grad`, x1: "0", x2: "1", y1: "0", y2: "0", children: gradientStops.map(({ offset, opacity }) => (_jsx("stop", { offset: offset, stopColor: "white", stopOpacity: opacity }, offset))) }), _jsx("pattern", { height: "1", id: `${chartId}-pattern`, patternContentUnits: "objectBoundingBox", patternTransform: `rotate(${SWEEP_ANGLE_DEG})`, patternUnits: "objectBoundingBox", width: 3, x: "0", y: "0", children: _jsx(motion.rect, { animate: { x: SWEEP_END_X }, fill: `url(#${chartId}-grad)`, height: "1", initial: { x: SWEEP_START_X }, onUpdate: handleUpdate, transition: {
+                        duration: durationSeconds,
+                        ease: "linear",
+                        repeat: Number.POSITIVE_INFINITY,
+                        repeatType: "loop",
+                    }, width: "1", y: "0" }) }), _jsx("mask", { id: `${chartId}-mask`, maskUnits: "userSpaceOnUse", children: _jsx("rect", { fill: `url(#${chartId}-pattern)`, height: height, width: width }) })] }));
+}
+/**
+ * Renders a placeholder line/area silhouette (its own, not the chart's skeleton)
+ * with the shimmer sweeping across it. The silhouette re-randomizes between
+ * passes. Reads inner dimensions from chart context.
+ */
+export function LineLoadingSweep({ curve, withArea = false, mode = "loop", onTransitionComplete, stroke = chartCssVars.foreground, strokeOpacity = LINE_STROKE_OPACITY, strokeWidth = 2, pointCount = DEFAULT_POINT_COUNT, durationSeconds = DEFAULT_SWEEP_DURATION_S, }) {
+    const { innerWidth, innerHeight } = useChartStable();
+    const reduceMotion = useReducedMotion();
+    const reactId = useId();
+    const chartId = `line-sweep-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const isLoop = mode === "loop";
+    const [tick, setTick] = useState(0);
+    // Re-randomize only while looping; hold the silhouette steady through a
+    // transition so it fades out (or in) as one piece.
+    const onSweepComplete = useCallback(() => {
+        if (isLoop) {
+            setTick((prev) => prev + 1);
+        }
+    }, [isLoop]);
+    const heights = useMemo(() => getSkeletonHeights(pointCount, tick), [pointCount, tick]);
+    // With reduced motion there is no fade to await, so signal the handoff
+    // immediately or the phase machine would stall mid-transition.
+    useEffect(() => {
+        if (reduceMotion && !isLoop) {
+            onTransitionComplete?.();
+        }
+    }, [reduceMotion, isLoop, onTransitionComplete]);
+    if (innerWidth <= 0 || innerHeight <= 0 || heights.length < 2) {
+        return null;
+    }
+    const xScale = scaleLinear({
+        domain: [0, heights.length - 1],
+        range: [0, innerWidth],
+    });
+    const yScale = scaleLinear({ domain: [0, 100], range: [innerHeight, 0] });
+    const points = heights.map((value, index) => ({ index, value }));
+    const getX = (d) => xScale(d.index);
+    const getY = (d) => yScale(d.value);
+    const silhouette = (_jsxs(_Fragment, { children: [withArea ? (_jsx(AreaClosed, { curve: curve, data: points, fill: `url(#${chartId}-area)`, x: getX, y: getY, yScale: yScale })) : null, _jsx(LinePath, { curve: curve, data: points, fill: "none", stroke: stroke, strokeLinecap: "round", strokeOpacity: strokeOpacity, strokeWidth: strokeWidth, x: getX, y: getY })] }));
+    const areaGradient = withArea ? (_jsxs("linearGradient", { id: `${chartId}-area`, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: stroke, stopOpacity: AREA_FILL_TOP_OPACITY }), _jsx("stop", { offset: "100%", stopColor: stroke, stopOpacity: AREA_FILL_BOTTOM_OPACITY })] })) : null;
+    if (reduceMotion) {
+        return (_jsxs(_Fragment, { children: [areaGradient ? _jsx("defs", { children: areaGradient }) : null, silhouette] }));
+    }
+    const maskUrl = `url(#${chartId}-mask)`;
+    const defs = (_jsxs("defs", { children: [areaGradient, _jsx(LoadingSweepMask, { chartId: chartId, durationSeconds: durationSeconds, height: innerHeight, onSweepComplete: onSweepComplete, width: innerWidth })] }));
+    if (isLoop) {
+        return (_jsxs(_Fragment, { children: [defs, _jsx("g", { mask: maskUrl, children: silhouette })] }));
+    }
+    // Transition: fade the swept silhouette out (exit) or in (enter), then hand
+    // off to the chart so it can reveal the real series.
+    return (_jsxs(_Fragment, { children: [defs, _jsx(motion.g, { animate: { opacity: mode === "exit" ? 0 : 1 }, initial: { opacity: mode === "exit" ? 1 : 0 }, mask: maskUrl, onAnimationComplete: onTransitionComplete, transition: {
+                    duration: LOADING_LABEL_EXIT_S,
+                    ease: [...LINE_LOADING_PULSE_EASE],
+                }, children: silhouette })] }));
+}
+LineLoadingSweep.displayName = "LineLoadingSweep";
+// ─── Bar loading skeleton (seeded bars under the sweep, inner coords) ─────────
+function SkeletonBars({ heights, signs, innerWidth, innerHeight, baseline, barFraction, fill, fillOpacity, }) {
+    const bandWidth = innerWidth / heights.length;
+    const barW = bandWidth * barFraction;
+    const xOffset = (bandWidth * (1 - barFraction)) / 2;
+    const isCenter = baseline === "center";
+    const baselineY = isCenter ? innerHeight / 2 : innerHeight;
+    const halfBarH = isCenter ? innerHeight / 2 : innerHeight;
+    return (_jsx(_Fragment, { children: heights.map((value, i) => {
+            const sign = isCenter ? (signs[i] ?? 1) : 1;
+            const barH = Math.max(1, halfBarH * (value / 100));
+            const x = i * bandWidth + xOffset;
+            const y = sign === 1 ? baselineY - barH : baselineY;
+            return (_jsx("rect", { fill: fill, fillOpacity: fillOpacity, height: barH, rx: BAR_CORNER_RADIUS, width: barW, x: x, y: y }, `${x.toFixed(2)}-${value}`));
+        }) }));
+}
+/**
+ * Skeleton bars masked by the shimmer sweep, re-randomizing between passes.
+ * Rendered in the chart's inner coordinate space (origin at the inner top-left),
+ * so a `BarChart` drops it inside its margin-translated group.
+ */
+export function BarLoadingSkeleton({ innerWidth, innerHeight, barCount = DEFAULT_BAR_COUNT, fill = DEFAULT_FILL, fillOpacity = DEFAULT_BAR_FILL_OPACITY, baseline = "bottom", barFraction = DEFAULT_BAR_FRACTION, durationSeconds = DEFAULT_SWEEP_DURATION_S, }) {
+    const reduceMotion = useReducedMotion();
+    const reactId = useId();
+    const chartId = `bar-sweep-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const [tick, setTick] = useState(0);
+    const onSweepComplete = useCallback(() => setTick((prev) => prev + 1), []);
+    const heights = useMemo(() => getSkeletonHeights(barCount, tick), [barCount, tick]);
+    const signs = useMemo(() => getSkeletonSigns(barCount, tick), [barCount, tick]);
+    if (innerWidth <= 0 || innerHeight <= 0) {
+        return null;
+    }
+    const bars = (_jsx(SkeletonBars, { barFraction: barFraction, baseline: baseline, fill: fill, fillOpacity: fillOpacity, heights: heights, innerHeight: innerHeight, innerWidth: innerWidth, signs: signs }));
+    if (reduceMotion) {
+        return bars;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(LoadingSweepMask, { chartId: chartId, durationSeconds: durationSeconds, height: innerHeight, onSweepComplete: onSweepComplete, width: innerWidth }) }), _jsx("g", { mask: `url(#${chartId}-mask)`, children: bars })] }));
+}
+BarLoadingSkeleton.displayName = "BarLoadingSkeleton";
+//# sourceMappingURL=loading-sweep.js.map

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

@@ -0,0 +1,25 @@
+import { type ChartMarker } from "./marker-group.js";
+export interface ChartMarkersProps {
+    /** Array of markers to display */
+    items: ChartMarker[];
+    /** Size of each marker circle. Default: 28 */
+    size?: number;
+    /** Whether to show vertical guide lines. Default: true */
+    showLines?: boolean;
+    /** Whether to animate markers on entrance. Default: true */
+    animate?: boolean;
+}
+export interface MarkerTooltipContentProps {
+    markers: ChartMarker[];
+}
+export declare function MarkerTooltipContent({ markers }: MarkerTooltipContentProps): import("react").JSX.Element | null;
+export declare namespace MarkerTooltipContent {
+    var displayName: string;
+}
+export declare function ChartMarkers({ items, size, showLines, animate, }: ChartMarkersProps): import("react").JSX.Element;
+export declare namespace ChartMarkers {
+    var displayName: string;
+}
+export declare function useActiveMarkers(items: ChartMarker[]): ChartMarker[];
+export default ChartMarkers;
+//# sourceMappingURL=chart-markers.d.ts.map