semiotic 3.4.0 → 3.4.2

package/CLAUDE.md

@@ -12,7 +12,9 @@
 - Every HOC accepts `frameProps` for pass-through. TypeScript `strict: true`. Every HOC has error boundary + dev-mode validation.
 
 ## Common Props (all HOCs)
-`title`, `description` (aria-label), `summary` (sr-only), `width` (600), `height` (400), `responsiveWidth`, `responsiveHeight`, `margin`, `className`, `color` (uniform fill), `enableHover` (true), `tooltip` (boolean | "multi" | function | config object), `showLegend`, `showGrid` (false), `frameProps`, `onObservation`, `onClick`, `chartId`, `loading` (false), `emptyContent`, `legendInteraction` ("none"|"highlight"|"isolate"), `legendPosition` ("right"|"left"|"top"|"bottom"), `emphasis` ("primary"|"secondary"), `annotations` (array), `accessibleTable` (true), `hoverHighlight` (boolean — dims non-hovered series, requires `colorBy`), `hoverRadius` (30), `animate` (boolean | { duration?, easing?, intro? } — animated intro on first render + smooth transitions on data change; intro defaults to true when animate is enabled)
+`title`, `description` (aria-label), `summary` (sr-only), `width` (600), `height` (400), `responsiveWidth`, `responsiveHeight`, `margin`, `className`, `color` (uniform fill), `stroke` (uniform stroke color — CSS var OK), `strokeWidth` (uniform stroke width in px), `opacity` (uniform 0–1 opacity), `enableHover` (true), `tooltip` (boolean | "multi" | function | config object), `showLegend`, `showGrid` (false), `frameProps`, `onObservation`, `onClick`, `chartId`, `loading` (false), `emptyContent`, `legendInteraction` ("none"|"highlight"|"isolate"), `legendPosition` ("right"|"left"|"top"|"bottom"), `emphasis` ("primary"|"secondary"), `annotations` (array), `accessibleTable` (true), `hoverHighlight` (boolean — dims non-hovered series, requires `colorBy`), `hoverRadius` (30), `animate` (boolean | { duration?, easing?, intro? } — animated intro on first render + smooth transitions on data change; intro defaults to true when animate is enabled)
+
+**Primitive styling props** (`color`, `stroke`, `strokeWidth`, `opacity`) apply to any shape the chart draws (bars, circles, lines, wedges, rects). Precedence: top-level prop > `frameProps.*Style` function return > HOC base > theme fallback. Use CSS variables (`stroke="var(--semiotic-border)"`) for theme-aware, cascade-overridable styling. For per-datum customization, keep using the function-form `frameProps.pieceStyle` / `pointStyle` / `lineStyle` etc. — the top-level prop overlays on top of whatever the function returns.
 
 `onClick` receives `(datum, { x, y })`. `onObservation` receives `{ type, datum?, x?, y?, timestamp, chartType, chartId }`.
 
@@ -29,10 +31,11 @@
 **Heatmap** — `data`, `xAccessor`, `yAccessor`, `valueAccessor`, `colorScheme`, `showValues`, `cellBorderColor`
 **ScatterplotMatrix** — `data`, `fields` (array of numeric field names for grid)
 **MinimapChart** — Overview + detail with linked zoom. Wraps an XY chart.
+**CandlestickChart** — `data`, `xAccessor`, `highAccessor` (req), `lowAccessor` (req), `openAccessor` + `closeAccessor` (optional). With all four: OHLC bars. With only high/low: degrades to a range chart. `candlestickStyle` ({ upColor, downColor, wickColor, rangeColor, bodyWidth, wickWidth }). Honors `mode` (primary/context/sparkline).
 
 ## Ordinal Charts (`semiotic/ordinal`)
 
-**BarChart** — `data`, `categoryAccessor`, `valueAccessor`, `orientation`, `colorBy`, `sort`, `barPadding` (40)
+**BarChart** — `data`, `categoryAccessor`, `valueAccessor`, `orientation`, `colorBy`, `sort`, `barPadding` (40), `roundedTop`, `gradientFill` (`true` | `{topOpacity, bottomOpacity}` | `{colorStops}` — same API as AreaChart; runs tip→base)
 **StackedBarChart** — + `stackBy` (required), `normalize`, `sort` (default false — insertion order)
 **GroupedBarChart** — + `groupBy` (required), `barPadding` (60), `sort` (default false — insertion order)
 **SwarmPlot** — `colorBy`, `sizeBy`, `pointRadius`, `pointOpacity`
@@ -155,7 +158,7 @@ All HOCs accept `annotations` (array). Coordinates use data field names.
 
 ## Theming
 
-CSS custom properties: `--semiotic-bg`, `--semiotic-text`, `--semiotic-text-secondary`, `--semiotic-border`, `--semiotic-grid`, `--semiotic-primary`, `--semiotic-focus`, `--semiotic-font-family`, `--semiotic-annotation-color`, `--semiotic-legend-font-size`, `--semiotic-title-font-size`, `--semiotic-tick-font-family`, `--semiotic-tooltip-bg`/`text`/`radius`/`font-size`/`shadow`.
+CSS custom properties: `--semiotic-bg`, `--semiotic-text`, `--semiotic-text-secondary`, `--semiotic-border`, `--semiotic-grid`, `--semiotic-primary`, `--semiotic-secondary`, `--semiotic-surface`, `--semiotic-success`, `--semiotic-danger`, `--semiotic-warning`, `--semiotic-error`, `--semiotic-info`, `--semiotic-focus`, `--semiotic-font-family`, `--semiotic-annotation-color`, `--semiotic-legend-font-size`, `--semiotic-title-font-size`, `--semiotic-tick-font-family`, `--semiotic-tooltip-bg`/`text`/`radius`/`font-size`/`shadow`.
 
 ```jsx
 <ThemeProvider theme="tufte">       {/* Named preset */}
@@ -166,6 +169,16 @@ CSS custom properties: `--semiotic-bg`, `--semiotic-text`, `--semiotic-text-seco
 Presets: `light`, `dark`, `high-contrast`, `pastels`(-dark), `bi-tool`(-dark), `italian`(-dark), `tufte`(-dark), `journalist`(-dark), `playful`(-dark), `carbon`(-dark).
 Serialization: `themeToCSS(theme, selector)`, `themeToTokens(theme)`, `resolveThemePreset(name)`.
 
+**Semantic status roles** (on every preset): `colors.success`, `colors.danger`, `colors.warning`, `colors.error`, `colors.info`, plus `colors.secondary` and `colors.surface`. Each emits as a `--semiotic-{role}` CSS custom property. Use for status-driven charts: `<Waterfall positiveColor="var(--semiotic-success)" negativeColor="var(--semiotic-danger)" />`, `<Swimlane color="var(--semiotic-warning)" />`, bar stroke delineation `<RealtimeHistogram stroke="var(--semiotic-border)" />`, status annotations.
+
+**Scoped CSS cascade override** (per-subtree, no ThemeProvider needed):
+```jsx
+<div style={{ "--semiotic-danger": "#4b0082" }}>
+  {/* every chart below inherits this danger color via canvas CSS-var lookup */}
+</div>
+```
+Canvas scene builders read CSS variables via `getComputedStyle` on the canvas DOM ancestor, so standard CSS cascade rules apply even though rendering is canvas-based. Use CSS vars for **single-role** overrides; use a nested `ThemeProvider` for **array/scale** overrides (categorical palette, sequential/diverging scheme name).
+
 ## AI Features
 `onObservation`/`useChartObserver`, `toConfig`/`fromConfig`/`toURL`/`fromURL`/`copyConfig`/`configToJSX`, `validateProps(component, props)`, `diagnoseConfig(component, props)`, `exportChart(div, { format })`, `npx semiotic-ai --doctor`
 

package/ai/schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "name": "semiotic",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "description": "React data visualization library for charts, networks, and beyond",
   "tools": [
     {
@@ -932,6 +932,47 @@
         }
       }
     },
+    {
+      "type": "function",
+      "function": {
+        "name": "CandlestickChart",
+        "description": "OHLC candlestick bars, or a range chart when open/close are omitted. Honors mode (primary/context/sparkline). Range variant degrades cleanly: endpoint dots + wick, sized against canvas height so sparkline rows don't render marble-sized dots.",
+        "parameters": {
+          "type": "object",
+          "properties": {
+            "data": { "type": "array", "items": { "type": "object" } },
+            "xAccessor": { "type": "string", "default": "x" },
+            "highAccessor": { "type": "string", "default": "high", "description": "Required. Upper bound (candlestick high or range top)." },
+            "lowAccessor": { "type": "string", "default": "low", "description": "Required. Lower bound (candlestick low or range bottom)." },
+            "openAccessor": { "type": "string", "description": "Optional. Pair with closeAccessor for OHLC; omit both to render a range chart." },
+            "closeAccessor": { "type": "string", "description": "Optional. See openAccessor." },
+            "candlestickStyle": {
+              "type": "object",
+              "description": "Style overrides.",
+              "properties": {
+                "upColor": { "type": "string" },
+                "downColor": { "type": "string" },
+                "wickColor": { "type": "string" },
+                "wickWidth": { "type": "number" },
+                "bodyWidth": { "type": "number" },
+                "rangeColor": { "type": "string", "description": "Color for range-mode dots and wick." }
+              }
+            },
+            "mode": { "type": "string", "enum": ["primary", "context", "sparkline"] },
+            "xLabel": { "type": "string" },
+            "yLabel": { "type": "string" },
+            "title": { "type": "string" },
+            "width": { "type": "number", "default": 600 },
+            "height": { "type": "number", "default": 400 },
+            "enableHover": { "type": "boolean", "default": true },
+            "showGrid": { "type": "boolean", "default": false },
+            "margin": { "type": "object" },
+            "annotations": { "type": "array", "items": { "type": "object" } }
+          },
+          "required": ["highAccessor", "lowAccessor"]
+        }
+      }
+    },
     {
       "type": "function",
       "function": {

package/ai/system-prompt.md

@@ -109,6 +109,10 @@ Or use ThemeProvider with 15 named presets: `<ThemeProvider theme="tufte">`, `"t
 
 `semiotic/themes` entry point: `themeToCSS(theme, selector)` generates CSS string, `themeToTokens(theme)` generates DTCG design tokens, `resolveThemePreset("tufte")` returns theme object by name. Theme objects: `TUFTE_LIGHT`, `TUFTE_DARK`, `PASTELS_LIGHT`, `BI_TOOL_LIGHT`, `ITALIAN_LIGHT`, `JOURNALIST_LIGHT`, `PLAYFUL_LIGHT`, etc.
 
+**Semantic status roles**: Every preset defines `colors.success`, `colors.danger`, `colors.warning`, `colors.error`, `colors.info`, plus `colors.secondary` and `colors.surface`. Each emits as a `--semiotic-{role}` CSS custom property via ThemeProvider. Use for status-driven charts: `<Waterfall positiveColor="var(--semiotic-success)" negativeColor="var(--semiotic-danger)" />`, bar stroke delineation `<RealtimeHistogram stroke="var(--semiotic-border)" />`, status annotations.
+
+**Scoped CSS cascade override** (per-subtree, no ThemeProvider needed): wrap in `<div style={{ "--semiotic-danger": "#c00" }}>` — every chart beneath inherits the override via canvas CSS-var lookup (`getComputedStyle` on the canvas's DOM ancestor). Use CSS vars for **single-role** overrides, nested `ThemeProvider` for **array/scale** overrides.
+
 `COLOR_BLIND_SAFE_CATEGORICAL` — 8-color accessible palette (Wong 2011). Import from `semiotic`.
 
 ## Key Patterns

package/dist/components/Annotation.d.ts

@@ -1,3 +1,43 @@
 import * as React from "react";
-import { AnnotationProps } from "./types/annotationTypes";
-export default function SemioticAnnotation(props: AnnotationProps): React.JSX.Element;
+/** Props for the single-annotation renderer. Consumed only by `SemioticAnnotation`
+ *  below; the broader annotation API flows through the frame-level `annotations`
+ *  array and its `svgAnnotationRules` hook. */
+export interface AnnotationProps {
+    noteData: {
+        eventListeners?: Record<string, (e: React.SyntheticEvent) => void>;
+        events?: Record<string, (e: React.SyntheticEvent) => void>;
+        type: string;
+        screenCoordinates?: number[][];
+        /** When truthy, `screenCoordinates` is read as a sequence of anchor points
+         *  and one annotation renders per coordinate with `nx`/`ny` shared. */
+        coordinates?: boolean;
+        noteHeight?: number | ((d: Record<string, unknown>) => number);
+        noteWidth?: number | ((d: Record<string, unknown>) => number);
+        x: number | number[];
+        y: number | number[];
+        nx?: number;
+        ny?: number;
+        dx?: number;
+        dy?: number;
+        note: {
+            label?: string;
+            title?: string;
+            wrap?: number;
+            orientation?: string;
+            align?: string;
+            noWrap?: boolean;
+        };
+        i?: number;
+        fixedPosition?: boolean;
+        label?: string;
+        connector?: {
+            end?: "arrow";
+        };
+        subject?: Record<string, unknown>;
+        color?: string;
+        className?: string;
+        disable?: string[];
+        [key: string]: unknown;
+    };
+}
+export default function SemioticAnnotation(props: AnnotationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CategoryColors.d.ts

@@ -37,7 +37,7 @@ export interface CategoryColorProviderProps {
  * </CategoryColorProvider>
  * ```
  */
-export declare function CategoryColorProvider({ colors, categories, colorScheme, children, }: CategoryColorProviderProps): React.JSX.Element;
+export declare function CategoryColorProvider({ colors, categories, colorScheme, children, }: CategoryColorProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CategoryColorProvider {
     var displayName: string;
 }

package/dist/components/ChartGrid.d.ts

@@ -33,7 +33,7 @@ export interface ChartGridProps {
  * </ChartGrid>
  * ```
  */
-export declare function ChartGrid({ children, columns, minCellWidth, gap, className, style, }: ChartGridProps): React.JSX.Element;
+export declare function ChartGrid({ children, columns, minCellWidth, gap, className, style, }: ChartGridProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChartGrid {
     var displayName: string;
 }

package/dist/components/ContextLayout.d.ts

@@ -32,7 +32,7 @@ export interface ContextLayoutProps {
  * </ContextLayout>
  * ```
  */
-export declare function ContextLayout({ children, context, position, contextSize, gap, className, style, }: ContextLayoutProps): React.JSX.Element;
+export declare function ContextLayout({ children, context, position, contextSize, gap, className, style, }: ContextLayoutProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ContextLayout {
     var displayName: string;
 }

package/dist/components/DataSummaryContext.d.ts

@@ -6,7 +6,7 @@ interface DataSummaryState {
 }
 export declare function DataSummaryProvider({ children }: {
     children: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function useDataSummary(): DataSummaryState | null;
 export declare function useDataSummaryToggle(): (() => void) | null;
 export {};

package/dist/components/DetailsPanel.d.ts

@@ -1,3 +1,4 @@
+import type { Datum } from "./charts/shared/datumTypes";
 import * as React from "react";
 import type { ChartObservation, ClickObservation } from "./store/ObservationStore";
 export interface DetailsPanelProps {
@@ -5,7 +6,7 @@ export interface DetailsPanelProps {
      * Render function receiving the clicked datum and the full observation.
      * Return null to hide the panel for a given datum.
      */
-    children: (datum: Record<string, any>, observation: ClickObservation) => React.ReactNode;
+    children: (datum: Datum, observation: ClickObservation) => React.ReactNode;
     /** Panel position relative to the chart. Default: "right" */
     position?: "right" | "bottom" | "overlay";
     /** Panel width (for "right" position) or height (for "bottom"). Default: 300 */
@@ -31,7 +32,7 @@ export interface DetailsPanelProps {
     /** Inline style overrides */
     style?: React.CSSProperties;
 }
-export declare function DetailsPanel({ children, position, size, trigger, chartId, observation: directObservation, dismissOnEmpty, showClose, onToggle, className, style, }: DetailsPanelProps): React.JSX.Element | null;
+export declare function DetailsPanel({ children, position, size, trigger, chartId, observation: directObservation, dismissOnEmpty, showClose, onToggle, className, style, }: DetailsPanelProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace DetailsPanel {
     var displayName: string;
 }

package/dist/components/Legend.d.ts

@@ -1,9 +1,8 @@
-import * as React from "react";
 import { LegendProps, GradientLegendConfig } from "./types/legendTypes";
 /** Gradient legend for continuous/sequential color scales */
 export declare function GradientLegend({ config, orientation, width, }: {
     config: GradientLegendConfig;
     orientation?: "vertical" | "horizontal";
     width?: number;
-}): React.JSX.Element;
-export default function Legend(props: LegendProps): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+export default function Legend(props: LegendProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/LinkedCharts.d.ts

@@ -82,4 +82,4 @@ export declare function estimateLegendRowCount(labels: string[], width: number):
  * </LinkedCharts>
  * ```
  */
-export declare function LinkedCharts({ children, selections, showLegend, legendPosition, legendInteraction, legendSelectionName, legendField, }: LinkedChartsProps): React.JSX.Element;
+export declare function LinkedCharts({ children, selections, showLegend, legendPosition, legendInteraction, legendSelectionName, legendField, }: LinkedChartsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ThemeProvider.d.ts

@@ -7,7 +7,7 @@ interface ThemeProviderProps {
     theme?: ThemePresetName | Partial<SemioticTheme>;
     children: React.ReactNode;
 }
-declare function ThemeProviderWrapper({ theme, children }: ThemeProviderProps): React.JSX.Element;
+declare function ThemeProviderWrapper({ theme, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 declare function useTheme(): SemioticTheme;
 export { ThemeProviderWrapper as ThemeProvider, useTheme };
 export { LIGHT_THEME, DARK_THEME, HIGH_CONTRAST_THEME };

package/dist/components/Tooltip/FlippingTooltip.d.ts

@@ -30,5 +30,5 @@ interface FlippingTooltipProps {
  * After measuring the actual tooltip size via ref, repositions precisely to
  * prevent clipping against container edges.
  */
-export declare function FlippingTooltip({ x, y, containerWidth, containerHeight, margin, children, className, zIndex }: FlippingTooltipProps): React.JSX.Element;
+export declare function FlippingTooltip({ x, y, containerWidth, containerHeight, margin, children, className, zIndex }: FlippingTooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { Accessor } from "../charts/shared/types";
+import type { Datum } from "../charts/shared/datumTypes";
 /**
  * Configuration for a single tooltip field
  */
@@ -87,7 +88,7 @@ export declare const defaultTooltipStyle: React.CSSProperties;
  * />
  * ```
  */
-export declare function Tooltip(config?: TooltipConfig): (data: Record<string, unknown>) => React.JSX.Element | null;
+export declare function Tooltip(config?: TooltipConfig): (data: Record<string, unknown>) => import("react/jsx-runtime").JSX.Element | null;
 /**
  * Create a multi-line tooltip that displays multiple fields
  *
@@ -130,7 +131,7 @@ export declare function Tooltip(config?: TooltipConfig): (data: Record<string, u
  * />
  * ```
  */
-export declare function MultiLineTooltip(config?: MultiLineTooltipConfig): (data: Record<string, unknown>) => React.JSX.Element | null;
+export declare function MultiLineTooltip(config?: MultiLineTooltipConfig): (data: Record<string, unknown>) => import("react/jsx-runtime").JSX.Element | null;
 /**
  * Type for tooltip prop that chart components accept
  */
@@ -139,7 +140,7 @@ export type TooltipProp = boolean | "multi" | ((data: Record<string, unknown>) =
  * The function signature that Stream Frames expect for tooltipContent.
  * Compatible with HoverData and any Record-based hover object.
  */
-export type TooltipContentFn = (d: Record<string, any>) => React.ReactNode;
+export type TooltipContentFn = (d: Datum) => React.ReactNode;
 /**
  * Multi-point tooltip: shows all series values at the hovered X position
  * with color swatches (legend-style). Used when tooltipMode="multi".

package/dist/components/charts/geo/ChoroplethMap.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
+import type { Datum } from "../shared/datumTypes";
 import type { StreamGeoFrameProps, ProjectionProp } from "../../stream/geoTypes";
 import type { BaseChartProps, ChartAccessor } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { LegendInteractionMode } from "../shared/hooks";
 import { type AreasProp } from "../../geo/useReferenceAreas";
-export interface ChoroplethMapProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface ChoroplethMapProps<TDatum extends Datum = Datum> extends BaseChartProps {
     /** GeoJSON features or a reference string ("world-110m", "world-50m", "land-110m", "land-50m") */
     areas: AreasProp;
     /** Accessor for the numeric value to encode as color */
@@ -43,11 +43,11 @@ export interface ChoroplethMapProps<TDatum extends Record<string, any> = Record<
     /** Fill opacity for area polygons. Useful for layering over tile basemaps. @default 1 */
     areaOpacity?: number;
     /** Annotations */
-    annotations?: Record<string, any>[];
+    annotations?: Datum[];
     /** Passthrough to StreamGeoFrame */
     frameProps?: Partial<Omit<StreamGeoFrameProps, "areas" | "projection">>;
 }
-export declare function ChoroplethMap<TDatum extends Record<string, any> = Record<string, any>>(props: ChoroplethMapProps<TDatum>): React.JSX.Element;
+export declare function ChoroplethMap<TDatum extends Datum = Datum>(props: ChoroplethMapProps<TDatum>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChoroplethMap {
     var displayName: string;
 }

package/dist/components/charts/geo/DistanceCartogram.d.ts

@@ -1,10 +1,11 @@
+import type { Datum } from "../shared/datumTypes";
 import * as React from "react";
 import type { StreamGeoFrameProps, ProjectionProp } from "../../stream/geoTypes";
 import type { BaseChartProps, ChartAccessor } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { LegendPosition } from "../shared/hooks";
 import type { RealtimeFrameHandle } from "../../realtime/types";
-export interface DistanceCartogramProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface DistanceCartogramProps<TDatum extends Datum = Datum> extends BaseChartProps {
     /** Point data with geographic coordinates */
     points?: TDatum[];
     /** Route/edge data with source/target fields */
@@ -23,7 +24,7 @@ export interface DistanceCartogramProps<TDatum extends Record<string, any> = Rec
     /** ID of the center point */
     center: string;
     /** Cost/distance accessor — numeric field or function */
-    costAccessor: string | ((d: any) => number);
+    costAccessor: string | ((d: Datum) => number);
     /** Interpolation between geographic (0) and cartogram (1) @default 1 */
     strength?: number;
     /** Line rendering mode @default "straight" */
@@ -80,11 +81,11 @@ export interface DistanceCartogramProps<TDatum extends Record<string, any> = Rec
     /** Label for cost units shown on rings (e.g. "hrs", "km") */
     costLabel?: string;
     /** Annotations */
-    annotations?: Record<string, any>[];
+    annotations?: Datum[];
     /** Passthrough */
     frameProps?: Partial<Omit<StreamGeoFrameProps, "projection">>;
 }
 export declare const DistanceCartogram: {
-    <TDatum extends Record<string, any> = Record<string, any>>(props: DistanceCartogramProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
+    <TDatum extends Datum = Datum>(props: DistanceCartogramProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
     displayName?: string;
 };

package/dist/components/charts/geo/FlowMap.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
+import type { Datum } from "../shared/datumTypes";
 import type { StreamGeoFrameProps, ProjectionProp } from "../../stream/geoTypes";
 import type { BaseChartProps, ChartAccessor } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { Style } from "../../stream/types";
 import type { GeoParticleStyle } from "../../stream/GeoParticlePool";
 import { type AreasProp } from "../../geo/useReferenceAreas";
-export interface FlowMapProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface FlowMapProps<TDatum extends Datum = Datum> extends BaseChartProps {
     /** Flow edges with source/target/value */
     flows?: {
         source: string;
@@ -73,11 +73,11 @@ export interface FlowMapProps<TDatum extends Record<string, any> = Record<string
     /** Max cached tiles @default 256 */
     tileCacheSize?: number;
     /** Annotations */
-    annotations?: Record<string, any>[];
+    annotations?: Datum[];
     /** Passthrough */
     frameProps?: Partial<Omit<StreamGeoFrameProps, "projection">>;
 }
-export declare function FlowMap<TDatum extends Record<string, any> = Record<string, any>>(props: FlowMapProps<TDatum>): React.JSX.Element;
+export declare function FlowMap<TDatum extends Datum = Datum>(props: FlowMapProps<TDatum>): import("react/jsx-runtime").JSX.Element;
 export declare namespace FlowMap {
     var displayName: string;
 }

package/dist/components/charts/geo/ProportionalSymbolMap.d.ts

@@ -1,3 +1,4 @@
+import type { Datum } from "../shared/datumTypes";
 import * as React from "react";
 import type { StreamGeoFrameProps, ProjectionProp } from "../../stream/geoTypes";
 import type { RealtimeFrameHandle } from "../../realtime/types";
@@ -6,7 +7,7 @@ import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
 import type { Style } from "../../stream/types";
 import { type AreasProp } from "../../geo/useReferenceAreas";
-export interface ProportionalSymbolMapProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface ProportionalSymbolMapProps<TDatum extends Datum = Datum> extends BaseChartProps {
     /** Point data with geographic coordinates */
     points?: TDatum[];
     /** Longitude accessor @default "lon" */
@@ -57,11 +58,11 @@ export interface ProportionalSymbolMapProps<TDatum extends Record<string, any> =
     /** Max cached tiles @default 256 */
     tileCacheSize?: number;
     /** Annotations */
-    annotations?: Record<string, any>[];
+    annotations?: Datum[];
     /** Passthrough */
     frameProps?: Partial<Omit<StreamGeoFrameProps, "points" | "projection">>;
 }
 export declare const ProportionalSymbolMap: {
-    <TDatum extends Record<string, any> = Record<string, any>>(props: ProportionalSymbolMapProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
+    <TDatum extends Datum = Datum>(props: ProportionalSymbolMapProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
     displayName?: string;
 };

package/dist/components/charts/index.d.ts

@@ -28,6 +28,8 @@ export { QuadrantChart } from "./xy/QuadrantChart";
 export type { QuadrantChartProps, QuadrantsConfig, QuadrantConfig, CenterlineStyle } from "./xy/QuadrantChart";
 export { MultiAxisLineChart } from "./xy/MultiAxisLineChart";
 export type { MultiAxisLineChartProps, MultiAxisSeriesConfig } from "./xy/MultiAxisLineChart";
+export { CandlestickChart } from "./xy/CandlestickChart";
+export type { CandlestickChartProps } from "./xy/CandlestickChart";
 export { BarChart } from "./ordinal/BarChart";
 export type { BarChartProps } from "./ordinal/BarChart";
 export { StackedBarChart } from "./ordinal/StackedBarChart";

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

@@ -1,3 +1,4 @@
+import type { Datum } from "../shared/datumTypes";
 import * as React from "react";
 import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
 import type { RealtimeFrameHandle } from "../../realtime/types";
@@ -7,7 +8,7 @@ import type { LegendInteractionMode } from "../shared/hooks";
 /**
  * ChordDiagram component props
  */
-export interface ChordDiagramProps<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface ChordDiagramProps<TNode extends Datum = Datum, TEdge extends Datum = Datum> extends BaseChartProps {
     nodes?: TNode[];
     edges?: TEdge[];
     sourceAccessor?: ChartAccessor<TEdge, string>;
@@ -16,7 +17,7 @@ export interface ChordDiagramProps<TNode extends Record<string, any> = Record<st
     nodeIdAccessor?: ChartAccessor<TNode, string>;
     colorBy?: ChartAccessor<TNode, string>;
     colorScheme?: string | string[];
-    edgeColorBy?: "source" | "target" | ((d: any) => string);
+    edgeColorBy?: "source" | "target" | ((d: Datum) => string);
     padAngle?: number;
     groupWidth?: number;
     sortGroups?: (a: any, b: any) => number;
@@ -34,6 +35,6 @@ export interface ChordDiagramProps<TNode extends Record<string, any> = Record<st
  * Wraps StreamNetworkFrame (canvas-first) for chord relationship visualization.
  */
 export declare const ChordDiagram: {
-    <TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>>(props: ChordDiagramProps<TNode, TEdge> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
+    <TNode extends Datum = Datum, TEdge extends Datum = Datum>(props: ChordDiagramProps<TNode, TEdge> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
     displayName?: string;
 };

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type { Datum } from "../shared/datumTypes";
 import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
 import type { BaseChartProps, ChartAccessor } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
@@ -6,7 +6,7 @@ import type { LegendInteractionMode } from "../shared/hooks";
 /**
  * CirclePack component props
  */
-export interface CirclePackProps<TNode extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface CirclePackProps<TNode extends Datum = Datum> extends BaseChartProps {
     data: TNode;
     childrenAccessor?: ChartAccessor<TNode, TNode[]>;
     valueAccessor?: ChartAccessor<TNode, number>;
@@ -28,7 +28,7 @@ export interface CirclePackProps<TNode extends Record<string, any> = Record<stri
  *
  * 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 function CirclePack<TNode extends Datum = Datum>(props: CirclePackProps<TNode>): import("react/jsx-runtime").JSX.Element;
 export declare namespace CirclePack {
     var displayName: string;
 }

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

@@ -1,3 +1,4 @@
+import type { Datum } from "../shared/datumTypes";
 import * as React from "react";
 import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
 import type { RealtimeFrameHandle } from "../../realtime/types";
@@ -7,7 +8,7 @@ import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
 /**
  * ForceDirectedGraph component props
  */
-export interface ForceDirectedGraphProps<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface ForceDirectedGraphProps<TNode extends Datum = Datum, TEdge extends Datum = Datum> extends BaseChartProps {
     nodes?: TNode[];
     edges?: TEdge[];
     nodeIDAccessor?: ChartAccessor<TNode, string>;
@@ -37,6 +38,6 @@ export interface ForceDirectedGraphProps<TNode extends Record<string, any> = Rec
  * Wraps StreamNetworkFrame (canvas-first) for force-directed network visualization.
  */
 export declare const ForceDirectedGraph: {
-    <TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>>(props: ForceDirectedGraphProps<TNode, TEdge> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
+    <TNode extends Datum = Datum, TEdge extends Datum = Datum>(props: ForceDirectedGraphProps<TNode, TEdge> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
     displayName?: string;
 };

package/dist/components/charts/network/OrbitDiagram.d.ts

@@ -1,3 +1,4 @@
+import type { Datum } from "../shared/datumTypes";
 import * as React from "react";
 import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
 import type { BaseChartProps } from "../shared/types";
@@ -14,15 +15,15 @@ export interface OrbitNode {
     id?: string;
 }
 type OrbitMode = "flat" | "solar" | "atomic" | number[];
-export interface OrbitDiagramProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface OrbitDiagramProps<TDatum extends Datum = Datum> extends BaseChartProps {
     /** Hierarchical data — single root object with children */
     data: TDatum;
     /** How to access children from each datum @default "children" */
     childrenAccessor?: string | ((d: TDatum) => TDatum[] | null | undefined);
     /** How to identify each node @default "name" */
-    nodeIdAccessor?: string | ((d: any) => string);
+    nodeIdAccessor?: string | ((d: Datum) => string);
     /** Field or function for node color */
-    colorBy?: string | ((d: any) => string);
+    colorBy?: string | ((d: Datum) => string);
     /** Color scheme @default "category10" */
     colorScheme?: string | string[];
     /** Color by hierarchy depth instead of field @default false */
@@ -66,13 +67,13 @@ export interface OrbitDiagramProps<TDatum extends Record<string, any> = Record<s
     /** Enable hover @default true */
     enableHover?: boolean;
     /** Annotation objects */
-    annotations?: Array<Record<string, any>>;
+    annotations?: Array<Datum>;
     /** Additional SVG content */
     foregroundGraphics?: React.ReactNode;
     /** Frame props passthrough */
     frameProps?: Partial<Omit<StreamNetworkFrameProps, "data" | "size">>;
 }
-export declare function OrbitDiagram<TDatum extends Record<string, any> = Record<string, any>>(props: OrbitDiagramProps<TDatum>): React.JSX.Element;
+export declare function OrbitDiagram<TDatum extends Datum = Datum>(props: OrbitDiagramProps<TDatum>): import("react/jsx-runtime").JSX.Element;
 export declare namespace OrbitDiagram {
     var displayName: string;
 }

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

@@ -1,3 +1,4 @@
+import type { Datum } from "../shared/datumTypes";
 import * as React from "react";
 import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
 import type { RealtimeFrameHandle } from "../../realtime/types";
@@ -7,7 +8,7 @@ import type { LegendInteractionMode } from "../shared/hooks";
 /**
  * SankeyDiagram component props
  */
-export interface SankeyDiagramProps<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface SankeyDiagramProps<TNode extends Datum = Datum, TEdge extends Datum = Datum> extends BaseChartProps {
     nodes?: TNode[];
     edges?: TEdge[];
     sourceAccessor?: ChartAccessor<TEdge, string>;
@@ -16,7 +17,7 @@ export interface SankeyDiagramProps<TNode extends Record<string, any> = Record<s
     nodeIdAccessor?: ChartAccessor<TNode, string>;
     colorBy?: ChartAccessor<TNode, string>;
     colorScheme?: string | string[];
-    edgeColorBy?: "source" | "target" | "gradient" | ((d: any) => string);
+    edgeColorBy?: "source" | "target" | "gradient" | ((d: Datum) => string);
     orientation?: "horizontal" | "vertical";
     nodeAlign?: "justify" | "left" | "right" | "center";
     nodePaddingRatio?: number;
@@ -36,6 +37,6 @@ export interface SankeyDiagramProps<TNode extends Record<string, any> = Record<s
  * Wraps StreamNetworkFrame (canvas-first) for Sankey flow visualization.
  */
 export declare const SankeyDiagram: {
-    <TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>>(props: SankeyDiagramProps<TNode, TEdge> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
+    <TNode extends Datum = Datum, TEdge extends Datum = Datum>(props: SankeyDiagramProps<TNode, TEdge> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
     displayName?: string;
 };

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type { Datum } from "../shared/datumTypes";
 import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
 import type { BaseChartProps, ChartAccessor } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
@@ -6,7 +6,7 @@ import type { LegendInteractionMode } from "../shared/hooks";
 /**
  * TreeDiagram component props
  */
-export interface TreeDiagramProps<TNode extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+export interface TreeDiagramProps<TNode extends Datum = Datum> extends BaseChartProps {
     data: TNode;
     layout?: "tree" | "cluster" | "partition" | "treemap" | "circlepack";
     orientation?: "vertical" | "horizontal" | "radial";
@@ -30,7 +30,7 @@ export interface TreeDiagramProps<TNode extends Record<string, any> = Record<str
  *
  * 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 function TreeDiagram<TNode extends Datum = Datum>(props: TreeDiagramProps<TNode>): import("react/jsx-runtime").JSX.Element;
 export declare namespace TreeDiagram {
     var displayName: string;
 }