semiotic 3.4.2 → 3.5.1

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

@@ -65,6 +65,33 @@ export interface MultiAxisLineChartProps<TDatum extends Datum = Datum> extends B
  *
  * If `series` does not contain exactly 2 entries, renders as a standard
  * multi-line chart with a dev-mode console warning.
+ *
+ * @example
+ * ```tsx
+ * // Revenue (left axis, $) vs. signups (right axis, count)
+ * <MultiAxisLineChart
+ *   data={metrics}
+ *   xAccessor="month"
+ *   series={[
+ *     { yAccessor: "revenue", label: "Revenue", color: "#3b82f6", format: (v) => `$${v}` },
+ *     { yAccessor: "signups", label: "Signups", color: "#22c55e" },
+ *   ]}
+ *   legendPosition="bottom"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Pinning each axis extent independently
+ * <MultiAxisLineChart
+ *   data={metrics}
+ *   xAccessor="t"
+ *   series={[
+ *     { yAccessor: "tempC",   label: "°C", color: "#ef4444", extent: [-10, 40] },
+ *     { yAccessor: "humidity", label: "%", color: "#06b6d4", extent: [0, 100] },
+ *   ]}
+ * />
+ * ```
  */
 export declare const MultiAxisLineChart: {
     <TDatum extends Datum = Datum>(props: MultiAxisLineChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;

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

@@ -114,6 +114,27 @@ export interface QuadrantChartProps<TDatum extends Datum = Datum> extends BaseCh
  *   }}
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Effort vs. impact prioritization with a fixed 5×5 split.
+ * // Omit `xCenter`/`yCenter` to let the chart center on the domain midpoint.
+ * <QuadrantChart
+ *   data={features}
+ *   xAccessor="impact"
+ *   yAccessor="effort"
+ *   xCenter={5}
+ *   yCenter={5}
+ *   quadrants={{
+ *     topRight:    { label: "Quick wins",  color: "#22c55e" },
+ *     topLeft:     { label: "Maybe later", color: "#94a3b8" },
+ *     bottomRight: { label: "Big bets",    color: "#3b82f6" },
+ *     bottomLeft:  { label: "Skip",        color: "#ef4444" },
+ *   }}
+ *   colorBy="team"
+ *   sizeBy="estimate"
+ * />
+ * ```
  */
 export declare const QuadrantChart: {
     <TDatum extends Datum = Datum>(props: QuadrantChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;

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

@@ -45,20 +45,56 @@ export interface ScatterplotProps<TDatum extends Datum = Datum> extends BaseChar
     legendPosition?: LegendPosition;
     /** Annotation objects to render on the chart */
     annotations?: Datum[];
+    /** Fixed x domain `[min, max]` (either bound may be undefined to leave that side data-derived). */
+    xExtent?: [number | undefined, number | undefined] | [number];
+    /** Fixed y domain `[min, max]` (either bound may be undefined to leave that side data-derived). */
+    yExtent?: [number | undefined, number | undefined] | [number];
     /** Additional StreamXYFrame props for advanced customization */
     frameProps?: Partial<Omit<StreamXYFrameProps, "chartType" | "data" | "size">>;
 }
 /**
- * Scatterplot - Visualize relationships between two continuous variables
+ * Scatterplot - Visualize relationships between two continuous variables.
+ *
+ * Each row becomes a circle at `(xAccessor, yAccessor)`. Add a third
+ * dimension via {@link BubbleChart} (size encoding) or
+ * {@link ConnectedScatterplot} (point ordering). For matrix views of every
+ * pairwise combination, use {@link ScatterplotMatrix}.
  *
  * @example
  * ```tsx
+ * // Simple scatter
  * <Scatterplot
- *   data={[{x: 1, y: 10}, {x: 2, y: 20}]}
+ *   data={[{ x: 1, y: 10 }, { x: 2, y: 20 }]}
  *   xLabel="Time"
  *   yLabel="Value"
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Color by category, marginal histograms in axis margins
+ * <Scatterplot
+ *   data={observations}
+ *   xAccessor="age"
+ *   yAccessor="income"
+ *   colorBy="region"
+ *   showLegend
+ *   marginalGraphics={{ x: "histogram", y: "histogram" }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Hover-highlight non-hovered series + click handler
+ * <Scatterplot
+ *   data={observations}
+ *   xAccessor="x"
+ *   yAccessor="y"
+ *   colorBy="cluster"
+ *   hoverHighlight
+ *   onClick={(d) => console.log(d)}
+ * />
+ * ```
  */
 export declare const Scatterplot: {
     <TDatum extends Datum = Datum>(props: ScatterplotProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;

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

@@ -56,6 +56,7 @@ export interface ScatterplotMatrixProps<TDatum extends Datum = Datum> extends Ba
  *
  * @example
  * ```tsx
+ * // Iris dataset — every pairwise field combination
  * <ScatterplotMatrix
  *   data={iris}
  *   fields={["sepalLength", "sepalWidth", "petalLength", "petalWidth"]}
@@ -64,6 +65,21 @@ export interface ScatterplotMatrixProps<TDatum extends Datum = Datum> extends Ba
  *   diagonal="histogram"
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Brush mode: drag in any cell to highlight matching points across the
+ * // matrix. The `crossfilter` mode excludes the brushed cell from its own
+ * // filter so it stays fully visible while the others dim non-matches.
+ * // Brush selections live in the matrix's internal selection store and do
+ * // not propagate to charts rendered outside the component.
+ * <ScatterplotMatrix
+ *   data={observations}
+ *   fields={["x", "y", "z"]}
+ *   hoverMode={false}
+ *   brushMode="crossfilter"
+ * />
+ * ```
  */
 export declare function ScatterplotMatrix<TDatum extends Datum = Datum>(props: ScatterplotMatrixProps<TDatum>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ScatterplotMatrix {

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

@@ -92,6 +92,33 @@ export interface StackedAreaChartProps<TDatum extends Datum = Datum> extends Bas
      * @default false
      */
     normalize?: boolean;
+    /**
+     * Stacked baseline mode — controls where the stack origin sits.
+     * - `"zero"` (default): standard stacked area, baseline at y=0.
+     * - `"wiggle"`: streamgraph offset (Byron–Wattenberg). Minimizes visual
+     *   wiggle across series — best for high-cardinality series where
+     *   relative shape matters more than absolute values.
+     * - `"silhouette"`: center the stack symmetrically around y=0.
+     *
+     * Mutually exclusive with `normalize` — when `normalize` is true,
+     * baseline is forced to `"zero"`.
+     *
+     * @default "zero"
+     */
+    baseline?: "zero" | "wiggle" | "silhouette";
+    /**
+     * Stack order — controls which series sits at the top, middle, or
+     * bottom of the stack. Pair with `baseline: "wiggle"` or
+     * `"silhouette"` for the canonical streamgraph look:
+     *
+     * - `"key"` (default): alphabetical by series key. Stable under
+     *   streaming (no re-shuffling on data eviction).
+     * - `"insideOut"`: largest-total series in the middle, smaller series
+     *   wrapping outward. The classic d3 streamgraph aesthetic — gives
+     *   you a "central anchor" layer with everything else built off of it.
+     * - `"asc"` / `"desc"`: by total ascending / descending.
+     */
+    stackOrder?: "key" | "insideOut" | "asc" | "desc";
     /**
      * Enable hover annotations
      * @default true
@@ -119,13 +146,31 @@ export interface StackedAreaChartProps<TDatum extends Datum = Datum> extends Bas
      */
     legendPosition?: LegendPosition;
     /**
-     * Tooltip configuration
+     * Tooltip configuration.
+     *
+     * Pass `"multi"` to enable hover-anywhere mode: hovering at any x along the
+     * chart surfaces a single tooltip listing every stacked series at that x,
+     * with values interpolated between rendered path samples. Stacked series
+     * report band height rather than the cumulative stack top. Without `"multi"`,
+     * the tooltip only appears within `hoverRadius` of an explicit data point.
      */
     tooltip?: TooltipProp;
     /**
      * Annotation objects to render on the chart
      */
     annotations?: Datum[];
+    /**
+     * Fixed x domain `[min, max]`. Either bound may be `undefined` to leave
+     * that side data-derived.
+     */
+    xExtent?: [number | undefined, number | undefined] | [number];
+    /**
+     * Fixed y domain `[min, max]`. Either bound may be `undefined` to leave
+     * that side data-derived. Stacked areas auto-extend the y domain to
+     * cover the cumulative sum unless `yExtent` is fully specified —
+     * passing `yExtent={[0, 200]}` pins both bounds.
+     */
+    yExtent?: [number | undefined, number | undefined] | [number];
     /**
      * Additional StreamXYFrame props for advanced customization
      * For full control, consider using StreamXYFrame directly
@@ -143,6 +188,7 @@ export interface StackedAreaChartProps<TDatum extends Datum = Datum> extends Bas
  *
  * @example
  * ```tsx
+ * // Stacked series — each category contributes a band of height
  * <StackedAreaChart
  *   data={[
  *     {x: 1, y: 10, category: 'A'},
@@ -156,6 +202,20 @@ export interface StackedAreaChartProps<TDatum extends Datum = Datum> extends Bas
  *   yLabel="Value"
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // 100% normalized stack — y axis becomes share of total
+ * <StackedAreaChart
+ *   data={data}
+ *   xAccessor="t"
+ *   yAccessor="value"
+ *   areaBy="category"
+ *   colorBy="category"
+ *   normalize
+ *   yFormat={(v) => `${(v * 100).toFixed(0)}%`}
+ * />
+ * ```
  */
 export declare const StackedAreaChart: {
     <TDatum extends Datum = Datum>(props: StackedAreaChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;

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

@@ -72,10 +72,8 @@ export interface HoverData {
     x: number;
     /** Pixel Y coordinate of the hovered element */
     y: number;
-    /** Pixel X coordinate, aliased as "time" for backwards compatibility with realtime charts */
-    time: number;
-    /** Pixel Y coordinate, aliased as "value" for backwards compatibility with realtime charts */
-    value: number;
+    /** @internal Explicit marker used to distinguish Semiotic hover wrappers from raw user data. */
+    __semioticHoverData?: true;
     /** All series values at hovered X (multi-point tooltip mode) */
     allSeries?: Array<{
         group: string;

package/dist/components/recipes/bullet.d.ts

@@ -0,0 +1,86 @@
+import type { OrdinalCustomLayout } from "../stream/ordinalCustomLayout";
+import type { Datum } from "../charts/shared/datumTypes";
+export interface BulletConfig {
+    /** Field (or function) yielding the row label per datum. Each row is one bullet. */
+    categoryAccessor: string | ((d: Datum) => string);
+    /** Field (or function) yielding the actual measured value (the dark bar). */
+    valueAccessor: string | ((d: Datum) => number);
+    /** Field (or function) yielding the target marker value (the perpendicular tick). */
+    targetAccessor: string | ((d: Datum) => number);
+    /**
+     * Field (or function) yielding the qualitative range thresholds — an
+     * ascending array of cutoffs ([poor, satisfactory, good]) per datum.
+     * The ranges paint as background bars in successively darker shades.
+     */
+    rangesAccessor: string | ((d: Datum) => number[]);
+    /** Pixel height of each row's bullet. @default 28 */
+    rowHeight?: number;
+    /** Pixel gap between rows. @default 12 */
+    rowGap?: number;
+    /** Color for the actual-value bar. Defaults to theme primary. */
+    actualColor?: string;
+    /** Color for the target tick. Defaults to theme text. */
+    targetColor?: string;
+    /**
+     * Render the metric name to the left of each row. Reserves
+     * `labelWidth` from the bullet area. @default true
+     */
+    showLabels?: boolean;
+    /**
+     * Pixel width reserved on the left for row labels. Only used when
+     * `showLabels` is true. @default 120
+     */
+    labelWidth?: number;
+    /**
+     * Render value-axis tick marks below each bullet (since each row is
+     * independently scaled, ticks are per-row). @default true
+     */
+    showTicks?: boolean;
+    /**
+     * Format function for the per-row tick labels rendered below each
+     * bullet. @default v => v.toLocaleString()
+     */
+    tickFormat?: (v: number) => string;
+}
+/**
+ * Bullet chart (Stephen Few, 2005) — a compact replacement for KPI gauges.
+ * Each row stacks three layers along the value axis:
+ *
+ *   1. Three background bars in successively darker shades (poor →
+ *      satisfactory → good zones) sized by `rangesAccessor` values.
+ *   2. The actual measured value as a thinner dark bar.
+ *   3. A perpendicular tick at the target.
+ *
+ * Reads from low to high left-to-right. Far better than a half-circle
+ * gauge for dashboards — same information, ~5× the data density, no
+ * pie-shaped overhead.
+ *
+ * All inputs (`actual`, `target`, range thresholds) are treated as
+ * non-negative — values < 0 or non-finite are clamped to 0. Range
+ * thresholds are also sorted ascending so band order is always
+ * deterministic regardless of input order.
+ *
+ * @example
+ * ```tsx
+ * import { OrdinalCustomChart } from "semiotic/ordinal"
+ * import { bulletLayout } from "semiotic/recipes"
+ *
+ * <OrdinalCustomChart
+ *   data={[
+ *     { metric: "Revenue",   actual: 270, target: 250, ranges: [150, 225, 300] },
+ *     { metric: "Profit",    actual:  23, target:  27, ranges: [ 20,  25,  30] },
+ *     { metric: "Order Size", actual: 102, target: 120, ranges: [ 80, 110, 140] },
+ *   ]}
+ *   layout={bulletLayout}
+ *   layoutConfig={{
+ *     categoryAccessor: "metric",
+ *     valueAccessor: "actual",
+ *     targetAccessor: "target",
+ *     rangesAccessor: "ranges",
+ *   }}
+ *   width={500}
+ *   height={180}
+ * />
+ * ```
+ */
+export declare const bulletLayout: OrdinalCustomLayout<BulletConfig>;

package/dist/components/recipes/calendar.d.ts

@@ -0,0 +1,43 @@
+import type { CustomLayout } from "../stream/customLayout";
+import type { Datum } from "../charts/shared/datumTypes";
+export interface CalendarConfig {
+    /** Field name (or function) yielding a Date or epoch ms per datum. */
+    dateAccessor: string | ((d: Datum) => Date | number);
+    /** Field name (or function) yielding the value used to color each day. */
+    valueAccessor: string | ((d: Datum) => number);
+    /**
+     * Two-stop color ramp: [low, high]. By default, this uses the active
+     * theme's semantic colors from `surface` to `primary` — pass explicit
+     * colors here for non-default ramps.
+     */
+    colorRamp?: [string, string];
+    /**
+     * Calendar year to render. If omitted, infers the year from the first datum.
+     * For multi-year series, render one XYCustomChart per year.
+     */
+    year?: number;
+    /** Pixel gap between cells. @default 2 */
+    gutter?: number;
+    /** Inset on the left to leave room for weekday labels. @default 0 */
+    labelInset?: number;
+}
+/**
+ * GitHub-style calendar heatmap — 53 columns (ISO weeks) × 7 rows (days of
+ * week), color-encoded by daily value. One year per layout.
+ *
+ * @example
+ * ```tsx
+ * <XYCustomChart
+ *   data={dailyEvents}
+ *   layout={calendarLayout}
+ *   layoutConfig={{
+ *     dateAccessor: "date",
+ *     valueAccessor: "count",
+ *     year: 2025,
+ *   }}
+ *   width={900}
+ *   height={140}
+ * />
+ * ```
+ */
+export declare const calendarLayout: CustomLayout<CalendarConfig>;

package/dist/components/recipes/dagre.d.ts

@@ -0,0 +1,56 @@
+import type { NetworkCustomLayout } from "../stream/networkCustomLayout";
+import type { Datum } from "../charts/shared/datumTypes";
+export interface DagreConfig {
+    /** Default node width when nodes don't carry a `width` field. @default 100 */
+    nodeWidth?: number;
+    /** Default node height when nodes don't carry a `height` field. @default 36 */
+    nodeHeight?: number;
+    /** Edge style — straight polyline through waypoints, or smoothed bezier. @default "polyline" */
+    edgeStyle?: "polyline" | "smooth";
+    /** Render text labels at node centers. @default true */
+    showLabels?: boolean;
+    /** Field name (or function) yielding the label string per node. @default "label" */
+    labelAccessor?: string | ((d: Datum) => string);
+    /** Per-node fill style override. */
+    nodeFill?: string;
+    /** Stroke for edges. */
+    edgeStroke?: string;
+}
+/**
+ * Dagre layout recipe — renders a pre-positioned directed acyclic graph
+ * (e.g. output of `dagre`).
+ *
+ * The user runs `dagre.layout(g)` themselves and flattens the result into
+ * `nodes` (each with `x`, `y`, `width`, `height`, `label`) and `edges`
+ * (each with `source`, `target`, optional `points` waypoint array). The
+ * recipe handles scene emission only.
+ *
+ * @example
+ * ```ts
+ * import dagre from "dagre"
+ * import { dagreLayout } from "semiotic/recipes"
+ *
+ * const g = new dagre.graphlib.Graph()
+ * g.setGraph({ rankdir: "TB" })
+ * g.setDefaultEdgeLabel(() => ({}))
+ * for (const n of myNodes) g.setNode(n.id, { width: 120, height: 40, label: n.label })
+ * for (const e of myEdges) g.setEdge(e.source, e.target)
+ * dagre.layout(g)
+ *
+ * const nodes = g.nodes().map((id) => {
+ *   const n = g.node(id)
+ *   return { id, x: n.x, y: n.y, width: n.width, height: n.height, label: n.label }
+ * })
+ * const edges = g.edges().map((e) => {
+ *   const ed = g.edge(e)
+ *   return { source: e.v, target: e.w, points: ed.points }
+ * })
+ *
+ * <StreamNetworkFrame
+ *   chartType="force"
+ *   nodes={nodes} edges={edges}
+ *   customNetworkLayout={dagreLayout}
+ * />
+ * ```
+ */
+export declare const dagreLayout: NetworkCustomLayout<DagreConfig>;

package/dist/components/recipes/flextree.d.ts

@@ -0,0 +1,55 @@
+import type { NetworkCustomLayout } from "../stream/networkCustomLayout";
+import type { Datum } from "../charts/shared/datumTypes";
+export interface FlextreeConfig {
+    /** Default node width when nodes don't carry a `width` field. @default 80 */
+    nodeWidth?: number;
+    /** Default node height when nodes don't carry a `height` field. @default 30 */
+    nodeHeight?: number;
+    /** Edge style — curved (cubic-bezier path) or straight lines. @default "curved" */
+    edgeCurve?: "line" | "curved";
+    /** Tree orientation. Affects bezier control-point placement. @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** Render text labels at node centers. @default true */
+    showLabels?: boolean;
+    /** Field name (or function) yielding the label string per node. @default "id" */
+    labelAccessor?: string | ((d: Datum) => string);
+    /** Per-node fill style override. */
+    nodeFill?: string;
+}
+/**
+ * Flextree layout recipe — renders a pre-positioned variable-width tree
+ * (e.g. output of `d3-flextree`).
+ *
+ * The user runs `d3-flextree` themselves and passes the laid-out nodes
+ * as data. Each node should carry `x`, `y`, optional `width`/`height`.
+ * Edges should be parent → child links (no waypoints needed).
+ *
+ * @example
+ * ```ts
+ * import flextree from "d3-flextree"
+ * import { flextreeLayout } from "semiotic/recipes"
+ *
+ * const layout = flextree({ nodeSize: (n) => [n.data.size, 40] })
+ * const tree = layout.hierarchy(rootData)
+ * layout(tree)
+ *
+ * const nodes = tree.descendants().map((n) => ({
+ *   id: n.data.id,
+ *   x: n.x, y: n.y,
+ *   width: n.size[0], height: n.size[1],
+ *   label: n.data.name,
+ * }))
+ * const edges = tree.links().map((l) => ({
+ *   source: l.source.data.id,
+ *   target: l.target.data.id,
+ * }))
+ *
+ * <StreamNetworkFrame
+ *   chartType="force"
+ *   nodes={nodes} edges={edges}
+ *   customNetworkLayout={flextreeLayout}
+ *   layoutConfig={{ orientation: "vertical" }}
+ * />
+ * ```
+ */
+export declare const flextreeLayout: NetworkCustomLayout<FlextreeConfig>;

package/dist/components/recipes/marimekko.d.ts

@@ -0,0 +1,55 @@
+import type { OrdinalCustomLayout } from "../stream/ordinalCustomLayout";
+import type { Datum } from "../charts/shared/datumTypes";
+export interface MarimekkoConfig {
+    /** Field (or function) yielding the category for each datum. Categories become x-axis bars. */
+    categoryAccessor: string | ((d: Datum) => string);
+    /** Field (or function) yielding the value (segment height contribution). */
+    valueAccessor: string | ((d: Datum) => number);
+    /** Field (or function) yielding the stack key — segments inside each bar. */
+    stackBy: string | ((d: Datum) => string);
+    /** Pixel gap between adjacent category bars. @default 2 */
+    gutter?: number;
+    /** Optional explicit category order. If omitted, uses data insertion order. */
+    categoryOrder?: string[];
+    /** Optional explicit stack order. If omitted, uses insertion order. */
+    stackOrder?: string[];
+    /**
+     * Render category labels under each bar via SVG overlays. The default
+     * ordinal axis can't position labels under variable-width bars (it
+     * assumes a uniform band scale), so the recipe handles label
+     * placement itself. @default true
+     */
+    showCategoryLabels?: boolean;
+    /**
+     * Pixel-padding reserved beneath the bars for labels. Subtracted from
+     * the plot height when laying out the bars. @default 22 when labels
+     * are shown, 0 otherwise.
+     */
+    labelPadding?: number;
+}
+/**
+ * Marimekko (mosaic) chart — variable-width stacked bars where each bar's
+ * width encodes its category's contribution to the grand total, and the
+ * inner stacked segments encode the within-category breakdown by
+ * `stackBy`. Both dimensions are proportional, making it the natural pick
+ * for cohort revenue analysis, market share by segment × product, etc.
+ *
+ * @example
+ * ```tsx
+ * import { OrdinalCustomChart } from "semiotic/ordinal"
+ * import { marimekkoLayout } from "semiotic/recipes"
+ *
+ * <OrdinalCustomChart
+ *   data={salesByRegionAndProduct}
+ *   layout={marimekkoLayout}
+ *   layoutConfig={{
+ *     categoryAccessor: "region",
+ *     stackBy: "product",
+ *     valueAccessor: "revenue",
+ *   }}
+ *   width={700}
+ *   height={400}
+ * />
+ * ```
+ */
+export declare const marimekkoLayout: OrdinalCustomLayout<MarimekkoConfig>;

package/dist/components/recipes/parallelCoordinates.d.ts

@@ -0,0 +1,97 @@
+import type { OrdinalCustomLayout } from "../stream/ordinalCustomLayout";
+import type { Datum } from "../charts/shared/datumTypes";
+export interface ParallelCoordinatesConfig {
+    /**
+     * Field names (in order) defining the axes. Each field must yield a
+     * numeric value per datum. The leftmost field is axis 0.
+     */
+    fields: string[];
+    /**
+     * Field (or function) yielding a category per datum used for line
+     * coloring. If omitted, all lines render in the theme primary color.
+     */
+    colorBy?: string | ((d: Datum) => string);
+    /**
+     * Optional per-field [min, max] domains. If omitted, computed from
+     * data per field. Useful for locking axes when streaming.
+     */
+    domains?: Record<string, [number, number]>;
+    /** Line opacity. Lower for many overlapping rows. @default 0.45 */
+    opacity?: number;
+    /** Line stroke width in px. @default 1.25 */
+    strokeWidth?: number;
+    /**
+     * Render small dots at each row's value on each axis. @default false
+     * (recommended for low-cardinality data only — gets noisy with 100+ rows).
+     */
+    showPoints?: boolean;
+    /**
+     * Render axis chrome — vertical axis lines, top labels (the field
+     * name), and 5 tick marks per axis showing the domain range. Each
+     * axis is independently scaled, so each gets its own ticks. @default
+     * true
+     */
+    showAxes?: boolean;
+    /**
+     * Pixel padding reserved at the **top** of the plot for axis field-name
+     * labels. Used only when `showAxes` is `true`. Subtracted from the line
+     * drawing area along with bottom padding. @default 24
+     *
+     * The recipe also reserves bottom padding for tick numbers — 18px when
+     * `showAxes` is true, 8px when it's false. That bottom value is fixed;
+     * use a smaller chart `margin.bottom` if you need tighter packing.
+     * Top padding when `showAxes` is false is also a fixed 8px (so polyline
+     * endpoints don't hug the chart edge).
+     */
+    axisLabelPadding?: number;
+    /**
+     * Optional per-field tick formatter map. Falls back to
+     * `v.toLocaleString()` for fields without explicit formatters.
+     */
+    tickFormat?: Record<string, (v: number) => string>;
+    /**
+     * Predicate that decides which rows render at full opacity. Rows where
+     * `highlightFn(d) === false` render at `dimmedOpacity` instead, with
+     * the matching rows z-ordered on top so they don't get covered by
+     * neighbors. Recipes are pure functions so they can't own brush state
+     * themselves — wire this from a parent component that manages the
+     * selection (hover, brush, search query, etc.). Leave undefined for
+     * uniform opacity.
+     *
+     * Roadmap: a future `<ParallelCoordinatesBrushes>` overlay component
+     * will manage drag-to-brush state and feed this hook automatically;
+     * `useBrushSelection` will carry per-field range constraints across
+     * linked charts. This prop is the integration point both will use.
+     */
+    highlightFn?: (d: Datum) => boolean;
+    /** Stroke opacity for non-matching rows when `highlightFn` is set. @default 0.08 */
+    dimmedOpacity?: number;
+}
+/**
+ * Parallel coordinates — one polyline per row, traced across N parallel
+ * vertical axes. Each axis represents a numeric field with its own
+ * independent linear scale, so columns in different units can sit
+ * side-by-side without normalizing.
+ *
+ * Useful for high-dimensional pattern hunting: clusters of similar rows,
+ * outliers that "swing wildly" between axes, and inverse correlations
+ * (lines crossing).
+ *
+ * @example
+ * ```tsx
+ * import { OrdinalCustomChart } from "semiotic/ordinal"
+ * import { parallelCoordinatesLayout } from "semiotic/recipes"
+ *
+ * <OrdinalCustomChart
+ *   data={cars}
+ *   layout={parallelCoordinatesLayout}
+ *   layoutConfig={{
+ *     fields: ["mpg", "displacement", "horsepower", "weight", "acceleration"],
+ *     colorBy: "origin",
+ *   }}
+ *   width={800}
+ *   height={400}
+ * />
+ * ```
+ */
+export declare const parallelCoordinatesLayout: OrdinalCustomLayout<ParallelCoordinatesConfig>;