semiotic 3.5.2 → 3.5.3

package/dist/components/charts/xy/Scatterplot.d.ts

@@ -14,9 +14,13 @@ export interface ScatterplotProps<TDatum extends Datum = Datum> extends BaseChar
     /** Array of data points. Each point should have x and y properties. */
     data?: TDatum[];
     /** Field name or function to access x values @default "x" */
-    xAccessor?: ChartAccessor<TDatum, number>;
+    xAccessor?: ChartAccessor<TDatum, number | Date | string>;
     /** Field name or function to access y values @default "y" */
     yAccessor?: ChartAccessor<TDatum, number>;
+    /** X scale type @default "linear" */
+    xScaleType?: "linear" | "log" | "time";
+    /** Y scale type @default "linear" */
+    yScaleType?: "linear" | "log";
     /** Field name or function to determine point color */
     colorBy?: ChartAccessor<TDatum, string>;
     /** Color scheme for categorical data or custom colors array @default "category10" */

package/dist/components/semiotic.d.ts

@@ -25,7 +25,7 @@ import { RealtimeWaterfallChart } from "./charts/realtime/RealtimeWaterfallChart
 import { RealtimeHeatmap } from "./charts/realtime/RealtimeHeatmap";
 export { StreamXYFrame, StreamOrdinalFrame, StreamNetworkFrame, Scatterplot, ConnectedScatterplot, LineChart, AreaChart, DifferenceChart, StackedAreaChart, Heatmap, BubbleChart, BarChart, StackedBarChart, LikertChart, SwarmPlot, BoxPlot, Histogram, ViolinPlot, RidgelinePlot, DotPlot, ForceDirectedGraph, ChordDiagram, SankeyDiagram, ProcessSankey, TreeDiagram, PieChart, DonutChart, GaugeChart, FunnelChart, GroupedBarChart, SwimlaneChart, Treemap, CirclePack, OrbitDiagram, ScatterplotMatrix, MinimapChart, QuadrantChart, MultiAxisLineChart, CandlestickChart, XYCustomChart, NetworkCustomChart, OrdinalCustomChart, 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, DifferenceChartProps, StackedAreaChartProps, HeatmapProps, BubbleChartProps, BarChartProps, StackedBarChartProps, LikertChartProps, SwarmPlotProps, BoxPlotProps, HistogramProps, ViolinPlotProps, DotPlotProps, PieChartProps, DonutChartProps, GaugeChartProps, GaugeThreshold, FunnelChartProps, GroupedBarChartProps, SwimlaneChartProps, RidgelinePlotProps, OrbitDiagramProps, OrbitNode, ForceDirectedGraphProps, ChordDiagramProps, SankeyDiagramProps, ProcessSankeyProps, ProcessSankeyTick, TreeDiagramProps, TreemapProps, CirclePackProps, ScatterplotMatrixProps, MinimapChartProps, MinimapConfig, QuadrantChartProps, MultiAxisLineChartProps, MultiAxisSeriesConfig, CandlestickChartProps, 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 { StreamXYFrameProps, StreamXYFrameHandle, StreamChartType, RuntimeMode, SceneNode, Changeset, StreamScales, StreamLayout, CurveType, CanvasRendererFn, XYFrameAxisConfig, BandConfig } from "./stream/types";
 export type { StreamRendererFn } from "./stream/renderers/types";
 export type { StreamOrdinalFrameProps, StreamOrdinalFrameHandle, OrdinalChartType, OrdinalScales, OrdinalSceneNode } from "./stream/ordinalTypes";
 export type { StreamNetworkFrameProps, StreamNetworkFrameHandle, NetworkChartType, NetworkSceneNode, NetworkSceneEdge, NetworkLabel, ThresholdAlertConfig } from "./stream/networkTypes";

package/dist/components/server/renderToStaticSVG.d.ts

@@ -22,6 +22,7 @@ import type { StreamGeoFrameProps } from "../stream/geoTypes";
 import { type ThemeInput } from "./themeResolver";
 import { CHART_CONFIGS } from "./serverChartConfigs";
 type FrameType = "xy" | "ordinal" | "network" | "geo";
+type StaticFrameProps = (StreamXYFrameProps | StreamNetworkFrameProps | StreamOrdinalFrameProps | StreamGeoFrameProps) & ThemeAwareProps;
 interface ThemeAwareProps {
     theme?: ThemeInput;
     showLegend?: boolean;
@@ -35,7 +36,7 @@ interface ThemeAwareProps {
     /** Prefix for SVG element IDs — used by renderDashboard to avoid collisions */
     _idPrefix?: string;
 }
-export declare function renderToStaticSVG(frameType: FrameType, props: (StreamXYFrameProps | StreamNetworkFrameProps | StreamOrdinalFrameProps | StreamGeoFrameProps) & ThemeAwareProps): string;
+export declare function renderToStaticSVG(frameType: FrameType, props: StaticFrameProps): string;
 export declare function renderXYToStaticSVG(props: StreamXYFrameProps & ThemeAwareProps): string;
 export declare function renderOrdinalToStaticSVG(props: StreamOrdinalFrameProps & ThemeAwareProps): string;
 export declare function renderNetworkToStaticSVG(props: StreamNetworkFrameProps & ThemeAwareProps): string;

package/dist/components/server/serverChartConfigs.d.ts

@@ -27,6 +27,7 @@ export declare const CHART_CONFIGS: {
         };
     };
     ConnectedScatterplot: ChartConfig;
+    QuadrantChart: ChartConfig;
     Heatmap: ChartConfig;
     BarChart: ChartConfig;
     StackedBarChart: ChartConfig;

package/dist/components/server/staticAnnotations.d.ts

@@ -29,7 +29,7 @@ interface AnnotationLayout {
     height: number;
 }
 export interface StaticAnnotationConfig {
-    annotations: Datum[];
+    annotations?: Datum[];
     scales: AnnotationScales;
     layout: AnnotationLayout;
     theme: SemioticTheme;

package/dist/components/server/themeResolver.d.ts

@@ -6,7 +6,12 @@
  * No CSS custom properties — everything is concrete for inline SVG.
  */
 import type { SemioticTheme } from "../store/ThemeStore";
-export type ThemeInput = string | Partial<SemioticTheme> | undefined;
+type PartialThemeObject = Omit<Partial<SemioticTheme>, "colors" | "typography" | "tooltip"> & {
+    colors?: Partial<SemioticTheme["colors"]>;
+    typography?: Partial<SemioticTheme["typography"]>;
+    tooltip?: Partial<NonNullable<SemioticTheme["tooltip"]>>;
+};
+export type ThemeInput = string | PartialThemeObject | undefined;
 /**
  * Resolve a theme input to a full SemioticTheme object.
  *
@@ -37,3 +42,4 @@ export declare function themeStyles(theme: SemioticTheme): {
     titleFontSize: number;
     tickFontFamily: string;
 };
+export {};

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

@@ -90,6 +90,12 @@ export interface ThemeStoreState {
     theme: SemioticTheme;
     setTheme: (theme: ThemeStoreUpdate) => void;
 }
-export type ThemeStoreUpdate = Partial<SemioticTheme> | "light" | "dark" | "high-contrast";
+export type SemioticThemeUpdate = Omit<Partial<SemioticTheme>, "colors" | "typography" | "tooltip" | "accessibility"> & {
+    colors?: Partial<SemioticTheme["colors"]>;
+    typography?: Partial<SemioticTheme["typography"]>;
+    tooltip?: Partial<NonNullable<SemioticTheme["tooltip"]>>;
+    accessibility?: Partial<NonNullable<SemioticTheme["accessibility"]>>;
+};
+export type ThemeStoreUpdate = SemioticThemeUpdate | "light" | "dark" | "high-contrast";
 export declare function resolveThemeUpdate(current: SemioticTheme, theme: ThemeStoreUpdate): SemioticTheme;
 export declare const ThemeProvider: import("react").FC<import("./createStore").StoreProviderProps<ThemeStoreState>>, useThemeSelector: <R>(selector: (state: ThemeStoreState) => R) => R;

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

@@ -1,14 +1,14 @@
 import * as React from "react";
 /** Scene node type used by the accessible data table — accepts any frame's scene nodes */
 type AnySceneNode = {
-    type: string;
+    type?: string;
     [key: string]: any;
 };
 declare const SR_ONLY_STYLE: React.CSSProperties;
 /**
  * Compute an aria-label describing the chart type and data shape from the scene graph.
  */
-export declare function computeCanvasAriaLabel(scene: AnySceneNode[], chartType: string): string;
+export declare function computeCanvasAriaLabel(scene: AnySceneNode[] | null | undefined, chartType: string): string;
 /**
  * Compute an aria-label for network charts from scene nodes and edges.
  */

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

@@ -1,8 +1,10 @@
 import type { Datum } from "../charts/shared/datumTypes";
 import { type Quadtree } from "d3-quadtree";
 import { RingBuffer } from "../realtime/RingBuffer";
-import type { Changeset, StreamChartType, StreamScales, StreamLayout, SceneNode, PointSceneNode, CandlestickStyle, Style, ArrowOfTime, WindowMode, DecayConfig, PulseConfig, TransitionConfig, StalenessConfig, CurveType, BarStyle, ThemeSemanticColors } from "./types";
+import type { Changeset, StreamChartType, StreamScales, StreamLayout, SceneNode, PointSceneNode, CandlestickStyle, Style, ArrowOfTime, WindowMode, DecayConfig, PulseConfig, TransitionConfig, StalenessConfig, CurveType, BarStyle, ThemeSemanticColors, BandConfig } from "./types";
+import { type CoercibleNumber } from "./accessorUtils";
 import type { ActiveTransition } from "./pipelineTransitionUtils";
+import type { ResolvedRibbon } from "./xySceneBuilders/ribbonScene";
 import type { CustomLayout } from "./customLayout";
 import type { MarginType } from "../types/marginType";
 export interface PipelineConfig {
@@ -20,12 +22,12 @@ export interface PipelineConfig {
      *  padded domain so glyphs at the extremes don't clip the plot edge. */
     axisExtent?: import("../charts/shared/axisExtent").AxisExtentMode;
     maxCapacity?: number;
-    xAccessor?: string | ((d: Datum) => number);
-    yAccessor?: string | ((d: Datum) => number);
-    timeAccessor?: string | ((d: Datum) => number);
-    valueAccessor?: string | ((d: Datum) => number);
+    xAccessor?: string | ((d: Datum) => CoercibleNumber);
+    yAccessor?: string | ((d: Datum) => CoercibleNumber);
+    timeAccessor?: string | ((d: Datum) => CoercibleNumber);
+    valueAccessor?: string | ((d: Datum) => CoercibleNumber);
     colorAccessor?: string | ((d: Datum) => string);
-    sizeAccessor?: string | ((d: Datum) => number);
+    sizeAccessor?: string | ((d: Datum) => CoercibleNumber);
     groupAccessor?: string | ((d: Datum) => string);
     categoryAccessor?: string | ((d: Datum) => string);
     lineDataAccessor?: string;
@@ -40,16 +42,17 @@ export interface PipelineConfig {
     baseline?: "zero" | "wiggle" | "silhouette";
     /** Stack order — see StreamXYFrameProps.stackOrder. */
     stackOrder?: "key" | "insideOut" | "asc" | "desc";
-    openAccessor?: string | ((d: Datum) => number);
-    highAccessor?: string | ((d: Datum) => number);
-    lowAccessor?: string | ((d: Datum) => number);
-    closeAccessor?: string | ((d: Datum) => number);
+    openAccessor?: string | ((d: Datum) => CoercibleNumber);
+    highAccessor?: string | ((d: Datum) => CoercibleNumber);
+    lowAccessor?: string | ((d: Datum) => CoercibleNumber);
+    closeAccessor?: string | ((d: Datum) => CoercibleNumber);
     candlestickStyle?: CandlestickStyle;
     /** Internal: set by PipelineStore when open/close accessors are both missing */
     candlestickRangeMode?: boolean;
-    boundsAccessor?: string | ((d: Datum) => number);
+    boundsAccessor?: string | ((d: Datum) => CoercibleNumber);
     boundsStyle?: any;
-    y0Accessor?: string | ((d: Datum) => number);
+    y0Accessor?: string | ((d: Datum) => CoercibleNumber);
+    band?: BandConfig | BandConfig[];
     gradientFill?: {
         topOpacity: number;
         bottomOpacity: number;
@@ -149,8 +152,12 @@ export declare class PipelineStore {
     private getCategory;
     private getSize;
     private getColor;
-    private getBounds;
     private getY0;
+    /** Unified ribbon list — `boundsAccessor` + `band` both compose into
+     *  this single array (see `resolveRibbons`). Read by the scene
+     *  builders, y-extent expansion, and tooltip enrichment (which
+     *  filters on `kind === "band"`). Empty when neither prop is set. */
+    resolvedRibbons: ResolvedRibbon[];
     private getOpen;
     private getHigh;
     private getLow;

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

@@ -1,36 +1,9 @@
 import type { Datum } from "../charts/shared/datumTypes";
-import type { StreamScales, MarginalGraphicsConfig } from "./types";
+import type { StreamScales, MarginalGraphicsConfig, XYFrameAxisConfig } from "./types";
 import type { AnnotationContext } from "../realtime/types";
 import type { ReactNode } from "react";
 import type { LegendGroup, GradientLegendConfig } from "../types/legendTypes";
-export interface AxisConfig {
-    orient: "left" | "right" | "top" | "bottom";
-    label?: string;
-    ticks?: number;
-    tickFormat?: (d: any, index?: number, allTicks?: number[]) => string | ReactNode;
-    baseline?: boolean | "under";
-    jaggedBase?: boolean;
-    /** Explicit tick values. When provided, bypasses both d3's "nice"
-     *  generator and `axisExtent: "exact"` — the caller has hand-picked
-     *  the positions. Pixel-distance filtering downstream still drops
-     *  overlapping labels. Accepts `number | Date`: values pass through
-     *  to the scale (d3-scale's `scaleTime` reads Dates natively;
-     *  `scaleLinear` accepts numbers — feeding a Date into a linear
-     *  scale via `valueOf()` works at runtime but `tickFormat` receives
-     *  the Date as-is, so user formatters should match the axis's
-     *  underlying scale type). Mirrors the ordinal frame's
-     *  `rTickValues` contract. */
-    tickValues?: Array<number | Date>;
-    /** Grid line stroke style: "dashed" (6,4), "dotted" (2,4), or a custom strokeDasharray string. Applied to grid lines extending from ticks across the chart area. */
-    gridStyle?: "dashed" | "dotted" | string;
-    /** Always include the domain max as a tick, even if d3 omits it. */
-    includeMax?: boolean;
-    /** Auto-rotate labels 45° when horizontal spacing is too tight. */
-    autoRotate?: boolean;
-    /** Highlight ticks at time boundaries (new month, year, etc.) with semibold text.
-     * `true` auto-detects Date boundaries. A function receives (value, index) and returns true for landmark ticks. */
-    landmarkTicks?: boolean | ((value: any, index: number) => boolean);
-}
+export type AxisConfig = XYFrameAxisConfig;
 interface SVGOverlayProps {
     width: number;
     height: number;

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

@@ -12,6 +12,7 @@
  * 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 extends Record<string, unknown>>(accessor: string | ((d: T) => number) | undefined, fallback: string): (d: T) => number;
+export type CoercibleNumber = number | Date | string;
+export declare function resolveAccessor<T extends Record<string, unknown>>(accessor: string | ((d: T) => CoercibleNumber) | undefined, fallback: string): (d: T) => number;
 export declare function resolveRawAccessor<T extends Record<string, unknown>>(accessor: string | ((d: T) => unknown) | undefined, fallback: string): (d: T) => unknown;
 export declare function resolveStringAccessor<T extends Record<string, unknown>>(accessor: string | ((d: T) => string) | undefined, fallback?: string): ((d: T) => string) | undefined;

package/dist/components/stream/layouts/hierarchyLayoutPlugin.d.ts

@@ -5,7 +5,7 @@ import type { NetworkLayoutPlugin } from "../networkTypes";
  * Uses d3-hierarchy for all layout computations. This plugin is `hierarchical: true`,
  * meaning the input data is a single root node object rather than flat nodes+edges arrays.
  *
- * The hierarchy root is passed via `(config as any).__hierarchyRoot`, set by the store
+ * The hierarchy root is passed via `config.__hierarchyRoot`, set by the store
  * before calling computeLayout. The plugin builds the d3 hierarchy internally, runs the
  * appropriate layout algorithm, and populates the nodes/edges arrays.
  *

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

@@ -262,9 +262,20 @@ export interface NetworkLineEdge {
 export interface NetworkBezierEdge {
     type: "bezier";
     pathD: string;
+    /** When false, the hit tester skips this edge. Used for
+     *  decorative scene-edges like ProcessSankey's gradient stubs —
+     *  they paint visually but shouldn't intercept hover. */
+    interactive?: boolean;
     bezierCache?: BezierCache;
     style: Style;
     datum: SceneDatum;
+    /** Internal gradient used by circular sankey stub bands. */
+    _gradient?: {
+        x0: number;
+        x1: number;
+        from: number;
+        to: number;
+    };
     _pulseIntensity?: number;
     _pulseColor?: string;
     /** Lazily-built Path2D for hit testing; invalidated when pathD changes. */

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

@@ -21,8 +21,22 @@ export interface WedgeSceneNode {
     startAngle: number;
     /** End angle in radians, canvas convention */
     endAngle: number;
-    /** Corner radius for rounded wedge arcs (d3-shape arc.cornerRadius) */
+    /** Corner radius for rounded wedge arcs (d3-shape arc.cornerRadius).
+     *  When set on its own, rounds ALL FOUR corners (the d3-shape default).
+     *  Pair with `roundedEnds` to round only the gauge's outer endpoints —
+     *  the swimlane analogue for radial sectors: first wedge's start side
+     *  + last wedge's end side rounded, internal zone seams stay square. */
     cornerRadius?: number;
+    /** Selective per-end rounding. When omitted, `cornerRadius` rounds all
+     *  four corners. When provided, `cornerRadius` rounds ONLY the sides
+     *  marked `true` — `{ start: true }` rounds the wedge's startAngle
+     *  side (both inner and outer corners at that angle), `{ end: true }`
+     *  rounds the endAngle side. The gauge scene builder uses this to
+     *  paint outer endpoints rounded but internal zone seams square. */
+    roundedEnds?: {
+        start?: boolean;
+        end?: boolean;
+    };
     style: Style;
     datum: SceneDatum;
     category?: string;

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

@@ -0,0 +1,56 @@
+/**
+ * Annular sector path builder with selective per-end corner rounding.
+ *
+ * d3-shape's `arc().cornerRadius()` rounds ALL FOUR corners of an
+ * annular sector uniformly — there's no built-in per-corner control.
+ * For gauges with multiple zones we want the gauge's OUTER endpoints
+ * rounded (the swimlane convention applied radially) but internal zone
+ * seams to stay square. This helper builds the path manually so each
+ * end can be opted in independently.
+ *
+ * The geometry mirrors d3's algorithm: a corner circle of radius `cr`
+ * is inscribed tangent to both walls (the outer/inner arc and the
+ * radial line at the relevant angle). The angular setback from the
+ * radial line is `asin(cr / (R ± cr))` — `R - cr` for outer corners
+ * (corner centers sit `cr` inward of the outer arc), `R + cr` for
+ * inner corners.
+ *
+ * Returned shape is an SVG path `d` attribute, equivalently consumable
+ * by Path2D in canvas. Coordinates are wedge-local (centered at
+ * origin); the renderer translates to `(cx, cy)`.
+ *
+ * Inputs use the **canvas angle convention** (0 = 3 o'clock, positive
+ * clockwise) — same as `WedgeSceneNode.startAngle/endAngle`. d3-shape
+ * uses 0 = 12 o'clock, so callers that pre-rotated by `+π/2` to call
+ * d3-arc should NOT pre-rotate when calling this helper.
+ */
+export interface AnnularPathOptions {
+    innerRadius: number;
+    outerRadius: number;
+    startAngle: number;
+    endAngle: number;
+    cornerRadius?: number;
+    /** Round the side at startAngle (both inner + outer corners there). */
+    roundStart?: boolean;
+    /** Round the side at endAngle (both inner + outer corners there). */
+    roundEnd?: boolean;
+}
+/**
+ * Build the SVG path for an annular sector with per-end rounding.
+ *
+ * When `cornerRadius` is 0 or unset, OR neither `roundStart` nor
+ * `roundEnd` is true, the result is a plain unrounded sector — same
+ * shape `drawWedgeManual` would emit. When both ends are rounded with
+ * a single cornerRadius value, the output matches what d3-arc would
+ * produce. The novel case is mixed rounding: e.g. `roundStart: true,
+ * roundEnd: false` rounds only the gauge's leading edge.
+ *
+ * Defensive clamps:
+ *   - `cornerRadius` is clamped to `(outerRadius - innerRadius) / 2`
+ *     so the corner circles can't cross the ring's centerline (which
+ *     would invert the inner radial line).
+ *   - If the angular sweep is too small to fit two corner radii
+ *     end-to-end on the requested side, that side falls back to
+ *     unrounded so the path stays well-formed.
+ */
+export declare function annularSectorPath(opts: AnnularPathOptions): string;

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

@@ -4,6 +4,7 @@ import type { AnimateProp } from "./pipelineTransitionUtils";
 import type { LegendGroup, GradientLegendConfig } from "../types/legendTypes";
 import type { ArrowOfTime, WindowMode, LineStyle, BarStyle, WaterfallStyle, SwarmStyle, HoverAnnotationConfig, HoverData, AnnotationContext, AnnotationAnchorMode } from "../realtime/types";
 import type { Datum } from "../charts/shared/datumTypes";
+import type { CoercibleNumber } from "./accessorUtils";
 export type SceneDatum = Datum | null;
 export type SeriesDatum = Datum[] | null;
 export type AxisTickFormat = ((d: number, index?: number, allTicks?: number[]) => string) | ((d: string, index?: number, allTicks?: number[]) => string) | ((d: Date, index?: number, allTicks?: number[]) => string);
@@ -89,6 +90,10 @@ export interface Style {
     icon?: HTMLImageElement | HTMLCanvasElement;
     /** Padding between stamped icons */
     iconPadding?: number;
+    /** Optional radius when style callbacks drive point size directly. */
+    r?: number;
+    /** Internal geo line flag: fade line ends at projection clipping edges. */
+    _edgeFade?: boolean;
 }
 export type SceneNode = LineSceneNode | AreaSceneNode | PointSceneNode | RectSceneNode | HeatcellSceneNode | CandlestickSceneNode;
 export interface LineColorThreshold {
@@ -369,6 +374,86 @@ export interface StreamLayout {
     height: number;
 }
 export type CurveType = "linear" | "monotoneX" | "monotoneY" | "step" | "stepAfter" | "stepBefore" | "basis" | "cardinal" | "catmullRom" | "natural";
+/**
+ * Asymmetric min/max envelope drawn under lines/areas. Data-driven cousin
+ * of `boundsAccessor` (which takes a single symmetric ±offset). Use for
+ * throughput min/max ribbons, percentile bands (p5–p95), SLO ranges, and
+ * fan charts (pass an array of bands).
+ *
+ * Painted with the parent series color at 0.2 fillOpacity by default.
+ * Override with `style`. Non-interactive by default; participates in
+ * y-extent auto-derivation so it can't clip.
+ */
+export interface BandConfig<T = Datum> {
+    /** Bottom of the band — field name or accessor function. */
+    y0Accessor: string | ((d: T) => number);
+    /** Top of the band — field name or accessor function. */
+    y1Accessor: string | ((d: T) => number);
+    /**
+     * Style override. Defaults to the parent line/area color at 0.2
+     * fillOpacity, matching the `boundsStyle` cascade.
+     */
+    style?: Style | ((d: T, group?: string) => Style);
+    /**
+     * When the parent chart groups by `lineBy` / `colorBy`:
+     * - `true` (default): one band per group, colored to match the line
+     * - `false`: a single band drawn across the whole dataset (e.g. an
+     *   aggregate min/max across all series)
+     */
+    perSeries?: boolean;
+    /**
+     * Whether the band area participates in hit testing. Defaults to
+     * `false` — the band is decorative; hover/click pass through to the
+     * line on top. Independent of the `datum.band` enrichment, which
+     * happens whenever a band is configured.
+     */
+    interactive?: boolean;
+}
+/**
+ * Per-axis configuration object for an XY frame's `axes: []` array.
+ * Distinct from `AxisConfig` exported from the HOC layer (which is the
+ * chart-level `xLabel` / `yLabel` / `xFormat` / `yFormat` bundle) —
+ * this type describes one axis at a time and is what
+ * `frameProps.axes[i]` consumes.
+ *
+ * Re-exported under the legacy name `AxisConfig` from `SVGOverlay.tsx`
+ * for backwards-compatibility with internal callers; new code should
+ * import this name directly.
+ */
+export interface XYFrameAxisConfig {
+    orient: "left" | "right" | "top" | "bottom";
+    label?: string;
+    ticks?: number;
+    /** Per-axis tick label formatter. ReactNode return is supported and
+     *  renders inside a `<foreignObject>`. */
+    tickFormat?: (d: any, index?: number, allTicks?: number[]) => string | ReactNode;
+    baseline?: boolean | "under";
+    jaggedBase?: boolean;
+    /** Explicit tick values. When provided, bypasses both d3's "nice"
+     *  generator and `axisExtent: "exact"` — the caller has hand-picked
+     *  the positions. Pixel-distance filtering downstream still drops
+     *  overlapping labels. Mirrors the ordinal frame's `rTickValues`. */
+    tickValues?: Array<number | Date>;
+    /** Grid line stroke style: `"dashed"` (6,4), `"dotted"` (2,4), or a
+     *  custom strokeDasharray string. Applied to grid lines extending
+     *  from ticks across the chart area. */
+    gridStyle?: "dashed" | "dotted" | string;
+    /** Always include the domain max as a tick, even if d3 omits it. */
+    includeMax?: boolean;
+    /** Auto-rotate labels 45° when horizontal spacing is too tight. */
+    autoRotate?: boolean;
+    /** Highlight ticks at time boundaries (new month, year, etc.) with
+     *  semibold text. `true` auto-detects Date boundaries. A function
+     *  receives (value, index) and returns true for landmark ticks. */
+    landmarkTicks?: boolean | ((value: any, index: number) => boolean);
+    /** Tick label anchoring strategy:
+     *  - `"middle"` (default): all tick labels centered on the tick mark
+     *  - `"edges"`: first tick label anchors to start, last to end,
+     *    middles stay centered. Pairs naturally with `axisExtent: "exact"`
+     *    — pins the domain to the data min/max AND keeps the extreme
+     *    labels from overflowing the plot. */
+    tickAnchor?: "middle" | "edges";
+}
 export interface StreamXYFrameProps<T = Datum> {
     chartType: StreamChartType;
     runtimeMode?: RuntimeMode;
@@ -377,10 +462,10 @@ export interface StreamXYFrameProps<T = Datum> {
     chunkThreshold?: number;
     /** Number of items per progressive chunk (default 5000) */
     chunkSize?: number;
-    xAccessor?: string | ((d: T) => number);
-    yAccessor?: string | ((d: T) => number);
+    xAccessor?: string | ((d: T) => CoercibleNumber);
+    yAccessor?: string | ((d: T) => CoercibleNumber);
     colorAccessor?: string | ((d: T) => string);
-    sizeAccessor?: string | ((d: T) => number);
+    sizeAccessor?: string | ((d: T) => CoercibleNumber);
     groupAccessor?: string | ((d: T) => string);
     lineDataAccessor?: string;
     curve?: CurveType;
@@ -445,6 +530,19 @@ export interface StreamXYFrameProps<T = Datum> {
      * If omitted, defaults to the line color at 0.2 opacity.
      */
     boundsStyle?: Style | ((d: T, group?: string) => Style);
+    /**
+     * Asymmetric min/max band(s) drawn under the line/area. Differs from
+     * `boundsAccessor` (which is a symmetric ±offset) and from `y0Accessor`
+     * (which replaces the area baseline). A band is a decorative envelope
+     * — painted under the lines, above the grid, non-interactive by default
+     * — driven by per-point `y0`/`y1` accessors.
+     *
+     * Pass an array for multi-band fan charts (e.g. p25/p75 inside p10/p90).
+     * Outer bands first; inner bands stack on top.
+     *
+     * Participates in y-extent auto-derivation when `yExtent` is not pinned.
+     */
+    band?: BandConfig<T> | Array<BandConfig<T>>;
     openAccessor?: string | ((d: T) => number);
     highAccessor?: string | ((d: T) => number);
     lowAccessor?: string | ((d: T) => number);
@@ -488,18 +586,13 @@ export interface StreamXYFrameProps<T = Datum> {
     barColors?: Record<string, string>;
     colorScheme?: string | string[];
     showAxes?: boolean;
-    axes?: Array<{
-        orient: "left" | "right" | "top" | "bottom";
-        label?: string;
-        ticks?: number;
-        /** Explicit tick values. When provided, bypasses both d3's nice-tick
-         *  generator and `axisExtent`; pixel-distance filtering still drops
-         *  overlapping labels. Mirrors the ordinal frame's `rTickValues`. */
-        tickValues?: Array<number | Date>;
-        tickFormat?: AxisTickFormat;
-        baseline?: boolean | "under";
-        jaggedBase?: boolean;
-    }>;
+    /**
+     * Per-axis config array. See `XYFrameAxisConfig` for the full set of
+     * fields — covers `tickValues`, `tickFormat`, `tickAnchor`,
+     * `landmarkTicks`, `autoRotate`, `gridStyle`, `includeMax`,
+     * `baseline`, `jaggedBase`, `label`, and `ticks`.
+     */
+    axes?: XYFrameAxisConfig[];
     xLabel?: string;
     yLabel?: string;
     /** Label for the right Y axis (dual-axis charts) */

package/dist/components/stream/xySceneBuilders/areaGradient.d.ts

@@ -0,0 +1,20 @@
+import type { AreaSceneNode } from "../types";
+type ResolvedAreaGradient = NonNullable<AreaSceneNode["fillGradient"]>;
+type OpacityGradient = {
+    topOpacity: number;
+    bottomOpacity: number;
+};
+type ColorStopGradient = {
+    colorStops: Array<{
+        offset: number;
+        color: string;
+    }>;
+};
+type OpacityGradientConfig = {
+    topOpacity?: number;
+    bottomOpacity?: number;
+};
+export type AreaGradientConfig = boolean | OpacityGradientConfig | ColorStopGradient;
+export declare const DEFAULT_AREA_GRADIENT: OpacityGradient;
+export declare function resolveAreaGradient(gradient: AreaGradientConfig | undefined): ResolvedAreaGradient | undefined;
+export {};

package/dist/components/stream/xySceneBuilders/barScene.d.ts

@@ -9,10 +9,10 @@ import type { Datum } from "../../charts/shared/datumTypes";
  * Dependencies: BinAccumulator (computeBins), SceneGraph (buildRectNode)
  * Consumed by: PipelineStore.buildSceneNodes (chartType "bar")
  */
-import type { SceneNode } from "../types";
+import type { RectSceneNode } from "../types";
 import type { XYSceneContext } from "./types";
 export interface BarSceneResult {
-    nodes: SceneNode[];
+    nodes: RectSceneNode[];
     /** Sorted bin boundary values (edges of all bins) for data-driven brush snapping */
     binBoundaries: number[];
 }

package/dist/components/stream/xySceneBuilders/candlestickScene.d.ts

@@ -6,6 +6,6 @@ import type { Datum } from "../../charts/shared/datumTypes";
  *
  * Consumed by: PipelineStore.buildSceneNodes (chartType "candlestick")
  */
-import type { SceneNode, StreamLayout } from "../types";
+import type { CandlestickSceneNode, StreamLayout } from "../types";
 import type { XYSceneContext } from "./types";
-export declare function buildCandlestickScene(ctx: XYSceneContext, data: Datum[], _layout: StreamLayout): SceneNode[];
+export declare function buildCandlestickScene(ctx: XYSceneContext, data: Datum[], _layout: StreamLayout): CandlestickSceneNode[];

package/dist/components/stream/xySceneBuilders/heatmapScene.d.ts

@@ -1,4 +1,4 @@
 import type { Datum } from "../../charts/shared/datumTypes";
-import type { SceneNode, StreamLayout } from "../types";
+import type { HeatcellSceneNode, StreamLayout } from "../types";
 import type { XYSceneContext } from "./types";
-export declare function buildHeatmapScene(ctx: XYSceneContext, data: Datum[], layout: StreamLayout): SceneNode[];
+export declare function buildHeatmapScene(ctx: XYSceneContext, data: Datum[], layout: StreamLayout): HeatcellSceneNode[];

package/dist/components/stream/xySceneBuilders/lineScene.d.ts

@@ -2,10 +2,11 @@ import type { Datum } from "../../charts/shared/datumTypes";
 /**
  * Line scene builder — produces LineSceneNode[] from grouped data.
  *
- * Handles: color thresholds from annotations, bounds/envelope areas,
- * and curve type attachment for canvas interpolation.
+ * Handles: color thresholds from annotations, ribbon envelopes
+ * (boundsAccessor + band), and curve type attachment for canvas
+ * interpolation.
  *
- * Dependencies: SceneGraph (buildLineNode), boundsScene (buildBoundsForGroup)
+ * Dependencies: SceneGraph (buildLineNode), ribbonScene (buildRibbon*)
  * Consumed by: PipelineStore.buildSceneNodes (chartType "line")
  */
 import type { SceneNode } from "../types";

package/dist/components/stream/xySceneBuilders/pointScene.d.ts

@@ -8,6 +8,6 @@ import type { Datum } from "../../charts/shared/datumTypes";
  * Dependencies: SceneGraph (buildPointNode)
  * Consumed by: PipelineStore.buildSceneNodes (chartTypes "scatter", "bubble")
  */
-import type { SceneNode } from "../types";
+import type { PointSceneNode } from "../types";
 import type { XYSceneContext } from "./types";
-export declare function buildPointScene(ctx: XYSceneContext, data: Datum[]): SceneNode[];
+export declare function buildPointScene(ctx: XYSceneContext, data: Datum[]): PointSceneNode[];