semiotic 3.1.1 → 3.2.0

package/dist/components/semiotic-themes.d.ts

@@ -0,0 +1,64 @@
+/**
+ * semiotic/themes — Named theme presets for Semiotic charts.
+ *
+ * Each theme provides light and dark mode variants as full SemioticTheme objects.
+ * Use with ThemeProvider: `<ThemeProvider theme={TUFTE_LIGHT} />` or by name:
+ * `<ThemeProvider theme="tufte" />` / `<ThemeProvider theme="tufte-dark" />`.
+ *
+ * Also exports `themeToCSS()` and `themeToTokens()` for serialization.
+ */
+import type { SemioticTheme } from "./store/ThemeStore";
+import { LIGHT_THEME, DARK_THEME, HIGH_CONTRAST_THEME, COLOR_BLIND_SAFE_CATEGORICAL } from "./store/ThemeStore";
+export { LIGHT_THEME, DARK_THEME, HIGH_CONTRAST_THEME, COLOR_BLIND_SAFE_CATEGORICAL };
+export type { SemioticTheme };
+export declare const PASTELS_LIGHT: SemioticTheme;
+export declare const PASTELS_DARK: SemioticTheme;
+export declare const BI_TOOL_LIGHT: SemioticTheme;
+export declare const BI_TOOL_DARK: SemioticTheme;
+export declare const ITALIAN_LIGHT: SemioticTheme;
+export declare const ITALIAN_DARK: SemioticTheme;
+export declare const TUFTE_LIGHT: SemioticTheme;
+export declare const TUFTE_DARK: SemioticTheme;
+export declare const JOURNALIST_LIGHT: SemioticTheme;
+export declare const JOURNALIST_DARK: SemioticTheme;
+export declare const PLAYFUL_LIGHT: SemioticTheme;
+export declare const PLAYFUL_DARK: SemioticTheme;
+/** All named theme presets, keyed by slug. */
+export declare const THEME_PRESETS: Record<string, SemioticTheme>;
+/** All valid named theme strings for ThemeProvider. */
+export type ThemePresetName = keyof typeof THEME_PRESETS;
+/**
+ * Resolve a theme preset name to a SemioticTheme object.
+ * Returns undefined if the name is not recognized.
+ */
+export declare function resolveThemePreset(name: string): SemioticTheme | undefined;
+/**
+ * Convert a SemioticTheme to a CSS custom properties string.
+ * Useful for SSR or generating stylesheet content.
+ *
+ * @param theme - A SemioticTheme object
+ * @param selector - CSS selector to scope the variables (default: `:root`)
+ * @returns CSS string with custom properties
+ *
+ * @example
+ * ```ts
+ * const css = themeToCSS(TUFTE_LIGHT, ".my-charts")
+ * // .my-charts {
+ * //   --semiotic-bg: #fffff8;
+ * //   --semiotic-text: #111111;
+ * //   ...
+ * // }
+ * ```
+ */
+export declare function themeToCSS(theme: SemioticTheme, selector?: string): string;
+/**
+ * Convert a SemioticTheme to a design tokens JSON object.
+ * Compatible with Style Dictionary / Design Token Community Group format.
+ *
+ * @example
+ * ```ts
+ * const tokens = themeToTokens(TUFTE_LIGHT)
+ * // { semiotic: { bg: { $value: "#fffff8", $type: "color" }, ... } }
+ * ```
+ */
+export declare function themeToTokens(theme: SemioticTheme): Record<string, any>;

package/dist/components/semiotic-xy.d.ts

@@ -14,4 +14,5 @@ export { Heatmap } from "./charts/xy/Heatmap";
 export { ScatterplotMatrix } from "./charts/xy/ScatterplotMatrix";
 export { MinimapChart } from "./charts/xy/MinimapChart";
 export { QuadrantChart } from "./charts/xy/QuadrantChart";
+export { MultiAxisLineChart } from "./charts/xy/MultiAxisLineChart";
 export type { StreamXYFrameProps, StreamXYFrameHandle } from "./stream/types";

package/dist/components/semiotic.d.ts

@@ -1,10 +1,11 @@
 import StreamXYFrame from "./stream/StreamXYFrame";
 import StreamOrdinalFrame from "./stream/StreamOrdinalFrame";
 import StreamNetworkFrame from "./stream/StreamNetworkFrame";
-import { Scatterplot, ConnectedScatterplot, LineChart, AreaChart, StackedAreaChart, Heatmap, BubbleChart, BarChart, StackedBarChart, SwarmPlot, BoxPlot, Histogram, ViolinPlot, RidgelinePlot, DotPlot, PieChart, DonutChart, GroupedBarChart, ForceDirectedGraph, ChordDiagram, SankeyDiagram, TreeDiagram, Treemap, CirclePack, OrbitDiagram, ScatterplotMatrix, MinimapChart, QuadrantChart } from "./charts";
+import { Scatterplot, ConnectedScatterplot, LineChart, AreaChart, StackedAreaChart, Heatmap, BubbleChart, BarChart, StackedBarChart, SwarmPlot, BoxPlot, Histogram, ViolinPlot, RidgelinePlot, DotPlot, PieChart, DonutChart, GroupedBarChart, FunnelChart, ForceDirectedGraph, ChordDiagram, SankeyDiagram, TreeDiagram, Treemap, CirclePack, OrbitDiagram, ScatterplotMatrix, MinimapChart, QuadrantChart, MultiAxisLineChart } from "./charts";
 import { LinkedCharts } from "./LinkedCharts";
 import { ThemeProvider, useTheme } from "./ThemeProvider";
 import { exportChart } from "./export/exportChart";
+import { createHatchPattern } from "./charts/shared/hatchPattern";
 import { toConfig, fromConfig, toURL, fromURL, copyConfig, configToJSX } from "./export/chartConfig";
 import { serializeSelections, deserializeSelections } from "./export/selectionSerializer";
 import { fromVegaLite } from "./data/fromVegaLite";
@@ -22,8 +23,8 @@ import { RealtimeTemporalHistogram, RealtimeHistogram } from "./charts/realtime/
 import { RealtimeSwarmChart } from "./charts/realtime/RealtimeSwarmChart";
 import { RealtimeWaterfallChart } from "./charts/realtime/RealtimeWaterfallChart";
 import { RealtimeHeatmap } from "./charts/realtime/RealtimeHeatmap";
-export { StreamXYFrame, StreamOrdinalFrame, StreamNetworkFrame, Scatterplot, ConnectedScatterplot, LineChart, AreaChart, StackedAreaChart, Heatmap, BubbleChart, BarChart, StackedBarChart, SwarmPlot, BoxPlot, Histogram, ViolinPlot, RidgelinePlot, DotPlot, ForceDirectedGraph, ChordDiagram, SankeyDiagram, TreeDiagram, PieChart, DonutChart, GroupedBarChart, Treemap, CirclePack, OrbitDiagram, ScatterplotMatrix, MinimapChart, QuadrantChart, LinkedCharts, ThemeProvider, useTheme, exportChart, toConfig, fromConfig, toURL, fromURL, copyConfig, configToJSX, serializeSelections, deserializeSelections, fromVegaLite, ChartErrorBoundary, ChartContainer, ChartGrid, CategoryColorProvider, useCategoryColors, ContextLayout, DetailsPanel, Tooltip, MultiLineTooltip, normalizeTooltip, RingBuffer, IncrementalExtent, RealtimeLineChart, RealtimeTemporalHistogram, RealtimeHistogram, RealtimeSwarmChart, RealtimeWaterfallChart, RealtimeHeatmap };
-export { ScatterplotProps, ConnectedScatterplotProps, LineChartProps, AreaChartProps, StackedAreaChartProps, HeatmapProps, BubbleChartProps, BarChartProps, StackedBarChartProps, SwarmPlotProps, BoxPlotProps, HistogramProps, ViolinPlotProps, DotPlotProps, PieChartProps, DonutChartProps, GroupedBarChartProps, RidgelinePlotProps, OrbitDiagramProps, OrbitNode, ForceDirectedGraphProps, ChordDiagramProps, SankeyDiagramProps, TreeDiagramProps, TreemapProps, CirclePackProps, ScatterplotMatrixProps, MinimapChartProps, MinimapConfig, QuadrantChartProps, QuadrantsConfig, QuadrantConfig, CenterlineStyle, BaseChartProps, AxisConfig, Accessor, ChartAccessor, ChartMode } from "./charts";
+export { StreamXYFrame, StreamOrdinalFrame, StreamNetworkFrame, Scatterplot, ConnectedScatterplot, LineChart, AreaChart, StackedAreaChart, Heatmap, BubbleChart, BarChart, StackedBarChart, SwarmPlot, BoxPlot, Histogram, ViolinPlot, RidgelinePlot, DotPlot, ForceDirectedGraph, ChordDiagram, SankeyDiagram, TreeDiagram, PieChart, DonutChart, FunnelChart, GroupedBarChart, Treemap, CirclePack, OrbitDiagram, ScatterplotMatrix, MinimapChart, QuadrantChart, MultiAxisLineChart, LinkedCharts, ThemeProvider, useTheme, exportChart, toConfig, fromConfig, toURL, fromURL, copyConfig, configToJSX, serializeSelections, deserializeSelections, fromVegaLite, ChartErrorBoundary, ChartContainer, ChartGrid, CategoryColorProvider, useCategoryColors, ContextLayout, DetailsPanel, Tooltip, MultiLineTooltip, normalizeTooltip, RingBuffer, IncrementalExtent, RealtimeLineChart, RealtimeTemporalHistogram, RealtimeHistogram, RealtimeSwarmChart, RealtimeWaterfallChart, RealtimeHeatmap, createHatchPattern };
+export { ScatterplotProps, ConnectedScatterplotProps, LineChartProps, AreaChartProps, StackedAreaChartProps, HeatmapProps, BubbleChartProps, BarChartProps, StackedBarChartProps, SwarmPlotProps, BoxPlotProps, HistogramProps, ViolinPlotProps, DotPlotProps, PieChartProps, DonutChartProps, FunnelChartProps, GroupedBarChartProps, RidgelinePlotProps, OrbitDiagramProps, OrbitNode, ForceDirectedGraphProps, ChordDiagramProps, SankeyDiagramProps, TreeDiagramProps, TreemapProps, CirclePackProps, ScatterplotMatrixProps, MinimapChartProps, MinimapConfig, QuadrantChartProps, MultiAxisLineChartProps, MultiAxisSeriesConfig, QuadrantsConfig, QuadrantConfig, CenterlineStyle, BaseChartProps, AxisConfig, Accessor, ChartAccessor, ChartMode } from "./charts";
 export type { StreamXYFrameProps, StreamXYFrameHandle, StreamChartType, RuntimeMode, SceneNode, Changeset, StreamScales, StreamLayout, CurveType, CanvasRendererFn } from "./stream/types";
 export type { StreamRendererFn } from "./stream/renderers/types";
 export type { StreamOrdinalFrameProps, StreamOrdinalFrameHandle, OrdinalChartType, OrdinalScales, OrdinalSceneNode } from "./stream/ordinalTypes";
@@ -37,7 +38,10 @@ export type { UseChartObserverOptions, UseChartObserverResult } from "./LinkedCh
 export type { ChartObservation, OnObservationCallback } from "./store/ObservationStore";
 export type { ResolutionMode, SelectionClause, Selection } from "./store/SelectionStore";
 export type { SemioticTheme } from "./ThemeProvider";
-export { LIGHT_THEME, DARK_THEME } from "./ThemeProvider";
+export { LIGHT_THEME, DARK_THEME, HIGH_CONTRAST_THEME } from "./ThemeProvider";
+export { COLOR_BLIND_SAFE_CATEGORICAL } from "./store/ThemeStore";
+export { themeToCSS, themeToTokens, resolveThemePreset, THEME_PRESETS } from "./semiotic-themes";
+export type { ThemePresetName } from "./semiotic-themes";
 export type { ChartErrorBoundaryProps } from "./ChartErrorBoundary";
 export type { ChartContainerProps, ChartContainerHandle } from "./ChartContainer";
 export type { ChartGridProps } from "./ChartGrid";
@@ -47,7 +51,9 @@ export type { DetailsPanelProps } from "./DetailsPanel";
 export type { ChartConfig, ToConfigOptions, CopyFormat } from "./export/chartConfig";
 export type { VegaLiteSpec, VegaLiteEncoding } from "./data/fromVegaLite";
 export type { SerializedSelections, SerializedSelection, SerializedFieldSelection } from "./export/selectionSerializer";
-export { smartTickFormat } from "./charts/shared/formatUtils";
+export type { HatchPatternOptions } from "./charts/shared/hatchPattern";
+export { smartTickFormat, adaptiveTimeTicks } from "./charts/shared/formatUtils";
+export { darkenColor, lightenColor } from "./charts/shared/colorManipulation";
 export type { TooltipProp, TooltipConfig, TooltipField, MultiLineTooltipConfig } from "./Tooltip/Tooltip";
 export type { ArrowOfTime, WindowMode, ThresholdType, LineStyle, BarStyle, WaterfallStyle, SwarmStyle, AnnotationContext, AnnotationAnchorMode, CrosshairStyle, HoverAnnotationConfig, HoverData } from "./realtime/types";
 export type { RealtimeLineChartProps } from "./charts/realtime/RealtimeLineChart";

package/dist/components/store/ThemeStore.d.ts

@@ -4,11 +4,18 @@ export interface SemioticTheme {
         primary: string;
         categorical: string[];
         sequential: string;
+        /** d3-scale-chromatic diverging scheme name, e.g. "RdBu", "PiYG" */
+        diverging?: string;
         background: string;
         text: string;
         textSecondary: string;
         grid: string;
         border: string;
+        focus?: string;
+        /** Linked hover/selection highlight color */
+        selection?: string;
+        /** Opacity for non-selected (dimmed) elements, 0–1 */
+        selectionOpacity?: number;
     };
     typography: {
         fontFamily: string;
@@ -16,16 +23,29 @@ export interface SemioticTheme {
         labelSize: number;
         tickSize: number;
     };
+    tooltip?: {
+        background?: string;
+        text?: string;
+        borderRadius?: string;
+        fontSize?: string;
+        shadow?: string;
+    };
+    borderRadius?: string;
 }
+/** Color-blind safe categorical palette (8 colors).
+ *  Derived from Wong (2011) "Points of view: Color blindness" — safe for
+ *  deuteranopia, protanopia, and tritanopia. */
+export declare const COLOR_BLIND_SAFE_CATEGORICAL: string[];
 export declare const LIGHT_THEME: SemioticTheme;
 export declare const DARK_THEME: SemioticTheme;
+export declare const HIGH_CONTRAST_THEME: SemioticTheme;
 export interface ThemeStoreState {
     theme: SemioticTheme;
-    setTheme: (theme: Partial<SemioticTheme> | "light" | "dark") => void;
+    setTheme: (theme: Partial<SemioticTheme> | "light" | "dark" | "high-contrast") => void;
 }
 export declare const ThemeProvider: import("react").FC<{
     children: React.ReactNode;
 }>, useThemeSelector: <R>(selector: (state: {
     theme: SemioticTheme;
-    setTheme(theme: Partial<SemioticTheme> | "light" | "dark"): void;
+    setTheme(theme: Partial<SemioticTheme> | "light" | "dark" | "high-contrast"): void;
 }) => R) => R;

package/dist/components/stream/OrdinalSVGOverlay.d.ts

@@ -16,6 +16,7 @@ interface OrdinalSVGOverlayProps {
     };
     scales: OrdinalScales | null;
     showAxes?: boolean;
+    showCategoryTicks?: boolean;
     oLabel?: string;
     rLabel?: string;
     oFormat?: (d: string) => string;

package/dist/components/stream/PipelineStore.d.ts

@@ -119,6 +119,8 @@ export declare class PipelineStore {
     scales: StreamScales | null;
     scene: SceneNode[];
     version: number;
+    /** True when the x accessor returns Date objects (auto-detected on first data ingestion) */
+    xIsDate: boolean;
     private _quadtree;
     private static readonly QUADTREE_THRESHOLD;
     constructor(config: PipelineConfig);

package/dist/components/stream/SVGOverlay.d.ts

@@ -7,7 +7,7 @@ export interface AxisConfig {
     orient: "left" | "right" | "top" | "bottom";
     label?: string;
     ticks?: number;
-    tickFormat?: (d: any) => string;
+    tickFormat?: (d: any, index?: number, allTicks?: number[]) => string;
     baseline?: boolean | "under";
     jaggedBase?: boolean;
     /** Highlight ticks at time boundaries (new month, year, etc.) with semibold text.
@@ -30,7 +30,9 @@ interface SVGOverlayProps {
     axes?: AxisConfig[];
     xLabel?: string;
     yLabel?: string;
-    xFormat?: (d: any) => string;
+    /** Label for the right Y axis (dual-axis charts) */
+    yLabelRight?: string;
+    xFormat?: (d: any, index?: number, allTicks?: number[]) => string;
     yFormat?: (d: any) => string;
     showGrid?: boolean;
     title?: string | ReactNode;
@@ -90,7 +92,7 @@ interface SVGUnderlayProps {
     showAxes?: boolean;
     axes?: AxisConfig[];
     showGrid?: boolean;
-    xFormat?: (d: any) => string;
+    xFormat?: (d: any, index?: number, allTicks?: number[]) => string;
     yFormat?: (d: any) => string;
 }
 export declare function SVGUnderlay(props: SVGUnderlayProps): React.JSX.Element | null;

package/dist/components/stream/accessorUtils.d.ts

@@ -1,3 +1,17 @@
+/**
+ * Compare two accessor specs for equivalence.
+ * - Same reference: always equivalent (`===`)
+ * - String accessors: exact string match
+ * - Function accessors: `.toString()` comparison (catches inline arrow functions
+ *   like `d => d.value` that are recreated on every render but have identical source)
+ * - Mismatched types or undefined vs defined: not equivalent
+ *
+ * **Known limitation**: `.toString()` compares source text, not closure bindings.
+ * Two functions with identical source but different captured variables will appear
+ * equivalent. For closures that depend on changing values, use `useCallback` with
+ * the variable in the dependency array so the reference changes when behavior changes.
+ */
+export declare function accessorsEquivalent(a: string | ((...args: any[]) => any) | undefined, b: string | ((...args: any[]) => any) | undefined): boolean;
 export declare function resolveAccessor<T>(accessor: string | ((d: T) => number) | undefined, fallback: string): (d: T) => number;
 export declare function resolveRawAccessor<T>(accessor: string | ((d: T) => any) | undefined, fallback: string): (d: T) => any;
 export declare function resolveStringAccessor<T>(accessor: string | ((d: T) => string) | undefined, fallback?: string): ((d: T) => string) | undefined;

package/dist/components/stream/networkTypes.d.ts

@@ -54,6 +54,8 @@ export interface RealtimeEdge {
     circularPathData?: any;
     bezier?: BezierCache;
     data?: Record<string, any>;
+    /** Unique key for this edge (supports parallel edges between same node pair) */
+    _edgeKey?: string;
 }
 export interface BezierPoint {
     x: number;

package/dist/components/stream/ordinalSceneBuilders/barFunnelScene.d.ts

@@ -0,0 +1,27 @@
+import type { OrdinalSceneNode, OrdinalLayout } from "../ordinalTypes";
+import type { OrdinalSceneContext } from "./types";
+/**
+ * Bar-funnel scene builder (vertical orientation).
+ *
+ * Renders funnel data as vertical bars — one per step on the x-axis.
+ * Each bar is stacked: solid bottom = retained value, hatched top = dropoff
+ * from the previous step. The first step has no dropoff (100% solid).
+ *
+ * Multi-category: bars are grouped side-by-side within each step,
+ * each with its own retained + dropoff stack.
+ *
+ * The rScale (y-axis) is set by the pipeline based on the data's max value.
+ * Bars are sized proportionally via scales.r so the first step fills the
+ * available height and subsequent steps shrink relative to it.
+ *
+ * Metadata on each rect datum (used by barFunnelLabelRenderer):
+ *  - __barFunnelValue: numeric value for this bar
+ *  - __barFunnelPercent: percent of this category's first-step value
+ *  - __barFunnelIsFirstStep: true for step index 0
+ *  - __barFunnelIsDropoff: true for the dropoff portion (hatched)
+ *  - __barFunnelStep: step name
+ *  - __barFunnelDropoffValue: the dropoff amount
+ *  - __barFunnelCategory: category key (for multi-category)
+ *  - __barFunnelLabelX/Y: position for the floating label
+ */
+export declare function buildBarFunnelScene(ctx: OrdinalSceneContext, layout: OrdinalLayout): OrdinalSceneNode[];

package/dist/components/stream/ordinalSceneBuilders/funnelScene.d.ts

@@ -0,0 +1,26 @@
+import type { OrdinalSceneNode, OrdinalLayout } from "../ordinalTypes";
+import type { OrdinalSceneContext } from "./types";
+/**
+ * Funnel scene builder.
+ *
+ * Steps run top-to-bottom. Each step is a horizontal row whose bar width is
+ * proportional to its value. Multiple categories mirror around the center axis:
+ * with 2 categories, one extends right and the other extends left.
+ *
+ * Produces:
+ *  - RectSceneNode for each bar (step × category)
+ *  - TrapezoidSceneNode for each connector between consecutive steps
+ *
+ * Label metadata on each rect datum (used by funnelLabelRenderer):
+ *  - __funnelStepLabel: step name (only on first category rect per row)
+ *  - __funnelValue: numeric value for this bar
+ *  - __funnelPercent: percent of this category's first-step value
+ *  - __funnelIsFirstStep: true for step index 0 (suppresses "100%")
+ *  - __funnelStepLabelX/Y: center position for step name
+ *  - __funnelValueLabelX/Y: center position for value label
+ *  - __funnelBarW: pixel width of this bar (for min-size suppression)
+ *
+ * NOTE: FunnelChart HOC uses projection="horizontal" so the ordinal band
+ * scale maps to layout.height (y-axis). col.x = y-position, col.width = band height.
+ */
+export declare function buildFunnelScene(ctx: OrdinalSceneContext, layout: OrdinalLayout): OrdinalSceneNode[];

package/dist/components/stream/ordinalTypes.d.ts

@@ -3,7 +3,7 @@ import type { ScaleLinear, ScaleBand } from "d3-scale";
 import type { ArrowOfTime, WindowMode, HoverAnnotationConfig, HoverData, AnnotationContext } from "../realtime/types";
 import type { Style, DecayConfig, PulseConfig, TransitionConfig, StalenessConfig } from "./types";
 import type { LegendGroup } from "../types/legendTypes";
-export type OrdinalChartType = "bar" | "clusterbar" | "point" | "swarm" | "pie" | "donut" | "boxplot" | "violin" | "histogram" | "ridgeline" | "timeline";
+export type OrdinalChartType = "bar" | "clusterbar" | "point" | "swarm" | "pie" | "donut" | "boxplot" | "violin" | "histogram" | "ridgeline" | "timeline" | "funnel" | "bar-funnel";
 export interface OrdinalScales {
     o: ScaleBand<string>;
     r: ScaleLinear<number, number>;
@@ -102,9 +102,18 @@ export interface ConnectorSceneNode {
     group?: string;
     _targetOpacity?: number;
 }
+export interface TrapezoidSceneNode {
+    type: "trapezoid";
+    /** Four corners: [top-left, top-right, bottom-right, bottom-left] */
+    points: [number, number][];
+    style: Style;
+    datum: any;
+    category?: string;
+    _targetOpacity?: number;
+}
 export type { Style, PointSceneNode, RectSceneNode } from "./types";
 import type { PointSceneNode, RectSceneNode } from "./types";
-export type OrdinalSceneNode = RectSceneNode | PointSceneNode | WedgeSceneNode | BoxplotSceneNode | ViolinSceneNode | ConnectorSceneNode;
+export type OrdinalSceneNode = RectSceneNode | PointSceneNode | WedgeSceneNode | BoxplotSceneNode | ViolinSceneNode | ConnectorSceneNode | TrapezoidSceneNode;
 export interface OrdinalColumn {
     name: string;
     x: number;
@@ -144,6 +153,8 @@ export interface OrdinalPipelineConfig {
     showOutliers?: boolean;
     showIQR?: boolean;
     amplitude?: number;
+    connectorOpacity?: number;
+    showLabels?: boolean;
     oSort?: ((a: any, b: any) => number) | boolean | "asc" | "desc";
     connectorAccessor?: string | ((d: any) => string);
     connectorStyle?: Style | ((d: any) => Style);
@@ -189,6 +200,8 @@ export interface StreamOrdinalFrameProps<T = Record<string, any>> {
     showOutliers?: boolean;
     showIQR?: boolean;
     amplitude?: number;
+    connectorOpacity?: number;
+    showLabels?: boolean;
     rExtent?: [number?, number?];
     oExtent?: string[];
     extentPadding?: number;
@@ -203,6 +216,7 @@ export interface StreamOrdinalFrameProps<T = Record<string, any>> {
     colorScheme?: string | string[];
     barColors?: Record<string, string>;
     showAxes?: boolean;
+    showCategoryTicks?: boolean;
     oLabel?: string;
     rLabel?: string;
     oFormat?: (d: string) => string;

package/dist/components/stream/renderers/barFunnelCanvasRenderer.d.ts

@@ -0,0 +1,12 @@
+import type { OrdinalLayout, OrdinalScales, OrdinalSceneNode } from "../ordinalTypes";
+export declare const barFunnelHatchRenderer: (ctx: CanvasRenderingContext2D, nodes: OrdinalSceneNode[], _scales: OrdinalScales, _layout: OrdinalLayout) => void;
+/**
+ * Canvas renderer for bar-funnel labels.
+ *
+ * Draws a floating label above each bar (or bar group) showing:
+ *  - Bold percentage (of first step)
+ *  - Raw value below it
+ *
+ * Labels appear on a white rounded-rect background (matching the reference images).
+ */
+export declare const barFunnelLabelRenderer: (ctx: CanvasRenderingContext2D, nodes: OrdinalSceneNode[], _scales: OrdinalScales, _layout: OrdinalLayout) => void;

package/dist/components/stream/renderers/trapezoidCanvasRenderer.d.ts

@@ -0,0 +1,15 @@
+import type { OrdinalLayout, OrdinalScales, OrdinalSceneNode } from "../ordinalTypes";
+/**
+ * Canvas renderer for trapezoid (funnel connector) nodes.
+ * Draws filled quadrilaterals connecting consecutive funnel steps.
+ */
+export declare const trapezoidCanvasRenderer: (ctx: CanvasRenderingContext2D, nodes: OrdinalSceneNode[], _scales: OrdinalScales, _layout: OrdinalLayout) => void;
+/**
+ * Canvas renderer for funnel labels.
+ *
+ * Renders white text with dark outline (matching reference images):
+ *  - Step name: bold, centered at row top, shown once per step
+ *  - Value (percent): bold, centered in each bar. Suppressed if text overflows bar.
+ *    First step suppresses "(100%)" since it's always 100%.
+ */
+export declare const funnelLabelRenderer: (ctx: CanvasRenderingContext2D, nodes: OrdinalSceneNode[], _scales: OrdinalScales, _layout: OrdinalLayout) => void;

package/dist/components/stream/sceneUtils.d.ts

@@ -0,0 +1,10 @@
+import type { SceneNode } from "./types";
+/**
+ * Extract a display color from a scene node's style.
+ * For lines/areas, prefers stroke (the visible line color).
+ * For points/rects, prefers fill.
+ * For heatcells, reads the top-level `fill` field (style is optional).
+ * For candlesticks, uses `upColor`/`downColor` based on direction.
+ * Returns null if no color can be resolved (e.g. CanvasPattern fill with no stroke).
+ */
+export declare function resolveNodeColor(node: SceneNode | null): string | null;

package/dist/components/stream/types.d.ts

@@ -61,7 +61,8 @@ export interface Style {
     strokeWidth?: number;
     strokeDasharray?: string;
     strokeLinecap?: "butt" | "round" | "square";
-    fill?: string;
+    /** Fill color or CanvasPattern (e.g. from createHatchPattern) */
+    fill?: string | CanvasPattern;
     fillOpacity?: number;
     opacity?: number;
     /** For icon/isotype bars: an image to stamp instead of filling */
@@ -342,13 +343,15 @@ export interface StreamXYFrameProps<T = Record<string, any>> {
         orient: "left" | "right" | "top" | "bottom";
         label?: string;
         ticks?: number;
-        tickFormat?: (d: any) => string;
+        tickFormat?: (d: any, index?: number, allTicks?: number[]) => string;
         baseline?: boolean | "under";
         jaggedBase?: boolean;
     }>;
     xLabel?: string;
     yLabel?: string;
-    xFormat?: (d: any) => string;
+    /** Label for the right Y axis (dual-axis charts) */
+    yLabelRight?: string;
+    xFormat?: (d: any, index?: number, allTicks?: number[]) => string;
     yFormat?: (d: any) => string;
     tickFormatTime?: (value: number) => string;
     tickFormatValue?: (value: number) => string;
@@ -391,6 +394,8 @@ export interface StreamXYFrameProps<T = Record<string, any>> {
     foregroundGraphics?: ReactNode;
     /** Canvas renderers executed before the chart-type renderers (e.g. connecting lines under points) */
     canvasPreRenderers?: CanvasRendererFn[];
+    /** SVG pre-renderers for SSR — SVG equivalent of canvasPreRenderers, rendered under data marks */
+    svgPreRenderers?: SVGPreRendererFn[];
     title?: string | ReactNode;
     categoryAccessor?: string | ((d: T) => string);
     /** Configurable opacity decay for older data points */
@@ -428,4 +433,6 @@ export interface StreamXYFrameHandle<T = Record<string, any>> {
     } | null;
 }
 export type CanvasRendererFn = (ctx: CanvasRenderingContext2D, nodes: SceneNode[], scales: StreamScales, layout: StreamLayout) => void;
+/** SVG equivalent of CanvasRendererFn — returns React elements for SSR/SVG rendering */
+export type SVGPreRendererFn = (nodes: SceneNode[], scales: StreamScales, layout: StreamLayout) => ReactNode;
 export type { ArrowOfTime, WindowMode, LineStyle, BarStyle, WaterfallStyle, SwarmStyle, HoverAnnotationConfig, HoverData, AnnotationContext, AnnotationAnchorMode };