@pond-ts/charts 0.56.2 → 0.58.0

package/dist/selection-fixtures.js

@@ -0,0 +1,569 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sequence, TimeSeries } from 'pond-ts';
+import { BarChart } from './BarChart.js';
+import { BoxPlot } from './BoxPlot.js';
+import { Candlestick } from './Candlestick.js';
+import { HeatMap } from './HeatMap.js';
+import { ScatterChart } from './ScatterChart.js';
+import { H, calendarOf, sessionSeq, weekdaySessions, } from './tradingAxis.fixture.js';
+const DAY = 86_400_000;
+const D0 = Date.UTC(2026, 6, 1);
+// ── Categorical ────────────────────────────────────────────────────────────
+const SERVICES = [
+    { label: 'api', value: 2.7 },
+    { label: 'auth', value: 1.4 },
+    { label: 'cache', value: 0.6 },
+    { label: 'db', value: 3.2 },
+    { label: 'queue', value: 1.05 },
+    { label: 'search', value: 0.3 },
+];
+const ERRORS = [
+    { label: 'api', value: 0.9 },
+    { label: 'auth', value: 0.2 },
+    { label: 'cache', value: 1.6 },
+    { label: 'db', value: 0.4 },
+    { label: 'queue', value: 1.1 },
+    { label: 'search', value: 0.8 },
+];
+/** A `SelectInfo` for one category — what a legend chip / filter list hands in.
+ *  On an ordinal axis the identity is the **mark** (the stable category name),
+ *  not the slot index, which is the whole point of `mark` surviving a reorder. */
+const svc = (label) => ({
+    id: 'svc',
+    key: 0,
+    value: 0,
+    color: '#000',
+    label,
+    mark: label,
+});
+export const categoricalBars = {
+    name: 'Categorical',
+    container: {},
+    axis: { id: 'v', min: 0, max: 3.6, label: '' },
+    renderLayer: (id) => _jsx(BarChart, { categories: SERVICES, id: id, gap: 6 }),
+    secondary: {
+        axis: { id: 'e', min: 0, max: 2, label: 'errors' },
+        renderLayer: (id) => (_jsx(BarChart, { categories: ERRORS, id: id, gap: 6, as: "warn" })),
+    },
+    picks: SERVICES.map((c) => ({ label: c.label, info: svc(c.label) })),
+    describe: (hit) => hit.mark ?? hit.label,
+    // No `sequence`: a time bucketing over ordinal slots is meaningless.
+    // No `rangeCursor`: it gates on a continuous x.
+    rangeCursor: false,
+    sweep: true,
+};
+// ── Time axis ──────────────────────────────────────────────────────────────
+/** Thirty daily interval bars — a deterministic random-ish walk. */
+const daily = () => new TimeSeries({
+    name: 'daily',
+    schema: [
+        { name: 'timeRange', kind: 'timeRange' },
+        { name: 'v', kind: 'number' },
+    ],
+    rows: Array.from({ length: 30 }, (_, i) => [
+        [D0 + i * DAY, D0 + (i + 1) * DAY],
+        6 + 4 * Math.sin(i / 3) + 1.5 * Math.sin(i * 1.7),
+    ]),
+});
+/** A second daily series for the row-scoping story. */
+const dailyErrors = () => new TimeSeries({
+    name: 'errs',
+    schema: [
+        { name: 'timeRange', kind: 'timeRange' },
+        { name: 'v', kind: 'number' },
+    ],
+    rows: Array.from({ length: 30 }, (_, i) => [
+        [D0 + i * DAY, D0 + (i + 1) * DAY],
+        1 + Math.abs(Math.sin(i * 0.9)) * 1.4,
+    ]),
+});
+const isoDay = (t) => new Date(t).toISOString().slice(5, 10);
+export const timeBars = {
+    name: 'BarChart',
+    container: { range: [D0, D0 + 30 * DAY] },
+    axis: { id: 'v', min: 0, max: 12, label: '' },
+    renderLayer: (id) => (_jsx(BarChart, { series: daily(), column: "v", axis: "v", id: id })),
+    secondary: {
+        axis: { id: 'e', min: 0, max: 3, label: 'errors' },
+        renderLayer: (id) => (_jsx(BarChart, { series: dailyErrors(), column: "v", axis: "e", id: id, as: "warn" })),
+    },
+    // A time hit's identity is its `key` (the bar's begin), so an external
+    // control picks by timestamp rather than by name.
+    picks: [0, 4, 9].map((i) => ({
+        label: isoDay(D0 + i * DAY),
+        info: {
+            id: 'svc',
+            key: D0 + i * DAY,
+            value: 0,
+            color: '#000',
+            label: 'v',
+        },
+    })),
+    describe: (hit) => isoDay(hit.key),
+    /**
+     * **The bucket must be coarser than the bar**, or the snap has nothing to do
+     * and the story silently demonstrates nothing: these are *daily* bars, so a
+     * `'1d'` sequence would bucket exactly one bar each and look identical to the
+     * freeform sweep. A week spans seven, which is visible. Anchored at the first
+     * bar so the buckets line up with the data rather than with the epoch.
+     */
+    sequence: () => Sequence.every('7d', { anchor: D0 }),
+    rangeCursor: true,
+    sweep: true,
+};
+// ── Stacked bars (many marks per bin) ──────────────────────────────────────
+/** The stack's groups, bottom → top. **Four**, so the story walks the whole
+ *  `defaultTheme` group ramp rather than the first few entries of it. */
+const TIERS = ['web', 'api', 'db', 'edge'];
+/** Twenty daily bins, four positive segments each. */
+const stacked = () => new TimeSeries({
+    name: 'tiers',
+    schema: [
+        { name: 'timeRange', kind: 'timeRange' },
+        { name: 'web', kind: 'number' },
+        { name: 'api', kind: 'number' },
+        { name: 'db', kind: 'number' },
+        { name: 'edge', kind: 'number' },
+    ],
+    rows: Array.from({ length: 20 }, (_, i) => [
+        [D0 + i * DAY, D0 + (i + 1) * DAY],
+        3 + 2 * Math.sin(i / 2),
+        2 + 1.5 * Math.sin(i / 3 + 1),
+        1.5 + Math.sin(i * 1.7),
+        1.2 + Math.sin(i / 4 + 2),
+    ]),
+});
+/**
+ * **A stacked bar chart** — the column where a bin holds *many* marks.
+ *
+ * Every other column is one mark per x position, so "the mark under the
+ * pointer" and "the bin under the pointer" are the same thing and nothing
+ * distinguishes them. Here they come apart: a wide series carries no stable
+ * per-bin `mark`, so a segment's identity is the pair **`(key = bin begin,
+ * label = group)`** and one bin's three segments share a key. That is the
+ * axis this column exercises — click resolves to a segment, while a sweep
+ * materialises *every* drawn segment of every covered bin.
+ */
+export const stackedBars = {
+    name: 'Stacked',
+    container: { range: [D0, D0 + 20 * DAY] },
+    axis: { id: 'v', min: 0, max: 14, label: '' },
+    renderLayer: (id) => (_jsx(BarChart, { series: stacked(), columns: TIERS, axis: "v", id: id })),
+    secondary: {
+        axis: { id: 'e', min: 0, max: 3, label: 'errors' },
+        renderLayer: (id) => (_jsx(BarChart, { series: dailyErrors(), column: "v", axis: "e", id: id, as: "warn" })),
+    },
+    // A segment is picked by `(key, label)` — `stackIndexMatches` falls to
+    // `labelsByKey` when the series carries no stable marks, so an external
+    // control naming only the day would match nothing.
+    picks: [
+        { day: 0, tier: 'web' },
+        { day: 4, tier: 'api' },
+        { day: 9, tier: 'db' },
+    ].map(({ day, tier }) => ({
+        label: `${isoDay(D0 + day * DAY)}·${tier}`,
+        info: {
+            id: 'svc',
+            key: D0 + day * DAY,
+            value: 0,
+            color: '#000',
+            label: tier,
+        },
+    })),
+    /** `describeEntries` renders a span's endpoints through this with a
+     *  `{ key }`-only cast, so a missing label is a real case here rather than
+     *  defensive noise — a span names an x range, not a group. */
+    describe: (hit) => hit.label === undefined
+        ? isoDay(hit.key)
+        : `${isoDay(hit.key)}·${hit.label}`,
+    sequence: () => Sequence.every('7d', { anchor: D0 }),
+    rangeCursor: true,
+    sweep: true,
+};
+// ── Box plots (a mark with internal structure) ─────────────────────────────
+const BOX_BASE = Date.UTC(2026, 6, 1, 12, 0, 0);
+const BOX_BUCKET = 600_000; // 10 minutes
+const BOX_COUNT = 10;
+/**
+ * Ten percentile buckets through pond's own `aggregate` — the reducers do the
+ * quantiles, the fixture just reads the columns (the idiom `Box.stories.tsx`
+ * established). Deterministic samples, so the boxes are stable across runs.
+ */
+const boxes = (phase = 0) => {
+    const STEP = 5_000; // one raw sample / 5s
+    const N = (BOX_COUNT * BOX_BUCKET) / STEP;
+    const rows = Array.from({ length: N }, (_, i) => [
+        BOX_BASE + i * STEP,
+        60 +
+            18 * Math.sin(i / 70 + phase) +
+            9 * Math.sin(i * 1.3) +
+            5 * Math.sin(i * 2.7) +
+            3 * Math.sin(i * 0.7),
+    ]);
+    return new TimeSeries({
+        name: 'raw',
+        schema: [
+            { name: 'time', kind: 'time' },
+            { name: 'latency', kind: 'number' },
+        ],
+        rows,
+    }).aggregate(Sequence.every('10m'), {
+        p5: { from: 'latency', using: 'p5' },
+        p25: { from: 'latency', using: 'p25' },
+        p50: { from: 'latency', using: 'p50' },
+        p75: { from: 'latency', using: 'p75' },
+        p95: { from: 'latency', using: 'p95' },
+    });
+};
+/** **Local** time, because the axis renders local — a UTC caption beside a
+ *  local axis reads as an off-by-hours bug in the hit test, which is exactly
+ *  the kind of false lead a review story must not plant. */
+const clock = (t) => new Date(t).toTimeString().slice(0, 5);
+/**
+ * **A box plot column** — the first fixture whose mark has *internal
+ * structure*. Everything before it is one filled rect per x; a box is a body,
+ * a median rule and (depending on `shape`) stems and caps, and `hitTest` is
+ * rect containment over that composite. So the question this column asks is
+ * **what counts as the mark for hit purposes**, and the answer is allowed to
+ * differ by shape — which is why it ships as two columns rather than one.
+ *
+ * It sweeps like any bar column. A box is an **aggregation** — it owns one
+ * `[begin, end)` interval of the key axis — so the fact that its ink floats
+ * between two quantiles instead of rising from the baseline says nothing about
+ * which column the mark occupies. The sweep cuts columns, not ink.
+ */
+const boxFixture = (name, shape, note) => ({
+    name,
+    container: { range: [BOX_BASE, BOX_BASE + BOX_COUNT * BOX_BUCKET] },
+    axis: { id: 'v', min: 0, max: 110, label: note },
+    renderLayer: (id) => (_jsx(BoxPlot, { series: boxes(), lower: "p5", q1: "p25", median: "p50", q3: "p75", upper: "p95", axis: "v", shape: shape, gap: 10, id: id })),
+    secondary: {
+        axis: { id: 'e', min: 0, max: 110, label: 'p95 (b)' },
+        renderLayer: (id) => (_jsx(BoxPlot, { series: boxes(2.1), lower: "p5", q1: "p25", median: "p50", q3: "p75", upper: "p95", axis: "e", shape: shape, gap: 10, as: "warn", id: id })),
+    },
+    // A box's `key` is its `x` (the bucket begin), same identity rule the
+    // time-axis bar column uses.
+    picks: [0, 3, 7].map((i) => ({
+        label: clock(BOX_BASE + i * BOX_BUCKET),
+        info: {
+            id: 'svc',
+            key: BOX_BASE + i * BOX_BUCKET,
+            value: 0,
+            color: '#000',
+            label: 'latency',
+        },
+    })),
+    describe: (hit) => clock(hit.key),
+    sweep: true,
+    /** Three 10-minute boxes per bucket — coarser than the mark, so the snap has
+     *  something to do (the lesson `timeBars` learned with its `'1d'`). */
+    sequence: () => Sequence.every('30m', { anchor: BOX_BASE }),
+    rangeCursor: true,
+});
+/** The default shape: a q1→q3 body with thin stems and end caps. The stems are
+ *  the interesting part for selection — they are drawn ink far from the body. */
+export const boxWhisker = boxFixture('BoxWhisker', 'whisker', 'whisker');
+/** The candlestick look: a light outer bar over the full range, a darker inner
+ *  body, no stems. The mark is one solid rect, so the hittable area is the
+ *  whole p5→p95 span rather than a body plus two thin stems. */
+export const boxSolid = boxFixture('BoxSolid', 'solid', 'solid');
+// ── Candlesticks (a mark whose HUE is its meaning) ─────────────────────────
+/** Twenty daily OHLC bars, deterministic, with real direction changes so both
+ *  the rising and falling colours are on screen in every state. */
+const ohlc = () => {
+    const rows = [];
+    let px = 100;
+    for (let i = 0; i < 20; i += 1) {
+        const drift = 2.2 * Math.sin(i / 2.4) + 1.1 * Math.sin(i * 1.7);
+        const open = px;
+        const close = px + drift;
+        const wick = 0.8 + Math.abs(Math.sin(i * 2.3));
+        rows.push([
+            D0 + i * DAY,
+            open,
+            Math.max(open, close) + wick,
+            Math.min(open, close) - wick,
+            close,
+        ]);
+        px = close;
+    }
+    return new TimeSeries({
+        name: 'ohlc',
+        schema: [
+            { name: 'time', kind: 'time' },
+            { name: 'open', kind: 'number' },
+            { name: 'high', kind: 'number' },
+            { name: 'low', kind: 'number' },
+            { name: 'close', kind: 'number' },
+        ],
+        rows,
+    });
+};
+/**
+ * **A candlestick column** — the mark whose *hue is its meaning*.
+ *
+ * Every other column is free to recolour on selection: a bar swaps its fill, a
+ * box rotates its whole tint ladder. A candle cannot. Rising vs falling is the
+ * first thing anyone reads off it, and that read lives in exactly the channel
+ * the other marks use to announce state — so this column exists to check that
+ * a selected candle still says which way the price went.
+ *
+ * It sweeps like the rest: a candle owns one `[x, xEnd)` column, same as a box.
+ */
+export const candles = {
+    name: 'Candlestick',
+    container: { range: [D0, D0 + 20 * DAY] },
+    axis: { id: 'v', min: 88, max: 116, label: '' },
+    renderLayer: (id) => _jsx(Candlestick, { series: ohlc(), axis: "v", gap: 6, id: id }),
+    secondary: {
+        axis: { id: 'e', min: 88, max: 116, label: 'bar' },
+        renderLayer: (id) => (_jsx(Candlestick, { series: ohlc(), axis: "e", gap: 6, variant: "bar", id: id })),
+    },
+    picks: [0, 5, 11].map((i) => ({
+        label: isoDay(D0 + i * DAY),
+        info: {
+            id: 'svc',
+            key: D0 + i * DAY,
+            value: 0,
+            color: '#000',
+            label: 'close',
+        },
+    })),
+    describe: (hit) => isoDay(hit.key),
+    sweep: true,
+    sequence: () => Sequence.every('5d', { anchor: D0 }),
+    rangeCursor: true,
+};
+// ── The 2-D family: scatter and heat map ──────────────────────────────────
+/** Forty points on a time axis — a scatter's marks live at `(x, y)`, not in a
+ *  column, which is the whole distinction this pair of columns exists to make. */
+const points = () => new TimeSeries({
+    name: 'pts',
+    schema: [
+        { name: 'time', kind: 'time' },
+        { name: 'v', kind: 'number' },
+        { name: 'w', kind: 'number' },
+    ],
+    rows: Array.from({ length: 40 }, (_, i) => [
+        D0 + i * (DAY / 2),
+        6 + 3.4 * Math.sin(i / 3.1) + 1.8 * Math.sin(i * 2.3),
+        1 + Math.abs(Math.sin(i * 1.7)),
+    ]),
+});
+/** Three rows × twenty daily bins — a grid of cells. */
+const grid = () => new TimeSeries({
+    name: 'grid',
+    schema: [
+        { name: 'timeRange', kind: 'timeRange' },
+        { name: 'low', kind: 'number' },
+        { name: 'mid', kind: 'number' },
+        { name: 'high', kind: 'number' },
+    ],
+    rows: Array.from({ length: 20 }, (_, i) => [
+        [D0 + i * DAY, D0 + (i + 1) * DAY],
+        2 + 2 * Math.sin(i / 2.2),
+        5 + 3 * Math.sin(i / 3.3 + 1),
+        8 + 3 * Math.sin(i / 1.9 + 2),
+    ]),
+});
+const HEAT_RAMP = ['#e0f2f1', '#7FC8BF', '#2A9D8F', '#1F7A6F'];
+/**
+ * **A scatter column** — the first mark that does *not* own a column.
+ *
+ * Every fixture before this one is an interval on the key axis: a bar, a
+ * stacked bin, a box, a candle. A scatter point is a position, `(x, y)`, with
+ * no span either side of it — so "the marks between here and there" is a
+ * question about a **region**, not about a run of columns, and `sweep1D`'s
+ * two binary searches have nothing to cut.
+ *
+ * Hence `sweep: false`, and hence [PND-INTERACT2D] rather than a quick wiring
+ * job: the 2-D rect is a different gesture, not the same one on a new layer.
+ */
+export const scatterPoints = {
+    name: 'Scatter',
+    container: { range: [D0, D0 + 20 * DAY] },
+    axis: { id: 'v', min: 0, max: 12, label: '' },
+    renderLayer: (id) => (_jsx(ScatterChart, { series: points(), column: "v", axis: "v", id: id })),
+    secondary: {
+        axis: { id: 'e', min: 0, max: 3, label: 'w' },
+        renderLayer: (id) => (_jsx(ScatterChart, { series: points(), column: "w", axis: "e", id: id, as: "warn" })),
+    },
+    picks: [0, 8, 17].map((i) => ({
+        label: isoDay(D0 + i * (DAY / 2)),
+        info: {
+            id: 'svc',
+            key: D0 + i * (DAY / 2),
+            value: 0,
+            color: '#000',
+            label: 'v',
+        },
+    })),
+    describe: (hit) => isoDay(hit.key),
+    // A **2-D** sweep: the drag cuts a free rect, and the committed span carries
+    // a `y` window alongside `x` ([PND-INTERACT2D]).
+    sweep: true,
+    rangeCursor: true,
+};
+/**
+ * **A heat-map column** — a *grid* of cells, `(bin × row)`.
+ *
+ * A heat map's bins do own columns, so an x-only sweep would be well defined —
+ * and it would also be the wrong gesture. Selecting every row of a covered bin
+ * ignores the y dimension the mark exists to show, and the rect that reads it
+ * is [PND-INTERACT2D]'s, so this declares `sweep: false` rather than shipping
+ * the half of the gesture that happens to be easy.
+ */
+export const heatGrid = {
+    name: 'HeatMap',
+    container: { range: [D0, D0 + 20 * DAY] },
+    axis: { id: 'v', min: 0, max: 3, label: '' },
+    renderLayer: (id) => (_jsx(HeatMap, { series: grid(), columns: ['low', 'mid', 'high'], colors: HEAT_RAMP, axis: "v", id: id })),
+    secondary: {
+        axis: { id: 'e', min: 0, max: 3, label: 'again' },
+        renderLayer: (id) => (_jsx(HeatMap, { series: grid(), columns: ['low', 'mid', 'high'], colors: HEAT_RAMP, axis: "e", id: id })),
+    },
+    // A cell's identity is `(key = bin begin, label = row)`, the stack's rule.
+    picks: [
+        { day: 2, row: 'low' },
+        { day: 7, row: 'mid' },
+        { day: 13, row: 'high' },
+    ].map(({ day, row }) => ({
+        label: `${isoDay(D0 + day * DAY)}·${row}`,
+        info: {
+            id: 'svc',
+            key: D0 + day * DAY,
+            value: 0,
+            color: '#000',
+            label: row,
+        },
+    })),
+    describe: (hit) => hit.label === undefined
+        ? isoDay(hit.key)
+        : `${isoDay(hit.key)}·${hit.label}`,
+    // A **2-D** sweep, snapped in both dimensions — bins on x, rows on y — so a
+    // capture is always a contiguous rectangle of cells ([PND-INTERACT2D]).
+    sweep: true,
+    rangeCursor: true,
+};
+// ── Trading sessions (a discontinuous time axis) ───────────────────────────
+/** Six weekday sessions (09:30–16:00 UTC) from a Monday — five overnight seams
+ *  plus a **weekend** one, which is the widest collapse in view. */
+const SESSIONS = weekdaySessions(6);
+const MON_OPEN = SESSIONS[0].open;
+/** Hourly interval bars inside each session, the last one clipped at the close.
+ *  Seven bars per session (09:30 … 15:30), so a block is countable by eye. */
+const sessionBars = (amp, phase) => {
+    const rows = [];
+    let i = 0;
+    for (const s of SESSIONS) {
+        for (let t = s.open; t < s.close; t += H, i++) {
+            rows.push([
+                [t, Math.min(t + H, s.close)],
+                6 + amp * Math.sin(i / 3 + phase) + 1.2 * Math.sin(i * 1.7),
+            ]);
+        }
+    }
+    return new TimeSeries({
+        name: 'session',
+        schema: [
+            { name: 'timeRange', kind: 'timeRange' },
+            { name: 'v', kind: 'number' },
+        ],
+        rows,
+    });
+};
+const stamp = (t) => new Date(t).toISOString().slice(5, 16).replace('T', ' ');
+/**
+ * **A trading-time axis** — closed-market time collapsed, session dividers
+ * drawn. Selection on a *continuous* axis never has to ask where a block's
+ * edges fall relative to the data's own structure; here it does, because the
+ * axis has seams and a wall-clock bucketing knows nothing about them.
+ *
+ * `sessionDividers: 'all'` is part of the fixture rather than of one story:
+ * every cell in this column is about the session grid, so the grid should be
+ * visible in all of them.
+ */
+export const tradingSessions = {
+    name: 'TradingSessions',
+    container: {
+        /**
+         * Wider than the other columns — 42 bars across 6 sessions.
+         *
+         * **The x labels still crowd, and that is a defect this column found.**
+         * The trading axis budgets `TRADING_TICK_PX` (65px) of plot per tick and
+         * picks the finest grain that fits; here that is 12 hours. But a `00:00`
+         * anchor is not *inside* any session, so the collapse relocates it to the
+         * session open (09:30) — 2.5h into a 6.5h session, ~33px from that
+         * session's `12:00` label. The budget bounds spacing in wall-clock time
+         * and the axis draws in trading time, so it does not bound what it thinks
+         * it bounds. Widening moves the labels from overlapping to merely
+         * abutting, which is why 820 rather than the shared 640.
+         *
+         * Left visible on purpose: it is orthogonal to selection, and papering
+         * over it (fewer sessions, one bar per session) would cost the weekend
+         * seam the crossing story is built on.
+         */
+        width: 820,
+        range: [MON_OPEN, SESSIONS[SESSIONS.length - 1].close],
+        // The high-level sugar; the container derives the provider itself. Built
+        // once at module scope because the prop must be a *stable* reference.
+        calendar: calendarOf(SESSIONS),
+        sessionDividers: 'all',
+    },
+    axis: { id: 'v', min: 0, max: 12, label: '' },
+    renderLayer: (id) => (_jsx(BarChart, { series: sessionBars(4, 0), column: "v", axis: "v", id: id })),
+    secondary: {
+        axis: { id: 'e', min: 0, max: 12, label: 'errors' },
+        renderLayer: (id) => (_jsx(BarChart, { series: sessionBars(2.2, 1.1), column: "v", axis: "e", id: id, as: "warn" })),
+    },
+    picks: [0, 3, 8].map((i) => ({
+        label: stamp(MON_OPEN + i * H),
+        info: {
+            id: 'svc',
+            key: MON_OPEN + i * H,
+            value: 0,
+            color: '#000',
+            label: 'v',
+        },
+    })),
+    describe: (hit) => stamp(hit.key),
+    // The column's ordinary `SweepWithSequence` cell snaps to whole sessions —
+    // the same bucketing `sessions.conforming` names, so the generated story and
+    // the session pair below agree about what "conforming" means.
+    sequence: () => sessionSeq(SESSIONS),
+    rangeCursor: true,
+    sweep: true,
+    sessions: {
+        conforming: () => sessionSeq(SESSIONS),
+        /**
+         * **Noon-thirty to noon-thirty.** A wall-clock day bucket anchored inside
+         * the session, so no boundary can coincide with an open or a close: every
+         * block takes the afternoon of one session and the morning of the next.
+         * 12:30 is deliberately a *bar* edge — the block straddling a seam is the
+         * subject, and a bucket boundary bisecting a bar would be a second,
+         * unrelated question.
+         */
+        crossing: () => Sequence.every('1d', { anchor: MON_OPEN + 3 * H }),
+    },
+};
+/** Every column of the matrix, in tree order. */
+export const FIXTURES = [
+    categoricalBars,
+    timeBars,
+    stackedBars,
+    boxWhisker,
+    boxSolid,
+    candles,
+    scatterPoints,
+    heatGrid,
+    tradingSessions,
+];
+/** Shared caption styling, so every cell reads identically. */
+export const caption = {
+    font: '13px system-ui',
+    color: '#667',
+    marginTop: 4,
+    maxWidth: 640,
+};
+export { DAY, D0 };
+//# sourceMappingURL=selection-fixtures.js.map

package/dist/selection-stories.d.ts

@@ -0,0 +1,73 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { type ChartFixture } from './selection-fixtures.js';
+/**
+ * **The selection matrix's rows** — one feature set, rendered against every
+ * chart fixture (`selection-fixtures.tsx` supplies the columns).
+ *
+ * Every story here is generated from one definition, so a difference between
+ * two columns is a difference in the **library**, not in how someone happened
+ * to write the story. That is what makes walking the matrix a review technique
+ * rather than a gallery — see CLAUDE.md → "Storybook stories".
+ *
+ * Stories whose subject is *not* chart-type dependent (the deprecation shim,
+ * for instance) deliberately live in one column only; running them against
+ * every fixture would test nothing new.
+ */
+type Story = StoryObj;
+/**
+ * The `<Selector>` feature set for one chart type. `<RangeCursor>` is mounted
+ * only where the fixture declares it draws — on an ordinal axis it does not,
+ * and mounting one there costs the row its cursor entirely.
+ */
+export interface SelectorStories {
+    MountedAtContainer: Story;
+    MountedInRow: Story;
+    NoSelector: Story;
+    ControlledNoSelector: Story;
+    ModifiersReported: Story;
+    HoverOnly: Story;
+    BareSelector: Story;
+}
+export declare function makeSelectorStories(fx: ChartFixture): SelectorStories;
+/**
+ * The `<MultiSelector>` feature set for one chart type. `SweepWithSequence` is
+ * generated only where the fixture declares a `sequence` — an ordinal axis has
+ * no time bucketing, so that cell is a **gap in the matrix rather than a story
+ * that quietly does nothing**.
+ *
+ * The whole set is `null` for a fixture whose layer cannot sweep (`sweep:
+ * false`): with no `beginSweep` a mounted `<MultiSelector>` has neither a drag
+ * nor a resting preview, so every cell would render a chart that ignores the
+ * component it is named after.
+ */
+export interface MultiSelectorStories {
+    SweepMarks: Story;
+    ClickStillSelectsOne: Story;
+    LivePreviewDuringDrag: Story;
+    SweepAdditive: Story;
+    DemoteOnEdit: Story;
+    /** Only where the fixture declares a `sequence` — see the factory's doc. */
+    SweepWithSequence?: Story;
+}
+export declare function makeMultiSelectorStories(fx: ChartFixture): MultiSelectorStories | null;
+/**
+ * **The two session-break cells** — generated only for a fixture whose axis
+ * collapses closed-market time (`fx.sessions`).
+ *
+ * Every other cell in the matrix runs on an axis with no internal structure,
+ * where a snap block is just an interval. A trading-time axis has **seams**,
+ * and a wall-clock bucketing knows nothing about them — so "what does a
+ * selection block do at a session break?" becomes a real question with two
+ * answers worth seeing side by side. Both stories draw `sessionDividers`, so
+ * the grid a block either respects or ignores is on screen.
+ *
+ * These live in one column by construction: there is nothing to compare them
+ * against in a column whose axis has no seams.
+ */
+export interface SessionStories {
+    SequenceConformsToSessions: Story;
+    SequenceCrossesSessions: Story;
+}
+export declare function makeSessionStories(fx: ChartFixture): SessionStories | null;
+export {};
+//# sourceMappingURL=selection-stories.d.ts.map