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

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

@@ -1,4 +1,4 @@
-import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, ChartConfig } from '../types/chart.types';
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, ChartConfig, ChartVariant } from '../types/chart.types';
 /**
  * Series type for combo chart
  */
@@ -18,7 +18,7 @@ export interface ComboChartConfig extends ChartConfig {
 /**
  * ComboChart props - extends standard chart interfaces
  */
-export interface ComboChartProps extends BaseChartProps, StandardChartDisplayProps, Omit<StandardVisualProps, 'curved' | 'curveType' | 'showDots'> {
+export interface ComboChartProps extends BaseChartProps, StandardChartDisplayProps, Omit<StandardVisualProps, 'curved' | 'curveType' | 'showDots' | 'fillOpacity' | 'showStroke'> {
     config: ComboChartConfig;
     curved?: boolean;
     curveType?: 'linear' | 'monotone';
@@ -27,25 +27,27 @@ export interface ComboChartProps extends BaseChartProps, StandardChartDisplayPro
     showDualAxis?: boolean;
     showValidationWarnings?: boolean;
 }
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — the spread pulled in a
+ * default for every other chart's props, so this object advertised values ComboChart
+ * never reads. List only what the component actually consumes.
+ */
 export declare const COMBO_CHART_DEFAULTS: {
-    readonly barRadius: 32;
-    readonly dotRadius: 4;
-    readonly categoryGap: 16;
-    readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
-    readonly showDots: true;
-    readonly showDualAxis: false;
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
-    readonly cellRadius: 4;
-    readonly radius: 20;
+    readonly enableKeyboardNavigation: true;
     readonly strokeWidth: 2;
     readonly gap: 4;
-    readonly fillOpacity: 0.3;
-    readonly showStroke: true;
-    readonly orientation: "vertical" | "horizontal";
     readonly stacked: false;
-    readonly variant: import("../types/chart.types").ChartVariant;
-    readonly enableKeyboardNavigation: true;
+    readonly barRadius: 32;
+    readonly dotRadius: 3;
+    readonly categoryGap: 16;
+    readonly curved: true;
+    readonly curveType: import("..").CurveType;
+    readonly showDots: false;
+    readonly showDualAxis: false;
+    readonly variant: ChartVariant;
 };

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

@@ -1,8 +1,20 @@
 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` — the spread pulled in a
+ * default for every other chart's props, so this object advertised values ComboChart
+ * never reads. List only what the component actually consumes.
+ */
 const COMBO_CHART_DEFAULTS = {
-    ...CHART_DEFAULTS,
+    showGrid: CHART_DEFAULTS.showGrid,
+    showXAxis: CHART_DEFAULTS.showXAxis,
+    showYAxis: CHART_DEFAULTS.showYAxis,
+    enableKeyboardNavigation: CHART_DEFAULTS.enableKeyboardNavigation,
+    strokeWidth: CHART_DEFAULTS.strokeWidth,
+    gap: CHART_DEFAULTS.gap,
+    stacked: CHART_DEFAULTS.stacked,
     barRadius: CHART_DEFAULTS.barRadius, // 24 - For bar corners
     dotRadius: CHART_DEFAULTS.dotRadius, // 20 - For line markers
     categoryGap: CHART_DEFAULTS.categoryGap,
@@ -10,6 +22,10 @@ const COMBO_CHART_DEFAULTS = {
     curveType: CHART_DEFAULTS.curveType,
     showDots: CHART_DEFAULTS.showDots,
     showDualAxis: false,
+    // ComboChart's bar series render via the shared BarRenderer, which defaults
+    // to the gradient (premium) look — matching BarChart/StackedBarChart/AreaChart
+    // (CLAUDE.md §19). Pass variant="default" for flat bar fills.
+    variant: 'gradient',
 };
 
 export { COMBO_CHART_DEFAULTS };

package/dist/components/charts/ComboChart/ComboChartCanvas.d.ts

@@ -0,0 +1,98 @@
+import React from "react";
+import { useTooltipPosition } from "../hooks/useTooltipPosition";
+import type { ComboChartCanvasProps, ChartDimensions, ChartMargins } from "./ComboChartCanvas.types";
+import type { ChartScales } from "../hooks/useChartScales";
+import type { ChartDataPoint, ChartConfig } from "../types/chart.types";
+/**
+ * Chart context for sharing state between ComboChartCanvas and its renderers
+ * (BarRenderer, LineRenderer). ComboChart-only — not a general chart context;
+ * every other chart type renders its own div/svg directly (see CLAUDE.md §19).
+ */
+export interface ComboChartContextValue {
+    /**
+     * Chart data
+     */
+    data: ChartDataPoint[];
+    /**
+     * Chart config
+     */
+    config: ChartConfig;
+    /**
+     * Calculated scales
+     */
+    scales: ChartScales;
+    /**
+     * Chart dimensions
+     */
+    dimensions: ChartDimensions;
+    /**
+     * `true` once the container has a real measured size. Gate mount animations
+     * (rising bars/lines, scale-in dots) on this so motion captures geometry in
+     * the final coordinate space, not the 600×400 fallback (CLAUDE.md §19).
+     */
+    measured: boolean;
+    /**
+     * Chart margins
+     */
+    margin: ChartMargins;
+    /**
+     * Inner width (width - margins)
+     */
+    innerWidth: number;
+    /**
+     * Inner height (height - margins)
+     */
+    innerHeight: number;
+    /**
+     * Hovered category index
+     */
+    hoveredCategory: number | null;
+    /**
+     * Set hovered category
+     */
+    setHoveredCategory: (index: number | null) => void;
+    /**
+     * Hovered point (for line charts)
+     */
+    hoveredPoint: {
+        index: number;
+        key: string;
+    } | null;
+    /**
+     * Set hovered point
+     */
+    setHoveredPoint: (point: {
+        index: number;
+        key: string;
+    } | null) => void;
+    /**
+     * Tooltip handlers
+     */
+    handleMouseEnter: ReturnType<typeof useTooltipPosition>['handleMouseEnter'];
+    handleMouseMove: ReturnType<typeof useTooltipPosition>['handleMouseMove'];
+    handleMouseLeave: ReturnType<typeof useTooltipPosition>['handleMouseLeave'];
+    /**
+     * Keyboard focus index
+     */
+    focusedElementIndex: number;
+    /**
+     * Whether in keyboard navigation mode
+     */
+    isKeyboardMode: boolean;
+}
+/**
+ * Hook to access chart context from renderers
+ */
+export declare const useComboChartContext: () => ComboChartContextValue;
+/**
+ * ComboChartCanvas
+ *
+ * ComboChart's own SVG canvas — manages the SVG, axes, grid, tooltip,
+ * dimensions, and provides context to its rendering components (BarRenderer,
+ * LineRenderer). This is not general chart infrastructure: every other chart
+ * type renders its own div/svg directly and measures itself independently
+ * (CLAUDE.md §19) — this exists specifically so a bar series and a line
+ * series can share one coordinate space (scales/margins/dimensions) in the
+ * same chart.
+ */
+export declare const ComboChartCanvas: React.FC<ComboChartCanvasProps>;

package/dist/components/charts/{shared/ChartContainer/ChartContainer.js → ComboChart/ComboChartCanvas.js}

@@ -1,22 +1,24 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useRef, useState, useEffect, useMemo, useCallback, useContext } from 'react';
-import { cn } from '../../../../utils/cn.js';
-import { useTooltipPosition } from '../../hooks/useTooltipPosition.js';
-import { useChartAccessibility } from '../../hooks/useChartAccessibility.js';
-import { ChartErrorBoundary } from '../ChartErrorBoundary/ChartErrorBoundary.js';
-import { XAxis } from '../ChartAxis/XAxis.js';
-import { YAxis } from '../ChartAxis/YAxis.js';
-import { HorizontalGrid } from '../ChartGrid/HorizontalGrid.js';
-import { ChartTooltip } from '../ChartTooltip/ChartTooltip.js';
+import { createContext, useRef, useState, useMemo, useCallback, useContext } from '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 { 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';
 
-const ChartContext = createContext(null);
+const ComboChartContext = createContext(null);
 /**
  * Hook to access chart context from renderers
  */
-const useChartContext = () => {
-    const context = useContext(ChartContext);
+const useComboChartContext = () => {
+    const context = useContext(ComboChartContext);
     if (!context) {
-        throw new Error('useChartContext must be used within a ChartContainer');
+        throw new Error('useComboChartContext must be used within a ComboChartCanvas');
     }
     return context;
 };
@@ -29,15 +31,26 @@ const defaultYAxisTickFormatter = (value) => {
     return value.toString();
 };
 /**
- * ChartContainer Component
+ * ComboChartCanvas
  *
- * Manages SVG container, axes, grid, tooltip, dimensions, and provides
- * context to child rendering components (BarRenderer, LineRenderer, etc.)
+ * ComboChart's own SVG canvas — manages the SVG, axes, grid, tooltip,
+ * dimensions, and provides context to its rendering components (BarRenderer,
+ * LineRenderer). This is not general chart infrastructure: every other chart
+ * type renders its own div/svg directly and measures itself independently
+ * (CLAUDE.md §19) — this exists specifically so a bar series and a line
+ * series can share one coordinate space (scales/margins/dimensions) in the
+ * same chart.
  */
-const ChartContainer = ({ children, data, config, scales, dimensions: propDimensions, margins: propMargins, showGrid = true, showXAxis = true, showYAxis = true, gridLineCount = 5, yAxisTickFormatter = defaultYAxisTickFormatter, categoryWidth, categoryGap = 8, className, title, description, enableKeyboardNavigation = true, chartType = 'bar', ...props }) => {
+const ComboChartCanvas = ({ children, data, config, scales, dimensions: propDimensions, margins: propMargins, showGrid = true, showXAxis = true, showYAxis = true, gridLineCount = 5, yAxisTickFormatter = defaultYAxisTickFormatter, categoryWidth, categoryGap = 8, className, title, description, enableKeyboardNavigation = true, chartType = 'bar', legendTop, legendBottom, width, height, ...props }) => {
     var _a;
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState(propDimensions || { width: 600, height: 400 });
+    // Shared measurement: seeds a 600×400 fallback and corrects in a layout effect,
+    // exposing `measured` so animated children (bars rising, lines/dots) mount only
+    // in the final coordinate space — no cold-load-from-fallback frame (CLAUDE.md §19).
+    // A caller-supplied `dimensions` prop overrides and counts as measured.
+    const { dimensions: autoDimensions, measured: autoMeasured } = useChartDimensions(containerRef);
+    const dimensions = propDimensions !== null && propDimensions !== void 0 ? propDimensions : autoDimensions;
+    const measured = propDimensions ? true : autoMeasured;
     const [hoveredCategory, setHoveredCategory] = useState(null);
     const [hoveredPoint, setHoveredPoint] = useState(null);
     // Detect if device is mobile/touch
@@ -57,30 +70,6 @@ const ChartContainer = ({ children, data, config, scales, dimensions: propDimens
         description,
         enableKeyboardNavigation,
     });
-    // Measure container dimensions
-    useEffect(() => {
-        if (propDimensions) {
-            setDimensions(propDimensions);
-            return;
-        }
-        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();
-        };
-    }, [propDimensions]);
     // Calculate margins (can be overridden by prop)
     const margin = useMemo(() => propMargins || {
         top: 15,
@@ -149,6 +138,7 @@ const ChartContainer = ({ children, data, config, scales, dimensions: propDimens
         config,
         scales: adjustedScales,
         dimensions,
+        measured,
         margin,
         innerWidth,
         innerHeight,
@@ -166,6 +156,7 @@ const ChartContainer = ({ children, data, config, scales, dimensions: propDimens
         config,
         adjustedScales,
         dimensions,
+        measured,
         margin,
         innerWidth,
         innerHeight,
@@ -177,9 +168,15 @@ const ChartContainer = ({ children, data, config, scales, dimensions: propDimens
         focusedElementIndex,
         isKeyboardMode,
     ]);
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsx(ChartContext.Provider, { value: contextValue, children: 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}`, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: gridLineCount }), jsx(YAxis, { show: showYAxis, min: adjustedScales.y.min, max: adjustedScales.y.max, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: yAxisTickFormatter }), adjustedScales.y.min < 0 && adjustedScales.y.max > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), children, jsx(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: resolvedCategoryWidth, categoryGap: categoryGap })] }), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsx(ComboChartContext.Provider, { value: contextValue, children: 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, ...props, children: [legendTop, 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}`, 
+                            // Let gradient-bar drop shadows / hover glow rings paint past the
+                            // plot edges instead of being clipped (matches BarChart).
+                            style: { overflow: "visible" }, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: gridLineCount }), jsx(YAxis, { show: showYAxis, min: adjustedScales.y.min, max: adjustedScales.y.max, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: yAxisTickFormatter }), adjustedScales.y.min < 0 && adjustedScales.y.max > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - adjustedScales.y.min) / (adjustedScales.y.max - adjustedScales.y.min)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), children, jsx(XAxis, { show: showXAxis, data: data, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: resolvedCategoryWidth, categoryGap: categoryGap })] }) }), legendBottom, 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 } })] }) }) }));
 };
 
-export { ChartContainer, useChartContext };
+export { ComboChartCanvas, useComboChartContext };

package/dist/components/charts/{shared/ChartContainer/ChartContainer.types.d.ts → ComboChart/ComboChartCanvas.types.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import type { ChartDataPoint, ChartConfig } from '../../types/chart.types';
-import type { ChartScales } from '../../hooks/useChartScales';
+import type { ChartDataPoint, ChartConfig } from '../types/chart.types';
+import type { ChartScales } from '../hooks/useChartScales';
 export interface ChartDimensions {
     width: number;
     height: number;
@@ -11,7 +11,7 @@ export interface ChartMargins {
     bottom: number;
     left: number;
 }
-export interface ChartContainerProps {
+export interface ComboChartCanvasProps {
     /**
      * Child components to render within the chart (BarRenderer, LineRenderer, etc.)
      */
@@ -68,6 +68,16 @@ export interface ChartContainerProps {
      * Additional CSS class name
      */
     className?: string;
+    /**
+     * Explicit CSS size, applied as an inline style on the outer container.
+     * Without one of these, the container's height is indeterminate (`h-full`
+     * with no sized ancestor resolves to `auto`), which — combined with the
+     * SVG's own percentage height — is a circular sizing dependency: each
+     * ResizeObserver tick can measure a taller box than the last, growing
+     * without bound. A definite height here breaks that loop.
+     */
+    width?: string | number;
+    height?: string | number;
     /**
      * Chart title for accessibility
      */
@@ -84,6 +94,16 @@ export interface ChartContainerProps {
      * Chart type (affects margin calculations and axis rendering)
      */
     chartType?: 'bar' | 'line' | 'combo';
+    /**
+     * Optional legend rendered before the SVG. The container is always a flex
+     * column with the SVG in a shrinkable `flex-1` box, so with both slots
+     * empty, layout is the same as a plain full-height SVG.
+     */
+    legendTop?: ReactNode;
+    /**
+     * Optional legend rendered after the SVG (see `legendTop`).
+     */
+    legendBottom?: ReactNode;
     /**
      * Additional props to pass to container div
      */

package/dist/components/charts/{shared/LineRenderer → ComboChart}/LineRenderer.d.ts

@@ -3,7 +3,9 @@ import type { LineRendererProps } from "./LineRenderer.types";
 /**
  * LineRenderer Component
  *
- * Pure line rendering component that can be used standalone or within ChartContainer.
+ * ComboChart's line-drawing component. Standalone LineChart has its own,
+ * separate line-rendering implementation — this one exists so a line series
+ * can share one coordinate space with a bar series inside ComboChartCanvas.
  * Handles line paths, data points, and crosshair rendering.
  */
 export declare const LineRenderer: React.FC<LineRendererProps>;

package/dist/components/charts/{shared/LineRenderer → ComboChart}/LineRenderer.js

@@ -1,41 +1,55 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useCallback, useMemo } from 'react';
-import { cn } from '../../../../utils/cn.js';
-import { ChartMarker } from '../ChartMarker/ChartMarker.js';
-import { ChartCrosshair } from '../ChartCrosshair/ChartCrosshair.js';
-import { generateCurvePath } from '../../utils/path-utils.js';
+import { useMemo, useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
+import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
+import { generateCurvePath } from '../utils/path-utils.js';
+import { RISE_FROM_BASELINE, riseTransition, SCALE_FROM_CENTER, dotEntranceTransition } from '../utils/animation-utils.js';
 
 /**
- * Get series color class
+ * Get series color class.
+ * Fallback only — ComboChart always resolves a real color onto each series'
+ * config before it reaches this renderer (see ComboChart.tsx).
  */
 const getSeriesColorClass = (index) => {
     const colors = [
-        "stroke-[var(--color-primary)]",
-        "stroke-[var(--color-warning)]",
-        "stroke-[var(--color-success)]",
-        "stroke-[var(--color-danger)]",
+        "stroke-[var(--color-chart-1)]",
+        "stroke-[var(--color-chart-2)]",
+        "stroke-[var(--color-chart-3)]",
+        "stroke-[var(--color-chart-4)]",
+        "stroke-[var(--color-chart-5)]",
     ];
     return colors[index % colors.length];
 };
 /**
- * Get color value for SVG elements and tooltips
+ * Get color value for SVG elements and tooltips.
+ * Fallback only — see getSeriesColorClass above.
  */
 const getSeriesFillColor = (index) => {
     const colorVars = [
-        "var(--color-primary)",
-        "var(--color-warning)",
-        "var(--color-success)",
-        "var(--color-danger)",
+        "var(--color-chart-1)",
+        "var(--color-chart-2)",
+        "var(--color-chart-3)",
+        "var(--color-chart-4)",
+        "var(--color-chart-5)",
     ];
     return colorVars[index % colorVars.length];
 };
 /**
  * LineRenderer Component
  *
- * Pure line rendering component that can be used standalone or within ChartContainer.
+ * ComboChart's line-drawing component. Standalone LineChart has its own,
+ * separate line-rendering implementation — this one exists so a line series
+ * can share one coordinate space with a bar series inside ComboChartCanvas.
  * Handles line paths, data points, and crosshair rendering.
  */
-const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth = 2, curved = true, curveType = "monotone", showDots = true, radius = 4, hoveredPoint: externalHoveredPoint, onHoverPoint, onMouseEnter, onMouseMove, onMouseLeave, focusedElementIndex = -1, isKeyboardMode = false, className, }) => {
+const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth = 2, curved = true, curveType = "monotone", showDots = true, radius = 4, measured = true, hoveredPoint: externalHoveredPoint, onHoverPoint, onMouseEnter, onMouseMove, onMouseLeave, focusedElementIndex = -1, isKeyboardMode = false, className, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    // Re-keys the rise/dot animation so it replays whenever the data changes
+    // (mirrors LineChart). Timing/feel come from the shared chart animation module.
+    const dataSignature = useMemo(() => JSON.stringify(data), [data]);
     // Get all data keys from config
     const dataKeys = Object.keys(config || {});
     // Calculate inner dimensions
@@ -90,7 +104,9 @@ const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth =
             const customColor = (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.color;
             const fallbackClass = getSeriesColorClass(keyIndex);
             const appliedColorClass = customColor ? undefined : fallbackClass;
-            return (jsxs("g", { children: [jsx("path", { d: targetPath, fill: "none", strokeWidth: strokeWidth, strokeLinecap: "round", className: cn("transition-all duration-200", appliedColorClass), stroke: customColor, filter: "url(#line-shadow)" }), showDots &&
+            return (jsxs("g", { children: [jsxs(motion.g, { initial: { scaleY: shouldReduceMotion ? 1 : 0 }, animate: { scaleY: 1 }, transition: riseTransition, 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", appliedColorClass), stroke: customColor, filter: "url(#line-shadow)" })] }, shouldReduceMotion ? "line-static" : dataSignature), showDots &&
                         data.map((item, dataIndex) => {
                             const rawValue = item[key];
                             const isNull = rawValue === null || rawValue === undefined;
@@ -103,11 +119,9 @@ const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth =
                             if (isNull)
                                 return null;
                             const { x, y } = getPointPosition(dataIndex, value);
-                            (externalHoveredPoint === null || externalHoveredPoint === void 0 ? void 0 : externalHoveredPoint.index) === dataIndex &&
-                                externalHoveredPoint.key === key;
                             const isFocused = isKeyboardMode && focusedElementIndex === dataIndex;
-                            return (jsx("g", { children: jsx(ChartMarker, { cx: x, cy: y, radius: isFocused ? radius + 2 : radius, colorClass: cn(appliedColorClass, isFocused &&
-                                        "stroke-[var(--color-primary-600)] stroke-2"), strokeColor: customColor }) }, `${key}-${dataIndex}`));
+                            return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, transition: dotEntranceTransition(dataIndex, shouldReduceMotion), style: SCALE_FROM_CENTER, children: jsx(ChartMarker, { cx: x, cy: y, radius: isFocused ? radius + 2 : radius, colorClass: cn(appliedColorClass, isFocused &&
+                                        "stroke-[var(--color-primary-600)] stroke-2"), strokeColor: customColor }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
                         })] }, key));
         });
     }, [
@@ -117,11 +131,15 @@ const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth =
         showDots,
         data,
         getPointPosition,
-        externalHoveredPoint,
         focusedElementIndex,
         isKeyboardMode,
         radius,
         config,
+        shouldReduceMotion,
+        dataSignature,
+        margin,
+        innerWidth,
+        innerHeight,
     ]);
     // Hover-only markers (when showDots is false)
     const hoverMarkers = useMemo(() => {
@@ -233,7 +251,7 @@ const LineRenderer = ({ data, config, scales, dimensions, margin, strokeWidth =
                             ((numValue - minValue) / (maxValue - minValue)) *
                                 innerHeight);
                     })()
-                    : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }), jsx("g", { className: cn("chart-lines", className), children: lines }), hoverMarkers, jsx("g", { className: "chart-hover-areas", children: hoverAreas })] }));
+                    : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }), jsx("g", { className: cn("chart-lines", className), children: measured && lines }), hoverMarkers, jsx("g", { className: "chart-hover-areas", children: hoverAreas })] }));
 };
 
 export { LineRenderer };

package/dist/components/charts/{shared/LineRenderer → ComboChart}/LineRenderer.types.d.ts

@@ -1,7 +1,7 @@
-import type { ChartDataPoint, ChartConfig, CurveType } from '../../types/chart.types';
-import type { ChartScales } from '../../hooks/useChartScales';
-import type { ChartDimensions, ChartMargins } from '../ChartContainer';
-import type { MultiSeriesData } from '../ChartTooltip';
+import type { ChartDataPoint, ChartConfig, CurveType } from '../types/chart.types';
+import type { ChartScales } from '../hooks/useChartScales';
+import type { ChartDimensions, ChartMargins } from './ComboChartCanvas.types';
+import type { MultiSeriesData } from '../shared/ChartTooltip';
 export interface LineRendererProps {
     /**
      * Chart data
@@ -12,7 +12,7 @@ export interface LineRendererProps {
      */
     config: ChartConfig;
     /**
-     * Calculated scales (from useChartScales or ChartContainer)
+     * Calculated scales (from useChartScales or ComboChartCanvas)
      */
     scales: ChartScales;
     /**
@@ -43,6 +43,12 @@ export interface LineRendererProps {
      * Dot radius
      */
     radius?: number;
+    /**
+     * `true` once the container is measured. Lines mount (and rise from the x-axis)
+     * only when true, so the entrance starts from the real baseline rather than the
+     * 600×400 fallback (CLAUDE.md §19). Defaults to true for standalone use.
+     */
+    measured?: boolean;
     /**
      * Hovered point info
      */

package/dist/components/charts/DonutChart/DonutChart.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
@@ -10,7 +11,7 @@ import { resolveCssVariable, describeRingSegmentPath, interpolateHexColor, clamp
  * DonutChart component for displaying a percentage value with a circular progress indicator
  * Supports customization of size, thickness, animations, and theming
  */
-const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, ...props }) => {
+const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }) => {
     var _a, _b;
     const [isHovered, setIsHovered] = useState(false);
     const [hasAnimated, setHasAnimated] = useState(false);
@@ -144,7 +145,7 @@ const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200
                         ? `drop-shadow(0 4px 4px ${getGlowColor()}60)`
                         : "none",
                     transition: "filter 1s ease",
-                }, children: [jsx("defs", { children: getColors.type === "gradient" && (jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: getColors.from }), jsx("stop", { offset: "100%", stopColor: getColors.to })] })) }), isSegmentedVariant ? (jsxs("g", { children: [segmentDefinitions.map((segment, index) => {
+                }, role: "presentation", "aria-hidden": "true", children: [jsx("defs", { children: getColors.type === "gradient" && (jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: getColors.from }), jsx("stop", { offset: "100%", stopColor: getColors.to })] })) }), isSegmentedVariant ? (jsxs("g", { children: [segmentDefinitions.map((segment, index) => {
                                 var _a;
                                 return (jsx("path", { d: segment.trackPath, fill: resolveCssVariable(((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.track) || "", "#e5e7eb"), opacity: 0.25 }, `donut-track-${index}`));
                             }), segmentDefinitions.map((segment, index) => segment.activePath ? (jsx(motion.path, { d: segment.activePath, fill: resolveSegmentFill(segment.colorFactor), initial: { opacity: 0, scale: 0.95 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion

package/dist/components/charts/DonutChart/DonutChart.theme.js

@@ -10,7 +10,7 @@ const donutChartTheme = {
     progress: "text-[var(--color-primary)] transition-all duration-300",
     // Text styling
     text: {
-        label: "text-2xl font-bold text-[var(--color-text-primary)] transition-colors duration-300 tracking-tight",
+        label: "text-xl font-bold text-[var(--color-text-primary)] transition-colors duration-300 tracking-tight",
         subtitle: "text-sm text-[var(--color-text-secondary)] mt-1 transition-colors duration-300",
     },
     // Default color palette (CSS variables for dark mode support)

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 /**
  * Color configuration for the donut chart
  */
@@ -41,7 +40,7 @@ export interface DonutChartThemeOverrides {
 /**
  * DonutChart component props
  */
-export interface DonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+export interface DonutChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Visual variant for the donut chart (solid or segmented)
      * @default "solid"