insomni-plot 0.1.0-alpha.0

package/src/grammar/geoms/line.ts

@@ -0,0 +1,659 @@
+// ---------------------------------------------------------------------------
+// line geom
+// ---------------------------------------------------------------------------
+
+import { lerpColor, type Color, type Layer } from "insomni";
+import { lineSwatch } from "../../legend.ts";
+import {
+  DASHED_PATTERN,
+  DOTTED_PATTERN,
+  lineMark,
+  type LineCurve,
+  type LineDashStyle,
+  type MarkBuilder,
+} from "../../marks.ts";
+import { resamplePoints } from "../../marks/curve.ts";
+import type { Aes } from "../aes.ts";
+import { materialize, resolveAes } from "../aes.ts";
+import { alphaize } from "../color-utils.ts";
+import type { Coord, Point } from "../coord.ts";
+import type {
+  CompileContext,
+  CompiledHitTest,
+  Geom,
+  GeomFrame,
+  GeomHoverDecorator,
+  HoveredHit,
+  ResolvedChannelMap,
+} from "./types.ts";
+import {
+  haloRing,
+  inlineMark,
+  resolveCoord,
+  SELECTION_DIM_ALPHA,
+  selectedIndicesFor,
+  selectionActive,
+  wrapMark,
+} from "./_mark.ts";
+import { emphasisContext } from "./emphasis.ts";
+
+export interface LineChannels<T> {
+  x: Aes<T, number | Date>;
+  y: Aes<T, number | Date>;
+  /** Categorical color channel splits the line into one stroke per category. */
+  color?: Aes<T, unknown>;
+  /**
+   * Optional ordering aesthetic. When present, rows are connected in ascending
+   * order (globally, or within each color-grouped series).
+   */
+  order?: Aes<T, number | Date>;
+}
+
+export interface LineOptions {
+  stroke?: Color;
+  strokeWidth?: number;
+  curve?: LineCurve;
+  curveSamples?: number;
+  dashPattern?: readonly number[];
+  /**
+   * Categorical dash treatment. `dashPattern` takes precedence when both
+   * are supplied. See {@link LineDashStyle}.
+   */
+  dashStyle?: LineDashStyle;
+  label?: string;
+  /**
+   * When true, hover hit-tests resolve to the nearest vertex *by x* — the
+   * cursor's vertical position doesn't influence which datum is picked, so
+   * the user can hover anywhere along the line. Default `false` (per-vertex
+   * Euclidean pick within `pickRadius`). For multi-line charts this means
+   * the cursor's x picks one vertex per series; the topmost series wins
+   * via PointCloud zIndex order.
+   */
+  nearestX?: boolean;
+}
+
+export function line<T>(channels: LineChannels<T>, options: LineOptions = {}): Geom<T> {
+  return {
+    kind: "line",
+    channels,
+    label: options.label,
+    legendSwatch: (color, theme) => lineSwatch({ stroke: color, width: theme.marks.strokeWidth }),
+    compile(ctx: CompileContext<T>) {
+      const { data, scales, plot, theme } = ctx;
+      const coord = resolveCoord(ctx);
+
+      const xAes = resolveAes<T, unknown>(channels.x as Aes<T, unknown>);
+      const yAes = resolveAes<T, unknown>(channels.y as Aes<T, unknown>);
+      const colorAes = channels.color ? resolveAes<T, unknown>(channels.color) : undefined;
+      const orderAes = channels.order ? resolveAes<T, unknown>(channels.order) : undefined;
+
+      const xScale = scales.x.fn;
+      const yScale = scales.y.fn;
+      const colorScale = scales.color?.fn;
+
+      const baseStroke: Color = options.stroke ?? theme.palettes.categorical(0);
+      const strokeWidth = options.strokeWidth ?? theme.marks.strokeWidth;
+      const curve: LineCurve = options.curve ?? "linear";
+
+      const builders: MarkBuilder[] = [];
+      const anim = ctx.activeTransition;
+      // Dim non-selected line strokes when *any* selection is active anywhere
+      // in the chart. For single-line: dim if no vertex of this line is in the
+      // selected set. For multi-line: dim per-group if no row in the group is
+      // selected. Selection rings still mark the active vertices on top.
+      const selActive = selectionActive(ctx);
+      const selectedSetAll = selectedIndicesFor(ctx, "line");
+      // Hover dim now rides the core's GPU emphasis uniform (P5-T3): each color
+      // GROUP is tagged with a stable per-series key (ordinal = the group's
+      // position in `groupKeys`); the mount fades sibling groups with no marks
+      // recompile. Single-line charts have nothing to dim against, so they tag
+      // nothing. Resolved by `emphasisResolution` below.
+      const fromIndexFor = (d: T, i: number) =>
+        anim
+          ? ctx.transitionKey
+            ? anim.matchIndex(ctx.transitionKey(d, i), i)
+            : anim.matchIndex(String(i), i)
+          : undefined;
+
+      const sortedIndices = (indices: readonly number[]): number[] => {
+        const out = [...indices];
+        if (!orderAes) return out;
+        out.sort((a, b) => compareOrder(orderAes.fn(data[a]!, a), orderAes.fn(data[b]!, b), a, b));
+        return out;
+      };
+
+      // Single-line path (no color channel): one mark.
+      if (!colorAes) {
+        const indices = sortedIndices(data.map((_, i) => i));
+        // For animation, lerp the stroke color using datum 0's stored rgba as representative.
+        const animatedStroke: Color =
+          anim && anim.from.count > 0
+            ? lerpColor(
+                {
+                  r: anim.from.rgba[0]!,
+                  g: anim.from.rgba[1]!,
+                  b: anim.from.rgba[2]!,
+                  a: anim.from.rgba[3]!,
+                },
+                baseStroke,
+                anim.t,
+              )
+            : baseStroke;
+        const dimSingle = selActive && selectedSetAll === null;
+        const finalStroke = dimSingle
+          ? alphaize(animatedStroke, SELECTION_DIM_ALPHA)
+          : animatedStroke;
+        // Combined per-vertex projection through the active coord. Under
+        // `coordCartesian()` this is the identity. Under polar (Phase 3) the
+        // (x, y) pair projects together; we lerp the plot-frame values for
+        // animation and project the final pair.
+        const projectVertex = (globalIndex: number): { x: number; y: number } => {
+          const d = data[globalIndex]!;
+          const toX = xScale(xAes.fn(d, globalIndex));
+          const toY = yScale(yAes.fn(d, globalIndex));
+          const fromIndex = fromIndexFor(d, globalIndex);
+          let px = toX;
+          let py = toY;
+          if (anim && fromIndex !== undefined) {
+            if (Number.isFinite(anim.from.x[fromIndex]!)) {
+              px = anim.from.x[fromIndex]! + (toX - anim.from.x[fromIndex]!) * anim.t;
+            }
+            if (Number.isFinite(anim.from.y[fromIndex]!)) {
+              py = anim.from.y[fromIndex]! + (toY - anim.from.y[fromIndex]!) * anim.t;
+            }
+          }
+          return coord.project({ x: px, y: py });
+        };
+        if (coord.kind === "cartesian") {
+          const mark = lineMark(indices, {
+            x: (globalIndex) => projectVertex(globalIndex).x,
+            y: (globalIndex) => projectVertex(globalIndex).y,
+            stroke: finalStroke,
+            strokeWidth,
+            curve,
+            curveSamples: options.curveSamples,
+            dashPattern: options.dashPattern,
+            dashStyle: options.dashStyle,
+          });
+          builders.push(wrapMark(mark, plot.topLeft, indices.length));
+        } else {
+          // Non-cartesian coord: tessellate per-segment through `coord.segment`
+          // so adjacent vertices arc/curve correctly under polar instead of
+          // being connected by straight chords through projected endpoints.
+          builders.push(
+            tessellatedPolyline({
+              coord,
+              indices,
+              projectVertex: (globalIndex: number, _localIndex: number) =>
+                projectVertex(globalIndex),
+              ox: plot.topLeft.x,
+              oy: plot.topLeft.y,
+              stroke: finalStroke,
+              strokeWidth,
+              curve,
+              curveSamples: options.curveSamples,
+              dashPattern: options.dashPattern,
+              dashStyle: options.dashStyle,
+              emphasisKey: undefined,
+            }),
+          );
+        }
+      } else {
+        // Multi-line: bucket by color value, one mark per group. Track each
+        // row's original index in `data` alongside the row itself so the
+        // transition `from` lookup uses the same indexing as `captureFrame`
+        // (which iterates the full data array). Without this, group rows 0..n
+        // would all read positions from the FIRST series' captured frame.
+        const colorValues = materialize(colorAes, data);
+        type GroupBucket = { indices: number[] };
+        const groups = new Map<unknown, GroupBucket>();
+        // Stable first-seen group-key order — the ordinal source shared by
+        // tagging and `emphasisResolution` (both walk the same `colorValues`).
+        const groupKeys: string[] = [];
+        for (let i = 0; i < data.length; i++) {
+          const key = colorValues[i];
+          let bucket = groups.get(key);
+          if (!bucket) {
+            bucket = { indices: [] };
+            groups.set(key, bucket);
+            groupKeys.push(String(key));
+          }
+          bucket.indices.push(i);
+        }
+        // GPU emphasis context — only meaningful for multi-line (sibling groups
+        // to dim against). The resolver maps a hovered vertex's color group to
+        // its ordinal via the same `groupKeys`.
+        const emph = emphasisContext(ctx, "line", (hit) => {
+          const k = colorValues[hit.dataIndex];
+          if (k === undefined) return null;
+          // oxlint-disable-next-line no-base-to-string -- color key is a scalar (string/number); String() is safe here
+          const ord = groupKeys.indexOf(String(k));
+          return ord < 0 ? null : ord;
+        });
+
+        for (const [key, bucket] of groups) {
+          if (ctx.hidden?.has(String(key))) continue;
+          const indices = sortedIndices(bucket.indices);
+          const stroke = colorScale ? colorScale(key) : baseStroke;
+          // Group dims when selection is active and no selected datum's color
+          // matches this group's key. `selectedSetAll` indexes into the full
+          // `data` array, so we look up each selected row's color value.
+          let groupHasSel = false;
+          if (selActive && selectedSetAll) {
+            for (const i of selectedSetAll) {
+              if (colorValues[i] === key) {
+                groupHasSel = true;
+                break;
+              }
+            }
+          }
+          // Selection dim stays compile-time (full recompile on select). Hover
+          // dim is now GPU-side via the per-group emphasis key below.
+          const groupDim = selActive && !groupHasSel;
+          const finalGroupStroke = groupDim ? alphaize(stroke, SELECTION_DIM_ALPHA) : stroke;
+          const groupEmphasisKey = emph?.keyFor(groupKeys.indexOf(String(key)));
+          const groupFromIndexFor = (d: T, localIndex: number) => {
+            const globalIndex = indices[localIndex]!;
+            return anim
+              ? ctx.transitionKey
+                ? anim.matchIndex(ctx.transitionKey(d, globalIndex), globalIndex)
+                : anim.matchIndex(String(globalIndex), globalIndex)
+              : undefined;
+          };
+          const projectGroupVertex = (
+            globalIndex: number,
+            localIndex: number,
+          ): { x: number; y: number } => {
+            const d = data[globalIndex]!;
+            const toX = xScale(xAes.fn(d, globalIndex));
+            const toY = yScale(yAes.fn(d, globalIndex));
+            const fromIndex = groupFromIndexFor(d, localIndex);
+            let px = toX;
+            let py = toY;
+            if (anim && fromIndex !== undefined) {
+              if (Number.isFinite(anim.from.x[fromIndex]!)) {
+                px = anim.from.x[fromIndex]! + (toX - anim.from.x[fromIndex]!) * anim.t;
+              }
+              if (Number.isFinite(anim.from.y[fromIndex]!)) {
+                py = anim.from.y[fromIndex]! + (toY - anim.from.y[fromIndex]!) * anim.t;
+              }
+            }
+            return coord.project({ x: px, y: py });
+          };
+          if (coord.kind === "cartesian") {
+            const mark = lineMark(indices, {
+              x: (globalIndex, localIndex) => projectGroupVertex(globalIndex, localIndex).x,
+              y: (globalIndex, localIndex) => projectGroupVertex(globalIndex, localIndex).y,
+              stroke: finalGroupStroke,
+              strokeWidth,
+              curve,
+              curveSamples: options.curveSamples,
+              dashPattern: options.dashPattern,
+              dashStyle: options.dashStyle,
+              emphasisKey: groupEmphasisKey,
+            });
+            builders.push(wrapMark(mark, plot.topLeft, indices.length));
+          } else {
+            builders.push(
+              tessellatedPolyline({
+                coord,
+                indices,
+                projectVertex: (globalIndex: number, localIndex: number) =>
+                  projectGroupVertex(globalIndex, localIndex),
+                ox: plot.topLeft.x,
+                oy: plot.topLeft.y,
+                stroke: finalGroupStroke,
+                strokeWidth,
+                curve,
+                curveSamples: options.curveSamples,
+                dashPattern: options.dashPattern,
+                dashStyle: options.dashStyle,
+                emphasisKey: groupEmphasisKey,
+              }),
+            );
+          }
+        }
+      }
+
+      // Hover treatment for line is the GPU dim above (sibling series fade);
+      // the prior compile-time hover halo on the active vertex required a marks
+      // recompile per pointer move (gone under P5-T3), so it is dropped. The
+      // tooltip/crosshair still track the hovered vertex via the overlay.
+
+      // Selection rings — one per selected vertex. Stroke dimming for non-
+      // selected lines/groups happens above (during mark construction); the
+      // rings overlay selected vertices on top.
+      const selectedSet = selectedSetAll;
+      if (selectedSet) {
+        for (const i of selectedSet) {
+          const d = data[i];
+          if (d === undefined) continue;
+          const xv = xAes.fn(d, i);
+          const yv = yAes.fn(d, i);
+          if (xv == null || yv == null) continue;
+          const rawX = xScale(xv);
+          const rawY = yScale(yv);
+          if (!Number.isFinite(rawX) || !Number.isFinite(rawY)) continue;
+          const projected = coord.project({ x: rawX, y: rawY });
+          const ringColor: Color =
+            colorAes && colorScale ? colorScale(colorAes.fn(d, i)) : baseStroke;
+          const cx = plot.topLeft.x + projected.x;
+          const cy = plot.topLeft.y + projected.y;
+          const r = Math.max(4, strokeWidth * 1.5 + 2);
+          builders.push(inlineMark((layer) => haloRing(layer, cx, cy, r, ringColor, 2)));
+        }
+      }
+
+      return builders;
+    },
+    emphasisResolution(ctx) {
+      // Only multi-line (a color channel) dims sibling series; single-line has
+      // nothing to dim against, so it tags nothing and resolves to null.
+      const colorAes = channels.color ? resolveAes<T, unknown>(channels.color) : undefined;
+      if (!colorAes) return null;
+      const data = ctx.data;
+      const colorValues = materialize(colorAes, data);
+      // Recompute the SAME first-seen group-key order the compile path used.
+      const groupKeys: string[] = [];
+      const seen = new Set<string>();
+      for (let i = 0; i < data.length; i++) {
+        const k = String(colorValues[i]);
+        if (!seen.has(k)) {
+          seen.add(k);
+          groupKeys.push(k);
+        }
+      }
+      return (
+        emphasisContext(ctx, "line", (hit) => {
+          const k = colorValues[hit.dataIndex];
+          if (k === undefined) return null;
+          // oxlint-disable-next-line no-base-to-string -- color key is a scalar (string/number); String() is safe here
+          const ord = groupKeys.indexOf(String(k));
+          return ord < 0 ? null : ord;
+        })?.resolver() ?? null
+      );
+    },
+    hoverDecoration(ctx: CompileContext<T>): GeomHoverDecorator | null {
+      // Focus halo on the hovered vertex — recovered from the old snap path's
+      // compile-time `haloRing` (deleted in e6d5643). Now an OVERLAY decorator
+      // replayed into the live overlay layer (NO marks recompile). The overlay
+      // ring leaves emphasisKey 0 ⇒ EXEMPT ⇒ it stays full-strength while sibling
+      // series dim via the GPU uniform. The hit's `dataIndex` is the vertex's
+      // datum index. Mirrors point.ts (re-derive geometry; theme hover fallback).
+      const { data, plot } = ctx;
+      if (data.length === 0) return null;
+      const coord = resolveCoord(ctx);
+      const hoverCfg = ctx.theme.interactions.hover;
+      const xAes = resolveAes<T, unknown>(channels.x as Aes<T, unknown>);
+      const yAes = resolveAes<T, unknown>(channels.y as Aes<T, unknown>);
+      const colorAes = channels.color ? resolveAes<T, unknown>(channels.color) : undefined;
+      const xScale = ctx.scales.x.fn;
+      const yScale = ctx.scales.y.fn;
+      const colorScale = ctx.scales.color?.fn;
+      const baseStroke: Color = options.stroke ?? ctx.theme.palettes.categorical(0);
+      const strokeWidth = options.strokeWidth ?? ctx.theme.marks.strokeWidth;
+      const r = Math.max(4, strokeWidth * 1.5 + 2);
+      const ox = plot.topLeft.x;
+      const oy = plot.topLeft.y;
+
+      return {
+        geomKind: "line",
+        data,
+        decorate(hit: HoveredHit, layer: Layer): void {
+          if (!hoverCfg.enabled || hit.data !== data) return;
+          const i = hit.dataIndex;
+          const d = data[i];
+          if (d === undefined) return;
+          const xv = xAes.fn(d, i);
+          const yv = yAes.fn(d, i);
+          if (xv == null || yv == null) return;
+          const rawX = xScale(xv);
+          const rawY = yScale(yv);
+          if (!Number.isFinite(rawX) || !Number.isFinite(rawY)) return;
+          const p = coord.project({ x: rawX, y: rawY });
+          const ringColor: Color =
+            hoverCfg.haloColor ??
+            (colorAes && colorScale ? colorScale(colorAes.fn(d, i)) : baseStroke);
+          haloRing(layer, ox + p.x, oy + p.y, r, ringColor, hoverCfg.haloStrokeWidth);
+        },
+      };
+    },
+    compileHitTest(ctx: CompileContext<T>): CompiledHitTest<T> | null {
+      const { data, scales, plot, theme, hidden } = ctx;
+      if (data.length === 0) return null;
+      const coord = resolveCoord(ctx);
+
+      const xAes = resolveAes<T, unknown>(channels.x as Aes<T, unknown>);
+      const yAes = resolveAes<T, unknown>(channels.y as Aes<T, unknown>);
+      const colorAes = channels.color ? resolveAes<T, unknown>(channels.color) : undefined;
+
+      const xScale = scales.x.fn;
+      const yScale = scales.y.fn;
+
+      const positions = new Float32Array(data.length * 2);
+      const dataIndex = new Int32Array(data.length);
+      const ox = plot.topLeft.x;
+      const oy = plot.topLeft.y;
+      let n = 0;
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i]!;
+
+        if (hidden && colorAes && hidden.has(String(colorAes.fn(d, i)))) {
+          continue;
+        }
+
+        const xv = xAes.fn(d, i);
+        const yv = yAes.fn(d, i);
+        if (xv == null || yv == null) continue;
+        const rawX = xScale(xv);
+        const rawY = yScale(yv);
+        if (!Number.isFinite(rawX) || !Number.isFinite(rawY)) continue;
+        const projected = coord.project({ x: rawX, y: rawY });
+        positions[n * 2] = ox + projected.x;
+        positions[n * 2 + 1] = oy + projected.y;
+        dataIndex[n] = i;
+        n++;
+      }
+      if (n === 0) return null;
+
+      const strokeWidth = options.strokeWidth ?? theme.marks.strokeWidth;
+      const channelsMap: ResolvedChannelMap<T> = {
+        x: xAes,
+        y: yAes,
+        color: colorAes,
+      };
+
+      // In nearestX mode the picker ignores the off-axis y, so only the
+      // along-axis (x) tolerance matters. Stretch the radius to a safely
+      // large value (cursor anywhere within plot width still picks).
+      const pickRadius = options.nearestX
+        ? Math.max(plot.width, plot.height)
+        : Math.max(8, strokeWidth * 2 + 4);
+      return {
+        geomKind: "line",
+        label: options.label,
+        positions: positions.subarray(0, n * 2),
+        dataIndex: dataIndex.subarray(0, n),
+        pickRadius,
+        pickAxis: options.nearestX ? "x" : undefined,
+        channels: channelsMap,
+        data,
+      };
+    },
+    captureFrame(ctx: CompileContext<T>): GeomFrame | null {
+      const { data, scales, theme } = ctx;
+      if (data.length === 0) return null;
+
+      const xAes = resolveAes<T, unknown>(channels.x as Aes<T, unknown>);
+      const yAes = resolveAes<T, unknown>(channels.y as Aes<T, unknown>);
+      const colorAes = channels.color ? resolveAes<T, unknown>(channels.color) : undefined;
+
+      const xScale = scales.x.fn;
+      const yScale = scales.y.fn;
+      const colorScale = scales.color?.fn;
+
+      const baseStroke: Color = options.stroke ?? theme.palettes.categorical(0);
+      const transitionKey = ctx.transitionKey;
+
+      const count = data.length;
+      const x = new Float32Array(count);
+      const y = new Float32Array(count);
+      const rgba = new Float32Array(count * 4);
+      const a = new Float32Array(count);
+      const ids = transitionKey ? Array.from<string>({ length: count }) : undefined;
+
+      for (let i = 0; i < count; i++) {
+        const d = data[i]!;
+        const xv = xAes.fn(d, i);
+        const yv = yAes.fn(d, i);
+        const px = xScale(xv);
+        const py = yScale(yv);
+        x[i] = Number.isFinite(px) ? px : NaN;
+        y[i] = Number.isFinite(py) ? py : NaN;
+
+        // Per-datum stroke color (same as the series color for multi-line).
+        const c: Color = colorAes && colorScale ? colorScale(colorAes.fn(d, i)) : baseStroke;
+        rgba[i * 4] = c.r;
+        rgba[i * 4 + 1] = c.g;
+        rgba[i * 4 + 2] = c.b;
+        rgba[i * 4 + 3] = c.a;
+        a[i] = c.a;
+        if (ids && transitionKey) ids[i] = transitionKey(d, i);
+      }
+
+      return { count, x, y, rgba, a, ids };
+    },
+  };
+}
+
+function compareOrder(a: unknown, b: unknown, fallbackA: number, fallbackB: number): number {
+  const av = orderValue(a);
+  const bv = orderValue(b);
+  const aFinite = Number.isFinite(av);
+  const bFinite = Number.isFinite(bv);
+  if (aFinite && bFinite) {
+    if (av < bv) return -1;
+    if (av > bv) return 1;
+    return fallbackA - fallbackB;
+  }
+  if (aFinite) return -1;
+  if (bFinite) return 1;
+  return fallbackA - fallbackB;
+}
+
+function orderValue(value: unknown): number {
+  if (value instanceof Date) return value.getTime();
+  return typeof value === "number" ? value : Number.NaN;
+}
+
+// ---------------------------------------------------------------------------
+// Polar / non-cartesian tessellation
+// ---------------------------------------------------------------------------
+// Under `coordCartesian` the lineMark path emits a single polyline whose
+// vertices are the projected per-datum (x, y). That works because projection
+// is the identity — straight chords between adjacent vertices visit every
+// pixel along the desired line.
+//
+// Under polar (or any non-identity coord) two adjacent vertices that share a
+// radius but differ in θ should connect by an *arc*, not a chord. We resolve
+// this by walking each consecutive pair through `coord.segment` (which
+// tessellates at the coord's quality knob, ~1°) and stitching the results
+// into a single polyline. The tessellated polyline is then run through the
+// configured `curve` (still useful for non-linear smoothing) before push.
+
+interface TessellatedPolylineArgs {
+  coord: Coord;
+  indices: readonly number[];
+  projectVertex: (globalIndex: number, localIndex: number) => Point;
+  ox: number;
+  oy: number;
+  stroke: Color;
+  strokeWidth: number;
+  curve: LineCurve;
+  curveSamples: number | undefined;
+  dashPattern: readonly number[] | undefined;
+  dashStyle: LineDashStyle | undefined;
+  emphasisKey: number | undefined;
+}
+
+function tessellatedPolyline(args: TessellatedPolylineArgs): MarkBuilder {
+  const {
+    coord,
+    indices,
+    projectVertex,
+    ox,
+    oy,
+    stroke,
+    strokeWidth,
+    curve,
+    curveSamples,
+    dashPattern,
+    dashStyle,
+    emphasisKey,
+  } = args;
+  // Resolve dash style → pattern up front (mirrors lineMark's behavior).
+  const pattern =
+    dashPattern ??
+    (dashStyle === "dashed" ? DASHED_PATTERN : dashStyle === "dotted" ? DOTTED_PATTERN : undefined);
+  return {
+    length: indices.length,
+    addTo(layer) {
+      // Build the per-segment tessellated chain, breaking on non-finite
+      // projections (matches `collectSegments` semantics in `lineMark`).
+      const chains: { x: number; y: number }[][] = [];
+      let current: { x: number; y: number }[] = [];
+      const isFinitePoint = (p: Point) => Number.isFinite(p.x) && Number.isFinite(p.y);
+      for (let local = 0; local < indices.length; local++) {
+        const global = indices[local]!;
+        const cur = projectVertex(global, local);
+        if (!isFinitePoint(cur)) {
+          if (current.length > 0) {
+            chains.push(current);
+            current = [];
+          }
+          continue;
+        }
+        if (current.length === 0) {
+          current.push({ x: ox + cur.x, y: oy + cur.y });
+          continue;
+        }
+        // Tessellate from the previous to current vertex through `coord.segment`.
+        // `projectVertex` returns the post-projection plot-frame px; we recover
+        // the pre-projection input via `coord.unproject`, run `segment`, then
+        // re-offset back to layer-px for the polyline.
+        const prev = current[current.length - 1]!;
+        const prevProjected: Point = { x: prev.x - ox, y: prev.y - oy };
+        const prevUn = coord.unproject(prevProjected);
+        const curUn = coord.unproject(cur);
+        if (prevUn && curUn) {
+          const tess = coord.segment(prevUn, curUn);
+          // Skip first sample — same as `prev` (already pushed). The final
+          // sample equals `cur` (within FP error).
+          for (let k = 1; k < tess.length; k++) {
+            const p = tess[k]!;
+            current.push({ x: ox + p.x, y: oy + p.y });
+          }
+        } else {
+          // Outside the polar domain — fall back to a straight chord to the
+          // projected endpoint. Keeps render robust on edge cases.
+          current.push({ x: ox + cur.x, y: oy + cur.y });
+        }
+      }
+      if (current.length > 0) chains.push(current);
+
+      const samples = Math.max(2, curveSamples ?? 16);
+      for (const raw of chains) {
+        if (raw.length < 2) continue;
+        const points = curve === "linear" ? raw : resamplePoints(raw, curve, samples);
+        layer.pushPolyline({
+          points,
+          color: stroke,
+          width: strokeWidth,
+          dashPattern: pattern,
+          emphasisKey,
+        });
+      }
+      return layer;
+    },
+  };
+}