insomni-plot 0.1.0-alpha.0

package/src/grammar/geoms/rug.test.ts

@@ -0,0 +1,126 @@
+import { createFrame } from "insomni";
+import { describe, expect, test } from "vite-plus/test";
+
+import { resolveAes } from "../aes.ts";
+import { buildPositionScale, type ScaleBundle } from "../scales.ts";
+import { themeDefault } from "../theme.ts";
+import { rug } from "./rug.ts";
+import { emphasisKeyFor, geomEmphasisBase } from "./emphasis.ts";
+import type { CompileContext } from "./types.ts";
+
+interface Row {
+  x: number;
+  y: number;
+}
+
+const data: Row[] = [
+  { x: 0, y: 10 },
+  { x: 50, y: 20 },
+  { x: 100, y: 30 },
+];
+
+function makeCtx(rows: readonly Row[]): CompileContext<Row> {
+  const xAes = resolveAes<Row, unknown>("x");
+  const yAes = resolveAes<Row, unknown>("y");
+  const xScale = buildPositionScale(xAes, rows, [0, 100]);
+  const yScale = buildPositionScale(yAes, rows, [200, 0]);
+  const scales: ScaleBundle = { x: xScale, y: yScale };
+  return {
+    data: rows,
+    scales,
+    plot: createFrame({ x: 50, y: 30, width: 100, height: 200 }),
+    theme: themeDefault,
+    atlas: undefined,
+  };
+}
+
+describe("rug geom — compileHitTest", () => {
+  test("x rug emits one hit per row anchored at the bottom edge", () => {
+    const geom = rug<Row>({ x: "x" }, { length: 8 });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.geomKind).toBe("rug");
+    expect(hits.dataIndex.length).toBe(3);
+    // First row x=0 → range start 0 + plot.x(50) = 50.
+    expect(hits.positions[0]).toBeCloseTo(50, 3);
+    // y anchor = bottom (oy+plot.height = 30+200 = 230) - length/2 = 226.
+    expect(hits.positions[1]).toBeCloseTo(226, 3);
+  });
+
+  test("y rug emits hits along the left edge", () => {
+    const geom = rug<Row>({ y: "y" }, { length: 6 });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.dataIndex.length).toBe(3);
+    // First row y=10 → range start 200 + plot.y(30) = 230. (domain auto = [10,30])
+    expect(hits.positions[1]).toBeCloseTo(230, 3);
+    // x anchor = ox(50) + length/2 = 53.
+    expect(hits.positions[0]).toBeCloseTo(53, 3);
+  });
+
+  test("both sides emits 2× rows of hits", () => {
+    const geom = rug<Row>({ x: "x", y: "y" });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.dataIndex.length).toBe(6);
+  });
+
+  test("returns null on empty data", () => {
+    const geom = rug<Row>({ x: "x" });
+    expect(geom.compileHitTest!(makeCtx([]))).toBeNull();
+  });
+});
+
+describe("rug geom — GPU hover emphasis (P5-T3 Gap 1)", () => {
+  function withEmphasis(rows: readonly Row[], emphasis = true): CompileContext<Row> {
+    return { ...makeCtx(rows), emphasisBase: emphasis ? geomEmphasisBase(0) : undefined };
+  }
+  function captureLines(geom: ReturnType<typeof rug<Row>>, ctx: CompileContext<Row>) {
+    const lines: Array<{ emphasisKey?: number }> = [];
+    const layer = { pushLine: (s: { emphasisKey?: number }) => lines.push(s) };
+    for (const b of geom.compile(ctx)) b.addTo(layer as never);
+    return lines;
+  }
+
+  test("tags each tick with a per-row key (ordinal = row index = hit dataIndex)", () => {
+    const geom = rug<Row>({ x: "x" });
+    const base = geomEmphasisBase(0);
+    const lines = captureLines(geom, withEmphasis(data));
+    expect(lines.length).toBe(3);
+    expect(lines.map((l) => l.emphasisKey)).toEqual([
+      emphasisKeyFor(base, 0),
+      emphasisKeyFor(base, 1),
+      emphasisKeyFor(base, 2),
+    ]);
+  });
+
+  test("both edges of one row share that row's key (whole-row single key)", () => {
+    const geom = rug<Row>({ x: "x", y: "y" });
+    const base = geomEmphasisBase(0);
+    const lines = captureLines(geom, withEmphasis(data));
+    // 3 rows × 2 edges; per-row both edges carry the row's single key.
+    expect(lines.length).toBe(6);
+    expect(lines.map((l) => l.emphasisKey)).toEqual([
+      emphasisKeyFor(base, 0),
+      emphasisKeyFor(base, 0),
+      emphasisKeyFor(base, 1),
+      emphasisKeyFor(base, 1),
+      emphasisKeyFor(base, 2),
+      emphasisKeyFor(base, 2),
+    ]);
+  });
+
+  test("emphasisResolution maps a hit's dataIndex to the tagged key", () => {
+    const geom = rug<Row>({ x: "x" });
+    const res = geom.emphasisResolution!(withEmphasis(data))!;
+    expect(res.geomKind).toBe("rug");
+    expect(res.resolve({ geomKind: "rug", dataIndex: 2, data, x: 0, y: 0 })).toBe(
+      emphasisKeyFor(geomEmphasisBase(0), 2),
+    );
+    expect(res.resolve({ geomKind: "bar", dataIndex: 0, data, x: 0, y: 0 })).toBeNull();
+  });
+
+  test("no emphasisBase (SSR/SVG) → ticks untagged, no resolver key", () => {
+    const geom = rug<Row>({ x: "x" });
+    const lines = captureLines(geom, withEmphasis(data, false));
+    expect(lines.every((l) => l.emphasisKey === undefined)).toBe(true);
+    expect(geom.emphasisResolution!(withEmphasis(data, false))).toBeNull();
+  });
+});

package/src/grammar/geoms/rug.ts

@@ -0,0 +1,214 @@
+// ---------------------------------------------------------------------------
+// rug geom — short marginal ticks along an axis
+// ---------------------------------------------------------------------------
+// `rug({ x: "..." })` draws one short vertical tick per datum along the
+// bottom edge of the plot frame; `rug({ y: "..." })` does the same along
+// the left edge. Pass both channels (or `side: "both"`) for marginal ticks
+// on both axes.
+
+import type { Color, Layer } from "insomni";
+import { withAlpha } from "../color-utils.ts";
+import type { Aes } from "../aes.ts";
+import { resolveAes } from "../aes.ts";
+import type { CompileContext, CompiledHitTest, Geom, ResolvedChannelMap } from "./types.ts";
+import { emphasisContext } from "./emphasis.ts";
+
+export interface RugChannels<T> {
+  x?: Aes<T, number | Date>;
+  y?: Aes<T, number | Date>;
+  /** Categorical color split for the ticks. */
+  color?: Aes<T, unknown>;
+}
+
+export type RugSide = "x" | "y" | "both";
+
+export interface RugOptions {
+  /**
+   * Which edges receive ticks. Defaults to whichever channels are wired —
+   * with both `x` and `y`, both edges; otherwise just the matching edge.
+   * Use `"both"` to force both edges (mirrors x onto bottom, y onto left).
+   */
+  side?: RugSide;
+  /** Tick length in pixels. Default `6`. */
+  length?: number;
+  /** Tick stroke width. Default `1`. */
+  strokeWidth?: number;
+  /** Override stroke color (defaults to theme.axis.color). */
+  stroke?: Color;
+  /** Multiplier on the resolved stroke alpha. Default `0.6`. */
+  opacity?: number;
+  label?: string;
+}
+
+function pickSide(hasX: boolean, hasY: boolean, side: RugSide | undefined): RugSide {
+  if (side) return side;
+  if (hasX && hasY) return "both";
+  if (hasY) return "y";
+  return "x";
+}
+
+export function rug<T>(channels: RugChannels<T>, options: RugOptions = {}): Geom<T> {
+  if (!channels.x && !channels.y) {
+    throw new Error("rug() requires at least one of `x` or `y` channels");
+  }
+  return {
+    kind: "rug",
+    channels: { x: channels.x, y: channels.y, color: channels.color },
+    label: options.label,
+    compile(ctx: CompileContext<T>) {
+      const { data, scales, plot, theme } = ctx;
+      const length = options.length ?? 6;
+      const width = options.strokeWidth ?? 1;
+      const opacity = options.opacity ?? 0.6;
+      const baseStroke = options.stroke ?? theme.axis.color;
+      const colorAes = channels.color ? resolveAes<T, unknown>(channels.color) : undefined;
+      const colorScale = scales.color?.fn;
+      const xAes = channels.x ? resolveAes<T, unknown>(channels.x as Aes<T, unknown>) : undefined;
+      const yAes = channels.y ? resolveAes<T, unknown>(channels.y as Aes<T, unknown>) : undefined;
+      const side = pickSide(xAes !== undefined, yAes !== undefined, options.side);
+      const drawX = (side === "x" || side === "both") && xAes !== undefined;
+      const drawY = (side === "y" || side === "both") && yAes !== undefined;
+
+      const strokeFor = (datum: T, i: number): Color => {
+        const c = colorAes && colorScale ? colorScale(colorAes.fn(datum, i)) : baseStroke;
+        return withAlpha(c, (c.a ?? 1) * opacity);
+      };
+
+      // Hover dim rides the core's GPU emphasis uniform (P5-T3). Ticks ARE
+      // segments (already taggable), so each row's x/y tick gets the SAME key
+      // keyed by the row index `i` — exactly the `dataIndex` compileHitTest
+      // reports — so the mount's emphasisResolution maps a hover hit to this key
+      // with no recompile. (The prior snap path only thickened the active tick;
+      // the GPU path can only dim, so non-hovered ticks fade instead — see the
+      // P5-T3 report's rug note.)
+      const emph = emphasisContext(ctx, "rug");
+      return [
+        {
+          length: data.length * (Number(drawX) + Number(drawY)),
+          addTo: (layer: Layer) => {
+            const ox = plot.topLeft.x;
+            const oy = plot.topLeft.y;
+            const bottom = oy + plot.height;
+            const right = ox + plot.width;
+
+            for (let i = 0; i < data.length; i++) {
+              const datum = data[i]!;
+              const stroke = strokeFor(datum, i);
+              const emphasisKey = emph?.keyFor(i);
+
+              if (drawX && xAes) {
+                const px = ox + scales.x.fn(xAes.fn(datum, i));
+                if (px >= ox && px <= right) {
+                  layer.pushLine({
+                    x1: px,
+                    y1: bottom - length,
+                    x2: px,
+                    y2: bottom,
+                    color: stroke,
+                    width,
+                    emphasisKey,
+                  });
+                }
+              }
+              if (drawY && yAes) {
+                const py = oy + scales.y.fn(yAes.fn(datum, i));
+                if (py >= oy && py <= bottom) {
+                  layer.pushLine({
+                    x1: ox,
+                    y1: py,
+                    x2: ox + length,
+                    y2: py,
+                    color: stroke,
+                    width,
+                    emphasisKey,
+                  });
+                }
+              }
+            }
+            return layer;
+          },
+        },
+      ];
+    },
+    emphasisResolution(ctx) {
+      // Ordinal = the hit's `dataIndex` = the row index `i` the compile path
+      // tags each tick with.
+      return emphasisContext(ctx, "rug")?.resolver() ?? null;
+    },
+    compileHitTest(ctx: CompileContext<T>): CompiledHitTest<T> | null {
+      const { data, scales, plot } = ctx;
+      if (data.length === 0) return null;
+      const length = options.length ?? 6;
+      const xAes = channels.x ? resolveAes<T, unknown>(channels.x as Aes<T, unknown>) : undefined;
+      const yAes = channels.y ? resolveAes<T, unknown>(channels.y as Aes<T, unknown>) : undefined;
+      const colorAes = channels.color ? resolveAes<T, unknown>(channels.color) : undefined;
+      const side = pickSide(xAes !== undefined, yAes !== undefined, options.side);
+      const drawX = (side === "x" || side === "both") && xAes !== undefined;
+      const drawY = (side === "y" || side === "both") && yAes !== undefined;
+      if (!drawX && !drawY) return null;
+
+      const ox = plot.topLeft.x;
+      const oy = plot.topLeft.y;
+      const bottom = oy + plot.height;
+      // Cap upper bound at one hit per row per drawn edge.
+      const cap = data.length * (Number(drawX) + Number(drawY));
+      const positions = new Float32Array(cap * 2);
+      const rects = new Float32Array(cap * 4);
+      const dataIndex = new Int32Array(cap);
+      // Half-width of the hoverable band around each tick (in pixels).
+      // Wide enough to click comfortably; equals ~half the pick radius.
+      const hitHalfBand = 4;
+      let n = 0;
+      for (let i = 0; i < data.length; i++) {
+        const datum = data[i]!;
+        if (drawX && xAes) {
+          const px = ox + scales.x.fn(xAes.fn(datum, i) as never);
+          if (Number.isFinite(px) && px >= ox && px <= ox + plot.width) {
+            // Anchor the hit at the tick's midpoint for tooltip placement.
+            positions[n * 2] = px;
+            positions[n * 2 + 1] = bottom - length / 2;
+            // Thin vertical band around the tick line, spanning full tick length.
+            rects[n * 4] = px - hitHalfBand;
+            rects[n * 4 + 1] = bottom - length;
+            rects[n * 4 + 2] = hitHalfBand * 2;
+            rects[n * 4 + 3] = length;
+            dataIndex[n] = i;
+            n++;
+          }
+        }
+        if (drawY && yAes) {
+          const py = oy + scales.y.fn(yAes.fn(datum, i) as never);
+          if (Number.isFinite(py) && py >= oy && py <= bottom) {
+            positions[n * 2] = ox + length / 2;
+            positions[n * 2 + 1] = py;
+            // Thin horizontal band around the tick line, spanning full tick length.
+            rects[n * 4] = ox;
+            rects[n * 4 + 1] = py - hitHalfBand;
+            rects[n * 4 + 2] = length;
+            rects[n * 4 + 3] = hitHalfBand * 2;
+            dataIndex[n] = i;
+            n++;
+          }
+        }
+      }
+      if (n === 0) return null;
+      const channelsMap: ResolvedChannelMap<T> = {
+        x: xAes,
+        y: yAes,
+        color: colorAes,
+      };
+      // Tick width is small; size the pickRadius to the tick's full length so
+      // the cursor anywhere over a tick (or just past it) picks it.
+      return {
+        geomKind: "rug",
+        label: options.label,
+        positions: positions.subarray(0, n * 2),
+        rects: rects.subarray(0, n * 4),
+        dataIndex: dataIndex.subarray(0, n),
+        pickRadius: Math.max(6, length),
+        channels: channelsMap,
+        data,
+      };
+    },
+  };
+}

package/src/grammar/geoms/rule.d.ts

@@ -0,0 +1,23 @@
+import type { Color } from "insomni";
+import type { Aes } from "../aes.ts";
+import { type ColorOrAccent } from "../color-utils.ts";
+import type { Geom } from "./types.ts";
+export interface RuleChannels<T> {
+    x?: Aes<T, number | Date>;
+    y?: Aes<T, number | Date>;
+}
+export interface RuleOptions {
+    /**
+     * Stroke color. Accepts a literal {@link Color} or a theme accent key
+     * (`"positive" | "negative" | "warn" | "info"`); accent keys resolve through
+     * `theme.accents`.
+     */
+    stroke?: ColorOrAccent;
+    strokeWidth?: number;
+    dashPattern?: readonly number[];
+    /** Optional inline rule label (only meaningful for non-data rules). */
+    label?: string;
+    labelColor?: Color;
+    labelInset?: number;
+}
+export declare function rule<T>(channels: RuleChannels<T>, options?: RuleOptions): Geom<T>;

package/src/grammar/geoms/rule.test.ts

@@ -0,0 +1,69 @@
+import { createFrame } from "insomni";
+import { describe, expect, test } from "vite-plus/test";
+
+import { resolveAes } from "../aes.ts";
+import { buildPositionScale, type ScaleBundle } from "../scales.ts";
+import { themeDefault } from "../theme.ts";
+import { rule } from "./rule.ts";
+import type { CompileContext } from "./types.ts";
+
+interface Row {
+  threshold: number;
+}
+
+const data: Row[] = [{ threshold: 25 }, { threshold: 75 }];
+
+function makeCtx(rows: readonly Row[]): CompileContext<Row> {
+  const xAes = resolveAes<Row, unknown>("threshold");
+  const yAes = resolveAes<Row, unknown>("threshold");
+  const xScale = buildPositionScale(xAes, rows, [0, 100]);
+  const yScale = buildPositionScale(yAes, rows, [200, 0]);
+  const scales: ScaleBundle = { x: xScale, y: yScale };
+  return {
+    data: rows,
+    scales,
+    plot: createFrame({ x: 50, y: 30, width: 100, height: 200 }),
+    theme: themeDefault,
+    atlas: undefined,
+  };
+}
+
+describe("rule geom — compileHitTest", () => {
+  test("vertical rule emits one hit per row, pickAxis 'x'", () => {
+    const geom = rule<Row>({ x: "threshold" });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.geomKind).toBe("rule");
+    expect(hits.pickAxis).toBe("x");
+    expect(hits.dataIndex.length).toBe(2);
+    // domain auto-derives to [25, 75]; threshold=25 maps to range start 0,
+    // plus plot.x(50) = 50.
+    expect(hits.positions[0]).toBeCloseTo(50, 3);
+    // y centered in plot: 30 + 100 = 130.
+    expect(hits.positions[1]).toBeCloseTo(130, 3);
+  });
+
+  test("horizontal rule emits pickAxis 'y' with x centered in plot", () => {
+    const geom = rule<Row>({ y: "threshold" });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.pickAxis).toBe("y");
+    // x centered: 50 + 50 = 100.
+    expect(hits.positions[0]).toBeCloseTo(100, 3);
+  });
+
+  test("pickRadius is a small perpendicular tolerance — pickAxis ignores the rest", () => {
+    // pickAxis="x" (vertical rule) means the picker only considers x-distance,
+    // so the cursor's y can be anywhere along the rule and still hit. The
+    // radius therefore constrains the *perpendicular* (x) distance to the
+    // line itself; it should NOT be plot-sized, otherwise the rule swallows
+    // hits intended for other geoms (legend, etc.) sharing on-axis position.
+    const geom = rule<Row>({ x: "threshold" });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.pickRadius).toBeLessThan(50);
+    expect(hits.pickRadius).toBeGreaterThanOrEqual(8);
+  });
+
+  test("returns null when no rule positions resolve", () => {
+    const geom = rule<Row>({ x: "threshold" });
+    expect(geom.compileHitTest!(makeCtx([]))).toBeNull();
+  });
+});

package/src/grammar/geoms/rule.ts

@@ -0,0 +1,212 @@
+// ---------------------------------------------------------------------------
+// rule geom — vertical or horizontal reference lines
+// ---------------------------------------------------------------------------
+// `rule({ x: <value> })`  → vertical rule(s) at the given x value(s)
+// `rule({ y: <value> })`  → horizontal rule(s) at the given y value(s)
+//
+// The value can be a constant (one rule), a column key (one rule per row),
+// or an accessor. Data is optional — if not given, the chart's data is used,
+// or `[null]` for a single-rule case.
+
+import type { Color } from "insomni";
+import { ruleMark } from "../../annotations.ts";
+import type { Aes } from "../aes.ts";
+import { resolveAes } from "../aes.ts";
+import { resolveAccent, type ColorOrAccent } from "../color-utils.ts";
+import type { CompileContext, CompiledHitTest, Geom, ResolvedChannelMap } from "./types.ts";
+import { inlineMark, resolveCoord, wrapMark } from "./_mark.ts";
+
+export interface RuleChannels<T> {
+  x?: Aes<T, number | Date>;
+  y?: Aes<T, number | Date>;
+}
+
+export interface RuleOptions {
+  /**
+   * Stroke color. Accepts a literal {@link Color} or a theme accent key
+   * (`"positive" | "negative" | "warn" | "info"`); accent keys resolve through
+   * `theme.accents`.
+   */
+  stroke?: ColorOrAccent;
+  strokeWidth?: number;
+  dashPattern?: readonly number[];
+  /** Optional inline rule label (only meaningful for non-data rules). */
+  label?: string;
+  labelColor?: Color;
+  labelInset?: number;
+}
+
+export function rule<T>(channels: RuleChannels<T>, options: RuleOptions = {}): Geom<T> {
+  if (!channels.x && !channels.y) {
+    throw new Error("rule(): one of `x` or `y` must be provided");
+  }
+  const isVertical = channels.x !== undefined;
+  return {
+    kind: "rule",
+    channels: { x: channels.x, y: channels.y },
+    label: options.label,
+    compile(ctx: CompileContext<T>) {
+      const { data, scales, plot, theme } = ctx;
+      const coord = resolveCoord(ctx);
+      const stroke = resolveAccent(options.stroke, theme) ?? theme.text.color;
+      const strokeWidth = options.strokeWidth ?? theme.marks.ruleStrokeWidth;
+
+      const out: ReturnType<typeof wrapMark>[] = [];
+      const labelColor = options.labelColor ?? theme.subtitle.color;
+      const labelInset = options.labelInset ?? theme.marks.ruleLabelInset;
+      const fontSize = theme.marks.annotationFontSize;
+
+      const isCartesian = coord.kind === "cartesian";
+      if (isVertical) {
+        const aes = resolveAes<T, unknown>(channels.x as Aes<T, unknown>);
+        const fn = scales.x.fn;
+        const rows = aes.kind === "constant" ? [data[0] ?? (undefined as unknown as T)] : data;
+        for (let i = 0; i < rows.length; i++) {
+          const xPx = fn(aes.fn(rows[i] as T, i));
+          if (isCartesian) {
+            // Route through `coord.project`. Under Cartesian this is the
+            // identity; rules stay axis-aligned.
+            const projected = coord.project({ x: xPx, y: 0 });
+            const mark = ruleMark({
+              x: projected.x,
+              extent: [0, plot.height],
+              stroke,
+              strokeWidth,
+              dashPattern: options.dashPattern,
+              label: i === 0 ? options.label : undefined,
+              labelInset,
+              labelColor,
+              fontSize,
+            });
+            out.push(wrapMark(mark, plot.topLeft, 1));
+          } else {
+            // Non-cartesian (polar): a "vertical" rule (constant x) sweeps
+            // the full off-axis (y) extent. Tessellate that sweep through
+            // `coord.segment` — under the default `angleChannel: "y"` polar
+            // this becomes a constant-radius arc (a circle for full y).
+            const tess = coord.segment({ x: xPx, y: 0 }, { x: xPx, y: plot.height });
+            out.push(
+              buildPolarRulePolyline(tess, plot.topLeft, stroke, strokeWidth, options.dashPattern),
+            );
+          }
+        }
+      } else {
+        const aes = resolveAes<T, unknown>(channels.y as Aes<T, unknown>);
+        const fn = scales.y.fn;
+        const rows = aes.kind === "constant" ? [data[0] ?? (undefined as unknown as T)] : data;
+        for (let i = 0; i < rows.length; i++) {
+          const yPx = fn(aes.fn(rows[i] as T, i));
+          if (isCartesian) {
+            const projected = coord.project({ x: 0, y: yPx });
+            const mark = ruleMark({
+              y: projected.y,
+              extent: [0, plot.width],
+              stroke,
+              strokeWidth,
+              dashPattern: options.dashPattern,
+              label: i === 0 ? options.label : undefined,
+              labelInset,
+              labelColor,
+              fontSize,
+            });
+            out.push(wrapMark(mark, plot.topLeft, 1));
+          } else {
+            // "Horizontal" rule (constant y) sweeps full x extent. Under the
+            // default polar this becomes a constant-θ spoke (straight radial
+            // line). `coord.segment` short-circuits to a 2-point polyline
+            // for same-angle inputs, so the output is a single straight line.
+            const tess = coord.segment({ x: 0, y: yPx }, { x: plot.width, y: yPx });
+            out.push(
+              buildPolarRulePolyline(tess, plot.topLeft, stroke, strokeWidth, options.dashPattern),
+            );
+          }
+        }
+      }
+      return out;
+    },
+    compileHitTest(ctx: CompileContext<T>): CompiledHitTest<T> | null {
+      const { data, scales, plot, theme } = ctx;
+      const coord = resolveCoord(ctx);
+      // Pick the perpendicular axis: vertical rule → cursor's x picks; horizontal → y.
+      const pickAxis: "x" | "y" = isVertical ? "x" : "y";
+      const aes = resolveAes<T, unknown>((isVertical ? channels.x : channels.y) as Aes<T, unknown>);
+      const fn = (isVertical ? scales.x : scales.y).fn;
+      const rows = aes.kind === "constant" ? [data[0] ?? (undefined as unknown as T)] : data;
+      const ox = plot.topLeft.x;
+      const oy = plot.topLeft.y;
+      const positions = new Float32Array(rows.length * 2);
+      const dataIndex = new Int32Array(rows.length);
+      let n = 0;
+      for (let i = 0; i < rows.length; i++) {
+        const v = aes.fn(rows[i] as T, i);
+        const px = fn(v as never);
+        if (!Number.isFinite(px)) continue;
+        // Project the anchor point (mid-extent on the off axis) so tooltips
+        // land on the visible rule under any coord. Cartesian: identity.
+        if (isVertical) {
+          const projected = coord.project({ x: px, y: plot.height / 2 });
+          positions[n * 2] = ox + projected.x;
+          positions[n * 2 + 1] = oy + projected.y;
+        } else {
+          const projected = coord.project({ x: plot.width / 2, y: px });
+          positions[n * 2] = ox + projected.x;
+          positions[n * 2 + 1] = oy + projected.y;
+        }
+        // For constant aes, all hits map back to data row 0; for column-driven
+        // rules, hit i corresponds to data row i.
+        dataIndex[n] = aes.kind === "constant" ? 0 : i;
+        n++;
+      }
+      if (n === 0) return null;
+      const channelsMap: ResolvedChannelMap<T> = isVertical ? { x: aes } : { y: aes };
+      return {
+        geomKind: "rule",
+        label: options.label,
+        positions: positions.subarray(0, n * 2),
+        dataIndex: dataIndex.subarray(0, n),
+        // pickAxis ignores the off-axis entirely (along-the-rule extent is
+        // unbounded that way), so pickRadius constrains the *perpendicular*
+        // distance to the rule line. Keep it tight — a few pixels of
+        // tolerance — so the rule doesn't claim hits over the rest of the
+        // chart (legend, other geoms) just because they share an x or y.
+        pickRadius: Math.max(8, (options.strokeWidth ?? theme.marks.ruleStrokeWidth) * 2 + 4),
+        pickAxis,
+        channels: channelsMap,
+        // Use the chart's data array (not the locally-built `rows`). The
+        // hit-layer's fast-path keys reuse on `data` identity; allocating a
+        // fresh `[data[0]]` each compile would tear down PointCloud nodes
+        // mid-hover and leave the tooltip stuck (no leave event ever fires).
+        // dataIndex already maps to row 0 of `data` for the constant case.
+        data,
+      };
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Polar helper — build a polyline mark builder from a tessellated segment.
+// ---------------------------------------------------------------------------
+
+interface PolarRulePolyline {
+  length: number;
+  addTo: (layer: import("insomni").Layer) => import("insomni").Layer;
+}
+
+function buildPolarRulePolyline(
+  tess: readonly { x: number; y: number }[],
+  origin: { x: number; y: number },
+  stroke: Color,
+  strokeWidth: number,
+  dashPattern: readonly number[] | undefined,
+): PolarRulePolyline {
+  return inlineMark((layer) => {
+    if (tess.length < 2) return;
+    const pts = tess.map((p) => ({ x: origin.x + p.x, y: origin.y + p.y }));
+    layer.pushPolyline({
+      points: pts,
+      color: stroke,
+      width: strokeWidth,
+      dashPattern,
+    });
+  }) as PolarRulePolyline;
+}