semiotic 2.0.3 → 3.0.0-beta.2

package/dist/charts/network/Treemap.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
+import type { BaseChartProps, ChartAccessor, Accessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * Treemap component props
+ */
+export interface TreemapProps<TNode extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TNode;
+    childrenAccessor?: ChartAccessor<TNode, TNode[]>;
+    valueAccessor?: Accessor<number>;
+    nodeIdAccessor?: ChartAccessor<TNode, string>;
+    colorBy?: ChartAccessor<TNode, string | number>;
+    colorScheme?: string | string[];
+    colorByDepth?: boolean;
+    showLabels?: boolean;
+    labelMode?: "leaf" | "parent" | "all";
+    nodeLabel?: ChartAccessor<TNode, string>;
+    padding?: number;
+    paddingTop?: number;
+    enableHover?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamNetworkFrameProps, "edges" | "size">>;
+}
+/**
+ * Treemap - Visualize hierarchical data as nested rectangles.
+ *
+ * Wraps StreamNetworkFrame (canvas-first) for treemap visualization.
+ */
+export declare function Treemap<TNode extends Record<string, any> = Record<string, any>>(props: TreemapProps<TNode>): React.JSX.Element;
+export declare namespace Treemap {
+    var displayName: string;
+}

package/dist/charts/ordinal/BarChart.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * BarChart component props
+ */
+export interface BarChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    orientation?: "vertical" | "horizontal";
+    categoryLabel?: string;
+    valueLabel?: string;
+    valueFormat?: (d: number | string) => string;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    sort?: boolean | "asc" | "desc" | ((a: Record<string, any>, b: Record<string, any>) => number);
+    barPadding?: number;
+    enableHover?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+/**
+ * BarChart - Visualize categorical data with bars.
+ */
+export declare function BarChart<TDatum extends Record<string, any> = Record<string, any>>(props: BarChartProps<TDatum>): React.JSX.Element;
+export declare namespace BarChart {
+    var displayName: string;
+}

package/dist/charts/ordinal/BoxPlot.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface BoxPlotProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    orientation?: "vertical" | "horizontal";
+    categoryLabel?: string;
+    valueLabel?: string;
+    valueFormat?: (d: number | string) => string;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    showOutliers?: boolean;
+    outlierRadius?: number;
+    categoryPadding?: number;
+    enableHover?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+export declare function BoxPlot<TDatum extends Record<string, any> = Record<string, any>>(props: BoxPlotProps<TDatum>): React.JSX.Element;
+export declare namespace BoxPlot {
+    var displayName: string;
+}

package/dist/charts/ordinal/DonutChart.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface DonutChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    innerRadius?: number;
+    centerContent?: React.ReactNode;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    startAngle?: number;
+    slicePadding?: number;
+    enableHover?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+export declare function DonutChart<TDatum extends Record<string, any> = Record<string, any>>(props: DonutChartProps<TDatum>): React.JSX.Element;
+export declare namespace DonutChart {
+    var displayName: string;
+}

package/dist/charts/ordinal/DotPlot.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface DotPlotProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    orientation?: "vertical" | "horizontal";
+    categoryLabel?: string;
+    valueLabel?: string;
+    valueFormat?: (d: number | string) => string;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    sort?: boolean | "asc" | "desc" | ((a: Record<string, any>, b: Record<string, any>) => number);
+    dotRadius?: number;
+    categoryPadding?: number;
+    enableHover?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+export declare function DotPlot<TDatum extends Record<string, any> = Record<string, any>>(props: DotPlotProps<TDatum>): React.JSX.Element;
+export declare namespace DotPlot {
+    var displayName: string;
+}

package/dist/charts/ordinal/GroupedBarChart.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface GroupedBarChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    groupBy: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    orientation?: "vertical" | "horizontal";
+    categoryLabel?: string;
+    valueLabel?: string;
+    valueFormat?: (d: number | string) => string;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    barPadding?: number;
+    enableHover?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+export declare function GroupedBarChart<TDatum extends Record<string, any> = Record<string, any>>(props: GroupedBarChartProps<TDatum>): React.JSX.Element;
+export declare namespace GroupedBarChart {
+    var displayName: string;
+}

package/dist/charts/ordinal/Histogram.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface HistogramProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    bins?: number;
+    relative?: boolean;
+    categoryLabel?: string;
+    valueLabel?: string;
+    valueFormat?: (d: number | string) => string;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    categoryPadding?: number;
+    enableHover?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+export declare function Histogram<TDatum extends Record<string, any> = Record<string, any>>(props: HistogramProps<TDatum>): React.JSX.Element;
+export declare namespace Histogram {
+    var displayName: string;
+}

package/dist/charts/ordinal/PieChart.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface PieChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    startAngle?: number;
+    slicePadding?: number;
+    enableHover?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+export declare function PieChart<TDatum extends Record<string, any> = Record<string, any>>(props: PieChartProps<TDatum>): React.JSX.Element;
+export declare namespace PieChart {
+    var displayName: string;
+}

package/dist/charts/ordinal/RidgelinePlot.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface RidgelinePlotProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    orientation?: "vertical" | "horizontal";
+    bins?: number;
+    /** Amplitude factor controlling how far density extends (>1 allows overlap) @default 1.5 */
+    amplitude?: number;
+    categoryLabel?: string;
+    valueLabel?: string;
+    valueFormat?: (d: number | string) => string;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    categoryPadding?: number;
+    enableHover?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+/**
+ * RidgelinePlot - Visualize distributions as overlapping one-sided density curves.
+ *
+ * Each category shows its value distribution as a filled area extending from a
+ * baseline. The amplitude prop controls overlap between rows.
+ */
+export declare function RidgelinePlot<TDatum extends Record<string, any> = Record<string, any>>(props: RidgelinePlotProps<TDatum>): React.JSX.Element;
+export declare namespace RidgelinePlot {
+    var displayName: string;
+}

package/dist/charts/ordinal/StackedBarChart.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface StackedBarChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    stackBy: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    orientation?: "vertical" | "horizontal";
+    categoryLabel?: string;
+    valueLabel?: string;
+    valueFormat?: (d: number | string) => string;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    normalize?: boolean;
+    barPadding?: number;
+    enableHover?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+export declare function StackedBarChart<TDatum extends Record<string, any> = Record<string, any>>(props: StackedBarChartProps<TDatum>): React.JSX.Element;
+export declare namespace StackedBarChart {
+    var displayName: string;
+}

package/dist/charts/ordinal/SwarmPlot.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface SwarmPlotProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    orientation?: "vertical" | "horizontal";
+    categoryLabel?: string;
+    valueLabel?: string;
+    valueFormat?: (d: number | string) => string;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    sizeBy?: ChartAccessor<TDatum, number>;
+    sizeRange?: [number, number];
+    pointRadius?: number;
+    pointOpacity?: number;
+    categoryPadding?: number;
+    enableHover?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+export declare function SwarmPlot<TDatum extends Record<string, any> = Record<string, any>>(props: SwarmPlotProps<TDatum>): React.JSX.Element;
+export declare namespace SwarmPlot {
+    var displayName: string;
+}

package/dist/charts/ordinal/ViolinPlot.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+export interface ViolinPlotProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TDatum[];
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    orientation?: "vertical" | "horizontal";
+    bins?: number;
+    curve?: string;
+    showIQR?: boolean;
+    categoryLabel?: string;
+    valueLabel?: string;
+    valueFormat?: (d: number | string) => string;
+    colorBy?: ChartAccessor<TDatum, string>;
+    colorScheme?: string | string[];
+    categoryPadding?: number;
+    enableHover?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
+}
+export declare function ViolinPlot<TDatum extends Record<string, any> = Record<string, any>>(props: ViolinPlotProps<TDatum>): React.JSX.Element;
+export declare namespace ViolinPlot {
+    var displayName: string;
+}

package/dist/charts/realtime/RealtimeHeatmap.d.ts

@@ -0,0 +1,95 @@
+import * as React from "react";
+import type { ArrowOfTime, WindowMode, HoverAnnotationConfig, HoverData, AnnotationContext, DecayConfig, PulseConfig, StalenessConfig } from "../../stream/types";
+import type { RealtimeFrameHandle } from "../../realtime/types";
+import type { ReactNode } from "react";
+export interface RealtimeHeatmapProps {
+    /** Chart dimensions as [width, height] */
+    size?: [number, number];
+    /** Chart width (alternative to size) */
+    width?: number;
+    /** Chart height (alternative to size) */
+    height?: number;
+    /** Chart margins */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /** CSS class name */
+    className?: string;
+    /** Direction time flows */
+    arrowOfTime?: ArrowOfTime;
+    /** Data retention strategy */
+    windowMode?: WindowMode;
+    /** Ring buffer capacity */
+    windowSize?: number;
+    /** Controlled data array */
+    data?: Record<string, any>[];
+    /** Time/x value accessor */
+    timeAccessor?: string | ((d: Record<string, any>) => number);
+    /** Value/y accessor */
+    valueAccessor?: string | ((d: Record<string, any>) => number);
+    /** Category accessor for colored cells */
+    categoryAccessor?: string | ((d: Record<string, any>) => string);
+    /** Fixed time domain */
+    timeExtent?: [number, number];
+    /** Fixed value domain */
+    valueExtent?: [number, number];
+    /** Extent padding factor */
+    extentPadding?: number;
+    /** Number of x-axis bins (default: 20) */
+    heatmapXBins?: number;
+    /** Number of y-axis bins (default: 20) */
+    heatmapYBins?: number;
+    /** Aggregation mode: "count", "sum", or "mean" (default: "count") */
+    aggregation?: "count" | "sum" | "mean";
+    /** Show canvas-drawn axes */
+    showAxes?: boolean;
+    /** Background fill color */
+    background?: string;
+    /** Enable hover interaction */
+    enableHover?: boolean | HoverAnnotationConfig;
+    /** Custom tooltip renderer */
+    tooltipContent?: (d: HoverData) => ReactNode;
+    /** Callback on hover */
+    onHover?: (d: HoverData | null) => void;
+    /** Annotation objects */
+    annotations?: Record<string, any>[];
+    /** SVG annotation render function */
+    svgAnnotationRules?: (annotation: Record<string, any>, index: number, context: AnnotationContext) => ReactNode;
+    /** Custom formatter for time axis ticks */
+    tickFormatTime?: (value: number) => string;
+    /** Custom formatter for value axis ticks */
+    tickFormatValue?: (value: number) => string;
+    /** Configurable opacity decay for older data */
+    decay?: DecayConfig;
+    /** Flash effect on newly inserted data */
+    pulse?: PulseConfig;
+    /** Frame-level data liveness indicator */
+    staleness?: StalenessConfig;
+    /** Custom tooltip renderer (alias for tooltipContent) */
+    tooltip?: (d: HoverData) => ReactNode;
+}
+/**
+ * RealtimeHeatmap - Streaming heatmap with 2D grid binning.
+ *
+ * Wraps StreamXYFrame with `chartType="heatmap"` and `runtimeMode="streaming"`,
+ * providing configurable bin counts and aggregation modes.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<RealtimeFrameHandle>(null)
+ * ref.current.push({ time: Date.now(), x: 42, y: 7 })
+ *
+ * <RealtimeHeatmap
+ *   ref={ref}
+ *   timeAccessor="time"
+ *   valueAccessor="y"
+ *   heatmapXBins={30}
+ *   heatmapYBins={20}
+ *   aggregation="count"
+ * />
+ * ```
+ */
+export declare const RealtimeHeatmap: React.ForwardRefExoticComponent<RealtimeHeatmapProps & React.RefAttributes<RealtimeFrameHandle>>;

package/dist/charts/realtime/RealtimeHistogram.d.ts

@@ -0,0 +1,119 @@
+import * as React from "react";
+import type { ArrowOfTime, WindowMode, HoverAnnotationConfig, HoverData, AnnotationContext } from "../../stream/types";
+import type { RealtimeFrameHandle } from "../../realtime/types";
+import type { ReactNode } from "react";
+export interface RealtimeTemporalHistogramProps {
+    /** Time interval for binning */
+    binSize: number;
+    /** Chart dimensions as [width, height] */
+    size?: [number, number];
+    /** Chart width (alternative to size) */
+    width?: number;
+    /** Chart height (alternative to size) */
+    height?: number;
+    /** Chart margins */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /** CSS class name */
+    className?: string;
+    /** Direction time flows */
+    arrowOfTime?: ArrowOfTime;
+    /** Data retention strategy */
+    windowMode?: WindowMode;
+    /** Ring buffer capacity */
+    windowSize?: number;
+    /** Controlled data array */
+    data?: Record<string, any>[];
+    /** Time value accessor */
+    timeAccessor?: string | ((d: Record<string, any>) => number);
+    /** Value accessor */
+    valueAccessor?: string | ((d: Record<string, any>) => number);
+    /** Fixed time domain */
+    timeExtent?: [number, number];
+    /** Fixed value domain */
+    valueExtent?: [number, number];
+    /** Extent padding factor */
+    extentPadding?: number;
+    /**
+     * Category accessor for stacked bars.
+     * When provided, bars are stacked by category within each bin.
+     */
+    categoryAccessor?: string | ((d: Record<string, any>) => string);
+    /**
+     * Category-to-color map for stacked bars.
+     * Keys also determine stack order (listed keys first, then alphabetical).
+     */
+    colors?: Record<string, string>;
+    /** Bar fill color (non-stacked mode) */
+    fill?: string;
+    /** Bar stroke color */
+    stroke?: string;
+    /** Bar stroke width */
+    strokeWidth?: number;
+    /** Gap between bars in pixels */
+    gap?: number;
+    /** Show canvas-drawn axes */
+    showAxes?: boolean;
+    /** Background fill color */
+    background?: string;
+    /** Enable hover interaction */
+    enableHover?: boolean | HoverAnnotationConfig;
+    /** Custom tooltip renderer */
+    tooltipContent?: (d: HoverData) => ReactNode;
+    /** Callback on hover */
+    onHover?: (d: HoverData | null) => void;
+    /** Annotation objects */
+    annotations?: Record<string, any>[];
+    /** SVG annotation render function */
+    svgAnnotationRules?: (annotation: Record<string, any>, index: number, context: AnnotationContext) => ReactNode;
+    /** Custom formatter for time axis ticks */
+    tickFormatTime?: (value: number) => string;
+    /** Custom formatter for value axis ticks */
+    tickFormatValue?: (value: number) => string;
+    /** Custom tooltip renderer (alias for tooltipContent) */
+    tooltip?: (d: HoverData) => ReactNode;
+    /** Enable linked hover selection events for cross-chart highlighting */
+    linkedHover?: boolean | string | {
+        name?: string;
+        fields: string[];
+    };
+}
+/**
+ * RealtimeTemporalHistogram - Streaming temporal histogram.
+ *
+ * Wraps StreamXYFrame with `chartType="bar"` and `runtimeMode="streaming"`,
+ * binning pushed data points into time-windowed bars. Supports both simple
+ * and stacked (categorical) modes.
+ *
+ * Edge bins that only partially fall within the visible time window are
+ * rendered at proportionally narrower widths (Datadog-style).
+ *
+ * @example
+ * ```tsx
+ * // Simple histogram
+ * <RealtimeTemporalHistogram
+ *   ref={ref}
+ *   binSize={20}
+ *   fill="#007bff"
+ *   enableHover
+ * />
+ *
+ * // Stacked by category
+ * <RealtimeTemporalHistogram
+ *   ref={ref}
+ *   binSize={25}
+ *   categoryAccessor="category"
+ *   colors={{ errors: "#dc3545", warnings: "#fd7e14", info: "#007bff" }}
+ *   enableHover
+ * />
+ * ```
+ */
+export declare const RealtimeTemporalHistogram: React.ForwardRefExoticComponent<RealtimeTemporalHistogramProps & React.RefAttributes<RealtimeFrameHandle>>;
+/** @deprecated Use RealtimeTemporalHistogram instead */
+export declare const RealtimeHistogram: React.ForwardRefExoticComponent<RealtimeTemporalHistogramProps & React.RefAttributes<RealtimeFrameHandle>>;
+/** @deprecated Use RealtimeTemporalHistogramProps instead */
+export type RealtimeHistogramProps = RealtimeTemporalHistogramProps;

package/dist/charts/realtime/RealtimeLineChart.d.ts

@@ -0,0 +1,98 @@
+import * as React from "react";
+import type { ArrowOfTime, WindowMode, HoverAnnotationConfig, HoverData, AnnotationContext, DecayConfig, PulseConfig, StalenessConfig, TransitionConfig } from "../../stream/types";
+import type { RealtimeFrameHandle } from "../../realtime/types";
+import type { ReactNode } from "react";
+export interface RealtimeLineChartProps {
+    /** Chart dimensions as [width, height] */
+    size?: [number, number];
+    /** Chart width (alternative to size) */
+    width?: number;
+    /** Chart height (alternative to size) */
+    height?: number;
+    /** Chart margins */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /** CSS class name */
+    className?: string;
+    /** Direction time flows */
+    arrowOfTime?: ArrowOfTime;
+    /** Data retention strategy */
+    windowMode?: WindowMode;
+    /** Ring buffer capacity */
+    windowSize?: number;
+    /** Controlled data array */
+    data?: Record<string, any>[];
+    /** Time value accessor */
+    timeAccessor?: string | ((d: Record<string, any>) => number);
+    /** Value accessor */
+    valueAccessor?: string | ((d: Record<string, any>) => number);
+    /** Fixed time domain */
+    timeExtent?: [number, number];
+    /** Fixed value domain */
+    valueExtent?: [number, number];
+    /** Extent padding factor */
+    extentPadding?: number;
+    /** Line color */
+    stroke?: string;
+    /** Line width */
+    strokeWidth?: number;
+    /** Dash pattern (e.g. "4,2") */
+    strokeDasharray?: string;
+    /** Show canvas-drawn axes */
+    showAxes?: boolean;
+    /** Background fill color */
+    background?: string;
+    /** Enable hover interaction */
+    enableHover?: boolean | HoverAnnotationConfig;
+    /** Custom tooltip renderer */
+    tooltipContent?: (d: HoverData) => ReactNode;
+    /** Callback on hover */
+    onHover?: (d: HoverData | null) => void;
+    /** Annotation objects */
+    annotations?: Record<string, any>[];
+    /** SVG annotation render function */
+    svgAnnotationRules?: (annotation: Record<string, any>, index: number, context: AnnotationContext) => ReactNode;
+    /** Custom formatter for time axis ticks */
+    tickFormatTime?: (value: number) => string;
+    /** Custom formatter for value axis ticks */
+    tickFormatValue?: (value: number) => string;
+    /** Custom tooltip renderer (alias for tooltipContent) */
+    tooltip?: (d: HoverData) => ReactNode;
+    /** Configurable opacity decay for older data */
+    decay?: DecayConfig;
+    /** Flash effect on newly inserted data */
+    pulse?: PulseConfig;
+    /** Frame-level data liveness indicator */
+    staleness?: StalenessConfig;
+    /** Smooth position interpolation on data change */
+    transition?: TransitionConfig;
+    /** Enable linked hover selection events for cross-chart highlighting */
+    linkedHover?: boolean | string | {
+        name?: string;
+        fields: string[];
+    };
+}
+/**
+ * RealtimeLineChart - Simplified wrapper for streaming line charts.
+ *
+ * Wraps StreamXYFrame with `chartType="line"` and `runtimeMode="streaming"`,
+ * exposing stroke/strokeWidth as top-level props instead of requiring a `lineStyle` object.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<RealtimeFrameHandle>(null)
+ *
+ * <RealtimeLineChart
+ *   ref={ref}
+ *   stroke="#007bff"
+ *   strokeWidth={2}
+ *   windowSize={200}
+ *   enableHover
+ * />
+ * ```
+ */
+export declare const RealtimeLineChart: React.ForwardRefExoticComponent<RealtimeLineChartProps & React.RefAttributes<RealtimeFrameHandle>>;