insomni-plot 0.1.0-alpha.0

package/src/grammar/interactions/menu.ts

@@ -0,0 +1,342 @@
+// ---------------------------------------------------------------------------
+// Grammar-level context-menu wiring
+// ---------------------------------------------------------------------------
+// Subscribes to `InteractionManager.onContextMenuRequest` (right-click, touch
+// long-press, keyboard) and resolves each event against the shared hit-layer
+// for a `{ datum, mark, screenX, screenY, source, mods }` payload.
+//
+// Two modes:
+//   1. `items` + `onAction` — the library renders a GPU-drawn `Menu` inside
+//      the canvas, registers an InteractionNode for hover/click routing, and
+//      closes on outside-press / Escape / pan-zoom / item click. No DOM.
+//   2. `onTrigger` only — emits an event and lets the consumer render. Kept
+//      for parity with the old API and for hosts that need full control.
+//
+// In `"nearest-point"` and `"any-mark"` modes, the trigger is suppressed when
+// no mark is hit. Matches hover-tooltip / crosshair behavior — no popup
+// without an anchor. Only `"background"` mode fires unconditionally.
+
+import {
+  type ContextMenuOpts,
+  createMenu,
+  type GestureEventInfo,
+  type GlyphAtlas,
+  type InteractionManager,
+  type InteractionNode,
+  type Invalidator,
+  type Layer,
+  type Menu,
+  type MenuContent,
+  type MenuItem,
+  type MenuPlacement,
+  type MenuStyle,
+  type Mods,
+} from "insomni";
+import type { ContextMenuItem, ContextMenuTriggerPayload } from "../chart.ts";
+import type { GeomKind, HoveredHit } from "../geoms/types.ts";
+import type { Theme } from "../theme.ts";
+import { createDisposable } from "./_disposable.ts";
+import { TEXT_WIDTH_FALLBACK_RATIO } from "../../format.ts";
+import type { GrammarHitLayer } from "./hit-layer.ts";
+
+export type ContextMenuHitMode = "nearest-point" | "any-mark" | "background";
+
+export interface ContextMenuTriggerInfo {
+  /**
+   * Resolved hit at the trigger point, or `null` for a background trigger.
+   * `nearest-point` resolution uses each compiled hit-test's `pickRadius`;
+   * `any-mark` additionally includes region-based geoms (bars, tiles).
+   * `background` mode always returns `null`.
+   */
+  hit: HoveredHit | null;
+  /** Convenience: the resolved data row, or `null` for background. */
+  // oxlint-disable-next-line no-redundant-type-constituents -- `| null` is intentional documentation that null means "no hit" vs. an actual data row
+  datum: unknown | null;
+  /** Convenience: the geom kind that produced the hit (e.g. "point", "bar"). */
+  mark: GeomKind | null;
+  /** Element-local CSS px where the menu should anchor. */
+  screenX: number;
+  screenY: number;
+  source: "mouse" | "touch" | "pen" | "keyboard";
+  mods: Mods;
+  originalEvent: Event | null;
+}
+
+export interface GrammarContextMenuOptions {
+  /**
+   * Resolution policy for the trigger point. Default `"nearest-point"`.
+   *
+   * - `"nearest-point"`: walks point-based geoms (scatter, line vertices, ...)
+   *   only. Honors each compiled hit-test's `pickRadius`. **Suppresses the
+   *   trigger entirely when no mark is hit.**
+   * - `"any-mark"`: includes region-based geoms (bars, histograms, tiles).
+   *   Same suppression behavior as `"nearest-point"`.
+   * - `"background"`: never resolves to a mark; `hit` / `datum` / `mark` are
+   *   always null. Fires unconditionally — useful for empty-space menus.
+   */
+  hitMode?: ContextMenuHitMode;
+  /**
+   * Optional gate: when this returns true (e.g. an active pan/zoom drag), the
+   * context-menu trigger is suppressed. The InteractionManager already cancels
+   * touch long-press on drag promotion, but a right-click during a left-button
+   * drag still arrives as a native `contextmenu` event — this hook lets the
+   * mount tie suppression to its own panning state.
+   */
+  isSuppressed?(): boolean;
+  /** Override default ContextMenuOpts (holdMs, slopPx) for touch long-press. */
+  managerOpts?: ContextMenuOpts;
+  /** Low-level trigger emitter (fires alongside the rendered menu, if any). */
+  onTrigger?(info: ContextMenuTriggerInfo): void;
+  /**
+   * Menu items (static or per-trigger). When set, the library renders a
+   * canvas menu and routes clicks through `onAction`. When omitted, only
+   * `onTrigger` fires.
+   */
+  items?:
+    | readonly ContextMenuItem[]
+    | ((info: ContextMenuTriggerInfo) => readonly ContextMenuItem[]);
+  onAction?(itemId: string, info: ContextMenuTriggerInfo): void;
+  placement?: MenuPlacement;
+  style?: MenuStyle;
+}
+
+export interface GrammarContextMenuDeps {
+  manager: InteractionManager;
+  hitLayer: GrammarHitLayer;
+  /** Required only when `items` is configured. Where the menu draws. */
+  hudLayer?: () => Layer;
+  /** Required only when `items` is configured. For text measurement. */
+  atlas?: () => GlyphAtlas | undefined;
+  /** Required only when `items` is configured. For default styling tokens. */
+  theme?: () => Theme;
+  /** Required only when `items` is configured. Bounds for menu clamp/flip. */
+  bounds?: () => { x: number; y: number; width: number; height: number };
+  /** Required only when `items` is configured. Wakes the loop on fade ticks. */
+  invalidator?: Invalidator;
+  /**
+   * Subscribe to pan/zoom changes (so the menu closes when the chart moves
+   * under it). Returns an unsubscribe, or null when pan/zoom is disabled.
+   */
+  onViewportChange?(cb: () => void): (() => void) | null;
+}
+
+export interface GrammarContextMenu {
+  /** Tick fade timers. */
+  step(dt: number): void;
+  /** Draw the menu into the hud layer. */
+  draw(): void;
+  dispose(): void;
+}
+
+function toMenuItem(it: ContextMenuItem): MenuItem {
+  return {
+    id: it.id,
+    label: it.label,
+    separator: it.separator,
+    disabled: it.disabled,
+    danger: it.danger,
+    swatch: it.swatch,
+    kbd: it.kbd,
+  };
+}
+
+export function createGrammarContextMenu(
+  deps: GrammarContextMenuDeps,
+  opts: GrammarContextMenuOptions,
+): GrammarContextMenu {
+  const hitMode: ContextMenuHitMode = opts.hitMode ?? "nearest-point";
+  const isSuppressed = opts.isSuppressed ? () => opts.isSuppressed!() : undefined;
+
+  // ----- Menu primitive (only when items are configured) ----------------------
+  const itemsResolver = opts.items;
+  const onAction = opts.onAction
+    ? (id: string, info: ContextMenuTriggerInfo) => opts.onAction!(id, info)
+    : undefined;
+  const hasMenu = itemsResolver !== undefined;
+
+  let menu: Menu | null = null;
+  let menuNode: InteractionNode | null = null;
+  let lastTriggerInfo: ContextMenuTriggerInfo | null = null;
+  let unsubBackground: (() => void) | null = null;
+  let unsubViewport: (() => void) | null = null;
+  let keydownHandler: ((ev: KeyboardEvent) => void) | null = null;
+  let outsideDownHandler: ((ev: PointerEvent) => void) | null = null;
+  let drawHudLayer: (() => Layer) | null = null;
+
+  if (hasMenu) {
+    if (!deps.hudLayer || !deps.bounds) {
+      throw new Error(
+        "createGrammarContextMenu: `items` requires `hudLayer` and `bounds` deps for canvas rendering",
+      );
+    }
+    const hudLayer = deps.hudLayer;
+    const boundsFn = deps.bounds;
+    const atlasFn = deps.atlas;
+    const invalidator = deps.invalidator;
+    menu = createMenu({
+      placement: opts.placement ?? "bottom-right",
+      bounds: boundsFn,
+      measure: (text, fontSize) => {
+        const a = atlasFn?.();
+        if (a) return a.measureText(text, { fontSize, simple: true });
+        return { width: text.length * fontSize * TEXT_WIDTH_FALLBACK_RATIO, height: fontSize };
+      },
+      style: opts.style,
+      invalidator,
+    });
+    // Capture hudLayer for the draw() closure below — `deps.hudLayer` is the
+    // canonical getter (re-resolves the layer if font-load swapped it).
+    drawHudLayer = hudLayer;
+
+    const closeMenu = () => {
+      menu!.hide();
+      menuNode?.update({ enabled: false });
+      lastTriggerInfo = null;
+      invalidator?.invalidate();
+    };
+
+    // Interaction node — bounds track the live menu box, only enabled while
+    // visible. zIndex sits above everything else (hit cloud z is in the
+    // ~2000 range; we go well above).
+    menuNode = deps.manager.add({
+      zIndex: 10_000,
+      space: "ui",
+      enabled: false,
+      cursor: "pointer",
+      bounds: () => {
+        const b = menu!.getBounds();
+        return b ?? { x: 0, y: 0, width: 0, height: 0 };
+      },
+      onHoverMove: (e) => {
+        menu!.setHoverPosition({ x: e.x, y: e.y });
+      },
+      onHoverLeave: () => {
+        menu!.setHoverPosition(null);
+      },
+      onPress: (e) => {
+        const id = menu!.pickItemAt(e.x, e.y);
+        const info = lastTriggerInfo;
+        closeMenu();
+        if (id !== null && info && onAction) onAction(id, info);
+      },
+    });
+
+    // Close on background tap (clicks outside any node) — natural "click
+    // anywhere outside" behavior.
+    unsubBackground = deps.manager.onBackgroundTap(() => {
+      if (menu!.visible) closeMenu();
+    });
+
+    // Close on pan/zoom — the menu anchor would drift otherwise.
+    if (deps.onViewportChange) {
+      unsubViewport =
+        deps.onViewportChange(() => {
+          if (menu!.visible) closeMenu();
+        }) ?? null;
+    }
+
+    // Close on Escape. Manager doesn't expose generic keydown; document
+    // listener is the standard pattern (matches the previous DOM popover).
+    if (typeof document !== "undefined") {
+      keydownHandler = (ev: KeyboardEvent) => {
+        if (ev.key === "Escape" && menu!.visible) {
+          ev.preventDefault();
+          closeMenu();
+        }
+      };
+      document.addEventListener("keydown", keydownHandler);
+
+      // Close on pointerdown outside the canvas. The background-tap above
+      // covers clicks on the canvas itself; this catches clicks on host
+      // chrome (chips, monitor panel) which would otherwise leave the menu
+      // floating.
+      outsideDownHandler = (ev: PointerEvent) => {
+        if (!menu!.visible) return;
+        const elt = deps.manager.element;
+        const target = ev.target;
+        if (target instanceof Node && elt.contains(target)) return;
+        closeMenu();
+      };
+      document.addEventListener("pointerdown", outsideDownHandler, true);
+    }
+  }
+
+  // ----- Native context-menu request handling --------------------------------
+
+  const unsubscribe = deps.manager.onContextMenuRequest((info: GestureEventInfo) => {
+    if (isSuppressed?.()) return;
+    let hit: HoveredHit | null = null;
+    if (hitMode !== "background") {
+      const mode = hitMode === "nearest-point" ? "point" : "any";
+      const picked = deps.hitLayer.pickAt(info.x, info.y, { mode });
+      hit = picked ? picked.hit : null;
+      // Suppress entirely when no mark is hit. Matches hover behavior. Also
+      // dismiss any currently-open menu so the user can right-click empty
+      // space to close it without first clicking elsewhere.
+      if (hit === null) {
+        if (menu?.visible) {
+          menu.hide();
+          menuNode?.update({ enabled: false });
+          lastTriggerInfo = null;
+          deps.invalidator?.invalidate();
+        }
+        return;
+      }
+    }
+    const trigger: ContextMenuTriggerInfo = {
+      hit,
+      datum: hit ? (hit.data[hit.dataIndex] ?? null) : null,
+      mark: hit ? hit.geomKind : null,
+      screenX: info.x,
+      screenY: info.y,
+      source: info.source,
+      mods: info.mods,
+      originalEvent: info.originalEvent,
+    };
+    opts.onTrigger?.(trigger);
+    if (menu && itemsResolver) {
+      const resolved = typeof itemsResolver === "function" ? itemsResolver(trigger) : itemsResolver;
+      const content: MenuContent = { items: resolved.map(toMenuItem) };
+      lastTriggerInfo = trigger;
+      menu.show({ x: info.x, y: info.y }, content);
+      menuNode?.update({ enabled: true });
+      deps.invalidator?.invalidate();
+    }
+  }, opts.managerOpts);
+
+  const d = createDisposable(() => {
+    // Remove document-scoped listeners FIRST: they outlive this component if
+    // any later cleanup step throws, and leaving them attached would leak
+    // closures over `menu`/`deps` and keep dispatching to a torn-down menu.
+    try {
+      if (keydownHandler && typeof document !== "undefined") {
+        document.removeEventListener("keydown", keydownHandler);
+      }
+      if (outsideDownHandler && typeof document !== "undefined") {
+        document.removeEventListener("pointerdown", outsideDownHandler, true);
+      }
+    } finally {
+      unsubscribe();
+      unsubBackground?.();
+      unsubViewport?.();
+      menuNode?.destroy();
+      menu?.dispose();
+    }
+  });
+  return {
+    step(dt) {
+      if (d.isDisposed) return;
+      menu?.step(dt);
+    },
+    draw() {
+      if (d.isDisposed || !menu || !drawHudLayer) return;
+      menu.draw(drawHudLayer());
+    },
+    dispose: () => d.dispose(),
+  };
+}
+
+// Cross-package type alias — the public `ContextMenuTriggerPayload` exported
+// from chart.ts shares this shape but is referenced through a different
+// import path. Keep the structural type re-exposed here for grammar tests.
+export type { ContextMenuTriggerPayload };

package/src/grammar/interactions/selection.d.ts

@@ -0,0 +1,25 @@
+import { type InteractionManager } from "insomni";
+import type { CompiledHitTest, HoveredHit } from "../geoms/types.ts";
+import type { GrammarHitLayer } from "./hit-layer.ts";
+export interface GrammarSelectionOptions {
+    /**
+     * Fired whenever the selection set changes. Receives a fresh array of
+     * `HoveredHit`s (one per currently-selected row) so callers can mirror it
+     * onto a public signal or run side-effects.
+     */
+    onChange?(selected: HoveredHit[]): void;
+}
+export interface GrammarSelectionDeps {
+    manager: InteractionManager;
+    hitLayer: GrammarHitLayer;
+}
+export interface GrammarSelection {
+    /** Refresh id→position registry after each pipeline run. */
+    sync<T>(hits: readonly CompiledHitTest<T>[]): void;
+    /** Read-only snapshot of the current selection. */
+    current(): HoveredHit[];
+    /** Imperatively clear the selection (e.g., from outside on Escape). */
+    clear(): void;
+    dispose(): void;
+}
+export declare function createGrammarSelection(deps: GrammarSelectionDeps, opts?: GrammarSelectionOptions): GrammarSelection;

package/src/grammar/interactions/selection.test.ts

@@ -0,0 +1,289 @@
+import type { InteractionManager, PointerInfo } from "insomni";
+import { describe, expect, test } from "vite-plus/test";
+
+import type { CompiledHitTest, HoveredHit } from "../geoms/types.ts";
+import type { GrammarHitLayer, HitEventContext, HitLayerSubscriber } from "./hit-layer.ts";
+import { createGrammarSelection } from "./selection.ts";
+
+// ---------------------------------------------------------------------------
+// Test stubs — fake manager (only needed for onBackgroundTap) and fake hit
+// layer that captures subscribers and lets tests fire press events directly.
+// ---------------------------------------------------------------------------
+
+function fakeManager(): { manager: InteractionManager; fireBackgroundTap: () => void } {
+  let bgHandler: (() => void) | null = null;
+  const manager = {
+    onBackgroundTap(handler: () => void) {
+      bgHandler = handler;
+      return () => {
+        if (bgHandler === handler) bgHandler = null;
+      };
+    },
+  } as unknown as InteractionManager;
+  return { manager, fireBackgroundTap: () => bgHandler?.() };
+}
+
+function fakeHitLayer(): {
+  layer: GrammarHitLayer;
+  subscribers: HitLayerSubscriber[];
+  firePress: <T>(compiled: CompiledHitTest<T>, hitIndex: number, pointer: PointerInfo) => void;
+} {
+  const subscribers: HitLayerSubscriber[] = [];
+  const layer: GrammarHitLayer = {
+    sync() {},
+    subscribe(sub) {
+      subscribers.push(sub);
+      return () => {
+        const i = subscribers.indexOf(sub);
+        if (i >= 0) subscribers.splice(i, 1);
+      };
+    },
+    state() {
+      return { active: null };
+    },
+    subscribeState() {
+      return () => {};
+    },
+    pickAt() {
+      return null;
+    },
+    dispose() {
+      subscribers.length = 0;
+    },
+  };
+  return {
+    layer,
+    subscribers,
+    firePress: (compiled, hitIndex, pointer) => {
+      const px = compiled.positions[hitIndex * 2]!;
+      const py = compiled.positions[hitIndex * 2 + 1]!;
+      const hit: HoveredHit = {
+        geomKind: compiled.geomKind,
+        dataIndex: compiled.dataIndex[hitIndex] ?? hitIndex,
+        seriesKey: compiled.seriesKey?.[hitIndex],
+        data: compiled.data as readonly unknown[],
+        x: px,
+        y: py,
+      };
+      const ctx: HitEventContext = {
+        hit,
+        compiled: compiled as CompiledHitTest<unknown>,
+        hitIndex,
+        pointer,
+      };
+      for (const sub of subscribers) sub.onPress?.(ctx);
+    },
+  };
+}
+
+const noMods = { shift: false, ctrl: false, meta: false, alt: false };
+function pointerAt(x: number, y: number, mods = noMods): PointerInfo {
+  return {
+    pointerId: 1,
+    type: "mouse",
+    x,
+    y,
+    localX: x,
+    localY: y,
+    buttons: 1,
+    mods,
+    stopPropagation: () => {},
+  };
+}
+
+interface Row {
+  x: number;
+  y: number;
+}
+
+function hitFor(
+  positions: number[],
+  indices: number[],
+  data: readonly Row[],
+  seriesKey?: (string | undefined)[],
+): CompiledHitTest<Row> {
+  return {
+    geomKind: "point",
+    positions: Float32Array.from(positions),
+    dataIndex: Int32Array.from(indices),
+    seriesKey,
+    pickRadius: 5,
+    channels: {},
+    data,
+  };
+}
+
+describe("grammar selection", () => {
+  test("plain click selects a single row", () => {
+    const { manager } = fakeManager();
+    const { layer, firePress } = fakeHitLayer();
+    const events: HoveredHit[][] = [];
+    const sel = createGrammarSelection(
+      { manager, hitLayer: layer },
+      { onChange: (s) => events.push(s) },
+    );
+
+    const data: Row[] = [
+      { x: 10, y: 20 },
+      { x: 30, y: 40 },
+    ];
+    const hit = hitFor([10, 20, 30, 40], [0, 1], data);
+    sel.sync([hit]);
+    firePress(hit as CompiledHitTest<unknown>, 0, pointerAt(10, 20));
+
+    expect(sel.current()).toHaveLength(1);
+    expect(sel.current()[0]!.dataIndex).toBe(0);
+    expect(events.at(-1)!).toHaveLength(1);
+  });
+
+  test("shift-click toggles membership", () => {
+    const { manager } = fakeManager();
+    const { layer, firePress } = fakeHitLayer();
+    const sel = createGrammarSelection({ manager, hitLayer: layer });
+    const data: Row[] = [
+      { x: 10, y: 20 },
+      { x: 30, y: 40 },
+    ];
+    const hit = hitFor([10, 20, 30, 40], [0, 1], data) as CompiledHitTest<unknown>;
+    sel.sync([hit]);
+
+    firePress(hit, 0, pointerAt(10, 20));
+    firePress(hit, 1, pointerAt(30, 40, { ...noMods, shift: true }));
+    expect(
+      sel
+        .current()
+        .map((h) => h.dataIndex)
+        .sort((a, b) => a - b),
+    ).toEqual([0, 1]);
+
+    firePress(hit, 0, pointerAt(10, 20, { ...noMods, shift: true }));
+    expect(sel.current().map((h) => h.dataIndex)).toEqual([1]);
+  });
+
+  test("meta-click removes a row", () => {
+    const { manager } = fakeManager();
+    const { layer, firePress } = fakeHitLayer();
+    const sel = createGrammarSelection({ manager, hitLayer: layer });
+    const data: Row[] = [
+      { x: 10, y: 20 },
+      { x: 30, y: 40 },
+    ];
+    const hit = hitFor([10, 20, 30, 40], [0, 1], data) as CompiledHitTest<unknown>;
+    sel.sync([hit]);
+
+    firePress(hit, 0, pointerAt(10, 20));
+    firePress(hit, 1, pointerAt(30, 40, { ...noMods, shift: true }));
+    firePress(hit, 0, pointerAt(10, 20, { ...noMods, meta: true }));
+
+    expect(sel.current().map((h) => h.dataIndex)).toEqual([1]);
+  });
+
+  test("plain click on a different row replaces selection", () => {
+    const { manager } = fakeManager();
+    const { layer, firePress } = fakeHitLayer();
+    const sel = createGrammarSelection({ manager, hitLayer: layer });
+    const data: Row[] = [
+      { x: 10, y: 20 },
+      { x: 30, y: 40 },
+    ];
+    const hit = hitFor([10, 20, 30, 40], [0, 1], data) as CompiledHitTest<unknown>;
+    sel.sync([hit]);
+
+    firePress(hit, 0, pointerAt(10, 20));
+    firePress(hit, 1, pointerAt(30, 40));
+    expect(sel.current().map((h) => h.dataIndex)).toEqual([1]);
+  });
+
+  test("background tap clears the selection", () => {
+    const { manager, fireBackgroundTap } = fakeManager();
+    const { layer, firePress } = fakeHitLayer();
+    const events: HoveredHit[][] = [];
+    const sel = createGrammarSelection(
+      { manager, hitLayer: layer },
+      { onChange: (s) => events.push(s) },
+    );
+    const data: Row[] = [{ x: 10, y: 20 }];
+    const hit = hitFor([10, 20], [0], data) as CompiledHitTest<unknown>;
+    sel.sync([hit]);
+    firePress(hit, 0, pointerAt(10, 20));
+    expect(sel.current()).toHaveLength(1);
+
+    fireBackgroundTap();
+    expect(sel.current()).toHaveLength(0);
+    expect(events.at(-1)!).toHaveLength(0);
+  });
+
+  test("sync drops selection rows that vanish from the data", () => {
+    const { manager } = fakeManager();
+    const { layer, firePress } = fakeHitLayer();
+    const sel = createGrammarSelection({ manager, hitLayer: layer });
+    const data: Row[] = [
+      { x: 10, y: 20 },
+      { x: 30, y: 40 },
+    ];
+    const hit1 = hitFor([10, 20, 30, 40], [0, 1], data) as CompiledHitTest<unknown>;
+    sel.sync([hit1]);
+    firePress(hit1, 0, pointerAt(10, 20));
+    expect(sel.current()).toHaveLength(1);
+
+    // New hit-test omits index 0 (e.g., row was filtered out by NaN/null guard).
+    sel.sync([hitFor([30, 40], [1], data)]);
+    expect(sel.current()).toHaveLength(0);
+  });
+
+  test("sync refreshes positions on already-selected rows", () => {
+    const { manager } = fakeManager();
+    const { layer, firePress } = fakeHitLayer();
+    const events: HoveredHit[][] = [];
+    const sel = createGrammarSelection(
+      { manager, hitLayer: layer },
+      { onChange: (s) => events.push(s) },
+    );
+    const data: Row[] = [{ x: 10, y: 20 }];
+    const hit1 = hitFor([10, 20], [0], data) as CompiledHitTest<unknown>;
+    sel.sync([hit1]);
+    firePress(hit1, 0, pointerAt(10, 20));
+    const before = events.length;
+
+    sel.sync([hitFor([55, 66], [0], data)]);
+    expect(sel.current()[0]).toMatchObject({ x: 55, y: 66 });
+    expect(events.length).toBeGreaterThan(before);
+  });
+
+  test("same row with different series keys can be selected independently", () => {
+    const { manager } = fakeManager();
+    const { layer, firePress } = fakeHitLayer();
+    const sel = createGrammarSelection({ manager, hitLayer: layer });
+    const data: Row[] = [{ x: 10, y: 20 }];
+    const hit = hitFor([10, 20, 30, 40], [0, 0], data, [
+      "east",
+      "west",
+    ]) as CompiledHitTest<unknown>;
+    sel.sync([hit]);
+
+    firePress(hit, 0, pointerAt(10, 20));
+    firePress(hit, 1, pointerAt(30, 40, { ...noMods, shift: true }));
+
+    expect(
+      sel
+        .current()
+        .map((h) => `${h.dataIndex}:${h.seriesKey}`)
+        .sort((a, b) => a.localeCompare(b)),
+    ).toEqual(["0:east", "0:west"]);
+  });
+
+  test("dispose unsubscribes from hit layer and stops bg tap from clearing", () => {
+    const { manager, fireBackgroundTap } = fakeManager();
+    const { layer, subscribers } = fakeHitLayer();
+    const sel = createGrammarSelection({ manager, hitLayer: layer });
+    const data: Row[] = [{ x: 10, y: 20 }];
+    sel.sync([hitFor([10, 20], [0], data)]);
+    expect(subscribers).toHaveLength(1);
+
+    sel.dispose();
+    expect(subscribers).toHaveLength(0);
+
+    fireBackgroundTap(); // unsubscribed; should be a no-op
+    expect(sel.current()).toHaveLength(0);
+  });
+});