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

package/dist/components/charts/Heatmap/Heatmap.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect } from 'react';
+import { useRef, useMemo } from 'react';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
-import { useChart } from '../ChartContainer.js';
+import { useOptionalChart } from '../ChartContainer.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
 import { HeatmapCell } from './HeatmapCell.js';
 import { processHeatmapData, createGridMatrix, calculateIntensity, getDefaultTooltipContent } from './utils/heatmapUtils.js';
@@ -15,12 +16,14 @@ import { heatmapTheme } from './Heatmap.theme.js';
  * Supports weekly, monthly, hourly views and custom data structures
  */
 const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorScale = { steps: 10, minOpacity: 0.1 }, layout = { gap: 6 }, axis = { showXAxis: true, showYAxis: true }, tooltip = { enabled: true }, legend = { enabled: true }, valueRange, onCellClick, cellRenderer, className, variant = 'default', children, ...props }) => {
-    // Get data and config from context if not provided as props
-    const chartContext = useChart();
-    const data = dataProp || chartContext.data;
-    const config = configProp || chartContext.config;
+    // Get data and config from context if not provided as props. `data`/`config`
+    // are documented as directly-passable — Heatmap must also work standalone,
+    // with no wrapping <ChartContainer>, so the context read is optional here
+    // (returns `null` instead of throwing) rather than the strict `useChart()`.
+    const chartContext = useOptionalChart();
+    const data = dataProp || (chartContext === null || chartContext === void 0 ? void 0 : chartContext.data) || [];
+    const config = configProp || (chartContext === null || chartContext === void 0 ? void 0 : chartContext.config) || {};
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
     // Detect if device is mobile/touch
     const isMobile = typeof window !== 'undefined' &&
         ('ontouchstart' in window || navigator.maxTouchPoints > 0);
@@ -38,23 +41,6 @@ const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorS
     const gridMatrix = useMemo(() => {
         return createGridMatrix(data, xCategories, yCategories);
     }, [data, xCategories, yCategories]);
-    // Measure container dimensions
-    useEffect(() => {
-        const updateDimensions = () => {
-            if (containerRef.current) {
-                const { width, height } = containerRef.current.getBoundingClientRect();
-                setDimensions({ width, height });
-            }
-        };
-        updateDimensions();
-        const resizeObserver = new ResizeObserver(updateDimensions);
-        if (containerRef.current) {
-            resizeObserver.observe(containerRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
     // Simple color resolution - similar to AreaChart
     const getCellColor = () => {
         var _a;
@@ -110,7 +96,7 @@ const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorS
     const renderXAxisLabels = () => {
         if (!axis.showXAxis)
             return null;
-        return (jsxs("div", { className: cn("flex justify-between items-center px-1 py-2", heatmapTheme.axisLabelStyle), style: { gridColumn: `1 / -1` }, role: "list", "aria-label": "X-axis labels", "aria-describedby": "heatmap-x-axis-description", children: [xCategories.map((category, index) => (jsx("div", { className: "flex-1 text-center px-1", style: {
+        return (jsxs("div", { className: cn("flex justify-between items-center px-1 py-2", heatmapTheme.axisLabelStyle), style: { gridColumn: `1 / -1` }, role: xCategories.length > 0 ? "list" : undefined, "aria-label": "X-axis labels", "aria-describedby": "heatmap-x-axis-description", children: [xCategories.map((category, index) => (jsx("div", { className: "flex-1 text-center px-1", style: {
                         transform: axis.xAxisRotation ? `rotate(${axis.xAxisRotation}deg)` : undefined
                     }, role: "listitem", "aria-label": `X-axis label: ${axis.xAxisFormatter
                         ? axis.xAxisFormatter(category, index)
@@ -125,7 +111,7 @@ const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorS
                 gridTemplateRows: `repeat(${yCategories.length}, 1fr)`,
                 gap: typeof layout.gap === 'number' ? `${layout.gap}px` : layout.gap,
                 height: '100%',
-            }, role: "list", "aria-label": "Y-axis labels", "aria-describedby": "heatmap-y-axis-description", children: [yCategories.map((category, index) => (jsx("div", { className: "flex items-center justify-end", style: {
+            }, role: yCategories.length > 0 ? "list" : undefined, "aria-label": "Y-axis labels", "aria-describedby": "heatmap-y-axis-description", children: [yCategories.map((category, index) => (jsx("div", { className: "flex items-center justify-end", style: {
                         transform: axis.yAxisRotation ? `rotate(${axis.yAxisRotation}deg)` : undefined
                     }, role: "listitem", "aria-label": `Y-axis label: ${axis.yAxisFormatter
                         ? axis.yAxisFormatter(category, index)
@@ -133,16 +119,23 @@ const Heatmap = ({ data: dataProp, config: configProp, color = 'primary', colorS
                         ? axis.yAxisFormatter(category, index)
                         : String(category) }, category))), jsxs("span", { id: "heatmap-y-axis-description", className: "sr-only", children: ["Y-axis contains ", yCategories.length, " categories representing the vertical dimension of the heatmap"] })] }));
     };
-    return (jsxs("div", { ref: containerRef, className: cn(heatmapTheme.containerStyle, variant === 'bordered' && 'border border-gray-200 dark:border-gray-700 rounded-lg p-4', variant === 'minimal' && 'p-2', className), ...props, children: [jsxs("div", { className: "flex flex-1 min-h-0", children: [axis.showYAxis && (jsxs("div", { className: "flex-shrink-0 w-16 flex flex-col", children: [axis.showXAxis && jsx("div", { className: "flex-shrink-0 h-8" }), jsx("div", { className: "flex-1", children: renderYAxisLabels() })] })), jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [axis.showXAxis && (jsx("div", { className: "flex-shrink-0 h-8", children: renderXAxisLabels() })), jsx("div", { className: "flex-1 relative min-h-0", children: jsx(motion.div, { style: gridStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: 'easeOut' }, className: heatmapTheme.gridStyle, children: gridMatrix.flat().map((cellData, index) => {
-                                        const intensity = calculateIntensity(cellData.value, minValue, maxValue);
-                                        `${cellData.x}-${cellData.y}`;
-                                        // Skip null values entirely
-                                        if (cellData.value === null) {
-                                            return (jsx("div", { className: "bg-transparent" }, `${cellData.x}-${cellData.y}-${index}`));
-                                        }
-                                        const CellComponent = cellRenderer || HeatmapCell;
-                                        return (jsx(CellComponent, { data: cellData, intensity: intensity, minOpacity: colorScale === null || colorScale === void 0 ? void 0 : colorScale.minOpacity, color: cellColor, onClick: onCellClick, onHover: handleCellHover, onMouseMove: handleCellMouseMove, onLeave: handleCellLeave, className: "rounded-sm" }, `${cellData.x}-${cellData.y}-${index}`));
-                                    }) }) })] })] }), ((legend === null || legend === void 0 ? void 0 : legend.enabled) !== false) && (jsx("div", { className: "flex-shrink-0 mt-2", children: jsx(HeatmapLegend, { colorKey: "value", color: cellColor, minValue: minValue, maxValue: maxValue, labels: legend === null || legend === void 0 ? void 0 : legend.labels }) })), tooltip.enabled && (jsx(ChartTooltip, { content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef })), children] }));
+    return (jsxs("div", { ref: containerRef, className: cn(heatmapTheme.containerStyle, variant === 'bordered' && 'border border-gray-200 dark:border-gray-700 rounded-lg p-4', variant === 'minimal' && 'p-2', className), ...props, children: [jsxs("div", { className: "flex flex-1 min-h-0", children: [axis.showYAxis && (jsxs("div", { className: "flex-shrink-0 w-16 flex flex-col", children: [axis.showXAxis && jsx("div", { className: "flex-shrink-0 h-8" }), jsx("div", { className: "flex-1", children: renderYAxisLabels() })] })), jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [axis.showXAxis && (jsx("div", { className: "flex-shrink-0 h-8", children: renderXAxisLabels() })), jsx("div", { className: "flex-1 relative min-h-0", children: jsx(motion.div, { style: gridStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: 'easeOut' }, className: heatmapTheme.gridStyle, role: "grid", "aria-label": `Heatmap grid, ${yCategories.length} rows by ${xCategories.length} columns`, children: gridMatrix.map((rowCells, rowIndex) => (
+                                    // `role="row"` groups each grid-matrix row for ARIA purposes
+                                    // (satisfies aria-required-parent on the gridcells below and
+                                    // aria-required-children on the grid above) without affecting
+                                    // the CSS-grid layout: `display: contents` removes this
+                                    // wrapper's own box, so its children still participate as
+                                    // direct items of the `display: grid` container.
+                                    jsx("div", { role: "row", style: { display: 'contents' }, children: rowCells.map((cellData, colIndex) => {
+                                            const intensity = calculateIntensity(cellData.value, minValue, maxValue);
+                                            const index = rowIndex * rowCells.length + colIndex;
+                                            // Skip null values entirely
+                                            if (cellData.value === null) {
+                                                return (jsx("div", { className: "bg-transparent" }, `${cellData.x}-${cellData.y}-${index}`));
+                                            }
+                                            const CellComponent = cellRenderer || HeatmapCell;
+                                            return (jsx(CellComponent, { data: cellData, intensity: intensity, minOpacity: colorScale === null || colorScale === void 0 ? void 0 : colorScale.minOpacity, color: cellColor, onClick: onCellClick, onHover: handleCellHover, onMouseMove: handleCellMouseMove, onLeave: handleCellLeave, className: "rounded-sm" }, `${cellData.x}-${cellData.y}-${index}`));
+                                        }) }, `row-${rowIndex}`))) }) })] })] }), ((legend === null || legend === void 0 ? void 0 : legend.enabled) !== false) && (jsx("div", { className: "flex-shrink-0 mt-2", children: jsx(HeatmapLegend, { colorKey: "value", color: cellColor, minValue: minValue, maxValue: maxValue, labels: legend === null || legend === void 0 ? void 0 : legend.labels }) })), tooltip.enabled && (jsx(ChartTooltip, { content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef })), children] }));
 };
 
 export { Heatmap };

package/dist/components/charts/Heatmap/HeatmapCell.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useRef } from 'react';
 import { motion } from 'motion/react';
@@ -88,7 +89,7 @@ className, onClick, onHover, onMouseMove, onLeave, children, }) => {
                 e.preventDefault();
                 onClick(data);
             }
-        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300", children: children })) }));
+        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-700 dark:text-gray-300", children: children })) }));
 };
 const HeatmapCell = React__default.memo(HeatmapCellInner);
 

package/dist/components/charts/Heatmap/HeatmapLegend.js

@@ -11,7 +11,7 @@ minValue = 0, maxValue = 100, labels = {
     const gradientStyle = {
         background: `linear-gradient(to right, color-mix(in srgb, ${color} 20%, transparent), ${color})`
     };
-    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
+    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
 };
 
 export { HeatmapLegend };

package/dist/components/charts/LineChart/LineChart.js

@@ -1,18 +1,23 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useId, useEffect, useMemo, useCallback } from 'react';
-import { motion } from 'motion/react';
+import { useRef, useId, useMemo, useState, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
+import { useChartDimensions } from '../hooks/useChartDimensions.js';
 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';
 import { generateCurvePath } from '../utils/path-utils.js';
 import { LINE_CHART_DEFAULTS } from './LineChart.types.js';
+import { X_AXIS_MARGIN } from '../types/chart.types.js';
+import { RISE_FROM_BASELINE, riseTransition, SCALE_FROM_CENTER, dotEntranceTransition, HALO_FADE_TRANSITION } from '../utils/animation-utils.js';
 
 // Production-ready color system with CORRECT CSS variable syntax
 const getSeriesColorClass = (index) => {
@@ -25,7 +30,19 @@ const getSeriesColorClass = (index) => {
     return colors[index % colors.length];
 };
 // Get color value for SVG elements and tooltips
-const getSeriesFillColor = (index) => {
+const getSeriesFillColor = (index, key, config) => {
+    var _a;
+    if (key && config && ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color)) {
+        const customColor = config[key].color;
+        if (!customColor.startsWith("var(") &&
+            !customColor.startsWith("#") &&
+            !customColor.startsWith("rgb") &&
+            !customColor.startsWith("hsl") &&
+            customColor.includes("-")) {
+            return `var(--color-${customColor})`;
+        }
+        return customColor;
+    }
     const colorVars = [
         "var(--color-primary)",
         "var(--color-warning)",
@@ -36,14 +53,14 @@ const getSeriesFillColor = (index) => {
 };
 const LineChart = ({ data, config, 
 // Standardized display props with defaults
-showGrid = LINE_CHART_DEFAULTS.showGrid, showXAxis = LINE_CHART_DEFAULTS.showXAxis, showYAxis = LINE_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, 
+showGrid = LINE_CHART_DEFAULTS.showGrid, showXAxis = LINE_CHART_DEFAULTS.showXAxis, showYAxis = LINE_CHART_DEFAULTS.showYAxis, legend, minValue: propMinValue, maxValue: propMaxValue, 
 // Simple semantic color prop
 color = LINE_CHART_DEFAULTS.color, 
 // Standardized visual props with defaults (renamed from line-specific names)
 dotRadius, radius, // @deprecated Use dotRadius instead
 strokeWidth = LINE_CHART_DEFAULTS.strokeWidth, curved = LINE_CHART_DEFAULTS.curved, curveType = LINE_CHART_DEFAULTS.curveType, showDots = LINE_CHART_DEFAULTS.showDots, 
 // Base props
-className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.enableKeyboardNavigation, children, ...props }) => {
+className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.enableKeyboardNavigation, width, height, children, ...props }) => {
     var _a;
     // Resolve dotRadius with backward compatibility
     const resolvedDotRadius = (_a = dotRadius !== null && dotRadius !== void 0 ? dotRadius : radius) !== null && _a !== void 0 ? _a : LINE_CHART_DEFAULTS.dotRadius;
@@ -54,12 +71,22 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
     }
     // Simplified color system - no complex theme hook needed
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
-    const revealClipId = useId();
-    const shadowFilterId = useId();
+    // `measured` gates the rise + dots so motion captures the baseline scaleY
+    // origin and dot positions at the real size, not the 600×400 fallback.
+    const { dimensions, measured } = useChartDimensions(containerRef);
     const verticalFadeId = useId();
     const horizontalFadeId = useId();
-    const ANIMATION_DURATION = 1.5;
+    // Per-series colored glow behind each line + the hover halo (AreaChart parity).
+    const seriesGlowBaseId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const getSeriesGlowId = (index) => `${seriesGlowBaseId}-glow-${index}`;
+    // Entrance: the line 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 counts, so
+    // it rises rather than draws. Keying the line group on the data signature
+    // replays the rise on every range switch; reduced-motion users get a stable
+    // key + scaleY:1 (no animation).
+    const shouldReduceMotion = useReducedMotion();
+    const dataSignature = useMemo(() => JSON.stringify(data), [data]);
     const [hoveredPoint, setHoveredPoint] = useState(null);
     // Detect if device is mobile/touch
     const isMobile = typeof window !== "undefined" &&
@@ -78,43 +105,35 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
         description,
         enableKeyboardNavigation,
     });
-    // Measure container dimensions
-    useEffect(() => {
-        const updateDimensions = () => {
-            if (containerRef.current) {
-                const { width, height } = containerRef.current.getBoundingClientRect();
-                setDimensions({
-                    width: width || 600,
-                    height: height || 400,
-                });
-            }
-        };
-        updateDimensions();
-        const resizeObserver = new ResizeObserver(updateDimensions);
-        if (containerRef.current) {
-            resizeObserver.observe(containerRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
-    // Early return if no data
-    if (!data || data.length === 0) {
-        return (jsx("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-placeholder)]", className), role: "img", "aria-label": "Empty line chart", ...props, children: jsx("span", { children: "No data available" }) }));
-    }
     // Calculate dimensions
     const margin = useMemo(() => ({
         top: 0,
         right: 0,
-        bottom: showXAxis ? 40 : 0, // Reduce bottom margin when X-axis is hidden
+        bottom: showXAxis ? X_AXIS_MARGIN : 0, // shared X-axis margin so baselines align across chart types
         left: showYAxis ? 60 : 0, // Reduce left margin when Y-axis is hidden
     }), [showXAxis, showYAxis]);
     const innerWidth = dimensions.width - margin.left - margin.right;
     const innerHeight = dimensions.height - margin.top - margin.bottom;
     // 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;
+        return ({
+            key,
+            label: (_b = (_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : key,
+            color: getSeriesFillColor(index, key, config),
+        });
+    });
+    // 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) => Math.max(...dataKeys.map((key) => {
             const value = item[key];
             return typeof value === "number" ? value : 0;
@@ -189,7 +208,7 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
                     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),
+                    color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex, seriesKey, config),
                 };
             });
             const content = {
@@ -231,131 +250,159 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
         handleMouseEnter,
         handleMouseLeave,
     ]);
-    return (jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, className: "overflow-visible", role: "presentation", children: [jsxs("defs", { children: [jsx("filter", { id: shadowFilterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: jsx("feDropShadow", { dx: "8", dy: "8", stdDeviation: "8", floodOpacity: "0.15", floodColor: "#000000" }) }), jsxs("linearGradient", { id: verticalFadeId, 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: horizontalFadeId, 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("clipPath", { id: revealClipId, children: jsx(motion.rect, { initial: { width: 0, x: margin.left, y: margin.top }, animate: {
-                                        width: innerWidth + margin.right,
-                                        x: margin.left,
-                                        y: margin.top,
-                                    }, height: innerHeight, transition: {
-                                        duration: ANIMATION_DURATION,
-                                        ease: "easeOut",
-                                    } }) })] }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), 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
-                            ? (() => {
+    // --- 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("chart-container flex items-center justify-center text-[var(--color-text-placeholder)]", className), role: "img", "aria-label": "Empty line chart", ...props, children: jsx("span", { children: "No data available" }) }));
+    }
+    return (jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full 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: () => {
+            // Clear the crosshair + glow marker when the pointer leaves the chart.
+            // The per-point rects only hide the tooltip; nothing else resets this.
+            setHoveredPoint(null);
+            handleMouseLeave();
+        }, ...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: "overflow-visible", role: "presentation", children: [jsxs("defs", { children: [dataKeys.map((key, keyIndex) => (jsx("filter", { id: getSeriesGlowId(keyIndex), x: "-50%", y: "-50%", width: "200%", height: "200%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "4", floodColor: getSeriesFillColor(keyIndex, key, config), floodOpacity: "0.45" }) }, key))), jsxs("linearGradient", { id: verticalFadeId, 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: horizontalFadeId, 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 }), 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, 
+                            // Series-colored dashed crosshair (AreaChart parity) instead of the
+                            // default gray solid line.
+                            strokeColor: getSeriesFillColor(0, dataKeys[0], config), strokeWidth: 1.5, strokeDasharray: "3 7", opacity: 0.28 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, 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: "chart-lines", children: measured &&
+                                dataKeys.map((key, keyIndex) => {
+                                    var _a;
+                                    const targetPath = allPaths[key];
+                                    const colorClass = getSeriesColorClass(keyIndex);
+                                    return (jsxs("g", { children: [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, so `originY:1` anchors scaleY
+                                                // to the group's fill-box BOTTOM. The invisible rect pins that
+                                                // bottom to the plot baseline (a bare line's bbox stops at its
+                                                // lowest point), so the line grows UP from the x-axis.
+                                                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: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", 
+                                                        // Constant stroke width through the scaleY rise (no squash).
+                                                        vectorEffect: "non-scaling-stroke", className: cn("transition-all duration-200", colorClass), style: { stroke: (_a = config[key]) === null || _a === void 0 ? void 0 : _a.color }, 
+                                                        // Soft series-colored glow instead of a hard black drop shadow.
+                                                        filter: `url(#${getSeriesGlowId(keyIndex)})` })] }, shouldReduceMotion ? "line-static" : dataSignature), showDots &&
+                                                data.map((item, dataIndex) => {
+                                                    var _a;
+                                                    const rawValue = item[key];
+                                                    const isNull = rawValue === null || rawValue === undefined;
+                                                    const value = isNull
+                                                        ? 0
+                                                        : typeof rawValue === "number"
+                                                            ? rawValue
+                                                            : 0;
+                                                    // Don't render dots for null values
+                                                    if (isNull)
+                                                        return null;
+                                                    const { x, y } = getPointPosition(dataIndex, value);
+                                                    const isFocused = isKeyboardMode && focusedElementIndex === dataIndex;
+                                                    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: isFocused
+                                                                ? resolvedDotRadius + 2
+                                                                : resolvedDotRadius, colorClass: cn(colorClass, isFocused &&
+                                                                "stroke-[var(--color-primary-600)] stroke-2"), strokeColor: (_a = config[key]) === null || _a === void 0 ? void 0 : _a.color }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
+                                                })] }, key));
+                                }) }), jsx("g", { className: "chart-hover-halo", children: jsx(AnimatePresence, { children: hoveredPoint !== null &&
+                                    dataKeys.map((key, keyIndex) => {
+                                        const item = data[hoveredPoint.index];
+                                        const rawValue = item[key];
+                                        const isNull = rawValue === null || rawValue === undefined;
+                                        if (isNull)
+                                            return null;
+                                        const value = typeof rawValue === "number" ? rawValue : 0;
+                                        const { x, y } = getPointPosition(hoveredPoint.index, value);
+                                        const markerColor = getSeriesFillColor(keyIndex, key, config);
+                                        return (jsxs(motion.g, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: HALO_FADE_TRANSITION, filter: `url(#${getSeriesGlowId(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 })] }, `halo-${key}-${hoveredPoint.index}`));
+                                    }) }) }), !showDots && hoveredPoint !== null && (jsx("g", { className: "chart-hover-markers", children: dataKeys.map((key, keyIndex) => {
+                                var _a;
                                 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 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, 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: "chart-lines", children: dataKeys.map((key, keyIndex) => {
-                            const targetPath = allPaths[key];
-                            const colorClass = getSeriesColorClass(keyIndex);
-                            return (jsxs("g", { clipPath: `url(#${revealClipId})`, children: [jsx("path", { d: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", colorClass), filter: `url(#${shadowFilterId})` }), showDots &&
-                                        data.map((item, dataIndex) => {
-                                            const rawValue = item[key];
-                                            const isNull = rawValue === null || rawValue === undefined;
-                                            const value = isNull
-                                                ? 0
-                                                : typeof rawValue === "number"
-                                                    ? rawValue
-                                                    : 0;
-                                            // Don't render dots for null values
-                                            if (isNull)
-                                                return null;
-                                            const { x, y } = getPointPosition(dataIndex, value);
-                                            const isFocused = isKeyboardMode && focusedElementIndex === dataIndex;
-                                            return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, transition: {
-                                                    // Sync with the line reveal: calculate when the line reaches this point
-                                                    delay: (dataIndex / (data.length - 1)) *
-                                                        ANIMATION_DURATION,
-                                                    type: "spring",
-                                                    stiffness: 260,
-                                                    damping: 20,
-                                                }, style: {
-                                                    originX: "50%",
-                                                    originY: "50%",
-                                                    transformBox: "fill-box",
-                                                }, children: jsx(ChartMarker, { cx: x, cy: y, radius: isFocused
-                                                        ? resolvedDotRadius + 2
-                                                        : resolvedDotRadius, colorClass: cn(colorClass, isFocused &&
-                                                        "stroke-[var(--color-primary-600)] stroke-2") }) }, `${key}-${dataIndex}`));
-                                        })] }, key));
-                        }) }), !showDots && hoveredPoint !== null && (jsx("g", { className: "chart-hover-markers", children: dataKeys.map((key, keyIndex) => {
-                            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 { x, y } = getPointPosition(hoveredPoint.index, value);
-                            const colorClass = getSeriesColorClass(keyIndex);
-                            return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass }, `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 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 { x, y } = getPointPosition(hoveredPoint.index, value);
+                                const colorClass = getSeriesColorClass(keyIndex);
+                                return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: (_a = config[key]) === null || _a === void 0 ? void 0 : _a.color }, `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, seriesKey, config),
+                                            };
+                                        });
+                                        const content = {
+                                            category: item.name || `Category ${dataIndex + 1}`,
+                                            series: seriesData,
                                         };
-                                    });
-                                    const content = {
-                                        category: item.name || `Category ${dataIndex + 1}`,
-                                        series: seriesData,
-                                    };
-                                    const svgCoordinates = {
-                                        x: pointX,
-                                        y: margin.top + innerHeight / 2,
-                                        dimensions,
-                                    };
-                                    handleMouseEnter(e, content, svgCoordinates);
-                                }, onMouseMove: (e) => {
-                                    if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
                                         const svgCoordinates = {
                                             x: pointX,
                                             y: margin.top + innerHeight / 2,
                                             dimensions,
                                         };
-                                        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, 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: "line" }), children] }));
+                                        handleMouseEnter(e, content, svgCoordinates);
+                                    }, onMouseMove: (e) => {
+                                        if ((hoveredPoint === null || hoveredPoint === void 0 ? void 0 : hoveredPoint.index) === dataIndex) {
+                                            const svgCoordinates = {
+                                                x: pointX,
+                                                y: margin.top + innerHeight / 2,
+                                                dimensions,
+                                            };
+                                            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, 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: "line" }), children] }));
 };
 
 export { LineChart };