@cronus-ui/ui 0.6.0

package/dist/charts/choropleth/choropleth-feature.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { geoCentroid } from "d3-geo";
+import { motion, useTransform } from "motion/react";
+import { memo, useCallback, useMemo } from "react";
+import { useEnterComplete } from "../use-enter-complete.js";
+import { useMountProgress } from "../use-mount-progress.js";
+import { defaultChoroplethColors, useChoroplethInteraction, useChoroplethStable, } from "./choropleth-context.js";
+function resolveFeatureFill(feature, index, fill, getFeatureColor, getFeaturePattern) {
+    const patternId = getFeaturePattern?.(feature, index);
+    if (patternId) {
+        return `url(#${patternId})`;
+    }
+    if (fill) {
+        return fill;
+    }
+    if (getFeatureColor) {
+        return getFeatureColor(feature, index);
+    }
+    return defaultChoroplethColors[index % defaultChoroplethColors.length] ?? "var(--chart-1)";
+}
+const StaticFeatureLayer = memo(function StaticFeatureLayer({ records, stroke, strokeWidth, baseOpacity, dimOpacity, hoveredIndex, onFeatureEnter, onFeatureLeave, }) {
+    const isDimmed = hoveredIndex !== null;
+    if (!isDimmed) {
+        return (_jsx("g", { opacity: baseOpacity, children: records.map((record) => (_jsx("path", { className: "cursor-pointer", d: record.path, fill: record.fill, onMouseEnter: () => onFeatureEnter(record), onMouseLeave: onFeatureLeave, stroke: stroke, strokeWidth: strokeWidth }, `base-${record.index}`))) }));
+    }
+    const highlighted = records.find((record) => record.index === hoveredIndex);
+    return (_jsxs(_Fragment, { children: [_jsx("g", { opacity: dimOpacity, style: { transition: "opacity 0.18s ease-out" }, children: records
+                    .filter((record) => record.index !== hoveredIndex)
+                    .map((record) => (_jsx("path", { className: "cursor-pointer", d: record.path, fill: record.fill, onMouseEnter: () => onFeatureEnter(record), onMouseLeave: onFeatureLeave, stroke: stroke, strokeWidth: strokeWidth }, `base-${record.index}`))) }), highlighted ? (_jsx("path", { className: "cursor-pointer", d: highlighted.path, fill: highlighted.fill, onMouseEnter: () => onFeatureEnter(highlighted), onMouseLeave: onFeatureLeave, opacity: 1, stroke: stroke, strokeWidth: strokeWidth, style: { transition: "opacity 0.18s ease-out" } }, `highlight-${highlighted.index}`)) : null] }));
+});
+const EnterFeatureLayer = memo(function EnterFeatureLayer({ records, stroke, strokeWidth, baseOpacity, dimOpacity, hoveredIndex, onFeatureEnter, onFeatureLeave, revealEpoch, }) {
+    const { enterTransition, animationDuration } = useChoroplethStable();
+    const mountProgress = useMountProgress(enterTransition, 0, `choropleth-layer-${revealEpoch}`);
+    const enterComplete = useEnterComplete(mountProgress);
+    const layerOpacity = useTransform(mountProgress, (t) => t * baseOpacity);
+    if (enterComplete) {
+        return (_jsx(StaticFeatureLayer, { baseOpacity: baseOpacity, dimOpacity: dimOpacity, hoveredIndex: hoveredIndex, onFeatureEnter: onFeatureEnter, onFeatureLeave: onFeatureLeave, records: records, stroke: stroke, strokeWidth: strokeWidth }));
+    }
+    return (_jsx(motion.g, { opacity: layerOpacity, transition: {
+            duration: animationDuration / 1000,
+            ease: "easeOut",
+        }, children: records.map((record) => (_jsx("path", { className: "cursor-pointer", d: record.path, fill: record.fill, onMouseEnter: () => onFeatureEnter(record), onMouseLeave: onFeatureLeave, stroke: stroke, strokeWidth: strokeWidth }, `enter-${record.index}`))) }, `enter-${revealEpoch}`));
+});
+export const ChoroplethFeature = memo(function ChoroplethFeature({ fill, stroke = "var(--chart-background)", strokeWidth = 0.5, fadedOpacity = 0.4, getFeatureColor, patterns, getFeaturePattern, }) {
+    const { features, featurePaths, pathGenerator, projectPoint, isLoaded, revealEpoch, width, height, } = useChoroplethStable();
+    const { hoveredFeatureIndex, setHoveredFeatureIndex, setTooltipData } = useChoroplethInteraction();
+    const featureCentroids = useMemo(() => {
+        return features.map((feature) => {
+            try {
+                const centroid = geoCentroid(feature);
+                if (centroid && !Number.isNaN(centroid[0]) && !Number.isNaN(centroid[1])) {
+                    const projected = projectPoint(centroid);
+                    if (projected) {
+                        const padding = 60;
+                        return {
+                            x: Math.max(padding, Math.min(width - padding, projected[0])),
+                            y: Math.max(padding, Math.min(height - padding, projected[1])),
+                        };
+                    }
+                }
+            }
+            catch {
+                // Some geometries may not have valid centroids
+            }
+            return null;
+        });
+    }, [features, projectPoint, width, height]);
+    const records = useMemo(() => {
+        const items = [];
+        for (let index = 0; index < features.length; index++) {
+            const feature = features[index];
+            if (!feature) {
+                continue;
+            }
+            const path = featurePaths[index] ?? pathGenerator(feature);
+            if (!path) {
+                continue;
+            }
+            items.push({
+                index,
+                path,
+                fill: resolveFeatureFill(feature, index, fill, getFeatureColor, getFeaturePattern),
+                feature,
+                centroid: featureCentroids[index] ?? null,
+            });
+        }
+        return items;
+    }, [
+        featureCentroids,
+        featurePaths,
+        features,
+        fill,
+        getFeatureColor,
+        getFeaturePattern,
+        pathGenerator,
+    ]);
+    const handleFeatureEnter = useCallback((record) => {
+        setHoveredFeatureIndex(record.index);
+        setTooltipData({
+            featureIndex: record.index,
+            x: record.centroid?.x ?? width / 2,
+            y: record.centroid?.y ?? height / 2,
+            feature: record.feature,
+        });
+    }, [height, setHoveredFeatureIndex, setTooltipData, width]);
+    const handleFeatureLeave = useCallback(() => {
+        setHoveredFeatureIndex(null);
+        setTooltipData(null);
+    }, [setHoveredFeatureIndex, setTooltipData]);
+    const layerProps = {
+        baseOpacity: 0.85,
+        dimOpacity: fadedOpacity,
+        hoveredIndex: hoveredFeatureIndex,
+        onFeatureEnter: handleFeatureEnter,
+        onFeatureLeave: handleFeatureLeave,
+        records,
+        stroke,
+        strokeWidth,
+    };
+    return (_jsxs("g", { className: "choropleth-features", children: [patterns ? _jsx("defs", { children: patterns }) : null, isLoaded ? (_jsx(StaticFeatureLayer, { ...layerProps })) : (_jsx(EnterFeatureLayer, { ...layerProps, revealEpoch: revealEpoch }))] }));
+});
+ChoroplethFeature.displayName = "ChoroplethFeature";
+export default ChoroplethFeature;
+//# sourceMappingURL=choropleth-feature.js.map

package/dist/charts/choropleth/choropleth-graticule.d.ts

@@ -0,0 +1,11 @@
+export interface ChoroplethGraticuleProps {
+    /** Stroke color for graticule lines. Default: rgba(255,255,255,0.1) */
+    stroke?: string;
+    /** Stroke width for graticule lines. Default: 0.5 */
+    strokeWidth?: number;
+    /** Step intervals for graticule lines [longitude, latitude] in degrees. Default: [10, 10] */
+    step?: [number, number];
+}
+export declare const ChoroplethGraticule: import("react").MemoExoticComponent<({ stroke, strokeWidth, step, }: ChoroplethGraticuleProps) => import("react").JSX.Element>;
+export default ChoroplethGraticule;
+//# sourceMappingURL=choropleth-graticule.d.ts.map

package/dist/charts/choropleth/choropleth-graticule.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Graticule } from "@visx/geo";
+import { memo } from "react";
+import { useChoroplethStable } from "./choropleth-context.js";
+export const ChoroplethGraticule = memo(function ChoroplethGraticule({ stroke = "rgba(255,255,255,0.1)", strokeWidth = 0.5, step, }) {
+    const { rawPathGenerator } = useChoroplethStable();
+    return (_jsx(Graticule, { graticule: (g) => rawPathGenerator(g) || "", step: step, stroke: stroke, strokeWidth: strokeWidth }));
+});
+ChoroplethGraticule.displayName = "ChoroplethGraticule";
+export default ChoroplethGraticule;
+//# sourceMappingURL=choropleth-graticule.js.map

package/dist/charts/choropleth/choropleth-tooltip.d.ts

@@ -0,0 +1,31 @@
+import { type ChoroplethFeature } from "./choropleth-context.js";
+export interface ChoroplethTooltipProps {
+    /** Custom content renderer for feature tooltips */
+    content?: (props: {
+        feature: ChoroplethFeature;
+        index: number;
+    }) => React.ReactNode;
+    /** Value formatter function */
+    formatValue?: (value: number) => string;
+    /** Get the display name for a feature. Default: uses feature.properties.name */
+    getFeatureName?: (feature: ChoroplethFeature, index: number) => string;
+    /** Get the value for a feature (for display in tooltip) */
+    getFeatureValue?: (feature: ChoroplethFeature, index: number) => number | undefined;
+    /** Label for the value row. Default: "Value" */
+    valueLabel?: string;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles for the tooltip panel (background, blur, etc.). */
+    panelStyle?: React.CSSProperties;
+    /**
+     * Tooltip panel background color (CSS variable or color value).
+     * Default: `var(--chart-tooltip-background)`.
+     */
+    backgroundColor?: string;
+}
+export declare function ChoroplethTooltip({ content, formatValue, getFeatureName, getFeatureValue, valueLabel, className, panelStyle, backgroundColor, }: ChoroplethTooltipProps): import("react").JSX.Element | null;
+export declare namespace ChoroplethTooltip {
+    var displayName: string;
+}
+export default ChoroplethTooltip;
+//# sourceMappingURL=choropleth-tooltip.d.ts.map

package/dist/charts/choropleth/choropleth-tooltip.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { intFmt } from "../chart-formatters.js";
+import { TooltipBox } from "../tooltip/tooltip-box.js";
+import { TooltipContent } from "../tooltip/tooltip-content.js";
+import { useChoroplethInteraction, useChoroplethStable, useChoroplethZoom, } from "./choropleth-context.js";
+export function ChoroplethTooltip({ content, formatValue = intFmt, getFeatureName, getFeatureValue, valueLabel = "Value", className = "", panelStyle, backgroundColor, }) {
+    const { containerRef, width, height, features } = useChoroplethStable();
+    const { tooltipData } = useChoroplethInteraction();
+    const { zoom } = useChoroplethZoom();
+    if (!tooltipData) {
+        return null;
+    }
+    // Apply zoom transform to centroid position
+    let x = tooltipData.x;
+    let y = tooltipData.y;
+    if (zoom) {
+        // Apply the zoom transform matrix to the tooltip position
+        const transformed = zoom.applyToPoint({ x, y });
+        x = transformed.x;
+        y = transformed.y;
+    }
+    const feature = features[tooltipData.featureIndex];
+    if (!feature) {
+        return null;
+    }
+    // Get feature name
+    const featureName = getFeatureName
+        ? getFeatureName(feature, tooltipData.featureIndex)
+        : (feature.properties?.name ?? `Feature ${tooltipData.featureIndex}`);
+    // Custom content
+    if (content) {
+        return (_jsx(TooltipBox, { backgroundColor: backgroundColor, className: className, containerHeight: height, containerRef: containerRef, containerWidth: width, panelStyle: panelStyle, visible: true, x: x, y: y, children: content({ feature, index: tooltipData.featureIndex }) }));
+    }
+    // Default tooltip with optional value
+    const value = getFeatureValue?.(feature, tooltipData.featureIndex);
+    const rows = value === undefined
+        ? []
+        : [
+            {
+                color: "var(--chart-1)",
+                label: valueLabel,
+                value: formatValue(value),
+            },
+        ];
+    return (_jsx(TooltipBox, { backgroundColor: backgroundColor, className: className, containerHeight: height, containerRef: containerRef, containerWidth: width, panelStyle: panelStyle, visible: true, x: x, y: y, children: _jsx(TooltipContent, { rows: rows, title: featureName }) }));
+}
+ChoroplethTooltip.displayName = "ChoroplethTooltip";
+export default ChoroplethTooltip;
+//# sourceMappingURL=choropleth-tooltip.js.map

package/dist/charts/choropleth/index.d.ts

@@ -0,0 +1,7 @@
+export type { TransformMatrix } from "@visx/zoom";
+export { ChoroplethChart, type ChoroplethChartProps } from "./choropleth-chart.js";
+export { type ChoroplethContextValue, type ChoroplethFeature, type ChoroplethFeatureProperties, ChoroplethProvider, type ChoroplethTooltipData, choroplethCssVars, defaultChoroplethColors, type Margin, useChoropleth, useChoroplethZoom, } from "./choropleth-context.js";
+export { ChoroplethFeature as ChoroplethFeatureComponent, type ChoroplethFeatureProps, } from "./choropleth-feature.js";
+export { ChoroplethGraticule, type ChoroplethGraticuleProps, } from "./choropleth-graticule.js";
+export { ChoroplethTooltip, type ChoroplethTooltipProps, } from "./choropleth-tooltip.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/choropleth/index.js

@@ -0,0 +1,6 @@
+export { ChoroplethChart } from "./choropleth-chart.js";
+export { ChoroplethProvider, choroplethCssVars, defaultChoroplethColors, useChoropleth, useChoroplethZoom, } from "./choropleth-context.js";
+export { ChoroplethFeature as ChoroplethFeatureComponent, } from "./choropleth-feature.js";
+export { ChoroplethGraticule, } from "./choropleth-graticule.js";
+export { ChoroplethTooltip, } from "./choropleth-tooltip.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,36 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import type { Margin } from "./chart-context.js";
+import type { ChartPhase } from "./chart-phase.js";
+export interface ComposedChartProps {
+    /** Data array — each row typically has a date and multiple numeric series */
+    data: Record<string, unknown>[];
+    /** Key for the x-axis (time). Default: "date" */
+    xDataKey?: string;
+    margin?: Partial<Margin>;
+    animationDuration?: number;
+    animationEasing?: string;
+    enterTransition?: Transition;
+    /** Signature of motion URL state — triggers reveal replay when it changes. */
+    revealSignature?: string;
+    aspectRatio?: string;
+    className?: string;
+    children: ReactNode;
+    /** Target bar width in px (Recharts-style `barSize`). */
+    barSize?: number;
+    /** Maximum bar width in px (`maxBarSize`). */
+    maxBarSize?: number;
+    /** Gap between grouped `SeriesBar` series in px. Default: 4 */
+    barGap?: number;
+    /** Stack `SeriesBar` segments in child order at each x (line/area are not stacked). */
+    stacked?: boolean;
+    /** Gap in px between stacked segments. Default: 0 */
+    stackGap?: number;
+    onPhaseChange?: (phase: ChartPhase) => void;
+}
+export declare function ComposedChart({ data, xDataKey, margin: marginProp, animationDuration, animationEasing, enterTransition, revealSignature, aspectRatio, className, children, barSize, maxBarSize, barGap, stacked, stackGap, onPhaseChange, }: ComposedChartProps): import("react").JSX.Element;
+export declare namespace ComposedChart {
+    var displayName: string;
+}
+export default ComposedChart;
+//# sourceMappingURL=composed-chart.d.ts.map

package/dist/charts/composed-chart.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ParentSize } from "@visx/responsive";
+import { Children, isValidElement, useMemo, useRef, } from "react";
+import { cn } from "../lib/cn.js";
+import { Area } from "./area.js";
+import { Line } from "./line.js";
+import { SeriesBar } from "./series-bar.js";
+import { TimeSeriesChartInner } from "./time-series-chart-shell.js";
+const DEFAULT_MARGIN = { top: 40, right: 40, bottom: 40, left: 40 };
+function getChildComponentName(child) {
+    const childType = child.type;
+    return typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+}
+function upsertLineConfig(lines, config) {
+    const index = lines.findIndex((line) => line.dataKey === config.dataKey);
+    if (index === -1) {
+        lines.push(config);
+        return;
+    }
+    // Area+Line pairs share a dataKey — keep the later config (Line over Area).
+    lines[index] = config;
+}
+function tryAppendSeriesBar(child, lines, barDataKeys) {
+    const name = getChildComponentName(child);
+    if (!(child.type === SeriesBar || name === "SeriesBar")) {
+        return false;
+    }
+    const props = child.props;
+    if (!props.dataKey) {
+        return true;
+    }
+    barDataKeys.push(props.dataKey);
+    upsertLineConfig(lines, {
+        dataKey: props.dataKey,
+        stroke: props.stroke || props.fill || "var(--chart-line-primary)",
+        strokeWidth: 0,
+    });
+    return true;
+}
+function tryAppendLine(child, lines) {
+    const name = getChildComponentName(child);
+    if (!(child.type === Line || name === "Line")) {
+        return false;
+    }
+    const props = child.props;
+    if (props.dataKey) {
+        upsertLineConfig(lines, {
+            dataKey: props.dataKey,
+            stroke: props.stroke || "var(--chart-line-primary)",
+            strokeWidth: props.strokeWidth ?? 2.5,
+            yAxisId: props.yAxisId,
+        });
+    }
+    return true;
+}
+function tryAppendArea(child, lines) {
+    const name = getChildComponentName(child);
+    if (!(child.type === Area || name === "Area")) {
+        return false;
+    }
+    const props = child.props;
+    if (props.dataKey) {
+        upsertLineConfig(lines, {
+            dataKey: props.dataKey,
+            stroke: props.stroke || props.fill || "var(--chart-line-primary)",
+            strokeWidth: props.strokeWidth ?? 2,
+            yAxisId: props.yAxisId,
+        });
+    }
+    return true;
+}
+function extractComposedSeries(children) {
+    const lines = [];
+    const barDataKeys = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        if (tryAppendSeriesBar(child, lines, barDataKeys)) {
+            return;
+        }
+        if (tryAppendLine(child, lines)) {
+            return;
+        }
+        tryAppendArea(child, lines);
+    });
+    return { lines, barDataKeys };
+}
+function computeComposedYScaleDomainMax(data, lines, barDataKeys) {
+    const barSet = new Set(barDataKeys);
+    let max = 0;
+    for (const d of data) {
+        let barSum = 0;
+        for (const k of barDataKeys) {
+            const v = d[k];
+            if (typeof v === "number") {
+                barSum += v;
+            }
+        }
+        let rowMaxOther = 0;
+        for (const line of lines) {
+            if (barSet.has(line.dataKey)) {
+                continue;
+            }
+            const v = d[line.dataKey];
+            if (typeof v === "number") {
+                rowMaxOther = Math.max(rowMaxOther, v);
+            }
+        }
+        max = Math.max(max, barSum, rowMaxOther);
+    }
+    return max > 0 ? max : undefined;
+}
+function ChartInner({ width, height, data, xDataKey, margin, animationDuration, animationEasing, enterTransition, revealSignature, children, containerRef, barSize, maxBarSize, barGap, stacked = false, stackGap = 0, onPhaseChange, }) {
+    const { lines, barDataKeys } = useMemo(() => extractComposedSeries(children), [children]);
+    const composedStackOffsets = useMemo(() => {
+        if (!(stacked && barDataKeys.length > 0)) {
+            return undefined;
+        }
+        const offsets = new Map();
+        for (let i = 0; i < data.length; i++) {
+            const d = data[i];
+            if (!d) {
+                continue;
+            }
+            const pointOffsets = new Map();
+            let cumulative = 0;
+            for (const key of barDataKeys) {
+                pointOffsets.set(key, cumulative);
+                const v = d[key];
+                if (typeof v === "number") {
+                    cumulative += v;
+                }
+            }
+            offsets.set(i, pointOffsets);
+        }
+        return offsets;
+    }, [data, barDataKeys, stacked]);
+    const yScaleDomainMax = useMemo(() => stacked && barDataKeys.length > 0
+        ? computeComposedYScaleDomainMax(data, lines, barDataKeys)
+        : undefined, [data, lines, barDataKeys, stacked]);
+    return (_jsx(TimeSeriesChartInner, { animationDuration: animationDuration, animationEasing: animationEasing, clipPathId: "composed-chart-grow-clip", composedBarDataKeys: barDataKeys.length > 0 ? barDataKeys : undefined, composedBarGap: barGap, composedBarSize: barSize, composedMaxBarSize: maxBarSize, composedStacked: stacked, composedStackGap: stackGap, composedStackOffsets: composedStackOffsets, containerRef: containerRef, data: data, enterTransition: enterTransition, height: height, lines: lines, margin: margin, onPhaseChange: onPhaseChange, revealSignature: revealSignature, width: width, xDataKey: xDataKey, yScaleDomainMax: yScaleDomainMax, children: children }));
+}
+export function ComposedChart({ data, xDataKey = "date", margin: marginProp, animationDuration = 1100, animationEasing, enterTransition, revealSignature, aspectRatio = "2 / 1", className = "", children, barSize, maxBarSize, barGap = 4, stacked = false, stackGap = 0, onPhaseChange, }) {
+    const containerRef = useRef(null);
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    return (_jsx("div", { "data-slot": "composed-chart", className: cn("relative w-full", className), ref: containerRef, style: { aspectRatio, touchAction: "none" }, children: _jsx(ParentSize, { debounceTime: 10, children: ({ width, height }) => (_jsx(ChartInner, { animationDuration: animationDuration, animationEasing: animationEasing, barGap: barGap, barSize: barSize, containerRef: containerRef, data: data, enterTransition: enterTransition, height: height, margin: margin, maxBarSize: maxBarSize, onPhaseChange: onPhaseChange, revealSignature: revealSignature, stacked: stacked, stackGap: stackGap, width: width, xDataKey: xDataKey, children: children })) }) }));
+}
+ComposedChart.displayName = "ComposedChart";
+export default ComposedChart;
+//# sourceMappingURL=composed-chart.js.map

package/dist/charts/dash-tail-stroke.d.ts

@@ -0,0 +1,18 @@
+export interface DashTailStrokeProps {
+    /** SVG path `d` for the full series (single curved path). */
+    pathD: string | null;
+    /** Total length of `pathD` in user units. */
+    pathLength: number;
+    /** Path length at which the dashed tail begins. */
+    dashStartLength: number;
+    /** X coordinate (chart inner space) where the tail clip begins. */
+    dashStartX: number;
+    innerWidth: number;
+    innerHeight: number;
+    /** Stroke paint — solid color or gradient url. */
+    stroke: string;
+    strokeWidth: number;
+    dashArray: string;
+}
+export declare function DashTailStroke({ pathD, pathLength, dashStartLength, dashStartX, innerWidth, innerHeight, stroke, strokeWidth, dashArray, }: DashTailStrokeProps): import("react").JSX.Element | null;
+//# sourceMappingURL=dash-tail-stroke.d.ts.map

package/dist/charts/dash-tail-stroke.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export function DashTailStroke({ pathD, pathLength, dashStartLength, dashStartX, innerWidth, innerHeight, stroke, strokeWidth, dashArray, }) {
+    const clipPathId = useId().replace(/:/g, "");
+    if (!pathD || pathLength <= 0 || dashStartLength >= pathLength) {
+        return null;
+    }
+    const pad = strokeWidth * 2;
+    const tailWidth = Math.max(0, innerWidth - dashStartX + pad);
+    return (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipPathId, children: _jsx("rect", { height: innerHeight + pad, width: tailWidth, x: dashStartX - strokeWidth, y: -strokeWidth }) }) }), _jsx("path", { d: pathD, fill: "none", stroke: stroke, strokeDasharray: `${dashStartLength} ${Math.max(1, pathLength - dashStartLength)}`, strokeLinecap: "round", strokeWidth: strokeWidth }), _jsx("path", { clipPath: `url(#${clipPathId})`, d: pathD, fill: "none", stroke: stroke, strokeDasharray: dashArray, strokeLinecap: "round", strokeWidth: strokeWidth })] }));
+}
+//# sourceMappingURL=dash-tail-stroke.js.map

package/dist/charts/decimate-time-series.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Largest-Triangle-Three-Buckets downsampling for time-series SVG paths.
+ * Keeps first/last points and picks visually significant points per bucket.
+ */
+export declare function decimateTimeSeries<T extends Record<string, unknown>>(data: T[], maxPoints: number, valueKeys?: string[]): T[];
+/** ~1.5 points per pixel — enough for crisp curves without over-drawing. */
+export declare function maxRenderPointsForWidth(innerWidth: number): number;
+/** Bucket OHLC rows into fewer candles while preserving high/low extremes. */
+export declare function decimateOhlcData<T extends Record<string, unknown>>(data: T[], maxPoints: number): T[];
+//# sourceMappingURL=decimate-time-series.d.ts.map

package/dist/charts/decimate-time-series.js

@@ -0,0 +1,112 @@
+/**
+ * Largest-Triangle-Three-Buckets downsampling for time-series SVG paths.
+ * Keeps first/last points and picks visually significant points per bucket.
+ */
+export function decimateTimeSeries(data, maxPoints, valueKeys = []) {
+    const len = data.length;
+    if (maxPoints >= len || maxPoints < 3) {
+        return data;
+    }
+    const getY = (point, index) => {
+        if (valueKeys.length === 0) {
+            for (const val of Object.values(point)) {
+                if (typeof val === "number") {
+                    return val;
+                }
+            }
+            return index;
+        }
+        let sum = 0;
+        let count = 0;
+        for (const key of valueKeys) {
+            const val = point[key];
+            if (typeof val === "number") {
+                sum += val;
+                count++;
+            }
+        }
+        return count > 0 ? sum / count : index;
+    };
+    const sampled = [data[0]];
+    const bucketSize = (len - 2) / (maxPoints - 2);
+    let previousIndex = 0;
+    for (let i = 0; i < maxPoints - 2; i++) {
+        const rangeStart = Math.floor((i + 1) * bucketSize) + 1;
+        const rangeEnd = Math.min(Math.floor((i + 2) * bucketSize) + 1, len - 1);
+        const nextRangeStart = Math.floor((i + 2) * bucketSize) + 1;
+        const nextRangeEnd = Math.min(Math.floor((i + 3) * bucketSize) + 1, len);
+        const nextCount = Math.max(0, nextRangeEnd - nextRangeStart);
+        let avgX = len - 1;
+        let avgY = getY(data[len - 1], len - 1);
+        if (nextCount > 0) {
+            avgX = 0;
+            avgY = 0;
+            for (let j = nextRangeStart; j < nextRangeEnd; j++) {
+                avgX += j;
+                avgY += getY(data[j], j);
+            }
+            avgX /= nextCount;
+            avgY /= nextCount;
+        }
+        const pointA = data[previousIndex];
+        const ax = previousIndex;
+        const ay = getY(pointA, previousIndex);
+        let maxArea = -1;
+        let maxIndex = rangeStart;
+        for (let j = rangeStart; j < rangeEnd; j++) {
+            const area = Math.abs((ax - avgX) * (getY(data[j], j) - ay) - (ax - j) * (avgY - ay)) * 0.5;
+            if (area > maxArea) {
+                maxArea = area;
+                maxIndex = j;
+            }
+        }
+        sampled.push(data[maxIndex]);
+        previousIndex = maxIndex;
+    }
+    sampled.push(data[len - 1]);
+    return sampled;
+}
+/** ~1.5 points per pixel — enough for crisp curves without over-drawing. */
+export function maxRenderPointsForWidth(innerWidth) {
+    return Math.max(64, Math.ceil(innerWidth * 1.5));
+}
+/** Bucket OHLC rows into fewer candles while preserving high/low extremes. */
+export function decimateOhlcData(data, maxPoints) {
+    const len = data.length;
+    if (maxPoints >= len || maxPoints < 2) {
+        return data;
+    }
+    const bucketSize = len / maxPoints;
+    const sampled = [];
+    for (let i = 0; i < maxPoints; i++) {
+        const start = Math.floor(i * bucketSize);
+        const end = Math.min(len, Math.floor((i + 1) * bucketSize));
+        if (start >= end) {
+            continue;
+        }
+        const bucket = data.slice(start, end);
+        const first = bucket[0];
+        const last = bucket.at(-1);
+        let high = Number.NEGATIVE_INFINITY;
+        let low = Number.POSITIVE_INFINITY;
+        for (const row of bucket) {
+            const rowHigh = row.high;
+            const rowLow = row.low;
+            if (typeof rowHigh === "number" && rowHigh > high) {
+                high = rowHigh;
+            }
+            if (typeof rowLow === "number" && rowLow < low) {
+                low = rowLow;
+            }
+        }
+        sampled.push({
+            ...last,
+            open: first.open,
+            high: Number.isFinite(high) ? high : last.high,
+            low: Number.isFinite(low) ? low : last.low,
+            close: last.close,
+        });
+    }
+    return sampled;
+}
+//# sourceMappingURL=decimate-time-series.js.map

package/dist/charts/fade-edges.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Which side(s) of a series should fade to transparent at the chart edges.
+ * - `true`  → fade both edges (default for `<Line>`)
+ * - `false` → no fade (default for `<Area>`)
+ * - `"left"` / `"right"` → fade only that side
+ */
+export type FadeEdges = boolean | "left" | "right";
+export interface FadeSides {
+    /** Whether the left edge should fade out. */
+    left: boolean;
+    /** Whether the right edge should fade out. */
+    right: boolean;
+    /** True if either side fades — use to gate gradient/mask defs. */
+    any: boolean;
+}
+export declare function resolveFadeSides(fade: FadeEdges): FadeSides;
+export interface FadeGradientStop {
+    offset: string;
+    opacity: number;
+}
+/**
+ * Stops for a horizontal fade gradient with opacity 0 at the faded side(s)
+ * and opacity 1 in the middle. Matches the historic 0/15/85/100 pattern.
+ */
+export declare function fadeGradientStops(sides: FadeSides): FadeGradientStop[];
+/** Horizontal fade gradient pinned to the chart viewport (not the series path bounds). */
+export declare function viewportFadeGradientAttrs(innerWidth: number): {
+    gradientUnits: "userSpaceOnUse";
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+};
+//# sourceMappingURL=fade-edges.d.ts.map