@pond-ts/charts 0.54.0 → 0.55.0

package/dist/BoxPlot.d.ts

@@ -1,37 +1,9 @@
 import { ValueSeries } from 'pond-ts';
 import type { SeriesSchema, TimeSeries, ValueSeriesSchema } from 'pond-ts';
+import type { NumericColumn, ValueNumericColumn } from './column-names.js';
 import { type BoxShape } from './box.js';
 import type { DecimateOption } from './decimate.js';
-export interface BoxPlotProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
-    /**
-     * The source series. A `TimeSeries` plots against the time axis; a `ValueSeries`
-     * (`series.byValue('strike')`, or `ValueSeries.fromColumns` for natively
-     * value-keyed data — a per-strike IV distribution) against its value axis — the
-     * container infers which from the data, no axis-type prop (mirrors `<LineChart>`
-     * / `<ScatterChart>`). The box x-span is the key's `[begin, end)` for an
-     * interval-keyed `TimeSeries`, else synthesized from neighbour spacing (a
-     * point-keyed `TimeSeries`, or a `ValueSeries`) so the box keeps real width.
-     */
-    series: TimeSeries<S> | ValueSeries<VS>;
-    /** Name of the numeric column for the lower whisker end (e.g. `p5` / `min`).
-     *  **Required** — with `upper` it's the whisker reach. */
-    lower: string;
-    /**
-     * Name of the numeric column for the box bottom — first quartile (e.g. `p25`).
-     * **Optional:** omit `q1` **and** `q3` together for a **range-only** box — a
-     * whisker-only `lower→upper` segment, no body (a bid→ask IV mark). Giving just
-     * one of `q1`/`q3` throws.
-     */
-    q1?: string;
-    /** Name of the numeric column for the median line (e.g. `p50`). **Optional** —
-     *  omit for no centre line (independent of the box body). */
-    median?: string;
-    /** Name of the numeric column for the box top — third quartile (e.g. `p75`).
-     *  **Optional** — omit with `q1` for a range-only box (see `q1`). */
-    q3?: string;
-    /** Name of the numeric column for the upper whisker end (e.g. `p95` / `max`).
-     *  **Required** — with `lower` it's the whisker reach. */
-    upper: string;
+export interface BoxPlotCommon<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
     /**
      * The box series' semantic identifier — what the spread _is_ (e.g. `latency`).
      * The theme maps it to a {@link BoxStyle} (`theme.box[as] ?? theme.box.default`
@@ -122,6 +94,66 @@ export interface BoxPlotProps<S extends SeriesSchema = SeriesSchema, VS extends
      */
     index?: number;
 }
+/**
+ * BoxPlot's source + column props, a **union over the series kind** so the
+ * column names are checked against the schema that was actually passed
+ * ([PND-CHARTAPI]). A single member carrying `NumericColumn<S> |
+ * ValueNumericColumn<VS>` would silently widen to `string`: only one of the
+ * two generics is ever inferred, and the other falls back (measured in
+ * `spikes/charts-type-seam/`). Loosely-typed series still accept any name.
+ */
+type BoxPlotSource<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = {
+    /**
+     * The source series. **Live charts:** `series.byValue(…)` mints a
+     * *fresh* projection each call, so an inline `series={s.byValue('d')}`
+     * re-registers this layer every render — on a frequently re-rendering
+     * (e.g. scrub-driven) chart, memoize the projection (`useMemo`) so the
+     * layer isn't rebuilt each frame.
+     */
+    series: TimeSeries<S>;
+    /** Lower whisker end (e.g. `p5` / `min`). **Required** — with `upper`
+     *  it is the whisker reach. */
+    lower: NumericColumn<S>;
+    /**
+     * Box bottom — first quartile (e.g. `p25`). **Optional:** omit `q1`
+     * **and** `q3` together for a **range-only** box (a whisker-only
+     * `lower→upper` segment, no body — a bid→ask IV mark). Giving just one
+     * of the pair throws.
+     */
+    q1?: NumericColumn<S>;
+    /** Median line (e.g. `p50`). **Optional** — omit for no centre line
+     *  (independent of the box body). */
+    median?: NumericColumn<S>;
+    /** Box top — third quartile (e.g. `p75`). **Optional** — omit with `q1`
+     *  for a range-only box. */
+    q3?: NumericColumn<S>;
+    /** Upper whisker end (e.g. `p95` / `max`). **Required** — with `lower`
+     *  it is the whisker reach. */
+    upper: NumericColumn<S>;
+} | {
+    series: ValueSeries<VS>;
+    /** Lower whisker end (e.g. `p5` / `min`). **Required** — with `upper`
+     *  it is the whisker reach. */
+    lower: ValueNumericColumn<VS>;
+    /**
+     * Box bottom — first quartile (e.g. `p25`). **Optional:** omit `q1`
+     * **and** `q3` together for a **range-only** box (a whisker-only
+     * `lower→upper` segment, no body — a bid→ask IV mark). Giving just one
+     * of the pair throws.
+     */
+    q1?: ValueNumericColumn<VS>;
+    /** Median line (e.g. `p50`). **Optional** — omit for no centre line
+     *  (independent of the box body). */
+    median?: ValueNumericColumn<VS>;
+    /** Box top — third quartile (e.g. `p75`). **Optional** — omit with `q1`
+     *  for a range-only box. */
+    q3?: ValueNumericColumn<VS>;
+    /** Upper whisker end (e.g. `p95` / `max`). **Required** — with `lower`
+     *  it is the whisker reach. */
+    upper: ValueNumericColumn<VS>;
+};
+/** `<BoxPlot>`'s props: the shared knobs plus one series-kind source shape. */
+export type BoxPlotProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = BoxPlotCommon<S, VS> & BoxPlotSource<S, VS>;
 /**
  * A discrete box-and-whisker draw layer — the bar-chart analog of the variance
  * band. Reads **pre-computed quantile columns** of `series` (typically a
@@ -154,4 +186,5 @@ export interface BoxPlotProps<S extends SeriesSchema = SeriesSchema, VS extends
  * ```
  */
 export declare function BoxPlot<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series, lower, q1, median, q3, upper, as: semantic, axis, gap, shape, showMedian, offset, capWidth, id, decimate, legend, index, }: BoxPlotProps<S, VS>): null;
+export {};
 //# sourceMappingURL=BoxPlot.d.ts.map

package/dist/Candlestick.d.ts

@@ -1,4 +1,5 @@
 import type { SeriesSchema, TimeSeries } from 'pond-ts';
+import type { NumericColumn } from './column-names.js';
 import type { DecimateOption } from './decimate.js';
 import { type CandleVariant, type ColorBy } from './ohlc.js';
 export interface CandlestickProps<S extends SeriesSchema> {
@@ -12,13 +13,13 @@ export interface CandlestickProps<S extends SeriesSchema> {
      */
     series: TimeSeries<S>;
     /** Opening-price column. **Omitted ⇒ `'open'`.** */
-    open?: string;
+    open?: NumericColumn<S>;
     /** Session-high column. **Omitted ⇒ `'high'`.** */
-    high?: string;
+    high?: NumericColumn<S>;
     /** Session-low column. **Omitted ⇒ `'low'`.** */
-    low?: string;
+    low?: NumericColumn<S>;
     /** Closing-price column. **Omitted ⇒ `'close'`.** */
-    close?: string;
+    close?: NumericColumn<S>;
     /**
      * The series' semantic identifier — what the data _is_ (e.g. a ticker). The
      * theme maps it to a {@link CandleStyle} (`theme.candle[as] ??

package/dist/Layers.js

@@ -101,6 +101,13 @@ export function Layers({ children }) {
         // A category axis draws no vertical gridlines — a line through each bar
         // centre reads as noise; the bars are the structure.
         const xTickVals = container.xKind === 'category' ? [] : xScale.ticks(xTickCount);
+        // The same rule on the other axis: a **horizontal** categorical chart
+        // ([PND-HCAT]) puts its categories on y, where the `<YAxis>` labels slot
+        // *centres* while d3's auto ticks fall on slot *boundaries* — so drawing
+        // them would both mismatch the labels and stripe each bar. Suppressed,
+        // exactly as the categorical x axis already is.
+        const yIsCategory = layers.some((e) => (e.axisId ?? defaultAxisId) === defaultAxisId &&
+            (e.layer.binCategories?.() ?? null) !== null);
         // The reference grid — behind the data, opt-out via `grid={false}` for
         // a clean backdrop (session dividers below stay independent of it).
         if (container.grid) {
@@ -108,7 +115,7 @@ export function Layers({ children }) {
             // single source, height-derived or an explicit `<YAxis tickCount>`), so
             // a gridline sits under every `<YAxis>` label and no more.
             const yCount = tickCounts.get(defaultAxisId) ?? GRID_TICKS;
-            const yTicks = gridY
+            const yTicks = gridY && !(yIsCategory && explicitY === undefined)
                 ? (explicitY ?? gridY.ticks(yCount)).map((t) => gridY(t))
                 : [];
             // On a calendar axis the verticals are the FULL grain populations —

package/dist/LineChart.d.ts

@@ -1,34 +1,10 @@
 import { ValueSeries } from 'pond-ts';
 import type { SeriesSchema, TimeSeries, ValueSeriesSchema } from 'pond-ts';
+import type { NumericColumn, ValueNumericColumn } from './column-names.js';
 import type { DecimateOption } from './decimate.js';
 import { type Curve } from './curve.js';
 import { type GapMode } from './gaps.js';
-export interface LineChartProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
-    /**
-     * The source series. A `TimeSeries` plots against the time axis; a
-     * `ValueSeries` (`series.byValue('cumDist')`) against its value axis — the
-     * container infers which from the data, no axis-type prop. Either way the key
-     * / axis column supplies x and `column` supplies y.
-     *
-     * **Live charts:** `series.byValue(…)` mints a *fresh* projection each call, so
-     * passing `series={s.byValue('dist')}` inline re-registers this layer every
-     * render — on a frequently re-rendering (e.g. scrub-driven) chart, memoize the
-     * projection (`useMemo`) so the layer isn't rebuilt each frame.
-     */
-    series: TimeSeries<S> | ValueSeries<VS>;
-    /** Name of the numeric value column to plot. */
-    column: string;
-    /**
-     * Optional column to **read out** at the cursor instead of the plotted
-     * `column`. The layer still plots `column`; each tracker sample additionally
-     * carries this column's value as {@link TrackerSample.readout}, so an
-     * off-chart readout can show the **source** value while the line draws a
-     * derived one — a smoothed / transformed / normalized plot with a raw-value
-     * readout (estela plots pace-space + Gaussian-smoothed, reads the native m/s).
-     * The plotted `value` (hence the in-chart cursor dot) is unchanged.
-     * **Omitted ⇒ no readout channel** (`readout` is `undefined` on the sample).
-     */
-    readout?: string;
+export interface LineChartCommon<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
     /**
      * The series' semantic identifier — what the data _is_ / how it should read
      * (e.g. `heartrate`, `power`, or a role name like `foam`). The theme maps it
@@ -99,6 +75,32 @@ export interface LineChartProps<S extends SeriesSchema = SeriesSchema, VS extend
      */
     index?: number;
 }
+/**
+ * LineChart's source + column props, a **union over the series kind** so the
+ * column names are checked against the schema that was actually passed
+ * ([PND-CHARTAPI]). A single member carrying `NumericColumn<S> |
+ * ValueNumericColumn<VS>` would silently widen to `string`: only one of the
+ * two generics is ever inferred, and the other falls back (measured in
+ * `spikes/charts-type-seam/`). Loosely-typed series still accept any name.
+ */
+type LineChartSource<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = {
+    /**
+     * The source series. **Live charts:** `series.byValue(…)` mints a
+     * *fresh* projection each call, so an inline `series={s.byValue('d')}`
+     * re-registers this layer every render — on a frequently re-rendering
+     * (e.g. scrub-driven) chart, memoize the projection (`useMemo`) so the
+     * layer isn't rebuilt each frame.
+     */
+    series: TimeSeries<S>;
+    column: NumericColumn<S>;
+    readout?: NumericColumn<S>;
+} | {
+    series: ValueSeries<VS>;
+    column: ValueNumericColumn<VS>;
+    readout?: ValueNumericColumn<VS>;
+};
+/** `<LineChart>`'s props: the shared knobs plus one series-kind source shape. */
+export type LineChartProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = LineChartCommon<S, VS> & LineChartSource<S, VS>;
 /**
  * A line draw layer. Reads `column` from `series` into a {@link ChartSeries}
  * (columnar, gaps as NaN), registers itself into the enclosing {@link Layers}
@@ -106,4 +108,5 @@ export interface LineChartProps<S extends SeriesSchema = SeriesSchema, VS extend
  * it. The line breaks at gaps rather than spanning them.
  */
 export declare function LineChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series, column, readout, as: semantic, axis, curve, gaps, sessionBreaks, decimate, legend, index, }: LineChartProps<S, VS>): null;
+export {};
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/ListTable.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @internal The shared row-table shell behind {@link BarList} / {@link BoxList}.
+ *
+ * Renders a real `<table>` — the point of the list family is table semantics
+ * (label cells that can be links, aligned data cells, a `colSpan` detail row
+ * for the expander, screen-reader-legible rows), which a canvas plot can't
+ * carry and which hand-rolled flex rows re-implement badly (per-row cell
+ * alignment is exactly what table layout solves). The glyph cell takes
+ * `width: 100%` so it absorbs the free width; every text cell shrinks to fit.
+ *
+ * Not exported from the package: the public surface is the two sisters, so the
+ * shared shell can evolve without a compatibility contract.
+ */
+import { type ReactNode } from 'react';
+import type { ListCellSpec, ListRow } from './list.js';
+import type { ChartTheme } from './theme.js';
+export interface ListTableProps<R extends ListRow> {
+    /** Rows in display order (the caller sorts). */
+    readonly rows: readonly R[];
+    /** Which sister is rendering — stamped as `data-list` for styling/tests. */
+    readonly kind: 'bar' | 'box';
+    /** The glyph cell's content for one row (the bar / box lines). */
+    readonly renderGlyphs: (row: R) => ReactNode;
+    readonly before?: readonly ListCellSpec<R>[] | undefined;
+    readonly after?: readonly ListCellSpec<R>[] | undefined;
+    readonly renderExpanded?: ((row: R) => ReactNode) | undefined;
+    readonly defaultExpanded?: readonly string[] | undefined;
+    readonly onExpandToggle?: ((key: string, expanded: boolean) => void) | undefined;
+    readonly selected?: string | null | undefined;
+    readonly onRowClick?: ((row: R) => void) | undefined;
+    readonly divided?: boolean | undefined;
+    /** Draw the vertical **baseline rule** at the scale origin (the glyph
+     *  cell's left edge) — the shared reference the eye aligns rows against. */
+    readonly baseline?: boolean | undefined;
+    /**
+     * Reference markers, **pre-resolved to track fractions** by the caller (the
+     * shell knows pixels, not the scale): each draws a dotted vertical rule
+     * through every row's glyph area, plus a label strip above the list when
+     * any carries a `label`. A `null` fraction (out-of-scale gap) is skipped.
+     */
+    readonly markers?: ReadonlyArray<{
+        readonly frac: number | null;
+        readonly label?: string;
+    }> | undefined;
+    readonly theme: ChartTheme;
+}
+/** The shared text ink: the band-label tone when the theme has one (stronger
+ *  than tick labels — these cells are primary content), else the tick ink. */
+export declare function listInk(theme: ChartTheme): string;
+export declare function ListTable<R extends ListRow>({ rows, kind, renderGlyphs, before, after, renderExpanded, defaultExpanded, onExpandToggle, selected, onRowClick, divided, baseline, markers, theme, }: ListTableProps<R>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListTable.d.ts.map

package/dist/ListTable.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @internal The shared row-table shell behind {@link BarList} / {@link BoxList}.
+ *
+ * Renders a real `<table>` — the point of the list family is table semantics
+ * (label cells that can be links, aligned data cells, a `colSpan` detail row
+ * for the expander, screen-reader-legible rows), which a canvas plot can't
+ * carry and which hand-rolled flex rows re-implement badly (per-row cell
+ * alignment is exactly what table layout solves). The glyph cell takes
+ * `width: 100%` so it absorbs the free width; every text cell shrinks to fit.
+ *
+ * Not exported from the package: the public surface is the two sisters, so the
+ * shared shell can evolve without a compatibility contract.
+ */
+import { Fragment, useState } from 'react';
+/** The turquoise the selected-row edge falls back to when the theme has no
+ *  annotation register — the same built-in the annotation layer uses. */
+const FALLBACK_ACCENT = '#0d9488';
+/** The shared text ink: the band-label tone when the theme has one (stronger
+ *  than tick labels — these cells are primary content), else the tick ink. */
+export function listInk(theme) {
+    return theme.axis.band?.label ?? theme.axis.label;
+}
+export function ListTable({ rows, kind, renderGlyphs, before = [], after = [], renderExpanded, defaultExpanded, onExpandToggle, selected, onRowClick, divided = true, baseline = false, markers = [], theme, }) {
+    // Uncontrolled expansion, keyed on row identity so it survives a re-sort.
+    const [expanded, setExpanded] = useState(() => new Set(defaultExpanded ?? []));
+    const [hovered, setHovered] = useState(null);
+    const interactive = onRowClick !== undefined;
+    const toggle = (key) => {
+        const open = !expanded.has(key);
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            if (open)
+                next.add(key);
+            else
+                next.delete(key);
+            return next;
+        });
+        onExpandToggle?.(key, open);
+    };
+    const ink = listInk(theme);
+    const accent = theme.annotation?.color ?? FALLBACK_ACCENT;
+    const divider = divided ? `1px solid ${theme.axis.grid}` : undefined;
+    // Label + before + glyph + after (+ expander) — the detail row spans them all.
+    const span = 2 + before.length + after.length + (renderExpanded ? 1 : 0);
+    const textCell = (align) => ({
+        padding: '6px 12px',
+        whiteSpace: 'nowrap',
+        textAlign: align ?? 'left',
+        verticalAlign: 'middle',
+    });
+    // The glyph cell's shared horizontal geometry — the label strip must use
+    // the SAME left/right padding (and baseline border) as the data rows, or
+    // its percentages would resolve against a different content width and the
+    // labels would sit off their rules.
+    const glyphCellStyle = (vertical) => ({
+        width: '100%',
+        padding: baseline ? `${vertical} 8px ${vertical} 5px` : `${vertical} 8px`,
+        verticalAlign: 'middle',
+        borderLeft: baseline ? `1px solid ${theme.axis.grid}` : undefined,
+    });
+    const drawnMarkers = markers.filter((m) => m.frac !== null);
+    return (_jsx("table", { "data-list": kind, style: {
+            width: '100%',
+            borderCollapse: 'collapse',
+            font: `${theme.font.size}px/${1.5} ${theme.font.family}`,
+            color: ink,
+            background: theme.background,
+        }, children: _jsxs("tbody", { children: [drawnMarkers.some((m) => m.label !== undefined) && (
+                // The marker label strip: one synthetic row above the data, its
+                // glyph cell sharing the data rows' horizontal geometry so each
+                // label centres exactly on its rule below.
+                _jsxs("tr", { "data-list-marker-labels": "", children: [_jsx("td", { style: textCell() }), before.map((cell) => (_jsx("td", { style: textCell(cell.align) }, cell.key))), _jsx("td", { style: glyphCellStyle('0px'), children: _jsx("div", { style: {
+                                    position: 'relative',
+                                    height: theme.font.size + 6,
+                                }, children: drawnMarkers.map((m, mi) => m.label !== undefined && (_jsx("span", { "data-list-marker-label": "", style: {
+                                        position: 'absolute',
+                                        left: `${m.frac * 100}%`,
+                                        bottom: 0,
+                                        transform: 'translateX(-50%)',
+                                        whiteSpace: 'nowrap',
+                                        color: accent,
+                                    }, children: m.label }, mi))) }) }), after.map((cell) => (_jsx("td", { style: textCell(cell.align) }, cell.key))), renderExpanded !== undefined && _jsx("td", {})] })), rows.map((row, i) => {
+                    const isSelected = selected != null && selected === row.key;
+                    const isOpen = renderExpanded !== undefined && expanded.has(row.key);
+                    return (_jsxs(Fragment, { children: [_jsxs("tr", { "data-list-row": row.key, ...(isSelected ? { 'data-selected': '' } : {}), onClick: onRowClick === undefined ? undefined : () => onRowClick(row), 
+                                // A clickable row is keyboard-reachable too: focusable, and
+                                // Enter / Space activate it (Space's default scroll is eaten).
+                                tabIndex: interactive ? 0 : undefined, onKeyDown: onRowClick === undefined
+                                    ? undefined
+                                    : (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            onRowClick(row);
+                                        }
+                                    }, onPointerEnter: interactive ? () => setHovered(row.key) : undefined, onPointerLeave: interactive ? () => setHovered(null) : undefined, style: {
+                                    borderTop: i > 0 ? divider : undefined,
+                                    cursor: interactive ? 'pointer' : undefined,
+                                    background: interactive && hovered === row.key
+                                        ? (theme.legend?.border ?? theme.axis.grid)
+                                        : undefined,
+                                    // The selection accent: an inset edge in the annotation
+                                    // register (a *user's* mark, so it takes the marks colour,
+                                    // not a data hue) — reads on any ground, moves no layout.
+                                    boxShadow: isSelected ? `inset 3px 0 0 ${accent}` : undefined,
+                                }, children: [_jsx("td", { "data-list-cell": "label", style: textCell(), children: row.label ?? row.key }), before.map((cell) => (_jsx("td", { "data-list-cell": cell.key, style: textCell(cell.align), children: cell.render(row) }, cell.key))), _jsx("td", { "data-list-cell": "glyphs", 
+                                        // 100% absorbs the table's free width; every text cell
+                                        // shrinks to its content, staying aligned down the list.
+                                        // The baseline rule marks the scale origin: left padding
+                                        // narrows to a 5px breath so the glyphs start just off the
+                                        // rule, and border-collapse joins the rows' rules into one
+                                        // continuous vertical — the same thin `axis.grid` ink as
+                                        // the row dividers, so the two read as one quiet grid.
+                                        style: glyphCellStyle('6px'), children: _jsxs("div", { style: { position: 'relative' }, children: [renderGlyphs(row), drawnMarkers.map((m, mi) => (
+                                                // One dotted segment per row, bleeding through the
+                                                // row's vertical padding (+ divider) so adjacent rows'
+                                                // segments join into one continuous rule. Annotation
+                                                // register — a reference is a user's mark, not data.
+                                                _jsx("div", { "data-list-marker": "", style: {
+                                                        position: 'absolute',
+                                                        top: -7,
+                                                        bottom: -7,
+                                                        left: `calc(${m.frac * 100}% - 0.5px)`,
+                                                        width: 0,
+                                                        borderLeft: `1px dotted ${accent}`,
+                                                        pointerEvents: 'none',
+                                                    } }, mi)))] }) }), after.map((cell) => (_jsx("td", { "data-list-cell": cell.key, style: textCell(cell.align), children: cell.render(row) }, cell.key))), renderExpanded !== undefined && (_jsx("td", { style: { padding: '0 4px', verticalAlign: 'middle' }, children: _jsx("button", { type: "button", "data-list-expander": "", "aria-expanded": isOpen, "aria-label": isOpen ? 'Collapse row' : 'Expand row', onClick: (e) => {
+                                                // The chevron toggles; it must not double as a row click.
+                                                e.stopPropagation();
+                                                toggle(row.key);
+                                            }, style: {
+                                                background: 'none',
+                                                border: 'none',
+                                                cursor: 'pointer',
+                                                color: theme.axis.label,
+                                                font: 'inherit',
+                                                padding: '2px 6px',
+                                                transform: isOpen ? 'rotate(90deg)' : undefined,
+                                                transition: 'transform 120ms',
+                                            }, children: "\u25B8" }) }))] }), isOpen && (_jsx("tr", { "data-list-detail": row.key, children: _jsx("td", { colSpan: span, style: { padding: '2px 12px 12px' }, children: renderExpanded(row) }) }))] }, row.key));
+                })] }) }));
+}
+//# sourceMappingURL=ListTable.js.map

package/dist/ScatterChart.d.ts

@@ -1,24 +1,9 @@
 import { ValueSeries } from 'pond-ts';
 import type { SeriesSchema, TimeSeries, ValueSeriesSchema } from 'pond-ts';
+import type { NumericColumn, ValueNumericColumn } from './column-names.js';
 import { type ColorEncoding, type RadiusEncoding } from './encoding.js';
 import type { DecimateOption } from './decimate.js';
-export interface ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
-    /**
-     * The source series. A `TimeSeries` scatters against the time axis; a
-     * `ValueSeries` (`series.byValue('cumDist')`, or `ValueSeries.fromColumns`
-     * for natively value-keyed data — IV marks keyed by strike) against its
-     * value axis — the container infers which from the data, no axis-type prop
-     * (mirrors `<LineChart>`). Either way the key / axis column supplies each
-     * point's x and `column` supplies y.
-     *
-     * **Live charts:** `series.byValue(…)` mints a *fresh* projection each call,
-     * so passing `series={s.byValue('dist')}` inline re-registers this layer
-     * every render — memoize the projection (`useMemo`) on a frequently
-     * re-rendering chart.
-     */
-    series: TimeSeries<S> | ValueSeries<VS>;
-    /** Name of the numeric value column — each point's y. */
-    column: string;
+export interface ScatterChartCommon<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
     /**
      * The scatter's semantic identifier — what the marks _are_ / how they should
      * read. The theme maps it to a {@link ScatterStyle} (`theme.scatter[as] ??
@@ -109,6 +94,30 @@ export interface ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS ext
      */
     index?: number;
 }
+/**
+ * ScatterChart's source + column props, a **union over the series kind** so the
+ * column names are checked against the schema that was actually passed
+ * ([PND-CHARTAPI]). A single member carrying `NumericColumn<S> |
+ * ValueNumericColumn<VS>` would silently widen to `string`: only one of the
+ * two generics is ever inferred, and the other falls back (measured in
+ * `spikes/charts-type-seam/`). Loosely-typed series still accept any name.
+ */
+type ScatterChartSource<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = {
+    /**
+     * The source series. **Live charts:** `series.byValue(…)` mints a
+     * *fresh* projection each call, so an inline `series={s.byValue('d')}`
+     * re-registers this layer every render — on a frequently re-rendering
+     * (e.g. scrub-driven) chart, memoize the projection (`useMemo`) so the
+     * layer isn't rebuilt each frame.
+     */
+    series: TimeSeries<S>;
+    column: NumericColumn<S>;
+} | {
+    series: ValueSeries<VS>;
+    column: ValueNumericColumn<VS>;
+};
+/** `<ScatterChart>`'s props: the shared knobs plus one series-kind source shape. */
+export type ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = ScatterChartCommon<S, VS> & ScatterChartSource<S, VS>;
 /**
  * A scatter draw layer: one mark per finite point at `(x, column-value)`
  * — x from the series' key / axis column (time or value axis) —
@@ -138,4 +147,5 @@ export interface ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS ext
  * ```
  */
 export declare function ScatterChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series, column, as: semantic, id, axis, radius, color, label, offset, decimate, legend, index, }: ScatterChartProps<S, VS>): null;
+export {};
 //# sourceMappingURL=ScatterChart.d.ts.map

package/dist/YAxis.js

@@ -72,14 +72,25 @@ export function YAxis({ id, side = 'left', label, min, max, format, ticks, tickC
     // a cursor value read identically. `count` calibrates the default formatter's
     // precision to the tick density, exactly as the axis is.
     const fmt = yScale ? resolveAxisFormat(yScale, count, format) : String;
+    // A **horizontal categorical** layer on this axis supplies its category
+    // names ([PND-HCAT]); with no explicit `ticks`, label one per unit slot at
+    // its centre (`i + 0.5`) instead of the scale's numeric ticks — a slot index
+    // is not a number anyone wants to read. Explicit `ticks` still win, and a
+    // non-categorical row is unaffected (no layer answers, so this is `null`).
+    const layerCategories = row.layers
+        .filter((e) => (e.axisId ?? row.defaultAxisId) === id)
+        .map((e) => e.layer.binCategories?.() ?? null)
+        .find((c) => c !== null) ?? null;
     // Explicit `{ at, label }` ticks render verbatim (each label at its `at`),
     // overriding the auto-picked d3 ticks; otherwise label the scale's ticks via `fmt`.
     const tickList = ticks
         ? ticks.map((t) => ({ value: t.at, label: t.label }))
-        : (yScale ? yScale.ticks(count) : []).map((t) => ({
-            value: t,
-            label: fmt(t),
-        }));
+        : layerCategories !== null
+            ? layerCategories.map((label, i) => ({ value: i + 0.5, label }))
+            : (yScale ? yScale.ticks(count) : []).map((t) => ({
+                value: t,
+                label: fmt(t),
+            }));
     // The row reserves a slot per axis column (the widest in that column across
     // rows). Size the box to the slot and align this axis's own (narrower)
     // content toward the plot — left axes flush right, right axes flush left — so