@pond-ts/charts 0.37.0 → 0.39.0

package/dist/XAxis.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useContext } from 'react';
 import { ContainerContext } from './context.js';
+import { axisPillStyle } from './chip.js';
 import { resolveAxisFormat, resolveTimeFormat, } from './format.js';
 /** Tick strip height (mark + value label) in CSS px. */
 const TICK_STRIP = 22;
@@ -23,6 +24,17 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
         throw new Error('<XAxis> must be rendered inside a <ChartContainer>');
     }
     const { xScale, plotWidth, leftGutter, theme, formatTime, xKind } = container;
+    // The crosshair's x-time pill: when the container cursor is `'crosshair'` and a
+    // cursor is live in-bounds, pin the hovered time to this axis (covering the
+    // tick behind it), matching the on-axis y value pills the rows draw. Gated on
+    // the container default, so a per-row `cursor` override doesn't reach here.
+    const cursorX = container.cursorX;
+    const showCursorTag = container.cursor === 'crosshair' &&
+        cursorX !== null &&
+        cursorX >= 0 &&
+        cursorX <= plotWidth;
+    const cursorColor = theme.cursor ?? theme.axis.label;
+    const annotationColor = theme.annotation?.color ?? '#0d9488';
     // Tick formatter: an explicit `format` is resolved against the axis kind
     // (a time specifier through the time scale, a number specifier through the
     // value scale); otherwise the container's shared formatter — the one the
@@ -32,14 +44,66 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
         : xKind === 'time'
             ? resolveTimeFormat(xScale, TICK_COUNT, format)
             : resolveAxisFormat(xScale, TICK_COUNT, format);
+    // Marker annotations that opted into an axis indicator (`<Marker indicator>`)
+    // pin their **time** to this shared x-axis — a pill at `at`, in the annotation
+    // colour, reading like a tick. An indicator always shows the axis coordinate
+    // (the formatted `at`), never the marker's custom label (that stays the in-plot
+    // chip). Skipped when off-plot.
+    // Coincident indicator markers (same `at`) show the same time, so one pill
+    // stands for the group — dedup by `at` (the first wins), then place.
+    const seenAt = new Set();
+    const markerTags = container.annotations
+        .filter((a) => a.indicator && a.kind === 'marker' && a.xs[0] !== undefined)
+        .filter((a) => {
+        const at = a.xs[0];
+        if (seenAt.has(at))
+            return false;
+        seenAt.add(at);
+        return true;
+    })
+        .map((a) => {
+        const at = a.xs[0];
+        return {
+            key: a.key,
+            id: a.id ?? `marker-at-${at}`,
+            x: xScale(at),
+            text: fmt(at),
+        };
+    })
+        .filter((t) => t.x >= 0 && t.x <= plotWidth);
+    // Stack overlapping marker pills into lanes — they all share this one strip.
+    // Greedy left→right; the dragged mark (`draggingKey`) is pinned to lane 0 so the
+    // static pills hold their lanes as it crosses them (no reshuffle mid-drag).
+    const pillWidth = (text) => text.length * theme.font.size * 0.62 + 10;
+    const pillLaneEnds = [];
+    const markerLanes = new Map();
+    for (const t of [...markerTags].sort((p, q) => p.x - q.x)) {
+        if (t.key === container.draggingKey) {
+            markerLanes.set(t.id, 0);
+            continue;
+        }
+        const left = t.x - pillWidth(t.text) / 2;
+        let lane = 0;
+        while (lane < pillLaneEnds.length && pillLaneEnds[lane] + 4 > left)
+            lane += 1;
+        pillLaneEnds[lane] = left + pillWidth(t.text);
+        markerLanes.set(t.id, lane);
+    }
+    const maxPillLane = Math.max(0, pillLaneEnds.length - 1);
     const placed = customTicks
         ? customTicks.map((t) => ({ x: xScale(t.at), label: t.label }))
         : xScale.ticks(TICK_COUNT).map((d) => ({
             x: xScale(d),
             label: fmt(+d),
         }));
-    const stripHeight = height ?? TICK_STRIP + (label ? LABEL_STRIP : 0);
     const onTop = side === 'top';
+    // Axis pills (marker / crosshair) sit at the same offset as the tick labels so
+    // they line up with their tick-label neighbours (matches `labelOffset` below).
+    const pillOffset = align === 'right' ? 2 : 6;
+    // Per-lane vertical step for stacked pills; grow the strip to fit the stack.
+    const PILL_LANE_H = theme.font.size + 6;
+    const stripHeight = (height ?? TICK_STRIP + (label ? LABEL_STRIP : 0)) +
+        maxPillLane * PILL_LANE_H;
     return (_jsxs("div", { style: {
             position: 'relative',
             marginLeft: `${leftGutter}px`,
@@ -92,6 +156,39 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
                     color: theme.axis.title?.color ?? theme.axis.label,
                     opacity: theme.axis.title?.opacity ?? 0.85,
                     whiteSpace: 'nowrap',
-                }, children: label }))] }));
+                }, children: label })), markerTags.map((t) => {
+                // The pill's lane: stacked below the base row when it would overlap a
+                // neighbour; the connector lengthens to reach it.
+                const laneY = pillOffset + (markerLanes.get(t.id) ?? 0) * PILL_LANE_H;
+                return (_jsxs(Fragment, { children: [_jsx("div", { style: {
+                                position: 'absolute',
+                                left: `${t.x}px`,
+                                [onTop ? 'bottom' : 'top']: 0,
+                                width: '1px',
+                                height: `${laneY}px`,
+                                background: annotationColor,
+                                zIndex: 2,
+                            } }), _jsx("div", { style: {
+                                ...axisPillStyle(theme, annotationColor),
+                                left: `${t.x}px`,
+                                transform: 'translateX(-50%)',
+                                [onTop ? 'bottom' : 'top']: `${laneY}px`,
+                                zIndex: 2,
+                            }, children: t.text })] }, t.id));
+            }), showCursorTag && (_jsxs(Fragment, { children: [_jsx("div", { style: {
+                            position: 'absolute',
+                            left: `${cursorX}px`,
+                            [onTop ? 'bottom' : 'top']: 0,
+                            width: '1px',
+                            height: `${pillOffset}px`,
+                            background: cursorColor,
+                            zIndex: 3,
+                        } }), _jsx("div", { style: {
+                            ...axisPillStyle(theme, cursorColor),
+                            left: `${cursorX}px`,
+                            transform: 'translateX(-50%)',
+                            [onTop ? 'bottom' : 'top']: `${pillOffset}px`,
+                            zIndex: 3,
+                        }, children: fmt(+xScale.invert(cursorX)) })] }))] }));
 }
 //# sourceMappingURL=XAxis.js.map

package/dist/annotations.d.ts

@@ -1,12 +1,21 @@
-import { type AnnotationSpec } from './context.js';
+import { type AnnotationSpec, type LabelPlacement } from './context.js';
 /**
- * Greedy left→right lane packing for the **top-flag** labels (markers + regions): a
- * label that would overlap the one to its left drops to the next free lane below,
- * so close-in-x labels stack instead of colliding (and a dragged label slides under
- * its neighbour). Returns slot-key → lane (0 = top). Baselines, whose labels anchor
- * at the left at their own y, don't participate.
+ * Lane placement for the **top-flag** labels (markers + regions). Returns, per
+ * slot key, its {@link LabelPlacement}. Baselines (label anchored at their own y)
+ * don't participate.
+ *
+ * Three behaviours:
+ * - **Per row** — labels only contend within their own row's top space (a
+ *   bottom-row label at the same x as a top-row one isn't "in the way").
+ * - **Coincident markers merge** — labelled markers at the *same x* (e.g. dragged
+ *   together, snapped onto one line) fold into a **single** chip (`"z1, z2, max"`)
+ *   on one lane, rather than stacking three deep. The first is the representative
+ *   (its `label` is the joined text); the rest map to `label: null`.
+ * - **Greedy stacking** — non-coincident labels that would still overlap drop to
+ *   the next free lane. The `draggingKey` is excluded (pinned to lane 0, its own
+ *   label) so the static labels hold their lanes as it crosses them.
  */
-export declare function computeLabelLanes(annotations: readonly AnnotationSpec[], toPixel: (axisX: number) => number): Map<symbol, number>;
+export declare function computeLabelLanes(annotations: readonly AnnotationSpec[], toPixel: (axisX: number) => number, draggingKey?: symbol | null): Map<symbol, LabelPlacement>;
 /**
  * Order two region bounds so `from ≤ to`. A region **edge resize** pivots around
  * the *opposite* (fixed) edge: the dragged value `v` and the pivot are ordered
@@ -51,9 +60,16 @@ export interface MarkerProps {
     /** Make the marker **editable** (in edit mode): dragging its line reports the
      *  new `at` (controlled — wire it back to `at`). The whole line moves. */
     onChange?: (at: number) => void;
+    /** Also pin this marker's **time** to the **x-axis** as an on-axis pill (drawn
+     *  by `<XAxis>` at `at`, in the annotation colour) — the axis-edge counterpart
+     *  of the near-line chip. Default `false`. The pill always shows the formatted
+     *  `at` (the axis coordinate), never the custom `label` (which stays the
+     *  near-line chip) — an indicator reads like a tick. A connector links the
+     *  marker line to its pill. */
+    indicator?: boolean;
 }
 /** A vertical line at an x position (a time, a distance, a lap boundary). */
-export declare function Marker({ at, label, id, selected, selectable, hovered, editing, onChange, }: MarkerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Marker({ at, label, id, selected, selectable, hovered, editing, onChange, indicator, }: MarkerProps): import("react/jsx-runtime").JSX.Element;
 export interface BaselineProps {
     /** y value in the linked axis's units. */
     value: number;
@@ -62,6 +78,11 @@ export interface BaselineProps {
     /** Chip label. Omit to format `value` with that axis's formatter; pass `false`
      *  (or `''`) to render **no label chip**. */
     label?: string | false;
+    /** Which side of the chart the near-line label chip sits. **Default `left`.** */
+    labelSide?: 'left' | 'right';
+    /** Where the label chip sits relative to the line: **`center`** (default) rides
+     *  on the line, vertically centred; `above` sits just on top of it. */
+    labelPosition?: 'center' | 'above';
     /** Stable consumer id — a click reports it via `onSelectAnnotation`. */
     id?: string;
     /** Controlled selection — brightens to the front (level 1). Handles are an
@@ -82,10 +103,16 @@ export interface BaselineProps {
     /** Make the baseline **editable** (in edit mode): dragging it vertically reports
      *  the new `value` (controlled — wire it back to `value`). */
     onChange?: (value: number) => void;
+    /** Also pin this baseline's **value** to its **y-axis** as an on-axis pill (in
+     *  the annotation colour) — the axis-edge counterpart of the near-line chip.
+     *  Default `false`. The pill always shows the formatted `value` (the axis
+     *  coordinate), never the custom `label` (which stays the near-line chip) — an
+     *  indicator reads like a tick. */
+    indicator?: boolean;
 }
 /** A horizontal line at a y value, scaled against one row axis (RTC's `Baseline`).
  *  Its label anchors at the left, at the line's height. */
-export declare function Baseline({ value, axis, label, id, selected, selectable, hovered, editing, onChange, }: BaselineProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Baseline({ value, axis, label, labelSide, labelPosition, id, selected, selectable, hovered, editing, onChange, indicator, }: BaselineProps): import("react/jsx-runtime").JSX.Element | null;
 export interface RegionProps {
     /** Start x in axis units (time or value). */
     from: number;
@@ -122,8 +149,12 @@ export interface RegionProps {
         from: number;
         to: number;
     }) => void;
+    /** Draw the vertical **side outlines** at `from`/`to`. **Default `true`.**
+     *  `false` shades the span with no edge lines (fill only) — a soft highlight
+     *  band. Edit-mode resizing still works (the grab areas are invisible). */
+    edges?: boolean;
 }
 /** A shaded span over an x range — a lap, a zone, a selected interval. Its label
  *  flies as a flag off the left edge. */
-export declare function Region({ from, to, label, id, selected, selectable, hovered, editing, onChange, }: RegionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Region({ from, to, label, id, selected, selectable, hovered, editing, onChange, edges, }: RegionProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=annotations.d.ts.map

package/dist/annotations.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { ContainerContext, RowContext, } from './context.js';
-import { flagChipStyle, flagChipX } from './chip.js';
+import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
 import { useSlotKey } from './use-slot-key.js';
 /**
  * User-authored **annotations** — marks you place *on* a chart, in a register
@@ -114,7 +114,7 @@ function useAnnotationFrame(name) {
  *  other rows, order regions, and serve snap targets), keyed by the caller's stable
  *  per-instance slot key; unregister on unmount. `xs` should be memoised by the
  *  caller so the effect only re-runs when the position actually moves. */
-function useRegisterAnnotation(container, key, id, rowKey, kind, xs, selected, selectable, editing, label) {
+function useRegisterAnnotation(container, key, id, rowKey, kind, xs, selected, selectable, editing, label, indicator) {
     const { registerAnnotation, unregisterAnnotation } = container;
     useEffect(() => () => unregisterAnnotation(key), [unregisterAnnotation, key]);
     useEffect(() => {
@@ -128,6 +128,7 @@ function useRegisterAnnotation(container, key, id, rowKey, kind, xs, selected, s
             selectable,
             editing,
             label,
+            indicator,
         });
     }, [
         registerAnnotation,
@@ -140,6 +141,7 @@ function useRegisterAnnotation(container, key, id, rowKey, kind, xs, selected, s
         selectable,
         editing,
         label,
+        indicator,
     ]);
 }
 /** Vertical px between stacked label lanes. */
@@ -149,38 +151,93 @@ const LANE_H = 22;
 const LABEL_CHAR_W = 7;
 const LABEL_PAD = 16;
 const LANE_GAP = 6;
+/** Rough chip width (px) for the overlap model. */
+const labelWidth = (text) => text.length * LABEL_CHAR_W + LABEL_PAD;
 /**
- * Greedy left→right lane packing for the **top-flag** labels (markers + regions): a
- * label that would overlap the one to its left drops to the next free lane below,
- * so close-in-x labels stack instead of colliding (and a dragged label slides under
- * its neighbour). Returns slot-key → lane (0 = top). Baselines, whose labels anchor
- * at the left at their own y, don't participate.
+ * Lane placement for the **top-flag** labels (markers + regions). Returns, per
+ * slot key, its {@link LabelPlacement}. Baselines (label anchored at their own y)
+ * don't participate.
+ *
+ * Three behaviours:
+ * - **Per row** — labels only contend within their own row's top space (a
+ *   bottom-row label at the same x as a top-row one isn't "in the way").
+ * - **Coincident markers merge** — labelled markers at the *same x* (e.g. dragged
+ *   together, snapped onto one line) fold into a **single** chip (`"z1, z2, max"`)
+ *   on one lane, rather than stacking three deep. The first is the representative
+ *   (its `label` is the joined text); the rest map to `label: null`.
+ * - **Greedy stacking** — non-coincident labels that would still overlap drop to
+ *   the next free lane. The `draggingKey` is excluded (pinned to lane 0, its own
+ *   label) so the static labels hold their lanes as it crosses them.
  */
-export function computeLabelLanes(annotations, toPixel) {
-    const flags = annotations
-        .filter((a) => (a.kind === 'marker' || a.kind === 'region') &&
-        a.label.length > 0 &&
-        a.xs.length > 0)
-        .map((a) => {
-        const ax = a.kind === 'region' ? Math.min(a.xs[0], a.xs[1]) : a.xs[0];
-        return {
-            key: a.key,
-            left: toPixel(ax),
-            width: a.label.length * LABEL_CHAR_W + LABEL_PAD,
-        };
-    })
-        .sort((p, q) => p.left - q.left);
-    const laneEnds = []; // right-px of the last label placed in each lane
-    const lanes = new Map();
-    for (const f of flags) {
-        let lane = 0;
-        while (lane < laneEnds.length && laneEnds[lane] + LANE_GAP > f.left) {
-            lane += 1;
+export function computeLabelLanes(annotations, toPixel, draggingKey) {
+    const out = new Map();
+    const byRow = new Map();
+    for (const a of annotations) {
+        if ((a.kind !== 'marker' && a.kind !== 'region') ||
+            a.label.length === 0 ||
+            a.xs.length === 0)
+            continue;
+        const arr = byRow.get(a.rowKey);
+        if (arr)
+            arr.push(a);
+        else
+            byRow.set(a.rowKey, [a]);
+    }
+    for (const specs of byRow.values()) {
+        const flags = [];
+        const markerGroups = new Map();
+        for (const a of specs) {
+            if (a.kind === 'marker' && a.key !== draggingKey) {
+                const g = markerGroups.get(a.xs[0]);
+                if (g)
+                    g.push(a);
+                else
+                    markerGroups.set(a.xs[0], [a]);
+            }
+            else {
+                const ax = a.kind === 'region' ? Math.min(a.xs[0], a.xs[1]) : a.xs[0];
+                flags.push({
+                    rep: a.key,
+                    members: [a.key],
+                    left: toPixel(ax),
+                    width: labelWidth(a.label),
+                    label: a.label,
+                });
+            }
+        }
+        for (const [x, group] of markerGroups) {
+            const label = group.map((g) => g.label).join(', ');
+            flags.push({
+                rep: group[0].key,
+                members: group.map((g) => g.key),
+                left: toPixel(x),
+                width: labelWidth(label),
+                label,
+            });
         }
-        laneEnds[lane] = f.left + f.width;
-        lanes.set(f.key, lane);
+        const assign = (f, lane) => {
+            out.set(f.rep, { lane, label: f.label });
+            for (const m of f.members)
+                if (m !== f.rep)
+                    out.set(m, { lane, label: null });
+        };
+        // Greedy-pack the static flags; the dragged one is pinned to lane 0.
+        const dragged = flags.filter((f) => f.members.length === 1 && f.members[0] === draggingKey);
+        flags
+            .filter((f) => !dragged.includes(f))
+            .sort((p, q) => p.left - q.left)
+            .reduce((laneEnds, f) => {
+            let lane = 0;
+            while (lane < laneEnds.length && laneEnds[lane] + LANE_GAP > f.left)
+                lane += 1;
+            laneEnds[lane] = f.left + f.width;
+            assign(f, lane);
+            return laneEnds;
+        }, []);
+        for (const f of dragged)
+            assign(f, 0);
     }
-    return lanes;
+    return out;
 }
 /** A mark's hover state, synced both ways with the consumer. The effective hover
  *  is the local pointer hover **OR** the controlled `hovered` prop (so a legend row
@@ -257,7 +314,7 @@ function Pill({ cx, cy, w, h, color, }) {
  * **plot-pixel** position on press (`onDragStart`) / move (`onDrag`). With editing
  * off, press / move bubble so a pan reads straight through.
  */
-function DragArea({ x, y, w, h, cursor, editable, onHover, onSelect, onEdit, onDragStart, onDrag, }) {
+function DragArea({ x, y, w, h, cursor, editable, onHover, onSelect, onEdit, onDragStart, onDrag, onDragActive, }) {
     const dragging = useRef(false);
     // Tracks whether this press became a drag (moved past a few px) — a click that
     // didn't drag selects instead of edits. Tracked in *both* modes so a pan-drag
@@ -282,6 +339,7 @@ function DragArea({ x, y, w, h, cursor, editable, onHover, onSelect, onEdit, onD
                 return; // edit off: let it bubble (pan reads through)
             e.stopPropagation(); // claim the gesture — don't let the plot start a pan
             dragging.current = true;
+            onDragActive?.(true);
             onDragStart?.(p[0], p[1]);
             try {
                 e.currentTarget.setPointerCapture(e.pointerId);
@@ -310,6 +368,7 @@ function DragArea({ x, y, w, h, cursor, editable, onHover, onSelect, onEdit, onD
                 /* ignore */
             }
             dragging.current = false;
+            onDragActive?.(false);
             onHover(false);
         }, 
         // A system gesture takeover fires pointercancel, not pointerup — clear the
@@ -317,6 +376,7 @@ function DragArea({ x, y, w, h, cursor, editable, onHover, onSelect, onEdit, onD
         onPointerCancel: (e) => {
             if (!dragging.current)
                 return;
+            onDragActive?.(false);
             try {
                 e.currentTarget.releasePointerCapture(e.pointerId);
             }
@@ -338,7 +398,7 @@ function DragArea({ x, y, w, h, cursor, editable, onHover, onSelect, onEdit, onD
         } }));
 }
 /** A vertical line at an x position (a time, a distance, a lap boundary). */
-export function Marker({ at, label, id, selected = false, selectable = true, hovered, editing = false, onChange, }) {
+export function Marker({ at, label, id, selected = false, selectable = true, hovered, editing = false, onChange, indicator = false, }) {
     const { container, row, ann } = useAnnotationFrame('Marker');
     const selfKey = useSlotKey();
     const { hovering, reportHover } = useAnnotationHover(container, id, hovered);
@@ -350,7 +410,7 @@ export function Marker({ at, label, id, selected = false, selectable = true, hov
     const xs = useMemo(() => [at], [at]);
     // `label === false` (or '') ⇒ no chip; omitted ⇒ auto-label off the x formatter.
     const text = label === false ? '' : (label ?? container.formatTime(at));
-    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'marker', xs, selected, selectable, editing, text);
+    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'marker', xs, selected, selectable, editing, text, indicator);
     // No select/edit while a create tool is armed — the chart is in draw mode then.
     const select = id !== undefined && container.creating === null
         ? () => container.onSelectAnnotation?.(id)
@@ -362,16 +422,24 @@ export function Marker({ at, label, id, selected = false, selectable = true, hov
     const h = row.height;
     const opacity = rampAt(ann.depth, lineLevel(selectable, editable, hovering, selected));
     const showHandle = editable && (editing || hovering);
-    const lane = container.labelLanes.get(selfKey) ?? 0;
-    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: container.plotWidth, height: h, style: overlayStyle, children: [_jsx("line", { x1: x, y1: 0, x2: x, y2: h, stroke: ann.color, strokeWidth: 1, opacity: opacity, shapeRendering: "crispEdges" }), showHandle && (_jsx(Pill, { cx: x, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color })), selectable && (_jsx(DragArea, { x: x - HIT_PAD, y: 0, w: 2 * HIT_PAD, h: h, cursor: editing ? 'ew-resize' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDrag: (px) => onChange?.(snapToGuides(container, selfKey, px) ??
-                            +container.xScale.invert(px)) }))] }), text && (_jsx(Chip, { theme: container.theme, color: ann.color, style: {
+    // Placement decides the lane + the chip text: `chipLabel` is this marker's own
+    // label, the merged `"a, b"` when coincident markers fold together, or `null`
+    // for a folded-in member (its chip is subsumed by the representative's).
+    const placement = container.labelLanes.get(selfKey);
+    const lane = placement?.lane ?? 0;
+    const chipLabel = placement?.label ?? null;
+    // The staff (vertical line) hangs from the top of its flag — so a flag stacked
+    // into a lower lane doesn't leave line poking above it. No label ⇒ full height.
+    const staffTop = text ? FLAG_TOP + lane * LANE_H : 0;
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: container.plotWidth, height: h, style: overlayStyle, children: [_jsx("line", { x1: x, y1: staffTop, x2: x, y2: h, stroke: ann.color, strokeWidth: 1, opacity: opacity, shapeRendering: "crispEdges" }), showHandle && (_jsx(Pill, { cx: x, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color })), selectable && (_jsx(DragArea, { x: x - HIT_PAD, y: 0, w: 2 * HIT_PAD, h: h, cursor: editing ? 'ew-resize' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragActive: (a) => container.setDragging(a ? selfKey : null), onDrag: (px) => onChange?.(snapToGuides(container, selfKey, px) ??
+                            +container.xScale.invert(px)) }))] }), chipLabel && (_jsx(Chip, { theme: container.theme, color: ann.color, style: {
                     top: `${FLAG_TOP + lane * LANE_H}px`,
                     ...flagChipX(x, container.plotWidth),
-                }, children: text }))] }));
+                }, children: chipLabel }))] }));
 }
 /** A horizontal line at a y value, scaled against one row axis (RTC's `Baseline`).
  *  Its label anchors at the left, at the line's height. */
-export function Baseline({ value, axis, label, id, selected = false, selectable = true, hovered, editing = false, onChange, }) {
+export function Baseline({ value, axis, label, labelSide = 'left', labelPosition = 'center', id, selected = false, selectable = true, hovered, editing = false, onChange, indicator = false, }) {
     const { container, row, ann } = useAnnotationFrame('Baseline');
     const selfKey = useSlotKey();
     const { hovering, reportHover } = useAnnotationHover(container, id, hovered);
@@ -388,7 +456,7 @@ export function Baseline({ value, axis, label, id, selected = false, selectable
     // Baselines don't lane-pack (the label anchors at their y, not the top), so
     // this registered string is unused by `computeLabelLanes` — `|| ''` just
     // keeps it a string for `false`/'' (which mean "no label").
-    label || '');
+    label || '', indicator);
     // No select/edit while a create tool is armed — the chart is in draw mode then.
     const select = id !== undefined && container.creating === null
         ? () => container.onSelectAnnotation?.(id)
@@ -411,11 +479,27 @@ export function Baseline({ value, axis, label, id, selected = false, selectable
     const text = label === false ? '' : (label ?? (fmt ? fmt(value) : String(value)));
     // Handle pill near the right end (clears the left-anchored label).
     const handleX = w - 14;
-    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: w, height: row.height, style: overlayStyle, children: [_jsx("line", { x1: 0, y1: y, x2: w, y2: y, stroke: ann.color, strokeWidth: 1, opacity: opacity, shapeRendering: "crispEdges" }), showHandle && (_jsx(Pill, { cx: handleX, cy: y, w: HANDLE_LONG, h: HANDLE_SHORT, color: ann.color })), selectable && (_jsx(DragArea, { x: 0, y: y - HIT_PAD, w: w, h: 2 * HIT_PAD, cursor: editing ? 'ns-resize' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDrag: (_px, py) => onChange?.(yScale.invert(py)) }))] }), text && (_jsx(Chip, { theme: container.theme, color: ann.color, style: { top: `${y}px`, left: '2px', transform: 'translateY(-50%)' }, children: text }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: w, height: row.height, style: overlayStyle, children: [_jsx("line", { x1: 0, y1: y, x2: w, y2: y, stroke: ann.color, strokeWidth: 1, opacity: opacity, shapeRendering: "crispEdges" }), showHandle && (_jsx(Pill, { cx: handleX, cy: y, w: HANDLE_LONG, h: HANDLE_SHORT, color: ann.color })), selectable && (_jsx(DragArea, { x: 0, y: y - HIT_PAD, w: w, h: 2 * HIT_PAD, cursor: editing ? 'ns-resize' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragActive: (a) => container.setDragging(a ? selfKey : null), onDrag: (_px, py) => onChange?.(yScale.invert(py)) }))] }), text && (_jsx(Chip, { theme: container.theme, color: ann.color, style: {
+                    top: `${y}px`,
+                    [labelSide === 'right' ? 'right' : 'left']: '2px',
+                    // `center` rides on the line; `above` sits its bottom edge on the line.
+                    transform: labelPosition === 'above'
+                        ? 'translateY(-100%)'
+                        : 'translateY(-50%)',
+                }, children: text })), indicator &&
+                (() => {
+                    const half = container.theme.font.size / 2 + 1;
+                    return (_jsx("div", { style: {
+                            ...axisPillStyle(container.theme, ann.color),
+                            top: `${Math.max(half, Math.min(row.height - half, y))}px`,
+                            transform: 'translateY(-50%)',
+                            ...axisPillX(row.axisSides.get(axisId) ?? 'left', w),
+                        }, children: fmt ? fmt(value) : String(value) }));
+                })()] }));
 }
 /** A shaded span over an x range — a lap, a zone, a selected interval. Its label
  *  flies as a flag off the left edge. */
-export function Region({ from, to, label, id, selected = false, selectable = true, hovered, editing = false, onChange, }) {
+export function Region({ from, to, label, id, selected = false, selectable = true, hovered, editing = false, onChange, edges = true, }) {
     const { container, row, ann } = useAnnotationFrame('Region');
     const selfKey = useSlotKey();
     const { hovering, reportHover } = useAnnotationHover(container, id, hovered);
@@ -429,7 +513,7 @@ export function Region({ from, to, label, id, selected = false, selectable = tru
     const text = label === false
         ? ''
         : (label ?? `${container.formatTime(from)}–${container.formatTime(to)}`);
-    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'region', xs, selected, selectable, editing, text);
+    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'region', xs, selected, selectable, editing, text, false);
     // No select/edit while a create tool is armed — the chart is in draw mode then.
     const select = id !== undefined && container.creating === null
         ? () => container.onSelectAnnotation?.(id)
@@ -448,7 +532,7 @@ export function Region({ from, to, label, id, selected = false, selectable = tru
     const fillOpacity = ann.fillOpacity *
         rampAt(FILL_MULT, bodyLevel(selectable, editable, hovering, selected));
     const showHandles = editable && (editing || hovering);
-    const lane = container.labelLanes.get(selfKey) ?? 0;
+    const lane = container.labelLanes.get(selfKey)?.lane ?? 0;
     // Body move-drag: capture the start position + pointer on press, then move by
     // the TOTAL delta from there, so the *raw* position accumulates from a fixed
     // origin. Snap is applied only to the output — never fed back into this
@@ -460,7 +544,7 @@ export function Region({ from, to, label, id, selected = false, selectable = tru
     // region the other way instead of dead-ending at zero width.
     const edgeRef = useRef(null);
     const edge = (atX) => (_jsx("line", { x1: atX, y1: 0, x2: atX, y2: h, stroke: ann.color, strokeWidth: 1, opacity: edgeOpacity, shapeRendering: "crispEdges" }));
-    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: container.plotWidth, height: h, style: overlayStyle, children: [_jsx("rect", { x: left, y: 0, width: spanW, height: h, fill: ann.color, opacity: fillOpacity }), edge(xa), edge(xb), showHandles && (_jsxs(_Fragment, { children: [_jsx(Pill, { cx: xa, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color }), _jsx(Pill, { cx: xb, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color })] })), selectable && (_jsxs(_Fragment, { children: [_jsx(DragArea, { x: left, y: 0, w: spanW, h: h, cursor: editing ? 'grab' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragStart: (px) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: container.plotWidth, height: h, style: overlayStyle, children: [_jsx("rect", { x: left, y: 0, width: spanW, height: h, fill: ann.color, opacity: fillOpacity }), edges && edge(xa), edges && edge(xb), showHandles && (_jsxs(_Fragment, { children: [_jsx(Pill, { cx: xa, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color }), _jsx(Pill, { cx: xb, cy: h / 2, w: HANDLE_SHORT, h: HANDLE_LONG, color: ann.color })] })), selectable && (_jsxs(_Fragment, { children: [_jsx(DragArea, { x: left, y: 0, w: spanW, h: h, cursor: editing ? 'grab' : 'inherit', editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragActive: (a) => container.setDragging(a ? selfKey : null), onDragStart: (px) => {
                                     dragRef.current = { from, to, startPx: px };
                                 }, onDrag: (px) => {
                                     const s = dragRef.current;
@@ -485,10 +569,10 @@ export function Region({ from, to, label, id, selected = false, selectable = tru
                                         nt = st;
                                     }
                                     onChange?.({ from: nf, to: nt });
-                                } }), editable && (_jsxs(_Fragment, { children: [_jsx(DragArea, { x: xa - EDGE_GRAB / 2, y: 0, w: EDGE_GRAB, h: h, cursor: "ew-resize", editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragStart: () => {
+                                } }), editable && (_jsxs(_Fragment, { children: [_jsx(DragArea, { x: xa - EDGE_GRAB / 2, y: 0, w: EDGE_GRAB, h: h, cursor: "ew-resize", editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragActive: (a) => container.setDragging(a ? selfKey : null), onDragStart: () => {
                                             edgeRef.current = to; // the fixed pivot = the far edge
                                         }, onDrag: (px) => onChange?.(orderRegion(snapToGuides(container, selfKey, px) ??
-                                            +container.xScale.invert(px), edgeRef.current ?? to)) }), _jsx(DragArea, { x: xb - EDGE_GRAB / 2, y: 0, w: EDGE_GRAB, h: h, cursor: "ew-resize", editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragStart: () => {
+                                            +container.xScale.invert(px), edgeRef.current ?? to)) }), _jsx(DragArea, { x: xb - EDGE_GRAB / 2, y: 0, w: EDGE_GRAB, h: h, cursor: "ew-resize", editable: editable, onHover: reportHover, onSelect: select, onEdit: edit, onDragActive: (a) => container.setDragging(a ? selfKey : null), onDragStart: () => {
                                             edgeRef.current = from; // the fixed pivot = the near edge
                                         }, onDrag: (px) => onChange?.(orderRegion(snapToGuides(container, selfKey, px) ??
                                             +container.xScale.invert(px), edgeRef.current ?? from)) })] }))] }))] }), text && (_jsx(Chip, { theme: container.theme, color: ann.color, style: {

package/dist/chip.d.ts

@@ -13,6 +13,42 @@ import type { ChartTheme } from './theme.js';
  * contrasting chip background) — a token to settle before this ships.
  */
 export declare function flagChipStyle(theme: ChartTheme): CSSProperties;
+/**
+ * Pick a readable text colour (near-black or white) for text drawn **on top of**
+ * `bg`, by its sRGB relative luminance. Handles `#rgb`/`#rrggbb` (the theme
+ * palette); any other CSS colour falls back to white. So a saturated blue/red/
+ * teal pill gets white text, a pale turquoise pill gets dark text.
+ */
+export declare function contrastText(bg: string): string;
+/**
+ * The **axis indicator pill** look — a *solid* filled tag in `color` with
+ * auto-contrast text (the ChartIQ / Yahoo price-tag). Distinct from
+ * {@link flagChipStyle} (a light in-plot value chip): an on-axis indicator reads
+ * as a saturated pill covering the tick, not a floating readout. Note: it does
+ * **not** set `lineHeight` — it inherits `normal`, matching a bare tick label, so
+ * a pill anchored at the same offset lines up with its tick-label neighbours (a
+ * forced lineHeight would shift the text off the tick baseline). Shared by
+ * {@link YAxisIndicator}, the crosshair axis pills, and the Baseline/Marker
+ * `indicator` pills.
+ */
+export declare function axisPillStyle(theme: ChartTheme, color: string): CSSProperties;
+/**
+ * A small triangle on an axis pill's **plot-facing edge**, pointing into the
+ * plot at the value (the callout tab). For a `right`-side pill (extending right
+ * across the gutter) it sits on the pill's left edge pointing left; for a `left`
+ * pill, the mirror. Render as an absolutely-positioned child of the pill (the
+ * pill is itself absolute, so it's the containing block); colour matches the pill.
+ */
+export declare function pointerStyle(side: 'left' | 'right', color: string): CSSProperties;
+/**
+ * CSS placing a value pill **on the axis gutter** at `side`: anchor its inner
+ * edge at the plot boundary (`plotWidth`) and let it overflow outward across the
+ * reserved gutter (the plot div doesn't clip), lifted with `zIndex` above the
+ * sibling axis column (rendered later in the row) so it covers the tick behind
+ * it. Shared by {@link YAxisIndicator}'s `placement='axis'` and the crosshair
+ * cursor's per-series value pills, so both sit identically on the axis.
+ */
+export declare function axisPillX(side: 'left' | 'right', plotWidth: number): CSSProperties;
 /**
  * Horizontal placement for a flag chip beside a vertical pole at plot-x `x`:
  * `FLAG_GAP` to the right, flipping to the left near the right edge so it stays