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

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

@@ -1,10 +1,18 @@
 import { CHART_DEFAULTS } from '../types/chart.types.js';
 
-// Default values using centralized defaults
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — see the note on
+ * `BAR_CHART_DEFAULTS`.
+ */
 const AREA_CHART_DEFAULTS = {
-    ...CHART_DEFAULTS,
+    showGrid: CHART_DEFAULTS.showGrid,
+    showXAxis: CHART_DEFAULTS.showXAxis,
+    showYAxis: CHART_DEFAULTS.showYAxis,
+    enableKeyboardNavigation: CHART_DEFAULTS.enableKeyboardNavigation,
+    variant: "gradient", // AreaChart defaults to the gradient (premium) look; use variant="default" for flat fills
     dotRadius: CHART_DEFAULTS.dotRadius, // 20 - For dot markers
-    radius: CHART_DEFAULTS.dotRadius, // @deprecated - kept for backward compatibility
     strokeWidth: CHART_DEFAULTS.strokeWidth,
     curved: CHART_DEFAULTS.curved,
     curveType: CHART_DEFAULTS.curveType,

package/dist/components/charts/AreaChart/index.d.ts

@@ -1,4 +1,4 @@
 export { AreaChart } from './AreaChart';
 export type { AreaChartProps, AreaChartData, AreaChartConfig } from './AreaChart.types';
-export { areaChartTheme, getSeriesColorClass, getSeriesFillColor } from './AreaChart.theme';
+export { areaChartTheme, getSeriesColorClass } from './AreaChart.theme';
 export type { AreaChartTheme } from './AreaChart.theme';

package/dist/components/charts/BarChart/BarChart.js

@@ -1,17 +1,25 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useRef, useMemo } from 'react';
+import React__default, { useId, useState, useEffect, useRef, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
 import { useChartValidation } from '../hooks/useChartValidation.js';
+import { useChartDimensions } from '../hooks/useChartDimensions.js';
 import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBoundary.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 { BAR_CHART_DEFAULTS } from './BarChart.types.js';
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { X_AXIS_MARGIN } from '../types/chart.types.js';
+import { BAR_GROUP_STAGGER, BAR_SPRING, barEntranceTransition } from '../utils/animation-utils.js';
+import { BarSeriesDefs, BarGlowRing, barStrokeStyle, barFill, barDimOpacity, deriveBarEmphasis } from '../utils/bar-emphasis.js';
+import { resolveSeriesColor } from '../utils/series-color.js';
+import { chartTheme } from '../theme/chart.theme.js';
+import { Warning } from '@phosphor-icons/react';
 
 // Pure helper functions moved to module level to avoid recreation per render
 const createRoundedTopBarPath = (x, y, width, height, radius) => {
@@ -49,12 +57,10 @@ const calculateAverageForKey = (sanitizedData, key, safeMathDivide) => {
 };
 const BarChart = ({ data, config, 
 // Standardized display props with defaults
-showGrid = BAR_CHART_DEFAULTS.showGrid, showXAxis = BAR_CHART_DEFAULTS.showXAxis, showYAxis = BAR_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, variant = BAR_CHART_DEFAULTS.variant, theme, 
+showGrid = BAR_CHART_DEFAULTS.showGrid, showXAxis = BAR_CHART_DEFAULTS.showXAxis, showYAxis = BAR_CHART_DEFAULTS.showYAxis, legend, minValue: propMinValue, maxValue: propMaxValue, variant = BAR_CHART_DEFAULTS.variant, theme, 
 // Standardized visual props with defaults (renamed from bar-specific names)
 barRadius, radius, // @deprecated Use barRadius instead
 gap = BAR_CHART_DEFAULTS.gap, categoryGap = BAR_CHART_DEFAULTS.categoryGap, 
-// Bar-specific props
-orientation = BAR_CHART_DEFAULTS.orientation, 
 // Animation props
 showAnimation = BAR_CHART_DEFAULTS.showAnimation, 
 // Placeholder bar props
@@ -62,10 +68,16 @@ showPlaceholderBars = BAR_CHART_DEFAULTS.showPlaceholderBars, placeholderData,
 // Color customization
 colors, 
 // Base props
-className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", darkMode = false, children, ...props }) => {
+className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", darkMode = false, width, height, children, ...props }) => {
     var _a, _b;
     // Resolve barRadius with backward compatibility
     const resolvedBarRadius = (_a = barRadius !== null && barRadius !== void 0 ? barRadius : radius) !== null && _a !== void 0 ? _a : BAR_CHART_DEFAULTS.barRadius;
+    const chartId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const isGradientVariant = variant === "gradient";
+    const hatchPatternId = `${chartId}-diagonal-hatch`;
+    const getBarGradientId = (index) => `${chartId}-bar-gradient-${index}`;
+    const getBarShadowId = (index) => `${chartId}-bar-shadow-${index}`;
+    const getBarRingId = (index) => `${chartId}-bar-ring-${index}`;
     // Development warning for deprecated radius prop
     if (process.env.NODE_ENV !== "production" && radius !== undefined) {
         console.warn("[BarChart]: The `radius` prop is deprecated and will be removed in a future version. " +
@@ -85,32 +97,31 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
     // Validate data and config with error handling
     const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
         autoSanitize: true,
-        logWarnings: true,
     });
-    // Early return for invalid data with error message
-    if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2", children: ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
-                        "Unable to render chart due to data validation errors" }), process.env.NODE_ENV === "development" &&
-                    validation.errors.length > 1 && (jsxs("details", { className: "text-xs text-warning-500", children: [jsxs("summary", { className: "cursor-pointer", children: ["Show all errors (", validation.errors.length, ")"] }), jsx("ul", { className: "mt-2 text-left", children: validation.errors.map((error, index) => (jsxs("li", { children: ["\u2022 ", error.message] }, index))) })] }))] }));
-    }
-    // Early return for empty data
-    if (!sanitizedData || sanitizedData.length === 0) {
-        return (jsx("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty bar chart", ...props, children: jsx("span", { children: "No data available" }) }));
-    }
-    // Simple color functions based on direct CSS variables (following guidelines)
-    const getSeriesFillColor = (index) => {
-        const defaultColors = [
-            "var(--color-primary)",
-            "var(--color-warning)",
-            "var(--color-success)",
-            "var(--color-danger)",
-        ];
-        // Use custom colors if provided, otherwise fall back to defaults
-        const palette = colors && colors.length > 0 ? colors : defaultColors;
-        return palette[index % palette.length];
+    const getSeriesFillColor = (index, key) => {
+        var _a, _b;
+        const themedColors = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.baseStyle) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.series;
+        const palette = colors && colors.length > 0
+            ? colors
+            : themedColors && themedColors.length > 0
+                ? themedColors
+                : chartTheme.baseStyle.colors.series;
+        return resolveSeriesColor(index, key, config, palette);
     };
+    const resolvedLegendPosition = resolveLegendPosition(legend, config);
+    const legendItems = Object.keys(config).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),
+        });
+    });
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    // Bars must not mount before the real container size is known (cold-load bug:
+    // motion captures geometry in the 600×400 fallback space, so the entrance
+    // animation rises from below the real baseline). `measured` gates the mount.
+    const { dimensions, measured } = useChartDimensions(containerRef);
     const [hoveredCategory, setHoveredCategory] = useState(null);
     // Detect if device is mobile/touch
     const isMobile = typeof window !== "undefined" &&
@@ -129,50 +140,28 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
         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();
-        };
-    }, []);
     // Calculate dimensions with safe math
     const margin = useMemo(() => ({
         top: 15,
         right: showYAxis ? 20 : 0,
-        bottom: showXAxis ? 20 : 0,
+        bottom: showXAxis ? X_AXIS_MARGIN : 0,
         left: showYAxis ? 60 : 0,
     }), [showYAxis, showXAxis]);
     const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
     const innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
     // Get all data keys from config
     const dataKeys = useMemo(() => Object.keys(config || {}), [config]);
-    // Animation timing constant
-    const BAR_STAGGER = 0.05;
-    // Calculate safe scale range
+    // Calculate safe scale range. `safeMath`/`safeScale` tolerate empty/invalid
+    // data by design (they return neutral fallbacks, never throw), so it's safe
+    // to compute this — and every hook below it — unconditionally, regardless of
+    // whether `isValid`/`hasValidData` end up true. The actual branch on those
+    // flags happens once, after all hooks, right before the JSX return.
     const scaleRange = safeScale.calculateRange({
         minValue: propMinValue,
         maxValue: propMaxValue,
         includeZero: true,
     });
     const { min: minValue, max: maxValue, hasValidData } = scaleRange;
-    // If no valid data, show empty state
-    if (!hasValidData) {
-        return (jsx("div", { className: cn("chart-container flex items-center justify-center text-neutral-500", className), role: "img", "aria-label": "Empty bar chart - no valid data", ...props, children: jsx("span", { children: "No valid numeric data available" }) }));
-    }
     // Safe bar width calculations
     const totalCategoryGap = Math.max(0, (sanitizedData.length - 1) * categoryGap);
     const availableWidth = Math.max(0, innerWidth - totalCategoryGap);
@@ -182,7 +171,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
     const individualBarWidth = safeMath.divide(availableBarWidth, dataKeys.length, 0);
     // Handle keyboard focus tooltips
     useEffect(() => {
-        var _a, _b;
+        var _a;
         if (isKeyboardMode &&
             focusedElementIndex >= 0 &&
             focusedElementIndex < sanitizedData.length) {
@@ -201,7 +190,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                     const isNeg = value < 0;
                     const y = isNeg ? zeroY : zeroY - barHeight;
                     // Get the fill color for the first series (index 0)
-                    const fillColor = getSeriesFillColor(0);
+                    const fillColor = getSeriesFillColor(0, key);
                     const content = {
                         category: item.name || `Category ${focusedElementIndex + 1}`,
                         series: [
@@ -209,7 +198,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                                 key,
                                 label: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key,
                                 value: value,
-                                color: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || fillColor,
+                                color: fillColor,
                             },
                         ],
                     };
@@ -278,11 +267,16 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
             rawValue === undefined ||
             (typeof rawValue === "number" && !isFinite(rawValue));
         // Get fill color for this data series using direct CSS variables
-        const fillColor = getSeriesFillColor(keyIndex);
+        const fillColor = getSeriesFillColor(keyIndex, key);
         const isHovered = hoveredCategory === index;
         const isAnyBarHovered = hoveredCategory !== null;
-        const shouldReduceOpacity = isAnyBarHovered && !isHovered;
         const isFocused = isKeyboardMode && focusedElementIndex === index;
+        const { isEmphasized, shouldReduceOpacity } = deriveBarEmphasis({
+            isHovered,
+            isFocused,
+            isAnyBarHovered,
+            isGradientVariant,
+        });
         // Handle null bars - either skip or show placeholder
         if (isNull) {
             if (!showPlaceholderBars) {
@@ -313,21 +307,16 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 placeholderY = margin.top + innerHeight - placeholderHeight;
             }
             const pathD = createRoundedTopBarPath(barX, placeholderY, individualBarWidth, placeholderHeight, resolvedBarRadius);
-            const delay = (index * dataKeys.length + keyIndex) * BAR_STAGGER;
+            const delay = (index * dataKeys.length + keyIndex) * BAR_GROUP_STAGGER;
             return (jsx(motion.path, { d: pathD, initial: shouldAnimate && showAnimation && !shouldReduceMotion
                     ? { scaleY: 0, opacity: 0 }
                     : { scaleY: 1, opacity: 1 }, animate: {
                     scaleY: 1,
                     opacity: 1,
-                }, transition: {
-                    type: "spring",
-                    stiffness: 100,
-                    damping: 20,
-                    delay,
-                }, className: "transition-opacity duration-200", style: {
+                }, transition: { ...BAR_SPRING, delay }, className: "transition-opacity duration-200", style: {
                     originY: 1,
                     transformOrigin: "bottom",
-                    fill: "url(#diagonalHatch)",
+                    fill: `url(#${hatchPatternId})`,
                     opacity: 0.75,
                 }, "aria-label": `${item.name || `Category ${index + 1}`} - ${((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key}: No data` }, keyIndex));
         }
@@ -338,123 +327,169 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
         const pathD = isNegative
             ? createRoundedBottomBarPath(barX, barY, individualBarWidth, barHeight, resolvedBarRadius)
             : createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, resolvedBarRadius);
-        const delay = (index * dataKeys.length + keyIndex) * BAR_STAGGER;
-        return (jsx(motion.path, { d: pathD, initial: shouldAnimate && showAnimation && !shouldReduceMotion
-                ? { scaleY: 0, opacity: 0 }
-                : { scaleY: 1, opacity: 1 }, animate: {
-                scaleY: 1,
-                opacity: 1,
-            }, transition: {
-                type: "spring",
-                stiffness: 100,
-                damping: 20,
-                delay,
-            }, className: cn("transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
-                originY: isNegative ? 0 : 1,
-                transformOrigin: isNegative ? "top" : "bottom",
-                fill: isNull
-                    ? "var(--color-background-tertiary)"
-                    : shouldReduceOpacity
-                        ? "var(--color-background-tertiary)"
-                        : fillColor,
-                opacity: !isNull && shouldReduceOpacity ? 0.9 : 1,
-                stroke: isFocused ? "var(--color-primary)" : "none",
-            }, onMouseEnter: !isNull
-                ? (e) => {
-                    setHoveredCategory(index);
-                    // Create content with ALL series for this category
-                    const series = dataKeys
-                        .map((dataKey, idx) => {
-                        var _a, _b;
-                        const seriesValue = item[dataKey];
-                        const isSeriesNull = seriesValue === null ||
-                            seriesValue === undefined ||
-                            (typeof seriesValue === "number" &&
-                                !isFinite(seriesValue));
-                        return {
-                            key: dataKey,
-                            label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
-                            value: isSeriesNull ? 0 : seriesValue,
-                            color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
-                        };
-                    })
-                        .filter((series) => {
-                        // Only include non-null and non-zero values in tooltip
-                        const rawVal = item[series.key];
-                        return (rawVal != null &&
-                            typeof rawVal === "number" &&
-                            isFinite(rawVal) &&
-                            rawVal !== 0);
-                    });
-                    const content = {
-                        category: item.name || `Category ${index + 1}`,
-                        series,
-                    };
-                    const svgCoordinates = {
-                        x: barX + individualBarWidth / 2,
-                        y: barY,
-                        dimensions,
-                    };
-                    handleMouseEnter(e, content, svgCoordinates);
-                }
-                : undefined, onMouseMove: !isNull
-                ? (e) => {
-                    if (hoveredCategory === index) {
-                        const svgCoordinates = {
-                            x: barX + individualBarWidth / 2,
-                            y: barY,
-                            dimensions,
-                        };
-                        handleMouseMove(e, svgCoordinates);
-                    }
-                }
-                : undefined, onMouseLeave: !isNull
-                ? () => {
-                    setHoveredCategory(null);
-                    handleMouseLeave();
-                }
-                : undefined }, keyIndex));
+        const delay = (index * dataKeys.length + keyIndex) * BAR_GROUP_STAGGER;
+        const gradientFill = `url(#${getBarGradientId(keyIndex)})`;
+        const shadowFilter = `url(#${getBarShadowId(keyIndex)})`;
+        const ringFilter = `url(#${getBarRingId(keyIndex)})`;
+        const commonInitial = shouldAnimate && showAnimation && !shouldReduceMotion
+            ? { scaleY: 0, opacity: 0 }
+            : { scaleY: 1, opacity: 1 };
+        // Spring grow + delayed mount-fade / instant hover-dim opacity. The opacity
+        // contract (mount fade waits out the stagger so a scaleY≈0 bar isn't a
+        // glowing stub; hover dims respond instantly once `hasAnimated`) lives in
+        // the shared helper.
+        const commonTransition = barEntranceTransition(delay, hasAnimated);
+        return (jsxs(React__default.Fragment, { children: [jsx(BarGlowRing, { show: isEmphasized, pathD: pathD, color: fillColor, barWidth: individualBarWidth, filter: ringFilter }), jsx(motion.path, { d: pathD, initial: commonInitial, animate: {
+                        scaleY: 1,
+                        // Hover dim lives in `animate`, not `style`: motion.path freezes
+                        // plain style values at mount and ignores re-render changes
+                        opacity: barDimOpacity(shouldReduceOpacity, isGradientVariant),
+                    }, transition: commonTransition, className: cn(isGradientVariant
+                        ? "transition-all duration-300 ease-out"
+                        : "transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
+                        originY: isNegative ? 0 : 1,
+                        transformOrigin: isNegative ? "top" : "bottom",
+                        fill: barFill({
+                            isGradientVariant,
+                            gradientFill,
+                            isNull,
+                            shouldReduceOpacity,
+                            fillColor,
+                        }),
+                        // Element opacity applies post-filter, so the animated hover dim
+                        // fades the shadow along with the bar — no need to toggle it here
+                        filter: isGradientVariant ? shadowFilter : undefined,
+                        ...barStrokeStyle({
+                            isFocused,
+                            isEmphasized,
+                            isGradientVariant,
+                            fillColor,
+                        }),
+                        strokeLinejoin: "round",
+                        vectorEffect: "non-scaling-stroke",
+                    }, onMouseEnter: !isNull
+                        ? (e) => {
+                            setHoveredCategory(index);
+                            // Create content with ALL series for this category
+                            const series = dataKeys
+                                .map((dataKey, idx) => {
+                                var _a;
+                                const seriesValue = item[dataKey];
+                                const isSeriesNull = seriesValue === null ||
+                                    seriesValue === undefined ||
+                                    (typeof seriesValue === "number" &&
+                                        !isFinite(seriesValue));
+                                return {
+                                    key: dataKey,
+                                    label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
+                                    value: isSeriesNull ? 0 : seriesValue,
+                                    color: getSeriesFillColor(idx, dataKey),
+                                };
+                            })
+                                .filter((series) => {
+                                // Only include non-null and non-zero values in tooltip
+                                const rawVal = item[series.key];
+                                return (rawVal != null &&
+                                    typeof rawVal === "number" &&
+                                    isFinite(rawVal) &&
+                                    rawVal !== 0);
+                            });
+                            const content = {
+                                category: item.name || `Category ${index + 1}`,
+                                series,
+                            };
+                            const svgCoordinates = {
+                                x: barX + individualBarWidth / 2,
+                                y: barY,
+                                dimensions,
+                            };
+                            handleMouseEnter(e, content, svgCoordinates);
+                        }
+                        : undefined, onMouseMove: !isNull
+                        ? (e) => {
+                            if (hoveredCategory === index) {
+                                const svgCoordinates = {
+                                    x: barX + individualBarWidth / 2,
+                                    y: barY,
+                                    dimensions,
+                                };
+                                handleMouseMove(e, svgCoordinates);
+                            }
+                        }
+                        : undefined, onMouseLeave: !isNull
+                        ? () => {
+                            setHoveredCategory(null);
+                            handleMouseLeave();
+                        }
+                        : undefined })] }, keyIndex));
     };
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", darkMode && "dark", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings
+    // --- 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 data (a common loading-state
+    // transition) never changes its hook count mid-lifetime. See react.dev's
+    // Rules of Hooks: "move it before the return."
+    // Invalid data: show an error message
+    if (!isValid) {
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-[var(--color-border)] rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(Warning, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
+                        "Unable to render chart due to data validation errors" }), process.env.NODE_ENV === "development" &&
+                    validation.errors.length > 1 && (jsxs("details", { className: "text-sm text-warning-500", children: [jsxs("summary", { className: "cursor-pointer", children: ["Show all errors (", validation.errors.length, ")"] }), jsx("ul", { className: "mt-2 text-left", children: validation.errors.map((error, index) => (jsxs("li", { children: ["\u2022 ", error.message] }, index))) })] }))] }));
+    }
+    // Empty data: nothing to plot
+    if (!sanitizedData || sanitizedData.length === 0) {
+        return (jsx("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty bar chart", ...props, children: jsx("span", { children: "No data available" }) }));
+    }
+    // Data present but nothing numeric to scale against
+    if (!hasValidData) {
+        return (jsx("div", { className: cn("chart-container flex items-center justify-center text-neutral-500", className), role: "img", "aria-label": "Empty bar chart - no valid data", ...props, children: jsx("span", { children: "No valid numeric data available" }) }));
+    }
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full flex flex-col", darkMode && "dark", 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, ...props, children: [resolvedLegendPosition === "top" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pb-2" })), descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings
                                 .filter((warning) => !warning.message.includes("has no valid numeric values"))
-                                .map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) }), validation.warnings.some((warning) => warning.message.includes("has no valid numeric values")) && (jsx("div", { className: "mt-2 pt-2 border-t border-[var(--color-warning-200)]", children: jsx("span", { className: "text-[var(--color-warning)]", children: "\u2139\uFE0F Null/undefined values are handled by using averages from other data points" }) }))] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx("defs", { children: jsxs("pattern", { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [jsx("rect", { width: "8", height: "8", fill: "var(--color-neutral-50)" }), jsx("path", { d: "M-2,2 l4,-4\n                   M0,8 l8,-8\n                   M6,10 l4,-4", style: { stroke: "black", strokeWidth: 4, opacity: 0.1 } })] }) }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), 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-bars", children: (() => {
-                                // Calculate the zero baseline position (where value=0 maps to in pixel space)
-                                const range = maxValue - minValue;
-                                const scaledZero = range > 0
-                                    ? safeMath.scale(0, minValue, maxValue, 0, innerHeight)
-                                    : 0;
-                                const zeroY = margin.top + innerHeight - scaledZero;
-                                return sanitizedData.map((item, index) => {
-                                    const x = margin.left + index * (barWidth + categoryGap);
-                                    return (jsx("g", { children: dataKeys.map((key, keyIndex) => {
-                                            const rawValue = item[key];
-                                            const value = typeof rawValue === "number" && isFinite(rawValue)
-                                                ? rawValue
-                                                : 0;
-                                            const isNull = rawValue === null ||
-                                                rawValue === undefined ||
-                                                (typeof rawValue === "number" && !isFinite(rawValue));
-                                            // For null values, use the average of non-null values
-                                            const actualValue = isNull
-                                                ? calculateAverageForKey(sanitizedData, key, safeMath.divide)
-                                                : value;
-                                            const scaledValue = range > 0
-                                                ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight)
-                                                : 0;
-                                            const barHeight = Math.abs(scaledValue - scaledZero);
-                                            const isNeg = actualValue < 0;
-                                            const barX = x + keyIndex * (individualBarWidth + gap);
-                                            // Positive: bar extends upward from zero baseline
-                                            // Negative: bar extends downward from zero baseline
-                                            const barY = isNeg ? zeroY : zeroY - barHeight;
-                                            return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true, isNeg);
-                                        }) }, index));
-                                });
-                            })() }), jsx(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })] }), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
+                                .map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) }), validation.warnings.some((warning) => warning.message.includes("has no valid numeric values")) && (jsx("div", { className: "mt-2 pt-2 border-t border-[var(--color-warning-200)]", children: jsx("span", { className: "text-[var(--color-warning)]", children: "\u2139\uFE0F Null/undefined values are handled by using averages from other data points" }) }))] })), jsx("div", { className: "relative flex-1 min-h-0", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, style: { overflow: isGradientVariant ? "visible" : undefined }, children: [jsxs("defs", { children: [jsxs("pattern", { id: hatchPatternId, patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [jsx("rect", { width: "8", height: "8", fill: "var(--color-mono-50)" }), jsx("path", { d: "M-2,2 l4,-4\n                   M0,8 l8,-8\n                   M6,10 l4,-4", style: { stroke: "black", strokeWidth: 4, opacity: 0.1 } })] }), isGradientVariant &&
+                                        dataKeys.map((key, index) => {
+                                            const color = getSeriesFillColor(index, key);
+                                            return (jsx(BarSeriesDefs, { gradientId: getBarGradientId(index), shadowId: getBarShadowId(index), ringId: getBarRingId(index), color: color }, key));
+                                        })] }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), 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-bars", children: measured &&
+                                    (() => {
+                                        // Calculate the zero baseline position (where value=0 maps to in pixel space)
+                                        const range = maxValue - minValue;
+                                        const scaledZero = range > 0
+                                            ? safeMath.scale(0, minValue, maxValue, 0, innerHeight)
+                                            : 0;
+                                        const zeroY = margin.top + innerHeight - scaledZero;
+                                        return sanitizedData.map((item, index) => {
+                                            const x = margin.left + index * (barWidth + categoryGap);
+                                            return (jsx("g", { children: dataKeys.map((key, keyIndex) => {
+                                                    const rawValue = item[key];
+                                                    const value = typeof rawValue === "number" && isFinite(rawValue)
+                                                        ? rawValue
+                                                        : 0;
+                                                    const isNull = rawValue === null ||
+                                                        rawValue === undefined ||
+                                                        (typeof rawValue === "number" && !isFinite(rawValue));
+                                                    // For null values, use the average of non-null values
+                                                    const actualValue = isNull
+                                                        ? calculateAverageForKey(sanitizedData, key, safeMath.divide)
+                                                        : value;
+                                                    const scaledValue = range > 0
+                                                        ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight)
+                                                        : 0;
+                                                    const barHeight = Math.abs(scaledValue - scaledZero);
+                                                    const isNeg = actualValue < 0;
+                                                    const barX = x + keyIndex * (individualBarWidth + gap);
+                                                    // Positive: bar extends upward from zero baseline
+                                                    // Negative: bar extends downward from zero baseline
+                                                    const barY = isNeg ? zeroY : zeroY - barHeight;
+                                                    return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true, isNeg);
+                                                }) }, index));
+                                        });
+                                    })() }), jsx(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })] }) }), resolvedLegendPosition === "bottom" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pt-2" })), 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 } }), children] }) }));
 };