@pond-ts/charts 0.69.0 → 0.71.0

package/dist/selection-fixtures.js

@@ -48,8 +48,6 @@ export const categoricalBars = {
     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 ──────────────────────────────────────────────────────────────
@@ -108,7 +106,6 @@ export const timeBars = {
      * 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) ──────────────────────────────────────
@@ -177,7 +174,6 @@ export const stackedBars = {
         ? 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) ─────────────────────────────
@@ -258,7 +254,6 @@ const boxFixture = (name, shape, note) => ({
     /** 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. */
@@ -332,7 +327,6 @@ export const candles = {
     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
@@ -402,7 +396,6 @@ export const scatterPoints = {
     // 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)`.
@@ -443,7 +436,6 @@ export const heatGrid = {
     // 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
@@ -531,7 +523,6 @@ export const tradingSessions = {
     // 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),

package/dist/selection-stories.d.ts

@@ -9,15 +9,13 @@ import { type ChartFixture } from './selection-fixtures.js';
  * 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.
+ * Stories whose subject is *not* chart-type dependent 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.
+ * The `<Selector>` feature set for one chart type, each with a `<RangeCursor>`
+ * mounted (on an ordinal axis it shades the slot under the pointer).
  */
 export interface SelectorStories {
     MountedAtContainer: Story;

package/dist/selection-stories.js

@@ -6,7 +6,7 @@ import { Layers } from './Layers.js';
 import { YAxis } from './YAxis.js';
 import { Selector, MultiSelector } from './selectors.js';
 import { isSpanSelection, sameMark, selectionContains } from './span.js';
-import { RangeCursor } from './cursors.js';
+import { LineCursor, RangeCursor } from './cursors.js';
 import { caption } from './selection-fixtures.js';
 const H = 240;
 /**
@@ -23,7 +23,7 @@ function Chart({ fx, children, height = H, selector, ...container }) {
 }
 const list = (fx, sel) => sel.map((m) => fx.describe(m)).join(', ') || '—';
 export function makeSelectorStories(fx) {
-    const Cursor = () => (fx.rangeCursor ? _jsx(RangeCursor, {}) : null);
+    const Cursor = () => _jsx(RangeCursor, {});
     return {
         /** **Mounted at the container** — the ordinary case: one `<Selector>` as a
          *  child of `<ChartContainer>`, enabling the click for every row. It
@@ -40,7 +40,7 @@ export function makeSelectorStories(fx) {
         MountedInRow: {
             render: function Render() {
                 const [sel, setSel] = useState([]);
-                return (_jsxs("div", { children: [_jsxs(ChartContainer, { width: 640, ...fx.container, children: [_jsxs(ChartRow, { height: 150, children: [_jsx(YAxis, { id: fx.axis.id, label: fx.axis.label || 'primary', min: fx.axis.min, max: fx.axis.max }), _jsx(Cursor, {}), _jsx(Selector, { selected: sel, onSelect: (h) => setSel(h === null ? [] : [h]), children: _jsx(Layers, { children: fx.renderLayer('svc') }) })] }), _jsxs(ChartRow, { height: 110, children: [_jsx(YAxis, { id: fx.secondary.axis.id, label: fx.secondary.axis.label, min: fx.secondary.axis.min, max: fx.secondary.axis.max }), _jsx(Layers, { children: fx.secondary.renderLayer('err') })] })] }), _jsxs("p", { style: caption, children: ["The top row selects; the bottom row has no", ' ', _jsx("code", { children: "<Selector>" }), " in scope. ", _jsx("strong", { children: "selected:" }), ' ', list(fx, sel)] })] }));
+                return (_jsxs("div", { children: [_jsxs(ChartContainer, { width: 640, ...fx.container, children: [_jsx(LineCursor, {}), _jsxs(ChartRow, { height: 150, children: [_jsx(YAxis, { id: fx.axis.id, label: fx.axis.label || 'primary', min: fx.axis.min, max: fx.axis.max }), _jsx(Cursor, {}), _jsx(Selector, { selected: sel, onSelect: (h) => setSel(h === null ? [] : [h]), children: _jsx(Layers, { children: fx.renderLayer('svc') }) })] }), _jsxs(ChartRow, { height: 110, children: [_jsx(YAxis, { id: fx.secondary.axis.id, label: fx.secondary.axis.label, min: fx.secondary.axis.min, max: fx.secondary.axis.max }), _jsx(Layers, { children: fx.secondary.renderLayer('err') })] })] }), _jsxs("p", { style: caption, children: ["The top row selects; the bottom row has no", ' ', _jsx("code", { children: "<Selector>" }), " in scope. ", _jsx("strong", { children: "selected:" }), ' ', list(fx, sel)] })] }));
             },
         },
         /** **No selector — the plot is inert.** An id-bearing, hit-testable layer
@@ -68,7 +68,7 @@ export function makeSelectorStories(fx) {
                 };
                 return (_jsxs("div", { children: [_jsx("div", { style: { marginBottom: 8 }, children: fx.picks.map((p) => (_jsx("button", { style: btn, onClick: () => setSel((cur) => cur.some((m) => sameMark(m, p.info))
                                     ? cur.filter((m) => !sameMark(m, p.info))
-                                    : [...cur, p.info]), children: p.label }, p.label))) }), _jsx(Chart, { fx: fx, selector: _jsx(Selector, { enabled: false, selected: sel }) }), _jsxs("p", { style: caption, children: ["The buttons drive the highlight; clicking the plot does nothing.", ' ', _jsx("strong", { children: "selected:" }), " ", list(fx, sel)] })] }));
+                                    : [...cur, p.info]), children: p.label }, p.label))) }), _jsx(Chart, { fx: fx, selector: _jsx(Selector, { enabled: false, selected: sel }), children: _jsx(LineCursor, {}) }), _jsxs("p", { style: caption, children: ["The buttons drive the highlight; clicking the plot does nothing.", ' ', _jsx("strong", { children: "selected:" }), " ", list(fx, sel)] })] }));
             },
         },
         /** **The modifiers are reported; the policy is yours.** `onSelect`'s second

package/dist/selectors.d.ts

@@ -227,9 +227,8 @@ export interface MultiSelectorProps {
  *
  * - The shared brush band becomes the **resting cursor**, spanning the snap
  *   block under the pointer (the `sequence` bucket, else the layer's own
- *   bin/slot), replacing the container's implicit `'line'` default. An
- *   explicitly chosen cursor — a mounted component, or a legacy `cursor`
- *   string the consumer actually set — still wins the surface.
+ *   bin/slot), when no cursor component is mounted for the row. A mounted
+ *   cursor still wins the surface.
  * - Hover is **block-scoped**: pointing at any one mark of a block lights
  *   (and reports) every mark in it. Rest and drag share one code path — the
  *   same snap buckets, the same layer session — so what the rest previews and

package/dist/selectors.js

@@ -173,9 +173,8 @@ export function Selector({ enabled = true, selected, hovered, onHover, onSelect,
  *
  * - The shared brush band becomes the **resting cursor**, spanning the snap
  *   block under the pointer (the `sequence` bucket, else the layer's own
- *   bin/slot), replacing the container's implicit `'line'` default. An
- *   explicitly chosen cursor — a mounted component, or a legacy `cursor`
- *   string the consumer actually set — still wins the surface.
+ *   bin/slot), when no cursor component is mounted for the row. A mounted
+ *   cursor still wins the surface.
  * - Hover is **block-scoped**: pointing at any one mark of a block lights
  *   (and reports) every mark in it. Rest and drag share one code path — the
  *   same snap buckets, the same layer session — so what the rest previews and

package/dist/tracker.d.ts

@@ -1,11 +1,10 @@
 /**
- * Cursor geometry helpers — pure functions deciding *what* the cursor draws
- * ({@link cursorParts}) and *where* it sits ({@link resolveCursorX}). The marks
+ * Cursor geometry helpers — pure functions deciding *where* the cursor sits
+ * ({@link resolveCursorX}) and which bucket it shades. The marks
  * themselves render as an SVG overlay in `Layers` (no cursor canvas); these
  * helpers stay pure, so they're unit-tested directly.
  */
-import type { Interval } from 'pond-ts';
-import type { CursorMode } from './context.js';
+import { Interval } from 'pond-ts';
 /**
  * The interval in the sorted, non-overlapping `buckets` that contains `t`
  * (`begin ≤ t < end`), or `undefined` if `t` falls in no bucket. Binary search —
@@ -39,30 +38,13 @@ export declare function bandRect(buckets: readonly Interval[], t1: number, xScal
     x0: number;
     x1: number;
 } | null;
-/** Default cursor mode — the synced vertical line (cursor enabled on the
- *  container by default; pair with an off-chart readout via `onTrackerChanged`). */
-export declare const DEFAULT_CURSOR_MODE: CursorMode;
 /**
- * Decompose a {@link CursorMode} into what it draws: the shared vertical line,
- * the per-series dots, and which value chip (if any). The modes are exclusive
- * presets — `line` is line-only, `point` / `inline` / `flag` are dot-based with
- * no line, `none` draws nothing. `flag` raises a staff from each point to a
- * value flag stacked near the top of the row (drawn in `Layers`).
- *
- * **Superseded by the mounted cursor presets** (`cursors.tsx` — each mode's
- * drawing now lives in its component's registered spec): `Layers` no longer
- * reads this. Kept, with its tests, for the life of the `cursor` string-prop
- * deprecation window as the pinned record of what each mode drew; delete both
- * when the modes go.
+ * The unit slots `[i, i+1)` of a category axis, from its band scale's domain
+ * (`[0, n]`) — the buckets a `<RangeCursor>` snaps to there when no bar layer
+ * has published its own (a bar layer's are the same slots). Empty for an
+ * empty axis.
  */
-export declare function cursorParts(mode: CursorMode): {
-    readonly line: boolean;
-    readonly dots: boolean;
-    readonly chip: 'none' | 'inline' | 'flag' | 'axis';
-    /** `region` mode: a shaded **band** over the bucket under the pointer (from
-     *  `cursorSequence`), drawn by `Layers`; no line/dots/chip of its own. */
-    readonly band: boolean;
-};
+export declare function categorySlots(domain: readonly unknown[]): Interval[];
 /**
  * The crosshair's plot-pixel x from the tracker inputs. **A live local pointer
  * always wins:** a chart the user is actively hovering (`hoverX` non-null) shows
@@ -79,8 +61,8 @@ export declare function cursorParts(mode: CursorMode): {
  *
  * `null` and `undefined` are **equivalent** — both mean "no controlled position"
  * (a hovered chart still tracks its pointer; a non-hovered one shows nothing). To
- * force a chart to never show a cursor at all, use `cursor="none"`, not
- * `trackerPosition={null}`.
+ * force a chart to never show a cursor at all, mount no cursor component, rather
+ * than relying on `trackerPosition={null}`.
  */
 export declare function resolveCursorX(trackerPosition: number | null | undefined, hoverX: number | null, xScale: (time: number) => number): number | null;
 //# sourceMappingURL=tracker.d.ts.map

package/dist/tracker.js

@@ -1,9 +1,10 @@
 /**
- * Cursor geometry helpers — pure functions deciding *what* the cursor draws
- * ({@link cursorParts}) and *where* it sits ({@link resolveCursorX}). The marks
+ * Cursor geometry helpers — pure functions deciding *where* the cursor sits
+ * ({@link resolveCursorX}) and which bucket it shades. The marks
  * themselves render as an SVG overlay in `Layers` (no cursor canvas); these
  * helpers stay pure, so they're unit-tested directly.
  */
+import { Interval } from 'pond-ts';
 /**
  * The interval in the sorted, non-overlapping `buckets` that contains `t`
  * (`begin ≤ t < end`), or `undefined` if `t` falls in no bucket. Binary search —
@@ -70,45 +71,21 @@ export function bandRect(buckets, t1, xScale, plotWidth, t2) {
     const x1 = Math.min(plotWidth, xScale(span.end));
     return x1 > x0 ? { x0, x1 } : null;
 }
-/** Default cursor mode — the synced vertical line (cursor enabled on the
- *  container by default; pair with an off-chart readout via `onTrackerChanged`). */
-export const DEFAULT_CURSOR_MODE = 'line';
 /**
- * Decompose a {@link CursorMode} into what it draws: the shared vertical line,
- * the per-series dots, and which value chip (if any). The modes are exclusive
- * presets — `line` is line-only, `point` / `inline` / `flag` are dot-based with
- * no line, `none` draws nothing. `flag` raises a staff from each point to a
- * value flag stacked near the top of the row (drawn in `Layers`).
- *
- * **Superseded by the mounted cursor presets** (`cursors.tsx` — each mode's
- * drawing now lives in its component's registered spec): `Layers` no longer
- * reads this. Kept, with its tests, for the life of the `cursor` string-prop
- * deprecation window as the pinned record of what each mode drew; delete both
- * when the modes go.
+ * The unit slots `[i, i+1)` of a category axis, from its band scale's domain
+ * (`[0, n]`) — the buckets a `<RangeCursor>` snaps to there when no bar layer
+ * has published its own (a bar layer's are the same slots). Empty for an
+ * empty axis.
  */
-export function cursorParts(mode) {
-    const base = { line: false, dots: false, chip: 'none', band: false };
-    switch (mode) {
-        case 'line':
-            return { ...base, line: true };
-        case 'point':
-            return { ...base, dots: true };
-        case 'inline':
-            return { ...base, dots: true, chip: 'inline' };
-        case 'flag':
-            return { ...base, dots: true, chip: 'flag' };
-        case 'crosshair':
-            // A single reticle (not per-series): `Layers` draws the dashed vertical +
-            // full-width horizontal lines, the centre dot, and one value pill itself
-            // (so no generic line/dots here); the x-time pill is on `<XAxis>`.
-            return { ...base, chip: 'axis' };
-        case 'region':
-            // A shaded band over the bucket under the pointer — `Layers` resolves the
-            // bucket from `cursorBuckets` and draws the rect (cropped through xScale).
-            return { ...base, band: true };
-        case 'none':
-            return { ...base };
+export function categorySlots(domain) {
+    const lo = Number(domain[0]);
+    const n = Math.max(0, Math.round(Number(domain[1]) - lo));
+    const out = [];
+    for (let i = 0; i < n; i += 1) {
+        const b = lo + i;
+        out.push(new Interval({ value: b, start: b, end: b + 1 }));
     }
+    return out;
 }
 /**
  * The crosshair's plot-pixel x from the tracker inputs. **A live local pointer
@@ -126,8 +103,8 @@ export function cursorParts(mode) {
  *
  * `null` and `undefined` are **equivalent** — both mean "no controlled position"
  * (a hovered chart still tracks its pointer; a non-hovered one shows nothing). To
- * force a chart to never show a cursor at all, use `cursor="none"`, not
- * `trackerPosition={null}`.
+ * force a chart to never show a cursor at all, mount no cursor component, rather
+ * than relying on `trackerPosition={null}`.
  */
 export function resolveCursorX(trackerPosition, hoverX, xScale) {
     if (hoverX !== null)

package/dist/tradingAxis.fixture.d.ts

@@ -50,6 +50,25 @@ export declare function ticks(sessions: Session[], stepMs: number): TimeSeries<t
  *  pen-up. (Plain {@link ticks} walks continuously across sessions, so close ≈
  *  next open and the break is invisible — this is the fixture that shows it.) */
 export declare function gappingTicks(sessions: Session[], stepMs: number): TimeSeries<typeof tickSchema>;
+export declare const envelopeSchema: readonly [{
+    readonly name: "time";
+    readonly kind: "time";
+}, {
+    readonly name: "price";
+    readonly kind: "number";
+}, {
+    readonly name: "lo";
+    readonly kind: "number";
+}, {
+    readonly name: "hi";
+    readonly kind: "number";
+}];
+/** {@link gappingTicks} plus a `lo` / `hi` envelope around the price (a slowly
+ *  breathing spread), so a `<BandChart>` on the trading axis shows the same
+ *  overnight jump the line does: connected, the fill runs a near-vertical sliver
+ *  from one session's close to the next open; with `sessionBreaks` it ends at
+ *  the close and re-starts at the open. */
+export declare function gappingEnvelope(sessions: Session[], stepMs: number): TimeSeries<typeof envelopeSchema>;
 export declare const OHLC: {
     readonly open: {
         readonly from: "price";

package/dist/tradingAxis.fixture.js

@@ -195,6 +195,30 @@ export function gappingTicks(sessions, stepMs) {
     });
     return new TimeSeries({ name: 'ticks', schema: tickSchema, rows });
 }
+export const envelopeSchema = [
+    { name: 'time', kind: 'time' },
+    { name: 'price', kind: 'number' },
+    { name: 'lo', kind: 'number' },
+    { name: 'hi', kind: 'number' },
+];
+/** {@link gappingTicks} plus a `lo` / `hi` envelope around the price (a slowly
+ *  breathing spread), so a `<BandChart>` on the trading axis shows the same
+ *  overnight jump the line does: connected, the fill runs a near-vertical sliver
+ *  from one session's close to the next open; with `sessionBreaks` it ends at
+ *  the close and re-starts at the open. */
+export function gappingEnvelope(sessions, stepMs) {
+    const rows = [];
+    let i = 0;
+    sessions.forEach((s, si) => {
+        const base = 100 + si * 6; // each session gaps ~6 above the last
+        for (let t = s.open; t < s.close; t += stepMs, i++) {
+            const price = base + 4 * Math.sin(i / 18) + 1.5 * Math.sin(i / 3.5);
+            const spread = 1.5 + 0.8 * Math.sin(i / 40);
+            rows.push([t, price, price - spread, price + spread]);
+        }
+    });
+    return new TimeSeries({ name: 'envelope', schema: envelopeSchema, rows });
+}
 export const OHLC = {
     open: { from: 'price', using: 'first' },
     high: { from: 'price', using: 'max' },

package/dist/tradingTimeScale.d.ts

@@ -183,13 +183,13 @@ export interface TradingTimeScale {
      * `02 AM`; a sub-day axis reads date **+** clock). This is the grain-aware
      * default the crosshair pill, marker indicators, and annotation auto-labels
      * use — replacing d3's multi-scale default, which showed local time-of-day
-     * for any off-local-midnight instant. A container `cursorFormat` overrides it.
+     * for any off-local-midnight instant. A cursor's `format` overrides it.
      */
     readoutFormat(count?: number): (value: number) => string;
     /**
      * The axis's resolved **coarse grain** ({@link TimeGrain}) at `count` — the
      * unit the ticks currently sit on (`year` … `second`), strides collapsed. A
-     * `cursorFormat` callback receives this so it can branch on the zoom level
+     * cursor `format` callback receives this so it can branch on the zoom level
      * (return a year when zoomed out, a clock when zoomed in) without
      * re-deriving the ladder the axis already ran.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pond-ts/charts",
-  "version": "0.69.0",
+  "version": "0.71.0",
   "private": false,
   "description": "Canvas-rendered, streaming-first React time-series charts for pond-ts: line, area, band, bar, scatter, box, candlestick, with cursors, selection and annotations",
   "keywords": [
@@ -62,8 +62,8 @@
     "perf": "PERF_BENCH=1 playwright test perf.spec.ts --workers=1"
   },
   "peerDependencies": {
-    "@pond-ts/react": "^0.69.0",
-    "pond-ts": "^0.69.0",
+    "@pond-ts/react": "^0.71.0",
+    "pond-ts": "^0.71.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {