@sybilion/uilib 1.0.20

package/dist/esm/types/src/components/ui/Chart/Chart.types.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps, ReactNode } from 'react';
+export declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+export type ChartContextProps = {
+    config: ChartConfig;
+};
+export type ChartTooltipContentProps = ComponentProps<'div'> & {
+    active?: boolean;
+    payload?: unknown[];
+    label?: string | number;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+    labelFormatter?: (label: unknown, payload: unknown[]) => ReactNode;
+    labelClassName?: string;
+    formatter?: (value: unknown, name: string, props: unknown, index: number, payload: unknown) => ReactNode;
+    color?: string;
+};

package/dist/esm/types/src/components/ui/Chart/chartForecastVisualization.constants.d.ts

@@ -0,0 +1,21 @@
+export declare const FORECAST_COLORS: {
+    readonly historical: {
+        readonly light: "#000000";
+        readonly dark: "#ffffff";
+    };
+    readonly forecast: {
+        readonly light: "#3a0087";
+        readonly dark: "#8b5cf6";
+    };
+    readonly confidence: {
+        readonly light: "rgba(58, 0, 135, 0.35)";
+        readonly dark: "rgba(139, 92, 246, 0.35)";
+    };
+    readonly boundary: {
+        readonly positive: "#77d400";
+        readonly negative: "#fc512b";
+        readonly neutral: "#ffae00";
+    };
+};
+export declare const ANIMATION_DURATION = 800;
+export declare const ANIMATION_BEGIN = 0;

package/dist/esm/types/src/components/ui/Chart/chartForecastVisualization.types.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Shared types for Chart primitives (quantile bands, connection points, boundaries).
+ * Keeps Chart/ChartAreaInteractive independent of removed top-level forecast components.
+ */
+/** Time series tuple [date, value] */
+export type TimeSeriesPoint = [string, number];
+export interface ForecastSeries {
+    [date: string]: {
+        forecast: number;
+        lower_boundary?: {
+            '6m'?: number;
+            '12m'?: number;
+            '24m'?: number;
+            [key: string]: number | undefined;
+        };
+        upper_boundary?: {
+            '6m'?: number;
+            '12m'?: number;
+            '24m'?: number;
+            [key: string]: number | undefined;
+        };
+        quantile_forecast?: {
+            [quantile: string]: number;
+        };
+    };
+}
+/** API-style forecast payload keyed by `forecast_series` */
+export interface SeriesForecastData {
+    forecast_series: ForecastSeries;
+    forecast_start?: string;
+    forecast_end?: string;
+    last_valid_data_index?: string;
+}
+export interface ChangePointDetection {
+    MeanCPD: {
+        change_points: Array<{
+            sign: number;
+            prev_coef: number[];
+            prev_period_est: TimeSeriesPoint[];
+            next_period_est: TimeSeriesPoint[];
+        }>;
+        cpd_metrics: {
+            sensitivity_threshold: number;
+            fc_metrics: {
+                recall: number;
+            };
+            consistency_metrics: {
+                fc_ignore_noise_class: number;
+                fc_with_noise_class: number;
+            };
+        };
+    };
+    SlopeCPD?: {
+        change_points: Array<{
+            sign: number;
+            prev_coef: number[];
+            prev_period_est: TimeSeriesPoint[];
+        }>;
+        cpd_metrics: {
+            sensitivity_threshold: number;
+        };
+    };
+}
+/** Recharts row shape for confidence / boundary layers */
+export interface ForecastVisualizationRow {
+    date: string;
+    historical?: number;
+    forecast?: number;
+    lower_boundary?: number;
+    upper_boundary?: number;
+    [key: string]: string | number | undefined;
+}
+export interface QuantileBandConfig {
+    key: string;
+    quantiles: [string, string];
+    opacity: number;
+    color?: string;
+    name: string;
+    strokeWidth?: number;
+    strokeDasharray?: string;
+    strokeOpacity?: number;
+    type?: 'monotone' | 'linear' | 'step' | 'stepBefore' | 'stepAfter' | 'basis' | 'natural';
+    fillPattern?: 'solid' | 'dots' | 'lines';
+}

package/dist/esm/types/src/components/ui/Chart/components/ActiveDotsLayer/ActiveDotsLayer.d.ts

@@ -0,0 +1,11 @@
+interface ActiveDot {
+    x: number;
+    y: number;
+    color: string;
+}
+interface ActiveDotsLayerProps {
+    data: ActiveDot[];
+    isDarkTheme: boolean;
+}
+export declare function ActiveDotsLayer({ data, isDarkTheme }: ActiveDotsLayerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/BaseChartWrapper.d.ts

@@ -0,0 +1,79 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ChartConfig, ChartContainer } from '#uilib/components/ui/Chart/Chart';
+import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
+import { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
+export interface BaseChartWrapperProps {
+    renderId?: string;
+    chartConfig?: ChartConfig;
+    chartData: ChartDataPoint[];
+    historicalLineColor?: string;
+    forecastData?: ForecastItemData[];
+    loading: boolean;
+    hasCombinedData?: boolean;
+    isDarkTheme: boolean;
+    height?: number;
+    className?: string;
+    loadingComponentClassName?: string;
+    footerClassName?: string;
+    chartClassName?: string;
+    xAxisClassName?: string;
+    yAxisClassName?: string;
+    legendClassName?: string;
+    footerActions?: ReactNode;
+    quantileBands?: QuantileBandConfig[];
+    quantileBandKey?: string;
+    xMin?: string | number;
+    xMax?: string | number;
+    yMin?: number;
+    yMax?: number;
+    autoScaleYAxis?: boolean;
+    formatNumber?: (value: number) => string;
+    formatDate?: (value: string, detailed?: boolean) => string;
+    labelFormatter?: (value: unknown) => string;
+    onLegendClick?: (data: LegendPayload, index: number, event: any) => void;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    children?: ReactNode;
+    chartType?: 'composed' | 'line';
+    disableAnimation?: boolean;
+    showGrid?: boolean;
+    showAxes?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    showChartAxesLegend?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    showActiveDots?: boolean;
+    overlayElements?: ReactNode;
+    hiddenSeries?: Set<string>;
+    excludeLegendIds?: number[];
+    onAnalysisSelect?: (analysisId: number | string) => void;
+    onFailedAnalysisClick?: (analysisId?: number | string) => void;
+    maxVisibleItems?: number;
+    preventDeselection?: boolean;
+    legendVariant?: 'default' | 'svg';
+    legendWidth?: number;
+    legendMarginLeft?: number;
+    containerProps?: Omit<ComponentProps<typeof ChartContainer>, 'config' | 'className' | 'children'>;
+    error?: string | null;
+    loadingMessage?: ReactNode;
+    noDataMessage?: string;
+    onGridHeightChange?: (height: number) => void;
+    forecastLineStyle?: 'dashed' | 'solid';
+    disableHistoricalAnimation?: boolean;
+    /** Clear all hidden series (legend “show all”). */
+    onShowAll?: () => void;
+    /** Isolate a single series by data key; `allDataKeys` lists every toggleable key. */
+    onShowOnly?: (dataKey: string, allDataKeys: string[]) => void;
+}
+/**
+ * Base chart wrapper component with common structure
+ * Handles container, grid, axes, tooltip, and legend
+ */
+export declare function BaseChartWrapper(props: BaseChartWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chart/components/ChartAxes.d.ts

@@ -0,0 +1,15 @@
+interface ChartAxesProps {
+    xAxisClassName?: string;
+    yAxisClassName?: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    formatDate: (value: string, detailed?: boolean) => string;
+    formatNumber?: (value: number) => string;
+    xMin?: string | number;
+    xMax?: string | number;
+    yMin?: number;
+    yMax?: number;
+    autoScaleYAxis?: boolean;
+}
+export declare function ChartAxes({ xAxisClassName, yAxisClassName, xAxisLabel, yAxisLabel, formatDate, xMin, xMax, yMin, yMax, autoScaleYAxis, }: ChartAxesProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/ChartContainer.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { ChartConfig } from '#uilib/components/ui/Chart/Chart.types';
+import * as RechartsPrimitive from 'recharts';
+export declare function ChartContainer({ id, className, children, config, ...props }: ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}): import("react/jsx-runtime").JSX.Element;
+export declare const ChartStyle: ({ id, config, }: {
+    id: string;
+    config: ChartConfig;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chart/components/ChartGrid.d.ts

@@ -0,0 +1 @@
+export declare function ChartGrid(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chart/components/ChartLegendContent.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+export declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: ComponentProps<'div'> & {
+    payload?: any[];
+    verticalAlign?: 'top' | 'bottom';
+    hideIcon?: boolean;
+    nameKey?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chart/components/ChartLegendItem.d.ts

@@ -0,0 +1,15 @@
+import { ChartConfig } from '../Chart.types';
+type LegendItem = {
+    type: string;
+    value: string;
+    color: string;
+    dataKey?: string;
+};
+type ChartLegendItemProps = {
+    item: LegendItem;
+    config: ChartConfig;
+    hideIcon: boolean;
+    nameKey?: string;
+};
+export declare function ChartLegendItem({ item, config, hideIcon, nameKey, }: ChartLegendItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/ChartTooltipContent.d.ts

@@ -0,0 +1,2 @@
+import { ChartTooltipContentProps } from '#uilib/components/ui/Chart/Chart.types';
+export declare function ChartTooltipContent({ active, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, payload, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chart/components/ChartTooltipItem.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ChartConfig } from '../Chart.types';
+type TooltipItem = {
+    type: string;
+    name: string;
+    value: number | [number, number];
+    payload: unknown;
+    color: string;
+    dataKey?: string;
+};
+type ChartTooltipItemProps = {
+    item: TooltipItem;
+    index: number;
+    config: ChartConfig;
+    indicator: 'line' | 'dot' | 'dashed';
+    hideIndicator: boolean;
+    nestLabel: boolean;
+    tooltipLabel: ReactNode;
+    color?: string;
+    nameKey?: string;
+    formatter?: (value: unknown, name: string, props: unknown, index: number, payload: unknown) => ReactNode;
+};
+export declare function ChartTooltipItem({ item, index, config, indicator, hideIndicator, nestLabel, tooltipLabel, color, nameKey, formatter, }: ChartTooltipItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/ConfidenceBands.d.ts

@@ -0,0 +1,7 @@
+interface ConfidenceBandsProps {
+    color: string;
+    hidden?: boolean;
+    animate?: boolean;
+}
+export declare function ConfidenceBands({ color, hidden, animate, }: ConfidenceBandsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/CustomChartLegend/CustomChartLegend.d.ts

@@ -0,0 +1,31 @@
+interface CustomChartLegendPayloadItem {
+    value: string;
+    color: string;
+    dataKey: string;
+    icon?: string;
+    status?: string;
+    dimmed?: boolean;
+    updated_at?: string;
+}
+interface CustomChartLegendProps {
+    payload?: CustomChartLegendPayloadItem[];
+    onClick?: (data: any, index: number, event: any) => void;
+    className?: string;
+    wrapperStyle?: React.CSSProperties;
+    hiddenSeries?: Set<string>;
+    onAnalysisSelect?: (analysisId: number) => void;
+    onFailedAnalysisClick?: (analysisId?: number) => void;
+    maxVisibleItems?: number;
+    /**
+     * When true (default), legend keeps all series "selected"; `hiddenSeries` only dims lines.
+     * When false, hidden series drop out of selection (legacy; breaks +N overflow when
+     * `items.length < 2` together with `enableToggleHidden`).
+     */
+    preventDeselection?: boolean;
+}
+/**
+ * Custom chart legend using AnalysesSelector (inline mode)
+ * Supports forecast icon indicator, failed badge, toggle visibility
+ */
+export declare function CustomChartLegend({ payload, onClick, hiddenSeries, className, onAnalysisSelect, onFailedAnalysisClick, maxVisibleItems, preventDeselection, }: CustomChartLegendProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/ForecastBoundaries.d.ts

@@ -0,0 +1,8 @@
+import type { ChangePointDetection, ForecastVisualizationRow } from '../chartForecastVisualization.types';
+interface ForecastBoundariesProps {
+    changePoints: ChangePointDetection;
+    chartData: ForecastVisualizationRow[];
+    isDarkTheme: boolean;
+}
+export declare function ForecastBoundaries({ changePoints, chartData, isDarkTheme, }: ForecastBoundariesProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/ForecastLine.d.ts

@@ -0,0 +1,12 @@
+interface ForecastLineProps {
+    color: string;
+    isDarkTheme: boolean;
+    hidden: boolean;
+    animate: boolean;
+    animationDuration: number;
+    animationBegin: number;
+    name?: string;
+    dataKey?: string;
+}
+export declare function ForecastLine({ color, isDarkTheme, hidden, animate, animationDuration, animationBegin, name, dataKey, }: ForecastLineProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/HistoricalLine.d.ts

@@ -0,0 +1,12 @@
+interface HistoricalLineProps {
+    color: string;
+    isDarkTheme: boolean;
+    hidden: boolean;
+    animate: boolean;
+    animationDuration: number;
+    animationBegin: number;
+    name?: string;
+    dataKey?: string;
+}
+export declare function HistoricalLine({ color, isDarkTheme, hidden, animate, animationDuration, animationBegin, name, dataKey, }: HistoricalLineProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/LegendSvg/LegendSvg.d.ts

@@ -0,0 +1,12 @@
+export interface LegendSvgPayloadItem {
+    value: string;
+    color: string;
+    dataKey: string;
+}
+interface LegendSvgProps {
+    payload: LegendSvgPayloadItem[];
+    width: number;
+    marginLeft?: number;
+}
+export declare function LegendSvg({ payload, width, marginLeft }: LegendSvgProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/QuantileBands.d.ts

@@ -0,0 +1,18 @@
+import type { QuantileBandConfig } from '../chartForecastVisualization.types';
+export declare const DEFAULT_QUANTILE_BAND_COLOR: string;
+interface QuantileBandsProps {
+    color?: string;
+    hiddenBands?: Set<string>;
+    quantileBandKey?: string;
+    animate?: boolean;
+    animationDuration: number;
+    animationBegin: number;
+    customBands: QuantileBandConfig[];
+    showLegend?: boolean;
+}
+/**
+ * Renders quantile bands as Area components using array values
+ * Each band uses [lower, upper] array format to fill between two values
+ */
+export declare function QuantileBands({ color, hiddenBands, quantileBandKey, animate, animationDuration, animationBegin, customBands, showLegend, }: QuantileBandsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/ui/Chart/components/index.d.ts

@@ -0,0 +1,12 @@
+export { BaseChartWrapper } from './BaseChartWrapper';
+export { ChartAxes } from './ChartAxes';
+export { ChartContainer, ChartStyle } from './ChartContainer';
+export { ChartGrid } from './ChartGrid';
+export { ChartLegendContent } from './ChartLegendContent';
+export { ChartTooltipContent } from './ChartTooltipContent';
+export { ForecastLine } from './ForecastLine';
+export { formatDate, formatNumber } from '../tools/formatters';
+export { HistoricalLine } from './HistoricalLine';
+export { useChartAnimation } from '../hooks/useChartAnimation';
+export { useChartColors } from '../hooks/useChartColors';
+export { useLegendState } from '../hooks/useLegendState';

package/dist/esm/types/src/components/ui/Chart/hooks/useChartAnimation.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to manage chart animation state
+ * Triggers animation on data change and resets after duration
+ */
+export declare function useChartAnimation(chartData: unknown[], duration?: number): boolean;

package/dist/esm/types/src/components/ui/Chart/hooks/useChartColors.d.ts

@@ -0,0 +1,12 @@
+type ColorScheme = {
+    light: string;
+    dark: string;
+};
+type ChartColors = Record<string, ColorScheme | any>;
+export declare function useChartColors(colors: ChartColors, isDarkTheme: boolean): {
+    historical: string;
+    forecast: string;
+    confidence?: string;
+    [key: string]: string | undefined;
+};
+export {};

package/dist/esm/types/src/components/ui/Chart/hooks/useLegendState.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook to manage chart legend state
+ * Handles showing/hiding series on legend click
+ */
+export declare function useLegendState(): {
+    hiddenSeries: Set<string>;
+    toggleSeries: (seriesName: string) => void;
+    clearHiddenSeries: () => void;
+    showOnlySeries: (dataKey: string, allDataKeys: string[]) => void;
+};

package/dist/esm/types/src/components/ui/Chart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chart';
+export * from './Chart.types';

package/dist/esm/types/src/components/ui/Chart/tools/formatters.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Format number for display (with k/m abbreviations)
+ */
+export declare const formatNumber: (value: number) => string;
+/**
+ * Format Y-axis number with smart rounding based on magnitude
+ */
+export declare const formatYAxisNumber: (value: number) => string;
+/**
+ * Generate simple Y-axis ticks
+ * - Get the highest chart point (max)
+ * - Round max to nearest appropriate value
+ * - Divide rounded max by 10 and round to get the step
+ * - Add legend for every step from top to bottom
+ * - No extra gaps from top/bottom
+ */
+export declare const generateRoundedYTicks: (min: number, max: number) => number[];
+/**
+ * Format date for display
+ */
+export declare const formatDate: (dateStr: string, long?: boolean) => string;

package/dist/esm/types/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.d.ts

@@ -0,0 +1,3 @@
+import { ChartAreaInteractiveProps } from './ChartAreaInteractive.types';
+export declare const chartConfig: {};
+export declare function ChartAreaInteractive({ className, chartContainerClassName, legendClassName, xAxisClassName, yAxisClassName, timeRange, onTimeRangeChange, pinMonth, onPinMonthChange, onPreviewMonthChange, chartData, forecastData, error, loading, isDarkTheme, footerActions, mode, selectedForecast, upperQuantiles, lowerQuantiles, selectedLowerQuantile, selectedUpperQuantile, onLowerQuantileChange, onUpperQuantileChange, lowerThreshold, upperThreshold, onLowerThresholdChange, onUpperThresholdChange, discreteThresholdValues, headerActions, excludeLegendIds, loadingAnalyses, onLegendClick, onAnalysisSelect, disableTimeRangeSelector, forecastLineStyle, selectedAnalysisId, chartRenderId, toggleLegendSeries, ensureAnalysisSeriesVisible, overlayForecastData, hiddenSeries, disableForecastHistoricalBridge, ...restProps }: ChartAreaInteractiveProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers.d.ts

@@ -0,0 +1,31 @@
+import type { Analysis, ChartDataPoint } from './ChartAreaInteractive.types';
+export declare const formatNumber: (value: number) => string;
+export declare const findPinPositionForDate: (targetDate: string, filteredData: ChartDataPoint[]) => number;
+declare const timeRangeToMonths: {
+    readonly '6m': 6;
+    readonly '1y': 12;
+    readonly '3y': 36;
+    readonly '5y': 60;
+    readonly All: 12;
+};
+export type TimeRange = keyof typeof timeRangeToMonths;
+export declare const filterDataForTimeRange: (data: ChartDataPoint[], currentTimeRange: TimeRange, availableAnalyses: number[]) => ChartDataPoint[];
+export declare const shortDateFormatter: (value: string) => string;
+export declare const longDateFormatter: (value: string) => string;
+/**
+ * Checks if an analysis status is 'fail' (case-insensitive).
+ * @param analysis - The analysis object with optional status field
+ * @returns true if status is 'fail', false otherwise
+ */
+export declare const isAnalysisFailed: (analysis: Analysis | {
+    status?: string;
+}) => boolean;
+/**
+ * Checks if an analysis status is not 'fail' (case-insensitive).
+ * @param analysis - The analysis object with optional status field
+ * @returns true if status is not 'fail', false otherwise
+ */
+export declare const isAnalysisNotFailed: (analysis: Analysis | {
+    status?: string;
+}) => boolean;
+export {};

package/dist/esm/types/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.types.d.ts

@@ -0,0 +1,63 @@
+import { BaseChartWrapperProps } from '#uilib/components/ui/Chart/components/BaseChartWrapper';
+import type { ForecastData } from '#uilib/types/forecast-data';
+import { LegendPayload } from 'recharts';
+import { TimeRange } from './ChartAreaInteractive.helpers';
+export type OverlayMode = 'pin' | 'intervals' | 'thresholds';
+export interface ChartDataPoint {
+    date: string;
+    historical?: number;
+    [key: string]: string | number | [number, number] | undefined;
+}
+export interface Analysis {
+    id: number;
+    icon?: string;
+    name: string;
+    color?: string;
+    status?: string;
+    updated_at?: string;
+    analysis_cycle?: {
+        id: number;
+        name: string;
+    };
+}
+export interface ChartAreaInteractiveProps extends BaseChartWrapperProps {
+    chartContainerClassName?: string;
+    timeRange: TimeRange;
+    onTimeRangeChange: (range: string) => void;
+    pinMonth: string | undefined;
+    onPinMonthChange: (month: string | undefined) => void;
+    onPreviewMonthChange?: (month: string | undefined) => void;
+    mode?: OverlayMode;
+    selectedForecast?: Analysis;
+    upperQuantiles?: string[];
+    lowerQuantiles?: string[];
+    selectedLowerQuantile?: string | null;
+    selectedUpperQuantile?: string | null;
+    onLowerQuantileChange?: (quantile: string | null) => void;
+    onUpperQuantileChange?: (quantile: string | null) => void;
+    lowerThreshold?: number;
+    upperThreshold?: number;
+    onLowerThresholdChange?: (value: number) => void;
+    onUpperThresholdChange?: (value: number) => void;
+    discreteThresholdValues?: {
+        lower: number[];
+        upper: number[];
+    };
+    headerActions?: React.ReactNode;
+    loadingAnalyses?: Set<string>;
+    onLegendClick?: (data: LegendPayload) => undefined | boolean;
+    disableTimeRangeSelector?: boolean;
+    forecastLineStyle?: 'dashed' | 'solid';
+    /** When set, ensures this analysis is visible (selected) in chart legend */
+    selectedAnalysisId?: number | null;
+    /** Stable id for chart instance (e.g. dataset id string). */
+    chartRenderId?: string | null;
+    /** Toggle series visibility by Recharts `dataKey` (e.g. `forecast_12`, `historical`). */
+    toggleLegendSeries: (seriesKey: string) => void;
+    /** Show a forecast series when it was hidden (e.g. after table row selection). */
+    ensureAnalysisSeriesVisible: (analysisId: number | string) => void;
+    /** Forecast quantile payloads keyed by analysis id (intervals/threshold overlays). */
+    overlayForecastData?: Record<number, ForecastData>;
+    /** Skip automatic forecast bridge points at last historical month (legacy / custom-shaped data). */
+    disableForecastHistoricalBridge?: boolean;
+}

package/dist/esm/types/src/components/ui/ChartAreaInteractive/ChartLines.d.ts

@@ -0,0 +1,45 @@
+import { ChartDataPoint } from './ChartAreaInteractive.types';
+export interface LineConfig {
+    dataKey: string;
+    color: string;
+    name: string;
+}
+export type ForecastItemData = {
+    id: number;
+    name?: string;
+    color?: string;
+    icon?: string;
+    status?: string;
+    tooltip?: string;
+    dimmed?: boolean;
+    updated_at?: string;
+};
+export type Dot = {
+    x: number;
+    y: number;
+    color: string;
+};
+export declare const FORECAST_COLORS_MAP: {
+    '#C08F09': string;
+    '#216BF7': string;
+    '#F103F1': string;
+    '#059643': string;
+    '#FD1515': string;
+    '#04ADC3': string;
+    '#3C42A9': string;
+    '#795548': string;
+};
+export declare const FORECAST_LINE_COLORS: string[];
+export declare const getForecastColor: (index: number) => string;
+export declare const getForecastQuantileBandColor: (index: number) => any;
+export declare const ChartLines: import("react").MemoExoticComponent<({ chartData, forecastData, hiddenSeries, isDarkTheme, shouldAnimate, historicalLineColor, showLegend, forecastLineStyle, disableHistoricalAnimation, }: {
+    chartData: ChartDataPoint[];
+    forecastData?: ForecastItemData[];
+    hiddenSeries?: Set<string>;
+    isDarkTheme: boolean;
+    shouldAnimate?: boolean;
+    historicalLineColor?: string;
+    showLegend?: boolean;
+    forecastLineStyle?: "dashed" | "solid";
+    disableHistoricalAnimation?: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;

package/dist/esm/types/src/components/ui/ChartAreaInteractive/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ChartAreaInteractive';
+export * from './ChartAreaInteractive.types';
+export type { OverlayMode } from './ChartAreaInteractive.types';