semiotic 2.0.3 → 3.0.0-beta.2

package/ai/system-prompt.md

@@ -0,0 +1,41 @@
+# Semiotic — React Data Visualization
+
+Use `import { ComponentName } from "semiotic/ai"` for all components below.
+
+## Flat Array Data (`data: object[]`)
+- **LineChart** — `xAccessor`, `yAccessor`, `lineBy` (multi-line), `curve`
+- **AreaChart** — `xAccessor`, `yAccessor`, `areaBy`, `areaOpacity`
+- **StackedAreaChart** — `xAccessor`, `yAccessor`, `areaBy` (required), `normalize`
+- **Scatterplot** — `xAccessor`, `yAccessor`, `colorBy`, `sizeBy`
+- **BubbleChart** — `xAccessor`, `yAccessor`, **`sizeBy`** (required), `sizeRange`
+- **Heatmap** — `xAccessor`, `yAccessor`, `valueAccessor`, `colorScheme` ("blues"|"reds"|"greens"|"viridis")
+- **BarChart** — `categoryAccessor`, `valueAccessor`, `orientation`, `sort`
+- **StackedBarChart** — `categoryAccessor`, `valueAccessor`, **`stackBy`** (required), `normalize`
+- **GroupedBarChart** — `categoryAccessor`, `valueAccessor`, **`groupBy`** (required)
+- **SwarmPlot** — `categoryAccessor`, `valueAccessor`, `pointRadius`
+- **BoxPlot** — `categoryAccessor`, `valueAccessor`, `showOutliers`
+- **Histogram** — `categoryAccessor`, `valueAccessor`, `bins` (default 25), `relative`
+- **ViolinPlot** — `categoryAccessor`, `valueAccessor`, `bins`, `curve`, `showIQR`
+- **DotPlot** — `categoryAccessor`, `valueAccessor`, `sort`, `dotRadius`
+- **PieChart** — `categoryAccessor`, `valueAccessor`
+- **DonutChart** — `categoryAccessor`, `valueAccessor`, `innerRadius`, `centerContent`
+
+## Hierarchical Data (`data: { children: [...] }`)
+- **TreeDiagram** — `childrenAccessor`, `nodeIdAccessor`, `layout` ("tree"|"cluster"|"partition"), `orientation`
+- **Treemap** — `childrenAccessor`, `valueAccessor`, `nodeIdAccessor`, `colorByDepth`
+- **CirclePack** — `childrenAccessor`, `valueAccessor`, `nodeIdAccessor`, `colorByDepth`
+
+## Network Data (`nodes: object[]`, `edges: object[]`)
+- **ForceDirectedGraph** — **`nodes`**, **`edges`** (both required), `nodeIDAccessor`, `sourceAccessor`, `targetAccessor`
+- **SankeyDiagram** — **`edges`** (required), `sourceAccessor`, `targetAccessor`, `valueAccessor`
+- **ChordDiagram** — **`edges`** (required), `sourceAccessor`, `targetAccessor`, `valueAccessor`
+
+## Realtime (ref-based push API, canvas)
+- **RealtimeLineChart** — `ref.current.push(datum)`, `timeAccessor`, `valueAccessor`, `windowSize`
+- **RealtimeHistogram** — **`binSize`** (required), `timeAccessor`, `valueAccessor`
+- **RealtimeSwarmChart** — `timeAccessor`, `valueAccessor`, `categoryAccessor`
+- **RealtimeWaterfallChart** — `timeAccessor`, `valueAccessor`, `positiveColor`, `negativeColor`
+- **StreamNetworkFrame** (`chartType="sankey"`) — `ref.current.push({ source, target, value })`, `sourceAccessor`, `targetAccessor`, `valueAccessor` (import from `semiotic`)
+
+## Common Props (all components)
+`width`, `height`, `margin`, `title`, `colorBy`, `colorScheme`, `enableHover`, `tooltip`, `showLegend`, `className`, `frameProps`

package/dist/AnnotationLayer/AnnotationLayer.d.ts

@@ -2,7 +2,6 @@ import * as React from "react";
 import { AnnotationHandling, AnnotationTypes, AnnotationType } from "./../types/annotationTypes";
 import { LegendProps } from "./../types/legendTypes";
 export interface AnnotationLayerProps {
-    useSpans: boolean;
     legendSettings?: LegendProps;
     margin: {
         top?: number;

package/dist/Axis/axisTitle.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 export interface AxisTitleProps {
     className: string;
     translation: Array<number>;
     position: Array<number>;
     rotation: number | string;
     labelName: any;
-    anchorMod: string;
+    anchorMod: "inherit" | "middle" | "end" | "start";
 }
-export default function AxisTitle(props: AxisTitleProps): JSX.Element;
+export default function AxisTitle(props: AxisTitleProps): React.JSX.Element;

package/dist/Axis/summaryGraphic.d.ts

@@ -14,4 +14,4 @@ export interface SummaryGraphicProps {
     renderedSummary: any;
     points?: React.ReactNode;
 }
-export default function SummaryGraphic(props: SummaryGraphicProps): JSX.Element;
+export default function SummaryGraphic(props: SummaryGraphicProps): React.JSX.Element;

package/dist/ChartErrorBoundary.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export interface ChartErrorBoundaryProps {
+    children: React.ReactNode;
+    /** Custom fallback to show on error. Can be a ReactNode or render function. */
+    fallback?: React.ReactNode | ((error: Error) => React.ReactNode);
+    /** Callback when an error is caught */
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+interface ChartErrorBoundaryState {
+    error: Error | null;
+}
+/**
+ * Error boundary for Semiotic charts.
+ * Catches render errors and shows a friendly fallback instead of crashing the app.
+ *
+ * @example
+ * ```tsx
+ * <ChartErrorBoundary>
+ *   <LineChart data={data} xAccessor="x" yAccessor="y" />
+ * </ChartErrorBoundary>
+ *
+ * // With custom fallback:
+ * <ChartErrorBoundary fallback={<div>Chart failed to render</div>}>
+ *   <BarChart data={data} categoryAccessor="cat" valueAccessor="val" />
+ * </ChartErrorBoundary>
+ *
+ * // With error callback:
+ * <ChartErrorBoundary onError={(err) => logError(err)}>
+ *   <Scatterplot data={data} xAccessor="x" yAccessor="y" />
+ * </ChartErrorBoundary>
+ * ```
+ */
+export declare class ChartErrorBoundary extends React.Component<ChartErrorBoundaryProps, ChartErrorBoundaryState> {
+    constructor(props: ChartErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ChartErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/LinkedCharts.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { ResolutionMode } from "./store/SelectionStore";
+export { useSelection, useLinkedHover, useBrushSelection, useFilteredData } from "./store/useSelection";
+export type { UseSelectionOptions, UseSelectionResult, UseLinkedHoverOptions, UseLinkedHoverResult, UseBrushSelectionOptions, UseBrushSelectionResult } from "./store/useSelection";
+export interface LinkedChartsProps {
+    children: React.ReactNode;
+    /** Pre-configure selections with resolution modes */
+    selections?: Record<string, {
+        resolution?: ResolutionMode;
+    }>;
+}
+/**
+ * LinkedCharts — context provider for coordinated chart views.
+ *
+ * Wraps any number of chart components (at any depth) and enables
+ * cross-highlighting, brushing-and-linking, and cross-filtering via
+ * the `selection`, `linkedHover`, and `linkedBrush` props on each chart.
+ *
+ * @example
+ * ```tsx
+ * <LinkedCharts>
+ *   <Scatterplot data={d} xAccessor="x" yAccessor="y" colorBy="cat"
+ *     linkedHover={{ name: "hl", fields: ["cat"] }}
+ *     selection={{ name: "hl" }} />
+ *   <BarChart data={agg} categoryAccessor="cat" valueAccessor="total"
+ *     selection={{ name: "hl" }} />
+ * </LinkedCharts>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Cross-filtering (each chart's own brush is excluded from its filter)
+ * <LinkedCharts selections={{ dash: { resolution: "crossfilter" } }}>
+ *   <Scatterplot data={d} xAccessor="age" yAccessor="income"
+ *     linkedBrush={{ name: "dash", xField: "age", yField: "income" }}
+ *     selection={{ name: "dash" }} />
+ *   <BarChart data={d} categoryAccessor="region" valueAccessor="count"
+ *     selection={{ name: "dash" }} />
+ * </LinkedCharts>
+ * ```
+ */
+export declare function LinkedCharts({ children, selections }: LinkedChartsProps): React.JSX.Element;

package/dist/ThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { LIGHT_THEME, DARK_THEME } from "./store/ThemeStore";
+import type { SemioticTheme } from "./store/ThemeStore";
+interface ThemeProviderProps {
+    theme?: "light" | "dark" | Partial<SemioticTheme>;
+    children: React.ReactNode;
+}
+declare function ThemeProviderWrapper({ theme, children }: ThemeProviderProps): React.JSX.Element;
+declare function useTheme(): SemioticTheme;
+export { ThemeProviderWrapper as ThemeProvider, useTheme };
+export { LIGHT_THEME, DARK_THEME };
+export type { SemioticTheme };

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,141 @@
+import * as React from "react";
+import type { Accessor } from "../charts/shared/types";
+/**
+ * Configuration for a single tooltip field
+ */
+export interface TooltipField {
+    /**
+     * Label for this field
+     */
+    label?: string;
+    /**
+     * Field name or accessor function to get the value
+     * (alias for 'accessor')
+     */
+    key?: Accessor;
+    /**
+     * Field name or accessor function to get the value
+     */
+    accessor?: Accessor;
+    /**
+     * Optional format function for the value
+     */
+    format?: (value: unknown) => string;
+}
+/**
+ * Base tooltip configuration
+ */
+export interface TooltipConfig {
+    /**
+     * Array of fields to display in the tooltip
+     * Can be simple field names or full TooltipField objects
+     */
+    fields?: Array<string | TooltipField>;
+    /**
+     * Custom title accessor (field name or function)
+     */
+    title?: Accessor<string>;
+    /**
+     * Custom format function for all values (if fields don't specify their own)
+     */
+    format?: (value: unknown) => string;
+    /**
+     * Custom style object for the tooltip container
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom className for the tooltip container
+     */
+    className?: string;
+}
+/**
+ * Multi-line tooltip configuration
+ */
+export interface MultiLineTooltipConfig extends TooltipConfig {
+    /**
+     * Show field labels (default: true)
+     */
+    showLabels?: boolean;
+    /**
+     * Separator between label and value (default: ": ")
+     */
+    separator?: string;
+}
+/**
+ * Default tooltip styles following best practices
+ */
+export declare const defaultTooltipStyle: React.CSSProperties;
+/**
+ * Create a simple tooltip that displays a single value or title
+ *
+ * @example
+ * ```tsx
+ * <Scatterplot
+ *   data={data}
+ *   tooltip={Tooltip({ title: "name" })}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <BarChart
+ *   data={data}
+ *   tooltip={Tooltip({
+ *     title: d => `${d.category}: ${d.value}`,
+ *     style: { background: "#333" }
+ *   })}
+ * />
+ * ```
+ */
+export declare function Tooltip(config?: TooltipConfig): (data: Record<string, unknown>) => React.JSX.Element;
+/**
+ * Create a multi-line tooltip that displays multiple fields
+ *
+ * @example
+ * ```tsx
+ * <Scatterplot
+ *   data={data}
+ *   tooltip={MultiLineTooltip({
+ *     fields: ["name", "value", "category"]
+ *   })}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <LineChart
+ *   data={data}
+ *   tooltip={MultiLineTooltip({
+ *     title: "series",
+ *     fields: [
+ *       { label: "X", accessor: "x", format: v => v.toFixed(2) },
+ *       { label: "Y", accessor: "y", format: v => v.toFixed(2) },
+ *       { label: "Category", accessor: "category" }
+ *     ]
+ *   })}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <BarChart
+ *   data={data}
+ *   tooltip={MultiLineTooltip({
+ *     fields: [
+ *       { label: "Category", accessor: "category" },
+ *       { label: "Sales", accessor: "value", format: v => `$${v.toLocaleString()}` }
+ *     ],
+ *     showLabels: true
+ *   })}
+ * />
+ * ```
+ */
+export declare function MultiLineTooltip(config?: MultiLineTooltipConfig): (data: Record<string, unknown>) => React.JSX.Element;
+/**
+ * Type for tooltip prop that chart components accept
+ */
+export type TooltipProp = boolean | ((data: Record<string, unknown>) => React.ReactNode) | ReturnType<typeof Tooltip> | ReturnType<typeof MultiLineTooltip> | TooltipConfig;
+/**
+ * Convert a tooltip prop to the format Semiotic expects
+ */
+export declare function normalizeTooltip(tooltip: TooltipProp): boolean | Function;

package/dist/TooltipPositioner/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-declare type Props = {
+type Props = {
     tooltipContent: Function;
     tooltipContentArgs?: object;
 };

package/dist/annotationLayerBehavior/annotationHandling.d.ts

@@ -1,8 +1,8 @@
 import { AnnotationProps } from "../types/annotationTypes";
-declare type NoteType = {
+type NoteType = {
     props: AnnotationProps;
 };
-declare type AnnotationTypes = "marginalia" | "bump" | false;
+type AnnotationTypes = "marginalia" | "bump" | false;
 interface Layout {
     type: AnnotationTypes;
     orient?: "nearest" | "left" | "right" | "top" | "bottom" | string[];

package/dist/annotationRules/networkframeRules.d.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
-export declare const htmlFrameHoverRule: ({ d: baseD, i, tooltipContent, optimizeCustomTooltipPosition, useSpans, nodes, edges, nodeIDAccessor }: {
+export declare const htmlFrameHoverRule: ({ d: baseD, i, tooltipContent, optimizeCustomTooltipPosition, nodes, edges, nodeIDAccessor, adjustedSize }: {
     d: any;
     i: any;
     tooltipContent: any;
     optimizeCustomTooltipPosition: any;
-    useSpans: any;
     nodes: any;
     edges: any;
     nodeIDAccessor: any;
+    adjustedSize: any;
 }) => React.JSX.Element;
 export declare const svgNodeRule: ({ d, i, nodeSizeAccessor }: {
     d: any;

package/dist/annotationRules/xyframeRules.d.ts

@@ -93,12 +93,12 @@ export declare const svgAreaAnnotation: ({ d, i, xScale, xAccessor, yScale, yAcc
     yAccessor: any;
     annotationLayer: any;
 }) => React.JSX.Element[];
-export declare const htmlTooltipAnnotation: ({ content, screenCoordinates, i, d, useSpans }: {
+export declare const htmlTooltipAnnotation: ({ content, screenCoordinates, i, d, adjustedSize }: {
     content: any;
     screenCoordinates: any;
     i: any;
     d: any;
-    useSpans: any;
+    adjustedSize: any;
 }) => React.JSX.Element;
 export declare const svgRectEncloseAnnotation: ({ d, i, screenCoordinates }: {
     d: any;

package/dist/batchWork.d.ts

@@ -1,4 +1,4 @@
-declare type BatchOptions = {
+type BatchOptions = {
     signal?: AbortSignal;
     timeFrameMs?: number;
 };

package/dist/charts/index.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Higher-order chart components
+ *
+ * These components provide simplified, opinionated wrappers around
+ * XYFrame, OrdinalFrame, and NetworkFrame for common chart types.
+ *
+ * @module charts
+ */
+export { Scatterplot } from "./xy/Scatterplot";
+export type { ScatterplotProps } from "./xy/Scatterplot";
+export { LineChart } from "./xy/LineChart";
+export type { LineChartProps } from "./xy/LineChart";
+export { AreaChart } from "./xy/AreaChart";
+export type { AreaChartProps } from "./xy/AreaChart";
+export { StackedAreaChart } from "./xy/StackedAreaChart";
+export type { StackedAreaChartProps } from "./xy/StackedAreaChart";
+export { Heatmap } from "./xy/Heatmap";
+export type { HeatmapProps } from "./xy/Heatmap";
+export { BubbleChart } from "./xy/BubbleChart";
+export type { BubbleChartProps } from "./xy/BubbleChart";
+export { ScatterplotMatrix } from "./xy/ScatterplotMatrix";
+export type { ScatterplotMatrixProps } from "./xy/ScatterplotMatrix";
+export { MinimapChart } from "./xy/MinimapChart";
+export type { MinimapChartProps, MinimapConfig } from "./xy/MinimapChart";
+export { BarChart } from "./ordinal/BarChart";
+export type { BarChartProps } from "./ordinal/BarChart";
+export { StackedBarChart } from "./ordinal/StackedBarChart";
+export type { StackedBarChartProps } from "./ordinal/StackedBarChart";
+export { SwarmPlot } from "./ordinal/SwarmPlot";
+export type { SwarmPlotProps } from "./ordinal/SwarmPlot";
+export { BoxPlot } from "./ordinal/BoxPlot";
+export type { BoxPlotProps } from "./ordinal/BoxPlot";
+export { Histogram } from "./ordinal/Histogram";
+export type { HistogramProps } from "./ordinal/Histogram";
+export { ViolinPlot } from "./ordinal/ViolinPlot";
+export type { ViolinPlotProps } from "./ordinal/ViolinPlot";
+export { RidgelinePlot } from "./ordinal/RidgelinePlot";
+export type { RidgelinePlotProps } from "./ordinal/RidgelinePlot";
+export { DotPlot } from "./ordinal/DotPlot";
+export type { DotPlotProps } from "./ordinal/DotPlot";
+export { PieChart } from "./ordinal/PieChart";
+export type { PieChartProps } from "./ordinal/PieChart";
+export { DonutChart } from "./ordinal/DonutChart";
+export type { DonutChartProps } from "./ordinal/DonutChart";
+export { GroupedBarChart } from "./ordinal/GroupedBarChart";
+export type { GroupedBarChartProps } from "./ordinal/GroupedBarChart";
+export { ForceDirectedGraph } from "./network/ForceDirectedGraph";
+export type { ForceDirectedGraphProps } from "./network/ForceDirectedGraph";
+export { ChordDiagram } from "./network/ChordDiagram";
+export type { ChordDiagramProps } from "./network/ChordDiagram";
+export { SankeyDiagram } from "./network/SankeyDiagram";
+export type { SankeyDiagramProps } from "./network/SankeyDiagram";
+export { TreeDiagram } from "./network/TreeDiagram";
+export type { TreeDiagramProps } from "./network/TreeDiagram";
+export { Treemap } from "./network/Treemap";
+export type { TreemapProps } from "./network/Treemap";
+export { CirclePack } from "./network/CirclePack";
+export type { CirclePackProps } from "./network/CirclePack";
+export { RealtimeLineChart } from "./realtime/RealtimeLineChart";
+export type { RealtimeLineChartProps } from "./realtime/RealtimeLineChart";
+export { RealtimeTemporalHistogram, RealtimeHistogram } from "./realtime/RealtimeHistogram";
+export type { RealtimeTemporalHistogramProps, RealtimeHistogramProps } from "./realtime/RealtimeHistogram";
+export { RealtimeSwarmChart } from "./realtime/RealtimeSwarmChart";
+export type { RealtimeSwarmChartProps } from "./realtime/RealtimeSwarmChart";
+export { RealtimeWaterfallChart } from "./realtime/RealtimeWaterfallChart";
+export type { RealtimeWaterfallChartProps } from "./realtime/RealtimeWaterfallChart";
+export { RealtimeHeatmap } from "./realtime/RealtimeHeatmap";
+export type { RealtimeHeatmapProps } from "./realtime/RealtimeHeatmap";
+export type { BaseChartProps, AxisConfig, Accessor, ChartAccessor } from "./shared/types";
+export { useColorScale, useSortedData, DEFAULT_COLOR } from "./shared/hooks";
+export { COLOR_SCHEMES, DEFAULT_COLORS, getColor, createColorScale, getSize } from "./shared/colorUtils";
+export { formatNumber, formatDate, formatAxis, createTooltip, formatLargeNumber, truncateText } from "./shared/formatUtils";
+export { Tooltip, MultiLineTooltip, normalizeTooltip } from "../Tooltip/Tooltip";
+export type { TooltipProp, TooltipConfig, TooltipField, MultiLineTooltipConfig } from "../Tooltip/Tooltip";

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * ChordDiagram component props
+ */
+export interface ChordDiagramProps<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    nodes?: TNode[];
+    edges: TEdge[];
+    sourceAccessor?: ChartAccessor<TEdge, string>;
+    targetAccessor?: ChartAccessor<TEdge, string>;
+    valueAccessor?: ChartAccessor<TEdge, number>;
+    nodeIdAccessor?: ChartAccessor<TNode, string>;
+    colorBy?: ChartAccessor<TNode, string>;
+    colorScheme?: string | string[];
+    edgeColorBy?: "source" | "target" | ((d: any) => string);
+    padAngle?: number;
+    groupWidth?: number;
+    sortGroups?: (a: any, b: any) => number;
+    nodeLabel?: ChartAccessor<TNode, string>;
+    showLabels?: boolean;
+    enableHover?: boolean;
+    edgeOpacity?: number;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamNetworkFrameProps, "edges" | "size">>;
+}
+/**
+ * ChordDiagram - Visualize directed relationships with circular chord layout
+ *
+ * Wraps StreamNetworkFrame (canvas-first) for chord relationship visualization.
+ */
+export declare function ChordDiagram<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>>(props: ChordDiagramProps<TNode, TEdge>): React.JSX.Element;
+export declare namespace ChordDiagram {
+    var displayName: string;
+}

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

@@ -0,0 +1,32 @@
+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";
+/**
+ * CirclePack component props
+ */
+export interface CirclePackProps<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;
+    nodeLabel?: ChartAccessor<TNode, string>;
+    circleOpacity?: number;
+    padding?: number;
+    enableHover?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamNetworkFrameProps, "edges" | "size">>;
+}
+/**
+ * CirclePack - Visualize hierarchical data as nested circles.
+ *
+ * Wraps StreamNetworkFrame (canvas-first) for circle-pack visualization.
+ */
+export declare function CirclePack<TNode extends Record<string, any> = Record<string, any>>(props: CirclePackProps<TNode>): React.JSX.Element;
+export declare namespace CirclePack {
+    var displayName: string;
+}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * ForceDirectedGraph component props
+ */
+export interface ForceDirectedGraphProps<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    nodes: TNode[];
+    edges: TEdge[];
+    nodeIDAccessor?: ChartAccessor<TNode, string>;
+    sourceAccessor?: ChartAccessor<TEdge, string>;
+    targetAccessor?: ChartAccessor<TEdge, string>;
+    nodeLabel?: ChartAccessor<TNode, string>;
+    colorBy?: ChartAccessor<TNode, string>;
+    colorScheme?: string | string[];
+    nodeSize?: number | ChartAccessor<TNode, number>;
+    nodeSizeRange?: [number, number];
+    edgeWidth?: number | ChartAccessor<TEdge, number>;
+    edgeColor?: string;
+    edgeOpacity?: number;
+    iterations?: number;
+    forceStrength?: number;
+    showLabels?: boolean;
+    enableHover?: boolean;
+    showLegend?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamNetworkFrameProps, "nodes" | "edges" | "size">>;
+}
+/**
+ * ForceDirectedGraph - Visualize network relationships with force-directed layout
+ *
+ * Wraps StreamNetworkFrame (canvas-first) for force-directed network visualization.
+ */
+export declare function ForceDirectedGraph<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>>(props: ForceDirectedGraphProps<TNode, TEdge>): React.JSX.Element;
+export declare namespace ForceDirectedGraph {
+    var displayName: string;
+}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * SankeyDiagram component props
+ */
+export interface SankeyDiagramProps<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    nodes?: TNode[];
+    edges: TEdge[];
+    sourceAccessor?: ChartAccessor<TEdge, string>;
+    targetAccessor?: ChartAccessor<TEdge, string>;
+    valueAccessor?: ChartAccessor<TEdge, number>;
+    nodeIdAccessor?: ChartAccessor<TNode, string>;
+    colorBy?: ChartAccessor<TNode, string>;
+    colorScheme?: string | string[];
+    edgeColorBy?: "source" | "target" | "gradient" | ((d: any) => string);
+    orientation?: "horizontal" | "vertical";
+    nodeAlign?: "justify" | "left" | "right" | "center";
+    nodePaddingRatio?: number;
+    nodeWidth?: number;
+    nodeLabel?: ChartAccessor<TNode, string>;
+    showLabels?: boolean;
+    enableHover?: boolean;
+    edgeOpacity?: number;
+    edgeSort?: (a: any, b: any) => number;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamNetworkFrameProps, "edges" | "size">>;
+}
+/**
+ * SankeyDiagram - Visualize flow and magnitude of movement between nodes
+ *
+ * Wraps StreamNetworkFrame (canvas-first) for Sankey flow visualization.
+ */
+export declare function SankeyDiagram<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>>(props: SankeyDiagramProps<TNode, TEdge>): React.JSX.Element;
+export declare namespace SankeyDiagram {
+    var displayName: string;
+}

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

@@ -0,0 +1,34 @@
+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";
+/**
+ * TreeDiagram component props
+ */
+export interface TreeDiagramProps<TNode extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    data: TNode;
+    layout?: "tree" | "cluster" | "partition" | "treemap" | "circlepack";
+    orientation?: "vertical" | "horizontal" | "radial";
+    childrenAccessor?: ChartAccessor<TNode, TNode[]>;
+    valueAccessor?: Accessor<number>;
+    nodeIdAccessor?: ChartAccessor<TNode, string>;
+    colorBy?: ChartAccessor<TNode, string | number>;
+    colorScheme?: string | string[];
+    colorByDepth?: boolean;
+    edgeStyle?: "line" | "curve";
+    nodeLabel?: ChartAccessor<TNode, string>;
+    showLabels?: boolean;
+    nodeSize?: number;
+    enableHover?: boolean;
+    tooltip?: TooltipProp;
+    frameProps?: Partial<Omit<StreamNetworkFrameProps, "edges" | "size">>;
+}
+/**
+ * TreeDiagram - Visualize hierarchical data structures
+ *
+ * Wraps StreamNetworkFrame (canvas-first) for hierarchical tree visualization.
+ */
+export declare function TreeDiagram<TNode extends Record<string, any> = Record<string, any>>(props: TreeDiagramProps<TNode>): React.JSX.Element;
+export declare namespace TreeDiagram {
+    var displayName: string;
+}