graphein 0.20.0 → 0.22.0

package/dist/interaction/controller.js

@@ -1,7 +1,11 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { interactionMotionDisabled } from "../animation/env.js";
+import { cubicOut } from "../animation/easing.js";
 import { Tooltip } from "./tooltip.js";
+const FOCUS_MS = 160;
+const GLIDE_MS = 180;
 function resolveLegendHit(model, px, py) {
   for (const hit of model.legendHits ?? []) {
     const r = hit.rect;
@@ -18,6 +22,9 @@ function eventToSurfacePoint(surface, event) {
     y: (event.clientY - rect.top) * scaleY
   };
 }
+function clock() {
+  return globalThis.performance?.now() ?? Date.now();
+}
 class InteractionController {
   constructor(surface, tokens) {
     __publicField(this, "surface", surface);
@@ -26,12 +33,30 @@ class InteractionController {
     __publicField(this, "tooltip");
     __publicField(this, "raf", 0);
     __publicField(this, "pending", null);
+    // The last pointer position inside the surface, so a redraw can re-resolve
+    // the hover under a pointer that hasn't moved.
+    __publicField(this, "lastPoint", null);
+    __publicField(this, "pointerInside", false);
     __publicField(this, "activeKey", null);
     __publicField(this, "selectCfg", null);
     __publicField(this, "pickable", false);
+    // Animated highlight state. `shown` is the hover being painted (it outlives
+    // `activeKey` while focus fades out); `from` is the hover being glided from.
+    __publicField(this, "shown", null);
+    __publicField(this, "from");
+    __publicField(this, "focus", 0);
+    __publicField(this, "focusFrom", 0);
+    __publicField(this, "focusTarget", 0);
+    __publicField(this, "focusStart", 0);
+    __publicField(this, "glideStart", 0);
+    __publicField(this, "motionRaf", 0);
+    __publicField(this, "scheduling", false);
+    __publicField(this, "ranSynchronously", false);
     __publicField(this, "onMove", (e) => {
       if (!this.model) return;
       this.pending = eventToSurfacePoint(this.surface, e);
+      this.lastPoint = this.pending;
+      this.pointerInside = true;
       if (!this.raf) this.raf = requestAnimationFrame(this.flush);
     });
     __publicField(this, "onLeave", () => {
@@ -40,6 +65,8 @@ class InteractionController {
         this.raf = 0;
       }
       this.pending = null;
+      this.pointerInside = false;
+      this.lastPoint = null;
       this.clearHover();
     });
     __publicField(this, "onClick", (e) => {
@@ -67,6 +94,27 @@ class InteractionController {
       }
       this.render(hover);
     });
+    __publicField(this, "tick", () => {
+      const settle = this.scheduling;
+      if (settle) this.ranSynchronously = true;
+      this.motionRaf = 0;
+      const now = clock();
+      const focusT = settle ? 1 : Math.min(1, (now - this.focusStart) / FOCUS_MS);
+      const glideT = settle || !this.from ? 1 : Math.min(1, (now - this.glideStart) / GLIDE_MS);
+      this.focus = this.focusFrom + (this.focusTarget - this.focusFrom) * cubicOut(focusT);
+      const ctx = this.surface.interaction.ctx;
+      ctx.clearRect(0, 0, this.surface.width, this.surface.height);
+      const hover = this.shown;
+      if (hover?.paint && this.focus > 0) {
+        hover.paint(ctx, { focus: this.focus, glide: this.from ? cubicOut(glideT) : 1, from: this.from });
+      }
+      if (focusT >= 1 && glideT >= 1) {
+        this.from = void 0;
+        if (this.focusTarget === 0) this.shown = null;
+        return;
+      }
+      if (!settle) this.kick();
+    });
     this.tokens = tokens;
     this.tooltip = new Tooltip(surface.root, tokens);
     const root = surface.root;
@@ -81,8 +129,31 @@ class InteractionController {
     this.tokens = tokens;
     this.tooltip.setTokens(tokens);
     this.activeKey = null;
+    this.stopMotion();
+    this.shown = null;
+    this.from = void 0;
     this.pickable = Boolean(model?.pick || model?.legendHits?.length);
-    if (!model) this.tooltip.hide();
+    if (!model) {
+      this.focus = 0;
+      this.tooltip.hide();
+      return;
+    }
+    if (this.pointerInside && this.lastPoint) {
+      this.pending = this.lastPoint;
+      if (!this.raf) this.raf = requestAnimationFrame(this.flush);
+    } else this.focus = 0;
+  }
+  /**
+   * Repaint the current hover against the latest frame geometry — called when an
+   * entrance or update transition settles, so focus drawn mid-animation lands on
+   * the finished marks.
+   */
+  refresh() {
+    if (!this.shown || this.activeKey === null || this.motionRaf) return;
+    const ctx = this.surface.interaction.ctx;
+    ctx.clearRect(0, 0, this.surface.width, this.surface.height);
+    if (this.animated(this.shown)) this.shown.paint(ctx, { focus: this.focus, glide: 1 });
+    else this.paintHighlight(this.shown);
   }
   /** Wire click/tap selection for this chart (or `null` to disable it). */
   setSelect(cfg) {
@@ -91,26 +162,78 @@ class InteractionController {
   render(hover) {
     if (hover.key !== this.activeKey) {
       this.activeKey = hover.key;
-      this.paintHighlight(hover);
       this.tooltip.setContent(hover.content);
+      this.show(hover);
     }
     this.tooltip.place(hover.anchorX, hover.anchorY, this.surface.width, this.surface.height);
     if (this.selectCfg && this.pickable) this.surface.root.style.cursor = "pointer";
   }
-  paintHighlight(hover) {
-    const ctx = this.surface.interaction.ctx;
-    ctx.clearRect(0, 0, this.surface.width, this.surface.height);
-    if (hover.draw) hover.draw(ctx);
+  animated(hover) {
+    return Boolean(hover?.paint) && !interactionMotionDisabled();
+  }
+  show(hover) {
+    if (!this.animated(hover)) {
+      this.stopMotion();
+      this.shown = hover;
+      this.from = void 0;
+      this.focus = 1;
+      this.paintHighlight(hover);
+      return;
+    }
+    const previous = this.shown && this.focus > 0 && this.animated(this.shown) ? this.shown : void 0;
+    this.from = previous;
+    this.glideStart = clock();
+    this.shown = hover;
+    this.retargetFocus(1);
+    this.kick();
   }
   clearHover() {
-    if (this.activeKey === null) return;
+    if (this.activeKey === null) {
+      if (!this.shown) this.focus = 0;
+      this.tooltip.hide();
+      if (this.selectCfg && this.pickable) this.surface.root.style.cursor = "";
+      return;
+    }
     this.activeKey = null;
-    this.surface.interaction.ctx.clearRect(0, 0, this.surface.width, this.surface.height);
     this.tooltip.hide();
     if (this.selectCfg && this.pickable) this.surface.root.style.cursor = "";
+    if (this.animated(this.shown) && this.focus > 0) {
+      this.retargetFocus(0);
+      this.kick();
+      return;
+    }
+    this.stopMotion();
+    this.shown = null;
+    this.from = void 0;
+    this.focus = 0;
+    this.surface.interaction.ctx.clearRect(0, 0, this.surface.width, this.surface.height);
+  }
+  retargetFocus(target) {
+    this.focusFrom = this.focus;
+    this.focusTarget = target;
+    this.focusStart = this.focus === target ? -Infinity : clock();
+  }
+  kick() {
+    if (this.motionRaf) return;
+    this.scheduling = true;
+    this.ranSynchronously = false;
+    const id = requestAnimationFrame(this.tick);
+    this.scheduling = false;
+    this.motionRaf = this.ranSynchronously ? 0 : id;
+  }
+  stopMotion() {
+    if (this.motionRaf) cancelAnimationFrame(this.motionRaf);
+    this.motionRaf = 0;
+  }
+  paintHighlight(hover) {
+    const ctx = this.surface.interaction.ctx;
+    ctx.clearRect(0, 0, this.surface.width, this.surface.height);
+    if (hover.draw) hover.draw(ctx);
+    else hover.paint?.(ctx, { focus: 1, glide: 1 });
   }
   destroy() {
     if (this.raf) cancelAnimationFrame(this.raf);
+    this.stopMotion();
     const root = this.surface.root;
     root.removeEventListener("pointermove", this.onMove);
     root.removeEventListener("pointerleave", this.onLeave);

package/dist/interaction/controller.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/interaction/controller.ts"],
-  "sourcesContent": ["/**\n * InteractionController \u2014 the single owner of pointer events for a Surface.\n *\n * Created once per chart instance; handed a fresh `InteractionModel` on every\n * redraw. It throttles pointer moves to one rAF, hit-tests against the current\n * model, paints the highlight onto the interaction canvas, and drives the HTML\n * tooltip. Hover never touches the marks layer.\n */\n\nimport type { Surface } from '../render/surface';\nimport type { ThemeTokens } from '../theme';\nimport { Tooltip } from './tooltip';\nimport type { Hover, InteractionModel, LegendHitRegion } from './types';\nimport type { SelectionValue } from '../spec/selection';\n\n/** How the controller publishes a click/tap selection from the current model. */\nexport interface ControllerSelect {\n  /** Called with the picked value (or `null` when empty space is clicked). */\n  onPick?(value: SelectionValue | null): void;\n  /** Called when an interactive legend swatch is clicked. */\n  onLegendToggle?(hit: LegendHitRegion, event: MouseEvent): void;\n}\n\nfunction resolveLegendHit(model: InteractionModel, px: number, py: number): LegendHitRegion | null {\n  for (const hit of model.legendHits ?? []) {\n    const r = hit.rect;\n    if (px >= r.x && px <= r.x + r.width && py >= r.y && py <= r.y + r.height) return hit;\n  }\n  return null;\n}\n\nexport function eventToSurfacePoint(surface: Surface, event: Pick<PointerEvent, 'clientX' | 'clientY'>): { x: number; y: number } {\n  const rect = surface.root.getBoundingClientRect();\n  const scaleX = rect.width > 0 ? surface.width / rect.width : 1;\n  const scaleY = rect.height > 0 ? surface.height / rect.height : 1;\n  return {\n    x: (event.clientX - rect.left) * scaleX,\n    y: (event.clientY - rect.top) * scaleY,\n  };\n}\n\nexport class InteractionController {\n  private model: InteractionModel | null = null;\n  private tokens: ThemeTokens;\n  private readonly tooltip: Tooltip;\n\n  private raf = 0;\n  private pending: { x: number; y: number } | null = null;\n  private activeKey: string | null = null;\n  private selectCfg: ControllerSelect | null = null;\n  private pickable = false;\n\n  constructor(\n    private readonly surface: Surface,\n    tokens: ThemeTokens,\n  ) {\n    this.tokens = tokens;\n    this.tooltip = new Tooltip(surface.root, tokens);\n    const root = surface.root;\n    root.addEventListener('pointermove', this.onMove);\n    root.addEventListener('pointerleave', this.onLeave);\n    root.addEventListener('pointerdown', this.onMove);\n    root.addEventListener('click', this.onClick);\n  }\n\n  /** Install the model for the current frame (or `null` to disable hover). */\n  setModel(model: InteractionModel | null, tokens: ThemeTokens): void {\n    this.model = model;\n    this.tokens = tokens;\n    this.tooltip.setTokens(tokens);\n    // The per-frame surface.clear() already wiped the interaction canvas and\n    // any prior highlight; drop the active hover so the next move re-resolves.\n    this.activeKey = null;\n    this.pickable = Boolean(model?.pick || model?.legendHits?.length);\n    if (!model) this.tooltip.hide();\n  }\n\n  /** Wire click/tap selection for this chart (or `null` to disable it). */\n  setSelect(cfg: ControllerSelect | null): void {\n    this.selectCfg = cfg;\n  }\n\n  private readonly onMove = (e: PointerEvent): void => {\n    if (!this.model) return;\n    this.pending = eventToSurfacePoint(this.surface, e);\n    if (!this.raf) this.raf = requestAnimationFrame(this.flush);\n  };\n\n  private readonly onLeave = (): void => {\n    if (this.raf) {\n      cancelAnimationFrame(this.raf);\n      this.raf = 0;\n    }\n    this.pending = null;\n    this.clearHover();\n  };\n\n  private readonly onClick = (e: PointerEvent): void => {\n    const cfg = this.selectCfg;\n    const model = this.model;\n    if (!cfg || !model) return;\n    const { x: px, y: py } = eventToSurfacePoint(this.surface, e);\n    const onLegendToggle = cfg.onLegendToggle;\n    const legendHit = onLegendToggle ? resolveLegendHit(model, px, py) : null;\n    if (legendHit && onLegendToggle) {\n      onLegendToggle(legendHit, e);\n      return;\n    }\n    if (model.pick && cfg.onPick) cfg.onPick(model.pick(px, py));\n  };\n\n  private readonly flush = (): void => {\n    this.raf = 0;\n    const pt = this.pending;\n    this.pending = null;\n    if (!pt || !this.model) return;\n\n    const hover = this.model.hitTest(pt.x, pt.y);\n    if (!hover) {\n      this.clearHover();\n      return;\n    }\n    this.render(hover);\n  };\n\n  private render(hover: Hover): void {\n    if (hover.key !== this.activeKey) {\n      this.activeKey = hover.key;\n      this.paintHighlight(hover);\n      this.tooltip.setContent(hover.content);\n    }\n    this.tooltip.place(hover.anchorX, hover.anchorY, this.surface.width, this.surface.height);\n    if (this.selectCfg && this.pickable) this.surface.root.style.cursor = 'pointer';\n  }\n\n  private paintHighlight(hover: Hover): void {\n    const ctx = this.surface.interaction.ctx;\n    ctx.clearRect(0, 0, this.surface.width, this.surface.height);\n    if (hover.draw) hover.draw(ctx);\n  }\n\n  private clearHover(): void {\n    if (this.activeKey === null) return;\n    this.activeKey = null;\n    this.surface.interaction.ctx.clearRect(0, 0, this.surface.width, this.surface.height);\n    this.tooltip.hide();\n    if (this.selectCfg && this.pickable) this.surface.root.style.cursor = '';\n  }\n\n  destroy(): void {\n    if (this.raf) cancelAnimationFrame(this.raf);\n    const root = this.surface.root;\n    root.removeEventListener('pointermove', this.onMove);\n    root.removeEventListener('pointerleave', this.onLeave);\n    root.removeEventListener('pointerdown', this.onMove);\n    root.removeEventListener('click', this.onClick);\n    this.tooltip.destroy();\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * InteractionController \u2014 the single owner of pointer events for a Surface.\n *\n * Created once per chart instance; handed a fresh `InteractionModel` on every\n * redraw. It throttles pointer moves to one rAF, hit-tests against the current\n * model, paints the highlight onto the interaction canvas, and drives the HTML\n * tooltip. Hover never touches the marks layer.\n *\n * Hovers that expose an animated `paint` get a short, retargetable motion loop:\n * focus fades in when the pointer arrives and out when it leaves, and moving\n * between marks glides the highlight from the previous hover to the new one.\n */\n\nimport type { Surface } from '../render/surface';\nimport type { ThemeTokens } from '../theme';\nimport { interactionMotionDisabled } from '../animation/env';\nimport { cubicOut } from '../animation/easing';\nimport { Tooltip } from './tooltip';\nimport type { Hover, InteractionModel, LegendHitRegion } from './types';\nimport type { SelectionValue } from '../spec/selection';\n\n/** Focus fade (ms) when a hover starts or ends. */\nconst FOCUS_MS = 160;\n/** Glide (ms) between consecutive hovers. */\nconst GLIDE_MS = 180;\n\n/** How the controller publishes a click/tap selection from the current model. */\nexport interface ControllerSelect {\n  /** Called with the picked value (or `null` when empty space is clicked). */\n  onPick?(value: SelectionValue | null): void;\n  /** Called when an interactive legend swatch is clicked. */\n  onLegendToggle?(hit: LegendHitRegion, event: MouseEvent): void;\n}\n\nfunction resolveLegendHit(model: InteractionModel, px: number, py: number): LegendHitRegion | null {\n  for (const hit of model.legendHits ?? []) {\n    const r = hit.rect;\n    if (px >= r.x && px <= r.x + r.width && py >= r.y && py <= r.y + r.height) return hit;\n  }\n  return null;\n}\n\nexport function eventToSurfacePoint(surface: Surface, event: Pick<PointerEvent, 'clientX' | 'clientY'>): { x: number; y: number } {\n  const rect = surface.root.getBoundingClientRect();\n  const scaleX = rect.width > 0 ? surface.width / rect.width : 1;\n  const scaleY = rect.height > 0 ? surface.height / rect.height : 1;\n  return {\n    x: (event.clientX - rect.left) * scaleX,\n    y: (event.clientY - rect.top) * scaleY,\n  };\n}\n\nfunction clock(): number {\n  return globalThis.performance?.now() ?? Date.now();\n}\n\nexport class InteractionController {\n  private model: InteractionModel | null = null;\n  private tokens: ThemeTokens;\n  private readonly tooltip: Tooltip;\n\n  private raf = 0;\n  private pending: { x: number; y: number } | null = null;\n  // The last pointer position inside the surface, so a redraw can re-resolve\n  // the hover under a pointer that hasn't moved.\n  private lastPoint: { x: number; y: number } | null = null;\n  private pointerInside = false;\n  private activeKey: string | null = null;\n  private selectCfg: ControllerSelect | null = null;\n  private pickable = false;\n\n  // Animated highlight state. `shown` is the hover being painted (it outlives\n  // `activeKey` while focus fades out); `from` is the hover being glided from.\n  private shown: Hover | null = null;\n  private from: Hover | undefined;\n  private focus = 0;\n  private focusFrom = 0;\n  private focusTarget = 0;\n  private focusStart = 0;\n  private glideStart = 0;\n  private motionRaf = 0;\n  private scheduling = false;\n  private ranSynchronously = false;\n\n  constructor(\n    private readonly surface: Surface,\n    tokens: ThemeTokens,\n  ) {\n    this.tokens = tokens;\n    this.tooltip = new Tooltip(surface.root, tokens);\n    const root = surface.root;\n    root.addEventListener('pointermove', this.onMove);\n    root.addEventListener('pointerleave', this.onLeave);\n    root.addEventListener('pointerdown', this.onMove);\n    root.addEventListener('click', this.onClick);\n  }\n\n  /** Install the model for the current frame (or `null` to disable hover). */\n  setModel(model: InteractionModel | null, tokens: ThemeTokens): void {\n    this.model = model;\n    this.tokens = tokens;\n    this.tooltip.setTokens(tokens);\n    // The per-frame surface.clear() already wiped the interaction canvas and\n    // any prior highlight; drop the active hover so the next move re-resolves.\n    this.activeKey = null;\n    this.stopMotion();\n    this.shown = null;\n    this.from = undefined;\n    this.pickable = Boolean(model?.pick || model?.legendHits?.length);\n    if (!model) {\n      this.focus = 0;\n      this.tooltip.hide();\n      return;\n    }\n    // A redraw under a resting pointer (a click selection, a cross-filter, an\n    // update) re-resolves the hover right away and keeps its focus, instead of\n    // dropping the highlight until the pointer moves again.\n    if (this.pointerInside && this.lastPoint) {\n      this.pending = this.lastPoint;\n      if (!this.raf) this.raf = requestAnimationFrame(this.flush);\n    } else this.focus = 0;\n  }\n\n  /**\n   * Repaint the current hover against the latest frame geometry \u2014 called when an\n   * entrance or update transition settles, so focus drawn mid-animation lands on\n   * the finished marks.\n   */\n  refresh(): void {\n    if (!this.shown || this.activeKey === null || this.motionRaf) return;\n    const ctx = this.surface.interaction.ctx;\n    ctx.clearRect(0, 0, this.surface.width, this.surface.height);\n    if (this.animated(this.shown)) this.shown.paint(ctx, { focus: this.focus, glide: 1 });\n    else this.paintHighlight(this.shown);\n  }\n\n  /** Wire click/tap selection for this chart (or `null` to disable it). */\n  setSelect(cfg: ControllerSelect | null): void {\n    this.selectCfg = cfg;\n  }\n\n  private readonly onMove = (e: PointerEvent): void => {\n    if (!this.model) return;\n    this.pending = eventToSurfacePoint(this.surface, e);\n    this.lastPoint = this.pending;\n    this.pointerInside = true;\n    if (!this.raf) this.raf = requestAnimationFrame(this.flush);\n  };\n\n  private readonly onLeave = (): void => {\n    if (this.raf) {\n      cancelAnimationFrame(this.raf);\n      this.raf = 0;\n    }\n    this.pending = null;\n    this.pointerInside = false;\n    this.lastPoint = null;\n    this.clearHover();\n  };\n\n  private readonly onClick = (e: PointerEvent): void => {\n    const cfg = this.selectCfg;\n    const model = this.model;\n    if (!cfg || !model) return;\n    const { x: px, y: py } = eventToSurfacePoint(this.surface, e);\n    const onLegendToggle = cfg.onLegendToggle;\n    const legendHit = onLegendToggle ? resolveLegendHit(model, px, py) : null;\n    if (legendHit && onLegendToggle) {\n      onLegendToggle(legendHit, e);\n      return;\n    }\n    if (model.pick && cfg.onPick) cfg.onPick(model.pick(px, py));\n  };\n\n  private readonly flush = (): void => {\n    this.raf = 0;\n    const pt = this.pending;\n    this.pending = null;\n    if (!pt || !this.model) return;\n\n    const hover = this.model.hitTest(pt.x, pt.y);\n    if (!hover) {\n      this.clearHover();\n      return;\n    }\n    this.render(hover);\n  };\n\n  private render(hover: Hover): void {\n    if (hover.key !== this.activeKey) {\n      this.activeKey = hover.key;\n      this.tooltip.setContent(hover.content);\n      this.show(hover);\n    }\n    this.tooltip.place(hover.anchorX, hover.anchorY, this.surface.width, this.surface.height);\n    if (this.selectCfg && this.pickable) this.surface.root.style.cursor = 'pointer';\n  }\n\n  private animated(hover: Hover | null): hover is Hover & Required<Pick<Hover, 'paint'>> {\n    return Boolean(hover?.paint) && !interactionMotionDisabled();\n  }\n\n  private show(hover: Hover): void {\n    if (!this.animated(hover)) {\n      this.stopMotion();\n      this.shown = hover;\n      this.from = undefined;\n      this.focus = 1;\n      this.paintHighlight(hover);\n      return;\n    }\n    // Glide from whatever is on screen (including a hover still fading out).\n    const previous = this.shown && this.focus > 0 && this.animated(this.shown) ? this.shown : undefined;\n    this.from = previous;\n    this.glideStart = clock();\n    this.shown = hover;\n    this.retargetFocus(1);\n    this.kick();\n  }\n\n  private clearHover(): void {\n    if (this.activeKey === null) {\n      if (!this.shown) this.focus = 0;\n      // A redraw resets the active key while the tooltip may still be up (the\n      // pointer was resting); if the re-check under it finds nothing, it must go.\n      this.tooltip.hide();\n      if (this.selectCfg && this.pickable) this.surface.root.style.cursor = '';\n      return;\n    }\n    this.activeKey = null;\n    this.tooltip.hide();\n    if (this.selectCfg && this.pickable) this.surface.root.style.cursor = '';\n    if (this.animated(this.shown) && this.focus > 0) {\n      this.retargetFocus(0);\n      this.kick();\n      return;\n    }\n    this.stopMotion();\n    this.shown = null;\n    this.from = undefined;\n    this.focus = 0;\n    this.surface.interaction.ctx.clearRect(0, 0, this.surface.width, this.surface.height);\n  }\n\n  private retargetFocus(target: number): void {\n    this.focusFrom = this.focus;\n    this.focusTarget = target;\n    // Already there: nothing to fade, so the loop only runs for a glide.\n    this.focusStart = this.focus === target ? -Infinity : clock();\n  }\n\n  private kick(): void {\n    if (this.motionRaf) return;\n    this.scheduling = true;\n    this.ranSynchronously = false;\n    const id = requestAnimationFrame(this.tick);\n    this.scheduling = false;\n    // When the callback already ran inside requestAnimationFrame, no frame is pending.\n    this.motionRaf = this.ranSynchronously ? 0 : id;\n  }\n\n  private stopMotion(): void {\n    if (this.motionRaf) cancelAnimationFrame(this.motionRaf);\n    this.motionRaf = 0;\n  }\n\n  private readonly tick = (): void => {\n    // A synchronous requestAnimationFrame (tests, some embedded hosts) can't\n    // animate; settle on the final state rather than recursing frame by frame.\n    const settle = this.scheduling;\n    if (settle) this.ranSynchronously = true;\n    this.motionRaf = 0;\n    const now = clock();\n    const focusT = settle ? 1 : Math.min(1, (now - this.focusStart) / FOCUS_MS);\n    const glideT = settle || !this.from ? 1 : Math.min(1, (now - this.glideStart) / GLIDE_MS);\n    this.focus = this.focusFrom + (this.focusTarget - this.focusFrom) * cubicOut(focusT);\n    const ctx = this.surface.interaction.ctx;\n    ctx.clearRect(0, 0, this.surface.width, this.surface.height);\n    const hover = this.shown;\n    if (hover?.paint && this.focus > 0) {\n      hover.paint(ctx, { focus: this.focus, glide: this.from ? cubicOut(glideT) : 1, from: this.from });\n    }\n    if (focusT >= 1 && glideT >= 1) {\n      this.from = undefined;\n      if (this.focusTarget === 0) this.shown = null;\n      return;\n    }\n    if (!settle) this.kick();\n  };\n\n  private paintHighlight(hover: Hover): void {\n    const ctx = this.surface.interaction.ctx;\n    ctx.clearRect(0, 0, this.surface.width, this.surface.height);\n    if (hover.draw) hover.draw(ctx);\n    else hover.paint?.(ctx, { focus: 1, glide: 1 });\n  }\n\n  destroy(): void {\n    if (this.raf) cancelAnimationFrame(this.raf);\n    this.stopMotion();\n    const root = this.surface.root;\n    root.removeEventListener('pointermove', this.onMove);\n    root.removeEventListener('pointerleave', this.onLeave);\n    root.removeEventListener('pointerdown', this.onMove);\n    root.removeEventListener('click', this.onClick);\n    this.tooltip.destroy();\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/interaction/focus.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Hover focus — recede everything except the marks under the pointer.
+ *
+ * The interaction canvas sits above the marks layer, so focus is painted as a
+ * translucent veil of the chart background over the plot (dimming every mark
+ * beneath it) with the focused subset of the frame's mark geometry repainted on
+ * top at full strength. Nothing touches the marks layer or the render report.
+ */
+import type { CartesianModel } from '../runtime/cartesian.js';
+import { type CartesianGeometry } from '../charts/geometry.js';
+export { FOCUS_VEIL, hoverFocusEnabled, paintCutoutVeil, paintFocusVeil } from './veil.js';
+/** What a hover focuses: a category (bar group), a series, or both. */
+export interface FocusTarget {
+    category?: string;
+    series?: string;
+}
+/** The subset of `geometry` a hover focuses, or null when nothing would be emphasized. */
+export declare function focusSubset(geometry: CartesianGeometry | undefined, target: FocusTarget | null): CartesianGeometry | null;
+/** Repaint focused geometry onto `ctx` (the interaction layer) at `alpha`. */
+export declare function paintFocusedGeometry(ctx: CanvasRenderingContext2D, model: CartesianModel, geometry: CartesianGeometry, alpha?: number): void;
+/** The color a veil should use for this chart: its background. */
+export declare function focusVeilColor(model: CartesianModel): string;
+//# sourceMappingURL=focus.d.ts.map

package/dist/interaction/focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../src/interaction/focus.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAExF,uEAAuE;AACvE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,0FAA0F;AAC1F,wBAAgB,WAAW,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,iBAAiB,GAAG,IAAI,CA6BzH;AAmBD,8EAA8E;AAC9E,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,SAAI,GACR,IAAI,CAIN;AAED,kEAAkE;AAClE,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAE5D"}

package/dist/interaction/focus.js

@@ -0,0 +1,65 @@
+import { paintGeometry } from "../charts/geometry.js";
+import { FOCUS_VEIL, hoverFocusEnabled, paintCutoutVeil, paintFocusVeil } from "./veil.js";
+function focusSubset(geometry, target) {
+  if (!geometry || !target) return null;
+  const { category, series } = target;
+  switch (geometry.kind) {
+    case "bar": {
+      const marks = geometry.marks.filter(
+        (mark) => (category == null || mark.category === category) && (series == null || mark.seriesKey === series)
+      );
+      return marks.length ? { ...geometry, marks } : null;
+    }
+    case "line": {
+      const kept = geometry.series.filter((s) => s.series.key === series);
+      return kept.length ? { ...geometry, series: kept } : null;
+    }
+    case "area": {
+      const bands = geometry.bands.filter((band) => band.series.key === series);
+      return bands.length ? { ...geometry, bands } : null;
+    }
+    case "scatter": {
+      const points = geometry.points.filter((point) => point.seriesKey === series);
+      return points.length ? { ...geometry, points } : null;
+    }
+    case "box": {
+      const marks = geometry.marks.filter(
+        (mark) => (category == null || mark.category === category) && (series == null || mark.seriesKey === series)
+      );
+      return marks.length ? { ...geometry, marks } : null;
+    }
+  }
+}
+function fadeGeometry(geometry, alpha) {
+  if (alpha >= 1) return geometry;
+  switch (geometry.kind) {
+    case "bar":
+      return { ...geometry, marks: geometry.marks.map((mark) => ({ ...mark, alpha: mark.alpha * alpha })) };
+    case "line":
+      return { ...geometry, series: geometry.series.map((s) => ({ ...s, alpha: s.alpha * alpha })) };
+    case "area":
+      return { ...geometry, bands: geometry.bands.map((band) => ({ ...band, alpha: band.alpha * alpha })) };
+    case "scatter":
+      return { ...geometry, points: geometry.points.map((point) => ({ ...point, alpha: point.alpha * alpha })) };
+    case "box":
+      return { ...geometry, marks: geometry.marks.map((mark) => ({ ...mark, alpha: mark.alpha * alpha })) };
+  }
+}
+function paintFocusedGeometry(ctx, model, geometry, alpha = 1) {
+  if (!(alpha > 0)) return;
+  const surface = { marks: { ctx } };
+  paintGeometry(surface, model, fadeGeometry(geometry, Math.min(1, alpha)));
+}
+function focusVeilColor(model) {
+  return model.spec.background ?? model.tokens.color.background;
+}
+export {
+  FOCUS_VEIL,
+  focusSubset,
+  focusVeilColor,
+  hoverFocusEnabled,
+  paintCutoutVeil,
+  paintFocusVeil,
+  paintFocusedGeometry
+};
+//# sourceMappingURL=focus.js.map

package/dist/interaction/focus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/interaction/focus.ts"],
+  "sourcesContent": ["/**\n * Hover focus \u2014 recede everything except the marks under the pointer.\n *\n * The interaction canvas sits above the marks layer, so focus is painted as a\n * translucent veil of the chart background over the plot (dimming every mark\n * beneath it) with the focused subset of the frame's mark geometry repainted on\n * top at full strength. Nothing touches the marks layer or the render report.\n */\n\nimport type { Surface } from '../render/surface';\nimport type { CartesianModel } from '../runtime/cartesian';\nimport { paintGeometry, type CartesianGeometry } from '../charts/geometry';\n\nexport { FOCUS_VEIL, hoverFocusEnabled, paintCutoutVeil, paintFocusVeil } from './veil';\n\n/** What a hover focuses: a category (bar group), a series, or both. */\nexport interface FocusTarget {\n  category?: string;\n  series?: string;\n}\n\n/** The subset of `geometry` a hover focuses, or null when nothing would be emphasized. */\nexport function focusSubset(geometry: CartesianGeometry | undefined, target: FocusTarget | null): CartesianGeometry | null {\n  if (!geometry || !target) return null;\n  const { category, series } = target;\n  switch (geometry.kind) {\n    case 'bar': {\n      const marks = geometry.marks.filter(\n        (mark) => (category == null || mark.category === category) && (series == null || mark.seriesKey === series),\n      );\n      return marks.length ? { ...geometry, marks } : null;\n    }\n    case 'line': {\n      const kept = geometry.series.filter((s) => s.series.key === series);\n      return kept.length ? { ...geometry, series: kept } : null;\n    }\n    case 'area': {\n      const bands = geometry.bands.filter((band) => band.series.key === series);\n      return bands.length ? { ...geometry, bands } : null;\n    }\n    case 'scatter': {\n      const points = geometry.points.filter((point) => point.seriesKey === series);\n      return points.length ? { ...geometry, points } : null;\n    }\n    case 'box': {\n      const marks = geometry.marks.filter(\n        (mark) => (category == null || mark.category === category) && (series == null || mark.seriesKey === series),\n      );\n      return marks.length ? { ...geometry, marks } : null;\n    }\n  }\n}\n\n/** A copy of `geometry` with every mark's opacity scaled by `alpha`. */\nfunction fadeGeometry(geometry: CartesianGeometry, alpha: number): CartesianGeometry {\n  if (alpha >= 1) return geometry;\n  switch (geometry.kind) {\n    case 'bar':\n      return { ...geometry, marks: geometry.marks.map((mark) => ({ ...mark, alpha: mark.alpha * alpha })) };\n    case 'line':\n      return { ...geometry, series: geometry.series.map((s) => ({ ...s, alpha: s.alpha * alpha })) };\n    case 'area':\n      return { ...geometry, bands: geometry.bands.map((band) => ({ ...band, alpha: band.alpha * alpha })) };\n    case 'scatter':\n      return { ...geometry, points: geometry.points.map((point) => ({ ...point, alpha: point.alpha * alpha })) };\n    case 'box':\n      return { ...geometry, marks: geometry.marks.map((mark) => ({ ...mark, alpha: mark.alpha * alpha })) };\n  }\n}\n\n/** Repaint focused geometry onto `ctx` (the interaction layer) at `alpha`. */\nexport function paintFocusedGeometry(\n  ctx: CanvasRenderingContext2D,\n  model: CartesianModel,\n  geometry: CartesianGeometry,\n  alpha = 1,\n): void {\n  if (!(alpha > 0)) return;\n  const surface = { marks: { ctx } } as unknown as Surface;\n  paintGeometry(surface, model, fadeGeometry(geometry, Math.min(1, alpha)));\n}\n\n/** The color a veil should use for this chart: its background. */\nexport function focusVeilColor(model: CartesianModel): string {\n  return model.spec.background ?? model.tokens.color.background;\n}\n"],
+  "mappings": "AAWA,SAAS,qBAA6C;AAEtD,SAAS,YAAY,mBAAmB,iBAAiB,sBAAsB;AASxE,SAAS,YAAY,UAAyC,QAAsD;AACzH,MAAI,CAAC,YAAY,CAAC,OAAQ,QAAO;AACjC,QAAM,EAAE,UAAU,OAAO,IAAI;AAC7B,UAAQ,SAAS,MAAM;AAAA,IACrB,KAAK,OAAO;AACV,YAAM,QAAQ,SAAS,MAAM;AAAA,QAC3B,CAAC,UAAU,YAAY,QAAQ,KAAK,aAAa,cAAc,UAAU,QAAQ,KAAK,cAAc;AAAA,MACtG;AACA,aAAO,MAAM,SAAS,EAAE,GAAG,UAAU,MAAM,IAAI;AAAA,IACjD;AAAA,IACA,KAAK,QAAQ;AACX,YAAM,OAAO,SAAS,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,QAAQ,MAAM;AAClE,aAAO,KAAK,SAAS,EAAE,GAAG,UAAU,QAAQ,KAAK,IAAI;AAAA,IACvD;AAAA,IACA,KAAK,QAAQ;AACX,YAAM,QAAQ,SAAS,MAAM,OAAO,CAAC,SAAS,KAAK,OAAO,QAAQ,MAAM;AACxE,aAAO,MAAM,SAAS,EAAE,GAAG,UAAU,MAAM,IAAI;AAAA,IACjD;AAAA,IACA,KAAK,WAAW;AACd,YAAM,SAAS,SAAS,OAAO,OAAO,CAAC,UAAU,MAAM,cAAc,MAAM;AAC3E,aAAO,OAAO,SAAS,EAAE,GAAG,UAAU,OAAO,IAAI;AAAA,IACnD;AAAA,IACA,KAAK,OAAO;AACV,YAAM,QAAQ,SAAS,MAAM;AAAA,QAC3B,CAAC,UAAU,YAAY,QAAQ,KAAK,aAAa,cAAc,UAAU,QAAQ,KAAK,cAAc;AAAA,MACtG;AACA,aAAO,MAAM,SAAS,EAAE,GAAG,UAAU,MAAM,IAAI;AAAA,IACjD;AAAA,EACF;AACF;AAGA,SAAS,aAAa,UAA6B,OAAkC;AACnF,MAAI,SAAS,EAAG,QAAO;AACvB,UAAQ,SAAS,MAAM;AAAA,IACrB,KAAK;AACH,aAAO,EAAE,GAAG,UAAU,OAAO,SAAS,MAAM,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,OAAO,KAAK,QAAQ,MAAM,EAAE,EAAE;AAAA,IACtG,KAAK;AACH,aAAO,EAAE,GAAG,UAAU,QAAQ,SAAS,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,EAAE,QAAQ,MAAM,EAAE,EAAE;AAAA,IAC/F,KAAK;AACH,aAAO,EAAE,GAAG,UAAU,OAAO,SAAS,MAAM,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,OAAO,KAAK,QAAQ,MAAM,EAAE,EAAE;AAAA,IACtG,KAAK;AACH,aAAO,EAAE,GAAG,UAAU,QAAQ,SAAS,OAAO,IAAI,CAAC,WAAW,EAAE,GAAG,OAAO,OAAO,MAAM,QAAQ,MAAM,EAAE,EAAE;AAAA,IAC3G,KAAK;AACH,aAAO,EAAE,GAAG,UAAU,OAAO,SAAS,MAAM,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,OAAO,KAAK,QAAQ,MAAM,EAAE,EAAE;AAAA,EACxG;AACF;AAGO,SAAS,qBACd,KACA,OACA,UACA,QAAQ,GACF;AACN,MAAI,EAAE,QAAQ,GAAI;AAClB,QAAM,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE;AACjC,gBAAc,SAAS,OAAO,aAAa,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC,CAAC;AAC1E;AAGO,SAAS,eAAe,OAA+B;AAC5D,SAAO,MAAM,KAAK,cAAc,MAAM,OAAO,MAAM;AACrD;",
+  "names": []
+}

package/dist/interaction/tooltip.d.ts

@@ -11,9 +11,15 @@ export declare class Tooltip {
     private readonly el;
     private tokens;
     private visible;
+    private parkTimer;
     constructor(root: HTMLElement, tokens: ThemeTokens);
     setTokens(tokens: ThemeTokens): void;
     private applyShell;
+    /**
+     * The card glides between anchors (decelerating) and fades/scales in and out.
+     * Reduced motion keeps only a short fade.
+     */
+    private motion;
     /** Replace the card contents from structured data. */
     setContent(content: TooltipContent): void;
     /**

package/dist/interaction/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/interaction/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAK9C,qBAAa,OAAO;IAMhB,OAAO,CAAC,QAAQ,CAAC,IAAI;IALvB,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAiB;IACpC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,OAAO,CAAS;gBAGL,IAAI,EAAE,WAAW,EAClC,MAAM,EAAE,WAAW;IAQrB,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAKpC,OAAO,CAAC,UAAU;IA2BlB,sDAAsD;IACtD,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA0DzC;;;OAGG;IACH,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAsBjF,IAAI,IAAI,IAAI;IAOZ,OAAO,IAAI,IAAI;CAGhB"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/interaction/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAU9C,qBAAa,OAAO;IAOhB,OAAO,CAAC,QAAQ,CAAC,IAAI;IANvB,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAiB;IACpC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAA4C;gBAG1C,IAAI,EAAE,WAAW,EAClC,MAAM,EAAE,WAAW;IAQrB,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAKpC,OAAO,CAAC,UAAU;IA4BlB;;;OAGG;IACH,OAAO,CAAC,MAAM;IAMd,sDAAsD;IACtD,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA2DzC;;;OAGG;IACH,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IA8BjF,IAAI,IAAI,IAAI;IAWZ,OAAO,IAAI,IAAI;CAIhB"}

package/dist/interaction/tooltip.js

@@ -2,14 +2,19 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { createDiv, setStyle } from "../render/dom.js";
+import { interactionMotionDisabled } from "../animation/env.js";
 const OFFSET = 14;
 const EDGE_PAD = 8;
+const GLIDE = "cubic-bezier(0.22, 1, 0.36, 1)";
+const PARK_DELAY = 220;
+const PARKED = "translate(-9999px, -9999px)";
 class Tooltip {
   constructor(root, tokens) {
     __publicField(this, "root", root);
     __publicField(this, "el");
     __publicField(this, "tokens");
     __publicField(this, "visible", false);
+    __publicField(this, "parkTimer");
     this.tokens = tokens;
     this.el = createDiv("graphein-tooltip");
     this.applyShell();
@@ -32,17 +37,25 @@ class Tooltip {
       background: t.color.surface,
       color: t.color.text,
       border: `1px solid ${t.color.border}`,
-      borderRadius: `${t.radius.md}px`,
-      boxShadow: t.dark ? "0 6px 20px rgba(0,0,0,0.45)" : "0 6px 18px rgba(15,23,42,0.12)",
+      borderRadius: `${t.radius.lg}px`,
+      boxShadow: t.dark ? "0 1px 2px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.5)" : "0 1px 2px rgba(15,23,42,0.06), 0 10px 28px rgba(15,23,42,0.14)",
       font: `${t.font.size.small}px/1.45 ${t.font.family}`,
       fontWeight: String(t.font.weight.normal),
-      opacity: "0",
-      transform: "translate(-9999px, -9999px)",
-      transition: "opacity 90ms ease",
+      opacity: this.visible ? "1" : "0",
+      transform: this.visible ? this.el.style.transform : PARKED,
+      transformOrigin: "top left",
+      transition: this.motion(),
       zIndex: "20",
       whiteSpace: "nowrap"
     });
   }
+  /**
+   * The card glides between anchors (decelerating) and fades/scales in and out.
+   * Reduced motion keeps only a short fade.
+   */
+  motion() {
+    return interactionMotionDisabled() ? "opacity 120ms ease" : `opacity 140ms ease, transform 200ms ${GLIDE}, scale 200ms ${GLIDE}`;
+  }
   /** Replace the card contents from structured data. */
   setContent(content) {
     const t = this.tokens;
@@ -69,10 +82,11 @@ class Tooltip {
       if (row.swatch) {
         const chip = createDiv("graphein-tooltip-swatch", {
           flex: "0 0 auto",
-          width: "9px",
-          height: "9px",
-          borderRadius: "2px",
-          background: row.swatch
+          width: "8px",
+          height: "8px",
+          borderRadius: "2.5px",
+          background: row.swatch,
+          boxShadow: `0 0 0 1px ${t.dark ? "rgba(255,255,255,0.12)" : "rgba(15,23,42,0.08)"}`
         });
         line.appendChild(chip);
       }
@@ -109,20 +123,31 @@ class Tooltip {
     let top = anchorY + OFFSET;
     if (top + h > surfaceH - EDGE_PAD) top = anchorY - OFFSET - h;
     top = Math.max(EDGE_PAD, Math.min(top, surfaceH - h - EDGE_PAD));
-    setStyle(this.el, { transform: `translate(${Math.round(left)}px, ${Math.round(top)}px)` });
-    if (!this.visible) {
-      this.visible = true;
-      void this.el.offsetWidth;
-      this.el.style.opacity = "1";
+    const transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+    if (this.parkTimer !== void 0) {
+      clearTimeout(this.parkTimer);
+      this.parkTimer = void 0;
+    }
+    if (this.visible) {
+      setStyle(this.el, { transform });
+      return;
     }
+    this.visible = true;
+    setStyle(this.el, { transition: "none", transform, scale: "0.97" });
+    void this.el.offsetWidth;
+    setStyle(this.el, { transition: this.motion(), opacity: "1", scale: "1" });
   }
   hide() {
     if (!this.visible) return;
     this.visible = false;
-    this.el.style.opacity = "0";
-    this.el.style.transform = "translate(-9999px, -9999px)";
+    setStyle(this.el, { opacity: "0", scale: "0.97" });
+    this.parkTimer = setTimeout(() => {
+      this.parkTimer = void 0;
+      if (!this.visible) this.el.style.transform = PARKED;
+    }, PARK_DELAY);
   }
   destroy() {
+    if (this.parkTimer !== void 0) clearTimeout(this.parkTimer);
     this.el.remove();
   }
 }

package/dist/interaction/tooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/interaction/tooltip.ts"],
-  "sourcesContent": ["/**\n * The hover tooltip \u2014 a flat, themed HTML card the controller positions next to\n * the cursor. It lives as a direct child of the Surface root (a sibling of the\n * overlay layer) so the per-frame `surface.clear()` never wipes it; the\n * controller owns its full lifecycle.\n */\n\nimport type { ThemeTokens } from '../theme';\nimport { createDiv, setStyle } from '../render/dom';\nimport type { TooltipContent } from './types';\n\nconst OFFSET = 14;\nconst EDGE_PAD = 8;\n\nexport class Tooltip {\n  private readonly el: HTMLDivElement;\n  private tokens: ThemeTokens;\n  private visible = false;\n\n  constructor(\n    private readonly root: HTMLElement,\n    tokens: ThemeTokens,\n  ) {\n    this.tokens = tokens;\n    this.el = createDiv('graphein-tooltip');\n    this.applyShell();\n    this.root.appendChild(this.el);\n  }\n\n  setTokens(tokens: ThemeTokens): void {\n    this.tokens = tokens;\n    this.applyShell();\n  }\n\n  private applyShell(): void {\n    const t = this.tokens;\n    setStyle(this.el, {\n      position: 'absolute',\n      top: '0',\n      left: '0',\n      pointerEvents: 'none',\n      boxSizing: 'border-box',\n      maxWidth: '280px',\n      padding: `${t.spacing.sm}px ${t.spacing.md}px`,\n      background: t.color.surface,\n      color: t.color.text,\n      border: `1px solid ${t.color.border}`,\n      borderRadius: `${t.radius.md}px`,\n      boxShadow: t.dark\n        ? '0 6px 20px rgba(0,0,0,0.45)'\n        : '0 6px 18px rgba(15,23,42,0.12)',\n      font: `${t.font.size.small}px/1.45 ${t.font.family}`,\n      fontWeight: String(t.font.weight.normal),\n      opacity: '0',\n      transform: 'translate(-9999px, -9999px)',\n      transition: 'opacity 90ms ease',\n      zIndex: '20',\n      whiteSpace: 'nowrap',\n    });\n  }\n\n  /** Replace the card contents from structured data. */\n  setContent(content: TooltipContent): void {\n    const t = this.tokens;\n    this.el.replaceChildren();\n\n    if (content.title) {\n      const head = createDiv('graphein-tooltip-title', {\n        fontWeight: String(t.font.weight.bold),\n        fontSize: `${t.font.size.base}px`,\n        color: t.color.text,\n        marginBottom: content.rows.length ? `${t.spacing.xs}px` : '0',\n      });\n      head.textContent = content.title;\n      this.el.appendChild(head);\n    }\n\n    for (const row of content.rows) {\n      const line = createDiv('graphein-tooltip-row', {\n        display: 'flex',\n        alignItems: 'center',\n        gap: `${t.spacing.sm}px`,\n        padding: '1px 0',\n        color: row.muted ? t.color.textMuted : t.color.text,\n        fontWeight: String(row.strong ? t.font.weight.bold : t.font.weight.normal),\n      });\n\n      if (row.swatch) {\n        const chip = createDiv('graphein-tooltip-swatch', {\n          flex: '0 0 auto',\n          width: '9px',\n          height: '9px',\n          borderRadius: '2px',\n          background: row.swatch,\n        });\n        line.appendChild(chip);\n      }\n\n      const label = createDiv('graphein-tooltip-label', {\n        flex: '1 1 auto',\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        paddingRight: `${t.spacing.md}px`,\n      });\n      label.textContent = row.label;\n      line.appendChild(label);\n\n      const value = createDiv('graphein-tooltip-value', {\n        flex: '0 0 auto',\n        marginLeft: 'auto',\n        fontVariantNumeric: 'tabular-nums',\n        fontWeight: String(row.strong ? t.font.weight.bold : t.font.weight.medium),\n      });\n      value.textContent = row.value;\n      line.appendChild(value);\n\n      this.el.appendChild(line);\n    }\n  }\n\n  /**\n   * Position the card near (anchorX, anchorY) in CSS px, flipping away from the\n   * surface edges so it never clips. `surfaceW/H` bound the placement.\n   */\n  place(anchorX: number, anchorY: number, surfaceW: number, surfaceH: number): void {\n    const rect = this.el.getBoundingClientRect();\n    const w = rect.width || this.el.offsetWidth;\n    const h = rect.height || this.el.offsetHeight;\n\n    let left = anchorX + OFFSET;\n    if (left + w > surfaceW - EDGE_PAD) left = anchorX - OFFSET - w;\n    left = Math.max(EDGE_PAD, Math.min(left, surfaceW - w - EDGE_PAD));\n\n    let top = anchorY + OFFSET;\n    if (top + h > surfaceH - EDGE_PAD) top = anchorY - OFFSET - h;\n    top = Math.max(EDGE_PAD, Math.min(top, surfaceH - h - EDGE_PAD));\n\n    setStyle(this.el, { transform: `translate(${Math.round(left)}px, ${Math.round(top)}px)` });\n    if (!this.visible) {\n      this.visible = true;\n      // Force the transform to apply before fading in (avoids a corner slide).\n      void this.el.offsetWidth;\n      this.el.style.opacity = '1';\n    }\n  }\n\n  hide(): void {\n    if (!this.visible) return;\n    this.visible = false;\n    this.el.style.opacity = '0';\n    this.el.style.transform = 'translate(-9999px, -9999px)';\n  }\n\n  destroy(): void {\n    this.el.remove();\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * The hover tooltip \u2014 a flat, themed HTML card the controller positions next to\n * the cursor. It lives as a direct child of the Surface root (a sibling of the\n * overlay layer) so the per-frame `surface.clear()` never wipes it; the\n * controller owns its full lifecycle.\n */\n\nimport type { ThemeTokens } from '../theme';\nimport { createDiv, setStyle } from '../render/dom';\nimport { interactionMotionDisabled } from '../animation/env';\nimport type { TooltipContent } from './types';\n\nconst OFFSET = 14;\nconst EDGE_PAD = 8;\n/** Decelerating glide: quick to respond, soft to settle. */\nconst GLIDE = 'cubic-bezier(0.22, 1, 0.36, 1)';\n/** How long a hidden card lingers (fading) before it is parked off-surface. */\nconst PARK_DELAY = 220;\nconst PARKED = 'translate(-9999px, -9999px)';\n\nexport class Tooltip {\n  private readonly el: HTMLDivElement;\n  private tokens: ThemeTokens;\n  private visible = false;\n  private parkTimer: ReturnType<typeof setTimeout> | undefined;\n\n  constructor(\n    private readonly root: HTMLElement,\n    tokens: ThemeTokens,\n  ) {\n    this.tokens = tokens;\n    this.el = createDiv('graphein-tooltip');\n    this.applyShell();\n    this.root.appendChild(this.el);\n  }\n\n  setTokens(tokens: ThemeTokens): void {\n    this.tokens = tokens;\n    this.applyShell();\n  }\n\n  private applyShell(): void {\n    const t = this.tokens;\n    setStyle(this.el, {\n      position: 'absolute',\n      top: '0',\n      left: '0',\n      pointerEvents: 'none',\n      boxSizing: 'border-box',\n      maxWidth: '280px',\n      padding: `${t.spacing.sm}px ${t.spacing.md}px`,\n      background: t.color.surface,\n      color: t.color.text,\n      border: `1px solid ${t.color.border}`,\n      borderRadius: `${t.radius.lg}px`,\n      boxShadow: t.dark\n        ? '0 1px 2px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.5)'\n        : '0 1px 2px rgba(15,23,42,0.06), 0 10px 28px rgba(15,23,42,0.14)',\n      font: `${t.font.size.small}px/1.45 ${t.font.family}`,\n      fontWeight: String(t.font.weight.normal),\n      opacity: this.visible ? '1' : '0',\n      transform: this.visible ? this.el.style.transform : PARKED,\n      transformOrigin: 'top left',\n      transition: this.motion(),\n      zIndex: '20',\n      whiteSpace: 'nowrap',\n    });\n  }\n\n  /**\n   * The card glides between anchors (decelerating) and fades/scales in and out.\n   * Reduced motion keeps only a short fade.\n   */\n  private motion(): string {\n    return interactionMotionDisabled()\n      ? 'opacity 120ms ease'\n      : `opacity 140ms ease, transform 200ms ${GLIDE}, scale 200ms ${GLIDE}`;\n  }\n\n  /** Replace the card contents from structured data. */\n  setContent(content: TooltipContent): void {\n    const t = this.tokens;\n    this.el.replaceChildren();\n\n    if (content.title) {\n      const head = createDiv('graphein-tooltip-title', {\n        fontWeight: String(t.font.weight.bold),\n        fontSize: `${t.font.size.base}px`,\n        color: t.color.text,\n        marginBottom: content.rows.length ? `${t.spacing.xs}px` : '0',\n      });\n      head.textContent = content.title;\n      this.el.appendChild(head);\n    }\n\n    for (const row of content.rows) {\n      const line = createDiv('graphein-tooltip-row', {\n        display: 'flex',\n        alignItems: 'center',\n        gap: `${t.spacing.sm}px`,\n        padding: '1px 0',\n        color: row.muted ? t.color.textMuted : t.color.text,\n        fontWeight: String(row.strong ? t.font.weight.bold : t.font.weight.normal),\n      });\n\n      if (row.swatch) {\n        const chip = createDiv('graphein-tooltip-swatch', {\n          flex: '0 0 auto',\n          width: '8px',\n          height: '8px',\n          borderRadius: '2.5px',\n          background: row.swatch,\n          boxShadow: `0 0 0 1px ${t.dark ? 'rgba(255,255,255,0.12)' : 'rgba(15,23,42,0.08)'}`,\n        });\n        line.appendChild(chip);\n      }\n\n      const label = createDiv('graphein-tooltip-label', {\n        flex: '1 1 auto',\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        paddingRight: `${t.spacing.md}px`,\n      });\n      label.textContent = row.label;\n      line.appendChild(label);\n\n      const value = createDiv('graphein-tooltip-value', {\n        flex: '0 0 auto',\n        marginLeft: 'auto',\n        fontVariantNumeric: 'tabular-nums',\n        fontWeight: String(row.strong ? t.font.weight.bold : t.font.weight.medium),\n      });\n      value.textContent = row.value;\n      line.appendChild(value);\n\n      this.el.appendChild(line);\n    }\n  }\n\n  /**\n   * Position the card near (anchorX, anchorY) in CSS px, flipping away from the\n   * surface edges so it never clips. `surfaceW/H` bound the placement.\n   */\n  place(anchorX: number, anchorY: number, surfaceW: number, surfaceH: number): void {\n    const rect = this.el.getBoundingClientRect();\n    const w = rect.width || this.el.offsetWidth;\n    const h = rect.height || this.el.offsetHeight;\n\n    let left = anchorX + OFFSET;\n    if (left + w > surfaceW - EDGE_PAD) left = anchorX - OFFSET - w;\n    left = Math.max(EDGE_PAD, Math.min(left, surfaceW - w - EDGE_PAD));\n\n    let top = anchorY + OFFSET;\n    if (top + h > surfaceH - EDGE_PAD) top = anchorY - OFFSET - h;\n    top = Math.max(EDGE_PAD, Math.min(top, surfaceH - h - EDGE_PAD));\n\n    const transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;\n    if (this.parkTimer !== undefined) {\n      clearTimeout(this.parkTimer);\n      this.parkTimer = undefined;\n    }\n    if (this.visible) {\n      setStyle(this.el, { transform });\n      return;\n    }\n    this.visible = true;\n    // Appear in place (no glide from wherever the card was parked), then\n    // re-enable motion so later moves glide and the card eases in.\n    setStyle(this.el, { transition: 'none', transform, scale: '0.97' });\n    void this.el.offsetWidth;\n    setStyle(this.el, { transition: this.motion(), opacity: '1', scale: '1' });\n  }\n\n  hide(): void {\n    if (!this.visible) return;\n    this.visible = false;\n    setStyle(this.el, { opacity: '0', scale: '0.97' });\n    // Fade out in place, then park the card off-surface once it's invisible.\n    this.parkTimer = setTimeout(() => {\n      this.parkTimer = undefined;\n      if (!this.visible) this.el.style.transform = PARKED;\n    }, PARK_DELAY);\n  }\n\n  destroy(): void {\n    if (this.parkTimer !== undefined) clearTimeout(this.parkTimer);\n    this.el.remove();\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/interaction/types.d.ts

@@ -28,6 +28,18 @@ export interface TooltipContent {
     title?: string;
     rows: TooltipRow[];
 }
+/**
+ * Animation state the controller hands to {@link Hover.paint} each frame.
+ * `focus` fades 0→1 when a hover starts and back to 0 when the pointer leaves;
+ * `glide` runs 0→1 when the hover moves from `from` (the previously shown hover
+ * of the same frame) to this one, so crosshairs and markers can travel instead
+ * of jumping. Both are already eased.
+ */
+export interface HoverPaintState {
+    focus: number;
+    glide: number;
+    from?: Hover;
+}
 /** The resolved hover under the cursor. */
 export interface Hover {
     /**
@@ -44,6 +56,13 @@ export interface Hover {
      * already-cleared interaction context. Coordinates are CSS px.
      */
     draw?(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Animated alternative to {@link draw}: paint the highlight for one frame of
+     * the controller's focus/glide animation onto the cleared interaction
+     * context. When present it is preferred over `draw` (and `draw` is used when
+     * motion is reduced).
+     */
+    paint?(ctx: CanvasRenderingContext2D, state: HoverPaintState): void;
 }
 /** A click target for an interactive legend item. */
 export interface LegendHitRegion {

package/dist/interaction/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/interaction/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,kCAAkC;AAClC,MAAM,WAAW,UAAU;IACzB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,4EAA4E;AAC5E,MAAM,WAAW,cAAc;IAC7B,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;CACpB;AAED,2CAA2C;AAC3C,MAAM,WAAW,KAAK;IACpB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,qEAAqE;IACrE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,CAAC,GAAG,EAAE,wBAAwB,GAAG,IAAI,CAAC;CAC5C;AAED,qDAAqD;AACrD,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,KAAK,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,gEAAgE;AAChE,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,MAAM,EAAE,IAAI,CAAC;IACb,kEAAkE;IAClE,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;IAC9C;;;;OAIG;IACH,IAAI,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;CAChC;AAED;;;;GAIG;AACH,MAAM,WAAW,QAAQ;IACvB,gFAAgF;IAChF,KAAK,CAAC,GAAG,EAAE,KAAK,GAAG,OAAO,CAAC;IAC3B,kEAAkE;IAClE,GAAG,EAAE,MAAM,CAAC;CACb"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/interaction/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,kCAAkC;AAClC,MAAM,WAAW,UAAU;IACzB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,4EAA4E;AAC5E,MAAM,WAAW,cAAc;IAC7B,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC;CACd;AAED,2CAA2C;AAC3C,MAAM,WAAW,KAAK;IACpB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,qEAAqE;IACrE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,CAAC,GAAG,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC3C;;;;;OAKG;IACH,KAAK,CAAC,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;CACrE;AAED,qDAAqD;AACrD,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,KAAK,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,gEAAgE;AAChE,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,MAAM,EAAE,IAAI,CAAC;IACb,kEAAkE;IAClE,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;IAC9C;;;;OAIG;IACH,IAAI,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;CAChC;AAED;;;;GAIG;AACH,MAAM,WAAW,QAAQ;IACvB,gFAAgF;IAChF,KAAK,CAAC,GAAG,EAAE,KAAK,GAAG,OAAO,CAAC;IAC3B,kEAAkE;IAClE,GAAG,EAAE,MAAM,CAAC;CACb"}