@pond-ts/charts 0.32.0 → 0.33.0

package/CHANGELOG.md

@@ -8,7 +8,8 @@ The `@pond-ts` packages — `pond-ts`, `@pond-ts/react`, `@pond-ts/charts`, and
 them all. Pre-1.0: minor bumps may include new features and type-level changes;
 patch bumps are strictly additive.
 
-[Unreleased]: https://github.com/pjm17971/pond-ts/compare/v0.32.0...HEAD
+[Unreleased]: https://github.com/pjm17971/pond-ts/compare/v0.33.0...HEAD
+[0.33.0]: https://github.com/pjm17971/pond-ts/compare/v0.32.0...v0.33.0
 [0.32.0]: https://github.com/pjm17971/pond-ts/compare/v0.31.2...v0.32.0
 [0.31.2]: https://github.com/pjm17971/pond-ts/compare/v0.31.1...v0.31.2
 [0.31.1]: https://github.com/pjm17971/pond-ts/compare/v0.30.0...v0.31.1
@@ -27,6 +28,41 @@ patch bumps are strictly additive.
 [0.19.0]: https://github.com/pjm17971/pond-ts/compare/v0.18.0...v0.19.0
 [0.18.0]: https://github.com/pjm17971/pond-ts/compare/v0.17.1...v0.18.0
 
+## [0.33.0] — 2026-06-30
+
+A `@pond-ts/charts` release: a label opt-out for annotations plus interaction
+fixes from an adversarial review of the #306 annotation system. `pond-ts`,
+`@pond-ts/react`, and `@pond-ts/fit` carry no code changes — republished in
+lock-step (their `pond-ts` / `@pond-ts/react` peer ranges widen to `^0.33.0`).
+
+### Added
+
+- **Charts — annotation label opt-out.** `<Region>`, `<Marker>`, and
+  `<Baseline>` accept `label={false}` (or `label=""`) to render **no label
+  chip** — for an inert background mark (e.g. a `selectable={false}` highlight
+  band) where the auto-label would only show a raw axis value. Omitting `label`
+  still auto-labels; a string still renders it. `label` widens to
+  `string | false`. New `Highlight` story + Linux e2e baselines for the
+  `Annotations` stories. (#308)
+
+### Changed
+
+- **Charts — `<Region>` / `<Marker>` / `<Baseline>` with `label=""` now render
+  no chip** (previously an empty, zero-width chip). The label-less path; pass a
+  non-empty string for a visible label. (#308)
+
+### Fixed
+
+- **Charts — annotation edge-resize no longer inverts.** Dragging a `<Region>`
+  edge past the opposite one previously reported `{ from > to }`; it now pivots
+  around the fixed opposite edge, so the reported span stays ordered and a drag
+  either way re-opens the region instead of dead-ending at zero width. (#308)
+- **Charts — annotation drag releases on `pointercancel`.** A system gesture
+  takeover (which fires `pointercancel`, not `pointerup`) no longer leaves a mark
+  stuck mid-drag. (#308)
+- **Charts — single-annotation edit exits on an empty-plot click** even when the
+  mark is `editing` but not `selected`. (#308)
+
 ## [0.32.0] — 2026-06-29
 
 A `@pond-ts/charts` release: value-axis support across the fill/bar layers, plus

package/dist/Layers.js

@@ -354,10 +354,12 @@ export function Layers({ children }) {
         const c = containerRef.current;
         // A click that reached the plot (no mark's DragArea claimed it) is an empty
         // click. Deselect / exit edit when the consumer is tracking annotations — in
-        // global edit mode, or whenever a mark is currently active (a selected mark, or
-        // the single-edit target, which also reads as selected). Marks stop their own
-        // clicks in DragArea, so this only fires on true empty space.
-        if (c.editAnnotations || c.annotations.some((a) => a.selected)) {
+        // global edit mode, or whenever a mark is currently active: selected, OR the
+        // single-edit target (`editing`). Checking `editing` too means a consumer that
+        // sets `editing` without also setting `selected` still gets the exit signal.
+        // Marks stop their own clicks in DragArea, so this only fires on true empty space.
+        if (c.editAnnotations ||
+            c.annotations.some((a) => a.selected || a.editing)) {
             c.onSelectAnnotation?.(null);
             return;
         }

package/dist/annotations.d.ts

@@ -7,13 +7,28 @@ import { type AnnotationSpec } from './context.js';
  * at the left at their own y, don't participate.
  */
 export declare function computeLabelLanes(annotations: readonly AnnotationSpec[], toPixel: (axisX: number) => number): Map<symbol, number>;
+/**
+ * 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
+ * here, so dragging an edge past the pivot never emits an inverted span — instead
+ * the edges meet (zero width) and a continued drag **re-opens the region the other
+ * way** (the grabbed handle becomes the far edge). The pivot is captured at
+ * drag-start (a ref) so it stays fixed even as the emitted bounds swap on cross.
+ */
+export declare function orderRegion(v: number, pivot: number): {
+    from: number;
+    to: number;
+};
 export interface MarkerProps {
     /** x position in axis units — epoch ms on a time axis, the value on a value
      *  axis. (The generalisation of the mockup's "time line": a mark at an x, time
      *  or value.) */
     at: number;
-    /** Chip label; omit to auto-label with the shared x formatter (the axis's). */
-    label?: string;
+    /** Chip label. Omit to auto-label with the shared x formatter (the axis's);
+     *  pass `false` (or `''`) to render **no label chip** — for an inert background
+     *  mark you don't want labelled (where the auto-label would just show a raw
+     *  axis value). */
+    label?: string | false;
     /** Stable consumer id — a click reports it via the container's
      *  `onSelectAnnotation`, so the consumer can track which mark is selected. */
     id?: string;
@@ -44,8 +59,9 @@ export interface BaselineProps {
     value: number;
     /** Which `<YAxis>` (by id) to measure against; omit for the row's default axis. */
     axis?: string;
-    /** Chip label; omit to format `value` with that axis's formatter. */
-    label?: string;
+    /** Chip label. Omit to format `value` with that axis's formatter; pass `false`
+     *  (or `''`) to render **no label chip**. */
+    label?: string | false;
     /** Stable consumer id — a click reports it via `onSelectAnnotation`. */
     id?: string;
     /** Controlled selection — brightens to the front (level 1). Handles are an
@@ -75,8 +91,11 @@ export interface RegionProps {
     from: number;
     /** End x in axis units. */
     to: number;
-    /** Chip label; omit to auto-label `from–to` with the shared x formatter. */
-    label?: string;
+    /** Chip label. Omit to auto-label `from–to` with the shared x formatter; pass
+     *  `false` (or `''`) to render **no label chip** — e.g. an inert
+     *  `selectable={false}` highlight band, where the auto-label would just show
+     *  raw axis values. */
+    label?: string | false;
     /** Stable consumer id — a click (or double-click outside edit) reports it via
      *  `onSelectAnnotation`. */
     id?: string;

package/dist/annotations.js

@@ -226,6 +226,17 @@ function snapToGuides(container, selfKey, px) {
     }
     return best;
 }
+/**
+ * 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
+ * here, so dragging an edge past the pivot never emits an inverted span — instead
+ * the edges meet (zero width) and a continued drag **re-opens the region the other
+ * way** (the grabbed handle becomes the far edge). The pivot is captured at
+ * drag-start (a ref) so it stays fixed even as the emitted bounds swap on cross.
+ */
+export function orderRegion(v, pivot) {
+    return v <= pivot ? { from: v, to: pivot } : { from: pivot, to: v };
+}
 /** A label chip — the cursor value flag's shape (shared {@link flagChipStyle}:
  *  filled, no outline) with text in the annotation register. */
 function Chip({ theme, color, style, children, }) {
@@ -301,6 +312,20 @@ function DragArea({ x, y, w, h, cursor, editable, onHover, onSelect, onEdit, onD
             dragging.current = false;
             onHover(false);
         }, 
+        // A system gesture takeover fires pointercancel, not pointerup — clear the
+        // same drag/hover state so the mark doesn't stay stuck "grabbed".
+        onPointerCancel: (e) => {
+            if (!dragging.current)
+                return;
+            try {
+                e.currentTarget.releasePointerCapture(e.pointerId);
+            }
+            catch {
+                /* ignore */
+            }
+            dragging.current = false;
+            onHover(false);
+        }, 
         // Click (no drag) selects; double-click edits. Stop both so a mark click
         // never reaches the plot's data-select / deselect.
         onClick: (e) => {
@@ -323,7 +348,8 @@ export function Marker({ at, label, id, selected = false, selectable = true, hov
         container.creating === null &&
         onChange !== undefined;
     const xs = useMemo(() => [at], [at]);
-    const text = label ?? container.formatTime(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);
     // No select/edit while a create tool is armed — the chart is in draw mode then.
     const select = id !== undefined && container.creating === null
@@ -338,10 +364,10 @@ export function Marker({ at, label, id, selected = false, selectable = true, hov
     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)) }))] }), _jsx(Chip, { theme: container.theme, color: ann.color, style: {
+                            +container.xScale.invert(px)) }))] }), text && (_jsx(Chip, { theme: container.theme, color: ann.color, style: {
                     top: `${FLAG_TOP + lane * LANE_H}px`,
                     ...flagChipX(x, container.plotWidth),
-                }, children: text })] }));
+                }, children: text }))] }));
 }
 /** 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. */
@@ -358,7 +384,11 @@ export function Baseline({ value, axis, label, id, selected = false, selectable
     // tracked for ordering / future use). No snap target either (the guidelines are
     // vertical; a baseline drags vertically).
     const xs = useMemo(() => [], []);
-    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'baseline', xs, selected, selectable, editing, label ?? '');
+    useRegisterAnnotation(container, selfKey, id, row.rowKey, 'baseline', xs, selected, selectable, editing, 
+    // 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 || '');
     // 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)
@@ -377,10 +407,11 @@ export function Baseline({ value, axis, label, id, selected = false, selectable
     const opacity = rampAt(ann.depth, lineLevel(selectable, editable, hovering, selected));
     const showHandle = editable && (editing || hovering);
     const fmt = row.formats.get(axisId);
-    const text = label ?? (fmt ? fmt(value) : String(value));
+    // `label === false` (or '') ⇒ no chip; omitted ⇒ format `value` off the axis.
+    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)) }))] }), _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, 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 }))] }));
 }
 /** A shaded span over an x range — a lap, a zone, a selected interval. Its label
  *  flies as a flag off the left edge. */
@@ -394,7 +425,10 @@ export function Region({ from, to, label, id, selected = false, selectable = tru
         container.creating === null &&
         onChange !== undefined;
     const xs = useMemo(() => [from, to], [from, to]);
-    const text = label ?? `${container.formatTime(from)}–${container.formatTime(to)}`;
+    // `label === false` (or '') ⇒ no chip; omitted ⇒ auto-label the `from–to` span.
+    const text = label === false
+        ? ''
+        : (label ?? `${container.formatTime(from)}–${container.formatTime(to)}`);
     useRegisterAnnotation(container, selfKey, id, row.rowKey, 'region', xs, selected, selectable, editing, text);
     // No select/edit while a create tool is armed — the chart is in draw mode then.
     const select = id !== undefined && container.creating === null
@@ -421,6 +455,10 @@ export function Region({ from, to, label, id, selected = false, selectable = tru
     // accumulator — so once you drag past SNAP_PX the region releases cleanly
     // instead of re-snapping on every small move.
     const dragRef = useRef(null);
+    // Edge resize pivots around the OPPOSITE edge, captured on press so it stays put
+    // even after the dragged edge crosses it — {@link orderRegion} then re-opens the
+    // 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) => {
                                     dragRef.current = { from, to, startPx: px };
@@ -447,17 +485,15 @@ 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, onDrag: (px) => onChange?.({
-                                            from: snapToGuides(container, selfKey, px) ??
-                                                +container.xScale.invert(px),
-                                            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, onDrag: (px) => onChange?.({
-                                            from,
-                                            to: snapToGuides(container, selfKey, px) ??
-                                                +container.xScale.invert(px),
-                                        }) })] }))] }))] }), _jsx(Chip, { theme: container.theme, color: ann.color, style: {
+                                } }), 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: () => {
+                                            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: () => {
+                                            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: {
                     top: `${FLAG_TOP + lane * LANE_H}px`,
                     ...flagChipX(left, container.plotWidth),
-                }, children: text })] }));
+                }, children: text }))] }));
 }
 //# sourceMappingURL=annotations.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pond-ts/charts",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "private": false,
   "description": "Canvas-rendered, streaming-first time-series charts for pond-ts",
   "license": "MIT",
@@ -38,8 +38,8 @@
     "perf": "PERF_BENCH=1 playwright test perf.spec.ts --workers=1"
   },
   "peerDependencies": {
-    "@pond-ts/react": "^0.32.0",
-    "pond-ts": "^0.32.0",
+    "@pond-ts/react": "^0.33.0",
+    "pond-ts": "^0.33.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {