@sybilion/uilib 1.2.24 → 1.3.0

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

@@ -0,0 +1,30 @@
+/**
+ * Shared Recharts plot / margin math (DOM-agnostic except measurement entry points).
+ * Keeps BaseChartWrapper tooltip clamp and ChartAreaInteractive brush in sync.
+ */
+export type ChartMargin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const DEFAULT_CHART_MARGIN: ChartMargin;
+export declare function resolveChartMargin(margin: Partial<ChartMargin> | undefined): ChartMargin;
+/** Plot box inside `.recharts-wrapper` (Recharts cartesian convention). */
+export declare function getPlotViewBox(wrapper: HTMLElement, m: ChartMargin): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type PlotRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * Plot area in `host` local px: prefer painted `.recharts-cartesian-grid`, else
+ * last `.recharts-wrapper` + margins. One `hostRect` read; grid/wrapper rects as needed.
+ */
+export declare function measureHostRelativePlotRect(host: HTMLElement, margin: ChartMargin): PlotRect | null;

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

@@ -1,3 +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;
+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, overlayElements: overlayElementsProp, ...restProps }: ChartAreaInteractiveProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,13 +8,22 @@ declare const timeRangeToMonths: {
     readonly '5y': 60;
     readonly All: 12;
 };
-export type TimeRange = keyof typeof timeRangeToMonths;
+export type TimeRangePreset = keyof typeof timeRangeToMonths;
+/** @deprecated Use `TimeRangePreset` or `string` for brush-encoded ranges. */
+export type TimeRange = TimeRangePreset;
+export declare const DRAG_TIME_RANGE_PREFIX: "__drag:";
+export declare function encodeDragTimeRange(a: Date, b: Date): string;
+export declare function parseDragTimeRange(s: string): {
+    start: Date;
+    end: Date;
+} | null;
+export declare function isTimeRangePreset(s: string): s is TimeRangePreset;
 export type FilterDataForTimeRangeOptions = {
     /** When set (e.g. selected forecast on Forecast tab), the window ends at the
      *  latest point that has shared historical or that analysis — not at another run. */
     endDateAnchorAnalysisId?: number | null;
 };
-export declare const filterDataForTimeRange: (data: ChartDataPoint[], currentTimeRange: TimeRange, options?: FilterDataForTimeRangeOptions) => ChartDataPoint[];
+export declare const filterDataForTimeRange: (data: ChartDataPoint[], currentTimeRange: string, options?: FilterDataForTimeRangeOptions) => ChartDataPoint[];
 export declare const shortDateFormatter: (value: string) => string;
 export declare const longDateFormatter: (value: string) => string;
 /**

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

@@ -1,7 +1,6 @@
 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;
@@ -22,7 +21,8 @@ export interface Analysis {
 }
 export interface ChartAreaInteractiveProps extends BaseChartWrapperProps {
     chartContainerClassName?: string;
-    timeRange: TimeRange;
+    /** Preset (`6m`, `1y`, …, `All`) or `__drag:startMs,endMs` from chart brush. */
+    timeRange: string;
     onTimeRangeChange: (range: string) => void;
     pinMonth: string | undefined;
     onPinMonthChange: (month: string | undefined) => void;

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

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+export interface TimeRangeBrushHostProps {
+    chartData: ChartDataPoint[];
+    onTimeRangeChange: (range: string) => void;
+    enabled: boolean;
+    /** Bumps layout sync when chart remounts (e.g. dataset / render id). */
+    layoutKey?: string | number | null;
+    children: ReactNode;
+}
+/**
+ * Wraps chart; pointerdown on SVG starts horizontal brush. Plot box tracks the
+ * painted grid / Recharts plot (see TimeRangeBrushLayout.helpers).
+ */
+export declare function TimeRangeBrushHost({ chartData, onTimeRangeChange, enabled, layoutKey, children, }: TimeRangeBrushHostProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { type ChartMargin, type PlotRect, measureHostRelativePlotRect, resolveChartMargin } from '#uilib/components/ui/Chart/tools/chartPlotGeometry';
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+/** Debounce for `window` resize only (RO uses rAF-coalesced sync). */
+export declare const BRUSH_LAYOUT_RESIZE_DEBOUNCE_MS = 500;
+export declare const BRUSH_MIN_DRAG_PX = 8;
+export declare const BRUSH_DOUBLE_TAP_MS = 300;
+export declare const BRUSH_DOUBLE_TAP_MAX_DIST_PX = 24;
+export type { ChartMargin };
+export { resolveChartMargin };
+export type BrushPlotLayout = PlotRect;
+/** Host-relative plot rect (grid-first, then wrapper + margins). */
+export declare const measureBrushPlotLayout: typeof measureHostRelativePlotRect;
+export declare function brushPlotLayoutsEqual(a: BrushPlotLayout | null, b: BrushPlotLayout | null): boolean;
+export declare function brushClientXToDate(clientX: number, plotRect: DOMRect, chartData: ChartDataPoint[]): Date | null;

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

@@ -6,5 +6,5 @@ interface PinOverlayProps {
     onPreviewMonthChange?: (month: string | undefined) => void;
     className?: string;
 }
-export declare function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonthChange, className, }: PinOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonthChange: _onPreviewMonthChange, className, }: PinOverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import type { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownM
 declare function DropdownMenu({ ...props }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuPortal({ ...props }: DropdownMenuPortalProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuContent({ className, sideOffset, elevation, ...props }: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, collisionPadding, elevation, ...props }: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuGroup({ ...props }: DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuItem({ className, inset, variant, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: DropdownMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
@@ -13,5 +13,5 @@ declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSepa
 declare function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuSub({ ...props }: DropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: DropdownMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuSubContent({ className, ...props }: DropdownMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, collisionPadding, ...props }: DropdownMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/esm/types/src/components/ui/Page/PageColumns/PageColumns.d.ts

@@ -1,5 +1,5 @@
 export declare function PageColumns({ columns, fill, className, }: {
     columns: React.ReactNode[];
-    fill: 'left' | 'right' | 'all';
+    fill?: 'left' | 'right' | 'all';
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,9 @@
-import { TimeRange } from './TimeRangeControls.types';
-export declare const TimeRangeControls: import("react").MemoExoticComponent<({ timeRange, onTimeRangeChange, loading, }: {
-    timeRange: TimeRange;
+export type TimeRangeControlsProps = {
+    timeRange: string;
     onTimeRangeChange: (range: string) => void;
     loading?: boolean;
-}) => import("react/jsx-runtime").JSX.Element>;
-export declare const TimeRangeSelect: import("react").MemoExoticComponent<({ timeRange, onTimeRangeChange, loading, }: {
-    timeRange: TimeRange;
-    onTimeRangeChange: (range: string) => void;
+};
+export declare const TimeRangeControls: import("react").MemoExoticComponent<({ timeRange, onTimeRangeChange, loading }: TimeRangeControlsProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TimeRangeSelect: import("react").MemoExoticComponent<({ timeRange, onTimeRangeChange, loading, }: TimeRangeControlsProps & {
     loading: boolean;
 }) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,4 @@
+export type WorldMapProps = {
+    className?: string;
+};
+export declare function WorldMap({ className }: WorldMapProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { WorldMap } from './WorldMap';
+export type { WorldMapProps } from './WorldMap';

package/dist/esm/types/src/components/widgets/DriverCard/DriverCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DriverData } from '../DriverMap/driverMapGeography';
+export interface DriverCardProps {
+    selectedDriver: DriverData | null;
+    isLoading: boolean;
+    inQueue?: boolean;
+    driverSelector?: React.ReactNode;
+}
+export declare function DriverCard({ selectedDriver, isLoading, inQueue, driverSelector, }: DriverCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriverCard/DriverPerformanceChart.d.ts

@@ -0,0 +1,5 @@
+import type { DriverData } from '../DriverMap/driverMapGeography';
+export interface DriverPerformanceChartProps {
+    driver: DriverData;
+}
+export declare function DriverPerformanceChart({ driver, }: DriverPerformanceChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriverCard/driverPerformanceChartData.d.ts

@@ -0,0 +1,7 @@
+import type { DriverData } from '../DriverMap/driverMapGeography';
+export type DriverPerformanceChartPoint = {
+    date: Date;
+    value: number;
+};
+/** Last non-null points from `normalized_series`, or deterministic fallback sample. */
+export declare function generateDriverChartData(driver: DriverData, precision?: number): DriverPerformanceChartPoint[];

package/dist/esm/types/src/components/widgets/DriverCard/index.d.ts

@@ -0,0 +1 @@
+export { DriverCard, type DriverCardProps } from './DriverCard';

package/dist/esm/types/src/components/widgets/DriverMap/DriverIcon/DriverIcon.d.ts

@@ -0,0 +1,17 @@
+import type { DriverData } from '../driverMapGeography';
+export declare const BADGE_SIZES: {
+    readonly s: "s";
+    readonly m: "m";
+    readonly l: "l";
+};
+export type BadgeSize = (typeof BADGE_SIZES)[keyof typeof BADGE_SIZES];
+interface DriverIconProps {
+    driver: DriverData;
+    size: BadgeSize;
+    isSelected: boolean;
+    onClick: () => void;
+    isVisible: boolean;
+    isLoading?: boolean;
+}
+export declare function DriverIcon({ driver, size, isSelected, onClick, isVisible, isLoading, }: DriverIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/widgets/DriverMap/DriverMap.d.ts

@@ -0,0 +1,8 @@
+import type { DriverData } from './driverMapGeography';
+export interface DriverMapProps {
+    drivers: DriverData[];
+    isLoading: boolean;
+    setSelectedDriver: (driver: DriverData) => void;
+    selectedDriver: DriverData | null;
+}
+export declare function DriverMap({ drivers, isLoading, setSelectedDriver, selectedDriver, }: DriverMapProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriverMap/DriverMap.helpers.d.ts

@@ -0,0 +1,21 @@
+import { type BadgeSize } from './DriverIcon/DriverIcon';
+import { type DriverData } from './driverMapGeography';
+export declare const calculateBadgeSizes: (drivers: DriverData[]) => Record<string, BadgeSize>;
+export declare const hasValidCoords: (coords: {
+    x: number;
+    y: number;
+} | null | undefined) => boolean;
+export declare const findMostSpecificRegion: (driver: DriverData) => {
+    name: string | null;
+    coordinates: {
+        x: number;
+        y: number;
+    } | null;
+};
+export declare const getDriverCoordinates: (driver: DriverData, specificRegion: {
+    name: string | null;
+    coordinates: {
+        x: number;
+        y: number;
+    } | null;
+}, existingDrivers?: DriverData[]) => DriverData["coordinates"];

package/dist/esm/types/src/components/widgets/DriverMap/driverCategoryIcon.d.ts

@@ -0,0 +1 @@
+export declare const getCategoryIcon: (category: string | undefined | null) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriverMap/driverMapGeography.d.ts

@@ -0,0 +1,80 @@
+export interface DriverData {
+    id: string;
+    name: string;
+    region: string[];
+    category: string;
+    isPublic: boolean;
+    importance: number;
+    direction: number;
+    lag: string;
+    coordinates: {
+        x: number;
+        y: number;
+        continent: string;
+    };
+    normalized_series?: {
+        [date: string]: number | null;
+    };
+    rawImportance?: any;
+    summary?: string;
+    src_region?: {
+        name: string;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    } | null;
+    tgt_region?: {
+        name: string;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    } | null;
+}
+export interface RegionMapping {
+    [key: string]: {
+        x: number;
+        y: number;
+        continent: string;
+    };
+}
+export interface AnalysisInfo {
+    id: string;
+    name: string;
+    driverCount: number;
+    path: string;
+}
+export interface DatasetInfo {
+    id: string;
+    name: string;
+    analyses: AnalysisInfo[];
+}
+interface GeographicCoordinates {
+    latitude: number;
+    longitude: number;
+    continent: string;
+}
+export declare const geographicCoordinates: {
+    [key: string]: GeographicCoordinates;
+};
+export declare function geographicToSVG(lat: number, lng: number): {
+    x: number;
+    y: number;
+};
+export declare function svgToPercentage(svgX: number, svgY: number): {
+    x: number;
+    y: number;
+};
+export declare function getContinentFromRegion(region: string): string | null;
+export declare function getPreciseCoordinates(region: string): {
+    x: number;
+    y: number;
+    continent: string;
+};
+export declare function getResponsiveCoordinates(region: string, existingDrivers?: DriverData[], mapContainerWidth?: number, mapContainerHeight?: number): {
+    x: number;
+    y: number;
+    continent: string;
+};
+export {};

package/dist/esm/types/src/components/widgets/DriverMap/driverMapSelection.d.ts

@@ -0,0 +1,3 @@
+import type { DriverData } from './driverMapGeography';
+export declare const getDriverImportance: (driver: DriverData) => any;
+export declare const getHighestImportanceDriver: (drivers: DriverData[]) => number | null;

package/dist/esm/types/src/components/widgets/DriverMap/index.d.ts

@@ -0,0 +1,6 @@
+export { DriverMap, type DriverMapProps } from './DriverMap';
+export type { DriverData } from './driverMapGeography';
+export { getCategoryIcon } from './driverCategoryIcon';
+export { getDriverImportance, getHighestImportanceDriver, } from './driverMapSelection';
+export { geographicCoordinates, geographicToSVG, getContinentFromRegion, getPreciseCoordinates, getResponsiveCoordinates, svgToPercentage, } from './driverMapGeography';
+export type { BadgeSize } from './DriverIcon/DriverIcon';

package/dist/esm/types/src/docs/pages/DriverMapPage.d.ts

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

package/dist/esm/types/src/docs/pages/PageColumnsPage.d.ts

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

package/dist/esm/types/src/docs/pages/WorldMapPage.d.ts

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

package/dist/esm/types/src/docs/registry.d.ts

@@ -8,7 +8,7 @@ export type DocEntry = {
     }>;
 };
 /** Sidebar group order */
-export declare const DOC_SECTION_ORDER: readonly ["Forms", "Feedback", "Layout", "Navigation", "Overlays", "Data display", "Charts", "Chat", "Media", "Misc"];
+export declare const DOC_SECTION_ORDER: readonly ["Forms", "Feedback", "Layout", "Navigation", "Widgets", "Overlays", "Data display", "Charts", "Chat", "Media", "Misc"];
 export declare const DOC_DEFAULT_SLUG = "button";
 export declare const DOC_REGISTRY: DocEntry[];
 export declare const docPageComponents: Record<string, LazyExoticComponent<ComponentType<object>>>;

package/dist/esm/types/src/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useIsMobile } from './useIsMobile';
+export { default as useEvent, type UseEventParams } from './useEvent';

package/dist/esm/types/src/index.d.ts

@@ -58,8 +58,11 @@ export * from './components/ui/Toggle';
 export * from './components/ui/ToggleGroup';
 export * from './components/ui/Tooltip';
 export * from './components/ui/VimeoEmbed';
+export * from './components/ui/WorldMap';
 export * from './components/ui/WorkspaceAppSwitcher';
 export * from './components/widgets/SidebarDatasetsItemsGrouped';
+export * from './components/widgets/DriverCard';
+export * from './components/widgets/DriverMap';
 export * from './components/widgets/SybilionAppHeader';
 export * from './components/widgets/SybilionAuthLayout';
 export * from './components/widgets/SybilionSignInPanel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.24",
+  "version": "1.3.0",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chart/Chart.tsx

@@ -21,3 +21,8 @@ export {
   ChartStyle,
   BaseChartWrapper,
 };
+export {
+  ChartEmptyState,
+  type ChartEmptyStateProps,
+  type ChartEmptyStatusTone,
+} from './components/ChartEmptyState/ChartEmptyState';

package/src/components/ui/Chart/components/BaseChartWrapper.tsx

@@ -9,15 +9,7 @@ import {
   useState,
 } from 'react';
 
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  CustomChartLegend,
-} from '#uilib/components/ui/Chart/Chart';
 import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
-import { QuantileBands } from '#uilib/components/ui/Chart/components/QuantileBands';
 import { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
 import {
   ChartLines,
@@ -26,47 +18,22 @@ import {
 } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
 import { Skeleton } from '#uilib/components/ui/Skeleton';
 import { chartRenderQueue } from '#uilib/utils/chartRenderQueue';
-import { ComposedChart, LineChart } from 'recharts';
+import { ComposedChart, LineChart, Tooltip as ChartTooltip } from 'recharts';
+
+import type { ChartConfig } from '../Chart.types';
+import { ChartContainer } from './ChartContainer';
+import { ChartTooltipContent } from './ChartTooltipContent';
+import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend';
+import { QuantileBands } from './QuantileBands';
 import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
 
+import { getPlotViewBox, resolveChartMargin } from '../tools/chartPlotGeometry';
 import { formatDate } from '../tools/formatters';
 import S from './BaseChartWrapper.styl';
 import { ChartAxes } from './ChartAxes';
 import { ChartGrid } from './ChartGrid';
 import { LegendSvg } from './LegendSvg/LegendSvg';
 
-type ChartMargin = { top: number; right: number; bottom: number; left: number };
-
-const DEFAULT_CHART_MARGIN: ChartMargin = {
-  top: 5,
-  right: 5,
-  bottom: 5,
-  left: 5,
-};
-
-function resolveChartMargin(
-  margin: Partial<ChartMargin> | undefined,
-): ChartMargin {
-  return {
-    top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
-    right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
-    bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
-    left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
-  };
-}
-
-/** Plot box inside `.recharts-wrapper`, same convention as Recharts cartesian viewBox. */
-function getPlotViewBox(wrapper: HTMLElement, m: ChartMargin) {
-  const w = wrapper.clientWidth;
-  const h = wrapper.clientHeight;
-  return {
-    x: m.left,
-    y: m.top,
-    width: Math.max(0, w - m.left - m.right),
-    height: Math.max(0, h - m.top - m.bottom),
-  };
-}
-
 function clampTooltipTranslate(args: {
   coordinate: { x: number; y: number };
   viewBox: { x: number; y: number; width: number; height: number };

package/src/components/ui/Chart/components/ChartEmptyState/ChartEmptyState.styl

@@ -0,0 +1,60 @@
+@import '../../../../../lib/theme.styl'
+
+.root
+  display flex
+  flex-direction column
+  gap var(--p-1)
+  max-width 42rem
+  padding 0 var(--p-3)
+
+  border-radius var(--p-4)
+  backdrop-filter blur(4px)
+  box-shadow 0 0 0 2px var(--page-color)
+  pointer-events auto
+
+.rootPanel
+  width 100%
+  min-height var(--chart-height)
+  justify-content center
+  padding var(--p-6)
+  border-radius var(--radius-md)
+  background var(--muted) / 0.35
+
+.rootInline
+  width fit-content
+  max-width 100%
+
+.rootAlignCenter
+  align-items center
+  text-align center
+
+.rootAlignStart
+  align-items flex-start
+  text-align left
+
+.hint
+  font-size 14px
+  line-height 1.5
+  font-weight 400
+  color var(--muted-foreground)
+  margin 0
+
+  a
+    color var(--sb-cyan-400)
+    text-decoration underline
+    font-weight 500
+
+    &:hover
+      opacity 0.9
+
+.status
+  font-size 14px
+  line-height 1.5
+  font-weight 400
+  margin 0
+
+.statusMuted
+  color var(--muted-foreground)
+
+.statusDestructive
+  color var(--destructive)

package/src/components/ui/Chart/components/ChartEmptyState/ChartEmptyState.styl.d.ts

@@ -0,0 +1,15 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'hint': string;
+  'root': string;
+  'rootAlignCenter': string;
+  'rootAlignStart': string;
+  'rootInline': string;
+  'rootPanel': string;
+  'status': string;
+  'statusDestructive': string;
+  'statusMuted': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Chart/components/ChartEmptyState/ChartEmptyState.tsx

@@ -0,0 +1,66 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import S from './ChartEmptyState.styl';
+
+export type ChartEmptyStatusTone = 'muted' | 'destructive';
+
+export interface ChartEmptyStateProps {
+  className?: string;
+  /** Primary guidance (muted). */
+  hint?: ReactNode;
+  /** Status / technical detail. */
+  status?: ReactNode;
+  statusTone?: ChartEmptyStatusTone;
+  /** `panel`: chart-sized block with light fill. `inline`: text only (e.g. above chart). */
+  variant?: 'panel' | 'inline';
+  align?: 'center' | 'start';
+}
+
+function isNonEmpty(node: ReactNode): boolean {
+  if (node == null || node === false) return false;
+  if (typeof node === 'string') return node.trim().length > 0;
+  return true;
+}
+
+export function ChartEmptyState({
+  className,
+  hint,
+  status,
+  statusTone = 'muted',
+  variant = 'panel',
+  align = 'center',
+}: ChartEmptyStateProps) {
+  const hasHint = isNonEmpty(hint);
+  const hasStatus = isNonEmpty(status);
+
+  if (!hasHint && !hasStatus) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        S.root,
+        variant === 'panel' && S.rootPanel,
+        variant === 'inline' && S.rootInline,
+        align === 'start' && S.rootAlignStart,
+        align === 'center' && S.rootAlignCenter,
+        className,
+      )}
+    >
+      {hasHint && <div className={S.hint}>{hint}</div>}
+      {hasStatus && (
+        <div
+          className={cn(
+            S.status,
+            statusTone === 'destructive' && S.statusDestructive,
+            statusTone === 'muted' && S.statusMuted,
+          )}
+        >
+          {status}
+        </div>
+      )}
+    </div>
+  );
+}