@sybilion/uilib 1.2.26 → 1.3.0

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/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/index.d.ts

@@ -3,6 +3,4 @@ export type { DriverData } from './driverMapGeography';
 export { getCategoryIcon } from './driverCategoryIcon';
 export { getDriverImportance, getHighestImportanceDriver, } from './driverMapSelection';
 export { geographicCoordinates, geographicToSVG, getContinentFromRegion, getPreciseCoordinates, getResponsiveCoordinates, svgToPercentage, } from './driverMapGeography';
-export { MapBackground } from './MapBackground/MapBackground';
-export { LoadingSpinner } from './LoadingSpinner/LoadingSpinner';
 export type { BadgeSize } from './DriverIcon/DriverIcon';

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/index.d.ts

@@ -58,8 +58,10 @@ 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.26",
+  "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>
+  );
+}

package/src/components/ui/Chart/tools/chartPlotGeometry.ts

@@ -0,0 +1,89 @@
+/**
+ * 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 const DEFAULT_CHART_MARGIN: ChartMargin = {
+  top: 5,
+  right: 5,
+  bottom: 5,
+  left: 5,
+};
+
+export 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` (Recharts cartesian convention). */
+export 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),
+  };
+}
+
+export type PlotRect = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+const GRID_BOUNDS_MIN_PX = 2;
+
+/**
+ * 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 function measureHostRelativePlotRect(
+  host: HTMLElement,
+  margin: ChartMargin,
+): PlotRect | null {
+  const hostRect = host.getBoundingClientRect();
+
+  const grid = host.querySelector<SVGGElement>('.recharts-cartesian-grid');
+  if (grid) {
+    const gr = grid.getBoundingClientRect();
+    if (gr.width > GRID_BOUNDS_MIN_PX && gr.height > GRID_BOUNDS_MIN_PX) {
+      return {
+        left: gr.left - hostRect.left,
+        top: gr.top - hostRect.top,
+        width: gr.width,
+        height: gr.height,
+      };
+    }
+  }
+
+  const wrappers = host.querySelectorAll('.recharts-wrapper');
+  const wrapper = wrappers[wrappers.length - 1];
+  if (!(wrapper instanceof HTMLElement)) return null;
+
+  const vb = getPlotViewBox(wrapper, margin);
+  if (vb.width <= 0 || vb.height <= 0) return null;
+
+  const wrapRect = wrapper.getBoundingClientRect();
+  return {
+    left: wrapRect.left - hostRect.left + vb.x,
+    top: wrapRect.top - hostRect.top + vb.y,
+    width: vb.width,
+    height: vb.height,
+  };
+}

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers.ts

@@ -65,7 +65,37 @@ const timeRangeToMonths = {
   All: 12,
 } as const;
 
-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 const DRAG_TIME_RANGE_PREFIX = '__drag:' as const;
+
+export function encodeDragTimeRange(a: Date, b: Date): string {
+  const t0 = Math.min(a.getTime(), b.getTime());
+  const t1 = Math.max(a.getTime(), b.getTime());
+  return `${DRAG_TIME_RANGE_PREFIX}${t0},${t1}`;
+}
+
+export function parseDragTimeRange(
+  s: string,
+): { start: Date; end: Date } | null {
+  if (!s.startsWith(DRAG_TIME_RANGE_PREFIX)) return null;
+  const body = s.slice(DRAG_TIME_RANGE_PREFIX.length);
+  const comma = body.indexOf(',');
+  if (comma === -1) return null;
+  const a = Number(body.slice(0, comma));
+  const b = Number(body.slice(comma + 1));
+  if (!Number.isFinite(a) || !Number.isFinite(b)) return null;
+  const t0 = Math.min(a, b);
+  const t1 = Math.max(a, b);
+  return { start: new Date(t0), end: new Date(t1) };
+}
+
+export function isTimeRangePreset(s: string): s is TimeRangePreset {
+  return Object.prototype.hasOwnProperty.call(timeRangeToMonths, s);
+}
 
 function isPlottableNumber(value: unknown): value is number {
   return typeof value === 'number' && Number.isFinite(value);
@@ -154,11 +184,23 @@ export type FilterDataForTimeRangeOptions = {
 
 export const filterDataForTimeRange = (
   data: ChartDataPoint[],
-  currentTimeRange: TimeRange,
+  currentTimeRange: string,
   options?: FilterDataForTimeRangeOptions,
 ) => {
+  const dragRange = parseDragTimeRange(currentTimeRange);
+  if (dragRange) {
+    const { start, end } = dragRange;
+    return data.filter(item => {
+      if (!item.date) return false;
+      const d = new Date(item.date);
+      return d >= start && d <= end;
+    });
+  }
+
   if (currentTimeRange === 'All') return data;
 
+  if (!isTimeRangePreset(currentTimeRange)) return data;
+
   const latestDate = computeLatestPlottableDate(data, options);
 
   // Pre-compute start date based on latest date in data

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.tsx

@@ -18,6 +18,7 @@ import {
 } from './ChartAreaInteractive.helpers';
 import S from './ChartAreaInteractive.styl';
 import { ChartAreaInteractiveProps } from './ChartAreaInteractive.types';
+import { TimeRangeBrushHost } from './TimeRangeBrushLayer';
 import { IntervalsOverlay, PinOverlay, ThresholdsOverlay } from './overlays';
 
 export const chartConfig = {
@@ -68,6 +69,7 @@ export function ChartAreaInteractive({
   overlayForecastData = {},
   hiddenSeries,
   disableForecastHistoricalBridge,
+  overlayElements: overlayElementsProp,
   ...restProps
 }: ChartAreaInteractiveProps) {
   const seriesHidden = hiddenSeries ?? new Set<string>();
@@ -161,10 +163,14 @@ export function ChartAreaInteractive({
     loadingMessage,
     excludeLegendIds,
     forecastLineStyle,
+    overlayElements: overlayElementsProp,
     // loadingAnalyses,
     ...restProps,
   };
 
+  const brushEnabled =
+    !disableTimeRangeSelector && !loading && bridgedChartData.length > 1;
+
   const renderChart = () => {
     const overlayClassName = cn(chartContainerClassName);
 
@@ -237,7 +243,14 @@ export function ChartAreaInteractive({
         </div>
       )}
 
-      {renderChart()}
+      <TimeRangeBrushHost
+        chartData={bridgedChartData}
+        onTimeRangeChange={onTimeRangeChange}
+        enabled={brushEnabled}
+        layoutKey={chartRenderId ?? null}
+      >
+        {renderChart()}
+      </TimeRangeBrushHost>
     </InteractionOverlay>
   );
 }

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.types.ts

@@ -2,8 +2,6 @@ import { BaseChartWrapperProps } from '#uilib/components/ui/Chart/components/Bas
 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 {
@@ -28,7 +26,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/src/components/ui/ChartAreaInteractive/TimeRangeBrushLayer.styl

@@ -0,0 +1,21 @@
+.selection
+  position absolute
+  top 0
+  bottom 0
+  background-color var(--brand-color-500)
+  opacity 0.1
+  border 1px solid var(--ring)
+  pointer-events none
+  box-sizing border-box
+
+.host
+  position relative
+  width 100%
+  overflow visible
+  touch-action pan-y
+
+.plotBox
+  position absolute
+  z-index 8
+  pointer-events none
+  box-sizing border-box