semiotic 3.2.0 → 3.2.2

package/ai/examples.md

@@ -995,3 +995,94 @@ import { ThemeProvider, DARK_THEME, COLOR_BLIND_SAFE_CATEGORICAL } from "semioti
   showGrid
 />
 ```
+
+---
+
+## Click Handlers
+
+### onClick on BarChart
+
+```jsx
+import { BarChart } from "semiotic/ai"
+
+<BarChart
+  data={salesData}
+  categoryAccessor="region"
+  valueAccessor="revenue"
+  onClick={(datum, { x, y }) => {
+    console.log(`Clicked ${datum.region}: $${datum.revenue}`)
+    setSelectedRegion(datum.region)
+  }}
+/>
+```
+
+Key props: `onClick` receives the original datum and pixel coordinates. Works on all chart types.
+
+---
+
+## Linked Crosshair (Multi-chart Hover Sync)
+
+### Synced crosshair across time-series charts
+
+```jsx
+import { LineChart, LinkedCharts } from "semiotic/ai"
+
+<LinkedCharts>
+  <LineChart
+    data={cpuData}
+    xAccessor="time" yAccessor="cpu"
+    linkedHover={{ name: "metrics", mode: "x-position", xField: "time" }}
+    selection={{ name: "metrics" }}
+  />
+  <LineChart
+    data={memoryData}
+    xAccessor="time" yAccessor="memory"
+    linkedHover={{ name: "metrics", mode: "x-position", xField: "time" }}
+    selection={{ name: "metrics" }}
+  />
+</LinkedCharts>
+```
+
+Key props: `linkedHover` with `mode: "x-position"` broadcasts the hovered X value. Each chart shows its own tooltip with its own Y values. Use for multi-metric dashboards.
+
+---
+
+## Category Format (Custom Tick Labels)
+
+### Truncated category labels
+
+```jsx
+import { BarChart } from "semiotic/ai"
+
+<BarChart
+  data={data}
+  categoryAccessor="department"
+  valueAccessor="headcount"
+  orientation="horizontal"
+  categoryFormat={(label) => label.length > 12 ? label.slice(0, 12) + "…" : label}
+/>
+```
+
+Key props: `categoryFormat` receives each tick label and returns a formatted string. Available on all ordinal HOCs except Pie/Donut.
+
+---
+
+## Ordinal Annotations
+
+### Threshold + category highlight on BarChart
+
+```jsx
+import { BarChart } from "semiotic/ai"
+
+<BarChart
+  data={quarterlyData}
+  categoryAccessor="quarter"
+  valueAccessor="revenue"
+  annotations={[
+    { type: "y-threshold", value: 50000, label: "Target", color: "#e45050", labelPosition: "left" },
+    { type: "category-highlight", category: "Q3 2024", color: "#4589ff", opacity: 0.15, label: "Current" },
+  ]}
+/>
+```
+
+Key props: `y-threshold` works on vertical ordinal charts. `category-highlight` highlights a category column. `labelPosition` controls label placement.

package/ai/schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "name": "semiotic",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "description": "React data visualization library for charts, networks, and beyond",
   "tools": [
     {
@@ -1578,6 +1578,100 @@
         }
       }
     },
+    {
+      "type": "function",
+      "function": {
+        "name": "LikertChart",
+        "description": "Visualize Likert scale survey responses. Horizontal (default): diverging bar chart centered at 0% — negative levels extend left, positive right, neutral (if odd count) split 50/50 across centerline. Vertical: stacked 100% bar chart. Supports raw integer scores (1-based, aggregated automatically) or pre-aggregated (question, level, count) data. The levels array defines polarity: first half = negative, second half = positive, center = neutral (if odd). Works with any scale size (3-point to 7-point+). Supports push API for streaming — accumulates raw data and re-aggregates on each push.",
+        "parameters": {
+          "type": "object",
+          "properties": {
+            "data": {
+              "type": "array",
+              "items": {
+                "type": "object"
+              },
+              "description": "Array of raw response or pre-aggregated data objects"
+            },
+            "levels": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              },
+              "description": "Ordered response labels, most negative to most positive (required). Odd count = center is neutral."
+            },
+            "categoryAccessor": {
+              "type": "string",
+              "description": "Question/item field (ordinal axis)",
+              "default": "question"
+            },
+            "valueAccessor": {
+              "type": "string",
+              "description": "Integer score field for raw response mode (1-based: score 1 → levels[0])",
+              "default": "score"
+            },
+            "levelAccessor": {
+              "type": "string",
+              "description": "Level name field for pre-aggregated mode. Each value must match an entry in levels."
+            },
+            "countAccessor": {
+              "type": "string",
+              "description": "Count/frequency field for pre-aggregated mode",
+              "default": "count"
+            },
+            "orientation": {
+              "type": "string",
+              "enum": [
+                "horizontal",
+                "vertical"
+              ],
+              "default": "horizontal"
+            },
+            "colorScheme": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              },
+              "description": "One color per level. Use a diverging palette (red → gray → blue). Defaults to Carbon-inspired diverging."
+            },
+            "barPadding": {
+              "type": "number",
+              "default": 20
+            },
+            "title": {
+              "type": "string"
+            },
+            "width": {
+              "type": "number",
+              "default": 600
+            },
+            "height": {
+              "type": "number",
+              "default": 400
+            },
+            "enableHover": {
+              "type": "boolean",
+              "default": true
+            },
+            "showLegend": {
+              "type": "boolean",
+              "default": true
+            },
+            "showGrid": {
+              "type": "boolean",
+              "default": false
+            },
+            "tooltip": {
+              "type": "boolean",
+              "default": true
+            }
+          },
+          "required": [
+            "levels"
+          ]
+        }
+      }
+    },
     {
       "type": "function",
       "function": {
@@ -2508,10 +2602,6 @@
               "description": "Starting angle in radians",
               "default": 0
             },
-            "slicePadding": {
-              "type": "number",
-              "default": 2
-            },
             "title": {
               "type": "string"
             },
@@ -2623,10 +2713,6 @@
               "type": "number",
               "default": 0
             },
-            "slicePadding": {
-              "type": "number",
-              "default": 2
-            },
             "title": {
               "type": "string"
             },
@@ -3852,6 +3938,18 @@
             "gap": {
               "type": "number"
             },
+            "brush": {
+              "type": ["boolean", "string", "object"],
+              "description": "Enable brush selection. true defaults to { dimension: \"x\", snap: \"bin\" }. String: \"x\". Object: { dimension, snap: \"continuous\"|\"bin\", snapDuring }."
+            },
+            "onBrush": {
+              "type": "function",
+              "description": "Callback when brush extent changes: (extent | null) => void"
+            },
+            "linkedBrush": {
+              "type": ["string", "object"],
+              "description": "Cross-chart brush coordination via LinkedCharts. String: selection name. Object: { name, xField, yField }."
+            },
             "showAxes": {
               "type": "boolean",
               "default": true
@@ -4504,6 +4602,134 @@
           ]
         }
       }
+    },
+    {
+      "type": "function",
+      "function": {
+        "name": "SwimlaneChart",
+        "description": "Categorical lanes with sequentially stacked items colored by subcategory. Unlike StackedBarChart, the same subcategory can appear multiple times in the same lane — items stack left-to-right (horizontal) or bottom-to-top (vertical) in data order. Supports brush for value-axis selection and push API for streaming.",
+        "parameters": {
+          "type": "object",
+          "properties": {
+            "data": {
+              "type": "array",
+              "items": {
+                "type": "object"
+              },
+              "description": "Array of data objects. Omit for push API mode."
+            },
+            "categoryAccessor": {
+              "type": "string",
+              "description": "Key for lane categories (swim lanes)",
+              "default": "category"
+            },
+            "subcategoryAccessor": {
+              "type": "string",
+              "description": "Key for item subcategory (color grouping within lanes). Required. Duplicate subcategories in the same lane stack sequentially."
+            },
+            "valueAccessor": {
+              "type": "string",
+              "description": "Key for item size/duration along the value axis",
+              "default": "value"
+            },
+            "colorBy": {
+              "type": "string",
+              "description": "Key to determine color encoding. Defaults to subcategoryAccessor."
+            },
+            "colorScheme": {
+              "type": [
+                "string",
+                "array"
+              ],
+              "description": "Named d3 color scheme or array of color strings"
+            },
+            "orientation": {
+              "type": "string",
+              "enum": ["horizontal", "vertical"],
+              "description": "Horizontal renders lanes as rows; vertical as columns.",
+              "default": "horizontal"
+            },
+            "barPadding": {
+              "type": "number",
+              "description": "Padding between lanes in pixels",
+              "default": 40
+            },
+            "brush": {
+              "type": "boolean",
+              "description": "Enable value-axis brush selection"
+            },
+            "onBrush": {
+              "type": "function",
+              "description": "Callback with { r: [min, max] } or null when brush clears"
+            },
+            "linkedBrush": {
+              "type": [
+                "string",
+                "object"
+              ],
+              "description": "LinkedCharts brush integration name"
+            },
+            "showCategoryTicks": {
+              "type": "boolean",
+              "description": "Show lane labels on the category axis"
+            },
+            "annotations": {
+              "type": "array",
+              "description": "Annotation objects to render on the chart.",
+              "items": {
+                "type": "object"
+              }
+            },
+            "title": {
+              "type": "string"
+            },
+            "width": {
+              "type": "number",
+              "default": 600
+            },
+            "height": {
+              "type": "number",
+              "default": 400
+            },
+            "margin": {
+              "type": "object",
+              "description": "Chart margins: { top, right, bottom, left }"
+            },
+            "responsiveWidth": {
+              "type": "boolean",
+              "description": "Auto-resize to container width"
+            },
+            "tooltip": {
+              "type": [
+                "function",
+                "object"
+              ],
+              "description": "Tooltip content function or config."
+            },
+            "showLegend": {
+              "type": "boolean",
+              "description": "Show legend (auto-enabled with colorBy)"
+            },
+            "legendPosition": {
+              "type": "string",
+              "enum": [
+                "right",
+                "left",
+                "top",
+                "bottom"
+              ],
+              "default": "right"
+            },
+            "enableHover": {
+              "type": "boolean",
+              "default": true
+            }
+          },
+          "required": [
+            "subcategoryAccessor"
+          ]
+        }
+      }
     }
   ]
 }

package/ai/system-prompt.md

@@ -21,6 +21,8 @@ Use `import { ComponentName } from "semiotic/ai"` for all components below.
 - **PieChart** — `categoryAccessor`, `valueAccessor`
 - **DonutChart** — `categoryAccessor`, `valueAccessor`, `innerRadius`, `centerContent` (ReactNode, e.g. `<div>50%</div>`)
 
+All ordinal HOCs (except Pie/Donut) support `categoryFormat` — a function `(label, index?) => string` for custom tick label formatting (truncation, abbreviation).
+
 ## Hierarchical Data (`data: { children: [...] }`)
 - **TreeDiagram** — `childrenAccessor`, `nodeIdAccessor`, `layout` ("tree"|"cluster"|"partition"), `orientation`
 - **Treemap** — `childrenAccessor`, `valueAccessor`, `nodeIdAccessor`, `colorByDepth`
@@ -65,20 +67,24 @@ For advanced streaming control, use Stream Frames (`StreamXYFrame`, `StreamOrdin
 - When using with `size={[w, h]}`, set `height={h}` on the container or you'll get extra whitespace.
 
 ## Common Props (all components)
-`width`, `height`, `margin`, `title`, `colorBy`, `colorScheme`, `enableHover`, `tooltip`, `showLegend`, `className`, `frameProps`, `onObservation`, `emphasis` ("primary"|"secondary")
+`width`, `height`, `margin`, `title`, `colorBy`, `colorScheme`, `enableHover`, `tooltip`, `showLegend`, `className`, `frameProps`, `onObservation`, `onClick`, `emphasis` ("primary"|"secondary")
 
 ### tooltip
 `true` (default) | `false` | `(datum) => ReactNode` (function receives your raw data) | config `{ fields?, title?, format?, style? }`
 
+### onClick
+`onClick={(datum, { x, y }) => ...}` — called when a data element is clicked. Receives the original datum and pixel coordinates. Works on lines, bars, areas, pie slices, nodes, and geo features.
+
 ### onObservation
 Callback receiving `ChartObservation`: `{ type: "hover"|"click"|"brush"|"selection", datum: <your data>, x, y, timestamp, chartType, chartId }`. The `datum` field is your original data object. Hover-end/click-end events omit `datum`.
 
 ### emphasis
 `emphasis="primary"` makes a chart span two columns inside a `ChartGrid`.
 
-## Annotations (XY charts)
-- `annotations={[{ type: "y-threshold", value: 200, label: "SLA limit", color: "#e45050" }]}` — horizontal reference line
-- `annotations={[{ type: "x-threshold", value: 50, label: "Cutoff" }]}` — vertical reference line
+## Annotations (XY and ordinal charts)
+- `annotations={[{ type: "y-threshold", value: 200, label: "SLA limit", color: "#e45050", labelPosition: "right" }]}` — horizontal reference line (works on XY and vertical ordinal charts). `labelPosition`: "left"|"center"|"right"
+- `annotations={[{ type: "x-threshold", value: 50, label: "Cutoff", labelPosition: "top" }]}` — vertical reference line. `labelPosition`: "top"|"center"|"bottom"
+- `annotations={[{ type: "category-highlight", category: "Q3 2024", color: "#4589ff", opacity: 0.15 }]}` — highlight a category column/row in ordinal charts
 - `annotations={[{ type: "widget", time: 42, latency: 850, dy: -10, content: <span>Alert</span> }]}` — place React element at data coordinates
 - `annotations={[{ type: "enclose", coordinates: [datum1, datum2], label: "Cluster" }]}` — circle enclosing data points
 
@@ -99,6 +105,8 @@ All charts respond to CSS custom properties on any ancestor:
 ```
 Or use ThemeProvider with 15 named presets: `<ThemeProvider theme="tufte">`, `"tufte-dark"`, `"pastels"`, `"bi-tool"`, `"italian"`, `"journalist"`, `"playful"` (each with `-dark` variant), `"dark"`, `"high-contrast"`.
 
+**Color resolution**: When `colorBy` is set, charts use: explicit `colorScheme` prop > ThemeProvider `colors.categorical` > `"category10"`. No need to pass `colorScheme` on every chart when using ThemeProvider.
+
 `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.
 
 `COLOR_BLIND_SAFE_CATEGORICAL` — 8-color accessible palette (Wong 2011). Import from `semiotic`.

package/dist/components/ChartContainer.d.ts

@@ -23,6 +23,8 @@ export interface ChartContainerProps {
         copyConfig?: boolean | {
             format?: CopyFormat;
         };
+        /** Enable "Data Summary" action button — shows statistical summary + sample rows */
+        dataSummary?: boolean;
     };
     /** Chart configuration for serialization. Enables the "Copy Config" toolbar action. */
     chartConfig?: ChartConfig;

package/dist/components/DataSummaryContext.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+interface DataSummaryState {
+    /** When true, AccessibleDataTable renders visibly instead of sr-only */
+    visible: boolean;
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare function DataSummaryProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useDataSummary(): DataSummaryState | null;
+export declare function useDataSummaryToggle(): (() => void) | null;
+export {};

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+interface FlippingTooltipProps {
+    /** X position within the chart area (relative to margin.left) */
+    x: number;
+    /** Y position within the chart area (relative to margin.top) */
+    y: number;
+    /** Chart area width (excluding margins) */
+    containerWidth: number;
+    /** Chart area height (excluding margins) */
+    containerHeight: number;
+    /** Chart margins */
+    margin: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+    /** Tooltip content */
+    children: React.ReactNode;
+    /** CSS class name for the wrapper */
+    className?: string;
+    /** z-index (default 1) */
+    zIndex?: number;
+}
+/**
+ * Viewport-aware tooltip wrapper that flips horizontally and vertically
+ * when the tooltip would overflow the chart container.
+ *
+ * On first render, uses a heuristic (similar to the old 70%/30% thresholds).
+ * 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 {};

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

@@ -32,6 +32,8 @@ export { BarChart } from "./ordinal/BarChart";
 export type { BarChartProps } from "./ordinal/BarChart";
 export { StackedBarChart } from "./ordinal/StackedBarChart";
 export type { StackedBarChartProps } from "./ordinal/StackedBarChart";
+export { LikertChart } from "./ordinal/LikertChart";
+export type { LikertChartProps } from "./ordinal/LikertChart";
 export { SwarmPlot } from "./ordinal/SwarmPlot";
 export type { SwarmPlotProps } from "./ordinal/SwarmPlot";
 export { BoxPlot } from "./ordinal/BoxPlot";
@@ -52,6 +54,8 @@ export { DonutChart } from "./ordinal/DonutChart";
 export type { DonutChartProps } from "./ordinal/DonutChart";
 export { GroupedBarChart } from "./ordinal/GroupedBarChart";
 export type { GroupedBarChartProps } from "./ordinal/GroupedBarChart";
+export { SwimlaneChart } from "./ordinal/SwimlaneChart";
+export type { SwimlaneChartProps } from "./ordinal/SwimlaneChart";
 export { ForceDirectedGraph } from "./network/ForceDirectedGraph";
 export type { ForceDirectedGraphProps } from "./network/ForceDirectedGraph";
 export { ChordDiagram } from "./network/ChordDiagram";

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
 import type { LegendInteractionMode } from "../shared/hooks";
-import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import type { BaseChartProps, ChartAccessor, CategoryFormatFn } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { RealtimeFrameHandle } from "../../realtime/types";
 /**
@@ -27,6 +27,8 @@ export interface BarChartProps<TDatum extends Record<string, any> = Record<strin
     legendPosition?: "right" | "left" | "top" | "bottom";
     tooltip?: TooltipProp;
     annotations?: Record<string, any>[];
+    /** Custom formatter for category tick labels */
+    categoryFormat?: CategoryFormatFn;
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
 /**

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
 import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
-import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import type { BaseChartProps, ChartAccessor, CategoryFormatFn } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { RealtimeFrameHandle } from "../../realtime/types";
 export interface BoxPlotProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
@@ -25,6 +25,8 @@ export interface BoxPlotProps<TDatum extends Record<string, any> = Record<string
     legendPosition?: LegendPosition;
     tooltip?: TooltipProp;
     annotations?: Record<string, any>[];
+    /** Custom formatter for category tick labels */
+    categoryFormat?: CategoryFormatFn;
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
 export declare const BoxPlot: {

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

@@ -13,7 +13,6 @@ export interface DonutChartProps<TDatum extends Record<string, any> = Record<str
     colorBy?: ChartAccessor<TDatum, string>;
     colorScheme?: string | string[];
     startAngle?: number;
-    slicePadding?: number;
     enableHover?: boolean;
     showCategoryTicks?: boolean;
     showLegend?: boolean;

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
 import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
-import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import type { BaseChartProps, ChartAccessor, CategoryFormatFn } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { RealtimeFrameHandle } from "../../realtime/types";
 export interface DotPlotProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
@@ -25,6 +25,8 @@ export interface DotPlotProps<TDatum extends Record<string, any> = Record<string
     legendPosition?: LegendPosition;
     tooltip?: TooltipProp;
     annotations?: Record<string, any>[];
+    /** Custom formatter for category tick labels */
+    categoryFormat?: CategoryFormatFn;
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
 export declare const DotPlot: {

package/dist/components/charts/ordinal/FunnelChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
 import type { LegendInteractionMode } from "../shared/hooks";
-import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import type { BaseChartProps, ChartAccessor, CategoryFormatFn } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { RealtimeFrameHandle } from "../../realtime/types";
 /**
@@ -37,6 +37,8 @@ export interface FunnelChartProps<TDatum extends Record<string, any> = Record<st
     legendPosition?: "right" | "left" | "top" | "bottom";
     tooltip?: TooltipProp;
     annotations?: Record<string, any>[];
+    /** Custom formatter for category tick labels */
+    categoryFormat?: CategoryFormatFn;
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
 /**

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
 import type { LegendInteractionMode } from "../shared/hooks";
-import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import type { BaseChartProps, ChartAccessor, CategoryFormatFn } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { RealtimeFrameHandle } from "../../realtime/types";
 export interface GroupedBarChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
@@ -24,6 +24,8 @@ export interface GroupedBarChartProps<TDatum extends Record<string, any> = Recor
     legendPosition?: "right" | "left" | "top" | "bottom";
     tooltip?: TooltipProp;
     annotations?: Record<string, any>[];
+    /** Custom formatter for category tick labels */
+    categoryFormat?: CategoryFormatFn;
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
 export declare const GroupedBarChart: {

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { StreamOrdinalFrameProps } from "../../stream/ordinalTypes";
-import type { LegendPosition } from "../shared/hooks";
-import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
+import type { BaseChartProps, ChartAccessor, CategoryFormatFn } from "../shared/types";
 import { type TooltipProp } from "../../Tooltip/Tooltip";
 import type { RealtimeFrameHandle } from "../../realtime/types";
 export interface HistogramProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
@@ -20,9 +20,23 @@ export interface HistogramProps<TDatum extends Record<string, any> = Record<stri
     showGrid?: boolean;
     showCategoryTicks?: boolean;
     showLegend?: boolean;
+    legendInteraction?: LegendInteractionMode;
     legendPosition?: LegendPosition;
     tooltip?: TooltipProp;
     annotations?: Record<string, any>[];
+    /** Enable brush on the value axis */
+    brush?: boolean;
+    /** Callback when brush selection changes */
+    onBrush?: (extent: {
+        r: [number, number];
+    } | null) => void;
+    /** LinkedCharts brush integration */
+    linkedBrush?: string | {
+        name: string;
+        rField?: string;
+    };
+    /** Custom formatter for category tick labels */
+    categoryFormat?: CategoryFormatFn;
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
 export declare const Histogram: {