@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/components/charts/ActivityRings/ActivityRings.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
 import { motion, useReducedMotion } from 'motion/react';
@@ -81,10 +82,6 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
             }
         });
     }
-    // Early return for invalid configuration
-    if (!Array.isArray(rings) || rings.length === 0) {
-        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-base text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
-    }
     // State for controlling initial animation
     const [hasAnimated, setHasAnimated] = useState(false);
     useEffect(() => {
@@ -96,23 +93,42 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
             setHasAnimated(true);
         }
     }, [showAnimation, shouldReduceMotion]);
-    // Normalize ring values (clamp to 0-100)
-    const normalizedRings = useMemo(() => rings.map((ring) => ({
-        ...ring,
-        value: Math.min(Math.max(ring.value, 0), 100),
-    })), [rings]);
+    // Normalize ring values (clamp to 0-100). Guarded for a non-array/empty
+    // `rings` (returns `[]`) so this hook stays safe to call unconditionally
+    // above the early return.
+    const normalizedRings = useMemo(() => Array.isArray(rings)
+        ? rings.map((ring) => ({
+            ...ring,
+            value: Math.min(Math.max(ring.value, 0), 100),
+        }))
+        : [], [rings]);
     // SVG parameters
     const svgSize = 100;
     const center = 50;
     // Calculate ring radii based on count
     const ringRadii = useMemo(() => {
-        normalizedRings.length;
         const maxRadius = center - strokeWidth / 2 - 2; // Leave 2px padding
         return normalizedRings.map((_, index) => {
             // index 0 (outer) = largest radius, index N-1 (inner) = smallest
             return maxRadius - index * (strokeWidth + gap);
         });
-    }, [normalizedRings.length, strokeWidth, gap, center]);
+    }, [normalizedRings, strokeWidth, gap, center]);
+    // Calculate average progress for ARIA
+    const averageProgress = useMemo(() => {
+        if (normalizedRings.length === 0)
+            return 0;
+        const sum = normalizedRings.reduce((acc, ring) => acc + ring.value, 0);
+        return Math.round(sum / normalizedRings.length);
+    }, [normalizedRings]);
+    // --- Every hook above this line runs unconditionally, every render, in the
+    // same order. Only NOW — after the last hook — do we branch on validity, so
+    // a chart going from populated → empty/invalid `rings` (a common
+    // loading-state transition) never changes its hook count mid-lifetime. See
+    // BarChart.tsx.
+    // Early return for invalid configuration
+    if (!Array.isArray(rings) || rings.length === 0) {
+        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-base text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
+    }
     // Get color for a ring by index
     // Priority: ring.color > colors prop > theme colors > fallback
     const getRingColor = (ring, index) => {
@@ -134,11 +150,6 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
     };
     // Container size
     const containerSize = typeof size === "number" ? `${size}px` : size;
-    // Calculate average progress for ARIA
-    const averageProgress = useMemo(() => {
-        const sum = normalizedRings.reduce((acc, ring) => acc + ring.value, 0);
-        return Math.round(sum / normalizedRings.length);
-    }, [normalizedRings]);
     return (jsxs("div", { ref: containerRef, className: cn(theme.baseStyle, darkMode && "dark", className), style: { width: containerSize, height: containerSize }, role: "progressbar", "aria-valuenow": averageProgress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": title ||
             `Activity rings: ${normalizedRings
                 .map((r, i) => `${r.label || `Ring ${i + 1}`} ${r.value}%`)
@@ -157,7 +168,7 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
                 }) }), (centerLabel || centerSuffix) && (jsx(motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", initial: { opacity: 0, scale: 0.8 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion
                     ? {
                         delay: CIRCULAR_CHART_ANIMATIONS.activityRings.centerLabelDelay,
-                        duration: 0.4,
+                        duration: CIRCULAR_CHART_ANIMATIONS.activityRings.centerLabelDuration,
                     }
                     : { duration: 0 }, children: centerLabel && (jsxs("div", { className: cn((_e = theme.centerText) === null || _e === void 0 ? void 0 : _e.label, "flex  flex-col items-center"), children: [jsx("span", { children: centerLabel }), centerSuffix && (jsx("span", { className: (_f = theme.centerText) === null || _f === void 0 ? void 0 : _f.suffix, children: centerSuffix }))] })) })), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 } })] }));
 };

package/dist/components/charts/ActivityRings/ActivityRings.types.d.ts

@@ -1,4 +1,4 @@
-import { BaseChartProps, StandardChartDisplayProps } from '../types/chart.types';
+import { BaseChartProps } from '../types/chart.types';
 /**
  * Individual ring configuration
  */
@@ -34,7 +34,7 @@ export interface ActivityRingsThemeOverrides {
 /**
  * ActivityRings props - multiple concentric circular progress rings
  */
-export interface ActivityRingsProps extends Pick<BaseChartProps, 'className' | 'children' | 'title' | 'description'>, Pick<StandardChartDisplayProps, 'variant'> {
+export interface ActivityRingsProps extends Pick<BaseChartProps, 'className' | 'children' | 'title' | 'description'> {
     /** Array of rings (ordered from outer to inner) */
     rings: RingData[];
     /** Center label content (text or ReactNode) */
@@ -75,5 +75,4 @@ export declare const ACTIVITY_RINGS_DEFAULTS: {
     readonly strokeWidth: 14;
     readonly gap: 4;
     readonly showAnimation: true;
-    readonly variant: "default";
 };

package/dist/components/charts/ActivityRings/ActivityRings.types.js

@@ -3,6 +3,7 @@ const ACTIVITY_RINGS_DEFAULTS = {
     size: 240,
     strokeWidth: 14,
     gap: 4,
-    showAnimation: true};
+    showAnimation: true,
+};
 
 export { ACTIVITY_RINGS_DEFAULTS };

package/dist/components/charts/AreaChart/AreaChart.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useRef, useId, useMemo, useState, useCallback } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
@@ -9,6 +10,7 @@ import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
 import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
 import { generateNiceTicks } from '../utils/chart-validation.js';
@@ -16,11 +18,12 @@ import { generateCurvePath } from '../utils/path-utils.js';
 import { AREA_CHART_DEFAULTS } from './AreaChart.types.js';
 import { X_AXIS_MARGIN } from '../types/chart.types.js';
 import { areaChartTheme, getSeriesFillColor, getSeriesColorClass } from './AreaChart.theme.js';
+import { RISE_FROM_BASELINE, riseTransition, SCALE_FROM_CENTER, dotEntranceTransition, HALO_FADE_TRANSITION } from '../utils/animation-utils.js';
 
 const sanitizeSvgId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "");
 const AreaChart = ({ data, config, 
 // Standardized display props with defaults
-showGrid = AREA_CHART_DEFAULTS.showGrid, showXAxis = AREA_CHART_DEFAULTS.showXAxis, showYAxis = AREA_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, variant = AREA_CHART_DEFAULTS.variant, theme, 
+showGrid = AREA_CHART_DEFAULTS.showGrid, showXAxis = AREA_CHART_DEFAULTS.showXAxis, showYAxis = AREA_CHART_DEFAULTS.showYAxis, legend, minValue: propMinValue, maxValue: propMaxValue, variant = AREA_CHART_DEFAULTS.variant, theme, 
 // Standardized visual props with defaults (renamed from area-specific names)
 dotRadius, radius, // @deprecated Use dotRadius instead
 strokeWidth = AREA_CHART_DEFAULTS.strokeWidth, curved = AREA_CHART_DEFAULTS.curved, curveType = AREA_CHART_DEFAULTS.curveType, showDots = AREA_CHART_DEFAULTS.showDots, fillOpacity = AREA_CHART_DEFAULTS.fillOpacity, showStroke = AREA_CHART_DEFAULTS.showStroke, stacked = AREA_CHART_DEFAULTS.stacked, 
@@ -62,7 +65,6 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
     const getMarkerGlowId = (index) => `${chartId}-marker-glow-${index}`;
     // The gradient look caps the line weight so the glow stays crisp
     const gradientStrokeWidth = Math.min(strokeWidth, 1);
-    const ANIMATION_DURATION = 1.5;
     // Entrance: the line/area RISES from the x-axis (scaleY 0→1 about the
     // baseline), mirroring how BarChart's bars grow up from the zero line. A
     // single continuous path can't morph between datasets of different point
@@ -89,10 +91,6 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
         description,
         enableKeyboardNavigation,
     });
-    // Early return if no data
-    if (!data || data.length === 0) {
-        return (jsx("div", { className: cn(areaChartTheme.emptyStateStyle, className), role: "img", "aria-label": "Empty area chart", ...props, children: jsx("span", { children: "No data available" }) }));
-    }
     // Calculate dimensions
     const margin = useMemo(() => ({
         top: 0,
@@ -105,8 +103,24 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
     const gradientAreaGap = 4;
     // Get all data keys from config
     const dataKeys = useMemo(() => Object.keys(config), [config]);
-    // Calculate scales
+    const resolvedLegendPosition = resolveLegendPosition(legend, config);
+    const legendItems = dataKeys.map((key, index) => {
+        var _a, _b, _c;
+        return ({
+            key,
+            label: (_b = (_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : key,
+            color: resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, getSeriesFillColor(index)),
+        });
+    });
+    // Calculate scales. Guarded for empty data (`Math.max(...[])` is `-Infinity`)
+    // so this hook stays safe to call unconditionally above the early return.
     const { minValue, maxValue } = useMemo(() => {
+        if (data.length === 0 || dataKeys.length === 0) {
+            return {
+                minValue: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
+                maxValue: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
+            };
+        }
         const rawMaxValue = Math.max(...data.map((item) => stacked
             ? dataKeys.reduce((sum, key) => {
                 const value = item[key];
@@ -217,7 +231,15 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
         });
         return result;
     }, [data, dataKeys, stacked, stackedValues, curved, curveType, getPointPosition]);
-    return (jsxs("div", { ref: containerRef, className: cn(areaChartTheme.containerStyle, className), style: {
+    // --- Every hook above this line runs unconditionally, every render, in the
+    // same order. Only NOW — after the last hook — do we branch on empty data,
+    // so a chart going from populated → empty data (a common loading-state
+    // transition) never changes its hook count mid-lifetime (see BarChart.tsx).
+    // Early return if no data
+    if (!data || data.length === 0) {
+        return (jsx("div", { className: cn(areaChartTheme.emptyStateStyle, className), role: "img", "aria-label": "Empty area chart", ...props, children: jsx("span", { children: "No data available" }) }));
+    }
+    return (jsxs("div", { ref: containerRef, className: cn(areaChartTheme.containerStyle, "flex flex-col", className), style: {
             width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
             height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
         }, ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, onMouseLeave: () => {
@@ -225,157 +247,137 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
             // The per-point rects only hide the tooltip; nothing else resets this.
             setHoveredPoint(null);
             handleMouseLeave();
-        }, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, className: cn(areaChartTheme.svgStyle, svgClassName), role: "presentation", children: [jsxs("defs", { children: [jsx("filter", { id: shadowFilterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: jsx("feDropShadow", { dx: "4", dy: "4", stdDeviation: "6", floodOpacity: "0.1", floodColor: "#000000" }) }), jsx("clipPath", { id: clipId, children: jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight }) }), dataKeys.map((key, keyIndex) => {
-                                var _a;
-                                const fillColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
-                                return (jsx("linearGradient", { id: getAreaGradientId(keyIndex), gradientUnits: isGradientVariant ? "objectBoundingBox" : undefined, x1: "0", y1: "0", x2: "0", y2: "1", children: isGradientVariant ? (jsxs(Fragment, { children: [jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: Math.min(0.42, fillOpacity * 1.15) }), jsx("stop", { offset: "32%", stopColor: fillColor, stopOpacity: Math.min(0.24, fillOpacity * 0.68) }), jsx("stop", { offset: "78%", stopColor: fillColor, stopOpacity: Math.min(0.08, fillOpacity * 0.22) }), jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: "0" })] })) : (jsxs(Fragment, { children: [jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: fillOpacity * 0.8 }), jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: fillOpacity * 0.05 })] })) }, `gradient-${key}`));
-                            }), isGradientVariant &&
-                                dataKeys.map((key, keyIndex) => {
+        }, ...props, children: [resolvedLegendPosition === "top" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pb-2" })), descriptionProps && jsx("div", { ...descriptionProps }), jsx("div", { className: "relative flex-1 min-h-0", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, className: cn(areaChartTheme.svgStyle, svgClassName), role: "presentation", children: [jsxs("defs", { children: [jsx("filter", { id: shadowFilterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: jsx("feDropShadow", { dx: "4", dy: "4", stdDeviation: "6", floodOpacity: "0.1", floodColor: "#000000" }) }), jsx("clipPath", { id: clipId, children: jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight }) }), dataKeys.map((key, keyIndex) => {
                                     var _a;
                                     const fillColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
-                                    return (jsxs(React__default.Fragment, { children: [jsx("filter", { id: getLineGlowId(keyIndex), x: "-12%", y: "-35%", width: "124%", height: "170%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: fillColor, floodOpacity: "0.42" }) }), jsx("filter", { id: getMarkerGlowId(keyIndex), x: "-120%", y: "-120%", width: "340%", height: "340%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: fillColor, floodOpacity: "0.45" }) })] }, `gradient-filters-${key}`));
-                                }), jsxs("linearGradient", { id: "vertical-fade", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] }), jsxs("linearGradient", { id: "horizontal-fade", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] })] }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5, className: gridClassName }), jsx(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null
-                            ? data.length === 1
-                                ? margin.left + innerWidth / 2
-                                : margin.left +
-                                    (hoveredPoint.index / (data.length - 1)) * innerWidth
-                            : 0, y: hoveredPoint !== null && dataKeys.length === 1
-                            ? (() => {
-                                const item = data[hoveredPoint.index];
-                                const singleKey = dataKeys[0];
-                                const singleValue = item[singleKey];
-                                const numValue = typeof singleValue === "number" ? singleValue : 0;
-                                return (margin.top +
-                                    innerHeight -
-                                    ((numValue - minValue) / (maxValue - minValue)) *
-                                        innerHeight);
-                            })()
-                            : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1, strokeColor: isGradientVariant ? getSeriesFillColor(0) : undefined, strokeWidth: isGradientVariant ? 1.5 : undefined, strokeDasharray: isGradientVariant ? "3 7" : undefined, opacity: isGradientVariant ? 0.28 : undefined }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, className: axisClassName, tickFormatter: (value) => {
-                            if (Math.abs(value) >= 1000)
-                                return `${(value / 1000).toFixed(0)}k`;
-                            return value.toString();
-                        } }), minValue < 0 && maxValue > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), jsx("g", { className: cn(areaChartTheme.areaGroupStyle, areaClassName), clipPath: `url(#${clipId})`, children: measured &&
-                            dataKeys.map((key, keyIndex) => {
-                                var _a, _b, _c, _d, _e;
-                                const paths = allPaths[key];
-                                const colorClass = getSeriesColorClass(keyIndex);
-                                if (!paths)
-                                    return null;
-                                return (jsxs(motion.g, { initial: { scaleY: shouldReduceMotion ? 1 : 0 }, animate: { scaleY: 1 }, transition: { duration: ANIMATION_DURATION, ease: "easeOut" }, 
-                                    // Rise from the x-axis like the bars. Framer forces
-                                    // transform-box:fill-box for SVG (a view-box origin is ignored),
-                                    // so `originY:1` anchors scaleY to the group's fill-box BOTTOM.
-                                    // The invisible rect below pins that bottom to the plot baseline,
-                                    // so the series grows UP from the x-axis — not from its own mid-height.
-                                    style: { originY: 1, transformOrigin: "bottom" }, children: [jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, fill: "none", stroke: "none", style: { pointerEvents: "none" } }), jsx("path", { d: paths.areaPath, fill: `url(#${getAreaGradientId(keyIndex)})`, className: "transition-colors duration-200", filter: isGradientVariant ? undefined : `url(#${shadowFilterId})`, transform: isGradientVariant
-                                                ? `translate(0 ${gradientAreaGap})`
-                                                : undefined }), showStroke && (jsxs(Fragment, { children: [isGradientVariant && (jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex)), strokeWidth: gradientStrokeWidth + 1, strokeLinecap: "round", strokeLinejoin: "round", 
-                                                    // Stroke width must ignore the group's scaleY rise, else
-                                                    // it squashes flat at the start of the animation.
-                                                    vectorEffect: "non-scaling-stroke", opacity: 0.08, filter: `url(#${getLineGlowId(keyIndex)})`, style: { pointerEvents: "none" } })), jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, "") : (isGradientVariant ? getSeriesFillColor(keyIndex) : undefined), strokeWidth: isGradientVariant ? gradientStrokeWidth : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", 
-                                                    // Constant stroke width through the scaleY rise (no squash).
-                                                    vectorEffect: "non-scaling-stroke", className: cn("transition-colors duration-200", !isGradientVariant &&
-                                                        (colorClass
-                                                            .split(" ")
-                                                            .find((cls) => cls.startsWith("stroke-")) || ""), lineClassName), style: { stroke: ((_d = config[key]) === null || _d === void 0 ? void 0 : _d.color) ? resolveColor((_e = config[key]) === null || _e === void 0 ? void 0 : _e.color, "") : undefined } })] }))] }, `${key}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
-                            }) }), showDots && (jsx("g", { className: "chart-dots", children: dataKeys.map((key, keyIndex) => {
-                            const colorClass = getSeriesColorClass(keyIndex);
-                            return (jsx("g", { children: data.map((item, dataIndex) => {
-                                    var _a, _b;
-                                    const rawValue = item[key];
-                                    const isNull = rawValue === null || rawValue === undefined;
-                                    // Don't render dots for null values
-                                    if (isNull)
-                                        return null;
-                                    const value = typeof rawValue === "number" ? rawValue : 0;
-                                    const topValue = stacked && stackedValues[key]
-                                        ? stackedValues[key][dataIndex] + value
-                                        : value;
-                                    const { x, y } = getPointPosition(dataIndex, topValue);
-                                    return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, transition: {
-                                            // Markers pop in one-by-one (left-to-right) only AFTER the
-                                            // line has fully risen — start the stagger at the rise's end.
-                                            delay: shouldReduceMotion ? 0 : ANIMATION_DURATION + dataIndex * 0.06,
-                                            type: "spring",
-                                            stiffness: 260,
-                                            damping: 20,
-                                        }, style: {
-                                            originX: "50%",
-                                            originY: "50%",
-                                            transformBox: "fill-box",
-                                        }, children: jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveColor((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color, "") : undefined }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
-                                }) }, key));
-                        }) })), jsx("g", { className: "chart-hover-markers", children: jsx(AnimatePresence, { children: (!showDots || isGradientVariant) &&
-                                hoveredPoint !== null &&
-                                dataKeys.map((key, keyIndex) => {
-                                    var _a, _b, _c;
+                                    return (jsx("linearGradient", { id: getAreaGradientId(keyIndex), gradientUnits: isGradientVariant ? "objectBoundingBox" : undefined, x1: "0", y1: "0", x2: "0", y2: "1", children: isGradientVariant ? (jsxs(Fragment, { children: [jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: Math.min(0.42, fillOpacity * 1.15) }), jsx("stop", { offset: "32%", stopColor: fillColor, stopOpacity: Math.min(0.24, fillOpacity * 0.68) }), jsx("stop", { offset: "78%", stopColor: fillColor, stopOpacity: Math.min(0.08, fillOpacity * 0.22) }), jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: "0" })] })) : (jsxs(Fragment, { children: [jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: fillOpacity * 0.8 }), jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: fillOpacity * 0.05 })] })) }, `gradient-${key}`));
+                                }), isGradientVariant &&
+                                    dataKeys.map((key, keyIndex) => {
+                                        var _a;
+                                        const fillColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
+                                        return (jsxs(React__default.Fragment, { children: [jsx("filter", { id: getLineGlowId(keyIndex), x: "-12%", y: "-35%", width: "124%", height: "170%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: fillColor, floodOpacity: "0.42" }) }), jsx("filter", { id: getMarkerGlowId(keyIndex), x: "-120%", y: "-120%", width: "340%", height: "340%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: fillColor, floodOpacity: "0.45" }) })] }, `gradient-filters-${key}`));
+                                    }), jsxs("linearGradient", { id: "vertical-fade", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] }), jsxs("linearGradient", { id: "horizontal-fade", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] })] }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5, className: gridClassName }), jsx(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null
+                                ? data.length === 1
+                                    ? margin.left + innerWidth / 2
+                                    : margin.left +
+                                        (hoveredPoint.index / (data.length - 1)) * innerWidth
+                                : 0, y: hoveredPoint !== null && dataKeys.length === 1
+                                ? (() => {
                                     const item = data[hoveredPoint.index];
-                                    const rawValue = item[key];
-                                    const isNull = rawValue === null || rawValue === undefined;
-                                    const value = isNull
-                                        ? 0
-                                        : typeof rawValue === "number"
-                                            ? rawValue
-                                            : 0;
-                                    // Don't render hover markers for null values
-                                    if (isNull)
-                                        return null;
-                                    const topValue = stacked && stackedValues[key]
-                                        ? stackedValues[key][hoveredPoint.index] + value
-                                        : value;
-                                    const { x, y } = getPointPosition(hoveredPoint.index, topValue);
+                                    const singleKey = dataKeys[0];
+                                    const singleValue = item[singleKey];
+                                    const numValue = typeof singleValue === "number" ? singleValue : 0;
+                                    return (margin.top +
+                                        innerHeight -
+                                        ((numValue - minValue) / (maxValue - minValue)) *
+                                            innerHeight);
+                                })()
+                                : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1, strokeColor: isGradientVariant ? getSeriesFillColor(0) : undefined, strokeWidth: isGradientVariant ? 1.5 : undefined, strokeDasharray: isGradientVariant ? "3 7" : undefined, opacity: isGradientVariant ? 0.28 : undefined }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, className: axisClassName, tickFormatter: (value) => {
+                                if (Math.abs(value) >= 1000)
+                                    return `${(value / 1000).toFixed(0)}k`;
+                                return value.toString();
+                            } }), minValue < 0 && maxValue > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), jsx("g", { className: cn(areaChartTheme.areaGroupStyle, areaClassName), clipPath: `url(#${clipId})`, children: measured &&
+                                dataKeys.map((key, keyIndex) => {
+                                    var _a, _b, _c, _d, _e;
+                                    const paths = allPaths[key];
                                     const colorClass = getSeriesColorClass(keyIndex);
-                                    const markerColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
-                                    if (isGradientVariant) {
-                                        return (jsxs(motion.g, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.22, ease: "easeOut" }, filter: `url(#${getMarkerGlowId(keyIndex)})`, style: { pointerEvents: "none" }, children: [jsx("circle", { cx: x, cy: y, r: resolvedDotRadius + 9, fill: markerColor, opacity: 0.12 }), jsx("circle", { cx: x, cy: y, r: resolvedDotRadius + 4, fill: "white", stroke: markerColor, strokeWidth: 2.5 }), jsx("circle", { cx: x, cy: y, r: resolvedDotRadius, fill: markerColor })] }, `hover-${key}-${hoveredPoint.index}`));
-                                    }
-                                    return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, "") : undefined }, `hover-${key}-${hoveredPoint.index}`));
-                                }) }) }), jsx("g", { className: "chart-hover-areas", children: data.map((item, dataIndex) => {
-                            // Calculate hover area based on new point positioning
-                            const pointX = data.length === 1
-                                ? margin.left + innerWidth / 2
-                                : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
-                            // Create hover area around each point
-                            const hoverWidth = data.length === 1 ? innerWidth : innerWidth / (data.length - 1);
-                            const hoverX = data.length === 1
-                                ? margin.left
-                                : Math.max(margin.left, pointX - hoverWidth / 2);
-                            // Ensure hover area doesn't exceed chart bounds
-                            const adjustedWidth = data.length === 1
-                                ? innerWidth
-                                : Math.min(hoverWidth, margin.left + innerWidth - hoverX);
-                            return (jsx("rect", { x: hoverX, y: margin.top, width: adjustedWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: (e) => {
-                                    setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
-                                    // Create multi-series tooltip data
-                                    const seriesData = dataKeys.map((seriesKey, keyIndex) => {
+                                    if (!paths)
+                                        return null;
+                                    return (jsxs(motion.g, { initial: { scaleY: shouldReduceMotion ? 1 : 0 }, animate: { scaleY: 1 }, transition: riseTransition, 
+                                        // Rise from the x-axis like the bars. Framer forces
+                                        // transform-box:fill-box for SVG (a view-box origin is ignored),
+                                        // so `originY:1` anchors scaleY to the group's fill-box BOTTOM.
+                                        // The invisible rect below pins that bottom to the plot baseline,
+                                        // so the series grows UP from the x-axis — not from its own mid-height.
+                                        style: RISE_FROM_BASELINE, children: [jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, fill: "none", stroke: "none", style: { pointerEvents: "none" } }), jsx("path", { d: paths.areaPath, fill: `url(#${getAreaGradientId(keyIndex)})`, className: "transition-colors duration-200", filter: isGradientVariant ? undefined : `url(#${shadowFilterId})`, transform: isGradientVariant
+                                                    ? `translate(0 ${gradientAreaGap})`
+                                                    : undefined }), showStroke && (jsxs(Fragment, { children: [isGradientVariant && (jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex)), strokeWidth: gradientStrokeWidth + 1, strokeLinecap: "round", strokeLinejoin: "round", 
+                                                        // Stroke width must ignore the group's scaleY rise, else
+                                                        // it squashes flat at the start of the animation.
+                                                        vectorEffect: "non-scaling-stroke", opacity: 0.08, filter: `url(#${getLineGlowId(keyIndex)})`, style: { pointerEvents: "none" } })), jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, "") : (isGradientVariant ? getSeriesFillColor(keyIndex) : undefined), strokeWidth: isGradientVariant ? gradientStrokeWidth : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", 
+                                                        // Constant stroke width through the scaleY rise (no squash).
+                                                        vectorEffect: "non-scaling-stroke", className: cn("transition-colors duration-200", !isGradientVariant &&
+                                                            (colorClass
+                                                                .split(" ")
+                                                                .find((cls) => cls.startsWith("stroke-")) || ""), lineClassName), style: { stroke: ((_d = config[key]) === null || _d === void 0 ? void 0 : _d.color) ? resolveColor((_e = config[key]) === null || _e === void 0 ? void 0 : _e.color, "") : undefined } })] }))] }, `${key}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
+                                }) }), showDots && (jsx("g", { className: "chart-dots", children: dataKeys.map((key, keyIndex) => {
+                                const colorClass = getSeriesColorClass(keyIndex);
+                                return (jsx("g", { children: data.map((item, dataIndex) => {
                                         var _a, _b;
-                                        const seriesValue = item[seriesKey];
-                                        const numValue = typeof seriesValue === "number" ? seriesValue : 0;
-                                        return {
-                                            key: seriesKey,
-                                            label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
-                                            value: numValue,
-                                            color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) ||
-                                                getSeriesFillColor(keyIndex),
-                                        };
-                                    });
-                                    const content = {
-                                        category: item.name || `Category ${dataIndex + 1}`,
-                                        series: seriesData,
-                                    };
-                                    // Only pass SVG coordinates on mobile for fixed positioning
-                                    // On desktop, let the hook use mouse coordinates for cursor-following
-                                    const svgCoordinates = isMobile
-                                        ? {
-                                            x: pointX,
-                                            y: margin.top + innerHeight / 2,
-                                            dimensions,
+                                        const rawValue = item[key];
+                                        const isNull = rawValue === null || rawValue === undefined;
+                                        // Don't render dots for null values
+                                        if (isNull)
+                                            return null;
+                                        const value = typeof rawValue === "number" ? rawValue : 0;
+                                        const topValue = stacked && stackedValues[key]
+                                            ? stackedValues[key][dataIndex] + value
+                                            : value;
+                                        const { x, y } = getPointPosition(dataIndex, topValue);
+                                        return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, 
+                                            // Markers pop in left-to-right once the rise has finished.
+                                            transition: dotEntranceTransition(dataIndex, shouldReduceMotion), style: SCALE_FROM_CENTER, children: jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveColor((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color, "") : undefined }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
+                                    }) }, key));
+                            }) })), jsx("g", { className: "chart-hover-markers", children: jsx(AnimatePresence, { children: (!showDots || isGradientVariant) &&
+                                    hoveredPoint !== null &&
+                                    dataKeys.map((key, keyIndex) => {
+                                        var _a, _b, _c;
+                                        const item = data[hoveredPoint.index];
+                                        const rawValue = item[key];
+                                        const isNull = rawValue === null || rawValue === undefined;
+                                        const value = isNull
+                                            ? 0
+                                            : typeof rawValue === "number"
+                                                ? rawValue
+                                                : 0;
+                                        // Don't render hover markers for null values
+                                        if (isNull)
+                                            return null;
+                                        const topValue = stacked && stackedValues[key]
+                                            ? stackedValues[key][hoveredPoint.index] + value
+                                            : value;
+                                        const { x, y } = getPointPosition(hoveredPoint.index, topValue);
+                                        const colorClass = getSeriesColorClass(keyIndex);
+                                        const markerColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
+                                        if (isGradientVariant) {
+                                            return (jsxs(motion.g, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: HALO_FADE_TRANSITION, filter: `url(#${getMarkerGlowId(keyIndex)})`, style: { pointerEvents: "none" }, children: [jsx("circle", { cx: x, cy: y, r: resolvedDotRadius + 9, fill: markerColor, opacity: 0.12 }), jsx("circle", { cx: x, cy: y, r: resolvedDotRadius + 4, fill: "white", stroke: markerColor, strokeWidth: 2.5 }), jsx("circle", { cx: x, cy: y, r: resolvedDotRadius, fill: markerColor })] }, `hover-${key}-${hoveredPoint.index}`));
                                         }
-                                        : undefined;
-                                    handleMouseEnter(e, content, svgCoordinates);
-                                }, onMouseMove: (e) => {
-                                    if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
-                                        // Only pass SVG coordinates on mobile
+                                        return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, "") : undefined }, `hover-${key}-${hoveredPoint.index}`));
+                                    }) }) }), jsx("g", { className: "chart-hover-areas", children: data.map((item, dataIndex) => {
+                                // Calculate hover area based on new point positioning
+                                const pointX = data.length === 1
+                                    ? margin.left + innerWidth / 2
+                                    : margin.left + (dataIndex / (data.length - 1)) * innerWidth;
+                                // Create hover area around each point
+                                const hoverWidth = data.length === 1 ? innerWidth : innerWidth / (data.length - 1);
+                                const hoverX = data.length === 1
+                                    ? margin.left
+                                    : Math.max(margin.left, pointX - hoverWidth / 2);
+                                // Ensure hover area doesn't exceed chart bounds
+                                const adjustedWidth = data.length === 1
+                                    ? innerWidth
+                                    : Math.min(hoverWidth, margin.left + innerWidth - hoverX);
+                                return (jsx("rect", { x: hoverX, y: margin.top, width: adjustedWidth, height: innerHeight, fill: "transparent", className: "cursor-pointer", onMouseEnter: (e) => {
+                                        setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
+                                        // Create multi-series tooltip data
+                                        const seriesData = dataKeys.map((seriesKey, keyIndex) => {
+                                            var _a, _b;
+                                            const seriesValue = item[seriesKey];
+                                            const numValue = typeof seriesValue === "number" ? seriesValue : 0;
+                                            return {
+                                                key: seriesKey,
+                                                label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
+                                                value: numValue,
+                                                color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) ||
+                                                    getSeriesFillColor(keyIndex),
+                                            };
+                                        });
+                                        const content = {
+                                            category: item.name || `Category ${dataIndex + 1}`,
+                                            series: seriesData,
+                                        };
+                                        // Only pass SVG coordinates on mobile for fixed positioning
+                                        // On desktop, let the hook use mouse coordinates for cursor-following
                                         const svgCoordinates = isMobile
                                             ? {
                                                 x: pointX,
@@ -383,10 +385,21 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                                 dimensions,
                                             }
                                             : undefined;
-                                        handleMouseMove(e, svgCoordinates);
-                                    }
-                                }, onMouseLeave: handleMouseLeave }, `hover-${dataIndex}`));
-                        }) }), jsx(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / data.length, categoryGap: 0, className: axisClassName, alignWithEdge: true })] }), jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" }), children] }));
+                                        handleMouseEnter(e, content, svgCoordinates);
+                                    }, onMouseMove: (e) => {
+                                        if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
+                                            // Only pass SVG coordinates on mobile
+                                            const svgCoordinates = isMobile
+                                                ? {
+                                                    x: pointX,
+                                                    y: margin.top + innerHeight / 2,
+                                                    dimensions,
+                                                }
+                                                : undefined;
+                                            handleMouseMove(e, svgCoordinates);
+                                        }
+                                    }, onMouseLeave: handleMouseLeave }, `hover-${dataIndex}`));
+                            }) }), jsx(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / data.length, categoryGap: 0, className: axisClassName, alignWithEdge: true })] }) }), resolvedLegendPosition === "bottom" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pt-2" })), jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" }), children] }));
 };
 
 export { AreaChart };